### Install @window-splitter/react

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/install/page.mdx

Choose the package manager you prefer to install the library.

```bash
npm install @window-splitter/react
```

```bash
yarn add @window-splitter/react
```

```bash
pnpm add @window-splitter/react
```

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

### Install @window-splitter/solid

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/solid/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @window-splitter/solid
yarn add @window-splitter/solid
pnpm add @window-splitter/solid
```

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

### Install @window-splitter/web-component

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/web-component/README.md

Install the web component package using npm.

```bash
npm install @window-splitter/web-component
```

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

### Install @window-splitter/svelte

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/svelte/README.md

Use npm to install the library. This is the first step before using the Svelte components.

```bash
npm install @window-splitter/svelte
```

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

### Install @window-splitter/state

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/state/README.md

Install the package using npm, yarn, or pnpm.

```bash
npm install @window-splitter/state
yarn add @window-splitter/state
pnpm add @window-splitter/state
```

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

### Install @window-splitter/vue

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/vue/README.md

Use npm to install the library. This is the first step before integrating the component into your Vue project.

```bash
npm install @window-splitter/vue
```

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

### Imperative PanelGroup Example

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/imperative/page.mdx

Use the `handle` prop on PanelGroup to access methods for getting and setting panel sizes programmatically. This is useful for dynamic layout adjustments.

```tsx
import {
  ColorfulPanel,
  ColorfulPanelGroup,
  ColorfulPanelResizer,
} from "../../../../Components/ColorfulPanels";
import { ImperativeGroupExample } from "../../../../Components/ImperativeGroupExample";

function ImperativeGroupExample() {
  return (
    <ColorfulPanelGroup
      id="imperative-group"
      style={{ height: "300px" }}
      defaultSizes={[50, 50]} 
    >
      <ColorfulPanel id="panel-1">
        <div className="p-4">
          <ImperativePanelExample panelId="panel-1" />
        </div>
      </ColorfulPanel>
      <ColorfulPanelResizer />
      <ColorfulPanel id="panel-2">
        <div className="p-4">
          <ImperativePanelExample panelId="panel-2" />
        </div>
      </ColorfulPanel>
    </ColorfulPanelGroup>
  );
}

```

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

### Run Development Server with Bun

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/README.md

Use this command to start the development server using Bun. Open http://localhost:3000 in your browser to view the application.

```bash
bun dev
```

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

### Run Development Server with npm

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/README.md

Use this command to start the development server using npm. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
```

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

### Static at Rest Example with React Components

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/static-at-rest/page.mdx

