From 6c75e398ac93cd42bb12b71dd8a1b3c52ec0e4da Mon Sep 17 00:00:00 2001
From: RissRIce <jsdavid278@gmail.com>
Date: Mon, 10 Aug 2026 12:33:09 -0600
Subject: [PATCH] fix(control): route pointer input without local leaks

---
 .../components/control/InputCapture.tsx       |  1 +
 .../src/renderer/hooks/useRemoteControl.ts    | 28 +++++++++++++------
 apps/web/src/hooks/useRemoteControl.ts        | 28 +++++++++++++------
 packages/shared-types/src/index.ts            |  7 ++++-
 packages/shared-types/src/input.test.ts       | 19 +++++++++++++
 packages/shared-types/src/input.ts            | 18 ++++++++++++
 6 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/apps/desktop/src/renderer/components/control/InputCapture.tsx b/apps/desktop/src/renderer/components/control/InputCapture.tsx
index 65fc83b..8c8e33e 100644
--- a/apps/desktop/src/renderer/components/control/InputCapture.tsx
+++ b/apps/desktop/src/renderer/components/control/InputCapture.tsx
@@ -156,6 +156,7 @@ export function InputCapture({
 
       {allowFullscreen && controlState === 'granted' && (
         <button
+          data-pairux-local-control
           onClick={toggleFullscreen}
           className="absolute right-2 top-2 z-10 rounded-lg bg-black/40 p-2 text-white/80 backdrop-blur-sm transition-colors hover:bg-black/60 hover:text-white"
           title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen + pointer lock'}
diff --git a/apps/desktop/src/renderer/hooks/useRemoteControl.ts b/apps/desktop/src/renderer/hooks/useRemoteControl.ts
index ac2900b..0b59c73 100644
--- a/apps/desktop/src/renderer/hooks/useRemoteControl.ts
+++ b/apps/desktop/src/renderer/hooks/useRemoteControl.ts
@@ -8,7 +8,11 @@ import type {
   MouseButton,
   ControlStateUI,
 } from '@pairux/shared-types';
-import { modifiersFromDomEvent } from '@pairux/shared-types';
+import {
+  isLocalControlTarget,
+  modifiersFromDomEvent,
+  shouldIgnoreFollowUpMouse,
+} from '@pairux/shared-types';
 import { getAccelPlatform } from '@/lib/viewerPlatform';
 
 interface UseRemoteControlOptions {
@@ -74,6 +78,8 @@ export function useRemoteControl({
   // Get relative coordinates (0-1) from a mouse event
   const getRelativeCoords = useCallback(
     (event?: MouseEvent): { x: number; y: number } | null => {
+      if (event && isLocalControlTarget(event.target)) return null;
+
       if (pointerLockPosition?.current) {
         const pos = pointerLockPosition.current;
         return { x: pos.x, y: pos.y };
@@ -99,7 +105,9 @@ export function useRemoteControl({
 
   // Handle mouse move
   const handleMouseMove = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
+
       const coords = getRelativeCoords(event);
       if (!coords) return;
 
@@ -129,11 +137,11 @@ export function useRemoteControl({
 
   // Handle mouse down
   const handleMouseDown = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
       if (!canSendInput) return;
 
       // Skip if a pointer event just fired (Chromium fires both).
-      if (Date.now() - lastPointerEventRef.current < 100) return;
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
 
       const coords = getRelativeCoords(event);
       if (!coords) return;
@@ -169,11 +177,11 @@ export function useRemoteControl({
 
   // Handle mouse up
   const handleMouseUp = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
       if (!canSendInput) return;
 
       // Skip if a pointer event just fired.
-      if (Date.now() - lastPointerEventRef.current < 100) return;
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
 
       const coords = getRelativeCoords(event);
       if (!coords) return;
@@ -247,6 +255,7 @@ export function useRemoteControl({
   const handleKeyDown = useCallback(
     (event: globalThis.KeyboardEvent) => {
       if (!canSendInput) return;
+      if (isLocalControlTarget(event.target)) return;
 
       // Don't capture browser shortcuts
       if (event.altKey && event.key === 'Tab') return;
@@ -273,6 +282,7 @@ export function useRemoteControl({
   const handleKeyUp = useCallback(
     (event: globalThis.KeyboardEvent) => {
       if (!canSendInput) return;
+      if (isLocalControlTarget(event.target)) return;
 
       const inputEvent: KeyboardInputEvent = {
         type: 'keyboard',
@@ -302,24 +312,24 @@ export function useRemoteControl({
   // the timestamp so the mouse-handler dedup skips the follow-up mouse event.
   const handlePointerDown = useCallback(
     (event: PointerEvent) => {
+      handleMouseDown(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseDown(event as unknown as MouseEvent);
     },
     [handleMouseDown]
   );
 
   const handlePointerUp = useCallback(
     (event: PointerEvent) => {
+      handleMouseUp(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseUp(event as unknown as MouseEvent);
     },
     [handleMouseUp]
   );
 
   const handlePointerMove = useCallback(
     (event: PointerEvent) => {
+      handleMouseMove(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseMove(event as unknown as MouseEvent);
     },
     [handleMouseMove]
   );
diff --git a/apps/web/src/hooks/useRemoteControl.ts b/apps/web/src/hooks/useRemoteControl.ts
index 27fe08a..532182c 100644
--- a/apps/web/src/hooks/useRemoteControl.ts
+++ b/apps/web/src/hooks/useRemoteControl.ts
@@ -8,7 +8,11 @@ import type {
   MouseButton,
   ControlStateUI,
 } from '@pairux/shared-types';
-import { modifiersFromDomEvent } from '@pairux/shared-types';
+import {
+  isLocalControlTarget,
+  modifiersFromDomEvent,
+  shouldIgnoreFollowUpMouse,
+} from '@pairux/shared-types';
 import { getAccelPlatform } from '@/lib/viewerPlatform';
 
 interface UseRemoteControlOptions {
@@ -68,6 +72,8 @@ export function useRemoteControl({
   // Get relative coordinates (0-1) from a mouse event
   const getRelativeCoords = useCallback(
     (event?: MouseEvent): { x: number; y: number } | null => {
+      if (event && isLocalControlTarget(event.target)) return null;
+
       if (pointerLockPosition?.current) {
         const pos = pointerLockPosition.current;
         return { x: pos.x, y: pos.y };
@@ -93,7 +99,9 @@ export function useRemoteControl({
 
   // Handle mouse move
   const handleMouseMove = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
+
       const coords = getRelativeCoords(event);
       if (!coords) return;
 
@@ -122,11 +130,11 @@ export function useRemoteControl({
 
   // Handle mouse down
   const handleMouseDown = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
       if (!canSendInput) return;
 
       // Skip if a pointer event just fired (Chromium fires both).
-      if (Date.now() - lastPointerEventRef.current < 100) return;
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
 
       const coords = getRelativeCoords(event);
       if (!coords) return;
@@ -162,11 +170,11 @@ export function useRemoteControl({
 
   // Handle mouse up
   const handleMouseUp = useCallback(
-    (event: MouseEvent) => {
+    (event: MouseEvent, fromPointer = false) => {
       if (!canSendInput) return;
 
       // Skip if a pointer event just fired.
-      if (Date.now() - lastPointerEventRef.current < 100) return;
+      if (shouldIgnoreFollowUpMouse(lastPointerEventRef.current, Date.now(), fromPointer)) return;
 
       const coords = getRelativeCoords(event);
       if (!coords) return;
@@ -240,6 +248,7 @@ export function useRemoteControl({
   const handleKeyDown = useCallback(
     (event: globalThis.KeyboardEvent) => {
       if (!canSendInput) return;
+      if (isLocalControlTarget(event.target)) return;
 
       // Don't capture browser shortcuts
       if (event.altKey && event.key === 'Tab') return;
@@ -266,6 +275,7 @@ export function useRemoteControl({
   const handleKeyUp = useCallback(
     (event: globalThis.KeyboardEvent) => {
       if (!canSendInput) return;
+      if (isLocalControlTarget(event.target)) return;
 
       const inputEvent: KeyboardInputEvent = {
         type: 'keyboard',
@@ -295,24 +305,24 @@ export function useRemoteControl({
   // the timestamp so the mouse-handler dedup skips the follow-up mouse event.
   const handlePointerDown = useCallback(
     (event: PointerEvent) => {
+      handleMouseDown(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseDown(event as unknown as MouseEvent);
     },
     [handleMouseDown]
   );
 
   const handlePointerUp = useCallback(
     (event: PointerEvent) => {
+      handleMouseUp(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseUp(event as unknown as MouseEvent);
     },
     [handleMouseUp]
   );
 
   const handlePointerMove = useCallback(
     (event: PointerEvent) => {
+      handleMouseMove(event as unknown as MouseEvent, true);
       lastPointerEventRef.current = Date.now();
-      handleMouseMove(event as unknown as MouseEvent);
     },
     [handleMouseMove]
   );
diff --git a/packages/shared-types/src/index.ts b/packages/shared-types/src/index.ts
index 09bd2ed..a6960f7 100644
--- a/packages/shared-types/src/index.ts
+++ b/packages/shared-types/src/index.ts
@@ -100,7 +100,12 @@ export type {
   QualityPreset,
 } from './input.js';
 
-export { QUALITY_PRESETS, modifiersFromDomEvent } from './input.js';
+export {
+  QUALITY_PRESETS,
+  isLocalControlTarget,
+  modifiersFromDomEvent,
+  shouldIgnoreFollowUpMouse,
+} from './input.js';
 
 // Voice audio settings shared by every client
 export {
diff --git a/packages/shared-types/src/input.test.ts b/packages/shared-types/src/input.test.ts
index 183d815..e13df4d 100644
--- a/packages/shared-types/src/input.test.ts
+++ b/packages/shared-types/src/input.test.ts
@@ -1,7 +1,9 @@
 import { describe, it, expect } from 'vitest';
 import {
   QUALITY_PRESETS,
+  isLocalControlTarget,
   modifiersFromDomEvent,
+  shouldIgnoreFollowUpMouse,
   type MouseEvent,
   type KeyboardEvent,
   type InputMessage,
@@ -264,4 +266,21 @@ describe('Input Types', () => {
       });
     });
   });
+
+  describe('remote input routing', () => {
+    it('processes pointer events before suppressing their follow-up mouse events', () => {
+      expect(shouldIgnoreFollowUpMouse(1_000, 1_000, true)).toBe(false);
+      expect(shouldIgnoreFollowUpMouse(1_000, 1_001, false)).toBe(true);
+      expect(shouldIgnoreFollowUpMouse(1_000, 1_100, false)).toBe(false);
+    });
+
+    it('recognizes controls that must stay local to the viewer', () => {
+      const local = { closest: () => ({ tagName: 'BUTTON' }) };
+      const remote = { closest: () => null };
+
+      expect(isLocalControlTarget(local)).toBe(true);
+      expect(isLocalControlTarget(remote)).toBe(false);
+      expect(isLocalControlTarget(null)).toBe(false);
+    });
+  });
 });
diff --git a/packages/shared-types/src/input.ts b/packages/shared-types/src/input.ts
index 7cb9d31..a59aa89 100644
--- a/packages/shared-types/src/input.ts
+++ b/packages/shared-types/src/input.ts
@@ -100,6 +100,24 @@ export function modifiersFromDomEvent(
   };
 }
 
+const POINTER_MOUSE_DEDUP_MS = 100;
+
+export function isLocalControlTarget(target: unknown): boolean {
+  if (target === null || typeof target !== 'object' || !('closest' in target)) return false;
+  const closest = target.closest;
+  return (
+    typeof closest === 'function' && closest.call(target, '[data-pairux-local-control]') !== null
+  );
+}
+
+export function shouldIgnoreFollowUpMouse(
+  lastPointerAt: number,
+  now: number,
+  fromPointer: boolean
+): boolean {
+  return !fromPointer && now - lastPointerAt < POINTER_MOUSE_DEDUP_MS;
+}
+
 // Keyboard event
 export interface KeyboardEvent {
   type: 'keyboard';