@rowakit/table 0.3.0 → 0.4.0

package/README.md

@@ -14,10 +14,10 @@ RowaKit Table is a React table component designed for real-world internal applic
 ✅ **7 column types** - Text, Date, Boolean, Badge, Number, Actions, Custom  
 ✅ **Column modifiers** - Width, align, truncate, minWidth, maxWidth (v0.2.0+)  
 ✅ **Server-side filters** - Type-specific filter UI with auto-generated inputs (v0.2.0+)  
-✅ **Column resizing** - Drag-to-resize handles with constraints (v0.3.0+)  
-✅ **Saved views** - Save/load table state with localStorage persistence (v0.3.0+)  
-✅ **URL state sync** - Share URLs with exact table configuration (v0.3.0+)  
-✅ **Number range filters** - Min/max filtering for numeric columns (v0.3.0+)  
+✅ **Column resizing** - Drag-to-resize handles with constraints (v0.4.0+)  
+✅ **Saved views** - Save/load table state with localStorage persistence (v0.4.0+)  
+✅ **URL state sync** - Share URLs with exact table configuration (v0.4.0+)  
+✅ **Number range filters** - Min/max filtering for numeric columns (v0.4.0+)  
 ✅ **State management** - Automatic loading, error, and empty states  
 ✅ **Smart fetching** - Retry on error, stale request handling
 
@@ -858,7 +858,7 @@ col.actions([
 
 ---
 
-## Advanced Features (v0.3.0+)
+## Advanced Features (v0.4.0+)
 
 ### Column Resizing (C-01)
 
@@ -1475,17 +1475,20 @@ Full TypeScript support. Your data model drives type checking throughout.
 - ✅ Fixed numeric filter value coercion
 - ✅ Production hardening and comprehensive documentation
 
-**Stage C - Advanced Features (v0.3.0)** ✅ Complete (2026-01-03)
+**Stage C - Advanced Features (v0.4.0)** ✅ Complete (2026-01-03)
 - ✅ C-01: Column resizing with drag handles (minWidth/maxWidth constraints)
 - ✅ C-02: Saved views with localStorage persistence
 - ✅ C-02: URL state sync (page, pageSize, sort, filters, columnWidths)
 - ✅ C-03: Number range filters with optional filterTransform
 
-**Stage D - Future** (Demand-Driven)
-- Multi-column sorting
-- Row selection + bulk actions
-- Export CSV (server-triggered)
-- Column visibility toggle
+**Stage D - Polish + Correctness (v0.4.0)** ✅ Complete (2026-01-05)
+- ✅ D-01: Prevent accidental sort while resizing (stopPropagation, suppression window)
+- ✅ D-02: Pointer Events resizing (mouse, touch, pen) with pointer capture and cleanup
+- ✅ D-03: Column width model hardening (apply widths to th+td, fixed layout, truncation)
+- ✅ D-04: Saved views persistence (index, hydration, corruption-safe)
+- ✅ D-05: URL sync hardening (validation, debounce, backward compatible)
+
+See [ROADMAP.md](./docs/ROADMAP.md) and `docs/ROWAKIT_STAGE_D_ISSUES_v3.md` for implementation details and rationale.
 
 ## Changelog
 

package/dist/index.cjs

@@ -120,6 +120,158 @@ function getRowKey(row, rowKey) {
 function getHeaderLabel(column) {
   return column.header ?? column.id;
 }
+function validateViewName(name) {
+  const trimmed = name.trim();
+  if (trimmed.length === 0) {
+    return { valid: false, error: "Name cannot be empty" };
+  }
+  if (trimmed.length > 40) {
+    return { valid: false, error: "Name cannot exceed 40 characters" };
+  }
+  const invalidChars = /[/\\?%*:|"<>\x00-\x1f\x7f]/;
+  if (invalidChars.test(trimmed)) {
+    return { valid: false, error: "Name contains invalid characters" };
+  }
+  return { valid: true };
+}
+function getSavedViewsIndex() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return [];
+  }
+  try {
+    const indexStr = localStorage.getItem("rowakit-views-index");
+    if (indexStr) {
+      const index = JSON.parse(indexStr);
+      if (Array.isArray(index)) {
+        return index;
+      }
+    }
+  } catch {
+  }
+  const rebuilt = [];
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (key?.startsWith("rowakit-view-")) {
+        const name = key.substring("rowakit-view-".length);
+        rebuilt.push({
+          name,
+          updatedAt: Date.now()
+        });
+      }
+    }
+  } catch {
+  }
+  return rebuilt;
+}
+function setSavedViewsIndex(index) {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return;
+  }
+  try {
+    localStorage.setItem("rowakit-views-index", JSON.stringify(index));
+  } catch {
+  }
+}
+function loadSavedViewsFromStorage() {
+  if (typeof window === "undefined" || !window.localStorage) {
+    return [];
+  }
+  const index = getSavedViewsIndex();
+  const views = [];
+  for (const entry of index) {
+    try {
+      const viewStr = localStorage.getItem(`rowakit-view-${entry.name}`);
+      if (viewStr) {
+        const state = JSON.parse(viewStr);
+        views.push({
+          name: entry.name,
+          state
+        });
+      }
+    } catch {
+    }
+  }
+  return views;
+}
+function parseUrlState(params, defaultPageSize, pageSizeOptions) {
+  const pageStr = params.get("page");
+  let page = 1;
+  if (pageStr) {
+    const parsed = parseInt(pageStr, 10);
+    page = !isNaN(parsed) && parsed >= 1 ? parsed : 1;
+  }
+  const pageSizeStr = params.get("pageSize");
+  let pageSize = defaultPageSize;
+  if (pageSizeStr) {
+    const parsed = parseInt(pageSizeStr, 10);
+    if (!isNaN(parsed) && parsed >= 1) {
+      if (pageSizeOptions && pageSizeOptions.length > 0) {
+        pageSize = pageSizeOptions.includes(parsed) ? parsed : defaultPageSize;
+      } else {
+        pageSize = parsed;
+      }
+    }
+  }
+  const result = { page, pageSize };
+  const sortField = params.get("sortField");
+  const sortDir = params.get("sortDirection");
+  if (sortField && (sortDir === "asc" || sortDir === "desc")) {
+    result.sort = { field: sortField, direction: sortDir };
+  }
+  const filtersStr = params.get("filters");
+  if (filtersStr) {
+    try {
+      const parsed = JSON.parse(filtersStr);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        result.filters = parsed;
+      }
+    } catch {
+    }
+  }
+  const widthsStr = params.get("columnWidths");
+  if (widthsStr) {
+    try {
+      const parsed = JSON.parse(widthsStr);
+      if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+        const widths = {};
+        for (const [key, value] of Object.entries(parsed)) {
+          if (typeof value === "number" && value > 0) {
+            widths[key] = value;
+          }
+        }
+        if (Object.keys(widths).length > 0) {
+          result.columnWidths = widths;
+        }
+      }
+    } catch {
+    }
+  }
+  return result;
+}
+function serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing) {
+  const params = new URLSearchParams();
+  params.set("page", String(query.page));
+  if (query.pageSize !== defaultPageSize) {
+    params.set("pageSize", String(query.pageSize));
+  }
+  if (query.sort) {
+    params.set("sortField", query.sort.field);
+    params.set("sortDirection", query.sort.direction);
+  }
+  if (filters && Object.keys(filters).length > 0) {
+    const nonEmptyFilters = Object.fromEntries(
+      Object.entries(filters).filter(([, v]) => v !== void 0)
+    );
+    if (Object.keys(nonEmptyFilters).length > 0) {
+      params.set("filters", JSON.stringify(nonEmptyFilters));
+    }
+  }
+  if (enableColumnResizing && Object.keys(columnWidths).length > 0) {
+    params.set("columnWidths", JSON.stringify(columnWidths));
+  }
+  return params.toString();
+}
 function renderCell(column, row, isLoading, setConfirmState) {
   switch (column.kind) {
     case "text": {
@@ -236,60 +388,96 @@ function RowaKitTable({
   const resizeRafRef = react.useRef(null);
   const resizePendingRef = react.useRef(null);
   const tableRef = react.useRef(null);
+  const isResizingRef = react.useRef(false);
+  const lastResizeEndTsRef = react.useRef(0);
+  const resizingColIdRef = react.useRef(null);
+  const didHydrateUrlRef = react.useRef(false);
+  const didSkipInitialUrlSyncRef = react.useRef(false);
+  const urlSyncDebounceRef = react.useRef(null);
   const [savedViews, setSavedViews] = react.useState([]);
+  const [showSaveViewForm, setShowSaveViewForm] = react.useState(false);
+  const [saveViewInput, setSaveViewInput] = react.useState("");
+  const [saveViewError, setSaveViewError] = react.useState("");
+  const [overwriteConfirmName, setOverwriteConfirmName] = react.useState(null);
+  react.useEffect(() => {
+    if (!enableSavedViews) return;
+    const views = loadSavedViewsFromStorage();
+    setSavedViews(views);
+  }, [enableSavedViews]);
   const [confirmState, setConfirmState] = react.useState(null);
   const requestIdRef = react.useRef(0);
   react.useEffect(() => {
-    if (!syncToUrl) return;
-    const params = new URLSearchParams();
-    params.set("page", String(query.page));
-    params.set("pageSize", String(query.pageSize));
-    if (query.sort) {
-      params.set("sortField", query.sort.field);
-      params.set("sortDirection", query.sort.direction);
+    if (!syncToUrl) {
+      didSkipInitialUrlSyncRef.current = false;
+      return;
     }
-    if (query.filters && Object.keys(query.filters).length > 0) {
-      params.set("filters", JSON.stringify(query.filters));
+    if (!didSkipInitialUrlSyncRef.current) {
+      didSkipInitialUrlSyncRef.current = true;
+      return;
     }
-    if (enableColumnResizing && Object.keys(columnWidths).length > 0) {
-      params.set("columnWidths", JSON.stringify(columnWidths));
+    if (urlSyncDebounceRef.current) {
+      clearTimeout(urlSyncDebounceRef.current);
+      urlSyncDebounceRef.current = null;
     }
-    window.history.replaceState(null, "", `?${params.toString()}`);
-  }, [query, columnWidths, syncToUrl, enableColumnResizing]);
+    const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+    const qs = urlStr ? `?${urlStr}` : "";
+    window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+  }, [query, filters, syncToUrl, enableColumnResizing, defaultPageSize, columnWidths]);
   react.useEffect(() => {
-    if (!syncToUrl) return;
-    const params = new URLSearchParams(window.location.search);
-    const page = parseInt(params.get("page") ?? "1", 10);
-    const pageSize = parseInt(params.get("pageSize") ?? String(defaultPageSize), 10);
-    const sortField = params.get("sortField");
-    const sortDirection = params.get("sortDirection");
-    const filtersStr = params.get("filters");
-    const columnWidthsStr = params.get("columnWidths");
-    const newQuery = {
-      page: Math.max(1, page),
-      pageSize: Math.max(1, pageSize)
-    };
-    if (sortField && sortDirection) {
-      newQuery.sort = { field: sortField, direction: sortDirection };
+    if (!syncToUrl || !enableColumnResizing) return;
+    if (!didSkipInitialUrlSyncRef.current) return;
+    if (urlSyncDebounceRef.current) {
+      clearTimeout(urlSyncDebounceRef.current);
     }
-    if (filtersStr) {
-      try {
-        const parsedFilters = JSON.parse(filtersStr);
-        if (parsedFilters && typeof parsedFilters === "object") {
-          setFilters(parsedFilters);
-          newQuery.filters = parsedFilters;
-        }
-      } catch {
+    urlSyncDebounceRef.current = setTimeout(() => {
+      const urlStr = serializeUrlState(query, filters, columnWidths, defaultPageSize, enableColumnResizing);
+      const qs = urlStr ? `?${urlStr}` : "";
+      window.history.replaceState(null, "", `${window.location.pathname}${qs}${window.location.hash}`);
+      urlSyncDebounceRef.current = null;
+    }, 150);
+    return () => {
+      if (urlSyncDebounceRef.current) {
+        clearTimeout(urlSyncDebounceRef.current);
+        urlSyncDebounceRef.current = null;
       }
+    };
+  }, [columnWidths, syncToUrl, enableColumnResizing, query, filters, defaultPageSize]);
+  react.useEffect(() => {
+    if (!syncToUrl) {
+      didHydrateUrlRef.current = false;
+      return;
     }
-    if (enableColumnResizing && columnWidthsStr) {
-      try {
-        setColumnWidths(JSON.parse(columnWidthsStr));
-      } catch {
+    if (didHydrateUrlRef.current) return;
+    didHydrateUrlRef.current = true;
+    const params = new URLSearchParams(window.location.search);
+    const parsed = parseUrlState(params, defaultPageSize, pageSizeOptions);
+    setQuery({
+      page: parsed.page,
+      pageSize: parsed.pageSize,
+      sort: parsed.sort,
+      filters: parsed.filters
+    });
+    if (parsed.filters) {
+      setFilters(parsed.filters);
+    }
+    if (parsed.columnWidths && enableColumnResizing) {
+      const clamped = {};
+      for (const [colId, rawWidth] of Object.entries(parsed.columnWidths)) {
+        const widthNum = typeof rawWidth === "number" ? rawWidth : Number(rawWidth);
+        if (!Number.isFinite(widthNum)) continue;
+        const colDef = columns.find((c) => c.id === colId);
+        if (!colDef) continue;
+        const minW = colDef.minWidth ?? 80;
+        const maxW = colDef.maxWidth;
+        let finalW = Math.max(minW, widthNum);
+        if (maxW != null) {
+          finalW = Math.min(finalW, maxW);
+        }
+        clamped[colId] = finalW;
       }
+      setColumnWidths(clamped);
     }
-    setQuery(newQuery);
-  }, [syncToUrl, defaultPageSize, enableColumnResizing]);
+  }, [syncToUrl, defaultPageSize, enableColumnResizing, pageSizeOptions, columns]);
   react.useEffect(() => {
     if (!enableFilters) return;
     const activeFilters = {};
@@ -392,15 +580,52 @@ function RowaKitTable({
     if (maxWidth) {
       finalWidth = Math.min(finalWidth, maxWidth);
     }
+    if (columnWidths[columnId] === finalWidth) {
+      return;
+    }
     setColumnWidths((prev) => ({
       ...prev,
       [columnId]: finalWidth
     }));
   };
+  const autoFitColumnWidth = (columnId) => {
+    const tableEl = tableRef.current;
+    if (!tableEl) return;
+    const th = tableEl.querySelector(`th[data-col-id="${columnId}"]`);
+    if (!th) return;
+    const tds = Array.from(
+      tableEl.querySelectorAll(`td[data-col-id="${columnId}"]`)
+    );
+    const headerW = th.scrollWidth;
+    const cellsMaxW = tds.reduce((max, td) => Math.max(max, td.scrollWidth), 0);
+    const padding = 24;
+    const raw = Math.max(headerW, cellsMaxW) + padding;
+    const colDef = columns.find((c) => c.id === columnId);
+    const minW = colDef?.minWidth ?? 80;
+    const maxW = colDef?.maxWidth ?? 600;
+    const finalW = Math.max(minW, Math.min(raw, maxW));
+    setColumnWidths((prev) => ({ ...prev, [columnId]: finalW }));
+  };
   const startColumnResize = (e, columnId) => {
     e.preventDefault();
+    e.stopPropagation();
+    if (e.detail === 2) {
+      autoFitColumnWidth(columnId);
+      return;
+    }
+    if (e.pointerType === "mouse" && e.buttons !== 1) {
+      return;
+    }
+    const target = e.currentTarget;
+    const pointerId = e.pointerId;
+    try {
+      target.setPointerCapture(pointerId);
+    } catch {
+    }
+    isResizingRef.current = true;
+    resizingColIdRef.current = columnId;
     const startX = e.clientX;
-    const th = e.currentTarget.parentElement;
+    const th = target.parentElement;
     let startWidth = columnWidths[columnId] ?? th.offsetWidth;
     const MIN_DRAG_WIDTH = 80;
     if (startWidth < MIN_DRAG_WIDTH) {
@@ -412,33 +637,38 @@ function RowaKitTable({
       }
     }
     document.body.classList.add("rowakit-resizing");
-    const handleMouseMove = (moveEvent) => {
+    const handlePointerMove = (moveEvent) => {
       const delta = moveEvent.clientX - startX;
       const newWidth = startWidth + delta;
       scheduleColumnWidthUpdate(columnId, newWidth);
     };
-    const handleMouseUp = () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
+    const cleanupResize = () => {
+      target.removeEventListener("pointermove", handlePointerMove);
+      target.removeEventListener("pointerup", handlePointerUp);
+      target.removeEventListener("pointercancel", handlePointerCancel);
       document.body.classList.remove("rowakit-resizing");
+      isResizingRef.current = false;
+      resizingColIdRef.current = null;
+      lastResizeEndTsRef.current = Date.now();
+      try {
+        target.releasePointerCapture(pointerId);
+      } catch {
+      }
+    };
+    const handlePointerUp = () => {
+      cleanupResize();
+    };
+    const handlePointerCancel = () => {
+      cleanupResize();
     };
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
+    target.addEventListener("pointermove", handlePointerMove);
+    target.addEventListener("pointerup", handlePointerUp);
+    target.addEventListener("pointercancel", handlePointerCancel);
   };
-  const handleColumnResizeDoubleClick = (columnId) => {
-    const tableEl = tableRef.current;
-    if (!tableEl) return;
-    const th = tableEl.querySelector(`th[data-col-id="${columnId}"]`);
-    if (!th) return;
-    const tds = Array.from(tableEl.querySelectorAll(`td[data-col-id="${columnId}"]`));
-    const headerW = th.scrollWidth;
-    const cellsMaxW = tds.reduce((max, td) => Math.max(max, td.scrollWidth), 0);
-    const padding = 24;
-    const raw = Math.max(headerW, cellsMaxW) + padding;
-    const minW = columns.find((c) => c.id === columnId)?.minWidth ?? 80;
-    const maxW = columns.find((c) => c.id === columnId)?.maxWidth ?? 600;
-    const finalW = Math.max(minW, Math.min(raw, maxW));
-    setColumnWidths((prev) => ({ ...prev, [columnId]: finalW }));
+  const handleColumnResizeDoubleClick = (e, columnId) => {
+    e.preventDefault();
+    e.stopPropagation();
+    autoFitColumnWidth(columnId);
   };
   const saveCurrentView = (name) => {
     const viewState = {
@@ -455,6 +685,10 @@ function RowaKitTable({
     if (typeof window !== "undefined" && window.localStorage) {
       try {
         localStorage.setItem(`rowakit-view-${name}`, JSON.stringify(viewState));
+        const index = getSavedViewsIndex();
+        const filtered = index.filter((v) => v.name !== name);
+        filtered.push({ name, updatedAt: Date.now() });
+        setSavedViewsIndex(filtered);
       } catch {
       }
     }
@@ -479,6 +713,9 @@ function RowaKitTable({
     if (typeof window !== "undefined" && window.localStorage) {
       try {
         localStorage.removeItem(`rowakit-view-${name}`);
+        const index = getSavedViewsIndex();
+        const filtered = index.filter((v) => v.name !== name);
+        setSavedViewsIndex(filtered);
       } catch {
       }
     }
@@ -542,22 +779,127 @@ function RowaKitTable({
   const canGoPrevious = query.page > 1 && !isLoading;
   const canGoNext = query.page < totalPages && !isLoading;
   const hasActiveFilters = enableFilters && Object.values(filters).some((v) => v !== void 0);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rowakit-table${className ? ` ${className}` : ""}`, children: [
+  const containerClass = [
+    "rowakit-table",
+    enableColumnResizing ? "rowakit-layout-fixed" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
     enableSavedViews && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-saved-views-group", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
+      !showSaveViewForm ? /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => {
-            const name = typeof window !== "undefined" ? window.prompt("Enter view name:") : null;
-            if (name) {
-              saveCurrentView(name);
-            }
+            setShowSaveViewForm(true);
+            setSaveViewInput("");
+            setSaveViewError("");
+            setOverwriteConfirmName(null);
           },
           className: "rowakit-saved-view-button",
           type: "button",
           children: "Save View"
         }
-      ),
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-save-view-form", children: overwriteConfirmName ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-save-view-confirm", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+          'View "',
+          overwriteConfirmName,
+          '" already exists. Overwrite?'
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              saveCurrentView(overwriteConfirmName);
+              setShowSaveViewForm(false);
+              setSaveViewInput("");
+              setSaveViewError("");
+              setOverwriteConfirmName(null);
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Overwrite"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setOverwriteConfirmName(null);
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Cancel"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: saveViewInput,
+            onChange: (e) => {
+              setSaveViewInput(e.target.value);
+              setSaveViewError("");
+            },
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                const validation = validateViewName(saveViewInput);
+                if (!validation.valid) {
+                  setSaveViewError(validation.error || "Invalid name");
+                  return;
+                }
+                if (savedViews.some((v) => v.name === saveViewInput.trim())) {
+                  setOverwriteConfirmName(saveViewInput.trim());
+                } else {
+                  saveCurrentView(saveViewInput.trim());
+                  setShowSaveViewForm(false);
+                  setSaveViewInput("");
+                  setSaveViewError("");
+                }
+              }
+            },
+            placeholder: "Enter view name...",
+            className: "rowakit-save-view-input"
+          }
+        ),
+        saveViewError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rowakit-save-view-error", children: saveViewError }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              const validation = validateViewName(saveViewInput);
+              if (!validation.valid) {
+                setSaveViewError(validation.error || "Invalid name");
+                return;
+              }
+              if (savedViews.some((v) => v.name === saveViewInput.trim())) {
+                setOverwriteConfirmName(saveViewInput.trim());
+              } else {
+                saveCurrentView(saveViewInput.trim());
+                setShowSaveViewForm(false);
+                setSaveViewInput("");
+                setSaveViewError("");
+              }
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Save"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => {
+              setShowSaveViewForm(false);
+              setSaveViewInput("");
+              setSaveViewError("");
+            },
+            className: "rowakit-saved-view-button",
+            type: "button",
+            children: "Cancel"
+          }
+        )
+      ] }) }),
       savedViews.map((view) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rowakit-saved-view-item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
@@ -609,7 +951,11 @@ function RowaKitTable({
             "th",
             {
               "data-col-id": column.id,
-              onClick: isSortable ? () => handleSort(String(field)) : void 0,
+              onClick: isSortable ? () => {
+                if (isResizingRef.current) return;
+                if (Date.now() - lastResizeEndTsRef.current < 150) return;
+                handleSort(String(field));
+              } : void 0,
               role: isSortable ? "button" : void 0,
               tabIndex: isSortable ? 0 : void 0,
               onKeyDown: isSortable ? (e) => {
@@ -620,11 +966,15 @@ function RowaKitTable({
               } : void 0,
               "aria-sort": isSortable && query.sort?.field === String(field) ? query.sort.direction === "asc" ? "ascending" : "descending" : void 0,
               style: {
-                width: actualWidth ? `${actualWidth}px` : void 0,
+                width: actualWidth != null ? `${actualWidth}px` : void 0,
                 textAlign: column.align,
                 position: isResizable ? "relative" : void 0
               },
-              className: column.truncate && !isResizable ? "rowakit-cell-truncate" : void 0,
+              className: [
+                column.truncate ? "rowakit-cell-truncate" : "",
+                resizingColIdRef.current === column.id ? "resizing" : ""
+                // PRD-01
+              ].filter(Boolean).join(" ") || void 0,
               children: [
                 getHeaderLabel(column),
                 isSortable && getSortIndicator(String(field)),
@@ -632,8 +982,8 @@ function RowaKitTable({
                   "div",
                   {
                     className: "rowakit-column-resize-handle",
-                    onMouseDown: (e) => startColumnResize(e, column.id),
-                    onDoubleClick: () => handleColumnResizeDoubleClick(column.id),
+                    onPointerDown: (e) => startColumnResize(e, column.id),
+                    onDoubleClick: (e) => handleColumnResizeDoubleClick(e, column.id),
                     title: "Drag to resize | Double-click to auto-fit content"
                   }
                 )
@@ -832,14 +1182,14 @@ function RowaKitTable({
               column.kind === "number" ? "rowakit-cell-number" : "",
               column.truncate ? "rowakit-cell-truncate" : ""
             ].filter(Boolean).join(" ") || void 0;
-            const actualWidth = columnWidths[column.id];
+            const actualWidth = columnWidths[column.id] ?? column.width;
             return /* @__PURE__ */ jsxRuntime.jsx(
               "td",
               {
                 "data-col-id": column.id,
                 className: cellClass,
                 style: {
-                  width: actualWidth ? `${actualWidth}px` : void 0,
+                  width: actualWidth != null ? `${actualWidth}px` : void 0,
                   textAlign: column.align || (column.kind === "number" ? "right" : void 0)
                 },
                 children: renderCell(column, row, isLoading, setConfirmState)
@@ -944,7 +1294,7 @@ function RowaKitTable({
 var SmartTable = RowaKitTable;
 
 // src/index.ts
-var VERSION = "0.1.0";
+var VERSION = "0.4.0";
 
 exports.RowaKitTable = RowaKitTable;
 exports.SmartTable = SmartTable;