npm - @netless/fastboard-ui - Versions diffs - 1.0.0-canary.1 → 1.0.0-canary.4 - Mend

@netless/fastboard-ui 1.0.0-canary.1 → 1.0.0-canary.4

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 (26) hide show

package/dist/index.d.ts +71 -56
package/dist/index.js +358 -296
package/dist/index.js.map +1 -1
package/dist/index.mjs +340 -260
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +340 -260
package/dist/index.svelte.mjs.map +1 -1
package/package.json +3 -3
package/src/actions/tippy.ts +9 -5
package/src/components/Button/Button.svelte.d.ts +1 -2
package/src/components/Fastboard/Fastboard.svelte +3 -3
package/src/components/Fastboard/Fastboard.svelte.ts +1 -1
package/src/components/Fastboard/ReplayFastboard.svelte +5 -2
package/src/components/Fastboard/ReplayFastboard.svelte.ts +2 -1
package/src/components/PageControl/PageControl.svelte +2 -2
package/src/components/Toolbar/README.md +1 -1
package/src/components/Toolbar/Toolbar.scss +1 -1
package/src/components/Toolbar/Toolbar.svelte +2 -1
package/src/components/Toolbar/Toolbar.svelte.d.ts +7 -1
package/src/components/Toolbar/components/constants.ts +0 -2
package/src/components/Toolbar/components/helper.ts +1 -1
package/src/components/ZoomControl/ZoomControl.svelte +1 -1
package/src/helpers/index.ts +72 -48
package/src/index.ts +8 -4
package/src/style.scss +4 -0
package/src/typings.ts +16 -6

package/dist/index.svelte.mjs CHANGED Viewed

@@ -3,25 +3,21 @@ import Tippy from 'tippy.js';
 import { writable } from 'svelte/store';
 import { onMount, createEventDispatcher } from 'svelte';
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+// inline-sass-helper:inline-sass-style-helper.js
+function injectStyle(text4) {
+  if (typeof document !== "undefined") {
+    var style = document.createElement("style");
+    var node = document.createTextNode(text4);
+    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);
 function create_else_block(ctx) {
   let current;
   const default_slot_template = ctx[4].default;
@@ -40,7 +36,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
+          );
         }
       }
     },
