fix: code quality improvements from review (#859)

- Remove unused PaneState type from types and exports
- Extract cn() utility for className combination (reduces duplication)
- Add comprehensive tests for usePersistence hook (12 new tests)
- Add SSR safety check to announce() function
- Document Escape key in README keyboard navigation
- Move Tailwind/shadcn section to separate TAILWIND.md file
- Refactor useResizer to avoid state-during-render pattern (React 19 compatible)

Closes #858

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-authored-by: Claude <[email protected]>

Author: tomkp

README.md

@@ -200,6 +200,7 @@ The divider is fully keyboard accessible:
 - **Shift + Arrow**: Resize by larger step (default: 50px)
 - **Home**: Minimize left/top pane
 - **End**: Maximize left/top pane
+- **Escape**: Restore pane sizes to initial state
 - **Tab**: Navigate between dividers
 
 ## API Reference
@@ -342,112 +343,7 @@ A subtle single-pixel divider:
 
 ## Tailwind CSS & shadcn/ui
 
-React Split Pane works seamlessly with Tailwind CSS and shadcn/ui. The component uses plain CSS and inline styles (no CSS-in-JS), so there are no conflicts with utility-first frameworks.
-
-### Using Tailwind Classes
-
-Apply Tailwind classes directly via `className` props. Skip importing the default stylesheet for full Tailwind control:
-
-```tsx
-import { SplitPane, Pane } from 'react-split-pane';
-// Don't import 'react-split-pane/styles.css' if using Tailwind
-
-<SplitPane
-  className="h-screen w-full"
-  dividerClassName="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
->
-  <Pane defaultSize="300px" className="bg-white dark:bg-gray-900 p-4">
-    <Sidebar />
-  </Pane>
-  <Pane className="bg-gray-50 dark:bg-gray-800 p-4">
-    <MainContent />
-  </Pane>
-</SplitPane>
-```
-
-### shadcn/ui Integration
-
-Use shadcn's CSS variables and utilities for consistent theming:
-
-```tsx
-import { SplitPane, Pane } from 'react-split-pane';
-
-<SplitPane
-  className="h-full w-full"
-  dividerClassName="bg-border hover:bg-accent transition-colors"
->
-  <Pane defaultSize="280px" className="bg-background border-r">
-    <Sidebar />
-  </Pane>
-  <Pane className="bg-muted/50">
-    <MainContent />
-  </Pane>
-</SplitPane>
-```
-
-### Custom Divider with shadcn
-
-Create a themed divider component using shadcn's `cn` utility:
-
-```tsx
-import { cn } from '@/lib/utils';
-import type { DividerProps } from 'react-split-pane';
-
-function ThemedDivider({ direction, isDragging, disabled, ...props }: DividerProps) {
-  return (
-    <div
-      className={cn(
-        'flex items-center justify-center transition-colors',
-        'bg-border hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring',
-        direction === 'horizontal'
-          ? 'w-1 cursor-col-resize'
-          : 'h-1 cursor-row-resize',
-        isDragging && 'bg-primary',
-        disabled && 'cursor-not-allowed opacity-50'
-      )}
-      {...props}
-    />
-  );
-}
-
-<SplitPane divider={ThemedDivider}>
-  <Pane>Left</Pane>
-  <Pane>Right</Pane>
-</SplitPane>
-```
-
-### CSS Variables with Tailwind
-
-Override the default CSS variables in your `globals.css` to match your Tailwind theme:
-
-```css
-/* globals.css */
-@layer base {
-  :root {
-    --split-pane-divider-size: 4px;
-    --split-pane-divider-color: theme('colors.gray.200');
-    --split-pane-divider-color-hover: theme('colors.gray.300');
-    --split-pane-focus-color: theme('colors.blue.500');
-  }
-
-  .dark {
-    --split-pane-divider-color: theme('colors.gray.700');
-    --split-pane-divider-color-hover: theme('colors.gray.600');
-  }
-}
-```
-
-Or with shadcn/ui CSS variables:
-
-```css
-@layer base {
-  :root {
-    --split-pane-divider-color: hsl(var(--border));
-    --split-pane-divider-color-hover: hsl(var(--accent));
-    --split-pane-focus-color: hsl(var(--ring));
-  }
-}
-```
+React Split Pane works seamlessly with Tailwind CSS and shadcn/ui. See [TAILWIND.md](./TAILWIND.md) for detailed integration examples including custom dividers and CSS variable overrides.
 
 ## Migration from v0.1.x
 

TAILWIND.md

@@ -0,0 +1,108 @@
+# Tailwind CSS & shadcn/ui Integration
+
+React Split Pane works seamlessly with Tailwind CSS and shadcn/ui. The component uses plain CSS and inline styles (no CSS-in-JS), so there are no conflicts with utility-first frameworks.
+
+## Using Tailwind Classes
+
+Apply Tailwind classes directly via `className` props. Skip importing the default stylesheet for full Tailwind control:
+
+```tsx
+import { SplitPane, Pane } from 'react-split-pane';
+// Don't import 'react-split-pane/styles.css' if using Tailwind
+
+<SplitPane
+  className="h-screen w-full"
+  dividerClassName="bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors"
+>
+  <Pane defaultSize="300px" className="bg-white dark:bg-gray-900 p-4">
+    <Sidebar />
+  </Pane>
+  <Pane className="bg-gray-50 dark:bg-gray-800 p-4">
+    <MainContent />
+  </Pane>
+</SplitPane>
+```
+
+## shadcn/ui Integration
+
+Use shadcn's CSS variables and utilities for consistent theming:
+
+```tsx
+import { SplitPane, Pane } from 'react-split-pane';
+
+<SplitPane
+  className="h-full w-full"
+  dividerClassName="bg-border hover:bg-accent transition-colors"
+>
+  <Pane defaultSize="280px" className="bg-background border-r">
+    <Sidebar />
+  </Pane>
+  <Pane className="bg-muted/50">
+    <MainContent />
+  </Pane>
+</SplitPane>
+```
+
+## Custom Divider with shadcn
+
+Create a themed divider component using shadcn's `cn` utility:
+
+```tsx
+import { cn } from '@/lib/utils';
+import type { DividerProps } from 'react-split-pane';
+
+function ThemedDivider({ direction, isDragging, disabled, ...props }: DividerProps) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-center transition-colors',
+        'bg-border hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring',
+        direction === 'horizontal'
+          ? 'w-1 cursor-col-resize'
+          : 'h-1 cursor-row-resize',
+        isDragging && 'bg-primary',
+        disabled && 'cursor-not-allowed opacity-50'
+      )}
+      {...props}
+    />
+  );
+}
+
+<SplitPane divider={ThemedDivider}>
+  <Pane>Left</Pane>
+  <Pane>Right</Pane>
+</SplitPane>
+```
+
+## CSS Variables with Tailwind
+
+Override the default CSS variables in your `globals.css` to match your Tailwind theme:
+
+```css
+/* globals.css */
+@layer base {
+  :root {
+    --split-pane-divider-size: 4px;
+    --split-pane-divider-color: theme('colors.gray.200');
+    --split-pane-divider-color-hover: theme('colors.gray.300');
+    --split-pane-focus-color: theme('colors.blue.500');
+  }
+
+  .dark {
+    --split-pane-divider-color: theme('colors.gray.700');
+    --split-pane-divider-color-hover: theme('colors.gray.600');
+  }
+}
+```
+
+Or with shadcn/ui CSS variables:
+
+```css
+@layer base {
+  :root {
+    --split-pane-divider-color: hsl(var(--border));
+    --split-pane-divider-color-hover: hsl(var(--accent));
+    --split-pane-focus-color: hsl(var(--ring));
+  }
+}
+```

src/components/Divider.tsx

@@ -4,6 +4,7 @@ import {
   getDividerLabel,
   getKeyboardInstructions,
 } from '../utils/accessibility';
+import { cn } from '../utils/classNames';
 
 const DEFAULT_CLASSNAME = 'split-pane-divider';
 
@@ -79,14 +80,12 @@ export function Divider(props: DividerProps) {
     ...style,
   };
 
-  const combinedClassName = [
+  const combinedClassName = cn(
     DEFAULT_CLASSNAME,
     direction,
     isDragging && 'dragging',
-    className,
-  ]
-    .filter(Boolean)
-    .join(' ');
+    className
+  );
 
   const label = getDividerLabel(index, direction);
   const instructions = getKeyboardInstructions(direction);

src/components/Pane.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties } from 'react';
 import { forwardRef } from 'react';
 import type { PaneProps } from '../types';
