### Setup SplitMe with npm

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Install SplitMe as a dependency in your project using npm. Then, import and define the custom elements in your main JavaScript file to enable the SplitMe component.

```bash
npm install --save split-me
```

```javascript
import { defineCustomElements as defineSplitMe } from 'split-me/loader';

defineSplitMe(window);
```

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

### NPM Installation and Initialization

Source: https://context7.com/alesgenova/split-me/llms.txt

Demonstrates how to install the SplitMe package using npm and initialize the custom elements in your main JavaScript or TypeScript entry file. This is the recommended approach for framework-based projects.

```javascript
// Install package
// npm install --save split-me

// In your main entry file (index.js, main.ts, etc.)
import { defineCustomElements as defineSplitMe } from 'split-me/loader';

defineSplitMe(window);

// Now use <split-me> component anywhere in your templates
```

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

### JavaScript Example: Saving and Loading Splitter State

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Demonstrates how to persist and restore the sizes of splitter slots using `localStorage`. The `handle` function captures resize events, extracts size information, and saves it. The initial setup attempts to load saved sizes, falling back to default if none exist. This allows users to maintain their preferred layout across sessions.

```javascript
function handle(event) {
  // extrapolate details
  const { sizes, divider, originalEvent } = event.detail;
  const sourceElement = event.target;

  console.log(sourceElement, originalEvent);
  console.dir({ divider, sizes });

  // store state
  localStorage.setItem('split-sizes', sizes);
}

const el = document.querySelector('split-me');

// loads sizes, but only if they have not been set yet.
el.sizes = el.sizes || localStorage.getItem('split-sizes');

// listen on changes
el.addEventListener('slotResized', handle);
```

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

### Vertical Splitter Example

Source: https://context7.com/alesgenova/split-me/llms.txt

Demonstrates a vertical splitter configuration using the `d='vertical'` attribute. This example sets initial sizes for the top and bottom panels, suitable for header/content layouts.

```html
<split-me n="2" d="vertical" sizes="0.3, 0.7">
  <div slot="0" class="fill header">Header (30%)</div>
  <div slot="1" class="fill content">Content (70%)</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 500px;
  }
</style>
```

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

### Vue Integration Example for Split-me

Source: https://context7.com/alesgenova/split-me/llms.txt

This example demonstrates how to integrate the split-me component within a Vue.js application. It shows template usage, data binding for sizes, and event handling for resize events. Dependencies include the split-me web component itself.

```vue
<template>
  <div class="container">
    <split-me
      ref="splitter"
      :n="3"
      :sizes="sizes"
      @slotResized="handleResize"
    >
      <div slot="0" class="fill red">Panel 1</div>
      <div slot="1" class="fill green">Panel 2</div>
      <div slot="2" class="fill blue">Panel 3</div>
    </split-me>
  </div>
</template>

<script>
import { defineCustomElements } from 'split-me/loader';

// Call once in main.js
defineCustomElements(window);

export default {
  data() {
    return {
      sizes: '0.3, 0.4, 0.3'
    };
  },
  methods: {
    handleResize(event) {
      const { sizes, divider } = event.detail;
      console.log(`Divider ${divider} moved`, sizes);
      this.sizes = sizes.join(', ');
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 600px;
}
.fill {
  width: 100%;
  height: 100%;
}
</style>
```

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

### Setup SplitMe in HTML

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Include the SplitMe component in your HTML file by adding a script tag. This makes the custom 'split-me' element available for use in your project.

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

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

### HTML Setup with SplitMe Script Tag

Source: https://context7.com/alesgenova/split-me/llms.txt

Includes the SplitMe web component via a script tag for direct HTML usage. This method is suitable for quick integration without a build process. It demonstrates basic styling and usage within a div container.

```html
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/split-me/dist/split-me.js"></script>
  <style>
    .container {
      width: 100%;
      height: 500px;
    }
    .fill {
      width: 100%;
      height: 100%;
    }
    .red { background-color: #f44336; }
    .green { background-color: #4CAF50; }
  </style>
</head>
<body>
  <div class="container">
    <split-me n="2">
      <div slot="0" class="fill red"></div>
      <div slot="1" class="fill green"></div>
    </split-me>
  </div>
</body>
</html>
```

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

