npm - @netless/fastboard-ui - Versions diffs - 0.3.22 → 0.3.23-beta.1 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/dist/index.js +1026 -363
package/dist/index.js.map +1 -1
package/dist/index.mjs +1026 -363
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +1019 -360
package/dist/index.svelte.mjs.map +1 -1
package/package.json +5 -5
package/src/components/Icons/LaserPen.svelte +20 -0
package/src/components/Icons/LaserPenFilled.svelte +20 -0
package/src/components/Icons/index.ts +4 -0
package/src/components/Toolbar/components/Contents.scss +9 -0
package/src/components/Toolbar/components/Contents.svelte +33 -2
package/src/components/Toolbar/definitions/Pencil.svelte +4 -1

package/dist/index.mjs CHANGED Viewed

@@ -35,7 +35,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);
@@ -504,7 +504,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.$$ = {
@@ -530,7 +530,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])
@@ -543,7 +543,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);
@@ -4346,6 +4346,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,
@@ -4394,7 +4558,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") {
@@ -4407,12 +4573,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);
               }
@@ -4420,7 +4586,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,
@@ -4433,21 +4599,21 @@ if (typeof window !== "undefined") {
   });
 }
 var tippy = function(node, props) {
-  const instance72 = Tippy(node, props);
+  const instance74 = Tippy(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 = {
@@ -4961,7 +5127,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;
@@ -5027,7 +5193,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;
@@ -5085,7 +5251,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,
@@ -5290,7 +5456,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment50(ctx) {
+function create_fragment52(ctx) {
   let div;
   let button0;
   let t_1;
@@ -5431,7 +5597,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;
@@ -5532,7 +5698,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,
@@ -5889,7 +6055,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment51(ctx) {
+function create_fragment53(ctx) {
   let div;
   let button0;
   let t0;
@@ -6124,7 +6290,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;
@@ -6230,7 +6396,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,
@@ -6579,7 +6745,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment52(ctx) {
+function create_fragment54(ctx) {
   let div;
   let button0;
   let t0;
@@ -6842,7 +7008,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;
@@ -6953,7 +7119,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,
@@ -7255,7 +7421,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;
@@ -7470,7 +7636,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;
@@ -7541,7 +7707,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,
@@ -7555,7 +7721,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 = [
@@ -7611,7 +7777,7 @@ function create_fragment54(ctx) {
     }
   };
 }
-function instance54($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -7660,7 +7826,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;
@@ -7764,7 +7930,7 @@ function create_each_block(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment57(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -7844,7 +8010,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);
@@ -7896,7 +8062,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;
@@ -8000,7 +8166,7 @@ function create_each_block2(ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment58(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -8080,7 +8246,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);
@@ -8132,7 +8298,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;
@@ -8463,7 +8629,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();
@@ -8569,7 +8735,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance57($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -8654,7 +8820,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,
@@ -8809,7 +8975,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment60(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -8878,7 +9044,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;
@@ -8901,7 +9067,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,
@@ -9056,7 +9222,7 @@ function create_default_slot5(ctx) {
     }
   };
 }
-function create_fragment59(ctx) {
+function create_fragment61(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9125,7 +9291,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;
@@ -9148,7 +9314,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,
@@ -9197,7 +9363,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({
@@ -9237,20 +9403,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);
@@ -9303,7 +9515,7 @@ function create_default_slot6(ctx) {
     }
   };
 }
-function create_fragment60(ctx) {
+function create_fragment62(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9330,7 +9542,7 @@ function create_fragment60(ctx) {
   button.$on(
     "click",
     /*click_handler*/
-    ctx[5]
+    ctx[6]
   );
   return {
     c() {
@@ -9360,8 +9572,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);
@@ -9381,12 +9593,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);
   }
@@ -9401,18 +9614,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
     });
   }
 };
@@ -9563,7 +9779,7 @@ function create_default_slot7(ctx) {
     }
   };
 }
-function create_fragment61(ctx) {
+function create_fragment63(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9641,7 +9857,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;
@@ -9667,7 +9883,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,
@@ -9911,7 +10127,7 @@ function create_default_slot8(ctx) {
     }
   };
 }
-function create_fragment62(ctx) {
+function create_fragment64(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9989,7 +10205,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);
@@ -10061,7 +10277,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,
@@ -10218,7 +10434,7 @@ function create_default_slot9(ctx) {
     }
   };
 }
-function create_fragment63(ctx) {
+function create_fragment65(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10287,7 +10503,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;
@@ -10310,7 +10526,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,
@@ -10359,7 +10575,7 @@ function create_default_slot10(ctx) {
     }
   };
 }
-function create_fragment64(ctx) {
+function create_fragment66(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10428,7 +10644,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;
@@ -10448,7 +10664,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;
@@ -10598,7 +10814,7 @@ function create_default_slot11(ctx) {
     }
   };
 }
-function create_fragment65(ctx) {
+function create_fragment67(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10667,7 +10883,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;
@@ -10690,7 +10906,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,
@@ -10845,7 +11061,7 @@ function create_default_slot12(ctx) {
     }
   };
 }
-function create_fragment66(ctx) {
+function create_fragment68(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10914,7 +11130,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;
@@ -10937,7 +11153,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,
@@ -10950,42 +11166,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 = [
@@ -10994,7 +11210,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) {
@@ -11004,7 +11220,7 @@ function create_if_block_11(ctx) {
   button.$on(
     "click",
     /*scroll_up*/
-    ctx[23]
+    ctx[24]
   );
   return {
     c() {
@@ -11022,7 +11238,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);
@@ -11042,7 +11258,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: (
@@ -11080,14 +11296,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*/
@@ -11099,14 +11315,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() {
@@ -11119,9 +11335,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*/
@@ -11131,9 +11347,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) {
@@ -11151,14 +11367,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*/
@@ -11170,14 +11386,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() {
@@ -11190,9 +11406,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*/
@@ -11202,9 +11418,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) {
@@ -11222,7 +11438,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({
@@ -11244,7 +11460,7 @@ function create_if_block_8(ctx) {
   clear_1.$on(
     "click",
     /*clear*/
-    ctx[32]
+    ctx[33]
   );
   return {
     c() {
@@ -11285,14 +11501,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*/
@@ -11304,14 +11520,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() {
@@ -11324,9 +11540,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*/
@@ -11336,9 +11552,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) {
@@ -11356,7 +11572,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({
@@ -11367,7 +11583,7 @@ function create_if_block_6(ctx) {
       ),
       appliance: (
         /*appliance*/
-        ctx[17]
+        ctx[18]
       ),
       theme: (
         /*theme*/
@@ -11402,9 +11618,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*/
@@ -11438,14 +11654,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*/
@@ -11457,7 +11673,7 @@ function create_if_block_5(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].text
+        ctx[20].text
       ),
       menu: (
         /*text_panel*/
@@ -11468,7 +11684,7 @@ function create_if_block_5(ctx) {
   text_1.$on(
     "click",
     /*text*/
-    ctx[28]
+    ctx[29]
   );
   return {
     c() {
@@ -11481,9 +11697,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*/
@@ -11493,9 +11709,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*/
@@ -11517,14 +11733,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*/
@@ -11536,7 +11756,7 @@ function create_if_block_4(ctx) {
       ),
       content: (
         /*c*/
-        ctx[19].pencil
+        ctx[20].pencil
       ),
       menu: (
         /*pencil_panel*/
@@ -11547,7 +11767,7 @@ function create_if_block_4(ctx) {
   pencil_1.$on(
     "click",
     /*pencil*/
-    ctx[27]
+    ctx[28]
   );
   return {
     c() {
@@ -11559,10 +11779,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*/
@@ -11572,9 +11796,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*/
@@ -11596,14 +11820,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*/
@@ -11615,14 +11839,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() {
@@ -11635,9 +11859,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*/
@@ -11647,9 +11871,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) {
@@ -11667,14 +11891,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*/
@@ -11686,14 +11910,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() {
@@ -11706,9 +11930,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*/
@@ -11718,9 +11942,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) {
@@ -11744,61 +11968,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;
@@ -11868,7 +12092,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 = [
@@ -11891,7 +12115,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) {
@@ -11935,7 +12159,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);
@@ -11955,7 +12179,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: (
@@ -11993,7 +12217,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({
@@ -12008,14 +12232,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() {
@@ -12037,7 +12261,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);
@@ -12057,7 +12281,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: (
@@ -12095,6 +12319,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;
@@ -12106,7 +12690,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[46] + ""
+    ctx[49] + ""
   );
   let t1;
   let span_class_value;
@@ -12128,40 +12712,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) {
@@ -12175,9 +12759,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;
       }
@@ -12190,23 +12774,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*/
@@ -12214,48 +12798,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"
         );
       }
     },
@@ -12267,42 +12851,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*/
@@ -12316,11 +12904,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: (
@@ -12435,7 +13039,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) {
@@ -12457,29 +13061,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();
       }
@@ -12490,21 +13098,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)
@@ -12523,38 +13132,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 = [
@@ -12568,7 +13182,7 @@ function create_fragment67(ctx) {
             null,
             div0,
             /*top*/
-            ctx[22]
+            ctx[23]
           ))
         ];
         mounted = true;
@@ -12586,7 +13200,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);
@@ -12598,9 +13212,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;
@@ -12631,7 +13245,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);
@@ -12670,7 +13284,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);
@@ -12682,6 +13296,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)
@@ -12783,9 +13425,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);
@@ -12794,7 +13436,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) {
@@ -12803,12 +13445,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
         );
       }
     },
@@ -12821,6 +13463,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);
@@ -12837,6 +13480,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);
@@ -12862,25 +13506,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;
@@ -12888,14 +13535,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;
@@ -12915,7 +13564,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);
   }
@@ -12946,19 +13595,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);
@@ -12968,7 +13620,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);
@@ -12986,7 +13638,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)
@@ -13015,12 +13667,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),
@@ -13032,21 +13684,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,
@@ -13065,6 +13725,7 @@ function instance67($$self, $$props, $$invalidate) {
     shapes_panel,
     apps_panel,
     btn_props,
+    hasUseLaserPen,
     status,
     appliance,
     memberState,
@@ -13082,15 +13743,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 {
@@ -13099,8 +13762,8 @@ var Contents = class extends SvelteComponent {
     init(
       this,
       options,
-      instance67,
-      create_fragment67,
+      instance69,
+      create_fragment69,
       safe_not_equal,
       {
         app: 0,
@@ -13108,7 +13771,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,
@@ -13179,7 +13842,7 @@ function create_if_block15(ctx) {
     }
   };
 }
-function create_fragment68(ctx) {
+function create_fragment70(ctx) {
   let div1;
   let div0;
   let contents;
@@ -13449,7 +14112,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;
@@ -13568,7 +14231,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,
@@ -13599,7 +14262,7 @@ function create_else_block_12(ctx) {
         ]
       ),
       alt: "[play]",
-      $$slots: { default: [create_default_slot_53] },
+      $$slots: { default: [create_default_slot_54] },
       $$scope: { ctx }
     }
   });
@@ -13656,7 +14319,7 @@ function create_if_block_22(ctx) {
         ]
       ),
       alt: "[pause]",
-      $$slots: { default: [create_default_slot_43] },
+      $$slots: { default: [create_default_slot_44] },
       $$scope: { ctx }
     }
   });
@@ -13699,7 +14362,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;
@@ -13713,7 +14376,7 @@ function create_if_block_13(ctx) {
         ]
       ),
       alt: "[loading]",
-      $$slots: { default: [create_default_slot_34] },
+      $$slots: { default: [create_default_slot_35] },
       $$scope: { ctx }
     }
   });
@@ -13756,7 +14419,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: (
@@ -13794,7 +14457,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: (
@@ -13832,7 +14495,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: (
@@ -13875,7 +14538,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 (
@@ -14252,7 +14915,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment69(ctx) {
+function create_fragment71(ctx) {
   let div0;
   let button0;
   let t0;
@@ -14529,7 +15192,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;
@@ -14674,7 +15337,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,
@@ -14743,7 +15406,7 @@ function create_if_block17(ctx) {
     }
   };
 }
-function create_fragment70(ctx) {
+function create_fragment72(ctx) {
   var _a;
   let div2;
   let div0;
@@ -14843,7 +15506,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;
@@ -14918,7 +15581,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,
@@ -15054,7 +15717,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({
@@ -15170,7 +15833,7 @@ function create_if_block18(ctx) {
     }
   };
 }
-function create_fragment71(ctx) {
+function create_fragment73(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -15195,7 +15858,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*/
@@ -15348,7 +16011,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);
@@ -15441,7 +16104,7 @@ function create_fragment71(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance71($$self, $$props, $$invalidate) {
+function instance73($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -15566,7 +16229,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,