Paneforge

https://github.com/svecosystem/paneforge
Admin
PaneForge provides Svelte components for creating resizable panes with features like nested groups,...
Tokens:12,373
Snippets:81
Trust Score:6.9
License:MIT
Update:2 months ago
Show doc for...
Tokens:
Raw
### Install Paneforge using npm

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/getting-started.md

This command installs the Paneforge library using the Node Package Manager (npm). Ensure you have Node.js and npm installed on your system.

```bash
npm install paneforge
```

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

### Develop Svelte Project with npm

Source: https://github.com/svecosystem/paneforge/blob/main/docs/README.md

Commands to start the development server for a Svelte project after installing dependencies. 'npm run dev' starts the server, and 'npm run dev -- --open' starts the server and automatically opens the application in a browser. These commands are typically run from the project's root directory.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

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

### Basic Horizontal Pane Group in Svelte

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/getting-started.md

This Svelte component demonstrates a basic horizontal pane group. It utilizes Paneforge's PaneGroup, Pane, and PaneResizer components to create two resizable panes. The default sizes are set to 50% each. Styling for the panes themselves is left to the user.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>Pane 1</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>Pane 2</Pane>
</PaneGroup>
```

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

### Svelte PaneResizer Usage Example

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane-resizer.md

Demonstrates how to integrate the PaneResizer component within a Svelte PaneGroup to enable horizontal resizing between two panes. It requires importing PaneGroup, Pane, and PaneResizer from 'svelte-pane'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "svelte-pane";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>Pane 1</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>Pane 2</Pane>
</PaneGroup>
```

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

### Basic Horizontal Pane Layout in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Demonstrates how to create a basic two-pane horizontal layout using PaneForge. This example includes a draggable resizer between the panes. It requires importing PaneGroup, Pane, and PaneResizer from the 'paneforge' library.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>
		<div class="p-4">Left Pane Content</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>
		<div class="p-4">Right Pane Content</div>
	</Pane>
</PaneGroup>

<style>
	:global([data-pane-group]) {
		display: flex;
		height: 100vh;
	}
	:global([data-pane]) {
		overflow: auto;
	}
	:global([data-pane-resizer]) {
		width: 4px;
		background: #e5e7eb;
		cursor: col-resize;
	}
	:global([data-pane-resizer]:hover) {
		background: #3b82f6;
	}
</style>
```

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

### Vertical Pane Layout with Size Constraints in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Illustrates creating vertically stacked panes with PaneForge, including constraints for minimum and maximum sizes. This example shows how to configure these properties on individual Pane components. It utilizes PaneGroup, Pane, and PaneResizer.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="vertical">
	<Pane defaultSize={30} minSize={20} maxSize={50}>
		<header class="bg-gray-100 p-4">
			<h1>Header (20-50% height)</h1>
		</header>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={70} minSize={50}>
		<main class="p-4">
			<p>Main content (minimum 50% height)</p>
		</main>
	</Pane>
</PaneGroup>

<style>
	:global([data-pane-group][data-direction="vertical"]) {
		flex-direction: column;
		height: 100vh;
	}
	:global([data-pane-resizer][data-direction="vertical"]) {
		height: 4px;
		width: 100%;
		cursor: row-resize;
	}
</style>
```

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

### Conditional Pane Rendering with Svelte

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/conditional-panes.md

This Svelte component demonstrates how to conditionally show or hide panes using state variables and the 'order' prop. It ensures that panes are rendered in the correct sequence when their visibility changes. Dependencies include the PaneGroup, Pane, and PaneResizer components from 'paneforge'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let showPaneOne = $state(true);
	let showPaneThree = $state(true);
</script>

<button variant="outline" onclick={() => (showPaneOne = !showPaneOne)}>
	{showPaneOne ? "Hide" : "Show"} Pane One
</button>
<button variant="outline" onclick={() => (showPaneThree = !showPaneThree)}>
	{showPaneThree ? "Hide" : "Show"} Pane Three
</button>