### SplitMe Custom Element Demo Structure

Source: https://github.com/alesgenova/split-me/blob/master/README.md

An example HTML structure showcasing the SplitMe web component within a custom element demo. It includes script tags for webcomponents and SplitMe, along with CSS for styling the splitter and its contents.

```html
<custom-element-demo>
  <template>
    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
    <script src="https://unpkg.com/split-me/dist/split-me.js"></script>
    <style is="custom-style">
      .container {
        width: 100%;
        height: 15rem;
      }
      .fill {
        width: 100%;
        height: 100%;
      }
      .red {
        background-color: #f44336;
      }
      .green {
        background-color: #4CAF50;
      }
      .blue {
        background-color: #3F51B5;
      }
      .light-green {
        background-color: #CDDC39;
      }
    </style>
    <div class="container">
      <split-me n=3>
        <div slot="0" class="fill red"></div>
        <split-me slot="1" n=2 d="vertical">
          <div slot="0" class="fill blue"></div>
          <div slot="1" class="fill green"></div>
        </split-me>
        <div slot="2" class="fill light-green"></div>
      </split-me>
    </div>
  </template>
</custom-element-demo>
```

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

### Nested Splitters for Complex Layouts

Source: https://context7.com/alesgenova/split-me/llms.txt

Illustrates how to create complex, multi-level layouts by nesting `split-me` components. This example shows a main horizontal splitter containing a nested vertical splitter, allowing for intricate UI arrangements.

```html
<split-me n="3" sizes="0.25, 0.5, 0.25">
  <div slot="0" class="fill sidebar">Left Sidebar</div>

  <split-me slot="1" n="2" d="vertical" sizes="0.4, 0.6">
    <div slot="0" class="fill header">Header</div>
    <div slot="1" class="fill main">Main Content</div>
  </split-me>

  <div slot="2" class="fill panel">Right Panel</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 600px;
  }
</style>
```

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

### Basic Two-Panel Horizontal Splitter

Source: https://context7.com/alesgenova/split-me/llms.txt

A simple example of a horizontal splitter component with two panels. It utilizes the `n` attribute to specify the number of panels and `slot` attributes to assign content to each panel. Includes basic styling for the splitter and its content.

```html
<split-me n="2">
  <div slot="0" class="fill red">Left Panel</div>
  <div slot="1" class="fill green">Right Panel</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 400px;
  }
  .fill {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
  }
</style>
```

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

### HTML and CSS: Customizing Splitter Appearance

Source: https://github.com/alesgenova/split-me/blob/master/README.md

An example of how to use and style the SplitMe component. It shows a basic HTML structure with two content slots and includes CSS to override default divider properties, making them thicker and yellow. This demonstrates practical application of the CSS variables for visual customization.

```html
<split-me n="2">
  <div slot="0" class="fill red"></div>
  <div slot="1" class="fill green"></div>
</split-me>

<style>
  :root split-me {
    --divider-thickness: 0.75rem;
    --divider-color: yellow;
  }
</style>
```

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

### JavaScript Splitter Resizing and Persistence

Source: https://github.com/alesgenova/split-me/blob/master/src/index.html

This JavaScript code handles the 'slotResized' event for a splitter component. It saves the current sizes of the split slots to local storage. It also includes examples of how to programmatically set the splitter sizes after delays, demonstrating different configurations.

```javascript
document.addEventListener('DOMContentLoaded', () => {
  let splitter = document.getElementById('splitter');
  splitter.addEventListener('slotResized', (e) => {
    const { sizes, divider, originalEvent } = event.detail;
    localStorage.setItem('split-sizes', sizes);
  });

  setTimeout(() => {
    // splitter.sizes = localStorage.getItem('split-sizes');
  }, 50);

  setTimeout(() => {
    // splitter.sizes = '0.75, 0.25';
  }, 2000);

  setTimeout(() => {
    // splitter.sizes = [0.25, 0.75];
  }, 4000);

  setTimeout(() => {
    // splitter.sizes = '[0.5, 0.5]';
  }, 6000);
});
```

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

### Throttle Resize Events with JavaScript

