@netless/fastboard 0.0.7 → 0.0.11

package/dist/index.es.js

@@ -33,11 +33,12 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { WindowManager } from "@netless/window-manager";
+import { WindowManager, BuiltinApps } from "@netless/window-manager";
 import { WhiteWebSdk, DefaultHotKeys, ApplianceNames, ShapeType, PlayerPhase } from "white-web-sdk";
 import i18next from "i18next";
-import require$$0, { memo, forwardRef, useContext, useCallback, useState, useEffect, useRef, createContext } from "react";
+import React, { useState, useEffect, useCallback, memo, forwardRef, useContext, useRef, createContext } from "react";
 import ReactDOM from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
 import clsx from "clsx";
 import Tippy from "@tippyjs/react";
 import RcSlider from "rc-slider";
@@ -117,6 +118,36 @@ class Lock {
     }
   }
 }
+const SOUP = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+const SOUP_LEN = SOUP.length;
+const ID_LEN = 20;
+const reusedIdCarrier = Array(ID_LEN);
+const genUID = () => {
+  for (let i = 0; i < ID_LEN; i++) {
+    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
+  }
+  return reusedIdCarrier.join("");
+};
+function makeSlideParams(scenes) {
+  const scenesWithoutPPT = [];
+  let taskId = "";
+  let url = "";
+  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
+  for (const { name: name2, ppt } of scenes) {
+    scenesWithoutPPT.push({ name: name2 });
+    if (!ppt || !ppt.src.startsWith("ppt")) {
+      continue;
+    }
+    const match = pptSrcRE.exec(ppt.src);
+    if (!match || !match.groups) {
+      continue;
+    }
+    taskId = match.groups.taskId;
+    url = "https" + match.groups.prefix;
+    break;
+  }
+  return { scenesWithoutPPT, taskId, url };
+}
 const translation$1 = {
   clicker: "clicker",
   selector: "selector",
@@ -240,6 +271,129 @@ async function mountWhiteboard(sdkConfig, joinRoom, managerConfig, language) {
   const i18n = await createI18n({ language });
   return { sdk, room, manager, i18n };
 }
+function useWritable(room) {
+  const [writable, setWritable] = useState(false);
+  useEffect(() => {
+    if (room) {
+      setWritable(room.isWritable);
+      room.isWritable && (room.disableSerialization = false);
+      const updateWritable = () => setWritable(room.isWritable);
+      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
+      return () => {
+        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
+      };
+    }
+  }, [room]);
+  return writable;
+}
+function useBoxState(manager) {
+  const [boxState, setBoxState] = useState();
+  useEffect(() => {
+    if (manager) {
+      setBoxState(manager.boxState);
+      manager.emitter.on("boxStateChange", setBoxState);
+      return () => {
+        manager.emitter.off("boxStateChange", setBoxState);
+      };
+    }
+  }, [manager]);
+  return boxState;
+}
+function useFocusedApp(manager) {
+  const [focused, setFocused] = useState();
+  useEffect(() => {
+    if (manager) {
+      setFocused(manager.focused);
+      manager.emitter.on("focusedChange", setFocused);
+      return () => {
+        manager.emitter.off("focusedChange", setFocused);
+      };
+    }
+  }, [manager]);
+  return focused;
+}
+function useMaximized(manager) {
+  return useBoxState(manager) === "maximized";
+}
+function useHideControls(manager) {
+  const maximized = useMaximized(manager);
+  const focusedApp = useFocusedApp(manager);
+  if (maximized) {
+    if (Object.values(BuiltinApps).some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
+      return "toolbar-only";
+    } else {
+      return true;
+    }
+  }
+  return false;
+}
+function useRoomState(room) {
+  const [memberState, setMemberState] = useState(void 0);
+  useEffect(() => {
+    if (room) {
+      setMemberState(room.state.memberState);
+      const onRoomStateChanged = (diff) => {
+        if (diff.memberState)
+          setMemberState(diff.memberState);
+      };
+      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+      return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+    }
+  }, [room]);
+  return { memberState };
+}
+function useToolbar(room, manager) {
+  const writable = useWritable(room);
+  const { memberState } = useRoomState(room);
+  const cleanCurrentScene = useCallback(() => {
+    if (manager) {
+      manager.mainView.cleanCurrentScene();
+    } else if (room) {
+      room.cleanCurrentScene();
+    }
+  }, [manager, room]);
+  const setAppliance = useCallback((appliance, shape) => {
+    const memberState2 = {
+      currentApplianceName: appliance,
+      shapeType: shape
+    };
+    if (manager) {
+      manager.mainView.setMemberState(memberState2);
+    } else if (room) {
+      room.setMemberState(memberState2);
+    }
+  }, [manager, room]);
+  const setStrokeWidth = useCallback((strokeWidth) => {
+    if (manager) {
+      manager.mainView.setMemberState({ strokeWidth });
+    } else if (room) {
+      room.setMemberState({ strokeWidth });
+    }
+  }, [manager, room]);
+  const setStrokeColor = useCallback((strokeColor) => {
+    if (manager) {
+      manager.mainView.setMemberState({ strokeColor });
+    } else if (room) {
+      room.setMemberState({ strokeColor });
+    }
+  }, [manager, room]);
+  return {
+    writable,
+    memberState,
+    cleanCurrentScene,
+    setAppliance,
+    setStrokeWidth,
+    setStrokeColor
+  };
+}
+const EmptyToolbarHook = {
+  writable: false,
+  memberState: void 0,
+  cleanCurrentScene: noop,
+  setAppliance: noop,
+  setStrokeWidth: noop,
+  setStrokeColor: noop
+};
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /*
@@ -318,7 +472,7 @@ shouldUseNative() ? Object.assign : function(target, source) {
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var f = require$$0, g = 60103;
+var f = React, g = 60103;
 reactJsxRuntime_production_min.Fragment = 60107;
 if (typeof Symbol === "function" && Symbol.for) {
   var h = Symbol.for;
@@ -613,6 +767,32 @@ const Icons$1 = {
   Up: memo(Up),
   Down: memo(Down)
 };
+const ShapesMap = {
+  [ApplianceNames.rectangle]: Icons$1.Rectangle,
+  [ApplianceNames.ellipse]: Icons$1.Circle,
+  [ApplianceNames.straight]: Icons$1.Line,
+  [ApplianceNames.arrow]: Icons$1.Arrow,
+  [ShapeType.Pentagram]: Icons$1.Star,
+  [ShapeType.Rhombus]: Icons$1.Diamond,
+  [ShapeType.Triangle]: Icons$1.Triangle,
+  [ShapeType.SpeechBalloon]: Icons$1.SpeechBalloon
+};
+const ApplianceShapes = [
+  ApplianceNames.rectangle,
+  ApplianceNames.ellipse,
+  ApplianceNames.straight,
+  ApplianceNames.arrow
+];
+const Shapes = [
+  ShapeType.Pentagram,
+  ShapeType.Rhombus,
+  ShapeType.Triangle,
+  ShapeType.SpeechBalloon
+];
+const ItemHeight = 32 + 4;
+const ItemsCount = 8;
+const MaxHeight = ItemHeight * ItemsCount - 4;
+const MinHeight = ItemHeight * 2 - 4;
 const Button$1 = forwardRef((props, ref) => {
   const {
     content,
@@ -655,102 +835,6 @@ function CutLine() {
     className: clsx(`${name$4}-cut-line`, theme)
   });
 }
-function useWritable(room) {
-  const [value, setValue] = useState(false);
-  useEffect(() => {
-    if (room) {
-      const setWritable = () => setValue(room.isWritable);
-      setWritable();
-      room.callbacks.on("onEnableWriteNowChanged", setWritable);
-      return () => room.callbacks.off("onEnableWriteNowChanged", setWritable);
-    }
-  }, [room]);
-  return value;
-}
-function useRoomState(room) {
-  const [memberState, setMemberState] = useState(void 0);
-  useEffect(() => {
-    if (room) {
-      setMemberState(room.state.memberState);
-      const onRoomStateChanged = (diff) => {
-        if (diff.memberState)
-          setMemberState(diff.memberState);
-      };
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-    }
-  }, [room]);
-  return { memberState };
-}
-function useToolbar(room) {
-  const writable = useWritable(room);
-  const { memberState } = useRoomState(room);
-  const cleanCurrentScene = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.cleanCurrentScene();
-    }
-  }, [room]);
-  const setAppliance = useCallback((appliance, shape) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({
-        currentApplianceName: appliance,
-        shapeType: shape
-      });
-    }
-  }, [room]);
-  const setStrokeWidth = useCallback((strokeWidth) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({ strokeWidth });
-    }
-  }, [room]);
-  const setStrokeColor = useCallback((strokeColor) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({ strokeColor });
-    }
-  }, [room]);
-  return {
-    writable,
-    memberState,
-    cleanCurrentScene,
-    setAppliance,
-    setStrokeWidth,
-    setStrokeColor
-  };
-}
-const EmptyToolbarHook = {
-  writable: false,
-  memberState: void 0,
-  cleanCurrentScene: noop,
-  setAppliance: noop,
-  setStrokeWidth: noop,
-  setStrokeColor: noop
-};
-const ShapesMap = {
-  [ApplianceNames.rectangle]: Icons$1.Rectangle,
-  [ApplianceNames.ellipse]: Icons$1.Circle,
-  [ApplianceNames.straight]: Icons$1.Line,
-  [ApplianceNames.arrow]: Icons$1.Arrow,
-  [ShapeType.Pentagram]: Icons$1.Star,
-  [ShapeType.Rhombus]: Icons$1.Diamond,
-  [ShapeType.Triangle]: Icons$1.Triangle,
-  [ShapeType.SpeechBalloon]: Icons$1.SpeechBalloon
-};
-const ApplianceShapes = [
-  ApplianceNames.rectangle,
-  ApplianceNames.ellipse,
-  ApplianceNames.straight,
-  ApplianceNames.arrow
-];
-const Shapes = [
-  ShapeType.Pentagram,
-  ShapeType.Rhombus,
-  ShapeType.Triangle,
-  ShapeType.SpeechBalloon
-];
-const ItemHeight = 32 + 4;
-const ItemsCount = 8;
-const MaxHeight = ItemHeight * ItemsCount - 4;
-const MinHeight = ItemHeight * 2 - 4;
 function UpButton({
   disabled,
   scrollTo
@@ -1295,7 +1379,7 @@ function ShapeShapeButton({
     })
   });
 }
-function Content() {
+const Content = React.memo(() => {
   var _a, _b, _c, _d, _e, _f, _g;
   const app = useInstance();
   const ref = useRef(null);
@@ -1337,7 +1421,7 @@ function Content() {
       disabled: disableScrollUp
     }), /* @__PURE__ */ jsxs("div", {
       ref,
-      className: `${name$4}-section`,
+      className: clsx(`${name$4}-section`),
       style: {
         height: `${sectionHeight}px`,
         overflow: needScroll ? "hidden" : "visible"
@@ -1351,7 +1435,43 @@ function Content() {
       disabled: disableScrollDown
     })]
   });
