@xcelsior/ui-spreadsheets 1.1.14 → 1.1.16

package/dist/index.mjs

@@ -151,7 +151,7 @@ import { useState as useState2, useRef, useEffect, memo } from "react";
 import { useCallback, useMemo, useState } from "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,
@@ -519,8 +519,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
@@ -928,7 +934,198 @@ SpreadsheetFilterDropdown.displayName = "SpreadsheetFilterDropdown";
 
 // src/components/SpreadsheetToolbar.tsx
 import React3 from "react";
+
+// src/components/ActiveFiltersDisplay.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "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__ */ jsxs3(
+    "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__ */ jsx3("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__ */ jsxs3(
+            "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__ */ jsx3("span", { className: "text-xs font-medium text-gray-700", children: getColumnLabel(columnId) }),
+                /* @__PURE__ */ jsx3("span", { className: "text-xs text-gray-500", children: filterDescription }),
+                /* @__PURE__ */ jsx3(
+                  "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__ */ jsx3(HiX, { className: "h-3 w-3 text-amber-600 hover:text-amber-800" })
+                  }
+                )
+              ]
+            },
+            columnId
+          );
+        }),
+        activeFilters.length > 1 && /* @__PURE__ */ jsx3(
+          "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
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var SpreadsheetToolbar = ({
   zoom,
   canUndo,
@@ -952,6 +1149,11 @@ var SpreadsheetToolbar = ({
   onShowShortcuts,
   hasActiveFilters,
   onClearFilters,
+  filters,
+  columns,
+  onClearFilter,
+  showFiltersPanel,
+  onToggleFiltersPanel,
   className
 }) => {
   const [showMoreMenu, setShowMoreMenu] = React3.useState(false);
@@ -1005,231 +1207,254 @@ var SpreadsheetToolbar = ({
         return "bg-blue-50 border-blue-200 text-blue-700";
     }
   };
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: cn(
-        "flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b border-gray-200 bg-white",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx3(
+  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__ */ jsxs4("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsxs4(
+      "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__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx4(
+                "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__ */ jsx4(HiReply, { className: "h-4 w-4" })
+                }
+              ),
+              /* @__PURE__ */ jsx4(
+                "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__ */ jsx4(HiReply, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: onZoomOut,
+                  className: "p-1 hover:bg-white rounded",
+                  title: "Zoom out",
+                  children: /* @__PURE__ */ jsx4(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
+                }
+              ),
+              /* @__PURE__ */ jsxs4(
+                "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__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: onZoomIn,
+                  className: "p-1 hover:bg-white rounded",
+                  title: "Zoom in",
+                  children: /* @__PURE__ */ jsx4(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+            selectedRowCount > 0 && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
+              /* @__PURE__ */ jsxs4("span", { className: "text-xs font-medium whitespace-nowrap", children: [
+                selectedRowCount,
+                " row",
+                selectedRowCount !== 1 ? "s" : "",
+                " selected"
+              ] }),
+              /* @__PURE__ */ jsx4(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClearSelection,
+                  className: "p-0.5 hover:bg-blue-700 rounded",
+                  title: "Clear selection",
+                  children: /* @__PURE__ */ jsx4(HiX, { className: "h-3 w-3" })
+                }
+              )
+            ] }),
+            hasActiveFilters && onToggleFiltersPanel && /* @__PURE__ */ jsxs4(
               "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__ */ jsx3(HiReply, { className: "h-4 w-4" })
+                title: showFiltersPanel ? "Hide active filters" : "Show active filters",
+                children: [
+                  /* @__PURE__ */ jsx4(HiFilter, { className: "h-3.5 w-3.5" }),
+                  /* @__PURE__ */ jsxs4("span", { className: "text-xs font-medium whitespace-nowrap", children: [
+                    activeFilterCount,
+                    " filter",
+                    activeFilterCount !== 1 ? "s" : "",
+                    " ",
+                    "active"
+                  ] }),
+                  showFiltersPanel ? /* @__PURE__ */ jsx4(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx4(HiChevronDown, { className: "h-3 w-3" })
+                ]
               }
             ),
-            /* @__PURE__ */ jsx3(
-              "button",
+            summary && /* @__PURE__ */ jsxs4(
+              "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__ */ jsx3(HiReply, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1 px-1.5 py-1 bg-gray-100 rounded", children: [
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: onZoomOut,
-                className: "p-1 hover:bg-white rounded",
-                title: "Zoom out",
-                children: /* @__PURE__ */ jsx3(HiZoomOut, { className: "h-4 w-4 text-gray-600" })
-              }
-            ),
-            /* @__PURE__ */ jsxs3(
-              "button",
-              {
-                type: "button",
-                onClick: onZoomReset,
-                className: "px-2 py-0.5 hover:bg-white rounded text-xs min-w-[45px] text-center text-gray-600",
-                title: "Reset zoom",
                 children: [
-                  zoom,
-                  "%"
+                  /* @__PURE__ */ jsxs4("span", { className: "font-semibold whitespace-nowrap", children: [
+                    summary.label,
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ jsx4("span", { className: "font-bold whitespace-nowrap", children: summary.value })
                 ]
               }
-            ),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: onZoomIn,
-                className: "p-1 hover:bg-white rounded",
-                title: "Zoom in",
-                children: /* @__PURE__ */ jsx3(HiZoomIn, { className: "h-4 w-4 text-gray-600" })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
-          selectedRowCount > 0 && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-blue-600 text-white rounded", children: [
-            /* @__PURE__ */ jsxs3("span", { className: "text-xs font-medium whitespace-nowrap", children: [
-              selectedRowCount,
-              " row",
-              selectedRowCount !== 1 ? "s" : "",
-              " selected"
-            ] }),
-            /* @__PURE__ */ jsx3(
-              "button",
-              {
-                type: "button",
-                onClick: onClearSelection,
-                className: "p-0.5 hover:bg-blue-700 rounded",
-                title: "Clear selection",
-                children: /* @__PURE__ */ jsx3(HiX, { className: "h-3 w-3" })
-              }
             )
           ] }),
-          hasActiveFilters && onClearFilters && /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2 px-2.5 py-1.5 bg-amber-500 text-white rounded", children: [
-            /* @__PURE__ */ jsx3(HiFilter, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsx3("span", { className: "text-xs font-medium whitespace-nowrap", children: "Filters active" }),
-            /* @__PURE__ */ jsx3(
-              "button",
+          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+            saveStatusDisplay && /* @__PURE__ */ jsx4(
+              "span",
               {
-                type: "button",
-                onClick: onClearFilters,
-                className: "p-0.5 hover:bg-amber-600 rounded",
-                title: "Clear all filters",
-                children: /* @__PURE__ */ jsx3(HiX, { className: "h-3 w-3" })
+                className: cn(
+                  "text-xs flex items-center gap-1",
+                  saveStatusDisplay.className
+                ),
+                children: saveStatusDisplay.text
               }
-            )
-          ] }),
-          summary && /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: cn(
-                "flex items-center gap-2 px-2.5 py-1.5 rounded border text-xs",
-                getSummaryVariantClasses(summary.variant)
-              ),
-              children: [
-                /* @__PURE__ */ jsxs3("span", { className: "font-semibold whitespace-nowrap", children: [
-                  summary.label,
-                  ":"
-                ] }),
-                /* @__PURE__ */ jsx3("span", { className: "font-bold whitespace-nowrap", children: summary.value })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-2", children: [
-          saveStatusDisplay && /* @__PURE__ */ jsx3(
-            "span",
-            {
-              className: cn(
-                "text-xs flex items-center gap-1",
-                saveStatusDisplay.className
-              ),
-              children: saveStatusDisplay.text
-            }
-          ),
-          !autoSave && onSave && /* @__PURE__ */ jsxs3(
-            "button",
-            {
-              type: "button",
-              onClick: onSave,
-              disabled: !hasUnsavedChanges,
-              className: cn(
-                "px-3 py-1.5 text-xs bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors flex items-center gap-1.5",
-                "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-blue-600"
-              ),
-              children: [
-                /* @__PURE__ */ jsx3(HiCheck, { className: "h-3.5 w-3.5" }),
-                "Save"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs3("div", { className: "relative", ref: menuRef, children: [
-            /* @__PURE__ */ jsxs3(
+            ),
+            !autoSave && onSave && /* @__PURE__ */ jsxs4(
               "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__ */ jsx3(HiDotsVertical, { className: "h-3.5 w-3.5" }),
-                  /* @__PURE__ */ jsx3("span", { className: "hidden lg:inline", children: "More" })
+                  /* @__PURE__ */ jsx4(HiCheck, { className: "h-3.5 w-3.5" }),
+                  "Save"
                 ]
               }
             ),
-            showMoreMenu && /* @__PURE__ */ jsxs3("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-20", children: [
-              onSettings && /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => {
-                    onSettings();
-                    setShowMoreMenu(false);
-                  },
-                  className: "w-full px-3 py-2 text-left hover:bg-gray-50 flex items-center gap-2 text-xs transition-colors",
-                  children: [
-                    /* @__PURE__ */ jsx3(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
-                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: "Settings" })
-                  ]
-                }
-              ),
-              onShowShortcuts && /* @__PURE__ */ jsxs3(
+            /* @__PURE__ */ jsxs4("div", { className: "relative", ref: menuRef, children: [
+              /* @__PURE__ */ jsxs4(
                 "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__ */ jsx3(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
-                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
+                    /* @__PURE__ */ jsx4(HiDotsVertical, { className: "h-3.5 w-3.5" }),
+                    /* @__PURE__ */ jsx4("span", { className: "hidden lg:inline", children: "More" })
                   ]
                 }
               ),
-              menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ jsx3("div", { className: "border-t border-gray-100 my-1" }),
-              menuItems?.map((item) => /* @__PURE__ */ jsxs3(
-                "button",
-                {
-                  type: "button",
-                  disabled: item.disabled,
-                  onClick: () => {
-                    item.onClick();
-                    setShowMoreMenu(false);
+              showMoreMenu && /* @__PURE__ */ jsxs4("div", { className: "absolute right-0 top-full mt-1 bg-white border border-gray-200 shadow-lg rounded py-1 min-w-[180px] z-50", children: [
+                onSettings && /* @__PURE__ */ jsxs4(
+                  "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__ */ jsx4(HiCog, { className: "h-3.5 w-3.5 text-gray-500" }),
+                      /* @__PURE__ */ jsx4("span", { className: "text-gray-700", children: "Settings" })
+                    ]
+                  }
+                ),
+                onShowShortcuts && /* @__PURE__ */ jsxs4(
+                  "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__ */ jsx4(HiOutlineQuestionMarkCircle, { className: "h-3.5 w-3.5 text-gray-500" }),
+                      /* @__PURE__ */ jsx4("span", { className: "text-gray-700", children: "Keyboard Shortcuts" })
+                    ]
+                  }
+                ),
+                menuItems && menuItems.length > 0 && (onSettings || onShowShortcuts) && /* @__PURE__ */ jsx4("div", { className: "border-t border-gray-100 my-1" }),
+                menuItems?.map((item) => /* @__PURE__ */ jsxs4(
+                  "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__ */ jsx4("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
+                      /* @__PURE__ */ jsx4("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__ */ jsx3("span", { className: "h-3.5 w-3.5 text-gray-500 flex items-center justify-center", children: item.icon }),
-                    /* @__PURE__ */ jsx3("span", { className: "text-gray-700", children: item.label })
-                  ]
-                },
-                item.id
-              ))
+                  item.id
+                ))
+              ] })
             ] })
           ] })
