@xcelsior/ui-spreadsheets 1.0.1

package/dist/index.mjs

@@ -0,0 +1,3417 @@
+// src/components/Spreadsheet.tsx
+import { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef3, useState as useState10 } from "react";
+
+// ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
+import React2 from "react";
+
+// ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconContext.js
+import React from "react";
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && React.createContext(DefaultContext);
+
+// ../../../node_modules/.pnpm/react-icons@4.12.0_react@18.3.1/node_modules/react-icons/lib/esm/iconBase.js
+var __assign = function() {
+  __assign = Object.assign || function(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __rest = function(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+function Tree2Element(tree) {
+  return tree && tree.map(function(node, i) {
+    return React2.createElement(node.tag, __assign({
+      key: i
+    }, node.attr), Tree2Element(node.child));
+  });
+}
+function GenIcon(data) {
+  return function(props) {
+    return React2.createElement(IconBase, __assign({
+      attr: __assign({}, data.attr)
+    }, props), Tree2Element(data.child));
+  };
+}
+function IconBase(props) {
+  var elem = function(conf) {
+    var attr = props.attr, size = props.size, title = props.title, svgProps = __rest(props, ["attr", "size", "title"]);
+    var computedSize = size || conf.size || "1em";
+    var className;
+    if (conf.className) className = conf.className;
+    if (props.className) className = (className ? className + " " : "") + props.className;
+    return React2.createElement("svg", __assign({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf.attr, attr, svgProps, {
+      className,
+      style: __assign(__assign({
+        color: props.color || conf.color
+      }, conf.style), props.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React2.createElement("title", null, title), props.children);
+  };
+  return IconContext !== void 0 ? React2.createElement(IconContext.Consumer, null, function(conf) {
+    return elem(conf);
+  }) : elem(DefaultContext);
+}
+
+// ../../../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);
+}
+function HiChevronDown(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z", "clipRule": "evenodd" } }] })(props);
+}
+function HiChevronRight(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", "clipRule": "evenodd" } }] })(props);
+}
+function HiChevronUp(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z", "clipRule": "evenodd" } }] })(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);
+}
+function HiDownload(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z", "clipRule": "evenodd" } }] })(props);
+}
+function HiDuplicate(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M7 9a2 2 0 012-2h6a2 2 0 012 2v6a2 2 0 01-2 2H9a2 2 0 01-2-2V9z" } }, { "tag": "path", "attr": { "d": "M5 3a2 2 0 00-2 2v6a2 2 0 002 2V5h8a2 2 0 00-2-2H5z" } }] })(props);
+}
+function HiEye(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M10 12a2 2 0 100-4 2 2 0 000 4z" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z", "clipRule": "evenodd" } }] })(props);
+}
+function HiFilter(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-.293.707L12 11.414V15a1 1 0 01-.293.707l-2 2A1 1 0 018 17v-5.586L3.293 6.707A1 1 0 013 6V3z", "clipRule": "evenodd" } }] })(props);
+}
+function HiReply(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M7.707 3.293a1 1 0 010 1.414L5.414 7H11a7 7 0 017 7v2a1 1 0 11-2 0v-2a5 5 0 00-5-5H5.414l2.293 2.293a1 1 0 11-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z", "clipRule": "evenodd" } }] })(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 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);
+}
+function HiX(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "fillRule": "evenodd", "d": "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", "clipRule": "evenodd" } }] })(props);
+}
+function HiZoomIn(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 20 20", "fill": "currentColor", "aria-hidden": "true" }, "child": [{ "tag": "path", "attr": { "d": "M5 8a1 1 0 011-1h1V6a1 1 0 012 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 01-1-1z" } }, { "tag": "path", "attr": { "fillRule": "evenodd", "d": "M2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8zm6-4a4 4 0 100 8 4 4 0 000-8z", "clipRule": "evenodd" } }] })(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);
+}
+
+// src/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+var isBlankValue = (value) => {
+  return value === null || value === void 0 || value === "" || typeof value === "string" && value.trim() === "";
+};
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/SpreadsheetCell.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var cellPaddingCompact = "px-1.5 py-0.5";
+var cellPaddingNormal = "px-2 py-1";
+var SpreadsheetCell = ({
+  value,
+  column,
+  row,
+  rowIndex,
+  rowId: _rowId,
+  isEditable = false,
+  isEditing = false,
+  isFocused = false,
+  isRowSelected = false,
+  isRowHovered = false,
+  highlightColor,
+  hasComments = false,
+  unresolvedCommentCount = 0,
+  isCopied = false,
+  compactMode = false,
+  isPinned = false,
+  pinSide,
+  leftOffset = 0,
+  rightOffset = 0,
+  onClick,
+  onChange,
+  onConfirm,
+  onCancel,
+  onCopyDown,
+  onCopyToSelected,
+  onHighlight,
+  onAddComment,
+  onViewComments,
+  hasSelectedRows = false,
+  className
+}) => {
+  const [localValue, setLocalValue] = useState(value);
+  const inputRef = useRef(null);
+  const selectRef = useRef(null);
+  useEffect(() => {
+    setLocalValue(value);
+  }, [value]);
+  useEffect(() => {
+    if (isEditing) {
+      if (column.type === "select") {
+        selectRef.current?.focus();
+      } else {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+      }
+    }
+  }, [isEditing, column.type]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      onConfirm?.();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      setLocalValue(value);
+      onChange?.(value);
+      onCancel?.();
+    }
+  };
+  const getBackgroundColor = () => {
+    if (highlightColor) return highlightColor;
+    if (isRowSelected) return "rgb(219 234 254)";
+    if (isRowHovered) return "rgb(243 244 246)";
+    return "white";
+  };
+  const renderContent = () => {
+    if (column.render) {
+      return column.render(value, row, rowIndex);
+    }
+    if (value === null || value === void 0 || value === "") {
+      return /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: "-" });
+    }
+    if (column.type === "boolean") {
+      return value ? "Yes" : "No";
+    }
+    if (column.type === "number") {
+      return typeof value === "number" ? value.toLocaleString() : value;
+    }
+    return String(value);
+  };
+  const renderEditInput = () => {
+    if (column.type === "select" && column.options) {
+      return /* @__PURE__ */ jsx(
+        "select",
+        {
+          ref: selectRef,
+          value: localValue ?? "",
+          onChange: (e) => {
+            setLocalValue(e.target.value);
+            onChange?.(e.target.value);
+            onConfirm?.();
+          },
+          onKeyDown: handleKeyDown,
+          onBlur: () => onConfirm?.(),
+          className: cn(
+            "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500",
+            compactMode ? "px-1 py-0.5" : "px-2 py-1"
+          ),
+          children: column.options.map((option) => /* @__PURE__ */ jsx("option", { value: option, children: option }, option))
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: column.type === "number" ? "number" : "text",
+        step: column.type === "number" ? "0.01" : void 0,
+        value: localValue ?? "",
+        onChange: (e) => {
+          const newValue = column.type === "number" ? e.target.value === "" ? "" : parseFloat(e.target.value) : e.target.value;
+          setLocalValue(newValue);
+          onChange?.(newValue);
+        },
+        onKeyDown: handleKeyDown,
+        onBlur: () => onConfirm?.(),
+        className: cn(
+          "w-full border border-gray-300 rounded text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 bg-yellow-50",
+          compactMode ? "px-1 py-0.5" : "px-2 py-1"
+        )
+      }
+    );
+  };
+  const cellPadding = compactMode ? cellPaddingCompact : cellPaddingNormal;
+  const handleCellKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onClick?.(e);
+    }
+  };
+  const positionStyles = {};
+  if (isPinned) {
+    if (pinSide === "left") {
+      positionStyles.left = `${leftOffset}px`;
+      positionStyles.position = "sticky";
+    } else if (pinSide === "right") {
+      positionStyles.right = `${rightOffset}px`;
+      positionStyles.position = "sticky";
+    }
+  }
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      onClick,
+      onKeyDown: handleCellKeyDown,
+      className: cn(
+        "border border-gray-200 text-xs group cursor-pointer transition-colors",
+        cellPadding,
+        column.align === "right" && "text-right",
+        column.align === "center" && "text-center",
+        isCopied && "animate-pulse",
+        isFocused && "ring-2 ring-blue-500 ring-inset",
+        isPinned ? "z-20" : "z-0",
+        className
+      ),
+      style: {
+        backgroundColor: getBackgroundColor(),
+        minWidth: column.minWidth || column.width,
+        ...positionStyles
+      },
+      children: isEditing ? renderEditInput() : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 truncate",
+              isEditable && "cursor-text hover:bg-gray-50 px-0.5 rounded min-h-[18px] flex items-center bg-yellow-50/50"
+            ),
+            title: String(value ?? ""),
+            children: renderContent()
+          }
+        ),
+        hasComments && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              onViewComments?.();
+            },
+            className: "p-0.5 hover:bg-gray-100 rounded relative shrink-0",
+            title: `${unresolvedCommentCount} unresolved comment(s)`,
+            children: [
+              /* @__PURE__ */ jsx(
+                HiOutlineChatAlt,
+                {
+                  className: cn(
+                    "h-3 w-3",
+                    unresolvedCommentCount > 0 ? "text-amber-500" : "text-gray-400"
+                  )
+                }
+              ),
+              unresolvedCommentCount > 0 && /* @__PURE__ */ 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 })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "opacity-0 group-hover:opacity-100 flex items-center gap-0.5 transition-opacity shrink-0", children: [
+          value !== null && value !== void 0 && value !== "" && onCopyDown && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onCopyDown();
+              },
+              className: "p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
+              title: "Copy value down to rows below",
+              children: /* @__PURE__ */ jsx(HiOutlineClipboardCopy, { className: "h-2.5 w-2.5 text-gray-500" })
+            }
+          ),
+          hasSelectedRows && value !== null && value !== void 0 && value !== "" && onCopyToSelected && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onCopyToSelected();
+              },
+              className: "p-0.5 bg-green-100 hover:bg-green-200 rounded",
+              title: "Copy to selected rows",
+              children: /* @__PURE__ */ jsx(HiOutlineClipboardCheck, { className: "h-2.5 w-2.5 text-green-600" })
+            }
+          ),
+          onHighlight && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onHighlight();
+              },
+              className: "p-0.5 hover:bg-gray-100 rounded",
+              title: "Highlight cell",
+              children: /* @__PURE__ */ jsx(
+                HiOutlinePencil,
+                {
+                  className: cn(
+                    "h-2.5 w-2.5",
+                    highlightColor ? "text-amber-500" : "text-gray-400"
+                  )
+                }
+              )
+            }
+          ),
+          onAddComment && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onAddComment();
+              },
+              className: "p-0.5 hover:bg-gray-100 rounded",
+              title: "Add comment",
+              children: /* @__PURE__ */ jsx(HiOutlineAnnotation, { className: "h-2.5 w-2.5 text-gray-400" })
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+SpreadsheetCell.displayName = "SpreadsheetCell";
+
+// src/components/SpreadsheetFilterDropdown.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var TEXT_OPERATORS = [
+  { value: "contains", label: "Contains" },
+  { value: "notContains", label: "Does not contain" },
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "startsWith", label: "Starts with" },
+  { value: "endsWith", label: "Ends with" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" }
+];
+var NUMBER_OPERATORS = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "greaterThan", label: "Greater than" },
+  { value: "greaterThanOrEqual", label: "Greater than or equal" },
+  { value: "lessThan", label: "Less than" },
+  { value: "lessThanOrEqual", label: "Less than or equal" },
+  { value: "between", label: "Between" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" }
+];
+var DATE_OPERATORS = [
+  { value: "equals", label: "Equals" },
+  { value: "notEquals", label: "Does not equal" },
+  { value: "before", label: "Before" },
+  { value: "after", label: "After" },
+  { value: "between", label: "Between" },
+  { value: "today", label: "Today" },
+  { value: "yesterday", label: "Yesterday" },
+  { value: "thisWeek", label: "This week" },
+  { value: "lastWeek", label: "Last week" },
+  { value: "thisMonth", label: "This month" },
+  { value: "lastMonth", label: "Last month" },
+  { value: "thisYear", label: "This year" },
+  { value: "isEmpty", label: "Is empty" },
+  { value: "isNotEmpty", label: "Is not empty" }
+];
+var SpreadsheetFilterDropdown = ({
+  column,
+  filter,
+  onFilterChange,
+  onClose,
+  className
+}) => {
+  const [textOperator, setTextOperator] = useState2(
+    filter?.textCondition?.operator || "contains"
+  );
+  const [textValue, setTextValue] = useState2(filter?.textCondition?.value || "");
+  const [numberOperator, setNumberOperator] = useState2(
+    filter?.numberCondition?.operator || "equals"
+  );
+  const [numberValue, setNumberValue] = useState2(
+    filter?.numberCondition?.value?.toString() || ""
+  );
+  const [numberValueTo, setNumberValueTo] = useState2(
+    filter?.numberCondition?.valueTo?.toString() || ""
+  );
+  const [dateOperator, setDateOperator] = useState2(
+    filter?.dateCondition?.operator || "equals"
+  );
+  const [dateValue, setDateValue] = useState2(filter?.dateCondition?.value || "");
+  const [dateValueTo, setDateValueTo] = useState2(filter?.dateCondition?.valueTo || "");
+  const dropdownRef = useRef2(null);
+  const isNumeric = column.type === "number";
+  const isDate = column.type === "date";
+  useEffect2(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [onClose]);
+  const handleApplyFilter = () => {
+    let newFilter;
+    if (isNumeric) {
+      const needsValue = !["isEmpty", "isNotEmpty"].includes(numberOperator);
+      if (needsValue && !numberValue) {
+        onFilterChange(void 0);
+        onClose();
+        return;
+      }
+      newFilter = {
+        numberCondition: {
+          operator: numberOperator,
+          value: numberValue ? parseFloat(numberValue) : void 0,
+          valueTo: numberValueTo ? parseFloat(numberValueTo) : void 0
+        }
+      };
+    } else if (isDate) {
+      const needsValue = ![
+        "isEmpty",
+        "isNotEmpty",
+        "today",
+        "yesterday",
+        "thisWeek",
+        "lastWeek",
+        "thisMonth",
+        "lastMonth",
+        "thisYear"
+      ].includes(dateOperator);
+      if (needsValue && !dateValue) {
+        onFilterChange(void 0);
+        onClose();
+        return;
+      }
+      newFilter = {
+        dateCondition: {
+          operator: dateOperator,
+          value: dateValue || void 0,
+          valueTo: dateValueTo || void 0
+        }
+      };
+    } else {
+      const needsValue = !["isEmpty", "isNotEmpty"].includes(textOperator);
+      if (needsValue && !textValue) {
+        onFilterChange(void 0);
+        onClose();
+        return;
+      }
+      newFilter = {
+        textCondition: {
+          operator: textOperator,
+          value: textValue || void 0
+        }
+      };
+    }
+    onFilterChange(newFilter);
+    onClose();
+  };
+  const handleClearFilter = () => {
+    setTextValue("");
+    setNumberValue("");
+    setNumberValueTo("");
+    setDateValue("");
+    setDateValueTo("");
+    onFilterChange(void 0);
+    onClose();
+  };
+  const textNeedsValue = !["isEmpty", "isNotEmpty"].includes(textOperator);
+  const numberNeedsValue = !["isEmpty", "isNotEmpty"].includes(numberOperator);
+  const dateNeedsValue = ![
+    "isEmpty",
+    "isNotEmpty",
+    "today",
+    "yesterday",
+    "thisWeek",
+    "lastWeek",
+    "thisMonth",
+    "lastMonth",
+    "thisYear"
+  ].includes(dateOperator);
+  return /* @__PURE__ */ jsxs2(
+    "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]",
+        className
+      ),
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "px-3 py-2 border-b border-gray-200 bg-gray-50", children: /* @__PURE__ */ jsxs2("span", { className: "text-xs font-medium text-gray-700", children: [
+          "Filter: ",
+          column.label
+        ] }) }),
+        /* @__PURE__ */ jsx2("div", { className: "p-3 space-y-3", children: isNumeric ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Condition" }),
+            /* @__PURE__ */ jsx2(
+              "select",
+              {
+                value: numberOperator,
+                onChange: (e) => setNumberOperator(e.target.value),
+                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",
+                children: NUMBER_OPERATORS.map((op) => /* @__PURE__ */ jsx2("option", { value: op.value, children: op.label }, op.value))
+              }
+            )
+          ] }),
+          numberNeedsValue && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Value" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "number",
+                placeholder: "Enter value",
+                value: numberValue,
+                onChange: (e) => setNumberValue(e.target.value),
+                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"
+              }
+            )
+          ] }),
+          numberOperator === "between" && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "And" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "number",
+                placeholder: "Enter end value",
+                value: numberValueTo,
+                onChange: (e) => setNumberValueTo(e.target.value),
+                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"
+              }
+            )
+          ] })
+        ] }) : isDate ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Condition" }),
+            /* @__PURE__ */ jsx2(
+              "select",
+              {
+                value: dateOperator,
+                onChange: (e) => setDateOperator(e.target.value),
+                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",
+                children: DATE_OPERATORS.map((op) => /* @__PURE__ */ jsx2("option", { value: op.value, children: op.label }, op.value))
+              }
+            )
+          ] }),
+          dateNeedsValue && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Date" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "date",
+                value: dateValue,
+                onChange: (e) => setDateValue(e.target.value),
+                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"
+              }
+            )
+          ] }),
+          dateOperator === "between" && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "And" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "date",
+                value: dateValueTo,
+                onChange: (e) => setDateValueTo(e.target.value),
+                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"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Condition" }),
+            /* @__PURE__ */ jsx2(
+              "select",
+              {
+                value: textOperator,
+                onChange: (e) => setTextOperator(e.target.value),
+                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",
+                children: TEXT_OPERATORS.map((op) => /* @__PURE__ */ jsx2("option", { value: op.value, children: op.label }, op.value))
+              }
+            )
+          ] }),
+          textNeedsValue && /* @__PURE__ */ jsxs2("div", { children: [
+            /* @__PURE__ */ jsx2("label", { className: "text-xs text-gray-500 mb-1 block", children: "Value" }),
+            /* @__PURE__ */ jsx2(
+              "input",
+              {
+                type: "text",
+                placeholder: "Enter text",
+                value: textValue,
+                onChange: (e) => setTextValue(e.target.value),
+                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"
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs2("div", { className: "p-2 border-t border-gray-200 flex gap-2", children: [
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: handleClearFilter,
+              className: "flex-1 px-3 py-1.5 text-xs text-red-600 hover:bg-red-50 border border-red-200 rounded transition-colors flex items-center justify-center gap-1",
+              children: [
+                /* @__PURE__ */ jsx2(HiX, { className: "h-3 w-3" }),
+                "Clear"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs2(
+            "button",
+            {
+              type: "button",
+              onClick: handleApplyFilter,
+              className: "flex-1 px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center justify-center gap-1",
+              children: [
+                /* @__PURE__ */ jsx2(HiCheck, { className: "h-3 w-3" }),
+                "Apply"
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
+
+// src/components/SpreadsheetToolbar.tsx
+import React3 from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var SpreadsheetToolbar = ({
+  zoom,
+  canUndo,
+  canRedo,
+  undoCount = 0,
+  redoCount = 0,
+  selectedRowCount,
+  hasUnsavedChanges,
+  saveStatus,
+  autoSave,
+  summary,
+  onZoomIn,
+  onZoomOut,
+  onZoomReset,
+  onUndo,
+  onRedo,
+  onClearSelection,
+  onSave,
+  onExport,
+  onSettings,
+  onShowShortcuts,
+  hasActiveFilters,
+  onClearFilters,
+  className
+}) => {
+  const [showMoreMenu, setShowMoreMenu] = React3.useState(false);
+  const menuRef = React3.useRef(null);
+  React3.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setShowMoreMenu(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const buttonBaseClasses = "p-1.5 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed";
+  const getSaveStatusDisplay = () => {
+    switch (saveStatus) {
+      case "saved":
+        return {
+          text: "\u2713 All changes saved",
+          className: "text-gray-500"
+        };
+      case "saving":
+        return {
+          text: "\u27F3 Saving...",
+          className: "text-amber-500"
+        };
+      case "unsaved":
+        return {
+          text: "\u25CF Unsaved changes",
+          className: "text-amber-500"
+        };
+      case "error":
+        return {
+          text: "\u26A0 Error saving",
+          className: "text-red-500"
+        };
+      default:
+        return null;
+    }
+  };
+  const saveStatusDisplay = getSaveStatusDisplay();
+  const getSummaryVariantClasses = (variant) => {
+    switch (variant) {
+      case "success":
+        return "bg-green-50 border-green-200 text-green-700";
+      case "danger":
+        return "bg-red-50 border-red-200 text-red-700";
+      case "warning":
+        return "bg-amber-50 border-amber-200 text-amber-700";
+      default:
+        return "bg-blue-50 border-blue-200 text-blue-700";
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b border-gray-200 bg-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onUndo,
+                disabled: !canUndo,
+                className: cn(
+                  buttonBaseClasses,
+                  canUndo ? "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-50 text-gray-400"
+                ),
+                title: `Undo (${undoCount} changes)`,
+                children: /* @__PURE__ */ jsx3(HiReply, { className: "h-4 w-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onRedo,
+                disabled: !canRedo,
+                className: cn(
+                  buttonBaseClasses,
+                  canRedo ? "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-50 text-gray-400"
+                ),
+                title: `Redo (${redoCount} changes)`,
+                style: { transform: "scaleX(-1)" },
+                children: /* @__PURE__ */ jsx3(HiReply, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onZoomOut,
+                className: "p-1 hover:bg-white rounded",
+                title: "Zoom out",
+                children: /* @__PURE__ */ jsx3(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
+              }
+            ),
+            /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                onClick: onZoomReset,
+                className: "px-2 py-0.5 hover:bg-white rounded text-xs min-w-[45px] text-center text-gray-600",
+                title: "Reset zoom",
+                children: [
+                  zoom,
+                  "%"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onZoomIn,
+                className: "p-1 hover:bg-white rounded",
+                title: "Zoom in",
+                children: /* @__PURE__ */ jsx3(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+          selectedRowCount > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
+            /* @__PURE__ */ jsxs3("span", { className: "text-xs font-medium whitespace-nowrap", children: [
+              selectedRowCount,
+              " row",
+              selectedRowCount !== 1 ? "s" : "",
+              " selected"
+            ] }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onClearSelection,
+                className: "p-0.5 hover:bg-blue-700 rounded",
+                title: "Clear selection",
+                children: /* @__PURE__ */ jsx3(HiX, { className: "h-3 w-3" })
+              }
+            )
+          ] }),
+          hasActiveFilters && onClearFilters && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-amber-500 text-white rounded", children: [
+            /* @__PURE__ */ jsx3(HiFilter, { className: "h-3.5 w-3.5" }),
+            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium whitespace-nowrap", children: "Filters active" }),
+            /* @__PURE__ */ jsx3(
+              "button",
+              {
+                type: "button",
+                onClick: onClearFilters,
+                className: "p-0.5 hover:bg-amber-600 rounded",
+                title: "Clear all filters",
+                children: /* @__PURE__ */ jsx3(HiX, { className: "h-3 w-3" })
+              }
+            )
+          ] }),
+          summary && /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              className: cn(
+                "flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
+                getSummaryVariantClasses(summary.variant)
+              ),
+              children: [
+                /* @__PURE__ */ jsxs3("span", { className: "font-semibold whitespace-nowrap", children: [
+                  summary.label,
+                  ":"
+                ] }),
+                /* @__PURE__ */ jsx3("span", { className: "font-bold whitespace-nowrap", children: summary.value })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
+          saveStatusDisplay && /* @__PURE__ */ jsx3(
+            "span",
+            {
+              className: cn(
+                "text-xs flex items-center gap-1",
+                saveStatusDisplay.className
+              ),
+              children: saveStatusDisplay.text
+            }
+          ),
+          !autoSave && onSave && /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              type: "button",
+              onClick: onSave,
+              disabled: !hasUnsavedChanges,
+              className: cn(
+                "px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center gap-1.5",
+                "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
+              ),
+              children: [
+                /* @__PURE__ */ jsx3(HiCheck, { className: "h-3.5 w-3.5" }),
+                "Save"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "relative", ref: menuRef, children: [
+            /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                type: "button",
+                onClick: () => setShowMoreMenu(!showMoreMenu),
+                className: "px-2.5 py-1.5 bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors flex items-center gap-1.5 text-xs",
+                title: "More actions",
+                children: [
+                  /* @__PURE__ */ jsx3(HiDotsVertical, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ jsx3("span", { className: "hidden lg:inline", children: "More" })
+                ]
+              }
+            ),
+            showMoreMenu && /* @__PURE__ */ jsxs3("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-20", children: [
+              onSettings && /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onSettings();
+                    setShowMoreMenu(false);
+                  },
+                  className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx3(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
+                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: "Settings" })
+                  ]
+                }
+              ),
+              onShowShortcuts && /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onShowShortcuts();
+                    setShowMoreMenu(false);
+                  },
+                  className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx3(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
+                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
+                  ]
+                }
+              ),
+              (onSettings || onShowShortcuts) && onExport && /* @__PURE__ */ jsx3("div", { className: "border-t border-gray-100 my-1" }),
+              onExport && /* @__PURE__ */ jsxs3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    onExport();
+                    setShowMoreMenu(false);
+                  },
+                  className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx3(HiDownload, { className: "h-3.5 w-3.5 text-gray-500" }),
+                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: "Export" })
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
+
+// ../../../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);
+}
+function MdOutlinePushPin(props) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0z" } }, { "tag": "path", "attr": { "d": "M14 4v5c0 1.12.37 2.16 1 3H9c.65-.86 1-1.9 1-3V4h4m3-2H7c-.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-3V4h1c.55 0 1-.45 1-1s-.45-1-1-1z" } }] })(props);
+}
+
+// src/components/ColumnHeaderActions.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ColumnHeaderActions({
+  enableFiltering = false,
+  enableHighlighting = false,
+  enablePinning = true,
+  hasActiveFilter = false,
+  hasActiveHighlight = false,
+  isPinned = false,
+  onFilterClick,
+  onHighlightClick,
+  onPinClick,
+  filterTitle = "Filter column",
+  highlightTitle = "Highlight column",
+  pinnedTitle = "Unpin column",
+  unpinnedTitle = "Pin column",
+  className
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation();
+  };
+  const handleKeyDown = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs4(
+    "button",
+    {
+      type: "button",
+      className: cn("flex items-center gap-0.5", className),
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        enableFiltering && onFilterClick && /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(HiFilter, { className: "h-3 w-3" })
+          }
+        ),
+        enableHighlighting && onHighlightClick && /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(HiColorSwatch, { className: "h-3 w-3" })
+          }
+        ),
+        enablePinning && onPinClick && /* @__PURE__ */ jsx4(
+          "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__ */ jsx4(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx4(MdOutlinePushPin, { className: "h-3 w-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+ColumnHeaderActions.displayName = "ColumnHeaderActions";
+
+// src/components/SpreadsheetHeader.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var cellPaddingCompact2 = "px-1.5 py-1";
+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
+}) => {
+  const isSorted = sortConfig?.columnId === column.id;
+  const sortDirection = isSorted ? sortConfig.direction : null;
+  const cellPadding = compactMode ? cellPaddingCompact2 : cellPaddingNormal2;
+  const positionStyles = {};
+  if (isPinned) {
+    positionStyles.position = "sticky";
+    if (pinSide === "left") {
+      positionStyles.left = `${leftOffset}px`;
+    } else if (pinSide === "right") {
+      positionStyles.right = `${rightOffset}px`;
+    }
+  }
+  return /* @__PURE__ */ jsxs5(
+    "th",
+    {
+      onClick: column.sortable ? onClick : void 0,
+      className: cn(
+        "border border-gray-200 text-xs font-semibold text-gray-700 sticky group",
+        cellPadding,
+        column.align === "right" && "text-right",
+        column.align === "center" && "text-center",
+        column.sortable && "cursor-pointer hover:bg-gray-100",
+        isPinned ? "z-30" : "z-20",
+        className
+      ),
+      style: {
+        backgroundColor: highlightColor || "rgb(243 244 246)",
+        // gray-100
+        minWidth: column.minWidth || column.width,
+        top: 0,
+        // For sticky header
+        ...positionStyles
+      },
+      children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ jsxs5("span", { className: "flex-1 flex items-center gap-1", children: [
+            column.label,
+            isSorted && /* @__PURE__ */ jsx5("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ jsx5(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx5(HiChevronDown, { className: "h-3 w-3" }) })
+          ] }),
+          /* @__PURE__ */ jsx5(
+            ColumnHeaderActions,
+            {
+              enableFiltering: column.filterable,
+              enableHighlighting: !!onHighlightClick,
+              enablePinning: column.pinnable !== false,
+              hasActiveFilter,
+              hasActiveHighlight: !!highlightColor,
+              isPinned,
+              onFilterClick,
+              onHighlightClick,
+              onPinClick
+            }
+          )
+        ] }),
+        children
+      ]
+    }
+  );
+};
+SpreadsheetHeader.displayName = "SpreadsheetHeader";
+
+// src/hooks/useSpreadsheetPinning.ts
+import { useCallback, useMemo, useState as useState3 } from "react";
+var ROW_INDEX_COLUMN_WIDTH = 56;
+function useSpreadsheetPinning({
+  columns,
+  columnGroups,
+  showRowIndex = true,
+  defaultPinnedColumns = [],
+  defaultPinRowIndex = false
+}) {
+  const [pinnedColumns, setPinnedColumns] = useState3(() => {
+    const map = /* @__PURE__ */ new Map();
+    defaultPinnedColumns.forEach((col) => {
+      map.set(col, "left");
+    });
+    return map;
+  });
+  const [isRowIndexPinned, setIsRowIndexPinned] = useState3(defaultPinRowIndex);
+  const [collapsedGroups, setCollapsedGroups] = useState3(/* @__PURE__ */ new Set());
+  const handleTogglePin = useCallback((columnId) => {
+    setPinnedColumns((prev) => {
+      const newMap = new Map(prev);
+      if (newMap.has(columnId)) {
+        newMap.delete(columnId);
+      } else {
+        newMap.set(columnId, "left");
+      }
+      return newMap;
+    });
+  }, []);
+  const handleToggleRowIndexPin = useCallback(() => {
+    setIsRowIndexPinned((prev) => !prev);
+  }, []);
+  const handleToggleGroupCollapse = useCallback((groupId) => {
+    setCollapsedGroups((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(groupId)) {
+        newSet.delete(groupId);
+      } else {
+        newSet.add(groupId);
+      }
+      return newSet;
+    });
+  }, []);
+  const visibleColumns = 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);
+      });
+    }
+    if (pinnedColumns.size === 0) {
+      return result;
+    }
+    const leftPinned = [];
+    const unpinned = [];
+    const rightPinned = [];
+    const pinnedLeftIds = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "left").map(([id]) => id);
+    const pinnedRightIds = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "right").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 getRowIndexLeftOffset = useCallback(() => {
+    return 0;
+  }, []);
+  const getColumnLeftOffset = useCallback(
+    (columnId) => {
+      const pinnedLeft = Array.from(pinnedColumns.entries()).filter(([, side]) => side === "left").map(([id]) => id);
+      const index = pinnedLeft.indexOf(columnId);
+      const baseOffset = showRowIndex && isRowIndexPinned ? 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]);
+        offset += col?.width || col?.minWidth || 100;
+      }
+      return offset;
+    },
+    [pinnedColumns, columns, showRowIndex, isRowIndexPinned]
+  );
+  const isColumnPinned = useCallback(
+    (columnId) => {
+      return pinnedColumns.has(columnId);
+    },
+    [pinnedColumns]
+  );
+  const getColumnPinSide = useCallback(
+    (columnId) => {
+      return pinnedColumns.get(columnId);
+    },
+    [pinnedColumns]
+  );
+  return {
+    pinnedColumns,
+    isRowIndexPinned,
+    collapsedGroups,
+    visibleColumns,
+    handleTogglePin,
+    handleToggleRowIndexPin,
+    handleToggleGroupCollapse,
+    getColumnLeftOffset,
+    getRowIndexLeftOffset,
+    isColumnPinned,
+    getColumnPinSide
+  };
+}
+
+// src/components/RowIndexColumnHeader.tsx
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function RowIndexColumnHeader({
+  enableHighlighting = false,
+  highlightColor,
+  isPinned = false,
+  onHighlightClick,
+  onPinClick,
+  hasColumnGroups = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx6(
+    "th",
+    {
+      className: cn(
+        "border border-gray-200 px-2 py-1.5 text-center font-bold text-gray-700 group",
+        isPinned ? "z-30" : "z-20",
+        className
+      ),
+      rowSpan: hasColumnGroups ? 2 : void 0,
+      style: {
+        minWidth: `${ROW_INDEX_COLUMN_WIDTH}px`,
+        width: `${ROW_INDEX_COLUMN_WIDTH}px`,
+        position: "sticky",
+        top: 0,
+        left: isPinned ? 0 : void 0,
+        backgroundColor: highlightColor || "rgb(243 244 246)"
+      },
+      children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-1", children: [
+        /* @__PURE__ */ jsx6("span", { children: "#" }),
+        /* @__PURE__ */ jsx6(
+          ColumnHeaderActions,
+          {
+            enableHighlighting,
+            enablePinning: true,
+            hasActiveHighlight: !!highlightColor,
+            isPinned,
+            onHighlightClick,
+            onPinClick,
+            highlightTitle: "Highlight row index column",
+            pinnedTitle: "Unpin row index column",
+            unpinnedTitle: "Pin row index column"
+          }
+        )
+      ] })
+    }
+  );
+}
+RowIndexColumnHeader.displayName = "RowIndexColumnHeader";
+
+// src/hooks/useSpreadsheetHighlighting.ts
+import { useCallback as useCallback2, useState as useState4 } from "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
+  ]
+};
+var ROW_INDEX_COLUMN_ID = "__row_index__";
+function useSpreadsheetHighlighting({
+  externalRowHighlights,
+  onRowHighlight
+} = {}) {
+  const [cellHighlights, setCellHighlights] = useState4([]);
+  const [rowHighlightsInternal, setRowHighlightsInternal] = useState4([]);
+  const [columnHighlights, setColumnHighlights] = useState4({});
+  const [highlightPickerRow, setHighlightPickerRow] = useState4(null);
+  const [highlightPickerColumn, setHighlightPickerColumn] = useState4(null);
+  const rowHighlights = externalRowHighlights || rowHighlightsInternal;
+  const getCellHighlight = useCallback2(
+    (rowId, columnId) => {
+      return cellHighlights.find((h) => h.rowId === rowId && h.columnId === columnId)?.color;
+    },
+    [cellHighlights]
+  );
+  const handleCellHighlightToggle = useCallback2(
+    (rowId, columnId, color = "#fef08a") => {
+      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));
+        }
+        return [...prev, { rowId, columnId, color }];
+      });
+    },
+    []
+  );
+  const getRowHighlight = useCallback2(
+    (rowId) => {
+      return rowHighlights.find((h) => h.rowId === rowId && !h.columnId);
+    },
+    [rowHighlights]
+  );
+  const handleRowHighlightToggle = useCallback2(
+    (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 = useCallback2(
+    (columnId) => {
+      return columnHighlights[columnId];
+    },
+    [columnHighlights]
+  );
+  const handleColumnHighlightToggle = useCallback2((columnId, color) => {
+    setColumnHighlights((prev) => {
+      const newHighlights = { ...prev };
+      if (color === null) {
+        delete newHighlights[columnId];
+      } else {
+        newHighlights[columnId] = color;
+      }
+      return newHighlights;
+    });
+    setHighlightPickerColumn(null);
+  }, []);
+  const clearAllHighlights = useCallback2(() => {
+    setCellHighlights([]);
+    setRowHighlightsInternal([]);
+    setColumnHighlights({});
+  }, []);
+  return {
+    // Cell highlights
+    cellHighlights,
+    getCellHighlight,
+    handleCellHighlightToggle,
+    // Row highlights
+    rowHighlights,
+    getRowHighlight,
+    handleRowHighlightToggle,
+    // Column highlights
+    columnHighlights,
+    getColumnHighlight,
+    handleColumnHighlightToggle,
+    // Picker state
+    highlightPickerRow,
+    setHighlightPickerRow,
+    highlightPickerColumn,
+    setHighlightPickerColumn,
+    // Utility
+    clearAllHighlights
+  };
+}
+
+// src/components/ColorPickerPopover.tsx
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function ColorPickerPopover({
+  title,
+  paletteType = "column",
+  colors,
+  onSelectColor,
+  onClose,
+  className
+}) {
+  const colorPalette = colors ?? [...HIGHLIGHT_COLORS[paletteType], null];
+  return /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs7("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
+    /* @__PURE__ */ jsx7("h3", { className: "text-sm font-semibold mb-3", children: title }),
+    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ jsx7(
+      "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__ */ jsx7("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsx7(
+      "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"
+      }
+    ) })
+  ] }) });
+}
+ColorPickerPopover.displayName = "ColorPickerPopover";
+
+// src/components/SpreadsheetSettingsModal.tsx
+import { useState as useState5, useEffect as useEffect3 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_SETTINGS = {
+  defaultPinnedColumns: [],
+  defaultSort: null,
+  defaultPageSize: 25,
+  defaultZoom: 100,
+  autoSave: true,
+  compactView: false,
+  showRowIndex: true,
+  pinRowIndex: false,
+  rowIndexHighlightColor: void 0
+};
+var SpreadsheetSettingsModal = ({
+  isOpen,
+  onClose,
+  settings,
+  onSave,
+  columns,
+  title = "Spreadsheet Settings",
+  pageSizeOptions = [25, 50, 100, 200]
+}) => {
+  const [activeTab, setActiveTab] = useState5("columns");
+  const [localSettings, setLocalSettings] = useState5(settings);
+  useEffect3(() => {
+    setLocalSettings(settings);
+  }, [settings]);
+  if (!isOpen) return null;
+  const handleSave = () => {
+    onSave(localSettings);
+    onClose();
+  };
+  const handleReset = () => {
+    setLocalSettings(DEFAULT_SETTINGS);
+  };
+  const togglePinnedColumn = (columnId) => {
+    const isPinned = localSettings.defaultPinnedColumns.includes(columnId);
+    if (isPinned) {
+      setLocalSettings({
+        ...localSettings,
+        defaultPinnedColumns: localSettings.defaultPinnedColumns.filter(
+          (col) => col !== columnId
+        )
+      });
+    } else {
+      setLocalSettings({
+        ...localSettings,
+        defaultPinnedColumns: [...localSettings.defaultPinnedColumns, columnId]
+      });
+    }
+  };
+  const handleSortChange = (columnId, direction) => {
+    if (columnId === "") {
+      setLocalSettings({
+        ...localSettings,
+        defaultSort: null
+      });
+    } else {
+      setLocalSettings({
+        ...localSettings,
+        defaultSort: { columnId, direction }
+      });
+    }
+  };
+  const handleDisplaySettingChange = (key, value) => {
+    const newSettings = {
+      ...localSettings,
+      [key]: value
+    };
+    setLocalSettings(newSettings);
+    if (key === "compactView" || key === "autoSave") {
+      onSave(newSettings);
+    }
+  };
+  const tabs = [
+    { id: "columns", label: "Pinned Columns", Icon: HiViewBoards },
+    { id: "sorting", label: "Default Sorting", Icon: HiSortAscending },
+    { id: "display", label: "Display Options", Icon: HiEye }
+  ];
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": "settings-modal-title",
+      children: [
+        /* @__PURE__ */ jsx8(
+          "button",
+          {
+            type: "button",
+            className: "absolute inset-0 cursor-default",
+            onClick: onClose,
+            onKeyDown: (e) => e.key === "Escape" && onClose(),
+            "aria-label": "Close settings"
+          }
+        ),
+        /* @__PURE__ */ jsxs8("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
+          /* @__PURE__ */ jsxs8("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx8(HiCog, { className: "h-6 w-6 text-blue-600" }),
+              /* @__PURE__ */ jsx8("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
+            ] }),
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                onClick: onClose,
+                className: "p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500 hover:text-gray-700",
+                children: /* @__PURE__ */ jsx8(HiX, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx8("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ jsxs8(
+            "button",
+            {
+              type: "button",
+              onClick: () => setActiveTab(tab.id),
+              className: `px-4 py-3 flex items-center gap-2 text-sm font-medium transition-colors border-b-2 ${activeTab === tab.id ? "text-blue-600 border-blue-600" : "text-gray-500 border-transparent hover:text-gray-700"}`,
+              children: [
+                /* @__PURE__ */ jsx8(tab.Icon, { className: "h-4 w-4" }),
+                tab.label
+              ]
+            },
+            tab.id
+          )) }),
+          /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-auto p-6", children: [
+            activeTab === "columns" && /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsxs8("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
+                /* @__PURE__ */ jsx8(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsxs8("div", { children: [
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
+              /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsxs8(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setLocalSettings({
+                      ...localSettings,
+                      pinRowIndex: !localSettings.pinRowIndex
+                    }),
+                    className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${localSettings.pinRowIndex !== false ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
+                    children: [
+                      /* @__PURE__ */ jsx8(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                      /* @__PURE__ */ jsx8("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
+                    ]
+                  }
+                ),
+                columns.map((column) => {
+                  const isPinned = localSettings.defaultPinnedColumns.includes(
+                    column.id
+                  );
+                  return /* @__PURE__ */ jsxs8(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => togglePinnedColumn(column.id),
+                      className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${isPinned ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
+                      children: [
+                        /* @__PURE__ */ jsx8(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsx8("span", { className: "text-sm flex-1 truncate", children: column.label })
+                      ]
+                    },
+                    column.id
+                  );
+                })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { className: "mt-6 p-4 bg-amber-50 border border-amber-200 rounded-lg", children: [
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Row Index Column Highlight" }),
+                /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600 mb-3", children: "Apply a highlight color to the # (row index) column to make it stand out." }),
+                /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                  [
+                    "#fef3c7",
+                    "#dbeafe",
+                    "#dcfce7",
+                    "#fce7f3",
+                    "#f3e8ff",
+                    "#e0e7ff",
+                    "#fed7d7",
+                    "#c6f6d5"
+                  ].map((color) => /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setLocalSettings({
+                        ...localSettings,
+                        rowIndexHighlightColor: localSettings.rowIndexHighlightColor === color ? void 0 : color
+                      }),
+                      className: `w-8 h-8 rounded-lg border-2 transition-all ${localSettings.rowIndexHighlightColor === color ? "border-blue-600 scale-110 ring-2 ring-blue-300" : "border-gray-300 hover:border-gray-400"}`,
+                      style: { backgroundColor: color },
+                      title: localSettings.rowIndexHighlightColor === color ? "Remove highlight" : "Apply highlight"
+                    },
+                    color
+                  )),
+                  localSettings.rowIndexHighlightColor && /* @__PURE__ */ jsx8(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setLocalSettings({
+                        ...localSettings,
+                        rowIndexHighlightColor: void 0
+                      }),
+                      className: "text-sm text-red-600 hover:text-red-700 ml-2 px-2 py-1 rounded hover:bg-red-50",
+                      children: "Clear"
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            activeTab === "sorting" && /* @__PURE__ */ jsxs8("div", { children: [
+              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
+              /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs8("div", { children: [
+                  /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
+                  /* @__PURE__ */ jsxs8(
+                    "select",
+                    {
+                      value: localSettings.defaultSort?.columnId || "",
+                      onChange: (e) => handleSortChange(
+                        e.target.value,
+                        localSettings.defaultSort?.direction || "asc"
+                      ),
+                      className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                      children: [
+                        /* @__PURE__ */ jsx8("option", { value: "", children: "No default sorting" }),
+                        columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ jsx8("option", { value: column.id, children: column.label }, column.id))
+                      ]
+                    }
+                  )
+                ] }),
+                localSettings.defaultSort && /* @__PURE__ */ jsxs8("div", { children: [
+                  /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
+                  /* @__PURE__ */ jsxs8(
+                    "select",
+                    {
+                      value: localSettings.defaultSort.direction,
+                      onChange: (e) => handleSortChange(
+                        localSettings.defaultSort.columnId,
+                        e.target.value
+                      ),
+                      className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                      children: [
+                        /* @__PURE__ */ jsx8("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
+                        /* @__PURE__ */ jsx8("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
+                      ]
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            activeTab === "display" && /* @__PURE__ */ jsxs8("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
+              /* @__PURE__ */ jsxs8("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg", children: [
+                /* @__PURE__ */ jsx8("p", { className: "text-sm font-semibold text-gray-900 mb-3", children: "Row Index Column" }),
+                /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-3 cursor-pointer", children: [
+                    /* @__PURE__ */ jsx8(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: localSettings.showRowIndex !== false,
+                        onChange: (e) => setLocalSettings({
+                          ...localSettings,
+                          showRowIndex: e.target.checked
+                        }),
+                        className: "w-4 h-4 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8("span", { className: "text-sm text-gray-700", children: "Show row index (#) column" })
+                  ] }),
+                  /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-500 ml-7", children: 'Tip: Use the "Pinned Columns" tab to pin and highlight the row index column.' })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
+                /* @__PURE__ */ jsx8(
+                  "select",
+                  {
+                    value: localSettings.defaultPageSize,
+                    onChange: (e) => setLocalSettings({
+                      ...localSettings,
+                      defaultPageSize: parseInt(e.target.value, 10)
+                    }),
+                    className: "w-full p-3 text-sm bg-white border border-gray-300 rounded-lg text-gray-900 cursor-pointer focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
+                    children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs8("option", { value: size, children: [
+                      size,
+                      " rows"
+                    ] }, size))
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { children: [
+                /* @__PURE__ */ jsxs8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
+                  "Default Zoom Level: ",
+                  localSettings.defaultZoom,
+                  "%"
+                ] }),
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  {
+                    type: "range",
+                    min: "50",
+                    max: "150",
+                    step: "10",
+                    value: localSettings.defaultZoom,
+                    onChange: (e) => setLocalSettings({
+                      ...localSettings,
+                      defaultZoom: parseInt(e.target.value, 10)
+                    }),
+                    className: "w-full cursor-pointer"
+                  }
+                ),
+                /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsx8("span", { children: "50%" }),
+                  /* @__PURE__ */ jsx8("span", { children: "150%" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
+                  /* @__PURE__ */ jsx8(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: localSettings.autoSave,
+                      onChange: (e) => handleDisplaySettingChange("autoSave", e.target.checked),
+                      className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsx8("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
+                    /* @__PURE__ */ jsx8("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
+                  /* @__PURE__ */ jsx8(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: localSettings.compactView,
+                      onChange: (e) => handleDisplaySettingChange(
+                        "compactView",
+                        e.target.checked
+                      ),
+                      className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsx8("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
+                    /* @__PURE__ */ jsx8("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
+                  ] })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs8("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
+            /* @__PURE__ */ jsx8(
+              "button",
+              {
+                type: "button",
+                onClick: handleReset,
+                className: "px-4 py-2.5 text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors",
+                children: "Reset to Defaults"
+              }
+            ),
+            /* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  className: "px-4 py-2.5 text-sm font-medium text-gray-700 bg-gray-100 border border-gray-200 rounded-lg hover:bg-gray-200 transition-colors",
+                  children: "Cancel"
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleSave,
+                  className: "px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors",
+                  children: "Save Settings"
+                }
+              )
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
+
+// src/components/CommentModals.tsx
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+function AddCommentModal({
+  isOpen,
+  commentText,
+  onCommentTextChange,
+  onAdd,
+  onClose
+}) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
+    /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold mb-4", children: "Add Row Comment" }),
+    /* @__PURE__ */ jsx9(
+      "textarea",
+      {
+        value: commentText,
+        onChange: (e) => onCommentTextChange(e.target.value),
+        placeholder: "Enter your comment...",
+        className: "w-full h-24 p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none"
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 mt-4", children: [
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "px-4 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: onAdd,
+          disabled: !commentText.trim(),
+          className: "px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+          children: "Add Comment"
+        }
+      )
+    ] })
+  ] }) });
+}
+AddCommentModal.displayName = "AddCommentModal";
+function ViewCommentsModal({
+  isOpen,
+  comments,
+  onToggleResolved,
+  onClose
+}) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("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__ */ jsxs9("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold", children: "Row Comments" }),
+      /* @__PURE__ */ jsx9(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "p-1 hover:bg-gray-100 rounded-lg transition-colors",
+          children: "\u2715"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
+      comments.map((comment) => /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          className: cn(
+            "p-3 rounded-lg border",
+            comment.resolved ? "bg-gray-50 border-gray-200" : "bg-yellow-50 border-yellow-200"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-700", children: comment.text }),
+              /* @__PURE__ */ jsx9(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onToggleResolved(comment.id),
+                  className: cn(
+                    "flex-shrink-0 px-2 py-1 text-xs rounded transition-colors",
+                    comment.resolved ? "bg-gray-200 text-gray-600 hover:bg-gray-300" : "bg-green-100 text-green-700 hover:bg-green-200"
+                  ),
+                  children: comment.resolved ? "Reopen" : "Resolve"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
+              comment.author && /* @__PURE__ */ jsx9("span", { children: comment.author }),
+              /* @__PURE__ */ jsx9("span", { children: new Date(comment.timestamp).toLocaleString() })
+            ] })
+          ]
+        },
+        comment.id
+      )),
+      comments.length === 0 && /* @__PURE__ */ jsx9("p", { className: "text-center text-gray-500 py-8", children: "No comments for this row." })
+    ] })
+  ] }) });
+}
+ViewCommentsModal.displayName = "ViewCommentsModal";
+
+// src/components/KeyboardShortcutsModal.tsx
+import React4 from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+function KeyboardShortcutsModal({
+  isOpen,
+  onClose,
+  shortcuts
+}) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto mx-4", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx10("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
+      /* @__PURE__ */ jsx10(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "p-1 hover:bg-gray-100 rounded",
+          children: /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xl", children: "\u2715" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx10(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx10("span", { className: "text-gray-600 text-sm", children: action.label }),
+        /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xs", children: action.description })
+      ] }, index)) })
+    ] })
+  ] }) });
+}
+function ShortcutSection({ title, children }) {
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx10("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
+    /* @__PURE__ */ jsx10("div", { className: "space-y-2", children })
+  ] });
+}
+function ShortcutRow({ label, keys }) {
+  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx10("span", { className: "text-gray-600 text-sm", children: label }),
+    /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ jsxs10(React4.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx10("span", { className: "text-gray-400", children: "+" }),
+      key.includes("Click") ? /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ jsx10("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
+    ] }, index)) })
+  ] });
+}
+KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
+
+// src/components/Spreadsheet.tsx
+import { Pagination } from "@xcelsior/design-system";
+
+// src/hooks/useSpreadsheetFiltering.ts
+import { useCallback as useCallback3, useMemo as useMemo2, useState as useState6 } from "react";
+function useSpreadsheetFiltering({
+  data,
+  columns,
+  onFilterChange,
+  onSortChange,
+  serverSide = false,
+  controlledFilters,
+  controlledSortConfig
+}) {
+  const [internalFilters, setInternalFilters] = useState6(
+    {}
+  );
+  const [internalSortConfig, setInternalSortConfig] = useState6(
+    null
+  );
+  const [activeFilterColumn, setActiveFilterColumn] = useState6(null);
+  const filters = controlledFilters ?? internalFilters;
+  const sortConfig = controlledSortConfig !== void 0 ? controlledSortConfig : internalSortConfig;
+  const applyTextCondition = useCallback3(
+    (value, condition) => {
+      const strValue = String(value ?? "").toLowerCase();
+      const filterValue = (condition.value ?? "").toLowerCase();
+      switch (condition.operator) {
+        case "contains":
+          return strValue.includes(filterValue);
+        case "notContains":
+          return !strValue.includes(filterValue);
+        case "equals":
+          return strValue === filterValue;
+        case "notEquals":
+          return strValue !== filterValue;
+        case "startsWith":
+          return strValue.startsWith(filterValue);
+        case "endsWith":
+          return strValue.endsWith(filterValue);
+        case "isEmpty":
+          return isBlankValue(value);
+        case "isNotEmpty":
+          return !isBlankValue(value);
+        default:
+          return true;
+      }
+    },
+    []
+  );
+  const applyNumberCondition = useCallback3(
+    (value, condition) => {
+      if (condition.operator === "isEmpty") return isBlankValue(value);
+      if (condition.operator === "isNotEmpty") return !isBlankValue(value);
+      const numValue = typeof value === "number" ? value : parseFloat(value);
+      if (Number.isNaN(numValue)) return false;
+      const filterValue = condition.value;
+      const filterValueTo = condition.valueTo;
+      switch (condition.operator) {
+        case "equals":
+          return filterValue !== void 0 && numValue === filterValue;
+        case "notEquals":
+          return filterValue !== void 0 && numValue !== filterValue;
+        case "greaterThan":
+          return filterValue !== void 0 && numValue > filterValue;
+        case "greaterThanOrEqual":
+          return filterValue !== void 0 && numValue >= filterValue;
+        case "lessThan":
+          return filterValue !== void 0 && numValue < filterValue;
+        case "lessThanOrEqual":
+          return filterValue !== void 0 && numValue <= filterValue;
+        case "between":
+          return filterValue !== void 0 && filterValueTo !== void 0 && numValue >= filterValue && numValue <= filterValueTo;
+        default:
+          return true;
+      }
+    },
+    []
+  );
+  const applyDateCondition = useCallback3(
+    (value, condition) => {
+      if (condition.operator === "isEmpty") return isBlankValue(value);
+      if (condition.operator === "isNotEmpty") return !isBlankValue(value);
+      const dateValue = value ? new Date(value) : null;
+      if (!dateValue || Number.isNaN(dateValue.getTime())) return false;
+      const today = /* @__PURE__ */ new Date();
+      today.setHours(0, 0, 0, 0);
+      const getStartOfWeek = (date) => {
+        const d = new Date(date);
+        const day = d.getDay();
+        const diff = d.getDate() - day;
+        return new Date(d.setDate(diff));
+      };
+      const getStartOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+      const getStartOfYear = (date) => new Date(date.getFullYear(), 0, 1);
+      switch (condition.operator) {
+        case "equals":
+          if (!condition.value) return false;
+          return dateValue.toDateString() === new Date(condition.value).toDateString();
+        case "notEquals":
+          if (!condition.value) return false;
+          return dateValue.toDateString() !== new Date(condition.value).toDateString();
+        case "before":
+          if (!condition.value) return false;
+          return dateValue < new Date(condition.value);
+        case "after":
+          if (!condition.value) return false;
+          return dateValue > new Date(condition.value);
+        case "between":
+          if (!condition.value || !condition.valueTo) return false;
+          return dateValue >= new Date(condition.value) && dateValue <= new Date(condition.valueTo);
+        case "today":
+          return dateValue.toDateString() === today.toDateString();
+        case "yesterday": {
+          const yesterday = new Date(today);
+          yesterday.setDate(yesterday.getDate() - 1);
+          return dateValue.toDateString() === yesterday.toDateString();
+        }
+        case "thisWeek": {
+          const thisWeekStart = getStartOfWeek(today);
+          const thisWeekEnd = new Date(thisWeekStart);
+          thisWeekEnd.setDate(thisWeekEnd.getDate() + 7);
+          return dateValue >= thisWeekStart && dateValue < thisWeekEnd;
+        }
+        case "lastWeek": {
+          const lastWeekStart = getStartOfWeek(today);
+          lastWeekStart.setDate(lastWeekStart.getDate() - 7);
+          const lastWeekEnd = getStartOfWeek(today);
+          return dateValue >= lastWeekStart && dateValue < lastWeekEnd;
+        }
+        case "thisMonth": {
+          const thisMonthStart = getStartOfMonth(today);
+          const thisMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+          return dateValue >= thisMonthStart && dateValue < thisMonthEnd;
+        }
+        case "lastMonth": {
+          const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+          const lastMonthEnd = getStartOfMonth(today);
+          return dateValue >= lastMonthStart && dateValue < lastMonthEnd;
+        }
+        case "thisYear": {
+          const thisYearStart = getStartOfYear(today);
+          const thisYearEnd = new Date(today.getFullYear() + 1, 0, 1);
+          return dateValue >= thisYearStart && dateValue < thisYearEnd;
+        }
+        default:
+          return true;
+      }
+    },
+    []
+  );
+  const filteredData = useMemo2(() => {
+    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];
+        if (filter.includeBlanks && isBlankValue(value)) {
+          return true;
+        }
+        if (filter.excludeBlanks && isBlankValue(value)) {
+          return false;
+        }
+        if (filter.textCondition) {
+          return applyTextCondition(value, filter.textCondition);
+        }
+        if (filter.numberCondition) {
+          return applyNumberCondition(value, filter.numberCondition);
+        }
+        if (filter.dateCondition) {
+          return applyDateCondition(value, filter.dateCondition);
+        }
+        if (filter.selectedValues && filter.selectedValues.length > 0) {
+          const strValue = String(value ?? "");
+          return filter.selectedValues.includes(strValue);
+        }
+        if (filter.min !== void 0 || filter.max !== void 0) {
+          const numValue = typeof value === "number" ? value : parseFloat(value);
+          if (Number.isNaN(numValue)) return false;
+          if (filter.min !== void 0 && numValue < Number(filter.min)) return false;
+          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];
+        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 sortConfig.direction === "asc" ? aValue < bValue ? -1 : aValue > bValue ? 1 : 0 : aValue > bValue ? -1 : aValue < bValue ? 1 : 0;
+      });
+    }
+    return result;
+  }, [
+    data,
+    filters,
+    sortConfig,
+    columns,
+    serverSide,
+    applyDateCondition,
+    applyNumberCondition,
+    applyTextCondition
+  ]);
+  const handleFilterChange = useCallback3(
+    (columnId, filter) => {
+      const newFilters = { ...filters };
+      if (filter) {
+        newFilters[columnId] = filter;
+      } else {
+        delete newFilters[columnId];
+      }
+      if (controlledFilters === void 0) {
+        setInternalFilters(newFilters);
+      }
+      onFilterChange?.(newFilters);
+    },
+    [filters, onFilterChange, controlledFilters]
+  );
+  const handleSort = useCallback3(
+    (columnId) => {
+      const newSortConfig = sortConfig?.columnId === columnId ? { columnId, direction: sortConfig.direction === "asc" ? "desc" : "asc" } : { columnId, direction: "asc" };
+      if (controlledSortConfig === void 0) {
+        setInternalSortConfig(newSortConfig);
+      }
+      onSortChange?.(newSortConfig);
+    },
+    [sortConfig, onSortChange, controlledSortConfig]
+  );
+  const clearAllFilters = useCallback3(() => {
+    if (controlledFilters === void 0) {
+      setInternalFilters({});
+    }
+    onFilterChange?.({});
+  }, [onFilterChange, controlledFilters]);
+  const hasActiveFilters = Object.keys(filters).length > 0;
+  return {
+    filters,
+    sortConfig,
+    filteredData,
+    activeFilterColumn,
+    setActiveFilterColumn,
+    handleFilterChange,
+    handleSort,
+    clearAllFilters,
+    hasActiveFilters
+  };
+}
+
+// src/hooks/useSpreadsheetComments.ts
+import { useCallback as useCallback4, useState as useState7 } from "react";
+function useSpreadsheetComments({
+  externalRowComments,
+  onAddRowComment
+} = {}) {
+  const [rowCommentsInternal, setRowCommentsInternal] = useState7([]);
+  const [commentModalRow, setCommentModalRow] = useState7(null);
+  const [commentText, setCommentText] = useState7("");
+  const [viewCommentsRow, setViewCommentsRow] = useState7(null);
+  const rowComments = externalRowComments || rowCommentsInternal;
+  const getRowComments = useCallback4(
+    (rowId) => {
+      return rowComments.filter((c) => c.rowId === rowId && !c.columnId);
+    },
+    [rowComments]
+  );
+  const getUnresolvedCommentCount = useCallback4(
+    (rowId) => {
+      return rowComments.filter((c) => c.rowId === rowId && !c.columnId && !c.resolved).length;
+    },
+    [rowComments]
+  );
+  const hasComments = useCallback4(
+    (rowId) => {
+      return rowComments.some((c) => c.rowId === rowId && !c.columnId);
+    },
+    [rowComments]
+  );
+  const handleAddRowComment = useCallback4(
+    (rowId) => {
+      if (!commentText.trim()) return;
+      if (onAddRowComment) {
+        onAddRowComment(rowId, commentText);
+      } else {
+        setRowCommentsInternal((prev) => [
+          ...prev,
+          {
+            id: `comment-${Date.now()}`,
+            rowId,
+            text: commentText,
+            timestamp: /* @__PURE__ */ new Date(),
+            resolved: false
+          }
+        ]);
+      }
+      setCommentText("");
+      setCommentModalRow(null);
+    },
+    [commentText, onAddRowComment]
+  );
+  const handleToggleCommentResolved = useCallback4((commentId) => {
+    setRowCommentsInternal(
+      (prev) => prev.map((c) => c.id === commentId ? { ...c, resolved: !c.resolved } : c)
+    );
+  }, []);
+  return {
+    // Comments data
+    rowComments,
+    getRowComments,
+    getUnresolvedCommentCount,
+    // Add comment modal state
+    commentModalRow,
+    setCommentModalRow,
+    commentText,
+    setCommentText,
+    // View comments modal state
+    viewCommentsRow,
+    setViewCommentsRow,
+    // Actions
+    handleAddRowComment,
+    handleToggleCommentResolved,
+    // Utility
+    hasComments
+  };
+}
+
+// src/hooks/useSpreadsheetUndoRedo.ts
+import { useCallback as useCallback5, useState as useState8 } from "react";
+function useSpreadsheetUndoRedo({
+  enabled = true,
+  maxStackSize = 50,
+  autoSave = true
+}) {
+  const [undoStack, setUndoStack] = useState8([]);
+  const [redoStack, setRedoStack] = useState8([]);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState8(false);
+  const [saveStatus, setSaveStatus] = useState8("saved");
+  const pushToUndoStack = useCallback5(
+    (snapshot) => {
+      if (!enabled) return;
+      setUndoStack((prev) => {
+        const newStack = [...prev, snapshot];
+        if (newStack.length > maxStackSize) {
+          return newStack.slice(-maxStackSize);
+        }
+        return newStack;
+      });
+      setRedoStack([]);
+    },
+    [enabled, maxStackSize]
+  );
+  const handleUndo = useCallback5(() => {
+    if (!enabled || undoStack.length === 0) return null;
+    const previousSnapshot = undoStack[undoStack.length - 1];
+    setUndoStack((prev) => prev.slice(0, -1));
+    setRedoStack((prev) => {
+      const newStack = [...prev, previousSnapshot];
+      if (newStack.length > maxStackSize) {
+        return newStack.slice(-maxStackSize);
+      }
+      return newStack;
+    });
+    return previousSnapshot;
+  }, [enabled, undoStack, maxStackSize]);
+  const handleRedo = useCallback5(() => {
+    if (!enabled || redoStack.length === 0) return null;
+    const nextSnapshot = redoStack[redoStack.length - 1];
+    setRedoStack((prev) => prev.slice(0, -1));
+    setUndoStack((prev) => {
+      const newStack = [...prev, nextSnapshot];
+      if (newStack.length > maxStackSize) {
+        return newStack.slice(-maxStackSize);
+      }
+      return newStack;
+    });
+    return nextSnapshot;
+  }, [enabled, redoStack, maxStackSize]);
+  const handleSave = useCallback5(() => {
+    if (!hasUnsavedChanges) return;
+    setSaveStatus("saving");
+    setTimeout(() => {
+      setSaveStatus("saved");
+      setHasUnsavedChanges(false);
+    }, 500);
+  }, [hasUnsavedChanges]);
+  const markAsChanged = useCallback5(() => {
+    setHasUnsavedChanges(true);
+    if (autoSave) {
+      setSaveStatus("saving");
+      setTimeout(() => setSaveStatus("saved"), 500);
+    } else {
+      setSaveStatus("unsaved");
+    }
+  }, [autoSave]);
+  const markAsSaved = useCallback5(() => {
+    setHasUnsavedChanges(false);
+    setSaveStatus("saved");
+  }, []);
+  const clearStacks = useCallback5(() => {
+    setUndoStack([]);
+    setRedoStack([]);
+  }, []);
+  return {
+    // State
+    undoStack,
+    redoStack,
+    hasUnsavedChanges,
+    saveStatus,
+    // Computed
+    canUndo: enabled && undoStack.length > 0,
+    canRedo: enabled && redoStack.length > 0,
+    undoCount: undoStack.length,
+    redoCount: redoStack.length,
+    // Actions
+    handleUndo,
+    handleRedo,
+    handleSave,
+    pushToUndoStack,
+    clearStacks,
+    // Change tracking
+    markAsChanged,
+    markAsSaved
+  };
+}
+
+// src/hooks/useSpreadsheetKeyboardShortcuts.ts
+import { useEffect as useEffect4, useState as useState9 } from "react";
+function useSpreadsheetKeyboardShortcuts({
+  onUndo,
+  onRedo,
+  onEscape,
+  customShortcuts = [],
+  enabled = true
+} = {}) {
+  const [showKeyboardShortcuts, setShowKeyboardShortcuts] = useState9(false);
+  const isMac = typeof navigator !== "undefined" && /Mac|iPhone|iPod|iPad/.test(navigator.platform);
+  const modifierKey = isMac ? "\u2318" : "Ctrl";
+  useEffect4(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        if (showKeyboardShortcuts) {
+          setShowKeyboardShortcuts(false);
+        } else {
+          onEscape?.();
+        }
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === "/") {
+        event.preventDefault();
+        setShowKeyboardShortcuts((prev) => !prev);
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === "z" && !event.shiftKey) {
+        event.preventDefault();
+        onUndo?.();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === "z") {
+        event.preventDefault();
+        onRedo?.();
+        return;
+      }
+      for (const shortcut of customShortcuts) {
+        const modifiersMatch = (!shortcut.modifiers?.meta || event.metaKey) && (!shortcut.modifiers?.ctrl || event.ctrlKey) && (!shortcut.modifiers?.shift || event.shiftKey) && (!shortcut.modifiers?.alt || event.altKey);
+        if (event.key === shortcut.key && modifiersMatch) {
+          event.preventDefault();
+          shortcut.handler();
+          return;
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, showKeyboardShortcuts, onUndo, onRedo, onEscape, customShortcuts]);
+  const shortcuts = {
+    general: [
+      { label: "Show keyboard shortcuts", keys: [modifierKey, "/"] },
+      { label: "Close modal / Clear selection", keys: ["Escape"] }
+    ],
+    rowSelection: [
+      { label: "Select single row", keys: ["Click row number"] },
+      { label: "Select multiple rows", keys: [modifierKey, "Click row number"] },
+      { label: "Select range of rows", keys: ["Shift", "Click row number"] }
+    ],
+    editing: [
+      { label: "Undo", keys: [modifierKey, "Z"] },
+      { label: "Redo", keys: [modifierKey, "Shift", "Z"] },
+      { label: "Confirm cell edit", keys: ["Enter"] },
+      { label: "Cancel cell edit", keys: ["Escape"] }
+    ],
+    rowActions: [
+      { label: "Duplicate row", description: "Click duplicate icon" },
+      { label: "Highlight row", description: "Click highlight icon" },
+      { label: "Add row comment", description: "Click comment icon" }
+    ]
+  };
+  return {
+    showKeyboardShortcuts,
+    setShowKeyboardShortcuts,
+    isMac,
+    modifierKey,
+    shortcuts
+  };
+}
+
+// src/components/Spreadsheet.tsx
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+function Spreadsheet({
+  data,
+  columns,
+  columnGroups,
+  getRowId,
+  onCellEdit,
+  onSelectionChange,
+  onSortChange,
+  onFilterChange,
+  onRowClick,
+  onRowDoubleClick,
+  onRowClone,
+  onAddRowComment,
+  onRowHighlight,
+  showToolbar = true,
+  showPagination = true,
+  showRowIndex = true,
+  enableRowSelection = true,
+  enableCellEditing = true,
+  enableComments = true,
+  enableHighlighting = true,
+  enableUndoRedo = true,
+  defaultPageSize = 25,
+  pageSizeOptions = [25, 50, 100, 200],
+  defaultZoom = 100,
+  autoSave = true,
+  compactMode = false,
+  isLoading = false,
+  className,
+  emptyMessage = "No data available",
+  rowHighlights: externalRowHighlights,
+  rowComments: externalRowComments,
+  rowActions,
+  // Server-side mode props
+  serverSide = false,
+  totalItems,
+  currentPage: controlledCurrentPage,
+  pageSize: controlledPageSize,
+  onPageChange,
+  sortConfig: controlledSortConfig,
+  filters: controlledFilters
+}) {
+  const {
+    filters,
+    sortConfig,
+    filteredData,
+    activeFilterColumn,
+    setActiveFilterColumn,
+    handleFilterChange,
+    handleSort,
+    clearAllFilters,
+    hasActiveFilters
+  } = useSpreadsheetFiltering({
+    data,
+    columns,
+    onFilterChange,
+    onSortChange,
+    serverSide,
+    controlledFilters,
+    controlledSortConfig
+  });
+  const {
+    getCellHighlight,
+    handleCellHighlightToggle,
+    getRowHighlight,
+    handleRowHighlightToggle,
+    getColumnHighlight,
+    handleColumnHighlightToggle,
+    highlightPickerRow,
+    setHighlightPickerRow,
+    highlightPickerColumn,
+    setHighlightPickerColumn
+  } = useSpreadsheetHighlighting({
+    externalRowHighlights,
+    onRowHighlight
+  });
+  const {
+    pinnedColumns,
+    isRowIndexPinned,
+    collapsedGroups,
+    visibleColumns,
+    handleTogglePin,
+    handleToggleRowIndexPin,
+    handleToggleGroupCollapse,
+    getColumnLeftOffset,
+    isColumnPinned,
+    getColumnPinSide
+  } = useSpreadsheetPinning({
+    columns,
+    columnGroups,
+    showRowIndex
+  });
+  const {
+    getRowComments,
+    getUnresolvedCommentCount,
+    hasComments,
+    commentModalRow,
+    setCommentModalRow,
+    commentText,
+    setCommentText,
+    viewCommentsRow,
+    setViewCommentsRow,
+    handleAddRowComment,
+    handleToggleCommentResolved
+  } = useSpreadsheetComments({
+    externalRowComments,
+    onAddRowComment
+  });
+  const {
+    canUndo,
+    canRedo,
+    undoCount,
+    redoCount,
+    hasUnsavedChanges,
+    saveStatus,
+    handleUndo: popUndoEntry,
+    handleRedo: popRedoEntry,
+    handleSave,
+    pushToUndoStack,
+    markAsChanged
+  } = useSpreadsheetUndoRedo({
+    enabled: enableUndoRedo,
+    autoSave
+  });
+  const [selectedRows, setSelectedRows] = useState10(/* @__PURE__ */ new Set());
+  const [lastSelectedRow, setLastSelectedRow] = useState10(null);
+  const [focusedCell, setFocusedCell] = useState10(null);
+  const [editingCell, setEditingCell] = useState10(null);
+  const [editValue, setEditValue] = useState10("");
+  const [hoveredRow, setHoveredRow] = useState10(null);
+  const [internalCurrentPage, setInternalCurrentPage] = useState10(1);
+  const [internalPageSize, setInternalPageSize] = useState10(defaultPageSize);
+  const [zoom, setZoom] = useState10(defaultZoom);
+  const currentPage = controlledCurrentPage ?? internalCurrentPage;
+  const pageSize = controlledPageSize ?? internalPageSize;
+  const handlePageChange = useCallback6(
+    (newPage) => {
+      if (controlledCurrentPage === void 0) {
+        setInternalCurrentPage(newPage);
+      }
+      onPageChange?.(newPage, pageSize);
+    },
+    [controlledCurrentPage, onPageChange, pageSize]
+  );
+  const handlePageSizeChange = useCallback6(
+    (newPageSize) => {
+      if (controlledPageSize === void 0) {
+        setInternalPageSize(newPageSize);
+      }
+      if (controlledCurrentPage === void 0) {
+        setInternalCurrentPage(1);
+      }
+      onPageChange?.(1, newPageSize);
+    },
+    [controlledPageSize, controlledCurrentPage, onPageChange]
+  );
+  const [showSettingsModal, setShowSettingsModal] = useState10(false);
+  const [spreadsheetSettings, setSpreadsheetSettings] = useState10({
+    defaultPinnedColumns: [],
+    defaultSort: null,
+    defaultPageSize,
+    defaultZoom,
+    autoSave,
+    compactView: compactMode,
+    showRowIndex,
+    pinRowIndex: false,
+    rowIndexHighlightColor: void 0
+  });
+  const handleEscapeCallback = useCallback6(() => {
+    if (commentModalRow !== null) {
+      setCommentModalRow(null);
+    } else if (viewCommentsRow !== null) {
+      setViewCommentsRow(null);
+    } else if (highlightPickerRow !== null) {
+      setHighlightPickerRow(null);
+    } else if (highlightPickerColumn !== null) {
+      setHighlightPickerColumn(null);
+    } else {
+      setSelectedRows(/* @__PURE__ */ new Set());
+      setLastSelectedRow(null);
+      setFocusedCell(null);
+      setEditingCell(null);
+    }
+  }, [
+    commentModalRow,
+    setCommentModalRow,
+    viewCommentsRow,
+    setViewCommentsRow,
+    highlightPickerRow,
+    setHighlightPickerRow,
+    highlightPickerColumn,
+    setHighlightPickerColumn
+  ]);
+  const applyUndo = useCallback6(() => {
+    const entry = popUndoEntry();
+    if (!entry || !onCellEdit) return;
+    if (entry.type === "cell-edit") {
+      onCellEdit(entry.rowId, entry.columnId, entry.previousValue);
+      markAsChanged();
+    }
+  }, [popUndoEntry, onCellEdit, markAsChanged]);
+  const applyRedo = useCallback6(() => {
+    const entry = popRedoEntry();
+    if (!entry || !onCellEdit) return;
+    if (entry.type === "cell-edit") {
+      onCellEdit(entry.rowId, entry.columnId, entry.nextValue);
+      markAsChanged();
+    }
+  }, [popRedoEntry, onCellEdit, markAsChanged]);
+  const { showKeyboardShortcuts, setShowKeyboardShortcuts, shortcuts } = useSpreadsheetKeyboardShortcuts({
+    onUndo: applyUndo,
+    onRedo: applyRedo,
+    onEscape: handleEscapeCallback,
+    enabled: true
+  });
+  const effectiveShowRowIndex = spreadsheetSettings.showRowIndex !== false;
+  const rowIndexHighlightColor = getColumnHighlight(ROW_INDEX_COLUMN_ID);
+  const tableRef = useRef3(null);
+  const effectiveTotalItems = serverSide ? totalItems ?? data.length : filteredData.length;
+  const paginatedData = useMemo3(() => {
+    if (serverSide) {
+      return filteredData;
+    }
+    const startIndex = (currentPage - 1) * pageSize;
+    return filteredData.slice(startIndex, startIndex + pageSize);
+  }, [filteredData, currentPage, pageSize, serverSide]);
+  const totalPages = Math.max(1, Math.ceil(effectiveTotalItems / pageSize));
+  useEffect5(() => {
+    if (!serverSide && currentPage > totalPages) {
+      setInternalCurrentPage(1);
+    }
+  }, [totalPages, currentPage, serverSide]);
+  const handleRowSelect = useCallback6(
+    (rowId, event) => {
+      if (!enableRowSelection) return;
+      event.stopPropagation();
+      if (event.shiftKey && lastSelectedRow !== null) {
+        const currentIndex = filteredData.findIndex((r) => getRowId(r) === rowId);
+        const lastIndex = filteredData.findIndex((r) => getRowId(r) === lastSelectedRow);
+        if (currentIndex !== -1 && lastIndex !== -1) {
+          const start = Math.min(currentIndex, lastIndex);
+          const end = Math.max(currentIndex, lastIndex);
+          const newSelection = new Set(selectedRows);
+          for (let i = start; i <= end; i++) {
+            newSelection.add(getRowId(filteredData[i]));
+          }
+          setSelectedRows(newSelection);
+          onSelectionChange?.(Array.from(newSelection));
+        }
+      } else if (event.metaKey || event.ctrlKey) {
+        const newSelection = new Set(selectedRows);
+        if (newSelection.has(rowId)) {
+          newSelection.delete(rowId);
+        } else {
+          newSelection.add(rowId);
+        }
+        setSelectedRows(newSelection);
+        setLastSelectedRow(rowId);
+        onSelectionChange?.(Array.from(newSelection));
+      } else {
+        if (selectedRows.has(rowId) && selectedRows.size === 1) {
+          setSelectedRows(/* @__PURE__ */ new Set());
+          setLastSelectedRow(null);
+          onSelectionChange?.([]);
+        } else {
+          setSelectedRows(/* @__PURE__ */ new Set([rowId]));
+          setLastSelectedRow(rowId);
+          onSelectionChange?.([rowId]);
+        }
+      }
+    },
+    [
+      enableRowSelection,
+      lastSelectedRow,
+      filteredData,
+      selectedRows,
+      getRowId,
+      onSelectionChange
+    ]
+  );
+  const handleCellClick = useCallback6(
+    (rowId, columnId, event) => {
+      event.stopPropagation();
+      setFocusedCell({ rowId, columnId });
+      const column = (columns || []).find((c) => c.id === columnId);
+      if (column?.editable && enableCellEditing) {
+        const row = (data || []).find((r) => getRowId(r) === rowId);
+        if (row) {
+          const value = column.getValue ? column.getValue(row) : row[columnId];
+          setEditingCell({ rowId, columnId });
+          setEditValue(value);
+        }
+      }
+    },
+    [columns, data, getRowId, enableCellEditing]
+  );
+  const handleCellChange = useCallback6(
+    (rowId, columnId, newValue) => {
+      const row = data.find((r) => getRowId(r) === rowId);
+      const previousValue = row ? row[columnId] : void 0;
+      if (row && Object.is(previousValue, newValue)) {
+        return;
+      }
+      if (row && enableUndoRedo) {
+        pushToUndoStack({
+          type: "cell-edit",
+          rowId,
+          columnId,
+          previousValue,
+          nextValue: newValue
+        });
+      }
+      onCellEdit?.(rowId, columnId, newValue);
+      markAsChanged();
+    },
+    [data, getRowId, enableUndoRedo, onCellEdit, pushToUndoStack, markAsChanged]
+  );
+  const handleConfirmEdit = useCallback6(() => {
+    if (editingCell) {
+      handleCellChange(editingCell.rowId, editingCell.columnId, editValue);
+      setEditingCell(null);
+    }
+  }, [editingCell, editValue, handleCellChange]);
+  const handleCancelEdit = useCallback6(() => {
+    setEditingCell(null);
+    setEditValue("");
+  }, []);
+  const handleRowClone = useCallback6(
+    (row, rowId) => {
+      onRowClone?.(row, rowId);
+    },
+    [onRowClone]
+  );
+  const handleRowIndexHighlightClick = useCallback6(() => {
+    setHighlightPickerColumn(ROW_INDEX_COLUMN_ID);
+  }, [setHighlightPickerColumn]);
+  return /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col h-full bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ jsx11(
+      SpreadsheetToolbar,
+      {
+        zoom,
+        canUndo,
+        canRedo,
+        undoCount,
+        redoCount,
+        selectedRowCount: selectedRows.size,
+        hasUnsavedChanges,
+        saveStatus,
+        autoSave,
+        hasActiveFilters,
+        onClearFilters: clearAllFilters,
+        onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
+        onZoomOut: () => setZoom((z) => Math.max(z - 10, 50)),
+        onZoomReset: () => setZoom(100),
+        onUndo: applyUndo,
+        onRedo: applyRedo,
+        onClearSelection: () => {
+          setSelectedRows(/* @__PURE__ */ new Set());
+          setLastSelectedRow(null);
+          onSelectionChange?.([]);
+        },
+        onSave: handleSave,
+        onSettings: () => setShowSettingsModal(true),
+        onShowShortcuts: () => setShowKeyboardShortcuts(true),
+        onExport: () => console.log("Export clicked")
+      }
+    ),
+    /* @__PURE__ */ jsx11("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ jsx11(
+      "div",
+      {
+        style: {
+          transform: `scale(${zoom / 100})`,
+          transformOrigin: "top left",
+          width: `${100 / (zoom / 100)}%`
+        },
+        children: /* @__PURE__ */ jsxs11("table", { className: "w-full border-separate border-spacing-0 text-xs", children: [
+          /* @__PURE__ */ jsxs11("thead", { children: [
+            columnGroups && /* @__PURE__ */ jsxs11("tr", { children: [
+              effectiveShowRowIndex && /* @__PURE__ */ jsx11(
+                RowIndexColumnHeader,
+                {
+                  enableHighlighting,
+                  highlightColor: rowIndexHighlightColor,
+                  isPinned: isRowIndexPinned,
+                  onHighlightClick: handleRowIndexHighlightClick,
+                  onPinClick: handleToggleRowIndexPin,
+                  hasColumnGroups: true
+                }
+              ),
+              columnGroups.map((group) => {
+                const groupColumns = (columns || []).filter(
+                  (c) => group.columns.includes(c.id)
+                );
+                const isCollapsed = collapsedGroups.has(group.id);
+                const visibleGroupColumns = isCollapsed ? groupColumns.filter((c) => pinnedColumns.has(c.id)) : groupColumns;
+                const colSpan = Math.max(
+                  1,
+                  visibleGroupColumns.length + (isCollapsed ? 1 : 0)
+                );
+                return /* @__PURE__ */ jsx11(
+                  "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"
+                    ),
+                    style: {
+                      backgroundColor: group.headerColor || "rgb(243 244 246)"
+                    },
+                    onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
+                    children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-center gap-1", children: [
+                      group.collapsible && (isCollapsed ? /* @__PURE__ */ jsx11(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx11(HiChevronDown, { className: "h-3 w-3" })),
+                      /* @__PURE__ */ jsx11("span", { children: group.label })
+                    ] })
+                  },
+                  group.id
+                );
+              })
+            ] }),
+            /* @__PURE__ */ jsxs11("tr", { children: [
+              effectiveShowRowIndex && !columnGroups && /* @__PURE__ */ jsx11(
+                RowIndexColumnHeader,
+                {
+                  enableHighlighting,
+                  highlightColor: rowIndexHighlightColor,
+                  isPinned: isRowIndexPinned,
+                  onHighlightClick: handleRowIndexHighlightClick,
+                  onPinClick: handleToggleRowIndexPin,
+                  hasColumnGroups: false
+                }
+              ),
+              visibleColumns.map((column) => {
+                const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
+                return /* @__PURE__ */ jsx11(
+                  SpreadsheetHeader,
+                  {
+                    column,
+                    sortConfig,
+                    hasActiveFilter: !!filters[column.id],
+                    isPinned: isColumnPinned(column.id),
+                    pinSide: getColumnPinSide(column.id),
+                    leftOffset: isPinnedLeft ? getColumnLeftOffset(column.id) : 0,
+                    highlightColor: getColumnHighlight(column.id),
+                    compactMode,
+                    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__ */ jsx11(
+                      SpreadsheetFilterDropdown,
+                      {
+                        column,
+                        filter: filters[column.id],
+                        onFilterChange: (filter) => handleFilterChange(column.id, filter),
+                        onClose: () => setActiveFilterColumn(null)
+                      }
+                    )
+                  },
+                  column.id
+                );
+              })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx11("tbody", { children: isLoading ? /* @__PURE__ */ jsx11("tr", { children: /* @__PURE__ */ jsx11(
+            "td",
+            {
+              colSpan: visibleColumns.length + (effectiveShowRowIndex ? 1 : 0),
+              className: "text-center py-8 text-gray-500",
+              children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsx11("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+                "Loading..."
+              ] })
+            }
+          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx11("tr", { children: /* @__PURE__ */ jsx11(
+            "td",
+            {
+              colSpan: visibleColumns.length + (effectiveShowRowIndex ? 1 : 0),
+              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 rowCommentsList = getRowComments(rowId);
+            const hasRowComments = hasComments(rowId);
+            const unresolvedCount = getUnresolvedCommentCount(rowId);
+            const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
+            return /* @__PURE__ */ jsxs11(
+              "tr",
+              {
+                onMouseEnter: () => setHoveredRow(rowId),
+                onMouseLeave: () => setHoveredRow(null),
+                onClick: () => {
+                  onRowClick?.(row, rowIndex);
+                },
+                onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
+                className: "transition-colors",
+                children: [
+                  effectiveShowRowIndex && /* @__PURE__ */ jsxs11(
+                    "td",
+                    {
+                      onClick: (e) => handleRowSelect(rowId, e),
+                      className: cn(
+                        "border border-gray-200 text-center font-semibold cursor-pointer group relative",
+                        isRowIndexPinned ? "z-20" : "z-0",
+                        isRowSelected && "bg-blue-100",
+                        !isRowSelected && rowHighlight && "",
+                        isRowHovered && !isRowSelected && !rowHighlight && "bg-gray-50"
+                      ),
+                      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__ */ jsx11("div", { className: "py-1 px-1", children: displayIndex }),
+                        hasRowComments && /* @__PURE__ */ jsxs11(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              setViewCommentsRow(rowId);
+                            },
+                            className: "absolute top-0 right-0 p-0.5 hover:bg-gray-200/80 rounded-bl",
+                            title: `${rowCommentsList.length} row comment(s) - ${unresolvedCount} unresolved`,
+                            children: [
+                              /* @__PURE__ */ jsx11(
+                                HiChatAlt2,
+                                {
+                                  className: cn(
+                                    "h-2.5 w-2.5",
+                                    unresolvedCount > 0 ? "text-amber-500" : "text-gray-400"
+                                  )
+                                }
+                              ),
+                              unresolvedCount > 0 && /* @__PURE__ */ jsx11("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 })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs11("div", { className: "absolute inset-x-0 bottom-0 opacity-0 group-hover:opacity-100 flex items-center justify-center gap-0.5 transition-opacity bg-white/90 py-0.5 border-t border-gray-100", children: [
+                          onRowClone && /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                handleRowClone(row, rowId);
+                              },
+                              className: "p-0.5 hover:bg-gray-200 rounded",
+                              title: "Duplicate row",
+                              children: /* @__PURE__ */ jsx11(HiDuplicate, { className: "h-2.5 w-2.5 text-gray-500" })
+                            }
+                          ),
+                          enableHighlighting && /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                setHighlightPickerRow(rowId);
+                              },
+                              className: "p-0.5 hover:bg-gray-200 rounded",
+                              title: "Highlight row",
+                              children: /* @__PURE__ */ jsx11(
+                                HiColorSwatch,
+                                {
+                                  className: cn(
+                                    "h-2.5 w-2.5",
+                                    rowHighlight ? "text-amber-500" : "text-gray-500"
+                                  )
+                                }
+                              )
+                            }
+                          ),
+                          enableComments && /* @__PURE__ */ jsx11(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                setCommentModalRow(rowId);
+                              },
+                              className: "p-0.5 hover:bg-gray-200 rounded",
+                              title: "Add row comment",
+                              children: /* @__PURE__ */ jsx11(HiAnnotation, { className: "h-2.5 w-2.5 text-gray-500" })
+                            }
+                          ),
+                          rowActions?.map((action) => {
+                            if (action.visible && !action.visible(row))
+                              return null;
+                            return /* @__PURE__ */ jsx11(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  action.onClick(row, rowId);
+                                },
+                                className: cn(
+                                  "p-0.5 hover:bg-gray-200 rounded",
+                                  action.className
+                                ),
+                                title: action.tooltip,
+                                children: action.icon
+                              },
+                              action.id
+                            );
+                          })
+                        ] })
+                      ]
+                    }
+                  ),
+                  visibleColumns.map((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 cellOrRowOrColumnHighlight = getCellHighlight(rowId, column.id) || rowHighlight?.color || getColumnHighlight(column.id);
+                    const isColPinned = isColumnPinned(column.id);
+                    const colPinSide = getColumnPinSide(column.id);
+                    return /* @__PURE__ */ jsx11(
+                      SpreadsheetCell,
+                      {
+                        value: isEditing ? editValue : value,
+                        column,
+                        row,
+                        rowIndex,
+                        rowId,
+                        isEditable: column.editable && enableCellEditing,
+                        isEditing,
+                        isFocused,
+                        isRowSelected,
+                        isRowHovered,
+                        highlightColor: cellOrRowOrColumnHighlight,
+                        compactMode,
+                        hasSelectedRows: selectedRows.size > 1,
+                        isPinned: isColPinned,
+                        pinSide: colPinSide,
+                        leftOffset: getColumnLeftOffset(column.id),
+                        onClick: (e) => handleCellClick(rowId, column.id, e),
+                        onChange: (newValue) => setEditValue(newValue),
+                        onConfirm: handleConfirmEdit,
+                        onCancel: handleCancelEdit,
+                        onHighlight: enableHighlighting ? () => {
+                          handleCellHighlightToggle(
+                            rowId,
+                            column.id
+                          );
+                        } : void 0
+                      },
+                      column.id
+                    );
+                  })
+                ]
+              },
+              rowId
+            );
+          }) })
+        ] })
+      }
+    ) }),
+    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ jsx11(
+      Pagination,
+      {
+        currentPage,
+        totalPages,
+        pageSize,
+        totalItems: effectiveTotalItems,
+        startItem: (currentPage - 1) * pageSize + 1,
+        endItem: Math.min(currentPage * pageSize, effectiveTotalItems),
+        pageSizeOptions,
+        itemLabel: "rows",
+        onPageChange: handlePageChange,
+        onPageSizeChange: handlePageSizeChange
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      AddCommentModal,
+      {
+        isOpen: commentModalRow !== null,
+        commentText,
+        onCommentTextChange: setCommentText,
+        onAdd: () => commentModalRow !== null && handleAddRowComment(commentModalRow),
+        onClose: () => {
+          setCommentText("");
+          setCommentModalRow(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      ViewCommentsModal,
+      {
+        isOpen: viewCommentsRow !== null,
+        comments: viewCommentsRow !== null ? getRowComments(viewCommentsRow) : [],
+        onToggleResolved: handleToggleCommentResolved,
+        onClose: () => setViewCommentsRow(null)
+      }
+    ),
+    highlightPickerRow !== null && /* @__PURE__ */ jsx11(
+      ColorPickerPopover,
+      {
+        title: "Highlight Row",
+        paletteType: "row",
+        onSelectColor: (color) => handleRowHighlightToggle(highlightPickerRow, color),
+        onClose: () => setHighlightPickerRow(null)
+      }
+    ),
+    highlightPickerColumn !== null && /* @__PURE__ */ jsx11(
+      ColorPickerPopover,
+      {
+        title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
+        paletteType: "column",
+        onSelectColor: (color) => handleColumnHighlightToggle(highlightPickerColumn, color),
+        onClose: () => setHighlightPickerColumn(null)
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      KeyboardShortcutsModal,
+      {
+        isOpen: showKeyboardShortcuts,
+        onClose: () => setShowKeyboardShortcuts(false),
+        shortcuts
+      }
+    ),
+    /* @__PURE__ */ jsx11(
+      SpreadsheetSettingsModal,
+      {
+        isOpen: showSettingsModal,
+        onClose: () => setShowSettingsModal(false),
+        settings: spreadsheetSettings,
+        onSave: (newSettings) => {
+          setSpreadsheetSettings(newSettings);
+          setZoom(newSettings.defaultZoom);
+          if (newSettings.defaultPageSize !== pageSize) {
+            handlePageSizeChange(newSettings.defaultPageSize);
+          }
+          if (newSettings.defaultSort) {
+          }
+        },
+        columns: columns || [],
+        title: "Spreadsheet Settings",
+        pageSizeOptions
+      }
+    )
+  ] });
+}
+Spreadsheet.displayName = "Spreadsheet";
+export {
+  Spreadsheet,
+  SpreadsheetCell,
+  SpreadsheetFilterDropdown,
+  SpreadsheetHeader,
+  SpreadsheetSettingsModal,
+  SpreadsheetToolbar
+};
+//# sourceMappingURL=index.mjs.map