@papernote/ui 1.6.0 → 1.7.0

package/dist/index.js

@@ -23,6 +23,21 @@ function _interopNamespaceDefault(e) {
     return Object.freeze(n);
 }
 
+function _mergeNamespaces(n, m) {
+    m.forEach(function (e) {
+        e && typeof e !== 'string' && !Array.isArray(e) && Object.keys(e).forEach(function (k) {
+            if (k !== 'default' && !(k in n)) {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    });
+    return Object.freeze(n);
+}
+
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 /**
@@ -765,13 +780,15 @@ const optionSizeClasses = {
  * ```
  */
 const Select = React.forwardRef((props, ref) => {
-    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', } = props;
+    const { options = [], groups = [], value, onChange, placeholder = 'Select an option', searchable = false, disabled = false, label, helperText, error, loading = false, clearable = false, creatable = false, onCreateOption, virtualized = false, virtualHeight = '300px', virtualItemHeight = 42, size = 'md', mobileMode = 'auto', usePortal = true, } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const [searchQuery, setSearchQuery] = React.useState('');
     const [scrollTop, setScrollTop] = React.useState(0);
     const [activeDescendant] = React.useState(undefined);
+    const [dropdownPosition, setDropdownPosition] = React.useState(null);
     const selectRef = React.useRef(null);
     const buttonRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
     const searchInputRef = React.useRef(null);
     const mobileSearchInputRef = React.useRef(null);
     const listRef = React.useRef(null);
@@ -859,7 +876,11 @@ const Select = React.forwardRef((props, ref) => {
         if (useMobileSheet)
             return; // Mobile sheet handles its own closing
         const handleClickOutside = (event) => {
-            if (selectRef.current && !selectRef.current.contains(event.target)) {
+            const target = event.target;
+            // Check if click is outside both the select trigger and the dropdown portal
+            const isOutsideSelect = selectRef.current && !selectRef.current.contains(target);
+            const isOutsideDropdown = dropdownRef.current && !dropdownRef.current.contains(target);
+            if (isOutsideSelect && isOutsideDropdown) {
                 setIsOpen(false);
                 setSearchQuery('');
             }
@@ -883,6 +904,46 @@ const Select = React.forwardRef((props, ref) => {
             }
         }
     }, [isOpen, searchable, useMobileSheet]);
+    // Calculate dropdown position with collision detection and scroll/resize handling
+    React.useEffect(() => {
+        if (!isOpen || useMobileSheet || !usePortal) {
+            setDropdownPosition(null);
+            return;
+        }
+        const updatePosition = () => {
+            if (!buttonRef.current)
+                return;
+            const rect = buttonRef.current.getBoundingClientRect();
+            const dropdownHeight = 240; // max-h-60 = 15rem = 240px
+            const gap = 2; // Small gap to visually connect to trigger
+            const viewportHeight = window.innerHeight;
+            // Check if there's enough space below
+            const spaceBelow = viewportHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            const hasSpaceBelow = spaceBelow >= dropdownHeight + gap;
+            const hasSpaceAbove = spaceAbove >= dropdownHeight + gap;
+            // Prefer bottom placement, flip to top if not enough space below but enough above
+            const placement = hasSpaceBelow || !hasSpaceAbove ? 'bottom' : 'top';
+            const top = placement === 'bottom'
+                ? rect.bottom + gap
+                : rect.top - dropdownHeight - gap;
+            setDropdownPosition({
+                top,
+                left: rect.left,
+                width: rect.width,
+                placement,
+            });
+        };
+        // Initial position calculation
+        updatePosition();
+        // Listen for scroll events on all scrollable ancestors
+        window.addEventListener('scroll', updatePosition, true);
+        window.addEventListener('resize', updatePosition);
+        return () => {
+            window.removeEventListener('scroll', updatePosition, true);
+            window.removeEventListener('resize', updatePosition);
+        };
+    }, [isOpen, useMobileSheet, usePortal]);
     // Lock body scroll when mobile sheet is open
     React.useEffect(() => {
         if (useMobileSheet && isOpen) {
@@ -959,16 +1020,22 @@ const Select = React.forwardRef((props, ref) => {
               ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
             `, "aria-labelledby": label ? labelId : undefined, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), children: [jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }), options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))), groups.map((group) => (jsxRuntime.jsx("optgroup", { label: group.label, children: group.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value))) }, group.label)))] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: "absolute right-3 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-500 pointer-events-none" })] }), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
     }
-    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsxs("div", { ref: selectRef, className: "relative", children: [jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
+    return (jsxRuntime.jsxs("div", { className: "w-full", children: [label && (jsxRuntime.jsx("label", { id: labelId, className: "label", children: label })), jsxRuntime.jsx("div", { ref: selectRef, className: "relative", children: jsxRuntime.jsxs("button", { ref: buttonRef, type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
             input w-full flex items-center justify-between px-3
             ${sizeClasses$a[effectiveSize]}
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
             ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
           `, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-controls": listboxId, "aria-labelledby": label ? labelId : undefined, "aria-label": !label ? placeholder : undefined, "aria-activedescendant": activeDescendant, "aria-invalid": error ? 'true' : undefined, "aria-describedby": error ? errorId : (helperText ? helperTextId : undefined), "aria-disabled": disabled, children: [jsxRuntime.jsxs("span", { className: `flex items-center gap-2 ${selectedOption ? 'text-ink-800' : 'text-ink-400'}`, children: [loading && jsxRuntime.jsx(lucideReact.Loader2, { className: "h-4 w-4 animate-spin text-ink-500" }), !loading && selectedOption?.icon && jsxRuntime.jsx("span", { children: selectedOption.icon }), selectedOption ? selectedOption.label : placeholder] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [clearable && value && (jsxRuntime.jsx("button", { type: "button", onClick: (e) => {
-                                            e.stopPropagation();
-                                            onChange?.('');
-                                            setIsOpen(false);
-                                        }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }), isOpen && !useMobileSheet && (jsxRuntime.jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))] }), isOpen && useMobileSheet && reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: 'env(safe-area-inset-bottom)' }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
+                                        e.stopPropagation();
+                                        onChange?.('');
+                                        setIsOpen(false);
+                                    }, className: "text-ink-400 hover:text-ink-600 transition-colors p-0.5", "aria-label": "Clear selection", children: jsxRuntime.jsx(lucideReact.X, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'}` }) })), jsxRuntime.jsx(lucideReact.ChevronDown, { className: `${effectiveSize === 'lg' ? 'h-5 w-5' : 'h-4 w-4'} text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }) }), isOpen && !useMobileSheet && (usePortal ? dropdownPosition : true) && (usePortal ? reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: `fixed z-[9999] bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in ${dropdownPosition?.placement === 'top' ? 'origin-bottom' : 'origin-top'}`, style: {
+                    top: dropdownPosition.top,
+                    left: dropdownPosition.left,
+                    width: dropdownPosition.width,
+                }, children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }), document.body) : (
+            // Non-portal dropdown (inline, relative positioning)
+            jsxRuntime.jsxs("div", { ref: dropdownRef, className: "absolute z-50 mt-1 w-full bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 max-h-60 overflow-hidden animate-fade-in", children: [searchable && (jsxRuntime.jsx("div", { className: "p-2 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), jsxRuntime.jsx("input", { ref: searchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full pl-9 pr-3 py-2 text-sm border border-paper-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options", "aria-autocomplete": "list", "aria-controls": listboxId })] }) })), jsxRuntime.jsx("div", { ref: listRef, id: listboxId, className: "overflow-y-auto", style: { maxHeight: useVirtualScrolling ? virtualHeight : '12rem' }, onScroll: (e) => useVirtualScrolling && setScrollTop(e.currentTarget.scrollTop), role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(false) })] }))), isOpen && useMobileSheet && reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed inset-0 z-50 flex items-end", onClick: (e) => e.target === e.currentTarget && handleClose(), role: "dialog", "aria-modal": "true", "aria-labelledby": label ? `mobile-${labelId}` : undefined, children: [jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/50 animate-fade-in" }), jsxRuntime.jsxs("div", { className: "relative w-full bg-white rounded-t-2xl shadow-2xl animate-slide-up max-h-[85vh] flex flex-col", style: { paddingBottom: 'env(safe-area-inset-bottom)' }, children: [jsxRuntime.jsx("div", { className: "py-3 cursor-grab", children: jsxRuntime.jsx("div", { className: "w-12 h-1.5 bg-ink-300 rounded-full mx-auto" }) }), jsxRuntime.jsxs("div", { className: "px-4 pb-3 border-b border-paper-200 flex items-center justify-between", children: [label && (jsxRuntime.jsx("h2", { id: `mobile-${labelId}`, className: "text-lg font-semibold text-ink-900", children: label })), !label && (jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-ink-900", children: placeholder })), jsxRuntime.jsx("button", { onClick: handleClose, className: "text-ink-400 hover:text-ink-600 transition-colors p-2 -mr-2", "aria-label": "Close", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) })] }), searchable && (jsxRuntime.jsx("div", { className: "p-3 border-b border-paper-200", children: jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx(lucideReact.Search, { className: "absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-ink-400" }), jsxRuntime.jsx("input", { ref: mobileSearchInputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", inputMode: "search", enterKeyHint: "search", className: "w-full pl-12 pr-4 py-3 text-base border border-paper-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-400 focus:border-accent-400", role: "searchbox", "aria-label": "Search options" })] }) })), jsxRuntime.jsx("div", { id: listboxId, className: "overflow-y-auto flex-1", role: "listbox", "aria-label": "Available options", "aria-multiselectable": "false", children: renderOptionsContent(true) })] })] }), document.body), error && (jsxRuntime.jsx("p", { id: errorId, className: "mt-2 text-xs text-error-600", role: "alert", "aria-live": "assertive", children: error })), helperText && !error && (jsxRuntime.jsx("p", { id: helperTextId, className: "mt-2 text-xs text-ink-600", children: helperText }))] }));
 });
 Select.displayName = 'Select';
 
@@ -10121,256 +10188,6 @@ mobileView = 'auto', cardConfig, cardGap = 'md', cardClassName, }) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderPaginationControls(), shouldShowCardView ? cardViewContent : finalContent, contextMenuState.isOpen && contextMenuState.item && (jsxRuntime.jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
 }
 