<PaneGroup direction="horizontal">
	{#if showPaneOne}
		<Pane defaultSize={1 / 3} order={1} />
		<PaneResizer />
	{/if}
	<Pane defaultSize={1 / 3} order={2} />
	{#if showPaneThree}
		<PaneResizer />
		<Pane defaultSize={1 / 3} order={3} />
	{/if}
</PaneGroup>
```

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

### Implement Custom Storage for Pane Layouts in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Provides a flexible way to manage pane layouts by implementing a custom storage mechanism. This example demonstrates saving and loading layouts via API calls, suitable for databases or other backend storage solutions. It requires defining `getItem` and `setItem` methods on a `PaneGroupStorage` object.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
	import type { PaneGroupStorage } from "paneforge";

	const customStorage: PaneGroupStorage = {
		getItem: async (name: string): Promise<string | null> => {
			// Load from your custom storage (API, IndexedDB, etc.)
			try {
				const response = await fetch(`/api/layouts/${name}`);
				if (response.ok) {
					return await response.text();
				}
			} catch (error) {
				console.error("Failed to load layout:", error);
			}
			return null;
		},
		setItem: async (name: string, value: string): Promise<void> => {
			// Save to your custom storage
			try {
				await fetch(`/api/layouts/${name}`, {
					method: "POST",
					headers: { "Content-Type": "application/json" },
					body: JSON.stringify({ layout: value }),
				});
			} catch (error) {
				console.error("Failed to save layout:", error);
			}
		},
	};
</script>

<PaneGroup
	direction="horizontal"
	autoSaveId="workspace-123"
	storage={customStorage}
>
	<Pane defaultSize={50}>Content 1</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>Content 2</Pane>
</PaneGroup>

```

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

### Persist Pane Layouts with Local Storage using PaneForge

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/persistent-layouts.md

This example demonstrates how to use the `autoSaveId` prop on the `PaneGroup` component to automatically save and restore pane layouts to local storage. It requires no explicit event handlers for saving.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal" autoSaveId="someGroupId">
	<Pane defaultSize={50} />
	<PaneResizer />
	<Pane defaultSize={50} />
</PaneGroup>
```

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

### Persist Pane Layouts with Cookies for SSR using PaneForge

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/persistent-layouts.md

This example shows how to persist pane layouts using cookies, which is SSR-friendly. It involves a server load function to read cookies and an `onLayoutChange` handler in the Svelte component to write to cookies.

```typescript
import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async (event) => {
	let layout = event.cookies.get("PaneForge:layout");
	if (layout) {
		layout = JSON.parse(layout);
	}

	return {
		layout,
	};
};
```

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let { data } = $props();

	function onLayoutChange(sizes: number[]) {
		document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}`;
	}
</script>

<PaneGroup direction="horizontal" {onLayoutChange}>
	<Pane defaultSize={data.layout ? data.layout[0] : 50} />
	<PaneResizer />
	<Pane defaultSize={data.layout ? data.layout[1] : 50} />
</PaneGroup>
```

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

### Apply TailwindCSS classes to Pane component

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/styling.md

This example demonstrates how to apply TailwindCSS utility classes directly to a Pane component for styling. It requires the 'paneforge' library and assumes TailwindCSS is configured in your project.

```svelte
<script lang="ts">
	import { Pane } from "paneforge";
</script>

<Pane class="h-12 w-full bg-blue-500 ">
	<!-- ... -->
</Pane>
```

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

### Collapsible Panes with Programmatic Control in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Demonstrates how to implement collapsible panes in PaneForge with buttons for programmatic collapse and expand functionality. This example uses `collapsible`, `collapsedSize`, `onCollapse`, `onExpand` props, and binds pane instances for control. It requires PaneGroup, Pane, and PaneResizer.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let leftPane: ReturnType<typeof Pane>;
	let rightPane: ReturnType<typeof Pane>;
	let leftCollapsed = $state(false);
	let rightCollapsed = $state(false);
</script>

<div class="controls mb-4">
	{#if leftCollapsed}
		<button onclick={() => leftPane.expand()} class="btn">
			Expand Left
		</button>
	{:else}
		<button onclick={() => leftPane.collapse()} class="btn">
			Collapse Left
		</button>
	{/if}

	{#if rightCollapsed}
		<button onclick={() => rightPane.expand()} class="btn">
			Expand Right
		</button>
	{:else}
		<button onclick={() => rightPane.collapse()} class="btn">
			Collapse Right
		</button>
	{/if}
</div>

<PaneGroup direction="horizontal">
	<Pane
		bind:this={leftPane}
		defaultSize={30}
		collapsible={true}
		collapsedSize={5}
		minSize={15}
		onCollapse={() => (leftCollapsed = true)}
		onExpand={() => (leftCollapsed = false)}
	>
		<div class="p-4">Left Sidebar</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={40}>
		<div class="p-4">Main Content</div>
	</Pane>
	<PaneResizer />
	<Pane
		bind:this={rightPane}
		defaultSize={30}
		collapsible={true}
		collapsedSize={5}
		minSize={15}
		onCollapse={() => (rightCollapsed = true)}
		onExpand={() => (rightCollapsed = false)}
	>
		<div class="p-4">Right Sidebar</div>
	</Pane>
</PaneGroup>
```

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

### Style PaneGroup using CSS data attributes

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/styling.md

This example shows how to define global styles for PaneForge components using data attributes. Styles are applied to elements with the [data-pane-group] attribute, targeting all PaneGroup components. This requires a CSS file (e.g., src/app.pcss) and importing it into your layout.

```css
[data-pane-group] {
	height: 3rem;
	width: 100%;
	background-color: #3182ce;
	color: #fff;
}
```

```svelte
<script lang="ts">
	import "../app.pcss";

	let { children } = $props();
</script>

{@render children()}
```

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

### Reactive Pane Sizing with Svelte

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/reactive-size.md

This Svelte component demonstrates how to make pane sizes reactive to window size changes. It imports necessary components from 'paneforge' and uses Svelte's state management ($state) and derived values ($derived) to calculate the minimum size for a pane based on the window's inner width. It includes a svelte:window directive to bind the innerWidth, ensuring the layout adjusts automatically.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let innerWidth = $state(0);
	let panelMin = $derived(Math.ceil((300 / innerWidth) * 100));
</script>

<svelte:window bind:innerWidth />
<PaneGroup direction="horizontal">
	<Pane defaultSize={panelMin} minSize={panelMin}>Left</Pane>
	<PaneResizer />
	<Pane>Right</Pane>
</PaneGroup>
```

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

### Style PaneGroup using global CSS classes

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/styling.md

This example demonstrates styling PaneGroup components with custom global CSS classes. It involves defining a class (e.g., '.pane-group') in a CSS file and then applying this class to the PaneGroup component in your Svelte code. This requires a CSS file (e.g., src/app.pcss) and importing it into your layout.

```css
.pane-group {
	height: 3rem;
	width: 100%;
	background-color: #3182ce;
	color: #fff;
}
```

```svelte
<script lang="ts">
	import "../app.pcss";

	let { children } = $props();
</script>

{@render children()}
```

```svelte
<script lang="ts">
	import { PaneGroup } from "paneforge";
</script>

<PaneGroup class="pane-group">Click me</PaneGroup>
```

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

### PaneGroup Storage Interface Definition (TypeScript)

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane-group.md

Defines the interface for custom storage objects used by PaneGroup. It requires methods for getting and setting items, enabling custom persistence logic beyond local storage.

```typescript
export type PaneGroupStorage = {
	/** Retrieves the item from storage */
	getItem(name: string): string | null;
	/** Sets the item to storage */
	setItem(name: string, value: string): void;
};
```

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

### Keyboard Navigation for Pane Resizing in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Configures keyboard-based resizing for a PaneGroup by setting the 'keyboardResizeBy' prop, allowing users to adjust pane sizes using arrow keys. The PaneResizer is made focusable by setting 'tabindex={0}'. This example requires PaneGroup, Pane, and PaneResizer components from 'paneforge' and demonstrates custom focus styling.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup
	direction="horizontal"
	keyboardResizeBy={5}
>
	<Pane defaultSize={50}>
		<div class="p-4">
			<p>Focus the resizer and use arrow keys to adjust by 5% increments</p>
			<p class="text-sm text-gray-600 mt-2">
				Use Left/Right arrow keys (horizontal) or Up/Down (vertical)
			</p>
		</div>
	</Pane>
	<PaneResizer tabindex={0} class="resizer-focusable" />
	<Pane defaultSize={50}>
		<div class="p-4">Right Pane</div>
	</Pane>
</PaneGroup>

<style>
	:global(.resizer-focusable:focus) {
		outline: 2px solid #3b82f6;
		outline-offset: 2px;
		background: rgba(59, 130, 246, 0.1);
	}
</style>
```

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

### Svelte Nested Pane Group Structure

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/nested-groups.md

This Svelte code defines a nested pane group layout using PaneForge components. It demonstrates how to arrange panes horizontally and vertically, with resizers for dynamic adjustment. Dependencies include the 'PaneGroup', 'Pane', and 'PaneResizer' components from the 'paneforge' library.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50} />
	<PaneResizer />
	<Pane defaultSize={50}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={50} />
			<PaneResizer />
			<Pane defaultSize={50} />
		</PaneGroup>
	</Pane>
