more

packages/paneforge/README.md

@@ -1,58 +1,23 @@
-# create-svelte
+# PaneForge
 
-Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+Resizable pane components for Svelte.
 
-Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
-
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+## Installation
 
 ```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+npm install paneforge
 ```
 
-Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+## Usage
 
-## Building
+```svelte
+<script lang="ts">
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
+</script>
 
-To build your library:
-
-```bash
-npm run package
-```
-
-To create a production version of your showcase app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
-
-## Publishing
-
-Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
-
-To publish your library to [npm](https://www.npmjs.com):
-
-```bash
-npm publish
+<PaneGroup direction="horizontal">
+	<Pane defaultSize={50}>Pane 1</Pane>
+	<PaneResizer />
+	<Pane defaultSize={50}>Pane 2</Pane>
+</PaneGroup>
 ```

packages/paneforge/package.json

@@ -12,10 +12,10 @@
 	},
 	"scripts": {
 		"dev": "pnpm watch",
-		"build": "vite build && npm run package",
+		"build": "pnpm package",
 		"preview": "vite preview",
 		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
+		"prepublishOnly": "pnpm run package",
 		"test": "npm run test:integration && npm run test:unit",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",

sites/docs/content/components/pane-group.md

@@ -101,7 +101,7 @@ The following data attributes are available for the `PaneGroup` component:
 ```ts
 export type PaneGroupAttributes = {
 	/** Applied to every pane group element. */
-	"data-pane-group": string;
+	"data-pane-group": "";
 	/** The direction of the pane group. */
 	"data-direction": "horizontal" | "vertical";
 	/** The ID of the pane group. */

sites/docs/content/components/pane-resizer.md

@@ -67,5 +67,7 @@ export type PaneResizerAttributes = {
 	"data-enabled"?: boolean;
 	/** The ID of the resize handle. */
 	"data-pane-resizer-id": string;
+	/** Present on all resizer elements */
+	"data-pane-resizer": "";
 };
 ```

sites/docs/content/components/pane.md

@@ -113,7 +113,7 @@ The following data attributes are available for the `Pane` component:
 ```ts
 export type PaneAttributes = {
 	/** Applied to every pane element. */
-	"data-pane": string;
+	"data-pane": "";
 	/** The ID of the pane. */
 	"data-pane-id": string;
 	/** The ID of the pane's group. */

sites/docs/content/examples/collapsible-panes.md

@@ -7,34 +7,38 @@ description: An example of how to create collapsible panes.
 	import { CollapsibleDemo } from '$lib/components/demos'
 </script>
 
+You can use the `collapsedSize` and `collapsible` props to create collapsible panes. The `collapsedSize` prop sets the size of the pane when it is in a collapsed state, and the `collapsible` prop determines whether the pane can be collapsed.
+
+You can also use the `onCollapse` and `onExpand` callbacks to perform actions when the pane is collapsed or expanded, along with the `pane` prop to get a reference to the `Pane` component's API to programmatically collapse or expand the pane.
+
 <div class="flex flex-col gap-4">
 	<CollapsibleDemo />
 </div>
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">
 	import { PaneGroup, Pane, PaneResizer, type PaneAPI } from "paneforge";
 
-	let paneOneApi: PaneAPI;
+	let paneOne: PaneAPI;
 	let collapsed = false;
 </script>
 
 {#if collapsed}
 	<button
 		on:click={() => {
-			paneOneApi?.expand();
+			paneOne.expand();
 		}}
 	>
 		Expand Pane One
 	</button>
 {:else}
 	<button
 		on:click={() => {
-			paneOneApi?.collapse();
+			paneOne.collapse();
 		}}
 	>
 		Collapse Pane One
@@ -46,7 +50,7 @@ Here's a high-level structure of the example above:
 		collapsedSize={5}
 		collapsible={true}
 		minSize={15}
-		bind:api={paneOneApi}
+		bind:pane={paneOne}
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
 	/>

sites/docs/content/examples/conditional-panes.md

@@ -7,13 +7,15 @@ description: An example of how to handle conditional panes.
 	import { ConditionalDemo } from '$lib/components/demos'
 </script>
 
+When conditionally rendering panes, you need to use the `order` prop to ensure the panes are rendered in the correct order when they are displayed.
+
 <div class="flex flex-col gap-4">
 	<ConditionalDemo />
 </div>
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">

sites/docs/content/examples/horizontal-groups.md

@@ -11,7 +11,7 @@ description: An example of a horizontal group of panes.
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">

sites/docs/content/examples/nested-groups.md

@@ -11,7 +11,7 @@ description: An example of nesting groups of panes for more complex layouts.
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">

sites/docs/content/examples/overflowing-panes.md

@@ -11,7 +11,7 @@ description: An example of how panes with overflowing content are handled.
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">

sites/docs/content/examples/persistent-layouts.md

@@ -0,0 +1,73 @@
+---
+title: Persistent Layouts
+description: Examples of persisting layouts across page loads.
+---
+
+<script>
+	import { StorageDemo, CookieDemo } from '$lib/components/demos'
+	export let data;
+</script>
+
+## Local Storage
+
+The `PaneGroup` component has an `autoSaveId` prop that can be used to uniquely identify the layout of the panes within the group. When provided, the layout of the panes will be saved to local storage and restored when the page is reloaded.
+
+<StorageDemo />
+
+### Anatomy
+
+Here's the high-level structure of the example above:
+
+```svelte title="+page.svelte"
+<script lang="ts">
+	import { PaneGroup, Pane, PaneResizer } from "paneforge";
+</script>
+
+<PaneGroup direction="horizontal" autoSaveId="someGroupId">
+	<Pane defaultSize={50} />
+	<PaneResizer />
+	<Pane defaultSize={50} />
+</PaneGroup>
+```
+
+## Cookies (SSR-friendly)
+
+Local storage is not available on the server, so you can use cookies to persist the layout of the panes across page loads, ensuring no layout flicker when the page is first loaded.
+
+<CookieDemo layout={data.layout} />
+
+### Anatomy
+
+Here's the high-level structure of the example above:
+
+```ts title="+page.server.ts"
+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";
+
+	export let layout: number[] | undefined = undefined;
+	function onLayoutChange(sizes: number[]) {
+		document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}`;
+	}
+</script>
+
+<PaneGroup direction="horizontal" {onLayoutChange}>
+	<Pane defaultSize={layout ? layout[0] : 50} />
+	<PaneResizer />
+	<Pane defaultSize={layout ? layout[1] : 50} />
+</PaneGroup>
+```

sites/docs/content/examples/vertical-groups.md

@@ -11,7 +11,7 @@ description: An example of a vertical group of panes.
 
 ## Anatomy
 
-Here's a high-level structure of the example above:
+Here's the high-level structure of the example above:
 
 ```svelte
 <script lang="ts">

sites/docs/content/getting-started.md

@@ -0,0 +1,26 @@
+---
+title: Getting Started
+description: Learn how to install and use Paneforge in your projects.
+---
+
+## Installation
+
+Install Paneforge using your favorite package manager:
+
+```bash
+npm install paneforge
+```
+
+## Basic Usage
+
+```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>
+```

sites/docs/content/index.md

@@ -3,4 +3,25 @@ title: Introduction
 description: What this project is all about.
 ---
 
+<script>
+	import { HorizontalDemo, VerticalDemo, NestedGroupsDemo } from '$lib/components/demos'
+</script>
+
 PaneForge provides components that make it easy to create resizable panes in your Svelte apps. It's designed to be simple to use, and to work well with other Svelte components and libraries. This project has taken a lot of inspiration and code from the work done by [Bryan Vaughn](https://github.com/bvaughn) and [react-resizable-panels](https://github.com/bvaughn/react-resizable-panels) and seeks to provide a similar experience for Svelte developers.
+
+Here's an example of the functionality you can expect from PaneForge:
+
+<NestedGroupsDemo />
+
+## Features
+
+- **Simple API**: PaneForge is designed to be easy to use. It provides a small set of components that can be combined to create complex layouts.
+- **Resizable Panes**: Panes can be resized by dragging the resizer between them.
+- **Nested Groups**: Groups of panes can be nested inside other groups to create complex layouts.
+- **Customizable**: The appearance and behavior of the panes can be customized using CSS and Svelte props.
+- **Accessible**: PaneForge is designed to be accessible to all users, including those who use assistive technologies.
+- **Community-driven**: PaneForge is an open-source project that welcomes contributions from the community. If you have an idea for a new feature or an improvement, we'd love to hear from you!
+
+## Next Steps
+
+Start using PaneForge in your Svelte app by following the [Getting Started](/docs/getting-started) guide. If you have any questions or need help, feel free to ask in the [Discord](https://discord.gg/hbAGu6akVy)!

sites/docs/src/lib/components/demos/cookie-demo.svelte

@@ -2,14 +2,14 @@
 	import { PaneGroup, Pane, PaneResizer } from "paneforge";
 	import { DotsSixVertical } from "$icons/index.js";
 
-	export let defaultLayout: number[] | undefined = undefined;
+	export let layout: number[] | undefined = undefined;
 	function onLayoutChange(sizes: number[]) {
-		document.cookie = `paneforge:layout=${JSON.stringify(sizes)}`;
+		document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}`;
 	}
 </script>
 
 <PaneGroup direction="horizontal" class="w-full rounded-lg" {onLayoutChange}>
-	<Pane defaultSize={defaultLayout ? defaultLayout[0] : 50} class="bg-muted rounded-lg">
+	<Pane defaultSize={layout ? layout[0] : 50} class="bg-muted rounded-lg">
 		<div class="flex h-[400px] items-center justify-center p-6">
 			<span class="font-semibold">Left</span>
 		</div>
@@ -19,7 +19,7 @@
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizer>
-	<Pane defaultSize={defaultLayout ? defaultLayout[1] : 50} class="bg-muted rounded-lg">
+	<Pane defaultSize={layout ? layout[1] : 50} class="bg-muted rounded-lg">
 		<div class="flex h-full items-center justify-center p-6">
 			<span class="font-semibold">Right</span>
 		</div>

sites/docs/src/lib/components/demos/index.ts

@@ -5,3 +5,4 @@ export { default as OverflowDemo } from "./overflow-demo.svelte";
 export { default as CollapsibleDemo } from "./collapsible-demo.svelte";
 export { default as ConditionalDemo } from "./conditional-demo.svelte";
 export { default as CookieDemo } from "./cookie-demo.svelte";
+export { default as StorageDemo } from "./storage-demo.svelte";