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

package/dist/index.svelte.mjs

@@ -1,4 +1,4 @@
-import { is_client, SvelteComponent, init, safe_not_equal, not_equal, element, create_component, space, attr, insert, mount_component, append, transition_in, transition_out, detach, destroy_component, svg_element, set_style, toggle_class, listen, action_destroyer, run_all, component_subscribe, group_outros, check_outros, update_keyed_each, outro_and_destroy_block, noop, subscribe, empty, text, set_data, binding_callbacks, assign, get_spread_update, get_spread_object, is_function, destroy_each, bubble, src_url_equal, set_store_value, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, set_input_value, to_number, destroy_block } from 'svelte/internal';
+import { is_client, SvelteComponent, init, safe_not_equal, not_equal, element, create_component, space, attr, insert, mount_component, append, transition_in, transition_out, detach, destroy_component, svg_element, set_style, toggle_class, listen, action_destroyer, run_all, component_subscribe, group_outros, check_outros, update_keyed_each, outro_and_destroy_block, noop, subscribe, empty, text, set_data, binding_callbacks, assign, get_spread_update, get_spread_object, is_function, destroy_each, bubble, src_url_equal, set_store_value, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, set_input_value, to_number, destroy_block, construct_svelte_component } from 'svelte/internal';
 import Tippy from 'tippy.js';
 import { writable } from 'svelte/store';
 import { onMount, createEventDispatcher } from 'svelte';
@@ -2990,15 +2990,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);
@@ -3007,19 +3008,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
           );
         }
@@ -3027,8 +3028,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 (!current || dirty & 15) {
+        toggle_class(button, "is-active", ctx2[3]);
       }
     },
     i(local) {
@@ -3059,7 +3063,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;
   }
@@ -3121,15 +3125,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);
@@ -3139,10 +3144,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]
           }))
         ];
@@ -3151,13 +3156,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
           );
         }
@@ -3165,15 +3170,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 (!current || dirty & 15) {
+        toggle_class(button, "is-active", ctx2[3]);
+      }
     },
     i(local) {
       if (current)
@@ -3208,8 +3216,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");
@@ -3219,7 +3227,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]);
     },
@@ -3234,18 +3243,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]
           }))
         ];
@@ -3254,13 +3263,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
           );
         }
@@ -3268,28 +3277,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 (!current || 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]
         });
     },
@@ -3321,7 +3333,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;
   }
@@ -3381,6 +3393,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;
@@ -3402,23 +3415,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,
@@ -3438,11 +3454,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
     });
   }
 };
@@ -4870,7 +4887,7 @@ function instance50($$self, $$props, $$invalidate) {
       $$invalidate(4, type = disabled ? "disable" : "normal");
     }
     if ($$self.$$.dirty & 16384) {
-      $$subscribe_camera($$invalidate(8, camera = app?.baseCamera));
+      $$subscribe_camera($$invalidate(8, camera = app?.camera));
     }
     if ($$self.$$.dirty & 8) {
       $$invalidate(16, scale = $camera?.scale ?? 1);
@@ -5388,7 +5405,7 @@ function create_each_block(key_1, ctx) {
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(span, "background-color", ctx[7], false);
+      set_style(span, "background-color", ctx[7]);
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
       attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
@@ -5635,7 +5652,7 @@ function create_each_block2(key_1, ctx) {
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(span, "background-color", ctx[7], false);
+      set_style(span, "background-color", ctx[7]);
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
       attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
@@ -5780,7 +5797,7 @@ function create_else_block5(ctx) {
     return { props: { theme: ctx2[0] } };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -5789,9 +5806,8 @@ function create_else_block5(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -5809,7 +5825,7 @@ function create_else_block5(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -5851,7 +5867,7 @@ function create_if_block5(ctx) {
     };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -5860,9 +5876,8 @@ function create_if_block5(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -5880,7 +5895,7 @@ function create_if_block5(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -5989,7 +6004,7 @@ function create_each_block3(key_1, ctx) {
           content: tooltip(ctx[6][ctx[12]], ctx[2][ctx[12]]),
           placement: "top"
         });
-      if (dirty & 25) {
+      if (!current || dirty & 25) {
         toggle_class(button, "is-active", ctx[13]);
       }
     },
@@ -6820,7 +6835,7 @@ function create_else_block_6(ctx) {
     return { props: { theme: ctx2[1] } };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -6829,9 +6844,8 @@ function create_else_block_6(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -6849,7 +6863,7 @@ function create_else_block_6(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -6891,7 +6905,7 @@ function create_if_block_12(ctx) {
     };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -6900,9 +6914,8 @@ function create_if_block_12(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -6920,7 +6933,7 @@ function create_if_block_12(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -7019,6 +7032,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]]
@@ -7043,8 +7059,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]]
@@ -7076,6 +7095,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] }
@@ -7098,8 +7120,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] }
@@ -7127,7 +7152,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 }
@@ -7146,8 +7178,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 }
       ]) : {};