-}
+});
+var collapsePNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
+var expandPNG = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
+const Mask = React.memo(({
+  toolbar,
+  children
+}) => {
+  const [rootElement] = useState(() => {
+    const element = document.createElement("div");
+    element.style.position = "absolute";
+    return element;
+  });
+  useEffect(() => {
+    if (toolbar && rootElement) {
+      toolbar.appendChild(rootElement);
+    }
+  }, [rootElement, toolbar]);
+  useEffect(() => {
+    if (rootElement && toolbar) {
+      toolbar.appendChild(rootElement);
+      const toolbarRect = toolbar.getBoundingClientRect();
+      const halfHeight = toolbarRect.height / 2 - 31;
+      rootElement.style.top = halfHeight + "px";
+      rootElement.style.left = "41px";
+      rootElement.style.width = "17px";
+      rootElement.style.height = "62px";
+      return () => {
+        toolbar.removeChild(rootElement);
+      };
+    }
+  }, [rootElement, toolbar]);
+  if (rootElement) {
+    return ReactDOM.createPortal(children, rootElement);
+  } else {
+    return null;
+  }
+});
 const ToolbarContext = createContext(__spreadValues({
   theme: "light"
 }, EmptyToolbarHook));
@@ -1360,12 +1480,18 @@ const Toolbar = ({
   theme = "light",
   icons,
   room,
+  manager,
   i18n
 }) => {
   const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room);
