npm - @netless/fastboard-ui - Versions diffs - 1.0.0-canary.3 → 1.0.0-canary.6 - Mend

@netless/fastboard-ui 1.0.0-canary.3 → 1.0.0-canary.6

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 (22) hide show

package/dist/index.css +860 -0
package/dist/index.css.map +1 -0
package/dist/index.d.ts +10 -2
package/dist/index.js +1913 -561
package/dist/index.js.map +1 -1
package/dist/index.mjs +1913 -561
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +1906 -558
package/dist/index.svelte.mjs.map +1 -1
package/package.json +6 -3
package/src/behaviors/apps.ts +1 -1
package/src/components/Icons/Eraser.svelte +35 -1
package/src/components/Icons/EraserFilled.svelte +2 -2
package/src/components/Icons/PencilEraser.svelte +16 -0
package/src/components/Icons/PencilEraserFilled.svelte +16 -0
package/src/components/Icons/index.ts +7 -0
package/src/components/Toolbar/Toolbar.svelte +2 -0
package/src/components/Toolbar/Toolbar.svelte.d.ts +8 -0
package/src/components/Toolbar/components/Contents.scss +11 -0
package/src/components/Toolbar/components/Contents.svelte +99 -14
package/src/components/Toolbar/components/PencilEraserSize.svelte +27 -0
package/src/components/Toolbar/components/constants.ts +17 -1

package/dist/index.mjs CHANGED Viewed

@@ -1,21 +1,5 @@
 import Tippy from 'tippy.js';
-// inline-sass-helper:inline-sass-style-helper.js
-function injectStyle(text2) {
-  if (typeof document !== "undefined") {
-    var style = document.createElement("style");
-    var node = document.createTextNode(text2);
-    style.appendChild(node);
-    document.head.appendChild(style);
-  }
-}
-// 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-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left: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 *,.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);
 // ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
 function noop() {
 }
