@midscene/visualizer 0.26.2-beta-20250812091127.0 → 0.26.3-beta-20250813021342.0

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

@@ -1,290 +1,332 @@
 body {
   margin: 0;
-  font-family:
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Noto Sans",
-    Helvetica,
-    Arial,
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Noto Sans, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
   font-size: 14px;
 }
+
 .prompt-input-wrapper {
   width: 100%;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper {
-  display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
+  display: flex;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
-  display: flex;
   align-items: center;
   height: 100%;
+  display: flex;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
   height: 24px;
-  padding: 0 8px;
-  line-height: 24px;
-  border-radius: 11px;
-  margin-right: 8px;
   box-shadow: none;
+  background-color: #f7f7f7;
   border: none;
-  background-color: #F7F7F7;
+  border-radius: 11px;
+  margin-right: 8px;
+  padding: 0 8px;
   font-size: 12px;
+  line-height: 24px;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:before {
   display: none;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:focus-within {
   outline: none;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
-  background-color: #2B83FF;
-  border-color: #2B83FF;
-  color: white;
+  color: #fff;
+  background-color: #2b83ff;
+  border-color: #2b83ff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked:hover {
   color: #fff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper:hover {
-  color: #2B83FF;
+  color: #2b83ff;
 }
+
 .prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
-  display: flex;
   align-items: center;
+  display: flex;
 }
+
 .prompt-input-wrapper .main-side-console-input {
-  position: relative;
   margin-top: 10px;
+  position: relative;
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea {
+  white-space: pre-wrap;
+  scrollbar-width: thin;
+  background: #fff;
+  border: 1px solid #f2f4f7;
   border-radius: 12px;
-  border: 1px solid #F2F4F7;
-  background: white;
   padding: 12px 16px;
-  transition: background-color 0.2s ease;
-  overflow-y: auto;
-  white-space: pre-wrap;
   line-height: 21px;
-  scrollbar-width: thin;
+  transition: background-color .2s;
+  overflow-y: auto;
 }
+
 @keyframes hue-shift {
   0% {
-    filter: hue-rotate(0deg);
+    filter: hue-rotate();
   }
+
   100% {
     filter: hue-rotate(360deg);
   }
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar {
   width: 6px;
 }
+
 .prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.2);
+  background-color: rgba(0, 0, 0, .2);
   border-radius: 3px;
 }
+
 .prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
-  border: 1px solid transparent;
-  background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #4285f4 0%, #0066FF 25%, #7B02C5 50%, #ea4335 75%, #ff7043 100%) border-box;
-  animation: hue-shift 5s linear infinite;
+  background: linear-gradient(#fff, #fff) padding-box padding-box, linear-gradient(135deg, #4285f4 0%, #06f 25%, #7b02c5 50%, #ea4335 75%, #ff7043 100%) border-box;
+  border: 1px solid rgba(0, 0, 0, 0);
+  animation: 5s linear infinite hue-shift;
 }
+
 .prompt-input-wrapper .main-side-console-input .ant-form-item-control-input-content {
-  border: 3px solid transparent;
-  border-radius: 14px;
   z-index: 999;
+  border: 3px solid rgba(0, 0, 0, 0);
+  border-radius: 14px;
 }
+
 .prompt-input-wrapper .main-side-console-input:focus-within .ant-form-item-control-input-content {
-  border-color: rgba(43, 131, 255, 0.16);
+  border-color: rgba(43, 131, 255, .16);
 }
+
 .prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
-  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0);
 }
+
 .prompt-input-wrapper .ant-input {
   padding-bottom: 40px;
 }
+
 .prompt-input-wrapper .form-controller-wrapper {
-  position: absolute;
-  display: flex;
+  box-sizing: border-box;
+  background-color: #fff;
   flex-direction: row;
   justify-content: flex-end;
-  width: calc(100% - 32px);
-  box-sizing: border-box;
   align-items: flex-end;
   gap: 8px;
-  background-color: #FFF;
-  left: 16px;
-  bottom: 0.5px;
+  width: calc(100% - 32px);
   padding: 12px 0;
   line-height: 32px;
-  transition: background-color 0.2s ease;
+  transition: background-color .2s;
+  display: flex;
+  position: absolute;
+  bottom: .5px;
+  left: 16px;
 }
+
 .prompt-input-wrapper .settings-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 2px;
   color: #777;
