@midscene/visualizer 0.26.5-beta-20250814080504.0 → 0.26.5-beta-20250814125155.0

package/dist/es/component/player.mjs

@@ -7,7 +7,8 @@ import "./player.css";
 import { mouseLoading, mousePointer } from "../utils.mjs";
 import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined } from "@ant-design/icons";
 import { treeToList } from "@midscene/shared/extractor";
-import { Spin, Tooltip } from "antd";
+import { Dropdown, Spin, Switch, Tooltip } from "antd";
+import global_perspective from "../icons/global-perspective.mjs";
 import { rectMarkForItem } from "./blackboard.mjs";
 import { getTextureFromCache, loadTexture } from "./pixi-loader.mjs";
 function _define_property(obj, key, value) {
@@ -115,6 +116,12 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = useState('');
     const [subTitleText, setSubTitleText] = useState('');
+    const [autoZoom, setAutoZoom] = useState((null == props ? void 0 : props.autoZoom) !== void 0 ? props.autoZoom : true);
+    useEffect(()=>{
+        if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
+    }, [
+        null == props ? void 0 : props.autoZoom
+    ]);
     const scripts = null == props ? void 0 : props.replayScripts;
     const imageWidth = (null == props ? void 0 : props.imageWidth) || 1920;
     const imageHeight = (null == props ? void 0 : props.imageHeight) || 1080;
@@ -232,10 +239,10 @@ function Player(props) {
     };
     const updateCamera = (state)=>{
         cameraState.current = state;
-        const newScale = Math.max(1, imageWidth / state.width);
+        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
-        windowContentContainer.x = Math.round(canvasPaddingLeft - state.left * newScale);
-        windowContentContainer.y = Math.round(canvasPaddingTop - state.top * newScale);
+        windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
+        windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
         const pointer = windowContentContainer.getChildByLabel('pointer');
         if (pointer) {
             pointer.scale.set(1 / newScale);
@@ -246,6 +253,33 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
+        if (!autoZoom) {
+            const currentState = {
+                ...cameraState.current
+            };
+            const startPointerLeft = currentState.pointerLeft;
+            const startPointerTop = currentState.pointerTop;
+            const startTime = performance.now();
+            const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
+            if (!shouldMovePointer) return;
+            await new Promise((resolve)=>{
+                const animate = (currentTime)=>{
+                    const elapsedTime = currentTime - startTime;
+                    const rawProgress = Math.min(elapsedTime / duration, 1);
+                    const progress = cubicMouse(rawProgress);
+                    const nextState = {
+                        ...currentState,
+                        pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
+                        pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
+                    };
+                    updateCamera(nextState);
+                    if (elapsedTime < duration) frame(animate);
+                    else resolve();
+                };
+                frame(animate);
+            });
+            return;
+        }
         const currentState = {
             ...cameraState.current
         };
@@ -502,6 +536,7 @@ function Player(props) {
         replayMark
     ]);
     const [mouseOverStatusIcon, setMouseOverStatusIcon] = useState(false);
+    const [mouseOverSettingsIcon, setMouseOverSettingsIcon] = useState(false);
     const progressString = Math.round(100 * animationProgress);
     const transitionStyle = 0 === animationProgress ? 'none' : '0.3s';
     const canReplayNow = 1 === animationProgress;
@@ -617,6 +652,105 @@ function Player(props) {
                                         percent: progressString
                                     }) : /*#__PURE__*/ jsx(ExportOutlined, {})
                                 })