-  const toggle = useCallback(() => setExpanded((e) => !e), []);
+  const hook = useToolbar(room, manager);
+  const [toolbar, toolbarRef] = useState(null);
+  const [onHover, setOnHover] = useState(false);
+  const [pointEvents, setPointEvents] = useState(true);
   const disabled = !hook.writable;
+  const toggle = useCallback(() => {
+    setExpanded((e) => !e);
+  }, []);
   return /* @__PURE__ */ jsx(ToolbarContext.Provider, {
     value: __spreadProps(__spreadValues({
       theme,
@@ -1373,32 +1499,108 @@ const Toolbar = ({
     }, hook), {
       i18n
     }),
-    children: /* @__PURE__ */ jsxs("div", {
-      className: clsx(name$4, theme),
-      children: [expanded ? /* @__PURE__ */ jsx(Button$1, {
-        content: i18n == null ? void 0 : i18n.t("collapse"),
-        onClick: toggle,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons$1.Collapse, {
-            theme
-          }),
-          src: disabled ? icons == null ? void 0 : icons.collapseIconDisable : icons == null ? void 0 : icons.collapseIcon
-        })
-      }) : /* @__PURE__ */ jsx(Button$1, {
-        content: i18n == null ? void 0 : i18n.t("expand"),
+    children: /* @__PURE__ */ jsx(AnimatePresence, {
+      children: expanded ? /* @__PURE__ */ jsxs(motion.div, {
+        initial: {
+          x: -100
+        },
+        animate: {
+          x: 0,
+          transition: {
+            duration: 0.5
+          }
+        },
+        ref: toolbarRef,
+        className: clsx(name$4, theme),
+        onPointerEnter: () => {
+          if (expanded) {
+            setOnHover(true);
+          }
+        },
+        onMouseLeave: () => setOnHover(false),
+        exit: {
+          x: -100,
+          transition: {
+            duration: 0.5
+          }
+        },
+        onAnimationStart: () => setPointEvents(false),
+        onAnimationComplete: () => setPointEvents(true),
+        style: {
+          pointerEvents: pointEvents ? "auto" : "none"
+        },
+        children: [/* @__PURE__ */ jsx(Content, {}), expanded && onHover && /* @__PURE__ */ jsx(Mask, {
+          toolbar,
+          children: /* @__PURE__ */ jsx("div", {
+            onClick: toggle,
+            children: /* @__PURE__ */ jsx("img", {
+              draggable: false,
+              className: clsx(`${name$4}-mask-btn`, theme),
+              src: collapsePNG
+            })
+          })
+        })]
+      }, "toolbar") : /* @__PURE__ */ jsx(motion.div, {
+        className: clsx(`${name$4}-expand-btn`, theme),
         onClick: toggle,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons$1.Expand, {
-            theme
+        initial: {
+          x: -100
+        },
+        animate: {
+          x: 0,
+          transition: {
+            duration: 0.5
+          }
+        },
+        children: !expanded && /* @__PURE__ */ jsx(Icon, {
+          fallback: /* @__PURE__ */ jsx("img", {
+            draggable: false,
+            src: expandPNG,
+            className: clsx(`${name$4}-mask-btn`, theme)
           }),
           src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
         })
-      }), expanded && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Content, {})]
-      })]
+      }, "expand")
     })
   });
 };