-  flex-wrap: wrap;
+  flex-flow: wrap;
+  gap: 2px;
+  display: flex;
 }
+
 .prompt-input-wrapper .settings-wrapper.settings-wrapper-hover {
   color: #3b3b3b;
 }
+
 .selector-trigger {
+  cursor: pointer;
   width: 24px;
   height: 24px;
-  cursor: pointer;
-  transition: all 0.2s ease;
+  transition: all .2s;
 }
+
 .selector-trigger .action-icon {
+  color: rgba(0, 0, 0, .85);
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
-  transition: all 0.2s;
+  transition: all .2s;
 }
+
 .selector-trigger .action-icon:hover {
-  color: #2B83FF;
+  color: #2b83ff;
 }
+
 .history-modal-container {
+  border-radius: 12px 12px 0 0;
+  flex-direction: column;
   height: 70vh;
   display: flex;
-  flex-direction: column;
-  border-radius: 12px 12px 0 0;
   overflow: hidden;
 }
+
 .history-modal-container .history-modal-header {
-  display: flex;
   justify-content: space-between;
   align-items: center;
   height: 48px;
-  line-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;
-  align-items: center;
-  justify-content: center;
 }
+
 .history-modal-container .history-modal-header .close-button .anticon {
+  color: #999;
   font-size: 18px;
-  color: #999999;
 }
+
 .history-modal-container .history-modal-header .close-button:hover .anticon {
-  color: #666666;
+  color: #666;
 }
