### Project Setup and Development Commands

Source: https://github.com/nathancahill/split/blob/master/CONTRIBUTING.md

Commands to install dependencies, link packages, build the project, and run linters. Uses Yarn and Lerna for package management.

```bash
$ yarn install
$ yarn run lerna link
$ yarn run build
$ yarn run lint
```

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

### Installation

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Instructions for installing the grid-template-utils library using Yarn and npm.

```bash
$ yarn add grid-template-utils
```

```bash
$ npm install --save grid-template-utils
```

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

### Installation

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Provides instructions for installing React-Split using Yarn and npm package managers.

```bash
yarn add react-split
```

```bash
npm install --save react-split
```

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

### Installation with Yarn

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

Installs the react-split-grid package using Yarn.

```bash
$ yarn add react-split-grid
```

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

### Installation with npm

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Installs the Split.js library using the npm package manager.

```bash
$ npm install --save split.js
```

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

### Installation with Yarn and npm

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Demonstrates how to install the split-grid library using both Yarn and npm package managers.

```bash
$ yarn add split-grid
$ npm install --save split-grid
```

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

### Installation with Yarn

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Installs the Split.js library using the Yarn package manager.

```bash
$ yarn add split.js
```

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

### Basic Split Grid Initialization

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

An example demonstrating the basic initialization of Split Grid with configuration for column and row gutters.

```javascript
import Split from 'split-grid'

Split({
  columnGutters: [{
    track: 1,
    element: document.querySelector('.column-1'),
  }, {
    track: 3,
    element: document.querySelector('.column-3'),
  }],
  rowGutters: [{
    track: 1,
    element: document.querySelector('.row-1'),
  }]
})
```

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

### Installation with npm

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

Installs the react-split-grid package using npm.

```bash
$ npm install --save react-split-grid
```

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

### Advanced Example with Props

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Demonstrates advanced usage of the `<Split />` component with various configuration props like sizes, minSize, gutterSize, and direction.

```javascript
import Split from 'react-split'

<Split
    sizes={[25, 75]}
    minSize={100}
    expandToMin={false}
    gutterSize={10}
    gutterAlign="center"
    snapOffset={30}
    dragInterval={1}
    direction="horizontal"
    cursor="col-resize"
>
    <ComponentA />
    <ComponentB />
</Split>

```

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

### Usage with Module Bundlers

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Examples of how to import and use the library functions with ES6 modules and CommonJS.

```javascript
// using ES6 modules
import { parse, combine, getSizeAtTrack } from 'grid-template-utils'
```

```javascript
// using CommonJS modules
var utils = require('grid-template-utils')
```

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

### Split.js - Basic Usage

Source: https://github.com/nathancahill/split/blob/master/README.md

Demonstrates the basic initialization of Split.js to create a two-pane resizable view. This example assumes you have two elements within a container.

```javascript
import Split from 'split-js';

const splitInstance = Split(['#div1', '#div2'], {
  sizes: [50, 50],
  minSize: [100, 100],
  gutterSize: 10,
  direction: 'horizontal',
  cursor: 'col-resize'
});

// To destroy the instance:
splitInstance.destroy();
```

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

### Including Split Grid via CDN

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Provides an example of how to include the Split Grid library in an HTML file using a Content Delivery Network (CDN).

```html
<script src="https://unpkg.com/split-grid/dist/split-grid.js"></script>
```

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

### Basic Split Grid Usage with Render Prop

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

A basic example of using the `<Split />` component with the render prop pattern to create a resizable grid.

```javascript
import Split from 'react-split-grid'

<Split
    minSize={100}
    cursor="col-resize"
    render={({
        getGridProps,
        getGutterProps,
    }) => (
        <div {...getGridProps()}>
            <div />
            <div {...getGutterProps('column', 1)} />
            <div />
        </div>
    )}
/>
```

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

### Split Grid - Basic Usage

Source: https://github.com/nathancahill/split/blob/master/README.md

Shows how to initialize Split Grid for creating resizable grid layouts. This example targets a container element and defines the grid template areas.

```javascript
import SplitGrid from 'split-grid';

const gridInstance = SplitGrid({
  columnGutters: ['#gutter-col-1', '#gutter-col-2'],
  rowGutters: ['#gutter-row-1'],
  columnDefault: '1fr',
  rowDefault: '1fr'
});

// To destroy the instance:
gridInstance.destroy();
```

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

