@limrun/ui 0.14.0 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limrun/ui",
-  "version": "0.14.0",
+  "version": "0.14.2",
   "publishConfig": {
     "access": "public",
     "tag": "next"

package/src/components/remote-control.test.ts

@@ -0,0 +1,34 @@
+// Covers `withAuthenticationToken` only — the rest of <RemoteControl> is
+// integration-tested (see vitest.config.ts).
+//
+// Assertions parse the result and read decoded parameter values, so they
+// don't depend on whether a space serializes as `+` or `%20`.
+
+import { describe, expect, test } from 'vitest';
+import { withAuthenticationToken } from './remote-control';
+
+describe('withAuthenticationToken', () => {
+  test('adds the token alongside query parameters already on the endpoint', () => {
+    const result = new URL(
+      withAuthenticationToken('wss://example.com/socket?transport=webrtc', 'instance-token'),
+    );
+
+    expect(result.searchParams.get('transport')).toBe('webrtc');
+    expect(result.searchParams.get('token')).toBe('instance-token');
+  });
+
+  test('keeps a token containing URL syntax as a single decoded value', () => {
+    const token = 'instance token&scope=preview';
+    const result = new URL(withAuthenticationToken('wss://example.com/socket?transport=webrtc', token));
+
+    expect(result.searchParams.get('token')).toBe(token);
+    expect(result.searchParams.get('transport')).toBe('webrtc');
+    expect(result.searchParams.get('scope')).toBeNull();
+  });
+
+  test('replaces an existing token instead of duplicating it', () => {
+    const result = new URL(withAuthenticationToken('wss://example.com/socket?token=stale', 'fresh-token'));
+
+    expect(result.searchParams.getAll('token')).toEqual(['fresh-token']);
+  });
+});

package/src/components/remote-control.tsx

@@ -437,6 +437,13 @@ const detectPlatform = (url: string): DevicePlatform => {
   return 'ios';
 };
 
+// The endpoint may already carry query parameters, and the token may contain URL syntax.
+export const withAuthenticationToken = (url: string, token: string): string => {
+  const endpoint = new URL(url);
+  endpoint.searchParams.set('token', token);
+  return endpoint.toString();
+};
+
 type DeviceConfig = {
   videoBorderRadiusMultiplier: number;
   loadingLogo: string;
@@ -688,6 +695,14 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       pointerId1: number;
     };
     const twoFingerStateRef = useRef<TwoFingerState | null>(null);
+    // Wheel-scroll drag state; lives for a single synthesized gesture.
+    const wheelStateRef = useRef<{ pos: PointerGeometry; endTimer: number } | null>(null);
+    // Latest wheel handlers, so the once-attached native listener and the
+    // pointer machinery always call the current render's closures.
+    const wheelCallbacksRef = useRef<{ handle: (event: WheelEvent) => void; end: () => void }>({
+      handle: () => {},
+      end: () => {},
+    });
 
     // Hover point for rendering two-finger indicators when Alt is held.
     // Only computed/set when Alt is held to avoid unnecessary re-renders.
@@ -789,8 +804,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     };
 
     // Pointer ID used by inspect-driven taps. Distinct from human pointers
-    // (-1 mouse, -2 alt-mirror) and our touch identifiers so they never
-    // interfere with an in-progress drag.
+    // (-1 mouse, -2 alt-mirror), the synthesized wheel finger (-3), and our
+    // touch identifiers so they never interfere with an in-progress drag.
     const AX_TAP_POINTER_ID = -10;
 
     // Send a down+up tap at a viewport-space (clientX/Y) position. The point
@@ -854,6 +869,8 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
     // Fixed pointer IDs for Alt-simulated two-finger gestures
     const ALT_POINTER_ID_PRIMARY = -1;
     const ALT_POINTER_ID_MIRROR = -2;
