@midscene/visualizer 0.28.3 → 0.28.4

package/dist/lib/component/prompt-input/index.css

@@ -0,0 +1,330 @@
+.prompt-input-wrapper {
+  width: 100%;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group {
+  align-items: center;
+  height: 100%;
+  display: flex;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .ant-radio-button-wrapper {
+  height: 24px;
+  box-shadow: none;
+  background-color: #f7f7f7;
+  border: none;
+  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 {
+  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 .more-apis-button {
+  height: 24px;
+  box-shadow: none;
+  background-color: #f7f7f7;
+  border: none;
+  border-radius: 11px;
+  align-items: center;
+  gap: 2px;
+  max-width: 160px;
+  padding: 0 8px;
+  font-size: 12px;
+  display: inline-flex;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button .ant-btn-content {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button:hover {
+  background-color: #e6e6e6;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown {
+  color: #fff;
+  background-color: #2b83ff;
+  font-weight: 500;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .mode-radio-group .more-apis-button.selected-from-dropdown:hover {
+  background-color: #2b83ff;
+}
+
+.prompt-input-wrapper .mode-radio-group-wrapper .action-icons {
+  align-items: center;
+  display: flex;
+}
+
+.prompt-input-wrapper .main-side-console-input {
+  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;
+  padding: 12px 16px;
+  line-height: 21px;
+  transition: background-color .2s;
+  overflow-y: auto;
+}
+
+@keyframes hue-shift {
+  0% {
+    filter: hue-rotate();
+  }
+
+  100% {
+    filter: hue-rotate(360deg);
+  }
+}
+
+.prompt-input-wrapper .main-side-console-input .main-side-console-input-textarea:focus-within {
+  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, .2);
+  border-radius: 3px;
+}
+
+.prompt-input-wrapper .main-side-console-input.loading .main-side-console-input-textarea {
+  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 {
+  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, .16);
+}
+
+.prompt-input-wrapper .main-side-console-input.disabled .form-controller-wrapper {
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.prompt-input-wrapper .ant-form-item-with-help + .form-controller-wrapper {
+  bottom: 22px;
+}
+
+.prompt-input-wrapper .ant-input {
+  padding-bottom: 40px;
+}
+
+.prompt-input-wrapper .form-controller-wrapper {
+  box-sizing: border-box;
+  background-color: #fff;
+  flex-direction: row;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 8px;
+  width: calc(100% - 32px);
+  padding: 12px 0;
+  line-height: 32px;
+  transition: background-color .2s;
+  display: flex;
+  position: absolute;
+  bottom: 1px;
+  left: 16px;
+}
+
+.prompt-input-wrapper .settings-wrapper {
+  color: #777;
+  flex-flow: wrap;
+  gap: 2px;
+  display: flex;
+}
+
+.prompt-input-wrapper .settings-wrapper.settings-wrapper-hover {
+  color: #3b3b3b;
+}
+
+.prompt-input-wrapper .structured-params-container {
+  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);
+  border-radius: 12px;
+  padding: 16px 16px 56px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item {
+  flex-direction: column;
+  display: flex;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label {
+  text-align: left;
+  flex-basis: auto;
+  padding-bottom: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label {
+  color: rgba(0, 0, 0, .85);
+  height: auto;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:after {
+  color: #ff4d4f;
+  font-family: SimSun, sans-serif;
+  font-size: 12px;
+  line-height: 1;
+  display: inline-block;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:not(:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi))):after {
+  margin-left: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:-moz-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-label > label:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)):after {
+  margin-right: 4px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control {
+  flex: 1;
+  margin-top: 0;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-row {
+  flex-direction: column;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-form-item .ant-form-item-control-input {
+  min-height: auto;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number, .prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover {
+  border-color: #40a9ff;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus, .prompt-input-wrapper .structured-params-container .structured-params .ant-input:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:focus-within, .prompt-input-wrapper .structured-params-container .structured-params .ant-select:focus-within {
+  border-color: #40a9ff;
+  box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params textarea.ant-input {
+  padding-bottom: 5px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number .ant-input-number-input {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-input-number:hover .ant-input-number-input {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select {
+  min-width: 120px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select .ant-select-selector {
+  box-shadow: none;
+  border: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-select:hover .ant-select-selector, .prompt-input-wrapper .structured-params-container .structured-params .ant-select.ant-select-focused .ant-select-selector {
+  box-shadow: none;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group {
+  width: 100%;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper {
+  border: 1px solid #e1e5e9;
+  border-radius: 6px;
+  height: 32px;
+  margin-right: 4px;
+  font-size: 12px;
+  line-height: 30px;
+}
+
+.prompt-input-wrapper .structured-params-container .structured-params .ant-radio-group .ant-radio-button-wrapper.ant-radio-button-wrapper-checked {
+  color: #fff;
+  background-color: #2b83ff;
+  border-color: #2b83ff;
+}
+
+.selector-trigger {
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  transition: all .2s;
+}
+
+.selector-trigger .action-icon {
+  color: rgba(0, 0, 0, .85);
+  font-size: 14px;
+  transition: all .2s;
+}
+
+.selector-trigger .action-icon:hover {
+  color: #2b83ff;
+}
+

package/dist/lib/component/{playground/PromptInput.js → prompt-input/index.js}

@@ -37,23 +37,23 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const icons_namespaceObject = require("@ant-design/icons");
+require("./index.css");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
 var external_react_default = /*#__PURE__*/ __webpack_require__.n(external_react_namespaceObject);
-const history_js_namespaceObject = require("../store/history.js");
-const external_ConfigSelector_js_namespaceObject = require("./ConfigSelector.js");
-const external_FormField_js_namespaceObject = require("./FormField.js");
-const external_HistorySelector_js_namespaceObject = require("./HistorySelector.js");
-const external_playground_constants_js_namespaceObject = require("./playground-constants.js");
-const external_playground_utils_js_namespaceObject = require("./playground-utils.js");
-const external_types_js_namespaceObject = require("./types.js");
-require("./index.css");
+const history_js_namespaceObject = require("../../store/history.js");
+const external_types_js_namespaceObject = require("../../types.js");
+const constants_js_namespaceObject = require("../../utils/constants.js");
+const playground_utils_js_namespaceObject = require("../../utils/playground-utils.js");
+const index_js_namespaceObject = require("../config-selector/index.js");
+const external_form_field_index_js_namespaceObject = require("../form-field/index.js");
+const external_history_selector_index_js_namespaceObject = require("../history-selector/index.js");
 const { TextArea } = external_antd_namespaceObject.Input;
 const PromptInput = (param)=>{
     let { runButtonEnabled, form, serviceMode, selectedType, dryMode, stoppable, loading, onRun, onStop, clearPromptAfterRun = true, actionSpace, hideDomAndScreenshotOptions = false } = param;
     const [hoveringSettings, setHoveringSettings] = (0, external_react_namespaceObject.useState)(false);
     const [promptValue, setPromptValue] = (0, external_react_namespaceObject.useState)('');
-    const placeholder = (0, external_playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
+    const placeholder = (0, playground_utils_js_namespaceObject.getPlaceholderForType)(selectedType);
     const textAreaRef = (0, external_react_namespaceObject.useRef)(null);
     const params = external_antd_namespaceObject.Form.useWatch('params', form);
     const lastHistoryRef = (0, external_react_namespaceObject.useRef)(null);
@@ -149,12 +149,12 @@ const PromptInput = (param)=>{
         hideDomAndScreenshotOptions
     ]);
     const availableDropdownMethods = (0, external_react_namespaceObject.useMemo)(()=>{
-        const metadataMethods = Object.keys(external_playground_constants_js_namespaceObject.apiMetadata);
+        const metadataMethods = Object.keys(constants_js_namespaceObject.apiMetadata);
         if (!actionSpace || 0 === actionSpace.length) return metadataMethods;
         const availableMethods = actionSpace.map((action)=>action.interfaceAlias || action.name);
         const finalMethods = new Set();
         metadataMethods.forEach((method)=>{
-            const methodInfo = external_playground_constants_js_namespaceObject.apiMetadata[method];
+            const methodInfo = constants_js_namespaceObject.apiMetadata[method];
             if ((null == methodInfo ? void 0 : methodInfo.group) === 'extraction' || (null == methodInfo ? void 0 : methodInfo.group) === 'validation') finalMethods.add(method);
             else if (availableMethods.includes(method)) finalMethods.add(method);
         });
@@ -259,7 +259,7 @@ const PromptInput = (param)=>{
         needsStructuredParams,
         actionSpace
     ]);
-    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, external_playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
+    const isRunButtonEnabled = (0, external_react_namespaceObject.useMemo)(()=>(0, playground_utils_js_namespaceObject.isRunButtonEnabled)(runButtonEnabled, !!needsStructuredParams, params, actionSpace, selectedType, promptValue), [
         runButtonEnabled,
         needsStructuredParams,
         selectedType,
@@ -443,19 +443,19 @@ const PromptInput = (param)=>{
                         marginBottom,
                         placeholder
                     };
-                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.LocateField, {
+                    if (isLocateFieldFlag) fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.LocateField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.EnumField, {
+                    else if ((null == (_actualField__def = actualField._def) ? void 0 : _actualField__def.typeName) === 'ZodEnum') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.EnumField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.NumberField, {
+                    else if ((null == (_actualField__def1 = actualField._def) ? void 0 : _actualField__def1.typeName) === 'ZodNumber') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.NumberField, {
                         ...fieldProps
                     }, key));
-                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.BooleanField, {
+                    else if ((null == (_actualField__def2 = actualField._def) ? void 0 : _actualField__def2.typeName) === 'ZodBoolean') fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.BooleanField, {
                         ...fieldProps
                     }, key));
-                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormField_js_namespaceObject.TextField, {
+                    else fields.push(/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_form_field_index_js_namespaceObject.TextField, {
                         ...fieldProps
                     }, key));
                 });
@@ -553,13 +553,13 @@ const PromptInput = (param)=>{
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Group, {
                                     buttonStyle: "solid",
                                     disabled: !runButtonEnabled,
-                                    children: external_playground_constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
+                                    children: constants_js_namespaceObject.defaultMainButtons.map((apiType)=>{
                                         var _apiMetadata_apiType;
                                         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
-                                            title: (null == (_apiMetadata_apiType = external_playground_constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
+                                            title: (null == (_apiMetadata_apiType = constants_js_namespaceObject.apiMetadata[apiType]) ? void 0 : _apiMetadata_apiType.title) || '',
                                             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Radio.Button, {
                                                 value: apiType,
-                                                children: (0, external_playground_utils_js_namespaceObject.actionNameForType)(apiType)
+                                                children: (0, playground_utils_js_namespaceObject.actionNameForType)(apiType)
                                             })
                                         }, apiType);
                                     })
@@ -567,11 +567,11 @@ const PromptInput = (param)=>{
                             }),
                             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Dropdown, {
                                 menu: (()=>{
-                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(api));
+                                    const hiddenAPIs = availableDropdownMethods.filter((api)=>!constants_js_namespaceObject.defaultMainButtons.includes(api));
                                     const groupedItems = [];
                                     const interactionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
+                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'interaction';
                                     });
                                     if (interactionAPIs.length > 0) groupedItems.push({
                                         key: 'interaction-group',
@@ -581,8 +581,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -591,7 +591,7 @@ const PromptInput = (param)=>{
                                     });
                                     const extractionAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
+                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'extraction';
                                     });
                                     if (extractionAPIs.length > 0) groupedItems.push({
                                         key: 'extraction-group',
@@ -601,8 +601,8 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
@@ -611,7 +611,7 @@ const PromptInput = (param)=>{
                                     });
                                     const validationAPIs = hiddenAPIs.filter((api)=>{
                                         var _apiMetadata_api;
-                                        return (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
+                                        return (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.group) === 'validation';
                                     });
                                     if (validationAPIs.length > 0) groupedItems.push({
                                         key: 'validation-group',
@@ -621,22 +621,22 @@ const PromptInput = (param)=>{
                                             var _apiMetadata_api;
                                             return {
                                                 key: api,
-                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
-                                                title: (null == (_apiMetadata_api = external_playground_constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
+                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                title: (null == (_apiMetadata_api = constants_js_namespaceObject.apiMetadata[api]) ? void 0 : _apiMetadata_api.title) || '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
                                                 }
                                             };
                                         })
                                     });
-                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!external_playground_constants_js_namespaceObject.apiMetadata[api]);
+                                    const deviceSpecificAPIs = hiddenAPIs.filter((api)=>!constants_js_namespaceObject.apiMetadata[api]);
                                     if (deviceSpecificAPIs.length > 0) groupedItems.push({
                                         key: 'device-specific-group',
                                         type: 'group',
                                         label: 'Device-Specific APIs',
                                         children: deviceSpecificAPIs.map((api)=>({
                                                 key: api,
-                                                label: (0, external_playground_utils_js_namespaceObject.actionNameForType)(api),
+                                                label: (0, playground_utils_js_namespaceObject.actionNameForType)(api),
                                                 title: '',
                                                 onClick: ()=>{
                                                     form.setFieldValue('type', api);
@@ -653,9 +653,9 @@ const PromptInput = (param)=>{
                                 ],
                                 disabled: !runButtonEnabled,
                                 children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_antd_namespaceObject.Button, {
-                                    className: `more-apis-button ${!external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
+                                    className: `more-apis-button ${!constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? 'selected-from-dropdown' : ''}`,
                                     children: [
-                                        selectedType && !external_playground_constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
+                                        selectedType && !constants_js_namespaceObject.defaultMainButtons.includes(selectedType) ? (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType) : 'more',
                                         /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icons_namespaceObject.DownOutlined, {
                                             style: {
                                                 fontSize: '10px',
@@ -670,7 +670,7 @@ const PromptInput = (param)=>{
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
                         className: "action-icons",
                         children: [
-                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_HistorySelector_js_namespaceObject.HistorySelector, {
+                            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_history_selector_index_js_namespaceObject.HistorySelector, {
                                 onSelect: handleSelectHistory,
                                 history: historyForSelectedType,
                                 currentType: selectedType
@@ -679,7 +679,7 @@ const PromptInput = (param)=>{
                                 className: hoveringSettings ? 'settings-wrapper settings-wrapper-hover' : 'settings-wrapper',
                                 onMouseEnter: handleMouseEnter,
                                 onMouseLeave: handleMouseLeave,
-                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ConfigSelector_js_namespaceObject.ConfigSelector, {
+                                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.ConfigSelector, {
                                     enableTracking: 'In-Browser-Extension' === serviceMode,
                                     showDeepThinkOption: showDeepThinkOption,
                                     showDataExtractionOptions: showDataExtractionOptions,
@@ -721,7 +721,7 @@ const PromptInput = (param)=>{
                         },
                         children: [
                             'Click "Run" to execute ',
-                            (0, external_playground_utils_js_namespaceObject.actionNameForType)(selectedType)
+                            (0, playground_utils_js_namespaceObject.actionNameForType)(selectedType)
                         ]
                     }),
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/lib/component/{playground/ServiceModeControl.js → service-mode-control/index.js}

@@ -31,11 +31,10 @@ const playground_namespaceObject = require("@midscene/playground");
 const env_namespaceObject = require("@midscene/shared/env");
 const external_antd_namespaceObject = require("antd");
 const external_react_namespaceObject = require("react");
-const external_env_config_js_namespaceObject = require("../env-config.js");
-const external_misc_js_namespaceObject = require("../misc.js");
-const store_js_namespaceObject = require("../store/store.js");
-const external_useServerValid_js_namespaceObject = require("./useServerValid.js");
-require("./index.css");
+const useServerValid_js_namespaceObject = require("../../hooks/useServerValid.js");
+const store_js_namespaceObject = require("../../store/store.js");
+const index_js_namespaceObject = require("../env-config/index.js");
+const external_misc_index_js_namespaceObject = require("../misc/index.js");
 const TITLE_TEXT = {
     Server: 'Server Status',
     'In-Browser': 'In-Browser'
@@ -47,20 +46,20 @@ const SWITCH_BUTTON_TEXT = {
 const ServiceModeControl = (param)=>{
     let { serviceMode } = param;
     const { setServiceMode, config } = (0, store_js_namespaceObject.useEnvConfig)();
-    const serverValid = (0, external_useServerValid_js_namespaceObject.useServerValid)('Server' === serviceMode);
+    const serverValid = (0, useServerValid_js_namespaceObject.useServerValid)('Server' === serviceMode);
     const renderServerTip = ()=>{
         if (serverValid) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
             title: "Connected",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "server-tip",
-                children: (0, external_misc_js_namespaceObject.iconForStatus)('connected')
+                children: (0, external_misc_index_js_namespaceObject.iconForStatus)('connected')
             })
         });
         return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_antd_namespaceObject.Tooltip, {
             title: "Connection failed",
             children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
                 className: "server-tip",
-                children: (0, external_misc_js_namespaceObject.iconForStatus)('failed')
+                children: (0, external_misc_index_js_namespaceObject.iconForStatus)('failed')
             })
         });
     };
@@ -119,7 +118,7 @@ const ServiceModeControl = (param)=>{
                         children: title
                     }),
                     statusContent,
-                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_env_config_js_namespaceObject.EnvConfig, {
+                    /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(index_js_namespaceObject.EnvConfig, {
                         showTooltipWhenEmpty: 'Server' !== serviceMode
                     })
                 ]

package/dist/lib/component/{shiny-text.js → shiny-text/index.js}

@@ -27,7 +27,7 @@ __webpack_require__.d(__webpack_exports__, {
     default: ()=>shiny_text
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-require("./shiny-text.css");
+require("./index.css");
 const ShinyText = (param)=>{
     let { text, disabled = false, speed = 5, className = '' } = param;
     const style = {