indas-ui 0.0.1 → 0.1.0

package/dist/components/datagrid/columns/ColumnContextMenu.js

@@ -0,0 +1,338 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Filter, SortAsc, SortDesc, Eye, EyeOff, Pin, PinOff, Copy, Settings, ChevronRight, X, Check, Search, Calculator, BarChart3, ArrowUpDown, Move, } from 'lucide-react';
+import { Button } from '../../ui/index.js';
+import { Input } from '../../ui/index.js';
+import { Checkbox } from '../../ui/index.js';
+import { Separator } from '../../ui/index.js';
+import { Badge } from '../../ui/index.js';
+export function ColumnContextMenu({ column, table, data, isVisible, position, onClose, onApplyFilter, }) {
+    const [activeSubmenu, setActiveSubmenu] = useState(null);
+    const [quickFilterValue, setQuickFilterValue] = useState('');
+    const [columnStats, setColumnStats] = useState(null);
+    const [selectedValues, setSelectedValues] = useState(new Set());
+    const columnId = column.id;
+    const columnHeader = typeof column.columnDef.header === 'string'
+        ? column.columnDef.header
+        : columnId;
+    // Hidden columns can't be right-clicked to restore, so surface them here for unhiding.
+    const NON_DATA_COLUMN_IDS = new Set(['select', 'selection', 'actions', 'expand', 'drag']);
+    const hiddenColumns = table
+        ? table.getAllColumns()
+            .filter((c) => c.getCanHide() && !c.getIsVisible() && !NON_DATA_COLUMN_IDS.has(c.id))
+            .map((c) => ({
+            id: c.id,
+            label: typeof c.columnDef.header === 'string' ? c.columnDef.header : c.id,
+            show: () => c.toggleVisibility(true),
+        }))
+        : [];
+    // Calculate column statistics
+    useEffect(() => {
+        if (isVisible && data.length > 0) {
+            const values = data.map(row => row[columnId]).filter(val => val != null);
+            const uniqueValues = [...new Set(values.map(v => String(v)))].sort();
+            let dataType = 'string';
+            let min, max, avg, sum;
+            if (values.length > 0) {
+                const firstValue = values[0];
+                if (typeof firstValue === 'boolean') {
+                    dataType = 'boolean';
+                }
+                else if (typeof firstValue === 'number') {
+                    dataType = 'number';
+                    min = Math.min(...values);
+                    max = Math.max(...values);
+                    sum = values.reduce((a, b) => a + b, 0);
+                    avg = sum / values.length;
+                }
+                else if (firstValue instanceof Date || (typeof firstValue === 'string' && !isNaN(Date.parse(firstValue)))) {
+                    dataType = 'date';
+                    const dates = values.map(v => new Date(v)).filter(d => !isNaN(d.getTime()));
+                    if (dates.length > 0) {
+                        min = new Date(Math.min(...dates.map(d => d.getTime())));
+                        max = new Date(Math.max(...dates.map(d => d.getTime())));
+                    }
+                }
+            }
+            setColumnStats({
+                totalCount: data.length,
+                uniqueCount: uniqueValues.length,
+                nullCount: data.length - values.length,
+                dataType,
+                min,
+                max,
+                avg,
+                sum,
+                uniqueValues: uniqueValues.slice(0, 100), // Limit for performance
+            });
+        }
+    }, [isVisible, data, columnId]);
+    const handleQuickFilter = (filterType, value) => {
+        onApplyFilter(columnId, filterType, value || quickFilterValue);
+        onClose();
+    };
+    const handleValueFilter = () => {
+        if (selectedValues.size > 0) {
+            onApplyFilter(columnId, 'in', Array.from(selectedValues));
+            onClose();
+        }
+    };
+    const copyColumnValues = () => {
+        const values = data.map(row => row[columnId]).join('\n');
+        navigator.clipboard.writeText(values);
+        onClose();
+    };
+    const copyUniqueValues = () => {
+        if (columnStats) {
+            const uniqueText = columnStats.uniqueValues.join('\n');
+            navigator.clipboard.writeText(uniqueText);
+            onClose();
+        }
+    };
+    if (!isVisible)
+        return null;
+    // Check if this is a select/checkbox column
+    const columnMeta = column.columnDef.meta;
+    const isSelectColumn = columnMeta?.isSelectColumn || column.id === 'select' || columnId === 'select';
+    const menuItems = [
+        // Sorting
+        {
+            id: 'sort',
+            label: 'Sort',
+            icon: ArrowUpDown,
+            hasSubmenu: true,
+            submenu: [
+                {
+                    id: 'sort-asc',
+                    label: 'Sort Ascending',
+                    icon: SortAsc,
+                    action: () => {
+                        column.toggleSorting(false);
+                        onClose();
+                    }
+                },
+                {
+                    id: 'sort-desc',
+                    label: 'Sort Descending',
+                    icon: SortDesc,
+                    action: () => {
+                        column.toggleSorting(true);
+                        onClose();
+                    }
+                },
+                {
+                    id: 'clear-sort',
+                    label: 'Clear Sort',
+                    icon: X,
+                    action: () => {
+                        column.clearSorting();
+                        onClose();
+                    }
+                }
+            ]
+        },
+        // Filtering
+        {
+            id: 'filter',
+            label: 'Filter',
+            icon: Filter,
+            hasSubmenu: true,
+            submenu: [
+                {
+                    id: 'quick-filter',
+                    label: 'Quick Filter',
+                    icon: Search,
+                    custom: true
+                },
+                {
+                    id: 'value-filter',
+                    label: 'Filter by Values',
+                    icon: Check,
+                    custom: true
+                },
+                { id: 'separator' },
+                {
+                    id: 'clear-filter',
+                    label: 'Clear Filter',
+                    icon: X,
+                    action: () => {
+                        column.setFilterValue(undefined);
+                        onClose();
+                    }
+                }
+            ]
+        },
+        // Column Operations
+        {
+            id: 'column-ops',
+            label: 'Column',
+            icon: Settings,
+            hasSubmenu: true,
+            submenu: [
+                {
+                    id: 'hide-column',
+                    label: column.getIsVisible() ? 'Hide Column' : 'Show Column',
+                    icon: column.getIsVisible() ? EyeOff : Eye,
+                    action: () => {
+                        column.toggleVisibility();
+                        onClose();
+                    }
+                },
+                // Restore any hidden column without opening the advanced filter.
+                ...(hiddenColumns.length > 0 ? [{
+                        id: 'show-hidden',
+                        label: `Show Hidden Columns (${hiddenColumns.length})`,
+                        icon: Eye,
+                        custom: true,
+                    }] : []),
+                // Only show Pin Left/Right/Unpin for non-select columns
+                ...(!isSelectColumn ? [
+                    {
+                        id: 'pin-left',
+                        label: 'Pin Left',
+                        icon: Pin,
+                        action: () => {
+                            column.pin('left');
+                            onClose();
+                        }
+                    },
+                    {
+                        id: 'pin-right',
+                        label: 'Pin Right',
+                        icon: Pin,
+                        action: () => {
+                            column.pin('right');
+                            onClose();
+                        }
+                    },
+                    {
+                        id: 'unpin',
+                        label: 'Unpin',
+                        icon: PinOff,
+                        action: () => {
+                            column.pin(false);
+                            onClose();
+                        }
+                    }
+                ] : []),
+                { id: 'separator' },
+                {
+                    id: 'resize-auto',
+                    label: 'Auto Resize',
+                    icon: Move,
+                    action: () => {
+                        // Auto resize logic would go here
+                        onClose();
+                    }
+                }
+            ]
+        },
+        // Statistics & Analysis
+        {
+            id: 'stats',
+            label: 'Statistics',
+            icon: BarChart3,
+            hasSubmenu: true,
+            submenu: [
+                {
+                    id: 'column-stats',
+                    label: 'Column Stats',
+                    icon: Calculator,
+                    custom: true
+                }
+            ]
+        },
+        { id: 'separator' },
+        // Copy Operations
+        {
+            id: 'copy',
+            label: 'Copy',
+            icon: Copy,
+            hasSubmenu: true,
+            submenu: [
+                {
+                    id: 'copy-values',
+                    label: 'Copy All Values',
+                    icon: Copy,
+                    action: copyColumnValues
+                },
+                {
+                    id: 'copy-unique',
+                    label: 'Copy Unique Values',
+                    icon: Copy,
+                    action: copyUniqueValues
+                },
+                {
+                    id: 'copy-header',
+                    label: 'Copy Header',
+                    icon: Copy,
+                    action: () => {
+                        navigator.clipboard.writeText(columnHeader);
+                        onClose();
+                    }
+                }
+            ]
+        }
+    ];
+    const renderSubmenu = () => {
+        const activeItem = menuItems.find(item => item.id === activeSubmenu);
+        if (!activeItem?.submenu)
+            return null;
+        // Detect if submenu should open left or right based on available space
+        const spaceOnRight = window.innerWidth - position.x - 250;
+        const openLeft = spaceOnRight < 320;
+        return (_jsx(motion.div, { initial: { opacity: 0, x: openLeft ? 10 : -10 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: openLeft ? 10 : -10 }, className: `absolute ${openLeft ? 'right-full mr-1' : 'left-full ml-1'} top-0 bg-white border border-gray-200 rounded-lg shadow-lg z-[10000] min-w-[12rem] max-w-[20rem] w-max`, children: activeItem.submenu.map((item, index) => {
+                if (item.id === 'separator') {
+                    return _jsx(Separator, { className: "my-1" }, index);
+                }
+                if (item.custom) {
+                    // Render custom components
+                    if (item.id === 'quick-filter') {
+                        return (_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "space-y-2", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Quick Filter" }), _jsx(Input, { placeholder: `Filter ${columnHeader}...`, value: quickFilterValue, onChange: (e) => setQuickFilterValue(e.target.value), className: "w-full h-7 text-xs", autoFocus: true }), _jsxs("div", { className: "flex gap-1 flex-wrap", children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => handleQuickFilter('contains'), disabled: !quickFilterValue, className: "h-6 text-xs px-2 flex-shrink-0", children: "Contains" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleQuickFilter('equals'), disabled: !quickFilterValue, className: "h-6 text-xs px-2 flex-shrink-0", children: "Equals" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleQuickFilter('starts_with'), disabled: !quickFilterValue, className: "h-6 text-xs px-2 flex-shrink-0", children: "Starts With" }), columnStats?.dataType === 'number' && (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", variant: "outline", onClick: () => handleQuickFilter('greater_than'), disabled: !quickFilterValue, className: "h-6 text-xs px-2 flex-shrink-0", children: ">" }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => handleQuickFilter('less_than'), disabled: !quickFilterValue, className: "h-6 text-xs px-2 flex-shrink-0", children: "<" })] }))] })] }) }, item.id));
+                    }
+                    if (item.id === 'value-filter' && columnStats) {
+                        // Filter unique values based on Quick Filter input (trim whitespace)
+                        const searchValue = quickFilterValue.trim();
+                        const filteredValues = searchValue
+                            ? columnStats.uniqueValues.filter(value => String(value).toLowerCase().includes(searchValue.toLowerCase()))
+                            : columnStats.uniqueValues;
+                        return (_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Filter by Values" }), _jsxs(Badge, { variant: "secondary", className: "text-xs", children: [filteredValues.length, " ", searchValue ? `of ${columnStats.uniqueCount}` : 'unique'] })] }), _jsx("div", { className: "max-h-64 overflow-y-auto space-y-1.5", children: filteredValues.length > 0 ? (filteredValues.map((value) => (_jsxs("div", { className: "flex items-center space-x-2 hover:bg-[rgb(var(--bg-subtle))] cursor-pointer px-1 py-0.5 rounded", children: [_jsx(Checkbox, { checked: selectedValues.has(value), onChange: (e) => {
+                                                        const newSelected = new Set(selectedValues);
+                                                        if (e.target.checked) {
+                                                            newSelected.add(value);
+                                                        }
+                                                        else {
+                                                            newSelected.delete(value);
+                                                        }
+                                                        setSelectedValues(newSelected);
+                                                    }, className: "cursor-pointer" }), _jsx("span", { className: "text-xs truncate flex-1", children: value })] }, value)))) : (_jsxs("div", { className: "text-xs text-[rgb(var(--fg-muted))] italic text-center py-2", children: ["No values match \"", searchValue, "\""] })) }), _jsxs(Button, { size: "sm", onClick: handleValueFilter, disabled: selectedValues.size === 0, className: "w-full h-7 text-xs", children: ["Apply Filter (", selectedValues.size, ")"] })] }) }, item.id));
+                    }
+                    if (item.id === 'show-hidden') {
+                        return (_jsx("div", { className: "p-2 border-b", children: _jsxs("div", { className: "space-y-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Hidden Columns" }), _jsx(Badge, { variant: "secondary", className: "text-xs", children: hiddenColumns.length })] }), _jsx("div", { className: "max-h-64 overflow-y-auto space-y-1", children: hiddenColumns.map((col) => (_jsxs("button", { onClick: () => {
+                                                col.show();
+                                                onClose();
+                                            }, className: "w-full flex items-center gap-2 px-2 py-1 text-left text-xs rounded hover:bg-[rgb(var(--bg-subtle))]", children: [_jsx(Eye, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] flex-shrink-0" }), _jsx("span", { className: "truncate flex-1", children: col.label })] }, col.id))) })] }) }, item.id));
+                    }
+                    if (item.id === 'column-stats' && columnStats) {
+                        return (_jsxs("div", { className: "p-2 space-y-1.5", children: [_jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))]", children: "Column Statistics" }), _jsxs("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs", children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Total:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.totalCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Unique:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.uniqueCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Null:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.nullCount.toLocaleString() }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Type:" }), _jsx("div", { className: "text-right", children: _jsx(Badge, { variant: "outline", className: "text-xs h-4", children: columnStats.dataType }) }), columnStats.dataType === 'number' && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Min:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.min }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Max:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.max }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Avg:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.avg?.toFixed(2) }), _jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: "Sum:" }), _jsx("span", { className: "font-medium text-right", children: columnStats.sum?.toLocaleString() })] }))] })] }, item.id));
+                    }
+                }
+                const Icon = item.icon;
+                return (_jsxs("button", { onClick: item.action, className: "w-full px-3 py-1.5 text-left text-sm hover:bg-[rgb(var(--bg-subtle))] flex items-center space-x-3 transition-colors", children: [Icon && _jsx(Icon, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }), _jsx("span", { className: "flex-1", children: item.label })] }, item.id));
+            }) }));
+    };
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[9998]", onClick: onClose }), _jsxs(motion.div, { initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.95 }, style: {
+                    position: 'fixed',
+                    left: Math.min(position.x, window.innerWidth - 250),
+                    top: Math.min(position.y, window.innerHeight - 400),
+                    zIndex: 9999,
+                }, className: "bg-white border border-gray-200 rounded-lg shadow-lg min-w-[10rem] max-w-[20rem] w-max py-1", children: [_jsx("div", { className: "p-2 border-b bg-gray-50", children: _jsx("div", { className: "text-sm font-medium text-[rgb(var(--fg-default))] truncate", children: columnHeader }) }), _jsxs("div", { className: "relative", children: [menuItems.map((item, index) => {
+                                if (item.id === 'separator') {
+                                    return _jsx(Separator, { className: "my-0.5" }, index);
+                                }
+                                const Icon = item.icon;
+                                return (_jsxs("button", { onMouseEnter: () => item.hasSubmenu ? setActiveSubmenu(item.id) : setActiveSubmenu(null), onClick: item.hasSubmenu ? undefined : item.action, className: "w-full p-2 text-left text-sm hover:bg-[rgb(var(--bg-subtle))] flex items-center justify-between transition-colors group", children: [_jsxs("div", { className: "flex items-center gap-2", children: [Icon && _jsx(Icon, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))]" }), _jsx("span", { children: item.label })] }), item.hasSubmenu && (_jsx(ChevronRight, { className: "h-3.5 w-3.5 text-[rgb(var(--fg-muted))] group-hover:text-[rgb(var(--fg-default))]" }))] }, item.id));
+                            }), _jsx(AnimatePresence, { children: activeSubmenu && renderSubmenu() })] })] })] }));
+}

