@netless/fastboard-ui 0.3.0-canary.4 → 0.3.0-canary.7

package/dist/index.mjs

@@ -130,6 +130,12 @@ function insert(target, node, anchor) {
 function detach(node) {
   node.parentNode.removeChild(node);
 }
+function destroy_each(iterations, detaching) {
+  for (let i = 0; i < iterations.length; i += 1) {
+    if (iterations[i])
+      iterations[i].d(detaching);
+  }
+}
 function element(name10) {
   return document.createElement(name10);
 }
@@ -193,6 +199,9 @@ function get_current_component() {
     throw new Error("Function called outside component initialization");
   return current_component;
 }
+function onMount(fn) {
+  get_current_component().$$.on_mount.push(fn);
+}
 function createEventDispatcher() {
   const component = get_current_component();
   return (type, detail) => {
@@ -3515,6 +3524,7 @@ function tippy_hide_all() {
 }
 var tippy_menu = {
   delay: 0,
+  duration: [50, 300],
   placement: "right-start",
   interactive: true,
   trigger: "click"
@@ -4803,6 +4813,7 @@ function instance48($$self, $$props, $$invalidate) {
   }
   function addPage() {
     app == null ? void 0 : app.addPage({ after: true });
+    app == null ? void 0 : app.nextPage();
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
@@ -5668,8 +5679,8 @@ var AppsInToolbar = class {
       this._listeners = this._listeners.filter((item) => item !== fn);
     };
   }
-  push(data) {
-    this._data.push(data);
+  push(...data) {
+    this._data.push(...data);
     this._listeners.forEach((fn) => fn(this._data));
   }
   insert(data, index) {
@@ -6591,14 +6602,14 @@ var Shapes_default = Shapes;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context3(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[39] = list[i];
-  const constants_0 = child_ctx[39];
-  child_ctx[40] = constants_0.icon;
-  child_ctx[41] = constants_0.label;
-  child_ctx[42] = constants_0.kind;
-  child_ctx[43] = constants_0.onClick;
-  const constants_1 = child_ctx[18] && child_ctx[18][child_ctx[42]];
-  child_ctx[44] = constants_1;
+  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;
   return child_ctx;
 }
 function create_if_block_7(ctx) {
@@ -6613,7 +6624,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[20]);
+  button.$on("click", ctx[21]);
   return {
     c() {
       create_component(button.$$.fragment);
@@ -6624,7 +6635,7 @@ function create_if_block_7(ctx) {
     },
     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] & 65536) {
+      if (dirty[0] & 2 | dirty[1] & 131072) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7614,7 +7625,7 @@ function create_if_block6(ctx) {
       $$scope: { ctx }
     }
   });
-  button.$on("click", ctx[21]);
+  button.$on("click", ctx[22]);
   return {
     c() {
       create_component(button.$$.fragment);
@@ -7629,7 +7640,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] & 65536) {
+      if (dirty[0] & 2 | dirty[1] & 131072) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7682,7 +7693,7 @@ function create_default_slot4(ctx) {
     }
   };
 }
-function create_each_block3(key_1, ctx) {
+function create_each_block3(ctx) {
   let button;
   let img;
   let img_class_value;
@@ -7691,7 +7702,7 @@ function create_each_block3(key_1, ctx) {
   let img_title_value;
   let t0;
   let span;
-  let t1_value = ctx[41] + "";
+  let t1_value = ctx[42] + "";
   let t1;
   let span_class_value;
   let t2;
@@ -7702,8 +7713,6 @@ function create_each_block3(key_1, ctx) {
   let mounted;
   let dispose;
   return {
-    key: key_1,
-    first: null,
     c() {
       button = element("button");
       img = element("img");
@@ -7712,18 +7721,17 @@ function create_each_block3(key_1, 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[40]))
+      if (!src_url_equal(img.src, img_src_value = ctx[41]))
         attr(img, "src", img_src_value);
-      attr(img, "alt", img_alt_value = ctx[42]);
-      attr(img, "title", img_title_value = ctx[41]);
+      attr(img, "alt", img_alt_value = ctx[43]);
+      attr(img, "title", img_title_value = ctx[42]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
-      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[42] + " " + ctx[1]);
-      attr(button, "title", button_title_value = ctx[41] + (ctx[44] && ctx[44].reason ? ": " + ctx[44].reason : ""));
-      attr(button, "data-app-kind", button_data_app_kind_value = ctx[39].kind);
-      button.disabled = button_disabled_value = ctx[44] && ctx[44].status !== "idle";
-      toggle_class(button, "is-loading", ctx[44] && ctx[44].status === "loading");
-      toggle_class(button, "is-failed", ctx[44] && ctx[44].status === "failed");
-      this.first = button;
+      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");
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -7734,8 +7742,8 @@ function create_each_block3(key_1, ctx) {
       append(button, t2);
       if (!mounted) {
         dispose = listen(button, "click", function() {
-          if (is_function(ctx[0] && ctx[43].bind(null, ctx[0])))
-            (ctx[0] && ctx[43].bind(null, ctx[0])).apply(this, arguments);
+          if (is_function(ctx[0] && ctx[44].bind(null, ctx[0])))
+            (ctx[0] && ctx[44].bind(null, ctx[0])).apply(this, arguments);
         });
         mounted = true;
       }
@@ -7745,23 +7753,37 @@ function create_each_block3(key_1, 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])) {
+        attr(img, "src", img_src_value);
+      }
+      if (dirty[0] & 262144 && img_alt_value !== (img_alt_value = ctx[43])) {
+        attr(img, "alt", img_alt_value);
+      }
+      if (dirty[0] & 262144 && img_title_value !== (img_title_value = ctx[42])) {
+        attr(img, "title", img_title_value);
+      }
+      if (dirty[0] & 262144 && t1_value !== (t1_value = ctx[42] + ""))
+        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] & 2 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[42] + " " + ctx[1])) {
+      if (dirty[0] & 262146 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[43] + " " + ctx[1])) {
         attr(button, "class", button_class_value);
       }
-      if (dirty[0] & 262144 && button_title_value !== (button_title_value = ctx[41] + (ctx[44] && ctx[44].reason ? ": " + ctx[44].reason : ""))) {
+      if (dirty[0] & 786432 && button_title_value !== (button_title_value = ctx[42] + (ctx[45] && ctx[45].reason ? ": " + ctx[45].reason : ""))) {
         attr(button, "title", button_title_value);
       }
-      if (dirty[0] & 262144 && button_disabled_value !== (button_disabled_value = ctx[44] && ctx[44].status !== "idle")) {
+      if (dirty[0] & 262144 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[40].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")) {
         button.disabled = button_disabled_value;
       }
-      if (dirty[0] & 262146) {
-        toggle_class(button, "is-loading", ctx[44] && ctx[44].status === "loading");
+      if (dirty[0] & 786434) {
+        toggle_class(button, "is-loading", ctx[45] && ctx[45].status === "loading");
       }
-      if (dirty[0] & 262146) {
-        toggle_class(button, "is-failed", ctx[44] && ctx[44].status === "failed");
+      if (dirty[0] & 786434) {
+        toggle_class(button, "is-failed", ctx[45] && ctx[45].status === "failed");
       }
     },
     d(detaching) {
@@ -7824,8 +7846,6 @@ function create_fragment54(ctx) {
   let div6_class_value;
   let t18;
   let div7;
-  let each_blocks = [];
-  let each_1_lookup = /* @__PURE__ */ new Map();
   let div7_class_value;
   let div8_class_value;
   let current;
@@ -7845,7 +7865,7 @@ function create_fragment54(ctx) {
     button0_props = assign(button0_props, button0_spread_levels[i]);
   }
   button0 = new Button_default({ props: button0_props });
-  button0.$on("click", ctx[22]);
+  button0.$on("click", ctx[23]);
   const button1_spread_levels = [
     { class: "selector" },
     ctx[14],
@@ -7859,7 +7879,7 @@ function create_fragment54(ctx) {
     button1_props = assign(button1_props, button1_spread_levels[i]);
   }
   button1 = new Button_default({ props: button1_props });
-  button1.$on("click", ctx[23]);
+  button1.$on("click", ctx[24]);
   const button2_spread_levels = [
     { class: "pencil" },
     ctx[14],
@@ -7874,7 +7894,7 @@ function create_fragment54(ctx) {
     button2_props = assign(button2_props, button2_spread_levels[i]);
   }
   button2 = new Button_default({ props: button2_props });
-  button2.$on("click", ctx[24]);
+  button2.$on("click", ctx[25]);
   const button3_spread_levels = [
     { class: "text" },
     ctx[14],
@@ -7889,7 +7909,7 @@ function create_fragment54(ctx) {
     button3_props = assign(button3_props, button3_spread_levels[i]);
   }
   button3 = new Button_default({ props: button3_props });
-  button3.$on("click", ctx[25]);
+  button3.$on("click", ctx[26]);
   const button4_spread_levels = [
     { class: "shapes" },
     ctx[14],
@@ -7904,7 +7924,7 @@ function create_fragment54(ctx) {
     button4_props = assign(button4_props, button4_spread_levels[i]);
   }
   button4 = new Button_default({ props: button4_props });
-  button4.$on("click", ctx[26]);
+  button4.$on("click", ctx[27]);
   const button5_spread_levels = [{ class: "eraser" }, ctx[14], { content: ctx[17].eraser }];
   let button5_props = {
     $$slots: { default: [create_default_slot_34] },
@@ -7914,7 +7934,7 @@ function create_fragment54(ctx) {
     button5_props = assign(button5_props, button5_spread_levels[i]);
   }
   button5 = new Button_default({ props: button5_props });
-  button5.$on("click", ctx[27]);
+  button5.$on("click", ctx[28]);
   const button6_spread_levels = [{ class: "clear" }, ctx[14], { content: ctx[8].clear }];
   let button6_props = {
     $$slots: { default: [create_default_slot_24] },
@@ -7924,7 +7944,7 @@ function create_fragment54(ctx) {
     button6_props = assign(button6_props, button6_spread_levels[i]);
   }
   button6 = new Button_default({ props: button6_props });
-  button6.$on("click", ctx[28]);
+  button6.$on("click", ctx[29]);
   const button7_spread_levels = [
     { class: "apps" },
     ctx[14],
@@ -7984,12 +8004,10 @@ function create_fragment54(ctx) {
       disabled: ctx[3]
     }
   });
-  let each_value = apps.data;
-  const get_key = (ctx2) => ctx2[39].kind;
+  let each_value = ctx[18];
+  let each_blocks = [];
   for (let i = 0; i < each_value.length; i += 1) {
-    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_block3(key, child_ctx));
+    each_blocks[i] = create_each_block3(get_each_context3(ctx, each_value, i));
   }
   return {
     c() {
@@ -8051,6 +8069,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);
       attr(div8, "class", div8_class_value = name5 + "-panel-wrapper");
       set_style(div8, "display", "none");
     },
@@ -8085,11 +8104,11 @@ function create_fragment54(ctx) {
       append(div2, div1);
       append(div2, t11);
       mount_component(strokecolor0, div2, null);
-      ctx[33](div2);
+      ctx[34](div2);
       append(div8, t12);
       append(div8, div3);
       mount_component(strokecolor1, div3, null);
-      ctx[34](div3);
+      ctx[35](div3);
       append(div8, t13);
       append(div8, div6);
       mount_component(shapes2, div6, null);
@@ -8101,18 +8120,18 @@ function create_fragment54(ctx) {
       append(div6, div5);
       append(div6, t17);
       mount_component(strokecolor2, div6, null);
-      ctx[35](div6);
+      ctx[36](div6);
       append(div8, t18);
       append(div8, div7);
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(div7, null);
       }
-      ctx[36](div7);
+      ctx[37](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[19]))
+          action_destroyer(scrollTop_action = scrollTop.call(null, div0, ctx[20]))
         ];
         mounted = true;
       }
@@ -8142,7 +8161,7 @@ function create_fragment54(ctx) {
         dirty[0] & 16384 && get_spread_object(ctx2[14]),
         dirty[0] & 131072 && { content: ctx2[17].clicker }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 65536) {
+      if (dirty[0] & 130 | dirty[1] & 131072) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
@@ -8151,7 +8170,7 @@ function create_fragment54(ctx) {
         dirty[0] & 16384 && get_spread_object(ctx2[14]),
         dirty[0] & 131072 && { content: ctx2[17].selector }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 65536) {
+      if (dirty[0] & 130 | dirty[1] & 131072) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
@@ -8161,7 +8180,7 @@ function create_fragment54(ctx) {
         dirty[0] & 131072 && { content: ctx2[17].pencil },
         dirty[0] & 1024 && { menu: ctx2[10] }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 65536) {
+      if (dirty[0] & 130 | dirty[1] & 131072) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
@@ -8171,7 +8190,7 @@ function create_fragment54(ctx) {
         dirty[0] & 131072 && { content: ctx2[17].text },
         dirty[0] & 2048 && { menu: ctx2[11] }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 65536) {
+      if (dirty[0] & 130 | dirty[1] & 131072) {
         button3_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button3.$set(button3_changes);
@@ -8181,7 +8200,7 @@ function create_fragment54(ctx) {
         dirty[0] & 256 && { content: ctx2[8].shapes },
         dirty[0] & 4096 && { menu: ctx2[12] }
       ]) : {};
-      if (dirty[0] & 706 | dirty[1] & 65536) {
+      if (dirty[0] & 706 | dirty[1] & 131072) {
         button4_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button4.$set(button4_changes);
@@ -8190,7 +8209,7 @@ function create_fragment54(ctx) {
         dirty[0] & 16384 && get_spread_object(ctx2[14]),
         dirty[0] & 131072 && { content: ctx2[17].eraser }
       ]) : {};
-      if (dirty[0] & 130 | dirty[1] & 65536) {
+      if (dirty[0] & 130 | dirty[1] & 131072) {
         button5_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button5.$set(button5_changes);
@@ -8199,7 +8218,7 @@ function create_fragment54(ctx) {
         dirty[0] & 16384 && get_spread_object(ctx2[14]),
         dirty[0] & 256 && { content: ctx2[8].clear }
       ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 65536) {
+      if (dirty[0] & 2 | dirty[1] & 131072) {
         button6_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button6.$set(button6_changes);
@@ -8210,7 +8229,7 @@ function create_fragment54(ctx) {
         dirty[0] & 8192 && { menu: ctx2[13] },
         button7_spread_levels[4]
       ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 65536) {
+      if (dirty[0] & 2 | dirty[1] & 131072) {
         button7_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button7.$set(button7_changes);
@@ -8288,9 +8307,26 @@ function create_fragment54(ctx) {
       if (dirty[0] & 8)
         strokecolor2_changes.disabled = ctx2[3];
       strokecolor2.$set(strokecolor2_changes);
-      if (dirty[0] & 262147) {
-        each_value = apps.data;
-        each_blocks = update_keyed_each(each_blocks, dirty, get_key, 1, ctx2, each_value, each_1_lookup, div7, destroy_block, create_each_block3, null, get_each_context3);
+      if (dirty[0] & 786435) {
+        each_value = ctx2[18];
+        let i;
+        for (i = 0; i < each_value.length; i += 1) {
+          const child_ctx = get_each_context3(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].c();
+            each_blocks[i].m(div7, null);
+          }
+        }
+        for (; i < each_blocks.length; i += 1) {
+          each_blocks[i].d(1);
+        }
+        each_blocks.length = each_value.length;
+      }
+      if (!current || dirty[0] & 262144) {
+        set_style(div7, "--n", ctx2[18].length);
       }
     },
     i(local) {
@@ -8358,17 +8394,15 @@ function create_fragment54(ctx) {
         detach(div8);
       destroy_component(strokewidth0);
       destroy_component(strokecolor0);
-      ctx[33](null);
-      destroy_component(strokecolor1);
       ctx[34](null);
+      destroy_component(strokecolor1);
+      ctx[35](null);
       destroy_component(shapes2);
       destroy_component(strokewidth1);
       destroy_component(strokecolor2);
-      ctx[35](null);
-      for (let i = 0; i < each_blocks.length; i += 1) {
-        each_blocks[i].d();
-      }
       ctx[36](null);
+      destroy_each(each_blocks, detaching);
+      ctx[37](null);
       mounted = false;
       run_all(dispose);
     }
@@ -8385,9 +8419,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(31, $scroll_height = $$value)), scroll_height);
-  let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(32, $memberState = $$value)), memberState);
-  let $status, $$unsubscribe_status = noop, $$subscribe_status = () => ($$unsubscribe_status(), $$unsubscribe_status = subscribe(status, ($$value) => $$invalidate(18, $status = $$value)), status);
+  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 $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));
   $$self.$$.on_destroy.push(() => $$unsubscribe_scroll_height());
   $$self.$$.on_destroy.push(() => $$unsubscribe_memberState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_status());
@@ -8406,7 +8442,7 @@ function instance54($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(38, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(39, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -8474,7 +8510,7 @@ 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(29, computed_height = $$props2.computed_height);
+      $$invalidate(30, computed_height = $$props2.computed_height);
     if ("scrollable" in $$props2)
       $$invalidate(5, scrollable = $$props2.scrollable);
   };
@@ -8494,9 +8530,9 @@ function instance54($$self, $$props, $$invalidate) {
     }
     if ($$self.$$.dirty[0] & 1) {
       $:
-        $$invalidate(30, hotkeys = app == null ? void 0 : app.hotKeys);
+        $$invalidate(31, hotkeys = app == null ? void 0 : app.hotKeys);
     }
-    if ($$self.$$.dirty[0] & 1073742080) {
+    if ($$self.$$.dirty[0] & 256 | $$self.$$.dirty[1] & 1) {
       $:
         $$invalidate(17, c = {
           clicker: tooltip(t.clicker, hotkeys == null ? void 0 : hotkeys.changeToClick),
@@ -8510,11 +8546,11 @@ function instance54($$self, $$props, $$invalidate) {
       $:
         $$subscribe_memberState($$invalidate(16, memberState = app == null ? void 0 : app.memberState));
     }
-    if ($$self.$$.dirty[1] & 2) {
+    if ($$self.$$.dirty[1] & 4) {
       $:
         $$invalidate(7, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
-    if ($$self.$$.dirty[1] & 2) {
+    if ($$self.$$.dirty[1] & 4) {
       $:
         $$invalidate(6, shape = $memberState == null ? void 0 : $memberState.shapeType);
     }
@@ -8522,10 +8558,6 @@ function instance54($$self, $$props, $$invalidate) {
       $:
         $$subscribe_status($$invalidate(15, status = app == null ? void 0 : app.appsStatus));
     }
-    if ($$self.$$.dirty[0] & 536870944 | $$self.$$.dirty[1] & 1) {
-      $:
-        max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
-    }
     if ($$self.$$.dirty[0] & 192) {
       $:
         if (applianceShapes.includes(appliance)) {
@@ -8534,6 +8566,10 @@ function instance54($$self, $$props, $$invalidate) {
           $$invalidate(9, last_shape = shape);
         }
     }
+    if ($$self.$$.dirty[0] & 1073741856 | $$self.$$.dirty[1] & 2) {
+      $:
+        max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
+    }
   };
   return [
     app,
@@ -8554,6 +8590,7 @@ function instance54($$self, $$props, $$invalidate) {
     status,
     memberState,
     c,
+    $apps,
     $status,
     top,
     scroll_up,
@@ -8584,7 +8621,7 @@ var Contents = class extends SvelteComponent {
       language: 2,
       disabled: 3,
       scroll_height: 4,
-      computed_height: 29,
+      computed_height: 30,
       scrollable: 5
     }, null, [-1, -1]);
   }
@@ -9329,13 +9366,14 @@ function create_if_block8(ctx) {
 }
 function create_default_slot_15(ctx) {
   let span;
+  let t0_value = (ctx[15] || 1) + "";
   let t0;
   let t1;
   let span_class_value;
   return {
     c() {
       span = element("span");
-      t0 = text(ctx[15]);
+      t0 = text(t0_value);
       t1 = text("x");
       attr(span, "class", span_class_value = name7 + "-speed-text");
     },
@@ -9345,8 +9383,8 @@ function create_default_slot_15(ctx) {
       append(span, t1);
     },
     p(ctx2, dirty) {
-      if (dirty & 32768)
-        set_data(t0, ctx2[15]);
+      if (dirty & 32768 && t0_value !== (t0_value = (ctx2[15] || 1) + ""))
+        set_data(t0, t0_value);
     },
     d(detaching) {
       if (detaching)
@@ -9882,6 +9920,15 @@ function instance57($$self, $$props, $$invalidate) {
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef)
+          containerRef(null);
+      };
+    }
+  });
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -9901,13 +9948,19 @@ function instance57($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       $:
-        if (player && container)
-          player.bindContainer(container);
+        try {
+          if (player && container)
+            player.bindContainer(container);
+        } catch (err) {
+          console.error("[fastboard] An error occurred while binding container");
+          console.error(err);
+        }
     }
-    if ($$self.$$.dirty & 24) {
+    if ($$self.$$.dirty & 3) {
       $:
-        if (containerRef)
-          containerRef(container || null);
+        if (player && theme) {
+          player.manager.setPrefersColorScheme(theme);
+        }
     }
   };
   return [player, theme, language, container, containerRef, div0_binding];
@@ -10092,6 +10145,15 @@ function instance58($$self, $$props, $$invalidate) {
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
+  onMount(() => {
+    if (containerRef) {
+      containerRef(container);
+      return () => {
+        if (containerRef)
+          containerRef(null);
+      };
+    }
+  });
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10111,13 +10173,19 @@ function instance58($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
       $:
-        if (app && container)
-          app.bindContainer(container);
+        try {
+          if (app && container)
+            app.bindContainer(container);
+        } catch (err) {
+          console.error("[fastboard] An error occurred while binding container");
+          console.error(err);
+        }
     }
-    if ($$self.$$.dirty & 24) {
+    if ($$self.$$.dirty & 3) {
       $:
-        if (containerRef)
-          containerRef(container || null);
+        if (app && theme) {
+          app.manager.setPrefersColorScheme(theme);
+        }
     }
   };
   return [app, theme, language, container, containerRef, div0_binding];
@@ -10146,7 +10214,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;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;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;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;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)}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;cursor:pointer}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer}.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;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(3,1fr);gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;padding:4px;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;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}.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}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.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;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;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;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;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)}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;cursor:pointer}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer}.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;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}.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}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.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);