@netless/fastboard-react 0.1.0 → 0.2.2

package/dist/index.js

@@ -68,6 +68,7 @@ __export(src_exports, {
   ThemeContext: () => ThemeContext,
   Toolbar: () => Toolbar,
   ZoomControl: () => ZoomControl,
+  mount: () => mount,
   useBoxState: () => useBoxState,
   useFastboardApp: () => useFastboardApp,
   useFastboardValue: () => useFastboardValue,
@@ -84,10 +85,6 @@ __export(src_exports, {
   useZoomControl: () => useZoomControl
 });
 
-// ../../node_modules/.pnpm/tsup@5.11.11_typescript@4.5.4/node_modules/tsup/assets/cjs_shims.js
-var getImportMetaUrl = () => typeof document === "undefined" ? new URL("file:" + __filename).href : document.currentScript && document.currentScript.src || new URL("main.js", document.baseURI).href;
-var importMetaUrl = getImportMetaUrl();
-
 // src/internal/helpers.ts
 function noop() {
   return;
@@ -139,7 +136,7 @@ function useForceUpdate() {
 }
 
 // src/style.scss?inline
-var style_default = '.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;will-change:transform;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image,.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7;touch-action:manipulation}.telebox-title-area{overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin: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-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.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 .telebox-drag-area{height:100%;min-width:16px;position:static;margin:0;flex-grow:1;flex-shrink:0}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;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{height:100%;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;user-select:none}.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-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:1em;height:1em}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:40px}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.tippy-box.fastboard-tip{color:#eee;background-color:#000000f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.tippy-box.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#000}.tippy-box.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#000}\n';
+var style_default = '.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 .1s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;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{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;touch-action:manipulation}.telebox-title-area{overflow:hidden;position:relative;height:100%;flex:1;display:flex;align-items:center}.telebox-title{overflow:hidden;margin: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-drag-area{position:absolute;inset:0;margin:auto;z-index:10}.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 .telebox-drag-area{height:100%;min-width:16px;position:static;margin:0;flex-grow:1;flex-shrink:0}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{height:100%;margin:0;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{height:100%;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;user-select:none}.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-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{position:absolute;top:0;left:0;height:calc(100% - 48px);padding:16px;z-index:201;display:flex;align-items:center}.fastboard-bottom-left,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200}.fastboard-bottom-right{left:initial;right:8px}.fastboard-redo-undo{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-redo-undo.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-redo-undo.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:1em;height:1em}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-page-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-page-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:1em;height:1em}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-page-control-cut-line{height:24px;width:.5px}.fastboard-page-control-cut-line.light{background-color:#e7e7e7}.fastboard-page-control-cut-line.dark{background-color:#ffffff26}.fastboard-page-control-slash{opacity:.6}.fastboard-page-control-page,.fastboard-page-control-slash,.fastboard-page-control-page-count{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-zoom-control{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-zoom-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-zoom-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:1em;height:1em}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-zoom-control-cut-line{height:24px;width:.5px}.fastboard-zoom-control-cut-line.light{background-color:#e7e7e7}.fastboard-zoom-control-cut-line.dark{background-color:#ffffff26}.fastboard-zoom-control-percent{opacity:.6}.fastboard-zoom-control-scale,.fastboard-zoom-control-percent{font-size:12px;font-variant-numeric:tabular-nums}.fastboard-toolbar{display:flex;align-items:center;padding:4px;border-radius:4px;flex-direction:column;gap:4px;position:absolute;z-index:100;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .rc-slider{padding:6px 0}.fastboard-toolbar .rc-slider-rail,.fastboard-toolbar .rc-slider-track{height:2px}.fastboard-toolbar .tippy-content{padding:8px}.fastboard-toolbar .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-toolbar .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-toolbar.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.expanded{border:1px solid rgba(0,0,0,.15)}.fastboard-toolbar.dark{color:#ddd;background-color:#333333d9}.fastboard-toolbar.expanded:hover{box-shadow:0 0 5px #00000040;transform:translate(0)}.fastboard-toolbar.collapsed{padding:0;background-color:transparent}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{margin-right:-4px;width:24px;height:24px;border-radius:4px;background-color:#ffffff1a;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;position:relative}.fastboard-toolbar-btn-interactive{display:inline-block;width:32px;height:32px}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-cut-line{display:inline-block;height:.5px;width:100%}.fastboard-toolbar-cut-line.light{background-color:#e7e7e7}.fastboard-toolbar-cut-line.dark{background-color:#ffffff26}.fastboard-toolbar-section{display:inline-flex;flex-flow:column nowrap;gap:4px;scroll-behavior:smooth}.fastboard-toolbar-section.collapsed{transform:translate(-100%);transition:1s transform}.fastboard-toolbar-panel{width:120px;padding:0;display:flex;flex-flow:column nowrap;align-items:center;gap:8px}.fastboard-toolbar-panel.apps{width:224px}.fastboard-toolbar-color-box,.fastboard-toolbar-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-color-box .fastboard-toolbar-btn,.fastboard-toolbar-shapes .fastboard-toolbar-btn{padding:0;width:24px;height:24px}.fastboard-toolbar-apps{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;align-items:center;justify-items:center}.fastboard-toolbar-apps .fastboard-toolbar-btn{width:40px;height:40px;font-size:0}.fastboard-toolbar-app-icon{padding-top:4px;display:inline-flex;flex-flow:column nowrap;align-items:center;gap:4px}.fastboard-toolbar-app-icon .fastboard-toolbar-btn{padding:0}.fastboard-toolbar-app-icon-text{font-size:12px;color:#5d5d5d;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fastboard-toolbar-color-item{width:24px;height:24px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-item *.light:hover{background-color:#f5f5f5}.fastboard-toolbar-color-item *.dark:hover{background-color:#333}.fastboard-toolbar-color-border{width:24px;height:24px;border:1px solid transparent;border-radius:4px;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-border.active.light,.fastboard-toolbar-color-border.active.dark{border:1px solid rgba(51,129,255,.8)}.fastboard-toolbar-color-btn{margin:0;border:1px solid rgba(0,0,0,.24);padding:0;appearance:none;width:16px;height:16px;border-radius:4px;cursor:pointer}.fastboard-toolbar-color-btn:focus-visible{outline-offset:2px}.fastboard-toolbar-mask{position:absolute;left:calc(100% + 1px);top:50%;transform:translateY(-50%)}.fastboard-toolbar-mask.dark{left:100%}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer}.fastboard-toolbar-mask-btn.dark{filter:invert(.8)}.fastboard-toolbar-expand-btn{display:flex;align-items:center;position:absolute;left:0}.fastboard-player-control{width:100%;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:4px;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control.auto-hide{opacity:0;transition:opacity .2s}.fastboard-player-control.auto-hide:hover{opacity:1}.fastboard-player-control .rc-slider-disabled{background:transparent;opacity:.5}.fastboard-player-control .rc-slider-rail,.fastboard-player-control .rc-slider-track{height:2px}.fastboard-player-control .tippy-content{padding:8px}.fastboard-player-control .tippy-box{border:1px solid rgba(0,0,0,.15);background-color:#333333f2;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.fastboard-player-control .tippy-box[data-theme~=light]{background-color:#fffffff2;box-shadow:0 5px 10px #00000040}.fastboard-player-control.light{color:#333;background-color:#ffffffd9;border:1px solid rgba(0,0,0,.15)}.fastboard-player-control.dark{color:#ddd;background-color:#333333d9;border:1px solid rgba(0,0,0,.45)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;min-width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:24px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:1em;height:1em}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:#3381ff1a}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:#3381ff40}.fastboard-player-control-btn.loading{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-panel{padding:0;display:flex;flex-flow:column nowrap;align-items:stretch;gap:4px}.fastboard-player-control-panel .fastboard-player-control-btn{width:initial;height:initial;user-select:none;font-size:12px;padding:4px;justify-content:flex-end}.fastboard-player-control-panel .fastboard-player-control-btn.active{color:#3381ff}.fastboard-player-control-slider{width:100%;padding:0 7px}.fastboard-player-control-slider.loading{cursor:not-allowed}.fastboard-player-control-slash{opacity:.6}.fastboard-player-control-current,.fastboard-player-control-slash,.fastboard-player-control-total,.fastboard-player-control-speed-text{font-size:12px;font-variant-numeric:tabular-nums}.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';
 
 // src/behaviors/style.ts
 applyStyles(style_default);
@@ -147,8 +144,8 @@ applyStyles(style_default);
 // src/components/hooks.ts
 var import_window_manager = require("@netless/window-manager");
 var import_react2 = require("react");
-var FastboardAppContext = (0, import_react2.createContext)(null);
-var ThemeContext = (0, import_react2.createContext)("light");
+var FastboardAppContext = /* @__PURE__ */ (0, import_react2.createContext)(null);
+var ThemeContext = /* @__PURE__ */ (0, import_react2.createContext)("light");
 function useTheme(userTheme) {
   const themeFromContext = (0, import_react2.useContext)(ThemeContext);
   return userTheme || themeFromContext;
@@ -293,7 +290,7 @@ var createI18n = async ({
   });
   return import_i18next.default;
 };
-var I18nContext = (0, import_react4.createContext)(null);
+var I18nContext = /* @__PURE__ */ (0, import_react4.createContext)(null);
 function useTranslation() {
   const i18n = (0, import_react4.useContext)(I18nContext);
   const t = (0, import_react4.useMemo)(() => i18n ? i18n.getFixedT(null, ["translation"]) : (id) => id, [i18n]);
@@ -303,7 +300,7 @@ function useTranslation() {
 // src/icons/index.tsx
 var import_react5 = __toESM(require("react"));
 function Icon({ fallback, src, alt = "[icon]" }) {
-  return src ? import_react5.default.createElement("img", {
+  return src ? /* @__PURE__ */ import_react5.default.createElement("img", {
     src,
     alt,
     title: alt
@@ -341,17 +338,17 @@ var RightOffset = [0, 11];
 function Redo({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react6.default.createElement("svg", {
+  return /* @__PURE__ */ import_react6.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react6.default.createElement("g", {
+  }, /* @__PURE__ */ import_react6.default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke,
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, import_react6.default.createElement("path", {
+  }, /* @__PURE__ */ import_react6.default.createElement("path", {
     d: "M14 14h4v-4"
-  }), import_react6.default.createElement("path", {
+  }), /* @__PURE__ */ import_react6.default.createElement("path", {
     d: "m18 14-.788-.9A7.005 7.005 0 0 0 6 14h0"
   })));
 }
@@ -361,17 +358,17 @@ var import_react7 = __toESM(require("react"));
 function Undo({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react7.default.createElement("svg", {
+  return /* @__PURE__ */ import_react7.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react7.default.createElement("g", {
+  }, /* @__PURE__ */ import_react7.default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     stroke,
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, import_react7.default.createElement("path", {
+  }, /* @__PURE__ */ import_react7.default.createElement("path", {
     d: "M10 14H6v-4"
-  }), import_react7.default.createElement("path", {
+  }), /* @__PURE__ */ import_react7.default.createElement("path", {
     d: "m6 14 .788-.9A7.005 7.005 0 0 1 18 14h0"
   })));
 }
@@ -384,9 +381,9 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
   const writable = useWritable();
   const { redoSteps, undoSteps, redo, undo } = useRedoUndo();
   const disabled = !writable;
-  return import_react9.default.createElement("div", {
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
     className: (0, import_clsx.default)(name, theme)
-  }, import_react9.default.createElement(import_react8.default, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react8.default, {
     className: "fastboard-tip",
     content: t("undo"),
     theme,
@@ -395,17 +392,17 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react9.default.createElement("button", {
+  }, /* @__PURE__ */ import_react9.default.createElement("button", {
     className: (0, import_clsx.default)(`${name}-btn`, "undo", theme),
     disabled: disabled || undoSteps === 0,
     onClick: undo
-  }, import_react9.default.createElement(Icon, {
-    fallback: import_react9.default.createElement(Undo, {
+  }, /* @__PURE__ */ import_react9.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react9.default.createElement(Undo, {
       theme
     }),
     src: undoSteps === 0 ? undoIconDisable : undoIcon,
     alt: "[undo]"
-  }))), import_react9.default.createElement(import_react8.default, {
+  }))), /* @__PURE__ */ import_react9.default.createElement(import_react8.default, {
     className: "fastboard-tip",
     content: t("redo"),
     theme,
@@ -414,12 +411,12 @@ function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react9.default.createElement("button", {
+  }, /* @__PURE__ */ import_react9.default.createElement("button", {
     className: (0, import_clsx.default)(`${name}-btn`, "redo", theme),
     disabled: disabled || redoSteps === 0,
     onClick: redo
-  }, import_react9.default.createElement(Icon, {
-    fallback: import_react9.default.createElement(Redo, {
+  }, /* @__PURE__ */ import_react9.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react9.default.createElement(Redo, {
       theme
     }),
     src: redoSteps === 0 ? redoIconDisable : redoIcon,
@@ -501,9 +498,9 @@ var import_react11 = __toESM(require("react"));
 function Minus({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react11.default.createElement("svg", {
+  return /* @__PURE__ */ import_react11.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react11.default.createElement("path", {
+  }, /* @__PURE__ */ import_react11.default.createElement("path", {
     fill: "none",
     stroke,
     strokeLinecap: "round",
@@ -517,9 +514,9 @@ var import_react12 = __toESM(require("react"));
 function Plus({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react12.default.createElement("svg", {
+  return /* @__PURE__ */ import_react12.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react12.default.createElement("path", {
+  }, /* @__PURE__ */ import_react12.default.createElement("path", {
     fill: "none",
     stroke,
     strokeLinecap: "round",
@@ -533,22 +530,22 @@ var import_react13 = __toESM(require("react"));
 function Reset({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react13.default.createElement("svg", {
+  return /* @__PURE__ */ import_react13.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react13.default.createElement("g", {
+  }, /* @__PURE__ */ import_react13.default.createElement("g", {
     fill: "none",
     fillRule: "evenodd",
     transform: "translate(-176 -684)"
-  }, import_react13.default.createElement("path", {
+  }, /* @__PURE__ */ import_react13.default.createElement("path", {
     stroke,
     strokeLinejoin: "round",
     d: "M188 688v4m0 8v4m8-8h-4m-8 0h-4"
-  }), import_react13.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react13.default.createElement("circle", {
     cx: "188",
     cy: "696",
     r: "6",
     stroke
-  }), import_react13.default.createElement("circle", {
+  }), /* @__PURE__ */ import_react13.default.createElement("circle", {
     cx: "188",
     cy: "696",
     r: "1",
@@ -572,9 +569,9 @@ function ZoomControl({
   const writable = useWritable();
   const { scale, resetCamera, zoomIn, zoomOut } = useZoomControl();
   const disabled = !writable;
-  return import_react15.default.createElement("div", {
+  return /* @__PURE__ */ import_react15.default.createElement("div", {
     className: (0, import_clsx2.default)(name2, theme)
-  }, import_react15.default.createElement(import_react14.default, {
+  }, /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
     className: "fastboard-tip",
     content: t("zoomOut"),
     theme,
@@ -583,21 +580,21 @@ function ZoomControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react15.default.createElement("button", {
+  }, /* @__PURE__ */ import_react15.default.createElement("button", {
     className: (0, import_clsx2.default)(`${name2}-btn`, "minus", theme),
     disabled,
     onClick: zoomOut
-  }, import_react15.default.createElement(Icon, {
-    fallback: import_react15.default.createElement(Minus, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react15.default.createElement(Minus, {
       theme
     }),
     src: disabled ? minusIconDisable : minusIcon,
     alt: "[minus]"
-  }))), import_react15.default.createElement("span", {
+  }))), /* @__PURE__ */ import_react15.default.createElement("span", {
     className: (0, import_clsx2.default)(`${name2}-scale`, theme)
-  }, Math.ceil(scale * 100)), import_react15.default.createElement("span", {
+  }, Math.ceil(scale * 100)), /* @__PURE__ */ import_react15.default.createElement("span", {
     className: (0, import_clsx2.default)(`${name2}-percent`, theme)
-  }, "%"), import_react15.default.createElement(import_react14.default, {
+  }, "%"), /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
     className: "fastboard-tip",
     content: t("zoomIn"),
     theme,
@@ -606,17 +603,17 @@ function ZoomControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react15.default.createElement("button", {
+  }, /* @__PURE__ */ import_react15.default.createElement("button", {
     className: (0, import_clsx2.default)(`${name2}-btn`, "plus", theme),
     disabled,
     onClick: zoomIn
-  }, import_react15.default.createElement(Icon, {
-    fallback: import_react15.default.createElement(Plus, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react15.default.createElement(Plus, {
       theme
     }),
     src: disabled ? plusIconDisable : plusIcon,
     alt: "[plus]"
-  }))), import_react15.default.createElement(import_react14.default, {
+  }))), /* @__PURE__ */ import_react15.default.createElement(import_react14.default, {
     className: "fastboard-tip",
     content: t("reset"),
     theme,
@@ -625,12 +622,12 @@ function ZoomControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react15.default.createElement("button", {
+  }, /* @__PURE__ */ import_react15.default.createElement("button", {
     className: (0, import_clsx2.default)(`${name2}-btn`, "reset", theme),
     disabled,
     onClick: resetCamera
-  }, import_react15.default.createElement(Icon, {
-    fallback: import_react15.default.createElement(Reset, {
+  }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react15.default.createElement(Reset, {
       theme
     }),
     src: disabled ? resetIconDisable : resetIcon,
@@ -640,58 +637,21 @@ function ZoomControl({
 
 // src/components/PageControl/hooks.ts
 var import_react16 = require("react");
-function usePageControl(room, manager) {
-  const [pageIndex, setPageIndex] = (0, import_react16.useState)(0);
-  const [pageCount, setPageCount] = (0, import_react16.useState)(0);
+function usePageControl() {
+  const app = useFastboardApp();
+  const pageIndex = useFastboardValue(app.sceneIndex);
+  const pageCount = useFastboardValue(app.sceneLength);
   const addPage = (0, import_react16.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 = (0, import_react16.useCallback)(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex - 1);
-    } else if (room) {
-      room.pptPreviousStep();
-    }
-  }, [room, manager, pageIndex]);
-  const nextPage = (0, import_react16.useCallback)(() => {
-    if (manager) {
-      manager.setMainViewSceneIndex(pageIndex + 1);
-    } else if (room) {
-      room.pptNextStep();
-    }
-  }, [room, manager, pageIndex]);
-  (0, import_react16.useEffect)(() => {
-    if (room) {
-      setPageIndex(room.state.sceneState.index);
-      setPageCount(room.state.sceneState.scenes.length);
-      if (manager) {
-        manager.emitter.on("mainViewSceneIndexChange", setPageIndex);
-        return () => {
-          manager.emitter.off("mainViewSceneIndexChange", setPageIndex);
-        };
-      } else {
-        const onRoomStateChanged = (modifyState) => {
-          if (modifyState.sceneState) {
-            setPageIndex(modifyState.sceneState.index);
-            setPageCount(modifyState.sceneState.scenes.length);
-          }
-        };
-        room.callbacks.on("onRoomStateChanged", onRoomStateChanged);
-        return () => {
-          room.callbacks.off("onRoomStateChanged", onRoomStateChanged);
-        };
-      }
-    }
-  }, [room, manager]);
+    await app.manager.switchMainViewToWriter();
+    app.room.putScenes(app.manager.mainViewSceneDir, [{}], pageIndex + 1);
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
+  const prevPage = (0, import_react16.useCallback)(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex - 1);
+  }, [app, pageIndex]);
+  const nextPage = (0, import_react16.useCallback)(async () => {
+    await app.manager.setMainViewSceneIndex(pageIndex + 1);
+  }, [app, pageIndex]);
   return { pageIndex, pageCount, prevPage, nextPage, addPage };
 }
 
@@ -705,9 +665,9 @@ var import_react17 = __toESM(require("react"));
 function ChevronLeft({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react17.default.createElement("svg", {
+  return /* @__PURE__ */ import_react17.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react17.default.createElement("path", {
+  }, /* @__PURE__ */ import_react17.default.createElement("path", {
     fill: "none",
     stroke,
     strokeLinecap: "round",
@@ -721,9 +681,9 @@ var import_react18 = __toESM(require("react"));
 function ChevronRight({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react18.default.createElement("svg", {
+  return /* @__PURE__ */ import_react18.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react18.default.createElement("path", {
+  }, /* @__PURE__ */ import_react18.default.createElement("path", {
     fill: "none",
     stroke,
     strokeLinecap: "round",
@@ -737,9 +697,9 @@ var import_react19 = __toESM(require("react"));
 function FilePlus({ theme = "light", active }) {
   const config = themes[theme];
   const stroke = active ? config.activeColor : config.color;
-  return import_react19.default.createElement("svg", {
+  return /* @__PURE__ */ import_react19.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react19.default.createElement("path", {
+  }, /* @__PURE__ */ import_react19.default.createElement("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"
   }));
@@ -756,15 +716,14 @@ function PageControl({
   nextIcon,
   nextIconDisable
 }) {
-  const app = useFastboardApp();
   theme = useTheme(theme);
   const { t } = useTranslation();
   const writable = useWritable();
-  const _a = usePageControl(app.room, app.manager), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
+  const _a = usePageControl(), { pageIndex, pageCount } = _a, actions = __objRest(_a, ["pageIndex", "pageCount"]);
   const disabled = !writable;
-  return import_react21.default.createElement("div", {
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
     className: (0, import_clsx3.default)(name3, theme)
-  }, import_react21.default.createElement(import_react20.default, {
+  }, /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
     className: "fastboard-tip",
     content: t("prevPage"),
     theme,
@@ -773,23 +732,23 @@ function PageControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react21.default.createElement("button", {
+  }, /* @__PURE__ */ import_react21.default.createElement("button", {
     className: (0, import_clsx3.default)(`${name3}-btn`, "prev", theme),
     disabled: disabled || pageIndex === 0,
     onClick: actions.prevPage
-  }, import_react21.default.createElement(Icon, {
-    fallback: import_react21.default.createElement(ChevronLeft, {
+  }, /* @__PURE__ */ import_react21.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react21.default.createElement(ChevronLeft, {
       theme
     }),
     src: disabled ? prevIconDisable : prevIcon,
     alt: "[prev]"
-  }))), import_react21.default.createElement("span", {
+  }))), /* @__PURE__ */ import_react21.default.createElement("span", {
     className: (0, import_clsx3.default)(`${name3}-page`, theme)
-  }, pageCount === 0 ? "\u2026" : pageIndex + 1), import_react21.default.createElement("span", {
+  }, pageCount === 0 ? "\u2026" : pageIndex + 1), /* @__PURE__ */ import_react21.default.createElement("span", {
     className: (0, import_clsx3.default)(`${name3}-slash`, theme)
-  }, "/"), import_react21.default.createElement("span", {
+  }, "/"), /* @__PURE__ */ import_react21.default.createElement("span", {
     className: (0, import_clsx3.default)(`${name3}-page-count`, theme)
-  }, pageCount), import_react21.default.createElement(import_react20.default, {
+  }, pageCount), /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
     className: "fastboard-tip",
     content: t("nextPage"),
     theme,
@@ -798,17 +757,17 @@ function PageControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react21.default.createElement("button", {
+  }, /* @__PURE__ */ import_react21.default.createElement("button", {
     className: (0, import_clsx3.default)(`${name3}-btn`, "next", theme),
     disabled: disabled || pageIndex === pageCount - 1,
     onClick: actions.nextPage
-  }, import_react21.default.createElement(Icon, {
-    fallback: import_react21.default.createElement(ChevronRight, {
+  }, /* @__PURE__ */ import_react21.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react21.default.createElement(ChevronRight, {
       theme
     }),
     src: disabled ? nextIconDisable : nextIcon,
     alt: "[next]"
-  }))), import_react21.default.createElement(import_react20.default, {
+  }))), /* @__PURE__ */ import_react21.default.createElement(import_react20.default, {
     className: "fastboard-tip",
     content: t("addPage"),
     theme,
@@ -817,12 +776,12 @@ function PageControl({
     delay: [1e3, 400],
     duration: 300,
     offset: TopOffset
-  }, import_react21.default.createElement("button", {
+  }, /* @__PURE__ */ import_react21.default.createElement("button", {
     className: (0, import_clsx3.default)(`${name3}-btn`, "add", theme),
     disabled,
     onClick: actions.addPage
-  }, import_react21.default.createElement(Icon, {
-    fallback: import_react21.default.createElement(FilePlus, {
+  }, /* @__PURE__ */ import_react21.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react21.default.createElement(FilePlus, {
       theme
     }),
     src: disabled ? addIconDisable : addIcon,
@@ -872,94 +831,56 @@ var EmptyToolbarHook = {
 // src/components/Toolbar/Toolbar.tsx
 var import_clsx9 = __toESM(require("clsx"));
 var import_framer_motion = require("framer-motion");
-var import_react60 = __toESM(require("react"));
-
-// src/components/Toolbar/components/assets/collapsed.png
-var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
+var import_react59 = __toESM(require("react"));
 
 // src/components/Toolbar/components/assets/expanded.png
 var expanded_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA5xJREFUeF7tnL9v00AUx5/TlRkJMSAxZ+jYCf4GtopK6dB2qBBsjshaJErboWVJpYaNLGDaIR2YYAFXqlxhlvzAJkhGJGlyDhVNSpWgyOiqBJnQ+urznW2Jy1JVVnKffv3x8yV9LxLE5CEBwFUA6ALAzyiZJFVVX21ubj7N5/MmACAAGEQBJDWbzQZCqGcYRm52dlbpdDpNAPgRNozkOE691+tBo9FItNtto1AorC0tLX0EAAzUDwvoDGS02NHREU4IarXatizLOV3XvwHAdwBweAP9BYIXGwwGcHh4mLBtG2matrGwsPB2mA5Xmf8BGf3lJycn+HRNtFqtd2HIfCEIBnIcBxBCEkKobxjGFk+ZPUFG6YQh86VAPGSuAUCbhcy+QMZktjVNW2cls28QD5k/A0CLtjJTg4zLbJpmLpVKvaStzIFAWMrMBISFzExBgsjMHIRWZm4gfmXmCnKezIqiLK+srOjDG+mfu3ooIG6Z6/X6r/39/Udzc3OvAQBX5jOYUEHwgqenp2BZlrS7u/sgnU6/Ge53wgfBMN1uV6pWq/b09PTdSqVSwtU49ERGp8myrISqqsszMzPPcSqRgRwfH0vlcvnD1NTUIgB8jQyk3+9DuVy2Jycn7wBANTIQvPsrlUqJZDJ5GwA+RQaCXSkWixPJZPKWABldOSKR8XeLIhGRCOkTBOGIcEQ4QkpAOEJKSNQR4YhwhJSAcISUkKgjTBy5fuPmNfxCNetLA/98srp25WFaxv+UpH5QnZpxEPz7/XuLnSAwzEBwFEFgmIIEgWEOQgvDBYQGhhuIXxiuIH5g/g8QP5czt0T8QFB/mHdeZXXXdr8QXEBoIJiD0EIwBQkCwQwksm0A9abD44lUl68A4ZEAkz0rDzDhiDg1JK+EI8IR4QgpAeEIKSFRR4QjwhFSAsIRUkKijsTSkdi0f8WmIS42LYKxaJqMRRtpLBpr8URTpK3GrrEYU1GUx6E3X7sHhUzTfJZKpV5cNFvBrY10NDqFEFKz2ex6Pp/3nDZhDuIaJrMPDg425ufncac3HrXzHCZjCuIar9vJZDI5TdPweN2lJpKYgLhlLBQKqzQDh4FA/MhI2ptQg/iVkTkIrYxMQdwyyrK8pet6uONxLGQMlAhLGalBXDK+z2azG6TKSFqIdNxrzNZXZSQtRDp+0eDxDmsZLwUSxvQqEWQ4nN4n3aZJLxT0uLS3t7cdhowk0Ph8gQGJNKzjvwGKWUjXcvHclAAAAABJRU5ErkJggg==";
 
-// src/components/Toolbar/components/Mask.tsx
-var import_react23 = __toESM(require("react"));
-var import_react_dom = __toESM(require("react-dom"));
-var Mask = import_react23.default.memo(({ toolbar, children }) => {
-  const [rootElement] = (0, import_react23.useState)(() => {
-    const element = document.createElement("div");
-    element.style.position = "absolute";
-    return element;
-  });
-  (0, import_react23.useEffect)(() => {
-    if (toolbar && rootElement) {
-      toolbar.appendChild(rootElement);
-    }
-  }, [rootElement, toolbar]);
-  (0, import_react23.useEffect)(() => {
-    if (rootElement && toolbar) {
-      toolbar.appendChild(rootElement);
-      const toolbarRect = toolbar.getBoundingClientRect();
-      const halfHeight = toolbarRect.height / 2 - 31;
-      rootElement.style.top = halfHeight + "px";
-      rootElement.style.left = "41px";
-      rootElement.style.width = "17px";
-      rootElement.style.height = "62px";
-      return () => {
-        toolbar.removeChild(rootElement);
-      };
-    }
-  }, [rootElement, toolbar]);
-  if (rootElement) {
-    return import_react_dom.default.createPortal(children, rootElement);
-  } else {
-    return null;
-  }
-});
-
 // src/components/Toolbar/Content.tsx
 var import_clsx8 = __toESM(require("clsx"));
-var import_react59 = __toESM(require("react"));
+var import_react58 = __toESM(require("react"));
 
 // src/components/Toolbar/components/ApplianceButtons.tsx
-var import_react46 = __toESM(require("react"));
+var import_react45 = __toESM(require("react"));
 var import_white_web_sdk = require("white-web-sdk");
 
 // src/components/Toolbar/icons/index.ts
-var import_react43 = require("react");
+var import_react42 = require("react");
 
 // src/components/Toolbar/icons/Apps.tsx
-var import_react24 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var Apps = (props) => {
   const stroke = getStroke(props);
-  return import_react24.default.createElement("svg", {
+  return /* @__PURE__ */ import_react23.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react24.default.createElement("g", {
+  }, /* @__PURE__ */ import_react23.default.createElement("g", {
     fill: stroke
-  }, import_react24.default.createElement("path", {
+  }, /* @__PURE__ */ import_react23.default.createElement("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"
-  }), import_react24.default.createElement("path", {
+  }), /* @__PURE__ */ import_react23.default.createElement("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"
   })));
 };
 
 // src/components/Toolbar/icons/Arrow.tsx
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var Arrow = (props) => {
   const stroke = getStroke(props);
-  return import_react25.default.createElement("svg", {
+  return /* @__PURE__ */ import_react24.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react25.default.createElement("path", {
+  }, /* @__PURE__ */ import_react24.default.createElement("path", {
     fill: stroke,
     d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
   }));
 };
 
 // src/components/Toolbar/icons/Circle.tsx
-var import_react26 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var Circle = (props) => {
   const stroke = getStroke(props);
-  return import_react26.default.createElement("svg", {
+  return /* @__PURE__ */ import_react25.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react26.default.createElement("rect", {
+  }, /* @__PURE__ */ import_react25.default.createElement("rect", {
     width: "15",
     height: "15",
     x: "4.5",
@@ -971,40 +892,40 @@ var Circle = (props) => {
 };
 
 // src/components/Toolbar/icons/Clean.tsx
-var import_react27 = __toESM(require("react"));
+var import_react26 = __toESM(require("react"));
 var Clean = (props) => {
   const stroke = getStroke(props);
-  return import_react27.default.createElement("svg", {
+  return /* @__PURE__ */ import_react26.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react27.default.createElement("path", {
+  }, /* @__PURE__ */ import_react26.default.createElement("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"
   }));
 };
 
 // src/components/Toolbar/icons/Clicker.tsx
-var import_react28 = __toESM(require("react"));
+var import_react27 = __toESM(require("react"));
 var Clicker = (props) => {
   const stroke = getStroke(props);
-  return import_react28.default.createElement("svg", {
+  return /* @__PURE__ */ import_react27.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react28.default.createElement("g", {
+  }, /* @__PURE__ */ import_react27.default.createElement("g", {
     fill: "none"
-  }, import_react28.default.createElement("path", {
+  }, /* @__PURE__ */ import_react27.default.createElement("path", {
     d: "M0 0h24v24H0z"
-  }), import_react28.default.createElement("path", {
+  }), /* @__PURE__ */ import_react27.default.createElement("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"
   })));
 };
 
 // src/components/Toolbar/icons/Collapse.tsx
-var import_react29 = __toESM(require("react"));
+var import_react28 = __toESM(require("react"));
 var Collapse = (props) => {
   const stroke = getStroke(props);
-  return import_react29.default.createElement("svg", {
+  return /* @__PURE__ */ import_react28.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react29.default.createElement("path", {
+  }, /* @__PURE__ */ import_react28.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
@@ -1012,12 +933,12 @@ var Collapse = (props) => {
 };
 
 // src/components/Toolbar/icons/Diamond.tsx
-var import_react30 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var Diamond = (props) => {
   const stroke = getStroke(props);
-  return import_react30.default.createElement("svg", {
+  return /* @__PURE__ */ import_react29.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react30.default.createElement("path", {
+  }, /* @__PURE__ */ import_react29.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
@@ -1025,12 +946,12 @@ var Diamond = (props) => {
 };
 
 // src/components/Toolbar/icons/Down.tsx
-var import_react31 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var Down = (props) => {
   const stroke = getStroke(props);
-  return import_react31.default.createElement("svg", {
+  return /* @__PURE__ */ import_react30.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react31.default.createElement("path", {
+  }, /* @__PURE__ */ import_react30.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
@@ -1038,24 +959,24 @@ var Down = (props) => {
 };
 
 // src/components/Toolbar/icons/Eraser.tsx
-var import_react32 = __toESM(require("react"));
+var import_react31 = __toESM(require("react"));
 var Eraser = (props) => {
   const stroke = getStroke(props);
-  return import_react32.default.createElement("svg", {
+  return /* @__PURE__ */ import_react31.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react32.default.createElement("path", {
+  }, /* @__PURE__ */ import_react31.default.createElement("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"
   }));
 };
 
 // src/components/Toolbar/icons/Expand.tsx
-var import_react33 = __toESM(require("react"));
+var import_react32 = __toESM(require("react"));
 var Expand = (props) => {
   const stroke = getStroke(props);
-  return import_react33.default.createElement("svg", {
+  return /* @__PURE__ */ import_react32.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react33.default.createElement("path", {
+  }, /* @__PURE__ */ import_react32.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
@@ -1063,36 +984,36 @@ var Expand = (props) => {
 };
 
 // src/components/Toolbar/icons/Line.tsx
-var import_react34 = __toESM(require("react"));
+var import_react33 = __toESM(require("react"));
 var Line = (props) => {
   const stroke = getStroke(props);
-  return import_react34.default.createElement("svg", {
+  return /* @__PURE__ */ import_react33.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react34.default.createElement("path", {
+  }, /* @__PURE__ */ import_react33.default.createElement("path", {
     fill: stroke,
     d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
   }));
 };
 
 // src/components/Toolbar/icons/Pencil.tsx
-var import_react35 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 var Pencil = (props) => {
   const stroke = getStroke(props);
-  return import_react35.default.createElement("svg", {
+  return /* @__PURE__ */ import_react34.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react35.default.createElement("path", {
+  }, /* @__PURE__ */ import_react34.default.createElement("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"
   }));
 };
 
 // src/components/Toolbar/icons/Rectangle.tsx
-var import_react36 = __toESM(require("react"));
+var import_react35 = __toESM(require("react"));
 var Rectangle = (props) => {
   const stroke = getStroke(props);
-  return import_react36.default.createElement("svg", {
+  return /* @__PURE__ */ import_react35.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react36.default.createElement("path", {
+  }, /* @__PURE__ */ import_react35.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M5.5 5.5h13v13h-13z"
@@ -1100,24 +1021,24 @@ var Rectangle = (props) => {
 };
 
 // src/components/Toolbar/icons/Selector.tsx
-var import_react37 = __toESM(require("react"));
+var import_react36 = __toESM(require("react"));
 var Selector = (props) => {
   const stroke = getStroke(props);
-  return import_react37.default.createElement("svg", {
+  return /* @__PURE__ */ import_react36.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react37.default.createElement("path", {
+  }, /* @__PURE__ */ import_react36.default.createElement("path", {
     fill: stroke,
     d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
   }));
 };
 
 // src/components/Toolbar/icons/SpeechBalloon.tsx
-var import_react38 = __toESM(require("react"));
+var import_react37 = __toESM(require("react"));
 var SpeechBalloon = (props) => {
   const stroke = getStroke(props);
-  return import_react38.default.createElement("svg", {
+  return /* @__PURE__ */ import_react37.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react38.default.createElement("path", {
+  }, /* @__PURE__ */ import_react37.default.createElement("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"
@@ -1125,12 +1046,12 @@ var SpeechBalloon = (props) => {
 };
 
 // src/components/Toolbar/icons/Star.tsx
-var import_react39 = __toESM(require("react"));
+var import_react38 = __toESM(require("react"));
 var Star = (props) => {
   const stroke = getStroke(props);
-  return import_react39.default.createElement("svg", {
+  return /* @__PURE__ */ import_react38.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react39.default.createElement("path", {
+  }, /* @__PURE__ */ import_react38.default.createElement("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"
@@ -1138,24 +1059,24 @@ var Star = (props) => {
 };
 
 // src/components/Toolbar/icons/Text.tsx
-var import_react40 = __toESM(require("react"));
+var import_react39 = __toESM(require("react"));
 var Text = (props) => {
   const stroke = getStroke(props);
-  return import_react40.default.createElement("svg", {
+  return /* @__PURE__ */ import_react39.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react40.default.createElement("path", {
+  }, /* @__PURE__ */ import_react39.default.createElement("path", {
     fill: stroke,
     d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
   }));
 };
 
 // src/components/Toolbar/icons/Triangle.tsx
-var import_react41 = __toESM(require("react"));
+var import_react40 = __toESM(require("react"));
 var Triangle = (props) => {
   const stroke = getStroke(props);
-  return import_react41.default.createElement("svg", {
+  return /* @__PURE__ */ import_react40.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react41.default.createElement("path", {
+  }, /* @__PURE__ */ import_react40.default.createElement("path", {
     fill: "none",
     stroke,
     d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
@@ -1163,12 +1084,12 @@ var Triangle = (props) => {
 };
 
 // src/components/Toolbar/icons/Up.tsx
-var import_react42 = __toESM(require("react"));
+var import_react41 = __toESM(require("react"));
 var Up = (props) => {
   const stroke = getStroke(props);
-  return import_react42.default.createElement("svg", {
+  return /* @__PURE__ */ import_react41.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react42.default.createElement("path", {
+  }, /* @__PURE__ */ import_react41.default.createElement("path", {
     fill: "none",
     stroke,
     d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
@@ -1177,35 +1098,35 @@ var Up = (props) => {
 
 // src/components/Toolbar/icons/index.ts
 var Icons = {
-  Clicker: (0, import_react43.memo)(Clicker),
-  Collapse: (0, import_react43.memo)(Collapse),
-  Eraser: (0, import_react43.memo)(Eraser),
-  Expand: (0, import_react43.memo)(Expand),
-  Pencil: (0, import_react43.memo)(Pencil),
-  Selector: (0, import_react43.memo)(Selector),
-  Rectangle: (0, import_react43.memo)(Rectangle),
-  Text: (0, import_react43.memo)(Text),
-  Apps: (0, import_react43.memo)(Apps),
-  Clean: (0, import_react43.memo)(Clean),
-  Circle: (0, import_react43.memo)(Circle),
-  Line: (0, import_react43.memo)(Line),
-  Arrow: (0, import_react43.memo)(Arrow),
-  Star: (0, import_react43.memo)(Star),
-  Diamond: (0, import_react43.memo)(Diamond),
-  SpeechBalloon: (0, import_react43.memo)(SpeechBalloon),
-  Triangle: (0, import_react43.memo)(Triangle),
-  Up: (0, import_react43.memo)(Up),
-  Down: (0, import_react43.memo)(Down)
+  Clicker: (0, import_react42.memo)(Clicker),
+  Collapse: (0, import_react42.memo)(Collapse),
+  Eraser: (0, import_react42.memo)(Eraser),
+  Expand: (0, import_react42.memo)(Expand),
+  Pencil: (0, import_react42.memo)(Pencil),
+  Selector: (0, import_react42.memo)(Selector),
+  Rectangle: (0, import_react42.memo)(Rectangle),
+  Text: (0, import_react42.memo)(Text),
+  Apps: (0, import_react42.memo)(Apps),
+  Clean: (0, import_react42.memo)(Clean),
+  Circle: (0, import_react42.memo)(Circle),
+  Line: (0, import_react42.memo)(Line),
+  Arrow: (0, import_react42.memo)(Arrow),
+  Star: (0, import_react42.memo)(Star),
+  Diamond: (0, import_react42.memo)(Diamond),
+  SpeechBalloon: (0, import_react42.memo)(SpeechBalloon),
+  Triangle: (0, import_react42.memo)(Triangle),
+  Up: (0, import_react42.memo)(Up),
+  Down: (0, import_react42.memo)(Down)
 };
 
 // src/components/Toolbar/components/Button.tsx
 var import_clsx4 = __toESM(require("clsx"));
-var import_react44 = __toESM(require("react"));
-var import_react45 = __toESM(require("@tippyjs/react"));
-var Button = (0, import_react44.forwardRef)((props, ref) => {
+var import_react43 = __toESM(require("react"));
+var import_react44 = __toESM(require("@tippyjs/react"));
+var Button = (0, import_react43.forwardRef)((props, ref) => {
   const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
-  const { writable, theme } = (0, import_react44.useContext)(ToolbarContext);
-  return import_react44.default.createElement(import_react45.default, {
+  const { writable, theme } = (0, import_react43.useContext)(ToolbarContext);
+  return /* @__PURE__ */ import_react43.default.createElement(import_react44.default, {
     className: "fastboard-tip",
     content,
     interactive,
@@ -1215,7 +1136,7 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
     offset: placement.includes("right") ? RightOffset : void 0,
     delay: [1e3, 400],
     duration: 300
-  }, import_react44.default.createElement("button", {
+  }, /* @__PURE__ */ import_react43.default.createElement("button", {
     ref,
     className: (0, import_clsx4.default)("fastboard-toolbar-btn", theme, { active }),
     onClick,
@@ -1227,9 +1148,9 @@ var Button = (0, import_react44.forwardRef)((props, ref) => {
 function renderToolTip(text, hotkey) {
   if (!(typeof hotkey === "string"))
     return text;
-  return import_react46.default.createElement("span", {
+  return /* @__PURE__ */ import_react45.default.createElement("span", {
     className: "fastboard-toolbar-tooltip"
-  }, import_react46.default.createElement("span", null, text), import_react46.default.createElement("span", {
+  }, /* @__PURE__ */ import_react45.default.createElement("span", null, text), /* @__PURE__ */ import_react45.default.createElement("span", {
     className: "fastboard-toolbar-hotkey"
   }, hotkey.toUpperCase()));
 }
@@ -1237,18 +1158,18 @@ function ClickerButton() {
   var _a;
   const app = useFastboardApp();
   const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = (0, import_react46.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react46.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.clicker), [setAppliance]);
+  const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.clicker), [setAppliance]);
   const shortcut = (_a = app.hotKeys) == null ? void 0 : _a.changeToClick;
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === import_white_web_sdk.ApplianceNames.clicker;
   const disabled = !writable;
-  return import_react46.default.createElement(Button, {
+  return /* @__PURE__ */ import_react45.default.createElement(Button, {
     content: renderToolTip(t("clicker"), shortcut),
     onClick: changeAppliance,
     active
-  }, import_react46.default.createElement(Icon, {
-    fallback: import_react46.default.createElement(Icons.Clicker, {
+  }, /* @__PURE__ */ import_react45.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clicker, {
       theme,
       active
     }),
@@ -1259,18 +1180,18 @@ function ClickerButton() {
 function SelectorButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = (0, import_react46.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react46.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.selector), [setAppliance]);
+  const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.selector), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === import_white_web_sdk.ApplianceNames.selector;
   const disabled = !writable;
   const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
-  return import_react46.default.createElement(Button, {
+  return /* @__PURE__ */ import_react45.default.createElement(Button, {
     content: renderToolTip(t("selector"), shortcut),
     onClick: changeAppliance,
     active
-  }, import_react46.default.createElement(Icon, {
-    fallback: import_react46.default.createElement(Icons.Selector, {
+  }, /* @__PURE__ */ import_react45.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Selector, {
       theme,
       active
     }),
@@ -1281,18 +1202,18 @@ function SelectorButton() {
 function EraserButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = (0, import_react46.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react46.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.eraser), [setAppliance]);
+  const { theme, icons, writable, setAppliance, memberState } = (0, import_react45.useContext)(ToolbarContext);
+  const changeAppliance = (0, import_react45.useCallback)(() => setAppliance(import_white_web_sdk.ApplianceNames.eraser), [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === import_white_web_sdk.ApplianceNames.eraser;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
-  return import_react46.default.createElement(Button, {
+  return /* @__PURE__ */ import_react45.default.createElement(Button, {
     content: renderToolTip(t("eraser"), shortcut),
     onClick: changeAppliance,
     active
-  }, import_react46.default.createElement(Icon, {
-    fallback: import_react46.default.createElement(Icons.Eraser, {
+  }, /* @__PURE__ */ import_react45.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Eraser, {
       theme,
       active
     }),
@@ -1302,13 +1223,13 @@ function EraserButton() {
 }
 function CleanButton() {
   const { t } = useTranslation();
-  const { theme, icons, writable, cleanCurrentScene } = (0, import_react46.useContext)(ToolbarContext);
+  const { theme, icons, writable, cleanCurrentScene } = (0, import_react45.useContext)(ToolbarContext);
   const disabled = !writable;
-  return import_react46.default.createElement(Button, {
+  return /* @__PURE__ */ import_react45.default.createElement(Button, {
     content: t("clean"),
     onClick: cleanCurrentScene
-  }, import_react46.default.createElement(Icon, {
-    fallback: import_react46.default.createElement(Icons.Clean, {
+  }, /* @__PURE__ */ import_react45.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react45.default.createElement(Icons.Clean, {
       theme
     }),
     src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
@@ -1317,8 +1238,8 @@ function CleanButton() {
 }
 
 // src/components/Toolbar/components/AppsButton.tsx
-var import_react47 = __toESM(require("@tippyjs/react"));
-var import_react48 = __toESM(require("react"));
+var import_react46 = __toESM(require("@tippyjs/react"));
+var import_react47 = __toESM(require("react"));
 
 // src/components/Toolbar/components/assets/vscode.png
 var vscode_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAABnxJREFUWMPtWWlsVFUUPve+ZTY6HUoLpS1tEUrLVooKLgWVTQGVfRWhiUpAECGGEgOJShRj9I9EjSEQIMhSBIKBQoBgQCMEKEuo1LKV7rRl2pm201nf3Hv8MdNKO/NmBqWFGE7Oj8nkzb3f+8653zn3DEFEePyMwmNpT2D9D2CJnb1BpcWx/WKdTYoZ01f/SpKoE0kkvyKdehKL7jat++WapalZlOS4wS+aNGRiMp2QLHWTySODde5Ow/r8YpvDCZxRgj2HjCKEAqHdZJiYIk5KEYwa2tWwjhXVfn3iptujACIwhQLEZWYT0oqDUINExvcRJqeKsTraRbDyCiq/P3Wbcw4AiByYVwCMzRz1Dyz/5kQn0rHJ4tsDRG37nHvIKY+Im34v3XGuDDm2fuODhoiAAU/bPSz/Dnq8fFmmprMEQmH8q+M3t54t9TLOEH3OETkCB1ALCnJ+slzpLIFwetj6I8Uni+ugfVYQBB9TIZLFw7FTYDU7ldwDf14st0Dg5oiICIAMgaiGPmI5vWF2SQJ5KkYTFpPZ5vpwb+H12iYIRkgrWxDiZGEkKs8Rfzhv3n7FQgnJyeq+ZESsJKimYIXFsXzXlSqrXe0B3prqXJ2tgBgGpLzC8IvTdVsKGrwK83i8mwsaVuRXm+1K0OWKa5rf2XGp3NLSluCBzgGMBu26qcM1oogIQR3Cwvr8dO3P1xoZIgPCgDDEP8ptc/ZWnKvsyMf50obFOy/fa3KELCJkcKJp9+LscYMTfaypeRhYR240ImfY3u7ZXEsPVW0qqGetdB+7VvNB3lVri4txVHMEMm9E8racEUkxegTg4BOLoB4O1ursXoTQQJ49infjWfPy/Kp6u5J3vnTNvit2hxPVLUqn+WrG0LWTMrSS0Hbc1KjiEE4g5g+LkQW6/lStx8sChe90ie2Nantz1U2ueECQgApAKZAOqUzS46O+nZPVN9bQQQVUpSsSgZg5xGTS0dzjdXaXO3ABq5NDj77YWAPORqAiUBGoQNqQETrr2T5rJ6YbNB1X5qAKC8MG0Wfj+hk3T02MNmgYQjAnPDoBoxM483KmcKYwzhiCTitvmD5kw9TBgZh8sEJ4pE3zM4n6n2b0iTeqyinqTBjXD4Gi4kHG+sXq894dOevpJNUwqahD0OCGKtXpcdq8OSmpMVpVTRJkHteP64zTshL2L83O6G0MsZoK8X5/wJrIFDCXoNIdZJ2aNIEpiZu6Iw3TjISoPwgPwtb12uaZP565VduE5hLusnGE4M7xwDXrtF13iu85Q2F6KEEsKLPM23zhbpOLUYkTEevLuN3qa1CCGOe3zM4Ze8rzCi2qHUzkGq8G63hR7YJtF+/ZnAwIJwKnIicSWiq5zRxicZvLs/pYde7xGruHBUQaWAiPhK28CxVLdl5usbv8QUJAQjkVUJCwqcbotSKQEAHdfbVhys7SEos7IIjqFsBYR1jbzpSu3l/oVrztmSBABE7lcZmpv60Y+eWrCYIg+LvhYMiK6hyTd5QeLGqMMIbh28DP8os8jAVSKIli7oQBK8b2FyjJGa4zaYWVR+863YpaajY63O8frrxQ7fhkTLxOom0C8S9nENOzkgBIu9dHiI/W57333KrxaQL1F5mpA007ZiZH6WTVaCIwxrdcrJ+ys6TM6ob/eBK/mZW58PkU9PW6AEjIy+k9T6waPTottsOTL6V2Ozg/tZdRGwIZ53i5qmXClr+OFJlDXuMiuL5yxA1Hizf+elugZOXY/rmvpYdomu9Y3DP3lJZZXSEuXOB1U2SJaUMJISrSgYULoyO6VRdWN8qCkBEfFTYPamzKnL1lhTWO4BKEjCgewpWEAcMIJWqX3qJF0RHJaWaiKRJMANA7Sjq0oG92ahQCCZo3vr4UH1apjty668R9c1PeHGhiAB3KOSJy7t9YFVbnjd0MsrBterJJK2y9VH//67d95AhqNzKJduaQUhbId68nrhnVixDappX+e75/OhJU4smMNE3nDikpIevH9Y7RCx+fuMsY950pisB9oDrKANVLdPYA6aMsuStmpytf6BmrF5cdrnZ7FETgiAQA4b4oEmqUydw0MWeQHG8Qum6ku2BYTA+d+Na+ima7AzgIiIgEAIBSk4YszJAWDZRjtF0+pPSPTytapu0qMVuaJYEkpA/rqSc5GeL8DNmkoY9y0gwAN+tdn542W6HbvEGG2WmSQXoMBuBP/lx5Auuxs78BCY9M0wbXBY0AAAAASUVORK5CYII=";
@@ -1331,21 +1252,21 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
 
 // src/components/Toolbar/components/AppsButton.tsx
 function AppsButton({ content, onClick }) {
-  const { theme, icons, writable } = (0, import_react48.useContext)(ToolbarContext);
+  const { theme, icons, writable } = (0, import_react47.useContext)(ToolbarContext);
   const disabled = !writable;
-  const button = import_react48.default.createElement(Button, {
+  const button = /* @__PURE__ */ import_react47.default.createElement(Button, {
     content: "Apps",
     onClick
-  }, import_react48.default.createElement(Icon, {
-    fallback: import_react48.default.createElement(Icons.Apps, {
+  }, /* @__PURE__ */ import_react47.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react47.default.createElement(Icons.Apps, {
       theme
     }),
     src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
     alt: "[apps]"
   }));
-  return content === false ? button : import_react48.default.createElement("span", {
+  return content === false ? button : /* @__PURE__ */ import_react47.default.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
-  }, import_react48.default.createElement(import_react47.default, {
+  }, /* @__PURE__ */ import_react47.default.createElement(import_react46.default, {
     className: "fastboard-tip",
     content: renderAppsButtonContent(content),
     theme,
@@ -1357,25 +1278,25 @@ function AppsButton({ content, onClick }) {
   }, button));
 }
 function renderAppsButtonContent(content) {
-  return import_react48.default.createElement("div", {
+  return /* @__PURE__ */ import_react47.default.createElement("div", {
     className: "fastboard-toolbar-panel apps"
-  }, import_react48.default.createElement("div", {
+  }, /* @__PURE__ */ import_react47.default.createElement("div", {
     className: "fastboard-toolbar-apps"
-  }, content || import_react48.default.createElement(DefaultApps, null)));
+  }, content || /* @__PURE__ */ import_react47.default.createElement(DefaultApps, null)));
 }
 function DefaultApps() {
   const app = useFastboardApp();
-  return import_react48.default.createElement(import_react48.default.Fragment, null, import_react48.default.createElement(AppIcon, {
+  return /* @__PURE__ */ import_react47.default.createElement(import_react47.default.Fragment, null, /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
     title: "Code Editor",
     src: vscode_default,
     alt: "[code editor]",
     onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
-  }), import_react48.default.createElement(AppIcon, {
+  }), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
     title: "GeoGebra",
     src: geogebra_default,
     alt: "[geogebra]",
     onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
-  }), import_react48.default.createElement(AppIcon, {
+  }), /* @__PURE__ */ import_react47.default.createElement(AppIcon, {
     title: "Countdown",
     src: countdown_default,
     alt: "[countdown]",
@@ -1383,29 +1304,29 @@ function DefaultApps() {
   }));
 }
 function AppIcon({ title, src, alt, onClick }) {
-  return import_react48.default.createElement("span", {
+  return /* @__PURE__ */ import_react47.default.createElement("span", {
     className: "fastboard-toolbar-app-icon"
-  }, import_react48.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react47.default.createElement(Button, {
     placement: "top",
     content: title,
     onClick
-  }, import_react48.default.createElement("img", {
+  }, /* @__PURE__ */ import_react47.default.createElement("img", {
     src,
     alt,
     title
-  })), import_react48.default.createElement("span", {
+  })), /* @__PURE__ */ import_react47.default.createElement("span", {
     className: "fastboard-toolbar-app-icon-text"
   }, title));
 }
 
 // src/components/Toolbar/components/PencilButton.tsx
-var import_react52 = __toESM(require("@tippyjs/react"));
-var import_react53 = __toESM(require("react"));
+var import_react51 = __toESM(require("@tippyjs/react"));
+var import_react52 = __toESM(require("react"));
 var import_white_web_sdk2 = require("white-web-sdk");
 
 // src/components/Toolbar/components/ColorBox.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react49 = __toESM(require("react"));
+var import_react48 = __toESM(require("react"));
 var colors = {
   "#E02020": [224, 32, 32],
   "#F7B500": [247, 181, 0],
@@ -1418,20 +1339,20 @@ var colors = {
 };
 var colorKeys = Object.keys(colors);
 function ColorBox() {
-  const { theme, memberState, setStrokeColor, writable } = (0, import_react49.useContext)(ToolbarContext);
+  const { theme, memberState, setStrokeColor, writable } = (0, import_react48.useContext)(ToolbarContext);
   const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
   const disabled = !writable;
-  return import_react49.default.createElement("div", {
+  return /* @__PURE__ */ import_react48.default.createElement("div", {
     className: (0, import_clsx5.default)("fastboard-toolbar-color-box", theme)
-  }, colorKeys.map((key) => import_react49.default.createElement("div", {
+  }, colorKeys.map((key) => /* @__PURE__ */ import_react48.default.createElement("div", {
     key,
     className: (0, import_clsx5.default)("fastboard-toolbar-color-item", theme),
     onClick: () => setStrokeColor(colors[key])
-  }, import_react49.default.createElement("div", {
+  }, /* @__PURE__ */ import_react48.default.createElement("div", {
     className: (0, import_clsx5.default)("fastboard-toolbar-color-border", theme, {
       active: strokeColor && isEqualArray(strokeColor, colors[key])
     })
-  }, import_react49.default.createElement("button", {
+  }, /* @__PURE__ */ import_react48.default.createElement("button", {
     className: (0, import_clsx5.default)("fastboard-toolbar-color-btn"),
     style: { background: key },
     disabled,
@@ -1444,10 +1365,10 @@ function ColorBox() {
 
 // src/components/Toolbar/components/CutLine.tsx
 var import_clsx6 = __toESM(require("clsx"));
-var import_react50 = __toESM(require("react"));
+var import_react49 = __toESM(require("react"));
 function CutLine() {
-  const { theme } = (0, import_react50.useContext)(ToolbarContext);
-  return import_react50.default.createElement("span", {
+  const { theme } = (0, import_react49.useContext)(ToolbarContext);
+  return /* @__PURE__ */ import_react49.default.createElement("span", {
     className: (0, import_clsx6.default)(`${name4}-cut-line`, theme)
   });
 }
@@ -1455,12 +1376,12 @@ function CutLine() {
 // src/components/Toolbar/components/Slider.tsx
 var import_clsx7 = __toESM(require("clsx"));
 var import_rc_slider = __toESM(require("rc-slider"));
-var import_react51 = __toESM(require("react"));
+var import_react50 = __toESM(require("react"));
 function Slider() {
-  const { theme, writable, memberState, setStrokeWidth } = (0, import_react51.useContext)(ToolbarContext);
+  const { theme, writable, memberState, setStrokeWidth } = (0, import_react50.useContext)(ToolbarContext);
   const { activeColor } = themes[theme];
   const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
-  return import_react51.default.createElement(import_rc_slider.default, {
+  return /* @__PURE__ */ import_react50.default.createElement(import_rc_slider.default, {
     disabled: !writable,
     className: (0, import_clsx7.default)("fastboard-toolbar-slider", theme),
     trackStyle: { background: activeColor },
@@ -1476,17 +1397,17 @@ function Slider() {
 function PencilButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = (0, import_react53.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react53.useCallback)(() => {
+  const { theme, icons, writable, setAppliance, memberState } = (0, import_react52.useContext)(ToolbarContext);
+  const changeAppliance = (0, import_react52.useCallback)(() => {
     setAppliance(import_white_web_sdk2.ApplianceNames.pencil);
   }, [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === import_white_web_sdk2.ApplianceNames.pencil;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
-  return import_react53.default.createElement("span", {
+  return /* @__PURE__ */ import_react52.default.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
-  }, import_react53.default.createElement(import_react52.default, {
+  }, /* @__PURE__ */ import_react52.default.createElement(import_react51.default, {
     className: "fastboard-tip",
     content: renderPencilButtonContent(),
     theme,
@@ -1495,30 +1416,30 @@ function PencilButton() {
     offset: RightOffset,
     arrow: false,
     interactive: true
-  }, import_react53.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react52.default.createElement(Button, {
     content: renderToolTip(t("pencil"), shortcut),
     active,
     onClick: changeAppliance
-  }, import_react53.default.createElement(Icon, {
-    fallback: import_react53.default.createElement(Icons.Pencil, {
+  }, /* @__PURE__ */ import_react52.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react52.default.createElement(Icons.Pencil, {
       theme,
       active
     }),
     src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
     alt: "[pencil]"
-  }), import_react53.default.createElement("span", {
+  }), /* @__PURE__ */ import_react52.default.createElement("span", {
     className: "fastboard-toolbar-triangle"
   }))));
 }
 function renderPencilButtonContent() {
-  return import_react53.default.createElement("div", {
+  return /* @__PURE__ */ import_react52.default.createElement("div", {
     className: "fastboard-toolbar-panel pencil"
-  }, import_react53.default.createElement(Slider, null), import_react53.default.createElement(CutLine, null), import_react53.default.createElement(ColorBox, null));
+  }, /* @__PURE__ */ import_react52.default.createElement(Slider, null), /* @__PURE__ */ import_react52.default.createElement(CutLine, null), /* @__PURE__ */ import_react52.default.createElement(ColorBox, null));
 }
 
 // src/components/Toolbar/components/ShapesButton.tsx
-var import_react54 = __toESM(require("@tippyjs/react"));
-var import_react55 = __toESM(require("react"));
+var import_react53 = __toESM(require("@tippyjs/react"));
+var import_react54 = __toESM(require("react"));
 var import_white_web_sdk4 = require("white-web-sdk");
 
 // src/components/Toolbar/const.ts
@@ -1554,15 +1475,15 @@ var MinHeight = ItemHeight * 2 - 4;
 var ShapeTypes = /* @__PURE__ */ new Set([...ApplianceShapes, ...Shapes]);
 function ShapesButton() {
   const { t } = useTranslation();
-  const { theme, memberState } = (0, import_react55.useContext)(ToolbarContext);
+  const { theme, memberState } = (0, import_react54.useContext)(ToolbarContext);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const shape = memberState == null ? void 0 : memberState.shapeType;
   const key = appliance === import_white_web_sdk4.ApplianceNames.shape ? shape : appliance;
   const active = ShapeTypes.has(key);
   const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
-  return import_react55.default.createElement("span", {
+  return /* @__PURE__ */ import_react54.default.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
-  }, import_react55.default.createElement(import_react54.default, {
+  }, /* @__PURE__ */ import_react54.default.createElement(import_react53.default, {
     className: "fastboard-tip",
     content: renderShapesButtonContent(),
     theme,
@@ -1571,31 +1492,31 @@ function ShapesButton() {
     offset: RightOffset,
     arrow: false,
     interactive: true
-  }, import_react55.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react54.default.createElement(Button, {
     content: t("shape"),
     active
-  }, import_react55.default.createElement(CurrentIcon, {
+  }, /* @__PURE__ */ import_react54.default.createElement(CurrentIcon, {
     theme,
     active
-  }), import_react55.default.createElement("span", {
+  }), /* @__PURE__ */ import_react54.default.createElement("span", {
     className: "fastboard-toolbar-triangle"
   }))));
 }
 function renderShapesButtonContent() {
-  return import_react55.default.createElement("div", {
+  return /* @__PURE__ */ import_react54.default.createElement("div", {
     className: "fastboard-toolbar-panel shapes"
-  }, import_react55.default.createElement(ShapesBox, null), import_react55.default.createElement(CutLine, null), import_react55.default.createElement(Slider, null), import_react55.default.createElement(CutLine, null), import_react55.default.createElement(ColorBox, null));
+  }, /* @__PURE__ */ import_react54.default.createElement(ShapesBox, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(Slider, null), /* @__PURE__ */ import_react54.default.createElement(CutLine, null), /* @__PURE__ */ import_react54.default.createElement(ColorBox, null));
 }
 function ShapesBox() {
   const { t } = useTranslation();
-  return import_react55.default.createElement("div", {
+  return /* @__PURE__ */ import_react54.default.createElement("div", {
     className: "fastboard-toolbar-shapes"
-  }, ApplianceShapes.map((Appliance) => import_react55.default.createElement(ApplianceShapeButton, {
+  }, ApplianceShapes.map((Appliance) => /* @__PURE__ */ import_react54.default.createElement(ApplianceShapeButton, {
     key: Appliance,
     content: t(Appliance),
     Appliance,
     Icon: ShapesMap[Appliance]
-  })), Shapes.map((shape) => import_react55.default.createElement(ShapeShapeButton, {
+  })), Shapes.map((shape) => /* @__PURE__ */ import_react54.default.createElement(ShapeShapeButton, {
     key: shape,
     content: t(shape),
     shape,
@@ -1603,53 +1524,53 @@ function ShapesBox() {
   })));
 }
 function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
-  const { theme, writable, setAppliance, memberState } = (0, import_react55.useContext)(ToolbarContext);
+  const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
   const current = memberState == null ? void 0 : memberState.currentApplianceName;
   const disabled = !writable;
-  return import_react55.default.createElement(Button, {
+  return /* @__PURE__ */ import_react54.default.createElement(Button, {
     content,
     disabled,
     placement: "top",
     onClick: () => setAppliance(Appliance)
-  }, import_react55.default.createElement(Icon2, {
+  }, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
     theme,
     active: current === Appliance
   }));
 }
 function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
-  const { theme, writable, setAppliance, memberState } = (0, import_react55.useContext)(ToolbarContext);
+  const { theme, writable, setAppliance, memberState } = (0, import_react54.useContext)(ToolbarContext);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const current = appliance === import_white_web_sdk4.ApplianceNames.shape && (memberState == null ? void 0 : memberState.shapeType);
   const disabled = !writable;
-  return import_react55.default.createElement(Button, {
+  return /* @__PURE__ */ import_react54.default.createElement(Button, {
     content,
     disabled,
     placement: "top",
     onClick: () => setAppliance(import_white_web_sdk4.ApplianceNames.shape, shape)
-  }, import_react55.default.createElement(Icon2, {
+  }, /* @__PURE__ */ import_react54.default.createElement(Icon2, {
     theme,
     active: current === shape
   }));
 }
 
 // src/components/Toolbar/components/TextButton.tsx
-var import_react56 = __toESM(require("@tippyjs/react"));
-var import_react57 = __toESM(require("react"));
+var import_react55 = __toESM(require("@tippyjs/react"));
+var import_react56 = __toESM(require("react"));
 var import_white_web_sdk5 = require("white-web-sdk");
 function TextButton() {
   const app = useFastboardApp();
   const { t } = useTranslation();
-  const { theme, icons, writable, setAppliance, memberState } = (0, import_react57.useContext)(ToolbarContext);
-  const changeAppliance = (0, import_react57.useCallback)(() => {
+  const { theme, icons, writable, setAppliance, memberState } = (0, import_react56.useContext)(ToolbarContext);
+  const changeAppliance = (0, import_react56.useCallback)(() => {
     setAppliance(import_white_web_sdk5.ApplianceNames.text);
   }, [setAppliance]);
   const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
   const active = appliance === import_white_web_sdk5.ApplianceNames.text;
   const disabled = !writable;
   const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
-  return import_react57.default.createElement("span", {
+  return /* @__PURE__ */ import_react56.default.createElement("span", {
     className: "fastboard-toolbar-btn-interactive"
-  }, import_react57.default.createElement(import_react56.default, {
+  }, /* @__PURE__ */ import_react56.default.createElement(import_react55.default, {
     className: "fastboard-tip",
     content: renderTextButtonContent(),
     theme,
@@ -1658,53 +1579,53 @@ function TextButton() {
     offset: RightOffset,
     arrow: false,
     interactive: true
-  }, import_react57.default.createElement(Button, {
+  }, /* @__PURE__ */ import_react56.default.createElement(Button, {
     content: renderToolTip(t("text"), shortcut),
     active,
     onClick: changeAppliance
-  }, import_react57.default.createElement(Icon, {
-    fallback: import_react57.default.createElement(Icons.Text, {
+  }, /* @__PURE__ */ import_react56.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react56.default.createElement(Icons.Text, {
       theme,
       active
     }),
     src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
     alt: "[text]"
-  }), import_react57.default.createElement("span", {
+  }), /* @__PURE__ */ import_react56.default.createElement("span", {
     className: "fastboard-toolbar-triangle"
   }))));
 }
 function renderTextButtonContent() {
-  return import_react57.default.createElement("div", {
+  return /* @__PURE__ */ import_react56.default.createElement("div", {
     className: "fastboard-toolbar-panel text"
-  }, import_react57.default.createElement(ColorBox, null));
+  }, /* @__PURE__ */ import_react56.default.createElement(ColorBox, null));
 }
 
 // src/components/Toolbar/components/UpDownButtons.tsx
-var import_react58 = __toESM(require("react"));
+var import_react57 = __toESM(require("react"));
 function UpButton({ disabled, scrollTo }) {
-  const { theme, icons } = (0, import_react58.useContext)(ToolbarContext);
-  const scrollUp = (0, import_react58.useCallback)(() => scrollTo(-ItemHeight), [scrollTo]);
-  return import_react58.default.createElement(import_react58.default.Fragment, null, import_react58.default.createElement(Button, {
+  const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
+  const scrollUp = (0, import_react57.useCallback)(() => scrollTo(-ItemHeight), [scrollTo]);
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(Button, {
     content: "Up",
     disabled,
     onClick: scrollUp
-  }, import_react58.default.createElement(Icon, {
-    fallback: import_react58.default.createElement(Icons.Up, {
+  }, /* @__PURE__ */ import_react57.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Up, {
       theme
     }),
     src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
     alt: "[up]"
-  })), import_react58.default.createElement(CutLine, null));
+  })), /* @__PURE__ */ import_react57.default.createElement(CutLine, null));
 }
 function DownButton({ disabled, scrollTo }) {
-  const { theme, icons } = (0, import_react58.useContext)(ToolbarContext);
-  const scrollDown = (0, import_react58.useCallback)(() => scrollTo(ItemHeight), [scrollTo]);
-  return import_react58.default.createElement(import_react58.default.Fragment, null, import_react58.default.createElement(CutLine, null), import_react58.default.createElement(Button, {
+  const { theme, icons } = (0, import_react57.useContext)(ToolbarContext);
+  const scrollDown = (0, import_react57.useCallback)(() => scrollTo(ItemHeight), [scrollTo]);
+  return /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(CutLine, null), /* @__PURE__ */ import_react57.default.createElement(Button, {
     content: "Down",
     disabled,
     onClick: scrollDown
-  }, import_react58.default.createElement(Icon, {
-    fallback: import_react58.default.createElement(Icons.Down, {
+  }, /* @__PURE__ */ import_react57.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react57.default.createElement(Icons.Down, {
       theme
     }),
     src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
@@ -1712,25 +1633,30 @@ function DownButton({ disabled, scrollTo }) {
   })));
 }
 
+// src/components/Toolbar/components/assets/collapsed.png
+var collapsed_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAB8CAYAAAAMw2JFAAAAAXNSR0IArs4c6QAAA49JREFUeF7tnLFv00AUh5/TFVYkxIDEnKFjJ/gb2CIqpUPagYXNEV2LRGk7tAiRSA0bWcC0QzowwQKuVDnCLE2KTZCMSNLkHCLalCpBkdFVMTKh8TXO+c4S16XDSb0vv/vyfE3fqwQR+ZIA4AoAdADgJ08mSVXVV9ls9nE+nzcBAAFAnweQ1Gg06gihrmEYubm5OeX4+LgBAD9Yw0iO49S63S7U6/VYq9UyCoXC2tLS0kcAwEA9VkBnIO5m7XYbJwTVanVLluWcruvfAOA7ADhhA/0Fgjfr9/tweHgYs20baZq2sbCw8HaQTqgy/wPivvKTkxN8XFPNZvMdC5lHgmAgx3EAISQhhHqGYWyGKbMviJsOC5kvBOIjcxUAWjRkHgtkSGZb07R1WjKPDeIj82cAaAatzIFBhmU2TTOXTCZfBq3ME4HQlJkKCA2ZqYJMIjN1kKAyhwYyrsyhgpwns6IoyysrK/rgQfrnqc4ExCtzrVb7tbe39yCVSr0GAFyZz2CYguANT09PwbIsaWdn5146nX4zuO+wB8EwnU5HqlQqdiKRuHNwcFDC1Zh5Iu4xWZYVU1V1eXZ29jlOhRvI0dGRVC6XP8zMzNwFgK/cQHq9HpTLZXt6evo2AFS4geDbX6lUisXj8VsA8IkbCHZlf39/Kh6P3xQg7jtHJDL826JIRCRC+gRBOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6kjojjxaXbt0Py3jP1DCtes3ruLvVetLnenRYIgnT7OX3Y25gLgQ3gSYg3ghuIEMQ3ABOQ+COcgoCKYgfhD/Jwh+1ZE4GrdKRkJWPxhulTUSBe28ZLglMgzDHcR9N3G/BpDuHH7r4qoY+lUx6PGIoxFHQ3JHOCIcEY6QEhCOkBISdUQ4IhwhJSAcISUk6ohwxM+RyLR/RaYhLjItgpFomoxEG2kkGmvxRBPXVmPPWIypKMpD5s3X3kEh0zSfJZPJF6NmK0JrI3VHpxBCaiaTWc/n877TJtRBPMNkdrFY3Jifn8ed3njUzneYjCqIZ7xue3FxMadpGh6vu9BEEhUQr4yFQmE1yMDhRCDjyEi6JAUGGVdG6iBBZaQK4pVRluVNXdfZjsfRkHGiRGjKGBjEI+P7TCazQaqMpI1I635jtmNVRtJGpPVRg8fbtGW8EAiL6VUiyGA4vUd6TJN+0KTr0u7u7hYLGUmg0fkHBiRSVuu/AWpfZNft9vFDAAAAAElFTkSuQmCC";
+
 // src/components/Toolbar/Content.tsx
-var Content = import_react59.default.memo(() => {
-  const ref = (0, import_react59.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react59.useState)(0);
-  const [parentHeight, setParentHeight] = (0, import_react59.useState)(0);
+function Content({ onCollapse }) {
+  const { theme, icons, writable } = (0, import_react58.useContext)(ToolbarContext);
+  const ref = (0, import_react58.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react58.useState)(0);
+  const [parentHeight, setParentHeight] = (0, import_react58.useState)(0);
+  const disabled = !writable;
   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 = (0, import_react59.useCallback)((height) => {
+  const scrollTo = (0, import_react58.useCallback)((height) => {
     setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
   }, [scrollBuffer, scrollTop]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     if (ref.current) {
       ref.current.scrollTop = scrollTop;
     }
   }, [scrollTop]);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     var _a, _b;
     const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
     if (container) {
@@ -1743,95 +1669,82 @@ var Content = import_react59.default.memo(() => {
       return () => resizeObserver.disconnect();
     }
   }, []);
-  return import_react59.default.createElement(import_react59.default.Fragment, null, needScroll && import_react59.default.createElement(UpButton, {
+  return /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, needScroll && /* @__PURE__ */ import_react58.default.createElement(UpButton, {
     scrollTo,
     disabled: disableScrollUp
-  }), import_react59.default.createElement("div", {
+  }), /* @__PURE__ */ import_react58.default.createElement("div", {
     ref,
     className: (0, import_clsx8.default)(`${name4}-section`),
     style: {
       height: `${sectionHeight}px`,
       overflow: needScroll ? "hidden" : "visible"
     }
-  }, import_react59.default.createElement(ClickerButton, null), import_react59.default.createElement(SelectorButton, null), import_react59.default.createElement(PencilButton, null), import_react59.default.createElement(TextButton, null), import_react59.default.createElement(ShapesButton, null), import_react59.default.createElement(EraserButton, null), import_react59.default.createElement(CleanButton, null), import_react59.default.createElement(AppsButton, null)), needScroll && import_react59.default.createElement(DownButton, {
+  }, /* @__PURE__ */ import_react58.default.createElement(ClickerButton, null), /* @__PURE__ */ import_react58.default.createElement(SelectorButton, null), /* @__PURE__ */ import_react58.default.createElement(PencilButton, null), /* @__PURE__ */ import_react58.default.createElement(TextButton, null), /* @__PURE__ */ import_react58.default.createElement(ShapesButton, null), /* @__PURE__ */ import_react58.default.createElement(EraserButton, null), /* @__PURE__ */ import_react58.default.createElement(CleanButton, null), /* @__PURE__ */ import_react58.default.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ import_react58.default.createElement(DownButton, {
     scrollTo,
     disabled: disableScrollDown
-  }));
-});
+  }), /* @__PURE__ */ import_react58.default.createElement("div", {
+    className: (0, import_clsx8.default)("fastboard-toolbar-mask", theme),
+    onClick: onCollapse
+  }, /* @__PURE__ */ import_react58.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react58.default.createElement("img", {
+      draggable: false,
+      className: (0, import_clsx8.default)(`${name4}-mask-btn`, theme),
+      src: collapsed_default
+    }),
+    src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
+  })));
+}
 
 // src/components/Toolbar/Toolbar.tsx
-var ToolbarContext = (0, import_react60.createContext)(__spreadValues({
+var ToolbarContext = (0, import_react59.createContext)(__spreadValues({
   theme: "light"
 }, EmptyToolbarHook));
 var name4 = "fastboard-toolbar";
-var Toolbar = ({ theme, icons }) => {
+function Toolbar({ theme, icons }) {
   theme = useTheme(theme);
   const hook = useToolbar();
-  const [expanded, setExpanded] = (0, import_react60.useState)(true);
-  const [toolbar, toolbarRef] = (0, import_react60.useState)(null);
-  const [onHover, setOnHover] = (0, import_react60.useState)(false);
-  const [delayedOnHover, setDelayedOnHover] = (0, import_react60.useState)(false);
-  const [pointEvents, setPointEvents] = (0, import_react60.useState)(true);
+  const [expanded, setExpanded] = (0, import_react59.useState)(true);
+  const [pointerEvents, setPointerEvents] = (0, import_react59.useState)("auto");
   const disabled = !hook.writable;
-  const toggle = (0, import_react60.useCallback)(() => {
-    setExpanded((e) => !e);
-  }, []);
-  (0, import_react60.useEffect)(() => {
-    const timer = setTimeout(() => {
-      setDelayedOnHover(onHover);
-    }, 400);
-    return () => clearTimeout(timer);
-  }, [onHover]);
-  return import_react60.default.createElement(ToolbarContext.Provider, {
+  return /* @__PURE__ */ import_react59.default.createElement(ToolbarContext.Provider, {
     value: __spreadValues({ theme, icons }, hook)
-  }, import_react60.default.createElement(import_framer_motion.AnimatePresence, null, expanded ? import_react60.default.createElement(import_framer_motion.motion.div, {
-    initial: { x: -100 },
-    animate: { x: 0, transition: { duration: 0.5 } },
+  }, /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.AnimatePresence, null, expanded ? /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
     key: "toolbar",
-    ref: toolbarRef,
     className: (0, import_clsx9.default)(name4, theme),
-    onPointerEnter: () => {
-      expanded && setOnHover(true);
-    },
-    onMouseLeave: () => setOnHover(false),
+    initial: { x: -100 },
+    animate: { x: 0, transition: { duration: 0.5 } },
     exit: { x: -100, transition: { duration: 0.5 } },
-    onAnimationStart: () => setPointEvents(false),
-    onAnimationComplete: () => setPointEvents(true),
-    style: { pointerEvents: pointEvents ? "auto" : "none" }
-  }, import_react60.default.createElement(Content, null), expanded && (onHover || delayedOnHover) && import_react60.default.createElement(Mask, {
-    toolbar
-  }, import_react60.default.createElement("div", {
-    onClick: toggle
-  }, import_react60.default.createElement("img", {
-    draggable: false,
-    className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme),
-    src: collapsed_default
-  })))) : import_react60.default.createElement(import_framer_motion.motion.div, {
+    onAnimationStart: () => setPointerEvents("none"),
+    onAnimationComplete: () => setPointerEvents("auto"),
+    style: { pointerEvents }
+  }, /* @__PURE__ */ import_react59.default.createElement(Content, {
+    onCollapse: () => setExpanded(false)
+  })) : /* @__PURE__ */ import_react59.default.createElement(import_framer_motion.motion.div, {
     className: (0, import_clsx9.default)(`${name4}-expand-btn`, theme),
     key: "expand",
-    onClick: toggle,
+    onClick: () => setExpanded(true),
     initial: { x: -100 },
     animate: { x: 0, transition: { duration: 0.5 } }
-  }, !expanded && import_react60.default.createElement(Icon, {
-    fallback: import_react60.default.createElement("img", {
+  }, /* @__PURE__ */ import_react59.default.createElement(Icon, {
+    fallback: /* @__PURE__ */ import_react59.default.createElement("img", {
       draggable: false,
       src: expanded_default,
       className: (0, import_clsx9.default)(`${name4}-mask-btn`, theme)
     }),
     src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
   }))));
-};
+}
 
 // src/components/PlayerControl/hooks.ts
-var import_react61 = require("react");
+var import_react60 = require("react");
 var import_white_web_sdk6 = require("white-web-sdk");
 var EMPTY_ARRAY = [];
 function useForceUpdate2() {
-  const [, forceUpdate_] = (0, import_react61.useState)({});
-  return (0, import_react61.useCallback)(() => forceUpdate_({}), EMPTY_ARRAY);
+  const [, forceUpdate_] = (0, import_react60.useState)({});
+  return (0, import_react60.useCallback)(() => forceUpdate_({}), EMPTY_ARRAY);
 }
 function usePlayerControl(player) {
-  const togglePlay = (0, import_react61.useCallback)(() => {
+  const togglePlay = (0, import_react60.useCallback)(() => {
     if (player) {
       switch (player.phase) {
         case import_white_web_sdk6.PlayerPhase.WaitingFirstFrame:
@@ -1847,25 +1760,25 @@ function usePlayerControl(player) {
       }
     }
   }, [player]);
-  const seekToProgressTime = (0, import_react61.useCallback)((time) => {
+  const seekToProgressTime = (0, import_react60.useCallback)((time) => {
     if (player) {
       player.seekToProgressTime(time);
     }
   }, [player]);
   const lastPlayer = useLastValue(player);
   const forceUpdate = useForceUpdate2();
-  const setSpeed = (0, import_react61.useCallback)((speed2) => {
+  const setSpeed = (0, import_react60.useCallback)((speed2) => {
     if (player) {
       player.playbackSpeed = speed2;
       forceUpdate();
     }
   }, [forceUpdate, player]);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (!lastPlayer && player) {
       forceUpdate();
     }
   }, [forceUpdate, lastPlayer, player]);
-  (0, import_react61.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     if (player) {
       player.callbacks.on("onPhaseChanged", forceUpdate);
       player.callbacks.on("onProgressTimeChanged", forceUpdate);
@@ -1891,19 +1804,19 @@ function usePlayerControl(player) {
 }
 
 // src/components/PlayerControl/PlayerControl.tsx
-var import_react68 = __toESM(require("@tippyjs/react"));
+var import_react67 = __toESM(require("@tippyjs/react"));
 var import_clsx11 = __toESM(require("clsx"));
 var import_rc_slider2 = __toESM(require("rc-slider"));
-var import_react69 = __toESM(require("react"));
+var import_react68 = __toESM(require("react"));
 var import_white_web_sdk7 = require("white-web-sdk");
 
 // src/components/PlayerControl/components/Button.tsx
 var import_clsx10 = __toESM(require("clsx"));
-var import_react62 = __toESM(require("react"));
-var import_react63 = __toESM(require("@tippyjs/react"));
-var Button2 = (0, import_react62.forwardRef)((props, ref) => {
+var import_react61 = __toESM(require("react"));
+var import_react62 = __toESM(require("@tippyjs/react"));
+var Button2 = (0, import_react61.forwardRef)((props, ref) => {
   const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
-  return import_react62.default.createElement(import_react63.default, {
+  return /* @__PURE__ */ import_react61.default.createElement(import_react62.default, {
     className: "fastboard-tip",
     content,
     interactive,
@@ -1913,7 +1826,7 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
     offset: TopOffset,
     delay: [1e3, 400],
     duration: 300
-  }, import_react62.default.createElement("button", {
+  }, /* @__PURE__ */ import_react61.default.createElement("button", {
     ref,
     className: (0, import_clsx10.default)("fastboard-player-control-btn", theme, { active }),
     onClick,
@@ -1922,39 +1835,39 @@ var Button2 = (0, import_react62.forwardRef)((props, ref) => {
 });
 
 // src/components/PlayerControl/icons/index.ts
-var import_react67 = require("react");
+var import_react66 = require("react");
 
 // src/components/PlayerControl/icons/Loading.tsx
-var import_react64 = __toESM(require("react"));
+var import_react63 = __toESM(require("react"));
 var Loading = (props) => {
   const stroke = getStroke(props);
-  return import_react64.default.createElement("svg", {
+  return /* @__PURE__ */ import_react63.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react64.default.createElement("path", {
+  }, /* @__PURE__ */ import_react63.default.createElement("path", {
     d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
     fill: stroke
   }));
 };
 
 // src/components/PlayerControl/icons/Pause.tsx
-var import_react65 = __toESM(require("react"));
+var import_react64 = __toESM(require("react"));
 var Pause = (props) => {
   const stroke = getStroke(props);
-  return import_react65.default.createElement("svg", {
+  return /* @__PURE__ */ import_react64.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react65.default.createElement("path", {
+  }, /* @__PURE__ */ import_react64.default.createElement("path", {
     d: "M14 19h4V5h-4M6 19h4V5H6v14z",
     fill: stroke
   }));
 };
 
 // src/components/PlayerControl/icons/Play.tsx
-var import_react66 = __toESM(require("react"));
+var import_react65 = __toESM(require("react"));
 var Play = (props) => {
   const stroke = getStroke(props);
-  return import_react66.default.createElement("svg", {
+  return /* @__PURE__ */ import_react65.default.createElement("svg", {
     viewBox: "0 0 24 24"
-  }, import_react66.default.createElement("path", {
+  }, /* @__PURE__ */ import_react65.default.createElement("path", {
     d: "M8 5.14v14l11-7l-11-7z",
     fill: stroke
   }));
@@ -1962,9 +1875,9 @@ var Play = (props) => {
 
 // src/components/PlayerControl/icons/index.ts
 var Icons2 = {
-  Play: (0, import_react67.memo)(Play),
-  Pause: (0, import_react67.memo)(Pause),
-  Loading: (0, import_react67.memo)(Loading)
+  Play: (0, import_react66.memo)(Play),
+  Pause: (0, import_react66.memo)(Pause),
+  Loading: (0, import_react66.memo)(Loading)
 };
 
 // src/components/PlayerControl/PlayerControl.tsx
@@ -1973,12 +1886,12 @@ function PlayerControl(_a) {
   var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
   theme = useTheme(theme);
   const { t } = useTranslation();
-  const [currentTime, setCurrentTime] = (0, import_react69.useState)(0);
+  const [currentTime, setCurrentTime] = (0, import_react68.useState)(0);
   const player = usePlayerControl(player_);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     setCurrentTime(player.currentTime);
   }, [player.currentTime]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (player.currentTime !== currentTime) {
       player.seekToProgressTime(currentTime);
     }
@@ -1986,25 +1899,25 @@ function PlayerControl(_a) {
   const isLoading = player.phase === import_white_web_sdk7.PlayerPhase.WaitingFirstFrame || player.phase === import_white_web_sdk7.PlayerPhase.Buffering;
   const isPlaying = player.phase === import_white_web_sdk7.PlayerPhase.Playing;
   const { activeColor } = themes[theme];
-  return import_react69.default.createElement("div", {
+  return /* @__PURE__ */ import_react68.default.createElement("div", {
     className: (0, import_clsx11.default)(name5, theme, { "auto-hide": autoHide })
-  }, import_react69.default.createElement("button", {
+  }, /* @__PURE__ */ import_react68.default.createElement("button", {
     className: (0, import_clsx11.default)(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
     disabled: isLoading,
     onClick: player.togglePlay
-  }, import_react69.default.createElement(Icon, {
-    fallback: isLoading ? import_react69.default.createElement(Icons2.Loading, {
+  }, /* @__PURE__ */ import_react68.default.createElement(Icon, {
+    fallback: isLoading ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Loading, {
       theme
-    }) : isPlaying ? import_react69.default.createElement(Icons2.Pause, {
+    }) : isPlaying ? /* @__PURE__ */ import_react68.default.createElement(Icons2.Pause, {
       theme
-    }) : import_react69.default.createElement(Icons2.Play, {
+    }) : /* @__PURE__ */ import_react68.default.createElement(Icons2.Play, {
       theme
     }),
     src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
     alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
-  })), import_react69.default.createElement("span", {
+  })), /* @__PURE__ */ import_react68.default.createElement("span", {
     className: (0, import_clsx11.default)(`${name5}-slider`, { loading: isLoading }, theme)
-  }, import_react69.default.createElement(import_rc_slider2.default, {
+  }, /* @__PURE__ */ import_react68.default.createElement(import_rc_slider2.default, {
     disabled: isLoading,
     trackStyle: { background: activeColor },
     handleStyle: { border: `1px solid ${activeColor}` },
@@ -2013,15 +1926,15 @@ function PlayerControl(_a) {
     min: 0,
     max: player.totalTime,
     step: 100
-  })), import_react69.default.createElement("span", {
+  })), /* @__PURE__ */ import_react68.default.createElement("span", {
     className: (0, import_clsx11.default)(`${name5}-current`, theme)
-  }, renderTime(player.currentTime)), import_react69.default.createElement("span", {
+  }, renderTime(player.currentTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
     className: (0, import_clsx11.default)(`${name5}-slash`, theme)
-  }, "/"), import_react69.default.createElement("span", {
+  }, "/"), /* @__PURE__ */ import_react68.default.createElement("span", {
     className: (0, import_clsx11.default)(`${name5}-total`, theme)
-  }, renderTime(player.totalTime)), import_react69.default.createElement("span", {
+  }, renderTime(player.totalTime)), /* @__PURE__ */ import_react68.default.createElement("span", {
     className: `${name5}-btn-interactive`
-  }, import_react69.default.createElement(import_react68.default, {
+  }, /* @__PURE__ */ import_react68.default.createElement(import_react67.default, {
     className: "fastboard-tip",
     content: renderSpeeds(player),
     theme,
@@ -2030,11 +1943,11 @@ function PlayerControl(_a) {
     offset: TopOffset,
     arrow: false,
     interactive: true
-  }, import_react69.default.createElement(Button2, {
+  }, /* @__PURE__ */ import_react68.default.createElement(Button2, {
     content: t("speed"),
     theme,
     disabled: isLoading
-  }, import_react69.default.createElement("span", {
+  }, /* @__PURE__ */ import_react68.default.createElement("span", {
     className: (0, import_clsx11.default)(`${name5}-speed-text`, theme)
   }, player.speed, "x")))));
 }
@@ -2046,9 +1959,9 @@ function renderTime(ms) {
 }
 var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
 function renderSpeeds({ speed: current, setSpeed }) {
-  return import_react69.default.createElement("div", {
+  return /* @__PURE__ */ import_react68.default.createElement("div", {
     className: (0, import_clsx11.default)(`${name5}-panel`, "speed")
-  }, Speeds.map((speed) => import_react69.default.createElement("button", {
+  }, Speeds.map((speed) => /* @__PURE__ */ import_react68.default.createElement("button", {
     className: (0, import_clsx11.default)(`${name5}-btn`, "speed", {
       active: speed === current
     }),
@@ -2058,34 +1971,49 @@ function renderSpeeds({ speed: current, setSpeed }) {
 }
 
 // src/components/Fastboard.tsx
-var import_react70 = __toESM(require("react"));
-function Fastboard(_a) {
-  var _b = _a, { app } = _b, restProps = __objRest(_b, ["app"]);
+var import_react69 = __toESM(require("react"));
+var Fastboard = /* @__PURE__ */ (0, import_react69.forwardRef)(function Fastboard2(_a, ref) {
+  var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
   if (!app) {
-    return import_react70.default.createElement("div", {
-      className: "fastboard-root"
-    });
+    return /* @__PURE__ */ import_react69.default.createElement("div", __spreadValues({
+      className: "fastboard-root",
+      ref
+    }, restProps));
   }
-  return import_react70.default.createElement(FastboardAppContext.Provider, {
+  return /* @__PURE__ */ import_react69.default.createElement(FastboardAppContext.Provider, {
     value: app
-  }, import_react70.default.createElement(FastboardInternal, __spreadValues({}, restProps)));
-}
-function FastboardInternal({
-  language,
-  layout = {},
-  theme = "light",
-  children
-}) {
+  }, /* @__PURE__ */ import_react69.default.createElement(FastboardInternal, __spreadValues(__spreadValues({
+    forwardedRef: ref
+  }, { theme, layout, language }), restProps)));
+});
+function FastboardInternal(_a) {
+  var _b = _a, {
+    forwardedRef,
+    language,
+    layout = {},
+    theme = "light",
+    children
+  } = _b, restProps = __objRest(_b, [
+    "forwardedRef",
+    "language",
+    "layout",
+    "theme",
+    "children"
+  ]);
   const app = useFastboardApp();
   const forceUpdate = useForceUpdate();
   const i18n = useAsyncValue(() => createI18n({ language }));
-  (0, import_react70.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (i18n)
       i18n.changeLanguage(language);
     forceUpdate();
   }, [forceUpdate, i18n, language]);
-  const useWhiteboard = (0, import_react70.useCallback)((container) => {
-    container && app && app.manager.bindContainer(container);
+  (0, import_react69.useEffect)(() => {
+    app.manager.setPrefersColorScheme(theme);
+  }, [app, theme]);
+  const useWhiteboard = (0, import_react69.useCallback)((container) => {
+    if (container && app)
+      app.manager.bindContainer(container);
   }, [app]);
   const hideControls = useHideControls();
   const showControls = !hideControls;
@@ -2095,22 +2023,33 @@ function FastboardInternal({
     ZoomControl: zoom_control = showControls,
     PageControl: page_control = showControls
   } = layout;
-  return import_react70.default.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ import_react69.default.createElement(ThemeContext.Provider, {
     value: theme
-  }, import_react70.default.createElement(I18nContext.Provider, {
+  }, /* @__PURE__ */ import_react69.default.createElement(I18nContext.Provider, {
     value: i18n
-  }, import_react70.default.createElement("div", {
-    className: "fastboard-root"
-  }, import_react70.default.createElement("div", {
+  }, /* @__PURE__ */ import_react69.default.createElement("div", __spreadProps(__spreadValues({}, restProps), {
+    className: "fastboard-root",
+    ref: forwardedRef
+  }), /* @__PURE__ */ import_react69.default.createElement("div", {
     className: "fastboard-view",
     ref: useWhiteboard
-  }), children ? children : import_react70.default.createElement(import_react70.default.Fragment, null, toolbar && import_react70.default.createElement("div", {
+  }), children ? children : /* @__PURE__ */ import_react69.default.createElement(import_react69.default.Fragment, null, toolbar && /* @__PURE__ */ import_react69.default.createElement("div", {
     className: "fastboard-left"
-  }, import_react70.default.createElement(Toolbar, null)), (redo_undo || zoom_control) && import_react70.default.createElement("div", {
+  }, /* @__PURE__ */ import_react69.default.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ import_react69.default.createElement("div", {
     className: "fastboard-bottom-left"
-  }, redo_undo && import_react70.default.createElement(RedoUndo, null), zoom_control && import_react70.default.createElement(ZoomControl, null)), page_control && import_react70.default.createElement("div", {
+  }, redo_undo && /* @__PURE__ */ import_react69.default.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ import_react69.default.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ import_react69.default.createElement("div", {
     className: "fastboard-bottom-right"
-  }, import_react70.default.createElement(PageControl, null))))));
+  }, /* @__PURE__ */ import_react69.default.createElement(PageControl, null))))));
+}
+
+// src/vanilla/index.tsx
+var import_react70 = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
+function mount(app, dom, props) {
+  import_react_dom.default.render(/* @__PURE__ */ import_react70.default.createElement(Fastboard, __spreadValues({
+    app
+  }, props)), dom);
+  return () => import_react_dom.default.unmountComponentAtNode(dom);
 }
 module.exports = __toCommonJS(src_exports);
 //# sourceMappingURL=index.js.map