npm - @netless/fastboard-ui - Versions diffs - 0.3.3 → 0.3.4-canary.2 - Mend

@netless/fastboard-ui 0.3.3 → 0.3.4-canary.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/dist/index.d.ts +30 -1
package/dist/index.js +422 -544
package/dist/index.js.map +1 -1
package/dist/index.mjs +421 -556
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +2433 -3500
package/dist/index.svelte.mjs.map +1 -1
package/package.json +3 -3
package/src/behaviors/apps.ts +12 -3
package/src/components/Fastboard/Fastboard.svelte +8 -2
package/src/components/Fastboard/ReplayFastboard.svelte +8 -2
package/src/components/Icons/Clear.svelte +15 -1
package/src/components/Icons/index.ts +0 -2
package/src/helpers/index.ts +94 -0
package/src/index.ts +1 -0
package/src/components/Icons/Clean.svelte +0 -14

package/dist/index.js CHANGED Viewed

@@ -1,3 +1,5 @@
+'use strict';
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -46,7 +48,9 @@ __export(src_exports, {
   ReplayFastboard: () => ReplayFastboard_default,
   Toolbar: () => Toolbar_default,
   ZoomControl: () => ZoomControl_default,
-  apps: () => apps
+  apps: () => apps,
+  createReplayUI: () => createReplayUI,
+  createUI: () => createUI
 });
 module.exports = __toCommonJS(src_exports);
@@ -81,6 +85,9 @@ function src_url_equal(element_src, url) {
   src_url_equal_anchor.href = url;
   return element_src === src_url_equal_anchor.href;
 }
+function not_equal(a, b) {
+  return a != a ? b == b : a !== b;
+}
 function is_empty(obj) {
   return Object.keys(obj).length === 0;
 }
@@ -146,13 +153,6 @@ function action_destroyer(action_result) {
   return action_result && is_function(action_result.destroy) ? action_result.destroy : noop;
 }
 var is_client = typeof window !== "undefined";
-var is_hydrating = false;
-function start_hydrating() {
-  is_hydrating = true;
-}
-function end_hydrating() {
-  is_hydrating = false;
-}
 function append(target, node) {
   target.appendChild(node);
 }
@@ -348,7 +348,6 @@ function transition_out(block, local, detach2, callback) {
     block.o(local);
   }
 }
-var globals = typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : global;
 function destroy_block(block, lookup) {
   block.d(1);
   lookup.delete(block.key);
@@ -496,7 +495,7 @@ function make_dirty(component, i) {
   }
   component.$$.dirty[i / 31 | 0] |= 1 << i % 31;
 }
