@xcelsior/ui-spreadsheets 1.0.2 → 1.0.4

package/dist/index.js

@@ -116,12 +116,6 @@ function IconBase(props) {
 }
 
 // ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/hi/index.esm.js
-function HiAnnotation(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M18 13V5a2 2 0 00-2-2H4a2 2 0 00-2 2v8a2 2 0 002 2h3l3 3 3-3h3a2 2 0 002-2zM5 7a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1zm1 3a1 1 0 100 2h3a1 1 0 100-2H6z", "clipRule": "evenodd" } }] })(props);
-}
-function HiChatAlt2(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" } }, { "tag": "path", "attr": { "d": "M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" } }] })(props);
-}
 function HiCheck(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", "clipRule": "evenodd" } }] })(props);
 }
@@ -137,9 +131,6 @@ function HiChevronUp(props) {
 function HiCog(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z", "clipRule": "evenodd" } }] })(props);
 }
-function HiColorSwatch(props) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4 2a2 2 0 00-2 2v11a3 3 0 106 0V4a2 2 0 00-2-2H4zm1 14a1 1 0 100-2 1 1 0 000 2zm5-1.757l4.9-4.9a2 2 0 000-2.828L13.485 5.1a2 2 0 00-2.828 0L10 5.757v8.486zM16 18H9.071l6-6H16a2 2 0 012 2v2a2 2 0 01-2 2z", "clipRule": "evenodd" } }] })(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);
 }
@@ -173,25 +164,29 @@ function HiZoomIn(props) {
 function HiZoomOut(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", "clipRule": "evenodd" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M5 8a1 1 0 011-1h4a1 1 0 110 2H6a1 1 0 01-1-1z", "clipRule": "evenodd" } }] })(props);
 }
-function HiOutlineAnnotation(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" } }] })(props);
-}
-function HiOutlineChatAlt(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" } }] })(props);
-}
 function HiOutlineClipboardCheck(props) {
   return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" } }] })(props);
 }
 function HiOutlineClipboardCopy(props) {
   return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" } }] })(props);
 }
-function HiOutlinePencil(props) {
-  return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" } }] })(props);
-}
 function HiOutlineQuestionMarkCircle(props) {
   return GenIcon({ "tag": "svg", "attr": { "fill": "none", "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "strokeLinecap": "round", "strokeLinejoin": "round", "d": "M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" } }] })(props);
 }
 
+// ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/ai/index.esm.js
+function AiFillHighlight(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 1024 1024" }, "child": [{ "tag": "path", "attr": { "d": "M957.6 507.4L603.2 158.2a7.9 7.9 0 0 0-11.2 0L353.3 393.4a8.03 8.03 0 0 0-.1 11.3l.1.1 40 39.4-117.2 115.3a8.03 8.03 0 0 0-.1 11.3l.1.1 39.5 38.9-189.1 187H72.1c-4.4 0-8.1 3.6-8.1 8V860c0 4.4 3.6 8 8 8h344.9c2.1 0 4.1-.8 5.6-2.3l76.1-75.6 40.4 39.8a7.9 7.9 0 0 0 11.2 0l117.1-115.6 40.1 39.5a7.9 7.9 0 0 0 11.2 0l238.7-235.2c3.4-3 3.4-8 .3-11.2z" } }] })(props);
+}
+
+// ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/fa/index.esm.js
+function FaComment(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 32C114.6 32 0 125.1 0 240c0 49.6 21.4 95 57 130.7C44.5 421.1 2.7 466 2.2 466.5c-2.2 2.3-2.8 5.7-1.5 8.7S4.8 480 8 480c66.3 0 116-31.8 140.6-51.4 32.7 12.3 69 19.4 107.4 19.4 141.4 0 256-93.1 256-208S397.4 32 256 32z" } }] })(props);
+}
+function FaRegComment(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 512 512" }, "child": [{ "tag": "path", "attr": { "d": "M256 32C114.6 32 0 125.1 0 240c0 47.6 19.9 91.2 52.9 126.3C38 405.7 7 439.1 6.5 439.5c-6.6 7-8.4 17.2-4.6 26S14.4 480 24 480c61.5 0 110-25.7 139.1-46.3C192 442.8 223.2 448 256 448c141.4 0 256-93.1 256-208S397.4 32 256 32zm0 368c-26.7 0-53.1-4.1-78.4-12.1l-22.7-7.2-19.5 13.8c-14.3 10.1-33.9 21.4-57.5 29 7.3-12.1 14.4-25.7 19.9-40.2l10.6-28.1-20.6-21.8C69.7 314.1 48 282.2 48 240c0-88.2 93.3-160 208-160s208 71.8 208 160-93.3 160-208 160z" } }] })(props);
+}
+
 // src/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -369,7 +364,7 @@ var SpreadsheetCell = ({
         minWidth: column.minWidth || column.width,
         ...positionStyles
       },
-      children: isEditing ? renderEditInput() : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1", children: [
+      children: isEditing ? renderEditInput() : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-1 relative", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
@@ -389,19 +384,19 @@ var SpreadsheetCell = ({
               e.stopPropagation();
               onViewComments?.();
             },
-            className: "p-0.5 hover:bg-gray-100 rounded relative shrink-0",
+            className: "absolute -right-1 p-0.5 hover:bg-gray-100 rounded z-10",
             title: `${unresolvedCommentCount} unresolved comment(s)`,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                HiOutlineChatAlt,
+                FaComment,
                 {
                   className: cn(
-                    "h-3 w-3",
+                    "h-2.5 w-2.5",
                     unresolvedCommentCount > 0 ? "text-amber-500" : "text-gray-400"
                   )
                 }
               ),
-              unresolvedCommentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[8px] rounded-full w-3 h-3 flex items-center justify-center", children: unresolvedCommentCount })
+              unresolvedCommentCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: unresolvedCommentCount })
             ]
           }
         ),
