@xcelsior/ui-spreadsheets 1.1.14 → 1.1.15

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ActiveFiltersDisplay: () => ActiveFiltersDisplay,
   RowContextMenu: () => RowContextMenu,
   Spreadsheet: () => Spreadsheet,
   SpreadsheetCell: () => MemoizedSpreadsheetCell,
@@ -193,7 +194,7 @@ var import_react4 = require("react");
 var import_react3 = require("react");
 var ROW_INDEX_COLUMN_ID = "__row_index__";
 var ROW_INDEX_COLUMN_WIDTH = 80;
-var MIN_PINNED_COLUMN_WIDTH = 100;
+var MIN_PINNED_COLUMN_WIDTH = 150;
 function useSpreadsheetPinning({
   columns,
   columnGroups,
@@ -561,8 +562,14 @@ var SpreadsheetCell = ({
         // Pinned columns must have a fixed width so sticky offsets stay correct.
         // Enforce MIN_PINNED_COLUMN_WIDTH so header actions always fit.
         ...isPinned && {
-          width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-          maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
+          width: Math.max(
+            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+            MIN_PINNED_COLUMN_WIDTH
+          ),
+          maxWidth: Math.max(
+            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+            MIN_PINNED_COLUMN_WIDTH
+          )
         },
         ...positionStyles,
         ...selectionBorderStyles
@@ -970,7 +977,198 @@ SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
 
 // src/components/SpreadsheetToolbar.tsx
 var import_react6 = __toESM(require("react"));
+
+// src/components/ActiveFiltersDisplay.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var TEXT_OPERATOR_LABELS = {
+  contains: "contains",
+  notContains: "does not contain",
+  equals: "equals",
+  notEquals: "does not equal",
+  startsWith: "starts with",
+  endsWith: "ends with",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty"
+};
+var NUMBER_OPERATOR_LABELS = {
+  equals: "=",
+  notEquals: "\u2260",
+  greaterThan: ">",
+  greaterThanOrEqual: "\u2265",
+  lessThan: "<",
+  lessThanOrEqual: "\u2264",
+  between: "between",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty"
+};
+var DATE_OPERATOR_LABELS = {
+  equals: "is",
+  notEquals: "is not",
+  before: "before",
+  after: "after",
+  between: "between",
+  today: "is today",
+  yesterday: "is yesterday",
+  thisWeek: "is this week",
+  lastWeek: "is last week",
+  thisMonth: "is this month",
+  lastMonth: "is last month",
+  thisYear: "is this year",
+  isEmpty: "is empty",
+  isNotEmpty: "is not empty"
+};
+function formatFilter(filter, _column) {
+  const parts = [];
+  if (filter.textCondition) {
+    const { operator, value } = filter.textCondition;
+    const label = TEXT_OPERATOR_LABELS[operator];
+    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+      parts.push(label);
+    } else if (value) {
+      parts.push(`${label} "${value}"`);
+    }
+  }
+  if (filter.numberCondition) {
+    const { operator, value, valueTo } = filter.numberCondition;
+    const label = NUMBER_OPERATOR_LABELS[operator];
+    if (["isEmpty", "isNotEmpty"].includes(operator)) {
+      parts.push(label);
+    } else if (operator === "between" && value !== void 0 && valueTo !== void 0) {
+      parts.push(`${label} ${value} and ${valueTo}`);
+    } else if (value !== void 0) {
+      parts.push(`${label} ${value}`);
+    }
+  }
+  if (filter.dateCondition) {
+    const { operator, value, valueTo } = filter.dateCondition;
+    const label = DATE_OPERATOR_LABELS[operator];
+    const noValueOperators = [
+      "isEmpty",
+      "isNotEmpty",
+      "today",
+      "yesterday",
+      "thisWeek",
+      "lastWeek",
+      "thisMonth",
+      "lastMonth",
+      "thisYear"
+    ];
+    if (noValueOperators.includes(operator)) {
+      parts.push(label);
+    } else if (operator === "between" && value && valueTo) {
+      parts.push(`${label} ${formatDate(value)} and ${formatDate(valueTo)}`);
+    } else if (value) {
+      parts.push(`${label} ${formatDate(value)}`);
+    }
+  }
+  if (filter.text) {
+    parts.push(`contains "${filter.text}"`);
+  }
+  if (filter.selectedValues && filter.selectedValues.length > 0) {
+    if (filter.selectedValues.length === 1) {
+      parts.push(`is "${filter.selectedValues[0]}"`);
+    } else {
+      parts.push(`is one of ${filter.selectedValues.length} values`);
+    }
+  }
+  if (filter.min !== void 0 && filter.max !== void 0) {
+    parts.push(`between ${filter.min} and ${filter.max}`);
+  } else if (filter.min !== void 0) {
+    parts.push(`\u2265 ${filter.min}`);
+  } else if (filter.max !== void 0) {
+    parts.push(`\u2264 ${filter.max}`);
+  }
+  if (filter.includeBlanks) {
+    parts.push("includes blanks");
+  }
+  if (filter.excludeBlanks) {
+    parts.push("excludes blanks");
+  }
+  return parts.join(", ") || "filtered";
+}
+function formatDate(dateStr) {
+  try {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric"
+    });
+  } catch {
+    return dateStr;
+  }
+}
+var ActiveFiltersDisplay = ({
+  filters,
+  columns,
+  onClearFilter,
+  onClearAllFilters,
+  className
+}) => {
+  const activeFilters = Object.entries(filters).filter(([_, filter]) => {
+    return filter.textCondition || filter.numberCondition || filter.dateCondition || filter.text || filter.selectedValues && filter.selectedValues.length > 0 || filter.min !== void 0 || filter.max !== void 0 || filter.includeBlanks || filter.excludeBlanks;
+  });
+  if (activeFilters.length === 0) {
+    return null;
+  }
+  const getColumnLabel = (columnId) => {
+    const column = columns.find((c) => c.id === columnId);
+    return column?.label || columnId;
+  };
+  const getColumn = (columnId) => {
+    return columns.find((c) => c.id === columnId);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-center gap-2 px-4 py-2 bg-amber-50 border-b border-amber-200",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-amber-700 mr-1", children: "Active filters:" }),
+        activeFilters.map(([columnId, filter]) => {
+          const column = getColumn(columnId);
+          const filterDescription = column ? formatFilter(filter, column) : formatFilter(filter, { id: columnId, label: columnId });
+          return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            "div",
+            {
+              className: "inline-flex items-center gap-1.5 px-2.5 py-1 bg-white border border-amber-300 rounded-full shadow-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium text-gray-700", children: getColumnLabel(columnId) }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-gray-500", children: filterDescription }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => onClearFilter(columnId),
+                    className: "p-0.5 hover:bg-amber-100 rounded-full transition-colors",
+                    title: `Clear filter for ${getColumnLabel(columnId)}`,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiX, { className: "h-3 w-3 text-amber-600 hover:text-amber-800" })
+                  }
+                )
+              ]
+            },
+            columnId
+          );
+        }),
+        activeFilters.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClearAllFilters,
+            className: "text-xs text-amber-700 hover:text-amber-900 underline ml-2 transition-colors",
+            children: "Clear all"
+          }
+        )
+      ]
+    }
+  );
+};
+ActiveFiltersDisplay.displayName = "ActiveFiltersDisplay";
+
+// src/components/SpreadsheetToolbar.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var SpreadsheetToolbar = ({
   zoom,
   canUndo,
