docs(website): improved/fixed docs

packages/website/src/lib/docs/core/browser/create-file-dialog/index.md

@@ -1,12 +1,11 @@
 # createFileDialog
 
-Creates a file dialog to interact with programatically. Provides access to the
-files that are currently held.
+Creates a file dialog to interact with programatically.
 
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { createFileDialog } from '@sv-use/core';
 
 	const dialog = createFileDialog();
@@ -16,7 +15,7 @@ files that are currently held.
 ### Examples
 
 ```svelte
-<script lang="ts">
+<script>
 	import { createFileDialog } from '@sv-use/core';
 
 	const dialog = createFileDialog({
@@ -31,26 +30,25 @@ files that are currently held.
 	});
 </script>
 
-<div class="relative flex w-full flex-col gap-2">
-	<button onclick={dialog.open} class="rounded-md bg-svelte px-3 py-1 text-white">
-		Open file dialog
-	</button>
-	<button
-		onclick={dialog.reset}
-		disabled={dialog.files.length === 0}
-		class="rounded-md bg-svelte px-3 py-1 text-white disabled:cursor-not-allowed disabled:opacity-50"
-	>
-		Reset
-	</button>
-	<div class="flex flex-col gap-5">
-		Selected Files ({dialog.files.length})
-		<ul>
-			{#each dialog.files as file (file.name)}
-				<li>{file.name}</li>
-			{:else}
-				<p class="italic">Empty...</p>
-			{/each}
-		</ul>
-	</div>
+<button onclick={dialog.open}>
+    Open file dialog
+</button>
+<button
+    onclick={dialog.reset}
+    disabled={dialog.files.length === 0}
+>
+    Reset
+</button>
+<div class="flex flex-col gap-5">
+    <span>Selected Files ({dialog.files.length})</span>
+    {#if dialog.files}
+        <ul>
+            {#each dialog.files as file (file.name)}
+                <li>{file.name}</li>
+            {/each}
+        </ul>
+    {:else}
+        <p>No files detected</p>
+    {/if}
 </div>
 ```

packages/website/src/lib/docs/core/browser/create-web-notification/index.md

@@ -5,11 +5,13 @@ Configure and display desktop notifications to the user.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { createWebNotification } from '@sv-use/core';
 
 	const notification = createWebNotification();
 </script>
 
-<button onclick={() => notification.show()}>Show notification</button>
+<button onclick={notification.show}>
+    Show notification
+</button>
 ```

packages/website/src/lib/docs/core/browser/get-clipboard-text/index.md

@@ -7,39 +7,34 @@ Provides write (and optionally read) access to the text clipboard.
 Set `options.legacyCopy: true` to keep the ability to copy if the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) is not available. It will handle copy with [document.execCommand](https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand) as the fallback.
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getClipboardText } from '@sv-use/core';
 
-	const clipboard = getClipboardText({ allowRead: true, legacyCopy: true });
+	const clipboard = getClipboardText({
+        allowRead: true,
+        legacyCopy: true
+    });
 </script>
 ```
 
 ## Examples
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getClipboardText } from '@sv-use/core';
 
 	let inputValue = $state('');
-	const clipboard = getClipboardText({ allowRead: true, legacyCopy: true });
+	const clipboard = getClipboardText({
+        allowRead: true,
+        legacyCopy: true
+    });
 </script>
 
