@dao42/d42paas-front 0.7.33 → 0.7.36

package/dist/DaoPaaS.es.js

@@ -14944,6 +14944,12 @@ const dockerState = create$5(subscribeWithSelector$1((set2) => ({
     dockerStatus: arg
   })
 })));
+const ErrorMsgState = create$5(subscribeWithSelector$1((set2) => ({
+  message: {},
+  setMessage: (arg) => set2({
+    message: arg
+  })
+})));
 const oTStore = create$5(subscribeWithSelector$1((set2) => ({
   asyncType: void 0,
   appStatus: "code",
@@ -15083,16 +15089,14 @@ create$5((set2) => ({
 }));
 const shadowUserStore = create$5(persist((set2) => ({
   shadowUser: {},
-  switchShadowUser: (arg) => set2(() => {
-    if (arg.uuid || arg.userId) {
-      console.log(`\u5DF2\u5207\u6362\u81F3\u3010${arg.username}\u3011\u89C6\u89D2`);
+  switchShadowUser: (id2) => set2(() => {
+    let user;
+    if (id2 !== void 0) {
+      user = userListStore.getState().userList.find((user2) => user2.userId === id2);
+      console.log(`\u5DF2\u5207\u6362\u81F3\u3010${user.username}\u3011\u89C6\u89D2`);
     } else {
       console.log(`\u5DF2\u9000\u51FA\u8DDF\u968F\u89C6\u89D2`);
     }
-    const user = userListStore.getState().userList.find((x2) => {
-      var _a2;
-      return x2.userId === ((_a2 = arg.userId) == null ? void 0 : _a2.toString());
-    });
     return {
       shadowUser: user ? user : {}
     };
@@ -28620,12 +28624,46 @@ const PlaygroundInit = (arg) => {
         callback && callback();
       }
     });
+    io.on("dockerInfo", (data) => {
+      var _a2;
+      const {
+        dockerInfo: dockerInfo2
+      } = JSON.parse(data);
+      const otPlaygroundInfo = oTStore.getState().playgroundInfo;
+      if (dockerInfo2) {
+        (_a2 = otPlaygroundInfo == null ? void 0 : otPlaygroundInfo.dockerInfos) == null ? void 0 : _a2.set(dockerInfo2.dockerId, dockerInfo2);
+        setDockerInfo(__spreadValues(__spreadValues({}, oTStore.getState().dockerInfo), dockerInfo2));
+        dockerState.getState().setDockerStatus(dockerInfo2.status);
+        dockerInfo2.fileTree && switchFileTree({
+          data: dockerInfo2.fileTree
+        });
+      }
+    });
     io.on("playgroundStatus", (data) => {
       setPlaygroundStatus(data);
     });
     io.on("dockerStatus", (data) => {
       setDockerStatus(data || "STOP");
     });
+    io.on("folderEvent", async (d2) => {
+      var _a2, _b2;
+      const _d2 = JSON.parse(d2);
+      setCRDTInfo2(_d2);
+      setAsyncType("file");
+      setReplaySource(__spreadProps(__spreadValues({}, _d2), {
+        event: "file"
+      }));
+      const localReplayFile = await (await daopaasDB()).get("replayFiles", _d2.file.path);
+      if (!localReplayFile) {
+        setLocalReplayFile((_a2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a2.path, {
+          value: _d2.file.value,
+          revision: 0,
+          path: _d2.file.path
+        });
+      }
+      if (((_b2 = shadowUserStore.getState().shadowUser) == null ? void 0 : _b2.uuid) || IsMe(_d2 == null ? void 0 : _d2.userInfo) && _d2.file)
+        ;
+    });
     io.on("fileContent", async (d2) => {
       var _a2, _b2;
       const _d2 = JSON.parse(d2);
@@ -28691,6 +28729,9 @@ const PlaygroundInit = (arg) => {
         event: "media"
       }));
     });
+    io.on("errorHandler", (d2) => {
+      ErrorMsgState.getState().setMessage(d2);
+    });
     io.on("disconnect", (reason) => {
       if (reason === "io server disconnect") {
         return;
@@ -44589,6 +44630,7 @@ class DaoPaaS {
     __publicField(this, "playgroundId");
     __publicField(this, "serviceWorkerOrigin");
     __publicField(this, "onMessage");
+    __publicField(this, "onError");
     this.mode = mode;
     this.ticket = ticket;
     this.playgroundId = playgroundId;
@@ -44599,6 +44641,7 @@ class DaoPaaS {
     this.paasDomain = paasDomain;
     this.components = components;
     this.onMessage = onMessage;
+    this.onError = onError;
     this.serviceWorkerOrigin = serviceWorkerOrigin;
     sessionStorage.setItem("playgroundId", playgroundId);
     this.init();
@@ -44699,11 +44742,21 @@ class DaoPaaS {
     dockerState.subscribe((state2) => state2, (pre, next2) => {
       this.trigger(lodash$2.exports.pick(pre, ["dockerStatus"]), lodash$2.exports.pick(next2, ["dockerStatus"]));
     });
+    oTStore.subscribe((state2) => state2, (pre, next2) => {
+      this.trigger(lodash$2.exports.pick(pre, ["playgroundStatus"]), lodash$2.exports.pick(next2, ["playgroundStatus"]));
+    });
+    ErrorMsgState.subscribe((state2) => state2, (next2, pre) => {
+      this.trigger("error", lodash$2.exports.pick(next2, "message"));
+    });
     userListStore.subscribe((next2, pre) => {
       this.trigger(lodash$2.exports.pick(pre, ["userList"]), lodash$2.exports.pick(next2, ["userList"]));
     });
   }
   trigger(_d2, data) {
+    if (_d2 === "error") {
+      this.on(data, _d2);
+      return;
+    }
     this.on(data);
   }
   clearIDB(callback) {
@@ -44711,18 +44764,18 @@ class DaoPaaS {
       callback && callback();
     };
   }
-  followUser(userInfo, callback) {
+  followUser(userId, callback) {
     const {
       switchShadowUser
     } = shadowUserStore.getState();
-    switchShadowUser(userInfo);
-    callback && callback();
+    switchShadowUser(userId);
+    callback && callback(this.userList.find((u2) => u2.userId === userId));
   }
   unFollowUser(userInfo, callback) {
     const {
       switchShadowUser
     } = shadowUserStore.getState();
-    switchShadowUser({});
+    switchShadowUser();
     callback && callback();
   }
   replay(arg) {
@@ -44772,8 +44825,12 @@ class DaoPaaS {
       isRecording: !!setBoolean
     });
   }
-  on(data) {
-    this.onMessage && this.onMessage(data);
+  on(data, type) {
+    if (type === "error") {
+      this.onError && this.onError(data);
+    } else {
+      this.onMessage && this.onMessage(data);
+    }
   }
   mapRender(components) {
     components == null ? void 0 : components.forEach(({
@@ -44841,6 +44898,7 @@ class DaoPaaS {
     props: props2
   }) {
     this.editorDOM = container ? isHTMLElement$1(container) : this.editorDOM;
+    console.log(props2, 374);
     reactDom.exports.render(/* @__PURE__ */ jsx(react.exports.Suspense, {
       fallback: /* @__PURE__ */ jsx(Loading, {}),
       children: /* @__PURE__ */ jsx(LazyEditorComponent$1, __spreadProps(__spreadValues({}, props2), {
@@ -46111,7 +46169,7 @@ var TreeItemRenamingInput = function(props2) {
       environment.setActiveTree(treeId);
     });
   };
-  var confirm = function() {
+  var confirm2 = function() {
     var _a3;
     (_a3 = environment.onRenameItem) === null || _a3 === void 0 ? void 0 : _a3.call(environment, item, title, treeInformation.treeId);
     setRenamingItem(null);
@@ -46146,13 +46204,13 @@ var TreeItemRenamingInput = function(props2) {
   var submitButtonProps = {
     onClick: function(e2) {
       e2.stopPropagation();
-      confirm();
+      confirm2();
     }
   };
   var formProps = {
     onSubmit: function(e2) {
       e2.preventDefault();
-      confirm();
+      confirm2();
     }
   };
   return renderers.renderRenameInput({
@@ -48271,6 +48329,9 @@ Transition.Child = function Child(props2) {
   return !hasTransitionContext && hasOpenClosedContext ? /* @__PURE__ */ jsx(Transition, __spreadValues({}, Object.assign({}, props2))) : /* @__PURE__ */ jsx(TransitionChild, __spreadValues({}, Object.assign({}, props2)));
 };
 Transition.Root = Transition;
+const checkIfTheFileHasDeleted = (fileTree, value) => {
+  return !JSON.stringify(fileTree).includes(value);
+};
 const IoClient = function(revision) {
   this.revision = revision;
   this.state = synchronized_;
@@ -48404,25 +48465,25 @@ const FollowLayout = ({
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onKeyDown: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onScroll: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     onWheel: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
         return;
       setAsyncType(void 0);
-      switchShadowUser({});
+      switchShadowUser(void 0);
     },
     children: [oTStore.getState().appStatus === "replay" && FROZEN_CONTROL_COMPONENTS.some((d2) => d2 === name) ? /* @__PURE__ */ jsx(Freezer, {}) : null, children]
   });
@@ -48444,583 +48505,6 @@ const Freezer = ({
 }) => /* @__PURE__ */ jsx(FreezerLayout, {
   children
 });
-function addChildrenArray(children, parent2) {
-  var _a2, _b2;
-  for (let i = 0; i < children.length; i++) {
-    if (children[i].type === "DIRECTORY") {
-      (_a2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a2.push(`${parent2.index}${children[i].name}/`);
-    } else {
-      (_b2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _b2.push(`${parent2.index}${children[i].name}`);
-    }
-  }
-}
-function formatFileToTree(data) {
-  if (!data)
-    return;
-  const formatData = {};
-  const root2 = data.name;
-  formatData[root2] = {
-    index: root2,
-    children: [],
-    hasChildren: true,
-    data: root2
-  };
-  addChildrenArray(data.children, formatData[root2]);
-  let nodeChildren = [...data.children];
-  let pathChildren = [...formatData[root2].children];
-  while (nodeChildren.length) {
-    const size2 = nodeChildren.length;
-    for (let i = 0; i < size2; i++) {
-      const child = nodeChildren.shift();
-      const path2 = pathChildren.shift();
-      nodeChildren = nodeChildren.concat(child.children);
-      switch (child.type) {
-        case "DIRECTORY":
-          const dirPath = path2;
-          formatData[dirPath] = {
-            index: dirPath,
-            hasChildren: true,
-            children: [],
-            data: child.name
-          };
-          addChildrenArray(child.children, formatData[dirPath]);
-          pathChildren = pathChildren.concat(formatData[dirPath].children);
-          break;
-        case "FILE":
-          const filePath = path2;
-          formatData[filePath] = {
-            index: filePath,
-            hasChildren: false,
-            data: child.name
-          };
-          break;
-      }
-    }
-  }
-  return formatData;
-}
-const getStringFromFile = async (file) => {
-  const base64String = await new Promise((resolve2) => {
-    const reader2 = new FileReader();
-    reader2.readAsDataURL(file);
-    reader2.onload = (e2) => {
-      resolve2(e2.target.result);
-    };
-  });
-  return base64String;
-};
-const FileTree = ({
-  onCustomSelect
-}) => {
-  const addedFolder = {
-    target: "",
-    files: []
-  };
-  const io = useOT.getState().socket;
-  const [focusedItem, setFocusedItem] = react.exports.useState();
-  const [expandedItems, setExpandedItems] = react.exports.useState([]);
-  const [selectedItems, setSelectedItems] = react.exports.useState([]);
-  const [remoteUserList, setRemoteUserList] = react.exports.useState({});
-  const [renameItem, setRenameItem] = react.exports.useState("");
-  const [renameValue, setRenameValue] = react.exports.useState("");
-  const treeRef = react.exports.useRef(null);
-  const {
-    CRDTInfo: CRDTInfo2,
-    dockerInfo: dockerInfo2
-  } = oTStore((state2) => state2);
-  const {
-    fileTree
-  } = fileTreeStore((state2) => state2);
-  const [treeData, setTreeData] = react.exports.useState({});
-  react.exports.useEffect(() => {
-    if (oTStore.getState().appStatus === "replay") {
-      setSelectedItems([]);
-      setExpandedItems([]);
-    }
-    if (!fileTree.data)
-      return;
-    const newData = formatFileToTree(fileTree == null ? void 0 : fileTree.data);
-    setSelectedItems(selectedItems.filter((item) => newData[item]));
-    setExpandedItems(expandedItems.filter((item) => newData[item]));
-    setTreeData(newData);
-  }, [fileTree]);
-  react.exports.useEffect(() => {
-    setSelectedItems([]);
-    setExpandedItems([]);
-  }, [dockerInfo2]);
-  const onSelect = (items) => {
-    if (items.length === 1) {
-      setSelectedItems(items);
-      if (oTStore.getState().appStatus === "code") {
-        const crdt = {
-          timestamp: Date.now(),
-          userInfo: userStore.getState().userInfo,
-          editor: {
-            extraInfo: {
-              messageId: "1",
-              playgroundId: oTStore.getState().playgroundInfo.playgroundId
-            },
-            evtType: "File"
-          },
-          file: {
-            action: "Get",
-            path: items[0]
-          }
-        };
-        io == null ? void 0 : io.emit("fileContent", JSON.stringify(crdt));
-      }
-    }
-  };
-  const onExpand = (item) => {
-    setExpandedItems([...expandedItems, item]);
-  };
-  const onCollapse = (item) => {
-    setExpandedItems(expandedItems.filter((expandedItemIndex) => expandedItemIndex !== item));
-  };
-  const onUploadFile = (payload) => {
-    io == null ? void 0 : io.emit("upload", payload);
-    addedFolder.target = "";
-    addedFolder.files = [];
-  };
-  const formatUploadFileTarget = (path2) => {
-    if (path2[path2.length - 1] !== "/") {
-      addedFolder.target = `${path2.split("/").slice(0, -1).join("/")}/`;
-    } else {
-      addedFolder.target = path2;
-    }
-  };
-  const traverseFileTree = async (item, path2 = "/") => {
-    const data = await new Promise((resolve2) => {
-      if (item.isFile) {
-        item.file(async (file) => {
-          resolve2([{
-            path: `${path2}${file.name}`,
-            content: await getStringFromFile(file)
-          }]);
-        });
-      } else if (item.isDirectory) {
-        let result = [{
-          path: `${path2}${item.name}/`,
-          content: ""
-        }];
-        const dirReader = item.createReader();
-        dirReader.readEntries(async (entries) => {
-          for (let i = 0; i < entries.length; i++) {
-            result = result.concat(await traverseFileTree(entries[i], `${path2}${item.name}/`));
-          }
-          resolve2(result);
-        });
-      }
-    });
-    return data;
-  };
-  const onOriginDrop = async (event) => {
-    var _a2;
-    event.preventDefault();
-    let buttonElement = event.target;
-    while (buttonElement && ((_a2 = buttonElement.tagName) == null ? void 0 : _a2.toLowerCase()) !== "button") {
-      buttonElement = buttonElement.lastChild;
-    }
-    const node2 = buttonElement ? buttonElement.dataset["rctItemId"] : "/";
-    formatUploadFileTarget(node2);
-    const items = event.dataTransfer.items;
-    if (items.length === 0)
-      return;
-    const itemsIterate = [];
-    for (const i of items) {
-      itemsIterate.push(i.webkitGetAsEntry());
-    }
-    for (const item of itemsIterate) {
-      if (item) {
-        addedFolder.files = addedFolder.files.concat(await traverseFileTree(item));
-      }
-    }
-    buttonElement == null ? void 0 : buttonElement.parentNode.classList.remove("rct-tree-item-title-container-selected");
-    buttonElement == null ? void 0 : buttonElement.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  react.exports.useEffect(() => {
-    if (treeRef.current) {
-      treeRef.current.removeEventListener("drop", onOriginDrop);
-      treeRef.current.addEventListener("drop", onOriginDrop, false);
-      treeRef.current.addEventListener("dragover", (e2) => {
-        if (e2.dataTransfer.items.length === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-      }, false);
-      treeRef.current.addEventListener("dragenter", (e2) => {
-        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
-        if (((_a2 = e2 == null ? void 0 : e2.dataTransfer) == null ? void 0 : _a2.items.length) === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-        if (((_c2 = (_b2 = e2 == null ? void 0 : e2.target) == null ? void 0 : _b2.tagName) == null ? void 0 : _c2.toLowerCase()) === "button") {
-          (_e2 = (_d2 = e2.target) == null ? void 0 : _d2.parentNode) == null ? void 0 : _e2.classList.add("rct-tree-item-title-container-selected");
-          (_g2 = (_f2 = e2.target) == null ? void 0 : _f2.parentNode) == null ? void 0 : _g2.parentNode.classList.add("rct-tree-item-li-selected");
-        }
-      }, false);
-      treeRef.current.addEventListener("dragleave", (e2) => {
-        if (e2.dataTransfer.items.length === 0)
-          return;
-        e2.preventDefault();
-        e2.stopPropagation();
-        if (e2.target.tagName.toLowerCase() === "button") {
-          e2.target.parentNode.classList.remove("rct-tree-item-title-container-selected");
-          e2.target.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
-        }
-      }, false);
-    }
-  }, [treeRef]);
-  react.exports.useEffect(() => {
-    var _a2, _b2;
-    const user = userListStore.getState().userList.find((item) => item.uuid === CRDTInfo2.userInfo.uuid);
-    if (((_a2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.editor) == null ? void 0 : _a2.evtType) === "File" && user) {
-      const path2 = (_b2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.file) == null ? void 0 : _b2.path;
-      if (!IsMe(CRDTInfo2.userInfo)) {
-        setRemoteUserList((oldUserListItem) => {
-          const userListItem = __spreadValues({}, oldUserListItem);
-          const remoteUserListObj = Object.entries(userListItem);
-          for (const iteratorItem of remoteUserListObj) {
-            const [key, value] = iteratorItem;
-            const index2 = value.findIndex((item) => item.uuid === user.uuid);
-            if (index2 > -1) {
-              userListItem[key].splice(index2, 1);
-              if (userListItem[key].length === 0) {
-                delete userListItem[key];
-              }
-              break;
-            }
-          }
-          if (userListItem[path2]) {
-            userListItem[path2].push({
-              uuid: user.uuid,
-              color: user.color,
-              avatar: user.avatar
-            });
-          } else {
-            userListItem[path2] = [{
-              uuid: user.uuid,
-              color: user.color,
-              avatar: user.avatar
-            }];
-          }
-          return userListItem;
-        });
-        if (path2[path2.length - 1] === "/") {
-          const index2 = expandedItems.indexOf(path2);
-          if (index2 === -1) {
-            onExpand(path2);
-          } else {
-            onCollapse(path2);
-          }
-        }
-      } else if (oTStore.getState().appStatus === "replay" && !ignoreReplayerStore.getState().ignoreReplayers.some((d2) => d2 === "file")) {
-        onSelect([path2]);
-        if (path2[path2.length - 1] === "/") {
-          const index2 = expandedItems.indexOf(path2);
-          if (index2 === -1) {
-            onExpand(path2);
-          } else {
-            onCollapse(path2);
-          }
-        }
-      }
-    }
-  }, [CRDTInfo2]);
-  const handleAddFile = (path2) => {
-    onExpand(path2);
-    if (path2[path2.length - 1] !== "/") {
-      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
-    }
-    setTreeData((treeData2) => {
-      var _a2;
-      const newFilePath = `${path2}${v4$1().substring(0, 6)}`;
-      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFilePath);
-      treeData2[newFilePath] = {
-        index: newFilePath,
-        hasChildren: false,
-        data: "Untitled"
-      };
-      setRenameItem(newFilePath);
-      setRenameValue("");
-      return treeData2;
-    });
-  };
-  const handleAddFolder = (path2) => {
-    onExpand(path2);
-    if (path2[path2.length - 1] !== "/") {
-      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
-    }
-    setTreeData((treeData2) => {
-      var _a2;
-      const newFolderPath = `${path2}${v4$1().substring(0, 6)}/`;
-      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFolderPath);
-      treeData2[newFolderPath] = {
-        index: newFolderPath,
-        hasChildren: true,
-        children: [],
-        data: "Untitled"
-      };
-      setRenameItem(newFolderPath);
-      setRenameValue("");
-      return treeData2;
-    });
-  };
-  const handleStopRenaming = (path2) => {
-    if (renameValue === "") {
-      setTreeData((treeData2) => {
-        delete treeData2[path2];
-        return treeData2;
-      });
-    }
-    setRenameItem("");
-  };
-  const handleSave = (treeNode, name = "") => {
-    const payload = {
-      action: "",
-      path: "",
-      newPath: ""
-    };
-    const newPath = treeNode.index.split("/");
-    if (treeNode.hasChildren) {
-      newPath.splice(-2, 1, name);
-    } else {
-      newPath.splice(-1, 1, name);
-    }
-    if (treeNode.data === "Untitled") {
-      payload.action = "CREATE";
-      payload.path = newPath.join("/");
-    } else {
-      payload.action = "RENAME";
-      payload.path = treeNode.index;
-      payload.newPath = newPath.join("/");
-    }
-    io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
-  };
-  const handleUpload = (path2, uploadType) => {
-    formatUploadFileTarget(path2);
-    document.getElementById(`manual-upload-${uploadType}`).click();
-  };
-  const handleManualUploadFile = async (files) => {
-    for (const item of files) {
-      addedFolder.files = addedFolder.files.concat([{
-        path: `/${item.name}`,
-        content: await getStringFromFile(item)
-      }]);
-    }
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  const handleManualUploadFolder = async (files) => {
-    for (const item of files) {
-      addedFolder.files = addedFolder.files.concat([{
-        path: `/${item.webkitRelativePath}`,
-        content: await getStringFromFile(item)
-      }]);
-    }
-    onUploadFile(JSON.stringify(addedFolder));
-  };
-  const handleDeleteFileFolder = (path2) => {
-    io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify({
-      action: "DELETE",
-      path: path2
-    }));
-  };
-  return /* @__PURE__ */ jsx(FollowLayout, {
-    name: "file",
-    children: /* @__PURE__ */ jsxs("div", {
-      ref: treeRef,
-      style: {
-        height: "100%",
-        overflow: "auto"
-      },
-      children: [/* @__PURE__ */ jsx("input", {
-        id: "manual-upload-file",
-        type: "file",
-        multiple: true,
-        hidden: true,
-        onChange: (event) => {
-          handleManualUploadFile(event.target.files);
-        }
-      }), /* @__PURE__ */ jsx("input", {
-        id: "manual-upload-folder",
-        type: "file",
-        multiple: true,
-        hidden: true,
-        webkitdirectory: "",
-        mozdirectory: "",
-        directory: "",
-        onChange: (event) => {
-          handleManualUploadFolder(event.target.files);
-        }
-      }), /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
-        canDragAndDrop: true,
-        canSearch: false,
-        items: treeData,
-        onFocusItem: (item) => setFocusedItem(item.index),
-        onExpandItem: (item) => {
-          onExpand(item.index);
-        },
-        onCollapseItem: (item) => {
-          onCollapse(item.index);
-        },
-        getItemTitle: (item) => item.data,
-        viewState: {
-          ["tree-1"]: {
-            focusedItem,
-            expandedItems,
-            selectedItems
-          }
-        },
-        onSelectItems: (items) => {
-          onSelect(items);
-          onCustomSelect == null ? void 0 : onCustomSelect(items);
-        },
-        renderItem: ({
-          title,
-          arrow,
-          depth,
-          context,
-          children
-        }) => {
-          return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
-            className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
-            children: [/* @__PURE__ */ jsxs("div", {
-              className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
-              style: {
-                paddingLeft: `${depth}0px`
-              },
-              children: [remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
-                className: "rct-tree-item-avatar rounded-full absolute border",
-                style: {
-                  borderColor: remoteUser.color,
-                  backgroundImage: `url(${remoteUser.avatar})`
-                }
-              }, remoteUser.uuid)), /* @__PURE__ */ jsxs("div", {
-                className: "rct-tree-item-toolbar absolute right-0",
-                children: [/* @__PURE__ */ jsx("button", {
-                  onClick: () => {
-                    handleAddFile(context.interactiveElementProps["data-rct-item-id"]);
-                  },
-                  children: /* @__PURE__ */ jsx("i", {
-                    className: "d42 add-file"
-                  })
-                }), /* @__PURE__ */ jsx("button", {
-                  onClick: () => {
-                    handleAddFolder(context.interactiveElementProps["data-rct-item-id"]);
-                  },
-                  children: /* @__PURE__ */ jsx("i", {
-                    className: "d42 add-folder"
-                  })
-                }), /* @__PURE__ */ jsx(Menu$2, {
-                  as: "div",
-                  className: "relative",
-                  children: ({
-                    open: open2
-                  }) => /* @__PURE__ */ jsxs(Fragment, {
-                    children: [/* @__PURE__ */ jsx(Menu$2.Button, {
-                      children: /* @__PURE__ */ jsx("i", {
-                        className: "d42 more"
-                      })
-                    }), /* @__PURE__ */ jsx(Transition, {
-                      show: open2,
-                      as: react.exports.Fragment,
-                      enter: "transition ease-out duration-100",
-                      enterFrom: "transform opacity-0 scale-95",
-                      enterTo: "transform opacity-100 scale-100",
-                      leave: "transition ease-in duration-75",
-                      leaveFrom: "transform opacity-100 scale-100",
-                      leaveTo: "transform opacity-0 scale-95",
-                      children: /* @__PURE__ */ jsxs(Menu$2.Items, {
-                        static: true,
-                        className: "absolute z-1 w-20 right-0 top-full",
-                        children: [/* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "file");
-                              },
-                              children: "\u4E0A\u4F20\u6587\u4EF6"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "folder");
-                              },
-                              children: "\u4E0A\u4F20\u6587\u4EF6\u5939"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center my-2",
-                              onClick: () => {
-                                setRenameValue(title.props.children);
-                                setRenameItem(context.interactiveElementProps["data-rct-item-id"]);
-                              },
-                              children: "\u91CD\u547D\u540D"
-                            })
-                          })
-                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
-                          children: /* @__PURE__ */ jsx("div", {
-                            className: "code-dropdown-btn-item",
-                            children: /* @__PURE__ */ jsx("button", {
-                              className: "w-full justify-center text-red-800 my-2",
-                              onClick: () => handleDeleteFileFolder(context.interactiveElementProps["data-rct-item-id"]),
-                              children: "\u5220\u9664"
-                            })
-                          })
-                        })]
-                      })
-                    })]
-                  })
-                })]
-              }), arrow, renameItem === context.interactiveElementProps["data-rct-item-id"] ? /* @__PURE__ */ jsx("input", {
-                className: "text-black focus:outline-none active:outline-none",
-                type: "text",
-                autoFocus: true,
-                value: renameValue,
-                onInput: (event) => setRenameValue(event.target.value),
-                onKeyDown: (event) => {
-                  switch (event.key) {
-                    case "Enter":
-                      handleStopRenaming(renameItem);
-                      handleSave(treeData[renameItem], renameValue);
-                      break;
-                    case "Escape":
-                      handleStopRenaming(renameItem);
-                      break;
-                  }
-                }
-              }) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
-                className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
-                children: title
-              }))]
-            }), children]
-          }));
-        },
-        children: /* @__PURE__ */ jsx(Tree, {
-          treeId: "tree-1",
-          rootItem: "/",
-          treeLabel: "File Tree"
-        })
-      })]
-    })
-  });
-};
-var index$6 = /* @__PURE__ */ Object.freeze({
-  __proto__: null,
-  [Symbol.toStringTag]: "Module",
-  getStringFromFile,
-  FileTree
-});
 function _format$1(message, args) {
   let result;
   if (args.length === 0) {
@@ -174461,6 +173945,783 @@ var monaco = /* @__PURE__ */ Object.freeze({
   editor: editor$1,
   languages
 });
+create$5((set2) => ({
+  cursor: {},
+  setCursor: (arg) => set2((state2) => ({ cursor: arg }))
+}));
+const editorStore = create$5((set2) => ({
+  fileTreeStack: [],
+  setFileTreeStack: (arg) => set2(() => ({ fileTreeStack: arg }))
+}));
+class EditorData {
+  localSetFileTreeStack(arg) {
+    editorStore.getState().setFileTreeStack(arg);
+  }
+  static get fileTreeStack() {
+    const fileTreeStack = editorStore.getState().fileTreeStack;
+    return fileTreeStack;
+  }
+  static setFileTreeStack(arg) {
+    return editorStore.getState().setFileTreeStack(arg);
+  }
+  static updateModel({
+    value,
+    path: path2,
+    language: language2,
+    APP_DIR: APP_DIR2
+  }, callback, cover = false) {
+    let gotModel = editor$1.getModels().find((x2) => x2.uri.path.includes(path2));
+    if (!gotModel && !!cover) {
+      gotModel = editor$1.createModel(value, language2, Uri.parse(`file://${APP_DIR2}${path2}`));
+    }
+    const _fileTreeStack = [
+      ...this.fileTreeStack,
+      {
+        label: path2,
+        path: path2,
+        model: gotModel
+      }
+    ];
+    this.setFileTreeStack(lodash$2.exports.uniqBy(_fileTreeStack, "path"));
+    if (cover) {
+      gotModel == null ? void 0 : gotModel.setValue(value);
+    }
+    callback && callback(gotModel);
+  }
+}
+__publicField(EditorData, "EditorData");
+const FolderSVG = (props2) => /* @__PURE__ */ jsx("svg", {
+  className: props2.className,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "12",
+  height: "10",
+  viewBox: "0 0 12 10",
+  fill: "none",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.398438 0.800006C0.398438 0.41341 0.711841 0.100006 1.09844 0.100006H5.29844C5.68503 0.100006 5.99844 0.41341 5.99844 0.800006C5.99844 1.1866 6.31183 1.50001 6.69844 1.50001H10.8984C11.285 1.50001 11.5984 1.81341 11.5984 2.20001V9.20001C11.5984 9.58662 11.285 9.90001 10.8984 9.90001H1.09844C0.711841 9.90001 0.398438 9.58662 0.398438 9.20001V2.90001V2.20001V0.800006ZM10.0234 3.27501H6.17344V4.32501H10.0234V3.27501Z",
+    fill: "#999999"
+  })
+});
+const FileSVG = react.exports.forwardRef((_props, ref) => /* @__PURE__ */ jsx("svg", {
+  className: `flex-shrink-0 ${(_props == null ? void 0 : _props.className) ? _props == null ? void 0 : _props.className : ""}`,
+  ref,
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "10",
+  height: "11",
+  viewBox: "0 0 10 11",
+  fill: "none",
+  children: /* @__PURE__ */ jsx("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0.801562 0.100006C0.414966 0.100006 0.101562 0.41341 0.101562 0.800006V9.90001C0.101562 10.2866 0.414966 10.6 0.801562 10.6H9.20156C9.58817 10.6 9.90156 10.2866 9.90156 9.90001V3.88995C9.90156 3.70431 9.82778 3.52625 9.69653 3.39498L8.15156 1.85001L6.60659 0.305029C6.47534 0.173758 6.29726 0.100006 6.11162 0.100006H0.801562ZM6.22656 3.77501V1.67501H5.17656V4.30001C5.17656 4.58995 5.41162 4.82501 5.70156 4.82501H8.32656V3.77501H6.22656Z",
+    fill: "#666666"
+  })
+}));
+FileSVG.displayName = "FileSVG";
+const TreeRootLayout = newStyled.div`
+  height: 100%;
+  overflow: auto;
+
+  .folder-svg {
+    margin: 0 0.5rem 0 0.2rem;
+  }
+
+  .file-svg {
+    margin: 0 0.5rem 0 0.2rem;
+  }
+
+  ul.rct-tree-items-container {
+    position: relative;
+    ul.rct-tree-items-container:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 1px;
+      z-index: 8888;
+      left: 8px;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .rct-tree-root {
+    background: ${(props2) => props2.bgColor};
+    color: ${(props2) => props2.fontColor};
+    overflow: auto;
+  }
+
+  .rct-tree-root.root-drag-over {
+    background-color: ${(props2) => props2.hoverBgColor};
+  }
+
+  .rct-tree-item-li {
+    .rct-tree-item-title-container {
+      .rct-tree-item-arrow {
+        flex-shrink: 0;
+      }
+      .rct-tree-item-avatar {
+        width: 20px;
+        height: 20px;
+        margin-left: 10px;
+        background-color: white;
+        right: 5px;
+      }
+      .rct-tree-item-toolbar {
+        display: none;
+      }
+      &:hover {
+        .rct-tree-item-toolbar {
+          display: flex;
+          gap: 8px;
+        }
+      }
+    }
+  }
+
+  .rct-tree-root-focus {
+    outline: none;
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        color: ${(props2) => props2.hoverTextColor};
+        background-color: ${(props2) => props2.hoverBgColor};
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .rct-tree-root-focus {
+    .rct-tree-item-title-container-focused {
+      border-color: transparent;
+    }
+  }
+
+  :not(.rct-tree-root-focus) {
+    .rct-tree-item-title-container-focused {
+      border-color: transparent;
+    }
+    .rct-tree-item-li-selected {
+      .rct-tree-item-title-container-selected {
+        color: ${(props2) => props2.hoverTextColor};
+        background-color: ${(props2) => props2.hoverBgColor};
+        border-radius: 4px;
+      }
+    }
+  }
+`;
+function addChildrenArray(children, parent2) {
+  var _a2, _b2;
+  for (let i = 0; i < children.length; i++) {
+    if (children[i].type === "DIRECTORY") {
+      (_a2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _a2.push(`${parent2.index}${children[i].name}/`);
+    } else {
+      (_b2 = parent2 == null ? void 0 : parent2.children) == null ? void 0 : _b2.push(`${parent2.index}${children[i].name}`);
+    }
+  }
+}
+function formatFileToTree(data) {
+  if (!data)
+    return;
+  const formatData = {};
+  const root2 = data.name;
+  formatData[root2] = {
+    index: root2,
+    children: [],
+    hasChildren: true,
+    data: root2
+  };
+  addChildrenArray(data.children, formatData[root2]);
+  let nodeChildren = [...data.children];
+  let pathChildren = [...formatData[root2].children];
+  while (nodeChildren.length) {
+    const size2 = nodeChildren.length;
+    for (let i = 0; i < size2; i++) {
+      const child = nodeChildren.shift();
+      const path2 = pathChildren.shift();
+      nodeChildren = nodeChildren.concat(child.children);
+      switch (child.type) {
+        case "DIRECTORY":
+          const dirPath = path2;
+          formatData[dirPath] = {
+            index: dirPath,
+            hasChildren: true,
+            children: [],
+            data: child.name
+          };
+          addChildrenArray(child.children, formatData[dirPath]);
+          pathChildren = pathChildren.concat(formatData[dirPath].children);
+          break;
+        case "FILE":
+          const filePath = path2;
+          formatData[filePath] = {
+            index: filePath,
+            hasChildren: false,
+            data: child.name
+          };
+          break;
+      }
+    }
+  }
+  return formatData;
+}
+const getStringFromFile = async (file) => {
+  const base64String = await new Promise((resolve2) => {
+    const reader2 = new FileReader();
+    reader2.readAsDataURL(file);
+    reader2.onload = (e2) => {
+      resolve2(e2.target.result);
+    };
+  });
+  return base64String;
+};
+const FileTree = ({
+  onCustomSelect,
+  dropBgColor = "pink",
+  dropTextColor = "black",
+  hoverBgColor = "rgb(37 45 124 / 80%)",
+  hoverTextColor = "#fff",
+  bgColor = "#15171c",
+  fontColor = "#fff",
+  onClick
+}) => {
+  const addedFolder = {
+    target: "",
+    files: []
+  };
+  useOT.getState().socket;
+  const [focusedItem, setFocusedItem] = react.exports.useState();
+  const [expandedItems, setExpandedItems] = react.exports.useState([]);
+  const [selectedItems, setSelectedItems] = react.exports.useState([]);
+  const [remoteUserList, setRemoteUserList] = react.exports.useState({});
+  const [renameItem, setRenameItem] = react.exports.useState("");
+  const [renameValue, setRenameValue] = react.exports.useState("");
+  const treeRef = react.exports.useRef(null);
+  const {
+    CRDTInfo: CRDTInfo2,
+    dockerInfo: dockerInfo2
+  } = oTStore((state2) => state2);
+  const {
+    fileTree
+  } = fileTreeStore((state2) => state2);
+  const [treeData, setTreeData] = react.exports.useState({});
+  react.exports.useEffect(() => {
+    if (oTStore.getState().appStatus === "replay") {
+      setSelectedItems([]);
+      setExpandedItems([]);
+    }
+    if (!fileTree.data)
+      return;
+    const newData = formatFileToTree(fileTree == null ? void 0 : fileTree.data);
+    setSelectedItems(selectedItems.filter((item) => newData[item]));
+    setExpandedItems(expandedItems.filter((item) => newData[item]));
+    setTreeData(newData);
+  }, [fileTree]);
+  react.exports.useEffect(() => {
+    setSelectedItems([]);
+    setExpandedItems([]);
+  }, [dockerInfo2]);
+  const onSelect = (items) => {
+    var _a2;
+    if (items.length === 1) {
+      setSelectedItems(items);
+      if (oTStore.getState().appStatus === "code") {
+        const crdt = {
+          timestamp: Date.now(),
+          userInfo: userStore.getState().userInfo,
+          editor: {
+            extraInfo: {
+              messageId: "1",
+              playgroundId: oTStore.getState().playgroundInfo.playgroundId
+            },
+            evtType: "File"
+          },
+          file: {
+            action: "Get",
+            path: items[0]
+          }
+        };
+        onClick && onClick({
+          uri: `${fileTree.data.uri}${items[0]}`,
+          path: items[0]
+        });
+        (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileContent", JSON.stringify(crdt));
+      }
+    }
+  };
+  const onExpand = (item) => {
+    setExpandedItems([...expandedItems, item]);
+  };
+  const onCollapse = (item) => {
+    setExpandedItems(expandedItems.filter((expandedItemIndex) => expandedItemIndex !== item));
+  };
+  const onUploadFile = (payload) => {
+    var _a2;
+    console.log(payload, 213);
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("upload", payload);
+    addedFolder.target = "";
+    addedFolder.files = [];
+    console.log(addedFolder, 217);
+  };
+  const formatUploadFileTarget = (path2) => {
+    if (path2[path2.length - 1] !== "/") {
+      addedFolder.target = `${path2.split("/").slice(0, -1).join("/")}/`;
+    } else {
+      addedFolder.target = path2;
+    }
+  };
+  const traverseFileTree = async (item, path2 = "/") => {
+    const data = await new Promise((resolve2) => {
+      if (item.isFile) {
+        item.file(async (file) => {
+          resolve2([{
+            path: `${path2}${file.name}`,
+            content: await getStringFromFile(file)
+          }]);
+        });
+      } else if (item.isDirectory) {
+        let result = [{
+          path: `${path2}${item.name}/`,
+          content: ""
+        }];
+        const dirReader = item.createReader();
+        dirReader.readEntries(async (entries) => {
+          for (let i = 0; i < entries.length; i++) {
+            result = result.concat(await traverseFileTree(entries[i], `${path2}${item.name}/`));
+          }
+          resolve2(result);
+        });
+      }
+    });
+    return data;
+  };
+  const onOriginDrop = async (event) => {
+    var _a2;
+    event.preventDefault();
+    event.currentTarget.lastElementChild.classList.remove("root-drag-over");
+    let buttonElement = event.target;
+    while (buttonElement && ((_a2 = buttonElement.tagName) == null ? void 0 : _a2.toLowerCase()) !== "button") {
+      buttonElement = buttonElement.lastChild;
+    }
+    const node2 = buttonElement ? buttonElement.dataset["rctItemId"] : "/";
+    formatUploadFileTarget(node2);
+    const items = event.dataTransfer.items;
+    if (items.length === 0)
+      return;
+    const itemsIterate = [];
+    for (const i of items) {
+      itemsIterate.push(i.webkitGetAsEntry());
+    }
+    console.log("drop5", 295);
+    for (const item of itemsIterate) {
+      if (item) {
+        addedFolder.files = addedFolder.files.concat(await traverseFileTree(item));
+      }
+    }
+    buttonElement == null ? void 0 : buttonElement.parentNode.classList.remove("rct-tree-item-title-container-selected");
+    buttonElement == null ? void 0 : buttonElement.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
+    console.log("drop5", 310);
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  react.exports.useEffect(() => {
+    if (treeRef.current) {
+      treeRef.current.removeEventListener("drop", onOriginDrop);
+      treeRef.current.addEventListener("drop", onOriginDrop, false);
+      treeRef.current.addEventListener("dragover", (e2) => {
+        if (e2.dataTransfer.items.length === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+      }, false);
+      treeRef.current.addEventListener("dragenter", (e2) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+        if (((_a2 = e2 == null ? void 0 : e2.dataTransfer) == null ? void 0 : _a2.items.length) === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+        console.log(e2.currentTarget.lastElementChild);
+        e2.currentTarget.lastElementChild.classList.remove("root-drag-over");
+        if (e2.target.classList.contains("rct-tree-root")) {
+          console.log(e2.target);
+          e2.target.classList.add("root-drag-over");
+        }
+        if (((_c2 = (_b2 = e2 == null ? void 0 : e2.target) == null ? void 0 : _b2.tagName) == null ? void 0 : _c2.toLowerCase()) === "button") {
+          (_e2 = (_d2 = e2.target) == null ? void 0 : _d2.parentNode) == null ? void 0 : _e2.classList.add("rct-tree-item-title-container-selected");
+          (_g2 = (_f2 = e2.target) == null ? void 0 : _f2.parentNode) == null ? void 0 : _g2.parentNode.classList.add("rct-tree-item-li-selected");
+        }
+      }, false);
+      treeRef.current.addEventListener("dragleave", (e2) => {
+        if (e2.dataTransfer.items.length === 0)
+          return;
+        e2.preventDefault();
+        e2.stopPropagation();
+        if (e2.target.tagName.toLowerCase() === "button") {
+          e2.target.parentNode.classList.remove("rct-tree-item-title-container-selected");
+          e2.target.parentNode.parentNode.classList.remove("rct-tree-item-li-selected");
+        }
+      }, false);
+    }
+  }, [treeRef]);
+  react.exports.useEffect(() => {
+    var _a2;
+    const user = userListStore.getState().userList.find((item) => item.uuid === CRDTInfo2.userInfo.uuid);
+    if (((_a2 = CRDTInfo2 == null ? void 0 : CRDTInfo2.editor) == null ? void 0 : _a2.evtType) === "File" && user) {
+      const path2 = CRDTInfo2.file.path;
+      if (!IsMe(CRDTInfo2.userInfo)) {
+        setRemoteUserList((oldUserListItem) => {
+          const userListItem = __spreadValues({}, oldUserListItem);
+          const remoteUserListObj = Object.entries(userListItem);
+          for (const iteratorItem of remoteUserListObj) {
+            const [key, value] = iteratorItem;
+            const index2 = value.findIndex((item) => item.uuid === user.uuid);
+            if (index2 > -1) {
+              userListItem[key].splice(index2, 1);
+              if (userListItem[key].length === 0) {
+                delete userListItem[key];
+              }
+              break;
+            }
+          }
+          if (userListItem[path2]) {
+            userListItem[path2].push({
+              uuid: user.uuid,
+              color: user.color,
+              avatar: user.avatar
+            });
+          } else {
+            userListItem[path2] = [{
+              uuid: user.uuid,
+              color: user.color,
+              avatar: user.avatar
+            }];
+          }
+          return userListItem;
+        });
+        if (path2[path2.length - 1] === "/") {
+          const index2 = expandedItems.indexOf(path2);
+          if (index2 === -1) {
+            onExpand(path2);
+          } else {
+            onCollapse(path2);
+          }
+        }
+      } else if (oTStore.getState().appStatus === "replay" && !ignoreReplayerStore.getState().ignoreReplayers.some((d2) => d2 === "file")) {
+        onSelect([path2]);
+        if (path2[path2.length - 1] === "/") {
+          const index2 = expandedItems.indexOf(path2);
+          if (index2 === -1) {
+            onExpand(path2);
+          } else {
+            onCollapse(path2);
+          }
+        }
+      }
+    }
+  }, [CRDTInfo2]);
+  const handleAddFile = (path2) => {
+    onExpand(path2);
+    if (path2[path2.length - 1] !== "/") {
+      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
+    }
+    setTreeData((treeData2) => {
+      var _a2;
+      const newFilePath = `${path2}${v4$1().substring(0, 6)}`;
+      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFilePath);
+      treeData2[newFilePath] = {
+        index: newFilePath,
+        hasChildren: false,
+        data: "Untitled"
+      };
+      setRenameItem(newFilePath);
+      setRenameValue("");
+      return treeData2;
+    });
+  };
+  const handleAddFolder = (path2) => {
+    onExpand(path2);
+    if (path2[path2.length - 1] !== "/") {
+      path2 = `${path2.split("/").slice(0, -1).join("/")}/`;
+    }
+    setTreeData((treeData2) => {
+      var _a2;
+      const newFolderPath = `${path2}${v4$1().substring(0, 6)}/`;
+      (_a2 = treeData2[path2].children) == null ? void 0 : _a2.push(newFolderPath);
+      treeData2[newFolderPath] = {
+        index: newFolderPath,
+        hasChildren: true,
+        children: [],
+        data: "Untitled"
+      };
+      setRenameItem(newFolderPath);
+      setRenameValue("");
+      return treeData2;
+    });
+  };
+  const handleStopRenaming = (path2) => {
+    if (renameValue === "") {
+      setTreeData((treeData2) => {
+        delete treeData2[path2];
+        return treeData2;
+      });
+    }
+    setRenameItem("");
+  };
+  const handleSave = (treeNode, name = "") => {
+    var _a2;
+    const payload = {
+      action: "",
+      path: "",
+      newPath: "",
+      userInfo: userStore.getState().userInfo
+    };
+    const newPath = treeNode.index.split("/");
+    if (treeNode.hasChildren) {
+      newPath.splice(-2, 1, name);
+    } else {
+      newPath.splice(-1, 1, name);
+    }
+    if (treeNode.data === "Untitled") {
+      payload.action = "CREATE";
+      payload.path = newPath.join("/");
+    } else {
+      payload.action = "RENAME";
+      payload.path = treeNode.index;
+      payload.newPath = newPath.join("/");
+    }
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileTreeOp", JSON.stringify(payload));
+  };
+  const handleUpload = (path2, uploadType) => {
+    formatUploadFileTarget(path2);
+    document.getElementById(`manual-upload-${uploadType}`).click();
+  };
+  const handleManualUploadFile = async (files) => {
+    for (const item of files) {
+      addedFolder.files = addedFolder.files.concat([{
+        path: `/${item.name}`,
+        content: await getStringFromFile(item)
+      }]);
+    }
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  const handleManualUploadFolder = async (files) => {
+    for (const item of files) {
+      addedFolder.files = addedFolder.files.concat([{
+        path: `/${item.webkitRelativePath}`,
+        content: await getStringFromFile(item)
+      }]);
+    }
+    onUploadFile(JSON.stringify(addedFolder));
+  };
+  const handleDeleteFileFolder = (path2) => {
+    var _a2;
+    EditorData.setFileTreeStack(EditorData.fileTreeStack.filter((file) => file.path !== path2));
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("fileTreeOp", JSON.stringify({
+      action: "DELETE",
+      path: path2
+    }));
+    oTStore.getState().switchDoc({
+      value: "",
+      path: "/"
+    });
+  };
+  return /* @__PURE__ */ jsx(FollowLayout, {
+    name: "file",
+    children: /* @__PURE__ */ jsxs(TreeRootLayout, {
+      ref: treeRef,
+      className: `tree-root-layout`,
+      dropBgColor,
+      dropTextColor,
+      hoverBgColor,
+      hoverTextColor,
+      bgColor,
+      fontColor,
+      children: [/* @__PURE__ */ jsx("input", {
+        id: "manual-upload-file",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange: (event) => {
+          handleManualUploadFile(event.target.files);
+        }
+      }), /* @__PURE__ */ jsx("input", {
+        id: "manual-upload-folder",
+        type: "file",
+        multiple: true,
+        hidden: true,
+        onChange: (event) => {
+          handleManualUploadFolder(event.target.files);
+        }
+      }), /* @__PURE__ */ jsx(ControlledTreeEnvironment, {
+        canDragAndDrop: true,
+        canSearch: false,
+        items: treeData,
+        onFocusItem: (item) => setFocusedItem(item.index),
+        onExpandItem: (item) => {
+          onExpand(item.index);
+        },
+        onCollapseItem: (item) => {
+          onCollapse(item.index);
+        },
+        getItemTitle: (item) => item.data,
+        viewState: {
+          ["tree-1"]: {
+            focusedItem,
+            expandedItems,
+            selectedItems
+          }
+        },
+        onSelectItems: (items) => {
+          onSelect(items);
+          onCustomSelect == null ? void 0 : onCustomSelect(items);
+        },
+        renderItem: ({
+          title,
+          arrow,
+          depth,
+          context,
+          children
+        }) => {
+          var _a2;
+          return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({}, context.itemContainerWithChildrenProps), {
+            className: ["rct-tree-item-li", context.isSelected ? "rct-tree-item-li-selected" : "", context.isExpanded ? "rct-tree-item-li-expanded" : "", context.isFocused ? "rct-tree-item-li-focused" : "", children ? "rct-tree-item-li-hasChildren" : ""].join(" "),
+            children: [/* @__PURE__ */ jsxs("div", {
+              className: ["rct-tree-item-title-container", context.isSelected ? "rct-tree-item-title-container-selected" : "", context.isExpanded ? "rct-tree-item-title-container-expanded" : "", context.isFocused ? "rct-tree-item-title-container-focused" : "", children ? "rct-tree-item-title-container-hasChildren" : ""].join(" "),
+              children: [remoteUserList[context.interactiveElementProps["data-rct-item-id"]] && remoteUserList[context.interactiveElementProps["data-rct-item-id"]].map((remoteUser) => /* @__PURE__ */ jsx("div", {
+                className: "rct-tree-item-avatar rounded-full absolute border",
+                style: {
+                  borderColor: remoteUser.color,
+                  backgroundImage: `url(${remoteUser.avatar})`
+                }
+              }, remoteUser.uuid)), /* @__PURE__ */ jsxs("div", {
+                className: "rct-tree-item-toolbar absolute right-0",
+                children: [/* @__PURE__ */ jsx("button", {
+                  onClick: () => {
+                    handleAddFile(context.interactiveElementProps["data-rct-item-id"]);
+                  },
+                  children: /* @__PURE__ */ jsx("i", {
+                    className: "d42 add-file"
+                  })
+                }), /* @__PURE__ */ jsx("button", {
+                  onClick: () => {
+                    handleAddFolder(context.interactiveElementProps["data-rct-item-id"]);
+                  },
+                  children: /* @__PURE__ */ jsx("i", {
+                    className: "d42 add-folder"
+                  })
+                }), /* @__PURE__ */ jsx(Menu$2, {
+                  as: "div",
+                  className: "relative",
+                  children: ({
+                    open: open2
+                  }) => /* @__PURE__ */ jsxs(Fragment, {
+                    children: [/* @__PURE__ */ jsx(Menu$2.Button, {
+                      children: /* @__PURE__ */ jsx("i", {
+                        className: "d42 more"
+                      })
+                    }), /* @__PURE__ */ jsx(Transition, {
+                      show: open2,
+                      as: react.exports.Fragment,
+                      enter: "transition ease-out duration-100",
+                      enterFrom: "transform opacity-0 scale-95",
+                      enterTo: "transform opacity-100 scale-100",
+                      leave: "transition ease-in duration-75",
+                      leaveFrom: "transform opacity-100 scale-100",
+                      leaveTo: "transform opacity-0 scale-95",
+                      children: /* @__PURE__ */ jsxs(Menu$2.Items, {
+                        static: true,
+                        className: "absolute z-1 w-20 right-0 top-full",
+                        children: [/* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "file");
+                              },
+                              children: "\u4E0A\u4F20\u6587\u4EF6"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                handleUpload(context.interactiveElementProps["data-rct-item-id"], "folder");
+                              },
+                              children: "\u4E0A\u4F20\u6587\u4EF6\u5939"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center my-2",
+                              onClick: () => {
+                                var _a3;
+                                setRenameValue((_a3 = title == null ? void 0 : title.props) == null ? void 0 : _a3.children);
+                                setRenameItem(context.interactiveElementProps["data-rct-item-id"]);
+                              },
+                              children: "\u91CD\u547D\u540D"
+                            })
+                          })
+                        }), /* @__PURE__ */ jsx(Menu$2.Item, {
+                          children: /* @__PURE__ */ jsx("div", {
+                            className: "code-dropdown-btn-item",
+                            children: /* @__PURE__ */ jsx("button", {
+                              className: "w-full justify-center text-red-800 my-2",
+                              onClick: () => handleDeleteFileFolder(context.interactiveElementProps["data-rct-item-id"]),
+                              children: "\u5220\u9664"
+                            })
+                          })
+                        })]
+                      })
+                    })]
+                  })
+                })]
+              }), arrow, renameItem === context.interactiveElementProps["data-rct-item-id"] ? /* @__PURE__ */ jsx("input", {
+                className: "text-black focus:outline-none active:outline-none",
+                type: "text",
+                autoFocus: true,
+                value: renameValue,
+                onInput: (event) => setRenameValue(event.target.value),
+                onKeyDown: (event) => {
+                  switch (event.key) {
+                    case "Enter":
+                      handleStopRenaming(renameItem);
+                      handleSave(treeData[renameItem], renameValue);
+                      break;
+                    case "Escape":
+                      handleStopRenaming(renameItem);
+                      break;
+                  }
+                }
+              }) : /* @__PURE__ */ jsxs("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
+                className: ["rct-tree-item-button", context.isSelected ? "rct-tree-item-button-selected" : "", context.isExpanded ? "rct-tree-item-button-expanded" : "", context.isFocused ? "rct-tree-item-button-focused" : "", children ? "rct-tree-item-button-hasChildren" : ""].join(" "),
+                children: [((_a2 = arrow == null ? void 0 : arrow.props) == null ? void 0 : _a2.className.includes("rct-tree-item-arrow-hasChildren")) ? /* @__PURE__ */ jsx(FolderSVG, {
+                  className: "folder-svg"
+                }) : /* @__PURE__ */ jsx(FileSVG, {
+                  className: "file-svg"
+                }), title]
+              }))]
+            }), children]
+          }));
+        },
+        children: /* @__PURE__ */ jsx(Tree, {
+          treeId: "tree-1",
+          rootItem: "/",
+          treeLabel: "File Tree"
+        })
+      })]
+    })
+  });
+};
+var index$6 = /* @__PURE__ */ Object.freeze({
+  __proto__: null,
+  [Symbol.toStringTag]: "Module",
+  getStringFromFile,
+  FileTree
+});
 var FExtension;
 (function(FExtension2) {
   FExtension2["erb"] = "erb";
@@ -174650,41 +174911,14 @@ const EditorLayout = newStyled.div`
     color: #666;
   }
 
-  .stack-list {
-    width: 100%;
-    height: 35px;
-    transform: translate(0, -1px);
-    overflow-x: auto;
-    flex-wrap: nowrap;
-    li {
-      /* width: 100px; */
-      height: 100%;
-      padding: 5px 25px;
-      color: #fff;
-      font-size: 12px;
-      flex: 0 0 auto;
-      &:hover {
-        background: #005391;
-      }
-    }
-
-    .active {
-      background: #004172;
+  .margin-view-overlays {
+    background-color: ${(props2) => props2.theme.marginViewOverlays};
 
-      box-shadow: 0px 1px 0px 0 #333;
-      border-right: 1px solid rgb(42 96 231);
-      /* border-left: 1px solid rgb(42 96 231); */
-      /* background: red; */
-    }
+    .line-numbers {
+      color: ${(props2) => props2.theme.lineNumbers};
 
-    .tree-closer {
-      right: 4px;
-      font-size: 14px;
-      opacity: 0;
-      line-height: 0;
-      transition: opacity 0.2s ease-in-out;
-      &.hover {
-        opacity: 1;
+      &.active-line-number {
+        color: ${(props2) => props2.theme.activeLineNumber};
       }
     }
   }
@@ -190152,51 +190386,6 @@ class MonacoAdapter {
     return new Cursor(start, end);
   }
 }
-create$5((set2) => ({
-  cursor: {},
-  setCursor: (arg) => set2((state2) => ({ cursor: arg }))
-}));
-const editorStore = create$5((set2) => ({
-  fileTreeStack: [],
-  setFileTreeStack: (arg) => set2(() => ({ fileTreeStack: arg }))
-}));
-class EditorData {
-  localSetFileTreeStack(arg) {
-    editorStore.getState().setFileTreeStack(arg);
-  }
-  static get fileTreeStack() {
-    const fileTreeStack = editorStore.getState().fileTreeStack;
-    return fileTreeStack;
-  }
-  static setFileTreeStack(arg) {
-    return editorStore.getState().setFileTreeStack(arg);
-  }
-  static updateModel({
-    value,
-    path: path2,
-    language: language2,
-    APP_DIR: APP_DIR2
-  }, callback, cover = false) {
-    let gotModel = editor$1.getModels().find((x2) => x2.uri.path.includes(path2));
-    if (!gotModel && !!cover) {
-      gotModel = editor$1.createModel(value, language2, Uri.parse(`file://${APP_DIR2}${path2}`));
-    }
-    const _fileTreeStack = [
-      ...this.fileTreeStack,
-      {
-        label: path2,
-        path: path2,
-        model: gotModel
-      }
-    ];
-    this.setFileTreeStack(lodash$2.exports.uniqBy(_fileTreeStack, "path"));
-    if (cover) {
-      gotModel == null ? void 0 : gotModel.setValue(value);
-    }
-    callback && callback(gotModel);
-  }
-}
-__publicField(EditorData, "EditorData");
 class ClientMeta {
   constructor(editor2, clientList) {
     __publicField(this, "clientList");
@@ -220145,6 +220334,214 @@ const Markdown = ({
     })
   }), document.body);
 };
+const Dracula = {
+  base: "vs-dark",
+  inherit: true,
+  rules: [
+    {
+      background: "282a36",
+      token: ""
+    },
+    {
+      foreground: "6272a4",
+      token: "comment"
+    },
+    {
+      foreground: "f1fa8c",
+      token: "string"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.numeric"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.language"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.character"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.other"
+    },
+    {
+      foreground: "ffb86c",
+      token: "variable.other.readwrite.instance"
+    },
+    {
+      foreground: "ff79c6",
+      token: "constant.character.escaped"
+    },
+    {
+      foreground: "ff79c6",
+      token: "constant.character.escape"
+    },
+    {
+      foreground: "ff79c6",
+      token: "string source"
+    },
+    {
+      foreground: "ff79c6",
+      token: "string source.ruby"
+    },
+    {
+      foreground: "ff79c6",
+      token: "keyword"
+    },
+    {
+      foreground: "ff79c6",
+      token: "storage"
+    },
+    {
+      foreground: "8be9fd",
+      fontStyle: "italic",
+      token: "storage.type"
+    },
+    {
+      foreground: "50fa7b",
+      fontStyle: "underline",
+      token: "entity.name.class"
+    },
+    {
+      foreground: "50fa7b",
+      fontStyle: "italic underline",
+      token: "entity.other.inherited-class"
+    },
+    {
+      foreground: "50fa7b",
+      token: "entity.name.function"
+    },
+    {
+      foreground: "ffb86c",
+      fontStyle: "italic",
+      token: "variable.parameter"
+    },
+    {
+      foreground: "ff79c6",
+      token: "entity.name.tag"
+    },
+    {
+      foreground: "50fa7b",
+      token: "entity.other.attribute-name"
+    },
+    {
+      foreground: "8be9fd",
+      token: "support.function"
+    },
+    {
+      foreground: "6be5fd",
+      token: "support.constant"
+    },
+    {
+      foreground: "66d9ef",
+      fontStyle: " italic",
+      token: "support.type"
+    },
+    {
+      foreground: "66d9ef",
+      fontStyle: " italic",
+      token: "support.class"
+    },
+    {
+      foreground: "f8f8f0",
+      background: "ff79c6",
+      token: "invalid"
+    },
+    {
+      foreground: "f8f8f0",
+      background: "bd93f9",
+      token: "invalid.deprecated"
+    },
+    {
+      foreground: "cfcfc2",
+      token: "meta.structure.dictionary.json string.quoted.double.json"
+    },
+    {
+      foreground: "6272a4",
+      token: "meta.diff"
+    },
+    {
+      foreground: "6272a4",
+      token: "meta.diff.header"
+    },
+    {
+      foreground: "ff79c6",
+      token: "markup.deleted"
+    },
+    {
+      foreground: "50fa7b",
+      token: "markup.inserted"
+    },
+    {
+      foreground: "e6db74",
+      token: "markup.changed"
+    },
+    {
+      foreground: "bd93f9",
+      token: "constant.numeric.line-number.find-in-files - match"
+    },
+    {
+      foreground: "e6db74",
+      token: "entity.name.filename"
+    },
+    {
+      foreground: "f83333",
+      token: "message.error"
+    },
+    {
+      foreground: "eeeeee",
+      token: "punctuation.definition.string.begin.json - meta.structure.dictionary.value.json"
+    },
+    {
+      foreground: "eeeeee",
+      token: "punctuation.definition.string.end.json - meta.structure.dictionary.value.json"
+    },
+    {
+      foreground: "8be9fd",
+      token: "meta.structure.dictionary.json string.quoted.double.json"
+    },
+    {
+      foreground: "f1fa8c",
+      token: "meta.structure.dictionary.value.json string.quoted.double.json"
+    },
+    {
+      foreground: "50fa7b",
+      token: "meta meta meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ffb86c",
+      token: "meta meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ff79c6",
+      token: "meta meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "bd93f9",
+      token: "meta meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "50fa7b",
+      token: "meta meta meta.structure.dictionary.value string"
+    },
+    {
+      foreground: "ffb86c",
+      token: "meta meta.structure.dictionary.value string"
+    }
+  ],
+  colors: {
+    "editor.foreground": "#f8f8f2",
+    "editor.background": "#282a36",
+    "editor.selectionBackground": "#44475a",
+    "editor.lineHighlightBackground": "#44475a",
+    "editorCursor.foreground": "#f8f8f0",
+    "editorWhitespace.foreground": "#3B3A32",
+    "editorIndentGuide.activeBackground": "#9D550FB0",
+    "editor.selectionHighlightBorder": "#222218"
+  }
+};
 const APP_DIR = "/home/runner/app";
 let editor;
 const docServer = new Map();
@@ -220162,7 +220559,8 @@ const Editor = ({
   menuStyle,
   editorStyle,
   serviceWorkerOrigin,
-  useLsp
+  useLsp,
+  theme
 }) => {
   const divEl = react.exports.useRef(null);
   const [clientEditor, setClientEditor] = react.exports.useState(null);
@@ -220176,9 +220574,11 @@ const Editor = ({
   } = oTStore.getState();
   const CRDTInfo2 = oTStore((state2) => state2.CRDTInfo);
   const dockerInfo2 = oTStore((state2) => state2.dockerInfo);
+  const fileTree = fileTreeStore((state2) => state2.fileTree);
   oTStore((state2) => state2.CRDTInfo.file);
   const docFile = oTStore((state2) => state2.doc);
   const globalData = oTStore((state2) => state2.globalData);
+  const [keepVal, setKeepVal] = react.exports.useState("");
   const userList = userListStore((state2) => state2.userList);
   const userInfo = userStore((state2) => state2.userInfo);
   const io = useOT((state2) => state2.socket);
@@ -220242,6 +220642,7 @@ const Editor = ({
   const onChange = (operation) => {
     var _a2;
     const applyDoc = oTStore.getState().doc;
+    console.log(clientEditor.liveOperationCode);
     setTimeout(() => {
       client.applyClient(operation);
       setLocalFile((applyDoc == null ? void 0 : applyDoc.path) ? applyDoc == null ? void 0 : applyDoc.path : "singleFile", {
@@ -220252,6 +220653,7 @@ const Editor = ({
     if ((_a2 = applyDoc == null ? void 0 : applyDoc.path) == null ? void 0 : _a2.includes("md")) {
       setMarkdownVal(editor.getValue());
     }
+    setKeepVal(editor.getValue());
   };
   const onDidScroll = (evt) => {
     var _a2;
@@ -220407,24 +220809,30 @@ const Editor = ({
         enabled: true
       }
     });
-    editor$1.defineTheme("myCoolTheme", {
-      base: "vs-dark",
-      inherit: false,
-      rules: [{
-        token: "green",
-        background: "FF0000",
-        foreground: "00FF00",
-        fontStyle: "italic"
-      }, {
-        token: "red",
-        foreground: "FF0000",
-        fontStyle: "bold underline"
-      }],
-      colors: {
-        "editor.foreground": "#FFFFFF",
-        "editor.background": "#000000"
+    editor.onDidAttemptReadOnlyEdit(() => {
+      var _a2, _b2;
+      const text2 = "\u8BE5\u6587\u4EF6\u5DF2\u88AB\u5220\u9664\uFF0C\u7EE7\u7EED\u7F16\u8F91\u9700\u8981\u91CD\u65B0\u521B\u5EFA\u6B64\u6587\u4EF6\uFF0C\u8BF7\u786E\u8BA4\u662F\u5426\u91CD\u65B0\u521B\u5EFA\uFF1F";
+      if (confirm(text2)) {
+        editor.updateOptions({
+          readOnly: false
+        });
+        const _fileTreeStack = EditorData.fileTreeStack.map((value) => {
+          return __spreadProps(__spreadValues({}, value), {
+            deleted: false,
+            label: value.label.replace(" has deleted", "")
+          });
+        });
+        EditorData.setFileTreeStack(_fileTreeStack);
+        const payload = {
+          action: "RECORVERY",
+          path: (_b2 = (_a2 = oTStore.getState()) == null ? void 0 : _a2.doc) == null ? void 0 : _b2.path,
+          newPath: ""
+        };
+        io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
       }
     });
+    editor$1.defineTheme("myCoolTheme", Dracula);
+    editor$1.setTheme("myCoolTheme");
     setClientEditor(new MonacoAdapter(editor, serviceWorkerOrigin));
     setOtherClients(new ClientMeta(editor, userList.filter((x2) => !IsMe(x2))));
     serviceBinder();
@@ -220537,6 +220945,9 @@ const Editor = ({
     } = oTStore.getState();
     if (appStatus === "replay")
       return;
+    if (docFile.path === "/") {
+      editor.setValue("");
+    }
     if (/\/$/.test(docFile.path))
       return;
     updateModel(docFile);
@@ -220561,6 +220972,23 @@ const Editor = ({
       readOnly: globalData.disableEditor
     });
   }, [globalData]);
+  react.exports.useEffect(() => {
+    const _fileTreeStack = EditorData.fileTreeStack.map((value) => {
+      if (checkIfTheFileHasDeleted(fileTree, value.path)) {
+        return __spreadProps(__spreadValues({}, value), {
+          deleted: true,
+          label: `${value.label} has deleted`
+        });
+      }
+      return value;
+    });
+    EditorData.setFileTreeStack(_fileTreeStack);
+    if ((docFile == null ? void 0 : docFile.path) && checkIfTheFileHasDeleted(fileTree, docFile.path)) {
+      editor.updateOptions({
+        readOnly: true
+      });
+    }
+  }, [fileTree]);
   return /* @__PURE__ */ jsxs(FollowLayout, {
     name: "editor",
     children: [/* @__PURE__ */ jsx(Markdown, {
@@ -220571,7 +220999,8 @@ const Editor = ({
       }
     }), /* @__PURE__ */ jsxs(EditorLayout, {
       style: containerStyle,
-      className: "editor-layout flex flex-col",
+      theme,
+      className: `editor-layout flex flex-col`,
       children: [/* @__PURE__ */ jsx(FileTreeStack, {
         editor,
         menuStyle,
@@ -220586,13 +221015,59 @@ const Editor = ({
     })]
   });
 };
+const FileTreeStackLayout = newStyled.ul`
+  .active {
+    background-color: ${(props2) => props2.menuStyle.backgroundColor};
+    box-shadow: 0px 1px 0px 0 #333;
+    border-right: 1px solid ${(props2) => props2.menuStyle.backgroundColor};
+  }
+
+  width: 100%;
+  height: 35px;
+  transform: translate(0, -1px);
+  overflow-x: auto;
+  flex-wrap: nowrap;
+  li {
+    /* width: 100px; */
+    height: 100%;
+    padding: 5px 25px;
+    color: ${(props2) => props2.menuStyle.textColor};
+    font-size: 12px;
+    flex: 0 0 auto;
+    &:hover {
+      background: ${(props2) => props2.menuStyle.hoverBgColor};
+      color: ${(props2) => props2.menuStyle.hoverTextColor};
+    }
+  }
+
+  .tree-closer {
+    right: 4px;
+    font-size: 14px;
+    opacity: 0;
+    line-height: 0;
+    transition: opacity 0.2s ease-in-out;
+    color: ${(props2) => props2.menuStyle.iconColor};
+    &.hover {
+      opacity: 1;
+      color: ${(props2) => props2.menuStyle.hoverIconColor};
+    }
+  }
+`;
 const FileTreeStack = ({
   editor: editor2,
-  menuStyle,
   switchModel,
-  clearPlayground
+  clearPlayground,
+  menuStyle = {
+    backgroundColor: "#005391",
+    textColor: "#fff",
+    hoverBgColor: "rgb(37 45 124 / 80%)",
+    hoverTextColor: "#fff",
+    iconColor: "#fff",
+    hoverIconColor: "#fff"
+  }
 }) => {
   const switchDoc2 = oTStore((state2) => state2.switchDoc);
+  oTStore((state2) => state2.dockerInfo);
   const docFile = oTStore((state2) => state2.doc);
   const fileTreeStack = editorStore((state2) => state2.fileTreeStack);
   const setFileTreeStack = editorStore((state2) => state2.setFileTreeStack);
@@ -220613,11 +221088,11 @@ const FileTreeStack = ({
       switchModel(_fileTreeStackList.slice(-1)[0].model);
     }
   };
-  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx("ul", {
-    style: menuStyle,
+  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx(FileTreeStackLayout, {
+    menuStyle,
     id: "menu-list",
     ref,
-    className: "\r flex\r flex-row\r stack-list\r items-center\r flex-shrink-0\r scroll-smooth\r no-scrollbar\r overflow-x-scroll\r bg-codezone-black\r overflow-auto touch-pan-x",
+    className: "flex flex-row stack-list items-center flex-shrink-0 scroll-smooth no-scrollbar overflow-x-scroll bg-codezone-black overflow-auto touch-pan-x",
     children: fileTreeStack == null ? void 0 : fileTreeStack.map((f2, index2) => /* @__PURE__ */ jsxs("li", {
       className: `
             flex
@@ -227885,6 +228360,7 @@ const Console = (_e2) => {
   }, [dockerStatus]);
   return /* @__PURE__ */ jsx(FollowLayout, {
     children: /* @__PURE__ */ jsx("div", {
+      className: props2.className ? props2.className : "",
       style: {
         height: "100%",
         width: "100%"
@@ -227901,12 +228377,25 @@ var index$3 = /* @__PURE__ */ Object.freeze({
   "default": Console
 });
 const PROTOCOL = "https://";
+const BrowserLayout = newStyled.div``;
 const NavBar = newStyled.div`
   background-color: white;
   height: 30px;
   display: flex;
   align-items: center;
 
+  .reload {
+    color: ${(props2) => props2.freshIconColor};
+  }
+
+  .file-copy {
+    color: ${(props2) => props2.openIconColor};
+  }
+
+  input {
+    color: ${(props2) => props2.inputColor};
+  }
+
   i {
     margin: 0 10px;
     width: 24px;
@@ -227951,7 +228440,17 @@ const StopMask = newStyled.div`
   opacity: 0.6;
 `;
 const OutputBrowser = (_g2) => {
-  var props2 = __objRest(_g2, []);
+  var _h2 = _g2, {
+    showURL = false,
+    freshIconColor = "#00bcd4",
+    inputColor = "#adacac",
+    openIconColor = "#adacac"
+  } = _h2, props2 = __objRest(_h2, [
+    "showURL",
+    "freshIconColor",
+    "inputColor",
+    "openIconColor"
+  ]);
   var _a2;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
   const dStatus = oTStore((state2) => state2.dockerStatus);
@@ -228004,33 +228503,39 @@ const OutputBrowser = (_g2) => {
       }
     }
   }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(FollowLayout, {
+  return /* @__PURE__ */ jsx(FollowLayout, {
     name: "browser",
-    children: [/* @__PURE__ */ jsxs(NavBar, {
-      children: [/* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl reload cursor-pointer",
-        onClick: onRefresh
-      }), /* @__PURE__ */ jsx("input", {
-        type: "text",
-        value: iframeSrc,
-        onChange: (e2) => setIframeSrc(e2.target.value),
-        onKeyDown: onEnterKey
-      }), /* @__PURE__ */ jsx("i", {
-        className: "d42 text-xl file-copy cursor-pointer",
-        onClick: onOpenInNewTab
+    children: /* @__PURE__ */ jsxs(BrowserLayout, {
+      className: "w-full h-full",
+      children: [showURL ? /* @__PURE__ */ jsxs(NavBar, {
+        freshIconColor,
+        inputColor,
+        openIconColor,
+        children: [/* @__PURE__ */ jsx("i", {
+          className: "d42 text-xl reload cursor-pointer",
+          onClick: onRefresh
+        }), /* @__PURE__ */ jsx("input", {
+          type: "text",
+          value: iframeSrc,
+          onChange: (e2) => setIframeSrc(e2.target.value),
+          onKeyDown: onEnterKey
+        }), /* @__PURE__ */ jsx("i", {
+          className: "d42 text-xl file-copy cursor-pointer",
+          onClick: onOpenInNewTab
+        })]
+      }) : null, dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
+        children: /* @__PURE__ */ jsx("span", {
+          children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
+        })
+      }), /* @__PURE__ */ jsx("iframe", {
+        ref: iframeRef,
+        src: iframeSrc,
+        style: {
+          width: "100%",
+          height: "calc(100% - 30px)"
+        }
       })]
-    }), dockerStatus === "STOP" && /* @__PURE__ */ jsx(StopMask, {
-      children: /* @__PURE__ */ jsx("span", {
-        children: "\u70B9\u51FB\u201C\u8FD0\u884C\u201D\uFF0C\u542F\u52A8\u5E94\u7528"
-      })
-    }), /* @__PURE__ */ jsx("iframe", {
-      ref: iframeRef,
-      src: iframeSrc,
-      style: {
-        width: "100%",
-        height: "calc(100% - 30px)"
-      }
-    })]
+    })
   });
 };
 var index$2 = /* @__PURE__ */ Object.freeze({
@@ -228038,10 +228543,10 @@ var index$2 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": OutputBrowser
 });
-const TerminalComponent = (_h2) => {
-  var _i = _h2, {
+const TerminalComponent = (_i) => {
+  var _j = _i, {
     options
-  } = _i, props2 = __objRest(_i, [
+  } = _j, props2 = __objRest(_j, [
     "options"
   ]);
   const defaultOptions2 = __spreadValues({}, options);
@@ -228161,6 +228666,7 @@ const TerminalComponent = (_h2) => {
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "terminal",
     children: /* @__PURE__ */ jsx("div", {
+      className: props2.className ? props2.className : "",
       id: "terminal",
       style: {
         height: "100%",
@@ -228178,12 +228684,12 @@ var index$1 = /* @__PURE__ */ Object.freeze({
   [Symbol.toStringTag]: "Module",
   "default": TerminalComponent
 });
-const Tabs = (_j) => {
-  var _k = _j, {
+const Tabs = (_k) => {
+  var _l = _k, {
     activeKey,
     onSelect,
     tabItems
-  } = _k, props2 = __objRest(_k, [
+  } = _l, props2 = __objRest(_l, [
     "activeKey",
     "onSelect",
     "tabItems"
@@ -228501,10 +229007,10 @@ const AvatarLayout = newStyled.div`
   border-color: ${(props2) => props2.user.color};
   background-image: ${(props2) => 'url("' + props2.user.avatar + '")'};
 `;
-const Avatar = (_l) => {
-  var _m = _l, {
+const Avatar = (_m) => {
+  var _n = _m, {
     user
-  } = _m, props2 = __objRest(_m, [
+  } = _n, props2 = __objRest(_n, [
     "user"
   ]);
   return /* @__PURE__ */ jsx(AvatarLayout, __spreadValues({
@@ -228513,8 +229019,8 @@ const Avatar = (_l) => {
   }, props2));
 };
 const SkeletonThemeContext = React.createContext({});
-function SkeletonTheme(_n) {
-  var _o = _n, { children } = _o, styleOptions = __objRest(_o, ["children"]);
+function SkeletonTheme(_o) {
+  var _p = _o, { children } = _p, styleOptions = __objRest(_p, ["children"]);
   return React.createElement(SkeletonThemeContext.Provider, { value: styleOptions }, children);
 }
 const defaultEnableAnimation = true;
@@ -228540,8 +229046,8 @@ function styleOptionsToCssProperties({ baseColor, highlightColor, width, height,
     style2["--highlight-color"] = highlightColor;
   return style2;
 }
-function Skeleton$1(_p) {
-  var _q = _p, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _q, propsStyleOptions = __objRest(_q, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
+function Skeleton$1(_q) {
+  var _r = _q, { count = 1, wrapper: Wrapper, className: customClassName, containerClassName, containerTestId, circle = false, style: styleProp } = _r, propsStyleOptions = __objRest(_r, ["count", "wrapper", "className", "containerClassName", "containerTestId", "circle", "style"]);
   var _a2, _b2;
   const contextStyleOptions = React.useContext(SkeletonThemeContext);
   const styleOptions = __spreadProps(__spreadValues(__spreadValues({}, contextStyleOptions), propsStyleOptions), {
@@ -228664,8 +229170,8 @@ const ButtonContent = ({
     })()
   });
 };
-const ToolBar = (_r) => {
-  var props2 = __objRest(_r, []);
+const ToolBar = (_s) => {
+  var props2 = __objRest(_s, []);
   const io = useOT.getState().socket;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
   const dStatus = oTStore((state2) => state2.dockerStatus);
@@ -228783,7 +229289,7 @@ const MainLayout = newStyled.div`
 const PreviewWrapper = newStyled.div`
   height: 40vh;
   color: #333333;
-  background-color: #eaeaea;
+  /* background-color: #eaeaea; */
 `;
 const TermWrapper = newStyled.div`
   height: calc(100% - 40vh - 51px);
@@ -228794,9 +229300,9 @@ const HeaderLayout = newStyled.header`
 `;
 const ContainerLayout = newStyled.div`
   height: calc(100% - 4.625rem);
-  section {
+  /* section {
     height: calc(100% - 0.625rem);
-  }
+  } */
 `;
 const RunnerLayout = newStyled.section`
   background: #202327;
@@ -228878,7 +229384,8 @@ const Index = (props2) => {
           children: [/* @__PURE__ */ jsx(PreviewWrapper, {
             className: "mb-2.5 relative",
             children: /* @__PURE__ */ jsx(OutputBrowser, {
-              url: url2
+              url: url2,
+              showURL: true
             })
           }), /* @__PURE__ */ jsx(Tabs, {
             className: "mb-1",