@netless/fastboard-ui 0.3.22 → 0.3.23-beta.1

package/dist/index.js

@@ -41,7 +41,7 @@ function injectStyle(text2) {
 }
 
 // inline-sass-content:./src/style.scss
-var style_default = '.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}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-visible{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:rgba(0,0,0,0);border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:#0000}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid rgba(0,0,0,0);position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid rgba(0,0,0,0)}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:#0000;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-right .fastboard-toolbar-triangle{right:auto;left:0;border-left:0;border-right:4px solid rgba(0,0,0,0)}.fastboard-right .fastboard-toolbar.collapsed{transform:translate(100%)}.fastboard-right .fastboard-toolbar-handler{left:auto;right:100%;transform:rotate(180deg)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left,.fastboard-right{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar,.fastboard-right .fastboard-toolbar{padding-left:16px}.fastboard-right{left:auto;right:0}.fastboard-right .fastboard-toolbar{padding-left:0;padding-right:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.hidden.fastboard-right *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}.netless-whiteboard:focus-visible{outline:none}';
+var style_default = '.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}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-visible{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:rgba(0,0,0,0);border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:#0000}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid rgba(0,0,0,0);position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel-switch-pencil{display:flex}.fastboard-toolbar-panel-switch-btn{width:24px;height:24px}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid rgba(0,0,0,0)}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:#0000;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-right .fastboard-toolbar-triangle{right:auto;left:0;border-left:0;border-right:4px solid rgba(0,0,0,0)}.fastboard-right .fastboard-toolbar.collapsed{transform:translate(100%)}.fastboard-right .fastboard-toolbar-handler{left:auto;right:100%;transform:rotate(180deg)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left,.fastboard-right{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar,.fastboard-right .fastboard-toolbar{padding-left:16px}.fastboard-right{left:auto;right:0}.fastboard-right .fastboard-toolbar{padding-left:0;padding-right:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.hidden.fastboard-right *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}.netless-whiteboard:focus-visible{outline:none}';
 
 // inline-sass-stub:./src/style.scss
 injectStyle(style_default);
