@midscene/visualizer 0.28.2 → 0.28.3-beta-20250910131004.0

package/dist/lib/icons/avatar.js

@@ -0,0 +1,62 @@
+"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: ()=>avatar
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+require("react");
+const SvgAvatar = (props)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 20,
+        height: 20,
+        fill: "none",
+        "aria-label": "Playground",
+        viewBox: "0 0 20 20",
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("rect", {
+                width: 20,
+                height: 20,
+                fill: "#2B83FF",
+                rx: 10
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("path", {
+                fill: "#2B83FF",
+                stroke: "#fff",
+                strokeLinejoin: "round",
+                strokeWidth: 1.125,
+                d: "M6.866 5.882a.56.56 0 0 1 .667-.078l3.248 1.875 3.247 1.875a.563.563 0 0 1 0 .974l-3.247 1.875-3.248 1.875a.563.563 0 0 1-.784-.74l1.749-3.497-1.75-3.498a.56.56 0 0 1 .118-.661Z"
+            })
+        ]
+    });
+const avatar = SvgAvatar;
+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/index.js

@@ -33,60 +33,83 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    timeCostStrElement: ()=>misc_js_namespaceObject.timeCostStrElement,
+    timeCostStrElement: ()=>misc_index_js_namespaceObject.timeCostStrElement,
     actionNameForType: ()=>playground_utils_js_namespaceObject.actionNameForType,
-    PlaygroundResultView: ()=>PlaygroundResult_js_namespaceObject.PlaygroundResultView,
-    timeStr: ()=>external_utils_js_namespaceObject.timeStr,
-    EnvConfig: ()=>env_config_js_namespaceObject.EnvConfig,
+    PlaygroundResultView: ()=>playground_result_index_js_namespaceObject.PlaygroundResultView,
+    timeStr: ()=>external_utils_index_js_namespaceObject.timeStr,
+    EnvConfig: ()=>index_js_namespaceObject.EnvConfig,
     allScriptsFromDump: ()=>replay_scripts_js_namespaceObject.allScriptsFromDump,
-    PromptInput: ()=>PromptInput_js_namespaceObject.PromptInput,
-    ContextPreview: ()=>ContextPreview_js_namespaceObject.ContextPreview,
+    LocalStorageProvider: ()=>storage_provider_js_namespaceObject.LocalStorageProvider,
+    UniversalPlaygroundDefault: ()=>universal_playground_index_js_default(),
     generateAnimationScripts: ()=>replay_scripts_js_namespaceObject.generateAnimationScripts,
-    ShinyText: ()=>shiny_text_js_default(),
-    Blackboard: ()=>blackboard_js_namespaceObject.Blackboard,
+    ShinyText: ()=>shiny_text_index_js_default(),
     getPlaceholderForType: ()=>playground_utils_js_namespaceObject.getPlaceholderForType,
     staticAgentFromContext: ()=>playground_utils_js_namespaceObject.staticAgentFromContext,
-    useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
     useServerValid: ()=>useServerValid_js_namespaceObject.useServerValid,
-    Player: ()=>player_js_namespaceObject.Player,
-    ServiceModeControl: ()=>ServiceModeControl_js_namespaceObject.ServiceModeControl,
-    filterBase64Value: ()=>external_utils_js_namespaceObject.filterBase64Value,
+    ServiceModeControl: ()=>service_mode_control_index_js_namespaceObject.ServiceModeControl,
+    BaseContextProvider: ()=>context_provider_js_namespaceObject.BaseContextProvider,
     colorForName: ()=>color_js_namespaceObject.colorForName,
