@omercnet/paseo-shared-browser 1.1.0-next.204.1 → 1.1.0-next.210.1

package/client/browser.tsx

@@ -29,6 +29,8 @@ import {
   type BrowserInputEvent,
   type BrowserState,
   captureBrowserRpc,
+  containedRect,
+  createImageSizeLoader,
   DEVICE_PRESETS,
   type DevicePresetId,
   detachBrowserRpc,
@@ -41,6 +43,7 @@ import {
   releaseControlRpc,
   resizeBrowserRpc,
   sendBrowserInputRpc,
+  toViewportPoint,
 } from "../shared/browser";
 
 const SPACE = {
@@ -88,12 +91,7 @@ interface Size {
   height: number;
 }
 
-interface DisplayRect extends Size {
-  x: number;
-  y: number;
-}
-
-interface DisplayPoint extends Size {
+interface DisplayPoint {
   x: number;
   y: number;
 }
@@ -115,21 +113,6 @@ const SPECIAL_KEYS: readonly { key: SpecialKey; label: string }[] = [
   { key: "Space", label: "Space" },
 ];
 
-function containedRect(container: Size, image: Size): DisplayRect | null {
-  if (container.width <= 0 || container.height <= 0 || image.width <= 0 || image.height <= 0) {
-    return null;
-  }
-  const scale = Math.min(container.width / image.width, container.height / image.height);
-  const width = image.width * scale;
-  const height = image.height * scale;
-  return {
-    x: (container.width - width) / 2,
-    y: (container.height - height) / 2,
-    width,
-    height,
-  };
-}
-
 function errorMessage(error: unknown): string {
   if (error instanceof Error && error.message.trim()) return error.message;
   return "The shared browser request failed.";
@@ -1253,16 +1236,34 @@ export function SharedBrowserPanel({
   const currentFrame = frame && state && isFrameCurrent(frame, state) ? frame : null;
   const canSendInput = canControl && Boolean(currentFrame) && !inputMutation.isPending;
 
+  const frameUri = useMemo(
+    () => (currentFrame ? `data:${currentFrame.mimeType};base64,${currentFrame.dataBase64}` : null),
+    [currentFrame],
+  );
+  const [imageSize, setImageSize] = useState<{ uri: string; size: Size } | null>(null);
+  const loadImageSize = useMemo(
+    () =>
+      createImageSizeLoader(
+        (uri, success, failure) => Image.getSize(uri, success, failure),
+        (uri, size) => setImageSize(size ? { uri, size } : null),
+      ),
+    [],
+  );
+  useEffect(() => {
+    if (frameUri) loadImageSize(frameUri);
+  }, [frameUri, loadImageSize]);
+  // The bitmap can disagree with the frame metadata; its own aspect ratio decides the rectangle.
   const displayRect = useMemo(
     () =>
       currentFrame
-        ? containedRect(containerSize, { width: currentFrame.width, height: currentFrame.height })
+        ? containedRect(
+            containerSize,
+            imageSize?.uri === frameUri
+              ? imageSize.size
+              : { width: currentFrame.width, height: currentFrame.height },
+          )
         : null,
-    [containerSize, currentFrame],
-  );
-  const frameUri = useMemo(
-    () => (currentFrame ? `data:${currentFrame.mimeType};base64,${currentFrame.dataBase64}` : null),
-    [currentFrame],
+    [containerSize, currentFrame, frameUri, imageSize],
   );
 
   const controlContext = useCallback(() => {
@@ -1329,7 +1330,7 @@ export function SharedBrowserPanel({
       if (!displayRect) return null;
       const x = Math.min(displayRect.width, Math.max(0, event.nativeEvent.locationX));
       const y = Math.min(displayRect.height, Math.max(0, event.nativeEvent.locationY));
-      return { x, y, width: displayRect.width, height: displayRect.height };
+      return { x, y };
     },
     [displayRect],
   );
@@ -1338,17 +1339,18 @@ export function SharedBrowserPanel({
     (event: GestureResponderEvent) => {
       const start = dragStartRef.current;
       const end = pointFromEvent(event);
+      const viewport = stateRef.current?.viewport;
       dragStartRef.current = null;
-      if (!start || !end) return;
+      if (!start || !end || !displayRect || !viewport) return;
+      const toViewport = (point: DisplayPoint) => toViewportPoint(point, displayRect, viewport);
       lastPointRef.current = { x: end.x, y: end.y };
       const distance = Math.hypot(end.x - start.x, end.y - start.y);
       if (distance >= DRAG_THRESHOLD) {
         if (swipeMode === "scroll") {
-          const current = stateRef.current;
-          const scale = current ? current.viewport.width / end.width : 1;
+          const scale = viewport.width / displayRect.width;
           sendEvent({
             kind: "scroll",
-            point: { ...start, width: end.width, height: end.height },
+            point: toViewport(start),
             deltaX: clampScrollDelta((start.x - end.x) * scale),
             deltaY: clampScrollDelta((start.y - end.y) * scale),
           });
@@ -1356,20 +1358,20 @@ export function SharedBrowserPanel({
         }
         sendEvent({
           kind: "drag",
-          start: { ...start, width: end.width, height: end.height },
-          end,
+          start: toViewport(start),
+          end: toViewport(end),
           button: interactionMode === "right" ? "right" : "left",
         });
         return;
       }
       sendEvent({
         kind: "click",
-        point: end,
+        point: toViewport(end),
         button: interactionMode === "right" ? "right" : "left",
         clickCount: interactionMode === "double" ? 2 : 1,
       });
     },
-    [interactionMode, pointFromEvent, sendEvent, swipeMode],
+    [displayRect, interactionMode, pointFromEvent, sendEvent, swipeMode],
   );
 
   const panResponder = useMemo(
@@ -1474,13 +1476,14 @@ export function SharedBrowserPanel({
 
   const scroll = useCallback(
     (deltaX: number, deltaY: number) => {
-      if (!displayRect) return;
+      const viewport = stateRef.current?.viewport;
+      if (!displayRect || !viewport) return;
       const previous = lastPointRef.current;
       const x = previous && previous.x <= displayRect.width ? previous.x : displayRect.width / 2;
       const y = previous && previous.y <= displayRect.height ? previous.y : displayRect.height / 2;
       sendEvent({
         kind: "scroll",
-        point: { x, y, width: displayRect.width, height: displayRect.height },
+        point: toViewportPoint({ x, y }, displayRect, viewport),
         deltaX,
         deltaY,
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omercnet/paseo-shared-browser",
-  "version": "1.1.0-next.204.1",
+  "version": "1.1.0-next.210.1",
   "description": "One real Chromium session per Paseo workspace, shared live across every connected client.",
   "keywords": [
     "browser",
@@ -43,8 +43,8 @@
     "check:write": "biome check --write .",
     "typecheck": "tsc --noEmit",
     "prepare:runtime": "node scripts/prepare-runtime.mjs",
-    "test": "vitest run tests/contracts.test.ts tests/lease.test.ts tests/runtime-lifecycle.test.ts tests/agent-access.test.ts tests/composer-pills.test.ts tests/sidebar.test.ts",
-    "test:unit": "vitest run tests/contracts.test.ts tests/lease.test.ts tests/runtime-lifecycle.test.ts tests/agent-access.test.ts tests/composer-pills.test.ts tests/sidebar.test.ts",
+    "test": "vitest run tests/contracts.test.ts tests/lease.test.ts tests/runtime-lifecycle.test.ts tests/agent-access.test.ts tests/composer-pills.test.ts tests/sidebar.test.ts tests/pointer-mapping.test.ts",
+    "test:unit": "vitest run tests/contracts.test.ts tests/lease.test.ts tests/runtime-lifecycle.test.ts tests/agent-access.test.ts tests/composer-pills.test.ts tests/sidebar.test.ts tests/pointer-mapping.test.ts",
     "test:smoke": "vitest run tests/browser.smoke.test.ts --testTimeout=30000"
   },
   "dependencies": {

package/shared/browser.ts

@@ -365,3 +365,70 @@ export function mapDisplayedPoint(
     y: Math.min(viewport.height - 1, Math.max(0, (point.y / point.height) * viewport.height)),
   };
 }
+
+export interface FrameSize {
+  width: number;
+  height: number;
+}
+
+export interface FrameRect extends FrameSize {
+  x: number;
+  y: number;
+}
+
+export function containedRect(container: FrameSize, image: FrameSize): FrameRect | null {
+  if (container.width <= 0 || container.height <= 0 || image.width <= 0 || image.height <= 0) {
+    return null;
+  }
+  const scale = Math.min(container.width / image.width, container.height / image.height);
+  const width = image.width * scale;
+  const height = image.height * scale;
+  return {
+    x: (container.width - width) / 2,
+    y: (container.height - height) / 2,
+    width,
+    height,
+  };
+}
+
+/** Converts a point in the displayed image to the canonical viewport, scaling both axes by viewport.width / rect.width. */
+export function toViewportPoint(
+  point: MappedPoint,
+  rect: FrameSize,
+  viewport: Viewport,
+): MappedPoint & FrameSize {
+  const scale = viewport.width / rect.width;
+  return {
+    x: point.x * scale,
+    y: Math.min(viewport.height, point.y * scale),
+    width: viewport.width,
+    height: viewport.height,
+  };
+}
+
+type GetImageSize = (
+  uri: string,
+  success: (width: number, height: number) => void,
+  failure: () => void,
+) => void;
+
+/** Looks up the intrinsic size once per distinct URI and drops results superseded by a newer URI. */
+export function createImageSizeLoader(
+  getSize: GetImageSize,
+  onSize: (uri: string, size: FrameSize | null) => void,
+): (uri: string) => void {
+  let current: string | null = null;
+  return (uri) => {
+    if (uri === current) return;
+    current = uri;
+    getSize(
+      uri,
+      (width, height) => {
+        if (current === uri) onSize(uri, { width, height });
+      },
+      () => {
+        if (current === uri) onSize(uri, null);
+      },
+    );
+  };
+}