### Start Storybook

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Start the Storybook development server.

```bash
yarn storybook
```

--------------------------------

### Start docs dev server

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Start the Next.js documentation development server on port 9281.

```bash
yarn dev
```

--------------------------------

### Nested Split Pane Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

Illustrates how to nest `Split` components to achieve more intricate layouts. No specific setup is required beyond importing the `Split` component.

```tsx
<Split orientation="horizontal">
  <Split.Pane initialHeight={200}>
    <Paper {...paperProps}>
      <Title>Pane 1</Title>
    </Paper>
  </Split.Pane>

  <Split.Resizer />

  <Split.Pane initialHeight={300}>
    <Paper {...paperProps}>
      <Title>Pane 2</Title>
    </Paper>
  </Split.Pane>
</Split>
```

--------------------------------

### PaneConfig Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Example demonstrating how to define an array of PaneConfig objects for a Split.Dynamic component. Includes initial sizing and content.

```typescript
const panes: PaneConfig[] = [
  {
    id: 'sidebar',
    initialWidth: 240,
    minWidth: 150,
    content: <Paper>Sidebar</Paper>,
    resizerProps: { variant: 'filled' },
  },
  {
    id: 'main',
    grow: true,
    content: <Paper>Main</Paper>,
  },
];
```

--------------------------------

### Install Mantine Split Pane with yarn

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Use this command to install the package using yarn.

```sh
yarn add @gfazioli/mantine-split-pane
```

--------------------------------

### Install Mantine Split Pane with npm

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Use this command to install the package using npm.

```sh
npm install @gfazioli/mantine-split-pane
```

--------------------------------

### Example Usage of ResponsiveValue

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Demonstrates how to use the ResponsiveValue type for static values and breakpoint-specific values.

```typescript
// Static value
const width: ResponsiveValue<number> = 300;

// Breakpoint map
const responsiveWidth: ResponsiveValue<number> = {
  base: 200,
  sm: 250,
  md: 300,
  lg: 400,
};
```

--------------------------------

### Use Static and Responsive Split Resizer Orientation

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Demonstrates setting a static orientation and a responsive orientation for a split pane. The responsive example uses breakpoint keys like 'base' and 'md'.

```typescript
// Static
const staticOrient: SplitResizerOrientation = 'vertical';

// Responsive
const responsiveOrient: SplitResizerOrientation = {
  base: 'horizontal',
  md: 'vertical',
};
```

--------------------------------

### Component Hierarchy Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Illustrates the nested structure of components within the split pane, showing how Split, Split.Pane, and Split.Resizer are composed. It also demonstrates the alternative structure using Split.Dynamic.

```text
Split (container, context provider, ResizeObserver)
├── Split.Pane (content, sizing constraints, imperative handlers)
├── Split.Resizer (draggable divider, snap points, keyboard nav)
├── Split.Pane
├── Split.Resizer
└── ...

// Or with Split.Dynamic:
Split
└── Split.Dynamic({ panes })
    ├── Split.Pane
    ├── Split.Resizer
    ├── Split.Pane
    ├── Split.Resizer
    └── Split.Pane
```

--------------------------------

### SplitResizerVariant Example Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Demonstrates applying different variants and configurations to Split and Split.Resizer components.

```typescript
<Split variant="gradient" gradient={{ from: 'blue', to: 'cyan' }}>
  {/* children */}
</Split>

<Split.Resizer variant="dotted" withKnob />
```

--------------------------------

### SplitContextProvider Setup in Split.tsx

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Illustrates the setup of the SplitContextProvider in the Split component's render method. It passes resolved props and container size to the context provider.

```typescript
<SplitContextProvider
  value={{
    orientation,
    size: resolvedSize,
    // ... all other cascaded props
    containerSize,
  }}>
  <Box ref={mergedRef} {...getStyles('root')} {...others}>
    {clonedChildren}
  </Box>
</SplitContextProvider>
```

--------------------------------

### SPLIT_PANE_RESIZE_SIZES Example Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Example of how to access pane dimensions from the SPLIT_PANE_RESIZE_SIZES type in an onResizeEnd event handler.

```typescript
<Split.Resizer
  onResizeEnd={(sizes: SPLIT_PANE_RESIZE_SIZES) => {
    console.log('Before pane:', sizes.beforePane);
    console.log('After pane:', sizes.afterPane);
  }}
/>
```

--------------------------------

### Dynamic Layout with Event Handlers

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitDynamic.md

Demonstrates how to attach event handlers to panes and resizers within a dynamic split layout. Includes examples for `onResizeStart`, `onResizeEnd`, and resizer-specific `onSnap` events.

