@netless/fastboard-react 0.2.0 → 0.2.1

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