### React Split - Basic Usage

Source: https://github.com/nathancahill/split/blob/master/README.md

A simple example of using the React Split component, a thin wrapper around Split.js, to create resizable panes within a React application.

```javascript
import React from 'react';
import Split from 'react-split';

function App() {
  return (
    <Split className='split-container' sizes={[50, 50]} minSize={100} gutterSize={10} direction='horizontal'>
      <div className='pane-1'>Pane 1</div>
      <div className='pane-2'>Pane 2</div>
    </Split>
  );
}
```

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

### Using gridTemplateColumns with onDrag Handler

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

This example demonstrates how to use the `gridTemplateColumns` prop with the Split component. It requires an `onDrag` handler to update the component's state when dragging occurs, ensuring the layout adjusts dynamically. The `render` prop is used to get grid and gutter props for rendering the split layout.

```jsx
class Wrapper extends React.Component {
    constructor() {
        super()

        this.state = {
            gridTemplateColumns: '1fr 10px 1fr',
        }

        this.handleDrag = this.handleDrag.bind(this)
    }

    handleDrag(direction, track, style) {
        this.setState({
            gridTemplateColumns: style,
        })
    }

    render() {
        const { gridTemplateColumns } = this.state

        return (
            <Split
                gridTemplateColumns={gridTemplateColumns}
                onDrag={this.handleDrag}
                render={({ getGridProps, getGutterProps }) => (
                    <div {...getGridProps()}>
                        <div />
                        <div {...getGutterProps('column', 1)} />
                        <div />
                    </div>
                )}
            />
        )
    }
}
```

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

### Split Grid Usage with Component Prop

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

An example of using the `<Split />` component with the `component` prop to render a custom grid structure.

```javascript
import Split from 'react-split-grid'

<Split
    minSize={100}
    cursor="col-resize"
    component={Grid}
/>

const Grid = ({
    getGridProps,
    getGutterProps,
}) => (
    <div {...getGridProps()}>
        <div />
        <div {...getGutterProps('column', 1)} />
        <div />
    </div>
)
```

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

### API Reference: getSizeAtTrack()

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Calculates the pixel size from the start of a grid layout up to a specified track.

```APIDOC
getSizeAtTrack(index: number, tracks: Track[], gap?: number = 0, end?: boolean = false) => number

Returns the pixel size measured from the start of the grid layout up to the track specified by `index`. Each `Track.numeric` value should be a `px` value (for example, as returned by `parse(getComputedStyle())`). Optional argument `gap` is the pixel size of `grid-gap`. Optional argument `end` is a flag that determines whether to measure up to the start or end of the track. Defaults to `false` (measure to the start of the track).
```

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

### Split Grid Usage with Children Function

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

An example of using the `<Split />` component with the `children` prop as a function to render a resizable grid.

```javascript
import Split from 'react-split-grid'

<Split
    minSize={100}
    cursor="col-resize"
>
    {({ 
        getGridProps,
        getGutterProps,
    }) => (
        <div {...getGridProps()}>
            <div />
            <div {...getGutterProps('column', 1)} />
            <div />
        </div>
    )}
</Split>
```

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

### Getting Size at Track

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Illustrates the `getSizeAtTrack` function for calculating pixel sizes within a grid layout, including optional gap and end measurement.

```javascript
import { getSizeAtTrack, parse } from 'grid-template-utils'

getSizeAtTrack(1, parse('10px 10px 10px'))
// Returns: 20

getSizeAtTrack(1, parse('10px 10px 10px'), 20)
// Returns: 40

getSizeAtTrack(1, parse('10px 10px 10px'), 20, true)
// Returns: 40
```

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

### Getting Sizes: Split.js vs. Split Grid

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Compares how to retrieve element sizes: Split.js uses a `getSizes()` method, while Split Grid relies on directly reading CSS `grid-template` values.

```javascript
> split.getSizes()
[50, 50]
```

```javascript
> document.querySelector('.grid').style['grid-template-columns']
"1fr 10px 1fr"
```

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

### Gutter Alignment

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Determines how the gutter is aligned between the two elements. Options include 'start' (shrinks first element), 'end' (shrinks second element), and 'center' (shrinks both equally). Added in v1.5.3.

```javascript
Split(["#one", "#two"], {
    gutterAlign: 'end'
})
```

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