-        ] })
-      ]
-    }
-  );
+        ]
+      }
+    ),
+    showFiltersPanel && filters && columns && onClearFilter && onClearFilters && /* @__PURE__ */ jsx4(
+      ActiveFiltersDisplay,
+      {
+        filters,
+        columns,
+        onClearFilter,
+        onClearAllFilters: onClearFilters
+      }
+    )
+  ] });
 };
 SpreadsheetToolbar.displayName = "SpreadsheetToolbar";
 
@@ -1242,7 +1467,7 @@ function MdOutlinePushPin(props) {
 }
 
 // src/components/ColumnHeaderActions.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function ColumnHeaderActions({
   enableFiltering = false,
   enableHighlighting = false,
@@ -1259,8 +1484,8 @@ function ColumnHeaderActions({
   unpinnedTitle = "Pin column",
   className
 }) {
-  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-center gap-0.5", className), children: [
-    enableFiltering && onFilterClick && /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-center gap-0.5", className), children: [
+    enableFiltering && onFilterClick && /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1273,10 +1498,10 @@ function ColumnHeaderActions({
           hasActiveFilter ? "text-blue-600 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
         title: filterTitle,
-        children: /* @__PURE__ */ jsx4(HiFilter, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx5(HiFilter, { className: "h-3 w-3" })
       }
     ),
-    enableHighlighting && onHighlightClick && /* @__PURE__ */ jsx4(
+    enableHighlighting && onHighlightClick && /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1289,10 +1514,10 @@ function ColumnHeaderActions({
           hasActiveHighlight ? "text-amber-500 opacity-100" : "text-gray-400 opacity-0 group-hover:opacity-100"
         ),
         title: highlightTitle,
-        children: /* @__PURE__ */ jsx4(AiFillHighlight, { className: "h-3 w-3" })
+        children: /* @__PURE__ */ jsx5(AiFillHighlight, { className: "h-3 w-3" })
       }
     ),
-    enablePinning && onPinClick && /* @__PURE__ */ jsx4(
+    enablePinning && onPinClick && /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -1305,7 +1530,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__ */ jsx4(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx4(MdOutlinePushPin, { className: "h-3 w-3" })
+        children: isPinned ? /* @__PURE__ */ jsx5(MdPushPin, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx5(MdOutlinePushPin, { className: "h-3 w-3" })
       }
     )
   ] });
