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

package/dist/index.mjs

@@ -18,7 +18,7 @@ var __spreadValues = (a, b) => {
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
-// ../../node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/internal/index.mjs
+// ../../node_modules/.pnpm/svelte@3.46.5/node_modules/svelte/internal/index.mjs
 function noop() {
 }
 function assign(tar, src) {
@@ -324,7 +324,7 @@ function outro_and_destroy_block(block, lookup) {
     lookup.delete(block.key);
   });
 }
-function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block5, next, get_context) {
+function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, lookup, node, destroy, create_each_block6, next, get_context) {
   let o = old_blocks.length;
   let n = list.length;
   let i = o;
@@ -340,7 +340,7 @@ function update_keyed_each(old_blocks, dirty, get_key, dynamic, ctx, list, looku
     const key = get_key(child_ctx);
     let block = lookup.get(key);
     if (!block) {
-      block = create_each_block5(key, child_ctx);
+      block = create_each_block6(key, child_ctx);
       block.c();
     } else if (dynamic) {
       block.p(child_ctx, dirty);
@@ -462,7 +462,7 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance59, create_fragment59, not_equal, props, append_styles, dirty = [-1]) {
+function init(component, options, instance60, create_fragment60, not_equal, props, append_styles, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -485,7 +485,7 @@ function init(component, options, instance59, create_fragment59, not_equal, prop
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance59 ? instance59(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance60 ? instance60(component, options.props || {}, (i, ret, ...rest) => {
     const value = rest.length ? rest[0] : ret;
     if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i])
@@ -498,7 +498,7 @@ function init(component, options, instance59, create_fragment59, not_equal, prop
   $$.update();
   ready = true;
   run_all($$.before_update);
-  $$.fragment = create_fragment59 ? create_fragment59($$.ctx) : false;
+  $$.fragment = create_fragment60 ? create_fragment60($$.ctx) : false;
   if (options.target) {
     if (options.hydrate) {
       start_hydrating();
@@ -3479,12 +3479,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);
               }
@@ -3492,7 +3492,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,
@@ -3505,21 +3505,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 = {
@@ -5484,7 +5484,7 @@ var ZoomControl = class extends SvelteComponent {
 };
 var ZoomControl_default = ZoomControl;
 
-// ../../node_modules/.pnpm/svelte@3.46.4/node_modules/svelte/store/index.mjs
+// ../../node_modules/.pnpm/svelte@3.46.5/node_modules/svelte/store/index.mjs
 var subscriber_queue = [];
 function writable(value, start = noop) {
   let stop;
@@ -5691,6 +5691,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([
   {
@@ -6162,8 +6166,160 @@ var StrokeColor = class extends SvelteComponent {
 };
 var StrokeColor_default = StrokeColor;
 
-// src/components/Toolbar/components/Shapes.svelte
+// src/components/Toolbar/components/TextColor.svelte
 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 = element("button");
+      span = element("span");
+      t = space();
+      attr(span, "class", "fastboard-toolbar-color-item");
+      set_style(span, "background-color", ctx[7], false);
+      attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
+      attr(button, "data-color-key", button_data_color_key_value = ctx[7]);
+      button.disabled = ctx[1];
+      toggle_class(button, "is-active", is_equal_color2(ctx[2], colors[ctx[7]]));
+      this.first = button;
+    },
+    m(target, anchor) {
+      insert(target, button, anchor);
+      append(button, span);
+      append(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])) {
+        attr(button, "class", button_class_value);
+      }
+      if (dirty & 2) {
+        button.disabled = ctx[1];
+      }
+      if (dirty & 5) {
+        toggle_class(button, "is-active", is_equal_color2(ctx[2], colors[ctx[7]]));
+      }
+    },
+    d(detaching) {
+      if (detaching)
+        detach(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 = element("div");
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].c();
+      }
+      attr(div, "class", div_class_value = "fastboard-toolbar-colors " + ctx[0]);
+    },
+    m(target, anchor) {
+      insert(target, div, anchor);
+      for (let i = 0; i < each_blocks.length; i += 1) {
+        each_blocks[i].m(div, null);
+      }
+      if (!mounted) {
+        dispose = listen(div, "click", ctx[4]);
+        mounted = true;
+      }
+    },
+    p(ctx2, [dirty]) {
+      if (dirty & 7) {
+        each_value = colorKeys;
+        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div, destroy_block, create_each_block2, null, get_each_context2);
+      }
+      if (dirty & 1 && div_class_value !== (div_class_value = "fastboard-toolbar-colors " + ctx2[0])) {
+        attr(div, "class", div_class_value);
+      }
+    },
+    i: noop,
+    o: noop,
+    d(detaching) {
+      if (detaching)
+        detach(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 = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(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 SvelteComponent {
+  constructor(options) {
+    super();
+    init(this, options, instance53, create_fragment53, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+  }
+};
+var TextColor_default = TextColor;
+
+// src/components/Toolbar/components/Shapes.svelte
+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];
@@ -6310,7 +6466,7 @@ function create_if_block5(ctx) {
     }
   };
 }
-function create_each_block2(key_1, ctx) {
+function create_each_block3(key_1, ctx) {
   let button;
   let current_block_type_index;
   let if_block;
@@ -6412,7 +6568,7 @@ function create_each_block2(key_1, ctx) {
     }
   };
 }
-function create_fragment53(ctx) {
+function create_fragment54(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6423,9 +6579,9 @@ 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() {
@@ -6450,7 +6606,7 @@ function create_fragment53(ctx) {
       if (dirty & 95) {
         each_value = shapes;
         group_outros();
-        each_blocks = update_keyed_each(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_each(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_outros();
       }
       if (!current || dirty & 1 && div_class_value !== (div_class_value = "fastboard-toolbar-shapes " + ctx2[0])) {
@@ -6504,7 +6660,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance53($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -6589,7 +6745,7 @@ function instance53($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, {
+    init(this, options, instance54, create_fragment54, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -6600,22 +6756,22 @@ var Shapes = class extends SvelteComponent {
 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 }
@@ -6624,7 +6780,7 @@ function create_if_block_7(ctx) {
     button_props = assign(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_component(button.$$.fragment);
@@ -6634,8 +6790,8 @@ function create_if_block_7(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      const button_changes = dirty[0] & 16384 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(ctx2[14])]) : {};
-      if (dirty[0] & 2 | dirty[1] & 131072) {
+      const button_changes = dirty[0] & 32768 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(ctx2[15])]) : {};
+      if (dirty[0] & 2 | dirty[1] & 262144) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -6721,7 +6877,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({
@@ -6761,10 +6917,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;
   }
@@ -6852,7 +7008,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({
@@ -6892,10 +7048,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;
   }
@@ -6983,7 +7139,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({
@@ -7023,10 +7179,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;
   }
@@ -7114,7 +7270,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({
@@ -7154,10 +7310,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;
   }
@@ -7216,7 +7372,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] } };
   }
@@ -7240,7 +7396,7 @@ function create_else_block_12(ctx) {
       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_outros();
           const old_component = switch_instance;
@@ -7281,11 +7437,11 @@ function create_else_block_12(ctx) {
     }
   };
 }
-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 }
@@ -7311,7 +7467,7 @@ function create_if_block_2(ctx) {
       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_outros();
           const old_component = switch_instance;
@@ -7357,10 +7513,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;
   }
@@ -7448,7 +7604,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({
@@ -7488,10 +7644,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;
   }
@@ -7579,6 +7735,60 @@ function create_default_slot_24(ctx) {
     }
   };
 }
+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 = assign(button_props, button_spread_levels[i]);
+  }
+  button = new Button_default({ props: button_props });
+  return {
+    c() {
+      create_component(button.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(button, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const button_changes = dirty[0] & 49664 ? get_spread_update(button_spread_levels, [
+        button_spread_levels[0],
+        dirty[0] & 32768 && get_spread_object(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_in(button.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(button.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(button, detaching);
+    }
+  };
+}
 function create_default_slot_14(ctx) {
   let icons_apps;
   let current;
@@ -7625,7 +7835,7 @@ function create_if_block6(ctx) {
       $$scope: { ctx }
     }
   });
-  button.$on("click", ctx[22]);
+  button.$on("click", ctx[23]);
   return {
     c() {
       create_component(button.$$.fragment);
@@ -7640,7 +7850,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);
@@ -7693,7 +7903,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_each_block3(ctx) {
+function create_each_block4(ctx) {
   let button;
   let img;
   let img_class_value;
@@ -7702,7 +7912,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;
@@ -7721,17 +7931,17 @@ function create_each_block3(ctx) {
       t1 = text(t1_value);
       t2 = space();
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + ctx[1]);
-      if (!src_url_equal(img.src, img_src_value = ctx[41]))
+      if (!src_url_equal(img.src, img_src_value = ctx[42]))
         attr(img, "src", img_src_value);
-      attr(img, "alt", img_alt_value = ctx[43]);
-      attr(img, "title", img_title_value = ctx[42]);
+      attr(img, "alt", img_alt_value = ctx[44]);
+      attr(img, "title", img_title_value = ctx[43]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
-      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[43] + " " + ctx[1]);
-      attr(button, "title", button_title_value = ctx[42] + (ctx[45] && ctx[45].reason ? ": " + ctx[45].reason : ""));
-      attr(button, "data-app-kind", button_data_app_kind_value = ctx[40].kind);
-      button.disabled = button_disabled_value = ctx[45] && ctx[45].status !== "idle";
-      toggle_class(button, "is-loading", ctx[45] && ctx[45].status === "loading");
-      toggle_class(button, "is-failed", ctx[45] && ctx[45].status === "failed");
+      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1]);
+      attr(button, "title", button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""));
+      attr(button, "data-app-kind", button_data_app_kind_value = ctx[41].kind);
+      button.disabled = button_disabled_value = ctx[46] && ctx[46].status !== "idle";
+      toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
+      toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -7742,8 +7952,8 @@ function create_each_block3(ctx) {
       append(button, t2);
       if (!mounted) {
         dispose = listen(button, "click", function() {
-          if (is_function(ctx[0] && ctx[44].bind(null, ctx[0])))
-            (ctx[0] && ctx[44].bind(null, ctx[0])).apply(this, arguments);
+          if (is_function(ctx[0] && ctx[45].bind(null, ctx[0])))
+            (ctx[0] && ctx[45].bind(null, ctx[0])).apply(this, arguments);
         });
         mounted = true;
       }
@@ -7753,37 +7963,37 @@ function create_each_block3(ctx) {
       if (dirty[0] & 2 && img_class_value !== (img_class_value = name5 + "-app-btn-icon " + ctx[1])) {
         attr(img, "class", img_class_value);
       }
-      if (dirty[0] & 262144 && !src_url_equal(img.src, img_src_value = ctx[41])) {
+      if (dirty[0] & 524288 && !src_url_equal(img.src, img_src_value = ctx[42])) {
         attr(img, "src", img_src_value);
       }
-      if (dirty[0] & 262144 && img_alt_value !== (img_alt_value = ctx[43])) {
+      if (dirty[0] & 524288 && img_alt_value !== (img_alt_value = ctx[44])) {
         attr(img, "alt", img_alt_value);
       }
-      if (dirty[0] & 262144 && img_title_value !== (img_title_value = ctx[42])) {
+      if (dirty[0] & 524288 && img_title_value !== (img_title_value = ctx[43])) {
         attr(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_data(t1, t1_value);
       if (dirty[0] & 2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + ctx[1])) {
         attr(span, "class", span_class_value);
       }
-      if (dirty[0] & 262146 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[43] + " " + ctx[1])) {
+      if (dirty[0] & 524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1])) {
         attr(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 : ""))) {
+      if (dirty[0] & 1572864 && button_title_value !== (button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""))) {
         attr(button, "title", button_title_value);
       }
-      if (dirty[0] & 262144 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[40].kind)) {
+      if (dirty[0] & 524288 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[41].kind)) {
         attr(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_class(button, "is-loading", ctx[45] && ctx[45].status === "loading");
+      if (dirty[0] & 1572866) {
+        toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
       }
-      if (dirty[0] & 786434) {
-        toggle_class(button, "is-failed", ctx[45] && ctx[45].status === "failed");
+      if (dirty[0] & 1572866) {
+        toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
       }
     },
     d(detaching) {
@@ -7794,7 +8004,7 @@ function create_each_block3(ctx) {
     }
   };
 }
-function create_fragment54(ctx) {
+function create_fragment55(ctx) {
   let t0;
   let div0;
   let button0;
@@ -7811,7 +8021,6 @@ function create_fragment54(ctx) {
   let t6;
   let button6;
   let t7;
-  let button7;
   let div0_class_value;
   let scrollHeight_action;
   let scrollTop_action;
@@ -7828,7 +8037,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;
@@ -7842,7 +8051,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;
@@ -7851,11 +8060,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] },
@@ -7865,11 +8074,11 @@ function create_fragment54(ctx) {
     button0_props = assign(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] },
@@ -7879,12 +8088,12 @@ function create_fragment54(ctx) {
     button1_props = assign(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] },
@@ -7894,12 +8103,12 @@ function create_fragment54(ctx) {
     button2_props = assign(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] },
@@ -7909,12 +8118,12 @@ function create_fragment54(ctx) {
     button3_props = assign(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] },
@@ -7924,8 +8133,8 @@ function create_fragment54(ctx) {
     button4_props = assign(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 }
@@ -7934,8 +8143,8 @@ function create_fragment54(ctx) {
     button5_props = assign(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 }
@@ -7944,23 +8153,9 @@ function create_fragment54(ctx) {
     button6_props = assign(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 = assign(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],
@@ -7975,7 +8170,7 @@ function create_fragment54(ctx) {
       disabled: ctx[3]
     }
   });
-  strokecolor1 = new StrokeColor_default({
+  textcolor = new TextColor_default({
     props: {
       app: ctx[0],
       theme: ctx[1],
@@ -7997,17 +8192,17 @@ 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() {
@@ -8029,10 +8224,11 @@ function create_fragment54(ctx) {
       t6 = space();
       create_component(button6.$$.fragment);
       t7 = space();
-      create_component(button7.$$.fragment);
-      t8 = space();
       if (if_block1)
         if_block1.c();
+      t8 = space();
+      if (if_block2)
+        if_block2.c();
       t9 = space();
       div8 = element("div");
       div2 = element("div");
@@ -8043,7 +8239,7 @@ function create_fragment54(ctx) {
       create_component(strokecolor0.$$.fragment);
       t12 = space();
       div3 = element("div");
-      create_component(strokecolor1.$$.fragment);
+      create_component(textcolor.$$.fragment);
       t13 = space();
       div6 = element("div");
       create_component(shapes2.$$.fragment);
@@ -8054,7 +8250,7 @@ function create_fragment54(ctx) {
       t16 = space();
       div5 = element("div");
       t17 = space();
-      create_component(strokecolor2.$$.fragment);
+      create_component(strokecolor1.$$.fragment);
       t18 = space();
       div7 = element("div");
       for (let i = 0; i < each_blocks.length; i += 1) {
@@ -8069,7 +8265,7 @@ function create_fragment54(ctx) {
       attr(div5, "class", div5_class_value = name5 + "-panel-divider");
       attr(div6, "class", div6_class_value = name5 + "-panel shapes");
       attr(div7, "class", div7_class_value = name5 + "-panel apps");
-      set_style(div7, "--n", ctx[18].length);
+      set_style(div7, "--n", ctx[19].length);
       attr(div8, "class", div8_class_value = name5 + "-panel-wrapper");
       set_style(div8, "display", "none");
     },
@@ -8092,10 +8288,11 @@ function create_fragment54(ctx) {
       append(div0, t6);
       mount_component(button6, div0, null);
       append(div0, t7);
-      mount_component(button7, div0, null);
-      insert(target, t8, anchor);
       if (if_block1)
-        if_block1.m(target, anchor);
+        if_block1.m(div0, null);
+      insert(target, t8, anchor);
+      if (if_block2)
+        if_block2.m(target, anchor);
       insert(target, t9, anchor);
       insert(target, div8, anchor);
       append(div8, div2);
@@ -8104,11 +8301,11 @@ function create_fragment54(ctx) {
       append(div2, div1);
       append(div2, t11);
       mount_component(strokecolor0, div2, null);
-      ctx[34](div2);
+      ctx[35](div2);
       append(div8, t12);
       append(div8, div3);
-      mount_component(strokecolor1, div3, null);
-      ctx[35](div3);
+      mount_component(textcolor, div3, null);
+      ctx[36](div3);
       append(div8, t13);
       append(div8, div6);
       mount_component(shapes2, div6, null);
@@ -8119,19 +8316,19 @@ function create_fragment54(ctx) {
       append(div6, t16);
       append(div6, div5);
       append(div6, t17);
-      mount_component(strokecolor2, div6, null);
-      ctx[36](div6);
+      mount_component(strokecolor1, div6, null);
+      ctx[37](div6);
       append(div8, t18);
       append(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_destroyer(scrollHeight_action = scrollHeight.call(null, div0, ctx[4])),
-          action_destroyer(scrollTop_action = scrollTop.call(null, div0, ctx[20]))
+          action_destroyer(scrollTop_action = scrollTop.call(null, div0, ctx[21]))
         ];
         mounted = true;
       }
@@ -8144,7 +8341,7 @@ function create_fragment54(ctx) {
             transition_in(if_block0, 1);
           }
         } else {
-          if_block0 = create_if_block_7(ctx2);
+          if_block0 = create_if_block_8(ctx2);
           if_block0.c();
           transition_in(if_block0, 1);
           if_block0.m(t0.parentNode, t0);
@@ -8156,99 +8353,83 @@ function create_fragment54(ctx) {
         });
         check_outros();
       }
-      const button0_changes = dirty[0] & 147456 ? get_spread_update(button0_spread_levels, [
+      const button0_changes = dirty[0] & 294912 ? get_spread_update(button0_spread_levels, [
         button0_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].clicker }
+        dirty[0] & 32768 && get_spread_object(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_update(button1_spread_levels, [
+      const button1_changes = dirty[0] & 294912 ? get_spread_update(button1_spread_levels, [
         button1_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].selector }
+        dirty[0] & 32768 && get_spread_object(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_update(button2_spread_levels, [
+      const button2_changes = dirty[0] & 296960 ? get_spread_update(button2_spread_levels, [
         button2_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].pencil },
-        dirty[0] & 1024 && { menu: ctx2[10] }
+        dirty[0] & 32768 && get_spread_object(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_update(button3_spread_levels, [
+      const button3_changes = dirty[0] & 299008 ? get_spread_update(button3_spread_levels, [
         button3_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].text },
-        dirty[0] & 2048 && { menu: ctx2[11] }
+        dirty[0] & 32768 && get_spread_object(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_update(button4_spread_levels, [
+      const button4_changes = dirty[0] & 41472 ? get_spread_update(button4_spread_levels, [
         button4_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 256 && { content: ctx2[8].shapes },
-        dirty[0] & 4096 && { menu: ctx2[12] }
+        dirty[0] & 32768 && get_spread_object(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_update(button5_spread_levels, [
+      const button5_changes = dirty[0] & 294912 ? get_spread_update(button5_spread_levels, [
         button5_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 131072 && { content: ctx2[17].eraser }
+        dirty[0] & 32768 && get_spread_object(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_update(button6_spread_levels, [
+      const button6_changes = dirty[0] & 33280 ? get_spread_update(button6_spread_levels, [
         button6_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(ctx2[14]),
-        dirty[0] & 256 && { content: ctx2[8].clear }
+        dirty[0] & 32768 && get_spread_object(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_update(button7_spread_levels, [
-        button7_spread_levels[0],
-        dirty[0] & 16384 && get_spread_object(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_function(scrollHeight_action.update) && dirty[0] & 16)
-        scrollHeight_action.update.call(null, ctx2[4]);
-      if (dirty[0] & 32) {
-        toggle_class(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_in(if_block1, 1);
           }
         } else {
-          if_block1 = create_if_block6(ctx2);
+          if_block1 = create_if_block_12(ctx2);
           if_block1.c();
           transition_in(if_block1, 1);
-          if_block1.m(t9.parentNode, t9);
+          if_block1.m(div0, null);
         }
       } else if (if_block1) {
         group_outros();
@@ -8257,6 +8438,30 @@ function create_fragment54(ctx) {
         });
         check_outros();
       }
+      if (scrollHeight_action && is_function(scrollHeight_action.update) && dirty[0] & 16)
+        scrollHeight_action.update.call(null, ctx2[4]);
+      if (dirty[0] & 32) {
+        toggle_class(div0, "scrollable", ctx2[5]);
+      }
+      if (ctx2[5]) {
+        if (if_block2) {
+          if_block2.p(ctx2, dirty);
+          if (dirty[0] & 32) {
+            transition_in(if_block2, 1);
+          }
+        } else {
+          if_block2 = create_if_block6(ctx2);
+          if_block2.c();
+          transition_in(if_block2, 1);
+          if_block2.m(t9.parentNode, t9);
+        }
+      } else if (if_block2) {
+        group_outros();
+        transition_out(if_block2, 1, 1, () => {
+          if_block2 = null;
+        });
+        check_outros();
+      }
       const strokewidth0_changes = {};
       if (dirty[0] & 1)
         strokewidth0_changes.app = ctx2[0];
@@ -8273,14 +8478,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];
@@ -8299,23 +8504,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);
           }
@@ -8325,8 +8530,8 @@ function create_fragment54(ctx) {
         }
         each_blocks.length = each_value.length;
       }
-      if (!current || dirty[0] & 262144) {
-        set_style(div7, "--n", ctx2[18].length);
+      if (!current || dirty[0] & 524288) {
+        set_style(div7, "--n", ctx2[19].length);
       }
     },
     i(local) {
@@ -8340,14 +8545,14 @@ function create_fragment54(ctx) {
       transition_in(button4.$$.fragment, local);
       transition_in(button5.$$.fragment, local);
       transition_in(button6.$$.fragment, local);
-      transition_in(button7.$$.fragment, local);
       transition_in(if_block1);
+      transition_in(if_block2);
       transition_in(strokewidth0.$$.fragment, local);
       transition_in(strokecolor0.$$.fragment, local);
-      transition_in(strokecolor1.$$.fragment, local);
+      transition_in(textcolor.$$.fragment, local);
       transition_in(shapes2.$$.fragment, local);
       transition_in(strokewidth1.$$.fragment, local);
-      transition_in(strokecolor2.$$.fragment, local);
+      transition_in(strokecolor1.$$.fragment, local);
       current = true;
     },
     o(local) {
@@ -8359,14 +8564,14 @@ function create_fragment54(ctx) {
       transition_out(button4.$$.fragment, local);
       transition_out(button5.$$.fragment, local);
       transition_out(button6.$$.fragment, local);
-      transition_out(button7.$$.fragment, local);
       transition_out(if_block1);
+      transition_out(if_block2);
       transition_out(strokewidth0.$$.fragment, local);
       transition_out(strokecolor0.$$.fragment, local);
-      transition_out(strokecolor1.$$.fragment, local);
+      transition_out(textcolor.$$.fragment, local);
       transition_out(shapes2.$$.fragment, local);
       transition_out(strokewidth1.$$.fragment, local);
-      transition_out(strokecolor2.$$.fragment, local);
+      transition_out(strokecolor1.$$.fragment, local);
       current = false;
     },
     d(detaching) {
@@ -8383,33 +8588,34 @@ function create_fragment54(ctx) {
       destroy_component(button4);
       destroy_component(button5);
       destroy_component(button6);
-      destroy_component(button7);
+      if (if_block1)
+        if_block1.d();
       if (detaching)
         detach(t8);
-      if (if_block1)
-        if_block1.d(detaching);
+      if (if_block2)
+        if_block2.d(detaching);
       if (detaching)
         detach(t9);
       if (detaching)
         detach(div8);
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[34](null);
-      destroy_component(strokecolor1);
       ctx[35](null);
+      destroy_component(textcolor);
+      ctx[36](null);
       destroy_component(shapes2);
       destroy_component(strokewidth1);
-      destroy_component(strokecolor2);
-      ctx[36](null);
-      destroy_each(each_blocks, detaching);
+      destroy_component(strokecolor1);
       ctx[37](null);
+      destroy_each(each_blocks, detaching);
+      ctx[38](null);
       mounted = false;
       run_all(dispose);
     }
   };
 }
 var name5 = "fastboard-toolbar";
-function instance54($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -8419,11 +8625,11 @@ function instance54($$self, $$props, $$invalidate) {
   let status;
   let max_scroll;
   let $top;
-  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(32, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(33, $memberState = $$value)), memberState);
+  let $scroll_height, $$unsubscribe_scroll_height = noop, $$subscribe_scroll_height = () => ($$unsubscribe_scroll_height(), $$unsubscribe_scroll_height = subscribe(scroll_height, ($$value) => $$invalidate(33, $scroll_height = $$value)), scroll_height);
+  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(34, $memberState = $$value)), memberState);
   let $apps;
-  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(19, $status = $$value)), status);
-  component_subscribe($$self, apps, ($$value) => $$invalidate(18, $apps = $$value));
+  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(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());
@@ -8435,6 +8641,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;
@@ -8442,7 +8649,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);
   }
@@ -8477,25 +8684,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) => {
@@ -8510,14 +8717,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,
@@ -8526,15 +8735,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),
@@ -8544,29 +8753,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;
     }
@@ -8578,6 +8787,7 @@ function instance54($$self, $$props, $$invalidate) {
     disabled,
     scroll_height,
     scrollable,
+    hide_apps,
     shape,
     appliance,
     t,
@@ -8615,14 +8825,15 @@ function instance54($$self, $$props, $$invalidate) {
 var Contents = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, {
+    init(this, options, instance55, create_fragment55, safe_not_equal, {
       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]);
   }
 };
@@ -8689,7 +8900,7 @@ function create_if_block7(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment56(ctx) {
   let div1;
   let div0;
   let contents;
@@ -8714,10 +8925,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) {
@@ -8741,7 +8953,7 @@ function create_fragment55(ctx) {
       path1 = svg_element("path");
       if_block.c();
       attr(div0, "class", div0_class_value = name6 + "-contents " + ctx[1]);
-      set_style(div0, "height", ctx[4] ? ctx[5] + "px" : "auto", false);
+      set_style(div0, "height", ctx[5] ? ctx[6] + "px" : "auto", false);
       attr(input, "type", "checkbox");
       attr(path0, "fill", "#fff");
       attr(path0, "stroke", "none");
@@ -8773,8 +8985,8 @@ function create_fragment55(ctx) {
       current = true;
       if (!mounted) {
         dispose = [
-          listen(input, "change", ctx[13]),
-          action_destroyer(height_action = height.call(null, div1, ctx[8]))
+          listen(input, "change", ctx[15]),
+          action_destroyer(height_action = height.call(null, div1, ctx[9]))
         ];
         mounted = true;
       }
@@ -8787,18 +8999,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])) {
         attr(div0, "class", div0_class_value);
       }
-      if (dirty & 48) {
-        set_style(div0, "height", ctx2[4] ? ctx2[5] + "px" : "auto", false);
+      if (dirty & 96) {
+        set_style(div0, "height", ctx2[5] ? ctx2[6] + "px" : "auto", false);
       }
       if (dirty & 8) {
         input.checked = ctx2[3];
@@ -8844,24 +9058,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 = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(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 = writable(0);
-  component_subscribe($$self, container_height, (value) => $$invalidate(10, $container_height = value));
+  component_subscribe($$self, container_height, (value) => $$invalidate(12, $container_height = value));
   let scroll_height = writable(0);
-  component_subscribe($$self, scroll_height, (value) => $$invalidate(11, $scroll_height = value));
+  component_subscribe($$self, scroll_height, (value) => $$invalidate(13, $scroll_height = value));
   function input_change_handler() {
     collapsed = this.checked;
     $$invalidate(3, collapsed);
@@ -8873,23 +9089,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 [
@@ -8897,12 +9120,14 @@ 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,
@@ -8912,13 +9137,18 @@ function instance55($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, { app: 0, theme: 1, language: 2 });
+    init(this, options, instance56, create_fragment56, safe_not_equal, {
+      app: 0,
+      theme: 1,
+      language: 2,
+      config: 11
+    });
   }
 };
 var Toolbar_default = Toolbar;
 
 // src/components/PlayerControl/PlayerControl.svelte
-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;
@@ -9414,7 +9644,7 @@ function create_default_slot5(ctx) {
     }
   };
 }
-function create_each_block4(key_1, ctx) {
+function create_each_block5(key_1, ctx) {
   let first;
   let button;
   let current;
@@ -9476,7 +9706,7 @@ function create_each_block4(key_1, ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment57(ctx) {
   let div0;
   let button0;
   let t0;
@@ -9529,9 +9759,9 @@ 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() {
@@ -9620,7 +9850,7 @@ function create_fragment56(ctx) {
       if (dirty & 294929) {
         each_value = speeds;
         group_outros();
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block4, null, get_each_context4);
+        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div1, outro_and_destroy_block, create_each_block5, null, get_each_context5);
         check_outros();
       }
     },
@@ -9680,7 +9910,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;
@@ -9825,7 +10055,7 @@ function instance56($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, {
+    init(this, options, instance57, create_fragment57, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -9836,7 +10066,7 @@ var PlayerControl = class extends SvelteComponent {
 var PlayerControl_default = PlayerControl;
 
 // src/components/Fastboard/ReplayFastboard.svelte
-function create_fragment57(ctx) {
+function create_fragment58(ctx) {
   let div2;
   let div0;
   let div0_class_value;
@@ -9914,7 +10144,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;
@@ -9968,7 +10198,7 @@ function instance57($$self, $$props, $$invalidate) {
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, {
+    init(this, options, instance58, create_fragment58, safe_not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -9986,7 +10216,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 {
@@ -10005,6 +10236,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) {
@@ -10151,7 +10384,7 @@ function create_if_block9(ctx) {
     }
   };
 }
-function create_fragment58(ctx) {
+function create_fragment59(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
@@ -10353,7 +10586,7 @@ function create_fragment58(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance58($$self, $$props, $$invalidate) {
+function instance59($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
@@ -10462,7 +10695,7 @@ function instance58($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, {
+    init(this, options, instance59, create_fragment59, safe_not_equal, {
       app: 0,
       theme: 1,
       language: 2,
@@ -10484,7 +10717,7 @@ function injectStyle(text2) {
 }
 
 // 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);