@dao42/d42paas-front 0.8.1 → 0.8.3

package/dist/DaoPaaS.es.js

@@ -9287,223 +9287,6 @@ const emitFollowingEditorScroll = (editorScroll) => {
     (_a2 = useOT.getState().socket) == null ? void 0 : _a2.emit("followingEditorScroll", editorScroll);
   }
 };
-const instanceOfAny = (object, constructors) => constructors.some((c2) => object instanceof c2);
-let idbProxyableTypes;
-let cursorAdvanceMethods;
-function getIdbProxyableTypes() {
-  return idbProxyableTypes || (idbProxyableTypes = [
-    IDBDatabase,
-    IDBObjectStore,
-    IDBIndex,
-    IDBCursor,
-    IDBTransaction
-  ]);
-}
-function getCursorAdvanceMethods() {
-  return cursorAdvanceMethods || (cursorAdvanceMethods = [
-    IDBCursor.prototype.advance,
-    IDBCursor.prototype.continue,
-    IDBCursor.prototype.continuePrimaryKey
-  ]);
-}
-const cursorRequestMap = /* @__PURE__ */ new WeakMap();
-const transactionDoneMap = /* @__PURE__ */ new WeakMap();
-const transactionStoreNamesMap = /* @__PURE__ */ new WeakMap();
-const transformCache = /* @__PURE__ */ new WeakMap();
-const reverseTransformCache = /* @__PURE__ */ new WeakMap();
-function promisifyRequest(request) {
-  const promise = new Promise((resolve2, reject) => {
-    const unlisten = () => {
-      request.removeEventListener("success", success);
-      request.removeEventListener("error", error2);
-    };
-    const success = () => {
-      resolve2(wrap(request.result));
-      unlisten();
-    };
-    const error2 = () => {
-      reject(request.error);
-      unlisten();
-    };
-    request.addEventListener("success", success);
-    request.addEventListener("error", error2);
-  });
-  promise.then((value) => {
-    if (value instanceof IDBCursor) {
-      cursorRequestMap.set(value, request);
-    }
-  }).catch(() => {
-  });
-  reverseTransformCache.set(promise, request);
-  return promise;
-}
-function cacheDonePromiseForTransaction(tx) {
-  if (transactionDoneMap.has(tx))
-    return;
-  const done = new Promise((resolve2, reject) => {
-    const unlisten = () => {
-      tx.removeEventListener("complete", complete);
-      tx.removeEventListener("error", error2);
-      tx.removeEventListener("abort", error2);
-    };
-    const complete = () => {
-      resolve2();
-      unlisten();
-    };
-    const error2 = () => {
-      reject(tx.error || new DOMException("AbortError", "AbortError"));
-      unlisten();
-    };
-    tx.addEventListener("complete", complete);
-    tx.addEventListener("error", error2);
-    tx.addEventListener("abort", error2);
-  });
-  transactionDoneMap.set(tx, done);
-}
-let idbProxyTraps = {
-  get(target, prop, receiver) {
-    if (target instanceof IDBTransaction) {
-      if (prop === "done")
-        return transactionDoneMap.get(target);
-      if (prop === "objectStoreNames") {
-        return target.objectStoreNames || transactionStoreNamesMap.get(target);
-      }
-      if (prop === "store") {
-        return receiver.objectStoreNames[1] ? void 0 : receiver.objectStore(receiver.objectStoreNames[0]);
-      }
-    }
-    return wrap(target[prop]);
-  },
-  set(target, prop, value) {
-    target[prop] = value;
-    return true;
-  },
-  has(target, prop) {
-    if (target instanceof IDBTransaction && (prop === "done" || prop === "store")) {
-      return true;
-    }
-    return prop in target;
-  }
-};
-function replaceTraps(callback) {
-  idbProxyTraps = callback(idbProxyTraps);
-}
-function wrapFunction(func2) {
-  if (func2 === IDBDatabase.prototype.transaction && !("objectStoreNames" in IDBTransaction.prototype)) {
-    return function(storeNames, ...args) {
-      const tx = func2.call(unwrap(this), storeNames, ...args);
-      transactionStoreNamesMap.set(tx, storeNames.sort ? storeNames.sort() : [storeNames]);
-      return wrap(tx);
-    };
-  }
-  if (getCursorAdvanceMethods().includes(func2)) {
-    return function(...args) {
-      func2.apply(unwrap(this), args);
-      return wrap(cursorRequestMap.get(this));
-    };
-  }
-  return function(...args) {
-    return wrap(func2.apply(unwrap(this), args));
-  };
-}
-function transformCachableValue(value) {
-  if (typeof value === "function")
-    return wrapFunction(value);
-  if (value instanceof IDBTransaction)
-    cacheDonePromiseForTransaction(value);
-  if (instanceOfAny(value, getIdbProxyableTypes()))
-    return new Proxy(value, idbProxyTraps);
-  return value;
-}
-function wrap(value) {
-  if (value instanceof IDBRequest)
-    return promisifyRequest(value);
-  if (transformCache.has(value))
-    return transformCache.get(value);
-  const newValue = transformCachableValue(value);
-  if (newValue !== value) {
-    transformCache.set(value, newValue);
-    reverseTransformCache.set(newValue, value);
-  }
-  return newValue;
-}
-const unwrap = (value) => reverseTransformCache.get(value);
-function openDB(name, version, { blocked, upgrade, blocking, terminated } = {}) {
-  const request = indexedDB.open(name, version);
-  const openPromise = wrap(request);
-  if (upgrade) {
-    request.addEventListener("upgradeneeded", (event) => {
-      upgrade(wrap(request.result), event.oldVersion, event.newVersion, wrap(request.transaction));
-    });
-  }
-  if (blocked)
-    request.addEventListener("blocked", () => blocked());
-  openPromise.then((db2) => {
-    if (terminated)
-      db2.addEventListener("close", () => terminated());
-    if (blocking)
-      db2.addEventListener("versionchange", () => blocking());
-  }).catch(() => {
-  });
-  return openPromise;
-}
-const readMethods = ["get", "getKey", "getAll", "getAllKeys", "count"];
-const writeMethods = ["put", "add", "delete", "clear"];
-const cachedMethods = /* @__PURE__ */ new Map();
-function getMethod(target, prop) {
-  if (!(target instanceof IDBDatabase && !(prop in target) && typeof prop === "string")) {
-    return;
-  }
-  if (cachedMethods.get(prop))
-    return cachedMethods.get(prop);
-  const targetFuncName = prop.replace(/FromIndex$/, "");
-  const useIndex = prop !== targetFuncName;
-  const isWrite = writeMethods.includes(targetFuncName);
-  if (!(targetFuncName in (useIndex ? IDBIndex : IDBObjectStore).prototype) || !(isWrite || readMethods.includes(targetFuncName))) {
-    return;
-  }
-  const method = async function(storeName, ...args) {
-    const tx = this.transaction(storeName, isWrite ? "readwrite" : "readonly");
-    let target2 = tx.store;
-    if (useIndex)
-      target2 = target2.index(args.shift());
-    return (await Promise.all([
-      target2[targetFuncName](...args),
-      isWrite && tx.done
-    ]))[0];
-  };
-  cachedMethods.set(prop, method);
-  return method;
-}
-replaceTraps((oldTraps) => __spreadProps(__spreadValues({}, oldTraps), {
-  get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
-  has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop)
-}));
-const daopaasDB = async () => {
-  return openDB("daopaas", 1, {
-    upgrade(db2) {
-      db2.createObjectStore("crdts");
-      db2.createObjectStore("targetFiles");
-      db2.createObjectStore("originFiles");
-      db2.createObjectStore("users");
-    }
-  });
-};
-async function setReplaySource(val) {
-  daoStore.getState();
-}
-async function getLocalFile(key) {
-  return (await daopaasDB()).get("targetFiles", key);
-}
-async function setLocalFile(key, val) {
-  return (await daopaasDB()).put("targetFiles", val, key);
-}
-async function getLocalReplayFile(key) {
-  return (await daopaasDB()).get("originFiles", key);
-}
-async function setLocalReplayFile(key, val) {
-  return (await daopaasDB()).put("originFiles", val, key);
-}
 const onConnect = () => {
   var _a2;
   let heartbeatInterval = null;
@@ -9640,20 +9423,8 @@ const onLspStatus = () => {
 const onFolderEvent = () => {
   var _a2;
   (_a2 = useOT.getState().socket) == null ? void 0 : _a2.on("folderEvent", async (data) => {
-    var _a3;
     const { setCRDTInfo } = daoStore.getState();
     setCRDTInfo(data);
-    setReplaySource(__spreadProps(__spreadValues({}, data), {
-      event: "file"
-    }));
-    const localReplayFile = await getLocalReplayFile(data.file.path);
-    if (!localReplayFile) {
-      setLocalReplayFile((_a3 = data == null ? void 0 : data.file) == null ? void 0 : _a3.path, {
-        value: data.file.value,
-        revision: 0,
-        path: data.file.path
-      });
-    }
   });
 };
 const onFileContent = () => {
@@ -9663,17 +9434,6 @@ const onFileContent = () => {
     const file = data.file;
     const { agentUsers, agentUserId } = playgroundInfo;
     setCRDTInfo(data);
-    setReplaySource(__spreadProps(__spreadValues({}, data), {
-      event: "file"
-    }));
-    const localReplayFile = await getLocalReplayFile(file.path);
-    if (!localReplayFile) {
-      setLocalReplayFile(file.path, {
-        value: file.value,
-        path: file.path,
-        revision: 0
-      });
-    }
     const currentAgentUser = getCurrentAgentUser();
     if (data.agentUserId === agentUserId || currentAgentUser.followingAgentUserId === data.agentUserId) {
       currentDoc$1.getState().switchDoc(file);
@@ -9741,9 +9501,6 @@ const onConsole = () => {
   const { setCRDTInfo } = daoStore.getState();
   (_a2 = useOT.getState().socket) == null ? void 0 : _a2.on("console", (data) => {
     setCRDTInfo(data);
-    setReplaySource(__spreadProps(__spreadValues({}, data), {
-      event: "console"
-    }));
   });
 };
 const onErrorHandler = () => {
@@ -11127,7 +10884,7 @@ var ThemeContext = /* @__PURE__ */ react.exports.createContext({});
 React$1["useInsertionEffect"] ? React$1["useInsertionEffect"] : function useInsertionEffect(create2) {
   create2();
 };
-var isBrowser = true;
+var isBrowser$3 = true;
 function getRegisteredStyles(registered, registeredStyles, classNames2) {
   var rawClassName = "";
   classNames2.split(" ").forEach(function(className) {
@@ -11141,7 +10898,7 @@ function getRegisteredStyles(registered, registeredStyles, classNames2) {
 }
 var registerStyles = function registerStyles2(cache2, serialized, isStringTag) {
   var className = cache2.key + "-" + serialized.name;
-  if ((isStringTag === false || isBrowser === false) && cache2.registered[className] === void 0) {
+  if ((isStringTag === false || isBrowser$3 === false) && cache2.registered[className] === void 0) {
     cache2.registered[className] = serialized.styles;
   }
 };
@@ -11894,7 +11651,7 @@ const Loading = () => {
   });
 };
 const agentUserColorSetter = (index2) => ["#d904c7", "#49cf5b", "#D9C589", "#F27B13", "#A0D9D9", "#45858C", "#8C311C", "#4A5B8C", "#8C4F2B", "#34401A", "#CAD959", "#0476D9"][index2];
-var index$6 = "";
+var index$7 = "";
 const ignoreReplayerStore = create$2((set) => ({
   ignoreReplayers: [],
   setIgnoreReplayer: (arg) => set(() => ({
@@ -15831,7 +15588,7 @@ var lodash$2 = { exports: {} };
           return apply2(func2, this, otherArgs);
         });
       }
-      function throttle(func2, wait, options) {
+      function throttle2(func2, wait, options) {
         var leading = true, trailing = true;
         if (typeof func2 != "function") {
           throw new TypeError2(FUNC_ERROR_TEXT2);
@@ -15849,7 +15606,7 @@ var lodash$2 = { exports: {} };
       function unary(func2) {
         return ary(func2, 1);
       }
-      function wrap2(value, wrapper) {
+      function wrap(value, wrapper) {
         return partial(castFunction(wrapper), value);
       }
       function castArray() {
@@ -16945,7 +16702,7 @@ var lodash$2 = { exports: {} };
       lodash2.takeRightWhile = takeRightWhile;
       lodash2.takeWhile = takeWhile;
       lodash2.tap = tap;
-      lodash2.throttle = throttle;
+      lodash2.throttle = throttle2;
       lodash2.thru = thru;
       lodash2.toArray = toArray;
       lodash2.toPairs = toPairs;
@@ -16969,7 +16726,7 @@ var lodash$2 = { exports: {} };
       lodash2.valuesIn = valuesIn;
       lodash2.without = without;
       lodash2.words = words2;
-      lodash2.wrap = wrap2;
+      lodash2.wrap = wrap;
       lodash2.xor = xor;
       lodash2.xorBy = xorBy;
       lodash2.xorWith = xorWith;
@@ -17314,10 +17071,10 @@ var lodash$2 = { exports: {} };
 })(lodash$2, lodash$2.exports);
 let activeTimer;
 const LazyTreeComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$5;
+  return index$6;
 })).FileTree);
 const LazyEditorComponent$1 = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$4;
+  return index$5;
 })).Editor);
 const LazyConsoleComponent = lazy$2(async () => (await Promise.resolve().then(function() {
   return index$3;
@@ -17552,7 +17309,7 @@ class DaoPaaS {
     return daoStore.getState();
   }
   async init() {
-    const SDK_VERSION = "0.8.1";
+    const SDK_VERSION = "0.8.3";
     const {
       setSocket
     } = useOT.getState();
@@ -17644,6 +17401,12 @@ class DaoPaaS {
     components == null ? void 0 : components.forEach((arg, _index) => {
       const omitObj = lodash$2.exports.omit(__spreadValues({}, arg), ["item", "container"]);
       switch (arg.item) {
+        case "Page":
+          this.Page({
+            container: arg.container,
+            props: arg.props || omitObj
+          });
+          break;
         case "Tree":
           this.Tree({
             container: arg.container,
@@ -153033,7 +152796,7 @@ var ResizeObserverSize = function() {
   }
   return ResizeObserverSize2;
 }();
-var DOMRectReadOnly = function() {
+var DOMRectReadOnly$1 = function() {
   function DOMRectReadOnly2(x2, y2, width, height) {
     this.x = x2;
     this.y = y2;
@@ -153090,11 +152853,11 @@ var isReplacedElement = function(target) {
   }
   return false;
 };
-var global$1 = typeof window !== "undefined" ? window : {};
+var global$2 = typeof window !== "undefined" ? window : {};
 var cache = /* @__PURE__ */ new WeakMap();
 var scrollRegexp = /auto|scroll/;
 var verticalRegexp = /^tb|vertical/;
-var IE = /msie|trident/i.test(global$1.navigator && global$1.navigator.userAgent);
+var IE = /msie|trident/i.test(global$2.navigator && global$2.navigator.userAgent);
 var parseDimension = function(pixel) {
   return parseFloat(pixel || "0");
 };
@@ -153114,7 +152877,7 @@ var zeroBoxes = freeze({
   devicePixelContentBoxSize: size(),
   borderBoxSize: size(),
   contentBoxSize: size(),
-  contentRect: new DOMRectReadOnly(0, 0, 0, 0)
+  contentRect: new DOMRectReadOnly$1(0, 0, 0, 0)
 });
 var calculateBoxSizes = function(target, forceRecalculation) {
   if (forceRecalculation === void 0) {
@@ -153157,7 +152920,7 @@ var calculateBoxSizes = function(target, forceRecalculation) {
     devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
     borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
     contentBoxSize: size(contentWidth, contentHeight, switchSizes),
-    contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
+    contentRect: new DOMRectReadOnly$1(paddingLeft, paddingTop, contentWidth, contentHeight)
   });
   cache.set(target, boxes);
   return boxes;
@@ -153173,7 +152936,7 @@ var calculateBoxSize = function(target, observedBox, forceRecalculation) {
       return contentBoxSize;
   }
 };
-var ResizeObserverEntry = function() {
+var ResizeObserverEntry$1 = function() {
   function ResizeObserverEntry2(target) {
     var boxes = calculateBoxSizes(target);
     this.target = target;
@@ -153205,7 +152968,7 @@ var broadcastActiveObservations = function() {
     }
     var entries = [];
     ro2.activeTargets.forEach(function processTarget(ot2) {
-      var entry = new ResizeObserverEntry(ot2.target);
+      var entry = new ResizeObserverEntry$1(ot2.target);
       var targetDepth = calculateDepthForNode(ot2.target);
       entries.push(entry);
       ot2.lastReportedSize = calculateBoxSize(ot2.target, ot2.observedBox);
@@ -153354,7 +153117,7 @@ var Scheduler = function() {
     var cb2 = function() {
       return _this.observer && _this.observer.observe(document.body, observerConfig);
     };
-    document.body ? cb2() : global$1.addEventListener("DOMContentLoaded", cb2);
+    document.body ? cb2() : global$2.addEventListener("DOMContentLoaded", cb2);
   };
   Scheduler2.prototype.start = function() {
     var _this = this;
@@ -153363,7 +153126,7 @@ var Scheduler = function() {
       this.observer = new MutationObserver(this.listener);
       this.observe();
       events$2.forEach(function(name) {
-        return global$1.addEventListener(name, _this.listener, true);
+        return global$2.addEventListener(name, _this.listener, true);
       });
     }
   };
@@ -153372,7 +153135,7 @@ var Scheduler = function() {
     if (!this.stopped) {
       this.observer && this.observer.disconnect();
       events$2.forEach(function(name) {
-        return global$1.removeEventListener(name, _this.listener, true);
+        return global$2.removeEventListener(name, _this.listener, true);
       });
       this.stopped = true;
     }
@@ -153388,7 +153151,7 @@ var updateCount = function(n2) {
 var skipNotifyOnElement = function(target) {
   return !isSVG(target) && !isReplacedElement(target) && getComputedStyle(target).display === "inline";
 };
-var ResizeObservation = function() {
+var ResizeObservation$1 = function() {
   function ResizeObservation2(target, observedBox) {
     this.target = target;
     this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
@@ -153428,7 +153191,7 @@ var getObservationIndex = function(observationTargets, target) {
   }
   return -1;
 };
-var ResizeObserverController = function() {
+var ResizeObserverController$1 = function() {
   function ResizeObserverController2() {
   }
   ResizeObserverController2.connect = function(resizeObserver, callback) {
@@ -153440,7 +153203,7 @@ var ResizeObserverController = function() {
     var firstObservation = detail.observationTargets.length === 0;
     if (getObservationIndex(detail.observationTargets, target) < 0) {
       firstObservation && resizeObservers.push(detail);
-      detail.observationTargets.push(new ResizeObservation(target, options && options.box));
+      detail.observationTargets.push(new ResizeObservation$1(target, options && options.box));
       updateCount(1);
       scheduler.schedule();
     }
@@ -153465,7 +153228,7 @@ var ResizeObserverController = function() {
   };
   return ResizeObserverController2;
 }();
-var ResizeObserver$1 = function() {
+var ResizeObserver$2 = function() {
   function ResizeObserver2(callback) {
     if (arguments.length === 0) {
       throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
@@ -153473,7 +153236,7 @@ var ResizeObserver$1 = function() {
     if (typeof callback !== "function") {
       throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
     }
-    ResizeObserverController.connect(this, callback);
+    ResizeObserverController$1.connect(this, callback);
   }
   ResizeObserver2.prototype.observe = function(target, options) {
     if (arguments.length === 0) {
@@ -153482,7 +153245,7 @@ var ResizeObserver$1 = function() {
     if (!isElement$2(target)) {
       throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
     }
-    ResizeObserverController.observe(this, target, options);
+    ResizeObserverController$1.observe(this, target, options);
   };
   ResizeObserver2.prototype.unobserve = function(target) {
     if (arguments.length === 0) {
@@ -153491,10 +153254,10 @@ var ResizeObserver$1 = function() {
     if (!isElement$2(target)) {
       throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
     }
-    ResizeObserverController.unobserve(this, target);
+    ResizeObserverController$1.unobserve(this, target);
   };
   ResizeObserver2.prototype.disconnect = function() {
-    ResizeObserverController.disconnect(this);
+    ResizeObserverController$1.disconnect(this);
   };
   ResizeObserver2.toString = function() {
     return "function ResizeObserver () { [polyfill code] }";
@@ -154237,7 +154000,7 @@ var usePosition = function usePosition2(props, ref) {
       return updatePosition(true, true);
     });
     if (overlay) {
-      overlayResizeObserver.current = new ResizeObserver$1(function() {
+      overlayResizeObserver.current = new ResizeObserver$2(function() {
         return updatePosition(true, true);
       });
       overlayResizeObserver.current.observe(overlay);
@@ -159276,7 +159039,7 @@ const FileTree = ({
     })]
   });
 };
-var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var index$6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   getStringFromFile,
   FileTree
@@ -160357,7 +160120,7 @@ EventEmitter$1.prototype.removeAllListeners = function removeAllListeners(type)
   }
   return this;
 };
-function _listeners(target, type, unwrap2) {
+function _listeners(target, type, unwrap) {
   var events2 = target._events;
   if (events2 === void 0)
     return [];
@@ -160365,8 +160128,8 @@ function _listeners(target, type, unwrap2) {
   if (evlistener === void 0)
     return [];
   if (typeof evlistener === "function")
-    return unwrap2 ? [evlistener.listener || evlistener] : [evlistener];
-  return unwrap2 ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
+    return unwrap ? [evlistener.listener || evlistener] : [evlistener];
+  return unwrap ? unwrapListeners(evlistener) : arrayClone(evlistener, evlistener.length);
 }
 EventEmitter$1.prototype.listeners = function listeners(type) {
   return _listeners(this, type, true);
@@ -164600,7 +164363,7 @@ function __values$1(o) {
     }
   };
 }
-function __read(o, n2) {
+function __read$2(o, n2) {
   var m2 = typeof Symbol === "function" && o[Symbol.iterator];
   if (!m2)
     return o;
@@ -164623,7 +164386,7 @@ function __read(o, n2) {
 }
 function __spread() {
   for (var ar = [], i = 0; i < arguments.length; i++)
-    ar = ar.concat(__read(arguments[i]));
+    ar = ar.concat(__read$2(arguments[i]));
   return ar;
 }
 var Event = function() {
@@ -177548,10 +177311,6 @@ const Editor = ({
     var _a2;
     const applyDoc = currentDoc$1.getState().doc;
     client.applyClient(operation);
-    setLocalFile((applyDoc == null ? void 0 : applyDoc.path) ? applyDoc == null ? void 0 : applyDoc.path : "singleFile", {
-      value: editor.getModel().getValue(editor$1.EndOfLinePreference.LF),
-      revision: client.revision
-    });
     if ((_a2 = applyDoc == null ? void 0 : applyDoc.path) == null ? void 0 : _a2.includes("md")) {
       setMarkdownVal(editor.getModel().getValue(editor$1.EndOfLinePreference.LF));
     }
@@ -177672,10 +177431,6 @@ const Editor = ({
               revision: client.revision,
               value: file2.value
             });
-            daoStore.getState().amDoing !== "replaying" && setLocalFile(file2 == null ? void 0 : file2.path, {
-              value: file2.value,
-              revision: client.revision
-            });
           }
         }, true);
       }
@@ -177762,7 +177517,7 @@ const Editor = ({
   }, [clientEditor]);
   react.exports.useEffect(() => {
     io == null ? void 0 : io.on("editFile", async (d2) => {
-      var _a2, _b2, _c2;
+      var _a2, _b2;
       const _d2 = d2;
       if ((_b2 = editor == null ? void 0 : editor.getModel()) == null ? void 0 : _b2.uri.path.includes((_a2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a2.path)) {
         client.applyServer(TextOperation.fromJSON(_d2.editor.operation));
@@ -177782,33 +177537,15 @@ const Editor = ({
         }, 100);
       }
       setCRDTInfo(_d2);
-      setReplaySource(__spreadProps(__spreadValues({}, _d2), {
-        event: "editor",
-        editor: __spreadProps(__spreadValues({}, _d2.editor), {
-          revision: (_c2 = _d2.editor) == null ? void 0 : _c2.revision
-        })
-      }));
     });
     io == null ? void 0 : io.on("serverAck", async (d2) => {
-      var _a2, _b2, _c2, _d3;
+      var _a2, _b2;
       const _d2 = d2;
       client.serverAck();
       setCRDTInfo(_d2);
       docServer.set((_a2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _a2.path, __spreadProps(__spreadValues({}, docServer.get((_b2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _b2.path)), {
         operation: client.operation
       }));
-      const file2 = await getLocalReplayFile(_d2.file.path);
-      setLocalReplayFile((_c2 = _d2 == null ? void 0 : _d2.file) == null ? void 0 : _c2.path, {
-        value: file2.value,
-        revision: file2.revision + 1,
-        path: _d2.file.path
-      });
-      setReplaySource(__spreadProps(__spreadValues({}, _d2), {
-        event: "editor",
-        editor: __spreadProps(__spreadValues({}, _d2.editor), {
-          revision: (_d3 = _d2.editor) == null ? void 0 : _d3.revision
-        })
-      }));
       return;
     });
     io == null ? void 0 : io.on("selection", async (_d2) => {
@@ -177877,14 +177614,7 @@ const Editor = ({
     APP_DIR = (_a2 = dockerInfo == null ? void 0 : dockerInfo.lspRoot) != null ? _a2 : "";
   }, [dockerInfo == null ? void 0 : dockerInfo.lspRoot]);
   react.exports.useEffect(() => {
-    const {
-      amDoing: amDoing2
-    } = daoStore.getState();
-    if (amDoing2 === "replaying") {
-      getLocalFile(CRDTInfo.file.path).then((d2) => {
-        editor.setValue(d2.value);
-      });
-    }
+    daoStore.getState();
   }, [CRDTInfo]);
   react.exports.useEffect(() => {
   }, [fileTree]);
@@ -177922,7 +177652,7 @@ const Editor = ({
     })]
   });
 };
-var index$4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+var index$5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   Editor
 }, Symbol.toStringTag, { value: "Module" }));
@@ -185065,6 +184795,645 @@ var xterm = { exports: {} };
     })();
   });
 })(xterm);
+function depsAreSame(oldDeps, deps) {
+  if (oldDeps === deps)
+    return true;
+  for (var i = 0; i < oldDeps.length; i++) {
+    if (!Object.is(oldDeps[i], deps[i]))
+      return false;
+  }
+  return true;
+}
+function useLatest(value) {
+  var ref = react.exports.useRef(value);
+  ref.current = value;
+  return ref;
+}
+var useUnmount = function useUnmount2(fn) {
+  var fnRef = useLatest(fn);
+  react.exports.useEffect(function() {
+    return function() {
+      fnRef.current();
+    };
+  }, []);
+};
+var useUnmount$1 = useUnmount;
+var isBrowser$1 = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+var isBrowser$2 = isBrowser$1;
+function getTargetElement(target, defaultElement) {
+  if (!isBrowser$2) {
+    return void 0;
+  }
+  if (!target) {
+    return defaultElement;
+  }
+  var targetElement;
+  if (typeof target === "function") {
+    targetElement = target();
+  } else if ("current" in target) {
+    targetElement = target.current;
+  } else {
+    targetElement = target;
+  }
+  return targetElement;
+}
+var createEffectWithTarget = function createEffectWithTarget2(useEffectType) {
+  var useEffectWithTarget2 = function useEffectWithTarget3(effect, deps, target) {
+    var hasInitRef = react.exports.useRef(false);
+    var lastElementRef = react.exports.useRef([]);
+    var lastDepsRef = react.exports.useRef([]);
+    var unLoadRef = react.exports.useRef();
+    useEffectType(function() {
+      var _a2;
+      var targets = Array.isArray(target) ? target : [target];
+      var els = targets.map(function(item) {
+        return getTargetElement(item);
+      });
+      if (!hasInitRef.current) {
+        hasInitRef.current = true;
+        lastElementRef.current = els;
+        lastDepsRef.current = deps;
+        unLoadRef.current = effect();
+        return;
+      }
+      if (els.length !== lastElementRef.current.length || !depsAreSame(els, lastElementRef.current) || !depsAreSame(deps, lastDepsRef.current)) {
+        (_a2 = unLoadRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(unLoadRef);
+        lastElementRef.current = els;
+        lastDepsRef.current = deps;
+        unLoadRef.current = effect();
+      }
+    });
+    useUnmount$1(function() {
+      var _a2;
+      (_a2 = unLoadRef.current) === null || _a2 === void 0 ? void 0 : _a2.call(unLoadRef);
+      hasInitRef.current = false;
+    });
+  };
+  return useEffectWithTarget2;
+};
+var createEffectWithTarget$1 = createEffectWithTarget;
+var useEffectWithTarget$1 = createEffectWithTarget$1(react.exports.useEffect);
+var useEffectWithTarget$2 = useEffectWithTarget$1;
+var __read$1 = globalThis && globalThis.__read || function(o, n2) {
+  var m2 = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m2)
+    return o;
+  var i = m2.call(o), r2, ar = [], e2;
+  try {
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done) {
+      ar.push(r2.value);
+    }
+  } catch (error2) {
+    e2 = {
+      error: error2
+    };
+  } finally {
+    try {
+      if (r2 && !r2.done && (m2 = i["return"]))
+        m2.call(i);
+    } finally {
+      if (e2)
+        throw e2.error;
+    }
+  }
+  return ar;
+};
+function useRafState(initialState2) {
+  var ref = react.exports.useRef(0);
+  var _a2 = __read$1(react.exports.useState(initialState2), 2), state = _a2[0], setState = _a2[1];
+  var setRafState = react.exports.useCallback(function(value) {
+    cancelAnimationFrame(ref.current);
+    ref.current = requestAnimationFrame(function() {
+      setState(value);
+    });
+  }, []);
+  useUnmount$1(function() {
+    cancelAnimationFrame(ref.current);
+  });
+  return [state, setRafState];
+}
+var MapShim = function() {
+  if (typeof Map !== "undefined") {
+    return Map;
+  }
+  function getIndex(arr, key) {
+    var result = -1;
+    arr.some(function(entry, index2) {
+      if (entry[0] === key) {
+        result = index2;
+        return true;
+      }
+      return false;
+    });
+    return result;
+  }
+  return function() {
+    function class_1() {
+      this.__entries__ = [];
+    }
+    Object.defineProperty(class_1.prototype, "size", {
+      get: function() {
+        return this.__entries__.length;
+      },
+      enumerable: true,
+      configurable: true
+    });
+    class_1.prototype.get = function(key) {
+      var index2 = getIndex(this.__entries__, key);
+      var entry = this.__entries__[index2];
+      return entry && entry[1];
+    };
+    class_1.prototype.set = function(key, value) {
+      var index2 = getIndex(this.__entries__, key);
+      if (~index2) {
+        this.__entries__[index2][1] = value;
+      } else {
+        this.__entries__.push([key, value]);
+      }
+    };
+    class_1.prototype.delete = function(key) {
+      var entries = this.__entries__;
+      var index2 = getIndex(entries, key);
+      if (~index2) {
+        entries.splice(index2, 1);
+      }
+    };
+    class_1.prototype.has = function(key) {
+      return !!~getIndex(this.__entries__, key);
+    };
+    class_1.prototype.clear = function() {
+      this.__entries__.splice(0);
+    };
+    class_1.prototype.forEach = function(callback, ctx) {
+      if (ctx === void 0) {
+        ctx = null;
+      }
+      for (var _i = 0, _a2 = this.__entries__; _i < _a2.length; _i++) {
+        var entry = _a2[_i];
+        callback.call(ctx, entry[1], entry[0]);
+      }
+    };
+    return class_1;
+  }();
+}();
+var isBrowser = typeof window !== "undefined" && typeof document !== "undefined" && window.document === document;
+var global$1 = function() {
+  if (typeof global !== "undefined" && global.Math === Math) {
+    return global;
+  }
+  if (typeof self !== "undefined" && self.Math === Math) {
+    return self;
+  }
+  if (typeof window !== "undefined" && window.Math === Math) {
+    return window;
+  }
+  return Function("return this")();
+}();
+var requestAnimationFrame$1 = function() {
+  if (typeof requestAnimationFrame === "function") {
+    return requestAnimationFrame.bind(global$1);
+  }
+  return function(callback) {
+    return setTimeout(function() {
+      return callback(Date.now());
+    }, 1e3 / 60);
+  };
+}();
+var trailingTimeout = 2;
+function throttle(callback, delay) {
+  var leadingCall = false, trailingCall = false, lastCallTime = 0;
+  function resolvePending() {
+    if (leadingCall) {
+      leadingCall = false;
+      callback();
+    }
+    if (trailingCall) {
+      proxy();
+    }
+  }
+  function timeoutCallback() {
+    requestAnimationFrame$1(resolvePending);
+  }
+  function proxy() {
+    var timeStamp = Date.now();
+    if (leadingCall) {
+      if (timeStamp - lastCallTime < trailingTimeout) {
+        return;
+      }
+      trailingCall = true;
+    } else {
+      leadingCall = true;
+      trailingCall = false;
+      setTimeout(timeoutCallback, delay);
+    }
+    lastCallTime = timeStamp;
+  }
+  return proxy;
+}
+var REFRESH_DELAY = 20;
+var transitionKeys = ["top", "right", "bottom", "left", "width", "height", "size", "weight"];
+var mutationObserverSupported = typeof MutationObserver !== "undefined";
+var ResizeObserverController = function() {
+  function ResizeObserverController2() {
+    this.connected_ = false;
+    this.mutationEventsAdded_ = false;
+    this.mutationsObserver_ = null;
+    this.observers_ = [];
+    this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);
+    this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);
+  }
+  ResizeObserverController2.prototype.addObserver = function(observer) {
+    if (!~this.observers_.indexOf(observer)) {
+      this.observers_.push(observer);
+    }
+    if (!this.connected_) {
+      this.connect_();
+    }
+  };
+  ResizeObserverController2.prototype.removeObserver = function(observer) {
+    var observers2 = this.observers_;
+    var index2 = observers2.indexOf(observer);
+    if (~index2) {
+      observers2.splice(index2, 1);
+    }
+    if (!observers2.length && this.connected_) {
+      this.disconnect_();
+    }
+  };
+  ResizeObserverController2.prototype.refresh = function() {
+    var changesDetected = this.updateObservers_();
+    if (changesDetected) {
+      this.refresh();
+    }
+  };
+  ResizeObserverController2.prototype.updateObservers_ = function() {
+    var activeObservers = this.observers_.filter(function(observer) {
+      return observer.gatherActive(), observer.hasActive();
+    });
+    activeObservers.forEach(function(observer) {
+      return observer.broadcastActive();
+    });
+    return activeObservers.length > 0;
+  };
+  ResizeObserverController2.prototype.connect_ = function() {
+    if (!isBrowser || this.connected_) {
+      return;
+    }
+    document.addEventListener("transitionend", this.onTransitionEnd_);
+    window.addEventListener("resize", this.refresh);
+    if (mutationObserverSupported) {
+      this.mutationsObserver_ = new MutationObserver(this.refresh);
+      this.mutationsObserver_.observe(document, {
+        attributes: true,
+        childList: true,
+        characterData: true,
+        subtree: true
+      });
+    } else {
+      document.addEventListener("DOMSubtreeModified", this.refresh);
+      this.mutationEventsAdded_ = true;
+    }
+    this.connected_ = true;
+  };
+  ResizeObserverController2.prototype.disconnect_ = function() {
+    if (!isBrowser || !this.connected_) {
+      return;
+    }
+    document.removeEventListener("transitionend", this.onTransitionEnd_);
+    window.removeEventListener("resize", this.refresh);
+    if (this.mutationsObserver_) {
+      this.mutationsObserver_.disconnect();
+    }
+    if (this.mutationEventsAdded_) {
+      document.removeEventListener("DOMSubtreeModified", this.refresh);
+    }
+    this.mutationsObserver_ = null;
+    this.mutationEventsAdded_ = false;
+    this.connected_ = false;
+  };
+  ResizeObserverController2.prototype.onTransitionEnd_ = function(_a2) {
+    var _b2 = _a2.propertyName, propertyName = _b2 === void 0 ? "" : _b2;
+    var isReflowProperty = transitionKeys.some(function(key) {
+      return !!~propertyName.indexOf(key);
+    });
+    if (isReflowProperty) {
+      this.refresh();
+    }
+  };
+  ResizeObserverController2.getInstance = function() {
+    if (!this.instance_) {
+      this.instance_ = new ResizeObserverController2();
+    }
+    return this.instance_;
+  };
+  ResizeObserverController2.instance_ = null;
+  return ResizeObserverController2;
+}();
+var defineConfigurable = function(target, props) {
+  for (var _i = 0, _a2 = Object.keys(props); _i < _a2.length; _i++) {
+    var key = _a2[_i];
+    Object.defineProperty(target, key, {
+      value: props[key],
+      enumerable: false,
+      writable: false,
+      configurable: true
+    });
+  }
+  return target;
+};
+var getWindowOf = function(target) {
+  var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;
+  return ownerGlobal || global$1;
+};
+var emptyRect = createRectInit(0, 0, 0, 0);
+function toFloat(value) {
+  return parseFloat(value) || 0;
+}
+function getBordersSize(styles) {
+  var positions = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    positions[_i - 1] = arguments[_i];
+  }
+  return positions.reduce(function(size2, position2) {
+    var value = styles["border-" + position2 + "-width"];
+    return size2 + toFloat(value);
+  }, 0);
+}
+function getPaddings(styles) {
+  var positions = ["top", "right", "bottom", "left"];
+  var paddings = {};
+  for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+    var position2 = positions_1[_i];
+    var value = styles["padding-" + position2];
+    paddings[position2] = toFloat(value);
+  }
+  return paddings;
+}
+function getSVGContentRect(target) {
+  var bbox = target.getBBox();
+  return createRectInit(0, 0, bbox.width, bbox.height);
+}
+function getHTMLElementContentRect(target) {
+  var clientWidth = target.clientWidth, clientHeight = target.clientHeight;
+  if (!clientWidth && !clientHeight) {
+    return emptyRect;
+  }
+  var styles = getWindowOf(target).getComputedStyle(target);
+  var paddings = getPaddings(styles);
+  var horizPad = paddings.left + paddings.right;
+  var vertPad = paddings.top + paddings.bottom;
+  var width = toFloat(styles.width), height = toFloat(styles.height);
+  if (styles.boxSizing === "border-box") {
+    if (Math.round(width + horizPad) !== clientWidth) {
+      width -= getBordersSize(styles, "left", "right") + horizPad;
+    }
+    if (Math.round(height + vertPad) !== clientHeight) {
+      height -= getBordersSize(styles, "top", "bottom") + vertPad;
+    }
+  }
+  if (!isDocumentElement(target)) {
+    var vertScrollbar = Math.round(width + horizPad) - clientWidth;
+    var horizScrollbar = Math.round(height + vertPad) - clientHeight;
+    if (Math.abs(vertScrollbar) !== 1) {
+      width -= vertScrollbar;
+    }
+    if (Math.abs(horizScrollbar) !== 1) {
+      height -= horizScrollbar;
+    }
+  }
+  return createRectInit(paddings.left, paddings.top, width, height);
+}
+var isSVGGraphicsElement = function() {
+  if (typeof SVGGraphicsElement !== "undefined") {
+    return function(target) {
+      return target instanceof getWindowOf(target).SVGGraphicsElement;
+    };
+  }
+  return function(target) {
+    return target instanceof getWindowOf(target).SVGElement && typeof target.getBBox === "function";
+  };
+}();
+function isDocumentElement(target) {
+  return target === getWindowOf(target).document.documentElement;
+}
+function getContentRect(target) {
+  if (!isBrowser) {
+    return emptyRect;
+  }
+  if (isSVGGraphicsElement(target)) {
+    return getSVGContentRect(target);
+  }
+  return getHTMLElementContentRect(target);
+}
+function createReadOnlyRect(_a2) {
+  var x2 = _a2.x, y2 = _a2.y, width = _a2.width, height = _a2.height;
+  var Constr = typeof DOMRectReadOnly !== "undefined" ? DOMRectReadOnly : Object;
+  var rect = Object.create(Constr.prototype);
+  defineConfigurable(rect, {
+    x: x2,
+    y: y2,
+    width,
+    height,
+    top: y2,
+    right: x2 + width,
+    bottom: height + y2,
+    left: x2
+  });
+  return rect;
+}
+function createRectInit(x2, y2, width, height) {
+  return { x: x2, y: y2, width, height };
+}
+var ResizeObservation = function() {
+  function ResizeObservation2(target) {
+    this.broadcastWidth = 0;
+    this.broadcastHeight = 0;
+    this.contentRect_ = createRectInit(0, 0, 0, 0);
+    this.target = target;
+  }
+  ResizeObservation2.prototype.isActive = function() {
+    var rect = getContentRect(this.target);
+    this.contentRect_ = rect;
+    return rect.width !== this.broadcastWidth || rect.height !== this.broadcastHeight;
+  };
+  ResizeObservation2.prototype.broadcastRect = function() {
+    var rect = this.contentRect_;
+    this.broadcastWidth = rect.width;
+    this.broadcastHeight = rect.height;
+    return rect;
+  };
+  return ResizeObservation2;
+}();
+var ResizeObserverEntry = function() {
+  function ResizeObserverEntry2(target, rectInit) {
+    var contentRect = createReadOnlyRect(rectInit);
+    defineConfigurable(this, { target, contentRect });
+  }
+  return ResizeObserverEntry2;
+}();
+var ResizeObserverSPI = function() {
+  function ResizeObserverSPI2(callback, controller, callbackCtx) {
+    this.activeObservations_ = [];
+    this.observations_ = new MapShim();
+    if (typeof callback !== "function") {
+      throw new TypeError("The callback provided as parameter 1 is not a function.");
+    }
+    this.callback_ = callback;
+    this.controller_ = controller;
+    this.callbackCtx_ = callbackCtx;
+  }
+  ResizeObserverSPI2.prototype.observe = function(target) {
+    if (!arguments.length) {
+      throw new TypeError("1 argument required, but only 0 present.");
+    }
+    if (typeof Element === "undefined" || !(Element instanceof Object)) {
+      return;
+    }
+    if (!(target instanceof getWindowOf(target).Element)) {
+      throw new TypeError('parameter 1 is not of type "Element".');
+    }
+    var observations = this.observations_;
+    if (observations.has(target)) {
+      return;
+    }
+    observations.set(target, new ResizeObservation(target));
+    this.controller_.addObserver(this);
+    this.controller_.refresh();
+  };
+  ResizeObserverSPI2.prototype.unobserve = function(target) {
+    if (!arguments.length) {
+      throw new TypeError("1 argument required, but only 0 present.");
+    }
+    if (typeof Element === "undefined" || !(Element instanceof Object)) {
+      return;
+    }
+    if (!(target instanceof getWindowOf(target).Element)) {
+      throw new TypeError('parameter 1 is not of type "Element".');
+    }
+    var observations = this.observations_;
+    if (!observations.has(target)) {
+      return;
+    }
+    observations.delete(target);
+    if (!observations.size) {
+      this.controller_.removeObserver(this);
+    }
+  };
+  ResizeObserverSPI2.prototype.disconnect = function() {
+    this.clearActive();
+    this.observations_.clear();
+    this.controller_.removeObserver(this);
+  };
+  ResizeObserverSPI2.prototype.gatherActive = function() {
+    var _this = this;
+    this.clearActive();
+    this.observations_.forEach(function(observation) {
+      if (observation.isActive()) {
+        _this.activeObservations_.push(observation);
+      }
+    });
+  };
+  ResizeObserverSPI2.prototype.broadcastActive = function() {
+    if (!this.hasActive()) {
+      return;
+    }
+    var ctx = this.callbackCtx_;
+    var entries = this.activeObservations_.map(function(observation) {
+      return new ResizeObserverEntry(observation.target, observation.broadcastRect());
+    });
+    this.callback_.call(ctx, entries, ctx);
+    this.clearActive();
+  };
+  ResizeObserverSPI2.prototype.clearActive = function() {
+    this.activeObservations_.splice(0);
+  };
+  ResizeObserverSPI2.prototype.hasActive = function() {
+    return this.activeObservations_.length > 0;
+  };
+  return ResizeObserverSPI2;
+}();
+var observers = typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : new MapShim();
+var ResizeObserver$1 = function() {
+  function ResizeObserver2(callback) {
+    if (!(this instanceof ResizeObserver2)) {
+      throw new TypeError("Cannot call a class as a function.");
+    }
+    if (!arguments.length) {
+      throw new TypeError("1 argument required, but only 0 present.");
+    }
+    var controller = ResizeObserverController.getInstance();
+    var observer = new ResizeObserverSPI(callback, controller, this);
+    observers.set(this, observer);
+  }
+  return ResizeObserver2;
+}();
+[
+  "observe",
+  "unobserve",
+  "disconnect"
+].forEach(function(method) {
+  ResizeObserver$1.prototype[method] = function() {
+    var _a2;
+    return (_a2 = observers.get(this))[method].apply(_a2, arguments);
+  };
+});
+var index$4 = function() {
+  if (typeof global$1.ResizeObserver !== "undefined") {
+    return global$1.ResizeObserver;
+  }
+  return ResizeObserver$1;
+}();
+var useEffectWithTarget = createEffectWithTarget$1(react.exports.useLayoutEffect);
+var useLayoutEffectWithTarget = useEffectWithTarget;
+var useIsomorphicLayoutEffectWithTarget = isBrowser$2 ? useLayoutEffectWithTarget : useEffectWithTarget$2;
+var useIsomorphicLayoutEffectWithTarget$1 = useIsomorphicLayoutEffectWithTarget;
+var __read = globalThis && globalThis.__read || function(o, n2) {
+  var m2 = typeof Symbol === "function" && o[Symbol.iterator];
+  if (!m2)
+    return o;
+  var i = m2.call(o), r2, ar = [], e2;
+  try {
+    while ((n2 === void 0 || n2-- > 0) && !(r2 = i.next()).done) {
+      ar.push(r2.value);
+    }
+  } catch (error2) {
+    e2 = {
+      error: error2
+    };
+  } finally {
+    try {
+      if (r2 && !r2.done && (m2 = i["return"]))
+        m2.call(i);
+    } finally {
+      if (e2)
+        throw e2.error;
+    }
+  }
+  return ar;
+};
+function useSize(target) {
+  var _a2 = __read(useRafState(), 2), state = _a2[0], setState = _a2[1];
+  useIsomorphicLayoutEffectWithTarget$1(function() {
+    var el = getTargetElement(target);
+    if (!el) {
+      return;
+    }
+    var resizeObserver = new index$4(function(entries) {
+      entries.forEach(function(entry) {
+        var _a3 = entry.target, clientWidth = _a3.clientWidth, clientHeight = _a3.clientHeight;
+        setState({
+          width: clientWidth,
+          height: clientHeight
+        });
+      });
+    });
+    resizeObserver.observe(el);
+    return function() {
+      resizeObserver.disconnect();
+    };
+  }, [], target);
+  return state;
+}
 var xtermAddonFit = { exports: {} };
 (function(module2, exports2) {
   !function(e2, t2) {
@@ -185106,6 +185475,7 @@ var xtermAddonFit = { exports: {} };
     })();
   });
 })(xtermAddonFit);
+const xtermFitAddon = new xtermAddonFit.exports.FitAddon();
 const XTerm = (_a2) => {
   var _b2 = _a2, {
     terminal,
@@ -185121,76 +185491,85 @@ const XTerm = (_a2) => {
     width: "100%",
     padding: "5px 5px"
   }, props);
-  const xtermFitAddon = new xtermAddonFit.exports.FitAddon();
   const terminalRef = react.exports.useRef(null);
-  const initTerminalEvents = (term) => {
-    term.onKey(({
-      key,
-      domEvent
-    }) => {
-      let character2 = key;
-      switch (key.charCodeAt(0)) {
-        case 13:
-          break;
-        case 27:
-          switch (domEvent.key) {
-            case "ArrowLeft":
-              if (term.buffer.active.cursorX <= 2) {
-                return;
-              }
-              break;
-          }
-          break;
-        case 8:
-        case 127:
-          if (term.buffer.active.cursorX > 2) {
-            character2 = "\b";
-          }
-          break;
-      }
-      onKey == null ? void 0 : onKey(character2);
-    });
-    term.attachCustomKeyEventHandler((e2) => {
-      var _a3, _b3;
-      const ctrlOrCmd = e2.metaKey || e2.ctrlKey;
-      if (e2.type === "keyup")
-        return false;
-      if (e2.key === "v" && ctrlOrCmd) {
-        if ((_a3 = e2.view) == null ? void 0 : _a3.navigator.clipboard) {
-          (_b3 = e2.view) == null ? void 0 : _b3.navigator.clipboard.readText().then((res) => onKey == null ? void 0 : onKey(res));
-        } else {
-          onKey == null ? void 0 : onKey(e2.target.value);
-        }
-        return false;
-      }
-      return !(e2.key === "r" && ctrlOrCmd);
-    });
-  };
-  const fitTerminal = () => {
-    try {
-      setTimeout(() => {
-        xtermFitAddon.fit();
-      }, 0);
-    } catch (err) {
-      throw err;
-    }
-  };
-  react.exports.useEffect(() => {
-    if (terminal) {
-      terminal.loadAddon(xtermFitAddon);
-      initTerminalEvents(terminal);
-      terminal.open(terminalRef.current);
-      fitTerminal();
-    }
-  }, [terminal]);
+  const {
+    fitTerminal
+  } = useTerminal();
+  useObserverContainerAndResize();
   react.exports.useEffect(() => {
     fitTerminal();
   }, [fitHook]);
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: /* @__PURE__ */ jsx("div", {
-      style: __spreadValues({}, stateStyle),
-      ref: terminalRef
-    })
+  function useTerminal() {
+    const initTerminal = react.exports.useCallback((node2) => {
+      if (node2 == null ? void 0 : node2.parentElement) {
+        terminal.loadAddon(xtermFitAddon);
+        initTerminalEvents(terminal);
+        terminal.open(node2);
+        fitTerminal2();
+      }
+    }, []);
+    const initTerminalEvents = (term) => {
+      term.onKey(({
+        key,
+        domEvent
+      }) => {
+        let character2 = key;
+        switch (key.charCodeAt(0)) {
+          case 13:
+            break;
+          case 27:
+            switch (domEvent.key) {
+              case "ArrowLeft":
+                if (term.buffer.active.cursorX <= 2) {
+                  return;
+                }
+                break;
+            }
+            break;
+          case 8:
+          case 127:
+            if (term.buffer.active.cursorX > 2) {
+              character2 = "\b";
+            }
+            break;
+        }
+        onKey == null ? void 0 : onKey(character2);
+      });
+      term.attachCustomKeyEventHandler((e2) => {
+        var _a3, _b3;
+        const ctrlOrCmd = e2.metaKey || e2.ctrlKey;
+        if (e2.type === "keyup")
+          return false;
+        if (e2.key === "v" && ctrlOrCmd) {
+          if ((_a3 = e2.view) == null ? void 0 : _a3.navigator.clipboard) {
+            (_b3 = e2.view) == null ? void 0 : _b3.navigator.clipboard.readText().then((res) => onKey == null ? void 0 : onKey(res));
+          } else {
+            onKey == null ? void 0 : onKey(e2.target.value);
+          }
+          return false;
+        }
+        return !(e2.key === "r" && ctrlOrCmd);
+      });
+    };
+    const fitTerminal2 = () => {
+      xtermFitAddon.fit();
+    };
+    react.exports.useEffect(() => {
+      initTerminal(terminalRef.current);
+    }, [terminalRef]);
+    return {
+      fitTerminal: fitTerminal2
+    };
+  }
+  function useObserverContainerAndResize() {
+    const size2 = useSize(terminalRef);
+    react.exports.useEffect(() => {
+      fitTerminal();
+    }, [size2]);
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ref: terminalRef,
+    style: stateStyle
   });
 };
 function Console(_c2, ref) {
@@ -185456,11 +185835,13 @@ const TerminalComponent = (_g2) => {
   } = _h2, props = __objRest(_h2, [
     "options"
   ]);
-  const defaultOptions2 = __spreadProps(__spreadValues(__spreadValues({}, options), props), {
-    theme: {
-      background: theme.extend.colors["dao-light-green"]
-    }
-  });
+  const defaultOptions2 = react.exports.useMemo(() => {
+    return __spreadProps(__spreadValues(__spreadValues({}, options), props), {
+      theme: {
+        background: theme.extend.colors["dao-light-green"]
+      }
+    });
+  }, [options, props]);
   const userLabel = document.createElement("div");
   userLabel.classList.add("xterm-helper-user-label");
   const isFocus = useFocusCommponent("Terminal");
@@ -185468,7 +185849,13 @@ const TerminalComponent = (_g2) => {
     agentUserId,
     agentUsers
   } = daoStore((state) => state.playgroundInfo);
-  const [terminal, setTerminal] = react.exports.useState(null);
+  const [terminal] = react.exports.useState(() => {
+    return new xterm.exports.Terminal(__spreadProps(__spreadValues({}, defaultOptions2), {
+      fontSize: 14,
+      lineHeight: 1.5,
+      fontFamily: "UbuntuMono, Ubuntu Mono, courier-new, courier, monospace"
+    }));
+  });
   const {
     CRDTInfo
   } = daoStore((state) => state);
@@ -185497,16 +185884,6 @@ const TerminalComponent = (_g2) => {
     };
     (_b2 = (_a2 = useOT.getState()) == null ? void 0 : _a2.socket) == null ? void 0 : _b2.emit("terminal", crdt);
   };
-  react.exports.useEffect(() => {
-    if (!terminal) {
-      const term = new xterm.exports.Terminal(__spreadProps(__spreadValues({}, defaultOptions2), {
-        fontSize: 14,
-        lineHeight: 1.5,
-        fontFamily: "UbuntuMono, Ubuntu Mono, courier-new, courier, monospace"
-      }));
-      setTerminal(term);
-    }
-  }, []);
   react.exports.useEffect(() => {
     var _a2, _b2, _c2;
     if (!terminal)
@@ -187991,7 +188368,7 @@ const useIndexState = create$2((set) => ({
   })
 }));
 const LazyEditorComponent = lazy$2(async () => (await Promise.resolve().then(function() {
-  return index$4;
+  return index$5;
 })).Editor);
 const MainLayout = newStyled.div`
   width: 100vw;