react-open-source-grid 1.7.16 → 1.7.18

package/dist/lib/index.js

@@ -10,7 +10,7 @@ import {
 } from "./chunk-FG3FLQAE.js";
 
 // src/components/DataGrid/DataGrid.tsx
-import React20, { useReducer, useMemo as useMemo4, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef10, useState as useState14, forwardRef, useImperativeHandle } from "react";
+import React22, { useReducer, useMemo as useMemo4, useEffect as useEffect9, useCallback as useCallback7, useRef as useRef10, useState as useState14, forwardRef, useImperativeHandle } from "react";
 
 // src/components/DataGrid/gridReducer.ts
 var createInitialState = (columns, pageSize = 10) => {
@@ -52,7 +52,10 @@ var createInitialState = (columns, pageSize = 10) => {
       dropPosition: null
     },
     pinnedRowsTop: [],
-    pinnedRowsBottom: []
+    pinnedRowsBottom: [],
+    detailRowState: {
+      expandedMasterRows: {}
+    }
   };
 };
 var gridReducer = (state, action) => {
@@ -463,6 +466,55 @@ var gridReducer = (state, action) => {
         pinnedRowsBottom: state.pinnedRowsBottom.filter((id) => id !== rowId)
       };
     }
+    case "TOGGLE_MASTER_ROW": {
+      const rowId = action.payload;
+      const currentExpanded = state.detailRowState.expandedMasterRows[String(rowId)] || false;
+      return {
+        ...state,
+        detailRowState: {
+          ...state.detailRowState,
+          expandedMasterRows: {
+            ...state.detailRowState.expandedMasterRows,
+            [String(rowId)]: !currentExpanded
+          }
+        }
+      };
+    }
+    case "EXPAND_MASTER_ROW": {
+      const rowId = action.payload;
+      return {
+        ...state,
+        detailRowState: {
+          ...state.detailRowState,
+          expandedMasterRows: {
+            ...state.detailRowState.expandedMasterRows,
+            [String(rowId)]: true
+          }
+        }
+      };
+    }
+    case "COLLAPSE_MASTER_ROW": {
+      const rowId = action.payload;
+      return {
+        ...state,
+        detailRowState: {
+          ...state.detailRowState,
+          expandedMasterRows: {
+            ...state.detailRowState.expandedMasterRows,
+            [String(rowId)]: false
+          }
+        }
+      };
+    }
+    case "SET_EXPANDED_MASTER_ROWS": {
+      return {
+        ...state,
+        detailRowState: {
+          ...state.detailRowState,
+          expandedMasterRows: action.payload
+        }
+      };
+    }
     case "SET_ROW_DATA": {
       return { ...state };
     }
@@ -483,6 +535,8 @@ var GridHeader = ({
   pinnedLeft,
   pinnedRight,
   showColumnPinning,
+  masterDetailConfig,
+  dragRowConfig,
   onContextMenu
 }) => {
   const [draggedColumn, setDraggedColumn] = useState(null);
@@ -593,7 +647,38 @@ var GridHeader = ({
       document.removeEventListener("mouseup", handleMouseUp);
     };
   }, [resizingColumn, resizeStartX, resizeStartWidth, dispatch]);