</PaneGroup>
```

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

### Create Vertical Pane Group - Svelte

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/vertical-groups.md

This snippet demonstrates how to create a vertical group of panes using the PaneGroup, Pane, and PaneResizer components from the 'paneforge' library in Svelte. It sets up two panes with equal default sizes, separated by a resizer, allowing for vertical resizing.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="vertical">
	<Pane defaultSize={50} />
	<PaneResizer />
	<Pane defaultSize={50} />
</PaneGroup>
```

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

### Nested Pane Groups for Complex Layouts in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Shows how to create intricate layouts by nesting PaneGroups within Panes using the PaneForge library. This example demonstrates a horizontal primary split containing a vertical secondary split. It relies on PaneGroup, Pane, and PaneResizer components.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={40} minSize={25}>
		<aside class="sidebar p-4 bg-slate-800 text-white">
			<h2>Sidebar</h2>
			<nav>Navigation items...</nav>
		</aside>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={60}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={60}>
				<main class="p-4">
					<h1>Main Content Area</h1>
					<p>Your content here...</p>
				</main>
			</Pane>
			<PaneResizer />
			<Pane defaultSize={40} minSize={20}>
				<footer class="p-4 bg-gray-100">
					<h3>Bottom Panel</h3>
					<div>Console, logs, or additional info...</div>
				</footer>
			</Pane>
		</PaneGroup>
	</Pane>
