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

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import Tippy from 'tippy.js';
 
-// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
+// ../../node_modules/.pnpm/svelte@3.53.0/node_modules/svelte/internal/index.mjs
 function noop() {
 }
 function assign(tar, src) {
@@ -106,7 +106,9 @@ function insert(target, node, anchor) {
   target.insertBefore(node, anchor || null);
 }
 function detach(node) {
-  node.parentNode.removeChild(node);
+  if (node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
 }
 function destroy_each(iterations, detaching) {
   for (let i = 0; i < iterations.length; i += 1) {
@@ -168,6 +170,9 @@ function custom_event(type, detail, { bubbles = false, cancelable = false } = {}
   e.initCustomEvent(type, bubbles, cancelable, detail);
   return e;
 }
+function construct_svelte_component(component, props) {
+  return new component(props);
+}
 var current_component;
 function set_current_component(component) {
   current_component = component;
@@ -411,13 +416,13 @@ function create_component(block) {
   block && block.c();
 }
 function mount_component(component, target, anchor, customElement) {
-  const { fragment, on_mount, on_destroy, after_update } = component.$$;
+  const { fragment, after_update } = component.$$;
   fragment && fragment.m(target, anchor);
   if (!customElement) {
     add_render_callback(() => {
-      const new_on_destroy = on_mount.map(run).filter(is_function);
-      if (on_destroy) {
-        on_destroy.push(...new_on_destroy);
+      const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+      if (component.$$.on_destroy) {
+        component.$$.on_destroy.push(...new_on_destroy);
       } else {
         run_all(new_on_destroy);
       }
@@ -448,7 +453,7 @@ function init(component, options, instance62, create_fragment62, not_equal2, pro
   set_current_component(component);
   const $$ = component.$$ = {
     fragment: null,
-    ctx: null,
+    ctx: [],
     props,
     update: noop,
     not_equal: not_equal2,
@@ -501,6 +506,9 @@ var SvelteComponent = class {
     this.$destroy = noop;
   }
   $on(type, callback) {
+    if (!is_function(callback)) {
+      return noop;
+    }
     const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
     callbacks.push(callback);
     return () => {
@@ -3595,15 +3603,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 +3621,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 +3641,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) {
@@ -3664,7 +3676,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 +3738,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 +3757,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 +3769,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 +3783,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)
@@ -3813,8 +3829,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 +3840,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 +3856,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 +3876,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 +3890,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]
         });
     },
@@ -3926,7 +3946,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 +4006,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 +4028,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 +4067,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
     });
   }
 };
@@ -5477,7 +5502,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);
@@ -5526,7 +5551,7 @@ var ZoomControl = class extends SvelteComponent {
 };
 var ZoomControl_default = ZoomControl;
 
-// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/store/index.mjs
+// ../../node_modules/.pnpm/svelte@3.53.0/node_modules/svelte/store/index.mjs
 var subscriber_queue = [];
 function writable(value, start = noop) {
   let stop;
@@ -6045,7 +6070,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];
@@ -6296,7 +6321,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];
@@ -6443,7 +6468,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() {
@@ -6452,9 +6477,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;
     },
@@ -6472,7 +6496,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);
@@ -6514,7 +6538,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() {
@@ -6523,9 +6547,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;
     },
@@ -6543,7 +6566,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);
@@ -6652,7 +6675,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]);
       }
     },
@@ -7483,7 +7506,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() {
@@ -7492,9 +7515,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;
     },
@@ -7512,7 +7534,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);
@@ -7554,7 +7576,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() {
@@ -7563,9 +7585,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;
     },
@@ -7583,7 +7604,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);
@@ -7682,6 +7703,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 +7730,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 +7766,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 +7791,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 +7823,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 +7849,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 }
       ]) : {};
@@ -7843,7 +7886,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() {
@@ -7852,9 +7895,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;
     },
@@ -7872,7 +7914,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);
@@ -7914,7 +7956,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() {
@@ -7923,9 +7965,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;
     },
@@ -7943,7 +7984,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);
@@ -8553,6 +8594,9 @@ function create_if_block6(ctx) {
   let current;
   const button0_spread_levels = [
     { class: "eraser" },
+    {
+      active: ctx[8] === "pencilEraser"
+    },
     ctx[18],
     { placement: "top" },
     {
@@ -8570,6 +8614,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 +8655,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 +8670,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 +9202,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 +9219,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 +9236,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 +9254,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 +9270,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 +9529,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 +9541,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 +9553,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 +9566,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 +9577,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] }
@@ -9561,7 +9640,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]) {
@@ -10027,58 +10106,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 +10157,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,27 +10193,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]);
@@ -10164,8 +10220,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) {
@@ -10199,12 +10254,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];
@@ -10225,7 +10275,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]);
       }
     },
@@ -11335,7 +11385,7 @@ function create_fragment60(ctx) {
         });
         check_outros();
       }
-      if (dirty & 1) {
+      if (!current || dirty & 1) {
         toggle_class(div2, "loading", !ctx2[0]);
       }
     },
@@ -11721,7 +11771,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) {
@@ -11762,7 +11812,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) {
@@ -11784,10 +11834,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]);
       }
     },
@@ -12018,4 +12068,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.mjs.map