@midscene/playground-app 1.8.4-beta-20260521070317.0 → 1.8.4

package/dist/es/DeviceInteractionLayer.mjs

@@ -107,7 +107,7 @@ function inscribedContentRect(panel, deviceSize) {
         height: renderedHeight
     };
 }
-function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
+function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, contentRef, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
     const overlayRef = useRef(null);
     const keyboardSinkRef = useRef(null);
     const activePointer = useRef(null);
@@ -149,7 +149,9 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardE
     const handlePointerDown = useCallback((event)=>{
         if (!enabled || !deviceSize || !overlayRef.current) return;
         if (0 !== event.button && 'mouse' === event.pointerType) return;
-        const panelRect = overlayRef.current.getBoundingClientRect();
+        var _contentRef_current;
+        const measurementSource = null != (_contentRef_current = null == contentRef ? void 0 : contentRef.current) ? _contentRef_current : overlayRef.current;
+        const panelRect = measurementSource.getBoundingClientRect();
         const contentRect = inscribedContentRect(panelRect, deviceSize);
         if (event.clientX < contentRect.left || event.clientX > contentRect.left + contentRect.width || event.clientY < contentRect.top || event.clientY > contentRect.top + contentRect.height) {
             keyboardArmedRef.current = false;
@@ -168,6 +170,7 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardE
         };
         event.preventDefault();
     }, [
+        contentRef,
         enabled,
         deviceSize,
         focusKeyboardSink,

package/dist/es/DisconnectedPreview.mjs

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import connection_closed from "./icons/connection-closed.mjs";
+function DisconnectedPreview({ title = 'Connect to a device' }) {
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            display: 'flex',
+            height: '100%',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ jsxs("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 4
+            },
+            children: [
+                /*#__PURE__*/ jsx(connection_closed, {
+                    "aria-hidden": "true",
+                    style: {
+                        width: 24,
+                        height: 24,
+                        objectFit: 'contain'
+                    }
+                }),
+                /*#__PURE__*/ jsx("h2", {
+                    style: {
+                        margin: 0,
+                        whiteSpace: 'nowrap',
+                        textAlign: 'center',
+                        fontSize: 13,
+                        lineHeight: '24px',
+                        fontWeight: 400,
+                        color: 'rgba(0, 0, 0, 0.85)'
+                    },
+                    children: title
+                })
+            ]
+        })
+    });
+}
+export { DisconnectedPreview };

package/dist/es/PlaygroundApp.mjs

@@ -3,6 +3,7 @@ import { Logo, NavActions } from "@midscene/visualizer";
 import { Layout } from "antd";
 import { useEffect, useState } from "react";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+import { DisconnectedPreview } from "./DisconnectedPreview.mjs";
 import { PlaygroundPreview } from "./PlaygroundPreview.mjs";
 import { PlaygroundThemeProvider } from "./PlaygroundThemeProvider.mjs";
 import { usePlaygroundController } from "./controller/usePlaygroundController.mjs";
@@ -115,13 +116,13 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
                             className: "app-panel right-panel",
                             children: /*#__PURE__*/ jsx("div", {
                                 className: "panel-content right-panel-content",
-                                children: /*#__PURE__*/ jsx(PlaygroundPreview, {
+                                children: controller.state.sessionViewState.connected ? /*#__PURE__*/ jsx(PlaygroundPreview, {
                                     playgroundSDK: controller.state.playgroundSDK,
                                     runtimeInfo: controller.state.runtimeInfo,
                                     serverUrl: serverUrl,
                                     serverOnline: controller.state.serverOnline,
                                     isUserOperating: controller.state.isUserOperating
-                                })
+                                }) : /*#__PURE__*/ jsx(DisconnectedPreview, {})
                             })
                         })
                     ]

package/dist/es/PreviewRenderer.mjs

@@ -48,6 +48,8 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const [streamSize, setStreamSize] = useState(null);
     const [actionTypes, setActionTypes] = useState(null);
     const manualControlQueueRef = useRef(Promise.resolve());
