@midscene/visualizer 0.28.3 → 0.28.4

package/dist/es/component/{blackboard.mjs → blackboard/index.mjs}

@@ -4,11 +4,11 @@ import "pixi.js/unsafe-eval";
 import { Checkbox } from "antd";
 import { Application, Container, Graphics, Rectangle, Sprite, Text, Texture } from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { colorForName, highlightColorForType } from "./color.mjs";
-import "./blackboard.css";
+import { colorForName, highlightColorForType } from "../../utils/color.mjs";
+import "./index.css";
 import { treeToList } from "@midscene/shared/extractor";
 import { DropShadowFilter } from "pixi-filters";
-import { useBlackboardPreference } from "./store/store.mjs";
+import { useBlackboardPreference } from "../../store/store.mjs";
 const itemFillAlpha = 0.4;
 const highlightAlpha = 0.4;
 const pointRadius = 10;

package/dist/es/component/{playground/ConfigSelector.mjs → config-selector/index.mjs}

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Checkbox, Dropdown, Radio } from "antd";
 import setting from "../../icons/setting.mjs";
-import { useEnvConfig } from "../store/store.mjs";
-import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "./playground-constants.mjs";
-import "./index.css";
+import { useEnvConfig } from "../../store/store.mjs";
+import { deepThinkTip, domIncludedTip, screenshotIncludedTip, trackingTip } from "../../utils/constants.mjs";
 const ConfigSelector = (param)=>{
     let { showDeepThinkOption = false, enableTracking = false, showDataExtractionOptions = false, hideDomAndScreenshotOptions = false } = param;
     const forceSameTabNavigation = useEnvConfig((state)=>state.forceSameTabNavigation);

package/dist/es/component/{playground/ContextPreview.mjs → context-preview/index.mjs}

@@ -1,9 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "antd";
-import blackboard from "../blackboard.mjs";
-import { iconForStatus } from "../misc.mjs";
-import playground_demo_ui_context from "../playground-demo-ui-context.json";
-import "./index.css";
+import blackboard from "../blackboard/index.mjs";
+import { iconForStatus } from "../misc/index.mjs";
+import playground_demo_ui_context from "../playground/playground-demo-ui-context.json";
 const ContextPreview = (param)=>{
     let { uiContextPreview, setUiContextPreview, showContextPreview } = param;
     if (!showContextPreview) return null;

package/dist/es/component/{env-config.mjs → env-config/index.mjs}

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { SettingOutlined } from "@ant-design/icons";
 import { Input, Modal, Tooltip } from "antd";
 import { useEffect, useRef, useState } from "react";
-import { useEnvConfig } from "./store/store.mjs";
+import { useEnvConfig } from "../../store/store.mjs";
 function EnvConfig(param) {
     let { showTooltipWhenEmpty = true, showModelName = true, tooltipPlacement = 'bottom', mode = 'icon' } = param;
     const { config, configString, loadConfig, syncFromStorage } = useEnvConfig();

package/dist/es/component/{github-star.mjs → github-star/index.mjs}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import "./github-star.css";
+import "./index.css";
 const GithubStar = ()=>/*#__PURE__*/ jsx("a", {
         href: "https://github.com/web-infra-dev/midscene",
         target: "_blank",

package/dist/es/component/history-selector/index.css

@@ -0,0 +1,132 @@
+.history-modal-container {
+  border-radius: 12px 12px 0 0;
+  flex-direction: column;
+  height: 70vh;
+  display: flex;
+  overflow: hidden;
+}
+
+.history-modal-container .history-modal-header {
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  padding: 0 25px;
+  line-height: 48px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button {
+  justify-content: center;
+  align-items: center;
+  margin-right: -4px;
+  padding: 4px;
+  display: flex;
+}
+
+.history-modal-container .history-modal-header .close-button .anticon {
+  color: #999;
+  font-size: 18px;
+}
+
+.history-modal-container .history-modal-header .close-button:hover .anticon {
+  color: #666;
+}
+
+.history-modal-container .history-search-section {
+  background: #fff;
+  padding: 16px 20px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper {
+  color: rgba(0, 0, 0, .25);
+  align-items: center;
+  gap: 12px;
+  display: flex;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input {
+  background: #f1f2f3;
+  border: none;
+  border-radius: 16px;
+  flex: 1;
+  height: 36px;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
+  box-shadow: none;
+  background: none;
+  border: none;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
+  background: #fff;
+  border-color: #d9d9d9;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button {
+  color: #1890ff;
+  height: auto;
+  padding: 0;
+}
+
+.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
+  color: #40a9ff;
+}
+
+.history-modal-container .history-content {
+  flex: 1;
+  padding: 0 25px 25px;
+  overflow-y: auto;
+}
+
+.history-modal-container .history-content .history-group {
+  margin-bottom: 10px;
+}
+
+.history-modal-container .history-content .history-group .history-group-title {
+  color: rgba(0, 0, 0, .45);
+  height: 40px;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 40px;
+}
+
+.history-modal-container .history-content .history-group .history-item {
+  cursor: pointer;
+  color: rgba(0, 0, 0, .85);
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  height: 40px;
+  font-size: 14px;
+  line-height: 40px;
+  overflow: hidden;
+}
+
+.history-modal-container .history-content .history-group .history-item:hover {
+  background: #f2f4f7;
+  margin: 0 -8px;
+  padding: 0 8px;
+}
+
+.history-modal-container .history-content .no-results {
+  text-align: center;
+  color: #999;
+  padding: 40px 20px;
+}
+
+.ant-modal-wrap .ant-modal-content {
+  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
+}
+
+@keyframes slideUpFromBottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+

package/dist/es/component/{playground/HistorySelector.mjs → history-selector/index.mjs}

@@ -4,7 +4,7 @@ import { useMemo, useState } from "react";
 import icons_close from "../../icons/close.mjs";
 import icons_history from "../../icons/history.mjs";
 import magnifying_glass from "../../icons/magnifying-glass.mjs";
-import { useHistoryStore } from "../store/history.mjs";
+import { useHistoryStore } from "../../store/history.mjs";
 import "./index.css";
 const { Text } = Typography;
 const HistorySelector = (param)=>{

package/dist/es/component/index.mjs

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

package/dist/es/component/{logo.mjs → logo/index.mjs}

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import "./logo.css";
+import "./index.css";
 const LogoUrl = 'https://lf3-static.bytednsdoc.com/obj/eden-cn/vhaeh7vhabf/Midscene.png';
 const Logo = (param)=>{
     let { hideLogo = false } = param;

package/dist/es/component/{misc.mjs → misc/index.mjs}

@@ -1,5 +1,7 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { ArrowRightOutlined, CheckOutlined, ClockCircleOutlined, CloseOutlined, LogoutOutlined, MinusOutlined, WarningOutlined } from "@ant-design/icons";
+import { Alert } from "antd";
+import shiny_text from "../shiny-text/index.mjs";
 function timeCostStrElement(timeCost) {
     let str;
     str = 'number' != typeof timeCost ? '-' : `${(timeCost / 1000).toFixed(2)}s`;
@@ -51,4 +53,42 @@ const iconForStatus = (status)=>{
             return /*#__PURE__*/ jsx(MinusOutlined, {});
     }
 };
-export { iconForStatus, timeCostStrElement };
+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"
+    })
+});
+export { emptyResultTip, errorMessageServerNotReady, iconForStatus, serverLaunchTip, timeCostStrElement };

package/dist/es/component/{player.mjs → player/index.mjs}

@@ -3,17 +3,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import "pixi.js/unsafe-eval";
 import { Application, Container, Sprite } from "pixi.js";
 import { useEffect, useMemo, useRef, useState } from "react";
-import "./player.css";
-import { mouseLoading, mousePointer } from "../utils.mjs";
+import "./index.css";
+import { mouseLoading, mousePointer } from "../../utils/index.mjs";
 import { CaretRightOutlined, DownloadOutlined, ExportOutlined, LoadingOutlined } from "@ant-design/icons";
 import { treeToList } from "@midscene/shared/extractor";
 import { Dropdown, Spin, Switch, Tooltip } from "antd";
-import global_perspective from "../icons/global-perspective.mjs";
-import player_setting from "../icons/player-setting.mjs";
-import show_marker from "../icons/show-marker.mjs";
-import { rectMarkForItem } from "./blackboard.mjs";
-import { getTextureFromCache, loadTexture } from "./pixi-loader.mjs";
-import { useBlackboardPreference } from "./store/store.mjs";
+import global_perspective from "../../icons/global-perspective.mjs";
+import player_setting from "../../icons/player-setting.mjs";
+import show_marker from "../../icons/show-marker.mjs";
+import { useBlackboardPreference } from "../../store/store.mjs";
+import { getTextureFromCache, loadTexture } from "../../utils/pixi-loader.mjs";
+import { rectMarkForItem } from "../blackboard/index.mjs";
 function _define_property(obj, key, value) {
     if (key in obj) Object.defineProperty(obj, key, {
         value: value,

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

@@ -1,7 +1,36 @@
-body {
+.result-wrapper {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 4px 0;
+  display: flex;
+}
+
+.result-wrapper .loading-container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.result-wrapper .loading-container .loading-progress-text {
+  color: #888;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.result-wrapper pre {
+  white-space: pre-wrap;
+  text-wrap: unset;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  background: #f2f4f7;
+  border-radius: 8px;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
-  font-size: 14px;
+  padding: 14px;
+  overflow: scroll;
 }
 
 .prompt-input-wrapper {
@@ -334,164 +363,9 @@ body {
   color: #2b83ff;
 }
 
-.history-modal-container {
-  border-radius: 12px 12px 0 0;
-  flex-direction: column;
-  height: 70vh;
-  display: flex;
-  overflow: hidden;
-}
-
-.history-modal-container .history-modal-header {
-  justify-content: space-between;
-  align-items: center;
-  height: 48px;
-  padding: 0 25px;
-  line-height: 48px;
-  display: flex;
-}
-
-.history-modal-container .history-modal-header .close-button {
-  justify-content: center;
-  align-items: center;
-  margin-right: -4px;
-  padding: 4px;
-  display: flex;
-}
-
-.history-modal-container .history-modal-header .close-button .anticon {
-  color: #999;
-  font-size: 18px;
-}
-
-.history-modal-container .history-modal-header .close-button:hover .anticon {
-  color: #666;
-}
-
-.history-modal-container .history-search-section {
-  background: #fff;
-  padding: 16px 20px;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper {
-  color: rgba(0, 0, 0, .25);
-  align-items: center;
-  gap: 12px;
-  display: flex;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper .search-input {
-  background: #f1f2f3;
-  border: none;
-  border-radius: 16px;
-  flex: 1;
-  height: 36px;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
-  box-shadow: none;
-  background: none;
-  border: none;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper .search-input:hover, .history-modal-container .history-search-section .search-input-wrapper .search-input:focus-within {
-  background: #fff;
-  border-color: #d9d9d9;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper .clear-button {
-  color: #1890ff;
-  height: auto;
-  padding: 0;
-}
-
-.history-modal-container .history-search-section .search-input-wrapper .clear-button:hover {
-  color: #40a9ff;
-}
-
-.history-modal-container .history-content {
-  flex: 1;
-  padding: 0 25px 25px;
-  overflow-y: auto;
-}
-
-.history-modal-container .history-content .history-group {
-  margin-bottom: 10px;
-}
-
-.history-modal-container .history-content .history-group .history-group-title {
-  color: rgba(0, 0, 0, .45);
-  height: 40px;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 40px;
-}
-
-.history-modal-container .history-content .history-group .history-item {
-  cursor: pointer;
-  color: rgba(0, 0, 0, .85);
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  height: 40px;
-  font-size: 14px;
-  line-height: 40px;
-  overflow: hidden;
-}
-
-.history-modal-container .history-content .history-group .history-item:hover {
-  background: #f2f4f7;
-  margin: 0 -8px;
-  padding: 0 8px;
-}
-
-.history-modal-container .history-content .no-results {
-  text-align: center;
-  color: #999;
-  padding: 40px 20px;
-}
-
-.ant-modal-wrap .ant-modal-content {
-  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
-}
-
-@keyframes slideUpFromBottom {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.result-wrapper {
-  justify-content: center;
-  height: 100%;
-  margin: 4px 0;
-  display: flex;
-}
-
-.result-wrapper .loading-container {
-  text-align: center;
-}
-
-.result-wrapper .loading-container .loading-progress-text {
-  color: #888;
-  margin-top: 8px;
-  font-size: 12px;
-}
-
-.result-wrapper pre {
-  white-space: pre-wrap;
-  text-wrap: unset;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  background: #f2f4f7;
-  border-radius: 8px;
+body {
   margin: 0;
-  padding: 14px;
-  overflow: scroll;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
+  font-size: 14px;
 }
 

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

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

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

@@ -0,0 +1,35 @@
+.result-wrapper {
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  margin: 4px 0;
+  display: flex;
+}
+
+.result-wrapper .loading-container {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.result-wrapper .loading-container .loading-progress-text {
+  color: #888;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+.result-wrapper pre {
+  white-space: pre-wrap;
+  text-wrap: unset;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  background: #f2f4f7;
+  border-radius: 8px;
+  margin: 0;
+  padding: 14px;
+  overflow: scroll;
+}
+

package/dist/es/component/{playground/PlaygroundResult.mjs → playground-result/index.mjs}

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { LoadingOutlined } from "@ant-design/icons";
 import { Spin } from "antd";
-import { Player } from "../player.mjs";
-import shiny_text from "../shiny-text.mjs";
-import { emptyResultTip, serverLaunchTip } from "./playground-constants.mjs";
-import "./index.css";
+import { emptyResultTip, serverLaunchTip } from "../misc/index.mjs";
+import { Player } from "../player/index.mjs";
+import shiny_text from "../shiny-text/index.mjs";
 const PlaygroundResultView = (param)=>{
     let { result, loading, serverValid, serviceMode, replayScriptsInfo, replayCounter, loadingProgressText, verticalMode = false, notReadyMessage, fitMode, autoZoom } = param;
     let resultWrapperClassName = 'result-wrapper';
@@ -53,7 +52,10 @@ const PlaygroundResultView = (param)=>{
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
-            flex: '1 1 auto'
+            flex: '1 1 auto',
+            justifyContent: 'center',
+            alignItems: 'center',
+            textAlign: 'center'
         },
         children: resultDataToShow
     });