@@ -443,7 +438,7 @@ var SpreadsheetCell = ({
               className: "p-0.5 hover:bg-gray-100 rounded",
               title: "Highlight cell",
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                HiOutlinePencil,
+                AiFillHighlight,
                 {
                   className: cn(
                     "h-2.5 w-2.5",
@@ -463,7 +458,7 @@ var SpreadsheetCell = ({
               },
               className: "p-0.5 hover:bg-gray-100 rounded",
               title: "Add comment",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HiOutlineAnnotation, { className: "h-2.5 w-2.5 text-gray-400" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-400" })
             }
           )
         ] })
@@ -1149,7 +1144,7 @@ function ColumnHeaderActions({
               hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
             ),
             title: highlightTitle,
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiColorSwatch, { className: "h-3 w-3" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AiFillHighlight, { className: "h-3 w-3" })
           }
         ),
         enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1486,6 +1481,7 @@ function useSpreadsheetHighlighting({
   const [columnHighlights, setColumnHighlights] = (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 rowHighlights = externalRowHighlights || rowHighlightsInternal;
   const getCellHighlight = (0, import_react7.useCallback)(
     (rowId, columnId) => {
@@ -1498,10 +1494,19 @@ function useSpreadsheetHighlighting({
       setCellHighlights((prev) => {
         const existing = prev.find((h) => h.rowId === rowId && h.columnId === columnId);
         if (existing) {
-          return prev.filter((h) => !(h.rowId === rowId && h.columnId === columnId));
+          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, { rowId, columnId, color }];
+        return prev;
       });
+      setHighlightPickerCell(null);
     },
     []
   );
@@ -1577,6 +1582,8 @@ function useSpreadsheetHighlighting({
     setHighlightPickerRow,
     highlightPickerColumn,
     setHighlightPickerColumn,
+    highlightPickerCell,
+    setHighlightPickerCell,
     // Utility
     clearAllHighlights
   };
@@ -2025,13 +2032,17 @@ var import_jsx_runtime9 = require("react/jsx-runtime");
 function AddCommentModal({
   isOpen,
   commentText,
+  columnLabel,
   onCommentTextChange,
   onAdd,
   onClose
 }) {
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-lg font-semibold mb-4", children: "Add Row Comment" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: [
+      "Add Comment",
+      columnLabel ? ` - ${columnLabel}` : ""
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "textarea",
       {
@@ -2068,13 +2079,17 @@ AddCommentModal.displayName = "AddCommentModal";
 function ViewCommentsModal({
   isOpen,
   comments,
+  columnLabel,
   onToggleResolved,
   onClose
 }) {
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-lg font-semibold", children: "Row Comments" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: "text-lg font-semibold", children: [
+        "Comments",
+        columnLabel ? ` - ${columnLabel}` : ""
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
@@ -2117,7 +2132,7 @@ function ViewCommentsModal({
         },
         comment.id
       )),
-      comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this row." })
+      comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
     ] })
   ] }) });
 }
