@netless/fastboard-ui 0.3.2-canary.3 → 0.3.2-canary.6

package/dist/index.svelte.mjs

@@ -3512,12 +3512,12 @@ if (is_client) {
       {
         name: "className",
         defaultValue: "",
-        fn(instance59) {
+        fn(instance60) {
           function add() {
-            const el = instance59.popper.firstElementChild;
+            const el = instance60.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance59.props.className || "").trim();
+              const extra = (instance60.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
@@ -3525,7 +3525,7 @@ if (is_client) {
           }
           function remove() {
             var _a;
-            (_a = instance59.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            (_a = instance60.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -3538,21 +3538,21 @@ if (is_client) {
   });
 }
 var tippy = function(node, props) {
-  const instance59 = Tippy(node, props);
+  const instance60 = Tippy(node, props);
   return {
     update(props2) {
-      instance59.setProps(props2);
+      instance60.setProps(props2);
     },
     destroy() {
-      instance59.destroy();
+      instance60.destroy();
     }
   };
 };
 function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance59 = el._tippy;
-    if (instance59)
-      instance59.hide();
+    const instance60 = el._tippy;
+    if (instance60)
+      instance60.hide();
   });
 }
 var tippy_menu = {
@@ -5561,27 +5561,27 @@ var ZoomControl_default = ZoomControl;
 
 // src/components/Toolbar/Toolbar.svelte
 import {
-  SvelteComponent as SvelteComponent55,
+  SvelteComponent as SvelteComponent56,
   action_destroyer as action_destroyer4,
-  append as append54,
-  attr as attr55,
+  append as append55,
+  attr as attr56,
   component_subscribe as component_subscribe2,
   create_component as create_component7,
   destroy_component as destroy_component7,
-  detach as detach54,
-  element as element11,
-  init as init55,
-  insert as insert54,
-  listen as listen6,
+  detach as detach55,
+  element as element12,
+  init as init56,
+  insert as insert55,
+  listen as listen7,
   mount_component as mount_component7,
-  noop as noop54,
+  noop as noop55,
   run_all as run_all4,
-  safe_not_equal as safe_not_equal55,
-  set_style as set_style4,
-  space as space8,
-  subscribe as subscribe8,
+  safe_not_equal as safe_not_equal56,
+  set_style as set_style5,
+  space as space9,
+  subscribe as subscribe9,
   svg_element as svg_element45,
-  toggle_class as toggle_class49,
+  toggle_class as toggle_class50,
   transition_in as transition_in9,
   transition_out as transition_out9
 } from "svelte/internal";
@@ -5621,39 +5621,39 @@ var scrollHeight = function(node, height2) {
 
 // src/components/Toolbar/components/Contents.svelte
 import {
-  SvelteComponent as SvelteComponent54,
+  SvelteComponent as SvelteComponent55,
   action_destroyer as action_destroyer3,
-  append as append53,
+  append as append54,
   assign as assign2,
-  attr as attr54,
+  attr as attr55,
   binding_callbacks,
   check_outros as check_outros4,
   component_subscribe,
   create_component as create_component6,
   destroy_component as destroy_component6,
   destroy_each,
-  detach as detach53,
-  element as element10,
+  detach as detach54,
+  element as element11,
   empty as empty4,
   get_spread_object as get_spread_object2,
   get_spread_update as get_spread_update2,
   group_outros as group_outros4,
-  init as init54,
-  insert as insert53,
+  init as init55,
+  insert as insert54,
   is_function as is_function3,
-  listen as listen5,
+  listen as listen6,
   mount_component as mount_component6,
-  noop as noop53,
+  noop as noop54,
   run_all as run_all3,
-  safe_not_equal as safe_not_equal54,
+  safe_not_equal as safe_not_equal55,
   set_data as set_data3,
   set_store_value,
-  set_style as set_style3,
-  space as space7,
+  set_style as set_style4,
+  space as space8,
   src_url_equal as src_url_equal2,
-  subscribe as subscribe7,
+  subscribe as subscribe8,
   text as text_1,
-  toggle_class as toggle_class48,
+  toggle_class as toggle_class49,
   transition_in as transition_in8,
   transition_out as transition_out8
 } from "svelte/internal";
@@ -5792,6 +5792,10 @@ var AppsInToolbar = class {
     this._data = this._data.filter((item) => !filter(item));
     this._listeners.forEach((fn) => fn(this._data));
   }
+  clear() {
+    this._data.length = 0;
+    this._listeners.forEach((fn) => fn(this._data));
+  }
 };
 var apps = new AppsInToolbar([
   {
@@ -6317,35 +6321,205 @@ var StrokeColor = class extends SvelteComponent52 {
 };
 var StrokeColor_default = StrokeColor;
 
-// src/components/Toolbar/components/Shapes.svelte
+// src/components/Toolbar/components/TextColor.svelte
 import {
   SvelteComponent as SvelteComponent53,
-  action_destroyer as action_destroyer2,
   append as append52,
   attr as attr53,
-  check_outros as check_outros3,
-  create_component as create_component5,
-  destroy_component as destroy_component5,
+  destroy_block as destroy_block2,
   detach as detach52,
   element as element9,
-  empty as empty3,
-  group_outros as group_outros3,
   init as init53,
   insert as insert52,
-  is_function as is_function2,
   listen as listen4,
-  mount_component as mount_component5,
   noop as noop52,
-  outro_and_destroy_block,
   safe_not_equal as safe_not_equal53,
+  set_style as set_style3,
   space as space6,
   subscribe as subscribe6,
   toggle_class as toggle_class47,
-  transition_in as transition_in7,
-  transition_out as transition_out7,
   update_keyed_each as update_keyed_each2
 } from "svelte/internal";
 function get_each_context2(ctx, list, i) {
+  const child_ctx = ctx.slice();
+  child_ctx[7] = list[i];
+  return child_ctx;
+}
+function create_each_block2(key_1, ctx) {
+  let button;
+  let span;
+  let t;
+  let button_class_value;
+  let button_data_color_key_value;
+  return {
+    key: key_1,
+    first: null,
+    c() {
+      button = element9("button");
+      span = element9("span");
+      t = space6();
+      attr53(span, "class", "fastboard-toolbar-color-item");
+      set_style3(span, "background-color", ctx[7], false);
+      attr53(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
+      attr53(button, "data-color-key", button_data_color_key_value = ctx[7]);
+      button.disabled = ctx[1];
+      toggle_class47(button, "is-active", is_equal_color2(ctx[2], colors[ctx[7]]));
+      this.first = button;
+    },
+    m(target, anchor) {
+      insert52(target, button, anchor);
+      append52(button, span);
+      append52(button, t);
+    },
+    p(new_ctx, dirty) {
+      ctx = new_ctx;
+      if (dirty & 1 && button_class_value !== (button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0])) {
+        attr53(button, "class", button_class_value);
+      }
+      if (dirty & 2) {
+        button.disabled = ctx[1];
+      }
+      if (dirty & 5) {
+        toggle_class47(button, "is-active", is_equal_color2(ctx[2], colors[ctx[7]]));
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach52(button);
+    }
+  };
+}
+function create_fragment53(ctx) {
+  let div;
+  let each_blocks = [];
+  let each_1_lookup = /* @__PURE__ */ new Map();
+  let div_class_value;
+  let mounted;
+  let dispose;
+  let each_value = colorKeys;
+  const get_key = (ctx2) => ctx2[7];
+  for (let i = 0; i < each_value.length; i += 1) {
+    let child_ctx = get_each_context2(ctx, each_value, i);
+    let key = get_key(child_ctx);
+    each_1_lookup.set(key, each_blocks[i] = create_each_block2(key, child_ctx));
+  }
+  return {
+    c() {
+      div = element9("div");
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+      attr53(div, "class", div_class_value = "fastboard-toolbar-colors " + ctx[0]);
+    },
+    m(target, anchor) {
+      insert52(target, div, anchor);
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(div, null);
+      }
+      if (!mounted) {
+        dispose = listen4(div, "click", ctx[4]);
+        mounted = true;
+      }
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & 7) {
+        each_value = colorKeys;
+        each_blocks = update_keyed_each2(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, destroy_block2, create_each_block2, null, get_each_context2);
+      }
+      if (dirty & 1 && div_class_value !== (div_class_value = "fastboard-toolbar-colors " + ctx2[0])) {
+        attr53(div, "class", div_class_value);
+      }
+    },
+    i: noop52,
+    o: noop52,
+    d(detaching) {
+      if (detaching)
+        detach52(div);
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].d();
+      }
+      mounted = false;
+      dispose();
+    }
+  };
+}
+function is_equal_color2(a, b) {
+  return a && b && a.every((v, i) => v === b[i]);
+}
+function instance53($$self, $$props, $$invalidate) {
+  let memberState;
+  let textColor;
+  let $memberState, $$unsubscribe_memberState = noop52, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe6(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
+  $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
+  let { app = null } = $$props;
+  let { theme = "light" } = $$props;
+  let { disabled = false } = $$props;
+  function set_stroke_color(ev) {
+    let button = ev.target;
+    if (button && button.dataset.colorKey) {
+      let color = colors[button.dataset.colorKey];
+      if (color && app) {
+        app.setTextColor(color);
+      }
+    }
+  }
+  $$self.$$set = ($$props2) => {
+    if ("app" in $$props2)
+      $$invalidate(5, app = $$props2.app);
+    if ("theme" in $$props2)
+      $$invalidate(0, theme = $$props2.theme);
+    if ("disabled" in $$props2)
+      $$invalidate(1, disabled = $$props2.disabled);
+  };
+  $$self.$$.update = () => {
+    if ($$self.$$.dirty & 32) {
+      $:
+        $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
+    }
+    if ($$self.$$.dirty & 64) {
+      $:
+        $$invalidate(2, textColor = $memberState == null ? void 0 : $memberState.textColor);
+    }
+  };
+  return [theme, disabled, textColor, memberState, set_stroke_color, app, $memberState];
+}
+var TextColor = class extends SvelteComponent53 {
+  constructor(options) {
+    super();
+    init53(this, options, instance53, create_fragment53, safe_not_equal53, { app: 5, theme: 0, disabled: 1 });
+  }
+};
+var TextColor_default = TextColor;
+
+// src/components/Toolbar/components/Shapes.svelte
+import {
+  SvelteComponent as SvelteComponent54,
+  action_destroyer as action_destroyer2,
+  append as append53,
+  attr as attr54,
+  check_outros as check_outros3,
+  create_component as create_component5,
+  destroy_component as destroy_component5,
+  detach as detach53,
+  element as element10,
+  empty as empty3,
+  group_outros as group_outros3,
+  init as init54,
+  insert as insert53,
+  is_function as is_function2,
+  listen as listen5,
+  mount_component as mount_component5,
+  noop as noop53,
+  outro_and_destroy_block,
+  safe_not_equal as safe_not_equal54,
+  space as space7,
+  subscribe as subscribe7,
+  toggle_class as toggle_class48,
+  transition_in as transition_in7,
+  transition_out as transition_out7,
+  update_keyed_each as update_keyed_each3
+} from "svelte/internal";
+function get_each_context3(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[12] = list[i];
   const constants_0 = child_ctx[4] === "shape" ? child_ctx[3] === child_ctx[12] : child_ctx[4] === child_ctx[12];
@@ -6373,7 +6547,7 @@ function create_else_block5(ctx) {
       if (switch_instance) {
         mount_component5(switch_instance, target, anchor);
       }
-      insert52(target, switch_instance_anchor, anchor);
+      insert53(target, switch_instance_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -6415,7 +6589,7 @@ function create_else_block5(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach52(switch_instance_anchor);
+        detach53(switch_instance_anchor);
       if (switch_instance)
         destroy_component5(switch_instance, detaching);
     }
@@ -6444,7 +6618,7 @@ function create_if_block5(ctx) {
       if (switch_instance) {
         mount_component5(switch_instance, target, anchor);
       }
-      insert52(target, switch_instance_anchor, anchor);
+      insert53(target, switch_instance_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -6486,13 +6660,13 @@ function create_if_block5(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach52(switch_instance_anchor);
+        detach53(switch_instance_anchor);
       if (switch_instance)
         destroy_component5(switch_instance, detaching);
     }
   };
 }
-function create_each_block2(key_1, ctx) {
+function create_each_block3(key_1, ctx) {
   let button;
   let current_block_type_index;
   let if_block;
@@ -6516,19 +6690,19 @@ function create_each_block2(key_1, ctx) {
     key: key_1,
     first: null,
     c() {
-      button = element9("button");
+      button = element10("button");
       if_block.c();
-      t_1 = space6();
-      attr53(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-shape-btn " + ctx[0] + " " + ctx[12]);
-      attr53(button, "data-shape-key", button_data_shape_key_value = ctx[12]);
+      t_1 = space7();
+      attr54(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-shape-btn " + ctx[0] + " " + ctx[12]);
+      attr54(button, "data-shape-key", button_data_shape_key_value = ctx[12]);
       button.disabled = ctx[1];
-      toggle_class47(button, "is-active", ctx[13]);
+      toggle_class48(button, "is-active", ctx[13]);
       this.first = button;
     },
     m(target, anchor) {
-      insert52(target, button, anchor);
+      insert53(target, button, anchor);
       if_blocks[current_block_type_index].m(button, null);
-      append52(button, t_1);
+      append53(button, t_1);
       current = true;
       if (!mounted) {
         dispose = action_destroyer2(tippy_action = tippy.call(null, button, {
@@ -6561,7 +6735,7 @@ function create_each_block2(key_1, ctx) {
         if_block.m(button, t_1);
       }
       if (!current || dirty & 1 && button_class_value !== (button_class_value = "fastboard-toolbar-btn fastboard-toolbar-shape-btn " + ctx[0] + " " + ctx[12])) {
-        attr53(button, "class", button_class_value);
+        attr54(button, "class", button_class_value);
       }
       if (!current || dirty & 2) {
         button.disabled = ctx[1];
@@ -6572,7 +6746,7 @@ function create_each_block2(key_1, ctx) {
           placement: "top"
         });
       if (dirty & 25) {
-        toggle_class47(button, "is-active", ctx[13]);
+        toggle_class48(button, "is-active", ctx[13]);
       }
     },
     i(local) {
@@ -6587,14 +6761,14 @@ function create_each_block2(key_1, ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach52(button);
+        detach53(button);
       if_blocks[current_block_type_index].d();
       mounted = false;
       dispose();
     }
   };
 }
-function create_fragment53(ctx) {
+function create_fragment54(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6605,26 +6779,26 @@ function create_fragment53(ctx) {
   let each_value = shapes;
   const get_key = (ctx2) => ctx2[12];
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context2(ctx, each_value, i);
+    let child_ctx = get_each_context3(ctx, each_value, i);
     let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block2(key, child_ctx));
+    each_1_lookup.set(key, each_blocks[i] = create_each_block3(key, child_ctx));
   }
   return {
     c() {
-      div = element9("div");
+      div = element10("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
-      attr53(div, "class", div_class_value = "fastboard-toolbar-shapes " + ctx[0]);
+      attr54(div, "class", div_class_value = "fastboard-toolbar-shapes " + ctx[0]);
     },
     m(target, anchor) {
-      insert52(target, div, anchor);
+      insert53(target, div, anchor);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(div, null);
       }
       current = true;
       if (!mounted) {
-        dispose = listen4(div, "click", ctx[7]);
+        dispose = listen5(div, "click", ctx[7]);
         mounted = true;
       }
     },
@@ -6632,11 +6806,11 @@ function create_fragment53(ctx) {
       if (dirty & 95) {
         each_value = shapes;
         group_outros3();
-        each_blocks = update_keyed_each2(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block2, null, get_each_context2);
+        each_blocks = update_keyed_each3(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, outro_and_destroy_block, create_each_block3, null, get_each_context3);
         check_outros3();
       }
       if (!current || dirty & 1 && div_class_value !== (div_class_value = "fastboard-toolbar-shapes " + ctx2[0])) {
-        attr53(div, "class", div_class_value);
+        attr54(div, "class", div_class_value);
       }
     },
     i(local) {
@@ -6655,7 +6829,7 @@ function create_fragment53(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach52(div);
+        detach53(div);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].d();
       }
@@ -6686,13 +6860,13 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance53($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
   let shape;
   let hotkeys;
-  let $memberState, $$unsubscribe_memberState = noop52, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe6(memberState, ($$value) => $$invalidate(11, $memberState = $$value)), memberState);
+  let $memberState, $$unsubscribe_memberState = noop53, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe7(memberState, ($$value) => $$invalidate(11, $memberState = $$value)), memberState);
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
@@ -6768,10 +6942,10 @@ function instance53($$self, $$props, $$invalidate) {
     $memberState
   ];
 }
-var Shapes = class extends SvelteComponent53 {
+var Shapes = class extends SvelteComponent54 {
   constructor(options) {
     super();
-    init53(this, options, instance53, create_fragment53, safe_not_equal53, {
+    init54(this, options, instance54, create_fragment54, safe_not_equal54, {
       app: 8,
       theme: 0,
       language: 9,
@@ -6782,22 +6956,22 @@ var Shapes = class extends SvelteComponent53 {
 var Shapes_default = Shapes;
 
 // src/components/Toolbar/components/Contents.svelte
-function get_each_context3(ctx, list, i) {
+function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[40] = list[i];
-  const constants_0 = child_ctx[40];
-  child_ctx[41] = constants_0.icon;
-  child_ctx[42] = constants_0.label;
-  child_ctx[43] = constants_0.kind;
-  child_ctx[44] = constants_0.onClick;
-  const constants_1 = child_ctx[19] && child_ctx[19][child_ctx[43]];
-  child_ctx[45] = constants_1;
+  child_ctx[41] = list[i];
+  const constants_0 = child_ctx[41];
+  child_ctx[42] = constants_0.icon;
+  child_ctx[43] = constants_0.label;
+  child_ctx[44] = constants_0.kind;
+  child_ctx[45] = constants_0.onClick;
+  const constants_1 = child_ctx[20] && child_ctx[20][child_ctx[44]];
+  child_ctx[46] = constants_1;
   return child_ctx;
 }
-function create_if_block_7(ctx) {
+function create_if_block_8(ctx) {
   let button;
   let current;
-  const button_spread_levels = [{ class: "scroll-up" }, ctx[14]];
+  const button_spread_levels = [{ class: "scroll-up" }, ctx[15]];
   let button_props = {
     $$slots: { default: [create_default_slot_9] },
     $$scope: { ctx }
@@ -6806,7 +6980,7 @@ function create_if_block_7(ctx) {
     button_props = assign2(button_props, button_spread_levels[i]);
   }
   button = new Button_default({ props: button_props });
-  button.$on("click", ctx[21]);
+  button.$on("click", ctx[22]);
   return {
     c() {
       create_component6(button.$$.fragment);
@@ -6816,8 +6990,8 @@ function create_if_block_7(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 16384 ? get_spread_update2(button_spread_levels, [button_spread_levels[0], get_spread_object2(ctx2[14])]) : {};
-      if (dirty[0] & 2 | dirty[1] & 131072) {
+      const button_changes = dirty[0] & 32768 ? get_spread_update2(button_spread_levels, [button_spread_levels[0], get_spread_object2(ctx2[15])]) : {};
+      if (dirty[0] & 2 | dirty[1] & 262144) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -6903,7 +7077,7 @@ function create_else_block_5(ctx) {
     }
   };
 }
-function create_if_block_6(ctx) {
+function create_if_block_7(ctx) {
   let icons_clickfilled;
   let current;
   icons_clickfilled = new Icons_default.ClickFilled({
@@ -6943,10 +7117,10 @@ function create_default_slot_8(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_6, create_else_block_5];
+  const if_block_creators = [create_if_block_7, create_else_block_5];
   const if_blocks = [];
   function select_block_type(ctx2, dirty) {
-    if (ctx2[7] === "clicker")
+    if (ctx2[8] === "clicker")
       return 0;
     return 1;
   }
@@ -6959,7 +7133,7 @@ function create_default_slot_8(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -6997,7 +7171,7 @@ function create_default_slot_8(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7034,7 +7208,7 @@ function create_else_block_4(ctx) {
     }
   };
 }
-function create_if_block_5(ctx) {
+function create_if_block_6(ctx) {
   let icons_selectorfilled;
   let current;
   icons_selectorfilled = new Icons_default.SelectorFilled({
@@ -7074,10 +7248,10 @@ function create_default_slot_7(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_5, create_else_block_4];
+  const if_block_creators = [create_if_block_6, create_else_block_4];
   const if_blocks = [];
   function select_block_type_1(ctx2, dirty) {
-    if (ctx2[7] === "selector")
+    if (ctx2[8] === "selector")
       return 0;
     return 1;
   }
@@ -7090,7 +7264,7 @@ function create_default_slot_7(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -7128,7 +7302,7 @@ function create_default_slot_7(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7165,7 +7339,7 @@ function create_else_block_3(ctx) {
     }
   };
 }
-function create_if_block_4(ctx) {
+function create_if_block_5(ctx) {
   let icons_pencilfilled;
   let current;
   icons_pencilfilled = new Icons_default.PencilFilled({
@@ -7205,10 +7379,10 @@ function create_default_slot_6(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_4, create_else_block_3];
+  const if_block_creators = [create_if_block_5, create_else_block_3];
   const if_blocks = [];
   function select_block_type_2(ctx2, dirty) {
-    if (ctx2[7] === "pencil")
+    if (ctx2[8] === "pencil")
       return 0;
     return 1;
   }
@@ -7221,7 +7395,7 @@ function create_default_slot_6(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -7259,7 +7433,7 @@ function create_default_slot_6(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7296,7 +7470,7 @@ function create_else_block_2(ctx) {
     }
   };
 }
-function create_if_block_3(ctx) {
+function create_if_block_4(ctx) {
   let icons_textfilled;
   let current;
   icons_textfilled = new Icons_default.TextFilled({
@@ -7336,10 +7510,10 @@ function create_default_slot_53(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_3, create_else_block_2];
+  const if_block_creators = [create_if_block_4, create_else_block_2];
   const if_blocks = [];
   function select_block_type_3(ctx2, dirty) {
-    if (ctx2[7] === "text")
+    if (ctx2[8] === "text")
       return 0;
     return 1;
   }
@@ -7352,7 +7526,7 @@ function create_default_slot_53(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -7390,7 +7564,7 @@ function create_default_slot_53(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7398,7 +7572,7 @@ function create_else_block_12(ctx) {
   let switch_instance;
   let switch_instance_anchor;
   let current;
-  var switch_value = shapesIcon[ctx[9]];
+  var switch_value = shapesIcon[ctx[10]];
   function switch_props(ctx2) {
     return { props: { theme: ctx2[1] } };
   }
@@ -7415,14 +7589,14 @@ function create_else_block_12(ctx) {
       if (switch_instance) {
         mount_component6(switch_instance, target, anchor);
       }
-      insert53(target, switch_instance_anchor, anchor);
+      insert54(target, switch_instance_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
       const switch_instance_changes = {};
       if (dirty[0] & 2)
         switch_instance_changes.theme = ctx2[1];
-      if (switch_value !== (switch_value = shapesIcon[ctx2[9]])) {
+      if (switch_value !== (switch_value = shapesIcon[ctx2[10]])) {
         if (switch_instance) {
           group_outros4();
           const old_component = switch_instance;
@@ -7457,17 +7631,17 @@ function create_else_block_12(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach53(switch_instance_anchor);
+        detach54(switch_instance_anchor);
       if (switch_instance)
         destroy_component6(switch_instance, detaching);
     }
   };
 }
-function create_if_block_2(ctx) {
+function create_if_block_3(ctx) {
   let switch_instance;
   let switch_instance_anchor;
   let current;
-  var switch_value = shapesIconActive[ctx[9]];
+  var switch_value = shapesIconActive[ctx[10]];
   function switch_props(ctx2) {
     return {
       props: { theme: ctx2[1], active: true }
@@ -7486,14 +7660,14 @@ function create_if_block_2(ctx) {
       if (switch_instance) {
         mount_component6(switch_instance, target, anchor);
       }
-      insert53(target, switch_instance_anchor, anchor);
+      insert54(target, switch_instance_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
       const switch_instance_changes = {};
       if (dirty[0] & 2)
         switch_instance_changes.theme = ctx2[1];
-      if (switch_value !== (switch_value = shapesIconActive[ctx2[9]])) {
+      if (switch_value !== (switch_value = shapesIconActive[ctx2[10]])) {
         if (switch_instance) {
           group_outros4();
           const old_component = switch_instance;
@@ -7528,7 +7702,7 @@ function create_if_block_2(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach53(switch_instance_anchor);
+        detach54(switch_instance_anchor);
       if (switch_instance)
         destroy_component6(switch_instance, detaching);
     }
@@ -7539,10 +7713,10 @@ function create_default_slot_43(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_2, create_else_block_12];
+  const if_block_creators = [create_if_block_3, create_else_block_12];
   const if_blocks = [];
   function select_block_type_4(ctx2, dirty) {
-    if (ctx2[7] === ctx2[9] || ctx2[7] === "shape" && ctx2[6] === ctx2[9])
+    if (ctx2[8] === ctx2[10] || ctx2[8] === "shape" && ctx2[7] === ctx2[10])
       return 0;
     return 1;
   }
@@ -7555,7 +7729,7 @@ function create_default_slot_43(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -7593,7 +7767,7 @@ function create_default_slot_43(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7630,7 +7804,7 @@ function create_else_block6(ctx) {
     }
   };
 }
-function create_if_block_12(ctx) {
+function create_if_block_2(ctx) {
   let icons_eraserfilled;
   let current;
   icons_eraserfilled = new Icons_default.EraserFilled({
@@ -7670,10 +7844,10 @@ function create_default_slot_34(ctx) {
   let if_block;
   let if_block_anchor;
   let current;
-  const if_block_creators = [create_if_block_12, create_else_block6];
+  const if_block_creators = [create_if_block_2, create_else_block6];
   const if_blocks = [];
   function select_block_type_5(ctx2, dirty) {
-    if (ctx2[7] === "eraser")
+    if (ctx2[8] === "eraser")
       return 0;
     return 1;
   }
@@ -7686,7 +7860,7 @@ function create_default_slot_34(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert53(target, if_block_anchor, anchor);
+      insert54(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -7724,7 +7898,7 @@ function create_default_slot_34(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach53(if_block_anchor);
+        detach54(if_block_anchor);
     }
   };
 }
@@ -7734,30 +7908,84 @@ function create_default_slot_24(ctx) {
   icons_clear = new Icons_default.Clear({ props: { theme: ctx[1] } });
   return {
     c() {
-      create_component6(icons_clear.$$.fragment);
+      create_component6(icons_clear.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component6(icons_clear, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const icons_clear_changes = {};
+      if (dirty[0] & 2)
+        icons_clear_changes.theme = ctx2[1];
+      icons_clear.$set(icons_clear_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in8(icons_clear.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out8(icons_clear.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component6(icons_clear, detaching);
+    }
+  };
+}
+function create_if_block_12(ctx) {
+  let button;
+  let current;
+  const button_spread_levels = [
+    { class: "apps" },
+    ctx[15],
+    { content: ctx[9].apps },
+    { menu: ctx[14] },
+    { menu_placement: "right-end" }
+  ];
+  let button_props = {
+    $$slots: { default: [create_default_slot_14] },
+    $$scope: { ctx }
+  };
+  for (let i = 0; i < button_spread_levels.length; i += 1) {
+    button_props = assign2(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  return {
+    c() {
+      create_component6(button.$$.fragment);
     },
     m(target, anchor) {
-      mount_component6(icons_clear, target, anchor);
+      mount_component6(button, target, anchor);
       current = true;
     },
     p(ctx2, dirty) {
-      const icons_clear_changes = {};
-      if (dirty[0] & 2)
-        icons_clear_changes.theme = ctx2[1];
-      icons_clear.$set(icons_clear_changes);
+      const button_changes = dirty[0] & 49664 ? get_spread_update2(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 512 && { content: ctx2[9].apps },
+        dirty[0] & 16384 && { menu: ctx2[14] },
+        button_spread_levels[4]
+      ]) : {};
+      if (dirty[0] & 2 | dirty[1] & 262144) {
+        button_changes.$$scope = { dirty, ctx: ctx2 };
+      }
+      button.$set(button_changes);
     },
     i(local) {
       if (current)
         return;
-      transition_in8(icons_clear.$$.fragment, local);
+      transition_in8(button.$$.fragment, local);
       current = true;
     },
     o(local) {
-      transition_out8(icons_clear.$$.fragment, local);
+      transition_out8(button.$$.fragment, local);
       current = false;
     },
     d(detaching) {
-      destroy_component6(icons_clear, detaching);
+      destroy_component6(button, detaching);
     }
   };
 }
@@ -7807,7 +8035,7 @@ function create_if_block6(ctx) {
       $$scope: { ctx }
     }
   });
-  button.$on("click", ctx[22]);
+  button.$on("click", ctx[23]);
   return {
     c() {
       create_component6(button.$$.fragment);
@@ -7822,7 +8050,7 @@ function create_if_block6(ctx) {
         button_changes.theme = ctx2[1];
       if (dirty[0] & 8)
         button_changes.disabled = ctx2[3];
-      if (dirty[0] & 2 | dirty[1] & 131072) {
+      if (dirty[0] & 2 | dirty[1] & 262144) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7875,7 +8103,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_each_block3(ctx) {
+function create_each_block4(ctx) {
   let button;
   let img;
   let img_class_value;
@@ -7884,7 +8112,7 @@ function create_each_block3(ctx) {
   let img_title_value;
   let t0;
   let span;
-  let t1_value = ctx[42] + "";
+  let t1_value = ctx[43] + "";
   let t1;
   let span_class_value;
   let t2;
@@ -7896,36 +8124,36 @@ function create_each_block3(ctx) {
   let dispose;
   return {
     c() {
-      button = element10("button");
-      img = element10("img");
-      t0 = space7();
-      span = element10("span");
+      button = element11("button");
+      img = element11("img");
+      t0 = space8();
+      span = element11("span");
       t1 = text_1(t1_value);
-      t2 = space7();
-      attr54(img, "class", img_class_value = name5 + "-app-btn-icon " + ctx[1]);
-      if (!src_url_equal2(img.src, img_src_value = ctx[41]))
-        attr54(img, "src", img_src_value);
-      attr54(img, "alt", img_alt_value = ctx[43]);
-      attr54(img, "title", img_title_value = ctx[42]);
-      attr54(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
-      attr54(button, "class", button_class_value = name5 + "-app-btn " + ctx[43] + " " + ctx[1]);
-      attr54(button, "title", button_title_value = ctx[42] + (ctx[45] && ctx[45].reason ? ": " + ctx[45].reason : ""));
-      attr54(button, "data-app-kind", button_data_app_kind_value = ctx[40].kind);
-      button.disabled = button_disabled_value = ctx[45] && ctx[45].status !== "idle";
-      toggle_class48(button, "is-loading", ctx[45] && ctx[45].status === "loading");
-      toggle_class48(button, "is-failed", ctx[45] && ctx[45].status === "failed");
-    },
-    m(target, anchor) {
-      insert53(target, button, anchor);
-      append53(button, img);
-      append53(button, t0);
-      append53(button, span);
-      append53(span, t1);
-      append53(button, t2);
+      t2 = space8();
+      attr55(img, "class", img_class_value = name5 + "-app-btn-icon " + ctx[1]);
+      if (!src_url_equal2(img.src, img_src_value = ctx[42]))
+        attr55(img, "src", img_src_value);
+      attr55(img, "alt", img_alt_value = ctx[44]);
+      attr55(img, "title", img_title_value = ctx[43]);
+      attr55(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
+      attr55(button, "class", button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1]);
+      attr55(button, "title", button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""));
+      attr55(button, "data-app-kind", button_data_app_kind_value = ctx[41].kind);
+      button.disabled = button_disabled_value = ctx[46] && ctx[46].status !== "idle";
+      toggle_class49(button, "is-loading", ctx[46] && ctx[46].status === "loading");
+      toggle_class49(button, "is-failed", ctx[46] && ctx[46].status === "failed");
+    },
+    m(target, anchor) {
+      insert54(target, button, anchor);
+      append54(button, img);
+      append54(button, t0);
+      append54(button, span);
+      append54(span, t1);
+      append54(button, t2);
       if (!mounted) {
-        dispose = listen5(button, "click", function() {
-          if (is_function3(ctx[0] && ctx[44].bind(null, ctx[0])))
-            (ctx[0] && ctx[44].bind(null, ctx[0])).apply(this, arguments);
+        dispose = listen6(button, "click", function() {
+          if (is_function3(ctx[0] && ctx[45].bind(null, ctx[0])))
+            (ctx[0] && ctx[45].bind(null, ctx[0])).apply(this, arguments);
         });
         mounted = true;
       }
@@ -7933,50 +8161,50 @@ function create_each_block3(ctx) {
     p(new_ctx, dirty) {
       ctx = new_ctx;
       if (dirty[0] & 2 && img_class_value !== (img_class_value = name5 + "-app-btn-icon " + ctx[1])) {
-        attr54(img, "class", img_class_value);
+        attr55(img, "class", img_class_value);
       }
-      if (dirty[0] & 262144 && !src_url_equal2(img.src, img_src_value = ctx[41])) {
-        attr54(img, "src", img_src_value);
+      if (dirty[0] & 524288 && !src_url_equal2(img.src, img_src_value = ctx[42])) {
+        attr55(img, "src", img_src_value);
       }
-      if (dirty[0] & 262144 && img_alt_value !== (img_alt_value = ctx[43])) {
-        attr54(img, "alt", img_alt_value);
+      if (dirty[0] & 524288 && img_alt_value !== (img_alt_value = ctx[44])) {
+        attr55(img, "alt", img_alt_value);
       }
-      if (dirty[0] & 262144 && img_title_value !== (img_title_value = ctx[42])) {
-        attr54(img, "title", img_title_value);
+      if (dirty[0] & 524288 && img_title_value !== (img_title_value = ctx[43])) {
+        attr55(img, "title", img_title_value);
       }
-      if (dirty[0] & 262144 && t1_value !== (t1_value = ctx[42] + ""))
+      if (dirty[0] & 524288 && t1_value !== (t1_value = ctx[43] + ""))
         set_data3(t1, t1_value);
       if (dirty[0] & 2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + ctx[1])) {
-        attr54(span, "class", span_class_value);
+        attr55(span, "class", span_class_value);
       }
-      if (dirty[0] & 262146 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[43] + " " + ctx[1])) {
-        attr54(button, "class", button_class_value);
+      if (dirty[0] & 524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1])) {
+        attr55(button, "class", button_class_value);
       }
-      if (dirty[0] & 786432 && button_title_value !== (button_title_value = ctx[42] + (ctx[45] && ctx[45].reason ? ": " + ctx[45].reason : ""))) {
-        attr54(button, "title", button_title_value);
+      if (dirty[0] & 1572864 && button_title_value !== (button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""))) {
+        attr55(button, "title", button_title_value);
       }
-      if (dirty[0] & 262144 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[40].kind)) {
-        attr54(button, "data-app-kind", button_data_app_kind_value);
+      if (dirty[0] & 524288 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[41].kind)) {
+        attr55(button, "data-app-kind", button_data_app_kind_value);
       }
-      if (dirty[0] & 786432 && button_disabled_value !== (button_disabled_value = ctx[45] && ctx[45].status !== "idle")) {
+      if (dirty[0] & 1572864 && button_disabled_value !== (button_disabled_value = ctx[46] && ctx[46].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
-      if (dirty[0] & 786434) {
-        toggle_class48(button, "is-loading", ctx[45] && ctx[45].status === "loading");
+      if (dirty[0] & 1572866) {
+        toggle_class49(button, "is-loading", ctx[46] && ctx[46].status === "loading");
       }
-      if (dirty[0] & 786434) {
-        toggle_class48(button, "is-failed", ctx[45] && ctx[45].status === "failed");
+      if (dirty[0] & 1572866) {
+        toggle_class49(button, "is-failed", ctx[46] && ctx[46].status === "failed");
       }
     },
     d(detaching) {
       if (detaching)
-        detach53(button);
+        detach54(button);
       mounted = false;
       dispose();
     }
   };
 }
-function create_fragment54(ctx) {
+function create_fragment55(ctx) {
   let t0;
   let div0;
   let button0;
@@ -7993,7 +8221,6 @@ function create_fragment54(ctx) {
   let t6;
   let button6;
   let t7;
-  let button7;
   let div0_class_value;
   let scrollHeight_action;
   let scrollTop_action;
@@ -8010,7 +8237,7 @@ function create_fragment54(ctx) {
   let div2_class_value;
   let t12;
   let div3;
-  let strokecolor1;
+  let textcolor;
   let div3_class_value;
   let t13;
   let div6;
@@ -8024,7 +8251,7 @@ function create_fragment54(ctx) {
   let div5;
   let div5_class_value;
   let t17;
-  let strokecolor2;
+  let strokecolor1;
   let div6_class_value;
   let t18;
   let div7;
@@ -8033,11 +8260,11 @@ function create_fragment54(ctx) {
   let current;
   let mounted;
   let dispose;
-  let if_block0 = ctx[5] && create_if_block_7(ctx);
+  let if_block0 = ctx[5] && create_if_block_8(ctx);
   const button0_spread_levels = [
     { class: "clicker" },
-    ctx[14],
-    { content: ctx[17].clicker }
+    ctx[15],
+    { content: ctx[18].clicker }
   ];
   let button0_props = {
     $$slots: { default: [create_default_slot_8] },
@@ -8047,11 +8274,11 @@ function create_fragment54(ctx) {
     button0_props = assign2(button0_props, button0_spread_levels[i]);
   }
   button0 = new Button_default({ props: button0_props });
-  button0.$on("click", ctx[23]);
+  button0.$on("click", ctx[24]);
   const button1_spread_levels = [
     { class: "selector" },
-    ctx[14],
-    { content: ctx[17].selector }
+    ctx[15],
+    { content: ctx[18].selector }
   ];
   let button1_props = {
     $$slots: { default: [create_default_slot_7] },
@@ -8061,12 +8288,12 @@ function create_fragment54(ctx) {
     button1_props = assign2(button1_props, button1_spread_levels[i]);
   }
   button1 = new Button_default({ props: button1_props });
-  button1.$on("click", ctx[24]);
+  button1.$on("click", ctx[25]);
   const button2_spread_levels = [
     { class: "pencil" },
-    ctx[14],
-    { content: ctx[17].pencil },
-    { menu: ctx[10] }
+    ctx[15],
+    { content: ctx[18].pencil },
+    { menu: ctx[11] }
   ];
   let button2_props = {
     $$slots: { default: [create_default_slot_6] },
@@ -8076,12 +8303,12 @@ function create_fragment54(ctx) {
     button2_props = assign2(button2_props, button2_spread_levels[i]);
   }
   button2 = new Button_default({ props: button2_props });
-  button2.$on("click", ctx[25]);
+  button2.$on("click", ctx[26]);
   const button3_spread_levels = [
     { class: "text" },
-    ctx[14],
-    { content: ctx[17].text },
-    { menu: ctx[11] }
+    ctx[15],
+    { content: ctx[18].text },
+    { menu: ctx[12] }
   ];
   let button3_props = {
     $$slots: { default: [create_default_slot_53] },
@@ -8091,12 +8318,12 @@ function create_fragment54(ctx) {
     button3_props = assign2(button3_props, button3_spread_levels[i]);
   }
   button3 = new Button_default({ props: button3_props });
-  button3.$on("click", ctx[26]);
+  button3.$on("click", ctx[27]);
   const button4_spread_levels = [
     { class: "shapes" },
-    ctx[14],
-    { content: ctx[8].shapes },
-    { menu: ctx[12] }
+    ctx[15],
+    { content: ctx[9].shapes },
+    { menu: ctx[13] }
   ];
   let button4_props = {
     $$slots: { default: [create_default_slot_43] },
@@ -8106,8 +8333,8 @@ function create_fragment54(ctx) {
     button4_props = assign2(button4_props, button4_spread_levels[i]);
   }
   button4 = new Button_default({ props: button4_props });
-  button4.$on("click", ctx[27]);
-  const button5_spread_levels = [{ class: "eraser" }, ctx[14], { content: ctx[17].eraser }];
+  button4.$on("click", ctx[28]);
+  const button5_spread_levels = [{ class: "eraser" }, ctx[15], { content: ctx[18].eraser }];
   let button5_props = {
     $$slots: { default: [create_default_slot_34] },
     $$scope: { ctx }
@@ -8116,8 +8343,8 @@ function create_fragment54(ctx) {
     button5_props = assign2(button5_props, button5_spread_levels[i]);
   }
   button5 = new Button_default({ props: button5_props });
-  button5.$on("click", ctx[28]);
-  const button6_spread_levels = [{ class: "clear" }, ctx[14], { content: ctx[8].clear }];
+  button5.$on("click", ctx[29]);
+  const button6_spread_levels = [{ class: "clear" }, ctx[15], { content: ctx[9].clear }];
   let button6_props = {
     $$slots: { default: [create_default_slot_24] },
     $$scope: { ctx }
@@ -8126,23 +8353,9 @@ function create_fragment54(ctx) {
     button6_props = assign2(button6_props, button6_spread_levels[i]);
   }
   button6 = new Button_default({ props: button6_props });
-  button6.$on("click", ctx[29]);
-  const button7_spread_levels = [
-    { class: "apps" },
-    ctx[14],
-    { content: ctx[8].apps },
-    { menu: ctx[13] },
-    { menu_placement: "right-end" }
-  ];
-  let button7_props = {
-    $$slots: { default: [create_default_slot_14] },
-    $$scope: { ctx }
-  };
-  for (let i = 0; i < button7_spread_levels.length; i += 1) {
-    button7_props = assign2(button7_props, button7_spread_levels[i]);
-  }
-  button7 = new Button_default({ props: button7_props });
-  let if_block1 = ctx[5] && create_if_block6(ctx);
+  button6.$on("click", ctx[30]);
+  let if_block1 = !ctx[6] && create_if_block_12(ctx);
+  let if_block2 = ctx[5] && create_if_block6(ctx);
   strokewidth0 = new StrokeWidth_default({
     props: {
       app: ctx[0],
@@ -8157,7 +8370,7 @@ function create_fragment54(ctx) {
       disabled: ctx[3]
     }
   });
-  strokecolor1 = new StrokeColor_default({
+  textcolor = new TextColor_default({
     props: {
       app: ctx[0],
       theme: ctx[1],
@@ -8179,141 +8392,143 @@ function create_fragment54(ctx) {
       disabled: ctx[3]
     }
   });
-  strokecolor2 = new StrokeColor_default({
+  strokecolor1 = new StrokeColor_default({
     props: {
       app: ctx[0],
       theme: ctx[1],
       disabled: ctx[3]
     }
   });
-  let each_value = ctx[18];
+  let each_value = ctx[19];
   let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
-    each_blocks[i] = create_each_block3(get_each_context3(ctx, each_value, i));
+    each_blocks[i] = create_each_block4(get_each_context4(ctx, each_value, i));
   }
   return {
     c() {
       if (if_block0)
         if_block0.c();
-      t0 = space7();
-      div0 = element10("div");
+      t0 = space8();
+      div0 = element11("div");
       create_component6(button0.$$.fragment);
-      t1 = space7();
+      t1 = space8();
       create_component6(button1.$$.fragment);
-      t2 = space7();
+      t2 = space8();
       create_component6(button2.$$.fragment);
-      t3 = space7();
+      t3 = space8();
       create_component6(button3.$$.fragment);
-      t4 = space7();
+      t4 = space8();
       create_component6(button4.$$.fragment);
-      t5 = space7();
+      t5 = space8();
       create_component6(button5.$$.fragment);
-      t6 = space7();
+      t6 = space8();
       create_component6(button6.$$.fragment);
-      t7 = space7();
-      create_component6(button7.$$.fragment);
-      t8 = space7();
+      t7 = space8();
       if (if_block1)
         if_block1.c();
-      t9 = space7();
-      div8 = element10("div");
-      div2 = element10("div");
+      t8 = space8();
+      if (if_block2)
+        if_block2.c();
+      t9 = space8();
+      div8 = element11("div");
+      div2 = element11("div");
       create_component6(strokewidth0.$$.fragment);
-      t10 = space7();
-      div1 = element10("div");
-      t11 = space7();
+      t10 = space8();
+      div1 = element11("div");
+      t11 = space8();
       create_component6(strokecolor0.$$.fragment);
-      t12 = space7();
-      div3 = element10("div");
-      create_component6(strokecolor1.$$.fragment);
-      t13 = space7();
-      div6 = element10("div");
+      t12 = space8();
+      div3 = element11("div");
+      create_component6(textcolor.$$.fragment);
+      t13 = space8();
+      div6 = element11("div");
       create_component6(shapes2.$$.fragment);
-      t14 = space7();
-      div4 = element10("div");
-      t15 = space7();
+      t14 = space8();
+      div4 = element11("div");
+      t15 = space8();
       create_component6(strokewidth1.$$.fragment);
-      t16 = space7();
-      div5 = element10("div");
-      t17 = space7();
-      create_component6(strokecolor2.$$.fragment);
-      t18 = space7();
-      div7 = element10("div");
+      t16 = space8();
+      div5 = element11("div");
+      t17 = space8();
+      create_component6(strokecolor1.$$.fragment);
+      t18 = space8();
+      div7 = element11("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
-      attr54(div0, "class", div0_class_value = name5 + "-scrollable");
-      toggle_class48(div0, "scrollable", ctx[5]);
-      attr54(div1, "class", div1_class_value = name5 + "-panel-divider");
-      attr54(div2, "class", div2_class_value = name5 + "-panel pencil");
-      attr54(div3, "class", div3_class_value = name5 + "-panel text");
-      attr54(div4, "class", div4_class_value = name5 + "-panel-divider");
-      attr54(div5, "class", div5_class_value = name5 + "-panel-divider");
-      attr54(div6, "class", div6_class_value = name5 + "-panel shapes");
-      attr54(div7, "class", div7_class_value = name5 + "-panel apps");
-      set_style3(div7, "--n", ctx[18].length);
-      attr54(div8, "class", div8_class_value = name5 + "-panel-wrapper");
-      set_style3(div8, "display", "none");
+      attr55(div0, "class", div0_class_value = name5 + "-scrollable");
+      toggle_class49(div0, "scrollable", ctx[5]);
+      attr55(div1, "class", div1_class_value = name5 + "-panel-divider");
+      attr55(div2, "class", div2_class_value = name5 + "-panel pencil");
+      attr55(div3, "class", div3_class_value = name5 + "-panel text");
+      attr55(div4, "class", div4_class_value = name5 + "-panel-divider");
+      attr55(div5, "class", div5_class_value = name5 + "-panel-divider");
+      attr55(div6, "class", div6_class_value = name5 + "-panel shapes");
+      attr55(div7, "class", div7_class_value = name5 + "-panel apps");
+      set_style4(div7, "--n", ctx[19].length);
+      attr55(div8, "class", div8_class_value = name5 + "-panel-wrapper");
+      set_style4(div8, "display", "none");
     },
     m(target, anchor) {
       if (if_block0)
         if_block0.m(target, anchor);
-      insert53(target, t0, anchor);
-      insert53(target, div0, anchor);
+      insert54(target, t0, anchor);
+      insert54(target, div0, anchor);
       mount_component6(button0, div0, null);
-      append53(div0, t1);
+      append54(div0, t1);
       mount_component6(button1, div0, null);
-      append53(div0, t2);
+      append54(div0, t2);
       mount_component6(button2, div0, null);
-      append53(div0, t3);
+      append54(div0, t3);
       mount_component6(button3, div0, null);
-      append53(div0, t4);
+      append54(div0, t4);
       mount_component6(button4, div0, null);
-      append53(div0, t5);
+      append54(div0, t5);
       mount_component6(button5, div0, null);
-      append53(div0, t6);
+      append54(div0, t6);
       mount_component6(button6, div0, null);
-      append53(div0, t7);
-      mount_component6(button7, div0, null);
-      insert53(target, t8, anchor);
+      append54(div0, t7);
       if (if_block1)
-        if_block1.m(target, anchor);
-      insert53(target, t9, anchor);
-      insert53(target, div8, anchor);
-      append53(div8, div2);
+        if_block1.m(div0, null);
+      insert54(target, t8, anchor);
+      if (if_block2)
+        if_block2.m(target, anchor);
+      insert54(target, t9, anchor);
+      insert54(target, div8, anchor);
+      append54(div8, div2);
       mount_component6(strokewidth0, div2, null);
-      append53(div2, t10);
-      append53(div2, div1);
-      append53(div2, t11);
+      append54(div2, t10);
+      append54(div2, div1);
+      append54(div2, t11);
       mount_component6(strokecolor0, div2, null);
-      ctx[34](div2);
-      append53(div8, t12);
-      append53(div8, div3);
-      mount_component6(strokecolor1, div3, null);
-      ctx[35](div3);
-      append53(div8, t13);
-      append53(div8, div6);
+      ctx[35](div2);
+      append54(div8, t12);
+      append54(div8, div3);
+      mount_component6(textcolor, div3, null);
+      ctx[36](div3);
+      append54(div8, t13);
+      append54(div8, div6);
       mount_component6(shapes2, div6, null);
-      append53(div6, t14);
-      append53(div6, div4);
-      append53(div6, t15);
+      append54(div6, t14);
+      append54(div6, div4);
+      append54(div6, t15);
       mount_component6(strokewidth1, div6, null);
-      append53(div6, t16);
-      append53(div6, div5);
-      append53(div6, t17);
-      mount_component6(strokecolor2, div6, null);
-      ctx[36](div6);
-      append53(div8, t18);
-      append53(div8, div7);
+      append54(div6, t16);
+      append54(div6, div5);
+      append54(div6, t17);
+      mount_component6(strokecolor1, div6, null);
+      ctx[37](div6);
+      append54(div8, t18);
+      append54(div8, div7);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(div7, null);
       }
-      ctx[37](div7);
+      ctx[38](div7);
       current = true;
       if (!mounted) {
         dispose = [
           action_destroyer3(scrollHeight_action = scrollHeight.call(null, div0, ctx[4])),
-          action_destroyer3(scrollTop_action = scrollTop.call(null, div0, ctx[20]))
+          action_destroyer3(scrollTop_action = scrollTop.call(null, div0, ctx[21]))
         ];
         mounted = true;
       }
@@ -8326,7 +8541,7 @@ function create_fragment54(ctx) {
             transition_in8(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_7(ctx2);
+          if_block0 = create_if_block_8(ctx2);
           if_block0.c();
           transition_in8(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -8338,99 +8553,83 @@ function create_fragment54(ctx) {
         });
         check_outros4();
       }
-      const button0_changes = dirty[0] & 147456 ? get_spread_update2(button0_spread_levels, [
+      const button0_changes = dirty[0] & 294912 ? get_spread_update2(button0_spread_levels, [
         button0_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].clicker }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 262144 && { content: ctx2[18].clicker }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 131072) {
+      if (dirty[0] & 258 | dirty[1] & 262144) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      const button1_changes = dirty[0] & 147456 ? get_spread_update2(button1_spread_levels, [
+      const button1_changes = dirty[0] & 294912 ? get_spread_update2(button1_spread_levels, [
         button1_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].selector }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 262144 && { content: ctx2[18].selector }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 131072) {
+      if (dirty[0] & 258 | dirty[1] & 262144) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
-      const button2_changes = dirty[0] & 148480 ? get_spread_update2(button2_spread_levels, [
+      const button2_changes = dirty[0] & 296960 ? get_spread_update2(button2_spread_levels, [
         button2_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].pencil },
-        dirty[0] & 1024 && { menu: ctx2[10] }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 262144 && { content: ctx2[18].pencil },
+        dirty[0] & 2048 && { menu: ctx2[11] }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 131072) {
+      if (dirty[0] & 258 | dirty[1] & 262144) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
-      const button3_changes = dirty[0] & 149504 ? get_spread_update2(button3_spread_levels, [
+      const button3_changes = dirty[0] & 299008 ? get_spread_update2(button3_spread_levels, [
         button3_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].text },
-        dirty[0] & 2048 && { menu: ctx2[11] }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 262144 && { content: ctx2[18].text },
+        dirty[0] & 4096 && { menu: ctx2[12] }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 131072) {
+      if (dirty[0] & 258 | dirty[1] & 262144) {
         button3_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button3.$set(button3_changes);
-      const button4_changes = dirty[0] & 20736 ? get_spread_update2(button4_spread_levels, [
+      const button4_changes = dirty[0] & 41472 ? get_spread_update2(button4_spread_levels, [
         button4_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 256 && { content: ctx2[8].shapes },
-        dirty[0] & 4096 && { menu: ctx2[12] }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 512 && { content: ctx2[9].shapes },
+        dirty[0] & 8192 && { menu: ctx2[13] }
       ]) : {};
-      if (dirty[0] & 706 | dirty[1] & 131072) {
+      if (dirty[0] & 1410 | dirty[1] & 262144) {
         button4_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button4.$set(button4_changes);
-      const button5_changes = dirty[0] & 147456 ? get_spread_update2(button5_spread_levels, [
+      const button5_changes = dirty[0] & 294912 ? get_spread_update2(button5_spread_levels, [
         button5_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].eraser }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 262144 && { content: ctx2[18].eraser }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 131072) {
+      if (dirty[0] & 258 | dirty[1] & 262144) {
         button5_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button5.$set(button5_changes);
-      const button6_changes = dirty[0] & 16640 ? get_spread_update2(button6_spread_levels, [
+      const button6_changes = dirty[0] & 33280 ? get_spread_update2(button6_spread_levels, [
         button6_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 256 && { content: ctx2[8].clear }
+        dirty[0] & 32768 && get_spread_object2(ctx2[15]),
+        dirty[0] & 512 && { content: ctx2[9].clear }
       ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 131072) {
+      if (dirty[0] & 2 | dirty[1] & 262144) {
         button6_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button6.$set(button6_changes);
-      const button7_changes = dirty[0] & 24832 ? get_spread_update2(button7_spread_levels, [
-        button7_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object2(ctx2[14]),
-        dirty[0] & 256 && { content: ctx2[8].apps },
-        dirty[0] & 8192 && { menu: ctx2[13] },
-        button7_spread_levels[4]
-      ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 131072) {
-        button7_changes.$$scope = { dirty, ctx: ctx2 };
-      }
-      button7.$set(button7_changes);
-      if (scrollHeight_action && is_function3(scrollHeight_action.update) && dirty[0] & 16)
-        scrollHeight_action.update.call(null, ctx2[4]);
-      if (dirty[0] & 32) {
-        toggle_class48(div0, "scrollable", ctx2[5]);
-      }
-      if (ctx2[5]) {
+      if (!ctx2[6]) {
         if (if_block1) {
           if_block1.p(ctx2, dirty);
-          if (dirty[0] & 32) {
+          if (dirty[0] & 64) {
             transition_in8(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block6(ctx2);
+          if_block1 = create_if_block_12(ctx2);
           if_block1.c();
           transition_in8(if_block1, 1);
-          if_block1.m(t9.parentNode, t9);
+          if_block1.m(div0, null);
         }
       } else if (if_block1) {
         group_outros4();
@@ -8439,6 +8638,30 @@ function create_fragment54(ctx) {
         });
         check_outros4();
       }
+      if (scrollHeight_action && is_function3(scrollHeight_action.update) && dirty[0] & 16)
+        scrollHeight_action.update.call(null, ctx2[4]);
+      if (dirty[0] & 32) {
+        toggle_class49(div0, "scrollable", ctx2[5]);
+      }
+      if (ctx2[5]) {
+        if (if_block2) {
+          if_block2.p(ctx2, dirty);
+          if (dirty[0] & 32) {
+            transition_in8(if_block2, 1);
+          }
+        } else {
+          if_block2 = create_if_block6(ctx2);
+          if_block2.c();
+          transition_in8(if_block2, 1);
+          if_block2.m(t9.parentNode, t9);
+        }
+      } else if (if_block2) {
+        group_outros4();
+        transition_out8(if_block2, 1, 1, () => {
+          if_block2 = null;
+        });
+        check_outros4();
+      }
       const strokewidth0_changes = {};
       if (dirty[0] & 1)
         strokewidth0_changes.app = ctx2[0];
@@ -8455,14 +8678,14 @@ function create_fragment54(ctx) {
       if (dirty[0] & 8)
         strokecolor0_changes.disabled = ctx2[3];
       strokecolor0.$set(strokecolor0_changes);
-      const strokecolor1_changes = {};
+      const textcolor_changes = {};
       if (dirty[0] & 1)
-        strokecolor1_changes.app = ctx2[0];
+        textcolor_changes.app = ctx2[0];
       if (dirty[0] & 2)
-        strokecolor1_changes.theme = ctx2[1];
+        textcolor_changes.theme = ctx2[1];
       if (dirty[0] & 8)
-        strokecolor1_changes.disabled = ctx2[3];
-      strokecolor1.$set(strokecolor1_changes);
+        textcolor_changes.disabled = ctx2[3];
+      textcolor.$set(textcolor_changes);
       const shapes_changes = {};
       if (dirty[0] & 1)
         shapes_changes.app = ctx2[0];
@@ -8481,23 +8704,23 @@ function create_fragment54(ctx) {
       if (dirty[0] & 8)
         strokewidth1_changes.disabled = ctx2[3];
       strokewidth1.$set(strokewidth1_changes);
-      const strokecolor2_changes = {};
+      const strokecolor1_changes = {};
       if (dirty[0] & 1)
-        strokecolor2_changes.app = ctx2[0];
+        strokecolor1_changes.app = ctx2[0];
       if (dirty[0] & 2)
-        strokecolor2_changes.theme = ctx2[1];
+        strokecolor1_changes.theme = ctx2[1];
       if (dirty[0] & 8)
-        strokecolor2_changes.disabled = ctx2[3];
-      strokecolor2.$set(strokecolor2_changes);
-      if (dirty[0] & 786435) {
-        each_value = ctx2[18];
+        strokecolor1_changes.disabled = ctx2[3];
+      strokecolor1.$set(strokecolor1_changes);
+      if (dirty[0] & 1572867) {
+        each_value = ctx2[19];
         let i;
         for (i = 0; i < each_value.length; i += 1) {
-          const child_ctx = get_each_context3(ctx2, each_value, i);
+          const child_ctx = get_each_context4(ctx2, each_value, i);
           if (each_blocks[i]) {
             each_blocks[i].p(child_ctx, dirty);
           } else {
-            each_blocks[i] = create_each_block3(child_ctx);
+            each_blocks[i] = create_each_block4(child_ctx);
             each_blocks[i].c();
             each_blocks[i].m(div7, null);
           }
@@ -8507,8 +8730,8 @@ function create_fragment54(ctx) {
         }
         each_blocks.length = each_value.length;
       }
-      if (!current || dirty[0] & 262144) {
-        set_style3(div7, "--n", ctx2[18].length);
+      if (!current || dirty[0] & 524288) {
+        set_style4(div7, "--n", ctx2[19].length);
       }
     },
     i(local) {
@@ -8522,14 +8745,14 @@ function create_fragment54(ctx) {
       transition_in8(button4.$$.fragment, local);
       transition_in8(button5.$$.fragment, local);
       transition_in8(button6.$$.fragment, local);
-      transition_in8(button7.$$.fragment, local);
       transition_in8(if_block1);
+      transition_in8(if_block2);
       transition_in8(strokewidth0.$$.fragment, local);
       transition_in8(strokecolor0.$$.fragment, local);
-      transition_in8(strokecolor1.$$.fragment, local);
+      transition_in8(textcolor.$$.fragment, local);
       transition_in8(shapes2.$$.fragment, local);
       transition_in8(strokewidth1.$$.fragment, local);
-      transition_in8(strokecolor2.$$.fragment, local);
+      transition_in8(strokecolor1.$$.fragment, local);
       current = true;
     },
     o(local) {
@@ -8541,23 +8764,23 @@ function create_fragment54(ctx) {
       transition_out8(button4.$$.fragment, local);
       transition_out8(button5.$$.fragment, local);
       transition_out8(button6.$$.fragment, local);
-      transition_out8(button7.$$.fragment, local);
       transition_out8(if_block1);
+      transition_out8(if_block2);
       transition_out8(strokewidth0.$$.fragment, local);
       transition_out8(strokecolor0.$$.fragment, local);
-      transition_out8(strokecolor1.$$.fragment, local);
+      transition_out8(textcolor.$$.fragment, local);
       transition_out8(shapes2.$$.fragment, local);
       transition_out8(strokewidth1.$$.fragment, local);
-      transition_out8(strokecolor2.$$.fragment, local);
+      transition_out8(strokecolor1.$$.fragment, local);
       current = false;
     },
     d(detaching) {
       if (if_block0)
         if_block0.d(detaching);
       if (detaching)
-        detach53(t0);
+        detach54(t0);
       if (detaching)
-        detach53(div0);
+        detach54(div0);
       destroy_component6(button0);
       destroy_component6(button1);
       destroy_component6(button2);
@@ -8565,33 +8788,34 @@ function create_fragment54(ctx) {
       destroy_component6(button4);
       destroy_component6(button5);
       destroy_component6(button6);
-      destroy_component6(button7);
-      if (detaching)
-        detach53(t8);
       if (if_block1)
-        if_block1.d(detaching);
+        if_block1.d();
+      if (detaching)
+        detach54(t8);
+      if (if_block2)
+        if_block2.d(detaching);
       if (detaching)
-        detach53(t9);
+        detach54(t9);
       if (detaching)
-        detach53(div8);
+        detach54(div8);
       destroy_component6(strokewidth0);
       destroy_component6(strokecolor0);
-      ctx[34](null);
-      destroy_component6(strokecolor1);
       ctx[35](null);
+      destroy_component6(textcolor);
+      ctx[36](null);
       destroy_component6(shapes2);
       destroy_component6(strokewidth1);
-      destroy_component6(strokecolor2);
-      ctx[36](null);
-      destroy_each(each_blocks, detaching);
+      destroy_component6(strokecolor1);
       ctx[37](null);
+      destroy_each(each_blocks, detaching);
+      ctx[38](null);
       mounted = false;
       run_all3(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance54($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -8601,11 +8825,11 @@ function instance54($$self, $$props, $$invalidate) {
   let status;
   let max_scroll;
   let $top;
-  let $scroll_height, $$unsubscribe_scroll_height = noop53, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe7(scroll_height, ($$value) => $$invalidate(32, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop53, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe7(memberState, ($$value) => $$invalidate(33, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop54, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe8(scroll_height, ($$value) => $$invalidate(33, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop54, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe8(memberState, ($$value) => $$invalidate(34, $memberState = $$value)), memberState);
   let $apps;
-  let $status, $$unsubscribe_status = noop53, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe7(status, ($$value) => $$invalidate(19, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(18, $apps = $$value));
+  let $status, $$unsubscribe_status = noop54, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe8(status, ($$value) => $$invalidate(20, $status = $$value)), status);
+  component_subscribe($$self, apps, ($$value) => $$invalidate(19, $apps = $$value));
   $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
@@ -8617,6 +8841,7 @@ function instance54($$self, $$props, $$invalidate) {
   $$subscribe_scroll_height();
   let { computed_height = 0 } = $$props;
   let { scrollable = false } = $$props;
+  let { hide_apps = false } = $$props;
   let last_shape = "rectangle";
   let pencil_panel;
   let text_panel;
@@ -8624,7 +8849,7 @@ function instance54($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(39, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(40, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -8659,25 +8884,25 @@ function instance54($$self, $$props, $$invalidate) {
   function div2_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       pencil_panel = $$value;
-      $$invalidate(10, pencil_panel);
+      $$invalidate(11, pencil_panel);
     });
   }
   function div3_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       text_panel = $$value;
-      $$invalidate(11, text_panel);
+      $$invalidate(12, text_panel);
     });
   }
   function div6_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       shapes_panel = $$value;
-      $$invalidate(12, shapes_panel);
+      $$invalidate(13, shapes_panel);
     });
   }
   function div7_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
-      $$invalidate(13, apps_panel);
+      $$invalidate(14, apps_panel);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -8692,14 +8917,16 @@ function instance54($$self, $$props, $$invalidate) {
     if ("scroll_height" in $$props2)
       $$subscribe_scroll_height($$invalidate(4, scroll_height = $$props2.scroll_height));
     if ("computed_height" in $$props2)
-      $$invalidate(30, computed_height = $$props2.computed_height);
+      $$invalidate(31, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
+    if ("hide_apps" in $$props2)
+      $$invalidate(6, hide_apps = $$props2.hide_apps);
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & 10) {
       $:
-        $$invalidate(14, btn_props = {
+        $$invalidate(15, btn_props = {
           name: name5,
           theme,
           disabled,
@@ -8708,15 +8935,15 @@ function instance54($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & 4) {
       $:
-        $$invalidate(8, t = i18n4[language]);
+        $$invalidate(9, t = i18n4[language]);
     }
     if ($$self.$$.dirty[0] & 1) {
       $:
-        $$invalidate(31, hotkeys = app == null ? void 0 : app.hotKeys);
+        $$invalidate(32, hotkeys = app == null ? void 0 : app.hotKeys);
     }
-    if ($$self.$$.dirty[0] & 256 | $$self.$$.dirty[1] & 1) {
+    if ($$self.$$.dirty[0] & 512 | $$self.$$.dirty[1] & 2) {
       $:
-        $$invalidate(17, c = {
+        $$invalidate(18, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
           selector: tooltip(t.selector, hotkeys == null ? void 0 : hotkeys.changeToSelector),
           pencil: tooltip(t.pencil, hotkeys == null ? void 0 : hotkeys.changeToPencil),
@@ -8726,29 +8953,29 @@ function instance54($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & 1) {
       $:
-        $$subscribe_memberState($$invalidate(16, memberState = app == null ? void 0 : app.memberState));
+        $$subscribe_memberState($$invalidate(17, memberState = app == null ? void 0 : app.memberState));
     }
-    if ($$self.$$.dirty[1] & 4) {
+    if ($$self.$$.dirty[1] & 8) {
       $:
-        $$invalidate(7, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+        $$invalidate(8, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
-    if ($$self.$$.dirty[1] & 4) {
+    if ($$self.$$.dirty[1] & 8) {
       $:
-        $$invalidate(6, shape = $memberState == null ? void 0 : $memberState.shapeType);
+        $$invalidate(7, shape = $memberState == null ? void 0 : $memberState.shapeType);
     }
     if ($$self.$$.dirty[0] & 1) {
       $:
-        $$subscribe_status($$invalidate(15, status = app == null ? void 0 : app.appsStatus));
+        $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
     }
-    if ($$self.$$.dirty[0] & 192) {
+    if ($$self.$$.dirty[0] & 384) {
       $:
         if (applianceShapes.includes(appliance)) {
-          $$invalidate(9, last_shape = appliance);
+          $$invalidate(10, last_shape = appliance);
         } else if (shape) {
-          $$invalidate(9, last_shape = shape);
+          $$invalidate(10, last_shape = shape);
         }
     }
-    if ($$self.$$.dirty[0] & 1073741856 | $$self.$$.dirty[1] & 2) {
+    if ($$self.$$.dirty[0] & 32 | $$self.$$.dirty[1] & 5) {
       $:
         max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
@@ -8760,6 +8987,7 @@ function instance54($$self, $$props, $$invalidate) {
     disabled,
     scroll_height,
     scrollable,
+    hide_apps,
     shape,
     appliance,
     t,
@@ -8794,17 +9022,18 @@ function instance54($$self, $$props, $$invalidate) {
     div7_binding
   ];
 }
-var Contents = class extends SvelteComponent54 {
+var Contents = class extends SvelteComponent55 {
   constructor(options) {
     super();
-    init54(this, options, instance54, create_fragment54, safe_not_equal54, {
+    init55(this, options, instance55, create_fragment55, safe_not_equal55, {
       app: 0,
       theme: 1,
       language: 2,
       disabled: 3,
       scroll_height: 4,
-      computed_height: 30,
-      scrollable: 5
+      computed_height: 31,
+      scrollable: 5,
+      hide_apps: 6
     }, null, [-1, -1]);
   }
 };
@@ -8820,24 +9049,24 @@ function create_else_block7(ctx) {
     c() {
       path0 = svg_element45("path");
       path1 = svg_element45("path");
-      attr55(path0, "stroke", "#000");
-      attr55(path0, "d", "M20 52v16");
-      attr55(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
-      attr55(path1, "fill", "#000");
-      attr55(path1, "stroke", "none");
-      attr55(path1, "d", "M16 52v16l-8-8z");
-      attr55(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
+      attr56(path0, "stroke", "#000");
+      attr56(path0, "d", "M20 52v16");
+      attr56(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
+      attr56(path1, "fill", "#000");
+      attr56(path1, "stroke", "none");
+      attr56(path1, "d", "M16 52v16l-8-8z");
+      attr56(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
-      insert54(target, path0, anchor);
-      insert54(target, path1, anchor);
+      insert55(target, path0, anchor);
+      insert55(target, path1, anchor);
     },
-    p: noop54,
+    p: noop55,
     d(detaching) {
       if (detaching)
-        detach54(path0);
+        detach55(path0);
       if (detaching)
-        detach54(path1);
+        detach55(path1);
     }
   };
 }
@@ -8850,28 +9079,28 @@ function create_if_block7(ctx) {
     c() {
       path0 = svg_element45("path");
       path1 = svg_element45("path");
-      attr55(path0, "stroke", "#000");
-      attr55(path0, "d", "M10 52v16");
-      attr55(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
-      attr55(path1, "fill", "#000");
-      attr55(path1, "stroke", "none");
-      attr55(path1, "d", "M14 52v16l8-8z");
-      attr55(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
+      attr56(path0, "stroke", "#000");
+      attr56(path0, "d", "M10 52v16");
+      attr56(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
+      attr56(path1, "fill", "#000");
+      attr56(path1, "stroke", "none");
+      attr56(path1, "d", "M14 52v16l8-8z");
+      attr56(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
-      insert54(target, path0, anchor);
-      insert54(target, path1, anchor);
+      insert55(target, path0, anchor);
+      insert55(target, path1, anchor);
     },
-    p: noop54,
+    p: noop55,
     d(detaching) {
       if (detaching)
-        detach54(path0);
+        detach55(path0);
       if (detaching)
-        detach54(path1);
+        detach55(path1);
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment56(ctx) {
   let div1;
   let div0;
   let contents;
@@ -8896,10 +9125,11 @@ function create_fragment55(ctx) {
       app: ctx[0],
       theme: ctx[1],
       language: ctx[2],
-      disabled: ctx[6],
-      scroll_height: ctx[9],
-      computed_height: ctx[5],
-      scrollable: ctx[4]
+      disabled: ctx[7],
+      scroll_height: ctx[10],
+      computed_height: ctx[6],
+      scrollable: ctx[5],
+      hide_apps: ctx[4]
     }
   });
   function select_block_type(ctx2, dirty) {
@@ -8911,52 +9141,52 @@ function create_fragment55(ctx) {
   let if_block = current_block_type(ctx);
   return {
     c() {
-      div1 = element11("div");
-      div0 = element11("div");
+      div1 = element12("div");
+      div0 = element12("div");
       create_component7(contents.$$.fragment);
-      t0 = space8();
-      label = element11("label");
-      input = element11("input");
-      t1 = space8();
+      t0 = space9();
+      label = element12("label");
+      input = element12("input");
+      t1 = space9();
       svg = svg_element45("svg");
       path0 = svg_element45("path");
       path1 = svg_element45("path");
       if_block.c();
-      attr55(div0, "class", div0_class_value = name6 + "-contents " + ctx[1]);
-      set_style4(div0, "height", ctx[4] ? ctx[5] + "px" : "auto", false);
-      attr55(input, "type", "checkbox");
-      attr55(path0, "fill", "#fff");
-      attr55(path0, "stroke", "none");
-      attr55(path0, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr55(path0, "class", path0_class_value = name6 + "-handler-bg-color");
-      attr55(path1, "stroke", "#000");
-      attr55(path1, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr55(path1, "class", path1_class_value = name6 + "-handler-border-color");
-      attr55(svg, "fill", "none");
-      attr55(svg, "stroke-width", "2");
-      attr55(svg, "viewBox", "0 0 32 120");
-      attr55(label, "class", label_class_value = name6 + "-handler " + ctx[1]);
-      attr55(div1, "class", div1_class_value = name6 + " " + ctx[1]);
-      toggle_class49(div1, "collapsed", ctx[3]);
-    },
-    m(target, anchor) {
-      insert54(target, div1, anchor);
-      append54(div1, div0);
+      attr56(div0, "class", div0_class_value = name6 + "-contents " + ctx[1]);
+      set_style5(div0, "height", ctx[5] ? ctx[6] + "px" : "auto", false);
+      attr56(input, "type", "checkbox");
+      attr56(path0, "fill", "#fff");
+      attr56(path0, "stroke", "none");
+      attr56(path0, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
+      attr56(path0, "class", path0_class_value = name6 + "-handler-bg-color");
+      attr56(path1, "stroke", "#000");
+      attr56(path1, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
+      attr56(path1, "class", path1_class_value = name6 + "-handler-border-color");
+      attr56(svg, "fill", "none");
+      attr56(svg, "stroke-width", "2");
+      attr56(svg, "viewBox", "0 0 32 120");
+      attr56(label, "class", label_class_value = name6 + "-handler " + ctx[1]);
+      attr56(div1, "class", div1_class_value = name6 + " " + ctx[1]);
+      toggle_class50(div1, "collapsed", ctx[3]);
+    },
+    m(target, anchor) {
+      insert55(target, div1, anchor);
+      append55(div1, div0);
       mount_component7(contents, div0, null);
-      append54(div1, t0);
-      append54(div1, label);
-      append54(label, input);
+      append55(div1, t0);
+      append55(div1, label);
+      append55(label, input);
       input.checked = ctx[3];
-      append54(label, t1);
-      append54(label, svg);
-      append54(svg, path0);
-      append54(svg, path1);
+      append55(label, t1);
+      append55(label, svg);
+      append55(svg, path0);
+      append55(svg, path1);
       if_block.m(svg, null);
       current = true;
       if (!mounted) {
         dispose = [
-          listen6(input, "change", ctx[13]),
-          action_destroyer4(height_action = height.call(null, div1, ctx[8]))
+          listen7(input, "change", ctx[15]),
+          action_destroyer4(height_action = height.call(null, div1, ctx[9]))
         ];
         mounted = true;
       }
@@ -8969,18 +9199,20 @@ function create_fragment55(ctx) {
         contents_changes.theme = ctx2[1];
       if (dirty & 4)
         contents_changes.language = ctx2[2];
+      if (dirty & 128)
+        contents_changes.disabled = ctx2[7];
       if (dirty & 64)
-        contents_changes.disabled = ctx2[6];
+        contents_changes.computed_height = ctx2[6];
       if (dirty & 32)
-        contents_changes.computed_height = ctx2[5];
+        contents_changes.scrollable = ctx2[5];
       if (dirty & 16)
-        contents_changes.scrollable = ctx2[4];
+        contents_changes.hide_apps = ctx2[4];
       contents.$set(contents_changes);
       if (!current || dirty & 2 && div0_class_value !== (div0_class_value = name6 + "-contents " + ctx2[1])) {
-        attr55(div0, "class", div0_class_value);
+        attr56(div0, "class", div0_class_value);
       }
-      if (dirty & 48) {
-        set_style4(div0, "height", ctx2[4] ? ctx2[5] + "px" : "auto", false);
+      if (dirty & 96) {
+        set_style5(div0, "height", ctx2[5] ? ctx2[6] + "px" : "auto", false);
       }
       if (dirty & 8) {
         input.checked = ctx2[3];
@@ -8996,13 +9228,13 @@ function create_fragment55(ctx) {
         }
       }
       if (!current || dirty & 2 && label_class_value !== (label_class_value = name6 + "-handler " + ctx2[1])) {
-        attr55(label, "class", label_class_value);
+        attr56(label, "class", label_class_value);
       }
       if (!current || dirty & 2 && div1_class_value !== (div1_class_value = name6 + " " + ctx2[1])) {
-        attr55(div1, "class", div1_class_value);
+        attr56(div1, "class", div1_class_value);
       }
       if (dirty & 10) {
-        toggle_class49(div1, "collapsed", ctx2[3]);
+        toggle_class50(div1, "collapsed", ctx2[3]);
       }
     },
     i(local) {
@@ -9017,7 +9249,7 @@ function create_fragment55(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach54(div1);
+        detach55(div1);
       destroy_component7(contents);
       if_block.d();
       mounted = false;
@@ -9026,24 +9258,26 @@ function create_fragment55(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance55($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let computed_height;
   let scrollable;
+  let hide_apps;
   let $container_height;
   let $scroll_height;
-  let $writable, $$unsubscribe_writable = noop54, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe8(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $writable, $$unsubscribe_writable = noop55, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe9(writable2, ($$value) => $$invalidate(14, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
   let { app = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
+  let { config = {} } = $$props;
   const extra_height = (32 + 4 + 4) * 2;
   let collapsed = false;
   let container_height = svelte_writable(0);
-  component_subscribe2($$self, container_height, (value) => $$invalidate(10, $container_height = value));
+  component_subscribe2($$self, container_height, (value) => $$invalidate(12, $container_height = value));
   let scroll_height = svelte_writable(0);
-  component_subscribe2($$self, scroll_height, (value) => $$invalidate(11, $scroll_height = value));
+  component_subscribe2($$self, scroll_height, (value) => $$invalidate(13, $scroll_height = value));
   function input_change_handler() {
     collapsed = this.checked;
     $$invalidate(3, collapsed);
@@ -9055,23 +9289,30 @@ function instance55($$self, $$props, $$invalidate) {
       $$invalidate(1, theme = $$props2.theme);
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
+    if ("config" in $$props2)
+      $$invalidate(11, config = $$props2.config);
   };
   $$self.$$.update = () => {
+    var _a;
     if ($$self.$$.dirty & 1) {
       $:
-        $$subscribe_writable($$invalidate(7, writable2 = app == null ? void 0 : app.writable));
+        $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
     }
-    if ($$self.$$.dirty & 4096) {
+    if ($$self.$$.dirty & 16384) {
       $:
-        $$invalidate(6, disabled = !$writable);
+        $$invalidate(7, disabled = !$writable);
     }
-    if ($$self.$$.dirty & 3072) {
+    if ($$self.$$.dirty & 12288) {
       $:
-        $$invalidate(5, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
+        $$invalidate(6, computed_height = clamp($container_height, extra_height, $scroll_height + extra_height));
     }
-    if ($$self.$$.dirty & 3072) {
+    if ($$self.$$.dirty & 12288) {
       $:
-        $$invalidate(4, scrollable = $scroll_height + extra_height > $container_height);
+        $$invalidate(5, scrollable = $scroll_height + extra_height > $container_height);
+    }
+    if ($$self.$$.dirty & 2048) {
+      $:
+        $$invalidate(4, hide_apps = ((_a = config.apps) == null ? void 0 : _a.enable) === false);
     }
   };
   return [
@@ -9079,55 +9320,62 @@ function instance55($$self, $$props, $$invalidate) {
     theme,
     language,
     collapsed,
+    hide_apps,
     scrollable,
     computed_height,
     disabled,
     writable2,
     container_height,
     scroll_height,
+    config,
     $container_height,
     $scroll_height,
     $writable,
     input_change_handler
   ];
 }
-var Toolbar = class extends SvelteComponent55 {
+var Toolbar = class extends SvelteComponent56 {
   constructor(options) {
     super();
-    init55(this, options, instance55, create_fragment55, safe_not_equal55, { app: 0, theme: 1, language: 2 });
+    init56(this, options, instance56, create_fragment56, safe_not_equal56, {
+      app: 0,
+      theme: 1,
+      language: 2,
+      config: 11
+    });
   }
 };
 var Toolbar_default = Toolbar;
 
 // src/components/PlayerControl/PlayerControl.svelte
 import {
-  SvelteComponent as SvelteComponent56,
-  append as append55,
-  attr as attr56,
+  SvelteComponent as SvelteComponent57,
+  append as append56,
+  attr as attr57,
   binding_callbacks as binding_callbacks2,
   check_outros as check_outros5,
   create_component as create_component8,
   destroy_component as destroy_component8,
-  detach as detach55,
-  element as element12,
+  detach as detach56,
+  element as element13,
   empty as empty5,
   group_outros as group_outros5,
-  init as init56,
-  insert as insert55,
+  init as init57,
+  insert as insert56,
   mount_component as mount_component8,
-  noop as noop55,
+  noop as noop56,
   outro_and_destroy_block as outro_and_destroy_block2,
-  safe_not_equal as safe_not_equal56,
+  safe_not_equal as safe_not_equal57,
   set_data as set_data4,
-  set_style as set_style5,
-  space as space9,
-  subscribe as subscribe9,
+  set_style as set_style6,
+  space as space10,
+  subscribe as subscribe10,
   text as text3,
   transition_in as transition_in10,
   transition_out as transition_out10,
-  update_keyed_each as update_keyed_each3
+  update_keyed_each as update_keyed_each4
 } from "svelte/internal";
-function get_each_context4(ctx, list, i) {
+function get_each_context5(ctx, list, i) {
   const child_ctx = ctx.slice();
   child_ctx[25] = list[i];
   return child_ctx;
@@ -9389,7 +9637,7 @@ function create_default_slot_25(ctx) {
     },
     m(target, anchor) {
       if_blocks[current_block_type_index].m(target, anchor);
-      insert55(target, if_block_anchor, anchor);
+      insert56(target, if_block_anchor, anchor);
       current = true;
     },
     p(ctx2, dirty) {
@@ -9427,7 +9675,7 @@ function create_default_slot_25(ctx) {
     d(detaching) {
       if_blocks[current_block_type_index].d(detaching);
       if (detaching)
-        detach55(if_block_anchor);
+        detach56(if_block_anchor);
     }
   };
 }
@@ -9463,33 +9711,33 @@ function create_else_block8(ctx) {
   return {
     c() {
       create_component8(slider.$$.fragment);
-      t0 = space9();
-      span3 = element12("span");
-      span0 = element12("span");
+      t0 = space10();
+      span3 = element13("span");
+      span0 = element13("span");
       t1 = text3(t1_value);
-      t2 = space9();
-      span1 = element12("span");
+      t2 = space10();
+      span1 = element13("span");
       t3 = text3("/");
-      t4 = space9();
-      span2 = element12("span");
+      t4 = space10();
+      span2 = element13("span");
       t5 = text3(t5_value);
-      attr56(span0, "class", span0_class_value = name7 + "-current");
-      attr56(span1, "class", span1_class_value = name7 + "-slash");
-      attr56(span2, "class", span2_class_value = name7 + "-duration");
-      attr56(span3, "class", span3_class_value = name7 + "-progress");
+      attr57(span0, "class", span0_class_value = name7 + "-current");
+      attr57(span1, "class", span1_class_value = name7 + "-slash");
+      attr57(span2, "class", span2_class_value = name7 + "-duration");
+      attr57(span3, "class", span3_class_value = name7 + "-progress");
     },
     m(target, anchor) {
       mount_component8(slider, target, anchor);
-      insert55(target, t0, anchor);
-      insert55(target, span3, anchor);
-      append55(span3, span0);
-      append55(span0, t1);
-      append55(span3, t2);
-      append55(span3, span1);
-      append55(span1, t3);
-      append55(span3, t4);
-      append55(span3, span2);
-      append55(span2, t5);
+      insert56(target, t0, anchor);
+      insert56(target, span3, anchor);
+      append56(span3, span0);
+      append56(span0, t1);
+      append56(span3, t2);
+      append56(span3, span1);
+      append56(span1, t3);
+      append56(span3, t4);
+      append56(span3, span2);
+      append56(span2, t5);
       current = true;
     },
     p(ctx2, dirty) {
@@ -9519,9 +9767,9 @@ function create_else_block8(ctx) {
     d(detaching) {
       destroy_component8(slider, detaching);
       if (detaching)
-        detach55(t0);
+        detach56(t0);
       if (detaching)
-        detach55(span3);
+        detach56(span3);
     }
   };
 }
@@ -9541,19 +9789,19 @@ function create_if_block8(ctx) {
   return {
     c() {
       create_component8(slider.$$.fragment);
-      t0 = space9();
-      span = element12("span");
+      t0 = space10();
+      span = element13("span");
       t1 = text3("\u2026/\u2026");
-      attr56(span, "class", span_class_value = name7 + "-progress loading");
+      attr57(span, "class", span_class_value = name7 + "-progress loading");
     },
     m(target, anchor) {
       mount_component8(slider, target, anchor);
-      insert55(target, t0, anchor);
-      insert55(target, span, anchor);
-      append55(span, t1);
+      insert56(target, t0, anchor);
+      insert56(target, span, anchor);
+      append56(span, t1);
       current = true;
     },
-    p: noop55,
+    p: noop56,
     i(local) {
       if (current)
         return;
@@ -9567,9 +9815,9 @@ function create_if_block8(ctx) {
     d(detaching) {
       destroy_component8(slider, detaching);
       if (detaching)
-        detach55(t0);
+        detach56(t0);
       if (detaching)
-        detach55(span);
+        detach56(span);
     }
   };
 }
@@ -9581,15 +9829,15 @@ function create_default_slot_15(ctx) {
   let span_class_value;
   return {
     c() {
-      span = element12("span");
+      span = element13("span");
       t0 = text3(t0_value);
       t1 = text3("x");
-      attr56(span, "class", span_class_value = name7 + "-speed-text");
+      attr57(span, "class", span_class_value = name7 + "-speed-text");
     },
     m(target, anchor) {
-      insert55(target, span, anchor);
-      append55(span, t0);
-      append55(span, t1);
+      insert56(target, span, anchor);
+      append56(span, t0);
+      append56(span, t1);
     },
     p(ctx2, dirty) {
       if (dirty & 32768 && t0_value !== (t0_value = (ctx2[15] || 1) + ""))
@@ -9597,7 +9845,7 @@ function create_default_slot_15(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach55(span);
+        detach56(span);
     }
   };
 }
@@ -9611,19 +9859,19 @@ function create_default_slot5(ctx) {
       t1 = text3("x\n      ");
     },
     m(target, anchor) {
-      insert55(target, t0, anchor);
-      insert55(target, t1, anchor);
+      insert56(target, t0, anchor);
+      insert56(target, t1, anchor);
     },
-    p: noop55,
+    p: noop56,
     d(detaching) {
       if (detaching)
-        detach55(t0);
+        detach56(t0);
       if (detaching)
-        detach55(t1);
+        detach56(t1);
     }
   };
 }
-function create_each_block4(key_1, ctx) {
+function create_each_block5(key_1, ctx) {
   let first;
   let button;
   let current;
@@ -9650,7 +9898,7 @@ function create_each_block4(key_1, ctx) {
       this.first = first;
     },
     m(target, anchor) {
-      insert55(target, first, anchor);
+      insert56(target, first, anchor);
       mount_component8(button, target, anchor);
       current = true;
     },
@@ -9680,12 +9928,12 @@ function create_each_block4(key_1, ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach55(first);
+        detach56(first);
       destroy_component8(button, detaching);
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment57(ctx) {
   let div0;
   let button0;
   let t0;
@@ -9738,38 +9986,38 @@ function create_fragment56(ctx) {
   let each_value = speeds;
   const get_key = (ctx2) => ctx2[25];
   for (let i = 0; i < each_value.length; i += 1) {
-    let child_ctx = get_each_context4(ctx, each_value, i);
+    let child_ctx = get_each_context5(ctx, each_value, i);
     let key = get_key(child_ctx);
-    each_1_lookup.set(key, each_blocks[i] = create_each_block4(key, child_ctx));
+    each_1_lookup.set(key, each_blocks[i] = create_each_block5(key, child_ctx));
   }
   return {
     c() {
-      div0 = element12("div");
+      div0 = element13("div");
       create_component8(button0.$$.fragment);
-      t0 = space9();
+      t0 = space10();
       if_block.c();
-      t1 = space9();
+      t1 = space10();
       create_component8(button1.$$.fragment);
-      t2 = space9();
-      div2 = element12("div");
-      div1 = element12("div");
+      t2 = space10();
+      div2 = element13("div");
+      div1 = element13("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
-      attr56(div0, "class", div0_class_value = name7 + " " + ctx[0]);
-      attr56(div1, "class", div1_class_value = name7 + "-panel speed");
-      set_style5(div2, "display", "none");
+      attr57(div0, "class", div0_class_value = name7 + " " + ctx[0]);
+      attr57(div1, "class", div1_class_value = name7 + "-panel speed");
+      set_style6(div2, "display", "none");
     },
     m(target, anchor) {
-      insert55(target, div0, anchor);
+      insert56(target, div0, anchor);
       mount_component8(button0, div0, null);
-      append55(div0, t0);
+      append56(div0, t0);
       if_blocks[current_block_type_index].m(div0, null);
-      append55(div0, t1);
+      append56(div0, t1);
       mount_component8(button1, div0, null);
-      insert55(target, t2, anchor);
-      insert55(target, div2, anchor);
-      append55(div2, div1);
+      insert56(target, t2, anchor);
+      insert56(target, div2, anchor);
+      append56(div2, div1);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(div1, null);
       }
@@ -9824,12 +10072,12 @@ function create_fragment56(ctx) {
       }
       button1.$set(button1_changes);
       if (!current || dirty & 1 && div0_class_value !== (div0_class_value = name7 + " " + ctx2[0])) {
-        attr56(div0, "class", div0_class_value);
+        attr57(div0, "class", div0_class_value);
       }
       if (dirty & 294929) {
         each_value = speeds;
         group_outros5();
-        each_blocks = update_keyed_each3(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div1, outro_and_destroy_block2, create_each_block4, null, get_each_context4);
+        each_blocks = update_keyed_each4(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div1, outro_and_destroy_block2, create_each_block5, null, get_each_context5);
         check_outros5();
       }
     },
@@ -9855,14 +10103,14 @@ function create_fragment56(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach55(div0);
+        detach56(div0);
       destroy_component8(button0);
       if_blocks[current_block_type_index].d();
       destroy_component8(button1);
       if (detaching)
-        detach55(t2);
+        detach56(t2);
       if (detaching)
-        detach55(div2);
+        detach56(div2);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].d();
       }
@@ -9889,7 +10137,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance56($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -9900,10 +10148,10 @@ function instance56($$self, $$props, $$invalidate) {
   let loading;
   let playing;
   let className;
-  let $phase, $$unsubscribe_phase = noop55, $$subscribe_phase = () => ($$unsubscribe_phase(), $$unsubscribe_phase = subscribe9(phase, ($$value) => $$invalidate(22, $phase = $$value)), phase);
-  let $current, $$unsubscribe_current = noop55, $$subscribe_current = () => ($$unsubscribe_current(), $$unsubscribe_current = subscribe9(current, ($$value) => $$invalidate(13, $current = $$value)), current);
-  let $duration, $$unsubscribe_duration = noop55, $$subscribe_duration = () => ($$unsubscribe_duration(), $$unsubscribe_duration = subscribe9(duration, ($$value) => $$invalidate(14, $duration = $$value)), duration);
-  let $playbackRate, $$unsubscribe_playbackRate = noop55, $$subscribe_playbackRate = () => ($$unsubscribe_playbackRate(), $$unsubscribe_playbackRate = subscribe9(playbackRate, ($$value) => $$invalidate(15, $playbackRate = $$value)), playbackRate);
+  let $phase, $$unsubscribe_phase = noop56, $$subscribe_phase = () => ($$unsubscribe_phase(), $$unsubscribe_phase = subscribe10(phase, ($$value) => $$invalidate(22, $phase = $$value)), phase);
+  let $current, $$unsubscribe_current = noop56, $$subscribe_current = () => ($$unsubscribe_current(), $$unsubscribe_current = subscribe10(current, ($$value) => $$invalidate(13, $current = $$value)), current);
+  let $duration, $$unsubscribe_duration = noop56, $$subscribe_duration = () => ($$unsubscribe_duration(), $$unsubscribe_duration = subscribe10(duration, ($$value) => $$invalidate(14, $duration = $$value)), duration);
+  let $playbackRate, $$unsubscribe_playbackRate = noop56, $$subscribe_playbackRate = () => ($$unsubscribe_playbackRate(), $$unsubscribe_playbackRate = subscribe10(playbackRate, ($$value) => $$invalidate(15, $playbackRate = $$value)), playbackRate);
   $$self.$$.on_destroy.push(() => $$unsubscribe_phase());
   $$self.$$.on_destroy.push(() => $$unsubscribe_current());
   $$self.$$.on_destroy.push(() => $$unsubscribe_duration());
@@ -10031,10 +10279,10 @@ function instance56($$self, $$props, $$invalidate) {
     div1_binding
   ];
 }
-var PlayerControl = class extends SvelteComponent56 {
+var PlayerControl = class extends SvelteComponent57 {
   constructor(options) {
     super();
-    init56(this, options, instance56, create_fragment56, safe_not_equal56, {
+    init57(this, options, instance57, create_fragment57, safe_not_equal57, {
       player: 19,
       theme: 0,
       language: 20,
@@ -10046,26 +10294,26 @@ var PlayerControl_default = PlayerControl;
 
 // src/components/Fastboard/ReplayFastboard.svelte
 import {
-  SvelteComponent as SvelteComponent57,
-  append as append56,
-  attr as attr57,
+  SvelteComponent as SvelteComponent58,
+  append as append57,
+  attr as attr58,
   binding_callbacks as binding_callbacks3,
   create_component as create_component9,
   destroy_component as destroy_component9,
-  detach as detach56,
-  element as element13,
-  init as init57,
-  insert as insert56,
-  listen as listen7,
+  detach as detach57,
+  element as element14,
+  init as init58,
+  insert as insert57,
+  listen as listen8,
   mount_component as mount_component9,
-  safe_not_equal as safe_not_equal57,
-  space as space10,
-  toggle_class as toggle_class50,
+  safe_not_equal as safe_not_equal58,
+  space as space11,
+  toggle_class as toggle_class51,
   transition_in as transition_in11,
   transition_out as transition_out11
 } from "svelte/internal";
 import { onMount } from "svelte";
-function create_fragment57(ctx) {
+function create_fragment58(ctx) {
   let div2;
   let div0;
   let div0_class_value;
@@ -10086,26 +10334,26 @@ function create_fragment57(ctx) {
   });
   return {
     c() {
-      div2 = element13("div");
-      div0 = element13("div");
-      t = space10();
-      div1 = element13("div");
+      div2 = element14("div");
+      div0 = element14("div");
+      t = space11();
+      div1 = element14("div");
       create_component9(playercontrol.$$.fragment);
-      attr57(div0, "class", div0_class_value = name8 + "-view");
-      attr57(div1, "class", div1_class_value = name8 + "-bottom");
-      attr57(div2, "class", div2_class_value = name8 + "-root");
-      toggle_class50(div2, "loading", !ctx[0]);
+      attr58(div0, "class", div0_class_value = name8 + "-view");
+      attr58(div1, "class", div1_class_value = name8 + "-bottom");
+      attr58(div2, "class", div2_class_value = name8 + "-root");
+      toggle_class51(div2, "loading", !ctx[0]);
     },
     m(target, anchor) {
-      insert56(target, div2, anchor);
-      append56(div2, div0);
+      insert57(target, div2, anchor);
+      append57(div2, div0);
       ctx[5](div0);
-      append56(div2, t);
-      append56(div2, div1);
+      append57(div2, t);
+      append57(div2, div1);
       mount_component9(playercontrol, div1, null);
       current = true;
       if (!mounted) {
-        dispose = listen7(div0, "touchstart", tippy_hide_all, true);
+        dispose = listen8(div0, "touchstart", tippy_hide_all, true);
         mounted = true;
       }
     },
@@ -10119,7 +10367,7 @@ function create_fragment57(ctx) {
         playercontrol_changes.language = ctx2[2];
       playercontrol.$set(playercontrol_changes);
       if (dirty & 1) {
-        toggle_class50(div2, "loading", !ctx2[0]);
+        toggle_class51(div2, "loading", !ctx2[0]);
       }
     },
     i(local) {
@@ -10134,7 +10382,7 @@ function create_fragment57(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach56(div2);
+        detach57(div2);
       ctx[5](null);
       destroy_component9(playercontrol);
       mounted = false;
@@ -10143,7 +10391,7 @@ function create_fragment57(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance57($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
@@ -10194,10 +10442,10 @@ function instance57($$self, $$props, $$invalidate) {
   };
   return [player, theme, language, container, containerRef, div0_binding];
 }
-var ReplayFastboard = class extends SvelteComponent57 {
+var ReplayFastboard = class extends SvelteComponent58 {
   constructor(options) {
     super();
-    init57(this, options, instance57, create_fragment57, safe_not_equal57, {
+    init58(this, options, instance58, create_fragment58, safe_not_equal58, {
       player: 0,
       theme: 1,
       language: 2,
@@ -10209,25 +10457,25 @@ var ReplayFastboard_default = ReplayFastboard;
 
 // src/components/Fastboard/Fastboard.svelte
 import {
-  SvelteComponent as SvelteComponent58,
-  append as append57,
-  attr as attr58,
+  SvelteComponent as SvelteComponent59,
+  append as append58,
+  attr as attr59,
   binding_callbacks as binding_callbacks4,
   check_outros as check_outros6,
   create_component as create_component10,
   destroy_component as destroy_component10,
-  detach as detach57,
-  element as element14,
+  detach as detach58,
+  element as element15,
   group_outros as group_outros6,
-  init as init58,
-  insert as insert57,
-  listen as listen8,
+  init as init59,
+  insert as insert58,
+  listen as listen9,
   mount_component as mount_component10,
-  noop as noop56,
-  safe_not_equal as safe_not_equal58,
-  space as space11,
-  subscribe as subscribe10,
-  toggle_class as toggle_class51,
+  noop as noop57,
+  safe_not_equal as safe_not_equal59,
+  space as space12,
+  subscribe as subscribe11,
+  toggle_class as toggle_class52,
   transition_in as transition_in12,
   transition_out as transition_out12
 } from "svelte/internal";
@@ -10239,7 +10487,8 @@ function create_if_block_32(ctx) {
     props: {
       app: ctx[0],
       theme: ctx[1],
-      language: ctx[2]
+      language: ctx[2],
+      config: ctx[3].toolbar
     }
   });
   return {
@@ -10258,6 +10507,8 @@ function create_if_block_32(ctx) {
         toolbar_changes.theme = ctx2[1];
       if (dirty & 4)
         toolbar_changes.language = ctx2[2];
+      if (dirty & 8)
+        toolbar_changes.config = ctx2[3].toolbar;
       toolbar.$set(toolbar_changes);
     },
     i(local) {
@@ -10404,7 +10655,7 @@ function create_if_block9(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment59(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -10429,55 +10680,55 @@ function create_fragment58(ctx) {
   let if_block3 = ((_d = ctx[3].page_control) == null ? void 0 : _d.enable) !== false && create_if_block9(ctx);
   return {
     c() {
-      div4 = element14("div");
-      div0 = element14("div");
-      t0 = space11();
-      div1 = element14("div");
+      div4 = element15("div");
+      div0 = element15("div");
+      t0 = space12();
+      div1 = element15("div");
       if (if_block0)
         if_block0.c();
-      t1 = space11();
-      div2 = element14("div");
+      t1 = space12();
+      div2 = element15("div");
       if (if_block1)
         if_block1.c();
-      t2 = space11();
+      t2 = space12();
       if (if_block2)
         if_block2.c();
-      t3 = space11();
-      div3 = element14("div");
+      t3 = space12();
+      div3 = element15("div");
       if (if_block3)
         if_block3.c();
-      attr58(div0, "class", div0_class_value = name9 + "-view");
-      attr58(div1, "class", div1_class_value = name9 + "-left");
-      toggle_class51(div1, "hidden", !(ctx[5] === "visible" || ctx[5] === "toolbar-only"));
-      attr58(div2, "class", div2_class_value = name9 + "-bottom-left");
-      toggle_class51(div2, "hidden", ctx[5] !== "visible");
-      attr58(div3, "class", div3_class_value = name9 + "-bottom-right");
-      toggle_class51(div3, "hidden", ctx[5] !== "visible");
-      attr58(div4, "class", div4_class_value = name9 + "-root");
-      toggle_class51(div4, "loading", !ctx[0]);
-    },
-    m(target, anchor) {
-      insert57(target, div4, anchor);
-      append57(div4, div0);
+      attr59(div0, "class", div0_class_value = name9 + "-view");
+      attr59(div1, "class", div1_class_value = name9 + "-left");
+      toggle_class52(div1, "hidden", !(ctx[5] === "visible" || ctx[5] === "toolbar-only"));
+      attr59(div2, "class", div2_class_value = name9 + "-bottom-left");
+      toggle_class52(div2, "hidden", ctx[5] !== "visible");
+      attr59(div3, "class", div3_class_value = name9 + "-bottom-right");
+      toggle_class52(div3, "hidden", ctx[5] !== "visible");
+      attr59(div4, "class", div4_class_value = name9 + "-root");
+      toggle_class52(div4, "loading", !ctx[0]);
+    },
+    m(target, anchor) {
+      insert58(target, div4, anchor);
+      append58(div4, div0);
       ctx[13](div0);
-      append57(div4, t0);
-      append57(div4, div1);
+      append58(div4, t0);
+      append58(div4, div1);
       if (if_block0)
         if_block0.m(div1, null);
-      append57(div4, t1);
-      append57(div4, div2);
+      append58(div4, t1);
+      append58(div4, div2);
       if (if_block1)
         if_block1.m(div2, null);
-      append57(div2, t2);
+      append58(div2, t2);
       if (if_block2)
         if_block2.m(div2, null);
-      append57(div4, t3);
-      append57(div4, div3);
+      append58(div4, t3);
+      append58(div4, div3);
       if (if_block3)
         if_block3.m(div3, null);
       current = true;
       if (!mounted) {
-        dispose = listen8(div0, "touchstart", tippy_hide_all, true);
+        dispose = listen9(div0, "touchstart", tippy_hide_all, true);
         mounted = true;
       }
     },
@@ -10503,7 +10754,7 @@ function create_fragment58(ctx) {
         check_outros6();
       }
       if (dirty & 32) {
-        toggle_class51(div1, "hidden", !(ctx2[5] === "visible" || ctx2[5] === "toolbar-only"));
+        toggle_class52(div1, "hidden", !(ctx2[5] === "visible" || ctx2[5] === "toolbar-only"));
       }
       if (((_b2 = ctx2[3].redo_undo) == null ? void 0 : _b2.enable) !== false) {
         if (if_block1) {
@@ -10544,7 +10795,7 @@ function create_fragment58(ctx) {
         check_outros6();
       }
       if (dirty & 32) {
-        toggle_class51(div2, "hidden", ctx2[5] !== "visible");
+        toggle_class52(div2, "hidden", ctx2[5] !== "visible");
       }
       if (((_d2 = ctx2[3].page_control) == null ? void 0 : _d2.enable) !== false) {
         if (if_block3) {
@@ -10566,10 +10817,10 @@ function create_fragment58(ctx) {
         check_outros6();
       }
       if (dirty & 32) {
-        toggle_class51(div3, "hidden", ctx2[5] !== "visible");
+        toggle_class52(div3, "hidden", ctx2[5] !== "visible");
       }
       if (dirty & 1) {
-        toggle_class51(div4, "loading", !ctx2[0]);
+        toggle_class52(div4, "loading", !ctx2[0]);
       }
     },
     i(local) {
@@ -10590,7 +10841,7 @@ function create_fragment58(ctx) {
     },
     d(detaching) {
       if (detaching)
-        detach57(div4);
+        detach58(div4);
       ctx[13](null);
       if (if_block0)
         if_block0.d();
@@ -10606,13 +10857,13 @@ function create_fragment58(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance58($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
-  let $focusedApp, $$unsubscribe_focusedApp = noop56, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe10(focusedApp, ($$value) => $$invalidate(10, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop56, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe10(boxState, ($$value) => $$invalidate(11, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop56, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe10(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $focusedApp, $$unsubscribe_focusedApp = noop57, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe11(focusedApp, ($$value) => $$invalidate(10, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop57, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe11(boxState, ($$value) => $$invalidate(11, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop57, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe11(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10712,10 +10963,10 @@ function instance58($$self, $$props, $$invalidate) {
     div0_binding
   ];
 }
-var Fastboard = class extends SvelteComponent58 {
+var Fastboard = class extends SvelteComponent59 {
   constructor(options) {
     super();
-    init58(this, options, instance58, create_fragment58, safe_not_equal58, {
+    init59(this, options, instance59, create_fragment59, safe_not_equal59, {
       app: 0,
       theme: 1,
       language: 2,
@@ -10737,7 +10988,7 @@ function injectStyle(text4) {
 }
 
 // inline-sass-content:./src/style.scss
-var style_default = '.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:transparent;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-within{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:transparent;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:transparent;border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:transparent}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid transparent;position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid transparent}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:transparent;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}';
+var style_default = '.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-within{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:rgba(0,0,0,0);border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:#0000}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid rgba(0,0,0,0);position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid rgba(0,0,0,0)}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:#0000;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}';
 
 // inline-sass-stub:./src/style.scss
 injectStyle(style_default);