### Initializing Split.js

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Basic initialization of Split.js with a selector and optional options.

```javascript
var split = Split(<HTMLElement|selector[]> elements, <options> options?)
```

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

### UMD Build Usage

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

How to include the library using a script tag for the UMD build, making it available on the window object.

```html
<script src="https://unpkg.com/grid-template-utils/dist/grid-template-utils.js"></script>
```

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

### Basic Split Initialization

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Initializes a split with two elements, setting initial sizes and a minimum width for elements.

```javascript
Split(['#one', '#two'], {
    sizes: [25, 75],
    minSize: 200,
})
```

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

### Split.js API Documentation

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Provides documentation for the Split.js instance methods, including `setSizes`, `getSizes`, and `collapse`.

```APIDOC
Split.js Instance Methods:

`.setSizes(sizes: number[])`
  - Sets the sizes of the split elements. Behaves like the `sizes` configuration option.
  - Example: `instance.setSizes([25, 75])`
  - Added in v1.1.0.

`.getSizes(): number[]`
  - Returns an array of the current percentage sizes of the split elements.
  - Not supported in IE8.
  - Example: `instance.getSizes() // returns [25, 75]`
  - Added in v1.1.2.

`.collapse(index: number)`
  - Collapses the element at the specified index to its minimum size.
  - For elements before the last, collapse is towards the front (left/top). For the last element, collapse is towards the back.
  - Not supported in IE8.
  - Example: `instance.collapse(0)`
  - Added in v1.1.0.
```

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

### Including Split.js via unpkg CDN

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Shows how to include the Split.js UMD build from the unpkg Content Delivery Network.

```html
<script src="https://unpkg.com/split.js/dist/split.min.js"></script>
```

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

### Split.js Gutters vs. Split Grid Gutters

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Demonstrates how Split.js creates gutters implicitly, while Split Grid requires gutters to be defined as HTML elements and passed in the options.

```javascript
Split(options) // gutters created implicitly
```

```html
<div class="grid">
    <div>Column One</div>
    <div class="gutter-column-1"></div>
    <div>Column Two</div>
    <div class="gutter-column-3"></div>
    <div>Column Three</div>
    <div>Row One</div>
    <div class="gutter-row-1"></div>
    <div>Row Two</div>
</div>
```

```javascript
Split({
    columnGutters: [{
        track: 1,
        element: document.querySelector('.gutter-column-1'),
    }, {
        track: 3,
        element: document.querySelector('.gutter-column-3'),
    }],
    rowGutters: [{
        track: 1,
        element: document.querySelector('.gutter-row-1'),
    }]
})
```

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

### Split Grid Configuration Options

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Defines the configurable properties for initializing a Split Grid instance. These options control aspects like snapping, drag behavior, cursor styles, and callback functions for drag events and style updates.

```APIDOC
columnSnapOffset: number
  Snap to minimum size at this offset in pixels. Set to `0` to disable snap. Default: `options.snapOffset`

rowSnapOffset: number
  Snap to minimum size at this offset in pixels. Set to `0` to disable snap. Default: `options.snapOffset`

dragInterval: number
  Drag this number of pixels at a time. Defaults to `1` for smooth dragging, but can be set to a pixel value to give more control over the resulting sizes. Default: `1`

columnDragInterval: number
  Drag this number of pixels at a time. Defaults to `1` for smooth dragging, but can be set to a pixel value to give more control over the resulting sizes. Default: `options.dragInterval`

rowDragInterval: number
  Drag this number of pixels at a time. Defaults to `1` for smooth dragging, but can be set to a pixel value to give more control over the resulting sizes. Default: `options.dragInterval`

cursor: string
  Cursor to show while dragging. Defaults to `'col-resize'` for column gutters and `'row-resize'` for row gutters.

columnCursor: string
  Cursor to show while dragging. Default: `'col-resize'`

rowCursor: string
  Cursor to show while dragging. Default: `'row-resize'`

onDrag: (direction: 'row' | 'column', track: number, gridTemplateStyle: string) => void
  Called continuously on drag. For process intensive code, add a debounce function to rate limit this callback. `gridTemplateStyle` is the computed CSS value for `grid-template-column` or `grid-template-row`, depending on `direction`.

onDragStart: (direction: 'row' | 'column', track: number) => void
  Called on drag start.