-function init(component, options, instance60, create_fragment60, not_equal, props, append_styles, dirty = [-1]) {
+function init(component, options, instance59, create_fragment59, not_equal2, props, append_styles, dirty = [-1]) {
   const parent_component = current_component;
   set_current_component(component);
   const $$ = component.$$ = {
@@ -504,7 +503,7 @@ function init(component, options, instance60, create_fragment60, not_equal, prop
     ctx: null,
     props,
     update: noop,
-    not_equal,
+    not_equal: not_equal2,
     bound: blank_object(),
     on_mount: [],
     on_destroy: [],
@@ -519,9 +518,9 @@ function init(component, options, instance60, create_fragment60, not_equal, prop
   };
   append_styles && append_styles($$.root);
   let ready = false;
-  $$.ctx = instance60 ? instance60(component, options.props || {}, (i, ret, ...rest) => {
+  $$.ctx = instance59 ? instance59(component, options.props || {}, (i, ret, ...rest) => {
     const value = rest.length ? rest[0] : ret;
-    if ($$.ctx && not_equal($$.ctx[i], $$.ctx[i] = value)) {
+    if ($$.ctx && not_equal2($$.ctx[i], $$.ctx[i] = value)) {
       if (!$$.skip_bound && $$.bound[i])
         $$.bound[i](value);
       if (ready)
@@ -532,10 +531,9 @@ function init(component, options, instance60, create_fragment60, not_equal, prop
   $$.update();
   ready = true;
   run_all($$.before_update);
-  $$.fragment = create_fragment60 ? create_fragment60($$.ctx) : false;
+  $$.fragment = create_fragment59 ? create_fragment59($$.ctx) : false;
   if (options.target) {
     if (options.hydrate) {
-      start_hydrating();
       const nodes = children(options.target);
       $$.fragment && $$.fragment.l(nodes);
       nodes.forEach(detach);
@@ -545,53 +543,10 @@ function init(component, options, instance60, create_fragment60, not_equal, prop
     if (options.intro)
       transition_in(component.$$.fragment);
     mount_component(component, options.target, options.anchor, options.customElement);
-    end_hydrating();
     flush();
   }
   set_current_component(parent_component);
 }
-var SvelteElement;
-if (typeof HTMLElement === "function") {
-  SvelteElement = class extends HTMLElement {
-    constructor() {
-      super();
-      this.attachShadow({ mode: "open" });
-    }
-    connectedCallback() {
-      const { on_mount } = this.$$;
-      this.$$.on_disconnect = on_mount.map(run).filter(is_function);
-      for (const key in this.$$.slotted) {
-        this.appendChild(this.$$.slotted[key]);
-      }
-    }
-    attributeChangedCallback(attr2, _oldValue, newValue) {
-      this[attr2] = newValue;
-    }
-    disconnectedCallback() {
-      run_all(this.$$.on_disconnect);
-    }
-    $destroy() {
-      destroy_component(this, 1);
-      this.$destroy = noop;
-    }
-    $on(type, callback) {
-      const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
-      callbacks.push(callback);
-      return () => {
-        const index = callbacks.indexOf(callback);
-        if (index !== -1)
-          callbacks.splice(index, 1);
-      };
-    }
-    $set($$props) {
-      if (this.$$set && !is_empty($$props)) {
-        this.$$.skip_bound = true;
-        this.$$set($$props);
-        this.$$.skip_bound = false;
-      }
-    }
-  };
-}
 var SvelteComponent = class {
   $destroy() {
     destroy_component(this, 1);
@@ -700,7 +655,7 @@ function create_fragment(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type(ctx, -1);
+  current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -714,7 +669,7 @@ function create_fragment(ctx) {
     },
     p(ctx2, [dirty]) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type(ctx2, dirty);
+      current_block_type_index = select_block_type(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -1232,18 +1187,34 @@ var CircleBolded = class extends SvelteComponent {
 };
 var CircleBolded_default = CircleBolded;
-// src/components/Icons/Clean.svelte
+// src/components/Icons/Clear.svelte
 function create_fragment9(ctx) {
   let svg;
-  let path;
+  let path0;
+  let path1;
+  let path2;
   let svg_class_value;
   return {
     c() {
       svg = svg_element("svg");
-      path = svg_element("path");
-      attr(path, "fill", "#5D6066");
-      attr(path, "d", "M9.754 11.99c0 1.856-.711 3.62-1.96 4.951l-.151.155h1.403l.855-.853h.707l.853.853h2.635l.094-.064a6.237 6.237 0 0 0 2.559-4.781l.005-.26h1a7.237 7.237 0 0 1-2.994 5.862l-.229.16-.277.083h-3l-.353-.146-.647-.647-.646.647-.354.146h-3l-.286-.91.214-.148a6.237 6.237 0 0 0 2.567-4.787l.005-.26h1Zm4.772-6.502v2l.35.039a2.98 2.98 0 0 1 2.644 2.78l.006.181h-8a2.98 2.98 0 0 1 2.65-2.961l.35-.039v-2h2Z");
-      attr(path, "class", "fastboard-icon-fill-color");
+      path0 = svg_element("path");
+      path1 = svg_element("path");
+      path2 = svg_element("path");
+      attr(path0, "d", "M19.6567 4.34323L13.9999 10.0001");
+      attr(path0, "stroke", "#5D6066");
+      attr(path0, "stroke-width", "1.25");
+      attr(path0, "stroke-linejoin", "round");
+      attr(path0, "class", "fastboard-icon-stroke-color");
+      attr(path1, "d", "M8.34296 10.0001C9.90506 8.43799 12.4377 8.43799 13.9998 10.0001V10.0001C15.5619 11.5622 15.5619 14.0948 13.9998 15.6569V15.6569L8.34296 10.0001V10.0001Z");
+      attr(path1, "stroke", "#5D6066");
+      attr(path1, "stroke-width", "1.25");
+      attr(path1, "stroke-linejoin", "round");
+      attr(path1, "class", "fastboard-icon-stroke-color");
+      attr(path2, "d", "M8.34292 10.0001L13.9998 15.6569L11.5856 19.8996L4.10028 11.4143L8.34292 10.0001Z");
+      attr(path2, "stroke", "#5D6066");
+      attr(path2, "stroke-width", "1.25");
+      attr(path2, "stroke-linejoin", "round");
+      attr(path2, "class", "fastboard-icon-stroke-color");
       attr(svg, "fill", "none");
       attr(svg, "viewBox", "0 0 24 24");
       attr(svg, "class", svg_class_value = "fastboard-icon " + ctx[0]);
@@ -1251,7 +1222,9 @@ function create_fragment9(ctx) {
     },
     m(target, anchor) {
       insert(target, svg, anchor);
-      append(svg, path);
+      append(svg, path0);
+      append(svg, path1);
+      append(svg, path2);
     },
     p(ctx2, [dirty]) {
       if (dirty & 1 && svg_class_value !== (svg_class_value = "fastboard-icon " + ctx2[0])) {
@@ -1280,74 +1253,16 @@ function instance9($$self, $$props, $$invalidate) {
   };
   return [theme, active];
 }
-var Clean = class extends SvelteComponent {
-  constructor(options) {
-    super();
-    init(this, options, instance9, create_fragment9, safe_not_equal, { theme: 0, active: 1 });
-  }
-};
-var Clean_default = Clean;
-// src/components/Icons/Clear.svelte
-function create_fragment10(ctx) {
-  let svg;
-  let path;
-  let svg_class_value;
-  return {
-    c() {
-      svg = svg_element("svg");
-      path = svg_element("path");
-      attr(path, "stroke", "#5D6066");
-      attr(path, "stroke-linejoin", "round");
-      attr(path, "stroke-width", "1.25");
-      attr(path, "d", "m17.95 4.636-2.83 2.828-1.413-1.414a2 2 0 0 0-2.829 0l-.707.707 7.071 7.071.707-.707a2 2 0 0 0 0-2.828l-1.414-1.414 2.829-2.829-1.415-1.414Zm-1.415 9.9-5.656 5.656-.707-.707 1.767-3.182-3.182 1.768.707-2.121-2.121.707 1.768-3.182-3.182 1.768.707-2.122-2.121.707-.707-.707 5.656-5.657");
-      attr(path, "class", "fastboard-icon-stroke-color");
-      attr(svg, "fill", "none");
-      attr(svg, "viewBox", "0 0 24 24");
-      attr(svg, "class", svg_class_value = "fastboard-icon " + ctx[0]);
-      toggle_class(svg, "is-active", ctx[1]);
-    },
-    m(target, anchor) {
-      insert(target, svg, anchor);
-      append(svg, path);
-    },
-    p(ctx2, [dirty]) {
-      if (dirty & 1 && svg_class_value !== (svg_class_value = "fastboard-icon " + ctx2[0])) {
-        attr(svg, "class", svg_class_value);
-      }
-      if (dirty & 3) {
-        toggle_class(svg, "is-active", ctx2[1]);
-      }
-    },
-    i: noop,
-    o: noop,
-    d(detaching) {
-      if (detaching)
-        detach(svg);
-    }
-  };
-}
-function instance10($$self, $$props, $$invalidate) {
-  let { theme = "light" } = $$props;
-  let { active = false } = $$props;
-  $$self.$$set = ($$props2) => {
-    if ("theme" in $$props2)
-      $$invalidate(0, theme = $$props2.theme);
-    if ("active" in $$props2)
-      $$invalidate(1, active = $$props2.active);
-  };
-  return [theme, active];
-}
 var Clear = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance10, create_fragment10, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance9, create_fragment9, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Clear_default = Clear;
 // src/components/Icons/Click.svelte
-function create_fragment11(ctx) {
+function create_fragment10(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1385,7 +1300,7 @@ function create_fragment11(ctx) {
     }
   };
 }
-function instance11($$self, $$props, $$invalidate) {
+function instance10($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1399,13 +1314,13 @@ function instance11($$self, $$props, $$invalidate) {
 var Click = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance11, create_fragment11, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance10, create_fragment10, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Click_default = Click;
 // src/components/Icons/ClickFilled.svelte
-function create_fragment12(ctx) {
+function create_fragment11(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1441,7 +1356,7 @@ function create_fragment12(ctx) {
     }
   };
 }
-function instance12($$self, $$props, $$invalidate) {
+function instance11($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1455,13 +1370,13 @@ function instance12($$self, $$props, $$invalidate) {
 var ClickFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance12, create_fragment12, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance11, create_fragment11, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var ClickFilled_default = ClickFilled;
 // src/components/Icons/Diamond.svelte
-function create_fragment13(ctx) {
+function create_fragment12(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1499,7 +1414,7 @@ function create_fragment13(ctx) {
     }
   };
 }
-function instance13($$self, $$props, $$invalidate) {
+function instance12($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1513,13 +1428,13 @@ function instance13($$self, $$props, $$invalidate) {
 var Diamond = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance13, create_fragment13, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance12, create_fragment12, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Diamond_default = Diamond;
 // src/components/Icons/Down.svelte
-function create_fragment14(ctx) {
+function create_fragment13(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1557,7 +1472,7 @@ function create_fragment14(ctx) {
     }
   };
 }
-function instance14($$self, $$props, $$invalidate) {
+function instance13($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1571,13 +1486,13 @@ function instance14($$self, $$props, $$invalidate) {
 var Down = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance14, create_fragment14, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance13, create_fragment13, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Down_default = Down;
 // src/components/Icons/Eraser.svelte
-function create_fragment15(ctx) {
+function create_fragment14(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1615,7 +1530,7 @@ function create_fragment15(ctx) {
     }
   };
 }
-function instance15($$self, $$props, $$invalidate) {
+function instance14($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1629,13 +1544,13 @@ function instance15($$self, $$props, $$invalidate) {
 var Eraser = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance15, create_fragment15, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance14, create_fragment14, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Eraser_default = Eraser;
 // src/components/Icons/EraserFilled.svelte
-function create_fragment16(ctx) {
+function create_fragment15(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1673,7 +1588,7 @@ function create_fragment16(ctx) {
     }
   };
 }
-function instance16($$self, $$props, $$invalidate) {
+function instance15($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1687,13 +1602,13 @@ function instance16($$self, $$props, $$invalidate) {
 var EraserFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance16, create_fragment16, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance15, create_fragment15, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var EraserFilled_default = EraserFilled;
 // src/components/Icons/Left.svelte
-function create_fragment17(ctx) {
+function create_fragment16(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1731,7 +1646,7 @@ function create_fragment17(ctx) {
     }
   };
 }
-function instance17($$self, $$props, $$invalidate) {
+function instance16($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1745,13 +1660,13 @@ function instance17($$self, $$props, $$invalidate) {
 var Left = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance17, create_fragment17, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance16, create_fragment16, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Left_default = Left;
 // src/components/Icons/Line.svelte
-function create_fragment18(ctx) {
+function create_fragment17(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1789,7 +1704,7 @@ function create_fragment18(ctx) {
     }
   };
 }
-function instance18($$self, $$props, $$invalidate) {
+function instance17($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1803,13 +1718,13 @@ function instance18($$self, $$props, $$invalidate) {
 var Line = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance18, create_fragment18, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance17, create_fragment17, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Line_default = Line;
 // src/components/Icons/LineBolded.svelte
-function create_fragment19(ctx) {
+function create_fragment18(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1847,7 +1762,7 @@ function create_fragment19(ctx) {
     }
   };
 }
-function instance19($$self, $$props, $$invalidate) {
+function instance18($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1861,13 +1776,13 @@ function instance19($$self, $$props, $$invalidate) {
 var LineBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance19, create_fragment19, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance18, create_fragment18, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var LineBolded_default = LineBolded;
 // src/components/Icons/Minus.svelte
-function create_fragment20(ctx) {
+function create_fragment19(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -1905,7 +1820,7 @@ function create_fragment20(ctx) {
     }
   };
 }
-function instance20($$self, $$props, $$invalidate) {
+function instance19($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1919,13 +1834,13 @@ function instance20($$self, $$props, $$invalidate) {
 var Minus = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance20, create_fragment20, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance19, create_fragment19, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Minus_default = Minus;
 // src/components/Icons/Pencil.svelte
-function create_fragment21(ctx) {
+function create_fragment20(ctx) {
   let svg;
   let path0;
   let path1;
@@ -1978,7 +1893,7 @@ function create_fragment21(ctx) {
     }
   };
 }
-function instance21($$self, $$props, $$invalidate) {
+function instance20($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -1992,13 +1907,13 @@ function instance21($$self, $$props, $$invalidate) {
 var Pencil = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance21, create_fragment21, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance20, create_fragment20, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Pencil_default = Pencil;
 // src/components/Icons/PencilFilled.svelte
-function create_fragment22(ctx) {
+function create_fragment21(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2036,7 +1951,7 @@ function create_fragment22(ctx) {
     }
   };
 }
-function instance22($$self, $$props, $$invalidate) {
+function instance21($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2050,13 +1965,13 @@ function instance22($$self, $$props, $$invalidate) {
 var PencilFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance22, create_fragment22, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance21, create_fragment21, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var PencilFilled_default = PencilFilled;
 // src/components/Icons/Plus.svelte
-function create_fragment23(ctx) {
+function create_fragment22(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2094,7 +2009,7 @@ function create_fragment23(ctx) {
     }
   };
 }
-function instance23($$self, $$props, $$invalidate) {
+function instance22($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2108,13 +2023,13 @@ function instance23($$self, $$props, $$invalidate) {
 var Plus = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance23, create_fragment23, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance22, create_fragment22, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Plus_default = Plus;
 // src/components/Icons/Rectangle.svelte
-function create_fragment24(ctx) {
+function create_fragment23(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2152,7 +2067,7 @@ function create_fragment24(ctx) {
     }
   };
 }
-function instance24($$self, $$props, $$invalidate) {
+function instance23($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2166,13 +2081,13 @@ function instance24($$self, $$props, $$invalidate) {
 var Rectangle = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance24, create_fragment24, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance23, create_fragment23, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Rectangle_default = Rectangle;
 // src/components/Icons/RectangleBolded.svelte
-function create_fragment25(ctx) {
+function create_fragment24(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2210,7 +2125,7 @@ function create_fragment25(ctx) {
     }
   };
 }
-function instance25($$self, $$props, $$invalidate) {
+function instance24($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2224,13 +2139,13 @@ function instance25($$self, $$props, $$invalidate) {
 var RectangleBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance25, create_fragment25, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance24, create_fragment24, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var RectangleBolded_default = RectangleBolded;
 // src/components/Icons/Redo.svelte
-function create_fragment26(ctx) {
+function create_fragment25(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2272,7 +2187,7 @@ function create_fragment26(ctx) {
     }
   };
 }
-function instance26($$self, $$props, $$invalidate) {
+function instance25($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2286,13 +2201,13 @@ function instance26($$self, $$props, $$invalidate) {
 var Redo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance26, create_fragment26, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance25, create_fragment25, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Redo_default = Redo;
 // src/components/Icons/Reset.svelte
-function create_fragment27(ctx) {
+function create_fragment26(ctx) {
   let svg;
   let circle0;
   let path;
@@ -2348,7 +2263,7 @@ function create_fragment27(ctx) {
     }
   };
 }
-function instance27($$self, $$props, $$invalidate) {
+function instance26($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2362,13 +2277,13 @@ function instance27($$self, $$props, $$invalidate) {
 var Reset = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance27, create_fragment27, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance26, create_fragment26, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Reset_default = Reset;
 // src/components/Icons/Rhombus.svelte
-function create_fragment28(ctx) {
+function create_fragment27(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2406,7 +2321,7 @@ function create_fragment28(ctx) {
     }
   };
 }
-function instance28($$self, $$props, $$invalidate) {
+function instance27($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2420,13 +2335,13 @@ function instance28($$self, $$props, $$invalidate) {
 var Rhombus = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance28, create_fragment28, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance27, create_fragment27, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Rhombus_default = Rhombus;
 // src/components/Icons/RhombusBolded.svelte
-function create_fragment29(ctx) {
+function create_fragment28(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2464,7 +2379,7 @@ function create_fragment29(ctx) {
     }
   };
 }
-function instance29($$self, $$props, $$invalidate) {
+function instance28($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2478,13 +2393,13 @@ function instance29($$self, $$props, $$invalidate) {
 var RhombusBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance29, create_fragment29, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance28, create_fragment28, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var RhombusBolded_default = RhombusBolded;
 // src/components/Icons/Right.svelte
-function create_fragment30(ctx) {
+function create_fragment29(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2522,7 +2437,7 @@ function create_fragment30(ctx) {
     }
   };
 }
-function instance30($$self, $$props, $$invalidate) {
+function instance29($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2536,13 +2451,13 @@ function instance30($$self, $$props, $$invalidate) {
 var Right = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance30, create_fragment30, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance29, create_fragment29, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Right_default = Right;
 // src/components/Icons/Selector.svelte
-function create_fragment31(ctx) {
+function create_fragment30(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2589,7 +2504,7 @@ function create_fragment31(ctx) {
     }
   };
 }
-function instance31($$self, $$props, $$invalidate) {
+function instance30($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2603,13 +2518,13 @@ function instance31($$self, $$props, $$invalidate) {
 var Selector = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance31, create_fragment31, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance30, create_fragment30, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Selector_default = Selector;
 // src/components/Icons/SelectorFilled.svelte
-function create_fragment32(ctx) {
+function create_fragment31(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2654,7 +2569,7 @@ function create_fragment32(ctx) {
     }
   };
 }
-function instance32($$self, $$props, $$invalidate) {
+function instance31($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2668,13 +2583,13 @@ function instance32($$self, $$props, $$invalidate) {
 var SelectorFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance32, create_fragment32, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance31, create_fragment31, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var SelectorFilled_default = SelectorFilled;
 // src/components/Icons/SpeechBalloon.svelte
-function create_fragment33(ctx) {
+function create_fragment32(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2712,7 +2627,7 @@ function create_fragment33(ctx) {
     }
   };
 }
-function instance33($$self, $$props, $$invalidate) {
+function instance32($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2726,13 +2641,13 @@ function instance33($$self, $$props, $$invalidate) {
 var SpeechBalloon = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance33, create_fragment33, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance32, create_fragment32, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var SpeechBalloon_default = SpeechBalloon;
 // src/components/Icons/Star.svelte
-function create_fragment34(ctx) {
+function create_fragment33(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2770,7 +2685,7 @@ function create_fragment34(ctx) {
     }
   };
 }
-function instance34($$self, $$props, $$invalidate) {
+function instance33($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2784,13 +2699,13 @@ function instance34($$self, $$props, $$invalidate) {
 var Star = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance34, create_fragment34, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance33, create_fragment33, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Star_default = Star;
 // src/components/Icons/StarBolded.svelte
-function create_fragment35(ctx) {
+function create_fragment34(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2828,7 +2743,7 @@ function create_fragment35(ctx) {
     }
   };
 }
-function instance35($$self, $$props, $$invalidate) {
+function instance34($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2842,13 +2757,13 @@ function instance35($$self, $$props, $$invalidate) {
 var StarBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance35, create_fragment35, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance34, create_fragment34, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var StarBolded_default = StarBolded;
 // src/components/Icons/Text.svelte
-function create_fragment36(ctx) {
+function create_fragment35(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -2886,7 +2801,7 @@ function create_fragment36(ctx) {
     }
   };
 }
-function instance36($$self, $$props, $$invalidate) {
+function instance35($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2900,13 +2815,13 @@ function instance36($$self, $$props, $$invalidate) {
 var Text = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance36, create_fragment36, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance35, create_fragment35, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Text_default = Text;
 // src/components/Icons/TextFilled.svelte
-function create_fragment37(ctx) {
+function create_fragment36(ctx) {
   let svg;
   let path0;
   let path1;
@@ -2951,7 +2866,7 @@ function create_fragment37(ctx) {
     }
   };
 }
-function instance37($$self, $$props, $$invalidate) {
+function instance36($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -2965,13 +2880,13 @@ function instance37($$self, $$props, $$invalidate) {
 var TextFilled = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance37, create_fragment37, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance36, create_fragment36, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var TextFilled_default = TextFilled;
 // src/components/Icons/Triangle.svelte
-function create_fragment38(ctx) {
+function create_fragment37(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3009,7 +2924,7 @@ function create_fragment38(ctx) {
     }
   };
 }
-function instance38($$self, $$props, $$invalidate) {
+function instance37($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3023,13 +2938,13 @@ function instance38($$self, $$props, $$invalidate) {
 var Triangle = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance38, create_fragment38, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance37, create_fragment37, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Triangle_default = Triangle;
 // src/components/Icons/TriangleBolded.svelte
-function create_fragment39(ctx) {
+function create_fragment38(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3067,7 +2982,7 @@ function create_fragment39(ctx) {
     }
   };
 }
-function instance39($$self, $$props, $$invalidate) {
+function instance38($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3081,13 +2996,13 @@ function instance39($$self, $$props, $$invalidate) {
 var TriangleBolded = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance39, create_fragment39, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance38, create_fragment38, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var TriangleBolded_default = TriangleBolded;
 // src/components/Icons/Undo.svelte
-function create_fragment40(ctx) {
+function create_fragment39(ctx) {
   let svg;
   let path0;
   let path1;
@@ -3129,7 +3044,7 @@ function create_fragment40(ctx) {
     }
   };
 }
-function instance40($$self, $$props, $$invalidate) {
+function instance39($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3143,13 +3058,13 @@ function instance40($$self, $$props, $$invalidate) {
 var Undo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance40, create_fragment40, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance39, create_fragment39, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Undo_default = Undo;
 // src/components/Icons/Up.svelte
-function create_fragment41(ctx) {
+function create_fragment40(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3187,7 +3102,7 @@ function create_fragment41(ctx) {
     }
   };
 }
-function instance41($$self, $$props, $$invalidate) {
+function instance40($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3201,13 +3116,13 @@ function instance41($$self, $$props, $$invalidate) {
 var Up = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance41, create_fragment41, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance40, create_fragment40, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Up_default = Up;
 // src/components/Icons/WhiteboardAdd.svelte
-function create_fragment42(ctx) {
+function create_fragment41(ctx) {
   let svg;
   let path0;
   let rect;
@@ -3265,7 +3180,7 @@ function create_fragment42(ctx) {
     }
   };
 }
-function instance42($$self, $$props, $$invalidate) {
+function instance41($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3279,13 +3194,13 @@ function instance42($$self, $$props, $$invalidate) {
 var WhiteboardAdd = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance42, create_fragment42, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance41, create_fragment41, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var WhiteboardAdd_default = WhiteboardAdd;
 // src/components/Icons/Play.svelte
-function create_fragment43(ctx) {
+function create_fragment42(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3321,7 +3236,7 @@ function create_fragment43(ctx) {
     }
   };
 }
-function instance43($$self, $$props, $$invalidate) {
+function instance42($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3335,13 +3250,13 @@ function instance43($$self, $$props, $$invalidate) {
 var Play = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance43, create_fragment43, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance42, create_fragment42, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Play_default = Play;
 // src/components/Icons/Pause.svelte
-function create_fragment44(ctx) {
+function create_fragment43(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3377,7 +3292,7 @@ function create_fragment44(ctx) {
     }
   };
 }
-function instance44($$self, $$props, $$invalidate) {
+function instance43($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3391,13 +3306,13 @@ function instance44($$self, $$props, $$invalidate) {
 var Pause = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance44, create_fragment44, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance43, create_fragment43, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Pause_default = Pause;
 // src/components/Icons/Loading.svelte
-function create_fragment45(ctx) {
+function create_fragment44(ctx) {
   let svg;
   let path;
   let svg_class_value;
@@ -3433,7 +3348,7 @@ function create_fragment45(ctx) {
     }
   };
 }
-function instance45($$self, $$props, $$invalidate) {
+function instance44($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { active = false } = $$props;
   $$self.$$set = ($$props2) => {
@@ -3447,7 +3362,7 @@ function instance45($$self, $$props, $$invalidate) {
 var Loading = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance45, create_fragment45, safe_not_equal, { theme: 0, active: 1 });
+    init(this, options, instance44, create_fragment44, safe_not_equal, { theme: 0, active: 1 });
   }
 };
 var Loading_default = Loading;
@@ -3461,7 +3376,6 @@ var Icons = {
   BalloonBolded: BalloonBolded_default,
   Circle: Circle_default,
   CircleBolded: CircleBolded_default,
-  Clean: Clean_default,
   Clear: Clear_default,
   Click: Click_default,
   ClickFilled: ClickFilled_default,
@@ -3513,12 +3427,12 @@ if (is_client) {
       {
         name: "className",
         defaultValue: "",
-        fn(instance60) {
+        fn(instance59) {
           function add() {
-            const el = instance60.popper.firstElementChild;
+            const el = instance59.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              const extra = (instance60.props.className || "").trim();
+              const extra = (instance59.props.className || "").trim();
               if (extra) {
                 el.classList.add(extra);
               }
@@ -3526,7 +3440,7 @@ if (is_client) {
           }
           function remove() {
             var _a;
-            (_a = instance60.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            (_a = instance59.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -3539,21 +3453,21 @@ if (is_client) {
   });
 }
 var tippy = function(node, props) {
-  const instance60 = (0, import_tippy.default)(node, props);
+  const instance59 = (0, import_tippy.default)(node, props);
   return {
     update(props2) {
-      instance60.setProps(props2);
+      instance59.setProps(props2);
     },
     destroy() {
-      instance60.destroy();
+      instance59.destroy();
     }
   };
 };
 function tippy_hide_all() {
   document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance60 = el._tippy;
-    if (instance60)
-      instance60.hide();
+    const instance59 = el._tippy;
+    if (instance59)
+      instance59.hide();
   });
 }
 var tippy_menu = {
@@ -3637,7 +3551,7 @@ function create_if_block2(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_1(ctx, -1);
+  current_block_type_index = select_block_type_1(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -3651,7 +3565,7 @@ function create_if_block2(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_1(ctx2, dirty);
+      current_block_type_index = select_block_type_1(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -3873,7 +3787,7 @@ function create_if_block_1(ctx) {
     }
   };
 }
-function create_fragment46(ctx) {
+function create_fragment45(ctx) {
   let current_block_type_index;
   let if_block;
   let if_block_anchor;
@@ -3885,7 +3799,7 @@ function create_fragment46(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type(ctx, -1);
+  current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -3899,7 +3813,7 @@ function create_fragment46(ctx) {
     },
     p(ctx2, [dirty]) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type(ctx2, dirty);
+      current_block_type_index = select_block_type(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -3936,7 +3850,7 @@ function create_fragment46(ctx) {
     }
   };
 }
-function instance46($$self, $$props, $$invalidate) {
+function instance45($$self, $$props, $$invalidate) {
   let { $$slots: slots = {}, $$scope } = $$props;
   let { class: className = "" } = $$props;
   let { name: name10 = "fastboard-ui" } = $$props;
@@ -3994,7 +3908,7 @@ function instance46($$self, $$props, $$invalidate) {
 var Button = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance46, create_fragment46, safe_not_equal, {
+    init(this, options, instance45, create_fragment45, safe_not_equal, {
       class: 0,
       name: 1,
       theme: 2,
@@ -4165,7 +4079,7 @@ function create_default_slot(ctx) {
     }
   };
 }
-function create_fragment47(ctx) {
+function create_fragment46(ctx) {
   let div;
   let button0;
   let t_1;
@@ -4266,7 +4180,7 @@ var i18n = {
   }
 };
 var name = "fastboard-redo-undo";
-function instance47($$self, $$props, $$invalidate) {
+function instance46($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -4303,36 +4217,28 @@ function instance47($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 2048) {
-      $:
-        $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 65536) {
-      $:
-        $$invalidate(13, disabled = !$writable);
+      $$invalidate(13, disabled = !$writable);
     }
     if ($$self.$$.dirty & 4096) {
-      $:
-        $$invalidate(7, t = i18n[language]);
+      $$invalidate(7, t = i18n[language]);
     }
     if ($$self.$$.dirty & 8192) {
-      $:
-        $$invalidate(2, type = disabled ? "disable" : "normal");
+      $$invalidate(2, type = disabled ? "disable" : "normal");
     }
     if ($$self.$$.dirty & 2048) {
-      $:
-        $$subscribe_undoSteps($$invalidate(6, undoSteps = app == null ? void 0 : app.canUndoSteps));
+      $$subscribe_undoSteps($$invalidate(6, undoSteps = app == null ? void 0 : app.canUndoSteps));
     }
     if ($$self.$$.dirty & 2048) {
-      $:
-        $$subscribe_redoSteps($$invalidate(5, redoSteps = app == null ? void 0 : app.canRedoSteps));
+      $$subscribe_redoSteps($$invalidate(5, redoSteps = app == null ? void 0 : app.canRedoSteps));
     }
     if ($$self.$$.dirty & 40960) {
-      $:
-        $$invalidate(4, undo_disabled = disabled || !$undoSteps);
+      $$invalidate(4, undo_disabled = disabled || !$undoSteps);
     }
     if ($$self.$$.dirty & 24576) {
-      $:
-        $$invalidate(3, redo_disabled = disabled || !$redoSteps);
+      $$invalidate(3, redo_disabled = disabled || !$redoSteps);
     }
   };
   return [
@@ -4358,7 +4264,7 @@ function instance47($$self, $$props, $$invalidate) {
 var RedoUndo = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance47, create_fragment47, safe_not_equal, {
+    init(this, options, instance46, create_fragment46, safe_not_equal, {
       app: 11,
       theme: 0,
       language: 12,
@@ -4651,7 +4557,7 @@ function create_default_slot2(ctx) {
     }
   };
 }
-function create_fragment48(ctx) {
+function create_fragment47(ctx) {
   let div;
   let button0;
   let t0;
@@ -4680,7 +4586,7 @@ function create_fragment48(ctx) {
       return create_if_block3;
     return create_else_block3;
   }
-  let current_block_type = select_block_type(ctx, -1);
+  let current_block_type = select_block_type(ctx);
   let if_block = current_block_type(ctx);
   button1 = new Button_default({
     props: {
@@ -4744,7 +4650,7 @@ function create_fragment48(ctx) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      if (current_block_type === (current_block_type = select_block_type(ctx2, dirty)) && if_block) {
+      if (current_block_type === (current_block_type = select_block_type(ctx2)) && if_block) {
         if_block.p(ctx2, dirty);
       } else {
         if_block.d(1);
@@ -4820,7 +4726,7 @@ var i18n2 = {
   }
 };
 var name2 = "fastboard-page-control";
-function instance48($$self, $$props, $$invalidate) {
+function instance47($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -4861,36 +4767,28 @@ function instance48($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 32768) {
-      $:
-        $$subscribe_writable($$invalidate(11, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(11, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 131072) {
-      $:
-        $$invalidate(2, disabled = !$writable);
+      $$invalidate(2, disabled = !$writable);
     }
     if ($$self.$$.dirty & 65536) {
-      $:
-        $$invalidate(10, t = i18n2[language]);
+      $$invalidate(10, t = i18n2[language]);
     }
     if ($$self.$$.dirty & 4) {
-      $:
-        $$invalidate(5, type = disabled ? "disable" : "normal");
+      $$invalidate(5, type = disabled ? "disable" : "normal");
     }
     if ($$self.$$.dirty & 32768) {
-      $:
-        $$subscribe_index($$invalidate(9, index = app == null ? void 0 : app.sceneIndex));
+      $$subscribe_index($$invalidate(9, index = app == null ? void 0 : app.sceneIndex));
     }
     if ($$self.$$.dirty & 32768) {
-      $:
-        $$subscribe_length($$invalidate(8, length = app == null ? void 0 : app.sceneLength));
+      $$subscribe_length($$invalidate(8, length = app == null ? void 0 : app.sceneLength));
     }
     if ($$self.$$.dirty & 20) {
-      $:
-        $$invalidate(7, prev_disabled = disabled || !$index);
+      $$invalidate(7, prev_disabled = disabled || !$index);
     }
     if ($$self.$$.dirty & 28) {
-      $:
-        $$invalidate(6, next_disabled = disabled || $length == null || $index === $length - 1);
+      $$invalidate(6, next_disabled = disabled || $length == null || $index === $length - 1);
     }
   };
   return [
@@ -4917,7 +4815,7 @@ function instance48($$self, $$props, $$invalidate) {
 var PageControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance48, create_fragment48, safe_not_equal, {
+    init(this, options, instance47, create_fragment47, safe_not_equal, {
       app: 15,
       theme: 0,
       language: 16,
@@ -5208,7 +5106,7 @@ function create_default_slot3(ctx) {
     }
   };
 }
-function create_fragment49(ctx) {
+function create_fragment48(ctx) {
   let div;
   let button0;
   let t0;
@@ -5237,7 +5135,7 @@ function create_fragment49(ctx) {
       return create_if_block4;
     return create_else_block4;
   }
-  let current_block_type = select_block_type(ctx, -1);
+  let current_block_type = select_block_type(ctx);
   let if_block = current_block_type(ctx);
   button1 = new Button_default({
     props: {
@@ -5301,7 +5199,7 @@ function create_fragment49(ctx) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
-      if (current_block_type === (current_block_type = select_block_type(ctx2, dirty)) && if_block) {
+      if (current_block_type === (current_block_type = select_block_type(ctx2)) && if_block) {
         if_block.p(ctx2, dirty);
       } else {
         if_block.d(1);
@@ -5406,7 +5304,7 @@ function next_scale(scale, delta) {
   return 1;
 }
 var name3 = "fastboard-zoom-control";
-function instance49($$self, $$props, $$invalidate) {
+function instance48($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let t;
@@ -5453,36 +5351,28 @@ function instance49($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     var _a;
     if ($$self.$$.dirty & 16384) {
-      $:
-        $$subscribe_writable($$invalidate(10, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(10, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 65536) {
-      $:
-        $$invalidate(3, disabled = !$writable);
+      $$invalidate(3, disabled = !$writable);
     }
     if ($$self.$$.dirty & 32768) {
-      $:
-        $$invalidate(9, t = i18n3[language]);
+      $$invalidate(9, t = i18n3[language]);
     }
     if ($$self.$$.dirty & 8) {
-      $:
-        $$invalidate(5, type = disabled ? "disable" : "normal");
+      $$invalidate(5, type = disabled ? "disable" : "normal");
     }
     if ($$self.$$.dirty & 16384) {
-      $:
-        $$subscribe_camera($$invalidate(8, camera = app == null ? void 0 : app.camera));
+      $$subscribe_camera($$invalidate(8, camera = app == null ? void 0 : app.camera));
     }
     if ($$self.$$.dirty & 16) {
-      $:
-        $$invalidate(2, scale = (_a = $camera == null ? void 0 : $camera.scale) != null ? _a : 1);
+      $$invalidate(2, scale = (_a = $camera == null ? void 0 : $camera.scale) != null ? _a : 1);
     }
     if ($$self.$$.dirty & 12) {
-      $:
-        $$invalidate(7, plus_disabled = disabled || next_scale(scale, 1) === scale);
+      $$invalidate(7, plus_disabled = disabled || next_scale(scale, 1) === scale);
     }
     if ($$self.$$.dirty & 12) {
-      $:
-        $$invalidate(6, minus_disabled = disabled || next_scale(scale, -1) === scale);
+      $$invalidate(6, minus_disabled = disabled || next_scale(scale, -1) === scale);
     }
   };
   return [
@@ -5508,7 +5398,7 @@ function instance49($$self, $$props, $$invalidate) {
 var ZoomControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance49, create_fragment49, safe_not_equal, {
+    init(this, options, instance48, create_fragment48, safe_not_equal, {
       app: 14,
       theme: 0,
       language: 15,
@@ -5736,7 +5626,10 @@ var apps = new AppsInToolbar([
     icon: visual_studio_code_default,
     label: "Code Editor",
     onClick(app) {
-      app.insertCodeEditor();
+      app.manager.addApp({
+        kind: "Monaco",
+        options: { title: "Code Editor" }
+      });
     }
   },
   {
@@ -5744,7 +5637,10 @@ var apps = new AppsInToolbar([
     icon: geogebra_default,
     label: "GeoGebra",
     onClick(app) {
-      app.insertGeoGebra();
+      app.manager.addApp({
+        kind: "GeoGebra",
+        options: { title: "GeoGebra" }
+      });
     }
   },
   {
@@ -5752,7 +5648,10 @@ var apps = new AppsInToolbar([
     icon: countdown_default,
     label: "Countdown",
     onClick(app) {
-      app.insertCountdown();
+      app.manager.addApp({
+        kind: "Countdown",
+        options: { title: "Countdown" }
+      });
     }
   }
 ]);
@@ -5774,7 +5673,7 @@ function tooltip(text2, hotkey) {
 }
 // src/components/Toolbar/components/Slider.svelte
-function create_fragment50(ctx) {
+function create_fragment49(ctx) {
   let div;
   let input;
   let input_class_value;
@@ -5862,7 +5761,7 @@ function create_fragment50(ctx) {
   };
 }
 var name4 = "fastboard-slider";
-function instance50($$self, $$props, $$invalidate) {
+function instance49($$self, $$props, $$invalidate) {
   let percent;
   const dispatch = createEventDispatcher();
   let { class: className = "" } = $$props;
@@ -5904,14 +5803,12 @@ function instance50($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 385) {
-      $:
-        if (value !== real_value && !grabbing) {
+      if (value !== real_value && !grabbing) {
           $$invalidate(7, real_value = value);
         }
     }
     if ($$self.$$.dirty & 152) {
-      $:
-        $$invalidate(9, percent = 100 * (real_value - min) / (max - min));
+      $$invalidate(9, percent = 100 * (real_value - min) / (max - min));
     }
   };
   return [
@@ -5933,7 +5830,7 @@ function instance50($$self, $$props, $$invalidate) {
 var Slider = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance50, create_fragment50, safe_not_equal, {
+    init(this, options, instance49, create_fragment49, safe_not_equal, {
       class: 1,
       theme: 2,
       min: 3,
@@ -5947,7 +5844,7 @@ var Slider = class extends SvelteComponent {
 var Slider_default = Slider;
 // src/components/Toolbar/components/StrokeWidth.svelte
-function create_fragment51(ctx) {
+function create_fragment50(ctx) {
   let slider;
   let current;
   const slider_spread_levels = [
@@ -5994,7 +5891,7 @@ function create_fragment51(ctx) {
     }
   };
 }
-function instance51($$self, $$props, $$invalidate) {
+function instance50($$self, $$props, $$invalidate) {
   let memberState;
   let value;
   let props;
@@ -6017,16 +5914,13 @@ function instance51($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     var _a;
     if ($$self.$$.dirty & 8) {
-      $:
-        $$subscribe_memberState($$invalidate(1, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(1, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & 128) {
-      $:
-        $$invalidate(6, value = (_a = $memberState == null ? void 0 : $memberState.strokeWidth) != null ? _a : 1);
+      $$invalidate(6, value = (_a = $memberState == null ? void 0 : $memberState.strokeWidth) != null ? _a : 1);
     }
     if ($$self.$$.dirty & 112) {
-      $:
-        $$invalidate(0, props = { value, theme, disabled });
+      $$invalidate(0, props = { value, theme, disabled });
     }
   };
   return [
@@ -6043,7 +5937,7 @@ function instance51($$self, $$props, $$invalidate) {
 var StrokeWidth = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance51, create_fragment51, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
+    init(this, options, instance50, create_fragment50, safe_not_equal, { app: 3, theme: 4, disabled: 5 });
   }
 };
 var StrokeWidth_default = StrokeWidth;
@@ -6059,7 +5953,6 @@ function create_each_block(key_1, ctx) {
   let span;
   let t;
   let button_class_value;
-  let button_data_color_key_value;
   return {
     key: key_1,
     first: null,
@@ -6070,7 +5963,7 @@ function create_each_block(key_1, ctx) {
       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]);
+      attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
       toggle_class(button, "is-active", is_equal_color(ctx[2], colors[ctx[7]]));
       this.first = button;
@@ -6098,7 +5991,7 @@ function create_each_block(key_1, ctx) {
     }
   };
 }
-function create_fragment52(ctx) {
+function create_fragment51(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6155,7 +6048,7 @@ function create_fragment52(ctx) {
 function is_equal_color(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance52($$self, $$props, $$invalidate) {
+function instance51($$self, $$props, $$invalidate) {
   let memberState;
   let strokeColor;
   let $memberState, $$unsubscribe_memberState = noop, $$subscribe_memberState = () => ($$unsubscribe_memberState(), $$unsubscribe_memberState = subscribe(memberState, ($$value) => $$invalidate(6, $memberState = $$value)), memberState);
@@ -6182,12 +6075,10 @@ function instance52($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 32) {
-      $:
-        $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & 64) {
-      $:
-        $$invalidate(2, strokeColor = $memberState == null ? void 0 : $memberState.strokeColor);
+      $$invalidate(2, strokeColor = $memberState == null ? void 0 : $memberState.strokeColor);
     }
   };
   return [theme, disabled, strokeColor, memberState, set_stroke_color, app, $memberState];
@@ -6195,7 +6086,7 @@ function instance52($$self, $$props, $$invalidate) {
 var StrokeColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance52, create_fragment52, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance51, create_fragment51, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
   }
 };
 var StrokeColor_default = StrokeColor;
@@ -6211,7 +6102,6 @@ function create_each_block2(key_1, ctx) {
   let span;
   let t;
   let button_class_value;
-  let button_data_color_key_value;
   return {
     key: key_1,
     first: null,
@@ -6222,7 +6112,7 @@ function create_each_block2(key_1, ctx) {
       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]);
+      attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
       toggle_class(button, "is-active", is_equal_color2(ctx[2], colors[ctx[7]]));
       this.first = button;
@@ -6250,7 +6140,7 @@ function create_each_block2(key_1, ctx) {
     }
   };
 }
-function create_fragment53(ctx) {
+function create_fragment52(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6307,7 +6197,7 @@ function create_fragment53(ctx) {
 function is_equal_color2(a, b) {
   return a && b && a.every((v, i) => v === b[i]);
 }
-function instance53($$self, $$props, $$invalidate) {
+function instance52($$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);
@@ -6334,12 +6224,10 @@ function instance53($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 32) {
-      $:
-        $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(3, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & 64) {
-      $:
-        $$invalidate(2, textColor = $memberState == null ? void 0 : $memberState.textColor);
+      $$invalidate(2, textColor = $memberState == null ? void 0 : $memberState.textColor);
     }
   };
   return [theme, disabled, textColor, memberState, set_stroke_color, app, $memberState];
@@ -6347,7 +6235,7 @@ function instance53($$self, $$props, $$invalidate) {
 var TextColor = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance53, create_fragment53, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
+    init(this, options, instance52, create_fragment52, safe_not_equal, { app: 5, theme: 0, disabled: 1 });
   }
 };
 var TextColor_default = TextColor;
@@ -6506,7 +6394,6 @@ function create_each_block3(key_1, ctx) {
   let if_block;
   let t_1;
   let button_class_value;
-  let button_data_shape_key_value;
   let tippy_action;
   let current;
   let mounted;
@@ -6518,7 +6405,7 @@ function create_each_block3(key_1, ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type(ctx, -1);
+  current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     key: key_1,
@@ -6528,7 +6415,7 @@ function create_each_block3(key_1, ctx) {
       if_block.c();
       t_1 = space();
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-shape-btn " + ctx[0] + " " + ctx[12]);
-      attr(button, "data-shape-key", button_data_shape_key_value = ctx[12]);
+      attr(button, "data-shape-key", ctx[12]);
       button.disabled = ctx[1];
       toggle_class(button, "is-active", ctx[13]);
       this.first = button;
@@ -6549,7 +6436,7 @@ function create_each_block3(key_1, ctx) {
     p(new_ctx, dirty) {
       ctx = new_ctx;
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type(ctx, dirty);
+      current_block_type_index = select_block_type(ctx);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx, dirty);
       } else {
@@ -6602,7 +6489,7 @@ function create_each_block3(key_1, ctx) {
     }
   };
 }
-function create_fragment54(ctx) {
+function create_fragment53(ctx) {
   let div;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
@@ -6694,7 +6581,7 @@ var i18n5 = {
     speechBalloon: "\u6C14\u6CE1"
   }
 };
-function instance54($$self, $$props, $$invalidate) {
+function instance53($$self, $$props, $$invalidate) {
   let t;
   let memberState;
   let appliance;
@@ -6732,28 +6619,22 @@ function instance54($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 512) {
-      $:
-        $$invalidate(6, t = i18n5[language]);
+      $$invalidate(6, t = i18n5[language]);
     }
     if ($$self.$$.dirty & 256) {
-      $:
-        $$subscribe_memberState($$invalidate(5, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(5, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty & 2048) {
-      $:
-        $$invalidate(4, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+      $$invalidate(4, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty & 2048) {
-      $:
-        $$invalidate(3, shape = $memberState == null ? void 0 : $memberState.shapeType);
+      $$invalidate(3, shape = $memberState == null ? void 0 : $memberState.shapeType);
     }
     if ($$self.$$.dirty & 256) {
-      $:
-        $$invalidate(10, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(10, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty & 1024) {
-      $:
-        $$invalidate(2, c = {
+      $$invalidate(2, c = {
           rectangle: hotkeys == null ? void 0 : hotkeys.changeToRectangle,
           ellipse: hotkeys == null ? void 0 : hotkeys.changeToEllipse,
           straight: hotkeys == null ? void 0 : hotkeys.changeToStraight,
@@ -6779,7 +6660,7 @@ function instance54($$self, $$props, $$invalidate) {
 var Shapes = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, {
+    init(this, options, instance53, create_fragment53, safe_not_equal, {
       app: 8,
       theme: 0,
       language: 9,
@@ -6963,7 +6844,7 @@ function create_default_slot_8(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type(ctx, [-1, -1]);
+  current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -6977,7 +6858,7 @@ function create_default_slot_8(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type(ctx2, dirty);
+      current_block_type_index = select_block_type(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7094,7 +6975,7 @@ function create_default_slot_7(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_1(ctx, [-1, -1]);
+  current_block_type_index = select_block_type_1(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7108,7 +6989,7 @@ function create_default_slot_7(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_1(ctx2, dirty);
+      current_block_type_index = select_block_type_1(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7225,7 +7106,7 @@ function create_default_slot_6(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_2(ctx, [-1, -1]);
+  current_block_type_index = select_block_type_2(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7239,7 +7120,7 @@ function create_default_slot_6(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_2(ctx2, dirty);
+      current_block_type_index = select_block_type_2(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7356,7 +7237,7 @@ function create_default_slot_53(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_3(ctx, [-1, -1]);
+  current_block_type_index = select_block_type_3(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7370,7 +7251,7 @@ function create_default_slot_53(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_3(ctx2, dirty);
+      current_block_type_index = select_block_type_3(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7559,7 +7440,7 @@ function create_default_slot_43(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_4(ctx, [-1, -1]);
+  current_block_type_index = select_block_type_4(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7573,7 +7454,7 @@ function create_default_slot_43(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_4(ctx2, dirty);
+      current_block_type_index = select_block_type_4(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -7690,7 +7571,7 @@ function create_default_slot_34(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_5(ctx, [-1, -1]);
+  current_block_type_index = select_block_type_5(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -7704,7 +7585,7 @@ function create_default_slot_34(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_5(ctx2, dirty);
+      current_block_type_index = select_block_type_5(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -8043,7 +7924,7 @@ function create_each_block4(ctx) {
     }
   };
 }
-function create_fragment55(ctx) {
+function create_fragment54(ctx) {
   let t0;
   let div0;
   let button0;
@@ -8060,9 +7941,7 @@ function create_fragment55(ctx) {
   let t6;
   let button6;
   let t7;
-  let div0_class_value;
   let scrollHeight_action;
-  let scrollTop_action;
   let t8;
   let t9;
   let div8;
@@ -8070,32 +7949,24 @@ function create_fragment55(ctx) {
   let strokewidth0;
   let t10;
   let div1;
-  let div1_class_value;
   let t11;
   let strokecolor0;
-  let div2_class_value;
   let t12;
   let div3;
   let textcolor;
-  let div3_class_value;
   let t13;
   let div6;
   let shapes2;
   let t14;
   let div4;
-  let div4_class_value;
   let t15;
   let strokewidth1;
   let t16;
   let div5;
-  let div5_class_value;
   let t17;
   let strokecolor1;
-  let div6_class_value;
   let t18;
   let div7;
-  let div7_class_value;
-  let div8_class_value;
   let current;
   let mounted;
   let dispose;
@@ -8295,17 +8166,17 @@ function create_fragment55(ctx) {
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].c();
       }
-      attr(div0, "class", div0_class_value = name5 + "-scrollable");
+      attr(div0, "class", name5 + "-scrollable");
       toggle_class(div0, "scrollable", ctx[5]);
-      attr(div1, "class", div1_class_value = name5 + "-panel-divider");
-      attr(div2, "class", div2_class_value = name5 + "-panel pencil");
-      attr(div3, "class", div3_class_value = name5 + "-panel text");
-      attr(div4, "class", div4_class_value = name5 + "-panel-divider");
-      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");
+      attr(div1, "class", name5 + "-panel-divider");
+      attr(div2, "class", name5 + "-panel pencil");
+      attr(div3, "class", name5 + "-panel text");
+      attr(div4, "class", name5 + "-panel-divider");
+      attr(div5, "class", name5 + "-panel-divider");
+      attr(div6, "class", name5 + "-panel shapes");
+      attr(div7, "class", name5 + "-panel apps");
       set_style(div7, "--n", ctx[19].length);
-      attr(div8, "class", div8_class_value = name5 + "-panel-wrapper");
+      attr(div8, "class", name5 + "-panel-wrapper");
       set_style(div8, "display", "none");
     },
     m(target, anchor) {
@@ -8367,7 +8238,7 @@ function create_fragment55(ctx) {
       if (!mounted) {
         dispose = [
           action_destroyer(scrollHeight_action = scrollHeight.call(null, div0, ctx[4])),
-          action_destroyer(scrollTop_action = scrollTop.call(null, div0, ctx[21]))
+          action_destroyer(scrollTop.call(null, div0, ctx[21]))
         ];
         mounted = true;
       }
@@ -8654,7 +8525,7 @@ function create_fragment55(ctx) {
   };
 }
 var name5 = "fastboard-toolbar";
-function instance55($$self, $$props, $$invalidate) {
+function instance54($$self, $$props, $$invalidate) {
   let t;
   let hotkeys;
   let c;
@@ -8764,8 +8635,7 @@ function instance55($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty[0] & 10) {
-      $:
-        $$invalidate(15, btn_props = {
+      $$invalidate(15, btn_props = {
           name: name5,
           theme,
           disabled,
@@ -8773,16 +8643,13 @@ function instance55($$self, $$props, $$invalidate) {
         });
     }
     if ($$self.$$.dirty[0] & 4) {
-      $:
-        $$invalidate(9, t = i18n4[language]);
+      $$invalidate(9, t = i18n4[language]);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $:
-        $$invalidate(32, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(32, hotkeys = app == null ? void 0 : app.hotKeys);
     }
     if ($$self.$$.dirty[0] & 512 | $$self.$$.dirty[1] & 2) {
-      $:
-        $$invalidate(18, 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),
@@ -8791,32 +8658,26 @@ function instance55($$self, $$props, $$invalidate) {
         });
     }
     if ($$self.$$.dirty[0] & 1) {
-      $:
-        $$subscribe_memberState($$invalidate(17, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(17, memberState = app == null ? void 0 : app.memberState));
     }
     if ($$self.$$.dirty[1] & 8) {
-      $:
-        $$invalidate(8, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+      $$invalidate(8, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
     }
     if ($$self.$$.dirty[1] & 8) {
-      $:
-        $$invalidate(7, shape = $memberState == null ? void 0 : $memberState.shapeType);
+      $$invalidate(7, shape = $memberState == null ? void 0 : $memberState.shapeType);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $:
-        $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
+      $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
     }
     if ($$self.$$.dirty[0] & 384) {
-      $:
-        if (applianceShapes.includes(appliance)) {
+      if (applianceShapes.includes(appliance)) {
           $$invalidate(10, last_shape = appliance);
         } else if (shape) {
           $$invalidate(10, last_shape = shape);
         }
     }
     if ($$self.$$.dirty[0] & 32 | $$self.$$.dirty[1] & 5) {
-      $:
-        max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
+      max_scroll = scrollable ? $scroll_height + (32 + 8) * 2 - computed_height : 0;
     }
   };
   return [
@@ -8864,7 +8725,7 @@ function instance55($$self, $$props, $$invalidate) {
 var Contents = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance55, create_fragment55, safe_not_equal, {
+    init(this, options, instance54, create_fragment54, safe_not_equal, {
       app: 0,
       theme: 1,
       language: 2,
@@ -8881,20 +8742,18 @@ var Contents_default = Contents;
 // src/components/Toolbar/Toolbar.svelte
 function create_else_block7(ctx) {
   let path0;
-  let path0_class_value;
   let path1;
-  let path1_class_value;
   return {
     c() {
       path0 = svg_element("path");
       path1 = svg_element("path");
       attr(path0, "stroke", "#000");
       attr(path0, "d", "M20 52v16");
-      attr(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
+      attr(path0, "class", name6 + "-handler-image-stroke-color");
       attr(path1, "fill", "#000");
       attr(path1, "stroke", "none");
       attr(path1, "d", "M16 52v16l-8-8z");
-      attr(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
+      attr(path1, "class", name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
       insert(target, path0, anchor);
@@ -8911,20 +8770,18 @@ function create_else_block7(ctx) {
 }
 function create_if_block7(ctx) {
   let path0;
-  let path0_class_value;
   let path1;
-  let path1_class_value;
   return {
     c() {
       path0 = svg_element("path");
       path1 = svg_element("path");
       attr(path0, "stroke", "#000");
       attr(path0, "d", "M10 52v16");
-      attr(path0, "class", path0_class_value = name6 + "-handler-image-stroke-color");
+      attr(path0, "class", name6 + "-handler-image-stroke-color");
       attr(path1, "fill", "#000");
       attr(path1, "stroke", "none");
       attr(path1, "d", "M14 52v16l8-8z");
-      attr(path1, "class", path1_class_value = name6 + "-handler-image-fill-color");
+      attr(path1, "class", name6 + "-handler-image-fill-color");
     },
     m(target, anchor) {
       insert(target, path0, anchor);
@@ -8939,7 +8796,7 @@ function create_if_block7(ctx) {
     }
   };
 }
-function create_fragment56(ctx) {
+function create_fragment55(ctx) {
   let div1;
   let div0;
   let contents;
@@ -8950,12 +8807,9 @@ function create_fragment56(ctx) {
   let t1;
   let svg;
   let path0;
-  let path0_class_value;
   let path1;
-  let path1_class_value;
   let label_class_value;
   let div1_class_value;
-  let height_action;
   let current;
   let mounted;
   let dispose;
@@ -8976,7 +8830,7 @@ function create_fragment56(ctx) {
       return create_if_block7;
     return create_else_block7;
   }
-  let current_block_type = select_block_type(ctx, -1);
+  let current_block_type = select_block_type(ctx);
   let if_block = current_block_type(ctx);
   return {
     c() {
@@ -8997,10 +8851,10 @@ function create_fragment56(ctx) {
       attr(path0, "fill", "#fff");
       attr(path0, "stroke", "none");
       attr(path0, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr(path0, "class", path0_class_value = name6 + "-handler-bg-color");
+      attr(path0, "class", name6 + "-handler-bg-color");
       attr(path1, "stroke", "#000");
       attr(path1, "d", "m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120");
-      attr(path1, "class", path1_class_value = name6 + "-handler-border-color");
+      attr(path1, "class", name6 + "-handler-border-color");
       attr(svg, "fill", "none");
       attr(svg, "stroke-width", "2");
       attr(svg, "viewBox", "0 0 32 120");
@@ -9025,7 +8879,7 @@ function create_fragment56(ctx) {
       if (!mounted) {
         dispose = [
           listen(input, "change", ctx[15]),
-          action_destroyer(height_action = height.call(null, div1, ctx[9]))
+          action_destroyer(height.call(null, div1, ctx[9]))
         ];
         mounted = true;
       }
@@ -9056,7 +8910,7 @@ function create_fragment56(ctx) {
       if (dirty & 8) {
         input.checked = ctx2[3];
       }
-      if (current_block_type === (current_block_type = select_block_type(ctx2, dirty)) && if_block) {
+      if (current_block_type === (current_block_type = select_block_type(ctx2)) && if_block) {
         if_block.p(ctx2, dirty);
       } else {
         if_block.d(1);
@@ -9097,7 +8951,7 @@ function create_fragment56(ctx) {
   };
 }
 var name6 = "fastboard-toolbar";
-function instance56($$self, $$props, $$invalidate) {
+function instance55($$self, $$props, $$invalidate) {
   let writable2;
   let disabled;
   let computed_height;
@@ -9134,24 +8988,19 @@ function instance56($$self, $$props, $$invalidate) {
   $$self.$$.update = () => {
     var _a;
     if ($$self.$$.dirty & 1) {
-      $:
-        $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 16384) {
-      $:
-        $$invalidate(7, disabled = !$writable);
+      $$invalidate(7, disabled = !$writable);
     }
     if ($$self.$$.dirty & 12288) {
-      $:
-        $$invalidate(6, 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 & 12288) {
-      $:
-        $$invalidate(5, 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);
+      $$invalidate(4, hide_apps = ((_a = config.apps) == null ? void 0 : _a.enable) === false);
     }
   };
   return [
@@ -9176,7 +9025,7 @@ function instance56($$self, $$props, $$invalidate) {
 var Toolbar = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance56, create_fragment56, safe_not_equal, {
+    init(this, options, instance55, create_fragment55, safe_not_equal, {
       app: 0,
       theme: 1,
       language: 2,
@@ -9440,7 +9289,7 @@ function create_default_slot_25(ctx) {
       return 1;
     return 2;
   }
-  current_block_type_index = select_block_type(ctx, -1);
+  current_block_type_index = select_block_type(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   return {
     c() {
@@ -9454,7 +9303,7 @@ function create_default_slot_25(ctx) {
     },
     p(ctx2, dirty) {
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type(ctx2, dirty);
+      current_block_type_index = select_block_type(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -9498,17 +9347,13 @@ function create_else_block8(ctx) {
   let span0;
   let t1_value = format(ctx[13]) + "";
   let t1;
-  let span0_class_value;
   let t2;
   let span1;
   let t3;
-  let span1_class_value;
   let t4;
   let span2;
   let t5_value = format(ctx[14]) + "";
   let t5;
-  let span2_class_value;
-  let span3_class_value;
   let current;
   slider = new Slider_default({
     props: {
@@ -9533,10 +9378,10 @@ function create_else_block8(ctx) {
       t4 = space();
       span2 = element("span");
       t5 = text(t5_value);
-      attr(span0, "class", span0_class_value = name7 + "-current");
-      attr(span1, "class", span1_class_value = name7 + "-slash");
-      attr(span2, "class", span2_class_value = name7 + "-duration");
-      attr(span3, "class", span3_class_value = name7 + "-progress");
+      attr(span0, "class", name7 + "-current");
+      attr(span1, "class", name7 + "-slash");
+      attr(span2, "class", name7 + "-duration");
+      attr(span3, "class", name7 + "-progress");
     },
     m(target, anchor) {
       mount_component(slider, target, anchor);
@@ -9590,7 +9435,6 @@ function create_if_block8(ctx) {
   let t0;
   let span;
   let t1;
-  let span_class_value;
   let current;
   slider = new Slider_default({
     props: {
@@ -9604,7 +9448,7 @@ function create_if_block8(ctx) {
       t0 = space();
       span = element("span");
       t1 = text("\u2026/\u2026");
-      attr(span, "class", span_class_value = name7 + "-progress loading");
+      attr(span, "class", name7 + "-progress loading");
     },
     m(target, anchor) {
       mount_component(slider, target, anchor);
@@ -9638,13 +9482,12 @@ function create_default_slot_15(ctx) {
   let t0_value = (ctx[15] || 1) + "";
   let t0;
   let t1;
-  let span_class_value;
   return {
     c() {
       span = element("span");
       t0 = text(t0_value);
       t1 = text("x");
-      attr(span, "class", span_class_value = name7 + "-speed-text");
+      attr(span, "class", name7 + "-speed-text");
     },
     m(target, anchor) {
       insert(target, span, anchor);
@@ -9745,7 +9588,7 @@ function create_each_block5(key_1, ctx) {
     }
   };
 }
-function create_fragment57(ctx) {
+function create_fragment56(ctx) {
   let div0;
   let button0;
   let t0;
@@ -9759,7 +9602,6 @@ function create_fragment57(ctx) {
   let div1;
   let each_blocks = [];
   let each_1_lookup = /* @__PURE__ */ new Map();
-  let div1_class_value;
   let current;
   button0 = new Button_default({
     props: {
@@ -9780,7 +9622,7 @@ function create_fragment57(ctx) {
       return 0;
     return 1;
   }
-  current_block_type_index = select_block_type_1(ctx, -1);
+  current_block_type_index = select_block_type_1(ctx);
   if_block = if_blocks[current_block_type_index] = if_block_creators[current_block_type_index](ctx);
   button1 = new Button_default({
     props: {
@@ -9817,7 +9659,7 @@ function create_fragment57(ctx) {
         each_blocks[i].c();
       }
       attr(div0, "class", div0_class_value = name7 + " " + ctx[0]);
-      attr(div1, "class", div1_class_value = name7 + "-panel speed");
+      attr(div1, "class", name7 + "-panel speed");
       set_style(div2, "display", "none");
     },
     m(target, anchor) {
@@ -9851,7 +9693,7 @@ function create_fragment57(ctx) {
       }
       button0.$set(button0_changes);
       let previous_block_index = current_block_type_index;
-      current_block_type_index = select_block_type_1(ctx2, dirty);
+      current_block_type_index = select_block_type_1(ctx2);
       if (current_block_type_index === previous_block_index) {
         if_blocks[current_block_type_index].p(ctx2, dirty);
       } else {
@@ -9949,7 +9791,7 @@ function format(ms) {
   return String(m).padStart(2, "0") + ":" + String(s % 60).padStart(2, "0");
 }
 var name7 = "fastboard-player-control";
-function instance57($$self, $$props, $$invalidate) {
+function instance56($$self, $$props, $$invalidate) {
   let t;
   let canPlay;
   let disabled;
@@ -10019,48 +9861,37 @@ function instance57($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 1048576) {
-      $:
-        $$invalidate(12, t = i18n6[language]);
+      $$invalidate(12, t = i18n6[language]);
     }
     if ($$self.$$.dirty & 524288) {
-      $:
-        $$invalidate(21, canPlay = player == null ? void 0 : player.canplay);
+      $$invalidate(21, canPlay = player == null ? void 0 : player.canplay);
     }
     if ($$self.$$.dirty & 2097152) {
-      $:
-        $$invalidate(4, disabled = !canPlay);
+      $$invalidate(4, disabled = !canPlay);
     }
     if ($$self.$$.dirty & 16) {
-      $:
-        $$invalidate(5, type = disabled ? "disable" : "normal");
+      $$invalidate(5, type = disabled ? "disable" : "normal");
     }
     if ($$self.$$.dirty & 524288) {
-      $:
-        $$subscribe_duration($$invalidate(11, duration = player == null ? void 0 : player.duration));
+      $$subscribe_duration($$invalidate(11, duration = player == null ? void 0 : player.duration));
     }
     if ($$self.$$.dirty & 524288) {
-      $:
-        $$subscribe_current($$invalidate(10, current = player == null ? void 0 : player.currentTime));
+      $$subscribe_current($$invalidate(10, current = player == null ? void 0 : player.currentTime));
     }
     if ($$self.$$.dirty & 524288) {
-      $:
-        $$subscribe_playbackRate($$invalidate(9, playbackRate = player == null ? void 0 : player.playbackRate));
+      $$subscribe_playbackRate($$invalidate(9, playbackRate = player == null ? void 0 : player.playbackRate));
     }
     if ($$self.$$.dirty & 524288) {
-      $:
-        $$subscribe_phase($$invalidate(8, phase = player == null ? void 0 : player.phase));
+      $$subscribe_phase($$invalidate(8, phase = player == null ? void 0 : player.phase));
     }
     if ($$self.$$.dirty & 4194304) {
-      $:
-        $$invalidate(3, loading = $phase === "waitingFirstFrame" || $phase === "buffering");
+      $$invalidate(3, loading = $phase === "waitingFirstFrame" || $phase === "buffering");
     }
     if ($$self.$$.dirty & 4194304) {
-      $:
-        $$invalidate(2, playing = $phase === "playing");
+      $$invalidate(2, playing = $phase === "playing");
     }
     if ($$self.$$.dirty & 12) {
-      $:
-        $$invalidate(7, className = [loading ? "loading" : "", playing ? "pause" : "play"].filter(Boolean).join(" "));
+      $$invalidate(7, className = [loading ? "loading" : "", playing ? "pause" : "play"].filter(Boolean).join(" "));
     }
   };
   return [
@@ -10094,7 +9925,7 @@ function instance57($$self, $$props, $$invalidate) {
 var PlayerControl = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance57, create_fragment57, safe_not_equal, {
+    init(this, options, instance56, create_fragment56, safe_not_equal, {
       player: 19,
       theme: 0,
       language: 20,
@@ -10105,15 +9936,12 @@ var PlayerControl = class extends SvelteComponent {
 var PlayerControl_default = PlayerControl;
 // src/components/Fastboard/ReplayFastboard.svelte
-function create_fragment58(ctx) {
+function create_fragment57(ctx) {
   let div2;
   let div0;
-  let div0_class_value;
   let t;
   let div1;
   let playercontrol;
-  let div1_class_value;
-  let div2_class_value;
   let current;
   let mounted;
   let dispose;
@@ -10131,15 +9959,15 @@ function create_fragment58(ctx) {
       t = space();
       div1 = element("div");
       create_component(playercontrol.$$.fragment);
-      attr(div0, "class", div0_class_value = name8 + "-view");
-      attr(div1, "class", div1_class_value = name8 + "-bottom");
-      attr(div2, "class", div2_class_value = name8 + "-root");
+      attr(div0, "class", name8 + "-view");
+      attr(div1, "class", name8 + "-bottom");
+      attr(div2, "class", name8 + "-root");
       toggle_class(div2, "loading", !ctx[0]);
     },
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[5](div0);
+      ctx[6](div0);
       append(div2, t);
       append(div2, div1);
       mount_component(playercontrol, div1, null);
@@ -10175,7 +10003,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[5](null);
+      ctx[6](null);
       destroy_component(playercontrol);
       mounted = false;
       dispose();
@@ -10183,12 +10011,13 @@ function create_fragment58(ctx) {
   };
 }
 var name8 = "fastboard";
-function instance58($$self, $$props, $$invalidate) {
+function instance57($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10216,28 +10045,28 @@ function instance58($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 9) {
-      $:
-        try {
-          if (player && container)
+      try {
+          if (player && container) {
             player.bindContainer(container);
+            $$invalidate(5, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      $:
-        if (player && theme) {
+    if ($$self.$$.dirty & 35) {
+      if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, div0_binding];
+  return [player, theme, language, container, containerRef, mounted, div0_binding];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance58, create_fragment58, safe_not_equal, {
+    init(this, options, instance57, create_fragment57, not_equal, {
       player: 0,
       theme: 1,
       language: 2,
@@ -10423,22 +10252,17 @@ function create_if_block9(ctx) {
     }
   };
 }
-function create_fragment59(ctx) {
+function create_fragment58(ctx) {
   var _a, _b, _c, _d;
   let div4;
   let div0;
-  let div0_class_value;
   let t0;
   let div1;
-  let div1_class_value;
   let t1;
   let div2;
   let t2;
-  let div2_class_value;
   let t3;
   let div3;
-  let div3_class_value;
-  let div4_class_value;
   let current;
   let mounted;
   let dispose;
@@ -10465,20 +10289,20 @@ function create_fragment59(ctx) {
       div3 = element("div");
       if (if_block3)
         if_block3.c();
-      attr(div0, "class", div0_class_value = name9 + "-view");
-      attr(div1, "class", div1_class_value = name9 + "-left");
+      attr(div0, "class", name9 + "-view");
+      attr(div1, "class", name9 + "-left");
       toggle_class(div1, "hidden", !(ctx[5] === "visible" || ctx[5] === "toolbar-only"));
-      attr(div2, "class", div2_class_value = name9 + "-bottom-left");
+      attr(div2, "class", name9 + "-bottom-left");
       toggle_class(div2, "hidden", ctx[5] !== "visible");
-      attr(div3, "class", div3_class_value = name9 + "-bottom-right");
+      attr(div3, "class", name9 + "-bottom-right");
       toggle_class(div3, "hidden", ctx[5] !== "visible");
-      attr(div4, "class", div4_class_value = name9 + "-root");
+      attr(div4, "class", name9 + "-root");
       toggle_class(div4, "loading", !ctx[0]);
     },
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[13](div0);
+      ctx[14](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10610,7 +10434,7 @@ function create_fragment59(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[13](null);
+      ctx[14](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10625,13 +10449,13 @@ function create_fragment59(ctx) {
   };
 }
 var name9 = "fastboard";
-function instance59($$self, $$props, $$invalidate) {
+function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
-  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(10, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(11, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(12, $writable = $$value)), writable2);
+  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(11, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(12, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(13, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10643,6 +10467,7 @@ function instance59($$self, $$props, $$invalidate) {
   const AppsShowToolbar = ["DocsViewer", "Slide"];
   let container;
   let layout = "hidden";
+  let mounted = false;
   onMount(() => {
     if (containerRef) {
       containerRef(container);
@@ -10672,20 +10497,16 @@ function instance59($$self, $$props, $$invalidate) {
   };
   $$self.$$.update = () => {
     if ($$self.$$.dirty & 1) {
-      $:
-        $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
+      $$subscribe_writable($$invalidate(8, writable2 = app == null ? void 0 : app.writable));
     }
     if ($$self.$$.dirty & 1) {
-      $:
-        $$subscribe_boxState($$invalidate(7, boxState = app == null ? void 0 : app.boxState));
+      $$subscribe_boxState($$invalidate(7, boxState = app == null ? void 0 : app.boxState));
     }
     if ($$self.$$.dirty & 1) {
-      $:
-        $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
+      $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
     }
-    if ($$self.$$.dirty & 7168) {
-      $:
-        if (!$writable) {
+    if ($$self.$$.dirty & 14336) {
+      if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
           if ($focusedApp && AppsShowToolbar.some((kind) => ($focusedApp || "").includes(kind))) {
@@ -10698,18 +10519,18 @@ function instance59($$self, $$props, $$invalidate) {
         }
     }
     if ($$self.$$.dirty & 17) {
-      $:
-        try {
-          if (app && container)
+      try {
+          if (app && container) {
             app.bindContainer(container);
+            $$invalidate(10, mounted = true);
+          }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 3) {
-      $:
-        if (app && theme) {
+    if ($$self.$$.dirty & 1027) {
+      if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
     }
@@ -10725,6 +10546,7 @@ function instance59($$self, $$props, $$invalidate) {
     boxState,
     writable2,
     containerRef,
+    mounted,
     $focusedApp,
     $boxState,
     $writable,
@@ -10734,7 +10556,7 @@ function instance59($$self, $$props, $$invalidate) {
 var Fastboard = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance59, create_fragment59, safe_not_equal, {
+    init(this, options, instance58, create_fragment58, not_equal, {
       app: 0,
       theme: 1,
       language: 2,
@@ -10745,6 +10567,62 @@ var Fastboard = class extends SvelteComponent {
 };
 var Fastboard_default = Fastboard;
+// src/helpers/index.ts
+function createUI(app, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new Fastboard_default({ target: div2, props: __spreadValues({ app }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
+function createReplayUI(player, div) {
+  let fastboard;
+  const ui = {
+    mount(div2, props) {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = new ReplayFastboard_default({ target: div2, props: __spreadValues({ player }, props) });
+      return ui;
+    },
+    update(props) {
+      if (fastboard) {
+        fastboard.$set(props);
+      }
+    },
+    destroy() {
+      if (fastboard) {
+        fastboard.$destroy();
+      }
+      fastboard = void 0;
+    }
+  };
+  if (div) {
+    ui.mount(div);
+  }
+  return ui;
+}
 // inline-sass-helper:inline-sass-style-helper.js
 function injectStyle(text2) {
   if (typeof document !== "undefined") {