-    GithubStar: ()=>github_star_js_namespaceObject.GithubStar,
-    Logo: ()=>logo_js_namespaceObject.Logo,
-    globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
+    GithubStar: ()=>github_star_index_js_namespaceObject.GithubStar,
+    Logo: ()=>logo_index_js_namespaceObject.Logo,
+    UniversalPlayground: ()=>universal_playground_index_js_namespaceObject.UniversalPlayground,
+    useEnvConfig: ()=>store_js_namespaceObject.useEnvConfig,
+    PromptInput: ()=>prompt_input_index_js_namespaceObject.PromptInput,
+    ContextPreview: ()=>context_preview_index_js_namespaceObject.ContextPreview,
+    NoOpStorageProvider: ()=>storage_provider_js_namespaceObject.NoOpStorageProvider,
+    StaticContextProvider: ()=>context_provider_js_namespaceObject.StaticContextProvider,
+    Blackboard: ()=>blackboard_index_js_namespaceObject.Blackboard,
+    Player: ()=>player_index_js_namespaceObject.Player,
+    AgentContextProvider: ()=>context_provider_js_namespaceObject.AgentContextProvider,
+    filterBase64Value: ()=>external_utils_index_js_namespaceObject.filterBase64Value,
+    NoOpContextProvider: ()=>context_provider_js_namespaceObject.NoOpContextProvider,
     highlightColorForType: ()=>color_js_namespaceObject.highlightColorForType,
-    iconForStatus: ()=>misc_js_namespaceObject.iconForStatus
+    iconForStatus: ()=>misc_index_js_namespaceObject.iconForStatus,
+    globalThemeConfig: ()=>color_js_namespaceObject.globalThemeConfig,
+    MemoryStorageProvider: ()=>storage_provider_js_namespaceObject.MemoryStorageProvider
 });
 require("./component/playground/index.css");
-const replay_scripts_js_namespaceObject = require("./component/replay-scripts.js");
-const store_js_namespaceObject = require("./component/store/store.js");
-const color_js_namespaceObject = require("./component/color.js");
-const env_config_js_namespaceObject = require("./component/env-config.js");
-const logo_js_namespaceObject = require("./component/logo.js");
-const misc_js_namespaceObject = require("./component/misc.js");
-const useServerValid_js_namespaceObject = require("./component/playground/useServerValid.js");
-const PlaygroundResult_js_namespaceObject = require("./component/playground/PlaygroundResult.js");
-const ServiceModeControl_js_namespaceObject = require("./component/playground/ServiceModeControl.js");
-const ContextPreview_js_namespaceObject = require("./component/playground/ContextPreview.js");
-const PromptInput_js_namespaceObject = require("./component/playground/PromptInput.js");
-const player_js_namespaceObject = require("./component/player.js");
-const blackboard_js_namespaceObject = require("./component/blackboard.js");
-const github_star_js_namespaceObject = require("./component/github-star.js");
-const playground_utils_js_namespaceObject = require("./component/playground/playground-utils.js");
-const external_utils_js_namespaceObject = require("./utils.js");
-const shiny_text_js_namespaceObject = require("./component/shiny-text.js");
-var shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(shiny_text_js_namespaceObject);
+require("./component/universal-playground/index.css");
+const replay_scripts_js_namespaceObject = require("./utils/replay-scripts.js");
+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 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");
+const playground_result_index_js_namespaceObject = require("./component/playground-result/index.js");
+const service_mode_control_index_js_namespaceObject = require("./component/service-mode-control/index.js");
+const context_preview_index_js_namespaceObject = require("./component/context-preview/index.js");
+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");
+var shiny_text_index_js_default = /*#__PURE__*/ __webpack_require__.n(shiny_text_index_js_namespaceObject);
+const universal_playground_index_js_namespaceObject = require("./component/universal-playground/index.js");
+var universal_playground_index_js_default = /*#__PURE__*/ __webpack_require__.n(universal_playground_index_js_namespaceObject);
+const storage_provider_js_namespaceObject = require("./component/universal-playground/providers/storage-provider.js");
+const context_provider_js_namespaceObject = require("./component/universal-playground/providers/context-provider.js");
+exports.AgentContextProvider = __webpack_exports__.AgentContextProvider;
+exports.BaseContextProvider = __webpack_exports__.BaseContextProvider;
 exports.Blackboard = __webpack_exports__.Blackboard;
 exports.ContextPreview = __webpack_exports__.ContextPreview;
 exports.EnvConfig = __webpack_exports__.EnvConfig;
 exports.GithubStar = __webpack_exports__.GithubStar;
