@xcelsior/ui-spreadsheets 1.1.3 → 1.1.5

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  RowContextMenu: () => RowContextMenu,
   Spreadsheet: () => Spreadsheet,
   SpreadsheetCell: () => MemoizedSpreadsheetCell,
   SpreadsheetFilterDropdown: () => SpreadsheetFilterDropdown,
@@ -40,7 +41,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Spreadsheet.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
 var import_react2 = __toESM(require("react"));
@@ -134,9 +135,6 @@ function HiCog(props) {
 function HiDotsVertical(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" } }] })(props);
 }
-function HiDuplicate(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" } }, { "tag": "path", "attr": { "d": "M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" } }] })(props);
-}
 function HiEye(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M10 12a2 2 0 100-4 2 2 0 000 4z" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z", "clipRule": "evenodd" } }] })(props);
 }
@@ -149,9 +147,6 @@ function HiReply(props) {
 function HiSortAscending(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M3 3a1 1 0 000 2h11a1 1 0 100-2H3zM3 7a1 1 0 000 2h5a1 1 0 000-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3zM13 16a1 1 0 102 0v-5.586l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 101.414 1.414L13 10.414V16z" } }] })(props);
 }
-function HiTrash(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", "clipRule": "evenodd" } }] })(props);
-}
 function HiViewBoards(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M2 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H3a1 1 0 01-1-1V4zM8 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1H9a1 1 0 01-1-1V4zM15 3a1 1 0 00-1 1v12a1 1 0 001 1h2a1 1 0 001-1V4a1 1 0 00-1-1h-2z" } }] })(props);
 }
@@ -1492,15 +1487,21 @@ var HIGHLIGHT_COLORS = {
 };
 function useSpreadsheetHighlighting({
   externalRowHighlights,
-  onRowHighlight
+  onRowHighlight,
+  externalColumnHighlights,
+  onColumnHighlight,
+  externalCellHighlights,
+  onCellHighlight
 } = {}) {
-  const [cellHighlights, setCellHighlights] = (0, import_react7.useState)([]);
+  const [cellHighlightsInternal, setCellHighlightsInternal] = (0, import_react7.useState)([]);
   const [rowHighlightsInternal, setRowHighlightsInternal] = (0, import_react7.useState)([]);
-  const [columnHighlights, setColumnHighlights] = (0, import_react7.useState)({});
+  const [columnHighlightsInternal, setColumnHighlightsInternal] = (0, import_react7.useState)({});
   const [highlightPickerRow, setHighlightPickerRow] = (0, import_react7.useState)(null);
   const [highlightPickerColumn, setHighlightPickerColumn] = (0, import_react7.useState)(null);
   const [highlightPickerCell, setHighlightPickerCell] = (0, import_react7.useState)(null);
+  const cellHighlights = externalCellHighlights || cellHighlightsInternal;
   const rowHighlights = externalRowHighlights || rowHighlightsInternal;
+  const columnHighlights = externalColumnHighlights || columnHighlightsInternal;
   const getCellHighlight = (0, import_react7.useCallback)(
     (rowId, columnId) => {
       return cellHighlights.find((h) => h.rowId === rowId && h.columnId === columnId)?.color;
@@ -1509,24 +1510,30 @@ function useSpreadsheetHighlighting({
   );
   const handleCellHighlightToggle = (0, import_react7.useCallback)(
     (rowId, columnId, color = "#fef08a") => {
-      setCellHighlights((prev) => {
-        const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
-        if (existing) {
-          if (color === null) {
-            return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+      if (onCellHighlight) {
+        onCellHighlight(rowId, columnId, color);
+      } else {
+        setCellHighlightsInternal((prev) => {
+          const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
+          if (existing) {
+            if (color === null) {
+              return prev.filter(
+                (h) => !(h.rowId === rowId && h.columnId === columnId)
+              );
+            }
+            return prev.map(
+              (h) => h.rowId === rowId && h.columnId === columnId ? { ...h, color } : h
+            );
           }
-          return prev.map(
-            (h) => h.rowId === rowId && h.columnId === columnId ? { ...h, color } : h
-          );
-        }
-        if (color) {
-          return [...prev, { rowId, columnId, color }];
-        }
-        return prev;
-      });
+          if (color) {
+            return [...prev, { rowId, columnId, color }];
+          }
+          return prev;
+        });
+      }
       setHighlightPickerCell(null);
     },
-    []
+    [onCellHighlight]
   );
   const getRowHighlight = (0, import_react7.useCallback)(
     (rowId) => {
@@ -1565,22 +1572,29 @@ function useSpreadsheetHighlighting({
     },
     [columnHighlights]
   );
-  const handleColumnHighlightToggle = (0, import_react7.useCallback)((columnId, color) => {
-    setColumnHighlights((prev) => {
-      const newHighlights = { ...prev };
-      if (color === null) {
-        delete newHighlights[columnId];
+  const handleColumnHighlightToggle = (0, import_react7.useCallback)(
+    (columnId, color) => {
+      if (onColumnHighlight) {
+        onColumnHighlight(columnId, color);
       } else {
-        newHighlights[columnId] = color;
+        setColumnHighlightsInternal((prev) => {
+          const newHighlights = { ...prev };
+          if (color === null) {
+            delete newHighlights[columnId];
+          } else {
+            newHighlights[columnId] = color;
+          }
+          return newHighlights;
+        });
       }
-      return newHighlights;
-    });
-    setHighlightPickerColumn(null);
-  }, []);
+      setHighlightPickerColumn(null);
+    },
+    [onColumnHighlight]
+  );
   const clearAllHighlights = (0, import_react7.useCallback)(() => {
-    setCellHighlights([]);
+    setCellHighlightsInternal([]);
     setRowHighlightsInternal([]);
-    setColumnHighlights({});
+    setColumnHighlightsInternal({});
   }, []);
   return {
     // Cell highlights
@@ -2202,12 +2216,72 @@ function ShortcutRow({ label, keys }) {
 }
 KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 
-// src/components/Spreadsheet.tsx
+// src/components/RowContextMenu.tsx
+var import_react11 = require("react");
 var import_design_system = require("@xcelsior/design-system");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function RowContextMenu({
+  row,
+  rowId,
+  items,
+  compactMode = false,
+  className
+}) {
+  const visibleItems = (0, import_react11.useMemo)(() => {
+    return items.filter((item) => !item.visible || item.visible(row));
+  }, [items, row]);
+  if (visibleItems.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_design_system.ContextMenu,
+    {
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
+            className
+          ),
+          title: "More actions",
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            HiDotsVertical,
+            {
+              className: cn("text-gray-500", compactMode ? "h-2.5 w-2.5" : "h-3 w-3")
+            }
+          )
+        }
+      ),
+      placement: "bottom",
+      children: visibleItems.map((item) => {
+        const isDisabled = item.disabled?.(row);
+        const variantClass = item.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "";
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          import_design_system.ContextMenuItem,
+          {
+            onClick: () => item.onClick(row, rowId),
+            disabled: isDisabled,
+            className: `${variantClass} ${item.className || ""}`,
+            children: [
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-2", children: item.icon }),
+              item.label
+            ]
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+RowContextMenu.displayName = "RowContextMenu";
+
+// src/components/Spreadsheet.tsx
+var import_design_system2 = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
-var import_react11 = require("react");
-var import_utils9 = require("@xcelsior/utils");
+var import_react12 = require("react");
+var import_utils10 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2218,16 +2292,16 @@ function useSpreadsheetFiltering({
   controlledSortConfig,
   defaultSortConfig
 }) {
-  const [internalFilters, setInternalFilters] = (0, import_react11.useState)(
+  const [internalFilters, setInternalFilters] = (0, import_react12.useState)(
     {}
   );
-  const [internalSortConfig, setInternalSortConfig] = (0, import_react11.useState)(
+  const [internalSortConfig, setInternalSortConfig] = (0, import_react12.useState)(
     defaultSortConfig ?? null
   );
-  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react11.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react12.useState)(null);
   const filters = controlledFilters ?? internalFilters;
   const sortConfig = controlledSortConfig !== void 0 ? controlledSortConfig : internalSortConfig;
-  const applyTextCondition = (0, import_react11.useCallback)(
+  const applyTextCondition = (0, import_react12.useCallback)(
     (value, condition) => {
       const strValue = String(value ?? "").toLowerCase();
       const filterValue = (condition.value ?? "").toLowerCase();
@@ -2254,7 +2328,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyNumberCondition = (0, import_react11.useCallback)(
+  const applyNumberCondition = (0, import_react12.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2283,7 +2357,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyDateCondition = (0, import_react11.useCallback)(
+  const applyDateCondition = (0, import_react12.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2355,7 +2429,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const buildFilterPredicate = (0, import_react11.useCallback)(
+  const buildFilterPredicate = (0, import_react12.useCallback)(
     (column, filter) => {
       return (row) => {
         const value = column.getValue ? column.getValue(row) : row[column.id];
@@ -2389,7 +2463,7 @@ function useSpreadsheetFiltering({
     },
     [applyTextCondition, applyNumberCondition, applyDateCondition]
   );
-  const buildSortComparator = (0, import_react11.useCallback)(
+  const buildSortComparator = (0, import_react12.useCallback)(
     (column, direction) => {
       return (a, b) => {
         const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
@@ -2404,14 +2478,14 @@ function useSpreadsheetFiltering({
     },
     [sortConfig?.columnId]
   );
-  const filteredData = (0, import_react11.useMemo)(() => {
-    if (!data || !Array.isArray(data)) return import_utils9.LazyArray.empty();
+  const filteredData = (0, import_react12.useMemo)(() => {
+    if (!data || !Array.isArray(data)) return import_utils10.LazyArray.empty();
     if (serverSide) {
-      return import_utils9.LazyArray.from(data);
+      return import_utils10.LazyArray.from(data);
     }
-    if (!columns || !Array.isArray(columns)) return import_utils9.LazyArray.from(data);
-    let lazyResult = import_utils9.LazyArray.from(data);
-    const filterChain = new import_utils9.FilterChain();
+    if (!columns || !Array.isArray(columns)) return import_utils10.LazyArray.from(data);
+    let lazyResult = import_utils10.LazyArray.from(data);
+    const filterChain = new import_utils10.FilterChain();
     for (const [columnId, filter] of Object.entries(filters)) {
       if (!filter) continue;
       const column = columns.find((c) => c.id === columnId);
@@ -2427,7 +2501,7 @@ function useSpreadsheetFiltering({
     }
     return lazyResult;
   }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
-  const handleFilterChange = (0, import_react11.useCallback)(
+  const handleFilterChange = (0, import_react12.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };
       if (filter) {
@@ -2442,7 +2516,7 @@ function useSpreadsheetFiltering({
     },
     [filters, onFilterChange, controlledFilters]
   );
-  const handleSort = (0, import_react11.useCallback)(
+  const handleSort = (0, import_react12.useCallback)(
     (columnId) => {
       let newSortConfig;
       if (sortConfig?.columnId === columnId) {
@@ -2461,13 +2535,13 @@ function useSpreadsheetFiltering({
     },
     [sortConfig, onSortChange, controlledSortConfig]
   );
-  const clearSort = (0, import_react11.useCallback)(() => {
+  const clearSort = (0, import_react12.useCallback)(() => {
     if (controlledSortConfig === void 0) {
       setInternalSortConfig(null);
     }
     onSortChange?.(null);
   }, [onSortChange, controlledSortConfig]);
-  const setSortConfig = (0, import_react11.useCallback)(
+  const setSortConfig = (0, import_react12.useCallback)(
     (config) => {
       if (controlledSortConfig === void 0) {
         setInternalSortConfig(config);
@@ -2476,7 +2550,7 @@ function useSpreadsheetFiltering({
     },
     [onSortChange, controlledSortConfig]
   );
-  const clearAllFilters = (0, import_react11.useCallback)(() => {
+  const clearAllFilters = (0, import_react12.useCallback)(() => {
     if (controlledFilters === void 0) {
       setInternalFilters({});
     }
@@ -2499,22 +2573,23 @@ function useSpreadsheetFiltering({
 }
 
 // src/hooks/useSpreadsheetComments.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useSpreadsheetComments({
   externalCellComments,
-  onAddCellComment
+  onAddCellComment,
+  onToggleCommentResolved
 } = {}) {
-  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react12.useState)([]);
-  const [commentModalCell, setCommentModalCell] = (0, import_react12.useState)(null);
-  const [viewCommentsCell, setViewCommentsCell] = (0, import_react12.useState)(null);
+  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react13.useState)([]);
+  const [commentModalCell, setCommentModalCell] = (0, import_react13.useState)(null);
+  const [viewCommentsCell, setViewCommentsCell] = (0, import_react13.useState)(null);
   const cellComments = externalCellComments || cellCommentsInternal;
-  const getCellComments = (0, import_react12.useCallback)(
+  const getCellComments = (0, import_react13.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const getCellUnresolvedCommentCount = (0, import_react12.useCallback)(
+  const getCellUnresolvedCommentCount = (0, import_react13.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter(
         (c) => c.rowId === rowId && c.columnId === columnId && !c.resolved
@@ -2522,13 +2597,13 @@ function useSpreadsheetComments({
     },
     [cellComments]
   );
-  const cellHasComments = (0, import_react12.useCallback)(
+  const cellHasComments = (0, import_react13.useCallback)(
     (rowId, columnId) => {
       return cellComments.some((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const handleAddCellComment = (0, import_react12.useCallback)(
+  const handleAddCellComment = (0, import_react13.useCallback)(
     (rowId, columnId, text) => {
       if (!text.trim()) return;
       if (onAddCellComment) {
@@ -2550,11 +2625,18 @@ function useSpreadsheetComments({
     },
     [onAddCellComment]
   );
-  const handleToggleCommentResolved = (0, import_react12.useCallback)((commentId) => {
-    setCellCommentsInternal(
-      (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
-    );
-  }, []);
+  const handleToggleCommentResolved = (0, import_react13.useCallback)(
+    (commentId) => {
+      if (onToggleCommentResolved) {
+        onToggleCommentResolved(commentId);
+      } else {
+        setCellCommentsInternal(
+          (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
+        );
+      }
+    },
+    [onToggleCommentResolved]
+  );
   return {
     // Comments data
     cellComments,
@@ -2575,20 +2657,20 @@ function useSpreadsheetComments({
 }
 
 // src/hooks/useSpreadsheetUndoRedo.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
   autoSave = true,
   onSave
 }) {
-  const [undoStack, setUndoStack] = (0, import_react13.useState)([]);
-  const [redoStack, setRedoStack] = (0, import_react13.useState)([]);
-  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react13.useState)(false);
-  const [saveStatus, setSaveStatus] = (0, import_react13.useState)("saved");
-  const onSaveRef = (0, import_react13.useRef)(onSave);
+  const [undoStack, setUndoStack] = (0, import_react14.useState)([]);
+  const [redoStack, setRedoStack] = (0, import_react14.useState)([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react14.useState)(false);
+  const [saveStatus, setSaveStatus] = (0, import_react14.useState)("saved");
+  const onSaveRef = (0, import_react14.useRef)(onSave);
   onSaveRef.current = onSave;
-  const pushToUndoStack = (0, import_react13.useCallback)(
+  const pushToUndoStack = (0, import_react14.useCallback)(
     (snapshot) => {
       if (!enabled) return;
       setUndoStack((prev) => {
@@ -2602,7 +2684,7 @@ function useSpreadsheetUndoRedo({
     },
     [enabled, maxStackSize]
   );
-  const handleUndo = (0, import_react13.useCallback)(() => {
+  const handleUndo = (0, import_react14.useCallback)(() => {
     if (!enabled || undoStack.length === 0) return null;
     const previousSnapshot = undoStack[undoStack.length - 1];
     setUndoStack((prev) => prev.slice(0, -1));
@@ -2615,7 +2697,7 @@ function useSpreadsheetUndoRedo({
     });
     return previousSnapshot;
   }, [enabled, undoStack, maxStackSize]);
-  const handleRedo = (0, import_react13.useCallback)(() => {
+  const handleRedo = (0, import_react14.useCallback)(() => {
     if (!enabled || redoStack.length === 0) return null;
     const nextSnapshot = redoStack[redoStack.length - 1];
     setRedoStack((prev) => prev.slice(0, -1));
@@ -2628,7 +2710,7 @@ function useSpreadsheetUndoRedo({
     });
     return nextSnapshot;
   }, [enabled, redoStack, maxStackSize]);
-  const handleSave = (0, import_react13.useCallback)(async () => {
+  const handleSave = (0, import_react14.useCallback)(async () => {
     if (!hasUnsavedChanges && !autoSave) return;
     setSaveStatus("saving");
     try {
@@ -2641,7 +2723,7 @@ function useSpreadsheetUndoRedo({
       setSaveStatus("error");
     }
   }, [hasUnsavedChanges, autoSave]);
-  const markAsChanged = (0, import_react13.useCallback)(() => {
+  const markAsChanged = (0, import_react14.useCallback)(() => {
     setHasUnsavedChanges(true);
     if (autoSave) {
       setSaveStatus("saving");
@@ -2662,11 +2744,11 @@ function useSpreadsheetUndoRedo({
       setSaveStatus("unsaved");
     }
   }, [autoSave]);
-  const markAsSaved = (0, import_react13.useCallback)(() => {
+  const markAsSaved = (0, import_react14.useCallback)(() => {
     setHasUnsavedChanges(false);
     setSaveStatus("saved");
   }, []);
-  const clearStacks = (0, import_react13.useCallback)(() => {
+  const clearStacks = (0, import_react14.useCallback)(() => {
     setUndoStack([]);
     setRedoStack([]);
   }, []);
@@ -2694,7 +2776,7 @@ function useSpreadsheetUndoRedo({
 }
 
 // src/hooks/useSpreadsheetKeyboardShortcuts.ts
-var import_react14 = require("react");
+var import_react15 = require("react");
 function useSpreadsheetKeyboardShortcuts({
   onUndo,
   onRedo,
@@ -2709,10 +2791,10 @@ function useSpreadsheetKeyboardShortcuts({
   customShortcuts = [],
   enabled = true
 } = {}) {
-  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react14.useState)(false);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react15.useState)(false);
   const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
   const modifierKey = isMac ? "\u2318" : "Ctrl";
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -2853,7 +2935,7 @@ function useSpreadsheetKeyboardShortcuts({
 }
 
 // src/hooks/useSpreadsheetSelection.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 function useSpreadsheetSelection({
   data,
   columns,
@@ -2861,34 +2943,34 @@ function useSpreadsheetSelection({
   onCellRangeSelectionChange,
   enableCellEditing = true
 }) {
-  const [focusedCell, setFocusedCell] = (0, import_react15.useState)(null);
-  const [editingCell, setEditingCell] = (0, import_react15.useState)(null);
-  const [selectedCellRange, setSelectedCellRangeState] = (0, import_react15.useState)(null);
-  const [isDragging, setIsDragging] = (0, import_react15.useState)(false);
-  const [clipboardData, setClipboardData] = (0, import_react15.useState)(null);
-  const anchorCell = (0, import_react15.useRef)(null);
-  const rowIndexMap = (0, import_react15.useMemo)(() => {
+  const [focusedCell, setFocusedCell] = (0, import_react16.useState)(null);
+  const [editingCell, setEditingCell] = (0, import_react16.useState)(null);
+  const [selectedCellRange, setSelectedCellRangeState] = (0, import_react16.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react16.useState)(false);
+  const [clipboardData, setClipboardData] = (0, import_react16.useState)(null);
+  const anchorCell = (0, import_react16.useRef)(null);
+  const rowIndexMap = (0, import_react16.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     data.forEach((row, index) => {
       map.set(getRowId(row), index);
     });
     return map;
   }, [data, getRowId]);
-  const columnIndexMap = (0, import_react15.useMemo)(() => {
+  const columnIndexMap = (0, import_react16.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     columns.forEach((col, index) => {
       map.set(col.id, index);
     });
     return map;
   }, [columns]);
-  const setSelectedCellRange = (0, import_react15.useCallback)(
+  const setSelectedCellRange = (0, import_react16.useCallback)(
     (range) => {
       setSelectedCellRangeState(range);
       onCellRangeSelectionChange?.(range);
     },
     [onCellRangeSelectionChange]
   );
-  const getNormalizedRange = (0, import_react15.useCallback)(
+  const getNormalizedRange = (0, import_react16.useCallback)(
     (range) => {
       if (!range) return null;
       const startRowIdx = rowIndexMap.get(range.start.rowId);
@@ -2907,7 +2989,7 @@ function useSpreadsheetSelection({
     },
     [rowIndexMap, columnIndexMap]
   );
-  const isCellInSelection = (0, import_react15.useCallback)(
+  const isCellInSelection = (0, import_react16.useCallback)(
     (rowId, columnId) => {
       const normalizedRange = getNormalizedRange(selectedCellRange);
       if (!normalizedRange) return false;
@@ -2918,7 +3000,7 @@ function useSpreadsheetSelection({
     },
     [selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
   );
-  const getCellSelectionEdge = (0, import_react15.useCallback)(
+  const getCellSelectionEdge = (0, import_react16.useCallback)(
     (rowId, columnId) => {
       if (!isCellInSelection(rowId, columnId)) return void 0;
       const normalizedRange = getNormalizedRange(selectedCellRange);
@@ -2935,7 +3017,7 @@ function useSpreadsheetSelection({
     },
     [isCellInSelection, selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
   );
-  const getSelectedCells = (0, import_react15.useCallback)(() => {
+  const getSelectedCells = (0, import_react16.useCallback)(() => {
     const normalizedRange = getNormalizedRange(selectedCellRange);
     if (!normalizedRange) {
       return focusedCell ? [focusedCell] : [];
@@ -2953,7 +3035,7 @@ function useSpreadsheetSelection({
     }
     return cells;
   }, [selectedCellRange, focusedCell, data, columns, getRowId, getNormalizedRange]);
-  const getSelectedCellValues = (0, import_react15.useCallback)(() => {
+  const getSelectedCellValues = (0, import_react16.useCallback)(() => {
     const cells = getSelectedCells();
     return cells.map((cell) => {
       const row = data.find((r) => getRowId(r) === cell.rowId);
@@ -2962,7 +3044,7 @@ function useSpreadsheetSelection({
       return { position: cell, value };
     });
   }, [getSelectedCells, data, columns, getRowId]);
-  const handleCellClick = (0, import_react15.useCallback)(
+  const handleCellClick = (0, import_react16.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
       const newCell = { rowId, columnId };
@@ -2984,7 +3066,7 @@ function useSpreadsheetSelection({
     },
     [columns, enableCellEditing, setSelectedCellRange]
   );
-  const handleCellMouseDown = (0, import_react15.useCallback)(
+  const handleCellMouseDown = (0, import_react16.useCallback)(
     (rowId, columnId, event) => {
       if (event.button !== 0) return;
       const newCell = { rowId, columnId };
@@ -3010,18 +3092,18 @@ function useSpreadsheetSelection({
     },
     [columns, enableCellEditing, setSelectedCellRange]
   );
-  const handleCellMouseEnter = (0, import_react15.useCallback)((_rowId, _columnId) => {
+  const handleCellMouseEnter = (0, import_react16.useCallback)((_rowId, _columnId) => {
   }, []);
-  const handleMouseUp = (0, import_react15.useCallback)(() => {
+  const handleMouseUp = (0, import_react16.useCallback)(() => {
     setIsDragging(false);
   }, []);
-  const clearSelection = (0, import_react15.useCallback)(() => {
+  const clearSelection = (0, import_react16.useCallback)(() => {
     setFocusedCell(null);
     setEditingCell(null);
     setSelectedCellRange(null);
     anchorCell.current = null;
   }, [setSelectedCellRange]);
-  const navigateCell = (0, import_react15.useCallback)(
+  const navigateCell = (0, import_react16.useCallback)(
     (direction, extendSelection = false) => {
       const currentCell = focusedCell;
       if (!currentCell) return;
@@ -3068,7 +3150,7 @@ function useSpreadsheetSelection({
     },
     [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
   );
-  const handleTabNavigation = (0, import_react15.useCallback)(
+  const handleTabNavigation = (0, import_react16.useCallback)(
     (shiftKey) => {
       const currentCell = focusedCell;
       if (!currentCell) return;
@@ -3109,17 +3191,17 @@ function useSpreadsheetSelection({
     },
     [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
   );
-  const enterEditMode = (0, import_react15.useCallback)(() => {
+  const enterEditMode = (0, import_react16.useCallback)(() => {
     if (!focusedCell || !enableCellEditing) return;
     const column = columns.find((c) => c.id === focusedCell.columnId);
     if (column?.editable) {
       setEditingCell(focusedCell);
     }
   }, [focusedCell, columns, enableCellEditing]);
-  const exitEditMode = (0, import_react15.useCallback)(() => {
+  const exitEditMode = (0, import_react16.useCallback)(() => {
     setEditingCell(null);
   }, []);
-  const copySelectedCells = (0, import_react15.useCallback)(() => {
+  const copySelectedCells = (0, import_react16.useCallback)(() => {
     const normalizedRange = getNormalizedRange(selectedCellRange);
     if (!normalizedRange && !focusedCell) return;
     const startRowIdx = normalizedRange?.startRowIdx ?? rowIndexMap.get(focusedCell.rowId) ?? 0;
@@ -3168,14 +3250,14 @@ function useSpreadsheetSelection({
     rowIndexMap,
     columnIndexMap
   ]);
-  const parseClipboardText = (0, import_react15.useCallback)((text) => {
+  const parseClipboardText = (0, import_react16.useCallback)((text) => {
     const lines = text.split(/\r?\n/);
     if (lines.length > 0 && lines[lines.length - 1] === "") {
       lines.pop();
     }
     return lines.map((line) => line.split("	"));
   }, []);
-  const createEditsFromValues = (0, import_react15.useCallback)(
+  const createEditsFromValues = (0, import_react16.useCallback)(
     (values) => {
       if (!focusedCell) return [];
       const edits = [];
@@ -3235,11 +3317,11 @@ function useSpreadsheetSelection({
       getNormalizedRange
     ]
   );
-  const pasteClipboard = (0, import_react15.useCallback)(() => {
+  const pasteClipboard = (0, import_react16.useCallback)(() => {
     if (!clipboardData?.values) return [];
     return createEditsFromValues(clipboardData.values);
   }, [clipboardData, createEditsFromValues]);
-  const pasteFromSystemClipboard = (0, import_react15.useCallback)(async () => {
+  const pasteFromSystemClipboard = (0, import_react16.useCallback)(async () => {
     if (!focusedCell) return [];
     try {
       const text = await navigator.clipboard.readText();
@@ -3281,7 +3363,7 @@ function useSpreadsheetSelection({
 }
 
 // src/components/Spreadsheet.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Spreadsheet({
   data,
   columns,
@@ -3293,10 +3375,11 @@ function Spreadsheet({
   onFilterChange,
   onRowClick,
   onRowDoubleClick,
-  onRowClone,
-  onRowDelete,
   onAddCellComment,
+  onToggleCommentResolved,
   onRowHighlight,
+  onColumnHighlight,
+  onCellHighlight,
   showToolbar = true,
   showPagination = true,
   enableRowSelection = true,
@@ -3312,8 +3395,11 @@ function Spreadsheet({
   className,
   emptyMessage = "No data available",
   rowHighlights: externalRowHighlights,
+  columnHighlights: externalColumnHighlights,
+  cellHighlights: externalCellHighlights,
   cellComments: externalCellComments,
   rowActions,
+  rowContextMenuItems,
   toolbarMenuItems,
   // Server-side mode props
   serverSide = false,
@@ -3324,7 +3410,7 @@ function Spreadsheet({
   onPageChange,
   filters: controlledFilters
 }) {
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react16.useState)({
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react17.useState)({
     defaultPinnedColumns: initialSettings?.defaultPinnedColumns ?? [],
     defaultSort: initialSettings?.defaultSort ?? null,
     defaultPageSize: initialSettings?.defaultPageSize ?? 25,
@@ -3368,7 +3454,11 @@ function Spreadsheet({
     setHighlightPickerCell
   } = useSpreadsheetHighlighting({
     externalRowHighlights,
-    onRowHighlight
+    onRowHighlight,
+    externalColumnHighlights,
+    onColumnHighlight,
+    externalCellHighlights,
+    onCellHighlight
   });
   const {
     pinnedColumns,
@@ -3398,9 +3488,10 @@ function Spreadsheet({
     handleToggleCommentResolved
   } = useSpreadsheetComments({
     externalCellComments,
-    onAddCellComment
+    onAddCellComment,
+    onToggleCommentResolved
   });
-  const [showSettingsModal, setShowSettingsModal] = (0, import_react16.useState)(false);
+  const [showSettingsModal, setShowSettingsModal] = (0, import_react17.useState)(false);
   const {
     canUndo,
     canRedo,
@@ -3418,15 +3509,15 @@ function Spreadsheet({
     autoSave: spreadsheetSettings.autoSave,
     onSave
   });
-  const [selectedRows, setSelectedRows] = (0, import_react16.useState)(/* @__PURE__ */ new Set());
-  const [lastSelectedRow, setLastSelectedRow] = (0, import_react16.useState)(null);
-  const [hoveredRow, setHoveredRow] = (0, import_react16.useState)(null);
-  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react16.useState)(1);
-  const [internalPageSize, setInternalPageSize] = (0, import_react16.useState)(spreadsheetSettings.defaultPageSize);
-  const [zoom, setZoom] = (0, import_react16.useState)(spreadsheetSettings.defaultZoom);
+  const [selectedRows, setSelectedRows] = (0, import_react17.useState)(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = (0, import_react17.useState)(null);
+  const [hoveredRow, setHoveredRow] = (0, import_react17.useState)(null);
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react17.useState)(1);
+  const [internalPageSize, setInternalPageSize] = (0, import_react17.useState)(spreadsheetSettings.defaultPageSize);
+  const [zoom, setZoom] = (0, import_react17.useState)(spreadsheetSettings.defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
-  const handlePageChange = (0, import_react16.useCallback)(
+  const handlePageChange = (0, import_react17.useCallback)(
     (newPage) => {
       if (controlledCurrentPage === void 0) {
         setInternalCurrentPage(newPage);
@@ -3435,7 +3526,7 @@ function Spreadsheet({
     },
     [controlledCurrentPage, onPageChange, pageSize]
   );
-  const handlePageSizeChange = (0, import_react16.useCallback)(
+  const handlePageSizeChange = (0, import_react17.useCallback)(
     (newPageSize) => {
       if (controlledPageSize === void 0) {
         setInternalPageSize(newPageSize);
@@ -3447,13 +3538,13 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
       defaultSort: sortConfig
     }));
   }, [sortConfig]);
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     const pinnedColumnIds = Array.from(pinnedColumns.keys());
     setSpreadsheetSettings((prev) => {
       const prevIds = prev.defaultPinnedColumns;
@@ -3466,15 +3557,15 @@ function Spreadsheet({
       };
     });
   }, [pinnedColumns]);
-  const isInitialMount = (0, import_react16.useRef)(true);
-  (0, import_react16.useEffect)(() => {
+  const isInitialMount = (0, import_react17.useRef)(true);
+  (0, import_react17.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       return;
     }
     onSettingsChange?.(spreadsheetSettings);
   }, [spreadsheetSettings, onSettingsChange]);
-  const applyUndo = (0, import_react16.useCallback)(() => {
+  const applyUndo = (0, import_react17.useCallback)(() => {
     const entry = popUndoEntry();
     if (!entry || !onCellsEdit) return;
     if (entry.type === "cell-edit") {
@@ -3492,7 +3583,7 @@ function Spreadsheet({
     }
     markAsChanged();
   }, [popUndoEntry, onCellsEdit, markAsChanged]);
-  const applyRedo = (0, import_react16.useCallback)(() => {
+  const applyRedo = (0, import_react17.useCallback)(() => {
     const entry = popRedoEntry();
     if (!entry || !onCellsEdit) return;
     if (entry.type === "cell-edit") {
@@ -3508,7 +3599,7 @@ function Spreadsheet({
     }
     markAsChanged();
   }, [popRedoEntry, onCellsEdit, markAsChanged]);
-  const paginatedData = (0, import_react16.useMemo)(() => {
+  const paginatedData = (0, import_react17.useMemo)(() => {
     if (serverSide) {
       return filteredData;
     }
@@ -3534,7 +3625,7 @@ function Spreadsheet({
     getRowId,
     enableCellEditing
   });
-  const handleEscapeCallback = (0, import_react16.useCallback)(() => {
+  const handleEscapeCallback = (0, import_react17.useCallback)(() => {
     if (commentModalCell !== null) {
       setCommentModalCell(null);
     } else if (viewCommentsCell !== null) {
@@ -3563,7 +3654,7 @@ function Spreadsheet({
     setHighlightPickerCell,
     clearSelection
   ]);
-  const handleNavigate = (0, import_react16.useCallback)(
+  const handleNavigate = (0, import_react17.useCallback)(
     (direction, event) => {
       const extendSelection = event?.shiftKey ?? false;
       navigateCell(direction, extendSelection);
@@ -3584,10 +3675,10 @@ function Spreadsheet({
     },
     [navigateCell, focusedCell]
   );
-  const handleEnterEditMode = (0, import_react16.useCallback)(() => {
+  const handleEnterEditMode = (0, import_react17.useCallback)(() => {
     enterEditMode();
   }, [enterEditMode]);
-  const handlePaste = (0, import_react16.useCallback)(async () => {
+  const handlePaste = (0, import_react17.useCallback)(async () => {
     const edits = await pasteFromSystemClipboard();
     if (edits.length > 0 && onCellsEdit) {
       if (enableUndoRedo) {
@@ -3633,15 +3724,15 @@ function Spreadsheet({
   });
   const effectiveCompactMode = spreadsheetSettings.compactView ?? false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
-  const tableRef = (0, import_react16.useRef)(null);
+  const tableRef = (0, import_react17.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
-  (0, import_react16.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     if (!serverSide && currentPage > totalPages) {
       setInternalCurrentPage(1);
     }
   }, [totalPages, currentPage, serverSide]);
-  const handleRowSelect = (0, import_react16.useCallback)(
+  const handleRowSelect = (0, import_react17.useCallback)(
     (rowId, event) => {
       if (!enableRowSelection) return;
       event.stopPropagation();
@@ -3690,14 +3781,14 @@ function Spreadsheet({
       onSelectionChange
     ]
   );
-  const handleCellClick = (0, import_react16.useCallback)(
+  const handleCellClick = (0, import_react17.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
       handleCellMouseDown(rowId, columnId, event);
     },
     [handleCellMouseDown]
   );
-  const handleCellChange = (0, import_react16.useCallback)(
+  const handleCellChange = (0, import_react17.useCallback)(
     (rowId, columnId, newValue) => {
       const row = data.find((r) => getRowId(r) === rowId);
       const previousValue = row ? row[columnId] : void 0;
@@ -3720,7 +3811,7 @@ function Spreadsheet({
     },
     [data, getRowId, enableUndoRedo, onCellsEdit, pushToUndoStack, markAsChanged]
   );
-  const handleConfirmEdit = (0, import_react16.useCallback)(
+  const handleConfirmEdit = (0, import_react17.useCallback)(
     (finalValue) => {
       if (editingCell && finalValue !== void 0) {
         handleCellChange(editingCell.rowId, editingCell.columnId, finalValue);
@@ -3729,26 +3820,14 @@ function Spreadsheet({
     },
     [editingCell, handleCellChange, setEditingCell]
   );
-  const handleCancelEdit = (0, import_react16.useCallback)(() => {
+  const handleCancelEdit = (0, import_react17.useCallback)(() => {
     setEditingCell(null);
   }, [setEditingCell]);
-  const handleRowClone = (0, import_react16.useCallback)(
-    (row, rowId) => {
-      onRowClone?.(row, rowId);
-    },
-    [onRowClone]
-  );
-  const handleRowDelete = (0, import_react16.useCallback)(
-    (row, rowId) => {
-      onRowDelete?.(row, rowId);
-    },
-    [onRowDelete]
-  );
-  const handleRowIndexHighlightClick = (0, import_react16.useCallback)(() => {
+  const handleRowIndexHighlightClick = (0, import_react17.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
-    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SpreadsheetToolbar,
       {
         zoom,
@@ -3778,7 +3857,7 @@ function Spreadsheet({
         menuItems: toolbarMenuItems
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         style: {
@@ -3786,10 +3865,10 @@ function Spreadsheet({
           transformOrigin: "top left",
           width: `${100 / (zoom / 100)}%`
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("thead", { children: [
-            columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "w-full border-separate border-spacing-0 text-xs select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("thead", { children: [
+            columnGroups && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -3811,7 +3890,7 @@ function Spreadsheet({
                   1,
                   visibleGroupColumns.length + (isCollapsed ? 1 : 0)
                 );
-                return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "th",
                   {
                     colSpan,
@@ -3823,17 +3902,17 @@ function Spreadsheet({
                       backgroundColor: group.headerColor || "rgb(243 244 246)"
                     },
                     onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
-                      group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiChevronDown, { className: "h-3 w-3" })),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: group.label })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+                      group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HiChevronDown, { className: "h-3 w-3" })),
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: group.label })
                     ] })
                   },
                   group.id
                 );
               })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("tr", { children: [
-              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
+              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -3847,7 +3926,7 @@ function Spreadsheet({
               ),
               visibleColumns.map((column) => {
                 const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
-                return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   SpreadsheetHeader,
                   {
                     column,
@@ -3864,7 +3943,7 @@ function Spreadsheet({
                     ),
                     onPinClick: () => handleTogglePin(column.id),
                     onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
-                    children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       SpreadsheetFilterDropdown,
                       {
                         column,
@@ -3879,17 +3958,17 @@ function Spreadsheet({
               })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
               colSpan: visibleColumns.length + 1,
               className: "text-center py-8 text-gray-500",
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
                 "Loading..."
               ] })
             }
-          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "td",
             {
               colSpan: visibleColumns.length + 1,
@@ -3902,7 +3981,7 @@ function Spreadsheet({
             const isRowHovered = hoveredRow === rowId;
             const rowHighlight = getRowHighlight(rowId);
             const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
-            return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "tr",
               {
                 onMouseEnter: () => setHoveredRow(rowId),
@@ -3912,7 +3991,7 @@ function Spreadsheet({
                 },
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     "td",
                     {
                       onClick: (e) => handleRowSelect(rowId, e),
@@ -3933,36 +4012,19 @@ function Spreadsheet({
                           left: 0
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative flex items-center justify-center", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: displayIndex }),
-                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "absolute right-0 flex items-center gap-0.5", children: [
-                          onRowClone && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                handleRowClone(row, rowId);
-                              },
-                              className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
-                              title: "Duplicate row",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiDuplicate, { className: "h-2.5 w-2.5 text-gray-500" })
-                            }
-                          ),
-                          onRowDelete && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                            "button",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex items-center justify-center w-full h-full", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: displayIndex }),
+                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
+                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            RowContextMenu,
                             {
-                              type: "button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                handleRowDelete(row, rowId);
-                              },
-                              className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-red-100 rounded",
-                              title: "Delete row",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiTrash, { className: "h-2.5 w-2.5 text-gray-500 hover:text-red-500" })
+                              row,
+                              rowId,
+                              items: rowContextMenuItems,
+                              compactMode: effectiveCompactMode
                             }
                           ),
-                          enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                             "button",
                             {
                               type: "button",
@@ -3972,7 +4034,7 @@ function Spreadsheet({
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
                               title: "Highlight row",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                                 AiFillHighlight,
                                 {
                                   className: cn(
@@ -3986,7 +4048,7 @@ function Spreadsheet({
                           enableComments && (cellHasComments(
                             rowId,
                             ROW_INDEX_COLUMN_ID
-                          ) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                          ) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                             "button",
                             {
                               type: "button",
@@ -4000,11 +4062,11 @@ function Spreadsheet({
                               className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
                               title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} comment(s) - click to view`,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
                                 getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
-                                ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
+                                ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
                                 ) > 99 ? "99+" : getCellUnresolvedCommentCount(
@@ -4013,7 +4075,7 @@ function Spreadsheet({
                                 ) })
                               ]
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                             "button",
                             {
                               type: "button",
@@ -4026,13 +4088,13 @@ function Spreadsheet({
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
                               title: "Add comment",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
                           )),
                           rowActions?.map((action) => {
                             if (action.visible && !action.visible(row))
                               return null;
-                            return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -4069,7 +4131,7 @@ function Spreadsheet({
                     const cellOrRowOrColumnHighlight = getCellHighlight(rowId, column.id) || rowHighlight?.color || getColumnHighlight(column.id);
                     const isColPinned = isColumnPinned(column.id);
                     const colPinSide = getColumnPinSide(column.id);
-                    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       MemoizedSpreadsheetCell,
                       {
                         value,
@@ -4126,8 +4188,8 @@ function Spreadsheet({
         ] })
       }
     ) }),
-    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-      import_design_system.Pagination,
+    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      import_design_system2.Pagination,
       {
         currentPage,
         totalPages,
@@ -4141,7 +4203,7 @@ function Spreadsheet({
         onPageSizeChange: handlePageSizeChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       AddCommentModal,
       {
         isOpen: commentModalCell !== null,
@@ -4152,7 +4214,7 @@ function Spreadsheet({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ViewCommentsModal,
       {
         isOpen: viewCommentsCell !== null,
@@ -4167,7 +4229,7 @@ function Spreadsheet({
         onClose: () => setViewCommentsCell(null)
       }
     ),
-    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Row",
@@ -4176,7 +4238,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerRow(null)
       }
     ),
-    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ColorPickerPopover,
       {
         title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
@@ -4185,7 +4247,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerColumn(null)
       }
     ),
-    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Cell",
@@ -4198,7 +4260,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerCell(null)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       KeyboardShortcutsModal,
       {
         isOpen: showKeyboardShortcuts,
@@ -4206,7 +4268,7 @@ function Spreadsheet({
         shortcuts
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       SpreadsheetSettingsModal,
       {
         isOpen: showSettingsModal,
@@ -4234,6 +4296,7 @@ function Spreadsheet({
 Spreadsheet.displayName = "Spreadsheet";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  RowContextMenu,
   Spreadsheet,
   SpreadsheetCell,
   SpreadsheetFilterDropdown,