@xcelsior/ui-spreadsheets 1.2.2 → 1.3.1

package/dist/index.js

@@ -31,18 +31,20 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   ActiveFiltersDisplay: () => ActiveFiltersDisplay,
+  MemoizedSpreadsheetHeader: () => MemoizedSpreadsheetHeader,
   RowContextMenu: () => RowContextMenu,
   Spreadsheet: () => Spreadsheet,
   SpreadsheetCell: () => MemoizedSpreadsheetCell,
   SpreadsheetFilterDropdown: () => SpreadsheetFilterDropdown,
   SpreadsheetHeader: () => SpreadsheetHeader,
   SpreadsheetSettingsModal: () => SpreadsheetSettingsModal,
-  SpreadsheetToolbar: () => SpreadsheetToolbar
+  SpreadsheetToolbar: () => SpreadsheetToolbar,
+  useSpreadsheetDuplicates: () => useSpreadsheetDuplicates
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Spreadsheet.tsx
-var import_react17 = require("react");
+var import_react23 = 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"));
@@ -136,6 +138,9 @@ 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 HiExclamation(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", "clipRule": "evenodd" } }] })(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);
 }
@@ -148,6 +153,9 @@ 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 HiSortDescending(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 2h7a1 1 0 100-2H3zM3 11a1 1 0 100 2h4a1 1 0 100-2H3zM15 8a1 1 0 10-2 0v5.586l-1.293-1.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L15 13.586V8z" } }] })(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);
 }
@@ -188,165 +196,186 @@ function cn(...inputs) {
 }
 
 // src/components/SpreadsheetCell.tsx
-var import_react4 = require("react");
-
-// src/hooks/useSpreadsheetPinning.ts
 var import_react3 = require("react");