@@ -994,6 +1192,11 @@ var SpreadsheetToolbar = ({
   onShowShortcuts,
   hasActiveFilters,
   onClearFilters,
+  filters,
+  columns,
+  onClearFilter,
+  showFiltersPanel,
+  onToggleFiltersPanel,
   className
 }) => {
   const [showMoreMenu, setShowMoreMenu] = import_react6.default.useState(false);
@@ -1047,231 +1250,253 @@ var SpreadsheetToolbar = ({
         return "bg-blue-50 border-blue-200 text-blue-700";
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "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__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const activeFilterCount = filters ? Object.values(filters).filter(
+    (f) => f.textCondition || f.numberCondition || f.dateCondition || f.text || f.selectedValues && f.selectedValues.length > 0 || f.min !== void 0 || f.max !== void 0 || f.includeBlanks || f.excludeBlanks
+  ).length : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)(HiReply, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "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__ */ (0, import_jsx_runtime4.jsx)(HiReply, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onZoomOut,
+                  className: "p-1 hover:bg-white rounded",
+                  title: "Zoom out",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                "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__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onZoomIn,
+                  className: "p-1 hover:bg-white rounded",
+                  title: "Zoom in",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+            selectedRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
+                selectedRowCount,
+                " row",
+                selectedRowCount !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClearSelection,
+                  className: "p-0.5 hover:bg-blue-700 rounded",
+                  title: "Clear selection",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiX, { className: "h-3 w-3" })
+                }
+              )
+            ] }),
+            hasActiveFilters && onToggleFiltersPanel && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "button",
               {
                 type: "button",
-                onClick: onUndo,
-                disabled: !canUndo,
+                onClick: onToggleFiltersPanel,
                 className: cn(
-                  buttonBaseClasses,
-                  canUndo ? "bg-gray-100 text-gray-700 hover:bg-gray-200" : "bg-gray-50 text-gray-400"
+                  "flex items-center gap-2 px-2.5 py-1.5 rounded transition-colors",
+                  showFiltersPanel ? "bg-amber-600 text-white hover:bg-amber-700" : "bg-amber-500 text-white hover:bg-amber-600"
                 ),
-                title: `Undo (${undoCount} changes)`,
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiReply, { className: "h-4 w-4" })
+                title: showFiltersPanel ? "Hide active filters" : "Show active filters",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiFilter, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
+                    activeFilterCount,
+                    " filter",
+                    activeFilterCount !== 1 ? "s" : "",
+                    " active"
+                  ] }),
+                  showFiltersPanel ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiChevronDown, { className: "h-3 w-3" })
+                ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
+            summary && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
               {
-                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"
+                  "flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
+                  getSummaryVariantClasses(summary.variant)
                 ),