</PaneGroup>
```

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

### Implement Collapsible Panes with Svelte

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/collapsible-panes.md

This Svelte code snippet demonstrates how to create collapsible panes using the PaneForge library. It utilizes `PaneGroup`, `Pane`, and `PaneResizer` components. The `collapsedSize` prop sets the size when collapsed, `collapsible` enables the feature, and `onCollapse`/`onExpand` callbacks manage state. A button is included to programmatically collapse or expand 'Pane One'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let paneOne: ReturnType<typeof Pane>;
	let collapsed = $state(false);
</script>

{#if collapsed}
	<button onclick={paneOne.expand}> Expand Pane One </button>
{:else}
	<button onclick={paneOne.collapse}> Collapse Pane One </button>
{/if}
<PaneGroup direction="horizontal">
	<Pane
		defaultSize={50}
		collapsedSize={5}
		collapsible={true}
		minSize={15}
		bind:this={paneOne}
		onCollapse={() => (collapsed = true)}
		onExpand={() => (collapsed = false)}
	/>
	<PaneResizer />
	<Pane defaultSize={50}> 
		<PaneGroup direction="vertical">
			<Pane defaultSize={50} />
			<PaneResizer />
			<Pane defaultSize={50} />
		</PaneGroup>
	</Pane>
</PaneGroup>
```

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

### Svelte: Horizontal Pane Group Structure

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/horizontal-groups.md