package/dist/components/datagrid/columns/DraggableColumnHeader.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Header } from '@tanstack/react-table';
+interface DraggableColumnHeaderProps<TData> {
+    header: Header<TData, unknown>;
+    enableReordering?: boolean;
+    enableResizing?: boolean;
+    enableFreezing?: boolean;
+    enableGrouping?: boolean;
+    isGrouped?: boolean;
+    isFrozen?: boolean;
+    isLastFrozen?: boolean;
+    isFirstPinnedRight?: boolean;
+    isLastColumn?: boolean;
+    onRightClick?: (header: Header<TData, unknown>, event: React.MouseEvent) => void;
+    onFilterClick?: (header: Header<TData, unknown>, event: React.MouseEvent) => void;
+    style?: React.CSSProperties;
+}
+export declare function DraggableColumnHeader<TData>({ header, enableReordering, enableResizing, enableFreezing, enableGrouping, isGrouped, isFrozen, isLastFrozen, isFirstPinnedRight, isLastColumn, onRightClick, onFilterClick, style, }: DraggableColumnHeaderProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/columns/DraggableColumnHeader.js

@@ -0,0 +1,147 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { flexRender } from '@tanstack/react-table';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ArrowUp, ArrowDown, GripVertical, Plus, RefreshCw, ListFilter } from 'lucide-react';
+import { cn } from '../../../lib/utils.js';
+export function DraggableColumnHeader({ header, enableReordering = true, enableResizing = true, enableFreezing = true, enableGrouping = false, isGrouped = false, isFrozen = false, isLastFrozen = false, isFirstPinnedRight = false, isLastColumn = false, onRightClick, onFilterClick, style, }) {
+    // Prevent hydration mismatch by using client-side only rendering for dynamic widths
+    const [isClient, setIsClient] = useState(false);
+    useEffect(() => {
+        setIsClient(true);
+    }, []);
+    // Check if this is a utility column (select, expand) — no drag/sort/resize
+    const isSelectColumn = header.column.columnDef.meta?.isSelectColumn ||
+        header.column.columnDef.meta?.skipSearch ||
+        header.column.id === 'select' ||
+        header.column.id === 'expand';
+    // Check for header actions in column meta
+    const headerActions = header.column.columnDef.meta?.headerActions;
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging, } = useSortable({
+        id: header.column.id,
+        disabled: !enableReordering || isSelectColumn, // Disable dragging for select columns
+    });
+    const dragStyle = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    const sortDirection = header.column.getIsSorted();
+    // Render select column differently - no drag/sort features
+    if (isSelectColumn) {
+        // Background gradient for shortened vertical separator (only if not last column)
+        const selectSeparatorGradient = !isLastColumn
+            ? 'linear-gradient(to bottom, transparent 0%, transparent 20%, rgb(var(--bd-medium)) 20%, rgb(var(--bd-medium)) 80%, transparent 80%, transparent 100%)'
+            : undefined;
+        return (_jsx("th", { style: {
+                width: `${header.getSize()}px`,
+                height: '2.75rem', // Fixed height matching regular columns
+                position: 'relative',
+                // Bottom border only
+                boxShadow: 'inset 0 -1px 0 rgb(var(--bd-default))',
+                // Shortened vertical separator via background gradient
+                backgroundImage: selectSeparatorGradient,
+                backgroundPosition: 'right',
+                backgroundSize: '1px 100%',
+                backgroundRepeat: 'no-repeat',
+            }, className: "relative select-none px-1 py-2 text-center text-xs font-medium text-[rgb(var(--fg-default))] overflow-hidden align-middle", children: _jsx("div", { className: "flex items-center justify-center w-full h-full", children: header.isPlaceholder
+                    ? null
+                    : flexRender(header.column.columnDef.header, header.getContext()) }) }));
+    }
+    // Build box-shadow for consistent rendering across zoom levels
+    const headerBoxShadow = [
+        // Bottom border
+        'inset 0 -1px 0 rgb(var(--bd-default))',
+        // Left shadow for first pinned right column
+        ...(isFirstPinnedRight ? ['-2px 0 5px -2px rgba(0,0,0,0.1)'] : [])
+    ].join(', ');
+    // Background gradient for shortened vertical separator (only if not last column)
+    const separatorGradient = !isLastColumn
+        ? 'linear-gradient(to bottom, transparent 0%, transparent 20%, rgb(var(--bd-medium)) 20%, rgb(var(--bd-medium)) 80%, transparent 80%, transparent 100%)'
+        : undefined;
+    // Handle HTML5 drag start for grouping
+    const handleDragStart = (e) => {
+        if (enableGrouping) {
+            e.dataTransfer.setData('text/plain', header.column.id);
+            e.dataTransfer.effectAllowed = 'copy';
+        }
+    };
+    return (_jsxs("th", { ref: setNodeRef, style: {
+            width: isClient ? `${header.getSize()}px` : '120px', // Use default width during SSR
+            height: '2.75rem', // Fixed height for consistency (44px = 2 lines + reduced padding)
+            position: 'relative',
+            boxShadow: headerBoxShadow,
+            backgroundImage: separatorGradient,
+            backgroundPosition: 'right',
+            backgroundSize: '1px 100%',
+            backgroundRepeat: 'no-repeat',
+            ...dragStyle, // Apply drag styles for transform/transition
+            ...style, // Apply custom styles last to allow overriding
+        }, className: cn('relative select-none px-1 py-1 text-center text-xs font-medium text-[rgb(var(--fg-default))] overflow-hidden align-top', isDragging && 'opacity-50 z-50', header.column.getCanSort() && 'cursor-pointer', enableReordering && 'group', isGrouped && 'bg-[rgb(var(--color-primary))]/5 border-b-2 border-[rgb(var(--color-primary))]'), draggable: enableGrouping, onDragStart: handleDragStart, onContextMenu: (e) => {
+            e.preventDefault();
+            onRightClick?.(header, e);
+        }, children: [_jsxs("div", { className: "flex items-center justify-between h-full", children: [_jsxs("div", { className: "flex items-center space-x-1 flex-1 min-w-0 relative", children: [_jsxs("div", { className: "flex-1 min-w-0 cursor-pointer relative", onClick: header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined, title: typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : undefined, style: {
+                                    maxHeight: '2.25rem', // ~2 lines with reduced spacing
+                                    overflow: 'hidden',
+                                    display: '-webkit-box',
+                                    WebkitLineClamp: 2,
+                                    WebkitBoxOrient: 'vertical',
+                                    lineHeight: '1.125rem', // Tighter line height for more compact text
+                                    wordBreak: 'break-word',
+                                    textOverflow: 'ellipsis'
+                                }, children: [header.isPlaceholder
+                                        ? null
+                                        : flexRender(header.column.columnDef.header, header.getContext()), enableReordering && (_jsx("div", { ...(attributes && { ...attributes, 'aria-describedby': undefined }), ...listeners, className: "absolute top-0 left-0 opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing p-1 bg-white/90 hover:bg-[rgb(var(--color-primary))]/10 border border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] rounded shadow-sm hover:shadow-md transition-all duration-200 z-10 sm:block hidden", onClick: (e) => e.stopPropagation(), children: _jsx(GripVertical, { className: "h-3 w-3 text-[rgb(var(--color-icon))]" }) })), onFilterClick && (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            onFilterClick(header, e);
+                                        }, className: "absolute top-0 right-0 opacity-0 group-hover:opacity-100 p-1 bg-white/90 hover:bg-[rgb(var(--color-primary))]/10 border border-[rgb(var(--bd-default))] hover:border-[rgb(var(--color-primary))] rounded shadow-sm hover:shadow-md transition-all duration-200 z-10 sm:block hidden", tabIndex: -1, children: _jsx(ListFilter, { className: "h-3 w-3 text-[rgb(var(--color-icon))]" }) }))] }), headerActions && (_jsxs("div", { className: "flex items-center gap-1 ml-1 flex-shrink-0", children: [headerActions.onAdd && (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            headerActions.onAdd();
+                                        }, className: "p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded transition-colors", tabIndex: -1, children: _jsx(Plus, { className: "h-3.5 w-3.5 text-[rgb(var(--color-icon))]" }) })), headerActions.onRefresh && (_jsx("button", { type: "button", onClick: (e) => {
+                                            e.stopPropagation();
+                                            headerActions.onRefresh();
+                                        }, className: "p-0.5 hover:bg-[rgb(var(--bg-hover))] rounded transition-colors", tabIndex: -1, children: _jsx(RefreshCw, { className: "h-3.5 w-3.5 text-[rgb(var(--color-icon))]" }) }))] }))] }), header.column.getCanSort() && sortDirection && (_jsx(motion.div, { initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, className: "flex-shrink-0 ml-1", children: sortDirection === 'asc' ? (_jsx(ArrowUp, { className: "h-3 w-3 text-[rgb(var(--color-primary))]" })) : (_jsx(ArrowDown, { className: "h-3 w-3 text-[rgb(var(--color-primary))]" })) }))] }), enableResizing && header.column.getCanResize() && (_jsx("div", { className: cn('absolute -right-1 top-0 w-3 h-full select-none touch-none z-30 flex items-center justify-center', 'opacity-0 group-hover:opacity-100 transition-all duration-200', header.column.getIsResizing() && 'opacity-100'), style: {
+                    cursor: 'url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'16\' height=\'16\' viewBox=\'0 0 16 16\'%3E%3Crect x=\'7\' y=\'2\' width=\'2\' height=\'12\' rx=\'1\' fill=\'%231f2937\'/%3E%3Cpath d=\'M4 8l2-2v4l-2-2zm8 0l-2-2v4l2-2z\' fill=\'%231f2937\'/%3E%3C/svg%3E") 8 8, col-resize'
+                }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onDoubleClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    // Toggle between original width and max content width (like Excel/Google Sheets)
+                    const currentSize = header.column.getSize();
+                    const originalSize = header.column.columnDef.size || 150; // Original/optimal width from intelligent sizing
+                    // Calculate max content width by measuring actual cell content
+                    const table = header.getContext().table;
+                    const rows = table.getRowModel().rows;
+                    const columnId = header.column.id;
+                    // Measure max content width from all visible cells
+                    let maxContentWidth = originalSize;
+                    rows.forEach(row => {
+                        const cell = row.getAllCells().find(c => c.column.id === columnId);
+                        if (cell) {
+                            const value = cell.getValue();
+                            if (value !== null && value !== undefined) {
+                                // Estimate width: ~7px per character + padding
+                                const textLength = String(value).length;
+                                const estimatedWidth = (textLength * 7) + 24; // 24px for padding
+                                maxContentWidth = Math.max(maxContentWidth, estimatedWidth);
+                            }
+                        }
+                    });
+                    // Cap at reasonable maximum
+                    maxContentWidth = Math.min(maxContentWidth, 800);
+                    // If close to original, expand to max content; otherwise collapse to original
+                    const isAtOriginal = Math.abs(currentSize - originalSize) < 30; // 30px tolerance
+                    if (isAtOriginal) {
+                        // Expand to maximum content width
+                        table.setColumnSizing((prev) => ({
+                            ...prev,
+                            [columnId]: maxContentWidth
+                        }));
+                    }
+                    else {
+                        // Collapse to original/default width
+                        header.column.resetSize();
+                    }
+                }, children: _jsx("div", { className: cn('w-1 h-full rounded-sm transition-all duration-200 shadow-sm', 'bg-[rgb(var(--bd-medium))]', 'hover:bg-[rgb(var(--bd-strong))] hover:shadow-md', header.column.getIsResizing() && 'bg-[rgb(var(--color-primary))] shadow-lg scale-110') }) })), sortDirection && (_jsx(motion.div, { initial: { width: 0 }, animate: { width: '100%' }, transition: { duration: 0.3 }, className: "absolute bottom-0 left-0 h-0.5 bg-[rgb(var(--color-primary))]" }))] }));
+}

