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

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

@@ -1,34 +1,73 @@
 import React from "react";
 export type DescriptionListVariant = "horizontal" | "vertical";
+/**
+ * Edge padding behavior for list items (mirrors Table's `padding`).
+ * - `default`: items get horizontal side padding.
+ * - `flush`: items have zero side padding so labels/values align flush with the
+ *   container edges (e.g. inside a padded Card).
+ */
+export type DescriptionListPadding = "default" | "flush";
 export interface DescriptionListTheme {
     /** Base styles for the <dl> container */
     baseStyle: string;
     /** Styles for each item wrapper */
     itemStyle: string;
-    /** Styles for the term (<dt>) */
-    termStyle: string;
-    /** Styles for the detail (<dd>) */
-    detailStyle: string;
+    /** Edge-padding mode classes applied to each item */
+    paddingStyles: Record<DescriptionListPadding, string>;
+    /** Styles for the label (<dt>) */
+    labelStyle: string;
+    /** Styles for the value (<dd>) */
+    valueStyle: string;
 }
 export interface DescriptionListThemeOverrides {
     baseStyle?: string;
     itemStyle?: string;
-    termStyle?: string;
-    detailStyle?: string;
+    paddingStyles?: Partial<Record<DescriptionListPadding, string>>;
+    labelStyle?: string;
+    valueStyle?: string;
 }
 export interface DescriptionListContextValue {
     variant: DescriptionListVariant;
+    padding: DescriptionListPadding;
     theme: DescriptionListTheme;
 }
 export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
     /** Layout variant: "horizontal" (default) or "vertical" */
     variant?: DescriptionListVariant;
+    /**
+     * Edge padding behavior. `flush` (default) removes the item side padding so
+     * labels/values align flush with the container edges (e.g. inside a padded
+     * Card); `default` adds horizontal padding for standalone use.
+     */
+    padding?: DescriptionListPadding;
+    /**
+     * Data-driven items. When provided, the list renders from this array and any
+     * `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable — ideal for generative UI.
+     */
+    items?: DescriptionListItemData[];
     /** Custom theme overrides */
     theme?: DescriptionListThemeOverrides;
+    /** `DescriptionList.Item` children (compound API). Optional when `items` is used. */
+    children?: React.ReactNode;
+}
+/**
+ * A single key/value entry for the data-driven (`items`) API. Maps internally
+ * to `DescriptionList.Item`.
+ */
+export interface DescriptionListItemData {
+    /** The label (rendered as the <dt> term) */
+    label: React.ReactNode;
+    /** The value (rendered as the <dd> description) */
+    value: React.ReactNode;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
 }
 export interface DescriptionListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    /** The term / label */
-    term: React.ReactNode;
-    /** The detail / value */
-    detail: React.ReactNode;
+    /** The label (rendered as the <dt> term) */
+    label: React.ReactNode;
+    /** The value (rendered as the <dd> description) */
+    value: React.ReactNode;
 }

package/dist/components/data-display/DescriptionList/index.d.ts

@@ -1,2 +1,2 @@
 export { DescriptionList } from "./DescriptionList";
-export type { DescriptionListVariant, DescriptionListProps, DescriptionListItemProps, DescriptionListThemeOverrides, } from "./DescriptionList.types";
+export type { DescriptionListVariant, DescriptionListPadding, DescriptionListProps, DescriptionListItemProps, DescriptionListItemData, DescriptionListThemeOverrides, } from "./DescriptionList.types";

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

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React__default, { createContext, useMemo, useState, useCallback, useContext } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { ChevronUpDownIcon } from '@heroicons/react/16/solid';
@@ -19,10 +19,33 @@ const useFeedContext = () => {
 // ---------------------------------------------------------------------------
 // Feed (root)
 // ---------------------------------------------------------------------------
-const FeedRoot = React__default.forwardRef(({ children, className, theme: themeOverrides, ...props }, ref) => {
+/** Render one data-driven item to the compound `Feed.Item` primitive. */
+const renderItemData = (item, index) => {
+    var _a;
+    return (jsx(FeedItem, { icon: item.icon, timestamp: item.timestamp, indicatorClassName: item.indicatorClassName, className: item.className, children: item.content }, (_a = item.key) !== null && _a !== void 0 ? _a : index));
+};
+const FeedRoot = React__default.forwardRef(({ children, items, collapseAfter, className, theme: themeOverrides, ...props }, ref) => {
     const theme = useMemo(() => ({ ...feedTheme, ...themeOverrides }), [themeOverrides]);
     const contextValue = useMemo(() => ({ theme }), [theme]);
-    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: children }) }) }));
+    if (process.env.NODE_ENV !== "production" &&
+        items &&
+        React__default.Children.count(children) > 0) {
+        console.warn("[Feed]: both `items` and children were provided — `items` takes precedence and children are ignored.");
+    }
+    // Data-driven path maps to the same compound primitives as composition.
+    // With `collapseAfter`, overflow items are tucked into a Feed.Collapse.
+    let content = children;
+    if (items) {
+        if (collapseAfter != null && items.length > collapseAfter) {
+            const visible = items.slice(0, collapseAfter);
+            const hidden = items.slice(collapseAfter);
+            content = (jsxs(Fragment, { children: [visible.map(renderItemData), jsx(FeedCollapse, { children: hidden.map(renderItemData) })] }));
+        }
+        else {
+            content = items.map(renderItemData);
+        }
+    }
+    return (jsx(FeedContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cn(theme.baseStyle, className), ...props, children: jsx("ul", { role: "list", className: theme.listStyle, children: content }) }) }));
 });
 FeedRoot.displayName = "Feed";
 // ---------------------------------------------------------------------------