Defines the basic structure for a horizontal group of panes using PaneForge components in Svelte. It requires importing PaneGroup, Pane, and PaneResizer. The 'direction' attribute on PaneGroup is set to 'horizontal' to achieve the desired layout. Individual panes can have their 'defaultSize' specified.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50} />
	<PaneResizer />
	<Pane defaultSize={50} />
</PaneGroup>
```

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

### Svelte Pane Layout for Overflowing Content

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/examples/overflowing-panes.md

This Svelte code defines a hierarchical pane structure using Paneforge components. It demonstrates how to create horizontal and vertical pane groups, and within each pane, how to manage overflowing content using CSS classes like 'overflow-auto'. Ideal for applications requiring complex, resizable layouts.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>
		<div class="overflow-auto">
			<!-- ... content here-->
		</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>
		<PaneGroup direction="vertical">
			<Pane defaultSize={25}>
				<div class="overflow-auto">
					<!-- ... content here-->
				</div>
			</Pane>
			<PaneResizer />
			<Pane defaultSize={75}>
				<div class="overflow-auto">
					<!-- ... content here-->
				</div>
			</Pane>
		</PaneGroup>
	</Pane>
</PaneGroup>
```

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

### Create Svelte Project with sv CLI

Source: https://github.com/svecosystem/paneforge/blob/main/docs/README.md

Commands to create a new Svelte project. The first command creates a project in the current directory, while the second creates a project named 'my-app'. These commands utilize npx to execute the sv CLI.

```bash
npx sv create

npx sv create my-app
```

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

### Build Svelte Project for Production

Source: https://github.com/svecosystem/paneforge/blob/main/docs/README.md

Command to create a production-ready build of the Svelte application. This command bundles and optimizes the project assets for deployment. The output is typically placed in a 'dist' or 'build' directory.

```bash
npm run build
```

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

### Pane Component Props and Imperative API (Svelte)

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane.md

This snippet demonstrates the structure of the Pane component in Svelte, including its imported dependencies, props for configuration (like size, collapse behavior, and callbacks), and the imperative API exposed through a 'ref' prop for programmatic control. It covers various aspects from basic sizing to advanced state management.

```typescript
export type PaneAttributes = {
	/** Applied to every pane element. */
	"data-pane": "";
	/** The ID of the pane. */
	"data-pane-id": string;
	/** The ID of the pane's group. */
	"data-pane-group-id": string;
};

// Example of how props and methods might be defined and used (conceptual):
interface PaneProps {
	collapsedSize?: number;
	collapsible?: boolean;
	defaultSize?: number;
	maxSize?: number;
	minSize?: number;
	order?: number;
	onCollapse?: () => void;
	onExpand?: () => void;
	onResize?: (size: number, prevSize: number | undefined) => void;
	ref?: HTMLElement | null;
	this?: { // Imperative API
		collapse: () => void;
		expand: () => void;
		getId: () => string;
		getSize: () => number;
		isCollapsed: () => boolean;
		isExpanded: () => boolean;
		resize: (size: number) => void;
	};
}

// Usage within a Svelte component (conceptual):
// import { Pane } from '@svecod/kit';
// let paneRef;
// <Pane bind:this={paneRef} defaultSize={50} collapsible onResize={handleResize} />
// // Accessing imperative API:
// // paneRef?.collapse();
```

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

### Svelte Component Import for PaneForge Demo

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/index.md

This snippet demonstrates how to import the NestedGroupsDemo component from the PaneForge library within a Svelte application. It requires the '$lib/components/demos' path to be correctly configured in the Svelte project.

```svelte
<script>
	import { NestedGroupsDemo } from '$lib/components/demos'
</script>
```

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

### PaneGroup Component API

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane-group.md

Details about the PaneGroup component, including its props for layout management, direction, storage, and imperative control.

