@dao42/d42paas-front 0.7.51 → 0.7.55

package/dist/DaoPaaS.es.js

@@ -15087,14 +15087,29 @@ create$5((set2) => ({
     syncCursor: arg
   }))
 }));
+const followingUserStore = create$5((set2) => ({
+  followingUsers: [],
+  setFollowingUsers: (arg) => set2(() => ({
+    followingUsers: arg
+  }))
+}));
 const shadowUserStore = create$5(persist((set2) => ({
   shadowUser: {},
   switchShadowUser: (id2) => set2(() => {
+    const followingUser = userStore.getState().userInfo;
+    const io = useOT.getState().socket;
     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`);
+      io == null ? void 0 : io.emit("following", {
+        user,
+        followingUser
+      });
     } else {
+      io == null ? void 0 : io.emit("unFollowing", {
+        followingUser
+      });
       console.log(`\u5DF2\u9000\u51FA\u8DDF\u968F\u89C6\u89D2`);
     }
     return {
@@ -28602,6 +28617,24 @@ const PlaygroundInit = (arg) => {
       })];
       setUserList(userInfoList);
     });
+    io.on("following", (d2) => {
+      const users_server = JSON.parse(d2);
+      const followingUsers = users_server.filter(({
+        user
+      }) => IsMe(user));
+      followingUserStore.getState().setFollowingUsers(followingUsers.map(({
+        followingUser
+      }) => followingUser));
+    });
+    io.on("unFollowing", (d2) => {
+      const {
+        followingUsers,
+        setFollowingUsers
+      } = followingUserStore.getState();
+      const user = JSON.parse(d2);
+      followingUsers.splice(lodash$2.exports.findIndex(followingUsers, (f2) => f2.userId === user.followingUser.userId), 1);
+      setFollowingUsers(followingUsers);
+    });
     io.on("playgroundInfo", (data) => {
       var _a2;
       const {
@@ -44749,9 +44782,11 @@ class DaoPaaS {
   messageAndErrorInjection() {
     dockerState.subscribe((state2) => state2, (pre, next2) => {
       this.trigger(lodash$2.exports.pick(pre, ["dockerStatus"]), lodash$2.exports.pick(next2, ["dockerStatus"]));
+      this.trigger(lodash$2.exports.pick(pre, ["lan"]), 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"]));
+      this.trigger(lodash$2.exports.pick(pre.dockerInfo, ["language"]), lodash$2.exports.pick(next2.dockerInfo, ["language"]));
     });
     ErrorMsgState.subscribe((state2) => state2, (next2, pre) => {
       this.trigger("error", lodash$2.exports.pick(next2, "message"));
@@ -44766,6 +44801,13 @@ class DaoPaaS {
         followingUser: pre.shadowUser
       });
     });
+    followingUserStore.subscribe((next2, pre) => {
+      this.trigger({
+        usersFollowYou: pre.followingUsers
+      }, {
+        usersFollowYou: pre.followingUsers
+      });
+    });
   }
   trigger(_d2, data) {
     if (_d2 === "error") {
@@ -44877,14 +44919,14 @@ class DaoPaaS {
             props: arg.props || omitObj
           });
           break;
-        case "Browser":
-          this.Browser({
+        case "Shell":
+          this.Shell({
             container: arg.container,
             props: arg.props || omitObj
           });
           break;
-        case "Shell":
-          this.Shell({
+        case "Browser":
+          this.Browser({
             container: arg.container,
             props: arg.props || omitObj
           });
@@ -174946,13 +174988,21 @@ const EditorLayout = newStyled.div`
   }
 
   .margin-view-overlays {
-    background-color: ${(props2) => props2.theme.marginViewOverlays};
+    background-color: ${(props2) => props2.theme.marginViewOverlaysColor};
 
     .line-numbers {
-      color: ${(props2) => props2.theme.lineNumbers};
-
+      color: ${(props2) => props2.theme.lineNumbersColor};
+      width: ${(props2) => {
+  var _a2;
+  return (_a2 = props2.theme.lineNumbersWidth) != null ? _a2 : "18px";
+}} !important;
+      left: ${(props2) => {
+  var _a2;
+  return (_a2 = props2.theme.lineNumbersLeft) != null ? _a2 : "36px";
+}} !important;
       &.active-line-number {
-        color: ${(props2) => props2.theme.activeLineNumber};
+        /* color: ${(props2) => props2.theme.activeLineNumberColor}; */
+        color: ${(props2) => props2.theme.activeLineNumberColor};
       }
     }
   }
@@ -220369,214 +220419,351 @@ 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"
+const Dracula = (theme) => {
+  var _a2, _b2, _c2, _d2, _e2, _f2;
+  return {
+    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": (_b2 = (_a2 = theme == null ? void 0 : theme.editor) == null ? void 0 : _a2.foreground) != null ? _b2 : "#f8f8f0",
+      "editor.background": (_d2 = (_c2 = theme == null ? void 0 : theme.editor) == null ? void 0 : _c2.background) != null ? _d2 : "#15171c",
+      "editor.lineHighlightBackground": (_f2 = (_e2 = theme == null ? void 0 : theme.editor) == null ? void 0 : _e2.lineHighlightBackground) != null ? _f2 : "#15171c",
+      "editor.selectionBackground": "#44475a",
+      "editorCursor.foreground": "#f8f8f0",
+      "editorWhitespace.foreground": "#3B3A32",
+      "editorIndentGuide.activeBackground": "#9D550FB0",
+      "editor.selectionHighlightBorder": "#222218"
     }
-  ],
-  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 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: ${(props2) => props2.menuStyle.height};
+  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 FileListStack = ({
+  editor: editor2,
+  switchModel,
+  menuStyle = {
+    backgroundColor: "#005391",
+    textColor: "#fff",
+    hoverBgColor: "rgb(37 45 124 / 80%)",
+    hoverTextColor: "#fff",
+    iconColor: "#fff",
+    hoverIconColor: "#fff",
+    height: "35px"
   }
+}) => {
+  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);
+  const ref = useHorizontalScroll();
+  const closeCurrentFile = (evt, index2) => {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const _fileTreeStackList = [...fileTreeStack];
+    _fileTreeStackList.splice(index2, 1);
+    setFileTreeStack(_fileTreeStackList);
+    if (_fileTreeStackList.length === 0) {
+      switchDoc2({
+        path: "",
+        value: ""
+      });
+      editor2.getModel().setValue("");
+    } else {
+      switchModel(_fileTreeStackList.slice(-1)[0].model);
+    }
+  };
+  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx(FileTreeStackLayout, {
+    menuStyle,
+    id: "menu-list",
+    ref,
+    className: "flex flex-row file-list-container 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
+            flex-row
+            flex-grow-0
+            relative
+            flex-shrink-0
+            justify-center
+            items-center
+            cursor-pointer
+            ${f2.path === (docFile == null ? void 0 : docFile.path) ? "active" : ""}
+          `,
+      onClick: () => {
+        switchModel(f2.model);
+      },
+      onDoubleClick: (evt) => {
+        closeCurrentFile(evt, index2);
+      },
+      onMouseEnter: (evt) => {
+        var _a2, _b2, _c2;
+        (_c2 = (_b2 = (_a2 = evt.currentTarget) == null ? void 0 : _a2.lastElementChild) == null ? void 0 : _b2.classList) == null ? void 0 : _c2.add("hover");
+      },
+      onMouseLeave: (evt) => {
+        var _a2, _b2, _c2;
+        (_c2 = (_b2 = (_a2 = evt.currentTarget) == null ? void 0 : _a2.lastElementChild) == null ? void 0 : _b2.classList) == null ? void 0 : _c2.remove("hover");
+      },
+      children: [f2.label.split("/").slice(-1)[0], /* @__PURE__ */ jsx("i", {
+        className: "d42 close tree-closer absolute",
+        onClick: (evt) => {
+          closeCurrentFile(evt, index2);
+        }
+      })]
+    }, f2.path))
+  }) : null;
 };
+function useHorizontalScroll() {
+  const elRef = react.exports.useRef(null);
+  const el = elRef.current;
+  const onWheel = (e2) => {
+    if (e2.deltaY == 0)
+      return;
+    e2.preventDefault();
+    el == null ? void 0 : el.scrollTo({
+      left: el.scrollLeft + e2.deltaY * 10,
+      behavior: "smooth"
+    });
+  };
+  react.exports.useEffect(() => {
+    if (el) {
+      el.addEventListener("wheel", onWheel);
+      return () => el.removeEventListener("wheel", onWheel);
+    }
+  }, [el]);
+  return elRef;
+}
 const APP_DIR = "/home/runner/app";
 let editor;
 const docServer = new Map();
@@ -220866,7 +221053,7 @@ const Editor = ({
         io == null ? void 0 : io.emit("fileTreeOp", JSON.stringify(payload));
       }
     });
-    editor$1.defineTheme("myCoolTheme", Dracula);
+    editor$1.defineTheme("myCoolTheme", Dracula(theme));
     editor$1.setTheme("myCoolTheme");
     setClientEditor(new MonacoAdapter(editor, serviceWorkerOrigin));
     setOtherClients(new ClientMeta(editor, userList.filter((x2) => !IsMe(x2))));
@@ -221036,7 +221223,7 @@ const Editor = ({
       style: containerStyle,
       theme,
       className: `editor-container flex flex-col`,
-      children: [/* @__PURE__ */ jsx(FileTreeStack, {
+      children: [/* @__PURE__ */ jsx(FileListStack, {
         editor,
         menuStyle,
         switchModel,
@@ -221050,139 +221237,6 @@ 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,
-  switchModel,
-  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);
-  const ref = useHorizontalScroll();
-  const closeCurrentFile = (evt, index2) => {
-    evt.preventDefault();
-    evt.stopPropagation();
-    const _fileTreeStackList = [...fileTreeStack];
-    _fileTreeStackList.splice(index2, 1);
-    setFileTreeStack(_fileTreeStackList);
-    if (_fileTreeStackList.length === 0) {
-      switchDoc2({
-        path: "",
-        value: ""
-      });
-      editor2.getModel().setValue("");
-    } else {
-      switchModel(_fileTreeStackList.slice(-1)[0].model);
-    }
-  };
-  return fileTreeStack && fileTreeStack.length > 0 ? /* @__PURE__ */ jsx(FileTreeStackLayout, {
-    menuStyle,
-    id: "menu-list",
-    ref,
-    className: "flex flex-row file-list-container 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
-            flex-row
-            flex-grow-0
-            relative
-            flex-shrink-0
-            justify-center
-            items-center
-            cursor-pointer
-            ${f2.path === (docFile == null ? void 0 : docFile.path) ? "active" : ""}
-          `,
-      onClick: () => {
-        switchModel(f2.model);
-      },
-      onDoubleClick: (evt) => {
-        closeCurrentFile(evt, index2);
-      },
-      onMouseEnter: (evt) => {
-        var _a2, _b2, _c2;
-        (_c2 = (_b2 = (_a2 = evt.currentTarget) == null ? void 0 : _a2.lastElementChild) == null ? void 0 : _b2.classList) == null ? void 0 : _c2.add("hover");
-      },
-      onMouseLeave: (evt) => {
-        var _a2, _b2, _c2;
-        (_c2 = (_b2 = (_a2 = evt.currentTarget) == null ? void 0 : _a2.lastElementChild) == null ? void 0 : _b2.classList) == null ? void 0 : _c2.remove("hover");
-      },
-      children: [f2.label.split("/").slice(-1)[0], /* @__PURE__ */ jsx("i", {
-        className: "d42 close tree-closer absolute",
-        onClick: (evt) => {
-          closeCurrentFile(evt, index2);
-        }
-      })]
-    }, f2.path))
-  }) : null;
-};
-function useHorizontalScroll() {
-  const elRef = react.exports.useRef(null);
-  const el = elRef.current;
-  const onWheel = (e2) => {
-    if (e2.deltaY == 0)
-      return;
-    e2.preventDefault();
-    el == null ? void 0 : el.scrollTo({
-      left: el.scrollLeft + e2.deltaY * 10,
-      behavior: "smooth"
-    });
-  };
-  react.exports.useEffect(() => {
-    if (el) {
-      el.addEventListener("wheel", onWheel);
-      return () => el.removeEventListener("wheel", onWheel);
-    }
-  }, [el]);
-  return elRef;
-}
 var index$4 = /* @__PURE__ */ Object.freeze({
   __proto__: null,
   [Symbol.toStringTag]: "Module",
@@ -228418,7 +228472,7 @@ const NavBar = newStyled.div`
   height: 30px;
   display: flex;
   align-items: center;
-
+  background-color: ${(props2) => props2.navBgColor};
   .reload {
     color: ${(props2) => props2.freshIconColor};
   }
@@ -228428,7 +228482,9 @@ const NavBar = newStyled.div`
   }
 
   input {
-    color: ${(props2) => props2.inputColor};
+    color: ${(props2) => props2.inputTextColor};
+    background-color: ${(props2) => props2.inputBgColor};
+    border: ${(props2) => props2.navBorder};
   }
 
   i {
@@ -228458,7 +228514,6 @@ const NavBar = newStyled.div`
     height: 26px;
     line-height: 26px;
     padding: 0 8px;
-    border: 1px solid #adacac;
     border-radius: 5px;
   }
 `;
@@ -228477,14 +228532,22 @@ const StopMask = newStyled.div`
 const OutputBrowser = (_g2) => {
   var _h2 = _g2, {
     showURL = false,
-    freshIconColor = "#00bcd4",
-    inputColor = "#adacac",
-    openIconColor = "#adacac"
+    bgColor = "#f2f2f2",
+    freshIconColor = "#0487D9",
+    inputTextColor = "#0487D9",
+    openIconColor = "#0487D9",
+    inputBgColor = "#000",
+    navBgColor = "#000",
+    navBorder = "0 solid transparent"
   } = _h2, props2 = __objRest(_h2, [
     "showURL",
+    "bgColor",
     "freshIconColor",
-    "inputColor",
-    "openIconColor"
+    "inputTextColor",
+    "openIconColor",
+    "inputBgColor",
+    "navBgColor",
+    "navBorder"
   ]);
   var _a2;
   const pStatus = oTStore((state2) => state2.playgroundStatus);
@@ -228541,11 +228604,14 @@ const OutputBrowser = (_g2) => {
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "browser",
     children: /* @__PURE__ */ jsxs(BrowserLayout, {
-      className: "w-full h-full",
+      className: "browser-container w-full h-full",
       children: [showURL ? /* @__PURE__ */ jsxs(NavBar, {
+        navBgColor,
         freshIconColor,
-        inputColor,
+        inputTextColor,
+        inputBgColor,
         openIconColor,
+        navBorder,
         children: [/* @__PURE__ */ jsx("i", {
           className: "d42 text-xl reload cursor-pointer",
           onClick: onRefresh