@netless/fastboard-ui 1.0.2 → 1.0.3

package/dist/index.svelte.mjs

@@ -8749,7 +8749,205 @@ var Selector2 = class extends SvelteComponent {
   }
 };
 var Selector_default2 = Selector2;
-function create_else_block8(ctx) {
+function create_if_block_4(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_5, create_else_block_2];
+  const if_blocks = [];
+  function select_block_type_3(ctx2, dirty) {
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil"
+    )
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_3(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_3(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_2(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_3, create_else_block_12];
+  const if_blocks = [];
+  function select_block_type_2(ctx2, dirty) {
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil"
+    )
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_2(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_2(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_block8(ctx) {
+  let current_block_type_index;
+  let if_block;
+  let if_block_anchor;
+  let current;
+  const if_block_creators = [create_if_block_12, create_else_block8];
+  const if_blocks = [];
+  function select_block_type_1(ctx2, dirty) {
+    if (
+      /*appliance*/
+      ctx2[3] === "pencil"
+    )
+      return 0;
+    return 1;
+  }
+  current_block_type_index = select_block_type_1(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_1(ctx2);
+      if (current_block_type_index === previous_block_index) {
+        if_blocks[current_block_type_index].p(ctx2, dirty);
+      } else {
+        group_outros();
+        transition_out(if_blocks[previous_block_index], 1, 1, () => {
+          if_blocks[previous_block_index] = null;
+        });
+        check_outros();
+        if_block = if_blocks[current_block_type_index];
+        if (!if_block) {
+          if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx2);
+          if_block.c();
+        } else {
+          if_block.p(ctx2, dirty);
+        }
+        transition_in(if_block, 1);
+        if_block.m(if_block_anchor.parentNode, if_block_anchor);
+      }
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(if_block);
+      current = true;
+    },
+    o(local) {
+      transition_out(if_block);
+      current = false;
+    },
+    d(detaching) {
+      if_blocks[current_block_type_index].d(detaching);
+      if (detaching)
+        detach(if_block_anchor);
+    }
+  };
+}
+function create_else_block_2(ctx) {
   let icons_pencil;
   let current;
   icons_pencil = new Icons_default.Pencil({ props: { theme: (
@@ -8787,7 +8985,7 @@ function create_else_block8(ctx) {
     }
   };
 }
-function create_if_block_2(ctx) {
+function create_if_block_5(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -8827,7 +9025,45 @@ function create_if_block_2(ctx) {
     }
   };
 }
-function create_if_block_12(ctx) {
+function create_else_block_12(ctx) {
+  let icons_laserpen;
+  let current;
+  icons_laserpen = new Icons_default.LaserPen({ props: { theme: (
+    /*theme*/
+    ctx[4]
+  ) } });
+  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 & /*theme*/
+      16)
+        icons_laserpen_changes.theme = /*theme*/
+        ctx2[4];
+      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_if_block_3(ctx) {
   let icons_laserpenfilled;
   let current;
   icons_laserpenfilled = new Icons_default.LaserPenFilled({
@@ -8867,7 +9103,45 @@ function create_if_block_12(ctx) {
     }
   };
 }
-function create_if_block8(ctx) {
+function create_else_block8(ctx) {
+  let icons_markpen;
+  let current;
+  icons_markpen = new Icons_default.MarkPen({ props: { theme: (
+    /*theme*/
+    ctx[4]
+  ) } });
+  return {
+    c() {
+      create_component(icons_markpen.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(icons_markpen, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_markpen_changes = {};
+      if (dirty & /*theme*/
+      16)
+        icons_markpen_changes.theme = /*theme*/
+        ctx2[4];
+      icons_markpen.$set(icons_markpen_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(icons_markpen.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(icons_markpen.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(icons_markpen, detaching);
+    }
+  };
+}
+function create_if_block_12(ctx) {
   let icons_markpenfilled;
   let current;
   icons_markpenfilled = new Icons_default.MarkPenFilled({
@@ -8912,38 +9186,39 @@ function create_default_slot6(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block8, create_if_block_12, create_if_block_2, create_else_block8];
+  const if_block_creators = [create_if_block8, create_if_block_2, create_if_block_4];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
-      /*appliance*/
-      ctx2[3] === "pencil" && /*pencilType*/
+      /*pencilType*/
       ctx2[5] === "mark"
     )
       return 0;
     if (
-      /*appliance*/
-      ctx2[3] === "pencil" && /*pencilType*/
+      /*pencilType*/
       ctx2[5] === "laser"
     )
       return 1;
     if (
-      /*appliance*/
-      ctx2[3] === "pencil" && /*pencilType*/
+      /*pencilType*/
       ctx2[5] === "pencil"
     )
       return 2;
-    return 3;
+    return -1;
+  }
+  if (~(current_block_type_index = select_block_type(ctx))) {
+    if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   }
-  current_block_type_index = select_block_type(ctx);
-  if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
-      if_block.c();
+      if (if_block)
+        if_block.c();
       if_block_anchor = empty();
     },
     m(target, anchor) {
-      if_blocks[current_block_type_index].m(target, anchor);
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].m(target, anchor);
+      }
       insert(target, if_block_anchor, anchor);
       current = true;
     },
@@ -8951,22 +9226,30 @@ function create_default_slot6(ctx) {
       let previous_block_index = current_block_type_index;
       current_block_type_index = select_block_type(ctx2);
       if (current_block_type_index === previous_block_index) {
-        if_blocks[current_block_type_index].p(ctx2, dirty);
+        if (~current_block_type_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();
+        if (if_block) {
+          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_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);
         } else {
-          if_block.p(ctx2, dirty);
+          if_block = null;
         }
-        transition_in(if_block, 1);
-        if_block.m(if_block_anchor.parentNode, if_block_anchor);
       }
     },
     i(local) {
@@ -8980,7 +9263,9 @@ function create_default_slot6(ctx) {
       current = false;
     },
     d(detaching) {
-      if_blocks[current_block_type_index].d(detaching);
+      if (~current_block_type_index) {
+        if_blocks[current_block_type_index].d(detaching);
+      }
       if (detaching)
         detach(if_block_anchor);
     }
@@ -10625,39 +10910,39 @@ var Laser_default2 = Laser2;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[50] = list[i];
+  child_ctx[51] = list[i];
   const constants_0 = (
     /*netless_app*/
-    child_ctx[50]
+    child_ctx[51]
   );
-  child_ctx[51] = constants_0.icon;
-  child_ctx[52] = constants_0.label;
-  child_ctx[53] = constants_0.kind;
-  child_ctx[54] = constants_0.onClick;
+  child_ctx[52] = constants_0.icon;
+  child_ctx[53] = constants_0.label;
+  child_ctx[54] = constants_0.kind;
+  child_ctx[55] = constants_0.onClick;
   const constants_1 = (
     /*$status*/
     child_ctx[22] && /*$status*/
     child_ctx[22][
       /*kind*/
-      child_ctx[53]
+      child_ctx[54]
     ]
   );
-  child_ctx[55] = constants_1;
+  child_ctx[56] = constants_1;
   const constants_2 = function func() {
     return (
       /*func*/
-      ctx[46](
+      ctx[47](
         /*onClick*/
-        child_ctx[54]
+        child_ctx[55]
       )
     );
   };
-  child_ctx[56] = constants_2;
+  child_ctx[57] = constants_2;
   return child_ctx;
 }
 function get_each_context_1(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[59] = list[i];
+  child_ctx[60] = list[i];
   return child_ctx;
 }
 function create_if_block_18(ctx) {
@@ -10697,7 +10982,7 @@ function create_if_block_18(ctx) {
       )]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -10762,7 +11047,7 @@ function create_if_block_17(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -10794,9 +11079,9 @@ function create_if_block_17(ctx) {
     p(ctx2, dirty) {
       const laser_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         laser_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         laser_changes.theme = /*theme*/
@@ -10833,7 +11118,7 @@ function create_if_block_16(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -10865,9 +11150,9 @@ function create_if_block_16(ctx) {
     p(ctx2, dirty) {
       const hand_1_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         hand_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         hand_1_changes.theme = /*theme*/
@@ -10967,7 +11252,7 @@ function create_if_block_14(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -10999,9 +11284,9 @@ function create_if_block_14(ctx) {
     p(ctx2, dirty) {
       const eraser_1_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         eraser_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         eraser_1_changes.theme = /*theme*/
@@ -11042,7 +11327,7 @@ function create_if_block_13(ctx) {
       ),
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11077,9 +11362,9 @@ function create_if_block_13(ctx) {
         shapes_changes.app = /*app*/
         ctx2[0];
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         shapes_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         shapes_changes.theme = /*theme*/
@@ -11120,7 +11405,7 @@ function create_if_block_122(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11156,9 +11441,9 @@ function create_if_block_122(ctx) {
     p(ctx2, dirty) {
       const text_1_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         text_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         text_1_changes.theme = /*theme*/
@@ -11203,7 +11488,7 @@ function create_if_block_11(ctx) {
       ),
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11243,9 +11528,9 @@ function create_if_block_11(ctx) {
         pencil_1_changes.pencilType = /*pencilType*/
         ctx2[16];
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         pencil_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         pencil_1_changes.theme = /*theme*/
@@ -11286,7 +11571,7 @@ function create_if_block_10(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11318,9 +11603,9 @@ function create_if_block_10(ctx) {
     p(ctx2, dirty) {
       const selector_1_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         selector_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         selector_1_changes.theme = /*theme*/
@@ -11357,7 +11642,7 @@ function create_if_block_9(ctx) {
     props: {
       appliance: (
         /*appliance*/
-        ctx[18]
+        ctx[17]
       ),
       theme: (
         /*theme*/
@@ -11389,9 +11674,9 @@ function create_if_block_9(ctx) {
     p(ctx2, dirty) {
       const clicker_1_changes = {};
       if (dirty[0] & /*appliance*/
-      262144)
+      131072)
         clicker_1_changes.appliance = /*appliance*/
-        ctx2[18];
+        ctx2[17];
       if (dirty[0] & /*theme*/
       2)
         clicker_1_changes.theme = /*theme*/
@@ -11441,47 +11726,47 @@ function create_each_block_1(ctx) {
   function select_block_type(ctx2, dirty) {
     if (
       /*item*/
-      ctx2[59] === "clicker"
+      ctx2[60] === "clicker"
     )
       return 0;
     if (
       /*item*/
-      ctx2[59] === "selector"
+      ctx2[60] === "selector"
     )
       return 1;
     if (
       /*item*/
-      ctx2[59] === "pencil"
+      ctx2[60] === "pencil"
     )
       return 2;
     if (
       /*item*/
-      ctx2[59] === "text"
+      ctx2[60] === "text"
     )
       return 3;
     if (
       /*item*/
-      ctx2[59] === "shapes"
+      ctx2[60] === "shapes"
     )
       return 4;
     if (
       /*item*/
-      ctx2[59] === "eraser"
+      ctx2[60] === "eraser"
     )
       return 5;
     if (
       /*item*/
-      ctx2[59] === "clear"
+      ctx2[60] === "clear"
     )
       return 6;
     if (
       /*item*/
-      ctx2[59] === "hand"
+      ctx2[60] === "hand"
     )
       return 7;
     if (
       /*item*/
-      ctx2[59] === "laserPointer"
+      ctx2[60] === "laserPointer"
     )
       return 8;
     return -1;
@@ -11618,7 +11903,7 @@ function create_if_block_8(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11720,7 +12005,7 @@ function create_if_block_7(ctx) {
         ctx2[3];
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -11789,7 +12074,7 @@ function create_if_block14(ctx) {
   let if_block2;
   let if_block2_anchor;
   let current;
-  const if_block_creators = [create_if_block_5, create_if_block_6];
+  const if_block_creators = [create_if_block_52, create_if_block_6];
   const if_blocks = [];
   function select_block_type_1(ctx2, dirty) {
     if (
@@ -11807,7 +12092,7 @@ function create_if_block14(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_3, create_if_block_4];
+  const if_block_creators_1 = [create_if_block_32, create_if_block_42];
   const if_blocks_1 = [];
   function select_block_type_2(ctx2, dirty) {
     if (
@@ -12026,7 +12311,7 @@ function create_if_block_6(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12046,7 +12331,7 @@ function create_if_block_6(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_52(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -12064,8 +12349,8 @@ function create_if_block_5(ctx) {
   button = new Button_default({ props: button_props });
   button.$on(
     "click",
-    /*pencil*/
-    ctx[28]
+    /*usePencil*/
+    ctx[34]
   );
   return {
     c() {
@@ -12088,7 +12373,7 @@ function create_if_block_5(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12186,7 +12471,7 @@ function create_default_slot_43(ctx) {
     }
   };
 }
-function create_if_block_4(ctx) {
+function create_if_block_42(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -12205,7 +12490,7 @@ function create_if_block_4(ctx) {
   button.$on(
     "click",
     /*useLaserPen*/
-    ctx[34]
+    ctx[35]
   );
   return {
     c() {
@@ -12228,7 +12513,7 @@ function create_if_block_4(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12248,7 +12533,7 @@ function create_if_block_4(ctx) {
     }
   };
 }
-function create_if_block_3(ctx) {
+function create_if_block_32(ctx) {
   let button;
   let current;
   const button_spread_levels = [
@@ -12285,7 +12570,7 @@ function create_if_block_3(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12402,7 +12687,7 @@ function create_if_block_22(ctx) {
   button.$on(
     "click",
     /*useMarkPen*/
-    ctx[35]
+    ctx[36]
   );
   return {
     c() {
@@ -12425,7 +12710,7 @@ function create_if_block_22(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12482,7 +12767,7 @@ function create_if_block_19(ctx) {
       ]) : {};
       if (dirty[0] & /*theme*/
       2 | dirty[2] & /*$$scope*/
-      1) {
+      2) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -12591,7 +12876,7 @@ function create_each_block4(ctx) {
   let span;
   let t1_value = (
     /*label*/
-    ctx[52] + ""
+    ctx[53] + ""
   );
   let t1;
   let span_class_value;
@@ -12613,40 +12898,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[51]))
+      ctx[52]))
         attr(img, "src", img_src_value);
       attr(img, "alt", img_alt_value = /*kind*/
-      ctx[53]);
+      ctx[54]);
       attr(img, "title", img_title_value = /*label*/
-      ctx[52]);
+      ctx[53]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + /*theme*/
       ctx[1]);
       attr(button, "class", button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[53] + " " + /*theme*/
+      ctx[54] + " " + /*theme*/
       ctx[1]);
       attr(button, "title", button_title_value = /*label*/
-      ctx[52] + /*state*/
-      (ctx[55] && /*state*/
-      ctx[55].reason ? ": " + /*state*/
-      ctx[55].reason : ""));
+      ctx[53] + /*state*/
+      (ctx[56] && /*state*/
+      ctx[56].reason ? ": " + /*state*/
+      ctx[56].reason : ""));
       attr(button, "data-app-kind", button_data_app_kind_value = /*netless_app*/
-      ctx[50].kind);
+      ctx[51].kind);
       button.disabled = button_disabled_value = /*state*/
-      ctx[55] && /*state*/
-      ctx[55].status !== "idle";
+      ctx[56] && /*state*/
+      ctx[56].status !== "idle";
       toggle_class(
         button,
         "is-loading",
         /*state*/
-        ctx[55] && /*state*/
-        ctx[55].status === "loading"
+        ctx[56] && /*state*/
+        ctx[56].status === "loading"
       );
       toggle_class(
         button,
         "is-failed",
         /*state*/
-        ctx[55] && /*state*/
-        ctx[55].status === "failed"
+        ctx[56] && /*state*/
+        ctx[56].status === "failed"
       );
     },
     m(target, anchor) {
@@ -12660,9 +12945,9 @@ function create_each_block4(ctx) {
         dispose = listen(button, "click", function() {
           if (is_function(
             /*on_click*/
-            ctx[56]
+            ctx[57]
           ))
-            ctx[56].apply(this, arguments);
+            ctx[57].apply(this, arguments);
         });
         mounted = true;
       }
@@ -12676,22 +12961,22 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps*/
       2097152 && !src_url_equal(img.src, img_src_value = /*icon*/
-      ctx[51])) {
+      ctx[52])) {
         attr(img, "src", img_src_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && img_alt_value !== (img_alt_value = /*kind*/
-      ctx[53])) {
+      ctx[54])) {
         attr(img, "alt", img_alt_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && img_title_value !== (img_title_value = /*label*/
-      ctx[52])) {
+      ctx[53])) {
         attr(img, "title", img_title_value);
       }
       if (dirty[0] & /*$apps*/
       2097152 && t1_value !== (t1_value = /*label*/
-      ctx[52] + ""))
+      ctx[53] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & /*theme*/
       2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + /*theme*/
@@ -12700,27 +12985,27 @@ function create_each_block4(ctx) {
       }
       if (dirty[0] & /*$apps, theme*/
       2097154 && button_class_value !== (button_class_value = name5 + "-app-btn " + /*kind*/
-      ctx[53] + " " + /*theme*/
+      ctx[54] + " " + /*theme*/
       ctx[1])) {
         attr(button, "class", button_class_value);
       }
       if (dirty[0] & /*$apps, $status*/
       6291456 && button_title_value !== (button_title_value = /*label*/
-      ctx[52] + /*state*/
-      (ctx[55] && /*state*/
-      ctx[55].reason ? ": " + /*state*/
-      ctx[55].reason : ""))) {
+      ctx[53] + /*state*/
+      (ctx[56] && /*state*/
+      ctx[56].reason ? ": " + /*state*/
+      ctx[56].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[50].kind)) {
+      ctx[51].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[55] && /*state*/
-      ctx[55].status !== "idle")) {
+      ctx[56] && /*state*/
+      ctx[56].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -12729,8 +13014,8 @@ function create_each_block4(ctx) {
           button,
           "is-loading",
           /*state*/
-          ctx[55] && /*state*/
-          ctx[55].status === "loading"
+          ctx[56] && /*state*/
+          ctx[56].status === "loading"
         );
       }
       if (dirty[0] & /*$apps, theme, $status, $apps*/
@@ -12739,8 +13024,8 @@ function create_each_block4(ctx) {
           button,
           "is-failed",
           /*state*/
-          ctx[55] && /*state*/
-          ctx[55].status === "failed"
+          ctx[56] && /*state*/
+          ctx[56].status === "failed"
         );
       }
     },
@@ -13029,11 +13314,11 @@ function create_fragment71(ctx) {
       append(div3, div2);
       append(div3, t6);
       mount_component(strokecolor0, div3, null);
-      ctx[43](div3);
+      ctx[44](div3);
       append(div9, t7);
       append(div9, div4);
       mount_component(textcolor, div4, null);
-      ctx[44](div4);
+      ctx[45](div4);
       append(div9, t8);
       append(div9, div7);
       mount_component(selectshapes, div7, null);
@@ -13045,7 +13330,7 @@ function create_fragment71(ctx) {
       append(div7, div6);
       append(div7, t12);
       mount_component(strokecolor1, div7, null);
-      ctx[45](div7);
+      ctx[46](div7);
       append(div9, t13);
       append(div9, div8);
       for (let i = 0; i < each_blocks.length; i += 1) {
@@ -13053,7 +13338,7 @@ function create_fragment71(ctx) {
           each_blocks[i].m(div8, null);
         }
       }
-      ctx[47](div8);
+      ctx[48](div8);
       current = true;
       if (!mounted) {
         dispose = [
@@ -13099,7 +13384,7 @@ function create_fragment71(ctx) {
         check_outros();
       }
       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*/
+      2081668227 | dirty[1] & /*clear, hand, laserPointer*/
       7) {
         each_value_1 = /*items*/
         ctx2[7];
@@ -13390,15 +13675,15 @@ function create_fragment71(ctx) {
         if_block3.d();
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[43](null);
-      destroy_component(textcolor);
       ctx[44](null);
+      destroy_component(textcolor);
+      ctx[45](null);
       destroy_component(selectshapes);
       destroy_component(strokewidth1);
       destroy_component(strokecolor1);
-      ctx[45](null);
+      ctx[46](null);
       destroy_each(each_blocks, detaching);
-      ctx[47](null);
+      ctx[48](null);
       mounted = false;
       run_all(dispose);
     }
@@ -13418,8 +13703,8 @@ function instance71($$self, $$props, $$invalidate) {
   let hasUseMarkPen;
   let pencilType;
   let $top;
-  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 $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(42, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(43, $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));
@@ -13444,7 +13729,7 @@ function instance71($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(49, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(50, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -13458,15 +13743,18 @@ function instance71($$self, $$props, $$invalidate) {
     app == null ? void 0 : app.setAppliance("selector");
   }
   function pencil() {
-    var _a;
     if (hasAppliancePlugin) {
-      (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
-        currentApplianceName: "pencil",
-        useLaserPen: false,
-        strokeOpacity: 1
-      });
+      if (appliance !== "pencil") {
+        if (pencilType === "mark") {
+          useMarkPen();
+        } else if (pencilType === "laser") {
+          useLaserPen();
+        } else {
+          usePencil();
+        }
+      }
     } else {
-      app == null ? void 0 : app.setAppliance("pencil");
+      usePencil();
     }
   }
   function text4() {
@@ -13484,6 +13772,18 @@ function instance71($$self, $$props, $$invalidate) {
   function clear() {
     app == null ? void 0 : app.cleanCurrentScene();
   }
+  function usePencil() {
+    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 useLaserPen() {
     var _a;
     (_a = app == null ? void 0 : app.appliancePlugin) == null ? void 0 : _a.setMemberState({
@@ -13540,7 +13840,7 @@ function instance71($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(36, computed_height = $$props2.computed_height);
+      $$invalidate(37, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
     if ("placement" in $$props2)
@@ -13569,11 +13869,11 @@ function instance71($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(40, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(41, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & /*t*/
     1024 | $$self.$$.dirty[1] & /*hotkeys*/
-    512) {
+    1024) {
       $$invalidate(20, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
@@ -13589,32 +13889,32 @@ function instance71($$self, $$props, $$invalidate) {
       $$subscribe_memberState($$invalidate(19, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & /*$memberState*/
-    1024) {
-      $$invalidate(18, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+    2048) {
+      $$invalidate(17, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$subscribe_status($$invalidate(17, status = app == null ? void 0 : app.appsStatus));
+      $$subscribe_status($$invalidate(18, status = app == null ? void 0 : app.appsStatus));
     }
     if ($$self.$$.dirty[0] & /*scrollable*/
     32 | $$self.$$.dirty[1] & /*$scroll_height, computed_height*/
-    2080) {
+    4160) {
       max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
     if ($$self.$$.dirty[0] & /*app*/
     1) {
-      $$invalidate(37, hasAppliancePlugin = !!(app == null ? void 0 : app.appliancePlugin));
+      $$invalidate(38, 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);
+    2176) {
+      $$invalidate(40, hasUseLaserPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.useLaserPen) || false);
     }
     if ($$self.$$.dirty[1] & /*hasAppliancePlugin, $memberState*/
-    1088) {
-      $$invalidate(38, hasUseMarkPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeOpacity) === 0.5 || false);
+    2176) {
+      $$invalidate(39, hasUseMarkPen = hasAppliancePlugin && ($memberState == null ? void 0 : $memberState.strokeOpacity) === 0.5 || false);
     }
     if ($$self.$$.dirty[1] & /*hasUseLaserPen, hasUseMarkPen*/
-    384) {
+    768) {
       $$invalidate(16, pencilType = hasUseLaserPen ? "laser" : hasUseMarkPen ? "mark" : "pencil");
     }
   };
@@ -13636,8 +13936,8 @@ function instance71($$self, $$props, $$invalidate) {
     apps_panel,
     btn_props,
     pencilType,
-    status,
     appliance,
+    status,
     memberState,
     c,
     $apps,
@@ -13653,6 +13953,7 @@ function instance71($$self, $$props, $$invalidate) {
     hand,
     laserPointer,
     clear,
+    usePencil,
     useLaserPen,
     useMarkPen,
     computed_height,
@@ -13684,7 +13985,7 @@ var Contents = class extends SvelteComponent {
         language: 2,
         disabled: 3,
         scroll_height: 4,
-        computed_height: 36,
+        computed_height: 37,
         scrollable: 5,
         placement: 6,
         items: 7,
@@ -14159,7 +14460,7 @@ function get_each_context5(ctx, list, i) {
   child_ctx[25] = list[i];
   return child_ctx;
 }
-function create_else_block_12(ctx) {
+function create_else_block_13(ctx) {
   var _a;
   let icon;
   let current;
@@ -14449,7 +14750,7 @@ function create_default_slot_25(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_110, create_if_block_23, create_else_block_12];
+  const if_block_creators = [create_if_block_110, create_if_block_23, create_else_block_13];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
     if (
@@ -15500,7 +15801,7 @@ var ReplayFastboard = class extends SvelteComponent {
   }
 };
 var ReplayFastboard_default = ReplayFastboard;
-function create_if_block_32(ctx) {
+function create_if_block_33(ctx) {
   let toolbar;
   let current;
   toolbar = new Toolbar_default({
@@ -15757,7 +16058,7 @@ function create_fragment75(ctx) {
   let dispose;
   let if_block0 = (
     /*config*/
-    ((_a = ctx[3].toolbar) == null ? void 0 : _a.enable) !== false && create_if_block_32(ctx)
+    ((_a = ctx[3].toolbar) == null ? void 0 : _a.enable) !== false && create_if_block_33(ctx)
   );
   let if_block1 = (
     /*config*/
@@ -15860,7 +16161,7 @@ function create_fragment75(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_32(ctx2);
+          if_block0 = create_if_block_33(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(div1, null);