diff --git a/packages/paneforge/.eslintignore b/packages/paneforge/.eslintignore
index 3897265..50f877a 100644
--- a/packages/paneforge/.eslintignore
+++ b/packages/paneforge/.eslintignore
@@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+dist
+/dist
\ No newline at end of file
diff --git a/packages/paneforge/.prettierignore b/packages/paneforge/.prettierignore
index cc41cea..2f49fdd 100644
--- a/packages/paneforge/.prettierignore
+++ b/packages/paneforge/.prettierignore
@@ -2,3 +2,5 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+dist
+.svelte-kit
\ No newline at end of file
diff --git a/sites/docs/.eslintignore b/sites/docs/.eslintignore
index bdc9d4c..5ecc888 100644
--- a/sites/docs/.eslintignore
+++ b/sites/docs/.eslintignore
@@ -11,4 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-CHANGELOG.md
\ No newline at end of file
+CHANGELOG.md
+/.contentlayer
\ No newline at end of file
diff --git a/sites/docs/.prettierignore b/sites/docs/.prettierignore
index 440ad69..e967f87 100644
--- a/sites/docs/.prettierignore
+++ b/sites/docs/.prettierignore
@@ -2,4 +2,7 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
-CHANGELOG.md
\ No newline at end of file
+CHANGELOG.md
+.svelte-kit
+/.svelte-kit
+/.contentlayer
\ No newline at end of file
diff --git a/sites/docs/src/lib/components/demos/collapsible-demo.svelte b/sites/docs/src/lib/components/demos/collapsible-demo.svelte
index 6a6c778..033d469 100644
--- a/sites/docs/src/lib/components/demos/collapsible-demo.svelte
+++ b/sites/docs/src/lib/components/demos/collapsible-demo.svelte
@@ -35,29 +35,29 @@
 		onCollapse={() => (collapsed = true)}
 		onExpand={() => (collapsed = false)}
 	>
-		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
+		<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted p-6">
 			<span class="font-semibold">One</span>
 		</div>
 	</Pane>
-	<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-		<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+	<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizeHandle>
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={50}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg p-6">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted p-6">
 					<span class="font-semibold">Two</span>
 				</div>
 			</Pane>
-			<PaneResizeHandle class="bg-background relative flex h-2 items-center justify-center">
-				<div class="bg-brand z-10 flex h-5 w-7 items-center justify-center rounded-sm border">
+			<PaneResizeHandle class="relative flex h-2 items-center justify-center bg-background">
+				<div class="z-10 flex h-5 w-7 items-center justify-center rounded-sm border bg-brand">
 					<DotsSixVertical class="size-4 text-black" weight="bold" />
 				</div>
 			</PaneResizeHandle>
 			<Pane defaultSize={50}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg p-6">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted p-6">
 					<span class="font-semibold">Three</span>
 				</div>
 			</Pane>