Source: https://context7.com/alesgenova/split-me/llms.txt

This example demonstrates how to use the 'throttle' attribute of the split-me component to limit the frequency of resize events. This is useful for optimizing performance when performing expensive operations in response to resizing. The 'throttle' attribute is set to '100' milliseconds.

```javascript
const splitter = document.querySelector('split-me');

splitter.addEventListener('slotResized', (event) => {
  // This will fire at most once every 100ms while dragging
  console.log('Resize event:', event.detail.sizes);

  // Perform expensive operations here
  updateCharts();
  recalculateLayouts();
});

function updateCharts() {
  // Heavy computation
}

function recalculateLayouts() {
  // DOM manipulations
}
```

```html
<split-me n="2" throttle="100">
  <div slot="0" class="fill">Panel 1</div>
  <div slot="1" class="fill">Panel 2</div>
</split-me>
```

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

### Programmatically Change Splitter Sizes with JavaScript

Source: https://context7.com/alesgenova/split-me/llms.txt

This example demonstrates how to programmatically control the sizes of the panels in a split-me component using JavaScript. It shows how to set equal sizes and how to adjust sizes to focus on a specific panel. The 'sizes' property accepts an array of numbers or strings.

```javascript
const splitter = document.getElementById('controlledSplitter');
const resetBtn = document.getElementById('resetBtn');
const focusMiddleBtn = document.getElementById('focusMiddleBtn');

resetBtn.addEventListener('click', () => {
  // Set equal sizes
  splitter.sizes = [0.333, 0.334, 0.333];
});

focusMiddleBtn.addEventListener('click', () => {
  // Focus on middle panel
  splitter.sizes = [0.15, 0.7, 0.15];
});

// Can also use string formats
// splitter.sizes = '25%, 50%, 25%';
// splitter.sizes = '0.25, 0.5, 0.25';
```

```html
<split-me id="controlledSplitter" n="3">
  <div slot="0" class="fill">Panel 1</div>
  <div slot="1" class="fill">Panel 2</div>
  <div slot="2" class="fill">Panel 3</div>
</split-me>

<button id="resetBtn">Reset to Equal</button>
<button id="focusMiddleBtn">Focus Middle</button>
```

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

### Save and Restore Layout State with JavaScript

Source: https://context7.com/alesgenova/split-me/llms.txt

This example shows how to save the layout state of a split-me component to local storage and restore it on page load. It listens for the 'slotResized' event to save the sizes and calls a function to restore them when the component is initialized. Dependencies include the browser's localStorage API.

```javascript
const splitter = document.getElementById('persistentSplitter');
const STORAGE_KEY = 'split-me-layout';

// Restore saved sizes on load
function restoreLayout() {
  const savedSizes = localStorage.getItem(STORAGE_KEY);
  if (savedSizes) {
    // Only set if sizes haven't been explicitly set
    splitter.sizes = splitter.sizes || savedSizes;
  }
}

// Save sizes on resize
function saveLayout(event) {
  const { sizes } = event.detail;
  localStorage.setItem(STORAGE_KEY, JSON.stringify(sizes));
}

splitter.addEventListener('slotResized', saveLayout);
restoreLayout();
```

```html
<split-me id="persistentSplitter" n="3">
  <div slot="0" class="fill">Panel 1</div>
  <div slot="1" class="fill">Panel 2</div>
  <div slot="2" class="fill">Panel 3</div>
</split-me>
```

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

### Customize Divider Appearance with CSS

Source: https://context7.com/alesgenova/split-me/llms.txt

This example shows how to customize the appearance of the split-me component's dividers using CSS custom properties. It demonstrates setting the divider thickness, color, shadow, phantom divider thickness, and background images for both horizontal and vertical dividers.

```css
.custom-splitter {
  display: block;
  width: 100%;
  height: 400px;

  /* Divider thickness */
  --divider-thickness: 8px;

  /* Divider color */
  --divider-color: #2196F3;

  /* Divider shadow */
  --divider-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  /* Phantom divider (grab area) thickness */
  --phantom-divider-thickness: 20px;

  /* Background image for horizontal divider */
  --divider-image-h: url('data:image/svg+xml,...');

  /* Background image for vertical divider */
  --divider-image-v: url('data:image/svg+xml,...');

  /* Background image positioning */
  --divider-background-repeat: no-repeat;
  --divider-background-position: center;

  /* Divider length (default 100%) */
  --divider-length: 100%;
}
```