-// Color mapping for action buttons
-const colorClasses = {
-    primary: 'bg-accent-500 text-white',
-    success: 'bg-success-500 text-white',
-    warning: 'bg-warning-500 text-white',
-    error: 'bg-error-500 text-white',
-    default: 'bg-paper-500 text-white',
-};
-/**
- * SwipeActions - Touch-based swipe actions for list items
- *
- * Wraps any content with swipe-to-reveal actions, commonly used in mobile
- * list items for quick actions like delete, archive, edit, etc.
- *
- * Features:
- * - Left and right swipe actions
- * - Full swipe to trigger primary action
- * - Spring-back animation
- * - Touch and mouse support
- * - Customizable thresholds
- *
- * @example Basic delete action
- * ```tsx
- * <SwipeActions
- *   leftActions={[
- *     {
- *       id: 'delete',
- *       label: 'Delete',
- *       icon: <Trash className="h-5 w-5" />,
- *       color: 'error',
- *       onClick: () => handleDelete(item),
- *       primary: true,
- *     },
- *   ]}
- * >
- *   <div className="p-4 bg-white">
- *     List item content
- *   </div>
- * </SwipeActions>
- * ```
- *
- * @example Multiple actions on both sides
- * ```tsx
- * <SwipeActions
- *   leftActions={[
- *     { id: 'delete', label: 'Delete', icon: <Trash />, color: 'error', onClick: handleDelete },
- *     { id: 'archive', label: 'Archive', icon: <Archive />, color: 'warning', onClick: handleArchive },
- *   ]}
- *   rightActions={[
- *     { id: 'edit', label: 'Edit', icon: <Edit />, color: 'primary', onClick: handleEdit },
- *   ]}
- *   fullSwipe
- * >
- *   <ListItem />
- * </SwipeActions>
- * ```
- */
-function SwipeActions({ children, leftActions = [], rightActions = [], threshold = 80, fullSwipeThreshold = 0.5, fullSwipe = false, disabled = false, onSwipeChange, className = '', }) {
-    const containerRef = React.useRef(null);
-    const contentRef = React.useRef(null);
-    // Swipe state
-    const [translateX, setTranslateX] = React.useState(0);
-    const [isDragging, setIsDragging] = React.useState(false);
-    const [activeDirection, setActiveDirection] = React.useState(null);
-    // Touch/mouse tracking
-    const startX = React.useRef(0);
-    const currentX = React.useRef(0);
-    const startTime = React.useRef(0);
-    // Calculate action widths
-    const leftActionsWidth = leftActions.length * 72; // 72px per action
-    const rightActionsWidth = rightActions.length * 72;
-    // Reset position
-    const resetPosition = React.useCallback(() => {
-        setTranslateX(0);
-        setActiveDirection(null);
-        onSwipeChange?.(null);
-    }, [onSwipeChange]);
-    // Handle touch/mouse start
-    const handleStart = React.useCallback((clientX) => {
-        if (disabled)
-            return;
-        startX.current = clientX;
-        currentX.current = clientX;
-        startTime.current = Date.now();
-        setIsDragging(true);
-    }, [disabled]);
-    // Handle touch/mouse move
-    const handleMove = React.useCallback((clientX) => {
-        if (!isDragging || disabled)
-            return;
-        const deltaX = clientX - startX.current;
-        currentX.current = clientX;
-        // Determine direction and apply resistance at boundaries
-        let newTranslateX = deltaX;
-        // Swiping left (reveals left actions on right side)
-        if (deltaX < 0) {
-            if (leftActions.length === 0) {
-                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
-            }
-            else {
-                const maxSwipe = fullSwipe
-                    ? -(containerRef.current?.offsetWidth || 300)
-                    : -leftActionsWidth;
-                newTranslateX = Math.max(maxSwipe, deltaX);
-                // Apply resistance past the action buttons
-                if (newTranslateX < -leftActionsWidth) {
-                    const overSwipe = newTranslateX + leftActionsWidth;
-                    newTranslateX = -leftActionsWidth + overSwipe * 0.3;
-                }
-            }
-            setActiveDirection('left');
-            onSwipeChange?.('left');
-        }
-        // Swiping right (reveals right actions on left side)
-        else if (deltaX > 0) {
-            if (rightActions.length === 0) {
-                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
-            }
-            else {
-                const maxSwipe = fullSwipe
-                    ? (containerRef.current?.offsetWidth || 300)
-                    : rightActionsWidth;
-                newTranslateX = Math.min(maxSwipe, deltaX);
-                // Apply resistance past the action buttons
-                if (newTranslateX > rightActionsWidth) {
-                    const overSwipe = newTranslateX - rightActionsWidth;
-                    newTranslateX = rightActionsWidth + overSwipe * 0.3;
-                }
-            }
-            setActiveDirection('right');
-            onSwipeChange?.('right');
-        }
-        setTranslateX(newTranslateX);
-    }, [isDragging, disabled, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, onSwipeChange]);
-    // Handle touch/mouse end
-    const handleEnd = React.useCallback(() => {
-        if (!isDragging)
-            return;
-        setIsDragging(false);
-        const deltaX = currentX.current - startX.current;
-        const velocity = Math.abs(deltaX) / (Date.now() - startTime.current);
-        const containerWidth = containerRef.current?.offsetWidth || 300;
-        // Check for full swipe trigger
-        if (fullSwipe) {
-            const swipePercentage = Math.abs(translateX) / containerWidth;
-            if (swipePercentage >= fullSwipeThreshold || velocity > 0.5) {
-                // Find primary action and trigger it
-                if (translateX < 0 && leftActions.length > 0) {
-                    const primaryAction = leftActions.find(a => a.primary) || leftActions[0];
-                    primaryAction.onClick();
-                    resetPosition();
-                    return;
-                }
-                else if (translateX > 0 && rightActions.length > 0) {
-                    const primaryAction = rightActions.find(a => a.primary) || rightActions[0];
-                    primaryAction.onClick();
-                    resetPosition();
-                    return;
-                }
-            }
-        }
-        // Snap to open or closed position
-        if (Math.abs(translateX) >= threshold || velocity > 0.3) {
-            // Snap open
-            if (translateX < 0 && leftActions.length > 0) {
-                setTranslateX(-leftActionsWidth);
-                setActiveDirection('left');
-                onSwipeChange?.('left');
-            }
-            else if (translateX > 0 && rightActions.length > 0) {
-                setTranslateX(rightActionsWidth);
-                setActiveDirection('right');
-                onSwipeChange?.('right');
-            }
-            else {
-                resetPosition();
-            }
-        }
-        else {
-            // Snap closed
-            resetPosition();
-        }
-    }, [isDragging, translateX, threshold, fullSwipe, fullSwipeThreshold, leftActions, rightActions, leftActionsWidth, rightActionsWidth, resetPosition, onSwipeChange]);
-    // Touch event handlers
-    const handleTouchStart = (e) => {
-        handleStart(e.touches[0].clientX);
-    };
-    const handleTouchMove = (e) => {
-        handleMove(e.touches[0].clientX);
-    };
-    const handleTouchEnd = () => {
-        handleEnd();
-    };
-    // Mouse event handlers (for testing/desktop)
-    const handleMouseDown = (e) => {
-        handleStart(e.clientX);
-    };
-    const handleMouseMove = (e) => {
-        handleMove(e.clientX);
-    };
-    const handleMouseUp = () => {
-        handleEnd();
-    };
-    // Close on outside click
-    React.useEffect(() => {
-        if (activeDirection === null)
-            return;
-        const handleClickOutside = (e) => {
-            if (containerRef.current && !containerRef.current.contains(e.target)) {
-                resetPosition();
-            }
-        };
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => document.removeEventListener('mousedown', handleClickOutside);
-    }, [activeDirection, resetPosition]);
-    // Handle mouse leave during drag
-    React.useEffect(() => {
-        if (!isDragging)
-            return;
-        const handleMouseLeave = () => {
-            handleEnd();
-        };
-        document.addEventListener('mouseup', handleMouseLeave);
-        return () => document.removeEventListener('mouseup', handleMouseLeave);
-    }, [isDragging, handleEnd]);
-    // Render action button
-    const renderActionButton = (action) => {
-        const colorClass = colorClasses[action.color || 'default'];
-        return (jsxRuntime.jsxs("button", { onClick: (e) => {
-                e.stopPropagation();
-                action.onClick();
-                resetPosition();
-            }, className: `
-          flex flex-col items-center justify-center
-          w-18 h-full min-w-[72px]
-          ${colorClass}
-          transition-transform duration-150
-        `, style: {
-                transform: isDragging ? 'scale(1)' : 'scale(1)',
-            }, children: [action.icon && (jsxRuntime.jsx("div", { className: "mb-1", children: action.icon })), jsxRuntime.jsx("span", { className: "text-xs font-medium", children: action.label })] }, action.id));
-    };
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: isDragging ? handleMouseMove : undefined, onMouseUp: handleMouseUp, onMouseLeave: isDragging ? handleEnd : undefined, children: [rightActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 flex", style: { width: rightActionsWidth }, children: rightActions.map((action) => renderActionButton(action)) })), leftActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 flex", style: { width: leftActionsWidth }, children: leftActions.map((action) => renderActionButton(action)) })), jsxRuntime.jsx("div", { ref: contentRef, className: `
-          relative bg-white
-          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
-        `, style: {
-                    transform: `translateX(${translateX}px)`,
-                    touchAction: 'pan-y', // Allow vertical scrolling
-                }, children: children })] }));
-}
-
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -10402,86 +10219,6 @@ function getAugmentedNamespace(n) {
 	return a;
 }
 
-var classnames = {exports: {}};
-
-/*!
-	Copyright (c) 2018 Jed Watson.
-	Licensed under the MIT License (MIT), see
-	http://jedwatson.github.io/classnames
-*/
-
-(function (module) {
-	/* global define */
-
-	(function () {
-
-		var hasOwn = {}.hasOwnProperty;
-
-		function classNames () {
-			var classes = '';
-
-			for (var i = 0; i < arguments.length; i++) {
-				var arg = arguments[i];
-				if (arg) {
-					classes = appendClass(classes, parseValue(arg));
-				}
-			}
-
-			return classes;
-		}
-
-		function parseValue (arg) {
-			if (typeof arg === 'string' || typeof arg === 'number') {
-				return arg;
-			}
-
-			if (typeof arg !== 'object') {
-				return '';
-			}
-
-			if (Array.isArray(arg)) {
-				return classNames.apply(null, arg);
-			}
-
-			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
-				return arg.toString();
-			}
-
-			var classes = '';
-
-			for (var key in arg) {
-				if (hasOwn.call(arg, key) && arg[key]) {
-					classes = appendClass(classes, key);
-				}
-			}
-
-			return classes;
-		}
-
-		function appendClass (value, newClass) {
-			if (!newClass) {
-				return value;
-			}
-		
-			if (value) {
-				return value + ' ' + newClass;
-			}
-		
-			return value + newClass;
-		}
-
-		if (module.exports) {
-			classNames.default = classNames;
-			module.exports = classNames;
-		} else {
-			window.classNames = classNames;
-		}
-	}()); 
-} (classnames));
-
-var classnamesExports = classnames.exports;
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
-
 /**
  * Represents unions.
  * (A1, A1:C5, ...)
@@ -32241,7 +31978,7 @@ const Utils$2 = utils$2;
 /**
  * A Excel Formula Parser & Evaluator
  */
