@midscene/visualizer 0.30.10 → 1.0.0

package/dist/es/component/blackboard/index.css

@@ -31,3 +31,11 @@
   width: 100%;
 }
 
+[data-theme="dark"] .blackboard .footer, [data-theme="dark"] .blackboard .bottom-tip-item {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .blackboard-main-content canvas {
+  border-color: rgba(255, 255, 255, .12);
+}
+

package/dist/es/component/blackboard/index.mjs

@@ -1,14 +1,37 @@
-'use client';
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import "pixi.js/unsafe-eval";
-import { Checkbox } from "antd";
 import { Application, Container, Graphics, Rectangle, Sprite, Text, Texture } from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { colorForName, highlightColorForType } from "../../utils/color.mjs";
 import "./index.css";
-import { treeToList } from "@midscene/shared/extractor";
-import { DropShadowFilter } from "pixi-filters";
-import { useBlackboardPreference } from "../../store/store.mjs";
+import { DropShadowFilter, GlowFilter } from "pixi-filters";
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
+    try {
+        var info = gen[key](arg);
+        var value = info.value;
+    } catch (error) {
+        reject(error);
+        return;
+    }
+    if (info.done) resolve(value);
+    else Promise.resolve(value).then(_next, _throw);
+}
+function _async_to_generator(fn) {
+    return function() {
+        var self = this, args = arguments;
+        return new Promise(function(resolve, reject) {
+            var gen = fn.apply(self, args);
+            function _next(value) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
+            }
+            function _throw(err) {
+                asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
+            }
+            _next(void 0);
+        });
+    };
+}
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
 const pointRadius = 10;
