@netless/fastboard-ui 1.1.3 → 1.1.4

package/dist/index.mjs

@@ -504,7 +504,7 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance79, create_fragment79, not_equal2, props, append_styles, dirty = [-1]) {
+function init(component, options, instance81, create_fragment81, not_equal2, props, append_styles, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -530,7 +530,7 @@ function init(component, options, instance79, create_fragment79, not_equal2, pro
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance79 ? instance79(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance81 ? instance81(component, options.props || {}, (i, ret, ...rest) => {
     const value = rest.length ? rest[0] : ret;
     if ($$.ctx && not_equal2($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i])
@@ -543,7 +543,7 @@ function init(component, options, instance79, create_fragment79, not_equal2, pro
   $$.update();
   ready = true;
   run_all($$.before_update);
-  $$.fragment = create_fragment79 ? create_fragment79($$.ctx) : false;
+  $$.fragment = create_fragment81 ? create_fragment81($$.ctx) : false;
   if (options.target) {
     if (options.hydrate) {
       const nodes = children(options.target);
@@ -2627,8 +2627,160 @@ var PencilFilled = class extends SvelteComponent {
 };
 var PencilFilled_default = PencilFilled;
 
-// src/components/Icons/Plus.svelte
+// src/components/Icons/BrushPen.svelte
 function create_fragment26(ctx) {
+  let svg;
+  let g;
+  let path;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      g = svg_element("g");
+      path = svg_element("path");
+      attr(path, "class", "fastboard-icon-fill-color");
+      attr(path, "d", "M7 16c.55 0 1 .45 1 1c0 1.1-.9 2-2 2c-.17 0-.33 0-.5-.05c.31-.55.5-1.21.5-1.95c0-.55.45-1 1-1M18.67 3c-.26 0-.51.1-.71.29L9 12.25L11.75 15l8.96-8.96c.39-.39.39-1.04 0-1.41l-1.34-1.34c-.2-.2-.45-.29-.7-.29M7 14c-1.66 0-3 1.34-3 3c0 1.31-1.16 2-2 2c.92 1.22 2.5 2 4 2c2.21 0 4-1.79 4-4c0-1.66-1.34-3-3-3");
+      attr(g, "stroke-width", "1");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "scale(1 0.85)");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
+      ctx[0]);
+      toggle_class(
+        svg,
+        "is-active",
+        /*active*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, g);
+      append(g, path);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*theme*/
+      1 && svg_class_value !== (svg_class_value = "fastboard-icon " + /*theme*/
+      ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & /*theme, active*/
+      3) {
+        toggle_class(
+          svg,
+          "is-active",
+          /*active*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance26($$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 BrushPen = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance26, create_fragment26, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var BrushPen_default = BrushPen;
+
+// src/components/Icons/BrushPenFilled.svelte
+function create_fragment27(ctx) {
+  let svg;
+  let g;
+  let path;
+  let svg_class_value;
+  return {
+    c() {
+      svg = svg_element("svg");
+      g = svg_element("g");
+      path = svg_element("path");
+      attr(path, "class", "fastboard-icon-fill-color");
+      attr(path, "d", "m20.71 4.63l-1.34-1.34c-.37-.39-1.02-.39-1.41 0L9 12.25L11.75 15l8.96-8.96c.39-.39.39-1.04 0-1.41M7 14a3 3 0 0 0-3 3c0 1.31-1.16 2-2 2c.92 1.22 2.5 2 4 2a4 4 0 0 0 4-4a3 3 0 0 0-3-3");
+      attr(g, "stroke-width", "1");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "scale(1 0.85)");
+      attr(svg, "fill", "none");
+      attr(svg, "viewBox", "0 0 24 24");
+      attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
+      ctx[0]);
+      toggle_class(
+        svg,
+        "is-active",
+        /*active*/
+        ctx[1]
+      );
+    },
+    m(target, anchor) {
+      insert(target, svg, anchor);
+      append(svg, g);
+      append(g, path);
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & /*theme*/
+      1 && svg_class_value !== (svg_class_value = "fastboard-icon " + /*theme*/
+      ctx2[0])) {
+        attr(svg, "class", svg_class_value);
+      }
+      if (dirty & /*theme, active*/
+      3) {
+        toggle_class(
+          svg,
+          "is-active",
+          /*active*/
+          ctx2[1]
+        );
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(svg);
+    }
+  };
+}
+function instance27($$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 BrushPenFilled = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance27, create_fragment27, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var BrushPenFilled_default = BrushPenFilled;
+
+// src/components/Icons/Plus.svelte
+function create_fragment28(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2680,7 +2832,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) => {
@@ -2694,13 +2846,13 @@ function instance26($$self, $$props, $$invalidate) {
 var Plus = 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 Plus_default = Plus;
 
 // src/components/Icons/Rectangle.svelte
-function create_fragment27(ctx) {
+function create_fragment29(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2752,7 +2904,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) => {
@@ -2766,13 +2918,13 @@ function instance27($$self, $$props, $$invalidate) {
 var Rectangle = 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 Rectangle_default = Rectangle;
 
 // src/components/Icons/RectangleBolded.svelte
-function create_fragment28(ctx) {
+function create_fragment30(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2824,7 +2976,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) => {
@@ -2838,13 +2990,13 @@ function instance28($$self, $$props, $$invalidate) {
 var RectangleBolded = 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 RectangleBolded_default = RectangleBolded;
 
 // src/components/Icons/Redo.svelte
-function create_fragment29(ctx) {
+function create_fragment31(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2900,7 +3052,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) => {
@@ -2914,13 +3066,13 @@ function instance29($$self, $$props, $$invalidate) {
 var Redo = 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 Redo_default = Redo;
 
 // src/components/Icons/Reset.svelte
-function create_fragment30(ctx) {
+function create_fragment32(ctx) {
   let svg;
   let circle0;
   let path;
@@ -2990,7 +3142,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) => {
@@ -3004,13 +3156,13 @@ function instance30($$self, $$props, $$invalidate) {
 var Reset = 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 Reset_default = Reset;
 
 // src/components/Icons/Rhombus.svelte
-function create_fragment31(ctx) {
+function create_fragment33(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3062,7 +3214,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) => {
@@ -3076,13 +3228,13 @@ function instance31($$self, $$props, $$invalidate) {
 var Rhombus = 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 Rhombus_default = Rhombus;
 
 // src/components/Icons/RhombusBolded.svelte
-function create_fragment32(ctx) {
+function create_fragment34(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3134,7 +3286,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) => {
@@ -3148,13 +3300,13 @@ function instance32($$self, $$props, $$invalidate) {
 var RhombusBolded = 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 RhombusBolded_default = RhombusBolded;
 
 // src/components/Icons/Right.svelte
-function create_fragment33(ctx) {
+function create_fragment35(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3206,7 +3358,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) => {
@@ -3220,13 +3372,13 @@ function instance33($$self, $$props, $$invalidate) {
 var Right = 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 Right_default = Right;
 
 // src/components/Icons/Selector.svelte
-function create_fragment34(ctx) {
+function create_fragment36(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3287,7 +3439,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) => {
@@ -3301,13 +3453,13 @@ function instance34($$self, $$props, $$invalidate) {
 var Selector = 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 Selector_default = Selector;
 
 // src/components/Icons/SelectorFilled.svelte
-function create_fragment35(ctx) {
+function create_fragment37(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3366,7 +3518,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) => {
@@ -3380,13 +3532,13 @@ function instance35($$self, $$props, $$invalidate) {
 var SelectorFilled = 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 SelectorFilled_default = SelectorFilled;
 
 // src/components/Icons/SpeechBalloon.svelte
-function create_fragment36(ctx) {
+function create_fragment38(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3438,7 +3590,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) => {
@@ -3452,13 +3604,13 @@ function instance36($$self, $$props, $$invalidate) {
 var SpeechBalloon = 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 SpeechBalloon_default = SpeechBalloon;
 
 // src/components/Icons/Star.svelte
-function create_fragment37(ctx) {
+function create_fragment39(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3510,7 +3662,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) => {
@@ -3524,13 +3676,13 @@ function instance37($$self, $$props, $$invalidate) {
 var Star = 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 Star_default = Star;
 
 // src/components/Icons/StarBolded.svelte
-function create_fragment38(ctx) {
+function create_fragment40(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3582,7 +3734,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) => {
@@ -3596,13 +3748,13 @@ function instance38($$self, $$props, $$invalidate) {
 var StarBolded = 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 StarBolded_default = StarBolded;
 
 // src/components/Icons/Text.svelte
-function create_fragment39(ctx) {
+function create_fragment41(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3654,7 +3806,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) => {
@@ -3668,13 +3820,13 @@ function instance39($$self, $$props, $$invalidate) {
 var Text = 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 Text_default = Text;
 
 // src/components/Icons/TextFilled.svelte
-function create_fragment40(ctx) {
+function create_fragment42(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3733,7 +3885,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) => {
@@ -3747,13 +3899,13 @@ function instance40($$self, $$props, $$invalidate) {
 var TextFilled = 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 TextFilled_default = TextFilled;
 
 // src/components/Icons/Triangle.svelte
-function create_fragment41(ctx) {
+function create_fragment43(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3805,7 +3957,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) => {
@@ -3819,13 +3971,13 @@ function instance41($$self, $$props, $$invalidate) {
 var Triangle = 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 Triangle_default = Triangle;
 
 // src/components/Icons/TriangleBolded.svelte
-function create_fragment42(ctx) {
+function create_fragment44(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3877,7 +4029,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) => {
@@ -3891,13 +4043,13 @@ function instance42($$self, $$props, $$invalidate) {
 var TriangleBolded = 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 TriangleBolded_default = TriangleBolded;
 
 // src/components/Icons/Undo.svelte
-function create_fragment43(ctx) {
+function create_fragment45(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3953,7 +4105,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) => {
@@ -3967,13 +4119,13 @@ function instance43($$self, $$props, $$invalidate) {
 var Undo = 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 Undo_default = Undo;
 
 // src/components/Icons/Up.svelte
-function create_fragment44(ctx) {
+function create_fragment46(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -4025,7 +4177,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) => {
@@ -4039,13 +4191,13 @@ function instance44($$self, $$props, $$invalidate) {
 var Up = 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 Up_default = Up;
 
 // src/components/Icons/WhiteboardAdd.svelte
-function create_fragment45(ctx) {
+function create_fragment47(ctx) {
   let svg;
   let path0;
   let rect;
@@ -4117,7 +4269,7 @@ function create_fragment45(ctx) {
     }
   };
 }
-function instance45($$self, $$props, $$invalidate) {
+function instance47($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4131,13 +4283,13 @@ function instance45($$self, $$props, $$invalidate) {
 var WhiteboardAdd = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance45, create_fragment45, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance47, create_fragment47, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var WhiteboardAdd_default = WhiteboardAdd;
 
 // src/components/Icons/Play.svelte
-function create_fragment46(ctx) {
+function create_fragment48(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -4187,7 +4339,7 @@ function create_fragment46(ctx) {
     }
   };
 }
-function instance46($$self, $$props, $$invalidate) {
+function instance48($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4201,13 +4353,13 @@ function instance46($$self, $$props, $$invalidate) {
 var Play = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance46, create_fragment46, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance48, create_fragment48, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Play_default = Play;
 
 // src/components/Icons/Pause.svelte
-function create_fragment47(ctx) {
+function create_fragment49(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -4257,7 +4409,7 @@ function create_fragment47(ctx) {
     }
   };
 }
-function instance47($$self, $$props, $$invalidate) {
+function instance49($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4271,13 +4423,13 @@ function instance47($$self, $$props, $$invalidate) {
 var Pause = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance47, create_fragment47, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance49, create_fragment49, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Pause_default = Pause;
 
 // src/components/Icons/Loading.svelte
-function create_fragment48(ctx) {
+function create_fragment50(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -4327,7 +4479,7 @@ function create_fragment48(ctx) {
     }
   };
 }
-function instance48($$self, $$props, $$invalidate) {
+function instance50($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4341,13 +4493,13 @@ function instance48($$self, $$props, $$invalidate) {
 var Loading = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance48, create_fragment48, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance50, create_fragment50, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Loading_default = Loading;
 
 // src/components/Icons/LaserPen.svelte
-function create_fragment49(ctx) {
+function create_fragment51(ctx) {
   let svg;
   let g;
   let path0;
@@ -4367,7 +4519,7 @@ function create_fragment49(ctx) {
       attr(g, "stroke-width", "1.25");
       attr(g, "stroke-linecap", "round");
       attr(g, "stroke-linejoin", "round");
-      attr(g, "transform", "rotate(0 10 10)");
+      attr(g, "transform", "rotate(0 10 10) translate(3 2)");
       attr(svg, "fill", "none");
       attr(svg, "viewBox", "0 0 24 24");
       attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
@@ -4409,7 +4561,7 @@ function create_fragment49(ctx) {
     }
   };
 }
-function instance49($$self, $$props, $$invalidate) {
+function instance51($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4423,13 +4575,13 @@ function instance49($$self, $$props, $$invalidate) {
 var LaserPen = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance49, create_fragment49, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance51, create_fragment51, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var LaserPen_default = LaserPen;
 
 // src/components/Icons/LaserPenFilled.svelte
-function create_fragment50(ctx) {
+function create_fragment52(ctx) {
   let svg;
   let g;
   let path0;
@@ -4449,7 +4601,7 @@ function create_fragment50(ctx) {
       attr(g, "stroke-width", "1.25");
       attr(g, "stroke-linecap", "round");
       attr(g, "stroke-linejoin", "round");
-      attr(g, "transform", "rotate(0 10 10)");
+      attr(g, "transform", "rotate(0 10 10) translate(3 2)");
       attr(svg, "fill", "none");
       attr(svg, "viewBox", "0 0 24 24");
       attr(svg, "class", svg_class_value = "fastboard-icon " + /*theme*/
@@ -4491,7 +4643,7 @@ function create_fragment50(ctx) {
     }
   };
 }
-function instance50($$self, $$props, $$invalidate) {
+function instance52($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4505,13 +4657,13 @@ function instance50($$self, $$props, $$invalidate) {
 var LaserPenFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance50, create_fragment50, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance52, create_fragment52, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var LaserPenFilled_default = LaserPenFilled;
 
 // src/components/Icons/MarkPen.svelte
-function create_fragment51(ctx) {
+function create_fragment53(ctx) {
   let svg;
   let g;
   let path;
@@ -4567,7 +4719,7 @@ function create_fragment51(ctx) {
     }
   };
 }
-function instance51($$self, $$props, $$invalidate) {
+function instance53($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4581,13 +4733,13 @@ function instance51($$self, $$props, $$invalidate) {
 var MarkPen = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance51, create_fragment51, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance53, create_fragment53, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var MarkPen_default = MarkPen;
 
 // src/components/Icons/MarkPenFilled.svelte
-function create_fragment52(ctx) {
+function create_fragment54(ctx) {
   let svg;
   let g;
   let path;
@@ -4643,7 +4795,7 @@ function create_fragment52(ctx) {
     }
   };
 }
-function instance52($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4657,13 +4809,13 @@ function instance52($$self, $$props, $$invalidate) {
 var MarkPenFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance52, create_fragment52, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance54, create_fragment54, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var MarkPenFilled_default = MarkPenFilled;
 
 // src/components/Icons/EraserBitmap.svelte
-function create_fragment53(ctx) {
+function create_fragment55(ctx) {
   let svg;
   let g;
   let path0;
@@ -4684,6 +4836,7 @@ function create_fragment53(ctx) {
       attr(path1, "d", "M9 21h12");
       attr(path1, "class", "fastboard-icon-stroke-color");
       attr(g, "fill", "none");
+      attr(g, "transform", "scale(0.8 0.8) translate(3 1)");
       attr(svg, "width", "24");
       attr(svg, "height", "24");
       attr(svg, "viewBox", "0 0 24 24");
@@ -4726,7 +4879,7 @@ function create_fragment53(ctx) {
     }
   };
 }
-function instance53($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4740,13 +4893,13 @@ function instance53($$self, $$props, $$invalidate) {
 var EraserBitmap = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance55, create_fragment55, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var EraserBitmap_default = EraserBitmap;
 
 // src/components/Icons/EraserBitmapFilled.svelte
-function create_fragment54(ctx) {
+function create_fragment56(ctx) {
   let svg;
   let g;
   let path0;
@@ -4767,6 +4920,7 @@ function create_fragment54(ctx) {
       attr(path1, "d", "M9 21h12");
       attr(path1, "class", "fastboard-icon-stroke-color");
       attr(g, "fill", "none");
+      attr(g, "transform", "scale(0.8 0.8) translate(3 1)");
       attr(svg, "width", "24");
       attr(svg, "height", "24");
       attr(svg, "viewBox", "0 0 24 24");
@@ -4809,7 +4963,7 @@ function create_fragment54(ctx) {
     }
   };
 }
-function instance54($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -4823,7 +4977,7 @@ function instance54($$self, $$props, $$invalidate) {
 var EraserBitmapFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance56, create_fragment56, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var EraserBitmapFilled_default = EraserBitmapFilled;
@@ -4882,7 +5036,9 @@ var Icons = {
   MarkPen: MarkPen_default,
   MarkPenFilled: MarkPenFilled_default,
   EraserBitmap: EraserBitmap_default,
-  EraserBitmapFilled: EraserBitmapFilled_default
+  EraserBitmapFilled: EraserBitmapFilled_default,
+  StrokePencil: BrushPen_default,
+  StrokePencilFilled: BrushPenFilled_default
 };
 var Icons_default = Icons;
 if (typeof window !== "undefined") {
@@ -4895,12 +5051,12 @@ if (typeof window !== "undefined") {
       {
         name: "className",
         defaultValue: "",
-        fn(instance79) {
+        fn(instance81) {
           function add() {
-            const el = instance79.popper.firstElementChild;
+            const el = instance81.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance79.props.className || "").trim();
+              const extra = (instance81.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
@@ -4908,7 +5064,7 @@ if (typeof window !== "undefined") {
           }
           function remove() {
             var _a;
-            (_a = instance79.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            (_a = instance81.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -4921,21 +5077,21 @@ if (typeof window !== "undefined") {
   });
 }
 var tippy = function(node, props) {
-  const instance79 = Tippy(node, props);
+  const instance81 = Tippy(node, props);
   return {
     update(props2) {
-      instance79.setProps(props2);
+      instance81.setProps(props2);
     },
     destroy() {
-      instance79.destroy();
+      instance81.destroy();
     }
   };
 };
 function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance79 = el._tippy;
-    if (instance79)
-      instance79.hide();
+    const instance81 = el._tippy;
+    if (instance81)
+      instance81.hide();
   });
 }
 var tippy_menu = {
@@ -5449,7 +5605,7 @@ function create_if_block_1(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment57(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -5515,7 +5671,7 @@ function create_fragment55(ctx) {
     }
   };
 }
-function instance55($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
@@ -5573,7 +5729,7 @@ function instance55($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, {
+    init(this, options, instance57, create_fragment57, safe_not_equal, {
       class: 0,
       name: 1,
       theme: 2,
@@ -5778,7 +5934,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment58(ctx) {
   let div;
   let button0;
   let t_1;
@@ -5919,7 +6075,7 @@ var i18n = {
   "zh-CN": { redo: "\u91CD\u505A", undo: "\u64A4\u9500" }
 };
 var name = "fastboard-redo-undo";
-function instance56($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -6020,7 +6176,7 @@ function instance56($$self, $$props, $$invalidate) {
 var RedoUndo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, {
+    init(this, options, instance58, create_fragment58, safe_not_equal, {
       app: 12,
       theme: 0,
       language: 13,
@@ -6377,7 +6533,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment57(ctx) {
+function create_fragment59(ctx) {
   let div;
   let button0;
   let t0;
@@ -6612,7 +6768,7 @@ var i18n2 = {
   "zh-CN": { prev: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875", add: "\u6DFB\u52A0\u9875\u9762" }
 };
 var name2 = "fastboard-page-control";
-function instance57($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -6718,7 +6874,7 @@ function instance57($$self, $$props, $$invalidate) {
 var PageControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, {
+    init(this, options, instance59, create_fragment59, safe_not_equal, {
       app: 16,
       theme: 0,
       language: 17,
@@ -7067,7 +7223,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment60(ctx) {
   let div;
   let button0;
   let t0;
@@ -7330,7 +7486,7 @@ function next_scale(scale, delta) {
   return 1;
 }
 var name3 = "fastboard-zoom-control";
-function instance58($$self, $$props, $$invalidate) {
+function instance60($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -7441,7 +7597,7 @@ function instance58($$self, $$props, $$invalidate) {
 var ZoomControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, {
+    init(this, options, instance60, create_fragment60, safe_not_equal, {
       app: 15,
       theme: 0,
       language: 16,
@@ -7743,7 +7899,7 @@ function hexToRgb(hex) {
 }
 
 // src/components/Toolbar/components/Slider.svelte
-function create_fragment59(ctx) {
+function create_fragment61(ctx) {
   let div;
   let input;
   let input_class_value;
@@ -7958,7 +8114,7 @@ function create_fragment59(ctx) {
   };
 }
 var name4 = "fastboard-slider";
-function instance59($$self, $$props, $$invalidate) {
+function instance61($$self, $$props, $$invalidate) {
   let percent;
   const dispatch = createEventDispatcher();
   let { class: className = "" } = $$props;
@@ -8029,7 +8185,7 @@ function instance59($$self, $$props, $$invalidate) {
 var Slider = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance59, create_fragment59, safe_not_equal, {
+    init(this, options, instance61, create_fragment61, safe_not_equal, {
       class: 1,
       theme: 2,
       min: 3,
@@ -8043,7 +8199,7 @@ var Slider = class extends SvelteComponent {
 var Slider_default = Slider;
 
 // src/components/Toolbar/components/StrokeWidth.svelte
-function create_fragment60(ctx) {
+function create_fragment62(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -8099,7 +8255,7 @@ function create_fragment60(ctx) {
     }
   };
 }
-function instance60($$self, $$props, $$invalidate) {
+function instance62($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -8148,7 +8304,7 @@ function instance60($$self, $$props, $$invalidate) {
 var StrokeWidth = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance60, create_fragment60, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance62, create_fragment62, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var StrokeWidth_default = StrokeWidth;
@@ -8252,7 +8408,7 @@ function create_each_block(ctx) {
     }
   };
 }
-function create_fragment61(ctx) {
+function create_fragment63(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -8332,7 +8488,7 @@ function create_fragment61(ctx) {
 function is_equal_color(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance61($$self, $$props, $$invalidate) {
+function instance63($$self, $$props, $$invalidate) {
   let memberState;
   let strokeColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
@@ -8384,7 +8540,7 @@ function instance61($$self, $$props, $$invalidate) {
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance61, create_fragment61, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance63, create_fragment63, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var StrokeColor_default = StrokeColor;
@@ -8488,7 +8644,7 @@ function create_each_block2(ctx) {
     }
   };
 }
-function create_fragment62(ctx) {
+function create_fragment64(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -8568,7 +8724,7 @@ function create_fragment62(ctx) {
 function is_equal_color2(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance62($$self, $$props, $$invalidate) {
+function instance64($$self, $$props, $$invalidate) {
   let memberState;
   let textColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(7, $memberState = $$value)), memberState);
@@ -8620,7 +8776,7 @@ function instance62($$self, $$props, $$invalidate) {
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance62, create_fragment62, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance64, create_fragment64, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var TextColor_default = TextColor;
@@ -8951,7 +9107,7 @@ function create_each_block3(key_1, ctx) {
     }
   };
 }
-function create_fragment63(ctx) {
+function create_fragment65(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -9057,7 +9213,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance63($$self, $$props, $$invalidate) {
+function instance65($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -9142,7 +9298,7 @@ function instance63($$self, $$props, $$invalidate) {
 var SelectShapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance63, create_fragment63, safe_not_equal, {
+    init(this, options, instance65, create_fragment65, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -9297,7 +9453,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_fragment64(ctx) {
+function create_fragment66(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9366,7 +9522,7 @@ function create_fragment64(ctx) {
     }
   };
 }
-function instance64($$self, $$props, $$invalidate) {
+function instance66($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -9389,7 +9545,7 @@ function instance64($$self, $$props, $$invalidate) {
 var Clicker = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance64, create_fragment64, safe_not_equal, {
+    init(this, options, instance66, create_fragment66, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -9544,7 +9700,7 @@ function create_default_slot5(ctx) {
     }
   };
 }
-function create_fragment65(ctx) {
+function create_fragment67(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9613,7 +9769,7 @@ function create_fragment65(ctx) {
     }
   };
 }
-function instance65($$self, $$props, $$invalidate) {
+function instance67($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -9636,7 +9792,7 @@ function instance65($$self, $$props, $$invalidate) {
 var Selector2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance65, create_fragment65, safe_not_equal, {
+    init(this, options, instance67, create_fragment67, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -9647,6 +9803,72 @@ var Selector2 = class extends SvelteComponent {
 var Selector_default2 = Selector2;
 
 // src/components/Toolbar/definitions/Pencil.svelte
+function create_if_block_6(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_3];
+  const if_blocks = [];
+  function select_block_type_4(ctx2, dirty) {
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil"
+    )
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_4(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_4(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_if_block_4(ctx) {
   let current_block_type_index;
   let if_block;
@@ -9845,7 +10067,7 @@ function create_if_block8(ctx) {
     }
   };
 }
-function create_else_block_2(ctx) {
+function create_else_block_3(ctx) {
   let icons_pencil;
   let current;
   icons_pencil = new Icons_default.Pencil({ props: { theme: (
@@ -9883,7 +10105,7 @@ function create_else_block_2(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_7(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -9923,6 +10145,84 @@ function create_if_block_5(ctx) {
     }
   };
 }
+function create_else_block_2(ctx) {
+  let icons_strokepencil;
+  let current;
+  icons_strokepencil = new Icons_default.StrokePencil({ props: { theme: (
+    /*theme*/
+    ctx[4]
+  ) } });
+  return {
+    c() {
+      create_component(icons_strokepencil.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_strokepencil, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_strokepencil_changes = {};
+      if (dirty & /*theme*/
+      16)
+        icons_strokepencil_changes.theme = /*theme*/
+        ctx2[4];
+      icons_strokepencil.$set(icons_strokepencil_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_strokepencil.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_strokepencil.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_strokepencil, detaching);
+    }
+  };
+}
+function create_if_block_5(ctx) {
+  let icons_strokepencilfilled;
+  let current;
+  icons_strokepencilfilled = new Icons_default.StrokePencilFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[4]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_strokepencilfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_strokepencilfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_strokepencilfilled_changes = {};
+      if (dirty & /*theme*/
+      16)
+        icons_strokepencilfilled_changes.theme = /*theme*/
+        ctx2[4];
+      icons_strokepencilfilled.$set(icons_strokepencilfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_strokepencilfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_strokepencilfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_strokepencilfilled, detaching);
+    }
+  };
+}
 function create_else_block_12(ctx) {
   let icons_laserpen;
   let current;
@@ -10084,7 +10384,7 @@ function create_default_slot6(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block8, create_if_block_2, create_if_block_4];
+  const if_block_creators = [create_if_block8, create_if_block_2, create_if_block_4, create_if_block_6];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
@@ -10099,9 +10399,14 @@ function create_default_slot6(ctx) {
       return 1;
     if (
       /*pencilType*/
-      ctx2[5] === "pencil"
+      ctx2[5] === "stroke"
     )
       return 2;
+    if (
+      /*pencilType*/
+      ctx2[5] === "pencil"
+    )
+      return 3;
     return -1;
   }
   if (~(current_block_type_index = select_block_type(ctx))) {
@@ -10169,7 +10474,7 @@ function create_default_slot6(ctx) {
     }
   };
 }
-function create_fragment66(ctx) {
+function create_fragment68(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10247,7 +10552,7 @@ function create_fragment66(ctx) {
     }
   };
 }
-function instance66($$self, $$props, $$invalidate) {
+function instance68($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
@@ -10276,7 +10581,7 @@ function instance66($$self, $$props, $$invalidate) {
 var Pencil2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance66, create_fragment66, safe_not_equal, {
+    init(this, options, instance68, create_fragment68, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
@@ -10433,7 +10738,7 @@ function create_default_slot7(ctx) {
     }
   };
 }
-function create_fragment67(ctx) {
+function create_fragment69(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10511,7 +10816,7 @@ function create_fragment67(ctx) {
     }
   };
 }
-function instance67($$self, $$props, $$invalidate) {
+function instance69($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
@@ -10537,7 +10842,7 @@ function instance67($$self, $$props, $$invalidate) {
 var Text2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance67, create_fragment67, safe_not_equal, {
+    init(this, options, instance69, create_fragment69, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
@@ -10781,7 +11086,7 @@ function create_default_slot8(ctx) {
     }
   };
 }
-function create_fragment68(ctx) {
+function create_fragment70(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10859,7 +11164,7 @@ function create_fragment68(ctx) {
     }
   };
 }
-function instance68($$self, $$props, $$invalidate) {
+function instance70($$self, $$props, $$invalidate) {
   let memberState;
   let shape;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(10, $memberState = $$value)), memberState);
@@ -10931,7 +11236,7 @@ function instance68($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance68, create_fragment68, safe_not_equal, {
+    init(this, options, instance70, create_fragment70, safe_not_equal, {
       app: 9,
       btn_props: 1,
       content: 2,
@@ -11317,7 +11622,7 @@ function create_default_slot9(ctx) {
     }
   };
 }
-function create_fragment69(ctx) {
+function create_fragment71(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11395,7 +11700,7 @@ function create_fragment69(ctx) {
     }
   };
 }
-function instance69($$self, $$props, $$invalidate) {
+function instance71($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -11424,7 +11729,7 @@ function instance69($$self, $$props, $$invalidate) {
 var Eraser2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance69, create_fragment69, safe_not_equal, {
+    init(this, options, instance71, create_fragment71, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -11475,7 +11780,7 @@ function create_default_slot10(ctx) {
     }
   };
 }
-function create_fragment70(ctx) {
+function create_fragment72(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11544,7 +11849,7 @@ function create_fragment70(ctx) {
     }
   };
 }
-function instance70($$self, $$props, $$invalidate) {
+function instance72($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { theme = "light" } = $$props;
@@ -11564,7 +11869,7 @@ function instance70($$self, $$props, $$invalidate) {
 var Clear2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance70, create_fragment70, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
+    init(this, options, instance72, create_fragment72, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
   }
 };
 var Clear_default2 = Clear2;
@@ -11714,7 +12019,7 @@ function create_default_slot11(ctx) {
     }
   };
 }
-function create_fragment71(ctx) {
+function create_fragment73(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11783,7 +12088,7 @@ function create_fragment71(ctx) {
     }
   };
 }
-function instance71($$self, $$props, $$invalidate) {
+function instance73($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -11806,7 +12111,7 @@ function instance71($$self, $$props, $$invalidate) {
 var Hand = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance71, create_fragment71, safe_not_equal, {
+    init(this, options, instance73, create_fragment73, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -11961,7 +12266,7 @@ function create_default_slot12(ctx) {
     }
   };
 }
-function create_fragment72(ctx) {
+function create_fragment74(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -12030,7 +12335,7 @@ function create_fragment72(ctx) {
     }
   };
 }
-function instance72($$self, $$props, $$invalidate) {
+function instance74($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -12053,7 +12358,7 @@ function instance72($$self, $$props, $$invalidate) {
 var Laser2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance72, create_fragment72, safe_not_equal, {
+    init(this, options, instance74, create_fragment74, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -12064,7 +12369,7 @@ var Laser2 = class extends SvelteComponent {
 var Laser_default2 = Laser2;
 
 // src/components/Toolbar/components/EraserSize.svelte
-function create_fragment73(ctx) {
+function create_fragment75(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -12120,7 +12425,7 @@ function create_fragment73(ctx) {
     }
   };
 }
-function instance73($$self, $$props, $$invalidate) {
+function instance75($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -12161,7 +12466,7 @@ function instance73($$self, $$props, $$invalidate) {
 var EraserSize = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance73, create_fragment73, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance75, create_fragment75, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var EraserSize_default = EraserSize;
@@ -12169,42 +12474,42 @@ var EraserSize_default = EraserSize;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[58] = list[i];
+  child_ctx[60] = list[i];
   const constants_0 = (
     /*netless_app*/
-    child_ctx[58]
+    child_ctx[60]
   );
-  child_ctx[59] = constants_0.icon;
-  child_ctx[60] = constants_0.label;
-  child_ctx[61] = constants_0.kind;
-  child_ctx[62] = constants_0.onClick;
+  child_ctx[61] = constants_0.icon;
+  child_ctx[62] = constants_0.label;
+  child_ctx[63] = constants_0.kind;
+  child_ctx[64] = constants_0.onClick;
   const constants_1 = (
     /*$status*/
     child_ctx[26] && /*$status*/
     child_ctx[26][
       /*kind*/
-      child_ctx[61]
+      child_ctx[63]
     ]
   );
-  child_ctx[63] = constants_1;
+  child_ctx[65] = constants_1;
   const constants_2 = function func() {
     return (
       /*func*/
-      ctx[54](
+      ctx[56](
         /*onClick*/
-        child_ctx[62]
+        child_ctx[64]
       )
     );
   };
-  child_ctx[64] = constants_2;
+  child_ctx[66] = constants_2;
   return child_ctx;
 }
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[67] = list[i];
+  child_ctx[69] = list[i];
   return child_ctx;
 }
-function create_if_block_23(ctx) {
+function create_if_block_25(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -12213,7 +12518,7 @@ function create_if_block_23(ctx) {
     ctx[17]
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_122] },
+    $$slots: { default: [create_default_slot_14] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -12241,7 +12546,7 @@ function create_if_block_23(ctx) {
       )]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12261,7 +12566,7 @@ function create_if_block_23(ctx) {
     }
   };
 }
-function create_default_slot_122(ctx) {
+function create_default_slot_14(ctx) {
   let icons_up;
   let current;
   icons_up = new Icons_default.Up({ props: { theme: (
@@ -12299,7 +12604,7 @@ function create_default_slot_122(ctx) {
     }
   };
 }
-function create_if_block_222(ctx) {
+function create_if_block_24(ctx) {
   let laser;
   let current;
   laser = new Laser_default2({
@@ -12370,7 +12675,7 @@ function create_if_block_222(ctx) {
     }
   };
 }
-function create_if_block_21(ctx) {
+function create_if_block_23(ctx) {
   let hand_1;
   let current;
   hand_1 = new Hand_default({
@@ -12441,7 +12746,7 @@ function create_if_block_21(ctx) {
     }
   };
 }
-function create_if_block_20(ctx) {
+function create_if_block_222(ctx) {
   let clear_1;
   let current;
   clear_1 = new Clear_default2({
@@ -12504,7 +12809,7 @@ function create_if_block_20(ctx) {
     }
   };
 }
-function create_if_block_19(ctx) {
+function create_if_block_21(ctx) {
   let eraser_1;
   let current;
   eraser_1 = new Eraser_default2({
@@ -12597,7 +12902,7 @@ function create_if_block_19(ctx) {
     }
   };
 }
-function create_if_block_18(ctx) {
+function create_if_block_20(ctx) {
   let shapes2;
   let current;
   shapes2 = new Shapes_default({
@@ -12679,7 +12984,7 @@ function create_if_block_18(ctx) {
     }
   };
 }
-function create_if_block_17(ctx) {
+function create_if_block_19(ctx) {
   let text_1;
   let current;
   text_1 = new Text_default2({
@@ -12758,7 +13063,7 @@ function create_if_block_17(ctx) {
     }
   };
 }
-function create_if_block_16(ctx) {
+function create_if_block_18(ctx) {
   let pencil_1;
   let current;
   pencil_1 = new Pencil_default2({
@@ -12845,7 +13150,7 @@ function create_if_block_16(ctx) {
     }
   };
 }
-function create_if_block_15(ctx) {
+function create_if_block_17(ctx) {
   let selector_1;
   let current;
   selector_1 = new Selector_default2({
@@ -12916,7 +13221,7 @@ function create_if_block_15(ctx) {
     }
   };
 }
-function create_if_block_14(ctx) {
+function create_if_block_16(ctx) {
   let clicker_1;
   let current;
   clicker_1 = new Clicker_default({
@@ -12993,61 +13298,61 @@ function create_each_block_1(ctx) {
   let if_block_anchor;
   let current;
   const if_block_creators = [
-    create_if_block_14,
-    create_if_block_15,
     create_if_block_16,
     create_if_block_17,
     create_if_block_18,
     create_if_block_19,
     create_if_block_20,
     create_if_block_21,
-    create_if_block_222
+    create_if_block_222,
+    create_if_block_23,
+    create_if_block_24
   ];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
       /*item*/
-      ctx2[67] === "clicker"
+      ctx2[69] === "clicker"
     )
       return 0;
     if (
       /*item*/
-      ctx2[67] === "selector"
+      ctx2[69] === "selector"
     )
       return 1;
     if (
       /*item*/
-      ctx2[67] === "pencil"
+      ctx2[69] === "pencil"
     )
       return 2;
     if (
       /*item*/
-      ctx2[67] === "text"
+      ctx2[69] === "text"
     )
       return 3;
     if (
       /*item*/
-      ctx2[67] === "shapes"
+      ctx2[69] === "shapes"
     )
       return 4;
     if (
       /*item*/
-      ctx2[67] === "eraser"
+      ctx2[69] === "eraser"
     )
       return 5;
     if (
       /*item*/
-      ctx2[67] === "clear"
+      ctx2[69] === "clear"
     )
       return 6;
     if (
       /*item*/
-      ctx2[67] === "hand"
+      ctx2[69] === "hand"
     )
       return 7;
     if (
       /*item*/
-      ctx2[67] === "laserPointer"
+      ctx2[69] === "laserPointer"
     )
       return 8;
     return -1;
@@ -13117,7 +13422,7 @@ function create_each_block_1(ctx) {
     }
   };
 }
-function create_if_block_132(ctx) {
+function create_if_block_15(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -13140,7 +13445,7 @@ function create_if_block_132(ctx) {
     }
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_11] },
+    $$slots: { default: [create_default_slot_132] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -13184,7 +13489,7 @@ function create_if_block_132(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13204,7 +13509,7 @@ function create_if_block_132(ctx) {
     }
   };
 }
-function create_default_slot_11(ctx) {
+function create_default_slot_132(ctx) {
   let icons_apps;
   let current;
   icons_apps = new Icons_default.Apps({ props: { theme: (
@@ -13242,7 +13547,7 @@ function create_default_slot_11(ctx) {
     }
   };
 }
-function create_if_block_122(ctx) {
+function create_if_block_14(ctx) {
   let button;
   let current;
   button = new Button_default({
@@ -13257,7 +13562,7 @@ function create_if_block_122(ctx) {
         /*disabled*/
         ctx[3]
       ),
-      $$slots: { default: [create_default_slot_10] },
+      $$slots: { default: [create_default_slot_122] },
       $$scope: { ctx }
     }
   });
@@ -13286,7 +13591,7 @@ function create_if_block_122(ctx) {
         ctx2[3];
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13306,7 +13611,7 @@ function create_if_block_122(ctx) {
     }
   };
 }
-function create_default_slot_10(ctx) {
+function create_default_slot_122(ctx) {
   let icons_down;
   let current;
   icons_down = new Icons_default.Down({ props: { theme: (
@@ -13353,9 +13658,12 @@ function create_if_block_52(ctx) {
   let t1;
   let current_block_type_index_2;
   let if_block2;
-  let if_block2_anchor;
+  let t2;
+  let current_block_type_index_3;
+  let if_block3;
+  let if_block3_anchor;
   let current;
-  const if_block_creators = [create_if_block_10, create_if_block_11];
+  const if_block_creators = [create_if_block_122, create_if_block_132];
   const if_blocks = [];
   function select_block_type_1(ctx2, dirty) {
     if (
@@ -13373,9 +13681,27 @@ function create_if_block_52(ctx) {
   if (~(current_block_type_index = select_block_type_1(ctx))) {
     if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   }
-  const if_block_creators_1 = [create_if_block_8, create_if_block_9];
+  const if_block_creators_1 = [create_if_block_10, create_if_block_11];
   const if_blocks_1 = [];
   function select_block_type_2(ctx2, dirty) {
+    if (
+      /*pencilType*/
+      ctx2[20] === "stroke"
+    )
+      return 0;
+    if (
+      /*pencilType*/
+      ctx2[20] !== "stroke"
+    )
+      return 1;
+    return -1;
+  }
+  if (~(current_block_type_index_1 = select_block_type_2(ctx))) {
+    if_block1 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
+  }
+  const if_block_creators_2 = [create_if_block_8, create_if_block_9];
+  const if_blocks_2 = [];
+  function select_block_type_3(ctx2, dirty) {
     if (
       /*showLaserPen*/
       ctx2[21] && /*pencilType*/
@@ -13390,12 +13716,12 @@ function create_if_block_52(ctx) {
       return 1;
     return -1;
   }
-  if (~(current_block_type_index_1 = select_block_type_2(ctx))) {
-    if_block1 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
+  if (~(current_block_type_index_2 = select_block_type_3(ctx))) {
+    if_block2 = if_blocks_2[current_block_type_index_2] = if_block_creators_2[current_block_type_index_2](ctx);
   }
-  const if_block_creators_2 = [create_if_block_6, create_if_block_7];
-  const if_blocks_2 = [];
-  function select_block_type_3(ctx2, dirty) {
+  const if_block_creators_3 = [create_if_block_62, create_if_block_72];
+  const if_blocks_3 = [];
+  function select_block_type_4(ctx2, dirty) {
     if (
       /*pencilType*/
       ctx2[20] === "mark"
@@ -13408,8 +13734,8 @@ function create_if_block_52(ctx) {
       return 1;
     return -1;
   }
-  if (~(current_block_type_index_2 = select_block_type_3(ctx))) {
-    if_block2 = if_blocks_2[current_block_type_index_2] = if_block_creators_2[current_block_type_index_2](ctx);
+  if (~(current_block_type_index_3 = select_block_type_4(ctx))) {
+    if_block3 = if_blocks_3[current_block_type_index_3] = if_block_creators_3[current_block_type_index_3](ctx);
   }
   return {
     c() {
@@ -13421,7 +13747,10 @@ function create_if_block_52(ctx) {
       t1 = space();
       if (if_block2)
         if_block2.c();
-      if_block2_anchor = empty();
+      t2 = space();
+      if (if_block3)
+        if_block3.c();
+      if_block3_anchor = empty();
     },
     m(target, anchor) {
       if (~current_block_type_index) {
@@ -13435,7 +13764,11 @@ function create_if_block_52(ctx) {
       if (~current_block_type_index_2) {
         if_blocks_2[current_block_type_index_2].m(target, anchor);
       }
-      insert(target, if_block2_anchor, anchor);
+      insert(target, t2, anchor);
+      if (~current_block_type_index_3) {
+        if_blocks_3[current_block_type_index_3].m(target, anchor);
+      }
+      insert(target, if_block3_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -13518,42 +13851,274 @@ function create_if_block_52(ctx) {
             if_block2.p(ctx2, dirty);
           }
           transition_in(if_block2, 1);
-          if_block2.m(if_block2_anchor.parentNode, if_block2_anchor);
+          if_block2.m(t2.parentNode, t2);
         } else {
           if_block2 = null;
         }
       }
+      let previous_block_index_3 = current_block_type_index_3;
+      current_block_type_index_3 = select_block_type_4(ctx2);
+      if (current_block_type_index_3 === previous_block_index_3) {
+        if (~current_block_type_index_3) {
+          if_blocks_3[current_block_type_index_3].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block3) {
+          group_outros();
+          transition_out(if_blocks_3[previous_block_index_3], 1, 1, () => {
+            if_blocks_3[previous_block_index_3] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index_3) {
+          if_block3 = if_blocks_3[current_block_type_index_3];
+          if (!if_block3) {
+            if_block3 = if_blocks_3[current_block_type_index_3] = if_block_creators_3[current_block_type_index_3](ctx2);
+            if_block3.c();
+          } else {
+            if_block3.p(ctx2, dirty);
+          }
+          transition_in(if_block3, 1);
+          if_block3.m(if_block3_anchor.parentNode, if_block3_anchor);
+        } else {
+          if_block3 = null;
+        }
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block0);
+      transition_in(if_block1);
+      transition_in(if_block2);
+      transition_in(if_block3);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block0);
+      transition_out(if_block1);
+      transition_out(if_block2);
+      transition_out(if_block3);
+      current = false;
+    },
+    d(detaching) {
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].d(detaching);
+      }
+      if (detaching)
+        detach(t0);
+      if (~current_block_type_index_1) {
+        if_blocks_1[current_block_type_index_1].d(detaching);
+      }
+      if (detaching)
+        detach(t1);
+      if (~current_block_type_index_2) {
+        if_blocks_2[current_block_type_index_2].d(detaching);
+      }
+      if (detaching)
+        detach(t2);
+      if (~current_block_type_index_3) {
+        if_blocks_3[current_block_type_index_3].d(detaching);
+      }
+      if (detaching)
+        detach(if_block3_anchor);
+    }
+  };
+}
+function create_if_block_132(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[17]
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_11] },
+    $$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] & /*btn_props*/
+      131072 ? get_spread_update(button_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        131072 && get_spread_object(
+          /*btn_props*/
+          ctx2[17]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[2] & /*$$scope*/
+      1024) {
+        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_if_block_122(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[17]
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_10] },
+    $$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",
+    /*useNormalPencil*/
+    ctx[38]
+  );
+  return {
+    c() {
+      create_component(button.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button_changes = dirty[0] & /*btn_props*/
+      131072 ? get_spread_update(button_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        131072 && get_spread_object(
+          /*btn_props*/
+          ctx2[17]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[2] & /*$$scope*/
+      1024) {
+        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_11(ctx) {
+  let icons_pencilfilled;
+  let current;
+  icons_pencilfilled = new Icons_default.PencilFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[1]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_pencilfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencilfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencilfilled_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_pencilfilled_changes.theme = /*theme*/
+        ctx2[1];
+      icons_pencilfilled.$set(icons_pencilfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencilfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencilfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencilfilled, detaching);
+    }
+  };
+}
+function create_default_slot_10(ctx) {
+  let icons_pencil;
+  let current;
+  icons_pencil = new Icons_default.Pencil({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
+  return {
+    c() {
+      create_component(icons_pencil.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencil, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencil_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_pencil_changes.theme = /*theme*/
+        ctx2[1];
+      icons_pencil.$set(icons_pencil_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(if_block0);
-      transition_in(if_block1);
-      transition_in(if_block2);
+      transition_in(icons_pencil.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(if_block0);
-      transition_out(if_block1);
-      transition_out(if_block2);
+      transition_out(icons_pencil.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      if (~current_block_type_index) {
-        if_blocks[current_block_type_index].d(detaching);
-      }
-      if (detaching)
-        detach(t0);
-      if (~current_block_type_index_1) {
-        if_blocks_1[current_block_type_index_1].d(detaching);
-      }
-      if (detaching)
-        detach(t1);
-      if (~current_block_type_index_2) {
-        if_blocks_2[current_block_type_index_2].d(detaching);
-      }
-      if (detaching)
-        detach(if_block2_anchor);
+      destroy_component(icons_pencil, detaching);
     }
   };
 }
@@ -13573,6 +14138,11 @@ function create_if_block_11(ctx) {
     button_props = assign(button_props, button_spread_levels[i]);
   }
   button = new Button_default({ props: button_props });
+  button.$on(
+    "click",
+    /*useStrokePencil*/
+    ctx[39]
+  );
   return {
     c() {
       create_component(button.$$.fragment);
@@ -13594,7 +14164,7 @@ function create_if_block_11(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13630,11 +14200,6 @@ function create_if_block_10(ctx) {
     button_props = assign(button_props, button_spread_levels[i]);
   }
   button = new Button_default({ props: button_props });
-  button.$on(
-    "click",
-    /*usePencil*/
-    ctx[38]
-  );
   return {
     c() {
       create_component(button.$$.fragment);
@@ -13656,7 +14221,7 @@ function create_if_block_10(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13677,80 +14242,80 @@ function create_if_block_10(ctx) {
   };
 }
 function create_default_slot_9(ctx) {
-  let icons_pencilfilled;
+  let icons_strokepencil;
   let current;
-  icons_pencilfilled = new Icons_default.PencilFilled({
-    props: { theme: (
-      /*theme*/
-      ctx[1]
-    ), active: true }
-  });
+  icons_strokepencil = new Icons_default.StrokePencil({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
   return {
     c() {
-      create_component(icons_pencilfilled.$$.fragment);
+      create_component(icons_strokepencil.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_pencilfilled, target, anchor);
+      mount_component(icons_strokepencil, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_pencilfilled_changes = {};
+      const icons_strokepencil_changes = {};
       if (dirty[0] & /*theme*/
       2)
-        icons_pencilfilled_changes.theme = /*theme*/
+        icons_strokepencil_changes.theme = /*theme*/
         ctx2[1];
-      icons_pencilfilled.$set(icons_pencilfilled_changes);
+      icons_strokepencil.$set(icons_strokepencil_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_pencilfilled.$$.fragment, local);
+      transition_in(icons_strokepencil.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_pencilfilled.$$.fragment, local);
+      transition_out(icons_strokepencil.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_pencilfilled, detaching);
+      destroy_component(icons_strokepencil, detaching);
     }
   };
 }
 function create_default_slot_8(ctx) {
-  let icons_pencil;
+  let icons_strokepencilfilled;
   let current;
-  icons_pencil = new Icons_default.Pencil({ props: { theme: (
-    /*theme*/
-    ctx[1]
-  ) } });
+  icons_strokepencilfilled = new Icons_default.StrokePencilFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[1]
+    ), active: true }
+  });
   return {
     c() {
-      create_component(icons_pencil.$$.fragment);
+      create_component(icons_strokepencilfilled.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_pencil, target, anchor);
+      mount_component(icons_strokepencilfilled, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_pencil_changes = {};
+      const icons_strokepencilfilled_changes = {};
       if (dirty[0] & /*theme*/
       2)
-        icons_pencil_changes.theme = /*theme*/
+        icons_strokepencilfilled_changes.theme = /*theme*/
         ctx2[1];
-      icons_pencil.$set(icons_pencil_changes);
+      icons_strokepencilfilled.$set(icons_strokepencilfilled_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_pencil.$$.fragment, local);
+      transition_in(icons_strokepencilfilled.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_pencil.$$.fragment, local);
+      transition_out(icons_strokepencilfilled.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_pencil, detaching);
+      destroy_component(icons_strokepencilfilled, detaching);
     }
   };
 }
@@ -13773,7 +14338,7 @@ function create_if_block_9(ctx) {
   button.$on(
     "click",
     /*useLaserPen*/
-    ctx[39]
+    ctx[40]
   );
   return {
     c() {
@@ -13796,7 +14361,7 @@ function create_if_block_9(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13853,7 +14418,7 @@ function create_if_block_8(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -13951,7 +14516,7 @@ function create_default_slot_6(ctx) {
     }
   };
 }
-function create_if_block_7(ctx) {
+function create_if_block_72(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -13970,7 +14535,7 @@ function create_if_block_7(ctx) {
   button.$on(
     "click",
     /*useMarkPen*/
-    ctx[40]
+    ctx[41]
   );
   return {
     c() {
@@ -13993,7 +14558,7 @@ function create_if_block_7(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14013,7 +14578,7 @@ function create_if_block_7(ctx) {
     }
   };
 }
-function create_if_block_6(ctx) {
+function create_if_block_62(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -14050,7 +14615,7 @@ function create_if_block_6(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14158,7 +14723,7 @@ function create_if_block14(ctx) {
   let current;
   const if_block_creators = [create_if_block_33, create_if_block_42];
   const if_blocks = [];
-  function select_block_type_4(ctx2, dirty) {
+  function select_block_type_5(ctx2, dirty) {
     if (
       /*eraserType*/
       ctx2[18] !== "eraser"
@@ -14171,12 +14736,12 @@ function create_if_block14(ctx) {
       return 1;
     return -1;
   }
-  if (~(current_block_type_index = select_block_type_4(ctx))) {
+  if (~(current_block_type_index = select_block_type_5(ctx))) {
     if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   }
-  const if_block_creators_1 = [create_if_block_110, create_if_block_24];
+  const if_block_creators_1 = [create_if_block_110, create_if_block_26];
   const if_blocks_1 = [];
-  function select_block_type_5(ctx2, dirty) {
+  function select_block_type_6(ctx2, dirty) {
     if (
       /*eraserType*/
       ctx2[18] === "pencilEraser"
@@ -14189,7 +14754,7 @@ function create_if_block14(ctx) {
       return 1;
     return -1;
   }
-  if (~(current_block_type_index_1 = select_block_type_5(ctx))) {
+  if (~(current_block_type_index_1 = select_block_type_6(ctx))) {
     if_block1 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx);
   }
   return {
@@ -14214,7 +14779,7 @@ function create_if_block14(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_4(ctx2);
+      current_block_type_index = select_block_type_5(ctx2);
       if (current_block_type_index === previous_block_index) {
         if (~current_block_type_index) {
           if_blocks[current_block_type_index].p(ctx2, dirty);
@@ -14242,7 +14807,7 @@ function create_if_block14(ctx) {
         }
       }
       let previous_block_index_1 = current_block_type_index_1;
-      current_block_type_index_1 = select_block_type_5(ctx2);
+      current_block_type_index_1 = select_block_type_6(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);
@@ -14333,7 +14898,7 @@ function create_if_block_42(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14372,7 +14937,7 @@ function create_if_block_33(ctx) {
   button.$on(
     "click",
     /*useEraser*/
-    ctx[41]
+    ctx[42]
   );
   return {
     c() {
@@ -14395,7 +14960,7 @@ function create_if_block_33(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14493,7 +15058,7 @@ function create_default_slot_24(ctx) {
     }
   };
 }
-function create_if_block_24(ctx) {
+function create_if_block_26(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -14502,7 +15067,7 @@ function create_if_block_24(ctx) {
     ctx[17]
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_14] },
+    $$slots: { default: [create_default_slot_15] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -14512,7 +15077,7 @@ function create_if_block_24(ctx) {
   button.$on(
     "click",
     /*useEraserBitmap*/
-    ctx[42]
+    ctx[43]
   );
   return {
     c() {
@@ -14535,7 +15100,7 @@ function create_if_block_24(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14592,7 +15157,7 @@ function create_if_block_110(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      256) {
+      1024) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -14612,7 +15177,7 @@ function create_if_block_110(ctx) {
     }
   };
 }
-function create_default_slot_14(ctx) {
+function create_default_slot_15(ctx) {
   let icons_eraserbitmapfilled;
   let current;
   icons_eraserbitmapfilled = new Icons_default.EraserBitmapFilled({ props: { theme: (
@@ -14701,7 +15266,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[60] + ""
+    ctx[62] + ""
   );
   let t1;
   let span_class_value;
@@ -14723,40 +15288,40 @@ function create_each_block4(ctx) {
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + /*theme*/
       ctx[1]);
       if (!src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[59]))
+      ctx[61]))
         attr(img, "src", img_src_value);
       attr(img, "alt", img_alt_value = /*kind*/
-      ctx[61]);
+      ctx[63]);
       attr(img, "title", img_title_value = /*label*/
-      ctx[60]);
+      ctx[62]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + /*theme*/
       ctx[1]);
       attr(button, "class", button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[61] + " " + /*theme*/
+      ctx[63] + " " + /*theme*/
       ctx[1]);
       attr(button, "title", button_title_value = /*label*/
-      ctx[60] + /*state*/
-      (ctx[63] && /*state*/
-      ctx[63].reason ? ": " + /*state*/
-      ctx[63].reason : ""));
+      ctx[62] + /*state*/
+      (ctx[65] && /*state*/
+      ctx[65].reason ? ": " + /*state*/
+      ctx[65].reason : ""));
       attr(button, "data-app-kind", button_data_app_kind_value = /*netless_app*/
-      ctx[58].kind);
+      ctx[60].kind);
       button.disabled = button_disabled_value = /*state*/
-      ctx[63] && /*state*/
-      ctx[63].status !== "idle";
+      ctx[65] && /*state*/
+      ctx[65].status !== "idle";
       toggle_class(
         button,
         "is-loading",
         /*state*/
-        ctx[63] && /*state*/
-        ctx[63].status === "loading"
+        ctx[65] && /*state*/
+        ctx[65].status === "loading"
       );
       toggle_class(
         button,
         "is-failed",
         /*state*/
-        ctx[63] && /*state*/
-        ctx[63].status === "failed"
+        ctx[65] && /*state*/
+        ctx[65].status === "failed"
       );
     },
     m(target, anchor) {
@@ -14770,9 +15335,9 @@ function create_each_block4(ctx) {
         dispose = listen(button, "click", function() {
           if (is_function(
             /*on_click*/
-            ctx[64]
+            ctx[66]
           ))
-            ctx[64].apply(this, arguments);
+            ctx[66].apply(this, arguments);
         });
         mounted = true;
       }
@@ -14786,22 +15351,22 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps*/
       33554432 && !src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[59])) {
+      ctx[61])) {
         attr(img, "src", img_src_value);
       }
       if (dirty[0] & /*$apps*/
       33554432 && img_alt_value !== (img_alt_value = /*kind*/
-      ctx[61])) {
+      ctx[63])) {
         attr(img, "alt", img_alt_value);
       }
       if (dirty[0] & /*$apps*/
       33554432 && img_title_value !== (img_title_value = /*label*/
-      ctx[60])) {
+      ctx[62])) {
         attr(img, "title", img_title_value);
       }
       if (dirty[0] & /*$apps*/
       33554432 && t1_value !== (t1_value = /*label*/
-      ctx[60] + ""))
+      ctx[62] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & /*theme*/
       2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + /*theme*/
@@ -14810,27 +15375,27 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps, theme*/
       33554434 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[61] + " " + /*theme*/
+      ctx[63] + " " + /*theme*/
       ctx[1])) {
         attr(button, "class", button_class_value);
       }
       if (dirty[0] & /*$apps, $status*/
       100663296 && button_title_value !== (button_title_value = /*label*/
-      ctx[60] + /*state*/
-      (ctx[63] && /*state*/
-      ctx[63].reason ? ": " + /*state*/
-      ctx[63].reason : ""))) {
+      ctx[62] + /*state*/
+      (ctx[65] && /*state*/
+      ctx[65].reason ? ": " + /*state*/
+      ctx[65].reason : ""))) {
         attr(button, "title", button_title_value);
       }
       if (dirty[0] & /*$apps*/
       33554432 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
-      ctx[58].kind)) {
+      ctx[60].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
       if (dirty[0] & /*$status, $apps*/
       100663296 && button_disabled_value !== (button_disabled_value = /*state*/
-      ctx[63] && /*state*/
-      ctx[63].status !== "idle")) {
+      ctx[65] && /*state*/
+      ctx[65].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -14839,8 +15404,8 @@ function create_each_block4(ctx) {
           button,
           "is-loading",
           /*state*/
-          ctx[63] && /*state*/
-          ctx[63].status === "loading"
+          ctx[65] && /*state*/
+          ctx[65].status === "loading"
         );
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -14849,8 +15414,8 @@ function create_each_block4(ctx) {
           button,
           "is-failed",
           /*state*/
-          ctx[63] && /*state*/
-          ctx[63].status === "failed"
+          ctx[65] && /*state*/
+          ctx[65].status === "failed"
         );
       }
     },
@@ -14862,7 +15427,7 @@ function create_each_block4(ctx) {
     }
   };
 }
-function create_fragment74(ctx) {
+function create_fragment76(ctx) {
   var _a, _b;
   let t0;
   let div0;
@@ -14870,42 +15435,44 @@ function create_fragment74(ctx) {
   let scrollHeight_action;
   let t2;
   let t3;
-  let div11;
-  let div3;
+  let div12;
+  let div4;
   let div1;
   let t4;
-  let strokewidth0;
-  let t5;
   let div2;
+  let t5;
+  let strokewidth0;
   let t6;
-  let strokecolor0;
+  let div3;
   let t7;
-  let div4;
-  let textcolor;
+  let strokecolor0;
   let t8;
-  let div7;
-  let selectshapes;
-  let t9;
   let div5;
+  let textcolor;
+  let t9;
+  let div8;
+  let selectshapes;
   let t10;
-  let strokewidth1;
-  let t11;
   let div6;
+  let t11;
+  let strokewidth1;
   let t12;
-  let strokecolor1;
+  let div7;
   let t13;
-  let div9;
-  let div8;
+  let strokecolor1;
   let t14;
-  let erasersize;
-  let t15;
   let div10;
+  let div9;
+  let t15;
+  let erasersize;
+  let t16;
+  let div11;
   let current;
   let mounted;
   let dispose;
   let if_block0 = (
     /*scrollable*/
-    ctx[5] && create_if_block_23(ctx)
+    ctx[5] && create_if_block_25(ctx)
   );
   let each_value_1 = (
     /*items*/
@@ -14919,10 +15486,10 @@ function create_fragment74(ctx) {
     each_blocks_1[i] = null;
   });
   let if_block1 = !/*hide_apps*/
-  ctx[8] && create_if_block_132(ctx);
+  ctx[8] && create_if_block_15(ctx);
   let if_block2 = (
     /*scrollable*/
-    ctx[5] && create_if_block_122(ctx)
+    ctx[5] && create_if_block_14(ctx)
   );
   let if_block3 = !!/*app*/
   ((_a = ctx[0]) == null ? void 0 : _a.appliancePlugin) && create_if_block_52(ctx);
@@ -15080,40 +15647,42 @@ function create_fragment74(ctx) {
       if (if_block2)
         if_block2.c();
       t3 = space();
-      div11 = element("div");
-      div3 = element("div");
+      div12 = element("div");
+      div4 = element("div");
       div1 = element("div");
       if (if_block3)
         if_block3.c();
       t4 = space();
-      create_component(strokewidth0.$$.fragment);
-      t5 = space();
       div2 = element("div");
+      t5 = space();
+      create_component(strokewidth0.$$.fragment);
       t6 = space();
-      create_component(strokecolor0.$$.fragment);
+      div3 = element("div");
       t7 = space();
-      div4 = element("div");
-      create_component(textcolor.$$.fragment);
+      create_component(strokecolor0.$$.fragment);
       t8 = space();
-      div7 = element("div");
-      create_component(selectshapes.$$.fragment);
-      t9 = space();
       div5 = element("div");
+      create_component(textcolor.$$.fragment);
+      t9 = space();
+      div8 = element("div");
+      create_component(selectshapes.$$.fragment);
       t10 = space();
-      create_component(strokewidth1.$$.fragment);
-      t11 = space();
       div6 = element("div");
+      t11 = space();
+      create_component(strokewidth1.$$.fragment);
       t12 = space();
-      create_component(strokecolor1.$$.fragment);
+      div7 = element("div");
       t13 = space();
+      create_component(strokecolor1.$$.fragment);
+      t14 = space();
+      div10 = element("div");
       div9 = element("div");
-      div8 = element("div");
       if (if_block4)
         if_block4.c();
-      t14 = space();
-      create_component(erasersize.$$.fragment);
       t15 = space();
-      div10 = element("div");
+      create_component(erasersize.$$.fragment);
+      t16 = space();
+      div11 = element("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
@@ -15126,22 +15695,23 @@ function create_fragment74(ctx) {
       );
       attr(div1, "class", name5 + "-panel-switch-pencil");
       attr(div2, "class", name5 + "-panel-divider");
-      attr(div3, "class", name5 + "-panel pencil");
-      attr(div4, "class", name5 + "-panel text");
-      attr(div5, "class", name5 + "-panel-divider");
+      attr(div3, "class", name5 + "-panel-divider");
+      attr(div4, "class", name5 + "-panel pencil");
+      attr(div5, "class", name5 + "-panel text");
       attr(div6, "class", name5 + "-panel-divider");
-      attr(div7, "class", name5 + "-panel shapes");
-      attr(div8, "class", name5 + "-panel-switch-earser");
-      attr(div9, "class", name5 + "-panel earser");
-      attr(div10, "class", name5 + "-panel apps");
+      attr(div7, "class", name5 + "-panel-divider");
+      attr(div8, "class", name5 + "-panel shapes");
+      attr(div9, "class", name5 + "-panel-switch-earser");
+      attr(div10, "class", name5 + "-panel earser");
+      attr(div11, "class", name5 + "-panel apps");
       set_style(
-        div10,
+        div11,
         "--n",
         /*$apps*/
         ctx[25].length
       );
-      attr(div11, "class", name5 + "-panel-wrapper");
-      set_style(div11, "display", "none");
+      attr(div12, "class", name5 + "-panel-wrapper");
+      set_style(div12, "display", "none");
     },
     m(target, anchor) {
       if (if_block0)
@@ -15160,50 +15730,52 @@ function create_fragment74(ctx) {
       if (if_block2)
         if_block2.m(target, anchor);
       insert(target, t3, anchor);
-      insert(target, div11, anchor);
-      append(div11, div3);
-      append(div3, div1);
+      insert(target, div12, anchor);
+      append(div12, div4);
+      append(div4, div1);
       if (if_block3)
         if_block3.m(div1, null);
-      append(div3, t4);
-      mount_component(strokewidth0, div3, null);
-      append(div3, t5);
-      append(div3, div2);
-      append(div3, t6);
-      mount_component(strokecolor0, div3, null);
-      ctx[50](div3);
-      append(div11, t7);
-      append(div11, div4);
-      mount_component(textcolor, div4, null);
-      ctx[51](div4);
-      append(div11, t8);
-      append(div11, div7);
-      mount_component(selectshapes, div7, null);
-      append(div7, t9);
-      append(div7, div5);
-      append(div7, t10);
-      mount_component(strokewidth1, div7, null);
-      append(div7, t11);
-      append(div7, div6);
-      append(div7, t12);
-      mount_component(strokecolor1, div7, null);
-      ctx[52](div7);
-      append(div11, t13);
-      append(div11, div9);
-      append(div9, div8);
+      append(div4, t4);
+      append(div4, div2);
+      append(div4, t5);
+      mount_component(strokewidth0, div4, null);
+      append(div4, t6);
+      append(div4, div3);
+      append(div4, t7);
+      mount_component(strokecolor0, div4, null);
+      ctx[52](div4);
+      append(div12, t8);
+      append(div12, div5);
+      mount_component(textcolor, div5, null);
+      ctx[53](div5);
+      append(div12, t9);
+      append(div12, div8);
+      mount_component(selectshapes, div8, null);
+      append(div8, t10);
+      append(div8, div6);
+      append(div8, t11);
+      mount_component(strokewidth1, div8, null);
+      append(div8, t12);
+      append(div8, div7);
+      append(div8, t13);
+      mount_component(strokecolor1, div8, null);
+      ctx[54](div8);
+      append(div12, t14);
+      append(div12, div10);
+      append(div10, div9);
       if (if_block4)
-        if_block4.m(div8, null);
-      append(div9, t14);
-      mount_component(erasersize, div9, null);
-      ctx[53](div9);
-      append(div11, t15);
-      append(div11, div10);
+        if_block4.m(div9, null);
+      append(div10, t15);
+      mount_component(erasersize, div10, null);
+      ctx[55](div10);
+      append(div12, t16);
+      append(div12, div11);
       for (let i = 0; i < each_blocks.length; i += 1) {
         if (each_blocks[i]) {
-          each_blocks[i].m(div10, null);
+          each_blocks[i].m(div11, null);
         }
       }
-      ctx[55](div10);
+      ctx[57](div11);
       current = true;
       if (!mounted) {
         dispose = [
@@ -15236,7 +15808,7 @@ function create_fragment74(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_23(ctx2);
+          if_block0 = create_if_block_25(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -15281,7 +15853,7 @@ function create_fragment74(ctx) {
             transition_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block_132(ctx2);
+          if_block1 = create_if_block_15(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
           if_block1.m(div0, null);
@@ -15320,7 +15892,7 @@ function create_fragment74(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block_122(ctx2);
+          if_block2 = create_if_block_14(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(t3.parentNode, t3);
@@ -15465,7 +16037,7 @@ function create_fragment74(ctx) {
           if_block4 = create_if_block14(ctx2);
           if_block4.c();
           transition_in(if_block4, 1);
-          if_block4.m(div8, null);
+          if_block4.m(div9, null);
         }
       } else if (if_block4) {
         group_outros();
@@ -15500,7 +16072,7 @@ function create_fragment74(ctx) {
           } else {
             each_blocks[i] = create_each_block4(child_ctx);
             each_blocks[i].c();
-            each_blocks[i].m(div10, null);
+            each_blocks[i].m(div11, null);
           }
         }
         for (; i < each_blocks.length; i += 1) {
@@ -15511,7 +16083,7 @@ function create_fragment74(ctx) {
       if (!current || dirty[0] & /*$apps*/
       33554432) {
         set_style(
-          div10,
+          div11,
           "--n",
           /*$apps*/
           ctx2[25].length
@@ -15574,31 +16146,31 @@ function create_fragment74(ctx) {
       if (detaching)
         detach(t3);
       if (detaching)
-        detach(div11);
+        detach(div12);
       if (if_block3)
         if_block3.d();
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[50](null);
+      ctx[52](null);
       destroy_component(textcolor);
-      ctx[51](null);
+      ctx[53](null);
       destroy_component(selectshapes);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[52](null);
+      ctx[54](null);
       if (if_block4)
         if_block4.d();
       destroy_component(erasersize);
-      ctx[53](null);
-      destroy_each(each_blocks, detaching);
       ctx[55](null);
+      destroy_each(each_blocks, detaching);
+      ctx[57](null);
       mounted = false;
       run_all(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance74($$self, $$props, $$invalidate) {
+function instance76($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -15610,12 +16182,13 @@ function instance74($$self, $$props, $$invalidate) {
   let showLaserPen;
   let hasUseLaserPen;
   let hasUseMarkPen;
+  let hasUseStroke;
   let pencilType;
   let hasUseEraserBitmap;
   let eraserType;
   let $top;
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(48, $memberState = $$value)), memberState);
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(49, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(50, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(51, $scroll_height = $$value)), scroll_height);
   let $apps;
   let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(26, $status = $$value)), status);
   component_subscribe($$self, apps, ($$value) => $$invalidate(25, $apps = $$value));
@@ -15641,7 +16214,7 @@ function instance74($$self, $$props, $$invalidate) {
   let eraser_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(57, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(59, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -15661,12 +16234,14 @@ function instance74($$self, $$props, $$invalidate) {
           useMarkPen();
         } else if (pencilType === "laser") {
           useLaserPen();
+        } else if (pencilType === "stroke") {
+          useStrokePencil();
         } else {
-          usePencil();
+          useNormalPencil();
         }
       }
     } else {
-      usePencil();
+      useNormalPencil();
     }
   }
   function text2() {
@@ -15694,12 +16269,12 @@ function instance74($$self, $$props, $$invalidate) {
   function clear() {
     app == null ? void 0 : app.cleanCurrentScene();
   }
-  function usePencil() {
+  function useNormalPencil() {
     var _a;
     if (hasAppliancePlugin) {
       (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
         currentApplianceName: "pencil",
-        strokeType: "Stroke",
+        strokeType: "Normal",
         useLaserPen: false,
         strokeOpacity: 1
       });
@@ -15707,6 +16282,15 @@ function instance74($$self, $$props, $$invalidate) {
       app == null ? void 0 : app.setAppliance("pencil");
     }
   }
+  function useStrokePencil() {
+    var _a;
+    (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
+      currentApplianceName: "pencil",
+      strokeType: "Stroke",
+      useLaserPen: false,
+      strokeOpacity: 1
+    });
+  }
   function useLaserPen() {
     var _a;
     (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
@@ -15741,25 +16325,25 @@ function instance74($$self, $$props, $$invalidate) {
       isLine: false
     });
   }
-  function div3_binding($$value) {
+  function div4_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       pencil_panel = $$value;
       $$invalidate(12, pencil_panel);
     });
   }
-  function div4_binding($$value) {
+  function div5_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       text_panel = $$value;
       $$invalidate(13, text_panel);
     });
   }
-  function div7_binding($$value) {
+  function div8_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       shapes_panel = $$value;
       $$invalidate(14, shapes_panel);
     });
   }
-  function div9_binding($$value) {
+  function div10_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       eraser_panel = $$value;
       $$invalidate(16, eraser_panel);
@@ -15769,7 +16353,7 @@ function instance74($$self, $$props, $$invalidate) {
     app && onClick(app);
     tippy_hide_all();
   };
-  function div10_binding($$value) {
+  function div11_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
       $$invalidate(15, apps_panel);
@@ -15787,7 +16371,7 @@ function instance74($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(43, computed_height = $$props2.computed_height);
+      $$invalidate(44, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("placement" in $$props2)
@@ -15817,11 +16401,11 @@ function instance74($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(47, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(49, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & /*t*/
     2048 | $$self.$$.dirty[1] & /*hotkeys*/
-    65536) {
+    262144) {
       $$invalidate(24, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
@@ -15837,7 +16421,7 @@ function instance74($$self, $$props, $$invalidate) {
       $$subscribe_memberState($$invalidate(23, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & /*$memberState*/
-    131072) {
+    524288) {
       $$invalidate(19, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[0] & /*app*/
@@ -15846,7 +16430,7 @@ function instance74($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*scrollable*/
     32 | $$self.$$.dirty[1] & /*$scroll_height, computed_height*/
-    266240) {
+    1056768) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
     if ($$self.$$.dirty[0] & /*app*/
@@ -15859,25 +16443,30 @@ function instance74($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*hasAppliancePlugin*/
     1024 | $$self.$$.dirty[1] & /*$memberState*/
-    131072) {
-      $$invalidate(46, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
+    524288) {
+      $$invalidate(48, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
     }
     if ($$self.$$.dirty[0] & /*hasAppliancePlugin*/
     1024 | $$self.$$.dirty[1] & /*$memberState*/
-    131072) {
-      $$invalidate(45, hasUseMarkPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeOpacity) === 0.5 || false);
+    524288) {
+      $$invalidate(47, hasUseMarkPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeOpacity) === 0.5 || false);
     }
-    if ($$self.$$.dirty[1] & /*hasUseLaserPen, hasUseMarkPen*/
-    49152) {
-      $$invalidate(20, pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil");
+    if ($$self.$$.dirty[0] & /*hasAppliancePlugin*/
+    1024 | $$self.$$.dirty[1] & /*$memberState*/
+    524288) {
+      $$invalidate(46, hasUseStroke = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeType) === "Stroke" || false);
+    }
+    if ($$self.$$.dirty[1] & /*hasUseLaserPen, hasUseMarkPen, hasUseStroke*/
+    229376) {
+      $$invalidate(20, pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : hasUseStroke ? "stroke" : "pencil");
     }
     if ($$self.$$.dirty[0] & /*hasAppliancePlugin*/
     1024 | $$self.$$.dirty[1] & /*$memberState*/
-    131072) {
-      $$invalidate(44, hasUseEraserBitmap = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.isLine) === false);
+    524288) {
+      $$invalidate(45, hasUseEraserBitmap = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.isLine) === false);
     }
     if ($$self.$$.dirty[1] & /*hasUseEraserBitmap*/
-    8192) {
+    16384) {
       $$invalidate(18, eraserType = hasUseEraserBitmap ? "pencilEraser" : "eraser");
     }
   };
@@ -15920,24 +16509,26 @@ function instance74($$self, $$props, $$invalidate) {
     hand,
     laserPointer,
     clear,
-    usePencil,
+    useNormalPencil,
+    useStrokePencil,
     useLaserPen,
     useMarkPen,
     useEraser,
     useEraserBitmap,
     computed_height,
     hasUseEraserBitmap,
+    hasUseStroke,
     hasUseMarkPen,
     hasUseLaserPen,
     hotkeys,
     $memberState,
     $scroll_height,
-    div3_binding,
     div4_binding,
-    div7_binding,
-    div9_binding,
+    div5_binding,
+    div8_binding,
+    div10_binding,
     func,
-    div10_binding
+    div11_binding
   ];
 }
 var Contents = class extends SvelteComponent {
@@ -15946,8 +16537,8 @@ var Contents = class extends SvelteComponent {
     init(
       this,
       options,
-      instance74,
-      create_fragment74,
+      instance76,
+      create_fragment76,
       safe_not_equal,
       {
         app: 0,
@@ -15955,7 +16546,7 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 43,
+        computed_height: 44,
         scrollable: 5,
         placement: 6,
         items: 7,
@@ -16026,7 +16617,7 @@ function create_if_block15(ctx) {
     }
   };
 }
-function create_fragment75(ctx) {
+function create_fragment77(ctx) {
   let div1;
   let div0;
   let contents;
@@ -16296,7 +16887,7 @@ function create_fragment75(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance75($$self, $$props, $$invalidate) {
+function instance77($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -16415,7 +17006,7 @@ function instance75($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance75, create_fragment75, safe_not_equal, {
+    init(this, options, instance77, create_fragment77, safe_not_equal, {
       app: 1,
       theme: 2,
       language: 3,
@@ -16489,7 +17080,7 @@ function create_else_block_14(ctx) {
     }
   };
 }
-function create_if_block_25(ctx) {
+function create_if_block_27(ctx) {
   var _a;
   let icon;
   let current;
@@ -16722,7 +17313,7 @@ function create_default_slot_25(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_111, create_if_block_25, create_else_block_14];
+  const if_block_creators = [create_if_block_111, create_if_block_27, create_else_block_14];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
@@ -16958,7 +17549,7 @@ function create_if_block16(ctx) {
     }
   };
 }
-function create_default_slot_15(ctx) {
+function create_default_slot_16(ctx) {
   let span;
   let t0_value = (
     /*$playbackRate*/
@@ -17099,7 +17690,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment76(ctx) {
+function create_fragment78(ctx) {
   let div0;
   let button0;
   let t0;
@@ -17186,7 +17777,7 @@ function create_fragment76(ctx) {
         ctx[6]
       ),
       menu_placement: "top-end",
-      $$slots: { default: [create_default_slot_15] },
+      $$slots: { default: [create_default_slot_16] },
       $$scope: { ctx }
     }
   });
@@ -17376,7 +17967,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance76($$self, $$props, $$invalidate) {
+function instance78($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -17521,7 +18112,7 @@ function instance76($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance76, create_fragment76, safe_not_equal, {
+    init(this, options, instance78, create_fragment78, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -17590,7 +18181,7 @@ function create_if_block17(ctx) {
     }
   };
 }
-function create_fragment77(ctx) {
+function create_fragment79(ctx) {
   var _a;
   let div2;
   let div0;
@@ -17690,7 +18281,7 @@ function create_fragment77(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance77($$self, $$props, $$invalidate) {
+function instance79($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
@@ -17765,7 +18356,7 @@ function instance77($$self, $$props, $$invalidate) {
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance77, create_fragment77, not_equal, {
+    init(this, options, instance79, create_fragment79, not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -17843,7 +18434,7 @@ function create_if_block_34(ctx) {
     }
   };
 }
-function create_if_block_26(ctx) {
+function create_if_block_28(ctx) {
   let redoundo;
   let current;
   redoundo = new RedoUndo_default({
@@ -18017,7 +18608,7 @@ function create_if_block18(ctx) {
     }
   };
 }
-function create_fragment78(ctx) {
+function create_fragment80(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -18039,7 +18630,7 @@ function create_fragment78(ctx) {
   let if_block1 = (
     /*config*/
     ((_b = ctx[3].redo_undo) == null ? void 0 : _b.enable) !== false && !/*hidden_redo_undo*/
-    ctx[6] && create_if_block_26(ctx)
+    ctx[6] && create_if_block_28(ctx)
   );
   let if_block2 = (
     /*config*/
@@ -18180,7 +18771,7 @@ function create_fragment78(ctx) {
             transition_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block_26(ctx2);
+          if_block1 = create_if_block_28(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
           if_block1.m(div2, t2);
@@ -18298,7 +18889,7 @@ function create_fragment78(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance78($$self, $$props, $$invalidate) {
+function instance80($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -18510,7 +19101,7 @@ function instance78($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance78, create_fragment78, not_equal, {
+    init(this, options, instance80, create_fragment80, not_equal, {
       app: 0,
       theme: 1,
       language: 2,