+    const previewContentRef = useRef(null);
+    const resolvedScreenshotViewerMode = null != screenshotViewerMode ? screenshotViewerMode : 'screen-only';
     var _actionTypes_includes;
     const manualControlEnabled = null != (_actionTypes_includes = null == actionTypes ? void 0 : actionTypes.includes('Tap')) ? _actionTypes_includes : false;
     const manualDragActionType = (null == actionTypes ? void 0 : actionTypes.includes('Swipe')) ? 'Swipe' : 'DragAndDrop';
@@ -269,18 +271,21 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
                 onStatusChange: onScrcpyStatusChange,
                 renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl,
-                viewportStyle: scrcpyViewportStyle
+                viewportStyle: scrcpyViewportStyle,
+                contentRef: previewContentRef
             }) : /*#__PURE__*/ jsx(ScreenshotViewer, {
                 getScreenshot: ()=>useScreenshot ? playgroundSDK.getScreenshot() : Promise.resolve(null),
                 getInterfaceInfo: ()=>playgroundSDK.getInterfaceInfo(),
                 serverOnline: serverOnline,
                 isUserOperating: isUserOperating,
                 mjpegUrl: previewConnection.mjpegUrl,
-                mode: screenshotViewerMode
+                mode: resolvedScreenshotViewerMode,
+                contentRef: previewContentRef
             }),
             /*#__PURE__*/ jsx(DeviceInteractionLayer, {
                 enabled: manualControlEnabled && serverOnline && 'none' !== previewConnection.type,
                 deviceSize: deviceSize,
+                contentRef: previewContentRef,
                 onTap: handleTap,
                 onSwipe: handleSwipe,
                 keyboardEnabled: manualKeyboardEnabled,

package/dist/es/ScrcpyPanel.mjs

@@ -75,7 +75,7 @@ function _object_spread_props(target, source) {
     return target;
 }
 const { Text } = Typography;
-function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle }) {
+function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle, contentRef }) {
     const canvasStageRef = useRef(null);
     const socketRef = useRef(null);
     const decoderRef = useRef(null);
@@ -307,6 +307,7 @@ function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusCha
                 description: errorMessage
             }) : null,
             /*#__PURE__*/ jsxs("div", {
+                ref: contentRef,
                 style: _object_spread({
                     position: 'relative',
                     flex: 1,

package/dist/es/icons/connection-closed.mjs

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function connection_closed_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else connection_closed_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const SvgConnectionClosed = (props)=>/*#__PURE__*/ jsxs("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        fill: "none",
+        viewBox: "0 0 24 24"
+    }, props), {
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#6D6D6D",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M22 9.483A14.53 14.53 0 0 0 9.75 5.674M19 12.9a9.85 9.85 0 0 0-4.75-2.642M5 12.9a10 10 0 0 1 2.18-1.65M8 16.157a5.63 5.63 0 0 1 2.5-1.455"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                fill: "#6D6D6D",
+                fillRule: "evenodd",
+                d: "M12 20a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5",
+                clipRule: "evenodd"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#6D6D6D",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M20 20 4 4M2 9.483a15 15 0 0 1 1.75-1.42"
+            })
+        ]
+    }));
+const connection_closed = SvgConnectionClosed;
+export { connection_closed as default };

package/dist/lib/DeviceInteractionLayer.js

@@ -148,7 +148,7 @@ function inscribedContentRect(panel, deviceSize) {
         height: renderedHeight
     };
 }