```APIDOC
## PaneGroup Component

### Description
A container for panes or nested pane groups. It is used to initialize and manage the layout of the panes.

### Props

#### `autoSaveId` (string | null)
- Optional - The id to use when storing the layout of the panes in local storage. If provided, the layout will be saved to local storage when it changes. If not provided, the layout will not be saved.
- Default: `null`

#### `direction` ('horizontal' | 'vertical')
- Required - The direction of the panes in the group. If set to `'horizontal'`, the panes will be arranged side by side. If set to `'vertical'`, the panes will be arranged one on top of the other.

#### `keyboardResizeBy` (number | null)
- Optional - The amount of space to add to the pane group when the keyboard resize event is triggered. If not provided, the default value is used.
- Default: `null`

#### `onLayoutChange` ((layout: number[]) => void | null)
- Optional - A callback that is called when the layout of the panes in the group changes. The layout is an array of numbers representing the size of each pane in pixels.
- Default: `null`

#### `storage` (PaneGroupStorage)
- Required - The storage object to use for saving the layout of the panes in the group.
  - Methods:
    - `getItem(name: string): string | null` - Retrieves the item from storage.
    - `setItem(name: string, value: string): void` - Sets the item to storage.

#### `ref` (HTMLElement | null)
- Optional - The underlying DOM element of the pane group. You can `bind` to this prop to get a reference to the element.

#### `this` (typeof PaneGroup)
- Required - Imperative API for the pane group. `bind` to this prop to get access to methods for controlling the pane group.
  - Methods:
    - `getLayout(): number[]` - Gets the layout of the pane group.
    - `setLayout(newLayout: number[]): void` - Sets the layout of the pane group.
    - `getId(): string` - Gets the ID of the pane group.

### Persisted Layouts/Storage

When the `PaneGroup` component is provided with an `autoSaveId` prop, it will automatically save the layout of the panes to local storage. If you want to use a different storage mechanism, you can provide a `storage` prop with a custom storage object that implements the `PaneGroupStorage` interface.

```ts
export type PaneGroupStorage = {
	/** Retrieves the item from storage */
	getItem(name: string): string | null;
	/** Sets the item to storage */
	setItem(name: string, value: string): void;
};
```

### Data Attributes

The following data attributes are available for the `PaneGroup` component:

```ts
export type PaneGroupAttributes = {
	/** Applied to every pane group element. */
	"data-pane-group": "";
	/** The direction of the pane group. */
	"data-direction": "horizontal" | "vertical";
	/** The ID of the pane group. */
	"data-pane-group-id": string;
};
```
```

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

### Monitor Pane Resize Events in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Demonstrates how to track and react to pane resize events in real-time using Svelte. The `onResize` prop on the `Pane` component provides the current and previous sizes, allowing for dynamic updates to UI elements or state variables.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let leftPaneSize = $state(33);
	let centerPaneSize = $state(34);
	let rightPaneSize = $state(33);

	function handleLeftResize(size: number, prevSize: number | undefined) {
		leftPaneSize = size;
		console.log(`Left pane resized from ${prevSize}% to ${size}%`);
	}

	function handleCenterResize(size: number, prevSize: number | undefined) {
		centerPaneSize = size;
	}

	function handleRightResize(size: number, prevSize: number | undefined) {
		rightPaneSize = size;
	}
</script>

<div class="status-bar mb-2 p-2 bg-gray-100 rounded">
	<span>Left: {leftPaneSize.toFixed(1)}%</span>
	<span class="mx-2">|</span>
	<span>Center: {centerPaneSize.toFixed(1)}%</span>
	<span class="mx-2">|</span>
	<span>Right: {rightPaneSize.toFixed(1)}%</span>
</div>

<PaneGroup direction="horizontal">
	<Pane defaultSize={33} onResize={handleLeftResize}>
		<div class="p-4">Left Panel</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={34} onResize={handleCenterResize}>
		<div class="p-4">Center Panel</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={33} onResize={handleRightResize}>
		<div class="p-4">Right Panel</div>
	</Pane>
</PaneGroup>

```

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

### SSR-Friendly Persistent Layouts with Cookies in SvelteKit

Source: https://context7.com/svecosystem/paneforge/llms.txt

Implements persistent pane layouts for server-side rendering (SSR) by using cookies. This prevents layout flicker on initial load. The server-side load function retrieves the layout from cookies, and the client-side component saves layout changes back to cookies.

```ts
// src/routes/+page.server.ts
import type { PageServerLoad } from "./$types";

