@rufous/ui 0.3.22 → 0.3.24

package/dist/main.js

@@ -4472,8 +4472,57 @@ import {
   ArrowDown,
   Trash2,
   Plus,
-  ChevronsUpDown
+  ChevronsUpDown,
+  Layers
 } from "lucide-react";
+function getAllGroupIds(rows, fields, getKey, depth = 0, parentId = "") {
+  if (!fields.length || !rows.length) return [];
+  const [field, ...rest] = fields;
+  const buckets = /* @__PURE__ */ new Map();
+  rows.forEach((row) => {
+    const k = getKey(row, field) || "(Blank)";
+    if (!buckets.has(k)) buckets.set(k, []);
+    buckets.get(k).push(row);
+  });
+  const out = [];
+  buckets.forEach((children, k) => {
+    const id = `${parentId}::${field}::${k}`;
+    out.push({ id, field, key: k, depth, count: children.length });
+    if (rest.length) out.push(...getAllGroupIds(children, rest, getKey, depth + 1, id));
+  });
+  return out;
+}
+function buildFlatEntries(rows, fields, getKey, expanded, depth = 0, parentId = "") {
+  if (!fields.length) return rows.map((row) => ({ kind: "data", row, depth }));
+  const [field, ...rest] = fields;
+  const buckets = /* @__PURE__ */ new Map();
+  rows.forEach((row) => {
+    const k = getKey(row, field) || "(Blank)";
+    if (!buckets.has(k)) buckets.set(k, []);
+    buckets.get(k).push(row);
+  });
+  const out = [];
+  buckets.forEach((children, k) => {
+    const id = `${parentId}::${field}::${k}`;
+    out.push({ kind: "group", id, field, key: k, depth, leafCount: children.length });
+    if (expanded.has(id)) {
+      out.push(...buildFlatEntries(children, rest, getKey, expanded, depth + 1, id));
+    }
+  });
+  return out;
+}
+function buildTreeEntries(rows, getChildren, expanded, depth = 0) {
+  const out = [];
+  rows.forEach((row) => {
+    const children = getChildren(row) ?? [];
+    const hasChildren = children.length > 0;
+    out.push({ kind: "data", row, depth, hasChildren });
+    if (hasChildren && expanded.has(row.id)) {
+      out.push(...buildTreeEntries(children, getChildren, expanded, depth + 1));
+    }
+  });
+  return out;
+}
 function FilterSelect({
   value,
   onChange,
@@ -4571,7 +4620,21 @@ function DataGrid({
   searchableColumns,
   onSearchChange,
   onFiltersChange,
-  hideTopExport = false
+  initialFilters,
+  toolbarOptions,
+  customToolbar,
+  customFooter,
+  hideTopExport = false,
+  rowGroupingModel,
+  defaultRowGroupingModel,
+  onRowGroupingModelChange,
+  rowGroupingColumnMode = "single",
+  groupingColDef,
+  defaultGroupingExpansionDepth = 0,
+  isGroupExpandedByDefault,
+  disableRowGrouping = false,
+  treeData = false,
+  getChildRows
 }) {
   const sxClass = useSx(sx);
   const [editingCell, setEditingCell] = useState9(null);
@@ -4631,10 +4694,46 @@ function DataGrid({
   const [focusFilterIdx, setFocusFilterIdx] = useState9(-1);
   const filterableColumnsProp = initialColumnsProp.filter((c) => c.filterable !== false);
   const initialFilterCol = String(filterableColumnsProp[0]?.field || filterableColumnsProp[0]?.key || "");
-  const [advancedFilters, setAdvancedFilters] = useState9([
-    { column: initialFilterCol, operator: getDefaultOperator(filterableColumnsProp[0]?.type), value: "", logic: "AND" }
-  ]);
+  const [advancedFilters, setAdvancedFilters] = useState9(() => {
+    if (initialFilters && initialFilters.length > 0) return initialFilters;
+    return [{ column: initialFilterCol, operator: getDefaultOperator(filterableColumnsProp[0]?.type), value: "", logic: "AND" }];
+  });
   const [colSearch, setColSearch] = useState9("");
+  const [internalGroupingModel, setInternalGroupingModel] = useState9(
+    defaultRowGroupingModel ?? []
+  );
+  const activeGroupingModel = rowGroupingModel ?? internalGroupingModel;
+  const isGroupingActive = activeGroupingModel.length > 0;
+  const setGroupingModel = (model) => {
+    if (!rowGroupingModel) setInternalGroupingModel(model);
+    onRowGroupingModelChange?.(model);
+  };
+  const addToGrouping = (field) => {
+    if (activeGroupingModel.includes(field)) return;
+    setGroupingModel([...activeGroupingModel, field]);
+  };
+  const removeFromGrouping = (field) => {
+    setGroupingModel(activeGroupingModel.filter((f) => f !== field));
+  };
+  const [expandedGroups, setExpandedGroups] = useState9(/* @__PURE__ */ new Set());
+  const prevGroupModelKeyRef = useRef10("");
+  const toggleGroup = (groupId) => {
+    setExpandedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(groupId)) next.delete(groupId);
+      else next.add(groupId);
+      return next;
+    });
+  };
+  const [treeExpandedRows, setTreeExpandedRows] = useState9(/* @__PURE__ */ new Set());
+  const toggleTreeRow = (id) => {
+    setTreeExpandedRows((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
   useEffect9(() => {
     const handleMouseMove = (e) => {
       if (!resizingColumn) return;
@@ -4677,6 +4776,13 @@ function DataGrid({
       return next;
     });
   }, [initialColumnsProp]);
+  const getGroupValue = (item, field) => {
+    const col = resolvedColumns.find((c) => String(c.field) === field || String(c.key) === field);
+    const raw = item[field];
+    if (col?.groupingValueGetter) return String(col.groupingValueGetter(raw, item) ?? "");
+    if (col?.valueGetter) return String(col.valueGetter({ value: raw, row: item, field }) ?? "");
+    return raw == null ? "" : String(raw);
+  };
   const onFiltersChangeRef = useRef10(onFiltersChange);
   useEffect9(() => {
     onFiltersChangeRef.current = onFiltersChange;
@@ -4864,14 +4970,36 @@ function DataGrid({
       return 0;
     });
   }, [filteredData, sortField, sortDirection, resolvedColumns]);
+  useEffect9(() => {
+    const key = activeGroupingModel.join("\0");
+    if (key === prevGroupModelKeyRef.current) return;
+    prevGroupModelKeyRef.current = key;
+    if (!activeGroupingModel.length) {
+      setExpandedGroups(/* @__PURE__ */ new Set());
+      return;
+    }
+    const allGroups = getAllGroupIds(sortedData, activeGroupingModel, getGroupValue);
+    setExpandedGroups(new Set(
+      allGroups.filter((g) => isGroupExpandedByDefault ? isGroupExpandedByDefault({ id: g.id, field: g.field, key: g.key, depth: g.depth, count: g.count }) : defaultGroupingExpansionDepth === -1 || g.depth < defaultGroupingExpansionDepth).map((g) => g.id)
+    ));
+  }, [activeGroupingModel.join("\0")]);
+  const resolveChildren = getChildRows ?? ((row) => row.children ?? null);
+  const flatEntries = useMemo2(() => {
+    if (treeData) {
+      return buildTreeEntries(sortedData, resolveChildren, treeExpandedRows);
+    }
+    if (!isGroupingActive) return null;
+    return buildFlatEntries(sortedData, activeGroupingModel, getGroupValue, expandedGroups);
+  }, [treeData, isGroupingActive, sortedData, activeGroupingModel.join("\0"), expandedGroups, treeExpandedRows]);
   const isServer = paginationMode === "server";
-  const totalRows = isServer ? rowCount ?? data.length : filteredData.length;
+  const totalRows = isServer ? rowCount ?? data.length : flatEntries ? flatEntries.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(totalRows / activePageSize));
-  const paginatedData = useMemo2(() => {
-    if (isServer) return data;
+  const displayRows = useMemo2(() => {
+    if (isServer) return data.map((row) => ({ kind: "data", row, depth: 0 }));
+    const source = flatEntries ?? sortedData.map((row) => ({ kind: "data", row, depth: 0 }));
     const start = (activePage - 1) * activePageSize;
-    return sortedData.slice(start, start + activePageSize);
-  }, [isServer, data, sortedData, activePage, activePageSize]);
+    return source.slice(start, start + activePageSize);
+  }, [isServer, data, flatEntries, sortedData, activePage, activePageSize]);
   const handleExport = () => {
     const exportableCols = resolvedColumns.filter((c) => !c.hidden && c.isExportable !== false);
     const headers = exportableCols.map((c) => c.headerName).join(",");
@@ -4921,8 +5049,57 @@ function DataGrid({
     const left = resolvedColumns.filter((c) => !c.hidden && c.pinned === "left");
     const mid = resolvedColumns.filter((c) => !c.hidden && !c.pinned);
     const right = resolvedColumns.filter((c) => !c.hidden && c.pinned === "right");
-    return [...left, ...mid, ...right];
-  }, [resolvedColumns]);
+    const dataCols = [...left, ...mid, ...right];
+    if (treeData) {
+      const treeCol = {
+        key: "__tree__",
+        field: "__tree__",
+        header: "",
+        headerName: "",
+        width: 44,
+        sortable: false,
+        filterable: false,
+        disableColumnMenu: true,
+        hideable: false
+      };
+      return [treeCol, ...dataCols];
+    }
+    if (!isGroupingActive) return dataCols;
+    if (rowGroupingColumnMode === "multiple") {
+      const groupCols = activeGroupingModel.map((gField, i) => {
+        const src = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
+        const def2 = typeof groupingColDef === "function" ? groupingColDef(gField) : groupingColDef;
+        return {
+          key: `__group_${i}__`,
+          field: `__group_${i}__`,
+          header: def2?.headerName ?? src?.header ?? src?.headerName ?? gField,
+          headerName: def2?.headerName ?? src?.header ?? src?.headerName ?? gField,
+          width: def2?.width ?? 160,
+          sortable: false,
+          filterable: false,
+          disableColumnMenu: true,
+          hideable: false,
+          __groupField: gField,
+          __groupIndex: i
+        };
+      });
+      return [...groupCols, ...dataCols];
+    }
+    const def = typeof groupingColDef === "function" ? groupingColDef(activeGroupingModel[0]) : groupingColDef;
+    const singleSrc = resolvedColumns.find((c) => String(c.field) === activeGroupingModel[0] || String(c.key) === activeGroupingModel[0]);
+    const singleGroupCol = {
+      key: "__group__",
+      field: "__group__",
+      header: def?.headerName ?? (activeGroupingModel.length === 1 ? singleSrc?.header ?? singleSrc?.headerName ?? "Group" : "Group"),
+      headerName: def?.headerName ?? (activeGroupingModel.length === 1 ? singleSrc?.header ?? singleSrc?.headerName ?? "Group" : "Group"),
+      width: def?.width ?? 200,
+      sortable: false,
+      filterable: false,
+      disableColumnMenu: true,
+      hideable: false
+    };
+    return [singleGroupCol, ...dataCols];
+  }, [resolvedColumns, isGroupingActive, activeGroupingModel, rowGroupingColumnMode, groupingColDef]);
   const getLeftOffset = (col, idx) => {
     if (col.pinned !== "left") return void 0;
     let offset2 = 0;
@@ -4957,7 +5134,14 @@ function DataGrid({
   };
   const activeMenuCol = activeMenu ? resolvedColumns.find((c) => String(c.field) === activeMenu) : null;
   const alignClass = (align) => align === "center" ? "dg-slot--center" : align === "right" ? "dg-slot--right" : "dg-slot--left";
-  return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, /* @__PURE__ */ React75.createElement("h2", null, title), /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
+  const tOpts = toolbarOptions ?? {};
+  const showSearch = !tOpts.hideSearch;
+  const showFilterBtn = !tOpts.hideFilter;
+  const showColumnsBtn = !tOpts.hideColumns;
+  const showExportBtn = !tOpts.hideExport && !hideTopExport;
+  const showTitle = !tOpts.hideTitle;
+  const showRecordCount = !tOpts.hideRecordCount;
+  return /* @__PURE__ */ React75.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React75.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React75.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React75.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React75.createElement("p", null, filteredData.length, " total records")), /* @__PURE__ */ React75.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ React75.createElement(React75.Fragment, null, showSearch && /* @__PURE__ */ React75.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React75.createElement(Search, { size: 15 }), /* @__PURE__ */ React75.createElement(
     "input",
     {
       className: "dg-search",
@@ -4968,23 +5152,35 @@ function DataGrid({
         setCurrentPage(1);
       }
     }
-  )), /* @__PURE__ */ React75.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React75.createElement(
+  )), showFilterBtn && /* @__PURE__ */ React75.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
       onClick: () => setShowAdvancedFilter(true)
     },
     /* @__PURE__ */ React75.createElement(Filter, { size: 16 })
-  )), /* @__PURE__ */ React75.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React75.createElement(
+  )), showColumnsBtn && /* @__PURE__ */ React75.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React75.createElement(
     "button",
     {
       className: "dg-icon-btn",
       onClick: () => setShowManageColumns(true)
     },
     /* @__PURE__ */ React75.createElement(Columns, { size: 16 })
-  )), !hideTopExport && /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV"), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${paginatedData.length === 0 && !loading ? " dg-table-wrap--empty" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
+  )), showExportBtn && /* @__PURE__ */ React75.createElement("button", { className: "dg-action-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }), " Export CSV")), headerActions && /* @__PURE__ */ React75.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content))), !tOpts.hideHeader && /* @__PURE__ */ React75.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React75.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React75.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
+    const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
+    return /* @__PURE__ */ React75.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ React75.createElement(Layers, { size: 11 }), /* @__PURE__ */ React75.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ React75.createElement(
+      "button",
+      {
+        className: "dg-group-chip-remove",
+        onClick: () => removeFromGrouping(gField),
+        title: `Remove grouping by ${col?.header ?? gField}`
+      },
+      /* @__PURE__ */ React75.createElement(X2, { size: 10 })
+    ));
+  })), /* @__PURE__ */ React75.createElement("div", { className: `dg-table-wrap${filteredData.length === 0 && !loading ? " dg-table-wrap--empty" : ""} ${tOpts.hideHeader ? "rm-top-border" : ""} ${tOpts.hideFooter ? "rm-bottom-border" : ""}` }, loading && /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-overlay" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-loading-spinner" })), /* @__PURE__ */ React75.createElement("table", { className: "dg-table" }, /* @__PURE__ */ React75.createElement("thead", null, /* @__PURE__ */ React75.createElement("tr", null, visibleColumns.map((col, idx) => {
     const colField = String(col.field);
-    const width = columnWidths[colField] || 200;
+    const colNativeWidth = col.width ? typeof col.width === "number" ? col.width : parseInt(String(col.width)) : 200;
+    const width = columnWidths[colField] || colNativeWidth;
     const leftOffset = getLeftOffset(col, idx);
     const rightOffset = getRightOffset(col, idx);
     const isSorted = sortField === col.field;
@@ -5035,79 +5231,150 @@ function DataGrid({
         }
       )))
     );
-  }), actions && /* @__PURE__ */ React75.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React75.createElement("tbody", null, paginatedData.length > 0 && paginatedData.map((item) => /* @__PURE__ */ React75.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
-    const colField = String(col.field);
-    const width = columnWidths[colField] || 200;
-    const leftOffset = getLeftOffset(col, idx);
-    const rightOffset = getRightOffset(col, idx);
-    return /* @__PURE__ */ React75.createElement(
-      "td",
-      {
-        key: `${item.id}-${colField}`,
-        className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""}${col.editable ? " dg-td--editable" : ""} ${col.cellClassName || ""}`,
-        style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex },
-        onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] }),
-        onClick: col.editable ? () => {
-          const field = String(col.field);
-          const rawValue = item[col.field || ""];
-          const value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
-          setEditingCell({ rowId: item.id, field, value });
-        } : void 0
-      },
-      (() => {
-        const field = String(col.field);
-        const rawValue = item[col.field || ""];
-        let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
-        if (col.editable && editingCell?.rowId === item.id && editingCell?.field === field) {
-          const inputType = col.type === "number" ? "number" : col.type === "date" ? "date" : "text";
-          const commit = (finalValue) => {
-            setEditingCell(null);
-            col.onEnter?.({ value: finalValue, row: item, field });
-          };
-          return /* @__PURE__ */ React75.createElement(
-            "input",
+  }), actions && /* @__PURE__ */ React75.createElement("th", { style: { width: 0, padding: 0 } }))), /* @__PURE__ */ React75.createElement("tbody", null, displayRows.length > 0 && displayRows.map((entry) => {
+    if (entry.kind === "group") {
+      const isExpanded = expandedGroups.has(entry.id);
+      const colDef = typeof groupingColDef === "function" ? groupingColDef(entry.field) : groupingColDef;
+      const fieldLabel = resolvedColumns.find(
+        (c) => String(c.field) === entry.field || String(c.key) === entry.field
+      )?.header ?? entry.field;
+      const totalCols = visibleColumns.length + (actions ? 1 : 0);
+      return /* @__PURE__ */ React75.createElement("tr", { key: entry.id, className: "dg-group-row" }, /* @__PURE__ */ React75.createElement("td", { colSpan: totalCols, className: "dg-group-cell" }, /* @__PURE__ */ React75.createElement(
+        "div",
+        {
+          className: "dg-group-cell-inner",
+          style: { paddingLeft: entry.depth * 20 },
+          onClick: () => toggleGroup(entry.id)
+        },
+        /* @__PURE__ */ React75.createElement("button", { className: "dg-group-toggle", onClick: (e) => {
+          e.stopPropagation();
+          toggleGroup(entry.id);
+        } }, isExpanded ? /* @__PURE__ */ React75.createElement(ChevronDown, { size: 15 }) : /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })),
+        activeGroupingModel.length > 1 && /* @__PURE__ */ React75.createElement("span", { className: "dg-group-field-label" }, fieldLabel, ":"),
+        colDef?.renderCell ? colDef.renderCell({ groupKey: entry.key, field: entry.field, depth: entry.depth, leafCount: entry.leafCount }) : /* @__PURE__ */ React75.createElement("span", { className: "dg-group-key" }, entry.key),
+        !colDef?.hideDescendantCount && /* @__PURE__ */ React75.createElement("span", { className: "dg-group-count" }, entry.leafCount)
+      )));
+    }
+    const item = entry.row;
+    const rowDepth = entry.depth;
+    return /* @__PURE__ */ React75.createElement("tr", { key: item.id, className: "dg-tbody-row", onDoubleClick: () => onRowDoubleClick?.(item) }, visibleColumns.map((col, idx) => {
+      const colField = String(col.field);
+      if (colField === "__tree__") {
+        const treeColWidth = columnWidths["__tree__"] || 44;
+        const isExpanded = treeExpandedRows.has(item.id);
+        return /* @__PURE__ */ React75.createElement(
+          "td",
+          {
+            key: `${item.id}-__tree__`,
+            className: "dg-tree-cell",
+            style: { width: treeColWidth, minWidth: treeColWidth, maxWidth: treeColWidth }
+          },
+          /* @__PURE__ */ React75.createElement("div", { className: "dg-tree-cell-inner", style: { paddingLeft: rowDepth * 20 } }, entry.hasChildren ? /* @__PURE__ */ React75.createElement(
+            "button",
             {
-              className: "dg-cell-editor",
-              type: inputType,
-              autoFocus: true,
-              defaultValue: editingCell.value ?? "",
-              onClick: (e) => e.stopPropagation(),
-              onKeyDown: (e) => {
-                if (e.key === "Enter") commit(e.target.value);
-                if (e.key === "Escape") setEditingCell(null);
-              },
-              onBlur: (e) => {
-                const finalValue = e.target.value;
-                setEditingCell(null);
-                col.onBlur?.({ value: finalValue, row: item, field });
+              className: "dg-group-toggle",
+              onClick: (e) => {
+                e.stopPropagation();
+                toggleTreeRow(item.id);
               }
-            }
-          );
-        }
-        const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
-        if (col.renderCell) {
-          return col.renderCell({ value, row: item, field });
-        }
-        if (col.render) {
-          return col.render(value, item);
+            },
+            isExpanded ? /* @__PURE__ */ React75.createElement(ChevronDown, { size: 15 }) : /* @__PURE__ */ React75.createElement(ChevronRight, { size: 15 })
+          ) : /* @__PURE__ */ React75.createElement("span", { style: { display: "inline-block", width: 22 } }))
+        );
+      }
+      if (colField === "__group__" || colField.startsWith("__group_")) {
+        const colDef = typeof groupingColDef === "function" ? groupingColDef(colField) : groupingColDef;
+        const leafField = colDef?.leafField;
+        let leafContent = null;
+        if (leafField) {
+          const leafCol = resolvedColumns.find((c) => String(c.field) === leafField || String(c.key) === leafField);
+          if (leafCol) {
+            const raw = item[String(leafCol.field)];
+            let val = leafCol.valueGetter ? leafCol.valueGetter({ value: raw, row: item, field: leafField }) : raw;
+            if (leafCol.valueFormatter) val = leafCol.valueFormatter({ value: val, row: item, field: leafField });
+            if (leafCol.renderCell) leafContent = leafCol.renderCell({ value: val, row: item, field: leafField });
+            else leafContent = val == null ? "" : String(val);
+          }
         }
-        return String(formattedValue ?? "");
-      })()
-    );
-  }), actions && /* @__PURE__ */ React75.createElement("td", { className: "dg-row-actions-cell" }, (() => {
-    const resolvedActions = typeof actions === "function" ? actions(item) : actions;
-    const visibleActions = resolvedActions.filter((a) => !a.show || a.show(item));
-    if (visibleActions.length === 0) return null;
-    return /* @__PURE__ */ React75.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React75.createElement(Tooltip, { key: i, title: action.label, placement: "top" }, /* @__PURE__ */ React75.createElement(
-      "button",
-      {
-        className: "dg-row-action-btn",
-        style: { color: action.color || "var(--text-secondary)" },
-        onClick: () => action.onClick(item)
-      },
-      action.icon
-    )))));
-  })()))))), paginatedData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), pagination && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
+        const groupColWidth = columnWidths[colField] || 200;
+        return /* @__PURE__ */ React75.createElement(
+          "td",
+          {
+            key: `${item.id}-${colField}`,
+            className: "dg-group-leaf-cell",
+            style: { width: groupColWidth, minWidth: groupColWidth, maxWidth: groupColWidth, paddingLeft: rowDepth * 20 + 32 }
+          },
+          leafContent
+        );
+      }
+      const width = columnWidths[colField] || 200;
+      const leftOffset = getLeftOffset(col, idx);
+      const rightOffset = getRightOffset(col, idx);
+      return /* @__PURE__ */ React75.createElement(
+        "td",
+        {
+          key: `${item.id}-${colField}`,
+          className: `dg-td${col.pinned === "left" ? " pinned-left" : col.pinned === "right" ? " pinned-right" : ""}${col.editable ? " dg-td--editable" : ""} ${col.cellClassName || ""}`,
+          style: { width, minWidth: width, maxWidth: width, left: leftOffset, right: rightOffset, flex: col.flex },
+          onDoubleClick: () => onCellDoubleClick?.({ row: item, field: colField, value: item[col.field || ""] }),
+          onClick: col.editable ? () => {
+            const field = String(col.field);
+            const rawValue = item[col.field || ""];
+            const value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+            setEditingCell({ rowId: item.id, field, value });
+          } : void 0
+        },
+        (() => {
+          const field = String(col.field);
+          const rawValue = item[col.field || ""];
+          let value = col.valueGetter ? col.valueGetter({ value: rawValue, row: item, field }) : rawValue;
+          if (col.editable && editingCell?.rowId === item.id && editingCell?.field === field) {
+            const inputType = col.type === "number" ? "number" : col.type === "date" ? "date" : "text";
+            const commit = (finalValue) => {
+              setEditingCell(null);
+              col.onEnter?.({ value: finalValue, row: item, field });
+            };
+            return /* @__PURE__ */ React75.createElement(
+              "input",
+              {
+                className: "dg-cell-editor",
+                type: inputType,
+                autoFocus: true,
+                defaultValue: editingCell.value ?? "",
+                onClick: (e) => e.stopPropagation(),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") commit(e.target.value);
+                  if (e.key === "Escape") setEditingCell(null);
+                },
+                onBlur: (e) => {
+                  const finalValue = e.target.value;
+                  setEditingCell(null);
+                  col.onBlur?.({ value: finalValue, row: item, field });
+                }
+              }
+            );
+          }
+          const formattedValue = col.valueFormatter ? col.valueFormatter({ value, row: item, field }) : value;
+          if (col.renderCell) return col.renderCell({ value, row: item, field });
+          if (col.render) return col.render(value, item);
+          return String(formattedValue ?? "");
+        })()
+      );
+    }), actions && /* @__PURE__ */ React75.createElement("td", { className: "dg-row-actions-cell" }, (() => {
+      const resolvedActions = typeof actions === "function" ? actions(item) : actions;
+      const visibleActions = resolvedActions.filter((a) => !a.show || a.show(item));
+      if (visibleActions.length === 0) return null;
+      return /* @__PURE__ */ React75.createElement("div", { className: "dg-row-actions" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-action-group" }, visibleActions.map((action, i) => /* @__PURE__ */ React75.createElement(Tooltip, { key: i, title: action.label, placement: "top" }, /* @__PURE__ */ React75.createElement(
+        "button",
+        {
+          className: "dg-row-action-btn",
+          style: { color: action.color || "var(--text-secondary)" },
+          onClick: () => action.onClick(item)
+        },
+        action.icon
+      )))));
+    })()));
+  }))), filteredData.length === 0 && /* @__PURE__ */ React75.createElement("div", { className: "dg-empty-state" }, /* @__PURE__ */ React75.createElement("svg", { className: "dg-empty-icon", viewBox: "0 0 200 160", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "100", rx: "8", fill: "var(--hover-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "30", width: "160", height: "28", rx: "8", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("rect", { x: "20", y: "50", width: "160", height: "8", rx: "0", fill: "var(--border-color)", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "72", y1: "30", x2: "72", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "128", y1: "30", x2: "128", y2: "130", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "78", x2: "180", y2: "78", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("line", { x1: "20", y1: "104", x2: "180", y2: "104", stroke: "var(--border-color)", strokeWidth: "1" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "87", width: "28", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.4" }), /* @__PURE__ */ React75.createElement("rect", { x: "32", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "84", y: "113", width: "32", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("rect", { x: "140", y: "113", width: "20", height: "6", rx: "3", fill: "var(--border-color)", opacity: "0.3" }), /* @__PURE__ */ React75.createElement("circle", { cx: "148", cy: "108", r: "26", fill: "var(--surface-color)", stroke: "var(--border-color)", strokeWidth: "1.5" }), /* @__PURE__ */ React75.createElement("circle", { cx: "145", cy: "105", r: "10", stroke: "var(--text-secondary)", strokeWidth: "2.5", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "152", y1: "113", x2: "161", y2: "122", stroke: "var(--text-secondary)", strokeWidth: "2.5", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "141", y1: "101", x2: "149", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" }), /* @__PURE__ */ React75.createElement("line", { x1: "149", y1: "101", x2: "141", y2: "109", stroke: "var(--text-secondary)", strokeWidth: "2", strokeLinecap: "round", opacity: "0.5" })), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-title" }, "No data found"), /* @__PURE__ */ React75.createElement("p", { className: "dg-empty-subtitle" }, filterText || hasActiveFilters ? "Try adjusting your search or filters" : "No records to display"))), customFooter ? /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination dg-pagination--custom" }, customFooter) : pagination && !tOpts.hideFooter && /* @__PURE__ */ React75.createElement("div", { className: "dg-pagination" }, /* @__PURE__ */ React75.createElement("div", { className: "dg-page-info" }, /* @__PURE__ */ React75.createElement(Tooltip, { title: "Export CSV", placement: "top" }, /* @__PURE__ */ React75.createElement("button", { className: "dg-icon-btn", onClick: handleExport }, /* @__PURE__ */ React75.createElement(Download, { size: 14 }))), /* @__PURE__ */ React75.createElement("div", { className: "dg-per-page" }, /* @__PURE__ */ React75.createElement("span", null, "Rows per page:"), /* @__PURE__ */ React75.createElement(
     FilterSelect,
     {
       placement: "top",
@@ -5148,6 +5415,17 @@ function DataGrid({
       setShowAdvancedFilter(true);
       setActiveMenu(null);
     } }, /* @__PURE__ */ React75.createElement(Filter, { size: 14 }), " Filter\u2026"),
+    !disableRowGrouping && activeMenuCol?.groupable !== false && (() => {
+      const gField = String(activeMenuCol?.field ?? "");
+      const isGrouped = activeGroupingModel.includes(gField);
+      return isGrouped ? /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
+        removeFromGrouping(gField);
+        setActiveMenu(null);
+      } }, /* @__PURE__ */ React75.createElement(Layers, { size: 14 }), " Ungroup") : /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
+        addToGrouping(gField);
+        setActiveMenu(null);
+      } }, /* @__PURE__ */ React75.createElement(Layers, { size: 14 }), " Group by");
+    })(),
     /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => toggleHide(activeMenu) }, /* @__PURE__ */ React75.createElement(EyeOff, { size: 14 }), " Hide column"),
     /* @__PURE__ */ React75.createElement("button", { className: "dg-menu-item", onClick: () => {
       setShowManageColumns(true);
@@ -9480,7 +9758,7 @@ function UserSelectionField({
 }
 
 // lib/SmartSelect/SmartSelect.tsx
-import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25 } from "react";
+import React108, { useCallback as useCallback11, useEffect as useEffect21, useMemo as useMemo3, useRef as useRef25, useState as useState26 } from "react";
 var CheckIcon3 = () => /* @__PURE__ */ React108.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React108.createElement("polyline", { points: "20 6 9 17 4 12" }));
 function flattenTree(options, getChildren, depth = 0) {
   return options.flatMap((opt) => [
@@ -9536,6 +9814,14 @@ function SmartSelect({
   useEffect21(() => () => {
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
   }, []);
+  const [inputValue, setInputValue] = useState26(
+    () => !multiple && value != null ? getOptionLabel(value) : ""
+  );
+  useEffect21(() => {
+    if (!multiple) {
+      setInputValue(value != null ? getOptionLabel(value) : "");
+    }
+  }, [value, multiple, getOptionLabel]);
   const getValue = useCallback11(
     (o) => getOptionValue ? getOptionValue(o) : String(getOptionLabel(o)),
     [getOptionValue, getOptionLabel]
@@ -9566,14 +9852,15 @@ function SmartSelect({
     }
     return value != null ? /* @__PURE__ */ new Set([getValue(value)]) : /* @__PURE__ */ new Set();
   }, [multiple, value, getValue]);
-  const handleInputChange = useCallback11((_, inputValue) => {
+  const handleInputChange = useCallback11((_, inputValue2) => {
+    setInputValue(inputValue2);
     if (!onSearchChange) return;
     if (debounceTimer.current) clearTimeout(debounceTimer.current);
-    if (!inputValue) {
+    if (!inputValue2) {
       onSearchChange("", 0);
       return;
     }
-    const q = inputValue.toLowerCase();
+    const q = inputValue2.toLowerCase();
     let localCount = 0;
     for (const opt of flatOptionsList) {
       if (getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)) {
@@ -9584,10 +9871,10 @@ function SmartSelect({
     if (localCount >= searchThreshold) return;
     const needed = searchThreshold - localCount;
     if (debounceMs <= 0) {
-      onSearchChange(inputValue, needed);
+      onSearchChange(inputValue2, needed);
     } else {
       debounceTimer.current = setTimeout(() => {
-        onSearchChange(inputValue, needed);
+        onSearchChange(inputValue2, needed);
       }, debounceMs);
     }
   }, [onSearchChange, debounceMs, searchThreshold, flatOptionsList, getOptionLabel, getOptionSubLabel]);
@@ -9666,13 +9953,13 @@ function SmartSelect({
       /* @__PURE__ */ React108.createElement("span", { className: "rf-select__option-check", "aria-hidden": "true" }, /* @__PURE__ */ React108.createElement(CheckIcon3, null))
     );
   }, [depthMap, getValue, getOptionLabel, getOptionSubLabel, selectedKeys]);
-  const computedFilterOptions = useCallback11((opts, inputValue) => {
-    if (filterOptionsProp) return filterOptionsProp(opts, inputValue);
+  const computedFilterOptions = useCallback11((opts, inputValue2) => {
+    if (filterOptionsProp) return filterOptionsProp(opts, inputValue2);
     if (multiple) {
       const selected = opts.filter((o) => selectedKeys.has(getValue(o)));
       const unselected = opts.filter((o) => !selectedKeys.has(getValue(o)));
-      if (!inputValue) return [...selected, ...unselected];
-      const q2 = inputValue.toLowerCase();
+      if (!inputValue2) return [...selected, ...unselected];
+      const q2 = inputValue2.toLowerCase();
       const filteredUnselected = unselected.filter(
         (opt) => getOptionLabel(opt).toLowerCase().includes(q2) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q2)
       ).slice(0, searchThreshold);
@@ -9680,7 +9967,7 @@ function SmartSelect({
     }
     if (value != null) {
       const selectedLabel = getOptionLabel(value);
-      if (inputValue === selectedLabel) {
+      if (inputValue2 === selectedLabel) {
         const selectedKey = getValue(value);
         return [
           ...opts.filter((o) => getValue(o) === selectedKey),
@@ -9688,8 +9975,8 @@ function SmartSelect({
         ];
       }
     }
-    if (!inputValue) return opts;
-    const q = inputValue.toLowerCase();
+    if (!inputValue2) return opts;
+    const q = inputValue2.toLowerCase();
     return opts.filter(
       (opt) => getOptionLabel(opt).toLowerCase().includes(q) || (getOptionSubLabel?.(opt) ?? "").toLowerCase().includes(q)
     ).slice(0, searchThreshold);
@@ -9700,6 +9987,7 @@ function SmartSelect({
       options: displayOptions,
       value: value ?? (multiple ? [] : null),
       onChange: handleChange,
+      inputValue: multiple ? void 0 : inputValue,
       onInputChange: handleInputChange,
       multiple,
       limitTags,
@@ -9726,7 +10014,7 @@ function SmartSelect({
 }
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState35, useRef as useRef33, useEffect as useEffect30 } from "react";
+import React119, { useMemo as useMemo5, useCallback as useCallback16, useState as useState36, useRef as useRef33, useEffect as useEffect30 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
@@ -9752,9 +10040,9 @@ import { ReactRenderer } from "@tiptap/react";
 import tippy from "tippy.js";
 
 // lib/RufousTextEditor/MentionList.tsx
-import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState26 } from "react";
+import React109, { forwardRef as forwardRef11, useEffect as useEffect22, useImperativeHandle, useState as useState27 } from "react";
 var MentionList = forwardRef11((props, ref) => {
-  const [selectedIndex, setSelectedIndex] = useState26(0);
+  const [selectedIndex, setSelectedIndex] = useState27(0);
   const selectItem = (index) => {
     const item = props.items[index];
     if (item) {
@@ -9848,18 +10136,18 @@ function createMentionSuggestion(users) {
 }
 
 // lib/RufousTextEditor/Toolbar.tsx
-import React115, { useState as useState31, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
+import React115, { useState as useState32, useRef as useRef29, useEffect as useEffect26, useCallback as useCallback15 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React110, { useState as useState27, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+import React110, { useState as useState28, useEffect as useEffect23, useRef as useRef26, useCallback as useCallback12, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
 var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
-  const [speaking, setSpeaking] = useState27(false);
-  const [paused, setPaused] = useState27(false);
-  const [voices, setVoices] = useState27([]);
-  const [selectedVoice, setSelectedVoice] = useState27("");
-  const [rate, setRate] = useState27(1);
-  const [showPanel, setShowPanel] = useState27(false);
+  const [speaking, setSpeaking] = useState28(false);
+  const [paused, setPaused] = useState28(false);
+  const [voices, setVoices] = useState28([]);
+  const [selectedVoice, setSelectedVoice] = useState28("");
+  const [rate, setRate] = useState28(1);
+  const [showPanel, setShowPanel] = useState28(false);
   const utteranceRef = useRef26(null);
   const panelRef = useRef26(null);
   useEffect23(() => {
@@ -9997,12 +10285,12 @@ var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React111, { useState as useState28, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+import React111, { useState as useState29, useRef as useRef27, useCallback as useCallback13, useEffect as useEffect24, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
 var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
-  const [listening, setListening] = useState28(false);
-  const [showPanel, setShowPanel] = useState28(false);
-  const [language, setLanguage] = useState28("en-US");
-  const [interim, setInterim] = useState28("");
+  const [listening, setListening] = useState29(false);
+  const [showPanel, setShowPanel] = useState29(false);
+  const [language, setLanguage] = useState29("en-US");
+  const [interim, setInterim] = useState29("");
   const recognitionRef = useRef27(null);
   const panelRef = useRef27(null);
   const isListeningRef = useRef27(false);
@@ -10159,7 +10447,7 @@ var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
-import React112, { useState as useState29, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
+import React112, { useState as useState30, useRef as useRef28, useEffect as useEffect25, useCallback as useCallback14 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 var AI_COMMANDS = [
   { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
@@ -10207,14 +10495,14 @@ var callOpenAI = async (prompt, text, previousResults = []) => {
   return data.choices?.[0]?.message?.content?.trim() || "";
 };
 var AICommands = ({ editor, onAICommand }) => {
-  const [open, setOpen] = useState29(false);
-  const [showModal, setShowModal] = useState29(false);
-  const [loading, setLoading] = useState29(false);
-  const [promptText, setPromptText] = useState29("");
-  const [resultText, setResultText] = useState29("");
-  const [originalText, setOriginalText] = useState29("");
-  const [selectionRange, setSelectionRange] = useState29(null);
-  const [previousResults, setPreviousResults] = useState29([]);
+  const [open, setOpen] = useState30(false);
+  const [showModal, setShowModal] = useState30(false);
+  const [loading, setLoading] = useState30(false);
+  const [promptText, setPromptText] = useState30("");
+  const [resultText, setResultText] = useState30("");
+  const [originalText, setOriginalText] = useState30("");
+  const [selectionRange, setSelectionRange] = useState30(null);
+  const [previousResults, setPreviousResults] = useState30([]);
   const panelRef = useRef28(null);
   useEffect25(() => {
     const handleClick = (e) => {
@@ -10364,7 +10652,7 @@ var AICommands = ({ editor, onAICommand }) => {
 var AICommands_default = AICommands;
 
 // lib/RufousTextEditor/TranslateModal.tsx
-import React113, { useState as useState30, useMemo as useMemo4 } from "react";
+import React113, { useState as useState31, useMemo as useMemo4 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 var LANGUAGES = [
   { code: "af", name: "Afrikaans" },
@@ -10504,12 +10792,12 @@ async function translateText(text, sourceLang, targetLang) {
   return null;
 }
 var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarget, onLangChange }) => {
-  const [sourceLang, setSourceLang] = useState30(initialSource || "en");
-  const [targetLang, setTargetLang] = useState30(initialTarget || "hi");
-  const [sourceFilter, setSourceFilter] = useState30("");
-  const [targetFilter, setTargetFilter] = useState30("");
-  const [translating, setTranslating] = useState30(false);
-  const [error, setError] = useState30("");
+  const [sourceLang, setSourceLang] = useState31(initialSource || "en");
+  const [targetLang, setTargetLang] = useState31(initialTarget || "hi");
+  const [sourceFilter, setSourceFilter] = useState31("");
+  const [targetFilter, setTargetFilter] = useState31("");
+  const [translating, setTranslating] = useState31(false);
+  const [error, setError] = useState31("");
   const filteredSource = useMemo4(() => LANGUAGES.filter(
     (l) => l.name.toLowerCase().includes(sourceFilter.toLowerCase()) || l.code.toLowerCase().includes(sourceFilter.toLowerCase())
   ), [sourceFilter]);
@@ -11413,7 +11701,7 @@ var SPECIAL_CHARS = [
   "\xA2"
 ];
 var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
-  const [open, setOpen] = useState31(false);
+  const [open, setOpen] = useState32(false);
   const ref = useRef29(null);
   const menuRef = useRef29(null);
   useEffect26(() => {
@@ -11471,8 +11759,8 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
   ));
 };
 var InsertPanel = ({ editor, onClose, mode = "video" }) => {
-  const [activeTab, setActiveTab] = useState31("link");
-  const [url, setUrl] = useState31("");
+  const [activeTab, setActiveTab] = useState32("link");
+  const [url, setUrl] = useState32("");
   const extractIframeSrc = (html) => {
     const match = html.match(/<iframe[^>]+src=["']([^"']+)["']/);
     return match ? match[1] : null;
@@ -11542,9 +11830,9 @@ var InsertPanel = ({ editor, onClose, mode = "video" }) => {
   ), /* @__PURE__ */ React115.createElement("button", { className: "insert-panel-btn", onClick: handleInsert }, "Insert"));
 };
 var ImagePanel = ({ editor, onClose, onImageUpload }) => {
-  const [activeTab, setActiveTab] = useState31("upload");
-  const [url, setUrl] = useState31("");
-  const [isDragging, setIsDragging] = useState31(false);
+  const [activeTab, setActiveTab] = useState32("upload");
+  const [url, setUrl] = useState32("");
+  const [isDragging, setIsDragging] = useState32(false);
   const fileInputRef = useRef29(null);
   const getBase64 = (file) => {
     return new Promise((resolve, reject) => {
@@ -11635,8 +11923,8 @@ var ImagePanel = ({ editor, onClose, onImageUpload }) => {
 };
 var MAX_GRID = 10;
 var TableGridSelector = ({ editor, onClose }) => {
-  const [hoverRow, setHoverRow] = useState31(0);
-  const [hoverCol, setHoverCol] = useState31(0);
+  const [hoverRow, setHoverRow] = useState32(0);
+  const [hoverCol, setHoverCol] = useState32(0);
   const handleInsert = () => {
     if (!editor || hoverRow === 0 || hoverCol === 0) return;
     editor.chain().focus().insertTable({ rows: hoverRow, cols: hoverCol, withHeaderRow: true }).run();
@@ -11674,9 +11962,9 @@ var TableGridSelector = ({ editor, onClose }) => {
   )));
 };
 var ColorPickerPanel = ({ editor, onClose }) => {
-  const [tab, setTab] = useState31("background");
-  const [activeBg, setActiveBg] = useState31(() => editor.getAttributes("highlight").color || null);
-  const [activeText, setActiveText] = useState31(() => editor.getAttributes("textStyle").color || null);
+  const [tab, setTab] = useState32("background");
+  const [activeBg, setActiveBg] = useState32(() => editor.getAttributes("highlight").color || null);
+  const [activeText, setActiveText] = useState32(() => editor.getAttributes("textStyle").color || null);
   const activeColor = tab === "background" ? activeBg : activeText;
   const applyColor = (color) => {
     if (tab === "background") {
@@ -11721,8 +12009,8 @@ var ColorPickerPanel = ({ editor, onClose }) => {
   )))), /* @__PURE__ */ React115.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React115.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React115.createElement(Tooltip, { title: "Remove color", placement: "top" }, /* @__PURE__ */ React115.createElement("button", { className: "color-picker-remove", onClick: removeColor }, "\u2713"))));
 };
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
-  const [, setEditorState] = useState31(0);
-  const [todoEnabled, setTodoEnabled] = useState31(false);
+  const [, setEditorState] = useState32(0);
+  const [todoEnabled, setTodoEnabled] = useState32(false);
   const ttsRef = useRef29(null);
   const sttRef = useRef29(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
@@ -11736,11 +12024,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     if (!editor) return;
     editor.chain().focus().insertContent(char).run();
   }, [editor]);
-  const [copySuccess, setCopySuccess] = useState31(false);
-  const [translateSource, setTranslateSource] = useState31("en");
-  const [translateTarget, setTranslateTarget] = useState31("hi");
-  const [translateStatus, setTranslateStatus] = useState31("");
-  const [showTranslateModal, setShowTranslateModal] = useState31(false);
+  const [copySuccess, setCopySuccess] = useState32(false);
+  const [translateSource, setTranslateSource] = useState32("en");
+  const [translateTarget, setTranslateTarget] = useState32("hi");
+  const [translateStatus, setTranslateStatus] = useState32("");
+  const [showTranslateModal, setShowTranslateModal] = useState32(false);
   const handleCopy = useCallback15(async () => {
     if (!editor) return;
     const { from, to, empty } = editor.state.selection;
@@ -12349,7 +12637,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
 var Toolbar_default = Toolbar;
 
 // lib/RufousTextEditor/ImageToolbar.tsx
-import React116, { useState as useState32, useEffect as useEffect27, useRef as useRef30 } from "react";
+import React116, { useState as useState33, useEffect as useEffect27, useRef as useRef30 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 var ALIGNMENTS = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12357,17 +12645,17 @@ var ALIGNMENTS = [
   { value: "right", label: "Right", icon: "\u2263" }
 ];
 var ImagePropertiesModal = ({ editor, node, onClose }) => {
-  const [activeTab, setActiveTab] = useState32("image");
-  const [src, setSrc] = useState32(node?.attrs?.src || "");
-  const [title, setTitle] = useState32(node?.attrs?.title || "");
-  const [alt, setAlt] = useState32(node?.attrs?.alt || "");
-  const [link, setLink] = useState32("");
-  const [openInNewTab, setOpenInNewTab] = useState32(false);
-  const [width, setWidth] = useState32("");
-  const [height, setHeight] = useState32("");
-  const [lockRatio, setLockRatio] = useState32(true);
-  const [naturalWidth, setNaturalWidth] = useState32(0);
-  const [naturalHeight, setNaturalHeight] = useState32(0);
+  const [activeTab, setActiveTab] = useState33("image");
+  const [src, setSrc] = useState33(node?.attrs?.src || "");
+  const [title, setTitle] = useState33(node?.attrs?.title || "");
+  const [alt, setAlt] = useState33(node?.attrs?.alt || "");
+  const [link, setLink] = useState33("");
+  const [openInNewTab, setOpenInNewTab] = useState33(false);
+  const [width, setWidth] = useState33("");
+  const [height, setHeight] = useState33("");
+  const [lockRatio, setLockRatio] = useState33(true);
+  const [naturalWidth, setNaturalWidth] = useState33(0);
+  const [naturalHeight, setNaturalHeight] = useState33(0);
   useEffect27(() => {
     if (src) {
       const img = new window.Image();
@@ -12486,11 +12774,11 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
   ), "Open link in new tab")) : /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ React116.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ React116.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ React116.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React116.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React116.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var ImageToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState32(false);
-  const [showAlign, setShowAlign] = useState32(false);
-  const [showVAlign, setShowVAlign] = useState32(false);
-  const [copyStatus, setCopyStatus] = useState32("");
-  const [pos, setPos] = useState32(null);
+  const [showModal, setShowModal] = useState33(false);
+  const [showAlign, setShowAlign] = useState33(false);
+  const [showVAlign, setShowVAlign] = useState33(false);
+  const [copyStatus, setCopyStatus] = useState33("");
+  const [pos, setPos] = useState33(null);
   const toolbarRef = useRef30(null);
   useEffect27(() => {
     if (!editor) return;
@@ -12628,7 +12916,7 @@ var ImageToolbar = ({ editor }) => {
 var ImageToolbar_default = ImageToolbar;
 
 // lib/RufousTextEditor/VideoToolbar.tsx
-import React117, { useState as useState33, useEffect as useEffect28, useRef as useRef31 } from "react";
+import React117, { useState as useState34, useEffect as useEffect28, useRef as useRef31 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 var ALIGNMENTS2 = [
   { value: "left", label: "Left", icon: "\u2630" },
@@ -12637,10 +12925,10 @@ var ALIGNMENTS2 = [
 ];
 var VIDEO_TYPES = ["youtube", "video"];
 var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
-  const [src, setSrc] = useState33(node?.attrs?.src || "");
-  const [width, setWidth] = useState33(String(node?.attrs?.width || 640));
-  const [height, setHeight] = useState33(String(node?.attrs?.height || 360));
-  const [lockRatio, setLockRatio] = useState33(true);
+  const [src, setSrc] = useState34(node?.attrs?.src || "");
+  const [width, setWidth] = useState34(String(node?.attrs?.width || 640));
+  const [height, setHeight] = useState34(String(node?.attrs?.height || 360));
+  const [lockRatio, setLockRatio] = useState34(true);
   const handleWidthChange = (val) => {
     setWidth(val);
     if (lockRatio) {
@@ -12738,11 +13026,11 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
   )))), /* @__PURE__ */ React117.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React117.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ React117.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var VideoToolbar = ({ editor }) => {
-  const [showModal, setShowModal] = useState33(false);
-  const [showSize, setShowSize] = useState33(false);
-  const [showAlign, setShowAlign] = useState33(false);
-  const [copyStatus, setCopyStatus] = useState33("");
-  const [pos, setPos] = useState33(null);
+  const [showModal, setShowModal] = useState34(false);
+  const [showSize, setShowSize] = useState34(false);
+  const [showAlign, setShowAlign] = useState34(false);
+  const [copyStatus, setCopyStatus] = useState34("");
+  const [pos, setPos] = useState34(null);
   const toolbarRef = useRef31(null);
   useEffect28(() => {
     if (!editor) return;
@@ -12868,7 +13156,7 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/TableToolbar.tsx
-import React118, { useState as useState34, useEffect as useEffect29, useRef as useRef32 } from "react";
+import React118, { useState as useState35, useEffect as useEffect29, useRef as useRef32 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 var IconAddRowBefore = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
 var IconAddRowAfter = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React118.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
@@ -12881,7 +13169,7 @@ var IconMergeCells = () => /* @__PURE__ */ React118.createElement("svg", { width
 var IconSplitCell = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
 var IconToggleHeader = () => /* @__PURE__ */ React118.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React118.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React118.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
 var TableToolbar = ({ editor }) => {
-  const [pos, setPos] = useState34(null);
+  const [pos, setPos] = useState35(null);
   const toolbarRef = useRef32(null);
   useEffect29(() => {
     if (!editor) return;
@@ -13248,13 +13536,13 @@ var RufousTextEditor = ({
     };
   }, [editor]);
   const setLinkRef = useRef33(null);
-  const [linkModalOpen, setLinkModalOpen] = useState35(false);
-  const [linkUrl, setLinkUrl] = useState35("");
-  const [linkText, setLinkText] = useState35("");
-  const [linkClassName, setLinkClassName] = useState35("");
-  const [linkNewTab, setLinkNewTab] = useState35(true);
-  const [linkNoFollow, setLinkNoFollow] = useState35(true);
-  const [linkSelection, setLinkSelection] = useState35(null);
+  const [linkModalOpen, setLinkModalOpen] = useState36(false);
+  const [linkUrl, setLinkUrl] = useState36("");
+  const [linkText, setLinkText] = useState36("");
+  const [linkClassName, setLinkClassName] = useState36("");
+  const [linkNewTab, setLinkNewTab] = useState36(true);
+  const [linkNoFollow, setLinkNoFollow] = useState36(true);
+  const [linkSelection, setLinkSelection] = useState36(null);
   const setLink = useCallback16(() => {
     if (!editor) return;
     const attrs = editor.getAttributes("link");
@@ -13380,7 +13668,7 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveStatus, setSaveStatus] = useState35("");
+  const [saveStatus, setSaveStatus] = useState36("");
   const handleSave = useCallback16(() => {
     if (!editor || !onSaveProp) return;
     onSaveProp(editor.getHTML(), editor.getJSON());
@@ -13392,7 +13680,7 @@ var RufousTextEditor = ({
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
   const providerValue = useMemo5(() => ({ editor }), [editor]);
-  const [isFullscreen, setIsFullscreen] = useState35(false);
+  const [isFullscreen, setIsFullscreen] = useState36(false);
   const toggleFullscreen = useCallback16(() => setIsFullscreen((prev) => !prev), []);
   const wrapperJsx = /* @__PURE__ */ React119.createElement(
     "div",
@@ -13715,10 +14003,10 @@ function getCitiesByName(name, exact = false) {
 }
 
 // lib/utils/useLocationSearch.ts
-import { useState as useState36, useEffect as useEffect31, useRef as useRef34, useCallback as useCallback17 } from "react";
+import { useState as useState37, useEffect as useEffect31, useRef as useRef34, useCallback as useCallback17 } from "react";
 function useDebounced(searcher, debounceMs) {
-  const [query, setQuery] = useState36("");
-  const [results, setResults] = useState36([]);
+  const [query, setQuery] = useState37("");
+  const [results, setResults] = useState37([]);
   const timer = useRef34(null);
   useEffect31(() => () => {
     if (timer.current) clearTimeout(timer.current);