-                title: `Redo (${redoCount} changes)`,
-                style: { transform: "scaleX(-1)" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiReply, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onZoomOut,
-                className: "p-1 hover:bg-white rounded",
-                title: "Zoom out",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-              "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__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-semibold whitespace-nowrap", children: [
+                    summary.label,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-bold whitespace-nowrap", children: summary.value })
                 ]
               }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onZoomIn,
-                className: "p-1 hover:bg-white rounded",
-                title: "Zoom in",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-          selectedRowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-xs font-medium whitespace-nowrap", children: [
-              selectedRowCount,
-              " row",
-              selectedRowCount !== 1 ? "s" : "",
-              " selected"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: onClearSelection,
-                className: "p-0.5 hover:bg-blue-700 rounded",
-                title: "Clear selection",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiX, { className: "h-3 w-3" })
-              }
             )
           ] }),
-          hasActiveFilters && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-amber-500 text-white rounded", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiFilter, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs font-medium whitespace-nowrap", children: "Filters active" }),
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-              "button",
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+            saveStatusDisplay && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "span",
               {
-                type: "button",
-                onClick: onClearFilters,
-                className: "p-0.5 hover:bg-amber-600 rounded",
-                title: "Clear all filters",
-                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(HiX, { className: "h-3 w-3" })
+                className: cn(
+                  "text-xs flex items-center gap-1",
+                  saveStatusDisplay.className
+                ),
+                children: saveStatusDisplay.text
               }
-            )
-          ] }),
-          summary && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
-                getSummaryVariantClasses(summary.variant)
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "font-semibold whitespace-nowrap", children: [
-                  summary.label,
-                  ":"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-bold whitespace-nowrap", children: summary.value })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
-          saveStatusDisplay && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              className: cn(
-                "text-xs flex items-center gap-1",
-                saveStatusDisplay.className
-              ),
-              children: saveStatusDisplay.text
-            }
-          ),
-          !autoSave && onSave && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-            "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__ */ (0, import_jsx_runtime3.jsx)(HiCheck, { className: "h-3.5 w-3.5" }),
-                "Save"
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "relative", ref: menuRef, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            ),
+            !autoSave && onSave && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
               "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",
+                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__ */ (0, import_jsx_runtime3.jsx)(HiDotsVertical, { className: "h-3.5 w-3.5" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hidden lg:inline", children: "More" })
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiCheck, { className: "h-3.5 w-3.5" }),
+                  "Save"
                 ]
               }
             ),
-            showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("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__ */ (0, import_jsx_runtime3.jsxs)(
-                "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__ */ (0, import_jsx_runtime3.jsx)(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: "Settings" })
-                  ]
-                }
-              ),
-              onShowShortcuts && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", ref: menuRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
                 "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",
+                  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__ */ (0, import_jsx_runtime3.jsx)(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiDotsVertical, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "hidden lg:inline", children: "More" })
                   ]
                 }
               ),
-              menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "border-t border-gray-100 my-1" }),
-              menuItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-                "button",
-                {
-                  type: "button",
-                  disabled: item.disabled,
-                  onClick: () => {
-                    item.onClick();
-                    setShowMoreMenu(false);
+              showMoreMenu && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)(
+                  "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__ */ (0, import_jsx_runtime4.jsx)(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: "Settings" })
+                    ]
+                  }
+                ),
+                onShowShortcuts && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "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__ */ (0, import_jsx_runtime4.jsx)(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
+                    ]
+                  }
+                ),
+                menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-gray-100 my-1" }),
+                menuItems?.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                  "button",
+                  {
+                    type: "button",
+                    disabled: item.disabled,
+                    onClick: () => {
+                      item.onClick();
+                      setShowMoreMenu(false);
+                    },
+                    className: cn(
+                      "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
+                      item.disabled && "opacity-50 cursor-not-allowed"
+                    ),
+                    children: [
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
+                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-gray-700", children: item.label })
+                    ]
                   },
-                  className: cn(
-                    "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
-                    item.disabled && "opacity-50 cursor-not-allowed"
-                  ),
-                  children: [
-                    item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
-                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-gray-700", children: item.label })
-                  ]
-                },
-                item.id
-              ))
+                  item.id
+                ))
+              ] })
             ] })
           ] })
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    showFiltersPanel && filters && columns && onClearFilter && onClearFilters && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ActiveFiltersDisplay,
+      {
+        filters,
+        columns,
+        onClearFilter,
+        onClearAllFilters: onClearFilters
+      }
+    )
+  ] });
 };
 SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
 