-function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
+function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled = false, onTextInput, onKeyboardPress, contentRef, tapMaxDistance = 8, tapMaxDurationMs = 250, style }) {
     const overlayRef = (0, external_react_namespaceObject.useRef)(null);
     const keyboardSinkRef = (0, external_react_namespaceObject.useRef)(null);
     const activePointer = (0, external_react_namespaceObject.useRef)(null);
@@ -190,7 +190,9 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardE
     const handlePointerDown = (0, external_react_namespaceObject.useCallback)((event)=>{
         if (!enabled || !deviceSize || !overlayRef.current) return;
         if (0 !== event.button && 'mouse' === event.pointerType) return;
-        const panelRect = overlayRef.current.getBoundingClientRect();
+        var _contentRef_current;
+        const measurementSource = null != (_contentRef_current = null == contentRef ? void 0 : contentRef.current) ? _contentRef_current : overlayRef.current;
+        const panelRect = measurementSource.getBoundingClientRect();
         const contentRect = inscribedContentRect(panelRect, deviceSize);
         if (event.clientX < contentRect.left || event.clientX > contentRect.left + contentRect.width || event.clientY < contentRect.top || event.clientY > contentRect.top + contentRect.height) {
             keyboardArmedRef.current = false;
@@ -209,6 +211,7 @@ function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardE
         };
         event.preventDefault();
     }, [
+        contentRef,
         enabled,
         deviceSize,
         focusKeyboardSink,

package/dist/lib/DisconnectedPreview.js

@@ -0,0 +1,91 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DisconnectedPreview: ()=>DisconnectedPreview
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
+const connection_closed_js_namespaceObject = require("./icons/connection-closed.js");
+var connection_closed_js_default = /*#__PURE__*/ __webpack_require__.n(connection_closed_js_namespaceObject);
+external_react_default();
+function DisconnectedPreview({ title = 'Connect to a device' }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        style: {
+            display: 'flex',
+            height: '100%',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+            style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 4
+            },
+            children: [
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(connection_closed_js_default(), {
+                    "aria-hidden": "true",
+                    style: {
+                        width: 24,
+                        height: 24,
+                        objectFit: 'contain'
+                    }
+                }),
+                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("h2", {
+                    style: {
+                        margin: 0,
+                        whiteSpace: 'nowrap',
+                        textAlign: 'center',
+                        fontSize: 13,
+                        lineHeight: '24px',
+                        fontWeight: 400,
+                        color: 'rgba(0, 0, 0, 0.85)'
+                    },
+                    children: title
+                })
+            ]
+        })
+    });
+}
+exports.DisconnectedPreview = __webpack_exports__.DisconnectedPreview;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DisconnectedPreview"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/PlaygroundApp.js

@@ -40,6 +40,7 @@ const visualizer_namespaceObject = require("@midscene/visualizer");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 const external_react_resizable_panels_namespaceObject = require("react-resizable-panels");
+const external_DisconnectedPreview_js_namespaceObject = require("./DisconnectedPreview.js");
 const external_PlaygroundPreview_js_namespaceObject = require("./PlaygroundPreview.js");
 const external_PlaygroundThemeProvider_js_namespaceObject = require("./PlaygroundThemeProvider.js");
 const usePlaygroundController_js_namespaceObject = require("./controller/usePlaygroundController.js");
@@ -154,13 +155,13 @@ function PlaygroundApp({ serverUrl, appVersion, title = 'Playground', defaultDev
                             className: "app-panel right-panel",
                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: "panel-content right-panel-content",
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PlaygroundPreview_js_namespaceObject.PlaygroundPreview, {
+                                children: controller.state.sessionViewState.connected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PlaygroundPreview_js_namespaceObject.PlaygroundPreview, {
                                     playgroundSDK: controller.state.playgroundSDK,
                                     runtimeInfo: controller.state.runtimeInfo,
                                     serverUrl: serverUrl,
                                     serverOnline: controller.state.serverOnline,
                                     isUserOperating: controller.state.isUserOperating
-                                })
+                                }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DisconnectedPreview_js_namespaceObject.DisconnectedPreview, {})
                             })
                         })
                     ]

package/dist/lib/PreviewRenderer.js

@@ -76,6 +76,8 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
     const [streamSize, setStreamSize] = (0, external_react_namespaceObject.useState)(null);
     const [actionTypes, setActionTypes] = (0, external_react_namespaceObject.useState)(null);
     const manualControlQueueRef = (0, external_react_namespaceObject.useRef)(Promise.resolve());