+function useRedoUndo(room, manager) {
+  const [undoSteps, setUndoSteps] = useState(0);
+  const [redoSteps, setRedoSteps] = useState(0);
+  useEffect(() => {
+    if (manager) {
+      manager.mainView.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      manager.mainView.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+      return () => {
+        manager.mainView.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        manager.mainView.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+    if (room) {
+      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
+      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
+      return () => {
+        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
+        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
+      };
+    }
+  }, [room, manager]);
+  const undo = useCallback(() => {
+    if (manager) {
+      manager.mainView.undo();
+    } else if (room) {
+      room.undo();
+    }
+  }, [manager, room]);
+  const redo = useCallback(() => {
+    if (manager) {
+      manager.mainView.redo();
+    } else if (room) {
+      room.redo();
+    }
+  }, [manager, room]);
+  return { redoSteps, undoSteps, redo, undo };
+}
 function Undo({
   theme = "light",
   active
@@ -1446,6 +1648,7 @@ function Redo({
 const name$3 = "fastboard-redo-undo";
 function RedoUndo({
   room,
+  manager,
   theme = "light",
   undoIcon,
   undoIconDisable,
@@ -1453,24 +1656,13 @@ function RedoUndo({
   redoIconDisable,
   i18n
 }) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-      const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
+  const writable = useWritable(room);
+  const {
+    redoSteps,
+    undoSteps,
+    redo,
+    undo
+  } = useRedoUndo(room, manager);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(name$3, theme),
@@ -1485,7 +1677,7 @@ function RedoUndo({
       children: /* @__PURE__ */ jsx("button", {
         className: clsx(`${name$3}-btn`, "undo", theme),
         disabled: disabled || undoSteps === 0,
-        onClick: useCallback(() => room && room.undo(), [room]),
+        onClick: undo,
         children: /* @__PURE__ */ jsx(Icon, {
           fallback: /* @__PURE__ */ jsx(Undo, {
             theme
@@ -1505,7 +1697,7 @@ function RedoUndo({
       children: /* @__PURE__ */ jsx("button", {
         className: clsx(`${name$3}-btn`, "redo", theme),
         disabled: disabled || redoSteps === 0,
-        onClick: useCallback(() => room && room.redo(), [room]),
+        onClick: redo,
         children: /* @__PURE__ */ jsx(Icon, {
           fallback: /* @__PURE__ */ jsx(Redo, {
             theme
@@ -1517,6 +1709,113 @@ function RedoUndo({
     })]
   });
 }
+const ScalePoints = [
+  0.10737418240000011,
+  0.13421772800000012,
+  0.16777216000000014,
+  0.20971520000000016,
+  0.26214400000000015,
+  0.3276800000000002,
+  0.4096000000000002,
+  0.5120000000000001,
+  0.6400000000000001,
+  0.8,
+  1,
+  1.26,
+  1.5876000000000001,
+  2.000376,
+  2.5204737600000002,
+  3.1757969376000004,
+  4.001504141376,
+  5.041895218133761,
+  6.352787974848539,
+  8.00451284830916,
+  10
+];
+function nextScale(scale, delta) {
+  const { length } = ScalePoints;
+  const last = length - 1;
+  if (scale < ScalePoints[0])
+    return ScalePoints[0];
+  if (scale > ScalePoints[last])
+    return ScalePoints[last];
+  for (let i = 0; i < length; ++i) {
+    const curr = ScalePoints[i];
+    const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
+    const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
+    if (prev <= scale && scale <= next)
+      return ScalePoints[clamp(i + delta, 0, last)];
+  }
+  return 1;
+}
+function useZoomControl(room, manager) {
+  const [scale, setScale] = useState(1);
+  const resetCamera = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+    } else if (room) {
+      const { scenes, index } = room.state.sceneState;
+      if (scenes[index].ppt) {
+        room.scalePptToFit();
+      } else {
+        room.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+      }
+    }
+  }, [room, manager]);
+  const zoomIn = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({
+        scale: nextScale(scale, 1),
+        centerX: 0,
+        centerY: 0
+      });
+    } else if (room) {
+      room.moveCamera({
+        scale: nextScale(scale, 1),
+        centerX: 0,
+        centerY: 0
+      });
+    }
+  }, [room, manager, scale]);
+  const zoomOut = useCallback(() => {
+    if (manager) {
+      manager.mainView.moveCamera({
+        scale: nextScale(scale, -1),
+        centerX: 0,
+        centerY: 0
+      });
+    } else if (room) {
+      room.moveCamera({
+        scale: nextScale(scale, -1),
+        centerX: 0,
+        centerY: 0
+      });
+    }
+  }, [room, manager, scale]);
+  useEffect(() => {
+    if (manager) {
+      setScale(manager.mainView.camera.scale);
+      const onCameraUpdated = ({ scale: scale2 }) => setScale(scale2);
+      manager.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
+      return () => {
+        manager.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
+      };
+    }
+    if (room) {
+      setScale(room.state.cameraState.scale);
+      const onRoomStateChanged = (modifyState) => {
+        if (modifyState.cameraState) {
+          setScale(modifyState.cameraState.scale);
+        }
+      };
+      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+      return () => {
+        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+      };
+    }
+  }, [room, manager]);
+  return { scale, resetCamera, zoomIn, zoomOut };
+}
 function Minus({
   theme = "light",
   active
@@ -1582,25 +1881,6 @@ function Reset({
   });
 }
 const name$2 = "fastboard-zoom-control";
-const ScalePoints = [0.10737418240000011, 0.13421772800000012, 0.16777216000000014, 0.20971520000000016, 0.26214400000000015, 0.3276800000000002, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001, 2.000376, 2.5204737600000002, 3.1757969376000004, 4.001504141376, 5.041895218133761, 6.352787974848539, 8.00451284830916, 10];
-function nextScale(scale, delta) {
-  const {
-    length
-  } = ScalePoints;
-  const last = length - 1;
-  if (scale < ScalePoints[0])
-    return ScalePoints[0];
-  if (scale > ScalePoints[last])
-    return ScalePoints[last];
-  for (let i = 0; i < length; ++i) {
-    const curr = ScalePoints[i];
-    const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
-    const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
-    if (prev <= scale && scale <= next)
-      return ScalePoints[clamp(i + delta, 0, last)];
-  }
-  return 1;
-}
 function ZoomControl({
   room,
   manager,
@@ -1613,100 +1893,13 @@ function ZoomControl({
   plusIconDisable,
   i18n
 }) {
-  const [writable, setWritable] = useState(false);
-  const [scale, setScale] = useState(1);
-  const resetCamera = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: 1,
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        const {
-          scenes,
-          index
-        } = room.state.sceneState;
-        if (scenes[index].ppt) {
-          room.scalePptToFit();
-        } else {
-          room.moveCamera({
-            scale: 1,
-            centerX: 0,
-            centerY: 0
-          });
-        }
-      }
-    }
-  }, [room, manager]);
-  const zoomIn = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: nextScale(scale, 1),
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        room.moveCamera({
-          scale: nextScale(scale, 1),
-          centerX: 0,
-          centerY: 0
-        });
-      }
-    }
-  }, [room, manager, scale]);
-  const zoomOut = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: nextScale(scale, -1),
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        room.moveCamera({
-          scale: nextScale(scale, -1),
-          centerX: 0,
-          centerY: 0
-        });
-      }
-    }
-  }, [room, manager, scale]);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setScale(room.state.cameraState.scale);
-    }
-    if (manager) {
-      setScale(manager.mainView.camera.scale);
-    }
-    const onRoomStateChanged = (modifyState) => {
-      if (modifyState.cameraState) {
-        setScale(modifyState.cameraState.scale);
-      }
-    };
-    const onCameraUpdated = ({
-      scale: scale2
-    }) => setScale(scale2);
-    const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      if (manager) {
-        manager.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
-      } else {
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      }
-    }
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager == null ? void 0 : manager.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
-      }
-    };
-  }, [room, manager]);
+  const writable = useWritable(room);
+  const {
+    scale,
+    resetCamera,
+    zoomIn,
+    zoomOut
+  } = useZoomControl(room, manager);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(name$2, theme),
@@ -1779,6 +1972,60 @@ function ZoomControl({
     })]
   });
 }