+                            }),
+                            /*#__PURE__*/ jsx(Dropdown, {
+                                trigger: [
+                                    'hover'
+                                ],
+                                placement: "bottomRight",
+                                overlayStyle: {
+                                    minWidth: '148px'
+                                },
+                                dropdownRender: (menu)=>/*#__PURE__*/ jsx("div", {
+                                        style: {
+                                            borderRadius: '8px',
+                                            border: '1px solid rgba(0, 0, 0, 0.08)',
+                                            backgroundColor: '#fff',
+                                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                                            overflow: 'hidden'
+                                        },
+                                        children: menu
+                                    }),
+                                menu: {
+                                    style: {
+                                        borderRadius: '8px',
+                                        padding: 0
+                                    },
+                                    items: [
+                                        {
+                                            key: 'autoZoom',
+                                            style: {
+                                                height: '39px',
+                                                margin: 0,
+                                                padding: '0 12px'
+                                            },
+                                            label: /*#__PURE__*/ jsxs("div", {
+                                                style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between',
+                                                    width: '100%',
+                                                    height: '39px'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ jsxs("div", {
+                                                        style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '4px'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(global_perspective, {
+                                                                style: {
+                                                                    width: '16px',
+                                                                    height: '16px'
+                                                                }
+                                                            }),
+                                                            /*#__PURE__*/ jsx("span", {
+                                                                style: {
+                                                                    fontSize: '12px',
+                                                                    marginRight: '16px'
+                                                                },
+                                                                children: "Focus on Cursor"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Switch, {
+                                                        size: "small",
+                                                        checked: autoZoom,
+                                                        onChange: (checked)=>{
+                                                            setAutoZoom(checked);
+                                                            triggerReplay();
+                                                        },
+                                                        onClick: (_, e)=>{
+                                                            var _e_stopPropagation;
+                                                            return null == e ? void 0 : null == (_e_stopPropagation = e.stopPropagation) ? void 0 : _e_stopPropagation.call(e);
+                                                        }
+                                                    })
+                                                ]
+                                            })
+                                        }
+                                    ]
+                                },
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "status-icon",
+                                    onMouseEnter: ()=>setMouseOverSettingsIcon(true),
+                                    onMouseLeave: ()=>setMouseOverSettingsIcon(false),
+                                    style: {
+                                        cursor: 'pointer',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        opacity: mouseOverSettingsIcon ? 1 : 0.7,
+                                        transition: 'opacity 0.2s'
+                                    },
+                                    children: /*#__PURE__*/ jsx(global_perspective, {
+                                        style: {
+                                            width: '16px',
+                                            height: '16px'
+                                        }
+                                    })
+                                })
                             })
                         ]
                     })

package/dist/es/component/playground/PlaygroundResult.mjs

@@ -6,7 +6,7 @@ import shiny_text from "../shiny-text.mjs";
 import { emptyResultTip, serverLaunchTip } from "./playground-constants.mjs";
 import "./index.css";
 const PlaygroundResultView = (param)=>{
-    let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode } = param;
+    let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
     let resultWrapperClassName = 'result-wrapper';
     if (verticalMode) resultWrapperClassName += ' vertical-mode-result';
     if (replayScriptsInfo && verticalMode) resultWrapperClassName += ' result-wrapper-compact';
@@ -35,7 +35,8 @@ const PlaygroundResultView = (param)=>{
             imageWidth: replayScriptsInfo.width,
             imageHeight: replayScriptsInfo.height,
             reportFileContent: ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null,
-            fitMode: fitMode
+            fitMode: fitMode,
+            autoZoom: autoZoom
         }, replayCounter);
         else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ jsx("pre", {
             children: null == result ? void 0 : result.error

package/dist/es/icons/global-perspective.mjs

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const SvgGlobalPerspective = (props)=>/*#__PURE__*/ jsx("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ jsx("path", {
+            fill: "#333",
+            d: "M1.333 13v-2.5a.667.667 0 0 1 1.334 0V13c0 .184.149.333.333.333h2.5a.667.667 0 0 1 0 1.334H3c-.92 0-1.667-.746-1.667-1.667m12 0v-2.5a.667.667 0 0 1 1.334 0V13c0 .92-.746 1.667-1.667 1.667h-2.5a.667.667 0 0 1 0-1.334H13a.333.333 0 0 0 .333-.333m-12-7.5V3c0-.92.747-1.667 1.667-1.667h2.5a.667.667 0 0 1 0 1.334H3A.333.333 0 0 0 2.667 3v2.5a.667.667 0 0 1-1.334 0m12 0V3A.333.333 0 0 0 13 2.667h-2.5a.667.667 0 0 1 0-1.334H13c.92 0 1.667.747 1.667 1.667v2.5a.667.667 0 0 1-1.334 0M5.667 10.333h4.666V5.667H5.667zm6 .167c0 .644-.523 1.167-1.167 1.167h-5A1.167 1.167 0 0 1 4.333 10.5v-5c0-.644.523-1.167 1.167-1.167h5c.644 0 1.167.523 1.167 1.167z"
+        })
+    });
+const global_perspective = SvgGlobalPerspective;
+export { global_perspective as default };