+    const previewContentRef = (0, external_react_namespaceObject.useRef)(null);
+    const resolvedScreenshotViewerMode = null != screenshotViewerMode ? screenshotViewerMode : 'screen-only';
     var _actionTypes_includes;
     const manualControlEnabled = null != (_actionTypes_includes = null == actionTypes ? void 0 : actionTypes.includes('Tap')) ? _actionTypes_includes : false;
     const manualDragActionType = (null == actionTypes ? void 0 : actionTypes.includes('Swipe')) ? 'Swipe' : 'DragAndDrop';
@@ -297,18 +299,21 @@ function PreviewRenderer({ connectingOverlay, onDeviceSizeChange, onScrcpyStatus
                 onStatusChange: onScrcpyStatusChange,
                 renderErrorOverlay: renderErrorOverlay,
                 serverUrl: previewConnection.scrcpyUrl,
-                viewportStyle: scrcpyViewportStyle
+                viewportStyle: scrcpyViewportStyle,
+                contentRef: previewContentRef
             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(visualizer_namespaceObject.ScreenshotViewer, {
                 getScreenshot: ()=>useScreenshot ? playgroundSDK.getScreenshot() : Promise.resolve(null),
                 getInterfaceInfo: ()=>playgroundSDK.getInterfaceInfo(),
                 serverOnline: serverOnline,
                 isUserOperating: isUserOperating,
                 mjpegUrl: previewConnection.mjpegUrl,
-                mode: screenshotViewerMode
+                mode: resolvedScreenshotViewerMode,
+                contentRef: previewContentRef
             }),
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_DeviceInteractionLayer_js_namespaceObject.DeviceInteractionLayer, {
                 enabled: manualControlEnabled && serverOnline && 'none' !== previewConnection.type,
                 deviceSize: deviceSize,
+                contentRef: previewContentRef,
                 onTap: handleTap,
                 onSwipe: handleSwipe,
                 keyboardEnabled: manualKeyboardEnabled,

package/dist/lib/ScrcpyPanel.js

@@ -1,5 +1,14 @@
 "use strict";
 var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
 (()=>{
     __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
@@ -31,6 +40,7 @@ const scrcpy_namespaceObject = require("@yume-chan/scrcpy");
 const scrcpy_decoder_webcodecs_namespaceObject = require("@yume-chan/scrcpy-decoder-webcodecs");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
+var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
 const external_socket_io_client_namespaceObject = require("socket.io-client");
 const external_scrcpy_preview_js_namespaceObject = require("./scrcpy-preview.js");
 const external_scrcpy_stream_js_namespaceObject = require("./scrcpy-stream.js");
@@ -102,8 +112,9 @@ function _object_spread_props(target, source) {
     });
     return target;
 }
+external_react_default();
 const { Text } = external_antd_namespaceObject.Typography;
-function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = external_scrcpy_preview_js_namespaceObject.SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle }) {
+function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs = external_scrcpy_preview_js_namespaceObject.SCRCPY_METADATA_TIMEOUT_MS, reconnectInterval = 3000, viewportStyle, contentRef }) {
     const canvasStageRef = (0, external_react_namespaceObject.useRef)(null);
     const socketRef = (0, external_react_namespaceObject.useRef)(null);
     const decoderRef = (0, external_react_namespaceObject.useRef)(null);
@@ -335,6 +346,7 @@ function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusCha
                 description: errorMessage
             }) : null,
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                ref: contentRef,
                 style: _object_spread({
                     position: 'relative',
                     flex: 1,

package/dist/lib/icons/connection-closed.js

@@ -0,0 +1,110 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    default: ()=>connection_closed
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = null != arguments[i] ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if ("function" == typeof Object.getOwnPropertySymbols) ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+        }));
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function connection_closed_ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = null != source ? source : {};
+    if (Object.getOwnPropertyDescriptors) Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    else connection_closed_ownKeys(Object(source)).forEach(function(key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+    return target;
+}
+const SvgConnectionClosed = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", _object_spread_props(_object_spread({
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 24,
+        height: 24,
+        fill: "none",
+        viewBox: "0 0 24 24"
+    }, props), {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                stroke: "#6D6D6D",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M22 9.483A14.53 14.53 0 0 0 9.75 5.674M19 12.9a9.85 9.85 0 0 0-4.75-2.642M5 12.9a10 10 0 0 1 2.18-1.65M8 16.157a5.63 5.63 0 0 1 2.5-1.455"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                fill: "#6D6D6D",
+                fillRule: "evenodd",
+                d: "M12 20a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5",
+                clipRule: "evenodd"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                stroke: "#6D6D6D",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M20 20 4 4M2 9.483a15 15 0 0 1 1.75-1.42"
+            })
+        ]
+    }));
+const connection_closed = SvgConnectionClosed;
+exports["default"] = __webpack_exports__["default"];
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/DeviceInteractionLayer.d.ts

