@papernote/ui 1.1.0 → 1.3.0

package/dist/index.esm.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Loader2, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Check, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Info, Trash2, Circle, ChevronsRight, ChevronsLeft, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, Home, ArrowUpDown, ArrowUp, ArrowDown, FileText, Image, File as File$1, User, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Download, Save, XCircle, Filter, BarChart3, MessageSquare } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, useState, useRef, useId, useImperativeHandle, useEffect, useCallback, useMemo, cloneElement, isValidElement, Component, createContext as createContext$1, useLayoutEffect, createElement, useContext, useReducer } from 'react';
+import { Loader2, X, EyeOff, Eye, AlertTriangle, CheckCircle, AlertCircle, ChevronDown, Search, Check, Minus, Star, Calendar as Calendar$1, ChevronLeft, ChevronRight, Clock, ChevronUp, Plus, TrendingUp, TrendingDown, Info, Trash2, Circle, ChevronsRight, ChevronsLeft, MoreVertical, GripVertical, Upload, Bold, Italic, Underline, List, ListOrdered, Code, Link, Home, FileText, Image, File as File$1, User, Settings, LogOut, Moon, Sun, Bell, Edit, Trash, Download, Save, XCircle, Filter, BarChart3, MessageSquare } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Link as Link$1 } from 'react-router-dom';
 
@@ -11,6 +11,8 @@ import { Link as Link$1 } from 'react-router-dom';
  * A versatile button component that supports multiple visual styles, sizes, icons,
  * loading states, and notification badges.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * @example Basic usage
  * ```tsx
  * <Button variant="primary">Click me</Button>
@@ -37,8 +39,14 @@ import { Link as Link$1 } from 'react-router-dom';
  *   <Bell />
  * </Button>
  * ```
+ *
+ * @example With ref
+ * ```tsx
+ * const buttonRef = useRef<HTMLButtonElement>(null);
+ * <Button ref={buttonRef}>Focusable</Button>
+ * ```
  */
