@netless/window-manager 0.4.0-canary.9 → 0.4.2

package/dist/style.css

@@ -1 +1 @@
-.page-renderer-pages-container{position:relative;overflow:hidden}.page-renderer-page{position:absolute;top:0;left:0;will-change:transform;background-position:center;background-size:cover;background-repeat:no-repeat}.page-renderer-page-img{display:block;width:100%;height:auto;user-select:none}.netless-app-docs-viewer-static-scrollbar{position:absolute;top:0;right:0;z-index:2147483647;width:8px;min-height:30px;margin:0;padding:0;border:none;outline:none;border-radius:4px;background:rgba(68,78,96,.4);box-shadow:1px 1px 8px #ffffffb3;opacity:0;transition:background .4s,opacity .4s 3s,transform .2s;will-change:transform,height;user-select:none}.netless-app-docs-viewer-static-scrollbar.netless-app-docs-viewer-static-scrollbar-dragging{background:rgba(68,78,96,.6);opacity:1;transition:background .4s,opacity .4s 3s!important}.netless-app-docs-viewer-static-scrollbar:hover,.netless-app-docs-viewer-static-scrollbar:focus{background:rgba(68,78,96,.5)}.netless-app-docs-viewer-static-scrollbar:active{background:rgba(68,78,96,.6)}.netless-app-docs-viewer-content:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-app-docs-viewer-readonly .netless-app-docs-viewer-static-scrollbar{display:none}.netless-app-docs-viewer-static-pages:hover .netless-app-docs-viewer-static-scrollbar{opacity:1;transition:background .4s,opacity .4s,transform .2s}.netless-window-manager-playground{width:100%;height:100%;position:relative;z-index:1;overflow:hidden;user-select:none}.netless-window-manager-sizer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;overflow:hidden;display:flex}.netless-window-manager-sizer-horizontal{flex-direction:column}.netless-window-manager-sizer:before,.netless-window-manager-sizer:after{flex:1;content:"";display:block}.netless-window-manager-chess-sizer:before,.netless-window-manager-chess-sizer:after{background-image:linear-gradient(45deg,#b0b0b0 25%,transparent 25%),linear-gradient(-45deg,#b0b0b0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#b0b0b0 75%),linear-gradient(-45deg,transparent 75%,#b0b0b0 75%);background-color:#fff;background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.netless-window-manager-wrapper{position:relative;z-index:1;width:100%;height:100%;overflow:hidden}.netless-window-manager-main-view{width:100%;height:100%}.netless-window-manager-cursor-pencil-image{width:26px;height:26px}.netless-window-manager-cursor-eraser-image{width:26px;height:26px}.netless-window-manager-cursor-selector-image{width:24px;height:24px}.netless-window-manager-cursor-selector-avatar{border-radius:50%;border-style:solid;border-width:2px;border-color:#fff;margin-bottom:2px}.netless-window-manager-cursor-selector-avatar img{width:12px}.netless-window-manager-cursor-inner{border-radius:4px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:4px;padding-right:4px;font-size:12px}.netless-window-manager-cursor-inner-mellow{height:32px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:row;padding-left:16px;padding-right:16px}.netless-window-manager-cursor-tag-name{font-size:12px;margin-left:4px;padding:2px 8px;border-radius:4px}.netless-window-manager-cursor-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:26px;height:26px;z-index:2147483647;left:0;top:0;will-change:transform;transition:transform .05s;transform-origin:0 0;user-select:none}.netless-window-manager-cursor-pencil-offset{margin-left:-20px}.netless-window-manager-cursor-selector-offset{margin-left:-22px;margin-top:56px}.netless-window-manager-cursor-text-offset{margin-left:-30px;margin-top:18px}.netless-window-manager-cursor-shape-offset{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;width:180px;height:64px;margin-left:-30px;margin-top:12px}.netless-window-manager-cursor-name{width:100%;height:48px;display:flex;align-items:center;justify-content:center;position:absolute;top:-40px}.cursor-image-wrapper{display:flex;justify-content:center}.telebox-collector{position:absolute;right:10px;bottom:15px}.tele-fancy-scrollbar{overscroll-behavior:contain;overflow:auto;overflow-y:scroll;overflow-y:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.tele-fancy-scrollbar::-webkit-scrollbar{height:8px;width:8px}.tele-fancy-scrollbar::-webkit-scrollbar-track{background-color:transparent}.tele-fancy-scrollbar::-webkit-scrollbar-thumb{background-color:#444e601a;background-color:transparent;border-radius:4px;transition:background-color .4s}.tele-fancy-scrollbar:hover::-webkit-scrollbar-thumb{background-color:#444e601a}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:hover{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:active{background-color:#444e6033}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:vertical{min-height:50px}.tele-fancy-scrollbar::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-box{position:absolute;top:0;left:0;z-index:100;will-change:transform;transition:width .4s cubic-bezier(.4,.9,.71,1.02),height .4s cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .4s ease}.telebox-box-main{position:relative;width:100%;height:100%;display:flex;flex-direction:column;overflow:hidden;background:#f9f9fc;box-shadow:0 4px 10px #2f419226;border-radius:6px;border:1px solid #e3e3ec}.telebox-titlebar-wrap{flex-shrink:0;position:relative;z-index:1}.telebox-content-wrap{flex:1;width:100%;overflow:hidden;display:flex;justify-content:center;align-items:center}.telebox-content{width:100%;height:100%;position:relative}.telebox-footer-wrap{flex-shrink:0;display:flex;flex-direction:column}.telebox-footer-wrap:before{content:"";display:block;flex:1}.telebox-resize-handle{position:absolute;z-index:2147483647}.telebox-n{width:100%;height:5px;left:0;top:-5px;cursor:n-resize}.telebox-s{width:100%;height:5px;left:0;bottom:-5px;cursor:s-resize}.telebox-w{width:5px;height:100%;left:-5px;top:0;cursor:w-resize}.telebox-e{width:5px;height:100%;right:-5px;top:0;cursor:e-resize}.telebox-nw{width:15px;height:15px;top:-5px;left:-5px;cursor:nw-resize}.telebox-ne{width:15px;height:15px;top:-5px;right:-5px;cursor:ne-resize}.telebox-se{width:15px;height:15px;bottom:-5px;right:-5px;cursor:se-resize}.telebox-sw{width:15px;height:15px;bottom:-5px;left:-5px;cursor:sw-resize}.telebox-track-mask{position:fixed;top:0;left:0;z-index:2147483647;width:100%;height:100%;background:rgba(0,0,0,.0001);cursor:move}.telebox-cursor-n{cursor:n-resize}.telebox-cursor-s{cursor:s-resize}.telebox-cursor-w{cursor:w-resize}.telebox-cursor-e{cursor:e-resize}.telebox-cursor-nw{cursor:nw-resize}.telebox-cursor-ne{cursor:ne-resize}.telebox-cursor-se{cursor:se-resize}.telebox-cursor-sw{cursor:sw-resize}.telebox-maximized .telebox-resize-handles,.telebox-no-resize .telebox-resize-handles{display:none}.telebox-maximized{box-shadow:none;transition:none}.telebox-minimized{will-change:transform;transition:width 50ms cubic-bezier(.4,.9,.71,1.02),height 50ms cubic-bezier(.55,.82,.63,.95),opacity .6s cubic-bezier(.7,0,.84,0),transform .6s ease;opacity:0;pointer-events:none;user-select:none}.telebox-transforming{will-change:transform;transition:opacity .6s cubic-bezier(.7,0,.84,0)}.telebox-readonly .telebox-resize-handle{cursor:initial!important;pointer-events:none!important}.telebox-color-scheme-dark .telebox-box-main{color:#e9e9e9;background:#212126;border-color:#43434d}.telebox-titlebar{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;background:#fff;user-select:none;border-bottom:1px solid #eeeef7}.telebox-title{overflow:hidden;margin:0 24px 0 0;padding:0;font-size:14px;font-weight:400;font-family:PingFangSC-Regular,PingFang SC;white-space:nowrap;word-break:keep-all;text-overflow:ellipsis;color:#191919}.telebox-titlebar-btns{white-space:nowrap;word-break:keep-all;margin-left:auto;font-size:0}.telebox-titlebar-btn{width:22px;height:22px;padding:0;outline:0;border:none;background:0 0;cursor:pointer}.telebox-titlebar-btn~.telebox-titlebar-btn{margin-left:10px}.telebox-titlebar-btn-icon{width:22px;height:22px}.telebox-readonly .telebox-titlebar-btn{cursor:not-allowed}.telebox-titlebar-icon-minimize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPHBhdGggZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBkPSJNOSAxM2gxMHYxLjZIOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-titlebar-icon-maximize{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjh2MjhIMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj4KICAgICAgICAgICAgPHVzZSB4bGluazpocmVmPSIjYSIgLz4KICAgICAgICA8L21hc2s+CiAgICAgICAgPGcgZmlsbD0iI0E3QTdDQSIgZmlsbC1ydWxlPSJub256ZXJvIiBtYXNrPSJ1cmwoI2IpIj4KICAgICAgICAgICAgPHBhdGgKICAgICAgICAgICAgICAgIGQ9Ik0yMC40ODEgMTcuMWgxLjJ2NC41ODFIMTcuMXYtMS4yaDMuMzgxVjE3LjF6bS0xNC4xOTA1LS4wMDloMS4ydjMuMzgxaDMuMzgwOXYxLjJoLTQuNTgxdi00LjU4MXpNMTcuMSA2LjE5MDVoNC41ODF2NC41ODA5aC0xLjJ2LTMuMzgxSDE3LjF2LTEuMnptLTEwLjcwMDguMTA4N2g0Ljc5ODV2MS4ySDcuNTk5MnYzLjU5ODVoLTEuMlY2LjI5OTJ6IiAvPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==)}.telebox-titlebar-icon-maximize.is-active{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMjggMjgiPgogICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjZ2MjZIMHoiIC8+CiAgICAgICAgPHBhdGggaWQ9ImMiIGQ9Ik0yNi44NjkgMEwyOCAxLjEzMVYyNi44N0wyNi44NjkgMjhIMS4xM0wwIDI2Ljg3VjEuMTMxTDEuMTMgMHoiIC8+CiAgICA8L2RlZnM+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEgMSkiPgogICAgICAgICAgICA8bWFzayBpZD0iYiIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNhIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tNC42NDI5LTQuNjQyOWgzNS4yODU4djM1LjI4NThILTQuNjQyOXoiIG1hc2s9InVybCgjYikiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxnPgogICAgICAgICAgICA8bWFzayBpZD0iZCIgZmlsbD0iI2ZmZiI+CiAgICAgICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNjIiAvPgogICAgICAgICAgICA8L21hc2s+CiAgICAgICAgICAgIDxwYXRoIGZpbGw9Im5vbmUiIGQ9Ik0tMTcuNTE2OCAxNEwxNC0xNy41MTY4IDQ1LjUxNjggMTQgMTQgNDUuNTE2OHoiIG1hc2s9InVybCgjZCkiIC8+CiAgICAgICAgPC9nPgogICAgICAgIDxwYXRoIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjIiCiAgICAgICAgICAgIGQ9Ik0xMC4wODg2IDIxLjQ4NjV2LTMuNjk2Nkg2LjM5Mk0yMS4zODU1IDEwLjE4OTVoLTMuNjk2NlY2LjQ5M00yMS40MDIgMTcuNzk4M2gtMy42OTY2djMuNjk2Nk0xMC4yNTAzIDYuMTQ5OHYzLjg5ODVINi4zNTE3IiAvPgogICAgPC9nPgo8L3N2Zz4K)}.telebox-titlebar-icon-close{background:center/cover no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCI+CiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI0E3QTdDQSIgc3Ryb2tlLXdpZHRoPSIxLjQiPgogICAgICAgIDxwYXRoIGQ9Ik04LjM1MyAyMC4zMzIxTDIwLjMzMiA4LjM1M00yMC4zMzIyIDIwLjMzMjFMOC4zNTMgOC4zNTMiIC8+CiAgICA8L2c+Cjwvc3ZnPgo=)}.telebox-color-scheme-dark .telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-collector{visibility:hidden;display:block;position:absolute;z-index:200;width:40px;height:40px;margin:0;padding:0;border:none;outline:0;font-size:0;border-radius:50%;background:#fff;box-shadow:0 2px 6px #2f419226;cursor:pointer;user-select:none;pointer-events:none;background-repeat:no-repeat;background-size:18px 16px;background-position:center}.telebox-collector-visible{visibility:visible;pointer-events:initial}.telebox-collector-readonly{cursor:not-allowed}.telebox-color-scheme-dark.telebox-collector{background-color:#43434d}.telebox-max-titlebar{display:none;position:absolute;top:0;left:0;z-index:50000;user-select:none}.telebox-max-titlebar-maximized{display:flex}.telebox-titles{flex:1;height:100%;margin:0 16px 0 -16px;overflow-y:hidden;overflow-x:scroll;overflow-x:overlay;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;scrollbar-width:auto}.telebox-titles::-webkit-scrollbar{height:8px;width:8px}.telebox-titles::-webkit-scrollbar-track{background-color:transparent}.telebox-titles::-webkit-scrollbar-thumb{background-color:#eeeef7cc;background-color:transparent;border-radius:4px;transition:background-color .4s}.telebox-titles:hover::-webkit-scrollbar-thumb{background-color:#eeeef7cc}.telebox-titles::-webkit-scrollbar-thumb:hover{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:active{background-color:#eeeef7}.telebox-titles::-webkit-scrollbar-thumb:vertical{min-height:50px}.telebox-titles::-webkit-scrollbar-thumb:horizontal{min-width:50px}.telebox-titles-content{height:100%;display:flex;flex-wrap:nowrap;align-items:center;padding:0}.telebox-titles-tab{overflow:hidden;max-width:182px;min-width:50px;padding:0 26px 0 16px;outline:0;font-size:13px;font-family:PingFangSC-Regular,PingFang SC;font-weight:400;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all;border:none;border-right:1px solid #e5e5f0;color:#7b88a0;background:0 0;cursor:pointer}.telebox-titles-tab~.telebox-titles-tab{margin-left:2px}.telebox-titles-tab-focus{color:#357bf6}.telebox-readonly .telebox-titles-tab{cursor:not-allowed}.telebox-color-scheme-dark{color-scheme:dark}.telebox-color-scheme-dark.telebox-titlebar{color:#e9e9e9;background:#43434d;border-bottom:none}.telebox-color-scheme-dark .telebox-titles-tab{border-right-color:#7b88a0}.telebox-color-scheme-dark .telebox-title{color:#e9e9e9}
+.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{width:26px;height:26px}.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-laserPointer-image{margin-left:-22px;margin-top:3px}.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;top:0;left:0;right:0;bottom: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}