-<div class="relative flex w-full flex-col gap-2">
-	{#if clipboard.isSupported}
-		<span>Currently copied : {clipboard.text}</span>
-		<input
-			type="text"
-			bind:value={inputValue}
-			class="rounded-md border border-zinc-300 px-3 py-2 text-sm"
-		/>
-		<button
-			onclick={() => clipboard.copyText(inputValue)}
-			class="rounded-md bg-svelte px-3 py-1 text-white"
-		>
-			Copy
-		</button>
-	{:else}
-		<span>Your browser doesn't support the Clipboard API...</span>
-	{/if}
+<div>
+    <span>Currently copied : {clipboard.text}</span>
+    <input type="text" bind:value={inputValue} />
+    <button onclick={() => clipboard.copyText(inputValue)}>
+        Copy text from input
+    </button>
 </div>
 ```

packages/website/src/lib/docs/core/browser/get-permission/index.md

@@ -5,7 +5,7 @@ Retrieves the status of a given permission.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getPermission } from '@sv-use/core';
 
 	const permission = getPermission('camera');

packages/website/src/lib/docs/core/browser/handle-event-listener/index.md

@@ -2,15 +2,14 @@
 
 Convenience wrapper for event listeners.
 
-Handles mounting and unmounting automatically, unless `options.autoCleanup` is
-set to `false`, in which case the cleanup will have to be done manually.
-
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { handleEventListener } from '@sv-use/core';
 
-	handleEventListener('click', () => console.log('clicked'));
+	handleEventListener('click', () => {
+        console.log('clicked')
+    });
 </script>
 ```

packages/website/src/lib/docs/core/elements/create-drop-zone/index.md

@@ -17,12 +17,10 @@ Creates a zone where files can be dropped.
 	const dropZone = createDropZone(() => container, {
         allowedDataTypes: 'image/*',
         multiple: true,
-        onDrop
+        onDrop(files: File[] | null) {
+            // Called when files are dropped in the drop zone
+        }
     });
-	
-    function onDrop(files: File[] | null) {
-        // Called when files are dropped in the drop zone
-    }
 </script>
 
 <div bind:this={container}>

packages/website/src/lib/docs/core/elements/get-active-element/index.md

@@ -5,7 +5,7 @@ Gets the current active element in the DOM.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getActiveElement } from '@sv-use/core';
 
 	const activeElement = getActiveElement();

packages/website/src/lib/docs/core/elements/get-document-visibility/index.md

@@ -8,7 +8,7 @@ minimized window, or is otherwise not visible to the user.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getDocumentVisibility } from '@sv-use/core';
 
 	const documentVisibility = getDocumentVisibility();

packages/website/src/lib/docs/core/elements/get-element-size/index.md

