@netless/fastboard-ui 1.0.0-canary.5 → 1.0.0-canary.7

package/dist/index.mjs

@@ -3595,15 +3595,16 @@ function create_else_block_1(ctx) {
   let current;
   let mounted;
   let dispose;
-  const default_slot_template = ctx[9].default;
-  const default_slot = create_slot(default_slot_template, ctx, ctx[8], null);
+  const default_slot_template = ctx[10].default;
+  const default_slot = create_slot(default_slot_template, ctx, ctx[9], null);
   return {
     c() {
       button = element("button");
       if (default_slot)
         default_slot.c();
       attr(button, "class", button_class_value = ctx[1] + "-btn " + ctx[0] + " " + ctx[2]);
-      button.disabled = ctx[3];
+      button.disabled = ctx[4];
+      toggle_class(button, "is-active", ctx[3]);
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -3612,19 +3613,19 @@ function create_else_block_1(ctx) {
       }
       current = true;
       if (!mounted) {
-        dispose = listen(button, "click", ctx[12]);
+        dispose = listen(button, "click", ctx[13]);
         mounted = true;
       }
     },
     p(ctx2, dirty) {
       if (default_slot) {
-        if (default_slot.p && (!current || dirty & 256)) {
+        if (default_slot.p && (!current || dirty & 512)) {
           update_slot_base(
             default_slot,
             default_slot_template,
             ctx2,
-            ctx2[8],
-            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            ctx2[9],
+            !current ? get_all_dirty_from_scope(ctx2[9]) : get_slot_changes(default_slot_template, ctx2[9], dirty, null),
             null
           );
         }
@@ -3632,8 +3633,11 @@ function create_else_block_1(ctx) {
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
         attr(button, "class", button_class_value);
       }
-      if (!current || dirty & 8) {
-        button.disabled = ctx2[3];
+      if (!current || dirty & 16) {
+        button.disabled = ctx2[4];
+      }
+      if (dirty & 15) {
+        toggle_class(button, "is-active", ctx2[3]);
       }
     },
     i(local) {
@@ -3664,7 +3668,7 @@ function create_if_block2(ctx) {
   const if_block_creators = [create_if_block_1, create_else_block2];
   const if_blocks = [];
   function select_block_type_1(ctx2, dirty) {
-    if (ctx2[6])
+    if (ctx2[7])
       return 0;
     return 1;
   }
@@ -3726,15 +3730,16 @@ function create_else_block2(ctx) {
   let current;
   let mounted;
   let dispose;
-  const default_slot_template = ctx[9].default;
-  const default_slot = create_slot(default_slot_template, ctx, ctx[8], null);
+  const default_slot_template = ctx[10].default;
+  const default_slot = create_slot(default_slot_template, ctx, ctx[9], null);
   return {
     c() {
       button = element("button");
       if (default_slot)
         default_slot.c();
       attr(button, "class", button_class_value = ctx[1] + "-btn " + ctx[0] + " " + ctx[2]);
-      button.disabled = ctx[3];
+      button.disabled = ctx[4];
+      toggle_class(button, "is-active", ctx[3]);
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -3744,10 +3749,10 @@ function create_else_block2(ctx) {
       current = true;
       if (!mounted) {
         dispose = [
-          listen(button, "click", ctx[11]),
+          listen(button, "click", ctx[12]),
           action_destroyer(tippy_action = tippy.call(null, button, {
-            content: ctx[4],
-            placement: ctx[5],
+            content: ctx[5],
+            placement: ctx[6],
             className: ctx[0]
           }))
         ];
@@ -3756,13 +3761,13 @@ function create_else_block2(ctx) {
     },
     p(ctx2, dirty) {
       if (default_slot) {
-        if (default_slot.p && (!current || dirty & 256)) {
+        if (default_slot.p && (!current || dirty & 512)) {
           update_slot_base(
             default_slot,
             default_slot_template,
             ctx2,
-            ctx2[8],
-            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            ctx2[9],
+            !current ? get_all_dirty_from_scope(ctx2[9]) : get_slot_changes(default_slot_template, ctx2[9], dirty, null),
             null
           );
         }
@@ -3770,15 +3775,18 @@ function create_else_block2(ctx) {
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
         attr(button, "class", button_class_value);
       }
-      if (!current || dirty & 8) {
-        button.disabled = ctx2[3];
+      if (!current || dirty & 16) {
+        button.disabled = ctx2[4];
       }
-      if (tippy_action && is_function(tippy_action.update) && dirty & 49)
+      if (tippy_action && is_function(tippy_action.update) && dirty & 97)
         tippy_action.update.call(null, {
-          content: ctx2[4],
-          placement: ctx2[5],
+          content: ctx2[5],
+          placement: ctx2[6],
           className: ctx2[0]
         });
+      if (dirty & 15) {
+        toggle_class(button, "is-active", ctx2[3]);
+      }
     },
     i(local) {
       if (current)
@@ -3813,8 +3821,8 @@ function create_if_block_1(ctx) {
   let current;
   let mounted;
   let dispose;
-  const default_slot_template = ctx[9].default;
-  const default_slot = create_slot(default_slot_template, ctx, ctx[8], null);
+  const default_slot_template = ctx[10].default;
+  const default_slot = create_slot(default_slot_template, ctx, ctx[9], null);
   return {
     c() {
       span1 = element("span");
@@ -3824,7 +3832,8 @@ function create_if_block_1(ctx) {
       t = space();
       span0 = element("span");
       attr(button, "class", button_class_value = ctx[1] + "-btn " + ctx[0] + " " + ctx[2]);
-      button.disabled = ctx[3];
+      button.disabled = ctx[4];
+      toggle_class(button, "is-active", ctx[3]);
       attr(span0, "class", span0_class_value = ctx[1] + "-triangle");
       attr(span1, "class", span1_class_value = ctx[1] + "-btn-interactive " + ctx[2]);
     },
@@ -3839,18 +3848,18 @@ function create_if_block_1(ctx) {
       current = true;
       if (!mounted) {
         dispose = [
-          listen(button, "click", ctx[10]),
+          listen(button, "click", ctx[11]),
           action_destroyer(tippy_action = tippy.call(null, button, {
-            content: ctx[6],
+            content: ctx[7],
             ...tippy_menu,
-            placement: ctx[7],
+            placement: ctx[8],
             appendTo: document.body,
             theme: ctx[2],
             className: "fastboard-panel"
           })),
           action_destroyer(tippy_action_1 = tippy.call(null, span1, {
-            content: ctx[4],
-            placement: ctx[5],
+            content: ctx[5],
+            placement: ctx[6],
             className: ctx[0]
           }))
         ];
@@ -3859,13 +3868,13 @@ function create_if_block_1(ctx) {
     },
     p(ctx2, dirty) {
       if (default_slot) {
-        if (default_slot.p && (!current || dirty & 256)) {
+        if (default_slot.p && (!current || dirty & 512)) {
           update_slot_base(
             default_slot,
             default_slot_template,
             ctx2,
-            ctx2[8],
-            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            ctx2[9],
+            !current ? get_all_dirty_from_scope(ctx2[9]) : get_slot_changes(default_slot_template, ctx2[9], dirty, null),
             null
           );
         }
@@ -3873,28 +3882,31 @@ function create_if_block_1(ctx) {
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
         attr(button, "class", button_class_value);
       }
-      if (!current || dirty & 8) {
-        button.disabled = ctx2[3];
+      if (!current || dirty & 16) {
+        button.disabled = ctx2[4];
       }
-      if (tippy_action && is_function(tippy_action.update) && dirty & 196)
+      if (tippy_action && is_function(tippy_action.update) && dirty & 388)
         tippy_action.update.call(null, {
-          content: ctx2[6],
+          content: ctx2[7],
           ...tippy_menu,
-          placement: ctx2[7],
+          placement: ctx2[8],
           appendTo: document.body,
           theme: ctx2[2],
           className: "fastboard-panel"
         });
+      if (dirty & 15) {
+        toggle_class(button, "is-active", ctx2[3]);
+      }
       if (!current || dirty & 2 && span0_class_value !== (span0_class_value = ctx2[1] + "-triangle")) {
         attr(span0, "class", span0_class_value);
       }
       if (!current || dirty & 6 && span1_class_value !== (span1_class_value = ctx2[1] + "-btn-interactive " + ctx2[2])) {
         attr(span1, "class", span1_class_value);
       }
-      if (tippy_action_1 && is_function(tippy_action_1.update) && dirty & 49)
+      if (tippy_action_1 && is_function(tippy_action_1.update) && dirty & 97)
         tippy_action_1.update.call(null, {
-          content: ctx2[4],
-          placement: ctx2[5],
+          content: ctx2[5],
+          placement: ctx2[6],
           className: ctx2[0]
         });
     },
@@ -3926,7 +3938,7 @@ function create_fragment47(ctx) {
   const if_block_creators = [create_if_block2, create_else_block_1];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
-    if (ctx2[4])
+    if (ctx2[5])
       return 0;
     return 1;
   }
@@ -3986,6 +3998,7 @@ function instance47($$self, $$props, $$invalidate) {
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
   let { theme = "light" } = $$props;
+  let { active = false } = $$props;
   let { disabled = false } = $$props;
   let { content = "" } = $$props;
   let { placement = "top" } = $$props;
@@ -4007,23 +4020,26 @@ function instance47($$self, $$props, $$invalidate) {
       $$invalidate(1, name10 = $$props2.name);
     if ("theme" in $$props2)
       $$invalidate(2, theme = $$props2.theme);
+    if ("active" in $$props2)
+      $$invalidate(3, active = $$props2.active);
     if ("disabled" in $$props2)
-      $$invalidate(3, disabled = $$props2.disabled);
+      $$invalidate(4, disabled = $$props2.disabled);
     if ("content" in $$props2)
-      $$invalidate(4, content = $$props2.content);
+      $$invalidate(5, content = $$props2.content);
     if ("placement" in $$props2)
-      $$invalidate(5, placement = $$props2.placement);
+      $$invalidate(6, placement = $$props2.placement);
     if ("menu" in $$props2)
-      $$invalidate(6, menu = $$props2.menu);
+      $$invalidate(7, menu = $$props2.menu);
     if ("menu_placement" in $$props2)
-      $$invalidate(7, menu_placement = $$props2.menu_placement);
+      $$invalidate(8, menu_placement = $$props2.menu_placement);
     if ("$$scope" in $$props2)
-      $$invalidate(8, $$scope = $$props2.$$scope);
+      $$invalidate(9, $$scope = $$props2.$$scope);
   };
   return [
     className,
     name10,
     theme,
+    active,
     disabled,
     content,
     placement,
@@ -4043,11 +4059,12 @@ var Button = class extends SvelteComponent {
       class: 0,
       name: 1,
       theme: 2,
-      disabled: 3,
-      content: 4,
-      placement: 5,
-      menu: 6,
-      menu_placement: 7
+      active: 3,
+      disabled: 4,
+      content: 5,
+      placement: 6,
+      menu: 7,
+      menu_placement: 8
     });
   }
 };
@@ -5739,7 +5756,7 @@ var AppsInToolbar = class {
     this._listeners.forEach((fn) => fn(this._data));
   }
 };
-var apps = new AppsInToolbar([]);
+var stockedApps = new AppsInToolbar([]);
 
 // src/components/Toolbar/components/helper.ts
 function tooltip(text2, hotkey) {
@@ -7682,6 +7699,9 @@ function create_else_block_4(ctx) {
   let current;
   const button_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === ctx[12]
+    },
     ctx[18],
     {
       content: ctx[10][ctx[12]]
@@ -7706,8 +7726,11 @@ function create_else_block_4(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 332800 ? get_spread_update(button_spread_levels, [
+      const button_changes = dirty[0] & 333056 ? get_spread_update(button_spread_levels, [
         button_spread_levels[0],
+        dirty[0] & 4352 && {
+          active: ctx2[8] === ctx2[12]
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 5120 && {
           content: ctx2[10][ctx2[12]]
@@ -7739,6 +7762,9 @@ function create_if_block_9(ctx) {
   let current;
   const button_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === "pencilEraser"
+    },
     ctx[18],
     { content: ctx[21].pencilEraser },
     { menu: ctx[16] }
@@ -7761,8 +7787,11 @@ function create_if_block_9(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 2424832 ? get_spread_update(button_spread_levels, [
+      const button_changes = dirty[0] & 2425088 ? get_spread_update(button_spread_levels, [
         button_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "pencilEraser"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].pencilEraser },
         dirty[0] & 65536 && { menu: ctx2[16] }
@@ -7790,7 +7819,14 @@ function create_if_block_9(ctx) {
 function create_if_block_7(ctx) {
   let button;
   let current;
-  const button_spread_levels = [{ class: "eraser" }, ctx[18], { content: ctx[21].eraser }];
+  const button_spread_levels = [
+    { class: "eraser" },
+    {
+      active: ctx[8] === "eraser"
+    },
+    ctx[18],
+    { content: ctx[21].eraser }
+  ];
   let button_props = {
     $$slots: { default: [create_default_slot_53] },
     $$scope: { ctx }
@@ -7809,8 +7845,11 @@ function create_if_block_7(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 2359296 ? get_spread_update(button_spread_levels, [
+      const button_changes = dirty[0] & 2359552 ? get_spread_update(button_spread_levels, [
         button_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "eraser"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].eraser }
       ]) : {};
@@ -8553,6 +8592,9 @@ function create_if_block6(ctx) {
   let current;
   const button0_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === "pencilEraser"
+    },
     ctx[18],
     { placement: "top" },
     {
@@ -8570,6 +8612,9 @@ function create_if_block6(ctx) {
   button0.$on("click", ctx[34]);
   const button1_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === "eraser"
+    },
     ctx[18],
     { placement: "top" },
     { content: ctx[21].eraserForPanel }
@@ -8608,10 +8653,13 @@ function create_if_block6(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button0_changes = dirty[0] & 2359296 ? get_spread_update(button0_spread_levels, [
+      const button0_changes = dirty[0] & 2359552 ? get_spread_update(button0_spread_levels, [
         button0_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "pencilEraser"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
-        button0_spread_levels[2],
+        button0_spread_levels[3],
         dirty[0] & 2097152 && {
           content: ctx2[21].pencilEraserForPanel
         }
@@ -8620,10 +8668,13 @@ function create_if_block6(ctx) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      const button1_changes = dirty[0] & 2359296 ? get_spread_update(button1_spread_levels, [
+      const button1_changes = dirty[0] & 2359552 ? get_spread_update(button1_spread_levels, [
         button1_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "eraser"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
-        button1_spread_levels[2],
+        button1_spread_levels[3],
         dirty[0] & 2097152 && { content: ctx2[21].eraserForPanel }
       ]) : {};
       if (dirty[0] & 258 | dirty[1] & 33554432) {
@@ -9149,6 +9200,9 @@ function create_fragment57(ctx) {
   let if_block0 = ctx[5] && create_if_block_17(ctx);
   const button0_spread_levels = [
     { class: "clicker" },
+    {
+      active: ctx[8] === "clicker"
+    },
     ctx[18],
     { content: ctx[21].clicker }
   ];
@@ -9163,6 +9217,9 @@ function create_fragment57(ctx) {
   button0.$on("click", ctx[27]);
   const button1_spread_levels = [
     { class: "selector" },
+    {
+      active: ctx[8] === "selector"
+    },
     ctx[18],
     { content: ctx[21].selector }
   ];
@@ -9177,6 +9234,9 @@ function create_fragment57(ctx) {
   button1.$on("click", ctx[28]);
   const button2_spread_levels = [
     { class: "pencil" },
+    {
+      active: ctx[8] === "pencil"
+    },
     ctx[18],
     { content: ctx[21].pencil },
     { menu: ctx[13] }
@@ -9192,6 +9252,7 @@ function create_fragment57(ctx) {
   button2.$on("click", ctx[29]);
   const button3_spread_levels = [
     { class: "text" },
+    { active: ctx[8] === "text" },
     ctx[18],
     { content: ctx[21].text },
     { menu: ctx[14] }
@@ -9207,6 +9268,9 @@ function create_fragment57(ctx) {
   button3.$on("click", ctx[30]);
   const button4_spread_levels = [
     { class: "shapes" },
+    {
+      active: ctx[8] === ctx[11] || ctx[8] === "shape" && ctx[9] === ctx[11]
+    },
     ctx[18],
     { content: ctx[10].shapes },
     { menu: ctx[15] }
@@ -9463,8 +9527,11 @@ function create_fragment57(ctx) {
         });
         check_outros();
       }
-      const button0_changes = dirty[0] & 2359296 ? get_spread_update(button0_spread_levels, [
+      const button0_changes = dirty[0] & 2359552 ? get_spread_update(button0_spread_levels, [
         button0_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "clicker"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].clicker }
       ]) : {};
@@ -9472,8 +9539,11 @@ function create_fragment57(ctx) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      const button1_changes = dirty[0] & 2359296 ? get_spread_update(button1_spread_levels, [
+      const button1_changes = dirty[0] & 2359552 ? get_spread_update(button1_spread_levels, [
         button1_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "selector"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].selector }
       ]) : {};
@@ -9481,8 +9551,11 @@ function create_fragment57(ctx) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
-      const button2_changes = dirty[0] & 2367488 ? get_spread_update(button2_spread_levels, [
+      const button2_changes = dirty[0] & 2367744 ? get_spread_update(button2_spread_levels, [
         button2_spread_levels[0],
+        dirty[0] & 256 && {
+          active: ctx2[8] === "pencil"
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].pencil },
         dirty[0] & 8192 && { menu: ctx2[13] }
@@ -9491,8 +9564,9 @@ function create_fragment57(ctx) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
-      const button3_changes = dirty[0] & 2375680 ? get_spread_update(button3_spread_levels, [
+      const button3_changes = dirty[0] & 2375936 ? get_spread_update(button3_spread_levels, [
         button3_spread_levels[0],
+        dirty[0] & 256 && { active: ctx2[8] === "text" },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 2097152 && { content: ctx2[21].text },
         dirty[0] & 16384 && { menu: ctx2[14] }
@@ -9501,8 +9575,11 @@ function create_fragment57(ctx) {
         button3_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button3.$set(button3_changes);
-      const button4_changes = dirty[0] & 295936 ? get_spread_update(button4_spread_levels, [
+      const button4_changes = dirty[0] & 298752 ? get_spread_update(button4_spread_levels, [
         button4_spread_levels[0],
+        dirty[0] & 2816 && {
+          active: ctx2[8] === ctx2[11] || ctx2[8] === "shape" && ctx2[9] === ctx2[11]
+        },
         dirty[0] & 262144 && get_spread_object(ctx2[18]),
         dirty[0] & 1024 && { content: ctx2[10].shapes },
         dirty[0] & 32768 && { menu: ctx2[15] }
@@ -9782,9 +9859,9 @@ function instance57($$self, $$props, $$invalidate) {
   let $top;
   let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(38, $scroll_height = $$value)), scroll_height);
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(39, $memberState = $$value)), memberState);
-  let $apps;
+  let $stockedApps;
   let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(23, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(22, $apps = $$value));
+  component_subscribe($$self, stockedApps, ($$value) => $$invalidate(22, $stockedApps = $$value));
   $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
@@ -9973,7 +10050,7 @@ function instance57($$self, $$props, $$invalidate) {
     status,
     memberState,
     c,
-    $apps,
+    $stockedApps,
     $status,
     top,
     scroll_up,
@@ -10027,58 +10104,44 @@ var Contents_default = Contents;
 
 // src/components/Toolbar/Toolbar.svelte
 function create_else_block7(ctx) {
-  let path0;
-  let path1;
+  let path;
   return {
     c() {
-      path0 = svg_element("path");
-      path1 = svg_element("path");
-      attr(path0, "stroke", "#000");
-      attr(path0, "d", "M20 52v16");
-      attr(path0, "class", name6 + "-handler-image-stroke-color");
-      attr(path1, "fill", "#000");
-      attr(path1, "stroke", "none");
-      attr(path1, "d", "M16 52v16l-8-8z");
-      attr(path1, "class", name6 + "-handler-image-fill-color");
+      path = svg_element("path");
+      attr(path, "fill-rule", "evenodd");
+      attr(path, "clip-rule", "evenodd");
+      attr(path, "d", "M6 19L8 17V25L6 23L4 21L6 19ZM10 17H9V25H10V17Z");
+      attr(path, "fill", "#fff");
+      attr(path, "class", name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
-      insert(target, path0, anchor);
-      insert(target, path1, anchor);
+      insert(target, path, anchor);
     },
     p: noop,
     d(detaching) {
       if (detaching)
-        detach(path0);
-      if (detaching)
-        detach(path1);
+        detach(path);
     }
   };
 }
 function create_if_block7(ctx) {
-  let path0;
-  let path1;
+  let path;
   return {
     c() {
-      path0 = svg_element("path");
-      path1 = svg_element("path");
-      attr(path0, "stroke", "#000");
-      attr(path0, "d", "M10 52v16");
-      attr(path0, "class", name6 + "-handler-image-stroke-color");
-      attr(path1, "fill", "#000");
-      attr(path1, "stroke", "none");
-      attr(path1, "d", "M14 52v16l8-8z");
-      attr(path1, "class", name6 + "-handler-image-fill-color");
+      path = svg_element("path");
+      attr(path, "fill-rule", "evenodd");
+      attr(path, "clip-rule", "evenodd");
+      attr(path, "d", "M8 19L6 17V25L8 23L10 21L8 19ZM4 17H5V25H4V17Z");
+      attr(path, "fill", "#fff");
+      attr(path, "class", name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
-      insert(target, path0, anchor);
-      insert(target, path1, anchor);
+      insert(target, path, anchor);
     },
     p: noop,
     d(detaching) {
       if (detaching)
-        detach(path0);
-      if (detaching)
-        detach(path1);
+        detach(path);
     }
   };
 }
@@ -10092,8 +10155,7 @@ function create_fragment58(ctx) {
   let input;
   let t1;
   let svg;
-  let path0;
-  let path1;
+  let path;
   let label_class_value;
   let div1_class_value;
   let current;
@@ -10129,8 +10191,7 @@ function create_fragment58(ctx) {
       input = element("input");
       t1 = space();
       svg = svg_element("svg");
-      path0 = svg_element("path");
-      path1 = svg_element("path");
+      path = svg_element("path");
       if_block.c();
       attr(div0, "class", div0_class_value = name6 + "-contents " + ctx[1]);
       set_style(
@@ -10140,16 +10201,14 @@ function create_fragment58(ctx) {
         false
       );
       attr(input, "type", "checkbox");
-      attr(path0, "fill", "#fff");
-      attr(path0, "stroke", "none");
-      attr(path0, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr(path0, "class", name6 + "-handler-bg-color");
-      attr(path1, "stroke", "#000");
-      attr(path1, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr(path1, "class", name6 + "-handler-border-color");
+      attr(path, "d", "M0 41H12C14.2091 41 16 39.2091 16 37V5C16 2.79086 14.2091 1 12 1H0");
+      attr(path, "stroke", "#000");
+      attr(path, "fill", "#fff");
+      attr(path, "class", name6 + "-handler-border-color " + name6 + "-handler-bg-color");
+      attr(svg, "width", "17");
+      attr(svg, "height", "42");
+      attr(svg, "viewBox", "0 0 17 42");
       attr(svg, "fill", "none");
-      attr(svg, "stroke-width", "2");
-      attr(svg, "viewBox", "0 0 32 120");
       attr(label, "class", label_class_value = name6 + "-handler " + ctx[1]);
       attr(div1, "class", div1_class_value = name6 + " " + ctx[1]);
       toggle_class(div1, "collapsed", ctx[3]);
@@ -10164,8 +10223,7 @@ function create_fragment58(ctx) {
       input.checked = ctx[3];
       append(label, t1);
       append(label, svg);
-      append(svg, path0);
-      append(svg, path1);
+      append(svg, path);
       if_block.m(svg, null);
       current = true;
       if (!mounted) {
@@ -12017,5 +12075,5 @@ function createReplayUI(player, div) {
   return ui;
 }
 
-export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, apps, createReplayUI, createUI };
+export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, createReplayUI, createUI, stockedApps };
 //# sourceMappingURL=index.mjs.map