onDragEnd: (direction: 'row' | 'column', track: number) => void
  Called on drag end.

writeStyle: (grid: HTMLElement, gridTemplateProp: 'grid-template-column' | 'grid-template-row', gridTemplateStyle: string) => void
  Called to update the CSS properties of the grid element. Must eventually apply the CSS value to the CSS prop, or the grid will not change. `gridTemplateStyle` is the computed CSS value of CSS rule `gridTemplateProp`.
  Default:
  ```js
  writeStyle: (grid, gridTemplateProp, gridTemplateStyle) => {
    grid.style[gridTemplateProp] = gridTemplateStyle
  }
  ```

gridTemplateColumns: string
gridTemplateRows: string
  Helper options for determining initial CSS values for `grid-template-columns` and `grid-template-rows`. Most of the time this option is not needed, as Split Grid reads the CSS rules applied to the grid element, but security settings may prevent that, for example, when the CSS is served from a 3rd-party domain. This is ONLY NEEDED if the default method of reading the CSS values errors. This option does not immediately apply CSS rules, it's only used on drag.
```

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

### Running Tests

Source: https://github.com/nathancahill/split/blob/master/CONTRIBUTING.md

Commands to execute unit tests using Jest and browser tests with Jasmine and Karma. Includes options for specifying headless browsers.

```bash
$ yarn test
$ yarn workspace split.js run test --browsers FirefoxHeadless
$ yarn workspace split.js run test --browsers ChromeHeadless
```

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

### Importing Split.js with ES6 Modules

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Demonstrates how to import the Split.js library using ES6 module syntax.

```javascript
// using ES6 modules
import Split from 'split.js'
```

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

### Basic Usage

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Illustrates the fundamental usage of the `<Split />` component to create a resizeable split view with two child components.

```javascript
import Split from 'react-split'

<Split>
    <ComponentA />
    <ComponentB />
</Split>

```

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

### Split Grid API Methods

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Provides methods for interacting with a Split Grid instance after initialization. This includes adding/removing gutters, and destroying the instance.

```APIDOC
Split(options: Options): SplitInstance
  Initializes a new Split Grid instance with the provided options.

SplitInstance.addColumnGutter(element: HTMLElement, track: number): void
  Adds a draggable column gutter. The element must be a direct descendant of the element with grid layout, and positioned in the specified track.
  Example:
  ```js
  const grid = document.querySelector('.grid')
  const gutter = document.createElement('div')

  grid.appendChild(gutter)  // append to DOM
  split.addColumnGutter(gutter, 1)  // add to Split Grid
  ```

SplitInstance.addRowGutter(element: HTMLElement, track: number): void
  Adds a draggable row gutter. The element must be a direct descendant of the element with grid layout, and positioned in the specified track.
  Example:
  ```js
  const grid = document.querySelector('.grid')
  const gutter = document.createElement('div')

  grid.appendChild(gutter)  // append to DOM
  split.addRowGutter(gutter, 1)  // add to Split Grid
  ```

SplitInstance.removeColumnGutter(track: number, immediate?: true): void
  Removes event listeners from a column gutter by track number. If `immediate = false` is passed, event handlers are removed after dragging ends. If a gutter isn't currently being dragged, it's event handlers are removed immediately.

SplitInstance.removeRowGutter(track: number, immediate?: true): void
  Removes event listeners from a row gutter by track number. If `immediate = false` is passed, event handlers are removed after dragging ends. If a gutter isn't currently being dragged, it's event handlers are removed immediately.

SplitInstance.destroy(immediate?: true): void
  Destroy the instance by removing the attached event listeners. If `immediate = false` is passed, the instance is destroyed after dragging ends. If a gutter isn't currently being dragged, it's destroyed immediately.
```

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

### React Split Grid - Basic Usage

Source: https://github.com/nathancahill/split/blob/master/README.md

Demonstrates the usage of the React Split Grid component, a wrapper for Split Grid, to manage resizable grid layouts in a React application.

```javascript
import React from 'react';
import SplitGrid from 'react-split-grid';