@@ -12,7 +12,6 @@ Tracks the size of an element using the [Resize Observer API](https://developer.
 	import { getElementSize } from '@sv-use/core';
 
 	let el = $state();
-
 	const size = getElementSize(() => el);
 </script>
 

packages/website/src/lib/docs/core/lifecycle/watch/index.md

@@ -1,42 +1,40 @@
 # watch
 
-Triggers a callback when a dependency changes. Provides the previous value(s)
-as well as the current one(s) as parameters in the callback.
+Triggers a callback when a dependency changes.
+
+Provides the previous value(s) as well as the current one(s) as parameters in the callback.
 
 ## Usage
 
 You can watch changes on a single value :
 
 ```svelte
-<script lang="ts">
+<script>
 	import { watch } from '@sv-use/core';
 
 	let counter = $state(0);
 
-	watch(
-		() => counter,
-		(curr, prev) => {
-			console.log(`Went from ${prev} to ${curr}`);
-		}
-	);
+	watch(() => counter, (curr, prev) => {
+        console.log(`Went from ${prev} to ${curr}`);
+    });
 </script>
 ```
 
 Or on multiple values by supplying an array :
 
 ```svelte
-<script lang="ts">
+<script>
 	import { watch } from '@sv-use/core';
 
 	let counter = $state(0);
     let search = $state("");
 
 	watch(
-		[() => counter, () => search],
-		([currCounter, currSearch], [prevCounter, prevSearch]) => {
-			console.log(`Went from ${prev} to ${curr}`);
-		}
-	);
+        [() => counter, () => search],
+        ([currCounter, currSearch], [prevCounter, prevSearch]) => {
+            // ...
+        }
+    );
 </script>
 ```
 
@@ -49,17 +47,13 @@ You might not want that and only run when a dependency changes. You can set
 this in the options.
 
 ```svelte
-<script lang="ts">
+<script>
 	import { watch } from '@sv-use/core';
 
 	let counter = $state(0);
 
-	watch(
-		() => counter,
-		(curr, prev) => {
-			console.log(`Went from ${prev} to ${curr}`);
-		},
-        { runOnMounted: false } // Default is `true`
-	);
+	watch(() => counter, (curr, prev) => {
+        console.log(`Went from ${prev} to ${curr}`);
+    }, { runOnMounted: false });
 </script>
 ```

packages/website/src/lib/docs/core/observers/observe-intersection/index.md

@@ -11,17 +11,12 @@ Runs a callback when the targets are visible on the screen.
     let divNode = $state();
     let isVisible = $state(false);
 
-    observeIntersection(
-        () => divNode,
-        ([entry], _mutationObserver) => {
-            isVisible = entry?.isIntersecting || false;
-        }
-    );
+    observeIntersection(() => divNode, ([entry]) => {
+        isVisible = entry?.isIntersecting || false;
+    });
 </script>
 
-<div class="relative w-full h-[200%]">
-    <div bind:this={divNode}>
-        i'm the target element
-    </div>
+<div bind:this={divNode}>
+    i'm the target element
 </div>
 ```

packages/website/src/lib/docs/core/observers/observe-performance/index.md

@@ -8,7 +8,7 @@ the entry types that have been registered.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { observePerformance } from '@sv-use/core';
 
 	observePerformance((list) => {

packages/website/src/lib/docs/core/observers/observe-resize/index.md

@@ -12,13 +12,10 @@ It can also watch multiple elements if given an array of elements.
 
 	let el = $state();
 
-	observeResize(
-		() => el,
-		(entries) => {
-			const { width, height } = entries[0].contentRect;
-            console.log(`New width : ${width} | New height : ${height}`);
-		}
-	);
+	observeResize(() => el, (entries) => {
+        const { width, height } = entries[0].contentRect;
+        console.log(`New width : ${width} | New height : ${height}`);
+    });
 </script>
 
 <textarea bind:this={el} style="resize: both;"></textarea>

packages/website/src/lib/docs/core/reactivity/debounce/index.md

@@ -8,7 +8,7 @@ Debounces the update of the value after a delay.
 > If you'd rather have them combined in one variable, check out [debouncedState](/sv-use/docs/core/states/debounced-state).
 
 ```svelte
-<script lang="ts">
+<script>
 	import { debounce } from '@sv-use/core';
 
 	let search = $state('');

packages/website/src/lib/docs/core/reactivity/get-last-changed/index.md

@@ -5,7 +5,7 @@ Get the last time the reactive value changed. It is returned as a number in mill
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getLastChanged } from '@sv-use/core';
 
 	let value = $state(0);

packages/website/src/lib/docs/core/reactivity/get-previous/index.md

@@ -12,7 +12,7 @@ It is set to `undefined` until the first change if `initial` is not set.
 > It supplies the previous value in the callback.
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getPrevious } from '@sv-use/core';
 
 	let counter = $state(0);

packages/website/src/lib/docs/core/reactivity/track-history/index.md

@@ -9,7 +9,7 @@ capabilities as well as access to the histories.
 > If you prefer to have them combined, check out [historyState](/sv-use/docs/core/states/history-state).
 
 ```svelte
-<script lang="ts">
+<script>
 	import { trackHistory } from '@sv-use/core';
 
 	let counter = $state(0);

packages/website/src/lib/docs/core/sensors/get-battery/index.md

@@ -5,7 +5,7 @@ Provides information about the system's battery charge level and lets you be not
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getBattery } from '@sv-use/core';
 
 	const battery = getBattery();

packages/website/src/lib/docs/core/sensors/get-device-motion/index.md

@@ -6,7 +6,7 @@ rotation rate.
 ## Usage
 
 ```svelte
-<script lang="ts">
+<script>
 	import { getDeviceMotion } from '@sv-use/core';
 
 	const deviceMotion = getDeviceMotion();