@@ -1284,7 +1509,7 @@ function MdOutlinePushPin(props) {
 }
 
 // src/components/ColumnHeaderActions.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ColumnHeaderActions({
   enableFiltering = false,
   enableHighlighting = false,
@@ -1301,8 +1526,8 @@ function ColumnHeaderActions({
   unpinnedTitle = "Pin column",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
-    enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: cn("flex items-center gap-0.5", className), children: [
+    enableFiltering && onFilterClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -1315,10 +1540,10 @@ function ColumnHeaderActions({
           hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
         title: filterTitle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(HiFilter, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiFilter, { className: "h-3 w-3" })
       }
     ),
-    enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    enableHighlighting && onHighlightClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -1331,10 +1556,10 @@ function ColumnHeaderActions({
           hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
         title: highlightTitle,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(AiFillHighlight, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(AiFillHighlight, { className: "h-3 w-3" })
       }
     ),
-    enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    enablePinning && onPinClick && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "button",
       {
         type: "button",
@@ -1347,7 +1572,7 @@ function ColumnHeaderActions({
           isPinned ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
         title: isPinned ? pinnedTitle : unpinnedTitle,
-        children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
+        children: isPinned ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MdOutlinePushPin, { className: "h-3 w-3" })
       }
     )
   ] });
@@ -1355,7 +1580,7 @@ function ColumnHeaderActions({
 ColumnHeaderActions.displayName = "ColumnHeaderActions";
 
 // src/components/SpreadsheetHeader.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var cellPaddingCompact2 = "px-1 py-0.5";
 var cellPaddingNormal2 = "px-2 py-1.5";
 var SpreadsheetHeader = ({
@@ -1387,7 +1612,7 @@ var SpreadsheetHeader = ({
       positionStyles.right = `${rightOffset}px`;
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "th",
     {
       onClick: column.sortable ? onClick : void 0,
@@ -1408,20 +1633,26 @@ var SpreadsheetHeader = ({
         // Pinned columns must have a fixed width so sticky offsets stay correct.
         // Enforce MIN_PINNED_COLUMN_WIDTH so header actions (pin/filter/highlight) always fit.
         ...isPinned && {
-          width: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-          maxWidth: Math.max(column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
+          width: Math.max(
+            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+            MIN_PINNED_COLUMN_WIDTH
+          ),
+          maxWidth: Math.max(
+            column.minWidth || column.width || MIN_PINNED_COLUMN_WIDTH,
+            MIN_PINNED_COLUMN_WIDTH
+          )
         },
         top: 0,
         // For sticky header
         ...positionStyles
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "flex-1 flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex-1 flex items-center gap-1", children: [
             column.label,
-            isSorted && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(HiChevronDown, { className: "h-3 w-3" }) })
+            isSorted && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(HiChevronDown, { className: "h-3 w-3" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             ColumnHeaderActions,
             {
               enableFiltering: column.filterable,
@@ -1444,7 +1675,7 @@ var SpreadsheetHeader = ({
 SpreadsheetHeader.displayName = "SpreadsheetHeader";
 
 // src/components/RowIndexColumnHeader.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var cellPaddingCompact3 = "px-1 py-0.5";
 var cellPaddingNormal3 = "px-2 py-1.5";
 function RowIndexColumnHeader({
@@ -1458,7 +1689,7 @@ function RowIndexColumnHeader({
   className
 }) {
   const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "th",
     {
       className: cn(
@@ -1477,9 +1708,9 @@ function RowIndexColumnHeader({
         left: isPinned ? 0 : void 0,
         backgroundColor: highlightColor || "rgb(243 244 246)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: "#" }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           ColumnHeaderActions,
           {
             enableHighlighting,
@@ -1682,7 +1913,7 @@ function useSpreadsheetHighlighting({
 }
 
 // src/components/ColorPickerPopover.tsx
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function ColorPickerPopover({
   title,
   paletteType = "column",
@@ -1692,9 +1923,9 @@ function ColorPickerPopover({
   className
 }) {
   const colorPalette = colors ?? [...HIGHLIGHT_COLORS[paletteType], null];
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-sm font-semibold mb-3", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: "text-sm font-semibold mb-3", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -1709,7 +1940,7 @@ function ColorPickerPopover({
       },
       color || "clear"
     )) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "button",
       {
         type: "button",
@@ -1724,7 +1955,7 @@ ColorPickerPopover.displayName = "ColorPickerPopover";
 
 // src/components/SpreadsheetSettingsModal.tsx
 var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var DEFAULT_SETTINGS = {
   defaultPinnedColumns: [],
   defaultSort: null,
@@ -1799,7 +2030,7 @@ var SpreadsheetSettingsModal = ({
     { id: "sorting", label: "Default Sorting", Icon: HiSortAscending },
     { id: "display", label: "Display Options", Icon: HiEye }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
       className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
@@ -1807,7 +2038,7 @@ var SpreadsheetSettingsModal = ({
       "aria-modal": "true",
       "aria-labelledby": "settings-modal-title",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
           "button",
           {
             type: "button",
@@ -1817,55 +2048,55 @@ var SpreadsheetSettingsModal = ({
             "aria-label": "Close settings"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HiCog, { className: "h-6 w-6 text-blue-600" }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiCog, { className: "h-6 w-6 text-blue-600" }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "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__ */ (0, import_jsx_runtime8.jsx)(HiX, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiX, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "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__ */ (0, import_jsx_runtime8.jsx)(tab.Icon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(tab.Icon, { className: "h-4 w-4" }),
                 tab.label
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1 overflow-auto p-6", children: [
-            activeTab === "columns" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-auto p-6", children: [
+            activeTab === "columns" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                   "button",
                   {
                     type: "button",
                     onClick: () => togglePinnedColumn("__row_index__"),
                     className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${localSettings.defaultPinnedColumns.includes("__row_index__") ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
                     ]
                   }
                 ),
@@ -1873,15 +2104,15 @@ var SpreadsheetSettingsModal = ({
                   const isPinned = localSettings.defaultPinnedColumns.includes(
                     column.id
                   );
-                  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                     "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__ */ (0, import_jsx_runtime8.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-sm flex-1 truncate", children: column.label })
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-sm flex-1 truncate", children: column.label })
                       ]
                     },
                     column.id
@@ -1889,12 +2120,12 @@ var SpreadsheetSettingsModal = ({
                 })
               ] })
             ] }),
-            activeTab === "sorting" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            activeTab === "sorting" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                     "select",
                     {
                       value: localSettings.defaultSort?.columnId || "",
@@ -1904,15 +2135,15 @@ var SpreadsheetSettingsModal = ({
                       ),
                       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__ */ (0, import_jsx_runtime8.jsx)("option", { value: "", children: "No default sorting" }),
-                        columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: column.id, children: column.label }, column.id))
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "", children: "No default sorting" }),
+                        columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: column.id, children: column.label }, column.id))
                       ]
                     }
                   )
                 ] }),
-                localSettings.defaultSort && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                localSettings.defaultSort && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                     "select",
                     {
                       value: localSettings.defaultSort.direction,
@@ -1922,19 +2153,19 @@ var SpreadsheetSettingsModal = ({
                       ),
                       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__ */ (0, import_jsx_runtime8.jsx)("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
                       ]
                     }
                   )
                 ] })
               ] })
             ] }),
-            activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            activeTab === "display" && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "select",
                   {
                     value: localSettings.defaultPageSize,
@@ -1943,20 +2174,20 @@ var SpreadsheetSettingsModal = ({
                       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__ */ (0, import_jsx_runtime8.jsxs)("option", { value: size, children: [
+                    children: pageSizeOptions.map((size) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("option", { value: size, children: [
                       size,
                       " rows"
                     ] }, size))
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
                   "Default Zoom Level: ",
                   localSettings.defaultZoom,
                   "%"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "input",
                   {
                     type: "range",
@@ -1971,14 +2202,14 @@ var SpreadsheetSettingsModal = ({
                     className: "w-full cursor-pointer"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "50%" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "150%" })
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "50%" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "150%" })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -1987,13 +2218,13 @@ var SpreadsheetSettingsModal = ({
                       className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("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__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("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__ */ (0, import_jsx_runtime9.jsx)(
                     "input",
                     {
                       type: "checkbox",
@@ -2005,16 +2236,16 @@ var SpreadsheetSettingsModal = ({
                       className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
                   ] })
                 ] })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
               "button",
               {
                 type: "button",
@@ -2023,8 +2254,8 @@ var SpreadsheetSettingsModal = ({
                 children: "Reset to Defaults"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2033,7 +2264,7 @@ var SpreadsheetSettingsModal = ({
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2053,7 +2284,7 @@ SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 
 // src/components/CommentModals.tsx
 var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
   const [commentText, setCommentText] = (0, import_react9.useState)("");
   (0, import_react9.useEffect)(() => {
@@ -2072,12 +2303,12 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
     setCommentText("");
     onClose();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { className: "text-lg font-semibold mb-4", children: [
       "Add Comment",
       columnLabel ? ` - ${columnLabel}` : ""
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "textarea",
       {
         value: commentText,
@@ -2091,8 +2322,8 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-end gap-2 mt-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2 mt-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2101,7 +2332,7 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2124,13 +2355,13 @@ function ViewCommentsModal({
   onClose
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("h3", { className: "text-lg font-semibold", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("h3", { className: "text-lg font-semibold", children: [
         "Comments",
         columnLabel ? ` - ${columnLabel}` : ""
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2140,8 +2371,8 @@ function ViewCommentsModal({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
-      comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
+      comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "div",
         {
           className: cn(
@@ -2149,9 +2380,9 @@ function ViewCommentsModal({
             comment.resolved ? "bg-gray-50 border-gray-200" : "bg-yellow-50 border-yellow-200"
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-sm text-gray-700", children: comment.text }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-gray-700", children: comment.text }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2164,23 +2395,23 @@ function ViewCommentsModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
-              comment.author && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: comment.author }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: new Date(comment.timestamp).toLocaleString() })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
+              comment.author && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: comment.author }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: new Date(comment.timestamp).toLocaleString() })
             ] })
           ]
         },
         comment.id
       )),
-      comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
+      comments.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
     ] }),
-    onAddComment && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    onAddComment && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "button",
       {
         type: "button",
         onClick: onAddComment,
         className: "w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center gap-2",
-        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "+ Add Comment" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: "+ Add Comment" })
       }
     ) })
   ] }) });
@@ -2195,11 +2426,11 @@ function DeleteConfirmationModal({
   onClose
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h3", { className: "text-lg font-semibold mb-2", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "text-gray-600 mb-6", children: message }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-lg font-semibold mb-2", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-gray-600 mb-6", children: message }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2208,7 +2439,7 @@ function DeleteConfirmationModal({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           type: "button",
@@ -2227,50 +2458,50 @@ DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
 
 // src/components/KeyboardShortcutsModal.tsx
 var import_react10 = __toESM(require("react"));
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function KeyboardShortcutsModal({
   isOpen,
   onClose,
   shortcuts
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("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__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
           onClick: onClose,
           className: "p-1 hover:bg-gray-100 rounded",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-500 text-xl", children: "\u2715" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xl", children: "\u2715" })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-600 text-sm", children: action.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-500 text-xs", children: action.description })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-600 text-sm", children: action.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xs", children: action.description })
       ] }, index)) })
     ] })
   ] }) });
 }
 function ShortcutSection({ title, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "space-y-2", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "space-y-2", children })
   ] });
 }
 function ShortcutRow({ label, keys }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-600 text-sm", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react10.default.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-400", children: "+" }),