@@ -2179,6 +2194,7 @@ var import_design_system = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
 var import_react10 = require("react");
+var import_utils9 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2325,19 +2341,10 @@ function useSpreadsheetFiltering({
     },
     []
   );
-  const filteredData = (0, import_react10.useMemo)(() => {
-    if (!data || !Array.isArray(data)) return [];
-    if (serverSide) {
-      return data;
-    }
-    if (!columns || !Array.isArray(columns)) return data;
-    let result = [...data];
-    for (const [columnId, filter] of Object.entries(filters)) {
-      if (!filter) continue;
-      const column = columns.find((c) => c.id === columnId);
-      if (!column) continue;
-      result = result.filter((row) => {
-        const value = column.getValue ? column.getValue(row) : row[columnId];
+  const buildFilterPredicate = (0, import_react10.useCallback)(
+    (column, filter) => {
+      return (row) => {
+        const value = column.getValue ? column.getValue(row) : row[column.id];
         if (filter.includeBlanks && isBlankValue(value)) {
           return true;
         }
@@ -2364,32 +2371,48 @@ function useSpreadsheetFiltering({
           if (filter.max !== void 0 && numValue > Number(filter.max)) return false;
         }
         return true;
-      });
-    }
-    if (sortConfig) {
-      const column = columns.find((c) => c.id === sortConfig.columnId);
-      result.sort((a, b) => {
-        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig.columnId];
-        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig.columnId];
+      };
+    },
+    [applyTextCondition, applyNumberCondition, applyDateCondition]
+  );
+  const buildSortComparator = (0, import_react10.useCallback)(
+    (column, direction) => {
+      return (a, b) => {
+        const aValue = column?.getValue ? column.getValue(a) : a[sortConfig?.columnId];
+        const bValue = column?.getValue ? column.getValue(b) : b[sortConfig?.columnId];
         if (aValue === null || aValue === void 0) return 1;
         if (bValue === null || bValue === void 0) return -1;
         if (typeof aValue === "string" && typeof bValue === "string") {
-          return sortConfig.direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+          return direction === "asc" ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
         }
-        return sortConfig.direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
-      });
+        return direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      };
+    },
+    [sortConfig?.columnId]
+  );
+  const filteredData = (0, import_react10.useMemo)(() => {
+    if (!data || !Array.isArray(data)) return import_utils9.LazyArray.empty();
+    if (serverSide) {
+      return import_utils9.LazyArray.from(data);
     }
-    return result;
-  }, [
-    data,
-    filters,
-    sortConfig,
-    columns,
-    serverSide,
-    applyDateCondition,
-    applyNumberCondition,
-    applyTextCondition
-  ]);
+    if (!columns || !Array.isArray(columns)) return import_utils9.LazyArray.from(data);
+    let lazyResult = import_utils9.LazyArray.from(data);
+    const filterChain = new import_utils9.FilterChain();
+    for (const [columnId, filter] of Object.entries(filters)) {
+      if (!filter) continue;
+      const column = columns.find((c) => c.id === columnId);
+      if (!column) continue;
+      filterChain.add(buildFilterPredicate(column, filter));
+    }
+    if (!filterChain.isEmpty) {
+      lazyResult = filterChain.applyTo(lazyResult);
+    }
+    if (sortConfig) {
+      const column = columns.find((c) => c.id === sortConfig.columnId);
+      lazyResult = lazyResult.sort(buildSortComparator(column, sortConfig.direction));
+    }
+    return lazyResult;
+  }, [data, filters, sortConfig, columns, serverSide, buildFilterPredicate, buildSortComparator]);
   const handleFilterChange = (0, import_react10.useCallback)(
     (columnId, filter) => {
       const newFilters = { ...filters };
@@ -2407,7 +2430,16 @@ function useSpreadsheetFiltering({
   );
   const handleSort = (0, import_react10.useCallback)(
     (columnId) => {
-      const newSortConfig = sortConfig?.columnId === columnId ? { columnId, direction: sortConfig.direction === "asc" ? "desc" : "asc" } : { columnId, direction: "asc" };
+      let newSortConfig;
+      if (sortConfig?.columnId === columnId) {
+        if (sortConfig.direction === "asc") {
+          newSortConfig = { columnId, direction: "desc" };
+        } else {
+          newSortConfig = null;
+        }
+      } else {
+        newSortConfig = { columnId, direction: "asc" };
+      }
       if (controlledSortConfig === void 0) {
         setInternalSortConfig(newSortConfig);
       }
@@ -2415,6 +2447,21 @@ function useSpreadsheetFiltering({
     },
     [sortConfig, onSortChange, controlledSortConfig]
   );
+  const clearSort = (0, import_react10.useCallback)(() => {
+    if (controlledSortConfig === void 0) {
+      setInternalSortConfig(null);
+    }
+    onSortChange?.(null);
+  }, [onSortChange, controlledSortConfig]);
+  const setSortConfig = (0, import_react10.useCallback)(
+    (config) => {
+      if (controlledSortConfig === void 0) {
+        setInternalSortConfig(config);
+      }
+      onSortChange?.(config);
+    },
+    [onSortChange, controlledSortConfig]
+  );
   const clearAllFilters = (0, import_react10.useCallback)(() => {
     if (controlledFilters === void 0) {
       setInternalFilters({});
@@ -2430,6 +2477,8 @@ function useSpreadsheetFiltering({
     setActiveFilterColumn,
     handleFilterChange,
     handleSort,
+    setSortConfig,
+    clearSort,
     clearAllFilters,
     hasActiveFilters
   };
@@ -2438,43 +2487,46 @@ function useSpreadsheetFiltering({
 // src/hooks/useSpreadsheetComments.ts
 var import_react11 = require("react");
 function useSpreadsheetComments({
-  externalRowComments,
-  onAddRowComment
+  externalCellComments,
+  onAddCellComment
 } = {}) {
-  const [rowCommentsInternal, setRowCommentsInternal] = (0, import_react11.useState)([]);
-  const [commentModalRow, setCommentModalRow] = (0, import_react11.useState)(null);
+  const [cellCommentsInternal, setCellCommentsInternal] = (0, import_react11.useState)([]);
+  const [commentModalCell, setCommentModalCell] = (0, import_react11.useState)(null);
   const [commentText, setCommentText] = (0, import_react11.useState)("");
-  const [viewCommentsRow, setViewCommentsRow] = (0, import_react11.useState)(null);
-  const rowComments = externalRowComments || rowCommentsInternal;
-  const getRowComments = (0, import_react11.useCallback)(
-    (rowId) => {
-      return rowComments.filter((c) => c.rowId === rowId && !c.columnId);
+  const [viewCommentsCell, setViewCommentsCell] = (0, import_react11.useState)(null);
+  const cellComments = externalCellComments || cellCommentsInternal;
+  const getCellComments = (0, import_react11.useCallback)(
+    (rowId, columnId) => {
+      return cellComments.filter((c) => c.rowId === rowId && c.columnId === columnId);
     },
-    [rowComments]
+    [cellComments]
   );
-  const getUnresolvedCommentCount = (0, import_react11.useCallback)(
-    (rowId) => {
-      return rowComments.filter((c) => c.rowId === rowId && !c.columnId && !c.resolved).length;
+  const getCellUnresolvedCommentCount = (0, import_react11.useCallback)(
+    (rowId, columnId) => {
+      return cellComments.filter(
+        (c) => c.rowId === rowId && c.columnId === columnId && !c.resolved
+      ).length;
     },
-    [rowComments]
+    [cellComments]
   );
-  const hasComments = (0, import_react11.useCallback)(
-    (rowId) => {
-      return rowComments.some((c) => c.rowId === rowId && !c.columnId);
+  const cellHasComments = (0, import_react11.useCallback)(
+    (rowId, columnId) => {
+      return cellComments.some((c) => c.rowId === rowId && c.columnId === columnId);
     },
-    [rowComments]
+    [cellComments]
   );
-  const handleAddRowComment = (0, import_react11.useCallback)(
-    (rowId) => {
+  const handleAddCellComment = (0, import_react11.useCallback)(
+    (rowId, columnId) => {
       if (!commentText.trim()) return;
-      if (onAddRowComment) {
-        onAddRowComment(rowId, commentText);
+      if (onAddCellComment) {
+        onAddCellComment(rowId, columnId, commentText);
       } else {
-        setRowCommentsInternal((prev) => [
+        setCellCommentsInternal((prev) => [
           ...prev,
           {
             id: `comment-${Date.now()}`,
             rowId,
+            columnId,
             text: commentText,
             timestamp: /* @__PURE__ */ new Date(),
             resolved: false
@@ -2482,33 +2534,33 @@ function useSpreadsheetComments({
         ]);
       }
       setCommentText("");
-      setCommentModalRow(null);
+      setCommentModalCell(null);
     },
-    [commentText, onAddRowComment]
+    [commentText, onAddCellComment]
   );
   const handleToggleCommentResolved = (0, import_react11.useCallback)((commentId) => {
-    setRowCommentsInternal(
+    setCellCommentsInternal(
       (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
     );
   }, []);
   return {
     // Comments data
-    rowComments,
-    getRowComments,
-    getUnresolvedCommentCount,
+    cellComments,
+    getCellComments,
+    getCellUnresolvedCommentCount,
     // Add comment modal state
-    commentModalRow,
-    setCommentModalRow,
+    commentModalCell,
+    setCommentModalCell,
     commentText,
     setCommentText,
     // View comments modal state
-    viewCommentsRow,
-    setViewCommentsRow,
+    viewCommentsCell,
+    setViewCommentsCell,
     // Actions
-    handleAddRowComment,
+    handleAddCellComment,
     handleToggleCommentResolved,
     // Utility
-    hasComments
+    cellHasComments
   };
 }
 
@@ -2755,7 +2807,7 @@ function Spreadsheet({
   onRowClick,
   onRowDoubleClick,
   onRowClone,
-  onAddRowComment,
+  onAddCellComment,
   onRowHighlight,
   showToolbar = true,
   showPagination = true,
@@ -2774,7 +2826,7 @@ function Spreadsheet({
   className,
   emptyMessage = "No data available",
   rowHighlights: externalRowHighlights,
-  rowComments: externalRowComments,
+  cellComments: externalCellComments,
   rowActions,
   // Server-side mode props
   serverSide = false,
@@ -2793,6 +2845,7 @@ function Spreadsheet({
     setActiveFilterColumn,
     handleFilterChange,
     handleSort,
+    setSortConfig,
     clearAllFilters,
     hasActiveFilters
   } = useSpreadsheetFiltering({
@@ -2814,7 +2867,9 @@ function Spreadsheet({
     highlightPickerRow,
     setHighlightPickerRow,
     highlightPickerColumn,
-    setHighlightPickerColumn
+    setHighlightPickerColumn,
+    highlightPickerCell,
+    setHighlightPickerCell
   } = useSpreadsheetHighlighting({
     externalRowHighlights,
     onRowHighlight
@@ -2836,20 +2891,20 @@ function Spreadsheet({
     showRowIndex
   });
   const {
-    getRowComments,
-    getUnresolvedCommentCount,
-    hasComments,
-    commentModalRow,
-    setCommentModalRow,
+    getCellComments,
+    getCellUnresolvedCommentCount,
+    cellHasComments,
+    commentModalCell,
+    setCommentModalCell,
     commentText,
     setCommentText,
-    viewCommentsRow,
-    setViewCommentsRow,
-    handleAddRowComment,
+    viewCommentsCell,
+    setViewCommentsCell,
+    handleAddCellComment,
     handleToggleCommentResolved
   } = useSpreadsheetComments({
-    externalRowComments,
-    onAddRowComment
+    externalCellComments,
+    onAddCellComment
   });
   const {
     canUndo,
@@ -2911,15 +2966,23 @@ function Spreadsheet({
     pinRowIndex: false,
     rowIndexHighlightColor: void 0
   });
+  (0, import_react14.useEffect)(() => {
+    setSpreadsheetSettings((prev) => ({
+      ...prev,
+      defaultSort: sortConfig
+    }));
+  }, [sortConfig]);
   const handleEscapeCallback = (0, import_react14.useCallback)(() => {
-    if (commentModalRow !== null) {
-      setCommentModalRow(null);
-    } else if (viewCommentsRow !== null) {
-      setViewCommentsRow(null);
+    if (commentModalCell !== null) {
+      setCommentModalCell(null);
+    } else if (viewCommentsCell !== null) {
+      setViewCommentsCell(null);
     } else if (highlightPickerRow !== null) {
       setHighlightPickerRow(null);
     } else if (highlightPickerColumn !== null) {
       setHighlightPickerColumn(null);
+    } else if (highlightPickerCell !== null) {
+      setHighlightPickerCell(null);
     } else {
       setSelectedRows(/* @__PURE__ */ new Set());
       setLastSelectedRow(null);
@@ -2927,14 +2990,16 @@ function Spreadsheet({
       setEditingCell(null);
     }
   }, [
-    commentModalRow,
-    setCommentModalRow,
-    viewCommentsRow,
-    setViewCommentsRow,
+    commentModalCell,
+    setCommentModalCell,
+    viewCommentsCell,
+    setViewCommentsCell,
     highlightPickerRow,
     setHighlightPickerRow,
     highlightPickerColumn,
-    setHighlightPickerColumn
+    setHighlightPickerColumn,
+    highlightPickerCell,
+    setHighlightPickerCell
   ]);
   const applyUndo = (0, import_react14.useCallback)(() => {
     const entry = popUndoEntry();
@@ -3290,9 +3355,6 @@ function Spreadsheet({
             const isRowSelected = selectedRows.has(rowId);
             const isRowHovered = hoveredRow === rowId;
             const rowHighlight = getRowHighlight(rowId);
-            const rowCommentsList = getRowComments(rowId);
-            const hasRowComments = hasComments(rowId);
-            const unresolvedCount = getUnresolvedCommentCount(rowId);
             const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
             return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "tr",
@@ -3305,12 +3367,12 @@ function Spreadsheet({
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 className: "transition-colors",
                 children: [
-                  effectiveShowRowIndex && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                  effectiveShowRowIndex && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "td",
                     {
                       onClick: (e) => handleRowSelect(rowId, e),
                       className: cn(
-                        "border border-gray-200 text-center font-semibold cursor-pointer group relative",
+                        "border border-gray-200 text-center font-semibold cursor-pointer group",
                         isRowIndexPinned ? "z-20" : "z-0",
                         isRowSelected && "bg-blue-100",
                         !isRowSelected && rowHighlight && "",
@@ -3325,29 +3387,48 @@ function Spreadsheet({
                           left: 0
                         }
                       },
-                      children: [
+                      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
                         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "py-1 px-1", children: displayIndex }),
-                        hasRowComments && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                        cellHasComments(
+                          rowId,
+                          ROW_INDEX_COLUMN_ID
+                        ) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                           "button",
                           {
                             type: "button",
                             onClick: (e) => {
                               e.stopPropagation();
-                              setViewCommentsRow(rowId);
+                              setViewCommentsCell({
+                                rowId,
+                                columnId: ROW_INDEX_COLUMN_ID
+                              });
                             },
-                            className: "absolute top-0 right-0 p-0.5 hover:bg-gray-200/80 rounded-bl",
-                            title: `${rowCommentsList.length} row comment(s) - ${unresolvedCount} unresolved`,
+                            style: {
+                              top: "5px",
+                              right: "5px"
+                            },
+                            className: "absolute p-0.5 hover:bg-gray-100 rounded z-10",
+                            title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} unresolved comment(s)`,
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                                HiChatAlt2,
+                                FaComment,
                                 {
                                   className: cn(
                                     "h-2.5 w-2.5",
-                                    unresolvedCount > 0 ? "text-amber-500" : "text-gray-400"
+                                    getCellUnresolvedCommentCount(
+                                      rowId,
+                                      ROW_INDEX_COLUMN_ID
+                                    ) > 0 ? "text-amber-500" : "text-gray-400"
                                   )
                                 }
                               ),
-                              unresolvedCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute -top-0.5 -right-0.5 bg-amber-500 text-white text-[6px] rounded-full w-2 h-2 flex items-center justify-center", children: unresolvedCount })
+                              getCellUnresolvedCommentCount(
+                                rowId,
+                                ROW_INDEX_COLUMN_ID
+                              ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "absolute -top-1 -right-1 bg-amber-500 text-white text-[6px] rounded-full w-2.5 h-2.5 flex items-center justify-center", children: getCellUnresolvedCommentCount(
+                                rowId,
+                                ROW_INDEX_COLUMN_ID
+                              ) })
                             ]
                           }
                         ),
@@ -3371,12 +3452,14 @@ function Spreadsheet({
                               type: "button",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                setHighlightPickerRow(rowId);
+                                setHighlightPickerRow(
+                                  rowId
+                                );
                               },
                               className: "p-0.5 hover:bg-gray-200 rounded",
                               title: "Highlight row",
                               children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-                                HiColorSwatch,
+                                AiFillHighlight,
                                 {
                                   className: cn(
                                     "h-2.5 w-2.5",
@@ -3392,11 +3475,14 @@ function Spreadsheet({
                               type: "button",
                               onClick: (e) => {
                                 e.stopPropagation();
-                                setCommentModalRow(rowId);
+                                setCommentModalCell({
+                                  rowId,
+                                  columnId: ROW_INDEX_COLUMN_ID
+                                });
                               },
                               className: "p-0.5 hover:bg-gray-200 rounded",
-                              title: "Add row comment",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HiAnnotation, { className: "h-2.5 w-2.5 text-gray-500" })
+                              title: "Add comment",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
                           ),
                           rowActions?.map((action) => {
@@ -3408,7 +3494,10 @@ function Spreadsheet({
                                 type: "button",
                                 onClick: (e) => {
                                   e.stopPropagation();
-                                  action.onClick(row, rowId);
+                                  action.onClick(
+                                    row,
+                                    rowId
+                                  );
                                 },
                                 className: cn(
                                   "p-0.5 hover:bg-gray-200 rounded",
@@ -3421,7 +3510,7 @@ function Spreadsheet({
                             );
                           })
                         ] })
-                      ]
+                      ] })
                     }
                   ),
                   visibleColumns.map((column) => {
@@ -3455,11 +3544,27 @@ function Spreadsheet({
                         onConfirm: handleConfirmEdit,
                         onCancel: handleCancelEdit,
                         onHighlight: enableHighlighting ? () => {
-                          handleCellHighlightToggle(
+                          setHighlightPickerCell({
                             rowId,
-                            column.id
-                          );
-                        } : void 0
+                            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({
+                          rowId,
+                          columnId: column.id
+                        }) : void 0
                       },
                       column.id
                     );
@@ -3490,23 +3595,25 @@ function Spreadsheet({
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       AddCommentModal,
       {
-        isOpen: commentModalRow !== null,
+        isOpen: commentModalCell !== null,
         commentText,
+        columnLabel: commentModalCell ? commentModalCell.columnId === ROW_INDEX_COLUMN_ID ? "Row #" : columns.find((c) => c.id === commentModalCell.columnId)?.label : void 0,
         onCommentTextChange: setCommentText,
-        onAdd: () => commentModalRow !== null && handleAddRowComment(commentModalRow),
+        onAdd: () => commentModalCell !== null && handleAddCellComment(commentModalCell.rowId, commentModalCell.columnId),
         onClose: () => {
           setCommentText("");
-          setCommentModalRow(null);
+          setCommentModalCell(null);
         }
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       ViewCommentsModal,
       {
-        isOpen: viewCommentsRow !== null,
-        comments: viewCommentsRow !== null ? getRowComments(viewCommentsRow) : [],
+        isOpen: viewCommentsCell !== null,
+        comments: viewCommentsCell !== null ? getCellComments(viewCommentsCell.rowId, viewCommentsCell.columnId) : [],
+        columnLabel: viewCommentsCell ? viewCommentsCell.columnId === ROW_INDEX_COLUMN_ID ? "Row #" : columns.find((c) => c.id === viewCommentsCell.columnId)?.label : void 0,
         onToggleResolved: handleToggleCommentResolved,
-        onClose: () => setViewCommentsRow(null)
+        onClose: () => setViewCommentsCell(null)
       }
     ),
     highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
@@ -3527,6 +3634,19 @@ function Spreadsheet({
         onClose: () => setHighlightPickerColumn(null)
       }
     ),
+    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      ColorPickerPopover,
+      {
+        title: "Highlight Cell",
+        paletteType: "row",
+        onSelectColor: (color) => handleCellHighlightToggle(
+          highlightPickerCell.rowId,
+          highlightPickerCell.columnId,
+          color
+        ),
+        onClose: () => setHighlightPickerCell(null)
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       KeyboardShortcutsModal,
       {
@@ -3547,7 +3667,8 @@ function Spreadsheet({
           if (newSettings.defaultPageSize !== pageSize) {
             handlePageSizeChange(newSettings.defaultPageSize);
           }
-          if (newSettings.defaultSort) {
+          if (newSettings.defaultSort?.columnId !== sortConfig?.columnId || newSettings.defaultSort?.direction !== sortConfig?.direction) {
+            setSortConfig(newSettings.defaultSort);
           }
         },
         columns: columns || [],