+exports.LocalStorageProvider = __webpack_exports__.LocalStorageProvider;
 exports.Logo = __webpack_exports__.Logo;
+exports.MemoryStorageProvider = __webpack_exports__.MemoryStorageProvider;
+exports.NoOpContextProvider = __webpack_exports__.NoOpContextProvider;
+exports.NoOpStorageProvider = __webpack_exports__.NoOpStorageProvider;
 exports.Player = __webpack_exports__.Player;
 exports.PlaygroundResultView = __webpack_exports__.PlaygroundResultView;
 exports.PromptInput = __webpack_exports__.PromptInput;
 exports.ServiceModeControl = __webpack_exports__.ServiceModeControl;
 exports.ShinyText = __webpack_exports__.ShinyText;
+exports.StaticContextProvider = __webpack_exports__.StaticContextProvider;
+exports.UniversalPlayground = __webpack_exports__.UniversalPlayground;
+exports.UniversalPlaygroundDefault = __webpack_exports__.UniversalPlaygroundDefault;
 exports.actionNameForType = __webpack_exports__.actionNameForType;
 exports.allScriptsFromDump = __webpack_exports__.allScriptsFromDump;
 exports.colorForName = __webpack_exports__.colorForName;
@@ -102,16 +125,25 @@ exports.timeStr = __webpack_exports__.timeStr;
 exports.useEnvConfig = __webpack_exports__.useEnvConfig;
 exports.useServerValid = __webpack_exports__.useServerValid;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "AgentContextProvider",
+    "BaseContextProvider",
     "Blackboard",
     "ContextPreview",
     "EnvConfig",
     "GithubStar",
+    "LocalStorageProvider",
     "Logo",
+    "MemoryStorageProvider",
+    "NoOpContextProvider",
+    "NoOpStorageProvider",
     "Player",
     "PlaygroundResultView",
     "PromptInput",
     "ServiceModeControl",
     "ShinyText",
+    "StaticContextProvider",
+    "UniversalPlayground",
+    "UniversalPlaygroundDefault",
     "actionNameForType",
     "allScriptsFromDump",
     "colorForName",

package/dist/lib/{component/playground/playground-constants.js → utils/constants.js}

@@ -1,14 +1,5 @@
 "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, {
@@ -33,58 +24,14 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
-    screenshotIncludedTip: ()=>screenshotIncludedTip,
-    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
-    serverLaunchTip: ()=>serverLaunchTip,
-    defaultMainButtons: ()=>defaultMainButtons,
+    BLANK_RESULT: ()=>BLANK_RESULT,
+    WELCOME_MESSAGE_TEMPLATE: ()=>WELCOME_MESSAGE_TEMPLATE,
     apiMetadata: ()=>apiMetadata,
-    trackingTip: ()=>trackingTip,
     deepThinkTip: ()=>deepThinkTip,
+    defaultMainButtons: ()=>defaultMainButtons,
     domIncludedTip: ()=>domIncludedTip,
-    emptyResultTip: ()=>emptyResultTip
-});
-const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_antd_namespaceObject = require("antd");
-const external_shiny_text_js_namespaceObject = require("../shiny-text.js");
-var external_shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_js_namespaceObject);
-require("./index.css");
-const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
-    children: [
-        "Don't worry, just one more step to launch the playground server.",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "Please run one of the commands under the midscene project directory:",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "a. ",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
-            children: "npx midscene-playground"
-        }),
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
-        "b. ",
-        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
-            children: "npx --yes @midscene/web"
-        })
-    ]
-});
-const serverLaunchTip = function() {
-    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-        className: "server-tip",
-        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
-            message: "Playground Server Not Ready",
-            description: notReadyMessage,
-            type: "warning"
-        })
-    });
-};
-const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
-    className: "result-empty-tip",
-    style: {
-        textAlign: 'center'
-    },
-    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
-        disabled: true,
-        text: "The result will be shown here"
-    })
+    screenshotIncludedTip: ()=>screenshotIncludedTip,
+    trackingTip: ()=>trackingTip
 });
 const trackingTip = 'limit popup to current tab';
 const deepThinkTip = 'deep think';
@@ -162,24 +109,44 @@ const defaultMainButtons = [
     'aiQuery',
     'aiAssert'
 ];
+const WELCOME_MESSAGE_TEMPLATE = {
+    type: 'system',
+    content: `
+      Welcome to Midscene.js Playground!
+      
+      This is a panel for experimenting and testing Midscene.js features. You can use natural language instructions to operate the web page, such as clicking buttons, filling in forms, querying information, etc.
+      
+      Please enter your instructions in the input box below to start experiencing.
+    `,
+    loading: false,
+    result: void 0,
+    replayScriptsInfo: null,
+    replayCounter: 0,
+    loadingProgressText: '',
+    verticalMode: false
+};
+const BLANK_RESULT = {
+    result: void 0,
+    dump: null,
+    reportHTML: null,
+    error: null
+};
+exports.BLANK_RESULT = __webpack_exports__.BLANK_RESULT;
+exports.WELCOME_MESSAGE_TEMPLATE = __webpack_exports__.WELCOME_MESSAGE_TEMPLATE;
 exports.apiMetadata = __webpack_exports__.apiMetadata;
 exports.deepThinkTip = __webpack_exports__.deepThinkTip;
 exports.defaultMainButtons = __webpack_exports__.defaultMainButtons;
 exports.domIncludedTip = __webpack_exports__.domIncludedTip;
-exports.emptyResultTip = __webpack_exports__.emptyResultTip;
-exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
 exports.screenshotIncludedTip = __webpack_exports__.screenshotIncludedTip;
-exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
 exports.trackingTip = __webpack_exports__.trackingTip;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BLANK_RESULT",
+    "WELCOME_MESSAGE_TEMPLATE",
     "apiMetadata",
     "deepThinkTip",
     "defaultMainButtons",
     "domIncludedTip",
-    "emptyResultTip",
-    "errorMessageServerNotReady",
     "screenshotIncludedTip",
-    "serverLaunchTip",
     "trackingTip"
 ].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
 Object.defineProperty(exports, '__esModule', {

package/dist/lib/{component/playground → utils}/playground-utils.js

@@ -30,7 +30,7 @@ __webpack_require__.d(__webpack_exports__, {
     getPlaceholderForType: ()=>getPlaceholderForType
 });
 const static_namespaceObject = require("@midscene/web/static");
-const external_types_js_namespaceObject = require("./types.js");
+const external_types_js_namespaceObject = require("../types.js");
 const actionNameForType = (type)=>{
     const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
     const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();

package/dist/lib/{component → utils}/replay-scripts.js

@@ -30,8 +30,7 @@ __webpack_require__.d(__webpack_exports__, {
     generateAnimationScripts: ()=>generateAnimationScripts,
     allScriptsFromDump: ()=>allScriptsFromDump
 });
-require("./player.css");
-const external_utils_js_namespaceObject = require("../utils.js");
+const external_index_js_namespaceObject = require("./index.js");
 const agent_namespaceObject = require("@midscene/core/agent");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const stillDuration = 900;
@@ -234,7 +233,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
             var _task_recorder_, _task_recorder, _task_recorder_1, _task_recorder1;
             const title = (0, agent_namespaceObject.typeStr)(task);
             const subTitle = (0, agent_namespaceObject.paramStr)(task);
-            scripts.push(pointerScript(external_utils_js_namespaceObject.mousePointer, title, subTitle));
+            scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
             currentCameraState = null != insightCameraState ? insightCameraState : fullPageCameraState;
             scripts.push({
                 type: 'img',
@@ -262,7 +261,7 @@ const generateAnimationScripts = (execution, task, imageWidth, imageHeight)=>{
                     title,
                     subTitle
                 });
-                scripts.push(pointerScript(external_utils_js_namespaceObject.mousePointer, title, subTitle));
+                scripts.push(pointerScript(external_index_js_namespaceObject.mousePointer, title, subTitle));
                 scripts.push({
                     type: 'img',
                     img: null == (_task_recorder2 = task.recorder) ? void 0 : null == (_task_recorder_2 = _task_recorder2[1]) ? void 0 : _task_recorder_2.screenshot,

package/dist/types/component/{blackboard.d.ts → blackboard/index.d.ts}

@@ -1,7 +1,7 @@
 import 'pixi.js/unsafe-eval';
+import type { BaseElement, Rect, UIContext } from '@midscene/core';
 import * as PIXI from 'pixi.js';
-import type { BaseElement, Rect, UIContext } from '../../../core';
-import './blackboard.less';
+import './index.less';
 export declare const pointMarkForItem: (point: [number, number], type: "highlightPoint") => PIXI.Graphics;
 export declare const rectMarkForItem: (rect: Rect, name: string, type: "element" | "searchArea" | "highlight") => (PIXI.Graphics | PIXI.Text)[];
 export declare const Blackboard: (props: {

package/dist/types/component/{playground/ConfigSelector.d.ts → config-selector/index.d.ts}

@@ -1,5 +1,4 @@
 import type React from 'react';
-import './index.less';
 interface ConfigSelectorProps {
     showDeepThinkOption: boolean;
     enableTracking: boolean;

package/dist/types/component/{playground/ContextPreview.d.ts → context-preview/index.d.ts}

@@ -1,6 +1,5 @@
 import type { UIContext } from '@midscene/core';
 import type React from 'react';
-import './index.less';
 interface ContextPreviewProps {
     uiContextPreview: UIContext | undefined;
     setUiContextPreview: (context: UIContext) => void;

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

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

package/dist/types/component/{playground/HistorySelector.d.ts → history-selector/index.d.ts}

@@ -1,5 +1,5 @@
 import type React from 'react';
-import type { HistoryItem } from '../store/history';
+import type { HistoryItem } from '../../store/history';
 import './index.less';
 interface HistorySelectorProps {
     onSelect: (history: HistoryItem) => void;

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

@@ -0,0 +1 @@
+export * from '../types';

package/dist/types/component/{logo.d.ts → logo/index.d.ts}

@@ -1,4 +1,4 @@
-import './logo.less';
+import './index.less';
 export declare const LogoUrl = "https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png";
 export declare const Logo: ({ hideLogo }: {
     hideLogo?: boolean;

package/dist/types/component/misc/index.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export declare function timeCostStrElement(timeCost?: number): React.JSX.Element;
+export declare const iconForStatus: (status: string) => React.JSX.Element;
+export declare const errorMessageServerNotReady: React.JSX.Element;
+export declare const serverLaunchTip: (notReadyMessage?: React.ReactNode | string) => React.JSX.Element;
+export declare const emptyResultTip: React.JSX.Element;

package/dist/types/component/{player.d.ts → player/index.d.ts}

@@ -1,6 +1,6 @@
 import 'pixi.js/unsafe-eval';
-import './player.less';
-import type { AnimationScript } from './replay-scripts';
+import './index.less';
+import type { AnimationScript } from '../../utils/replay-scripts';
 export declare function Player(props?: {
     replayScripts?: AnimationScript[];
     imageWidth?: number;

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

@@ -0,0 +1,7 @@
+export { ContextPreview } from '../context-preview';
+export { PlaygroundResultView } from '../playground-result';
+export { PromptInput } from '../prompt-input';
+export { useServerValid } from '../../hooks/useServerValid';
+export { ServiceModeControl } from '../service-mode-control';
+export * from '../../types';
+export { useEnvConfig } from '../../store/store';

package/dist/types/component/{playground/PlaygroundResult.d.ts → playground-result/index.d.ts}

@@ -1,8 +1,7 @@
 import type React from 'react';
-import type { ReplayScriptsInfo } from '../replay-scripts';
-import type { PlaygroundResult as PlaygroundResultType } from './playground-types';
-import type { ServiceModeType } from './playground-types';
-import './index.less';
+import type { PlaygroundResult as PlaygroundResultType } from '../../types';
+import type { ServiceModeType } from '../../types';
+import type { ReplayScriptsInfo } from '../../utils/replay-scripts';
 interface PlaygroundResultProps {
     result: PlaygroundResultType | null;
     loading: boolean;

package/dist/types/component/{playground/PromptInput.d.ts → prompt-input/index.d.ts}

@@ -1,6 +1,7 @@
+import './index.less';
 import React from 'react';
-import type { RunType } from './playground-types';
-import type { ServiceModeType } from './playground-types';
+import type { RunType } from '../../types';
+import type { ServiceModeType } from '../../types';
 import './index.less';
 import type { DeviceAction } from '@midscene/core';
 interface PromptInputProps {

package/dist/types/component/{playground/ServiceModeControl.d.ts → service-mode-control/index.d.ts}

@@ -1,5 +1,4 @@
 import type React from 'react';
-import './index.less';
 interface ServiceModeControlProps {
     serviceMode: 'Server' | 'In-Browser';
 }

package/dist/types/component/{shiny-text.d.ts → shiny-text/index.d.ts}

@@ -1,5 +1,5 @@
 import type React from 'react';
-import './shiny-text.less';
+import './index.less';
 type ColorTheme = 'blue' | 'purple' | 'green' | 'rainbow';
 interface ShinyTextProps {
     text: string;

package/dist/types/component/universal-playground/index.d.ts

@@ -0,0 +1,4 @@
+import type { UniversalPlaygroundProps } from '../../types';
+import './index.less';
+export declare function UniversalPlayground({ playgroundSDK, storage, contextProvider, config: componentConfig, branding, className, dryMode, showContextPreview, }: UniversalPlaygroundProps): import("react").JSX.Element;
+export default UniversalPlayground;

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

@@ -0,0 +1,37 @@
+import type { UIContext } from '@midscene/core';
+import type { ContextProvider } from '../../../types';
+/**
+ * Base context provider implementation
+ */
+export declare abstract class BaseContextProvider implements ContextProvider {
+    protected cachedContext?: UIContext;
+    abstract getUIContext(): Promise<UIContext>;
+    refreshContext(): Promise<UIContext>;
+}
+/**
+ * Agent-based context provider for local execution modes
+ */
+export declare class AgentContextProvider extends BaseContextProvider {
+    private getAgent;
+    private options?;
+    constructor(getAgent: () => any, options?: {
+        forceSameTabNavigation?: boolean;
+    } | undefined);
+    getUIContext(): Promise<UIContext>;
+}
+/**
+ * Static context provider for pre-determined UI contexts
+ */
+export declare class StaticContextProvider extends BaseContextProvider {
+    private context;
+    constructor(context: UIContext);
+    getUIContext(): Promise<UIContext>;
+    refreshContext(): Promise<UIContext>;
+}
+/**
+ * No-op context provider for cases where context preview is disabled
+ */
+export declare class NoOpContextProvider implements ContextProvider {
+    getUIContext(): Promise<UIContext>;
+    refreshContext(): Promise<UIContext>;
+}

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

@@ -0,0 +1,33 @@
+import type { InfoListItem, StorageProvider } from '../../../types';
+/**
+ * Local Storage implementation for playground message persistence
+ */
+export declare class LocalStorageProvider implements StorageProvider {
+    private readonly messagesKey;
+    private readonly resultsKey;
+    constructor(namespace?: string);
+    saveMessages(messages: InfoListItem[]): Promise<void>;
+    loadMessages(): Promise<InfoListItem[]>;
+    clearMessages(): Promise<void>;
+    saveResult(id: string, result: InfoListItem): Promise<void>;
+}
+/**
+ * Memory-only storage implementation for non-persistent scenarios
+ */
+export declare class MemoryStorageProvider implements StorageProvider {
+    private messages;
+    private results;
+    saveMessages(messages: InfoListItem[]): Promise<void>;
+    loadMessages(): Promise<InfoListItem[]>;
+    clearMessages(): Promise<void>;
+    saveResult(id: string, result: InfoListItem): Promise<void>;
+}
+/**
+ * No-op storage implementation for cases where persistence is disabled
+ */
+export declare class NoOpStorageProvider implements StorageProvider {
+    saveMessages(_messages: InfoListItem[]): Promise<void>;
+    loadMessages(): Promise<InfoListItem[]>;
+    clearMessages(): Promise<void>;
+    saveResult(_id: string, _result: InfoListItem): Promise<void>;
+}

package/dist/types/hooks/usePlaygroundExecution.d.ts

@@ -0,0 +1,10 @@
+import type { DeviceAction } from '@midscene/core';
+import type { FormValue, InfoListItem, PlaygroundSDKLike, StorageProvider } from '../types';
+/**
+ * Hook for handling playground execution logic
+ */
+export declare function usePlaygroundExecution(playgroundSDK: PlaygroundSDKLike, storage: StorageProvider | undefined, actionSpace: DeviceAction<unknown>[], loading: boolean, setLoading: (loading: boolean) => void, infoList: InfoListItem[], setInfoList: React.Dispatch<React.SetStateAction<InfoListItem[]>>, replayCounter: number, setReplayCounter: React.Dispatch<React.SetStateAction<number>>, verticalMode: boolean, currentRunningIdRef: React.MutableRefObject<number | null>, interruptedFlagRef: React.MutableRefObject<Record<number, boolean>>): {
+    handleRun: (value: FormValue) => Promise<void>;
+    handleStop: () => Promise<void>;
+    canStop: boolean;
+};

package/dist/types/hooks/usePlaygroundState.d.ts

@@ -0,0 +1,26 @@
+import type { DeviceAction, UIContext } from '@midscene/core';
+import type { ContextProvider, InfoListItem, PlaygroundSDKLike, StorageProvider } from '../types';
+/**
+ * Hook for managing playground state
+ */
+export declare function usePlaygroundState(playgroundSDK: PlaygroundSDKLike, storage?: StorageProvider, contextProvider?: ContextProvider): {
+    loading: boolean;
+    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    infoList: InfoListItem[];
+    setInfoList: import("react").Dispatch<import("react").SetStateAction<InfoListItem[]>>;
+    actionSpace: DeviceAction<unknown>[];
+    actionSpaceLoading: boolean;
+    uiContextPreview: UIContext<import("@midscene/core").BaseElement> | undefined;
+    setUiContextPreview: import("react").Dispatch<import("react").SetStateAction<UIContext<import("@midscene/core").BaseElement> | undefined>>;
+    showScrollToBottomButton: boolean;
+    verticalMode: boolean;
+    replayCounter: number;
+    setReplayCounter: import("react").Dispatch<import("react").SetStateAction<number>>;
+    infoListRef: import("react").RefObject<HTMLDivElement>;
+    currentRunningIdRef: import("react").MutableRefObject<number | null>;
+    interruptedFlagRef: import("react").MutableRefObject<Record<number, boolean>>;
+    clearInfoList: () => Promise<void>;
+    refreshContext: () => Promise<void>;
+    handleScrollToBottom: () => void;
+    scrollToBottom: () => void;
+};