@opengeni/react 7.1.2 → 7.2.0-canary.36239117573001

package/dist/{browser-viewer-TZ6T76E3.js → browser-viewer-GEYFZE2W.js}

@@ -1,6 +1,6 @@
 import {
   BrowserViewer
-} from "./chunk-CP6IFD2Z.js";
+} from "./chunk-6IUUN2AQ.js";
 import "./chunk-TV5PP2PE.js";
 import "./chunk-5YK2ZDIG.js";
 import "./chunk-KZ73RL76.js";
@@ -11,4 +11,4 @@ import "./chunk-JVYQRRC4.js";
 export {
   BrowserViewer
 };
-//# sourceMappingURL=browser-viewer-TZ6T76E3.js.map
+//# sourceMappingURL=browser-viewer-GEYFZE2W.js.map

package/dist/{chunk-CP6IFD2Z.js → chunk-6IUUN2AQ.js}

@@ -56,6 +56,7 @@ import {
   useCallback as useCallback8,
   useEffect as useEffect8,
   useId,
+  useLayoutEffect,
   useMemo as useMemo2,
   useRef as useRef8,
   useState as useState8
@@ -74,7 +75,8 @@ var RELAY_TAG_CLOSE = 4;
 var MAX_AUTOMATIC_RECONNECTS_WITHOUT_A_FRAME = 2;
 function useBrowserFrameStream(options) {
   const { client, workspaceId } = useEmbeddedBrowserInteraction(options);
-  const enabled = options.enabled ?? true;
+  const pageLive = usePageLiveActivity();
+  const enabled = (options.enabled ?? true) && pageLive;
   const [nonce, setNonce] = useState(0);
   const [result, setResult] = useState({
     state: "idle",
@@ -1797,6 +1799,7 @@ function BrowserViewer({
   const previousSessionIdRef = useRef8(sessionId);
   const seenInterventionIdsRef = useRef8(/* @__PURE__ */ new Set());
   const diagnosticRequestRef = useRef8(0);
+  const viewportFocusHandoffRef = useRef8(null);
   const [diagnosticsView, setDiagnosticsView] = useState8(null);
   const notifyError = useCallback8(
     (cause, fallback) => {
@@ -1890,12 +1893,8 @@ function BrowserViewer({
       setResumeAttempt(
         (visible) => visible?.sessionId === selectedRegistrySession.id ? null : visible
       );
-      return;
     }
-    if (selectedRegistrySession.lifecycle === "suspended") {
-      void wakeBrowser(selectedRegistrySession);
-    }
-  }, [selectedRegistrySession, wakeBrowser]);
+  }, [selectedRegistrySession]);
   const browser = useBrowserSession({
     ...override,
     browserSessionId: selection?.sessionId ?? null,
@@ -2326,6 +2325,12 @@ function BrowserViewer({
           /* @__PURE__ */ jsx(
             BrowserViewport,
             {
+              focusHandoffRef: viewportFocusHandoffRef,
+              focusScope: JSON.stringify([
+                selection?.sessionId,
+                browser.selectedTarget?.id,
+                browser.selectedTarget?.targetGeneration
+              ]),
               frame: displayedFrame,
               connectionState: displayConnectionState,
               supportsLiveFrames,
@@ -2350,7 +2355,14 @@ function BrowserViewer({
               reconnectLabel: (attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error)) && replacementChromeDevice ? "Open a fresh Connected Chrome" : void 0,
               reconnectMessage: attachedGenerationLoss || isAttachedChromeGenerationLossError(frames.error) ? "Chrome reconnected\u2014open a fresh browser/desktop." : void 0,
               onError: (cause) => notifyError(cause, "Browser input failed.")
-            }
+            },
+            JSON.stringify([
+              selection?.sessionId,
+              browser.selectedTarget?.id,
+              browser.selectedTarget?.targetGeneration,
+              browser.selectedTarget?.documentGeneration,
+              frames.attachment?.controllerGeneration
+            ])
           ),
           /* @__PURE__ */ jsx(
             BrowserStatusBar,
@@ -3073,11 +3085,24 @@ function BrowserViewport(props) {
   const actionTailRef = useRef8(Promise.resolve());
   const actionQueueEpochRef = useRef8(0);
   const queuedFrameRef = useRef8(null);
+  const currentFrameRef = useRef8(props.frame);
+  const paintedFrameRef = useRef8(null);
+  const [paintedFrame, setPaintedFrame] = useState8(null);
   const decodingFrameRef = useRef8(false);
   const mountedRef = useRef8(true);
   actionRef.current = props.onAction;
   readClipboardRef.current = props.onReadClipboard;
   errorRef.current = props.onError;
+  const clearBufferedInput = useCallback8(() => {
+    if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
+    if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
+    wheelRef.current = null;
+    pendingTextRef.current = null;
+    pointerStartRef.current = null;
+    lastClickRef.current = null;
+    composingRef.current = false;
+    if (inputRef.current) inputRef.current.value = "";
+  }, []);
   const paintQueuedFrames = useCallback8(() => {
     if (decodingFrameRef.current) return;
     decodingFrameRef.current = true;
@@ -3096,8 +3121,10 @@ function BrowserViewport(props) {
               const bitmap = await createImageBitmap(blob);
               try {
                 const canvas2 = canvasRef.current;
-                if (mountedRef.current && canvas2) {
+                if (mountedRef.current && canvas2 && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current)) {
                   paintCanvas(canvas2, bitmap, frame.width, frame.height);
+                  paintedFrameRef.current = frame;
+                  setPaintedFrame(frame);
                 }
               } finally {
                 bitmap.close();
@@ -3107,11 +3134,14 @@ function BrowserViewport(props) {
             objectUrl = URL.createObjectURL(blob);
             const image = await loadImage(objectUrl);
             const canvas = canvasRef.current;
-            if (mountedRef.current && canvas) {
+            if (mountedRef.current && canvas && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current)) {
               paintCanvas(canvas, image, frame.width, frame.height);
+              paintedFrameRef.current = frame;
+              setPaintedFrame(frame);
             }
           } catch (cause) {
-            if (mountedRef.current) errorRef.current(cause);
+            if (mountedRef.current && currentFrameRef.current && sameBrowserDocument(frame, currentFrameRef.current))
+              errorRef.current(cause);
           } finally {
             if (objectUrl) URL.revokeObjectURL(objectUrl);
           }
@@ -3122,38 +3152,56 @@ function BrowserViewport(props) {
       }
     })();
   }, []);
-  useEffect8(() => {
+  useLayoutEffect(() => {
+    const keyboardInput = inputRef.current;
+    const focusHandoff = props.focusHandoffRef;
     mountedRef.current = true;
+    if (focusHandoff.current === props.focusScope) {
+      keyboardInput?.focus({ preventScroll: true });
+    }
+    focusHandoff.current = null;
     return () => {
+      if (document.activeElement === keyboardInput) {
+        focusHandoff.current = props.focusScope;
+      }
       mountedRef.current = false;
+      actionQueueEpochRef.current += 1;
       queuedFrameRef.current = null;
+      clearBufferedInput();
     };
-  }, []);
-  useEffect8(() => {
-    if (!props.frame) return;
+  }, [clearBufferedInput, props.focusHandoffRef, props.focusScope]);
+  useLayoutEffect(() => {
+    if (currentFrameRef.current && !props.frame) {
+      actionQueueEpochRef.current += 1;
+      clearBufferedInput();
+    }
+    currentFrameRef.current = props.frame;
+    if (!props.frame) {
+      queuedFrameRef.current = null;
+      paintedFrameRef.current = null;
+      setPaintedFrame(null);
+      return;
+    }
     queuedFrameRef.current = props.frame;
     paintQueuedFrames();
-  }, [paintQueuedFrames, props.frame]);
-  useEffect8(
-    () => () => {
-      if (wheelRef.current?.timer) clearTimeout(wheelRef.current.timer);
-      if (pendingTextRef.current?.timer) clearTimeout(pendingTextRef.current.timer);
-    },
-    []
-  );
+  }, [clearBufferedInput, paintQueuedFrames, props.frame]);
   const enqueue = useCallback8(
     (action, frame, after) => {
       const epoch = actionQueueEpochRef.current;
+      const dispatch = actionRef.current;
       actionTailRef.current = actionTailRef.current.catch(() => void 0).then(async () => {
-        if (epoch !== actionQueueEpochRef.current) return;
-        const receipt = await actionRef.current(action, frame);
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
+        const receipt = await dispatch(action, frame);
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
         await after?.(receipt);
       }).catch((cause) => {
+        if (!mountedRef.current || epoch !== actionQueueEpochRef.current) return;
         actionQueueEpochRef.current += 1;
+        clearBufferedInput();
         errorRef.current(cause);
       });
     },
-    []
+    [clearBufferedInput]
   );
   const point = useCallback8(
     (frame, clientX, clientY) => browserPoint(canvasRef.current, frame, clientX, clientY),
@@ -3169,15 +3217,34 @@ function BrowserViewport(props) {
   const flushPendingClick = useCallback8(() => {
     lastClickRef.current = null;
   }, []);
+  const flushPendingWheel = useCallback8(() => {
+    const batch = wheelRef.current;
+    if (!batch) return;
+    if (batch.timer) clearTimeout(batch.timer);
+    wheelRef.current = null;
+    enqueue(
+      {
+        type: "pointer",
+        action: "scroll",
+        x: batch.x,
+        y: batch.y,
+        deltaX: batch.deltaX,
+        deltaY: batch.deltaY
+      },
+      batch.frame
+    );
+  }, [enqueue]);
   const pointerDown = (event) => {
-    if (!props.frame || event.button !== 0) return;
+    const frame = paintedFrameRef.current;
+    if (!frame || event.button !== 0) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     pointerStartRef.current = {
       x: event.clientX,
       y: event.clientY,
       pointerId: event.pointerId,
-      frame: props.frame
+      frame
     };
     event.currentTarget.setPointerCapture?.(event.pointerId);
     inputRef.current?.focus({ preventScroll: true });
@@ -3216,48 +3283,39 @@ function BrowserViewport(props) {
   };
   const contextMenu = (event) => {
     event.preventDefault();
-    const frame = props.frame;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     const at = point(frame, event.clientX, event.clientY);
     if (at) enqueue({ type: "pointer", action: "click", x: at.x, y: at.y, button: "right" }, frame);
   };
   const wheel = (event) => {
-    const frame = props.frame;
+    const frame = paintedFrameRef.current;
     if (!frame) return;
     const at = point(frame, event.clientX, event.clientY);
     if (!at) return;
     flushPendingText();
     flushPendingClick();
     event.preventDefault();
-    const pending = wheelRef.current;
-    if (pending?.timer) clearTimeout(pending.timer);
+    let pending = wheelRef.current;
+    if (pending && (!sameBrowserDocument(pending.frame, frame) || Math.hypot(pending.x - at.x, pending.y - at.y) > 6)) {
+      flushPendingWheel();
+      pending = null;
+    }
     wheelRef.current = {
       x: at.x,
       y: at.y,
-      deltaX: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaX : 0) + event.deltaX,
-      deltaY: (pending && sameFrameFence(pending.frame, frame) ? pending.deltaY : 0) + event.deltaY,
+      deltaX: (pending?.deltaX ?? 0) + event.deltaX,
+      deltaY: (pending?.deltaY ?? 0) + event.deltaY,
       frame,
-      timer: setTimeout(() => {
-        const batch = wheelRef.current;
-        wheelRef.current = null;
-        if (batch)
-          enqueue(
-            {
-              type: "pointer",
-              action: "scroll",
-              x: batch.x,
-              y: batch.y,
-              deltaX: batch.deltaX,
-              deltaY: batch.deltaY
-            },
-            batch.frame
-          );
-      }, 45)
+      // Retain the first event's deadline so a continuous gesture keeps moving.
+      timer: pending?.timer ?? setTimeout(flushPendingWheel, 45)
     };
   };
   const keyDown = (event) => {
+    flushPendingWheel();
     const command = event.metaKey || event.ctrlKey;
     if (props.clipboardEnabled && command && !event.altKey && ["c", "v"].includes(event.key.toLowerCase())) {
       flushPendingText();
@@ -3268,15 +3326,18 @@ function BrowserViewport(props) {
     event.preventDefault();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "press", key }, props.frame);
+    enqueue({ type: "press", key }, paintedFrameRef.current);
   };
   const copy = (event) => {
     if (!props.clipboardEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
-    enqueue({ type: "clipboard", operation: "copy" }, props.frame, async () => {
-      const clipboard = await readClipboardRef.current();
+    const readClipboard = readClipboardRef.current;
+    enqueue({ type: "clipboard", operation: "copy" }, paintedFrameRef.current, async () => {
+      const clipboard = await readClipboard();
+      if (!mountedRef.current) return;
       if (clipboard.text.length === 0) return;
       if (!await copyTextToClipboard(clipboard.text)) {
         throw new Error("Browser text could not be copied to the local clipboard");
@@ -3286,6 +3347,7 @@ function BrowserViewport(props) {
   const paste = (event) => {
     if (!props.clipboardEnabled) return;
     event.preventDefault();
+    flushPendingWheel();
     flushPendingText();
     flushPendingClick();
     enqueue(
@@ -3294,15 +3356,16 @@ function BrowserViewport(props) {
         operation: "paste",
         text: event.clipboardData.getData("text/plain")
       },
-      props.frame
+      paintedFrameRef.current
     );
   };
   const input = (value, nativeComposing = false) => {
     if (composingRef.current || nativeComposing) return;
     if (!value) return;
+    flushPendingWheel();
     flushPendingClick();
     const pending = pendingTextRef.current;
-    if (pending && sameOptionalBrowserFrame(pending.frame, props.frame)) {
+    if (pending && sameOptionalBrowserFrame(pending.frame, paintedFrameRef.current)) {
       clearTimeout(pending.timer);
       pending.text += value;
       pending.timer = setTimeout(flushPendingText, 16);
@@ -3310,7 +3373,7 @@ function BrowserViewport(props) {
       flushPendingText();
       pendingTextRef.current = {
         text: value,
-        frame: props.frame,
+        frame: paintedFrameRef.current,
         timer: setTimeout(flushPendingText, 16)
       };
     }
@@ -3323,7 +3386,7 @@ function BrowserViewport(props) {
     composingRef.current = false;
     input(event.currentTarget.value || event.data);
   };
-  const showCanvas = props.frame !== null;
+  const showCanvas = props.frame !== null && paintedFrame !== null && sameBrowserDocument(props.frame, paintedFrame);
   return /* @__PURE__ */ jsxs("div", { className: "relative min-h-0 flex-1 overflow-hidden bg-black", children: [
     /* @__PURE__ */ jsx(
       "canvas",
@@ -3893,7 +3956,10 @@ function frameMatchesSelectedTarget(frame, session, target) {
   );
 }
 function sameFrameFence(left, right) {
-  return left.browserSessionId === right.browserSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration && left.documentGeneration === right.documentGeneration && left.frameId === right.frameId;
+  return sameBrowserDocument(left, right) && left.frameId === right.frameId;
+}
+function sameBrowserDocument(left, right) {
+  return left.browserSessionId === right.browserSessionId && left.controllerGeneration === right.controllerGeneration && left.targetId === right.targetId && left.targetGeneration === right.targetGeneration && left.documentGeneration === right.documentGeneration;
 }
 function sameOptionalBrowserFrame(left, right) {
   return left === null || right === null ? left === right : sameFrameFence(left, right);
@@ -3978,4 +4044,4 @@ export {
   useBrowserFrameStream,
   BrowserViewer
 };
-//# sourceMappingURL=chunk-CP6IFD2Z.js.map
+//# sourceMappingURL=chunk-6IUUN2AQ.js.map