```html
<split-me n="2" class="custom-splitter">
  <div slot="0" class="fill">Panel 1</div>
  <div slot="1" class="fill">Panel 2</div>
</split-me>
```

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

### React Integration with Split Me Component

Source: https://context7.com/alesgenova/split-me/llms.txt

This example illustrates how to integrate the Split Me web component into a React application. It uses `useEffect` and `useRef` hooks to manage the component's state and event listeners. The 'sizes' state is updated when the 'slotResized' event fires, and the component's sizes are controlled by the React state.

```jsx
import React, { useEffect, useRef, useState } from 'react';
import { defineCustomElements } from 'split-me/loader';

// Call once in your app initialization
defineCustomElements(window);

function App() {
  const splitterRef = useRef(null);
  const [sizes, setSizes] = useState([0.5, 0.5]);

  useEffect(() => {
    const splitter = splitterRef.current;

    const handleResize = (event) => {
      setSizes(event.detail.sizes);
    };

    splitter.addEventListener('slotResized', handleResize);

    return () => {
      splitter.removeEventListener('slotResized', handleResize);
    };
  }, []);

  return (
    <div style={{ width: '100%', height: '500px' }}>
      <split-me ref={splitterRef} n={2} sizes={sizes.join(', ')}>
        <div slot="0" style={{ width: '100%', height: '100%', background: '#f44336' }}>
          Panel 1: {(sizes[0] * 100).toFixed(1)}%
        </div>
        <div slot="1" style={{ width: '100%', height: '100%', background: '#4CAF50' }}>
          Panel 2: {(sizes[1] * 100).toFixed(1)}%
        </div>
      </split-me>
    </div>
  );
}

export default App;
```

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

### Advanced SplitMe Layout with Nesting and Custom Sizes

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Demonstrates a complex layout using nested SplitMe components. It features custom size distribution using 'sizes' and 'min-sizes' attributes, and a fixed nested splitter.

```html
<split-me n="3" sizes="0.3, 0.3, 0.4" min-sizes="0.2, 0.0, 0.0">
  <div slot="0" class="fill red"></div>
  <div slot="1" class="fill green"></div>
  <split-me slot="2" n="2" d="vertical" fixed>
    <div slot="0" class="fill blue"></div>
    <div slot="1" class="fill magenta"></div>
  </split-me>
</split-me>
```

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

### Setting Size Constraints (Min/Max)

Source: https://context7.com/alesgenova/split-me/llms.txt

Applies minimum and maximum size constraints to splitter panels using `min-sizes` and `max-sizes` attributes. This prevents panels from becoming too small or too large, ensuring usability. Values are specified as normalized percentages.

```html
<split-me
  n="3"
  sizes="0.3, 0.4, 0.3"
  min-sizes="0.2, 0.2, 0.1"
  max-sizes="0.5, 0.6, 0.5"
>
  <div slot="0" class="fill">Panel 1 (min:20%, max:50%)</div>
  <div slot="1" class="fill">Panel 2 (min:20%, max:60%)</div>
  <div slot="2" class="fill">Panel 3 (min:10%, max:50%)</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 400px;
  }
</style>
```

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

### Three-Panel Layout with Initial Sizes

Source: https://context7.com/alesgenova/split-me/llms.txt

Configures a three-panel horizontal splitter with predefined initial sizes. The `sizes` attribute accepts a comma-separated string of normalized values (0-1) that define the distribution of space among the panels.

```html
<split-me n="3" sizes="0.2, 0.5, 0.3">
  <div slot="0" class="fill sidebar">Sidebar (20%)</div>
  <div slot="1" class="fill main">Main Content (50%)</div>
  <div slot="2" class="fill panel">Side Panel (30%)</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 600px;
  }
</style>
```

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

### Basic SplitMe Usage in HTML

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Create a simple two-way splitter using the 'split-me' tag. The 'n' attribute defines the number of slots, and 'slot' attributes assign content to each slot.