diff --git a/sites/docs/src/lib/components/demos/conditional-demo.svelte b/sites/docs/src/lib/components/demos/conditional-demo.svelte
index b6628de..024aaba 100644
--- a/sites/docs/src/lib/components/demos/conditional-demo.svelte
+++ b/sites/docs/src/lib/components/demos/conditional-demo.svelte
@@ -25,29 +25,29 @@
 <PaneGroup direction="horizontal" class="w-full">
 	{#if showPaneOne}
 		<Pane defaultSize={1 / 3} order={1}>
-			<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
+			<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted p-6">
 				<span class="font-semibold">One</span>
 			</div>
 		</Pane>
-		<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-			<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+		<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+			<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 				<DotsSixVertical class="size-4 text-black" weight="bold" />
 			</div>
 		</PaneResizeHandle>
 	{/if}
 	<Pane defaultSize={1 / 3} order={2}>
-		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
+		<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted p-6">
 			<span class="font-semibold">Two</span>
 		</div>
 	</Pane>
 	{#if showPaneThree}
-		<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-			<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+		<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+			<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 				<DotsSixVertical class="size-4 text-black" weight="bold" />
 			</div>
 		</PaneResizeHandle>
 		<Pane defaultSize={1 / 3} order={3}>
-			<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
+			<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted p-6">
 				<span class="font-semibold">Three</span>
 			</div>
 		</Pane>
diff --git a/sites/docs/src/lib/components/demos/cookie-demo.svelte b/sites/docs/src/lib/components/demos/cookie-demo.svelte
index fcaa2e0..355519e 100644
--- a/sites/docs/src/lib/components/demos/cookie-demo.svelte
+++ b/sites/docs/src/lib/components/demos/cookie-demo.svelte
@@ -9,17 +9,17 @@
 </script>
 
 <PaneGroup direction="horizontal" class="w-full rounded-lg" {onLayoutChange}>
-	<Pane defaultSize={defaultLayout ? defaultLayout[0] : 50} class="bg-muted rounded-lg">
+	<Pane defaultSize={defaultLayout ? defaultLayout[0] : 50} class="rounded-lg bg-muted">
 		<div class="flex h-[400px] items-center justify-center p-6">
 			<span class="font-semibold">Left</span>
 		</div>
 	</Pane>
-	<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-		<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+	<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizeHandle>
-	<Pane defaultSize={defaultLayout ? defaultLayout[1] : 50} class="bg-muted rounded-lg">
+	<Pane defaultSize={defaultLayout ? defaultLayout[1] : 50} class="rounded-lg bg-muted">
 		<div class="flex h-full items-center justify-center p-6">
 			<span class="font-semibold">Right</span>
 		</div>
diff --git a/sites/docs/src/lib/components/demos/horizontal-demo.svelte b/sites/docs/src/lib/components/demos/horizontal-demo.svelte
index 3118736..ba0cce7 100644
--- a/sites/docs/src/lib/components/demos/horizontal-demo.svelte
+++ b/sites/docs/src/lib/components/demos/horizontal-demo.svelte
@@ -4,17 +4,17 @@
 </script>
 
 <PaneGroup direction="horizontal" class="w-full rounded-lg">
-	<Pane defaultSize={50} class="bg-muted rounded-lg">
+	<Pane defaultSize={50} class="rounded-lg bg-muted">
 		<div class="flex h-[400px] items-center justify-center p-6">
 			<span class="font-semibold">Left</span>
 		</div>
 	</Pane>
-	<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-		<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+	<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizeHandle>
-	<Pane defaultSize={50} class="bg-muted rounded-lg">
+	<Pane defaultSize={50} class="rounded-lg bg-muted">
 		<div class="flex h-full items-center justify-center p-6">
 			<span class="font-semibold">Right</span>
 		</div>
diff --git a/sites/docs/src/lib/components/demos/nested-groups-demo.svelte b/sites/docs/src/lib/components/demos/nested-groups-demo.svelte
index f362900..bd7e5d4 100644
--- a/sites/docs/src/lib/components/demos/nested-groups-demo.svelte
+++ b/sites/docs/src/lib/components/demos/nested-groups-demo.svelte
@@ -5,29 +5,29 @@
 
 <PaneGroup direction="horizontal" class="w-full">
 	<Pane defaultSize={50}>
-		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg p-6">
+		<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted p-6">
 			<span class="font-semibold">One</span>
 		</div>
 	</Pane>
-	<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center">
-		<div class="bg-brand z-10 flex h-7 w-5 items-center justify-center rounded-sm border">
+	<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background">
+		<div class="z-10 flex h-7 w-5 items-center justify-center rounded-sm border bg-brand">
 			<DotsSixVertical class="size-4 text-black" weight="bold" />
 		</div>
 	</PaneResizeHandle>
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={50}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg p-6">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted p-6">
 					<span class="font-semibold">Two</span>
 				</div>
 			</Pane>
-			<PaneResizeHandle class="bg-background relative flex h-2 items-center justify-center">
-				<div class="bg-brand z-10 flex h-5 w-7 items-center justify-center rounded-sm border">
+			<PaneResizeHandle class="relative flex h-2 items-center justify-center bg-background">
+				<div class="z-10 flex h-5 w-7 items-center justify-center rounded-sm border bg-brand">
 					<DotsSixVertical class="size-4 text-black" weight="bold" />
 				</div>
 			</PaneResizeHandle>
 			<Pane defaultSize={50}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg p-6">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted p-6">
 					<span class="font-semibold">Three</span>
 				</div>
 			</Pane>
diff --git a/sites/docs/src/lib/components/demos/overflow-demo.svelte b/sites/docs/src/lib/components/demos/overflow-demo.svelte
index 0d2ecae..7a1b1fe 100644
--- a/sites/docs/src/lib/components/demos/overflow-demo.svelte
+++ b/sites/docs/src/lib/components/demos/overflow-demo.svelte
@@ -4,7 +4,7 @@
 
 <PaneGroup direction="horizontal" class="w-full">
 	<Pane defaultSize={50}>
-		<div class="bg-muted flex h-[400px] items-center justify-center rounded-lg">
+		<div class="flex h-[400px] items-center justify-center rounded-lg bg-muted">
 			<div class="h-full overflow-auto p-6">
 				Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga quaerat eos, saepe doloribus
 				facere fugiat! Magni consequatur a veniam quia. Exercitationem recusandae facilis cupiditate
@@ -17,11 +17,11 @@
 			</div>
 		</div>
 	</Pane>
-	<PaneResizeHandle class="bg-background relative flex w-2 items-center justify-center" />
+	<PaneResizeHandle class="relative flex w-2 items-center justify-center bg-background" />
 	<Pane defaultSize={50}>
 		<PaneGroup direction="vertical">
 			<Pane defaultSize={25}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted">
 					<div class="h-full overflow-auto p-6">
 						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga quaerat eos, saepe
 						doloribus facere fugiat! Magni consequatur a veniam quia. Exercitationem recusandae
@@ -34,9 +34,9 @@
 					</div>
 				</div>
 			</Pane>
-			<PaneResizeHandle class="bg-background relative flex h-2 items-center justify-center" />
+			<PaneResizeHandle class="relative flex h-2 items-center justify-center bg-background" />
 			<Pane defaultSize={75}>
-				<div class="bg-muted flex h-full items-center justify-center rounded-lg">
+				<div class="flex h-full items-center justify-center rounded-lg bg-muted">
 					<div class="h-full overflow-auto p-6">
 						Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga quaerat eos, saepe
 						doloribus facere fugiat! Magni consequatur a veniam quia. Exercitationem recusandae
diff --git a/sites/docs/src/lib/components/demos/vertical-demo.svelte b/sites/docs/src/lib/components/demos/vertical-demo.svelte
index f3167c8..2259462 100644
--- a/sites/docs/src/lib/components/demos/vertical-demo.svelte
+++ b/sites/docs/src/lib/components/demos/vertical-demo.svelte
@@ -5,17 +5,17 @@
 
 <div class="h-[400px]">
 	<PaneGroup direction="vertical" class="w-full rounded-lg">
-		<Pane defaultSize={50} class="bg-muted rounded-lg">
+		<Pane defaultSize={50} class="rounded-lg bg-muted">
 			<div class="flex h-[200px] items-center justify-center p-6">
 				<span class="font-semibold">Top</span>
 			</div>
 		</Pane>
-		<PaneResizeHandle class="bg-background relative flex h-2 items-center justify-center">
-			<div class="bg-brand z-10 flex h-5 w-7 items-center justify-center rounded-sm border">
+		<PaneResizeHandle class="relative flex h-2 items-center justify-center bg-background">
+			<div class="z-10 flex h-5 w-7 items-center justify-center rounded-sm border bg-brand">
 				<DotsSixVertical class="size-4 text-black" weight="bold" />
 			</div>
 		</PaneResizeHandle>
-		<Pane defaultSize={50} class="bg-muted rounded-lg">
+		<Pane defaultSize={50} class="rounded-lg bg-muted">
 			<div class="flex h-full items-center justify-center p-6">
 				<span class="font-semibold">Bottom</span>
 			</div>
diff --git a/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte b/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte
index 9a6aea4..567107a 100644
--- a/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte
+++ b/sites/docs/src/lib/components/ui/resizable/resizable-handle.svelte
@@ -14,13 +14,13 @@
 
 <ResizablePrimitive.PaneResizeHandle
 	class={cn(
-		"bg-border focus-visible:ring-ring data-[resize-handle-active=pointer]:bg-muted-foreground relative flex w-[3px] items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[pane-group-direction=vertical]:h-[3px] data-[pane-group-direction=vertical]:w-full data-[pane-group-direction=vertical]:after:left-0 data-[pane-group-direction=vertical]:after:h-1 data-[pane-group-direction=vertical]:after:w-full data-[pane-group-direction=vertical]:after:-translate-y-1/2 data-[pane-group-direction=vertical]:after:translate-x-0 [&[data-pane-group-direction=vertical]>div]:rotate-90",
+		"relative flex w-[3px] items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[pane-group-direction=vertical]:h-[3px] data-[pane-group-direction=vertical]:w-full data-[resize-handle-active=pointer]:bg-muted-foreground data-[pane-group-direction=vertical]:after:left-0 data-[pane-group-direction=vertical]:after:h-1 data-[pane-group-direction=vertical]:after:w-full data-[pane-group-direction=vertical]:after:-translate-y-1/2 data-[pane-group-direction=vertical]:after:translate-x-0 [&[data-pane-group-direction=vertical]>div]:rotate-90",
 		className
 	)}
 	{...$$restProps}
 >
 	{#if withHandle}
-		<div class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-sm border">
+		<div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
 			<DotsSixVertical class="size-2.5" />
 		</div>
 	{/if}
diff --git a/sites/docs/static/site.webmanifest b/sites/docs/static/site.webmanifest
index 45dc8a2..52a2fe3 100644
--- a/sites/docs/static/site.webmanifest
+++ b/sites/docs/static/site.webmanifest
@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+	"name": "",
+	"short_name": "",
+	"icons": [
+		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+	],
+	"theme_color": "#ffffff",
+	"background_color": "#ffffff",
+	"display": "standalone"
+}