websocket cursor data broadcast

src/routes/+layout.svelte

@@ -1,5 +1,23 @@
 <script>
+    import { browser } from '$app/environment';
+    import { onMount, onDestroy } from 'svelte';
+    import { initCursorTracking, stopCursorTracking } from '../events/cursor';
+
     let { children } = $props();
+    if (browser) {
+      onMount(async () => {
+        try {
+          await initCursorTracking();
+        } catch (err) {
+          console.error("[Scene] Failed to initialize cursor tracking:", err);
+        }
+      });
+
+      onDestroy(() => {
+        stopCursorTracking();
+      });
+    }
+
 </script>
 
 <div class="size-full bg-transparent">

src/routes/+layout.ts

@@ -4,6 +4,3 @@
 // See: https://v2.tauri.app/start/frontend/sveltekit/ for more info
 export const ssr = false;
 import "../app.css";
-import { initChannelCursorPosition } from "../channels/cursor";
-
-initChannelCursorPosition();

src/routes/preferences/+page.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/core";
+  import {
+    cursorPositionOnScreen,
+  } from "../../events/cursor";
+
+</script>
+
+<div class="p-4">
+  <div class="flex flex-col gap-4">
+    <div>
+      <p class="text-xl font-semibold">Preferences</p>
+      <p class="text-sm opacity-50">Settings and configuration</p>
+    </div>
+
+    <div class="card bg-base-200 p-4">
+      <h3 class="font-semibold mb-2">Cursor Position (Multi-Window Test)</h3>
+      <div class="flex flex-col gap-1">
+        <span class="font-mono text-sm">
+          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw.y})
+        </span>
+        <span class="font-mono text-sm">
+          Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen.mapped.y})
+        </span>
+      </div>
+    </div>
+  </div>
+</div>

src/routes/scene/+page.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { cursorPositionOnScreen } from "../../channels/cursor";
+  import {
+    cursorPositionOnScreen,
+  } from "../../events/cursor";
 </script>
 
 <div class="w-svw h-svh p-4 relative">
@@ -9,13 +11,12 @@
     <div class="flex flex-col text-center">
       <p class="text-xl">Friendolls</p>
       <p class="text-sm opacity-50">Scene Screen</p>
-      <div class="mt-4">
-        <span class="font-mono">
-          Cursor: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw
-            .y})
+      <div class="mt-4 flex flex-col gap-1">
+        <span class="font-mono text-sm">
+          Raw: ({$cursorPositionOnScreen.raw.x}, {$cursorPositionOnScreen.raw.y})
         </span>
-        <span class="font-mono">
-          Cursor: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen
+        <span class="font-mono text-sm">
+          Mapped: ({$cursorPositionOnScreen.mapped.x}, {$cursorPositionOnScreen
             .mapped.y})
         </span>
       </div>