@@ -510,7 +510,7 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance72, create_fragment72, not_equal2, props, append_styles, dirty = [-1]) {
+function init(component, options, instance74, create_fragment74, not_equal2, props, append_styles, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -536,7 +536,7 @@ function init(component, options, instance72, create_fragment72, not_equal2, pro
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance72 ? instance72(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance74 ? instance74(component, options.props || {}, (i, ret, ...rest) => {
     const value = rest.length ? rest[0] : ret;
     if ($$.ctx && not_equal2($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i])
@@ -549,7 +549,7 @@ function init(component, options, instance72, create_fragment72, not_equal2, pro
   $$.update();
   ready = true;
   run_all($$.before_update);
-  $$.fragment = create_fragment72 ? create_fragment72($$.ctx) : false;
+  $$.fragment = create_fragment74 ? create_fragment74($$.ctx) : false;
   if (options.target) {
     if (options.hydrate) {
       const nodes = children(options.target);
@@ -4352,6 +4352,170 @@ var Loading = class extends SvelteComponent {
 };
 var Loading_default = Loading;
 
+// src/components/Icons/LaserPen.svelte
+function create_fragment49(ctx) {
+  let svg;
+  let g;
+  let path0;
+  let path1;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      g = svg_element("g");
+      path0 = svg_element("path");
+      path1 = svg_element("path");
+      attr(path0, "class", "fastboard-icon-stroke-color");
+      attr(path0, "clip-rule", "evenodd");
+      attr(path0, "d", "m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z");
+      attr(path1, "class", "fastboard-icon-stroke-color");
+      attr(path1, "d", "m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13");
+      attr(g, "stroke-width", "1.25");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "rotate(0 10 10)");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
+      ctx[0]);
+      toggle_class(
+        svg,
+        "is-active",
+        /*active*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, g);
+      append(g, path0);
+      append(g, path1);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*theme*/
+      1 && svg_class_value !== (svg_class_value = "fastboard-icon " + /*theme*/
+      ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & /*theme, active*/
+      3) {
+        toggle_class(
+          svg,
+          "is-active",
+          /*active*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance49($$self, $$props, $$invalidate) {
+  let { theme = "light" } = $$props;
+  let { active = false } = $$props;
+  $$self.$$set = ($$props2) => {
+    if ("theme" in $$props2)
+      $$invalidate(0, theme = $$props2.theme);
+    if ("active" in $$props2)
+      $$invalidate(1, active = $$props2.active);
+  };
+  return [theme, active];
+}
+var LaserPen = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance49, create_fragment49, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var LaserPen_default = LaserPen;
+
+// src/components/Icons/LaserPenFilled.svelte
+function create_fragment50(ctx) {
+  let svg;
+  let g;
+  let path0;
+  let path1;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      g = svg_element("g");
+      path0 = svg_element("path");
+      path1 = svg_element("path");
+      attr(path0, "class", "fastboard-icon-fill-color");
+      attr(path0, "clip-rule", "evenodd");
+      attr(path0, "d", "m9.644 13.69 7.774-7.773a2.357 2.357 0 0 0-3.334-3.334l-7.773 7.774L8 12l1.643 1.69Z");
+      attr(path1, "class", "fastboard-icon-stroke-color");
+      attr(path1, "d", "m13.25 3.417 3.333 3.333M10 10l2-2M5 15l3-3M2.156 17.894l1-1M5.453 19.029l-.144-1.407M2.377 11.887l.866 1.118M8.354 17.273l-1.194-.758M.953 14.652l1.408.13");
+      attr(g, "stroke-width", "1.25");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "rotate(0 10 10)");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
+      ctx[0]);
+      toggle_class(
+        svg,
+        "is-active",
+        /*active*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, g);
+      append(g, path0);
+      append(g, path1);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*theme*/
+      1 && svg_class_value !== (svg_class_value = "fastboard-icon " + /*theme*/
+      ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & /*theme, active*/
+      3) {
+        toggle_class(
+          svg,
+          "is-active",
+          /*active*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance50($$self, $$props, $$invalidate) {
+  let { theme = "light" } = $$props;
+  let { active = false } = $$props;
+  $$self.$$set = ($$props2) => {
+    if ("theme" in $$props2)
+      $$invalidate(0, theme = $$props2.theme);
+    if ("active" in $$props2)
+      $$invalidate(1, active = $$props2.active);
+  };
+  return [theme, active];
+}
+var LaserPenFilled = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance50, create_fragment50, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var LaserPenFilled_default = LaserPenFilled;
+
 // src/components/Icons/index.ts
 var Icons = {
   Apps: Apps_default,
@@ -4400,7 +4564,9 @@ var Icons = {
   WhiteboardAdd: WhiteboardAdd_default,
   Play: Play_default,
   Pause: Pause_default,
-  Loading: Loading_default
+  Loading: Loading_default,
+  LaserPen: LaserPen_default,
+  LaserPenFilled: LaserPenFilled_default
 };
 var Icons_default = Icons;
 if (typeof window !== "undefined") {
@@ -4413,12 +4579,12 @@ if (typeof window !== "undefined") {
       {
         name: "className",
         defaultValue: "",
-        fn(instance72) {
+        fn(instance74) {
           function add() {
-            const el = instance72.popper.firstElementChild;
+            const el = instance74.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance72.props.className || "").trim();
+              const extra = (instance74.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
@@ -4426,7 +4592,7 @@ if (typeof window !== "undefined") {
           }
           function remove() {
             var _a;
-            (_a = instance72.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            (_a = instance74.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -4439,21 +4605,21 @@ if (typeof window !== "undefined") {
   });
 }
 var tippy = function(node, props) {
-  const instance72 = Tippy__default.default(node, props);
+  const instance74 = Tippy__default.default(node, props);
   return {
     update(props2) {
-      instance72.setProps(props2);
+      instance74.setProps(props2);
     },
     destroy() {
-      instance72.destroy();
+      instance74.destroy();
     }
   };
 };
 function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance72 = el._tippy;
-    if (instance72)
-      instance72.hide();
+    const instance74 = el._tippy;
+    if (instance74)
+      instance74.hide();
   });
 }
 var tippy_menu = {
@@ -4967,7 +5133,7 @@ function create_if_block_1(ctx) {
     }
   };
 }
-function create_fragment49(ctx) {
+function create_fragment51(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -5033,7 +5199,7 @@ function create_fragment49(ctx) {
     }
   };
 }
-function instance49($$self, $$props, $$invalidate) {
+function instance51($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
@@ -5091,7 +5257,7 @@ function instance49($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance49, create_fragment49, safe_not_equal, {
+    init(this, options, instance51, create_fragment51, safe_not_equal, {
       class: 0,
       name: 1,
       theme: 2,
@@ -5296,7 +5462,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment50(ctx) {
+function create_fragment52(ctx) {
   let div;
   let button0;
   let t_1;
@@ -5437,7 +5603,7 @@ var i18n = {
   "zh-CN": { redo: "\u91CD\u505A", undo: "\u64A4\u9500" }
 };
 var name = "fastboard-redo-undo";
-function instance50($$self, $$props, $$invalidate) {
+function instance52($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -5538,7 +5704,7 @@ function instance50($$self, $$props, $$invalidate) {
 var RedoUndo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance50, create_fragment50, safe_not_equal, {
+    init(this, options, instance52, create_fragment52, safe_not_equal, {
       app: 12,
       theme: 0,
       language: 13,
@@ -5895,7 +6061,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment51(ctx) {
+function create_fragment53(ctx) {
   let div;
   let button0;
   let t0;
@@ -6130,7 +6296,7 @@ var i18n2 = {
   "zh-CN": { prev: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875", add: "\u6DFB\u52A0\u9875\u9762" }
 };
 var name2 = "fastboard-page-control";
-function instance51($$self, $$props, $$invalidate) {
+function instance53($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -6236,7 +6402,7 @@ function instance51($$self, $$props, $$invalidate) {
 var PageControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance51, create_fragment51, safe_not_equal, {
+    init(this, options, instance53, create_fragment53, safe_not_equal, {
       app: 16,
       theme: 0,
       language: 17,
@@ -6585,7 +6751,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment52(ctx) {
+function create_fragment54(ctx) {
   let div;
   let button0;
   let t0;
@@ -6848,7 +7014,7 @@ function next_scale(scale, delta) {
   return 1;
 }
 var name3 = "fastboard-zoom-control";
-function instance52($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -6959,7 +7125,7 @@ function instance52($$self, $$props, $$invalidate) {
 var ZoomControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance52, create_fragment52, safe_not_equal, {
+    init(this, options, instance54, create_fragment54, safe_not_equal, {
       app: 15,
       theme: 0,
       language: 16,
@@ -7261,7 +7427,7 @@ function hexToRgb(hex) {
 }
 
 // src/components/Toolbar/components/Slider.svelte
-function create_fragment53(ctx) {
+function create_fragment55(ctx) {
   let div;
   let input;
   let input_class_value;
@@ -7476,7 +7642,7 @@ function create_fragment53(ctx) {
   };
 }
 var name4 = "fastboard-slider";
-function instance53($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let percent;
   const dispatch = createEventDispatcher();
   let { class: className = "" } = $$props;
@@ -7547,7 +7713,7 @@ function instance53($$self, $$props, $$invalidate) {
 var Slider = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, {
+    init(this, options, instance55, create_fragment55, safe_not_equal, {
       class: 1,
       theme: 2,
       min: 3,
@@ -7561,7 +7727,7 @@ var Slider = class extends SvelteComponent {
 var Slider_default = Slider;
 
 // src/components/Toolbar/components/StrokeWidth.svelte
-function create_fragment54(ctx) {
+function create_fragment56(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -7617,7 +7783,7 @@ function create_fragment54(ctx) {
     }
   };
 }
-function instance54($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -7666,7 +7832,7 @@ function instance54($$self, $$props, $$invalidate) {
 var StrokeWidth = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance56, create_fragment56, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var StrokeWidth_default = StrokeWidth;
@@ -7770,7 +7936,7 @@ function create_each_block(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment57(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -7850,7 +8016,7 @@ function create_fragment55(ctx) {
 function is_equal_color(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance55($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let memberState;
   let strokeColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
@@ -7902,7 +8068,7 @@ function instance55($$self, $$props, $$invalidate) {
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance57, create_fragment57, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var StrokeColor_default = StrokeColor;
@@ -8006,7 +8172,7 @@ function create_each_block2(ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment58(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -8086,7 +8252,7 @@ function create_fragment56(ctx) {
 function is_equal_color2(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance56($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let memberState;
   let textColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
@@ -8138,7 +8304,7 @@ function instance56($$self, $$props, $$invalidate) {
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance58, create_fragment58, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var TextColor_default = TextColor;
@@ -8469,7 +8635,7 @@ function create_each_block3(key_1, ctx) {
     }
   };
 }
-function create_fragment57(ctx) {
+function create_fragment59(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -8575,7 +8741,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance57($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -8660,7 +8826,7 @@ function instance57($$self, $$props, $$invalidate) {
 var SelectShapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, {
+    init(this, options, instance59, create_fragment59, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -8815,7 +8981,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment60(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -8884,7 +9050,7 @@ function create_fragment58(ctx) {
     }
   };
 }
-function instance58($$self, $$props, $$invalidate) {
+function instance60($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -8907,7 +9073,7 @@ function instance58($$self, $$props, $$invalidate) {
 var Clicker = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, {
+    init(this, options, instance60, create_fragment60, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -9062,7 +9228,7 @@ function create_default_slot5(ctx) {
     }
   };
 }
-function create_fragment59(ctx) {
+function create_fragment61(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9131,7 +9297,7 @@ function create_fragment59(ctx) {
     }
   };
 }
-function instance59($$self, $$props, $$invalidate) {
+function instance61($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -9154,7 +9320,7 @@ function instance59($$self, $$props, $$invalidate) {
 var Selector2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance59, create_fragment59, safe_not_equal, {
+    init(this, options, instance61, create_fragment61, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -9203,7 +9369,7 @@ function create_else_block8(ctx) {
     }
   };
 }
-function create_if_block8(ctx) {
+function create_if_block_12(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -9243,20 +9409,66 @@ function create_if_block8(ctx) {
     }
   };
 }
+function create_if_block8(ctx) {
+  let icons_laserpenfilled;
+  let current;
+  icons_laserpenfilled = new Icons_default.LaserPenFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[4]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_laserpenfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_laserpenfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_laserpenfilled_changes = {};
+      if (dirty & /*theme*/
+      16)
+        icons_laserpenfilled_changes.theme = /*theme*/
+        ctx2[4];
+      icons_laserpenfilled.$set(icons_laserpenfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_laserpenfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_laserpenfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_laserpenfilled, detaching);
+    }
+  };
+}
 function create_default_slot6(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block8, create_else_block8];
+  const if_block_creators = [create_if_block8, create_if_block_12, create_else_block8];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
       /*appliance*/
-      ctx2[3] === "pencil"
+      ctx2[3] === "pencil" && /*hasUseLaserPen*/
+      ctx2[5]
     )
       return 0;
-    return 1;
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil"
+    )
+      return 1;
+    return 2;
   }
   current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
@@ -9309,7 +9521,7 @@ function create_default_slot6(ctx) {
     }
   };
 }
-function create_fragment60(ctx) {
+function create_fragment62(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9336,7 +9548,7 @@ function create_fragment60(ctx) {
   button.$on(
     "click",
     /*click_handler*/
-    ctx[5]
+    ctx[6]
   );
   return {
     c() {
@@ -9366,8 +9578,8 @@ function create_fragment60(ctx) {
           ctx2[2]
         ) }
       ]) : {};
-      if (dirty & /*$$scope, theme, appliance*/
-      88) {
+      if (dirty & /*$$scope, theme, appliance, hasUseLaserPen*/
+      184) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -9387,12 +9599,13 @@ function create_fragment60(ctx) {
     }
   };
 }
-function instance60($$self, $$props, $$invalidate) {
+function instance62($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
   let { appliance } = $$props;
   let { theme = "light" } = $$props;
+  let { hasUseLaserPen = false } = $$props;
   function click_handler(event) {
     bubble.call(this, $$self, event);
   }
@@ -9407,18 +9620,21 @@ function instance60($$self, $$props, $$invalidate) {
       $$invalidate(3, appliance = $$props2.appliance);
     if ("theme" in $$props2)
       $$invalidate(4, theme = $$props2.theme);
+    if ("hasUseLaserPen" in $$props2)
+      $$invalidate(5, hasUseLaserPen = $$props2.hasUseLaserPen);
   };
-  return [btn_props, content, menu, appliance, theme, click_handler];
+  return [btn_props, content, menu, appliance, theme, hasUseLaserPen, click_handler];
 }
 var Pencil2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance60, create_fragment60, safe_not_equal, {
+    init(this, options, instance62, create_fragment62, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
       appliance: 3,
-      theme: 4
+      theme: 4,
+      hasUseLaserPen: 5
     });
   }
 };
@@ -9569,7 +9785,7 @@ function create_default_slot7(ctx) {
     }
   };
 }
-function create_fragment61(ctx) {
+function create_fragment63(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9647,7 +9863,7 @@ function create_fragment61(ctx) {
     }
   };
 }
-function instance61($$self, $$props, $$invalidate) {
+function instance63($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
@@ -9673,7 +9889,7 @@ function instance61($$self, $$props, $$invalidate) {
 var Text2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance61, create_fragment61, safe_not_equal, {
+    init(this, options, instance63, create_fragment63, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
@@ -9917,7 +10133,7 @@ function create_default_slot8(ctx) {
     }
   };
 }
-function create_fragment62(ctx) {
+function create_fragment64(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9995,7 +10211,7 @@ function create_fragment62(ctx) {
     }
   };
 }
-function instance62($$self, $$props, $$invalidate) {
+function instance64($$self, $$props, $$invalidate) {
   let memberState;
   let shape;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(10, $memberState = $$value)), memberState);
@@ -10067,7 +10283,7 @@ function instance62($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance62, create_fragment62, safe_not_equal, {
+    init(this, options, instance64, create_fragment64, safe_not_equal, {
       app: 9,
       btn_props: 1,
       content: 2,
@@ -10224,7 +10440,7 @@ function create_default_slot9(ctx) {
     }
   };
 }
-function create_fragment63(ctx) {
+function create_fragment65(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10293,7 +10509,7 @@ function create_fragment63(ctx) {
     }
   };
 }
-function instance63($$self, $$props, $$invalidate) {
+function instance65($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -10316,7 +10532,7 @@ function instance63($$self, $$props, $$invalidate) {
 var Eraser2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance63, create_fragment63, safe_not_equal, {
+    init(this, options, instance65, create_fragment65, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -10365,7 +10581,7 @@ function create_default_slot10(ctx) {
     }
   };
 }
-function create_fragment64(ctx) {
+function create_fragment66(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10434,7 +10650,7 @@ function create_fragment64(ctx) {
     }
   };
 }
-function instance64($$self, $$props, $$invalidate) {
+function instance66($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { theme = "light" } = $$props;
@@ -10454,7 +10670,7 @@ function instance64($$self, $$props, $$invalidate) {
 var Clear2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance64, create_fragment64, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
+    init(this, options, instance66, create_fragment66, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
   }
 };
 var Clear_default2 = Clear2;
@@ -10604,7 +10820,7 @@ function create_default_slot11(ctx) {
     }
   };
 }
-function create_fragment65(ctx) {
+function create_fragment67(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10673,7 +10889,7 @@ function create_fragment65(ctx) {
     }
   };
 }
-function instance65($$self, $$props, $$invalidate) {
+function instance67($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -10696,7 +10912,7 @@ function instance65($$self, $$props, $$invalidate) {
 var Hand = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance65, create_fragment65, safe_not_equal, {
+    init(this, options, instance67, create_fragment67, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -10851,7 +11067,7 @@ function create_default_slot12(ctx) {
     }
   };
 }
-function create_fragment66(ctx) {
+function create_fragment68(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10920,7 +11136,7 @@ function create_fragment66(ctx) {
     }
   };
 }
-function instance66($$self, $$props, $$invalidate) {
+function instance68($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -10943,7 +11159,7 @@ function instance66($$self, $$props, $$invalidate) {
 var Laser2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance66, create_fragment66, safe_not_equal, {
+    init(this, options, instance68, create_fragment68, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -10956,42 +11172,42 @@ var Laser_default2 = Laser2;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[44] = list[i];
+  child_ctx[47] = list[i];
   const constants_0 = (
     /*netless_app*/
-    child_ctx[44]
+    child_ctx[47]
   );
-  child_ctx[45] = constants_0.icon;
-  child_ctx[46] = constants_0.label;
-  child_ctx[47] = constants_0.kind;
-  child_ctx[48] = constants_0.onClick;
+  child_ctx[48] = constants_0.icon;
+  child_ctx[49] = constants_0.label;
+  child_ctx[50] = constants_0.kind;
+  child_ctx[51] = constants_0.onClick;
   const constants_1 = (
     /*$status*/
-    child_ctx[21] && /*$status*/
-    child_ctx[21][
+    child_ctx[22] && /*$status*/
+    child_ctx[22][
       /*kind*/
-      child_ctx[47]
+      child_ctx[50]
     ]
   );
-  child_ctx[49] = constants_1;
+  child_ctx[52] = constants_1;
   const constants_2 = function func() {
     return (
       /*func*/
-      ctx[40](
+      ctx[43](
         /*onClick*/
-        child_ctx[48]
+        child_ctx[51]
       )
     );
   };
-  child_ctx[50] = constants_2;
+  child_ctx[53] = constants_2;
   return child_ctx;
 }
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[53] = list[i];
+  child_ctx[56] = list[i];
   return child_ctx;
 }
-function create_if_block_11(ctx) {
+function create_if_block_13(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11000,7 +11216,7 @@ function create_if_block_11(ctx) {
     ctx[15]
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_24] },
+    $$slots: { default: [create_default_slot_6] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -11010,7 +11226,7 @@ function create_if_block_11(ctx) {
   button.$on(
     "click",
     /*scroll_up*/
-    ctx[23]
+    ctx[24]
   );
   return {
     c() {
@@ -11028,7 +11244,7 @@ function create_if_block_11(ctx) {
       )]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      33554432) {
+      268435456) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11048,7 +11264,7 @@ function create_if_block_11(ctx) {
     }
   };
 }
-function create_default_slot_24(ctx) {
+function create_default_slot_6(ctx) {
   let icons_up;
   let current;
   icons_up = new Icons_default.Up({ props: { theme: (
@@ -11086,14 +11302,14 @@ function create_default_slot_24(ctx) {
     }
   };
 }
-function create_if_block_10(ctx) {
+function create_if_block_122(ctx) {
   let laser;
   let current;
   laser = new Laser_default2({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11105,14 +11321,14 @@ function create_if_block_10(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].laserPointer
+        ctx[20].laserPointer
       )
     }
   });
   laser.$on(
     "click",
     /*laserPointer*/
-    ctx[31]
+    ctx[32]
   );
   return {
     c() {
@@ -11125,9 +11341,9 @@ function create_if_block_10(ctx) {
     p(ctx2, dirty) {
       const laser_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         laser_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         laser_changes.theme = /*theme*/
@@ -11137,9 +11353,9 @@ function create_if_block_10(ctx) {
         laser_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         laser_changes.content = /*c*/
-        ctx2[19].laserPointer;
+        ctx2[20].laserPointer;
       laser.$set(laser_changes);
     },
     i(local) {
@@ -11157,14 +11373,14 @@ function create_if_block_10(ctx) {
     }
   };
 }
-function create_if_block_9(ctx) {
+function create_if_block_11(ctx) {
   let hand_1;
   let current;
   hand_1 = new Hand_default({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11176,14 +11392,14 @@ function create_if_block_9(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].hand
+        ctx[20].hand
       )
     }
   });
   hand_1.$on(
     "click",
     /*hand*/
-    ctx[30]
+    ctx[31]
   );
   return {
     c() {
@@ -11196,9 +11412,9 @@ function create_if_block_9(ctx) {
     p(ctx2, dirty) {
       const hand_1_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         hand_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         hand_1_changes.theme = /*theme*/
@@ -11208,9 +11424,9 @@ function create_if_block_9(ctx) {
         hand_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         hand_1_changes.content = /*c*/
-        ctx2[19].hand;
+        ctx2[20].hand;
       hand_1.$set(hand_1_changes);
     },
     i(local) {
@@ -11228,7 +11444,7 @@ function create_if_block_9(ctx) {
     }
   };
 }
-function create_if_block_8(ctx) {
+function create_if_block_10(ctx) {
   let clear_1;
   let current;
   clear_1 = new Clear_default2({
@@ -11250,7 +11466,7 @@ function create_if_block_8(ctx) {
   clear_1.$on(
     "click",
     /*clear*/
-    ctx[32]
+    ctx[33]
   );
   return {
     c() {
@@ -11291,14 +11507,14 @@ function create_if_block_8(ctx) {
     }
   };
 }
-function create_if_block_7(ctx) {
+function create_if_block_9(ctx) {
   let eraser_1;
   let current;
   eraser_1 = new Eraser_default2({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11310,14 +11526,14 @@ function create_if_block_7(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].eraser
+        ctx[20].eraser
       )
     }
   });
   eraser_1.$on(
     "click",
     /*eraser*/
-    ctx[29]
+    ctx[30]
   );
   return {
     c() {
@@ -11330,9 +11546,9 @@ function create_if_block_7(ctx) {
     p(ctx2, dirty) {
       const eraser_1_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         eraser_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         eraser_1_changes.theme = /*theme*/
@@ -11342,9 +11558,9 @@ function create_if_block_7(ctx) {
         eraser_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         eraser_1_changes.content = /*c*/
-        ctx2[19].eraser;
+        ctx2[20].eraser;
       eraser_1.$set(eraser_1_changes);
     },
     i(local) {
@@ -11362,7 +11578,7 @@ function create_if_block_7(ctx) {
     }
   };
 }
-function create_if_block_6(ctx) {
+function create_if_block_8(ctx) {
   let shapes2;
   let current;
   shapes2 = new Shapes_default({
@@ -11373,7 +11589,7 @@ function create_if_block_6(ctx) {
       ),
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11408,9 +11624,9 @@ function create_if_block_6(ctx) {
         shapes_changes.app = /*app*/
         ctx2[0];
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         shapes_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         shapes_changes.theme = /*theme*/
@@ -11444,14 +11660,14 @@ function create_if_block_6(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_7(ctx) {
   let text_1;
   let current;
   text_1 = new Text_default2({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11463,7 +11679,7 @@ function create_if_block_5(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].text
+        ctx[20].text
       ),
       menu: (
         /*text_panel*/
@@ -11474,7 +11690,7 @@ function create_if_block_5(ctx) {
   text_1.$on(
     "click",
     /*text*/
-    ctx[28]
+    ctx[29]
   );
   return {
     c() {
@@ -11487,9 +11703,9 @@ function create_if_block_5(ctx) {
     p(ctx2, dirty) {
       const text_1_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         text_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         text_1_changes.theme = /*theme*/
@@ -11499,9 +11715,9 @@ function create_if_block_5(ctx) {
         text_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         text_1_changes.content = /*c*/
-        ctx2[19].text;
+        ctx2[20].text;
       if (dirty[0] & /*text_panel*/
       4096)
         text_1_changes.menu = /*text_panel*/
@@ -11523,14 +11739,18 @@ function create_if_block_5(ctx) {
     }
   };
 }
-function create_if_block_4(ctx) {
+function create_if_block_6(ctx) {
   let pencil_1;
   let current;
   pencil_1 = new Pencil_default2({
     props: {
+      hasUseLaserPen: (
+        /*hasUseLaserPen*/
+        ctx[16]
+      ),
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11542,7 +11762,7 @@ function create_if_block_4(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].pencil
+        ctx[20].pencil
       ),
       menu: (
         /*pencil_panel*/
@@ -11553,7 +11773,7 @@ function create_if_block_4(ctx) {
   pencil_1.$on(
     "click",
     /*pencil*/
-    ctx[27]
+    ctx[28]
   );
   return {
     c() {
@@ -11565,10 +11785,14 @@ function create_if_block_4(ctx) {
     },
     p(ctx2, dirty) {
       const pencil_1_changes = {};
+      if (dirty[0] & /*hasUseLaserPen*/
+      65536)
+        pencil_1_changes.hasUseLaserPen = /*hasUseLaserPen*/
+        ctx2[16];
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         pencil_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         pencil_1_changes.theme = /*theme*/
@@ -11578,9 +11802,9 @@ function create_if_block_4(ctx) {
         pencil_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         pencil_1_changes.content = /*c*/
-        ctx2[19].pencil;
+        ctx2[20].pencil;
       if (dirty[0] & /*pencil_panel*/
       2048)
         pencil_1_changes.menu = /*pencil_panel*/
@@ -11602,14 +11826,14 @@ function create_if_block_4(ctx) {
     }
   };
 }
-function create_if_block_3(ctx) {
+function create_if_block_5(ctx) {
   let selector_1;
   let current;
   selector_1 = new Selector_default2({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11621,14 +11845,14 @@ function create_if_block_3(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].selector
+        ctx[20].selector
       )
     }
   });
   selector_1.$on(
     "click",
     /*selector*/
-    ctx[26]
+    ctx[27]
   );
   return {
     c() {
@@ -11641,9 +11865,9 @@ function create_if_block_3(ctx) {
     p(ctx2, dirty) {
       const selector_1_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         selector_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         selector_1_changes.theme = /*theme*/
@@ -11653,9 +11877,9 @@ function create_if_block_3(ctx) {
         selector_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         selector_1_changes.content = /*c*/
-        ctx2[19].selector;
+        ctx2[20].selector;
       selector_1.$set(selector_1_changes);
     },
     i(local) {
@@ -11673,14 +11897,14 @@ function create_if_block_3(ctx) {
     }
   };
 }
-function create_if_block_2(ctx) {
+function create_if_block_4(ctx) {
   let clicker_1;
   let current;
   clicker_1 = new Clicker_default({
     props: {
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11692,14 +11916,14 @@ function create_if_block_2(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].clicker
+        ctx[20].clicker
       )
     }
   });
   clicker_1.$on(
     "click",
     /*clicker*/
-    ctx[25]
+    ctx[26]
   );
   return {
     c() {
@@ -11712,9 +11936,9 @@ function create_if_block_2(ctx) {
     p(ctx2, dirty) {
       const clicker_1_changes = {};
       if (dirty[0] & /*appliance*/
-      131072)
+      262144)
         clicker_1_changes.appliance = /*appliance*/
-        ctx2[17];
+        ctx2[18];
       if (dirty[0] & /*theme*/
       2)
         clicker_1_changes.theme = /*theme*/
@@ -11724,9 +11948,9 @@ function create_if_block_2(ctx) {
         clicker_1_changes.btn_props = /*btn_props*/
         ctx2[15];
       if (dirty[0] & /*c*/
-      524288)
+      1048576)
         clicker_1_changes.content = /*c*/
-        ctx2[19].clicker;
+        ctx2[20].clicker;
       clicker_1.$set(clicker_1_changes);
     },
     i(local) {
@@ -11750,61 +11974,61 @@ function create_each_block_1(ctx) {
   let if_block_anchor;
   let current;
   const if_block_creators = [
-    create_if_block_2,
-    create_if_block_3,
     create_if_block_4,
     create_if_block_5,
     create_if_block_6,
     create_if_block_7,
     create_if_block_8,
     create_if_block_9,
-    create_if_block_10
+    create_if_block_10,
+    create_if_block_11,
+    create_if_block_122
   ];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
       /*item*/
-      ctx2[53] === "clicker"
+      ctx2[56] === "clicker"
     )
       return 0;
     if (
       /*item*/
-      ctx2[53] === "selector"
+      ctx2[56] === "selector"
     )
       return 1;
     if (
       /*item*/
-      ctx2[53] === "pencil"
+      ctx2[56] === "pencil"
     )
       return 2;
     if (
       /*item*/
-      ctx2[53] === "text"
+      ctx2[56] === "text"
     )
       return 3;
     if (
       /*item*/
-      ctx2[53] === "shapes"
+      ctx2[56] === "shapes"
     )
       return 4;
     if (
       /*item*/
-      ctx2[53] === "eraser"
+      ctx2[56] === "eraser"
     )
       return 5;
     if (
       /*item*/
-      ctx2[53] === "clear"
+      ctx2[56] === "clear"
     )
       return 6;
     if (
       /*item*/
-      ctx2[53] === "hand"
+      ctx2[56] === "hand"
     )
       return 7;
     if (
       /*item*/
-      ctx2[53] === "laserPointer"
+      ctx2[56] === "laserPointer"
     )
       return 8;
     return -1;
@@ -11874,7 +12098,7 @@ function create_each_block_1(ctx) {
     }
   };
 }
-function create_if_block_12(ctx) {
+function create_if_block_3(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11897,7 +12121,7 @@ function create_if_block_12(ctx) {
     }
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_14] },
+    $$slots: { default: [create_default_slot_53] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -11941,7 +12165,7 @@ function create_if_block_12(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      33554432) {
+      268435456) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11961,7 +12185,7 @@ function create_if_block_12(ctx) {
     }
   };
 }
-function create_default_slot_14(ctx) {
+function create_default_slot_53(ctx) {
   let icons_apps;
   let current;
   icons_apps = new Icons_default.Apps({ props: { theme: (
@@ -11999,7 +12223,7 @@ function create_default_slot_14(ctx) {
     }
   };
 }
-function create_if_block14(ctx) {
+function create_if_block_2(ctx) {
   let button;
   let current;
   button = new Button_default({
@@ -12014,14 +12238,14 @@ function create_if_block14(ctx) {
         /*disabled*/
         ctx[3]
       ),
-      $$slots: { default: [create_default_slot13] },
+      $$slots: { default: [create_default_slot_43] },
       $$scope: { ctx }
     }
   });
   button.$on(
     "click",
     /*scroll_down*/
-    ctx[24]
+    ctx[25]
   );
   return {
     c() {
@@ -12043,7 +12267,7 @@ function create_if_block14(ctx) {
         ctx2[3];
       if (dirty[0] & /*theme*/
       2 | dirty[1] & /*$$scope*/
-      33554432) {
+      268435456) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12063,7 +12287,7 @@ function create_if_block14(ctx) {
     }
   };
 }
-function create_default_slot13(ctx) {
+function create_default_slot_43(ctx) {
   let icons_down;
   let current;
   icons_down = new Icons_default.Down({ props: { theme: (
@@ -12101,6 +12325,366 @@ function create_default_slot13(ctx) {
     }
   };
 }
+function create_if_block_14(ctx) {
+  let button0;
+  let t_1;
+  let button1;
+  let current;
+  const button0_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button0_props = {
+    $$slots: { default: [create_default_slot_34] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button0_spread_levels.length; i += 1) {
+    button0_props = assign(button0_props, button0_spread_levels[i]);
+  }
+  button0 = new Button_default({ props: button0_props });
+  const button1_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button1_props = {
+    $$slots: { default: [create_default_slot_24] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button1_spread_levels.length; i += 1) {
+    button1_props = assign(button1_props, button1_spread_levels[i]);
+  }
+  button1 = new Button_default({ props: button1_props });
+  button1.$on(
+    "click",
+    /*useLaserPen*/
+    ctx[34]
+  );
+  return {
+    c() {
+      create_component(button0.$$.fragment);
+      t_1 = space();
+      create_component(button1.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button0, target, anchor);
+      insert(target, t_1, anchor);
+      mount_component(button1, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button0_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button0_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[1] & /*$$scope*/
+      268435456) {
+        button0_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button0.$set(button0_changes);
+      const button1_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button1_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[1] & /*$$scope*/
+      268435456) {
+        button1_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button1.$set(button1_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button0.$$.fragment, local);
+      transition_in(button1.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button0.$$.fragment, local);
+      transition_out(button1.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button0, detaching);
+      if (detaching)
+        detach(t_1);
+      destroy_component(button1, detaching);
+    }
+  };
+}
+function create_if_block14(ctx) {
+  let button0;
+  let t_1;
+  let button1;
+  let current;
+  const button0_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button0_props = {
+    $$slots: { default: [create_default_slot_14] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button0_spread_levels.length; i += 1) {
+    button0_props = assign(button0_props, button0_spread_levels[i]);
+  }
+  button0 = new Button_default({ props: button0_props });
+  button0.$on(
+    "click",
+    /*pencil*/
+    ctx[28]
+  );
+  const button1_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button1_props = {
+    $$slots: { default: [create_default_slot13] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button1_spread_levels.length; i += 1) {
+    button1_props = assign(button1_props, button1_spread_levels[i]);
+  }
+  button1 = new Button_default({ props: button1_props });
+  return {
+    c() {
+      create_component(button0.$$.fragment);
+      t_1 = space();
+      create_component(button1.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button0, target, anchor);
+      insert(target, t_1, anchor);
+      mount_component(button1, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button0_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button0_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[1] & /*$$scope*/
+      268435456) {
+        button0_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button0.$set(button0_changes);
+      const button1_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button1_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[1] & /*$$scope*/
+      268435456) {
+        button1_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button1.$set(button1_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button0.$$.fragment, local);
+      transition_in(button1.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button0.$$.fragment, local);
+      transition_out(button1.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button0, detaching);
+      if (detaching)
+        detach(t_1);
+      destroy_component(button1, detaching);
+    }
+  };
+}
+function create_default_slot_34(ctx) {
+  let icons_pencilfilled;
+  let current;
+  icons_pencilfilled = new Icons_default.PencilFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[1]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_pencilfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencilfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencilfilled_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_pencilfilled_changes.theme = /*theme*/
+        ctx2[1];
+      icons_pencilfilled.$set(icons_pencilfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencilfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencilfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencilfilled, detaching);
+    }
+  };
+}
+function create_default_slot_24(ctx) {
+  let icons_laserpen;
+  let current;
+  icons_laserpen = new Icons_default.LaserPen({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
+  return {
+    c() {
+      create_component(icons_laserpen.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_laserpen, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_laserpen_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_laserpen_changes.theme = /*theme*/
+        ctx2[1];
+      icons_laserpen.$set(icons_laserpen_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_laserpen.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_laserpen.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_laserpen, detaching);
+    }
+  };
+}
+function create_default_slot_14(ctx) {
+  let icons_pencil;
+  let current;
+  icons_pencil = new Icons_default.Pencil({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
+  return {
+    c() {
+      create_component(icons_pencil.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencil, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencil_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_pencil_changes.theme = /*theme*/
+        ctx2[1];
+      icons_pencil.$set(icons_pencil_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencil.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencil.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencil, detaching);
+    }
+  };
+}
+function create_default_slot13(ctx) {
+  let icons_laserpenfilled;
+  let current;
+  icons_laserpenfilled = new Icons_default.LaserPenFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[1]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_laserpenfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_laserpenfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_laserpenfilled_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_laserpenfilled_changes.theme = /*theme*/
+        ctx2[1];
+      icons_laserpenfilled.$set(icons_laserpenfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_laserpenfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_laserpenfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_laserpenfilled, detaching);
+    }
+  };
+}
 function create_each_block4(ctx) {
   let button;
   let img;
@@ -12112,7 +12696,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[46] + ""
+    ctx[49] + ""
   );
   let t1;
   let span_class_value;
@@ -12134,40 +12718,40 @@ function create_each_block4(ctx) {
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + /*theme*/
       ctx[1]);
       if (!src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[45]))
+      ctx[48]))
         attr(img, "src", img_src_value);
       attr(img, "alt", img_alt_value = /*kind*/
-      ctx[47]);
+      ctx[50]);
       attr(img, "title", img_title_value = /*label*/
-      ctx[46]);
+      ctx[49]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + /*theme*/
       ctx[1]);
       attr(button, "class", button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[47] + " " + /*theme*/
+      ctx[50] + " " + /*theme*/
       ctx[1]);
       attr(button, "title", button_title_value = /*label*/
-      ctx[46] + /*state*/
-      (ctx[49] && /*state*/
-      ctx[49].reason ? ": " + /*state*/
-      ctx[49].reason : ""));
+      ctx[49] + /*state*/
+      (ctx[52] && /*state*/
+      ctx[52].reason ? ": " + /*state*/
+      ctx[52].reason : ""));
       attr(button, "data-app-kind", button_data_app_kind_value = /*netless_app*/
-      ctx[44].kind);
+      ctx[47].kind);
       button.disabled = button_disabled_value = /*state*/
-      ctx[49] && /*state*/
-      ctx[49].status !== "idle";
+      ctx[52] && /*state*/
+      ctx[52].status !== "idle";
       toggle_class(
         button,
         "is-loading",
         /*state*/
-        ctx[49] && /*state*/
-        ctx[49].status === "loading"
+        ctx[52] && /*state*/
+        ctx[52].status === "loading"
       );
       toggle_class(
         button,
         "is-failed",
         /*state*/
-        ctx[49] && /*state*/
-        ctx[49].status === "failed"
+        ctx[52] && /*state*/
+        ctx[52].status === "failed"
       );
     },
     m(target, anchor) {
@@ -12181,9 +12765,9 @@ function create_each_block4(ctx) {
         dispose = listen(button, "click", function() {
           if (is_function(
             /*on_click*/
-            ctx[50]
+            ctx[53]
           ))
-            ctx[50].apply(this, arguments);
+            ctx[53].apply(this, arguments);
         });
         mounted = true;
       }
@@ -12196,23 +12780,23 @@ function create_each_block4(ctx) {
         attr(img, "class", img_class_value);
       }
       if (dirty[0] & /*$apps*/
-      1048576 && !src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[45])) {
+      2097152 && !src_url_equal(img.src, img_src_value = /*icon*/
+      ctx[48])) {
         attr(img, "src", img_src_value);
       }
       if (dirty[0] & /*$apps*/
-      1048576 && img_alt_value !== (img_alt_value = /*kind*/
-      ctx[47])) {
+      2097152 && img_alt_value !== (img_alt_value = /*kind*/
+      ctx[50])) {
         attr(img, "alt", img_alt_value);
       }
       if (dirty[0] & /*$apps*/
-      1048576 && img_title_value !== (img_title_value = /*label*/
-      ctx[46])) {
+      2097152 && img_title_value !== (img_title_value = /*label*/
+      ctx[49])) {
         attr(img, "title", img_title_value);
       }
       if (dirty[0] & /*$apps*/
-      1048576 && t1_value !== (t1_value = /*label*/
-      ctx[46] + ""))
+      2097152 && t1_value !== (t1_value = /*label*/
+      ctx[49] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & /*theme*/
       2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + /*theme*/
@@ -12220,48 +12804,48 @@ function create_each_block4(ctx) {
         attr(span, "class", span_class_value);
       }
       if (dirty[0] & /*$apps, theme*/
-      1048578 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[47] + " " + /*theme*/
+      2097154 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
+      ctx[50] + " " + /*theme*/
       ctx[1])) {
         attr(button, "class", button_class_value);
       }
       if (dirty[0] & /*$apps, $status*/
-      3145728 && button_title_value !== (button_title_value = /*label*/
-      ctx[46] + /*state*/
-      (ctx[49] && /*state*/
-      ctx[49].reason ? ": " + /*state*/
-      ctx[49].reason : ""))) {
+      6291456 && button_title_value !== (button_title_value = /*label*/
+      ctx[49] + /*state*/
+      (ctx[52] && /*state*/
+      ctx[52].reason ? ": " + /*state*/
+      ctx[52].reason : ""))) {
         attr(button, "title", button_title_value);
       }
       if (dirty[0] & /*$apps*/
-      1048576 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
-      ctx[44].kind)) {
+      2097152 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
+      ctx[47].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
       if (dirty[0] & /*$status, $apps*/
-      3145728 && button_disabled_value !== (button_disabled_value = /*state*/
-      ctx[49] && /*state*/
-      ctx[49].status !== "idle")) {
+      6291456 && button_disabled_value !== (button_disabled_value = /*state*/
+      ctx[52] && /*state*/
+      ctx[52].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
-      3145730) {
+      6291458) {
         toggle_class(
           button,
           "is-loading",
           /*state*/
-          ctx[49] && /*state*/
-          ctx[49].status === "loading"
+          ctx[52] && /*state*/
+          ctx[52].status === "loading"
         );
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
-      3145730) {
+      6291458) {
         toggle_class(
           button,
           "is-failed",
           /*state*/
-          ctx[49] && /*state*/
-          ctx[49].status === "failed"
+          ctx[52] && /*state*/
+          ctx[52].status === "failed"
         );
       }
     },
@@ -12273,42 +12857,46 @@ function create_each_block4(ctx) {
     }
   };
 }
-function create_fragment67(ctx) {
+function create_fragment69(ctx) {
   let t0;
   let div0;
   let t1;
   let scrollHeight_action;
   let t2;
   let t3;
-  let div8;
-  let div2;
-  let strokewidth0;
-  let t4;
+  let div9;
+  let div3;
   let div1;
+  let current_block_type_index;
+  let if_block3;
+  let t4;
+  let strokewidth0;
   let t5;
-  let strokecolor0;
+  let div2;
   let t6;
-  let div3;
-  let textcolor;
+  let strokecolor0;
   let t7;
-  let div6;
-  let selectshapes;
-  let t8;
   let div4;
+  let textcolor;
+  let t8;
+  let div7;
+  let selectshapes;
   let t9;
-  let strokewidth1;
-  let t10;
   let div5;
+  let t10;
+  let strokewidth1;
   let t11;
-  let strokecolor1;
+  let div6;
   let t12;
-  let div7;
+  let strokecolor1;
+  let t13;
+  let div8;
   let current;
   let mounted;
   let dispose;
   let if_block0 = (
     /*scrollable*/
-    ctx[5] && create_if_block_11(ctx)
+    ctx[5] && create_if_block_13(ctx)
   );
   let each_value_1 = (
     /*items*/
@@ -12322,11 +12910,27 @@ function create_fragment67(ctx) {
     each_blocks_1[i] = null;
   });
   let if_block1 = !/*hide_apps*/
-  ctx[8] && create_if_block_12(ctx);
+  ctx[8] && create_if_block_3(ctx);
   let if_block2 = (
     /*scrollable*/
-    ctx[5] && create_if_block14(ctx)
+    ctx[5] && create_if_block_2(ctx)
   );
+  const if_block_creators = [create_if_block14, create_if_block_14];
+  const if_blocks = [];
+  function select_block_type_1(ctx2, dirty) {
+    var _a, _b;
+    if (!!/*app*/
+    ((_a = ctx2[0]) == null ? void 0 : _a.appliancePlugin) && /*hasUseLaserPen*/
+    ctx2[16])
+      return 0;
+    if (!!/*app*/
+    ((_b = ctx2[0]) == null ? void 0 : _b.appliancePlugin))
+      return 1;
+    return -1;
+  }
+  if (~(current_block_type_index = select_block_type_1(ctx))) {
+    if_block3 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+  }
   strokewidth0 = new StrokeWidth_default({
     props: {
       app: (
@@ -12441,7 +13045,7 @@ function create_fragment67(ctx) {
   });
   let each_value = (
     /*$apps*/
-    ctx[20]
+    ctx[21]
   );
   let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
@@ -12463,29 +13067,33 @@ function create_fragment67(ctx) {
       if (if_block2)
         if_block2.c();
       t3 = space();
-      div8 = element("div");
-      div2 = element("div");
-      create_component(strokewidth0.$$.fragment);
-      t4 = space();
+      div9 = element("div");
+      div3 = element("div");
       div1 = element("div");
+      if (if_block3)
+        if_block3.c();
+      t4 = space();
+      create_component(strokewidth0.$$.fragment);
       t5 = space();
-      create_component(strokecolor0.$$.fragment);
+      div2 = element("div");
       t6 = space();
-      div3 = element("div");
-      create_component(textcolor.$$.fragment);
+      create_component(strokecolor0.$$.fragment);
       t7 = space();
-      div6 = element("div");
-      create_component(selectshapes.$$.fragment);
-      t8 = space();
       div4 = element("div");
+      create_component(textcolor.$$.fragment);
+      t8 = space();
+      div7 = element("div");
+      create_component(selectshapes.$$.fragment);
       t9 = space();
-      create_component(strokewidth1.$$.fragment);
-      t10 = space();
       div5 = element("div");
+      t10 = space();
+      create_component(strokewidth1.$$.fragment);
       t11 = space();
-      create_component(strokecolor1.$$.fragment);
+      div6 = element("div");
       t12 = space();
-      div7 = element("div");
+      create_component(strokecolor1.$$.fragment);
+      t13 = space();
+      div8 = element("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
@@ -12496,21 +13104,22 @@ function create_fragment67(ctx) {
         /*scrollable*/
         ctx[5]
       );
-      attr(div1, "class", name5 + "-panel-divider");
-      attr(div2, "class", name5 + "-panel pencil");
-      attr(div3, "class", name5 + "-panel text");
-      attr(div4, "class", name5 + "-panel-divider");
+      attr(div1, "class", name5 + "-panel-switch-pencil");
+      attr(div2, "class", name5 + "-panel-divider");
+      attr(div3, "class", name5 + "-panel pencil");
+      attr(div4, "class", name5 + "-panel text");
       attr(div5, "class", name5 + "-panel-divider");
-      attr(div6, "class", name5 + "-panel shapes");
-      attr(div7, "class", name5 + "-panel apps");
+      attr(div6, "class", name5 + "-panel-divider");
+      attr(div7, "class", name5 + "-panel shapes");
+      attr(div8, "class", name5 + "-panel apps");
       set_style(
-        div7,
+        div8,
         "--n",
         /*$apps*/
-        ctx[20].length
+        ctx[21].length
       );
-      attr(div8, "class", name5 + "-panel-wrapper");
-      set_style(div8, "display", "none");
+      attr(div9, "class", name5 + "-panel-wrapper");
+      set_style(div9, "display", "none");
     },
     m(target, anchor) {
       if (if_block0)
@@ -12529,38 +13138,43 @@ function create_fragment67(ctx) {
       if (if_block2)
         if_block2.m(target, anchor);
       insert(target, t3, anchor);
-      insert(target, div8, anchor);
-      append(div8, div2);
-      mount_component(strokewidth0, div2, null);
-      append(div2, t4);
-      append(div2, div1);
-      append(div2, t5);
-      mount_component(strokecolor0, div2, null);
-      ctx[37](div2);
-      append(div8, t6);
-      append(div8, div3);
-      mount_component(textcolor, div3, null);
-      ctx[38](div3);
-      append(div8, t7);
-      append(div8, div6);
-      mount_component(selectshapes, div6, null);
-      append(div6, t8);
-      append(div6, div4);
-      append(div6, t9);
-      mount_component(strokewidth1, div6, null);
-      append(div6, t10);
-      append(div6, div5);
-      append(div6, t11);
-      mount_component(strokecolor1, div6, null);
-      ctx[39](div6);
-      append(div8, t12);
-      append(div8, div7);
+      insert(target, div9, anchor);
+      append(div9, div3);
+      append(div3, div1);
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].m(div1, null);
+      }
+      append(div3, t4);
+      mount_component(strokewidth0, div3, null);
+      append(div3, t5);
+      append(div3, div2);
+      append(div3, t6);
+      mount_component(strokecolor0, div3, null);
+      ctx[40](div3);
+      append(div9, t7);
+      append(div9, div4);
+      mount_component(textcolor, div4, null);
+      ctx[41](div4);
+      append(div9, t8);
+      append(div9, div7);
+      mount_component(selectshapes, div7, null);
+      append(div7, t9);
+      append(div7, div5);
+      append(div7, t10);
+      mount_component(strokewidth1, div7, null);
+      append(div7, t11);
+      append(div7, div6);
+      append(div7, t12);
+      mount_component(strokecolor1, div7, null);
+      ctx[42](div7);
+      append(div9, t13);
+      append(div9, div8);
       for (let i = 0; i < each_blocks.length; i += 1) {
         if (each_blocks[i]) {
-          each_blocks[i].m(div7, null);
+          each_blocks[i].m(div8, null);
         }
       }
-      ctx[41](div7);
+      ctx[44](div8);
       current = true;
       if (!mounted) {
         dispose = [
@@ -12574,7 +13188,7 @@ function create_fragment67(ctx) {
             null,
             div0,
             /*top*/
-            ctx[22]
+            ctx[23]
           ))
         ];
         mounted = true;
@@ -12592,7 +13206,7 @@ function create_fragment67(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_11(ctx2);
+          if_block0 = create_if_block_13(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -12604,9 +13218,9 @@ function create_fragment67(ctx) {
         });
         check_outros();
       }
-      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser, hand*/
-      2114632835 | dirty[1] & /*clear, laserPointer*/
-      3) {
+      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, hasUseLaserPen, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser*/
+      2081799299 | dirty[1] & /*clear, hand, laserPointer*/
+      7) {
         each_value_1 = /*items*/
         ctx2[7];
         let i;
@@ -12637,7 +13251,7 @@ function create_fragment67(ctx) {
             transition_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block_12(ctx2);
+          if_block1 = create_if_block_3(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
           if_block1.m(div0, null);
@@ -12676,7 +13290,7 @@ function create_fragment67(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block14(ctx2);
+          if_block2 = create_if_block_2(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(t3.parentNode, t3);
@@ -12688,6 +13302,34 @@ function create_fragment67(ctx) {
         });
         check_outros();
       }
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_1(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if (~current_block_type_index) {
+          if_blocks[current_block_type_index].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block3) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index) {
+          if_block3 = if_blocks[current_block_type_index];
+          if (!if_block3) {
+            if_block3 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block3.c();
+          } else {
+            if_block3.p(ctx2, dirty);
+          }
+          transition_in(if_block3, 1);
+          if_block3.m(div1, null);
+        } else {
+          if_block3 = null;
+        }
+      }
       const strokewidth0_changes = {};
       if (dirty[0] & /*app*/
       1)
@@ -12789,9 +13431,9 @@ function create_fragment67(ctx) {
         ctx2[9];
       strokecolor1.$set(strokecolor1_changes);
       if (dirty[0] & /*$apps, theme, $status, app*/
-      3145731) {
+      6291459) {
         each_value = /*$apps*/
-        ctx2[20];
+        ctx2[21];
         let i;
         for (i = 0; i < each_value.length; i += 1) {
           const child_ctx = get_each_context4(ctx2, each_value, i);
@@ -12800,7 +13442,7 @@ function create_fragment67(ctx) {
           } else {
             each_blocks[i] = create_each_block4(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(div7, null);
+            each_blocks[i].m(div8, null);
           }
         }
         for (; i < each_blocks.length; i += 1) {
@@ -12809,12 +13451,12 @@ function create_fragment67(ctx) {
         each_blocks.length = each_value.length;
       }
       if (!current || dirty[0] & /*$apps*/
-      1048576) {
+      2097152) {
         set_style(
-          div7,
+          div8,
           "--n",
           /*$apps*/
-          ctx2[20].length
+          ctx2[21].length
         );
       }
     },
@@ -12827,6 +13469,7 @@ function create_fragment67(ctx) {
       }
       transition_in(if_block1);
       transition_in(if_block2);
+      transition_in(if_block3);
       transition_in(strokewidth0.$$.fragment, local);
       transition_in(strokecolor0.$$.fragment, local);
       transition_in(textcolor.$$.fragment, local);
@@ -12843,6 +13486,7 @@ function create_fragment67(ctx) {
       }
       transition_out(if_block1);
       transition_out(if_block2);
+      transition_out(if_block3);
       transition_out(strokewidth0.$$.fragment, local);
       transition_out(strokecolor0.$$.fragment, local);
       transition_out(textcolor.$$.fragment, local);
@@ -12868,25 +13512,28 @@ function create_fragment67(ctx) {
       if (detaching)
         detach(t3);
       if (detaching)
-        detach(div8);
+        detach(div9);
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].d();
+      }
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[37](null);
+      ctx[40](null);
       destroy_component(textcolor);
-      ctx[38](null);
+      ctx[41](null);
       destroy_component(selectshapes);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[39](null);
+      ctx[42](null);
       destroy_each(each_blocks, detaching);
-      ctx[41](null);
+      ctx[44](null);
       mounted = false;
       run_all(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance67($$self, $$props, $$invalidate) {
+function instance69($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -12894,14 +13541,16 @@ function instance67($$self, $$props, $$invalidate) {
   let appliance;
   let status;
   let max_scroll;
+  let hasAppliancePlugin;
+  let hasUseLaserPen;
   let $top;
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(35, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(36, $memberState = $$value)), memberState);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(38, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(39, $scroll_height = $$value)), scroll_height);
   let $apps;
-  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(21, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(20, $apps = $$value));
-  $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
+  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(22, $status = $$value)), status);
+  component_subscribe($$self, apps, ($$value) => $$invalidate(21, $apps = $$value));
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
+  $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
@@ -12921,7 +13570,7 @@ function instance67($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(43, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(46, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -12952,19 +13601,22 @@ function instance67($$self, $$props, $$invalidate) {
   function clear() {
     app == null ? void 0 : app.cleanCurrentScene();
   }
-  function div2_binding($$value) {
+  function useLaserPen() {
+    app == null ? void 0 : app.setAppliance("laserPen");
+  }
+  function div3_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       pencil_panel = $$value;
       $$invalidate(11, pencil_panel);
     });
   }
-  function div3_binding($$value) {
+  function div4_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       text_panel = $$value;
       $$invalidate(12, text_panel);
     });
   }
-  function div6_binding($$value) {
+  function div7_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       shapes_panel = $$value;
       $$invalidate(13, shapes_panel);
@@ -12974,7 +13626,7 @@ function instance67($$self, $$props, $$invalidate) {
     app && onClick(app);
     tippy_hide_all();
   };
-  function div7_binding($$value) {
+  function div8_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
       $$invalidate(14, apps_panel);
@@ -12992,7 +13644,7 @@ function instance67($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(33, computed_height = $$props2.computed_height);
+      $$invalidate(35, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("placement" in $$props2)
@@ -13021,12 +13673,12 @@ function instance67($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(34, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(37, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & /*t*/
     1024 | $$self.$$.dirty[1] & /*hotkeys*/
-    8) {
-      $$invalidate(19, c = {
+    64) {
+      $$invalidate(20, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
           pencil: tooltip(t.pencil, hotkeys == null ? void 0 : hotkeys.changeToPencil),
@@ -13038,21 +13690,29 @@ function instance67($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$subscribe_memberState($$invalidate(18, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(19, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & /*$memberState*/
-    32) {
-      $$invalidate(17, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+    128) {
+      $$invalidate(18, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
+      $$subscribe_status($$invalidate(17, status = app == null ? void 0 : app.appsStatus));
     }
     if ($$self.$$.dirty[0] & /*scrollable*/
     32 | $$self.$$.dirty[1] & /*$scroll_height, computed_height*/
-    20) {
+    272) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
+    if ($$self.$$.dirty[0] & /*app*/
+    1) {
+      $$invalidate(36, hasAppliancePlugin = !!(app == null ? void 0 : app.appliancePlugin));
+    }
+    if ($$self.$$.dirty[1] & /*hasAppliancePlugin, $memberState*/
+    160) {
+      $$invalidate(16, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
+    }
   };
   return [
     app,
@@ -13071,6 +13731,7 @@ function instance67($$self, $$props, $$invalidate) {
     shapes_panel,
     apps_panel,
     btn_props,
+    hasUseLaserPen,
     status,
     appliance,
     memberState,
@@ -13088,15 +13749,17 @@ function instance67($$self, $$props, $$invalidate) {
     hand,
     laserPointer,
     clear,
+    useLaserPen,
     computed_height,
+    hasAppliancePlugin,
     hotkeys,
-    $scroll_height,
     $memberState,
-    div2_binding,
+    $scroll_height,
     div3_binding,
-    div6_binding,
+    div4_binding,
+    div7_binding,
     func,
-    div7_binding
+    div8_binding
   ];
 }
 var Contents = class extends SvelteComponent {
@@ -13105,8 +13768,8 @@ var Contents = class extends SvelteComponent {
     init(
       this,
       options,
-      instance67,
-      create_fragment67,
+      instance69,
+      create_fragment69,
       safe_not_equal,
       {
         app: 0,
@@ -13114,7 +13777,7 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 33,
+        computed_height: 35,
         scrollable: 5,
         placement: 6,
         items: 7,
@@ -13185,7 +13848,7 @@ function create_if_block15(ctx) {
     }
   };
 }
-function create_fragment68(ctx) {
+function create_fragment70(ctx) {
   let div1;
   let div0;
   let contents;
@@ -13455,7 +14118,7 @@ function create_fragment68(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance68($$self, $$props, $$invalidate) {
+function instance70($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -13574,7 +14237,7 @@ function instance68($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance68, create_fragment68, safe_not_equal, {
+    init(this, options, instance70, create_fragment70, safe_not_equal, {
       app: 1,
       theme: 2,
       language: 3,
@@ -13605,7 +14268,7 @@ function create_else_block_12(ctx) {
         ]
       ),
       alt: "[play]",
-      $$slots: { default: [create_default_slot_53] },
+      $$slots: { default: [create_default_slot_54] },
       $$scope: { ctx }
     }
   });
@@ -13662,7 +14325,7 @@ function create_if_block_22(ctx) {
         ]
       ),
       alt: "[pause]",
-      $$slots: { default: [create_default_slot_43] },
+      $$slots: { default: [create_default_slot_44] },
       $$scope: { ctx }
     }
   });
@@ -13705,7 +14368,7 @@ function create_if_block_22(ctx) {
     }
   };
 }
-function create_if_block_13(ctx) {
+function create_if_block_15(ctx) {
   var _a;
   let icon;
   let current;
@@ -13719,7 +14382,7 @@ function create_if_block_13(ctx) {
         ]
       ),
       alt: "[loading]",
-      $$slots: { default: [create_default_slot_34] },
+      $$slots: { default: [create_default_slot_35] },
       $$scope: { ctx }
     }
   });
@@ -13762,7 +14425,7 @@ function create_if_block_13(ctx) {
     }
   };
 }
-function create_default_slot_53(ctx) {
+function create_default_slot_54(ctx) {
   let icons_play;
   let current;
   icons_play = new Icons_default.Play({ props: { theme: (
@@ -13800,7 +14463,7 @@ function create_default_slot_53(ctx) {
     }
   };
 }
-function create_default_slot_43(ctx) {
+function create_default_slot_44(ctx) {
   let icons_pause;
   let current;
   icons_pause = new Icons_default.Pause({ props: { theme: (
@@ -13838,7 +14501,7 @@ function create_default_slot_43(ctx) {
     }
   };
 }
-function create_default_slot_34(ctx) {
+function create_default_slot_35(ctx) {
   let icons_loading;
   let current;
   icons_loading = new Icons_default.Loading({ props: { theme: (
@@ -13881,7 +14544,7 @@ function create_default_slot_25(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_13, create_if_block_22, create_else_block_12];
+  const if_block_creators = [create_if_block_15, create_if_block_22, create_else_block_12];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
@@ -14258,7 +14921,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment69(ctx) {
+function create_fragment71(ctx) {
   let div0;
   let button0;
   let t0;
@@ -14535,7 +15198,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance69($$self, $$props, $$invalidate) {
+function instance71($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -14680,7 +15343,7 @@ function instance69($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance69, create_fragment69, safe_not_equal, {
+    init(this, options, instance71, create_fragment71, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -14749,7 +15412,7 @@ function create_if_block17(ctx) {
     }
   };
 }
-function create_fragment70(ctx) {
+function create_fragment72(ctx) {
   var _a;
   let div2;
   let div0;
@@ -14849,7 +15512,7 @@ function create_fragment70(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance70($$self, $$props, $$invalidate) {
+function instance72($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
@@ -14924,7 +15587,7 @@ function instance70($$self, $$props, $$invalidate) {
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance70, create_fragment70, not_equal, {
+    init(this, options, instance72, create_fragment72, not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -15060,7 +15723,7 @@ function create_if_block_23(ctx) {
     }
   };
 }
-function create_if_block_14(ctx) {
+function create_if_block_16(ctx) {
   let zoomcontrol;
   let current;
   zoomcontrol = new ZoomControl_default({
@@ -15176,7 +15839,7 @@ function create_if_block18(ctx) {
     }
   };
 }
-function create_fragment71(ctx) {
+function create_fragment73(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -15201,7 +15864,7 @@ function create_fragment71(ctx) {
   );
   let if_block2 = (
     /*config*/
-    ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_14(ctx)
+    ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_16(ctx)
   );
   let if_block3 = (
     /*config*/
@@ -15354,7 +16017,7 @@ function create_fragment71(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block_14(ctx2);
+          if_block2 = create_if_block_16(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(div2, null);
@@ -15447,7 +16110,7 @@ function create_fragment71(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance71($$self, $$props, $$invalidate) {
+function instance73($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -15572,7 +16235,7 @@ function instance71($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance71, create_fragment71, not_equal, {
+    init(this, options, instance73, create_fragment73, not_equal, {
       app: 0,
       theme: 1,
       language: 2,