@netless/fastboard-ui 0.3.5 → 0.3.7

package/dist/index.mjs

@@ -19,8 +19,28 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// inline-sass-helper:inline-sass-style-helper.js
+function injectStyle(text2) {
+  if (typeof document !== "undefined") {
+    var style = document.createElement("style");
+    var node = document.createTextNode(text2);
+    style.appendChild(node);
+    document.head.appendChild(style);
+  }
+}
+
+// inline-sass-content:./src/style.scss
+var style_default = '.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-visible{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:rgba(0,0,0,0);border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:#0000}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid rgba(0,0,0,0);position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid rgba(0,0,0,0)}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:#0000;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}.netless-whiteboard:focus-visible{outline:none}';
+
+// inline-sass-stub:./src/style.scss
+injectStyle(style_default);
 
-// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
+// ../../node_modules/.pnpm/svelte@3.54.0/node_modules/svelte/internal/index.mjs
 function noop() {
 }
 function assign(tar, src) {
@@ -126,7 +146,9 @@ function insert(target, node, anchor) {
   target.insertBefore(node, anchor || null);
 }
 function detach(node) {
-  node.parentNode.removeChild(node);
+  if (node.parentNode) {
+    node.parentNode.removeChild(node);
+  }
 }
 function destroy_each(iterations, detaching) {
   for (let i = 0; i < iterations.length; i += 1) {
@@ -188,6 +210,9 @@ function custom_event(type, detail, { bubbles = false, cancelable = false } = {}
   e.initCustomEvent(type, bubbles, cancelable, detail);
   return e;
 }
+function construct_svelte_component(component, props) {
+  return new component(props);
+}
 var current_component;
 function set_current_component(component) {
   current_component = component;
@@ -431,13 +456,13 @@ function create_component(block) {
   block && block.c();
 }
 function mount_component(component, target, anchor, customElement) {
-  const { fragment, on_mount, on_destroy, after_update } = component.$$;
+  const { fragment, after_update } = component.$$;
   fragment && fragment.m(target, anchor);
   if (!customElement) {
     add_render_callback(() => {
-      const new_on_destroy = on_mount.map(run).filter(is_function);
-      if (on_destroy) {
-        on_destroy.push(...new_on_destroy);
+      const new_on_destroy = component.$$.on_mount.map(run).filter(is_function);
+      if (component.$$.on_destroy) {
+        component.$$.on_destroy.push(...new_on_destroy);
       } else {
         run_all(new_on_destroy);
       }
@@ -468,7 +493,7 @@ function init(component, options, instance59, create_fragment59, not_equal2, pro
   set_current_component(component);
   const $$ = component.$$ = {
     fragment: null,
-    ctx: null,
+    ctx: [],
     props,
     update: noop,
     not_equal: not_equal2,
@@ -521,6 +546,9 @@ var SvelteComponent = class {
     this.$destroy = noop;
   }
   $on(type, callback) {
+    if (!is_function(callback)) {
+      return noop;
+    }
     const callbacks = this.$$.callbacks[type] || (this.$$.callbacks[type] = []);
     callbacks.push(callback);
     return () => {
@@ -557,7 +585,14 @@ function create_else_block(ctx) {
     p(ctx2, dirty) {
       if (default_slot) {
         if (default_slot.p && (!current || dirty & 8)) {
-          update_slot_base(default_slot, default_slot_template, ctx2, ctx2[3], !current ? get_all_dirty_from_scope(ctx2[3]) : get_slot_changes(default_slot_template, ctx2[3], dirty, null), null);
+          update_slot_base(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            ctx2[3],
+            !current ? get_all_dirty_from_scope(ctx2[3]) : get_slot_changes(default_slot_template, ctx2[3], dirty, null),
+            null
+          );
         }
       }
     },
@@ -3474,7 +3509,14 @@ function create_else_block_1(ctx) {
     p(ctx2, dirty) {
       if (default_slot) {
         if (default_slot.p && (!current || dirty & 256)) {
-          update_slot_base(default_slot, default_slot_template, ctx2, ctx2[8], !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null), null);
+          update_slot_base(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            ctx2[8],
+            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            null
+          );
         }
       }
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
@@ -3605,7 +3647,14 @@ function create_else_block2(ctx) {
     p(ctx2, dirty) {
       if (default_slot) {
         if (default_slot.p && (!current || dirty & 256)) {
-          update_slot_base(default_slot, default_slot_template, ctx2, ctx2[8], !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null), null);
+          update_slot_base(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            ctx2[8],
+            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            null
+          );
         }
       }
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
@@ -3701,7 +3750,14 @@ function create_if_block_1(ctx) {
     p(ctx2, dirty) {
       if (default_slot) {
         if (default_slot.p && (!current || dirty & 256)) {
-          update_slot_base(default_slot, default_slot_template, ctx2, ctx2[8], !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null), null);
+          update_slot_base(
+            default_slot,
+            default_slot_template,
+            ctx2,
+            ctx2[8],
+            !current ? get_all_dirty_from_scope(ctx2[8]) : get_slot_changes(default_slot_template, ctx2[8], dirty, null),
+            null
+          );
         }
       }
       if (!current || dirty & 7 && button_class_value !== (button_class_value = ctx2[1] + "-btn " + ctx2[0] + " " + ctx2[2])) {
@@ -5373,7 +5429,7 @@ var ZoomControl = class extends SvelteComponent {
 };
 var ZoomControl_default = ZoomControl;
 
-// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/store/index.mjs
+// ../../node_modules/.pnpm/svelte@3.54.0/node_modules/svelte/store/index.mjs
 var subscriber_queue = [];
 function writable(value, start = noop) {
   let stop;
@@ -5523,7 +5579,7 @@ var scrollTop = function(node, value) {
   let timer = 0;
   function on_scroll() {
     clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
+    timer = window.setTimeout(() => value.set(node.scrollTop), 200);
   }
   node.addEventListener("scroll", on_scroll);
   let unsubscribe = value.subscribe(listener);
@@ -5553,7 +5609,7 @@ var countdown_default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3d
 var AppsInToolbar = class {
   constructor(_data) {
     this._data = _data;
-    this._listeners = [];
+    __publicField(this, "_listeners", []);
   }
   get data() {
     return this._data;
@@ -5926,7 +5982,7 @@ function create_each_block(key_1, ctx) {
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(span, "background-color", ctx[7], false);
+      set_style(span, "background-color", ctx[7]);
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
       attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
@@ -6075,7 +6131,7 @@ function create_each_block2(key_1, ctx) {
       span = element("span");
       t = space();
       attr(span, "class", "fastboard-toolbar-color-item");
-      set_style(span, "background-color", ctx[7], false);
+      set_style(span, "background-color", ctx[7]);
       attr(button, "class", button_class_value = "fastboard-toolbar-btn fastboard-toolbar-color-btn " + ctx[0]);
       attr(button, "data-color-key", ctx[7]);
       button.disabled = ctx[1];
@@ -6222,7 +6278,7 @@ function create_else_block5(ctx) {
     return { props: { theme: ctx2[0] } };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -6231,9 +6287,8 @@ function create_else_block5(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -6251,7 +6306,7 @@ function create_else_block5(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -6293,7 +6348,7 @@ function create_if_block5(ctx) {
     };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -6302,9 +6357,8 @@ function create_if_block5(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -6322,7 +6376,7 @@ function create_if_block5(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -6431,7 +6485,7 @@ function create_each_block3(key_1, ctx) {
           content: tooltip(ctx[6][ctx[12]], ctx[2][ctx[12]]),
           placement: "top"
         });
-      if (dirty & 25) {
+      if (!current || dirty & 25) {
         toggle_class(button, "is-active", ctx[13]);
       }
     },
@@ -6638,19 +6692,18 @@ var Shapes_default = Shapes;
 // src/components/Toolbar/components/Contents.svelte
 function get_each_context4(ctx, list, i) {
   const child_ctx = ctx.slice();
-  child_ctx[41] = list[i];
-  const constants_0 = child_ctx[41];
-  child_ctx[42] = constants_0.icon;
-  child_ctx[43] = constants_0.label;
-  child_ctx[44] = constants_0.kind;
-  child_ctx[45] = constants_0.onClick;
-  const constants_1 = child_ctx[20] && child_ctx[20][child_ctx[44]];
-  child_ctx[46] = constants_1;
-  const constants_2 = () => {
-    child_ctx[0] && child_ctx[45](child_ctx[0]);
-    tippy_hide_all();
-  };
-  child_ctx[47] = constants_2;
+  child_ctx[42] = list[i];
+  const constants_0 = child_ctx[42];
+  child_ctx[43] = constants_0.icon;
+  child_ctx[44] = constants_0.label;
+  child_ctx[45] = constants_0.kind;
+  child_ctx[46] = constants_0.onClick;
+  const constants_1 = child_ctx[20] && child_ctx[20][child_ctx[45]];
+  child_ctx[47] = constants_1;
+  const constants_2 = function func() {
+    return ctx[38](child_ctx[46]);
+  };
+  child_ctx[48] = constants_2;
   return child_ctx;
 }
 function create_if_block_8(ctx) {
@@ -6676,7 +6729,7 @@ function create_if_block_8(ctx) {
     },
     p(ctx2, dirty) {
       const button_changes = dirty[0] & 32768 ? get_spread_update(button_spread_levels, [button_spread_levels[0], get_spread_object(ctx2[15])]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
+      if (dirty[0] & 2 | dirty[1] & 1048576) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7262,7 +7315,7 @@ function create_else_block_12(ctx) {
     return { props: { theme: ctx2[1] } };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -7271,9 +7324,8 @@ function create_else_block_12(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -7291,7 +7343,7 @@ function create_else_block_12(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -7333,7 +7385,7 @@ function create_if_block_3(ctx) {
     };
   }
   if (switch_value) {
-    switch_instance = new switch_value(switch_props(ctx));
+    switch_instance = construct_svelte_component(switch_value, switch_props(ctx));
   }
   return {
     c() {
@@ -7342,9 +7394,8 @@ function create_if_block_3(ctx) {
       switch_instance_anchor = empty();
     },
     m(target, anchor) {
-      if (switch_instance) {
+      if (switch_instance)
         mount_component(switch_instance, target, anchor);
-      }
       insert(target, switch_instance_anchor, anchor);
       current = true;
     },
@@ -7362,7 +7413,7 @@ function create_if_block_3(ctx) {
           check_outros();
         }
         if (switch_value) {
-          switch_instance = new switch_value(switch_props(ctx2));
+          switch_instance = construct_svelte_component(switch_value, switch_props(ctx2));
           create_component(switch_instance.$$.fragment);
           transition_in(switch_instance.$$.fragment, 1);
           mount_component(switch_instance, switch_instance_anchor.parentNode, switch_instance_anchor);
@@ -7654,7 +7705,7 @@ function create_if_block_12(ctx) {
         dirty[0] & 16384 && { menu: ctx2[14] },
         button_spread_levels[4]
       ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
+      if (dirty[0] & 2 | dirty[1] & 1048576) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7735,7 +7786,7 @@ function create_if_block6(ctx) {
         button_changes.theme = ctx2[1];
       if (dirty[0] & 8)
         button_changes.disabled = ctx2[3];
-      if (dirty[0] & 2 | dirty[1] & 524288) {
+      if (dirty[0] & 2 | dirty[1] & 1048576) {
         button_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button.$set(button_changes);
@@ -7797,7 +7848,7 @@ function create_each_block4(ctx) {
   let img_title_value;
   let t0;
   let span;
-  let t1_value = ctx[43] + "";
+  let t1_value = ctx[44] + "";
   let t1;
   let span_class_value;
   let t2;
@@ -7816,17 +7867,17 @@ function create_each_block4(ctx) {
       t1 = text(t1_value);
       t2 = space();
       attr(img, "class", img_class_value = name5 + "-app-btn-icon " + ctx[1]);
-      if (!src_url_equal(img.src, img_src_value = ctx[42]))
+      if (!src_url_equal(img.src, img_src_value = ctx[43]))
         attr(img, "src", img_src_value);
-      attr(img, "alt", img_alt_value = ctx[44]);
-      attr(img, "title", img_title_value = ctx[43]);
+      attr(img, "alt", img_alt_value = ctx[45]);
+      attr(img, "title", img_title_value = ctx[44]);
       attr(span, "class", span_class_value = name5 + "-app-btn-text " + ctx[1]);
-      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1]);
-      attr(button, "title", button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""));
-      attr(button, "data-app-kind", button_data_app_kind_value = ctx[41].kind);
-      button.disabled = button_disabled_value = ctx[46] && ctx[46].status !== "idle";
-      toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
-      toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
+      attr(button, "class", button_class_value = name5 + "-app-btn " + ctx[45] + " " + ctx[1]);
+      attr(button, "title", button_title_value = ctx[44] + (ctx[47] && ctx[47].reason ? ": " + ctx[47].reason : ""));
+      attr(button, "data-app-kind", button_data_app_kind_value = ctx[42].kind);
+      button.disabled = button_disabled_value = ctx[47] && ctx[47].status !== "idle";
+      toggle_class(button, "is-loading", ctx[47] && ctx[47].status === "loading");
+      toggle_class(button, "is-failed", ctx[47] && ctx[47].status === "failed");
     },
     m(target, anchor) {
       insert(target, button, anchor);
@@ -7837,8 +7888,8 @@ function create_each_block4(ctx) {
       append(button, t2);
       if (!mounted) {
         dispose = listen(button, "click", function() {
-          if (is_function(ctx[47]))
-            ctx[47].apply(this, arguments);
+          if (is_function(ctx[48]))
+            ctx[48].apply(this, arguments);
         });
         mounted = true;
       }
@@ -7848,37 +7899,37 @@ function create_each_block4(ctx) {
       if (dirty[0] & 2 && img_class_value !== (img_class_value = name5 + "-app-btn-icon " + ctx[1])) {
         attr(img, "class", img_class_value);
       }
-      if (dirty[0] & 524288 && !src_url_equal(img.src, img_src_value = ctx[42])) {
+      if (dirty[0] & 524288 && !src_url_equal(img.src, img_src_value = ctx[43])) {
         attr(img, "src", img_src_value);
       }
-      if (dirty[0] & 524288 && img_alt_value !== (img_alt_value = ctx[44])) {
+      if (dirty[0] & 524288 && img_alt_value !== (img_alt_value = ctx[45])) {
         attr(img, "alt", img_alt_value);
       }
-      if (dirty[0] & 524288 && img_title_value !== (img_title_value = ctx[43])) {
+      if (dirty[0] & 524288 && img_title_value !== (img_title_value = ctx[44])) {
         attr(img, "title", img_title_value);
       }
-      if (dirty[0] & 524288 && t1_value !== (t1_value = ctx[43] + ""))
+      if (dirty[0] & 524288 && t1_value !== (t1_value = ctx[44] + ""))
         set_data(t1, t1_value);
       if (dirty[0] & 2 && span_class_value !== (span_class_value = name5 + "-app-btn-text " + ctx[1])) {
         attr(span, "class", span_class_value);
       }
-      if (dirty[0] & 524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[44] + " " + ctx[1])) {
+      if (dirty[0] & 524290 && button_class_value !== (button_class_value = name5 + "-app-btn " + ctx[45] + " " + ctx[1])) {
         attr(button, "class", button_class_value);
       }
-      if (dirty[0] & 1572864 && button_title_value !== (button_title_value = ctx[43] + (ctx[46] && ctx[46].reason ? ": " + ctx[46].reason : ""))) {
+      if (dirty[0] & 1572864 && button_title_value !== (button_title_value = ctx[44] + (ctx[47] && ctx[47].reason ? ": " + ctx[47].reason : ""))) {
         attr(button, "title", button_title_value);
       }
-      if (dirty[0] & 524288 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[41].kind)) {
+      if (dirty[0] & 524288 && button_data_app_kind_value !== (button_data_app_kind_value = ctx[42].kind)) {
         attr(button, "data-app-kind", button_data_app_kind_value);
       }
-      if (dirty[0] & 1572864 && button_disabled_value !== (button_disabled_value = ctx[46] && ctx[46].status !== "idle")) {
+      if (dirty[0] & 1572864 && button_disabled_value !== (button_disabled_value = ctx[47] && ctx[47].status !== "idle")) {
         button.disabled = button_disabled_value;
       }
       if (dirty[0] & 1572866) {
-        toggle_class(button, "is-loading", ctx[46] && ctx[46].status === "loading");
+        toggle_class(button, "is-loading", ctx[47] && ctx[47].status === "loading");
       }
       if (dirty[0] & 1572866) {
-        toggle_class(button, "is-failed", ctx[46] && ctx[46].status === "failed");
+        toggle_class(button, "is-failed", ctx[47] && ctx[47].status === "failed");
       }
     },
     d(detaching) {
@@ -8198,7 +8249,7 @@ function create_fragment54(ctx) {
       for (let i = 0; i < each_blocks.length; i += 1) {
         each_blocks[i].m(div7, null);
       }
-      ctx[38](div7);
+      ctx[39](div7);
       current = true;
       if (!mounted) {
         dispose = [
@@ -8233,7 +8284,7 @@ function create_fragment54(ctx) {
         dirty[0] & 32768 && get_spread_object(ctx2[15]),
         dirty[0] & 262144 && { content: ctx2[18].clicker }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 1048576) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
@@ -8242,7 +8293,7 @@ function create_fragment54(ctx) {
         dirty[0] & 32768 && get_spread_object(ctx2[15]),
         dirty[0] & 262144 && { content: ctx2[18].selector }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 1048576) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
@@ -8252,7 +8303,7 @@ function create_fragment54(ctx) {
         dirty[0] & 262144 && { content: ctx2[18].pencil },
         dirty[0] & 2048 && { menu: ctx2[11] }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 1048576) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
@@ -8262,7 +8313,7 @@ function create_fragment54(ctx) {
         dirty[0] & 262144 && { content: ctx2[18].text },
         dirty[0] & 4096 && { menu: ctx2[12] }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 1048576) {
         button3_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button3.$set(button3_changes);
@@ -8272,7 +8323,7 @@ function create_fragment54(ctx) {
         dirty[0] & 512 && { content: ctx2[9].shapes },
         dirty[0] & 8192 && { menu: ctx2[13] }
       ]) : {};
-      if (dirty[0] & 1410 | dirty[1] & 524288) {
+      if (dirty[0] & 1410 | dirty[1] & 1048576) {
         button4_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button4.$set(button4_changes);
@@ -8281,7 +8332,7 @@ function create_fragment54(ctx) {
         dirty[0] & 32768 && get_spread_object(ctx2[15]),
         dirty[0] & 262144 && { content: ctx2[18].eraser }
       ]) : {};
-      if (dirty[0] & 258 | dirty[1] & 524288) {
+      if (dirty[0] & 258 | dirty[1] & 1048576) {
         button5_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button5.$set(button5_changes);
@@ -8290,7 +8341,7 @@ function create_fragment54(ctx) {
         dirty[0] & 32768 && get_spread_object(ctx2[15]),
         dirty[0] & 512 && { content: ctx2[9].clear }
       ]) : {};
-      if (dirty[0] & 2 | dirty[1] & 524288) {
+      if (dirty[0] & 2 | dirty[1] & 1048576) {
         button6_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button6.$set(button6_changes);
@@ -8315,7 +8366,7 @@ function create_fragment54(ctx) {
       }
       if (scrollHeight_action && is_function(scrollHeight_action.update) && dirty[0] & 16)
         scrollHeight_action.update.call(null, ctx2[4]);
-      if (dirty[0] & 32) {
+      if (!current || dirty[0] & 32) {
         toggle_class(div0, "scrollable", ctx2[5]);
       }
       if (ctx2[5]) {
@@ -8483,7 +8534,7 @@ function create_fragment54(ctx) {
       destroy_component(strokecolor1);
       ctx[37](null);
       destroy_each(each_blocks, detaching);
-      ctx[38](null);
+      ctx[39](null);
       mounted = false;
       run_all(dispose);
     }
@@ -8524,7 +8575,7 @@ function instance54($$self, $$props, $$invalidate) {
   let apps_panel;
   let btn_props;
   let top = writable(0);
-  component_subscribe($$self, top, (value) => $$invalidate(40, $top = value));
+  component_subscribe($$self, top, (value) => $$invalidate(41, $top = value));
   function scroll_up() {
     set_store_value(top, $top = clamp($top - 32 - 4, 0, max_scroll), $top);
   }
@@ -8574,6 +8625,10 @@ function instance54($$self, $$props, $$invalidate) {
       $$invalidate(13, shapes_panel);
     });
   }
+  const func = (onClick) => {
+    app && onClick(app);
+    tippy_hide_all();
+  };
   function div7_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       apps_panel = $$value;
@@ -8684,22 +8739,32 @@ function instance54($$self, $$props, $$invalidate) {
     div2_binding,
     div3_binding,
     div6_binding,
+    func,
     div7_binding
   ];
 }
 var Contents = class extends SvelteComponent {
   constructor(options) {
     super();
-    init(this, options, instance54, create_fragment54, safe_not_equal, {
-      app: 0,
-      theme: 1,
-      language: 2,
-      disabled: 3,
-      scroll_height: 4,
-      computed_height: 31,
-      scrollable: 5,
-      hide_apps: 6
-    }, null, [-1, -1]);
+    init(
+      this,
+      options,
+      instance54,
+      create_fragment54,
+      safe_not_equal,
+      {
+        app: 0,
+        theme: 1,
+        language: 2,
+        disabled: 3,
+        scroll_height: 4,
+        computed_height: 31,
+        scrollable: 5,
+        hide_apps: 6
+      },
+      null,
+      [-1, -1]
+    );
   }
 };
 var Contents_default = Contents;
@@ -8811,7 +8876,7 @@ function create_fragment55(ctx) {
       path1 = svg_element("path");
       if_block.c();
       attr(div0, "class", div0_class_value = name6 + "-contents " + ctx[1]);
-      set_style(div0, "height", ctx[5] ? ctx[6] + "px" : "auto", false);
+      set_style(div0, "height", ctx[5] ? ctx[6] + "px" : "auto");
       attr(input, "type", "checkbox");
       attr(path0, "fill", "#fff");
       attr(path0, "stroke", "none");
@@ -8870,7 +8935,7 @@ function create_fragment55(ctx) {
         attr(div0, "class", div0_class_value);
       }
       if (dirty & 96) {
-        set_style(div0, "height", ctx2[5] ? ctx2[6] + "px" : "auto", false);
+        set_style(div0, "height", ctx2[5] ? ctx2[6] + "px" : "auto");
       }
       if (dirty & 8) {
         input.checked = ctx2[3];
@@ -8891,7 +8956,7 @@ function create_fragment55(ctx) {
       if (!current || dirty & 2 && div1_class_value !== (div1_class_value = name6 + " " + ctx2[1])) {
         attr(div1, "class", div1_class_value);
       }
-      if (dirty & 10) {
+      if (!current || dirty & 10) {
         toggle_class(div1, "collapsed", ctx2[3]);
       }
     },
@@ -9951,7 +10016,7 @@ function create_fragment57(ctx) {
       if (dirty & 4)
         playercontrol_changes.language = ctx2[2];
       playercontrol.$set(playercontrol_changes);
-      if (dirty & 1) {
+      if (!current || dirty & 1) {
         toggle_class(div2, "loading", !ctx2[0]);
       }
     },
@@ -10324,7 +10389,7 @@ function create_fragment58(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div1, "hidden", !(ctx2[5] === "visible" || ctx2[5] === "toolbar-only"));
       }
       if (((_b2 = ctx2[3].redo_undo) == null ? void 0 : _b2.enable) !== false) {
@@ -10365,7 +10430,7 @@ function create_fragment58(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div2, "hidden", ctx2[5] !== "visible");
       }
       if (((_d2 = ctx2[3].page_control) == null ? void 0 : _d2.enable) !== false) {
@@ -10387,10 +10452,10 @@ function create_fragment58(ctx) {
         });
         check_outros();
       }
-      if (dirty & 32) {
+      if (!current || dirty & 32) {
         toggle_class(div3, "hidden", ctx2[5] !== "visible");
       }
-      if (dirty & 1) {
+      if (!current || dirty & 1) {
         toggle_class(div4, "loading", !ctx2[0]);
       }
     },
@@ -10576,7 +10641,7 @@ function createUI(app, div) {
     }
   };
   if (div) {
-    ui.mount(div);
+    ui.mount(div, { app });
   }
   return ui;
 }
@@ -10603,26 +10668,11 @@ function createReplayUI(player, div) {
     }
   };
   if (div) {
-    ui.mount(div);
+    ui.mount(div, { player });
   }
   return ui;
 }
 
-// inline-sass-helper:inline-sass-style-helper.js
-function injectStyle(text2) {
-  if (typeof document !== "undefined") {
-    var style = document.createElement("style");
-    var node = document.createTextNode(text2);
-    style.appendChild(node);
-    document.head.appendChild(style);
-  }
-}
-
-// inline-sass-content:./src/style.scss
-var style_default = '.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}.tippy-box[data-theme~=light]{color:#26323d;box-shadow:0 0 20px 4px #9aa1b126,0 4px 80px -8px #24282f40,0 4px 4px -2px #5b5e6926;background-color:#fff}.tippy-box[data-theme~=light][data-placement^=top]>.tippy-arrow:before{border-top-color:#fff}.tippy-box[data-theme~=light][data-placement^=bottom]>.tippy-arrow:before{border-bottom-color:#fff}.tippy-box[data-theme~=light][data-placement^=left]>.tippy-arrow:before{border-left-color:#fff}.tippy-box[data-theme~=light][data-placement^=right]>.tippy-arrow:before{border-right-color:#fff}.tippy-box[data-theme~=light]>.tippy-backdrop{background-color:#fff}.tippy-box[data-theme~=light]>.tippy-svg-arrow{fill:#fff}.fastboard-icon.light .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-icon.light .fastboard-icon-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-icon.light.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #3381ff)}.fastboard-icon.light.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #3381ff)}.fastboard-icon.dark .fastboard-icon-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark .fastboard-icon-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-icon.dark.is-active .fastboard-icon-stroke-color{stroke:var(--fastboard-active-color, #2867cc)}.fastboard-icon.dark.is-active .fastboard-icon-fill-color{fill:var(--fastboard-active-color, #2867cc)}.fastboard-redo-undo{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-redo-undo *{box-sizing:inherit}.fastboard-redo-undo.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-redo-undo.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-redo-undo-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-redo-undo-btn svg,.fastboard-redo-undo-btn img{width:100%;height:100%;pointer-events:none}.fastboard-redo-undo-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-redo-undo-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-zoom-control *{box-sizing:inherit}.fastboard-zoom-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-zoom-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-zoom-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-zoom-control-btn svg,.fastboard-zoom-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-zoom-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-zoom-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-text{font-variant-numeric:tabular-nums}.fastboard-page-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.fastboard-page-control *{box-sizing:inherit}.fastboard-page-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-page-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-page-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-page-control-btn svg,.fastboard-page-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-page-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-page-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-text{font-variant-numeric:tabular-nums}.fastboard-player-control{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);width:100%}.fastboard-player-control *{box-sizing:inherit}.fastboard-player-control.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-player-control.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-player-control-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:0;width:24px;height:24px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0;display:inline}.fastboard-player-control-btn svg,.fastboard-player-control-btn img{width:100%;height:100%;pointer-events:none}.fastboard-player-control-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-player-control-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.loading svg,.fastboard-player-control-btn.loading img{animation:fastboard-player-control-rotate .5s linear infinite}@keyframes fastboard-player-control-rotate{to{transform:rotate(360deg)}}.fastboard-player-control-btn.speed{width:auto;padding:4px;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}.fastboard-player-control-btn.is-active.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-player-control-btn.is-active.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-player-control-speed-text,.fastboard-player-control-progress{font-size:14px;font-variant-numeric:tabular-nums;line-height:16px}.fastboard-player-control-progress{display:inline-flex;align-items:center}.fastboard-player-control-panel.speed{display:flex;flex-direction:column}.fastboard-toolbar{height:100%;display:flex;align-items:center;position:relative;transform:translate(0);transition:transform .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{transform:translate(-100%)}.fastboard-toolbar-handler{position:absolute;left:100%;width:17px;font-size:0;border-radius:3px;cursor:pointer;pointer-events:auto}.fastboard-toolbar-handler:focus-within{outline:2px solid -webkit-focus-ring-color}.fastboard-toolbar-handler input[type=checkbox]{position:absolute;top:0;left:0;appearance:none;margin:0;width:100%;height:100%;cursor:pointer;opacity:0;z-index:-1}.fastboard-toolbar-handler svg{opacity:0;transition:opacity .5s 1s;pointer-events:none}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(255, 255, 255, .9))}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.light .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #5d6066)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-bg-color{fill:var(--fastboard-bg-color, rgba(20, 24, 30, .9))}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-border-color{stroke:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-stroke-color{stroke:var(--fastboard-color, #7b7e84)}.fastboard-toolbar-handler.dark .fastboard-toolbar-handler-image-fill-color{fill:var(--fastboard-color, #7b7e84)}.fastboard-toolbar:hover .fastboard-toolbar-handler svg,.fastboard-toolbar.collapsed .fastboard-toolbar-handler svg{opacity:1;transition:opacity .2s}.fastboard-toolbar-btn{appearance:none;cursor:pointer;margin:0;border:0;padding:4px;width:32px;height:32px;background-color:#0000;border-radius:4px;font-size:0;line-height:1;flex-shrink:0}.fastboard-toolbar-btn svg,.fastboard-toolbar-btn img{width:100%;height:100%;pointer-events:none}.fastboard-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}.fastboard-toolbar-btn.light:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-slider{box-sizing:border-box;position:relative;width:100%;height:100%;display:flex;align-items:center}.fastboard-slider *{box-sizing:inherit}.fastboard-slider-track{appearance:none;background:rgba(0,0,0,0);border:0;border-radius:26px;flex:1;display:block;height:19px;margin:0;width:0;min-width:0;padding:0;transition:box-shadow .3s ease;cursor:pointer;touch-action:manipulation}.fastboard-slider-track::-webkit-slider-runnable-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;background-image:linear-gradient(to right,currentColor var(--value, 0%),transparent var(--value, 0%))}.fastboard-slider-track::-webkit-slider-thumb{background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;appearance:none;margin-top:-4px}.fastboard-slider-track::-moz-range-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none}.fastboard-slider-track::-moz-range-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab}.fastboard-slider-track::-moz-range-progress{background:currentColor;border-radius:2.5px;height:5px}.fastboard-slider-track::-ms-track{border:0;border-radius:2.5px;height:5px;transition:box-shadow .3s ease;user-select:none;background-color:#80808040;-webkit-user-select:none;color:#0000}.fastboard-slider-track::-ms-thumb{appearance:none;background:#fff;border:0;border-radius:100%;box-shadow:0 1px 1px #23292f26,0 0 0 1px #23292f33;width:13px;height:13px;position:relative;transition:all .2s ease;cursor:grab;margin-top:0}.fastboard-slider-track::-ms-tooltip{display:none}.fastboard-slider-track::-moz-focus-outer{border:0}.fastboard-slider-track.grabbing::-webkit-slider-thumb{cursor:grabbing}.fastboard-slider-track.light{color:var(--fastboard-active-color, #3381ff)}.fastboard-slider-track.dark{color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-contents{box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;border:1px solid;border-radius:4px;font-size:14px;font-family:system-ui;pointer-events:auto;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);padding:2px 0;gap:0;flex-direction:column}.fastboard-toolbar-contents *{box-sizing:inherit}.fastboard-toolbar-contents.light{color:var(--fastboard-color, #5d6066);background-color:var(--fastboard-bg-color, rgba(255, 255, 255, .9));border-color:var(--fastboard-border-color, #e5e8f0)}.fastboard-toolbar-contents.dark{color:var(--fastboard-color, #7b7e84);background-color:var(--fastboard-bg-color, rgba(20, 24, 30, .9));border-color:var(--fastboard-border-color, #383b42)}.fastboard-toolbar-contents>.fastboard-toolbar-btn{margin:2px 4px}.fastboard-toolbar-btn-interactive{position:relative}.fastboard-toolbar-triangle{width:0px;height:0px;border-bottom:4px solid;border-left:4px solid rgba(0,0,0,0);position:absolute;bottom:0;right:0}.fastboard-toolbar-btn:focus+.fastboard-toolbar-triangle{opacity:0}.fastboard-toolbar-scrollable{padding:2px 4px;overflow:hidden;display:flex;flex-direction:column;gap:4px}.fastboard-toolbar-tooltip{display:inline-flex;align-items:center;gap:4px}.fastboard-toolbar-hotkey{display:inline-flex;margin-right:-4px;width:24px;height:24px;align-items:center;justify-content:center;background-color:#ffffff1a;border-radius:4px}.fastboard-toolbar-panel-wrapper{display:none}.fastboard-toolbar-panel{display:flex;flex-direction:column}.fastboard-toolbar-panel-divider{height:.5px;width:100%;margin:4px 0;background-color:#ffffff26}.fastboard-toolbar-colors,.fastboard-toolbar-shapes{display:grid;align-self:center;grid-template:repeat(2,1fr)/repeat(4,1fr);align-items:center;justify-items:center;gap:4px}.fastboard-toolbar-shape-btn,.fastboard-toolbar-color-btn{width:24px;height:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.fastboard-toolbar-color-btn{border:1px solid rgba(0,0,0,0)}.fastboard-toolbar-color-btn.light.is-active{border-color:var(--fastboard-active-color, #3381ff)}.fastboard-toolbar-color-btn.dark.is-active{border-color:var(--fastboard-active-color, #2867cc)}.fastboard-toolbar-color-item{display:inline-block;width:16px;height:16px;border-radius:4px;pointer-events:none}.fastboard-toolbar-panel.apps{display:grid;grid-template-columns:repeat(min(var(--n, 3),3),minmax(max-content,1fr));gap:4px}.fastboard-toolbar-app-btn{margin:0;border:0;border-radius:2px;padding:4px 6px;background-color:#0000;display:inline-flex;flex-direction:column;align-items:center;gap:4px;font-size:0}.fastboard-toolbar-app-btn:disabled{opacity:.8}.fastboard-toolbar-app-btn-icon{width:32px;height:32px;pointer-events:none}.fastboard-toolbar-app-btn-text{font-size:14px;line-height:1;max-width:100%;overflow:hidden;text-overflow:ellipsis}.fastboard-toolbar-app-btn.is-loading{cursor:progress}.fastboard-toolbar-app-btn.is-failed{cursor:not-allowed;opacity:.5}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.light{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #ebf2ff)}.fastboard-toolbar-app-btn-text.light{color:var(--fastboard-color, #5d6066)}.fastboard-toolbar-app-btn:not(:disabled,.is-loading,.is-failed):hover.dark{cursor:pointer;background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-app-btn-text.dark{color:var(--fastboard-color, #7b7e84)}.fastboard-root{position:relative;width:100%;height:100%;overflow:hidden}.fastboard-view{position:absolute;top:0;left:0;width:100%;height:100%}.fastboard-left{display:flex;align-items:center;position:absolute;bottom:62px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left:16px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left:8px;padding:8px;z-index:200;pointer-events:none}.fastboard-bottom-right{left:auto;right:8px}.fastboard-bottom{right:8px}.fastboard-left.hidden *,.fastboard-bottom.hidden *,.fastboard-bottom-left.hidden *,.fastboard-bottom-right.hidden *{opacity:0;pointer-events:none}.fastboard-tip{font-family:inherit;color:#d5d9e0;background-color:#03060d}.fastboard-tip[data-placement^=right]>.tippy-arrow:before{top:4px;border-width:4px;border-right-color:#03060d}.fastboard-tip[data-placement^=top]>.tippy-arrow:before{left:4px;border-width:4px;border-top-color:#03060d}.fastboard-panel .tippy-content{padding:8px}';
-
-// inline-sass-stub:./src/style.scss
-injectStyle(style_default);
-
 export { Fastboard_default as Fastboard, PageControl_default as PageControl, PlayerControl_default as PlayerControl, RedoUndo_default as RedoUndo, ReplayFastboard_default as ReplayFastboard, Toolbar_default as Toolbar, ZoomControl_default as ZoomControl, apps, createReplayUI, createUI };
+//# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.mjs.map