+function usePageControl(room, manager) {
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageCount, setPageCount] = useState(0);
+  const addPage = useCallback(async () => {
+    if (manager && room) {
+      await manager.switchMainViewToWriter();
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      await manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (!manager && room) {
+      const path = room.state.sceneState.contextPath;
+      room.putScenes(path, [{}], pageIndex + 1);
+      room.setSceneIndex(pageIndex + 1);
+    }
+  }, [room, manager, pageIndex]);
+  const prevPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex - 1);
+    } else if (room) {
+      room.pptPreviousStep();
+    }
+  }, [room, manager, pageIndex]);
+  const nextPage = useCallback(() => {
+    if (manager) {
+      manager.setMainViewSceneIndex(pageIndex + 1);
+    } else if (room) {
+      room.pptNextStep();
+    }
+  }, [room, manager, pageIndex]);
+  useEffect(() => {
+    if (room) {
+      setPageIndex(room.state.sceneState.index);
+      setPageCount(room.state.sceneState.scenes.length);
+      if (manager) {
+        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
+        return () => {
+          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
+        };
+      } else {
+        const onRoomStateChanged = (modifyState) => {
+          if (modifyState.sceneState) {
+            setPageIndex(modifyState.sceneState.index);
+            setPageCount(modifyState.sceneState.scenes.length);
+          }
+        };
+        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
+        return () => {
+          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
+        };
+      }
+    }
+  }, [room, manager]);
+  return { pageIndex, pageCount, prevPage, nextPage, addPage };
+}
 function FilePlus({
   theme = "light",
   active
@@ -1840,71 +2087,14 @@ function PageControl({
   nextIconDisable,
   i18n
 }) {
-  const [writable, setWritable] = useState(false);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageCount, setPageCount] = useState(0);
-  const addPage = useCallback(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-  const prevPage = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex - 1);
-      } else {
-        room.pptPreviousStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-  const nextPage = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex + 1);
-      } else {
-        room.pptNextStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-    }
-    const onRoomStateChanged = (modifyState) => {
-      if (modifyState.sceneState) {
-        setPageIndex(modifyState.sceneState.index);
-        setPageCount(modifyState.sceneState.scenes.length);
-      }
-    };
-    const onMainViewModeChanged = (mode) => {
-      if (room && mode === 0) {
-        setPageIndex(room.state.sceneState.index);
-        setPageCount(room.state.sceneState.scenes.length);
-      }
-    };
-    const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      manager == null ? void 0 : manager.callbacks.on("mainViewModeChange", onMainViewModeChanged);
-    }
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager == null ? void 0 : manager.callbacks.off("mainViewModeChange", onMainViewModeChanged);
-      }
-    };
-  }, [room, manager]);
+  const writable = useWritable(room);
+  const _a = usePageControl(room, manager), {
+    pageIndex,
+    pageCount
+  } = _a, actions = __objRest(_a, [
+    "pageIndex",
+    "pageCount"
+  ]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
     className: clsx(name$1, theme),
@@ -1919,7 +2109,7 @@ function PageControl({
       children: /* @__PURE__ */ jsx("button", {
         className: clsx(`${name$1}-btn`, "prev", theme),
         disabled: disabled || pageIndex === 0,
-        onClick: prevPage,
+        onClick: actions.prevPage,
         children: /* @__PURE__ */ jsx(Icon, {
           fallback: /* @__PURE__ */ jsx(ChevronLeft, {
             theme
@@ -1948,7 +2138,7 @@ function PageControl({
       children: /* @__PURE__ */ jsx("button", {
         className: clsx(`${name$1}-btn`, "next", theme),
         disabled: disabled || pageIndex === pageCount - 1,
-        onClick: nextPage,
+        onClick: actions.nextPage,
         children: /* @__PURE__ */ jsx(Icon, {
           fallback: /* @__PURE__ */ jsx(ChevronRight, {
             theme
@@ -1968,7 +2158,7 @@ function PageControl({
       children: /* @__PURE__ */ jsx("button", {
         className: clsx(`${name$1}-btn`, "add", theme),
         disabled,
-        onClick: addPage,
+        onClick: actions.addPage,
         children: /* @__PURE__ */ jsx(Icon, {
           fallback: /* @__PURE__ */ jsx(FilePlus, {
             theme
@@ -1985,17 +2175,19 @@ function Root({
 }) {
   const [mux] = useState(() => new Lock());
   const useWhiteboard = useCallback((container) => mux.schedule(container ? () => app.mount(container) : () => app.unmount()), [app, mux]);
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true
-  } = app.config.layout || {};
+  const hideControls = useHideControls(app.manager);
+  const showControls = !hideControls;
   const props = {
     room: app.room,
     manager: app.manager,
     i18n: app.i18n
   };
+  const {
+    Toolbar: toolbar = showControls || hideControls === "toolbar-only",
+    RedoUndo: redo_undo = showControls,
+    ZoomControl: zoom_control = showControls,
+    PageControl: page_control = showControls
+  } = app.config.layout || {};
   return /* @__PURE__ */ jsx(Instance.Context.Provider, {
     value: app,
     children: /* @__PURE__ */ jsxs("div", {
@@ -2049,14 +2241,19 @@ class Instance {
     this.accept(essentials);
     this.resolveReady();
   }
-  bindElement(target, collector) {
-    if (this.target && target) {
+  bindElement(target) {
+    if (this.target && this.target !== target) {
       ReactDOM.unmountComponentAtNode(this.target);
     }
     this.target = target;
-    this.collector = collector;
     this.forceUpdate();
   }
+  bindCollector(collector) {
+    this.collector = collector;
+    if (this.manager && collector) {
+      this.manager.bindCollectorContainer(collector);
+    }
+  }
   updateLayout(layout) {
     this.config.layout = layout;
     this.forceUpdate();
@@ -2095,10 +2292,9 @@ class Instance {
     if (!this.manager) {
       throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
     }
+    this.manager.bindContainer(node);
     if (this.collector) {
-      this.manager.bindContainer(node, this.collector);
-    } else {
-      this.manager.bindContainer(node);
+      this.manager.bindCollectorContainer(this.collector);
     }
   }
   async unmount() {
@@ -2135,7 +2331,8 @@ class Instance {
           kind: "Slide",
           options: {
             scenePath: params.scenePath,
-            title: params.title
+            title: params.title,
+            scenes: params.scenes
           },
           attributes: {
             taskId: params.taskId,
@@ -2177,6 +2374,23 @@ class Instance {
       }
     });
   }
+  insertMedia({
+    title,
+    src
+  }) {
+    if (!this.manager) {
+      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
+    }
+    return this.manager.addApp({
+      kind: BuiltinApps.MediaPlayer,
+      options: {
+        title
+      },
+      attributes: {
+        src
+      }
+    });
+  }
   async changeLanguage(language) {
     var _a;
     try {
@@ -2190,13 +2404,11 @@ __publicField(Instance, "Context", createContext(null));
 function useInstance() {
   return useContext(Instance.Context);
 }
-var style = '.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7}.telebox-title{overflow:hidden;margin:0 24px 0 0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{flex:1;height:100%;margin:0 16px 0 -16px;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer}.telebox-titles-tab~.telebox-titles-tab{margin-left:2px}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:.6}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:1em;height:1em}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:40px}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
+var style = '.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;will-change:transform;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7}.telebox-title{overflow:hidden;margin:0 24px 0 0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{flex:1;height:100%;margin:0 16px 0 -16px;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer}.telebox-titles-tab~.telebox-titles-tab{margin-left:2px}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.rc-slider{position:relative;height:14px;padding:5px 0;width:100%;border-radius:6px;touch-action:none;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-rail{position:absolute;width:100%;background-color:#e9e9e9;height:4px;border-radius:6px}.rc-slider-track{position:absolute;left:0;height:4px;border-radius:6px;background-color:#abe2fb}.rc-slider-handle{position:absolute;width:14px;height:14px;cursor:pointer;cursor:-webkit-grab;margin-top:-5px;cursor:grab;border-radius:50%;border:solid 2px #96dbfa;background-color:#fff;touch-action:pan-x}.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging{border-color:#57c5f7;box-shadow:0 0 0 5px #96dbfa}.rc-slider-handle:focus{outline:none}.rc-slider-handle-click-focused:focus{border-color:#96dbfa;box-shadow:unset}.rc-slider-handle:hover{border-color:#57c5f7}.rc-slider-handle:active{border-color:#57c5f7;box-shadow:0 0 5px #57c5f7;cursor:-webkit-grabbing;cursor:grabbing}.rc-slider-mark{position:absolute;top:18px;left:0;width:100%;font-size:12px}.rc-slider-mark-text{position:absolute;display:inline-block;vertical-align:middle;text-align:center;cursor:pointer;color:#999}.rc-slider-mark-text-active{color:#666}.rc-slider-step{position:absolute;width:100%;height:4px;background:transparent}.rc-slider-dot{position:absolute;bottom:-2px;margin-left:-4px;width:8px;height:8px;border:2px solid #e9e9e9;background-color:#fff;cursor:pointer;border-radius:50%;vertical-align:middle}.rc-slider-dot-active{border-color:#96dbfa}.rc-slider-dot-reverse{margin-right:-4px}.rc-slider-disabled{background-color:#e9e9e9}.rc-slider-disabled .rc-slider-track{background-color:#ccc}.rc-slider-disabled .rc-slider-handle,.rc-slider-disabled .rc-slider-dot{border-color:#ccc;box-shadow:none;background-color:#fff;cursor:not-allowed}.rc-slider-disabled .rc-slider-mark-text,.rc-slider-disabled .rc-slider-dot{cursor:not-allowed!important}.rc-slider-vertical{width:14px;height:100%;padding:0 5px}.rc-slider-vertical .rc-slider-rail{height:100%;width:4px}.rc-slider-vertical .rc-slider-track{left:5px;bottom:0;width:4px}.rc-slider-vertical .rc-slider-handle{margin-left:-5px;touch-action:pan-y}.rc-slider-vertical .rc-slider-mark{top:0;left:18px;height:100%}.rc-slider-vertical .rc-slider-step{height:100%;width:4px}.rc-slider-vertical .rc-slider-dot{left:2px;margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:first-child{margin-bottom:-4px}.rc-slider-vertical .rc-slider-dot:last-child{margin-bottom:-4px}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear,.rc-slider-tooltip-zoom-down-leave{animation-duration:.3s;animation-fill-mode:both;display:block!important;animation-play-state:paused}.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active{animation-name:rcSliderTooltipZoomDownIn;animation-play-state:running}.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active{animation-name:rcSliderTooltipZoomDownOut;animation-play-state:running}.rc-slider-tooltip-zoom-down-enter,.rc-slider-tooltip-zoom-down-appear{transform:scale(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}.rc-slider-tooltip-zoom-down-leave{animation-timing-function:cubic-bezier(.755,.05,.855,.06)}@keyframes rcSliderTooltipZoomDownIn{0%{opacity:0;transform-origin:50% 100%;transform:scale(0)}to{transform-origin:50% 100%;transform:scale(1)}}@keyframes rcSliderTooltipZoomDownOut{0%{transform-origin:50% 100%;transform:scale(1)}to{opacity:0;transform-origin:50% 100%;transform:scale(0)}}.rc-slider-tooltip{position:absolute;left:-9999px;top:-9999px;visibility:visible;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip *{box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0)}.rc-slider-tooltip-hidden{display:none}.rc-slider-tooltip-placement-top{padding:4px 0 8px}.rc-slider-tooltip-inner{padding:6px 2px;min-width:24px;height:24px;font-size:12px;line-height:1;color:#fff;text-align:center;text-decoration:none;background-color:#6c6c6c;border-radius:6px;box-shadow:0 0 4px #d9d9d9}.rc-slider-tooltip-arrow{position:absolute;width:0;height:0;border-color:transparent;border-style:solid}.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow{bottom:4px;left:50%;margin-left:-4px;border-width:4px 4px 0;border-top-color:#6c6c6c}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:.6}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:1em;height:1em}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:40px}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.fastboard{width:100%;height:100%;position:relative}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
 applyStyles(style);
 class WhiteboardApp {
   constructor(config) {
     __publicField(this, "_instance");
-    __publicField(this, "_target", null);
-    __publicField(this, "_collector", null);
     this.config = config;
     this._instance = new Instance(config);
   }
@@ -2213,18 +2425,62 @@ class WhiteboardApp {
     return this._instance.i18n;
   }
   get target() {
-    return this._target;
+    return this._instance.target;
   }
   get collector() {
-    return this._collector;
+    return this._instance.collector;
   }
-  bindElement(target, collector) {
-    this._target = target || null;
-    this._collector = collector || null;
-    this._instance.bindElement(this._target, this._collector);
+  bindElement(target) {
+    this._instance.bindElement(target || null);
   }
-  insertDocs(params) {
-    return this._instance.insertDocs(params);
+  bindCollector(collector) {
+    this._instance.bindCollector(collector || null);
+  }
+  get layout() {
+    return this._instance.config.layout;
+  }
+  updateLayout(layout) {
+    this._instance.updateLayout(layout);
+  }
+  insertMedia(params) {
+    this._instance.insertMedia(params);
+  }
+  insertDocs(arg1, arg2) {
+    if (typeof arg1 === "object" && "fileType" in arg1) {
+      return this._instance.insertDocs(arg1);
+    } else if (arg2 && arg2.status !== "Finished") {
+      throw new Error("[WhiteboardApp] cannot insert a converting doc");
+    } else if (arg2 && arg2.progress) {
+      const scenes = arg2.progress.convertedFileList.map((f2, i) => ({
+        name: String(i + 1),
+        ppt: {
+          src: f2.conversionFileUrl,
+          width: f2.width,
+          height: f2.height,
+          previewURL: f2.preview
+        }
+      }));
+      const uid = genUID();
+      const scenePath = `/${arg2.uuid}/${uid}`;
+      const { scenesWithoutPPT, taskId, url } = makeSlideParams(scenes);
+      if (taskId && url) {
+        return this._instance.insertDocs({
+          fileType: "pptx",
+          scenePath,
+          taskId,
+          title: arg1,
+          url,
+          scenes: scenesWithoutPPT
+        });
+      } else {
+        return this._instance.insertDocs({
+          fileType: "pdf",
+          scenePath,
+          scenes,
+          title: arg1
+        });
+      }
+    }
   }
   insertCodeEditor() {
     return this._instance.insertCodeEditor();
@@ -2242,12 +2498,7 @@ class WhiteboardApp {
     return this._instance.dispose();
   }
 }
-const version = "0.0.7";
-const EMPTY_ARRAY = [];
-function useForceUpdate() {
-  const [, forceUpdate_] = useState({});
-  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
-}
+const version = "0.0.11";
 function useLastValue(value) {
   const ref = useRef(value);
   useEffect(() => {
@@ -2255,7 +2506,12 @@ function useLastValue(value) {
   }, [value]);
   return ref.current;
 }
-function usePlayer(player) {
+const EMPTY_ARRAY = [];
+function useForceUpdate() {
+  const [, forceUpdate_] = useState({});
+  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
+}
+function usePlayerControl(player) {
   const togglePlay = useCallback(() => {
     if (player) {
       switch (player.phase) {
@@ -2314,6 +2570,37 @@ function usePlayer(player) {
     seekToProgressTime
   };
 }
+const Button = forwardRef((props, ref) => {
+  const {
+    theme,
+    content,
+    disabled,
+    active,
+    onClick,
+    interactive,
+    placement = "top",
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(Tippy, {
+    className: "fastboard-tip",
+    content,
+    interactive,
+    theme,
+    disabled,
+    placement,
+    offset: TopOffset,
+    duration: 300,
+    children: /* @__PURE__ */ jsx("button", {
+      ref,
+      className: clsx("fastboard-player-control-btn", theme, {
+        active
+      }),
+      onClick,
+      disabled,
+      children
+    })
+  });
+});
 const Loading = (props) => {
   const stroke = getStroke(props);
   return /* @__PURE__ */ jsx("svg", {
@@ -2349,37 +2636,6 @@ const Icons = {
   Pause: memo(Pause),
   Loading: memo(Loading)
 };
-const Button = forwardRef((props, ref) => {
-  const {
-    theme,
-    content,
-    disabled,
-    active,
-    onClick,
-    interactive,
-    placement = "top",
-    children
-  } = props;
-  return /* @__PURE__ */ jsx(Tippy, {
-    className: "fastboard-tip",
-    content,
-    interactive,
-    theme,
-    disabled,
-    placement,
-    offset: TopOffset,
-    duration: 300,
-    children: /* @__PURE__ */ jsx("button", {
-      ref,
-      className: clsx("fastboard-player-control-btn", theme, {
-        active
-      }),
-      onClick,
-      disabled,
-      children
-    })
-  });
-});
 const name = "fastboard-player-control";
 function PlayerControl(_a) {
   var _b = _a, {
@@ -2394,7 +2650,7 @@ function PlayerControl(_a) {
     "i18n"
   ]);
   const [currentTime, setCurrentTime] = useState(0);
-  const player = usePlayer(player_);
+  const player = usePlayerControl(player_);
   useEffect(() => {
     setCurrentTime(player.currentTime);
   }, [player.currentTime]);
@@ -2500,37 +2756,49 @@ function renderSpeeds({
     }, speed))
   });
 }
-function useFastboard(config) {
-  const [app, setApp] = useState(null);
-  const [currentTarget, ref] = useState(null);
-  const [collector, collectorRef] = useState(null);
+function useCombinedRefs(...refs) {
+  const targetRef = useRef(null);
   useEffect(() => {
-    let isMounted = true;
-    const promise = createWhiteboardApp(config).then((app2) => {
-      if (isMounted)
-        setApp(app2);
-    });
-    return () => {
-      isMounted = false;
-      promise.then(() => app == null ? void 0 : app.dispose());
-    };
-  }, []);
+    for (const ref of refs) {
+      if (!ref)
+        continue;
+      if (typeof ref === "function") {
+        ref(targetRef.current);
+      } else {
+        ref.current = targetRef.current;
+      }
+    }
+  }, [refs]);
+  return targetRef;
+}
+const Fastboard = forwardRef((_c, outerRef) => {
+  var _d = _c, {
+    app
+  } = _d, restProps = __objRest(_d, [
+    "app"
+  ]);
+  const innerRef = useRef(null);
+  const ref = useCombinedRefs(outerRef, innerRef);
+  const previous = useLastValue(app);
   useEffect(() => {
+    if (previous && previous !== app) {
+      previous.bindElement(null);
+    }
     if (app) {
-      app.bindElement(currentTarget, collector);
+      app.bindElement(ref.current);
     }
-  }, [app, collector, currentTarget]);
-  return Object.assign([app, ref, collectorRef], {
-    app,
-    ref,
-    collectorRef
-  });
-}
+  }, [app, previous, ref]);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
+    className: "fastboard"
+  }, restProps), {
+    ref
+  }));
+});
 const register = WindowManager.register.bind(WindowManager);
 async function createWhiteboardApp(config) {
   const app = new WhiteboardApp(config);
   await app._instance.readyPromise;
   return app;
 }
-export { PageControl, PlayerControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, useFastboard, version };
+export { Fastboard, PageControl, PlayerControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, usePageControl, usePlayerControl, useRedoUndo, useToolbar, useZoomControl, version };
 //# sourceMappingURL=index.es.js.map