package/dist/components/datagrid/controls/AutoResizeButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface AutoResizeButtonProps {
+    onAutoResize: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare function AutoResizeButton({ onAutoResize, disabled, className, }: AutoResizeButtonProps): React.JSX.Element;
+export {};

package/dist/components/datagrid/controls/AutoResizeButton.js

@@ -0,0 +1,7 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Maximize2 } from 'lucide-react';
+import { Button } from '../../ui/index.js';
+export function AutoResizeButton({ onAutoResize, disabled = false, className = '', }) {
+    return (_jsx(Button, { variant: "outline", size: "sm", onClick: onAutoResize, disabled: disabled, className: `w-9 h-8 p-0 ${className}`, children: _jsx(Maximize2, { className: "h-3.5 w-3.5" }) }));
+}

package/dist/components/datagrid/controls/PaginationControls.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const DEFAULT_PAGE_SIZE = 100;
+export declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
+interface PaginationControlsProps {
+    pageIndex: number;
+    pageSize: number;
+    totalRows: number;
+    pageSizeOptions?: number[];
+    onPageChange: (pageIndex: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+}
+export declare function PaginationControls({ pageIndex, pageSize, totalRows, pageSizeOptions, onPageChange, onPageSizeChange, }: PaginationControlsProps): React.JSX.Element;
+export {};

package/dist/components/datagrid/controls/PaginationControls.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDevice } from '../../../contexts/DeviceContext.js';
+import { ChevronsLeft, ChevronLeft, ChevronRight, ChevronsRight, } from 'lucide-react';
+import { calculatePaginationInfo, generatePageNumbers, formatNumber } from '../utils/grid-helpers.js';
+import { Dropdown } from '../../index.js';
+// Default pagination configuration
+export const DEFAULT_PAGE_SIZE = 100;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [25, 50, 100, 200, 500];
+export function PaginationControls({ pageIndex, pageSize, totalRows, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, onPageChange, onPageSizeChange, }) {
+    const { startRow, endRow, totalPages, hasNextPage, hasPreviousPage } = calculatePaginationInfo(totalRows, pageIndex, pageSize);
+    const pageNumbers = generatePageNumbers(pageIndex, totalPages);
+    const { isMobile } = useDevice();
+    if (totalRows === 0) {
+        return null;
+    }
+    // Mobile: "Showing…" on its own line, pager centred below it so the buttons keep
+    // their touch targets and never get squeezed. sm+: single row as before.
+    return (_jsxs("div", { className: "flex flex-wrap items-center justify-between px-2 sm:px-3 py-1 bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))] gap-x-2 gap-y-1", children: [_jsxs("div", { className: "text-xs text-[rgb(var(--fg-muted))] flex-shrink-0", children: ["Showing ", _jsx("span", { className: "font-medium", children: formatNumber(startRow) }), ' - ', _jsx("span", { className: "font-medium", children: formatNumber(endRow) }), ' of ', _jsx("span", { className: "font-medium", children: formatNumber(totalRows) })] }), _jsxs("div", { className: "flex items-center gap-1 order-3 sm:order-2 w-full sm:w-auto justify-center", children: [_jsx("button", { onClick: () => onPageChange(0), disabled: !hasPreviousPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "First Page", children: _jsx(ChevronsLeft, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }), _jsx("button", { onClick: () => onPageChange(pageIndex - 1), disabled: !hasPreviousPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Previous Page", children: _jsx(ChevronLeft, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }), _jsx("div", { className: "flex items-center gap-1 mx-2", children: pageNumbers.map((page, index) => {
+                            if (page === 'ellipsis') {
+                                return (_jsx("span", { className: "px-2 text-[rgb(var(--fg-muted))]", children: "..." }, `ellipsis-${index}`));
+                            }
+                            const isCurrentPage = page === pageIndex;
+                            return (_jsx("button", { onClick: () => onPageChange(page), className: `
+                  min-w-[32px] h-8 px-2 rounded text-sm font-medium transition-colors
+                  ${isCurrentPage
+                                    ? 'border border-[rgb(var(--color-primary))] text-[rgb(var(--color-primary))] bg-[rgb(var(--color-primary)/0.08)]'
+                                    : 'text-[rgb(var(--fg-default))] hover:bg-[rgb(var(--bd-default))]'}
+                `, children: page + 1 }, page));
+                        }) }), _jsx("button", { onClick: () => onPageChange(pageIndex + 1), disabled: !hasNextPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Next Page", children: _jsx(ChevronRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) }), _jsx("button", { onClick: () => onPageChange(totalPages - 1), disabled: !hasNextPage, className: "p-1.5 rounded hover:bg-[rgb(var(--bd-default))] disabled:opacity-40 disabled:cursor-not-allowed transition-colors", "aria-label": "Last Page", children: _jsx(ChevronsRight, { className: "h-4 w-4 text-[rgb(var(--fg-muted))]" }) })] }), !isMobile && (_jsxs("div", { className: "flex items-center gap-2 text-sm text-[rgb(var(--fg-default))] flex-shrink-0 order-2 sm:order-3", children: [_jsx("span", { className: "hidden sm:inline", children: "Show:" }), _jsx(Dropdown, { value: String(pageSize), onValueChange: (value) => onPageSizeChange(Number(value)), options: pageSizeOptions.map((size) => ({
+                            value: String(size),
+                            label: String(size),
+                        })), placeholder: "Rows", className: "w-[6rem] h-[1.75rem] text-sm", searchable: false }), _jsx("span", { className: "hidden sm:inline", children: "rows" })] }))] }));
+}

