npm - @netless/fastboard-ui - Versions diffs - 1.0.1 → 1.0.2 - Mend

@netless/fastboard-ui 1.0.1 → 1.0.2

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

Files changed (12) hide show

package/dist/index.js +1126 -471
package/dist/index.js.map +1 -1
package/dist/index.mjs +1126 -471
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +1101 -450
package/dist/index.svelte.mjs.map +1 -1
package/package.json +3 -3
package/src/components/Icons/MarkPen.svelte +20 -0
package/src/components/Icons/MarkPenFilled.svelte +20 -0
package/src/components/Icons/index.ts +4 -0
package/src/components/Toolbar/components/Contents.svelte +55 -17
package/src/components/Toolbar/definitions/Pencil.svelte +5 -3

package/dist/index.svelte.mjs CHANGED Viewed

@@ -3845,6 +3845,154 @@ var LaserPenFilled = class extends SvelteComponent {
   }
 };
 var LaserPenFilled_default = LaserPenFilled;
+function create_fragment51(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-stroke-color");
+      attr(path, "d", "m15.95 2.39l5.657 5.657a1 1 0 0 1 0 1.414l-7.778 7.778l-2.122.707l-1.414 1.415a1 1 0 0 1-1.414 0l-4.243-4.243a1 1 0 0 1 0-1.414L6.05 12.29l.707-2.122l7.779-7.778a1 1 0 0 1 1.414 0m.707 3.536l-6.364 6.364l1.414 1.414l6.364-6.364zM4.283 16.886l2.828 2.828l-1.414 1.415l-4.243-1.415z");
+      attr(g, "stroke-width", "1");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "scale(0.85 0.9) translate(2, 0)");
+      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 instance51($$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 MarkPen = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance51, create_fragment51, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var MarkPen_default = MarkPen;
+function create_fragment52(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", "m15.95 2.39l5.657 5.657a1 1 0 0 1 0 1.414l-7.778 7.778l-2.122.707l-1.414 1.415a1 1 0 0 1-1.414 0l-4.243-4.243a1 1 0 0 1 0-1.414L6.05 12.29l.707-2.122l7.779-7.778a1 1 0 0 1 1.414 0m.707 3.536l-6.364 6.364l1.414 1.414l6.364-6.364zM4.283 16.886l2.828 2.828l-1.414 1.415l-4.243-1.415z");
+      attr(g, "stroke-width", "1");
+      attr(g, "stroke-linecap", "round");
+      attr(g, "stroke-linejoin", "round");
+      attr(g, "transform", "scale(0.85 0.9) translate(2, 0)");
+      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 instance52($$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 MarkPenFilled = class extends SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance52, create_fragment52, safe_not_equal, { theme: 0, active: 1 });
+  }
+};
+var MarkPenFilled_default = MarkPenFilled;
 // src/components/Icons/index.ts
 var Icons = {
@@ -3896,7 +4044,9 @@ var Icons = {
   Pause: Pause_default,
   Loading: Loading_default,
   LaserPen: LaserPen_default,
-  LaserPenFilled: LaserPenFilled_default
+  LaserPenFilled: LaserPenFilled_default,
+  MarkPen: MarkPen_default,
+  MarkPenFilled: MarkPenFilled_default
 };
 var Icons_default = Icons;
 if (typeof window !== "undefined") {
@@ -3909,12 +4059,12 @@ if (typeof window !== "undefined") {
       {
         name: "className",
         defaultValue: "",
-        fn(instance74) {
+        fn(instance76) {
           function add() {
-            const el = instance74.popper.firstElementChild;
+            const el = instance76.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance74.props.className || "").trim();
+              const extra = (instance76.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
@@ -3922,7 +4072,7 @@ if (typeof window !== "undefined") {
           }
           function remove() {
             var _a;
-            (_a = instance74.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            (_a = instance76.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -3935,21 +4085,21 @@ if (typeof window !== "undefined") {
   });
 }
 var tippy = function(node, props) {
-  const instance74 = Tippy(node, props);
+  const instance76 = Tippy(node, props);
   return {
     update(props2) {
-      instance74.setProps(props2);
+      instance76.setProps(props2);
     },
     destroy() {
-      instance74.destroy();
+      instance76.destroy();
     }
   };
 };
 function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance74 = el._tippy;
-    if (instance74)
-      instance74.hide();
+    const instance76 = el._tippy;
+    if (instance76)
+      instance76.hide();
   });
 }
 var tippy_menu = {
@@ -4463,7 +4613,7 @@ function create_if_block_1(ctx) {
     }
   };
 }
-function create_fragment51(ctx) {
+function create_fragment53(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -4529,7 +4679,7 @@ function create_fragment51(ctx) {
     }
   };
 }
-function instance51($$self, $$props, $$invalidate) {
+function instance53($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
@@ -4587,7 +4737,7 @@ function instance51($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance51, create_fragment51, safe_not_equal, {
+    init(this, options, instance53, create_fragment53, safe_not_equal, {
       class: 0,
       name: 1,
       theme: 2,
@@ -4792,7 +4942,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment52(ctx) {
+function create_fragment54(ctx) {
   let div;
   let button0;
   let t_1;
@@ -4933,7 +5083,7 @@ var i18n = {
   "zh-CN": { redo: "\u91CD\u505A", undo: "\u64A4\u9500" }
 };
 var name = "fastboard-redo-undo";
-function instance52($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -5034,7 +5184,7 @@ function instance52($$self, $$props, $$invalidate) {
 var RedoUndo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance52, create_fragment52, safe_not_equal, {
+    init(this, options, instance54, create_fragment54, safe_not_equal, {
       app: 12,
       theme: 0,
       language: 13,
@@ -5389,7 +5539,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment53(ctx) {
+function create_fragment55(ctx) {
   let div;
   let button0;
   let t0;
@@ -5624,7 +5774,7 @@ var i18n2 = {
   "zh-CN": { prev: "\u4E0A\u4E00\u9875", next: "\u4E0B\u4E00\u9875", add: "\u6DFB\u52A0\u9875\u9762" }
 };
 var name2 = "fastboard-page-control";
-function instance53($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -5730,7 +5880,7 @@ function instance53($$self, $$props, $$invalidate) {
 var PageControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, {
+    init(this, options, instance55, create_fragment55, safe_not_equal, {
       app: 16,
       theme: 0,
       language: 17,
@@ -6079,7 +6229,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment54(ctx) {
+function create_fragment56(ctx) {
   let div;
   let button0;
   let t0;
@@ -6342,7 +6492,7 @@ function next_scale(scale, delta) {
   return 1;
 }
 var name3 = "fastboard-zoom-control";
-function instance54($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -6453,7 +6603,7 @@ function instance54($$self, $$props, $$invalidate) {
 var ZoomControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, {
+    init(this, options, instance56, create_fragment56, safe_not_equal, {
       app: 15,
       theme: 0,
       language: 16,
@@ -6707,7 +6857,7 @@ function hexToRgb(hex) {
   const b = parseInt(hex.slice(4, 6), 16);
   return [r, g, b];
 }
-function create_fragment55(ctx) {
+function create_fragment57(ctx) {
   let div;
   let input;
   let input_class_value;
@@ -6922,7 +7072,7 @@ function create_fragment55(ctx) {
   };
 }
 var name4 = "fastboard-slider";
-function instance55($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let percent;
   const dispatch = createEventDispatcher();
   let { class: className = "" } = $$props;
@@ -6993,7 +7143,7 @@ function instance55($$self, $$props, $$invalidate) {
 var Slider = 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: 1,
       theme: 2,
       min: 3,
@@ -7007,7 +7157,7 @@ var Slider = class extends SvelteComponent {
 var Slider_default = Slider;
 // src/components/Toolbar/components/StrokeWidth.svelte
-function create_fragment56(ctx) {
+function create_fragment58(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -7063,7 +7213,7 @@ function create_fragment56(ctx) {
     }
   };
 }
-function instance56($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -7112,7 +7262,7 @@ function instance56($$self, $$props, $$invalidate) {
 var StrokeWidth = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance58, create_fragment58, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var StrokeWidth_default = StrokeWidth;
@@ -7214,7 +7364,7 @@ function create_each_block(ctx) {
     }
   };
 }
-function create_fragment57(ctx) {
+function create_fragment59(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -7294,7 +7444,7 @@ function create_fragment57(ctx) {
 function is_equal_color(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance57($$self, $$props, $$invalidate) {
+function instance59($$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);
@@ -7346,7 +7496,7 @@ function instance57($$self, $$props, $$invalidate) {
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance59, create_fragment59, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var StrokeColor_default = StrokeColor;
@@ -7448,7 +7598,7 @@ function create_each_block2(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment60(ctx) {
   let div;
   let div_class_value;
   let mounted;
@@ -7528,7 +7678,7 @@ function create_fragment58(ctx) {
 function is_equal_color2(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance58($$self, $$props, $$invalidate) {
+function instance60($$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);
@@ -7580,7 +7730,7 @@ function instance58($$self, $$props, $$invalidate) {
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
+    init(this, options, instance60, create_fragment60, safe_not_equal, { app: 6, theme: 0, disabled: 1, colors: 2 });
   }
 };
 var TextColor_default = TextColor;
@@ -7909,7 +8059,7 @@ function create_each_block3(key_1, ctx) {
     }
   };
 }
-function create_fragment59(ctx) {
+function create_fragment61(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -8015,7 +8165,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance59($$self, $$props, $$invalidate) {
+function instance61($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -8100,7 +8250,7 @@ function instance59($$self, $$props, $$invalidate) {
 var SelectShapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance59, create_fragment59, safe_not_equal, {
+    init(this, options, instance61, create_fragment61, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -8253,7 +8403,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_fragment60(ctx) {
+function create_fragment62(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -8322,7 +8472,7 @@ function create_fragment60(ctx) {
     }
   };
 }
-function instance60($$self, $$props, $$invalidate) {
+function instance62($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -8345,7 +8495,7 @@ function instance60($$self, $$props, $$invalidate) {
 var Clicker = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance60, create_fragment60, safe_not_equal, {
+    init(this, options, instance62, create_fragment62, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -8498,7 +8648,7 @@ function create_default_slot5(ctx) {
     }
   };
 }
-function create_fragment61(ctx) {
+function create_fragment63(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -8567,7 +8717,7 @@ function create_fragment61(ctx) {
     }
   };
 }
-function instance61($$self, $$props, $$invalidate) {
+function instance63($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -8590,7 +8740,7 @@ function instance61($$self, $$props, $$invalidate) {
 var Selector2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance61, create_fragment61, safe_not_equal, {
+    init(this, options, instance63, create_fragment63, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -8637,7 +8787,7 @@ function create_else_block8(ctx) {
     }
   };
 }
-function create_if_block_12(ctx) {
+function create_if_block_2(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -8677,7 +8827,7 @@ function create_if_block_12(ctx) {
     }
   };
 }
-function create_if_block8(ctx) {
+function create_if_block_12(ctx) {
   let icons_laserpenfilled;
   let current;
   icons_laserpenfilled = new Icons_default.LaserPenFilled({
@@ -8717,26 +8867,73 @@ function create_if_block8(ctx) {
     }
   };
 }
+function create_if_block8(ctx) {
+  let icons_markpenfilled;
+  let current;
+  icons_markpenfilled = new Icons_default.MarkPenFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[4]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_markpenfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_markpenfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_markpenfilled_changes = {};
+      if (dirty & /*theme*/
+      16)
+        icons_markpenfilled_changes.theme = /*theme*/
+        ctx2[4];
+      icons_markpenfilled.$set(icons_markpenfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_markpenfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_markpenfilled.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_markpenfilled, detaching);
+    }
+  };
+}
 function create_default_slot6(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block8, create_if_block_12, create_else_block8];
+  const if_block_creators = [create_if_block8, create_if_block_12, create_if_block_2, create_else_block8];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
       /*appliance*/
-      ctx2[3] === "pencil" && /*hasUseLaserPen*/
-      ctx2[5]
+      ctx2[3] === "pencil" && /*pencilType*/
+      ctx2[5] === "mark"
     )
       return 0;
     if (
       /*appliance*/
-      ctx2[3] === "pencil"
+      ctx2[3] === "pencil" && /*pencilType*/
+      ctx2[5] === "laser"
     )
       return 1;
-    return 2;
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil" && /*pencilType*/
+      ctx2[5] === "pencil"
+    )
+      return 2;
+    return 3;
   }
   current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
@@ -8789,7 +8986,7 @@ function create_default_slot6(ctx) {
     }
   };
 }
-function create_fragment62(ctx) {
+function create_fragment64(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -8846,7 +9043,7 @@ function create_fragment62(ctx) {
           ctx2[2]
         ) }
       ]) : {};
-      if (dirty & /*$$scope, theme, appliance, hasUseLaserPen*/
+      if (dirty & /*$$scope, theme, appliance, pencilType*/
       184) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -8867,13 +9064,13 @@ function create_fragment62(ctx) {
     }
   };
 }
-function instance62($$self, $$props, $$invalidate) {
+function instance64($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
   let { appliance } = $$props;
   let { theme = "light" } = $$props;
-  let { hasUseLaserPen = false } = $$props;
+  let { pencilType = "pencil" } = $$props;
   function click_handler(event) {
     bubble.call(this, $$self, event);
   }
@@ -8888,21 +9085,21 @@ function instance62($$self, $$props, $$invalidate) {
       $$invalidate(3, appliance = $$props2.appliance);
     if ("theme" in $$props2)
       $$invalidate(4, theme = $$props2.theme);
-    if ("hasUseLaserPen" in $$props2)
-      $$invalidate(5, hasUseLaserPen = $$props2.hasUseLaserPen);
+    if ("pencilType" in $$props2)
+      $$invalidate(5, pencilType = $$props2.pencilType);
   };
-  return [btn_props, content, menu, appliance, theme, hasUseLaserPen, click_handler];
+  return [btn_props, content, menu, appliance, theme, pencilType, click_handler];
 }
 var Pencil2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance62, create_fragment62, safe_not_equal, {
+    init(this, options, instance64, create_fragment64, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
       appliance: 3,
       theme: 4,
-      hasUseLaserPen: 5
+      pencilType: 5
     });
   }
 };
@@ -9051,7 +9248,7 @@ function create_default_slot7(ctx) {
     }
   };
 }
-function create_fragment63(ctx) {
+function create_fragment65(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9129,7 +9326,7 @@ function create_fragment63(ctx) {
     }
   };
 }
-function instance63($$self, $$props, $$invalidate) {
+function instance65($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { menu } = $$props;
@@ -9155,7 +9352,7 @@ function instance63($$self, $$props, $$invalidate) {
 var Text2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance63, create_fragment63, safe_not_equal, {
+    init(this, options, instance65, create_fragment65, safe_not_equal, {
       btn_props: 0,
       content: 1,
       menu: 2,
@@ -9397,7 +9594,7 @@ function create_default_slot8(ctx) {
     }
   };
 }
-function create_fragment64(ctx) {
+function create_fragment66(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9475,7 +9672,7 @@ function create_fragment64(ctx) {
     }
   };
 }
-function instance64($$self, $$props, $$invalidate) {
+function instance66($$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);
@@ -9547,7 +9744,7 @@ function instance64($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance64, create_fragment64, safe_not_equal, {
+    init(this, options, instance66, create_fragment66, safe_not_equal, {
       app: 9,
       btn_props: 1,
       content: 2,
@@ -9702,7 +9899,7 @@ function create_default_slot9(ctx) {
     }
   };
 }
-function create_fragment65(ctx) {
+function create_fragment67(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9771,7 +9968,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;
@@ -9794,7 +9991,7 @@ function instance65($$self, $$props, $$invalidate) {
 var Eraser2 = 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,
@@ -9841,7 +10038,7 @@ function create_default_slot10(ctx) {
     }
   };
 }
-function create_fragment66(ctx) {
+function create_fragment68(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -9910,7 +10107,7 @@ function create_fragment66(ctx) {
     }
   };
 }
-function instance66($$self, $$props, $$invalidate) {
+function instance68($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { theme = "light" } = $$props;
@@ -9930,7 +10127,7 @@ function instance66($$self, $$props, $$invalidate) {
 var Clear2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance66, create_fragment66, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
+    init(this, options, instance68, create_fragment68, safe_not_equal, { btn_props: 0, content: 1, theme: 2 });
   }
 };
 var Clear_default2 = Clear2;
@@ -10078,7 +10275,7 @@ function create_default_slot11(ctx) {
     }
   };
 }
-function create_fragment67(ctx) {
+function create_fragment69(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10147,7 +10344,7 @@ function create_fragment67(ctx) {
     }
   };
 }
-function instance67($$self, $$props, $$invalidate) {
+function instance69($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -10170,7 +10367,7 @@ function instance67($$self, $$props, $$invalidate) {
 var Hand = 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,
       appliance: 2,
@@ -10323,7 +10520,7 @@ function create_default_slot12(ctx) {
     }
   };
 }
-function create_fragment68(ctx) {
+function create_fragment70(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10392,7 +10589,7 @@ function create_fragment68(ctx) {
     }
   };
 }
-function instance68($$self, $$props, $$invalidate) {
+function instance70($$self, $$props, $$invalidate) {
   let { btn_props = {} } = $$props;
   let { content } = $$props;
   let { appliance } = $$props;
@@ -10415,7 +10612,7 @@ function instance68($$self, $$props, $$invalidate) {
 var Laser2 = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance68, create_fragment68, safe_not_equal, {
+    init(this, options, instance70, create_fragment70, safe_not_equal, {
       btn_props: 0,
       content: 1,
       appliance: 2,
@@ -10428,42 +10625,42 @@ var Laser_default2 = Laser2;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[47] = list[i];
+  child_ctx[50] = list[i];
   const constants_0 = (
     /*netless_app*/
-    child_ctx[47]
+    child_ctx[50]
   );
-  child_ctx[48] = constants_0.icon;
-  child_ctx[49] = constants_0.label;
-  child_ctx[50] = constants_0.kind;
-  child_ctx[51] = constants_0.onClick;
+  child_ctx[51] = constants_0.icon;
+  child_ctx[52] = constants_0.label;
+  child_ctx[53] = constants_0.kind;
+  child_ctx[54] = constants_0.onClick;
   const constants_1 = (
     /*$status*/
     child_ctx[22] && /*$status*/
     child_ctx[22][
       /*kind*/
-      child_ctx[50]
+      child_ctx[53]
     ]
   );
-  child_ctx[52] = constants_1;
+  child_ctx[55] = constants_1;
   const constants_2 = function func() {
     return (
       /*func*/
-      ctx[43](
+      ctx[46](
         /*onClick*/
-        child_ctx[51]
+        child_ctx[54]
       )
     );
   };
-  child_ctx[53] = constants_2;
+  child_ctx[56] = constants_2;
   return child_ctx;
 }
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[56] = list[i];
+  child_ctx[59] = list[i];
   return child_ctx;
 }
-function create_if_block_13(ctx) {
+function create_if_block_18(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -10472,7 +10669,7 @@ function create_if_block_13(ctx) {
     ctx[15]
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_6] },
+    $$slots: { default: [create_default_slot_8] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -10499,8 +10696,8 @@ function create_if_block_13(ctx) {
         ctx2[15]
       )]) : {};
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
+      2 | dirty[2] & /*$$scope*/
+      1) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -10520,7 +10717,7 @@ function create_if_block_13(ctx) {
     }
   };
 }
-function create_default_slot_6(ctx) {
+function create_default_slot_8(ctx) {
   let icons_up;
   let current;
   icons_up = new Icons_default.Up({ props: { theme: (
@@ -10558,7 +10755,7 @@ function create_default_slot_6(ctx) {
     }
   };
 }
-function create_if_block_122(ctx) {
+function create_if_block_17(ctx) {
   let laser;
   let current;
   laser = new Laser_default2({
@@ -10629,7 +10826,7 @@ function create_if_block_122(ctx) {
     }
   };
 }
-function create_if_block_11(ctx) {
+function create_if_block_16(ctx) {
   let hand_1;
   let current;
   hand_1 = new Hand_default({
@@ -10700,7 +10897,7 @@ function create_if_block_11(ctx) {
     }
   };
 }
-function create_if_block_10(ctx) {
+function create_if_block_15(ctx) {
   let clear_1;
   let current;
   clear_1 = new Clear_default2({
@@ -10763,7 +10960,7 @@ function create_if_block_10(ctx) {
     }
   };
 }
-function create_if_block_9(ctx) {
+function create_if_block_14(ctx) {
   let eraser_1;
   let current;
   eraser_1 = new Eraser_default2({
@@ -10834,7 +11031,7 @@ function create_if_block_9(ctx) {
     }
   };
 }
-function create_if_block_8(ctx) {
+function create_if_block_13(ctx) {
   let shapes2;
   let current;
   shapes2 = new Shapes_default({
@@ -10916,7 +11113,7 @@ function create_if_block_8(ctx) {
     }
   };
 }
-function create_if_block_7(ctx) {
+function create_if_block_122(ctx) {
   let text_1;
   let current;
   text_1 = new Text_default2({
@@ -10995,13 +11192,13 @@ function create_if_block_7(ctx) {
     }
   };
 }
-function create_if_block_6(ctx) {
+function create_if_block_11(ctx) {
   let pencil_1;
   let current;
   pencil_1 = new Pencil_default2({
     props: {
-      hasUseLaserPen: (
-        /*hasUseLaserPen*/
+      pencilType: (
+        /*pencilType*/
         ctx[16]
       ),
       appliance: (
@@ -11041,9 +11238,9 @@ function create_if_block_6(ctx) {
     },
     p(ctx2, dirty) {
       const pencil_1_changes = {};
-      if (dirty[0] & /*hasUseLaserPen*/
+      if (dirty[0] & /*pencilType*/
       65536)
-        pencil_1_changes.hasUseLaserPen = /*hasUseLaserPen*/
+        pencil_1_changes.pencilType = /*pencilType*/
         ctx2[16];
       if (dirty[0] & /*appliance*/
       262144)
@@ -11082,7 +11279,7 @@ function create_if_block_6(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_10(ctx) {
   let selector_1;
   let current;
   selector_1 = new Selector_default2({
@@ -11153,7 +11350,7 @@ function create_if_block_5(ctx) {
     }
   };
 }
-function create_if_block_4(ctx) {
+function create_if_block_9(ctx) {
   let clicker_1;
   let current;
   clicker_1 = new Clicker_default({
@@ -11230,61 +11427,61 @@ function create_each_block_1(ctx) {
   let if_block_anchor;
   let current;
   const if_block_creators = [
-    create_if_block_4,
-    create_if_block_5,
-    create_if_block_6,
-    create_if_block_7,
-    create_if_block_8,
     create_if_block_9,
     create_if_block_10,
     create_if_block_11,
-    create_if_block_122
+    create_if_block_122,
+    create_if_block_13,
+    create_if_block_14,
+    create_if_block_15,
+    create_if_block_16,
+    create_if_block_17
   ];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
       /*item*/
-      ctx2[56] === "clicker"
+      ctx2[59] === "clicker"
     )
       return 0;
     if (
       /*item*/
-      ctx2[56] === "selector"
+      ctx2[59] === "selector"
     )
       return 1;
     if (
       /*item*/
-      ctx2[56] === "pencil"
+      ctx2[59] === "pencil"
     )
       return 2;
     if (
       /*item*/
-      ctx2[56] === "text"
+      ctx2[59] === "text"
     )
       return 3;
     if (
       /*item*/
-      ctx2[56] === "shapes"
+      ctx2[59] === "shapes"
     )
       return 4;
     if (
       /*item*/
-      ctx2[56] === "eraser"
+      ctx2[59] === "eraser"
     )
       return 5;
     if (
       /*item*/
-      ctx2[56] === "clear"
+      ctx2[59] === "clear"
     )
       return 6;
     if (
       /*item*/
-      ctx2[56] === "hand"
+      ctx2[59] === "hand"
     )
       return 7;
     if (
       /*item*/
-      ctx2[56] === "laserPointer"
+      ctx2[59] === "laserPointer"
     )
       return 8;
     return -1;
@@ -11354,7 +11551,7 @@ function create_each_block_1(ctx) {
     }
   };
 }
-function create_if_block_3(ctx) {
+function create_if_block_8(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -11377,7 +11574,7 @@ function create_if_block_3(ctx) {
     }
   ];
   let button_props = {
-    $$slots: { default: [create_default_slot_53] },
+    $$slots: { default: [create_default_slot_7] },
     $$scope: { ctx }
   };
   for (let i = 0; i < button_spread_levels.length; i += 1) {
@@ -11420,8 +11617,8 @@ function create_if_block_3(ctx) {
         }
       ]) : {};
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
+      2 | dirty[2] & /*$$scope*/
+      1) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11441,7 +11638,7 @@ function create_if_block_3(ctx) {
     }
   };
 }
-function create_default_slot_53(ctx) {
+function create_default_slot_7(ctx) {
   let icons_apps;
   let current;
   icons_apps = new Icons_default.Apps({ props: { theme: (
@@ -11479,7 +11676,7 @@ function create_default_slot_53(ctx) {
     }
   };
 }
-function create_if_block_2(ctx) {
+function create_if_block_7(ctx) {
   let button;
   let current;
   button = new Button_default({
@@ -11494,7 +11691,7 @@ function create_if_block_2(ctx) {
         /*disabled*/
         ctx[3]
       ),
-      $$slots: { default: [create_default_slot_43] },
+      $$slots: { default: [create_default_slot_6] },
       $$scope: { ctx }
     }
   });
@@ -11522,8 +11719,8 @@ function create_if_block_2(ctx) {
         button_changes.disabled = /*disabled*/
         ctx2[3];
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
+      2 | dirty[2] & /*$$scope*/
+      1) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11543,7 +11740,7 @@ function create_if_block_2(ctx) {
     }
   };
 }
-function create_default_slot_43(ctx) {
+function create_default_slot_6(ctx) {
   let icons_down;
   let current;
   icons_down = new Icons_default.Down({ props: { theme: (
@@ -11581,57 +11778,306 @@ function create_default_slot_43(ctx) {
     }
   };
 }
-function create_if_block_14(ctx) {
-  let button0;
-  let t_1;
-  let button1;
+function create_if_block14(ctx) {
+  let current_block_type_index;
+  let if_block0;
+  let t0;
+  let current_block_type_index_1;
+  let if_block1;
+  let t1;
+  let current_block_type_index_2;
+  let if_block2;
+  let if_block2_anchor;
+  let current;
+  const if_block_creators = [create_if_block_5, create_if_block_6];
+  const if_blocks = [];
+  function select_block_type_1(ctx2, dirty) {
+    if (
+      /*pencilType*/
+      ctx2[16] !== "pencil"
+    )
+      return 0;
+    if (
+      /*pencilType*/
+      ctx2[16] === "pencil"
+    )
+      return 1;
+    return -1;
+  }
+  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_3, create_if_block_4];
+  const if_blocks_1 = [];
+  function select_block_type_2(ctx2, dirty) {
+    if (
+      /*pencilType*/
+      ctx2[16] === "laser"
+    )
+      return 0;
+    if (
+      /*pencilType*/
+      ctx2[16] !== "laser"
+    )
+      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_19, create_if_block_22];
+  const if_blocks_2 = [];
+  function select_block_type_3(ctx2, dirty) {
+    if (
+      /*pencilType*/
+      ctx2[16] === "mark"
+    )
+      return 0;
+    if (
+      /*pencilType*/
+      ctx2[16] !== "mark"
+    )
+      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);
+  }
+  return {
+    c() {
+      if (if_block0)
+        if_block0.c();
+      t0 = space();
+      if (if_block1)
+        if_block1.c();
+      t1 = space();
+      if (if_block2)
+        if_block2.c();
+      if_block2_anchor = empty();
+    },
+    m(target, anchor) {
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].m(target, anchor);
+      }
+      insert(target, t0, anchor);
+      if (~current_block_type_index_1) {
+        if_blocks_1[current_block_type_index_1].m(target, anchor);
+      }
+      insert(target, t1, anchor);
+      if (~current_block_type_index_2) {
+        if_blocks_2[current_block_type_index_2].m(target, anchor);
+      }
+      insert(target, if_block2_anchor, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      let previous_block_index = current_block_type_index;
+      current_block_type_index = select_block_type_1(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if (~current_block_type_index) {
+          if_blocks[current_block_type_index].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block0) {
+          group_outros();
+          transition_out(if_blocks[previous_block_index], 1, 1, () => {
+            if_blocks[previous_block_index] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index) {
+          if_block0 = if_blocks[current_block_type_index];
+          if (!if_block0) {
+            if_block0 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+            if_block0.c();
+          } else {
+            if_block0.p(ctx2, dirty);
+          }
+          transition_in(if_block0, 1);
+          if_block0.m(t0.parentNode, t0);
+        } else {
+          if_block0 = null;
+        }
+      }
+      let previous_block_index_1 = current_block_type_index_1;
+      current_block_type_index_1 = select_block_type_2(ctx2);
+      if (current_block_type_index_1 === previous_block_index_1) {
+        if (~current_block_type_index_1) {
+          if_blocks_1[current_block_type_index_1].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block1) {
+          group_outros();
+          transition_out(if_blocks_1[previous_block_index_1], 1, 1, () => {
+            if_blocks_1[previous_block_index_1] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index_1) {
+          if_block1 = if_blocks_1[current_block_type_index_1];
+          if (!if_block1) {
+            if_block1 = if_blocks_1[current_block_type_index_1] = if_block_creators_1[current_block_type_index_1](ctx2);
+            if_block1.c();
+          } else {
+            if_block1.p(ctx2, dirty);
+          }
+          transition_in(if_block1, 1);
+          if_block1.m(t1.parentNode, t1);
+        } else {
+          if_block1 = null;
+        }
+      }
+      let previous_block_index_2 = current_block_type_index_2;
+      current_block_type_index_2 = select_block_type_3(ctx2);
+      if (current_block_type_index_2 === previous_block_index_2) {
+        if (~current_block_type_index_2) {
+          if_blocks_2[current_block_type_index_2].p(ctx2, dirty);
+        }
+      } else {
+        if (if_block2) {
+          group_outros();
+          transition_out(if_blocks_2[previous_block_index_2], 1, 1, () => {
+            if_blocks_2[previous_block_index_2] = null;
+          });
+          check_outros();
+        }
+        if (~current_block_type_index_2) {
+          if_block2 = if_blocks_2[current_block_type_index_2];
+          if (!if_block2) {
+            if_block2 = if_blocks_2[current_block_type_index_2] = if_block_creators_2[current_block_type_index_2](ctx2);
+            if_block2.c();
+          } else {
+            if_block2.p(ctx2, dirty);
+          }
+          transition_in(if_block2, 1);
+          if_block2.m(if_block2_anchor.parentNode, if_block2_anchor);
+        } else {
+          if_block2 = null;
+        }
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block0);
+      transition_in(if_block1);
+      transition_in(if_block2);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block0);
+      transition_out(if_block1);
+      transition_out(if_block2);
+      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);
+    }
+  };
+}
+function create_if_block_6(ctx) {
+  let button;
   let current;
-  const button0_spread_levels = [
+  const button_spread_levels = [
     { class: name5 + "-panel-switch-btn" },
     /*btn_props*/
     ctx[15]
   ];
-  let button0_props = {
-    $$slots: { default: [create_default_slot_34] },
+  let button_props = {
+    $$slots: { default: [create_default_slot_53] },
     $$scope: { ctx }
   };
-  for (let i = 0; i < button0_spread_levels.length; i += 1) {
-    button0_props = assign(button0_props, button0_spread_levels[i]);
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
   }
-  button0 = new Button_default({ props: button0_props });
-  const button1_spread_levels = [
+  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*/
+      32768 ? get_spread_update(button_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        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_5(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
     { class: name5 + "-panel-switch-btn" },
     /*btn_props*/
     ctx[15]
   ];
-  let button1_props = {
-    $$slots: { default: [create_default_slot_24] },
+  let button_props = {
+    $$slots: { default: [create_default_slot_43] },
     $$scope: { ctx }
   };
-  for (let i = 0; i < button1_spread_levels.length; i += 1) {
-    button1_props = assign(button1_props, button1_spread_levels[i]);
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
   }
-  button1 = new Button_default({ props: button1_props });
-  button1.$on(
+  button = new Button_default({ props: button_props });
+  button.$on(
     "click",
-    /*useLaserPen*/
-    ctx[34]
+    /*pencil*/
+    ctx[28]
   );
   return {
     c() {
-      create_component(button0.$$.fragment);
-      t_1 = space();
-      create_component(button1.$$.fragment);
+      create_component(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(button0, target, anchor);
-      insert(target, t_1, anchor);
-      mount_component(button1, target, anchor);
+      mount_component(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const button0_changes = dirty[0] & /*btn_props*/
-      32768 ? get_spread_update(button0_spread_levels, [
+      const button_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button_spread_levels, [
         dirty & /*name*/
         0 && { class: name5 + "-panel-switch-btn" },
         dirty[0] & /*btn_props*/
@@ -11641,13 +12087,137 @@ function create_if_block_14(ctx) {
         )
       ]) : {};
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
-        button0_changes.$$scope = { dirty, ctx: ctx2 };
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
       }
-      button0.$set(button0_changes);
-      const button1_changes = dirty[0] & /*btn_props*/
-      32768 ? get_spread_update(button1_spread_levels, [
+      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_53(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_43(ctx) {
+  let icons_pencil;
+  let current;
+  icons_pencil = new Icons_default.Pencil({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
+  return {
+    c() {
+      create_component(icons_pencil.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_pencil, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_pencil_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_pencil_changes.theme = /*theme*/
+        ctx2[1];
+      icons_pencil.$set(icons_pencil_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_pencil.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_pencil.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_pencil, detaching);
+    }
+  };
+}
+function create_if_block_4(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_34] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  button.$on(
+    "click",
+    /*useLaserPen*/
+    ctx[34]
+  );
+  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*/
+      32768 ? get_spread_update(button_spread_levels, [
         dirty & /*name*/
         0 && { class: name5 + "-panel-switch-btn" },
         dirty[0] & /*btn_props*/
@@ -11657,99 +12227,194 @@ function create_if_block_14(ctx) {
         )
       ]) : {};
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
-        button1_changes.$$scope = { dirty, ctx: ctx2 };
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
       }
-      button1.$set(button1_changes);
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(button0.$$.fragment, local);
-      transition_in(button1.$$.fragment, local);
+      transition_in(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(button0.$$.fragment, local);
-      transition_out(button1.$$.fragment, local);
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
+function create_if_block_3(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_24] },
+    $$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*/
+      32768 ? get_spread_update(button_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
+      if (dirty[0] & /*theme*/
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(button.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
+function create_default_slot_34(ctx) {
+  let icons_laserpen;
+  let current;
+  icons_laserpen = new Icons_default.LaserPen({ props: { theme: (
+    /*theme*/
+    ctx[1]
+  ) } });
+  return {
+    c() {
+      create_component(icons_laserpen.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_laserpen, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_laserpen_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_laserpen_changes.theme = /*theme*/
+        ctx2[1];
+      icons_laserpen.$set(icons_laserpen_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_laserpen.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_laserpen.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_laserpen, detaching);
+    }
+  };
+}
+function create_default_slot_24(ctx) {
+  let icons_laserpenfilled;
+  let current;
+  icons_laserpenfilled = new Icons_default.LaserPenFilled({
+    props: { theme: (
+      /*theme*/
+      ctx[1]
+    ), active: true }
+  });
+  return {
+    c() {
+      create_component(icons_laserpenfilled.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_laserpenfilled, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_laserpenfilled_changes = {};
+      if (dirty[0] & /*theme*/
+      2)
+        icons_laserpenfilled_changes.theme = /*theme*/
+        ctx2[1];
+      icons_laserpenfilled.$set(icons_laserpenfilled_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_laserpenfilled.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_laserpenfilled.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(button0, detaching);
-      if (detaching)
-        detach(t_1);
-      destroy_component(button1, detaching);
+      destroy_component(icons_laserpenfilled, detaching);
     }
   };
 }
-function create_if_block14(ctx) {
-  let button0;
-  let t_1;
-  let button1;
+function create_if_block_22(ctx) {
+  let button;
   let current;
-  const button0_spread_levels = [
+  const button_spread_levels = [
     { class: name5 + "-panel-switch-btn" },
     /*btn_props*/
     ctx[15]
   ];
-  let button0_props = {
+  let button_props = {
     $$slots: { default: [create_default_slot_14] },
     $$scope: { ctx }
   };
-  for (let i = 0; i < button0_spread_levels.length; i += 1) {
-    button0_props = assign(button0_props, button0_spread_levels[i]);
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign(button_props, button_spread_levels[i]);
   }
-  button0 = new Button_default({ props: button0_props });
-  button0.$on(
+  button = new Button_default({ props: button_props });
+  button.$on(
     "click",
-    /*pencil*/
-    ctx[28]
+    /*useMarkPen*/
+    ctx[35]
   );
-  const button1_spread_levels = [
-    { class: name5 + "-panel-switch-btn" },
-    /*btn_props*/
-    ctx[15]
-  ];
-  let button1_props = {
-    $$slots: { default: [create_default_slot13] },
-    $$scope: { ctx }
-  };
-  for (let i = 0; i < button1_spread_levels.length; i += 1) {
-    button1_props = assign(button1_props, button1_spread_levels[i]);
-  }
-  button1 = new Button_default({ props: button1_props });
   return {
     c() {
-      create_component(button0.$$.fragment);
-      t_1 = space();
-      create_component(button1.$$.fragment);
+      create_component(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(button0, target, anchor);
-      insert(target, t_1, anchor);
-      mount_component(button1, target, anchor);
+      mount_component(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const button0_changes = dirty[0] & /*btn_props*/
-      32768 ? get_spread_update(button0_spread_levels, [
-        dirty & /*name*/
-        0 && { class: name5 + "-panel-switch-btn" },
-        dirty[0] & /*btn_props*/
-        32768 && get_spread_object(
-          /*btn_props*/
-          ctx2[15]
-        )
-      ]) : {};
-      if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
-        button0_changes.$$scope = { dirty, ctx: ctx2 };
-      }
-      button0.$set(button0_changes);
-      const button1_changes = dirty[0] & /*btn_props*/
-      32768 ? get_spread_update(button1_spread_levels, [
+      const button_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button_spread_levels, [
         dirty & /*name*/
         0 && { class: name5 + "-panel-switch-btn" },
         dirty[0] & /*btn_props*/
@@ -11759,152 +12424,126 @@ function create_if_block14(ctx) {
         )
       ]) : {};
       if (dirty[0] & /*theme*/
-      2 | dirty[1] & /*$$scope*/
-      268435456) {
-        button1_changes.$$scope = { dirty, ctx: ctx2 };
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
       }
-      button1.$set(button1_changes);
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(button0.$$.fragment, local);
-      transition_in(button1.$$.fragment, local);
+      transition_in(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(button0.$$.fragment, local);
-      transition_out(button1.$$.fragment, local);
+      transition_out(button.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(button0, detaching);
-      if (detaching)
-        detach(t_1);
-      destroy_component(button1, detaching);
+      destroy_component(button, detaching);
     }
   };
 }
-function create_default_slot_34(ctx) {
-  let icons_pencilfilled;
+function create_if_block_19(ctx) {
+  let button;
   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);
-    }
+  const button_spread_levels = [
+    { class: name5 + "-panel-switch-btn" },
+    /*btn_props*/
+    ctx[15]
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot13] },
+    $$scope: { ctx }
   };
-}
-function create_default_slot_24(ctx) {
-  let icons_laserpen;
-  let current;
-  icons_laserpen = new Icons_default.LaserPen({ props: { theme: (
-    /*theme*/
-    ctx[1]
-  ) } });
+  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(icons_laserpen.$$.fragment);
+      create_component(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_laserpen, target, anchor);
+      mount_component(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_laserpen_changes = {};
+      const button_changes = dirty[0] & /*btn_props*/
+      32768 ? get_spread_update(button_spread_levels, [
+        dirty & /*name*/
+        0 && { class: name5 + "-panel-switch-btn" },
+        dirty[0] & /*btn_props*/
+        32768 && get_spread_object(
+          /*btn_props*/
+          ctx2[15]
+        )
+      ]) : {};
       if (dirty[0] & /*theme*/
-      2)
-        icons_laserpen_changes.theme = /*theme*/
-        ctx2[1];
-      icons_laserpen.$set(icons_laserpen_changes);
+      2 | dirty[2] & /*$$scope*/
+      1) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_laserpen.$$.fragment, local);
+      transition_in(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_laserpen.$$.fragment, local);
+      transition_out(button.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_laserpen, detaching);
+      destroy_component(button, detaching);
     }
   };
 }
 function create_default_slot_14(ctx) {
-  let icons_pencil;
+  let icons_markpen;
   let current;
-  icons_pencil = new Icons_default.Pencil({ props: { theme: (
+  icons_markpen = new Icons_default.MarkPen({ props: { theme: (
     /*theme*/
     ctx[1]
   ) } });
   return {
     c() {
-      create_component(icons_pencil.$$.fragment);
+      create_component(icons_markpen.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_pencil, target, anchor);
+      mount_component(icons_markpen, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_pencil_changes = {};
+      const icons_markpen_changes = {};
       if (dirty[0] & /*theme*/
       2)
-        icons_pencil_changes.theme = /*theme*/
+        icons_markpen_changes.theme = /*theme*/
         ctx2[1];
-      icons_pencil.$set(icons_pencil_changes);
+      icons_markpen.$set(icons_markpen_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_pencil.$$.fragment, local);
+      transition_in(icons_markpen.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_pencil.$$.fragment, local);
+      transition_out(icons_markpen.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_pencil, detaching);
+      destroy_component(icons_markpen, detaching);
     }
   };
 }
 function create_default_slot13(ctx) {
-  let icons_laserpenfilled;
+  let icons_markpenfilled;
   let current;
-  icons_laserpenfilled = new Icons_default.LaserPenFilled({
+  icons_markpenfilled = new Icons_default.MarkPenFilled({
     props: { theme: (
       /*theme*/
       ctx[1]
@@ -11912,32 +12551,32 @@ function create_default_slot13(ctx) {
   });
   return {
     c() {
-      create_component(icons_laserpenfilled.$$.fragment);
+      create_component(icons_markpenfilled.$$.fragment);
     },
     m(target, anchor) {
-      mount_component(icons_laserpenfilled, target, anchor);
+      mount_component(icons_markpenfilled, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_laserpenfilled_changes = {};
+      const icons_markpenfilled_changes = {};
       if (dirty[0] & /*theme*/
       2)
-        icons_laserpenfilled_changes.theme = /*theme*/
+        icons_markpenfilled_changes.theme = /*theme*/
         ctx2[1];
-      icons_laserpenfilled.$set(icons_laserpenfilled_changes);
+      icons_markpenfilled.$set(icons_markpenfilled_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in(icons_laserpenfilled.$$.fragment, local);
+      transition_in(icons_markpenfilled.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out(icons_laserpenfilled.$$.fragment, local);
+      transition_out(icons_markpenfilled.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component(icons_laserpenfilled, detaching);
+      destroy_component(icons_markpenfilled, detaching);
     }
   };
 }
@@ -11952,7 +12591,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[49] + ""
+    ctx[52] + ""
   );
   let t1;
   let span_class_value;
@@ -11974,40 +12613,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[48]))
+      ctx[51]))
         attr(img, "src", img_src_value);
       attr(img, "alt", img_alt_value = /*kind*/
-      ctx[50]);
+      ctx[53]);
       attr(img, "title", img_title_value = /*label*/
-      ctx[49]);
+      ctx[52]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + /*theme*/
       ctx[1]);
       attr(button, "class", button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[50] + " " + /*theme*/
+      ctx[53] + " " + /*theme*/
       ctx[1]);
       attr(button, "title", button_title_value = /*label*/
-      ctx[49] + /*state*/
-      (ctx[52] && /*state*/
-      ctx[52].reason ? ": " + /*state*/
-      ctx[52].reason : ""));
+      ctx[52] + /*state*/
+      (ctx[55] && /*state*/
+      ctx[55].reason ? ": " + /*state*/
+      ctx[55].reason : ""));
       attr(button, "data-app-kind", button_data_app_kind_value = /*netless_app*/
-      ctx[47].kind);
+      ctx[50].kind);
       button.disabled = button_disabled_value = /*state*/
-      ctx[52] && /*state*/
-      ctx[52].status !== "idle";
+      ctx[55] && /*state*/
+      ctx[55].status !== "idle";
       toggle_class(
         button,
         "is-loading",
         /*state*/
-        ctx[52] && /*state*/
-        ctx[52].status === "loading"
+        ctx[55] && /*state*/
+        ctx[55].status === "loading"
       );
       toggle_class(
         button,
         "is-failed",
         /*state*/
-        ctx[52] && /*state*/
-        ctx[52].status === "failed"
+        ctx[55] && /*state*/
+        ctx[55].status === "failed"
       );
     },
     m(target, anchor) {
@@ -12021,9 +12660,9 @@ function create_each_block4(ctx) {
         dispose = listen(button, "click", function() {
           if (is_function(
             /*on_click*/
-            ctx[53]
+            ctx[56]
           ))
-            ctx[53].apply(this, arguments);
+            ctx[56].apply(this, arguments);
         });
         mounted = true;
       }
@@ -12037,22 +12676,22 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps*/
       2097152 && !src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[48])) {
+      ctx[51])) {
         attr(img, "src", img_src_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && img_alt_value !== (img_alt_value = /*kind*/
-      ctx[50])) {
+      ctx[53])) {
         attr(img, "alt", img_alt_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && img_title_value !== (img_title_value = /*label*/
-      ctx[49])) {
+      ctx[52])) {
         attr(img, "title", img_title_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && t1_value !== (t1_value = /*label*/
-      ctx[49] + ""))
+      ctx[52] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & /*theme*/
       2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + /*theme*/
@@ -12061,27 +12700,27 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps, theme*/
       2097154 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[50] + " " + /*theme*/
+      ctx[53] + " " + /*theme*/
       ctx[1])) {
         attr(button, "class", button_class_value);
       }
       if (dirty[0] & /*$apps, $status*/
       6291456 && button_title_value !== (button_title_value = /*label*/
-      ctx[49] + /*state*/
-      (ctx[52] && /*state*/
-      ctx[52].reason ? ": " + /*state*/
-      ctx[52].reason : ""))) {
+      ctx[52] + /*state*/
+      (ctx[55] && /*state*/
+      ctx[55].reason ? ": " + /*state*/
+      ctx[55].reason : ""))) {
         attr(button, "title", button_title_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && button_data_app_kind_value !== (button_data_app_kind_value = /*netless_app*/
-      ctx[47].kind)) {
+      ctx[50].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
       if (dirty[0] & /*$status, $apps*/
       6291456 && button_disabled_value !== (button_disabled_value = /*state*/
-      ctx[52] && /*state*/
-      ctx[52].status !== "idle")) {
+      ctx[55] && /*state*/
+      ctx[55].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -12090,8 +12729,8 @@ function create_each_block4(ctx) {
           button,
           "is-loading",
           /*state*/
-          ctx[52] && /*state*/
-          ctx[52].status === "loading"
+          ctx[55] && /*state*/
+          ctx[55].status === "loading"
         );
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -12100,8 +12739,8 @@ function create_each_block4(ctx) {
           button,
           "is-failed",
           /*state*/
-          ctx[52] && /*state*/
-          ctx[52].status === "failed"
+          ctx[55] && /*state*/
+          ctx[55].status === "failed"
         );
       }
     },
@@ -12113,7 +12752,8 @@ function create_each_block4(ctx) {
     }
   };
 }
-function create_fragment69(ctx) {
+function create_fragment71(ctx) {
+  var _a;
   let t0;
   let div0;
   let t1;
@@ -12123,8 +12763,6 @@ function create_fragment69(ctx) {
   let div9;
   let div3;
   let div1;
-  let current_block_type_index;
-  let if_block3;
   let t4;
   let strokewidth0;
   let t5;
@@ -12152,7 +12790,7 @@ function create_fragment69(ctx) {
   let dispose;
   let if_block0 = (
     /*scrollable*/
-    ctx[5] && create_if_block_13(ctx)
+    ctx[5] && create_if_block_18(ctx)
   );
   let each_value_1 = (
     /*items*/
@@ -12166,27 +12804,13 @@ function create_fragment69(ctx) {
     each_blocks_1[i] = null;
   });
   let if_block1 = !/*hide_apps*/
-  ctx[8] && create_if_block_3(ctx);
+  ctx[8] && create_if_block_8(ctx);
   let if_block2 = (
     /*scrollable*/
-    ctx[5] && create_if_block_2(ctx)
+    ctx[5] && create_if_block_7(ctx)
   );
-  const if_block_creators = [create_if_block14, create_if_block_14];
-  const if_blocks = [];
-  function select_block_type_1(ctx2, dirty) {
-    var _a, _b;
-    if (!!/*app*/
-    ((_a = ctx2[0]) == null ? void 0 : _a.appliancePlugin) && /*hasUseLaserPen*/
-    ctx2[16])
-      return 0;
-    if (!!/*app*/
-    ((_b = ctx2[0]) == null ? void 0 : _b.appliancePlugin))
-      return 1;
-    return -1;
-  }
-  if (~(current_block_type_index = select_block_type_1(ctx))) {
-    if_block3 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
-  }
+  let if_block3 = !!/*app*/
+  ((_a = ctx[0]) == null ? void 0 : _a.appliancePlugin) && create_if_block14(ctx);
   strokewidth0 = new StrokeWidth_default({
     props: {
       app: (
@@ -12397,20 +13021,19 @@ function create_fragment69(ctx) {
       insert(target, div9, anchor);
       append(div9, div3);
       append(div3, div1);
-      if (~current_block_type_index) {
-        if_blocks[current_block_type_index].m(div1, null);
-      }
+      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[40](div3);
+      ctx[43](div3);
       append(div9, t7);
       append(div9, div4);
       mount_component(textcolor, div4, null);
-      ctx[41](div4);
+      ctx[44](div4);
       append(div9, t8);
       append(div9, div7);
       mount_component(selectshapes, div7, null);
@@ -12422,7 +13045,7 @@ function create_fragment69(ctx) {
       append(div7, div6);
       append(div7, t12);
       mount_component(strokecolor1, div7, null);
-      ctx[42](div7);
+      ctx[45](div7);
       append(div9, t13);
       append(div9, div8);
       for (let i = 0; i < each_blocks.length; i += 1) {
@@ -12430,7 +13053,7 @@ function create_fragment69(ctx) {
           each_blocks[i].m(div8, null);
         }
       }
-      ctx[44](div8);
+      ctx[47](div8);
       current = true;
       if (!mounted) {
         dispose = [
@@ -12451,6 +13074,7 @@ function create_fragment69(ctx) {
       }
     },
     p(ctx2, dirty) {
+      var _a2;
       if (
         /*scrollable*/
         ctx2[5]
@@ -12462,7 +13086,7 @@ function create_fragment69(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_13(ctx2);
+          if_block0 = create_if_block_18(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -12474,7 +13098,7 @@ function create_fragment69(ctx) {
         });
         check_outros();
       }
-      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, hasUseLaserPen, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser*/
+      if (dirty[0] & /*appliance, theme, btn_props, c, clicker, items, selector, pencilType, pencil_panel, pencil, text_panel, text, app, t, shapes_panel, eraser*/
       2081799299 | dirty[1] & /*clear, hand, laserPointer*/
       7) {
         each_value_1 = /*items*/
@@ -12507,7 +13131,7 @@ function create_fragment69(ctx) {
             transition_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block_3(ctx2);
+          if_block1 = create_if_block_8(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
           if_block1.m(div0, null);
@@ -12546,7 +13170,7 @@ function create_fragment69(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block_2(ctx2);
+          if_block2 = create_if_block_7(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(t3.parentNode, t3);
@@ -12558,33 +13182,26 @@ function create_fragment69(ctx) {
         });
         check_outros();
       }
-      let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_1(ctx2);
-      if (current_block_type_index === previous_block_index) {
-        if (~current_block_type_index) {
-          if_blocks[current_block_type_index].p(ctx2, dirty);
-        }
-      } else {
+      if (!!/*app*/
+      ((_a2 = ctx2[0]) == null ? void 0 : _a2.appliancePlugin)) {
         if (if_block3) {
-          group_outros();
-          transition_out(if_blocks[previous_block_index], 1, 1, () => {
-            if_blocks[previous_block_index] = null;
-          });
-          check_outros();
-        }
-        if (~current_block_type_index) {
-          if_block3 = if_blocks[current_block_type_index];
-          if (!if_block3) {
-            if_block3 = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
-            if_block3.c();
-          } else {
-            if_block3.p(ctx2, dirty);
+          if_block3.p(ctx2, dirty);
+          if (dirty[0] & /*app*/
+          1) {
+            transition_in(if_block3, 1);
           }
+        } else {
+          if_block3 = create_if_block14(ctx2);
+          if_block3.c();
           transition_in(if_block3, 1);
           if_block3.m(div1, null);
-        } else {
-          if_block3 = null;
         }
+      } else if (if_block3) {
+        group_outros();
+        transition_out(if_block3, 1, 1, () => {
+          if_block3 = null;
+        });
+        check_outros();
       }
       const strokewidth0_changes = {};
       if (dirty[0] & /*app*/
@@ -12769,27 +13386,26 @@ function create_fragment69(ctx) {
         detach(t3);
       if (detaching)
         detach(div9);
-      if (~current_block_type_index) {
-        if_blocks[current_block_type_index].d();
-      }
+      if (if_block3)
+        if_block3.d();
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[40](null);
+      ctx[43](null);
       destroy_component(textcolor);
-      ctx[41](null);
+      ctx[44](null);
       destroy_component(selectshapes);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[42](null);
+      ctx[45](null);
       destroy_each(each_blocks, detaching);
-      ctx[44](null);
+      ctx[47](null);
       mounted = false;
       run_all(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance69($$self, $$props, $$invalidate) {
+function instance71($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -12799,9 +13415,11 @@ function instance69($$self, $$props, $$invalidate) {
   let max_scroll;
   let hasAppliancePlugin;
   let hasUseLaserPen;
+  let hasUseMarkPen;
+  let pencilType;
   let $top;
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(38, $memberState = $$value)), memberState);
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(39, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(41, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(42, $scroll_height = $$value)), scroll_height);
   let $apps;
   let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(22, $status = $$value)), status);
   component_subscribe($$self, apps, ($$value) => $$invalidate(21, $apps = $$value));
@@ -12826,7 +13444,7 @@ function instance69($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(46, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(49, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -12840,7 +13458,16 @@ function instance69($$self, $$props, $$invalidate) {
     app == null ? void 0 : app.setAppliance("selector");
   }
   function pencil() {
-    app == null ? void 0 : app.setAppliance("pencil");
+    var _a;
+    if (hasAppliancePlugin) {
+      (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
+        currentApplianceName: "pencil",
+        useLaserPen: false,
+        strokeOpacity: 1
+      });
+    } else {
+      app == null ? void 0 : app.setAppliance("pencil");
+    }
   }
   function text4() {
     app == null ? void 0 : app.setAppliance("text");
@@ -12858,7 +13485,20 @@ function instance69($$self, $$props, $$invalidate) {
     app == null ? void 0 : app.cleanCurrentScene();
   }
   function useLaserPen() {
-    app == null ? void 0 : app.setAppliance("laserPen");
+    var _a;
+    (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
+      currentApplianceName: "laserPen",
+      useLaserPen: true,
+      strokeOpacity: 1
+    });
+  }
+  function useMarkPen() {
+    var _a;
+    (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
+      currentApplianceName: "pencil",
+      useLaserPen: false,
+      strokeOpacity: 0.5
+    });
   }
   function div3_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
@@ -12900,7 +13540,7 @@ function instance69($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(35, computed_height = $$props2.computed_height);
+      $$invalidate(36, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("placement" in $$props2)
@@ -12929,11 +13569,11 @@ function instance69($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(37, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(40, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & /*t*/
     1024 | $$self.$$.dirty[1] & /*hotkeys*/
-    64) {
+    512) {
       $$invalidate(20, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
@@ -12949,7 +13589,7 @@ function instance69($$self, $$props, $$invalidate) {
       $$subscribe_memberState($$invalidate(19, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & /*$memberState*/
-    128) {
+    1024) {
       $$invalidate(18, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[0] & /*app*/
@@ -12958,16 +13598,24 @@ function instance69($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*scrollable*/
     32 | $$self.$$.dirty[1] & /*$scroll_height, computed_height*/
-    272) {
+    2080) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(36, hasAppliancePlugin = !!(app == null ? void 0 : app.appliancePlugin));
+      $$invalidate(37, hasAppliancePlugin = !!(app == null ? void 0 : app.appliancePlugin));
+    }
+    if ($$self.$$.dirty[1] & /*hasAppliancePlugin, $memberState*/
+    1088) {
+      $$invalidate(39, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
     }
     if ($$self.$$.dirty[1] & /*hasAppliancePlugin, $memberState*/
-    160) {
-      $$invalidate(16, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
+    1088) {
+      $$invalidate(38, hasUseMarkPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeOpacity) === 0.5 || false);
+    }
+    if ($$self.$$.dirty[1] & /*hasUseLaserPen, hasUseMarkPen*/
+    384) {
+      $$invalidate(16, pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil");
     }
   };
   return [
@@ -12987,7 +13635,7 @@ function instance69($$self, $$props, $$invalidate) {
     shapes_panel,
     apps_panel,
     btn_props,
-    hasUseLaserPen,
+    pencilType,
     status,
     appliance,
     memberState,
@@ -13006,8 +13654,11 @@ function instance69($$self, $$props, $$invalidate) {
     laserPointer,
     clear,
     useLaserPen,
+    useMarkPen,
     computed_height,
     hasAppliancePlugin,
+    hasUseMarkPen,
+    hasUseLaserPen,
     hotkeys,
     $memberState,
     $scroll_height,
@@ -13024,8 +13675,8 @@ var Contents = class extends SvelteComponent {
     init(
       this,
       options,
-      instance69,
-      create_fragment69,
+      instance71,
+      create_fragment71,
       safe_not_equal,
       {
         app: 0,
@@ -13033,7 +13684,7 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 35,
+        computed_height: 36,
         scrollable: 5,
         placement: 6,
         items: 7,
@@ -13041,7 +13692,7 @@ var Contents = class extends SvelteComponent {
         colors: 9
       },
       null,
-      [-1, -1]
+      [-1, -1, -1]
     );
   }
 };
@@ -13104,7 +13755,7 @@ function create_if_block15(ctx) {
     }
   };
 }
-function create_fragment70(ctx) {
+function create_fragment72(ctx) {
   let div1;
   let div0;
   let contents;
@@ -13374,7 +14025,7 @@ function create_fragment70(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance70($$self, $$props, $$invalidate) {
+function instance72($$self, $$props, $$invalidate) {
   let writable2;
   let phase;
   let disabled;
@@ -13493,7 +14144,7 @@ function instance70($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance70, create_fragment70, safe_not_equal, {
+    init(this, options, instance72, create_fragment72, safe_not_equal, {
       app: 1,
       theme: 2,
       language: 3,
@@ -13565,7 +14216,7 @@ function create_else_block_12(ctx) {
     }
   };
 }
-function create_if_block_22(ctx) {
+function create_if_block_23(ctx) {
   var _a;
   let icon;
   let current;
@@ -13622,7 +14273,7 @@ function create_if_block_22(ctx) {
     }
   };
 }
-function create_if_block_15(ctx) {
+function create_if_block_110(ctx) {
   var _a;
   let icon;
   let current;
@@ -13798,7 +14449,7 @@ function create_default_slot_25(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_15, create_if_block_22, create_else_block_12];
+  const if_block_creators = [create_if_block_110, create_if_block_23, create_else_block_12];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
@@ -14175,7 +14826,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment71(ctx) {
+function create_fragment73(ctx) {
   let div0;
   let button0;
   let t0;
@@ -14452,7 +15103,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance71($$self, $$props, $$invalidate) {
+function instance73($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -14597,7 +15248,7 @@ function instance71($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance71, create_fragment71, safe_not_equal, {
+    init(this, options, instance73, create_fragment73, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -14664,7 +15315,7 @@ function create_if_block17(ctx) {
     }
   };
 }
-function create_fragment72(ctx) {
+function create_fragment74(ctx) {
   var _a;
   let div2;
   let div0;
@@ -14764,7 +15415,7 @@ function create_fragment72(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance72($$self, $$props, $$invalidate) {
+function instance74($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
@@ -14839,7 +15490,7 @@ function instance72($$self, $$props, $$invalidate) {
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance72, create_fragment72, not_equal, {
+    init(this, options, instance74, create_fragment74, not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -14915,7 +15566,7 @@ function create_if_block_32(ctx) {
     }
   };
 }
-function create_if_block_23(ctx) {
+function create_if_block_24(ctx) {
   let redoundo;
   let current;
   redoundo = new RedoUndo_default({
@@ -14973,7 +15624,7 @@ function create_if_block_23(ctx) {
     }
   };
 }
-function create_if_block_16(ctx) {
+function create_if_block_111(ctx) {
   let zoomcontrol;
   let current;
   zoomcontrol = new ZoomControl_default({
@@ -15089,7 +15740,7 @@ function create_if_block18(ctx) {
     }
   };
 }
-function create_fragment73(ctx) {
+function create_fragment75(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -15110,11 +15761,11 @@ function create_fragment73(ctx) {
   );
   let if_block1 = (
     /*config*/
-    ((_b = ctx[3].redo_undo) == null ? void 0 : _b.enable) !== false && create_if_block_23(ctx)
+    ((_b = ctx[3].redo_undo) == null ? void 0 : _b.enable) !== false && create_if_block_24(ctx)
   );
   let if_block2 = (
     /*config*/
-    ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_16(ctx)
+    ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_111(ctx)
   );
   let if_block3 = (
     /*config*/
@@ -15244,7 +15895,7 @@ function create_fragment73(ctx) {
             transition_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block_23(ctx2);
+          if_block1 = create_if_block_24(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
           if_block1.m(div2, t2);
@@ -15267,7 +15918,7 @@ function create_fragment73(ctx) {
             transition_in(if_block2, 1);
           }
         } else {
-          if_block2 = create_if_block_16(ctx2);
+          if_block2 = create_if_block_111(ctx2);
           if_block2.c();
           transition_in(if_block2, 1);
           if_block2.m(div2, null);
@@ -15360,7 +16011,7 @@ function create_fragment73(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance73($$self, $$props, $$invalidate) {
+function instance75($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -15485,7 +16136,7 @@ function instance73($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance73, create_fragment73, not_equal, {
+    init(this, options, instance75, create_fragment75, not_equal, {
       app: 0,
       theme: 1,
       language: 2,