@netless/fastboard-react 0.2.0 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -81,7 +81,7 @@ function useForceUpdate() {
81
81
  }
82
82
 
83
83
  // src/style.scss?inline
84
- 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: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';
84
+ 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-section+.fastboard-toolbar-mask{opacity:0;transition:.5s opacity .4s}.fastboard-toolbar-section:hover+.fastboard-toolbar-mask,.fastboard-toolbar-mask:hover{opacity:1;transition:.2s opacity}.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%);opacity:.85}.fastboard-toolbar-mask.dark{left:100%}.fastboard-toolbar-mask-btn{width:17px;height:62px;cursor:pointer;opacity:.85}.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';
85
85
 
86
86
  // src/behaviors/style.ts
87
87
  applyStyles(style_default);
@@ -119,11 +119,16 @@ function useFocusedApp() {
119
119
  function useMaximized() {
120
120
  return useBoxState() === "maximized";
121
121
  }
122
+ var AppsShouldShowToolbar = /* @__PURE__ */ (() => [BuiltinApps.DocsViewer, "Slide"])();
122
123
  function useHideControls() {
124
+ const writable = useWritable();
123
125
  const maximized = useMaximized();
124
126
  const focusedApp = useFocusedApp();
127
+ if (!writable) {
128
+ return true;
129
+ }
125
130
  if (maximized) {
126
- if (Object.values(BuiltinApps).some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
131
+ if (AppsShouldShowToolbar.some((kind) => focusedApp == null ? void 0 : focusedApp.includes(kind))) {
127
132
  return "toolbar-only";
128
133
  } else {
129
134
  return true;
@@ -776,94 +781,56 @@ var EmptyToolbarHook = {
776
781
  // src/components/Toolbar/Toolbar.tsx
777
782
  import clsx9 from "clsx";
778
783
  import { AnimatePresence, motion } from "framer-motion";
779
- import React44, { createContext as createContext3, useCallback as useCallback11, useEffect as useEffect5, useState as useState5 } from "react";
780
-
781
- // src/components/Toolbar/components/assets/collapsed.png
782
- 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";
784
+ import React43, { createContext as createContext3, useState as useState4 } from "react";
783
785
 
784
786
  // src/components/Toolbar/components/assets/expanded.png
785
787
  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==";
786
788
 
787
- // src/components/Toolbar/components/Mask.tsx
788
- import React13, { useState as useState3, useEffect as useEffect3 } from "react";
789
- import ReactDOM from "react-dom";
790
- var Mask = React13.memo(({ toolbar, children }) => {
791
- const [rootElement] = useState3(() => {
792
- const element = document.createElement("div");
793
- element.style.position = "absolute";
794
- return element;
795
- });
796
- useEffect3(() => {
797
- if (toolbar && rootElement) {
798
- toolbar.appendChild(rootElement);
799
- }
800
- }, [rootElement, toolbar]);
801
- useEffect3(() => {
802
- if (rootElement && toolbar) {
803
- toolbar.appendChild(rootElement);
804
- const toolbarRect = toolbar.getBoundingClientRect();
805
- const halfHeight = toolbarRect.height / 2 - 31;
806
- rootElement.style.top = halfHeight + "px";
807
- rootElement.style.left = "41px";
808
- rootElement.style.width = "17px";
809
- rootElement.style.height = "62px";
810
- return () => {
811
- toolbar.removeChild(rootElement);
812
- };
813
- }
814
- }, [rootElement, toolbar]);
815
- if (rootElement) {
816
- return ReactDOM.createPortal(children, rootElement);
817
- } else {
818
- return null;
819
- }
820
- });
821
-
822
789
  // src/components/Toolbar/Content.tsx
823
790
  import clsx8 from "clsx";
824
- import React43, { useCallback as useCallback10, useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
791
+ import React42, { useCallback as useCallback10, useContext as useContext13, useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
825
792
 
826
793
  // src/components/Toolbar/components/ApplianceButtons.tsx
827
- import React34, { useCallback as useCallback6, useContext as useContext4 } from "react";
794
+ import React33, { useCallback as useCallback6, useContext as useContext4 } from "react";
828
795
  import { ApplianceNames } from "white-web-sdk";
829
796
 
830
797
  // src/components/Toolbar/icons/index.ts
831
798
  import { memo } from "react";
832
799
 
833
800
  // src/components/Toolbar/icons/Apps.tsx
834
- import React14 from "react";
801
+ import React13 from "react";
835
802
  var Apps = (props) => {
836
803
  const stroke = getStroke(props);
837
- return /* @__PURE__ */ React14.createElement("svg", {
804
+ return /* @__PURE__ */ React13.createElement("svg", {
838
805
  viewBox: "0 0 24 24"
839
- }, /* @__PURE__ */ React14.createElement("g", {
806
+ }, /* @__PURE__ */ React13.createElement("g", {
840
807
  fill: stroke
841
- }, /* @__PURE__ */ React14.createElement("path", {
808
+ }, /* @__PURE__ */ React13.createElement("path", {
842
809
  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"
843
- }), /* @__PURE__ */ React14.createElement("path", {
810
+ }), /* @__PURE__ */ React13.createElement("path", {
844
811
  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"
845
812
  })));
846
813
  };
847
814
 
848
815
  // src/components/Toolbar/icons/Arrow.tsx
849
- import React15 from "react";
816
+ import React14 from "react";
850
817
  var Arrow = (props) => {
851
818
  const stroke = getStroke(props);
852
- return /* @__PURE__ */ React15.createElement("svg", {
819
+ return /* @__PURE__ */ React14.createElement("svg", {
853
820
  viewBox: "0 0 24 24"
854
- }, /* @__PURE__ */ React15.createElement("path", {
821
+ }, /* @__PURE__ */ React14.createElement("path", {
855
822
  fill: stroke,
856
823
  d: "M19 5v6l-2.647-2.646L5.99 18.718l-.708-.708L15.645 7.646 13 5h6Z"
857
824
  }));
858
825
  };
859
826
 
860
827
  // src/components/Toolbar/icons/Circle.tsx
861
- import React16 from "react";
828
+ import React15 from "react";
862
829
  var Circle = (props) => {
863
830
  const stroke = getStroke(props);
864
- return /* @__PURE__ */ React16.createElement("svg", {
831
+ return /* @__PURE__ */ React15.createElement("svg", {
865
832
  viewBox: "0 0 24 24"
866
- }, /* @__PURE__ */ React16.createElement("rect", {
833
+ }, /* @__PURE__ */ React15.createElement("rect", {
867
834
  width: "15",
868
835
  height: "15",
869
836
  x: "4.5",
@@ -875,40 +842,40 @@ var Circle = (props) => {
875
842
  };
876
843
 
877
844
  // src/components/Toolbar/icons/Clean.tsx
878
- import React17 from "react";
845
+ import React16 from "react";
879
846
  var Clean = (props) => {
880
847
  const stroke = getStroke(props);
881
- return /* @__PURE__ */ React17.createElement("svg", {
848
+ return /* @__PURE__ */ React16.createElement("svg", {
882
849
  viewBox: "0 0 24 24"
883
- }, /* @__PURE__ */ React17.createElement("path", {
850
+ }, /* @__PURE__ */ React16.createElement("path", {
884
851
  fill: stroke,
885
852
  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"
886
853
  }));
887
854
  };
888
855
 
889
856
  // src/components/Toolbar/icons/Clicker.tsx
890
- import React18 from "react";
857
+ import React17 from "react";
891
858
  var Clicker = (props) => {
892
859
  const stroke = getStroke(props);
893
- return /* @__PURE__ */ React18.createElement("svg", {
860
+ return /* @__PURE__ */ React17.createElement("svg", {
894
861
  viewBox: "0 0 24 24"
895
- }, /* @__PURE__ */ React18.createElement("g", {
862
+ }, /* @__PURE__ */ React17.createElement("g", {
896
863
  fill: "none"
897
- }, /* @__PURE__ */ React18.createElement("path", {
864
+ }, /* @__PURE__ */ React17.createElement("path", {
898
865
  d: "M0 0h24v24H0z"
899
- }), /* @__PURE__ */ React18.createElement("path", {
866
+ }), /* @__PURE__ */ React17.createElement("path", {
900
867
  fill: stroke,
901
868
  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"
902
869
  })));
903
870
  };
904
871
 
905
872
  // src/components/Toolbar/icons/Collapse.tsx
906
- import React19 from "react";
873
+ import React18 from "react";
907
874
  var Collapse = (props) => {
908
875
  const stroke = getStroke(props);
909
- return /* @__PURE__ */ React19.createElement("svg", {
876
+ return /* @__PURE__ */ React18.createElement("svg", {
910
877
  viewBox: "0 0 24 24"
911
- }, /* @__PURE__ */ React19.createElement("path", {
878
+ }, /* @__PURE__ */ React18.createElement("path", {
912
879
  fill: "none",
913
880
  stroke,
914
881
  d: "m8 10-2 2 2 2m10-8H6m12 12H6m12-4h-8m8-4h-8"
@@ -916,12 +883,12 @@ var Collapse = (props) => {
916
883
  };
917
884
 
918
885
  // src/components/Toolbar/icons/Diamond.tsx
919
- import React20 from "react";
886
+ import React19 from "react";
920
887
  var Diamond = (props) => {
921
888
  const stroke = getStroke(props);
922
- return /* @__PURE__ */ React20.createElement("svg", {
889
+ return /* @__PURE__ */ React19.createElement("svg", {
923
890
  viewBox: "0 0 24 24"
924
- }, /* @__PURE__ */ React20.createElement("path", {
891
+ }, /* @__PURE__ */ React19.createElement("path", {
925
892
  fill: "none",
926
893
  stroke,
927
894
  d: "M4.222 12 12 4.222 19.778 12 12 19.778z"
@@ -929,12 +896,12 @@ var Diamond = (props) => {
929
896
  };
930
897
 
931
898
  // src/components/Toolbar/icons/Down.tsx
932
- import React21 from "react";
899
+ import React20 from "react";
933
900
  var Down = (props) => {
934
901
  const stroke = getStroke(props);
935
- return /* @__PURE__ */ React21.createElement("svg", {
902
+ return /* @__PURE__ */ React20.createElement("svg", {
936
903
  viewBox: "0 0 24 24"
937
- }, /* @__PURE__ */ React21.createElement("path", {
904
+ }, /* @__PURE__ */ React20.createElement("path", {
938
905
  fill: "none",
939
906
  stroke,
940
907
  d: "m16 13-2 2-2 2-2-2-2-2m8-6-2 2-2 2-2-2-2-2"
@@ -942,24 +909,24 @@ var Down = (props) => {
942
909
  };
943
910
 
944
911
  // src/components/Toolbar/icons/Eraser.tsx
945
- import React22 from "react";
912
+ import React21 from "react";
946
913
  var Eraser = (props) => {
947
914
  const stroke = getStroke(props);
948
- return /* @__PURE__ */ React22.createElement("svg", {
915
+ return /* @__PURE__ */ React21.createElement("svg", {
949
916
  viewBox: "0 0 24 24"
950
- }, /* @__PURE__ */ React22.createElement("path", {
917
+ }, /* @__PURE__ */ React21.createElement("path", {
951
918
  fill: stroke,
952
919
  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"
953
920
  }));
954
921
  };
955
922
 
956
923
  // src/components/Toolbar/icons/Expand.tsx
957
- import React23 from "react";
924
+ import React22 from "react";
958
925
  var Expand = (props) => {
959
926
  const stroke = getStroke(props);
960
- return /* @__PURE__ */ React23.createElement("svg", {
927
+ return /* @__PURE__ */ React22.createElement("svg", {
961
928
  viewBox: "0 0 24 24"
962
- }, /* @__PURE__ */ React23.createElement("path", {
929
+ }, /* @__PURE__ */ React22.createElement("path", {
963
930
  fill: "none",
964
931
  stroke,
965
932
  d: "m16 10 2 2-2 2M6 6h12M6 18h12M6 14h8m-8-4h8"
@@ -967,36 +934,36 @@ var Expand = (props) => {
967
934
  };
968
935
 
969
936
  // src/components/Toolbar/icons/Line.tsx
970
- import React24 from "react";
937
+ import React23 from "react";
971
938
  var Line = (props) => {
972
939
  const stroke = getStroke(props);
973
- return /* @__PURE__ */ React24.createElement("svg", {
940
+ return /* @__PURE__ */ React23.createElement("svg", {
974
941
  viewBox: "0 0 24 24"
975
- }, /* @__PURE__ */ React24.createElement("path", {
942
+ }, /* @__PURE__ */ React23.createElement("path", {
976
943
  fill: stroke,
977
944
  d: "m18.01 5.282.708.708L5.99 18.718l-.708-.708z"
978
945
  }));
979
946
  };
980
947
 
981
948
  // src/components/Toolbar/icons/Pencil.tsx
982
- import React25 from "react";
949
+ import React24 from "react";
983
950
  var Pencil = (props) => {
984
951
  const stroke = getStroke(props);
985
- return /* @__PURE__ */ React25.createElement("svg", {
952
+ return /* @__PURE__ */ React24.createElement("svg", {
986
953
  viewBox: "0 0 24 24"
987
- }, /* @__PURE__ */ React25.createElement("path", {
954
+ }, /* @__PURE__ */ React24.createElement("path", {
988
955
  fill: stroke,
989
956
  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"
990
957
  }));
991
958
  };
992
959
 
993
960
  // src/components/Toolbar/icons/Rectangle.tsx
994
- import React26 from "react";
961
+ import React25 from "react";
995
962
  var Rectangle = (props) => {
996
963
  const stroke = getStroke(props);
997
- return /* @__PURE__ */ React26.createElement("svg", {
964
+ return /* @__PURE__ */ React25.createElement("svg", {
998
965
  viewBox: "0 0 24 24"
999
- }, /* @__PURE__ */ React26.createElement("path", {
966
+ }, /* @__PURE__ */ React25.createElement("path", {
1000
967
  fill: "none",
1001
968
  stroke,
1002
969
  d: "M5.5 5.5h13v13h-13z"
@@ -1004,24 +971,24 @@ var Rectangle = (props) => {
1004
971
  };
1005
972
 
1006
973
  // src/components/Toolbar/icons/Selector.tsx
1007
- import React27 from "react";
974
+ import React26 from "react";
1008
975
  var Selector = (props) => {
1009
976
  const stroke = getStroke(props);
1010
- return /* @__PURE__ */ React27.createElement("svg", {
977
+ return /* @__PURE__ */ React26.createElement("svg", {
1011
978
  viewBox: "0 0 24 24"
1012
- }, /* @__PURE__ */ React27.createElement("path", {
979
+ }, /* @__PURE__ */ React26.createElement("path", {
1013
980
  fill: stroke,
1014
981
  d: "m12 12 8 2.667-3.556 1.777L14.667 20 12 12Zm3-8v7.5h-1V5H5v9h6.5v1H4V4h11Z"
1015
982
  }));
1016
983
  };
1017
984
 
1018
985
  // src/components/Toolbar/icons/SpeechBalloon.tsx
1019
- import React28 from "react";
986
+ import React27 from "react";
1020
987
  var SpeechBalloon = (props) => {
1021
988
  const stroke = getStroke(props);
1022
- return /* @__PURE__ */ React28.createElement("svg", {
989
+ return /* @__PURE__ */ React27.createElement("svg", {
1023
990
  viewBox: "0 0 24 24"
1024
- }, /* @__PURE__ */ React28.createElement("path", {
991
+ }, /* @__PURE__ */ React27.createElement("path", {
1025
992
  fill: "none",
1026
993
  stroke,
1027
994
  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"
@@ -1029,12 +996,12 @@ var SpeechBalloon = (props) => {
1029
996
  };
1030
997
 
1031
998
  // src/components/Toolbar/icons/Star.tsx
1032
- import React29 from "react";
999
+ import React28 from "react";
1033
1000
  var Star = (props) => {
1034
1001
  const stroke = getStroke(props);
1035
- return /* @__PURE__ */ React29.createElement("svg", {
1002
+ return /* @__PURE__ */ React28.createElement("svg", {
1036
1003
  viewBox: "0 0 24 24"
1037
- }, /* @__PURE__ */ React29.createElement("path", {
1004
+ }, /* @__PURE__ */ React28.createElement("path", {
1038
1005
  fill: "none",
1039
1006
  stroke,
1040
1007
  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"
@@ -1042,24 +1009,24 @@ var Star = (props) => {
1042
1009
  };
1043
1010
 
1044
1011
  // src/components/Toolbar/icons/Text.tsx
1045
- import React30 from "react";
1012
+ import React29 from "react";
1046
1013
  var Text = (props) => {
1047
1014
  const stroke = getStroke(props);
1048
- return /* @__PURE__ */ React30.createElement("svg", {
1015
+ return /* @__PURE__ */ React29.createElement("svg", {
1049
1016
  viewBox: "0 0 24 24"
1050
- }, /* @__PURE__ */ React30.createElement("path", {
1017
+ }, /* @__PURE__ */ React29.createElement("path", {
1051
1018
  fill: stroke,
1052
1019
  d: "M18.5 5.5V8h-1V6.5H13v11h2v1H9v-1h2v-11H6.5V8h-1V5.5h13Z"
1053
1020
  }));
1054
1021
  };
1055
1022
 
1056
1023
  // src/components/Toolbar/icons/Triangle.tsx
1057
- import React31 from "react";
1024
+ import React30 from "react";
1058
1025
  var Triangle = (props) => {
1059
1026
  const stroke = getStroke(props);
1060
- return /* @__PURE__ */ React31.createElement("svg", {
1027
+ return /* @__PURE__ */ React30.createElement("svg", {
1061
1028
  viewBox: "0 0 24 24"
1062
- }, /* @__PURE__ */ React31.createElement("path", {
1029
+ }, /* @__PURE__ */ React30.createElement("path", {
1063
1030
  fill: "none",
1064
1031
  stroke,
1065
1032
  d: "M12 6.008 19.138 18.5H4.862L12 6.008Z"
@@ -1067,12 +1034,12 @@ var Triangle = (props) => {
1067
1034
  };
1068
1035
 
1069
1036
  // src/components/Toolbar/icons/Up.tsx
1070
- import React32 from "react";
1037
+ import React31 from "react";
1071
1038
  var Up = (props) => {
1072
1039
  const stroke = getStroke(props);
1073
- return /* @__PURE__ */ React32.createElement("svg", {
1040
+ return /* @__PURE__ */ React31.createElement("svg", {
1074
1041
  viewBox: "0 0 24 24"
1075
- }, /* @__PURE__ */ React32.createElement("path", {
1042
+ }, /* @__PURE__ */ React31.createElement("path", {
1076
1043
  fill: "none",
1077
1044
  stroke,
1078
1045
  d: "m16 11-2-2-2-2-2 2-2 2m8 6-2-2-2-2-2 2-2 2"
@@ -1104,12 +1071,12 @@ var Icons = {
1104
1071
 
1105
1072
  // src/components/Toolbar/components/Button.tsx
1106
1073
  import clsx4 from "clsx";
1107
- import React33, { forwardRef, useContext as useContext3 } from "react";
1074
+ import React32, { forwardRef, useContext as useContext3 } from "react";
1108
1075
  import Tippy4 from "@tippyjs/react";
1109
1076
  var Button = forwardRef((props, ref) => {
1110
1077
  const { content, disabled, active, onClick, interactive, placement = "right", children } = props;
1111
1078
  const { writable, theme } = useContext3(ToolbarContext);
1112
- return /* @__PURE__ */ React33.createElement(Tippy4, {
1079
+ return /* @__PURE__ */ React32.createElement(Tippy4, {
1113
1080
  className: "fastboard-tip",
1114
1081
  content,
1115
1082
  interactive,
@@ -1119,7 +1086,7 @@ var Button = forwardRef((props, ref) => {
1119
1086
  offset: placement.includes("right") ? RightOffset : void 0,
1120
1087
  delay: [1e3, 400],
1121
1088
  duration: 300
1122
- }, /* @__PURE__ */ React33.createElement("button", {
1089
+ }, /* @__PURE__ */ React32.createElement("button", {
1123
1090
  ref,
1124
1091
  className: clsx4("fastboard-toolbar-btn", theme, { active }),
1125
1092
  onClick,
@@ -1131,9 +1098,9 @@ var Button = forwardRef((props, ref) => {
1131
1098
  function renderToolTip(text, hotkey) {
1132
1099
  if (!(typeof hotkey === "string"))
1133
1100
  return text;
1134
- return /* @__PURE__ */ React34.createElement("span", {
1101
+ return /* @__PURE__ */ React33.createElement("span", {
1135
1102
  className: "fastboard-toolbar-tooltip"
1136
- }, /* @__PURE__ */ React34.createElement("span", null, text), /* @__PURE__ */ React34.createElement("span", {
1103
+ }, /* @__PURE__ */ React33.createElement("span", null, text), /* @__PURE__ */ React33.createElement("span", {
1137
1104
  className: "fastboard-toolbar-hotkey"
1138
1105
  }, hotkey.toUpperCase()));
1139
1106
  }
@@ -1147,12 +1114,12 @@ function ClickerButton() {
1147
1114
  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1148
1115
  const active = appliance === ApplianceNames.clicker;
1149
1116
  const disabled = !writable;
1150
- return /* @__PURE__ */ React34.createElement(Button, {
1117
+ return /* @__PURE__ */ React33.createElement(Button, {
1151
1118
  content: renderToolTip(t("clicker"), shortcut),
1152
1119
  onClick: changeAppliance,
1153
1120
  active
1154
- }, /* @__PURE__ */ React34.createElement(Icon, {
1155
- fallback: /* @__PURE__ */ React34.createElement(Icons.Clicker, {
1121
+ }, /* @__PURE__ */ React33.createElement(Icon, {
1122
+ fallback: /* @__PURE__ */ React33.createElement(Icons.Clicker, {
1156
1123
  theme,
1157
1124
  active
1158
1125
  }),
@@ -1169,12 +1136,12 @@ function SelectorButton() {
1169
1136
  const active = appliance === ApplianceNames.selector;
1170
1137
  const disabled = !writable;
1171
1138
  const shortcut = (app.hotKeys || defaultHotKeys).changeToSelector;
1172
- return /* @__PURE__ */ React34.createElement(Button, {
1139
+ return /* @__PURE__ */ React33.createElement(Button, {
1173
1140
  content: renderToolTip(t("selector"), shortcut),
1174
1141
  onClick: changeAppliance,
1175
1142
  active
1176
- }, /* @__PURE__ */ React34.createElement(Icon, {
1177
- fallback: /* @__PURE__ */ React34.createElement(Icons.Selector, {
1143
+ }, /* @__PURE__ */ React33.createElement(Icon, {
1144
+ fallback: /* @__PURE__ */ React33.createElement(Icons.Selector, {
1178
1145
  theme,
1179
1146
  active
1180
1147
  }),
@@ -1191,12 +1158,12 @@ function EraserButton() {
1191
1158
  const active = appliance === ApplianceNames.eraser;
1192
1159
  const disabled = !writable;
1193
1160
  const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToEraser;
1194
- return /* @__PURE__ */ React34.createElement(Button, {
1161
+ return /* @__PURE__ */ React33.createElement(Button, {
1195
1162
  content: renderToolTip(t("eraser"), shortcut),
1196
1163
  onClick: changeAppliance,
1197
1164
  active
1198
- }, /* @__PURE__ */ React34.createElement(Icon, {
1199
- fallback: /* @__PURE__ */ React34.createElement(Icons.Eraser, {
1165
+ }, /* @__PURE__ */ React33.createElement(Icon, {
1166
+ fallback: /* @__PURE__ */ React33.createElement(Icons.Eraser, {
1200
1167
  theme,
1201
1168
  active
1202
1169
  }),
@@ -1208,11 +1175,11 @@ function CleanButton() {
1208
1175
  const { t } = useTranslation();
1209
1176
  const { theme, icons, writable, cleanCurrentScene } = useContext4(ToolbarContext);
1210
1177
  const disabled = !writable;
1211
- return /* @__PURE__ */ React34.createElement(Button, {
1178
+ return /* @__PURE__ */ React33.createElement(Button, {
1212
1179
  content: t("clean"),
1213
1180
  onClick: cleanCurrentScene
1214
- }, /* @__PURE__ */ React34.createElement(Icon, {
1215
- fallback: /* @__PURE__ */ React34.createElement(Icons.Clean, {
1181
+ }, /* @__PURE__ */ React33.createElement(Icon, {
1182
+ fallback: /* @__PURE__ */ React33.createElement(Icons.Clean, {
1216
1183
  theme
1217
1184
  }),
1218
1185
  src: disabled ? icons == null ? void 0 : icons.cleanIconDisable : icons == null ? void 0 : icons.cleanIcon,
@@ -1222,7 +1189,7 @@ function CleanButton() {
1222
1189
 
1223
1190
  // src/components/Toolbar/components/AppsButton.tsx
1224
1191
  import Tippy5 from "@tippyjs/react";
1225
- import React35, { useContext as useContext5 } from "react";
1192
+ import React34, { useContext as useContext5 } from "react";
1226
1193
 
1227
1194
  // src/components/Toolbar/components/assets/vscode.png
1228
1195
  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=";
@@ -1237,19 +1204,19 @@ var countdown_default = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyC
1237
1204
  function AppsButton({ content, onClick }) {
1238
1205
  const { theme, icons, writable } = useContext5(ToolbarContext);
1239
1206
  const disabled = !writable;
1240
- const button = /* @__PURE__ */ React35.createElement(Button, {
1207
+ const button = /* @__PURE__ */ React34.createElement(Button, {
1241
1208
  content: "Apps",
1242
1209
  onClick
1243
- }, /* @__PURE__ */ React35.createElement(Icon, {
1244
- fallback: /* @__PURE__ */ React35.createElement(Icons.Apps, {
1210
+ }, /* @__PURE__ */ React34.createElement(Icon, {
1211
+ fallback: /* @__PURE__ */ React34.createElement(Icons.Apps, {
1245
1212
  theme
1246
1213
  }),
1247
1214
  src: disabled ? icons == null ? void 0 : icons.appsIconDisable : icons == null ? void 0 : icons.appsIcon,
1248
1215
  alt: "[apps]"
1249
1216
  }));
1250
- return content === false ? button : /* @__PURE__ */ React35.createElement("span", {
1217
+ return content === false ? button : /* @__PURE__ */ React34.createElement("span", {
1251
1218
  className: "fastboard-toolbar-btn-interactive"
1252
- }, /* @__PURE__ */ React35.createElement(Tippy5, {
1219
+ }, /* @__PURE__ */ React34.createElement(Tippy5, {
1253
1220
  className: "fastboard-tip",
1254
1221
  content: renderAppsButtonContent(content),
1255
1222
  theme,
@@ -1261,25 +1228,25 @@ function AppsButton({ content, onClick }) {
1261
1228
  }, button));
1262
1229
  }
1263
1230
  function renderAppsButtonContent(content) {
1264
- return /* @__PURE__ */ React35.createElement("div", {
1231
+ return /* @__PURE__ */ React34.createElement("div", {
1265
1232
  className: "fastboard-toolbar-panel apps"
1266
- }, /* @__PURE__ */ React35.createElement("div", {
1233
+ }, /* @__PURE__ */ React34.createElement("div", {
1267
1234
  className: "fastboard-toolbar-apps"
1268
- }, content || /* @__PURE__ */ React35.createElement(DefaultApps, null)));
1235
+ }, content || /* @__PURE__ */ React34.createElement(DefaultApps, null)));
1269
1236
  }
1270
1237
  function DefaultApps() {
1271
1238
  const app = useFastboardApp();
1272
- return /* @__PURE__ */ React35.createElement(React35.Fragment, null, /* @__PURE__ */ React35.createElement(AppIcon, {
1239
+ return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(AppIcon, {
1273
1240
  title: "Code Editor",
1274
1241
  src: vscode_default,
1275
1242
  alt: "[code editor]",
1276
1243
  onClick: app == null ? void 0 : app.insertCodeEditor.bind(app)
1277
- }), /* @__PURE__ */ React35.createElement(AppIcon, {
1244
+ }), /* @__PURE__ */ React34.createElement(AppIcon, {
1278
1245
  title: "GeoGebra",
1279
1246
  src: geogebra_default,
1280
1247
  alt: "[geogebra]",
1281
1248
  onClick: app == null ? void 0 : app.insertGeoGebra.bind(app)
1282
- }), /* @__PURE__ */ React35.createElement(AppIcon, {
1249
+ }), /* @__PURE__ */ React34.createElement(AppIcon, {
1283
1250
  title: "Countdown",
1284
1251
  src: countdown_default,
1285
1252
  alt: "[countdown]",
@@ -1287,29 +1254,29 @@ function DefaultApps() {
1287
1254
  }));
1288
1255
  }
1289
1256
  function AppIcon({ title, src, alt, onClick }) {
1290
- return /* @__PURE__ */ React35.createElement("span", {
1257
+ return /* @__PURE__ */ React34.createElement("span", {
1291
1258
  className: "fastboard-toolbar-app-icon"
1292
- }, /* @__PURE__ */ React35.createElement(Button, {
1259
+ }, /* @__PURE__ */ React34.createElement(Button, {
1293
1260
  placement: "top",
1294
1261
  content: title,
1295
1262
  onClick
1296
- }, /* @__PURE__ */ React35.createElement("img", {
1263
+ }, /* @__PURE__ */ React34.createElement("img", {
1297
1264
  src,
1298
1265
  alt,
1299
1266
  title
1300
- })), /* @__PURE__ */ React35.createElement("span", {
1267
+ })), /* @__PURE__ */ React34.createElement("span", {
1301
1268
  className: "fastboard-toolbar-app-icon-text"
1302
1269
  }, title));
1303
1270
  }
1304
1271
 
1305
1272
  // src/components/Toolbar/components/PencilButton.tsx
1306
1273
  import Tippy6 from "@tippyjs/react";
1307
- import React39, { useCallback as useCallback7, useContext as useContext9 } from "react";
1274
+ import React38, { useCallback as useCallback7, useContext as useContext9 } from "react";
1308
1275
  import { ApplianceNames as ApplianceNames2 } from "white-web-sdk";
1309
1276
 
1310
1277
  // src/components/Toolbar/components/ColorBox.tsx
1311
1278
  import clsx5 from "clsx";
1312
- import React36, { useContext as useContext6 } from "react";
1279
+ import React35, { useContext as useContext6 } from "react";
1313
1280
  var colors = {
1314
1281
  "#E02020": [224, 32, 32],
1315
1282
  "#F7B500": [247, 181, 0],
@@ -1325,17 +1292,17 @@ function ColorBox() {
1325
1292
  const { theme, memberState, setStrokeColor, writable } = useContext6(ToolbarContext);
1326
1293
  const strokeColor = memberState == null ? void 0 : memberState.strokeColor;
1327
1294
  const disabled = !writable;
1328
- return /* @__PURE__ */ React36.createElement("div", {
1295
+ return /* @__PURE__ */ React35.createElement("div", {
1329
1296
  className: clsx5("fastboard-toolbar-color-box", theme)
1330
- }, colorKeys.map((key) => /* @__PURE__ */ React36.createElement("div", {
1297
+ }, colorKeys.map((key) => /* @__PURE__ */ React35.createElement("div", {
1331
1298
  key,
1332
1299
  className: clsx5("fastboard-toolbar-color-item", theme),
1333
1300
  onClick: () => setStrokeColor(colors[key])
1334
- }, /* @__PURE__ */ React36.createElement("div", {
1301
+ }, /* @__PURE__ */ React35.createElement("div", {
1335
1302
  className: clsx5("fastboard-toolbar-color-border", theme, {
1336
1303
  active: strokeColor && isEqualArray(strokeColor, colors[key])
1337
1304
  })
1338
- }, /* @__PURE__ */ React36.createElement("button", {
1305
+ }, /* @__PURE__ */ React35.createElement("button", {
1339
1306
  className: clsx5("fastboard-toolbar-color-btn"),
1340
1307
  style: { background: key },
1341
1308
  disabled,
@@ -1348,10 +1315,10 @@ function ColorBox() {
1348
1315
 
1349
1316
  // src/components/Toolbar/components/CutLine.tsx
1350
1317
  import clsx6 from "clsx";
1351
- import React37, { useContext as useContext7 } from "react";
1318
+ import React36, { useContext as useContext7 } from "react";
1352
1319
  function CutLine() {
1353
1320
  const { theme } = useContext7(ToolbarContext);
1354
- return /* @__PURE__ */ React37.createElement("span", {
1321
+ return /* @__PURE__ */ React36.createElement("span", {
1355
1322
  className: clsx6(`${name4}-cut-line`, theme)
1356
1323
  });
1357
1324
  }
@@ -1359,12 +1326,12 @@ function CutLine() {
1359
1326
  // src/components/Toolbar/components/Slider.tsx
1360
1327
  import clsx7 from "clsx";
1361
1328
  import RcSlider from "rc-slider";
1362
- import React38, { useContext as useContext8 } from "react";
1329
+ import React37, { useContext as useContext8 } from "react";
1363
1330
  function Slider() {
1364
1331
  const { theme, writable, memberState, setStrokeWidth } = useContext8(ToolbarContext);
1365
1332
  const { activeColor } = themes[theme];
1366
1333
  const strokeWidth = (memberState == null ? void 0 : memberState.strokeWidth) || 0;
1367
- return /* @__PURE__ */ React38.createElement(RcSlider, {
1334
+ return /* @__PURE__ */ React37.createElement(RcSlider, {
1368
1335
  disabled: !writable,
1369
1336
  className: clsx7("fastboard-toolbar-slider", theme),
1370
1337
  trackStyle: { background: activeColor },
@@ -1388,9 +1355,9 @@ function PencilButton() {
1388
1355
  const active = appliance === ApplianceNames2.pencil;
1389
1356
  const disabled = !writable;
1390
1357
  const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToPencil;
1391
- return /* @__PURE__ */ React39.createElement("span", {
1358
+ return /* @__PURE__ */ React38.createElement("span", {
1392
1359
  className: "fastboard-toolbar-btn-interactive"
1393
- }, /* @__PURE__ */ React39.createElement(Tippy6, {
1360
+ }, /* @__PURE__ */ React38.createElement(Tippy6, {
1394
1361
  className: "fastboard-tip",
1395
1362
  content: renderPencilButtonContent(),
1396
1363
  theme,
@@ -1399,30 +1366,30 @@ function PencilButton() {
1399
1366
  offset: RightOffset,
1400
1367
  arrow: false,
1401
1368
  interactive: true
1402
- }, /* @__PURE__ */ React39.createElement(Button, {
1369
+ }, /* @__PURE__ */ React38.createElement(Button, {
1403
1370
  content: renderToolTip(t("pencil"), shortcut),
1404
1371
  active,
1405
1372
  onClick: changeAppliance
1406
- }, /* @__PURE__ */ React39.createElement(Icon, {
1407
- fallback: /* @__PURE__ */ React39.createElement(Icons.Pencil, {
1373
+ }, /* @__PURE__ */ React38.createElement(Icon, {
1374
+ fallback: /* @__PURE__ */ React38.createElement(Icons.Pencil, {
1408
1375
  theme,
1409
1376
  active
1410
1377
  }),
1411
1378
  src: disabled ? icons == null ? void 0 : icons.pencilIconDisable : icons == null ? void 0 : icons.pencilIcon,
1412
1379
  alt: "[pencil]"
1413
- }), /* @__PURE__ */ React39.createElement("span", {
1380
+ }), /* @__PURE__ */ React38.createElement("span", {
1414
1381
  className: "fastboard-toolbar-triangle"
1415
1382
  }))));
1416
1383
  }
1417
1384
  function renderPencilButtonContent() {
1418
- return /* @__PURE__ */ React39.createElement("div", {
1385
+ return /* @__PURE__ */ React38.createElement("div", {
1419
1386
  className: "fastboard-toolbar-panel pencil"
1420
- }, /* @__PURE__ */ React39.createElement(Slider, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(ColorBox, null));
1387
+ }, /* @__PURE__ */ React38.createElement(Slider, null), /* @__PURE__ */ React38.createElement(CutLine, null), /* @__PURE__ */ React38.createElement(ColorBox, null));
1421
1388
  }
1422
1389
 
1423
1390
  // src/components/Toolbar/components/ShapesButton.tsx
1424
1391
  import Tippy7 from "@tippyjs/react";
1425
- import React40, { useContext as useContext10 } from "react";
1392
+ import React39, { useContext as useContext10 } from "react";
1426
1393
  import { ApplianceNames as ApplianceNames4 } from "white-web-sdk";
1427
1394
 
1428
1395
  // src/components/Toolbar/const.ts
@@ -1464,9 +1431,9 @@ function ShapesButton() {
1464
1431
  const key = appliance === ApplianceNames4.shape ? shape : appliance;
1465
1432
  const active = ShapeTypes.has(key);
1466
1433
  const CurrentIcon = ShapesMap[key] || Icons.Rectangle;
1467
- return /* @__PURE__ */ React40.createElement("span", {
1434
+ return /* @__PURE__ */ React39.createElement("span", {
1468
1435
  className: "fastboard-toolbar-btn-interactive"
1469
- }, /* @__PURE__ */ React40.createElement(Tippy7, {
1436
+ }, /* @__PURE__ */ React39.createElement(Tippy7, {
1470
1437
  className: "fastboard-tip",
1471
1438
  content: renderShapesButtonContent(),
1472
1439
  theme,
@@ -1475,31 +1442,31 @@ function ShapesButton() {
1475
1442
  offset: RightOffset,
1476
1443
  arrow: false,
1477
1444
  interactive: true
1478
- }, /* @__PURE__ */ React40.createElement(Button, {
1445
+ }, /* @__PURE__ */ React39.createElement(Button, {
1479
1446
  content: t("shape"),
1480
1447
  active
1481
- }, /* @__PURE__ */ React40.createElement(CurrentIcon, {
1448
+ }, /* @__PURE__ */ React39.createElement(CurrentIcon, {
1482
1449
  theme,
1483
1450
  active
1484
- }), /* @__PURE__ */ React40.createElement("span", {
1451
+ }), /* @__PURE__ */ React39.createElement("span", {
1485
1452
  className: "fastboard-toolbar-triangle"
1486
1453
  }))));
1487
1454
  }
1488
1455
  function renderShapesButtonContent() {
1489
- return /* @__PURE__ */ React40.createElement("div", {
1456
+ return /* @__PURE__ */ React39.createElement("div", {
1490
1457
  className: "fastboard-toolbar-panel shapes"
1491
- }, /* @__PURE__ */ React40.createElement(ShapesBox, null), /* @__PURE__ */ React40.createElement(CutLine, null), /* @__PURE__ */ React40.createElement(Slider, null), /* @__PURE__ */ React40.createElement(CutLine, null), /* @__PURE__ */ React40.createElement(ColorBox, null));
1458
+ }, /* @__PURE__ */ React39.createElement(ShapesBox, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(Slider, null), /* @__PURE__ */ React39.createElement(CutLine, null), /* @__PURE__ */ React39.createElement(ColorBox, null));
1492
1459
  }
1493
1460
  function ShapesBox() {
1494
1461
  const { t } = useTranslation();
1495
- return /* @__PURE__ */ React40.createElement("div", {
1462
+ return /* @__PURE__ */ React39.createElement("div", {
1496
1463
  className: "fastboard-toolbar-shapes"
1497
- }, ApplianceShapes.map((Appliance) => /* @__PURE__ */ React40.createElement(ApplianceShapeButton, {
1464
+ }, ApplianceShapes.map((Appliance) => /* @__PURE__ */ React39.createElement(ApplianceShapeButton, {
1498
1465
  key: Appliance,
1499
1466
  content: t(Appliance),
1500
1467
  Appliance,
1501
1468
  Icon: ShapesMap[Appliance]
1502
- })), Shapes.map((shape) => /* @__PURE__ */ React40.createElement(ShapeShapeButton, {
1469
+ })), Shapes.map((shape) => /* @__PURE__ */ React39.createElement(ShapeShapeButton, {
1503
1470
  key: shape,
1504
1471
  content: t(shape),
1505
1472
  shape,
@@ -1510,12 +1477,12 @@ function ApplianceShapeButton({ content, Appliance, Icon: Icon2 }) {
1510
1477
  const { theme, writable, setAppliance, memberState } = useContext10(ToolbarContext);
1511
1478
  const current = memberState == null ? void 0 : memberState.currentApplianceName;
1512
1479
  const disabled = !writable;
1513
- return /* @__PURE__ */ React40.createElement(Button, {
1480
+ return /* @__PURE__ */ React39.createElement(Button, {
1514
1481
  content,
1515
1482
  disabled,
1516
1483
  placement: "top",
1517
1484
  onClick: () => setAppliance(Appliance)
1518
- }, /* @__PURE__ */ React40.createElement(Icon2, {
1485
+ }, /* @__PURE__ */ React39.createElement(Icon2, {
1519
1486
  theme,
1520
1487
  active: current === Appliance
1521
1488
  }));
@@ -1525,12 +1492,12 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
1525
1492
  const appliance = memberState == null ? void 0 : memberState.currentApplianceName;
1526
1493
  const current = appliance === ApplianceNames4.shape && (memberState == null ? void 0 : memberState.shapeType);
1527
1494
  const disabled = !writable;
1528
- return /* @__PURE__ */ React40.createElement(Button, {
1495
+ return /* @__PURE__ */ React39.createElement(Button, {
1529
1496
  content,
1530
1497
  disabled,
1531
1498
  placement: "top",
1532
1499
  onClick: () => setAppliance(ApplianceNames4.shape, shape)
1533
- }, /* @__PURE__ */ React40.createElement(Icon2, {
1500
+ }, /* @__PURE__ */ React39.createElement(Icon2, {
1534
1501
  theme,
1535
1502
  active: current === shape
1536
1503
  }));
@@ -1538,7 +1505,7 @@ function ShapeShapeButton({ content, shape, Icon: Icon2 }) {
1538
1505
 
1539
1506
  // src/components/Toolbar/components/TextButton.tsx
1540
1507
  import Tippy8 from "@tippyjs/react";
1541
- import React41, { useCallback as useCallback8, useContext as useContext11 } from "react";
1508
+ import React40, { useCallback as useCallback8, useContext as useContext11 } from "react";
1542
1509
  import { ApplianceNames as ApplianceNames5 } from "white-web-sdk";
1543
1510
  function TextButton() {
1544
1511
  const app = useFastboardApp();
@@ -1551,9 +1518,9 @@ function TextButton() {
1551
1518
  const active = appliance === ApplianceNames5.text;
1552
1519
  const disabled = !writable;
1553
1520
  const shortcut = ((app == null ? void 0 : app.hotKeys) || defaultHotKeys).changeToText;
1554
- return /* @__PURE__ */ React41.createElement("span", {
1521
+ return /* @__PURE__ */ React40.createElement("span", {
1555
1522
  className: "fastboard-toolbar-btn-interactive"
1556
- }, /* @__PURE__ */ React41.createElement(Tippy8, {
1523
+ }, /* @__PURE__ */ React40.createElement(Tippy8, {
1557
1524
  className: "fastboard-tip",
1558
1525
  content: renderTextButtonContent(),
1559
1526
  theme,
@@ -1562,53 +1529,53 @@ function TextButton() {
1562
1529
  offset: RightOffset,
1563
1530
  arrow: false,
1564
1531
  interactive: true
1565
- }, /* @__PURE__ */ React41.createElement(Button, {
1532
+ }, /* @__PURE__ */ React40.createElement(Button, {
1566
1533
  content: renderToolTip(t("text"), shortcut),
1567
1534
  active,
1568
1535
  onClick: changeAppliance
1569
- }, /* @__PURE__ */ React41.createElement(Icon, {
1570
- fallback: /* @__PURE__ */ React41.createElement(Icons.Text, {
1536
+ }, /* @__PURE__ */ React40.createElement(Icon, {
1537
+ fallback: /* @__PURE__ */ React40.createElement(Icons.Text, {
1571
1538
  theme,
1572
1539
  active
1573
1540
  }),
1574
1541
  src: disabled ? icons == null ? void 0 : icons.textIconDisable : icons == null ? void 0 : icons.textIcon,
1575
1542
  alt: "[text]"
1576
- }), /* @__PURE__ */ React41.createElement("span", {
1543
+ }), /* @__PURE__ */ React40.createElement("span", {
1577
1544
  className: "fastboard-toolbar-triangle"
1578
1545
  }))));
1579
1546
  }
1580
1547
  function renderTextButtonContent() {
1581
- return /* @__PURE__ */ React41.createElement("div", {
1548
+ return /* @__PURE__ */ React40.createElement("div", {
1582
1549
  className: "fastboard-toolbar-panel text"
1583
- }, /* @__PURE__ */ React41.createElement(ColorBox, null));
1550
+ }, /* @__PURE__ */ React40.createElement(ColorBox, null));
1584
1551
  }
1585
1552
 
1586
1553
  // src/components/Toolbar/components/UpDownButtons.tsx
1587
- import React42, { useCallback as useCallback9, useContext as useContext12 } from "react";
1554
+ import React41, { useCallback as useCallback9, useContext as useContext12 } from "react";
1588
1555
  function UpButton({ disabled, scrollTo }) {
1589
1556
  const { theme, icons } = useContext12(ToolbarContext);
1590
1557
  const scrollUp = useCallback9(() => scrollTo(-ItemHeight), [scrollTo]);
1591
- return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(Button, {
1558
+ return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(Button, {
1592
1559
  content: "Up",
1593
1560
  disabled,
1594
1561
  onClick: scrollUp
1595
- }, /* @__PURE__ */ React42.createElement(Icon, {
1596
- fallback: /* @__PURE__ */ React42.createElement(Icons.Up, {
1562
+ }, /* @__PURE__ */ React41.createElement(Icon, {
1563
+ fallback: /* @__PURE__ */ React41.createElement(Icons.Up, {
1597
1564
  theme
1598
1565
  }),
1599
1566
  src: disabled ? icons == null ? void 0 : icons.upIconDisable : icons == null ? void 0 : icons.upIcon,
1600
1567
  alt: "[up]"
1601
- })), /* @__PURE__ */ React42.createElement(CutLine, null));
1568
+ })), /* @__PURE__ */ React41.createElement(CutLine, null));
1602
1569
  }
1603
1570
  function DownButton({ disabled, scrollTo }) {
1604
1571
  const { theme, icons } = useContext12(ToolbarContext);
1605
1572
  const scrollDown = useCallback9(() => scrollTo(ItemHeight), [scrollTo]);
1606
- return /* @__PURE__ */ React42.createElement(React42.Fragment, null, /* @__PURE__ */ React42.createElement(CutLine, null), /* @__PURE__ */ React42.createElement(Button, {
1573
+ return /* @__PURE__ */ React41.createElement(React41.Fragment, null, /* @__PURE__ */ React41.createElement(CutLine, null), /* @__PURE__ */ React41.createElement(Button, {
1607
1574
  content: "Down",
1608
1575
  disabled,
1609
1576
  onClick: scrollDown
1610
- }, /* @__PURE__ */ React42.createElement(Icon, {
1611
- fallback: /* @__PURE__ */ React42.createElement(Icons.Down, {
1577
+ }, /* @__PURE__ */ React41.createElement(Icon, {
1578
+ fallback: /* @__PURE__ */ React41.createElement(Icons.Down, {
1612
1579
  theme
1613
1580
  }),
1614
1581
  src: disabled ? icons == null ? void 0 : icons.downIconDisable : icons == null ? void 0 : icons.downIcon,
@@ -1616,11 +1583,16 @@ function DownButton({ disabled, scrollTo }) {
1616
1583
  })));
1617
1584
  }
1618
1585
 
1586
+ // src/components/Toolbar/components/assets/collapsed.png
1587
+ 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";
1588
+
1619
1589
  // src/components/Toolbar/Content.tsx
1620
- var Content = React43.memo(() => {
1590
+ function Content({ onCollapse }) {
1591
+ const { theme, icons, writable } = useContext13(ToolbarContext);
1621
1592
  const ref = useRef2(null);
1622
- const [scrollTop, setScrollTop] = useState4(0);
1623
- const [parentHeight, setParentHeight] = useState4(0);
1593
+ const [scrollTop, setScrollTop] = useState3(0);
1594
+ const [parentHeight, setParentHeight] = useState3(0);
1595
+ const disabled = !writable;
1624
1596
  const needScroll = parentHeight < ItemHeight * ItemsCount + 48;
1625
1597
  const sectionHeight = clamp(parentHeight - 48 * (needScroll ? 3 : 1), MinHeight, MaxHeight);
1626
1598
  const scrollBuffer = Math.max(parentHeight - sectionHeight - 1, 0);
@@ -1629,12 +1601,12 @@ var Content = React43.memo(() => {
1629
1601
  const scrollTo = useCallback10((height) => {
1630
1602
  setScrollTop(clamp(scrollTop + height, 0, scrollBuffer));
1631
1603
  }, [scrollBuffer, scrollTop]);
1632
- useEffect4(() => {
1604
+ useEffect3(() => {
1633
1605
  if (ref.current) {
1634
1606
  ref.current.scrollTop = scrollTop;
1635
1607
  }
1636
1608
  }, [scrollTop]);
1637
- useEffect4(() => {
1609
+ useEffect3(() => {
1638
1610
  var _a, _b;
1639
1611
  const container = (_b = (_a = ref.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.parentElement;
1640
1612
  if (container) {
@@ -1647,95 +1619,82 @@ var Content = React43.memo(() => {
1647
1619
  return () => resizeObserver.disconnect();
1648
1620
  }
1649
1621
  }, []);
1650
- return /* @__PURE__ */ React43.createElement(React43.Fragment, null, needScroll && /* @__PURE__ */ React43.createElement(UpButton, {
1622
+ return /* @__PURE__ */ React42.createElement(React42.Fragment, null, needScroll && /* @__PURE__ */ React42.createElement(UpButton, {
1651
1623
  scrollTo,
1652
1624
  disabled: disableScrollUp
1653
- }), /* @__PURE__ */ React43.createElement("div", {
1625
+ }), /* @__PURE__ */ React42.createElement("div", {
1654
1626
  ref,
1655
1627
  className: clsx8(`${name4}-section`),
1656
1628
  style: {
1657
1629
  height: `${sectionHeight}px`,
1658
1630
  overflow: needScroll ? "hidden" : "visible"
1659
1631
  }
1660
- }, /* @__PURE__ */ React43.createElement(ClickerButton, null), /* @__PURE__ */ React43.createElement(SelectorButton, null), /* @__PURE__ */ React43.createElement(PencilButton, null), /* @__PURE__ */ React43.createElement(TextButton, null), /* @__PURE__ */ React43.createElement(ShapesButton, null), /* @__PURE__ */ React43.createElement(EraserButton, null), /* @__PURE__ */ React43.createElement(CleanButton, null), /* @__PURE__ */ React43.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ React43.createElement(DownButton, {
1632
+ }, /* @__PURE__ */ React42.createElement(ClickerButton, null), /* @__PURE__ */ React42.createElement(SelectorButton, null), /* @__PURE__ */ React42.createElement(PencilButton, null), /* @__PURE__ */ React42.createElement(TextButton, null), /* @__PURE__ */ React42.createElement(ShapesButton, null), /* @__PURE__ */ React42.createElement(EraserButton, null), /* @__PURE__ */ React42.createElement(CleanButton, null), /* @__PURE__ */ React42.createElement(AppsButton, null)), needScroll && /* @__PURE__ */ React42.createElement(DownButton, {
1661
1633
  scrollTo,
1662
1634
  disabled: disableScrollDown
1663
- }));
1664
- });
1635
+ }), /* @__PURE__ */ React42.createElement("div", {
1636
+ className: clsx8("fastboard-toolbar-mask", theme),
1637
+ onClick: onCollapse
1638
+ }, /* @__PURE__ */ React42.createElement(Icon, {
1639
+ fallback: /* @__PURE__ */ React42.createElement("img", {
1640
+ draggable: false,
1641
+ className: clsx8(`${name4}-mask-btn`, theme),
1642
+ src: collapsed_default
1643
+ }),
1644
+ src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
1645
+ })));
1646
+ }
1665
1647
 
1666
1648
  // src/components/Toolbar/Toolbar.tsx
1667
1649
  var ToolbarContext = createContext3(__spreadValues({
1668
1650
  theme: "light"
1669
1651
  }, EmptyToolbarHook));
1670
1652
  var name4 = "fastboard-toolbar";
1671
- var Toolbar = ({ theme, icons }) => {
1653
+ function Toolbar({ theme, icons }) {
1672
1654
  theme = useTheme(theme);
1673
1655
  const hook = useToolbar();
1674
- const [expanded, setExpanded] = useState5(true);
1675
- const [toolbar, toolbarRef] = useState5(null);
1676
- const [onHover, setOnHover] = useState5(false);
1677
- const [delayedOnHover, setDelayedOnHover] = useState5(false);
1678
- const [pointEvents, setPointEvents] = useState5(true);
1656
+ const [expanded, setExpanded] = useState4(true);
1657
+ const [pointerEvents, setPointerEvents] = useState4("auto");
1679
1658
  const disabled = !hook.writable;
1680
- const toggle = useCallback11(() => {
1681
- setExpanded((e) => !e);
1682
- }, []);
1683
- useEffect5(() => {
1684
- const timer = setTimeout(() => {
1685
- setDelayedOnHover(onHover);
1686
- }, 400);
1687
- return () => clearTimeout(timer);
1688
- }, [onHover]);
1689
- return /* @__PURE__ */ React44.createElement(ToolbarContext.Provider, {
1659
+ return /* @__PURE__ */ React43.createElement(ToolbarContext.Provider, {
1690
1660
  value: __spreadValues({ theme, icons }, hook)
1691
- }, /* @__PURE__ */ React44.createElement(AnimatePresence, null, expanded ? /* @__PURE__ */ React44.createElement(motion.div, {
1692
- initial: { x: -100 },
1693
- animate: { x: 0, transition: { duration: 0.5 } },
1661
+ }, /* @__PURE__ */ React43.createElement(AnimatePresence, null, expanded ? /* @__PURE__ */ React43.createElement(motion.div, {
1694
1662
  key: "toolbar",
1695
- ref: toolbarRef,
1696
1663
  className: clsx9(name4, theme),
1697
- onPointerEnter: () => {
1698
- expanded && setOnHover(true);
1699
- },
1700
- onMouseLeave: () => setOnHover(false),
1664
+ initial: { x: -100 },
1665
+ animate: { x: 0, transition: { duration: 0.5 } },
1701
1666
  exit: { x: -100, transition: { duration: 0.5 } },
1702
- onAnimationStart: () => setPointEvents(false),
1703
- onAnimationComplete: () => setPointEvents(true),
1704
- style: { pointerEvents: pointEvents ? "auto" : "none" }
1705
- }, /* @__PURE__ */ React44.createElement(Content, null), expanded && (onHover || delayedOnHover) && /* @__PURE__ */ React44.createElement(Mask, {
1706
- toolbar
1707
- }, /* @__PURE__ */ React44.createElement("div", {
1708
- onClick: toggle
1709
- }, /* @__PURE__ */ React44.createElement("img", {
1710
- draggable: false,
1711
- className: clsx9(`${name4}-mask-btn`, theme),
1712
- src: collapsed_default
1713
- })))) : /* @__PURE__ */ React44.createElement(motion.div, {
1667
+ onAnimationStart: () => setPointerEvents("none"),
1668
+ onAnimationComplete: () => setPointerEvents("auto"),
1669
+ style: { pointerEvents }
1670
+ }, /* @__PURE__ */ React43.createElement(Content, {
1671
+ onCollapse: () => setExpanded(false)
1672
+ })) : /* @__PURE__ */ React43.createElement(motion.div, {
1714
1673
  className: clsx9(`${name4}-expand-btn`, theme),
1715
1674
  key: "expand",
1716
- onClick: toggle,
1675
+ onClick: () => setExpanded(true),
1717
1676
  initial: { x: -100 },
1718
1677
  animate: { x: 0, transition: { duration: 0.5 } }
1719
- }, !expanded && /* @__PURE__ */ React44.createElement(Icon, {
1720
- fallback: /* @__PURE__ */ React44.createElement("img", {
1678
+ }, /* @__PURE__ */ React43.createElement(Icon, {
1679
+ fallback: /* @__PURE__ */ React43.createElement("img", {
1721
1680
  draggable: false,
1722
1681
  src: expanded_default,
1723
1682
  className: clsx9(`${name4}-mask-btn`, theme)
1724
1683
  }),
1725
1684
  src: disabled ? icons == null ? void 0 : icons.expandIconDisable : icons == null ? void 0 : icons.expandIcon
1726
1685
  }))));
1727
- };
1686
+ }
1728
1687
 
1729
1688
  // src/components/PlayerControl/hooks.ts
1730
- import { useCallback as useCallback12, useEffect as useEffect6, useState as useState6 } from "react";
1689
+ import { useCallback as useCallback11, useEffect as useEffect4, useState as useState5 } from "react";
1731
1690
  import { PlayerPhase } from "white-web-sdk";
1732
1691
  var EMPTY_ARRAY = [];
1733
1692
  function useForceUpdate2() {
1734
- const [, forceUpdate_] = useState6({});
1735
- return useCallback12(() => forceUpdate_({}), EMPTY_ARRAY);
1693
+ const [, forceUpdate_] = useState5({});
1694
+ return useCallback11(() => forceUpdate_({}), EMPTY_ARRAY);
1736
1695
  }
1737
1696
  function usePlayerControl(player) {
1738
- const togglePlay = useCallback12(() => {
1697
+ const togglePlay = useCallback11(() => {
1739
1698
  if (player) {
1740
1699
  switch (player.phase) {
1741
1700
  case PlayerPhase.WaitingFirstFrame:
@@ -1751,25 +1710,25 @@ function usePlayerControl(player) {
1751
1710
  }
1752
1711
  }
1753
1712
  }, [player]);
1754
- const seekToProgressTime = useCallback12((time) => {
1713
+ const seekToProgressTime = useCallback11((time) => {
1755
1714
  if (player) {
1756
1715
  player.seekToProgressTime(time);
1757
1716
  }
1758
1717
  }, [player]);
1759
1718
  const lastPlayer = useLastValue(player);
1760
1719
  const forceUpdate = useForceUpdate2();
1761
- const setSpeed = useCallback12((speed2) => {
1720
+ const setSpeed = useCallback11((speed2) => {
1762
1721
  if (player) {
1763
1722
  player.playbackSpeed = speed2;
1764
1723
  forceUpdate();
1765
1724
  }
1766
1725
  }, [forceUpdate, player]);
1767
- useEffect6(() => {
1726
+ useEffect4(() => {
1768
1727
  if (!lastPlayer && player) {
1769
1728
  forceUpdate();
1770
1729
  }
1771
1730
  }, [forceUpdate, lastPlayer, player]);
1772
- useEffect6(() => {
1731
+ useEffect4(() => {
1773
1732
  if (player) {
1774
1733
  player.callbacks.on("onPhaseChanged", forceUpdate);
1775
1734
  player.callbacks.on("onProgressTimeChanged", forceUpdate);
@@ -1798,16 +1757,16 @@ function usePlayerControl(player) {
1798
1757
  import Tippy10 from "@tippyjs/react";
1799
1758
  import clsx11 from "clsx";
1800
1759
  import RcSlider2 from "rc-slider";
1801
- import React49, { useEffect as useEffect7, useState as useState7 } from "react";
1760
+ import React48, { useEffect as useEffect5, useState as useState6 } from "react";
1802
1761
  import { PlayerPhase as PlayerPhase2 } from "white-web-sdk";
1803
1762
 
1804
1763
  // src/components/PlayerControl/components/Button.tsx
1805
1764
  import clsx10 from "clsx";
1806
- import React45, { forwardRef as forwardRef2 } from "react";
1765
+ import React44, { forwardRef as forwardRef2 } from "react";
1807
1766
  import Tippy9 from "@tippyjs/react";
1808
1767
  var Button2 = forwardRef2((props, ref) => {
1809
1768
  const { theme, content, disabled, active, onClick, interactive, placement = "top", children } = props;
1810
- return /* @__PURE__ */ React45.createElement(Tippy9, {
1769
+ return /* @__PURE__ */ React44.createElement(Tippy9, {
1811
1770
  className: "fastboard-tip",
1812
1771
  content,
1813
1772
  interactive,
@@ -1817,7 +1776,7 @@ var Button2 = forwardRef2((props, ref) => {
1817
1776
  offset: TopOffset,
1818
1777
  delay: [1e3, 400],
1819
1778
  duration: 300
1820
- }, /* @__PURE__ */ React45.createElement("button", {
1779
+ }, /* @__PURE__ */ React44.createElement("button", {
1821
1780
  ref,
1822
1781
  className: clsx10("fastboard-player-control-btn", theme, { active }),
1823
1782
  onClick,
@@ -1829,36 +1788,36 @@ var Button2 = forwardRef2((props, ref) => {
1829
1788
  import { memo as memo2 } from "react";
1830
1789
 
1831
1790
  // src/components/PlayerControl/icons/Loading.tsx
1832
- import React46 from "react";
1791
+ import React45 from "react";
1833
1792
  var Loading = (props) => {
1834
1793
  const stroke = getStroke(props);
1835
- return /* @__PURE__ */ React46.createElement("svg", {
1794
+ return /* @__PURE__ */ React45.createElement("svg", {
1836
1795
  viewBox: "0 0 24 24"
1837
- }, /* @__PURE__ */ React46.createElement("path", {
1796
+ }, /* @__PURE__ */ React45.createElement("path", {
1838
1797
  d: "M12 4V2A10 10 0 0 0 2 12h2a8 8 0 0 1 8-8z",
1839
1798
  fill: stroke
1840
1799
  }));
1841
1800
  };
1842
1801
 
1843
1802
  // src/components/PlayerControl/icons/Pause.tsx
1844
- import React47 from "react";
1803
+ import React46 from "react";
1845
1804
  var Pause = (props) => {
1846
1805
  const stroke = getStroke(props);
1847
- return /* @__PURE__ */ React47.createElement("svg", {
1806
+ return /* @__PURE__ */ React46.createElement("svg", {
1848
1807
  viewBox: "0 0 24 24"
1849
- }, /* @__PURE__ */ React47.createElement("path", {
1808
+ }, /* @__PURE__ */ React46.createElement("path", {
1850
1809
  d: "M14 19h4V5h-4M6 19h4V5H6v14z",
1851
1810
  fill: stroke
1852
1811
  }));
1853
1812
  };
1854
1813
 
1855
1814
  // src/components/PlayerControl/icons/Play.tsx
1856
- import React48 from "react";
1815
+ import React47 from "react";
1857
1816
  var Play = (props) => {
1858
1817
  const stroke = getStroke(props);
1859
- return /* @__PURE__ */ React48.createElement("svg", {
1818
+ return /* @__PURE__ */ React47.createElement("svg", {
1860
1819
  viewBox: "0 0 24 24"
1861
- }, /* @__PURE__ */ React48.createElement("path", {
1820
+ }, /* @__PURE__ */ React47.createElement("path", {
1862
1821
  d: "M8 5.14v14l11-7l-11-7z",
1863
1822
  fill: stroke
1864
1823
  }));
@@ -1877,12 +1836,12 @@ function PlayerControl(_a) {
1877
1836
  var _b = _a, { theme, autoHide = false, player: player_ } = _b, icons = __objRest(_b, ["theme", "autoHide", "player"]);
1878
1837
  theme = useTheme(theme);
1879
1838
  const { t } = useTranslation();
1880
- const [currentTime, setCurrentTime] = useState7(0);
1839
+ const [currentTime, setCurrentTime] = useState6(0);
1881
1840
  const player = usePlayerControl(player_);
1882
- useEffect7(() => {
1841
+ useEffect5(() => {
1883
1842
  setCurrentTime(player.currentTime);
1884
1843
  }, [player.currentTime]);
1885
- useEffect7(() => {
1844
+ useEffect5(() => {
1886
1845
  if (player.currentTime !== currentTime) {
1887
1846
  player.seekToProgressTime(currentTime);
1888
1847
  }
@@ -1890,25 +1849,25 @@ function PlayerControl(_a) {
1890
1849
  const isLoading = player.phase === PlayerPhase2.WaitingFirstFrame || player.phase === PlayerPhase2.Buffering;
1891
1850
  const isPlaying = player.phase === PlayerPhase2.Playing;
1892
1851
  const { activeColor } = themes[theme];
1893
- return /* @__PURE__ */ React49.createElement("div", {
1852
+ return /* @__PURE__ */ React48.createElement("div", {
1894
1853
  className: clsx11(name5, theme, { "auto-hide": autoHide })
1895
- }, /* @__PURE__ */ React49.createElement("button", {
1854
+ }, /* @__PURE__ */ React48.createElement("button", {
1896
1855
  className: clsx11(`${name5}-btn`, isLoading ? "loading" : isPlaying ? "pause" : "play", theme),
1897
1856
  disabled: isLoading,
1898
1857
  onClick: player.togglePlay
1899
- }, /* @__PURE__ */ React49.createElement(Icon, {
1900
- fallback: isLoading ? /* @__PURE__ */ React49.createElement(Icons2.Loading, {
1858
+ }, /* @__PURE__ */ React48.createElement(Icon, {
1859
+ fallback: isLoading ? /* @__PURE__ */ React48.createElement(Icons2.Loading, {
1901
1860
  theme
1902
- }) : isPlaying ? /* @__PURE__ */ React49.createElement(Icons2.Pause, {
1861
+ }) : isPlaying ? /* @__PURE__ */ React48.createElement(Icons2.Pause, {
1903
1862
  theme
1904
- }) : /* @__PURE__ */ React49.createElement(Icons2.Play, {
1863
+ }) : /* @__PURE__ */ React48.createElement(Icons2.Play, {
1905
1864
  theme
1906
1865
  }),
1907
1866
  src: isLoading ? icons.loadingIcon : isPlaying ? icons.pauseIcon : icons.playIcon,
1908
1867
  alt: isLoading ? "[loading]" : isPlaying ? "[pause]" : "[play]"
1909
- })), /* @__PURE__ */ React49.createElement("span", {
1868
+ })), /* @__PURE__ */ React48.createElement("span", {
1910
1869
  className: clsx11(`${name5}-slider`, { loading: isLoading }, theme)
1911
- }, /* @__PURE__ */ React49.createElement(RcSlider2, {
1870
+ }, /* @__PURE__ */ React48.createElement(RcSlider2, {
1912
1871
  disabled: isLoading,
1913
1872
  trackStyle: { background: activeColor },
1914
1873
  handleStyle: { border: `1px solid ${activeColor}` },
@@ -1917,15 +1876,15 @@ function PlayerControl(_a) {
1917
1876
  min: 0,
1918
1877
  max: player.totalTime,
1919
1878
  step: 100
1920
- })), /* @__PURE__ */ React49.createElement("span", {
1879
+ })), /* @__PURE__ */ React48.createElement("span", {
1921
1880
  className: clsx11(`${name5}-current`, theme)
1922
- }, renderTime(player.currentTime)), /* @__PURE__ */ React49.createElement("span", {
1881
+ }, renderTime(player.currentTime)), /* @__PURE__ */ React48.createElement("span", {
1923
1882
  className: clsx11(`${name5}-slash`, theme)
1924
- }, "/"), /* @__PURE__ */ React49.createElement("span", {
1883
+ }, "/"), /* @__PURE__ */ React48.createElement("span", {
1925
1884
  className: clsx11(`${name5}-total`, theme)
1926
- }, renderTime(player.totalTime)), /* @__PURE__ */ React49.createElement("span", {
1885
+ }, renderTime(player.totalTime)), /* @__PURE__ */ React48.createElement("span", {
1927
1886
  className: `${name5}-btn-interactive`
1928
- }, /* @__PURE__ */ React49.createElement(Tippy10, {
1887
+ }, /* @__PURE__ */ React48.createElement(Tippy10, {
1929
1888
  className: "fastboard-tip",
1930
1889
  content: renderSpeeds(player),
1931
1890
  theme,
@@ -1934,11 +1893,11 @@ function PlayerControl(_a) {
1934
1893
  offset: TopOffset,
1935
1894
  arrow: false,
1936
1895
  interactive: true
1937
- }, /* @__PURE__ */ React49.createElement(Button2, {
1896
+ }, /* @__PURE__ */ React48.createElement(Button2, {
1938
1897
  content: t("speed"),
1939
1898
  theme,
1940
1899
  disabled: isLoading
1941
- }, /* @__PURE__ */ React49.createElement("span", {
1900
+ }, /* @__PURE__ */ React48.createElement("span", {
1942
1901
  className: clsx11(`${name5}-speed-text`, theme)
1943
1902
  }, player.speed, "x")))));
1944
1903
  }
@@ -1950,9 +1909,9 @@ function renderTime(ms) {
1950
1909
  }
1951
1910
  var Speeds = [2, 1.5, 1.25, 1, 0.75, 0.5];
1952
1911
  function renderSpeeds({ speed: current, setSpeed }) {
1953
- return /* @__PURE__ */ React49.createElement("div", {
1912
+ return /* @__PURE__ */ React48.createElement("div", {
1954
1913
  className: clsx11(`${name5}-panel`, "speed")
1955
- }, Speeds.map((speed) => /* @__PURE__ */ React49.createElement("button", {
1914
+ }, Speeds.map((speed) => /* @__PURE__ */ React48.createElement("button", {
1956
1915
  className: clsx11(`${name5}-btn`, "speed", {
1957
1916
  active: speed === current
1958
1917
  }),
@@ -1962,18 +1921,18 @@ function renderSpeeds({ speed: current, setSpeed }) {
1962
1921
  }
1963
1922
 
1964
1923
  // src/components/Fastboard.tsx
1965
- import React50, { forwardRef as forwardRef3, useCallback as useCallback13, useEffect as useEffect8 } from "react";
1924
+ import React49, { forwardRef as forwardRef3, useCallback as useCallback12, useEffect as useEffect6 } from "react";
1966
1925
  var Fastboard = /* @__PURE__ */ forwardRef3(function Fastboard2(_a, ref) {
1967
1926
  var _b = _a, { app, theme, layout, language } = _b, restProps = __objRest(_b, ["app", "theme", "layout", "language"]);
1968
1927
  if (!app) {
1969
- return /* @__PURE__ */ React50.createElement("div", __spreadValues({
1928
+ return /* @__PURE__ */ React49.createElement("div", __spreadValues({
1970
1929
  className: "fastboard-root",
1971
1930
  ref
1972
1931
  }, restProps));
1973
1932
  }
1974
- return /* @__PURE__ */ React50.createElement(FastboardAppContext.Provider, {
1933
+ return /* @__PURE__ */ React49.createElement(FastboardAppContext.Provider, {
1975
1934
  value: app
1976
- }, /* @__PURE__ */ React50.createElement(FastboardInternal, __spreadValues(__spreadValues({
1935
+ }, /* @__PURE__ */ React49.createElement(FastboardInternal, __spreadValues(__spreadValues({
1977
1936
  forwardedRef: ref
1978
1937
  }, { theme, layout, language }), restProps)));
1979
1938
  });
@@ -1994,15 +1953,15 @@ function FastboardInternal(_a) {
1994
1953
  const app = useFastboardApp();
1995
1954
  const forceUpdate = useForceUpdate();
1996
1955
  const i18n = useAsyncValue(() => createI18n({ language }));
1997
- useEffect8(() => {
1956
+ useEffect6(() => {
1998
1957
  if (i18n)
1999
1958
  i18n.changeLanguage(language);
2000
1959
  forceUpdate();
2001
1960
  }, [forceUpdate, i18n, language]);
2002
- useEffect8(() => {
1961
+ useEffect6(() => {
2003
1962
  app.manager.setPrefersColorScheme(theme);
2004
1963
  }, [app, theme]);
2005
- const useWhiteboard = useCallback13((container) => {
1964
+ const useWhiteboard = useCallback12((container) => {
2006
1965
  if (container && app)
2007
1966
  app.manager.bindContainer(container);
2008
1967
  }, [app]);
@@ -2014,33 +1973,33 @@ function FastboardInternal(_a) {
2014
1973
  ZoomControl: zoom_control = showControls,
2015
1974
  PageControl: page_control = showControls
2016
1975
  } = layout;
2017
- return /* @__PURE__ */ React50.createElement(ThemeContext.Provider, {
1976
+ return /* @__PURE__ */ React49.createElement(ThemeContext.Provider, {
2018
1977
  value: theme
2019
- }, /* @__PURE__ */ React50.createElement(I18nContext.Provider, {
1978
+ }, /* @__PURE__ */ React49.createElement(I18nContext.Provider, {
2020
1979
  value: i18n
2021
- }, /* @__PURE__ */ React50.createElement("div", __spreadProps(__spreadValues({}, restProps), {
1980
+ }, /* @__PURE__ */ React49.createElement("div", __spreadProps(__spreadValues({}, restProps), {
2022
1981
  className: "fastboard-root",
2023
1982
  ref: forwardedRef
2024
- }), /* @__PURE__ */ React50.createElement("div", {
1983
+ }), /* @__PURE__ */ React49.createElement("div", {
2025
1984
  className: "fastboard-view",
2026
1985
  ref: useWhiteboard
2027
- }), children ? children : /* @__PURE__ */ React50.createElement(React50.Fragment, null, toolbar && /* @__PURE__ */ React50.createElement("div", {
1986
+ }), children ? children : /* @__PURE__ */ React49.createElement(React49.Fragment, null, toolbar && /* @__PURE__ */ React49.createElement("div", {
2028
1987
  className: "fastboard-left"
2029
- }, /* @__PURE__ */ React50.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ React50.createElement("div", {
1988
+ }, /* @__PURE__ */ React49.createElement(Toolbar, null)), (redo_undo || zoom_control) && /* @__PURE__ */ React49.createElement("div", {
2030
1989
  className: "fastboard-bottom-left"
2031
- }, redo_undo && /* @__PURE__ */ React50.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ React50.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ React50.createElement("div", {
1990
+ }, redo_undo && /* @__PURE__ */ React49.createElement(RedoUndo, null), zoom_control && /* @__PURE__ */ React49.createElement(ZoomControl, null)), page_control && /* @__PURE__ */ React49.createElement("div", {
2032
1991
  className: "fastboard-bottom-right"
2033
- }, /* @__PURE__ */ React50.createElement(PageControl, null))))));
1992
+ }, /* @__PURE__ */ React49.createElement(PageControl, null))))));
2034
1993
  }
2035
1994
 
2036
1995
  // src/vanilla/index.tsx
2037
- import React51 from "react";
2038
- import ReactDOM2 from "react-dom";
1996
+ import React50 from "react";
1997
+ import ReactDOM from "react-dom";
2039
1998
  function mount(app, dom, props) {
2040
- ReactDOM2.render(/* @__PURE__ */ React51.createElement(Fastboard, __spreadValues({
1999
+ ReactDOM.render(/* @__PURE__ */ React50.createElement(Fastboard, __spreadValues({
2041
2000
  app
2042
2001
  }, props)), dom);
2043
- return () => ReactDOM2.unmountComponentAtNode(dom);
2002
+ return () => ReactDOM.unmountComponentAtNode(dom);
2044
2003
  }
2045
2004
  export {
2046
2005
  EmptyToolbarHook,