@papernote/ui 1.1.0 → 1.2.0

package/dist/index.js

@@ -2550,6 +2550,7 @@ const sizeClasses$4 = {
 };
 function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton = true, animation = 'scale', }) {
     const modalRef = React.useRef(null);
+    const mouseDownOnBackdrop = React.useRef(false);
     const titleId = React.useId();
     // Handle escape key
     React.useEffect(() => {
@@ -2567,11 +2568,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) {
@@ -2591,7 +2603,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', showCloseButton
     };
     if (!isOpen)
         return null;
-    return (jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: "px-6 py-4", children: children })] }) }));
+    return (jsxRuntime.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: jsxRuntime.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: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-paper-200", children: [jsxRuntime.jsx("h3", { id: titleId, className: "text-lg font-medium text-ink-900", children: title }), showCloseButton && (jsxRuntime.jsx("button", { onClick: onClose, className: "text-ink-400 hover:text-ink-600 transition-colors", "aria-label": "Close modal", children: jsxRuntime.jsx(lucideReact.X, { className: "h-5 w-5" }) }))] }), jsxRuntime.jsx("div", { className: "px-6 py-4", children: children })] }) }));
 }
 function ModalFooter({ children }) {
     return (jsxRuntime.jsx("div", { className: "flex items-center justify-end gap-3 px-6 py-4 border-t border-paper-200 bg-paper-50", children: children }));
@@ -5976,19 +5988,19 @@ function Tabs({ tabs, activeTab: controlledActiveTab, defaultTab, variant = 'und
             spacing: orientation === 'vertical' ? 'mt-8' : 'mt-8',
         },
     };
-    return (jsxRuntime.jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsxRuntime.jsx("div", { className: `
-          flex ${orientation === 'vertical' ? 'flex-col' : ''}
+    return (jsxRuntime.jsxs("div", { className: `w-full ${orientation === 'vertical' ? `flex ${sizeClasses[size].gap}` : ''}`, children: [jsxRuntime.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 (jsxRuntime.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 (jsxRuntime.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'
@@ -5999,8 +6011,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 && jsxRuntime.jsx("span", { className: `flex-shrink-0 ${sizeClasses[size].icon}`, children: tab.icon }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
                 }) }), jsxRuntime.jsx("div", { className: `${orientation === 'vertical' ? 'flex-1' : sizeClasses[size].spacing}`, children: tabs.map((tab) => (jsxRuntime.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))) })] }));
 }
@@ -6928,8 +6940,35 @@ const TwoColumnContent = ({ sidebar, children, className = '', }) => {
  * </PageLayout>
  * ```
  */
-const Page = ({ children, maxWidth: _maxWidth = '7xl', className = '', padding: _padding = 'normal' }) => {
-    return (jsxRuntime.jsx("div", { className: "min-h-screen bg-paper-100", children: jsxRuntime.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 (jsxRuntime.jsx("div", { className: "min-h-screen bg-paper-100", children: jsxRuntime.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 }) }));
 };
 
 /**
@@ -7264,7 +7303,7 @@ 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, }) {
     // Column resizing state
@@ -7281,6 +7320,12 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
     const tableContainerRef = React.useRef(null);
     // Row hover state (for coordinating primary + secondary row highlighting)
     const [hoveredRowKey, setHoveredRowKey] = React.useState(null);
+    // Context menu state
+    const [contextMenuState, setContextMenuState] = React.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
@@ -7503,6 +7548,28 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
         });
     }
     const allActions = [...builtInActions, ...actions];
+    // 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.isValidElement(action.icon)) {
+                    iconElement = action.icon;
+                }
+                else {
+                    iconElement = React.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] = React.useState(new Set());
     // Expansion state management
@@ -7660,7 +7727,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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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 (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.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);
@@ -7816,10 +7895,9 @@ striped = false, stripedColor, density = 'normal', rowClassName, rowHighlight, h
                                                 }, children: jsxRuntime.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-1 bg-paper-300 group-hover:bg-accent-400 transition-colors" }) }))] }, columnKey));
                                 })] }) }), jsxRuntime.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 (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent }));
-    }
-    return tableContent;
+    const finalContent = virtualized ? (jsxRuntime.jsx("div", { ref: tableContainerRef, onScroll: handleScroll, style: { height: virtualHeight, overflow: 'auto' }, className: "rounded-lg", children: tableContent })) : tableContent;
+    // Render with context menu
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [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 }) }))] }));
 }
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
@@ -11631,12 +11709,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({});
@@ -11870,7 +11948,7 @@ var bessel$1 = {};
 
 var jstat = {exports: {}};
 
-(function (module, exports) {
+(function (module, exports$1) {
 	(function (window, factory) {
 	    {
 	        module.exports = factory();
@@ -30527,7 +30605,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);
@@ -30576,16 +30654,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;
 		  };
 		}
@@ -30633,14 +30711,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 {
@@ -30670,7 +30748,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);
@@ -30726,29 +30804,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:
@@ -30766,10 +30844,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:
@@ -30788,12 +30866,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 =
@@ -30844,8 +30922,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;
@@ -30878,13 +30956,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 {
@@ -30915,7 +30993,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);
@@ -31036,32 +31114,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;
 		      };
 		    }
@@ -31098,26 +31176,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:
@@ -31135,10 +31213,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:
@@ -31157,12 +31235,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 =
@@ -31214,8 +31292,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;
@@ -35476,8 +35554,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("/");
@@ -37149,12 +37227,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,
@@ -37170,7 +37248,7 @@ exports.utils = {
 	consts: consts
 };
 
-return exports;
+return exports$1;
 })();
 
 /* normalize data for blob ctor */
@@ -58633,6 +58711,137 @@ function CurrencyDisplay({ amount, currency = 'USD', locale = 'en-US', className
     return (jsxRuntime.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 = React.forwardRef(({ value, onChange, currency = 'USD', locale = 'en-US', precision = 2, allowNegative = false, min, max, onBlur, onFocus, ...props }, ref) => {
+    const [displayValue, setDisplayValue] = React.useState('');
+    const [isFocused, setIsFocused] = React.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
+    React.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 (jsxRuntime.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',
@@ -59543,8 +59752,19 @@ const AppLayout = ({ children, toolbarSections = [], className = '', showToolbar
  * </Layout>
  * ```
  */
-function PageLayout({ title, description, children, className = '', headerContent }) {
-    return (jsxRuntime.jsxs(Page, { children: [headerContent, jsxRuntime.jsxs("div", { className: `p-6 max-w-7xl mx-auto pb-20 ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.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 (jsxRuntime.jsxs(Page, { padding: "none", maxWidth: maxWidth, fixed: fixed, children: [headerContent, jsxRuntime.jsxs("div", { className: `${paddingClasses} ${maxWidthClasses[maxWidth]} mx-auto ${className}`, children: [jsxRuntime.jsxs("div", { className: "mb-8", children: [jsxRuntime.jsx("h1", { className: "text-3xl font-bold text-ink-900 mb-2", children: title }), description && (jsxRuntime.jsx("p", { className: "text-ink-600", children: description }))] }), children] })] }));
 }
 
 const sizeClasses = {
@@ -59916,6 +60136,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] = React.useState({});
@@ -60066,6 +60393,7 @@ exports.ConfirmDialog = ConfirmDialog;
 exports.ContextMenu = ContextMenu;
 exports.ControlBar = ControlBar;
 exports.CurrencyDisplay = CurrencyDisplay;
+exports.CurrencyInput = CurrencyInput;
 exports.Dashboard = Dashboard;
 exports.DashboardContent = DashboardContent;
 exports.DashboardHeader = DashboardHeader;
@@ -60169,8 +60497,11 @@ exports.addWarningMessage = addWarningMessage;
 exports.calculateColumnWidth = calculateColumnWidth;
 exports.createActionsSection = createActionsSection;
 exports.createFiltersSection = createFiltersSection;
+exports.createMultiSheetExcel = createMultiSheetExcel;
 exports.createPageControlsSection = createPageControlsSection;
 exports.createQueryDetailsSection = createQueryDetailsSection;
+exports.exportDataTableToExcel = exportDataTableToExcel;
+exports.exportToExcel = exportToExcel;
 exports.formatStatisticValue = formatStatisticValue;
 exports.formatStatistics = formatStatistics;
 exports.loadColumnOrder = loadColumnOrder;