@midscene/visualizer 0.28.4-beta-20250910153230.0 → 0.28.4

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

@@ -0,0 +1,107 @@
+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;
+}
+class LocalStorageProvider {
+    async saveMessages(messages) {
+        try {
+            const lightMessages = messages.map((msg)=>({
+                    ...msg,
+                    result: void 0
+                }));
+            localStorage.setItem(this.messagesKey, JSON.stringify(lightMessages));
+        } catch (error) {
+            console.error('Failed to save messages to localStorage:', error);
+        }
+    }
+    async loadMessages() {
+        try {
+            const stored = localStorage.getItem(this.messagesKey);
+            if (!stored) return [];
+            const messages = JSON.parse(stored);
+            const restoredMessages = await Promise.all(messages.map(async (msg)=>{
+                if ('result' === msg.type && msg.id) {
+                    const resultKey = `${this.resultsKey}-${msg.id}`;
+                    const storedResult = localStorage.getItem(resultKey);
+                    if (storedResult) try {
+                        const resultItem = JSON.parse(storedResult);
+                        return {
+                            ...msg,
+                            ...resultItem
+                        };
+                    } catch (e) {
+                        console.warn('Failed to parse stored result:', e);
+                    }
+                }
+                return msg;
+            }));
+            return restoredMessages;
+        } catch (error) {
+            console.error('Failed to load messages from localStorage:', error);
+            return [];
+        }
+    }
+    async clearMessages() {
+        try {
+            localStorage.removeItem(this.messagesKey);
+            const keys = Object.keys(localStorage);
+            keys.forEach((key)=>{
+                if (key.startsWith(this.resultsKey)) localStorage.removeItem(key);
+            });
+        } catch (error) {
+            console.error('Failed to clear messages from localStorage:', error);
+        }
+    }
+    async saveResult(id, result) {
+        try {
+            const resultKey = `${this.resultsKey}-${id}`;
+            localStorage.setItem(resultKey, JSON.stringify(result));
+        } catch (error) {
+            console.error('Failed to save result to localStorage:', error);
+        }
+    }
+    constructor(namespace = 'playground'){
+        _define_property(this, "messagesKey", void 0);
+        _define_property(this, "resultsKey", void 0);
+        this.messagesKey = `${namespace}-messages`;
+        this.resultsKey = `${namespace}-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 { LocalStorageProvider, MemoryStorageProvider, NoOpStorageProvider };

package/dist/es/hooks/usePlaygroundExecution.mjs

@@ -0,0 +1,168 @@
+import { useCallback } from "react";
+import { BLANK_RESULT } from "../utils/constants.mjs";
+import { allScriptsFromDump } from "../utils/replay-scripts.mjs";
+const noReplayAPIs = [
+    'aiQuery',
+    'aiAssert'
+];
+function usePlaygroundExecution(playgroundSDK, storage, actionSpace, loading, setLoading, infoList, setInfoList, replayCounter, setReplayCounter, verticalMode, currentRunningIdRef, interruptedFlagRef) {
+    const handleRun = useCallback(async (value)=>{
+        const thisRunningId = Date.now();
+        const actionType = value.type;
+        const displayContent = `${value.type}: ${value.prompt || JSON.stringify(value.params)}`;
+        const userItem = {
+            id: `user-${Date.now()}`,
+            type: 'user',
+            content: displayContent,
+            timestamp: new Date()
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                userItem
+            ]);
+        setLoading(true);
+        const result = {
+            ...BLANK_RESULT
+        };
+        const systemItem = {
+            id: `system-${thisRunningId}`,
+            type: 'system',
+            content: '',
+            timestamp: new Date(),
+            loading: true,
+            loadingProgressText: ''
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                systemItem
+            ]);
+        try {
+            currentRunningIdRef.current = thisRunningId;
+            interruptedFlagRef.current[thisRunningId] = false;
+            if (playgroundSDK.onProgressUpdate) playgroundSDK.onProgressUpdate((tip)=>{
+                if (interruptedFlagRef.current[thisRunningId]) return;
+                const progressItem = {
+                    id: `progress-${thisRunningId}-${Date.now()}`,
+                    type: 'progress',
+                    content: tip,
+                    timestamp: new Date()
+                };
+                setInfoList((prev)=>[
+                        ...prev,
+                        progressItem
+                    ]);
+            });
+            result.result = await playgroundSDK.executeAction(actionType, value, {
+                requestId: thisRunningId.toString()
+            });
+            if ('object' == typeof result.result && null !== result.result) {
+                const resultObj = result.result;
+                if (resultObj.dump) result.dump = resultObj.dump;
+                if (resultObj.reportHTML) result.reportHTML = resultObj.reportHTML;
+                if (resultObj.error) result.error = resultObj.error;
+                if (void 0 !== resultObj.result) result.result = resultObj.result;
+            }
+        } catch (e) {
+            result.error = (null == e ? void 0 : e.message) || String(e);
+            console.error('Playground execution error:', e);
+        }
+        if (interruptedFlagRef.current[thisRunningId]) return;
+        setLoading(false);
+        currentRunningIdRef.current = null;
+        let replayInfo = null;
+        let counter = replayCounter;
+        if ((null == result ? void 0 : result.dump) && !noReplayAPIs.includes(actionType)) {
+            const info = allScriptsFromDump(result.dump);
+            setReplayCounter((c)=>c + 1);
+            replayInfo = info;
+            counter = replayCounter + 1;
+        }
+        setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` ? {
+                    ...item,
+                    content: '',
+                    loading: false,
+                    loadingProgressText: ''
+                } : item));
+        const resultItem = {
+            id: `result-${thisRunningId}`,
+            type: 'result',
+            content: 'Execution result',
+            timestamp: new Date(),
+            result: result,
+            loading: false,
+            replayScriptsInfo: replayInfo,
+            replayCounter: counter,
+            loadingProgressText: '',
+            verticalMode: verticalMode
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                resultItem
+            ]);
+        if (null == storage ? void 0 : storage.saveResult) try {
+            await storage.saveResult(resultItem.id, resultItem);
+        } catch (error) {
+            console.error('Failed to save result:', error);
+        }
+        const separatorItem = {
+            id: `separator-${thisRunningId}`,
+            type: 'separator',
+            content: 'New Session',
+            timestamp: new Date()
+        };
+        setInfoList((prev)=>[
+                ...prev,
+                separatorItem
+            ]);
+    }, [
+        playgroundSDK,
+        storage,
+        actionSpace,
+        setLoading,
+        setInfoList,
+        replayCounter,
+        setReplayCounter,
+        verticalMode,
+        currentRunningIdRef,
+        interruptedFlagRef
+    ]);
+    const handleStop = useCallback(async ()=>{
+        const thisRunningId = currentRunningIdRef.current;
+        if (thisRunningId && playgroundSDK.cancelExecution) try {
+            await playgroundSDK.cancelExecution(thisRunningId.toString());
+            interruptedFlagRef.current[thisRunningId] = true;
+            setLoading(false);
+            setInfoList((prev)=>prev.map((item)=>item.id === `system-${thisRunningId}` && item.loading ? {
+                        ...item,
+                        content: 'Operation stopped',
+                        loading: false,
+                        loadingProgressText: ''
+                    } : item));
+            const separatorItem = {
+                id: `separator-${thisRunningId}`,
+                type: 'separator',
+                content: 'New Session',
+                timestamp: new Date()
+            };
+            setInfoList((prev)=>[
+                    ...prev,
+                    separatorItem
+                ]);
+        } catch (error) {
+            console.error('Failed to stop execution:', error);
+        }
+    }, [
+        playgroundSDK,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        setLoading,
+        setInfoList
+    ]);
+    const canStop = loading && !!currentRunningIdRef.current && !!playgroundSDK.cancelExecution;
+    return {
+        handleRun,
+        handleStop,
+        canStop
+    };
+}
+export { usePlaygroundExecution };