package/dist/es/icons/player-setting.mjs

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgPlayerSetting = (props)=>/*#__PURE__*/ jsxs("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#333",
+                strokeLinejoin: "round",
+                strokeWidth: 1.333,
+                d: "M11.333 13.667 14.667 8l-3.334-5.667H4.667L1.333 8l3.334 5.667z"
+            }),
+            /*#__PURE__*/ jsx("path", {
+                stroke: "#333",
+                strokeLinejoin: "round",
+                strokeWidth: 1.333,
+                d: "M8 9.667a1.667 1.667 0 1 0 0-3.334 1.667 1.667 0 0 0 0 3.334Z"
+            })
+        ]
+    });
+const player_setting = SvgPlayerSetting;
+export { player_setting as default };

package/dist/lib/component/player.js

@@ -1,6 +1,15 @@
 'use client';
 "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, {
@@ -36,6 +45,8 @@ const external_utils_js_namespaceObject = require("../utils.js");
 const icons_namespaceObject = require("@ant-design/icons");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const external_antd_namespaceObject = require("antd");
+const global_perspective_js_namespaceObject = require("../icons/global-perspective.js");
+var global_perspective_js_default = /*#__PURE__*/ __webpack_require__.n(global_perspective_js_namespaceObject);
 const external_blackboard_js_namespaceObject = require("./blackboard.js");
 const external_pixi_loader_js_namespaceObject = require("./pixi-loader.js");
 function _define_property(obj, key, value) {
@@ -143,6 +154,12 @@ function Player(props) {
     var _scripts_;
     const [titleText, setTitleText] = (0, external_react_namespaceObject.useState)('');
     const [subTitleText, setSubTitleText] = (0, external_react_namespaceObject.useState)('');
+    const [autoZoom, setAutoZoom] = (0, external_react_namespaceObject.useState)((null == props ? void 0 : props.autoZoom) !== void 0 ? props.autoZoom : true);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        if ((null == props ? void 0 : props.autoZoom) !== void 0) setAutoZoom(props.autoZoom);
+    }, [
+        null == props ? void 0 : props.autoZoom
+    ]);
     const scripts = null == props ? void 0 : props.replayScripts;
     const imageWidth = (null == props ? void 0 : props.imageWidth) || 1920;
     const imageHeight = (null == props ? void 0 : props.imageHeight) || 1080;
@@ -260,10 +277,10 @@ function Player(props) {
     };
     const updateCamera = (state)=>{
         cameraState.current = state;
-        const newScale = Math.max(1, imageWidth / state.width);
+        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
-        windowContentContainer.x = Math.round(canvasPaddingLeft - state.left * newScale);
-        windowContentContainer.y = Math.round(canvasPaddingTop - state.top * newScale);
+        windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
+        windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
         const pointer = windowContentContainer.getChildByLabel('pointer');
         if (pointer) {
             pointer.scale.set(1 / newScale);
@@ -274,6 +291,33 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
+        if (!autoZoom) {
+            const currentState = {
+                ...cameraState.current
+            };
+            const startPointerLeft = currentState.pointerLeft;
+            const startPointerTop = currentState.pointerTop;
+            const startTime = performance.now();
+            const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
+            if (!shouldMovePointer) return;
+            await new Promise((resolve)=>{
+                const animate = (currentTime)=>{
+                    const elapsedTime = currentTime - startTime;
+                    const rawProgress = Math.min(elapsedTime / duration, 1);
+                    const progress = cubicMouse(rawProgress);
+                    const nextState = {
+                        ...currentState,
+                        pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
+                        pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
+                    };
+                    updateCamera(nextState);
+                    if (elapsedTime < duration) frame(animate);
+                    else resolve();
+                };
+                frame(animate);
+            });
+            return;
+        }
         const currentState = {
             ...cameraState.current
         };
@@ -530,6 +574,7 @@ function Player(props) {
         replayMark
     ]);
     const [mouseOverStatusIcon, setMouseOverStatusIcon] = (0, external_react_namespaceObject.useState)(false);
+    const [mouseOverSettingsIcon, setMouseOverSettingsIcon] = (0, external_react_namespaceObject.useState)(false);
     const progressString = Math.round(100 * animationProgress);
     const transitionStyle = 0 === animationProgress ? 'none' : '0.3s';
     const canReplayNow = 1 === animationProgress;
@@ -645,6 +690,105 @@ function Player(props) {
                                         percent: progressString
                                     }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.ExportOutlined, {})
                                 })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
