fix: 🐛 support Shadow DOM (#75)

Co-authored-by: Hunter Johnston <johnstonhuntera@gmail.com>

Author: songpola

.changeset/gentle-jobs-explode.md

@@ -0,0 +1,5 @@
+---
+"paneforge": patch
+---
+
+feat: Shadow DOM support

docs/package.json

@@ -22,7 +22,7 @@
 		"mdsx": "^0.0.6",
 		"paneforge": "workspace:^",
 		"phosphor-svelte": "^3.0.0",
-		"svelte": "^5.20.1",
+		"svelte": "^5.34.3",
 		"svelte-check": "^4.1.4",
 		"tailwindcss": "4.0.0-beta.6",
 		"typescript": "^5.7.2",

eslint.config.js

@@ -1,3 +1,4 @@
+// @ts-check
 import eslint from "@eslint/js";
 import prettier from "eslint-config-prettier";
 import svelte from "eslint-plugin-svelte";
@@ -7,9 +8,9 @@ import tseslint from "typescript-eslint";
 export default tseslint.config(
 	eslint.configs.recommended,
 	...tseslint.configs.recommended,
-	...svelte.configs["flat/recommended"],
+	...svelte.configs.recommended,
 	prettier,
-	...svelte.configs["flat/prettier"],
+	...svelte.configs.prettier,
 	{
 		languageOptions: {
 			globals: {
@@ -19,9 +20,10 @@ export default tseslint.config(
 		},
 	},
 	{
-		files: ["**/*.svelte"],
+		files: ["**/*.svelte", "**/*.svelte.ts", "**/*.svelte.js"],
 		languageOptions: {
 			parserOptions: {
+				extraFileExtensions: [".svelte"], // Add support for additional file extensions, such as .svelte
 				parser: tseslint.parser,
 			},
 		},
@@ -36,6 +38,9 @@ export default tseslint.config(
 				},
 			],
 			"@typescript-eslint/no-unused-expressions": "off",
+			"@typescript-eslint/no-empty-object-type": "off",
+			"prefer-const": "off",
+			"svelte/no-at-html-tags": "off",
 		},
 	},
 	{
@@ -45,13 +50,13 @@ export default tseslint.config(
 			"dist/",
 			".svelte-kit/**/*",
 			"docs/.svelte-kit/**/*",
-			"docs/node_modules/**/*",
-			"docs/build/**/*",
+			"docs/.velite/**/*",
+			"docs/src/routes/api/demos.json/stackblitz-files.json",
+			"docs/src/routes/api/demos.json/demos.json",
 			".svelte-kit",
-			"packages/paneforge/dist/**/*",
-			"packages/paneforge/.svelte-kit/**/*",
-			"docs/static/",
-			".github/",
+			"packages/bits-ui/dist/**/*",
+			"packages/bits-ui/.svelte-kit/**/*",
+			"tests/.svelte-kit/**/*",
 		],
 	}
 );

package.json

@@ -23,22 +23,20 @@
 	"packageManager": "pnpm@9.14.4",
 	"devDependencies": {
 		"@changesets/cli": "^2.27.10",
-		"@eslint/js": "^9.12.0",
+		"@eslint/js": "^9.29.0",
 		"@svitejs/changesets-changelog-github-compact": "^1.2.0",
 		"@types/node": "^22.10.1",
-		"@typescript-eslint/eslint-plugin": "^8.10.0",
-		"@typescript-eslint/scope-manager": "^8.10.0",
-		"@typescript-eslint/utils": "^8.10.0",
 		"eslint": "^9.0.0",
-		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.46.1",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.2",
 		"globals": "^15.11.0",
 		"prettier": "^3.3.3",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.8",
-		"svelte": "^5.11.0",
+		"svelte": "^5.34.3",
 		"svelte-eslint-parser": "^0.43.0",
-		"typescript": "^5.6.3",
+		"tseslint": "^0.0.2",
+		"typescript": "^5.8.3",
 		"typescript-eslint": "^8.10.0",
 		"wrangler": "^3.91.0"
 	}

packages/paneforge/package.json

@@ -32,7 +32,7 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "^5.20.0"
+		"svelte": "^5.29.0"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.17.2",
@@ -46,10 +46,10 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.1.9",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "^5.20.2",
-		"svelte-check": "^4.1.4",
+		"svelte": "^5.34.3",
+		"svelte-check": "^4.2.1",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.8.3",
 		"vite": "^5.0.3",
 		"vitest": "^1.5.1"
 	},
@@ -58,6 +58,6 @@
 	"type": "module",
 	"dependencies": {
 		"runed": "^0.23.4",
-		"svelte-toolbelt": "^0.7.1"
+		"svelte-toolbelt": "^0.9.2"
 	}
 }

packages/paneforge/src/lib/components/pane-group.svelte

@@ -3,7 +3,7 @@
 	import type { PaneGroupProps } from "./types.js";
 	import { noop } from "$lib/internal/helpers.js";
 	import { useId } from "$lib/internal/utils/useId.js";
-	import { defaultStorage, usePaneGroup } from "$lib/paneforge.svelte.js";
+	import { defaultStorage, PaneGroupState } from "$lib/paneforge.svelte.js";
 
 	let {
 		autoSaveId = null,
@@ -18,7 +18,7 @@
 		...restProps
 	}: PaneGroupProps = $props();
 
-	const paneGroupState = usePaneGroup({
+	const paneGroupState = PaneGroupState.create({
 		id: box.with(() => id ?? useId()),
 		ref: box.with(
 			() => ref,

packages/paneforge/src/lib/components/pane-resizer.svelte

@@ -3,7 +3,7 @@
 	import type { PaneResizerProps } from "./types.js";
 	import { noop } from "$lib/internal/helpers.js";
 	import { useId } from "$lib/internal/utils/useId.js";
-	import { usePaneResizer } from "$lib/paneforge.svelte.js";
+	import { PaneResizerState } from "$lib/paneforge.svelte.js";
 
 	let {
 		id = useId(),
@@ -16,7 +16,7 @@
 		...restProps
 	}: PaneResizerProps = $props();
 
-	const resizerState = usePaneResizer({
+	const resizerState = PaneResizerState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

packages/paneforge/src/lib/components/pane.svelte

@@ -3,7 +3,7 @@
 	import type { PaneProps } from "./types.js";
 	import { noop } from "$lib/internal/helpers.js";
 	import { useId } from "$lib/internal/utils/useId.js";
-	import { usePane } from "$lib/paneforge.svelte.js";
+	import { PaneState } from "$lib/paneforge.svelte.js";
 
 	let {
 		id = useId(),
@@ -22,7 +22,7 @@
 		...restProps
 	}: PaneProps = $props();
 
-	const paneState = usePane({
+	const paneState = PaneState.create({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,