-function Button({ variant = 'primary', size = 'md', loading = false, icon, iconPosition = 'left', fullWidth = false, iconOnly = false, badge, badgeVariant = 'error', children, disabled, className = '', ...props }) {
+const Button = forwardRef(({ variant = 'primary', size = 'md', loading = false, icon, iconPosition = 'left', fullWidth = false, iconOnly = false, badge, badgeVariant = 'error', children, disabled, className = '', ...props }, ref) => {
     const baseStyles = 'inline-flex items-center justify-center font-medium rounded-lg border transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 disabled:opacity-40 disabled:cursor-not-allowed';
     const variantStyles = {
         primary: 'bg-accent-500 text-white border-accent-500 hover:bg-accent-600 hover:shadow-sm active:scale-[0.98]',
@@ -69,7 +77,7 @@ function Button({ variant = 'primary', size = 'md', loading = false, icon, iconP
         md: 'min-w-[18px] h-[18px] text-[11px] px-1.5',
         lg: 'min-w-[20px] h-5 text-xs px-1.5',
     };
-    const buttonElement = (jsxs("button", { className: `
+    const buttonElement = (jsxs("button", { ref: ref, className: `
         ${baseStyles}
         ${variantStyles[variant]}
         ${sizeStyles[size]}
@@ -92,7 +100,8 @@ function Button({ variant = 'primary', size = 'md', loading = false, icon, iconP
           shadow-sm
           pointer-events-none
         `, "aria-label": `${badgeContent} notifications`, children: badgeContent })] }));
-}
+});
+Button.displayName = 'Button';
 
 /**
  * ButtonGroup component - Toggle button group for single or multiple selection.
@@ -239,7 +248,7 @@ function ButtonGroup({ options, value, values = [], onChange, onChangeMultiple,
  * />
  * ```
  */
-const Input = forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, className = '', id, type = 'text', value, maxLength, ...props }, ref) => {
+const Input = forwardRef(({ label, helperText, validationState, validationMessage, icon, iconPosition = 'left', showCount = false, prefix, suffix, prefixIcon, suffixIcon, showPasswordToggle = false, clearable = false, onClear, loading = false, className = '', id, type = 'text', value, maxLength, ...props }, ref) => {
     const inputId = id || `input-${Math.random().toString(36).substring(2, 9)}`;
     const [showPassword, setShowPassword] = useState(false);
     // Handle clear button click
@@ -311,7 +320,7 @@ const Input = forwardRef(({ label, helperText, validationState, validationMessag
               ${validationState && !suffix && !suffixIcon && !showPasswordToggle ? 'pr-10' : ''}
               ${(showPasswordToggle && type === 'password') || validationState || suffix || suffixIcon ? 'pr-20' : ''}
               ${className}
-            `, ...props }), suffix && (jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-2", children: [suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && (jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsx("button", { type: "button", onClick: handleClear, className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": "Clear input", children: jsx(X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsx(EyeOff, { className: "h-5 w-5" }) : jsx(Eye, { className: "h-5 w-5" }) })), validationState && (jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
+            `, ...props }), suffix && (jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none text-ink-500 text-sm", children: suffix })), jsxs("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center gap-2", children: [loading && (jsx("div", { className: "pointer-events-none text-ink-400", children: jsx(Loader2, { className: "h-5 w-5 animate-spin" }) })), suffixIcon && !suffix && !validationState && !showPasswordToggle && !showClearButton && !loading && (jsx("div", { className: "pointer-events-none text-ink-400", children: suffixIcon })), showClearButton && (jsx("button", { type: "button", onClick: handleClear, className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": "Clear input", children: jsx(X, { className: "h-4 w-4" }) })), type === 'password' && showPasswordToggle && (jsx("button", { type: "button", onClick: () => setShowPassword(!showPassword), className: "text-ink-400 hover:text-ink-600 focus:outline-none cursor-pointer pointer-events-auto", "aria-label": showPassword ? 'Hide password' : 'Show password', children: showPassword ? jsx(EyeOff, { className: "h-5 w-5" }) : jsx(Eye, { className: "h-5 w-5" }) })), validationState && (jsx("div", { className: "pointer-events-none", children: getValidationIcon() })), icon && iconPosition === 'right' && !suffix && !suffixIcon && !validationState && (jsx("div", { className: "pointer-events-none text-ink-400", children: icon }))] })] }), jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || validationMessage) && (jsx("p", { className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText })), showCounter && (jsxs("p", { className: `text-xs ml-auto ${currentLength > maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] })] }));
 });
 Input.displayName = 'Input';
 
@@ -518,11 +527,18 @@ const Select = forwardRef((props, ref) => {
 });
 Select.displayName = 'Select';
 
-function MultiSelect({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, 'aria-label': ariaLabel, }) {
+const MultiSelect = forwardRef(({ options, value = [], onChange, placeholder = 'Select options', searchable = false, disabled = false, label, helperText, error, maxHeight = 240, maxSelections, loading = false, 'aria-label': ariaLabel, }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
     const [searchQuery, setSearchQuery] = useState('');
     const selectRef = useRef(null);
     const searchInputRef = useRef(null);
+    const triggerRef = useRef(null);
+    // Expose imperative methods
+    useImperativeHandle(ref, () => ({
+        focus: () => triggerRef.current?.focus(),
+        open: () => !disabled && setIsOpen(true),
+        close: () => setIsOpen(false),
+    }));
     const selectedOptions = options.filter(opt => value.includes(opt.value));
     const hasReachedMax = maxSelections ? value.length >= maxSelections : false;
     const filteredOptions = searchable && searchQuery
@@ -569,11 +585,11 @@ function MultiSelect({ options, value = [], onChange, placeholder = 'Select opti
         e.stopPropagation();
         onChange?.([]);
     };
-    return (jsxs("div", { className: "w-full", children: [label && (jsx("label", { className: "label", children: label })), jsxs("div", { ref: selectRef, className: "relative", children: [jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `
+    return (jsxs("div", { className: "w-full", children: [label && (jsx("label", { className: "label", children: label })), jsxs("div", { ref: selectRef, className: "relative", children: [jsxs("button", { ref: triggerRef, type: "button", onClick: () => !disabled && !loading && setIsOpen(!isOpen), disabled: disabled || loading, className: `
             input w-full flex items-center justify-between min-h-[42px]
             ${error ? 'border-error-400 focus:border-error-400 focus:ring-error-400' : ''}
-            ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
-          `, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel || label, children: [jsx("div", { className: "flex-1 flex items-center gap-2 flex-wrap", children: selectedOptions.length === 0 ? (jsx("span", { className: "text-ink-400", children: placeholder })) : (selectedOptions.map((option) => (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-accent-100 text-accent-800 rounded text-sm", children: [option.icon && jsx("span", { className: "text-xs", children: option.icon }), option.label, jsx("button", { type: "button", onClick: (e) => handleRemove(option.value, e), className: "hover:text-accent-900", "aria-label": `Remove ${option.label}`, children: jsx(X, { className: "h-3 w-3" }) })] }, option.value)))) }), jsxs("div", { className: "flex items-center gap-2 ml-2", children: [selectedOptions.length > 0 && !disabled && (jsx("button", { type: "button", onClick: handleClearAll, className: "text-ink-400 hover:text-ink-600", "aria-label": "Clear all", children: jsx(X, { className: "h-4 w-4" }) })), jsx(ChevronDown, { className: `h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` })] })] }), isOpen && (jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 overflow-hidden animate-fade-in", style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), 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" })] }) })), jsx("div", { className: "overflow-y-auto", style: { maxHeight: `${maxHeight - 60}px` }, role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? (jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
+            ${disabled || loading ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+          `, "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-label": ariaLabel || label, children: [jsx("div", { className: "flex-1 flex items-center gap-2 flex-wrap", children: selectedOptions.length === 0 ? (jsx("span", { className: "text-ink-400", children: placeholder })) : (selectedOptions.map((option) => (jsxs("span", { className: "inline-flex items-center gap-1 px-2 py-1 bg-accent-100 text-accent-800 rounded text-sm", children: [option.icon && jsx("span", { className: "text-xs", children: option.icon }), option.label, jsx("button", { type: "button", onClick: (e) => handleRemove(option.value, e), className: "hover:text-accent-900", "aria-label": `Remove ${option.label}`, children: jsx(X, { className: "h-3 w-3" }) })] }, option.value)))) }), jsxs("div", { className: "flex items-center gap-2 ml-2", children: [loading && (jsx(Loader2, { className: "h-4 w-4 text-ink-400 animate-spin" })), !loading && selectedOptions.length > 0 && !disabled && (jsx("button", { type: "button", onClick: handleClearAll, className: "text-ink-400 hover:text-ink-600", "aria-label": "Clear all", children: jsx(X, { className: "h-4 w-4" }) })), !loading && (jsx(ChevronDown, { className: `h-4 w-4 text-ink-500 transition-transform ${isOpen ? 'rotate-180' : ''}` }))] })] }), isOpen && (jsxs("div", { className: "absolute z-50 w-full mt-2 bg-white bg-subtle-grain rounded-lg shadow-lg border border-paper-200 overflow-hidden animate-fade-in", style: { maxHeight: `${maxHeight}px` }, children: [searchable && (jsx("div", { className: "p-2 border-b border-paper-200", children: jsxs("div", { className: "relative", children: [jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-400" }), 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" })] }) })), jsx("div", { className: "overflow-y-auto", style: { maxHeight: `${maxHeight - 60}px` }, role: "listbox", "aria-multiselectable": "true", children: filteredOptions.length === 0 ? (jsx("div", { className: "px-4 py-3 text-sm text-ink-500 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
                                     const isSelected = value.includes(option.value);
                                     const isDisabled = option.disabled || (hasReachedMax && !isSelected);
                                     return (jsx("button", { type: "button", onClick: () => !isDisabled && handleToggle(option.value), disabled: isDisabled, className: `
@@ -585,7 +601,8 @@ function MultiSelect({ options, value = [], onChange, placeholder = 'Select opti
                           ${isSelected ? 'bg-accent-600 border-accent-600' : 'border-paper-300'}
                         `, children: isSelected && jsx(Check, { className: "h-3 w-3 text-white" }) }), option.icon && jsx("span", { children: option.icon }), option.label] }) }, option.value));
                                 })) })] }))] }), jsxs("div", { className: "flex justify-between items-center mt-2", children: [(helperText || error) && (jsx("p", { className: `text-xs ${error ? 'text-error-600' : 'text-ink-600'}`, children: error || helperText })), maxSelections && (jsxs("p", { className: `text-xs ml-auto ${hasReachedMax ? 'text-warning-600 font-medium' : 'text-ink-500'}`, children: [value.length, " / ", maxSelections, " selected"] }))] })] }));
-}
+});
+MultiSelect.displayName = 'MultiSelect';
 
 const Switch = forwardRef(({ checked, onChange, label, description, disabled = false, size = 'md', loading = false, }, ref) => {
     // Generate unique IDs for ARIA
@@ -632,7 +649,7 @@ const Switch = forwardRef(({ checked, onChange, label, description, disabled = f
 });
 Switch.displayName = 'Switch';
 
-const Textarea = forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', className = '', id, value, rows = 4, ...props }, ref) => {
+const Textarea = forwardRef(({ label, helperText, validationState, validationMessage, maxLength, showCharCount = false, autoExpand = false, minRows = 2, maxRows = 10, resize = 'vertical', loading = false, className = '', id, value, rows = 4, ...props }, ref) => {
     const textareaId = id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
     const currentLength = typeof value === 'string' ? value.length : 0;
     const internalRef = useRef(null);
@@ -707,14 +724,15 @@ const Textarea = forwardRef(({ label, helperText, validationState, validationMes
                 return 'text-ink-600';
         }
     };
-    return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, className: `
-            block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
-            bg-white bg-subtle-grain transition-all duration-200
-            focus:outline-none focus:ring-2 ${getResizeClass()}
-            disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
-            ${getValidationClasses()}
-            ${className}
-          `, "aria-invalid": validationState === 'error', "aria-describedby": validationMessage || helperText ? `${textareaId}-help` : undefined, "aria-required": props.required, ...props }), ((helperText || validationMessage) || (showCharCount && maxLength)) && (jsxs("div", { className: "mt-2 flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [validationState && getValidationIcon(), (helperText || validationMessage) && (jsx("p", { id: `${textareaId}-help`, className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText }))] }), showCharCount && maxLength && (jsxs("p", { className: `text-xs ${currentLength >= maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] }))] }));
+    return (jsxs("div", { className: "w-full", children: [label && (jsxs("label", { htmlFor: textareaId, className: "label", children: [label, props.required && jsx("span", { className: "text-error-500 ml-1", children: "*" })] })), jsxs("div", { className: "relative", children: [jsx("textarea", { ref: textareaRef, id: textareaId, value: value, maxLength: maxLength, rows: autoExpand ? minRows : rows, className: `
+              block w-full px-4 py-3 border rounded-lg text-sm text-ink-800 placeholder-ink-400
+              bg-white bg-subtle-grain transition-all duration-200
+              focus:outline-none focus:ring-2 ${getResizeClass()}
+              disabled:bg-paper-100 disabled:text-ink-400 disabled:cursor-not-allowed disabled:opacity-60
+              ${getValidationClasses()}
+              ${loading ? 'pr-10' : ''}
+              ${className}
+            `, "aria-invalid": validationState === 'error', "aria-describedby": validationMessage || helperText ? `${textareaId}-help` : undefined, "aria-required": props.required, ...props }), loading && (jsx("div", { className: "absolute top-3 right-3 pointer-events-none", children: jsx(Loader2, { className: "h-5 w-5 text-ink-400 animate-spin" }) }))] }), ((helperText || validationMessage) || (showCharCount && maxLength)) && (jsxs("div", { className: "mt-2 flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [validationState && getValidationIcon(), (helperText || validationMessage) && (jsx("p", { id: `${textareaId}-help`, className: `text-xs ${validationMessage ? getValidationMessageColor() : 'text-ink-600'}`, children: validationMessage || helperText }))] }), showCharCount && maxLength && (jsxs("p", { className: `text-xs ${currentLength >= maxLength ? 'text-error-600' : 'text-ink-500'}`, children: [currentLength, " / ", maxLength] }))] }))] }));
 });
 Textarea.displayName = 'Textarea';
 
@@ -1930,6 +1948,8 @@ function SkeletonTable({ rows = 5, columns = 4 }) {
 /**
  * Card - Container component with paper aesthetic and subtle shadow
  *
+ * Supports ref forwarding for DOM access.
+ *
  * A content container with paper texture, border, and shadow effects. Supports
  * different sizes, variants (padding/shadow levels), and loading states.
  *
@@ -1959,8 +1979,14 @@ function SkeletonTable({ rows = 5, columns = 4 }) {
  *   <p>Content</p>
  * </Card>
  * ```
+ *
+ * @example With ref
+ * ```tsx
+ * const cardRef = useRef<HTMLDivElement>(null);
+ * <Card ref={cardRef}>Content</Card>
+ * ```
  */
-function Card({ children, variant = 'default', width = 'auto', className = '', onClick, hoverable = false, loading = false, }) {
+const Card = forwardRef(({ children, variant = 'default', width = 'auto', className = '', onClick, hoverable = false, loading = false, ...htmlProps }, ref) => {
     const baseStyles = 'bg-white bg-subtle-grain border-2 border-paper-300 transition-shadow duration-200';
     const variantStyles = {
         default: 'rounded-xl shadow-lg p-8',
@@ -1976,8 +2002,9 @@ function Card({ children, variant = 'default', width = 'auto', className = '', o
         full: 'w-full',
     };
     const interactiveStyles = onClick || hoverable ? 'cursor-pointer hover:shadow-md' : '';
-    return (jsx("div", { className: `${baseStyles} ${variantStyles[variant]} ${widthStyles[width]} ${interactiveStyles} ${className}`, onClick: !loading ? onClick : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: loading ? (jsxs("div", { className: "space-y-4", children: [jsx(Skeleton, { className: "h-6 w-3/4" }), jsx(Skeleton, { className: "h-4 w-full" }), jsx(Skeleton, { className: "h-4 w-5/6" }), jsx(Skeleton, { className: "h-4 w-4/6" })] })) : (children) }));
-}
+    return (jsx("div", { ref: ref, ...htmlProps, className: `${baseStyles} ${variantStyles[variant]} ${widthStyles[width]} ${interactiveStyles} ${className}`, onClick: !loading ? onClick : undefined, role: onClick ? 'button' : undefined, tabIndex: onClick ? 0 : undefined, children: loading ? (jsxs("div", { className: "space-y-4", children: [jsx(Skeleton, { className: "h-6 w-3/4" }), jsx(Skeleton, { className: "h-4 w-full" }), jsx(Skeleton, { className: "h-4 w-5/6" }), jsx(Skeleton, { className: "h-4 w-4/6" })] })) : (children) }));
+});
+Card.displayName = 'Card';
 /**
  * CardHeader - Header section for Card component
  *
@@ -2075,15 +2102,34 @@ function Separator({ orientation = 'horizontal', className = '', spacing = 'md',
 /**
  * Stack component for arranging children vertically or horizontally with consistent spacing.
  *
- * Spacing scale:
+ * Supports ref forwarding for DOM access.
+ *
+ * Spacing scale (use either `spacing` or `gap` prop - they're aliases):
  * - none: 0
  * - xs: 0.5rem (2)
  * - sm: 0.75rem (3)
  * - md: 1.5rem (6)
  * - lg: 2rem (8)
  * - xl: 3rem (12)
+ *
+ * @example
+ * ```tsx
+ * // Using spacing prop
+ * <Stack spacing="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Stack>
+ *
+ * // Using gap prop (alias)
+ * <Stack gap="md">
+ *   <Card>Item 1</Card>
+ *   <Card>Item 2</Card>
+ * </Stack>
+ * ```
  */
-const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stretch', justify = 'start', wrap = false, className = '', }) => {
+const Stack = forwardRef(({ children, direction = 'vertical', spacing, gap, align = 'stretch', justify = 'start', wrap = false, className = '', ...htmlProps }, ref) => {
+    // Use gap as alias for spacing (spacing takes precedence if both provided)
+    const effectiveSpacing = spacing ?? gap ?? 'md';
     const spacingClasses = {
         vertical: {
             none: '',
@@ -2115,20 +2161,23 @@ const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stre
         between: 'justify-between',
         around: 'justify-around',
     };
-    return (jsx("div", { className: `
+    return (jsx("div", { ref: ref, ...htmlProps, className: `
         flex
         ${direction === 'vertical' ? 'flex-col' : 'flex-row'}
         ${wrap ? 'flex-wrap' : ''}
-        ${spacingClasses[direction][spacing]}
+        ${spacingClasses[direction][effectiveSpacing]}
         ${alignClasses[align]}
         ${justifyClasses[justify]}
         ${className}
       `, children: children }));
-};
+});
+Stack.displayName = 'Stack';
 
 /**
  * Grid component for arranging children in a CSS grid layout.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * Column options: 1, 2, 3, 4, 6, 12
  *
  * Responsive breakpoints (mobile-first):
@@ -2153,7 +2202,7 @@ const Stack = ({ children, direction = 'vertical', spacing = 'md', align = 'stre
  *   <Card>Item 2</Card>
  * </Grid>
  */
-const Grid = ({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '', }) => {
+const Grid = forwardRef(({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '', ...htmlProps }, ref) => {
     // Base column classes
     const baseColumnClasses = {
         1: 'grid-cols-1',
@@ -2212,18 +2261,20 @@ const Grid = ({ children, columns = 1, sm, md, lg, xl, gap = 'md', className = '
         lg ? lgColumnClasses[lg] : '',
         xl ? xlColumnClasses[xl] : '',
     ].filter(Boolean).join(' ');
-    return (jsx("div", { className: `
+    return (jsx("div", { ref: ref, ...htmlProps, className: `
         grid
         ${columnClassList}
         ${gapClasses[gap]}
         ${className}
       `, children: children }));
-};
+});
+Grid.displayName = 'Grid';
 
 /**
  * Box component for generic containers with design system spacing and borders.
+ * Supports ref forwarding for DOM access.
  */
-const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginTop, marginBottom, marginLeft, marginRight, border = 'none', borderColor = 'default', rounded, width, height, className = '', ...htmlProps }) => {
+const Box = forwardRef(({ children, padding, paddingTop, paddingBottom, paddingLeft, paddingRight, margin, marginTop, marginBottom, marginLeft, marginRight, border = 'none', borderColor = 'default', rounded, width, height, className = '', ...htmlProps }, ref) => {
     const spacingMap = {
         none: '0',
         xs: '2',
@@ -2308,7 +2359,7 @@ const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddin
         };
         return roundedClasses[rounded];
     };
-    return (jsx("div", { ...htmlProps, className: `
+    return (jsx("div", { ref: ref, ...htmlProps, className: `
         ${getPaddingClass()}
         ${getMarginClass()}
         ${borderClasses[border]}
@@ -2318,7 +2369,8 @@ const Box = ({ children, padding, paddingTop, paddingBottom, paddingLeft, paddin
         ${getHeightClass()}
         ${className}
       `, children: children }));
-};
+});
+Box.displayName = 'Box';
 
 /**
  * GridItem component for items within a Grid layout.
@@ -2363,6 +2415,8 @@ const GridItem = ({ colSpan, rowSpan, children, className = '', ...boxProps }) =
 /**
  * Text component for consistent typography across the application.
  *
+ * Supports ref forwarding for DOM access.
+ *
  * Size scale:
  * - xs: 0.75rem (12px)
  * - sm: 0.875rem (14px)
@@ -2370,8 +2424,21 @@ const GridItem = ({ colSpan, rowSpan, children, className = '', ...boxProps }) =
  * - lg: 1.125rem (18px)
  * - xl: 1.25rem (20px)
  * - 2xl: 1.5rem (24px)
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="semibold" color="primary">
+ *   Hello World
+ * </Text>
+ *
+ * <Text color="warning">Warning message</Text>
+ *
+ * // With ref
+ * const textRef = useRef<HTMLParagraphElement>(null);
+ * <Text ref={textRef}>Measurable text</Text>
+ * ```
  */
-const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', }) => {
+const Text = forwardRef(({ children, as: Component = 'p', size = 'base', weight = 'normal', color = 'primary', align = 'left', truncate = false, lineClamp, transform, className = '', ...htmlProps }, ref) => {
     const sizeClasses = {
         xs: 'text-xs',
         sm: 'text-sm',
@@ -2393,6 +2460,7 @@ const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal',
         accent: 'text-primary-600',
         error: 'text-error-600',
         success: 'text-success-600',
+        warning: 'text-warning-600',
     };
     const alignClasses = {
         left: 'text-left',
@@ -2424,8 +2492,9 @@ const Text = ({ children, as: Component = 'p', size = 'base', weight = 'normal',
         lineClamp ? lineClampClasses[lineClamp] : '',
         className,
     ].filter(Boolean).join(' ');
-    return (jsx(Component, { className: classes, children: children }));
-};
+    return (jsx(Component, { ref: ref, className: classes, ...htmlProps, children: children }));
+});
+Text.displayName = 'Text';
 
 const toastStyles = {
     success: {
@@ -2530,6 +2599,7 @@ const sizeClasses$4 = {
 };
 function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', }) {
     const modalRef = useRef(null);
+    const mouseDownOnBackdrop = useRef(false);
     const titleId = useId();
     // Handle escape key
     useEffect(() => {
@@ -2547,11 +2617,22 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
             document.body.style.overflow = 'unset';
         };
     }, [isOpen, onClose]);
-    // Handle click outside
-    const handleBackdropClick = (e) => {
+    // Track if mousedown originated on the backdrop
+    const handleBackdropMouseDown = (e) => {
         if (e.target === e.currentTarget) {
+            mouseDownOnBackdrop.current = true;
+        }
+        else {
+            mouseDownOnBackdrop.current = false;
+        }
+    };
+    // Handle click outside - only close if both mousedown and click happened on backdrop
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget && mouseDownOnBackdrop.current) {
             onClose();
         }
+        // Reset the flag after handling click
+        mouseDownOnBackdrop.current = false;
     };
     const getAnimationClass = () => {
         switch (animation) {
@@ -2571,7 +2652,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
     };
     if (!isOpen)
         return null;
-    return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$4[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: "px-6 py-4", children: children })] }) }));
+    return (jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 bg-ink-900 bg-opacity-50 backdrop-blur-sm animate-fade-in", onMouseDown: handleBackdropMouseDown, onClick: handleBackdropClick, children: jsxs("div", { ref: modalRef, className: `${sizeClasses$4[size]} w-full bg-white bg-subtle-grain rounded-xl shadow-2xl border border-paper-200 ${getAnimationClass()}`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId, children: [jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsx(X, { className: "h-5 w-5" }) }))] }), jsx("div", { className: "px-6 py-4", children: children })] }) }));
 }
 function ModalFooter({ children }) {
     return (jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50", children: children }));
@@ -5956,19 +6037,19 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
             spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
         },
     };
-    return (jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsx("div", { className: `
-          flex ${orientation === 'vertical' ? 'flex-col' : ''}
+    return (jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsx("div", { className: `
+          flex ${orientation === 'vertical' ? 'flex-col' : ''}
           ${variant === 'underline'
                     ? orientation === 'vertical'
                         ? `border-r border-paper-200 ${sizeClasses[size].gap} pr-6`
                         : `border-b border-paper-200 ${sizeClasses[size].gap}`
-                    : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
-          ${sizeClasses[size].minWidth}
+                    : `${sizeClasses[size].gap} p-1 bg-paper-50 rounded-lg`}
+          ${sizeClasses[size].minWidth}
         `, role: "tablist", children: tabs.map((tab) => {
                     const isActive = activeTab === tab.id;
-                    return (jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), className: `
-                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
-                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
+                    return (jsxs("button", { role: "tab", "aria-selected": isActive, "aria-controls": `panel-${tab.id}`, disabled: tab.disabled, onClick: () => !tab.disabled && handleTabChange(tab.id), className: `
+                flex items-center gap-2 ${sizeClasses[size].padding} ${sizeClasses[size].text} font-medium transition-all duration-200
+                ${orientation === 'vertical' ? 'w-full justify-start' : ''}
                 ${variant === 'underline'
                             ? isActive
                                 ? orientation === 'vertical'
@@ -5979,8 +6060,8 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
                                     : 'text-ink-600 hover:text-ink-900 border-b-2 border-transparent'
                             : isActive
                                 ? 'bg-white text-accent-900 rounded-md shadow-xs'
-                                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
-                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
+                                : 'text-ink-600 hover:text-ink-900 hover:bg-white/50 rounded-md'}
+                ${tab.disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
               `, children: [tab.icon && jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsx("span", { children: tab.label })] }, tab.id));
                 }) }), jsx("div", { className: `${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`, children: tabs.map((tab) => (jsx("div", { id: `panel-${tab.id}`, role: "tabpanel", "aria-labelledby": tab.id, hidden: activeTab !== tab.id, className: activeTab === tab.id ? 'animate-fade-in' : '', children: activeTab === tab.id && tab.content }, tab.id))) })] }));
 }
@@ -6056,99 +6137,6 @@ function StepIndicator({ steps, currentStep, variant = 'horizontal', onStepClick
             }) }) }));
 }
 
-function Table$1({ data, columns, keyExtractor, selectable = false, expandable = false, onRowSelect, renderExpandedRow, emptyState, className = '', onSort, sortColumn: externalSortColumn, sortDirection: externalSortDirection, }) {
-    const [internalSortColumn, setInternalSortColumn] = useState(null);
-    const [internalSortDirection, setInternalSortDirection] = useState(null);
-    // Use external sort state if provided, otherwise use internal state
-    const sortColumn = externalSortColumn !== undefined ? externalSortColumn : internalSortColumn;
-    const sortDirection = externalSortDirection !== undefined ? externalSortDirection : internalSortDirection;
-    const [selectedRows, setSelectedRows] = useState(new Set());
-    const [expandedRows, setExpandedRows] = useState(new Set());
-    // Handle sorting
-    const handleSort = (columnKey) => {
-        let newDirection;
-        if (sortColumn === columnKey) {
-            if (sortDirection === 'asc') {
-                newDirection = 'desc';
-            }
-            else if (sortDirection === 'desc') {
-                newDirection = null;
-            }
-            else {
-                newDirection = 'asc';
-            }
-        }
-        else {
-            newDirection = 'asc';
-        }
-        // If using external sort control, call the callback
-        if (onSort) {
-            onSort(columnKey, newDirection);
-        }
-        else {
-            // Otherwise update internal state
-            setInternalSortColumn(newDirection === null ? null : columnKey);
-            setInternalSortDirection(newDirection);
-        }
-    };
-    // Handle row selection
-    const handleRowSelect = (rowKey) => {
-        const newSelected = new Set(selectedRows);
-        if (newSelected.has(rowKey)) {
-            newSelected.delete(rowKey);
-        }
-        else {
-            newSelected.add(rowKey);
-        }
-        setSelectedRows(newSelected);
-        onRowSelect?.(Array.from(newSelected));
-    };
-    // Handle select all
-    const handleSelectAll = () => {
-        if (selectedRows.size === data.length) {
-            setSelectedRows(new Set());
-            onRowSelect?.([]);
-        }
-        else {
-            const allKeys = new Set(data.map(keyExtractor));
-            setSelectedRows(allKeys);
-            onRowSelect?.(Array.from(allKeys));
-        }
-    };
-    // Handle row expansion
-    const handleRowExpand = (rowKey) => {
-        const newExpanded = new Set(expandedRows);
-        if (newExpanded.has(rowKey)) {
-            newExpanded.delete(rowKey);
-        }
-        else {
-            newExpanded.add(rowKey);
-        }
-        setExpandedRows(newExpanded);
-    };
-    const getSortIcon = (columnKey) => {
-        if (sortColumn !== columnKey) {
-            return jsx(ArrowUpDown, { className: "h-4 w-4 text-ink-400" });
-        }
-        if (sortDirection === 'asc') {
-            return jsx(ArrowUp, { className: "h-4 w-4 text-accent-600" });
-        }
-        if (sortDirection === 'desc') {
-            return jsx(ArrowDown, { className: "h-4 w-4 text-accent-600" });
-        }
-        return jsx(ArrowUpDown, { className: "h-4 w-4 text-ink-400" });
-    };
-    if (data.length === 0 && emptyState) {
-        return jsx("div", { children: emptyState });
-    }
-    return (jsx("div", { className: `overflow-x-auto ${className}`, children: jsxs("table", { className: "table", children: [jsx("thead", { className: "table-header", children: jsxs("tr", { children: [selectable && (jsx("th", { className: "table-header-cell w-12", children: jsx("input", { type: "checkbox", checked: selectedRows.size === data.length && data.length > 0, onChange: handleSelectAll, className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": "Select all rows" }) })), expandable && jsx("th", { className: "table-header-cell w-12" }), columns.map((column) => (jsx("th", { className: "table-header-cell", style: { width: column.width }, children: column.sortable ? (jsxs("button", { onClick: () => handleSort(column.key), className: "group inline-flex items-center gap-2 hover:text-ink-900 transition-colors", children: [jsx("span", { children: column.header }), getSortIcon(column.key)] })) : (column.header) }, column.key)))] }) }), jsx("tbody", { children: data.map((row) => {
-                        const rowKey = keyExtractor(row);
-                        const isSelected = selectedRows.has(rowKey);
-                        const isExpanded = expandedRows.has(rowKey);
-                        return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `table-row ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : ''}`, children: [selectable && (jsx("td", { className: "table-cell", children: jsx("input", { type: "checkbox", checked: isSelected, onChange: () => handleRowSelect(rowKey), className: "w-4 h-4 text-accent-600 border-paper-300 rounded focus:ring-accent-400", "aria-label": `Select row ${rowKey}` }) })), expandable && (jsx("td", { className: "table-cell", children: jsx("button", { onClick: () => handleRowExpand(rowKey), className: "text-ink-500 hover:text-ink-900 transition-colors", "aria-label": isExpanded ? 'Collapse row' : 'Expand row', children: isExpanded ? (jsx(ChevronDown, { className: "h-4 w-4" })) : (jsx(ChevronRight, { className: "h-4 w-4" })) }) })), columns.map((column) => (jsx("td", { className: "table-cell", children: column.accessor ? column.accessor(row) : row[column.key] }, column.key)))] }), expandable && isExpanded && renderExpandedRow && (jsx("tr", { children: jsx("td", { colSpan: columns.length + (selectable ? 1 : 0) + (expandable ? 1 : 0), className: "px-6 py-4 bg-paper-50", children: renderExpandedRow(row) }) }))] }, rowKey));
-                    }) })] }) }));
-}
-
 function Badge({ children, variant = 'neutral', size = 'md', icon, onRemove, className = '', dot = false, }) {
     const variantStyles = {
         success: 'bg-success-50 text-success-700 border-success-200',
@@ -6256,8 +6244,8 @@ const Avatar = ({ firstName, lastName, fallbackText = 'U', imageUrl, size = 'md'
         `, style: { textShadow: '0 1px 2px rgba(0,0,0,0.3)' }, children: getInitials() }) }));
 };
 
-function EmptyState({ icon, title, description, action, secondaryAction, }) {
-    return (jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [icon && (jsx("div", { className: "mb-6 text-ink-400", children: icon })), jsx("h3", { className: "text-lg font-medium text-ink-900 mb-2", children: title }), jsx("p", { className: "text-sm text-ink-600 max-w-md mb-8", children: description }), (action || secondaryAction) && (jsxs("div", { className: "flex items-center gap-3", children: [action && (jsx(Button, { variant: "primary", onClick: action.onClick, children: action.label })), secondaryAction && (jsx(Button, { variant: "secondary", onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
+function EmptyState({ icon, title, description, action, secondaryAction, children, }) {
+    return (jsxs("div", { className: "flex flex-col items-center justify-center py-16 px-6 text-center", children: [icon && (jsx("div", { className: "mb-6 text-ink-400", children: icon })), jsx("h3", { className: "text-lg font-medium text-ink-900 mb-2", children: title }), jsx("p", { className: "text-sm text-ink-600 max-w-md mb-8", children: description }), children && (jsx("div", { className: "mb-8 w-full max-w-md", children: children })), (action || secondaryAction) && (jsxs("div", { className: "flex items-center gap-3", children: [action && (jsx(Button, { variant: "primary", onClick: action.onClick, children: action.label })), secondaryAction && (jsx(Button, { variant: "secondary", onClick: secondaryAction.onClick, children: secondaryAction.label }))] }))] }));
 }
 
 /**
@@ -6908,8 +6896,35 @@ const TwoColumnContent = ({ sidebar, children, className = '', }) => {
  * </PageLayout>
  * ```
  */
-const Page = ({ children, maxWidth: _maxWidth = '7xl', className = '', padding: _padding = 'normal' }) => {
-    return (jsx("div", { className: "min-h-screen bg-paper-100", children: jsx("div", { className: `notebook-page notebook-margin notebook-ruled ${className}`, children: children }) }));
+const Page = ({ children, maxWidth = '7xl', className = '', padding = 'normal', fixed = false }) => {
+    // Max width classes
+    const maxWidthClasses = {
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        '6xl': 'max-w-6xl',
+        '7xl': 'max-w-7xl',
+        'full': 'max-w-full',
+    };
+    // Padding classes - responsive (fixed left/top, responsive right/bottom) vs all fixed
+    const paddingClasses = {
+        none: fixed ? 'p-0' : 'pt-0 pl-0 pr-0 pb-0',
+        sm: fixed ? 'p-4' : 'pt-4 pl-4 pr-4 pb-4 sm:pr-6 md:pr-8 sm:pb-6 md:pb-8',
+        normal: fixed ? 'pt-12 pl-20 pr-16 pb-12' : 'pt-12 pl-20 pr-4 pb-4 sm:pr-8 md:pr-12 lg:pr-16 sm:pb-8 md:pb-12 lg:pb-16',
+        lg: fixed ? 'pt-16 pl-24 pr-20 pb-16' : 'pt-16 pl-24 pr-6 pb-6 sm:pr-12 md:pr-16 lg:pr-20 sm:pb-12 md:pb-16 lg:pb-20',
+    };
+    // Margin classes - responsive (fixed left/top, responsive right/bottom) vs all fixed
+    const marginClasses = fixed
+        ? 'mt-4 ml-4 mr-4 mb-4'
+        : 'mt-4 ml-4 mr-4 mb-4 sm:mr-6 md:mr-8 lg:mr-auto sm:mb-6 md:mb-8';
+    return (jsx("div", { className: "min-h-screen bg-paper-100", children: jsx("div", { className: `
+        bg-white bg-subtle-grain rounded-sm shadow-lg border-l-4 border-paper-300
+        min-h-[calc(100vh-2rem)] relative
+        notebook-margin notebook-ruled
+        ${maxWidthClasses[maxWidth]}
+        ${paddingClasses[padding]}
+        ${marginClasses}
+        ${className}
+      `.trim().replace(/\s+/g, ' '), children: children }) }));
 };
 
 /**
@@ -7244,9 +7259,11 @@ function getColumnStyle(column, dynamicWidth) {
  * />
  * ```
  */
-function DataTable({ data, columns, loading = false, error = null, emptyMessage = 'No data available', loadingRows = 5, className = '', onSortChange, currentSort = null, onEdit, onDelete, actions = [], onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
+function DataTable({ data, columns, loading = false, error = null, emptyMessage = 'No data available', loadingRows = 5, className = '', onSortChange, currentSort = null, onEdit, onDelete, actions = [], enableContextMenu = true, onRowClick, onRowDoubleClick, selectable = false, selectedRows: externalSelectedRows, onRowSelect, keyExtractor, expandable = false, expandedRows: externalExpandedRows, renderExpandedRow, expandedRowConfig, showExpandChevron = false, 
 // Visual customization props
-striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, }) {
+striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, highlightedRowId, bordered = false, borderColor = 'border-paper-200', disableHover = false, hiddenColumns = [], headerClassName = '', renderEmptyState: customRenderEmptyState, resizable = false, onColumnResize, reorderable = false, onColumnReorder, virtualized = false, virtualHeight = '600px', virtualRowHeight = 60, 
+// Pagination props
+paginated = false, currentPage = 1, pageSize = 10, totalItems, onPageChange, pageSizeOptions = [10, 25, 50, 100], onPageSizeChange, showPageSizeSelector = true, }) {
     // Column resizing state
     const [columnWidths, setColumnWidths] = useState({});
     const [resizingColumn, setResizingColumn] = useState(null);
@@ -7261,6 +7278,12 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
     const tableContainerRef = useRef(null);
     // Row hover state (for coordinating primary + secondary row highlighting)
     const [hoveredRowKey, setHoveredRowKey] = useState(null);
+    // Context menu state
+    const [contextMenuState, setContextMenuState] = useState({
+        isOpen: false,
+        position: { x: 0, y: 0 },
+        item: null,
+    });
     // Filter columns based on hiddenColumns
     const baseVisibleColumns = columns.filter(col => !hiddenColumns.includes(String(col.key)));
     // Initialize column order on mount or when columns change
@@ -7473,16 +7496,52 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
             }
         });
     }
+    // Combine all actions: built-in first, then custom actions, then delete last
+    // Delete is stored separately to ensure it's always last
+    let deleteAction = null;
     if (onDelete) {
-        builtInActions.push({
+        deleteAction = {
             label: 'Delete',
             icon: Trash,
             onClick: onDelete,
             variant: 'danger',
             tooltip: 'Delete item'
-        });
+        };
     }
-    const allActions = [...builtInActions, ...actions];
+    // Build final actions array with consistent ordering:
+    // 1. Edit (first - most common action)
+    // 2. View Details
+    // 3. Add Related actions
+    // 4. Manage Related actions
+    // 5. Custom actions (from actions prop)
+    // 6. Delete (always last - destructive action)
+    const allActions = [
+        ...builtInActions,
+        ...actions,
+        ...(deleteAction ? [deleteAction] : [])
+    ];
+    // Convert actions to menu items for context menu
+    const convertActionsToMenuItems = (item) => {
+        const visibleActions = allActions.filter(action => !action.show || action.show(item));
+        return visibleActions.map((action, idx) => {
+            let iconElement = null;
+            if (action.icon) {
+                if (React__default.isValidElement(action.icon)) {
+                    iconElement = action.icon;
+                }
+                else {
+                    iconElement = React__default.createElement(action.icon, { className: 'h-4 w-4' });
+                }
+            }
+            return {
+                id: `action-${idx}`,
+                label: action.label,
+                icon: iconElement,
+                onClick: () => action.onClick(item),
+                danger: action.variant === 'danger',
+            };
+        });
+    };
     // Selection state management
     const [internalSelectedRows, setInternalSelectedRows] = useState(new Set());
     // Expansion state management
@@ -7640,7 +7699,19 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
             // Hover state for row pair (primary + secondary)
             const isHovered = hoveredRowKey === rowKey;
             const hoverClass = disableHover ? '' : (isHovered ? 'bg-paper-100' : '');
-            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onDoubleClick: () => {
+            return (jsxs(React__default.Fragment, { children: [jsxs("tr", { className: `table-row-stable ${onRowDoubleClick || onRowClick || onEdit || expandedRowConfig?.edit || expandedRowConfig?.details || expandedRowConfig?.addRelated?.length || expandedRowConfig?.manageRelated?.length ? 'cursor-pointer' : ''} ${isSelected ? 'bg-accent-50 border-l-2 border-accent-500' : hoverClass || rowBgClass} ${borderClass}`, onMouseEnter: () => !disableHover && setHoveredRowKey(rowKey), onMouseLeave: () => !disableHover && setHoveredRowKey(null), onClick: () => onRowClick?.(item), onContextMenu: (e) => {
+                            if (enableContextMenu && allActions.length > 0) {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                const x = e.clientX;
+                                const y = e.clientY;
+                                setContextMenuState({
+                                    isOpen: true,
+                                    position: { x, y },
+                                    item,
+                                });
+                            }
+                        }, onDoubleClick: () => {
                             // Priority 1: If there's an onEdit handler (legacy), trigger it
                             if (onEdit) {
                                 onEdit(item);
@@ -7796,10 +7867,23 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
                                                 }, children: jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-paper-300 group-hover:bg-accent-400 transition-colors" }) }))] }, columnKey));
                                 })] }) }), jsx("tbody", { className: "bg-white table-loading transition-opacity duration-200", children: loading && data.length === 0 ? (renderLoadingSkeleton()) : data.length === 0 ? (renderEmptyStateContent()) : (renderDataRows()) })] })] }));
     // Wrap in scrollable container if virtualized
-    if (virtualized) {
-        return (jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent }));
-    }
-    return tableContent;
+    const finalContent = virtualized ? (jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
+    // Calculate pagination values
+    const effectiveTotalItems = totalItems ?? data.length;
+    const totalPages = Math.ceil(effectiveTotalItems / pageSize);
+    // Page size selector options
+    const pageSizeSelectOptions = pageSizeOptions.map(size => ({
+        value: String(size),
+        label: `${size} per page`,
+    }));
+    // Render pagination controls
+    const renderPaginationControls = () => {
+        if (!paginated)
+            return null;
+        return (jsxs("div", { className: "flex items-center justify-between mb-4 px-1", children: [jsxs("div", { className: "flex items-center gap-4", children: [showPageSizeSelector && onPageSizeChange && (jsxs("div", { className: "flex items-center gap-2", children: [jsx("span", { className: "text-sm text-ink-600", children: "Show:" }), jsx(Select, { options: pageSizeSelectOptions, value: String(pageSize), onChange: (value) => onPageSizeChange?.(Number(value)) })] })), jsx("span", { className: "text-sm text-ink-600", children: effectiveTotalItems > 0 ? (jsxs(Fragment, { children: ["Showing ", ((currentPage - 1) * pageSize) + 1, " - ", Math.min(currentPage * pageSize, effectiveTotalItems), " of ", effectiveTotalItems] })) : ('No items') })] }), totalPages > 1 && onPageChange && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }))] }));
+    };
+    // Render with context menu
+    return (jsxs(Fragment, { children: [renderPaginationControls(), finalContent, contextMenuState.isOpen && contextMenuState.item && (jsx(Menu, { items: convertActionsToMenuItems(contextMenuState.item), position: contextMenuState.position, onClose: () => setContextMenuState({ isOpen: false, position: { x: 0, y: 0 }, item: null }) }))] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -11611,12 +11695,12 @@ var bessel$1 = {};
 
 /* bessel.js (C) 2013-present SheetJS -- http://sheetjs.com */
 
-(function (exports) {
+(function (exports$1) {
 	(function (factory) {
 	  /*jshint ignore:start */
 	  if(typeof DO_NOT_EXPORT_BESSEL === 'undefined') {
 	    {
-	      factory(exports);
+	      factory(exports$1);
 	    }
 	  } else {
 	    factory({});
@@ -11850,7 +11934,7 @@ var bessel$1 = {};
 
 var jstat = {exports: {}};
 
-(function (module, exports) {
+(function (module, exports$1) {
 	(function (window, factory) {
 	    {
 	        module.exports = factory();
@@ -30467,7 +30551,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();
@@ -30477,16 +30561,16 @@ 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$1 = /*@__PURE__*/getDefaultExportFromCjs(fastFormulaParser);
+var FormulaParser = /*@__PURE__*/getDefaultExportFromCjs(fastFormulaParser);
 
 var scheduler = {exports: {}};
 
@@ -30507,7 +30591,7 @@ var hasRequiredScheduler_production;
 function requireScheduler_production () {
 	if (hasRequiredScheduler_production) return scheduler_production;
 	hasRequiredScheduler_production = 1;
-	(function (exports) {
+	(function (exports$1) {
 		function push(heap, node) {
 		  var index = heap.length;
 		  heap.push(node);
@@ -30556,16 +30640,16 @@ function requireScheduler_production () {
 		  var diff = a.sortIndex - b.sortIndex;
 		  return 0 !== diff ? diff : a.id - b.id;
 		}
-		exports.unstable_now = void 0;
+		exports$1.unstable_now = void 0;
 		if ("object" === typeof performance && "function" === typeof performance.now) {
 		  var localPerformance = performance;
-		  exports.unstable_now = function () {
+		  exports$1.unstable_now = function () {
 		    return localPerformance.now();
 		  };
 		} else {
 		  var localDate = Date,
 		    initialTime = localDate.now();
-		  exports.unstable_now = function () {
+		  exports$1.unstable_now = function () {
 		    return localDate.now() - initialTime;
 		  };
 		}
@@ -30613,14 +30697,14 @@ function requireScheduler_production () {
 		function shouldYieldToHost() {
 		  return needsPaint
 		    ? true
-		    : exports.unstable_now() - startTime < frameInterval
+		    : exports$1.unstable_now() - startTime < frameInterval
 		      ? false
 		      : true;
 		}
 		function performWorkUntilDeadline() {
 		  needsPaint = false;
 		  if (isMessageLoopRunning) {
-		    var currentTime = exports.unstable_now();
+		    var currentTime = exports$1.unstable_now();
 		    startTime = currentTime;
 		    var hasMoreWork = true;
 		    try {
@@ -30650,7 +30734,7 @@ function requireScheduler_production () {
 		                var continuationCallback = callback(
 		                  currentTask.expirationTime <= currentTime
 		                );
-		                currentTime = exports.unstable_now();
+		                currentTime = exports$1.unstable_now();
 		                if ("function" === typeof continuationCallback) {
 		                  currentTask.callback = continuationCallback;
 		                  advanceTimers(currentTime);
@@ -30706,29 +30790,29 @@ function requireScheduler_production () {
 		  };
 		function requestHostTimeout(callback, ms) {
 		  taskTimeoutID = localSetTimeout(function () {
-		    callback(exports.unstable_now());
+		    callback(exports$1.unstable_now());
 		  }, ms);
 		}
-		exports.unstable_IdlePriority = 5;
-		exports.unstable_ImmediatePriority = 1;
-		exports.unstable_LowPriority = 4;
-		exports.unstable_NormalPriority = 3;
-		exports.unstable_Profiling = null;
-		exports.unstable_UserBlockingPriority = 2;
-		exports.unstable_cancelCallback = function (task) {
+		exports$1.unstable_IdlePriority = 5;
+		exports$1.unstable_ImmediatePriority = 1;
+		exports$1.unstable_LowPriority = 4;
+		exports$1.unstable_NormalPriority = 3;
+		exports$1.unstable_Profiling = null;
+		exports$1.unstable_UserBlockingPriority = 2;
+		exports$1.unstable_cancelCallback = function (task) {
 		  task.callback = null;
 		};
-		exports.unstable_forceFrameRate = function (fps) {
+		exports$1.unstable_forceFrameRate = function (fps) {
 		  0 > fps || 125 < fps
 		    ? console.error(
 		        "forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"
 		      )
 		    : (frameInterval = 0 < fps ? Math.floor(1e3 / fps) : 5);
 		};
-		exports.unstable_getCurrentPriorityLevel = function () {
+		exports$1.unstable_getCurrentPriorityLevel = function () {
 		  return currentPriorityLevel;
 		};
-		exports.unstable_next = function (eventHandler) {
+		exports$1.unstable_next = function (eventHandler) {
 		  switch (currentPriorityLevel) {
 		    case 1:
 		    case 2:
@@ -30746,10 +30830,10 @@ function requireScheduler_production () {
 		    currentPriorityLevel = previousPriorityLevel;
 		  }
 		};
-		exports.unstable_requestPaint = function () {
+		exports$1.unstable_requestPaint = function () {
 		  needsPaint = true;
 		};
-		exports.unstable_runWithPriority = function (priorityLevel, eventHandler) {
+		exports$1.unstable_runWithPriority = function (priorityLevel, eventHandler) {
 		  switch (priorityLevel) {
 		    case 1:
 		    case 2:
@@ -30768,12 +30852,12 @@ function requireScheduler_production () {
 		    currentPriorityLevel = previousPriorityLevel;
 		  }
 		};
-		exports.unstable_scheduleCallback = function (
+		exports$1.unstable_scheduleCallback = function (
 		  priorityLevel,
 		  callback,
 		  options
 		) {
-		  var currentTime = exports.unstable_now();
+		  var currentTime = exports$1.unstable_now();
 		  "object" === typeof options && null !== options
 		    ? ((options = options.delay),
 		      (options =
@@ -30824,8 +30908,8 @@ function requireScheduler_production () {
 		          ((isMessageLoopRunning = true), schedulePerformWorkUntilDeadline())));
 		  return priorityLevel;
 		};
-		exports.unstable_shouldYield = shouldYieldToHost;
-		exports.unstable_wrapCallback = function (callback) {
+		exports$1.unstable_shouldYield = shouldYieldToHost;
+		exports$1.unstable_wrapCallback = function (callback) {
 		  var parentPriorityLevel = currentPriorityLevel;
 		  return function () {
 		    var previousPriorityLevel = currentPriorityLevel;
@@ -30858,13 +30942,13 @@ var hasRequiredScheduler_development;
 function requireScheduler_development () {
 	if (hasRequiredScheduler_development) return scheduler_development;
 	hasRequiredScheduler_development = 1;
-	(function (exports) {
+	(function (exports$1) {
 		"production" !== process.env.NODE_ENV &&
 		  (function () {
 		    function performWorkUntilDeadline() {
 		      needsPaint = false;
 		      if (isMessageLoopRunning) {
-		        var currentTime = exports.unstable_now();
+		        var currentTime = exports$1.unstable_now();
 		        startTime = currentTime;
 		        var hasMoreWork = true;
 		        try {
@@ -30895,7 +30979,7 @@ function requireScheduler_development () {
 		                    var continuationCallback = callback(
 		                      currentTask.expirationTime <= currentTime
 		                    );
-		                    currentTime = exports.unstable_now();
+		                    currentTime = exports$1.unstable_now();
 		                    if ("function" === typeof continuationCallback) {
 		                      currentTask.callback = continuationCallback;
 		                      advanceTimers(currentTime);
@@ -31016,32 +31100,32 @@ function requireScheduler_development () {
 		    function shouldYieldToHost() {
 		      return needsPaint
 		        ? true
-		        : exports.unstable_now() - startTime < frameInterval
+		        : exports$1.unstable_now() - startTime < frameInterval
 		          ? false
 		          : true;
 		    }
 		    function requestHostTimeout(callback, ms) {
 		      taskTimeoutID = localSetTimeout(function () {
-		        callback(exports.unstable_now());
+		        callback(exports$1.unstable_now());
 		      }, ms);
 		    }
 		    "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
 		      "function" ===
 		        typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart &&
 		      __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error());
-		    exports.unstable_now = void 0;
+		    exports$1.unstable_now = void 0;
 		    if (
 		      "object" === typeof performance &&
 		      "function" === typeof performance.now
 		    ) {
 		      var localPerformance = performance;
-		      exports.unstable_now = function () {
+		      exports$1.unstable_now = function () {
 		        return localPerformance.now();
 		      };
 		    } else {
 		      var localDate = Date,
 		        initialTime = localDate.now();
-		      exports.unstable_now = function () {
+		      exports$1.unstable_now = function () {
 		        return localDate.now() - initialTime;
 		      };
 		    }
@@ -31078,26 +31162,26 @@ function requireScheduler_development () {
 		      schedulePerformWorkUntilDeadline = function () {
 		        localSetTimeout(performWorkUntilDeadline, 0);
 		      };
-		    exports.unstable_IdlePriority = 5;
-		    exports.unstable_ImmediatePriority = 1;
-		    exports.unstable_LowPriority = 4;
-		    exports.unstable_NormalPriority = 3;
-		    exports.unstable_Profiling = null;
-		    exports.unstable_UserBlockingPriority = 2;
-		    exports.unstable_cancelCallback = function (task) {
+		    exports$1.unstable_IdlePriority = 5;
+		    exports$1.unstable_ImmediatePriority = 1;
+		    exports$1.unstable_LowPriority = 4;
+		    exports$1.unstable_NormalPriority = 3;
+		    exports$1.unstable_Profiling = null;
+		    exports$1.unstable_UserBlockingPriority = 2;
+		    exports$1.unstable_cancelCallback = function (task) {
 		      task.callback = null;
 		    };
-		    exports.unstable_forceFrameRate = function (fps) {
+		    exports$1.unstable_forceFrameRate = function (fps) {
 		      0 > fps || 125 < fps
 		        ? console.error(
 		            "forceFrameRate takes a positive int between 0 and 125, forcing frame rates higher than 125 fps is not supported"
 		          )
 		        : (frameInterval = 0 < fps ? Math.floor(1e3 / fps) : 5);
 		    };
-		    exports.unstable_getCurrentPriorityLevel = function () {
+		    exports$1.unstable_getCurrentPriorityLevel = function () {
 		      return currentPriorityLevel;
 		    };
-		    exports.unstable_next = function (eventHandler) {
+		    exports$1.unstable_next = function (eventHandler) {
 		      switch (currentPriorityLevel) {
 		        case 1:
 		        case 2:
@@ -31115,10 +31199,10 @@ function requireScheduler_development () {
 		        currentPriorityLevel = previousPriorityLevel;
 		      }
 		    };
-		    exports.unstable_requestPaint = function () {
+		    exports$1.unstable_requestPaint = function () {
 		      needsPaint = true;
 		    };
-		    exports.unstable_runWithPriority = function (priorityLevel, eventHandler) {
+		    exports$1.unstable_runWithPriority = function (priorityLevel, eventHandler) {
 		      switch (priorityLevel) {
 		        case 1:
 		        case 2:
@@ -31137,12 +31221,12 @@ function requireScheduler_development () {
 		        currentPriorityLevel = previousPriorityLevel;
 		      }
 		    };
-		    exports.unstable_scheduleCallback = function (
+		    exports$1.unstable_scheduleCallback = function (
 		      priorityLevel,
 		      callback,
 		      options
 		    ) {
-		      var currentTime = exports.unstable_now();
+		      var currentTime = exports$1.unstable_now();
 		      "object" === typeof options && null !== options
 		        ? ((options = options.delay),
 		          (options =
@@ -31194,8 +31278,8 @@ function requireScheduler_development () {
 		              schedulePerformWorkUntilDeadline())));
 		      return priorityLevel;
 		    };
-		    exports.unstable_shouldYield = shouldYieldToHost;
-		    exports.unstable_wrapCallback = function (callback) {
+		    exports$1.unstable_shouldYield = shouldYieldToHost;
+		    exports$1.unstable_wrapCallback = function (callback) {
 		      var parentPriorityLevel = currentPriorityLevel;
 		      return function () {
 		        var previousPriorityLevel = currentPriorityLevel;
@@ -32450,7 +32534,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(__assign(__assign({}, config), { onCell: function (ref) {
             var point = {
                 row: ref.row - 1,
                 column: ref.col - 1,
@@ -35456,8 +35540,8 @@ return CRC32;
 })();
 /* [MS-CFB] v20171201 */
 var CFB = /*#__PURE__*/(function _CFB(){
-var exports = {};
-exports.version = '1.2.1';
+var exports$1 = {};
+exports$1.version = '1.2.1';
 /* [MS-CFB] 2.6.4 */
 function namecmp(l/*:string*/, r/*:string*/)/*:number*/ {
 	var L = l.split("/"), R = r.split("/");
@@ -37129,12 +37213,12 @@ function cfb_mov(cfb/*:CFBContainer*/, old_name/*:string*/, new_name/*:string*/)
 
 function cfb_gc(cfb/*:CFBContainer*/)/*:void*/ { rebuild_cfb(cfb, true); }
 
-exports.find = find;
-exports.read = read;
-exports.parse = parse;
-exports.write = write;
-exports.writeFile = write_file;
-exports.utils = {
+exports$1.find = find;
+exports$1.read = read;
+exports$1.parse = parse;
+exports$1.write = write;
+exports$1.writeFile = write_file;
+exports$1.utils = {
 	cfb_new: cfb_new,
 	cfb_add: cfb_add,
 	cfb_del: cfb_del,
@@ -37150,7 +37234,7 @@ exports.utils = {
 	consts: consts
 };
 
-return exports;
+return exports$1;
 })();
 
 /* normalize data for blob ctor */
@@ -58613,6 +58697,137 @@ function CurrencyDisplay({ amount, currency = 'USD', locale = 'en-US', className
     return (jsx("span", { className: combinedClasses, title: `${currency} ${safeAmount.toFixed(precision)}`, children: displayValue }));
 }
 
+/**
+ * CurrencyInput - Specialized input for monetary values
+ *
+ * Automatically formats currency values with proper symbols and thousands separators.
+ * Handles parsing and validation of numeric currency input.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <CurrencyInput
+ *   label="Price"
+ *   value={price}
+ *   onChange={setPrice}
+ *   currency="USD"
+ * />
+ * ```
+ *
+ * @example With validation
+ * ```tsx
+ * <CurrencyInput
+ *   label="Budget"
+ *   value={budget}
+ *   onChange={setBudget}
+ *   min={0}
+ *   max={10000}
+ *   validationState={budget > 10000 ? 'error' : null}
+ *   validationMessage={budget > 10000 ? 'Exceeds maximum budget' : ''}
+ * />
+ * ```
+ */
+const CurrencyInput = forwardRef(({ value, onChange, currency = 'USD', locale = 'en-US', precision = 2, allowNegative = false, min, max, onBlur, onFocus, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = useState('');
+    const [isFocused, setIsFocused] = useState(false);
+    // Get currency symbol
+    const getCurrencySymbol = () => {
+        const formatter = new Intl.NumberFormat(locale, {
+            style: 'currency',
+            currency,
+        });
+        const parts = formatter.formatToParts(0);
+        const symbolPart = parts.find(part => part.type === 'currency');
+        return symbolPart?.value || '$';
+    };
+    const currencySymbol = getCurrencySymbol();
+    // Format number as currency
+    const formatCurrency = (num) => {
+        const formatter = new Intl.NumberFormat(locale, {
+            minimumFractionDigits: isFocused ? 0 : precision,
+            maximumFractionDigits: precision,
+        });
+        return formatter.format(num);
+    };
+    // Parse display value to number
+    const parseValue = (str) => {
+        if (!str || str === '')
+            return null;
+        // Remove all non-numeric characters except decimal point and minus sign
+        let cleaned = str.replace(/[^\d.-]/g, '');
+        // Handle multiple decimal points
+        const parts = cleaned.split('.');
+        if (parts.length > 2) {
+            cleaned = parts[0] + '.' + parts.slice(1).join('');
+        }
+        // Handle multiple minus signs (keep only first)
+        const minusCount = (cleaned.match(/-/g) || []).length;
+        if (minusCount > 1) {
+            const hasLeadingMinus = cleaned.startsWith('-');
+            cleaned = cleaned.replace(/-/g, '');
+            if (hasLeadingMinus)
+                cleaned = '-' + cleaned;
+        }
+        // Parse to float
+        const num = parseFloat(cleaned);
+        if (isNaN(num))
+            return null;
+        // Apply precision
+        return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
+    };
+    // Update display value when external value changes
+    useEffect(() => {
+        if (value === undefined || value === null || value === '') {
+            setDisplayValue('');
+        }
+        else {
+            const numValue = typeof value === 'string' ? parseFloat(value) : value;
+            if (!isNaN(numValue)) {
+                setDisplayValue(formatCurrency(numValue));
+            }
+        }
+    }, [value, isFocused]);
+    const handleChange = (e) => {
+        const inputValue = e.target.value;
+        setDisplayValue(inputValue);
+        const numValue = parseValue(inputValue);
+        // Validate constraints
+        if (numValue !== null) {
+            if (!allowNegative && numValue < 0)
+                return;
+            if (min !== undefined && numValue < min)
+                return;
+            if (max !== undefined && numValue > max)
+                return;
+        }
+        onChange?.(numValue);
+    };
+    const handleFocus = (e) => {
+        setIsFocused(true);
+        // Remove formatting when focused for easier editing
+        if (value !== undefined && value !== null && value !== '') {
+            const numValue = typeof value === 'string' ? parseFloat(value) : value;
+            if (!isNaN(numValue)) {
+                setDisplayValue(numValue.toString());
+            }
+        }
+        onFocus?.(e);
+    };
+    const handleBlur = (e) => {
+        setIsFocused(false);
+        // Reformat on blur
+        const numValue = parseValue(displayValue);
+        if (numValue !== null) {
+            setDisplayValue(formatCurrency(numValue));
+        }
+        else if (displayValue === '') {
+            setDisplayValue('');
+        }
+        onBlur?.(e);
+    };
+    return (jsx(Input, { ref: ref, type: "text", value: displayValue, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, prefix: currencySymbol, ...props }));
+});
+CurrencyInput.displayName = 'CurrencyInput';
+
 const formatOptions = {
     short: {
         year: 'numeric',
@@ -59523,8 +59738,19 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </Layout>
  * ```
  */
-function PageLayout({ title, description, children, className = '', headerContent }) {
-    return (jsxs(Page, { children: [headerContent, jsxs("div", { className: `p-6 max-w-7xl mx-auto pb-20 ${className}`, children: [jsxs("div", { className: "mb-8", children: [jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
+function PageLayout({ title, description, children, className = '', headerContent, maxWidth = '7xl', fixed = false }) {
+    // Responsive padding classes - fixed left/top, responsive right/bottom
+    const paddingClasses = fixed
+        ? 'p-6 pb-20'
+        : 'pt-6 pl-6 pr-2 pb-8 sm:pr-4 md:pr-6 sm:pb-12 md:pb-16 lg:pb-20';
+    const maxWidthClasses = {
+        '4xl': 'max-w-4xl',
+        '5xl': 'max-w-5xl',
+        '6xl': 'max-w-6xl',
+        '7xl': 'max-w-7xl',
+        'full': 'max-w-full',
+    };
+    return (jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxs("div", { className: "mb-8", children: [jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
 }
 
 const sizeClasses = {
@@ -59896,6 +60122,113 @@ function loadColumnOrder(tableId) {
     }
 }
 
+/**
+ * Export data to Excel file
+ *
+ * A standalone utility for exporting any data array to Excel format.
+ * Works independently of the Spreadsheet component.
+ *
+ * **Features:**
+ * - Export arrays of objects to Excel
+ * - Custom column headers and ordering
+ * - Value formatting with custom functions
+ * - Multi-sheet support
+ * - Automatic type handling
+ *
+ * @example
+ * ```typescript
+ * // Simple export - uses object keys as headers
+ * const data = [
+ *   { id: 1, name: 'Product A', price: 29.99 },
+ *   { id: 2, name: 'Product B', price: 49.99 },
+ * ];
+ * exportToExcel({ data, filename: 'products.xlsx' });
+ *
+ * // Custom columns with formatting
+ * exportToExcel({
+ *   data: users,
+ *   filename: 'users.xlsx',
+ *   columns: [
+ *     { key: 'id', label: 'ID' },
+ *     { key: 'name', label: 'Full Name' },
+ *     { key: 'email', label: 'Email Address' },
+ *     { key: 'createdAt', label: 'Joined', format: (date) => new Date(date).toLocaleDateString() },
+ *     { key: 'isActive', label: 'Status', format: (active) => active ? 'Active' : 'Inactive' },
+ *   ],
+ * });
+ *
+ * // Multi-sheet export
+ * const wb = utils.book_new();
+ * exportToExcel({ data: products, sheetName: 'Products', workbook: wb });
+ * exportToExcel({ data: orders, sheetName: 'Orders', workbook: wb });
+ * writeFile(wb, 'multi-sheet.xlsx');
+ * ```
+ *
+ * @param options - Export configuration options
+ * @returns WorkBook if workbook option provided, otherwise void (auto-downloads)
+ */
+function exportToExcel({ data, filename = 'export.xlsx', sheetName = 'Sheet1', columns, includeHeaders = true, workbook, }) {
+    if (!data || data.length === 0) {
+        throw new Error('No data provided for export');
+    }
+    let worksheetData;
+    if (columns) {
+        // Use custom columns with specific ordering and formatting
+        const headers = columns.map((col) => col.label);
+        const rows = data.map((row) => columns.map((col) => {
+            const value = row[col.key];
+            return col.format ? col.format(value) : value ?? '';
+        }));
+        worksheetData = includeHeaders ? [headers, ...rows] : rows;
+    }
+    else {
+        // Auto-generate from object keys
+        if (includeHeaders) {
+            const headers = Object.keys(data[0]);
+            const rows = data.map((row) => headers.map((key) => row[key] ?? ''));
+            worksheetData = [headers, ...rows];
+        }
+        else {
+            const headers = Object.keys(data[0]);
+            worksheetData = data.map((row) => headers.map((key) => row[key] ?? ''));
+        }
+    }
+    const worksheet = utils.aoa_to_sheet(worksheetData);
+    // If workbook provided, add sheet and return (for multi-sheet exports)
+    if (workbook) {
+        utils.book_append_sheet(workbook, worksheet, sheetName);
+        return workbook;
+    }
+    // Otherwise, create workbook and download
+    const newWorkbook = utils.book_new();
+    utils.book_append_sheet(newWorkbook, worksheet, sheetName);
+    writeFileSync(newWorkbook, filename);
+}
+function exportDataTableToExcel({ data, columns, filename = 'export.xlsx', sheetName = 'Sheet1', }) {
+    const excelColumns = columns.map((col) => ({
+        key: col.key,
+        label: col.header,
+    }));
+    exportToExcel({
+        data,
+        columns: excelColumns,
+        filename,
+        sheetName,
+    });
+}
+function createMultiSheetExcel({ filename, sheets }) {
+    const workbook = utils.book_new();
+    sheets.forEach((sheet) => {
+        exportToExcel({
+            data: sheet.data,
+            sheetName: sheet.name,
+            columns: sheet.columns,
+            workbook,
+        });
+    });
+    writeFileSync(workbook, filename);
+}
+
 function useColumnResize(options = {}) {
     const { tableId, persist = false } = options;
     const [columnWidths, setColumnWidths] = useState({});
@@ -60012,5 +60345,5 @@ function useColumnReorder(initialColumns, options = {}) {
     };
 }
 
-export { Accordion, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, Badge, BottomSheet, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, Chip, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, Dashboard, DashboardContent, DashboardHeader, DataTable, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, Modal, ModalFooter, MultiSelect, NotificationBar, NotificationIndicator, NumberInput, Page, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, QueryTransparency, RadioGroup, Rating, RichTextEditor, SearchBar, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, Switch, Table$1 as Table, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createPageControlsSection, createQueryDetailsSection, formatStatisticValue, formatStatistics, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, statusManager, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFormContext, useMediaQuery };
+export { Accordion, ActionButton, AdminModal, Alert, AlertDialog, AppLayout, Autocomplete, Avatar, Badge, BottomSheet, Box, Breadcrumbs, Button, ButtonGroup, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CardView, Carousel, Checkbox, Chip, Collapsible, ColorPicker, Combobox, ComingSoon, CommandPalette, ConfirmDialog, ContextMenu, ControlBar, CurrencyDisplay, CurrencyInput, Dashboard, DashboardContent, DashboardHeader, DataTable, DateDisplay, DatePicker, DateRangePicker, DateTimePicker, Drawer, DrawerFooter, DropZone, Dropdown, DropdownTrigger, EmptyState, ErrorBoundary, ExpandableRowButton, ExpandableToolbar, ExpandedRowEditForm, ExportButton, FieldArray, FileUpload, FilterBar, FilterControls, FilterStatusBanner, Form, FormContext, FormControl, FormWizard, Grid, GridItem, Hide, HoverCard, InfiniteScroll, Input, KanbanBoard, Layout, Loading, LoadingOverlay, Logo, MarkdownEditor, MaskedInput, Menu, MenuDivider, Modal, ModalFooter, MultiSelect, NotificationBar, NotificationIndicator, NumberInput, Page, PageLayout, PageNavigation, Pagination, PasswordInput, Popover, Progress, QueryTransparency, RadioGroup, Rating, RichTextEditor, SearchBar, Select, Separator, Show, Sidebar, SidebarGroup, Skeleton, SkeletonCard, SkeletonTable, Slider, Spreadsheet, SpreadsheetReport, Stack, StatCard, StatItem, StatsCardGrid, StatsGrid, StatusBadge, StatusBar, StepIndicator, Stepper, Switch, Tabs, Text, Textarea, ThemeToggle, TimePicker, Timeline, Toast, ToastContainer, Tooltip, Transfer, TreeView, TwoColumnContent, UserProfileButton, addErrorMessage, addInfoMessage, addSuccessMessage, addWarningMessage, calculateColumnWidth, createActionsSection, createFiltersSection, createMultiSheetExcel, createPageControlsSection, createQueryDetailsSection, exportDataTableToExcel, exportToExcel, formatStatisticValue, formatStatistics, loadColumnOrder, loadColumnWidths, reorderArray, saveColumnOrder, saveColumnWidths, statusManager, useColumnReorder, useColumnResize, useCommandPalette, useConfirmDialog, useFormContext, useMediaQuery };
 //# sourceMappingURL=index.esm.js.map