```typescript
const panes: PaneConfig[] = [
  {
    id: 'sidebar',
    initialWidth: 240,
    onResizeStart: () => console.log('Sidebar resize started'),
    onResizeEnd: (size) => console.log('Sidebar resize ended:', size),
    content: (
      <Paper withBorder w="100%" h="100%">
        Sidebar
      </Paper>
    ),
    resizerProps: {
      onSnap: (point) => console.log('Snapped to:', point),
    },
  },
  {
    id: 'main',
    grow: true,
    content: (
      <Paper withBorder w="100%" h="100%">
        Main
      </Paper>
    ),
  },
];

return (
  <Split>
    {Split.Dynamic({ panes })}
  </Split>
);
```

--------------------------------

### Observer Setup for Container Dimensions

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Sets up a resize observer to track container dimensions and initializes state for these dimensions.

```typescript
const [resizeObserverRef, containerRect] = useResizeObserver();
const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
```

--------------------------------

### Component Hierarchy Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/README.md

Illustrates the nested structure of the Split Pane component and its sub-components like Pane and Resizer.

```jsx
<Split>
  └─ SplitContextProvider
     ├─ <Split.Pane> (with sizing, constraints, resize events)
     ├─ <Split.Resizer> (draggable, 7 variants, snap points)
     └─ ...children
```

--------------------------------

### Basic Sized Pane

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitPane.md

Demonstrates a basic SplitPane with fixed pixel width for the sidebar and a growable main content pane. Imports are required for this example.

```typescript
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split>
      <Split.Pane initialWidth={300} minWidth={200} maxWidth={500}>
        <Paper withBorder w="100%" h="100%">
          <h1>Sidebar</h1>
          <p>300px (min: 200px, max: 500px)</p>
        </Paper>
      </Split.Pane>

      <Split.Resizer />

      <Split.Pane grow>
        <Paper withBorder w="100%" h="100%">
          <h1>Main Content</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### SnapReference Usage Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Illustrates how 'snapFrom' prop with 'SnapReference' affects snapping behavior.

```typescript
// When snapFrom='before', a snap point of 300 means:
// "snap when the left/top pane reaches 300px"

// When snapFrom='after', a snap point of 300 means:
// "snap when the right/bottom pane reaches 300px"
```

--------------------------------

### Use Snap Point Values

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Example of an array of snap point values for a split pane resizer. Includes both pixel and percentage-based snap points.

```typescript
const snapPoints: SnapPointValue[] = [200, 400, '50%', '75%'];
```

--------------------------------

### Responsive Snap Points

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/configuration.md

Configures snap points that adapt based on screen breakpoints, using a base configuration and medium breakpoint examples.

```typescript
// Responsive snap points
<Split snapPoints={{ base: [100, '50%'], md: [200, '50%', 400] }}>
  {/* */}
</Split>
```

--------------------------------

### Import Split Resizer

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitResizer.md

Import the Split component and destructure the Resizer component for use in your application. This is the primary setup for using the resizer.

```typescript
import { Split } from '@gfazioli/mantine-split-pane';

const Resizer = Split.Resizer;
```

--------------------------------

### Import Package Styles

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Import the component's styles at the root of your application after installation.

```tsx
import '@gfazioli/mantine-split-pane/styles.css';
```

--------------------------------

### Calculate Snapped Pane Sizes Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SnapHelpers.md

Demonstrates how to use calculateSnappedPaneSizes with various parameters including initial sizes, delta, constraints, and snap points. This is useful for implementing resizable UI components where panes should adhere to specific sizes or snap to predefined positions.

```typescript
const result = calculateSnappedPaneSizes({
  beforeSize: 300,
  afterSize: 300,
  delta: 50,
  minBeforeSize: 150,
  maxBeforeSize: 600,
  minAfterSize: 150,
  maxAfterSize: 600,
  snapPoints: [250, 350, '50%'],
  snapTolerance: 20,
  snapFrom: 'before',
});

// result:
// {
//   beforeSize: 350,
//   afterSize: 250,
//   snappedPoint: 300
// }
```

--------------------------------

### Example Usage of SPLIT_PANE_SIZE

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Shows how the SPLIT_PANE_SIZE type is used in event handlers like onResizeEnd to access the pane's dimensions.

```typescript
<Split.Pane
  onResizeEnd={(size: SPLIT_PANE_SIZE) => {
    console.log(`Pane size: ${size.width}px × ${size.height}px`);
  }}
>
  {/* content */}
</Split.Pane>
```

--------------------------------

### Setting Context Values

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Example of providing resolved scalar values (orientation, size, snapPoints) to the `SplitContextProvider`.

```typescript
<SplitContextProvider
  value={{
    orientation: 'vertical',
    size: 'sm',
    snapPoints: [200, 400],
  }}
