@dao42/d42paas-front 0.7.34 → 0.7.38

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",
@@ -28639,6 +28645,25 @@ const PlaygroundInit = (arg) => {
     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);
@@ -28704,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;
@@ -41903,6 +41931,196 @@ register$2(LevaInputs.BOOLEAN, boolean$6);
 register$2(LevaInputs.INTERVAL, interval);
 register$2(LevaInputs.VECTOR3D, vector3d);
 register$2(LevaInputs.VECTOR2D, vector2d);
+const clearCache = () => {
+  var _a2, _b2;
+  localStorage.clear();
+  indexedDB.deleteDatabase("daopaas").onsuccess = () => {
+  };
+  (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("clearCache");
+};
+const adminClearCache = () => {
+  var _a2, _b2;
+  localStorage.clear();
+  indexedDB.deleteDatabase("daopaas").onsuccess = () => {
+  };
+  (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("adminClearCache");
+};
+const guiStore = create$5((set2) => ({
+  showGUI: false,
+  setShowGUI: (arg) => set2(() => ({
+    showGUI: arg
+  }))
+}));
+var CRDTKeyToVal;
+(function(CRDTKeyToVal2) {
+  CRDTKeyToVal2["editor"] = "\u7F16\u8F91\u5668";
+  CRDTKeyToVal2["file"] = "\u6587\u4EF6";
+  CRDTKeyToVal2["terminal"] = "\u7EC8\u7AEF";
+  CRDTKeyToVal2["console"] = "\u8FD0\u884C\u6846";
+  CRDTKeyToVal2["media"] = "\u5F71\u97F3";
+})(CRDTKeyToVal || (CRDTKeyToVal = {}));
+var DefaultContext = {
+  color: void 0,
+  size: void 0,
+  className: void 0,
+  style: void 0,
+  attr: void 0
+};
+var IconContext = React.createContext && React.createContext(DefaultContext);
+var __assign$b = globalThis && globalThis.__assign || function() {
+  __assign$b = Object.assign || function(t2) {
+    for (var s2, i = 1, n2 = arguments.length; i < n2; i++) {
+      s2 = arguments[i];
+      for (var p2 in s2)
+        if (Object.prototype.hasOwnProperty.call(s2, p2))
+          t2[p2] = s2[p2];
+    }
+    return t2;
+  };
+  return __assign$b.apply(this, arguments);
+};
+var __rest = globalThis && globalThis.__rest || function(s2, e2) {
+  var t2 = {};
+  for (var p2 in s2)
+    if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
+      t2[p2] = s2[p2];
+  if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p2 = Object.getOwnPropertySymbols(s2); i < p2.length; i++) {
+      if (e2.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i]))
+        t2[p2[i]] = s2[p2[i]];
+    }
+  return t2;
+};
+function Tree2Element(tree2) {
+  return tree2 && tree2.map(function(node2, i) {
+    return React.createElement(node2.tag, __assign$b({
+      key: i
+    }, node2.attr), Tree2Element(node2.child));
+  });
+}
+function GenIcon(data) {
+  return function(props2) {
+    return React.createElement(IconBase, __assign$b({
+      attr: __assign$b({}, data.attr)
+    }, props2), Tree2Element(data.child));
+  };
+}
+function IconBase(props2) {
+  var elem = function(conf2) {
+    var attr = props2.attr, size2 = props2.size, title = props2.title, svgProps = __rest(props2, ["attr", "size", "title"]);
+    var computedSize = size2 || conf2.size || "1em";
+    var className;
+    if (conf2.className)
+      className = conf2.className;
+    if (props2.className)
+      className = (className ? className + " " : "") + props2.className;
+    return React.createElement("svg", __assign$b({
+      stroke: "currentColor",
+      fill: "currentColor",
+      strokeWidth: "0"
+    }, conf2.attr, attr, svgProps, {
+      className,
+      style: __assign$b(__assign$b({
+        color: props2.color || conf2.color
+      }, conf2.style), props2.style),
+      height: computedSize,
+      width: computedSize,
+      xmlns: "http://www.w3.org/2000/svg"
+    }), title && React.createElement("title", null, title), props2.children);
+  };
+  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf2) {
+    return elem(conf2);
+  }) : elem(DefaultContext);
+}
+function MdOutlinePersonOutline(props2) {
+  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M12 5.9a2.1 2.1 0 110 4.2 2.1 2.1 0 010-4.2m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" } }] })(props2);
+}
+const DrawerComponent = ({
+  drawerOpen,
+  setDrawerOpen,
+  replayList,
+  option
+}) => {
+  const [filterVal, setFilterVal] = react.exports.useState("");
+  react.exports.useEffect(() => {
+  }, [replayList]);
+  return /* @__PURE__ */ jsxs(Drawer$1, {
+    size: "lg",
+    placement: "right",
+    open: drawerOpen,
+    onClose: () => setDrawerOpen(false),
+    children: [/* @__PURE__ */ jsxs(Drawer$1.Header, {
+      children: [/* @__PURE__ */ jsx(Drawer$1.Title, {
+        children: !option ? "\u56DE\u653E\u5217\u8868" : option.title ? option.title : ""
+      }), /* @__PURE__ */ jsx(Drawer$1.Actions, {
+        children: /* @__PURE__ */ jsxs(InputGroup$1, {
+          children: [/* @__PURE__ */ jsx(InputGroup$1.Addon, {
+            children: /* @__PURE__ */ jsx(MdOutlinePersonOutline, {
+              size: "1.5em"
+            })
+          }), /* @__PURE__ */ jsx(Input$1, {
+            onChange: (evt) => {
+              setFilterVal(evt);
+            }
+          })]
+        })
+      })]
+    }), /* @__PURE__ */ jsx(Drawer$1.Body, {
+      children: replayList ? /* @__PURE__ */ jsx("div", {
+        children: /* @__PURE__ */ jsx("ul", {
+          role: "list",
+          className: "marker:text-sky-400 list-disc pl-5 space-y-3 text-gray-400",
+          children: filterVal ? replayList.filter((item) => userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid).username.indexOf(filterVal) >= 0).map((item, index2) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsxs("li", {
+              className: "hover:ring-sky-500 cursor-pointer",
+              onClick: () => {
+                setDrawerOpen(false);
+                replay({
+                  timestamp: item.timestamp
+                });
+              },
+              children: [CRDTKeyToVal[item.event], /* @__PURE__ */ jsx("span", {
+                className: "mx-4",
+                style: {
+                  color: (_a2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _a2.color
+                },
+                children: (_b2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _b2.username
+              }), /* @__PURE__ */ jsxs("span", {
+                children: ["\u3010", dayjs(Number(item.timestamp)).format("YYYY-DD-MM   hh:mm:ss"), "\u3011"]
+              })]
+            }, index2);
+          }) : replayList.map((item, index2) => {
+            var _a2, _b2;
+            return /* @__PURE__ */ jsxs("li", {
+              className: "hover:ring-sky-500 cursor-pointer",
+              onClick: () => {
+                setDrawerOpen(false);
+                replay({
+                  userId: item.userInfo.uuid,
+                  timestamp: item.timestamp
+                });
+              },
+              children: [CRDTKeyToVal[item.event], /* @__PURE__ */ jsx("span", {
+                className: "mx-4",
+                style: {
+                  color: (_a2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _a2.color
+                },
+                children: (_b2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _b2.username
+              }), /* @__PURE__ */ jsxs("span", {
+                children: ["\u3010", dayjs(Number(item.timestamp)).format("YYYY-DD-MM   hh:mm:ss"), "\u3011"]
+              })]
+            }, index2);
+          })
+        })
+      }) : /* @__PURE__ */ jsx(Placeholder$2.Paragraph, {
+        style: {
+          marginTop: 30
+        }
+      })
+    })]
+  });
+};
 /**
  * @license
  * Copyright 2019 Google LLC
@@ -44160,196 +44378,6 @@ __decorate$1z([
 NinjaKeys = __decorate$1z([
   n$2("ninja-keys")
 ], NinjaKeys);
-const clearCache = () => {
-  var _a2, _b2;
-  localStorage.clear();
-  indexedDB.deleteDatabase("daopaas").onsuccess = () => {
-  };
-  (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("clearCache");
-};
-const adminClearCache = () => {
-  var _a2, _b2;
-  localStorage.clear();
-  indexedDB.deleteDatabase("daopaas").onsuccess = () => {
-  };
-  (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("adminClearCache");
-};
-const guiStore = create$5((set2) => ({
-  showGUI: false,
-  setShowGUI: (arg) => set2(() => ({
-    showGUI: arg
-  }))
-}));
-var CRDTKeyToVal;
-(function(CRDTKeyToVal2) {
-  CRDTKeyToVal2["editor"] = "\u7F16\u8F91\u5668";
-  CRDTKeyToVal2["file"] = "\u6587\u4EF6";
-  CRDTKeyToVal2["terminal"] = "\u7EC8\u7AEF";
-  CRDTKeyToVal2["console"] = "\u8FD0\u884C\u6846";
-  CRDTKeyToVal2["media"] = "\u5F71\u97F3";
-})(CRDTKeyToVal || (CRDTKeyToVal = {}));
-var DefaultContext = {
-  color: void 0,
-  size: void 0,
-  className: void 0,
-  style: void 0,
-  attr: void 0
-};
-var IconContext = React.createContext && React.createContext(DefaultContext);
-var __assign$b = globalThis && globalThis.__assign || function() {
-  __assign$b = Object.assign || function(t2) {
-    for (var s2, i = 1, n2 = arguments.length; i < n2; i++) {
-      s2 = arguments[i];
-      for (var p2 in s2)
-        if (Object.prototype.hasOwnProperty.call(s2, p2))
-          t2[p2] = s2[p2];
-    }
-    return t2;
-  };
-  return __assign$b.apply(this, arguments);
-};
-var __rest = globalThis && globalThis.__rest || function(s2, e2) {
-  var t2 = {};
-  for (var p2 in s2)
-    if (Object.prototype.hasOwnProperty.call(s2, p2) && e2.indexOf(p2) < 0)
-      t2[p2] = s2[p2];
-  if (s2 != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p2 = Object.getOwnPropertySymbols(s2); i < p2.length; i++) {
-      if (e2.indexOf(p2[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s2, p2[i]))
-        t2[p2[i]] = s2[p2[i]];
-    }
-  return t2;
-};
-function Tree2Element(tree2) {
-  return tree2 && tree2.map(function(node2, i) {
-    return React.createElement(node2.tag, __assign$b({
-      key: i
-    }, node2.attr), Tree2Element(node2.child));
-  });
-}
-function GenIcon(data) {
-  return function(props2) {
-    return React.createElement(IconBase, __assign$b({
-      attr: __assign$b({}, data.attr)
-    }, props2), Tree2Element(data.child));
-  };
-}
-function IconBase(props2) {
-  var elem = function(conf2) {
-    var attr = props2.attr, size2 = props2.size, title = props2.title, svgProps = __rest(props2, ["attr", "size", "title"]);
-    var computedSize = size2 || conf2.size || "1em";
-    var className;
-    if (conf2.className)
-      className = conf2.className;
-    if (props2.className)
-      className = (className ? className + " " : "") + props2.className;
-    return React.createElement("svg", __assign$b({
-      stroke: "currentColor",
-      fill: "currentColor",
-      strokeWidth: "0"
-    }, conf2.attr, attr, svgProps, {
-      className,
-      style: __assign$b(__assign$b({
-        color: props2.color || conf2.color
-      }, conf2.style), props2.style),
-      height: computedSize,
-      width: computedSize,
-      xmlns: "http://www.w3.org/2000/svg"
-    }), title && React.createElement("title", null, title), props2.children);
-  };
-  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf2) {
-    return elem(conf2);
-  }) : elem(DefaultContext);
-}
-function MdOutlinePersonOutline(props2) {
-  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "fill": "none", "d": "M0 0h24v24H0V0z" } }, { "tag": "path", "attr": { "d": "M12 5.9a2.1 2.1 0 110 4.2 2.1 2.1 0 010-4.2m0 9c2.97 0 6.1 1.46 6.1 2.1v1.1H5.9V17c0-.64 3.13-2.1 6.1-2.1M12 4C9.79 4 8 5.79 8 8s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 9c-2.67 0-8 1.34-8 4v3h16v-3c0-2.66-5.33-4-8-4z" } }] })(props2);
-}
-const DrawerComponent = ({
-  drawerOpen,
-  setDrawerOpen,
-  replayList,
-  option
-}) => {
-  const [filterVal, setFilterVal] = react.exports.useState("");
-  react.exports.useEffect(() => {
-  }, [replayList]);
-  return /* @__PURE__ */ jsxs(Drawer$1, {
-    size: "lg",
-    placement: "right",
-    open: drawerOpen,
-    onClose: () => setDrawerOpen(false),
-    children: [/* @__PURE__ */ jsxs(Drawer$1.Header, {
-      children: [/* @__PURE__ */ jsx(Drawer$1.Title, {
-        children: !option ? "\u56DE\u653E\u5217\u8868" : option.title ? option.title : ""
-      }), /* @__PURE__ */ jsx(Drawer$1.Actions, {
-        children: /* @__PURE__ */ jsxs(InputGroup$1, {
-          children: [/* @__PURE__ */ jsx(InputGroup$1.Addon, {
-            children: /* @__PURE__ */ jsx(MdOutlinePersonOutline, {
-              size: "1.5em"
-            })
-          }), /* @__PURE__ */ jsx(Input$1, {
-            onChange: (evt) => {
-              setFilterVal(evt);
-            }
-          })]
-        })
-      })]
-    }), /* @__PURE__ */ jsx(Drawer$1.Body, {
-      children: replayList ? /* @__PURE__ */ jsx("div", {
-        children: /* @__PURE__ */ jsx("ul", {
-          role: "list",
-          className: "marker:text-sky-400 list-disc pl-5 space-y-3 text-gray-400",
-          children: filterVal ? replayList.filter((item) => userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid).username.indexOf(filterVal) >= 0).map((item, index2) => {
-            var _a2, _b2;
-            return /* @__PURE__ */ jsxs("li", {
-              className: "hover:ring-sky-500 cursor-pointer",
-              onClick: () => {
-                setDrawerOpen(false);
-                replay({
-                  timestamp: item.timestamp
-                });
-              },
-              children: [CRDTKeyToVal[item.event], /* @__PURE__ */ jsx("span", {
-                className: "mx-4",
-                style: {
-                  color: (_a2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _a2.color
-                },
-                children: (_b2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _b2.username
-              }), /* @__PURE__ */ jsxs("span", {
-                children: ["\u3010", dayjs(Number(item.timestamp)).format("YYYY-DD-MM   hh:mm:ss"), "\u3011"]
-              })]
-            }, index2);
-          }) : replayList.map((item, index2) => {
-            var _a2, _b2;
-            return /* @__PURE__ */ jsxs("li", {
-              className: "hover:ring-sky-500 cursor-pointer",
-              onClick: () => {
-                setDrawerOpen(false);
-                replay({
-                  userId: item.userInfo.uuid,
-                  timestamp: item.timestamp
-                });
-              },
-              children: [CRDTKeyToVal[item.event], /* @__PURE__ */ jsx("span", {
-                className: "mx-4",
-                style: {
-                  color: (_a2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _a2.color
-                },
-                children: (_b2 = userListStore.getState().userList.find((user) => user.uuid === item.userInfo.uuid)) == null ? void 0 : _b2.username
-              }), /* @__PURE__ */ jsxs("span", {
-                children: ["\u3010", dayjs(Number(item.timestamp)).format("YYYY-DD-MM   hh:mm:ss"), "\u3011"]
-              })]
-            }, index2);
-          })
-        })
-      }) : /* @__PURE__ */ jsx(Placeholder$2.Paragraph, {
-        style: {
-          marginTop: 30
-        }
-      })
-    })]
-  });
-};
 const CmdKey = () => {
   const ninjaKeys = react.exports.useRef(null);
   const actions = [
@@ -44602,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;
@@ -44612,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();
@@ -44712,11 +44742,29 @@ 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"]));
     });
+    shadowUserStore.subscribe((next2, pre) => {
+      this.trigger({
+        followingUser: pre.shadowUser
+      }, {
+        followingUser: pre.shadowUser
+      });
+    });
   }
   trigger(_d2, data) {
+    if (_d2 === "error") {
+      this.on(data, _d2);
+      return;
+    }
+    console.log(data);
     this.on(data);
   }
   clearIDB(callback) {
@@ -44785,8 +44833,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(({
@@ -44854,6 +44906,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), {
@@ -48387,6 +48440,20 @@ AwaitingWithBuffer.prototype.resend = function(client2) {
   client2.sendOperation(client2.revision, this.outstanding);
 };
 const FROZEN_CONTROL_COMPONENTS = ["editor", "file", "terminal"];
+newStyled.div`
+  position: absolute;
+  right: 0;
+  top: -1.5rem;
+  padding: 0 2rem;
+  background: ${(props2) => props2.shadowUser.color}5c;
+  border: 1px solid ${(props2) => props2.shadowUser.color};
+  border-radius: 5px 5px 0 0;
+
+  span {
+    font-size: 12px;
+    color: #fff;
+  }
+`;
 const FollowLayoutWrapper = newStyled.div`
   width: 100%;
   height: 100%;
@@ -48414,7 +48481,7 @@ const FollowLayout = ({
   const isPass = asyncType === name && (shadowUser == null ? void 0 : shadowUser.uuid) && !IsMe(shadowUser);
   return /* @__PURE__ */ jsxs(FollowLayoutWrapper, {
     user: shadowUser,
-    className: `${className} follow-layout`,
+    className: `follow-layout`,
     isPass,
     onClick: () => {
       if (!(shadowUser == null ? void 0 : shadowUser.uuid))
@@ -173945,9 +174012,125 @@ class EditorData {
   }
 }
 __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;
@@ -174016,7 +174199,13 @@ const getStringFromFile = async (file) => {
 };
 const FileTree = ({
   onCustomSelect,
-  className
+  dropBgColor = "pink",
+  dropTextColor = "black",
+  hoverBgColor = "rgb(37 45 124 / 80%)",
+  hoverTextColor = "#fff",
+  bgColor = "#15171c",
+  fontColor = "#fff",
+  onClick
 }) => {
   const addedFolder = {
     target: "",
@@ -174074,6 +174263,10 @@ const FileTree = ({
             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));
       }
     }
@@ -174356,8 +174549,14 @@ const FileTree = ({
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "file",
     children: /* @__PURE__ */ jsxs(TreeRootLayout, {
-      className: `tree-root-layout ${className ? className : ""}`,
       ref: treeRef,
+      className: `tree-root-layout`,
+      dropBgColor,
+      dropTextColor,
+      hoverBgColor,
+      hoverTextColor,
+      bgColor,
+      fontColor,
       children: [/* @__PURE__ */ jsx("input", {
         id: "manual-upload-file",
         type: "file",
@@ -174404,13 +174603,11 @@ const FileTree = ({
           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(" "),
-              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: {
@@ -174483,8 +174680,8 @@ const FileTree = ({
                             children: /* @__PURE__ */ jsx("button", {
                               className: "w-full justify-center my-2",
                               onClick: () => {
-                                var _a2;
-                                setRenameValue((_a2 = title == null ? void 0 : title.props) == null ? void 0 : _a2.children);
+                                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"
@@ -174521,9 +174718,13 @@ const FileTree = ({
                       break;
                   }
                 }
-              }) : /* @__PURE__ */ jsx("button", __spreadProps(__spreadValues(__spreadValues({}, context.itemContainerWithoutChildrenProps), context.interactiveElementProps), {
+              }) : /* @__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: title
+                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]
           }));
@@ -174732,41 +174933,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};
       }
     }
   }
@@ -220182,6 +220356,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();
@@ -220200,7 +220582,7 @@ const Editor = ({
   editorStyle,
   serviceWorkerOrigin,
   useLsp,
-  className
+  theme
 }) => {
   const divEl = react.exports.useRef(null);
   const [clientEditor, setClientEditor] = react.exports.useState(null);
@@ -220471,24 +220853,8 @@ const Editor = ({
         io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
       }
     });
-    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$1.defineTheme("myCoolTheme", Dracula);
+    editor$1.setTheme("myCoolTheme");
     setClientEditor(new MonacoAdapter(editor, serviceWorkerOrigin));
     setOtherClients(new ClientMeta(editor, userList.filter((x2) => !IsMe(x2))));
     serviceBinder();
@@ -220655,7 +221021,8 @@ const Editor = ({
       }
     }), /* @__PURE__ */ jsxs(EditorLayout, {
       style: containerStyle,
-      className: `editor-layout ${className ? className : ""} flex flex-col`,
+      theme,
+      className: `editor-layout flex flex-col`,
       children: [/* @__PURE__ */ jsx(FileTreeStack, {
         editor,
         menuStyle,
@@ -220670,11 +221037,56 @@ 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);
@@ -220698,11 +221110,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
@@ -227987,12 +228399,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;
@@ -228038,9 +228463,15 @@ const StopMask = newStyled.div`
 `;
 const OutputBrowser = (_g2) => {
   var _h2 = _g2, {
-    showURL = false
+    showURL = false,
+    freshIconColor = "#00bcd4",
+    inputColor = "#adacac",
+    openIconColor = "#adacac"
   } = _h2, props2 = __objRest(_h2, [
-    "showURL"
+    "showURL",
+    "freshIconColor",
+    "inputColor",
+    "openIconColor"
   ]);
   var _a2;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
@@ -228094,33 +228525,39 @@ const OutputBrowser = (_g2) => {
       }
     }
   }, [playgroundStatus, dockerStatus]);
-  return /* @__PURE__ */ jsxs(FollowLayout, {
+  return /* @__PURE__ */ jsx(FollowLayout, {
     name: "browser",
-    children: [showURL ? /* @__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)"
+        }
       })]
-    }) : 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)"
-      }
-    })]
+    })
   });
 };
 var index$2 = /* @__PURE__ */ Object.freeze({
@@ -228885,9 +229322,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;
@@ -228939,12 +229376,44 @@ const Index = (props2) => {
   react.exports.useEffect(() => {
     setUrl(playgroundInfo.url);
   }, [playgroundInfo]);
+  dockerState.subscribe((state2) => state2, (pre, next2) => {
+  });
+  oTStore.subscribe((state2) => state2, (pre, next2) => {
+  });
+  ErrorMsgState.subscribe((state2) => state2, (next2, pre) => {
+    Toast.message({
+      type: "error",
+      content: next2.message.content,
+      placement: "topCenter"
+    });
+  });
+  userListStore.subscribe((next2, pre) => {
+  });
+  shadowUserStore.subscribe((next2, pre) => {
+    if (next2.shadowUser.userId) {
+      Toast.message({
+        type: "success",
+        content: `\u6B63\u5728\u8DDF\u968F${next2.shadowUser.username}`,
+        placement: "topCenter"
+      });
+    } else {
+      Toast.message({
+        type: "success",
+        content: `\u5DF2\u9000\u51FA\u8DDF\u968F\u6A21\u5F0F`,
+        placement: "topCenter"
+      });
+    }
+  });
   react.exports.useEffect(() => {
     props2.playgroundId && (socket2 == null ? void 0 : socket2.emit("playgroundInfo", JSON.stringify({
       messageId: "1",
       playgroundId: props2.playgroundId
     })));
   }, [props2.playgroundId]);
+  react.exports.useEffect(() => {
+    var _a2;
+    (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("active");
+  }, []);
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsxs(MainLayout, {
       className: "flex flex-col",
@@ -228960,7 +229429,6 @@ const Index = (props2) => {
               count: 10
             }),
             children: /* @__PURE__ */ jsx(LazyEditorComponent, {
-              className: "editor-custom-style",
               serviceWorkerOrigin: props2.serviceWorkerOrigin,
               useLsp: true
             })
@@ -228970,7 +229438,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",
@@ -229060,7 +229529,7 @@ const HeaderComponent = () => {
       children: userListStore.getState().userList.map((item, index2) => {
         return /* @__PURE__ */ jsx("div", {
           onClick: () => {
-            shadowUserStore.getState().switchShadowUser(item);
+            shadowUserStore.getState().switchShadowUser(item.userId);
             console.log(shadowUserStore.getState().shadowUser);
           },
           className: "-ml-2.5 z-0 avatar-hover",