diff --git a/biome.json b/biome.json
index ce8f90e..f782e6b 100644
--- a/biome.json
+++ b/biome.json
@@ -1,7 +1,7 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.10/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
 	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
-	"files": { "includes": ["**", "!!**/dist", "!!**/*.vue", "!!docs/.vitepress/theme"] },
+	"files": { "includes": ["**", "!!**/dist", "!!docs/.vitepress/theme"] },
 	"formatter": {
 		"enabled": true,
 		"formatWithErrors": false,
@@ -14,7 +14,10 @@
 	},
 	"linter": {
 		"enabled": true,
-		"rules": { "recommended": true }
+		"rules": { "recommended": true },
+		"domains": {
+			"vue": "recommended"
+		}
 	},
 	"javascript": {
 		"formatter": {
@@ -33,18 +36,11 @@
 	"html": {
 		"formatter": {
 			"indentScriptAndStyle": false,
+			"enabled": true,
 			"selfCloseVoidElements": "always"
-		}
+		},
+		"experimentalFullSupportEnabled": true
 	},
-	"overrides": [
-		{
-			"includes": ["**/*.md"],
-			"formatter": {
-				"indentStyle": "space",
-				"indentWidth": 2
-			}
-		}
-	],
 	"assist": {
 		"enabled": true,
 		"actions": {
diff --git a/docs/components/playground.vue b/docs/components/playground.vue
index d04b3d7..57d04be 100644
--- a/docs/components/playground.vue
+++ b/docs/components/playground.vue
@@ -1,76 +1,85 @@
 <template>
-    <div class="container">
-        <div class="test-square" ref="square" :style="{ transform: `translate(${data.x}px, ${data.y}px) scale(${data.scale})` }">
-            {{ data.streak }}
-        </div>
-    </div>
+	<div class="container">
+		<div
+			class="test-square"
+			ref="square"
+			:style="{ transform: `translate(${data.x}px, ${data.y}px) scale(${data.scale})` }"
+		>
+			{{ data.streak }}
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
-    import { onMounted, reactive, useTemplateRef } from 'vue';
-    import { Pointeract, WheelPanZoom, MultitouchPanZoom, PreventDefault, Click, Drag } from '@';
-    const square = useTemplateRef('square');
-    const data = reactive({
-        x: 0,
-	    y: 0,
-	    scale: 1,
-        streak: 0
-    })
-    let streakTimeout: undefined | NodeJS.Timeout = undefined;
-    onMounted(() => {
-        const pointeract = new Pointeract(square.value as HTMLElement,
-            [PreventDefault, WheelPanZoom, MultitouchPanZoom, Click, Drag]
-        ).start();
-        pointeract.on('pan', (e) => {
-            data.x += e.detail.x;
-            data.y += e.detail.y;
-        });
-        pointeract.on('drag', (e) => {
-            data.x += e.detail.x;
-            data.y += e.detail.y;
-        })
-        pointeract.on('zoom', (e) => {
-            const detail = e.detail;
-	        data.scale *= detail.factor;
-	        data.x += detail.x * (1 - detail.factor);
-	        data.y += detail.y * (1 - detail.factor);
-        });
-        pointeract.on('trueClick', (e) => {
-            data.streak = e.detail.streak;
-            if (streakTimeout) clearTimeout(streakTimeout);
-            streakTimeout = setTimeout(() => {
-                data.streak = 0;
-            }, pointeract.options.clickPreserveTime);
-        });
-    })
+import { onMounted, reactive, useTemplateRef } from 'vue';
+import { Click, Drag, MultitouchPanZoom, Pointeract, PreventDefault, WheelPanZoom } from '@';
+
+const square = useTemplateRef('square');
+const data = reactive({
+	x: 0,
+	y: 0,
+	scale: 1,
+	streak: 0,
+});
+let streakTimeout: undefined | NodeJS.Timeout;
+onMounted(() => {
+	const pointeract = new Pointeract(square.value as HTMLElement, [
+		PreventDefault,
+		WheelPanZoom,
+		MultitouchPanZoom,
+		Click,
+		Drag,
+	]).start();
+	pointeract.on('pan', e => {
+		data.x += e.detail.x;
+		data.y += e.detail.y;
+	});
+	pointeract.on('drag', e => {
+		data.x += e.detail.x;
+		data.y += e.detail.y;
+	});
+	pointeract.on('zoom', e => {
+		const detail = e.detail;
+		data.scale *= detail.factor;
+		data.x += detail.x * (1 - detail.factor);
+		data.y += detail.y * (1 - detail.factor);
+	});
+	pointeract.on('trueClick', e => {
+		data.streak = e.detail.streak;
+		if (streakTimeout) clearTimeout(streakTimeout);
+		streakTimeout = setTimeout(() => {
+			data.streak = 0;
+		}, pointeract.options.clickPreserveTime);
+	});
+});
 </script>
 
 <style scoped>
-    .container {
-        width: 100%;
-        height: 500px;
-        display: block;
-        position: relative;
-        overflow: hidden;
-        border-radius: 12px;
-        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
-        border: 1px solid rgba(134, 134, 134, 0.4);
-        user-select: none;
-    }
-    .test-square {
-        position: absolute;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        top: calc(50% - 150px);
-        left: calc(50% - 150px);
-        width: 300px;
-        height: 300px;
-        background-color: rgb(72, 130, 255);
-        border-radius: 16px;
-        transform-origin: 0 0;
-        box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
-        font-size: 100px;
-        font-weight: bold;
-    }
-</style>
\ No newline at end of file
+.container {
+	width: 100%;
+	height: 500px;
+	display: block;
+	position: relative;
+	overflow: hidden;
+	border-radius: 12px;
+	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
+	border: 1px solid rgba(134, 134, 134, 0.4);
+	user-select: none;
+}
+.test-square {
+	position: absolute;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	top: calc(50% - 150px);
+	left: calc(50% - 150px);
+	width: 300px;
+	height: 300px;
+	background-color: rgb(72, 130, 255);
+	border-radius: 16px;
+	transform-origin: 0 0;
+	box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
+	font-size: 100px;
+	font-weight: bold;
+}
+</style>
diff --git a/tests/dev/index.html b/tests/dev/index.html
index 3430c29..edae5f6 100644
--- a/tests/dev/index.html
+++ b/tests/dev/index.html
@@ -1,42 +1,42 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pointeract Test</title>
-    <style>
-        #test-square {
-            position: absolute;
-            top: calc(50% - 200px);
-            left: calc(50% - 200px);
-            width: 400px;
-            height: 400px;
-            background-color: rgb(72, 130, 255);
-            border-radius: 16px;
-            transform-origin: 0 0;
-            box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
-        }
-        body {
-            overflow: hidden;
-            margin: 0;
-            width: 100vw;
-            height: 100vh;
-        }
-        @keyframes amplify-and-shrink {
-            0% {
-                background-color: rgb(72, 130, 255);
-            }
-            10% {
-                background-color: rgb(111, 97, 255);
-            }
-            100% {
-                background-color: rgb(72, 130, 255);
-            }
-        }
-    </style>
-</head>
-<body>
-    <div id="test-square"></div>
-</body>
-<script type="module" src="./script.ts"></script>
-</html>
\ No newline at end of file
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Pointeract Test</title>
+		<style>
+		#test-square {
+			position: absolute;
+			top: calc(50% - 200px);
+			left: calc(50% - 200px);
+			width: 400px;
+			height: 400px;
+			background-color: rgb(72, 130, 255);
+			border-radius: 16px;
+			transform-origin: 0 0;
+			box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
+		}
+		body {
+			overflow: hidden;
+			margin: 0;
+			width: 100vw;
+			height: 100vh;
+		}
+		@keyframes amplify-and-shrink {
+			0% {
+				background-color: rgb(72, 130, 255);
+			}
+			10% {
+				background-color: rgb(111, 97, 255);
+			}
+			100% {
+				background-color: rgb(72, 130, 255);
+			}
+		}
+		</style>
+	</head>
+	<body>
+		<div id="test-square"></div>
+	</body>
+	<script type="module" src="./script.ts"></script>
+</html>