+    // Synthesized finger for wheel-scroll drags.
+    const WHEEL_POINTER_ID = -3;
 
     // Helper to send a single-touch control message (used by both single-finger and Android two-finger paths)
     const sendSingleTouch = (
@@ -911,6 +928,11 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
 
       switch (eventType) {
         case 'down':
+          // A real pointer going down takes over from any synthesized
+          // wheel-scroll finger, so the tap isn't sent as a second finger.
+          if (pointerId !== WHEEL_POINTER_ID) {
+            wheelCallbacksRef.current.end();
+          }
           // For multi-touch: use ACTION_DOWN for first pointer, ACTION_POINTER_DOWN for additional pointers
           const currentPointerCount = activePointers.current.size;
           action = currentPointerCount === 0 ? AMOTION_EVENT.ACTION_DOWN : AMOTION_EVENT.ACTION_POINTER_DOWN;
@@ -1199,6 +1221,12 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
         p1: { x: x1, y: y1, id: pointerId1 },
       });
 
+      if (eventType === 'down') {
+        // A real two-finger gesture takes over from any synthesized
+        // wheel-scroll finger.
+        wheelCallbacksRef.current.end();
+      }
+
       if (platform === 'ios') {
         // iOS: use special two-finger message (type=18)
         const action =
@@ -1554,6 +1582,130 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }
     };
 