-var ROW_INDEX_COLUMN_ID = "__row_index__";
-var ROW_INDEX_COLUMN_WIDTH = 80;
-var MIN_PINNED_COLUMN_WIDTH = 150;
-function useSpreadsheetPinning({
-  columns,
-  columnGroups,
-  showRowIndex = true,
-  defaultPinnedColumns = [],
-  defaultPinnedRightColumns = []
-}) {
-  const [pinnedColumns, setPinnedColumns] = (0, import_react3.useState)(() => {
-    const map = /* @__PURE__ */ new Map();
-    defaultPinnedColumns.forEach((col) => {
-      map.set(col, "left");
-    });
-    defaultPinnedRightColumns.forEach((col) => {
-      map.set(col, "right");
-    });
-    return map;
-  });
-  const [collapsedGroups, setCollapsedGroups] = (0, import_react3.useState)(/* @__PURE__ */ new Set());
-  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
-  const handleTogglePin = (0, import_react3.useCallback)((columnId) => {
-    setPinnedColumns((prev) => {
-      const newMap = new Map(prev);
-      if (newMap.has(columnId)) {
-        newMap.delete(columnId);
-      } else {
-        newMap.set(columnId, "left");
-      }
-      return newMap;
-    });
-  }, []);
-  const setPinnedColumnsFromIds = (0, import_react3.useCallback)((columnIds) => {
-    const map = /* @__PURE__ */ new Map();
-    columnIds.forEach((col) => {
-      map.set(col, "left");
-    });
-    setPinnedColumns(map);
-  }, []);
-  const handleToggleGroupCollapse = (0, import_react3.useCallback)((groupId) => {
-    setCollapsedGroups((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(groupId)) {
-        newSet.delete(groupId);
-      } else {
-        newSet.add(groupId);
-      }
-      return newSet;
-    });
-  }, []);
-  const visibleColumns = (0, import_react3.useMemo)(() => {
-    if (!columns || !Array.isArray(columns) || columns.length === 0) {
-      return [];
-    }
-    let result = [...columns];
-    if (columnGroups && Array.isArray(columnGroups)) {
-      result = result.filter((column) => {
-        const group = columnGroups.find((g) => g.columns.includes(column.id));
-        if (!group) return true;
-        if (!collapsedGroups.has(group.id)) return true;
-        return pinnedColumns.has(column.id);
+var import_react_dom = require("react-dom");
+var import_jsx_runtime = require("react/jsx-runtime");
+var cellPaddingCompact = "px-1.5 py-0.5";
+var cellPaddingNormal = "px-2.5 py-1.5";
+var AutocompleteEditor = ({ value, column, compactMode, onConfirm, onCancel }) => {
+  const getLabel = (0, import_react3.useCallback)(
+    (val) => {
+      if (val === null || val === void 0 || val === "") return "";
+      if (column.getOptionLabel) return column.getOptionLabel(val);
+      const match = column.autocompleteOptions?.find((o) => o.value === val);
+      return match ? match.label : String(val);
+    },
+    [column]
+  );
+  const [searchText, setSearchText] = (0, import_react3.useState)(() => getLabel(value));
+  const [filteredOptions, setFilteredOptions] = (0, import_react3.useState)(
+    column.autocompleteOptions ?? []
+  );
+  const [focusedIndex, setFocusedIndex] = (0, import_react3.useState)(-1);
+  const [isOpen, setIsOpen] = (0, import_react3.useState)(true);
+  const [dropdownPos, setDropdownPos] = (0, import_react3.useState)(null);
+  const inputRef = (0, import_react3.useRef)(null);
+  const dropdownRef = (0, import_react3.useRef)(null);
+  const debounceRef = (0, import_react3.useRef)(null);
+  const updateDropdownPos = (0, import_react3.useCallback)(() => {
+    if (inputRef.current) {
+      const rect = inputRef.current.getBoundingClientRect();
+      setDropdownPos({
+        top: rect.bottom + 2,
+        left: rect.left,
+        width: rect.width
       });
     }
-    const nonRowIndexPinned = Array.from(pinnedColumns.keys()).filter(
-      (id) => id !== ROW_INDEX_COLUMN_ID
-    );
-    if (nonRowIndexPinned.length === 0) {
-      return result;
-    }
-    const leftPinned = [];
-    const unpinned = [];
-    const rightPinned = [];
-    const pinnedLeftIds = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
-    const pinnedRightIds = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "right" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
-    for (const column of result) {
-      const pinSide = pinnedColumns.get(column.id);
-      if (pinSide === "left") {
-        leftPinned.push(column);
-      } else if (pinSide === "right") {
-        rightPinned.push(column);
-      } else {
-        unpinned.push(column);
-      }
-    }
-    leftPinned.sort((a, b) => pinnedLeftIds.indexOf(a.id) - pinnedLeftIds.indexOf(b.id));
-    rightPinned.sort((a, b) => pinnedRightIds.indexOf(a.id) - pinnedRightIds.indexOf(b.id));
-    return [...leftPinned, ...unpinned, ...rightPinned];
-  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
-  const getColumnLeftOffset = (0, import_react3.useCallback)(
-    (columnId) => {
-      if (columnId === ROW_INDEX_COLUMN_ID) {
-        return 0;
-      }
-      const pinnedLeft = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
-      const index = pinnedLeft.indexOf(columnId);
-      const isRowIndexPinnedNow = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
-      const baseOffset = showRowIndex && isRowIndexPinnedNow ? ROW_INDEX_COLUMN_WIDTH : 0;
-      if (index === -1) return baseOffset;
-      let offset = baseOffset;
-      for (let i = 0; i < index; i++) {
-        const col = columns.find((c) => c.id === pinnedLeft[i]);
-        const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
-        offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
-      }
-      return offset;
+  }, []);
+  (0, import_react3.useEffect)(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+    updateDropdownPos();
+  }, [updateDropdownPos]);
+  const filterClientSide = (0, import_react3.useCallback)(
+    (term) => {
+      const opts = column.autocompleteOptions ?? [];
+      if (!term.trim()) return opts;
+      const lower = term.toLowerCase();
+      return opts.filter((o) => o.label.toLowerCase().includes(lower));
     },
-    [pinnedColumns, columns, showRowIndex]
+    [column.autocompleteOptions]
   );
-  const isColumnPinned = (0, import_react3.useCallback)(
-    (columnId) => {
-      return pinnedColumns.has(columnId);
+  const handleSearchChange = (0, import_react3.useCallback)(
+    (e) => {
+      const term = e.target.value;
+      setSearchText(term);
+      setFocusedIndex(-1);
+      setIsOpen(true);
+      updateDropdownPos();
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(async () => {
+        if (column.onAutocompleteSearch) {
+          try {
+            const results = await column.onAutocompleteSearch(term);
+            setFilteredOptions(results);
+          } catch {
+            setFilteredOptions([]);
+          }
+        } else {
+          setFilteredOptions(filterClientSide(term));
+        }
+      }, 300);
     },
-    [pinnedColumns]
+    [column, filterClientSide, updateDropdownPos]
   );
-  const getColumnPinSide = (0, import_react3.useCallback)(
-    (columnId) => {
-      return pinnedColumns.get(columnId);
+  (0, import_react3.useEffect)(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const selectOption = (0, import_react3.useCallback)(
+    (option) => {
+      setSearchText(option.label);
+      setIsOpen(false);
+      onConfirm?.(option.value);
     },
-    [pinnedColumns]
+    [onConfirm]
   );
-  const getColumnRightOffset = (0, import_react3.useCallback)(
-    (columnId) => {
-      const pinnedRight = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
-      const index = pinnedRight.indexOf(columnId);
-      if (index === -1) return 0;
-      let offset = 0;
-      for (let i = pinnedRight.length - 1; i > index; i--) {
-        const col = columns.find((c) => c.id === pinnedRight[i]);
-        const configuredWidth = col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH;
-        offset += Math.max(configuredWidth, MIN_PINNED_COLUMN_WIDTH);
+  const handleKeyDown = (0, import_react3.useCallback)(
+    (e) => {
+      const visibleOptions2 = filteredOptions.slice(0, 8);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        setFocusedIndex((prev) => Math.min(prev + 1, visibleOptions2.length - 1));
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        setFocusedIndex((prev) => Math.max(prev - 1, -1));
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (focusedIndex >= 0 && visibleOptions2[focusedIndex]) {
+          selectOption(visibleOptions2[focusedIndex]);
+        } else {
+          onConfirm?.(value);
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsOpen(false);
+        onCancel?.();
       }
-      return offset;
     },
-    [pinnedColumns, columns]
+    [filteredOptions, focusedIndex, selectOption, onConfirm, onCancel, value]
   );
-  return {
-    pinnedColumns,
-    isRowIndexPinned,
-    collapsedGroups,
-    visibleColumns,
-    handleTogglePin,
-    handleToggleGroupCollapse,
-    setPinnedColumnsFromIds,
-    getColumnLeftOffset,
-    getColumnRightOffset,
-    isColumnPinned,
-    getColumnPinSide
-  };
-}
-
-// src/components/SpreadsheetCell.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var cellPaddingCompact = "px-1 py-px";
-var cellPaddingNormal = "px-2 py-1";
+  const handleBlur = (0, import_react3.useCallback)(
+    (e) => {
+      setTimeout(() => {
+        if (dropdownRef.current && dropdownRef.current.contains(document.activeElement)) {
+          return;
+        }
+        setIsOpen(false);
+        onConfirm?.(value);
+      }, 150);
+    },
+    [onConfirm, value]
+  );
+  const visibleOptions = filteredOptions.slice(0, 8);
+  const dropdown = isOpen && visibleOptions.length > 0 && dropdownPos ? (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref: dropdownRef,
+        style: {
+          position: "fixed",
+          top: dropdownPos.top,
+          left: dropdownPos.left,
+          width: Math.max(dropdownPos.width, 180),
+          zIndex: 50
+        },
+        className: "bg-white border border-gray-200 rounded-md shadow-lg max-h-48 overflow-y-auto",
+        onMouseDown: (e) => e.preventDefault(),
+        children: visibleOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            onMouseDown: (e) => {
+              e.preventDefault();
+              selectOption(option);
+            },
+            className: cn(
+              "px-3 py-1.5 cursor-pointer",
+              compactMode ? "text-xs" : "text-sm",
+              index === focusedIndex ? "bg-blue-100" : "hover:bg-blue-50"
+            ),
+            children: option.label
+          },
+          `${option.value}-${index}`
+        ))
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: searchText,
+        onChange: handleSearchChange,
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: false,
+        className: cn(
+          "w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm",
+          compactMode ? "text-xs" : "text-sm"
+        )
+      }
+    ),
+    dropdown
+  ] });
+};
 var SpreadsheetCell = ({
   value,
   column,
@@ -361,6 +390,7 @@ var SpreadsheetCell = ({
   isRowSelected = false,
   isRowHovered = false,
   highlightColor,
+  isDuplicate = false,
   hasComments = false,
   unresolvedCommentCount = 0,
   isCopied = false,
@@ -369,7 +399,11 @@ var SpreadsheetCell = ({
   pinSide,
   leftOffset = 0,
   rightOffset = 0,
+  isOddRow = false,
+  resolvedWidth,
+  pinnedZIndex,
   onClick,
+  onDoubleClick,
   onMouseDown,
   onMouseEnter,
   onChange,
@@ -380,17 +414,17 @@ var SpreadsheetCell = ({
   onViewComments,
   className
 }) => {
-  const [localValue, setLocalValue] = (0, import_react4.useState)(value);
-  const inputRef = (0, import_react4.useRef)(null);
-  const selectRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const [localValue, setLocalValue] = (0, import_react3.useState)(value);
+  const inputRef = (0, import_react3.useRef)(null);
+  const selectRef = (0, import_react3.useRef)(null);
+  (0, import_react3.useEffect)(() => {
     setLocalValue(value);
   }, [value]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (isEditing) {
       if (column.type === "select") {
         selectRef.current?.focus();
-      } else {
+      } else if (column.type !== "autocomplete") {
         inputRef.current?.focus();
         inputRef.current?.select();
       }
@@ -409,8 +443,10 @@ var SpreadsheetCell = ({
   };
   const getBackgroundColor = () => {
     if (highlightColor) return highlightColor;
+    if (isDuplicate) return "rgb(254 202 202)";
     if (isRowSelected) return "rgb(219 234 254)";
     if (isRowHovered) return "rgb(243 244 246)";
+    if (isOddRow) return "rgb(249 250 251)";
     return "white";
   };
   const handleCheckboxChange = (e) => {
@@ -447,12 +483,29 @@ var SpreadsheetCell = ({
     if (column.type === "number") {
       return typeof value === "number" ? value.toLocaleString() : value;
     }
+    if (column.type === "autocomplete") {
+      if (column.getOptionLabel) return column.getOptionLabel(value, row);
+      const match = column.autocompleteOptions?.find((o) => o.value === value);
+      return match ? match.label : String(value);
+    }
     return String(value);
   };
   const renderEditInput = () => {
     if (column.type === "checkbox") {
       return renderContent();
     }
+    if (column.type === "autocomplete") {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AutocompleteEditor,
+        {
+          value: localValue,
+          column,
+          compactMode,
+          onConfirm,
+          onCancel
+        }
+      );
+    }
     if (column.type === "select" && column.options) {
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         "select",
@@ -465,10 +518,11 @@ var SpreadsheetCell = ({
             onConfirm?.(newValue);
           },
           onKeyDown: handleKeyDown,
-          onBlur: () => onConfirm?.(localValue),
+          onClick: (e) => e.stopPropagation(),
+          onMouseDown: (e) => e.stopPropagation(),
           className: cn(
             "w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm",
-            compactMode ? "text-[10px]" : "text-xs"
+            compactMode ? "text-xs" : "text-sm"
           ),
           children: column.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option, children: option }, option))
         }
@@ -493,7 +547,7 @@ var SpreadsheetCell = ({
         spellCheck: false,
         className: cn(
           "w-full border-0 bg-blue-50 focus:outline-none focus:ring-1 focus:ring-blue-500 rounded-sm",
-          compactMode ? "text-[10px]" : "text-xs"
+          compactMode ? "text-xs" : "text-sm"
         )
       }
     );
@@ -517,60 +571,50 @@ var SpreadsheetCell = ({
   }
   const selectionBorderStyles = {};
   if (isInSelection && selectionEdge) {
-    const borderColor = "rgb(59 130 246)";
-    const borderWidth = "2px";
-    if (selectionEdge.top) {
-      selectionBorderStyles.borderTopColor = borderColor;
-      selectionBorderStyles.borderTopWidth = borderWidth;
-    }
-    if (selectionEdge.right) {
-      selectionBorderStyles.borderRightColor = borderColor;
-      selectionBorderStyles.borderRightWidth = borderWidth;
-    }
-    if (selectionEdge.bottom) {
-      selectionBorderStyles.borderBottomColor = borderColor;
-      selectionBorderStyles.borderBottomWidth = borderWidth;
-    }
-    if (selectionEdge.left) {
-      selectionBorderStyles.borderLeftColor = borderColor;
-      selectionBorderStyles.borderLeftWidth = borderWidth;
+    const color = "rgb(59 130 246)";
+    const w = "2px";
+    const shadows = [];
+    if (selectionEdge.top) shadows.push(`inset 0 ${w} 0 0 ${color}`);
+    if (selectionEdge.bottom) shadows.push(`inset 0 -${w} 0 0 ${color}`);
+    if (selectionEdge.left) shadows.push(`inset ${w} 0 0 0 ${color}`);
+    if (selectionEdge.right) shadows.push(`inset -${w} 0 0 0 ${color}`);
+    if (shadows.length > 0) {
+      selectionBorderStyles.boxShadow = shadows.join(", ");
     }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "td",
     {
       onClick,
+      onDoubleClick,
       onMouseDown,
       onMouseEnter,
       onKeyDown: handleCellKeyDown,
       "data-cell-id": `${rowId}-${column.id}`,
+      "data-column-id": column.id,
       className: cn(
-        "border border-gray-200 group cursor-pointer transition-colors select-none",
-        compactMode ? "text-[10px]" : "text-xs",
+        "border border-gray-200 group cursor-pointer transition-colors select-none relative",
+        compactMode ? "text-xs" : "text-sm",
         cellPadding,
         column.align === "right" && "text-right",
         column.align === "center" && "text-center",
         isCopied && "animate-pulse",
         isFocused && !isInSelection && "ring-2 ring-blue-500 ring-inset",
         isInSelection && "bg-blue-50",
-        isPinned ? "z-20" : "z-0",
+        !isPinned && "z-0",
         className
       ),
       style: {
         backgroundColor: isInSelection ? "rgb(239 246 255)" : getBackgroundColor(),
-        minWidth: column.minWidth || column.width,
-        // Pinned columns must have a fixed width so sticky offsets stay correct.
-        // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
-        ...isPinned && {
-          width: Math.max(
-            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-            MIN_PINNED_COLUMN_WIDTH
-          ),
-          maxWidth: Math.max(
-            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-            MIN_PINNED_COLUMN_WIDTH
-          )
+        // Always set explicit width to prevent layout shift on selection/re-render
+        ...resolvedWidth ? {
+          width: resolvedWidth,
+          minWidth: resolvedWidth
+        } : {
+          width: column.width || column.minWidth,
+          minWidth: column.minWidth || column.width
         },
+        ...isPinned && pinnedZIndex !== void 0 && { zIndex: pinnedZIndex },
         ...positionStyles,
         ...selectionBorderStyles
       },
@@ -580,12 +624,13 @@ var SpreadsheetCell = ({
           {
             className: cn(
               "flex-1 truncate",
-              isEditable && "cursor-text bg-blue-50/50 rounded"
+              isEditable && "cursor-text bg-blue-50 rounded px-1"
             ),
             title: String(value ?? ""),
             children: renderContent()
           }
         ),
+        isEditable && (column.type === "select" || column.type === "autocomplete") && !isEditing && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiChevronDown, { className: "h-3 w-3 shrink-0 text-gray-400" }),
         !isInSelection && !isFocused && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-0.5 shrink-0", children: [
           column.highlightable !== false && onHighlight && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
@@ -642,7 +687,7 @@ var SpreadsheetCell = ({
   );
 };
 SpreadsheetCell.displayName = "SpreadsheetCell";
-var MemoizedSpreadsheetCell = (0, import_react4.memo)(SpreadsheetCell, (prevProps, nextProps) => {
+var MemoizedSpreadsheetCell = (0, import_react3.memo)(SpreadsheetCell, (prevProps, nextProps) => {
   if (prevProps.isEditing !== nextProps.isEditing) return false;
   if (prevProps.isFocused !== nextProps.isFocused) return false;
   if (prevProps.value !== nextProps.value) return false;
@@ -650,6 +695,7 @@ var MemoizedSpreadsheetCell = (0, import_react4.memo)(SpreadsheetCell, (prevProp
   if (prevProps.isRowSelected !== nextProps.isRowSelected) return false;
   if (prevProps.isRowHovered !== nextProps.isRowHovered) return false;
   if (prevProps.highlightColor !== nextProps.highlightColor) return false;
+  if (prevProps.isDuplicate !== nextProps.isDuplicate) return false;
   if (prevProps.hasComments !== nextProps.hasComments) return false;
   if (prevProps.unresolvedCommentCount !== nextProps.unresolvedCommentCount) return false;
   if (prevProps.isCopied !== nextProps.isCopied) return false;
@@ -657,6 +703,7 @@ var MemoizedSpreadsheetCell = (0, import_react4.memo)(SpreadsheetCell, (prevProp
   if (prevProps.leftOffset !== nextProps.leftOffset) return false;
   if (prevProps.rightOffset !== nextProps.rightOffset) return false;
   if (prevProps.compactMode !== nextProps.compactMode) return false;
+  if (prevProps.isOddRow !== nextProps.isOddRow) return false;
   const prevEdge = prevProps.selectionEdge;
   const nextEdge = nextProps.selectionEdge;
   if (prevEdge !== nextEdge) {
@@ -671,7 +718,8 @@ var MemoizedSpreadsheetCell = (0, import_react4.memo)(SpreadsheetCell, (prevProp
 MemoizedSpreadsheetCell.displayName = "MemoizedSpreadsheetCell";
 
 // src/components/SpreadsheetFilterDropdown.tsx
-var import_react5 = require("react");
+var import_react4 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var TEXT_OPERATORS = [
   { value: "contains", label: "Contains" },
@@ -710,59 +758,121 @@ var DATE_OPERATORS = [
   { value: "isEmpty", label: "Is empty" },
   { value: "isNotEmpty", label: "Is not empty" }
 ];
+var DROPDOWN_WIDTH = 256;
+var DROPDOWN_HEIGHT = 340;
+var ARROW_SIZE = 6;
 var SpreadsheetFilterDropdown = ({
   column,
   filter,
   onFilterChange,
   onClose,
-  className
+  className,
+  triggerRef,
+  hasDuplicateCheck = false
 }) => {
-  const [textOperator, setTextOperator] = (0, import_react5.useState)(
+  const [showDuplicatesOnly, setShowDuplicatesOnly] = (0, import_react4.useState)(
+    filter?.showDuplicatesOnly ?? false
+  );
+  const [textOperator, setTextOperator] = (0, import_react4.useState)(
     filter?.textCondition?.operator || "contains"
   );
-  const [textValue, setTextValue] = (0, import_react5.useState)(filter?.textCondition?.value || "");
-  const [numberOperator, setNumberOperator] = (0, import_react5.useState)(
+  const [textValue, setTextValue] = (0, import_react4.useState)(filter?.textCondition?.value || "");
+  const [numberOperator, setNumberOperator] = (0, import_react4.useState)(
     filter?.numberCondition?.operator || "equals"
   );
-  const [numberValue, setNumberValue] = (0, import_react5.useState)(
+  const [numberValue, setNumberValue] = (0, import_react4.useState)(
     filter?.numberCondition?.value?.toString() || ""
   );
-  const [numberValueTo, setNumberValueTo] = (0, import_react5.useState)(
+  const [numberValueTo, setNumberValueTo] = (0, import_react4.useState)(
     filter?.numberCondition?.valueTo?.toString() || ""
   );
-  const [dateOperator, setDateOperator] = (0, import_react5.useState)(
+  const [dateOperator, setDateOperator] = (0, import_react4.useState)(
     filter?.dateCondition?.operator || "equals"
   );
-  const [dateValue, setDateValue] = (0, import_react5.useState)(filter?.dateCondition?.value || "");
-  const [dateValueTo, setDateValueTo] = (0, import_react5.useState)(filter?.dateCondition?.valueTo || "");
-  const dropdownRef = (0, import_react5.useRef)(null);
+  const [dateValue, setDateValue] = (0, import_react4.useState)(filter?.dateCondition?.value || "");
+  const [dateValueTo, setDateValueTo] = (0, import_react4.useState)(filter?.dateCondition?.valueTo || "");
+  const dropdownRef = (0, import_react4.useRef)(null);
+  const [position, setPosition] = (0, import_react4.useState)({ top: 0, left: 0, arrowLeft: DROPDOWN_WIDTH / 2, flippedUp: false });
   const isNumeric = column.type === "number";
   const isDate = column.type === "date";
-  (0, import_react5.useEffect)(() => {
+  const updatePosition = (0, import_react4.useCallback)(() => {
+    if (!triggerRef?.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    let top = rect.bottom + 4;
+    let flippedUp = false;
+    if (top + DROPDOWN_HEIGHT > window.innerHeight) {
+      top = rect.top - DROPDOWN_HEIGHT - 4;
+      flippedUp = true;
+    }
+    let left = rect.left;
+    if (left + DROPDOWN_WIDTH > window.innerWidth) {
+      left = window.innerWidth - DROPDOWN_WIDTH - 8;
+    }
+    if (left < 8) {
+      left = 8;
+    }
+    const anchorCenter = rect.left + rect.width / 2;
+    const arrowLeft = Math.min(
+      Math.max(anchorCenter - left, ARROW_SIZE + 4),
+      DROPDOWN_WIDTH - ARROW_SIZE - 4
+    );
+    setPosition({ top, left, arrowLeft, flippedUp });
+  }, [triggerRef]);
+  (0, import_react4.useEffect)(() => {
+    if (!triggerRef?.current) return;
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [updatePosition, triggerRef]);
+  (0, import_react4.useEffect)(() => {
     const handleClickOutside = (event) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      const target = event.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target)) {
+        if (triggerRef?.current?.contains(target)) return;
         onClose();
       }
     };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
+    const rafId = requestAnimationFrame(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    });
+    return () => {
+      cancelAnimationFrame(rafId);
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [onClose, triggerRef]);
+  (0, import_react4.useEffect)(() => {
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose]);
   const handleApplyFilter = () => {
     let newFilter;
     if (isNumeric) {
       const needsValue = !["isEmpty", "isNotEmpty"].includes(numberOperator);
-      if (needsValue && !numberValue) {
+      if (needsValue && !numberValue && !showDuplicatesOnly) {
         onFilterChange(void 0);
         onClose();
         return;
       }
       newFilter = {
-        numberCondition: {
+        numberCondition: needsValue || !numberValue ? {
           operator: numberOperator,
           value: numberValue ? parseFloat(numberValue) : void 0,
           valueTo: numberValueTo ? parseFloat(numberValueTo) : void 0
-        }
+        } : void 0,
+        ...showDuplicatesOnly && { showDuplicatesOnly: true }
       };
+      if (!newFilter.numberCondition && !newFilter.showDuplicatesOnly) {
+        newFilter = void 0;
+      }
     } else if (isDate) {
       const needsValue = ![
         "isEmpty",
@@ -775,7 +885,7 @@ var SpreadsheetFilterDropdown = ({
         "lastMonth",
         "thisYear"
       ].includes(dateOperator);
-      if (needsValue && !dateValue) {
+      if (needsValue && !dateValue && !showDuplicatesOnly) {
         onFilterChange(void 0);
         onClose();
         return;
@@ -785,26 +895,32 @@ var SpreadsheetFilterDropdown = ({
           operator: dateOperator,
           value: dateValue || void 0,
           valueTo: dateValueTo || void 0
-        }
+        },
+        ...showDuplicatesOnly && { showDuplicatesOnly: true }
       };
     } else {
       const needsValue = !["isEmpty", "isNotEmpty"].includes(textOperator);
-      if (needsValue && !textValue) {
+      if (needsValue && !textValue && !showDuplicatesOnly) {
         onFilterChange(void 0);
         onClose();
         return;
       }
       newFilter = {
-        textCondition: {
+        textCondition: needsValue || !textValue ? {
           operator: textOperator,
           value: textValue || void 0
-        }
+        } : void 0,
+        ...showDuplicatesOnly && { showDuplicatesOnly: true }
       };
+      if (!newFilter.textCondition && !newFilter.showDuplicatesOnly) {
+        newFilter = void 0;
+      }
     }
     onFilterChange(newFilter);
     onClose();
   };
   const handleClearFilter = () => {
+    setShowDuplicatesOnly(false);
     setTextValue("");
     setNumberValue("");
     setNumberValueTo("");
@@ -813,6 +929,12 @@ var SpreadsheetFilterDropdown = ({
     onFilterChange(void 0);
     onClose();
   };
+  const handleFilterKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleApplyFilter();
+    }
+  };
   const textNeedsValue = !["isEmpty", "isNotEmpty"].includes(textOperator);
   const numberNeedsValue = !["isEmpty", "isNotEmpty"].includes(numberOperator);
   const dateNeedsValue = ![
@@ -826,20 +948,57 @@ var SpreadsheetFilterDropdown = ({
     "lastMonth",
     "thisYear"
   ].includes(dateOperator);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+  const dropdownContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       ref: dropdownRef,
       className: cn(
-        "absolute top-full left-0 mt-1 bg-white border border-gray-200 shadow-lg rounded-lg w-64 overflow-hidden flex flex-col z-[100]",
+        "bg-white border border-gray-200 shadow-lg rounded-lg w-64 overflow-hidden flex flex-col",
+        !triggerRef && "absolute top-full left-0 mt-1 z-[100]",
         className
       ),
+      style: triggerRef ? { position: "fixed", top: position.top, left: position.left, zIndex: 9999 } : void 0,
       onClick: (e) => e.stopPropagation(),
       children: [
+        triggerRef && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "absolute pointer-events-none",
+            style: position.flippedUp ? {
+              bottom: -ARROW_SIZE,
+              left: position.arrowLeft - ARROW_SIZE,
+              width: 0,
+              height: 0,
+              borderLeft: `${ARROW_SIZE}px solid transparent`,
+              borderRight: `${ARROW_SIZE}px solid transparent`,
+              borderTop: `${ARROW_SIZE}px solid #e5e7eb`
+            } : {
+              top: -ARROW_SIZE,
+              left: position.arrowLeft - ARROW_SIZE,
+              width: 0,
+              height: 0,
+              borderLeft: `${ARROW_SIZE}px solid transparent`,
+              borderRight: `${ARROW_SIZE}px solid transparent`,
+              borderBottom: `${ARROW_SIZE}px solid #e5e7eb`
+            }
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-3 py-2 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-xs font-medium text-gray-700", children: [
           "Filter: ",
           column.label
         ] }) }),
+        hasDuplicateCheck && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "px-3 pt-2 pb-2 border-b border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: showDuplicatesOnly,
+              onChange: (e) => setShowDuplicatesOnly(e.target.checked),
+              className: "h-3 w-3 rounded border-gray-300 text-red-600 focus:ring-red-500"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-xs text-gray-700", children: "Show only duplicates" })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "p-3 space-y-3", children: isNumeric ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "text-xs text-gray-500 mb-1 block", children: "Condition" }),
@@ -862,6 +1021,7 @@ var SpreadsheetFilterDropdown = ({
                 placeholder: "Enter value",
                 value: numberValue,
                 onChange: (e) => setNumberValue(e.target.value),
+                onKeyDown: handleFilterKeyDown,
                 className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
@@ -875,6 +1035,7 @@ var SpreadsheetFilterDropdown = ({
                 placeholder: "Enter end value",
                 value: numberValueTo,
                 onChange: (e) => setNumberValueTo(e.target.value),
+                onKeyDown: handleFilterKeyDown,
                 className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
@@ -900,6 +1061,7 @@ var SpreadsheetFilterDropdown = ({
                 type: "date",
                 value: dateValue,
                 onChange: (e) => setDateValue(e.target.value),
+                onKeyDown: handleFilterKeyDown,
                 className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
@@ -912,6 +1074,7 @@ var SpreadsheetFilterDropdown = ({
                 type: "date",
                 value: dateValueTo,
                 onChange: (e) => setDateValueTo(e.target.value),
+                onKeyDown: handleFilterKeyDown,
                 className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
@@ -938,6 +1101,7 @@ var SpreadsheetFilterDropdown = ({
                 placeholder: "Enter text",
                 value: textValue,
                 onChange: (e) => setTextValue(e.target.value),
+                onKeyDown: handleFilterKeyDown,
                 className: "w-full px-2 py-1.5 text-xs border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500"
               }
             )
@@ -972,11 +1136,15 @@ var SpreadsheetFilterDropdown = ({
       ]
     }
   );
+  if (triggerRef) {
+    return (0, import_react_dom2.createPortal)(dropdownContent, document.body);
+  }
+  return dropdownContent;
 };
 SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
 
 // src/components/SpreadsheetToolbar.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 
 // src/components/ActiveFiltersDisplay.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1199,9 +1367,9 @@ var SpreadsheetToolbar = ({
   onToggleFiltersPanel,
   className
 }) => {
-  const [showMoreMenu, setShowMoreMenu] = import_react6.default.useState(false);
-  const menuRef = import_react6.default.useRef(null);
-  import_react6.default.useEffect(() => {
+  const [showMoreMenu, setShowMoreMenu] = import_react5.default.useState(false);
+  const menuRef = import_react5.default.useRef(null);
+  import_react5.default.useEffect(() => {
     const handleClickOutside = (event) => {
       if (menuRef.current && !menuRef.current.contains(event.target)) {
         setShowMoreMenu(false);
@@ -1501,6 +1669,13 @@ var SpreadsheetToolbar = ({
 };
 SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
 
+// src/components/SpreadsheetHeader.tsx
+var import_react7 = __toESM(require("react"));
+
+// src/components/ColumnHeaderActions.tsx
+var import_react6 = require("react");
+var import_react_dom3 = require("react-dom");
+
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/md/index.esm.js
 function MdPushPin(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M16 9V4h1c.55 0 1-.45 1-1s-.45-1-1-1H7c-.55 0-1 .45-1 1s.45 1 1 1h1v5c0 1.66-1.34 3-3 3v2h5.97v7l1 1 1-1v-7H19v-2c-1.66 0-3-1.34-3-3z" } }] })(props);
@@ -1518,6 +1693,9 @@ function ColumnHeaderActions({
   hasActiveFilter = false,
   hasActiveHighlight = false,
   isPinned = false,
+  enableSorting = false,
+  sortDirection = null,
+  onSortClick,
   onFilterClick,
   onHighlightClick,
   onPinClick,
@@ -1525,82 +1703,281 @@ function ColumnHeaderActions({
   highlightTitle = "Highlight column",
   pinnedTitle = "Unpin column",
   unpinnedTitle = "Pin column",
-  className
+  className,
+  resolvedWidth,
+  enableDuplicateCheck = false,
+  hasDuplicateCheck = false,
+  onDuplicateCheckClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
-    enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onFilterClick();
-        },
-        className: cn(
-          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-          hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-        ),
-        title: filterTitle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiFilter, { className: "h-3 w-3" })
-      }
-    ),
-    enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onHighlightClick();
-        },
-        className: cn(
-          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-          hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-        ),
-        title: highlightTitle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiFillHighlight, { className: "h-3 w-3" })
-      }
-    ),
-    enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          onPinClick();
-        },
-        className: cn(
-          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
-          isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
-        ),
-        title: isPinned ? pinnedTitle : unpinnedTitle,
-        children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
+  const [overflowOpen, setOverflowOpen] = (0, import_react6.useState)(false);
+  const overflowRef = (0, import_react6.useRef)(null);
+  const triggerRef = (0, import_react6.useRef)(null);
+  const [dropdownPos, setDropdownPos] = (0, import_react6.useState)(null);
+  const isCompact = resolvedWidth !== void 0 && resolvedWidth < 80;
+  (0, import_react6.useEffect)(() => {
+    if (!overflowOpen) return;
+    const handler = (e) => {
+      if (overflowRef.current && !overflowRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
+        setOverflowOpen(false);
       }
-    )
-  ] });
-}
-ColumnHeaderActions.displayName = "ColumnHeaderActions";
-
-// src/components/SpreadsheetHeader.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var cellPaddingCompact2 = "px-1 py-0.5";
-var cellPaddingNormal2 = "px-2 py-1.5";
-var SpreadsheetHeader = ({
-  column,
-  sortConfig,
-  hasActiveFilter = false,
-  isPinned = false,
-  pinSide,
-  leftOffset = 0,
-  rightOffset = 0,
-  highlightColor,
-  compactMode = false,
-  onClick,
-  onFilterClick,
-  onPinClick,
-  onHighlightClick,
-  className,
-  children
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [overflowOpen]);
+  const openOverflow = (e) => {
+    e.stopPropagation();
+    if (!overflowOpen && triggerRef.current) {
+      const rect = triggerRef.current.getBoundingClientRect();
+      setDropdownPos({
+        top: rect.bottom + window.scrollY + 4,
+        right: window.innerWidth - rect.right - window.scrollX
+      });
+    }
+    setOverflowOpen((prev) => !prev);
+  };
+  if (isCompact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          ref: triggerRef,
+          type: "button",
+          onClick: openOverflow,
+          className: "p-0.5 hover:bg-gray-200 rounded text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity",
+          title: "Column actions",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiDotsVertical, { className: "h-3 w-3" })
+        }
+      ),
+      overflowOpen && dropdownPos && (0, import_react_dom3.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            ref: overflowRef,
+            style: {
+              position: "absolute",
+              top: dropdownPos.top,
+              right: dropdownPos.right
+            },
+            className: "bg-white border border-gray-200 shadow-lg rounded-md py-1 w-44 z-[9999]",
+            children: [
+              enableSorting && onSortClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onSortClick();
+                    setOverflowOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left",
+                    sortDirection ? "text-blue-600" : "text-gray-700"
+                  ),
+                  children: [
+                    sortDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiSortDescending, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiSortAscending, { className: "h-3.5 w-3.5 shrink-0" }),
+                    sortDirection === "asc" ? "Sorted ascending" : sortDirection === "desc" ? "Sorted descending" : "Sort"
+                  ]
+                }
+              ),
+              enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onFilterClick();
+                    setOverflowOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left",
+                    hasActiveFilter ? "text-blue-600" : "text-gray-700"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiFilter, { className: "h-3.5 w-3.5 shrink-0" }),
+                    "Filter",
+                    hasActiveFilter && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-auto h-1.5 w-1.5 rounded-full bg-blue-500 shrink-0" })
+                  ]
+                }
+              ),
+              enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onHighlightClick();
+                    setOverflowOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left",
+                    hasActiveHighlight ? "text-amber-500" : "text-gray-700"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiFillHighlight, { className: "h-3.5 w-3.5 shrink-0" }),
+                    "Highlight"
+                  ]
+                }
+              ),
+              enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onPinClick();
+                    setOverflowOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left",
+                    isPinned ? "text-blue-600" : "text-gray-700"
+                  ),
+                  children: [
+                    isPinned ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdPushPin, { className: "h-3.5 w-3.5 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdOutlinePushPin, { className: "h-3.5 w-3.5 shrink-0" }),
+                    isPinned ? "Unpin" : "Pin"
+                  ]
+                }
+              ),
+              enableDuplicateCheck && onDuplicateCheckClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDuplicateCheckClick();
+                    setOverflowOpen(false);
+                  },
+                  className: cn(
+                    "flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 text-left",
+                    hasDuplicateCheck ? "text-purple-600" : "text-gray-700"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiExclamation, { className: "h-3.5 w-3.5 shrink-0" }),
+                    "Check Duplicates"
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
+    enableSorting && onSortClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSortClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          sortDirection ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: sortDirection === "asc" ? "Sorted ascending" : sortDirection === "desc" ? "Sorted descending" : "Sort column",
+        children: sortDirection === "desc" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiSortDescending, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiSortAscending, { className: "h-3 w-3" })
+      }
+    ),
+    enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onFilterClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: filterTitle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiFilter, { className: "h-3 w-3" })
+      }
+    ),
+    enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onHighlightClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: highlightTitle,
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiFillHighlight, { className: "h-3 w-3" })
+      }
+    ),
+    enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onPinClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: isPinned ? pinnedTitle : unpinnedTitle,
+        children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
+      }
+    ),
+    enableDuplicateCheck && onDuplicateCheckClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: (e) => {
+          e.stopPropagation();
+          onDuplicateCheckClick();
+        },
+        className: cn(
+          "p-0.5 hover:bg-gray-200 rounded transition-opacity",
+          hasDuplicateCheck ? "text-purple-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
+        ),
+        title: "Check duplicates",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiExclamation, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+ColumnHeaderActions.displayName = "ColumnHeaderActions";
+
+// src/components/SpreadsheetHeader.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var cellPaddingCompact2 = "px-1.5 py-1";
+var cellPaddingNormal2 = "px-2 py-2";
+var SpreadsheetHeader = ({
+  column,
+  sortConfig,
+  hasActiveFilter = false,
+  isPinned = false,
+  pinSide,
+  leftOffset = 0,
+  rightOffset = 0,
+  highlightColor,
+  compactMode = false,
+  onClick,
+  pinnedZIndex,
+  onSortClick,
+  onFilterClick,
+  onPinClick,
+  onHighlightClick,
+  hasDuplicateCheck = false,
+  onDuplicateCheckClick,
+  duplicateCount,
+  resizeHandleProps,
+  resolvedWidth,
+  topOffset = 0,
+  className,
+  children
 }) => {
+  const thRef = (0, import_react7.useRef)(null);
   const isSorted = sortConfig?.columnId === column.id;
   const sortDirection = isSorted ? sortConfig.direction : null;
   const cellPadding = compactMode ? cellPaddingCompact2 : cellPaddingNormal2;
@@ -1616,46 +1993,55 @@ var SpreadsheetHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "th",
     {
-      onClick: column.sortable ? onClick : void 0,
+      ref: thRef,
+      "data-column-id": column.id,
+      onClick,
       className: cn(
-        "border border-gray-200 font-semibold text-gray-700 sticky group",
-        compactMode ? "text-[10px]" : "text-xs",
+        "border border-gray-200 font-semibold text-gray-700 group relative cursor-pointer",
+        isPinned && "sticky",
+        compactMode ? "text-xs" : "text-sm",
         cellPadding,
         column.align === "right" && "text-right",
         column.align === "center" && "text-center",
-        column.sortable && "cursor-pointer hover:bg-gray-100",
-        isPinned ? "z-30" : "z-20",
+        "hover:bg-gray-100",
+        !isPinned && "z-20",
         className
       ),
       style: {
         backgroundColor: highlightColor || "rgb(243 244 246)",
         // gray-100
-        minWidth: column.minWidth || column.width,
-        // Pinned columns must have a fixed width so sticky offsets stay correct.
-        // Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
-        ...isPinned && {
-          width: Math.max(
-            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-            MIN_PINNED_COLUMN_WIDTH
-          ),
-          maxWidth: Math.max(
-            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
-            MIN_PINNED_COLUMN_WIDTH
-          )
+        // Always set explicit width to prevent layout shift on selection/re-render
+        ...resolvedWidth ? {
+          width: resolvedWidth,
+          minWidth: resolvedWidth
+        } : {
+          width: column.width || column.minWidth,
+          minWidth: column.minWidth || column.width
         },
-        top: 0,
-        // For sticky header
+        ...isPinned && pinnedZIndex !== void 0 && { zIndex: pinnedZIndex + 10 },
+        // +10 so headers are above cells
         ...positionStyles
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex-1 flex items-center gap-1", children: [
             column.label,
-            isSorted && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronDown, { className: "h-3 w-3" }) })
+            isSorted && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronDown, { className: "h-3 w-3" }) }),
+            hasDuplicateCheck && duplicateCount != null && duplicateCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "span",
+              {
+                className: "inline-flex items-center px-1 py-0.5 rounded-full bg-red-100 text-red-600 text-[10px] font-medium leading-none",
+                title: `${duplicateCount} duplicate values found`,
+                children: duplicateCount
+              }
+            )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ColumnHeaderActions,
             {
+              enableSorting: column.sortable,
+              sortDirection: isSorted ? sortDirection : null,
+              onSortClick,
               enableFiltering: column.filterable,
               enableHighlighting: column.highlightable !== false && !!onHighlightClick,
               enablePinning: column.pinnable !== false,
@@ -1664,21 +2050,249 @@ var SpreadsheetHeader = ({
               isPinned,
               onFilterClick,
               onHighlightClick,
-              onPinClick
+              onPinClick,
+              resolvedWidth,
+              enableDuplicateCheck: true,
+              hasDuplicateCheck,
+              onDuplicateCheckClick
             }
           )
         ] }),
-        children
+        children && import_react7.default.Children.map(
+          children,
+          (child) => import_react7.default.isValidElement(child) ? import_react7.default.cloneElement(child, { triggerRef: thRef }) : child
+        ),
+        resizeHandleProps && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "div",
+          {
+            onMouseDown: resizeHandleProps.onMouseDown,
+            style: resizeHandleProps.style,
+            className: resizeHandleProps.className
+          }
+        )
       ]
     }
   );
 };
 SpreadsheetHeader.displayName = "SpreadsheetHeader";
+var MemoizedSpreadsheetHeader = (0, import_react7.memo)(SpreadsheetHeader, (prevProps, nextProps) => {
+  if (prevProps.column.id !== nextProps.column.id) return false;
+  if (prevProps.sortConfig?.columnId !== nextProps.sortConfig?.columnId) return false;
+  if (prevProps.sortConfig?.direction !== nextProps.sortConfig?.direction) return false;
+  if (prevProps.hasActiveFilter !== nextProps.hasActiveFilter) return false;
+  if (prevProps.isPinned !== nextProps.isPinned) return false;
+  if (prevProps.pinSide !== nextProps.pinSide) return false;
+  if (prevProps.leftOffset !== nextProps.leftOffset) return false;
+  if (prevProps.rightOffset !== nextProps.rightOffset) return false;
+  if (prevProps.highlightColor !== nextProps.highlightColor) return false;
+  if (prevProps.compactMode !== nextProps.compactMode) return false;
+  if (prevProps.pinnedZIndex !== nextProps.pinnedZIndex) return false;
+  if (prevProps.resolvedWidth !== nextProps.resolvedWidth) return false;
+  if (prevProps.topOffset !== nextProps.topOffset) return false;
+  if (prevProps.hasDuplicateCheck !== nextProps.hasDuplicateCheck) return false;
+  if (prevProps.duplicateCount !== nextProps.duplicateCount) return false;
+  if (prevProps.children !== nextProps.children) return false;
+  return true;
+});
+MemoizedSpreadsheetHeader.displayName = "MemoizedSpreadsheetHeader";
+
+// src/hooks/useSpreadsheetPinning.ts
+var import_react8 = require("react");
+var ROW_INDEX_COLUMN_ID = "__row_index__";
+var ROW_INDEX_COLUMN_WIDTH = 90;
+function useSpreadsheetPinning({
+  columns,
+  columnGroups,
+  showRowIndex = true,
+  defaultPinnedColumns = [],
+  defaultPinnedRightColumns = [],
+  getColumnWidth
+}) {
+  const [pinnedColumns, setPinnedColumns] = (0, import_react8.useState)(() => {
+    const map = /* @__PURE__ */ new Map();
+    if (showRowIndex) {
+      map.set(ROW_INDEX_COLUMN_ID, "left");
+    }
+    const midpoint = Math.floor(columns.length / 2);
+    defaultPinnedColumns.forEach((col) => {
+      if (col === ROW_INDEX_COLUMN_ID) return;
+      const colIndex = columns.findIndex((c) => c.id === col);
+      map.set(col, colIndex >= 0 && colIndex <= midpoint ? "left" : "right");
+    });
+    defaultPinnedRightColumns.forEach((col) => map.set(col, "right"));
+    return map;
+  });
+  const [collapsedGroups, setCollapsedGroups] = (0, import_react8.useState)(/* @__PURE__ */ new Set());
+  const measuredWidthsRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
+  const tableElRef = (0, import_react8.useRef)(null);
+  const [measureVersion, setMeasureVersion] = (0, import_react8.useState)(0);
+  const measureColumnWidths = (0, import_react8.useCallback)(() => {
+    const el = tableElRef.current;
+    if (!el) return;
+    const newMap = /* @__PURE__ */ new Map();
+    const headers = el.querySelectorAll("th[data-column-id]");
+    headers.forEach((th) => {
+      const colId = th.getAttribute("data-column-id");
+      if (colId) {
+        newMap.set(colId, th.offsetWidth);
+      }
+    });
+    const rowIndexTd = el.querySelector('td[data-column-id="__row_index__"]');
+    if (rowIndexTd) {
+      newMap.set(ROW_INDEX_COLUMN_ID, rowIndexTd.offsetWidth);
+    }
+    measuredWidthsRef.current = newMap;
+    setMeasureVersion((v) => v + 1);
+  }, []);
+  const measureRef = (0, import_react8.useCallback)((el) => {
+    tableElRef.current = el;
+  }, []);
+  const isRowIndexPinned = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+  const handleTogglePin = (0, import_react8.useCallback)(
+    (columnId) => {
+      setPinnedColumns((prev) => {
+        const newMap = new Map(prev);
+        if (newMap.has(columnId)) {
+          newMap.delete(columnId);
+        } else {
+          if (columnId === ROW_INDEX_COLUMN_ID) {
+            newMap.set(columnId, "left");
+          } else {
+            const colIndex = columns.findIndex((c) => c.id === columnId);
+            const midpoint = Math.floor(columns.length / 2);
+            newMap.set(columnId, colIndex <= midpoint ? "left" : "right");
+          }
+        }
+        return newMap;
+      });
+    },
+    [columns]
+  );
+  const setPinnedColumnsFromIds = (0, import_react8.useCallback)((columnIds) => {
+    const map = /* @__PURE__ */ new Map();
+    if (showRowIndex) {
+      map.set(ROW_INDEX_COLUMN_ID, "left");
+    }
+    const midpoint = Math.floor(columns.length / 2);
+    columnIds.forEach((col) => {
+      if (col !== ROW_INDEX_COLUMN_ID) {
+        const colIndex = columns.findIndex((c) => c.id === col);
+        map.set(col, colIndex >= 0 && colIndex <= midpoint ? "left" : "right");
+      }
+    });
+    setPinnedColumns(map);
+  }, [showRowIndex, columns]);
+  const handleToggleGroupCollapse = (0, import_react8.useCallback)((groupId) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupId)) {
+        newSet.delete(groupId);
+      } else {
+        newSet.add(groupId);
+      }
+      return newSet;
+    });
+  }, []);
+  const visibleColumns = (0, import_react8.useMemo)(() => {
+    if (!columns || !Array.isArray(columns) || columns.length === 0) return [];
+    let result = [...columns];
+    if (columnGroups && Array.isArray(columnGroups)) {
+      result = result.filter((column) => {
+        const group = columnGroups.find((g) => g.columns.includes(column.id));
+        if (!group) return true;
+        if (!collapsedGroups.has(group.id)) return true;
+        return pinnedColumns.has(column.id);
+      });
+    }
+    return result;
+  }, [columns, columnGroups, collapsedGroups, pinnedColumns]);
+  (0, import_react8.useEffect)(() => {
+    requestAnimationFrame(() => measureColumnWidths());
+  }, [measureColumnWidths, visibleColumns, pinnedColumns]);
+  const widthMap = (0, import_react8.useMemo)(() => {
+    void measureVersion;
+    const map = /* @__PURE__ */ new Map();
+    for (const col of columns) {
+      const measured = measuredWidthsRef.current.get(col.id);
+      if (measured) {
+        map.set(col.id, measured);
+        continue;
+      }
+      const resized = getColumnWidth?.(col.id);
+      if (resized) {
+        map.set(col.id, resized);
+        continue;
+      }
+      map.set(col.id, col.width || col.minWidth || 100);
+    }
+    const measuredRI = measuredWidthsRef.current.get(ROW_INDEX_COLUMN_ID);
+    map.set(ROW_INDEX_COLUMN_ID, measuredRI || ROW_INDEX_COLUMN_WIDTH);
+    return map;
+  }, [columns, getColumnWidth, measureVersion]);
+  const { leftOffsets, rightOffsets, zIndices } = (0, import_react8.useMemo)(() => {
+    const leftOffsets2 = /* @__PURE__ */ new Map();
+    const rightOffsets2 = /* @__PURE__ */ new Map();
+    const zIndices2 = /* @__PURE__ */ new Map();
+    leftOffsets2.set(ROW_INDEX_COLUMN_ID, 0);
+    zIndices2.set(ROW_INDEX_COLUMN_ID, 40);
+    const leftPinned = visibleColumns.filter((c) => pinnedColumns.get(c.id) === "left");
+    const rightPinned = visibleColumns.filter((c) => pinnedColumns.get(c.id) === "right");
+    const isRowIndexPinnedNow = pinnedColumns.has(ROW_INDEX_COLUMN_ID);
+    let leftOffset = showRowIndex && isRowIndexPinnedNow ? widthMap.get(ROW_INDEX_COLUMN_ID) || ROW_INDEX_COLUMN_WIDTH : 0;
+    for (let i = 0; i < leftPinned.length; i++) {
+      leftOffsets2.set(leftPinned[i].id, leftOffset);
+      zIndices2.set(leftPinned[i].id, 20 + (leftPinned.length - i));
+      leftOffset += widthMap.get(leftPinned[i].id) || 100;
+    }
+    let rightOffset = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      rightOffsets2.set(rightPinned[i].id, rightOffset);
+      zIndices2.set(rightPinned[i].id, 20 + (rightPinned.length - i));
+      rightOffset += widthMap.get(rightPinned[i].id) || 100;
+    }
+    return { leftOffsets: leftOffsets2, rightOffsets: rightOffsets2, zIndices: zIndices2 };
+  }, [pinnedColumns, visibleColumns, showRowIndex, widthMap]);
+  const getColumnLeftOffset = (0, import_react8.useCallback)(
+    (columnId) => leftOffsets.get(columnId) ?? 0,
+    [leftOffsets]
+  );
+  const getColumnRightOffset = (0, import_react8.useCallback)(
+    (columnId) => rightOffsets.get(columnId) ?? 0,
+    [rightOffsets]
+  );
+  const isColumnPinned = (0, import_react8.useCallback)(
+    (columnId) => pinnedColumns.has(columnId),
+    [pinnedColumns]
+  );
+  const getColumnPinSide = (0, import_react8.useCallback)(
+    (columnId) => pinnedColumns.get(columnId),
+    [pinnedColumns]
+  );
+  const getPinnedZIndex = (0, import_react8.useCallback)(
+    (columnId) => zIndices.get(columnId) ?? 0,
+    [zIndices]
+  );
+  return {
+    pinnedColumns,
+    isRowIndexPinned,
+    collapsedGroups,
+    visibleColumns,
+    handleTogglePin,
+    handleToggleGroupCollapse,
+    setPinnedColumnsFromIds,
+    getColumnLeftOffset,
+    getColumnRightOffset,
+    isColumnPinned,
+    getColumnPinSide,
+    getPinnedZIndex,
+    measureRef
+  };
+}
 
 // src/components/RowIndexColumnHeader.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var cellPaddingCompact3 = "px-1 py-0.5";
-var cellPaddingNormal3 = "px-2 py-1.5";
+var cellPaddingCompact3 = "px-1.5 py-1";
+var cellPaddingNormal3 = "px-2 py-2";
 function RowIndexColumnHeader({
   enableHighlighting = false,
   highlightColor,
@@ -1695,18 +2309,16 @@ function RowIndexColumnHeader({
       "th",
       {
         className: cn(
-          "border border-gray-200 text-center font-bold text-gray-700",
-          compactMode ? "text-[10px]" : "text-xs",
+          "border border-gray-200 text-center font-bold text-gray-700 sticky",
+          compactMode ? "text-xs" : "text-sm",
           cellPadding,
-          isPinned ? "z-30" : "z-20",
           className
         ),
         style: {
           minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
           width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-          // Only sticky horizontally if pinned, NOT vertically
-          position: isPinned ? "sticky" : void 0,
-          left: isPinned ? 0 : void 0,
+          left: 0,
+          zIndex: 50,
           backgroundColor: highlightColor || "rgb(243 244 246)"
         }
       }
@@ -1716,18 +2328,16 @@ function RowIndexColumnHeader({
     "th",
     {
       className: cn(
-        "border border-gray-200 text-center font-bold text-gray-700 group",
-        compactMode ? "text-[10px]" : "text-xs",
+        "border border-gray-200 text-center font-bold text-gray-700 group sticky",
+        compactMode ? "text-xs" : "text-sm",
         cellPadding,
-        isPinned ? "z-30" : "z-20",
         className
       ),
       style: {
         minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
         width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-        position: "sticky",
-        top: 0,
-        left: isPinned ? 0 : void 0,
+        left: 0,
+        zIndex: 50,
         backgroundColor: highlightColor || "rgb(243 244 246)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
@@ -1752,231 +2362,104 @@ function RowIndexColumnHeader({
 }
 RowIndexColumnHeader.displayName = "RowIndexColumnHeader";
 
-// src/hooks/useSpreadsheetHighlighting.ts
-var import_react7 = require("react");
-var HIGHLIGHT_COLORS = {
-  // Darker colors for rows (more visible)
-  row: [
-    "#fef08a",
-    // yellow
-    "#bbf7d0",
-    // green
-    "#bfdbfe",
-    // blue
-    "#fecaca",
-    // red
-    "#e9d5ff",
-    // purple
-    "#fed7aa",
-    // orange
-    "#a5f3fc",
-    // cyan
-    "#fce7f3",
-    // pink
-    "#d1d5db"
-    // gray
-  ],
-  // Lighter colors for columns/headers (subtle background)
-  column: [
-    "#fef9c3",
-    // yellow-100
-    "#dcfce7",
-    // green-100
-    "#dbeafe",
-    // blue-100
-    "#fee2e2",
-    // red-100
-    "#f3e8ff",
-    // purple-100
-    "#ffedd5",
-    // orange-100
-    "#cffafe",
-    // cyan-100
-    "#fce7f3",
-    // pink-100
-    "#e5e7eb"
-    // gray-200
-  ]
-};
-function useSpreadsheetHighlighting({
-  externalRowHighlights,
-  onRowHighlight,
-  externalColumnHighlights,
-  onColumnHighlight,
-  externalCellHighlights,
-  onCellHighlight
-} = {}) {
-  const [cellHighlightsInternal, setCellHighlightsInternal] = (0, import_react7.useState)([]);
-  const [rowHighlightsInternal, setRowHighlightsInternal] = (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;
-    },
-    [cellHighlights]
-  );
-  const handleCellHighlightToggle = (0, import_react7.useCallback)(
-    (rowId, columnId, color = "#fef08a") => {
-      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
-            );
-          }
-          if (color) {
-            return [...prev, { rowId, columnId, color }];
-          }
-          return prev;
-        });
-      }
-      setHighlightPickerCell(null);
-    },
-    [onCellHighlight]
-  );
-  const getRowHighlight = (0, import_react7.useCallback)(
-    (rowId) => {
-      return rowHighlights.find((h) => h.rowId === rowId && !h.columnId);
-    },
-    [rowHighlights]
-  );
-  const handleRowHighlightToggle = (0, import_react7.useCallback)(
-    (rowId, color) => {
-      if (onRowHighlight) {
-        onRowHighlight(rowId, color);
-      } else {
-        setRowHighlightsInternal((prev) => {
-          const existing = prev.find((h) => h.rowId === rowId && !h.columnId);
-          if (existing) {
-            if (color === null) {
-              return prev.filter((h) => !(h.rowId === rowId && !h.columnId));
-            }
-            return prev.map(
-              (h) => h.rowId === rowId && !h.columnId ? { ...h, color } : h
-            );
-          }
-          if (color) {
-            return [...prev, { rowId, color }];
-          }
-          return prev;
-        });
-      }
-      setHighlightPickerRow(null);
-    },
-    [onRowHighlight]
-  );
-  const getColumnHighlight = (0, import_react7.useCallback)(
-    (columnId) => {
-      return columnHighlights[columnId];
-    },
-    [columnHighlights]
-  );
-  const handleColumnHighlightToggle = (0, import_react7.useCallback)(
-    (columnId, color) => {
-      if (onColumnHighlight) {
-        onColumnHighlight(columnId, color);
-      } else {
-        setColumnHighlightsInternal((prev) => {
-          const newHighlights = { ...prev };
-          if (color === null) {
-            delete newHighlights[columnId];
-          } else {
-            newHighlights[columnId] = color;
-          }
-          return newHighlights;
-        });
-      }
-      setHighlightPickerColumn(null);
-    },
-    [onColumnHighlight]
-  );
-  const clearAllHighlights = (0, import_react7.useCallback)(() => {
-    setCellHighlightsInternal([]);
-    setRowHighlightsInternal([]);
-    setColumnHighlightsInternal({});
-  }, []);
-  return {
-    // Cell highlights
-    cellHighlights,
-    getCellHighlight,
-    handleCellHighlightToggle,
-    // Row highlights
-    rowHighlights,
-    getRowHighlight,
-    handleRowHighlightToggle,
-    // Column highlights
-    columnHighlights,
-    getColumnHighlight,
-    handleColumnHighlightToggle,
-    // Picker state
-    highlightPickerRow,
-    setHighlightPickerRow,
-    highlightPickerColumn,
-    setHighlightPickerColumn,
-    highlightPickerCell,
-    setHighlightPickerCell,
-    // Utility
-    clearAllHighlights
-  };
-}
-
 // src/components/ColorPickerPopover.tsx
+var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function ColorPickerPopover({
   title,
-  paletteType = "column",
-  colors,
+  recentColors = [],
   onSelectColor,
   onClose,
   className
 }) {
-  const colorPalette = colors ?? [...HIGHLIGHT_COLORS[paletteType], null];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-sm font-semibold mb-3", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: () => onSelectColor(color),
-        className: cn(
-          "w-8 h-8 rounded border-2 transition-transform hover:scale-110",
-          color ? "border-gray-300" : "border-gray-300 bg-white flex items-center justify-center text-gray-400 text-xs"
-        ),
-        style: color ? { backgroundColor: color } : void 0,
-        title: color || "Clear highlight",
-        children: !color && "\u2715"
-      },
-      color || "clear"
-    )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onClose,
-        className: "px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded transition-colors",
-        children: "Cancel"
-      }
-    ) })
-  ] }) });
+  const [selectedColor, setSelectedColor] = (0, import_react9.useState)("#fef08a");
+  const colorInputRef = (0, import_react9.useRef)(null);
+  const handleConfirm = () => {
+    onSelectColor(selectedColor);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: cn("bg-white rounded-lg shadow-xl p-4 w-72", className),
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-sm font-semibold mb-3", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3 mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ref: colorInputRef,
+              type: "color",
+              value: selectedColor,
+              onChange: (e) => setSelectedColor(e.target.value),
+              className: "w-10 h-10 rounded border border-gray-200 cursor-pointer p-0.5"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              "div",
+              {
+                className: "w-full h-8 rounded border border-gray-200",
+                style: { backgroundColor: selectedColor }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-gray-500 mt-1 block", children: selectedColor })
+          ] })
+        ] }),
+        recentColors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-xs text-gray-500 mb-1.5 block", children: "Recent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex gap-1.5", children: recentColors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => setSelectedColor(color),
+              className: cn(
+                "w-7 h-7 rounded border-2 transition-transform hover:scale-110",
+                selectedColor === color ? "border-blue-500" : "border-gray-200 hover:border-gray-400"
+              ),
+              style: { backgroundColor: color },
+              title: color
+            },
+            color
+          )) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2 pt-2 border-t border-gray-100", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: handleConfirm,
+              className: "flex-1 px-2.5 py-1.5 text-xs text-white bg-blue-600 hover:bg-blue-700 rounded transition-colors font-medium",
+              children: "Apply"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onSelectColor(null),
+              className: "px-2.5 py-1.5 text-xs text-red-600 hover:bg-red-50 rounded border border-red-200 transition-colors",
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "px-2.5 py-1.5 text-xs text-gray-600 hover:bg-gray-100 rounded transition-colors",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
 }
 ColorPickerPopover.displayName = "ColorPickerPopover";
 
 // src/components/SpreadsheetSettingsModal.tsx
-var import_react8 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_SETTINGS = {
   defaultPinnedColumns: [],
@@ -1995,9 +2478,9 @@ var SpreadsheetSettingsModal = ({
   title = "Spreadsheet Settings",
   pageSizeOptions = [25, 50, 100, 200]
 }) => {
-  const [activeTab, setActiveTab] = (0, import_react8.useState)("columns");
-  const [localSettings, setLocalSettings] = (0, import_react8.useState)(settings);
-  (0, import_react8.useEffect)(() => {
+  const [activeTab, setActiveTab] = (0, import_react10.useState)("columns");
+  const [localSettings, setLocalSettings] = (0, import_react10.useState)(settings);
+  (0, import_react10.useEffect)(() => {
     setLocalSettings(settings);
   }, [settings]);
   if (!isOpen) return null;
@@ -2305,11 +2788,11 @@ var SpreadsheetSettingsModal = ({
 SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 
 // src/components/CommentModals.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
-  const [commentText, setCommentText] = (0, import_react9.useState)("");
-  (0, import_react9.useEffect)(() => {
+  const [commentText, setCommentText] = (0, import_react11.useState)("");
+  (0, import_react11.useEffect)(() => {
     if (!isOpen) {
       setCommentText("");
     }
@@ -2479,7 +2962,7 @@ function DeleteConfirmationModal({
 DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
 
 // src/components/KeyboardShortcutsModal.tsx
-var import_react10 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var import_jsx_runtime11 = require("react/jsx-runtime");
 function KeyboardShortcutsModal({
   isOpen,
@@ -2521,7 +3004,7 @@ function ShortcutSection({ title, children }) {
 function ShortcutRow({ label, keys }) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-600 text-sm", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react10.default.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react12.default.Fragment, { children: [
       index > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-400", children: "+" }),
       key.includes("Click") ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
     ] }, index)) })
@@ -2530,7 +3013,7 @@ function ShortcutRow({ label, keys }) {
 KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 
 // src/components/RowContextMenu.tsx
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_design_system = require("@xcelsior/design-system");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function RowContextMenu({
@@ -2540,7 +3023,7 @@ function RowContextMenu({
   compactMode = false,
   className
 }) {
-  const visibleItems = (0, import_react11.useMemo)(() => {
+  const visibleItems = (0, import_react13.useMemo)(() => {
     return items.filter((item) => !item.visible || item.visible(row));
   }, [items, row]);
   if (visibleItems.length === 0) {
@@ -2596,7 +3079,7 @@ RowContextMenu.displayName = "RowContextMenu";
 var import_design_system2 = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_utils11 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
@@ -2606,18 +3089,20 @@ function useSpreadsheetFiltering({
   serverSide = false,
   controlledFilters,
   controlledSortConfig,
-  defaultSortConfig
+  defaultSortConfig,
+  duplicateRowIds,
+  getRowId
 }) {
-  const [internalFilters, setInternalFilters] = (0, import_react12.useState)(
+  const [internalFilters, setInternalFilters] = (0, import_react14.useState)(
     {}
   );
-  const [internalSortConfig, setInternalSortConfig] = (0, import_react12.useState)(
+  const [internalSortConfig, setInternalSortConfig] = (0, import_react14.useState)(
     defaultSortConfig ?? null
   );
-  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react12.useState)(null);
+  const [activeFilterColumn, setActiveFilterColumn] = (0, import_react14.useState)(null);
   const filters = controlledFilters ?? internalFilters;
   const sortConfig = controlledSortConfig !== void 0 ? controlledSortConfig : internalSortConfig;
-  const applyTextCondition = (0, import_react12.useCallback)(
+  const applyTextCondition = (0, import_react14.useCallback)(
     (value, condition) => {
       const strValue = String(value ?? "").toLowerCase();
       const filterValue = (condition.value ?? "").toLowerCase();
@@ -2644,7 +3129,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyNumberCondition = (0, import_react12.useCallback)(
+  const applyNumberCondition = (0, import_react14.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2673,7 +3158,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const applyDateCondition = (0, import_react12.useCallback)(
+  const applyDateCondition = (0, import_react14.useCallback)(
     (value, condition) => {
       if (condition.operator === "isEmpty") return isBlankValue(value);
       if (condition.operator === "isNotEmpty") return !isBlankValue(value);
@@ -2745,7 +3230,7 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const buildFilterPredicate = (0, import_react12.useCallback)(
+  const buildFilterPredicate = (0, import_react14.useCallback)(
     (column, filter) => {
       return (row) => {
         const value = column.getValue ? column.getValue(row) : row[column.id];
@@ -2779,7 +3264,7 @@ function useSpreadsheetFiltering({
     },
     [applyTextCondition, applyNumberCondition, applyDateCondition]
   );
-  const buildSortComparator = (0, import_react12.useCallback)(
+  const buildSortComparator = (0, import_react14.useCallback)(
     (column, direction) => {
       return (a, b) => {
         const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
@@ -2794,7 +3279,7 @@ function useSpreadsheetFiltering({
     },
     [sortConfig?.columnId]
   );
-  const filteredData = (0, import_react12.useMemo)(() => {
+  const filteredData = (0, import_react14.useMemo)(() => {
     if (!data || !Array.isArray(data)) return import_utils11.LazyArray.empty();
     if (serverSide) {
       return import_utils11.LazyArray.from(data);
@@ -2807,6 +3292,12 @@ function useSpreadsheetFiltering({
       const column = columns.find((c) => c.id === columnId);
       if (!column) continue;
       filterChain.add(buildFilterPredicate(column, filter));
+      if (filter.showDuplicatesOnly && duplicateRowIds && getRowId) {
+        const dupSet = duplicateRowIds.get(columnId);
+        if (dupSet) {
+          filterChain.add((row) => dupSet.has(getRowId(row)));
+        }
+      }
     }
     if (!filterChain.isEmpty) {
       lazyResult = filterChain.applyTo(lazyResult);
@@ -2816,8 +3307,8 @@ function useSpreadsheetFiltering({
       lazyResult = lazyResult.sort(buildSortComparator(column, sortConfig.direction));
     }
     return lazyResult;
-  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
-  const handleFilterChange = (0, import_react12.useCallback)(
+  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator, duplicateRowIds, getRowId]);
+  const handleFilterChange = (0, import_react14.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };
       if (filter) {
@@ -2832,7 +3323,7 @@ function useSpreadsheetFiltering({
     },
     [filters, onFilterChange, controlledFilters]
   );
-  const handleSort = (0, import_react12.useCallback)(
+  const handleSort = (0, import_react14.useCallback)(
     (columnId) => {
       let newSortConfig;
       if (sortConfig?.columnId === columnId) {
@@ -2851,13 +3342,13 @@ function useSpreadsheetFiltering({
     },
     [sortConfig, onSortChange, controlledSortConfig]
   );
-  const clearSort = (0, import_react12.useCallback)(() => {
+  const clearSort = (0, import_react14.useCallback)(() => {
     if (controlledSortConfig === void 0) {
       setInternalSortConfig(null);
     }
     onSortChange?.(null);
   }, [onSortChange, controlledSortConfig]);
-  const setSortConfig = (0, import_react12.useCallback)(
+  const setSortConfig = (0, import_react14.useCallback)(
     (config) => {
       if (controlledSortConfig === void 0) {
         setInternalSortConfig(config);
@@ -2866,7 +3357,7 @@ function useSpreadsheetFiltering({
     },
     [onSortChange, controlledSortConfig]
   );
-  const clearAllFilters = (0, import_react12.useCallback)(() => {
+  const clearAllFilters = (0, import_react14.useCallback)(() => {
     if (controlledFilters === void 0) {
       setInternalFilters({});
     }
@@ -2888,24 +3379,274 @@ function useSpreadsheetFiltering({
   };
 }
 
+// src/hooks/useSpreadsheetDuplicates.ts
+var import_react15 = require("react");
+function normalizeValue(value) {
+  if (value === null || value === void 0 || value === "") {
+    return "__blank__";
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  return String(value).trim().toLowerCase();
+}
+function useSpreadsheetDuplicates({
+  data,
+  columns,
+  duplicateCheckColumns,
+  getRowId
+}) {
+  const [localDuplicateCheckColumns, setLocalDuplicateCheckColumns] = (0, import_react15.useState)(
+    () => new Set(duplicateCheckColumns)
+  );
+  const duplicateCheckColumnsSet = (0, import_react15.useMemo)(() => {
+    return new Set(duplicateCheckColumns);
+  }, [duplicateCheckColumns]);
+  const { duplicateRowIds, valueCounts } = (0, import_react15.useMemo)(() => {
+    const duplicateRowIds2 = /* @__PURE__ */ new Map();
+    const valueCounts2 = /* @__PURE__ */ new Map();
+    const activeColumns = duplicateCheckColumnsSet.size > 0 ? duplicateCheckColumnsSet : localDuplicateCheckColumns;
+    for (const columnId of activeColumns) {
+      const column = columns.find((c) => c.id === columnId);
+      if (!column) continue;
+      const valueToRowIds = /* @__PURE__ */ new Map();
+      for (const row of data) {
+        const rawValue = column.getValue ? column.getValue(row) : row[columnId];
+        if (rawValue === null || rawValue === void 0 || rawValue === "") continue;
+        const normalized = normalizeValue(rawValue);
+        const rowId = getRowId(row);
+        const existing = valueToRowIds.get(normalized);
+        if (existing) {
+          existing.push(rowId);
+        } else {
+          valueToRowIds.set(normalized, [rowId]);
+        }
+      }
+      const dupSet = /* @__PURE__ */ new Set();
+      const countMap = /* @__PURE__ */ new Map();
+      for (const [normalizedVal, rowIds] of valueToRowIds) {
+        countMap.set(normalizedVal, rowIds.length);
+        if (rowIds.length >= 2) {
+          for (const rowId of rowIds) {
+            dupSet.add(rowId);
+          }
+        }
+      }
+      duplicateRowIds2.set(columnId, dupSet);
+      valueCounts2.set(columnId, countMap);
+    }
+    return { duplicateRowIds: duplicateRowIds2, valueCounts: valueCounts2 };
+  }, [data, columns, duplicateCheckColumnsSet, localDuplicateCheckColumns, getRowId]);
+  const isCellDuplicate = (0, import_react15.useCallback)(
+    (rowId, columnId) => {
+      return duplicateRowIds.get(columnId)?.has(rowId) ?? false;
+    },
+    [duplicateRowIds]
+  );
+  const getDuplicateCount = (0, import_react15.useCallback)(
+    (columnId, value) => {
+      const normalized = normalizeValue(value);
+      return valueCounts.get(columnId)?.get(normalized) ?? 0;
+    },
+    [valueCounts]
+  );
+  const getDuplicateColumnCount = (0, import_react15.useCallback)(
+    (columnId) => {
+      return duplicateRowIds.get(columnId)?.size ?? 0;
+    },
+    [duplicateRowIds]
+  );
+  const toggleDuplicateCheck = (0, import_react15.useCallback)((columnId) => {
+    setLocalDuplicateCheckColumns((prev) => {
+      const next = new Set(prev);
+      if (next.has(columnId)) {
+        next.delete(columnId);
+      } else {
+        next.add(columnId);
+      }
+      return next;
+    });
+  }, []);
+  const effectiveDuplicateCheckColumns = duplicateCheckColumnsSet.size > 0 ? duplicateCheckColumnsSet : localDuplicateCheckColumns;
+  return {
+    isCellDuplicate,
+    getDuplicateCount,
+    getDuplicateColumnCount,
+    duplicateRowIds,
+    duplicateCheckColumns: effectiveDuplicateCheckColumns,
+    toggleDuplicateCheck
+  };
+}
+
+// src/hooks/useSpreadsheetHighlighting.ts
+var import_react16 = require("react");
+function useSpreadsheetHighlighting({
+  externalRowHighlights,
+  onRowHighlight,
+  externalColumnHighlights,
+  onColumnHighlight,
+  externalCellHighlights,
+  onCellHighlight
+} = {}) {
+  const [cellHighlightsInternal, setCellHighlightsInternal] = (0, import_react16.useState)([]);
+  const [rowHighlightsInternal, setRowHighlightsInternal] = (0, import_react16.useState)([]);
+  const [columnHighlightsInternal, setColumnHighlightsInternal] = (0, import_react16.useState)({});
+  const [recentColors, setRecentColors] = (0, import_react16.useState)([]);
+  const addRecentColor = (0, import_react16.useCallback)((color) => {
+    if (!color) return;
+    setRecentColors((prev) => {
+      const filtered = prev.filter((c) => c !== color);
+      return [color, ...filtered].slice(0, 8);
+    });
+  }, []);
+  const [highlightPickerRow, setHighlightPickerRow] = (0, import_react16.useState)(null);
+  const [highlightPickerColumn, setHighlightPickerColumn] = (0, import_react16.useState)(null);
+  const [highlightPickerCell, setHighlightPickerCell] = (0, import_react16.useState)(null);
+  const cellHighlights = externalCellHighlights || cellHighlightsInternal;
+  const rowHighlights = externalRowHighlights || rowHighlightsInternal;
+  const columnHighlights = externalColumnHighlights || columnHighlightsInternal;
+  const getCellHighlight = (0, import_react16.useCallback)(
+    (rowId, columnId) => {
+      return cellHighlights.find((h) => h.rowId === rowId && h.columnId === columnId)?.color;
+    },
+    [cellHighlights]
+  );
+  const handleCellHighlightToggle = (0, import_react16.useCallback)(
+    (rowId, columnId, color = "#fef08a") => {
+      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
+            );
+          }
+          if (color) {
+            return [...prev, { rowId, columnId, color }];
+          }
+          return prev;
+        });
+      }
+      addRecentColor(color);
+      setHighlightPickerCell(null);
+    },
+    [onCellHighlight, addRecentColor]
+  );
+  const getRowHighlight = (0, import_react16.useCallback)(
+    (rowId) => {
+      return rowHighlights.find((h) => h.rowId === rowId && !h.columnId);
+    },
+    [rowHighlights]
+  );
+  const handleRowHighlightToggle = (0, import_react16.useCallback)(
+    (rowId, color) => {
+      if (onRowHighlight) {
+        onRowHighlight(rowId, color);
+      } else {
+        setRowHighlightsInternal((prev) => {
+          const existing = prev.find((h) => h.rowId === rowId && !h.columnId);
+          if (existing) {
+            if (color === null) {
+              return prev.filter((h) => !(h.rowId === rowId && !h.columnId));
+            }
+            return prev.map(
+              (h) => h.rowId === rowId && !h.columnId ? { ...h, color } : h
+            );
+          }
+          if (color) {
+            return [...prev, { rowId, color }];
+          }
+          return prev;
+        });
+      }
+      addRecentColor(color);
+      setHighlightPickerRow(null);
+    },
+    [onRowHighlight, addRecentColor]
+  );
+  const getColumnHighlight = (0, import_react16.useCallback)(
+    (columnId) => {
+      return columnHighlights[columnId];
+    },
+    [columnHighlights]
+  );
+  const handleColumnHighlightToggle = (0, import_react16.useCallback)(
+    (columnId, color) => {
+      if (onColumnHighlight) {
+        onColumnHighlight(columnId, color);
+      } else {
+        setColumnHighlightsInternal((prev) => {
+          const newHighlights = { ...prev };
+          if (color === null) {
+            delete newHighlights[columnId];
+          } else {
+            newHighlights[columnId] = color;
+          }
+          return newHighlights;
+        });
+      }
+      addRecentColor(color);
+      setHighlightPickerColumn(null);
+    },
+    [onColumnHighlight, addRecentColor]
+  );
+  const clearAllHighlights = (0, import_react16.useCallback)(() => {
+    setCellHighlightsInternal([]);
+    setRowHighlightsInternal([]);
+    setColumnHighlightsInternal({});
+  }, []);
+  return {
+    // Cell highlights
+    cellHighlights,
+    getCellHighlight,
+    handleCellHighlightToggle,
+    // Row highlights
+    rowHighlights,
+    getRowHighlight,
+    handleRowHighlightToggle,
+    // Column highlights
+    columnHighlights,
+    getColumnHighlight,
+    handleColumnHighlightToggle,
+    // Recent colors
+    recentColors,
+    // Picker state
+    highlightPickerRow,
+    setHighlightPickerRow,
+    highlightPickerColumn,
+    setHighlightPickerColumn,
+    highlightPickerCell,
+    setHighlightPickerCell,
+    // Utility
+    clearAllHighlights
+  };
+}
+
 // src/hooks/useSpreadsheetComments.ts
-var import_react13 = require("react");
+var import_react17 = require("react");
 function useSpreadsheetComments({
   externalCellComments,
   onAddCellComment,
   onToggleCommentResolved
 } = {}) {
-  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react13.useState)([]);
-  const [commentModalCell, setCommentModalCell] = (0, import_react13.useState)(null);
-  const [viewCommentsCell, setViewCommentsCell] = (0, import_react13.useState)(null);
+  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react17.useState)([]);
+  const [commentModalCell, setCommentModalCell] = (0, import_react17.useState)(null);
+  const [viewCommentsCell, setViewCommentsCell] = (0, import_react17.useState)(null);
   const cellComments = externalCellComments || cellCommentsInternal;
-  const getCellComments = (0, import_react13.useCallback)(
+  const getCellComments = (0, import_react17.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const getCellUnresolvedCommentCount = (0, import_react13.useCallback)(
+  const getCellUnresolvedCommentCount = (0, import_react17.useCallback)(
     (rowId, columnId) => {
       return cellComments.filter(
         (c) => c.rowId === rowId && c.columnId === columnId && !c.resolved
@@ -2913,13 +3654,13 @@ function useSpreadsheetComments({
     },
     [cellComments]
   );
-  const cellHasComments = (0, import_react13.useCallback)(
+  const cellHasComments = (0, import_react17.useCallback)(
     (rowId, columnId) => {
       return cellComments.some((c) => c.rowId === rowId && c.columnId === columnId);
     },
     [cellComments]
   );
-  const handleAddCellComment = (0, import_react13.useCallback)(
+  const handleAddCellComment = (0, import_react17.useCallback)(
     (rowId, columnId, text) => {
       if (!text.trim()) return;
       if (onAddCellComment) {
@@ -2941,7 +3682,7 @@ function useSpreadsheetComments({
     },
     [onAddCellComment]
   );
-  const handleToggleCommentResolved = (0, import_react13.useCallback)(
+  const handleToggleCommentResolved = (0, import_react17.useCallback)(
     (commentId) => {
       if (onToggleCommentResolved) {
         onToggleCommentResolved(commentId);
@@ -2973,20 +3714,20 @@ function useSpreadsheetComments({
 }
 
 // src/hooks/useSpreadsheetUndoRedo.ts
-var import_react14 = require("react");
+var import_react18 = require("react");
 function useSpreadsheetUndoRedo({
   enabled = true,
   maxStackSize = 50,
   autoSave = true,
   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);
+  const [undoStack, setUndoStack] = (0, import_react18.useState)([]);
+  const [redoStack, setRedoStack] = (0, import_react18.useState)([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = (0, import_react18.useState)(false);
+  const [saveStatus, setSaveStatus] = (0, import_react18.useState)("saved");
+  const onSaveRef = (0, import_react18.useRef)(onSave);
   onSaveRef.current = onSave;
-  const pushToUndoStack = (0, import_react14.useCallback)(
+  const pushToUndoStack = (0, import_react18.useCallback)(
     (snapshot) => {
       if (!enabled) return;
       setUndoStack((prev) => {
@@ -3000,7 +3741,7 @@ function useSpreadsheetUndoRedo({
     },
     [enabled, maxStackSize]
   );
-  const handleUndo = (0, import_react14.useCallback)(() => {
+  const handleUndo = (0, import_react18.useCallback)(() => {
     if (!enabled || undoStack.length === 0) return null;
     const previousSnapshot = undoStack[undoStack.length - 1];
     setUndoStack((prev) => prev.slice(0, -1));
@@ -3013,7 +3754,7 @@ function useSpreadsheetUndoRedo({
     });
     return previousSnapshot;
   }, [enabled, undoStack, maxStackSize]);
-  const handleRedo = (0, import_react14.useCallback)(() => {
+  const handleRedo = (0, import_react18.useCallback)(() => {
     if (!enabled || redoStack.length === 0) return null;
     const nextSnapshot = redoStack[redoStack.length - 1];
     setRedoStack((prev) => prev.slice(0, -1));
@@ -3026,7 +3767,7 @@ function useSpreadsheetUndoRedo({
     });
     return nextSnapshot;
   }, [enabled, redoStack, maxStackSize]);
-  const handleSave = (0, import_react14.useCallback)(async () => {
+  const handleSave = (0, import_react18.useCallback)(async () => {
     if (!hasUnsavedChanges && !autoSave) return;
     setSaveStatus("saving");
     try {
@@ -3039,7 +3780,7 @@ function useSpreadsheetUndoRedo({
       setSaveStatus("error");
     }
   }, [hasUnsavedChanges, autoSave]);
-  const markAsChanged = (0, import_react14.useCallback)(() => {
+  const markAsChanged = (0, import_react18.useCallback)(() => {
     setHasUnsavedChanges(true);
     if (autoSave) {
       setSaveStatus("saving");
@@ -3060,11 +3801,11 @@ function useSpreadsheetUndoRedo({
       setSaveStatus("unsaved");
     }
   }, [autoSave]);
-  const markAsSaved = (0, import_react14.useCallback)(() => {
+  const markAsSaved = (0, import_react18.useCallback)(() => {
     setHasUnsavedChanges(false);
     setSaveStatus("saved");
   }, []);
-  const clearStacks = (0, import_react14.useCallback)(() => {
+  const clearStacks = (0, import_react18.useCallback)(() => {
     setUndoStack([]);
     setRedoStack([]);
   }, []);
@@ -3092,7 +3833,7 @@ function useSpreadsheetUndoRedo({
 }
 
 // src/hooks/useSpreadsheetKeyboardShortcuts.ts
-var import_react15 = require("react");
+var import_react19 = require("react");
 function useSpreadsheetKeyboardShortcuts({
   onUndo,
   onRedo,
@@ -3102,15 +3843,16 @@ function useSpreadsheetKeyboardShortcuts({
   onTabNavigation,
   onCopy,
   onPaste,
+  onSelectAll,
   hasFocusedCell = false,
   isEditing = false,
   customShortcuts = [],
   enabled = true
 } = {}) {
-  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react15.useState)(false);
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = (0, import_react19.useState)(false);
   const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
   const modifierKey = isMac ? "\u2318" : "Ctrl";
-  (0, import_react15.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!enabled) return;
     const handleKeyDown = (event) => {
       if (event.key === "Escape") {
@@ -3136,6 +3878,11 @@ function useSpreadsheetKeyboardShortcuts({
         onRedo?.();
         return;
       }
+      if ((event.metaKey || event.ctrlKey) && (event.key === "a" || event.key === "A") && !isEditing) {
+        event.preventDefault();
+        onSelectAll?.();
+        return;
+      }
       if ((event.metaKey || event.ctrlKey) && event.key === "c" && !isEditing && hasFocusedCell) {
         event.preventDefault();
         onCopy?.();
@@ -3200,6 +3947,7 @@ function useSpreadsheetKeyboardShortcuts({
     onTabNavigation,
     onCopy,
     onPaste,
+    onSelectAll,
     hasFocusedCell,
     isEditing,
     customShortcuts
@@ -3217,6 +3965,7 @@ function useSpreadsheetKeyboardShortcuts({
     editing: [
       { label: "Undo", keys: [modifierKey, "Z"] },
       { label: "Redo", keys: [modifierKey, "Shift", "Z"] },
+      { label: "Select all", keys: [modifierKey, "A"] },
       { label: "Copy cells", keys: [modifierKey, "C"] },
       { label: "Paste cells", keys: [modifierKey, "V"] },
       { label: "Confirm cell edit", keys: ["Enter"] },
@@ -3251,7 +4000,7 @@ function useSpreadsheetKeyboardShortcuts({
 }
 
 // src/hooks/useSpreadsheetSelection.ts
-var import_react16 = require("react");
+var import_react20 = require("react");
 function useSpreadsheetSelection({
   data,
   columns,
@@ -3259,34 +4008,34 @@ function useSpreadsheetSelection({
   onCellRangeSelectionChange,
   enableCellEditing = true
 }) {
-  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 [focusedCell, setFocusedCell] = (0, import_react20.useState)(null);
+  const [editingCell, setEditingCell] = (0, import_react20.useState)(null);
+  const [selectedCellRange, setSelectedCellRangeState] = (0, import_react20.useState)(null);
+  const [isDragging, setIsDragging] = (0, import_react20.useState)(false);
+  const [clipboardData, setClipboardData] = (0, import_react20.useState)(null);
+  const anchorCell = (0, import_react20.useRef)(null);
+  const rowIndexMap = (0, import_react20.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     data.forEach((row, index) => {
       map.set(getRowId(row), index);
     });
     return map;
   }, [data, getRowId]);
-  const columnIndexMap = (0, import_react16.useMemo)(() => {
+  const columnIndexMap = (0, import_react20.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     columns.forEach((col, index) => {
       map.set(col.id, index);
     });
     return map;
   }, [columns]);
-  const setSelectedCellRange = (0, import_react16.useCallback)(
+  const setSelectedCellRange = (0, import_react20.useCallback)(
     (range) => {
       setSelectedCellRangeState(range);
       onCellRangeSelectionChange?.(range);
     },
     [onCellRangeSelectionChange]
   );
-  const getNormalizedRange = (0, import_react16.useCallback)(
+  const getNormalizedRange = (0, import_react20.useCallback)(
     (range) => {
       if (!range) return null;
       const startRowIdx = rowIndexMap.get(range.start.rowId);
@@ -3305,7 +4054,7 @@ function useSpreadsheetSelection({
     },
     [rowIndexMap, columnIndexMap]
   );
-  const isCellInSelection = (0, import_react16.useCallback)(
+  const isCellInSelection = (0, import_react20.useCallback)(
     (rowId, columnId) => {
       const normalizedRange = getNormalizedRange(selectedCellRange);
       if (!normalizedRange) return false;
@@ -3316,7 +4065,7 @@ function useSpreadsheetSelection({
     },
     [selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
   );
-  const getCellSelectionEdge = (0, import_react16.useCallback)(
+  const getCellSelectionEdge = (0, import_react20.useCallback)(
     (rowId, columnId) => {
       if (!isCellInSelection(rowId, columnId)) return void 0;
       const normalizedRange = getNormalizedRange(selectedCellRange);
@@ -3333,7 +4082,7 @@ function useSpreadsheetSelection({
     },
     [isCellInSelection, selectedCellRange, rowIndexMap, columnIndexMap, getNormalizedRange]
   );
-  const getSelectedCells = (0, import_react16.useCallback)(() => {
+  const getSelectedCells = (0, import_react20.useCallback)(() => {
     const normalizedRange = getNormalizedRange(selectedCellRange);
     if (!normalizedRange) {
       return focusedCell ? [focusedCell] : [];
@@ -3351,7 +4100,7 @@ function useSpreadsheetSelection({
     }
     return cells;
   }, [selectedCellRange, focusedCell, data, columns, getRowId, getNormalizedRange]);
-  const getSelectedCellValues = (0, import_react16.useCallback)(() => {
+  const getSelectedCellValues = (0, import_react20.useCallback)(() => {
     const cells = getSelectedCells();
     return cells.map((cell) => {
       const row = data.find((r) => getRowId(r) === cell.rowId);
@@ -3360,7 +4109,7 @@ function useSpreadsheetSelection({
       return { position: cell, value };
     });
   }, [getSelectedCells, data, columns, getRowId]);
-  const handleCellClick = (0, import_react16.useCallback)(
+  const handleCellClick = (0, import_react20.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
       const newCell = { rowId, columnId };
@@ -3374,15 +4123,12 @@ function useSpreadsheetSelection({
         anchorCell.current = newCell;
         setFocusedCell(newCell);
         setSelectedCellRange(null);
-        const column = columns.find((c) => c.id === columnId);
-        if (column?.editable && enableCellEditing) {
-          setEditingCell(newCell);
-        }
+        setEditingCell(null);
       }
     },
-    [columns, enableCellEditing, setSelectedCellRange]
+    [setSelectedCellRange]
   );
-  const handleCellMouseDown = (0, import_react16.useCallback)(
+  const handleCellMouseDown = (0, import_react20.useCallback)(
     (rowId, columnId, event) => {
       if (event.button !== 0) return;
       const newCell = { rowId, columnId };
@@ -3398,28 +4144,23 @@ function useSpreadsheetSelection({
         anchorCell.current = newCell;
         setFocusedCell(newCell);
         setSelectedCellRange(null);
-        const column = columns.find((c) => c.id === columnId);
-        if (column?.editable && enableCellEditing) {
-          setEditingCell(newCell);
-        } else {
-          setEditingCell(null);
-        }
+        setEditingCell(null);
       }
     },
-    [columns, enableCellEditing, setSelectedCellRange]
+    [setSelectedCellRange]
   );
-  const handleCellMouseEnter = (0, import_react16.useCallback)((_rowId, _columnId) => {
+  const handleCellMouseEnter = (0, import_react20.useCallback)((_rowId, _columnId) => {
   }, []);
-  const handleMouseUp = (0, import_react16.useCallback)(() => {
+  const handleMouseUp = (0, import_react20.useCallback)(() => {
     setIsDragging(false);
   }, []);
-  const clearSelection = (0, import_react16.useCallback)(() => {
+  const clearSelection = (0, import_react20.useCallback)(() => {
     setFocusedCell(null);
     setEditingCell(null);
     setSelectedCellRange(null);
     anchorCell.current = null;
   }, [setSelectedCellRange]);
-  const navigateCell = (0, import_react16.useCallback)(
+  const navigateCell = (0, import_react20.useCallback)(
     (direction, extendSelection = false) => {
       const currentCell = focusedCell;
       if (!currentCell) return;
@@ -3466,7 +4207,7 @@ function useSpreadsheetSelection({
     },
     [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
   );
-  const handleTabNavigation = (0, import_react16.useCallback)(
+  const handleTabNavigation = (0, import_react20.useCallback)(
     (shiftKey) => {
       const currentCell = focusedCell;
       if (!currentCell) return;
@@ -3507,17 +4248,17 @@ function useSpreadsheetSelection({
     },
     [focusedCell, data, columns, getRowId, rowIndexMap, columnIndexMap, setSelectedCellRange]
   );
-  const enterEditMode = (0, import_react16.useCallback)(() => {
+  const enterEditMode = (0, import_react20.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_react16.useCallback)(() => {
+  const exitEditMode = (0, import_react20.useCallback)(() => {
     setEditingCell(null);
   }, []);
-  const copySelectedCells = (0, import_react16.useCallback)(() => {
+  const copySelectedCells = (0, import_react20.useCallback)(() => {
     const normalizedRange = getNormalizedRange(selectedCellRange);
     if (!normalizedRange && !focusedCell) return;
     const startRowIdx = normalizedRange?.startRowIdx ?? rowIndexMap.get(focusedCell.rowId) ?? 0;
@@ -3566,14 +4307,14 @@ function useSpreadsheetSelection({
     rowIndexMap,
     columnIndexMap
   ]);
-  const parseClipboardText = (0, import_react16.useCallback)((text) => {
+  const parseClipboardText = (0, import_react20.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_react16.useCallback)(
+  const createEditsFromValues = (0, import_react20.useCallback)(
     (values) => {
       if (!focusedCell) return [];
       const edits = [];
@@ -3633,53 +4374,238 @@ function useSpreadsheetSelection({
       getNormalizedRange
     ]
   );
-  const pasteClipboard = (0, import_react16.useCallback)(() => {
+  const pasteClipboard = (0, import_react20.useCallback)(() => {
     if (!clipboardData?.values) return [];
     return createEditsFromValues(clipboardData.values);
   }, [clipboardData, createEditsFromValues]);
-  const pasteFromSystemClipboard = (0, import_react16.useCallback)(async () => {
+  const pasteFromSystemClipboard = (0, import_react20.useCallback)(async () => {
     if (!focusedCell) return [];
     try {
       const text = await navigator.clipboard.readText();
       if (!text) {
         return pasteClipboard();
       }
-      const values = parseClipboardText(text);
-      return createEditsFromValues(values);
-    } catch {
-      return pasteClipboard();
+      const values = parseClipboardText(text);
+      return createEditsFromValues(values);
+    } catch {
+      return pasteClipboard();
+    }
+  }, [focusedCell, pasteClipboard, parseClipboardText, createEditsFromValues]);
+  return {
+    focusedCell,
+    setFocusedCell,
+    editingCell,
+    setEditingCell,
+    selectedCellRange,
+    setSelectedCellRange,
+    isDragging,
+    handleCellClick,
+    handleCellMouseDown,
+    handleCellMouseEnter,
+    handleMouseUp,
+    isCellInSelection,
+    getCellSelectionEdge,
+    getSelectedCells,
+    getSelectedCellValues,
+    clearSelection,
+    navigateCell,
+    handleTabNavigation,
+    enterEditMode,
+    exitEditMode,
+    clipboardData,
+    copySelectedCells,
+    pasteClipboard,
+    pasteFromSystemClipboard
+  };
+}
+
+// src/hooks/useSpreadsheetSummary.ts
+var import_react21 = require("react");
+function useSpreadsheetSummary({
+  selectedCellValues,
+  columns
+}) {
+  const summary = (0, import_react21.useMemo)(() => {
+    if (selectedCellValues.length === 0) return null;
+    const numericValues = [];
+    for (const { position, value } of selectedCellValues) {
+      const column = columns.find((c) => c.id === position.columnId);
+      if (column?.type === "number" || typeof value === "number") {
+        const num = typeof value === "number" ? value : parseFloat(value);
+        if (!isNaN(num)) {
+          numericValues.push(num);
+        }
+      }
+    }
+    if (numericValues.length === 0) return null;
+    const sum = numericValues.reduce((a, b) => a + b, 0);
+    return {
+      sum: Math.round(sum * 100) / 100,
+      avg: Math.round(sum / numericValues.length * 100) / 100,
+      count: selectedCellValues.length,
+      numericCount: numericValues.length,
+      min: Math.round(Math.min(...numericValues) * 100) / 100,
+      max: Math.round(Math.max(...numericValues) * 100) / 100
+    };
+  }, [selectedCellValues, columns]);
+  return {
+    summary,
+    hasNumericValues: summary !== null
+  };
+}
+
+// src/hooks/useSpreadsheetColumnResize.ts
+var import_react22 = require("react");
+var DEFAULT_MIN_WIDTH = 40;
+function useSpreadsheetColumnResize({
+  minWidth = DEFAULT_MIN_WIDTH,
+  initialColumnWidths,
+  onColumnResize
+} = {}) {
+  const [columnWidths, setColumnWidths] = (0, import_react22.useState)(() => {
+    if (initialColumnWidths) {
+      return new Map(Object.entries(initialColumnWidths));
+    }
+    return /* @__PURE__ */ new Map();
+  });
+  const [resizingColumnId, setResizingColumnId] = (0, import_react22.useState)(null);
+  const startXRef = (0, import_react22.useRef)(0);
+  const startWidthRef = (0, import_react22.useRef)(0);
+  const rafRef = (0, import_react22.useRef)(null);
+  const getColumnWidth = (0, import_react22.useCallback)(
+    (columnId, defaultWidth) => {
+      return columnWidths.get(columnId) ?? defaultWidth;
+    },
+    [columnWidths]
+  );
+  const updateColumnDom = (0, import_react22.useCallback)((columnId, width) => {
+    const widthPx = `${width}px`;
+    const cells = document.querySelectorAll(`[data-column-id="${columnId}"]`);
+    for (let i = 0; i < cells.length; i++) {
+      const el = cells[i];
+      el.style.width = widthPx;
+      el.style.minWidth = widthPx;
+    }
+  }, []);
+  const getResizeHandleProps = (0, import_react22.useCallback)(
+    (columnId, currentWidth) => {
+      return {
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          startXRef.current = e.clientX;
+          startWidthRef.current = columnWidths.get(columnId) ?? currentWidth;
+          setResizingColumnId(columnId);
+          document.body.style.cursor = "col-resize";
+          document.body.style.userSelect = "none";
+          let latestWidth = startWidthRef.current;
+          const moveHandler = (ev) => {
+            const diff = ev.clientX - startXRef.current;
+            latestWidth = Math.max(minWidth, startWidthRef.current + diff);
+            if (rafRef.current === null) {
+              rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = null;
+                updateColumnDom(columnId, latestWidth);
+              });
+            }
+          };
+          const upHandler = () => {
+            document.removeEventListener("mousemove", moveHandler);
+            document.removeEventListener("mouseup", upHandler);
+            if (rafRef.current !== null) {
+              cancelAnimationFrame(rafRef.current);
+              rafRef.current = null;
+            }
+            setColumnWidths((prev) => {
+              const next = new Map(prev);
+              next.set(columnId, latestWidth);
+              return next;
+            });
+            onColumnResize?.(columnId, latestWidth);
+            setResizingColumnId(null);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+          };
+          document.addEventListener("mousemove", moveHandler);
+          document.addEventListener("mouseup", upHandler);
+        },
+        style: {
+          cursor: "col-resize"
+        },
+        className: "absolute top-0 right-0 w-1 h-full hover:bg-blue-400 transition-colors z-10"
+      };
+    },
+    [columnWidths, minWidth, onColumnResize, updateColumnDom]
+  );
+  return {
+    columnWidths,
+    getColumnWidth,
+    getResizeHandleProps,
+    isResizing: resizingColumnId !== null,
+    resizingColumnId
+  };
+}
+
+// src/components/SelectionSummaryBar.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function SelectionSummaryBar({
+  summary,
+  focusedCell,
+  columns,
+  data,
+  getRowId,
+  currentPage,
+  pageSize
+}) {
+  let addressDisplay = null;
+  let valueDisplay = null;
+  if (focusedCell) {
+    const column = columns.find((c) => c.id === focusedCell.columnId);
+    const rowIndex = data.findIndex((r) => getRowId(r) === focusedCell.rowId);
+    const row = rowIndex !== -1 ? data[rowIndex] : null;
+    if (column && row) {
+      const displayRowIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
+      addressDisplay = `Row ${displayRowIndex} / ${column.label}`;
+      const value = column.getValue ? column.getValue(row) : row[focusedCell.columnId];
+      if (value !== null && value !== void 0 && value !== "") {
+        valueDisplay = String(value);
+      }
     }
-  }, [focusedCell, pasteClipboard, parseClipboardText, createEditsFromValues]);
-  return {
-    focusedCell,
-    setFocusedCell,
-    editingCell,
-    setEditingCell,
-    selectedCellRange,
-    setSelectedCellRange,
-    isDragging,
-    handleCellClick,
-    handleCellMouseDown,
-    handleCellMouseEnter,
-    handleMouseUp,
-    isCellInSelection,
-    getCellSelectionEdge,
-    getSelectedCells,
-    getSelectedCellValues,
-    clearSelection,
-    navigateCell,
-    handleTabNavigation,
-    enterEditMode,
-    exitEditMode,
-    clipboardData,
-    copySelectedCells,
-    pasteClipboard,
-    pasteFromSystemClipboard
-  };
+  }
+  if (!addressDisplay && !summary) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between px-3 py-1.5 bg-gray-50 border-t border-gray-200 text-xs text-gray-600", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center gap-2 min-w-0", children: addressDisplay && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-500 bg-white px-2 py-0.5 rounded border border-gray-200 shrink-0", children: addressDisplay }),
+      valueDisplay && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-700 truncate", title: valueDisplay, children: valueDisplay })
+    ] }) }),
+    summary && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-4 shrink-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-400 mr-1", children: "Count:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-700", children: summary.numericCount })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-400 mr-1", children: "Sum:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-700", children: summary.sum.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-400 mr-1", children: "Avg:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-700", children: summary.avg.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-400 mr-1", children: "Min:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-700", children: summary.min.toLocaleString() })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-gray-400 mr-1", children: "Max:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "font-medium text-gray-700", children: summary.max.toLocaleString() })
+      ] })
+    ] })
+  ] });
 }
+SelectionSummaryBar.displayName = "SelectionSummaryBar";
 
 // src/components/Spreadsheet.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Spreadsheet({
   data,
   columns,
@@ -3725,9 +4651,11 @@ function Spreadsheet({
   pageSize: controlledPageSize,
   sortConfig: controlledSortConfig,
   onPageChange,
-  filters: controlledFilters
+  filters: controlledFilters,
+  duplicateCheckColumns: propDuplicateCheckColumns,
+  onDuplicateCheckChange
 }) {
-  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react17.useState)({
+  const [spreadsheetSettings, setSpreadsheetSettings] = (0, import_react23.useState)({
     defaultPinnedColumns: initialSettings?.defaultPinnedColumns ?? [],
     defaultSort: initialSettings?.defaultSort ?? null,
     defaultPageSize: initialSettings?.defaultPageSize ?? 25,
@@ -3735,6 +4663,32 @@ function Spreadsheet({
     autoSave: initialSettings?.autoSave ?? true,
     compactView: initialSettings?.compactView ?? false
   });
+  const {
+    isCellDuplicate,
+    toggleDuplicateCheck,
+    duplicateCheckColumns,
+    duplicateRowIds,
+    getDuplicateColumnCount
+  } = useSpreadsheetDuplicates({
+    data,
+    columns,
+    duplicateCheckColumns: propDuplicateCheckColumns ?? [],
+    getRowId
+  });
+  const handleDuplicateCheckToggle = (0, import_react23.useCallback)(
+    (columnId) => {
+      setIsProcessing(true);
+      (0, import_react23.startTransition)(() => {
+        toggleDuplicateCheck(columnId);
+        const currentCols = Array.from(duplicateCheckColumns);
+        const next = currentCols.includes(columnId) ? currentCols.filter((id) => id !== columnId) : [...currentCols, columnId];
+        onDuplicateCheckChange?.(next);
+        setIsProcessing(false);
+      });
+    },
+    [toggleDuplicateCheck, duplicateCheckColumns, onDuplicateCheckChange]
+  );
+  const [isProcessing, setIsProcessing] = (0, import_react23.useState)(false);
   const {
     filters,
     sortConfig,
@@ -3754,7 +4708,9 @@ function Spreadsheet({
     serverSide,
     controlledFilters,
     controlledSortConfig,
-    defaultSortConfig: spreadsheetSettings.defaultSort
+    defaultSortConfig: spreadsheetSettings.defaultSort,
+    duplicateRowIds,
+    getRowId
   });
   const {
     getCellHighlight,
@@ -3768,7 +4724,8 @@ function Spreadsheet({
     highlightPickerColumn,
     setHighlightPickerColumn,
     highlightPickerCell,
-    setHighlightPickerCell
+    setHighlightPickerCell,
+    recentColors
   } = useSpreadsheetHighlighting({
     externalRowHighlights,
     onRowHighlight,
@@ -3777,6 +4734,15 @@ function Spreadsheet({
     externalCellHighlights,
     onCellHighlight
   });
+  const { getColumnWidth, getResizeHandleProps, isResizing, columnWidths } = useSpreadsheetColumnResize({
+    initialColumnWidths: initialSettings?.columnWidths,
+    onColumnResize: (columnId, width) => {
+      setSpreadsheetSettings((prev) => ({
+        ...prev,
+        columnWidths: { ...prev.columnWidths, [columnId]: width }
+      }));
+    }
+  });
   const {
     pinnedColumns,
     isRowIndexPinned,
@@ -3788,12 +4754,15 @@ function Spreadsheet({
     getColumnLeftOffset,
     getColumnRightOffset,
     isColumnPinned,
-    getColumnPinSide
+    getColumnPinSide,
+    getPinnedZIndex,
+    measureRef
   } = useSpreadsheetPinning({
     columns,
     columnGroups,
     defaultPinnedColumns: initialSettings?.defaultPinnedColumns,
-    defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns
+    defaultPinnedRightColumns: initialSettings?.defaultPinnedRightColumns,
+    getColumnWidth
   });
   const {
     getCellComments,
@@ -3810,8 +4779,8 @@ function Spreadsheet({
     onAddCellComment,
     onToggleCommentResolved
   });
-  const [showSettingsModal, setShowSettingsModal] = (0, import_react17.useState)(false);
-  const [showFiltersPanel, setShowFiltersPanel] = (0, import_react17.useState)(false);
+  const [showSettingsModal, setShowSettingsModal] = (0, import_react23.useState)(false);
+  const [showFiltersPanel, setShowFiltersPanel] = (0, import_react23.useState)(false);
   const {
     canUndo,
     canRedo,
@@ -3829,15 +4798,15 @@ function Spreadsheet({
     autoSave: spreadsheetSettings.autoSave,
     onSave
   });
-  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 [selectedRows, setSelectedRows] = (0, import_react23.useState)(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = (0, import_react23.useState)(null);
+  const hoveredRowRef = (0, import_react23.useRef)(null);
+  const [internalCurrentPage, setInternalCurrentPage] = (0, import_react23.useState)(1);
+  const [internalPageSize, setInternalPageSize] = (0, import_react23.useState)(spreadsheetSettings.defaultPageSize);
+  const [zoom, setZoom] = (0, import_react23.useState)(spreadsheetSettings.defaultZoom);
   const currentPage = controlledCurrentPage ?? internalCurrentPage;
   const pageSize = controlledPageSize ?? internalPageSize;
-  const handlePageChange = (0, import_react17.useCallback)(
+  const handlePageChange = (0, import_react23.useCallback)(
     (newPage) => {
       if (controlledCurrentPage === void 0) {
         setInternalCurrentPage(newPage);
@@ -3846,7 +4815,7 @@ function Spreadsheet({
     },
     [controlledCurrentPage, onPageChange, pageSize]
   );
-  const handlePageSizeChange = (0, import_react17.useCallback)(
+  const handlePageSizeChange = (0, import_react23.useCallback)(
     (newPageSize) => {
       if (controlledPageSize === void 0) {
         setInternalPageSize(newPageSize);
@@ -3858,30 +4827,43 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
-  const resetPaginationToFirstPage = (0, import_react17.useCallback)(() => {
+  const resetPaginationToFirstPage = (0, import_react23.useCallback)(() => {
     if (controlledCurrentPage === void 0) {
       setInternalCurrentPage(1);
     }
     onPageChange?.(1, pageSize);
   }, [controlledCurrentPage, onPageChange, pageSize]);
-  const handleFilterChangeWithReset = (0, import_react17.useCallback)(
+  const handleFilterChangeWithReset = (0, import_react23.useCallback)(
     (columnId, filter) => {
       handleFilterChange(columnId, filter);
       resetPaginationToFirstPage();
     },
     [handleFilterChange, resetPaginationToFirstPage]
   );
-  const clearAllFiltersWithReset = (0, import_react17.useCallback)(() => {
+  const clearAllFiltersWithReset = (0, import_react23.useCallback)(() => {
     clearAllFilters();
     resetPaginationToFirstPage();
   }, [clearAllFilters, resetPaginationToFirstPage]);
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
       defaultSort: sortConfig
     }));
   }, [sortConfig]);
-  (0, import_react17.useEffect)(() => {
+  const hasSyncedPinnedFromSettings = (0, import_react23.useRef)(false);
+  (0, import_react23.useEffect)(() => {
+    if (hasSyncedPinnedFromSettings.current) return;
+    const settingsPinned = initialSettings?.defaultPinnedColumns;
+    if (settingsPinned && settingsPinned.length > 0) {
+      const currentIds = Array.from(pinnedColumns.keys());
+      const hasAllSettingsPinned = settingsPinned.every((id) => pinnedColumns.has(id));
+      if (!hasAllSettingsPinned) {
+        setPinnedColumnsFromIds(settingsPinned);
+      }
+      hasSyncedPinnedFromSettings.current = true;
+    }
+  }, [initialSettings?.defaultPinnedColumns, pinnedColumns, setPinnedColumnsFromIds]);
+  (0, import_react23.useEffect)(() => {
     const pinnedColumnIds = Array.from(pinnedColumns.keys());
     setSpreadsheetSettings((prev) => {
       const prevIds = prev.defaultPinnedColumns;
@@ -3894,15 +4876,15 @@ function Spreadsheet({
       };
     });
   }, [pinnedColumns]);
-  const isInitialMount = (0, import_react17.useRef)(true);
-  (0, import_react17.useEffect)(() => {
+  const isInitialMount = (0, import_react23.useRef)(true);
+  (0, import_react23.useEffect)(() => {
     if (isInitialMount.current) {
       isInitialMount.current = false;
       return;
     }
     onSettingsChange?.(spreadsheetSettings);
   }, [spreadsheetSettings, onSettingsChange]);
-  const applyUndo = (0, import_react17.useCallback)(() => {
+  const applyUndo = (0, import_react23.useCallback)(() => {
     const entry = popUndoEntry();
     if (!entry || !onCellsEdit) return;
     if (entry.type === "cell-edit") {
@@ -3920,7 +4902,7 @@ function Spreadsheet({
     }
     markAsChanged();
   }, [popUndoEntry, onCellsEdit, markAsChanged]);
-  const applyRedo = (0, import_react17.useCallback)(() => {
+  const applyRedo = (0, import_react23.useCallback)(() => {
     const entry = popRedoEntry();
     if (!entry || !onCellsEdit) return;
     if (entry.type === "cell-edit") {
@@ -3936,18 +4918,23 @@ function Spreadsheet({
     }
     markAsChanged();
   }, [popRedoEntry, onCellsEdit, markAsChanged]);
-  const paginatedData = (0, import_react17.useMemo)(() => {
+  const paginatedData = (0, import_react23.useMemo)(() => {
     if (serverSide) {
-      return filteredData;
+      return filteredData.toArray();
     }
     const startIndex = (currentPage - 1) * pageSize;
     return filteredData.slice(startIndex, startIndex + pageSize);
   }, [filteredData, currentPage, pageSize, serverSide]);
   const {
     focusedCell,
+    setFocusedCell,
     editingCell,
     setEditingCell,
+    selectedCellRange,
+    setSelectedCellRange,
     handleCellMouseDown,
+    handleCellMouseEnter,
+    handleMouseUp,
     isCellInSelection,
     getCellSelectionEdge,
     clearSelection,
@@ -3955,14 +4942,20 @@ function Spreadsheet({
     handleTabNavigation,
     enterEditMode,
     copySelectedCells,
-    pasteFromSystemClipboard
+    pasteFromSystemClipboard,
+    getSelectedCellValues
   } = useSpreadsheetSelection({
     data: paginatedData,
     columns: visibleColumns,
     getRowId,
     enableCellEditing
   });
-  const handleEscapeCallback = (0, import_react17.useCallback)(() => {
+  const selectedCellValues = (0, import_react23.useMemo)(() => getSelectedCellValues(), [getSelectedCellValues]);
+  const { summary: selectionSummary, hasNumericValues } = useSpreadsheetSummary({
+    selectedCellValues,
+    columns: visibleColumns
+  });
+  const handleEscapeCallback = (0, import_react23.useCallback)(() => {
     if (commentModalCell !== null) {
       setCommentModalCell(null);
     } else if (viewCommentsCell !== null) {
@@ -3991,7 +4984,7 @@ function Spreadsheet({
     setHighlightPickerCell,
     clearSelection
   ]);
-  const handleNavigate = (0, import_react17.useCallback)(
+  const handleNavigate = (0, import_react23.useCallback)(
     (direction, event) => {
       const extendSelection = event?.shiftKey ?? false;
       navigateCell(direction, extendSelection);
@@ -4012,10 +5005,10 @@ function Spreadsheet({
     },
     [navigateCell, focusedCell]
   );
-  const handleEnterEditMode = (0, import_react17.useCallback)(() => {
+  const handleEnterEditMode = (0, import_react23.useCallback)(() => {
     enterEditMode();
   }, [enterEditMode]);
-  const handlePaste = (0, import_react17.useCallback)(async () => {
+  const handlePaste = (0, import_react23.useCallback)(async () => {
     const edits = await pasteFromSystemClipboard();
     if (edits.length > 0 && onCellsEdit) {
       if (enableUndoRedo) {
@@ -4055,26 +5048,39 @@ function Spreadsheet({
     onTabNavigation: handleTabNavigation,
     onCopy: copySelectedCells,
     onPaste: handlePaste,
+    onSelectAll: () => {
+      if (paginatedData.length > 0 && visibleColumns.length > 0) {
+        const firstRow = paginatedData[0];
+        const lastRow = paginatedData[paginatedData.length - 1];
+        const firstCol = visibleColumns[0];
+        const lastCol = visibleColumns[visibleColumns.length - 1];
+        setSelectedCellRange({
+          start: { rowId: getRowId(firstRow), columnId: firstCol.id },
+          end: { rowId: getRowId(lastRow), columnId: lastCol.id }
+        });
+        setFocusedCell({ rowId: getRowId(firstRow), columnId: firstCol.id });
+      }
+    },
     hasFocusedCell: focusedCell !== null,
     isEditing: editingCell !== null,
     enabled: true
   });
   const effectiveCompactMode = spreadsheetSettings.compactView ?? false;
   const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
-  const tableRef = (0, import_react17.useRef)(null);
+  const tableRef = (0, import_react23.useRef)(null);
   const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
   const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (!serverSide && currentPage > totalPages) {
       setInternalCurrentPage(1);
     }
   }, [totalPages, currentPage, serverSide]);
-  const afterFilteredRef = (0, import_react17.useRef)(afterFiltered);
+  const afterFilteredRef = (0, import_react23.useRef)(afterFiltered);
   afterFilteredRef.current = afterFiltered;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     afterFilteredRef.current?.(filteredData.toArray());
   }, [filteredData]);
-  const handleRowSelect = (0, import_react17.useCallback)(
+  const handleRowSelect = (0, import_react23.useCallback)(
     (rowId, event) => {
       if (!enableRowSelection) return;
       event.stopPropagation();
@@ -4123,14 +5129,23 @@ function Spreadsheet({
       onSelectionChange
     ]
   );
-  const handleCellClick = (0, import_react17.useCallback)(
+  const handleCellClick = (0, import_react23.useCallback)(
     (rowId, columnId, event) => {
       event.stopPropagation();
       handleCellMouseDown(rowId, columnId, event);
     },
     [handleCellMouseDown]
   );
-  const handleCellChange = (0, import_react17.useCallback)(
+  const handleCellDoubleClick = (0, import_react23.useCallback)(
+    (rowId, columnId) => {
+      const column = columns.find((c) => c.id === columnId);
+      if (column?.editable && enableCellEditing) {
+        setEditingCell({ rowId, columnId });
+      }
+    },
+    [columns, enableCellEditing, setEditingCell]
+  );
+  const handleCellChange = (0, import_react23.useCallback)(
     (rowId, columnId, newValue) => {
       const row = data.find((r) => getRowId(r) === rowId);
       const previousValue = row ? row[columnId] : void 0;
@@ -4153,7 +5168,7 @@ function Spreadsheet({
     },
     [data, getRowId, enableUndoRedo, onCellsEdit, pushToUndoStack, markAsChanged]
   );
-  const handleConfirmEdit = (0, import_react17.useCallback)(
+  const handleConfirmEdit = (0, import_react23.useCallback)(
     (finalValue) => {
       if (editingCell && finalValue !== void 0) {
         handleCellChange(editingCell.rowId, editingCell.columnId, finalValue);
@@ -4162,105 +5177,51 @@ function Spreadsheet({
     },
     [editingCell, handleCellChange, setEditingCell]
   );
-  const handleCancelEdit = (0, import_react17.useCallback)(() => {
+  const handleCancelEdit = (0, import_react23.useCallback)(() => {
     setEditingCell(null);
   }, [setEditingCell]);
-  const handleRowIndexHighlightClick = (0, import_react17.useCallback)(() => {
+  const handleRowIndexHighlightClick = (0, import_react23.useCallback)(() => {
     setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
   }, [setHighlightPickerColumn]);
-  const columnRenderItems = (0, import_react17.useMemo)(() => {
+  const columnRenderItems = (0, import_react23.useMemo)(() => {
     if (!columnGroups || columnGroups.length === 0) {
       return visibleColumns.map((col) => ({
         type: "column",
         column: col
       }));
     }
-    const leftPinnedItems = [];
-    const middleItems = [];
-    const rightPinnedItems = [];
+    const items = [];
+    const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
+    for (const col of visibleColumns) {
+      if (!allGroupedIds.has(col.id)) {
+        items.push({ type: "column", column: col });
+      }
+    }
     for (const group of columnGroups) {
       const isCollapsed = collapsedGroups.has(group.id);
+      const groupVisibleCols = visibleColumns.filter((c) => group.columns.includes(c.id));
       if (isCollapsed) {
-        middleItems.push({
+        items.push({
           type: "collapsed-placeholder",
           groupId: group.id,
           headerColor: group.headerColor
         });
       }
-      const groupVisibleCols = (columns || []).filter((c) => {
-        if (!group.columns.includes(c.id)) return false;
-        if (isCollapsed) return pinnedColumns.has(c.id);
-        return true;
-      });
       for (const col of groupVisibleCols) {
-        const pinSide = pinnedColumns.get(col.id);
-        if (pinSide === "left") {
-          leftPinnedItems.push({ type: "column", column: col });
-        } else if (pinSide === "right") {
-          rightPinnedItems.push({ type: "column", column: col });
-        } else {
-          middleItems.push({ type: "column", column: col });
-        }
-      }
-    }
-    const allGroupedIds = new Set(columnGroups.flatMap((g) => g.columns));
-    for (const col of visibleColumns) {
-      if (!allGroupedIds.has(col.id)) {
-        const pinSide = pinnedColumns.get(col.id);
-        if (pinSide === "left") {
-          leftPinnedItems.push({ type: "column", column: col });
-        } else if (pinSide === "right") {
-          rightPinnedItems.push({ type: "column", column: col });
-        } else {
-          middleItems.push({ type: "column", column: col });
-        }
+        items.push({ type: "column", column: col });
       }
     }
-    const pinnedLeftOrder = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
-    const pinnedRightOrder = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
-    leftPinnedItems.sort(
-      (a, b) => pinnedLeftOrder.indexOf(a.column.id) - pinnedLeftOrder.indexOf(b.column.id)
-    );
-    rightPinnedItems.sort(
-      (a, b) => pinnedRightOrder.indexOf(a.column.id) - pinnedRightOrder.indexOf(b.column.id)
-    );
-    return [...leftPinnedItems, ...middleItems, ...rightPinnedItems];
-  }, [columnGroups, collapsedGroups, columns, pinnedColumns, visibleColumns]);
-  const groupHeaderItems = (0, import_react17.useMemo)(() => {
+    return items;
+  }, [columnGroups, collapsedGroups, visibleColumns]);
+  const groupHeaderItems = (0, import_react23.useMemo)(() => {
     if (!columnGroups || columnGroups.length === 0) return null;
-    const leftPinned = [];
-    const groups = [];
-    const rightPinned = [];
+    const items = [];
     for (const group of columnGroups) {
       const isCollapsed = collapsedGroups.has(group.id);
-      const groupColumns = (columns || []).filter((c) => group.columns.includes(c.id));
-      const visibleGroupColumns = isCollapsed ? groupColumns.filter((c) => pinnedColumns.has(c.id)) : groupColumns;
-      let movedLeftCount = 0;
-      let movedRightCount = 0;
-      for (const col of visibleGroupColumns) {
-        const pinSide = pinnedColumns.get(col.id);
-        if (pinSide === "left") {
-          movedLeftCount++;
-          leftPinned.push({
-            type: "pinned-column",
-            columnId: col.id,
-            headerColor: group.headerColor,
-            pinSide: "left"
-          });
-        } else if (pinSide === "right") {
-          movedRightCount++;
-          rightPinned.push({
-            type: "pinned-column",
-            columnId: col.id,
-            headerColor: group.headerColor,
-            pinSide: "right"
-          });
-        }
-      }
-      const remainingCols = visibleGroupColumns.length - movedLeftCount - movedRightCount;
-      const colSpan = remainingCols + (isCollapsed ? 1 : 0);
+      const visibleCount = visibleColumns.filter((c) => group.columns.includes(c.id)).length;
+      const colSpan = visibleCount + (isCollapsed ? 1 : 0);
       if (colSpan > 0) {
-        groups.push({
+        items.push({
           type: "group",
           group,
           colSpan,
@@ -4268,18 +5229,10 @@ function Spreadsheet({
         });
       }
     }
-    const pinnedLeftOrder = Array.from(pinnedColumns.entries()).filter(([id, side]) => side === "left" && id !== ROW_INDEX_COLUMN_ID).map(([id]) => id);
-    const pinnedRightOrder = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").map(([id]) => id);
-    leftPinned.sort(
-      (a, b) => pinnedLeftOrder.indexOf(a.columnId) - pinnedLeftOrder.indexOf(b.columnId)
-    );
-    rightPinned.sort(
-      (a, b) => pinnedRightOrder.indexOf(a.columnId) - pinnedRightOrder.indexOf(b.columnId)
-    );
-    return [...leftPinned, ...groups, ...rightPinned];
-  }, [columnGroups, collapsedGroups, columns, pinnedColumns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
-    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return items;
+  }, [columnGroups, collapsedGroups, visibleColumns]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       SpreadsheetToolbar,
       {
         zoom,
@@ -4314,386 +5267,405 @@ function Spreadsheet({
         menuItems: toolbarMenuItems
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-      "div",
-      {
-        style: {
-          zoom: zoom / 100
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("thead", { children: [
-            columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                RowIndexColumnHeader,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: tableRef, className: cn("flex-1 overflow-auto border border-gray-200 rounded spreadsheet-scroll-container relative", isResizing && "select-none"), onMouseUp: handleMouseUp, children: [
+      isProcessing && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "spreadsheet-processing-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2 text-gray-500", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+        "Processing..."
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { ref: measureRef, className: "border-separate border-spacing-0 text-sm select-none", style: zoom !== 100 ? { zoom: zoom / 100 } : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("thead", { className: "sticky top-0", style: { zIndex: 50 }, children: [
+          columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              RowIndexColumnHeader,
+              {
+                highlightColor: rowIndexHighlightColor,
+                isPinned: isRowIndexPinned,
+                isSecondRow: true,
+                compactMode: effectiveCompactMode
+              }
+            ),
+            groupHeaderItems.map((item) => {
+              const { group, colSpan, isCollapsed } = item;
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "th",
                 {
-                  highlightColor: rowIndexHighlightColor,
-                  isPinned: isRowIndexPinned,
-                  isSecondRow: true,
-                  compactMode: effectiveCompactMode
-                }
-              ),
-              groupHeaderItems.map((item) => {
-                if (item.type === "pinned-column") {
-                  const col = columns.find((c) => c.id === item.columnId);
-                  const isPinnedLeft = item.pinSide === "left";
-                  const pinnedWidth = Math.max(
-                    col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH,
-                    MIN_PINNED_COLUMN_WIDTH
-                  );
-                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    "th",
-                    {
-                      className: cn(
-                        "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700",
-                        "z-30"
-                      ),
-                      style: {
-                        backgroundColor: item.headerColor || "rgb(243 244 246)",
-                        position: "sticky",
-                        left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
-                        right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
-                        minWidth: pinnedWidth
-                      }
-                    },
-                    `pinned-group-${item.columnId}`
-                  );
-                }
-                const { group, colSpan, isCollapsed } = item;
-                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  colSpan,
+                  className: cn(
+                    "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700",
+                    group.collapsible && "cursor-pointer hover:bg-gray-100"
+                  ),
+                  style: {
+                    backgroundColor: group.headerColor || "rgb(243 244 246)"
+                  },
+                  onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+                    group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(HiChevronDown, { className: "h-3 w-3" })),
+                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: group.label })
+                  ] })
+                },
+                group.id
+              );
+            })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              RowIndexColumnHeader,
+              {
+                enableHighlighting,
+                highlightColor: rowIndexHighlightColor,
+                isPinned: isRowIndexPinned,
+                onHighlightClick: handleRowIndexHighlightClick,
+                onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
+                compactMode: effectiveCompactMode
+              }
+            ),
+            columnRenderItems.map((item) => {
+              if (item.type === "collapsed-placeholder") {
+                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
                   "th",
                   {
-                    colSpan,
-                    className: cn(
-                      "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700",
-                      group.collapsible && "cursor-pointer hover:bg-gray-100"
-                    ),
+                    className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
                     style: {
-                      backgroundColor: group.headerColor || "rgb(243 244 246)"
+                      backgroundColor: item.headerColor || "rgb(243 244 246)",
+                      minWidth: "30px"
                     },
-                    onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
-                      group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronDown, { className: "h-3 w-3" })),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: group.label })
-                    ] })
+                    children: "..."
                   },
-                  group.id
+                  `${item.groupId}-placeholder`
                 );
-              })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                RowIndexColumnHeader,
+              }
+              const column = item.column;
+              const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
+              const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
+              return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                MemoizedSpreadsheetHeader,
                 {
-                  enableHighlighting,
-                  highlightColor: rowIndexHighlightColor,
-                  isPinned: isRowIndexPinned,
-                  onHighlightClick: handleRowIndexHighlightClick,
-                  onPinClick: () => handleTogglePin(ROW_INDEX_COLUMN_ID),
-                  compactMode: effectiveCompactMode
-                }
-              ),
-              columnRenderItems.map((item) => {
-                if (item.type === "collapsed-placeholder") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    "th",
-                    {
-                      className: "border border-gray-200 px-2 py-1 text-center text-gray-400 sticky z-20",
-                      style: {
-                        backgroundColor: item.headerColor || "rgb(243 244 246)",
-                        minWidth: "30px",
-                        top: 0
-                      },
-                      children: "..."
-                    },
-                    `${item.groupId}-placeholder`
-                  );
-                }
-                const column = item.column;
-                const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
-                const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
-                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                  SpreadsheetHeader,
-                  {
-                    column,
-                    sortConfig,
-                    hasActiveFilter: !!filters[column.id],
-                    isPinned: isColumnPinned(column.id),
-                    pinSide: getColumnPinSide(column.id),
-                    leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
-                    rightOffset: isPinnedRight ? getColumnRightOffset(column.id) : 0,
-                    highlightColor: getColumnHighlight(column.id),
-                    compactMode: effectiveCompactMode,
-                    onClick: () => handleSort(column.id),
-                    onFilterClick: () => setActiveFilterColumn(
-                      activeFilterColumn === column.id ? null : column.id
-                    ),
-                    onPinClick: () => handleTogglePin(column.id),
-                    onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
-                    children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                      SpreadsheetFilterDropdown,
-                      {
-                        column,
-                        filter: filters[column.id],
-                        onFilterChange: (filter) => handleFilterChangeWithReset(
-                          column.id,
-                          filter
-                        ),
-                        onClose: () => setActiveFilterColumn(null)
+                  column,
+                  sortConfig,
+                  hasActiveFilter: !!filters[column.id],
+                  isPinned: isColumnPinned(column.id),
+                  pinSide: getColumnPinSide(column.id),
+                  pinnedZIndex: isColumnPinned(column.id) ? getPinnedZIndex(column.id) : void 0,
+                  leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
+                  rightOffset: isPinnedRight ? getColumnRightOffset(column.id) : 0,
+                  highlightColor: getColumnHighlight(column.id),
+                  compactMode: effectiveCompactMode,
+                  onClick: () => {
+                    if (paginatedData.length > 0) {
+                      const firstRowId = getRowId(paginatedData[0]);
+                      const lastRowId = getRowId(paginatedData[paginatedData.length - 1]);
+                      const isAlreadySelected = selectedCellRange?.start.columnId === column.id && selectedCellRange?.end.columnId === column.id && selectedCellRange?.start.rowId === firstRowId && selectedCellRange?.end.rowId === lastRowId;
+                      if (isAlreadySelected) {
+                        setSelectedCellRange(null);
+                        setFocusedCell(null);
+                      } else {
+                        setSelectedCellRange({
+                          start: { rowId: firstRowId, columnId: column.id },
+                          end: { rowId: lastRowId, columnId: column.id }
+                        });
+                        setFocusedCell({ rowId: firstRowId, columnId: column.id });
                       }
-                    )
+                    }
                   },
-                  column.id
-                );
-              })
-            ] })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "td",
-            {
-              colSpan: columnRenderItems.length + 1,
-              className: "text-center py-8 text-gray-500",
-              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-            "td",
-            {
-              colSpan: columnRenderItems.length + 1,
-              className: "text-center py-8 text-gray-500",
-              children: emptyMessage
-            }
-          ) }) : paginatedData.map((row, rowIndex) => {
-            const rowId = getRowId(row);
-            const isRowSelected = selectedRows.has(rowId);
-            const isRowHovered = hoveredRow === rowId;
-            const rowHighlight = getRowHighlight(rowId);
-            const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
-            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-              "tr",
-              {
-                onMouseEnter: () => setHoveredRow(rowId),
-                onMouseLeave: () => setHoveredRow(null),
-                onClick: () => {
-                  onRowClick?.(row, rowIndex);
-                },
-                onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                    "td",
+                  onSortClick: () => handleSort(column.id),
+                  onFilterClick: () => setActiveFilterColumn(
+                    activeFilterColumn === column.id ? null : column.id
+                  ),
+                  onPinClick: () => handleTogglePin(column.id),
+                  onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
+                  resizeHandleProps: getResizeHandleProps(
+                    column.id,
+                    column.width || column.minWidth || 100
+                  ),
+                  resolvedWidth: getColumnWidth(column.id),
+                  hasDuplicateCheck: duplicateCheckColumns.has(column.id),
+                  onDuplicateCheckClick: () => handleDuplicateCheckToggle(column.id),
+                  duplicateCount: getDuplicateColumnCount(column.id),
+                  children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    SpreadsheetFilterDropdown,
                     {
-                      onClick: (e) => handleRowSelect(rowId, e),
-                      className: cn(
-                        "border border-gray-200 text-center font-semibold cursor-pointer group",
-                        effectiveCompactMode ? "text-[10px] px-1 py-px" : "text-xs px-2 py-1",
-                        isRowIndexPinned ? "z-20" : "z-0",
-                        isRowSelected && "bg-blue-100",
-                        !isRowSelected && rowHighlight && "",
-                        isRowHovered && !isRowSelected && !rowHighlight && "bg-gray-50"
+                      column,
+                      filter: filters[column.id],
+                      onFilterChange: (filter) => handleFilterChangeWithReset(
+                        column.id,
+                        filter
                       ),
-                      style: {
-                        backgroundColor: rowHighlight?.color || (isRowSelected ? "#dbeafe" : isRowHovered ? "#f9fafb" : rowIndexHighlightColor || "white"),
-                        minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                        width: `${ROW_INDEX_COLUMN_WIDTH}px`,
-                        ...isRowIndexPinned && {
-                          position: "sticky",
-                          left: 0
-                        }
-                      },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex items-center justify-center w-full h-full", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: displayIndex }),
-                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 flex items-center justify-between", children: [
-                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                            RowContextMenu,
-                            {
-                              row,
-                              rowId,
-                              items: rowContextMenuItems,
-                              compactMode: effectiveCompactMode
-                            }
-                          ),
-                          enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                setHighlightPickerRow(rowId);
-                              },
-                              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_runtime13.jsx)(
-                                AiFillHighlight,
-                                {
-                                  className: cn(
-                                    "h-2.5 w-2.5",
-                                    rowHighlight ? "text-amber-500" : "text-gray-500"
-                                  )
-                                }
-                              )
-                            }
-                          ),
-                          enableComments && (cellHasComments(
+                      onClose: () => setActiveFilterColumn(null),
+                      hasDuplicateCheck: duplicateCheckColumns.has(column.id)
+                    }
+                  )
+                },
+                column.id
+              );
+            })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "td",
+          {
+            colSpan: columnRenderItems.length + 1,
+            className: "text-center py-8 text-gray-500",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "td",
+          {
+            colSpan: columnRenderItems.length + 1,
+            className: "text-center py-8 text-gray-500",
+            children: emptyMessage
+          }
+        ) }) : paginatedData.map((row, rowIndex) => {
+          const rowId = getRowId(row);
+          const isRowSelected = selectedRows.has(rowId);
+          const rowHighlight = getRowHighlight(rowId);
+          const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
+          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+            "tr",
+            {
+              onMouseEnter: () => {
+                hoveredRowRef.current = rowId;
+              },
+              onMouseLeave: () => {
+                hoveredRowRef.current = null;
+              },
+              onClick: () => {
+                onRowClick?.(row, rowIndex);
+              },
+              onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "td",
+                  {
+                    "data-column-id": "__row_index__",
+                    onClick: (e) => handleRowSelect(rowId, e),
+                    className: cn(
+                      "border border-gray-200 text-center font-semibold cursor-pointer group",
+                      effectiveCompactMode ? "text-xs px-1.5 py-0.5" : "text-sm px-2.5 py-1.5",
+                      "sticky",
+                      isRowSelected && "bg-blue-100",
+                      !isRowSelected && rowHighlight && ""
+                    ),
+                    style: {
+                      backgroundColor: rowHighlight?.color || (isRowSelected ? "#dbeafe" : rowIndexHighlightColor || (rowIndex % 2 !== 0 ? "#f9fafb" : "white")),
+                      minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                      width: `${ROW_INDEX_COLUMN_WIDTH}px`,
+                      position: "sticky",
+                      left: 0,
+                      zIndex: 40
+                    },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative flex items-center w-full h-full", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pl-1", children: displayIndex }),
+                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "absolute inset-y-0 right-0 flex items-center gap-0.5 pr-0.5", children: [
+                        rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          RowContextMenu,
+                          {
+                            row,
                             rowId,
-                            ROW_INDEX_COLUMN_ID
-                          ) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                setViewCommentsCell({
-                                  rowId,
-                                  columnId: ROW_INDEX_COLUMN_ID
-                                });
-                              },
-                              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_runtime13.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
-                                getCellUnresolvedCommentCount(
-                                  rowId,
-                                  ROW_INDEX_COLUMN_ID
-                                ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
-                                  rowId,
-                                  ROW_INDEX_COLUMN_ID
-                                ) > 99 ? "99+" : getCellUnresolvedCommentCount(
-                                  rowId,
-                                  ROW_INDEX_COLUMN_ID
-                                ) })
-                              ]
-                            }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                            items: rowContextMenuItems,
+                            compactMode: effectiveCompactMode
+                          }
+                        ),
+                        enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              setHighlightPickerRow(rowId);
+                            },
+                            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_runtime14.jsx)(
+                              AiFillHighlight,
+                              {
+                                className: cn(
+                                  "h-2.5 w-2.5",
+                                  rowHighlight ? "text-amber-500" : "text-gray-500"
+                                )
+                              }
+                            )
+                          }
+                        ),
+                        enableComments && (cellHasComments(
+                          rowId,
+                          ROW_INDEX_COLUMN_ID
+                        ) ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              setViewCommentsCell({
+                                rowId,
+                                columnId: ROW_INDEX_COLUMN_ID
+                              });
+                            },
+                            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_runtime14.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                              getCellUnresolvedCommentCount(
+                                rowId,
+                                ROW_INDEX_COLUMN_ID
+                              ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
+                                rowId,
+                                ROW_INDEX_COLUMN_ID
+                              ) > 99 ? "99+" : getCellUnresolvedCommentCount(
+                                rowId,
+                                ROW_INDEX_COLUMN_ID
+                              ) })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              setCommentModalCell({
+                                rowId,
+                                columnId: ROW_INDEX_COLUMN_ID
+                              });
+                            },
+                            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_runtime14.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_runtime14.jsx)(
                             "button",
                             {
                               type: "button",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                setCommentModalCell({
-                                  rowId,
-                                  columnId: ROW_INDEX_COLUMN_ID
-                                });
+                                action.onClick(row, rowId);
                               },
-                              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_runtime13.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_runtime13.jsx)(
-                              "button",
-                              {
-                                type: "button",
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  action.onClick(row, rowId);
-                                },
-                                className: cn(
-                                  "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-200 rounded",
-                                  action.className
-                                ),
-                                title: action.tooltip,
-                                children: action.icon
-                              },
-                              action.id
-                            );
-                          })
-                        ] })
+                              className: cn(
+                                "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 hover:bg-gray-200 rounded",
+                                action.className
+                              ),
+                              title: action.tooltip,
+                              children: action.icon
+                            },
+                            action.id
+                          );
+                        })
                       ] })
-                    }
-                  ),
-                  columnRenderItems.map((item) => {
-                    if (item.type === "collapsed-placeholder") {
-                      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                        "td",
-                        {
-                          className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
-                          style: {
-                            backgroundColor: item.headerColor || "rgb(243 244 246)"
-                          }
-                        },
-                        `${item.groupId}-placeholder`
-                      );
-                    }
-                    const column = item.column;
-                    const value = column.getValue ? column.getValue(row) : row[column.id];
-                    const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id;
-                    const isFocused = focusedCell?.rowId === rowId && focusedCell?.columnId === column.id;
-                    const isInSelection = isCellInSelection(
-                      rowId,
-                      column.id
+                    ] })
+                  }
+                ),
+                columnRenderItems.map((item) => {
+                  if (item.type === "collapsed-placeholder") {
+                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                      "td",
+                      {
+                        className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
+                        style: {
+                          backgroundColor: item.headerColor || "rgb(243 244 246)"
+                        }
+                      },
+                      `${item.groupId}-placeholder`
                     );
-                    const selectionEdge = getCellSelectionEdge(
+                  }
+                  const column = item.column;
+                  const value = column.getValue ? column.getValue(row) : row[column.id];
+                  const isEditing = editingCell?.rowId === rowId && editingCell?.columnId === column.id;
+                  const isFocused = focusedCell?.rowId === rowId && focusedCell?.columnId === column.id;
+                  const isInSelection = isCellInSelection(
+                    rowId,
+                    column.id
+                  );
+                  const selectionEdge = getCellSelectionEdge(
+                    rowId,
+                    column.id
+                  );
+                  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_runtime14.jsx)(
+                    MemoizedSpreadsheetCell,
+                    {
+                      value,
+                      column,
+                      row,
+                      rowIndex,
                       rowId,
-                      column.id
-                    );
-                    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_runtime13.jsx)(
-                      MemoizedSpreadsheetCell,
-                      {
-                        value,
-                        column,
-                        row,
-                        rowIndex,
-                        rowId,
-                        isEditable: column.editable && enableCellEditing,
-                        isEditing,
-                        isFocused,
-                        isInSelection,
-                        selectionEdge,
-                        isRowSelected,
-                        isRowHovered,
-                        highlightColor: cellOrRowOrColumnHighlight,
-                        compactMode: effectiveCompactMode,
-                        isPinned: isColPinned,
-                        pinSide: colPinSide,
-                        leftOffset: getColumnLeftOffset(column.id),
-                        rightOffset: getColumnRightOffset(
-                          column.id
-                        ),
-                        onClick: (e) => handleCellClick(rowId, column.id, e),
-                        onConfirm: handleConfirmEdit,
-                        onCancel: handleCancelEdit,
-                        onHighlight: enableHighlighting ? () => {
-                          setHighlightPickerCell({
-                            rowId,
-                            columnId: column.id
-                          });
-                        } : void 0,
-                        hasComments: cellHasComments(
-                          rowId,
-                          column.id
-                        ),
-                        unresolvedCommentCount: getCellUnresolvedCommentCount(
-                          rowId,
-                          column.id
-                        ),
-                        onAddComment: enableComments ? () => setCommentModalCell({
-                          rowId,
-                          columnId: column.id
-                        }) : void 0,
-                        onViewComments: enableComments && cellHasComments(rowId, column.id) ? () => setViewCommentsCell({
+                      isEditable: column.editable && enableCellEditing,
+                      isEditing,
+                      isFocused,
+                      isInSelection,
+                      selectionEdge,
+                      isRowSelected,
+                      isRowHovered: false,
+                      highlightColor: cellOrRowOrColumnHighlight,
+                      isDuplicate: isCellDuplicate(rowId, column.id),
+                      compactMode: effectiveCompactMode,
+                      isOddRow: rowIndex % 2 !== 0,
+                      resolvedWidth: getColumnWidth(column.id),
+                      isPinned: isColPinned,
+                      pinSide: colPinSide,
+                      pinnedZIndex: isColPinned ? getPinnedZIndex(column.id) : void 0,
+                      leftOffset: getColumnLeftOffset(column.id),
+                      rightOffset: getColumnRightOffset(
+                        column.id
+                      ),
+                      onClick: (e) => handleCellClick(rowId, column.id, e),
+                      onDoubleClick: () => handleCellDoubleClick(rowId, column.id),
+                      onMouseEnter: () => handleCellMouseEnter(rowId, column.id),
+                      onConfirm: handleConfirmEdit,
+                      onCancel: handleCancelEdit,
+                      onHighlight: enableHighlighting ? () => {
+                        setHighlightPickerCell({
                           rowId,
                           columnId: column.id
-                        }) : void 0
-                      },
-                      column.id
-                    );
-                  })
-                ]
-              },
-              rowId
-            );
-          }) })
-        ] })
+                        });
+                      } : void 0,
+                      hasComments: cellHasComments(
+                        rowId,
+                        column.id
+                      ),
+                      unresolvedCommentCount: getCellUnresolvedCommentCount(
+                        rowId,
+                        column.id
+                      ),
+                      onAddComment: enableComments ? () => setCommentModalCell({
+                        rowId,
+                        columnId: column.id
+                      }) : void 0,
+                      onViewComments: enableComments && cellHasComments(rowId, column.id) ? () => setViewCommentsCell({
+                        rowId,
+                        columnId: column.id
+                      }) : void 0
+                    },
+                    column.id
+                  );
+                })
+              ]
+            },
+            rowId
+          );
+        }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      SelectionSummaryBar,
+      {
+        summary: selectionSummary,
+        focusedCell,
+        columns: visibleColumns,
+        data: paginatedData,
+        getRowId,
+        currentPage,
+        pageSize
       }
-    ) }),
-    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    ),
+    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       import_design_system2.Pagination,
       {
         currentPage,
@@ -4708,7 +5680,7 @@ function Spreadsheet({
         onPageSizeChange: handlePageSizeChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       AddCommentModal,
       {
         isOpen: commentModalCell !== null,
@@ -4719,7 +5691,7 @@ function Spreadsheet({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ViewCommentsModal,
       {
         isOpen: viewCommentsCell !== null,
@@ -4734,29 +5706,32 @@ function Spreadsheet({
         onClose: () => setViewCommentsCell(null)
       }
     ),
-    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Row",
         paletteType: "row",
+        recentColors,
         onSelectColor: (color) => handleRowHighlightToggle(highlightPickerRow, color),
         onClose: () => setHighlightPickerRow(null)
       }
     ),
-    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ColorPickerPopover,
       {
         title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
         paletteType: "column",
+        recentColors,
         onSelectColor: (color) => handleColumnHighlightToggle(highlightPickerColumn, color),
         onClose: () => setHighlightPickerColumn(null)
       }
     ),
-    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Cell",
         paletteType: "row",
+        recentColors,
         onSelectColor: (color) => handleCellHighlightToggle(
           highlightPickerCell.rowId,
           highlightPickerCell.columnId,
@@ -4765,7 +5740,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerCell(null)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       KeyboardShortcutsModal,
       {
         isOpen: showKeyboardShortcuts,
@@ -4773,7 +5748,7 @@ function Spreadsheet({
         shortcuts
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       SpreadsheetSettingsModal,
       {
         isOpen: showSettingsModal,
@@ -4802,12 +5777,14 @@ Spreadsheet.displayName = "Spreadsheet";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActiveFiltersDisplay,
+  MemoizedSpreadsheetHeader,
   RowContextMenu,
   Spreadsheet,
   SpreadsheetCell,
   SpreadsheetFilterDropdown,
   SpreadsheetHeader,
   SpreadsheetSettingsModal,
-  SpreadsheetToolbar
+  SpreadsheetToolbar,
+  useSpreadsheetDuplicates
 });
 //# sourceMappingURL=index.js.map