@dao42/d42paas-front 0.7.48 → 0.7.52

package/dist/DaoPaaS.es.js

@@ -15090,9 +15090,13 @@ create$5((set2) => ({
 const shadowUserStore = create$5(persist((set2) => ({
   shadowUser: {},
   switchShadowUser: (id2) => set2(() => {
+    var _a2;
     let user;
     if (id2 !== void 0) {
       user = userListStore.getState().userList.find((user2) => user2.userId === id2);
+      (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("following", {
+        user
+      });
       console.log(`\u5DF2\u5207\u6362\u81F3\u3010${user.username}\u3011\u89C6\u89D2`);
     } else {
       console.log(`\u5DF2\u9000\u51FA\u8DDF\u968F\u89C6\u89D2`);
@@ -44490,7 +44494,6 @@ const CmdKey = () => {
   const [replayList, setReplayList] = react.exports.useState(null);
   const [hotkeys2, setHotkeys] = react.exports.useState(actions);
   react.exports.useEffect(() => {
-    console.log("leva init");
     if (ninjaKeys.current) {
       ninjaKeys.current.data = hotkeys2;
     }
@@ -44851,7 +44854,6 @@ class DaoPaaS {
   mapRender(components) {
     components == null ? void 0 : components.forEach((arg, _index) => {
       const omitObj = lodash$2.exports.omit(__spreadValues({}, arg), ["item", "container"]);
-      lodash$2.exports.omit(arg, ["item", "container"]);
       switch (arg.item) {
         case "Page":
           this.Page({
@@ -44933,7 +44935,6 @@ 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(LazyTreeComponent, __spreadValues({}, props2))
@@ -174564,8 +174565,8 @@ const FileTree = ({
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "file",
     children: /* @__PURE__ */ jsxs(TreeRootLayout, {
+      className: "tree-root-containe",
       ref: treeRef,
-      className: `tree-root-layout`,
       dropBgColor,
       dropTextColor,
       hoverBgColor,
@@ -174949,13 +174950,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};
       }
     }
   }
@@ -190158,6 +190167,7 @@ class MonacoAdapter {
     action && action.apply(this, args);
   }
   onChange(evt) {
+    console.log("eol", evt.eol);
     if (!evt.changes)
       return;
     if (!this.ignoreNextChange) {
@@ -190170,7 +190180,7 @@ class MonacoAdapter {
           const {
             operation,
             liveOperationCode
-          } = operationFromMonacoChanges(evt, this.liveOperationCode);
+          } = operationFromMonacoChanges(evt, this.liveOperationCode.replace(/\r\n/gim, "\n"));
           this.liveOperationCode = liveOperationCode;
           this.trigger("change", operation);
         } catch (err) {
@@ -220371,214 +220381,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"
+    }
+  };
+};
+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};
     }
-  ],
-  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 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();
@@ -220630,7 +220777,7 @@ const Editor = ({
     setCRDTInfo22(__spreadProps(__spreadValues({}, CRDTInfo22), {
       file: {
         action: "Get",
-        value: model.getValue(),
+        value: model.getValue(editor$1.EndOfLinePreference.LF),
         path: model.uri.path.replace(APP_DIR, "")
       }
     }));
@@ -220680,17 +220827,17 @@ const Editor = ({
     var _a2;
     const applyDoc = oTStore.getState().doc;
     console.log(clientEditor.liveOperationCode);
+    client.applyClient(operation);
     setTimeout(() => {
-      client.applyClient(operation);
       setLocalFile((applyDoc == null ? void 0 : applyDoc.path) ? applyDoc == null ? void 0 : applyDoc.path : "singleFile", {
-        value: editor.getValue(),
+        value: editor.getModel().getValue(editor$1.EndOfLinePreference.LF),
         revision: client.revision
       });
     }, 0);
     if ((_a2 = applyDoc == null ? void 0 : applyDoc.path) == null ? void 0 : _a2.includes("md")) {
-      setMarkdownVal(editor.getValue());
+      setMarkdownVal(editor.getModel().getValue(editor$1.EndOfLinePreference.LF));
     }
-    setKeepVal(editor.getValue());
+    setKeepVal(editor.getModel().getValue(editor$1.EndOfLinePreference.LF));
   };
   const onDidScroll = (evt) => {
     var _a2;
@@ -220868,7 +221015,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))));
@@ -220905,7 +221052,7 @@ const Editor = ({
         setTimeout(() => {
           var _a3, _b3;
           if ((_b3 = (_a3 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a3.path) == null ? void 0 : _b3.includes("md")) {
-            setMarkdownVal(editor.getValue());
+            setMarkdownVal(editor.getModel().getValue(1));
           }
         }, 100);
       }
@@ -221037,8 +221184,8 @@ const Editor = ({
     }), /* @__PURE__ */ jsxs(EditorLayout, {
       style: containerStyle,
       theme,
-      className: `editor-layout flex flex-col`,
-      children: [/* @__PURE__ */ jsx(FileTreeStack, {
+      className: `editor-container flex flex-col`,
+      children: [/* @__PURE__ */ jsx(FileListStack, {
         editor,
         menuStyle,
         switchModel,
@@ -221046,145 +221193,12 @@ const Editor = ({
       }), /* @__PURE__ */ jsx(ContentLayout, {
         ref: divEl,
         userList: userListStore.getState().userList,
-        className: "editor-content flex-1",
+        className: "editor-container flex-1",
         style: editorStyle
       })]
     })]
   });
 };
-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 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
-            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",
@@ -228397,7 +228411,7 @@ const Console = (_e2) => {
   }, [dockerStatus]);
   return /* @__PURE__ */ jsx(FollowLayout, {
     children: /* @__PURE__ */ jsx("div", {
-      className: props2.className ? props2.className : "",
+      className: `console-container ${props2.className ? props2.className : ""}`,
       style: {
         height: "100%",
         width: "100%"
@@ -228420,7 +228434,7 @@ const NavBar = newStyled.div`
   height: 30px;
   display: flex;
   align-items: center;
-
+  background-color: ${(props2) => props2.navBgColor};
   .reload {
     color: ${(props2) => props2.freshIconColor};
   }
@@ -228430,7 +228444,9 @@ const NavBar = newStyled.div`
   }
 
   input {
-    color: ${(props2) => props2.inputColor};
+    color: ${(props2) => props2.inputTextColor};
+    background-color: ${(props2) => props2.inputBgColor};
+    border: ${(props2) => props2.navBorder};
   }
 
   i {
@@ -228460,7 +228476,6 @@ const NavBar = newStyled.div`
     height: 26px;
     line-height: 26px;
     padding: 0 8px;
-    border: 1px solid #adacac;
     border-radius: 5px;
   }
 `;
@@ -228479,14 +228494,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);
@@ -228543,11 +228566,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
@@ -228703,7 +228729,7 @@ const TerminalComponent = (_i) => {
   return /* @__PURE__ */ jsx(FollowLayout, {
     name: "terminal",
     children: /* @__PURE__ */ jsx("div", {
-      className: props2.className ? props2.className : "",
+      className: "terminal-container shell-container",
       id: "terminal",
       style: {
         height: "100%",
@@ -229051,7 +229077,7 @@ const Avatar = (_m) => {
     "user"
   ]);
   return /* @__PURE__ */ jsx(AvatarLayout, __spreadValues({
-    className: "rounded-full motion-safe:hover:scale-110 h-8 w-8 self-center bg-cover bg-no-repeat bg-center border-2",
+    className: "avatar-container rounded-full motion-safe:hover:scale-110 h-8 w-8 self-center bg-cover bg-no-repeat bg-center border-2",
     user
   }, props2));
 };