@@ -61,7 +84,7 @@ const rectMarkForItem = (rect, name, type)=>{
 };
 const Blackboard = (props)=>{
     const highlightElements = props.highlightElements || [];
-    const highlightIds = highlightElements.map((e)=>e.id);
+    highlightElements.map((e)=>e.id);
     const highlightRect = props.highlightRect;
     const highlightPoints = props.highlightPoints;
     const context = props.uiContext;
@@ -75,31 +98,39 @@ const Blackboard = (props)=>{
     const elementMarkContainer = useMemo(()=>new Container(), []);
     const [hoverElement, setHoverElement] = useState(null);
     const pixiBgRef = useRef(void 0);
-    const { backgroundVisible, setBackgroundVisible, elementsVisible, setElementsVisible } = useBlackboardPreference();
+    const animationFrameRef = useRef(null);
+    const highlightGraphicsRef = useRef([]);
+    const glowFiltersRef = useRef([]);
+    const backgroundVisible = true;
+    const elementsVisible = true;
     useEffect(()=>{
-        Promise.resolve((async ()=>{
-            if (!domRef.current || !screenWidth) return;
-            await app.init({
-                width: screenWidth,
-                height: screenHeight,
-                background: 0xffffff
-            });
-            const canvasEl = domRef.current;
-            domRef.current.appendChild(app.canvas);
-            const { clientWidth } = domRef.current.parentElement;
-            const targetHeight = 0.6 * window.innerHeight;
-            const viewportRatio = clientWidth / targetHeight;
-            if (screenWidth / screenHeight <= viewportRatio) {
-                const ratio = targetHeight / screenHeight;
-                canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
-                canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
-            }
-            app.stage.addChild(highlightContainer);
-            app.stage.addChild(elementMarkContainer);
-            setAppInitialed(true);
-        })());
+        Promise.resolve((()=>_async_to_generator(function*() {
+                if (!domRef.current || !screenWidth) return;
+                yield app.init({
+                    width: screenWidth,
+                    height: screenHeight,
+                    background: 0xffffff
+                });
+                const canvasEl = domRef.current;
+                domRef.current.appendChild(app.canvas);
+                const { clientWidth } = domRef.current.parentElement;
+                const targetHeight = 0.6 * window.innerHeight;
+                const viewportRatio = clientWidth / targetHeight;
+                if (screenWidth / screenHeight <= viewportRatio) {
+                    const ratio = targetHeight / screenHeight;
+                    canvasEl.style.width = `${Math.floor(screenWidth * ratio)}px`;
+                    canvasEl.style.height = `${Math.floor(screenHeight * ratio)}px`;
+                }
+                app.stage.addChild(highlightContainer);
+                app.stage.addChild(elementMarkContainer);
+                setAppInitialed(true);
+            })())());
         return ()=>{
             console.log('will destroy');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
             try {
                 app.destroy(true, {
                     children: true,
@@ -170,26 +201,54 @@ const Blackboard = (props)=>{
         elementMarkContainer.removeChildren();
         highlightContainer.eventMode = 'passive';
         elementMarkContainer.eventMode = 'passive';
+        highlightGraphicsRef.current = [];
+        glowFiltersRef.current = [];
         if (highlightRect) {
             const [graphics] = rectMarkForItem(highlightRect, 'Search Area', 'searchArea');
             highlightContainer.addChild(graphics);
         }
         if (highlightElements.length) highlightElements.forEach((element)=>{
             const { rect, content, id } = element;
-            const [graphics] = rectMarkForItem(rect, content, 'highlight');
-            highlightContainer.addChild(graphics);
+            const items = rectMarkForItem(rect, content, 'highlight');
+            const graphics = items[0];
+            const glowFilter = new GlowFilter({
+                distance: 30,
+                outerStrength: 3,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            const existingFilters = graphics.filters;
+            if (Array.isArray(existingFilters)) graphics.filters = [
+                ...existingFilters,
+                glowFilter
+            ];
+            else if (existingFilters) graphics.filters = [
+                existingFilters,
+                glowFilter
+            ];
+            else graphics.filters = [
+                glowFilter
+            ];
+            items.forEach((item)=>highlightContainer.addChild(item));
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         if (null == highlightPoints ? void 0 : highlightPoints.length) highlightPoints.forEach((point)=>{
             const graphics = pointMarkForItem(point, 'highlightPoint');
+            const glowFilter = new GlowFilter({
+                distance: 25,
+                outerStrength: 2.5,
+                innerStrength: 0,
+                color: 0xfd5907,
+                quality: 0.5
+            });
+            graphics.filters = [
+                glowFilter
+            ];
             highlightContainer.addChild(graphics);
-        });
-        const elements = treeToList(context.tree);
-        elements.forEach((element)=>{
-            const { rect, content, id } = element;
-            const ifHighlight = highlightIds.includes(id) || (null == hoverElement ? void 0 : hoverElement.id) === id;
-            if (ifHighlight) return;
-            const [graphics] = rectMarkForItem(rect, content, 'element');
-            elementMarkContainer.addChild(graphics);
+            highlightGraphicsRef.current.push(graphics);
+            glowFiltersRef.current.push(glowFilter);
         });
         elementMarkContainer.visible = elementsVisible;
         return {
@@ -199,19 +258,50 @@ const Blackboard = (props)=>{
         app,
         appInitialed,
         highlightElements,
-        context.tree,
         hoverElement,
         highlightRect,
         highlightPoints
     ]);
-    const onSetBackgroundVisible = (e)=>{
-        setBackgroundVisible(e.target.checked);
-        if (pixiBgRef.current) pixiBgRef.current.visible = e.target.checked;
-    };
-    const onSetElementsVisible = (e)=>{
-        setElementsVisible(e.target.checked);
-        elementMarkContainer.visible = e.target.checked;
-    };
+    useEffect(()=>{
+        if (!appInitialed || 0 === highlightGraphicsRef.current.length) return void console.log('Animation skipped:', {
+            appInitialed,
+            graphicsCount: highlightGraphicsRef.current.length
+        });
+        console.log('Starting pulsing animation for', highlightGraphicsRef.current.length, 'graphics');
+        const graphicsToAnimate = highlightGraphicsRef.current;
+        const glowFilters = glowFiltersRef.current;
+        const pulseDuration = 1200;
+        const minAlpha = 0.4;
+        const maxAlpha = 1.0;
+        const minGlowStrength = 2.0;
+        const maxGlowStrength = 5.0;
+        const startTime = performance.now();
+        const animate = ()=>{
+            const elapsed = performance.now() - startTime;
+            const progress = elapsed % pulseDuration / pulseDuration;
+            const sineValue = Math.sin(progress * Math.PI * 2);
+            const normalizedSine = (sineValue + 1) / 2;
+            const alpha = minAlpha + normalizedSine * (maxAlpha - minAlpha);
+            const glowStrength = minGlowStrength + normalizedSine * (maxGlowStrength - minGlowStrength);
+            graphicsToAnimate.forEach((graphics, index)=>{
+                graphics.alpha = alpha;
+                if (glowFilters[index]) glowFilters[index].outerStrength = glowStrength;
+            });
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+        animate();
+        return ()=>{
+            console.log('Stopping pulsing animation');
+            if (null !== animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+                animationFrameRef.current = null;
+            }
+        };
+    }, [
+        appInitialed,
+        highlightElements,
+        highlightPoints
+    ]);
     let bottomTipA = null;
     if (1 === highlightElementRects.length) bottomTipA = /*#__PURE__*/ jsx("div", {
         className: "bottom-tip",
@@ -243,27 +333,6 @@ const Blackboard = (props)=>{
                 },
                 ref: domRef
             }),
-            /*#__PURE__*/ jsx("div", {
-                className: "blackboard-filter",
-                style: {
-                    display: props.hideController ? 'none' : 'block'
-                },
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "overlay-control",
-                    children: [
-                        /*#__PURE__*/ jsx(Checkbox, {
-                            checked: backgroundVisible,
-                            onChange: onSetBackgroundVisible,
-                            children: "Background"
-                        }),
-                        /*#__PURE__*/ jsx(Checkbox, {
-                            checked: elementsVisible,
-                            onChange: onSetElementsVisible,
-                            children: "Elements"
-                        })
-                    ]
-                })
-            }),
             /*#__PURE__*/ jsx("div", {
                 className: "bottom-tip",
                 style: {

package/dist/es/component/config-selector/index.mjs

@@ -2,9 +2,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox, Dropdown, Radio } from "antd";
 import setting from "../../icons/setting.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
-import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
-const ConfigSelector = (param)=>{
-    let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
+import { alwaysRefreshScreenInfoTip, autoDismissKeyboardTip, deepThinkTip, domIncludedTip, imeStrategyTip, keyboardDismissStrategyTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
+const ConfigSelector = ({ showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false, deviceType })=>{
     const forceSameTabNavigation = useEnvConfig((state)=>state.forceSameTabNavigation);
     const setForceSameTabNavigation = useEnvConfig((state)=>state.setForceSameTabNavigation);
     const deepThink = useEnvConfig((state)=>state.deepThink);
@@ -13,7 +12,16 @@ const ConfigSelector = (param)=>{
     const setScreenshotIncluded = useEnvConfig((state)=>state.setScreenshotIncluded);
     const domIncluded = useEnvConfig((state)=>state.domIncluded);
     const setDomIncluded = useEnvConfig((state)=>state.setDomIncluded);
-    if (!enableTracking && !showDeepThinkOption && !showDataExtractionOptions) return null;
+    const imeStrategy = useEnvConfig((state)=>state.imeStrategy);
+    const setImeStrategy = useEnvConfig((state)=>state.setImeStrategy);
+    const autoDismissKeyboard = useEnvConfig((state)=>state.autoDismissKeyboard);
+    const setAutoDismissKeyboard = useEnvConfig((state)=>state.setAutoDismissKeyboard);
+    const keyboardDismissStrategy = useEnvConfig((state)=>state.keyboardDismissStrategy);
+    const setKeyboardDismissStrategy = useEnvConfig((state)=>state.setKeyboardDismissStrategy);
+    const alwaysRefreshScreenInfo = useEnvConfig((state)=>state.alwaysRefreshScreenInfo);
+    const setAlwaysRefreshScreenInfo = useEnvConfig((state)=>state.setAlwaysRefreshScreenInfo);
+    const hasDeviceOptions = 'android' === deviceType || 'ios' === deviceType;
+    if (!enableTracking && !showDeepThinkOption && !showDataExtractionOptions && !hasDeviceOptions) return null;
     const configItems = buildConfigItems();
     return /*#__PURE__*/ jsx("div", {
         className: "selector-trigger",
@@ -98,6 +106,96 @@ const ConfigSelector = (param)=>{
                 key: 'dom-included-config'
             });
         }
+        if ('android' === deviceType) {
+            items.push({
+                label: /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        padding: '4px 0'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            style: {
+                                marginBottom: '4px',
+                                fontSize: '14px'
+                            },
+                            children: imeStrategyTip
+                        }),
+                        /*#__PURE__*/ jsxs(Radio.Group, {
+                            size: "small",
+                            value: imeStrategy,
+                            onChange: (e)=>setImeStrategy(e.target.value),
+                            children: [
+                                /*#__PURE__*/ jsx(Radio, {
+                                    value: "always-yadb",
+                                    children: "Always YADB"
+                                }),
+                                /*#__PURE__*/ jsx(Radio, {
+                                    value: "yadb-for-non-ascii",
+                                    children: "YADB for non-ASCII"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                key: 'ime-strategy-config'
+            });
+            items.push({
+                label: /*#__PURE__*/ jsx(Checkbox, {
+                    onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
+                    checked: autoDismissKeyboard,
+                    children: autoDismissKeyboardTip
+                }),
+                key: 'auto-dismiss-keyboard-config'
+            });
+            items.push({
+                label: /*#__PURE__*/ jsxs("div", {
+                    style: {
+                        padding: '4px 0'
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            style: {
+                                marginBottom: '4px',
+                                fontSize: '14px'
+                            },
+                            children: keyboardDismissStrategyTip
+                        }),
+                        /*#__PURE__*/ jsxs(Radio.Group, {
+                            size: "small",
+                            value: keyboardDismissStrategy,
+                            onChange: (e)=>setKeyboardDismissStrategy(e.target.value),
+                            children: [
+                                /*#__PURE__*/ jsx(Radio, {
+                                    value: "esc-first",
+                                    children: "ESC first"
+                                }),
+                                /*#__PURE__*/ jsx(Radio, {
+                                    value: "back-first",
+                                    children: "Back first"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                key: 'keyboard-dismiss-strategy-config'
+            });
+            items.push({
+                label: /*#__PURE__*/ jsx(Checkbox, {
+                    onChange: (e)=>setAlwaysRefreshScreenInfo(e.target.checked),
+                    checked: alwaysRefreshScreenInfo,
+                    children: alwaysRefreshScreenInfoTip
+                }),
+                key: 'always-refresh-screen-info-config'
+            });
+        }
+        if ('ios' === deviceType) items.push({
+            label: /*#__PURE__*/ jsx(Checkbox, {
+                onChange: (e)=>setAutoDismissKeyboard(e.target.checked),
+                checked: autoDismissKeyboard,
+                children: autoDismissKeyboardTip
+            }),
+            key: 'auto-dismiss-keyboard-config'
+        });
         return items;
     }
 };

package/dist/es/component/context-preview/index.mjs

@@ -3,8 +3,7 @@ import { Button } from "antd";
 import blackboard from "../blackboard/index.mjs";
 import { iconForStatus } from "../misc/index.mjs";
 import playground_demo_ui_context from "../playground/playground-demo-ui-context.json";
-const ContextPreview = (param)=>{
-    let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
+const ContextPreview = ({ uiContextPreview, setUiContextPreview, showContextPreview })=>{
     if (!showContextPreview) return null;
     return /*#__PURE__*/ jsxs("div", {
         className: "form-part context-panel",

package/dist/es/component/env-config/index.mjs

@@ -3,8 +3,7 @@ import { SettingOutlined } from "@ant-design/icons";
 import { Input, Modal, Tooltip } from "antd";
 import { useEffect, useRef, useState } from "react";
 import { useEnvConfig } from "../../store/store.mjs";
-function EnvConfig(param) {
-    let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
+function EnvConfig({ showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' }) {
     const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [tempConfigString, setTempConfigString] = useState(configString);

package/dist/es/component/env-config-reminder/index.css

@@ -20,3 +20,11 @@
   font-size: 14px;
 }
 
+[data-theme="dark"] .env-config-reminder {
+  background: rgba(82, 38, 7, .3);
+}
+
+[data-theme="dark"] .env-config-reminder .reminder-text {
+  color: #f8fafd;
+}
+

package/dist/es/component/env-config-reminder/index.mjs

@@ -3,8 +3,7 @@ import { ExclamationCircleFilled } from "@ant-design/icons";
 import { useEnvConfig } from "../../store/store.mjs";
 import { EnvConfig } from "../env-config/index.mjs";
 import "./index.css";
-const EnvConfigReminder = (param)=>{
-    let { className = '' } = param;
+const EnvConfigReminder = ({ className = '' })=>{
     const { config } = useEnvConfig();
     const configAlreadySet = Object.keys(config || {}).length >= 1;
     if (configAlreadySet) return null;

package/dist/es/component/form-field/index.mjs

@@ -2,8 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Form, Input, InputNumber, Select } from "antd";
 const { TextArea } = Input;
 const renderLabel = (label, isOptional)=>`${label}${isOptional ? ' (Optional)' : ''}`;
-const TextField = (param)=>{
-    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+const TextField = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
     const placeholder = customPlaceholder || `Enter ${name}`;
     return /*#__PURE__*/ jsx(Form.Item, {
         name: [
@@ -26,8 +25,7 @@ const TextField = (param)=>{
         })
     }, name);
 };
-const LocateField = (param)=>{
-    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+const LocateField = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
     const placeholder = customPlaceholder || `Describe the ${name}, use natural language`;
     return /*#__PURE__*/ jsx(Form.Item, {
         name: [
@@ -51,8 +49,7 @@ const LocateField = (param)=>{
         })
     }, name);
 };
-const EnumField = (param)=>{
-    let { name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+const EnumField = ({ name, label, fieldSchema, isRequired, marginBottom, placeholder: customPlaceholder })=>{
     var _fieldSchema__def;
     const enumValues = (null == (_fieldSchema__def = fieldSchema._def) ? void 0 : _fieldSchema__def.values) || [];
     const selectOptions = enumValues.map((value)=>({
@@ -81,8 +78,7 @@ const EnumField = (param)=>{
         })
     }, name);
 };
-const NumberField = (param)=>{
-    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+const NumberField = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
     const defaultPlaceholder = 'distance' === name ? 500 : 0;
     const placeholderValue = customPlaceholder ? Number(customPlaceholder) || defaultPlaceholder : defaultPlaceholder;
     const min = 0;
@@ -126,8 +122,7 @@ const NumberField = (param)=>{
         })
     }, name);
 };
-const BooleanField = (param)=>{
-    let { name, label, isRequired, marginBottom, placeholder: customPlaceholder } = param;
+const BooleanField = ({ name, label, isRequired, marginBottom, placeholder: customPlaceholder })=>{
     const selectOptions = [
         {
             value: true,

package/dist/es/component/history-selector/index.css

@@ -77,7 +77,12 @@
   border: none;
 }
 
-.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover {
+  background: #fff;
+  border-color: #d9d9d9;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
   background: #fff;
   border-color: #d9d9d9;
 }
@@ -133,3 +138,35 @@
   padding: 40px 20px;
 }
 
+[data-theme="dark"] .history-selector .history-timestamp, [data-theme="dark"] .history-selector .history-path {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-description {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .history-selector .history-no-items {
+  color: rgba(255, 255, 255, .45);
+}
+
+[data-theme="dark"] .history-selector .history-item:hover {
+  background: rgba(255, 255, 255, .08);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon {
+  border-color: rgba(255, 255, 255, .12);
+}
+
+[data-theme="dark"] .history-selector .history-item .history-clear-icon:hover {
+  border-color: #40a9ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more {
+  color: #1890ff;
+}
+
+[data-theme="dark"] .history-selector .history-load-more:hover {
+  color: #40a9ff;
+}
+

package/dist/es/component/history-selector/index.mjs

@@ -7,8 +7,7 @@ import magnifying_glass from "../../icons/magnifying-glass.mjs";
 import { useHistoryStore } from "../../store/history.mjs";
 import "./index.css";
 const { Text } = Typography;
-const HistorySelector = (param)=>{
-    let { onSelect, history, currentType } = param;
+const HistorySelector = ({ onSelect, history, currentType })=>{
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [searchText, setSearchText] = useState('');
     const clearHistory = useHistoryStore((state)=>state.clearHistory);

package/dist/es/component/logo/index.mjs

@@ -1,9 +1,13 @@
 import { jsx } from "react/jsx-runtime";
+import { useTheme } from "../../hooks/useTheme.mjs";
 import "./index.css";
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
-const Logo = (param)=>{
-    let { hideLogo = false } = param;
+const LogoUrlLight = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_light.png';
+const LogoUrlDark = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/nupipfups/Midscene/midscene_with_text_dark.png';
+const Logo = ({ hideLogo = false })=>{
+    const { isDarkMode } = useTheme();
     if (hideLogo) return null;
+    const logoSrc = isDarkMode ? LogoUrlDark : LogoUrlLight;
     return /*#__PURE__*/ jsx("div", {
         className: "logo",
         children: /*#__PURE__*/ jsx("a", {
@@ -12,7 +16,7 @@ const Logo = (param)=>{
             rel: "noreferrer",
             children: /*#__PURE__*/ jsx("img", {
                 alt: "Midscene_logo",
-                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png"
+                src: logoSrc
             })
         })
     });

package/dist/es/component/misc/index.mjs

@@ -70,9 +70,7 @@ const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
         })
     ]
 });
-const serverLaunchTip = function() {
-    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
-    return /*#__PURE__*/ jsx("div", {
+const serverLaunchTip = (notReadyMessage = errorMessageServerNotReady)=>/*#__PURE__*/ jsx("div", {
         className: "server-tip",
         children: /*#__PURE__*/ jsx(Alert, {
             message: "Playground Server Not Ready",
@@ -80,7 +78,6 @@ const serverLaunchTip = function() {
             type: "warning"
         })
     });
-};
 const emptyResultTip = /*#__PURE__*/ jsx("div", {
     className: "result-empty-tip",
     style: {

package/dist/es/component/nav-actions/index.mjs

@@ -3,8 +3,7 @@ import { GithubOutlined, QuestionCircleOutlined } from "@ant-design/icons";
 import { Typography } from "antd";
 import { EnvConfig } from "../env-config/index.mjs";
 import "./style.css";
-function NavActions(param) {
-    let { showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' } = param;
+function NavActions({ showEnvConfig = true, showTooltipWhenEmpty = false, showModelName = false, githubUrl = 'https://github.com/web-infra-dev/midscene', helpUrl = 'https://midscenejs.com/quick-experience.html', className = '' }) {
     return /*#__PURE__*/ jsxs("div", {
         className: `nav-actions ${className}`,
         children: [

package/dist/es/component/nav-actions/style.css

@@ -26,7 +26,7 @@
 }
 
 [data-theme="dark"] .nav-actions .nav-icon {
-  color: rgba(255, 255, 255, .65);
+  color: #f8fafd;
 }
 
 [data-theme="dark"] .nav-actions .nav-icon:hover {

package/dist/es/component/player/index.css

@@ -183,3 +183,29 @@
   display: flex;
 }
 
+[data-theme="dark"] .player-container {
+  background: #141414;
+  border-color: #292929;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] {
+  background: #292929;
+  border-color: #292929;
+}
+
+[data-theme="dark"] .player-container[data-fit-mode="height"] .canvas-container {
+  background-color: #141414;
+}
+
+[data-theme="dark"] .player-container .canvas-container {
+  background-color: #1f1f1f;
+}
+
+[data-theme="dark"] .player-container .player-tools, [data-theme="dark"] .player-container .player-tools .ant-spin, [data-theme="dark"] .player-container .player-tools .status-icon svg {
+  color: #f8fafd;
+}
+
+[data-theme="dark"] .player-container .player-tools .status-icon:hover {
+  background: rgba(255, 255, 255, .08);
+}
+