@@ -26,6 +26,14 @@ export interface DeviceInteractionLayerProps {
         x: number;
         y: number;
     }) => void;
+    /**
+     * Element whose bounding box represents the actual screen-mirror area
+     * (the `<img>`/canvas container). When provided, pointer coordinates are
+     * projected against this element instead of the overlay itself — so any
+     * chrome wrapping the preview (toolbars, headers, padding) does not shift
+     * taps downward.
+     */
+    contentRef?: React.RefObject<HTMLElement>;
     /**
      * Tap classification thresholds. Pointer movement below this distance and
      * total duration below this delay is reported as a Tap; anything else is a
@@ -47,4 +55,4 @@ export declare function inscribedContentRect(panel: {
     width: number;
     height: number;
 };
-export declare function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled, onTextInput, onKeyboardPress, tapMaxDistance, tapMaxDurationMs, style, }: DeviceInteractionLayerProps): React.JSX.Element | null;
+export declare function DeviceInteractionLayer({ enabled, deviceSize, onTap, onSwipe, keyboardEnabled, onTextInput, onKeyboardPress, contentRef, tapMaxDistance, tapMaxDurationMs, style, }: DeviceInteractionLayerProps): React.JSX.Element | null;

package/dist/types/DisconnectedPreview.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface DisconnectedPreviewProps {
+    title?: string;
+}
+export declare function DisconnectedPreview({ title, }: DisconnectedPreviewProps): React.JSX.Element;

package/dist/types/ScrcpyPanel.d.ts

@@ -28,6 +28,7 @@ interface ScrcpyPanelProps {
     metadataTimeoutMs?: number;
     reconnectInterval?: number;
     viewportStyle?: CSSProperties;
+    contentRef?: React.Ref<HTMLDivElement>;
 }
-export declare function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs, reconnectInterval, viewportStyle, }: ScrcpyPanelProps): React.JSX.Element;
+export declare function ScrcpyPanel({ connectingOverlay, deviceId, onIntrinsicSize, onStatusChange, renderErrorOverlay, serverUrl, metadataTimeoutMs, reconnectInterval, viewportStyle, contentRef, }: ScrcpyPanelProps): React.JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/playground-app",
-  "version": "1.8.4-beta-20260521070317.0",
+  "version": "1.8.4",
   "description": "Reusable React shell for Midscene playground applications",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
@@ -28,9 +28,9 @@
     "antd": "^5.21.6",
     "react-resizable-panels": "2.0.22",
     "socket.io-client": "4.8.1",
-    "@midscene/playground": "1.8.4-beta-20260521070317.0",
-    "@midscene/shared": "1.8.4-beta-20260521070317.0",
-    "@midscene/visualizer": "1.8.4-beta-20260521070317.0"
+    "@midscene/playground": "1.8.4",
+    "@midscene/visualizer": "1.8.4",
+    "@midscene/shared": "1.8.4"
   },
   "devDependencies": {
     "@rsbuild/plugin-less": "^1.5.0",