@@ -2801,8 +2804,7 @@ if (is_client) {
             }
           }
           function remove() {
-            var _a;
-            (_a = instance59.popper.firstElementChild) == null ? void 0 : _a.classList.remove("fastboard-tip");
+            instance59.popper.firstElementChild?.classList.remove("fastboard-tip");
           }
           return {
             onCreate: add,
@@ -2826,11 +2828,13 @@ var tippy = function(node, props) {
   };
 };
 function tippy_hide_all() {
-  document.querySelectorAll("[data-tippy-root]").forEach((el) => {
-    const instance59 = el._tippy;
-    if (instance59)
-      instance59.hide();
-  });
+  document.querySelectorAll("[data-tippy-root]").forEach(tippy_hide);
+}
+function tippy_hide(el) {
+  const instance59 = el._tippy;
+  if (instance59) {
+    instance59.hide();
+  }
 }
 var tippy_menu = {
   delay: 0,
@@ -2871,7 +2875,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])) {
@@ -3002,7 +3013,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])) {
@@ -3078,14 +3096,14 @@ function create_if_block_1(ctx) {
       if (!mounted) {
         dispose = [
           listen(button, "click", ctx[10]),
-          action_destroyer(tippy_action = tippy.call(null, button, __spreadProps(__spreadValues({
-            content: ctx[6]
-          }, tippy_menu), {
+          action_destroyer(tippy_action = tippy.call(null, button, {
+            content: ctx[6],
+            ...tippy_menu,
             placement: ctx[7],
             appendTo: document.body,
             theme: ctx[2],
             className: "fastboard-panel"
-          }))),
+          })),
           action_destroyer(tippy_action_1 = tippy.call(null, span1, {
             content: ctx[4],
             placement: ctx[5],
@@ -3098,7 +3116,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])) {
@@ -3108,14 +3133,14 @@ function create_if_block_1(ctx) {
         button.disabled = ctx2[3];
       }
       if (tippy_action && is_function(tippy_action.update) && dirty & 196)
-        tippy_action.update.call(null, __spreadProps(__spreadValues({
-          content: ctx2[6]
-        }, tippy_menu), {
+        tippy_action.update.call(null, {
+          content: ctx2[6],
+          ...tippy_menu,
           placement: ctx2[7],
           appendTo: document.body,
           theme: ctx2[2],
           className: "fastboard-panel"
-        }));
+        });
       if (!current || dirty & 2 && span0_class_value !== (span0_class_value = ctx2[1] + "-triangle")) {
         attr(span0, "class", span0_class_value);
       }
@@ -3319,12 +3344,11 @@ function create_default_slot_3(ctx) {
   };
 }
 function create_default_slot_2(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.undo[ctx[2]],
+      src: ctx[1]?.undo[ctx[2]],
       alt: "[undo]",
       $$slots: { default: [create_default_slot_3] },
       $$scope: { ctx }
@@ -3339,10 +3363,9 @@ function create_default_slot_2(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 6)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.undo[ctx2[2]];
+        icon_changes.src = ctx2[1]?.undo[ctx2[2]];
       if (dirty & 131073) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -3397,12 +3420,11 @@ function create_default_slot_1(ctx) {
   };
 }
 function create_default_slot(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.redo[ctx[2]],
+      src: ctx[1]?.redo[ctx[2]],
       alt: "[redo]",
       $$slots: { default: [create_default_slot_1] },
       $$scope: { ctx }
@@ -3417,10 +3439,9 @@ function create_default_slot(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 6)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.redo[ctx2[2]];
+        icon_changes.src = ctx2[1]?.redo[ctx2[2]];
       if (dirty & 131073) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -3562,10 +3583,10 @@ function instance46($$self, $$props, $$invalidate) {
   let { icons = void 0 } = $$props;
   let type;
   function undo() {
-    app == null ? void 0 : app.undo();
+    app?.undo();
   }
   function redo() {
-    app == null ? void 0 : app.redo();
+    app?.redo();
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
@@ -3579,7 +3600,7 @@ function instance46($$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?.writable));
     }
     if ($$self.$$.dirty & 65536) {
       $$invalidate(13, disabled = !$writable);
@@ -3591,10 +3612,10 @@ function instance46($$self, $$props, $$invalidate) {
       $$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?.canUndoSteps));
     }
     if ($$self.$$.dirty & 2048) {
-      $$subscribe_redoSteps($$invalidate(5, redoSteps = app == null ? void 0 : app.canRedoSteps));
+      $$subscribe_redoSteps($$invalidate(5, redoSteps = app?.canRedoSteps));
     }
     if ($$self.$$.dirty & 40960) {
       $$invalidate(4, undo_disabled = disabled || !$undoSteps);
@@ -3669,12 +3690,11 @@ function create_default_slot_5(ctx) {
   };
 }
 function create_default_slot_4(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.prev[ctx[5]],
+      src: ctx[1]?.prev[ctx[5]],
       alt: "[prev]",
       $$slots: { default: [create_default_slot_5] },
       $$scope: { ctx }
@@ -3689,10 +3709,9 @@ function create_default_slot_4(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.prev[ctx2[5]];
+        icon_changes.src = ctx2[1]?.prev[ctx2[5]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -3795,12 +3814,11 @@ function create_default_slot_32(ctx) {
   };
 }
 function create_default_slot_22(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.next[ctx[5]],
+      src: ctx[1]?.next[ctx[5]],
       alt: "[next]",
       $$slots: { default: [create_default_slot_32] },
       $$scope: { ctx }
@@ -3815,10 +3833,9 @@ function create_default_slot_22(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.next[ctx2[5]];
+        icon_changes.src = ctx2[1]?.next[ctx2[5]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -3873,12 +3890,11 @@ function create_default_slot_12(ctx) {
   };
 }
 function create_default_slot2(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.add[ctx[5]],
+      src: ctx[1]?.add[ctx[5]],
       alt: "[add]",
       $$slots: { default: [create_default_slot_12] },
       $$scope: { ctx }
@@ -3893,10 +3909,9 @@ function create_default_slot2(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.add[ctx2[5]];
+        icon_changes.src = ctx2[1]?.add[ctx2[5]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -4106,14 +4121,14 @@ function instance47($$self, $$props, $$invalidate) {
   let { icons = void 0 } = $$props;
   let type;
   function prevPage() {
-    app == null ? void 0 : app.prevPage();
+    app?.prevPage();
   }
   function nextPage() {
-    app == null ? void 0 : app.nextPage();
+    app?.nextPage();
   }
   function addPage() {
-    app == null ? void 0 : app.addPage({ after: true });
-    app == null ? void 0 : app.nextPage();
+    app?.addPage({ after: true });
+    app?.nextPage();
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
@@ -4127,7 +4142,7 @@ function instance47($$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?.writable));
     }
     if ($$self.$$.dirty & 131072) {
       $$invalidate(2, disabled = !$writable);
@@ -4139,10 +4154,10 @@ function instance47($$self, $$props, $$invalidate) {
       $$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?.pageIndex));
     }
     if ($$self.$$.dirty & 32768) {
-      $$subscribe_length($$invalidate(8, length = app == null ? void 0 : app.sceneLength));
+      $$subscribe_length($$invalidate(8, length = app?.pageLength));
     }
     if ($$self.$$.dirty & 20) {
       $$invalidate(7, prev_disabled = disabled || !$index);
@@ -4225,12 +4240,11 @@ function create_default_slot_52(ctx) {
   };
 }
 function create_default_slot_42(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.plus[ctx[4]],
+      src: ctx[1]?.plus[ctx[4]],
       alt: "[plus]",
       $$slots: { default: [create_default_slot_52] },
       $$scope: { ctx }
@@ -4245,10 +4259,9 @@ function create_default_slot_42(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 18)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.plus[ctx2[4]];
+        icon_changes.src = ctx2[1]?.plus[ctx2[4]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -4343,12 +4356,11 @@ function create_default_slot_33(ctx) {
   };
 }
 function create_default_slot_23(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.minus[ctx[4]],
+      src: ctx[1]?.minus[ctx[4]],
       alt: "[minus]",
       $$slots: { default: [create_default_slot_33] },
       $$scope: { ctx }
@@ -4363,10 +4375,9 @@ function create_default_slot_23(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 18)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.minus[ctx2[4]];
+        icon_changes.src = ctx2[1]?.minus[ctx2[4]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -4421,12 +4432,11 @@ function create_default_slot_13(ctx) {
   };
 }
 function create_default_slot3(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.reset[ctx[4]],
+      src: ctx[1]?.reset[ctx[4]],
       alt: "[reset]",
       $$slots: { default: [create_default_slot_13] },
       $$scope: { ctx }
@@ -4441,10 +4451,9 @@ function create_default_slot3(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 18)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.reset[ctx2[4]];
+        icon_changes.src = ctx2[1]?.reset[ctx2[4]];
       if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -4682,21 +4691,21 @@ function instance48($$self, $$props, $$invalidate) {
   let { icons = void 0 } = $$props;
   let type;
   function plus() {
-    app == null ? void 0 : app.moveCamera({
+    app?.moveCamera({
       scale: next_scale(scale, 1),
       centerX: 0,
       centerY: 0
     });
   }
   function minus() {
-    app == null ? void 0 : app.moveCamera({
+    app?.moveCamera({
       scale: next_scale(scale, -1),
       centerX: 0,
       centerY: 0
     });
   }
   function reset() {
-    app == null ? void 0 : app.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
+    app?.moveCamera({ scale: 1, centerX: 0, centerY: 0 });
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
@@ -4709,9 +4718,8 @@ function instance48($$self, $$props, $$invalidate) {
       $$invalidate(1, icons = $$props2.icons);
   };
   $$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?.writable));
     }
     if ($$self.$$.dirty & 131072) {
       $$invalidate(2, disabled = !$writable);
@@ -4723,10 +4731,10 @@ function instance48($$self, $$props, $$invalidate) {
       $$invalidate(4, 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?.baseCamera));
     }
     if ($$self.$$.dirty & 8) {
-      $$invalidate(16, scale = (_a = $camera == null ? void 0 : $camera.scale) != null ? _a : 1);
+      $$invalidate(16, scale = $camera?.scale ?? 1);
     }
     if ($$self.$$.dirty & 65540) {
       $$invalidate(7, plus_disabled = disabled || next_scale(scale, 1) <= scale);
@@ -4899,8 +4907,8 @@ var scrollTop = function(node, value) {
 var AppsInToolbar = class {
   constructor(_data) {
     this._data = _data;
-    this._listeners = [];
   }
+  _listeners = [];
   get data() {
     return this._data;
   }
@@ -5174,7 +5182,7 @@ function instance50($$self, $$props, $$invalidate) {
   let { theme = "light" } = $$props;
   let { disabled = false } = $$props;
   function set_stroke_width({ detail: value2 }) {
-    app == null ? void 0 : app.setStrokeWidth(value2);
+    app?.setStrokeWidth(value2);
   }
   $$self.$$set = ($$props2) => {
     if ("app" in $$props2)
@@ -5185,12 +5193,11 @@ function instance50($$self, $$props, $$invalidate) {
       $$invalidate(5, disabled = $$props2.disabled);
   };
   $$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?.memberState));
     }
     if ($$self.$$.dirty & 128) {
-      $$invalidate(6, value = (_a = $memberState == null ? void 0 : $memberState.strokeWidth) != null ? _a : 1);
+      $$invalidate(6, value = $memberState?.strokeWidth ?? 1);
     }
     if ($$self.$$.dirty & 112) {
       $$invalidate(0, props = { value, theme, disabled });
@@ -5346,10 +5353,10 @@ function instance51($$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?.memberState));
     }
     if ($$self.$$.dirty & 64) {
-      $$invalidate(2, strokeColor = $memberState == null ? void 0 : $memberState.strokeColor);
+      $$invalidate(2, strokeColor = $memberState?.strokeColor);
     }
   };
   return [theme, disabled, strokeColor, memberState, set_stroke_color, app, $memberState];
@@ -5493,10 +5500,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?.memberState));
     }
     if ($$self.$$.dirty & 64) {
-      $$invalidate(2, textColor = $memberState == null ? void 0 : $memberState.textColor);
+      $$invalidate(2, textColor = $memberState?.textColor);
     }
   };
   return [theme, disabled, textColor, memberState, set_stroke_color, app, $memberState];
@@ -5889,23 +5896,23 @@ function instance53($$self, $$props, $$invalidate) {
       $$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?.memberState));
     }
     if ($$self.$$.dirty & 2048) {
-      $$invalidate(4, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+      $$invalidate(4, appliance = $memberState?.currentApplianceName);
     }
     if ($$self.$$.dirty & 2048) {
-      $$invalidate(3, shape = $memberState == null ? void 0 : $memberState.shapeType);
+      $$invalidate(3, shape = $memberState?.shapeType);
     }
     if ($$self.$$.dirty & 256) {
-      $$invalidate(10, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(10, hotkeys = app?.hotKeys);
     }
     if ($$self.$$.dirty & 1024) {
       $$invalidate(2, c = {
-          rectangle: hotkeys == null ? void 0 : hotkeys.changeToRectangle,
-          ellipse: hotkeys == null ? void 0 : hotkeys.changeToEllipse,
-          straight: hotkeys == null ? void 0 : hotkeys.changeToStraight,
-          arrow: hotkeys == null ? void 0 : hotkeys.changeToArrow
+          rectangle: hotkeys?.changeToRectangle,
+          ellipse: hotkeys?.changeToEllipse,
+          straight: hotkeys?.changeToStraight,
+          arrow: hotkeys?.changeToArrow
         });
     }
   };
@@ -7834,29 +7841,29 @@ function instance54($$self, $$props, $$invalidate) {
     set_store_value(top, $top = clamp($top + 32 + 4, 0, max_scroll), $top);
   }
   function clicker() {
-    app == null ? void 0 : app.setAppliance("clicker");
+    app?.setAppliance("clicker");
   }
   function selector() {
-    app == null ? void 0 : app.setAppliance("selector");
+    app?.setAppliance("selector");
   }
   function pencil() {
-    app == null ? void 0 : app.setAppliance("pencil");
+    app?.setAppliance("pencil");
   }
   function text4() {
-    app == null ? void 0 : app.setAppliance("text");
+    app?.setAppliance("text");
   }
   function select_last_shape() {
     if (applianceShapes.includes(last_shape)) {
-      app == null ? void 0 : app.setAppliance(last_shape);
+      app?.setAppliance(last_shape);
     } else {
-      app == null ? void 0 : app.setAppliance("shape", last_shape);
+      app?.setAppliance("shape", last_shape);
     }
   }
   function eraser() {
-    app == null ? void 0 : app.setAppliance("eraser");
+    app?.setAppliance("eraser");
   }
   function clear() {
-    app == null ? void 0 : app.cleanCurrentScene();
+    app?.cleanCurrentScene();
   }
   function div2_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
@@ -7913,28 +7920,28 @@ function instance54($$self, $$props, $$invalidate) {
       $$invalidate(9, t = i18n4[language]);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$invalidate(32, hotkeys = app == null ? void 0 : app.hotKeys);
+      $$invalidate(32, hotkeys = app?.hotKeys);
     }
     if ($$self.$$.dirty[0] & 512 | $$self.$$.dirty[1] & 2) {
       $$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),
-          eraser: tooltip(t.eraser, hotkeys == null ? void 0 : hotkeys.changeToEraser),
-          text: tooltip(t.text, hotkeys == null ? void 0 : hotkeys.changeToText)
+          clicker: tooltip(t.clicker, hotkeys?.changeToClick),
+          selector: tooltip(t.selector, hotkeys?.changeToSelector),
+          pencil: tooltip(t.pencil, hotkeys?.changeToPencil),
+          eraser: tooltip(t.eraser, hotkeys?.changeToEraser),
+          text: tooltip(t.text, hotkeys?.changeToText)
         });
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$subscribe_memberState($$invalidate(17, memberState = app == null ? void 0 : app.memberState));
+      $$subscribe_memberState($$invalidate(17, memberState = app?.memberState));
     }
     if ($$self.$$.dirty[1] & 8) {
-      $$invalidate(8, appliance = $memberState == null ? void 0 : $memberState.currentApplianceName);
+      $$invalidate(8, appliance = $memberState?.currentApplianceName);
     }
     if ($$self.$$.dirty[1] & 8) {
-      $$invalidate(7, shape = $memberState == null ? void 0 : $memberState.shapeType);
+      $$invalidate(7, shape = $memberState?.shapeType);
     }
     if ($$self.$$.dirty[0] & 1) {
-      $$subscribe_status($$invalidate(16, status = app == null ? void 0 : app.appsStatus));
+      $$subscribe_status($$invalidate(16, status = app?.appsStatus));
     }
     if ($$self.$$.dirty[0] & 384) {
       if (applianceShapes.includes(appliance)) {
@@ -7992,16 +7999,25 @@ function instance54($$self, $$props, $$invalidate) {
 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;
@@ -8113,7 +8129,12 @@ 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",
+        false
+      );
       attr(input, "type", "checkbox");
       attr(path0, "fill", "#fff");
       attr(path0, "stroke", "none");
@@ -8172,7 +8193,12 @@ 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",
+          false
+        );
       }
       if (dirty & 8) {
         input.checked = ctx2[3];
@@ -8253,9 +8279,8 @@ function instance55($$self, $$props, $$invalidate) {
       $$invalidate(11, config = $$props2.config);
   };
   $$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?.writable));
     }
     if ($$self.$$.dirty & 16384) {
       $$invalidate(7, disabled = !$writable);
@@ -8267,7 +8292,7 @@ function instance55($$self, $$props, $$invalidate) {
       $$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 = config.apps?.enable === false);
     }
   };
   return [
@@ -8307,12 +8332,11 @@ function get_each_context5(ctx, list, i) {
   return child_ctx;
 }
 function create_else_block_13(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.play[ctx[5]],
+      src: ctx[1]?.play[ctx[5]],
       alt: "[play]",
       $$slots: { default: [create_default_slot_54] },
       $$scope: { ctx }
@@ -8327,10 +8351,9 @@ function create_else_block_13(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.play[ctx2[5]];
+        icon_changes.src = ctx2[1]?.play[ctx2[5]];
       if (dirty & 268435457) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -8352,12 +8375,11 @@ function create_else_block_13(ctx) {
   };
 }
 function create_if_block_22(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.pause[ctx[5]],
+      src: ctx[1]?.pause[ctx[5]],
       alt: "[pause]",
       $$slots: { default: [create_default_slot_44] },
       $$scope: { ctx }
@@ -8372,10 +8394,9 @@ function create_if_block_22(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.pause[ctx2[5]];
+        icon_changes.src = ctx2[1]?.pause[ctx2[5]];
       if (dirty & 268435457) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -8397,12 +8418,11 @@ function create_if_block_22(ctx) {
   };
 }
 function create_if_block_13(ctx) {
-  var _a;
   let icon;
   let current;
   icon = new Icon_default({
     props: {
-      src: (_a = ctx[1]) == null ? void 0 : _a.loading[ctx[5]],
+      src: ctx[1]?.loading[ctx[5]],
       alt: "[loading]",
       $$slots: { default: [create_default_slot_35] },
       $$scope: { ctx }
@@ -8417,10 +8437,9 @@ function create_if_block_13(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
       if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.loading[ctx2[5]];
+        icon_changes.src = ctx2[1]?.loading[ctx2[5]];
       if (dirty & 268435457) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
@@ -9129,7 +9148,7 @@ function instance56($$self, $$props, $$invalidate) {
       $$invalidate(12, t = i18n6[language]);
     }
     if ($$self.$$.dirty & 524288) {
-      $$invalidate(21, canPlay = player == null ? void 0 : player.canplay);
+      $$invalidate(21, canPlay = player?.canplay);
     }
     if ($$self.$$.dirty & 2097152) {
       $$invalidate(4, disabled = !canPlay);
@@ -9138,16 +9157,16 @@ function instance56($$self, $$props, $$invalidate) {
       $$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?.duration));
     }
     if ($$self.$$.dirty & 524288) {
-      $$subscribe_current($$invalidate(10, current = player == null ? void 0 : player.currentTime));
+      $$subscribe_current($$invalidate(10, current = player?.currentTime));
     }
     if ($$self.$$.dirty & 524288) {
-      $$subscribe_playbackRate($$invalidate(9, playbackRate = player == null ? void 0 : player.playbackRate));
+      $$subscribe_playbackRate($$invalidate(9, playbackRate = player?.playbackRate));
     }
     if ($$self.$$.dirty & 524288) {
-      $$subscribe_phase($$invalidate(8, phase = player == null ? void 0 : player.phase));
+      $$subscribe_phase($$invalidate(8, phase = player?.phase));
     }
     if ($$self.$$.dirty & 4194304) {
       $$invalidate(3, loading = $phase === "waitingFirstFrame" || $phase === "buffering");
@@ -9199,29 +9218,69 @@ var PlayerControl = class extends SvelteComponent {
   }
 };
 var PlayerControl_default = PlayerControl;
-function create_fragment57(ctx) {
-  let div2;
-  let div0;
-  let t;
-  let div1;
+function create_if_block9(ctx) {
   let playercontrol;
   let current;
-  let mounted;
-  let dispose;
   playercontrol = new PlayerControl_default({
     props: {
       player: ctx[0],
       theme: ctx[1],
-      language: ctx[2]
+      language: ctx[2],
+      icons: ctx[3].player_control?.icons
     }
   });
+  return {
+    c() {
+      create_component(playercontrol.$$.fragment);
+    },
+    m(target, anchor) {
+      mount_component(playercontrol, target, anchor);
+      current = true;
+    },
+    p(ctx2, dirty) {
+      const playercontrol_changes = {};
+      if (dirty & 1)
+        playercontrol_changes.player = ctx2[0];
+      if (dirty & 2)
+        playercontrol_changes.theme = ctx2[1];
+      if (dirty & 4)
+        playercontrol_changes.language = ctx2[2];
+      if (dirty & 8)
+        playercontrol_changes.icons = ctx2[3].player_control?.icons;
+      playercontrol.$set(playercontrol_changes);
+    },
+    i(local) {
+      if (current)
+        return;
+      transition_in(playercontrol.$$.fragment, local);
+      current = true;
+    },
+    o(local) {
+      transition_out(playercontrol.$$.fragment, local);
+      current = false;
+    },
+    d(detaching) {
+      destroy_component(playercontrol, detaching);
+    }
+  };
+}
+function create_fragment57(ctx) {
+  let div2;
+  let div0;
+  let t;
+  let div1;
+  let current;
+  let mounted;
+  let dispose;
+  let if_block = ctx[3].player_control?.enable !== false && create_if_block9(ctx);
   return {
     c() {
       div2 = element("div");
       div0 = element("div");
       t = space();
       div1 = element("div");
-      create_component(playercontrol.$$.fragment);
+      if (if_block)
+        if_block.c();
       attr(div0, "class", name8 + "-view");
       attr(div1, "class", name8 + "-bottom");
       attr(div2, "class", name8 + "-root");
@@ -9230,25 +9289,37 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[7](div0);
+      ctx[8](div0);
       append(div2, t);
       append(div2, div1);
-      mount_component(playercontrol, div1, null);
+      if (if_block)
+        if_block.m(div1, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", ctx[4], { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[5], { passive: true, capture: true });
         mounted = true;
       }
     },
     p(ctx2, [dirty]) {
-      const playercontrol_changes = {};
-      if (dirty & 1)
-        playercontrol_changes.player = ctx2[0];
-      if (dirty & 2)
-        playercontrol_changes.theme = ctx2[1];
-      if (dirty & 4)
-        playercontrol_changes.language = ctx2[2];
-      playercontrol.$set(playercontrol_changes);
+      if (ctx2[3].player_control?.enable !== false) {
+        if (if_block) {
+          if_block.p(ctx2, dirty);
+          if (dirty & 8) {
+            transition_in(if_block, 1);
+          }
+        } else {
+          if_block = create_if_block9(ctx2);
+          if_block.c();
+          transition_in(if_block, 1);
+          if_block.m(div1, null);
+        }
+      } else if (if_block) {
+        group_outros();
+        transition_out(if_block, 1, 1, () => {
+          if_block = null;
+        });
+        check_outros();
+      }
       if (dirty & 1) {
         toggle_class(div2, "loading", !ctx2[0]);
       }
@@ -9256,18 +9327,19 @@ function create_fragment57(ctx) {
     i(local) {
       if (current)
         return;
-      transition_in(playercontrol.$$.fragment, local);
+      transition_in(if_block);
       current = true;
     },
     o(local) {
-      transition_out(playercontrol.$$.fragment, local);
+      transition_out(if_block);
       current = false;
     },
     d(detaching) {
       if (detaching)
         detach(div2);
-      ctx[7](null);
-      destroy_component(playercontrol);
+      ctx[8](null);
+      if (if_block)
+        if_block.d();
       mounted = false;
       dispose();
     }
@@ -9278,6 +9350,7 @@ function instance57($$self, $$props, $$invalidate) {
   let { player = null } = $$props;
   let { theme = "light" } = $$props;
   let { language = "en" } = $$props;
+  let { config = {} } = $$props;
   let { containerRef = void 0 } = $$props;
   let container;
   let mounted = false;
@@ -9298,7 +9371,7 @@ function instance57($$self, $$props, $$invalidate) {
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
-      $$invalidate(3, container);
+      $$invalidate(4, container);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -9308,22 +9381,24 @@ function instance57($$self, $$props, $$invalidate) {
       $$invalidate(1, theme = $$props2.theme);
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
+    if ("config" in $$props2)
+      $$invalidate(3, config = $$props2.config);
     if ("containerRef" in $$props2)
-      $$invalidate(5, containerRef = $$props2.containerRef);
+      $$invalidate(6, containerRef = $$props2.containerRef);
   };
   $$self.$$.update = () => {
-    if ($$self.$$.dirty & 9) {
+    if ($$self.$$.dirty & 17) {
       try {
           if (player && container) {
             player.bindContainer(container);
-            $$invalidate(6, mounted = true);
+            $$invalidate(7, mounted = true);
           }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 67) {
+    if ($$self.$$.dirty & 131) {
       if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
@@ -9333,6 +9408,7 @@ function instance57($$self, $$props, $$invalidate) {
     player,
     theme,
     language,
+    config,
     container,
     focus_me,
     containerRef,
@@ -9347,7 +9423,8 @@ var ReplayFastboard = class extends SvelteComponent {
       player: 0,
       theme: 1,
       language: 2,
-      containerRef: 5
+      config: 3,
+      containerRef: 6
     });
   }
 };
@@ -9405,7 +9482,8 @@ function create_if_block_23(ctx) {
     props: {
       app: ctx[0],
       theme: ctx[1],
-      language: ctx[2]
+      language: ctx[2],
+      icons: ctx[3].redo_undo?.icons
     }
   });
   return {
@@ -9424,6 +9502,8 @@ function create_if_block_23(ctx) {
         redoundo_changes.theme = ctx2[1];
       if (dirty & 4)
         redoundo_changes.language = ctx2[2];
+      if (dirty & 8)
+        redoundo_changes.icons = ctx2[3].redo_undo?.icons;
       redoundo.$set(redoundo_changes);
     },
     i(local) {
@@ -9448,7 +9528,8 @@ function create_if_block_14(ctx) {
     props: {
       app: ctx[0],
       theme: ctx[1],
-      language: ctx[2]
+      language: ctx[2],
+      icons: ctx[3].zoom_control?.icons
     }
   });
   return {
@@ -9467,6 +9548,8 @@ function create_if_block_14(ctx) {
         zoomcontrol_changes.theme = ctx2[1];
       if (dirty & 4)
         zoomcontrol_changes.language = ctx2[2];
+      if (dirty & 8)
+        zoomcontrol_changes.icons = ctx2[3].zoom_control?.icons;
       zoomcontrol.$set(zoomcontrol_changes);
     },
     i(local) {
@@ -9484,14 +9567,15 @@ function create_if_block_14(ctx) {
     }
   };
 }
-function create_if_block9(ctx) {
+function create_if_block10(ctx) {
   let pagecontrol;
   let current;
   pagecontrol = new PageControl_default({
     props: {
       app: ctx[0],
       theme: ctx[1],
-      language: ctx[2]
+      language: ctx[2],
+      icons: ctx[3].page_control?.icons
     }
   });
   return {
@@ -9510,6 +9594,8 @@ function create_if_block9(ctx) {
         pagecontrol_changes.theme = ctx2[1];
       if (dirty & 4)
         pagecontrol_changes.language = ctx2[2];
+      if (dirty & 8)
+        pagecontrol_changes.icons = ctx2[3].page_control?.icons;
       pagecontrol.$set(pagecontrol_changes);
     },
     i(local) {
@@ -9528,7 +9614,6 @@ function create_if_block9(ctx) {
   };
 }
 function create_fragment58(ctx) {
-  var _a, _b, _c, _d;
   let div4;
   let div0;
   let t0;
@@ -9541,10 +9626,10 @@ function create_fragment58(ctx) {
   let current;
   let mounted;
   let dispose;
-  let if_block0 = ((_a = ctx[3].toolbar) == null ? void 0 : _a.enable) !== false && create_if_block_32(ctx);
-  let if_block1 = ((_b = ctx[3].redo_undo) == null ? void 0 : _b.enable) !== false && create_if_block_23(ctx);
-  let if_block2 = ((_c = ctx[3].zoom_control) == null ? void 0 : _c.enable) !== false && create_if_block_14(ctx);
-  let if_block3 = ((_d = ctx[3].page_control) == null ? void 0 : _d.enable) !== false && create_if_block9(ctx);
+  let if_block0 = ctx[3].toolbar?.enable !== false && create_if_block_32(ctx);
+  let if_block1 = ctx[3].redo_undo?.enable !== false && create_if_block_23(ctx);
+  let if_block2 = ctx[3].zoom_control?.enable !== false && create_if_block_14(ctx);
+  let if_block3 = ctx[3].page_control?.enable !== false && create_if_block10(ctx);
   return {
     c() {
       div4 = element("div");
@@ -9600,8 +9685,7 @@ function create_fragment58(ctx) {
       }
     },
     p(ctx2, [dirty]) {
-      var _a2, _b2, _c2, _d2;
-      if (((_a2 = ctx2[3].toolbar) == null ? void 0 : _a2.enable) !== false) {
+      if (ctx2[3].toolbar?.enable !== false) {
         if (if_block0) {
           if_block0.p(ctx2, dirty);
           if (dirty & 8) {
@@ -9623,7 +9707,7 @@ function create_fragment58(ctx) {
       if (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) {
+      if (ctx2[3].redo_undo?.enable !== false) {
         if (if_block1) {
           if_block1.p(ctx2, dirty);
           if (dirty & 8) {
@@ -9642,7 +9726,7 @@ function create_fragment58(ctx) {
         });
         check_outros();
       }
-      if (((_c2 = ctx2[3].zoom_control) == null ? void 0 : _c2.enable) !== false) {
+      if (ctx2[3].zoom_control?.enable !== false) {
         if (if_block2) {
           if_block2.p(ctx2, dirty);
           if (dirty & 8) {
@@ -9664,14 +9748,14 @@ function create_fragment58(ctx) {
       if (dirty & 32) {
         toggle_class(div2, "hidden", ctx2[5] !== "visible");
       }
-      if (((_d2 = ctx2[3].page_control) == null ? void 0 : _d2.enable) !== false) {
+      if (ctx2[3].page_control?.enable !== false) {
         if (if_block3) {
           if_block3.p(ctx2, dirty);
           if (dirty & 8) {
             transition_in(if_block3, 1);
           }
         } else {
-          if_block3 = create_if_block9(ctx2);
+          if_block3 = create_if_block10(ctx2);
           if_block3.c();
           transition_in(if_block3, 1);
           if_block3.m(div3, null);
@@ -9777,13 +9861,13 @@ function instance58($$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?.writable));
     }
     if ($$self.$$.dirty & 1) {
-      $$subscribe_boxState($$invalidate(7, boxState = app == null ? void 0 : app.boxState));
+      $$subscribe_boxState($$invalidate(7, boxState = app?.boxState));
     }
     if ($$self.$$.dirty & 1) {
-      $$subscribe_focusedApp($$invalidate(6, focusedApp = app == null ? void 0 : app.focusedApp));
+      $$subscribe_focusedApp($$invalidate(6, focusedApp = app?.focusedApp));
     }
     if ($$self.$$.dirty & 28672) {
       if (!$writable) {
@@ -9851,74 +9935,70 @@ 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;
+  function mount(div2, props) {
+    if (fastboard) {
+      fastboard.$destroy();
     }
-  };
+    fastboard = new Fastboard_default({ target: div2, props: { app, ...props } });
+    return ui;
+  }
+  function update(props) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = void 0;
+  }
+  function setElement(div2) {
+    if (div2) {
+      mount(div2);
+    } else {
+      destroy();
+    }
+  }
+  const ui = { mount, update, destroy, setElement };
   if (div) {
-    ui.mount(div);
+    mount(div, { app });
   }
   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;
+  function mount(div2, props) {
+    if (fastboard) {
+      fastboard.$destroy();
     }
-  };
+    fastboard = new ReplayFastboard_default({ target: div2, props: { player, ...props } });
+    return ui;
+  }
+  function update(props) {
+    if (fastboard) {
+      fastboard.$set(props);
+    }
+  }
+  function destroy() {
+    if (fastboard) {
+      fastboard.$destroy();
+    }
+    fastboard = void 0;
+  }
+  function setElement(div2) {
+    if (div2) {
+      mount(div2);
+    } else {
+      destroy();
+    }
+  }
+  const ui = { mount, update, destroy, setElement };
   if (div) {
-    ui.mount(div);
+    mount(div, { player });
   }
   return ui;
 }
-// inline-sass-helper:inline-sass-style-helper.js
-function injectStyle(text4) {
-  if (typeof document !== "undefined") {
-    var style = document.createElement("style");
-    var node = document.createTextNode(text4);
-    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=index.svelte.mjs.map