-  return /* @__PURE__ */ React.createElement("div", { ref: headerRef, style: { borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", width: "100%", backgroundColor: "var(--grid-header-bg)" } }, /* @__PURE__ */ React.createElement("div", { role: "row", style: { display: "flex", minWidth: "100%", backgroundColor: "var(--grid-header-bg)" } }, displayColumnOrder.map((field, colIndex) => {
+  return /* @__PURE__ */ React.createElement("div", { ref: headerRef, style: { borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", width: "100%", backgroundColor: "var(--grid-header-bg)" } }, /* @__PURE__ */ React.createElement("div", { role: "row", style: { display: "flex", minWidth: "100%", backgroundColor: "var(--grid-header-bg)" } }, (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "columnheader",
+      style: {
+        width: "48px",
+        flexShrink: 0,
+        borderRight: "var(--grid-border-width, 1px) solid var(--grid-border)",
+        backgroundColor: "var(--grid-header-bg)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: {
+      padding: "var(--grid-header-padding, 10px 12px)",
+      fontWeight: "var(--grid-header-font-weight, 600)",
+      fontSize: "var(--grid-font-size, 13px)",
+      color: "var(--grid-header-text)"
+    } })
+  ), (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && dragRowConfig.showDragHandle !== false && dragRowConfig.dragHandlePosition === "left" && /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      role: "columnheader",
+      style: {
+        width: "32px",
+        flexShrink: 0,
+        borderRight: "var(--grid-border-width, 1px) solid var(--grid-border)",
+        backgroundColor: "var(--grid-header-bg)"
+      }
+    }
+  ), displayColumnOrder.map((field, colIndex) => {
     const column = columnMap.get(field);
     if (!column) return null;
     const isSorted = sortConfig.field === field;
@@ -757,7 +842,7 @@ var GridHeader = ({
 };
 
 // src/components/DataGrid/GridBody.tsx
-import React6, { useRef as useRef4, useEffect as useEffect2 } from "react";
+import React8, { useRef as useRef4, useEffect as useEffect2 } from "react";
 
 // src/components/DataGrid/GroupRow.tsx
 import React2 from "react";
@@ -1950,6 +2035,55 @@ var DraggableRow = ({
   );
 };
 
+// src/components/DataGrid/MasterDetailCell.tsx
+import React6 from "react";
+var MasterDetailCell = ({
+  row: _row,
+  isExpanded,
+  isMasterRow,
+  onToggle
+}) => {
+  if (!isMasterRow) {
+    return /* @__PURE__ */ React6.createElement("div", { className: "master-detail-cell-empty" });
+  }
+  return /* @__PURE__ */ React6.createElement("div", { className: "master-detail-cell" }, /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      type: "button",
+      className: "master-detail-toggle",
+      onClick: (e) => {
+        e.stopPropagation();
+        onToggle();
+      },
+      "aria-label": isExpanded ? "Collapse detail row" : "Expand detail row",
+      "aria-expanded": isExpanded
+    },
+    /* @__PURE__ */ React6.createElement("span", { className: `master-detail-icon ${isExpanded ? "expanded" : "collapsed"}` }, isExpanded ? "\u25BC" : "\u25B6")
+  ));
+};
+
+// src/components/DataGrid/DetailRow.tsx
+import React7 from "react";
+var DetailRow = ({
+  masterRow,
+  rowIndex,
+  renderDetailRow,
+  columnCount,
+  detailRowHeight = 200,
+  detailRowAutoHeight = false
+}) => {
+  const style = detailRowAutoHeight ? { minHeight: detailRowHeight } : { height: detailRowHeight };
+  return /* @__PURE__ */ React7.createElement("tr", { className: "detail-row-wrapper" }, /* @__PURE__ */ React7.createElement(
+    "td",
+    {
+      className: "detail-row-cell",
+      colSpan: columnCount,
+      style: { padding: 0 }
+    },
+    /* @__PURE__ */ React7.createElement("div", { className: "detail-row", style }, /* @__PURE__ */ React7.createElement("div", { className: "detail-row-content" }, renderDetailRow({ masterRow, rowIndex })))
+  ));
+};
+
 // src/components/DataGrid/GridBody.tsx
 var GridBody = ({
   columns,
@@ -1973,6 +2107,8 @@ var GridBody = ({
   virtualScrollConfig,
   treeConfig,
   dragRowConfig,
+  masterDetailConfig,
+  expandedMasterRows = {},
   tableId,
   onRowReorder,
   onScroll,
@@ -2222,7 +2358,7 @@ var GridBody = ({
   const renderRowContent = (row, rowIndex, style) => {
     if (isGroupedRow(row)) {
       const groupAgg = groupAggregates.get(row.groupKey) || {};
-      return /* @__PURE__ */ React6.createElement(React6.Fragment, { key: row.groupKey }, /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React8.createElement(React8.Fragment, { key: row.groupKey }, /* @__PURE__ */ React8.createElement(
         GroupRow,
         {
           group: row,
@@ -2234,7 +2370,7 @@ var GridBody = ({
           pinnedLeft,
           pinnedRight
         }
-      ), showGroupFooters && row.isExpanded && aggregateConfigs.length > 0 && /* @__PURE__ */ React6.createElement(
+      ), showGroupFooters && row.isExpanded && aggregateConfigs.length > 0 && /* @__PURE__ */ React8.createElement(
         GroupFooterRow,
         {
           group: row,
@@ -2249,7 +2385,7 @@ var GridBody = ({
       ));
     }
     if ((treeConfig == null ? void 0 : treeConfig.enabled) && isTreeNode(row)) {
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React8.createElement(
         TreeRow,
         {
           key: row.id,
@@ -2278,7 +2414,7 @@ var GridBody = ({
     const isDragEnabled = (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && !isLoadingRow;
     const showDragHandle = isDragEnabled && dragRowConfig.showDragHandle !== false;
     const handlePosition = (dragRowConfig == null ? void 0 : dragRowConfig.dragHandlePosition) || "left";
-    const rowContent = /* @__PURE__ */ React6.createElement(
+    const rowContent = /* @__PURE__ */ React8.createElement(
       "div",
       {
         key: row.id,
@@ -2299,7 +2435,39 @@ var GridBody = ({
         onMouseLeave: (e) => !isSelected && !isLoadingRow && (e.currentTarget.style.backgroundColor = "var(--grid-bg)"),
         onClick: (e) => !isLoadingRow && handleRowClick(row, rowIndex, e)
       },
-      showDragHandle && handlePosition === "left" && /* @__PURE__ */ React6.createElement(
+      (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) && /* @__PURE__ */ React8.createElement(
+        "div",
+        {
+          style: {
+            width: "48px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            borderRight: "var(--grid-border-width, 1px) solid var(--grid-border)"
+          }
+        },
+        /* @__PURE__ */ React8.createElement(
+          MasterDetailCell,
+          {
+            row,
+            isExpanded: expandedMasterRows[String(row.id)] || false,
+            isMasterRow: masterDetailConfig.isRowMaster ? masterDetailConfig.isRowMaster(row) : true,
+            onToggle: () => {
+              dispatch({ type: "TOGGLE_MASTER_ROW", payload: row.id });
+              if (masterDetailConfig.onDetailRowToggled) {
+                const isCurrentlyExpanded = expandedMasterRows[String(row.id)] || false;
+                masterDetailConfig.onDetailRowToggled({
+                  masterRow: row,
+                  rowIndex,
+                  isOpen: !isCurrentlyExpanded
+                });
+              }
+            }
+          }
+        )
+      ),
+      showDragHandle && handlePosition === "left" && /* @__PURE__ */ React8.createElement(
         "div",
         {
           style: {
@@ -2322,7 +2490,7 @@ var GridBody = ({
             e.currentTarget.style.backgroundColor = "transparent";
           }
         },
-        /* @__PURE__ */ React6.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "5", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "5", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "10", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "10", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "15", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "15", r: "1.5" }))
+        /* @__PURE__ */ React8.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "5", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "5", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "10", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "10", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "15", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "15", r: "1.5" }))
       ),
       displayColumnOrder.map((field, columnIndex) => {
         const column = columnMap.get(field);
@@ -2331,7 +2499,7 @@ var GridBody = ({
         const isEditing = editState.rowId === row.id && editState.field === field;
         const isCellFocused = (focusState == null ? void 0 : focusState.rowIndex) === rowIndex && (focusState == null ? void 0 : focusState.columnIndex) === columnIndex;
         const cellStyle = getPinnedCellStyle(field);
-        return /* @__PURE__ */ React6.createElement(
+        return /* @__PURE__ */ React8.createElement(
           "div",
           {
             key: `${row.id}-${field}`,
@@ -2365,7 +2533,7 @@ var GridBody = ({
             onCancel: () => dispatch({ type: "END_EDIT" }),
             autoFocus: true,
             ...column.editorParams
-          }) : /* @__PURE__ */ React6.createElement(
+          }) : /* @__PURE__ */ React8.createElement(
             "input",
             {
               ref: editInputRef,
@@ -2394,13 +2562,13 @@ var GridBody = ({
                 }
               }
             }
-          ) : /* @__PURE__ */ React6.createElement("div", { style: {
+          ) : /* @__PURE__ */ React8.createElement("div", { style: {
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap",
             display: "block",
             color: isLoadingRow ? "var(--grid-text-secondary)" : "var(--grid-text)"
-          } }, isLoadingRow ? /* @__PURE__ */ React6.createElement("span", { style: {
+          } }, isLoadingRow ? /* @__PURE__ */ React8.createElement("span", { style: {
             display: "inline-block",
             width: "80%",
             height: "12px",
@@ -2410,7 +2578,7 @@ var GridBody = ({
           } }) : column.renderCell ? column.renderCell(row) : cellValue ?? "")
         );
       }),
-      showDragHandle && handlePosition === "right" && /* @__PURE__ */ React6.createElement(
+      showDragHandle && handlePosition === "right" && /* @__PURE__ */ React8.createElement(
         "div",
         {
           style: {
@@ -2433,11 +2601,11 @@ var GridBody = ({
             e.currentTarget.style.backgroundColor = "transparent";
           }
         },
-        /* @__PURE__ */ React6.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "5", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "5", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "10", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "10", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "7", cy: "15", r: "1.5" }), /* @__PURE__ */ React6.createElement("circle", { cx: "13", cy: "15", r: "1.5" }))
+        /* @__PURE__ */ React8.createElement("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "currentColor" }, /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "5", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "5", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "10", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "10", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "7", cy: "15", r: "1.5" }), /* @__PURE__ */ React8.createElement("circle", { cx: "13", cy: "15", r: "1.5" }))
       )
     );
     if ((dragRowConfig == null ? void 0 : dragRowConfig.enabled) && !isLoadingRow) {
-      return /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React8.createElement(
         DraggableRow,
         {
           key: row.id,
@@ -2456,11 +2624,11 @@ var GridBody = ({
   };
   const renderPinnedTopRows = () => {
     if (pinnedRowsTop.length === 0) return null;
-    return /* @__PURE__ */ React6.createElement("div", { style: { position: "sticky", top: 0, zIndex: 15, backgroundColor: "var(--grid-bg)" } }, pinnedRowsTop.map((row, rowIndex) => renderRowContent(row, rowIndex)));
+    return /* @__PURE__ */ React8.createElement("div", { style: { position: "sticky", top: 0, zIndex: 15, backgroundColor: "var(--grid-bg)" } }, pinnedRowsTop.map((row, rowIndex) => renderRowContent(row, rowIndex)));
   };
   const renderPinnedBottomRows = () => {
     if (pinnedRowsBottom.length === 0) return null;
-    return /* @__PURE__ */ React6.createElement("div", { style: { position: "sticky", bottom: 0, zIndex: 15, backgroundColor: "var(--grid-bg)" } }, pinnedRowsBottom.map((row, rowIndex) => renderRowContent(row, rowIndex + rows.length + pinnedRowsTop.length)));
+    return /* @__PURE__ */ React8.createElement("div", { style: { position: "sticky", bottom: 0, zIndex: 15, backgroundColor: "var(--grid-bg)" } }, pinnedRowsBottom.map((row, rowIndex) => renderRowContent(row, rowIndex + rows.length + pinnedRowsTop.length)));
   };
   if (virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) {
     const virtualColumns = displayColumnOrder.map((field) => ({
@@ -2469,7 +2637,7 @@ var GridBody = ({
     }));
     const totalColumnWidth = virtualColumns.reduce((sum, col) => sum + col.width, 0);
     const enableColumnVirtualization = virtualScrollConfig.enableColumnVirtualization ?? true;
-    return /* @__PURE__ */ React6.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", width: "100%", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { position: "relative", flex: 1, display: "flex", flexDirection: "column", width: "100%", backgroundColor: "var(--grid-bg)" } }, renderPinnedTopRows(), /* @__PURE__ */ React8.createElement(
       VirtualScroller,
       {
         items: rows,
@@ -2487,7 +2655,7 @@ var GridBody = ({
           }
           const isSelected = selectedRows.has(row.id);
           const isFocused = (focusState == null ? void 0 : focusState.rowIndex) === index;
-          return /* @__PURE__ */ React6.createElement(
+          return /* @__PURE__ */ React8.createElement(
             "div",
             {
               role: "row",
@@ -2518,7 +2686,7 @@ var GridBody = ({
               const cellValue = row[field];
               const isEditing = editState.rowId === row.id && editState.field === field;
               const isCellFocused = (focusState == null ? void 0 : focusState.rowIndex) === index && (focusState == null ? void 0 : focusState.columnIndex) === displayColumnOrder.indexOf(field);
-              return /* @__PURE__ */ React6.createElement(
+              return /* @__PURE__ */ React8.createElement(
                 "div",
                 {
                   key: `${row.id}-${field}`,
@@ -2545,7 +2713,7 @@ var GridBody = ({
                   onKeyDown: (e) => handleKeyDown(e, index, columnIndex),
                   tabIndex: isCellFocused ? 0 : -1
                 },
-                isEditing ? /* @__PURE__ */ React6.createElement(
+                isEditing ? /* @__PURE__ */ React8.createElement(
                   "input",
                   {
                     ref: editInputRef,
@@ -2564,7 +2732,7 @@ var GridBody = ({
                       }
                     }
                   }
-                ) : /* @__PURE__ */ React6.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" } }, cellValue ?? "")
+                ) : /* @__PURE__ */ React8.createElement("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", display: "block" } }, cellValue ?? "")
               );
             })
           );
@@ -2572,11 +2740,44 @@ var GridBody = ({
       }
     ), renderPinnedBottomRows());
   }
-  return /* @__PURE__ */ React6.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflow: "auto", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", width: "100%" } }, renderPinnedTopRows(), rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
+  const renderRowsWithDetails = () => {
+    const elements = [];
+    rows.forEach((row, rowIndex) => {
+      const rowId = isGroupedRow(row) ? row.groupKey : row.id;
+      elements.push(
+        /* @__PURE__ */ React8.createElement(React8.Fragment, { key: `row-${rowId}` }, renderRowContent(row, rowIndex + pinnedRowsTop.length))
+      );
+      if ((masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) && !isGroupedRow(row) && !isTreeNode(row)) {
+        const isMasterRow = masterDetailConfig.isRowMaster ? masterDetailConfig.isRowMaster(row) : true;
+        const isExpanded = expandedMasterRows[String(row.id)] || false;
+        if (isMasterRow && isExpanded) {
+          let columnCount = displayColumnOrder.length;
+          if (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) columnCount += 1;
+          if ((dragRowConfig == null ? void 0 : dragRowConfig.enabled) && dragRowConfig.showDragHandle !== false) columnCount += 1;
+          elements.push(
+            /* @__PURE__ */ React8.createElement(
+              DetailRow,
+              {
+                key: `detail-${row.id}`,
+                masterRow: row,
+                rowIndex,
+                renderDetailRow: masterDetailConfig.renderDetailRow,
+                columnCount,
+                detailRowHeight: masterDetailConfig.detailRowHeight,
+                detailRowAutoHeight: masterDetailConfig.detailRowAutoHeight
+              }
+            )
+          );
+        }
+      }
+    });
+    return elements;
+  };
+  return /* @__PURE__ */ React8.createElement("div", { ref: bodyRef, role: "rowgroup", style: { overflow: "auto", maxHeight: "500px", position: "relative", backgroundColor: "var(--grid-bg)", width: "100%" } }, renderPinnedTopRows(), (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) ? renderRowsWithDetails() : rows.map((row, rowIndex) => renderRowContent(row, rowIndex + pinnedRowsTop.length)), renderPinnedBottomRows());
 };
 
 // src/components/DataGrid/GridPagination.tsx
-import React7 from "react";
+import React9 from "react";
 var GridPagination = ({
   currentPage,
   pageSize,
@@ -2618,7 +2819,7 @@ var GridPagination = ({
     }
     return pages;
   };
-  return /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)" } }, /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-footer-bg)", borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)" } }, /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React9.createElement("span", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text)", fontWeight: "500" } }, "Rows per page:"), /* @__PURE__ */ React9.createElement(
     "select",
     {
       style: {
@@ -2645,10 +2846,10 @@ var GridPagination = ({
         e.target.style.boxShadow = "none";
       }
     },
-    /* @__PURE__ */ React7.createElement("option", { value: 10 }, "10"),
-    /* @__PURE__ */ React7.createElement("option", { value: 20 }, "20"),
-    /* @__PURE__ */ React7.createElement("option", { value: 50 }, "50")
-  )), /* @__PURE__ */ React7.createElement("div", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text-secondary)", fontWeight: "500" } }, totalRows === 0 ? "No rows" : /* @__PURE__ */ React7.createElement(React7.Fragment, null, startRow, "-", endRow, " of ", totalRows)), /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px" } }, /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React9.createElement("option", { value: 10 }, "10"),
+    /* @__PURE__ */ React9.createElement("option", { value: 20 }, "20"),
+    /* @__PURE__ */ React9.createElement("option", { value: 50 }, "50")
+  )), /* @__PURE__ */ React9.createElement("div", { style: { fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text-secondary)", fontWeight: "500" } }, totalRows === 0 ? "No rows" : /* @__PURE__ */ React9.createElement(React9.Fragment, null, startRow, "-", endRow, " of ", totalRows)), /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px" } }, /* @__PURE__ */ React9.createElement(
     "button",
     {
       style: {
@@ -2671,7 +2872,7 @@ var GridPagination = ({
       title: "First page"
     },
     "\u27EA"
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "button",
     {
       style: {
@@ -2696,10 +2897,10 @@ var GridPagination = ({
     "\u2039"
   ), getPageNumbers().map((page, index) => {
     if (page === "...") {
-      return /* @__PURE__ */ React7.createElement("span", { key: `ellipsis-${index}`, style: { paddingLeft: "8px", paddingRight: "8px", paddingTop: "6px", paddingBottom: "6px", fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text-secondary)" } }, "...");
+      return /* @__PURE__ */ React9.createElement("span", { key: `ellipsis-${index}`, style: { paddingLeft: "8px", paddingRight: "8px", paddingTop: "6px", paddingBottom: "6px", fontSize: "var(--grid-font-size, 13px)", color: "var(--grid-text-secondary)" } }, "...");
     }
     const isCurrentPage = currentPage === page;
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React9.createElement(
       "button",
       {
         key: page,
@@ -2722,7 +2923,7 @@ var GridPagination = ({
       },
       page + 1
     );
-  }), /* @__PURE__ */ React7.createElement(
+  }), /* @__PURE__ */ React9.createElement(
     "button",
     {
       style: {
@@ -2745,7 +2946,7 @@ var GridPagination = ({
       title: "Next page"
     },
     "\u203A"
-  ), /* @__PURE__ */ React7.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     "button",
     {
       style: {
@@ -2772,7 +2973,7 @@ var GridPagination = ({
 };
 
 // src/components/DataGrid/GroupByPanel.tsx
-import React8, { useState as useState4 } from "react";
+import React10, { useState as useState4 } from "react";
 var GroupByPanel = ({
   columns,
   groupBy,
@@ -2822,7 +3023,7 @@ var GroupByPanel = ({
   const handleClearAll = () => {
     dispatch({ type: "CLEAR_GROUPS" });
   };
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       style: {
@@ -2838,9 +3039,9 @@ var GroupByPanel = ({
       onDragLeave: handleDragLeave,
       onDrop: handleDrop
     },
-    /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" } }, groupBy.length === 0 ? /* @__PURE__ */ React8.createElement("div", { style: { color: "var(--grid-text-secondary)", fontSize: "var(--grid-font-size, 13px)", display: "flex", alignItems: "center", gap: "8px", fontStyle: "italic" } }, "\u26A1 Drag columns here to group rows") : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", { style: { fontSize: "12px", color: "var(--grid-text-secondary)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "Group by:"), groupBy.map((field, index) => {
+    /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexWrap: "wrap" } }, groupBy.length === 0 ? /* @__PURE__ */ React10.createElement("div", { style: { color: "var(--grid-text-secondary)", fontSize: "var(--grid-font-size, 13px)", display: "flex", alignItems: "center", gap: "8px", fontStyle: "italic" } }, "\u26A1 Drag columns here to group rows") : /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("span", { style: { fontSize: "12px", color: "var(--grid-text-secondary)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "Group by:"), groupBy.map((field, index) => {
       const column = columnMap.get(field);
-      return /* @__PURE__ */ React8.createElement(
+      return /* @__PURE__ */ React10.createElement(
         "div",
         {
           key: field,
@@ -2875,9 +3076,9 @@ var GroupByPanel = ({
             e.currentTarget.style.boxShadow = "var(--grid-shadow-light, 0 2px 4px rgba(0, 102, 204, 0.15))";
           }
         },
-        index > 0 && /* @__PURE__ */ React8.createElement("span", { style: { color: "rgba(255, 255, 255, 0.7)", marginRight: "4px" } }, "?"),
-        /* @__PURE__ */ React8.createElement("span", null, (column == null ? void 0 : column.headerName) || field),
-        /* @__PURE__ */ React8.createElement(
+        index > 0 && /* @__PURE__ */ React10.createElement("span", { style: { color: "rgba(255, 255, 255, 0.7)", marginRight: "4px" } }, "?"),
+        /* @__PURE__ */ React10.createElement("span", null, (column == null ? void 0 : column.headerName) || field),
+        /* @__PURE__ */ React10.createElement(
           "button",
           {
             onClick: () => handleRemoveGroup(field),
@@ -2899,7 +3100,7 @@ var GroupByPanel = ({
             onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
             title: "Remove grouping"
           },
-          /* @__PURE__ */ React8.createElement(
+          /* @__PURE__ */ React10.createElement(
             "svg",
             {
               style: { width: "12px", height: "12px" },
@@ -2907,7 +3108,7 @@ var GroupByPanel = ({
               stroke: "currentColor",
               viewBox: "0 0 24 24"
             },
-            /* @__PURE__ */ React8.createElement(
+            /* @__PURE__ */ React10.createElement(
               "path",
               {
                 strokeLinecap: "round",
@@ -2919,7 +3120,7 @@ var GroupByPanel = ({
           )
         )
       );
-    }), /* @__PURE__ */ React8.createElement(
+    }), /* @__PURE__ */ React10.createElement(
       "button",
       {
         onClick: handleClearAll,
@@ -2950,7 +3151,7 @@ var GroupByPanel = ({
 };
 
 // src/components/DataGrid/GridFooter.tsx
-import React9 from "react";
+import React11 from "react";
 var GridFooter = ({
   columns,
   displayColumnOrder,
@@ -3002,26 +3203,26 @@ var GridFooter = ({
   const isFirstColumn = (field) => {
     return displayColumnOrder[0] === field;
   };
-  return /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", minWidth: "100%", borderTop: "2px solid var(--grid-border)", backgroundColor: "var(--grid-footer-bg)", fontWeight: "var(--grid-header-font-weight, 600)" } }, displayColumnOrder.map((field, columnIndex) => {
+  return /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", minWidth: "100%", borderTop: "2px solid var(--grid-border)", backgroundColor: "var(--grid-footer-bg)", fontWeight: "var(--grid-header-font-weight, 600)" } }, displayColumnOrder.map((field, columnIndex) => {
     const column = columnMap.get(field);
     if (!column) return null;
     const cellStyle = getPinnedCellStyle(field);
     const configs = fieldAggregateMap.get(field);
     let cellContent;
     if (isFirstColumn(field) && columnIndex === 0) {
-      cellContent = /* @__PURE__ */ React9.createElement("span", { style: { color: "var(--grid-text)", fontWeight: "var(--grid-header-font-weight, 600)" } }, label);
+      cellContent = /* @__PURE__ */ React11.createElement("span", { style: { color: "var(--grid-text)", fontWeight: "var(--grid-header-font-weight, 600)" } }, label);
     } else if (configs && configs.length > 0) {
-      cellContent = /* @__PURE__ */ React9.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3px" } }, configs.map((config, idx) => {
+      cellContent = /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3px" } }, configs.map((config, idx) => {
         const key = `${config.field}_${config.function}`;
         const value = aggregates[key];
         const formattedValue = formatAggregateValue(value, config.function);
         const displayLabel = config.label || getAggregateLabel(config.function);
-        return /* @__PURE__ */ React9.createElement("div", { key: idx, style: { fontSize: "12px" } }, configs.length > 1 && /* @__PURE__ */ React9.createElement("span", { style: { color: "var(--grid-text-secondary)", marginRight: "4px", fontWeight: "500" } }, displayLabel, ":"), /* @__PURE__ */ React9.createElement("span", { style: { color: "var(--grid-text)", fontWeight: "var(--grid-header-font-weight, 600)" } }, formattedValue));
+        return /* @__PURE__ */ React11.createElement("div", { key: idx, style: { fontSize: "12px" } }, configs.length > 1 && /* @__PURE__ */ React11.createElement("span", { style: { color: "var(--grid-text-secondary)", marginRight: "4px", fontWeight: "500" } }, displayLabel, ":"), /* @__PURE__ */ React11.createElement("span", { style: { color: "var(--grid-text)", fontWeight: "var(--grid-header-font-weight, 600)" } }, formattedValue));
       }));
     } else {
       cellContent = null;
     }
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React11.createElement(
       "div",
       {
         key: `footer-${field}`,
@@ -3040,7 +3241,7 @@ var GridFooter = ({
 };
 
 // src/components/DataGrid/ColumnChooser.tsx
-import React10, { useState as useState5, useRef as useRef5, useEffect as useEffect3, useMemo as useMemo2 } from "react";
+import React12, { useState as useState5, useRef as useRef5, useEffect as useEffect3, useMemo as useMemo2 } from "react";
 import { createPortal } from "react-dom";
 var ColumnChooser = ({
   columns,
@@ -3118,7 +3319,7 @@ var ColumnChooser = ({
       }
     }
   };
-  const panelContent = isOpen && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 9999, backgroundColor: "rgba(0, 0, 0, 0.3)" }, onClick: () => setIsOpen(false) }), /* @__PURE__ */ React10.createElement(
+  const panelContent = isOpen && /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 9999, backgroundColor: "rgba(0, 0, 0, 0.3)" }, onClick: () => setIsOpen(false) }), /* @__PURE__ */ React12.createElement(
     "div",
     {
       ref: panelRef,
@@ -3136,16 +3337,16 @@ var ColumnChooser = ({
         maxHeight: "500px"
       }
     },
-    /* @__PURE__ */ React10.createElement("div", { style: { paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "1px solid var(--grid-border)", display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React10.createElement("h3", { style: { fontSize: "14px", fontWeight: "600", color: "var(--grid-text)", margin: 0 } }, "Select Columns"), /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React10.createElement("button", { onClick: onResetLayout, style: { fontSize: "12px", color: "#2563eb", fontWeight: "500", backgroundColor: "transparent", border: "none", cursor: "pointer", textDecoration: "none", padding: 0 }, onMouseEnter: (e) => {
+    /* @__PURE__ */ React12.createElement("div", { style: { paddingLeft: "16px", paddingRight: "16px", paddingTop: "12px", paddingBottom: "12px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "1px solid var(--grid-border)", display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React12.createElement("h3", { style: { fontSize: "14px", fontWeight: "600", color: "var(--grid-text)", margin: 0 } }, "Select Columns"), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React12.createElement("button", { onClick: onResetLayout, style: { fontSize: "12px", color: "#2563eb", fontWeight: "500", backgroundColor: "transparent", border: "none", cursor: "pointer", textDecoration: "none", padding: 0 }, onMouseEnter: (e) => {
       e.currentTarget.style.color = "#1d4ed8";
       e.currentTarget.style.textDecoration = "underline";
     }, onMouseLeave: (e) => {
       e.currentTarget.style.color = "#2563eb";
       e.currentTarget.style.textDecoration = "none";
-    } }, "Reset"), /* @__PURE__ */ React10.createElement("button", { onClick: () => setIsOpen(false), style: { color: "#6b7280", backgroundColor: "transparent", border: "none", cursor: "pointer", fontSize: "16px", padding: 0, margin: 0 }, onMouseEnter: (e) => e.currentTarget.style.color = "#374151", onMouseLeave: (e) => e.currentTarget.style.color = "#6b7280" }, "\u2715"))),
-    /* @__PURE__ */ React10.createElement("div", { style: { padding: "16px", display: "flex", gap: "12px", height: "400px" } }, /* @__PURE__ */ React10.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React10.createElement("div", { style: { fontSize: "12px", fontWeight: "600", color: "var(--grid-text)", marginBottom: "8px" } }, "Available Columns (", availableColumns.length, ")"), /* @__PURE__ */ React10.createElement("div", { style: { flex: 1, border: "1px solid var(--grid-border)", borderRadius: "4px", overflowY: "scroll", backgroundColor: "var(--grid-bg)" } }, availableColumns.map((column) => {
+    } }, "Reset"), /* @__PURE__ */ React12.createElement("button", { onClick: () => setIsOpen(false), style: { color: "#6b7280", backgroundColor: "transparent", border: "none", cursor: "pointer", fontSize: "16px", padding: 0, margin: 0 }, onMouseEnter: (e) => e.currentTarget.style.color = "#374151", onMouseLeave: (e) => e.currentTarget.style.color = "#6b7280" }, "\u2715"))),
+    /* @__PURE__ */ React12.createElement("div", { style: { padding: "16px", display: "flex", gap: "12px", height: "400px" } }, /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React12.createElement("div", { style: { fontSize: "12px", fontWeight: "600", color: "var(--grid-text)", marginBottom: "8px" } }, "Available Columns (", availableColumns.length, ")"), /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, border: "1px solid var(--grid-border)", borderRadius: "4px", overflowY: "scroll", backgroundColor: "var(--grid-bg)" } }, availableColumns.map((column) => {
       const isSelected = selectedAvailable === column.field;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React12.createElement(
         "div",
         {
           key: column.field,
@@ -3166,9 +3367,9 @@ var ColumnChooser = ({
         },
         column.headerName
       );
-    }), availableColumns.length === 0 && /* @__PURE__ */ React10.createElement("div", { style: { padding: "32px 12px", textAlign: "center", color: "var(--grid-text-secondary)", fontSize: "14px" } }, "All columns are visible"))), /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ React10.createElement("button", { onClick: moveToVisible, disabled: !selectedAvailable, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: !selectedAvailable ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: !selectedAvailable ? "not-allowed" : "pointer" }, onMouseEnter: (e) => !selectedAvailable ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => !selectedAvailable ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Add selected" }, ">"), /* @__PURE__ */ React10.createElement("button", { onClick: moveAllToVisible, disabled: availableColumns.length === 0, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: availableColumns.length === 0 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: availableColumns.length === 0 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => availableColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => availableColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Add all" }, ">>"), /* @__PURE__ */ React10.createElement("button", { onClick: moveToAvailable, disabled: !selectedVisible || visibleColumns.length === 1, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: !selectedVisible || visibleColumns.length === 1 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: !selectedVisible || visibleColumns.length === 1 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => !selectedVisible || visibleColumns.length === 1 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => !selectedVisible || visibleColumns.length === 1 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Remove selected" }, "<"), /* @__PURE__ */ React10.createElement("button", { onClick: moveAllToAvailable, disabled: visibleColumns.length === 0, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: visibleColumns.length === 0 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: visibleColumns.length === 0 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => visibleColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => visibleColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Remove all" }, "<<")), /* @__PURE__ */ React10.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React10.createElement("div", { style: { fontSize: "12px", fontWeight: "600", color: "var(--grid-text)", marginBottom: "8px" } }, "Visible Columns (", visibleColumns.length, ")"), /* @__PURE__ */ React10.createElement("div", { style: { flex: 1, border: "1px solid var(--grid-border)", borderRadius: "4px", overflowY: "scroll", backgroundColor: "var(--grid-bg)" } }, visibleColumns.map((column) => {
+    }), availableColumns.length === 0 && /* @__PURE__ */ React12.createElement("div", { style: { padding: "32px 12px", textAlign: "center", color: "var(--grid-text-secondary)", fontSize: "14px" } }, "All columns are visible"))), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ React12.createElement("button", { onClick: moveToVisible, disabled: !selectedAvailable, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: !selectedAvailable ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: !selectedAvailable ? "not-allowed" : "pointer" }, onMouseEnter: (e) => !selectedAvailable ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => !selectedAvailable ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Add selected" }, ">"), /* @__PURE__ */ React12.createElement("button", { onClick: moveAllToVisible, disabled: availableColumns.length === 0, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: availableColumns.length === 0 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: availableColumns.length === 0 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => availableColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => availableColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Add all" }, ">>"), /* @__PURE__ */ React12.createElement("button", { onClick: moveToAvailable, disabled: !selectedVisible || visibleColumns.length === 1, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: !selectedVisible || visibleColumns.length === 1 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: !selectedVisible || visibleColumns.length === 1 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => !selectedVisible || visibleColumns.length === 1 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => !selectedVisible || visibleColumns.length === 1 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Remove selected" }, "<"), /* @__PURE__ */ React12.createElement("button", { onClick: moveAllToAvailable, disabled: visibleColumns.length === 0, style: { paddingLeft: "12px", paddingRight: "12px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: visibleColumns.length === 0 ? "#d1d5db" : "#3b82f6", color: "#fff", borderRadius: "4px", border: "none", cursor: visibleColumns.length === 0 ? "not-allowed" : "pointer" }, onMouseEnter: (e) => visibleColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#1d4ed8", onMouseLeave: (e) => visibleColumns.length === 0 ? null : e.currentTarget.style.backgroundColor = "#3b82f6", title: "Remove all" }, "<<")), /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React12.createElement("div", { style: { fontSize: "12px", fontWeight: "600", color: "var(--grid-text)", marginBottom: "8px" } }, "Visible Columns (", visibleColumns.length, ")"), /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, border: "1px solid var(--grid-border)", borderRadius: "4px", overflowY: "scroll", backgroundColor: "var(--grid-bg)" } }, visibleColumns.map((column) => {
       const isSelected = selectedVisible === column.field;
-      return /* @__PURE__ */ React10.createElement(
+      return /* @__PURE__ */ React12.createElement(
         "div",
         {
           key: column.field,
@@ -3189,7 +3390,7 @@ var ColumnChooser = ({
         },
         column.headerName
       );
-    }))), /* @__PURE__ */ React10.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ React10.createElement(
+    }))), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", flexDirection: "column", justifyContent: "center", gap: "8px" } }, /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: () => {
@@ -3202,7 +3403,7 @@ var ColumnChooser = ({
         title: "Move up"
       },
       "\u25B2"
-    ), /* @__PURE__ */ React10.createElement(
+    ), /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: () => {
@@ -3216,7 +3417,7 @@ var ColumnChooser = ({
       },
       "\u25BC"
     ))),
-    /* @__PURE__ */ React10.createElement("div", { style: { paddingLeft: "16px", paddingRight: "16px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: "var(--grid-bg-alt)", borderTop: "1px solid var(--grid-border)", display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement("div", { style: { paddingLeft: "16px", paddingRight: "16px", paddingTop: "8px", paddingBottom: "8px", backgroundColor: "var(--grid-bg-alt)", borderTop: "1px solid var(--grid-border)", display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React12.createElement(
       "button",
       {
         onClick: () => {
@@ -3231,7 +3432,7 @@ var ColumnChooser = ({
       "Done"
     ))
   ));
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(
     "button",
     {
       ref: buttonRef,
@@ -3247,13 +3448,13 @@ var ColumnChooser = ({
       onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg)",
       title: "Select Columns"
     },
-    /* @__PURE__ */ React10.createElement("svg", { style: { width: "16px", height: "16px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React10.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" })),
+    /* @__PURE__ */ React12.createElement("svg", { style: { width: "16px", height: "16px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React12.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" })),
     "Columns"
   ), panelContent && createPortal(panelContent, document.body));
 };
 
 // src/components/DataGrid/ExportMenu.tsx
-import React11, { useState as useState6 } from "react";
+import React13, { useState as useState6 } from "react";
 
 // src/components/DataGrid/exportUtils.ts
 import ExcelJS from "exceljs";
@@ -3380,7 +3581,7 @@ var ExportMenu = ({
   const [scope, setScope] = useState6("filtered");
   const [styling, setStyling] = useState6("basic");
   const [buttonRect, setButtonRect] = useState6(null);
-  const buttonRef = React11.useRef(null);
+  const buttonRef = React13.useRef(null);
   const getDataByScope = () => {
     switch (scope) {
       case "all":
@@ -3427,7 +3628,7 @@ var ExportMenu = ({
       disabled: currentPageData.length === 0
     }
   ];
-  return /* @__PURE__ */ React11.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React13.createElement(
     "button",
     {
       ref: buttonRef,
@@ -3463,7 +3664,7 @@ var ExportMenu = ({
       },
       title: "Export data to CSV or XLSX format"
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       "svg",
       {
         style: { width: "16px", height: "16px" },
@@ -3471,7 +3672,7 @@ var ExportMenu = ({
         stroke: "currentColor",
         viewBox: "0 0 24 24"
       },
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React13.createElement(
         "path",
         {
           strokeLinecap: "round",
@@ -3482,7 +3683,7 @@ var ExportMenu = ({
       )
     ),
     "Export"
-  ), showMenu && buttonRect && /* @__PURE__ */ React11.createElement(
+  ), showMenu && buttonRect && /* @__PURE__ */ React13.createElement(
     "div",
     {
       style: {
@@ -3502,7 +3703,7 @@ var ExportMenu = ({
         overflowY: "auto"
       }
     },
-    /* @__PURE__ */ React11.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React11.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Format"), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ React11.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Format"), /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "radio",
@@ -3512,7 +3713,7 @@ var ExportMenu = ({
         onChange: (e) => setFormat(e.target.value),
         style: { width: "16px", height: "16px", cursor: "pointer" }
       }
-    ), /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "CSV")), /* @__PURE__ */ React11.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "CSV")), /* @__PURE__ */ React13.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "radio",
@@ -3522,8 +3723,8 @@ var ExportMenu = ({
         onChange: (e) => setFormat(e.target.value),
         style: { width: "16px", height: "16px", cursor: "pointer" }
       }
-    ), /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "XLSX (Excel)")))),
-    /* @__PURE__ */ React11.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React11.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Data Scope"), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } }, scopeOptions.map((option) => /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "XLSX (Excel)")))),
+    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Data Scope"), /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "10px" } }, scopeOptions.map((option) => /* @__PURE__ */ React13.createElement(
       "label",
       {
         key: option.value,
@@ -3548,7 +3749,7 @@ var ExportMenu = ({
           e.currentTarget.style.backgroundColor = "transparent";
         }
       },
-      /* @__PURE__ */ React11.createElement(
+      /* @__PURE__ */ React13.createElement(
         "input",
         {
           type: "radio",
@@ -3560,9 +3761,9 @@ var ExportMenu = ({
           style: { width: "16px", height: "16px", cursor: option.disabled ? "not-allowed" : "pointer" }
         }
       ),
-      /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, option.label)
+      /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, option.label)
     )))),
-    format === "xlsx" && /* @__PURE__ */ React11.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React11.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Styling"), /* @__PURE__ */ React11.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ React11.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(
+    format === "xlsx" && /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "14px", fontWeight: "600", color: "#1f2937", marginBottom: "12px" } }, "Styling"), /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "10px" } }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "radio",
@@ -3572,7 +3773,7 @@ var ExportMenu = ({
         onChange: (e) => setStyling(e.target.value),
         style: { width: "16px", height: "16px", cursor: "pointer" }
       }
-    ), /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "Basic")), /* @__PURE__ */ React11.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "Basic")), /* @__PURE__ */ React13.createElement("label", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer" } }, /* @__PURE__ */ React13.createElement(
       "input",
       {
         type: "radio",
@@ -3582,9 +3783,9 @@ var ExportMenu = ({
         onChange: (e) => setStyling(e.target.value),
         style: { width: "16px", height: "16px", cursor: "pointer" }
       }
-    ), /* @__PURE__ */ React11.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "Professional")))), /* @__PURE__ */ React11.createElement("p", { style: { fontSize: "12px", color: "#6b7280", margin: "0" } }, "Professional adds colors, borders, and frozen header row")),
-    /* @__PURE__ */ React11.createElement("div", { style: { backgroundColor: "#f3f4f6", borderRadius: "6px", padding: "12px", marginBottom: "20px", fontSize: "13px", color: "#4b5563" } }, /* @__PURE__ */ React11.createElement("p", { style: { margin: "6px 0" } }, /* @__PURE__ */ React11.createElement("strong", null, "Data to export:"), " ", getDataByScope().length, " row(s)"), /* @__PURE__ */ React11.createElement("p", { style: { margin: "6px 0" } }, /* @__PURE__ */ React11.createElement("strong", null, "Columns:"), " ", columns.length)),
-    /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "flex-end" } }, /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "14px", color: "#374151" } }, "Professional")))), /* @__PURE__ */ React13.createElement("p", { style: { fontSize: "12px", color: "#6b7280", margin: "0" } }, "Professional adds colors, borders, and frozen header row")),
+    /* @__PURE__ */ React13.createElement("div", { style: { backgroundColor: "#f3f4f6", borderRadius: "6px", padding: "12px", marginBottom: "20px", fontSize: "13px", color: "#4b5563" } }, /* @__PURE__ */ React13.createElement("p", { style: { margin: "6px 0" } }, /* @__PURE__ */ React13.createElement("strong", null, "Data to export:"), " ", getDataByScope().length, " row(s)"), /* @__PURE__ */ React13.createElement("p", { style: { margin: "6px 0" } }, /* @__PURE__ */ React13.createElement("strong", null, "Columns:"), " ", columns.length)),
+    /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(
       "button",
       {
         onClick: () => setShowMenu(false),
@@ -3607,7 +3808,7 @@ var ExportMenu = ({
         }
       },
       "Cancel"
-    ), /* @__PURE__ */ React11.createElement(
+    ), /* @__PURE__ */ React13.createElement(
       "button",
       {
         onClick: handleExportClick,
@@ -3637,7 +3838,7 @@ var ExportMenu = ({
       },
       "Export Now"
     ))
-  ), showMenu && /* @__PURE__ */ React11.createElement(
+  ), showMenu && /* @__PURE__ */ React13.createElement(
     "div",
     {
       style: {
@@ -3651,10 +3852,10 @@ var ExportMenu = ({
 };
 
 // src/components/DataGrid/ColumnFilters.tsx
-import React13, { useState as useState8, useEffect as useEffect4 } from "react";
+import React15, { useState as useState8, useEffect as useEffect4 } from "react";
 
 // src/components/DataGrid/AdvancedFilterBuilder.tsx
-import React12, { useState as useState7 } from "react";
+import React14, { useState as useState7 } from "react";
 var getColumnFilterType = (column) => {
   if (column.filterType) {
     if (column.filterType === "multi") return "set";
@@ -3816,7 +4017,7 @@ var AdvancedFilterBuilder = ({
           updateCondition(index, { values: filteredValues });
         }
       };
-      return /* @__PURE__ */ React12.createElement("div", { style: { marginTop: "8px" } }, /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement("div", { style: { marginTop: "8px" } }, /* @__PURE__ */ React14.createElement(
         "input",
         {
           type: "text",
@@ -3835,13 +4036,13 @@ var AdvancedFilterBuilder = ({
           onChange: (e) => updateTempState(index, { searchTerm: e.target.value }),
           placeholder: "Search values..."
         }
-      ), /* @__PURE__ */ React12.createElement("div", { style: {
+      ), /* @__PURE__ */ React14.createElement("div", { style: {
         maxHeight: "150px",
         overflowY: "auto",
         border: "1px solid var(--grid-border)",
         borderRadius: "var(--grid-border-radius, 4px)",
         padding: "4px"
-      } }, /* @__PURE__ */ React12.createElement(
+      } }, /* @__PURE__ */ React14.createElement(
         "label",
         {
           style: {
@@ -3853,7 +4054,7 @@ var AdvancedFilterBuilder = ({
             fontSize: "var(--grid-font-size-sm, 12px)"
           }
         },
-        /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React14.createElement(
           "input",
           {
             type: "checkbox",
@@ -3862,8 +4063,8 @@ var AdvancedFilterBuilder = ({
             style: { width: "14px", height: "14px", cursor: "pointer" }
           }
         ),
-        /* @__PURE__ */ React12.createElement("span", { style: { fontWeight: 500, color: "var(--grid-text)" } }, "(Select All)")
-      ), filteredValues.map((value, idx) => /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React14.createElement("span", { style: { fontWeight: 500, color: "var(--grid-text)" } }, "(Select All)")
+      ), filteredValues.map((value, idx) => /* @__PURE__ */ React14.createElement(
         "label",
         {
           key: idx,
@@ -3876,7 +4077,7 @@ var AdvancedFilterBuilder = ({
             fontSize: "var(--grid-font-size-sm, 12px)"
           }
         },
-        /* @__PURE__ */ React12.createElement(
+        /* @__PURE__ */ React14.createElement(
           "input",
           {
             type: "checkbox",
@@ -3885,8 +4086,8 @@ var AdvancedFilterBuilder = ({
             style: { width: "14px", height: "14px", cursor: "pointer" }
           }
         ),
-        /* @__PURE__ */ React12.createElement("span", { style: { color: "var(--grid-text)" } }, String(value))
-      ))), selectedValues.size > 0 && /* @__PURE__ */ React12.createElement("div", { style: {
+        /* @__PURE__ */ React14.createElement("span", { style: { color: "var(--grid-text)" } }, String(value))
+      ))), selectedValues.size > 0 && /* @__PURE__ */ React14.createElement("div", { style: {
         marginTop: "6px",
         fontSize: "var(--grid-font-size-sm, 12px)",
         color: "var(--grid-primary)",
@@ -3897,7 +4098,7 @@ var AdvancedFilterBuilder = ({
       return null;
     }
     if (requiresSecondValue(condition.type)) {
-      return /* @__PURE__ */ React12.createElement("div", { style: { marginTop: "8px", display: "flex", gap: "8px", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React14.createElement("div", { style: { marginTop: "8px", display: "flex", gap: "8px", alignItems: "center" } }, /* @__PURE__ */ React14.createElement(
         "input",
         {
           type: filterType === "date" ? "date" : filterType === "number" ? "number" : "text",
@@ -3915,7 +4116,7 @@ var AdvancedFilterBuilder = ({
           onChange: (e) => updateCondition(index, { value: e.target.value }),
           placeholder: "From"
         }
-      ), /* @__PURE__ */ React12.createElement("span", { style: { color: "var(--grid-text-secondary)", fontSize: "var(--grid-font-size-sm, 12px)" } }, "to"), /* @__PURE__ */ React12.createElement(
+      ), /* @__PURE__ */ React14.createElement("span", { style: { color: "var(--grid-text-secondary)", fontSize: "var(--grid-font-size-sm, 12px)" } }, "to"), /* @__PURE__ */ React14.createElement(
         "input",
         {
           type: filterType === "date" ? "date" : filterType === "number" ? "number" : "text",
@@ -3935,7 +4136,7 @@ var AdvancedFilterBuilder = ({
         }
       ));
     }
-    return /* @__PURE__ */ React12.createElement("div", { style: { marginTop: "8px" } }, /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React14.createElement("div", { style: { marginTop: "8px" } }, /* @__PURE__ */ React14.createElement(
       "input",
       {
         type: filterType === "date" ? "date" : filterType === "number" ? "number" : "text",
@@ -3955,7 +4156,7 @@ var AdvancedFilterBuilder = ({
       }
     ));
   };
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "div",
     {
       style: {
@@ -3977,27 +4178,27 @@ var AdvancedFilterBuilder = ({
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React12.createElement("div", { style: {
+    /* @__PURE__ */ React14.createElement("div", { style: {
       marginBottom: "16px",
       paddingBottom: "12px",
       borderBottom: "1px solid var(--grid-border)"
-    } }, /* @__PURE__ */ React12.createElement("h4", { style: {
+    } }, /* @__PURE__ */ React14.createElement("h4", { style: {
       margin: 0,
       fontSize: "var(--grid-font-size, 14px)",
       fontWeight: 600,
       color: "var(--grid-text)"
-    } }, "Advanced Filter: ", column.headerName), /* @__PURE__ */ React12.createElement("p", { style: {
+    } }, "Advanced Filter: ", column.headerName), /* @__PURE__ */ React14.createElement("p", { style: {
       margin: "4px 0 0 0",
       fontSize: "var(--grid-font-size-sm, 12px)",
       color: "var(--grid-text-secondary)"
     } }, "Add multiple conditions with AND/OR logic")),
-    conditions.length > 1 && /* @__PURE__ */ React12.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React12.createElement("label", { style: {
+    conditions.length > 1 && /* @__PURE__ */ React14.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React14.createElement("label", { style: {
       display: "block",
       fontSize: "var(--grid-font-size-sm, 12px)",
       fontWeight: 500,
       color: "var(--grid-text)",
       marginBottom: "6px"
-    } }, "Combine Conditions"), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React12.createElement(
+    } }, "Combine Conditions"), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4015,7 +4216,7 @@ var AdvancedFilterBuilder = ({
         onClick: () => setOperator("AND")
       },
       "AND"
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4034,7 +4235,7 @@ var AdvancedFilterBuilder = ({
       },
       "OR"
     ))),
-    /* @__PURE__ */ React12.createElement("div", { style: { flex: 1, overflowY: "auto", marginBottom: "12px" } }, conditions.map((condition, index) => /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement("div", { style: { flex: 1, overflowY: "auto", marginBottom: "12px" } }, conditions.map((condition, index) => /* @__PURE__ */ React14.createElement(
       "div",
       {
         key: index,
@@ -4046,11 +4247,11 @@ var AdvancedFilterBuilder = ({
           border: "1px solid var(--grid-border)"
         }
       },
-      /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React12.createElement("label", { style: {
+      /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React14.createElement("label", { style: {
         fontSize: "var(--grid-font-size-sm, 12px)",
         fontWeight: 500,
         color: "var(--grid-text)"
-      } }, "Condition ", index + 1), conditions.length > 1 && /* @__PURE__ */ React12.createElement(
+      } }, "Condition ", index + 1), conditions.length > 1 && /* @__PURE__ */ React14.createElement(
         "button",
         {
           style: {
@@ -4069,7 +4270,7 @@ var AdvancedFilterBuilder = ({
         },
         "\u2715"
       )),
-      /* @__PURE__ */ React12.createElement(
+      /* @__PURE__ */ React14.createElement(
         "select",
         {
           style: {
@@ -4085,10 +4286,10 @@ var AdvancedFilterBuilder = ({
           value: condition.type,
           onChange: (e) => updateCondition(index, { type: e.target.value, value: "", value2: "", values: [] })
         },
-        operations.map((op) => /* @__PURE__ */ React12.createElement("option", { key: op.value, value: op.value }, op.label))
+        operations.map((op) => /* @__PURE__ */ React14.createElement("option", { key: op.value, value: op.value }, op.label))
       ),
       renderConditionInput(condition, index),
-      index < conditions.length - 1 && conditions.length > 1 && /* @__PURE__ */ React12.createElement("div", { style: {
+      index < conditions.length - 1 && conditions.length > 1 && /* @__PURE__ */ React14.createElement("div", { style: {
         marginTop: "12px",
         padding: "4px 8px",
         textAlign: "center",
@@ -4099,7 +4300,7 @@ var AdvancedFilterBuilder = ({
         borderRadius: "var(--grid-border-radius, 4px)"
       } }, operator)
     ))),
-    /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4121,12 +4322,12 @@ var AdvancedFilterBuilder = ({
       },
       "+ Add Condition"
     ),
-    /* @__PURE__ */ React12.createElement("div", { style: {
+    /* @__PURE__ */ React14.createElement("div", { style: {
       display: "flex",
       gap: "8px",
       paddingTop: "12px",
       borderTop: "1px solid var(--grid-border)"
-    } }, /* @__PURE__ */ React12.createElement(
+    } }, /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4146,7 +4347,7 @@ var AdvancedFilterBuilder = ({
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Reset"
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4166,7 +4367,7 @@ var AdvancedFilterBuilder = ({
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Clear"
-    ), /* @__PURE__ */ React12.createElement(
+    ), /* @__PURE__ */ React14.createElement(
       "button",
       {
         style: {
@@ -4213,7 +4414,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
     onApplyFilter(null);
     onClose();
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       style: {
@@ -4230,7 +4431,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React15.createElement(
       "select",
       {
         style: {
@@ -4246,13 +4447,13 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         value: filterType,
         onChange: (e) => setFilterType(e.target.value)
       },
-      /* @__PURE__ */ React13.createElement("option", { value: "contains" }, "Contains"),
-      /* @__PURE__ */ React13.createElement("option", { value: "notContains" }, "Not Contains"),
-      /* @__PURE__ */ React13.createElement("option", { value: "equals" }, "Equals"),
-      /* @__PURE__ */ React13.createElement("option", { value: "startsWith" }, "Starts With"),
-      /* @__PURE__ */ React13.createElement("option", { value: "endsWith" }, "Ends With")
+      /* @__PURE__ */ React15.createElement("option", { value: "contains" }, "Contains"),
+      /* @__PURE__ */ React15.createElement("option", { value: "notContains" }, "Not Contains"),
+      /* @__PURE__ */ React15.createElement("option", { value: "equals" }, "Equals"),
+      /* @__PURE__ */ React15.createElement("option", { value: "startsWith" }, "Starts With"),
+      /* @__PURE__ */ React15.createElement("option", { value: "endsWith" }, "Ends With")
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Value"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Value"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "text",
@@ -4272,7 +4473,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         autoFocus: true
       }
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4289,7 +4490,7 @@ var TextFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Clear"
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4335,7 +4536,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
     onApplyFilter(null);
     onClose();
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       style: {
@@ -4352,22 +4553,22 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React15.createElement(
       "select",
       {
         style: { width: "100%", padding: "8px 12px", border: "1px solid var(--grid-border)", borderRadius: "var(--grid-border-radius, 6px)", fontSize: "var(--grid-font-size, 14px)", outline: "none", backgroundColor: "var(--grid-bg)", color: "var(--grid-text)" },
         value: filterType,
         onChange: (e) => setFilterType(e.target.value)
       },
-      /* @__PURE__ */ React13.createElement("option", { value: "equals" }, "Equals"),
-      /* @__PURE__ */ React13.createElement("option", { value: "notEquals" }, "Not Equals"),
-      /* @__PURE__ */ React13.createElement("option", { value: "greaterThan" }, "Greater Than"),
-      /* @__PURE__ */ React13.createElement("option", { value: "greaterThanOrEqual" }, "Greater Than or Equal"),
-      /* @__PURE__ */ React13.createElement("option", { value: "lessThan" }, "Less Than"),
-      /* @__PURE__ */ React13.createElement("option", { value: "lessThanOrEqual" }, "Less Than or Equal"),
-      /* @__PURE__ */ React13.createElement("option", { value: "inRange" }, "In Range")
+      /* @__PURE__ */ React15.createElement("option", { value: "equals" }, "Equals"),
+      /* @__PURE__ */ React15.createElement("option", { value: "notEquals" }, "Not Equals"),
+      /* @__PURE__ */ React15.createElement("option", { value: "greaterThan" }, "Greater Than"),
+      /* @__PURE__ */ React15.createElement("option", { value: "greaterThanOrEqual" }, "Greater Than or Equal"),
+      /* @__PURE__ */ React15.createElement("option", { value: "lessThan" }, "Less Than"),
+      /* @__PURE__ */ React15.createElement("option", { value: "lessThanOrEqual" }, "Less Than or Equal"),
+      /* @__PURE__ */ React15.createElement("option", { value: "inRange" }, "In Range")
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Value"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Value"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "number",
@@ -4378,7 +4579,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         autoFocus: true
       }
     )),
-    filterType === "inRange" && /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "To"), /* @__PURE__ */ React13.createElement(
+    filterType === "inRange" && /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "To"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "number",
@@ -4388,7 +4589,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         placeholder: "Enter max value..."
       }
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4405,7 +4606,7 @@ var NumberFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdv
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Clear"
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4451,7 +4652,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
     onApplyFilter(null);
     onClose();
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       style: {
@@ -4468,19 +4669,19 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Filter Type"), /* @__PURE__ */ React15.createElement(
       "select",
       {
         style: { width: "100%", padding: "8px 12px", border: "1px solid var(--grid-border)", borderRadius: "var(--grid-border-radius, 6px)", fontSize: "var(--grid-font-size, 14px)", outline: "none", backgroundColor: "var(--grid-bg)", color: "var(--grid-text)" },
         value: filterType,
         onChange: (e) => setFilterType(e.target.value)
       },
-      /* @__PURE__ */ React13.createElement("option", { value: "equals" }, "Equals"),
-      /* @__PURE__ */ React13.createElement("option", { value: "before" }, "Before"),
-      /* @__PURE__ */ React13.createElement("option", { value: "after" }, "After"),
-      /* @__PURE__ */ React13.createElement("option", { value: "inRange" }, "In Range")
+      /* @__PURE__ */ React15.createElement("option", { value: "equals" }, "Equals"),
+      /* @__PURE__ */ React15.createElement("option", { value: "before" }, "Before"),
+      /* @__PURE__ */ React15.createElement("option", { value: "after" }, "After"),
+      /* @__PURE__ */ React15.createElement("option", { value: "inRange" }, "In Range")
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Date"), /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "Date"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "date",
@@ -4490,7 +4691,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         autoFocus: true
       }
     )),
-    filterType === "inRange" && /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "To"), /* @__PURE__ */ React13.createElement(
+    filterType === "inRange" && /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement("label", { style: { display: "block", fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)", marginBottom: "4px" } }, "To"), /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "date",
@@ -4499,7 +4700,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         onChange: (e) => setValue2(e.target.value)
       }
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end" } }, /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4516,7 +4717,7 @@ var DateFilterMenu = ({ filterValue, onApplyFilter, onClose, anchorEl, showAdvan
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Clear"
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4575,7 +4776,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
     onApplyFilter(null);
     onClose();
   };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(
     "div",
     {
       style: {
@@ -4595,7 +4796,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "12px" } }, /* @__PURE__ */ React15.createElement(
       "input",
       {
         type: "text",
@@ -4606,14 +4807,14 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         autoFocus: true
       }
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { marginBottom: "8px" } }, /* @__PURE__ */ React15.createElement(
       "label",
       {
         style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", padding: "8px", borderRadius: "4px" },
         onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--grid-hover)",
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent"
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React15.createElement(
         "input",
         {
           type: "checkbox",
@@ -4622,9 +4823,9 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
           style: { width: "16px", height: "16px", cursor: "pointer" }
         }
       ),
-      /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)" } }, "(Select All)")
+      /* @__PURE__ */ React15.createElement("span", { style: { fontSize: "var(--grid-font-size, 14px)", fontWeight: 500, color: "var(--grid-text)" } }, "(Select All)")
     )),
-    /* @__PURE__ */ React13.createElement("div", { style: { flex: 1, overflowY: "auto", marginBottom: "12px", border: "1px solid var(--grid-border)", borderRadius: "var(--grid-border-radius, 6px)", maxHeight: "200px" } }, filteredValues.map((value, idx) => /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, overflowY: "auto", marginBottom: "12px", border: "1px solid var(--grid-border)", borderRadius: "var(--grid-border-radius, 6px)", maxHeight: "200px" } }, filteredValues.map((value, idx) => /* @__PURE__ */ React15.createElement(
       "label",
       {
         key: idx,
@@ -4632,7 +4833,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         onMouseEnter: (e) => e.currentTarget.style.backgroundColor = "var(--grid-hover)",
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent"
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React15.createElement(
         "input",
         {
           type: "checkbox",
@@ -4641,9 +4842,9 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
           style: { width: "16px", height: "16px", cursor: "pointer" }
         }
       ),
-      /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "var(--grid-font-size, 14px)", color: "var(--grid-text)" } }, String(value))
+      /* @__PURE__ */ React15.createElement("span", { style: { fontSize: "var(--grid-font-size, 14px)", color: "var(--grid-text)" } }, String(value))
     ))),
-    /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end", paddingTop: "8px", borderTop: "1px solid var(--grid-border)" } }, /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", gap: "8px", justifyContent: "flex-end", paddingTop: "8px", borderTop: "1px solid var(--grid-border)" } }, /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4660,7 +4861,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "var(--grid-bg-alt)"
       },
       "Clear"
-    ), /* @__PURE__ */ React13.createElement(
+    ), /* @__PURE__ */ React15.createElement(
       "button",
       {
         style: {
@@ -4683,7 +4884,7 @@ var SetFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchor
   );
 };
 var MultiSelectFilterMenu = ({ column, filterValue, onApplyFilter, onClose, rows, anchorEl }) => {
-  return /* @__PURE__ */ React13.createElement(SetFilterMenu, { column, filterValue, onApplyFilter, onClose, rows, anchorEl });
+  return /* @__PURE__ */ React15.createElement(SetFilterMenu, { column, filterValue, onApplyFilter, onClose, rows, anchorEl });
 };
 var ColumnFilters = ({
   columns,
@@ -4693,7 +4894,9 @@ var ColumnFilters = ({
   dispatch,
   pinnedLeft,
   pinnedRight,
-  rows
+  rows,
+  masterDetailConfig,
+  dragRowConfig
 }) => {
   const [openFilterMenu, setOpenFilterMenu] = useState8(null);
   const [filterAnchors, setFilterAnchors] = useState8({});
@@ -4788,22 +4991,22 @@ var ColumnFilters = ({
     };
     switch (filterType) {
       case "number":
-        return /* @__PURE__ */ React13.createElement(NumberFilterMenu, { ...commonProps });
+        return /* @__PURE__ */ React15.createElement(NumberFilterMenu, { ...commonProps });
       case "date":
-        return /* @__PURE__ */ React13.createElement(DateFilterMenu, { ...commonProps });
+        return /* @__PURE__ */ React15.createElement(DateFilterMenu, { ...commonProps });
       case "set":
-        return /* @__PURE__ */ React13.createElement(SetFilterMenu, { ...commonProps });
+        return /* @__PURE__ */ React15.createElement(SetFilterMenu, { ...commonProps });
       case "multi":
-        return /* @__PURE__ */ React13.createElement(MultiSelectFilterMenu, { ...commonProps });
+        return /* @__PURE__ */ React15.createElement(MultiSelectFilterMenu, { ...commonProps });
       default:
-        return /* @__PURE__ */ React13.createElement(TextFilterMenu, { ...commonProps });
+        return /* @__PURE__ */ React15.createElement(TextFilterMenu, { ...commonProps });
     }
   };
   const renderAdvancedFilterMenu = (column) => {
     const filterValue = filterConfig[column.field];
     const anchorEl = filterAnchors[column.field];
     const advancedFilter = isAdvancedFilter(filterValue) ? filterValue : null;
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React15.createElement(
       AdvancedFilterBuilder,
       {
         column,
@@ -4833,10 +5036,30 @@ var ColumnFilters = ({
   const hasActiveFilter = (field) => {
     return !!filterConfig[field];
   };
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", minWidth: "100%", borderBottom: "1px solid var(--grid-border)", backgroundColor: "var(--grid-header-bg)" } }, displayColumnOrder.map((field) => {
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", minWidth: "100%", borderBottom: "1px solid var(--grid-border)", backgroundColor: "var(--grid-header-bg)" } }, (masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) && /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      style: {
+        width: "48px",
+        flexShrink: 0,
+        borderRight: "1px solid var(--grid-border)",
+        minHeight: "38px"
+      }
+    }
+  ), (dragRowConfig == null ? void 0 : dragRowConfig.enabled) && dragRowConfig.showDragHandle !== false && dragRowConfig.dragHandlePosition === "left" && /* @__PURE__ */ React15.createElement(
+    "div",
+    {
+      style: {
+        width: "32px",
+        flexShrink: 0,
+        borderRight: "1px solid var(--grid-border)",
+        minHeight: "38px"
+      }
+    }
+  ), displayColumnOrder.map((field) => {
     const column = columnMap.get(field);
     if (!column || column.filterable === false) {
-      return /* @__PURE__ */ React13.createElement(
+      return /* @__PURE__ */ React15.createElement(
         "div",
         {
           key: field,
@@ -4850,7 +5073,7 @@ var ColumnFilters = ({
       );
     }
     const isActive = hasActiveFilter(field);
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React15.createElement(
       "div",
       {
         key: field,
@@ -4864,7 +5087,7 @@ var ColumnFilters = ({
           alignItems: "center"
         }
       },
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React15.createElement(
         "div",
         {
           style: {
@@ -4874,7 +5097,7 @@ var ColumnFilters = ({
           onClick: (e) => handleFilterClick(field, e),
           title: "Click to filter, Shift+Click for advanced filter"
         },
-        /* @__PURE__ */ React13.createElement(
+        /* @__PURE__ */ React15.createElement(
           "div",
           {
             style: {
@@ -4899,13 +5122,13 @@ var ColumnFilters = ({
               if (!isActive) e.currentTarget.style.borderColor = "var(--grid-border)";
             }
           },
-          /* @__PURE__ */ React13.createElement("span", { style: {
+          /* @__PURE__ */ React15.createElement("span", { style: {
             flex: 1,
             overflow: "hidden",
             textOverflow: "ellipsis",
             whiteSpace: "nowrap"
           } }, isActive ? getFilterDisplayText(field) : "Filter..."),
-          /* @__PURE__ */ React13.createElement(
+          /* @__PURE__ */ React15.createElement(
             "svg",
             {
               style: {
@@ -4919,7 +5142,7 @@ var ColumnFilters = ({
               viewBox: "0 0 24 24",
               strokeWidth: "2.5"
             },
-            /* @__PURE__ */ React13.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V20l-4-2v-3.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" })
+            /* @__PURE__ */ React15.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4h18v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V20l-4-2v-3.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" })
           )
         )
       ),
@@ -4930,7 +5153,7 @@ var ColumnFilters = ({
 };
 
 // src/components/DataGrid/LayoutPresetsManager.tsx
-import React14, { useState as useState9, useEffect as useEffect5, useCallback as useCallback2 } from "react";
+import React16, { useState as useState9, useEffect as useEffect5, useCallback as useCallback2 } from "react";
 var LayoutPresetsManager = ({
   manager,
   currentLayout,
@@ -5039,7 +5262,7 @@ var LayoutPresetsManager = ({
   const formatDate2 = (timestamp) => {
     return new Date(timestamp).toLocaleString();
   };
-  return /* @__PURE__ */ React14.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React16.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React16.createElement(
     "button",
     {
       onClick: () => setShowMenu(!showMenu),
@@ -5056,10 +5279,10 @@ var LayoutPresetsManager = ({
       },
       disabled: loading
     },
-    /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7h16M4 12h16M4 17h16" })),
+    /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 7h16M4 12h16M4 17h16" })),
     "Layout Presets",
-    /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0, transform: showMenu ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
-  ), showMenu && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0, transform: showMenu ? "rotate(180deg)" : "rotate(0deg)", transition: "transform 0.2s" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }))
+  ), showMenu && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -5069,7 +5292,7 @@ var LayoutPresetsManager = ({
       },
       onClick: () => setShowMenu(false)
     }
-  ), /* @__PURE__ */ React14.createElement("div", { style: {
+  ), /* @__PURE__ */ React16.createElement("div", { style: {
     position: "absolute",
     right: 0,
     marginTop: "8px",
@@ -5081,7 +5304,7 @@ var LayoutPresetsManager = ({
     zIndex: 20,
     maxHeight: "384px",
     overflowY: "auto"
-  } }, /* @__PURE__ */ React14.createElement("div", { style: { padding: "12px", borderBottom: "1px solid #e5e7eb", backgroundColor: "#f9fafb" } }, /* @__PURE__ */ React14.createElement("h3", { style: { fontWeight: "600", fontSize: "14px", color: "#111827" } }, "Layout Presets")), error && /* @__PURE__ */ React14.createElement("div", { style: { padding: "12px", backgroundColor: "#fef2f2", borderBottom: "1px solid #fecaca" } }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "14px", color: "#dc2626" } }, error)), /* @__PURE__ */ React14.createElement("div", { style: { padding: "8px", borderBottom: "1px solid #e5e7eb", display: "flex", gap: "8px" } }, /* @__PURE__ */ React14.createElement(
+  } }, /* @__PURE__ */ React16.createElement("div", { style: { padding: "12px", borderBottom: "1px solid #e5e7eb", backgroundColor: "#f9fafb" } }, /* @__PURE__ */ React16.createElement("h3", { style: { fontWeight: "600", fontSize: "14px", color: "#111827" } }, "Layout Presets")), error && /* @__PURE__ */ React16.createElement("div", { style: { padding: "12px", backgroundColor: "#fef2f2", borderBottom: "1px solid #fecaca" } }, /* @__PURE__ */ React16.createElement("p", { style: { fontSize: "14px", color: "#dc2626" } }, error)), /* @__PURE__ */ React16.createElement("div", { style: { padding: "8px", borderBottom: "1px solid #e5e7eb", display: "flex", gap: "8px" } }, /* @__PURE__ */ React16.createElement(
     "button",
     {
       onClick: () => {
@@ -5103,9 +5326,9 @@ var LayoutPresetsManager = ({
         gap: "8px"
       }
     },
-    /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" })),
+    /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" })),
     "Save Current"
-  ), /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React16.createElement(
     "button",
     {
       onClick: () => {
@@ -5127,9 +5350,9 @@ var LayoutPresetsManager = ({
         gap: "8px"
       }
     },
-    /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })),
+    /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px", flexShrink: 0 }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })),
     "Reset"
-  )), /* @__PURE__ */ React14.createElement("div", { style: { maxHeight: "256px", overflowY: "auto" } }, loading && presets.length === 0 ? /* @__PURE__ */ React14.createElement("div", { style: { padding: "16px", textAlign: "center", color: "#6b7280", fontSize: "14px" } }, "Loading presets...") : presets.length === 0 ? /* @__PURE__ */ React14.createElement("div", { style: { padding: "16px", textAlign: "center", color: "#6b7280", fontSize: "14px" } }, "No saved presets. Save your current layout to get started.") : /* @__PURE__ */ React14.createElement("div", null, presets.map((preset) => /* @__PURE__ */ React14.createElement(
+  )), /* @__PURE__ */ React16.createElement("div", { style: { maxHeight: "256px", overflowY: "auto" } }, loading && presets.length === 0 ? /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", textAlign: "center", color: "#6b7280", fontSize: "14px" } }, "Loading presets...") : presets.length === 0 ? /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", textAlign: "center", color: "#6b7280", fontSize: "14px" } }, "No saved presets. Save your current layout to get started.") : /* @__PURE__ */ React16.createElement("div", null, presets.map((preset) => /* @__PURE__ */ React16.createElement(
     "div",
     {
       key: preset.id,
@@ -5150,7 +5373,7 @@ var LayoutPresetsManager = ({
         if (buttons) buttons.style.opacity = "0";
       }
     },
-    /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" } }, /* @__PURE__ */ React14.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React14.createElement("h4", { style: { fontSize: "14px", fontWeight: "500", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, preset.name), preset.description && /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", color: "#6b7280", marginTop: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, preset.description), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px" } }, "Updated: ", formatDate2(preset.updatedAt))), /* @__PURE__ */ React14.createElement("div", { className: "preset-actions", style: { display: "flex", gap: "4px", marginLeft: "8px", opacity: 0, transition: "opacity 0.2s" } }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" } }, /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React16.createElement("h4", { style: { fontSize: "14px", fontWeight: "500", color: "#111827", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, preset.name), preset.description && /* @__PURE__ */ React16.createElement("p", { style: { fontSize: "12px", color: "#6b7280", marginTop: "4px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } }, preset.description), /* @__PURE__ */ React16.createElement("p", { style: { fontSize: "12px", color: "#9ca3af", marginTop: "4px" } }, "Updated: ", formatDate2(preset.updatedAt))), /* @__PURE__ */ React16.createElement("div", { className: "preset-actions", style: { display: "flex", gap: "4px", marginLeft: "8px", opacity: 0, transition: "opacity 0.2s" } }, /* @__PURE__ */ React16.createElement(
       "button",
       {
         onClick: (e) => handleUpdatePreset(preset, e),
@@ -5166,8 +5389,8 @@ var LayoutPresetsManager = ({
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
         title: "Update with current layout"
       },
-      /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }))
-    ), /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }))
+    ), /* @__PURE__ */ React16.createElement(
       "button",
       {
         onClick: (e) => handleDeletePreset(preset.id, e),
@@ -5183,9 +5406,9 @@ var LayoutPresetsManager = ({
         onMouseLeave: (e) => e.currentTarget.style.backgroundColor = "transparent",
         title: "Delete preset"
       },
-      /* @__PURE__ */ React14.createElement("svg", { style: { width: "14px", height: "14px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React14.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }))
+      /* @__PURE__ */ React16.createElement("svg", { style: { width: "14px", height: "14px" }, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React16.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" }))
     )))
-  )))))), showSaveDialog && /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(
+  )))))), showSaveDialog && /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -5199,7 +5422,7 @@ var LayoutPresetsManager = ({
       },
       onClick: () => setShowSaveDialog(false)
     }
-  ), /* @__PURE__ */ React14.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 40, display: "flex", alignItems: "center", justifyContent: "center", padding: "16px" } }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React16.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 40, display: "flex", alignItems: "center", justifyContent: "center", padding: "16px" } }, /* @__PURE__ */ React16.createElement(
     "div",
     {
       style: {
@@ -5212,9 +5435,9 @@ var LayoutPresetsManager = ({
       },
       onClick: (e) => e.stopPropagation()
     },
-    /* @__PURE__ */ React14.createElement("h2", { style: { fontSize: "20px", fontWeight: "600", marginBottom: "16px" } }, "Save Layout Preset"),
-    error && /* @__PURE__ */ React14.createElement("div", { style: { marginBottom: "16px", padding: "12px", backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "4px" } }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "14px", color: "#dc2626" } }, error)),
-    /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React14.createElement("label", { htmlFor: "preset-name", style: { display: "block", fontSize: "14px", fontWeight: "500", color: "#374151", marginBottom: "4px" } }, "Preset Name *"), /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement("h2", { style: { fontSize: "20px", fontWeight: "600", marginBottom: "16px" } }, "Save Layout Preset"),
+    error && /* @__PURE__ */ React16.createElement("div", { style: { marginBottom: "16px", padding: "12px", backgroundColor: "#fef2f2", border: "1px solid #fecaca", borderRadius: "4px" } }, /* @__PURE__ */ React16.createElement("p", { style: { fontSize: "14px", color: "#dc2626" } }, error)),
+    /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React16.createElement("label", { htmlFor: "preset-name", style: { display: "block", fontSize: "14px", fontWeight: "500", color: "#374151", marginBottom: "4px" } }, "Preset Name *"), /* @__PURE__ */ React16.createElement(
       "input",
       {
         id: "preset-name",
@@ -5231,7 +5454,7 @@ var LayoutPresetsManager = ({
         placeholder: "e.g., Sales Dashboard Layout",
         autoFocus: true
       }
-    )), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("label", { htmlFor: "preset-description", style: { display: "block", fontSize: "14px", fontWeight: "500", color: "#374151", marginBottom: "4px" } }, "Description (optional)"), /* @__PURE__ */ React14.createElement(
+    )), /* @__PURE__ */ React16.createElement("div", null, /* @__PURE__ */ React16.createElement("label", { htmlFor: "preset-description", style: { display: "block", fontSize: "14px", fontWeight: "500", color: "#374151", marginBottom: "4px" } }, "Description (optional)"), /* @__PURE__ */ React16.createElement(
       "textarea",
       {
         id: "preset-description",
@@ -5248,7 +5471,7 @@ var LayoutPresetsManager = ({
         rows: 3
       }
     ))),
-    /* @__PURE__ */ React14.createElement("div", { style: { marginTop: "24px", display: "flex", gap: "12px", justifyContent: "flex-end" } }, /* @__PURE__ */ React14.createElement(
+    /* @__PURE__ */ React16.createElement("div", { style: { marginTop: "24px", display: "flex", gap: "12px", justifyContent: "flex-end" } }, /* @__PURE__ */ React16.createElement(
       "button",
       {
         onClick: () => {
@@ -5271,7 +5494,7 @@ var LayoutPresetsManager = ({
         disabled: loading
       },
       "Cancel"
-    ), /* @__PURE__ */ React14.createElement(
+    ), /* @__PURE__ */ React16.createElement(
       "button",
       {
         onClick: handleSavePreset,
@@ -5294,7 +5517,7 @@ var LayoutPresetsManager = ({
 };
 
 // src/components/DataGrid/ContextMenu.tsx
-import React15, { useEffect as useEffect6, useRef as useRef6, useCallback as useCallback3 } from "react";
+import React17, { useEffect as useEffect6, useRef as useRef6, useCallback as useCallback3 } from "react";
 var ContextMenu = ({
   x,
   y,
@@ -5302,7 +5525,7 @@ var ContextMenu = ({
   onClose
 }) => {
   const menuRef = useRef6(null);
-  const [openSubmenu, setOpenSubmenu] = React15.useState(null);
+  const [openSubmenu, setOpenSubmenu] = React17.useState(null);
   useEffect6(() => {
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
@@ -5371,7 +5594,7 @@ var ContextMenu = ({
   }, [onClose, openSubmenu]);
   const renderMenuItem = (item, index) => {
     if (item.type === "separator") {
-      return /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React17.createElement(
         "div",
         {
           key: `separator-${index}`,
@@ -5380,7 +5603,7 @@ var ContextMenu = ({
         }
       );
     }
-    return /* @__PURE__ */ React15.createElement("div", { key: item.id || index, className: "context-menu-item-wrapper" }, /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { key: item.id || index, className: "context-menu-item-wrapper" }, /* @__PURE__ */ React17.createElement(
       "div",
       {
         className: `context-menu-item ${item.disabled ? "disabled" : ""} ${item.danger ? "danger" : ""} ${item.submenu ? "has-submenu" : ""}`,
@@ -5389,13 +5612,13 @@ var ContextMenu = ({
         "aria-disabled": item.disabled,
         tabIndex: item.disabled ? -1 : 0
       },
-      item.icon && /* @__PURE__ */ React15.createElement("span", { className: "context-menu-icon" }, item.icon),
-      /* @__PURE__ */ React15.createElement("span", { className: "context-menu-label" }, item.label),
-      item.shortcut && /* @__PURE__ */ React15.createElement("span", { className: "context-menu-shortcut" }, item.shortcut),
-      item.submenu && /* @__PURE__ */ React15.createElement("span", { className: "context-menu-arrow" }, "\u25B6")
-    ), item.submenu && openSubmenu === item.id && /* @__PURE__ */ React15.createElement("div", { className: "context-menu-submenu" }, item.submenu.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))));
+      item.icon && /* @__PURE__ */ React17.createElement("span", { className: "context-menu-icon" }, item.icon),
+      /* @__PURE__ */ React17.createElement("span", { className: "context-menu-label" }, item.label),
+      item.shortcut && /* @__PURE__ */ React17.createElement("span", { className: "context-menu-shortcut" }, item.shortcut),
+      item.submenu && /* @__PURE__ */ React17.createElement("span", { className: "context-menu-arrow" }, "\u25B6")
+    ), item.submenu && openSubmenu === item.id && /* @__PURE__ */ React17.createElement("div", { className: "context-menu-submenu" }, item.submenu.map((subItem, subIndex) => renderMenuItem(subItem, subIndex))));
   };
-  return /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement(
     "div",
     {
       ref: menuRef,
@@ -5871,7 +6094,7 @@ var useContextMenu = ({
 };
 
 // src/components/DataGrid/Tooltip.tsx
-import React16, { useLayoutEffect, useRef as useRef7, useState as useState11 } from "react";
+import React18, { useLayoutEffect, useRef as useRef7, useState as useState11 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var Tooltip = ({
   state,
@@ -5959,7 +6182,7 @@ var Tooltip = ({
     return null;
   }
   const content = typeof state.content === "string" ? { content: state.content } : state.content;
-  const tooltipElement = /* @__PURE__ */ React16.createElement(
+  const tooltipElement = /* @__PURE__ */ React18.createElement(
     "div",
     {
       ref: tooltipRef,
@@ -5976,7 +6199,7 @@ var Tooltip = ({
         transition: "opacity 0.15s ease-in-out"
       }
     },
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement(
       "div",
       {
         style: {
@@ -5990,7 +6213,7 @@ var Tooltip = ({
           wordWrap: "break-word"
         }
       },
-      content.title && /* @__PURE__ */ React16.createElement(
+      content.title && /* @__PURE__ */ React18.createElement(
         "div",
         {
           style: {
@@ -6001,9 +6224,9 @@ var Tooltip = ({
         },
         content.title
       ),
-      /* @__PURE__ */ React16.createElement("div", null, content.content)
+      /* @__PURE__ */ React18.createElement("div", null, content.content)
     ),
-    /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React18.createElement(
       "div",
       {
         style: {
@@ -6173,7 +6396,7 @@ var useTooltip = ({ config = {} } = {}) => {
 };
 
 // src/components/DataGrid/DensityToggle.tsx
-import React17 from "react";
+import React19 from "react";
 
 // src/components/DataGrid/densityModes.ts
 var densityConfigs = {
@@ -6262,7 +6485,7 @@ var DensityToggle = ({
   disabled = false
 }) => {
   const modes = ["ultraCompact", "compact", "normal", "comfortable"];
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     "div",
     {
       className: `density-toggle ${className}`,
@@ -6277,7 +6500,7 @@ var DensityToggle = ({
       role: "group",
       "aria-label": "Density mode selector"
     },
-    modes.map((mode) => /* @__PURE__ */ React17.createElement(
+    modes.map((mode) => /* @__PURE__ */ React19.createElement(
       "button",
       {
         key: mode,
@@ -7124,9 +7347,9 @@ function generateThemeCSS(theme) {
 }
 
 // src/components/DataGrid/useScreenReaderAnnouncements.tsx
-import React18, { useRef as useRef9, useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import React20, { useRef as useRef9, useCallback as useCallback6, useEffect as useEffect8 } from "react";
 var useScreenReaderAnnouncements = () => {
-  const announcementRef = React18.useRef("");
+  const announcementRef = React20.useRef("");
   const timeoutRef = useRef9(null);
   useEffect8(() => {
     return () => {
@@ -7220,12 +7443,12 @@ var useScreenReaderAnnouncements = () => {
 };
 
 // src/components/DataGrid/ScreenReaderAnnouncer.tsx
-import React19 from "react";
+import React21 from "react";
 var ScreenReaderAnnouncer = ({
   message,
   priority = "polite"
 }) => {
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(
     "div",
     {
       role: priority === "assertive" ? "alert" : "status",
@@ -8314,10 +8537,12 @@ var DataGrid = forwardRef(({
   contextMenuConfig,
   tooltipConfig,
   pivotConfig,
+  masterDetailConfig,
   tableId,
   theme: _theme = "quartz",
   densityMode: _densityMode = "normal",
   showDensityToggle = false,
+  hideToolbar = false,
   onDensityChange,
   onRowClick,
   onCellEdit,
@@ -8355,7 +8580,7 @@ var DataGrid = forwardRef(({
       renderCell: col.isTotalColumn || col.isPivotColumn ? (row) => {
         const value = row[col.field];
         if (typeof value === "number") {
-          return /* @__PURE__ */ React20.createElement("span", { style: {
+          return /* @__PURE__ */ React22.createElement("span", { style: {
             fontWeight: col.isTotalColumn ? "700" : "600",
             color: col.isTotalColumn ? "#0f766e" : "#475569"
           } }, value.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
@@ -8390,6 +8615,15 @@ var DataGrid = forwardRef(({
       setDensityMode(_densityMode);
     }
   }, [_densityMode, densityMode, setDensityMode]);
+  useEffect9(() => {
+    if ((masterDetailConfig == null ? void 0 : masterDetailConfig.enabled) && masterDetailConfig.defaultExpandedMasterRowKeys) {
+      const expandedRows = {};
+      masterDetailConfig.defaultExpandedMasterRowKeys.forEach((key) => {
+        expandedRows[String(key)] = true;
+      });
+      dispatch({ type: "SET_EXPANDED_MASTER_ROWS", payload: expandedRows });
+    }
+  }, [masterDetailConfig == null ? void 0 : masterDetailConfig.enabled, masterDetailConfig == null ? void 0 : masterDetailConfig.defaultExpandedMasterRowKeys]);
   const themeStyles = useMemo4(() => {
     const currentTheme = getTheme(_theme);
     return generateThemeCSS(currentTheme);
@@ -8749,7 +8983,7 @@ var DataGrid = forwardRef(({
     },
     [onCellEdit, paginatedRows, rows]
   );
-  return /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React22.createElement(
     "div",
     {
       ref: containerRef,
@@ -8770,8 +9004,8 @@ var DataGrid = forwardRef(({
       },
       className: `data-grid density-${densityMode}`
     },
-    /* @__PURE__ */ React20.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
-    /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30 } }, /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement(ScreenReaderAnnouncer, { message: announcementMessage, priority: "polite" }),
+    !hideToolbar && /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", justifyContent: "space-between", paddingLeft: "16px", paddingRight: "16px", paddingTop: "10px", paddingBottom: "10px", backgroundColor: "var(--grid-bg-alt)", borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)", zIndex: 30 } }, /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React22.createElement(
       ColumnChooser,
       {
         columns: effectiveColumns,
@@ -8781,7 +9015,7 @@ var DataGrid = forwardRef(({
         onReorderColumns: (fromIndex, toIndex) => dispatch({ type: "REORDER_COLUMNS", payload: { fromIndex, toIndex } }),
         onResetLayout: () => dispatch({ type: "RESET_COLUMN_LAYOUT" })
       }
-    ), /* @__PURE__ */ React20.createElement(
+    ), /* @__PURE__ */ React22.createElement(
       ExportMenu,
       {
         columns: effectiveColumns,
@@ -8790,7 +9024,7 @@ var DataGrid = forwardRef(({
         selectedRows: state.selection.selectedRows,
         currentPageData: paginatedRows.filter((r) => !("isGroup" in r))
       }
-    ), (persistenceConfig == null ? void 0 : persistenceConfig.enabled) && persistenceManager && /* @__PURE__ */ React20.createElement(
+    ), (persistenceConfig == null ? void 0 : persistenceConfig.enabled) && persistenceManager && /* @__PURE__ */ React22.createElement(
       LayoutPresetsManager,
       {
         manager: persistenceManager,
@@ -8798,8 +9032,8 @@ var DataGrid = forwardRef(({
         onLoadPreset: (layout) => dispatch({ type: "LOAD_LAYOUT_PRESET", payload: layout }),
         onResetLayout: () => dispatch({ type: "RESET_COLUMN_LAYOUT" })
       }
-    )), showDensityToggle && /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React20.createElement("span", { style: { fontSize: "13px", color: "var(--grid-text-secondary)", fontWeight: "500" } }, "Density:"), /* @__PURE__ */ React20.createElement(DensityToggle, { value: densityMode, onChange: setDensityMode }))),
-    /* @__PURE__ */ React20.createElement(
+    )), showDensityToggle && /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", color: "var(--grid-text-secondary)", fontWeight: "500" } }, "Density:"), /* @__PURE__ */ React22.createElement(DensityToggle, { value: densityMode, onChange: setDensityMode }))),
+    !hideToolbar && /* @__PURE__ */ React22.createElement(
       GroupByPanel,
       {
         columns: effectiveColumns,
@@ -8807,7 +9041,7 @@ var DataGrid = forwardRef(({
         dispatch
       }
     ),
-    /* @__PURE__ */ React20.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ React22.createElement(
       GridHeader,
       {
         columns: effectiveColumns,
@@ -8819,6 +9053,8 @@ var DataGrid = forwardRef(({
         pinnedLeft: pinnedLeftFields,
         pinnedRight: pinnedRightFields,
         showColumnPinning,
+        masterDetailConfig,
+        dragRowConfig,
         onContextMenu: (event, column, columnIndex) => handleContextMenu({
           type: "header",
           column,
@@ -8826,7 +9062,7 @@ var DataGrid = forwardRef(({
           event
         })
       }
-    ), /* @__PURE__ */ React20.createElement(
+    ), !hideToolbar && /* @__PURE__ */ React22.createElement(
       ColumnFilters,
       {
         columns: effectiveColumns,
@@ -8836,10 +9072,12 @@ var DataGrid = forwardRef(({
         dispatch,
         pinnedLeft: pinnedLeftFields,
         pinnedRight: pinnedRightFields,
-        rows: filteredRows
+        rows: filteredRows,
+        masterDetailConfig,
+        dragRowConfig
       }
     )),
-    /* @__PURE__ */ React20.createElement(
+    /* @__PURE__ */ React22.createElement(
       GridBody,
       {
         columns: effectiveColumns,
@@ -8863,6 +9101,8 @@ var DataGrid = forwardRef(({
         virtualScrollConfig,
         treeConfig,
         dragRowConfig,
+        masterDetailConfig,
+        expandedMasterRows: state.detailRowState.expandedMasterRows,
         tableId,
         onRowReorder,
         currentPage: state.currentPage,
@@ -8879,7 +9119,7 @@ var DataGrid = forwardRef(({
         ...tooltipHandlers
       }
     ),
-    (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React20.createElement(
+    (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React22.createElement(
       GridFooter,
       {
         columns: effectiveColumns,
@@ -8891,7 +9131,7 @@ var DataGrid = forwardRef(({
         pinnedRight: pinnedRightFields
       }
     ),
-    !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ React20.createElement(
+    !(virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) && /* @__PURE__ */ React22.createElement(
       GridPagination,
       {
         currentPage: state.currentPage,
@@ -8900,7 +9140,7 @@ var DataGrid = forwardRef(({
         dispatch
       }
     ),
-    contextMenu.isOpen && /* @__PURE__ */ React20.createElement(
+    contextMenu.isOpen && /* @__PURE__ */ React22.createElement(
       ContextMenu,
       {
         x: contextMenu.x,
@@ -8909,7 +9149,7 @@ var DataGrid = forwardRef(({
         onClose: closeContextMenu
       }
     ),
-    (tooltipConfig == null ? void 0 : tooltipConfig.enabled) && /* @__PURE__ */ React20.createElement(
+    (tooltipConfig == null ? void 0 : tooltipConfig.enabled) && /* @__PURE__ */ React22.createElement(
       Tooltip,
       {
         state: tooltipState,
@@ -8922,12 +9162,12 @@ var DataGrid = forwardRef(({
 DataGrid.displayName = "DataGrid";
 
 // src/components/DataGrid/FacetedSearch.tsx
-import React21, { useState as useState15, useMemo as useMemo5 } from "react";
-var XIcon = () => /* @__PURE__ */ React21.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React21.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
-var SearchIcon = () => /* @__PURE__ */ React21.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React21.createElement("path", { d: "m21 21-4.35-4.35" }));
-var ChevronDownIcon = () => /* @__PURE__ */ React21.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("polyline", { points: "6 9 12 15 18 9" }));
-var ChevronRightIcon = () => /* @__PURE__ */ React21.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("polyline", { points: "9 18 15 12 9 6" }));
-var FilterIcon = () => /* @__PURE__ */ React21.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }));
+import React23, { useState as useState15, useMemo as useMemo5 } from "react";
+var XIcon = () => /* @__PURE__ */ React23.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), /* @__PURE__ */ React23.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }));
+var SearchIcon = () => /* @__PURE__ */ React23.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("circle", { cx: "11", cy: "11", r: "8" }), /* @__PURE__ */ React23.createElement("path", { d: "m21 21-4.35-4.35" }));
+var ChevronDownIcon = () => /* @__PURE__ */ React23.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("polyline", { points: "6 9 12 15 18 9" }));
+var ChevronRightIcon = () => /* @__PURE__ */ React23.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("polyline", { points: "9 18 15 12 9 6" }));
+var FilterIcon = () => /* @__PURE__ */ React23.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }));
 var extractFacetValues = (rows, field, filterConfig, currentField) => {
   const valueCounts = /* @__PURE__ */ new Map();
   const filteredRows = rows.filter((row) => {
@@ -9055,7 +9295,7 @@ var FacetedSearch = ({
       return false;
     }).length;
   }, [filterConfig]);
-  return /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React23.createElement(
     "div",
     {
       className: `faceted-search ${className || ""}`,
@@ -9067,7 +9307,7 @@ var FacetedSearch = ({
         height: "100%"
       }
     },
-    /* @__PURE__ */ React21.createElement("div", { style: {
+    /* @__PURE__ */ React23.createElement("div", { style: {
       position: "sticky",
       top: 0,
       zIndex: 10,
@@ -9075,28 +9315,28 @@ var FacetedSearch = ({
       borderBottom: "1px solid #e5e7eb",
       padding: "16px",
       flexShrink: 0
-    } }, /* @__PURE__ */ React21.createElement("div", { style: {
+    } }, /* @__PURE__ */ React23.createElement("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       marginBottom: "8px"
-    } }, /* @__PURE__ */ React21.createElement("div", { style: {
+    } }, /* @__PURE__ */ React23.createElement("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "8px"
-    } }, /* @__PURE__ */ React21.createElement(FilterIcon, null), /* @__PURE__ */ React21.createElement("h3", { style: {
+    } }, /* @__PURE__ */ React23.createElement(FilterIcon, null), /* @__PURE__ */ React23.createElement("h3", { style: {
       fontSize: "18px",
       fontWeight: 600,
       color: "#111827",
       margin: 0
-    } }, "Filters"), activeFilterCount > 0 && /* @__PURE__ */ React21.createElement("span", { style: {
+    } }, "Filters"), activeFilterCount > 0 && /* @__PURE__ */ React23.createElement("span", { style: {
       padding: "2px 8px",
       fontSize: "12px",
       fontWeight: 500,
       backgroundColor: "#dbeafe",
       color: "#1e40af",
       borderRadius: "9999px"
-    } }, activeFilterCount)), activeFilterCount > 0 && onClearAll && /* @__PURE__ */ React21.createElement(
+    } }, activeFilterCount)), activeFilterCount > 0 && onClearAll && /* @__PURE__ */ React23.createElement(
       "button",
       {
         onClick: onClearAll,
@@ -9114,7 +9354,7 @@ var FacetedSearch = ({
       },
       "Clear All"
     ))),
-    /* @__PURE__ */ React21.createElement("div", { style: {
+    /* @__PURE__ */ React23.createElement("div", { style: {
       overflowY: "auto",
       flex: 1
     } }, facetGroups.map((group) => {
@@ -9126,16 +9366,16 @@ var FacetedSearch = ({
       const displayedValues = group.showAll ? filteredValues : filteredValues.slice(0, maxItems);
       const hasMore = filteredValues.length > maxItems;
       const selectedCount = group.values.filter((v) => v.selected).length;
-      return /* @__PURE__ */ React21.createElement("div", { key: group.field, style: {
+      return /* @__PURE__ */ React23.createElement("div", { key: group.field, style: {
         borderBottom: "1px solid #e5e7eb"
-      } }, /* @__PURE__ */ React21.createElement("div", { style: {
+      } }, /* @__PURE__ */ React23.createElement("div", { style: {
         padding: "16px",
         backgroundColor: "#f9fafb"
-      } }, /* @__PURE__ */ React21.createElement("div", { style: {
+      } }, /* @__PURE__ */ React23.createElement("div", { style: {
         display: "flex",
         alignItems: "center",
         justifyContent: "space-between"
-      } }, /* @__PURE__ */ React21.createElement(
+      } }, /* @__PURE__ */ React23.createElement(
         "button",
         {
           onClick: () => updateFacetState(group.field, { expanded: !group.expanded }),
@@ -9155,9 +9395,9 @@ var FacetedSearch = ({
           onMouseOver: (e) => collapsible && (e.currentTarget.style.color = "#374151"),
           onMouseOut: (e) => collapsible && (e.currentTarget.style.color = "#111827")
         },
-        collapsible && (group.expanded ? /* @__PURE__ */ React21.createElement(ChevronDownIcon, null) : /* @__PURE__ */ React21.createElement(ChevronRightIcon, null)),
-        /* @__PURE__ */ React21.createElement("span", null, group.label),
-        selectedCount > 0 && /* @__PURE__ */ React21.createElement("span", { style: {
+        collapsible && (group.expanded ? /* @__PURE__ */ React23.createElement(ChevronDownIcon, null) : /* @__PURE__ */ React23.createElement(ChevronRightIcon, null)),
+        /* @__PURE__ */ React23.createElement("span", null, group.label),
+        selectedCount > 0 && /* @__PURE__ */ React23.createElement("span", { style: {
           padding: "2px 8px",
           fontSize: "12px",
           fontWeight: 500,
@@ -9165,7 +9405,7 @@ var FacetedSearch = ({
           color: "#1e40af",
           borderRadius: "9999px"
         } }, selectedCount)
-      ), selectedCount > 0 && /* @__PURE__ */ React21.createElement(
+      ), selectedCount > 0 && /* @__PURE__ */ React23.createElement(
         "button",
         {
           onClick: () => clearFacet(group.field),
@@ -9182,16 +9422,16 @@ var FacetedSearch = ({
           onMouseOver: (e) => e.currentTarget.style.color = "#374151",
           onMouseOut: (e) => e.currentTarget.style.color = "#6b7280"
         },
-        /* @__PURE__ */ React21.createElement(XIcon, null)
-      )), showSearch && group.expanded && group.values.length > 5 && /* @__PURE__ */ React21.createElement("div", { style: {
+        /* @__PURE__ */ React23.createElement(XIcon, null)
+      )), showSearch && group.expanded && group.values.length > 5 && /* @__PURE__ */ React23.createElement("div", { style: {
         marginTop: "8px",
         position: "relative"
-      } }, /* @__PURE__ */ React21.createElement("div", { style: {
+      } }, /* @__PURE__ */ React23.createElement("div", { style: {
         position: "absolute",
         left: "8px",
         top: "8px",
         color: "#9ca3af"
-      } }, /* @__PURE__ */ React21.createElement(SearchIcon, null)), /* @__PURE__ */ React21.createElement(
+      } }, /* @__PURE__ */ React23.createElement(SearchIcon, null)), /* @__PURE__ */ React23.createElement(
         "input",
         {
           type: "text",
@@ -9212,16 +9452,16 @@ var FacetedSearch = ({
           onFocus: (e) => e.currentTarget.style.boxShadow = "0 0 0 2px #3b82f6",
           onBlur: (e) => e.currentTarget.style.boxShadow = "none"
         }
-      ))), group.expanded && /* @__PURE__ */ React21.createElement("div", { style: {
+      ))), group.expanded && /* @__PURE__ */ React23.createElement("div", { style: {
         padding: "16px",
         display: "flex",
         flexDirection: "column",
         gap: "4px"
-      } }, displayedValues.length === 0 ? /* @__PURE__ */ React21.createElement("div", { style: {
+      } }, displayedValues.length === 0 ? /* @__PURE__ */ React23.createElement("div", { style: {
         fontSize: "14px",
         color: "#6b7280",
         fontStyle: "italic"
-      } }, "No values found") : /* @__PURE__ */ React21.createElement(React21.Fragment, null, filteredValues.length > 1 && selectedCount < filteredValues.length && /* @__PURE__ */ React21.createElement(
+      } }, "No values found") : /* @__PURE__ */ React23.createElement(React23.Fragment, null, filteredValues.length > 1 && selectedCount < filteredValues.length && /* @__PURE__ */ React23.createElement(
         "button",
         {
           onClick: () => selectAll(group.field, filteredValues.map((v) => v.value)),
@@ -9242,7 +9482,7 @@ var FacetedSearch = ({
         "Select All (",
         filteredValues.length,
         ")"
-      ), displayedValues.map((facetValue, idx) => /* @__PURE__ */ React21.createElement(
+      ), displayedValues.map((facetValue, idx) => /* @__PURE__ */ React23.createElement(
         "label",
         {
           key: `${facetValue.value}-${idx}`,
@@ -9260,13 +9500,13 @@ var FacetedSearch = ({
           onMouseOver: (e) => e.currentTarget.style.backgroundColor = "#f9fafb",
           onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent"
         },
-        /* @__PURE__ */ React21.createElement("div", { style: {
+        /* @__PURE__ */ React23.createElement("div", { style: {
           display: "flex",
           alignItems: "center",
           gap: "8px",
           flex: 1,
           minWidth: 0
-        } }, /* @__PURE__ */ React21.createElement(
+        } }, /* @__PURE__ */ React23.createElement(
           "input",
           {
             type: "checkbox",
@@ -9279,7 +9519,7 @@ var FacetedSearch = ({
               accentColor: "#2563eb"
             }
           }
-        ), /* @__PURE__ */ React21.createElement("span", { style: {
+        ), /* @__PURE__ */ React23.createElement("span", { style: {
           fontSize: "14px",
           color: "#374151",
           overflow: "hidden",
@@ -9287,14 +9527,14 @@ var FacetedSearch = ({
           whiteSpace: "nowrap",
           flex: 1
         } }, facetValue.label)),
-        /* @__PURE__ */ React21.createElement("span", { style: {
+        /* @__PURE__ */ React23.createElement("span", { style: {
           fontSize: "12px",
           color: "#6b7280",
           fontWeight: 500,
           marginLeft: "8px",
           flexShrink: 0
         } }, facetValue.count)
-      )), hasMore && !group.searchTerm && /* @__PURE__ */ React21.createElement(
+      )), hasMore && !group.searchTerm && /* @__PURE__ */ React23.createElement(
         "button",
         {
           onClick: () => updateFacetState(group.field, { showAll: !group.showAll }),
@@ -9315,16 +9555,16 @@ var FacetedSearch = ({
         },
         group.showAll ? "Show Less" : `Show More (${filteredValues.length - maxItems} more)`
       ))));
-    }), facetGroups.length === 0 && /* @__PURE__ */ React21.createElement("div", { style: {
+    }), facetGroups.length === 0 && /* @__PURE__ */ React23.createElement("div", { style: {
       padding: "32px",
       textAlign: "center",
       color: "#6b7280"
-    } }, /* @__PURE__ */ React21.createElement("div", { style: {
+    } }, /* @__PURE__ */ React23.createElement("div", { style: {
       width: "48px",
       height: "48px",
       margin: "0 auto 12px",
       color: "#9ca3af"
-    } }, /* @__PURE__ */ React21.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React21.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }))), /* @__PURE__ */ React21.createElement("p", { style: {
+    } }, /* @__PURE__ */ React23.createElement("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React23.createElement("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" }))), /* @__PURE__ */ React23.createElement("p", { style: {
       fontSize: "14px",
       margin: 0
     } }, "No facets configured")))
@@ -9332,7 +9572,7 @@ var FacetedSearch = ({
 };
 
 // src/components/DataGrid/FilteredSearchBar.tsx
-import React22, { useState as useState16, useRef as useRef11, useEffect as useEffect10 } from "react";
+import React24, { useState as useState16, useRef as useRef11, useEffect as useEffect10 } from "react";
 
 // node_modules/uuid/dist/esm-node/rng.js
 import crypto from "crypto";
@@ -9398,7 +9638,7 @@ var FilteredSearchBar = ({
   const [inputValue, setInputValue] = useState16("");
   const [showDropdown, setShowDropdown] = useState16(false);
   const [selectedFilterField, setSelectedFilterField] = useState16(null);
-  const filteredOptions = React22.useMemo(() => {
+  const filteredOptions = React24.useMemo(() => {
     var _a2;
     if (!selectedFilterField) {
       return filters.filter(
@@ -9505,7 +9745,7 @@ var FilteredSearchBar = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  return /* @__PURE__ */ React22.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React24.createElement(
     "div",
     {
       style: {
@@ -9527,7 +9767,7 @@ var FilteredSearchBar = ({
         return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
       }
     },
-    tokens.map((token) => /* @__PURE__ */ React22.createElement(
+    tokens.map((token) => /* @__PURE__ */ React24.createElement(
       "div",
       {
         key: token.id,
@@ -9543,9 +9783,9 @@ var FilteredSearchBar = ({
           fontWeight: "500"
         }
       },
-      /* @__PURE__ */ React22.createElement("span", { style: { fontWeight: "600" } }, token.label, ":"),
-      /* @__PURE__ */ React22.createElement("span", null, Array.isArray(token.value) ? token.value.join(", ") : token.value),
-      /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React24.createElement("span", { style: { fontWeight: "600" } }, token.label, ":"),
+      /* @__PURE__ */ React24.createElement("span", null, Array.isArray(token.value) ? token.value.join(", ") : token.value),
+      /* @__PURE__ */ React24.createElement(
         "button",
         {
           onClick: (e) => {
@@ -9568,7 +9808,7 @@ var FilteredSearchBar = ({
         "\xD7"
       )
     )),
-    /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(
       "input",
       {
         ref: inputRef,
@@ -9590,7 +9830,7 @@ var FilteredSearchBar = ({
         disabled: tokens.length >= maxTokens
       }
     )
-  ), showDropdown && /* @__PURE__ */ React22.createElement(
+  ), showDropdown && /* @__PURE__ */ React24.createElement(
     "div",
     {
       ref: dropdownRef,
@@ -9611,7 +9851,7 @@ var FilteredSearchBar = ({
     },
     selectedFilterField ? (
       // Show values for selected filter
-      /* @__PURE__ */ React22.createElement("div", null, /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement(
         "div",
         {
           style: {
@@ -9625,7 +9865,7 @@ var FilteredSearchBar = ({
             gap: "8px"
           }
         },
-        /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React24.createElement(
           "button",
           {
             onClick: () => {
@@ -9644,7 +9884,7 @@ var FilteredSearchBar = ({
           "\u2190"
         ),
         (_a = filters.find((f) => f.field === selectedFilterField)) == null ? void 0 : _a.label
-      ), (_c = (_b = filteredOptions[0]) == null ? void 0 : _b.options) == null ? void 0 : _c.map((option, index) => /* @__PURE__ */ React22.createElement(
+      ), (_c = (_b = filteredOptions[0]) == null ? void 0 : _b.options) == null ? void 0 : _c.map((option, index) => /* @__PURE__ */ React24.createElement(
         "div",
         {
           key: option,
@@ -9662,7 +9902,7 @@ var FilteredSearchBar = ({
       )))
     ) : (
       // Show filter options
-      /* @__PURE__ */ React22.createElement("div", null, /* @__PURE__ */ React22.createElement(
+      /* @__PURE__ */ React24.createElement("div", null, /* @__PURE__ */ React24.createElement(
         "div",
         {
           style: {
@@ -9674,7 +9914,7 @@ var FilteredSearchBar = ({
           }
         },
         "Filter by"
-      ), filteredOptions.map((filter, index) => /* @__PURE__ */ React22.createElement(
+      ), filteredOptions.map((filter, index) => /* @__PURE__ */ React24.createElement(
         "div",
         {
           key: filter.field,
@@ -9691,7 +9931,7 @@ var FilteredSearchBar = ({
           },
           onMouseEnter: () => setHighlightedIndex(index)
         },
-        /* @__PURE__ */ React22.createElement(
+        /* @__PURE__ */ React24.createElement(
           "div",
           {
             style: {
@@ -9702,15 +9942,15 @@ var FilteredSearchBar = ({
             }
           }
         ),
-        /* @__PURE__ */ React22.createElement("span", { style: { fontWeight: "500" } }, filter.label),
-        /* @__PURE__ */ React22.createElement("span", { style: { marginLeft: "auto", fontSize: "12px", color: "#94a3b8" } }, filter.type)
+        /* @__PURE__ */ React24.createElement("span", { style: { fontWeight: "500" } }, filter.label),
+        /* @__PURE__ */ React24.createElement("span", { style: { marginLeft: "auto", fontSize: "12px", color: "#94a3b8" } }, filter.type)
       )))
     )
   ));
 };
 
 // src/components/DataGrid/InfiniteScrollDataGrid.tsx
-import React23, { useReducer as useReducer2, useMemo as useMemo6, useEffect as useEffect11, useCallback as useCallback8, useState as useState17, useLayoutEffect as useLayoutEffect2 } from "react";
+import React25, { useReducer as useReducer2, useMemo as useMemo6, useEffect as useEffect11, useCallback as useCallback8, useState as useState17, useLayoutEffect as useLayoutEffect2 } from "react";
 
 // src/components/DataGrid/ServerSideDataSource.ts
 var BlockStatus = {
@@ -10198,14 +10438,14 @@ var InfiniteScrollDataGrid = ({
     [onCellEdit, state.currentPage, pageSize]
   );
   if (!dataSourceInstance) {
-    return /* @__PURE__ */ React23.createElement("div", { style: {
+    return /* @__PURE__ */ React25.createElement("div", { style: {
       padding: "20px",
       textAlign: "center",
       border: "1px solid #e2e8f0",
       borderRadius: "6px"
     } }, "Loading data source...");
   }
-  return /* @__PURE__ */ React23.createElement("div", { style: {
+  return /* @__PURE__ */ React25.createElement("div", { style: {
     ...themeStyles,
     border: "var(--grid-border-width, 1px) solid var(--grid-border)",
     borderRadius: "var(--grid-border-radius, 6px)",
@@ -10215,7 +10455,7 @@ var InfiniteScrollDataGrid = ({
     display: "flex",
     flexDirection: "column",
     height: (virtualScrollConfig == null ? void 0 : virtualScrollConfig.containerHeight) ? `${virtualScrollConfig.containerHeight + 150}px` : "auto"
-  } }, /* @__PURE__ */ React23.createElement("div", { style: {
+  } }, /* @__PURE__ */ React25.createElement("div", { style: {
     position: "relative",
     display: "flex",
     alignItems: "center",
@@ -10227,12 +10467,12 @@ var InfiniteScrollDataGrid = ({
     backgroundColor: "var(--grid-bg-alt)",
     borderBottom: "var(--grid-border-width, 1px) solid var(--grid-border)",
     zIndex: 30
-  } }, /* @__PURE__ */ React23.createElement("div", { style: {
+  } }, /* @__PURE__ */ React25.createElement("div", { style: {
     position: "relative",
     display: "flex",
     alignItems: "center",
     gap: "8px"
-  } }, /* @__PURE__ */ React23.createElement(
+  } }, /* @__PURE__ */ React25.createElement(
     ColumnChooser,
     {
       columns,
@@ -10242,18 +10482,18 @@ var InfiniteScrollDataGrid = ({
       onReorderColumns: (fromIndex, toIndex) => dispatch({ type: "REORDER_COLUMNS", payload: { fromIndex, toIndex } }),
       onResetLayout: () => dispatch({ type: "RESET_COLUMN_LAYOUT" })
     }
-  ), /* @__PURE__ */ React23.createElement("div", { style: {
+  ), /* @__PURE__ */ React25.createElement("div", { style: {
     fontSize: "14px",
     color: "#64748b",
     marginLeft: "12px"
-  } }, totalRows !== void 0 ? `${totalRows.toLocaleString()} total rows` : "Loading..."))), /* @__PURE__ */ React23.createElement(
+  } }, totalRows !== void 0 ? `${totalRows.toLocaleString()} total rows` : "Loading..."))), /* @__PURE__ */ React25.createElement(
     GroupByPanel,
     {
       columns,
       groupBy: state.groupBy,
       dispatch
     }
-  ), /* @__PURE__ */ React23.createElement("div", { style: { position: "sticky", top: 0, zIndex: 20 } }, /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React25.createElement("div", { style: { position: "sticky", top: 0, zIndex: 20 } }, /* @__PURE__ */ React25.createElement(
     GridHeader,
     {
       columns,
@@ -10266,7 +10506,7 @@ var InfiniteScrollDataGrid = ({
       pinnedRight: pinnedRightFields,
       showColumnPinning
     }
-  ), /* @__PURE__ */ React23.createElement(
+  ), /* @__PURE__ */ React25.createElement(
     ColumnFilters,
     {
       columns,
@@ -10278,7 +10518,7 @@ var InfiniteScrollDataGrid = ({
       pinnedRight: pinnedRightFields,
       rows: visibleRows
     }
-  )), /* @__PURE__ */ React23.createElement(
+  )), /* @__PURE__ */ React25.createElement(
     GridBody,
     {
       columns,
@@ -10300,7 +10540,7 @@ var InfiniteScrollDataGrid = ({
         enabled: true
       }
     }
-  ), /* @__PURE__ */ React23.createElement("div", { style: {
+  ), /* @__PURE__ */ React25.createElement("div", { style: {
     padding: "8px 16px",
     backgroundColor: "var(--grid-footer-bg)",
     borderTop: "var(--grid-border-width, 1px) solid var(--grid-border)",
@@ -10309,12 +10549,12 @@ var InfiniteScrollDataGrid = ({
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
-  } }, /* @__PURE__ */ React23.createElement("div", null, "Server-side infinite scrolling enabled"), /* @__PURE__ */ React23.createElement("div", null, "Rows loaded: ", visibleRows.length)));
+  } }, /* @__PURE__ */ React25.createElement("div", null, "Server-side infinite scrolling enabled"), /* @__PURE__ */ React25.createElement("div", null, "Rows loaded: ", visibleRows.length)));
 };
 var ThemedInfiniteScrollDataGrid = InfiniteScrollDataGrid;
 
 // src/components/DataGrid/ThemeSelector.tsx
-import React24 from "react";
+import React26 from "react";
 var ThemeSelector = ({
   currentTheme,
   onThemeChange
@@ -10335,7 +10575,7 @@ var ThemeSelector = ({
     onThemeChange(event.target.value);
   };
   const theme = getTheme(currentTheme);
-  return /* @__PURE__ */ React24.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React26.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React26.createElement(
     "label",
     {
       htmlFor: "theme-selector",
@@ -10346,7 +10586,7 @@ var ThemeSelector = ({
       }
     },
     "Theme:"
-  ), /* @__PURE__ */ React24.createElement(
+  ), /* @__PURE__ */ React26.createElement(
     "select",
     {
       id: "theme-selector",
@@ -10375,12 +10615,12 @@ var ThemeSelector = ({
         e.currentTarget.style.borderColor = theme.colors.border;
       }
     },
-    themes2.map((themeOption) => /* @__PURE__ */ React24.createElement("option", { key: themeOption.value, value: themeOption.value }, themeOption.label))
+    themes2.map((themeOption) => /* @__PURE__ */ React26.createElement("option", { key: themeOption.value, value: themeOption.value }, themeOption.label))
   ));
 };
 
 // src/components/DataGrid/CellRenderers.tsx
-import React25 from "react";
+import React27 from "react";
 var StatusChip = ({ status }) => {
   const getStatusStyles = (status2) => {
     const normalized = status2.toLowerCase();
@@ -10418,7 +10658,7 @@ var StatusChip = ({ status }) => {
     }
   };
   const styles = getStatusStyles(status);
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "span",
     {
       style: {
@@ -10442,7 +10682,7 @@ var ProgressBar = ({
   showLabel = true
 }) => {
   const clampedValue = Math.max(0, Math.min(100, value));
-  return /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, /* @__PURE__ */ React27.createElement(
     "div",
     {
       style: {
@@ -10453,7 +10693,7 @@ var ProgressBar = ({
         overflow: "hidden"
       }
     },
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React27.createElement(
       "div",
       {
         style: {
@@ -10464,10 +10704,10 @@ var ProgressBar = ({
         }
       }
     )
-  ), showLabel && /* @__PURE__ */ React25.createElement("span", { style: { fontSize: "12px", fontWeight: 500, color: "#6b7280", minWidth: "35px" } }, clampedValue, "%"));
+  ), showLabel && /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "12px", fontWeight: 500, color: "#6b7280", minWidth: "35px" } }, clampedValue, "%"));
 };
 var IconCell = ({ icon, text, iconColor }) => {
-  return /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React25.createElement("span", { style: { fontSize: "16px", color: iconColor } }, icon), text && /* @__PURE__ */ React25.createElement("span", { style: { fontSize: "13px" } }, text));
+  return /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "16px", color: iconColor } }, icon), text && /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "13px" } }, text));
 };
 var ImageCell = ({
   src,
@@ -10475,7 +10715,7 @@ var ImageCell = ({
   text,
   size = 32
 }) => {
-  return /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React27.createElement(
     "img",
     {
       src,
@@ -10488,7 +10728,7 @@ var ImageCell = ({
         border: "2px solid #e5e7eb"
       }
     }
-  ), text && /* @__PURE__ */ React25.createElement("span", { style: { fontSize: "13px" } }, text));
+  ), text && /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "13px" } }, text));
 };
 var ButtonCell = ({
   label,
@@ -10530,7 +10770,7 @@ var ButtonCell = ({
     }
   };
   const styles = getButtonStyles();
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "button",
     {
       onClick: (e) => {
@@ -10572,7 +10812,7 @@ var BadgeCell = ({
   color = "#1f2937",
   backgroundColor = "#f3f4f6"
 }) => {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React27.createElement(
     "span",
     {
       style: {
@@ -10603,11 +10843,11 @@ var PriorityIndicator = ({ priority }) => {
     }
   };
   const styles = getPriorityStyles();
-  return /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React25.createElement("span", { style: { color: styles.color, fontSize: "18px" } }, styles.icon), /* @__PURE__ */ React25.createElement("span", { style: { fontSize: "13px", fontWeight: 500 } }, styles.text));
+  return /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React27.createElement("span", { style: { color: styles.color, fontSize: "18px" } }, styles.icon), /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "13px", fontWeight: 500 } }, styles.text));
 };
 var Rating = ({ rating, maxRating = 5 }) => {
   const stars = Array.from({ length: maxRating }, (_, i) => i < rating ? "\u2605" : "\u2606");
-  return /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", gap: "2px", fontSize: "14px", color: "#f59e0b" } }, stars.map((star, i) => /* @__PURE__ */ React25.createElement("span", { key: i }, star)));
+  return /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", gap: "2px", fontSize: "14px", color: "#f59e0b" } }, stars.map((star, i) => /* @__PURE__ */ React27.createElement("span", { key: i }, star)));
 };
 var CurrencyCell = ({
   amount,
@@ -10618,11 +10858,11 @@ var CurrencyCell = ({
     style: "currency",
     currency
   }).format(amount);
-  return /* @__PURE__ */ React25.createElement("span", { style: { fontWeight: 500, color: amount < 0 ? "#ef4444" : "#059669" } }, formatted);
+  return /* @__PURE__ */ React27.createElement("span", { style: { fontWeight: 500, color: amount < 0 ? "#ef4444" : "#059669" } }, formatted);
 };
 
 // src/components/DataGrid/GridApiDemo.tsx
-import React26, { useRef as useRef12, useState as useState18 } from "react";
+import React28, { useRef as useRef12, useState as useState18 } from "react";
 var GridApiDemo = () => {
   const gridRef = useRef12(null);
   const [logs, setLogs] = useState18([]);
@@ -10881,7 +11121,7 @@ var GridApiDemo = () => {
     const totalPages = api.paginationGetTotalPages();
     addLog(`Rows: ${totalRows}, Selected: ${selectedCount}, Filters: ${hasFilters}, Page: ${currentPage + 1}/${totalPages}`);
   };
-  return /* @__PURE__ */ React26.createElement("div", { style: { padding: "20px", maxWidth: "1400px", margin: "0 auto" } }, /* @__PURE__ */ React26.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React26.createElement("h2", null, "Grid API Demo"), /* @__PURE__ */ React26.createElement("p", { style: { color: "#666" } }, "Demonstrates programmatic control of the DataGrid using the GridApi ref (AG Grid-inspired API)")), /* @__PURE__ */ React26.createElement("div", { style: {
+  return /* @__PURE__ */ React28.createElement("div", { style: { padding: "20px", maxWidth: "1400px", margin: "0 auto" } }, /* @__PURE__ */ React28.createElement("div", { style: { marginBottom: "20px" } }, /* @__PURE__ */ React28.createElement("h2", null, "Grid API Demo"), /* @__PURE__ */ React28.createElement("p", { style: { color: "#666" } }, "Demonstrates programmatic control of the DataGrid using the GridApi ref (AG Grid-inspired API)")), /* @__PURE__ */ React28.createElement("div", { style: {
     display: "grid",
     gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
     gap: "10px",
@@ -10889,7 +11129,7 @@ var GridApiDemo = () => {
     padding: "15px",
     backgroundColor: "#f5f5f5",
     borderRadius: "8px"
-  } }, /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Data Operations"), /* @__PURE__ */ React26.createElement("button", { onClick: handleAddRow, style: buttonStyle }, "Add Row"), /* @__PURE__ */ React26.createElement("button", { onClick: handleUpdateSelectedRows, style: buttonStyle }, "Update Selected"), /* @__PURE__ */ React26.createElement("button", { onClick: handleRemoveSelectedRows, style: buttonStyle }, "Remove Selected")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Column Operations"), /* @__PURE__ */ React26.createElement("button", { onClick: handleHideColumn, style: buttonStyle }, "Hide Email"), /* @__PURE__ */ React26.createElement("button", { onClick: handleShowColumn, style: buttonStyle }, "Show Email"), /* @__PURE__ */ React26.createElement("button", { onClick: handlePinColumn, style: buttonStyle }, "Pin Name"), /* @__PURE__ */ React26.createElement("button", { onClick: handleUnpinColumn, style: buttonStyle }, "Unpin Name"), /* @__PURE__ */ React26.createElement("button", { onClick: handleAutoSizeColumns, style: buttonStyle }, "Auto-size Columns"), /* @__PURE__ */ React26.createElement("button", { onClick: handleSizeColumnsToFit, style: buttonStyle }, "Fit to Width")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Filter & Sort"), /* @__PURE__ */ React26.createElement("button", { onClick: handleApplyFilter, style: buttonStyle }, "Filter Active"), /* @__PURE__ */ React26.createElement("button", { onClick: handleClearFilters, style: buttonStyle }, "Clear Filters"), /* @__PURE__ */ React26.createElement("button", { onClick: handleApplySort, style: buttonStyle }, "Sort by Score"), /* @__PURE__ */ React26.createElement("button", { onClick: handleClearSort, style: buttonStyle }, "Clear Sort")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Selection"), /* @__PURE__ */ React26.createElement("button", { onClick: handleSelectAll, style: buttonStyle }, "Select All"), /* @__PURE__ */ React26.createElement("button", { onClick: handleDeselectAll, style: buttonStyle }, "Deselect All"), /* @__PURE__ */ React26.createElement("button", { onClick: handleSelectFiltered, style: buttonStyle }, "Select Filtered"), /* @__PURE__ */ React26.createElement("button", { onClick: handleGetSelection, style: buttonStyle }, "Get Selection")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Export & Clipboard"), /* @__PURE__ */ React26.createElement("button", { onClick: handleExportCSV, style: buttonStyle }, "Export CSV"), /* @__PURE__ */ React26.createElement("button", { onClick: handleCopyToClipboard, style: buttonStyle }, "Copy to Clipboard")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Navigation"), /* @__PURE__ */ React26.createElement("button", { onClick: handleScrollToRow, style: buttonStyle }, "Scroll to Middle"), /* @__PURE__ */ React26.createElement("button", { onClick: handleFocusCell, style: buttonStyle }, "Focus Cell"), /* @__PURE__ */ React26.createElement("button", { onClick: handleNextPage, style: buttonStyle }, "Next Page"), /* @__PURE__ */ React26.createElement("button", { onClick: handlePreviousPage, style: buttonStyle }, "Previous Page"), /* @__PURE__ */ React26.createElement("button", { onClick: handleSetPageSize, style: buttonStyle }, "Page Size: 20")), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Info"), /* @__PURE__ */ React26.createElement("button", { onClick: handleGetInfo, style: buttonStyle }, "Get Grid Info"))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Data Operations"), /* @__PURE__ */ React28.createElement("button", { onClick: handleAddRow, style: buttonStyle }, "Add Row"), /* @__PURE__ */ React28.createElement("button", { onClick: handleUpdateSelectedRows, style: buttonStyle }, "Update Selected"), /* @__PURE__ */ React28.createElement("button", { onClick: handleRemoveSelectedRows, style: buttonStyle }, "Remove Selected")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Column Operations"), /* @__PURE__ */ React28.createElement("button", { onClick: handleHideColumn, style: buttonStyle }, "Hide Email"), /* @__PURE__ */ React28.createElement("button", { onClick: handleShowColumn, style: buttonStyle }, "Show Email"), /* @__PURE__ */ React28.createElement("button", { onClick: handlePinColumn, style: buttonStyle }, "Pin Name"), /* @__PURE__ */ React28.createElement("button", { onClick: handleUnpinColumn, style: buttonStyle }, "Unpin Name"), /* @__PURE__ */ React28.createElement("button", { onClick: handleAutoSizeColumns, style: buttonStyle }, "Auto-size Columns"), /* @__PURE__ */ React28.createElement("button", { onClick: handleSizeColumnsToFit, style: buttonStyle }, "Fit to Width")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Filter & Sort"), /* @__PURE__ */ React28.createElement("button", { onClick: handleApplyFilter, style: buttonStyle }, "Filter Active"), /* @__PURE__ */ React28.createElement("button", { onClick: handleClearFilters, style: buttonStyle }, "Clear Filters"), /* @__PURE__ */ React28.createElement("button", { onClick: handleApplySort, style: buttonStyle }, "Sort by Score"), /* @__PURE__ */ React28.createElement("button", { onClick: handleClearSort, style: buttonStyle }, "Clear Sort")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Selection"), /* @__PURE__ */ React28.createElement("button", { onClick: handleSelectAll, style: buttonStyle }, "Select All"), /* @__PURE__ */ React28.createElement("button", { onClick: handleDeselectAll, style: buttonStyle }, "Deselect All"), /* @__PURE__ */ React28.createElement("button", { onClick: handleSelectFiltered, style: buttonStyle }, "Select Filtered"), /* @__PURE__ */ React28.createElement("button", { onClick: handleGetSelection, style: buttonStyle }, "Get Selection")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Export & Clipboard"), /* @__PURE__ */ React28.createElement("button", { onClick: handleExportCSV, style: buttonStyle }, "Export CSV"), /* @__PURE__ */ React28.createElement("button", { onClick: handleCopyToClipboard, style: buttonStyle }, "Copy to Clipboard")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Navigation"), /* @__PURE__ */ React28.createElement("button", { onClick: handleScrollToRow, style: buttonStyle }, "Scroll to Middle"), /* @__PURE__ */ React28.createElement("button", { onClick: handleFocusCell, style: buttonStyle }, "Focus Cell"), /* @__PURE__ */ React28.createElement("button", { onClick: handleNextPage, style: buttonStyle }, "Next Page"), /* @__PURE__ */ React28.createElement("button", { onClick: handlePreviousPage, style: buttonStyle }, "Previous Page"), /* @__PURE__ */ React28.createElement("button", { onClick: handleSetPageSize, style: buttonStyle }, "Page Size: 20")), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("h4", { style: { margin: "0 0 10px 0", fontSize: "14px", fontWeight: "600" } }, "Info"), /* @__PURE__ */ React28.createElement("button", { onClick: handleGetInfo, style: buttonStyle }, "Get Grid Info"))), /* @__PURE__ */ React28.createElement("div", { style: {
     marginBottom: "20px",
     padding: "10px",
     backgroundColor: "#f9f9f9",
@@ -10899,7 +11139,7 @@ var GridApiDemo = () => {
     overflow: "auto",
     fontFamily: "monospace",
     fontSize: "12px"
-  } }, /* @__PURE__ */ React26.createElement("div", { style: { fontWeight: "600", marginBottom: "5px" } }, "Activity Log:"), logs.length === 0 ? /* @__PURE__ */ React26.createElement("div", { style: { color: "#999" } }, "No actions yet. Click buttons above to interact with the grid.") : logs.map((log, i) => /* @__PURE__ */ React26.createElement("div", { key: i, style: { padding: "2px 0" } }, log))), /* @__PURE__ */ React26.createElement("div", { style: { marginBottom: "10px", padding: "10px", backgroundColor: isGridReady ? "#d4edda" : "#f8d7da", borderRadius: "4px", border: `1px solid ${isGridReady ? "#c3e6cb" : "#f5c6cb"}` } }, /* @__PURE__ */ React26.createElement("strong", null, "Grid Status:"), " ", isGridReady ? "\u2705 Ready" : "\u23F3 Initializing..."), /* @__PURE__ */ React26.createElement(
+  } }, /* @__PURE__ */ React28.createElement("div", { style: { fontWeight: "600", marginBottom: "5px" } }, "Activity Log:"), logs.length === 0 ? /* @__PURE__ */ React28.createElement("div", { style: { color: "#999" } }, "No actions yet. Click buttons above to interact with the grid.") : logs.map((log, i) => /* @__PURE__ */ React28.createElement("div", { key: i, style: { padding: "2px 0" } }, log))), /* @__PURE__ */ React28.createElement("div", { style: { marginBottom: "10px", padding: "10px", backgroundColor: isGridReady ? "#d4edda" : "#f8d7da", borderRadius: "4px", border: `1px solid ${isGridReady ? "#c3e6cb" : "#f5c6cb"}` } }, /* @__PURE__ */ React28.createElement("strong", null, "Grid Status:"), " ", isGridReady ? "\u2705 Ready" : "\u23F3 Initializing..."), /* @__PURE__ */ React28.createElement(
     DataGrid,
     {
       ref: gridRef,
@@ -10914,7 +11154,7 @@ var GridApiDemo = () => {
         addLog(`Selection changed: ${selectedIds.length} row(s)`);
       }
     }
-  ), /* @__PURE__ */ React26.createElement("div", { style: { marginTop: "30px", padding: "20px", backgroundColor: "#e8f5e9", borderRadius: "8px", marginBottom: "20px" } }, /* @__PURE__ */ React26.createElement("h3", { style: { marginTop: 0 } }, "\u{1F4D8} Using onGridReady Event"), /* @__PURE__ */ React26.createElement("p", { style: { fontSize: "14px", lineHeight: "1.6" } }, "The ", /* @__PURE__ */ React26.createElement("code", null, "onGridReady"), " callback is fired when the grid API is fully initialized and ready to use. This is similar to AG-Grid's ", /* @__PURE__ */ React26.createElement("code", null, "onGridReady"), " event."), /* @__PURE__ */ React26.createElement("pre", { style: { backgroundColor: "#fff", padding: "15px", borderRadius: "4px", overflow: "auto", fontSize: "13px" } }, `// Example usage
+  ), /* @__PURE__ */ React28.createElement("div", { style: { marginTop: "30px", padding: "20px", backgroundColor: "#e8f5e9", borderRadius: "8px", marginBottom: "20px" } }, /* @__PURE__ */ React28.createElement("h3", { style: { marginTop: 0 } }, "\u{1F4D8} Using onGridReady Event"), /* @__PURE__ */ React28.createElement("p", { style: { fontSize: "14px", lineHeight: "1.6" } }, "The ", /* @__PURE__ */ React28.createElement("code", null, "onGridReady"), " callback is fired when the grid API is fully initialized and ready to use. This is similar to AG-Grid's ", /* @__PURE__ */ React28.createElement("code", null, "onGridReady"), " event."), /* @__PURE__ */ React28.createElement("pre", { style: { backgroundColor: "#fff", padding: "15px", borderRadius: "4px", overflow: "auto", fontSize: "13px" } }, `// Example usage
 const MyComponent = () => {
   const gridRef = useRef<GridApi>(null);
 
@@ -10932,14 +11172,14 @@ const MyComponent = () => {
       onGridReady={handleGridReady}  // \u2705 Called when API is ready
     />
   );
-};`)), /* @__PURE__ */ React26.createElement("div", { style: {
+};`)), /* @__PURE__ */ React28.createElement("div", { style: {
     marginTop: "30px",
     padding: "24px",
     background: "linear-gradient(to bottom right, #ffffff, #f9fafb)",
     border: "1px solid #e5e7eb",
     borderRadius: "12px",
     boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-  } }, /* @__PURE__ */ React26.createElement("h3", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h3", { style: {
     fontSize: "20px",
     fontWeight: "700",
     marginBottom: "20px",
@@ -10947,7 +11187,7 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "8px"
-  } }, /* @__PURE__ */ React26.createElement("span", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", { style: {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -10957,14 +11197,14 @@ const MyComponent = () => {
     borderRadius: "8px",
     color: "white",
     fontSize: "18px"
-  } }, "\u26A1"), "Grid API Methods Available"), /* @__PURE__ */ React26.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, "\u26A1"), "Grid API Methods Available"), /* @__PURE__ */ React28.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: "16px" } }, /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -10972,14 +11212,14 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u{1F4CA}"), " Data & Model"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setRowData(rows)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "applyTransaction(tx)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getModel()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getDisplayedRowCount()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "forEachNode(callback)")))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u{1F4CA}"), " Data & Model"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setRowData(rows)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "applyTransaction(tx)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getModel()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getDisplayedRowCount()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#10b981", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "forEachNode(callback)")))), /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -10987,14 +11227,14 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u{1F4CB}"), " Columns"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getColumnDefs()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setColumnVisible(key, visible)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setColumnPinned(key, pinned)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "autoSizeColumns(keys?)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "sizeColumnsToFit()")))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u{1F4CB}"), " Columns"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getColumnDefs()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setColumnVisible(key, visible)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setColumnPinned(key, pinned)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "autoSizeColumns(keys?)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#8b5cf6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "sizeColumnsToFit()")))), /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -11002,14 +11242,14 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u{1F50D}"), " Filtering & Sorting"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getFilterModel()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setFilterModel(model)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSortModel()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setSortModel(model)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "clearAllFilters()")))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u{1F50D}"), " Filtering & Sorting"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getFilterModel()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setFilterModel(model)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSortModel()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setSortModel(model)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#f59e0b", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "clearAllFilters()")))), /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -11017,14 +11257,14 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u2705"), " Selection"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSelectedRows()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "selectAll()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "deselectAll()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "selectAllFiltered()")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSelectedRowCount()")))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u2705"), " Selection"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSelectedRows()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "selectAll()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "deselectAll()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "selectAllFiltered()")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#ec4899", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getSelectedRowCount()")))), /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -11032,14 +11272,14 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u{1F9ED}"), " Navigation"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "ensureIndexVisible(index)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setFocusedCell(row, col)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "clearFocusedCell()")))), /* @__PURE__ */ React26.createElement("div", { style: {
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u{1F9ED}"), " Navigation"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "ensureIndexVisible(index)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "setFocusedCell(row, col)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#14b8a6", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "clearFocusedCell()")))), /* @__PURE__ */ React28.createElement("div", { style: {
     padding: "16px",
     backgroundColor: "#ffffff",
     borderRadius: "8px",
     border: "1px solid #e5e7eb",
     transition: "all 0.2s ease",
     boxShadow: "0 1px 3px rgba(0,0,0,0.05)"
-  } }, /* @__PURE__ */ React26.createElement("h4", { style: {
+  } }, /* @__PURE__ */ React28.createElement("h4", { style: {
     fontSize: "14px",
     fontWeight: "600",
     marginBottom: "12px",
@@ -11047,7 +11287,7 @@ const MyComponent = () => {
     display: "flex",
     alignItems: "center",
     gap: "6px"
-  } }, /* @__PURE__ */ React26.createElement("span", null, "\u{1F4E4}"), " Export"), /* @__PURE__ */ React26.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "exportDataAsCsv(params?)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getDataAsCsv(params?)")), /* @__PURE__ */ React26.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React26.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React26.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "copySelectedRowsToClipboard()")))))));
+  } }, /* @__PURE__ */ React28.createElement("span", null, "\u{1F4E4}"), " Export"), /* @__PURE__ */ React28.createElement("ul", { style: { fontSize: "13px", lineHeight: "1.8", listStyle: "none", padding: 0, margin: 0 } }, /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "exportDataAsCsv(params?)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "getDataAsCsv(params?)")), /* @__PURE__ */ React28.createElement("li", { style: { padding: "4px 0", display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React28.createElement("span", { style: { color: "#06b6d4", fontSize: "10px" } }, "\u25CF"), /* @__PURE__ */ React28.createElement("code", { style: { backgroundColor: "#f3f4f6", padding: "2px 6px", borderRadius: "4px", fontSize: "12px" } }, "copySelectedRowsToClipboard()")))))));
 };
 var buttonStyle = {
   display: "block",
@@ -11064,10 +11304,10 @@ var buttonStyle = {
 };
 
 // src/components/DataGrid/MarketDataGrid.tsx
-import React28, { useRef as useRef13, useEffect as useEffect12, useMemo as useMemo7, useCallback as useCallback9 } from "react";
+import React30, { useRef as useRef13, useEffect as useEffect12, useMemo as useMemo7, useCallback as useCallback9 } from "react";
 
 // src/components/DataGrid/MarketDataGridUtils.tsx
-import React27 from "react";
+import React29 from "react";
 var getColumnClass = (field) => {
   const numericFields = ["price", "bid", "ask", "size", "volume", "change", "changePercent", "high", "low", "open"];
   return numericFields.includes(field) ? "numeric-cell" : "";
@@ -11090,10 +11330,10 @@ var formatPrice = (value) => {
   });
 };
 var formatChange = (value, isPercent) => {
-  if (value == null) return /* @__PURE__ */ React27.createElement("span", null, "-");
+  if (value == null) return /* @__PURE__ */ React29.createElement("span", null, "-");
   const formatted = isPercent ? `${value >= 0 ? "+" : ""}${value.toFixed(2)}%` : `${value >= 0 ? "+" : ""}${value.toFixed(2)}`;
   const className = value >= 0 ? "change-positive" : "change-negative";
-  return /* @__PURE__ */ React27.createElement("span", { className }, formatted);
+  return /* @__PURE__ */ React29.createElement("span", { className }, formatted);
 };
 var formatVolume = (value) => {
   if (value == null) return "";
@@ -11158,7 +11398,7 @@ var MarketDataGrid = ({
   const handleRowClick = useCallback9((row) => {
     onRowClick == null ? void 0 : onRowClick(row);
   }, [onRowClick]);
-  const renderHeader = () => /* @__PURE__ */ React28.createElement("div", { className: "market-grid-header" }, /* @__PURE__ */ React28.createElement("div", { className: "market-grid-header-row" }, enhancedColumns.map((col) => /* @__PURE__ */ React28.createElement(
+  const renderHeader = () => /* @__PURE__ */ React30.createElement("div", { className: "market-grid-header" }, /* @__PURE__ */ React30.createElement("div", { className: "market-grid-header-row" }, enhancedColumns.map((col) => /* @__PURE__ */ React30.createElement(
     "div",
     {
       key: col.field,
@@ -11167,7 +11407,7 @@ var MarketDataGrid = ({
     },
     col.headerName
   ))));
-  const renderBody = () => /* @__PURE__ */ React28.createElement("div", { className: "market-grid-body" }, rows.map((row) => /* @__PURE__ */ React28.createElement(
+  const renderBody = () => /* @__PURE__ */ React30.createElement("div", { className: "market-grid-body" }, rows.map((row) => /* @__PURE__ */ React30.createElement(
     "div",
     {
       key: row.id,
@@ -11176,7 +11416,7 @@ var MarketDataGrid = ({
     },
     enhancedColumns.map((col) => {
       const value = row[col.field];
-      return /* @__PURE__ */ React28.createElement(
+      return /* @__PURE__ */ React30.createElement(
         "div",
         {
           key: col.field,
@@ -11194,7 +11434,7 @@ var MarketDataGrid = ({
     })
   )));
   const containerClassName = `market-data-grid ${(config == null ? void 0 : config.densityMode) ? "density-compact" : ""} ${className}`.trim();
-  return /* @__PURE__ */ React28.createElement("div", { ref: tableRef, className: containerClassName, "data-testid": "data-grid" }, renderHeader(), renderBody());
+  return /* @__PURE__ */ React30.createElement("div", { ref: tableRef, className: containerClassName, "data-testid": "data-grid" }, renderHeader(), renderBody());
 };
 
 // src/components/DataGrid/MarketDataEngine.ts
@@ -12049,7 +12289,7 @@ function createMockFeed(config) {
 }
 
 // src/components/DataGrid/PivotToolbar.tsx
-import React29, { useState as useState20, useMemo as useMemo8 } from "react";
+import React31, { useState as useState20, useMemo as useMemo8 } from "react";
 var AGGREGATOR_OPTIONS = [
   { value: "sum", label: "Sum" },
   { value: "avg", label: "Average" },
@@ -12105,7 +12345,7 @@ var PivotToolbar = ({
   const handleToggle = () => {
     setIsExpanded(!isExpanded);
   };
-  return /* @__PURE__ */ React29.createElement(
+  return /* @__PURE__ */ React31.createElement(
     "div",
     {
       className,
@@ -12117,14 +12357,14 @@ var PivotToolbar = ({
         ...style
       }
     },
-    /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: isExpanded ? "12px" : "0" } }, /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "20px" } }, "\u{1F4CA}"), /* @__PURE__ */ React29.createElement("h3", { style: { margin: 0, fontSize: "14px", fontWeight: "600", color: "#1e293b" } }, "Pivot Table"), isPivotMode && /* @__PURE__ */ React29.createElement("span", { style: {
+    /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: isExpanded ? "12px" : "0" } }, /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React31.createElement("span", { style: { fontSize: "20px" } }, "\u{1F4CA}"), /* @__PURE__ */ React31.createElement("h3", { style: { margin: 0, fontSize: "14px", fontWeight: "600", color: "#1e293b" } }, "Pivot Table"), isPivotMode && /* @__PURE__ */ React31.createElement("span", { style: {
       backgroundColor: "#10b981",
       color: "white",
       padding: "2px 8px",
       borderRadius: "12px",
       fontSize: "11px",
       fontWeight: "600"
-    } }, "Active")), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", gap: "8px" } }, isPivotMode && /* @__PURE__ */ React29.createElement(
+    } }, "Active")), /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", gap: "8px" } }, isPivotMode && /* @__PURE__ */ React31.createElement(
       "button",
       {
         onClick: handleClear,
@@ -12147,7 +12387,7 @@ var PivotToolbar = ({
         }
       },
       "Clear Pivot"
-    ), /* @__PURE__ */ React29.createElement(
+    ), /* @__PURE__ */ React31.createElement(
       "button",
       {
         onClick: handleToggle,
@@ -12170,7 +12410,7 @@ var PivotToolbar = ({
       },
       isExpanded ? "\u25B2" : "\u25BC"
     ))),
-    isExpanded && /* @__PURE__ */ React29.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "12px" } }, /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Row Group By ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+    isExpanded && /* @__PURE__ */ React31.createElement("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "12px" } }, /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Row Group By ", /* @__PURE__ */ React31.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React31.createElement(
       "select",
       {
         value: rowGroupColumn,
@@ -12186,9 +12426,9 @@ var PivotToolbar = ({
           cursor: "pointer"
         }
       },
-      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
-      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
-    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Pivot Column ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React31.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React31.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Pivot Column ", /* @__PURE__ */ React31.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React31.createElement(
       "select",
       {
         value: pivotColumn,
@@ -12204,9 +12444,9 @@ var PivotToolbar = ({
           cursor: "pointer"
         }
       },
-      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
-      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
-    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Value Column ", /* @__PURE__ */ React29.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React31.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React31.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Value Column ", /* @__PURE__ */ React31.createElement("span", { style: { color: "#dc2626" } }, "*")), /* @__PURE__ */ React31.createElement(
       "select",
       {
         value: valueColumn,
@@ -12222,9 +12462,9 @@ var PivotToolbar = ({
           cursor: "pointer"
         }
       },
-      /* @__PURE__ */ React29.createElement("option", { value: "" }, "Select column..."),
-      columns.map((col) => /* @__PURE__ */ React29.createElement("option", { key: col.field, value: col.field }, col.headerName))
-    )), /* @__PURE__ */ React29.createElement("div", null, /* @__PURE__ */ React29.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Aggregation"), /* @__PURE__ */ React29.createElement(
+      /* @__PURE__ */ React31.createElement("option", { value: "" }, "Select column..."),
+      columns.map((col) => /* @__PURE__ */ React31.createElement("option", { key: col.field, value: col.field }, col.headerName))
+    )), /* @__PURE__ */ React31.createElement("div", null, /* @__PURE__ */ React31.createElement("label", { style: { display: "block", fontSize: "12px", fontWeight: "600", color: "#475569", marginBottom: "6px" } }, "Aggregation"), /* @__PURE__ */ React31.createElement(
       "select",
       {
         value: aggregator,
@@ -12240,8 +12480,8 @@ var PivotToolbar = ({
           cursor: "pointer"
         }
       },
-      AGGREGATOR_OPTIONS.map((opt) => /* @__PURE__ */ React29.createElement("option", { key: opt.value, value: opt.value }, opt.label))
-    )), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px", justifyContent: "center" } }, /* @__PURE__ */ React29.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(
+      AGGREGATOR_OPTIONS.map((opt) => /* @__PURE__ */ React31.createElement("option", { key: opt.value, value: opt.value }, opt.label))
+    )), /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "8px", justifyContent: "center" } }, /* @__PURE__ */ React31.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React31.createElement(
       "input",
       {
         type: "checkbox",
@@ -12249,7 +12489,7 @@ var PivotToolbar = ({
         onChange: (e) => setShowTotals(e.target.checked),
         style: { cursor: "pointer" }
       }
-    ), "Show Totals Row"), /* @__PURE__ */ React29.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement(
+    ), "Show Totals Row"), /* @__PURE__ */ React31.createElement("label", { style: { display: "flex", alignItems: "center", gap: "6px", fontSize: "13px", color: "#475569", cursor: "pointer" } }, /* @__PURE__ */ React31.createElement(
       "input",
       {
         type: "checkbox",
@@ -12257,7 +12497,7 @@ var PivotToolbar = ({
         onChange: (e) => setShowGrandTotal(e.target.checked),
         style: { cursor: "pointer" }
       }
-    ), "Show Grand Total Column")), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "flex-end" } }, /* @__PURE__ */ React29.createElement(
+    ), "Show Grand Total Column")), /* @__PURE__ */ React31.createElement("div", { style: { display: "flex", alignItems: "flex-end" } }, /* @__PURE__ */ React31.createElement(
       "button",
       {
         onClick: handleApply,
@@ -12288,7 +12528,7 @@ var PivotToolbar = ({
       },
       "Apply Pivot"
     ))),
-    isExpanded && /* @__PURE__ */ React29.createElement("div", { style: {
+    isExpanded && /* @__PURE__ */ React31.createElement("div", { style: {
       marginTop: "12px",
       padding: "10px",
       backgroundColor: "#eff6ff",
@@ -12296,7 +12536,7 @@ var PivotToolbar = ({
       borderRadius: "6px",
       fontSize: "12px",
       color: "#1e40af"
-    } }, /* @__PURE__ */ React29.createElement("strong", null, "\u{1F4A1} Tip:"), " Select a Row Group column to organize data by, a Pivot column whose values become new columns, and a Value column to aggregate.")
+    } }, /* @__PURE__ */ React31.createElement("strong", null, "\u{1F4A1} Tip:"), " Select a Row Group column to organize data by, a Pivot column whose values become new columns, and a Value column to aggregate.")
   );
 };
 
@@ -12496,7 +12736,7 @@ function filterOptions(options, searchQuery) {
 }
 
 // src/editors/RichSelectEditor.tsx
-import React30, { useState as useState21, useRef as useRef16, useEffect as useEffect15, useMemo as useMemo9 } from "react";
+import React32, { useState as useState21, useRef as useRef16, useEffect as useEffect15, useMemo as useMemo9 } from "react";
 function RichSelectEditor(props) {
   const {
     value,
@@ -12613,16 +12853,16 @@ function RichSelectEditor(props) {
     if (renderOptionLabel) {
       return renderOptionLabel(option);
     }
-    return /* @__PURE__ */ React30.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React30.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React30.createElement("div", { className: "editor-option-text" }, /* @__PURE__ */ React30.createElement("div", { className: "editor-option-label" }, option.label), option.description && /* @__PURE__ */ React30.createElement("div", { className: "editor-option-description" }, option.description)));
+    return /* @__PURE__ */ React32.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React32.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React32.createElement("div", { className: "editor-option-text" }, /* @__PURE__ */ React32.createElement("div", { className: "editor-option-label" }, option.label), option.description && /* @__PURE__ */ React32.createElement("div", { className: "editor-option-description" }, option.description)));
   };
-  return /* @__PURE__ */ React30.createElement(
+  return /* @__PURE__ */ React32.createElement(
     "div",
     {
       ref: containerRef,
       className: "editor-container editor-richselect-container",
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React30.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React30.createElement(
+    /* @__PURE__ */ React32.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React32.createElement(
       "input",
       {
         ref: inputRef,
@@ -12642,7 +12882,7 @@ function RichSelectEditor(props) {
         "aria-controls": "richselect-dropdown",
         autoComplete: "off"
       }
-    ), /* @__PURE__ */ React30.createElement("div", { className: "editor-input-actions" }, allowClear && value !== null && value !== void 0 && /* @__PURE__ */ React30.createElement(
+    ), /* @__PURE__ */ React32.createElement("div", { className: "editor-input-actions" }, allowClear && value !== null && value !== void 0 && /* @__PURE__ */ React32.createElement(
       "button",
       {
         type: "button",
@@ -12652,8 +12892,8 @@ function RichSelectEditor(props) {
         tabIndex: -1
       },
       "\xD7"
-    ), /* @__PURE__ */ React30.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
-    isOpen && /* @__PURE__ */ React30.createElement(
+    ), /* @__PURE__ */ React32.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
+    isOpen && /* @__PURE__ */ React32.createElement(
       "div",
       {
         ref: dropdownRef,
@@ -12662,7 +12902,7 @@ function RichSelectEditor(props) {
         role: "listbox",
         style: { maxHeight: maxDropdownHeight }
       },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React30.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React30.createElement(
+      filteredOptions.length === 0 ? /* @__PURE__ */ React32.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => /* @__PURE__ */ React32.createElement(
         "div",
         {
           key: option.value,
@@ -12684,7 +12924,7 @@ function RichSelectEditor(props) {
 RichSelectEditor.displayName = "RichSelectEditor";
 
 // src/editors/DateEditor.tsx
-import React31, { useState as useState22, useRef as useRef17, useMemo as useMemo10 } from "react";
+import React33, { useState as useState22, useRef as useRef17, useMemo as useMemo10 } from "react";
 function DateEditor(props) {
   const {
     value,
@@ -12710,7 +12950,7 @@ function DateEditor(props) {
     const parsed = new Date(value);
     return isNaN(parsed.getTime()) ? null : parsed;
   }, [value]);
-  React31.useEffect(() => {
+  React33.useEffect(() => {
     if (parsedValue) {
       setInputValue(formatDate(parsedValue, dateFormat, showTime));
       setViewDate(parsedValue);
@@ -12783,14 +13023,14 @@ function DateEditor(props) {
   const calendarDays = useMemo10(() => {
     return generateCalendarDays(viewDate, parsedValue, minDate, maxDate);
   }, [viewDate, parsedValue, minDate, maxDate]);
-  return /* @__PURE__ */ React31.createElement(
+  return /* @__PURE__ */ React33.createElement(
     "div",
     {
       ref: containerRef,
       className: "editor-container editor-date-container",
       onKeyDown: handleKeyDown
     },
-    /* @__PURE__ */ React31.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React31.createElement(
+    /* @__PURE__ */ React33.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React33.createElement(
       "input",
       {
         ref: inputRef,
@@ -12803,8 +13043,8 @@ function DateEditor(props) {
         "aria-label": "Date input",
         autoComplete: "off"
       }
-    ), /* @__PURE__ */ React31.createElement("span", { className: "editor-calendar-icon", "aria-hidden": "true" }, "\u{1F4C5}")),
-    isOpen && /* @__PURE__ */ React31.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React31.createElement(
+    ), /* @__PURE__ */ React33.createElement("span", { className: "editor-calendar-icon", "aria-hidden": "true" }, "\u{1F4C5}")),
+    isOpen && /* @__PURE__ */ React33.createElement("div", { ref: calendarRef, className: "editor-dropdown editor-calendar" }, /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-header" }, /* @__PURE__ */ React33.createElement(
       "button",
       {
         type: "button",
@@ -12813,10 +13053,10 @@ function DateEditor(props) {
         "aria-label": "Previous month"
       },
       "\u2039"
-    ), /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
+    ), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
       month: "long",
       year: "numeric"
-    })), /* @__PURE__ */ React31.createElement(
+    })), /* @__PURE__ */ React33.createElement(
       "button",
       {
         type: "button",
@@ -12825,7 +13065,7 @@ function DateEditor(props) {
         "aria-label": "Next month"
       },
       "\u203A"
-    )), /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React31.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React31.createElement(
+    )), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-weekdays" }, ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"].map((day) => /* @__PURE__ */ React33.createElement("div", { key: day, className: "editor-calendar-weekday" }, day))), /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-days" }, calendarDays.map((day, index) => /* @__PURE__ */ React33.createElement(
       "button",
       {
         key: index,
@@ -12836,7 +13076,7 @@ function DateEditor(props) {
         "aria-label": day.date ? day.date.toDateString() : ""
       },
       day.label
-    ))), showTime && /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React31.createElement(
+    ))), showTime && /* @__PURE__ */ React33.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React33.createElement(
       "input",
       {
         type: "time",
@@ -12949,7 +13189,7 @@ function isDateDisabled(date, minDate, maxDate) {
 }
 
 // src/editors/NumericEditor.tsx
-import React32, { useState as useState23, useEffect as useEffect16 } from "react";
+import React34, { useState as useState23, useEffect as useEffect16 } from "react";
 function NumericEditor(props) {
   const {
     value,
@@ -13059,7 +13299,7 @@ function NumericEditor(props) {
     handleEditorKeyDown(e);
   };
   const displayValue = isFocused ? inputValue : inputValue ? `${prefix}${inputValue}${suffix}` : "";
-  return /* @__PURE__ */ React32.createElement("div", { className: "editor-container editor-numeric-container" }, /* @__PURE__ */ React32.createElement("div", { className: "editor-input-wrapper" }, prefix && !isFocused && /* @__PURE__ */ React32.createElement("span", { className: "editor-numeric-prefix" }, prefix), /* @__PURE__ */ React32.createElement(
+  return /* @__PURE__ */ React34.createElement("div", { className: "editor-container editor-numeric-container" }, /* @__PURE__ */ React34.createElement("div", { className: "editor-input-wrapper" }, prefix && !isFocused && /* @__PURE__ */ React34.createElement("span", { className: "editor-numeric-prefix" }, prefix), /* @__PURE__ */ React34.createElement(
     "input",
     {
       ref: inputRef,
@@ -13077,7 +13317,7 @@ function NumericEditor(props) {
       "aria-valuenow": value ?? void 0,
       autoComplete: "off"
     }
-  ), suffix && !isFocused && /* @__PURE__ */ React32.createElement("span", { className: "editor-numeric-suffix" }, suffix), showSteppers && /* @__PURE__ */ React32.createElement("div", { className: "editor-numeric-steppers" }, /* @__PURE__ */ React32.createElement(
+  ), suffix && !isFocused && /* @__PURE__ */ React34.createElement("span", { className: "editor-numeric-suffix" }, suffix), showSteppers && /* @__PURE__ */ React34.createElement("div", { className: "editor-numeric-steppers" }, /* @__PURE__ */ React34.createElement(
     "button",
     {
       type: "button",
@@ -13089,7 +13329,7 @@ function NumericEditor(props) {
       tabIndex: -1
     },
     "\u25B2"
-  ), /* @__PURE__ */ React32.createElement(
+  ), /* @__PURE__ */ React34.createElement(
     "button",
     {
       type: "button",
@@ -13101,12 +13341,12 @@ function NumericEditor(props) {
       tabIndex: -1
     },
     "\u25BC"
-  ))), (min !== void 0 || max !== void 0) && /* @__PURE__ */ React32.createElement("div", { className: "editor-numeric-range" }, min !== void 0 && /* @__PURE__ */ React32.createElement("span", null, "Min: ", min), max !== void 0 && /* @__PURE__ */ React32.createElement("span", null, "Max: ", max)));
+  ))), (min !== void 0 || max !== void 0) && /* @__PURE__ */ React34.createElement("div", { className: "editor-numeric-range" }, min !== void 0 && /* @__PURE__ */ React34.createElement("span", null, "Min: ", min), max !== void 0 && /* @__PURE__ */ React34.createElement("span", null, "Max: ", max)));
 }
 NumericEditor.displayName = "NumericEditor";
 
 // src/editors/MultiSelectEditor.tsx
-import React33, { useState as useState24, useRef as useRef18, useMemo as useMemo11 } from "react";
+import React35, { useState as useState24, useRef as useRef18, useMemo as useMemo11 } from "react";
 function MultiSelectEditor(props) {
   const {
     value = [],
@@ -13229,20 +13469,20 @@ function MultiSelectEditor(props) {
   };
   const visibleTags = selectedOptions.slice(0, maxTagCount);
   const collapsedCount = Math.max(0, selectedOptions.length - maxTagCount);
-  return /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React35.createElement(
     "div",
     {
       ref: containerRef,
       className: "editor-container editor-multiselect-container",
       onKeyDown: handleCombinedKeyDown
     },
-    /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React35.createElement(
       "div",
       {
         ref: tagContainerRef,
         className: "editor-input-wrapper editor-multiselect-wrapper"
       },
-      /* @__PURE__ */ React33.createElement("div", { className: "editor-multiselect-tags" }, visibleTags.map((option) => /* @__PURE__ */ React33.createElement("div", { key: option.value, className: "editor-tag" }, option.icon && /* @__PURE__ */ React33.createElement("span", { className: "editor-tag-icon" }, option.icon), /* @__PURE__ */ React33.createElement("span", { className: "editor-tag-label" }, option.label), /* @__PURE__ */ React33.createElement(
+      /* @__PURE__ */ React35.createElement("div", { className: "editor-multiselect-tags" }, visibleTags.map((option) => /* @__PURE__ */ React35.createElement("div", { key: option.value, className: "editor-tag" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-tag-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-tag-label" }, option.label), /* @__PURE__ */ React35.createElement(
         "button",
         {
           type: "button",
@@ -13252,8 +13492,8 @@ function MultiSelectEditor(props) {
           tabIndex: -1
         },
         "\xD7"
-      ))), collapsedCount > 0 && /* @__PURE__ */ React33.createElement("div", { className: "editor-tag editor-tag-collapsed" }, "+", collapsedCount)),
-      /* @__PURE__ */ React33.createElement(
+      ))), collapsedCount > 0 && /* @__PURE__ */ React35.createElement("div", { className: "editor-tag editor-tag-collapsed" }, "+", collapsedCount)),
+      /* @__PURE__ */ React35.createElement(
         "input",
         {
           ref: inputRef,
@@ -13272,9 +13512,9 @@ function MultiSelectEditor(props) {
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ React33.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
+      /* @__PURE__ */ React35.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
     ),
-    isOpen && /* @__PURE__ */ React33.createElement(
+    isOpen && /* @__PURE__ */ React35.createElement(
       "div",
       {
         ref: dropdownRef,
@@ -13284,9 +13524,9 @@ function MultiSelectEditor(props) {
         "aria-multiselectable": "true",
         style: { maxHeight: maxDropdownHeight }
       },
-      filteredOptions.length === 0 ? /* @__PURE__ */ React33.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
+      filteredOptions.length === 0 ? /* @__PURE__ */ React35.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
         const isSelected = selectedValues.includes(option.value);
-        return /* @__PURE__ */ React33.createElement(
+        return /* @__PURE__ */ React35.createElement(
           "div",
           {
             key: option.value,
@@ -13297,7 +13537,7 @@ function MultiSelectEditor(props) {
             onClick: () => handleToggleOption(option),
             onMouseEnter: () => !option.disabled && setFocusedIndex(index)
           },
-          /* @__PURE__ */ React33.createElement(
+          /* @__PURE__ */ React35.createElement(
             "input",
             {
               type: "checkbox",
@@ -13310,7 +13550,7 @@ function MultiSelectEditor(props) {
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ React33.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React33.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React33.createElement("span", { className: "editor-option-label" }, option.label))
+          /* @__PURE__ */ React35.createElement("div", { className: "editor-option-content" }, option.icon && /* @__PURE__ */ React35.createElement("span", { className: "editor-option-icon" }, option.icon), /* @__PURE__ */ React35.createElement("span", { className: "editor-option-label" }, option.label))
         );
       })
     )
@@ -13319,7 +13559,7 @@ function MultiSelectEditor(props) {
 MultiSelectEditor.displayName = "MultiSelectEditor";
 
 // src/editors/MarkdownEditor.tsx
-import React34, { useState as useState25, useRef as useRef19, useMemo as useMemo12 } from "react";
+import React36, { useState as useState25, useRef as useRef19, useMemo as useMemo12 } from "react";
 function MarkdownEditor(props) {
   const {
     value = "",
@@ -13430,14 +13670,14 @@ function MarkdownEditor(props) {
   const previewHtml = useMemo12(() => {
     return renderMarkdownPreview(internalValue);
   }, [internalValue]);
-  return /* @__PURE__ */ React34.createElement(
+  return /* @__PURE__ */ React36.createElement(
     "div",
     {
       ref: containerRef,
       className: "editor-container editor-markdown-container",
       style: { minHeight }
     },
-    /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-toolbar" }, /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-toolbar-group" }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-toolbar" }, /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-toolbar-group" }, /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13456,8 +13696,8 @@ function MarkdownEditor(props) {
         title: "Bold (Ctrl+B)",
         "aria-label": "Bold"
       },
-      /* @__PURE__ */ React34.createElement("strong", null, "B")
-    ), /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React36.createElement("strong", null, "B")
+    ), /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13476,8 +13716,8 @@ function MarkdownEditor(props) {
         title: "Italic (Ctrl+I)",
         "aria-label": "Italic"
       },
-      /* @__PURE__ */ React34.createElement("em", null, "I")
-    ), /* @__PURE__ */ React34.createElement(
+      /* @__PURE__ */ React36.createElement("em", null, "I")
+    ), /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13497,7 +13737,7 @@ function MarkdownEditor(props) {
         "aria-label": "Link"
       },
       "\u{1F517}"
-    )), /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-toolbar-group" }, /* @__PURE__ */ React34.createElement(
+    )), /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-toolbar-group" }, /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13509,7 +13749,7 @@ function MarkdownEditor(props) {
       },
       "\u{1F441}"
     ))),
-    /* @__PURE__ */ React34.createElement("div", { className: `editor-markdown-content ${showPreviewPanel ? "split" : ""}` }, /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-editor" }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement("div", { className: `editor-markdown-content ${showPreviewPanel ? "split" : ""}` }, /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-editor" }, /* @__PURE__ */ React36.createElement(
       "textarea",
       {
         ref: textareaRef,
@@ -13523,14 +13763,14 @@ function MarkdownEditor(props) {
         "aria-label": "Markdown editor",
         style: { maxHeight }
       }
-    ), /* @__PURE__ */ React34.createElement("div", { className: `editor-markdown-char-count ${charCountClass}` }, charCount, maxLength && ` / ${maxLength}`)), showPreviewPanel && /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-preview" }, /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-preview-label" }, "Preview"), /* @__PURE__ */ React34.createElement(
+    ), /* @__PURE__ */ React36.createElement("div", { className: `editor-markdown-char-count ${charCountClass}` }, charCount, maxLength && ` / ${maxLength}`)), showPreviewPanel && /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-preview" }, /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-preview-label" }, "Preview"), /* @__PURE__ */ React36.createElement(
       "div",
       {
         className: "editor-markdown-preview-content",
         dangerouslySetInnerHTML: { __html: previewHtml }
       }
     ))),
-    /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-footer" }, /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-hint" }, /* @__PURE__ */ React34.createElement("kbd", null, "Ctrl+Enter"), " to save \u2022 ", /* @__PURE__ */ React34.createElement("kbd", null, "Esc"), " to cancel"), /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-actions" }, /* @__PURE__ */ React34.createElement(
+    /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-footer" }, /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-hint" }, /* @__PURE__ */ React36.createElement("kbd", null, "Ctrl+Enter"), " to save \u2022 ", /* @__PURE__ */ React36.createElement("kbd", null, "Esc"), " to cancel"), /* @__PURE__ */ React36.createElement("div", { className: "editor-markdown-actions" }, /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13538,7 +13778,7 @@ function MarkdownEditor(props) {
         onClick: onCancel
       },
       "Cancel"
-    ), /* @__PURE__ */ React34.createElement(
+    ), /* @__PURE__ */ React36.createElement(
       "button",
       {
         type: "button",
@@ -13736,7 +13976,7 @@ function updateChartTheme(config, newTheme) {
 }
 
 // src/charts/QuickChart.tsx
-import React35, { useRef as useRef20 } from "react";
+import React37, { useRef as useRef20 } from "react";
 import {
   LineChart,
   Line,
@@ -13822,7 +14062,7 @@ var QuickChart = ({
     };
     switch (config.type) {
       case "line":
-        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(LineChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+        return /* @__PURE__ */ React37.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React37.createElement(LineChart, { ...commonProps }, /* @__PURE__ */ React37.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React37.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React37.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React37.createElement(
           Tooltip2,
           {
             contentStyle: {
@@ -13831,7 +14071,7 @@ var QuickChart = ({
               color: theme === "dark" ? "#fff" : "#000"
             }
           }
-        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(
+        ), /* @__PURE__ */ React37.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React37.createElement(
           Line,
           {
             key: series.name,
@@ -13844,7 +14084,7 @@ var QuickChart = ({
           }
         ))));
       case "bar":
-        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(BarChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+        return /* @__PURE__ */ React37.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React37.createElement(BarChart, { ...commonProps }, /* @__PURE__ */ React37.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React37.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React37.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React37.createElement(
           Tooltip2,
           {
             contentStyle: {
@@ -13853,9 +14093,9 @@ var QuickChart = ({
               color: theme === "dark" ? "#fff" : "#000"
             }
           }
-        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(Bar, { key: series.name, dataKey: series.name, fill: series.color }))));
+        ), /* @__PURE__ */ React37.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React37.createElement(Bar, { key: series.name, dataKey: series.name, fill: series.color }))));
       case "area":
-        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(AreaChart, { ...commonProps }, /* @__PURE__ */ React35.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React35.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React35.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React35.createElement(
+        return /* @__PURE__ */ React37.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React37.createElement(AreaChart, { ...commonProps }, /* @__PURE__ */ React37.createElement(CartesianGrid, { ...gridProps }), /* @__PURE__ */ React37.createElement(XAxis, { dataKey: "name", ...axisProps }), /* @__PURE__ */ React37.createElement(YAxis, { ...axisProps }), /* @__PURE__ */ React37.createElement(
           Tooltip2,
           {
             contentStyle: {
@@ -13864,7 +14104,7 @@ var QuickChart = ({
               color: theme === "dark" ? "#fff" : "#000"
             }
           }
-        ), /* @__PURE__ */ React35.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React35.createElement(
+        ), /* @__PURE__ */ React37.createElement(Legend, null), config.series.map((series) => /* @__PURE__ */ React37.createElement(
           Area,
           {
             key: series.name,
@@ -13876,7 +14116,7 @@ var QuickChart = ({
           }
         ))));
       case "pie":
-        return /* @__PURE__ */ React35.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React35.createElement(PieChart, null, /* @__PURE__ */ React35.createElement(
+        return /* @__PURE__ */ React37.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React37.createElement(PieChart, null, /* @__PURE__ */ React37.createElement(
           Pie,
           {
             data: pieData,
@@ -13888,14 +14128,14 @@ var QuickChart = ({
             fill: "#8884d8",
             dataKey: "value"
           },
-          pieData.map((_, index) => /* @__PURE__ */ React35.createElement(
+          pieData.map((_, index) => /* @__PURE__ */ React37.createElement(
             Cell,
             {
               key: `cell-${index}`,
               fill: DEFAULT_COLORS[index % DEFAULT_COLORS.length]
             }
           ))
-        ), /* @__PURE__ */ React35.createElement(
+        ), /* @__PURE__ */ React37.createElement(
           Tooltip2,
           {
             contentStyle: {
@@ -13904,19 +14144,19 @@ var QuickChart = ({
               color: theme === "dark" ? "#fff" : "#000"
             }
           }
-        ), /* @__PURE__ */ React35.createElement(Legend, null)));
+        ), /* @__PURE__ */ React37.createElement(Legend, null)));
       default:
-        return /* @__PURE__ */ React35.createElement("div", null, "Unsupported chart type");
+        return /* @__PURE__ */ React37.createElement("div", null, "Unsupported chart type");
     }
   };
-  return /* @__PURE__ */ React35.createElement(
+  return /* @__PURE__ */ React37.createElement(
     "div",
     {
       ref: chartRef,
       className: `quick-chart quick-chart--${theme}`,
       style: { width, height }
     },
-    /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__header" }, /* @__PURE__ */ React35.createElement("h3", { className: "quick-chart__title" }, config.title), /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__controls" }, allowTypeSwitch && onChangeType && /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__type-selector" }, ["line", "bar", "area", "pie"].map((type) => /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React37.createElement("div", { className: "quick-chart__header" }, /* @__PURE__ */ React37.createElement("h3", { className: "quick-chart__title" }, config.title), /* @__PURE__ */ React37.createElement("div", { className: "quick-chart__controls" }, allowTypeSwitch && onChangeType && /* @__PURE__ */ React37.createElement("div", { className: "quick-chart__type-selector" }, ["line", "bar", "area", "pie"].map((type) => /* @__PURE__ */ React37.createElement(
       "button",
       {
         key: type,
@@ -13926,7 +14166,7 @@ var QuickChart = ({
         "aria-label": `Switch to ${type} chart`
       },
       chartTypeIcon(type)
-    ))), allowThemeSwitch && onToggleTheme && /* @__PURE__ */ React35.createElement(
+    ))), allowThemeSwitch && onToggleTheme && /* @__PURE__ */ React37.createElement(
       "button",
       {
         className: "quick-chart__btn",
@@ -13935,7 +14175,7 @@ var QuickChart = ({
         "aria-label": "Toggle theme"
       },
       theme === "dark" ? "\u2600\uFE0F" : "\u{1F319}"
-    ), /* @__PURE__ */ React35.createElement(
+    ), /* @__PURE__ */ React37.createElement(
       "button",
       {
         className: "quick-chart__btn",
@@ -13944,7 +14184,7 @@ var QuickChart = ({
         "aria-label": "Export chart as PNG"
       },
       "\u{1F4E5}"
-    ), onClose && /* @__PURE__ */ React35.createElement(
+    ), onClose && /* @__PURE__ */ React37.createElement(
       "button",
       {
         className: "quick-chart__btn quick-chart__close",
@@ -13954,12 +14194,12 @@ var QuickChart = ({
       },
       "\xD7"
     ))),
-    /* @__PURE__ */ React35.createElement("div", { className: "quick-chart__body" }, renderChart())
+    /* @__PURE__ */ React37.createElement("div", { className: "quick-chart__body" }, renderChart())
   );
 };
 
 // src/charts/ChartOverlay.tsx
-import React36, { useEffect as useEffect17, useRef as useRef21, useState as useState26 } from "react";
+import React38, { useEffect as useEffect17, useRef as useRef21, useState as useState26 } from "react";
 var ChartOverlay = ({
   config,
   onClose,
@@ -14050,7 +14290,7 @@ var ChartOverlay = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
-  return /* @__PURE__ */ React36.createElement("div", { className: "chart-overlay" }, /* @__PURE__ */ React36.createElement("div", { className: "chart-overlay__backdrop", onClick: onClose }), /* @__PURE__ */ React36.createElement(
+  return /* @__PURE__ */ React38.createElement("div", { className: "chart-overlay" }, /* @__PURE__ */ React38.createElement("div", { className: "chart-overlay__backdrop", onClick: onClose }), /* @__PURE__ */ React38.createElement(
     "div",
     {
       ref: overlayRef,
@@ -14063,7 +14303,7 @@ var ChartOverlay = ({
       },
       onMouseDown: handleMouseDown
     },
-    /* @__PURE__ */ React36.createElement(
+    /* @__PURE__ */ React38.createElement(
       QuickChart,
       {
         config,