package/dist/es/hooks/usePlaygroundState.mjs

@@ -0,0 +1,176 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { WELCOME_MESSAGE_TEMPLATE } from "../utils/constants.mjs";
+function usePlaygroundState(playgroundSDK, storage, contextProvider) {
+    const [loading, setLoading] = useState(false);
+    const [infoList, setInfoList] = useState([]);
+    const [actionSpace, setActionSpace] = useState([]);
+    const [actionSpaceLoading, setActionSpaceLoading] = useState(true);
+    const [uiContextPreview, setUiContextPreview] = useState();
+    const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
+    const [verticalMode, setVerticalMode] = useState(false);
+    const [replayCounter, setReplayCounter] = useState(0);
+    const infoListRef = useRef(null);
+    const currentRunningIdRef = useRef(null);
+    const interruptedFlagRef = useRef({});
+    useEffect(()=>{
+        const initializeMessages = async ()=>{
+            const welcomeMessage = {
+                ...WELCOME_MESSAGE_TEMPLATE,
+                id: 'welcome',
+                timestamp: new Date()
+            };
+            if (null == storage ? void 0 : storage.loadMessages) try {
+                const storedMessages = await storage.loadMessages();
+                const hasWelcomeMessage = storedMessages.some((msg)=>'welcome' === msg.id);
+                hasWelcomeMessage ? setInfoList(storedMessages) : setInfoList([
+                    welcomeMessage,
+                    ...storedMessages
+                ]);
+            } catch (error) {
+                console.error('Failed to load messages:', error);
+                setInfoList([
+                    welcomeMessage
+                ]);
+            }
+            else setInfoList([
+                welcomeMessage
+            ]);
+        };
+        if (0 === infoList.length) initializeMessages();
+    }, []);
+    useEffect(()=>{
+        if ((null == storage ? void 0 : storage.saveMessages) && infoList.length > 1) storage.saveMessages(infoList).catch((error)=>{
+            console.error('Failed to save messages:', error);
+        });
+    }, [
+        infoList,
+        storage
+    ]);
+    useEffect(()=>{
+        if (!(null == contextProvider ? void 0 : contextProvider.getUIContext) || uiContextPreview) return;
+        contextProvider.getUIContext().then((context)=>setUiContextPreview(context)).catch((error)=>{
+            console.error('Failed to get UI context:', error);
+        });
+    }, [
+        contextProvider,
+        uiContextPreview
+    ]);
+    useEffect(()=>{
+        const loadActionSpace = async ()=>{
+            setActionSpaceLoading(true);
+            try {
+                var _contextProvider_getUIContext;
+                const context = uiContextPreview || await (null == contextProvider ? void 0 : null == (_contextProvider_getUIContext = contextProvider.getUIContext) ? void 0 : _contextProvider_getUIContext.call(contextProvider));
+                const space = await playgroundSDK.getActionSpace(context);
+                setActionSpace(space || []);
+            } catch (error) {
+                console.error('Failed to load action space:', error);
+                setActionSpace([]);
+            } finally{
+                setActionSpaceLoading(false);
+            }
+        };
+        loadActionSpace();
+    }, [
+        playgroundSDK,
+        uiContextPreview,
+        contextProvider
+    ]);
+    useEffect(()=>{
+        const sizeThreshold = 750;
+        setVerticalMode(window.innerWidth < sizeThreshold);
+        const handleResize = ()=>{
+            setVerticalMode(window.innerWidth < sizeThreshold);
+        };
+        window.addEventListener('resize', handleResize);
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, []);
+    const scrollToBottom = useCallback(()=>{
+        setTimeout(()=>{
+            if (infoListRef.current) infoListRef.current.scrollTop = infoListRef.current.scrollHeight;
+        }, 100);
+    }, []);
+    const checkIfScrolledToBottom = useCallback(()=>{
+        if (infoListRef.current) {
+            const { scrollTop, scrollHeight, clientHeight } = infoListRef.current;
+            const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+            setShowScrollToBottomButton(!isAtBottom);
+        }
+    }, []);
+    const handleScrollToBottom = useCallback(()=>{
+        if (infoListRef.current) {
+            infoListRef.current.scrollTo({
+                top: infoListRef.current.scrollHeight,
+                behavior: 'smooth'
+            });
+            setShowScrollToBottomButton(false);
+        }
+    }, []);
+    useEffect(()=>{
+        if (infoList.length > 0) scrollToBottom();
+    }, [
+        infoList,
+        scrollToBottom
+    ]);
+    useEffect(()=>{
+        const container = infoListRef.current;
+        if (container) {
+            container.addEventListener('scroll', checkIfScrolledToBottom);
+            checkIfScrolledToBottom();
+            return ()=>{
+                container.removeEventListener('scroll', checkIfScrolledToBottom);
+            };
+        }
+    }, [
+        checkIfScrolledToBottom
+    ]);
+    const clearInfoList = useCallback(async ()=>{
+        const welcomeMessage = {
+            ...WELCOME_MESSAGE_TEMPLATE,
+            id: 'welcome',
+            timestamp: new Date()
+        };
+        setInfoList([
+            welcomeMessage
+        ]);
+        if (null == storage ? void 0 : storage.clearMessages) try {
+            await storage.clearMessages();
+        } catch (error) {
+            console.error('Failed to clear stored messages:', error);
+        }
+    }, [
+        storage
+    ]);
+    const refreshContext = useCallback(async ()=>{
+        if (null == contextProvider ? void 0 : contextProvider.refreshContext) try {
+            const newContext = await contextProvider.refreshContext();
+            setUiContextPreview(newContext);
+        } catch (error) {
+            console.error('Failed to refresh context:', error);
+        }
+    }, [
+        contextProvider
+    ]);
+    return {
+        loading,
+        setLoading,
+        infoList,
+        setInfoList,
+        actionSpace,
+        actionSpaceLoading,
+        uiContextPreview,
+        setUiContextPreview,
+        showScrollToBottomButton,
+        verticalMode,
+        replayCounter,
+        setReplayCounter,
+        infoListRef,
+        currentRunningIdRef,
+        interruptedFlagRef,
+        clearInfoList,
+        refreshContext,
+        handleScrollToBottom,
+        scrollToBottom
+    };
+}
+export { usePlaygroundState };

package/dist/es/icons/avatar.mjs

@@ -0,0 +1,28 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const SvgAvatar = (props)=>/*#__PURE__*/ 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__*/ jsx("rect", {
+                width: 20,
+                height: 20,
+                fill: "#2B83FF",
+                rx: 10
+            }),
+            /*#__PURE__*/ 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;
+export { avatar as default };

package/dist/es/index.mjs

@@ -1,19 +1,23 @@
 import "./component/playground/index.css";
-import { allScriptsFromDump, generateAnimationScripts } from "./component/replay-scripts.mjs";
-import { useEnvConfig } from "./component/store/store.mjs";
-import { colorForName, globalThemeConfig, highlightColorForType } from "./component/color.mjs";
-import { EnvConfig } from "./component/env-config.mjs";
-import { Logo } from "./component/logo.mjs";
-import { iconForStatus, timeCostStrElement } from "./component/misc.mjs";
-import { useServerValid } from "./component/playground/useServerValid.mjs";
-import { PlaygroundResultView } from "./component/playground/PlaygroundResult.mjs";
-import { ServiceModeControl } from "./component/playground/ServiceModeControl.mjs";
-import { ContextPreview } from "./component/playground/ContextPreview.mjs";
-import { PromptInput } from "./component/playground/PromptInput.mjs";
-import { Player } from "./component/player.mjs";
-import { Blackboard } from "./component/blackboard.mjs";
-import { GithubStar } from "./component/github-star.mjs";
-import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./component/playground/playground-utils.mjs";
-import { filterBase64Value, timeStr } from "./utils.mjs";
-import shiny_text from "./component/shiny-text.mjs";
-export { Blackboard, ContextPreview, EnvConfig, GithubStar, Logo, Player, PlaygroundResultView, PromptInput, ServiceModeControl, shiny_text as ShinyText, actionNameForType, allScriptsFromDump, colorForName, filterBase64Value, generateAnimationScripts, getPlaceholderForType, globalThemeConfig, highlightColorForType, iconForStatus, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };
+import "./component/universal-playground/index.css";
+import { allScriptsFromDump, generateAnimationScripts } from "./utils/replay-scripts.mjs";
+import { useEnvConfig } from "./store/store.mjs";
+import { colorForName, globalThemeConfig, highlightColorForType } from "./utils/color.mjs";
+import { EnvConfig } from "./component/env-config/index.mjs";
+import { Logo } from "./component/logo/index.mjs";
+import { iconForStatus, timeCostStrElement } from "./component/misc/index.mjs";
+import { useServerValid } from "./hooks/useServerValid.mjs";
+import { PlaygroundResultView } from "./component/playground-result/index.mjs";
+import { ServiceModeControl } from "./component/service-mode-control/index.mjs";
+import { ContextPreview } from "./component/context-preview/index.mjs";
+import { PromptInput } from "./component/prompt-input/index.mjs";
+import { Player } from "./component/player/index.mjs";
+import { Blackboard } from "./component/blackboard/index.mjs";
+import { GithubStar } from "./component/github-star/index.mjs";
+import { actionNameForType, getPlaceholderForType, staticAgentFromContext } from "./utils/playground-utils.mjs";
+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 { AgentContextProvider, BaseContextProvider, NoOpContextProvider, StaticContextProvider } from "./component/universal-playground/providers/context-provider.mjs";
+export { AgentContextProvider, BaseContextProvider, Blackboard, ContextPreview, EnvConfig, GithubStar, LocalStorageProvider, Logo, MemoryStorageProvider, 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, staticAgentFromContext, timeCostStrElement, timeStr, useEnvConfig, useServerValid };

package/dist/es/{component/playground/playground-constants.mjs → utils/constants.mjs}

@@ -1,45 +1,3 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Alert } from "antd";
-import shiny_text from "../shiny-text.mjs";
-import "./index.css";
-const errorMessageServerNotReady = /*#__PURE__*/ jsxs("span", {
-    children: [
-        "Don't worry, just one more step to launch the playground server.",
-        /*#__PURE__*/ jsx("br", {}),
-        "Please run one of the commands under the midscene project directory:",
-        /*#__PURE__*/ jsx("br", {}),
-        "a. ",
-        /*#__PURE__*/ jsx("strong", {
-            children: "npx midscene-playground"
-        }),
-        /*#__PURE__*/ jsx("br", {}),
-        "b. ",
-        /*#__PURE__*/ jsx("strong", {
-            children: "npx --yes @midscene/web"
-        })
-    ]
-});
-const serverLaunchTip = function() {
-    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
-    return /*#__PURE__*/ jsx("div", {
-        className: "server-tip",
-        children: /*#__PURE__*/ jsx(Alert, {
-            message: "Playground Server Not Ready",
-            description: notReadyMessage,
-            type: "warning"
-        })
-    });
-};
-const emptyResultTip = /*#__PURE__*/ jsx("div", {
-    className: "result-empty-tip",
-    style: {
-        textAlign: 'center'
-    },
-    children: /*#__PURE__*/ jsx(shiny_text, {
-        disabled: true,
-        text: "The result will be shown here"
-    })
-});
 const trackingTip = 'limit popup to current tab';
 const deepThinkTip = 'deep think';
 const screenshotIncludedTip = 'include screenshot in request';