-let FormulaParser$2 = class FormulaParser {
+let FormulaParser$3 = class FormulaParser {
 
     /**
      * @param {{functions: {}, functionsNeedContext: {}, onVariable: function, onCell: function, onRange: function}} [config]
@@ -32572,7 +32309,7 @@ let FormulaParser$2 = class FormulaParser {
 };
 
 var hooks$1 = {
-    FormulaParser: FormulaParser$2};
+    FormulaParser: FormulaParser$3};
 
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
@@ -33028,7 +32765,7 @@ var hooks = {
     DepParser: DepParser$1,
 };
 
-const {FormulaParser} = hooks$1;
+const {FormulaParser: FormulaParser$1} = hooks$1;
 const {DepParser} = hooks;
 const SSF = ssf$1;
 const FormulaError = requireError();
@@ -33038,16 +32775,2271 @@ const FormulaError = requireError();
 //     `\nTotal: ${funs.length}/477, ${funs.length/477*100}% implemented.`);
 
 
-Object.assign(FormulaParser, {
+Object.assign(FormulaParser$1, {
     MAX_ROW: 1048576,
     MAX_COLUMN: 16384,
     SSF,
     DepParser,
     FormulaError, ...requireHelpers()
 });
-var fastFormulaParser = FormulaParser;
+var fastFormulaParser = FormulaParser$1;
+
+var FormulaParser$2 = /*@__PURE__*/getDefaultExportFromCjs(fastFormulaParser);
 
-var FormulaParser$1 = /*@__PURE__*/getDefaultExportFromCjs(fastFormulaParser);
+var FormulaParserModule = /*#__PURE__*/_mergeNamespaces({
+    __proto__: null,
+    default: FormulaParser$2
+}, [fastFormulaParser]);
+
+/**
+ * Formula definitions for DataGrid intellisense
+ * Based on fast-formula-parser supported functions
+ */
+const FORMULA_DEFINITIONS = [
+    // ==================== MATH ====================
+    {
+        name: 'SUM',
+        category: 'Math',
+        description: 'Adds all numbers in a range of cells',
+        syntax: 'SUM(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range to add' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=SUM(A1:A10)',
+    },
+    {
+        name: 'AVERAGE',
+        category: 'Math',
+        description: 'Returns the average of the arguments',
+        syntax: 'AVERAGE(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=AVERAGE(B1:B20)',
+    },
+    {
+        name: 'MIN',
+        category: 'Math',
+        description: 'Returns the minimum value in a list of arguments',
+        syntax: 'MIN(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=MIN(A1:A100)',
+    },
+    {
+        name: 'MAX',
+        category: 'Math',
+        description: 'Returns the maximum value in a list of arguments',
+        syntax: 'MAX(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=MAX(A1:A100)',
+    },
+    {
+        name: 'COUNT',
+        category: 'Math',
+        description: 'Counts the number of cells that contain numbers',
+        syntax: 'COUNT(value1, [value2], ...)',
+        parameters: [
+            { name: 'value1', description: 'First value or range' },
+            { name: 'value2', description: 'Additional values or ranges', optional: true },
+        ],
+        example: '=COUNT(A1:A50)',
+    },
+    {
+        name: 'COUNTA',
+        category: 'Math',
+        description: 'Counts the number of non-empty cells',
+        syntax: 'COUNTA(value1, [value2], ...)',
+        parameters: [
+            { name: 'value1', description: 'First value or range' },
+            { name: 'value2', description: 'Additional values or ranges', optional: true },
+        ],
+        example: '=COUNTA(A1:A50)',
+    },
+    {
+        name: 'ROUND',
+        category: 'Math',
+        description: 'Rounds a number to a specified number of digits',
+        syntax: 'ROUND(number, num_digits)',
+        parameters: [
+            { name: 'number', description: 'The number to round' },
+            { name: 'num_digits', description: 'Number of decimal places' },
+        ],
+        example: '=ROUND(3.14159, 2)',
+    },
+    {
+        name: 'ROUNDUP',
+        category: 'Math',
+        description: 'Rounds a number up, away from zero',
+        syntax: 'ROUNDUP(number, num_digits)',
+        parameters: [
+            { name: 'number', description: 'The number to round up' },
+            { name: 'num_digits', description: 'Number of decimal places' },
+        ],
+        example: '=ROUNDUP(3.14159, 2)',
+    },
+    {
+        name: 'ROUNDDOWN',
+        category: 'Math',
+        description: 'Rounds a number down, toward zero',
+        syntax: 'ROUNDDOWN(number, num_digits)',
+        parameters: [
+            { name: 'number', description: 'The number to round down' },
+            { name: 'num_digits', description: 'Number of decimal places' },
+        ],
+        example: '=ROUNDDOWN(3.14159, 2)',
+    },
+    {
+        name: 'ABS',
+        category: 'Math',
+        description: 'Returns the absolute value of a number',
+        syntax: 'ABS(number)',
+        parameters: [{ name: 'number', description: 'The number to get absolute value of' }],
+        example: '=ABS(-5)',
+    },
+    {
+        name: 'SQRT',
+        category: 'Math',
+        description: 'Returns the square root of a number',
+        syntax: 'SQRT(number)',
+        parameters: [{ name: 'number', description: 'The number to get square root of' }],
+        example: '=SQRT(16)',
+    },
+    {
+        name: 'POWER',
+        category: 'Math',
+        description: 'Returns the result of a number raised to a power',
+        syntax: 'POWER(number, power)',
+        parameters: [
+            { name: 'number', description: 'The base number' },
+            { name: 'power', description: 'The exponent' },
+        ],
+        example: '=POWER(2, 8)',
+    },
+    {
+        name: 'MOD',
+        category: 'Math',
+        description: 'Returns the remainder after division',
+        syntax: 'MOD(number, divisor)',
+        parameters: [
+            { name: 'number', description: 'The number to divide' },
+            { name: 'divisor', description: 'The number to divide by' },
+        ],
+        example: '=MOD(10, 3)',
+    },
+    {
+        name: 'INT',
+        category: 'Math',
+        description: 'Rounds a number down to the nearest integer',
+        syntax: 'INT(number)',
+        parameters: [{ name: 'number', description: 'The number to round down' }],
+        example: '=INT(3.7)',
+    },
+    {
+        name: 'CEILING',
+        category: 'Math',
+        description: 'Rounds a number up to the nearest multiple of significance',
+        syntax: 'CEILING(number, significance)',
+        parameters: [
+            { name: 'number', description: 'The number to round' },
+            { name: 'significance', description: 'The multiple to round to' },
+        ],
+        example: '=CEILING(4.3, 1)',
+    },
+    {
+        name: 'FLOOR',
+        category: 'Math',
+        description: 'Rounds a number down to the nearest multiple of significance',
+        syntax: 'FLOOR(number, significance)',
+        parameters: [
+            { name: 'number', description: 'The number to round' },
+            { name: 'significance', description: 'The multiple to round to' },
+        ],
+        example: '=FLOOR(4.7, 1)',
+    },
+    {
+        name: 'PRODUCT',
+        category: 'Math',
+        description: 'Multiplies all the numbers given as arguments',
+        syntax: 'PRODUCT(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=PRODUCT(A1:A5)',
+    },
+    {
+        name: 'SUMPRODUCT',
+        category: 'Math',
+        description: 'Returns the sum of the products of corresponding array components',
+        syntax: 'SUMPRODUCT(array1, [array2], ...)',
+        parameters: [
+            { name: 'array1', description: 'First array' },
+            { name: 'array2', description: 'Additional arrays', optional: true },
+        ],
+        example: '=SUMPRODUCT(A1:A5, B1:B5)',
+    },
+    {
+        name: 'RAND',
+        category: 'Math',
+        description: 'Returns a random number between 0 and 1',
+        syntax: 'RAND()',
+        parameters: [],
+        example: '=RAND()',
+    },
+    {
+        name: 'RANDBETWEEN',
+        category: 'Math',
+        description: 'Returns a random integer between the specified values',
+        syntax: 'RANDBETWEEN(bottom, top)',
+        parameters: [
+            { name: 'bottom', description: 'Minimum value' },
+            { name: 'top', description: 'Maximum value' },
+        ],
+        example: '=RANDBETWEEN(1, 100)',
+    },
+    // ==================== STATISTICAL ====================
+    {
+        name: 'COUNTIF',
+        category: 'Statistical',
+        description: 'Counts cells that meet a single criterion',
+        syntax: 'COUNTIF(range, criteria)',
+        parameters: [
+            { name: 'range', description: 'Range of cells to count' },
+            { name: 'criteria', description: 'Condition to match' },
+        ],
+        example: '=COUNTIF(A1:A10, ">5")',
+    },
+    {
+        name: 'COUNTIFS',
+        category: 'Statistical',
+        description: 'Counts cells that meet multiple criteria',
+        syntax: 'COUNTIFS(range1, criteria1, [range2], [criteria2], ...)',
+        parameters: [
+            { name: 'range1', description: 'First range to evaluate' },
+            { name: 'criteria1', description: 'First condition' },
+            { name: 'range2', description: 'Additional range', optional: true },
+            { name: 'criteria2', description: 'Additional condition', optional: true },
+        ],
+        example: '=COUNTIFS(A:A, ">5", B:B, "<10")',
+    },
+    {
+        name: 'SUMIF',
+        category: 'Statistical',
+        description: 'Sums cells that meet a single criterion',
+        syntax: 'SUMIF(range, criteria, [sum_range])',
+        parameters: [
+            { name: 'range', description: 'Range to evaluate' },
+            { name: 'criteria', description: 'Condition to match' },
+            { name: 'sum_range', description: 'Actual cells to sum', optional: true },
+        ],
+        example: '=SUMIF(A1:A10, ">5", B1:B10)',
+    },
+    {
+        name: 'SUMIFS',
+        category: 'Statistical',
+        description: 'Sums cells that meet multiple criteria',
+        syntax: 'SUMIFS(sum_range, range1, criteria1, [range2], [criteria2], ...)',
+        parameters: [
+            { name: 'sum_range', description: 'Cells to sum' },
+            { name: 'range1', description: 'First range to evaluate' },
+            { name: 'criteria1', description: 'First condition' },
+            { name: 'range2', description: 'Additional range', optional: true },
+            { name: 'criteria2', description: 'Additional condition', optional: true },
+        ],
+        example: '=SUMIFS(C:C, A:A, ">5", B:B, "<10")',
+    },
+    {
+        name: 'AVERAGEIF',
+        category: 'Statistical',
+        description: 'Averages cells that meet a single criterion',
+        syntax: 'AVERAGEIF(range, criteria, [average_range])',
+        parameters: [
+            { name: 'range', description: 'Range to evaluate' },
+            { name: 'criteria', description: 'Condition to match' },
+            { name: 'average_range', description: 'Actual cells to average', optional: true },
+        ],
+        example: '=AVERAGEIF(A1:A10, ">5", B1:B10)',
+    },
+    {
+        name: 'MEDIAN',
+        category: 'Statistical',
+        description: 'Returns the median of the given numbers',
+        syntax: 'MEDIAN(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=MEDIAN(A1:A100)',
+    },
+    {
+        name: 'MODE',
+        category: 'Statistical',
+        description: 'Returns the most frequently occurring value',
+        syntax: 'MODE(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=MODE(A1:A100)',
+    },
+    {
+        name: 'STDEV',
+        category: 'Statistical',
+        description: 'Estimates standard deviation based on a sample',
+        syntax: 'STDEV(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=STDEV(A1:A100)',
+    },
+    {
+        name: 'VAR',
+        category: 'Statistical',
+        description: 'Estimates variance based on a sample',
+        syntax: 'VAR(number1, [number2], ...)',
+        parameters: [
+            { name: 'number1', description: 'First number or range' },
+            { name: 'number2', description: 'Additional numbers or ranges', optional: true },
+        ],
+        example: '=VAR(A1:A100)',
+    },
+    {
+        name: 'LARGE',
+        category: 'Statistical',
+        description: 'Returns the k-th largest value in a data set',
+        syntax: 'LARGE(array, k)',
+        parameters: [
+            { name: 'array', description: 'Range to search' },
+            { name: 'k', description: 'Position from largest' },
+        ],
+        example: '=LARGE(A1:A100, 3)',
+    },
+    {
+        name: 'SMALL',
+        category: 'Statistical',
+        description: 'Returns the k-th smallest value in a data set',
+        syntax: 'SMALL(array, k)',
+        parameters: [
+            { name: 'array', description: 'Range to search' },
+            { name: 'k', description: 'Position from smallest' },
+        ],
+        example: '=SMALL(A1:A100, 3)',
+    },
+    {
+        name: 'RANK',
+        category: 'Statistical',
+        description: 'Returns the rank of a number in a list',
+        syntax: 'RANK(number, ref, [order])',
+        parameters: [
+            { name: 'number', description: 'The number to rank' },
+            { name: 'ref', description: 'Range of numbers' },
+            { name: 'order', description: '0 for descending, non-zero for ascending', optional: true },
+        ],
+        example: '=RANK(A1, A1:A100)',
+    },
+    {
+        name: 'PERCENTILE',
+        category: 'Statistical',
+        description: 'Returns the k-th percentile of values',
+        syntax: 'PERCENTILE(array, k)',
+        parameters: [
+            { name: 'array', description: 'Range of data' },
+            { name: 'k', description: 'Percentile value (0 to 1)' },
+        ],
+        example: '=PERCENTILE(A1:A100, 0.9)',
+    },
+    // ==================== LOOKUP ====================
+    {
+        name: 'VLOOKUP',
+        category: 'Lookup',
+        description: 'Looks for a value in the leftmost column and returns a value in the same row from a specified column',
+        syntax: 'VLOOKUP(lookup_value, table_array, col_index_num, [range_lookup])',
+        parameters: [
+            { name: 'lookup_value', description: 'Value to search for' },
+            { name: 'table_array', description: 'Table range to search' },
+            { name: 'col_index_num', description: 'Column number to return (1-based)' },
+            { name: 'range_lookup', description: 'FALSE for exact match, TRUE for approximate', optional: true },
+        ],
+        example: '=VLOOKUP(A1, B1:D10, 2, FALSE)',
+    },
+    {
+        name: 'HLOOKUP',
+        category: 'Lookup',
+        description: 'Looks for a value in the top row and returns a value in the same column from a specified row',
+        syntax: 'HLOOKUP(lookup_value, table_array, row_index_num, [range_lookup])',
+        parameters: [
+            { name: 'lookup_value', description: 'Value to search for' },
+            { name: 'table_array', description: 'Table range to search' },
+            { name: 'row_index_num', description: 'Row number to return (1-based)' },
+            { name: 'range_lookup', description: 'FALSE for exact match, TRUE for approximate', optional: true },
+        ],
+        example: '=HLOOKUP(A1, A1:Z3, 2, FALSE)',
+    },
+    {
+        name: 'INDEX',
+        category: 'Lookup',
+        description: 'Returns a value from a specific position in a range',
+        syntax: 'INDEX(array, row_num, [col_num])',
+        parameters: [
+            { name: 'array', description: 'Range of cells' },
+            { name: 'row_num', description: 'Row position' },
+            { name: 'col_num', description: 'Column position', optional: true },
+        ],
+        example: '=INDEX(A1:C10, 5, 2)',
+    },
+    {
+        name: 'MATCH',
+        category: 'Lookup',
+        description: 'Returns the relative position of an item in a range',
+        syntax: 'MATCH(lookup_value, lookup_array, [match_type])',
+        parameters: [
+            { name: 'lookup_value', description: 'Value to find' },
+            { name: 'lookup_array', description: 'Range to search' },
+            { name: 'match_type', description: '0 for exact, 1 for less than, -1 for greater than', optional: true },
+        ],
+        example: '=MATCH("Apple", A1:A10, 0)',
+    },
+    {
+        name: 'LOOKUP',
+        category: 'Lookup',
+        description: 'Looks up a value in a vector or array',
+        syntax: 'LOOKUP(lookup_value, lookup_vector, [result_vector])',
+        parameters: [
+            { name: 'lookup_value', description: 'Value to find' },
+            { name: 'lookup_vector', description: 'Range to search' },
+            { name: 'result_vector', description: 'Range to return from', optional: true },
+        ],
+        example: '=LOOKUP(5, A1:A10, B1:B10)',
+    },
+    {
+        name: 'CHOOSE',
+        category: 'Lookup',
+        description: 'Returns a value from a list based on an index',
+        syntax: 'CHOOSE(index_num, value1, [value2], ...)',
+        parameters: [
+            { name: 'index_num', description: 'Which value to return (1-based)' },
+            { name: 'value1', description: 'First value' },
+            { name: 'value2', description: 'Additional values', optional: true },
+        ],
+        example: '=CHOOSE(2, "Red", "Blue", "Green")',
+    },
+    {
+        name: 'ROW',
+        category: 'Lookup',
+        description: 'Returns the row number of a reference',
+        syntax: 'ROW([reference])',
+        parameters: [{ name: 'reference', description: 'Cell reference', optional: true }],
+        example: '=ROW(A5)',
+    },
+    {
+        name: 'COLUMN',
+        category: 'Lookup',
+        description: 'Returns the column number of a reference',
+        syntax: 'COLUMN([reference])',
+        parameters: [{ name: 'reference', description: 'Cell reference', optional: true }],
+        example: '=COLUMN(C1)',
+    },
+    {
+        name: 'ROWS',
+        category: 'Lookup',
+        description: 'Returns the number of rows in a reference',
+        syntax: 'ROWS(array)',
+        parameters: [{ name: 'array', description: 'Range reference' }],
+        example: '=ROWS(A1:A10)',
+    },
+    {
+        name: 'COLUMNS',
+        category: 'Lookup',
+        description: 'Returns the number of columns in a reference',
+        syntax: 'COLUMNS(array)',
+        parameters: [{ name: 'array', description: 'Range reference' }],
+        example: '=COLUMNS(A1:D1)',
+    },
+    {
+        name: 'OFFSET',
+        category: 'Lookup',
+        description: 'Returns a reference offset from a starting point',
+        syntax: 'OFFSET(reference, rows, cols, [height], [width])',
+        parameters: [
+            { name: 'reference', description: 'Starting cell' },
+            { name: 'rows', description: 'Rows to offset' },
+            { name: 'cols', description: 'Columns to offset' },
+            { name: 'height', description: 'Height of result', optional: true },
+            { name: 'width', description: 'Width of result', optional: true },
+        ],
+        example: '=OFFSET(A1, 2, 3)',
+    },
+    {
+        name: 'INDIRECT',
+        category: 'Lookup',
+        description: 'Returns the reference specified by a text string',
+        syntax: 'INDIRECT(ref_text, [a1])',
+        parameters: [
+            { name: 'ref_text', description: 'Reference as text' },
+            { name: 'a1', description: 'TRUE for A1 style, FALSE for R1C1', optional: true },
+        ],
+        example: '=INDIRECT("A" & B1)',
+    },
+    // ==================== TEXT ====================
+    {
+        name: 'CONCATENATE',
+        category: 'Text',
+        description: 'Joins several text strings into one',
+        syntax: 'CONCATENATE(text1, [text2], ...)',
+        parameters: [
+            { name: 'text1', description: 'First text' },
+            { name: 'text2', description: 'Additional text', optional: true },
+        ],
+        example: '=CONCATENATE(A1, " ", B1)',
+    },
+    {
+        name: 'CONCAT',
+        category: 'Text',
+        description: 'Joins text from multiple ranges',
+        syntax: 'CONCAT(text1, [text2], ...)',
+        parameters: [
+            { name: 'text1', description: 'First text or range' },
+            { name: 'text2', description: 'Additional text or ranges', optional: true },
+        ],
+        example: '=CONCAT(A1:A5)',
+    },
+    {
+        name: 'LEFT',
+        category: 'Text',
+        description: 'Returns the leftmost characters from a text string',
+        syntax: 'LEFT(text, [num_chars])',
+        parameters: [
+            { name: 'text', description: 'Text string' },
+            { name: 'num_chars', description: 'Number of characters', optional: true },
+        ],
+        example: '=LEFT(A1, 5)',
+    },
+    {
+        name: 'RIGHT',
+        category: 'Text',
+        description: 'Returns the rightmost characters from a text string',
+        syntax: 'RIGHT(text, [num_chars])',
+        parameters: [
+            { name: 'text', description: 'Text string' },
+            { name: 'num_chars', description: 'Number of characters', optional: true },
+        ],
+        example: '=RIGHT(A1, 5)',
+    },
+    {
+        name: 'MID',
+        category: 'Text',
+        description: 'Returns characters from the middle of a text string',
+        syntax: 'MID(text, start_num, num_chars)',
+        parameters: [
+            { name: 'text', description: 'Text string' },
+            { name: 'start_num', description: 'Starting position' },
+            { name: 'num_chars', description: 'Number of characters' },
+        ],
+        example: '=MID(A1, 3, 5)',
+    },
+    {
+        name: 'LEN',
+        category: 'Text',
+        description: 'Returns the number of characters in a text string',
+        syntax: 'LEN(text)',
+        parameters: [{ name: 'text', description: 'Text string' }],
+        example: '=LEN(A1)',
+    },
+    {
+        name: 'UPPER',
+        category: 'Text',
+        description: 'Converts text to uppercase',
+        syntax: 'UPPER(text)',
+        parameters: [{ name: 'text', description: 'Text to convert' }],
+        example: '=UPPER(A1)',
+    },
+    {
+        name: 'LOWER',
+        category: 'Text',
+        description: 'Converts text to lowercase',
+        syntax: 'LOWER(text)',
+        parameters: [{ name: 'text', description: 'Text to convert' }],
+        example: '=LOWER(A1)',
+    },
+    {
+        name: 'PROPER',
+        category: 'Text',
+        description: 'Capitalizes the first letter of each word',
+        syntax: 'PROPER(text)',
+        parameters: [{ name: 'text', description: 'Text to convert' }],
+        example: '=PROPER(A1)',
+    },
+    {
+        name: 'TRIM',
+        category: 'Text',
+        description: 'Removes extra spaces from text',
+        syntax: 'TRIM(text)',
+        parameters: [{ name: 'text', description: 'Text to trim' }],
+        example: '=TRIM(A1)',
+    },
+    {
+        name: 'CLEAN',
+        category: 'Text',
+        description: 'Removes non-printable characters from text',
+        syntax: 'CLEAN(text)',
+        parameters: [{ name: 'text', description: 'Text to clean' }],
+        example: '=CLEAN(A1)',
+    },
+    {
+        name: 'FIND',
+        category: 'Text',
+        description: 'Finds one text string within another (case-sensitive)',
+        syntax: 'FIND(find_text, within_text, [start_num])',
+        parameters: [
+            { name: 'find_text', description: 'Text to find' },
+            { name: 'within_text', description: 'Text to search in' },
+            { name: 'start_num', description: 'Starting position', optional: true },
+        ],
+        example: '=FIND("@", A1)',
+    },
+    {
+        name: 'SEARCH',
+        category: 'Text',
+        description: 'Finds one text string within another (case-insensitive)',
+        syntax: 'SEARCH(find_text, within_text, [start_num])',
+        parameters: [
+            { name: 'find_text', description: 'Text to find' },
+            { name: 'within_text', description: 'Text to search in' },
+            { name: 'start_num', description: 'Starting position', optional: true },
+        ],
+        example: '=SEARCH("test", A1)',
+    },
+    {
+        name: 'REPLACE',
+        category: 'Text',
+        description: 'Replaces part of a text string with different text',
+        syntax: 'REPLACE(old_text, start_num, num_chars, new_text)',
+        parameters: [
+            { name: 'old_text', description: 'Original text' },
+            { name: 'start_num', description: 'Starting position' },
+            { name: 'num_chars', description: 'Number of characters to replace' },
+            { name: 'new_text', description: 'Replacement text' },
+        ],
+        example: '=REPLACE(A1, 1, 3, "New")',
+    },
+    {
+        name: 'SUBSTITUTE',
+        category: 'Text',
+        description: 'Substitutes new text for old text in a string',
+        syntax: 'SUBSTITUTE(text, old_text, new_text, [instance_num])',
+        parameters: [
+            { name: 'text', description: 'Original text' },
+            { name: 'old_text', description: 'Text to replace' },
+            { name: 'new_text', description: 'Replacement text' },
+            { name: 'instance_num', description: 'Which occurrence to replace', optional: true },
+        ],
+        example: '=SUBSTITUTE(A1, "old", "new")',
+    },
+    {
+        name: 'TEXT',
+        category: 'Text',
+        description: 'Formats a number as text with a specified format',
+        syntax: 'TEXT(value, format_text)',
+        parameters: [
+            { name: 'value', description: 'Value to format' },
+            { name: 'format_text', description: 'Format code' },
+        ],
+        example: '=TEXT(A1, "$#,##0.00")',
+    },
+    {
+        name: 'VALUE',
+        category: 'Text',
+        description: 'Converts a text string that represents a number to a number',
+        syntax: 'VALUE(text)',
+        parameters: [{ name: 'text', description: 'Text to convert' }],
+        example: '=VALUE("123.45")',
+    },
+    {
+        name: 'REPT',
+        category: 'Text',
+        description: 'Repeats text a specified number of times',
+        syntax: 'REPT(text, number_times)',
+        parameters: [
+            { name: 'text', description: 'Text to repeat' },
+            { name: 'number_times', description: 'Number of repetitions' },
+        ],
+        example: '=REPT("*", 5)',
+    },
+    {
+        name: 'EXACT',
+        category: 'Text',
+        description: 'Checks if two text strings are exactly the same',
+        syntax: 'EXACT(text1, text2)',
+        parameters: [
+            { name: 'text1', description: 'First text' },
+            { name: 'text2', description: 'Second text' },
+        ],
+        example: '=EXACT(A1, B1)',
+    },
+    // ==================== LOGICAL ====================
+    {
+        name: 'IF',
+        category: 'Logical',
+        description: 'Returns one value if a condition is true, another if false',
+        syntax: 'IF(logical_test, value_if_true, [value_if_false])',
+        parameters: [
+            { name: 'logical_test', description: 'Condition to test' },
+            { name: 'value_if_true', description: 'Value if condition is true' },
+            { name: 'value_if_false', description: 'Value if condition is false', optional: true },
+        ],
+        example: '=IF(A1>10, "High", "Low")',
+    },
+    {
+        name: 'IFS',
+        category: 'Logical',
+        description: 'Checks multiple conditions and returns the first TRUE result',
+        syntax: 'IFS(condition1, value1, [condition2, value2], ...)',
+        parameters: [
+            { name: 'condition1', description: 'First condition' },
+            { name: 'value1', description: 'Value if first condition is true' },
+            { name: 'condition2', description: 'Second condition', optional: true },
+            { name: 'value2', description: 'Value if second condition is true', optional: true },
+        ],
+        example: '=IFS(A1>90, "A", A1>80, "B", A1>70, "C")',
+    },
+    {
+        name: 'AND',
+        category: 'Logical',
+        description: 'Returns TRUE if all arguments are true',
+        syntax: 'AND(logical1, [logical2], ...)',
+        parameters: [
+            { name: 'logical1', description: 'First condition' },
+            { name: 'logical2', description: 'Additional conditions', optional: true },
+        ],
+        example: '=AND(A1>5, A1<10)',
+    },
+    {
+        name: 'OR',
+        category: 'Logical',
+        description: 'Returns TRUE if any argument is true',
+        syntax: 'OR(logical1, [logical2], ...)',
+        parameters: [
+            { name: 'logical1', description: 'First condition' },
+            { name: 'logical2', description: 'Additional conditions', optional: true },
+        ],
+        example: '=OR(A1="Yes", A1="Y")',
+    },
+    {
+        name: 'NOT',
+        category: 'Logical',
+        description: 'Reverses the logic of its argument',
+        syntax: 'NOT(logical)',
+        parameters: [{ name: 'logical', description: 'Value to reverse' }],
+        example: '=NOT(A1>10)',
+    },
+    {
+        name: 'XOR',
+        category: 'Logical',
+        description: 'Returns TRUE if an odd number of arguments are true',
+        syntax: 'XOR(logical1, [logical2], ...)',
+        parameters: [
+            { name: 'logical1', description: 'First condition' },
+            { name: 'logical2', description: 'Additional conditions', optional: true },
+        ],
+        example: '=XOR(A1>5, B1>5)',
+    },
+    {
+        name: 'IFERROR',
+        category: 'Logical',
+        description: 'Returns a value if an expression results in an error',
+        syntax: 'IFERROR(value, value_if_error)',
+        parameters: [
+            { name: 'value', description: 'Expression to check' },
+            { name: 'value_if_error', description: 'Value to return on error' },
+        ],
+        example: '=IFERROR(A1/B1, 0)',
+    },
+    {
+        name: 'IFNA',
+        category: 'Logical',
+        description: 'Returns a value if an expression results in #N/A',
+        syntax: 'IFNA(value, value_if_na)',
+        parameters: [
+            { name: 'value', description: 'Expression to check' },
+            { name: 'value_if_na', description: 'Value to return if #N/A' },
+        ],
+        example: '=IFNA(VLOOKUP(A1, B:C, 2, FALSE), "Not found")',
+    },
+    {
+        name: 'TRUE',
+        category: 'Logical',
+        description: 'Returns the logical value TRUE',
+        syntax: 'TRUE()',
+        parameters: [],
+        example: '=TRUE()',
+    },
+    {
+        name: 'FALSE',
+        category: 'Logical',
+        description: 'Returns the logical value FALSE',
+        syntax: 'FALSE()',
+        parameters: [],
+        example: '=FALSE()',
+    },
+    {
+        name: 'SWITCH',
+        category: 'Logical',
+        description: 'Evaluates an expression against a list of values',
+        syntax: 'SWITCH(expression, value1, result1, [value2, result2], ..., [default])',
+        parameters: [
+            { name: 'expression', description: 'Value to compare' },
+            { name: 'value1', description: 'First value to match' },
+            { name: 'result1', description: 'Result if first value matches' },
+            { name: 'default', description: 'Default result if no match', optional: true },
+        ],
+        example: '=SWITCH(A1, 1, "One", 2, "Two", "Other")',
+    },
+    // ==================== DATE ====================
+    {
+        name: 'DATE',
+        category: 'Date',
+        description: 'Creates a date from year, month, and day',
+        syntax: 'DATE(year, month, day)',
+        parameters: [
+            { name: 'year', description: 'Year number' },
+            { name: 'month', description: 'Month number (1-12)' },
+            { name: 'day', description: 'Day number' },
+        ],
+        example: '=DATE(2025, 1, 15)',
+    },
+    {
+        name: 'TODAY',
+        category: 'Date',
+        description: 'Returns the current date',
+        syntax: 'TODAY()',
+        parameters: [],
+        example: '=TODAY()',
+    },
+    {
+        name: 'NOW',
+        category: 'Date',
+        description: 'Returns the current date and time',
+        syntax: 'NOW()',
+        parameters: [],
+        example: '=NOW()',
+    },
+    {
+        name: 'YEAR',
+        category: 'Date',
+        description: 'Returns the year of a date',
+        syntax: 'YEAR(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Date value' }],
+        example: '=YEAR(A1)',
+    },
+    {
+        name: 'MONTH',
+        category: 'Date',
+        description: 'Returns the month of a date (1-12)',
+        syntax: 'MONTH(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Date value' }],
+        example: '=MONTH(A1)',
+    },
+    {
+        name: 'DAY',
+        category: 'Date',
+        description: 'Returns the day of a date (1-31)',
+        syntax: 'DAY(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Date value' }],
+        example: '=DAY(A1)',
+    },
+    {
+        name: 'HOUR',
+        category: 'Date',
+        description: 'Returns the hour of a time (0-23)',
+        syntax: 'HOUR(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Time value' }],
+        example: '=HOUR(A1)',
+    },
+    {
+        name: 'MINUTE',
+        category: 'Date',
+        description: 'Returns the minute of a time (0-59)',
+        syntax: 'MINUTE(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Time value' }],
+        example: '=MINUTE(A1)',
+    },
+    {
+        name: 'SECOND',
+        category: 'Date',
+        description: 'Returns the second of a time (0-59)',
+        syntax: 'SECOND(serial_number)',
+        parameters: [{ name: 'serial_number', description: 'Time value' }],
+        example: '=SECOND(A1)',
+    },
+    {
+        name: 'WEEKDAY',
+        category: 'Date',
+        description: 'Returns the day of the week (1-7)',
+        syntax: 'WEEKDAY(serial_number, [return_type])',
+        parameters: [
+            { name: 'serial_number', description: 'Date value' },
+            { name: 'return_type', description: 'Number system to use', optional: true },
+        ],
+        example: '=WEEKDAY(A1)',
+    },
+    {
+        name: 'WEEKNUM',
+        category: 'Date',
+        description: 'Returns the week number of the year',
+        syntax: 'WEEKNUM(serial_number, [return_type])',
+        parameters: [
+            { name: 'serial_number', description: 'Date value' },
+            { name: 'return_type', description: 'Week calculation method', optional: true },
+        ],
+        example: '=WEEKNUM(A1)',
+    },
+    {
+        name: 'DATEDIF',
+        category: 'Date',
+        description: 'Calculates the difference between two dates',
+        syntax: 'DATEDIF(start_date, end_date, unit)',
+        parameters: [
+            { name: 'start_date', description: 'Start date' },
+            { name: 'end_date', description: 'End date' },
+            { name: 'unit', description: '"Y", "M", "D", "YM", "YD", or "MD"' },
+        ],
+        example: '=DATEDIF(A1, B1, "D")',
+    },
+    {
+        name: 'EDATE',
+        category: 'Date',
+        description: 'Returns a date a specified number of months before or after',
+        syntax: 'EDATE(start_date, months)',
+        parameters: [
+            { name: 'start_date', description: 'Starting date' },
+            { name: 'months', description: 'Number of months' },
+        ],
+        example: '=EDATE(A1, 3)',
+    },
+    {
+        name: 'EOMONTH',
+        category: 'Date',
+        description: 'Returns the last day of the month, months before or after',
+        syntax: 'EOMONTH(start_date, months)',
+        parameters: [
+            { name: 'start_date', description: 'Starting date' },
+            { name: 'months', description: 'Number of months' },
+        ],
+        example: '=EOMONTH(A1, 0)',
+    },
+    {
+        name: 'NETWORKDAYS',
+        category: 'Date',
+        description: 'Returns the number of working days between two dates',
+        syntax: 'NETWORKDAYS(start_date, end_date, [holidays])',
+        parameters: [
+            { name: 'start_date', description: 'Start date' },
+            { name: 'end_date', description: 'End date' },
+            { name: 'holidays', description: 'Range of holiday dates', optional: true },
+        ],
+        example: '=NETWORKDAYS(A1, B1)',
+    },
+    {
+        name: 'WORKDAY',
+        category: 'Date',
+        description: 'Returns a date a specified number of workdays before or after',
+        syntax: 'WORKDAY(start_date, days, [holidays])',
+        parameters: [
+            { name: 'start_date', description: 'Starting date' },
+            { name: 'days', description: 'Number of workdays' },
+            { name: 'holidays', description: 'Range of holiday dates', optional: true },
+        ],
+        example: '=WORKDAY(A1, 10)',
+    },
+    {
+        name: 'TIME',
+        category: 'Date',
+        description: 'Creates a time from hour, minute, and second',
+        syntax: 'TIME(hour, minute, second)',
+        parameters: [
+            { name: 'hour', description: 'Hour (0-23)' },
+            { name: 'minute', description: 'Minute (0-59)' },
+            { name: 'second', description: 'Second (0-59)' },
+        ],
+        example: '=TIME(14, 30, 0)',
+    },
+    // ==================== INFORMATION ====================
+    {
+        name: 'ISBLANK',
+        category: 'Information',
+        description: 'Returns TRUE if the cell is empty',
+        syntax: 'ISBLANK(value)',
+        parameters: [{ name: 'value', description: 'Cell to check' }],
+        example: '=ISBLANK(A1)',
+    },
+    {
+        name: 'ISNUMBER',
+        category: 'Information',
+        description: 'Returns TRUE if the value is a number',
+        syntax: 'ISNUMBER(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=ISNUMBER(A1)',
+    },
+    {
+        name: 'ISTEXT',
+        category: 'Information',
+        description: 'Returns TRUE if the value is text',
+        syntax: 'ISTEXT(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=ISTEXT(A1)',
+    },
+    {
+        name: 'ISERROR',
+        category: 'Information',
+        description: 'Returns TRUE if the value is any error',
+        syntax: 'ISERROR(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=ISERROR(A1)',
+    },
+    {
+        name: 'ISNA',
+        category: 'Information',
+        description: 'Returns TRUE if the value is #N/A',
+        syntax: 'ISNA(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=ISNA(A1)',
+    },
+    {
+        name: 'ISLOGICAL',
+        category: 'Information',
+        description: 'Returns TRUE if the value is a logical value',
+        syntax: 'ISLOGICAL(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=ISLOGICAL(A1)',
+    },
+    {
+        name: 'ISEVEN',
+        category: 'Information',
+        description: 'Returns TRUE if the number is even',
+        syntax: 'ISEVEN(number)',
+        parameters: [{ name: 'number', description: 'Number to check' }],
+        example: '=ISEVEN(A1)',
+    },
+    {
+        name: 'ISODD',
+        category: 'Information',
+        description: 'Returns TRUE if the number is odd',
+        syntax: 'ISODD(number)',
+        parameters: [{ name: 'number', description: 'Number to check' }],
+        example: '=ISODD(A1)',
+    },
+    {
+        name: 'TYPE',
+        category: 'Information',
+        description: 'Returns a number indicating the data type',
+        syntax: 'TYPE(value)',
+        parameters: [{ name: 'value', description: 'Value to check' }],
+        example: '=TYPE(A1)',
+    },
+    {
+        name: 'N',
+        category: 'Information',
+        description: 'Returns a value converted to a number',
+        syntax: 'N(value)',
+        parameters: [{ name: 'value', description: 'Value to convert' }],
+        example: '=N(A1)',
+    },
+    {
+        name: 'NA',
+        category: 'Information',
+        description: 'Returns the error value #N/A',
+        syntax: 'NA()',
+        parameters: [],
+        example: '=NA()',
+    },
+    // ==================== FINANCIAL ====================
+    {
+        name: 'PMT',
+        category: 'Financial',
+        description: 'Calculates the payment for a loan',
+        syntax: 'PMT(rate, nper, pv, [fv], [type])',
+        parameters: [
+            { name: 'rate', description: 'Interest rate per period' },
+            { name: 'nper', description: 'Total number of payments' },
+            { name: 'pv', description: 'Present value (loan amount)' },
+            { name: 'fv', description: 'Future value', optional: true },
+            { name: 'type', description: '0 = end of period, 1 = beginning', optional: true },
+        ],
+        example: '=PMT(0.05/12, 60, 10000)',
+    },
+    {
+        name: 'PV',
+        category: 'Financial',
+        description: 'Returns the present value of an investment',
+        syntax: 'PV(rate, nper, pmt, [fv], [type])',
+        parameters: [
+            { name: 'rate', description: 'Interest rate per period' },
+            { name: 'nper', description: 'Total number of periods' },
+            { name: 'pmt', description: 'Payment per period' },
+            { name: 'fv', description: 'Future value', optional: true },
+            { name: 'type', description: '0 = end, 1 = beginning', optional: true },
+        ],
+        example: '=PV(0.05/12, 60, -100)',
+    },
+    {
+        name: 'FV',
+        category: 'Financial',
+        description: 'Returns the future value of an investment',
+        syntax: 'FV(rate, nper, pmt, [pv], [type])',
+        parameters: [
+            { name: 'rate', description: 'Interest rate per period' },
+            { name: 'nper', description: 'Total number of periods' },
+            { name: 'pmt', description: 'Payment per period' },
+            { name: 'pv', description: 'Present value', optional: true },
+            { name: 'type', description: '0 = end, 1 = beginning', optional: true },
+        ],
+        example: '=FV(0.05/12, 60, -100)',
+    },
+    {
+        name: 'NPV',
+        category: 'Financial',
+        description: 'Returns the net present value of an investment',
+        syntax: 'NPV(rate, value1, [value2], ...)',
+        parameters: [
+            { name: 'rate', description: 'Discount rate' },
+            { name: 'value1', description: 'First cash flow' },
+            { name: 'value2', description: 'Additional cash flows', optional: true },
+        ],
+        example: '=NPV(0.1, -10000, 3000, 4200, 6800)',
+    },
+    {
+        name: 'IRR',
+        category: 'Financial',
+        description: 'Returns the internal rate of return',
+        syntax: 'IRR(values, [guess])',
+        parameters: [
+            { name: 'values', description: 'Range of cash flows' },
+            { name: 'guess', description: 'Initial guess for rate', optional: true },
+        ],
+        example: '=IRR(A1:A5)',
+    },
+    {
+        name: 'RATE',
+        category: 'Financial',
+        description: 'Returns the interest rate per period',
+        syntax: 'RATE(nper, pmt, pv, [fv], [type], [guess])',
+        parameters: [
+            { name: 'nper', description: 'Total number of periods' },
+            { name: 'pmt', description: 'Payment per period' },
+            { name: 'pv', description: 'Present value' },
+            { name: 'fv', description: 'Future value', optional: true },
+            { name: 'type', description: '0 = end, 1 = beginning', optional: true },
+            { name: 'guess', description: 'Initial guess', optional: true },
+        ],
+        example: '=RATE(60, -100, 5000)',
+    },
+    {
+        name: 'NPER',
+        category: 'Financial',
+        description: 'Returns the number of periods for an investment',
+        syntax: 'NPER(rate, pmt, pv, [fv], [type])',
+        parameters: [
+            { name: 'rate', description: 'Interest rate per period' },
+            { name: 'pmt', description: 'Payment per period' },
+            { name: 'pv', description: 'Present value' },
+            { name: 'fv', description: 'Future value', optional: true },
+            { name: 'type', description: '0 = end, 1 = beginning', optional: true },
+        ],
+        example: '=NPER(0.05/12, -100, 5000)',
+    },
+];
+// Get all formula names
+const FORMULA_NAMES = FORMULA_DEFINITIONS.map((f) => f.name);
+// Get formulas by category
+const getFormulasByCategory = (category) => FORMULA_DEFINITIONS.filter((f) => f.category === category);
+// Search formulas by name prefix
+const searchFormulas = (query) => {
+    const upperQuery = query.toUpperCase();
+    return FORMULA_DEFINITIONS.filter((f) => f.name.startsWith(upperQuery));
+};
+// Get formula by exact name
+const getFormula = (name) => FORMULA_DEFINITIONS.find((f) => f.name === name.toUpperCase());
+// Get all categories
+const FORMULA_CATEGORIES = [
+    'Math',
+    'Statistical',
+    'Lookup',
+    'Text',
+    'Logical',
+    'Date',
+    'Information',
+    'Financial',
+];
+
+/**
+ * FormulaAutocomplete - Input with formula intellisense
+ *
+ * Features:
+ * - Autocomplete dropdown when typing after '='
+ * - Function signature hints while typing parameters
+ * - Category-based browsing
+ * - Keyboard navigation
+ */
+const FormulaAutocomplete = ({ value, onChange, onComplete, onCancel, anchorRect, autoFocus = true, className = '', }) => {
+    const inputRef = React.useRef(null);
+    const dropdownRef = React.useRef(null);
+    const [selectedIndex, setSelectedIndex] = React.useState(0);
+    const [showDropdown, setShowDropdown] = React.useState(false);
+    const [showHint, setShowHint] = React.useState(false);
+    const [hint, setHint] = React.useState(null);
+    const [activeCategory, setActiveCategory] = React.useState(null);
+    // Parse the current formula context
+    const formulaContext = React.useMemo(() => {
+        if (!value.startsWith('=')) {
+            return { isFormula: false, query: '', inFunction: false, functionName: '', paramIndex: 0 };
+        }
+        const formulaText = value.substring(1);
+        // Check if we're typing a function name (before opening paren)
+        const functionMatch = formulaText.match(/^([A-Z]+)$/i);
+        if (functionMatch) {
+            return {
+                isFormula: true,
+                query: functionMatch[1].toUpperCase(),
+                inFunction: false,
+                functionName: '',
+                paramIndex: 0,
+            };
+        }
+        // Check if we're inside a function (after opening paren)
+        const insideFunctionMatch = formulaText.match(/^([A-Z]+)\((.*)$/i);
+        if (insideFunctionMatch) {
+            const functionName = insideFunctionMatch[1].toUpperCase();
+            const params = insideFunctionMatch[2];
+            // Count commas to determine parameter index (accounting for nested parens)
+            let paramIndex = 0;
+            let parenDepth = 0;
+            for (const char of params) {
+                if (char === '(')
+                    parenDepth++;
+                else if (char === ')')
+                    parenDepth--;
+                else if (char === ',' && parenDepth === 0)
+                    paramIndex++;
+            }
+            return {
+                isFormula: true,
+                query: '',
+                inFunction: true,
+                functionName,
+                paramIndex,
+            };
+        }
+        // Just '=' or other expression
+        return {
+            isFormula: true,
+            query: formulaText.toUpperCase(),
+            inFunction: false,
+            functionName: '',
+            paramIndex: 0,
+        };
+    }, [value]);
+    // Get matching formulas for dropdown
+    const matchingFormulas = React.useMemo(() => {
+        if (!formulaContext.isFormula || formulaContext.inFunction)
+            return [];
+        if (activeCategory) {
+            const categoryFormulas = FORMULA_DEFINITIONS.filter(f => f.category === activeCategory);
+            if (formulaContext.query) {
+                return categoryFormulas.filter(f => f.name.startsWith(formulaContext.query));
+            }
+            return categoryFormulas;
+        }
+        if (formulaContext.query) {
+            return searchFormulas(formulaContext.query);
+        }
+        // Show all formulas grouped by first letter when just '='
+        return FORMULA_DEFINITIONS.slice(0, 20); // Show first 20 as default
+    }, [formulaContext, activeCategory]);
+    // Update hint when inside a function
+    React.useEffect(() => {
+        if (formulaContext.inFunction && formulaContext.functionName) {
+            const formula = getFormula(formulaContext.functionName);
+            if (formula) {
+                setHint({
+                    formula,
+                    currentParamIndex: formulaContext.paramIndex,
+                });
+                setShowHint(true);
+                setShowDropdown(false);
+            }
+            else {
+                setShowHint(false);
+                setHint(null);
+            }
+        }
+        else if (formulaContext.isFormula && !formulaContext.inFunction) {
+            setShowDropdown(true);
+            setShowHint(false);
+            setHint(null);
+        }
+        else {
+            setShowDropdown(false);
+            setShowHint(false);
+            setHint(null);
+        }
+    }, [formulaContext]);
+    // Reset selected index when matches change
+    React.useEffect(() => {
+        setSelectedIndex(0);
+    }, [matchingFormulas.length]);
+    // Auto-focus
+    React.useEffect(() => {
+        if (autoFocus && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [autoFocus]);
+    // Scroll selected item into view
+    React.useEffect(() => {
+        if (dropdownRef.current && showDropdown) {
+            const selectedItem = dropdownRef.current.querySelector(`[data-index="${selectedIndex}"]`);
+            if (selectedItem) {
+                selectedItem.scrollIntoView({ block: 'nearest' });
+            }
+        }
+    }, [selectedIndex, showDropdown]);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        if (showDropdown && matchingFormulas.length > 0) {
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    setSelectedIndex((prev) => Math.min(prev + 1, matchingFormulas.length - 1));
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    setSelectedIndex((prev) => Math.max(prev - 1, 0));
+                    break;
+                case 'Tab':
+                case 'Enter':
+                    e.preventDefault();
+                    insertFormula(matchingFormulas[selectedIndex]);
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    if (showDropdown) {
+                        setShowDropdown(false);
+                    }
+                    else {
+                        onCancel();
+                    }
+                    break;
+            }
+        }
+        else {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                onComplete();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                onCancel();
+            }
+        }
+    }, [showDropdown, matchingFormulas, selectedIndex, onComplete, onCancel]);
+    // Insert selected formula
+    const insertFormula = React.useCallback((formula) => {
+        // Replace the current query with the formula name and open paren
+        const newValue = `=${formula.name}(`;
+        onChange(newValue);
+        setShowDropdown(false);
+        inputRef.current?.focus();
+    }, [onChange]);
+    // Calculate dropdown position
+    const dropdownPosition = React.useMemo(() => {
+        if (!anchorRect)
+            return { top: 0, left: 0 };
+        return {
+            top: anchorRect.bottom + 2,
+            left: anchorRect.left,
+        };
+    }, [anchorRect]);
+    // Prevent blur when clicking inside dropdown
+    const handleDropdownMouseDown = React.useCallback((e) => {
+        e.preventDefault(); // Prevents input from losing focus
+    }, []);
+    // Render parameter hint
+    const renderHint = () => {
+        if (!showHint || !hint)
+            return null;
+        return reactDom.createPortal(jsxRuntime.jsxs("div", { className: "fixed z-[9999] bg-white border border-stone-200 rounded-lg shadow-lg p-3 max-w-md", style: {
+                top: dropdownPosition.top,
+                left: dropdownPosition.left,
+            }, onMouseDown: handleDropdownMouseDown, children: [jsxRuntime.jsxs("div", { className: "font-mono text-sm mb-2", children: [jsxRuntime.jsx("span", { className: "text-primary-600 font-semibold", children: hint.formula.name }), jsxRuntime.jsx("span", { className: "text-ink-500", children: "(" }), hint.formula.parameters.map((param, idx) => (jsxRuntime.jsxs("span", { children: [idx > 0 && jsxRuntime.jsx("span", { className: "text-ink-500", children: ", " }), jsxRuntime.jsx("span", { className: `${idx === hint.currentParamIndex
+                                        ? 'bg-primary-100 text-primary-700 px-1 rounded font-semibold'
+                                        : param.optional
+                                            ? 'text-ink-400'
+                                            : 'text-ink-600'}`, children: param.optional ? `[${param.name}]` : param.name })] }, param.name))), jsxRuntime.jsx("span", { className: "text-ink-500", children: ")" })] }), jsxRuntime.jsx("div", { className: "text-xs text-ink-600 mb-2", children: hint.formula.description }), hint.formula.parameters[hint.currentParamIndex] && (jsxRuntime.jsxs("div", { className: "text-xs bg-paper-50 p-2 rounded border border-stone-100", children: [jsxRuntime.jsxs("span", { className: "font-semibold text-primary-600", children: [hint.formula.parameters[hint.currentParamIndex].name, ":"] }), ' ', jsxRuntime.jsx("span", { className: "text-ink-600", children: hint.formula.parameters[hint.currentParamIndex].description })] }))] }), document.body);
+    };
+    // Render autocomplete dropdown
+    const renderDropdown = () => {
+        if (!showDropdown || matchingFormulas.length === 0)
+            return null;
+        return reactDom.createPortal(jsxRuntime.jsxs("div", { ref: dropdownRef, className: "fixed z-[9999] bg-white border border-stone-200 rounded-lg shadow-lg overflow-hidden", style: {
+                top: dropdownPosition.top,
+                left: dropdownPosition.left,
+                minWidth: 320,
+                maxWidth: 450,
+                maxHeight: 300,
+            }, onMouseDown: handleDropdownMouseDown, children: [jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-1 p-2 border-b border-stone-100 bg-paper-50", children: [jsxRuntime.jsx("button", { className: `px-2 py-1 text-xs rounded ${activeCategory === null
+                                ? 'bg-primary-500 text-white'
+                                : 'bg-white text-ink-600 hover:bg-stone-100'}`, onClick: () => {
+                                setActiveCategory(null);
+                                inputRef.current?.focus();
+                            }, children: "All" }), FORMULA_CATEGORIES.map((cat) => (jsxRuntime.jsx("button", { className: `px-2 py-1 text-xs rounded ${activeCategory === cat
+                                ? 'bg-primary-500 text-white'
+                                : 'bg-white text-ink-600 hover:bg-stone-100'}`, onClick: () => {
+                                setActiveCategory(cat);
+                                inputRef.current?.focus();
+                            }, children: cat }, cat)))] }), jsxRuntime.jsx("div", { className: "overflow-y-auto", style: { maxHeight: 220 }, children: matchingFormulas.map((formula, index) => (jsxRuntime.jsxs("div", { "data-index": index, className: `px-3 py-2 cursor-pointer border-b border-stone-50 ${index === selectedIndex ? 'bg-primary-50' : 'hover:bg-paper-50'}`, onClick: () => insertFormula(formula), onMouseEnter: () => setSelectedIndex(index), children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsx("span", { className: "font-mono font-semibold text-primary-600 text-sm", children: formula.name }), jsxRuntime.jsx("span", { className: "text-xs text-ink-400 bg-stone-100 px-1.5 py-0.5 rounded", children: formula.category })] }), jsxRuntime.jsx("div", { className: "text-xs text-ink-500 mt-0.5 truncate", children: formula.description }), jsxRuntime.jsx("div", { className: "font-mono text-xs text-ink-400 mt-0.5", children: formula.syntax })] }, formula.name))) }), jsxRuntime.jsxs("div", { className: "px-3 py-1.5 bg-paper-50 border-t border-stone-100 text-xs text-ink-400", children: [jsxRuntime.jsx("span", { className: "font-medium", children: "\u2191\u2193" }), " navigate", jsxRuntime.jsx("span", { className: "mx-2", children: "\u00B7" }), jsxRuntime.jsx("span", { className: "font-medium", children: "Tab/Enter" }), " insert", jsxRuntime.jsx("span", { className: "mx-2", children: "\u00B7" }), jsxRuntime.jsx("span", { className: "font-medium", children: "Esc" }), " close"] })] }), document.body);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: value, onChange: (e) => onChange(e.target.value), onKeyDown: handleKeyDown, onBlur: () => {
+                    // Delay to allow click on dropdown
+                    setTimeout(() => {
+                        setShowDropdown(false);
+                        setShowHint(false);
+                    }, 150);
+                }, className: `w-full h-full border-none outline-none bg-transparent font-mono text-sm ${className}`, style: { margin: '-4px', padding: '4px' } }), renderDropdown(), renderHint()] }));
+};
+
+// Handle both ESM default export and CommonJS module.exports
+// @ts-ignore
+const FormulaParser = FormulaParser$2 || FormulaParserModule;
+/**
+ * Convert column index to Excel-style letter (0 = A, 1 = B, ..., 26 = AA)
+ */
+const colIndexToLetter = (index) => {
+    let result = '';
+    let num = index;
+    while (num >= 0) {
+        result = String.fromCharCode((num % 26) + 65) + result;
+        num = Math.floor(num / 26) - 1;
+    }
+    return result;
+};
+// Note: parseRef is available for future formula reference parsing
+// const parseRef = (ref: string): { row: number; col: number } | null => { ... }
+/**
+ * DataGrid - Excel-like data grid component with formulas
+ *
+ * A grid-based spreadsheet component that provides:
+ * - Cell-level editing with formula support (280+ Excel formulas)
+ * - Sorting and filtering
+ * - Frozen rows and columns
+ * - Zebra striping
+ * - CSV export
+ * - Keyboard navigation
+ *
+ * Uses fast-formula-parser (MIT licensed) for formula evaluation.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const columns = [
+ *   { key: 'name', header: 'Name' },
+ *   { key: 'q1', header: 'Q1', type: 'number' },
+ *   { key: 'q2', header: 'Q2', type: 'number' },
+ *   { key: 'total', header: 'Total', type: 'number' },
+ * ];
+ *
+ * const data = [
+ *   [{ value: 'Widget A' }, { value: 100 }, { value: 150 }, { value: 0, formula: '=SUM(B1:C1)' }],
+ *   [{ value: 'Widget B' }, { value: 200 }, { value: 250 }, { value: 0, formula: '=SUM(B2:C2)' }],
+ * ];
+ *
+ * <DataGrid
+ *   data={data}
+ *   columns={columns}
+ *   formulas
+ *   zebraStripes
+ *   frozenRows={1}
+ * />
+ * ```
+ */
+const DataGrid = React.forwardRef(({ data: initialData, columns, onChange, rowHeaders = false, frozenRows: frozenRowsProp = 'none', frozenColumns = 0, showFreezeRowToggle = false, zebraStripes = false, formulas = false, readOnly = false, height = 400, width = '100%', showToolbar = false, title, enableExport = false, exportFileName = 'export.csv', enableSave = false, onSave, toolbarActions, className = '', density = 'normal', }, ref) => {
+    // State
+    const [data, setData] = React.useState(initialData);
+    const [editingCell, setEditingCell] = React.useState(null);
+    const [editValue, setEditValue] = React.useState('');
+    const [sortConfig, setSortConfig] = React.useState(null);
+    const [filters, setFilters] = React.useState([]);
+    const [activeFilter, setActiveFilter] = React.useState(null);
+    const [filterValue, setFilterValue] = React.useState('');
+    const [isSaving, setIsSaving] = React.useState(false);
+    const [selectedCell, setSelectedCell] = React.useState(null);
+    const [frozenRowsState, setFrozenRowsState] = React.useState(frozenRowsProp);
+    const [editingCellRect, setEditingCellRect] = React.useState(null);
+    // Update frozen rows when prop changes
+    React.useEffect(() => {
+        setFrozenRowsState(frozenRowsProp);
+    }, [frozenRowsProp]);
+    const tableRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    // Compute actual number of frozen rows based on mode
+    const frozenRows = React.useMemo(() => {
+        if (frozenRowsState === 'none')
+            return 0;
+        if (frozenRowsState === 'first')
+            return 1;
+        if (frozenRowsState === 'selected') {
+            // Return selected row + 1 (to include it), or 0 if nothing selected
+            return selectedCell ? selectedCell.row + 1 : 0;
+        }
+        if (typeof frozenRowsState === 'number')
+            return frozenRowsState;
+        return 0;
+    }, [frozenRowsState, selectedCell]);
+    // Check if a specific row is frozen
+    const isRowFrozen = React.useCallback((rowIndex) => {
+        if (frozenRowsState === 'none')
+            return false;
+        if (frozenRowsState === 'first')
+            return rowIndex === 0;
+        if (frozenRowsState === 'selected') {
+            return selectedCell ? rowIndex === selectedCell.row : false;
+        }
+        if (typeof frozenRowsState === 'number')
+            return rowIndex < frozenRowsState;
+        return false;
+    }, [frozenRowsState, selectedCell]);
+    // Update data when initialData changes
+    React.useEffect(() => {
+        setData(initialData);
+    }, [initialData]);
+    // Get computed data with formulas evaluated
+    // Uses a cache to handle formula dependencies (formulas referencing other formulas)
+    const computedData = React.useMemo(() => {
+        if (!formulas)
+            return data;
+        // Cache for computed cell values to handle dependencies
+        const computedCache = new Map();
+        // Recursive function to get cell value, evaluating formulas as needed
+        const getCellValue = (r, c) => {
+            const cacheKey = `${r},${c}`;
+            if (computedCache.has(cacheKey)) {
+                return computedCache.get(cacheKey);
+            }
+            if (r < 0 || r >= data.length || c < 0 || c >= (data[r]?.length || 0)) {
+                return null;
+            }
+            const cell = data[r][c];
+            if (!cell?.formula) {
+                return cell?.value ?? null;
+            }
+            // Mark as computing to detect circular references
+            computedCache.set(cacheKey, '#CIRCULAR');
+            try {
+                const result = parser.parse(cell.formula.substring(1));
+                computedCache.set(cacheKey, result);
+                return result;
+            }
+            catch (error) {
+                computedCache.set(cacheKey, '#ERROR');
+                return '#ERROR';
+            }
+        };
+        // Create parser with callbacks that resolve formula dependencies
+        const parser = new FormulaParser({
+            onCell: ({ row, col }) => {
+                // row and col are 1-indexed in the parser
+                return getCellValue(row - 1, col - 1);
+            },
+            onRange: ({ from, to }) => {
+                const result = [];
+                for (let r = from.row - 1; r <= to.row - 1; r++) {
+                    const rowData = [];
+                    for (let c = from.col - 1; c <= to.col - 1; c++) {
+                        rowData.push(getCellValue(r, c));
+                    }
+                    result.push(rowData);
+                }
+                return result;
+            },
+        });
+        // Compute all cells
+        return data.map((row, rowIndex) => row.map((cell, colIndex) => {
+            if (cell?.formula) {
+                return {
+                    ...cell,
+                    value: getCellValue(rowIndex, colIndex),
+                };
+            }
+            return cell;
+        }));
+    }, [formulas, data]);
+    // Apply sorting
+    const sortedData = React.useMemo(() => {
+        if (!sortConfig)
+            return computedData;
+        const colIndex = columns.findIndex((c) => c.key === sortConfig.key);
+        if (colIndex === -1)
+            return computedData;
+        // Keep frozen rows at top
+        const frozenData = computedData.slice(0, frozenRows);
+        const sortableData = [...computedData.slice(frozenRows)];
+        sortableData.sort((a, b) => {
+            const aVal = a[colIndex]?.value ?? '';
+            const bVal = b[colIndex]?.value ?? '';
+            if (typeof aVal === 'number' && typeof bVal === 'number') {
+                return sortConfig.direction === 'asc' ? aVal - bVal : bVal - aVal;
+            }
+            const aStr = String(aVal).toLowerCase();
+            const bStr = String(bVal).toLowerCase();
+            const cmp = aStr.localeCompare(bStr);
+            return sortConfig.direction === 'asc' ? cmp : -cmp;
+        });
+        return [...frozenData, ...sortableData];
+    }, [computedData, sortConfig, columns, frozenRows]);
+    // Apply filters
+    const filteredData = React.useMemo(() => {
+        if (filters.length === 0)
+            return sortedData;
+        // Keep frozen rows
+        const frozenData = sortedData.slice(0, frozenRows);
+        const filterableData = sortedData.slice(frozenRows);
+        const filtered = filterableData.filter((row) => {
+            return filters.every((filter) => {
+                const colIndex = columns.findIndex((c) => c.key === filter.key);
+                if (colIndex === -1)
+                    return true;
+                const cellValue = String(row[colIndex]?.value ?? '').toLowerCase();
+                return cellValue.includes(filter.value.toLowerCase());
+            });
+        });
+        return [...frozenData, ...filtered];
+    }, [sortedData, filters, columns, frozenRows]);
+    // Handle cell edit start
+    const handleCellDoubleClick = React.useCallback((rowIndex, colIndex, cellElement) => {
+        if (readOnly)
+            return;
+        const column = columns[colIndex];
+        if (column?.readOnly)
+            return;
+        const cell = data[rowIndex]?.[colIndex];
+        if (cell?.readOnly)
+            return;
+        setEditingCell({ row: rowIndex, col: colIndex });
+        setEditValue(cell?.formula || String(cell?.value ?? ''));
+        // Capture cell position for formula autocomplete dropdown
+        if (cellElement) {
+            setEditingCellRect(cellElement.getBoundingClientRect());
+        }
+        setTimeout(() => inputRef.current?.focus(), 0);
+    }, [readOnly, columns, data]);
+    // Handle cell edit complete
+    const handleEditComplete = React.useCallback(() => {
+        if (!editingCell)
+            return;
+        const { row, col } = editingCell;
+        const newData = [...data];
+        if (!newData[row])
+            newData[row] = [];
+        const isFormula = editValue.startsWith('=');
+        const numValue = parseFloat(editValue);
+        const value = isFormula ? 0 : !isNaN(numValue) ? numValue : editValue;
+        newData[row][col] = {
+            ...newData[row][col],
+            value,
+            formula: isFormula ? editValue : undefined,
+        };
+        setData(newData);
+        setEditingCell(null);
+        setEditValue('');
+        if (onChange) {
+            onChange(newData, row, col);
+        }
+    }, [editingCell, editValue, data, onChange]);
+    // Handle cell edit cancel
+    const handleEditCancel = React.useCallback(() => {
+        setEditingCell(null);
+        setEditValue('');
+    }, []);
+    // Handle key down in edit mode
+    const handleEditKeyDown = React.useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleEditComplete();
+        }
+        else if (e.key === 'Escape') {
+            handleEditCancel();
+        }
+        else if (e.key === 'Tab') {
+            e.preventDefault();
+            handleEditComplete();
+            // Move to next cell
+            if (editingCell) {
+                const nextCol = e.shiftKey ? editingCell.col - 1 : editingCell.col + 1;
+                if (nextCol >= 0 && nextCol < columns.length) {
+                    handleCellDoubleClick(editingCell.row, nextCol);
+                }
+            }
+        }
+    }, [handleEditComplete, handleEditCancel, editingCell, columns.length, handleCellDoubleClick]);
+    // Handle cell click
+    const handleCellClick = React.useCallback((rowIndex, colIndex) => {
+        setSelectedCell({ row: rowIndex, col: colIndex });
+    }, []);
+    // Handle keyboard navigation
+    const handleKeyDown = React.useCallback((e) => {
+        if (editingCell)
+            return;
+        if (!selectedCell)
+            return;
+        const { row, col } = selectedCell;
+        let newRow = row;
+        let newCol = col;
+        switch (e.key) {
+            case 'ArrowUp':
+                newRow = Math.max(0, row - 1);
+                break;
+            case 'ArrowDown':
+                newRow = Math.min(filteredData.length - 1, row + 1);
+                break;
+            case 'ArrowLeft':
+                newCol = Math.max(0, col - 1);
+                break;
+            case 'ArrowRight':
+                newCol = Math.min(columns.length - 1, col + 1);
+                break;
+            case 'Enter':
+            case 'F2':
+                handleCellDoubleClick(row, col);
+                e.preventDefault();
+                return;
+            default:
+                return;
+        }
+        if (newRow !== row || newCol !== col) {
+            setSelectedCell({ row: newRow, col: newCol });
+            e.preventDefault();
+        }
+    }, [editingCell, selectedCell, filteredData.length, columns.length, handleCellDoubleClick]);
+    // Handle sort
+    const handleSort = React.useCallback((key) => {
+        setSortConfig((prev) => {
+            if (prev?.key === key) {
+                if (prev.direction === 'asc') {
+                    return { key, direction: 'desc' };
+                }
+                return null; // Clear sort
+            }
+            return { key, direction: 'asc' };
+        });
+    }, []);
+    // Handle filter
+    const handleFilter = React.useCallback((key) => {
+        setActiveFilter((prev) => (prev === key ? null : key));
+        const existing = filters.find((f) => f.key === key);
+        setFilterValue(existing?.value || '');
+    }, [filters]);
+    // Apply filter
+    const applyFilter = React.useCallback(() => {
+        if (!activeFilter)
+            return;
+        setFilters((prev) => {
+            const existing = prev.findIndex((f) => f.key === activeFilter);
+            if (filterValue) {
+                if (existing >= 0) {
+                    const newFilters = [...prev];
+                    newFilters[existing] = { key: activeFilter, value: filterValue };
+                    return newFilters;
+                }
+                return [...prev, { key: activeFilter, value: filterValue }];
+            }
+            else {
+                return prev.filter((f) => f.key !== activeFilter);
+            }
+        });
+        setActiveFilter(null);
+    }, [activeFilter, filterValue]);
+    // Clear filter
+    const clearFilter = React.useCallback((key) => {
+        setFilters((prev) => prev.filter((f) => f.key !== key));
+    }, []);
+    // Export to CSV
+    const exportToCSV = React.useCallback(() => {
+        const headers = columns.map((c) => c.header).join(',');
+        const rows = filteredData.map((row) => row
+            .map((cell) => {
+            const val = String(cell?.value ?? '');
+            // Escape quotes and wrap in quotes if contains comma
+            if (val.includes(',') || val.includes('"') || val.includes('\n')) {
+                return `"${val.replace(/"/g, '""')}"`;
+            }
+            return val;
+        })
+            .join(','));
+        const csv = [headers, ...rows].join('\n');
+        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = exportFileName;
+        link.click();
+        URL.revokeObjectURL(url);
+        addSuccessMessage('Exported to CSV successfully');
+    }, [columns, filteredData, exportFileName]);
+    // Save handler
+    const handleSave = React.useCallback(async () => {
+        if (!onSave)
+            return;
+        setIsSaving(true);
+        try {
+            await onSave(data);
+            addSuccessMessage('Data saved successfully');
+        }
+        catch (error) {
+            console.error('Save failed:', error);
+            addErrorMessage('Failed to save data');
+        }
+        finally {
+            setIsSaving(false);
+        }
+    }, [onSave, data]);
+    // Toggle freeze first row
+    const toggleFreezeFirstRow = React.useCallback(() => {
+        setFrozenRowsState((prev) => (prev === 'first' || prev === 1 ? 'none' : 'first'));
+    }, []);
+    // Toggle freeze selected row
+    const toggleFreezeSelectedRow = React.useCallback(() => {
+        setFrozenRowsState((prev) => (prev === 'selected' ? 'none' : 'selected'));
+    }, []);
+    // Expose imperative handle
+    React.useImperativeHandle(ref, () => ({
+        getData: () => data,
+        setCell: (rowIndex, colIndex, value) => {
+            const newData = [...data];
+            if (!newData[rowIndex])
+                newData[rowIndex] = [];
+            newData[rowIndex][colIndex] =
+                typeof value === 'object' && value !== null ? value : { value: value };
+            setData(newData);
+        },
+        clearFilters: () => setFilters([]),
+        clearSort: () => setSortConfig(null),
+        exportToCSV,
+        toggleFreezeFirstRow,
+        toggleFreezeSelectedRow,
+        setFrozenRows: setFrozenRowsState,
+    }));
+    // Format cell value for display
+    const formatValue = React.useCallback((value, column) => {
+        if (value === null || value === undefined)
+            return '';
+        if (typeof value === 'boolean')
+            return value ? 'Yes' : 'No';
+        const numVal = typeof value === 'number' ? value : parseFloat(String(value));
+        if (column.type === 'currency' && !isNaN(numVal)) {
+            const decimals = column.format?.decimals ?? 2;
+            const prefix = column.format?.prefix ?? '$';
+            return `${prefix}${numVal.toFixed(decimals)}`;
+        }
+        if (column.type === 'percent' && !isNaN(numVal)) {
+            const decimals = column.format?.decimals ?? 1;
+            return `${(numVal * 100).toFixed(decimals)}%`;
+        }
+        if (column.type === 'number' && !isNaN(numVal)) {
+            const decimals = column.format?.decimals;
+            if (decimals !== undefined) {
+                return numVal.toFixed(decimals);
+            }
+        }
+        return String(value);
+    }, []);
+    // Density classes
+    const densityClasses = {
+        compact: 'py-1 px-2 text-xs',
+        normal: 'py-2 px-3 text-sm',
+        comfortable: 'py-3 px-4 text-sm',
+    };
+    const cellPadding = densityClasses[density];
+    return (jsxRuntime.jsxs("div", { className: `data-grid ${className}`, style: { width }, children: [showToolbar && (jsxRuntime.jsxs(Stack, { direction: "horizontal", spacing: "md", align: "center", className: "mb-3 px-1", children: [title && (jsxRuntime.jsx("div", { className: "text-lg font-medium text-ink-900 flex-1", children: title })), showFreezeRowToggle && (jsxRuntime.jsx("div", { className: "relative", children: jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: frozenRowsState !== 'none' ? (jsxRuntime.jsx(lucideReact.Pin, { className: "h-4 w-4 text-primary-600" })) : (jsxRuntime.jsx(lucideReact.PinOff, { className: "h-4 w-4" })), onClick: toggleFreezeFirstRow, title: frozenRowsState === 'first' || frozenRowsState === 1
+                                ? 'Unfreeze first row'
+                                : 'Freeze first row', children: frozenRowsState === 'first' || frozenRowsState === 1
+                                ? 'Unfreeze Row'
+                                : 'Freeze Row' }) })), enableExport && (jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", icon: jsxRuntime.jsx(lucideReact.Download, { className: "h-4 w-4" }), onClick: exportToCSV, children: "Export" })), enableSave && onSave && (jsxRuntime.jsx(Button, { variant: "primary", size: "sm", icon: jsxRuntime.jsx(lucideReact.Save, { className: "h-4 w-4" }), onClick: handleSave, loading: isSaving, children: "Save" })), toolbarActions] })), filters.length > 0 && (jsxRuntime.jsx(Stack, { direction: "horizontal", spacing: "sm", className: "mb-2 px-1 flex-wrap", children: filters.map((filter) => {
+                    const column = columns.find((c) => c.key === filter.key);
+                    return (jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 rounded text-xs", children: [jsxRuntime.jsxs("span", { className: "font-medium", children: [column?.header, ":"] }), jsxRuntime.jsx("span", { children: filter.value }), jsxRuntime.jsx("button", { onClick: () => clearFilter(filter.key), className: "ml-1 hover:bg-primary-200 rounded p-0.5", children: jsxRuntime.jsx(lucideReact.X, { className: "h-3 w-3" }) })] }, filter.key));
+                }) })), jsxRuntime.jsx("div", { ref: tableRef, className: "relative overflow-auto border border-stone-200 rounded-lg bg-white", style: { height }, onKeyDown: handleKeyDown, tabIndex: 0, children: jsxRuntime.jsxs("table", { className: "border-collapse", style: { tableLayout: 'auto' }, children: [jsxRuntime.jsx("thead", { className: "sticky top-0 z-20 bg-stone-100", children: jsxRuntime.jsxs("tr", { children: [rowHeaders && (jsxRuntime.jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 text-left font-semibold text-ink-600 sticky left-0 z-30`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: "#" })), columns.map((column, colIndex) => {
+                                        const isFrozen = colIndex < frozenColumns;
+                                        const leftOffset = rowHeaders ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0) : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                                        return (jsxRuntime.jsx("th", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-100 font-semibold text-ink-600 text-${column.align || 'left'} ${isFrozen ? 'sticky z-30' : ''}`, style: {
+                                                width: column.width,
+                                                minWidth: column.minWidth || 80,
+                                                left: isFrozen ? leftOffset : undefined,
+                                            }, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("span", { className: "flex-1", children: column.header }), column.sortable && (jsxRuntime.jsx("button", { onClick: () => handleSort(column.key), className: "p-0.5 hover:bg-stone-200 rounded", children: sortConfig?.key === column.key ? (sortConfig.direction === 'asc' ? (jsxRuntime.jsx(lucideReact.ChevronUp, { className: "h-4 w-4 text-primary-600" })) : (jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-4 w-4 text-primary-600" }))) : (jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-4 w-4 text-ink-400" })) })), column.filterable && (jsxRuntime.jsxs("div", { className: "relative", children: [jsxRuntime.jsx("button", { onClick: () => handleFilter(column.key), className: `p-0.5 hover:bg-stone-200 rounded ${filters.some((f) => f.key === column.key)
+                                                                    ? 'text-primary-600'
+                                                                    : 'text-ink-400'}`, children: jsxRuntime.jsx(lucideReact.Filter, { className: "h-4 w-4" }) }), activeFilter === column.key && (jsxRuntime.jsxs("div", { className: "absolute top-full right-0 mt-1 p-2 bg-white border border-stone-200 rounded-lg shadow-lg z-50 min-w-48", children: [jsxRuntime.jsx(Input, { size: "sm", placeholder: `Filter ${column.header}...`, value: filterValue, onChange: (e) => setFilterValue(e.target.value), onKeyDown: (e) => {
+                                                                            if (e.key === 'Enter')
+                                                                                applyFilter();
+                                                                            if (e.key === 'Escape')
+                                                                                setActiveFilter(null);
+                                                                        }, autoFocus: true }), jsxRuntime.jsxs(Stack, { direction: "horizontal", spacing: "sm", className: "mt-2", children: [jsxRuntime.jsx(Button, { size: "sm", variant: "ghost", onClick: () => setActiveFilter(null), children: "Cancel" }), jsxRuntime.jsx(Button, { size: "sm", variant: "primary", onClick: applyFilter, children: "Apply" })] })] }))] }))] }) }, column.key));
+                                    })] }) }), jsxRuntime.jsx("tbody", { children: filteredData.map((row, rowIndex) => {
+                                const isFrozen = isRowFrozen(rowIndex);
+                                const isZebra = zebraStripes && rowIndex % 2 === 1;
+                                return (jsxRuntime.jsxs("tr", { className: `${isZebra ? 'bg-paper-50' : 'bg-white'} ${isFrozen ? 'sticky z-10' : ''} ${isFrozen ? 'shadow-sm' : ''}`, style: {
+                                        top: isFrozen ? `${40 + rowIndex * 40}px` : undefined,
+                                    }, children: [rowHeaders && (jsxRuntime.jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 bg-stone-50 text-ink-500 font-medium sticky left-0 z-10`, style: { width: 50, minWidth: 50, maxWidth: 50 }, children: Array.isArray(rowHeaders) ? rowHeaders[rowIndex] : rowIndex + 1 })), row.map((cell, colIndex) => {
+                                            const column = columns[colIndex];
+                                            const isFrozenCol = colIndex < frozenColumns;
+                                            const isEditing = editingCell?.row === rowIndex && editingCell?.col === colIndex;
+                                            const isSelected = selectedCell?.row === rowIndex && selectedCell?.col === colIndex;
+                                            const hasFormula = !!cell?.formula;
+                                            const leftOffset = rowHeaders
+                                                ? 50 + columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0)
+                                                : columns.slice(0, colIndex).reduce((sum, c) => sum + (c.width || 100), 0);
+                                            return (jsxRuntime.jsx("td", { className: `${cellPadding} border-b border-r border-stone-200 text-${column?.align || 'left'} ${isFrozenCol ? 'sticky z-10' : ''} ${isZebra && isFrozenCol ? 'bg-paper-50' : isFrozenCol ? 'bg-white' : ''} ${isSelected ? 'ring-2 ring-inset ring-primary-500' : ''} ${hasFormula ? 'bg-blue-50' : ''} ${cell?.className || ''}`, style: {
+                                                    left: isFrozenCol ? leftOffset : undefined,
+                                                    minWidth: column?.minWidth || 80,
+                                                }, onClick: () => handleCellClick(rowIndex, colIndex), onDoubleClick: (e) => handleCellDoubleClick(rowIndex, colIndex, e.currentTarget), children: isEditing ? (formulas ? (jsxRuntime.jsx(FormulaAutocomplete, { value: editValue, onChange: setEditValue, onComplete: handleEditComplete, onCancel: handleEditCancel, anchorRect: editingCellRect, autoFocus: true })) : (jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleEditComplete, onKeyDown: handleEditKeyDown, className: "w-full h-full border-none outline-none bg-transparent", style: { margin: '-4px', padding: '4px' } }))) : (formatValue(cell?.value, column)) }, colIndex));
+                                        })] }, rowIndex));
+                            }) })] }) }), jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-2 py-1 text-xs text-ink-500 border-t border-stone-200 bg-stone-50 rounded-b-lg", children: [jsxRuntime.jsxs("span", { children: [filteredData.length, " row", filteredData.length !== 1 ? 's' : '', filters.length > 0 && ` (filtered)`] }), selectedCell && (jsxRuntime.jsxs("span", { children: [colIndexToLetter(selectedCell.col), selectedCell.row + 1, data[selectedCell.row]?.[selectedCell.col]?.formula && (jsxRuntime.jsx("span", { className: "ml-2 text-blue-600", children: data[selectedCell.row][selectedCell.col].formula }))] }))] })] }));
+});
+DataGrid.displayName = 'DataGrid';
+
+// Color mapping for action buttons
+const colorClasses = {
+    primary: 'bg-accent-500 text-white',
+    success: 'bg-success-500 text-white',
+    warning: 'bg-warning-500 text-white',
+    error: 'bg-error-500 text-white',
+    default: 'bg-paper-500 text-white',
+};
+/**
+ * SwipeActions - Touch-based swipe actions for list items
+ *
+ * Wraps any content with swipe-to-reveal actions, commonly used in mobile
+ * list items for quick actions like delete, archive, edit, etc.
+ *
+ * Features:
+ * - Left and right swipe actions
+ * - Full swipe to trigger primary action
+ * - Spring-back animation
+ * - Touch and mouse support
+ * - Customizable thresholds
+ *
+ * @example Basic delete action
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     {
+ *       id: 'delete',
+ *       label: 'Delete',
+ *       icon: <Trash className="h-5 w-5" />,
+ *       color: 'error',
+ *       onClick: () => handleDelete(item),
+ *       primary: true,
+ *     },
+ *   ]}
+ * >
+ *   <div className="p-4 bg-white">
+ *     List item content
+ *   </div>
+ * </SwipeActions>
+ * ```
+ *
+ * @example Multiple actions on both sides
+ * ```tsx
+ * <SwipeActions
+ *   leftActions={[
+ *     { id: 'delete', label: 'Delete', icon: <Trash />, color: 'error', onClick: handleDelete },
+ *     { id: 'archive', label: 'Archive', icon: <Archive />, color: 'warning', onClick: handleArchive },
+ *   ]}
+ *   rightActions={[
+ *     { id: 'edit', label: 'Edit', icon: <Edit />, color: 'primary', onClick: handleEdit },
+ *   ]}
+ *   fullSwipe
+ * >
+ *   <ListItem />
+ * </SwipeActions>
+ * ```
+ */
+function SwipeActions({ children, leftActions = [], rightActions = [], threshold = 80, fullSwipeThreshold = 0.5, fullSwipe = false, disabled = false, onSwipeChange, className = '', }) {
+    const containerRef = React.useRef(null);
+    const contentRef = React.useRef(null);
+    // Swipe state
+    const [translateX, setTranslateX] = React.useState(0);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [activeDirection, setActiveDirection] = React.useState(null);
+    // Touch/mouse tracking
+    const startX = React.useRef(0);
+    const currentX = React.useRef(0);
+    const startTime = React.useRef(0);
+    // Calculate action widths
+    const leftActionsWidth = leftActions.length * 72; // 72px per action
+    const rightActionsWidth = rightActions.length * 72;
+    // Reset position
+    const resetPosition = React.useCallback(() => {
+        setTranslateX(0);
+        setActiveDirection(null);
+        onSwipeChange?.(null);
+    }, [onSwipeChange]);
+    // Handle touch/mouse start
+    const handleStart = React.useCallback((clientX) => {
+        if (disabled)
+            return;
+        startX.current = clientX;
+        currentX.current = clientX;
+        startTime.current = Date.now();
+        setIsDragging(true);
+    }, [disabled]);
+    // Handle touch/mouse move
+    const handleMove = React.useCallback((clientX) => {
+        if (!isDragging || disabled)
+            return;
+        const deltaX = clientX - startX.current;
+        currentX.current = clientX;
+        // Determine direction and apply resistance at boundaries
+        let newTranslateX = deltaX;
+        // Swiping left (reveals left actions on right side)
+        if (deltaX < 0) {
+            if (leftActions.length === 0) {
+                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+            }
+            else {
+                const maxSwipe = fullSwipe
+                    ? -(containerRef.current?.offsetWidth || 300)
+                    : -leftActionsWidth;
+                newTranslateX = Math.max(maxSwipe, deltaX);
+                // Apply resistance past the action buttons
+                if (newTranslateX < -leftActionsWidth) {
+                    const overSwipe = newTranslateX + leftActionsWidth;
+                    newTranslateX = -leftActionsWidth + overSwipe * 0.3;
+                }
+            }
+            setActiveDirection('left');
+            onSwipeChange?.('left');
+        }
+        // Swiping right (reveals right actions on left side)
+        else if (deltaX > 0) {
+            if (rightActions.length === 0) {
+                newTranslateX = deltaX * 0.2; // Heavy resistance if no actions
+            }
+            else {
+                const maxSwipe = fullSwipe
+                    ? (containerRef.current?.offsetWidth || 300)
+                    : rightActionsWidth;
+                newTranslateX = Math.min(maxSwipe, deltaX);
+                // Apply resistance past the action buttons
+                if (newTranslateX > rightActionsWidth) {
+                    const overSwipe = newTranslateX - rightActionsWidth;
+                    newTranslateX = rightActionsWidth + overSwipe * 0.3;
+                }
+            }
+            setActiveDirection('right');
+            onSwipeChange?.('right');
+        }
+        setTranslateX(newTranslateX);
+    }, [isDragging, disabled, leftActions.length, rightActions.length, leftActionsWidth, rightActionsWidth, fullSwipe, onSwipeChange]);
+    // Handle touch/mouse end
+    const handleEnd = React.useCallback(() => {
+        if (!isDragging)
+            return;
+        setIsDragging(false);
+        const deltaX = currentX.current - startX.current;
+        const velocity = Math.abs(deltaX) / (Date.now() - startTime.current);
+        const containerWidth = containerRef.current?.offsetWidth || 300;
+        // Check for full swipe trigger
+        if (fullSwipe) {
+            const swipePercentage = Math.abs(translateX) / containerWidth;
+            if (swipePercentage >= fullSwipeThreshold || velocity > 0.5) {
+                // Find primary action and trigger it
+                if (translateX < 0 && leftActions.length > 0) {
+                    const primaryAction = leftActions.find(a => a.primary) || leftActions[0];
+                    primaryAction.onClick();
+                    resetPosition();
+                    return;
+                }
+                else if (translateX > 0 && rightActions.length > 0) {
+                    const primaryAction = rightActions.find(a => a.primary) || rightActions[0];
+                    primaryAction.onClick();
+                    resetPosition();
+                    return;
+                }
+            }
+        }
+        // Snap to open or closed position
+        if (Math.abs(translateX) >= threshold || velocity > 0.3) {
+            // Snap open
+            if (translateX < 0 && leftActions.length > 0) {
+                setTranslateX(-leftActionsWidth);
+                setActiveDirection('left');
+                onSwipeChange?.('left');
+            }
+            else if (translateX > 0 && rightActions.length > 0) {
+                setTranslateX(rightActionsWidth);
+                setActiveDirection('right');
+                onSwipeChange?.('right');
+            }
+            else {
+                resetPosition();
+            }
+        }
+        else {
+            // Snap closed
+            resetPosition();
+        }
+    }, [isDragging, translateX, threshold, fullSwipe, fullSwipeThreshold, leftActions, rightActions, leftActionsWidth, rightActionsWidth, resetPosition, onSwipeChange]);
+    // Touch event handlers
+    const handleTouchStart = (e) => {
+        handleStart(e.touches[0].clientX);
+    };
+    const handleTouchMove = (e) => {
+        handleMove(e.touches[0].clientX);
+    };
+    const handleTouchEnd = () => {
+        handleEnd();
+    };
+    // Mouse event handlers (for testing/desktop)
+    const handleMouseDown = (e) => {
+        handleStart(e.clientX);
+    };
+    const handleMouseMove = (e) => {
+        handleMove(e.clientX);
+    };
+    const handleMouseUp = () => {
+        handleEnd();
+    };
+    // Close on outside click
+    React.useEffect(() => {
+        if (activeDirection === null)
+            return;
+        const handleClickOutside = (e) => {
+            if (containerRef.current && !containerRef.current.contains(e.target)) {
+                resetPosition();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, [activeDirection, resetPosition]);
+    // Handle mouse leave during drag
+    React.useEffect(() => {
+        if (!isDragging)
+            return;
+        const handleMouseLeave = () => {
+            handleEnd();
+        };
+        document.addEventListener('mouseup', handleMouseLeave);
+        return () => document.removeEventListener('mouseup', handleMouseLeave);
+    }, [isDragging, handleEnd]);
+    // Render action button
+    const renderActionButton = (action) => {
+        const colorClass = colorClasses[action.color || 'default'];
+        return (jsxRuntime.jsxs("button", { onClick: (e) => {
+                e.stopPropagation();
+                action.onClick();
+                resetPosition();
+            }, className: `
+          flex flex-col items-center justify-center
+          w-18 h-full min-w-[72px]
+          ${colorClass}
+          transition-transform duration-150
+        `, style: {
+                transform: isDragging ? 'scale(1)' : 'scale(1)',
+            }, children: [action.icon && (jsxRuntime.jsx("div", { className: "mb-1", children: action.icon })), jsxRuntime.jsx("span", { className: "text-xs font-medium", children: action.label })] }, action.id));
+    };
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: `relative overflow-hidden ${className}`, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onMouseDown: handleMouseDown, onMouseMove: isDragging ? handleMouseMove : undefined, onMouseUp: handleMouseUp, onMouseLeave: isDragging ? handleEnd : undefined, children: [rightActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute left-0 top-0 bottom-0 flex", style: { width: rightActionsWidth }, children: rightActions.map((action) => renderActionButton(action)) })), leftActions.length > 0 && (jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 flex", style: { width: leftActionsWidth }, children: leftActions.map((action) => renderActionButton(action)) })), jsxRuntime.jsx("div", { ref: contentRef, className: `
+          relative bg-white
+          ${isDragging ? '' : 'transition-transform duration-200 ease-out'}
+        `, style: {
+                    transform: `translateX(${translateX}px)`,
+                    touchAction: 'pan-y', // Allow vertical scrolling
+                }, children: children })] }));
+}
+
+var classnames = {exports: {}};
+
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+(function (module) {
+	/* global define */
+
+	(function () {
+
+		var hasOwn = {}.hasOwnProperty;
+
+		function classNames () {
+			var classes = '';
+
+			for (var i = 0; i < arguments.length; i++) {
+				var arg = arguments[i];
+				if (arg) {
+					classes = appendClass(classes, parseValue(arg));
+				}
+			}
+
+			return classes;
+		}
+
+		function parseValue (arg) {
+			if (typeof arg === 'string' || typeof arg === 'number') {
+				return arg;
+			}
+
+			if (typeof arg !== 'object') {
+				return '';
+			}
+
+			if (Array.isArray(arg)) {
+				return classNames.apply(null, arg);
+			}
+
+			if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+				return arg.toString();
+			}
+
+			var classes = '';
+
+			for (var key in arg) {
+				if (hasOwn.call(arg, key) && arg[key]) {
+					classes = appendClass(classes, key);
+				}
+			}
+
+			return classes;
+		}
+
+		function appendClass (value, newClass) {
+			if (!newClass) {
+				return value;
+			}
+		
+			if (value) {
+				return value + ' ' + newClass;
+			}
+		
+			return value + newClass;
+		}
+
+		if (module.exports) {
+			classNames.default = classNames;
+			module.exports = classNames;
+		} else {
+			window.classNames = classNames;
+		}
+	}()); 
+} (classnames));
+
+var classnamesExports = classnames.exports;
+var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 var scheduler = {exports: {}};
 
@@ -35011,7 +37003,7 @@ function extractFormula(value) {
     return value.slice(1);
 }
 function createFormulaParser(data, config) {
-    return new FormulaParser$1(__assign(__assign({}, config), { onCell: function (ref) {
+    return new FormulaParser$2(__assign(__assign({}, config), { onCell: function (ref) {
             var point = {
                 row: ref.row - 1,
                 column: ref.col - 1,
@@ -54859,6 +56851,7 @@ exports.CurrencyInput = CurrencyInput;
 exports.Dashboard = Dashboard;
 exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
+exports.DataGrid = DataGrid;
 exports.DataTable = DataTable;
 exports.DataTableCardView = DataTableCardView;
 exports.DateDisplay = DateDisplay;
@@ -54880,6 +56873,9 @@ exports.ExpandableRowButton = ExpandableRowButton;
 exports.ExpandableToolbar = ExpandableToolbar;
 exports.ExpandedRowEditForm = ExpandedRowEditForm;
 exports.ExportButton = ExportButton;
+exports.FORMULA_CATEGORIES = FORMULA_CATEGORIES;
+exports.FORMULA_DEFINITIONS = FORMULA_DEFINITIONS;
+exports.FORMULA_NAMES = FORMULA_NAMES;
 exports.FieldArray = FieldArray;
 exports.FileUpload = FileUpload;
 exports.FilterBar = FilterBar;
@@ -54981,11 +56977,14 @@ exports.exportDataTableToExcel = exportDataTableToExcel;
 exports.exportToExcel = exportToExcel;
 exports.formatStatisticValue = formatStatisticValue;
 exports.formatStatistics = formatStatistics;
+exports.getFormula = getFormula;
+exports.getFormulasByCategory = getFormulasByCategory;
 exports.loadColumnOrder = loadColumnOrder;
 exports.loadColumnWidths = loadColumnWidths;
 exports.reorderArray = reorderArray;
 exports.saveColumnOrder = saveColumnOrder;
 exports.saveColumnWidths = saveColumnWidths;
+exports.searchFormulas = searchFormulas;
 exports.statusManager = statusManager;
 exports.useBreakpoint = useBreakpoint;
 exports.useBreakpointValue = useBreakpointValue;