package/dist/typings.d.ts

@@ -2,7 +2,7 @@ import type Emittery from "emittery";
 import type { AnimationMode, Displayer, DisplayerState, Player, Room, SceneDefinition, SceneState, View } from "white-web-sdk";
 import type { AppContext } from "./AppContext";
 import type { ReadonlyTeleBox, TeleBoxRect } from "@netless/telebox-insider";
-export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = any> {
+export interface NetlessApp<Attributes = any, MagixEventPayloads = any, AppOptions = any, SetupResult = any> {
     kind: string;
     config?: {
         /** Box width relative to whiteboard. 0~1. Default 0.5. */
@@ -16,7 +16,7 @@ export interface NetlessApp<Attributes = any, SetupResult = any, AppOptions = an
         /** App only single instance. */
         singleton?: boolean;
     };
-    setup: (context: AppContext<Attributes, AppOptions>) => SetupResult;
+    setup: (context: AppContext<Attributes, MagixEventPayloads, AppOptions>) => SetupResult;
 }
 export declare type AppEmitterEvent<T = any> = {
     /**

package/docs/advanced.md

@@ -0,0 +1,53 @@
+## 进阶使用
+
+- 目录
+  - [撤销重做](#redo-undo)
+  - [清屏](#clean-current-scene)
+
+
+<h3 id="redo-undo">撤销重做</h3>
+
+> 以下事件和属性都会根据 `focus` 的窗口来进行自动切换应用对象
+
+#### 获取可以撤销/重做的步数
+
+```ts
+manager.canUndoSteps
+manager.canRedoSteps
+```
+
+#### 监听可以撤销/重做的步数的变化
+
+`canRedoStepsChange` 和 `canUndoStepsChange` 会在切换窗口时重新触发
+
+```ts
+manager.emitter.on("canUndoStepsChange", (steps: number) => {
+    // 可以撤销的步数更新
+})
+manager.emitter.on("canRedoStepsChange", (steps: number) => {
+    // 可以重做的步数更新
+})
+```
+
+#### 撤销/重做
+
+```ts
+manager.undo() //撤销
+manager.redo() // 重做 
+```
+
+<br>
+
+<h3 id="clean-current-scene">清屏</h3>
+
+因为在多窗口模式下有多个白板, 如果想要清除当前 `focus` 的白板只需要调用
+
+```ts
+manager.cleanCurrentScene()
+```
+
+只想清理主白板的笔迹则需要
+
+```ts
+manager.mainView.cleanCurrentScene()
+```

package/docs/api.md

@@ -9,9 +9,16 @@
   - [实例方法](#instance-methods)
     - [`addApp`](#addApp)
     - [`closeApp`](#closeApp)
+    - [`setMainViewSceneIndex`](#setMainViewSceneIndex)
+    - [`setBoxState`](#setBoxState)
+    - [`cleanCurrentScene`](#cleanCurrentScene)
+    - [`redo`](#redo)
+    - [`undo`](#undo)
   - [实例属性](#prototypes)
   - [事件回调](#events)
 
+<br>
+
 <h2 id="static-methods">静态方法</h2>
 
 <h3 id="mount">WindowManager.mount</h3>
@@ -42,6 +49,7 @@ const manager = await WindowManager.mount(
 | prefersColorScheme     | [optional] string                       | light   | auto, light, dark            |
 | debug                  | [optional] boolean                      | false   | 打印日志信息   
 
+
 <h3 id="register">WindowManager.register</h3>
 
 > 注册 `APP` 到 `WindowManager`
@@ -81,6 +89,8 @@ WindowManager.setContainer(document.getElementById("container"));
 WindowManager.setCollectorContainer(document.getElementById("collector-container"));
 ```
 
+<br>
+
 <h2 id="instance-methods">实例方法</h2>
 
 <h3 id="addApp">addApp</h3>
@@ -105,15 +115,63 @@ const appId = await manager.addApp({
 manager.closeApp(appId)
 ```
 
+<h3 id="setMainViewSceneIndex">setMainViewSceneIndex</h3>
+
+> 设置主白板的 `SceneIndex`
+
+```ts
+manager.setMainViewSceneIndex(1)
+```
+
+<h3 id="setBoxState">setBoxState</h3>
+
+> 设置当前的 `boxState`
+
+```ts
+manager.setBoxState("normal") // boxState: normal | maximized | minimized
+```
+
+<h3 id="cleanCurrentScene">cleanCurrentScene</h3>
+
+> 清除当前 focus 的 view 的笔迹
+
+```ts
+manager.cleanCurrentScene()
+```
+
+<h3 id="redo">redo</h3>
+
+> 在当前 focus 的 view 上重做上一步操作
+
+```ts
+manager.redo()
+```
+
+<h3 id="undo">undo</h3>
+
+> 在当前 focus 的 view 上撤消上一步操作
+
+```ts
+manager.undo()
+```
+
+<br>
+
 <h2 id="prototypes">实例属性</h2>
 
-| name               | type    | default | desc   |
-| ------------------ | ------- | ------- | ------ |
-| mainView           | View    |         | 主白板    |
-| boxState           | string  |         | 当前窗口状态 |
-| darkMode           | boolean |         | 黑夜模式   |
-| prefersColorScheme | string  |         | 颜色主题   |
+| name               | type    | default | desc                   |
+| ------------------ | ------- | ------- | -----------------      |
+| mainView           | View    |         | 主白板                  |
+| mainViewSceneIndex | number  |         | 当前主白板的 SceneIndex  |
+| mainViewScenesLength | number |        | mainView 的 scenes 长度 |
+| boxState           | string  |         | 当前窗口状态             |
+| darkMode           | boolean |         | 黑夜模式                 |
+| prefersColorScheme | string  |         | 颜色主题                 |
+| focused            | string |          | focus 的 app            |
+| canRedoSteps       | number  |         | 当前 focus 的 view 可以重做的步数 |
+| canRedoSteps       | number  |         | 当前 focus 的 view 可以撤销的步数 |
 
+<br>
 
 <h2 id="events">事件回调</h2>
 
@@ -124,7 +182,22 @@ manager.callbacks.on(events, listener)
 | name                     | type           | default | desc                       |
 | ------------------------ | -------------- | ------- | -------------------------- |
 | mainViewModeChange       | ViewVisionMode |         |                            |
+| mainViewSceneIndexChange | index: number  |         |                            |
 | boxStateChange           | string         |         | normal,minimized,maximized |
 | darkModeChange           | boolean        |         |                            |
 | prefersColorSchemeChange | string         |         | auto,light,dark            |
 | cameraStateChange        | CameraState    |         |                            |
+| focusedChange            | string, undefined |     | 当前 focus 的 appId，主白板时为 undefined  |
+| mainViewScenesLengthChange | number      |         | mainView scenes 添加或删除时触发 |
+| canRedoStepsChange       | number         |         | 当前 focus 的 view 可重做步数改变 |
+| canUndoStepsChange       | number         |         | 当前 focus 的 view 可撤销步数改变 |
+| loadApp                  | LoadAppEvent   |         | 加载远程APP 事件                |
+
+
+```ts
+type LoadAppEvent = {
+    kind: string;
+    status: "start" | "success" | "failed";
+    reason?: string;
+}
+```

package/docs/concept.md

@@ -0,0 +1,9 @@
+# 概念
+
+## 同步区域
+
+在不同分辨率的设备上，想要看到相同的区域和窗口，我们就需要在所有设备保持一个相同的比例。
+
+所以 `WindowManager` 有一个 `containerSizeRatio` 的选项来配置白板的宽高比，默认为 `9 / 16`
+
+如果外层给到 `WindowManager` 宽高并不是完美适配这个宽高比的话, `WindowManger` 会自动在内部算出一个适配这个比例的最大宽高，然后填充上去，这时在内部就会有一些区域不能操作

package/docs/replay.md

@@ -0,0 +1,40 @@
+## 回放
+
+> 注意: 多窗口的回放只支持从创建房间开始就是多窗口的房间
+
+> 如果是一开始作为单窗口模式使用，又转变成多窗口模式使用, 则会造成回放渲染空白
+
+<br>
+
+
+```typescript
+import { WhiteWebSdk } from "white-web-sdk";
+import { WindowManager, BuiltinApps } from "@netless/window-manager";
+import "@netless/window-manager/dist/style.css";
+
+const sdk = new WhiteWebSdk({
+    appIdentifier: "appIdentifier",
+    useMobXState: true // 请确保打开这个选项
+});
+
+let manager: WindowManager;
+
+sdk.replayRoom({
+    uuid: "room uuid",
+    roomToken: "room token",
+    invisiblePlugins: [WindowManager],
+    useMultiViews: true, // 多窗口必须用开启 useMultiViews
+}).then(player => {
+   player.callbacks.on("onPhaseChanged", async (phase) => {
+       if (phase === PlayerPhase.Playing) {
+           if (manager) return;
+            manager = await WindowManager.mount({
+                room: player,
+                container: document.getElementById("container")
+            });
+       }
+   })
+});
+
+player.play(); // WindowManager 只有在播放之后才能挂载
+```

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@netless/window-manager",
-  "version": "0.4.0-canary.9",
+  "version": "0.4.2",
   "description": "",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
+  "repository": "netless-io/window-manager",
   "scripts": {
     "prettier": "prettier --write .",
     "build": "vite build && yarn type-gen",
@@ -17,22 +18,21 @@
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "video.js": ">=7",
-    "white-web-sdk": "^2.13.16"
+    "white-web-sdk": "^2.16.0"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
-    "@netless/app-docs-viewer": "0.2.0",
-    "@netless/app-media-player": "0.1.0-beta.5",
-    "@netless/telebox-insider": "0.2.18",
     "emittery": "^0.9.2",
     "lodash": "^4.17.21",
     "p-retry": "^4.6.1",
     "side-effect-manager": "^0.1.5",
     "uuid": "^7.0.3",
-    "video.js": ">=7"
+    "video.js": ">=7",
+    "@netless/telebox-insider": "0.2.22"
   },
   "devDependencies": {
+    "@netless/app-docs-viewer": "^0.2.6",
+    "@netless/app-media-player": "0.1.0-beta.5",
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-url": "^6.1.0",
@@ -55,8 +55,7 @@
     "rollup-plugin-styles": "^3.14.1",
     "svelte": "^3.42.4",
     "typescript": "^4.3.5",
-    "video.js": "^7.14.3",
     "vite": "^2.5.3",
-    "white-web-sdk": "^2.16.0"
+    "white-web-sdk": "2.16.3"
   }
 }

package/src/App/MagixEvent/index.ts

@@ -0,0 +1,68 @@
+import type {
+  MagixEventListenerOptions as WhiteMagixListenerOptions,
+  Event as WhiteEvent,
+  EventPhase as WhiteEventPhase,
+  Scope as WhiteScope,
+} from "white-web-sdk";
+
+export interface MagixEventListenerOptions extends WhiteMagixListenerOptions {
+  /**
+   * Rapid emitted callbacks will be slowed down to this interval (in ms).
+   */
+  fireInterval?: number;
+  /**
+   * If `true`, sent events will reach self-listeners after committed to server.
+   * Otherwise the events will reach self-listeners immediately.
+   */
+  fireSelfEventAfterCommit?: boolean;
+}
+
+export interface MagixEventMessage<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> extends Omit<WhiteEvent, "scope" | "phase"> {
+  /** Event name */
+  event: TEvent;
+  /** Event Payload */
+  payload: TPayloads[TEvent];
+  /** Whiteboard ID of the client who dispatched the event. It will be AdminObserverId for system events. */
+  authorId: number;
+  scope: `${WhiteScope}`;
+  phase: `${WhiteEventPhase}`;
+}
+
+export type MagixEventTypes<TPayloads = any> = Extract<keyof TPayloads, string>;
+
+export type MagixEventPayload<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> = TPayloads[TEvent];
+
+export type MagixEventDispatcher<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  payload: TPayloads[TEvent]
+) => void;
+
+export type MagixEventHandler<
+  TPayloads = any,
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+> = (message: MagixEventMessage<TPayloads, TEvent>) => void;
+
+export type MagixEventListenerDisposer = () => void
+
+export type MagixEventAddListener<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  handler: MagixEventHandler<TPayloads, TEvent>,
+  options?: MagixEventListenerOptions | undefined
+) => MagixEventListenerDisposer;
+
+export type MagixEventRemoveListener<TPayloads = any> = <
+  TEvent extends MagixEventTypes<TPayloads> = MagixEventTypes<TPayloads>
+>(
+  event: TEvent,
+  handler?: MagixEventHandler<TPayloads, TEvent>
+) => void;