function App() {
  const gridTemplate = {
    gridTemplateColumns: '1fr 1fr',
    gridTemplateRows: '1fr 1fr'
  };

  return (
    <SplitGrid className='split-grid-container' gridTemplate={gridTemplate} columnGutters={['#gutter-col-1']} rowGutters={['#gutter-row-1']}>
      <div className='cell-1'>Cell 1</div>
      <div className='cell-2'>Cell 2</div>
      <div className='cell-3'>Cell 3</div>
    </SplitGrid>
  );
}
```

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

### UMD Build Usage

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Shows how to include the UMD build of React-Split using a script tag from unpkg.

```html
<script src="https://unpkg.com/react-split/dist/react-split.js"></script>

```

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

### Split.js Options Table

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Provides a detailed breakdown of the available options for configuring Split.js, including their types, default values, and descriptions.

```APIDOC
Split.js Options:

- `sizes`: Array - Initial sizes of each element in percents or CSS values.
- `minSize`: Number or Array - Minimum size of each element. Default: `100`.
- `maxSize`: Number or Array - Maximum size of each element. Default: `Infinity`.
- `expandToMin`: Boolean - Grow initial sizes to `minSize`. Default: `false`.
- `gutterSize`: Number - Gutter size in pixels. Default: `10`.
- `gutterAlign`: String - Gutter alignment between elements. Default: `'center'`.
- `snapOffset`: Number - Snap to minimum size offset in pixels. Default: `30`.
- `dragInterval`: Number - Number of pixels to drag. Default: `1`.
- `direction`: String - Direction to split: horizontal or vertical. Default: `'horizontal'`.
- `cursor`: String - Cursor to display while dragging. Default: `'col-resize'`.
- `gutter`: Function - Called to create each gutter element.
- `elementStyle`: Function - Called to set the style of each element.
- `gutterStyle`: Function - Called to set the style of the gutter.
- `onDrag`: Function - Callback on drag.
- `onDragStart`: Function - Callback on drag start.
- `onDragEnd`: Function - Callback on drag end.
```

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

### Split.js Sizes vs. Split Grid CSS Values

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Illustrates how Split.js uses a `sizes` option for initial sizing, whereas Split Grid leverages CSS `grid-template` values for more flexibility.

```javascript
Split({
    sizes: [50, 50]
})
```

```html
<div style="grid-template-columns: 1fr 10px 1fr"></div>
```

```javascript
> document.querySelector('.grid').style['grid-template-columns'] = '1fr 10px 1fr'
```

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

### Including UMD Build from unpkg

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

Shows how to include the UMD build of react-split-grid using a script tag from unpkg.

```html
<script src="https://unpkg.com/react-split-grid/dist/react-split-grid.js"></script>
```

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

### Importing Split.js with CommonJS Modules

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Demonstrates how to import the Split.js library using CommonJS module syntax.

```javascript
// using CommonJS modules
var Split = require('split.js')
```

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

### Importing React Split Grid (ES6 Modules)

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

Demonstrates how to import the Split component using ES6 module syntax.

```javascript
import Split from 'react-split-grid'
```

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

### Three-Element Split with Minimum Sizes

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Initializes a split with three elements, specifying minimum widths for each element.

```javascript
Split(['#one', '#two', '#three'], {
    minSize: [100, 100, 300],
})
```

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

### React-Split API Reference

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Provides a comprehensive reference for the props available for the `<Split />` component, detailing their types, default values, and links to Split.js documentation for further details.

```APIDOC
<Split> Component Props:

- `sizes`: `sizes?: [number]` - Defines the initial sizes of the split panes. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#sizes).
- `minSize`: `minSize?: number | [number]` - Sets the minimum size for each pane. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#minsize-default-100).
- `expandToMin`: `expandToMin?: boolean` - If true, panes will expand to their minimum size when resizing. Defaults to `false`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#expandtomin-default-false).
- `gutterSize`: `gutterSize?: number` - The size of the gutter between panes. Defaults to `10`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#guttersize-default-10).
- `gutterAlign`: `gutterAlign?: 'center' | 'start' | 'end'` - Aligns the gutter. Defaults to `'center'`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutteralign-default-center).
- `snapOffset`: `snapOffset?: number` - Offset for snapping to minimum sizes. Defaults to `30`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#snapoffset-default-30).
- `dragInterval`: `dragInterval?: number` - Interval for drag updates. Defaults to `1`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#draginterval-default-1).
- `direction`: `direction?: 'horizontal' | 'vertical'` - The direction of the split. Defaults to `'horizontal'`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#direction-default-horizontal).
- `cursor`: `cursor?: string` - The CSS cursor style for the gutter. Defaults to `'col-resize'`. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#cursor-default-col-resize).
- `gutter`: `gutter?: (index, direction, pairElement) => HTMLElement` - A function to customize the gutter element. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutter).
- `elementStyle`: `elementStyle?: (dimension, elementSize, gutterSize, index) => Object` - A function to customize the style of each element. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#elementstyle).
- `gutterStyle`: `gutterStyle?: (dimension, gutterSize, index) => Object` - A function to customize the style of the gutter. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#gutterstyle).
- `onDrag`: `onDrag?: sizes => void` - Callback function triggered during drag. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend).
- `onDragStart`: `onDragStart?: sizes => void` - Callback function triggered when dragging starts. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend).
- `onDragEnd`: `onDragEnd?: sizes => void` - Callback function triggered when dragging ends. See [Split.js docs](https://github.com/nathancahill/split/tree/master/packages/splitjs#ondrag-ondragstart-ondragend).

Migration Notes from Split.js:

- `.setSizes(sizes)` is replaced by the `sizes` prop.
- `.getSizes()` is unavailable; sizes are provided via `onDragStart` and `onDragEnd` callbacks.
- `.collapse(index)` is replaced by the `collapsed={index}` prop.
- `.destroy()` is automatically handled on `componentWillUnmount`.

Note: Function-based props (`gutter`, `elementStyle`, `gutterStyle`, `onDrag`, `onDragStart`, `onDragEnd`) do not trigger `componentDidUpdate` and should be defined outside the render method for best practices.
```

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

### Importing React Split Grid (CommonJS Modules)

Source: https://github.com/nathancahill/split/blob/master/packages/react-split-grid/README.md

Demonstrates how to import the Split component using CommonJS module syntax.

```javascript
var Split = require('react-split-grid')
```

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

### Including Split.js via cdnjs CDN

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Shows how to include the Split.js UMD build from the cdnjs Content Delivery Network.

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
```

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

### Importing Split Grid in JavaScript

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Shows how to import the Split Grid library into your JavaScript project using ES6 modules or CommonJS.

```javascript
// using ES6 modules
import Split from 'split-grid'

// using CommonJS modules
var Split = require('split-grid')
```

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

### Basic Grid Usage

Source: https://github.com/nathancahill/split/blob/master/packages/split-generator/README.md

Demonstrates how to use the mapgrid component to create a simple responsive grid with Tailwind CSS classes.

```svelte
<script>
  import MapGrid from './MapGrid.svelte';
</script>

<MapGrid class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
</MapGrid>
```

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

### Setting Sizes: Split.js vs. Split Grid

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Explains the difference in setting element sizes: Split.js uses `setSizes()`, while Split Grid involves directly manipulating CSS `grid-template` properties.

```javascript
> split.setSizes([50, 50])
```

```javascript
> document.querySelector('.grid').style['grid-template-columns'] = '1fr 10px 1fr'
```

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

### Importing React-Split

Source: https://github.com/nathancahill/split/blob/master/packages/react-split/README.md

Demonstrates how to import the React-Split component using ES6 modules and CommonJS modules.

```javascript
import Split from 'react-split'

```

```javascript
var Split = require('react-split')

```

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

### Initial Sizes

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Sets the initial sizes of the split elements as percentage values. This determines how the available space is distributed when the split view is first created.

```javascript
Split(["#one", "#two"], {
    sizes: [25, 75]
})
```

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

### Gutter CSS with Base64 Images

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Includes CSS for gutters using base64 encoded images for the grip icons, reducing external file dependencies.

```css
.gutter.gutter-vertical {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
}

.gutter.gutter-horizontal {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
}
```

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

### Saving Split State with Local Storage

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Demonstrates how to save and restore split pane sizes using local storage, updating the storage on drag end.

```javascript
var sizes = localStorage.getItem('split-sizes')

if (sizes) {
    sizes = JSON.parse(sizes)
} else {
    sizes = [50, 50] // default sizes
}

var split = Split(['#one', '#two'], {
    sizes: sizes,
    onDragEnd: function (sizes) {
        localStorage.setItem('split-sizes', JSON.stringify(sizes))
    },
})
```

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

### Basic Gutter CSS

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Provides basic CSS for Split.js gutters, including background and cursor styles for horizontal and vertical gutters.

```css
.gutter {
    background-color: #eee;

    background-repeat: no-repeat;
    background-position: 50%;
}

.gutter.gutter-horizontal {
    background-image: url('grips/vertical.png');
    cursor: col-resize;
}

.gutter.gutter-vertical {
    background-image: url('grips/horizontal.png');
    cursor: row-resize;
}
```

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

### Expand to Minimum Size

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

When true, the `minSize` option overrides the initial `sizes` percentage if the percentage results in a smaller size. Ensures elements always meet their minimum dimensions on initialization.

```javascript
Split(["#one", "#two"], {
    sizes: [25, 75],
    minSize: [300, 100],
    expandToMin: true
})
```

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

### Combining Grid Template Rule

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Shows how the `combine` function updates a grid template string with new track values.

```javascript
import { combine } from 'grid-template-utils'

combine('1fr 10px 1fr', [,{ value: '20px' }])
// Returns: '1fr 20px 1fr'
```

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

### Vertical Split Initialization

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Initializes a vertical split with two elements.

```javascript
Split(['#one', '#two'], {
    direction: 'vertical',
})
```

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

### Flex Layout with Custom Styles

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Configures Split.js for use with a flexbox layout, customizing element and gutter styles to work with `flex-basis`.

```javascript
Split(['#flex-1', '#flex-2'], {
    elementStyle: function (dimension, size, gutterSize) {
        return {
            'flex-basis': 'calc(' + size + '% - ' + gutterSize + 'px)'
        }
    },
    gutterStyle: function (dimension, gutterSize) {
        return {
            'flex-basis': gutterSize + 'px'
        }
    },
})
```

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

### Parsing Grid Template Rule

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Demonstrates the `parse` function, which takes a CSS grid template string and returns an array of Track objects.

```javascript
import { parse } from 'grid-template-utils'

parse('1fr 10px 1fr')
// Returns:
// [
//     {
//         value: '1fr',
//         type: 'fr',
//         numeric: 1,
//     },
//     {
//         value: '10px',
//         type: 'px',
//         numeric: 10,
//     },
//     {
//         value: '1fr',
//         type: 'fr',
//         numeric: 1,
//     },
// ]
```

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

### API Reference: combine()

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Updates a CSS grid template rule with values from an array of Track objects.

```APIDOC
combine(rule: string, tracks: Track[]) => string

Updates a CSS rule with values from an array of `Track` objects. The array can be sparse, only included indices will be updated. If `Track.value` is specified, that string value will be used directly. If not, `Track.numeric` and `Track.type` are joined before interpolation.
```

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

### Grid with Customization

Source: https://github.com/nathancahill/split/blob/master/packages/split-generator/README.md

Shows how to customize the grid's appearance and behavior using various Tailwind CSS utility classes.

```svelte
<script>
  import MapGrid from './MapGrid.svelte';
</script>

<MapGrid class="grid grid-cols-2 gap-8 p-8 bg-gray-100 rounded-lg shadow-xl">
  <div class="bg-white p-4 rounded">Content A</div>
  <div class="bg-white p-4 rounded">Content B</div>
  <div class="bg-white p-4 rounded">Content C</div>
  <div class="bg-white p-4 rounded">Content D</div>
</MapGrid>
```

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

### Box Sizing CSS

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Applies `border-box` sizing to Split.js elements for consistent layout behavior across different browsers and elements.

```css
.split {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
```

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

### API Reference: Track Object

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Defines the structure of the `Track` object used by the library to represent individual grid tracks.

```APIDOC
Track { value: string, type: 'fr' | 'px' | '%' | 'auto', numeric: number }

Object describing CSS values for a single track in a grid template.
```

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

### Split.js destroy() vs. Split Grid destroy()

Source: https://github.com/nathancahill/split/blob/master/packages/split-grid/README.md

Details the parameter difference in the `destroy()` method: Split.js has `preserveStyles` and `preserveGutters`, while Split Grid uses an `immediate` boolean to control event listener removal.

```javascript
split.destroy(immediate: boolean)
```

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

### Drag Callbacks (onDrag, onDragStart, onDragEnd)

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Callbacks for handling drag events. `onDrag` fires continuously, while `onDragStart` and `onDragEnd` fire at the beginning and end of a drag operation. These callbacks receive the current sizes of the split elements.

```javascript
Split(['#one', '#two'], {
    onDragEnd: function (sizes) {
        localStorage.setItem('split-sizes', JSON.stringify(sizes))
    }
})
```

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

### Destroy Split.js Instance

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Destroys the Split.js instance, removing gutter elements and CSS size styles. Options can preserve styles or gutters.

```javascript
instance.destroy()
instance.destroy(true, true) // preserveStyles and preserveGutters
```

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

### API Reference: parse()

Source: https://github.com/nathancahill/split/blob/master/packages/grid-template-utils/README.md

Parses a CSS grid-template-rows or grid-template-columns rule into an array of Track objects.

```APIDOC
parse(rule: string) => Track[]

Parses a `grid-template-rows` or `grid-columns` CSS rule to an array of `Track` objects with `value`, `type` and `numeric` keys.
```

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

### Custom Gutter Creation

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Provides a function to create custom gutter elements. The function receives the index, direction, and the adjacent element. Returning a falsey value prevents gutter insertion. Added in v1.4.1.

```javascript
(index, direction, pairElement) => pairElement.previousSibling
```

```javascript
(index, direction) => {
    const gutter = document.createElement('div')
    gutter.className = `gutter gutter-${direction}`
    return gutter
}
```

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

### Float Layout for Horizontal Splits

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Uses floats to arrange elements side-by-side for horizontal splits, requiring explicit height setting for visibility.

```css
.split,
.gutter.gutter-horizontal {
    float: left;
}
```

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

### Jasmine Spec Runner

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/test/SpecRunner.html

The Jasmine Spec Runner is used to execute JavaScript tests written with the Jasmine testing framework. It typically serves as an entry point for running your test suite in a browser or Node.js environment.

```javascript
/**
 * Jasmine Spec Runner
 * Version: 3.5.0
 * 
 * This file is part of the Jasmine testing framework.
 * It is responsible for loading and executing your test specifications.
 */

// Example usage (conceptual):
// Assuming you have Jasmine configured and your spec files are included.
// The runner would typically be invoked by a test runner script or a browser.

// describe('My first suite', function() {
//   it('should do something', function() {
//     expect(true).toBe(true);
//   });
// });
```

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

### Minimum Sizes

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Defines the minimum pixel values for each split element. This prevents elements from becoming too small during resizing. Can be an array for individual minimums or a single value for all elements.

```javascript
Split(["#one", "#two"], {
    minSize: [100, 300]
})
```

```javascript
Split(["#one", "#two"], {
    minSize: 100
})
```

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

### Drag Interval

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Specifies the number of pixels the gutter moves at a time during dragging. Defaults to 1 for smooth dragging, but can be increased for more controlled resizing, especially when matching `gutterSize`.

```javascript
Split(["#one", "#two"], {
    dragInterval: 20
})
```

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

### Snap Offset

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Sets the pixel offset at which the gutter will snap to the minimum size of an element. Setting this to 0 disables the snapping behavior.

```javascript
Split(["#one", "#two"], {
    snapOffset: 0
})
```

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

### gutterStyle Function

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Optional function to customize the CSS style of gutters. It receives dimension and gutter size, and should return a CSS style object. Gutters typically have fixed widths.

```javascript
Split(['#one', '#two'], {
    gutterStyle: function (dimension, gutterSize) {
        return {
            'width': gutterSize + 'px'
        }
    }
})
```

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

### Gutter Size

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Configures the size of the gutter element in pixels, which separates the split panes. A larger gutter size provides more visual separation and a larger area for interaction.

```javascript
Split(["#one", "#two"], {
    gutterSize: 20
})
```

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

### Maximum Sizes

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Sets the maximum pixel values for each split element. This prevents elements from becoming too large during resizing. Can be an array for individual maximums or Infinity for no limit.

```javascript
Split(["#one", "#two"], {
    maxSize: [500, Infinity]
})
```

```javascript
Split(["#one", "#two"], {
    maxSize: 500
})
```

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

### Gutter Cursor

Source: https://github.com/nathancahill/split/blob/master/packages/splitjs/README.md

Sets the CSS cursor style displayed on the gutter during resizing. Defaults to 'col-resize' for horizontal splits and 'row-resize' for vertical splits. The cursor is also applied to the body during dragging.

```javascript
Split(["#one", "#two"], {
    direction: 'vertical',
    cursor: 'row-resize'
})
```