>
```

--------------------------------

### Split Pane with Auto Resizers

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Use the `autoResizers` prop to automatically insert resizers between panes. This example shows a split pane with three panes.

```tsx
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split autoResizers>
      <Split.Pane>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 1</h1>
        </Paper>
      </Split.Pane>

      <Split.Pane>
        <Paper withBorder>
          <h1>Pane 2</h1>
        </Paper>
      </Split.Pane>

      <Split.Pane>
        <Paper withBorder>
          <h1>Pane 3</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Split Pane with Snap Points

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Configure `snapPoints` and `snapTolerance` to enable snapping behavior for resizers. This example defines snap points at 200, 400, and 600 pixels with a tolerance of 20 pixels.

```tsx
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split autoResizers snapPoints={[200, 400, 600]} snapTolerance={20}>
      <Split.Pane initialWidth={240}>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 1</h1>
        </Paper>
      </Split.Pane>

      <Split.Pane initialWidth={320}>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 2</h1>
        </Paper>
      </Split.Pane>

      <Split.Pane grow>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 3</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Dynamic Split Pane Panes

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Utilize `Split.Dynamic` to create panes from a configuration array. This example defines two panes: a sidebar with a fixed initial width and minimum width, and a main content area that grows.

```tsx
import { Split, PaneConfig } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  const panes: PaneConfig[] = [
    {
      id: 'sidebar',
      initialWidth: 200,
      minWidth: 150,
      content: (
        <Paper withBorder w="100%" h="100%">
          <h1>Sidebar</h1>
        </Paper>
      ),
    },
    {
      id: 'main',
      grow: true,
      content: (
        <Paper withBorder w="100%" h="100%">
          <h1>Main Content</h1>
        </Paper>
      ),
    },
  ];

  return (
    <Split>
      {Split.Dynamic({ panes })}
    </Split>
  );
}
```

--------------------------------

### Format files

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Format all project files using oxfmt.

```bash
yarn format:write
```

--------------------------------

### Deploy docs to GitHub Pages

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Build and deploy the Next.js documentation site to GitHub Pages.

```bash
yarn docs:deploy
```

--------------------------------

### Build Next.js docs site

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Build the Next.js documentation site for production deployment.

```bash
yarn docs:build
```

--------------------------------

### Responsive Pane Configuration

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitDynamic.md

Shows how to create a responsive split pane layout where pane dimensions and orientation can adapt to different screen sizes. Uses breakpoint-specific configurations for width, minWidth, maxWidth, and orientation.

```typescript
const panes: PaneConfig[] = [
  {
    id: 'sidebar',
    initialWidth: { base: 200, md: 240, lg: 300 },
    minWidth: { base: 150, md: 180 },
    maxWidth: { base: 250, md: 400 },
    content: (
      <Paper withBorder w="100%" h="100%">
        Sidebar
      </Paper>
    ),
  },
  {
    id: 'main',
    grow: true,
    content: (
      <Paper withBorder w="100%" h="100%">
        Main
      </Paper>
    ),
  },
];

return (
  <Split orientation={{ base: 'horizontal', md: 'vertical' }}>
    {Split.Dynamic({ panes })}
  </Split>
);
```

--------------------------------

### Run full test suite

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Execute the complete test suite, including syncpack, oxfmt, typecheck, lint, and jest.

```bash
yarn test
```

--------------------------------

### Responsive Orientation Configuration

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Shows how the 'orientation' prop can accept a string ('horizontal' or 'vertical') or a Mantine breakpoint object for responsive orientation changes.

```text
orientation accepts a string or Mantine breakpoint object: { base: 'horizontal', sm: 'vertical' }
```

--------------------------------

### Generate component API docs

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Generate component API documentation and save it to docgen.json.

```bash
yarn docgen
```

--------------------------------

### Run linting

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Run code linting using oxlint and stylelint.

```bash
yarn lint
```

--------------------------------

### Accessing Context in Split.Pane

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Example of how to use the `useSplitContext` hook within a `Split.Pane` component to retrieve orientation and container size.

```typescript
const ctx = useSplitContext();
const orientation = ctx.orientation;
const containerSize = ctx.containerSize;
```

--------------------------------

### Multiple Panes Configuration

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

Demonstrates how to configure multiple panes in a split layout. You can set minWidth, maxWidth, and other props for each pane.

```tsx
import { Split } from "mantine-split-pane";

