@midscene/visualizer 0.28.10-beta-20250922071252.0 → 0.28.11-beta-20250919104516.0

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

@@ -172,9 +172,29 @@ function Player(props) {
     const cameraState = useRef({
         ...basicCameraState
     });
-    const repaintImage = async ()=>{
+    const resizeCanvasIfNeeded = async (newWidth, newHeight)=>{
+        if (app.screen.width !== newWidth || app.screen.height !== newHeight) {
+            app.renderer.resize(newWidth, newHeight);
+            if (divContainerRef.current) {
+                const aspectRatio = newWidth / newHeight;
+                divContainerRef.current.style.setProperty('--canvas-aspect-ratio', aspectRatio.toString());
+            }
+            const newBasicCameraState = {
+                left: 0,
+                top: 0,
+                width: newWidth,
+                pointerLeft: Math.round(newWidth / 2),
+                pointerTop: Math.round(newHeight / 2)
+            };
+            cameraState.current = newBasicCameraState;
+        }
+    };
+    const repaintImage = async (scriptWidth, scriptHeight)=>{
         const imgToUpdate = currentImg.current;
         if (!imgToUpdate) return void console.warn('no image to update');
+        const targetWidth = scriptWidth || imageWidth;
+        const targetHeight = scriptHeight || imageHeight;
+        await resizeCanvasIfNeeded(targetWidth, targetHeight);
         if (!getTextureFromCache(imgToUpdate)) {
             console.warn('image not loaded', imgToUpdate);
             await loadTexture(imgToUpdate);
@@ -188,8 +208,8 @@ function Player(props) {
         if (child) windowContentContainer.removeChild(child);
         sprite.label = mainImgLabel;
         sprite.zIndex = LAYER_ORDER_IMG;
-        sprite.width = imageWidth;
-        sprite.height = imageHeight;
+        sprite.width = targetWidth;
+        sprite.height = targetHeight;
         windowContentContainer.addChild(sprite);
     };
     const spinningPointer = (frame)=>{
@@ -247,9 +267,10 @@ function Player(props) {
         pointerSprite.current.zIndex = LAYER_ORDER_POINTER;
         windowContentContainer.addChild(pointerSprite.current);
     };
-    const updateCamera = (state)=>{
+    const updateCamera = (state, currentWidth)=>{
         cameraState.current = state;
-        const newScale = autoZoom ? Math.max(1, imageWidth / state.width) : 1;
+        const effectiveWidth = currentWidth || app.screen.width || imageWidth;
+        const newScale = autoZoom ? Math.max(1, effectiveWidth / state.width) : 1;
         windowContentContainer.scale.set(newScale);
         windowContentContainer.x = autoZoom ? Math.round(canvasPaddingLeft - state.left * newScale) : canvasPaddingLeft;
         windowContentContainer.y = autoZoom ? Math.round(canvasPaddingTop - state.top * newScale) : canvasPaddingTop;
@@ -263,6 +284,8 @@ function Player(props) {
         }
     };
     const cameraAnimation = async (targetState, duration, frame)=>{
+        const currentCanvasWidth = app.screen.width || imageWidth;
+        const currentCanvasHeight = app.screen.height || imageHeight;
         if (!autoZoom) {
             const currentState = {
                 ...cameraState.current
@@ -282,7 +305,7 @@ function Player(props) {
                         pointerLeft: startPointerLeft + (targetState.pointerLeft - startPointerLeft) * progress,
                         pointerTop: startPointerTop + (targetState.pointerTop - startPointerTop) * progress
                     };
-                    updateCamera(nextState);
+                    updateCamera(nextState, currentCanvasWidth);
                     if (elapsedTime < duration) frame(animate);
                     else resolve();
                 };
@@ -297,7 +320,7 @@ function Player(props) {
         const startTop = currentState.top;
         const startPointerLeft = currentState.pointerLeft;
         const startPointerTop = currentState.pointerTop;
-        const startScale = currentState.width / imageWidth;
+        const startScale = currentState.width / currentCanvasWidth;
         const startTime = performance.now();
         const shouldMovePointer = 'number' == typeof targetState.pointerLeft && 'number' == typeof targetState.pointerTop && (targetState.pointerLeft !== startPointerLeft || targetState.pointerTop !== startPointerTop);
         const pointerMoveDuration = shouldMovePointer ? 0.375 * duration : 0;
@@ -322,19 +345,19 @@ function Player(props) {
                     const cameraElapsedTime = elapsedTime - cameraMoveStart;
                     const rawCameraProgress = Math.min(cameraElapsedTime / cameraMoveDuration, 1);
                     const cameraProgress = cubicImage(rawCameraProgress);
-                    const targetScale = targetState.width / imageWidth;
+                    const targetScale = targetState.width / currentCanvasWidth;
                     const progressScale = startScale + (targetScale - startScale) * cameraProgress;
-                    const progressWidth = imageWidth * progressScale;
-                    const progressHeight = imageHeight * progressScale;
+                    const progressWidth = currentCanvasWidth * progressScale;
+                    const progressHeight = currentCanvasHeight * progressScale;
                     nextState.width = progressWidth;
                     const progressLeft = startLeft + (targetState.left - startLeft) * cameraProgress;
                     const progressTop = startTop + (targetState.top - startTop) * cameraProgress;
-                    const horizontalExceed = progressLeft + progressWidth - imageWidth;
-                    const verticalExceed = progressTop + progressHeight - imageHeight;
+                    const horizontalExceed = progressLeft + progressWidth - currentCanvasWidth;
+                    const verticalExceed = progressTop + progressHeight - currentCanvasHeight;
                     nextState.left = horizontalExceed > 0 ? progressLeft + horizontalExceed : progressLeft;
                     nextState.top = verticalExceed > 0 ? progressTop + verticalExceed : progressTop;
                 }
-                updateCamera(nextState);
+                updateCamera(nextState, currentCanvasWidth);
                 if (elapsedTime < duration) frame(animate);
                 else resolve();
             };
@@ -471,7 +494,7 @@ function Player(props) {
                     var _item_context;
                     if (!item.img) throw new Error('img is required');
                     currentImg.current = item.img;
-                    await repaintImage();
+                    await repaintImage(item.imageWidth, item.imageHeight);
                     const elements = (null == (_item_context = item.context) ? void 0 : _item_context.tree) ? treeToList(item.context.tree) : [];
                     const highlightElements = item.highlightElement ? [
                         item.highlightElement
@@ -488,7 +511,7 @@ function Player(props) {
                 } else if ('img' === item.type) {
                     if (item.img && item.img !== currentImg.current) {
                         currentImg.current = item.img;
-                        await repaintImage();
+                        await repaintImage(item.imageWidth, item.imageHeight);
                     }
                     if (item.camera) await cameraAnimation(item.camera, item.duration, frame);
                     else await sleep(item.duration);

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

@@ -91,10 +91,10 @@
 .playground-container .middle-dialog-area .scroll-to-bottom-button {
   z-index: 10;
   background: #fff;
+  border: 1px solid rgba(0, 0, 0, .08);
   position: absolute;
   bottom: 10px;
   right: 0;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, .04);
 }
 
 .playground-container .middle-dialog-area .scroll-to-bottom-button:hover {

package/dist/es/component/universal-playground/index.mjs

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import icons, { ArrowDownOutlined, ClearOutlined, LoadingOutlined } from "@ant-design/icons";
 import { Button, Form, List, Tooltip, Typography, message } from "antd";
-import { useCallback, useEffect } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { usePlaygroundExecution } from "../../hooks/usePlaygroundExecution.mjs";
 import { usePlaygroundState } from "../../hooks/usePlaygroundState.mjs";
 import { useEnvConfig } from "../../store/store.mjs";
@@ -11,7 +11,7 @@ import { PlaygroundResultView } from "../playground-result/index.mjs";
 import "./index.css";
 import avatar from "../../icons/avatar.mjs";
 import { PromptInput } from "../prompt-input/index.mjs";
-import { LocalStorageProvider } from "./providers/storage-provider.mjs";
+import { createStorageProvider, detectBestStorageType } from "./providers/storage-provider.mjs";
 const { Text } = Typography;
 function getSDKId(sdk) {
     if (sdk.id && 'string' == typeof sdk.id) return `agent-${sdk.id}`;
@@ -41,11 +41,35 @@ function UniversalPlayground(param) {
     let { playgroundSDK, storage, contextProvider, config: componentConfig = {}, branding = {}, className = '', dryMode = false, showContextPreview = true } = param;
     const [form] = Form.useForm();
     const { config } = useEnvConfig();
-    const effectiveStorage = (()=>{
+    const [sdkReady, setSdkReady] = useState(false);
+    useEffect(()=>{
+        const initializeSDK = async ()=>{
+            if (playgroundSDK && 'function' == typeof playgroundSDK.checkStatus) try {
+                await playgroundSDK.checkStatus();
+                setSdkReady(true);
+            } catch (error) {
+                console.warn('Failed to initialize SDK, using default namespace:', error);
+                setSdkReady(true);
+            }
+            else setSdkReady(true);
+        };
+        initializeSDK();
+    }, [
+        playgroundSDK
+    ]);
+    const effectiveStorage = useMemo(()=>{
         if (storage) return storage;
+        if (!sdkReady) return null;
         const namespace = componentConfig.storageNamespace || getSDKId(playgroundSDK);
-        return new LocalStorageProvider(namespace);
-    })();
+        const bestStorageType = detectBestStorageType();
+        console.log(`Using ${bestStorageType} storage for namespace: ${namespace}`);
+        return createStorageProvider(bestStorageType, namespace);
+    }, [
+        storage,
+        sdkReady,
+        componentConfig.storageNamespace,
+        playgroundSDK
+    ]);
     const { loading, setLoading, infoList, setInfoList, actionSpace, actionSpaceLoading, uiContextPreview, setUiContextPreview, showScrollToBottomButton, verticalMode, replayCounter, setReplayCounter, infoListRef, currentRunningIdRef, interruptedFlagRef, clearInfoList, handleScrollToBottom } = usePlaygroundState(playgroundSDK, effectiveStorage, contextProvider);
     const { handleRun: executeAction, handleStop, canStop } = usePlaygroundExecution(playgroundSDK, effectiveStorage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef);
     useEffect(()=>{

package/dist/es/component/universal-playground/providers/indexeddb-storage-provider.mjs

@@ -0,0 +1,207 @@
+import { IndexedDBManager, createCleanupFunction, withErrorHandling } from "@midscene/shared/baseDB";
+function _define_property(obj, key, value) {
+    if (key in obj) Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+    });
+    else obj[key] = value;
+    return obj;
+}
+const DB_NAME = 'midscene_playground';
+const DB_VERSION = 1;
+const MESSAGES_STORE = 'playground_messages';
+const RESULTS_STORE = 'playground_results';
+const MAX_STORED_MESSAGES = 100;
+const MAX_STORED_RESULTS = 50;
+class IndexedDBStorageProvider {
+    async saveMessages(messages) {
+        await withErrorHandling(async ()=>{
+            await this.dbManager.clear(MESSAGES_STORE);
+            const messagesToSave = messages.slice(-MAX_STORED_MESSAGES);
+            await Promise.all(messagesToSave.map((msg, index)=>{
+                const lightMessage = {
+                    ...msg,
+                    result: void 0
+                };
+                const data = {
+                    id: msg.id || `msg-${index}`,
+                    data: lightMessage,
+                    timestamp: msg.timestamp ? msg.timestamp.getTime() : Date.now() + index
+                };
+                return this.dbManager.put(MESSAGES_STORE, data);
+            }));
+        }, 'Failed to save messages to IndexedDB', void 0, this.messagesCleanup);
+    }
+    async loadMessages() {
+        const result = await withErrorHandling(async ()=>{
+            const messages = await this.dbManager.getAll(MESSAGES_STORE, true);
+            if (0 === messages.length) return [];
+            return Promise.all(messages.map(async (msg)=>{
+                const item = msg.data;
+                const restoredItem = {
+                    ...item,
+                    timestamp: new Date(item.timestamp)
+                };
+                if ('result' === item.type && item.id) {
+                    const fullResult = await this.loadResult(item.id);
+                    if (fullResult) {
+                        restoredItem.result = fullResult.result;
+                        restoredItem.replayScriptsInfo = fullResult.replayScriptsInfo;
+                        restoredItem.replayCounter = fullResult.replayCounter;
+                        restoredItem.verticalMode = fullResult.verticalMode;
+                    }
+                }
+                return restoredItem;
+            }));
+        }, 'Failed to load messages from IndexedDB', [], this.messagesCleanup);
+        return result || [];
+    }
+    async clearMessages() {
+        await withErrorHandling(async ()=>{
+            await Promise.all([
+                this.dbManager.clear(MESSAGES_STORE),
+                this.dbManager.clear(RESULTS_STORE)
+            ]);
+        }, 'Failed to clear messages from IndexedDB');
+    }
+    async saveResult(id, result) {
+        await withErrorHandling(async ()=>{
+            const compressedResult = this.compressResultForStorage(result);
+            const data = {
+                id,
+                data: compressedResult,
+                timestamp: Date.now(),
+                size: JSON.stringify(compressedResult).length
+            };
+            await this.dbManager.put(RESULTS_STORE, data);
+        }, 'Failed to save result to IndexedDB', void 0, this.resultsCleanup);
+    }
+    async loadResult(id) {
+        const result = await withErrorHandling(async ()=>{
+            const data = await this.dbManager.get(RESULTS_STORE, id);
+            return (null == data ? void 0 : data.data) || null;
+        }, 'Failed to load result from IndexedDB', null);
+        return result || null;
+    }
+    compressResultForStorage(result) {
+        var _result_result_dump, _result_result;
+        if (!(null == (_result_result = result.result) ? void 0 : null == (_result_result_dump = _result_result.dump) ? void 0 : _result_result_dump.executions)) return result;
+        const compressedExecutions = result.result.dump.executions.map((execution)=>{
+            var _execution_tasks;
+            return {
+                ...execution,
+                tasks: (null == (_execution_tasks = execution.tasks) ? void 0 : _execution_tasks.map((task)=>{
+                    var _task_recorder;
+                    var _this_compressScreenshotIfNeeded;
+                    return {
+                        ...task,
+                        uiContext: task.uiContext ? {
+                            ...task.uiContext,
+                            screenshotBase64: null != (_this_compressScreenshotIfNeeded = this.compressScreenshotIfNeeded(task.uiContext.screenshotBase64)) ? _this_compressScreenshotIfNeeded : task.uiContext.screenshotBase64
+                        } : task.uiContext,
+                        recorder: null == (_task_recorder = task.recorder) ? void 0 : _task_recorder.map((record)=>({
+                                ...record,
+                                screenshot: this.compressScreenshotIfNeeded(record.screenshot)
+                            }))
+                    };
+                })) || []
+            };
+        });
+        return {
+            ...result,
+            result: {
+                ...result.result,
+                dump: {
+                    ...result.result.dump,
+                    executions: compressedExecutions
+                }
+            }
+        };
+    }
+    compressScreenshotIfNeeded(screenshot) {
+        if (!screenshot) return screenshot;
+        if (screenshot.length > 1048576) {
+            const sizeKB = Math.round(screenshot.length / 1024);
+            return `[COMPRESSED: ${sizeKB}KB screenshot removed for storage]`;
+        }
+        return screenshot;
+    }
+    async getStorageStats() {
+        const result = await withErrorHandling(async ()=>{
+            const [messageCount, resultCount] = await Promise.all([
+                this.dbManager.count(MESSAGES_STORE),
+                this.dbManager.count(RESULTS_STORE)
+            ]);
+            return {
+                messageCount,
+                resultCount
+            };
+        }, 'Failed to get storage statistics', {
+            messageCount: 0,
+            resultCount: 0
+        });
+        return result || {
+            messageCount: 0,
+            resultCount: 0
+        };
+    }
+    async cleanup() {
+        await Promise.all([
+            this.messagesCleanup(),
+            this.resultsCleanup()
+        ]);
+    }
+    constructor(namespace = 'playground'){
+        _define_property(this, "dbManager", void 0);
+        _define_property(this, "namespace", void 0);
+        _define_property(this, "messagesCleanup", void 0);
+        _define_property(this, "resultsCleanup", void 0);
+        this.namespace = namespace;
+        this.dbManager = new IndexedDBManager(`${DB_NAME}_${namespace}`, DB_VERSION, [
+            {
+                name: MESSAGES_STORE,
+                keyPath: 'id'
+            },
+            {
+                name: RESULTS_STORE,
+                keyPath: 'id'
+            }
+        ]);
+        this.messagesCleanup = createCleanupFunction(this.dbManager, MESSAGES_STORE, MAX_STORED_MESSAGES);
+        this.resultsCleanup = createCleanupFunction(this.dbManager, RESULTS_STORE, MAX_STORED_RESULTS);
+    }
+}
+class MemoryStorageProvider {
+    async saveMessages(messages) {
+        this.messages = [
+            ...messages
+        ];
+    }
+    async loadMessages() {
+        return [
+            ...this.messages
+        ];
+    }
+    async clearMessages() {
+        this.messages = [];
+        this.results.clear();
+    }
+    async saveResult(id, result) {
+        this.results.set(id, result);
+    }
+    constructor(){
+        _define_property(this, "messages", []);
+        _define_property(this, "results", new Map());
+    }
+}
+class NoOpStorageProvider {
+    async saveMessages(_messages) {}
+    async loadMessages() {
+        return [];
+    }
+    async clearMessages() {}
+    async saveResult(_id, _result) {}
+}
+export { IndexedDBStorageProvider, MemoryStorageProvider, NoOpStorageProvider };

package/dist/es/component/universal-playground/providers/storage-provider.mjs

@@ -1,3 +1,4 @@
+import { IndexedDBStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./indexeddb-storage-provider.mjs";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,
@@ -137,7 +138,7 @@ class LocalStorageProvider {
         this.resultsKey = `${namespace}-results`;
     }
 }
-class MemoryStorageProvider {
+class storage_provider_MemoryStorageProvider {
     async saveMessages(messages) {
         this.messages = [
             ...messages
@@ -160,7 +161,7 @@ class MemoryStorageProvider {
         _define_property(this, "results", new Map());
     }
 }
-class NoOpStorageProvider {
+class storage_provider_NoOpStorageProvider {
     async saveMessages(_messages) {}
     async loadMessages() {
         return [];
@@ -168,4 +169,42 @@ class NoOpStorageProvider {
     async clearMessages() {}
     async saveResult(_id, _result) {}
 }
-export { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider };
+var storage_provider_StorageType = /*#__PURE__*/ function(StorageType) {
+    StorageType["INDEXEDDB"] = "indexeddb";
+    StorageType["LOCALSTORAGE"] = "localStorage";
+    StorageType["MEMORY"] = "memory";
+    StorageType["NONE"] = "none";
+    return StorageType;
+}({});
+function createStorageProvider() {
+    let type = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "indexeddb", namespace = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 'playground';
+    switch(type){
+        case "indexeddb":
+            if ('undefined' != typeof indexedDB) return new IndexedDBStorageProvider(namespace);
+            console.warn('IndexedDB not available, falling back to localStorage');
+            return createStorageProvider("localStorage", namespace);
+        case "localStorage":
+            if ('undefined' != typeof localStorage) return new LocalStorageProvider(namespace);
+            console.warn('localStorage not available, falling back to memory storage');
+            return createStorageProvider("memory", namespace);
+        case "memory":
+            return new storage_provider_MemoryStorageProvider();
+        case "none":
+            return new storage_provider_NoOpStorageProvider();
+        default:
+            throw new Error(`Unknown storage type: ${type}`);
+    }
+}
+function detectBestStorageType() {
+    if ('undefined' != typeof indexedDB) try {
+        indexedDB.open('test', 1).onerror = ()=>{};
+        return "indexeddb";
+    } catch (e) {}
+    if ('undefined' != typeof localStorage) try {
+        localStorage.setItem('test', 'test');
+        localStorage.removeItem('test');
+        return "localStorage";
+    } catch (e) {}
+    return "memory";
+}
+export { MemoryStorageProvider as IndexedDBMemoryStorageProvider, NoOpStorageProvider as IndexedDBNoOpStorageProvider, IndexedDBStorageProvider, LocalStorageProvider, storage_provider_MemoryStorageProvider as MemoryStorageProvider, storage_provider_NoOpStorageProvider as NoOpStorageProvider, storage_provider_StorageType as StorageType, createStorageProvider, detectBestStorageType };

package/dist/es/hooks/usePlaygroundState.mjs

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { createStorageProvider, detectBestStorageType } from "../component/universal-playground/providers/storage-provider.mjs";
 import { WELCOME_MESSAGE_TEMPLATE } from "../utils/constants.mjs";
 function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const [loading, setLoading] = useState(false);
@@ -12,7 +13,25 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
     const infoListRef = useRef(null);
     const currentRunningIdRef = useRef(null);
     const interruptedFlagRef = useRef({});
+    const initializedRef = useRef(false);
     useEffect(()=>{
+        const migrateFromOldNamespace = async ()=>{
+            const oldStorage = createStorageProvider(detectBestStorageType(), 'playground-default');
+            try {
+                if (null == oldStorage ? void 0 : oldStorage.loadMessages) {
+                    const oldMessages = await oldStorage.loadMessages();
+                    if (oldMessages.length > 1) {
+                        console.log('Found data in old namespace, migrating...');
+                        if (null == storage ? void 0 : storage.saveMessages) await storage.saveMessages(oldMessages);
+                        if (oldStorage.clearMessages) await oldStorage.clearMessages();
+                        return oldMessages;
+                    }
+                }
+            } catch (error) {
+                console.debug('No data found in old namespace:', error);
+            }
+            return [];
+        };
         const initializeMessages = async ()=>{
             const welcomeMessage = {
                 ...WELCOME_MESSAGE_TEMPLATE,
@@ -20,7 +39,8 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 timestamp: new Date()
             };
             if (null == storage ? void 0 : storage.loadMessages) try {
-                const storedMessages = await storage.loadMessages();
+                let storedMessages = await storage.loadMessages();
+                if (0 === storedMessages.length) storedMessages = await migrateFromOldNamespace();
                 const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
                 hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
                     welcomeMessage,
@@ -36,8 +56,13 @@ function usePlaygroundState(playgroundSDK, storage, contextProvider) {
                 welcomeMessage
             ]);
         };
-        if (0 === infoList.length) initializeMessages();
-    }, []);
+        if (storage && !initializedRef.current) {
+            initializedRef.current = true;
+            initializeMessages();
+        } else if (!storage && 0 === infoList.length) initializeMessages();
+    }, [
+        storage
+    ]);
     useEffect(()=>{
         if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
             if (error instanceof DOMException && 'QuotaExceededError' === error.name) console.warn('Storage quota exceeded - some messages may not be saved persistently');

package/dist/es/index.mjs

@@ -20,6 +20,6 @@ import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from
 import { filterBase64Value, timeStr } from "./utils/index.mjs";
 import shiny_text from "./component/shiny-text/index.mjs";
 import universal_playground, { UniversalPlayground } from "./component/universal-playground/index.mjs";
-import { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider } from "./component/universal-playground/providers/storage-provider.mjs";
+import { IndexedDBStorageProvider, LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider, StorageType, createStorageProvider, detectBestStorageType } from "./component/universal-playground/providers/storage-provider.mjs";
 import { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
-export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, EnvConfigReminder, IndexedDBStorageProvider, LocalStorageProvider, Logo, MemoryStorageProvider, NavActions, NoOpContextProvider, NoOpStorageProvider, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, StaticContextProvider, StorageType, UniversalPlayground, universal_playground as UniversalPlaygroundDefault, actionNameForType, allScriptsFromDump, colorForName, createStorageProvider, detectBestStorageType, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, safeOverrideAIConfig, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useSafeOverrideAIConfig, useServerValid };