```html
<split-me n="2">
  <div slot="0" class="fill red"></div>
  <div slot="1" class="fill green"></div>
</split-me>

<style>
  .fill {
    height: 100%;
    width: 100%;
  }
</style>
```

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

### Listening to Resize Events (JavaScript)

Source: https://context7.com/alesgenova/split-me/llms.txt

Shows how to attach an event listener to the `split-me` component to detect when a divider is moved. The `slotResized` event provides details about the new sizes of the slots and which divider was interacted with.

```javascript
<split-me id="mySplitter" n="2">
  <div slot="0" class="fill">Panel 1</div>
  <div slot="1" class="fill">Panel 2</div>
</split-me>

<script>
const splitter = document.getElementById('mySplitter');

splitter.addEventListener('slotResized', (event) => {
  // Event detail contains:
  // - sizes: number[] - normalized sizes [0.4, 0.6]
  // - divider: number - which divider was moved
  // - originalEvent: MouseEvent | TouchEvent

  const { sizes, divider, originalEvent } = event.detail;

  console.log(`Divider ${divider} moved`);
  console.log('New sizes:', sizes);
  console.log('Panel 0:', (sizes[0] * 100).toFixed(1) + '%');
  console.log('Panel 1:', (sizes[1] * 100).toFixed(1) + '%');
});
</script>
```

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

### TypeScript Interface for Slot Resize Event

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Defines the structure of the event object emitted when splitter slots are resized. It includes the new sizes of the slots, the index of the divider that was moved, and the original DOM event that triggered the resize. This interface is crucial for handling resize events and updating application state.

```typescript
interface IResizeEvent {
  sizes: number[]; // [0.25, 0.75]
  divider: number; // internal divider index
  originalEvent: MouseEvent | TouchEvent; // event that triggered resize
}
```

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

### CSS: Default Splitter Styling Variables

Source: https://github.com/alesgenova/split-me/blob/master/README.md

Lists the default CSS custom properties available for styling the SplitMe component's dividers. These variables control the divider's length, thickness, color, shadow, background image, and phantom divider thickness for improved usability. Developers can override these in their CSS to customize the splitter's appearance.

```css
:host {
  --divider-length: 100%; /* Length of the divider along the principal axis */
  --divider-thickness: 0.15rem; /* Thickness of the divider */
  --divider-color: #eeeeee; /* Background color of the divider */
  --divider-shadow: 0 0 0.3rem black; /* Shadow of the divider */
  --divider-image-h: none; /* Background image of the divider when d="horizontal" */
  --divider-image-v: none; /* Background image of the divider when d="vertical" */
  --divider-background-repeat: no-repeat; /* Repeat rule of the background image */
  --divider-background-position: center; /* Position of the background image */
  --phantom-divider-thickness: 2rem; /* Thickness of the phantom divider used to grab mouse events */
}
```

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

### Fixed (Non-Resizable) Splitter

Source: https://context7.com/alesgenova/split-me/llms.txt

Creates a splitter where panels cannot be resized by the user. The `fixed` attribute is used to disable resizing, effectively making the dividers static. Initial sizes are still applied.

```html
<split-me n="2" sizes="0.3, 0.7" fixed>
  <div slot="0" class="fill">Fixed Left (30%)</div>
  <div slot="1" class="fill">Fixed Right (70%)</div>
</split-me>

<style>
  split-me {
    display: block;
    width: 100%;
    height: 400px;
  }
</style>
```

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

### Split-me Resize Event Interface

Source: https://context7.com/alesgenova/split-me/llms.txt

This TypeScript interface defines the structure of the `IResizeEvent` emitted by the split-me component when a divider is resized. It includes the normalized sizes, the index of the moved divider, and the original DOM event. This is useful for handling resize events in JavaScript applications.

```typescript
interface IResizeEvent {
  sizes: number[];                    // Normalized sizes [0.4, 0.6]
  divider: number;                    // Index of moved divider
  originalEvent: MouseEvent | TouchEvent;  // Original DOM event
}

// Usage
element.addEventListener('slotResized', (event: CustomEvent<IResizeEvent>) => {
  const { sizes, divider, originalEvent } = event.detail;
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.