react-open-source-grid 1.6.4 → 1.6.6

package/dist/lib/index.js

@@ -2356,7 +2356,16 @@ var GridBody = ({
             onKeyDown: (e) => handleKeyDown(e, rowIndex, columnIndex),
             tabIndex: isCellFocused ? 0 : -1
           },
-          isEditing ? /* @__PURE__ */ React6.createElement(
+          isEditing ? column.editor ? column.editor({
+            value: editState.value,
+            row,
+            column,
+            onChange: handleEditChange,
+            onCommit: handleEditComplete,
+            onCancel: () => dispatch({ type: "END_EDIT" }),
+            autoFocus: true,
+            ...column.editorParams
+          }) : /* @__PURE__ */ React6.createElement(
             "input",
             {
               ref: editInputRef,
@@ -5027,7 +5036,7 @@ var LayoutPresetsManager = ({
       setLoading(false);
     }
   };
-  const formatDate = (timestamp) => {
+  const formatDate2 = (timestamp) => {
     return new Date(timestamp).toLocaleString();
   };
   return /* @__PURE__ */ React14.createElement("div", { className: "relative inline-block" }, /* @__PURE__ */ React14.createElement(
@@ -5141,7 +5150,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: ", formatDate(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__ */ 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(
       "button",
       {
         onClick: (e) => handleUpdatePreset(preset, e),
@@ -8043,6 +8052,195 @@ var GridApiImpl = class {
   }
 };
 
+// src/components/DataGrid/pivotEngine.ts
+var AGGREGATORS = {
+  sum: (values) => values.reduce((acc, val) => acc + val, 0),
+  count: (values) => values.length,
+  avg: (values) => values.length > 0 ? values.reduce((acc, val) => acc + val, 0) / values.length : 0,
+  min: (values) => values.length > 0 ? Math.min(...values) : 0,
+  max: (values) => values.length > 0 ? Math.max(...values) : 0
+};
+function getUniqueValues(data, column) {
+  const uniqueSet = /* @__PURE__ */ new Set();
+  data.forEach((row) => {
+    const value = row[column];
+    if (value !== null && value !== void 0) {
+      uniqueSet.add(String(value));
+    }
+  });
+  return Array.from(uniqueSet).sort();
+}
+function getAggregatorFn(aggregator) {
+  if (typeof aggregator === "function") {
+    return aggregator;
+  }
+  return AGGREGATORS[aggregator] || AGGREGATORS.sum;
+}
+function toNumber(value) {
+  if (typeof value === "number") return value;
+  if (typeof value === "string") {
+    const num = parseFloat(value);
+    return isNaN(num) ? 0 : num;
+  }
+  return 0;
+}
+function buildPivot(data, config) {
+  const {
+    pivotColumn,
+    valueColumn,
+    rowGroupColumn,
+    aggregator,
+    showTotals = false,
+    showGrandTotal = false
+  } = config;
+  if (!data || data.length === 0) {
+    return {
+      columns: [],
+      rows: [],
+      pivotValues: []
+    };
+  }
+  const pivotValues = getUniqueValues(data, pivotColumn);
+  const rowGroupValues = getUniqueValues(data, rowGroupColumn);
+  const aggregatorFn = getAggregatorFn(aggregator);
+  const groupedData = /* @__PURE__ */ new Map();
+  rowGroupValues.forEach((rowValue) => {
+    const pivotMap = /* @__PURE__ */ new Map();
+    pivotValues.forEach((pivotValue) => {
+      pivotMap.set(pivotValue, []);
+    });
+    groupedData.set(rowValue, pivotMap);
+  });
+  data.forEach((row) => {
+    const rowValue = String(row[rowGroupColumn] ?? "");
+    const pivotValue = String(row[pivotColumn] ?? "");
+    const value = toNumber(row[valueColumn]);
+    if (groupedData.has(rowValue)) {
+      const pivotMap = groupedData.get(rowValue);
+      if (pivotMap.has(pivotValue)) {
+        pivotMap.get(pivotValue).push(value);
+      }
+    }
+  });
+  const columns = [
+    {
+      field: rowGroupColumn,
+      headerName: formatHeaderName(rowGroupColumn),
+      width: 180,
+      sortable: true,
+      filterable: true,
+      isPivotColumn: false
+    }
+  ];
+  pivotValues.forEach((pivotValue) => {
+    columns.push({
+      field: pivotValue,
+      headerName: pivotValue,
+      width: 120,
+      sortable: true,
+      filterable: true,
+      isPivotColumn: true
+    });
+  });
+  if (showGrandTotal) {
+    columns.push({
+      field: "__grandTotal",
+      headerName: "Grand Total",
+      width: 120,
+      sortable: true,
+      filterable: false,
+      isTotalColumn: true
+    });
+  }
+  const rows = [];
+  rowGroupValues.forEach((rowValue) => {
+    const pivotMap = groupedData.get(rowValue);
+    const row = {
+      [rowGroupColumn]: rowValue,
+      __id: rowValue
+      // Add unique ID for grid
+    };
+    let grandTotal = 0;
+    pivotValues.forEach((pivotValue) => {
+      const values = pivotMap.get(pivotValue);
+      const aggregatedValue = aggregatorFn(values);
+      row[pivotValue] = aggregatedValue;
+      grandTotal += aggregatedValue;
+    });
+    if (showGrandTotal) {
+      row["__grandTotal"] = grandTotal;
+    }
+    rows.push(row);
+  });
+  let totalsRow;
+  if (showTotals) {
+    totalsRow = {
+      [rowGroupColumn]: "Total",
+      __id: "__totals",
+      __isTotal: true
+    };
+    let overallGrandTotal = 0;
+    pivotValues.forEach((pivotValue) => {
+      const allValues = [];
+      groupedData.forEach((pivotMap) => {
+        const values = pivotMap.get(pivotValue);
+        allValues.push(...values);
+      });
+      const total = aggregatorFn(allValues);
+      totalsRow[pivotValue] = total;
+      overallGrandTotal += total;
+    });
+    if (showGrandTotal) {
+      totalsRow["__grandTotal"] = overallGrandTotal;
+    }
+  }
+  return {
+    columns,
+    rows,
+    pivotValues,
+    totalsRow
+  };
+}
+function formatHeaderName(field) {
+  return field.split(/(?=[A-Z])|_|-/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function exportPivotToCSV(pivotResult) {
+  const { columns, rows, totalsRow } = pivotResult;
+  const headers = columns.map((col) => col.headerName).join(",");
+  const dataRows = rows.map((row) => {
+    return columns.map((col) => {
+      const value = row[col.field];
+      if (typeof value === "string" && value.includes(",")) {
+        return `"${value}"`;
+      }
+      return value ?? "";
+    }).join(",");
+  });
+  if (totalsRow) {
+    const totalRow = columns.map((col) => {
+      const value = totalsRow[col.field];
+      if (typeof value === "string" && value.includes(",")) {
+        return `"${value}"`;
+      }
+      return value ?? "";
+    }).join(",");
+    dataRows.push(totalRow);
+  }
+  return [headers, ...dataRows].join("\n");
+}
+function downloadCSV(csvContent, filename = "pivot-table.csv") {
+  const blob = new Blob([csvContent], { type: "text/csv;charset=utf-8;" });
+  const link = document.createElement("a");
+  const url = URL.createObjectURL(blob);
+  link.setAttribute("href", url);
+  link.setAttribute("download", filename);
+  link.style.visibility = "hidden";
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+}
+
 // src/components/DataGrid/DataGrid.tsx
 var DataGrid = forwardRef(({
   columns,
@@ -8057,6 +8255,7 @@ var DataGrid = forwardRef(({
   rowPinConfig,
   contextMenuConfig,
   tooltipConfig,
+  pivotConfig,
   tableId,
   theme: _theme = "quartz",
   densityMode: _densityMode = "normal",
@@ -8077,6 +8276,42 @@ var DataGrid = forwardRef(({
   );
   const [internalRows, setInternalRows] = useState14(null);
   const activeRows = internalRows !== null ? internalRows : rows;
+  const { pivotedData, effectiveColumns } = useMemo4(() => {
+    if (!pivotConfig) {
+      return { pivotedData: activeRows, effectiveColumns: columns };
+    }
+    const pivotResult = buildPivot(activeRows, pivotConfig);
+    console.log("Pivot Result:", {
+      columnsCount: pivotResult.columns.length,
+      columns: pivotResult.columns.map((c) => c.field),
+      rowsCount: pivotResult.rows.length,
+      sampleRow: pivotResult.rows[0]
+    });
+    const pivotColumns = pivotResult.columns.map((col) => ({
+      field: col.field,
+      headerName: col.headerName,
+      width: col.width || 120,
+      sortable: col.sortable !== false,
+      filterable: col.filterable !== false,
+      editable: false,
+      renderCell: col.isTotalColumn || col.isPivotColumn ? (row) => {
+        const value = row[col.field];
+        if (typeof value === "number") {
+          return /* @__PURE__ */ React20.createElement("span", { style: {
+            fontWeight: col.isTotalColumn ? "700" : "600",
+            color: col.isTotalColumn ? "#0f766e" : "#475569"
+          } }, value.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));
+        }
+        return value;
+      } : void 0
+    }));
+    const allRows = pivotResult.totalsRow ? [...pivotResult.rows, pivotResult.totalsRow] : pivotResult.rows;
+    const rowsWithId = allRows.map((row, index) => ({
+      ...row,
+      id: row.__id || row.id || `pivot-row-${index}`
+    }));
+    return { pivotedData: rowsWithId, effectiveColumns: pivotColumns };
+  }, [activeRows, columns, pivotConfig]);
   const rowsRef = useRef10(rows);
   useEffect9(() => {
     if (rows !== rowsRef.current) {
@@ -8179,8 +8414,8 @@ var DataGrid = forwardRef(({
       gridApiRef.current = new GridApiImpl(
         state,
         dispatch,
-        columns,
-        activeRows,
+        effectiveColumns,
+        pivotedData,
         containerRef,
         persistenceManager,
         setInternalRows
@@ -8190,24 +8425,24 @@ var DataGrid = forwardRef(({
   useEffect9(() => {
     if (gridApiRef.current && !gridApiRef.current.isDestroyed()) {
       gridApiRef.current.updateState(state);
-      gridApiRef.current.updateData(columns, activeRows);
+      gridApiRef.current.updateData(effectiveColumns, pivotedData);
       gridApiRef.current.updateCallbacks(setInternalRows);
     }
-  }, [state, columns, activeRows, setInternalRows]);
+  }, [state, effectiveColumns, pivotedData, setInternalRows]);
   useImperativeHandle(ref, () => {
     if (!gridApiRef.current || gridApiRef.current.isDestroyed()) {
       gridApiRef.current = new GridApiImpl(
         state,
         dispatch,
-        columns,
-        activeRows,
+        effectiveColumns,
+        pivotedData,
         containerRef,
         persistenceManager,
         setInternalRows
       );
     }
     return gridApiRef.current;
-  }, [state, columns, activeRows, persistenceManager]);
+  }, [state, effectiveColumns, pivotedData, persistenceManager]);
   const onGridReadyCalledRef = useRef10(false);
   const onGridReadyCallbackRef = useRef10(onGridReady);
   useEffect9(() => {
@@ -8288,9 +8523,11 @@ var DataGrid = forwardRef(({
     ...middleColumns,
     ...pinnedRightFields
   ];
+  console.log("Display column order:", displayColumnOrder, "from state.columnOrder:", state.columnOrder);
   useEffect9(() => {
-    dispatch({ type: "RESET_COLUMNS", payload: columns });
-  }, [columns]);
+    console.log("Dispatching RESET_COLUMNS with", effectiveColumns.length, "columns:", effectiveColumns.map((c) => c.field));
+    dispatch({ type: "RESET_COLUMNS", payload: effectiveColumns });
+  }, [effectiveColumns]);
   useEffect9(() => {
     if (onSelectionChange) {
       onSelectionChange(Array.from(state.selection.selectedRows));
@@ -8306,17 +8543,17 @@ var DataGrid = forwardRef(({
   }, [state.pinnedRowsTop, state.pinnedRowsBottom]);
   useEffect9(() => {
     if (state.sortConfig.field) {
-      const column = columns.find((c) => c.field === state.sortConfig.field);
+      const column = effectiveColumns.find((c) => c.field === state.sortConfig.field);
       if (column) {
         announceSorting(column.headerName, state.sortConfig.direction);
       }
     }
-  }, [state.sortConfig.field, state.sortConfig.direction]);
+  }, [state.sortConfig.field, state.sortConfig.direction, effectiveColumns]);
   const sortedRows = useMemo4(() => {
     if (!state.sortConfig.field || !state.sortConfig.direction) {
-      return activeRows;
+      return pivotedData;
     }
-    const sorted = [...activeRows].sort((a, b) => {
+    const sorted = [...pivotedData].sort((a, b) => {
       const aValue = a[state.sortConfig.field];
       const bValue = b[state.sortConfig.field];
       if (aValue == null && bValue == null) return 0;
@@ -8333,7 +8570,7 @@ var DataGrid = forwardRef(({
       sorted.reverse();
     }
     return sorted;
-  }, [activeRows, state.sortConfig]);
+  }, [pivotedData, state.sortConfig]);
   const filteredRows = useMemo4(() => {
     if (!hasActiveFilters(state.filterConfig)) {
       return sortedRows;
@@ -8479,7 +8716,7 @@ var DataGrid = forwardRef(({
     /* @__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(
       ColumnChooser,
       {
-        columns,
+        columns: effectiveColumns,
         columnOrder: state.columnOrder,
         hiddenColumns: state.hiddenColumns,
         onToggleVisibility: (field) => dispatch({ type: "TOGGLE_COLUMN_VISIBILITY", payload: field }),
@@ -8489,7 +8726,7 @@ var DataGrid = forwardRef(({
     ), /* @__PURE__ */ React20.createElement(
       ExportMenu,
       {
-        columns,
+        columns: effectiveColumns,
         fullDataset: rows,
         filteredData: filteredRows.filter((r) => !("isGroup" in r)),
         selectedRows: state.selection.selectedRows,
@@ -8507,7 +8744,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement(
       GroupByPanel,
       {
-        columns,
+        columns: effectiveColumns,
         groupBy: state.groupBy,
         dispatch
       }
@@ -8515,7 +8752,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement("div", { role: "rowgroup", style: { position: "sticky", top: 0, zIndex: 20, width: "100%" } }, /* @__PURE__ */ React20.createElement(
       GridHeader,
       {
-        columns,
+        columns: effectiveColumns,
         columnOrder: state.columnOrder,
         displayColumnOrder,
         columnWidths: state.columnWidths,
@@ -8534,7 +8771,7 @@ var DataGrid = forwardRef(({
     ), /* @__PURE__ */ React20.createElement(
       ColumnFilters,
       {
-        columns,
+        columns: effectiveColumns,
         displayColumnOrder,
         columnWidths: state.columnWidths,
         filterConfig: state.filterConfig,
@@ -8547,7 +8784,7 @@ var DataGrid = forwardRef(({
     /* @__PURE__ */ React20.createElement(
       GridBody,
       {
-        columns,
+        columns: effectiveColumns,
         rows: (virtualScrollConfig == null ? void 0 : virtualScrollConfig.enabled) ? unpinnedRows : paginatedRows,
         pinnedRowsTop: pinnedRowsTopData,
         pinnedRowsBottom: pinnedRowsBottomData,
@@ -8587,7 +8824,7 @@ var DataGrid = forwardRef(({
     (footerConfig == null ? void 0 : footerConfig.show) && footerConfig.aggregates && /* @__PURE__ */ React20.createElement(
       GridFooter,
       {
-        columns,
+        columns: effectiveColumns,
         displayColumnOrder,
         columnWidths: state.columnWidths,
         aggregates: globalAggregates,
@@ -11752,6 +11989,1532 @@ function createMockFeed(config) {
     createConnection: () => createMockWebSocket(feed)
   };
 }
+
+// src/components/DataGrid/PivotToolbar.tsx
+import React29, { useState as useState20, useMemo as useMemo8 } from "react";
+var AGGREGATOR_OPTIONS = [
+  { value: "sum", label: "Sum" },
+  { value: "avg", label: "Average" },
+  { value: "count", label: "Count" },
+  { value: "min", label: "Minimum" },
+  { value: "max", label: "Maximum" }
+];
+var PivotToolbar = ({
+  columns,
+  pivotConfig,
+  onPivotToggle,
+  onConfigChange,
+  isPivotMode = false,
+  style,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = useState20(isPivotMode);
+  const [rowGroupColumn, setRowGroupColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.rowGroupColumn) || "");
+  const [pivotColumn, setPivotColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.pivotColumn) || "");
+  const [valueColumn, setValueColumn] = useState20((pivotConfig == null ? void 0 : pivotConfig.valueColumn) || "");
+  const [aggregator, setAggregator] = useState20(
+    (pivotConfig == null ? void 0 : pivotConfig.aggregator) || "sum"
+  );
+  const [showTotals, setShowTotals] = useState20((pivotConfig == null ? void 0 : pivotConfig.showTotals) ?? true);
+  const [showGrandTotal, setShowGrandTotal] = useState20((pivotConfig == null ? void 0 : pivotConfig.showGrandTotal) ?? true);
+  const isConfigValid = useMemo8(() => {
+    return rowGroupColumn && pivotColumn && valueColumn;
+  }, [rowGroupColumn, pivotColumn, valueColumn]);
+  const handleApply = () => {
+    if (!isConfigValid) return;
+    const config = {
+      rowGroupColumn,
+      pivotColumn,
+      valueColumn,
+      aggregator,
+      showTotals,
+      showGrandTotal
+    };
+    onConfigChange(config);
+    onPivotToggle(true);
+  };
+  const handleClear = () => {
+    setRowGroupColumn("");
+    setPivotColumn("");
+    setValueColumn("");
+    setAggregator("sum");
+    setShowTotals(true);
+    setShowGrandTotal(true);
+    onConfigChange(null);
+    onPivotToggle(false);
+    setIsExpanded(false);
+  };
+  const handleToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  return /* @__PURE__ */ React29.createElement(
+    "div",
+    {
+      className,
+      style: {
+        backgroundColor: "#f8fafc",
+        border: "1px solid #e2e8f0",
+        borderRadius: "8px",
+        padding: "12px",
+        ...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: {
+      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(
+      "button",
+      {
+        onClick: handleClear,
+        style: {
+          padding: "6px 12px",
+          fontSize: "13px",
+          fontWeight: "500",
+          color: "#dc2626",
+          backgroundColor: "#fee2e2",
+          border: "1px solid #fecaca",
+          borderRadius: "6px",
+          cursor: "pointer",
+          transition: "all 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#fecaca";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "#fee2e2";
+        }
+      },
+      "Clear Pivot"
+    ), /* @__PURE__ */ React29.createElement(
+      "button",
+      {
+        onClick: handleToggle,
+        style: {
+          padding: "6px 10px",
+          fontSize: "13px",
+          color: "#64748b",
+          backgroundColor: "white",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          cursor: "pointer",
+          transition: "all 0.15s"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.backgroundColor = "#f1f5f9";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.backgroundColor = "white";
+        }
+      },
+      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(
+      "select",
+      {
+        value: rowGroupColumn,
+        onChange: (e) => setRowGroupColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          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(
+      "select",
+      {
+        value: pivotColumn,
+        onChange: (e) => setPivotColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          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(
+      "select",
+      {
+        value: valueColumn,
+        onChange: (e) => setValueColumn(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          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(
+      "select",
+      {
+        value: aggregator,
+        onChange: (e) => setAggregator(e.target.value),
+        style: {
+          width: "100%",
+          padding: "8px",
+          fontSize: "13px",
+          border: "1px solid #cbd5e1",
+          borderRadius: "6px",
+          backgroundColor: "white",
+          color: "#1e293b",
+          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(
+      "input",
+      {
+        type: "checkbox",
+        checked: showTotals,
+        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(
+      "input",
+      {
+        type: "checkbox",
+        checked: showGrandTotal,
+        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(
+      "button",
+      {
+        onClick: handleApply,
+        disabled: !isConfigValid,
+        style: {
+          width: "100%",
+          padding: "10px",
+          fontSize: "14px",
+          fontWeight: "600",
+          color: "white",
+          backgroundColor: isConfigValid ? "#2563eb" : "#94a3b8",
+          border: "none",
+          borderRadius: "6px",
+          cursor: isConfigValid ? "pointer" : "not-allowed",
+          transition: "all 0.15s",
+          boxShadow: isConfigValid ? "0 2px 4px rgba(37, 99, 235, 0.2)" : "none"
+        },
+        onMouseEnter: (e) => {
+          if (isConfigValid) {
+            e.currentTarget.style.backgroundColor = "#1d4ed8";
+          }
+        },
+        onMouseLeave: (e) => {
+          if (isConfigValid) {
+            e.currentTarget.style.backgroundColor = "#2563eb";
+          }
+        }
+      },
+      "Apply Pivot"
+    ))),
+    isExpanded && /* @__PURE__ */ React29.createElement("div", { style: {
+      marginTop: "12px",
+      padding: "10px",
+      backgroundColor: "#eff6ff",
+      border: "1px solid #bfdbfe",
+      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.")
+  );
+};
+
+// src/editors/editorUtils.ts
+import { useEffect as useEffect14, useRef as useRef15, useCallback as useCallback11 } from "react";
+function useEditorKeyboardNavigation(handlers, config = {}) {
+  const {
+    commitOnEnter = true,
+    cancelOnEscape = true,
+    commitOnTab = true,
+    preventDefault = true,
+    stopPropagation = true
+  } = config;
+  const handleKeyDown = useCallback11(
+    (event) => {
+      let handled = false;
+      switch (event.key) {
+        case "Enter":
+          if (commitOnEnter && handlers.onEnter) {
+            handlers.onEnter();
+            handled = true;
+          }
+          break;
+        case "Escape":
+          if (cancelOnEscape && handlers.onEscape) {
+            handlers.onEscape();
+            handled = true;
+          }
+          break;
+        case "Tab":
+          if (commitOnTab && handlers.onTab) {
+            handlers.onTab(event.shiftKey);
+            handled = true;
+          }
+          break;
+        case "ArrowUp":
+          if (handlers.onArrowUp) {
+            handlers.onArrowUp();
+            handled = true;
+          }
+          break;
+        case "ArrowDown":
+          if (handlers.onArrowDown) {
+            handlers.onArrowDown();
+            handled = true;
+          }
+          break;
+      }
+      if (handled) {
+        if (preventDefault) {
+          event.preventDefault();
+        }
+        if (stopPropagation) {
+          event.stopPropagation();
+        }
+      }
+    },
+    [
+      handlers,
+      commitOnEnter,
+      cancelOnEscape,
+      commitOnTab,
+      preventDefault,
+      stopPropagation
+    ]
+  );
+  return { handleKeyDown };
+}
+function useEditorAutoFocus(autoFocus = true, selectAll = false) {
+  const elementRef = useRef15(null);
+  useEffect14(() => {
+    if (autoFocus && elementRef.current) {
+      elementRef.current.focus();
+      if (selectAll && elementRef.current instanceof HTMLInputElement) {
+        elementRef.current.select();
+      }
+    }
+  }, [autoFocus, selectAll]);
+  return elementRef;
+}
+function useEditorClickOutside(ref, onClickOutside, enabled = true) {
+  useEffect14(() => {
+    if (!enabled) return;
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        onClickOutside();
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [ref, onClickOutside, enabled]);
+}
+function usePopupPosition(anchorRef, popupRef, isOpen, placement = "auto") {
+  useEffect14(() => {
+    if (!isOpen || !anchorRef.current || !popupRef.current) return;
+    const anchor = anchorRef.current;
+    const popup = popupRef.current;
+    const anchorRect = anchor.getBoundingClientRect();
+    const popupRect = popup.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    let top = 0;
+    let left = 0;
+    let actualPlacement = placement;
+    if (placement === "auto") {
+      const spaceBelow = viewportHeight - anchorRect.bottom;
+      const spaceAbove = anchorRect.top;
+      const spaceRight = viewportWidth - anchorRect.right;
+      const spaceLeft = anchorRect.left;
+      if (spaceBelow >= popupRect.height || spaceBelow >= spaceAbove) {
+        actualPlacement = "bottom";
+      } else if (spaceAbove >= popupRect.height) {
+        actualPlacement = "top";
+      } else if (spaceRight >= popupRect.width) {
+        actualPlacement = "right";
+      } else if (spaceLeft >= popupRect.width) {
+        actualPlacement = "left";
+      } else {
+        actualPlacement = "bottom";
+      }
+    }
+    switch (actualPlacement) {
+      case "bottom":
+        top = anchorRect.bottom + window.scrollY;
+        left = anchorRect.left + window.scrollX;
+        break;
+      case "top":
+        top = anchorRect.top + window.scrollY - popupRect.height;
+        left = anchorRect.left + window.scrollX;
+        break;
+      case "right":
+        top = anchorRect.top + window.scrollY;
+        left = anchorRect.right + window.scrollX;
+        break;
+      case "left":
+        top = anchorRect.top + window.scrollY;
+        left = anchorRect.left + window.scrollX - popupRect.width;
+        break;
+    }
+    const margin = 8;
+    if (left + popupRect.width > viewportWidth) {
+      left = viewportWidth - popupRect.width - margin;
+    }
+    if (left < margin) {
+      left = margin;
+    }
+    if (top + popupRect.height > viewportHeight + window.scrollY) {
+      top = viewportHeight + window.scrollY - popupRect.height - margin;
+    }
+    if (top < window.scrollY + margin) {
+      top = window.scrollY + margin;
+    }
+    popup.style.top = `${top}px`;
+    popup.style.left = `${left}px`;
+    popup.style.minWidth = `${anchorRect.width}px`;
+  }, [isOpen, anchorRef, popupRef, placement]);
+}
+function debounce2(func, wait) {
+  let timeout = null;
+  return function executedFunction(...args) {
+    const later = () => {
+      timeout = null;
+      func(...args);
+    };
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(later, wait);
+  };
+}
+function formatNumber(value, decimals = 0, thousandsSeparator = ",", decimalSeparator = ".") {
+  const fixed = value.toFixed(decimals);
+  const [integerPart, decimalPart] = fixed.split(".");
+  const formattedInteger = integerPart.replace(
+    /\B(?=(\d{3})+(?!\d))/g,
+    thousandsSeparator
+  );
+  return decimalPart ? `${formattedInteger}${decimalSeparator}${decimalPart}` : formattedInteger;
+}
+function parseFormattedNumber(value, thousandsSeparator = ",", decimalSeparator = ".") {
+  if (!value || typeof value !== "string") return null;
+  const normalized = value.replace(new RegExp(`\\${thousandsSeparator}`, "g"), "").replace(new RegExp(`\\${decimalSeparator}`), ".");
+  const parsed = parseFloat(normalized);
+  return isNaN(parsed) ? null : parsed;
+}
+function filterOptions(options, searchQuery) {
+  if (!searchQuery.trim()) return options;
+  const lowerQuery = searchQuery.toLowerCase();
+  return options.filter(
+    (option) => option.label.toLowerCase().includes(lowerQuery)
+  );
+}
+
+// src/editors/RichSelectEditor.tsx
+import React30, { useState as useState21, useRef as useRef16, useEffect as useEffect15, useMemo as useMemo9 } from "react";
+function RichSelectEditor(props) {
+  const {
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    autoFocus = true,
+    options,
+    placeholder = "Select...",
+    allowClear = false,
+    filterable = true,
+    renderOptionLabel,
+    maxDropdownHeight = 300
+  } = props;
+  const [isOpen] = useState21(true);
+  const [searchQuery, setSearchQuery] = useState21("");
+  const [focusedIndex, setFocusedIndex] = useState21(-1);
+  const containerRef = useRef16(null);
+  const inputRef = useEditorAutoFocus(autoFocus, true);
+  const dropdownRef = useRef16(null);
+  const optionRefs = useRef16([]);
+  const filteredOptions = useMemo9(
+    () => filterable ? filterOptions(options, searchQuery) : options,
+    [options, searchQuery, filterable]
+  );
+  const selectedOption = useMemo9(
+    () => options.find((opt) => opt.value === value),
+    [options, value]
+  );
+  useEffect15(() => {
+    if (selectedOption) {
+      const index = filteredOptions.findIndex(
+        (opt) => opt.value === selectedOption.value
+      );
+      if (index !== -1 && focusedIndex === -1) {
+        queueMicrotask(() => setFocusedIndex(index));
+      }
+    }
+  }, [selectedOption, filteredOptions]);
+  useEffect15(() => {
+    var _a;
+    if (focusedIndex >= 0 && optionRefs.current[focusedIndex]) {
+      (_a = optionRefs.current[focusedIndex]) == null ? void 0 : _a.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [focusedIndex]);
+  usePopupPosition(containerRef, dropdownRef, isOpen, "auto");
+  useEditorClickOutside(
+    containerRef,
+    () => {
+      if (isOpen) {
+        onCommit();
+      }
+    },
+    true
+  );
+  const handleSelectOption = (option) => {
+    if (!option.disabled) {
+      onChange(option.value);
+      onCommit();
+    }
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange(null);
+    setSearchQuery("");
+    setFocusedIndex(-1);
+  };
+  const handleArrowDown = () => {
+    setFocusedIndex((prev) => {
+      var _a;
+      let next = prev + 1;
+      while (next < filteredOptions.length && ((_a = filteredOptions[next]) == null ? void 0 : _a.disabled)) {
+        next++;
+      }
+      return next < filteredOptions.length ? next : prev;
+    });
+  };
+  const handleArrowUp = () => {
+    setFocusedIndex((prev) => {
+      var _a;
+      let next = prev - 1;
+      while (next >= 0 && ((_a = filteredOptions[next]) == null ? void 0 : _a.disabled)) {
+        next--;
+      }
+      return next >= 0 ? next : prev;
+    });
+  };
+  const handleEnter = () => {
+    if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+      const option = filteredOptions[focusedIndex];
+      if (option && !option.disabled) {
+        handleSelectOption(option);
+      }
+    } else {
+      onCommit();
+    }
+  };
+  const { handleKeyDown } = useEditorKeyboardNavigation(
+    {
+      onEnter: handleEnter,
+      onEscape: onCancel,
+      onArrowUp: handleArrowUp,
+      onArrowDown: handleArrowDown
+    },
+    {
+      commitOnTab: true,
+      commitOnBlur: false
+    }
+  );
+  const renderLabel = (option) => {
+    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__ */ React30.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: "editor-container editor-richselect-container",
+      onKeyDown: handleKeyDown
+    },
+    /* @__PURE__ */ React30.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React30.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "editor-input editor-richselect-input",
+        value: filterable ? searchQuery : (selectedOption == null ? void 0 : selectedOption.label) || "",
+        onChange: (e) => {
+          if (filterable) {
+            setSearchQuery(e.target.value);
+            setFocusedIndex(-1);
+          }
+        },
+        placeholder: (selectedOption == null ? void 0 : selectedOption.label) || placeholder,
+        "aria-label": "Select option",
+        "aria-expanded": isOpen,
+        "aria-autocomplete": "list",
+        "aria-controls": "richselect-dropdown",
+        autoComplete: "off"
+      }
+    ), /* @__PURE__ */ React30.createElement("div", { className: "editor-input-actions" }, allowClear && value !== null && value !== void 0 && /* @__PURE__ */ React30.createElement(
+      "button",
+      {
+        type: "button",
+        className: "editor-clear-btn",
+        onClick: handleClear,
+        "aria-label": "Clear selection",
+        tabIndex: -1
+      },
+      "\xD7"
+    ), /* @__PURE__ */ React30.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC"))),
+    isOpen && /* @__PURE__ */ React30.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        id: "richselect-dropdown",
+        className: "editor-dropdown",
+        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(
+        "div",
+        {
+          key: option.value,
+          ref: (el) => {
+            optionRefs.current[index] = el;
+          },
+          className: `editor-dropdown-option ${option.value === value ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+          role: "option",
+          "aria-selected": option.value === value,
+          "aria-disabled": option.disabled,
+          onClick: () => handleSelectOption(option),
+          onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+        },
+        renderLabel(option)
+      ))
+    )
+  );
+}
+RichSelectEditor.displayName = "RichSelectEditor";
+
+// src/editors/DateEditor.tsx
+import React31, { useState as useState22, useRef as useRef17, useMemo as useMemo10 } from "react";
+function DateEditor(props) {
+  const {
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    autoFocus = true,
+    dateFormat = "yyyy-MM-dd",
+    showTime = false,
+    minDate,
+    maxDate,
+    autoCommit = false
+  } = props;
+  const [isOpen] = useState22(true);
+  const [inputValue, setInputValue] = useState22("");
+  const [viewDate, setViewDate] = useState22(/* @__PURE__ */ new Date());
+  const containerRef = useRef17(null);
+  const inputRef = useEditorAutoFocus(autoFocus, true);
+  const calendarRef = useRef17(null);
+  const parsedValue = useMemo10(() => {
+    if (!value) return null;
+    if (value instanceof Date) return value;
+    const parsed = new Date(value);
+    return isNaN(parsed.getTime()) ? null : parsed;
+  }, [value]);
+  React31.useEffect(() => {
+    if (parsedValue) {
+      setInputValue(formatDate(parsedValue, dateFormat, showTime));
+      setViewDate(parsedValue);
+    }
+  }, [parsedValue, dateFormat, showTime]);
+  usePopupPosition(containerRef, calendarRef, isOpen, "auto");
+  useEditorClickOutside(containerRef, () => {
+    if (isOpen) {
+      onCommit();
+    }
+  }, true);
+  const handleSelectDate = (date) => {
+    const newDate = new Date(date);
+    if (parsedValue && !showTime) {
+      newDate.setHours(parsedValue.getHours());
+      newDate.setMinutes(parsedValue.getMinutes());
+      newDate.setSeconds(parsedValue.getSeconds());
+    }
+    onChange(newDate);
+    setInputValue(formatDate(newDate, dateFormat, showTime));
+    if (autoCommit && !showTime) {
+      onCommit();
+    }
+  };
+  const handleTimeChange = (hours, minutes) => {
+    const newDate = parsedValue ? new Date(parsedValue) : /* @__PURE__ */ new Date();
+    newDate.setHours(hours);
+    newDate.setMinutes(minutes);
+    onChange(newDate);
+    setInputValue(formatDate(newDate, dateFormat, showTime));
+  };
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    const parsed = parseDate(newValue, dateFormat);
+    if (parsed && !isNaN(parsed.getTime())) {
+      onChange(parsed);
+      setViewDate(parsed);
+    }
+  };
+  const handleInputBlur = () => {
+    if (parsedValue) {
+      setInputValue(formatDate(parsedValue, dateFormat, showTime));
+    }
+  };
+  const handlePrevMonth = () => {
+    setViewDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() - 1);
+      return newDate;
+    });
+  };
+  const handleNextMonth = () => {
+    setViewDate((prev) => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + 1);
+      return newDate;
+    });
+  };
+  const { handleKeyDown } = useEditorKeyboardNavigation(
+    {
+      onEnter: onCommit,
+      onEscape: onCancel
+    },
+    {
+      commitOnTab: true,
+      commitOnBlur: false
+    }
+  );
+  const calendarDays = useMemo10(() => {
+    return generateCalendarDays(viewDate, parsedValue, minDate, maxDate);
+  }, [viewDate, parsedValue, minDate, maxDate]);
+  return /* @__PURE__ */ React31.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: "editor-container editor-date-container",
+      onKeyDown: handleKeyDown
+    },
+    /* @__PURE__ */ React31.createElement("div", { className: "editor-input-wrapper" }, /* @__PURE__ */ React31.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        className: "editor-input editor-date-input",
+        value: inputValue,
+        onChange: handleInputChange,
+        onBlur: handleInputBlur,
+        placeholder: dateFormat,
+        "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(
+      "button",
+      {
+        type: "button",
+        className: "editor-calendar-nav",
+        onClick: handlePrevMonth,
+        "aria-label": "Previous month"
+      },
+      "\u2039"
+    ), /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-title" }, viewDate.toLocaleDateString("en-US", {
+      month: "long",
+      year: "numeric"
+    })), /* @__PURE__ */ React31.createElement(
+      "button",
+      {
+        type: "button",
+        className: "editor-calendar-nav",
+        onClick: handleNextMonth,
+        "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(
+      "button",
+      {
+        key: index,
+        type: "button",
+        className: `editor-calendar-day ${day.className}`,
+        onClick: () => day.date && handleSelectDate(day.date),
+        disabled: day.disabled,
+        "aria-label": day.date ? day.date.toDateString() : ""
+      },
+      day.label
+    ))), showTime && /* @__PURE__ */ React31.createElement("div", { className: "editor-calendar-time" }, /* @__PURE__ */ React31.createElement(
+      "input",
+      {
+        type: "time",
+        className: "editor-time-input",
+        value: parsedValue ? `${String(parsedValue.getHours()).padStart(2, "0")}:${String(
+          parsedValue.getMinutes()
+        ).padStart(2, "0")}` : "00:00",
+        onChange: (e) => {
+          const [hours, minutes] = e.target.value.split(":").map(Number);
+          handleTimeChange(hours, minutes);
+        },
+        "aria-label": "Time input"
+      }
+    )))
+  );
+}
+DateEditor.displayName = "DateEditor";
+function formatDate(date, format, showTime) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  let formatted = format.replace("yyyy", String(year)).replace("MM", month).replace("dd", day);
+  if (showTime) {
+    formatted += ` ${hours}:${minutes}`;
+  }
+  return formatted;
+}
+function parseDate(value, format) {
+  if (!value) return null;
+  try {
+    const parts = value.split(/[-/\s:]/);
+    if (parts.length < 3) return null;
+    let year, month, day;
+    let hours = 0, minutes = 0;
+    if (format.startsWith("yyyy")) {
+      year = parseInt(parts[0], 10);
+      month = parseInt(parts[1], 10) - 1;
+      day = parseInt(parts[2], 10);
+    } else if (format.startsWith("MM")) {
+      month = parseInt(parts[0], 10) - 1;
+      day = parseInt(parts[1], 10);
+      year = parseInt(parts[2], 10);
+    } else {
+      day = parseInt(parts[0], 10);
+      month = parseInt(parts[1], 10) - 1;
+      year = parseInt(parts[2], 10);
+    }
+    if (parts.length >= 5) {
+      hours = parseInt(parts[3], 10);
+      minutes = parseInt(parts[4], 10);
+    }
+    const date = new Date(year, month, day, hours, minutes);
+    return isNaN(date.getTime()) ? null : date;
+  } catch {
+    return null;
+  }
+}
+function generateCalendarDays(viewDate, selectedDate, minDate, maxDate) {
+  const year = viewDate.getFullYear();
+  const month = viewDate.getMonth();
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const daysInMonth = lastDay.getDate();
+  const startingDayOfWeek = firstDay.getDay();
+  const days = [];
+  const prevMonth = new Date(year, month, 0);
+  const prevMonthDays = prevMonth.getDate();
+  for (let i = startingDayOfWeek - 1; i >= 0; i--) {
+    const date = new Date(year, month - 1, prevMonthDays - i);
+    days.push({
+      date,
+      label: String(prevMonthDays - i),
+      className: "other-month",
+      disabled: isDateDisabled(date, minDate, maxDate)
+    });
+  }
+  for (let i = 1; i <= daysInMonth; i++) {
+    const date = new Date(year, month, i);
+    const isSelected = selectedDate && isSameDay(date, selectedDate);
+    const isToday = isSameDay(date, /* @__PURE__ */ new Date());
+    const disabled = isDateDisabled(date, minDate, maxDate);
+    days.push({
+      date,
+      label: String(i),
+      className: `${isSelected ? "selected" : ""} ${isToday ? "today" : ""} ${disabled ? "disabled" : ""}`.trim(),
+      disabled
+    });
+  }
+  const remainingDays = 42 - days.length;
+  for (let i = 1; i <= remainingDays; i++) {
+    const date = new Date(year, month + 1, i);
+    days.push({
+      date,
+      label: String(i),
+      className: "other-month",
+      disabled: isDateDisabled(date, minDate, maxDate)
+    });
+  }
+  return days;
+}
+function isSameDay(date1, date2) {
+  return date1.getFullYear() === date2.getFullYear() && date1.getMonth() === date2.getMonth() && date1.getDate() === date2.getDate();
+}
+function isDateDisabled(date, minDate, maxDate) {
+  if (minDate && date < minDate) return true;
+  if (maxDate && date > maxDate) return true;
+  return false;
+}
+
+// src/editors/NumericEditor.tsx
+import React32, { useState as useState23, useEffect as useEffect16 } from "react";
+function NumericEditor(props) {
+  const {
+    value,
+    onChange,
+    onCommit,
+    onCancel,
+    autoFocus = true,
+    min,
+    max,
+    step = 1,
+    decimals = 0,
+    prefix = "",
+    suffix = "",
+    allowNegative = true,
+    showSteppers = true,
+    thousandsSeparator = ",",
+    decimalSeparator = "."
+  } = props;
+  const [inputValue, setInputValue] = useState23("");
+  const [isFocused, setIsFocused] = useState23(true);
+  const inputRef = useEditorAutoFocus(autoFocus, true);
+  useEffect16(() => {
+    if (value !== null && value !== void 0) {
+      if (isFocused) {
+        queueMicrotask(() => setInputValue(String(value)));
+      } else {
+        queueMicrotask(() => setInputValue(formatNumber(value, decimals, thousandsSeparator, decimalSeparator)));
+      }
+    } else {
+      queueMicrotask(() => setInputValue(""));
+    }
+  }, [value, isFocused, decimals, thousandsSeparator, decimalSeparator]);
+  const clampValue = (val) => {
+    let clamped = val;
+    if (min !== void 0 && clamped < min) clamped = min;
+    if (max !== void 0 && clamped > max) clamped = max;
+    return clamped;
+  };
+  const handleInputChange = (e) => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    if (newValue === "" || newValue === "-") {
+      onChange(null);
+      return;
+    }
+    let cleaned = newValue;
+    if (prefix) cleaned = cleaned.replace(prefix, "");
+    if (suffix) cleaned = cleaned.replace(suffix, "");
+    const parsed = parseFormattedNumber(cleaned, thousandsSeparator, decimalSeparator);
+    if (parsed !== null && !isNaN(parsed)) {
+      if (!allowNegative && parsed < 0) {
+        return;
+      }
+      const clamped = clampValue(parsed);
+      onChange(clamped);
+    }
+  };
+  const handleIncrement = () => {
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue + step);
+    onChange(newValue);
+    setInputValue(String(newValue));
+  };
+  const handleDecrement = () => {
+    const currentValue = value ?? 0;
+    const newValue = clampValue(currentValue - step);
+    onChange(newValue);
+    setInputValue(String(newValue));
+  };
+  const handleFocus = () => {
+    setIsFocused(true);
+    if (value !== null && value !== void 0) {
+      setInputValue(String(value));
+    }
+  };
+  const handleBlur = () => {
+    setIsFocused(false);
+    if (value !== null && value !== void 0) {
+      const formatted = formatNumber(value, decimals, thousandsSeparator, decimalSeparator);
+      setInputValue(formatted);
+    }
+    setTimeout(() => onCommit(), 100);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    }
+  };
+  const { handleKeyDown: handleEditorKeyDown } = useEditorKeyboardNavigation(
+    {
+      onEnter: onCommit,
+      onEscape: onCancel
+    },
+    {
+      commitOnTab: true,
+      commitOnBlur: false,
+      preventDefault: false
+      // Let handleKeyDown handle arrow keys
+    }
+  );
+  const handleCombinedKeyDown = (e) => {
+    handleKeyDown(e);
+    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(
+    "input",
+    {
+      ref: inputRef,
+      type: "text",
+      inputMode: "decimal",
+      className: "editor-input editor-numeric-input",
+      value: displayValue,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleCombinedKeyDown,
+      "aria-label": "Numeric input",
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "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(
+    "button",
+    {
+      type: "button",
+      className: "editor-numeric-stepper editor-numeric-increment",
+      onClick: handleIncrement,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: max !== void 0 && (value ?? 0) >= max,
+      "aria-label": "Increment",
+      tabIndex: -1
+    },
+    "\u25B2"
+  ), /* @__PURE__ */ React32.createElement(
+    "button",
+    {
+      type: "button",
+      className: "editor-numeric-stepper editor-numeric-decrement",
+      onClick: handleDecrement,
+      onMouseDown: (e) => e.preventDefault(),
+      disabled: min !== void 0 && (value ?? 0) <= min,
+      "aria-label": "Decrement",
+      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)));
+}
+NumericEditor.displayName = "NumericEditor";
+
+// src/editors/MultiSelectEditor.tsx
+import React33, { useState as useState24, useRef as useRef18, useMemo as useMemo11 } from "react";
+function MultiSelectEditor(props) {
+  const {
+    value = [],
+    onChange,
+    onCommit,
+    onCancel,
+    autoFocus = true,
+    options,
+    placeholder = "Select...",
+    maxTagCount = 3,
+    filterable = true,
+    maxDropdownHeight = 300,
+    allowEmpty = true
+  } = props;
+  const [isOpen] = useState24(true);
+  const [searchQuery, setSearchQuery] = useState24("");
+  const [focusedIndex, setFocusedIndex] = useState24(-1);
+  const containerRef = useRef18(null);
+  const inputRef = useEditorAutoFocus(autoFocus);
+  const dropdownRef = useRef18(null);
+  const tagContainerRef = useRef18(null);
+  const selectedValues = useMemo11(
+    () => Array.isArray(value) ? value : [],
+    [value]
+  );
+  const filteredOptions = useMemo11(
+    () => filterable ? filterOptions(options, searchQuery) : options,
+    [options, searchQuery, filterable]
+  );
+  const selectedOptions = useMemo11(
+    () => options.filter((opt) => selectedValues.includes(opt.value)),
+    [options, selectedValues]
+  );
+  usePopupPosition(containerRef, dropdownRef, isOpen, "auto");
+  useEditorClickOutside(
+    containerRef,
+    () => {
+      if (isOpen) {
+        onCommit();
+      }
+    },
+    true
+  );
+  const handleToggleOption = (option) => {
+    if (option.disabled) return;
+    const isSelected = selectedValues.includes(option.value);
+    let newValues;
+    if (isSelected) {
+      if (!allowEmpty && selectedValues.length === 1) {
+        return;
+      }
+      newValues = selectedValues.filter((v) => v !== option.value);
+    } else {
+      newValues = [...selectedValues, option.value];
+    }
+    onChange(newValues);
+  };
+  const handleRemoveTag = (optionValue, e) => {
+    e.stopPropagation();
+    if (!allowEmpty && selectedValues.length === 1) {
+      return;
+    }
+    const newValues = selectedValues.filter((v) => v !== optionValue);
+    onChange(newValues);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Backspace" && searchQuery === "" && selectedValues.length > 0) {
+      e.preventDefault();
+      if (allowEmpty || selectedValues.length > 1) {
+        const newValues = selectedValues.slice(0, -1);
+        onChange(newValues);
+      }
+    }
+  };
+  const handleArrowDown = () => {
+    setFocusedIndex((prev) => {
+      var _a;
+      let next = prev + 1;
+      while (next < filteredOptions.length && ((_a = filteredOptions[next]) == null ? void 0 : _a.disabled)) {
+        next++;
+      }
+      return next < filteredOptions.length ? next : prev;
+    });
+  };
+  const handleArrowUp = () => {
+    setFocusedIndex((prev) => {
+      var _a;
+      let next = prev - 1;
+      while (next >= 0 && ((_a = filteredOptions[next]) == null ? void 0 : _a.disabled)) {
+        next--;
+      }
+      return next >= 0 ? next : prev;
+    });
+  };
+  const handleEnter = () => {
+    if (focusedIndex >= 0 && focusedIndex < filteredOptions.length) {
+      const option = filteredOptions[focusedIndex];
+      if (option && !option.disabled) {
+        handleToggleOption(option);
+      }
+    } else {
+      onCommit();
+    }
+  };
+  const { handleKeyDown: handleEditorKeyDown } = useEditorKeyboardNavigation(
+    {
+      onEnter: handleEnter,
+      onEscape: onCancel,
+      onArrowUp: handleArrowUp,
+      onArrowDown: handleArrowDown
+    },
+    {
+      commitOnTab: true,
+      commitOnBlur: false
+    }
+  );
+  const handleCombinedKeyDown = (e) => {
+    handleKeyDown(e);
+    handleEditorKeyDown(e);
+  };
+  const visibleTags = selectedOptions.slice(0, maxTagCount);
+  const collapsedCount = Math.max(0, selectedOptions.length - maxTagCount);
+  return /* @__PURE__ */ React33.createElement(
+    "div",
+    {
+      ref: containerRef,
+      className: "editor-container editor-multiselect-container",
+      onKeyDown: handleCombinedKeyDown
+    },
+    /* @__PURE__ */ React33.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(
+        "button",
+        {
+          type: "button",
+          className: "editor-tag-remove",
+          onClick: (e) => handleRemoveTag(option.value, e),
+          "aria-label": `Remove ${option.label}`,
+          tabIndex: -1
+        },
+        "\xD7"
+      ))), collapsedCount > 0 && /* @__PURE__ */ React33.createElement("div", { className: "editor-tag editor-tag-collapsed" }, "+", collapsedCount)),
+      /* @__PURE__ */ React33.createElement(
+        "input",
+        {
+          ref: inputRef,
+          type: "text",
+          className: "editor-input editor-multiselect-input",
+          value: searchQuery,
+          onChange: (e) => {
+            setSearchQuery(e.target.value);
+            setFocusedIndex(-1);
+          },
+          placeholder: selectedValues.length === 0 ? placeholder : "",
+          "aria-label": "Search options",
+          "aria-expanded": isOpen,
+          "aria-autocomplete": "list",
+          "aria-controls": "multiselect-dropdown",
+          autoComplete: "off"
+        }
+      ),
+      /* @__PURE__ */ React33.createElement("span", { className: "editor-dropdown-icon", "aria-hidden": "true" }, "\u25BC")
+    ),
+    isOpen && /* @__PURE__ */ React33.createElement(
+      "div",
+      {
+        ref: dropdownRef,
+        id: "multiselect-dropdown",
+        className: "editor-dropdown",
+        role: "listbox",
+        "aria-multiselectable": "true",
+        style: { maxHeight: maxDropdownHeight }
+      },
+      filteredOptions.length === 0 ? /* @__PURE__ */ React33.createElement("div", { className: "editor-dropdown-empty" }, "No options found") : filteredOptions.map((option, index) => {
+        const isSelected = selectedValues.includes(option.value);
+        return /* @__PURE__ */ React33.createElement(
+          "div",
+          {
+            key: option.value,
+            className: `editor-dropdown-option editor-multiselect-option ${isSelected ? "selected" : ""} ${option.disabled ? "disabled" : ""} ${index === focusedIndex ? "focused" : ""}`,
+            role: "option",
+            "aria-selected": isSelected,
+            "aria-disabled": option.disabled,
+            onClick: () => handleToggleOption(option),
+            onMouseEnter: () => !option.disabled && setFocusedIndex(index)
+          },
+          /* @__PURE__ */ React33.createElement(
+            "input",
+            {
+              type: "checkbox",
+              className: "editor-multiselect-checkbox",
+              checked: isSelected,
+              onChange: () => {
+              },
+              disabled: option.disabled,
+              tabIndex: -1,
+              "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))
+        );
+      })
+    )
+  );
+}
+MultiSelectEditor.displayName = "MultiSelectEditor";
+
+// src/editors/MarkdownEditor.tsx
+import React34, { useState as useState25, useRef as useRef19, useMemo as useMemo12 } from "react";
+function MarkdownEditor(props) {
+  const {
+    value = "",
+    onChange,
+    onCommit,
+    onCancel,
+    autoFocus = true,
+    maxLength,
+    showPreview = true,
+    minHeight = 150,
+    maxHeight = 400,
+    rows = 6
+  } = props;
+  const [internalValue, setInternalValue] = useState25(value || "");
+  const [showPreviewPanel, setShowPreviewPanel] = useState25(showPreview);
+  const containerRef = useRef19(null);
+  const textareaRef = useEditorAutoFocus(autoFocus, true);
+  useEditorClickOutside(
+    containerRef,
+    () => {
+      onCommit();
+    },
+    true
+  );
+  const handleChange = (e) => {
+    const newValue = e.target.value;
+    if (maxLength && newValue.length > maxLength) {
+      return;
+    }
+    setInternalValue(newValue);
+    onChange(newValue);
+  };
+  const handleKeyDown = (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
+      e.preventDefault();
+      onCommit();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onCancel();
+      return;
+    }
+    if (e.key === "Tab") {
+      e.preventDefault();
+      const start = e.currentTarget.selectionStart;
+      const end = e.currentTarget.selectionEnd;
+      const newValue = internalValue.substring(0, start) + "	" + internalValue.substring(end);
+      setInternalValue(newValue);
+      onChange(newValue);
+      setTimeout(() => {
+        if (textareaRef.current) {
+          textareaRef.current.selectionStart = start + 1;
+          textareaRef.current.selectionEnd = start + 1;
+        }
+      }, 0);
+      return;
+    }
+    if (e.ctrlKey || e.metaKey) {
+      let insertion = "";
+      let cursorOffset = 0;
+      switch (e.key) {
+        case "b":
+          insertion = "****";
+          cursorOffset = 2;
+          break;
+        case "i":
+          insertion = "__";
+          cursorOffset = 1;
+          break;
+        case "k":
+          insertion = "[](url)";
+          cursorOffset = 1;
+          break;
+        default:
+          return;
+      }
+      if (insertion) {
+        e.preventDefault();
+        const start = e.currentTarget.selectionStart;
+        const end = e.currentTarget.selectionEnd;
+        const selectedText = internalValue.substring(start, end);
+        let newValue;
+        let newCursorPos;
+        if (selectedText) {
+          const before = insertion.substring(0, cursorOffset);
+          const after = insertion.substring(cursorOffset);
+          newValue = internalValue.substring(0, start) + before + selectedText + after + internalValue.substring(end);
+          newCursorPos = start + before.length + selectedText.length;
+        } else {
+          newValue = internalValue.substring(0, start) + insertion + internalValue.substring(end);
+          newCursorPos = start + cursorOffset;
+        }
+        setInternalValue(newValue);
+        onChange(newValue);
+        setTimeout(() => {
+          if (textareaRef.current) {
+            textareaRef.current.selectionStart = newCursorPos;
+            textareaRef.current.selectionEnd = newCursorPos;
+            textareaRef.current.focus();
+          }
+        }, 0);
+      }
+    }
+  };
+  const charCount = internalValue.length;
+  const charCountClass = maxLength && charCount > maxLength * 0.9 ? "warning" : "";
+  const previewHtml = useMemo12(() => {
+    return renderMarkdownPreview(internalValue);
+  }, [internalValue]);
+  return /* @__PURE__ */ React34.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(
+      "button",
+      {
+        type: "button",
+        className: "editor-toolbar-btn",
+        onClick: () => {
+          if (textareaRef.current) {
+            const start = textareaRef.current.selectionStart;
+            const end = textareaRef.current.selectionEnd;
+            const selectedText = internalValue.substring(start, end);
+            const newValue = internalValue.substring(0, start) + `**${selectedText || "bold"}**` + internalValue.substring(end);
+            setInternalValue(newValue);
+            onChange(newValue);
+            textareaRef.current.focus();
+          }
+        },
+        title: "Bold (Ctrl+B)",
+        "aria-label": "Bold"
+      },
+      /* @__PURE__ */ React34.createElement("strong", null, "B")
+    ), /* @__PURE__ */ React34.createElement(
+      "button",
+      {
+        type: "button",
+        className: "editor-toolbar-btn",
+        onClick: () => {
+          if (textareaRef.current) {
+            const start = textareaRef.current.selectionStart;
+            const end = textareaRef.current.selectionEnd;
+            const selectedText = internalValue.substring(start, end);
+            const newValue = internalValue.substring(0, start) + `_${selectedText || "italic"}_` + internalValue.substring(end);
+            setInternalValue(newValue);
+            onChange(newValue);
+            textareaRef.current.focus();
+          }
+        },
+        title: "Italic (Ctrl+I)",
+        "aria-label": "Italic"
+      },
+      /* @__PURE__ */ React34.createElement("em", null, "I")
+    ), /* @__PURE__ */ React34.createElement(
+      "button",
+      {
+        type: "button",
+        className: "editor-toolbar-btn",
+        onClick: () => {
+          if (textareaRef.current) {
+            const start = textareaRef.current.selectionStart;
+            const end = textareaRef.current.selectionEnd;
+            const selectedText = internalValue.substring(start, end);
+            const newValue = internalValue.substring(0, start) + `[${selectedText || "link text"}](url)` + internalValue.substring(end);
+            setInternalValue(newValue);
+            onChange(newValue);
+            textareaRef.current.focus();
+          }
+        },
+        title: "Link (Ctrl+K)",
+        "aria-label": "Link"
+      },
+      "\u{1F517}"
+    )), /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-toolbar-group" }, /* @__PURE__ */ React34.createElement(
+      "button",
+      {
+        type: "button",
+        className: `editor-toolbar-btn ${showPreviewPanel ? "active" : ""}`,
+        onClick: () => setShowPreviewPanel(!showPreviewPanel),
+        title: "Toggle preview",
+        "aria-label": "Toggle preview",
+        "aria-pressed": showPreviewPanel
+      },
+      "\u{1F441}"
+    ))),
+    /* @__PURE__ */ React34.createElement("div", { className: `editor-markdown-content ${showPreviewPanel ? "split" : ""}` }, /* @__PURE__ */ React34.createElement("div", { className: "editor-markdown-editor" }, /* @__PURE__ */ React34.createElement(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: "editor-textarea editor-markdown-textarea",
+        value: internalValue,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        rows,
+        maxLength,
+        placeholder: "Enter markdown text...",
+        "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(
+      "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(
+      "button",
+      {
+        type: "button",
+        className: "editor-btn editor-btn-secondary",
+        onClick: onCancel
+      },
+      "Cancel"
+    ), /* @__PURE__ */ React34.createElement(
+      "button",
+      {
+        type: "button",
+        className: "editor-btn editor-btn-primary",
+        onClick: onCommit
+      },
+      "Save"
+    )))
+  );
+}
+MarkdownEditor.displayName = "MarkdownEditor";
+function renderMarkdownPreview(markdown) {
+  if (!markdown) return '<p class="editor-markdown-empty">Nothing to preview</p>';
+  let html = markdown;
+  html = html.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+  html = html.replace(/^### (.*$)/gim, "<h3>$1</h3>");
+  html = html.replace(/^## (.*$)/gim, "<h2>$1</h2>");
+  html = html.replace(/^# (.*$)/gim, "<h1>$1</h1>");
+  html = html.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  html = html.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  html = html.replace(/\*(.+?)\*/g, "<em>$1</em>");
+  html = html.replace(/_(.+?)_/g, "<em>$1</em>");
+  html = html.replace(/`(.+?)`/g, "<code>$1</code>");
+  html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
+  html = html.replace(/^\* (.+)$/gim, "<li>$1</li>");
+  html = html.replace(/^- (.+)$/gim, "<li>$1</li>");
+  html = html.replace(/(<li>.*<\/li>)/s, "<ul>$1</ul>");
+  html = html.replace(/\n\n/g, "</p><p>");
+  html = html.replace(/\n/g, "<br>");
+  if (!html.startsWith("<h") && !html.startsWith("<ul") && !html.startsWith("<p")) {
+    html = "<p>" + html + "</p>";
+  }
+  return html;
+}
 export {
   AdvancedFilterBuilder,
   BadgeCell,
@@ -11760,6 +13523,7 @@ export {
   ColumnFilters,
   CurrencyCell,
   DataGrid,
+  DateEditor,
   DensityToggle,
   ExportMenu,
   FacetedSearch,
@@ -11772,11 +13536,16 @@ export {
   LayoutPersistenceManager,
   LayoutPresetsManager,
   LocalStorageAdapter,
+  MarkdownEditor,
   MarketDataEngine,
   MarketDataGrid,
+  MultiSelectEditor,
+  NumericEditor,
+  PivotToolbar,
   PriorityIndicator,
   ProgressBar,
   Rating,
+  RichSelectEditor,
   ServerAdapter,
   ServerSideDataSource,
   StatusChip,
@@ -11786,6 +13555,7 @@ export {
   VirtualScroller,
   WebSocketMockFeed,
   alpineTheme,
+  buildPivot,
   buildTreeFromFlat,
   collapseAllNodes,
   countTreeNodes,
@@ -11795,12 +13565,17 @@ export {
   createMockWebSocket,
   createPreset,
   darkTheme,
+  debounce2 as debounce,
   densityConfigs,
+  downloadCSV,
   expandAllNodes,
+  exportPivotToCSV,
   exportToCSV,
   exportToXLSX,
+  filterOptions,
   filterTree,
   flattenTree,
+  formatNumber,
   generateDensityCSS,
   generateFilename,
   generatePresetId,
@@ -11818,10 +13593,15 @@ export {
   isTreeNode,
   loadDensityMode,
   materialTheme,
+  parseFormattedNumber,
   quartzTheme,
   saveDensityMode,
   themes,
   toggleNodeExpansion,
   useDensityMode,
-  useMarketData
+  useEditorAutoFocus,
+  useEditorClickOutside,
+  useEditorKeyboardNavigation,
+  useMarketData,
+  usePopupPosition
 };