package/src/App/Storage/index.ts

@@ -1,20 +1,20 @@
 import type { AkkoObjectUpdatedProperty } from "white-web-sdk";
-import { get, has, isObject } from "lodash";
+import { get, has, mapValues, isObject, size, noop } from "lodash";
 import { SideEffectManager } from "side-effect-manager";
 import type { AppContext } from "../../AppContext";
 import { safeListenPropsUpdated } from "../../Utils/Reactive";
 import { isRef, makeRef, plainObjectKeys } from "./utils";
-import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent } from "./typings";
+import type { Diff, MaybeRefValue, RefValue, StorageStateChangedEvent, StorageStateChangedListener, StorageStateChangedListenerDisposer } from "./typings";
 import { StorageEvent } from "./StorageEvent";
 
 export * from './typings';
 
-const STORAGE_NS = "_WM-STORAGE_";
+export const STORAGE_NS = "_WM-STORAGE_";
 
-export class Storage<TState = any> implements Storage<TState> {
-  readonly id: string;
+export class Storage<TState extends Record<string, any> = any> implements Storage<TState> {
+  readonly id: string | null;
 
-  private readonly _context: AppContext<{ [STORAGE_NS]: TState }>;
+  private readonly _context: AppContext;
   private readonly _sideEffect = new SideEffectManager();
   private _state: TState;
   private _destroyed = false;
@@ -26,54 +26,52 @@ export class Storage<TState = any> implements Storage<TState> {
    */
   private _lastValue = new Map<string | number | symbol, TState[Extract<keyof TState, string>]>();
 
-  constructor(context: AppContext<any>, id: string, defaultState?: TState) {
-    if (id == null) {
-      throw new Error("Cannot create Storage with empty id.");
-    }
-
+  constructor(context: AppContext, id?: string, defaultState?: TState) {
     if (defaultState && !isObject(defaultState)) {
       throw new Error(`Default state for Storage ${id} is not an object.`);
     }
 
     this._context = context;
-    this.id = id;
+    this.id = id || null;
 
-    const attrs = context.getAttributes();
     this._state = {} as TState;
-    const rawState = get<TState>(attrs, [STORAGE_NS, id], this._state);
+    const rawState = this._getRawState(this._state);
 
-    if (this._context.getIsWritable()) {
-      if (!isObject(rawState) || rawState === this._state) {
-        if (!attrs[STORAGE_NS]) {
+    if (this.id !== null && this._context.getIsWritable()) {
+      if (rawState === this._state || !isObject(rawState)) {
+        if (!get(this._context.getAttributes(), [STORAGE_NS])) {
           this._context.updateAttributes([STORAGE_NS], {});
         }
         this._context.updateAttributes([STORAGE_NS, this.id], this._state);
-        if (defaultState) {
-          this.setState(defaultState);
-        }
-      } else {
-        // strip mobx
-        plainObjectKeys(rawState).forEach(key => {
-          try {
-            const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
-            if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
-              this._state[key] = rawValue.v;
-              if (isObject(rawValue.v)) {
-                this._refMap.set(rawValue.v, rawValue);
-              }
-            } else {
-              this._state[key] = rawValue;
-            }
-          } catch (e) {
-            console.error(e);
-          }
-        });
+      }
+      if (defaultState) {
+        this.setState(defaultState);
       }
     }
 
+    // strip mobx
+    plainObjectKeys(rawState).forEach(key => {
+      if (this.id === null && key === STORAGE_NS) {
+        return;
+      }
+      try {
+        const rawValue = isObject(rawState[key]) ? JSON.parse(JSON.stringify(rawState[key])) : rawState[key];
+        if (isRef<TState[Extract<keyof TState, string>]>(rawValue)) {
+          this._state[key] = rawValue.v;
+          if (isObject(rawValue.v)) {
+            this._refMap.set(rawValue.v, rawValue);
+          }
+        } else {
+          this._state[key] = rawValue;
+        }
+      } catch (e) {
+        console.error(e);
+      }
+    });
+
     this._sideEffect.addDisposer(
       safeListenPropsUpdated(
-        () => get(context.getAttributes(), [STORAGE_NS, this.id]),
+        () => this.id === null ? context.getAttributes() : get(context.getAttributes(), [STORAGE_NS, this.id]),
         this._updateProperties.bind(this),
         this.destroy.bind(this)
       )
@@ -88,6 +86,11 @@ export class Storage<TState = any> implements Storage<TState> {
   }
 
   readonly onStateChanged = new StorageEvent<StorageStateChangedEvent<TState>>();
+  
+  addStateChangedListener(handler: StorageStateChangedListener<TState>): StorageStateChangedListenerDisposer {
+    this.onStateChanged.addListener(handler);
+    return () => this.onStateChanged.removeListener(handler);
+  }
 
   ensureState(state: Partial<TState>): void {
     return this.setState(
@@ -122,7 +125,7 @@ export class Storage<TState = any> implements Storage<TState> {
         if (value === void 0) {
           this._lastValue.set(key, this._state[key]);
           delete this._state[key];
-          this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+          this._setRawState(key, value);
         } else {
           this._lastValue.set(key, this._state[key]);
           this._state[key] = value as TState[Extract<keyof TState, string>];
@@ -137,13 +140,20 @@ export class Storage<TState = any> implements Storage<TState> {
             payload = refValue;
           }
 
-          this._context.updateAttributes([STORAGE_NS, this.id, key], payload);
+          this._setRawState(key, payload)
         }
       });
     }
   }
 
-  emptyStore(): void {
+  /**
+   * Empty storage data.
+   */
+  emptyStorage(): void {
+    if (size(this._state) <= 0) {
+      return;
+    }
+
     if (this._destroyed) {
       console.error(new Error(`Cannot empty destroyed Storage "${this.id}".`));
       return;
@@ -154,10 +164,17 @@ export class Storage<TState = any> implements Storage<TState> {
       return;
     }
 
-    this._context.updateAttributes([STORAGE_NS, this.id], {});
+    this.setState(mapValues(this._state, noop as () => undefined));
   }
 
-  deleteStore(): void {
+  /**
+   * Delete storage index with all of its data and destroy the Storage instance.
+   */
+  deleteStorage(): void {
+    if (this.id === null) {
+      throw new Error(`Cannot delete main Storage`);
+    }
+
     if (!this._context.getIsWritable()) {
       console.error(new Error(`Cannot delete Storage "${this.id}" without writable access.`));
       return;
@@ -172,11 +189,35 @@ export class Storage<TState = any> implements Storage<TState> {
     return this._destroyed;
   }
 
+  /**
+   * Destroy the Storage instance. The data will be kept.
+   */
   destroy() {
     this._destroyed = true;
     this._sideEffect.flushAll();
   }
 
+  private _getRawState(): TState | undefined
+  private _getRawState(defaultValue: TState): TState
+  private _getRawState(defaultValue?: TState): TState | undefined {
+    if (this.id === null) {
+      return this._context.getAttributes() ?? defaultValue;
+    } else {
+      return get(this._context.getAttributes(), [STORAGE_NS, this.id], defaultValue);
+    }
+  }
+
+  private _setRawState(key: string, value: any): void {
+    if (this.id === null) {
+      if (key === STORAGE_NS) {
+        throw new Error(`Cannot set attribute internal filed "${STORAGE_NS}"`)
+      }
+      return this._context.updateAttributes([key], value);
+    } else {
+      return this._context.updateAttributes([STORAGE_NS, this.id, key], value);
+    }
+  }
+
   private _updateProperties(actions: ReadonlyArray<AkkoObjectUpdatedProperty<TState, string>>): void {
     if (this._destroyed) {
       console.error(new Error(`Cannot call _updateProperties on destroyed Storage "${this.id}".`));
@@ -190,6 +231,11 @@ export class Storage<TState = any> implements Storage<TState> {
         try {
           const action = actions[i]
           const key = action.key as Extract<keyof TState, string>;
+
+          if (this.id === null && key === STORAGE_NS) {
+            continue
+          }
+
           const value = isObject(action.value) ? JSON.parse(JSON.stringify(action.value)) : action.value;
           let oldValue: TState[Extract<keyof TState, string>] | undefined;
           if (this._lastValue.has(key)) {

package/src/App/Storage/typings.ts

@@ -16,6 +16,8 @@ export type StorageOnSetStatePayload<TState = unknown> = {
   [K in keyof TState]?: MaybeRefValue<TState[K]>;
 };
 
-export type StorageStateChangedEvent<TState = any> = Diff<TState>
+export type StorageStateChangedEvent<TState = any> = Diff<TState>;
 
-export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>
+export type StorageStateChangedListener<TState = any> = StorageEventListener<StorageStateChangedEvent<TState>>;
+
+export type StorageStateChangedListenerDisposer = () => void;