+                                trigger: [
+                                    'hover'
+                                ],
+                                placement: "bottomRight",
+                                overlayStyle: {
+                                    minWidth: '148px'
+                                },
+                                dropdownRender: (menu)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                        style: {
+                                            borderRadius: '8px',
+                                            border: '1px solid rgba(0, 0, 0, 0.08)',
+                                            backgroundColor: '#fff',
+                                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
+                                            overflow: 'hidden'
+                                        },
+                                        children: menu
+                                    }),
+                                menu: {
+                                    style: {
+                                        borderRadius: '8px',
+                                        padding: 0
+                                    },
+                                    items: [
+                                        {
+                                            key: 'autoZoom',
+                                            style: {
+                                                height: '39px',
+                                                margin: 0,
+                                                padding: '0 12px'
+                                            },
+                                            label: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                style: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between',
+                                                    width: '100%',
+                                                    height: '39px'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                                                        style: {
+                                                            display: 'flex',
+                                                            alignItems: 'center',
+                                                            gap: '4px'
+                                                        },
+                                                        children: [
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(global_perspective_js_default(), {
+                                                                style: {
+                                                                    width: '16px',
+                                                                    height: '16px'
+                                                                }
+                                                            }),
+                                                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                                                                style: {
+                                                                    fontSize: '12px',
+                                                                    marginRight: '16px'
+                                                                },
+                                                                children: "Focus on Cursor"
+                                                            })
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Switch, {
+                                                        size: "small",
+                                                        checked: autoZoom,
+                                                        onChange: (checked)=>{
+                                                            setAutoZoom(checked);
+                                                            triggerReplay();
+                                                        },
+                                                        onClick: (_, e)=>{
+                                                            var _e_stopPropagation;
+                                                            return null == e ? void 0 : null == (_e_stopPropagation = e.stopPropagation) ? void 0 : _e_stopPropagation.call(e);
+                                                        }
+                                                    })
+                                                ]
+                                            })
+                                        }
+                                    ]
+                                },
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+                                    className: "status-icon",
+                                    onMouseEnter: ()=>setMouseOverSettingsIcon(true),
+                                    onMouseLeave: ()=>setMouseOverSettingsIcon(false),
+                                    style: {
+                                        cursor: 'pointer',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        opacity: mouseOverSettingsIcon ? 1 : 0.7,
+                                        transition: 'opacity 0.2s'
+                                    },
+                                    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(global_perspective_js_default(), {
+                                        style: {
+                                            width: '16px',
+                                            height: '16px'
+                                        }
+                                    })
+                                })
                             })
                         ]
                     })

package/dist/lib/component/playground/PlaygroundResult.js