export const load: PageServerLoad = async (event) => {
	let layout = event.cookies.get("app:pane-layout");
	if (layout) {
		layout = JSON.parse(layout);
	}

	return {
		layout: layout || null,
	};
};

```

```svelte
<!-- src/routes/+page.svelte -->
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let { data } = $props();

	function handleLayoutChange(sizes: number[]) {
		// Save to cookie on every layout change
		document.cookie = `app:pane-layout=${JSON.stringify(sizes)}; path=/; max-age=31536000`;
	}
</script>

<PaneGroup direction="horizontal" onLayoutChange={handleLayoutChange}>
	<Pane defaultSize={data.layout?.[0] ?? 33}>
		<div class="panel">Panel 1</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={data.layout?.[1] ?? 34}>
		<div class="panel">Panel 2</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={data.layout?.[2] ?? 33}>
		<div class="panel">Panel 3</div>
	</Pane>
</PaneGroup>

<!-- No layout shift on initial page load because sizes come from server -->
```

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

### Custom Resizer Styling with Drag Feedback in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Illustrates creating a custom-styled resizer for a PaneGroup, providing visual feedback when the user is actively dragging it. It uses the 'onDraggingChange' prop on PaneResizer to update a local state variable, which in turn applies conditional CSS classes for styling. Dependencies include PaneGroup, Pane, and PaneResizer from 'paneforge'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let isDragging = $state(false);
</script>

<PaneGroup direction="horizontal">
	<Pane defaultSize={50}>
		<div class="p-4">Left Content</div>
	</Pane>

	<PaneResizer
		onDraggingChange={(dragging) => (isDragging = dragging)}
		class={isDragging ? "resizer resizer-active" : "resizer"}
	>
		<div class="resizer-handle">
			<div class="resizer-line"></div>
			<div class="resizer-line"></div>
			<div class="resizer-line"></div>
		</div>
	</PaneResizer>

	<Pane defaultSize={50}>
		<div class="p-4">Right Content</div>
	</Pane>
</PaneGroup>

<style>
	:global(.resizer) {
		width: 12px;
		background: transparent;
		position: relative;
		transition: background 0.2s;
	}

	:global(.resizer:hover),
	:global(.resizer-active) {
		background: rgba(59, 130, 246, 0.1);
	}

	:global(.resizer-handle) {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2px;
	}

	:global(.resizer-line) {
		width: 2px;
		height: 20px;
		background: #94a3b8;
		border-radius: 1px;
	}

	:global(.resizer:hover .resizer-line),
	:global(.resizer-active .resizer-line) {
		background: #3b82f6;
	}
</style>
```

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

### Programmatic Pane Group Layout Management in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Shows how to programmatically access and modify the layout of a PaneGroup using its 'getLayout' and 'setLayout' methods. It binds the PaneGroup instance to a local variable 'paneGroup' and uses buttons to trigger layout updates, displaying the current layout in real-time. This requires PaneGroup, Pane, and PaneResizer components from 'paneforge'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let paneGroup: ReturnType<typeof PaneGroup>;
	let currentLayout = $state<number[]>([]);

	function updateLayout() {
		currentLayout = paneGroup.getLayout();
	}

	function resetLayout() {
		paneGroup.setLayout([33.33, 33.33, 33.34]);
	}

	function setCustomLayout() {
		paneGroup.setLayout([20, 60, 20]);
	}
</script>

<div class="controls mb-4 space-x-2">
	<button onclick={updateLayout} class="btn">Get Current Layout</button>
	<button onclick={resetLayout} class="btn">Reset to Equal</button>
	<button onclick={setCustomLayout} class="btn">Set 20-60-20</button>
</div>