-      key.includes("Click") ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-600 text-sm", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_react10.default.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-400", children: "+" }),
+      key.includes("Click") ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
     ] }, index)) })
   ] });
 }
@@ -2279,7 +2510,7 @@ KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 // src/components/RowContextMenu.tsx
 var import_react11 = require("react");
 var import_design_system = require("@xcelsior/design-system");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function RowContextMenu({
   row,
   rowId,
@@ -2293,10 +2524,10 @@ function RowContextMenu({
   if (visibleItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_design_system.ContextMenu,
     {
-      trigger: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      trigger: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -2305,7 +2536,7 @@ function RowContextMenu({
             className
           ),
           title: "More actions",
-          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             HiDotsVertical,
             {
               className: cn("text-gray-500", compactMode ? "h-2.5 w-2.5" : "h-3 w-3")
@@ -2317,7 +2548,7 @@ function RowContextMenu({
       children: visibleItems.map((item) => {
         const isDisabled = item.disabled?.(row);
         const variantClass = item.variant === "destructive" ? "text-red-600 hover:bg-red-50" : "";
-        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           import_design_system.ContextMenuItem,
           {
             onClick: (e) => {
@@ -2327,7 +2558,7 @@ function RowContextMenu({
             disabled: isDisabled,
             className: `${variantClass} ${item.className || ""}`,
             children: [
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "mr-2", children: item.icon }),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "mr-2", children: item.icon }),
               item.label
             ]
           },
@@ -2344,7 +2575,7 @@ var import_design_system2 = require("@xcelsior/design-system");
 
 // src/hooks/useSpreadsheetFiltering.ts
 var import_react12 = require("react");
-var import_utils10 = require("@xcelsior/utils");
+var import_utils11 = require("@xcelsior/utils");
 function useSpreadsheetFiltering({
   data,
   columns,
@@ -2542,13 +2773,13 @@ function useSpreadsheetFiltering({
     [sortConfig?.columnId]
   );
   const filteredData = (0, import_react12.useMemo)(() => {
-    if (!data || !Array.isArray(data)) return import_utils10.LazyArray.empty();
+    if (!data || !Array.isArray(data)) return import_utils11.LazyArray.empty();
     if (serverSide) {
-      return import_utils10.LazyArray.from(data);
+      return import_utils11.LazyArray.from(data);
     }
-    if (!columns || !Array.isArray(columns)) return import_utils10.LazyArray.from(data);
-    let lazyResult = import_utils10.LazyArray.from(data);
-    const filterChain = new import_utils10.FilterChain();
+    if (!columns || !Array.isArray(columns)) return import_utils11.LazyArray.from(data);
+    let lazyResult = import_utils11.LazyArray.from(data);
+    const filterChain = new import_utils11.FilterChain();
     for (const [columnId, filter] of Object.entries(filters)) {
       if (!filter) continue;
       const column = columns.find((c) => c.id === columnId);
@@ -3426,7 +3657,7 @@ function useSpreadsheetSelection({
 }
 
 // src/components/Spreadsheet.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Spreadsheet({
   data,
   columns,
@@ -3557,6 +3788,7 @@ function Spreadsheet({
     onToggleCommentResolved
   });
   const [showSettingsModal, setShowSettingsModal] = (0, import_react17.useState)(false);
+  const [showFiltersPanel, setShowFiltersPanel] = (0, import_react17.useState)(false);
   const {
     canUndo,
     canRedo,
@@ -4001,8 +4233,8 @@ function Spreadsheet({
     );
     return [...leftPinned, ...groups, ...rightPinned];
   }, [columnGroups, collapsedGroups, columns, pinnedColumns]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
-    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("flex flex-col h-full bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       SpreadsheetToolbar,
       {
         zoom,
@@ -4016,6 +4248,11 @@ function Spreadsheet({
         autoSave: spreadsheetSettings.autoSave,
         hasActiveFilters,
         onClearFilters: clearAllFilters,
+        filters,
+        columns,
+        onClearFilter: (columnId) => handleFilterChange(columnId, void 0),
+        showFiltersPanel,
+        onToggleFiltersPanel: () => setShowFiltersPanel(!showFiltersPanel),
         onZoomIn: () => setZoom((z) => Math.min(z + 10, 200)),
         onZoomOut: () => setZoom((z) => Math.max(z - 10, 50)),
         onZoomReset: () => setZoom(100),
@@ -4032,16 +4269,16 @@ function Spreadsheet({
         menuItems: toolbarMenuItems
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         style: {
           zoom: zoom / 100
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("thead", { children: [
-            columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("thead", { children: [
+            columnGroups && groupHeaderItems && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -4057,7 +4294,11 @@ function Spreadsheet({
                 if (item.type === "pinned-column") {
                   const col = columns.find((c) => c.id === item.columnId);
                   const isPinnedLeft = item.pinSide === "left";
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  const pinnedWidth = Math.max(
+                    col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH,
+                    MIN_PINNED_COLUMN_WIDTH
+                  );
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "th",
                     {
                       className: cn(
@@ -4069,16 +4310,14 @@ function Spreadsheet({
                         position: "sticky",
                         left: isPinnedLeft ? `${getColumnLeftOffset(item.columnId)}px` : void 0,
                         right: !isPinnedLeft ? `${getColumnRightOffset(item.columnId)}px` : void 0,
-                        minWidth: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-                        width: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH),
-                        maxWidth: Math.max(col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH, MIN_PINNED_COLUMN_WIDTH)
+                        minWidth: pinnedWidth
                       }
                     },
                     `pinned-group-${item.columnId}`
                   );
                 }
                 const { group, colSpan, isCollapsed } = item;
-                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   "th",
                   {
                     colSpan,
@@ -4090,17 +4329,17 @@ function Spreadsheet({
                       backgroundColor: group.headerColor || "rgb(243 244 246)"
                     },
                     onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
-                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
-                      group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HiChevronDown, { className: "h-3 w-3" })),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: group.label })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-1", children: [
+                      group.collapsible && (isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(HiChevronDown, { className: "h-3 w-3" })),
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: group.label })
                     ] })
                   },
                   group.id
                 );
               })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("tr", { children: [
-              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("tr", { children: [
+              !columnGroups && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -4114,7 +4353,7 @@ function Spreadsheet({
               ),
               columnRenderItems.map((item) => {
                 if (item.type === "collapsed-placeholder") {
-                  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "th",
                     {
                       className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
@@ -4130,7 +4369,7 @@ function Spreadsheet({
                 const column = item.column;
                 const isPinnedLeft = isColumnPinned(column.id) && getColumnPinSide(column.id) === "left";
                 const isPinnedRight = isColumnPinned(column.id) && getColumnPinSide(column.id) === "right";
-                return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                   SpreadsheetHeader,
                   {
                     column,
@@ -4148,7 +4387,7 @@ function Spreadsheet({
                     ),
                     onPinClick: () => handleTogglePin(column.id),
                     onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
-                    children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    children: activeFilterColumn === column.id && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       SpreadsheetFilterDropdown,
                       {
                         column,
@@ -4163,17 +4402,17 @@ function Spreadsheet({
               })
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tbody", { children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "td",
             {
               colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
-              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
                 "Loading..."
               ] })
             }
-          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "td",
             {
               colSpan: columnRenderItems.length + 1,
@@ -4186,7 +4425,7 @@ function Spreadsheet({
             const isRowHovered = hoveredRow === rowId;
             const rowHighlight = getRowHighlight(rowId);
             const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
-            return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "tr",
               {
                 onMouseEnter: () => setHoveredRow(rowId),
@@ -4196,7 +4435,7 @@ function Spreadsheet({
                 },
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     "td",
                     {
                       onClick: (e) => handleRowSelect(rowId, e),
@@ -4217,10 +4456,10 @@ function Spreadsheet({
                           left: 0
                         }
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative flex items-center justify-center w-full h-full", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { children: displayIndex }),
-                        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
-                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative flex items-center justify-center w-full h-full", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: displayIndex }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
+                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             RowContextMenu,
                             {
                               row,
@@ -4229,7 +4468,7 @@ function Spreadsheet({
                               compactMode: effectiveCompactMode
                             }
                           ),
-                          enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          enableHighlighting && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "button",
                             {
                               type: "button",
@@ -4239,7 +4478,7 @@ function Spreadsheet({
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
                               title: "Highlight row",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                                 AiFillHighlight,
                                 {
                                   className: cn(
@@ -4253,7 +4492,7 @@ function Spreadsheet({
                           enableComments && (cellHasComments(
                             rowId,
                             ROW_INDEX_COLUMN_ID
-                          ) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                          ) ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                             "button",
                             {
                               type: "button",
@@ -4267,11 +4506,11 @@ function Spreadsheet({
                               className: "p-0.5 bg-amber-100 hover:bg-amber-200 rounded transition-colors flex items-center gap-0.5",
                               title: `${getCellUnresolvedCommentCount(rowId, ROW_INDEX_COLUMN_ID)} comment(s) - click to view`,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
                                 getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
-                                ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
+                                ) > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
                                 ) > 99 ? "99+" : getCellUnresolvedCommentCount(
@@ -4280,7 +4519,7 @@ function Spreadsheet({
                                 ) })
                               ]
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                             "button",
                             {
                               type: "button",
@@ -4293,13 +4532,13 @@ function Spreadsheet({
                               },
                               className: "opacity-0 group-hover:opacity-100 transition-opacity p-0.5 bg-gray-100 hover:bg-gray-200 rounded",
                               title: "Add comment",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
                           )),
                           rowActions?.map((action) => {
                             if (action.visible && !action.visible(row))
                               return null;
-                            return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                               "button",
                               {
                                 type: "button",
@@ -4323,7 +4562,7 @@ function Spreadsheet({
                   ),
                   columnRenderItems.map((item) => {
                     if (item.type === "collapsed-placeholder") {
-                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "td",
                         {
                           className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
@@ -4349,7 +4588,7 @@ function Spreadsheet({
                     const cellOrRowOrColumnHighlight = getCellHighlight(rowId, column.id) || rowHighlight?.color || getColumnHighlight(column.id);
                     const isColPinned = isColumnPinned(column.id);
                     const colPinSide = getColumnPinSide(column.id);
-                    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       MemoizedSpreadsheetCell,
                       {
                         value,
@@ -4409,7 +4648,7 @@ function Spreadsheet({
         ] })
       }
     ) }),
-    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       import_design_system2.Pagination,
       {
         currentPage,
@@ -4424,7 +4663,7 @@ function Spreadsheet({
         onPageSizeChange: handlePageSizeChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       AddCommentModal,
       {
         isOpen: commentModalCell !== null,
@@ -4435,7 +4674,7 @@ function Spreadsheet({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ViewCommentsModal,
       {
         isOpen: viewCommentsCell !== null,
@@ -4450,7 +4689,7 @@ function Spreadsheet({
         onClose: () => setViewCommentsCell(null)
       }
     ),
-    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    highlightPickerRow !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Row",
@@ -4459,7 +4698,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerRow(null)
       }
     ),
-    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    highlightPickerColumn !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ColorPickerPopover,
       {
         title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
@@ -4468,7 +4707,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerColumn(null)
       }
     ),
-    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    highlightPickerCell !== null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ColorPickerPopover,
       {
         title: "Highlight Cell",
@@ -4481,7 +4720,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerCell(null)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       KeyboardShortcutsModal,
       {
         isOpen: showKeyboardShortcuts,
@@ -4489,7 +4728,7 @@ function Spreadsheet({
         shortcuts
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       SpreadsheetSettingsModal,
       {
         isOpen: showSettingsModal,
@@ -4517,6 +4756,7 @@ function Spreadsheet({
 Spreadsheet.displayName = "Spreadsheet";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ActiveFiltersDisplay,
   RowContextMenu,
   Spreadsheet,
   SpreadsheetCell,