@@ -7180,7 +7215,7 @@ function create_else_block_5(ctx) {
     return { props: { theme: ctx2[1] } };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -7189,9 +7224,8 @@ function create_else_block_5(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -7209,7 +7243,7 @@ function create_else_block_5(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -7251,7 +7285,7 @@ function create_if_block_11(ctx) {
     };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -7260,9 +7294,8 @@ function create_if_block_11(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -7280,7 +7313,7 @@ function create_if_block_11(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -7890,6 +7923,9 @@ function create_if_block6(ctx) {
   let current;
   const button0_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === "pencilEraser"
+    },
     ctx[18],
     { placement: "top" },
     {
@@ -7907,6 +7943,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 }
@@ -7945,10 +7984,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
         }
@@ -7957,10 +7999,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) {
@@ -8486,6 +8531,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 }
   ];
@@ -8500,6 +8548,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 }
   ];
@@ -8514,6 +8565,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] }
@@ -8529,6 +8583,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] }
@@ -8544,6 +8599,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] }
@@ -8800,8 +8858,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 }
       ]) : {};
@@ -8809,8 +8870,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 }
       ]) : {};
@@ -8818,8 +8882,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] }
@@ -8828,8 +8895,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] }
@@ -8838,8 +8906,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] }
@@ -8898,7 +8969,7 @@ function create_fragment57(ctx) {
       }
       if (scrollHeight_action && is_function(scrollHeight_action.update) && dirty[0] & 16)
         scrollHeight_action.update.call(null, ctx2[4]);
-      if (dirty[0] & 32) {
+      if (!current || dirty[0] & 32) {
         toggle_class(div0, "scrollable", ctx2[5]);
       }
       if (ctx2[5]) {
@@ -9364,58 +9435,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);
     }
   };
 }
@@ -9429,8 +9486,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;
@@ -9466,27 +9522,19 @@ 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(
-        div0,
-        "height",
-        ctx[6] ? ctx[7] + "px" : "auto",
-        false
-      );
+      set_style(div0, "height", ctx[6] ? ctx[7] + "px" : "auto");
       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]);
@@ -9501,8 +9549,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) {
@@ -9536,12 +9583,7 @@ function create_fragment58(ctx) {
         attr(div0, "class", div0_class_value);
       }
       if (dirty & 192) {
-        set_style(
-          div0,
-          "height",
-          ctx2[6] ? ctx2[7] + "px" : "auto",
-          false
-        );
+        set_style(div0, "height", ctx2[6] ? ctx2[7] + "px" : "auto");
       }
       if (dirty & 8) {
         input.checked = ctx2[3];
@@ -9562,7 +9604,7 @@ function create_fragment58(ctx) {
       if (!current || dirty & 2 && div1_class_value !== (div1_class_value = name6 + " " + ctx2[1])) {
         attr(div1, "class", div1_class_value);
       }
-      if (dirty & 10) {
+      if (!current || dirty & 10) {
         toggle_class(div1, "collapsed", ctx2[3]);
       }
     },
@@ -10668,7 +10710,7 @@ function create_fragment60(ctx) {
         });
         check_outros();
       }
-      if (dirty & 1) {
+      if (!current || dirty & 1) {
         toggle_class(div2, "loading", !ctx2[0]);
       }
     },
@@ -11052,7 +11094,7 @@ function create_fragment61(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div1, "hidden", !(ctx2[5] === "visible" || ctx2[5] === "toolbar-only"));
       }
       if (ctx2[3].redo_undo?.enable !== false) {
@@ -11093,7 +11135,7 @@ function create_fragment61(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div2, "hidden", ctx2[5] !== "visible");
       }
       if (ctx2[3].page_control?.enable !== false) {
@@ -11115,10 +11157,10 @@ function create_fragment61(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div3, "hidden", ctx2[5] !== "visible");
       }
-      if (dirty & 1) {
+      if (!current || dirty & 1) {
         toggle_class(div4, "loading", !ctx2[0]);
       }
     },
@@ -11349,4 +11391,3 @@ function createReplayUI(player, div) {
 }
 
 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.svelte.mjs.map