+
 .history-modal-container .history-search-section {
+  background: #fff;
   padding: 16px 20px;
-  background: #ffffff;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper {
-  display: flex;
+  color: rgba(0, 0, 0, .25);
   align-items: center;
   gap: 12px;
-  color: rgba(0, 0, 0, 0.25);
+  display: flex;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .search-input {
-  flex: 1 1;
-  height: 36px;
-  border-radius: 16px;
   background: #f1f2f3;
   border: none;
+  border-radius: 16px;
+  flex: 1;
+  height: 36px;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .search-input .ant-input {
-  background: transparent;
-  border: none;
   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 {
+
+.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;
-  background: #ffffff;
 }
+
 .history-modal-container .history-search-section .search-input-wrapper .clear-button {
   color: #1890ff;
-  padding: 0;
   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 1;
+  flex: 1;
+  padding: 0 25px 25px;
   overflow-y: auto;
-  padding: 0 25px 25px 25px;
 }
+
 .history-modal-container .history-content .history-group {
   margin-bottom: 10px;
 }
+
 .history-modal-container .history-content .history-group .history-group-title {
-  font-size: 12px;
-  color: rgba(0, 0, 0, 0.45);
+  color: rgba(0, 0, 0, .45);
   height: 40px;
-  line-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;
-  line-height: 40px;
   font-size: 14px;
-  color: rgba(0, 0, 0, 0.85);
+  line-height: 40px;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
+
 .history-modal-container .history-content .history-group .history-item:hover {
   background: #f2f4f7;
-  padding: 0 8px;
   margin: 0 -8px;
+  padding: 0 8px;
 }
+
 .history-modal-container .history-content .no-results {
   text-align: center;
+  color: #999;
   padding: 40px 20px;
-  color: #999999;
 }
+
 .ant-modal-wrap .ant-modal-content {
-  animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
+  animation: .3s cubic-bezier(.4, 0, .2, 1) forwards slideUpFromBottom !important;
 }
+
 @keyframes slideUpFromBottom {
   0% {
-    transform: translateY(100%);
     opacity: 0;
+    transform: translateY(100%);
   }
+
   100% {
-    transform: translateY(0);
     opacity: 1;
+    transform: translateY(0);
   }
 }
+
 .result-wrapper {
-  display: flex;
-  height: 100%;
   justify-content: center;
+  height: 100%;
   margin: 4px 0;
+  display: flex;
 }
+
 .result-wrapper .loading-container {
   text-align: center;
 }
+
 .result-wrapper .loading-container .loading-progress-text {
-  margin-top: 8px;
   color: #888;
+  margin-top: 8px;
   font-size: 12px;
 }
+
 .result-wrapper pre {
-  margin: 4px 0;
-  margin: 0;
   white-space: pre-wrap;
   text-wrap: unset;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  background: #F2F4F7;
+  background: #f2f4f7;
   border-radius: 8px;
+  margin: 0;
   padding: 14px;
   overflow: scroll;
 }
+

package/dist/lib/component/playground/playground-constants.js

@@ -1,77 +1,101 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var playground_constants_exports = {};
-__export(playground_constants_exports, {
-  deepThinkTip: () => deepThinkTip,
-  emptyResultTip: () => emptyResultTip,
-  errorMessageServerNotReady: () => errorMessageServerNotReady,
-  serverLaunchTip: () => serverLaunchTip,
-  trackingTip: () => trackingTip
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
+        __webpack_require__.d(getter, {
+            a: getter
+        });
+        return getter;
+    };
+})();
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    serverLaunchTip: ()=>serverLaunchTip,
+    errorMessageServerNotReady: ()=>errorMessageServerNotReady,
+    trackingTip: ()=>trackingTip,
+    deepThinkTip: ()=>deepThinkTip,
+    emptyResultTip: ()=>emptyResultTip
 });
-module.exports = __toCommonJS(playground_constants_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_antd_namespaceObject = require("antd");
+const external_shiny_text_js_namespaceObject = require("../shiny-text.js");
+var external_shiny_text_js_default = /*#__PURE__*/ __webpack_require__.n(external_shiny_text_js_namespaceObject);
+require("./index.css");
+const errorMessageServerNotReady = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("span", {
+    children: [
+        "Don't worry, just one more step to launch the playground server.",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "Please run one of the commands under the midscene project directory:",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "a. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx midscene-playground"
+        }),
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("br", {}),
+        "b. ",
+        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("strong", {
+            children: "npx --yes @midscene/web"
+        })
+    ]
+});
+const serverLaunchTip = function() {
+    let notReadyMessage = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : errorMessageServerNotReady;
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+        className: "server-tip",
+        children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Alert, {
+            message: "Playground Server Not Ready",
+            description: notReadyMessage,
+            type: "warning"
+        })
+    });
 };
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_antd = require("antd");
-var import_shiny_text = __toESM(require("../shiny-text"));
-var import_index = require("./index.css");
-const errorMessageServerNotReady = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-  "Don't worry, just one more step to launch the playground server.",
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-  "Please run one of the commands under the midscene project directory:",
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-  "a. ",
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "npx midscene-playground" }),
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("br", {}),
-  "b. ",
-  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "npx --yes @midscene/web" })
-] });
-const serverLaunchTip = (notReadyMessage = errorMessageServerNotReady) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "server-tip", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-  import_antd.Alert,
-  {
-    message: "Playground Server Not Ready",
-    description: notReadyMessage,
-    type: "warning"
-  }
-) });
-const emptyResultTip = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "result-empty-tip", style: { textAlign: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shiny_text.default, { disabled: true, text: "The result will be shown here" }) });
-const trackingTip = "limit popup to current tab";
-const deepThinkTip = "deep think";
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  deepThinkTip,
-  emptyResultTip,
-  errorMessageServerNotReady,
-  serverLaunchTip,
-  trackingTip
+const emptyResultTip = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    className: "result-empty-tip",
+    style: {
+        textAlign: 'center'
+    },
+    children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_shiny_text_js_default(), {
+        disabled: true,
+        text: "The result will be shown here"
+    })
+});
+const trackingTip = 'limit popup to current tab';
+const deepThinkTip = 'deep think';
+exports.deepThinkTip = __webpack_exports__.deepThinkTip;
+exports.emptyResultTip = __webpack_exports__.emptyResultTip;
+exports.errorMessageServerNotReady = __webpack_exports__.errorMessageServerNotReady;
+exports.serverLaunchTip = __webpack_exports__.serverLaunchTip;
+exports.trackingTip = __webpack_exports__.trackingTip;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "deepThinkTip",
+    "emptyResultTip",
+    "errorMessageServerNotReady",
+    "serverLaunchTip",
+    "trackingTip"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
 });

package/dist/lib/component/playground/playground-types.js

@@ -1,32 +1,18 @@
 "use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var playground_types_exports = {};
-module.exports = __toCommonJS(playground_types_exports);
-var import_buffer = __toESM(require("buffer"));
-var import_browser = __toESM(require("process/browser"));
-var import_console_browserify = __toESM(require("console-browserify"));
-var buffer = {
-  Buffer: import_buffer.default
-};
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});