@bmsuisse/datagrid 0.26.0 → 0.28.0

package/dist/index.js

@@ -1488,7 +1488,11 @@ function EnumEditor({
 }
 
 // src/edit/NumberEditor.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState5 } from "react";
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+function textFromValue(value) {
+  return value === null || value === void 0 ? "" : String(value);
+}
 function NumberEditor({
   column,
   rowId,
@@ -1498,6 +1502,13 @@ function NumberEditor({
   autoFocus
 }) {
   const errorId = editErrorId(rowId, column.id);
+  const [text, setText] = useState5(() => textFromValue(value));
+  const lastEmittedRef = useRef4(value);
+  useEffect4(() => {
+    if (value === lastEmittedRef.current) return;
+    lastEmittedRef.current = value;
+    setText(textFromValue(value));
+  }, [value]);
   return /* @__PURE__ */ jsxs12("div", { children: [
     /* @__PURE__ */ jsx19(
       Input,
@@ -1509,8 +1520,13 @@ function NumberEditor({
         "aria-describedby": error ? errorId : void 0,
         "data-testid": `edit-${rowId}-${column.id}`,
         autoFocus,
-        value: value === null || value === void 0 ? "" : String(value),
-        onChange: (event) => onChange(event.target.value === "" ? null : Number(event.target.value))
+        value: text,
+        onChange: (event) => {
+          setText(event.target.value);
+          const next = event.target.value === "" ? null : Number(event.target.value);
+          lastEmittedRef.current = next;
+          onChange(next);
+        }
       }
     ),
     error && /* @__PURE__ */ jsx19(EditFieldError, { id: errorId, message: error })
@@ -1565,18 +1581,246 @@ function renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocu
   }
 }
 
+// src/edit/editingState.ts
+import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+function editValuesEqual(a, b) {
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  return a === b;
+}
+function useEditingState(editing, getRowId) {
+  const [pendingEdits, setPendingEdits] = useState6(/* @__PURE__ */ new Map());
+  const [editErrors, setEditErrors] = useState6(/* @__PURE__ */ new Map());
+  const hasEditErrors = editErrors.size > 0;
+  const [activeRowId, setActiveRowId] = useState6(null);
+  const [autoFocusTarget, setAutoFocusTarget] = useState6(null);
+  function activateRow(rowId, columnId) {
+    setActiveRowId(rowId);
+    setAutoFocusTarget({ rowId, columnId });
+  }
+  useEffect5(() => {
+    if (autoFocusTarget) setAutoFocusTarget(null);
+  }, [autoFocusTarget]);
+  function commitEdit(column, row, value) {
+    const rowId = getRowId(row);
+    const baseline = getColumnValue(column, row);
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      const values = new Map(next.get(rowId)?.values);
+      if (editValuesEqual(value, baseline)) values.delete(column.id);
+      else values.set(column.id, value);
+      if (values.size === 0) next.delete(rowId);
+      else next.set(rowId, { row, values });
+      return next;
+    });
+    const message = column.validateEdit?.(value, row);
+    setEditErrors((prev) => {
+      const next = new Map(prev);
+      const rowErrors = new Map(next.get(rowId));
+      if (message) rowErrors.set(column.id, message);
+      else rowErrors.delete(column.id);
+      if (rowErrors.size === 0) next.delete(rowId);
+      else next.set(rowId, rowErrors);
+      return next;
+    });
+  }
+  async function handleSaveEdits() {
+    if (!editing || pendingEdits.size === 0) return;
+    const snapshot = pendingEdits;
+    const edited = [...snapshot.entries()].map(([rowId, entry]) => ({
+      rowId,
+      row: entry.row,
+      values: Object.fromEntries(entry.values)
+    }));
+    try {
+      await editing.onSave(edited);
+    } catch {
+      return;
+    }
+    const snapshotRowIds = new Set(snapshot.keys());
+    const survivedRowIds = /* @__PURE__ */ new Set();
+    const clearedErrorKeys = [];
+    setPendingEdits((prev) => {
+      const next = new Map(prev);
+      for (const [rowId, snapshotEntry] of snapshot) {
+        const current = next.get(rowId);
+        if (!current) continue;
+        const values = new Map(current.values);
+        for (const [columnId, snapshotValue] of snapshotEntry.values) {
+          if (values.has(columnId) && editValuesEqual(values.get(columnId), snapshotValue)) {
+            values.delete(columnId);
+            clearedErrorKeys.push({ rowId, columnId });
+          }
+        }
+        if (values.size === 0) {
+          next.delete(rowId);
+        } else {
+          next.set(rowId, { row: current.row, values });
+          survivedRowIds.add(rowId);
+        }
+      }
+      return next;
+    });
+    setEditErrors((prev) => {
+      if (clearedErrorKeys.length === 0) return prev;
+      const next = new Map(prev);
+      for (const { rowId, columnId } of clearedErrorKeys) {
+        const rowErrors = next.get(rowId);
+        if (!rowErrors) continue;
+        const nextRowErrors = new Map(rowErrors);
+        nextRowErrors.delete(columnId);
+        if (nextRowErrors.size === 0) next.delete(rowId);
+        else next.set(rowId, nextRowErrors);
+      }
+      return next;
+    });
+    setActiveRowId(
+      (prev) => prev !== null && snapshotRowIds.has(prev) && !survivedRowIds.has(prev) ? null : prev
+    );
+  }
+  function handleDiscardEdits() {
+    setPendingEdits(/* @__PURE__ */ new Map());
+    setEditErrors(/* @__PURE__ */ new Map());
+    setActiveRowId(null);
+    editing?.onDiscard?.();
+  }
+  const ctx = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
+  const ctxRef = useRef5(void 0);
+  ctxRef.current = ctx;
+  return { pendingEdits, editErrors, hasEditErrors, ctx, ctxRef, handleSaveEdits, handleDiscardEdits };
+}
+
+// src/edit/renderEditableCell.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+function renderEditableCell(column, row, rawValue, ctx) {
+  const staticContent = (value2) => column.cell ? column.cell(value2, row) : defaultFormat(column, value2);
+  if (!ctx || !isEditable(column, row)) return staticContent(rawValue);
+  const rowId = ctx.getRowId(row);
+  const pendingRow = ctx.pendingEdits.get(rowId);
+  const value = pendingRow?.values.has(column.id) ? pendingRow.values.get(column.id) : rawValue;
+  if (ctx.activeRowId === rowId) {
+    const error = ctx.editErrors.get(rowId)?.get(column.id);
+    const autoFocus = ctx.autoFocusTarget?.rowId === rowId && ctx.autoFocusTarget.columnId === column.id;
+    const onChange = (next) => ctx.onEdit(column, row, next);
+    const editor = column.renderEditCell ? column.renderEditCell(value, row, onChange, error, autoFocus) : renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus);
+    return /* @__PURE__ */ jsx22(
+      "div",
+      {
+        onKeyDown: (event) => {
+          if (event.key !== "Escape") return;
+          if (!event.currentTarget.contains(event.target)) return;
+          event.stopPropagation();
+          ctx.onEdit(column, row, getColumnValue(column, row));
+        },
+        children: editor
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx22(
+    "span",
+    {
+      role: "button",
+      tabIndex: 0,
+      "data-testid": `cell-${rowId}-${column.id}`,
+      className: "block w-full cursor-text",
+      onClick: (event) => {
+        stopRowClick(event);
+        ctx.onActivateRow(rowId, column.id);
+      },
+      onKeyDown: (event) => {
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        stopRowClick(event);
+        ctx.onActivateRow(rowId, column.id);
+      },
+      children: staticContent(value)
+    }
+  );
+}
+
+// src/edit/EditingBar.tsx
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function resolveEditLabel(label, changedRowCount, fallback) {
+  if (label === void 0) return fallback(changedRowCount);
+  return typeof label === "function" ? label(changedRowCount) : label;
+}
+function describeErrorRows(editErrors) {
+  const rowIds = [...editErrors.keys()];
+  const shown = rowIds.slice(0, 3);
+  const suffix = rowIds.length > shown.length ? `, and ${rowIds.length - shown.length} more` : "";
+  return `row${rowIds.length === 1 ? "" : "s"} ${shown.join(", ")}${suffix}`;
+}
+function EditingBar({
+  editing,
+  pendingRowCount,
+  editErrors,
+  onSave,
+  onDiscard,
+  testIdPrefix = "datagrid"
+}) {
+  const hasEditErrors = editErrors.size > 0;
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      "data-testid": `${testIdPrefix}-edit-bar`,
+      className: "flex shrink-0 flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/50 px-3 py-2 text-sm",
+      children: [
+        /* @__PURE__ */ jsxs14("span", { "aria-live": "polite", children: [
+          pendingRowCount,
+          " row",
+          pendingRowCount === 1 ? "" : "s",
+          " changed",
+          hasEditErrors && /* @__PURE__ */ jsxs14("span", { className: "ml-2 text-destructive", children: [
+            "Fix the highlighted errors before saving (",
+            describeErrorRows(editErrors),
+            ")."
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx23(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              "data-testid": `${testIdPrefix}-discard-edits`,
+              disabled: editing.saving,
+              onClick: onDiscard,
+              children: resolveEditLabel(editing.discardLabel, pendingRowCount, () => "Discard")
+            }
+          ),
+          /* @__PURE__ */ jsx23(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              "data-testid": `${testIdPrefix}-save-edits`,
+              disabled: editing.saving || hasEditErrors,
+              onClick: onSave,
+              children: resolveEditLabel(
+                editing.saveLabel,
+                pendingRowCount,
+                (count) => `Save ${count} change${count === 1 ? "" : "s"}`
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/column-selector/ColumnSelector.tsx
 import { Columns3 } from "lucide-react";
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect6 } from "react";
 
 // src/components/ui/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { X } from "lucide-react";
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1585,9 +1829,9 @@ var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs14(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx22(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs14(
+var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx24(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs15(
     DialogPrimitive.Content,
     {
       ref,
@@ -1598,9 +1842,9 @@ var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsxs14(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
-          /* @__PURE__ */ jsx22(X, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx22("span", { className: "sr-only", children: "Close" })
+        /* @__PURE__ */ jsxs15(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx24(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx24("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1610,10 +1854,10 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx22("div", { className: cn("flex flex-col gap-1.5", className), ...props });
-var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
+}) => /* @__PURE__ */ jsx24("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
   DialogPrimitive.Description,
   {
     ref,
@@ -1681,7 +1925,7 @@ function canHideGroup(columns, visibility, groupColumnIds) {
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function ColumnSelector({
   columns,
   visibility,
@@ -1691,7 +1935,7 @@ function ColumnSelector({
   open,
   onOpenChange
 }) {
-  useEffect4(() => {
+  useEffect6(() => {
     if (!persistKey) return;
     const restored = readPersistedVisibility(persistKey);
     if (restored) onVisibilityChange({ ...visibility, ...restored });
@@ -1706,20 +1950,20 @@ function ColumnSelector({
   }
   const totalVisible = countVisible(columns, visibility);
   const groups = groupColumns(columns);
-  return /* @__PURE__ */ jsxs15(Dialog, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsx23(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx23(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx23(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
-    /* @__PURE__ */ jsxs15(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
-      /* @__PURE__ */ jsx23(DialogHeader, { children: /* @__PURE__ */ jsx23(DialogTitle, { children: "Columns" }) }),
-      /* @__PURE__ */ jsx23("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs15("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
-        group && /* @__PURE__ */ jsx23("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
+  return /* @__PURE__ */ jsxs16(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx25(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx25(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx25(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsxs16(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
+      /* @__PURE__ */ jsx25(DialogHeader, { children: /* @__PURE__ */ jsx25(DialogTitle, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs16("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
+        group && /* @__PURE__ */ jsx25("span", { className: "border-b pb-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group }),
         groupCols.map((column) => {
           const visible = isColumnVisible(visibility, column.id);
-          return /* @__PURE__ */ jsxs15(
+          return /* @__PURE__ */ jsxs16(
             "label",
             {
               className: "flex items-center gap-2 rounded-md px-1.5 py-1 text-sm hover:bg-accent/50 focus-within:bg-accent/50",
               children: [
-                /* @__PURE__ */ jsx23(
+                /* @__PURE__ */ jsx25(
                   Checkbox,
                   {
                     checked: visible,
@@ -1756,10 +2000,10 @@ import { useMemo as useMemo3 } from "react";
 // src/components/ui/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import { forwardRef as forwardRef7 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx24(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx24(
+var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -1772,7 +2016,7 @@ var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -1785,7 +2029,7 @@ var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /*
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -1794,7 +2038,7 @@ var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -1805,16 +2049,16 @@ var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 
 // src/menu/ActionsMenu.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
   const resolved = useMemo3(
     () => resolveMenuItems(items, ctx),
     [items, ctx.row, ctx.selectedRows]
   );
   if (resolved.length === 0) return null;
-  return /* @__PURE__ */ jsxs16(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx25(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx25(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx25(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
-    /* @__PURE__ */ jsx25(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs17(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx27(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx27(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx27(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx27(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx27(
       DropdownMenuItem,
       {
         danger: item.danger,
@@ -1832,7 +2076,59 @@ import { BarsArrowDownIcon, BarsArrowUpIcon, FunnelIcon as FunnelIcon7 } from "@
 import { columnResizingFeature, columnSizingFeature, flexRender, tableFeatures, useTable } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { ChevronRight, Loader2 } from "lucide-react";
-import { Fragment as Fragment2, useEffect as useEffect7, useLayoutEffect, useMemo as useMemo6, useRef as useRef5, useState as useState6 } from "react";
+import { Fragment as Fragment2, useEffect as useEffect9, useMemo as useMemo7, useRef as useRef8, useState as useState10 } from "react";
+
+// src/hooks/useGroupExpansion.ts
+import { useCallback as useCallback2, useState as useState7 } from "react";
+function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onExpandedGroupsChange) {
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState7({});
+  const expandedGroups = controlledExpandedGroups ?? internalExpandedGroups;
+  const updateExpandedGroups = useCallback2(
+    (next) => {
+      setInternalExpandedGroups(next);
+      onExpandedGroupsChange?.(next);
+    },
+    [onExpandedGroupsChange]
+  );
+  const isGroupExpanded = useCallback2(
+    (key) => expandedGroups[key] ?? defaultGroupsExpanded,
+    [expandedGroups, defaultGroupsExpanded]
+  );
+  const toggleGroupExpanded = useCallback2(
+    (key) => {
+      updateExpandedGroups({ ...expandedGroups, [key]: !isGroupExpanded(key) });
+    },
+    [expandedGroups, isGroupExpanded, updateExpandedGroups]
+  );
+  return { expandedGroups, isGroupExpanded, toggleGroupExpanded };
+}
+
+// src/hooks/useStickyGroupHeaderTop.ts
+import { useLayoutEffect, useRef as useRef6, useState as useState8 } from "react";
+function useStickyGroupHeaderTop(enabled) {
+  const theadRef = useRef6(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState8(0);
+  useLayoutEffect(() => {
+    if (!enabled) return;
+    const theadEl = theadRef.current;
+    if (!theadEl) return;
+    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
+    updateHeight();
+    const observer = new ResizeObserver(updateHeight);
+    observer.observe(theadEl);
+    return () => observer.disconnect();
+  }, [enabled]);
+  return { theadRef, groupHeaderTop };
+}
+
+// src/hooks/useVisibleColumns.ts
+import { useMemo as useMemo4 } from "react";
+function useVisibleColumns(columns, columnVisibility) {
+  return useMemo4(
+    () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
+    [columns, columnVisibility]
+  );
+}
 
 // src/lib/structuralColumns.ts
 var SELECTION_COLUMN_WIDTH = 44;
@@ -1875,20 +2171,20 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback2, useEffect as useEffect6, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo6, useState as useState9 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect5, useMemo as useMemo4, useRef as useRef4 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef4(callback);
+  const callbackRef = useRef7(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef4(void 0);
-  useEffect5(() => {
+  const timeoutRef = useRef7(void 0);
+  useEffect7(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo4(() => {
+  return useMemo5(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -1913,10 +2209,10 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState5(
+  const [state, setState] = useState9(
     () => externalState ?? { ...DEFAULT_STATE, ...initialState }
   );
-  const notifyRaw = useCallback2(
+  const notifyRaw = useCallback3(
     (next) => {
       if (dataSource.mode === "server") dataSource.onStateChange(next);
     },
@@ -1926,26 +2222,26 @@ function useGridState(dataSource, initialState, externalState) {
     notifyRaw,
     FILTER_CHANGE_DEBOUNCE_MS
   );
-  const notifyNow = useCallback2(
+  const notifyNow = useCallback3(
     (next) => {
       cancelDebouncedNotify();
       notifyRaw(next);
     },
     [notifyRaw, cancelDebouncedNotify]
   );
-  useEffect6(() => {
+  useEffect8(() => {
     if (!externalState) return;
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo5(() => {
+  const filtersByColumn = useMemo6(() => {
     const map = /* @__PURE__ */ new Map();
     for (const child of state.filter?.filters ?? []) {
       if ("operator" in child) map.set(fieldKey(child.field), child);
     }
     return map;
   }, [state.filter]);
-  const setColumnFilter = useCallback2(
+  const setColumnFilter = useCallback3(
     (columnId, next) => {
       setState((prev) => {
         const remaining = (prev.filter?.filters ?? []).filter(
@@ -1963,7 +2259,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyDebounced]
   );
-  const toggleSort = useCallback2(
+  const toggleSort = useCallback3(
     (columnId, additive, descFirst = false) => {
       setState((prev) => {
         const existing = prev.sort.find((s) => s.field === columnId);
@@ -1978,7 +2274,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPage = useCallback2(
+  const setPage = useCallback3(
     (page) => {
       setState((prev) => {
         const nextState = { ...prev, page };
@@ -1988,7 +2284,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPageSize = useCallback2(
+  const setPageSize = useCallback3(
     (pageSize) => {
       setState((prev) => {
         const nextState = { ...prev, pageSize, page: 0 };
@@ -2002,7 +2298,7 @@ function useGridState(dataSource, initialState, externalState) {
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment3, jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
@@ -2039,71 +2335,9 @@ function toTanstackColumns(columns, editingCtxRef) {
     header: column.header,
     size: column.width,
     accessorFn: (row) => getColumnValue(column, row),
-    cell: (info) => {
-      const row = info.row.original;
-      const editingCtx = editingCtxRef.current;
-      const staticContent = (value) => column.cell ? column.cell(value, row) : defaultFormat(column, value);
-      if (editingCtx && isEditable(column, row)) {
-        const rowId = editingCtx.getRowId(row);
-        const pendingRow = editingCtx.pendingEdits.get(rowId);
-        const value = pendingRow?.values.has(column.id) ? pendingRow.values.get(column.id) : info.getValue();
-        if (editingCtx.activeRowId === rowId) {
-          const error = editingCtx.editErrors.get(rowId)?.get(column.id);
-          const autoFocus = editingCtx.autoFocusTarget?.rowId === rowId && editingCtx.autoFocusTarget.columnId === column.id;
-          const onChange = (next) => editingCtx.onEdit(column, row, next);
-          const editor = column.renderEditCell ? column.renderEditCell(value, row, onChange, error, autoFocus) : renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus);
-          return /* @__PURE__ */ jsx26(
-            "div",
-            {
-              onKeyDown: (event) => {
-                if (event.key !== "Escape") return;
-                if (!event.currentTarget.contains(event.target)) return;
-                event.stopPropagation();
-                editingCtx.onEdit(column, row, getColumnValue(column, row));
-              },
-              children: editor
-            }
-          );
-        }
-        return /* @__PURE__ */ jsx26(
-          "span",
-          {
-            role: "button",
-            tabIndex: 0,
-            "data-testid": `cell-${rowId}-${column.id}`,
-            className: "block w-full cursor-text",
-            onClick: (event) => {
-              stopRowClick(event);
-              editingCtx.onActivateRow(rowId, column.id);
-            },
-            onKeyDown: (event) => {
-              if (event.key !== "Enter" && event.key !== " ") return;
-              event.preventDefault();
-              stopRowClick(event);
-              editingCtx.onActivateRow(rowId, column.id);
-            },
-            children: staticContent(value)
-          }
-        );
-      }
-      return staticContent(info.getValue());
-    }
+    cell: (info) => renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current)
   }));
 }
-function editValuesEqual(a, b) {
-  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-  return a === b;
-}
-function resolveEditLabel(label, changedRowCount, fallback) {
-  if (label === void 0) return fallback(changedRowCount);
-  return typeof label === "function" ? label(changedRowCount) : label;
-}
-function describeErrorRows(editErrors) {
-  const rowIds = [...editErrors.keys()];
-  const shown = rowIds.slice(0, 3);
-  const suffix = rowIds.length > shown.length ? `, and ${rowIds.length - shown.length} more` : "";
-  return `row${rowIds.length === 1 ? "" : "s"} ${shown.join(", ")}${suffix}`;
-}
 function DataGrid({
   columns,
   dataSource,
@@ -2140,19 +2374,19 @@ function DataGrid({
     initialState,
     gridState
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState6(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState10(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState6({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState10({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState6(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState10(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -2161,124 +2395,22 @@ function DataGrid({
       return next;
     });
   }
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState6({});
-  const expandedGroupsState = controlledExpandedGroups ?? internalExpandedGroups;
-  function updateExpandedGroups(next) {
-    setInternalExpandedGroups(next);
-    onExpandedGroupsChange?.(next);
-  }
-  function isGroupExpanded(key) {
-    return expandedGroupsState[key] ?? defaultGroupsExpanded;
-  }
-  function toggleGroupExpanded(key) {
-    updateExpandedGroups({ ...expandedGroupsState, [key]: !isGroupExpanded(key) });
-  }
-  const [pendingEdits, setPendingEdits] = useState6(/* @__PURE__ */ new Map());
-  const [editErrors, setEditErrors] = useState6(/* @__PURE__ */ new Map());
-  const hasEditErrors = editErrors.size > 0;
-  const [activeRowId, setActiveRowId] = useState6(null);
-  const [autoFocusTarget, setAutoFocusTarget] = useState6(null);
-  function activateRow(rowId, columnId) {
-    setActiveRowId(rowId);
-    setAutoFocusTarget({ rowId, columnId });
-  }
-  useEffect7(() => {
-    if (autoFocusTarget) setAutoFocusTarget(null);
-  }, [autoFocusTarget]);
-  function commitEdit(column, row, value) {
-    const rowId = getRowId(row);
-    const baseline = getColumnValue(column, row);
-    setPendingEdits((prev) => {
-      const next = new Map(prev);
-      const values = new Map(next.get(rowId)?.values);
-      if (editValuesEqual(value, baseline)) values.delete(column.id);
-      else values.set(column.id, value);
-      if (values.size === 0) next.delete(rowId);
-      else next.set(rowId, { row, values });
-      return next;
-    });
-    const message = column.validateEdit?.(value, row);
-    setEditErrors((prev) => {
-      const next = new Map(prev);
-      const rowErrors = new Map(next.get(rowId));
-      if (message) rowErrors.set(column.id, message);
-      else rowErrors.delete(column.id);
-      if (rowErrors.size === 0) next.delete(rowId);
-      else next.set(rowId, rowErrors);
-      return next;
-    });
-  }
-  async function handleSaveEdits() {
-    if (!editing || pendingEdits.size === 0) return;
-    const snapshot = pendingEdits;
-    const edited = [...snapshot.entries()].map(([rowId, entry]) => ({
-      rowId,
-      row: entry.row,
-      values: Object.fromEntries(entry.values)
-    }));
-    try {
-      await editing.onSave(edited);
-    } catch {
-      return;
-    }
-    const snapshotRowIds = new Set(snapshot.keys());
-    const survivedRowIds = /* @__PURE__ */ new Set();
-    const clearedErrorKeys = [];
-    setPendingEdits((prev) => {
-      const next = new Map(prev);
-      for (const [rowId, snapshotEntry] of snapshot) {
-        const current = next.get(rowId);
-        if (!current) continue;
-        const values = new Map(current.values);
-        for (const [columnId, snapshotValue] of snapshotEntry.values) {
-          if (values.has(columnId) && editValuesEqual(values.get(columnId), snapshotValue)) {
-            values.delete(columnId);
-            clearedErrorKeys.push({ rowId, columnId });
-          }
-        }
-        if (values.size === 0) next.delete(rowId);
-        else {
-          next.set(rowId, { row: current.row, values });
-          survivedRowIds.add(rowId);
-        }
-      }
-      return next;
-    });
-    setEditErrors((prev) => {
-      if (clearedErrorKeys.length === 0) return prev;
-      const next = new Map(prev);
-      for (const { rowId, columnId } of clearedErrorKeys) {
-        const rowErrors = next.get(rowId);
-        if (!rowErrors) continue;
-        const nextRowErrors = new Map(rowErrors);
-        nextRowErrors.delete(columnId);
-        if (nextRowErrors.size === 0) next.delete(rowId);
-        else next.set(rowId, nextRowErrors);
-      }
-      return next;
-    });
-    setActiveRowId(
-      (prev) => prev !== null && snapshotRowIds.has(prev) && !survivedRowIds.has(prev) ? null : prev
-    );
-  }
-  function handleDiscardEdits() {
-    setPendingEdits(/* @__PURE__ */ new Map());
-    setEditErrors(/* @__PURE__ */ new Map());
-    setActiveRowId(null);
-    editing?.onDiscard?.();
-  }
-  const editingCtxRef = useRef5(void 0);
-  editingCtxRef.current = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
-  const visibleColumns = useMemo6(
-    () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
-    [columns, columnVisibility]
+  const { isGroupExpanded, toggleGroupExpanded } = useGroupExpansion(
+    defaultGroupsExpanded,
+    controlledExpandedGroups,
+    onExpandedGroupsChange
+  );
+  const { pendingEdits, editErrors, ctxRef: editingCtxRef, handleSaveEdits, handleDiscardEdits } = useEditingState(
+    editing,
+    getRowId
   );
+  const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo6(() => {
+  const { rows, rowCount } = useMemo7(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo6(
+  const selectedRows = useMemo7(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -2297,8 +2429,8 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo6(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
-  const columnById = useMemo6(() => {
+  const tanstackColumns = useMemo7(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
+  const columnById = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -2323,7 +2455,7 @@ function DataGrid({
   const showDetailColumn = Boolean(renderDetail);
   const totalColumnCount = visibleColumns.length + (showDetailColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0) + (showRowActionsColumn ? 1 : 0);
   const hasFilterRow = visibleColumns.some((column) => isFilterable(column) && column.filterDisplay === "row");
-  const headerRuns = useMemo6(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo7(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   function renderFilterWidget(column) {
     const value = filtersByColumn.get(column.id);
@@ -2333,11 +2465,11 @@ function DataGrid({
   const columnSize = (columnId) => table.getColumn(columnId)?.getSize() ?? DEFAULT_COLUMN_SIZE;
   const leadingStructuralWidth = (showDetailColumn ? DETAIL_COLUMN_WIDTH : 0) + (showSelectionColumn ? SELECTION_COLUMN_WIDTH : 0);
   const trailingStructuralWidth = showRowActionsColumn ? ROW_ACTIONS_COLUMN_WIDTH : 0;
-  const leftPinnedOffsets = useMemo6(
+  const leftPinnedOffsets = useMemo7(
     () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
     [visibleColumns, columnSizing, leadingStructuralWidth]
   );
-  const rightPinnedOffsets = useMemo6(
+  const rightPinnedOffsets = useMemo7(
     () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
     [visibleColumns, columnSizing, trailingStructuralWidth]
   );
@@ -2385,7 +2517,7 @@ function DataGrid({
       style: pinnedProps?.style
     };
   }
-  const bodyCellPropsByColumn = useMemo6(() => {
+  const bodyCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
     return map;
@@ -2401,7 +2533,7 @@ function DataGrid({
     );
     return { className, style: pinnedProps.style };
   }
-  const leafHeaderCellPropsByColumn = useMemo6(() => {
+  const leafHeaderCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(
@@ -2411,7 +2543,7 @@ function DataGrid({
     }
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
-  const filterHeaderCellPropsByColumn = useMemo6(() => {
+  const filterHeaderCellPropsByColumn = useMemo7(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(column.id, headerCellClassAndStyle(column, "border-b border-border p-2 align-top font-normal"));
@@ -2420,23 +2552,12 @@ function DataGrid({
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
   const shouldVirtualize = Boolean(virtualize) && !groupBy && tableRows.length > (virtualize?.threshold ?? 100);
-  const groupedBuckets = useMemo6(
+  const groupedBuckets = useMemo7(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
-  const theadRef = useRef5(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState6(0);
-  useLayoutEffect(() => {
-    if (!groupBy) return;
-    const theadEl = theadRef.current;
-    if (!theadEl) return;
-    const updateHeight = () => setGroupHeaderTop(theadEl.getBoundingClientRect().height);
-    updateHeight();
-    const observer = new ResizeObserver(updateHeight);
-    observer.observe(theadEl);
-    return () => observer.disconnect();
-  }, [groupBy]);
-  const scrollRef = useRef5(null);
+  const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
+  const scrollRef = useRef8(null);
   const virtualizer = useVirtualizer({
     count: tableRows.length,
     getScrollElement: () => scrollRef.current,
@@ -2448,8 +2569,8 @@ function DataGrid({
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
   const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
-  const notifiedForLengthRef = useRef5(-1);
-  useEffect7(() => {
+  const notifiedForLengthRef = useRef8(-1);
+  useEffect9(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < tableRows.length - 1) return;
     if (virtualize.hasMore === false) return;
@@ -2462,20 +2583,20 @@ function DataGrid({
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
     const isOddRow = zebra && row.index % 2 === 1;
-    return /* @__PURE__ */ jsxs17("tbody", { ref: measureRef, "data-index": row.index, children: [
-      /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": row.index, children: [
+      /* @__PURE__ */ jsxs18(
         "tr",
         {
           ...rowProps,
           "data-testid": rowTestId,
           className: rowProps?.className ? cn("divide-x divide-border", rowProps.className, isOddRow && "bg-foreground/5") : `divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
           children: [
-            showDetailColumn && /* @__PURE__ */ jsx26(
+            showDetailColumn && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx26(
+                children: /* @__PURE__ */ jsx28(
                   Button,
                   {
                     type: "button",
@@ -2487,7 +2608,7 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx26(
+                    children: /* @__PURE__ */ jsx28(
                       ChevronRight,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
@@ -2498,12 +2619,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx26(
+            showSelectionColumn && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx26(
+                children: /* @__PURE__ */ jsx28(
                   "input",
                   {
                     type: "checkbox",
@@ -2517,27 +2638,27 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.id);
-              return /* @__PURE__ */ jsx26("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+              return /* @__PURE__ */ jsx28("td", { style: cellProps?.style, className: cellProps?.className ?? BODY_TD_BASE_CLASS, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx26(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx28(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx26(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+                children: /* @__PURE__ */ jsx28(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
             )
           ]
         }
       ),
-      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx26("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx26("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx28("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
-    return /* @__PURE__ */ jsxs17(Fragment2, { children: [
-      /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+      /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx28(
         "td",
         {
           colSpan: totalColumnCount,
@@ -2546,7 +2667,7 @@ function DataGrid({
             zebra ? "bg-muted" : "bg-background"
           ),
           style: { top: groupHeaderTop },
-          children: /* @__PURE__ */ jsxs17(
+          children: /* @__PURE__ */ jsxs18(
             "button",
             {
               type: "button",
@@ -2554,7 +2675,7 @@ function DataGrid({
               onClick: () => toggleGroupExpanded(bucket.key),
               "aria-expanded": expanded,
               children: [
-                /* @__PURE__ */ jsx26(
+                /* @__PURE__ */ jsx28(
                   ChevronRight,
                   {
                     className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
@@ -2583,81 +2704,42 @@ function DataGrid({
     // containers (that one scrolling vertically, this component's own
     // `overflow-x-auto` div scrolling horizontally) fighting over which one
     // a sticky header/pinned column is actually stuck relative to.
-    /* @__PURE__ */ jsxs17("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
-      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsxs17(
-        "div",
+    /* @__PURE__ */ jsxs18("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx28(
+        EditingBar,
         {
-          "data-testid": "datagrid-edit-bar",
-          className: "flex shrink-0 flex-wrap items-center justify-between gap-2 rounded-md border bg-muted/50 px-3 py-2 text-sm",
-          children: [
-            /* @__PURE__ */ jsxs17("span", { "aria-live": "polite", children: [
-              pendingEdits.size,
-              " row",
-              pendingEdits.size === 1 ? "" : "s",
-              " changed",
-              hasEditErrors && /* @__PURE__ */ jsxs17("span", { className: "ml-2 text-destructive", children: [
-                "Fix the highlighted errors before saving (",
-                describeErrorRows(editErrors),
-                ")."
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx26(
-                Button,
-                {
-                  type: "button",
-                  variant: "outline",
-                  size: "sm",
-                  "data-testid": "datagrid-discard-edits",
-                  disabled: editing.saving,
-                  onClick: handleDiscardEdits,
-                  children: resolveEditLabel(editing.discardLabel, pendingEdits.size, () => "Discard")
-                }
-              ),
-              /* @__PURE__ */ jsx26(
-                Button,
-                {
-                  type: "button",
-                  size: "sm",
-                  "data-testid": "datagrid-save-edits",
-                  disabled: editing.saving || hasEditErrors,
-                  onClick: () => void handleSaveEdits(),
-                  children: resolveEditLabel(
-                    editing.saveLabel,
-                    pendingEdits.size,
-                    (count) => `Save ${count} change${count === 1 ? "" : "s"}`
-                  )
-                }
-              )
-            ] })
-          ]
+          editing,
+          pendingRowCount: pendingEdits.size,
+          editErrors,
+          onSave: () => void handleSaveEdits(),
+          onDiscard: handleDiscardEdits
         }
       ),
-      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs17("span", { children: [
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs18("span", { children: [
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx26(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx28(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsxs17("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx26(
+      /* @__PURE__ */ jsxs18("div", { className: "relative min-h-0 flex-1", children: [
+        loading && /* @__PURE__ */ jsx28(
           "div",
           {
             "data-testid": "datagrid-loading-overlay",
             className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx26(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx28(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
           }
         ),
-        /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsx28(
           "div",
           {
             ref: scrollRef,
             "data-testid": testId,
             className: "h-full overflow-auto rounded-md border",
             style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-            children: /* @__PURE__ */ jsxs17("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
-              /* @__PURE__ */ jsxs17("thead", { ref: theadRef, className: "bg-muted", children: [
+            children: /* @__PURE__ */ jsxs18("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+              /* @__PURE__ */ jsxs18("thead", { ref: theadRef, className: "bg-muted", children: [
                 table.getHeaderGroups().map((headerGroup) => {
                   const headerById = new Map(headerGroup.headers.map((header) => [header.id, header]));
                   function renderLeafHeaderCell(column, rowSpan) {
@@ -2668,9 +2750,9 @@ function DataGrid({
                     const filterable = isFilterable(column) && column.filterDisplay !== "row";
                     const cellProps = leafHeaderCellPropsByColumn.get(column.id);
                     const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                    return /* @__PURE__ */ jsxs17("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
-                      /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-1", children: [
-                        sortable ? /* @__PURE__ */ jsxs17(
+                    return /* @__PURE__ */ jsxs18("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                      /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+                        sortable ? /* @__PURE__ */ jsxs18(
                           "button",
                           {
                             type: "button",
@@ -2678,8 +2760,8 @@ function DataGrid({
                             onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
                             children: [
                               headerContent,
-                              sortEntry?.dir === "asc" && /* @__PURE__ */ jsx26(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
-                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx26(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                              sortEntry?.dir === "asc" && /* @__PURE__ */ jsx28(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                              sortEntry?.dir === "desc" && /* @__PURE__ */ jsx28(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
                             ]
                           }
                         ) : (
@@ -2688,10 +2770,10 @@ function DataGrid({
                           // silently breaking any interactive content a column's own `renderHeader`
                           // embeds directly (bare filter inputs, "select/reject all" buttons) —
                           // clicks never reach them at all, even though nothing looks wrong visually.
-                          /* @__PURE__ */ jsx26("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                          /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                         ),
-                        filterable && /* @__PURE__ */ jsxs17(Popover, { children: [
-                          /* @__PURE__ */ jsx26(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx26(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx26(
+                        filterable && /* @__PURE__ */ jsxs18(Popover, { children: [
+                          /* @__PURE__ */ jsx28(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx28(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx28(
                             FunnelIcon7,
                             {
                               className: cn(
@@ -2701,10 +2783,10 @@ function DataGrid({
                               "aria-hidden": true
                             }
                           ) }) }),
-                          /* @__PURE__ */ jsx26(PopoverContent, { children: renderFilterWidget(column) })
+                          /* @__PURE__ */ jsx28(PopoverContent, { children: renderFilterWidget(column) })
                         ] })
                       ] }),
-                      enableColumnResizing && /* @__PURE__ */ jsx26(
+                      enableColumnResizing && /* @__PURE__ */ jsx28(
                         "div",
                         {
                           "data-testid": `resize-handle-${column.id}`,
@@ -2715,9 +2797,9 @@ function DataGrid({
                       )
                     ] }, header.id);
                   }
-                  return /* @__PURE__ */ jsxs17(Fragment2, { children: [
-                    hasHeaderGroups && /* @__PURE__ */ jsxs17("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
-                      showDetailColumn && /* @__PURE__ */ jsx26(
+                  return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+                    hasHeaderGroups && /* @__PURE__ */ jsxs18("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
+                      showDetailColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
@@ -2726,13 +2808,13 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      showSelectionColumn && /* @__PURE__ */ jsx26(
+                      showSelectionColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx26(
+                          children: /* @__PURE__ */ jsx28(
                             "input",
                             {
                               type: "checkbox",
@@ -2744,7 +2826,7 @@ function DataGrid({
                         }
                       ),
                       headerRuns.map(
-                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx26(
+                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx28(
                           "th",
                           {
                             colSpan: run.columns.length,
@@ -2754,7 +2836,7 @@ function DataGrid({
                           `group-${run.label}-${run.columns[0].id}`
                         )
                       ),
-                      showRowActionsColumn && /* @__PURE__ */ jsx26(
+                      showRowActionsColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           rowSpan: 2,
@@ -2764,8 +2846,8 @@ function DataGrid({
                         }
                       )
                     ] }, `${headerGroup.id}-groups`),
-                    /* @__PURE__ */ jsxs17("tr", { className: "divide-x divide-border", children: [
-                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx26(
+                    /* @__PURE__ */ jsxs18("tr", { className: "divide-x divide-border", children: [
+                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: detailHeaderCellProps.className,
@@ -2773,12 +2855,12 @@ function DataGrid({
                           "aria-hidden": true
                         }
                       ),
-                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx26(
+                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: selectionHeaderCellProps.className,
                           style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx26(
+                          children: /* @__PURE__ */ jsx28(
                             "input",
                             {
                               type: "checkbox",
@@ -2794,7 +2876,7 @@ function DataGrid({
                         if (!column || hasHeaderGroups && !column.headerGroup) return null;
                         return renderLeafHeaderCell(column);
                       }),
-                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx26(
+                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx28(
                         "th",
                         {
                           className: rowActionsHeaderCellProps.className,
@@ -2805,9 +2887,9 @@ function DataGrid({
                     ] }, headerGroup.id)
                   ] }, headerGroup.id);
                 }),
-                hasFilterRow && /* @__PURE__ */ jsxs17("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
-                  showDetailColumn && /* @__PURE__ */ jsx26("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
-                  showSelectionColumn && /* @__PURE__ */ jsx26(
+                hasFilterRow && /* @__PURE__ */ jsxs18("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                  showDetailColumn && /* @__PURE__ */ jsx28("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                  showSelectionColumn && /* @__PURE__ */ jsx28(
                     "th",
                     {
                       className: selectionHeaderCellProps.className,
@@ -2816,9 +2898,9 @@ function DataGrid({
                   ),
                   visibleColumns.map((column) => {
                     const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                    return /* @__PURE__ */ jsx26("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                    return /* @__PURE__ */ jsx28("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
                   }),
-                  showRowActionsColumn && /* @__PURE__ */ jsx26(
+                  showRowActionsColumn && /* @__PURE__ */ jsx28(
                     "th",
                     {
                       className: rowActionsHeaderCellProps.className,
@@ -2827,19 +2909,19 @@ function DataGrid({
                   )
                 ] })
               ] }),
-              rows.length === 0 ? /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { children: /* @__PURE__ */ jsx26("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs17(Fragment3, { children: [
-                paddingTop > 0 && /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+              rows.length === 0 ? /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment3, { children: [
+                paddingTop > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
                 virtualItems.map(
                   (virtualItem) => renderRow(tableRows[virtualItem.index], (el) => virtualizer.measureElement(el))
                 ),
-                paddingBottom > 0 && /* @__PURE__ */ jsx26("tbody", { children: /* @__PURE__ */ jsx26("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx26("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+                paddingBottom > 0 && /* @__PURE__ */ jsx28("tbody", { children: /* @__PURE__ */ jsx28("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
               ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
             ] })
           }
         )
       ] }),
-      showPagination && /* @__PURE__ */ jsxs17("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs17("span", { children: [
+      showPagination && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs18("span", { children: [
           "Page ",
           state.page + 1,
           " of ",
@@ -2850,8 +2932,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs17("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx26(
+        /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx28(
             Button,
             {
               variant: "outline",
@@ -2861,7 +2943,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx28(
             Button,
             {
               variant: "outline",
@@ -2880,7 +2962,7 @@ function DataGrid({
 // src/tree/TreeDataGrid.tsx
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { AlertCircle, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Loader2 as Loader22 } from "lucide-react";
-import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { Fragment as Fragment4, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef9 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -2925,7 +3007,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback3, useMemo as useMemo7, useState as useState7 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo8, useState as useState11 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -2937,9 +3019,9 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState7({});
+  const [internalExpanded, setInternalExpanded] = useState11({});
   const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = useCallback3(
+  const setExpanded = useCallback4(
     (updater) => {
       if (controlledExpanded) {
         onExpandedChange?.(updater(controlledExpanded));
@@ -2949,9 +3031,9 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState7(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState11(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
-  const setChildrenMap = useCallback3(
+  const setChildrenMap = useCallback4(
     (updater) => {
       if (controlledChildrenMap) {
         onChildrenMapChange?.(updater(controlledChildrenMap));
@@ -2961,13 +3043,13 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState7(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState7(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo7(
+  const [loadingIds, setLoadingIds] = useState11(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState11(/* @__PURE__ */ new Map());
+  const resolveHasChildren = useMemo8(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
-  const loadChildrenFor = useCallback3(
+  const loadChildrenFor = useCallback4(
     async (row) => {
       const id = getRowId(row);
       const cached = childrenMap.get(id);
@@ -3000,7 +3082,7 @@ function useTreeState({
     },
     [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
-  const toggleExpand = useCallback3(
+  const toggleExpand = useCallback4(
     (row) => {
       const id = getRowId(row);
       const willExpand = !expanded[id];
@@ -3012,14 +3094,14 @@ function useTreeState({
     },
     [expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
   );
-  const retry = useCallback3(
+  const retry = useCallback4(
     (row) => {
       loadChildrenFor(row).catch(() => {
       });
     },
     [loadChildrenFor]
   );
-  const expandToLevel = useCallback3(
+  const expandToLevel = useCallback4(
     async (level) => {
       const nextExpanded = { ...expanded };
       async function visit(row, depth) {
@@ -3042,12 +3124,11 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
-function renderCell(column, row) {
-  const value = getColumnValue(column, row);
-  return column.cell ? column.cell(value, row) : defaultFormat(column, value);
+function renderCell(column, row, editingCtx) {
+  return renderEditableCell(column, row, getColumnValue(column, row), editingCtx);
 }
 function TreeCell({
   flatRow,
@@ -3056,10 +3137,11 @@ function TreeCell({
   isLoading,
   error,
   onToggle,
-  onRetry
+  onRetry,
+  editingCtx
 }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx29(
       "button",
       {
         type: "button",
@@ -3071,14 +3153,14 @@ function TreeCell({
         "aria-label": flatRow.isExpanded ? "Collapse" : "Expand",
         "aria-expanded": flatRow.isExpanded,
         className: "flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground disabled:opacity-50",
-        children: isLoading ? /* @__PURE__ */ jsx27(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx27(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx27(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+        children: isLoading ? /* @__PURE__ */ jsx29(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx29(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx29(ChevronRight2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
       }
-    ) : /* @__PURE__ */ jsx27("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx27("span", { className: "truncate", children: renderCell(column, flatRow.row) }),
-    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs18("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
-      /* @__PURE__ */ jsx27(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
+    ) : /* @__PURE__ */ jsx29("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx29("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs19("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx29(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
       "Failed to load.",
-      /* @__PURE__ */ jsx27("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
+      /* @__PURE__ */ jsx29("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
     ] }) : null
   ] });
 }
@@ -3086,6 +3168,7 @@ function TreeDataGrid({
   columns,
   data,
   treeColumnId,
+  columnVisibility,
   getRowId,
   getChildren,
   hasChildren,
@@ -3106,12 +3189,19 @@ function TreeDataGrid({
   onSelectedIdsChange,
   getRowSelectionState,
   isRowSelectionDisabled,
-  zebra = true
+  groupBy,
+  renderGroupHeader,
+  defaultGroupsExpanded = true,
+  expandedGroups: controlledExpandedGroups,
+  onExpandedGroupsChange,
+  zebra = true,
+  editing
 }) {
-  const accessors = useMemo8(
+  const accessors = useMemo9(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
+  const editingState = useEditingState(editing, getRowId);
   const { expanded, childrenMap, loadingIds, errorIds, toggleExpand, retry, expandToLevel } = useTreeState({
     data,
     getRowId,
@@ -3123,21 +3213,48 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef6(false);
-  useEffect8(() => {
+  const didAutoExpand = useRef9(false);
+  useEffect10(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
     if (initialExpandedLevel > 0) void expandToLevel(initialExpandedLevel);
   }, []);
-  const flatRows = useMemo8(
-    () => flattenTree(data, accessors, expanded, childrenMap),
-    [data, accessors, expanded, childrenMap]
+  const visibleColumns = useVisibleColumns(columns, columnVisibility);
+  const { isGroupExpanded, toggleGroupExpanded } = useGroupExpansion(
+    defaultGroupsExpanded,
+    controlledExpandedGroups,
+    onExpandedGroupsChange
   );
+  const flatRows = useMemo9(
+    () => groupBy ? [] : flattenTree(data, accessors, expanded, childrenMap),
+    [groupBy, data, accessors, expanded, childrenMap]
+  );
+  const groupedBuckets = useMemo9(
+    () => groupBy ? groupRows(data, groupBy).map((bucket) => ({
+      key: bucket.key,
+      roots: bucket.items,
+      flatRows: flattenTree(bucket.items, accessors, expanded, childrenMap)
+    })) : void 0,
+    [groupBy, data, accessors, expanded, childrenMap]
+  );
+  const groupedRender = useMemo9(() => {
+    if (!groupedBuckets) return void 0;
+    const startIndexByBucket = /* @__PURE__ */ new Map();
+    const rows = [];
+    for (const bucket of groupedBuckets) {
+      if (!isGroupExpanded(bucket.key)) continue;
+      startIndexByBucket.set(bucket.key, rows.length);
+      rows.push(...bucket.flatRows);
+    }
+    return { startIndexByBucket, rows };
+  }, [groupedBuckets, isGroupExpanded]);
+  const allFlatRows = groupedRender ? groupedRender.rows : flatRows;
   const treeColId = treeColumnId ?? columns[0]?.id;
   const showRowActionsColumn = Boolean(rowActions?.length);
   const showSelectionColumn = controlledSelectedIds !== void 0;
-  const totalColumnCount = columns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
-  const selectionStates = useMemo8(
+  const totalColumnCount = visibleColumns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
+  const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
+  const selectionStates = useMemo9(
     () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
     [showSelectionColumn, data, accessors, childrenMap, controlledSelectedIds]
   );
@@ -3153,9 +3270,9 @@ function TreeDataGrid({
     else next.add(id);
     onSelectedIdsChange?.(next);
   }
-  const selectableFlatRows = useMemo8(
-    () => flatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
-    [flatRows, isRowSelectionDisabled]
+  const selectableFlatRows = useMemo9(
+    () => allFlatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
+    [allFlatRows, isRowSelectionDisabled]
   );
   const allVisibleSelected = showSelectionColumn && selectableFlatRows.length > 0 && selectableFlatRows.every((flatRow) => controlledSelectedIds.has(flatRow.id));
   function toggleAllVisibleSelected() {
@@ -3167,13 +3284,13 @@ function TreeDataGrid({
     }
     onSelectedIdsChange?.(next);
   }
-  const bodyTdClassByColumn = useMemo8(() => {
+  const bodyTdClassByColumn = useMemo9(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const column of columns) map.set(column.id, `p-2 ${alignClassName(column)}`);
+    for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
-  }, [columns]);
-  const scrollRef = useRef6(null);
-  const shouldVirtualize = flatRows.length > virtualizeThreshold;
+  }, [visibleColumns]);
+  const scrollRef = useRef9(null);
+  const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,
     getScrollElement: () => scrollRef.current,
@@ -3185,7 +3302,7 @@ function TreeDataGrid({
     const rowProps = getRowProps?.(flatRow.row, flatRow.depth, index);
     const rowTestId = getRowTestId?.(flatRow.row) ?? `tree-row-${flatRow.id}`;
     const isOddRow = zebra && index % 2 === 1;
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "tr",
       {
         ref: measureRef,
@@ -3198,9 +3315,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx27("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx29("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx27(
+            return /* @__PURE__ */ jsx29(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -3211,7 +3328,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          columns.map((column) => /* @__PURE__ */ jsx27("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx27(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx29("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx29(
             TreeCell,
             {
               flatRow,
@@ -3220,10 +3337,11 @@ function TreeDataGrid({
               isLoading: loadingIds.has(flatRow.id),
               error: errorIds.get(flatRow.id),
               onToggle: () => toggleExpand(flatRow.row),
-              onRetry: () => retry(flatRow.row)
+              onRetry: () => retry(flatRow.row),
+              editingCtx: editingState.ctx
             }
-          ) : renderCell(column, flatRow.row) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx27("td", { className: "p-2", children: /* @__PURE__ */ jsx27(
+          ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx29("td", { className: "p-2", children: /* @__PURE__ */ jsx29(
             ActionsMenu,
             {
               items: rowActions,
@@ -3239,49 +3357,100 @@ function TreeDataGrid({
   const virtualItems = shouldVirtualize ? virtualizer.getVirtualItems() : [];
   const paddingTop = virtualItems.length > 0 ? virtualItems[0].start : 0;
   const paddingBottom = virtualItems.length > 0 ? virtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end : 0;
-  return /* @__PURE__ */ jsx27("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: /* @__PURE__ */ jsx27(
-    "div",
-    {
-      ref: scrollRef,
-      className: shouldVirtualize ? "overflow-y-auto" : void 0,
-      style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
-      children: /* @__PURE__ */ jsxs18("table", { className: "w-full border-collapse text-sm", children: [
-        /* @__PURE__ */ jsx27("thead", { children: /* @__PURE__ */ jsxs18("tr", { className: "divide-x divide-border", children: [
-          showSelectionColumn && /* @__PURE__ */ jsx27("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx27(
-            Checkbox,
-            {
-              "aria-label": "Select all visible rows",
-              checked: allVisibleSelected,
-              onCheckedChange: toggleAllVisibleSelected
-            }
-          ) }),
-          columns.map((column) => /* @__PURE__ */ jsx27(
-            "th",
-            {
-              style: column.width ? { width: column.width } : void 0,
-              className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
-              children: column.header
-            },
-            column.id
-          )),
-          showRowActionsColumn && /* @__PURE__ */ jsx27("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
-        ] }) }),
-        /* @__PURE__ */ jsx27("tbody", { children: flatRows.length === 0 ? /* @__PURE__ */ jsx27("tr", { children: /* @__PURE__ */ jsx27("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs18(Fragment4, { children: [
-          paddingTop > 0 && /* @__PURE__ */ jsx27("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
-          virtualItems.map(
-            (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
-          ),
-          paddingBottom > 0 && /* @__PURE__ */ jsx27("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx27(
-            "td",
-            {
-              colSpan: totalColumnCount,
-              style: { padding: 0, border: "none", height: paddingBottom }
-            }
-          ) })
-        ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) })
-      ] })
-    }
-  ) });
+  return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx29(
+      EditingBar,
+      {
+        editing,
+        pendingRowCount: editingState.pendingEdits.size,
+        editErrors: editingState.editErrors,
+        onSave: () => void editingState.handleSaveEdits(),
+        onDiscard: editingState.handleDiscardEdits,
+        testIdPrefix: "tree-datagrid"
+      }
+    ),
+    /* @__PURE__ */ jsx29(
+      "div",
+      {
+        ref: scrollRef,
+        className: shouldVirtualize ? "overflow-y-auto" : void 0,
+        style: shouldVirtualize ? { maxHeight: maxBodyHeight } : void 0,
+        children: /* @__PURE__ */ jsxs19("table", { className: "w-full border-collapse text-sm", children: [
+          /* @__PURE__ */ jsx29("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs19("tr", { className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx29(
+              Checkbox,
+              {
+                "aria-label": "Select all visible rows",
+                checked: allVisibleSelected,
+                onCheckedChange: toggleAllVisibleSelected
+              }
+            ) }),
+            visibleColumns.map((column) => /* @__PURE__ */ jsx29(
+              "th",
+              {
+                style: column.width ? { width: column.width } : void 0,
+                className: `border-b border-border p-2 font-medium ${alignClassName(column)}`,
+                children: column.header
+              },
+              column.id
+            )),
+            showRowActionsColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+          ] }) }),
+          /* @__PURE__ */ jsx29("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx29("tr", { children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: "No results." }) }) : groupedBuckets ? groupedBuckets.map((bucket) => {
+            const groupExpanded = isGroupExpanded(bucket.key);
+            return /* @__PURE__ */ jsxs19(Fragment4, { children: [
+              /* @__PURE__ */ jsx29("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx29(
+                "td",
+                {
+                  colSpan: totalColumnCount,
+                  className: cn(
+                    "sticky z-20 border-b p-2 font-medium",
+                    zebra ? "bg-muted" : "bg-background"
+                  ),
+                  style: { top: groupHeaderTop },
+                  children: /* @__PURE__ */ jsxs19(
+                    "button",
+                    {
+                      type: "button",
+                      className: "flex w-full items-center gap-1 text-left",
+                      onClick: () => toggleGroupExpanded(bucket.key),
+                      "aria-expanded": groupExpanded,
+                      children: [
+                        /* @__PURE__ */ jsx29(
+                          ChevronRight2,
+                          {
+                            className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
+                            "aria-hidden": true
+                          }
+                        ),
+                        renderGroupHeader ? renderGroupHeader(bucket.key, bucket.roots, groupExpanded) : `${bucket.key} (${bucket.roots.length})`
+                      ]
+                    }
+                  )
+                }
+              ) }),
+              groupExpanded && (() => {
+                const startIndex = groupedRender?.startIndexByBucket.get(bucket.key) ?? 0;
+                return bucket.flatRows.map((flatRow, i) => renderRow(flatRow, startIndex + i));
+              })()
+            ] }, `group-${bucket.key}`);
+          }) : shouldVirtualize ? /* @__PURE__ */ jsxs19(Fragment5, { children: [
+            paddingTop > 0 && /* @__PURE__ */ jsx29("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }),
+            virtualItems.map(
+              (virtualItem) => renderRow(flatRows[virtualItem.index], virtualItem.index, (el) => virtualizer.measureElement(el))
+            ),
+            paddingBottom > 0 && /* @__PURE__ */ jsx29("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx29(
+              "td",
+              {
+                colSpan: totalColumnCount,
+                style: { padding: 0, border: "none", height: paddingBottom }
+              }
+            ) })
+          ] }) : flatRows.map((flatRow, index) => renderRow(flatRow, index)) })
+        ] })
+      }
+    )
+  ] });
 }
 export {
   ActionsMenu,
@@ -3292,6 +3461,7 @@ export {
   DateEditor,
   DateRangeFilter,
   EditFieldError,
+  EditingBar,
   EnumEditor,
   EnumFilter,
   NumberComparisonFilter,
@@ -3324,11 +3494,16 @@ export {
   processClientData,
   renderDefaultEditWidget,
   renderDefaultFilterWidget,
+  renderEditableCell,
   resolveMenuItems,
   storageKeyFor,
   toDate,
   useDebouncedCallback,
+  useEditingState,
   useGridState,
-  useTreeState
+  useGroupExpansion,
+  useStickyGroupHeaderTop,
+  useTreeState,
+  useVisibleColumns
 };
 //# sourceMappingURL=index.js.map