@@ -1313,7 +1538,7 @@ function ColumnHeaderActions({
 ColumnHeaderActions.displayName = "ColumnHeaderActions";
 
 // src/components/SpreadsheetHeader.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var cellPaddingCompact2 = "px-1 py-0.5";
 var cellPaddingNormal2 = "px-2 py-1.5";
 var SpreadsheetHeader = ({
@@ -1345,7 +1570,7 @@ var SpreadsheetHeader = ({
       positionStyles.right = `${rightOffset}px`;
     }
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "th",
     {
       onClick: column.sortable ? onClick : void 0,
@@ -1366,20 +1591,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__ */ jsxs5("div", { className: "flex items-center justify-between gap-1", children: [
-          /* @__PURE__ */ jsxs5("span", { className: "flex-1 flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-1", children: [
+          /* @__PURE__ */ jsxs6("span", { className: "flex-1 flex items-center gap-1", children: [
             column.label,
-            isSorted && /* @__PURE__ */ jsx5("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ jsx5(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx5(HiChevronDown, { className: "h-3 w-3" }) })
+            isSorted && /* @__PURE__ */ jsx6("span", { className: "text-blue-600", children: sortDirection === "asc" ? /* @__PURE__ */ jsx6(HiChevronUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx6(HiChevronDown, { className: "h-3 w-3" }) })
           ] }),
-          /* @__PURE__ */ jsx5(
+          /* @__PURE__ */ jsx6(
             ColumnHeaderActions,
             {
               enableFiltering: column.filterable,
@@ -1402,7 +1633,7 @@ var SpreadsheetHeader = ({
 SpreadsheetHeader.displayName = "SpreadsheetHeader";
 
 // src/components/RowIndexColumnHeader.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var cellPaddingCompact3 = "px-1 py-0.5";
 var cellPaddingNormal3 = "px-2 py-1.5";
 function RowIndexColumnHeader({
@@ -1416,7 +1647,7 @@ function RowIndexColumnHeader({
   className
 }) {
   const cellPadding = compactMode ? cellPaddingCompact3 : cellPaddingNormal3;
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "th",
     {
       className: cn(
@@ -1435,9 +1666,9 @@ function RowIndexColumnHeader({
         left: isPinned ? 0 : void 0,
         backgroundColor: highlightColor || "rgb(243 244 246)"
       },
-      children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-center gap-1", children: [
-        /* @__PURE__ */ jsx6("span", { children: "#" }),
-        /* @__PURE__ */ jsx6(
+      children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center gap-1", children: [
+        /* @__PURE__ */ jsx7("span", { children: "#" }),
+        /* @__PURE__ */ jsx7(
           ColumnHeaderActions,
           {
             enableHighlighting,
@@ -1640,7 +1871,7 @@ function useSpreadsheetHighlighting({
 }
 
 // src/components/ColorPickerPopover.tsx
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function ColorPickerPopover({
   title,
   paletteType = "column",
@@ -1650,9 +1881,9 @@ function ColorPickerPopover({
   className
 }) {
   const colorPalette = colors ?? [...HIGHLIGHT_COLORS[paletteType], null];
-  return /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs7("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
-    /* @__PURE__ */ jsx7("h3", { className: "text-sm font-semibold mb-3", children: title }),
-    /* @__PURE__ */ jsx7("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs8("div", { className: cn("bg-white rounded-lg shadow-xl p-4 w-64", className), children: [
+    /* @__PURE__ */ jsx8("h3", { className: "text-sm font-semibold mb-3", children: title }),
+    /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-5 gap-2", children: colorPalette.map((color) => /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1667,7 +1898,7 @@ function ColorPickerPopover({
       },
       color || "clear"
     )) }),
-    /* @__PURE__ */ jsx7("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8("div", { className: "flex justify-end mt-4", children: /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
@@ -1682,7 +1913,7 @@ ColorPickerPopover.displayName = "ColorPickerPopover";
 
 // src/components/SpreadsheetSettingsModal.tsx
 import { useState as useState5, useEffect as useEffect3 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var DEFAULT_SETTINGS = {
   defaultPinnedColumns: [],
   defaultSort: null,
@@ -1757,7 +1988,7 @@ var SpreadsheetSettingsModal = ({
     { id: "sorting", label: "Default Sorting", Icon: HiSortAscending },
     { id: "display", label: "Display Options", Icon: HiEye }
   ];
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50",
@@ -1765,7 +1996,7 @@ var SpreadsheetSettingsModal = ({
       "aria-modal": "true",
       "aria-labelledby": "settings-modal-title",
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -1775,55 +2006,55 @@ var SpreadsheetSettingsModal = ({
             "aria-label": "Close settings"
           }
         ),
-        /* @__PURE__ */ jsxs8("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
-          /* @__PURE__ */ jsxs8("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx8(HiCog, { className: "h-6 w-6 text-blue-600" }),
-              /* @__PURE__ */ jsx8("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
+        /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg w-[90%] max-w-[700px] max-h-[90vh] flex flex-col shadow-xl relative z-10", children: [
+          /* @__PURE__ */ jsxs9("div", { className: "px-6 py-5 border-b border-gray-200 flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx9(HiCog, { className: "h-6 w-6 text-blue-600" }),
+              /* @__PURE__ */ jsx9("h2", { id: "settings-modal-title", className: "text-xl font-bold text-gray-900", children: title })
             ] }),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
                 onClick: onClose,
                 className: "p-2 hover:bg-gray-100 rounded-lg transition-colors text-gray-500 hover:text-gray-700",
-                children: /* @__PURE__ */ jsx8(HiX, { className: "h-5 w-5" })
+                children: /* @__PURE__ */ jsx9(HiX, { className: "h-5 w-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx8("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ jsxs8(
+          /* @__PURE__ */ jsx9("div", { className: "flex border-b border-gray-200 px-6", children: tabs.map((tab) => /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
               onClick: () => setActiveTab(tab.id),
               className: `px-4 py-3 flex items-center gap-2 text-sm font-medium transition-colors border-b-2 ${activeTab === tab.id ? "text-blue-600 border-blue-600" : "text-gray-500 border-transparent hover:text-gray-700"}`,
               children: [
-                /* @__PURE__ */ jsx8(tab.Icon, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx9(tab.Icon, { className: "h-4 w-4" }),
                 tab.label
               ]
             },
             tab.id
           )) }),
-          /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-auto p-6", children: [
-            activeTab === "columns" && /* @__PURE__ */ jsxs8("div", { children: [
-              /* @__PURE__ */ jsxs8("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
-                /* @__PURE__ */ jsx8(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
-                /* @__PURE__ */ jsxs8("div", { children: [
-                  /* @__PURE__ */ jsx8("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
-                  /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
+          /* @__PURE__ */ jsxs9("div", { className: "flex-1 overflow-auto p-6", children: [
+            activeTab === "columns" && /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsxs9("div", { className: "p-4 bg-blue-50 border border-blue-200 rounded-lg mb-4 flex gap-3", children: [
+                /* @__PURE__ */ jsx9(HiViewBoards, { className: "h-4 w-4 text-blue-600 shrink-0 mt-0.5" }),
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx9("p", { className: "text-sm font-semibold text-gray-900 mb-1", children: "About Pinned Columns" }),
+                  /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-600", children: "Pinned columns stay visible while you scroll horizontally through the table." })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
-              /* @__PURE__ */ jsxs8("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
-                /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-600 mb-4", children: "Select which columns should be pinned to the left by default." }),
+              /* @__PURE__ */ jsxs9("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2", children: [
+                /* @__PURE__ */ jsxs9(
                   "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__ */ jsx8(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
-                      /* @__PURE__ */ jsx8("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
+                      /* @__PURE__ */ jsx9(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                      /* @__PURE__ */ jsx9("span", { className: "text-sm flex-1 truncate", children: "# (Row Index)" })
                     ]
                   }
                 ),
@@ -1831,15 +2062,15 @@ var SpreadsheetSettingsModal = ({
                   const isPinned = localSettings.defaultPinnedColumns.includes(
                     column.id
                   );
-                  return /* @__PURE__ */ jsxs8(
+                  return /* @__PURE__ */ jsxs9(
                     "button",
                     {
                       type: "button",
                       onClick: () => togglePinnedColumn(column.id),
                       className: `flex items-center gap-2 p-3 rounded-lg border transition-colors text-left ${isPinned ? "bg-blue-50 border-blue-300 text-blue-700" : "bg-gray-50 border-gray-200 text-gray-700 hover:border-blue-300"}`,
                       children: [
-                        /* @__PURE__ */ jsx8(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
-                        /* @__PURE__ */ jsx8("span", { className: "text-sm flex-1 truncate", children: column.label })
+                        /* @__PURE__ */ jsx9(HiViewBoards, { className: "h-4 w-4 shrink-0" }),
+                        /* @__PURE__ */ jsx9("span", { className: "text-sm flex-1 truncate", children: column.label })
                       ]
                     },
                     column.id
@@ -1847,12 +2078,12 @@ var SpreadsheetSettingsModal = ({
                 })
               ] })
             ] }),
-            activeTab === "sorting" && /* @__PURE__ */ jsxs8("div", { children: [
-              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
-              /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
-                /* @__PURE__ */ jsxs8("div", { children: [
-                  /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
-                  /* @__PURE__ */ jsxs8(
+            activeTab === "sorting" && /* @__PURE__ */ jsxs9("div", { children: [
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-600 mb-4", children: "Set the default column sorting when opening the spreadsheet." }),
+              /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Column" }),
+                  /* @__PURE__ */ jsxs9(
                     "select",
                     {
                       value: localSettings.defaultSort?.columnId || "",
@@ -1862,15 +2093,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__ */ jsx8("option", { value: "", children: "No default sorting" }),
-                        columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ jsx8("option", { value: column.id, children: column.label }, column.id))
+                        /* @__PURE__ */ jsx9("option", { value: "", children: "No default sorting" }),
+                        columns.filter((col) => col.sortable !== false).map((column) => /* @__PURE__ */ jsx9("option", { value: column.id, children: column.label }, column.id))
                       ]
                     }
                   )
                 ] }),
-                localSettings.defaultSort && /* @__PURE__ */ jsxs8("div", { children: [
-                  /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
-                  /* @__PURE__ */ jsxs8(
+                localSettings.defaultSort && /* @__PURE__ */ jsxs9("div", { children: [
+                  /* @__PURE__ */ jsx9("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Sort Direction" }),
+                  /* @__PURE__ */ jsxs9(
                     "select",
                     {
                       value: localSettings.defaultSort.direction,
@@ -1880,19 +2111,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__ */ jsx8("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
-                        /* @__PURE__ */ jsx8("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
+                        /* @__PURE__ */ jsx9("option", { value: "asc", children: "Ascending (A \u2192 Z, 0 \u2192 9)" }),
+                        /* @__PURE__ */ jsx9("option", { value: "desc", children: "Descending (Z \u2192 A, 9 \u2192 0)" })
                       ]
                     }
                   )
                 ] })
               ] })
             ] }),
-            activeTab === "display" && /* @__PURE__ */ jsxs8("div", { className: "space-y-5", children: [
-              /* @__PURE__ */ jsx8("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
-              /* @__PURE__ */ jsxs8("div", { children: [
-                /* @__PURE__ */ jsx8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
-                /* @__PURE__ */ jsx8(
+            activeTab === "display" && /* @__PURE__ */ jsxs9("div", { className: "space-y-5", children: [
+              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-600", children: "Customize the display and behavior of the spreadsheet." }),
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsx9("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: "Default Page Size" }),
+                /* @__PURE__ */ jsx9(
                   "select",
                   {
                     value: localSettings.defaultPageSize,
@@ -1901,20 +2132,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__ */ jsxs8("option", { value: size, children: [
+                    children: pageSizeOptions.map((size) => /* @__PURE__ */ jsxs9("option", { value: size, children: [
                       size,
                       " rows"
                     ] }, size))
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs8("div", { children: [
-                /* @__PURE__ */ jsxs8("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
+              /* @__PURE__ */ jsxs9("div", { children: [
+                /* @__PURE__ */ jsxs9("label", { className: "block text-sm font-medium text-gray-900 mb-2", children: [
                   "Default Zoom Level: ",
                   localSettings.defaultZoom,
                   "%"
                 ] }),
-                /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9(
                   "input",
                   {
                     type: "range",
@@ -1929,14 +2160,14 @@ var SpreadsheetSettingsModal = ({
                     className: "w-full cursor-pointer"
                   }
                 ),
-                /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
-                  /* @__PURE__ */ jsx8("span", { children: "50%" }),
-                  /* @__PURE__ */ jsx8("span", { children: "150%" })
+                /* @__PURE__ */ jsxs9("div", { className: "flex justify-between mt-1 text-xs text-gray-500", children: [
+                  /* @__PURE__ */ jsx9("span", { children: "50%" }),
+                  /* @__PURE__ */ jsx9("span", { children: "150%" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
-                /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
-                  /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
+                /* @__PURE__ */ jsxs9("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__ */ jsx9(
                     "input",
                     {
                       type: "checkbox",
@@ -1945,13 +2176,13 @@ var SpreadsheetSettingsModal = ({
                       className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                     }
                   ),
-                  /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsx8("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
-                    /* @__PURE__ */ jsx8("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
+                  /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "text-sm font-medium text-gray-900", children: "Auto-save changes" }),
+                    /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-500 mt-0.5", children: "Automatically save changes without confirmation" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxs8("label", { className: "flex items-center gap-3 p-4 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors", children: [
-                  /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsxs9("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__ */ jsx9(
                     "input",
                     {
                       type: "checkbox",
@@ -1963,16 +2194,16 @@ var SpreadsheetSettingsModal = ({
                       className: "w-5 h-5 cursor-pointer rounded border-gray-300 text-blue-600 focus:ring-blue-500"
                     }
                   ),
-                  /* @__PURE__ */ jsxs8("div", { className: "flex-1", children: [
-                    /* @__PURE__ */ jsx8("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
-                    /* @__PURE__ */ jsx8("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
+                  /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
+                    /* @__PURE__ */ jsx9("div", { className: "text-sm font-medium text-gray-900", children: "Compact view" }),
+                    /* @__PURE__ */ jsx9("div", { className: "text-sm text-gray-500 mt-0.5", children: "Reduce padding and spacing to show more rows on screen" })
                   ] })
                 ] })
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs8("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
-            /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsxs9("div", { className: "px-6 py-4 border-t border-gray-200 flex justify-between items-center gap-3", children: [
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -1981,8 +2212,8 @@ var SpreadsheetSettingsModal = ({
                 children: "Reset to Defaults"
               }
             ),
-            /* @__PURE__ */ jsxs8("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
@@ -1991,7 +2222,7 @@ var SpreadsheetSettingsModal = ({
                   children: "Cancel"
                 }
               ),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "button",
                 {
                   type: "button",
@@ -2011,7 +2242,7 @@ SpreadsheetSettingsModal.displayName = "SpreadsheetSettingsModal";
 
 // src/components/CommentModals.tsx
 import { useState as useState6, useEffect as useEffect4 } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
   const [commentText, setCommentText] = useState6("");
   useEffect4(() => {
@@ -2030,12 +2261,12 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
     setCommentText("");
     onClose();
   };
-  return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
-    /* @__PURE__ */ jsxs9("h3", { className: "text-lg font-semibold mb-4", children: [
+  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
+    /* @__PURE__ */ jsxs10("h3", { className: "text-lg font-semibold mb-4", children: [
       "Add Comment",
       columnLabel ? ` - ${columnLabel}` : ""
     ] }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "textarea",
       {
         value: commentText,
@@ -2049,8 +2280,8 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
         autoFocus: true
       }
     ),
-    /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 mt-4", children: [
-      /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2 mt-4", children: [
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -2059,7 +2290,7 @@ function AddCommentModal({ isOpen, columnLabel, onAdd, onClose }) {
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -2082,13 +2313,13 @@ function ViewCommentsModal({
   onClose
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg shadow-xl p-6 w-[480px] max-w-full mx-4 max-h-[80vh] flex flex-col", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsxs9("h3", { className: "text-lg font-semibold", children: [
+  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs10("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__ */ jsxs10("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxs10("h3", { className: "text-lg font-semibold", children: [
         "Comments",
         columnLabel ? ` - ${columnLabel}` : ""
       ] }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -2098,8 +2329,8 @@ function ViewCommentsModal({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
-      comments.map((comment) => /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10("div", { className: "flex-1 overflow-y-auto space-y-3", children: [
+      comments.map((comment) => /* @__PURE__ */ jsxs10(
         "div",
         {
           className: cn(
@@ -2107,9 +2338,9 @@ function ViewCommentsModal({
             comment.resolved ? "bg-gray-50 border-gray-200" : "bg-yellow-50 border-yellow-200"
           ),
           children: [
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between gap-2", children: [
-              /* @__PURE__ */ jsx9("p", { className: "text-sm text-gray-700", children: comment.text }),
-              /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between gap-2", children: [
+              /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-700", children: comment.text }),
+              /* @__PURE__ */ jsx10(
                 "button",
                 {
                   type: "button",
@@ -2122,23 +2353,23 @@ function ViewCommentsModal({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
-              comment.author && /* @__PURE__ */ jsx9("span", { children: comment.author }),
-              /* @__PURE__ */ jsx9("span", { children: new Date(comment.timestamp).toLocaleString() })
+            /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 mt-2 text-xs text-gray-500", children: [
+              comment.author && /* @__PURE__ */ jsx10("span", { children: comment.author }),
+              /* @__PURE__ */ jsx10("span", { children: new Date(comment.timestamp).toLocaleString() })
             ] })
           ]
         },
         comment.id
       )),
-      comments.length === 0 && /* @__PURE__ */ jsx9("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
+      comments.length === 0 && /* @__PURE__ */ jsx10("p", { className: "text-center text-gray-500 py-8", children: "No comments for this cell." })
     ] }),
-    onAddComment && /* @__PURE__ */ jsx9("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ jsx9(
+    onAddComment && /* @__PURE__ */ jsx10("div", { className: "mt-4 pt-4 border-t border-gray-200", children: /* @__PURE__ */ jsx10(
       "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__ */ jsx9("span", { children: "+ Add Comment" })
+        children: /* @__PURE__ */ jsx10("span", { children: "+ Add Comment" })
       }
     ) })
   ] }) });
@@ -2153,11 +2384,11 @@ function DeleteConfirmationModal({
   onClose
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs9("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
-    /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold mb-2", children: title }),
-    /* @__PURE__ */ jsx9("p", { className: "text-gray-600 mb-6", children: message }),
-    /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2", children: [
-      /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-lg shadow-xl p-6 w-96 max-w-full mx-4", children: [
+    /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold mb-2", children: title }),
+    /* @__PURE__ */ jsx10("p", { className: "text-gray-600 mb-6", children: message }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -2166,7 +2397,7 @@ function DeleteConfirmationModal({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           type: "button",
@@ -2185,50 +2416,50 @@ DeleteConfirmationModal.displayName = "DeleteConfirmationModal";
 
 // src/components/KeyboardShortcutsModal.tsx
 import React4 from "react";
-import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function KeyboardShortcutsModal({
   isOpen,
   onClose,
   shortcuts
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx10("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs10("div", { className: "bg-white rounded-lg shadow-xl p-6 w-full max-w-2xl max-h-[80vh] overflow-y-auto mx-4", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx10("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50", children: /* @__PURE__ */ jsxs11("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__ */ jsxs11("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-xl font-bold text-gray-900", children: "Keyboard Shortcuts" }),
+      /* @__PURE__ */ jsx11(
         "button",
         {
           type: "button",
           onClick: onClose,
           className: "p-1 hover:bg-gray-100 rounded",
-          children: /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xl", children: "\u2715" })
+          children: /* @__PURE__ */ jsx11("span", { className: "text-gray-500 text-xl", children: "\u2715" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsx10(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ jsx10(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
-      /* @__PURE__ */ jsx10(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx10("span", { className: "text-gray-600 text-sm", children: action.label }),
-        /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xs", children: action.description })
+    /* @__PURE__ */ jsxs11("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsx11(ShortcutSection, { title: "General", children: shortcuts.general.map((shortcut, index) => /* @__PURE__ */ jsx11(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx11(ShortcutSection, { title: "Row Selection", children: shortcuts.rowSelection.map((shortcut, index) => /* @__PURE__ */ jsx11(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx11(ShortcutSection, { title: "Editing", children: shortcuts.editing.map((shortcut, index) => /* @__PURE__ */ jsx11(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx11(ShortcutSection, { title: "Cell Navigation", children: shortcuts.navigation.map((shortcut, index) => /* @__PURE__ */ jsx11(ShortcutRow, { label: shortcut.label, keys: shortcut.keys }, index)) }),
+      /* @__PURE__ */ jsx11(ShortcutSection, { title: "Row Actions (hover over row #)", children: shortcuts.rowActions.map((action, index) => /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx11("span", { className: "text-gray-600 text-sm", children: action.label }),
+        /* @__PURE__ */ jsx11("span", { className: "text-gray-500 text-xs", children: action.description })
       ] }, index)) })
     ] })
   ] }) });
 }
 function ShortcutSection({ title, children }) {
-  return /* @__PURE__ */ jsxs10("div", { children: [
-    /* @__PURE__ */ jsx10("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
-    /* @__PURE__ */ jsx10("div", { className: "space-y-2", children })
+  return /* @__PURE__ */ jsxs11("div", { children: [
+    /* @__PURE__ */ jsx11("h4", { className: "text-gray-900 font-semibold mb-3", children: title }),
+    /* @__PURE__ */ jsx11("div", { className: "space-y-2", children })
   ] });
 }
 function ShortcutRow({ label, keys }) {
-  return /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsx10("span", { className: "text-gray-600 text-sm", children: label }),
-    /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ jsxs10(React4.Fragment, { children: [
-      index > 0 && /* @__PURE__ */ jsx10("span", { className: "text-gray-400", children: "+" }),
-      key.includes("Click") ? /* @__PURE__ */ jsx10("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ jsx10("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+    /* @__PURE__ */ jsx11("span", { className: "text-gray-600 text-sm", children: label }),
+    /* @__PURE__ */ jsx11("div", { className: "flex items-center gap-1", children: keys.map((key, index) => /* @__PURE__ */ jsxs11(React4.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx11("span", { className: "text-gray-400", children: "+" }),
+      key.includes("Click") ? /* @__PURE__ */ jsx11("span", { className: "text-gray-500 text-xs", children: key }) : /* @__PURE__ */ jsx11("kbd", { className: "px-2 py-1 bg-gray-100 text-gray-800 rounded text-xs border border-gray-200", children: key })
     ] }, index)) })
   ] });
 }
@@ -2237,7 +2468,7 @@ KeyboardShortcutsModal.displayName = "KeyboardShortcutsModal";
 // src/components/RowContextMenu.tsx
 import { useMemo as useMemo2 } from "react";
 import { ContextMenu, ContextMenuItem } from "@xcelsior/design-system";
-import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 function RowContextMenu({
   row,
   rowId,
@@ -2251,10 +2482,10 @@ function RowContextMenu({
   if (visibleItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     ContextMenu,
     {
-      trigger: /* @__PURE__ */ jsx11(
+      trigger: /* @__PURE__ */ jsx12(
         "button",
         {
           type: "button",
@@ -2263,7 +2494,7 @@ function RowContextMenu({
             className
           ),
           title: "More actions",
-          children: /* @__PURE__ */ jsx11(
+          children: /* @__PURE__ */ jsx12(
             HiDotsVertical,
             {
               className: cn("text-gray-500", compactMode ? "h-2.5 w-2.5" : "h-3 w-3")
@@ -2275,7 +2506,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__ */ jsxs11(
+        return /* @__PURE__ */ jsxs12(
           ContextMenuItem,
           {
             onClick: (e) => {
@@ -2285,7 +2516,7 @@ function RowContextMenu({
             disabled: isDisabled,
             className: `${variantClass} ${item.className || ""}`,
             children: [
-              item.icon && /* @__PURE__ */ jsx11("span", { className: "mr-2", children: item.icon }),
+              item.icon && /* @__PURE__ */ jsx12("span", { className: "mr-2", children: item.icon }),
               item.label
             ]
           },
@@ -3384,7 +3615,7 @@ function useSpreadsheetSelection({
 }
 
 // src/components/Spreadsheet.tsx
-import { jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs13 } from "react/jsx-runtime";
 function Spreadsheet({
   data,
   columns,
@@ -3515,6 +3746,7 @@ function Spreadsheet({
     onToggleCommentResolved
   });
   const [showSettingsModal, setShowSettingsModal] = useState12(false);
+  const [showFiltersPanel, setShowFiltersPanel] = useState12(false);
   const {
     canUndo,
     canRedo,
@@ -3561,6 +3793,23 @@ function Spreadsheet({
     },
     [controlledPageSize, controlledCurrentPage, onPageChange]
   );
+  const resetPaginationToFirstPage = useCallback7(() => {
+    if (controlledCurrentPage === void 0) {
+      setInternalCurrentPage(1);
+    }
+    onPageChange?.(1, pageSize);
+  }, [controlledCurrentPage, onPageChange, pageSize]);
+  const handleFilterChangeWithReset = useCallback7(
+    (columnId, filter) => {
+      handleFilterChange(columnId, filter);
+      resetPaginationToFirstPage();
+    },
+    [handleFilterChange, resetPaginationToFirstPage]
+  );
+  const clearAllFiltersWithReset = useCallback7(() => {
+    clearAllFilters();
+    resetPaginationToFirstPage();
+  }, [clearAllFilters, resetPaginationToFirstPage]);
   useEffect6(() => {
     setSpreadsheetSettings((prev) => ({
       ...prev,
@@ -3959,8 +4208,8 @@ function Spreadsheet({
     );
     return [...leftPinned, ...groups, ...rightPinned];
   }, [columnGroups, collapsedGroups, columns, pinnedColumns]);
-  return /* @__PURE__ */ jsxs12("div", { className: cn("flex flex-col h-full bg-white", className), children: [
-    showToolbar && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs13("div", { className: cn("flex flex-col h-full bg-white", className), children: [
+    showToolbar && /* @__PURE__ */ jsx13(
       SpreadsheetToolbar,
       {
         zoom,
@@ -3973,7 +4222,12 @@ function Spreadsheet({
         saveStatus,
         autoSave: spreadsheetSettings.autoSave,
         hasActiveFilters,
-        onClearFilters: clearAllFilters,
+        onClearFilters: clearAllFiltersWithReset,
+        filters,
+        columns,
+        onClearFilter: (columnId) => handleFilterChangeWithReset(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),
@@ -3990,16 +4244,16 @@ function Spreadsheet({
         menuItems: toolbarMenuItems
       }
     ),
-    /* @__PURE__ */ jsx12("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13("div", { ref: tableRef, className: "flex-1 overflow-auto border border-gray-200 rounded", children: /* @__PURE__ */ jsx13(
       "div",
       {
         style: {
           zoom: zoom / 100
         },
-        children: /* @__PURE__ */ jsxs12("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
-          /* @__PURE__ */ jsxs12("thead", { children: [
-            columnGroups && groupHeaderItems && /* @__PURE__ */ jsxs12("tr", { children: [
-              /* @__PURE__ */ jsx12(
+        children: /* @__PURE__ */ jsxs13("table", { className: "border-separate border-spacing-0 text-xs select-none", children: [
+          /* @__PURE__ */ jsxs13("thead", { children: [
+            columnGroups && groupHeaderItems && /* @__PURE__ */ jsxs13("tr", { children: [
+              /* @__PURE__ */ jsx13(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -4015,7 +4269,11 @@ function Spreadsheet({
                 if (item.type === "pinned-column") {
                   const col = columns.find((c) => c.id === item.columnId);
                   const isPinnedLeft = item.pinSide === "left";
-                  return /* @__PURE__ */ jsx12(
+                  const pinnedWidth = Math.max(
+                    col?.minWidth || col?.width || MIN_PINNED_COLUMN_WIDTH,
+                    MIN_PINNED_COLUMN_WIDTH
+                  );
+                  return /* @__PURE__ */ jsx13(
                     "th",
                     {
                       className: cn(
@@ -4027,16 +4285,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__ */ jsx12(
+                return /* @__PURE__ */ jsx13(
                   "th",
                   {
                     colSpan,
@@ -4048,17 +4304,17 @@ function Spreadsheet({
                       backgroundColor: group.headerColor || "rgb(243 244 246)"
                     },
                     onClick: () => group.collapsible && handleToggleGroupCollapse(group.id),
-                    children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-1", children: [
-                      group.collapsible && (isCollapsed ? /* @__PURE__ */ jsx12(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx12(HiChevronDown, { className: "h-3 w-3" })),
-                      /* @__PURE__ */ jsx12("span", { children: group.label })
+                    children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-center gap-1", children: [
+                      group.collapsible && (isCollapsed ? /* @__PURE__ */ jsx13(HiChevronRight, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx13(HiChevronDown, { className: "h-3 w-3" })),
+                      /* @__PURE__ */ jsx13("span", { children: group.label })
                     ] })
                   },
                   group.id
                 );
               })
             ] }),
-            /* @__PURE__ */ jsxs12("tr", { children: [
-              !columnGroups && /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsxs13("tr", { children: [
+              !columnGroups && /* @__PURE__ */ jsx13(
                 RowIndexColumnHeader,
                 {
                   enableHighlighting,
@@ -4072,7 +4328,7 @@ function Spreadsheet({
               ),
               columnRenderItems.map((item) => {
                 if (item.type === "collapsed-placeholder") {
-                  return /* @__PURE__ */ jsx12(
+                  return /* @__PURE__ */ jsx13(
                     "th",
                     {
                       className: "border border-gray-200 px-2 py-1 text-center text-gray-400",
@@ -4088,7 +4344,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__ */ jsx12(
+                return /* @__PURE__ */ jsx13(
                   SpreadsheetHeader,
                   {
                     column,
@@ -4106,12 +4362,12 @@ function Spreadsheet({
                     ),
                     onPinClick: () => handleTogglePin(column.id),
                     onHighlightClick: enableHighlighting ? () => setHighlightPickerColumn(column.id) : void 0,
-                    children: activeFilterColumn === column.id && /* @__PURE__ */ jsx12(
+                    children: activeFilterColumn === column.id && /* @__PURE__ */ jsx13(
                       SpreadsheetFilterDropdown,
                       {
                         column,
                         filter: filters[column.id],
-                        onFilterChange: (filter) => handleFilterChange(column.id, filter),
+                        onFilterChange: (filter) => handleFilterChangeWithReset(column.id, filter),
                         onClose: () => setActiveFilterColumn(null)
                       }
                     )
@@ -4121,17 +4377,17 @@ function Spreadsheet({
               })
             ] })
           ] }),
-          /* @__PURE__ */ jsx12("tbody", { children: isLoading ? /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13("tbody", { children: isLoading ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13(
             "td",
             {
               colSpan: columnRenderItems.length + 1,
               className: "text-center py-8 text-gray-500",
-              children: /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-center gap-2", children: [
-                /* @__PURE__ */ jsx12("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
+              children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-center gap-2", children: [
+                /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" }),
                 "Loading..."
               ] })
             }
-          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12(
+          ) }) : paginatedData.length === 0 ? /* @__PURE__ */ jsx13("tr", { children: /* @__PURE__ */ jsx13(
             "td",
             {
               colSpan: columnRenderItems.length + 1,
@@ -4144,7 +4400,7 @@ function Spreadsheet({
             const isRowHovered = hoveredRow === rowId;
             const rowHighlight = getRowHighlight(rowId);
             const displayIndex = rowIndex + 1 + (currentPage - 1) * pageSize;
-            return /* @__PURE__ */ jsxs12(
+            return /* @__PURE__ */ jsxs13(
               "tr",
               {
                 onMouseEnter: () => setHoveredRow(rowId),
@@ -4154,7 +4410,7 @@ function Spreadsheet({
                 },
                 onDoubleClick: () => onRowDoubleClick?.(row, rowIndex),
                 children: [
-                  /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx13(
                     "td",
                     {
                       onClick: (e) => handleRowSelect(rowId, e),
@@ -4175,10 +4431,10 @@ function Spreadsheet({
                           left: 0
                         }
                       },
-                      children: /* @__PURE__ */ jsxs12("div", { className: "relative flex items-center justify-center w-full h-full", children: [
-                        /* @__PURE__ */ jsx12("span", { children: displayIndex }),
-                        /* @__PURE__ */ jsxs12("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
-                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ jsx12(
+                      children: /* @__PURE__ */ jsxs13("div", { className: "relative flex items-center justify-center w-full h-full", children: [
+                        /* @__PURE__ */ jsx13("span", { children: displayIndex }),
+                        /* @__PURE__ */ jsxs13("div", { className: "absolute inset-0 flex items-center justify-evenly", children: [
+                          rowContextMenuItems && rowContextMenuItems.length > 0 && /* @__PURE__ */ jsx13(
                             RowContextMenu,
                             {
                               row,
@@ -4187,7 +4443,7 @@ function Spreadsheet({
                               compactMode: effectiveCompactMode
                             }
                           ),
-                          enableHighlighting && /* @__PURE__ */ jsx12(
+                          enableHighlighting && /* @__PURE__ */ jsx13(
                             "button",
                             {
                               type: "button",
@@ -4197,7 +4453,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__ */ jsx12(
+                              children: /* @__PURE__ */ jsx13(
                                 AiFillHighlight,
                                 {
                                   className: cn(
@@ -4211,7 +4467,7 @@ function Spreadsheet({
                           enableComments && (cellHasComments(
                             rowId,
                             ROW_INDEX_COLUMN_ID
-                          ) ? /* @__PURE__ */ jsxs12(
+                          ) ? /* @__PURE__ */ jsxs13(
                             "button",
                             {
                               type: "button",
@@ -4225,11 +4481,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__ */ jsx12(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
+                                /* @__PURE__ */ jsx13(FaComment, { className: "h-2.5 w-2.5 text-amber-500" }),
                                 getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
-                                ) > 0 && /* @__PURE__ */ jsx12("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
+                                ) > 0 && /* @__PURE__ */ jsx13("span", { className: "text-[9px] font-medium text-amber-600", children: getCellUnresolvedCommentCount(
                                   rowId,
                                   ROW_INDEX_COLUMN_ID
                                 ) > 99 ? "99+" : getCellUnresolvedCommentCount(
@@ -4238,7 +4494,7 @@ function Spreadsheet({
                                 ) })
                               ]
                             }
-                          ) : /* @__PURE__ */ jsx12(
+                          ) : /* @__PURE__ */ jsx13(
                             "button",
                             {
                               type: "button",
@@ -4251,13 +4507,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__ */ jsx12(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
+                              children: /* @__PURE__ */ jsx13(FaRegComment, { className: "h-2.5 w-2.5 text-gray-500" })
                             }
                           )),
                           rowActions?.map((action) => {
                             if (action.visible && !action.visible(row))
                               return null;
-                            return /* @__PURE__ */ jsx12(
+                            return /* @__PURE__ */ jsx13(
                               "button",
                               {
                                 type: "button",
@@ -4281,7 +4537,7 @@ function Spreadsheet({
                   ),
                   columnRenderItems.map((item) => {
                     if (item.type === "collapsed-placeholder") {
-                      return /* @__PURE__ */ jsx12(
+                      return /* @__PURE__ */ jsx13(
                         "td",
                         {
                           className: "border border-gray-200 px-2 py-1 text-center text-gray-300",
@@ -4307,7 +4563,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__ */ jsx12(
+                    return /* @__PURE__ */ jsx13(
                       MemoizedSpreadsheetCell,
                       {
                         value,
@@ -4367,7 +4623,7 @@ function Spreadsheet({
         ] })
       }
     ) }),
-    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ jsx12(
+    showPagination && effectiveTotalItems > 0 && /* @__PURE__ */ jsx13(
       Pagination,
       {
         currentPage,
@@ -4382,7 +4638,7 @@ function Spreadsheet({
         onPageSizeChange: handlePageSizeChange
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       AddCommentModal,
       {
         isOpen: commentModalCell !== null,
@@ -4393,7 +4649,7 @@ function Spreadsheet({
         }
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       ViewCommentsModal,
       {
         isOpen: viewCommentsCell !== null,
@@ -4408,7 +4664,7 @@ function Spreadsheet({
         onClose: () => setViewCommentsCell(null)
       }
     ),
-    highlightPickerRow !== null && /* @__PURE__ */ jsx12(
+    highlightPickerRow !== null && /* @__PURE__ */ jsx13(
       ColorPickerPopover,
       {
         title: "Highlight Row",
@@ -4417,7 +4673,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerRow(null)
       }
     ),
-    highlightPickerColumn !== null && /* @__PURE__ */ jsx12(
+    highlightPickerColumn !== null && /* @__PURE__ */ jsx13(
       ColorPickerPopover,
       {
         title: highlightPickerColumn === ROW_INDEX_COLUMN_ID ? "Highlight Row Index Column" : `Highlight Column: ${columns.find((c) => c.id === highlightPickerColumn)?.label || ""}`,
@@ -4426,7 +4682,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerColumn(null)
       }
     ),
-    highlightPickerCell !== null && /* @__PURE__ */ jsx12(
+    highlightPickerCell !== null && /* @__PURE__ */ jsx13(
       ColorPickerPopover,
       {
         title: "Highlight Cell",
@@ -4439,7 +4695,7 @@ function Spreadsheet({
         onClose: () => setHighlightPickerCell(null)
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       KeyboardShortcutsModal,
       {
         isOpen: showKeyboardShortcuts,
@@ -4447,7 +4703,7 @@ function Spreadsheet({
         shortcuts
       }
     ),
-    /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx13(
       SpreadsheetSettingsModal,
       {
         isOpen: showSettingsModal,
@@ -4474,6 +4730,7 @@ function Spreadsheet({
 }
 Spreadsheet.displayName = "Spreadsheet";
 export {
+  ActiveFiltersDisplay,
   RowContextMenu,
   Spreadsheet,
   MemoizedSpreadsheetCell as SpreadsheetCell,