@midscene/visualizer 0.28.9 → 0.28.10-beta-20250917142241.0

package/dist/lib/component/nav-actions/index.js

@@ -0,0 +1,66 @@
+"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__, {
+    NavActions: ()=>NavActions
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const icons_namespaceObject = require("@ant-design/icons");
+const external_antd_namespaceObject = require("antd");
+const index_js_namespaceObject = require("../env-config/index.js");
+require("./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;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+        className: `nav-actions ${className}`,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: githubUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.GithubOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Typography.Link, {
+                href: helpUrl,
+                target: "_blank",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.QuestionCircleOutlined, {
+                    className: "nav-icon"
+                })
+            }),
+            showEnvConfig && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
+                showTooltipWhenEmpty: showTooltipWhenEmpty,
+                showModelName: showModelName
+            })
+        ]
+    });
+}
+exports.NavActions = __webpack_exports__.NavActions;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "NavActions"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,35 @@
+.nav-actions {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.nav-actions .nav-icon {
+  color: rgba(0, 0, 0, .65);
+  cursor: pointer;
+  font-size: 16px;
+  transition: color .3s;
+}
+
+.nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+
+.nav-actions a {
+  align-items: center;
+  text-decoration: none;
+  display: flex;
+}
+
+.nav-actions a:hover .nav-icon {
+  color: #2b83ff;
+}
+
+[data-theme="dark"] .nav-actions .nav-icon {
+  color: rgba(255, 255, 255, .65);
+}
+
+[data-theme="dark"] .nav-actions .nav-icon:hover {
+  color: #2b83ff;
+}
+

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

@@ -30,8 +30,8 @@
   min-height: 200px;
   aspect-ratio: var(--canvas-aspect-ratio, 16 / 9);
   background-color: #fff;
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
   flex: none;
   justify-content: center;
   align-items: center;

package/dist/lib/component/playground/index.css

@@ -44,21 +44,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -146,10 +159,13 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
-  padding-left: 8px;
+  gap: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/lib/component/prompt-input/index.css

@@ -10,21 +10,34 @@
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  scrollbar-width: thin;
   flex: 1;
   align-items: center;
   gap: 8px;
   min-width: 0;
   height: 100%;
-  margin-right: 80px;
+  margin-right: 60px;
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
 }
 
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-form-item {
@@ -112,10 +125,13 @@
 
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
   z-index: 10;
-  background: #fff;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .8) 40%, rgba(255, 255, 255, .95) 60%, #fff 70%);
   flex-shrink: 0;
+  justify-content: flex-end;
   align-items: center;
-  padding-left: 8px;
+  gap: 8px;
+  width: 80px;
+  padding-left: 20px;
   display: flex;
   position: absolute;
   top: 50%;

package/dist/lib/component/prompt-input/index.js

@@ -55,6 +55,7 @@ const PromptInput = (param)=>{
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
     const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
+    const modeRadioGroupRef = (0, external_react_namespaceObject.useRef)(null);
     const params = external_antd_namespaceObject.Form.useWatch('params', form);
     const lastHistoryRef = (0, external_react_namespaceObject.useRef)(null);
     const history = (0, history_js_namespaceObject.useHistoryStore)((state)=>state.history);
@@ -198,6 +199,27 @@ const PromptInput = (param)=>{
         lastSelectedType,
         setLastSelectedType
     ]);
+    const scrollToSelectedItem = (0, external_react_namespaceObject.useCallback)(()=>{
+        const container = modeRadioGroupRef.current;
+        if (!container) return;
+        let targetElement = null;
+        const selectedRadioButton = container.querySelector('.ant-radio-button-wrapper-checked');
+        const dropdownButton = container.querySelector('.more-apis-button.selected-from-dropdown');
+        if (selectedRadioButton) targetElement = selectedRadioButton;
+        else if (dropdownButton) targetElement = dropdownButton;
+        if (targetElement) {
+            const containerRect = container.getBoundingClientRect();
+            const targetRect = targetElement.getBoundingClientRect();
+            const targetLeft = targetRect.left - containerRect.left + container.scrollLeft;
+            const targetWidth = targetRect.width;
+            const containerWidth = containerRect.width;
+            const optimalScrollLeft = targetLeft - (containerWidth - targetWidth) / 2;
+            container.scrollTo({
+                left: Math.max(0, optimalScrollLeft),
+                behavior: 'smooth'
+            });
+        }
+    }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
         const lastHistory = historyForSelectedType[0];
         if (lastHistory && lastHistoryRef.current && lastHistory.timestamp === lastHistoryRef.current.timestamp) return;
@@ -224,6 +246,15 @@ const PromptInput = (param)=>{
         form,
         getDefaultParams
     ]);
+    (0, external_react_namespaceObject.useEffect)(()=>{
+        const timeoutId = setTimeout(()=>{
+            scrollToSelectedItem();
+        }, 100);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        selectedType,
+        scrollToSelectedItem
+    ]);
     const formPromptValue = external_antd_namespaceObject.Form.useWatch('prompt', form);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if (formPromptValue !== promptValue) setPromptValue(formPromptValue || '');
@@ -539,11 +570,12 @@ const PromptInput = (param)=>{
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
         className: "prompt-input-wrapper",
         children: [
-            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Space, {
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                 className: "mode-radio-group-wrapper",
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "mode-radio-group",
+                        ref: modeRadioGroupRef,
                         children: [
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Form.Item, {
                                 name: "type",
@@ -670,11 +702,6 @@ const PromptInput = (param)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "action-icons",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
-                                onSelect: handleSelectHistory,
-                                history: historyForSelectedType,
-                                currentType: selectedType
-                            }),
                             hasConfigOptions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
@@ -685,6 +712,11 @@ const PromptInput = (param)=>{
                                     showDataExtractionOptions: showDataExtractionOptions,
                                     hideDomAndScreenshotOptions: hideDomAndScreenshotOptions
                                 })
+                            }),
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
+                                onSelect: handleSelectHistory,
+                                history: historyForSelectedType,
+                                currentType: selectedType
                             })
                         ]
                     })