@@ -116,4 +74,26 @@ const defaultMainButtons = [
     'aiQuery',
     'aiAssert'
 ];
-export { apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, emptyResultTip, errorMessageServerNotReady, screenshotIncludedTip, serverLaunchTip, trackingTip };
+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
+};
+export { BLANK_RESULT, WELCOME_MESSAGE_TEMPLATE, apiMetadata, deepThinkTip, defaultMainButtons, domIncludedTip, screenshotIncludedTip, trackingTip };

package/dist/es/{component/playground → utils}/playground-utils.mjs

@@ -1,5 +1,5 @@
 import { StaticPage, StaticPageAgent } from "@midscene/web/static";
-import { isZodObjectSchema, unwrapZodType } from "./types.mjs";
+import { isZodObjectSchema, unwrapZodType } from "../types.mjs";
 const actionNameForType = (type)=>{
     const typeWithoutAi = type.startsWith('ai') ? type.slice(2) : type;
     const fullName = typeWithoutAi.replace(/([A-Z])/g, ' $1').trim();

package/dist/es/{component → utils}/replay-scripts.mjs

@@ -1,6 +1,5 @@
 'use client';
-import "./player.css";
-import { mousePointer } from "../utils.mjs";
+import { mousePointer } from "./index.mjs";
 import { paramStr, typeStr } from "@midscene/core/agent";
 import { treeToList } from "@midscene/shared/extractor";
 const stillDuration = 900;

package/dist/lib/component/{blackboard.js → blackboard/index.js}

@@ -35,17 +35,17 @@ require("pixi.js/unsafe-eval");
 const external_antd_namespaceObject = require("antd");
 const external_pixi_js_namespaceObject = require("pixi.js");
 const external_react_namespaceObject = require("react");
-const external_color_js_namespaceObject = require("./color.js");
-require("./blackboard.css");
+const color_js_namespaceObject = require("../../utils/color.js");
+require("./index.css");
 const extractor_namespaceObject = require("@midscene/shared/extractor");
 const external_pixi_filters_namespaceObject = require("pixi-filters");
-const store_js_namespaceObject = require("./store/store.js");
+const store_js_namespaceObject = require("../../store/store.js");
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
 const pointRadius = 10;
 const pointMarkForItem = (point, type)=>{
     const [x, y] = point;
-    const themeColor = (0, external_color_js_namespaceObject.highlightColorForType)('element');
+    const themeColor = (0, color_js_namespaceObject.highlightColorForType)('element');
     const graphics = new external_pixi_js_namespaceObject.Graphics();
     graphics.beginFill(themeColor, itemFillAlpha);
     graphics.drawCircle(x, y, pointRadius);
@@ -55,7 +55,7 @@ const pointMarkForItem = (point, type)=>{
 const rectMarkForItem = (rect, name, type)=>{
     const { left, top, width, height } = rect;
     let themeColor;
-    themeColor = 'element' === type ? (0, external_color_js_namespaceObject.colorForName)(name) : 'searchArea' === type ? (0, external_color_js_namespaceObject.highlightColorForType)('searchArea') : (0, external_color_js_namespaceObject.highlightColorForType)('element');
+    themeColor = 'element' === type ? (0, color_js_namespaceObject.colorForName)(name) : 'searchArea' === type ? (0, color_js_namespaceObject.highlightColorForType)('searchArea') : (0, color_js_namespaceObject.highlightColorForType)('element');
     const alpha = 'highlight' === type ? highlightAlpha : itemFillAlpha;
     const graphics = new external_pixi_js_namespaceObject.Graphics();
     graphics.beginFill(themeColor, alpha);