+import { cn } from '../utils/classNames';
 
 const DEFAULT_CLASSNAME = 'split-pane-pane';
 
@@ -54,9 +55,7 @@ export const Pane = forwardRef<HTMLDivElement, PaneProps>(
       ...style,
     };
 
-    const combinedClassName = [DEFAULT_CLASSNAME, className]
-      .filter(Boolean)
-      .join(' ');
+    const combinedClassName = cn(DEFAULT_CLASSNAME, className);
 
     return (
       <div

src/components/SplitPane.tsx

@@ -13,6 +13,7 @@ import { Divider } from './Divider';
 import { useResizer } from '../hooks/useResizer';
 import { useKeyboardResize } from '../hooks/useKeyboardResize';
 import { convertToPixels, distributeSizes } from '../utils/calculations';
+import { cn } from '../utils/classNames';
 
 const DEFAULT_CLASSNAME = 'split-pane';
 const MIN_PANES = 2;
@@ -262,9 +263,7 @@ export function SplitPane(props: SplitPaneProps) {
     ...style,
   };
 
-  const containerClassName = [DEFAULT_CLASSNAME, direction, className]
-    .filter(Boolean)
-    .join(' ');
+  const containerClassName = cn(DEFAULT_CLASSNAME, direction, className);
 
   // Render panes and dividers
   const renderChildren = () => {

src/hooks/useResizer.ts

@@ -83,14 +83,17 @@ export function useResizer(options: UseResizerOptions): UseResizerResult {
   const onResizeEndRef = useRef(onResizeEnd);
   onResizeEndRef.current = onResizeEnd;
 
-  // Update current sizes when prop sizes change (only when not dragging)
-  if (
-    !isDragging &&
-    sizes !== currentSizes &&
-    JSON.stringify(sizes) !== JSON.stringify(currentSizes)
-  ) {
-    setCurrentSizes(sizes);
-  }
+  // Sync sizes from props when not dragging (React 19 compatible)
+  const sizesRef = useRef(sizes);
+  useEffect(() => {
+    if (
+      !isDragging &&
+      JSON.stringify(sizes) !== JSON.stringify(sizesRef.current)
+    ) {
+      sizesRef.current = sizes;
+      setCurrentSizes(sizes);
+    }
+  }, [sizes, isDragging]);
 
   // Track mounted state for RAF cleanup
   useEffect(() => {

src/index.ts

@@ -9,7 +9,6 @@ export type {
   Direction,
   Size,
   ResizeEvent,
-  PaneState,
 } from './types';
 
 // Re-export hooks for advanced usage