fix: column resize and pinned column width corruption

- ColumnResizeHandle now uses logical stored width (currentWidth prop)
  instead of reading DOM getBoundingClientRect, fixing jitter on resize
  and preventing width corruption when a pinned column is resized
- Header passes effectiveWidth (columnWidths[field] ?? colDef.width)
  to ColumnResizeHandle as the correct baseline for drag calculations
- CSS auto-import added to barrel index.ts for all bundler environments

Author: asif7774

CHANGELOG.md

@@ -5,6 +5,16 @@
 
 ---
 
+## [0.1.3] — March 10, 2026 🐛
+
+### Fixed
+- CSS is now explicitly imported at the barrel entry (`lib/index.ts`) in addition to `DataGrid.tsx`, ensuring styles are never silently dropped by bundlers (Vite, Webpack, Next.js App Router) that don't auto-resolve side-effect CSS from library packages.
+
+### Docs
+- Updated `README.md` to accurately describe CSS handling and provide a clear fallback import instruction for all environments.
+
+---
+
 ## [0.1.2] — March 6, 2026 🐛
 
 ### Fixed

README.md

@@ -17,17 +17,19 @@ npm install @opencorestack/opengridx
 ```
 
 ```tsx
-// Styles are automatically included — no separate CSS import needed
 import { DataGrid } from '@opencorestack/opengridx';
 ```
 
-> **Note:** Styles are bundled inside the component. For SSR or CSS-in-JS setups use the explicit styles export:
+> **Styles:** The CSS is bundled as a separate file (`opengridx.css`) alongside the JS. It is imported automatically via the package barrel in most setups.
+> However, **if your grid appears unstyled** (Vite, Next.js App Router, or SSR environments sometimes skip side-effect CSS auto-detection), add this explicit import once — typically in your app's root file (`main.tsx` / `layout.tsx`):
+>
 > ```tsx
 > import '@opencorestack/opengridx/styles';
 > ```
 
 ---
 
+
 ## ⚡ Basic Example
 
 ```tsx

lib/components/ColumnResizeHandle/ColumnResizeHandle.tsx

@@ -4,13 +4,14 @@ import React, { useCallback, useRef, useState } from 'react';
 
 export interface ColumnResizeHandleProps {
     field: string;
+    currentWidth: number;
     onResize: (field: string, newWidth: number) => void;
     minWidth?: number;
     maxWidth?: number;
 }
 
 export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
-    const { field, onResize, minWidth = 50, maxWidth = 1000 } = props;
+    const { field, currentWidth, onResize, minWidth = 50, maxWidth = 1000 } = props;
     const [isDragging, setIsDragging] = useState(false);
     const startXRef = useRef<number>(0);
     const startWidthRef = useRef<number>(0);
@@ -21,11 +22,8 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
 
         setIsDragging(true);
         startXRef.current = event.clientX;
-
-        const headerCell = (event.target as HTMLElement).closest('.ogx__header-cell');
-        if (headerCell) {
-            startWidthRef.current = headerCell.getBoundingClientRect().width;
-        }
+        // Use the logical stored width — reliable for pinned, flex, and normal columns
+        startWidthRef.current = currentWidth;
 
         let lastUpdateTime = 0;
         const throttleMs = 16;
@@ -55,14 +53,12 @@ export function ColumnResizeHandle(props: ColumnResizeHandleProps) {
 
         document.addEventListener('mousemove', handleMouseMove);
         document.addEventListener('mouseup', handleMouseUp);
-    }, [field, onResize, minWidth, maxWidth]);
+    }, [field, currentWidth, onResize, minWidth, maxWidth]);
 
     const handleDoubleClick = useCallback((event: React.MouseEvent) => {
         event.preventDefault();
         event.stopPropagation();
-
-
-    }, [field]);
+    }, []);
 
     const classNames = [
         'ogx-column-resize-handle',

lib/components/Header/Header.tsx

@@ -487,6 +487,7 @@ export function Header<R extends GridRowModel = GridRowModel>(props: HeaderProps
                             {isResizable && onColumnResize && (
                                 <ColumnResizeHandle
                                     field={colDef.field}
+                                    currentWidth={effectiveWidth}
                                     onResize={onColumnResize}
                                     minWidth={colDef.minWidth}
                                     maxWidth={colDef.maxWidth}

lib/index.ts

@@ -1,4 +1,7 @@
 
+// Auto-import styles — this ensures consumers do NOT need a manual CSS import
+import './styles/opengridx.css';
+
 export { DataGrid } from './components/DataGrid/DataGrid';
 export { Cell } from './components/Cell/Cell';
 export { Row } from './components/Row/Row';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencorestack/opengridx",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "OpenGridX: High-performance React data infrastructure. Unlock advanced Row Grouping, Excel Export, and Column Pinning without the usual \"Pro\" gatekeeping. Built for speed, scale, and complete architectural freedom. Fully open, virtualization-ready, and feature-complete.",
   "type": "module",
   "main": "./dist/opengridx.umd.js",