+    // Mouse wheel / trackpad scrolling over the stream scrolls inside the
+    // simulator. iOS has no scroll wheel, so we fake a finger: press down
+    // where the cursor is, drag it as wheel events come in, lift when they
+    // stop. If the fake finger reaches the screen edge before the user stops
+    // scrolling, lift and press again to keep going.
+    const WHEEL_END_QUIET_MS = 150;
+    const endWheelGesture = () => {
+      const state = wheelStateRef.current;
+      if (!state) return;
+      window.clearTimeout(state.endTimer);
+      applyPointerEvent(WHEEL_POINTER_ID, 'up', state.pos);
+      wheelStateRef.current = null;
+    };
+    const handleWheel = (event: WheelEvent) => {
+      // Trackpad pinches arrive as ctrl+wheel; don't turn them into scrolls.
+      if (event.ctrlKey) return;
+      // If the user is already touching/dragging (or holding Alt for the
+      // two-finger gesture), let that win - don't add a second fake finger.
+      if (isAltHeldRef.current || twoFingerStateRef.current) return;
+      const pointerCount = activePointers.current.size;
+      if (pointerCount > 1 || (pointerCount === 1 && !activePointers.current.has(WHEEL_POINTER_ID))) return;
+
+      const ctx = computeVideoMappingContext();
+      if (!ctx) return;
+      // Outside the rendered video (frame, letterbox) let the page scroll.
+      const relativeX = event.clientX - ctx.videoRect.left - ctx.offsetX;
+      const relativeY = event.clientY - ctx.videoRect.top - ctx.offsetY;
+      if (relativeX < 0 || relativeX > ctx.actualWidth || relativeY < 0 || relativeY > ctx.actualHeight) {
+        return;
+      }
+      const anchor = mapClientPointToVideo(ctx, event.clientX, event.clientY);
+      if (!anchor) return;
+      event.preventDefault();
+
+      // deltaMode: 0=pixels, 1=lines, 2=pages. Deltas are CSS pixels; convert
+      // to stream pixels so a tick scrolls the same visual distance at any
+      // window size.
+      const scaleX =
+        (event.deltaMode === 1 ? 16
+        : event.deltaMode === 2 ? ctx.actualWidth
+        : 1) *
+        (ctx.videoWidth / ctx.actualWidth);
+      const scaleY =
+        (event.deltaMode === 1 ? 16
+        : event.deltaMode === 2 ? ctx.actualHeight
+        : 1) *
+        (ctx.videoHeight / ctx.actualHeight);
+      const dx = -event.deltaX * scaleX;
+      const dy = -event.deltaY * scaleY;
+      const armEnd = (s: { endTimer: number }) => {
+        window.clearTimeout(s.endTimer);
+        s.endTimer = window.setTimeout(endWheelGesture, WHEEL_END_QUIET_MS);
+      };
+      if (dx === 0 && dy === 0) {
+        // Some wheel events carry no movement (momentum tails); just keep
+        // the gesture alive.
+        if (wheelStateRef.current) armEnd(wheelStateRef.current);
+        return;
+      }
+
+      // Where to press the fake finger down: at the cursor, but nudged away
+      // from the screen edges so the drag has room to travel.
+      const pressPoint = (): PointerGeometry => ({
+        videoWidth: anchor.videoWidth,
+        videoHeight: anchor.videoHeight,
+        videoX:
+          Math.abs(dx) > Math.abs(dy) ?
+            Math.min(Math.max(anchor.videoX, anchor.videoWidth * 0.2), anchor.videoWidth * 0.8)
+          : anchor.videoX,
+        videoY:
+          Math.abs(dy) >= Math.abs(dx) ?
+            Math.min(Math.max(anchor.videoY, anchor.videoHeight * 0.2), anchor.videoHeight * 0.8)
+          : anchor.videoY,
+      });
+
+      const advance = (p: PointerGeometry): PointerGeometry => ({
+        ...p,
+        videoX: Math.min(Math.max(p.videoX + dx, 0), p.videoWidth),
+        videoY: Math.min(Math.max(p.videoY + dy, 0), p.videoHeight),
+      });
+
+      let state = wheelStateRef.current;
+      if (!state) {
+        const start = pressPoint();
+        applyPointerEvent(WHEEL_POINTER_ID, 'down', start);
+        state = { pos: start, endTimer: 0 };
+        wheelStateRef.current = state;
+      } else {
+        window.clearTimeout(state.endTimer);
+      }
+
+      let pos = state.pos;
+      let next = advance(pos);
+      if (next.videoX === pos.videoX && next.videoY === pos.videoY) {
+        // Finger reached the screen edge: lift it, press again with room to
+        // travel, and move right away (a press that never moves would count
+        // as a tap).
+        applyPointerEvent(WHEEL_POINTER_ID, 'up', pos);
+        pos = pressPoint();
+        applyPointerEvent(WHEEL_POINTER_ID, 'down', pos);
+        next = advance(pos);
+      }
+      applyPointerEvent(WHEEL_POINTER_ID, 'move', next);
+      state.pos = next;
+      armEnd(state);
+    };
+    useEffect(() => {
+      wheelCallbacksRef.current = { handle: handleWheel, end: endWheelGesture };
+    });
+
+    // React attaches onWheel passively, so preventDefault (needed to keep the
+    // page from scrolling) requires a native non-passive listener. Cleanup
+    // lifts an in-flight synthesized finger before the channel goes away.
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container) return;
+      const listener = (event: WheelEvent) => wheelCallbacksRef.current.handle(event);
+      container.addEventListener('wheel', listener, { passive: false });
+      return () => {
+        wheelCallbacksRef.current.end();
+        container.removeEventListener('wheel', listener);
+      };
+    }, []);
+
     useEffect(() => {
       const handleKeyDown = (event: KeyboardEvent) => {
         if (event.key === 'Alt') {
@@ -2131,8 +2283,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
           parsed.protocol === 'wss:' ? 'https:'
           : parsed.protocol === 'ws:' ? 'http:'
           : parsed.protocol;
-        parsed.searchParams.set('token', token);
-        probeUrl = parsed.toString();
+        probeUrl = withAuthenticationToken(parsed.toString(), token);
       } catch {
         return false;
       }
@@ -2256,7 +2407,7 @@ export const RemoteControl = forwardRef<RemoteControlHandle, RemoteControlProps>
       }, CONNECTION_SUCCESS_TIMEOUT_MS);
 
       try {
-        const ws = new WebSocket(`${url}?token=${token}`);
+        const ws = new WebSocket(withAuthenticationToken(url, token));
         wsRef.current = ws;
 
         // Wait for WebSocket to connect

package/vitest.config.ts

@@ -12,8 +12,9 @@ import { defineConfig } from 'vitest/config';
 //
 // The actual <RemoteControl> component is intentionally NOT under unit
 // test here — its WebRTC plumbing is integration-tested via the demo +
-// staging instance. These tests cover the smaller, pure-logic modules:
-// `core/ax-tree.ts` and `core/ax-fetcher.ts`.
+// staging instance. These tests cover the smaller, pure-logic pieces:
+// `core/ax-tree.ts`, `core/ax-fetcher.ts` and the URL helper exported from
+// `components/remote-control.tsx`.
 export default defineConfig({
   test: {
     environment: 'jsdom',