fix(stage-*): improve cursor tracking (#1842)

apps/stage-web/package.json

@@ -39,6 +39,7 @@
     "@proj-airi/stage-pages": "workspace:^",
     "@proj-airi/stage-shared": "workspace:^",
     "@proj-airi/stage-ui": "workspace:^",
+    "@proj-airi/stage-ui-live2d": "workspace:^",
     "@proj-airi/stage-ui-three": "workspace:^",
     "@proj-airi/stream-kit": "workspace:^",
     "@proj-airi/ui": "workspace:^",

apps/stage-web/src/pages/index.vue

@@ -10,6 +10,8 @@ import workletUrl from '@proj-airi/stage-ui/workers/vad/process.worklet?worker&u
 import { BackgroundProvider } from '@proj-airi/stage-layouts/components/Backgrounds'
 import { useBackgroundThemeColor } from '@proj-airi/stage-layouts/composables/theme-color'
 import { useBackgroundStore } from '@proj-airi/stage-layouts/stores/background'
+import { useSettingsLive2d } from '@proj-airi/stage-ui-live2d'
+import { useModelStore } from '@proj-airi/stage-ui-three'
 import { HoloCoupon } from '@proj-airi/stage-ui/components'
 import { WidgetStage } from '@proj-airi/stage-ui/components/scenes'
 import { useAudioRecorder } from '@proj-airi/stage-ui/composables/audio/audio-recorder'
@@ -29,7 +31,6 @@ function handleSettingsOpen(open: boolean) {
   paused.value = open
 }
 
-const positionCursor = useMouse()
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMobile = breakpoints.smaller('md')
 
@@ -147,6 +148,18 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
     }
   }
 })
+
+const { live2dEyeTrackingSource } = storeToRefs(useSettingsLive2d())
+const { x: mouseX, y: mouseY } = useMouse()
+live2dEyeTrackingSource.value = computed(() => ({
+  x: mouseX.value,
+  y: mouseY.value,
+}))
+const { trackingSource } = storeToRefs(useModelStore())
+trackingSource.value = computed(() => ({
+  x: mouseX.value,
+  y: mouseY.value,
+}))
 </script>
 
 <template>
@@ -167,10 +180,6 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
         <WidgetStage
           flex-1 min-w="1/2"
           :paused="paused"
-          :focus-at="{
-            x: positionCursor.x.value,
-            y: positionCursor.y.value,
-          }"
         />
         <InteractiveArea v-if="!isMobile" h="85dvh" absolute right-4 flex flex-1 flex-col max-w="500px" min-w="30%" />
         <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />