@midscene/visualizer 0.28.1-beta-20250909063633.0 → 0.28.2-beta-20250909133629.0

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/types.js → types.js}

@@ -24,7 +24,9 @@ var __webpack_require__ = {};
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
+    BLANK_RESULT: ()=>BLANK_RESULT,
     VALIDATION_CONSTANTS: ()=>VALIDATION_CONSTANTS,
+    WELCOME_MESSAGE_TEMPLATE: ()=>WELCOME_MESSAGE_TEMPLATE,
     extractDefaultValue: ()=>extractDefaultValue,
     isLocateField: ()=>isLocateField,
     isZodObjectSchema: ()=>isZodObjectSchema,
@@ -99,13 +101,39 @@ const extractDefaultValue = (field)=>{
         currentField = currentField._def.innerType;
     }
 };
+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.VALIDATION_CONSTANTS = __webpack_exports__.VALIDATION_CONSTANTS;
+exports.WELCOME_MESSAGE_TEMPLATE = __webpack_exports__.WELCOME_MESSAGE_TEMPLATE;
 exports.extractDefaultValue = __webpack_exports__.extractDefaultValue;
 exports.isLocateField = __webpack_exports__.isLocateField;
 exports.isZodObjectSchema = __webpack_exports__.isZodObjectSchema;
 exports.unwrapZodType = __webpack_exports__.unwrapZodType;
 for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "BLANK_RESULT",
     "VALIDATION_CONSTANTS",
+    "WELCOME_MESSAGE_TEMPLATE",
     "extractDefaultValue",
     "isLocateField",
     "isZodObjectSchema",

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

@@ -45,9 +45,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 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 index_js_namespaceObject = require("../component/shiny-text/index.js");
+var index_js_default = /*#__PURE__*/ __webpack_require__.n(index_js_namespaceObject);
 const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
     children: [
         "Don't worry, just one more step to launch the playground server.",
@@ -81,7 +80,7 @@ const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div",
     style: {
         textAlign: 'center'
     },
-    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
+    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_default(), {
         disabled: true,
         text: "The result will be shown here"
     })

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/browser.d.ts

@@ -0,0 +1,19 @@
+import './component/index.less';
+import './component/universal-playground/index.less';
+export { useEnvConfig } from './store/store';
+export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
+export { EnvConfig } from './component/env-config';
+export { Logo } from './component/logo';
+export { iconForStatus, timeCostStrElement } from './component/misc';
+export { PlaygroundResultView } from './component/playground-result';
+export type { PlaygroundResult } from './types';
+export { ContextPreview } from './component/context-preview';
+export { Player } from './component/player';
+export { Blackboard } from './component/blackboard';
+export { GithubStar } from './component/github-star';
+export { timeStr, filterBase64Value } from './utils';
+export { default as ShinyText } from './component/shiny-text';
+export { UniversalPlayground, default as UniversalPlaygroundDefault, } from './component/universal-playground';
+export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, } from './types';
+export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, } from './component/universal-playground/providers/storage-provider';
+export { BaseContextProvider, StaticContextProvider, NoOpContextProvider, } from './component/universal-playground/providers/context-provider';

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;
+};

package/dist/types/index.d.ts

@@ -1,19 +1,24 @@
 import './component/playground/index.less';
-export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './component/replay-scripts';
-export { useEnvConfig } from './component/store/store';
-export { colorForName, highlightColorForType, globalThemeConfig, } from './component/color';
+import './component/universal-playground/index.less';
+export { type AnimationScript, type ReplayScriptsInfo, allScriptsFromDump, generateAnimationScripts, } from './utils/replay-scripts';
+export { useEnvConfig } from './store/store';
+export { colorForName, highlightColorForType, globalThemeConfig, } from './utils/color';
 export { EnvConfig } from './component/env-config';
 export { Logo } from './component/logo';
 export { iconForStatus, timeCostStrElement } from './component/misc';
-export { useServerValid } from './component/playground/useServerValid';
-export { PlaygroundResultView } from './component/playground/PlaygroundResult';
-export type { PlaygroundResult } from './component/playground/playground-types';
-export { ServiceModeControl } from './component/playground/ServiceModeControl';
-export { ContextPreview } from './component/playground/ContextPreview';
-export { PromptInput } from './component/playground/PromptInput';
+export { useServerValid } from './hooks/useServerValid';
+export { PlaygroundResultView } from './component/playground-result';
+export type { PlaygroundResult } from './types';
+export { ServiceModeControl } from './component/service-mode-control';
+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 './component/playground/playground-utils';
+export { actionNameForType, staticAgentFromContext, getPlaceholderForType, } from './utils/playground-utils';
 export { timeStr, filterBase64Value } from './utils';
 export { default as ShinyText } from './component/shiny-text';
+export { UniversalPlayground, default as UniversalPlaygroundDefault, } from './component/universal-playground';
+export type { UniversalPlaygroundProps, PlaygroundSDKLike, StorageProvider, ContextProvider, UniversalPlaygroundConfig, PlaygroundBranding, InfoListItem, FormValue, ExecutionOptions, ProgressCallback, } from './types';
+export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, } from './component/universal-playground/providers/storage-provider';
+export { BaseContextProvider, AgentContextProvider, StaticContextProvider, NoOpContextProvider, } from './component/universal-playground/providers/context-provider';