{#if currentLayout.length > 0}
	<div class="mb-4 p-3 bg-gray-100 rounded">
		<strong>Current Layout:</strong>
		{currentLayout.map(size => `${size.toFixed(2)}%`).join(' / ')}
	</div>
{/if}

<PaneGroup
	bind:this={paneGroup}
	direction="horizontal"
	onLayoutChange={(layout) => (currentLayout = layout)}
>
	<Pane defaultSize={33.33}>
		<div class="p-4">Pane 1</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={33.33}>
		<div class="p-4">Pane 2</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={33.34}>
		<div class="p-4">Pane 3</div>
	</Pane>
</PaneGroup>
```

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

### Conditional Panes with Order Property in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Demonstrates how to conditionally render panes in a horizontal PaneGroup while maintaining a consistent layout using the 'order' property. This ensures panes maintain their intended positions even when hidden or shown dynamically. It requires the PaneGroup, Pane, and PaneResizer components from 'paneforge'.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";

	let showMiddlePane = $state(true);
</script>

<label class="mb-4 flex items-center">
	<input type="checkbox" bind:checked={showMiddlePane} class="mr-2" />
	Show Middle Pane
</label>

<PaneGroup direction="horizontal" autoSaveId="conditional-layout">
	<Pane defaultSize={33} order={1}>
		<div class="p-4 bg-blue-50">Pane 1 (order: 1)</div>
	</Pane>
	<PaneResizer />

	{#if showMiddlePane}
		<Pane defaultSize={34} order={2}>
			<div class="p-4 bg-green-50">Pane 2 (order: 2)</div>
		</Pane>
		<PaneResizer />
	{/if}

	<Pane defaultSize={33} order={3}>
		<div class="p-4 bg-purple-50">Pane 3 (order: 3)</div>
	</Pane>
</PaneGroup>

<!-- The order prop ensures Pane 3 stays in correct position even when Pane 2 is hidden -->
```

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

### Save Pane Layouts with LocalStorage in Svelte

Source: https://context7.com/svecosystem/paneforge/llms.txt

Automatically saves and restores pane layouts using the browser's localStorage. This requires no additional dependencies beyond PaneForge. The layout is associated with a unique `autoSaveId` and stored with a prefixed key.

```svelte
<script lang="ts">
	import { PaneGroup, Pane, PaneResizer } from "paneforge";
</script>

<PaneGroup direction="horizontal" autoSaveId="editor-layout">
	<Pane defaultSize={25} minSize={15}>
		<div class="file-tree p-4">
			<h3>File Explorer</h3>
			<!-- File tree content -->
		</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={50}>
		<div class="editor p-4">
			<h3>Code Editor</h3>
			<!-- Editor content -->
		</div>
	</Pane>
	<PaneResizer />
	<Pane defaultSize={25} minSize={15}>
		<div class="preview p-4">
			<h3>Preview</h3>
			<!-- Preview content -->
		</div>
	</Pane>
</PaneGroup>

<!-- Layout is automatically saved to localStorage with key: "paneforge:editor-layout" -->
<!-- When user returns, their custom layout is automatically restored -->
```

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

### PaneResizer TypeScript Data Attributes

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane-resizer.md

Defines the TypeScript type for the data attributes available on the PaneResizer component. These attributes provide information about the pane group's direction, IDs, and the resizer's active and enabled states, useful for styling and programmatic access.

```typescript
export type PaneResizerAttributes = {
	/** The direction of the pane group the handle belongs to. */
	"data-direction": "horizontal" | "vertical";
	/** The ID of the pane group the handle belongs to. */
	"data-pane-group-id": string;
	/** Whether the resize handle is active or not. */
	"data-active"?: "pointer" | "keyboard";
	/** Whether the resize handle is enabled or not. */
	"data-enabled"?: boolean;
	/** The ID of the resize handle. */
	"data-pane-resizer-id": string;
	/** Present on all resizer elements */
	"data-pane-resizer": "";
};
```

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

### PaneGroup Data Attributes Definition (TypeScript)

Source: https://github.com/svecosystem/paneforge/blob/main/docs/src/content/components/pane-group.md

Defines the available data attributes for the PaneGroup component. These attributes provide semantic information about the pane group's direction and ID, useful for styling and testing.

```typescript
export type PaneGroupAttributes = {
	/** Applied to every pane group element. */
	"data-pane-group": "";
	/** The direction of the pane group. */
	"data-direction": "horizontal" | "vertical";
	/** The ID of the pane group. */
	"data-pane-group-id": string;
};
```
Tokens:
Raw