@netless/fastboard 0.0.1 → 0.0.5

package/dist/index.es.js

@@ -17,12 +17,24 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
 import { WindowManager } from "@netless/window-manager";
-import { WhiteWebSdk, DefaultHotKeys, ApplianceNames, ShapeType } from "white-web-sdk";
+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 ReactDOM from "react-dom";
@@ -67,6 +79,9 @@ WindowManager.register({
     HTML5Codebase: "https://flat-storage-cn-hz.whiteboard.agora.io/GeoGebra/HTML5/5.0/web3d"
   }
 });
+function noop() {
+  return;
+}
 function applyStyles(css) {
   const el = document.createElement("style");
   el.appendChild(document.createTextNode(css));
@@ -74,13 +89,34 @@ function applyStyles(css) {
   return el;
 }
 function clamp(value, min, max) {
-  return Math.min(Math.max(value, min), max);
+  return value < min ? min : value > max ? max : value;
 }
 function isEqualArray(a, b) {
   return a.length === b.length && a.every((e, i) => e === b[i]);
 }
-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:fixed;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}.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 Lock {
+  constructor() {
+    __publicField(this, "running", false);
+    __publicField(this, "nextFn", null);
+    __publicField(this, "step", () => {
+      if (this.nextFn) {
+        const fn = this.nextFn;
+        this.nextFn = null;
+        Promise.resolve(fn()).then(this.step);
+      } else {
+        this.running = false;
+      }
+    });
+  }
+  schedule(fn) {
+    if (this.running) {
+      this.nextFn = fn;
+    } else {
+      this.running = true;
+      Promise.resolve(fn()).then(this.step);
+    }
+  }
+}
 const translation$1 = {
   clicker: "clicker",
   selector: "selector",
@@ -107,7 +143,8 @@ const translation$1 = {
   speechBalloon: "Speech Balloon",
   rectangle: "Rectangle",
   ellipse: "Ellipse",
-  straight: "Straight"
+  straight: "Straight",
+  speed: "Speed"
 };
 var en = {
   translation: translation$1
@@ -139,7 +176,8 @@ const translation = {
   speechBalloon: "\u6C14\u7403",
   rectangle: "\u77E9\u5F62",
   ellipse: "\u692D\u5706",
-  straight: "\u76F4\u7EBF"
+  straight: "\u76F4\u7EBF",
+  speed: "\u901F\u5EA6"
 };
 var zhCN = {
   translation
@@ -181,14 +219,18 @@ async function mountWhiteboard(sdkConfig, joinRoom, managerConfig, language) {
     useMobXState: true
   }));
   ensureWindowManager(joinRoom);
-  const room = await sdk.joinRoom(__spreadProps(__spreadValues({
+  joinRoom = __spreadValues({}, joinRoom);
+  const callbacks = joinRoom.callbacks;
+  delete joinRoom.callbacks;
+  const joinRoomParams = __spreadProps(__spreadValues({
     floatBar: true,
     hotKeys: __spreadValues(__spreadValues({}, DefaultHotKeys), defaultHotKeys)
   }, joinRoom), {
     useMultiViews: true,
     disableNewPencil: false,
     disableMagixEventDispatchLimit: true
-  }));
+  });
+  const room = await sdk.joinRoom(joinRoomParams, callbacks);
   const manager = await WindowManager.mount(__spreadProps(__spreadValues({
     cursor: true,
     debug: false
@@ -198,32 +240,6 @@ async function mountWhiteboard(sdkConfig, joinRoom, managerConfig, language) {
   const i18n = await createI18n({ language });
   return { sdk, room, manager, i18n };
 }
-function noop() {
-  return;
-}
-class Lock {
-  constructor() {
-    __publicField(this, "running", false);
-    __publicField(this, "nextFn", null);
-    __publicField(this, "step", () => {
-      if (this.nextFn) {
-        const fn = this.nextFn;
-        this.nextFn = null;
-        Promise.resolve(fn()).then(this.step);
-      } else {
-        this.running = false;
-      }
-    });
-  }
-  schedule(fn) {
-    if (this.running) {
-      this.nextFn = fn;
-    } else {
-      this.running = true;
-      Promise.resolve(fn()).then(this.step);
-    }
-  }
-}
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /*
@@ -576,7 +592,7 @@ const Up = (props) => {
     })
   });
 };
-const Icons = {
+const Icons$1 = {
   Clicker: memo(Clicker),
   Collapse: memo(Collapse),
   Eraser: memo(Eraser),
@@ -597,7 +613,7 @@ const Icons = {
   Up: memo(Up),
   Down: memo(Down)
 };
-const Button = forwardRef((props, ref) => {
+const Button$1 = forwardRef((props, ref) => {
   const {
     content,
     disabled,
@@ -636,7 +652,7 @@ function CutLine() {
     theme
   } = useContext(ToolbarContext);
   return /* @__PURE__ */ jsx("span", {
-    className: clsx(`${name$3}-cut-line`, theme)
+    className: clsx(`${name$4}-cut-line`, theme)
   });
 }
 function useWritable(room) {
@@ -710,14 +726,14 @@ const EmptyToolbarHook = {
   setStrokeColor: noop
 };
 const ShapesMap = {
-  [ApplianceNames.rectangle]: Icons.Rectangle,
-  [ApplianceNames.ellipse]: Icons.Circle,
-  [ApplianceNames.straight]: Icons.Line,
-  [ApplianceNames.arrow]: Icons.Arrow,
-  [ShapeType.Pentagram]: Icons.Star,
-  [ShapeType.Rhombus]: Icons.Diamond,
-  [ShapeType.Triangle]: Icons.Triangle,
-  [ShapeType.SpeechBalloon]: Icons.SpeechBalloon
+  [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,
@@ -736,21 +752,21 @@ const ItemsCount = 8;
 const MaxHeight = ItemHeight * ItemsCount - 4;
 const MinHeight = ItemHeight * 2 - 4;
 function UpButton({
+  disabled,
   scrollTo
 }) {
   const {
     theme,
-    icons,
-    writable
+    icons
   } = useContext(ToolbarContext);
   const scrollUp = useCallback(() => scrollTo(-ItemHeight), [scrollTo]);
-  const disabled = !writable;
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(Button$1, {
       content: "Up",
+      disabled,
       onClick: scrollUp,
       children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons.Up, {
+        fallback: /* @__PURE__ */ jsx(Icons$1.Up, {
           theme
         }),
         src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
@@ -760,21 +776,21 @@ function UpButton({
   });
 }
 function DownButton({
+  disabled,
   scrollTo
 }) {
   const {
     theme,
-    icons,
-    writable
+    icons
   } = useContext(ToolbarContext);
   const scrollDown = useCallback(() => scrollTo(ItemHeight), [scrollTo]);
-  const disabled = !writable;
   return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Button$1, {
       content: "Down",
+      disabled,
       onClick: scrollDown,
       children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons.Down, {
+        fallback: /* @__PURE__ */ jsx(Icons$1.Down, {
           theme
         }),
         src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
@@ -812,12 +828,12 @@ function ClickerButton() {
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === ApplianceNames.clicker;
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("clicker"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Clicker, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Clicker, {
         theme,
         active
       }),
@@ -841,12 +857,12 @@ function SelectorButton() {
   const active = appliance === ApplianceNames.selector;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToSelector;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("selector"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Selector, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Selector, {
         theme,
         active
       }),
@@ -870,12 +886,12 @@ function EraserButton() {
   const active = appliance === ApplianceNames.eraser;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToEraser;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: renderToolTip(i18n == null ? void 0 : i18n.t("eraser"), shortcut),
     onClick: changeAppliance,
     active,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Eraser, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Eraser, {
         theme,
         active
       }),
@@ -893,11 +909,11 @@ function CleanButton() {
     i18n
   } = useContext(ToolbarContext);
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content: i18n == null ? void 0 : i18n.t("clean"),
     onClick: cleanCurrentScene,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Clean, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Clean, {
         theme
       }),
       src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
@@ -918,11 +934,11 @@ function AppsButton({
     writable
   } = useContext(ToolbarContext);
   const disabled = !writable;
-  const button = /* @__PURE__ */ jsx(Button, {
+  const button = /* @__PURE__ */ jsx(Button$1, {
     content: "Apps",
     onClick,
     children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons.Apps, {
+      fallback: /* @__PURE__ */ jsx(Icons$1.Apps, {
         theme
       }),
       src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
@@ -982,7 +998,7 @@ function AppIcon({
 }) {
   return /* @__PURE__ */ jsxs("span", {
     className: "fastboard-toolbar-app-icon",
-    children: [/* @__PURE__ */ jsx(Button, {
+    children: [/* @__PURE__ */ jsx(Button$1, {
       placement: "top",
       content: title,
       onClick,
@@ -1095,12 +1111,12 @@ function PencilButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: renderToolTip(i18n == null ? void 0 : i18n.t("pencil"), shortcut),
         active,
         onClick: changeAppliance,
         children: [/* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Pencil, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Pencil, {
             theme,
             active
           }),
@@ -1147,12 +1163,12 @@ function TextButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: renderToolTip(i18n == null ? void 0 : i18n.t("text"), shortcut),
         active,
         onClick: changeAppliance,
         children: [/* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Text, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Text, {
             theme,
             active
           }),
@@ -1182,7 +1198,7 @@ function ShapesButton() {
   const shape = memberState == null ? void 0 : memberState.shapeType;
   const key = appliance === ApplianceNames.shape ? shape : appliance;
   const active = ShapeTypes.has(key);
-  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
+  const CurrentIcon = ShapesMap[key] || Icons$1.Rectangle;
   return /* @__PURE__ */ jsx("span", {
     className: "fastboard-toolbar-btn-interactive",
     children: /* @__PURE__ */ jsx(Tippy, {
@@ -1194,7 +1210,7 @@ function ShapesButton() {
       offset: RightOffset,
       arrow: false,
       interactive: true,
-      children: /* @__PURE__ */ jsxs(Button, {
+      children: /* @__PURE__ */ jsxs(Button$1, {
         content: i18n == null ? void 0 : i18n.t("shape"),
         active,
         children: [/* @__PURE__ */ jsx(CurrentIcon, {
@@ -1243,7 +1259,7 @@ function ApplianceShapeButton({
   } = useContext(ToolbarContext);
   const current = memberState == null ? void 0 : memberState.currentApplianceName;
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content,
     disabled,
     placement: "top",
@@ -1268,7 +1284,7 @@ function ShapeShapeButton({
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const current = appliance === ApplianceNames.shape && (memberState == null ? void 0 : memberState.shapeType);
   const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button, {
+  return /* @__PURE__ */ jsx(Button$1, {
     content,
     disabled,
     placement: "top",
@@ -1279,54 +1295,67 @@ function ShapeShapeButton({
     })
   });
 }
-function Content({
-  padding = 16
-}) {
+function Content() {
   var _a, _b, _c, _d, _e, _f, _g;
   const app = useInstance();
   const ref = useRef(null);
+  const [scrollTop, setScrollTop] = useState(0);
   const [parentHeight, setParentHeight] = useState(0);
+  const hasAppButton = (_c = (_b = (_a = app == null ? void 0 : app.config.toolbar) == null ? void 0 : _a.apps) == null ? void 0 : _b.enable) != null ? _c : true;
   const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
   const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
+  const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
+  const disableScrollUp = scrollTop === 0;
+  const disableScrollDown = scrollTop === scrollBuffer;
   const scrollTo = useCallback((height) => {
+    setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
+  }, [scrollBuffer, scrollTop]);
+  useEffect(() => {
     if (ref.current) {
-      ref.current.scrollTop = ref.current.scrollTop + height;
+      ref.current.scrollTop = scrollTop;
     }
-  }, []);
+  }, [scrollTop]);
   useEffect(() => {
     var _a2, _b2;
     const container = (_b2 = (_a2 = ref.current) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b2.parentElement;
     if (container) {
+      const {
+        paddingTop,
+        paddingBottom
+      } = getComputedStyle(container);
+      const padding = parseInt(paddingTop) + parseInt(paddingBottom) || 0;
       const resizeObserver = new ResizeObserver(() => {
-        setParentHeight(container.getBoundingClientRect().height - padding * 2);
+        setParentHeight(container.getBoundingClientRect().height - padding);
       });
       resizeObserver.observe(container);
       return () => resizeObserver.disconnect();
     }
-  }, [padding]);
+  }, []);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [needScroll && /* @__PURE__ */ jsx(UpButton, {
-      scrollTo
+      scrollTo,
+      disabled: disableScrollUp
     }), /* @__PURE__ */ jsxs("div", {
       ref,
-      className: `${name$3}-section`,
+      className: `${name$4}-section`,
       style: {
         height: `${sectionHeight}px`,
         overflow: needScroll ? "hidden" : "visible"
       },
-      children: [/* @__PURE__ */ jsx(ClickerButton, {}), /* @__PURE__ */ jsx(SelectorButton, {}), /* @__PURE__ */ jsx(PencilButton, {}), /* @__PURE__ */ jsx(TextButton, {}), /* @__PURE__ */ jsx(ShapesButton, {}), /* @__PURE__ */ jsx(EraserButton, {}), /* @__PURE__ */ jsx(CleanButton, {}), ((_c = (_b = (_a = app == null ? void 0 : app.config.toolbar) == null ? void 0 : _a.apps) == null ? void 0 : _b.enable) != null ? _c : true) && /* @__PURE__ */ jsx(AppsButton, {
+      children: [/* @__PURE__ */ jsx(ClickerButton, {}), /* @__PURE__ */ jsx(SelectorButton, {}), /* @__PURE__ */ jsx(PencilButton, {}), /* @__PURE__ */ jsx(TextButton, {}), /* @__PURE__ */ jsx(ShapesButton, {}), /* @__PURE__ */ jsx(EraserButton, {}), /* @__PURE__ */ jsx(CleanButton, {}), hasAppButton && /* @__PURE__ */ jsx(AppsButton, {
         content: (_e = (_d = app == null ? void 0 : app.config.toolbar) == null ? void 0 : _d.apps) == null ? void 0 : _e.content,
         onClick: (_g = (_f = app == null ? void 0 : app.config.toolbar) == null ? void 0 : _f.apps) == null ? void 0 : _g.onClick
       })]
     }), needScroll && /* @__PURE__ */ jsx(DownButton, {
-      scrollTo
+      scrollTo,
+      disabled: disableScrollDown
     })]
   });
 }
 const ToolbarContext = createContext(__spreadValues({
   theme: "light"
 }, EmptyToolbarHook));
-const name$3 = "fastboard-toolbar";
+const name$4 = "fastboard-toolbar";
 const Toolbar = ({
   theme = "light",
   icons,
@@ -1345,21 +1374,21 @@ const Toolbar = ({
       i18n
     }),
     children: /* @__PURE__ */ jsxs("div", {
-      className: clsx(name$3, theme),
-      children: [expanded ? /* @__PURE__ */ jsx(Button, {
+      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.Collapse, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Collapse, {
             theme
           }),
           src: disabled ? icons == null ? void 0 : icons.collapseIconDisable : icons == null ? void 0 : icons.collapseIcon
         })
-      }) : /* @__PURE__ */ jsx(Button, {
+      }) : /* @__PURE__ */ jsx(Button$1, {
         content: i18n == null ? void 0 : i18n.t("expand"),
         onClick: toggle,
         children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons.Expand, {
+          fallback: /* @__PURE__ */ jsx(Icons$1.Expand, {
             theme
           }),
           src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
@@ -1414,7 +1443,7 @@ function Redo({
     })
   });
 }
-const name$2 = "fastboard-redo-undo";
+const name$3 = "fastboard-redo-undo";
 function RedoUndo({
   room,
   theme = "light",
@@ -1444,7 +1473,7 @@ function RedoUndo({
   }, [room]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$2, theme),
+    className: clsx(name$3, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("undo"),
@@ -1454,7 +1483,7 @@ function RedoUndo({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "undo", theme),
+        className: clsx(`${name$3}-btn`, "undo", theme),
         disabled: disabled || undoSteps === 0,
         onClick: useCallback(() => room && room.undo(), [room]),
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1474,7 +1503,7 @@ function RedoUndo({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "redo", theme),
+        className: clsx(`${name$3}-btn`, "redo", theme),
         disabled: disabled || redoSteps === 0,
         onClick: useCallback(() => room && room.redo(), [room]),
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1552,7 +1581,7 @@ function Reset({
     })
   });
 }
-const name$1 = "fastboard-zoom-control";
+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 {
@@ -1680,7 +1709,7 @@ function ZoomControl({
   }, [room, manager]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$1, theme),
+    className: clsx(name$2, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("zoomOut"),
@@ -1690,7 +1719,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "minus", theme),
+        className: clsx(`${name$2}-btn`, "minus", theme),
         disabled,
         onClick: zoomOut,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1702,10 +1731,10 @@ function ZoomControl({
         })
       })
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-scale`, theme),
+      className: clsx(`${name$2}-scale`, theme),
       children: Math.ceil(scale * 100)
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-percent`, theme),
+      className: clsx(`${name$2}-percent`, theme),
       children: "%"
     }), /* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
@@ -1716,7 +1745,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "plus", theme),
+        className: clsx(`${name$2}-btn`, "plus", theme),
         disabled,
         onClick: zoomIn,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1736,7 +1765,7 @@ function ZoomControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "reset", theme),
+        className: clsx(`${name$2}-btn`, "reset", theme),
         disabled,
         onClick: resetCamera,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1798,7 +1827,7 @@ function ChevronRight({
     })
   });
 }
-const name = "fastboard-page-control";
+const name$1 = "fastboard-page-control";
 function PageControl({
   room,
   manager,
@@ -1878,7 +1907,7 @@ function PageControl({
   }, [room, manager]);
   const disabled = !writable;
   return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name, theme),
+    className: clsx(name$1, theme),
     children: [/* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
       content: i18n == null ? void 0 : i18n.t("prevPage"),
@@ -1888,7 +1917,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "prev", theme),
+        className: clsx(`${name$1}-btn`, "prev", theme),
         disabled: disabled || pageIndex === 0,
         onClick: prevPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1900,13 +1929,13 @@ function PageControl({
         })
       })
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-page`, theme),
+      className: clsx(`${name$1}-page`, theme),
       children: pageCount === 0 ? "\u2026" : pageIndex + 1
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-slash`, theme),
+      className: clsx(`${name$1}-slash`, theme),
       children: "/"
     }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name}-page-count`, theme),
+      className: clsx(`${name$1}-page-count`, theme),
       children: pageCount
     }), /* @__PURE__ */ jsx(Tippy, {
       className: "fastboard-tip",
@@ -1917,7 +1946,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "next", theme),
+        className: clsx(`${name$1}-btn`, "next", theme),
         disabled: disabled || pageIndex === pageCount - 1,
         onClick: nextPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1937,7 +1966,7 @@ function PageControl({
       duration: 300,
       offset: TopOffset,
       children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name}-btn`, "add", theme),
+        className: clsx(`${name$1}-btn`, "add", theme),
         disabled,
         onClick: addPage,
         children: /* @__PURE__ */ jsx(Icon, {
@@ -1998,7 +2027,6 @@ function Root({
 class Instance {
   constructor(config) {
     __publicField(this, "config");
-    __publicField(this, "target", null);
     __publicField(this, "sdk", null);
     __publicField(this, "room", null);
     __publicField(this, "manager", null);
@@ -2006,10 +2034,10 @@ class Instance {
     __publicField(this, "ready", false);
     __publicField(this, "resolveReady");
     __publicField(this, "readyPromise");
-    this.target = config.target;
+    __publicField(this, "_target", null);
     this.config = config;
     this.refreshReadyPromise();
-    this.forceUpdate();
+    this.initialize();
   }
   refreshReadyPromise() {
     this.readyPromise = new Promise((resolve) => {
@@ -2020,10 +2048,28 @@ class Instance {
       };
     });
   }
-  forceUpdate() {
-    ReactDOM.render(/* @__PURE__ */ jsx(Root, {
-      instance: this
-    }), this.target);
+  async initialize() {
+    const essentials = await mountWhiteboard(this.config.sdkConfig, this.config.joinRoom, this.config.managerConfig || {}, this.config.language || "en-US");
+    this.accept(essentials);
+    this.resolveReady();
+  }
+  get target() {
+    return this._target;
+  }
+  set target(value) {
+    if (this._target && value) {
+      ReactDOM.unmountComponentAtNode(this._target);
+    }
+    this._target = value;
+    this.forceUpdate();
+  }
+  async forceUpdate() {
+    await this.readyPromise;
+    if (this.target) {
+      ReactDOM.render(/* @__PURE__ */ jsx(Root, {
+        instance: this
+      }), this.target);
+    }
   }
   accept({
     sdk,
@@ -2046,16 +2092,11 @@ class Instance {
       this.sdk = this.room = this.manager = this.target = null;
     }
   }
-  async mount(container) {
-    if (this.room) {
-      console.warn("[WhiteboardApp] already mounted");
-      return;
+  async mount(node) {
+    await this.readyPromise;
+    if (this.manager) {
+      this.manager.bindContainer(node);
     }
-    const essentials = await mountWhiteboard(this.config.sdkConfig, this.config.joinRoom, __spreadProps(__spreadValues({}, this.config.managerConfig), {
-      container
-    }), this.config.language);
-    this.accept(essentials);
-    this.resolveReady();
   }
   async unmount() {
     if (this.manager) {
@@ -2133,74 +2174,343 @@ class Instance {
       }
     });
   }
-  changeLanguage(language) {
+  async changeLanguage(language) {
     var _a;
-    return (_a = this.i18n) == null ? void 0 : _a.changeLanguage(language);
+    try {
+      await ((_a = this.i18n) == null ? void 0 : _a.changeLanguage(language));
+    } finally {
+      await this.forceUpdate();
+    }
   }
 }
 __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';
+applyStyles(style);
 class WhiteboardApp {
   constructor(config) {
     __publicField(this, "_instance");
+    __publicField(this, "_target", null);
     this.config = config;
     this._instance = new Instance(config);
   }
+  get target() {
+    return this._target;
+  }
+  get room() {
+    return this._instance.room;
+  }
+  get manager() {
+    return this._instance.manager;
+  }
+  get sdk() {
+    return this._instance.sdk;
+  }
+  get i18n() {
+    return this._instance.i18n;
+  }
+  bindElement(target) {
+    this._target = target || null;
+    this._instance.target = target || null;
+  }
   insertDocs(params) {
     return this._instance.insertDocs(params);
   }
+  insertCodeEditor() {
+    return this._instance.insertCodeEditor();
+  }
+  insertGeoGebra() {
+    return this._instance.insertGeoGebra();
+  }
+  insertCountdown() {
+    return this._instance.insertCountdown();
+  }
   changeLanguage(language) {
-    var _a;
-    return (_a = this._instance.changeLanguage(language)) == null ? void 0 : _a.finally(() => {
-      this._instance.forceUpdate();
-    });
+    return this._instance.changeLanguage(language);
   }
   dispose() {
     return this._instance.dispose();
   }
 }
-const version = "0.0.1";
+const version = "0.0.5";
+const EMPTY_ARRAY = [];
+function useForceUpdate() {
+  const [, forceUpdate_] = useState({});
+  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
+}
+function useLastValue(value) {
+  const ref = useRef(value);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
+function usePlayer(player) {
+  const togglePlay = useCallback(() => {
+    if (player) {
+      switch (player.phase) {
+        case PlayerPhase.WaitingFirstFrame:
+        case PlayerPhase.Pause:
+        case PlayerPhase.Ended: {
+          player.play();
+          break;
+        }
+        case PlayerPhase.Playing: {
+          player.pause();
+          break;
+        }
+      }
+    }
+  }, [player]);
+  const seekToProgressTime = useCallback((time) => {
+    if (player) {
+      player.seekToProgressTime(time);
+    }
+  }, [player]);
+  const lastPlayer = useLastValue(player);
+  const forceUpdate = useForceUpdate();
+  const setSpeed = useCallback((speed2) => {
+    if (player) {
+      player.playbackSpeed = speed2;
+      forceUpdate();
+    }
+  }, [forceUpdate, player]);
+  useEffect(() => {
+    if (!lastPlayer && player) {
+      forceUpdate();
+    }
+  }, [forceUpdate, lastPlayer, player]);
+  useEffect(() => {
+    if (player) {
+      player.callbacks.on("onPhaseChanged", forceUpdate);
+      player.callbacks.on("onProgressTimeChanged", forceUpdate);
+      return () => {
+        player.callbacks.off("onPhaseChanged", forceUpdate);
+        player.callbacks.off("onProgressTimeChanged", forceUpdate);
+      };
+    }
+  }, [forceUpdate, player]);
+  const phase = player ? player.phase : PlayerPhase.WaitingFirstFrame;
+  const currentTime = player ? player.progressTime : 0;
+  const totalTime = player ? player.timeDuration : 0;
+  const speed = player ? player.playbackSpeed : 1;
+  return {
+    phase,
+    currentTime,
+    totalTime,
+    speed,
+    setSpeed,
+    togglePlay,
+    seekToProgressTime
+  };
+}
+const Loading = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
+      fill: stroke
+    })
+  });
+};
+const Pause = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M14 19h4V5h-4M6 19h4V5H6v14z",
+      fill: stroke
+    })
+  });
+};
+const Play = (props) => {
+  const stroke = getStroke(props);
+  return /* @__PURE__ */ jsx("svg", {
+    viewBox: "0 0 24 24",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M8 5.14v14l11-7l-11-7z",
+      fill: stroke
+    })
+  });
+};
+const Icons = {
+  Play: memo(Play),
+  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, {
+    autoHide = false,
+    player: player_,
+    theme = "light",
+    i18n
+  } = _b, icons = __objRest(_b, [
+    "autoHide",
+    "player",
+    "theme",
+    "i18n"
+  ]);
+  const [currentTime, setCurrentTime] = useState(0);
+  const player = usePlayer(player_);
+  useEffect(() => {
+    setCurrentTime(player.currentTime);
+  }, [player.currentTime]);
+  useEffect(() => {
+    if (player.currentTime !== currentTime) {
+      player.seekToProgressTime(currentTime);
+    }
+  }, [currentTime]);
+  const isLoading = player.phase === PlayerPhase.WaitingFirstFrame || player.phase === PlayerPhase.Buffering;
+  const isPlaying = player.phase === PlayerPhase.Playing;
+  const {
+    activeColor
+  } = themes[theme];
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(name, theme, {
+      "auto-hide": autoHide
+    }),
+    children: [/* @__PURE__ */ jsx("button", {
+      className: clsx(`${name}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
+      disabled: isLoading,
+      onClick: player.togglePlay,
+      children: /* @__PURE__ */ jsx(Icon, {
+        fallback: isLoading ? /* @__PURE__ */ jsx(Icons.Loading, {
+          theme
+        }) : isPlaying ? /* @__PURE__ */ jsx(Icons.Pause, {
+          theme
+        }) : /* @__PURE__ */ jsx(Icons.Play, {
+          theme
+        }),
+        src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
+        alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
+      })
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-slider`, {
+        loading: isLoading
+      }, theme),
+      children: /* @__PURE__ */ jsx(RcSlider, {
+        disabled: isLoading,
+        trackStyle: {
+          background: activeColor
+        },
+        handleStyle: {
+          border: `1px solid ${activeColor}`
+        },
+        value: currentTime,
+        onChange: setCurrentTime,
+        min: 0,
+        max: player.totalTime,
+        step: 100
+      })
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-current`, theme),
+      children: renderTime(player.currentTime)
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-slash`, theme),
+      children: "/"
+    }), /* @__PURE__ */ jsx("span", {
+      className: clsx(`${name}-total`, theme),
+      children: renderTime(player.totalTime)
+    }), /* @__PURE__ */ jsx("span", {
+      className: `${name}-btn-interactive`,
+      children: /* @__PURE__ */ jsx(Tippy, {
+        className: "fastboard-tip",
+        content: renderSpeeds(player),
+        theme,
+        placement: "top-end",
+        trigger: "click",
+        offset: TopOffset,
+        arrow: false,
+        interactive: true,
+        children: /* @__PURE__ */ jsx(Button, {
+          content: i18n == null ? void 0 : i18n.t("speed"),
+          theme,
+          disabled: isLoading,
+          children: /* @__PURE__ */ jsxs("span", {
+            className: clsx(`${name}-speed-text`, theme),
+            children: [player.speed, "x"]
+          })
+        })
+      })
+    })]
+  });
+}
+function renderTime(ms) {
+  let seconds = ms / 1e3;
+  const minutes = Math.floor(seconds / 60);
+  seconds = Math.floor(seconds) % 60;
+  return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}
+const Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
+function renderSpeeds({
+  speed: current,
+  setSpeed
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    className: clsx(`${name}-panel`, "speed"),
+    children: Speeds.map((speed) => /* @__PURE__ */ jsxs("button", {
+      className: clsx(`${name}-btn`, "speed", {
+        active: speed === current
+      }),
+      onClick: () => setSpeed(speed),
+      children: [speed, "x"]
+    }, speed))
+  });
+}
 function useFastboard(config) {
   const [app, setApp] = useState(null);
   const [currentTarget, ref] = useState(null);
-  const working = useRef({
-    app: void 0,
-    type: void 0,
-    next: void 0
-  });
   useEffect(() => {
-    if (working.current.type) {
-      working.current.next = currentTarget;
-      return;
+    let isMounted = true;
+    const promise = createWhiteboardApp(config).then((app2) => {
+      if (isMounted)
+        setApp(app2);
+    });
+    return () => {
+      isMounted = false;
+      promise.then(() => app == null ? void 0 : app.dispose());
+    };
+  }, []);
+  useEffect(() => {
+    if (app) {
+      app.bindElement(currentTarget);
     }
-    (async () => {
-      let target = currentTarget;
-      do {
-        if (target) {
-          working.current.type = "creating";
-          if (working.current.app) {
-            await working.current.app.dispose();
-          }
-          working.current.app = await createWhiteboardApp(__spreadProps(__spreadValues({}, config), {
-            target
-          }));
-          setApp(working.current.app);
-        } else if (target === null) {
-          working.current.type = "disposing";
-          if (working.current.app) {
-            await working.current.app.dispose();
-            working.current.app = void 0;
-          }
-          setApp(null);
-        }
-        working.current.type = void 0;
-        target = working.current.next;
-        working.current.next = void 0;
-      } while (target !== void 0);
-    })();
-  }, [config, currentTarget]);
+  }, [app, currentTarget]);
   return Object.assign([app, ref], { app, ref });
 }
 const register = WindowManager.register.bind(WindowManager);
@@ -2209,5 +2519,5 @@ async function createWhiteboardApp(config) {
   await app._instance.readyPromise;
   return app;
 }
-export { PageControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, useFastboard, version };
+export { PageControl, PlayerControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, useFastboard, version };
 //# sourceMappingURL=index.es.js.map