@@ -44,7 +44,7 @@ var external_shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(externa
 const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
 require("./index.css");
 const PlaygroundResultView = (param)=>{
-    let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode } = param;
+    let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
     let resultWrapperClassName = 'result-wrapper';
     if (verticalMode) resultWrapperClassName += ' vertical-mode-result';
     if (replayScriptsInfo && verticalMode) resultWrapperClassName += ' result-wrapper-compact';
@@ -73,7 +73,8 @@ const PlaygroundResultView = (param)=>{
             imageWidth: replayScriptsInfo.width,
             imageHeight: replayScriptsInfo.height,
             reportFileContent: ('In-Browser-Extension' === serviceMode || 'Server' === serviceMode) && (null == result ? void 0 : result.reportHTML) ? null == result ? void 0 : result.reportHTML : null,
-            fitMode: fitMode
+            fitMode: fitMode,
+            autoZoom: autoZoom
         }, replayCounter);
         else if (null == result ? void 0 : result.error) resultDataToShow = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("pre", {
             children: null == result ? void 0 : result.error

package/dist/lib/icons/global-perspective.js

@@ -0,0 +1,50 @@
+"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: ()=>global_perspective
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const SvgGlobalPerspective = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+            fill: "#333",
+            d: "M1.333 13v-2.5a.667.667 0 0 1 1.334 0V13c0 .184.149.333.333.333h2.5a.667.667 0 0 1 0 1.334H3c-.92 0-1.667-.746-1.667-1.667m12 0v-2.5a.667.667 0 0 1 1.334 0V13c0 .92-.746 1.667-1.667 1.667h-2.5a.667.667 0 0 1 0-1.334H13a.333.333 0 0 0 .333-.333m-12-7.5V3c0-.92.747-1.667 1.667-1.667h2.5a.667.667 0 0 1 0 1.334H3A.333.333 0 0 0 2.667 3v2.5a.667.667 0 0 1-1.334 0m12 0V3A.333.333 0 0 0 13 2.667h-2.5a.667.667 0 0 1 0-1.334H13c.92 0 1.667.747 1.667 1.667v2.5a.667.667 0 0 1-1.334 0M5.667 10.333h4.666V5.667H5.667zm6 .167c0 .644-.523 1.167-1.167 1.167h-5A1.167 1.167 0 0 1 4.333 10.5v-5c0-.644.523-1.167 1.167-1.167h5c.644 0 1.167.523 1.167 1.167z"
+        })
+    });
+const global_perspective = SvgGlobalPerspective;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/lib/icons/player-setting.js

@@ -0,0 +1,60 @@
+"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: ()=>player_setting
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const SvgPlayerSetting = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 16,
+        height: 16,
+        fill: "none",
+        viewBox: "0 0 16 16",
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                stroke: "#333",
+                strokeLinejoin: "round",
+                strokeWidth: 1.333,
+                d: "M11.333 13.667 14.667 8l-3.334-5.667H4.667L1.333 8l3.334 5.667z"
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                stroke: "#333",
+                strokeLinejoin: "round",
+                strokeWidth: 1.333,
+                d: "M8 9.667a1.667 1.667 0 1 0 0-3.334 1.667 1.667 0 0 0 0 3.334Z"
+            })
+        ]
+    });
+const player_setting = SvgPlayerSetting;
+exports["default"] = __webpack_exports__["default"];
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "default"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/types/component/player.d.ts

@@ -8,4 +8,5 @@ export declare function Player(props?: {
     reportFileContent?: string | null;
     key?: string | number;
     fitMode?: 'width' | 'height';
+    autoZoom?: boolean;
 }): import("react").JSX.Element;

package/dist/types/component/playground/PlaygroundResult.d.ts

@@ -14,6 +14,7 @@ interface PlaygroundResultProps {
     verticalMode?: boolean;
     notReadyMessage?: React.ReactNode | string;
     fitMode?: 'width' | 'height';
+    autoZoom?: boolean;
 }
 export declare const PlaygroundResultView: React.FC<PlaygroundResultProps>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.26.5-beta-20250814080504.0",
+  "version": "0.26.5-beta-20250814125155.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -70,9 +70,9 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "0.26.5-beta-20250814080504.0",
-    "@midscene/web": "0.26.5-beta-20250814080504.0",
-    "@midscene/shared": "0.26.5-beta-20250814080504.0"
+    "@midscene/shared": "0.26.5-beta-20250814125155.0",
+    "@midscene/core": "0.26.5-beta-20250814125155.0",
+    "@midscene/web": "0.26.5-beta-20250814125155.0"
   },
   "license": "MIT",
   "scripts": {