package/dist/lib/component/universal-playground/index.css

@@ -32,8 +32,8 @@
 .playground-container .middle-dialog-area .clear-button-container {
   z-index: 10;
   position: absolute;
-  top: 8px;
-  right: 12px;
+  top: 16px;
+  right: 0;
 }
 
 .playground-container .middle-dialog-area .clear-button-container .clear-button {

package/dist/lib/component/universal-playground/providers/storage-provider.js

@@ -39,15 +39,48 @@ function _define_property(obj, key, value) {
     return obj;
 }
 class LocalStorageProvider {
+    checkStorageSpace() {
+        try {
+            const testKey = 'storage-test';
+            const testData = 'x'.repeat(102400);
+            localStorage.setItem(testKey, testData);
+            localStorage.removeItem(testKey);
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
     async saveMessages(messages) {
         try {
-            const lightMessages = messages.map((msg)=>({
+            if (!this.checkStorageSpace()) {
+                console.warn('Low storage space detected, clearing old data...');
+                await this.handleQuotaExceeded();
+            }
+            const messagesToSave = messages.slice(-this.maxStorageItems);
+            const lightMessages = messagesToSave.map((msg)=>({
                     ...msg,
                     result: void 0
                 }));
-            localStorage.setItem(this.messagesKey, JSON.stringify(lightMessages));
+            const messageData = JSON.stringify(lightMessages);
+            localStorage.setItem(this.messagesKey, messageData);
         } catch (error) {
-            console.error('Failed to save messages to localStorage:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
+                console.warn('LocalStorage quota exceeded, attempting to clear old data and retry...');
+                await this.handleQuotaExceeded();
+                try {
+                    const recentMessages = messages.slice(-10);
+                    const lightRecentMessages = recentMessages.map((msg)=>({
+                            ...msg,
+                            result: void 0
+                        }));
+                    const messageData = JSON.stringify(lightRecentMessages);
+                    localStorage.setItem(this.messagesKey, messageData);
+                    console.info('Successfully saved recent messages after clearing storage');
+                } catch (retryError) {
+                    console.error('Failed to save even after clearing storage:', retryError);
+                    await this.clearMessages();
+                }
+            } else console.error('Failed to save messages to localStorage:', error);
         }
     }
     async loadMessages() {
@@ -93,12 +126,43 @@ class LocalStorageProvider {
             const resultKey = `${this.resultsKey}-${id}`;
             localStorage.setItem(resultKey, JSON.stringify(result));
         } catch (error) {
-            console.error('Failed to save result to localStorage:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) {
+                console.warn('LocalStorage quota exceeded when saving result, clearing old results...');
+                await this.handleQuotaExceeded();
+                try {
+                    const resultKey = `${this.resultsKey}-${id}`;
+                    localStorage.setItem(resultKey, JSON.stringify(result));
+                } catch (retryError) {
+                    console.error('Failed to save result even after clearing storage:', retryError);
+                }
+            } else console.error('Failed to save result to localStorage:', error);
+        }
+    }
+    async handleQuotaExceeded() {
+        try {
+            const keys = Object.keys(localStorage);
+            const resultKeys = keys.filter((key)=>key.startsWith(this.resultsKey));
+            const keysToRemove = resultKeys.slice(0, Math.max(1, Math.floor(resultKeys.length / 2)));
+            keysToRemove.forEach((key)=>{
+                localStorage.removeItem(key);
+            });
+            console.info(`Cleared ${keysToRemove.length} old result entries to free up storage space`);
+            const playgroundKeys = keys.filter((key)=>key.includes('playground') || key.includes('agent') || key.startsWith('midscene'));
+            if (playgroundKeys.length > 10) {
+                const additionalKeysToRemove = playgroundKeys.slice(0, Math.floor(playgroundKeys.length / 3));
+                additionalKeysToRemove.forEach((key)=>{
+                    if (key !== this.messagesKey) localStorage.removeItem(key);
+                });
+                console.info(`Cleared ${additionalKeysToRemove.length} additional playground-related entries`);
+            }
+        } catch (error) {
+            console.error('Failed to handle quota exceeded:', error);
         }
     }
     constructor(namespace = 'playground'){
         _define_property(this, "messagesKey", void 0);
         _define_property(this, "resultsKey", void 0);
+        _define_property(this, "maxStorageItems", 50);
         this.messagesKey = `${namespace}-messages`;
         this.resultsKey = `${namespace}-results`;
     }

package/dist/lib/hooks/usePlaygroundState.js

@@ -68,7 +68,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     }, []);
     (0, external_react_namespaceObject.useEffect)(()=>{
         if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
-            console.error('Failed to save messages:', error);
+            if (error instanceof DOMException && 'QuotaExceededError' === error.name) console.warn('Storage quota exceeded - some messages may not be saved persistently');
+            else console.error('Failed to save messages:', error);
         });
     }, [
         infoList,

package/dist/lib/index.js

@@ -51,9 +51,9 @@ __webpack_require__.d(__webpack_exports__, {
     BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
     colorForName: ()=>color_js_namespaceObject.colorForName,
     safeOverrideAIConfig: ()=>useSafeOverrideAIConfig_js_namespaceObject.safeOverrideAIConfig,
-    GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
     Logo: ()=>logo_index_js_namespaceObject.Logo,
     UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
+    NavActions: ()=>nav_actions_index_js_namespaceObject.NavActions,
     useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
     NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
     ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
@@ -77,6 +77,7 @@ const store_js_namespaceObject = require("./store/store.js");
 const color_js_namespaceObject = require("./utils/color.js");
 const index_js_namespaceObject = require("./component/env-config/index.js");
 const env_config_reminder_index_js_namespaceObject = require("./component/env-config-reminder/index.js");
+const nav_actions_index_js_namespaceObject = require("./component/nav-actions/index.js");
 const logo_index_js_namespaceObject = require("./component/logo/index.js");
 const misc_index_js_namespaceObject = require("./component/misc/index.js");
 const useServerValid_js_namespaceObject = require("./hooks/useServerValid.js");
@@ -87,7 +88,6 @@ const context_preview_index_js_namespaceObject = require("./component/context-pr
 const prompt_input_index_js_namespaceObject = require("./component/prompt-input/index.js");
 const player_index_js_namespaceObject = require("./component/player/index.js");
 const blackboard_index_js_namespaceObject = require("./component/blackboard/index.js");
-const github_star_index_js_namespaceObject = require("./component/github-star/index.js");
 const playground_utils_js_namespaceObject = require("./utils/playground-utils.js");
 const external_utils_index_js_namespaceObject = require("./utils/index.js");
 const shiny_text_index_js_namespaceObject = require("./component/shiny-text/index.js");
@@ -102,10 +102,10 @@ exports.Blackboard = __webpack_exports__.Blackboard;
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.EnvConfig = __webpack_exports__.EnvConfig;
 exports.EnvConfigReminder = __webpack_exports__.EnvConfigReminder;
-exports.GithubStar = __webpack_exports__.GithubStar;
 exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.Logo = __webpack_exports__.Logo;
 exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NavActions = __webpack_exports__.NavActions;
 exports.NoOpContextProvider = __webpack_exports__.NoOpContextProvider;
 exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
 exports.Player = __webpack_exports__.Player;
@@ -139,10 +139,10 @@ for(var __webpack_i__ in __webpack_exports__)if (-1 === [
     "ContextPreview",
     "EnvConfig",
     "EnvConfigReminder",
-    "GithubStar",
     "LocalStorageProvider",
     "Logo",
     "MemoryStorageProvider",
+    "NavActions",
     "NoOpContextProvider",
     "NoOpStorageProvider",
     "Player",

package/dist/types/component/nav-actions/index.d.ts

@@ -0,0 +1,10 @@
+import './style.less';
+export interface NavActionsProps {
+    showEnvConfig?: boolean;
+    showTooltipWhenEmpty?: boolean;
+    showModelName?: boolean;
+    githubUrl?: string;
+    helpUrl?: string;
+    className?: string;
+}
+export declare function NavActions({ showEnvConfig, showTooltipWhenEmpty, showModelName, githubUrl, helpUrl, className, }: NavActionsProps): import("react").JSX.Element;

package/dist/types/component/universal-playground/providers/storage-provider.d.ts

@@ -5,11 +5,20 @@ import type { InfoListItem, StorageProvider } from '../../../types';
 export declare class LocalStorageProvider implements StorageProvider {
     private readonly messagesKey;
     private readonly resultsKey;
+    private readonly maxStorageItems;
     constructor(namespace?: string);
+    /**
+     * Check available storage space
+     */
+    private checkStorageSpace;
     saveMessages(messages: InfoListItem[]): Promise<void>;
     loadMessages(): Promise<InfoListItem[]>;
     clearMessages(): Promise<void>;
     saveResult(id: string, result: InfoListItem): Promise<void>;
+    /**
+     * Handle quota exceeded by clearing old data
+     */
+    private handleQuotaExceeded;
 }
 /**
  * Memory-only storage implementation for non-persistent scenarios

package/dist/types/index.d.ts

@@ -5,6 +5,8 @@ export { useEnvConfig } from './store/store';
 export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
 export { EnvConfigReminder } from './component/env-config-reminder';
+export { NavActions } from './component/nav-actions';
+export type { NavActionsProps } from './component/nav-actions';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
 export { useServerValid } from './hooks/useServerValid';
@@ -16,7 +18,6 @@ export { ContextPreview } from './component/context-preview';
 export { PromptInput } from './component/prompt-input';
 export { Player } from './component/player';
 export { Blackboard } from './component/blackboard';
-export { GithubStar } from './component/github-star';
 export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } from './utils/playground-utils';
 export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@midscene/visualizer",
-  "version": "0.28.9",
+  "version": "0.28.10-beta-20250917142241.0",
   "repository": "https://github.com/web-infra-dev/midscene",
   "homepage": "https://midscenejs.com/",
   "types": "./dist/types/index.d.ts",
@@ -52,7 +52,7 @@
     "react-dom": "18.3.1",
     "react-resizable-panels": "2.0.22",
     "rimraf": "~3.0.2",
-    "tsx": "4.19.2",
+    "tsx": "^4.19.2",
     "typescript": "^5.8.3",
     "zustand": "4.5.2"
   },
@@ -70,10 +70,10 @@
     "antd": "^5.21.6",
     "buffer": "6.0.3",
     "dayjs": "^1.11.11",
-    "@midscene/core": "0.28.9",
-    "@midscene/shared": "0.28.9",
-    "@midscene/playground": "0.28.9",
-    "@midscene/web": "0.28.9"
+    "@midscene/core": "0.28.10-beta-20250917142241.0",
+    "@midscene/playground": "0.28.10-beta-20250917142241.0",
+    "@midscene/web": "0.28.10-beta-20250917142241.0",
+    "@midscene/shared": "0.28.10-beta-20250917142241.0"
   },
   "license": "MIT",
   "scripts": {

package/dist/es/component/github-star/index.css

@@ -1,4 +0,0 @@
-.github-star {
-  height: 22px;
-}
-

package/dist/es/component/github-star/index.mjs

@@ -1,20 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import "./index.css";
-const GithubStar = ()=>/*#__PURE__*/ jsx("a", {
-        href: "https://github.com/web-infra-dev/midscene",
-        target: "_blank",
-        rel: "noreferrer",
-        style: {
-            display: 'flex',
-            alignItems: 'center'
-        },
-        children: /*#__PURE__*/ jsx("img", {
-            className: "github-star",
-            src: "https://img.shields.io/github/stars/web-infra-dev/midscene?style=social",
-            alt: "Github star",
-            style: {
-                display: 'block'
-            }
-        })
-    });
-export { GithubStar };

package/dist/lib/component/github-star/index.css

@@ -1,4 +0,0 @@
-.github-star {
-  height: 22px;
-}
-

package/dist/lib/component/github-star/index.js

@@ -1,54 +0,0 @@
-"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__, {
-    GithubStar: ()=>GithubStar
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./index.css");
-const GithubStar = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("a", {
-        href: "https://github.com/web-infra-dev/midscene",
-        target: "_blank",
-        rel: "noreferrer",
-        style: {
-            display: 'flex',
-            alignItems: 'center'
-        },
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
-            className: "github-star",
-            src: "https://img.shields.io/github/stars/web-infra-dev/midscene?style=social",
-            alt: "Github star",
-            style: {
-                display: 'block'
-            }
-        })
-    });
-exports.GithubStar = __webpack_exports__.GithubStar;
-for(var __webpack_i__ in __webpack_exports__)if (-1 === [
-    "GithubStar"
-].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/types/component/github-star/index.d.ts

@@ -1,2 +0,0 @@
-import './index.less';
-export declare const GithubStar: () => import("react").JSX.Element;