@netless/fastboard 0.0.10 → 0.2.0

package/dist/index.es.js

@@ -1,2642 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  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, BuiltinApps } from "@netless/window-manager";
-import { WhiteWebSdk, DefaultHotKeys, ApplianceNames, ShapeType, PlayerPhase } from "white-web-sdk";
-import i18next from "i18next";
-import require$$0, { memo, forwardRef, useContext, useCallback, useState, useEffect, useRef, createContext } from "react";
-import ReactDOM from "react-dom";
-import clsx from "clsx";
-import Tippy from "@tippyjs/react";
-import RcSlider from "rc-slider";
-WindowManager.register({
-  kind: "Slide",
-  appOptions: {
-    debug: false
-  },
-  src: async () => {
-    var _a;
-    const app = await import("@netless/app-slide");
-    return (_a = app.default) != null ? _a : app;
-  }
-});
-WindowManager.register({
-  kind: "Monaco",
-  src: async () => {
-    var _a;
-    const app = await import("@netless/app-monaco");
-    return (_a = app.default) != null ? _a : app;
-  }
-});
-WindowManager.register({
-  kind: "Countdown",
-  src: async () => {
-    var _a;
-    const app = await import("@netless/app-countdown");
-    return (_a = app.default) != null ? _a : app;
-  }
-});
-WindowManager.register({
-  kind: "GeoGebra",
-  src: async () => {
-    var _a;
-    const app = await import("@netless/app-geogebra");
-    return (_a = app.default) != null ? _a : app;
-  },
-  appOptions: {
-    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));
-  document.head.appendChild(el);
-  return el;
-}
-function clamp(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]);
-}
-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 SOUP = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-const SOUP_LEN = SOUP.length;
-const ID_LEN = 20;
-const reusedIdCarrier = Array(ID_LEN);
-const genUID = () => {
-  for (let i = 0; i < ID_LEN; i++) {
-    reusedIdCarrier[i] = SOUP.charAt(Math.random() * SOUP_LEN);
-  }
-  return reusedIdCarrier.join("");
-};
-function makeSlideParams(scenes) {
-  const scenesWithoutPPT = [];
-  let taskId = "";
-  let url = "";
-  const pptSrcRE = /^pptx?(?<prefix>:\/\/\S+?dynamicConvert)\/(?<taskId>\w+)\//;
-  for (const { name: name2, ppt } of scenes) {
-    scenesWithoutPPT.push({ name: name2 });
-    if (!ppt || !ppt.src.startsWith("ppt")) {
-      continue;
-    }
-    const match = pptSrcRE.exec(ppt.src);
-    if (!match || !match.groups) {
-      continue;
-    }
-    taskId = match.groups.taskId;
-    url = "https" + match.groups.prefix;
-    break;
-  }
-  return { scenesWithoutPPT, taskId, url };
-}
-const translation$1 = {
-  clicker: "clicker",
-  selector: "selector",
-  text: "text",
-  pencil: "pencil",
-  arrow: "arrow",
-  hand: "hand",
-  eraser: "eraser",
-  laser: "laser",
-  collapse: "Collapse",
-  expand: "Expand",
-  zoomIn: "Zoom In",
-  zoomOut: "Zoom Out",
-  reset: "Reset",
-  prevPage: "Prev Page",
-  nextPage: "Next Page",
-  addPage: "Add Page",
-  redo: "Redo",
-  undo: "Undo",
-  shape: "Shape",
-  triangle: "Triangle",
-  rhombus: "Rhombus",
-  pentagram: "Pentagram",
-  speechBalloon: "Speech Balloon",
-  rectangle: "Rectangle",
-  ellipse: "Ellipse",
-  straight: "Straight",
-  speed: "Speed"
-};
-var en = {
-  translation: translation$1
-};
-const translation = {
-  clicker: "\u70B9\u51FB",
-  selector: "\u9009\u62E9",
-  text: "\u6587\u5B57",
-  pencil: "\u94C5\u7B14",
-  arrow: "\u7BAD\u5934",
-  hand: "\u6293\u624B",
-  eraser: "\u6A61\u76AE",
-  laser: "\u6FC0\u5149\u7B14",
-  zoomIn: "\u653E\u5927",
-  zoomOut: "\u7F29\u5C0F",
-  reset: "\u91CD\u7F6E",
-  prevPage: "\u4E0A\u4E00\u9875",
-  nextPage: "\u4E0B\u4E00\u9875",
-  addPage: "\u6DFB\u52A0\u9875\u9762",
-  redo: "\u91CD\u505A",
-  undo: "\u64A4\u9500",
-  collapse: "\u6536\u8D77",
-  expand: "\u5C55\u5F00",
-  clean: "\u6E05\u5C4F",
-  shape: "\u5F62\u72B6",
-  triangle: "\u4E09\u89D2\u5F62",
-  rhombus: "\u83F1\u5F62",
-  pentagram: "\u4E94\u89D2\u661F",
-  speechBalloon: "\u6C14\u7403",
-  rectangle: "\u77E9\u5F62",
-  ellipse: "\u692D\u5706",
-  straight: "\u76F4\u7EBF",
-  speed: "\u901F\u5EA6"
-};
-var zhCN = {
-  translation
-};
-const createI18n = async (params) => {
-  const defaultLang = navigator.language || "zh-CN";
-  const lng = params.language || defaultLang;
-  await i18next.init({
-    lng,
-    resources: {
-      en,
-      "zh-CN": zhCN
-    }
-  });
-  return i18next;
-};
-function ensureWindowManager(joinRoom) {
-  if (!joinRoom.invisiblePlugins || !joinRoom.invisiblePlugins.includes(WindowManager)) {
-    joinRoom.invisiblePlugins = [
-      ...joinRoom.invisiblePlugins || [],
-      WindowManager
-    ];
-  }
-}
-const defaultHotKeys = {
-  changeToSelector: "s",
-  changeToLaserPointer: "z",
-  changeToPencil: "p",
-  changeToRectangle: "r",
-  changeToEllipse: "c",
-  changeToEraser: "e",
-  changeToText: "t",
-  changeToStraight: "l",
-  changeToArrow: "a",
-  changeToHand: "h"
-};
-async function mountWhiteboard(sdkConfig, joinRoom, managerConfig, language) {
-  const sdk = new WhiteWebSdk(__spreadProps(__spreadValues({}, sdkConfig), {
-    useMobXState: true
-  }));
-  ensureWindowManager(joinRoom);
-  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
-  }, managerConfig), {
-    room
-  }));
-  const i18n = await createI18n({ language });
-  return { sdk, room, manager, i18n };
-}
-var jsxRuntime = { exports: {} };
-var reactJsxRuntime_production_min = {};
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-function toObject(val) {
-  if (val === null || val === void 0) {
-    throw new TypeError("Object.assign cannot be called with null or undefined");
-  }
-  return Object(val);
-}
-function shouldUseNative() {
-  try {
-    if (!Object.assign) {
-      return false;
-    }
-    var test1 = new String("abc");
-    test1[5] = "de";
-    if (Object.getOwnPropertyNames(test1)[0] === "5") {
-      return false;
-    }
-    var test2 = {};
-    for (var i = 0; i < 10; i++) {
-      test2["_" + String.fromCharCode(i)] = i;
-    }
-    var order2 = Object.getOwnPropertyNames(test2).map(function(n2) {
-      return test2[n2];
-    });
-    if (order2.join("") !== "0123456789") {
-      return false;
-    }
-    var test3 = {};
-    "abcdefghijklmnopqrst".split("").forEach(function(letter) {
-      test3[letter] = letter;
-    });
-    if (Object.keys(Object.assign({}, test3)).join("") !== "abcdefghijklmnopqrst") {
-      return false;
-    }
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-shouldUseNative() ? Object.assign : function(target, source) {
-  var from;
-  var to = toObject(target);
-  var symbols;
-  for (var s = 1; s < arguments.length; s++) {
-    from = Object(arguments[s]);
-    for (var key in from) {
-      if (hasOwnProperty.call(from, key)) {
-        to[key] = from[key];
-      }
-    }
-    if (getOwnPropertySymbols) {
-      symbols = getOwnPropertySymbols(from);
-      for (var i = 0; i < symbols.length; i++) {
-        if (propIsEnumerable.call(from, symbols[i])) {
-          to[symbols[i]] = from[symbols[i]];
-        }
-      }
-    }
-  }
-  return to;
-};
-/** @license React v17.0.2
- * react-jsx-runtime.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-var f = require$$0, g = 60103;
-reactJsxRuntime_production_min.Fragment = 60107;
-if (typeof Symbol === "function" && Symbol.for) {
-  var h = Symbol.for;
-  g = h("react.element");
-  reactJsxRuntime_production_min.Fragment = h("react.fragment");
-}
-var m = f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, n = Object.prototype.hasOwnProperty, p = { key: true, ref: true, __self: true, __source: true };
-function q(c, a, k) {
-  var b, d = {}, e = null, l = null;
-  k !== void 0 && (e = "" + k);
-  a.key !== void 0 && (e = "" + a.key);
-  a.ref !== void 0 && (l = a.ref);
-  for (b in a)
-    n.call(a, b) && !p.hasOwnProperty(b) && (d[b] = a[b]);
-  if (c && c.defaultProps)
-    for (b in a = c.defaultProps, a)
-      d[b] === void 0 && (d[b] = a[b]);
-  return { $$typeof: g, type: c, key: e, ref: l, props: d, _owner: m.current };
-}
-reactJsxRuntime_production_min.jsx = q;
-reactJsxRuntime_production_min.jsxs = q;
-{
-  jsxRuntime.exports = reactJsxRuntime_production_min;
-}
-const jsx = jsxRuntime.exports.jsx;
-const jsxs = jsxRuntime.exports.jsxs;
-const Fragment = jsxRuntime.exports.Fragment;
-function Icon({
-  fallback,
-  src,
-  alt = "[icon]"
-}) {
-  return src ? /* @__PURE__ */ jsx("img", {
-    src,
-    alt,
-    title: alt
-  }) : fallback;
-}
-const light = {
-  color: "#5D5D5D",
-  activeColor: "#3381FF",
-  backgroundColor: "#fff",
-  hoverBackgroundColor: "rgba(51, 129, 255, 0.1)"
-};
-const dark = __spreadProps(__spreadValues({}, light), {
-  color: "#eee",
-  backgroundColor: "#111"
-});
-const themes = { light, dark };
-const getStroke = (props) => {
-  let config;
-  if (props.theme) {
-    config = themes[props.theme];
-  } else {
-    config = themes.light;
-  }
-  return props.active ? config.activeColor : config.color;
-};
-const TopOffset = [0, 11];
-const RightOffset = [0, 11];
-const Apps = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: stroke,
-      children: [/* @__PURE__ */ jsx("path", {
-        d: "M17.667 4.5h-3.334c-1.012 0-1.833.82-1.833 1.833V11.5h5.167c1.012 0 1.833-.82 1.833-1.833V6.333c0-1.012-.82-1.833-1.833-1.833Zm-3.334 1h3.334c.46 0 .833.373.833.833v3.334l-.006.104a.833.833 0 0 1-.827.729H13.5V6.333c0-.46.373-.833.833-.833Z"
-      }), /* @__PURE__ */ jsx("path", {
-        d: "M6.333 19.5A1.833 1.833 0 0 1 4.5 17.667v-3.334c0-.525.221-1 .576-1.334a1.822 1.822 0 0 1-.576-1.332V8.333c0-1.012.82-1.833 1.833-1.833H10A1.5 1.5 0 0 1 11.5 8v4.5h4.167c.962 0 1.75.74 1.827 1.683l.006.15v3.334c0 1.012-.82 1.833-1.833 1.833Zm4.167-6H6.333a.833.833 0 0 0-.827.729l-.006.104v3.334c0 .46.373.833.833.833H10.5v-5Zm5.167 0H11.5v5h4.167c.46 0 .833-.373.833-.833v-3.334a.833.833 0 0 0-.833-.833ZM10 7.5H6.333a.833.833 0 0 0-.833.833v3.334c0 .46.373.833.833.833H10.5V8a.5.5 0 0 0-.41-.492L10 7.5Z"
-      })]
-    })
-  });
-};
-const Arrow = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
-    })
-  });
-};
-const Circle = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("rect", {
-      width: "15",
-      height: "15",
-      x: "4.5",
-      y: "4.5",
-      fill: "none",
-      stroke,
-      rx: "7.5"
-    })
-  });
-};
-const Clean = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z"
-    })
-  });
-};
-const Clicker = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "none",
-      children: [/* @__PURE__ */ jsx("path", {
-        d: "M0 0h24v24H0z"
-      }), /* @__PURE__ */ jsx("path", {
-        fill: stroke,
-        d: "m7 5.072 10.33 7.892-4.879.549 3.232 5.598-.866.5-3.233-5.597-2.914 3.95L7 5.072Z"
-      })]
-    })
-  });
-};
-const Collapse = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
-    })
-  });
-};
-const Diamond = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
-    })
-  });
-};
-const Down = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
-    })
-  });
-};
-const Eraser = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "m14.333 5.183.165.007c.494.037.978.245 1.356.623l2.333 2.333a2.15 2.15 0 0 1 0 3.04l-5.833 5.834a3.8 3.8 0 0 1-5.374 0l-1.167-1.166a2.15 2.15 0 0 1 0-3.04l7-7c.42-.42.97-.63 1.52-.63ZM11.52 8.52l-4.999 5a1.15 1.15 0 0 0 0 1.626l1.167 1.167a2.8 2.8 0 0 0 3.96 0l3.832-3.833-3.96-3.96Z"
-    })
-  });
-};
-const Expand = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
-    })
-  });
-};
-const Line = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
-    })
-  });
-};
-const Pencil = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "m17.497 4.84.116.105 1.442 1.442a1.52 1.52 0 0 1 .104 2.034l-.104.116L8.733 18.858l-4.347.756.756-4.347L15.463 4.945a1.52 1.52 0 0 1 2.034-.104ZM5.967 16.349l-.353 2.037 2.037-.354-1.683-1.683Zm8.407-8.901-7.946 7.946 2.178 2.178 7.946-7.946-2.178-2.178Zm-.728 2.2.708.707-5 5-.708-.708 5-5Zm2.596-4.055-.072.06-1.09 1.088 2.179 2.178 1.089-1.088a.52.52 0 0 0 .105-.584l-.045-.08-.06-.072-1.442-1.442a.52.52 0 0 0-.664-.06Z"
-    })
-  });
-};
-const Rectangle = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "M5.5 5.5h13v13h-13z"
-    })
-  });
-};
-const Selector = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
-    })
-  });
-};
-const SpeechBalloon = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "M17 4.5c.414 0 .79.168 1.06.44.272.27.44.646.44 1.06v9c0 .414-.168.79-.44 1.06a1.49 1.49 0 0 1-1.06.44h-4.207l-2.715 2.715-1.81-2.715H7a1.49 1.49 0 0 1-1.06-.44A1.495 1.495 0 0 1 5.5 15V6c0-.414.168-.79.44-1.06A1.49 1.49 0 0 1 7 4.5Z"
-    })
-  });
-};
-const Star = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "m12 3.523 1.993 5.734 6.07.123-4.838 3.668 1.758 5.81L12 15.391l-4.983 3.467 1.758-5.81L3.938 9.38l6.069-.123L12 3.523Z"
-    })
-  });
-};
-const Text = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
-    })
-  });
-};
-const Triangle = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
-    })
-  });
-};
-const Up = (props) => {
-  const stroke = getStroke(props);
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
-    })
-  });
-};
-const Icons$1 = {
-  Clicker: memo(Clicker),
-  Collapse: memo(Collapse),
-  Eraser: memo(Eraser),
-  Expand: memo(Expand),
-  Pencil: memo(Pencil),
-  Selector: memo(Selector),
-  Rectangle: memo(Rectangle),
-  Text: memo(Text),
-  Apps: memo(Apps),
-  Clean: memo(Clean),
-  Circle: memo(Circle),
-  Line: memo(Line),
-  Arrow: memo(Arrow),
-  Star: memo(Star),
-  Diamond: memo(Diamond),
-  SpeechBalloon: memo(SpeechBalloon),
-  Triangle: memo(Triangle),
-  Up: memo(Up),
-  Down: memo(Down)
-};
-const Button$1 = forwardRef((props, ref) => {
-  const {
-    content,
-    disabled,
-    active,
-    onClick,
-    interactive,
-    placement = "right",
-    children
-  } = props;
-  const {
-    writable,
-    theme
-  } = useContext(ToolbarContext);
-  return /* @__PURE__ */ jsx(Tippy, {
-    className: "fastboard-tip",
-    content,
-    interactive,
-    theme,
-    disabled: disabled || !writable,
-    placement,
-    offset: placement.includes("right") ? RightOffset : void 0,
-    duration: 300,
-    children: /* @__PURE__ */ jsx("button", {
-      ref,
-      className: clsx("fastboard-toolbar-btn", theme, {
-        active
-      }),
-      onClick,
-      disabled: disabled || !writable,
-      children
-    })
-  });
-});
-function CutLine() {
-  const {
-    theme
-  } = useContext(ToolbarContext);
-  return /* @__PURE__ */ jsx("span", {
-    className: clsx(`${name$4}-cut-line`, theme)
-  });
-}
-function useWritable(room) {
-  const [value, setValue] = useState(false);
-  useEffect(() => {
-    if (room) {
-      const setWritable = () => setValue(room.isWritable);
-      setWritable();
-      room.callbacks.on("onEnableWriteNowChanged", setWritable);
-      return () => room.callbacks.off("onEnableWriteNowChanged", setWritable);
-    }
-  }, [room]);
-  return value;
-}
-function useRoomState(room) {
-  const [memberState, setMemberState] = useState(void 0);
-  useEffect(() => {
-    if (room) {
-      setMemberState(room.state.memberState);
-      const onRoomStateChanged = (diff) => {
-        if (diff.memberState)
-          setMemberState(diff.memberState);
-      };
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      return () => room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-    }
-  }, [room]);
-  return { memberState };
-}
-function useToolbar(room) {
-  const writable = useWritable(room);
-  const { memberState } = useRoomState(room);
-  const cleanCurrentScene = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.cleanCurrentScene();
-    }
-  }, [room]);
-  const setAppliance = useCallback((appliance, shape) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({
-        currentApplianceName: appliance,
-        shapeType: shape
-      });
-    }
-  }, [room]);
-  const setStrokeWidth = useCallback((strokeWidth) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({ strokeWidth });
-    }
-  }, [room]);
-  const setStrokeColor = useCallback((strokeColor) => {
-    if (room == null ? void 0 : room.isWritable) {
-      room.setMemberState({ strokeColor });
-    }
-  }, [room]);
-  return {
-    writable,
-    memberState,
-    cleanCurrentScene,
-    setAppliance,
-    setStrokeWidth,
-    setStrokeColor
-  };
-}
-const EmptyToolbarHook = {
-  writable: false,
-  memberState: void 0,
-  cleanCurrentScene: noop,
-  setAppliance: noop,
-  setStrokeWidth: noop,
-  setStrokeColor: noop
-};
-const ShapesMap = {
-  [ApplianceNames.rectangle]: Icons$1.Rectangle,
-  [ApplianceNames.ellipse]: Icons$1.Circle,
-  [ApplianceNames.straight]: Icons$1.Line,
-  [ApplianceNames.arrow]: Icons$1.Arrow,
-  [ShapeType.Pentagram]: Icons$1.Star,
-  [ShapeType.Rhombus]: Icons$1.Diamond,
-  [ShapeType.Triangle]: Icons$1.Triangle,
-  [ShapeType.SpeechBalloon]: Icons$1.SpeechBalloon
-};
-const ApplianceShapes = [
-  ApplianceNames.rectangle,
-  ApplianceNames.ellipse,
-  ApplianceNames.straight,
-  ApplianceNames.arrow
-];
-const Shapes = [
-  ShapeType.Pentagram,
-  ShapeType.Rhombus,
-  ShapeType.Triangle,
-  ShapeType.SpeechBalloon
-];
-const ItemHeight = 32 + 4;
-const ItemsCount = 8;
-const MaxHeight = ItemHeight * ItemsCount - 4;
-const MinHeight = ItemHeight * 2 - 4;
-function UpButton({
-  disabled,
-  scrollTo
-}) {
-  const {
-    theme,
-    icons
-  } = useContext(ToolbarContext);
-  const scrollUp = useCallback(() => scrollTo(-ItemHeight), [scrollTo]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(Button$1, {
-      content: "Up",
-      disabled,
-      onClick: scrollUp,
-      children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons$1.Up, {
-          theme
-        }),
-        src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
-        alt: "[up]"
-      })
-    }), /* @__PURE__ */ jsx(CutLine, {})]
-  });
-}
-function DownButton({
-  disabled,
-  scrollTo
-}) {
-  const {
-    theme,
-    icons
-  } = useContext(ToolbarContext);
-  const scrollDown = useCallback(() => scrollTo(ItemHeight), [scrollTo]);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Button$1, {
-      content: "Down",
-      disabled,
-      onClick: scrollDown,
-      children: /* @__PURE__ */ jsx(Icon, {
-        fallback: /* @__PURE__ */ jsx(Icons$1.Down, {
-          theme
-        }),
-        src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
-        alt: "[down]"
-      })
-    })]
-  });
-}
-function renderToolTip(text, hotkey) {
-  if (!(typeof hotkey === "string"))
-    return text;
-  return /* @__PURE__ */ jsxs("span", {
-    className: "fastboard-toolbar-tooltip",
-    children: [/* @__PURE__ */ jsx("span", {
-      children: text
-    }), /* @__PURE__ */ jsx("span", {
-      className: "fastboard-toolbar-hotkey",
-      children: hotkey.toUpperCase()
-    })]
-  });
-}
-function ClickerButton() {
-  var _a;
-  const app = useInstance();
-  const {
-    theme,
-    icons,
-    writable,
-    setAppliance,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.clicker), [setAppliance]);
-  const shortcut = (_a = app == null ? void 0 : app.config.joinRoom.hotKeys) == null ? void 0 : _a.changeToClick;
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.clicker;
-  const disabled = !writable;
-  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$1.Clicker, {
-        theme,
-        active
-      }),
-      src: disabled ? icons == null ? void 0 : icons.clickerIconDisable : icons == null ? void 0 : icons.clickerIcon,
-      alt: "[clicker]"
-    })
-  });
-}
-function SelectorButton() {
-  const app = useInstance();
-  const {
-    theme,
-    icons,
-    writable,
-    setAppliance,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.selector), [setAppliance]);
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.selector;
-  const disabled = !writable;
-  const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToSelector;
-  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$1.Selector, {
-        theme,
-        active
-      }),
-      src: disabled ? icons == null ? void 0 : icons.selectorIconDisable : icons == null ? void 0 : icons.selectorIcon,
-      alt: "[selector]"
-    })
-  });
-}
-function EraserButton() {
-  const app = useInstance();
-  const {
-    theme,
-    icons,
-    writable,
-    setAppliance,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const changeAppliance = useCallback(() => setAppliance(ApplianceNames.eraser), [setAppliance]);
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.eraser;
-  const disabled = !writable;
-  const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToEraser;
-  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$1.Eraser, {
-        theme,
-        active
-      }),
-      src: disabled ? icons == null ? void 0 : icons.eraserIconDisable : icons == null ? void 0 : icons.eraserIcon,
-      alt: "[eraser]"
-    })
-  });
-}
-function CleanButton() {
-  const {
-    theme,
-    icons,
-    writable,
-    cleanCurrentScene,
-    i18n
-  } = useContext(ToolbarContext);
-  const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button$1, {
-    content: i18n == null ? void 0 : i18n.t("clean"),
-    onClick: cleanCurrentScene,
-    children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons$1.Clean, {
-        theme
-      }),
-      src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
-      alt: "[clean]"
-    })
-  });
-}
-var vscodePNG = "data:image/png;base64,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";
-var geogebraPNG = "data:image/png;base64,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";
-var countdownPNG = "data:image/png;base64,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";
-function AppsButton({
-  content,
-  onClick
-}) {
-  const {
-    theme,
-    icons,
-    writable
-  } = useContext(ToolbarContext);
-  const disabled = !writable;
-  const button = /* @__PURE__ */ jsx(Button$1, {
-    content: "Apps",
-    onClick,
-    children: /* @__PURE__ */ jsx(Icon, {
-      fallback: /* @__PURE__ */ jsx(Icons$1.Apps, {
-        theme
-      }),
-      src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
-      alt: "[apps]"
-    })
-  });
-  return content === false ? button : /* @__PURE__ */ jsx("span", {
-    className: "fastboard-toolbar-btn-interactive",
-    children: /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: renderAppsButtonContent(content),
-      theme,
-      placement: "right-end",
-      trigger: "click",
-      offset: RightOffset,
-      arrow: false,
-      interactive: true,
-      children: button
-    })
-  });
-}
-function renderAppsButtonContent(content) {
-  return /* @__PURE__ */ jsx("div", {
-    className: "fastboard-toolbar-panel apps",
-    children: /* @__PURE__ */ jsx("div", {
-      className: "fastboard-toolbar-apps",
-      children: content || /* @__PURE__ */ jsx(DefaultApps, {})
-    })
-  });
-}
-function DefaultApps() {
-  const app = useInstance();
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(AppIcon, {
-      title: "Code Editor",
-      src: vscodePNG,
-      alt: "[code editor]",
-      onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
-    }), /* @__PURE__ */ jsx(AppIcon, {
-      title: "GeoGebra",
-      src: geogebraPNG,
-      alt: "[geogebra]",
-      onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
-    }), /* @__PURE__ */ jsx(AppIcon, {
-      title: "Countdown",
-      src: countdownPNG,
-      alt: "[countdown]",
-      onClick: app == null ? void 0 : app.insertCountdown.bind(app)
-    })]
-  });
-}
-function AppIcon({
-  title,
-  src,
-  alt,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs("span", {
-    className: "fastboard-toolbar-app-icon",
-    children: [/* @__PURE__ */ jsx(Button$1, {
-      placement: "top",
-      content: title,
-      onClick,
-      children: /* @__PURE__ */ jsx("img", {
-        src,
-        alt,
-        title
-      })
-    }), /* @__PURE__ */ jsx("span", {
-      className: "fastboard-toolbar-app-icon-text",
-      children: title
-    })]
-  });
-}
-const colors = {
-  "#E02020": [224, 32, 32],
-  "#F7B500": [247, 181, 0],
-  "#6DD400": [109, 212, 0],
-  "#32C5FF": [50, 197, 255],
-  "#0091FF": [0, 145, 255],
-  "#6236FF": [98, 54, 255],
-  "#B620E0": [182, 32, 224],
-  "#6D7278": [109, 114, 120]
-};
-const colorKeys = Object.keys(colors);
-function ColorBox() {
-  const {
-    theme,
-    memberState,
-    setStrokeColor,
-    writable
-  } = useContext(ToolbarContext);
-  const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
-  const disabled = !writable;
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx("fastboard-toolbar-color-box", theme),
-    children: colorKeys.map((key) => /* @__PURE__ */ jsx("div", {
-      className: clsx("fastboard-toolbar-color-item", theme),
-      onClick: () => setStrokeColor(colors[key]),
-      children: /* @__PURE__ */ jsx("div", {
-        className: clsx("fastboard-toolbar-color-border", theme, {
-          active: strokeColor && isEqualArray(strokeColor, colors[key])
-        }),
-        children: /* @__PURE__ */ jsx("button", {
-          className: clsx("fastboard-toolbar-color-btn"),
-          style: {
-            background: key
-          },
-          disabled,
-          onClick: (ev) => {
-            ev.stopPropagation();
-            setStrokeColor(colors[key]);
-          }
-        })
-      })
-    }, key))
-  });
-}
-function Slider() {
-  const {
-    theme,
-    writable,
-    memberState,
-    setStrokeWidth
-  } = useContext(ToolbarContext);
-  const {
-    activeColor
-  } = themes[theme];
-  const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
-  return /* @__PURE__ */ jsx(RcSlider, {
-    disabled: !writable,
-    className: clsx("fastboard-toolbar-slider", theme),
-    trackStyle: {
-      background: activeColor
-    },
-    handleStyle: {
-      border: `1px solid ${activeColor}`
-    },
-    value: strokeWidth,
-    onChange: setStrokeWidth,
-    min: 1,
-    max: 32
-  });
-}
-function PencilButton() {
-  const app = useInstance();
-  const {
-    theme,
-    icons,
-    writable,
-    setAppliance,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const changeAppliance = useCallback(() => {
-    setAppliance(ApplianceNames.pencil);
-  }, [setAppliance]);
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.pencil;
-  const disabled = !writable;
-  const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToPencil;
-  return /* @__PURE__ */ jsx("span", {
-    className: "fastboard-toolbar-btn-interactive",
-    children: /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: renderPencilButtonContent(),
-      theme,
-      placement: "right-start",
-      trigger: "click",
-      offset: RightOffset,
-      arrow: false,
-      interactive: true,
-      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$1.Pencil, {
-            theme,
-            active
-          }),
-          src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
-          alt: "[pencil]"
-        }), /* @__PURE__ */ jsx("span", {
-          className: "fastboard-toolbar-triangle"
-        })]
-      })
-    })
-  });
-}
-function renderPencilButtonContent() {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "fastboard-toolbar-panel pencil",
-    children: [/* @__PURE__ */ jsx(Slider, {}), /* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(ColorBox, {})]
-  });
-}
-function TextButton() {
-  const app = useInstance();
-  const {
-    theme,
-    icons,
-    writable,
-    setAppliance,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const changeAppliance = useCallback(() => {
-    setAppliance(ApplianceNames.text);
-  }, [setAppliance]);
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  const active = appliance === ApplianceNames.text;
-  const disabled = !writable;
-  const shortcut = ((app == null ? void 0 : app.config.joinRoom.hotKeys) || defaultHotKeys).changeToText;
-  return /* @__PURE__ */ jsx("span", {
-    className: "fastboard-toolbar-btn-interactive",
-    children: /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: renderTextButtonContent(),
-      theme,
-      placement: "right-start",
-      trigger: "click",
-      offset: RightOffset,
-      arrow: false,
-      interactive: true,
-      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$1.Text, {
-            theme,
-            active
-          }),
-          src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
-          alt: "[text]"
-        }), /* @__PURE__ */ jsx("span", {
-          className: "fastboard-toolbar-triangle"
-        })]
-      })
-    })
-  });
-}
-function renderTextButtonContent() {
-  return /* @__PURE__ */ jsx("div", {
-    className: "fastboard-toolbar-panel text",
-    children: /* @__PURE__ */ jsx(ColorBox, {})
-  });
-}
-const ShapeTypes = new Set([...ApplianceShapes, ...Shapes]);
-function ShapesButton() {
-  const {
-    theme,
-    memberState,
-    i18n
-  } = useContext(ToolbarContext);
-  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
-  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$1.Rectangle;
-  return /* @__PURE__ */ jsx("span", {
-    className: "fastboard-toolbar-btn-interactive",
-    children: /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: renderShapesButtonContent(),
-      theme,
-      placement: "right-start",
-      trigger: "click",
-      offset: RightOffset,
-      arrow: false,
-      interactive: true,
-      children: /* @__PURE__ */ jsxs(Button$1, {
-        content: i18n == null ? void 0 : i18n.t("shape"),
-        active,
-        children: [/* @__PURE__ */ jsx(CurrentIcon, {
-          theme,
-          active
-        }), /* @__PURE__ */ jsx("span", {
-          className: "fastboard-toolbar-triangle"
-        })]
-      })
-    })
-  });
-}
-function renderShapesButtonContent() {
-  return /* @__PURE__ */ jsxs("div", {
-    className: "fastboard-toolbar-panel shapes",
-    children: [/* @__PURE__ */ jsx(ShapesBox, {}), /* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Slider, {}), /* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(ColorBox, {})]
-  });
-}
-function ShapesBox() {
-  const {
-    i18n
-  } = useContext(ToolbarContext);
-  return /* @__PURE__ */ jsxs("div", {
-    className: "fastboard-toolbar-shapes",
-    children: [ApplianceShapes.map((Appliance) => /* @__PURE__ */ jsx(ApplianceShapeButton, {
-      content: i18n == null ? void 0 : i18n.t(Appliance),
-      Appliance,
-      Icon: ShapesMap[Appliance]
-    }, Appliance)), Shapes.map((shape) => /* @__PURE__ */ jsx(ShapeShapeButton, {
-      content: i18n == null ? void 0 : i18n.t(shape),
-      shape,
-      Icon: ShapesMap[shape]
-    }, shape))]
-  });
-}
-function ApplianceShapeButton({
-  content,
-  Appliance,
-  Icon: Icon2
-}) {
-  const {
-    theme,
-    writable,
-    setAppliance,
-    memberState
-  } = useContext(ToolbarContext);
-  const current = memberState == null ? void 0 : memberState.currentApplianceName;
-  const disabled = !writable;
-  return /* @__PURE__ */ jsx(Button$1, {
-    content,
-    disabled,
-    placement: "top",
-    onClick: () => setAppliance(Appliance),
-    children: /* @__PURE__ */ jsx(Icon2, {
-      theme,
-      active: current === Appliance
-    })
-  });
-}
-function ShapeShapeButton({
-  content,
-  shape,
-  Icon: Icon2
-}) {
-  const {
-    theme,
-    writable,
-    setAppliance,
-    memberState
-  } = useContext(ToolbarContext);
-  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$1, {
-    content,
-    disabled,
-    placement: "top",
-    onClick: () => setAppliance(ApplianceNames.shape, shape),
-    children: /* @__PURE__ */ jsx(Icon2, {
-      theme,
-      active: current === shape
-    })
-  });
-}
-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 = 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);
-      });
-      resizeObserver.observe(container);
-      return () => resizeObserver.disconnect();
-    }
-  }, []);
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [needScroll && /* @__PURE__ */ jsx(UpButton, {
-      scrollTo,
-      disabled: disableScrollUp
-    }), /* @__PURE__ */ jsxs("div", {
-      ref,
-      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, {}), 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,
-      disabled: disableScrollDown
-    })]
-  });
-}
-const ToolbarContext = createContext(__spreadValues({
-  theme: "light"
-}, EmptyToolbarHook));
-const name$4 = "fastboard-toolbar";
-const Toolbar = ({
-  theme = "light",
-  icons,
-  room,
-  i18n
-}) => {
-  const [expanded, setExpanded] = useState(true);
-  const hook = useToolbar(room);
-  const toggle = useCallback(() => setExpanded((e) => !e), []);
-  const disabled = !hook.writable;
-  return /* @__PURE__ */ jsx(ToolbarContext.Provider, {
-    value: __spreadProps(__spreadValues({
-      theme,
-      icons
-    }, hook), {
-      i18n
-    }),
-    children: /* @__PURE__ */ jsxs("div", {
-      className: clsx(name$4, theme),
-      children: [expanded ? /* @__PURE__ */ jsx(Button$1, {
-        content: i18n == null ? void 0 : i18n.t("collapse"),
-        onClick: toggle,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons$1.Collapse, {
-            theme
-          }),
-          src: disabled ? icons == null ? void 0 : icons.collapseIconDisable : icons == null ? void 0 : icons.collapseIcon
-        })
-      }) : /* @__PURE__ */ jsx(Button$1, {
-        content: i18n == null ? void 0 : i18n.t("expand"),
-        onClick: toggle,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Icons$1.Expand, {
-            theme
-          }),
-          src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
-        })
-      }), expanded && /* @__PURE__ */ jsxs(Fragment, {
-        children: [/* @__PURE__ */ jsx(CutLine, {}), /* @__PURE__ */ jsx(Content, {})]
-      })]
-    })
-  });
-};
-function Undo({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "none",
-      fillRule: "evenodd",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [/* @__PURE__ */ jsx("path", {
-        d: "M10 14H6v-4"
-      }), /* @__PURE__ */ jsx("path", {
-        d: "m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0"
-      })]
-    })
-  });
-}
-function Redo({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "none",
-      fillRule: "evenodd",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      children: [/* @__PURE__ */ jsx("path", {
-        d: "M14 14h4v-4"
-      }), /* @__PURE__ */ jsx("path", {
-        d: "m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0"
-      })]
-    })
-  });
-}
-const name$3 = "fastboard-redo-undo";
-function RedoUndo({
-  room,
-  theme = "light",
-  undoIcon,
-  undoIconDisable,
-  redoIcon,
-  redoIconDisable,
-  i18n
-}) {
-  const [writable, setWritable] = useState(false);
-  const [undoSteps, setUndoSteps] = useState(0);
-  const [redoSteps, setRedoSteps] = useState(0);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      room.isWritable && (room.disableSerialization = false);
-      const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onCanUndoStepsUpdate", setUndoSteps);
-      room.callbacks.on("onCanRedoStepsUpdate", setRedoSteps);
-      return () => {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onCanUndoStepsUpdate", setUndoSteps);
-        room.callbacks.off("onCanRedoStepsUpdate", setRedoSteps);
-      };
-    }
-  }, [room]);
-  const disabled = !writable;
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$3, theme),
-    children: [/* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("undo"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$3}-btn`, "undo", theme),
-        disabled: disabled || undoSteps === 0,
-        onClick: useCallback(() => room && room.undo(), [room]),
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Undo, {
-            theme
-          }),
-          src: undoSteps === 0 ? undoIconDisable : undoIcon,
-          alt: "[undo]"
-        })
-      })
-    }), /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("redo"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$3}-btn`, "redo", theme),
-        disabled: disabled || redoSteps === 0,
-        onClick: useCallback(() => room && room.redo(), [room]),
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Redo, {
-            theme
-          }),
-          src: redoSteps === 0 ? redoIconDisable : redoIcon,
-          alt: "[redo]"
-        })
-      })
-    })]
-  });
-}
-function Minus({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M7 12h10"
-    })
-  });
-}
-function Plus({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "M12 7v10m-5-5h10"
-    })
-  });
-}
-function Reset({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsxs("g", {
-      fill: "none",
-      fillRule: "evenodd",
-      transform: "translate(-176 -684)",
-      children: [/* @__PURE__ */ jsx("path", {
-        stroke,
-        strokeLinejoin: "round",
-        d: "M188 688v4m0 8v4m8-8h-4m-8 0h-4"
-      }), /* @__PURE__ */ jsx("circle", {
-        cx: "188",
-        cy: "696",
-        r: "6",
-        stroke
-      }), /* @__PURE__ */ jsx("circle", {
-        cx: "188",
-        cy: "696",
-        r: "1",
-        fill: stroke
-      })]
-    })
-  });
-}
-const name$2 = "fastboard-zoom-control";
-const ScalePoints = [0.10737418240000011, 0.13421772800000012, 0.16777216000000014, 0.20971520000000016, 0.26214400000000015, 0.3276800000000002, 0.4096000000000002, 0.5120000000000001, 0.6400000000000001, 0.8, 1, 1.26, 1.5876000000000001, 2.000376, 2.5204737600000002, 3.1757969376000004, 4.001504141376, 5.041895218133761, 6.352787974848539, 8.00451284830916, 10];
-function nextScale(scale, delta) {
-  const {
-    length
-  } = ScalePoints;
-  const last = length - 1;
-  if (scale < ScalePoints[0])
-    return ScalePoints[0];
-  if (scale > ScalePoints[last])
-    return ScalePoints[last];
-  for (let i = 0; i < length; ++i) {
-    const curr = ScalePoints[i];
-    const prev = i === 0 ? -Infinity : (ScalePoints[i - 1] + curr) / 2;
-    const next = i === last ? Infinity : (ScalePoints[i + 1] + curr) / 2;
-    if (prev <= scale && scale <= next)
-      return ScalePoints[clamp(i + delta, 0, last)];
-  }
-  return 1;
-}
-function ZoomControl({
-  room,
-  manager,
-  theme = "light",
-  resetIcon,
-  resetIconDisable,
-  minusIcon,
-  minusIconDisable,
-  plusIcon,
-  plusIconDisable,
-  i18n
-}) {
-  const [writable, setWritable] = useState(false);
-  const [scale, setScale] = useState(1);
-  const resetCamera = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: 1,
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        const {
-          scenes,
-          index
-        } = room.state.sceneState;
-        if (scenes[index].ppt) {
-          room.scalePptToFit();
-        } else {
-          room.moveCamera({
-            scale: 1,
-            centerX: 0,
-            centerY: 0
-          });
-        }
-      }
-    }
-  }, [room, manager]);
-  const zoomIn = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: nextScale(scale, 1),
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        room.moveCamera({
-          scale: nextScale(scale, 1),
-          centerX: 0,
-          centerY: 0
-        });
-      }
-    }
-  }, [room, manager, scale]);
-  const zoomOut = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.mainView.moveCamera({
-          scale: nextScale(scale, -1),
-          centerX: 0,
-          centerY: 0
-        });
-      } else {
-        room.moveCamera({
-          scale: nextScale(scale, -1),
-          centerX: 0,
-          centerY: 0
-        });
-      }
-    }
-  }, [room, manager, scale]);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setScale(room.state.cameraState.scale);
-    }
-    if (manager) {
-      setScale(manager.mainView.camera.scale);
-    }
-    const onRoomStateChanged = (modifyState) => {
-      if (modifyState.cameraState) {
-        setScale(modifyState.cameraState.scale);
-      }
-    };
-    const onCameraUpdated = ({
-      scale: scale2
-    }) => setScale(scale2);
-    const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      if (manager) {
-        manager.mainView.callbacks.on("onCameraUpdated", onCameraUpdated);
-      } else {
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      }
-    }
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager == null ? void 0 : manager.mainView.callbacks.off("onCameraUpdated", onCameraUpdated);
-      }
-    };
-  }, [room, manager]);
-  const disabled = !writable;
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$2, theme),
-    children: [/* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("zoomOut"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "minus", theme),
-        disabled,
-        onClick: zoomOut,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Minus, {
-            theme
-          }),
-          src: disabled ? minusIconDisable : minusIcon,
-          alt: "[minus]"
-        })
-      })
-    }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$2}-scale`, theme),
-      children: Math.ceil(scale * 100)
-    }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$2}-percent`, theme),
-      children: "%"
-    }), /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("zoomIn"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "plus", theme),
-        disabled,
-        onClick: zoomIn,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Plus, {
-            theme
-          }),
-          src: disabled ? plusIconDisable : plusIcon,
-          alt: "[plus]"
-        })
-      })
-    }), /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("reset"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$2}-btn`, "reset", theme),
-        disabled,
-        onClick: resetCamera,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(Reset, {
-            theme
-          }),
-          src: disabled ? resetIconDisable : resetIcon,
-          alt: "[reset]"
-        })
-      })
-    })]
-  });
-}
-function FilePlus({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: stroke,
-      d: "M12 7.5a.5.5 0 0 1 .09.992L12 8.5H8a1.5 1.5 0 0 0-1.493 1.356L6.5 10v6a1.5 1.5 0 0 0 1.356 1.493L8 17.5h6a1.5 1.5 0 0 0 1.493-1.356L15.5 16v-4a.5.5 0 0 1 .992-.09l.008.09v4a2.5 2.5 0 0 1-2.336 2.495L14 18.5H8a2.5 2.5 0 0 1-2.495-2.336L5.5 16v-6a2.5 2.5 0 0 1 2.336-2.495L8 7.5h4Zm4-2a.5.5 0 0 1 .492.41L16.5 6v1.5H18a.5.5 0 0 1 .09.992L18 8.5h-1.5V10a.5.5 0 0 1-.992.09L15.5 10V8.5H14a.5.5 0 0 1-.09-.992L14 7.5h1.5V6a.5.5 0 0 1 .5-.5Z"
-    })
-  });
-}
-function ChevronLeft({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "m14 16-2-2-2-2 2-2 2-2"
-    })
-  });
-}
-function ChevronRight({
-  theme = "light",
-  active
-}) {
-  const config = themes[theme];
-  const stroke = active ? config.activeColor : config.color;
-  return /* @__PURE__ */ jsx("svg", {
-    viewBox: "0 0 24 24",
-    children: /* @__PURE__ */ jsx("path", {
-      fill: "none",
-      stroke,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      d: "m10 16 2-2 2-2-2-2-2-2"
-    })
-  });
-}
-const name$1 = "fastboard-page-control";
-function PageControl({
-  room,
-  manager,
-  theme = "light",
-  addIcon,
-  addIconDisable,
-  prevIcon,
-  prevIconDisable,
-  nextIcon,
-  nextIconDisable,
-  i18n
-}) {
-  const [writable, setWritable] = useState(false);
-  const [pageIndex, setPageIndex] = useState(0);
-  const [pageCount, setPageCount] = useState(0);
-  const addPage = useCallback(async () => {
-    if (manager && room) {
-      await manager.switchMainViewToWriter();
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      await manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (!manager && room) {
-      const path = room.state.sceneState.contextPath;
-      room.putScenes(path, [{}], pageIndex + 1);
-      room.setSceneIndex(pageIndex + 1);
-    }
-  }, [room, manager, pageIndex]);
-  const prevPage = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex - 1);
-      } else {
-        room.pptPreviousStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-  const nextPage = useCallback(() => {
-    if (room == null ? void 0 : room.isWritable) {
-      if (manager) {
-        manager.setMainViewSceneIndex(pageIndex + 1);
-      } else {
-        room.pptNextStep();
-      }
-    }
-  }, [room, manager, pageIndex]);
-  useEffect(() => {
-    if (room) {
-      setWritable(room.isWritable);
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-    }
-    const onRoomStateChanged = (modifyState) => {
-      if (modifyState.sceneState) {
-        setPageIndex(modifyState.sceneState.index);
-        setPageCount(modifyState.sceneState.scenes.length);
-      }
-    };
-    const onMainViewModeChanged = (mode) => {
-      if (room && mode === 0) {
-        setPageIndex(room.state.sceneState.index);
-        setPageCount(room.state.sceneState.scenes.length);
-      }
-    };
-    const updateWritable = () => setWritable((room == null ? void 0 : room.isWritable) || false);
-    if (room) {
-      room.callbacks.on("onEnableWriteNowChanged", updateWritable);
-      room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-      manager == null ? void 0 : manager.callbacks.on("mainViewModeChange", onMainViewModeChanged);
-    }
-    return () => {
-      if (room) {
-        room.callbacks.off("onEnableWriteNowChanged", updateWritable);
-        room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        manager == null ? void 0 : manager.callbacks.off("mainViewModeChange", onMainViewModeChanged);
-      }
-    };
-  }, [room, manager]);
-  const disabled = !writable;
-  return /* @__PURE__ */ jsxs("div", {
-    className: clsx(name$1, theme),
-    children: [/* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("prevPage"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "prev", theme),
-        disabled: disabled || pageIndex === 0,
-        onClick: prevPage,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(ChevronLeft, {
-            theme
-          }),
-          src: disabled ? prevIconDisable : prevIcon,
-          alt: "[prev]"
-        })
-      })
-    }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-page`, theme),
-      children: pageCount === 0 ? "\u2026" : pageIndex + 1
-    }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-slash`, theme),
-      children: "/"
-    }), /* @__PURE__ */ jsx("span", {
-      className: clsx(`${name$1}-page-count`, theme),
-      children: pageCount
-    }), /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("nextPage"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "next", theme),
-        disabled: disabled || pageIndex === pageCount - 1,
-        onClick: nextPage,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(ChevronRight, {
-            theme
-          }),
-          src: disabled ? nextIconDisable : nextIcon,
-          alt: "[next]"
-        })
-      })
-    }), /* @__PURE__ */ jsx(Tippy, {
-      className: "fastboard-tip",
-      content: i18n == null ? void 0 : i18n.t("addPage"),
-      theme,
-      disabled,
-      placement: "top",
-      duration: 300,
-      offset: TopOffset,
-      children: /* @__PURE__ */ jsx("button", {
-        className: clsx(`${name$1}-btn`, "add", theme),
-        disabled,
-        onClick: addPage,
-        children: /* @__PURE__ */ jsx(Icon, {
-          fallback: /* @__PURE__ */ jsx(FilePlus, {
-            theme
-          }),
-          src: disabled ? addIconDisable : addIcon,
-          alt: "[add]"
-        })
-      })
-    })]
-  });
-}
-function Root({
-  instance: app
-}) {
-  const [mux] = useState(() => new Lock());
-  const useWhiteboard = useCallback((container) => mux.schedule(container ? () => app.mount(container) : () => app.unmount()), [app, mux]);
-  const {
-    Toolbar: toolbar = true,
-    RedoUndo: redo_undo = true,
-    ZoomControl: zoom_control = true,
-    PageControl: page_control = true
-  } = app.config.layout || {};
-  const props = {
-    room: app.room,
-    manager: app.manager,
-    i18n: app.i18n
-  };
-  return /* @__PURE__ */ jsx(Instance.Context.Provider, {
-    value: app,
-    children: /* @__PURE__ */ jsxs("div", {
-      className: "fastboard-root",
-      children: [!app.room && /* @__PURE__ */ jsx("div", {
-        className: "fastboard-loading",
-        children: "Loading\u2026"
-      }), /* @__PURE__ */ jsx("div", {
-        className: "fastboard-view",
-        ref: useWhiteboard
-      }), toolbar && /* @__PURE__ */ jsx("div", {
-        className: "fastboard-left",
-        children: /* @__PURE__ */ jsx(Toolbar, __spreadValues({}, props))
-      }), (redo_undo || zoom_control) && /* @__PURE__ */ jsxs("div", {
-        className: "fastboard-bottom-left",
-        children: [redo_undo && /* @__PURE__ */ jsx(RedoUndo, __spreadValues({}, props)), zoom_control && /* @__PURE__ */ jsx(ZoomControl, __spreadValues({}, props))]
-      }), page_control && /* @__PURE__ */ jsx("div", {
-        className: "fastboard-bottom-right",
-        children: /* @__PURE__ */ jsx(PageControl, __spreadValues({}, props))
-      })]
-    })
-  });
-}
-class Instance {
-  constructor(config) {
-    __publicField(this, "config");
-    __publicField(this, "sdk", null);
-    __publicField(this, "room", null);
-    __publicField(this, "manager", null);
-    __publicField(this, "i18n", null);
-    __publicField(this, "ready", false);
-    __publicField(this, "resolveReady");
-    __publicField(this, "readyPromise");
-    __publicField(this, "target", null);
-    __publicField(this, "collector", null);
-    this.config = __spreadValues({}, config);
-    this.refreshReadyPromise();
-    this.initialize();
-  }
-  refreshReadyPromise() {
-    this.readyPromise = new Promise((resolve) => {
-      this.resolveReady = () => {
-        this.resolveReady = noop;
-        this.ready = true;
-        resolve();
-      };
-    });
-  }
-  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();
-  }
-  bindElement(target) {
-    if (this.target && this.target !== target) {
-      ReactDOM.unmountComponentAtNode(this.target);
-    }
-    this.target = target;
-    this.forceUpdate();
-  }
-  bindCollector(collector) {
-    this.collector = collector;
-    if (this.manager && collector) {
-      this.manager.bindCollectorContainer(collector);
-    }
-  }
-  updateLayout(layout) {
-    this.config.layout = layout;
-    this.forceUpdate();
-  }
-  async forceUpdate() {
-    await this.readyPromise;
-    if (this.target) {
-      ReactDOM.render(/* @__PURE__ */ jsx(Root, {
-        instance: this
-      }), this.target);
-    }
-  }
-  accept({
-    sdk,
-    room,
-    manager,
-    i18n
-  }) {
-    this.sdk = sdk;
-    this.room = room;
-    this.manager = manager;
-    this.i18n = i18n;
-    this.forceUpdate();
-  }
-  async dispose() {
-    if (this.room) {
-      await this.unmount();
-    }
-    if (this.target) {
-      ReactDOM.unmountComponentAtNode(this.target);
-      this.sdk = this.room = this.manager = this.target = null;
-    }
-  }
-  async mount(node) {
-    await this.readyPromise;
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] mounted, but not found window manager`);
-    }
-    this.manager.bindContainer(node);
-    if (this.collector) {
-      this.manager.bindCollectorContainer(this.collector);
-    }
-  }
-  async unmount() {
-    if (this.manager) {
-      this.manager.destroy();
-      this.manager = null;
-    }
-    if (this.room) {
-      try {
-        await this.room.disconnect();
-      } catch {
-      }
-      this.room = null;
-    }
-    this.refreshReadyPromise();
-  }
-  insertDocs(params) {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert doc before mounted`);
-    }
-    switch (params.fileType) {
-      case "pdf":
-      case "ppt":
-        return this.manager.addApp({
-          kind: "DocsViewer",
-          options: {
-            scenePath: params.scenePath,
-            title: params.title,
-            scenes: params.scenes
-          }
-        });
-      case "pptx":
-        return this.manager.addApp({
-          kind: "Slide",
-          options: {
-            scenePath: params.scenePath,
-            title: params.title,
-            scenes: params.scenes
-          },
-          attributes: {
-            taskId: params.taskId,
-            url: params.url
-          }
-        });
-    }
-  }
-  insertCodeEditor() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "Monaco",
-      options: {
-        title: "Code Editor"
-      }
-    });
-  }
-  insertGeoGebra() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "GeoGebra",
-      options: {
-        title: "GeoGebra"
-      }
-    });
-  }
-  insertCountdown() {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: "Countdown",
-      options: {
-        title: "Countdown"
-      }
-    });
-  }
-  insertMedia({
-    title,
-    src
-  }) {
-    if (!this.manager) {
-      throw new Error(`[WhiteboardApp] cannot insert app before mounted`);
-    }
-    return this.manager.addApp({
-      kind: BuiltinApps.MediaPlayer,
-      options: {
-        title
-      },
-      attributes: {
-        src
-      }
-    });
-  }
-  async changeLanguage(language) {
-    var _a;
-    try {
-      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}.fastboard{width:100%;height:100%;position:relative}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
-applyStyles(style);
-class WhiteboardApp {
-  constructor(config) {
-    __publicField(this, "_instance");
-    this.config = config;
-    this._instance = new Instance(config);
-  }
-  get room() {
-    return this._instance.room;
-  }
-  get manager() {
-    return this._instance.manager;
-  }
-  get sdk() {
-    return this._instance.sdk;
-  }
-  get i18n() {
-    return this._instance.i18n;
-  }
-  get target() {
-    return this._instance.target;
-  }
-  get collector() {
-    return this._instance.collector;
-  }
-  bindElement(target) {
-    this._instance.bindElement(target || null);
-  }
-  bindCollector(collector) {
-    this._instance.bindCollector(collector || null);
-  }
-  get layout() {
-    return this._instance.config.layout;
-  }
-  updateLayout(layout) {
-    this._instance.updateLayout(layout);
-  }
-  insertMedia(params) {
-    this._instance.insertMedia(params);
-  }
-  insertDocs(arg1, arg2) {
-    if (typeof arg1 === "object" && "fileType" in arg1) {
-      return this._instance.insertDocs(arg1);
-    } else if (arg2 && arg2.status !== "Finished") {
-      throw new Error("[WhiteboardApp] cannot insert a converting doc");
-    } else if (arg2 && arg2.progress) {
-      const scenes = arg2.progress.convertedFileList.map((f2, i) => ({
-        name: String(i + 1),
-        ppt: {
-          src: f2.conversionFileUrl,
-          width: f2.width,
-          height: f2.height,
-          previewURL: f2.preview
-        }
-      }));
-      const uid = genUID();
-      const scenePath = `/${arg2.uuid}/${uid}`;
-      const { scenesWithoutPPT, taskId, url } = makeSlideParams(scenes);
-      if (taskId && url) {
-        return this._instance.insertDocs({
-          fileType: "pptx",
-          scenePath,
-          taskId,
-          title: arg1,
-          url,
-          scenes: scenesWithoutPPT
-        });
-      } else {
-        return this._instance.insertDocs({
-          fileType: "pdf",
-          scenePath,
-          scenes,
-          title: arg1
-        });
-      }
-    }
-  }
-  insertCodeEditor() {
-    return this._instance.insertCodeEditor();
-  }
-  insertGeoGebra() {
-    return this._instance.insertGeoGebra();
-  }
-  insertCountdown() {
-    return this._instance.insertCountdown();
-  }
-  changeLanguage(language) {
-    return this._instance.changeLanguage(language);
-  }
-  dispose() {
-    return this._instance.dispose();
-  }
-}
-const version = "0.0.10";
-function useLastValue(value) {
-  const ref = useRef(value);
-  useEffect(() => {
-    ref.current = value;
-  }, [value]);
-  return ref.current;
-}
-const EMPTY_ARRAY = [];
-function useForceUpdate() {
-  const [, forceUpdate_] = useState({});
-  return useCallback(() => forceUpdate_({}), EMPTY_ARRAY);
-}
-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 useCombinedRefs(...refs) {
-  const targetRef = useRef(null);
-  useEffect(() => {
-    for (const ref of refs) {
-      if (!ref)
-        continue;
-      if (typeof ref === "function") {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    }
-  }, [refs]);
-  return targetRef;
-}
-const Fastboard = forwardRef((_c, outerRef) => {
-  var _d = _c, {
-    app
-  } = _d, restProps = __objRest(_d, [
-    "app"
-  ]);
-  const innerRef = useRef(null);
-  const ref = useCombinedRefs(outerRef, innerRef);
-  const previous = useLastValue(app);
-  useEffect(() => {
-    if (previous && previous !== app) {
-      previous.bindElement(null);
-    }
-    if (app) {
-      app.bindElement(ref.current);
-    }
-  }, [app, previous, ref]);
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
-    className: "fastboard"
-  }, restProps), {
-    ref
-  }));
-});
-const register = WindowManager.register.bind(WindowManager);
-async function createWhiteboardApp(config) {
-  const app = new WhiteboardApp(config);
-  await app._instance.readyPromise;
-  return app;
-}
-export { Fastboard, PageControl, PlayerControl, RedoUndo, Toolbar, WhiteboardApp, ZoomControl, createWhiteboardApp, register, version };
-//# sourceMappingURL=index.es.js.map