function App() {
  return (
    <Split>
      <Split.Pane initialWidth={200} minWidth={100} maxWidth={300}>
        Pane 1
      </Split.Pane>
      <Split.Resizer />
      <Split.Pane initialWidth={300} minWidth={100} maxWidth={500}>
        Pane 2
      </Split.Pane>
      <Split.Resizer />
      <Split.Pane grow>
        Pane 3
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Accessing Context in Split.Resizer

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Example of using `useSplitContext` in `Split.Resizer` to resolve size, falling back to context or default props if necessary.

```typescript
const ctx = useSplitContext();
const resolvedSize = useResponsiveValue(size) ?? (ctx.size || defaultProps.size);
```

--------------------------------

### Release patch version

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Bump the patch version and deploy documentation.

```bash
yarn release:patch
```

--------------------------------

### Use Split Resizer Orientation Value

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/types.md

Assign a static orientation value to a split pane resizer. This example sets the orientation to 'vertical'.

```typescript
const orientation: SplitResizerOrientationValue = 'vertical';
```

--------------------------------

### SplitResizer with Custom Content

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitResizer.md

Replaces the default resizer knob with custom content, such as an icon. This example uses 'IconGripVertical' from '@tabler/icons-react' as the custom knob.

```typescript
import { IconGripVertical } from '@tabler/icons-react';

<Split>
  <Split.Pane initialWidth={300}>
    <Paper withBorder w="100%" h="100%">Left</Paper>
  </Split.Pane>

  <Split.Resizer variant="dotted" withKnob>
    <IconGripVertical size={16} />
  </Split.Resizer>

  <Split.Pane grow>
    <Paper withBorder w="100%" h="100%">Right</Paper>
  </Split.Pane>
</Split>
```

--------------------------------

### Context Not Found Error Example

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Illustrates the error message that appears when Split.Pane or Split.Resizer components are used outside of a parent Split component.

```typescript
// Error: 'Split component was not found in tree'
```

--------------------------------

### Basic Dynamic Layout with Split.Dynamic

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitDynamic.md

Demonstrates a basic dynamic layout using Split.Dynamic with predefined panes. Each pane has an ID, initial width, minimum width, and content.

```typescript
import { Split, PaneConfig } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  const panes: PaneConfig[] = [
    {
      id: 'sidebar',
      initialWidth: 240,
      minWidth: 150,
      content: (
        <Paper withBorder w="100%" h="100%">
          <h2>Sidebar</h2>
        </Paper>
      ),
    },
    {
      id: 'editor',
      initialWidth: 600,
      minWidth: 300,
      content: (
        <Paper withBorder w="100%" h="100%">
          <h2>Editor</h2>
        </Paper>
      ),
    },
    {
      id: 'inspector',
      grow: true,
      minWidth: 250,
      content: (
        <Paper withBorder w="100%" h="100%">
          <h2>Inspector</h2>
        </Paper>
      ),
    },
  ];

  return (
    <Split autoResizers>
      {Split.Dynamic({ panes })}
    </Split>
  );
}
```

--------------------------------

### Basic Split.Dynamic Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

Demonstrates the basic usage of Split.Dynamic with a panes configuration array. This approach is cleaner than manual conditional rendering.

```tsx
<Split>{Split.Dynamic({ panes })}</Split>
```

--------------------------------

### Auto-Generated SplitResizer with Context Refs

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Example of an auto-generated SplitResizer component within a Split component when autoResizers is enabled. It demonstrates the injection of refs for context.

```typescript
import SplitResizer from "./SplitResizer";

// Inside Split with autoResizers
<SplitResizer
  key={`auto-resizer-${resizerIndex++}`}
  __beforeRef={beforeRef}
  __afterRef={afterRef}
/>
```

--------------------------------

### Split Resizer with Percentage Snap Points

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

Configure snap points using percentage strings for responsive pane resizing. The snap points are resolved against the combined size of adjacent panes.

```tsx
<Split autoResizers snapPoints={['25%', '50%', '75%']}>
  <Split.Pane initialWidth={300}>Primary content</Split.Pane>
  <Split.Pane>Secondary content</Split.Pane>
</Split>
```

--------------------------------

### Responsive Configuration for Split Pane

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Configure orientation, size, and snap points responsively across different breakpoints. Use breakpoint maps for pane initial width, minimum width, and maximum width.

```typescript
<Split
  orientation={{ base: 'horizontal', md: 'vertical' }}
  size={{ base: 'xs', md: 'sm', lg: 'md' }}
  snapPoints={{ base: [100, '50%'], md: [200, 300, '50%'] }}
>
  <Split.Pane
    initialWidth={{ base: 200, sm: 250, md: 300 }}
    minWidth={{ base: 150, md: 180 }}
  >
    Content
  </Split.Pane>
  <Split.Resizer />
  <Split.Pane grow>Content</Split.Pane>
</Split>
```

--------------------------------

### Internal Use of useSplitContext

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/Hooks.md

Example of how `useSplitContext` is used internally within a `SplitPane` component to access inherited orientation and container size for responsive sizing.

```typescript
// Inside SplitPane
const ctx = useSplitContext();
const orientation = ctx.orientation; // Inherited from parent Split
const containerWidth = ctx.containerSize?.width; // For percentage-based sizing
```

--------------------------------

### Incorrect Usage of Split Components

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/errors.md

Examples demonstrating incorrect usage where Split.Pane or Split.Resizer are rendered outside of a parent Split component, leading to context errors.

```typescript
// ❌ WRONG: Pane without Split
<Split.Pane>Content</Split.Pane>
```

```typescript
// ❌ WRONG: Resizer without Split
<Split.Resizer />
```

```typescript
// ❌ WRONG: Nested Split (child pane tries to use outer Split context)
<Split>
  <Split.Pane>
    <Split>  {/* New Split breaks context chain */}
      <Split.Pane>Inner</Split.Pane>
    </Split>
  </Split.Pane>
</Split>
```

--------------------------------

### With Resize Events

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitPane.md

Attaches event handlers to a SplitPane pane to capture resize start, ongoing resizing, and end events. A ref is used to access pane handlers.

```typescript
const paneRef = useRef<HTMLDivElement & SplitPaneHandlers>(null);

<Split>
  <Split.Pane
    ref={paneRef}
    initialWidth={300}
    onResizeStart={() => console.log('Resize started')}
    onResizing={(size) => console.log('Resizing:', size)}
    onResizeEnd={(size) => console.log('Resize ended:', size)}
  >
    <Paper withBorder w="100%" h="100%">Sidebar</Paper>
  </Split.Pane>

  <Split.Resizer />

  <Split.Pane grow>
    <Paper withBorder w="100%" h="100%">Content</Paper>
  </Split.Pane>
</Split>
```

--------------------------------

### Responsive Breakpoint Configuration

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/README.md

Demonstrates how to apply Mantine's responsive breakpoint maps to configuration props for dynamic layout adjustments.

```typescript
orientation={{ base: 'horizontal', md: 'vertical' }}
size={{ base: 'xs', md: 'sm' }}
snapPoints={{ base: [100], md: [200, 300] }}
```

--------------------------------

### SplitPaneHandlers Interface

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitPane.md

Defines the available handler functions for interacting with and controlling the Split Pane component. These handlers allow for resetting sizes, getting constraints, and managing resize events.

```typescript
interface SplitPaneHandlers {
  resetInitialSize?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  getMinWidth?: () => number | undefined;
  getMinHeight?: () => number | undefined;
  getMaxWidth?: () => number | undefined;
  getMaxHeight?: () => number | undefined;
  getInitialWidth?: () => number | string | undefined;
  getInitialHeight?: () => number | string | undefined;
  onResizeStart?: () => void;
  onResizing?: (size: SPLIT_PANE_SIZE) => void;
  onResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
  notifyResizing?: (size: SPLIT_PANE_SIZE) => void;
  notifyResizeEnd?: (size: SPLIT_PANE_SIZE) => void;
  splitPane?: HTMLDivElement;
}
```

--------------------------------

### Auto Resizers with Three Panes

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

The `autoResizers` prop works with three or more panes. This example shows two panes with fixed initial widths and a middle pane that fills the available space.

```javascript
import React from 'react';
import Split from '@Components/Split';

const demos = {
  autoResizersThree: (
    <Split autoResizers>
      <Split.Pane initialWidth="25%">Pane 1</Split.Pane>
      <Split.Pane>Pane 2</Split.Pane>
      <Split.Pane initialWidth="25%">Pane 3</Split.Pane>
    </Split>
  )
};

export default demos;
```

--------------------------------

### Correct Usage of Split Components

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/errors.md

Demonstrates the correct structure for using Split, Split.Pane, and Split.Resizer components, ensuring they are properly nested within a parent Split context.

```typescript
// ✅ CORRECT: All components inside Split
<Split>
  <Split.Pane>Content</Split.Pane>
  <Split.Resizer />
  <Split.Pane>More</Split.Pane>
</Split>
```

--------------------------------

### Responsive Sizing Configuration

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/README.md

Defines pane sizes that adapt to different screen breakpoints using Mantine's responsive syntax.

```javascript
{ base: 200, md: 300 }
```

--------------------------------

### Use rem and em Units for Pane Sizes (v3 Feature)

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/migrations.mdx

Starting from v3, all size props support rem and em units in addition to px and %. This allows for more flexible and scalable layouts.

```jsx
<Split.Pane initialWidth="20rem" minWidth="10em" />
```

--------------------------------

### Basic Split Pane Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/README.md

Demonstrates the basic structure of a Split Pane with two panes and an explicit resizer.

```tsx
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split>
      <Split.Pane>
        <Paper withBorder w="100%" mih="100%">
          <h1>Pane 1</h1>
        </Paper>
      </Split.Pane>

      <Split.Resizer />

      <Split.Pane>
        <Paper withBorder>
          <h1>Pane 2</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Split Component Signature and Props

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/Split.md

Details on how to import and use the Split component, including its props and their types, defaults, and descriptions. It also outlines props that are inherited by child resizers.

```APIDOC
## Split Component

### Description
The root container component that manages the split pane layout. Provides context-based prop inheritance to all child resizers and automatically tracks container dimensions.

### Import
```typescript
import { Split } from '@gfazioli/mantine-split-pane';
```

### Signature
```typescript
Split(props: SplitProps, ref: React.Ref<HTMLDivElement>): React.ReactElement
```

### Props
#### Root Props
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `inline` | boolean | No | `false` | Render the split container as `inline-flex` instead of `flex` |
| `autoResizers` | boolean | No | `false` | Automatically insert `Split.Resizer` components between consecutive `Split.Pane` children |
| `orientation` | `'vertical' | 'horizontal' | ResponsiveValue<'vertical' | 'horizontal'>` | No | `'vertical'` | Split direction. Accepts static string or breakpoint map for responsive orientation |
| `children` | React.ReactNode | Yes | — | Typically `Split.Pane` and `Split.Resizer` elements |
| `className` | string | No | — | CSS class name |
| `style` | React.CSSProperties | No | — | Inline styles |
| `classNames` | Record<'root', string> | No | — | Mantine `classNames` object |
| `styles` | Record<'root', React.CSSProperties> | No | — | Mantine `styles` object |
| `unstyled` | boolean | No | `false` | Remove default styles |

#### Resizer Props (Inherited by All Child Resizers)
All props from `SplitResizerContextProps` can be set on `Split` and cascade to child resizers:

| Prop | Type | Default | Description |
|---|---|---|---|
| `size` | `MantineSize | number | ResponsiveValue<...>` | `'sm'` | Resizer width/height |
| `opacity` | `number | string` | `0.8` | Resizer opacity |
| `radius` | `MantineRadius` | `'xs'` | Border radius |
| `color` | `MantineColor` | theme-dependent | Resizer base color |
| `hoverColor` | `MantineColor` | theme-dependent | Resizer hover color |
| `variant` | `'default' | 'filled' | 'outline' | 'transparent' | 'gradient' | 'dotted' | 'dashed'` | — | Resizer visual style |
| `withKnob` | boolean | `false` | Show knob on resizer |
| `knobAlwaysOn` | boolean | `true` | Always show knob instead of only on hover |
| `knobSize` | `MantineSize | number | ResponsiveValue<...>` | `'sm'` | Knob dimensions |
| `knobOpacity` | `number | string` | `0.5` | Knob opacity |
| `knobRadius` | `MantineRadius` | `'sm'` | Knob border radius |
| `knobColor` | `MantineColor` | `'white'` | Knob base color |
| `knobHoverColor` | `MantineColor` | `'white'` | Knob hover color |
| `spacing` | `MantineSpacing | ResponsiveValue<...>` | `'xs'` | Space between resizer and adjacent panes |
| `step` | number | `8` | Keyboard resize step in pixels |
| `shiftStep` | number | `64` | Keyboard resize step when Shift is held |
| `snapPoints` | `ResponsiveValue<(number | string)[]>` | `[]` | Snap-to points (pixels or percentages) |
| `snapTolerance` | number | `10` | Tolerance in pixels before snap is applied |
| `snapFrom` | `'before' | 'after'` | `'before'` | Reference pane for snap point interpretation |
| `cursorVertical` | `React.CSSProperties['cursor']` | `'col-resize'` | Cursor for vertical orientation |
| `cursorHorizontal` | `React.CSSProperties['cursor']` | `'row-resize'` | Cursor for horizontal orientation |
| `gradient` | `MantineGradient` | theme default | Gradient config for `variant="gradient"` |
| `hoverGradient` | `MantineGradient` | theme default | Hover gradient for `variant="gradient"` |
```

--------------------------------

### Responsive Sizes

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitPane.md

Implements responsive sizing for SplitPane panes using Mantine's breakpoint system. The sidebar adjusts its width based on screen size.

```typescript
<Split>
  <Split.Pane
    initialWidth={{ base: 200, sm: 250, md: 300 }}
    minWidth={{ base: 150, md: 200 }}
  >
    <Paper withBorder w="100%" h="100%">Sidebar</Paper>
  </Split.Pane>

  <Split.Resizer />

  <Split.Pane grow>
    <Paper withBorder w="100%" h="100%">Content</Paper>
  </Split.Pane>
</Split>
```

--------------------------------

### Multi-Panel Layout with Conditional Rendering and Vertical Orientation

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitDynamic.md

Configures a multi-panel layout with a vertical orientation, using conditional rendering to control the visibility of panes based on application state. This example shows how to manage complex layouts with dynamic visibility.

```typescript
const [panels, setPanels] = useState({
  explorer: true,
  editor: true,
  terminal: false,
});

const panes: PaneConfig[] = [
  {
    id: 'explorer',
    initialWidth: 220,
    minWidth: 180,
    content: <Paper withBorder w="100%" h="100%">Explorer</Paper>,
  },
  {
    id: 'editor',
    grow: true,
    minWidth: 300,
    content: <Paper withBorder w="100%" h="100%">Editor</Paper>,
  },
  {
    id: 'terminal',
    initialHeight: 200,
    minHeight: 100,
    content: <Paper withBorder w="100%" h="100%">Terminal</Paper>,
  },
];

return (
  <Split orientation="vertical">
    {Split.Dynamic({
      panes,
      filter: (pane) => panels[pane.id as keyof typeof panels],
    })}
  </Split>
);
```

--------------------------------

### Simple Pixel Snap Points

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/configuration.md

Configures basic snap points using pixel values for resizers.

```typescript
// Simple pixel snap points
<Split autoResizers snapPoints={[200, 300, 500]}>
  {/* */}
</Split>
```

--------------------------------

### Build npm package

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Build the npm package using Rollup.

```bash
yarn build
```

--------------------------------

### Percentage-based Snap Points

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/README.md

Configures snap points using percentage values for flexible pane resizing relative to the container.

```javascript
snapPoints={['25%', '50%', '75%']}
```

--------------------------------

### Basic SplitResizer Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitResizer.md

Demonstrates the default configuration of SplitResizer within a Split component. Requires importing Split and Paper components.

```typescript
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split>
      <Split.Pane initialWidth={300}>
        <Paper withBorder w="100%" h="100%">Left</Paper>
      </Split.Pane>

      <Split.Resizer />

      <Split.Pane grow>
        <Paper withBorder w="100%" h="100%">Right</Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Clean and build package

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Clean existing build artifacts and then build the npm package. This is a prerequisite for running tests after API changes.

```bash
yarn clean && yarn build
```

--------------------------------

### SplitResizer with Snap Points and Event Handlers

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitResizer.md

Implements snap points for precise resizing and includes event handlers for 'onSnap' and 'onResizeEnd'. The 'snapPoints' prop accepts pixel values, percentages, or predefined keywords.

```typescript
const [snappedPoint, setSnappedPoint] = useState<number | null>(null);

<Split>
  <Split.Pane initialWidth={300}>
    <Paper withBorder w="100%" h="100%">Left</Paper>
  </Split.Pane>

  <Split.Resizer
    snapPoints={[250, 350, '50%']}
    snapTolerance={15}
    onSnap={(point) => setSnappedPoint(point)}
    onResizeEnd={(sizes) => console.log('Resize ended:', sizes)}
  />

  <Split.Pane grow>
    <Paper withBorder w="100%" h="100%">
      Right {snappedPoint && `(snapped to ${snappedPoint}px)`}
    </Paper>
  </Split.Pane>
</Split>
```

--------------------------------

### Mantine Factory Pattern Usage

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/CLAUDE.md

Demonstrates the use of Mantine's factory pattern for component creation, including type definitions for props, ref, stylesNames, and vars, with CSS variables managed by varsResolver.

```text
All components use factory<T>() with XFactory types defining props, ref, stylesNames, vars. CSS variables use varsResolver.
```

--------------------------------

### Reference Documentation

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Links to detailed reference documentation for types, configuration, errors, hooks, and utilities.

```APIDOC
## Reference Documentation

- **[Types](./types.md)** — Complete type definitions, interfaces, and type aliases
- **[Configuration](./configuration.md)** — All default props, CSS variables, and configuration options
- **[Errors](./errors.md)** — Error conditions, validation rules, and error handling
- **[Hooks](./api-reference/Hooks.md)** — Internal responsive value and orientation resolution hooks
- **[Snap Helpers](./api-reference/SnapHelpers.md)** — Utility functions for snap point validation and pane size calculation
- **[Context API](./api-reference/ContextAPI.md)** — Internal context system for prop inheritance and communication
```

--------------------------------

### Import SplitDynamic and PaneConfig

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/SplitDynamic.md

Import the necessary types and the SplitDynamic helper function from the Mantine Split Pane library.

```typescript
import { Split, type PaneConfig } from '@gfazioli/mantine-split-pane';

const SplitDynamic = Split.Dynamic;
```

--------------------------------

### Auto Resizers with Multiple Panes

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/docs.mdx

Demonstrates the utility of `autoResizers` with a larger number of panes, where five panes are defined without explicit resizer components.

```javascript
import React from 'react';
import Split from '@Components/Split';

const demos = {
  autoResizersMultiple: (
    <Split autoResizers>
      <Split.Pane>Pane 1</Split.Pane>
      <Split.Pane>Pane 2</Split.Pane>
      <Split.Pane>Pane 3</Split.Pane>
      <Split.Pane>Pane 4</Split.Pane>
      <Split.Pane>Pane 5</Split.Pane>
    </Split>
  )
};

export default demos;
```

--------------------------------

### Basic Vertical Split

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/Split.md

Demonstrates a basic vertical split layout with two panes. Requires importing Split and Paper components.

```typescript
import { Split } from '@gfazioli/mantine-split-pane';
import { Paper } from '@mantine/core';

function Demo() {
  return (
    <Split>
      <Split.Pane initialWidth={300}>
        <Paper withBorder w="100%" h="100%">
          <h1>Left Panel</h1>
        </Paper>
      </Split.Pane>

      <Split.Resizer />

      <Split.Pane grow>
        <Paper withBorder w="100%" h="100%">
          <h1>Main Content</h1>
        </Paper>
      </Split.Pane>
    </Split>
  );
}
```

--------------------------------

### Responsive Breakpoints for Split Pane

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/configuration.md

Configure responsive behavior for Split and Split.Pane components using Mantine's breakpoint system. Apply different orientations and sizes based on screen width.

```typescript
import { Split } from '@gfazioli/mantine-split-pane';

<Split
  orientation={{ base: 'horizontal', xs: 'vertical', sm: 'vertical', md: 'vertical' }}
  size={{ base: 6, md: 8 }}
>
  <Split.Pane initialWidth={{ base: 200, sm: 250, md: 300 }}>
    Content
  </Split.Pane>
</Split>
```

--------------------------------

### Responsive Mobile/Desktop Layout

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Configure a split pane layout that adapts its orientation between horizontal on mobile and vertical on larger screens. The navigation pane has specific height configurations for different breakpoints.

```typescript
<Split orientation={{ base: 'horizontal', md: 'vertical' }}>
  <Split.Pane initialHeight={{ base: 300, md: 400 }}>
    <Navigation />
  </Split.Pane>
  
  <Split.Resizer />
  
  <Split.Pane grow>
    <MainContent />
  </Split.Pane>
</Split>
```

--------------------------------

### Dynamic Pane Generation with Split.Dynamic

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Generate panes and resizers dynamically from a configuration array. Per-pane resizer customization is supported via `resizerProps`.

```typescript
const panes: PaneConfig[] = [
  { id: 'sidebar', initialWidth: 240, content: <Sidebar /> },
  { id: 'editor', grow: true, content: <Editor /> },
  { id: 'inspector', initialWidth: 300, content: <Inspector /> },
];

<Split autoResizers>
  {Split.Dynamic({ panes })}
</Split>
```

```typescript
const panes: PaneConfig[] = [
  {
    id: 'sidebar',
    content: <Sidebar />,
    resizerProps: { variant: 'outline', snapPoints: [150, 200] },
  },
  // ...
];
```

--------------------------------

### Percentage Snap Points with Tolerance

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/configuration.md

Configures snap points using percentages relative to the combined pane size, with a specified tolerance.

```typescript
// Percentage snap points (relative to combined pane size)
<Split snapPoints={['25%', '50%', '75%']} snapTolerance={15}>
  {/* */}
</Split>
```

--------------------------------

### v2 JSX Structure with Auto Resizers

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/docs/migrations.mdx

Shows how to use the `autoResizers` prop in v2 to automatically insert resizers, simplifying the JSX structure to resemble v1.

```tsx
<Split autoResizers>
  <Split.Pane>
    <h1>Pane 1</h1>
  </Split.Pane>

  <Split.Pane>
    <h1>Pane 2</h1>
  </Split.Pane>
</Split>
```

--------------------------------

### Three-Pane IDE Layout

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/INDEX.md

Create a three-pane layout typical for IDEs, featuring a file explorer, code editor, and inspector panel. Snap points are defined for specific resizing behaviors.

```typescript
<Split autoResizers snapPoints={[200, 300]}>
  <Split.Pane initialWidth={240} minWidth={180}>
    <FileExplorer />
  </Split.Pane>
  
  <Split.Pane initialWidth={600} minWidth={300}>
    <CodeEditor />
  </Split.Pane>
  
  <Split.Pane initialWidth={300} minWidth={200}>
    <InspectorPanel />
  </Split.Pane>
</Split>
```

--------------------------------

### Split Context Creation with createSafeContext

Source: https://github.com/gfazioli/mantine-split-pane/blob/master/_autodocs/api-reference/ContextAPI.md

Demonstrates how the Split component creates its context provider and consumer hook using Mantine's createSafeContext. This ensures the context is available within the component tree.

```typescript
const [SplitContextProvider, useSplitContext] = createSafeContext<SplitContext>(
  'Split component was not found in tree'
);
```