package/dist/components/datagrid/controls/SummaryControls.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+import { SummaryConfig } from '../utils/grid-types.js';
+interface SummaryControlsProps<TData> {
+    table: Table<TData>;
+    data: TData[];
+    config: SummaryConfig<TData>;
+}
+export declare function SummaryControls<TData>({ table, data, config }: SummaryControlsProps<TData>): React.JSX.Element;
+export {};

package/dist/components/datagrid/controls/SummaryControls.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { calculateAllSummaries } from '../rows/summary.js';
+export function SummaryControls({ table, data, config }) {
+    if (!config || !config.columns || Object.keys(config.columns).length === 0) {
+        return null;
+    }
+    // Calculate summary values
+    const summaries = calculateAllSummaries(data, config.columns);
+    const visibleColumns = table.getVisibleLeafColumns();
+    // Get columns that have summary config
+    const summaryEntries = Object.entries(config.columns).filter(([columnKey]) => {
+        // Check if the column is visible
+        return visibleColumns.some(col => col.id === columnKey);
+    });
+    if (summaryEntries.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "flex items-center justify-between px-4 py-1.5 bg-[rgb(var(--bg-subtle))] border-t border-[rgb(var(--bd-default))] gap-4 flex-wrap", children: _jsx("div", { className: "flex items-center gap-6 flex-wrap", children: summaryEntries.map(([columnKey, columnConfig]) => {
+                const value = summaries[columnKey];
+                const summaryConfig = columnConfig;
+                // Find column header name
+                const column = visibleColumns.find(col => col.id === columnKey);
+                const columnName = column?.columnDef.header || columnKey;
+                return (_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [summaryConfig.label ? (_jsx("span", { className: "text-[rgb(var(--fg-muted))]", children: summaryConfig.label })) : (_jsxs("span", { className: "text-[rgb(var(--fg-muted))]", children: [columnName, ":"] })), _jsx("span", { className: "font-semibold text-[rgb(var(--color-primary))]", children: value })] }, columnKey));
+            }) }) }));
+}