@@ -87,7 +110,7 @@ const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = fal
     if (shouldReduceMotion) {
         return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [expanded && (jsx("span", { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60" })), !expanded ? (jsxs("div", { className: "relative", style: { height: COLLAPSED_HEIGHT }, children: [jsx("svg", { "aria-hidden": "true", className: theme.collapseSvgStyle, style: { left: "calc(1.25rem - 1px)" }, width: SVG_WIDTH, height: COLLAPSED_HEIGHT, fill: "none", children: jsx("path", { d: CURVE_PATH, stroke: "var(--color-border)", strokeOpacity: "0.6", strokeWidth: STROKE_WIDTH }) }), jsxs("button", { type: "button", className: "absolute top-1/2 -translate-y-1/2 flex items-center gap-2.5 cursor-pointer bg-transparent border-none p-0", style: {
                                 left: `calc(1.25rem - 1px + ${CURVE_APEX_X + 12}px)`,
-                            }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] })) : (jsxs("div", { children: [clonedChildren, jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) })] }))] }));
+                            }, onClick: handleToggle, "aria-expanded": false, children: [jsx("div", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ", children: collapseIcon }), jsx("span", { className: theme.collapseButtonStyle, children: resolvedLabel })] })] })) : (jsxs("div", { children: [clonedChildren, jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) })] }))] }));
     }
     /* ---- Full multi-stage animation ---- */
     return (jsxs("li", { className: cn(theme.collapseStyle, className), children: [jsx(motion.span, { "aria-hidden": "true", className: "absolute left-5 -translate-x-1/2 top-0 h-full w-0.5 bg-[var(--color-border)]/60", animate: { opacity: expanded ? 1 : 0 }, transition: { duration: 0.2 } }), jsx(motion.div, { animate: {
@@ -109,7 +132,7 @@ const FeedCollapse = ({ label = "Show {count} more", icon, defaultExpanded = fal
                         }, transition: {
                             duration: 0.25,
                             delay: expanded ? STAGGER_BASE_DELAY + count * STAGGER_IN : 0,
-                        }, children: jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-background-secondary)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) }) })] })] }));
+                        }, children: jsx("div", { className: "relative pb-8", children: jsxs("div", { className: theme.itemContentStyle, children: [jsx("div", { className: "flex size-8 ml-1 shrink-0 items-center justify-center rounded-full bg-[var(--color-surface)] ring-2 ring-[var(--color-background)]/50", children: collapseIcon }), jsx("div", { className: theme.contentStyle, children: jsx("button", { type: "button", className: theme.collapseButtonStyle, onClick: handleToggle, "aria-expanded": true, children: "Show less" }) })] }) }) })] })] }));
 };
 FeedCollapse.displayName = "Feed.Collapse";
 // ---------------------------------------------------------------------------

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

@@ -6,7 +6,7 @@ const feedTheme = {
     itemContentStyle: "relative flex items-start space-x-4",
     connectorStyle: "feed-connector absolute top-5 left-5 -translate-x-1/2 h-full w-0.5 bg-[var(--color-border)]",
     // Indicators
-    indicatorStyle: "relative flex size-8 ml-1 shrink-0 items-center justify-center bg-[var(--color-background-secondary)] rounded-full ring-2 ring-[var(--color-background)]/50",
+    indicatorStyle: "relative flex size-8 ml-1 shrink-0 items-center justify-center bg-[var(--color-surface)] rounded-full ring-2 ring-[var(--color-background)]/50",
     dotIndicatorStyle: "relative flex size-10 items-center justify-center",
     // Content
     contentStyle: "min-w-0 flex-1 pt-1",

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

@@ -28,10 +28,41 @@ export interface FeedThemeOverrides {
     collapseSvgStyle?: string;
 }
 export interface FeedProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+    /** `Feed.Item` / `Feed.Collapse` children (compound API). Optional when `items` is used. */
+    children?: ReactNode;
+    /**
+     * Data-driven items. When provided, the feed renders from this array and any
+     * `children` are ignored (dev-warns). Omit it to use the compound API.
+     * Fully serializable (resolve icon NAMES upstream) — ideal for generative UI.
+     */
+    items?: FeedItemData[];
+    /**
+     * When set with `items`, items beyond this count are wrapped in a
+     * `Feed.Collapse` (shown behind a "Show N more" toggle). Ignored for the
+     * compound API.
+     */
+    collapseAfter?: number;
     theme?: FeedThemeOverrides;
     className?: string;
 }
+/**
+ * A single feed entry for the data-driven (`items`) API. Maps internally to
+ * `Feed.Item`.
+ */
+export interface FeedItemData {
+    /** Icon or avatar element rendered as the indicator */
+    icon?: ReactNode;
+    /** Timestamp label (e.g. "6d ago") */
+    timestamp?: ReactNode;
+    /** Body content (maps to the Feed.Item children) */
+    content?: ReactNode;
+    /** Custom className for the indicator wrapper (icon background circle) */
+    indicatorClassName?: string;
+    /** Optional className forwarded to the item wrapper */
+    className?: string;
+    /** Stable React key (falls back to the array index) */
+    key?: string | number;
+}
 /** @internal Injected by Feed.Collapse via cloneElement */
 export interface FeedItemInternalProps {
     _as?: "li" | "div";

package/dist/components/data-display/Feed/index.d.ts

@@ -1,2 +1,2 @@
 export { Feed } from "./Feed";
-export type { FeedProps, FeedItemProps, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";
+export type { FeedProps, FeedItemProps, FeedItemData, FeedCollapseProps, FeedItemInternalProps, FeedTheme, FeedThemeOverrides, } from "./Feed.types";

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);