This example demonstrates how to implement static-at-rest panels using the `@window-splitter/react` library. Panels with `isStaticAtRest` will not resize with the container.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function StaticAtRestExample() {
  return (
    <PanelGroup>
      <Panel min="80px" max="200px" isStaticAtRest />
      <PanelResizer />
      <Panel min="130px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Vertical Splitter Example

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/simple/page.mdx

Shows how to create a vertical layout by setting the 'orientation' prop to 'vertical'. Panels can be configured with 'displayDimensions' to control their expansion.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function VerticalExample() {
  return (
    <PanelGroup orientation="vertical">
      <Panel min="50px" max="300px" />
      <PanelResizer />
      <Panel min="50px" />
    </PanelGroup>
  );
}
```

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

### Run Development Server with Yarn

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/README.md

Use this command to start the development server using Yarn. Open http://localhost:3000 in your browser to view the application.

```bash
yarn dev
```

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

### Basic State Machine Setup and Events

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/state/README.md

Initialize the state machine and register panels and handles. Set the group size and actual item sizes after initial render. Send drag events to update the layout.

```tsx
import {
  groupMachine,
  initializePanel,
  initializePanelHandleData,
} from "@window-splitter/state";

// Setup the state machine
const actor = groupMachine({ groupId: "group" });

// Register the panels with the state machine
actor.send({
  type: "registerPanel",
  data: initializePanel({ id: "panel-1" }),
});
actor.send({
  type: "registerPanelHandle",
  data: initializePanelHandleData({ id: "resizer-1", size: "10px" }),
});
actor.send({
  type: "registerPanel",
  data: initializePanel({ id: "panel-2" }),
});

// Set the size of the group, typically measured in the browser after the initial render
actor.send({ type: "setSize", size: { width: 500, height: 200 } });
// The state machine relies on css grid to calculate the initial sizes of the panels
// This next action would be sent after measuring the initial sizes rendered by the browser
actor.send({
  type: "setActualItemsSize",
  childrenSizes: {
    "panel-1": { width: 245, height: 200 },
    "panel-2": { width: 245, height: 200 },
  },
});

// Send some events to drag a handle
actor.send({ type: "dragHandleStart", handleId: "resizer-1" });
actor.send({
  type: "dragHandle",
  handleId: "resizer-1",
  value: dragHandlePayload({ delta: 10 }),
});
actor.send({ type: "dragHandleEnd", handleId: "resizer-1" });
```

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

### Nested Panel Layout Example

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/nested/page.mdx

This example shows how to nest PanelGroups to create a complex layout with multiple levels of resizable panels. It includes horizontal and vertical nesting.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function NestedExample() {
  return (
    <PanelGroup
      orientation="horizontal"
      style={{
        border: "1px solid rgba(0, 0, 0, 0.3)",
        borderRadius: 12,
        height: 400,
      }}
    >
      <Panel min="10%">left</Panel>
      <PanelResizer />
      <Panel min="10%">
        <PanelGroup orientation="vertical">
          <Panel min="10%">top</Panel>
          <PanelResizer />
          <Panel min="10%">
            <PanelGroup orientation="horizontal">
              <Panel min="20%">left</Panel>
              <PanelResizer />
              <Panel min="20%">right</Panel>
            </PanelGroup>
          </Panel>
        </PanelGroup>
      </Panel>
      <PanelResizer />
      <Panel min="10%">right</Panel>
    </PanelGroup>
  );
}
```

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

### Run Development Server with pnpm

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/README.md

Use this command to start the development server using pnpm. Open http://localhost:3000 in your browser to view the application.

```bash
pnpm dev
```

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

### Default Collapsed Panel

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/collapsible/page.mdx

To have a panel start in a collapsed state, use the `defaultCollapsed` prop. This is useful for panels that should be hidden initially.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function CollapsibleExample() {
  return (
    <PanelGroup>
      <Panel
        collapsible
        defaultCollapsed={true}
        collapsedSize="100px"
        min="130px"
        max="400px"
      />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Imperative Panel Example

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/imperative/page.mdx

Access the `handle` prop on a Panel to programmatically get/set its size, collapse, or expand it. This allows for fine-grained control over individual panels within a group.

```tsx
import {
  ColorfulPanel,
  ColorfulPanelGroup,
  ColorfulPanelResizer,
} from "../../../../Components/ColorfulPanels";
import { ImperativePanelExample } from "../../../../Components/ImperativePanelExample";

function ImperativePanelExample() {
  return (
    <ColorfulPanelGroup
      id="imperative-panel"
      style={{ height: "300px" }}
      defaultSizes={[50, 50]} 
    >
      <ColorfulPanel id="panel-1">
        <div className="p-4">
          <ImperativePanelExample panelId="panel-1" />
        </div>
      </ColorfulPanel>
      <ColorfulPanelResizer />
      <ColorfulPanel id="panel-2">
        <div className="p-4">
          <ImperativePanelExample panelId="panel-2" />
        </div>
      </ColorfulPanel>
    </ColorfulPanelGroup>
  );
}

```

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

### Basic Usage of @window-splitter/react

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/install/page.mdx

Demonstrates a simple layout with two collapsible panels and a resizer. Ensure you have imported PanelGroup, Panel, and PanelResizer.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function Example() {
  return (
    <PanelGroup>
      <Panel min="130px" max="400px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Basic Panel Group Usage in SolidJS

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/solid/README.md

Demonstrates the basic structure for creating a panel group with resizable panels. Specify pixel or percentage based constraints for individual panels.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/solid";

function Example() {
  return (
    <PanelGroup>
      <Panel min="130px" max="400px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Basic HTML Structure for Window Splitter

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/web-component/README.md

Use the defined custom elements to create a basic window splitter layout with two panels and a resizer. Panel constraints can be set using 'min' and 'max' attributes.

```html
<window-panel-group>
  <window-panel min="130px" max="400px"></window-panel>
  <window-panel-resizer></window-panel-resizer>
  <window-panel min="130px"></<window-panel>
</window-panel-group>
```

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

### Prepare Items: Convert to Pixels

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/how-it-works/page.mdx

During the preparation phase, panel sizes are converted to pixels to simplify mathematical operations for layout updates.

```css
grid-template-columns: 500px 1px 300px;
```

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

### Basic Vue Usage of PanelGroup

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/vue/README.md

Demonstrates how to set up a basic window splitter layout in a Vue component using PanelGroup, Panel, and PanelResizer. Panels can have minimum and maximum size constraints.

```vue
<script setup>
import { PanelGroup } from "@window-splitter/vue";
</script>

<template>
  <PanelGroup>
    <Panel min="130px" max="400px" />
    <PanelResizer />
    <Panel min="130px" />
  </PanelGroup>
</template>
```

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

### Utilities

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/state/README.md

Helper functions for interacting with the state machine and managing splitter data.

```APIDOC
## Utilities

### `buildTemplate`
Builds the CSS grid template string based on the current item sizes and orientation.

### `getCollapsiblePanelForHandleId`
Finds the collapsible panel associated with a given handle ID.

### `getGroupSize`
Calculates the total size of the group in pixels.

### `getPanelWithId`
Retrieves a panel object by its ID.

### `getUnitPercentageValue`
Converts a `Unit` type (e.g., '50%') to its pixel equivalent based on the group size.

### `getUnitPixelValue`
Converts a `Unit` type (e.g., '100px') to its pixel equivalent.

### `initializePanel`
Creates an initial panel data object for registration.
- **id** (string) - Required - The unique identifier for the panel.
- **size** (Unit | number) - Optional - The initial size of the panel.

### `InitializePanelHandleData`
Creates initial data for a panel handle for registration.
- **id** (string) - Required - The unique identifier for the handle.
- **size** (Unit | number) - Optional - The initial size of the handle.

### `isPanelData`
Checks if a given object conforms to the `Panel` data structure.

### `isPanelHandle`
Checks if a given object conforms to the `PanelHandle` data structure.

### `parseUnit`
Parses a unit string (e.g., '50%', '100px') into a structured `Unit` object.

### `prepareSnapshot`
Prepares a snapshot of the current state machine's layout, useful for saving and restoring states.
```

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

### Basic Horizontal Splitter

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/simple/page.mdx

Demonstrates a simple horizontal layout with two panels and a resizer. Configure panel sizes using 'min' and 'max' props.

```tsx
import {
  ColorfulPanel,
  ColorfulPanelGroup,
  ColorfulPanelResizer,
} from "../../../../Components/ColorfulPanels";
import { CodeBlock } from "mdxts/components";

<ColorfulPanelGroup style={{ height: 200 }}>
  <ColorfulPanel color="green" min="130px" max="400px" id="1" />
  <ColorfulPanelResizer id="2" />
  <ColorfulPanel color="red" min="130px" id="3" />
</ColorfulPanelGroup>

<div className="my-6">
  <CodeBlock
    source="../../../../examples/HeaderExample.tsx"
    allowErrors={true}
    showToolbar={false}
  />
</div>
```

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

### Initial CSS Grid Layout

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/how-it-works/page.mdx

Defines the initial structure of panels using CSS Grid, specifying minimum and maximum sizes for columns.

```css
grid-template-columns: minmax(100px, 1fr) 1px minmax(100px, 300px);
```

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

### groupMachine

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/state/README.md

The main state machine function to create a window splitter instance. It takes configuration options and returns an actor that can be used to send events to the state machine.

```APIDOC
## groupMachine

### Description
Initializes and returns the state machine actor for managing a window splitter group.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **groupId** (string) - Required - The unique identifier for the window splitter group.
- **initialItems** (Array<Panel | PanelHandle>) - Optional - An array of initial panels and handles to configure the splitter.
- **orientation** (string) - Optional - The orientation of the splitter, either 'horizontal' or 'vertical'. Defaults to 'horizontal'.

### Request Example
```javascript
import { groupMachine } from '@window-splitter/state';

const actor = groupMachine({ groupId: 'my-splitter', orientation: 'vertical' });
```

### Response
An XState Actor object that allows sending events to the state machine.

#### Success Response (200)
An actor object.

#### Response Example
```json
{
  "send": "function",
  "subscribe": "function"
}
```
```

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

### Animated Collapse/Expand

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/collapsible/page.mdx

Animate the collapse and expand transitions using the `collapseAnimation` prop. You can specify easing functions and durations for custom animations.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function CollapsibleExample() {
  return (
    <PanelGroup>
      <Panel
        min="150px"
        max="400px"
        collapsible
        collapsedSize="100px"
        collapseAnimation={{
          easing: "ease-in-out",
          duration: 1000,
        }}
      />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Register Web Component Elements

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/web-component/README.md

Import and define the necessary custom elements for the window splitter components before using them in your HTML.

```javascript
import {
  Panel,
  PanelGroup,
  PanelResizer,
} from "@window-splitter/web-component";

customElements.define("window-panel-group", PanelGroup);
customElements.define("window-panel", Panel);
customElements.define("window-panel-resizer", PanelResizer);
```

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

### Static at Rest Panel Behavior (Pixel-Based)

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/static-at-rest/page.mdx

Use the `isStaticAtRest` prop to ensure panels maintain their pixel-based sizes even when the container is resized. This is useful for fixed-layout components.

```tsx
import {
  ColorfulPanel,
  ColorfulPanelGroup,
  ColorfulPanelResizer,
} from "../../../../Components/ColorfulPanels";
import { CodeBlock } from "mdxts/components";

<div className="overflow-scroll my-6" style={{ resize:'horizontal' }}>
  <ColorfulPanelGroup style={{ height: 200 }}>
    <ColorfulPanel color="green" min="80px" max="200px" id="1" isStaticAtRest />
    <ColorfulPanelResizer id="2" />
    <ColorfulPanel color="red" min="130px" id="3" />
    <ColorfulPanelResizer id="4" />
    <ColorfulPanel color="blue" min="130px" id="5" />
  </ColorfulPanelGroup>
</div>
```

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

### Basic Svelte PanelGroup Usage

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/svelte/README.md

Import and use the PanelGroup component in your Svelte application. Configure individual panels with minimum and maximum size constraints.

```svelte
<script>
  import { PanelGroup } from '@window-splitter/svelte';
</script>

<PanelGroup>
  <Panel min="130px" max="400px" />
  <PanelResizer />
  <Panel min="130px" />
</PanelGroup>
```

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

### Update Layout: Apply Deltas

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/how-it-works/page.mdx

This step applies the user's drag interactions or simulated interactions for collapsing/expanding panels, modifying the pixel-based sizes.

```css
grid-template-columns: 490px 1px 310px;
```

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

### Basic Collapsible Panel

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/collapsible/page.mdx

Mark a panel as collapsible using the `collapsible` prop. The `collapsedSize` prop controls the size when collapsed. Panels can also have `min` and `max` size constraints.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function CollapsibleExample() {
  return (
    <PanelGroup>
      <Panel collapsible collapsedSize="100px" min="150px" max="400px" />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Default Panel Behavior (Percentage-Based)

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/static-at-rest/page.mdx

Panels scale proportionally with the container by default. This behavior is suitable for most responsive layouts.

```tsx
import {
  ColorfulPanel,
  ColorfulPanelGroup,
  ColorfulPanelResizer,
} from "../../../../Components/ColorfulPanels";
import { CodeBlock } from "mdxts/components";

<div className="overflow-scroll my-6" style={{ resize:'horizontal' }}>
  <ColorfulPanelGroup style={{ height: 200 }}>
    <ColorfulPanel color="green" min="80px" max="200px" id="1" />
    <ColorfulPanelResizer id="2" />
    <ColorfulPanel color="red" min="130px" id="3" />
    <ColorfulPanelResizer id="4" />
    <ColorfulPanel color="blue" min="130px" id="5" />
  </ColorfulPanelGroup>
</div>
```

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

### Events

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/state/README.md

Events that can be sent to the state machine actor to control the window splitter.

```APIDOC
## Events

### registerPanel
Registers a new panel with the state machine.

### registerDynamicPanel
Registers a new panel after the initial render.

### unregisterPanel
Unregisters a panel from the state machine.

### registerPanelHandle
Registers a new panel handle with the state machine.

### unregisterPanelHandle
Unregisters a panel handle from the state machine.

### setSize
Sets the overall size of the group.
- **size** (object) - Required - An object containing `width` and `height` properties.

### setActualItemsSize
Sets the actual rendered sizes of the items within the group.
- **childrenSizes** (object) - Required - An object mapping item IDs to their `width` and `height`.

### setOrientation
Sets the orientation of the group.
- **orientation** (string) - Required - Either 'horizontal' or 'vertical'.

### dragHandleStart
Initiates a drag operation on a panel handle.
- **handleId** (string) - Required - The ID of the handle to start dragging.

### dragHandle
Updates the layout during a drag operation.
- **handleId** (string) - Required - The ID of the handle being dragged.
- **value** (object) - Required - Payload containing drag details, e.g., `{ delta: number }`.

### dragHandleEnd
Ends a drag operation.
- **handleId** (string) - Required - The ID of the handle that was dragged.

### collapsePanel
Collapses a specified panel.
- **panelId** (string) - Required - The ID of the panel to collapse.

### expandPanel
Expands a specified panel.
- **panelId** (string) - Required - The ID of the panel to expand.

### setPanelPixelSize
Sets the size of a panel in pixels.
- **panelId** (string) - Required - The ID of the panel.
- **size** (number) - Required - The desired pixel size for the panel.
```

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

### Custom Collapse Animation with Easing Function

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/collapsible/page.mdx

Use the `collapseAnimation` prop to provide a custom easing function for the collapse animation. The easing function takes a progress value `t` between 0 and 1 and returns an altered progress value. Libraries like framer-motion or d3-ease can be used to create these functions.

```tsx
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";
import { spring } from "framer-motion";
import { useMemo } from "react";

function CollapsibleExample() {
  const springFn = useMemo(() => {
    return spring({
      keyframes: [0, 1],
      velocity: 0.0,
      stiffness: 100,
      damping: 10,
      mass: 1.0,
      duration: 1000,
    });
  }, []);

  return (
    <PanelGroup>
      <Panel
        min="150px"
        max="400px"
        collapsible
        collapsedSize="100px"
        collapseAnimation={{
          easing: (t) => springFn.next(t * 1000).value,
          duration: springFn.calculatedDuration ?? 1000,
        }}
      />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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

### Conditionally Render Panels

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/conditional/page.mdx

Use state to control the rendering of panels and their associated resizers. Ensure all panels intended to be part of the group have an `id` prop.

```tsx
import { useState } from "react";
import { Panel, PanelGroup, PanelResizer } from "@window-splitter/react";

export function ConditionalExample() {
  const [isThirdPanelRendered, setIsThirdPanelRendered] = useState(false);

  const togglePanel = () => setIsThirdPanelRendered(!isThirdPanelRendered);
  const closePanel = () => setIsThirdPanelRendered(false);

  return (
    <>
      <button onClick={togglePanel}>
        {isThirdPanelRendered ? "Hide" : "Show"} extra panel
      </button>

      <PanelGroup>
        <Panel id="panel-1" min="100px">
          1
        </Panel>
        <PanelResizer id="resizer-1" />
        <Panel id="panel-2" min="100px">
          2
        </Panel>
        {isThirdPanelRendered && (
          <>
            <PanelResizer id="resizer-2" />
            <Panel id="panel-3" min="100px">
              <button onClick={closePanel}>close</button>
            </Panel>
          </>
        )}
      </PanelGroup>
    </>
  );
}
```

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

### Commit Layout: Convert Back to Grid Format

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/how-it-works/page.mdx

After updates, sizes are converted back into a format compatible with CSS Grid, allowing the browser to manage the layout efficiently and maintain constraints.

```css
grid-template-columns: minmax(100px, min(calc(0.06117 * (100% - 1px)), 100%)) 1px minmax(100px, min(calc(0.0387 * (100% - 1px)), 300px));
```

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

### Controlled Collapsible Panel

Source: https://github.com/hipstersmoothie/window-splitter/blob/main/packages/docs/src/app/docs/examples/collapsible/page.mdx

Manage the collapsed state of a panel programmatically using the `collapsed` and `onCollapseChange` props. This allows for external control over the panel's visibility.

```tsx
import { useState } from "react";
import { PanelGroup, Panel, PanelResizer } from "@window-splitter/react";

function CollapsibleExample() {
  const [collapsed, setCollapsed] = useState(true);

  const onCollapseChange = (isCollapsed: boolean) => {
    // Do whatever logic you want here.
    // If you don't change the collapsed state, the panel
    // will not collapse.
    const shouldSetValue = true;

    if (shouldSetValue) {
      setCollapsed(isCollapsed);
    }
  };

  return (
    <PanelGroup>
      <Panel
        min="150px"
        max="400px"
        collapsible
        collapsedSize="100px"
        collapsed={collapsed}
        onCollapseChange={onCollapseChange}
      />
      <PanelResizer />
      <Panel min="130px" />
    </PanelGroup>
  );
}
```

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