@@ -459,7 +443,7 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance59, create_fragment59, not_equal2, props, append_styles, dirty = [-1]) {
+function init(component, options, instance62, create_fragment62, not_equal2, props, append_styles, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -482,7 +466,7 @@ function init(component, options, instance59, create_fragment59, not_equal2, pro
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance59 ? instance59(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance62 ? instance62(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])
@@ -495,7 +479,7 @@ function init(component, options, instance59, create_fragment59, not_equal2, pro
   $$.update();
   ready = true;
   run_all($$.before_update);
-  $$.fragment = create_fragment59 ? create_fragment59($$.ctx) : false;
+  $$.fragment = create_fragment62 ? create_fragment62($$.ctx) : false;
   if (options.target) {
     if (options.hydrate) {
       const nodes = children(options.target);
@@ -1465,17 +1449,51 @@ var Down_default = Down;
 // src/components/Icons/Eraser.svelte
 function create_fragment14(ctx) {
   let svg;
-  let path;
+  let path0;
+  let path1;
+  let path2;
+  let path3;
+  let path4;
+  let path5;
   let svg_class_value;
   return {
     c() {
       svg = svg_element("svg");
-      path = svg_element("path");
-      attr(path, "stroke", "#5D6066");
-      attr(path, "stroke-linejoin", "round");
-      attr(path, "stroke-width", "1.25");
-      attr(path, "d", "M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829");
-      attr(path, "class", "fastboard-icon-stroke-color");
+      path0 = svg_element("path");
+      path1 = svg_element("path");
+      path2 = svg_element("path");
+      path3 = svg_element("path");
+      path4 = svg_element("path");
+      path5 = svg_element("path");
+      attr(path0, "d", "M16 16L20 20M20 16L16 20");
+      attr(path0, "stroke", "#5D6066");
+      attr(path0, "class", "fastboard-icon-stroke-color");
+      attr(path0, "stroke-width", "1.25");
+      attr(path1, "d", "M13.4139 4.92898C14.195 4.14794 15.4613 4.14794 16.2423 4.92898L19.0708 7.75741C19.8518 8.53846 19.8518 9.80479 19.0708 10.5858L11.9997 17.6569C10.4376 19.219 7.90494 19.219 6.34284 17.6569L4.92863 16.2427C4.14758 15.4616 4.14758 14.1953 4.92863 13.4143L13.4139 4.92898Z");
+      attr(path1, "stroke", "#5D6066");
+      attr(path1, "class", "fastboard-icon-stroke-color");
+      attr(path1, "stroke-width", "1.25");
+      attr(path1, "stroke-linejoin", "round");
+      attr(path2, "d", "M12 6.34314L17.6569 12");
+      attr(path2, "stroke", "#5D6066");
+      attr(path2, "class", "fastboard-icon-stroke-color");
+      attr(path2, "stroke-width", "1.25");
+      attr(path2, "stroke-linejoin", "round");
+      attr(path3, "d", "M16.2422 4.92896L13.4138 7.75738");
+      attr(path3, "stroke", "#5D6066");
+      attr(path3, "class", "fastboard-icon-stroke-color");
+      attr(path3, "stroke-width", "1.25");
+      attr(path3, "stroke-linejoin", "round");
+      attr(path4, "d", "M17.6572 6.34314L14.8288 9.17157");
+      attr(path4, "stroke", "#5D6066");
+      attr(path4, "class", "fastboard-icon-stroke-color");
+      attr(path4, "stroke-width", "1.25");
+      attr(path4, "stroke-linejoin", "round");
+      attr(path5, "d", "M19.0713 7.75732L16.2429 10.5858");
+      attr(path5, "stroke", "#5D6066");
+      attr(path5, "class", "fastboard-icon-stroke-color");
+      attr(path5, "stroke-width", "1.25");
+      attr(path5, "stroke-linejoin", "round");
       attr(svg, "fill", "none");
       attr(svg, "viewBox", "0 0 24 24");
       attr(svg, "class", svg_class_value = "fastboard-icon " + ctx[0]);
@@ -1483,7 +1501,12 @@ function create_fragment14(ctx) {
     },
     m(target, anchor) {
       insert(target, svg, anchor);
-      append(svg, path);
+      append(svg, path0);
+      append(svg, path1);
+      append(svg, path2);
+      append(svg, path3);
+      append(svg, path4);
+      append(svg, path5);
     },
     p(ctx2, [dirty]) {
       if (dirty & 1 && svg_class_value !== (svg_class_value = "fastboard-icon " + ctx2[0])) {
@@ -1529,10 +1552,10 @@ function create_fragment15(ctx) {
     c() {
       svg = svg_element("svg");
       path = svg_element("path");
-      attr(path, "fill", "#5D6066");
       attr(path, "fill-rule", "evenodd");
-      attr(path, "d", "M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z");
       attr(path, "clip-rule", "evenodd");
+      attr(path, "d", "M16.2423 4.92893C15.4612 4.14788 14.1949 4.14788 13.4138 4.92893L4.92856 13.4142C4.14751 14.1953 4.14751 15.4616 4.92856 16.2426L6.34277 17.6568C7.90487 19.2189 10.4375 19.2189 11.9996 17.6568L17.2146 12.4419L11.5577 6.78508L12.4416 5.9012L18.0985 11.558L19.0707 10.5858C19.8517 9.80473 19.8517 8.5384 19.0707 7.75735L16.2423 4.92893ZM17.1161 18L15.5581 16.4419L16.4419 15.5581L18 17.1161L19.5581 15.5581L20.4419 16.4419L18.8839 18L20.4419 19.5581L19.5581 20.4419L18 18.8839L16.4419 20.4419L15.5581 19.5581L17.1161 18Z");
+      attr(path, "fill", "#3381FF");
       attr(path, "class", "fastboard-icon-fill-color");
       attr(svg, "fill", "none");
       attr(svg, "viewBox", "0 0 24 24");
@@ -1941,8 +1964,124 @@ var PencilFilled = class extends SvelteComponent {
 };
 var PencilFilled_default = PencilFilled;
-// src/components/Icons/Plus.svelte
+// src/components/Icons/PencilEraser.svelte
 function create_fragment22(ctx) {
+  let svg;
+  let path;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      path = svg_element("path");
+      attr(path, "stroke", "#5D6066");
+      attr(path, "stroke-linejoin", "round");
+      attr(path, "stroke-width", "1.25");
+      attr(path, "d", "M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829");
+      attr(path, "class", "fastboard-icon-stroke-color");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + ctx[0]);
+      toggle_class(svg, "is-active", ctx[1]);
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, path);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & 1 && svg_class_value !== (svg_class_value = "fastboard-icon " + ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & 3) {
+        toggle_class(svg, "is-active", ctx2[1]);
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance22($$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 PencilEraser = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance22, create_fragment22, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var PencilEraser_default = PencilEraser;
+// src/components/Icons/PencilEraserFilled.svelte
+function create_fragment23(ctx) {
+  let svg;
+  let path;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      path = svg_element("path");
+      attr(path, "fill", "#5D6066");
+      attr(path, "fill-rule", "evenodd");
+      attr(path, "d", "M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z");
+      attr(path, "clip-rule", "evenodd");
+      attr(path, "class", "fastboard-icon-fill-color");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + ctx[0]);
+      toggle_class(svg, "is-active", ctx[1]);
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, path);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & 1 && svg_class_value !== (svg_class_value = "fastboard-icon " + ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & 3) {
+        toggle_class(svg, "is-active", ctx2[1]);
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance23($$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 PencilEraserFilled = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance23, create_fragment23, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var PencilEraserFilled_default = PencilEraserFilled;
+// src/components/Icons/Plus.svelte
+function create_fragment24(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1980,7 +2119,7 @@ function create_fragment22(ctx) {
     }
   };
 }
-function instance22($$self, $$props, $$invalidate) {
+function instance24($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1994,13 +2133,13 @@ function instance22($$self, $$props, $$invalidate) {
 var Plus = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance22, create_fragment22, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance24, create_fragment24, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Plus_default = Plus;
 // src/components/Icons/Rectangle.svelte
-function create_fragment23(ctx) {
+function create_fragment25(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2038,7 +2177,7 @@ function create_fragment23(ctx) {
     }
   };
 }
-function instance23($$self, $$props, $$invalidate) {
+function instance25($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2052,13 +2191,13 @@ function instance23($$self, $$props, $$invalidate) {
 var Rectangle = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance23, create_fragment23, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance25, create_fragment25, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Rectangle_default = Rectangle;
 // src/components/Icons/RectangleBolded.svelte
-function create_fragment24(ctx) {
+function create_fragment26(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2096,7 +2235,7 @@ function create_fragment24(ctx) {
     }
   };
 }
-function instance24($$self, $$props, $$invalidate) {
+function instance26($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2110,13 +2249,13 @@ function instance24($$self, $$props, $$invalidate) {
 var RectangleBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance24, create_fragment24, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance26, create_fragment26, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var RectangleBolded_default = RectangleBolded;
 // src/components/Icons/Redo.svelte
-function create_fragment25(ctx) {
+function create_fragment27(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2158,7 +2297,7 @@ function create_fragment25(ctx) {
     }
   };
 }
-function instance25($$self, $$props, $$invalidate) {
+function instance27($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2172,13 +2311,13 @@ function instance25($$self, $$props, $$invalidate) {
 var Redo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance25, create_fragment25, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance27, create_fragment27, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Redo_default = Redo;
 // src/components/Icons/Reset.svelte
-function create_fragment26(ctx) {
+function create_fragment28(ctx) {
   let svg;
   let circle0;
   let path;
@@ -2234,7 +2373,7 @@ function create_fragment26(ctx) {
     }
   };
 }
-function instance26($$self, $$props, $$invalidate) {
+function instance28($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2248,13 +2387,13 @@ function instance26($$self, $$props, $$invalidate) {
 var Reset = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance26, create_fragment26, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance28, create_fragment28, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Reset_default = Reset;
 // src/components/Icons/Rhombus.svelte
-function create_fragment27(ctx) {
+function create_fragment29(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2292,7 +2431,7 @@ function create_fragment27(ctx) {
     }
   };
 }
-function instance27($$self, $$props, $$invalidate) {
+function instance29($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2306,13 +2445,13 @@ function instance27($$self, $$props, $$invalidate) {
 var Rhombus = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance27, create_fragment27, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance29, create_fragment29, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Rhombus_default = Rhombus;
 // src/components/Icons/RhombusBolded.svelte
-function create_fragment28(ctx) {
+function create_fragment30(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2350,7 +2489,7 @@ function create_fragment28(ctx) {
     }
   };
 }
-function instance28($$self, $$props, $$invalidate) {
+function instance30($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2364,13 +2503,13 @@ function instance28($$self, $$props, $$invalidate) {
 var RhombusBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance28, create_fragment28, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance30, create_fragment30, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var RhombusBolded_default = RhombusBolded;
 // src/components/Icons/Right.svelte
-function create_fragment29(ctx) {
+function create_fragment31(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2408,7 +2547,7 @@ function create_fragment29(ctx) {
     }
   };
 }
-function instance29($$self, $$props, $$invalidate) {
+function instance31($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2422,13 +2561,13 @@ function instance29($$self, $$props, $$invalidate) {
 var Right = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance29, create_fragment29, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance31, create_fragment31, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Right_default = Right;
 // src/components/Icons/Selector.svelte
-function create_fragment30(ctx) {
+function create_fragment32(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2475,7 +2614,7 @@ function create_fragment30(ctx) {
     }
   };
 }
-function instance30($$self, $$props, $$invalidate) {
+function instance32($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2489,13 +2628,13 @@ function instance30($$self, $$props, $$invalidate) {
 var Selector = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance30, create_fragment30, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance32, create_fragment32, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Selector_default = Selector;
 // src/components/Icons/SelectorFilled.svelte
-function create_fragment31(ctx) {
+function create_fragment33(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2540,7 +2679,7 @@ function create_fragment31(ctx) {
     }
   };
 }
-function instance31($$self, $$props, $$invalidate) {
+function instance33($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2554,13 +2693,13 @@ function instance31($$self, $$props, $$invalidate) {
 var SelectorFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance31, create_fragment31, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance33, create_fragment33, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var SelectorFilled_default = SelectorFilled;
 // src/components/Icons/SpeechBalloon.svelte
-function create_fragment32(ctx) {
+function create_fragment34(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2598,7 +2737,7 @@ function create_fragment32(ctx) {
     }
   };
 }
-function instance32($$self, $$props, $$invalidate) {
+function instance34($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2612,13 +2751,13 @@ function instance32($$self, $$props, $$invalidate) {
 var SpeechBalloon = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance32, create_fragment32, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance34, create_fragment34, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var SpeechBalloon_default = SpeechBalloon;
 // src/components/Icons/Star.svelte
-function create_fragment33(ctx) {
+function create_fragment35(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2656,7 +2795,7 @@ function create_fragment33(ctx) {
     }
   };
 }
-function instance33($$self, $$props, $$invalidate) {
+function instance35($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2670,13 +2809,13 @@ function instance33($$self, $$props, $$invalidate) {
 var Star = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance33, create_fragment33, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance35, create_fragment35, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Star_default = Star;
 // src/components/Icons/StarBolded.svelte
-function create_fragment34(ctx) {
+function create_fragment36(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2714,7 +2853,7 @@ function create_fragment34(ctx) {
     }
   };
 }
-function instance34($$self, $$props, $$invalidate) {
+function instance36($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2728,13 +2867,13 @@ function instance34($$self, $$props, $$invalidate) {
 var StarBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance34, create_fragment34, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance36, create_fragment36, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var StarBolded_default = StarBolded;
 // src/components/Icons/Text.svelte
-function create_fragment35(ctx) {
+function create_fragment37(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2772,7 +2911,7 @@ function create_fragment35(ctx) {
     }
   };
 }
-function instance35($$self, $$props, $$invalidate) {
+function instance37($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2786,13 +2925,13 @@ function instance35($$self, $$props, $$invalidate) {
 var Text = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance35, create_fragment35, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance37, create_fragment37, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Text_default = Text;
 // src/components/Icons/TextFilled.svelte
-function create_fragment36(ctx) {
+function create_fragment38(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2837,7 +2976,7 @@ function create_fragment36(ctx) {
     }
   };
 }
-function instance36($$self, $$props, $$invalidate) {
+function instance38($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2851,13 +2990,13 @@ function instance36($$self, $$props, $$invalidate) {
 var TextFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance36, create_fragment36, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance38, create_fragment38, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var TextFilled_default = TextFilled;
 // src/components/Icons/Triangle.svelte
-function create_fragment37(ctx) {
+function create_fragment39(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2895,7 +3034,7 @@ function create_fragment37(ctx) {
     }
   };
 }
-function instance37($$self, $$props, $$invalidate) {
+function instance39($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2909,13 +3048,13 @@ function instance37($$self, $$props, $$invalidate) {
 var Triangle = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance37, create_fragment37, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance39, create_fragment39, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Triangle_default = Triangle;
 // src/components/Icons/TriangleBolded.svelte
-function create_fragment38(ctx) {
+function create_fragment40(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2953,7 +3092,7 @@ function create_fragment38(ctx) {
     }
   };
 }
-function instance38($$self, $$props, $$invalidate) {
+function instance40($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2967,13 +3106,13 @@ function instance38($$self, $$props, $$invalidate) {
 var TriangleBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance38, create_fragment38, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance40, create_fragment40, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var TriangleBolded_default = TriangleBolded;
 // src/components/Icons/Undo.svelte
-function create_fragment39(ctx) {
+function create_fragment41(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3015,7 +3154,7 @@ function create_fragment39(ctx) {
     }
   };
 }
-function instance39($$self, $$props, $$invalidate) {
+function instance41($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3029,13 +3168,13 @@ function instance39($$self, $$props, $$invalidate) {
 var Undo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance39, create_fragment39, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance41, create_fragment41, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Undo_default = Undo;
 // src/components/Icons/Up.svelte
-function create_fragment40(ctx) {
+function create_fragment42(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3073,7 +3212,7 @@ function create_fragment40(ctx) {
     }
   };
 }
-function instance40($$self, $$props, $$invalidate) {
+function instance42($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3087,13 +3226,13 @@ function instance40($$self, $$props, $$invalidate) {
 var Up = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance40, create_fragment40, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance42, create_fragment42, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Up_default = Up;
 // src/components/Icons/WhiteboardAdd.svelte
-function create_fragment41(ctx) {
+function create_fragment43(ctx) {
   let svg;
   let path0;
   let rect;
@@ -3151,7 +3290,7 @@ function create_fragment41(ctx) {
     }
   };
 }
-function instance41($$self, $$props, $$invalidate) {
+function instance43($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3165,13 +3304,13 @@ function instance41($$self, $$props, $$invalidate) {
 var WhiteboardAdd = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance41, create_fragment41, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance43, create_fragment43, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var WhiteboardAdd_default = WhiteboardAdd;
 // src/components/Icons/Play.svelte
-function create_fragment42(ctx) {
+function create_fragment44(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3207,7 +3346,7 @@ function create_fragment42(ctx) {
     }
   };
 }
-function instance42($$self, $$props, $$invalidate) {
+function instance44($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3221,13 +3360,13 @@ function instance42($$self, $$props, $$invalidate) {
 var Play = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance42, create_fragment42, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance44, create_fragment44, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Play_default = Play;
 // src/components/Icons/Pause.svelte
-function create_fragment43(ctx) {
+function create_fragment45(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3263,7 +3402,7 @@ function create_fragment43(ctx) {
     }
   };
 }
-function instance43($$self, $$props, $$invalidate) {
+function instance45($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3277,13 +3416,13 @@ function instance43($$self, $$props, $$invalidate) {
 var Pause = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance43, create_fragment43, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance45, create_fragment45, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Pause_default = Pause;
 // src/components/Icons/Loading.svelte
-function create_fragment44(ctx) {
+function create_fragment46(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3319,7 +3458,7 @@ function create_fragment44(ctx) {
     }
   };
 }
-function instance44($$self, $$props, $$invalidate) {
+function instance46($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3333,7 +3472,7 @@ function instance44($$self, $$props, $$invalidate) {
 var Loading = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance44, create_fragment44, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance46, create_fragment46, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Loading_default = Loading;
@@ -3360,6 +3499,8 @@ var Icons = {
   Minus: Minus_default,
   Pencil: Pencil_default,
   PencilFilled: PencilFilled_default,
+  PencilEraser: PencilEraser_default,
+  PencilEraserFilled: PencilEraserFilled_default,
   Plus: Plus_default,
   Rectangle: Rectangle_default,
   RectangleBolded: RectangleBolded_default,
@@ -3395,19 +3536,19 @@ if (is_client) {
       {
         name: "className",
         defaultValue: "",
-        fn(instance59) {
+        fn(instance62) {
           function add() {
-            const el = instance59.popper.firstElementChild;
+            const el = instance62.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance59.props.className || "").trim();
+              const extra = (instance62.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
             }
           }
           function remove() {
-            instance59.popper.firstElementChild?.classList.remove("fastboard-tip");
+            instance62.popper.firstElementChild?.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -3420,13 +3561,13 @@ if (is_client) {
   });
 }
 var tippy = function(node, props) {
-  const instance59 = Tippy(node, props);
+  const instance62 = Tippy(node, props);
   return {
     update(props2) {
-      instance59.setProps(props2);
+      instance62.setProps(props2);
     },
     destroy() {
-      instance59.destroy();
+      instance62.destroy();
     }
   };
 };
@@ -3434,9 +3575,9 @@ function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach(tippy_hide);
 }
 function tippy_hide(el) {
-  const instance59 = el._tippy;
-  if (instance59) {
-    instance59.hide();
+  const instance62 = el._tippy;
+  if (instance62) {
+    instance62.hide();
   }
 }
 var tippy_menu = {
@@ -3777,7 +3918,7 @@ function create_if_block_1(ctx) {
     }
   };
 }
-function create_fragment45(ctx) {
+function create_fragment47(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -3840,7 +3981,7 @@ function create_fragment45(ctx) {
     }
   };
 }
-function instance45($$self, $$props, $$invalidate) {
+function instance47($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
@@ -3898,7 +4039,7 @@ function instance45($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance45, create_fragment45, safe_not_equal, {
+    init(this, options, instance47, create_fragment47, safe_not_equal, {
       class: 0,
       name: 1,
       theme: 2,
@@ -4065,7 +4206,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment46(ctx) {
+function create_fragment48(ctx) {
   let div;
   let button0;
   let t_1;
@@ -4166,7 +4307,7 @@ var i18n = {
   }
 };
 var name = "fastboard-redo-undo";
-function instance46($$self, $$props, $$invalidate) {
+function instance48($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -4250,7 +4391,7 @@ function instance46($$self, $$props, $$invalidate) {
 var RedoUndo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance46, create_fragment46, safe_not_equal, {
+    init(this, options, instance48, create_fragment48, safe_not_equal, {
       app: 11,
       theme: 0,
       language: 12,
@@ -4537,7 +4678,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment47(ctx) {
+function create_fragment49(ctx) {
   let div;
   let button0;
   let t0;
@@ -4706,7 +4847,7 @@ var i18n2 = {
   }
 };
 var name2 = "fastboard-page-control";
-function instance47($$self, $$props, $$invalidate) {
+function instance49($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -4795,7 +4936,7 @@ function instance47($$self, $$props, $$invalidate) {
 var PageControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance47, create_fragment47, safe_not_equal, {
+    init(this, options, instance49, create_fragment49, safe_not_equal, {
       app: 15,
       theme: 0,
       language: 16,
@@ -5079,7 +5220,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment48(ctx) {
+function create_fragment50(ctx) {
   let div;
   let button0;
   let t0;
@@ -5277,7 +5418,7 @@ function next_scale(scale, delta) {
   return 1;
 }
 var name3 = "fastboard-zoom-control";
-function instance48($$self, $$props, $$invalidate) {
+function instance50($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -5375,7 +5516,7 @@ function instance48($$self, $$props, $$invalidate) {
 var ZoomControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance48, create_fragment48, safe_not_equal, {
+    init(this, options, instance50, create_fragment50, safe_not_equal, {
       app: 14,
       theme: 0,
       language: 15,
@@ -5503,12 +5644,21 @@ var shapesIconActive = {
   triangle: Icons_default.TriangleBolded,
   speechBalloon: Icons_default.BalloonBolded
 };
+var eraserIcon = {
+  eraser: Icons_default.Eraser,
+  pencilEraser: Icons_default.PencilEraser
+};
+var eraserIconActive = {
+  eraser: Icons_default.EraserFilled,
+  pencilEraser: Icons_default.PencilEraserFilled
+};
 var i18n4 = {
   en: {
     clicker: "clicker",
     selector: "selector",
     pencil: "pencil",
     eraser: "eraser",
+    pencilEraser: "eraser",
     text: "text",
     shapes: "shapes",
     clear: "clear",
@@ -5519,6 +5669,7 @@ var i18n4 = {
     selector: "\u9009\u62E9",
     pencil: "\u94C5\u7B14",
     eraser: "\u6A61\u76AE",
+    pencilEraser: "\u677F\u64E6",
     text: "\u6587\u5B57",
     shapes: "\u5F62\u72B6",
     clear: "\u6E05\u5C4F",
@@ -5588,7 +5739,7 @@ var AppsInToolbar = class {
     this._listeners.forEach((fn) => fn(this._data));
   }
 };
-var apps = new AppsInToolbar([]);
+var stockedApps = new AppsInToolbar([]);
 // src/components/Toolbar/components/helper.ts
 function tooltip(text2, hotkey) {
@@ -5607,7 +5758,7 @@ function tooltip(text2, hotkey) {
 }
 // src/components/Toolbar/components/Slider.svelte
-function create_fragment49(ctx) {
+function create_fragment51(ctx) {
   let div;
   let input;
   let input_class_value;
@@ -5695,7 +5846,7 @@ function create_fragment49(ctx) {
   };
 }
 var name4 = "fastboard-slider";
-function instance49($$self, $$props, $$invalidate) {
+function instance51($$self, $$props, $$invalidate) {
   let percent;
   const dispatch = createEventDispatcher();
   let { class: className = "" } = $$props;
@@ -5764,7 +5915,7 @@ function instance49($$self, $$props, $$invalidate) {
 var Slider = 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: 1,
       theme: 2,
       min: 3,
@@ -5778,7 +5929,7 @@ var Slider = class extends SvelteComponent {
 var Slider_default = Slider;
 // src/components/Toolbar/components/StrokeWidth.svelte
-function create_fragment50(ctx) {
+function create_fragment52(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -5825,7 +5976,7 @@ function create_fragment50(ctx) {
     }
   };
 }
-function instance50($$self, $$props, $$invalidate) {
+function instance52($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -5870,7 +6021,7 @@ function instance50($$self, $$props, $$invalidate) {
 var StrokeWidth = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance50, create_fragment50, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance52, create_fragment52, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var StrokeWidth_default = StrokeWidth;
@@ -5924,7 +6075,7 @@ function create_each_block(key_1, ctx) {
     }
   };
 }
-function create_fragment51(ctx) {
+function create_fragment53(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -5981,7 +6132,7 @@ function create_fragment51(ctx) {
 function is_equal_color(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance51($$self, $$props, $$invalidate) {
+function instance53($$self, $$props, $$invalidate) {
   let memberState;
   let strokeColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
@@ -6019,11 +6170,113 @@ function instance51($$self, $$props, $$invalidate) {
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance51, create_fragment51, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance53, create_fragment53, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
   }
 };
 var StrokeColor_default = StrokeColor;
+// src/components/Toolbar/components/PencilEraserSize.svelte
+function create_fragment54(ctx) {
+  let slider;
+  let current;
+  const slider_spread_levels = [
+    {
+      class: "fastboard-toolbar-slider pencil-eraser-size"
+    },
+    ctx[0],
+    { min: 1 },
+    { max: 3 },
+    { step: 1 }
+  ];
+  let slider_props = {};
+  for (let i = 0; i < slider_spread_levels.length; i += 1) {
+    slider_props = assign(slider_props, slider_spread_levels[i]);
+  }
+  slider = new Slider_default({ props: slider_props });
+  slider.$on("change", ctx[2]);
+  return {
+    c() {
+      create_component(slider.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(slider, target, anchor);
+      current = true;
+    },
+    p(ctx2, [dirty]) {
+      const slider_changes = dirty & 1 ? get_spread_update(slider_spread_levels, [
+        slider_spread_levels[0],
+        get_spread_object(ctx2[0]),
+        slider_spread_levels[2],
+        slider_spread_levels[3],
+        slider_spread_levels[4]
+      ]) : {};
+      slider.$set(slider_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(slider.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(slider.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(slider, detaching);
+    }
+  };
+}
+function instance54($$self, $$props, $$invalidate) {
+  let memberState;
+  let value;
+  let props;
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
+  $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
+  let { app = null } = $$props;
+  let { theme = "light" } = $$props;
+  let { disabled = false } = $$props;
+  function set_pencil_eraser_size({ detail: value2 }) {
+    app?.setPencilEraserSize(value2);
+  }
+  $$self.$$set = ($$props2) => {
+    if ("app" in $$props2)
+      $$invalidate(3, app = $$props2.app);
+    if ("theme" in $$props2)
+      $$invalidate(4, theme = $$props2.theme);
+    if ("disabled" in $$props2)
+      $$invalidate(5, disabled = $$props2.disabled);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & 8) {
+      $$subscribe_memberState($$invalidate(1, memberState = app?.memberState));
+    }
+    if ($$self.$$.dirty & 128) {
+      $$invalidate(6, value = $memberState?.pencilEraserSize ?? 1);
+    }
+    if ($$self.$$.dirty & 112) {
+      $$invalidate(0, props = { value, theme, disabled });
+    }
+  };
+  return [
+    props,
+    memberState,
+    set_pencil_eraser_size,
+    app,
+    theme,
+    disabled,
+    value,
+    $memberState
+  ];
+}
+var PencilEraserSize = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance54, create_fragment54, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+  }
+};
+var PencilEraserSize_default = PencilEraserSize;
 // src/components/Toolbar/components/TextColor.svelte
 function get_each_context2(ctx, list, i) {
   const child_ctx = ctx.slice();
@@ -6073,7 +6326,7 @@ function create_each_block2(key_1, ctx) {
     }
   };
 }
-function create_fragment52(ctx) {
+function create_fragment55(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6130,7 +6383,7 @@ function create_fragment52(ctx) {
 function is_equal_color2(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance52($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let memberState;
   let textColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
@@ -6168,7 +6421,7 @@ function instance52($$self, $$props, $$invalidate) {
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance52, create_fragment52, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance55, create_fragment55, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
   }
 };
 var TextColor_default = TextColor;
@@ -6422,7 +6675,7 @@ function create_each_block3(key_1, ctx) {
     }
   };
 }
-function create_fragment53(ctx) {
+function create_fragment56(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6514,7 +6767,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance53($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -6593,7 +6846,7 @@ function instance53($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, {
+    init(this, options, instance56, create_fragment56, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -6606,34 +6859,34 @@ var Shapes_default = Shapes;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[41] = list[i];
-  const constants_0 = child_ctx[41];
-  child_ctx[42] = constants_0.icon;
-  child_ctx[43] = constants_0.label;
-  child_ctx[44] = constants_0.kind;
-  child_ctx[45] = constants_0.onClick;
-  const constants_1 = child_ctx[20] && child_ctx[20][child_ctx[44]];
-  child_ctx[46] = constants_1;
+  child_ctx[47] = list[i];
+  const constants_0 = child_ctx[47];
+  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 = child_ctx[23] && child_ctx[23][child_ctx[50]];
+  child_ctx[52] = constants_1;
   const constants_2 = () => {
-    child_ctx[0] && child_ctx[45](child_ctx[0]);
+    child_ctx[0] && child_ctx[51](child_ctx[0]);
     tippy_hide_all();
   };
-  child_ctx[47] = constants_2;
+  child_ctx[53] = constants_2;
   return child_ctx;
 }
-function create_if_block_8(ctx) {
+function create_if_block_17(ctx) {
   let button;
   let current;
-  const button_spread_levels = [{ class: "scroll-up" }, ctx[15]];
+  const button_spread_levels = [{ class: "scroll-up" }, ctx[18]];
   let button_props = {
-    $$slots: { default: [create_default_slot_9] },
+    $$slots: { default: [create_default_slot_132] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
     button_props = assign(button_props, button_spread_levels[i]);
   }
   button = new Button_default({ props: button_props });
-  button.$on("click", ctx[22]);
+  button.$on("click", ctx[25]);
   return {
     c() {
       create_component(button.$$.fragment);
@@ -6643,8 +6896,8 @@ function create_if_block_8(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 32768 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(ctx2[15])]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
+      const button_changes = dirty[0] & 262144 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(ctx2[18])]) : {};
+      if (dirty[0] & 2 | dirty[1] & 33554432) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -6664,7 +6917,7 @@ function create_if_block_8(ctx) {
     }
   };
 }
-function create_default_slot_9(ctx) {
+function create_default_slot_132(ctx) {
   let icons_up;
   let current;
   icons_up = new Icons_default.Up({ props: { theme: ctx[1] } });
@@ -6697,7 +6950,7 @@ function create_default_slot_9(ctx) {
     }
   };
 }
-function create_else_block_5(ctx) {
+function create_else_block_10(ctx) {
   let icons_click;
   let current;
   icons_click = new Icons_default.Click({ props: { theme: ctx[1] } });
@@ -6730,7 +6983,7 @@ function create_else_block_5(ctx) {
     }
   };
 }
-function create_if_block_7(ctx) {
+function create_if_block_16(ctx) {
   let icons_clickfilled;
   let current;
   icons_clickfilled = new Icons_default.ClickFilled({
@@ -6765,12 +7018,12 @@ function create_if_block_7(ctx) {
     }
   };
 }
-function create_default_slot_8(ctx) {
+function create_default_slot_122(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_7, create_else_block_5];
+  const if_block_creators = [create_if_block_16, create_else_block_10];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (ctx2[8] === "clicker")
@@ -6828,7 +7081,7 @@ function create_default_slot_8(ctx) {
     }
   };
 }
-function create_else_block_4(ctx) {
+function create_else_block_9(ctx) {
   let icons_selector;
   let current;
   icons_selector = new Icons_default.Selector({ props: { theme: ctx[1] } });
@@ -6861,7 +7114,7 @@ function create_else_block_4(ctx) {
     }
   };
 }
-function create_if_block_6(ctx) {
+function create_if_block_15(ctx) {
   let icons_selectorfilled;
   let current;
   icons_selectorfilled = new Icons_default.SelectorFilled({
@@ -6896,12 +7149,12 @@ function create_if_block_6(ctx) {
     }
   };
 }
-function create_default_slot_7(ctx) {
+function create_default_slot_11(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_6, create_else_block_4];
+  const if_block_creators = [create_if_block_15, create_else_block_9];
   const if_blocks = [];
   function select_block_type_1(ctx2, dirty) {
     if (ctx2[8] === "selector")
@@ -6959,7 +7212,7 @@ function create_default_slot_7(ctx) {
     }
   };
 }
-function create_else_block_3(ctx) {
+function create_else_block_8(ctx) {
   let icons_pencil;
   let current;
   icons_pencil = new Icons_default.Pencil({ props: { theme: ctx[1] } });
@@ -6992,7 +7245,7 @@ function create_else_block_3(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_14(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -7027,12 +7280,12 @@ function create_if_block_5(ctx) {
     }
   };
 }
-function create_default_slot_6(ctx) {
+function create_default_slot_10(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_5, create_else_block_3];
+  const if_block_creators = [create_if_block_14, create_else_block_8];
   const if_blocks = [];
   function select_block_type_2(ctx2, dirty) {
     if (ctx2[8] === "pencil")
@@ -7090,7 +7343,7 @@ function create_default_slot_6(ctx) {
     }
   };
 }
-function create_else_block_2(ctx) {
+function create_else_block_7(ctx) {
   let icons_text;
   let current;
   icons_text = new Icons_default.Text({ props: { theme: ctx[1] } });
@@ -7123,7 +7376,7 @@ function create_else_block_2(ctx) {
     }
   };
 }
-function create_if_block_4(ctx) {
+function create_if_block_13(ctx) {
   let icons_textfilled;
   let current;
   icons_textfilled = new Icons_default.TextFilled({
@@ -7158,12 +7411,12 @@ function create_if_block_4(ctx) {
     }
   };
 }
-function create_default_slot_53(ctx) {
+function create_default_slot_9(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_4, create_else_block_2];
+  const if_block_creators = [create_if_block_13, create_else_block_7];
   const if_blocks = [];
   function select_block_type_3(ctx2, dirty) {
     if (ctx2[8] === "text")
@@ -7221,11 +7474,11 @@ function create_default_slot_53(ctx) {
     }
   };
 }
-function create_else_block_12(ctx) {
+function create_else_block_6(ctx) {
   let switch_instance;
   let switch_instance_anchor;
   let current;
-  var switch_value = shapesIcon[ctx[10]];
+  var switch_value = shapesIcon[ctx[11]];
   function switch_props(ctx2) {
     return { props: { theme: ctx2[1] } };
   }
@@ -7249,7 +7502,7 @@ function create_else_block_12(ctx) {
       const switch_instance_changes = {};
       if (dirty[0] & 2)
         switch_instance_changes.theme = ctx2[1];
-      if (switch_value !== (switch_value = shapesIcon[ctx2[10]])) {
+      if (switch_value !== (switch_value = shapesIcon[ctx2[11]])) {
         if (switch_instance) {
           group_outros();
           const old_component = switch_instance;
@@ -7290,11 +7543,11 @@ function create_else_block_12(ctx) {
     }
   };
 }
-function create_if_block_3(ctx) {
+function create_if_block_12(ctx) {
   let switch_instance;
   let switch_instance_anchor;
   let current;
-  var switch_value = shapesIconActive[ctx[10]];
+  var switch_value = shapesIconActive[ctx[11]];
   function switch_props(ctx2) {
     return {
       props: { theme: ctx2[1], active: true }
@@ -7320,7 +7573,7 @@ function create_if_block_3(ctx) {
       const switch_instance_changes = {};
       if (dirty[0] & 2)
         switch_instance_changes.theme = ctx2[1];
-      if (switch_value !== (switch_value = shapesIconActive[ctx2[10]])) {
+      if (switch_value !== (switch_value = shapesIconActive[ctx2[11]])) {
         if (switch_instance) {
           group_outros();
           const old_component = switch_instance;
@@ -7361,15 +7614,15 @@ function create_if_block_3(ctx) {
     }
   };
 }
-function create_default_slot_43(ctx) {
+function create_default_slot_8(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_3, create_else_block_12];
+  const if_block_creators = [create_if_block_12, create_else_block_6];
   const if_blocks = [];
   function select_block_type_4(ctx2, dirty) {
-    if (ctx2[8] === ctx2[10] || ctx2[8] === "shape" && ctx2[7] === ctx2[10])
+    if (ctx2[8] === ctx2[11] || ctx2[8] === "shape" && ctx2[9] === ctx2[11])
       return 0;
     return 1;
   }
@@ -7424,87 +7677,316 @@ function create_default_slot_43(ctx) {
     }
   };
 }
-function create_else_block6(ctx) {
-  let icons_eraser;
+function create_else_block_4(ctx) {
+  let button;
   let current;
-  icons_eraser = new Icons_default.Eraser({ props: { theme: ctx[1] } });
+  const button_spread_levels = [
+    { class: "eraser" },
+    ctx[18],
+    {
+      content: ctx[10][ctx[12]]
+    },
+    { menu: ctx[16] }
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_7] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  button.$on("click", ctx[32]);
   return {
     c() {
-      create_component(icons_eraser.$$.fragment);
+      create_component(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_eraser, target, anchor);
+      mount_component(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_eraser_changes = {};
-      if (dirty[0] & 2)
-        icons_eraser_changes.theme = ctx2[1];
-      icons_eraser.$set(icons_eraser_changes);
+      const button_changes = dirty[0] & 332800 ? get_spread_update(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 5120 && {
+          content: ctx2[10][ctx2[12]]
+        },
+        dirty[0] & 65536 && { menu: ctx2[16] }
+      ]) : {};
+      if (dirty[0] & 4354 | dirty[1] & 33554432) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_eraser.$$.fragment, local);
+      transition_in(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_eraser.$$.fragment, local);
+      transition_out(button.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_eraser, detaching);
+      destroy_component(button, detaching);
     }
   };
 }
-function create_if_block_2(ctx) {
-  let icons_eraserfilled;
+function create_if_block_9(ctx) {
+  let button;
   let current;
-  icons_eraserfilled = new Icons_default.EraserFilled({
-    props: { theme: ctx[1], active: true }
-  });
+  const button_spread_levels = [
+    { class: "eraser" },
+    ctx[18],
+    { content: ctx[21].pencilEraser },
+    { menu: ctx[16] }
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_6] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  button.$on("click", ctx[34]);
   return {
     c() {
-      create_component(icons_eraserfilled.$$.fragment);
+      create_component(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_eraserfilled, target, anchor);
+      mount_component(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_eraserfilled_changes = {};
-      if (dirty[0] & 2)
-        icons_eraserfilled_changes.theme = ctx2[1];
-      icons_eraserfilled.$set(icons_eraserfilled_changes);
+      const button_changes = dirty[0] & 2424832 ? get_spread_update(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].pencilEraser },
+        dirty[0] & 65536 && { menu: ctx2[16] }
+      ]) : {};
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_eraserfilled.$$.fragment, local);
+      transition_in(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_eraserfilled.$$.fragment, local);
+      transition_out(button.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_eraserfilled, detaching);
+      destroy_component(button, detaching);
     }
   };
 }
-function create_default_slot_34(ctx) {
-  let current_block_type_index;
-  let if_block;
-  let if_block_anchor;
+function create_if_block_7(ctx) {
+  let button;
   let current;
-  const if_block_creators = [create_if_block_2, create_else_block6];
+  const button_spread_levels = [{ class: "eraser" }, ctx[18], { content: ctx[21].eraser }];
+  let button_props = {
+    $$slots: { default: [create_default_slot_53] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  button.$on("click", ctx[33]);
+  return {
+    c() {
+      create_component(button.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button_changes = dirty[0] & 2359296 ? get_spread_update(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].eraser }
+      ]) : {};
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
+function create_else_block_5(ctx) {
+  let switch_instance;
+  let switch_instance_anchor;
+  let current;
+  var switch_value = eraserIcon[ctx[12]];
+  function switch_props(ctx2) {
+    return { props: { theme: ctx2[1] } };
+  }
+  if (switch_value) {
+    switch_instance = new switch_value(switch_props(ctx));
+  }
+  return {
+    c() {
+      if (switch_instance)
+        create_component(switch_instance.$$.fragment);
+      switch_instance_anchor = empty();
+    },
+    m(target, anchor) {
+      if (switch_instance) {
+        mount_component(switch_instance, target, anchor);
+      }
+      insert(target, switch_instance_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const switch_instance_changes = {};
+      if (dirty[0] & 2)
+        switch_instance_changes.theme = ctx2[1];
+      if (switch_value !== (switch_value = eraserIcon[ctx2[12]])) {
+        if (switch_instance) {
+          group_outros();
+          const old_component = switch_instance;
+          transition_out(old_component.$$.fragment, 1, 0, () => {
+            destroy_component(old_component, 1);
+          });
+          check_outros();
+        }
+        if (switch_value) {
+          switch_instance = new switch_value(switch_props(ctx2));
+          create_component(switch_instance.$$.fragment);
+          transition_in(switch_instance.$$.fragment, 1);
+          mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
+        } else {
+          switch_instance = null;
+        }
+      } else if (switch_value) {
+        switch_instance.$set(switch_instance_changes);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      if (switch_instance)
+        transition_in(switch_instance.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      if (switch_instance)
+        transition_out(switch_instance.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      if (detaching)
+        detach(switch_instance_anchor);
+      if (switch_instance)
+        destroy_component(switch_instance, detaching);
+    }
+  };
+}
+function create_if_block_11(ctx) {
+  let switch_instance;
+  let switch_instance_anchor;
+  let current;
+  var switch_value = eraserIconActive[ctx[12]];
+  function switch_props(ctx2) {
+    return {
+      props: { theme: ctx2[1], active: true }
+    };
+  }
+  if (switch_value) {
+    switch_instance = new switch_value(switch_props(ctx));
+  }
+  return {
+    c() {
+      if (switch_instance)
+        create_component(switch_instance.$$.fragment);
+      switch_instance_anchor = empty();
+    },
+    m(target, anchor) {
+      if (switch_instance) {
+        mount_component(switch_instance, target, anchor);
+      }
+      insert(target, switch_instance_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const switch_instance_changes = {};
+      if (dirty[0] & 2)
+        switch_instance_changes.theme = ctx2[1];
+      if (switch_value !== (switch_value = eraserIconActive[ctx2[12]])) {
+        if (switch_instance) {
+          group_outros();
+          const old_component = switch_instance;
+          transition_out(old_component.$$.fragment, 1, 0, () => {
+            destroy_component(old_component, 1);
+          });
+          check_outros();
+        }
+        if (switch_value) {
+          switch_instance = new switch_value(switch_props(ctx2));
+          create_component(switch_instance.$$.fragment);
+          transition_in(switch_instance.$$.fragment, 1);
+          mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
+        } else {
+          switch_instance = null;
+        }
+      } else if (switch_value) {
+        switch_instance.$set(switch_instance_changes);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      if (switch_instance)
+        transition_in(switch_instance.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      if (switch_instance)
+        transition_out(switch_instance.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      if (detaching)
+        detach(switch_instance_anchor);
+      if (switch_instance)
+        destroy_component(switch_instance, detaching);
+    }
+  };
+}
+function create_default_slot_7(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_11, create_else_block_5];
   const if_blocks = [];
-  function select_block_type_5(ctx2, dirty) {
-    if (ctx2[8] === "eraser")
+  function select_block_type_8(ctx2, dirty) {
+    if (ctx2[8] === ctx2[12])
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_5(ctx);
+  current_block_type_index = select_block_type_8(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7518,7 +8000,7 @@ function create_default_slot_34(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_5(ctx2);
+      current_block_type_index = select_block_type_8(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7555,204 +8037,960 @@ function create_default_slot_34(ctx) {
     }
   };
 }
-function create_default_slot_24(ctx) {
-  let icons_clear;
+function create_else_block_3(ctx) {
+  let icons_pencileraser;
   let current;
-  icons_clear = new Icons_default.Clear({ props: { theme: ctx[1] } });
+  icons_pencileraser = new Icons_default.PencilEraser({ props: { theme: ctx[1] } });
   return {
     c() {
-      create_component(icons_clear.$$.fragment);
+      create_component(icons_pencileraser.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_clear, target, anchor);
+      mount_component(icons_pencileraser, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_clear_changes = {};
+      const icons_pencileraser_changes = {};
       if (dirty[0] & 2)
-        icons_clear_changes.theme = ctx2[1];
-      icons_clear.$set(icons_clear_changes);
+        icons_pencileraser_changes.theme = ctx2[1];
+      icons_pencileraser.$set(icons_pencileraser_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_clear.$$.fragment, local);
+      transition_in(icons_pencileraser.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_clear.$$.fragment, local);
+      transition_out(icons_pencileraser.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_clear, detaching);
+      destroy_component(icons_pencileraser, detaching);
     }
   };
 }
-function create_if_block_12(ctx) {
-  let button;
+function create_if_block_10(ctx) {
+  let icons_pencileraserfilled;
   let current;
-  const button_spread_levels = [
-    { class: "apps" },
-    ctx[15],
-    { content: ctx[9].apps },
-    { menu: ctx[14] },
-    { menu_placement: "right-end" }
-  ];
-  let button_props = {
-    $$slots: { default: [create_default_slot_14] },
-    $$scope: { ctx }
-  };
-  for (let i = 0; i < button_spread_levels.length; i += 1) {
-    button_props = assign(button_props, button_spread_levels[i]);
-  }
-  button = new Button_default({ props: button_props });
+  icons_pencileraserfilled = new Icons_default.PencilEraserFilled({
+    props: { theme: ctx[1], active: true }
+  });
   return {
     c() {
-      create_component(button.$$.fragment);
+      create_component(icons_pencileraserfilled.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(button, target, anchor);
+      mount_component(icons_pencileraserfilled, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 49664 ? get_spread_update(button_spread_levels, [
-        button_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 512 && { content: ctx2[9].apps },
-        dirty[0] & 16384 && { menu: ctx2[14] },
-        button_spread_levels[4]
-      ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
-        button_changes.$$scope = { dirty, ctx: ctx2 };
-      }
-      button.$set(button_changes);
+      const icons_pencileraserfilled_changes = {};
+      if (dirty[0] & 2)
+        icons_pencileraserfilled_changes.theme = ctx2[1];
+      icons_pencileraserfilled.$set(icons_pencileraserfilled_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(button.$$.fragment, local);
+      transition_in(icons_pencileraserfilled.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(button.$$.fragment, local);
+      transition_out(icons_pencileraserfilled.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(button, detaching);
+      destroy_component(icons_pencileraserfilled, detaching);
     }
   };
 }
-function create_default_slot_14(ctx) {
-  let icons_apps;
+function create_default_slot_6(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
   let current;
-  icons_apps = new Icons_default.Apps({ props: { theme: ctx[1] } });
+  const if_block_creators = [create_if_block_10, create_else_block_3];
+  const if_blocks = [];
+  function select_block_type_7(ctx2, dirty) {
+    if (ctx2[8] === "pencilEraser")
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_7(ctx);
+  if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
-      create_component(icons_apps.$$.fragment);
+      if_block.c();
+      if_block_anchor = empty();
     },
     m(target, anchor) {
-      mount_component(icons_apps, target, anchor);
+      if_blocks[current_block_type_index].m(target, anchor);
+      insert(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_apps_changes = {};
-      if (dirty[0] & 2)
-        icons_apps_changes.theme = ctx2[1];
-      icons_apps.$set(icons_apps_changes);
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_7(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block = if_blocks[current_block_type_index];
+        if (!if_block) {
+          if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block.c();
+        } else {
+          if_block.p(ctx2, dirty);
+        }
+        transition_in(if_block, 1);
+        if_block.m(if_block_anchor.parentNode, if_block_anchor);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if_blocks[current_block_type_index].d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function create_else_block_2(ctx) {
+  let icons_eraser;
+  let current;
+  icons_eraser = new Icons_default.Eraser({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_eraser.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_eraser, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_eraser_changes = {};
+      if (dirty[0] & 2)
+        icons_eraser_changes.theme = ctx2[1];
+      icons_eraser.$set(icons_eraser_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_eraser.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_eraser.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_eraser, detaching);
+    }
+  };
+}
+function create_if_block_8(ctx) {
+  let icons_eraserfilled;
+  let current;
+  icons_eraserfilled = new Icons_default.EraserFilled({
+    props: { theme: ctx[1], active: true }
+  });
+  return {
+    c() {
+      create_component(icons_eraserfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_eraserfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_eraserfilled_changes = {};
+      if (dirty[0] & 2)
+        icons_eraserfilled_changes.theme = ctx2[1];
+      icons_eraserfilled.$set(icons_eraserfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_eraserfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_eraserfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_eraserfilled, detaching);
+    }
+  };
+}
+function create_default_slot_53(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_8, create_else_block_2];
+  const if_blocks = [];
+  function select_block_type_6(ctx2, dirty) {
+    if (ctx2[8] === "eraser")
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_6(ctx);
+  if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+  return {
+    c() {
+      if_block.c();
+      if_block_anchor = empty();
+    },
+    m(target, anchor) {
+      if_blocks[current_block_type_index].m(target, anchor);
+      insert(target, if_block_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_6(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block = if_blocks[current_block_type_index];
+        if (!if_block) {
+          if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block.c();
+        } else {
+          if_block.p(ctx2, dirty);
+        }
+        transition_in(if_block, 1);
+        if_block.m(if_block_anchor.parentNode, if_block_anchor);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if_blocks[current_block_type_index].d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function create_default_slot_43(ctx) {
+  let icons_clear;
+  let current;
+  icons_clear = new Icons_default.Clear({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_clear.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_clear, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_clear_changes = {};
+      if (dirty[0] & 2)
+        icons_clear_changes.theme = ctx2[1];
+      icons_clear.$set(icons_clear_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_clear.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_clear.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_clear, detaching);
+    }
+  };
+}
+function create_if_block_6(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: "apps" },
+    ctx[18],
+    { content: ctx[10].apps },
+    { menu: ctx[17] },
+    { menu_placement: "right-end" }
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_34] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  return {
+    c() {
+      create_component(button.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button_changes = dirty[0] & 394240 ? get_spread_update(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 1024 && { content: ctx2[10].apps },
+        dirty[0] & 131072 && { menu: ctx2[17] },
+        button_spread_levels[4]
+      ]) : {};
+      if (dirty[0] & 2 | dirty[1] & 33554432) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
+function create_default_slot_34(ctx) {
+  let icons_apps;
+  let current;
+  icons_apps = new Icons_default.Apps({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_apps.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_apps, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_apps_changes = {};
+      if (dirty[0] & 2)
+        icons_apps_changes.theme = ctx2[1];
+      icons_apps.$set(icons_apps_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_apps.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_apps.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_apps, detaching);
+    }
+  };
+}
+function create_if_block_5(ctx) {
+  let button;
+  let current;
+  button = new Button_default({
+    props: {
+      class: "scroll-down",
+      name: name5,
+      theme: ctx[1],
+      disabled: ctx[3],
+      $$slots: { default: [create_default_slot_24] },
+      $$scope: { ctx }
+    }
+  });
+  button.$on("click", ctx[26]);
+  return {
+    c() {
+      create_component(button.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button_changes = {};
+      if (dirty[0] & 2)
+        button_changes.theme = ctx2[1];
+      if (dirty[0] & 8)
+        button_changes.disabled = ctx2[3];
+      if (dirty[0] & 2 | dirty[1] & 33554432) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
+function create_default_slot_24(ctx) {
+  let icons_down;
+  let current;
+  icons_down = new Icons_default.Down({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_down.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_down, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_down_changes = {};
+      if (dirty[0] & 2)
+        icons_down_changes.theme = ctx2[1];
+      icons_down.$set(icons_down_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_down.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_down.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_down, detaching);
+    }
+  };
+}
+function create_if_block_4(ctx) {
+  let pencilerasersize;
+  let current;
+  pencilerasersize = new PencilEraserSize_default({
+    props: {
+      app: ctx[0],
+      theme: ctx[1],
+      disabled: ctx[3]
+    }
+  });
+  return {
+    c() {
+      create_component(pencilerasersize.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(pencilerasersize, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const pencilerasersize_changes = {};
+      if (dirty[0] & 1)
+        pencilerasersize_changes.app = ctx2[0];
+      if (dirty[0] & 2)
+        pencilerasersize_changes.theme = ctx2[1];
+      if (dirty[0] & 8)
+        pencilerasersize_changes.disabled = ctx2[3];
+      pencilerasersize.$set(pencilerasersize_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(pencilerasersize.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(pencilerasersize.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(pencilerasersize, detaching);
+    }
+  };
+}
+function create_if_block6(ctx) {
+  let div;
+  let button0;
+  let t0;
+  let button1;
+  let t1;
+  let if_block_anchor;
+  let current;
+  const button0_spread_levels = [
+    { class: "eraser" },
+    ctx[18],
+    { placement: "top" },
+    {
+      content: ctx[21].pencilEraserForPanel
+    }
+  ];
+  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", ctx[34]);
+  const button1_spread_levels = [
+    { class: "eraser" },
+    ctx[18],
+    { placement: "top" },
+    { content: ctx[21].eraserForPanel }
+  ];
+  let button1_props = {
+    $$slots: { default: [create_default_slot4] },
+    $$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", ctx[33]);
+  let if_block = ctx[8] === "pencilEraser" && create_if_block_18(ctx);
+  return {
+    c() {
+      div = element("div");
+      create_component(button0.$$.fragment);
+      t0 = space();
+      create_component(button1.$$.fragment);
+      t1 = space();
+      if (if_block)
+        if_block.c();
+      if_block_anchor = empty();
+      attr(div, "class", name5 + "-panel-btns");
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      mount_component(button0, div, null);
+      append(div, t0);
+      mount_component(button1, div, null);
+      insert(target, t1, anchor);
+      if (if_block)
+        if_block.m(target, anchor);
+      insert(target, if_block_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button0_changes = dirty[0] & 2359296 ? get_spread_update(button0_spread_levels, [
+        button0_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        button0_spread_levels[2],
+        dirty[0] & 2097152 && {
+          content: ctx2[21].pencilEraserForPanel
+        }
+      ]) : {};
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
+        button0_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button0.$set(button0_changes);
+      const button1_changes = dirty[0] & 2359296 ? get_spread_update(button1_spread_levels, [
+        button1_spread_levels[0],
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        button1_spread_levels[2],
+        dirty[0] & 2097152 && { content: ctx2[21].eraserForPanel }
+      ]) : {};
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
+        button1_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button1.$set(button1_changes);
+      if (ctx2[8] === "pencilEraser") {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+          if (dirty[0] & 256) {
+            transition_in(if_block, 1);
+          }
+        } else {
+          if_block = create_if_block_18(ctx2);
+          if_block.c();
+          transition_in(if_block, 1);
+          if_block.m(if_block_anchor.parentNode, if_block_anchor);
+        }
+      } else if (if_block) {
+        group_outros();
+        transition_out(if_block, 1, 1, () => {
+          if_block = null;
+        });
+        check_outros();
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button0.$$.fragment, local);
+      transition_in(button1.$$.fragment, local);
+      transition_in(if_block);
+      current = true;
+    },
+    o(local) {
+      transition_out(button0.$$.fragment, local);
+      transition_out(button1.$$.fragment, local);
+      transition_out(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if (detaching)
+        detach(div);
+      destroy_component(button0);
+      destroy_component(button1);
+      if (detaching)
+        detach(t1);
+      if (if_block)
+        if_block.d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function create_else_block_12(ctx) {
+  let icons_pencileraser;
+  let current;
+  icons_pencileraser = new Icons_default.PencilEraser({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_pencileraser.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencileraser, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencileraser_changes = {};
+      if (dirty[0] & 2)
+        icons_pencileraser_changes.theme = ctx2[1];
+      icons_pencileraser.$set(icons_pencileraser_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencileraser.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencileraser.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencileraser, detaching);
+    }
+  };
+}
+function create_if_block_3(ctx) {
+  let icons_pencileraserfilled;
+  let current;
+  icons_pencileraserfilled = new Icons_default.PencilEraserFilled({
+    props: { theme: ctx[1], active: true }
+  });
+  return {
+    c() {
+      create_component(icons_pencileraserfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencileraserfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencileraserfilled_changes = {};
+      if (dirty[0] & 2)
+        icons_pencileraserfilled_changes.theme = ctx2[1];
+      icons_pencileraserfilled.$set(icons_pencileraserfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencileraserfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencileraserfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencileraserfilled, detaching);
+    }
+  };
+}
+function create_default_slot_14(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_3, create_else_block_12];
+  const if_blocks = [];
+  function select_block_type_10(ctx2, dirty) {
+    if (ctx2[8] === "pencilEraser")
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_10(ctx);
+  if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+  return {
+    c() {
+      if_block.c();
+      if_block_anchor = empty();
+    },
+    m(target, anchor) {
+      if_blocks[current_block_type_index].m(target, anchor);
+      insert(target, if_block_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_10(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block = if_blocks[current_block_type_index];
+        if (!if_block) {
+          if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block.c();
+        } else {
+          if_block.p(ctx2, dirty);
+        }
+        transition_in(if_block, 1);
+        if_block.m(if_block_anchor.parentNode, if_block_anchor);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if_blocks[current_block_type_index].d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function create_else_block6(ctx) {
+  let icons_eraser;
+  let current;
+  icons_eraser = new Icons_default.Eraser({ props: { theme: ctx[1] } });
+  return {
+    c() {
+      create_component(icons_eraser.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_eraser, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_eraser_changes = {};
+      if (dirty[0] & 2)
+        icons_eraser_changes.theme = ctx2[1];
+      icons_eraser.$set(icons_eraser_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_eraser.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_eraser.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_eraser, detaching);
+    }
+  };
+}
+function create_if_block_2(ctx) {
+  let icons_eraserfilled;
+  let current;
+  icons_eraserfilled = new Icons_default.EraserFilled({
+    props: { theme: ctx[1], active: true }
+  });
+  return {
+    c() {
+      create_component(icons_eraserfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_eraserfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_eraserfilled_changes = {};
+      if (dirty[0] & 2)
+        icons_eraserfilled_changes.theme = ctx2[1];
+      icons_eraserfilled.$set(icons_eraserfilled_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_apps.$$.fragment, local);
+      transition_in(icons_eraserfilled.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_apps.$$.fragment, local);
+      transition_out(icons_eraserfilled.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_apps, detaching);
+      destroy_component(icons_eraserfilled, detaching);
     }
   };
 }
-function create_if_block6(ctx) {
-  let button;
+function create_default_slot4(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
   let current;
-  button = new Button_default({
-    props: {
-      class: "scroll-down",
-      name: name5,
-      theme: ctx[1],
-      disabled: ctx[3],
-      $$slots: { default: [create_default_slot4] },
-      $$scope: { ctx }
-    }
-  });
-  button.$on("click", ctx[23]);
+  const if_block_creators = [create_if_block_2, create_else_block6];
+  const if_blocks = [];
+  function select_block_type_11(ctx2, dirty) {
+    if (ctx2[8] === "eraser")
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_11(ctx);
+  if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
-      create_component(button.$$.fragment);
+      if_block.c();
+      if_block_anchor = empty();
     },
     m(target, anchor) {
-      mount_component(button, target, anchor);
+      if_blocks[current_block_type_index].m(target, anchor);
+      insert(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = {};
-      if (dirty[0] & 2)
-        button_changes.theme = ctx2[1];
-      if (dirty[0] & 8)
-        button_changes.disabled = ctx2[3];
-      if (dirty[0] & 2 | dirty[1] & 524288) {
-        button_changes.$$scope = { dirty, ctx: ctx2 };
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_11(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block = if_blocks[current_block_type_index];
+        if (!if_block) {
+          if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block.c();
+        } else {
+          if_block.p(ctx2, dirty);
+        }
+        transition_in(if_block, 1);
+        if_block.m(if_block_anchor.parentNode, if_block_anchor);
       }
-      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(button.$$.fragment, local);
+      transition_in(if_block);
       current = true;
     },
     o(local) {
-      transition_out(button.$$.fragment, local);
+      transition_out(if_block);
       current = false;
     },
     d(detaching) {
-      destroy_component(button, detaching);
+      if_blocks[current_block_type_index].d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
     }
   };
 }
-function create_default_slot4(ctx) {
-  let icons_down;
+function create_if_block_18(ctx) {
+  let div;
+  let t_1;
+  let pencilerasersize;
   let current;
-  icons_down = new Icons_default.Down({ props: { theme: ctx[1] } });
+  pencilerasersize = new PencilEraserSize_default({
+    props: {
+      app: ctx[0],
+      theme: ctx[1],
+      disabled: ctx[3]
+    }
+  });
   return {
     c() {
-      create_component(icons_down.$$.fragment);
+      div = element("div");
+      t_1 = space();
+      create_component(pencilerasersize.$$.fragment);
+      attr(div, "class", name5 + "-panel-divider");
     },
     m(target, anchor) {
-      mount_component(icons_down, target, anchor);
+      insert(target, div, anchor);
+      insert(target, t_1, anchor);
+      mount_component(pencilerasersize, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_down_changes = {};
+      const pencilerasersize_changes = {};
+      if (dirty[0] & 1)
+        pencilerasersize_changes.app = ctx2[0];
       if (dirty[0] & 2)
-        icons_down_changes.theme = ctx2[1];
-      icons_down.$set(icons_down_changes);
+        pencilerasersize_changes.theme = ctx2[1];
+      if (dirty[0] & 8)
+        pencilerasersize_changes.disabled = ctx2[3];
+      pencilerasersize.$set(pencilerasersize_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_down.$$.fragment, local);
+      transition_in(pencilerasersize.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_down.$$.fragment, local);
+      transition_out(pencilerasersize.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_down, detaching);
+      if (detaching)
+        detach(div);
+      if (detaching)
+        detach(t_1);
+      destroy_component(pencilerasersize, detaching);
     }
   };
 }
@@ -7765,7 +9003,7 @@ function create_each_block4(ctx) {
   let img_title_value;
   let t0;
   let span;
-  let t1_value = ctx[43] + "";
+  let t1_value = ctx[49] + "";
   let t1;
   let span_class_value;
   let t2;
@@ -7784,17 +9022,17 @@ function create_each_block4(ctx) {
       t1 = text(t1_value);
       t2 = space();
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + ctx[1]);
-      if (!src_url_equal(img.src, img_src_value = ctx[42]))
+      if (!src_url_equal(img.src, img_src_value = ctx[48]))
         attr(img, "src", img_src_value);
-      attr(img, "alt", img_alt_value = ctx[44]);
-      attr(img, "title", img_title_value = ctx[43]);
+      attr(img, "alt", img_alt_value = ctx[50]);
+      attr(img, "title", img_title_value = ctx[49]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
-      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1]);
-      attr(button, "title", button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""));
-      attr(button, "data-app-kind", button_data_app_kind_value = ctx[41].kind);
-      button.disabled = button_disabled_value = ctx[46] && ctx[46].status !== "idle";
-      toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
-      toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
+      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[50] + " " + ctx[1]);
+      attr(button, "title", button_title_value = ctx[49] + (ctx[52] && ctx[52].reason ? ": " + ctx[52].reason : ""));
+      attr(button, "data-app-kind", button_data_app_kind_value = ctx[47].kind);
+      button.disabled = button_disabled_value = ctx[52] && ctx[52].status !== "idle";
+      toggle_class(button, "is-loading", ctx[52] && ctx[52].status === "loading");
+      toggle_class(button, "is-failed", ctx[52] && ctx[52].status === "failed");
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -7805,8 +9043,8 @@ function create_each_block4(ctx) {
       append(button, t2);
       if (!mounted) {
         dispose = listen(button, "click", function() {
-          if (is_function(ctx[47]))
-            ctx[47].apply(this, arguments);
+          if (is_function(ctx[53]))
+            ctx[53].apply(this, arguments);
         });
         mounted = true;
       }
@@ -7816,37 +9054,37 @@ function create_each_block4(ctx) {
       if (dirty[0] & 2 && img_class_value !== (img_class_value = name5 + "-app-btn-icon " + ctx[1])) {
         attr(img, "class", img_class_value);
       }
-      if (dirty[0] & 524288 && !src_url_equal(img.src, img_src_value = ctx[42])) {
+      if (dirty[0] & 4194304 && !src_url_equal(img.src, img_src_value = ctx[48])) {
         attr(img, "src", img_src_value);
       }
-      if (dirty[0] & 524288 && img_alt_value !== (img_alt_value = ctx[44])) {
+      if (dirty[0] & 4194304 && img_alt_value !== (img_alt_value = ctx[50])) {
         attr(img, "alt", img_alt_value);
       }
-      if (dirty[0] & 524288 && img_title_value !== (img_title_value = ctx[43])) {
+      if (dirty[0] & 4194304 && img_title_value !== (img_title_value = ctx[49])) {
         attr(img, "title", img_title_value);
       }
-      if (dirty[0] & 524288 && t1_value !== (t1_value = ctx[43] + ""))
+      if (dirty[0] & 4194304 && t1_value !== (t1_value = ctx[49] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & 2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + ctx[1])) {
         attr(span, "class", span_class_value);
       }
-      if (dirty[0] & 524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1])) {
+      if (dirty[0] & 4194306 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[50] + " " + ctx[1])) {
         attr(button, "class", button_class_value);
       }
-      if (dirty[0] & 1572864 && button_title_value !== (button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""))) {
+      if (dirty[0] & 12582912 && button_title_value !== (button_title_value = ctx[49] + (ctx[52] && ctx[52].reason ? ": " + ctx[52].reason : ""))) {
         attr(button, "title", button_title_value);
       }
-      if (dirty[0] & 524288 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[41].kind)) {
+      if (dirty[0] & 4194304 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[47].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
-      if (dirty[0] & 1572864 && button_disabled_value !== (button_disabled_value = ctx[46] && ctx[46].status !== "idle")) {
+      if (dirty[0] & 12582912 && button_disabled_value !== (button_disabled_value = ctx[52] && ctx[52].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
-      if (dirty[0] & 1572866) {
-        toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
+      if (dirty[0] & 12582914) {
+        toggle_class(button, "is-loading", ctx[52] && ctx[52].status === "loading");
       }
-      if (dirty[0] & 1572866) {
-        toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
+      if (dirty[0] & 12582914) {
+        toggle_class(button, "is-failed", ctx[52] && ctx[52].status === "failed");
       }
     },
     d(detaching) {
@@ -7857,7 +9095,7 @@ function create_each_block4(ctx) {
     }
   };
 }
-function create_fragment54(ctx) {
+function create_fragment57(ctx) {
   let t0;
   let div0;
   let button0;
@@ -7870,14 +9108,15 @@ function create_fragment54(ctx) {
   let t4;
   let button4;
   let t5;
-  let button5;
+  let current_block_type_index;
+  let if_block1;
   let t6;
-  let button6;
+  let button5;
   let t7;
   let scrollHeight_action;
   let t8;
   let t9;
-  let div8;
+  let div9;
   let div2;
   let strokewidth0;
   let t10;
@@ -7900,105 +9139,110 @@ function create_fragment54(ctx) {
   let strokecolor1;
   let t18;
   let div7;
+  let current_block_type_index_1;
+  let if_block4;
+  let t19;
+  let div8;
   let current;
   let mounted;
   let dispose;
-  let if_block0 = ctx[5] && create_if_block_8(ctx);
+  let if_block0 = ctx[5] && create_if_block_17(ctx);
   const button0_spread_levels = [
     { class: "clicker" },
-    ctx[15],
-    { content: ctx[18].clicker }
+    ctx[18],
+    { content: ctx[21].clicker }
   ];
   let button0_props = {
-    $$slots: { default: [create_default_slot_8] },
+    $$slots: { default: [create_default_slot_122] },
     $$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", ctx[24]);
+  button0.$on("click", ctx[27]);
   const button1_spread_levels = [
     { class: "selector" },
-    ctx[15],
-    { content: ctx[18].selector }
+    ctx[18],
+    { content: ctx[21].selector }
   ];
   let button1_props = {
-    $$slots: { default: [create_default_slot_7] },
+    $$slots: { default: [create_default_slot_11] },
     $$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", ctx[25]);
+  button1.$on("click", ctx[28]);
   const button2_spread_levels = [
     { class: "pencil" },
-    ctx[15],
-    { content: ctx[18].pencil },
-    { menu: ctx[11] }
+    ctx[18],
+    { content: ctx[21].pencil },
+    { menu: ctx[13] }
   ];
   let button2_props = {
-    $$slots: { default: [create_default_slot_6] },
+    $$slots: { default: [create_default_slot_10] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button2_spread_levels.length; i += 1) {
     button2_props = assign(button2_props, button2_spread_levels[i]);
   }
   button2 = new Button_default({ props: button2_props });
-  button2.$on("click", ctx[26]);
+  button2.$on("click", ctx[29]);
   const button3_spread_levels = [
     { class: "text" },
-    ctx[15],
-    { content: ctx[18].text },
-    { menu: ctx[12] }
+    ctx[18],
+    { content: ctx[21].text },
+    { menu: ctx[14] }
   ];
   let button3_props = {
-    $$slots: { default: [create_default_slot_53] },
+    $$slots: { default: [create_default_slot_9] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button3_spread_levels.length; i += 1) {
     button3_props = assign(button3_props, button3_spread_levels[i]);
   }
   button3 = new Button_default({ props: button3_props });
-  button3.$on("click", ctx[27]);
+  button3.$on("click", ctx[30]);
   const button4_spread_levels = [
     { class: "shapes" },
-    ctx[15],
-    { content: ctx[9].shapes },
-    { menu: ctx[13] }
+    ctx[18],
+    { content: ctx[10].shapes },
+    { menu: ctx[15] }
   ];
   let button4_props = {
-    $$slots: { default: [create_default_slot_43] },
+    $$slots: { default: [create_default_slot_8] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button4_spread_levels.length; i += 1) {
     button4_props = assign(button4_props, button4_spread_levels[i]);
   }
   button4 = new Button_default({ props: button4_props });
-  button4.$on("click", ctx[28]);
-  const button5_spread_levels = [{ class: "eraser" }, ctx[15], { content: ctx[18].eraser }];
+  button4.$on("click", ctx[31]);
+  const if_block_creators = [create_if_block_7, create_if_block_9, create_else_block_4];
+  const if_blocks = [];
+  function select_block_type_5(ctx2, dirty) {
+    if (ctx2[7] === "delete")
+      return 0;
+    if (ctx2[7] === "pencil")
+      return 1;
+    return 2;
+  }
+  current_block_type_index = select_block_type_5(ctx);
+  if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
+  const button5_spread_levels = [{ class: "clear" }, ctx[18], { content: ctx[10].clear }];
   let button5_props = {
-    $$slots: { default: [create_default_slot_34] },
+    $$slots: { default: [create_default_slot_43] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button5_spread_levels.length; i += 1) {
     button5_props = assign(button5_props, button5_spread_levels[i]);
   }
   button5 = new Button_default({ props: button5_props });
-  button5.$on("click", ctx[29]);
-  const button6_spread_levels = [{ class: "clear" }, ctx[15], { content: ctx[9].clear }];
-  let button6_props = {
-    $$slots: { default: [create_default_slot_24] },
-    $$scope: { ctx }
-  };
-  for (let i = 0; i < button6_spread_levels.length; i += 1) {
-    button6_props = assign(button6_props, button6_spread_levels[i]);
-  }
-  button6 = new Button_default({ props: button6_props });
-  button6.$on("click", ctx[30]);
-  let if_block1 = !ctx[6] && create_if_block_12(ctx);
-  let if_block2 = ctx[5] && create_if_block6(ctx);
+  button5.$on("click", ctx[35]);
+  let if_block2 = !ctx[6] && create_if_block_6(ctx);
+  let if_block3 = ctx[5] && create_if_block_5(ctx);
   strokewidth0 = new StrokeWidth_default({
     props: {
       app: ctx[0],
@@ -8042,7 +9286,19 @@ function create_fragment54(ctx) {
       disabled: ctx[3]
     }
   });
-  let each_value = ctx[19];
+  const if_block_creators_1 = [create_if_block6, create_if_block_4];
+  const if_blocks_1 = [];
+  function select_block_type_9(ctx2, dirty) {
+    if (ctx2[7] === "both")
+      return 0;
+    if (ctx2[7] === "pencil")
+      return 1;
+    return -1;
+  }
+  if (~(current_block_type_index_1 = select_block_type_9(ctx))) {
+    if_block4 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
+  }
+  let each_value = ctx[22];
   let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
     each_blocks[i] = create_each_block4(get_each_context4(ctx, each_value, i));
@@ -8063,17 +9319,17 @@ function create_fragment54(ctx) {
       t4 = space();
       create_component(button4.$$.fragment);
       t5 = space();
-      create_component(button5.$$.fragment);
+      if_block1.c();
       t6 = space();
-      create_component(button6.$$.fragment);
+      create_component(button5.$$.fragment);
       t7 = space();
-      if (if_block1)
-        if_block1.c();
-      t8 = space();
       if (if_block2)
         if_block2.c();
+      t8 = space();
+      if (if_block3)
+        if_block3.c();
       t9 = space();
-      div8 = element("div");
+      div9 = element("div");
       div2 = element("div");
       create_component(strokewidth0.$$.fragment);
       t10 = space();
@@ -8096,6 +9352,10 @@ function create_fragment54(ctx) {
       create_component(strokecolor1.$$.fragment);
       t18 = space();
       div7 = element("div");
+      if (if_block4)
+        if_block4.c();
+      t19 = space();
+      div8 = element("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
@@ -8107,10 +9367,11 @@ function create_fragment54(ctx) {
       attr(div4, "class", name5 + "-panel-divider");
       attr(div5, "class", name5 + "-panel-divider");
       attr(div6, "class", name5 + "-panel shapes");
-      attr(div7, "class", name5 + "-panel apps");
-      set_style(div7, "--n", ctx[19].length);
-      attr(div8, "class", name5 + "-panel-wrapper");
-      set_style(div8, "display", "none");
+      attr(div7, "class", name5 + "-panel eraser");
+      attr(div8, "class", name5 + "-panel apps");
+      set_style(div8, "--n", ctx[22].length);
+      attr(div9, "class", name5 + "-panel-wrapper");
+      set_style(div9, "display", "none");
     },
     m(target, anchor) {
       if (if_block0)
@@ -8127,30 +9388,30 @@ function create_fragment54(ctx) {
       append(div0, t4);
       mount_component(button4, div0, null);
       append(div0, t5);
-      mount_component(button5, div0, null);
+      if_blocks[current_block_type_index].m(div0, null);
       append(div0, t6);
-      mount_component(button6, div0, null);
+      mount_component(button5, div0, null);
       append(div0, t7);
-      if (if_block1)
-        if_block1.m(div0, null);
-      insert(target, t8, anchor);
       if (if_block2)
-        if_block2.m(target, anchor);
+        if_block2.m(div0, null);
+      insert(target, t8, anchor);
+      if (if_block3)
+        if_block3.m(target, anchor);
       insert(target, t9, anchor);
-      insert(target, div8, anchor);
-      append(div8, div2);
+      insert(target, div9, anchor);
+      append(div9, div2);
       mount_component(strokewidth0, div2, null);
       append(div2, t10);
       append(div2, div1);
       append(div2, t11);
       mount_component(strokecolor0, div2, null);
-      ctx[35](div2);
-      append(div8, t12);
-      append(div8, div3);
+      ctx[40](div2);
+      append(div9, t12);
+      append(div9, div3);
       mount_component(textcolor, div3, null);
-      ctx[36](div3);
-      append(div8, t13);
-      append(div8, div6);
+      ctx[41](div3);
+      append(div9, t13);
+      append(div9, div6);
       mount_component(shapes2, div6, null);
       append(div6, t14);
       append(div6, div4);
@@ -8160,18 +9421,24 @@ function create_fragment54(ctx) {
       append(div6, div5);
       append(div6, t17);
       mount_component(strokecolor1, div6, null);
-      ctx[37](div6);
-      append(div8, t18);
-      append(div8, div7);
+      ctx[42](div6);
+      append(div9, t18);
+      append(div9, div7);
+      if (~current_block_type_index_1) {
+        if_blocks_1[current_block_type_index_1].m(div7, null);
+      }
+      ctx[43](div7);
+      append(div9, t19);
+      append(div9, div8);
       for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].m(div7, null);
+        each_blocks[i].m(div8, null);
       }
-      ctx[38](div7);
+      ctx[44](div8);
       current = true;
       if (!mounted) {
         dispose = [
           action_destroyer(scrollHeight_action = scrollHeight.call(null, div0, ctx[4])),
-          action_destroyer(scrollTop.call(null, div0, ctx[21]))
+          action_destroyer(scrollTop.call(null, div0, ctx[24]))
         ];
         mounted = true;
       }
@@ -8184,7 +9451,7 @@ function create_fragment54(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_8(ctx2);
+          if_block0 = create_if_block_17(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -8196,88 +9463,99 @@ function create_fragment54(ctx) {
         });
         check_outros();
       }
-      const button0_changes = dirty[0] & 294912 ? get_spread_update(button0_spread_levels, [
+      const button0_changes = dirty[0] & 2359296 ? get_spread_update(button0_spread_levels, [
         button0_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 262144 && { content: ctx2[18].clicker }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].clicker }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      const button1_changes = dirty[0] & 294912 ? get_spread_update(button1_spread_levels, [
+      const button1_changes = dirty[0] & 2359296 ? get_spread_update(button1_spread_levels, [
         button1_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 262144 && { content: ctx2[18].selector }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].selector }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
-      const button2_changes = dirty[0] & 296960 ? get_spread_update(button2_spread_levels, [
+      const button2_changes = dirty[0] & 2367488 ? get_spread_update(button2_spread_levels, [
         button2_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 262144 && { content: ctx2[18].pencil },
-        dirty[0] & 2048 && { menu: ctx2[11] }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].pencil },
+        dirty[0] & 8192 && { menu: ctx2[13] }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
-      const button3_changes = dirty[0] & 299008 ? get_spread_update(button3_spread_levels, [
+      const button3_changes = dirty[0] & 2375680 ? get_spread_update(button3_spread_levels, [
         button3_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 262144 && { content: ctx2[18].text },
-        dirty[0] & 4096 && { menu: ctx2[12] }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 2097152 && { content: ctx2[21].text },
+        dirty[0] & 16384 && { menu: ctx2[14] }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 33554432) {
         button3_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button3.$set(button3_changes);
-      const button4_changes = dirty[0] & 41472 ? get_spread_update(button4_spread_levels, [
+      const button4_changes = dirty[0] & 295936 ? get_spread_update(button4_spread_levels, [
         button4_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 512 && { content: ctx2[9].shapes },
-        dirty[0] & 8192 && { menu: ctx2[13] }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 1024 && { content: ctx2[10].shapes },
+        dirty[0] & 32768 && { menu: ctx2[15] }
       ]) : {};
-      if (dirty[0] & 1410 | dirty[1] & 524288) {
+      if (dirty[0] & 2818 | dirty[1] & 33554432) {
         button4_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button4.$set(button4_changes);
-      const button5_changes = dirty[0] & 294912 ? get_spread_update(button5_spread_levels, [
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_5(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block1 = if_blocks[current_block_type_index];
+        if (!if_block1) {
+          if_block1 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block1.c();
+        } else {
+          if_block1.p(ctx2, dirty);
+        }
+        transition_in(if_block1, 1);
+        if_block1.m(div0, t6);
+      }
+      const button5_changes = dirty[0] & 263168 ? get_spread_update(button5_spread_levels, [
         button5_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 262144 && { content: ctx2[18].eraser }
+        dirty[0] & 262144 && get_spread_object(ctx2[18]),
+        dirty[0] & 1024 && { content: ctx2[10].clear }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 2 | dirty[1] & 33554432) {
         button5_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button5.$set(button5_changes);
-      const button6_changes = dirty[0] & 33280 ? get_spread_update(button6_spread_levels, [
-        button6_spread_levels[0],
-        dirty[0] & 32768 && get_spread_object(ctx2[15]),
-        dirty[0] & 512 && { content: ctx2[9].clear }
-      ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
-        button6_changes.$$scope = { dirty, ctx: ctx2 };
-      }
-      button6.$set(button6_changes);
       if (!ctx2[6]) {
-        if (if_block1) {
-          if_block1.p(ctx2, dirty);
+        if (if_block2) {
+          if_block2.p(ctx2, dirty);
           if (dirty[0] & 64) {
-            transition_in(if_block1, 1);
+            transition_in(if_block2, 1);
           }
         } else {
-          if_block1 = create_if_block_12(ctx2);
-          if_block1.c();
-          transition_in(if_block1, 1);
-          if_block1.m(div0, null);
+          if_block2 = create_if_block_6(ctx2);
+          if_block2.c();
+          transition_in(if_block2, 1);
+          if_block2.m(div0, null);
         }
-      } else if (if_block1) {
+      } else if (if_block2) {
         group_outros();
-        transition_out(if_block1, 1, 1, () => {
-          if_block1 = null;
+        transition_out(if_block2, 1, 1, () => {
+          if_block2 = null;
         });
         check_outros();
       }
@@ -8287,21 +9565,21 @@ function create_fragment54(ctx) {
         toggle_class(div0, "scrollable", ctx2[5]);
       }
       if (ctx2[5]) {
-        if (if_block2) {
-          if_block2.p(ctx2, dirty);
+        if (if_block3) {
+          if_block3.p(ctx2, dirty);
           if (dirty[0] & 32) {
-            transition_in(if_block2, 1);
+            transition_in(if_block3, 1);
           }
         } else {
-          if_block2 = create_if_block6(ctx2);
-          if_block2.c();
-          transition_in(if_block2, 1);
-          if_block2.m(t9.parentNode, t9);
+          if_block3 = create_if_block_5(ctx2);
+          if_block3.c();
+          transition_in(if_block3, 1);
+          if_block3.m(t9.parentNode, t9);
         }
-      } else if (if_block2) {
+      } else if (if_block3) {
         group_outros();
-        transition_out(if_block2, 1, 1, () => {
-          if_block2 = null;
+        transition_out(if_block3, 1, 1, () => {
+          if_block3 = null;
         });
         check_outros();
       }
@@ -8355,8 +9633,36 @@ function create_fragment54(ctx) {
       if (dirty[0] & 8)
         strokecolor1_changes.disabled = ctx2[3];
       strokecolor1.$set(strokecolor1_changes);
-      if (dirty[0] & 1572867) {
-        each_value = ctx2[19];
+      let previous_block_index_1 = current_block_type_index_1;
+      current_block_type_index_1 = select_block_type_9(ctx2);
+      if (current_block_type_index_1 === previous_block_index_1) {
+        if (~current_block_type_index_1) {
+          if_blocks_1[current_block_type_index_1].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block4) {
+          group_outros();
+          transition_out(if_blocks_1[previous_block_index_1], 1, 1, () => {
+            if_blocks_1[previous_block_index_1] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index_1) {
+          if_block4 = if_blocks_1[current_block_type_index_1];
+          if (!if_block4) {
+            if_block4 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx2);
+            if_block4.c();
+          } else {
+            if_block4.p(ctx2, dirty);
+          }
+          transition_in(if_block4, 1);
+          if_block4.m(div7, null);
+        } else {
+          if_block4 = null;
+        }
+      }
+      if (dirty[0] & 12582915) {
+        each_value = ctx2[22];
         let i;
         for (i = 0; i < each_value.length; i += 1) {
           const child_ctx = get_each_context4(ctx2, each_value, i);
@@ -8365,7 +9671,7 @@ function create_fragment54(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) {
@@ -8373,8 +9679,8 @@ function create_fragment54(ctx) {
         }
         each_blocks.length = each_value.length;
       }
-      if (!current || dirty[0] & 524288) {
-        set_style(div7, "--n", ctx2[19].length);
+      if (!current || dirty[0] & 4194304) {
+        set_style(div8, "--n", ctx2[22].length);
       }
     },
     i(local) {
@@ -8386,16 +9692,17 @@ function create_fragment54(ctx) {
       transition_in(button2.$$.fragment, local);
       transition_in(button3.$$.fragment, local);
       transition_in(button4.$$.fragment, local);
-      transition_in(button5.$$.fragment, local);
-      transition_in(button6.$$.fragment, local);
       transition_in(if_block1);
+      transition_in(button5.$$.fragment, local);
       transition_in(if_block2);
+      transition_in(if_block3);
       transition_in(strokewidth0.$$.fragment, local);
       transition_in(strokecolor0.$$.fragment, local);
       transition_in(textcolor.$$.fragment, local);
       transition_in(shapes2.$$.fragment, local);
       transition_in(strokewidth1.$$.fragment, local);
       transition_in(strokecolor1.$$.fragment, local);
+      transition_in(if_block4);
       current = true;
     },
     o(local) {
@@ -8405,16 +9712,17 @@ function create_fragment54(ctx) {
       transition_out(button2.$$.fragment, local);
       transition_out(button3.$$.fragment, local);
       transition_out(button4.$$.fragment, local);
-      transition_out(button5.$$.fragment, local);
-      transition_out(button6.$$.fragment, local);
       transition_out(if_block1);
+      transition_out(button5.$$.fragment, local);
       transition_out(if_block2);
+      transition_out(if_block3);
       transition_out(strokewidth0.$$.fragment, local);
       transition_out(strokecolor0.$$.fragment, local);
       transition_out(textcolor.$$.fragment, local);
       transition_out(shapes2.$$.fragment, local);
       transition_out(strokewidth1.$$.fragment, local);
       transition_out(strokecolor1.$$.fragment, local);
+      transition_out(if_block4);
       current = false;
     },
     d(detaching) {
@@ -8429,36 +9737,40 @@ function create_fragment54(ctx) {
       destroy_component(button2);
       destroy_component(button3);
       destroy_component(button4);
+      if_blocks[current_block_type_index].d();
       destroy_component(button5);
-      destroy_component(button6);
-      if (if_block1)
-        if_block1.d();
+      if (if_block2)
+        if_block2.d();
       if (detaching)
         detach(t8);
-      if (if_block2)
-        if_block2.d(detaching);
+      if (if_block3)
+        if_block3.d(detaching);
       if (detaching)
         detach(t9);
       if (detaching)
-        detach(div8);
+        detach(div9);
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[35](null);
+      ctx[40](null);
       destroy_component(textcolor);
-      ctx[36](null);
+      ctx[41](null);
       destroy_component(shapes2);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[37](null);
+      ctx[42](null);
+      if (~current_block_type_index_1) {
+        if_blocks_1[current_block_type_index_1].d();
+      }
+      ctx[43](null);
       destroy_each(each_blocks, detaching);
-      ctx[38](null);
+      ctx[44](null);
       mounted = false;
       run_all(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance54($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -8468,11 +9780,11 @@ function instance54($$self, $$props, $$invalidate) {
   let status;
   let max_scroll;
   let $top;
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(33, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(34, $memberState = $$value)), memberState);
-  let $apps;
-  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(20, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(19, $apps = $$value));
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(38, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(39, $memberState = $$value)), memberState);
+  let $stockedApps;
+  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(23, $status = $$value)), status);
+  component_subscribe($$self, stockedApps, ($$value) => $$invalidate(22, $stockedApps = $$value));
   $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
@@ -8485,14 +9797,17 @@ function instance54($$self, $$props, $$invalidate) {
   let { computed_height = 0 } = $$props;
   let { scrollable = false } = $$props;
   let { hide_apps = false } = $$props;
+  let { eraser_type = "both" } = $$props;
   let last_shape = "rectangle";
+  let last_eraser = "pencilEraser";
   let pencil_panel;
   let text_panel;
   let shapes_panel;
+  let eraser_panel;
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(40, $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);
   }
@@ -8518,34 +9833,46 @@ function instance54($$self, $$props, $$invalidate) {
       app?.setAppliance("shape", last_shape);
     }
   }
-  function eraser() {
+  function select_last_eraser() {
+    app?.setAppliance(last_eraser);
+  }
+  function select_eraser() {
     app?.setAppliance("eraser");
   }
+  function select_pencil_eraser() {
+    app?.setAppliance("pencilEraser");
+  }
   function clear() {
     app?.cleanCurrentScene();
   }
   function div2_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       pencil_panel = $$value;
-      $$invalidate(11, pencil_panel);
+      $$invalidate(13, pencil_panel);
     });
   }
   function div3_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       text_panel = $$value;
-      $$invalidate(12, text_panel);
+      $$invalidate(14, text_panel);
     });
   }
   function div6_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       shapes_panel = $$value;
-      $$invalidate(13, shapes_panel);
+      $$invalidate(15, shapes_panel);
     });
   }
   function div7_binding($$value) {
+    binding_callbacks[$$value ? "unshift" : "push"](() => {
+      eraser_panel = $$value;
+      $$invalidate(16, eraser_panel);
+    });
+  }
+  function div8_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
-      $$invalidate(14, apps_panel);
+      $$invalidate(17, apps_panel);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -8560,15 +9887,17 @@ function instance54($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(31, computed_height = $$props2.computed_height);
+      $$invalidate(36, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("hide_apps" in $$props2)
       $$invalidate(6, hide_apps = $$props2.hide_apps);
+    if ("eraser_type" in $$props2)
+      $$invalidate(7, eraser_type = $$props2.eraser_type);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & 10) {
-      $$invalidate(15, btn_props = {
+      $$invalidate(18, btn_props = {
           name: name5,
           theme,
           disabled,
@@ -8576,40 +9905,48 @@ function instance54($$self, $$props, $$invalidate) {
         });
     }
     if ($$self.$$.dirty[0] & 4) {
-      $$invalidate(9, t = i18n4[language]);
+      $$invalidate(10, t = i18n4[language]);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$invalidate(32, hotkeys = app?.hotKeys);
+      $$invalidate(37, hotkeys = app?.hotKeys);
     }
-    if ($$self.$$.dirty[0] & 512 | $$self.$$.dirty[1] & 2) {
-      $$invalidate(18, c = {
+    if ($$self.$$.dirty[0] & 1024 | $$self.$$.dirty[1] & 64) {
+      $$invalidate(21, c = {
           clicker: tooltip(t.clicker, hotkeys?.changeToClick),
           selector: tooltip(t.selector, hotkeys?.changeToSelector),
           pencil: tooltip(t.pencil, hotkeys?.changeToPencil),
           eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
+          pencilEraser: tooltip(t.pencilEraser, hotkeys?.changeToPencilEraser),
+          eraserForPanel: tooltip(t.eraser, hotkeys?.changeToEraser),
+          pencilEraserForPanel: tooltip(t.pencilEraser, hotkeys?.changeToPencilEraser),
           text: tooltip(t.text, hotkeys?.changeToText)
         });
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$subscribe_memberState($$invalidate(17, memberState = app?.memberState));
+      $$subscribe_memberState($$invalidate(20, memberState = app?.memberState));
     }
-    if ($$self.$$.dirty[1] & 8) {
+    if ($$self.$$.dirty[1] & 256) {
       $$invalidate(8, appliance = $memberState?.currentApplianceName);
     }
-    if ($$self.$$.dirty[1] & 8) {
-      $$invalidate(7, shape = $memberState?.shapeType);
+    if ($$self.$$.dirty[1] & 256) {
+      $$invalidate(9, shape = $memberState?.shapeType);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$subscribe_status($$invalidate(16, status = app?.appsStatus));
+      $$subscribe_status($$invalidate(19, status = app?.appsStatus));
     }
-    if ($$self.$$.dirty[0] & 384) {
+    if ($$self.$$.dirty[0] & 768) {
       if (applianceShapes.includes(appliance)) {
-          $$invalidate(10, last_shape = appliance);
+          $$invalidate(11, last_shape = appliance);
         } else if (shape) {
-          $$invalidate(10, last_shape = shape);
+          $$invalidate(11, last_shape = shape);
         }
     }
-    if ($$self.$$.dirty[0] & 32 | $$self.$$.dirty[1] & 5) {
+    if ($$self.$$.dirty[0] & 256) {
+      if (["pencilEraser", "eraser"].includes(appliance)) {
+          $$invalidate(12, last_eraser = appliance);
+        }
+    }
+    if ($$self.$$.dirty[0] & 32 | $$self.$$.dirty[1] & 160) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
   };
@@ -8621,19 +9958,22 @@ function instance54($$self, $$props, $$invalidate) {
     scroll_height,
     scrollable,
     hide_apps,
-    shape,
+    eraser_type,
     appliance,
+    shape,
     t,
     last_shape,
+    last_eraser,
     pencil_panel,
     text_panel,
     shapes_panel,
+    eraser_panel,
     apps_panel,
     btn_props,
     status,
     memberState,
     c,
-    $apps,
+    $stockedApps,
     $status,
     top,
     scroll_up,
@@ -8643,7 +9983,9 @@ function instance54($$self, $$props, $$invalidate) {
     pencil,
     text2,
     select_last_shape,
-    eraser,
+    select_last_eraser,
+    select_eraser,
+    select_pencil_eraser,
     clear,
     computed_height,
     hotkeys,
@@ -8652,7 +9994,8 @@ function instance54($$self, $$props, $$invalidate) {
     div2_binding,
     div3_binding,
     div6_binding,
-    div7_binding
+    div7_binding,
+    div8_binding
   ];
 }
 var Contents = class extends SvelteComponent {
@@ -8661,8 +10004,8 @@ var Contents = class extends SvelteComponent {
     init(
       this,
       options,
-      instance54,
-      create_fragment54,
+      instance57,
+      create_fragment57,
       safe_not_equal,
       {
         app: 0,
@@ -8670,9 +10013,10 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 31,
+        computed_height: 36,
         scrollable: 5,
-        hide_apps: 6
+        hide_apps: 6,
+        eraser_type: 7
       },
       null,
       [-1, -1]
@@ -8738,7 +10082,7 @@ function create_if_block7(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment58(ctx) {
   let div1;
   let div0;
   let contents;
@@ -8760,11 +10104,12 @@ function create_fragment55(ctx) {
       app: ctx[0],
       theme: ctx[1],
       language: ctx[2],
-      disabled: ctx[7],
-      scroll_height: ctx[10],
-      computed_height: ctx[6],
-      scrollable: ctx[5],
-      hide_apps: ctx[4]
+      disabled: ctx[8],
+      scroll_height: ctx[11],
+      computed_height: ctx[7],
+      scrollable: ctx[6],
+      hide_apps: ctx[5],
+      eraser_type: ctx[4]
     }
   });
   function select_block_type(ctx2, dirty) {
@@ -8791,7 +10136,7 @@ function create_fragment55(ctx) {
       set_style(
         div0,
         "height",
-        ctx[5] ? ctx[6] + "px" : "auto",
+        ctx[6] ? ctx[7] + "px" : "auto",
         false
       );
       attr(input, "type", "checkbox");
@@ -8825,8 +10170,8 @@ function create_fragment55(ctx) {
       current = true;
       if (!mounted) {
         dispose = [
-          listen(input, "change", ctx[15]),
-          action_destroyer(height.call(null, div1, ctx[9]))
+          listen(input, "change", ctx[16]),
+          action_destroyer(height.call(null, div1, ctx[10]))
         ];
         mounted = true;
       }
@@ -8839,23 +10184,25 @@ function create_fragment55(ctx) {
         contents_changes.theme = ctx2[1];
       if (dirty & 4)
         contents_changes.language = ctx2[2];
+      if (dirty & 256)
+        contents_changes.disabled = ctx2[8];
       if (dirty & 128)
-        contents_changes.disabled = ctx2[7];
+        contents_changes.computed_height = ctx2[7];
       if (dirty & 64)
-        contents_changes.computed_height = ctx2[6];
+        contents_changes.scrollable = ctx2[6];
       if (dirty & 32)
-        contents_changes.scrollable = ctx2[5];
+        contents_changes.hide_apps = ctx2[5];
       if (dirty & 16)
-        contents_changes.hide_apps = ctx2[4];
+        contents_changes.eraser_type = ctx2[4];
       contents.$set(contents_changes);
       if (!current || dirty & 2 && div0_class_value !== (div0_class_value = name6 + "-contents " + ctx2[1])) {
         attr(div0, "class", div0_class_value);
       }
-      if (dirty & 96) {
+      if (dirty & 192) {
         set_style(
           div0,
           "height",
-          ctx2[5] ? ctx2[6] + "px" : "auto",
+          ctx2[6] ? ctx2[7] + "px" : "auto",
           false
         );
       }
@@ -8903,15 +10250,16 @@ function create_fragment55(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance55($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let computed_height;
   let scrollable;
   let hide_apps;
+  let eraser_type;
   let $container_height;
   let $scroll_height;
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(14, $writable = $$value)), writable2);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(15, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
@@ -8920,9 +10268,9 @@ function instance55($$self, $$props, $$invalidate) {
   const extra_height = (32 + 4 + 4) * 2;
   let collapsed = false;
   let container_height = writable(0);
-  component_subscribe($$self, container_height, (value) => $$invalidate(12, $container_height = value));
+  component_subscribe($$self, container_height, (value) => $$invalidate(13, $container_height = value));
   let scroll_height = writable(0);
-  component_subscribe($$self, scroll_height, (value) => $$invalidate(13, $scroll_height = value));
+  component_subscribe($$self, scroll_height, (value) => $$invalidate(14, $scroll_height = value));
   function input_change_handler() {
     collapsed = this.checked;
     $$invalidate(3, collapsed);
@@ -8935,23 +10283,26 @@ function instance55($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("config" in $$props2)
-      $$invalidate(11, config = $$props2.config);
+      $$invalidate(12, config = $$props2.config);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 1) {
-      $$subscribe_writable($$invalidate(8, writable2 = app?.writable));
+      $$subscribe_writable($$invalidate(9, writable2 = app?.writable));
     }
-    if ($$self.$$.dirty & 16384) {
-      $$invalidate(7, disabled = !$writable);
+    if ($$self.$$.dirty & 32768) {
+      $$invalidate(8, disabled = !$writable);
     }
-    if ($$self.$$.dirty & 12288) {
-      $$invalidate(6, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
+    if ($$self.$$.dirty & 24576) {
+      $$invalidate(7, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
     }
-    if ($$self.$$.dirty & 12288) {
-      $$invalidate(5, scrollable = $scroll_height + extra_height > $container_height);
+    if ($$self.$$.dirty & 24576) {
+      $$invalidate(6, scrollable = $scroll_height + extra_height > $container_height);
     }
-    if ($$self.$$.dirty & 2048) {
-      $$invalidate(4, hide_apps = config.apps?.enable === false);
+    if ($$self.$$.dirty & 4096) {
+      $$invalidate(5, hide_apps = config.apps?.enable === false);
+    }
+    if ($$self.$$.dirty & 4096) {
+      $$invalidate(4, eraser_type = config.eraser?.behavior || "both");
     }
   };
   return [
@@ -8959,6 +10310,7 @@ function instance55($$self, $$props, $$invalidate) {
     theme,
     language,
     collapsed,
+    eraser_type,
     hide_apps,
     scrollable,
     computed_height,
@@ -8976,11 +10328,11 @@ function instance55($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, {
+    init(this, options, instance58, create_fragment58, safe_not_equal, {
       app: 0,
       theme: 1,
       language: 2,
-      config: 11
+      config: 12
     });
   }
 };
@@ -9078,7 +10430,7 @@ function create_if_block_22(ctx) {
     }
   };
 }
-function create_if_block_13(ctx) {
+function create_if_block_19(ctx) {
   let icon;
   let current;
   icon = new Icon_default({
@@ -9225,7 +10577,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_13];
+  const if_block_creators = [create_if_block_19, create_if_block_22, create_else_block_13];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (ctx2[3])
@@ -9533,7 +10885,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment59(ctx) {
   let div0;
   let button0;
   let t0;
@@ -9736,7 +11088,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance56($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -9870,7 +11222,7 @@ function instance56($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, {
+    init(this, options, instance59, create_fragment59, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -9927,7 +11279,7 @@ function create_if_block9(ctx) {
     }
   };
 }
-function create_fragment57(ctx) {
+function create_fragment60(ctx) {
   let div2;
   let div0;
   let t;
@@ -10009,7 +11361,7 @@ function create_fragment57(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance57($$self, $$props, $$invalidate) {
+function instance60($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
@@ -10082,7 +11434,7 @@ function instance57($$self, $$props, $$invalidate) {
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, not_equal, {
+    init(this, options, instance60, create_fragment60, not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -10186,7 +11538,7 @@ function create_if_block_23(ctx) {
     }
   };
 }
-function create_if_block_14(ctx) {
+function create_if_block_110(ctx) {
   let zoomcontrol;
   let current;
   zoomcontrol = new ZoomControl_default({
@@ -10278,7 +11630,7 @@ function create_if_block10(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment61(ctx) {
   let div4;
   let div0;
   let t0;
@@ -10293,7 +11645,7 @@ function create_fragment58(ctx) {
   let dispose;
   let if_block0 = ctx[3].toolbar?.enable !== false && create_if_block_32(ctx);
   let if_block1 = ctx[3].redo_undo?.enable !== false && create_if_block_23(ctx);
-  let if_block2 = ctx[3].zoom_control?.enable !== false && create_if_block_14(ctx);
+  let if_block2 = ctx[3].zoom_control?.enable !== false && create_if_block_110(ctx);
   let if_block3 = ctx[3].page_control?.enable !== false && create_if_block10(ctx);
   return {
     c() {
@@ -10398,7 +11750,7 @@ function create_fragment58(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block_14(ctx2);
+          if_block2 = create_if_block_110(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(div2, null);
@@ -10473,7 +11825,7 @@ function create_fragment58(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance58($$self, $$props, $$invalidate) {
+function instance61($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -10586,7 +11938,7 @@ function instance58($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, not_equal, {
+    init(this, options, instance61, create_fragment61, not_equal, {
       app: 0,
       theme: 1,
       language: 2,
@@ -10665,5 +12017,5 @@ function createReplayUI(player, div) {
   return ui;
 }
-export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, apps, createReplayUI, createUI };
+export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, createReplayUI, createUI, stockedApps };
 //# sourceMappingURL=index.mjs.map