@bmsuisse/datagrid 0.29.0 → 0.30.0

package/dist/index.js

@@ -1487,9 +1487,76 @@ function EnumEditor({
   ] });
 }
 
+// src/edit/MultilineStringEditor.tsx
+import { useLayoutEffect, useRef as useRef4 } from "react";
+
+// src/components/ui/textarea.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Textarea = forwardRef6(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx19(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+
+// src/edit/MultilineStringEditor.tsx
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+function MultilineStringEditor({
+  column,
+  rowId,
+  value,
+  onChange,
+  error,
+  autoFocus
+}) {
+  const errorId = editErrorId(rowId, column.id);
+  const textareaRef = useRef4(null);
+  const selectionRef = useRef4(null);
+  const text = value === null || value === void 0 ? "" : String(value);
+  useLayoutEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+    if (selectionRef.current) {
+      if (document.activeElement !== el) el.focus();
+      el.setSelectionRange(selectionRef.current.start, selectionRef.current.end);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsxs12("div", { children: [
+    /* @__PURE__ */ jsx20(
+      Textarea,
+      {
+        ref: textareaRef,
+        className: "resize-none overflow-hidden",
+        "aria-label": `Edit ${column.header}`,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
+        "data-testid": `edit-${rowId}-${column.id}`,
+        autoFocus,
+        value: text,
+        onChange: (event) => {
+          selectionRef.current = { start: event.target.selectionStart ?? 0, end: event.target.selectionEnd ?? 0 };
+          onChange(event.target.value);
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx20(EditFieldError, { id: errorId, message: error })
+  ] });
+}
+
 // 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";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function textFromValue(value) {
   return value === null || value === void 0 ? "" : String(value);
 }
@@ -1503,14 +1570,14 @@ function NumberEditor({
 }) {
   const errorId = editErrorId(rowId, column.id);
   const [text, setText] = useState5(() => textFromValue(value));
-  const lastEmittedRef = useRef4(value);
+  const lastEmittedRef = useRef5(value);
   useEffect4(() => {
     if (value === lastEmittedRef.current) return;
     lastEmittedRef.current = value;
     setText(textFromValue(value));
   }, [value]);
-  return /* @__PURE__ */ jsxs12("div", { children: [
-    /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsxs13("div", { children: [
+    /* @__PURE__ */ jsx21(
       Input,
       {
         type: "number",
@@ -1529,12 +1596,12 @@ function NumberEditor({
         }
       }
     ),
-    error && /* @__PURE__ */ jsx19(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx21(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/StringEditor.tsx
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function StringEditor({
   column,
   rowId,
@@ -1544,8 +1611,8 @@ function StringEditor({
   autoFocus
 }) {
   const errorId = editErrorId(rowId, column.id);
-  return /* @__PURE__ */ jsxs13("div", { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsx22(
       Input,
       {
         className: "h-8",
@@ -1558,31 +1625,31 @@ function StringEditor({
         onChange: (event) => onChange(event.target.value)
       }
     ),
-    error && /* @__PURE__ */ jsx20(EditFieldError, { id: errorId, message: error })
+    error && /* @__PURE__ */ jsx22(EditFieldError, { id: errorId, message: error })
   ] });
 }
 
 // src/edit/registry.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function renderDefaultEditWidget(column, rowId, value, onChange, error, autoFocus) {
   switch (column.type) {
     case "string":
-      return /* @__PURE__ */ jsx21(StringEditor, { column, rowId, value, onChange, error, autoFocus });
+      return column.multiline ? /* @__PURE__ */ jsx23(MultilineStringEditor, { column, rowId, value, onChange, error, autoFocus }) : /* @__PURE__ */ jsx23(StringEditor, { column, rowId, value, onChange, error, autoFocus });
     case "enum":
-      return /* @__PURE__ */ jsx21(EnumEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx23(EnumEditor, { column, rowId, value, onChange, error, autoFocus });
     case "boolean":
-      return /* @__PURE__ */ jsx21(BooleanEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx23(BooleanEditor, { column, rowId, value, onChange, error, autoFocus });
     case "number":
     case "currency":
-      return /* @__PURE__ */ jsx21(NumberEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx23(NumberEditor, { column, rowId, value, onChange, error, autoFocus });
     case "date":
     case "datetime":
-      return /* @__PURE__ */ jsx21(DateEditor, { column, rowId, value, onChange, error, autoFocus });
+      return /* @__PURE__ */ jsx23(DateEditor, { column, rowId, value, onChange, error, autoFocus });
   }
 }
 
 // src/edit/editingState.ts
-import { useEffect as useEffect5, useRef as useRef5, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState6 } from "react";
 function editValuesEqual(a, b) {
   if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
   return a === b;
@@ -1684,13 +1751,13 @@ function useEditingState(editing, getRowId) {
     editing?.onDiscard?.();
   }
   const ctx = editing ? { pendingEdits, editErrors, activeRowId, autoFocusTarget, getRowId, onEdit: commitEdit, onActivateRow: activateRow } : void 0;
-  const ctxRef = useRef5(void 0);
+  const ctxRef = useRef6(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";
+import { jsx as jsx24 } 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);
@@ -1702,7 +1769,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
     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(
+    return /* @__PURE__ */ jsx24(
       "div",
       {
         onKeyDown: (event) => {
@@ -1715,7 +1782,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
       }
     );
   }
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx24(
     "span",
     {
       role: "button",
@@ -1738,7 +1805,7 @@ function renderEditableCell(column, row, rawValue, ctx) {
 }
 
 // src/edit/EditingBar.tsx
-import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs15 } from "react/jsx-runtime";
 function resolveEditLabel(label, changedRowCount, fallback) {
   if (label === void 0) return fallback(changedRowCount);
   return typeof label === "function" ? label(changedRowCount) : label;
@@ -1758,25 +1825,25 @@ function EditingBar({
   testIdPrefix = "datagrid"
 }) {
   const hasEditErrors = editErrors.size > 0;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "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: [
+        /* @__PURE__ */ jsxs15("span", { "aria-live": "polite", children: [
           pendingRowCount,
           " row",
           pendingRowCount === 1 ? "" : "s",
           " changed",
-          hasEditErrors && /* @__PURE__ */ jsxs14("span", { className: "ml-2 text-destructive", children: [
+          hasEditErrors && /* @__PURE__ */ jsxs15("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(
+        /* @__PURE__ */ jsxs15("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx25(
             Button,
             {
               type: "button",
@@ -1788,7 +1855,7 @@ function EditingBar({
               children: resolveEditLabel(editing.discardLabel, pendingRowCount, () => "Discard")
             }
           ),
-          /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx25(
             Button,
             {
               type: "button",
@@ -1809,6 +1876,633 @@ function EditingBar({
   );
 }
 
+// src/cell-editing/rangeUtils.ts
+function buildIndexMap(ids) {
+  const map = /* @__PURE__ */ new Map();
+  ids.forEach((id, index) => map.set(id, index));
+  return map;
+}
+function normalizeRange(range, rowIndex, columnIndex) {
+  const anchorRow = rowIndex.get(range.anchor.rowId);
+  const focusRow = rowIndex.get(range.focus.rowId);
+  const anchorCol = columnIndex.get(range.anchor.columnId);
+  const focusCol = columnIndex.get(range.focus.columnId);
+  if (anchorRow === void 0 || focusRow === void 0 || anchorCol === void 0 || focusCol === void 0) {
+    return void 0;
+  }
+  return {
+    rowStart: Math.min(anchorRow, focusRow),
+    rowEnd: Math.max(anchorRow, focusRow),
+    colStart: Math.min(anchorCol, focusCol),
+    colEnd: Math.max(anchorCol, focusCol)
+  };
+}
+function isCellInRange(cell, range, rowIndex, columnIndex) {
+  const normalized = normalizeRange(range, rowIndex, columnIndex);
+  if (!normalized) return false;
+  const row = rowIndex.get(cell.rowId);
+  const col = columnIndex.get(cell.columnId);
+  if (row === void 0 || col === void 0) return false;
+  return row >= normalized.rowStart && row <= normalized.rowEnd && col >= normalized.colStart && col <= normalized.colEnd;
+}
+function cellsInRange(range, rowIds, columnIds, rowIndex, columnIndex) {
+  const normalized = normalizeRange(range, rowIndex, columnIndex);
+  if (!normalized) return [];
+  const cells = [];
+  for (let r = normalized.rowStart; r <= normalized.rowEnd; r++) {
+    const rowId = rowIds[r];
+    if (rowId === void 0) continue;
+    for (let c = normalized.colStart; c <= normalized.colEnd; c++) {
+      const columnId = columnIds[c];
+      if (columnId === void 0) continue;
+      cells.push({ rowId, columnId });
+    }
+  }
+  return cells;
+}
+function extendRangeForFill(base, target) {
+  const rowOvershoot = Math.max(0, base.rowStart - target.row, target.row - base.rowEnd);
+  const colOvershoot = Math.max(0, base.colStart - target.col, target.col - base.colEnd);
+  if (rowOvershoot === 0 && colOvershoot === 0) return base;
+  if (rowOvershoot >= colOvershoot) {
+    return {
+      rowStart: Math.min(base.rowStart, target.row),
+      rowEnd: Math.max(base.rowEnd, target.row),
+      colStart: base.colStart,
+      colEnd: base.colEnd
+    };
+  }
+  return {
+    rowStart: base.rowStart,
+    rowEnd: base.rowEnd,
+    colStart: Math.min(base.colStart, target.col),
+    colEnd: Math.max(base.colEnd, target.col)
+  };
+}
+function extendRangeForFillToCellRange(base, target, rowIds, columnIds, rowIndex, columnIndex) {
+  const normalizedBase = normalizeRange(base, rowIndex, columnIndex);
+  if (!normalizedBase) return void 0;
+  const targetRow = rowIndex.get(target.rowId);
+  const targetCol = columnIndex.get(target.columnId);
+  if (targetRow === void 0 || targetCol === void 0) return void 0;
+  const extended = extendRangeForFill(normalizedBase, { row: targetRow, col: targetCol });
+  const startRowId = rowIds[extended.rowStart];
+  const endRowId = rowIds[extended.rowEnd];
+  const startColumnId = columnIds[extended.colStart];
+  const endColumnId = columnIds[extended.colEnd];
+  if (startRowId === void 0 || endRowId === void 0 || startColumnId === void 0 || endColumnId === void 0) {
+    return void 0;
+  }
+  return { anchor: { rowId: startRowId, columnId: startColumnId }, focus: { rowId: endRowId, columnId: endColumnId } };
+}
+
+// src/cell-editing/useCellSelection.ts
+import { useCallback as useCallback2, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
+function useCellSelection({ rowIds, columnIds, onNavigateToRow }) {
+  const [selection, setSelectionState] = useState7(void 0);
+  const [isDragging, setIsDragging] = useState7(false);
+  const [dragFocus, setDragFocus] = useState7(void 0);
+  const draggingRef = useRef7(false);
+  const dragFocusRef = useRef7(void 0);
+  const rowIndex = useMemo3(() => buildIndexMap(rowIds), [rowIds]);
+  const columnIndex = useMemo3(() => buildIndexMap(columnIds), [columnIds]);
+  const startSelection = useCallback2((cell, options) => {
+    setSelectionState((prev) => options?.extend && prev ? { anchor: prev.anchor, focus: cell } : { anchor: cell, focus: cell });
+    draggingRef.current = true;
+    setIsDragging(true);
+    dragFocusRef.current = void 0;
+    setDragFocus(void 0);
+  }, []);
+  const updateDrag = useCallback2((cell) => {
+    if (!draggingRef.current) return;
+    dragFocusRef.current = cell;
+    setDragFocus(cell);
+  }, []);
+  const endDrag = useCallback2(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    setIsDragging(false);
+    const finalFocus = dragFocusRef.current;
+    dragFocusRef.current = void 0;
+    setDragFocus(void 0);
+    if (finalFocus) {
+      setSelectionState((prev) => prev ? { anchor: prev.anchor, focus: finalFocus } : prev);
+    }
+  }, []);
+  const moveSelection = useCallback2(
+    (direction, options) => {
+      const from = selection?.focus ?? { rowId: rowIds[0] ?? "", columnId: columnIds[0] ?? "" };
+      const rowIdx = rowIndex.get(from.rowId);
+      const colIdx = columnIndex.get(from.columnId);
+      if (rowIdx === void 0 || colIdx === void 0 || rowIds.length === 0 || columnIds.length === 0) return;
+      let nextRowIdx = rowIdx;
+      let nextColIdx = colIdx;
+      if (direction === "up") nextRowIdx = Math.max(0, rowIdx - 1);
+      else if (direction === "down") nextRowIdx = Math.min(rowIds.length - 1, rowIdx + 1);
+      else if (direction === "left") nextColIdx = Math.max(0, colIdx - 1);
+      else nextColIdx = Math.min(columnIds.length - 1, colIdx + 1);
+      const nextRowId = rowIds[nextRowIdx];
+      const nextColumnId = columnIds[nextColIdx];
+      if (nextRowId !== from.rowId) onNavigateToRow?.(nextRowId);
+      const nextCell = { rowId: nextRowId, columnId: nextColumnId };
+      const anchor = options?.extend ? selection?.anchor ?? nextCell : nextCell;
+      setSelectionState({ anchor, focus: nextCell });
+    },
+    [selection, rowIds, columnIds, rowIndex, columnIndex, onNavigateToRow]
+  );
+  const setSelection = useCallback2((range) => {
+    setSelectionState(range);
+  }, []);
+  const clearSelection = useCallback2(() => {
+    draggingRef.current = false;
+    setIsDragging(false);
+    setDragFocus(void 0);
+    setSelectionState(void 0);
+  }, []);
+  const effectiveRange = useMemo3(() => {
+    if (!selection) return void 0;
+    if (isDragging && dragFocus) return { anchor: selection.anchor, focus: dragFocus };
+    return selection;
+  }, [selection, isDragging, dragFocus]);
+  const [isFillDragging, setIsFillDragging] = useState7(false);
+  const [fillTarget, setFillTarget] = useState7(void 0);
+  const fillDraggingRef = useRef7(false);
+  const fillTargetRef = useRef7(void 0);
+  const fillBaseRef = useRef7(void 0);
+  const startFillDrag = useCallback2(() => {
+    if (!selection) return;
+    fillBaseRef.current = selection;
+    fillDraggingRef.current = true;
+    setIsFillDragging(true);
+  }, [selection]);
+  const updateFillDrag = useCallback2((cell) => {
+    if (!fillDraggingRef.current) return;
+    fillTargetRef.current = cell;
+    setFillTarget(cell);
+  }, []);
+  const endFillDrag = useCallback2(() => {
+    if (!fillDraggingRef.current) return void 0;
+    fillDraggingRef.current = false;
+    setIsFillDragging(false);
+    const sourceRange = fillBaseRef.current;
+    const target = fillTargetRef.current;
+    fillBaseRef.current = void 0;
+    fillTargetRef.current = void 0;
+    setFillTarget(void 0);
+    if (!sourceRange || !target) return void 0;
+    const finalRange = extendRangeForFillToCellRange(sourceRange, target, rowIds, columnIds, rowIndex, columnIndex);
+    if (!finalRange) return void 0;
+    setSelectionState(finalRange);
+    return { sourceRange, finalRange };
+  }, [rowIds, columnIds, rowIndex, columnIndex]);
+  const fillPreviewRange = useMemo3(() => {
+    if (!isFillDragging || !selection || !fillTarget) return void 0;
+    return extendRangeForFillToCellRange(selection, fillTarget, rowIds, columnIds, rowIndex, columnIndex);
+  }, [isFillDragging, selection, fillTarget, rowIds, columnIds, rowIndex, columnIndex]);
+  return {
+    selection,
+    isDragging,
+    effectiveRange,
+    startSelection,
+    updateDrag,
+    endDrag,
+    moveSelection,
+    setSelection,
+    clearSelection,
+    isFillDragging,
+    fillPreviewRange,
+    startFillDrag,
+    updateFillDrag,
+    endFillDrag
+  };
+}
+
+// src/cell-editing/useCellEditingState.ts
+import { useRef as useRef8, useState as useState8 } from "react";
+function cellKey(rowId, columnId) {
+  return `${rowId}:${columnId}`;
+}
+function useCellEditingState(cellEditing, getRowId) {
+  const [editingCell, setEditingCell] = useState8(void 0);
+  const [initialText, setInitialText] = useState8(void 0);
+  const [hasDraft, setHasDraft] = useState8(false);
+  const [draftValue, setDraftValue] = useState8(void 0);
+  const [overrides, setOverrides] = useState8(/* @__PURE__ */ new Map());
+  const [errors, setErrors] = useState8(/* @__PURE__ */ new Map());
+  const justCommittedRef = useRef8(false);
+  function closeEditor() {
+    setEditingCell(void 0);
+    setInitialText(void 0);
+    setHasDraft(false);
+    setDraftValue(void 0);
+  }
+  function applyChanges(changes) {
+    if (!cellEditing || cellEditing.disabled || changes.length === 0) return;
+    setOverrides((prev) => {
+      const next = new Map(prev);
+      for (const change of changes) {
+        next.set(cellKey(change.rowId, change.columnId), { value: change.value, previousValue: change.previousValue });
+      }
+      return next;
+    });
+    setErrors((prev) => {
+      if (prev.size === 0) return prev;
+      const next = new Map(prev);
+      for (const change of changes) next.delete(cellKey(change.rowId, change.columnId));
+      return next.size === prev.size ? prev : next;
+    });
+    void cellEditing.onCellsChange(changes);
+  }
+  function onBeginEdit(cell, text) {
+    if (!cellEditing || cellEditing.disabled) return;
+    setEditingCell(cell);
+    setInitialText(text);
+    setHasDraft(text !== void 0);
+    setDraftValue(text);
+  }
+  function onChangeDraft(value) {
+    setHasDraft(true);
+    setDraftValue(value);
+  }
+  function onCommitEdit(row, previousValue) {
+    const cell = editingCell;
+    const shouldCommit = hasDraft;
+    const value = draftValue;
+    closeEditor();
+    if (!cell || !shouldCommit) return;
+    justCommittedRef.current = true;
+    applyChanges([{ rowId: cell.rowId, row, columnId: cell.columnId, previousValue, value }]);
+  }
+  function onCommitValue(row, previousValue, value) {
+    const cell = editingCell;
+    closeEditor();
+    if (!cell) return;
+    justCommittedRef.current = true;
+    applyChanges([{ rowId: cell.rowId, row, columnId: cell.columnId, previousValue, value }]);
+  }
+  function consumeJustCommitted() {
+    const value = justCommittedRef.current;
+    justCommittedRef.current = false;
+    return value;
+  }
+  function onSetError(rowId, columnId, message) {
+    setErrors((prev) => {
+      const key = cellKey(rowId, columnId);
+      if (message === void 0) {
+        if (!prev.has(key)) return prev;
+        const next2 = new Map(prev);
+        next2.delete(key);
+        return next2;
+      }
+      const next = new Map(prev);
+      next.set(key, message);
+      return next;
+    });
+  }
+  function getError(rowId, columnId) {
+    return errors.get(cellKey(rowId, columnId));
+  }
+  function resolveValue(rowId, columnId, rawValue) {
+    const override = overrides.get(cellKey(rowId, columnId));
+    if (!override) return rawValue;
+    if (rawValue !== override.previousValue) return rawValue;
+    return override.value;
+  }
+  const ctx = cellEditing ? {
+    editingCell,
+    initialText,
+    hasDraft,
+    draftValue,
+    getRowId,
+    getError,
+    resolveValue,
+    onBeginEdit,
+    onCancelEdit: closeEditor,
+    onChangeDraft,
+    onCommitEdit,
+    onCommitValue,
+    onSetError,
+    consumeJustCommitted
+  } : void 0;
+  const ctxRef = useRef8(void 0);
+  ctxRef.current = ctx;
+  return { ctx, ctxRef, applyChanges };
+}
+
+// src/cell-editing/renderCellModeCell.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+function isAtomicEditorType(type) {
+  return type === "enum" || type === "boolean" || type === "date" || type === "datetime";
+}
+function renderCellModeCell(column, row, rawValue, ctx) {
+  const staticContent = (value2) => column.cell ? column.cell(value2, row) : defaultFormat(column, value2);
+  if (!ctx) return staticContent(rawValue);
+  const rowId = ctx.getRowId(row);
+  const value = ctx.resolveValue(rowId, column.id, rawValue);
+  const isThisCellEditing = ctx.editingCell?.rowId === rowId && ctx.editingCell.columnId === column.id && isEditable(column, row);
+  if (!isThisCellEditing) {
+    return /* @__PURE__ */ jsx26("span", { "data-testid": `cell-${rowId}-${column.id}`, className: "block w-full", children: staticContent(value) });
+  }
+  const isAtomic = isAtomicEditorType(column.type);
+  const error = ctx.getError(rowId, column.id);
+  const startValue = ctx.initialText !== void 0 ? ctx.initialText : value;
+  const currentValue = ctx.hasDraft ? ctx.draftValue : startValue;
+  function validate(candidate) {
+    return column.validateEdit?.(candidate, row);
+  }
+  const onChange = (next) => {
+    const message = validate(next);
+    ctx.onSetError(rowId, column.id, message);
+    if (isAtomic && !message) {
+      ctx.onCommitValue(row, value, next);
+      return;
+    }
+    ctx.onChangeDraft(next);
+  };
+  const editor = column.renderEditCell ? column.renderEditCell(currentValue, row, onChange, error, true) : renderDefaultEditWidget(column, rowId, currentValue, onChange, error, true);
+  function handleKeyDown(event) {
+    if (event.key === "Escape") {
+      event.stopPropagation();
+      ctx.onCancelEdit();
+      return;
+    }
+    const isMultilineNewline = column.type === "string" && column.multiline && event.key === "Enter" && event.shiftKey;
+    if (isMultilineNewline) return;
+    if (isAtomic || event.key !== "Enter" && event.key !== "Tab") return;
+    const message = validate(currentValue);
+    if (message) {
+      event.stopPropagation();
+      return;
+    }
+    ctx.onCommitEdit(row, value);
+  }
+  function handleBlur() {
+    if (isAtomic) return;
+    if (validate(currentValue)) ctx.onCancelEdit();
+    else ctx.onCommitEdit(row, value);
+  }
+  return /* @__PURE__ */ jsx26("div", { onKeyDown: handleKeyDown, onBlur: handleBlur, children: editor });
+}
+
+// src/cell-editing/SelectionOverlay.tsx
+import { useLayoutEffect as useLayoutEffect2, useState as useState9 } from "react";
+import { Fragment as Fragment2, jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
+function cellSelector(rowId, columnId) {
+  const escape = (value) => typeof CSS !== "undefined" && CSS.escape ? CSS.escape(value) : value.replace(/["\\]/g, "\\$&");
+  return `[data-cell-row="${escape(rowId)}"][data-cell-col="${escape(columnId)}"]`;
+}
+function computeRangeRect(container, range) {
+  const anchorEl = container.querySelector(cellSelector(range.anchor.rowId, range.anchor.columnId));
+  const focusEl = container.querySelector(cellSelector(range.focus.rowId, range.focus.columnId));
+  if (!anchorEl || !focusEl) return void 0;
+  const containerRect = container.getBoundingClientRect();
+  const a = anchorEl.getBoundingClientRect();
+  const f = focusEl.getBoundingClientRect();
+  const left = Math.min(a.left, f.left) - containerRect.left + container.scrollLeft;
+  const top = Math.min(a.top, f.top) - containerRect.top + container.scrollTop;
+  const right = Math.max(a.right, f.right) - containerRect.left + container.scrollLeft;
+  const bottom = Math.max(a.bottom, f.bottom) - containerRect.top + container.scrollTop;
+  return { top, left, width: right - left, height: bottom - top };
+}
+function rectsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
+var HANDLE_SIZE = 8;
+function SelectionOverlay({
+  containerRef,
+  range,
+  fillPreviewRange,
+  onFillHandleMouseDown
+}) {
+  const [rect, setRect] = useState9(void 0);
+  const [previewRect, setPreviewRect] = useState9(void 0);
+  useLayoutEffect2(() => {
+    const container = containerRef.current;
+    const nextRect = range && container ? computeRangeRect(container, range) : void 0;
+    setRect((prev) => rectsEqual(prev, nextRect) ? prev : nextRect);
+    const nextPreviewRect = fillPreviewRange && container ? computeRangeRect(container, fillPreviewRange) : void 0;
+    setPreviewRect((prev) => rectsEqual(prev, nextPreviewRect) ? prev : nextPreviewRect);
+  });
+  if (!rect) return null;
+  return /* @__PURE__ */ jsxs16(Fragment2, { children: [
+    /* @__PURE__ */ jsx27(
+      "div",
+      {
+        "data-testid": "cell-selection-overlay",
+        "aria-hidden": true,
+        className: "pointer-events-none absolute z-20 border-2 border-primary bg-primary/10",
+        style: { top: rect.top, left: rect.left, width: rect.width, height: rect.height }
+      }
+    ),
+    previewRect && /* @__PURE__ */ jsx27(
+      "div",
+      {
+        "data-testid": "cell-fill-preview-overlay",
+        "aria-hidden": true,
+        className: "pointer-events-none absolute z-20 border-2 border-dashed border-primary",
+        style: { top: previewRect.top, left: previewRect.left, width: previewRect.width, height: previewRect.height }
+      }
+    ),
+    onFillHandleMouseDown && /* @__PURE__ */ jsx27(
+      "div",
+      {
+        "data-testid": "cell-fill-handle",
+        role: "button",
+        "aria-label": "Fill handle: drag to fill adjacent cells",
+        className: "absolute z-30 cursor-crosshair border border-background bg-primary",
+        style: {
+          top: rect.top + rect.height - HANDLE_SIZE / 2,
+          left: rect.left + rect.width - HANDLE_SIZE / 2,
+          width: HANDLE_SIZE,
+          height: HANDLE_SIZE
+        },
+        onMouseDown: (event) => {
+          event.stopPropagation();
+          onFillHandleMouseDown(event);
+        }
+      }
+    )
+  ] });
+}
+
+// src/cell-editing/coerce.ts
+function parseBoolean(raw) {
+  const normalized = raw.trim().toLowerCase();
+  if (normalized === "true" || normalized === "yes" || normalized === "1") return true;
+  if (normalized === "false" || normalized === "no" || normalized === "0") return false;
+  return void 0;
+}
+function matchEnumOption(options, raw) {
+  const trimmed = raw.trim();
+  const byValue = options.find((option) => option.value === trimmed);
+  if (byValue) return byValue.value;
+  const lowered = trimmed.toLowerCase();
+  return options.find((option) => option.label.toLowerCase() === lowered)?.value;
+}
+function coerceValueForColumn(column, raw) {
+  switch (column.type) {
+    case "string":
+      return { value: raw };
+    case "number":
+    case "currency": {
+      if (raw.trim() === "") return { value: null };
+      const num = toNumber(raw);
+      return num === null ? void 0 : { value: num };
+    }
+    case "boolean": {
+      const bool = parseBoolean(raw);
+      return bool === void 0 ? void 0 : { value: bool };
+    }
+    case "date":
+    case "datetime": {
+      const date = toDate(raw);
+      return date === null ? void 0 : { value: date };
+    }
+    case "enum": {
+      const matched = matchEnumOption(column.options, raw);
+      return matched === void 0 ? void 0 : { value: matched };
+    }
+  }
+}
+
+// src/cell-editing/clipboard.ts
+function quoteTsvField(field) {
+  if (!/[\t\n\r"]/.test(field)) return field;
+  return `"${field.replace(/"/g, '""')}"`;
+}
+function rangeToTsv(range, rows, rowIds, columns, columnIds, getRowId) {
+  const rowIndex = buildIndexMap(rowIds);
+  const columnIndex = buildIndexMap(columnIds);
+  const normalized = normalizeRange(range, rowIndex, columnIndex);
+  if (!normalized) return "";
+  const columnById = new Map(columns.map((column) => [column.id, column]));
+  const rowById = new Map(rows.map((row) => [getRowId(row), row]));
+  const lines = [];
+  for (let r = normalized.rowStart; r <= normalized.rowEnd; r++) {
+    const rowId = rowIds[r];
+    const row = rowId !== void 0 ? rowById.get(rowId) : void 0;
+    const fields = [];
+    for (let c = normalized.colStart; c <= normalized.colEnd; c++) {
+      const columnId = columnIds[c];
+      const column = columnId !== void 0 ? columnById.get(columnId) : void 0;
+      if (!column || row === void 0) {
+        fields.push("");
+        continue;
+      }
+      const value = getColumnValue(column, row);
+      const text = column.formatForClipboard ? column.formatForClipboard(value, row) : defaultFormat(column, value);
+      fields.push(quoteTsvField(text));
+    }
+    lines.push(fields.join("	"));
+  }
+  return lines.join("\n");
+}
+function parseTsv(text) {
+  const normalized = text.replace(/\r\n/g, "\n");
+  const rows = [];
+  let row = [];
+  let field = "";
+  let inQuotes = false;
+  let i = 0;
+  while (i < normalized.length) {
+    const ch = normalized[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        if (normalized[i + 1] === '"') {
+          field += '"';
+          i += 2;
+          continue;
+        }
+        inQuotes = false;
+        i++;
+        continue;
+      }
+      field += ch;
+      i++;
+      continue;
+    }
+    if (ch === '"' && field === "") {
+      inQuotes = true;
+      i++;
+      continue;
+    }
+    if (ch === "	") {
+      row.push(field);
+      field = "";
+      i++;
+      continue;
+    }
+    if (ch === "\n") {
+      row.push(field);
+      rows.push(row);
+      row = [];
+      field = "";
+      i++;
+      continue;
+    }
+    field += ch;
+    i++;
+  }
+  row.push(field);
+  rows.push(row);
+  const last = rows[rows.length - 1];
+  if (rows.length > 1 && normalized.endsWith("\n") && last?.length === 1 && last[0] === "") {
+    rows.pop();
+  }
+  return rows;
+}
+
+// src/cell-editing/fillHandle.ts
+function computeFillChanges(sourceRange, finalRange, rowIds, columnIds, columns, getRow) {
+  const rowIndex = buildIndexMap(rowIds);
+  const columnIndex = buildIndexMap(columnIds);
+  const source = normalizeRange(sourceRange, rowIndex, columnIndex);
+  const final = normalizeRange(finalRange, rowIndex, columnIndex);
+  if (!source || !final) return [];
+  const columnById = new Map(columns.map((column) => [column.id, column]));
+  const sourceRowSpan = source.rowEnd - source.rowStart + 1;
+  const sourceColSpan = source.colEnd - source.colStart + 1;
+  function sourceRowFor(targetRow) {
+    if (targetRow >= source.rowStart && targetRow <= source.rowEnd) return targetRow;
+    if (targetRow > source.rowEnd) return source.rowStart + (targetRow - source.rowEnd - 1) % sourceRowSpan;
+    return source.rowEnd - (source.rowStart - targetRow - 1) % sourceRowSpan;
+  }
+  function sourceColFor(targetCol) {
+    if (targetCol >= source.colStart && targetCol <= source.colEnd) return targetCol;
+    if (targetCol > source.colEnd) return source.colStart + (targetCol - source.colEnd - 1) % sourceColSpan;
+    return source.colEnd - (source.colStart - targetCol - 1) % sourceColSpan;
+  }
+  const changes = [];
+  for (let r = final.rowStart; r <= final.rowEnd; r++) {
+    const isNewRow = r < source.rowStart || r > source.rowEnd;
+    for (let c = final.colStart; c <= final.colEnd; c++) {
+      const isNewCol = c < source.colStart || c > source.colEnd;
+      if (!isNewRow && !isNewCol) continue;
+      const targetRowId = rowIds[r];
+      const targetColumnId = columnIds[c];
+      if (targetRowId === void 0 || targetColumnId === void 0) continue;
+      const column = columnById.get(targetColumnId);
+      const targetRow = getRow(targetRowId);
+      if (!column || targetRow === void 0 || !isEditable(column, targetRow)) continue;
+      const sourceRowId = rowIds[sourceRowFor(r)];
+      const sourceColumnId = columnIds[sourceColFor(c)];
+      const sourceRow = sourceRowId !== void 0 ? getRow(sourceRowId) : void 0;
+      const sourceColumn = sourceColumnId !== void 0 ? columnById.get(sourceColumnId) : void 0;
+      if (sourceRow === void 0 || !sourceColumn) continue;
+      changes.push({
+        rowId: targetRowId,
+        row: targetRow,
+        columnId: targetColumnId,
+        previousValue: getColumnValue(column, targetRow),
+        value: getColumnValue(sourceColumn, sourceRow)
+      });
+    }
+  }
+  return changes;
+}
+
 // src/column-selector/ColumnSelector.tsx
 import { Columns3 } from "lucide-react";
 import { useEffect as useEffect6 } from "react";
@@ -1816,11 +2510,11 @@ 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 jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx28, jsxs as jsxs17 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
-var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DialogOverlay = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -1829,9 +2523,9 @@ var DialogOverlay = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(DialogPrimitive.Portal, { children: [
-  /* @__PURE__ */ jsx24(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs15(
+var DialogContent = forwardRef7(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs17(DialogPrimitive.Portal, { children: [
+  /* @__PURE__ */ jsx28(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs17(
     DialogPrimitive.Content,
     {
       ref,
@@ -1842,9 +2536,9 @@ var DialogContent = forwardRef6(({ className, children, ...props }, ref) => /* @
       ...props,
       children: [
         children,
-        /* @__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" })
+        /* @__PURE__ */ jsxs17(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 hover:opacity-100", children: [
+          /* @__PURE__ */ jsx28(X, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx28("span", { className: "sr-only", children: "Close" })
         ] })
       ]
     }
@@ -1854,10 +2548,10 @@ DialogContent.displayName = "DialogContent";
 var DialogHeader = ({
   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 }));
+}) => /* @__PURE__ */ jsx28("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+var DialogTitle = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(DialogPrimitive.Title, { ref, className: cn("text-lg font-semibold", className), ...props }));
 DialogTitle.displayName = "DialogTitle";
-var DialogDescription = forwardRef6(({ className, ...props }, ref) => /* @__PURE__ */ jsx24(
+var DialogDescription = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   DialogPrimitive.Description,
   {
     ref,
@@ -1925,7 +2619,7 @@ function canHideGroup(columns, visibility, groupColumnIds) {
 }
 
 // src/column-selector/ColumnSelector.tsx
-import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColumnSelector({
   columns,
   visibility,
@@ -1950,20 +2644,20 @@ function ColumnSelector({
   }
   const totalVisible = countVisible(columns, visibility);
   const groups = groupColumns(columns);
-  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 }),
+  return /* @__PURE__ */ jsxs18(Dialog, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx29(DialogTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx29(Button, { variant: "outline", size: "icon", "aria-label": "Choose columns", children: /* @__PURE__ */ jsx29(Columns3, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsxs18(DialogContent, { className: "w-fit max-w-[calc(100vw-2rem)] sm:max-w-2xl", children: [
+      /* @__PURE__ */ jsx29(DialogHeader, { children: /* @__PURE__ */ jsx29(DialogTitle, { children: "Columns" }) }),
+      /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap gap-x-8 gap-y-5", children: groups.map(({ group, columns: groupCols }) => /* @__PURE__ */ jsxs18("div", { className: "flex min-w-32 flex-col gap-1.5", children: [
+        group && /* @__PURE__ */ jsx29("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__ */ jsxs16(
+          return /* @__PURE__ */ jsxs18(
             "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__ */ jsx25(
+                /* @__PURE__ */ jsx29(
                   Checkbox,
                   {
                     checked: visible,
@@ -1995,15 +2689,15 @@ function resolveMenuItems(items, ctx) {
 
 // src/menu/ActionsMenu.tsx
 import { MoreVertical } from "lucide-react";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } 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 jsx26 } from "react/jsx-runtime";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
-var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx26(
+var DropdownMenuContent = forwardRef8(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx30(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx30(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -2016,7 +2710,7 @@ var DropdownMenuContent = forwardRef7(({ className, sideOffset = 4, ...props },
   }
 ) }));
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuItem = forwardRef8(({ className, danger, ...props }, ref) => /* @__PURE__ */ jsx30(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -2029,7 +2723,7 @@ var DropdownMenuItem = forwardRef7(({ className, danger, ...props }, ref) => /*
   }
 ));
 DropdownMenuItem.displayName = "DropdownMenuItem";
-var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuSeparator = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -2038,7 +2732,7 @@ var DropdownMenuSeparator = forwardRef7(({ className, ...props }, ref) => /* @__
   }
 ));
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuLabel = forwardRef8(({ className, ...props }, ref) => /* @__PURE__ */ jsx30(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2049,16 +2743,16 @@ var DropdownMenuLabel = forwardRef7(({ className, ...props }, ref) => /* @__PURE
 DropdownMenuLabel.displayName = "DropdownMenuLabel";
 
 // src/menu/ActionsMenu.tsx
-import { jsx as jsx27, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function ActionsMenu({ items, ctx, triggerLabel }) {
-  const resolved = useMemo3(
+  const resolved = useMemo4(
     () => resolveMenuItems(items, ctx),
     [items, ctx.row, ctx.selectedRows]
   );
   if (resolved.length === 0) return null;
-  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(
+  return /* @__PURE__ */ jsxs19(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx31(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx31(Button, { variant: "ghost", size: "icon", "aria-label": triggerLabel, onClick: stopRowClick, children: /* @__PURE__ */ jsx31(MoreVertical, { className: "h-4 w-4", "aria-hidden": true }) }) }),
+    /* @__PURE__ */ jsx31(DropdownMenuContent, { align: "end", children: resolved.map((item) => /* @__PURE__ */ jsx31(
       DropdownMenuItem,
       {
         danger: item.danger,
@@ -2076,25 +2770,25 @@ 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 useEffect9, useMemo as useMemo7, useRef as useRef8, useState as useState10 } from "react";
+import { Fragment as Fragment3, useEffect as useEffect9, useMemo as useMemo8, useRef as useRef11, useState as useState13 } from "react";
 
 // src/hooks/useGroupExpansion.ts
-import { useCallback as useCallback2, useState as useState7 } from "react";
+import { useCallback as useCallback3, useState as useState10 } from "react";
 function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onExpandedGroupsChange) {
-  const [internalExpandedGroups, setInternalExpandedGroups] = useState7({});
+  const [internalExpandedGroups, setInternalExpandedGroups] = useState10({});
   const expandedGroups = controlledExpandedGroups ?? internalExpandedGroups;
-  const updateExpandedGroups = useCallback2(
+  const updateExpandedGroups = useCallback3(
     (next) => {
       setInternalExpandedGroups(next);
       onExpandedGroupsChange?.(next);
     },
     [onExpandedGroupsChange]
   );
-  const isGroupExpanded = useCallback2(
+  const isGroupExpanded = useCallback3(
     (key) => expandedGroups[key] ?? defaultGroupsExpanded,
     [expandedGroups, defaultGroupsExpanded]
   );
-  const toggleGroupExpanded = useCallback2(
+  const toggleGroupExpanded = useCallback3(
     (key) => {
       updateExpandedGroups({ ...expandedGroups, [key]: !isGroupExpanded(key) });
     },
@@ -2104,11 +2798,11 @@ function useGroupExpansion(defaultGroupsExpanded, controlledExpandedGroups, onEx
 }
 
 // src/hooks/useStickyGroupHeaderTop.ts
-import { useLayoutEffect, useRef as useRef6, useState as useState8 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef9, useState as useState11 } from "react";
 function useStickyGroupHeaderTop(enabled) {
-  const theadRef = useRef6(null);
-  const [groupHeaderTop, setGroupHeaderTop] = useState8(0);
-  useLayoutEffect(() => {
+  const theadRef = useRef9(null);
+  const [groupHeaderTop, setGroupHeaderTop] = useState11(0);
+  useLayoutEffect3(() => {
     if (!enabled) return;
     const theadEl = theadRef.current;
     if (!theadEl) return;
@@ -2122,9 +2816,9 @@ function useStickyGroupHeaderTop(enabled) {
 }
 
 // src/hooks/useVisibleColumns.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo5 } from "react";
 function useVisibleColumns(columns, columnVisibility) {
-  return useMemo4(
+  return useMemo5(
     () => columnVisibility ? columns.filter((column) => isColumnVisible(columnVisibility, column.id)) : columns,
     [columns, columnVisibility]
   );
@@ -2171,20 +2865,20 @@ function processClientData(data, state) {
 }
 
 // src/grid/useGridState.ts
-import { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo6, useState as useState9 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useMemo as useMemo7, useState as useState12 } from "react";
 
 // src/hooks/useDebouncedCallback.ts
-import { useEffect as useEffect7, useMemo as useMemo5, useRef as useRef7 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef10 } from "react";
 function useDebouncedCallback(callback, delayMs) {
-  const callbackRef = useRef7(callback);
+  const callbackRef = useRef10(callback);
   callbackRef.current = callback;
-  const timeoutRef = useRef7(void 0);
+  const timeoutRef = useRef10(void 0);
   useEffect7(() => {
     return () => {
       clearTimeout(timeoutRef.current);
     };
   }, []);
-  return useMemo5(() => {
+  return useMemo6(() => {
     return {
       run: (...args) => {
         clearTimeout(timeoutRef.current);
@@ -2209,10 +2903,10 @@ function nextSortDir(current, descFirst) {
   return void 0;
 }
 function useGridState(dataSource, initialState, externalState) {
-  const [state, setState] = useState9(
+  const [state, setState] = useState12(
     () => externalState ?? { ...DEFAULT_STATE, ...initialState }
   );
-  const notifyRaw = useCallback3(
+  const notifyRaw = useCallback4(
     (next) => {
       if (dataSource.mode === "server") dataSource.onStateChange(next);
     },
@@ -2222,7 +2916,7 @@ function useGridState(dataSource, initialState, externalState) {
     notifyRaw,
     FILTER_CHANGE_DEBOUNCE_MS
   );
-  const notifyNow = useCallback3(
+  const notifyNow = useCallback4(
     (next) => {
       cancelDebouncedNotify();
       notifyRaw(next);
@@ -2234,14 +2928,14 @@ function useGridState(dataSource, initialState, externalState) {
     cancelDebouncedNotify();
     setState(externalState);
   }, [externalState, cancelDebouncedNotify]);
-  const filtersByColumn = useMemo6(() => {
+  const filtersByColumn = useMemo7(() => {
     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 = useCallback3(
+  const setColumnFilter = useCallback4(
     (columnId, next) => {
       setState((prev) => {
         const remaining = (prev.filter?.filters ?? []).filter(
@@ -2259,7 +2953,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyDebounced]
   );
-  const toggleSort = useCallback3(
+  const toggleSort = useCallback4(
     (columnId, additive, descFirst = false) => {
       setState((prev) => {
         const existing = prev.sort.find((s) => s.field === columnId);
@@ -2274,7 +2968,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPage = useCallback3(
+  const setPage = useCallback4(
     (page) => {
       setState((prev) => {
         const nextState = { ...prev, page };
@@ -2284,7 +2978,7 @@ function useGridState(dataSource, initialState, externalState) {
     },
     [notifyNow]
   );
-  const setPageSize = useCallback3(
+  const setPageSize = useCallback4(
     (pageSize) => {
       setState((prev) => {
         const nextState = { ...prev, pageSize, page: 0 };
@@ -2298,11 +2992,12 @@ function useGridState(dataSource, initialState, externalState) {
 }
 
 // src/grid/DataGrid.tsx
-import { Fragment as Fragment3, jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
 var gridTableFeatures = tableFeatures({ columnSizingFeature, columnResizingFeature });
 var DEFAULT_COLUMN_SIZE = 150;
 var DETAIL_COLUMN_WIDTH = 44;
 var ROW_ACTIONS_COLUMN_WIDTH = 44;
+var EMPTY_ID_ARRAY = [];
 var STRUCTURAL_ZEBRA_BG_CLASS = "bg-[color-mix(in_srgb,var(--color-foreground)_5%,var(--color-background))]";
 function pinnedOffsets(visibleColumns, side, getSize, leadingOffset) {
   const offsets = /* @__PURE__ */ new Map();
@@ -2329,13 +3024,13 @@ function computeHeaderRuns(columns) {
   }
   return runs;
 }
-function toTanstackColumns(columns, editingCtxRef) {
+function toTanstackColumns(columns, editingCtxRef, cellEditingCtxRef) {
   return columns.map((column) => ({
     id: column.id,
     header: column.header,
     size: column.width,
     accessorFn: (row) => getColumnValue(column, row),
-    cell: (info) => renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current)
+    cell: (info) => cellEditingCtxRef.current ? renderCellModeCell(column, info.row.original, info.getValue(), cellEditingCtxRef.current) : renderEditableCell(column, info.row.original, info.getValue(), editingCtxRef.current)
   }));
 }
 function DataGrid({
@@ -2367,26 +3062,28 @@ function DataGrid({
   expandedGroups: controlledExpandedGroups,
   onExpandedGroupsChange,
   zebra = true,
-  editing
+  editing,
+  cellEditing
 }) {
+  const hasCellEditing = Boolean(cellEditing) && !groupBy;
   const { state, filtersByColumn, setColumnFilter, toggleSort, setPage } = useGridState(
     dataSource,
     initialState,
     gridState
   );
-  const [internalSelectedIds, setInternalSelectedIds] = useState10(/* @__PURE__ */ new Set());
+  const [internalSelectedIds, setInternalSelectedIds] = useState13(/* @__PURE__ */ new Set());
   const selectedIds = controlledSelectedIds ?? internalSelectedIds;
   function updateSelectedIds(next) {
     setInternalSelectedIds(next);
     onSelectedIdsChange?.(next);
   }
-  const [internalColumnSizing, setInternalColumnSizing] = useState10({});
+  const [internalColumnSizing, setInternalColumnSizing] = useState13({});
   const columnSizing = controlledColumnSizing ?? internalColumnSizing;
   function updateColumnSizing(next) {
     setInternalColumnSizing(next);
     onColumnSizingChange?.(next);
   }
-  const [expandedIds, setExpandedIds] = useState10(/* @__PURE__ */ new Set());
+  const [expandedIds, setExpandedIds] = useState13(/* @__PURE__ */ new Set());
   function toggleRowExpanded(id) {
     setExpandedIds((prev) => {
       const next = new Set(prev);
@@ -2404,13 +3101,17 @@ function DataGrid({
     editing,
     getRowId
   );
+  const { ctx: cellEditingCtx, ctxRef: cellEditingCtxRef, applyChanges: applyCellChanges } = useCellEditingState(
+    hasCellEditing ? cellEditing : void 0,
+    getRowId
+  );
   const visibleColumns = useVisibleColumns(columns, columnVisibility);
   const serverRowCount = dataSource.mode === "server" ? dataSource.rowCount : void 0;
-  const { rows, rowCount } = useMemo7(() => {
+  const { rows, rowCount } = useMemo8(() => {
     if (dataSource.mode === "client") return processClientData(dataSource.data, state);
     return { rows: dataSource.data, rowCount: serverRowCount ?? 0 };
   }, [dataSource.mode, dataSource.data, serverRowCount, state]);
-  const selectedRows = useMemo7(
+  const selectedRows = useMemo8(
     () => rows.filter((row) => selectedIds.has(getRowId(row))),
     [rows, selectedIds, getRowId]
   );
@@ -2429,8 +3130,11 @@ function DataGrid({
     }
     updateSelectedIds(next);
   }
-  const tanstackColumns = useMemo7(() => toTanstackColumns(visibleColumns, editingCtxRef), [visibleColumns]);
-  const columnById = useMemo7(() => {
+  const tanstackColumns = useMemo8(
+    () => toTanstackColumns(visibleColumns, editingCtxRef, cellEditingCtxRef),
+    [visibleColumns]
+  );
+  const columnById = useMemo8(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, column);
     return map;
@@ -2448,6 +3152,9 @@ function DataGrid({
       updateColumnSizing(next);
     }
   });
+  function findRowById(rowId) {
+    return table.getRowModel().rowsById[rowId]?.original;
+  }
   const pageCount = Math.max(1, Math.ceil(rowCount / state.pageSize));
   const loading = loadingProp || (dataSource.mode === "server" ? Boolean(dataSource.loading) : false);
   const showSelectionColumn = Boolean(headerActions?.length) || controlledSelectedIds !== void 0;
@@ -2455,7 +3162,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 = useMemo7(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
+  const headerRuns = useMemo8(() => computeHeaderRuns(visibleColumns), [visibleColumns]);
   const hasHeaderGroups = visibleColumns.some((column) => column.headerGroup);
   function renderFilterWidget(column) {
     const value = filtersByColumn.get(column.id);
@@ -2465,11 +3172,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 = useMemo7(
+  const leftPinnedOffsets = useMemo8(
     () => pinnedOffsets(visibleColumns, "left", columnSize, leadingStructuralWidth),
     [visibleColumns, columnSizing, leadingStructuralWidth]
   );
-  const rightPinnedOffsets = useMemo7(
+  const rightPinnedOffsets = useMemo8(
     () => pinnedOffsets(visibleColumns, "right", columnSize, trailingStructuralWidth),
     [visibleColumns, columnSizing, trailingStructuralWidth]
   );
@@ -2517,7 +3224,7 @@ function DataGrid({
       style: pinnedProps?.style
     };
   }
-  const bodyCellPropsByColumn = useMemo7(() => {
+  const bodyCellPropsByColumn = useMemo8(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, bodyCellClassAndStyle(column));
     return map;
@@ -2533,7 +3240,7 @@ function DataGrid({
     );
     return { className, style: pinnedProps.style };
   }
-  const leafHeaderCellPropsByColumn = useMemo7(() => {
+  const leafHeaderCellPropsByColumn = useMemo8(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) {
       map.set(
@@ -2543,7 +3250,7 @@ function DataGrid({
     }
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
-  const filterHeaderCellPropsByColumn = useMemo7(() => {
+  const filterHeaderCellPropsByColumn = useMemo8(() => {
     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"));
@@ -2551,13 +3258,13 @@ function DataGrid({
     return map;
   }, [visibleColumns, enableColumnResizing, leftPinnedOffsets, rightPinnedOffsets, columnSizing]);
   const tableRows = table.getRowModel().rows;
-  const groupedBuckets = useMemo7(
+  const groupedBuckets = useMemo8(
     () => groupBy ? groupRows(tableRows, (row) => groupBy(row.original)) : void 0,
     [tableRows, groupBy]
   );
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
   const shouldVirtualize = Boolean(virtualize) && tableRows.length > (virtualize?.threshold ?? 100);
-  const flatItems = useMemo7(() => {
+  const flatItems = useMemo8(() => {
     if (!shouldVirtualize) return [];
     if (!groupedBuckets) return tableRows.map((row) => ({ kind: "row", row }));
     const items = [];
@@ -2570,7 +3277,7 @@ function DataGrid({
     }
     return items;
   }, [shouldVirtualize, groupedBuckets, tableRows, isGroupExpanded]);
-  const scrollRef = useRef8(null);
+  const scrollRef = useRef11(null);
   const virtualizer = useVirtualizer({
     count: flatItems.length,
     getScrollElement: () => scrollRef.current,
@@ -2582,7 +3289,7 @@ 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 = useRef8(-1);
+  const notifiedForLengthRef = useRef11(-1);
   useEffect9(() => {
     if (!virtualize?.onEndReached) return;
     if (lastVisibleIndex < 0 || lastVisibleIndex < flatItems.length - 1) return;
@@ -2591,25 +3298,226 @@ function DataGrid({
     notifiedForLengthRef.current = tableRows.length;
     virtualize.onEndReached();
   }, [lastVisibleIndex, flatItems.length, tableRows.length, virtualize]);
+  const cellEditingRowIds = useMemo8(
+    () => hasCellEditing ? tableRows.map((row) => row.id) : EMPTY_ID_ARRAY,
+    [hasCellEditing, tableRows]
+  );
+  const cellEditingColumnIds = useMemo8(
+    () => hasCellEditing ? visibleColumns.map((column) => column.id) : EMPTY_ID_ARRAY,
+    [hasCellEditing, visibleColumns]
+  );
+  const cellEditingRowIndex = useMemo8(() => buildIndexMap(cellEditingRowIds), [cellEditingRowIds]);
+  const cellSelection = useCellSelection({
+    rowIds: cellEditingRowIds,
+    columnIds: cellEditingColumnIds,
+    onNavigateToRow: (rowId) => {
+      if (!shouldVirtualize) return;
+      const index = cellEditingRowIndex.get(rowId);
+      if (index !== void 0) virtualizer.scrollToIndex(index);
+    }
+  });
+  const pendingDragCellRef = useRef11(null);
+  const dragRafRef = useRef11(null);
+  useEffect9(() => {
+    if (!cellSelection.isDragging) return;
+    function handleMouseMove(event) {
+      const cellEl = event.target?.closest("[data-cell-row]");
+      const rowId = cellEl?.dataset.cellRow;
+      const columnId = cellEl?.dataset.cellCol;
+      if (rowId === void 0 || columnId === void 0) return;
+      pendingDragCellRef.current = { rowId, columnId };
+      if (dragRafRef.current !== null) return;
+      dragRafRef.current = requestAnimationFrame(() => {
+        dragRafRef.current = null;
+        if (pendingDragCellRef.current) cellSelection.updateDrag(pendingDragCellRef.current);
+      });
+    }
+    function handleMouseUp() {
+      cellSelection.endDrag();
+    }
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (dragRafRef.current !== null) cancelAnimationFrame(dragRafRef.current);
+      dragRafRef.current = null;
+    };
+  }, [cellSelection.isDragging, cellSelection.updateDrag, cellSelection.endDrag]);
+  const pendingFillCellRef = useRef11(null);
+  const fillRafRef = useRef11(null);
+  useEffect9(() => {
+    if (!cellSelection.isFillDragging) return;
+    function handleMouseMove(event) {
+      const cellEl = event.target?.closest("[data-cell-row]");
+      const rowId = cellEl?.dataset.cellRow;
+      const columnId = cellEl?.dataset.cellCol;
+      if (rowId === void 0 || columnId === void 0) return;
+      pendingFillCellRef.current = { rowId, columnId };
+      if (fillRafRef.current !== null) return;
+      fillRafRef.current = requestAnimationFrame(() => {
+        fillRafRef.current = null;
+        if (pendingFillCellRef.current) cellSelection.updateFillDrag(pendingFillCellRef.current);
+      });
+    }
+    function handleMouseUp() {
+      const result = cellSelection.endFillDrag();
+      if (!result || !cellEditingCtx) return;
+      const changes = computeFillChanges(
+        result.sourceRange,
+        result.finalRange,
+        cellEditingRowIds,
+        cellEditingColumnIds,
+        visibleColumns,
+        findRowById
+      );
+      if (changes.length > 0) applyCellChanges(changes);
+    }
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      if (fillRafRef.current !== null) cancelAnimationFrame(fillRafRef.current);
+      fillRafRef.current = null;
+    };
+  }, [cellSelection.isFillDragging, cellSelection.updateFillDrag, cellSelection.endFillDrag]);
+  const wasEditingCellRef = useRef11(void 0);
+  useEffect9(() => {
+    const wasEditing = wasEditingCellRef.current !== void 0;
+    wasEditingCellRef.current = cellEditingCtx?.editingCell;
+    if (!wasEditing || cellEditingCtx?.editingCell) return;
+    if (document.activeElement === document.body) scrollRef.current?.focus();
+  });
+  function handleFillHandleMouseDown() {
+    cellSelection.startFillDrag();
+  }
+  function handleCellMouseDown(event) {
+    if (!hasCellEditing) return;
+    const cellEl = event.target.closest("[data-cell-row]");
+    const rowId = cellEl?.dataset.cellRow;
+    const columnId = cellEl?.dataset.cellCol;
+    if (rowId === void 0 || columnId === void 0) return;
+    cellSelection.startSelection({ rowId, columnId }, { extend: event.shiftKey });
+    scrollRef.current?.focus();
+  }
+  const CELL_NAV_KEYS = {
+    ArrowUp: "up",
+    ArrowDown: "down",
+    ArrowLeft: "left",
+    ArrowRight: "right"
+  };
+  function resolveSelectedCell() {
+    const focus = cellSelection.selection?.focus;
+    if (!focus) return void 0;
+    const column = columnById.get(focus.columnId);
+    const row = findRowById(focus.rowId);
+    if (!column || row === void 0) return void 0;
+    return { column, row };
+  }
+  function handleCellKeyDown(event) {
+    if (!hasCellEditing || !cellEditingCtx) return;
+    if (cellEditingCtx.editingCell && !cellEditingCtx.consumeJustCommitted()) return;
+    const direction = CELL_NAV_KEYS[event.key];
+    if (direction) {
+      event.preventDefault();
+      cellSelection.moveSelection(direction, { extend: event.shiftKey });
+      return;
+    }
+    if (event.key === "Tab") {
+      event.preventDefault();
+      cellSelection.moveSelection(event.shiftKey ? "left" : "right");
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      cellSelection.moveSelection("down");
+      return;
+    }
+    const isPrintableChar = event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey;
+    if (event.key !== "F2" && !isPrintableChar) return;
+    const target = resolveSelectedCell();
+    if (!target || !isEditable(target.column, target.row)) return;
+    event.preventDefault();
+    cellEditingCtx.onBeginEdit(
+      { rowId: cellEditingCtx.getRowId(target.row), columnId: target.column.id },
+      isPrintableChar ? event.key : void 0
+    );
+  }
+  function handleCellDoubleClick(event) {
+    if (!hasCellEditing || !cellEditingCtx) return;
+    const cellEl = event.target.closest("[data-cell-row]");
+    const rowId = cellEl?.dataset.cellRow;
+    const columnId = cellEl?.dataset.cellCol;
+    if (rowId === void 0 || columnId === void 0) return;
+    const column = columnById.get(columnId);
+    const row = findRowById(rowId);
+    if (!column || row === void 0 || !isEditable(column, row)) return;
+    cellEditingCtx.onBeginEdit({ rowId, columnId });
+  }
+  function handleCopy(event) {
+    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell) return;
+    event.preventDefault();
+    const text = rangeToTsv(cellSelection.selection, rows, cellEditingRowIds, visibleColumns, cellEditingColumnIds, getRowId);
+    event.clipboardData.setData("text/plain", text);
+  }
+  function buildCellChange(row, col, raw) {
+    const rowId = cellEditingRowIds[row];
+    const columnId = cellEditingColumnIds[col];
+    if (rowId === void 0 || columnId === void 0) return void 0;
+    const column = columnById.get(columnId);
+    const rowData = findRowById(rowId);
+    if (!column || rowData === void 0 || !isEditable(column, rowData)) return void 0;
+    const coerced = coerceValueForColumn(column, raw);
+    if (!coerced) return void 0;
+    return { rowId, row: rowData, columnId, previousValue: getColumnValue(column, rowData), value: coerced.value };
+  }
+  function handlePaste(event) {
+    if (!hasCellEditing || !cellSelection.selection || cellEditingCtx?.editingCell) return;
+    const text = event.clipboardData.getData("text/plain");
+    event.preventDefault();
+    const normalized = normalizeRange(cellSelection.selection, cellEditingRowIndex, buildIndexMap(cellEditingColumnIds));
+    if (!normalized) return;
+    const parsed = parseTsv(text);
+    const changes = [];
+    if (parsed.length === 1 && parsed[0]?.length === 1) {
+      const raw = parsed[0][0];
+      for (let r = normalized.rowStart; r <= normalized.rowEnd; r++) {
+        for (let c = normalized.colStart; c <= normalized.colEnd; c++) {
+          const change = buildCellChange(r, c, raw);
+          if (change) changes.push(change);
+        }
+      }
+    } else {
+      for (let ri = 0; ri < parsed.length; ri++) {
+        const line = parsed[ri];
+        for (let ci = 0; ci < line.length; ci++) {
+          const change = buildCellChange(normalized.rowStart + ri, normalized.colStart + ci, line[ci]);
+          if (change) changes.push(change);
+        }
+      }
+    }
+    if (changes.length > 0) applyCellChanges(changes);
+  }
   function renderRow(row, measureRef, dataIndex = row.index) {
     const isExpanded = expandedIds.has(row.id);
     const rowProps = getRowProps?.(row.original);
     const rowTestId = getRowTestId?.(row.original) ?? `row-${row.id}`;
     const isOddRow = zebra && row.index % 2 === 1;
-    return /* @__PURE__ */ jsxs18("tbody", { ref: measureRef, "data-index": dataIndex, children: [
-      /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs20("tbody", { ref: measureRef, "data-index": dataIndex, children: [
+      /* @__PURE__ */ jsxs20(
         "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__ */ jsx28(
+            showDetailColumn && /* @__PURE__ */ jsx32(
               "td",
               {
                 className: isOddRow ? detailCellProps.classNameOdd : detailCellProps.className,
                 style: detailCellProps.style,
-                children: /* @__PURE__ */ jsx28(
+                children: /* @__PURE__ */ jsx32(
                   Button,
                   {
                     type: "button",
@@ -2621,7 +3529,7 @@ function DataGrid({
                       stopRowClick(event);
                       toggleRowExpanded(row.id);
                     },
-                    children: /* @__PURE__ */ jsx28(
+                    children: /* @__PURE__ */ jsx32(
                       ChevronRight,
                       {
                         className: `h-4 w-4 transition-transform${isExpanded ? " rotate-90" : ""}`,
@@ -2632,12 +3540,12 @@ function DataGrid({
                 )
               }
             ),
-            showSelectionColumn && /* @__PURE__ */ jsx28(
+            showSelectionColumn && /* @__PURE__ */ jsx32(
               "td",
               {
                 className: isOddRow ? selectionCellProps.classNameOdd : selectionCellProps.className,
                 style: selectionCellProps.style,
-                children: /* @__PURE__ */ jsx28(
+                children: /* @__PURE__ */ jsx32(
                   "input",
                   {
                     type: "checkbox",
@@ -2651,31 +3559,41 @@ function DataGrid({
             ),
             row.getAllCells().map((cell) => {
               const cellProps = bodyCellPropsByColumn.get(cell.column.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);
+              return /* @__PURE__ */ jsx32(
+                "td",
+                {
+                  style: cellProps?.style,
+                  className: cellProps?.className ?? BODY_TD_BASE_CLASS,
+                  "data-cell-row": hasCellEditing ? row.id : void 0,
+                  "data-cell-col": hasCellEditing ? cell.column.id : void 0,
+                  children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                },
+                cell.id
+              );
             }),
-            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx28(
+            showRowActionsColumn && rowActions && /* @__PURE__ */ jsx32(
               "td",
               {
                 className: isOddRow ? rowActionsCellProps.classNameOdd : rowActionsCellProps.className,
                 style: rowActionsCellProps.style,
-                children: /* @__PURE__ */ jsx28(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
+                children: /* @__PURE__ */ jsx32(ActionsMenu, { items: rowActions, ctx: { row: row.original }, triggerLabel: `Row actions for ${row.id}` })
               }
             )
           ]
         }
       ),
-      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) }) })
+      showDetailColumn && isExpanded && renderDetail && /* @__PURE__ */ jsx32("tr", { "data-testid": `${rowTestId}-detail`, children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, className: "border-b border-border p-2", children: renderDetail(row.original) }) })
     ] }, row.id);
   }
   function renderGroupHeaderTbody(key, rows2, measureRef, dataIndex) {
     const expanded = isGroupExpanded(key);
-    return /* @__PURE__ */ jsx28("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx28("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx28(
+    return /* @__PURE__ */ jsx32("tbody", { ref: measureRef, "data-index": dataIndex, children: /* @__PURE__ */ jsx32("tr", { "data-testid": `group-header-${key}`, children: /* @__PURE__ */ jsx32(
       "td",
       {
         colSpan: totalColumnCount,
         className: cn("sticky z-20 border-b p-2 font-medium", zebra ? "bg-muted" : "bg-background"),
         style: { top: groupHeaderTop },
-        children: /* @__PURE__ */ jsxs18(
+        children: /* @__PURE__ */ jsxs20(
           "button",
           {
             type: "button",
@@ -2683,7 +3601,7 @@ function DataGrid({
             onClick: () => toggleGroupExpanded(key),
             "aria-expanded": expanded,
             children: [
-              /* @__PURE__ */ jsx28(
+              /* @__PURE__ */ jsx32(
                 ChevronRight,
                 {
                   className: `h-4 w-4 shrink-0 transition-transform${expanded ? " rotate-90" : ""}`,
@@ -2700,7 +3618,7 @@ function DataGrid({
   function renderGroupedBucket(bucket) {
     const expanded = isGroupExpanded(bucket.key);
     const originalRows = bucket.items.map((row) => row.original);
-    return /* @__PURE__ */ jsxs18(Fragment2, { children: [
+    return /* @__PURE__ */ jsxs20(Fragment3, { children: [
       renderGroupHeaderTbody(bucket.key, originalRows),
       expanded && bucket.items.map((row) => renderRow(row))
     ] }, `group-${bucket.key}`);
@@ -2722,8 +3640,8 @@ 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__ */ jsxs18("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
-      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs20("div", { className: "flex h-full min-h-0 flex-col gap-2", "data-testid": "datagrid", children: [
+      editing && pendingEdits.size > 0 && /* @__PURE__ */ jsx32(
         EditingBar,
         {
           editing,
@@ -2733,217 +3651,234 @@ function DataGrid({
           onDiscard: handleDiscardEdits
         }
       ),
-      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs18("span", { children: [
+      showSelectionColumn && headerActions && /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs20("span", { children: [
           selectedRows.length,
           " selected"
         ] }),
-        /* @__PURE__ */ jsx28(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
+        /* @__PURE__ */ jsx32(ActionsMenu, { items: headerActions, ctx: { selectedRows }, triggerLabel: "Bulk actions" })
       ] }),
-      /* @__PURE__ */ jsxs18("div", { className: "relative min-h-0 flex-1", children: [
-        loading && /* @__PURE__ */ jsx28(
+      /* @__PURE__ */ jsxs20("div", { className: "relative min-h-0 flex-1", children: [
+        loading && /* @__PURE__ */ jsx32(
           "div",
           {
             "data-testid": "datagrid-loading-overlay",
             className: "absolute inset-0 z-30 flex items-center justify-center bg-background/60",
-            children: /* @__PURE__ */ jsx28(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx32(Loader2, { className: "h-6 w-6 animate-spin text-muted-foreground", "aria-hidden": true })
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsxs20(
           "div",
           {
             ref: scrollRef,
             "data-testid": testId,
-            className: "h-full overflow-auto rounded-md border",
+            className: cn("h-full overflow-auto rounded-md border", hasCellEditing && "relative"),
             style: shouldVirtualize ? { maxHeight: virtualize?.maxBodyHeight ?? 480 } : void 0,
-            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) {
-                    const header = headerById.get(column.id);
-                    if (!header) return null;
-                    const sortEntry = state.sort.find((s) => s.field === column.id);
-                    const sortable = isSortable(column);
-                    const filterable = isFilterable(column) && column.filterDisplay !== "row";
-                    const cellProps = leafHeaderCellPropsByColumn.get(column.id);
-                    const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
-                    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",
+            tabIndex: hasCellEditing ? 0 : void 0,
+            onMouseDown: hasCellEditing ? handleCellMouseDown : void 0,
+            onDoubleClick: hasCellEditing ? handleCellDoubleClick : void 0,
+            onKeyDown: hasCellEditing ? handleCellKeyDown : void 0,
+            onCopy: hasCellEditing ? handleCopy : void 0,
+            onPaste: hasCellEditing ? handlePaste : void 0,
+            children: [
+              /* @__PURE__ */ jsxs20("table", { className: cn("w-full border-collapse text-sm", enableColumnResizing && "table-fixed"), children: [
+                /* @__PURE__ */ jsxs20("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) {
+                      const header = headerById.get(column.id);
+                      if (!header) return null;
+                      const sortEntry = state.sort.find((s) => s.field === column.id);
+                      const sortable = isSortable(column);
+                      const filterable = isFilterable(column) && column.filterDisplay !== "row";
+                      const cellProps = leafHeaderCellPropsByColumn.get(column.id);
+                      const headerContent = column.renderHeader ? column.renderHeader(column) : column.header;
+                      return /* @__PURE__ */ jsxs20("th", { rowSpan, style: cellProps?.style, className: cellProps?.className, children: [
+                        /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+                          sortable ? /* @__PURE__ */ jsxs20(
+                            "button",
+                            {
+                              type: "button",
+                              className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
+                              onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
+                              children: [
+                                headerContent,
+                                sortEntry?.dir === "asc" && /* @__PURE__ */ jsx32(BarsArrowUpIcon, { className: "h-3 w-3", "aria-hidden": true }),
+                                sortEntry?.dir === "desc" && /* @__PURE__ */ jsx32(BarsArrowDownIcon, { className: "h-3 w-3", "aria-hidden": true })
+                              ]
+                            }
+                          ) : (
+                            // Not wrapped in a `<button>` (unlike the sortable branch above): a
+                            // disabled `<button>` swallows pointer events for its entire subtree,
+                            // 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__ */ jsx32("div", { className: "flex items-center gap-1 px-1", children: headerContent })
+                          ),
+                          filterable && /* @__PURE__ */ jsxs20(Popover, { children: [
+                            /* @__PURE__ */ jsx32(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "ghost", size: "icon", "aria-label": `Filter ${column.header}`, children: /* @__PURE__ */ jsx32(
+                              FunnelIcon7,
+                              {
+                                className: cn(
+                                  "h-3 w-3",
+                                  filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
+                                ),
+                                "aria-hidden": true
+                              }
+                            ) }) }),
+                            /* @__PURE__ */ jsx32(PopoverContent, { children: renderFilterWidget(column) })
+                          ] })
+                        ] }),
+                        enableColumnResizing && /* @__PURE__ */ jsx32(
+                          "div",
+                          {
+                            "data-testid": `resize-handle-${column.id}`,
+                            onMouseDown: header.getResizeHandler(),
+                            onTouchStart: header.getResizeHandler(),
+                            className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
+                          }
+                        )
+                      ] }, header.id);
+                    }
+                    return /* @__PURE__ */ jsxs20(Fragment3, { children: [
+                      hasHeaderGroups && /* @__PURE__ */ jsxs20("tr", { "data-testid": "header-group-row", className: "divide-x divide-border", children: [
+                        showDetailColumn && /* @__PURE__ */ jsx32(
+                          "th",
+                          {
+                            rowSpan: 2,
+                            className: detailHeaderCellProps.className,
+                            style: detailHeaderCellProps.style,
+                            "aria-hidden": true
+                          }
+                        ),
+                        showSelectionColumn && /* @__PURE__ */ jsx32(
+                          "th",
                           {
-                            type: "button",
-                            className: "flex items-center gap-1 rounded-sm px-1 hover:bg-accent hover:text-accent-foreground",
-                            onClick: (event) => toggleSort(column.id, enableMultiSort && event.shiftKey, column.sortDescFirst === true),
-                            children: [
-                              headerContent,
-                              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 })
-                            ]
+                            rowSpan: 2,
+                            className: selectionHeaderCellProps.className,
+                            style: selectionHeaderCellProps.style,
+                            children: /* @__PURE__ */ jsx32(
+                              "input",
+                              {
+                                type: "checkbox",
+                                "aria-label": "Select all rows on this page",
+                                checked: allOnPageSelected,
+                                onChange: toggleAllOnPageSelected
+                              }
+                            )
                           }
-                        ) : (
-                          // Not wrapped in a `<button>` (unlike the sortable branch above): a
-                          // disabled `<button>` swallows pointer events for its entire subtree,
-                          // 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__ */ jsx28("div", { className: "flex items-center gap-1 px-1", children: headerContent })
                         ),
-                        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,
+                        headerRuns.map(
+                          (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx32(
+                            "th",
                             {
-                              className: cn(
-                                "h-3 w-3",
-                                filtersByColumn.get(column.id) !== void 0 ? "opacity-100 text-primary" : "opacity-40"
-                              ),
-                              "aria-hidden": true
-                            }
-                          ) }) }),
-                          /* @__PURE__ */ jsx28(PopoverContent, { children: renderFilterWidget(column) })
-                        ] })
-                      ] }),
-                      enableColumnResizing && /* @__PURE__ */ jsx28(
-                        "div",
-                        {
-                          "data-testid": `resize-handle-${column.id}`,
-                          onMouseDown: header.getResizeHandler(),
-                          onTouchStart: header.getResizeHandler(),
-                          className: "absolute right-0 top-0 h-full w-1 cursor-col-resize touch-none select-none hover:bg-accent"
-                        }
-                      )
-                    ] }, header.id);
-                  }
-                  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,
-                          className: detailHeaderCellProps.className,
-                          style: detailHeaderCellProps.style,
-                          "aria-hidden": true
-                        }
-                      ),
-                      showSelectionColumn && /* @__PURE__ */ jsx28(
-                        "th",
-                        {
-                          rowSpan: 2,
-                          className: selectionHeaderCellProps.className,
-                          style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx28(
-                            "input",
-                            {
-                              type: "checkbox",
-                              "aria-label": "Select all rows on this page",
-                              checked: allOnPageSelected,
-                              onChange: toggleAllOnPageSelected
-                            }
+                              colSpan: run.columns.length,
+                              className: "border-b border-border p-2 text-center font-medium",
+                              children: run.label
+                            },
+                            `group-${run.label}-${run.columns[0].id}`
                           )
-                        }
-                      ),
-                      headerRuns.map(
-                        (run) => run.kind === "single" ? renderLeafHeaderCell(run.column, 2) : /* @__PURE__ */ jsx28(
+                        ),
+                        showRowActionsColumn && /* @__PURE__ */ jsx32(
                           "th",
                           {
-                            colSpan: run.columns.length,
-                            className: "border-b border-border p-2 text-center font-medium",
-                            children: run.label
-                          },
-                          `group-${run.label}-${run.columns[0].id}`
+                            rowSpan: 2,
+                            className: rowActionsHeaderCellProps.className,
+                            style: rowActionsHeaderCellProps.style,
+                            "aria-label": "Row actions"
+                          }
                         )
-                      ),
-                      showRowActionsColumn && /* @__PURE__ */ jsx28(
-                        "th",
-                        {
-                          rowSpan: 2,
-                          className: rowActionsHeaderCellProps.className,
-                          style: rowActionsHeaderCellProps.style,
-                          "aria-label": "Row actions"
-                        }
-                      )
-                    ] }, `${headerGroup.id}-groups`),
-                    /* @__PURE__ */ jsxs18("tr", { className: "divide-x divide-border", children: [
-                      !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx28(
-                        "th",
-                        {
-                          className: detailHeaderCellProps.className,
-                          style: detailHeaderCellProps.style,
-                          "aria-hidden": true
-                        }
-                      ),
-                      !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx28(
-                        "th",
-                        {
-                          className: selectionHeaderCellProps.className,
-                          style: selectionHeaderCellProps.style,
-                          children: /* @__PURE__ */ jsx28(
-                            "input",
-                            {
-                              type: "checkbox",
-                              "aria-label": "Select all rows on this page",
-                              checked: allOnPageSelected,
-                              onChange: toggleAllOnPageSelected
-                            }
-                          )
-                        }
-                      ),
-                      headerGroup.headers.map((header) => {
-                        const column = columnById.get(header.id);
-                        if (!column || hasHeaderGroups && !column.headerGroup) return null;
-                        return renderLeafHeaderCell(column);
-                      }),
-                      !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx28(
-                        "th",
-                        {
-                          className: rowActionsHeaderCellProps.className,
-                          style: rowActionsHeaderCellProps.style,
-                          "aria-label": "Row actions"
-                        }
-                      )
-                    ] }, headerGroup.id)
-                  ] }, headerGroup.id);
-                }),
-                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,
-                      style: selectionHeaderCellProps.style
-                    }
-                  ),
-                  visibleColumns.map((column) => {
-                    const cellProps = filterHeaderCellPropsByColumn.get(column.id);
-                    return /* @__PURE__ */ jsx28("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                      ] }, `${headerGroup.id}-groups`),
+                      /* @__PURE__ */ jsxs20("tr", { className: "divide-x divide-border", children: [
+                        !hasHeaderGroups && showDetailColumn && /* @__PURE__ */ jsx32(
+                          "th",
+                          {
+                            className: detailHeaderCellProps.className,
+                            style: detailHeaderCellProps.style,
+                            "aria-hidden": true
+                          }
+                        ),
+                        !hasHeaderGroups && showSelectionColumn && /* @__PURE__ */ jsx32(
+                          "th",
+                          {
+                            className: selectionHeaderCellProps.className,
+                            style: selectionHeaderCellProps.style,
+                            children: /* @__PURE__ */ jsx32(
+                              "input",
+                              {
+                                type: "checkbox",
+                                "aria-label": "Select all rows on this page",
+                                checked: allOnPageSelected,
+                                onChange: toggleAllOnPageSelected
+                              }
+                            )
+                          }
+                        ),
+                        headerGroup.headers.map((header) => {
+                          const column = columnById.get(header.id);
+                          if (!column || hasHeaderGroups && !column.headerGroup) return null;
+                          return renderLeafHeaderCell(column);
+                        }),
+                        !hasHeaderGroups && showRowActionsColumn && /* @__PURE__ */ jsx32(
+                          "th",
+                          {
+                            className: rowActionsHeaderCellProps.className,
+                            style: rowActionsHeaderCellProps.style,
+                            "aria-label": "Row actions"
+                          }
+                        )
+                      ] }, headerGroup.id)
+                    ] }, headerGroup.id);
                   }),
-                  showRowActionsColumn && /* @__PURE__ */ jsx28(
-                    "th",
-                    {
-                      className: rowActionsHeaderCellProps.className,
-                      style: rowActionsHeaderCellProps.style
-                    }
-                  )
-                ] })
+                  hasFilterRow && /* @__PURE__ */ jsxs20("tr", { "data-testid": "filter-row", className: "divide-x divide-border", children: [
+                    showDetailColumn && /* @__PURE__ */ jsx32("th", { className: detailHeaderCellProps.className, style: detailHeaderCellProps.style }),
+                    showSelectionColumn && /* @__PURE__ */ jsx32(
+                      "th",
+                      {
+                        className: selectionHeaderCellProps.className,
+                        style: selectionHeaderCellProps.style
+                      }
+                    ),
+                    visibleColumns.map((column) => {
+                      const cellProps = filterHeaderCellPropsByColumn.get(column.id);
+                      return /* @__PURE__ */ jsx32("th", { style: cellProps?.style, className: cellProps?.className, children: isFilterable(column) && column.filterDisplay === "row" ? renderFilterWidget(column) : null }, column.id);
+                    }),
+                    showRowActionsColumn && /* @__PURE__ */ jsx32(
+                      "th",
+                      {
+                        className: rowActionsHeaderCellProps.className,
+                        style: rowActionsHeaderCellProps.style
+                      }
+                    )
+                  ] })
+                ] }),
+                rows.length === 0 ? /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, className: "p-4 text-center text-muted-foreground", children: loading ? "Loading..." : "No results." }) }) }) : shouldVirtualize ? /* @__PURE__ */ jsxs20(Fragment4, { children: [
+                  paddingTop > 0 && /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingTop } }) }) }),
+                  virtualItems.map(
+                    (virtualItem) => renderFlatItem(
+                      flatItems[virtualItem.index],
+                      virtualItem.index,
+                      (el) => virtualizer.measureElement(el)
+                    )
+                  ),
+                  paddingBottom > 0 && /* @__PURE__ */ jsx32("tbody", { children: /* @__PURE__ */ jsx32("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx32("td", { colSpan: totalColumnCount, style: { padding: 0, border: "none", height: paddingBottom } }) }) })
+                ] }) : groupedBuckets ? groupedBuckets.map((bucket) => renderGroupedBucket(bucket)) : tableRows.map((row) => renderRow(row))
               ] }),
-              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) => renderFlatItem(
-                    flatItems[virtualItem.index],
-                    virtualItem.index,
-                    (el) => virtualizer.measureElement(el)
-                  )
-                ),
-                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))
-            ] })
+              hasCellEditing && /* @__PURE__ */ jsx32(
+                SelectionOverlay,
+                {
+                  containerRef: scrollRef,
+                  range: cellSelection.effectiveRange,
+                  fillPreviewRange: cellSelection.fillPreviewRange,
+                  onFillHandleMouseDown: cellSelection.selection && !cellSelection.isDragging && !cellEditingCtx?.editingCell ? handleFillHandleMouseDown : void 0
+                }
+              )
+            ]
           }
         )
       ] }),
-      showPagination && /* @__PURE__ */ jsxs18("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
-        /* @__PURE__ */ jsxs18("span", { children: [
+      showPagination && /* @__PURE__ */ jsxs20("div", { className: "flex shrink-0 items-center justify-between text-sm", children: [
+        /* @__PURE__ */ jsxs20("span", { children: [
           "Page ",
           state.page + 1,
           " of ",
@@ -2954,8 +3889,8 @@ function DataGrid({
           rowCount === 1 ? "" : "s",
           ")"
         ] }),
-        /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsxs20("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx32(
             Button,
             {
               variant: "outline",
@@ -2965,7 +3900,7 @@ function DataGrid({
               children: "Previous"
             }
           ),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx32(
             Button,
             {
               variant: "outline",
@@ -2984,7 +3919,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 { Fragment as Fragment4, useEffect as useEffect10, useMemo as useMemo9, useRef as useRef9 } from "react";
+import { Fragment as Fragment5, useEffect as useEffect10, useMemo as useMemo10, useRef as useRef12 } from "react";
 
 // src/tree/flattenTree.ts
 function flattenTree(roots, accessors, expanded, childrenOverride) {
@@ -3029,7 +3964,7 @@ function computeSelectionStates(roots, accessors, childrenOverride, selectedIds)
 }
 
 // src/tree/useTreeState.ts
-import { useCallback as useCallback4, useMemo as useMemo8, useState as useState11 } from "react";
+import { useCallback as useCallback5, useMemo as useMemo9, useState as useState14 } from "react";
 function useTreeState({
   data,
   getRowId,
@@ -3041,9 +3976,9 @@ function useTreeState({
   childrenMap: controlledChildrenMap,
   onChildrenMapChange
 }) {
-  const [internalExpanded, setInternalExpanded] = useState11({});
+  const [internalExpanded, setInternalExpanded] = useState14({});
   const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = useCallback4(
+  const setExpanded = useCallback5(
     (updater) => {
       if (controlledExpanded) {
         onExpandedChange?.(updater(controlledExpanded));
@@ -3053,9 +3988,9 @@ function useTreeState({
     },
     [controlledExpanded, onExpandedChange]
   );
-  const [internalChildrenMap, setInternalChildrenMap] = useState11(/* @__PURE__ */ new Map());
+  const [internalChildrenMap, setInternalChildrenMap] = useState14(/* @__PURE__ */ new Map());
   const childrenMap = controlledChildrenMap ?? internalChildrenMap;
-  const setChildrenMap = useCallback4(
+  const setChildrenMap = useCallback5(
     (updater) => {
       if (controlledChildrenMap) {
         onChildrenMapChange?.(updater(controlledChildrenMap));
@@ -3065,13 +4000,13 @@ function useTreeState({
     },
     [controlledChildrenMap, onChildrenMapChange]
   );
-  const [loadingIds, setLoadingIds] = useState11(/* @__PURE__ */ new Set());
-  const [errorIds, setErrorIds] = useState11(/* @__PURE__ */ new Map());
-  const resolveHasChildren = useMemo8(
+  const [loadingIds, setLoadingIds] = useState14(/* @__PURE__ */ new Set());
+  const [errorIds, setErrorIds] = useState14(/* @__PURE__ */ new Map());
+  const resolveHasChildren = useMemo9(
     () => hasChildren ?? ((row) => (getChildren(row)?.length ?? 0) > 0),
     [hasChildren, getChildren]
   );
-  const loadChildrenFor = useCallback4(
+  const loadChildrenFor = useCallback5(
     async (row) => {
       const id = getRowId(row);
       const cached = childrenMap.get(id);
@@ -3104,7 +4039,7 @@ function useTreeState({
     },
     [childrenMap, getChildren, getRowId, onLoadChildren, setChildrenMap]
   );
-  const toggleExpand = useCallback4(
+  const toggleExpand = useCallback5(
     (row) => {
       const id = getRowId(row);
       const willExpand = !expanded[id];
@@ -3116,14 +4051,14 @@ function useTreeState({
     },
     [expanded, getRowId, loadChildrenFor, resolveHasChildren, setExpanded]
   );
-  const retry = useCallback4(
+  const retry = useCallback5(
     (row) => {
       loadChildrenFor(row).catch(() => {
       });
     },
     [loadChildrenFor]
   );
-  const expandToLevel = useCallback4(
+  const expandToLevel = useCallback5(
     async (level) => {
       const nextExpanded = { ...expanded };
       async function visit(row, depth) {
@@ -3146,7 +4081,7 @@ function useTreeState({
 }
 
 // src/tree/TreeDataGrid.tsx
-import { Fragment as Fragment5, jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
 var EMPTY_SELECTED_IDS = /* @__PURE__ */ new Set();
 var UNCHECKED_STATE = { checked: false, indeterminate: false };
 function renderCell(column, row, editingCtx) {
@@ -3162,8 +4097,8 @@ function TreeCell({
   onRetry,
   editingCtx
 }) {
-  return /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
-    flatRow.hasChildren ? /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", style: { paddingLeft: flatRow.depth * indentSize }, children: [
+    flatRow.hasChildren ? /* @__PURE__ */ jsx33(
       "button",
       {
         type: "button",
@@ -3175,14 +4110,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__ */ 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" })
+        children: isLoading ? /* @__PURE__ */ jsx33(Loader22, { className: "h-3.5 w-3.5 animate-spin", "aria-hidden": "true" }) : flatRow.isExpanded ? /* @__PURE__ */ jsx33(ChevronDown2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx33(ChevronRight2, { className: "h-3.5 w-3.5", "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" }),
+    ) : /* @__PURE__ */ jsx33("span", { className: "h-4 w-4 shrink-0", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx33("span", { className: "min-w-0 flex-1 truncate", children: renderCell(column, flatRow.row, editingCtx) }),
+    flatRow.isExpanded && error ? /* @__PURE__ */ jsxs21("span", { className: "ml-1 flex shrink-0 items-center gap-1 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx33(AlertCircle, { className: "h-3 w-3", "aria-hidden": "true" }),
       "Failed to load.",
-      /* @__PURE__ */ jsx29("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
+      /* @__PURE__ */ jsx33("button", { type: "button", className: "underline underline-offset-2", onClick: onRetry, children: "Retry" })
     ] }) : null
   ] });
 }
@@ -3219,7 +4154,7 @@ function TreeDataGrid({
   zebra = true,
   editing
 }) {
-  const accessors = useMemo9(
+  const accessors = useMemo10(
     () => ({ getRowId, getChildren, hasChildren }),
     [getRowId, getChildren, hasChildren]
   );
@@ -3235,7 +4170,7 @@ function TreeDataGrid({
     childrenMap: controlledChildrenMap,
     onChildrenMapChange
   });
-  const didAutoExpand = useRef9(false);
+  const didAutoExpand = useRef12(false);
   useEffect10(() => {
     if (didAutoExpand.current) return;
     didAutoExpand.current = true;
@@ -3247,11 +4182,11 @@ function TreeDataGrid({
     controlledExpandedGroups,
     onExpandedGroupsChange
   );
-  const flatRows = useMemo9(
+  const flatRows = useMemo10(
     () => groupBy ? [] : flattenTree(data, accessors, expanded, childrenMap),
     [groupBy, data, accessors, expanded, childrenMap]
   );
-  const groupedBuckets = useMemo9(
+  const groupedBuckets = useMemo10(
     () => groupBy ? groupRows(data, groupBy).map((bucket) => ({
       key: bucket.key,
       roots: bucket.items,
@@ -3259,7 +4194,7 @@ function TreeDataGrid({
     })) : void 0,
     [groupBy, data, accessors, expanded, childrenMap]
   );
-  const groupedRender = useMemo9(() => {
+  const groupedRender = useMemo10(() => {
     if (!groupedBuckets) return void 0;
     const startIndexByBucket = /* @__PURE__ */ new Map();
     const rows = [];
@@ -3276,7 +4211,7 @@ function TreeDataGrid({
   const showSelectionColumn = controlledSelectedIds !== void 0;
   const totalColumnCount = visibleColumns.length + (showRowActionsColumn ? 1 : 0) + (showSelectionColumn ? 1 : 0);
   const { theadRef, groupHeaderTop } = useStickyGroupHeaderTop(Boolean(groupBy));
-  const selectionStates = useMemo9(
+  const selectionStates = useMemo10(
     () => showSelectionColumn ? computeSelectionStates(data, accessors, childrenMap, controlledSelectedIds ?? EMPTY_SELECTED_IDS) : void 0,
     [showSelectionColumn, data, accessors, childrenMap, controlledSelectedIds]
   );
@@ -3292,7 +4227,7 @@ function TreeDataGrid({
     else next.add(id);
     onSelectedIdsChange?.(next);
   }
-  const selectableFlatRows = useMemo9(
+  const selectableFlatRows = useMemo10(
     () => allFlatRows.filter((flatRow) => !(isRowSelectionDisabled?.(flatRow.row) ?? false)),
     [allFlatRows, isRowSelectionDisabled]
   );
@@ -3306,12 +4241,12 @@ function TreeDataGrid({
     }
     onSelectedIdsChange?.(next);
   }
-  const bodyTdClassByColumn = useMemo9(() => {
+  const bodyTdClassByColumn = useMemo10(() => {
     const map = /* @__PURE__ */ new Map();
     for (const column of visibleColumns) map.set(column.id, `p-2 ${alignClassName(column)}`);
     return map;
   }, [visibleColumns]);
-  const scrollRef = useRef9(null);
+  const scrollRef = useRef12(null);
   const shouldVirtualize = !groupBy && flatRows.length > virtualizeThreshold;
   const virtualizer = useVirtualizer2({
     count: flatRows.length,
@@ -3324,7 +4259,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__ */ jsxs19(
+    return /* @__PURE__ */ jsxs21(
       "tr",
       {
         ref: measureRef,
@@ -3337,9 +4272,9 @@ function TreeDataGrid({
           isOddRow && "bg-foreground/5"
         ) : `border-b border-border divide-x divide-border${isOddRow ? " bg-foreground/5" : ""}`,
         children: [
-          showSelectionColumn && /* @__PURE__ */ jsx29("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
+          showSelectionColumn && /* @__PURE__ */ jsx33("td", { className: "p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: (() => {
             const state = resolveSelectionState(flatRow.row, flatRow.id);
-            return /* @__PURE__ */ jsx29(
+            return /* @__PURE__ */ jsx33(
               Checkbox,
               {
                 "aria-label": `Select row ${flatRow.id}`,
@@ -3350,7 +4285,7 @@ function TreeDataGrid({
               }
             );
           })() }),
-          visibleColumns.map((column) => /* @__PURE__ */ jsx29("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx29(
+          visibleColumns.map((column) => /* @__PURE__ */ jsx33("td", { className: bodyTdClassByColumn.get(column.id), children: column.id === treeColId ? /* @__PURE__ */ jsx33(
             TreeCell,
             {
               flatRow,
@@ -3363,7 +4298,7 @@ function TreeDataGrid({
               editingCtx: editingState.ctx
             }
           ) : renderCell(column, flatRow.row, editingState.ctx) }, column.id)),
-          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx29("td", { className: "p-2", children: /* @__PURE__ */ jsx29(
+          showRowActionsColumn && rowActions && /* @__PURE__ */ jsx33("td", { className: "p-2", children: /* @__PURE__ */ jsx33(
             ActionsMenu,
             {
               items: rowActions,
@@ -3379,8 +4314,8 @@ 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__ */ jsxs19("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
-    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col gap-2", "data-testid": "tree-datagrid", children: [
+    editing && editingState.pendingEdits.size > 0 && /* @__PURE__ */ jsx33(
       EditingBar,
       {
         editing,
@@ -3391,15 +4326,15 @@ function TreeDataGrid({
         testIdPrefix: "tree-datagrid"
       }
     ),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx33(
       "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(
+        children: /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse text-sm", children: [
+          /* @__PURE__ */ jsx33("thead", { ref: theadRef, children: /* @__PURE__ */ jsxs21("tr", { className: "divide-x divide-border", children: [
+            showSelectionColumn && /* @__PURE__ */ jsx33("th", { className: "border-b border-border p-1", style: { width: SELECTION_COLUMN_WIDTH }, children: /* @__PURE__ */ jsx33(
               Checkbox,
               {
                 "aria-label": "Select all visible rows",
@@ -3407,7 +4342,7 @@ function TreeDataGrid({
                 onCheckedChange: toggleAllVisibleSelected
               }
             ) }),
-            visibleColumns.map((column) => /* @__PURE__ */ jsx29(
+            visibleColumns.map((column) => /* @__PURE__ */ jsx33(
               "th",
               {
                 style: column.width ? { width: column.width } : void 0,
@@ -3416,12 +4351,12 @@ function TreeDataGrid({
               },
               column.id
             )),
-            showRowActionsColumn && /* @__PURE__ */ jsx29("th", { className: "border-b border-border p-2", "aria-label": "Row actions" })
+            showRowActionsColumn && /* @__PURE__ */ jsx33("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) => {
+          /* @__PURE__ */ jsx33("tbody", { children: data.length === 0 ? /* @__PURE__ */ jsx33("tr", { children: /* @__PURE__ */ jsx33("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(
+            return /* @__PURE__ */ jsxs21(Fragment5, { children: [
+              /* @__PURE__ */ jsx33("tr", { "data-testid": `group-header-${bucket.key}`, children: /* @__PURE__ */ jsx33(
                 "td",
                 {
                   colSpan: totalColumnCount,
@@ -3430,7 +4365,7 @@ function TreeDataGrid({
                     zebra ? "bg-muted" : "bg-background"
                   ),
                   style: { top: groupHeaderTop },
-                  children: /* @__PURE__ */ jsxs19(
+                  children: /* @__PURE__ */ jsxs21(
                     "button",
                     {
                       type: "button",
@@ -3438,7 +4373,7 @@ function TreeDataGrid({
                       onClick: () => toggleGroupExpanded(bucket.key),
                       "aria-expanded": groupExpanded,
                       children: [
-                        /* @__PURE__ */ jsx29(
+                        /* @__PURE__ */ jsx33(
                           ChevronRight2,
                           {
                             className: `h-4 w-4 shrink-0 transition-transform${groupExpanded ? " rotate-90" : ""}`,
@@ -3456,12 +4391,12 @@ function TreeDataGrid({
                 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 } }) }),
+          }) : shouldVirtualize ? /* @__PURE__ */ jsxs21(Fragment6, { children: [
+            paddingTop > 0 && /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33("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(
+            paddingBottom > 0 && /* @__PURE__ */ jsx33("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx33(
               "td",
               {
                 colSpan: totalColumnCount,
@@ -3486,40 +4421,54 @@ export {
   EditingBar,
   EnumEditor,
   EnumFilter,
+  MultilineStringEditor,
   NumberComparisonFilter,
   NumberEditor,
   NumberHistogramFilter,
   NumberRangeFilter,
+  SelectionOverlay,
   StringEditor,
   StringFilter,
   TreeDataGrid,
   UNARY_OPERATORS,
   alignClassName,
+  buildIndexMap,
   canHideColumn,
   canHideGroup,
+  cellsInRange,
+  coerceValueForColumn,
+  computeFillChanges,
   countVisible,
   defaultAlign,
   defaultFormat,
   editErrorId,
   evaluateFilter,
+  extendRangeForFill,
   facetedNumberValues,
   fieldKey,
   flattenTree,
   getColumnValue,
   groupColumns,
+  isCellInRange,
   isColumnVisible,
   isCompositeFilterDescriptor,
   isEditable,
   isFilterDescriptor,
   isFilterable,
   isSortable,
+  normalizeRange,
+  parseTsv,
   processClientData,
+  rangeToTsv,
+  renderCellModeCell,
   renderDefaultEditWidget,
   renderDefaultFilterWidget,
   renderEditableCell,
   resolveMenuItems,
   storageKeyFor,
   toDate,
+  useCellEditingState,
+  useCellSelection,
   useDebouncedCallback,
   useEditingState,
   useGridState,