npm - @netless/fastboard-ui - Versions diffs - 1.0.0-canary.0 → 1.0.0-canary.3 - Mend

@netless/fastboard-ui 1.0.0-canary.0 → 1.0.0-canary.3

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

package/dist/index.d.ts +71 -56
package/dist/index.js +428 -383
package/dist/index.js.map +1 -1
package/dist/index.mjs +410 -347
package/dist/index.mjs.map +1 -1
package/dist/index.svelte.mjs +406 -345
package/dist/index.svelte.mjs.map +1 -1
package/package.json +3 -3
package/src/actions/tippy.ts +9 -5
package/src/behaviors/apps.ts +4 -38
package/src/components/Button/Button.svelte.d.ts +1 -2
package/src/components/Fastboard/Fastboard.svelte +11 -4
package/src/components/Fastboard/Fastboard.svelte.ts +1 -1
package/src/components/Fastboard/ReplayFastboard.svelte +13 -3
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 +6 -4
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.js CHANGED Viewed

@@ -1,60 +1,30 @@
 'use strict';
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-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));
-var __export = (target, all) => {
-  for (var name10 in all)
-    __defProp(target, name10, { get: all[name10], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+Object.defineProperty(exports, '__esModule', { value: true });
+var Tippy = require('tippy.js');
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var Tippy__default = /*#__PURE__*/_interopDefaultLegacy(Tippy);
+// 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);
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+}
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Fastboard: () => Fastboard_default,
-  PageControl: () => PageControl_default,
-  PlayerControl: () => PlayerControl_default,
-  RedoUndo: () => RedoUndo_default,
-  ReplayFastboard: () => ReplayFastboard_default,
-  Toolbar: () => Toolbar_default,
-  ZoomControl: () => ZoomControl_default,
-  apps: () => apps,
-  createReplayUI: () => createReplayUI,
-  createUI: () => createUI
-});
-module.exports = __toCommonJS(src_exports);
+// 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}';
-// ../../node_modules/.pnpm/svelte@3.48.0/node_modules/svelte/internal/index.mjs
+// inline-sass-stub:./src/style.scss
+injectStyle(style_default);
+// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/internal/index.mjs
 function noop() {
 }
 function assign(tar, src) {
@@ -346,6 +316,8 @@ function transition_out(block, local, detach2, callback) {
       }
     });
     block.o(local);
+  } else if (callback) {
+    callback();
   }
 }
 function destroy_block(block, lookup) {
@@ -589,7 +561,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
+          );
         }
       }
     },
@@ -3414,11 +3393,8 @@ var Icons = {
   Loading: Loading_default
 };
 var Icons_default = Icons;
-// src/actions/tippy.ts
-var import_tippy = __toESM(require("tippy.js"));
 if (is_client) {
-  import_tippy.default.setDefaultProps({
+  Tippy__default["default"].setDefaultProps({
     delay: [1e3, 400],
     duration: 300,
     offset: [0, 11],
@@ -3439,8 +3415,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,
@@ -3453,7 +3428,7 @@ if (is_client) {
   });
 }
 var tippy = function(node, props) {
-  const instance59 = (0, import_tippy.default)(node, props);
+  const instance59 = Tippy__default["default"](node, props);
   return {
     update(props2) {
       instance59.setProps(props2);
@@ -3464,11 +3439,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,
@@ -3509,7 +3486,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])) {
@@ -3640,7 +3624,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])) {
@@ -3716,14 +3707,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],
@@ -3736,7 +3727,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])) {
@@ -3746,14 +3744,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);
       }
@@ -3957,12 +3955,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 }
@@ -3977,10 +3974,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 };
       }
@@ -4035,12 +4031,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 }
@@ -4055,10 +4050,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 };
       }
@@ -4200,10 +4194,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)
@@ -4217,7 +4211,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);
@@ -4229,10 +4223,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);
@@ -4309,12 +4303,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 }
@@ -4329,10 +4322,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 };
       }
@@ -4435,12 +4427,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 }
@@ -4455,10 +4446,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 };
       }
@@ -4513,12 +4503,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 }
@@ -4533,10 +4522,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 };
       }
@@ -4746,14 +4734,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)
@@ -4767,7 +4755,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);
@@ -4779,10 +4767,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);
@@ -4865,12 +4853,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[5]],
+      src: ctx[1]?.plus[ctx[4]],
       alt: "[plus]",
       $$slots: { default: [create_default_slot_52] },
       $$scope: { ctx }
@@ -4885,11 +4872,10 @@ function create_default_slot_42(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
-      if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.plus[ctx2[5]];
-      if (dirty & 131073) {
+      if (dirty & 18)
+        icon_changes.src = ctx2[1]?.plus[ctx2[4]];
+      if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
       icon.$set(icon_changes);
@@ -4910,12 +4896,11 @@ function create_default_slot_42(ctx) {
   };
 }
 function create_else_block4(ctx) {
-  let t0_value = Math.ceil(ctx[2] * 100) + "";
   let t0;
   let t1;
   return {
     c() {
-      t0 = text(t0_value);
+      t0 = text(ctx[5]);
       t1 = text("%");
     },
     m(target, anchor) {
@@ -4923,8 +4908,8 @@ function create_else_block4(ctx) {
       insert(target, t1, anchor);
     },
     p(ctx2, dirty) {
-      if (dirty & 4 && t0_value !== (t0_value = Math.ceil(ctx2[2] * 100) + ""))
-        set_data(t0, t0_value);
+      if (dirty & 32)
+        set_data(t0, ctx2[5]);
     },
     d(detaching) {
       if (detaching)
@@ -4984,12 +4969,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[5]],
+      src: ctx[1]?.minus[ctx[4]],
       alt: "[minus]",
       $$slots: { default: [create_default_slot_33] },
       $$scope: { ctx }
@@ -5004,11 +4988,10 @@ function create_default_slot_23(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
-      if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.minus[ctx2[5]];
-      if (dirty & 131073) {
+      if (dirty & 18)
+        icon_changes.src = ctx2[1]?.minus[ctx2[4]];
+      if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
       icon.$set(icon_changes);
@@ -5062,12 +5045,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[5]],
+      src: ctx[1]?.reset[ctx[4]],
       alt: "[reset]",
       $$slots: { default: [create_default_slot_13] },
       $$scope: { ctx }
@@ -5082,11 +5064,10 @@ function create_default_slot3(ctx) {
       current = true;
     },
     p(ctx2, dirty) {
-      var _a2;
       const icon_changes = {};
-      if (dirty & 34)
-        icon_changes.src = (_a2 = ctx2[1]) == null ? void 0 : _a2.reset[ctx2[5]];
-      if (dirty & 131073) {
+      if (dirty & 18)
+        icon_changes.src = ctx2[1]?.reset[ctx2[4]];
+      if (dirty & 262145) {
         icon_changes.$$scope = { dirty, ctx: ctx2 };
       }
       icon.$set(icon_changes);
@@ -5131,7 +5112,7 @@ function create_fragment48(ctx) {
   });
   button0.$on("click", ctx[11]);
   function select_block_type(ctx2, dirty) {
-    if (ctx2[4] == null)
+    if (ctx2[3] == null)
       return create_if_block4;
     return create_else_block4;
   }
@@ -5154,7 +5135,7 @@ function create_fragment48(ctx) {
       class: "reset",
       name: name3,
       theme: ctx[0],
-      disabled: ctx[3],
+      disabled: ctx[2],
       content: ctx[9].reset,
       $$slots: { default: [create_default_slot3] },
       $$scope: { ctx }
@@ -5195,7 +5176,7 @@ function create_fragment48(ctx) {
         button0_changes.disabled = ctx2[7];
       if (dirty & 512)
         button0_changes.content = ctx2[9].plus;
-      if (dirty & 131107) {
+      if (dirty & 262163) {
         button0_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button0.$set(button0_changes);
@@ -5219,18 +5200,18 @@ function create_fragment48(ctx) {
         button1_changes.disabled = ctx2[6];
       if (dirty & 512)
         button1_changes.content = ctx2[9].minus;
-      if (dirty & 131107) {
+      if (dirty & 262163) {
         button1_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button1.$set(button1_changes);
       const button2_changes = {};
       if (dirty & 1)
         button2_changes.theme = ctx2[0];
-      if (dirty & 8)
-        button2_changes.disabled = ctx2[3];
+      if (dirty & 4)
+        button2_changes.disabled = ctx2[2];
       if (dirty & 512)
         button2_changes.content = ctx2[9].reset;
-      if (dirty & 131107) {
+      if (dirty & 262163) {
         button2_changes.$$scope = { dirty, ctx: ctx2 };
       }
       button2.$set(button2_changes);
@@ -5312,8 +5293,9 @@ function instance48($$self, $$props, $$invalidate) {
   let scale;
   let plus_disabled;
   let minus_disabled;
-  let $camera, $$unsubscribe_camera = noop, $$subscribe_camera = () => ($$unsubscribe_camera(), $$unsubscribe_camera = subscribe(camera, ($$value) => $$invalidate(4, $camera = $$value)), camera);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(16, $writable = $$value)), writable2);
+  let display_scale;
+  let $camera, $$unsubscribe_camera = noop, $$subscribe_camera = () => ($$unsubscribe_camera(), $$unsubscribe_camera = subscribe(camera, ($$value) => $$invalidate(3, $camera = $$value)), camera);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(17, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_camera());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
   let { app = null } = $$props;
@@ -5322,21 +5304,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)
@@ -5349,39 +5331,41 @@ 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 & 65536) {
-      $$invalidate(3, disabled = !$writable);
+    if ($$self.$$.dirty & 131072) {
+      $$invalidate(2, disabled = !$writable);
     }
     if ($$self.$$.dirty & 32768) {
       $$invalidate(9, t = i18n3[language]);
     }
-    if ($$self.$$.dirty & 8) {
-      $$invalidate(5, type = disabled ? "disable" : "normal");
+    if ($$self.$$.dirty & 4) {
+      $$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 & 16) {
-      $$invalidate(2, scale = (_a = $camera == null ? void 0 : $camera.scale) != null ? _a : 1);
+    if ($$self.$$.dirty & 8) {
+      $$invalidate(16, scale = $camera?.scale ?? 1);
     }
-    if ($$self.$$.dirty & 12) {
-      $$invalidate(7, plus_disabled = disabled || next_scale(scale, 1) === scale);
+    if ($$self.$$.dirty & 65540) {
+      $$invalidate(7, plus_disabled = disabled || next_scale(scale, 1) <= scale);
     }
-    if ($$self.$$.dirty & 12) {
-      $$invalidate(6, minus_disabled = disabled || next_scale(scale, -1) === scale);
+    if ($$self.$$.dirty & 65540) {
+      $$invalidate(6, minus_disabled = disabled || next_scale(scale, -1) >= scale);
+    }
+    if ($$self.$$.dirty & 65536) {
+      $$invalidate(5, display_scale = clamp(Math.round(scale * 100), 30, 300));
     }
   };
   return [
     theme,
     icons,
-    scale,
     disabled,
     $camera,
     type,
+    display_scale,
     minus_disabled,
     plus_disabled,
     camera,
@@ -5392,6 +5376,7 @@ function instance48($$self, $$props, $$invalidate) {
     reset,
     app,
     language,
+    scale,
     $writable
   ];
 }
@@ -5408,7 +5393,7 @@ var ZoomControl = class extends SvelteComponent {
 };
 var ZoomControl_default = ZoomControl;
-// ../../node_modules/.pnpm/svelte@3.48.0/node_modules/svelte/store/index.mjs
+// ../../node_modules/.pnpm/svelte@3.49.0/node_modules/svelte/store/index.mjs
 var subscriber_queue = [];
 function writable(value, start = noop) {
   let stop;
@@ -5575,21 +5560,12 @@ var scrollTop = function(node, value) {
   };
 };
-// src/behaviors/icons/visual-studio-code.svg
-var visual_studio_code_default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMS4wMWVtIiBoZWlnaHQ9IjFlbSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDI1NiAyNTQiIHN0eWxlPSItbXMtdHJhbnNmb3JtOiByb3RhdGUoMzYwZGVnKTsgLXdlYmtpdC10cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJJY29uaWZ5SWQtMTdmODcyMTU1YmUtY2M3NjZlLTU0MzkiIHgxPSI1MCUiIHgyPSI1MCUiIHkxPSIwJSIgeTI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGRkYiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNGRkYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggaWQ9Ikljb25pZnlJZC0xN2Y4NzIxNTViZS1jYzc2NmUtNTQ0MCIgZD0iTTE4MC44MjggMjUyLjYwNWExNS44NzIgMTUuODcyIDAgMCAwIDEyLjY1LS40ODZsNTIuNTAxLTI1LjI2MmExNS45NCAxNS45NCAwIDAgMCA5LjAyNS0xNC4zNjRWNDEuMTk3YTE1LjkzOSAxNS45MzkgMCAwIDAtOS4wMjUtMTQuMzYzbC01Mi41LTI1LjI2M2ExNS44NzcgMTUuODc3IDAgMCAwLTE4LjExNSAzLjA4NEw3NC44NTcgOTYuMzVsLTQzLjc4LTMzLjIzMmExMC42MTQgMTAuNjE0IDAgMCAwLTEzLjU2LjYwM0wzLjQ3NiA3Ni40OTRjLTQuNjMgNC4yMTEtNC42MzUgMTEuNDk1LS4wMTIgMTUuNzEzbDM3Ljk2NyAzNC42MzhsLTM3Ljk2NyAzNC42MzdjLTQuNjIzIDQuMjE5LTQuNjE4IDExLjUwMi4wMTIgMTUuNzE0bDE0LjA0MSAxMi43NzJhMTAuNjE0IDEwLjYxNCAwIDAgMCAxMy41Ni42MDRsNDMuNzgtMzMuMjMzbDEwMC41MDcgOTEuNjk1YTE1Ljg1MyAxNS44NTMgMCAwIDAgNS40NjQgMy41NzFabTEwLjQ2NC0xODMuNjQ5bC03Ni4yNjIgNTcuODg5bDc2LjI2MiA1Ny44ODhWNjguOTU2WiIvPjwvZGVmcz48bWFzayBpZD0iSWNvbmlmeUlkLTE3Zjg3MjE1NWJlLWNjNzY2ZS01NDQxIiBmaWxsPSIjZmZmIj48dXNlIGhyZWY9IiNJY29uaWZ5SWQtMTdmODcyMTU1YmUtY2M3NjZlLTU0NDAiLz48L21hc2s+PHBhdGggZmlsbD0iIzAwNjVBOSIgZD0iTTI0Ni4xMzUgMjYuODczTDE5My41OTMgMS41NzVhMTUuODg1IDE1Ljg4NSAwIDAgMC0xOC4xMjMgMy4wOEwzLjQ2NiAxNjEuNDgyYy00LjYyNiA0LjIxOS00LjYyIDExLjUwMi4wMTIgMTUuNzE0bDE0LjA1IDEyLjc3MmExMC42MjUgMTAuNjI1IDAgMCAwIDEzLjU2OS42MDRMMjM4LjIyOSAzMy40MzZjNi45NDktNS4yNzEgMTYuOTMtLjMxNSAxNi45MyA4LjQwN3YtLjYxYTE1LjkzOCAxNS45MzggMCAwIDAtOS4wMjQtMTQuMzZaIiBtYXNrPSJ1cmwoI0ljb25pZnlJZC0xN2Y4NzIxNTViZS1jYzc2NmUtNTQ0MSkiLz48cGF0aCBmaWxsPSIjMDA3QUNDIiBkPSJtMjQ2LjEzNSAyMjYuODE2bC01Mi41NDIgMjUuMjk4YTE1Ljg4NyAxNS44ODcgMCAwIDEtMTguMTIzLTMuMDhMMy40NjYgOTIuMjA3Yy00LjYyNi00LjIxOC00LjYyLTExLjUwMi4wMTItMTUuNzEzbDE0LjA1LTEyLjc3M2ExMC42MjUgMTAuNjI1IDAgMCAxIDEzLjU2OS0uNjAzbDIwNy4xMzIgMTU3LjEzNWM2Ljk0OSA1LjI3MSAxNi45My4zMTUgMTYuOTMtOC40MDh2LjYxMWExNS45MzkgMTUuOTM5IDAgMCAxLTkuMDI0IDE0LjM2WiIgbWFzaz0idXJsKCNJY29uaWZ5SWQtMTdmODcyMTU1YmUtY2M3NjZlLTU0NDEpIi8+PHBhdGggZmlsbD0iIzFGOUNGMCIgZD0iTTE5My40MjggMjUyLjEzNGExNS44OTIgMTUuODkyIDAgMCAxLTE4LjEyNS0zLjA4M2M1Ljg4MSA1Ljg4IDE1LjkzOCAxLjcxNSAxNS45MzgtNi42MDNWMTEuMjczYzAtOC4zMTgtMTAuMDU3LTEyLjQ4My0xNS45MzgtNi42MDJhMTUuODkyIDE1Ljg5MiAwIDAgMSAxOC4xMjUtMy4wODRsNTIuNTMzIDI1LjI2M2ExNS45MzcgMTUuOTM3IDAgMCAxIDkuMDMgMTQuMzYzVjIxMi41MWMwIDYuMTI1LTMuNTEgMTEuNzA5LTkuMDMgMTQuMzYzbC01Mi41MzMgMjUuMjYyWiIgbWFzaz0idXJsKCNJY29uaWZ5SWQtMTdmODcyMTU1YmUtY2M3NjZlLTU0NDEpIi8+PHBhdGggZmlsbD0idXJsKCNJY29uaWZ5SWQtMTdmODcyMTU1YmUtY2M3NjZlLTU0MzkpIiBmaWxsLW9wYWNpdHk9Ii4yNSIgZD0iTTE4MC44MjggMjUyLjYwNWExNS44NzQgMTUuODc0IDAgMCAwIDEyLjY1LS40ODZsNTIuNS0yNS4yNjNhMTUuOTM4IDE1LjkzOCAwIDAgMCA5LjAyNi0xNC4zNjNWNDEuMTk3YTE1LjkzOSAxNS45MzkgMCAwIDAtOS4wMjUtMTQuMzYzTDE5My40NzcgMS41N2ExNS44NzcgMTUuODc3IDAgMCAwLTE4LjExNCAzLjA4NEw3NC44NTcgOTYuMzVsLTQzLjc4LTMzLjIzMmExMC42MTQgMTAuNjE0IDAgMCAwLTEzLjU2LjYwM0wzLjQ3NiA3Ni40OTRjLTQuNjMgNC4yMTEtNC42MzUgMTEuNDk1LS4wMTIgMTUuNzEzbDM3Ljk2NyAzNC42MzhsLTM3Ljk2NyAzNC42MzdjLTQuNjIzIDQuMjE5LTQuNjE4IDExLjUwMi4wMTIgMTUuNzE0bDE0LjA0MSAxMi43NzJhMTAuNjE0IDEwLjYxNCAwIDAgMCAxMy41Ni42MDRsNDMuNzgtMzMuMjMzbDEwMC41MDYgOTEuNjk1YTE1Ljg1NyAxNS44NTcgMCAwIDAgNS40NjUgMy41NzFabTEwLjQ2NC0xODMuNjVsLTc2LjI2MiA1Ny44OWw3Ni4yNjIgNTcuODg4VjY4Ljk1NloiIG1hc2s9InVybCgjSWNvbmlmeUlkLTE3Zjg3MjE1NWJlLWNjNzY2ZS01NDQxKSIvPjwvc3ZnPg==";
-// src/behaviors/icons/geogebra.svg
-var geogebra_default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1hcmN0aWNvbnMiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48cGF0aCBmaWxsPSJub25lIiBzdHJva2U9IiM2NTU3ZDIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMjQgM2E0Ljc3IDQuNzcgMCAxIDAgNC43NyA0Ljc3QTQuNzggNC43OCAwIDAgMCAyNCAzWk03LjY5IDE0Ljg2YTQuNzcgNC43NyAwIDEgMCA0Ljc2IDQuNzdhNC43NiA0Ljc2IDAgMCAwLTQuNzYtNC43N1ptMzIuNjQgMGE0Ljc3IDQuNzcgMCAxIDAgNC43NyA0Ljc3YTQuNzcgNC43NyAwIDAgMC00Ljc3LTQuNzdaTTEzLjkyIDM0LjA1YTQuNzcgNC43NyAwIDEgMCA0Ljc3IDQuNzdhNC43NiA0Ljc2IDAgMCAwLTQuNzctNC43N1ptMjAuMTggMGE0Ljc3IDQuNzcgMCAxIDAgNC43NiA0Ljc3YTQuNzYgNC43NiAwIDAgMC00Ljc2LTQuNzdaIj48L3BhdGg+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNjU1N2QyIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTE5LjI3IDguMzVhMTcuMjQgMTcuMjQgMCAwIDAtOS43MyA2Ljg3bTI4LjUxLjIyYTE3LjI4IDE3LjI4IDAgMCAwLTkuMzQtNi45NG04LjcgMjYuODlBMTcuMDkgMTcuMDkgMCAwIDAgNDAuOTMgMjV2LS42MU0xOCA0MS4yMmExNy4yMyAxNy4yMyAwIDAgMCA1LjY4IDFhMTcgMTcgMCAwIDAgNi4yLTEuMjJNNi41MyAyNC4yNXYuNzJhMTcuMTYgMTcuMTYgMCAwIDAgMy43NyAxMC43NiI+PC9wYXRoPjwvc3ZnPg==";
-// src/behaviors/icons/countdown.svg
-var countdown_default = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiBhcmlhLWhpZGRlbj0idHJ1ZSIgcm9sZT0iaW1nIiBjbGFzcz0iaWNvbmlmeSBpY29uaWZ5LS1yYWRpeC1pY29ucyIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0IiB2aWV3Qm94PSIwIDAgMTUgMTUiPjxwYXRoIGZpbGw9ImdyZXkiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTEzLjE1IDcuNWMwLTIuODM1LTIuMjEtNS42NS01LjY1LTUuNjVjLTIuNzc4IDAtNC4xNTEgMi4wNTYtNC43MzcgMy4xNUg0LjVhLjUuNSAwIDAgMSAwIDFoLTNhLjUuNSAwIDAgMS0uNS0uNXYtM2EuNS41IDAgMCAxIDEgMHYxLjgxM0MyLjcwNSAzLjA3MSA0LjMzNC44NSA3LjUuODVjNC4wNjMgMCA2LjY1IDMuMzM1IDYuNjUgNi42NWMwIDMuMzE1LTIuNTg3IDYuNjUtNi42NSA2LjY1Yy0xLjk0NCAwLTMuNTYyLS43Ny00LjcxNS0xLjk0MmE2Ljc3MiA2Ljc3MiAwIDAgMS0xLjQyNy0yLjE2N2EuNS41IDAgMSAxIC45MjUtLjM4Yy4yOC42ODEuNjkyIDEuMzE0IDEuMjE2IDEuODQ2Yy45NzIuOTkgMi4zMzYgMS42NDMgNC4wMDEgMS42NDNjMy40NCAwIDUuNjUtMi44MTUgNS42NS01LjY1Wk03IDEwVjVoMXY1SDdaIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiPjwvcGF0aD48L3N2Zz4=";
 // src/behaviors/apps.ts
 var AppsInToolbar = class {
   constructor(_data) {
     this._data = _data;
-    this._listeners = [];
   }
+  _listeners = [];
   get data() {
     return this._data;
   }
@@ -5620,41 +5596,7 @@ var AppsInToolbar = class {
     this._listeners.forEach((fn) => fn(this._data));
   }
 };
-var apps = new AppsInToolbar([
-  {
-    kind: "Monaco",
-    icon: visual_studio_code_default,
-    label: "Code Editor",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Monaco",
-        options: { title: "Code Editor" }
-      });
-    }
-  },
-  {
-    kind: "GeoGebra",
-    icon: geogebra_default,
-    label: "GeoGebra",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "GeoGebra",
-        options: { title: "GeoGebra" }
-      });
-    }
-  },
-  {
-    kind: "Countdown",
-    icon: countdown_default,
-    label: "Countdown",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Countdown",
-        options: { title: "Countdown" }
-      });
-    }
-  }
-]);
+var apps = new AppsInToolbar([]);
 // src/components/Toolbar/components/helper.ts
 function tooltip(text2, hotkey) {
@@ -5901,7 +5843,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)
@@ -5912,12 +5854,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 });
@@ -6075,10 +6016,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];
@@ -6224,10 +6165,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];
@@ -6622,23 +6563,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
         });
     }
   };
@@ -8567,29 +8508,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 text2() {
-    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"](() => {
@@ -8646,28 +8587,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)) {
@@ -8725,16 +8666,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;
@@ -8846,7 +8796,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");
@@ -8905,7 +8860,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];
@@ -8986,9 +8946,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);
@@ -9000,7 +8959,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 [
@@ -9042,12 +9001,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 }
@@ -9062,10 +9020,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 };
       }
@@ -9087,12 +9044,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 }
@@ -9107,10 +9063,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 };
       }
@@ -9132,12 +9087,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 }
@@ -9152,10 +9106,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 };
       }
@@ -9864,7 +9817,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);
@@ -9873,16 +9826,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");
@@ -9936,29 +9889,69 @@ var PlayerControl = class extends SvelteComponent {
 var PlayerControl_default = PlayerControl;
 // src/components/Fastboard/ReplayFastboard.svelte
-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");
@@ -9967,25 +9960,37 @@ function create_fragment57(ctx) {
     m(target, anchor) {
       insert(target, div2, anchor);
       append(div2, div0);
-      ctx[6](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", tippy_hide_all, { 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]);
       }
@@ -9993,18 +9998,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[6](null);
-      destroy_component(playercontrol);
+      ctx[8](null);
+      if (if_block)
+        if_block.d();
       mounted = false;
       dispose();
     }
@@ -10015,6 +10021,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;
@@ -10027,10 +10034,15 @@ function instance57($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
-      $$invalidate(3, container);
+      $$invalidate(4, container);
     });
   }
   $$self.$$set = ($$props2) => {
@@ -10040,28 +10052,40 @@ 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(4, 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(5, mounted = true);
+            $$invalidate(7, mounted = true);
           }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 35) {
+    if ($$self.$$.dirty & 131) {
       if (player && theme && mounted) {
           player.manager.setPrefersColorScheme(theme);
         }
     }
   };
-  return [player, theme, language, container, containerRef, mounted, div0_binding];
+  return [
+    player,
+    theme,
+    language,
+    config,
+    container,
+    focus_me,
+    containerRef,
+    mounted,
+    div0_binding
+  ];
 }
 var ReplayFastboard = class extends SvelteComponent {
   constructor(options) {
@@ -10070,7 +10094,8 @@ var ReplayFastboard = class extends SvelteComponent {
       player: 0,
       theme: 1,
       language: 2,
-      containerRef: 4
+      config: 3,
+      containerRef: 6
     });
   }
 };
@@ -10130,7 +10155,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 {
@@ -10149,6 +10175,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) {
@@ -10173,7 +10201,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 {
@@ -10192,6 +10221,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) {
@@ -10209,14 +10240,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 {
@@ -10235,6 +10267,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) {
@@ -10253,7 +10287,6 @@ function create_if_block9(ctx) {
   };
 }
 function create_fragment58(ctx) {
-  var _a, _b, _c, _d;
   let div4;
   let div0;
   let t0;
@@ -10266,10 +10299,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");
@@ -10302,7 +10335,7 @@ function create_fragment58(ctx) {
     m(target, anchor) {
       insert(target, div4, anchor);
       append(div4, div0);
-      ctx[14](div0);
+      ctx[15](div0);
       append(div4, t0);
       append(div4, div1);
       if (if_block0)
@@ -10320,13 +10353,12 @@ function create_fragment58(ctx) {
         if_block3.m(div3, null);
       current = true;
       if (!mounted) {
-        dispose = listen(div0, "touchstart", tippy_hide_all, { passive: true, capture: true });
+        dispose = listen(div0, "touchstart", ctx[9], { passive: true, capture: true });
         mounted = true;
       }
     },
     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) {
@@ -10348,7 +10380,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) {
@@ -10367,7 +10399,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) {
@@ -10389,14 +10421,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);
@@ -10434,7 +10466,7 @@ function create_fragment58(ctx) {
     d(detaching) {
       if (detaching)
         detach(div4);
-      ctx[14](null);
+      ctx[15](null);
       if (if_block0)
         if_block0.d();
       if (if_block1)
@@ -10453,9 +10485,9 @@ function instance58($$self, $$props, $$invalidate) {
   let writable2;
   let boxState;
   let focusedApp;
-  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(11, $focusedApp = $$value)), focusedApp);
-  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(12, $boxState = $$value)), boxState);
-  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(13, $writable = $$value)), writable2);
+  let $focusedApp, $$unsubscribe_focusedApp = noop, $$subscribe_focusedApp = () => ($$unsubscribe_focusedApp(), $$unsubscribe_focusedApp = subscribe(focusedApp, ($$value) => $$invalidate(12, $focusedApp = $$value)), focusedApp);
+  let $boxState, $$unsubscribe_boxState = noop, $$subscribe_boxState = () => ($$unsubscribe_boxState(), $$unsubscribe_boxState = subscribe(boxState, ($$value) => $$invalidate(13, $boxState = $$value)), boxState);
+  let $writable, $$unsubscribe_writable = noop, $$subscribe_writable = () => ($$unsubscribe_writable(), $$unsubscribe_writable = subscribe(writable2, ($$value) => $$invalidate(14, $writable = $$value)), writable2);
   $$self.$$.on_destroy.push(() => $$unsubscribe_focusedApp());
   $$self.$$.on_destroy.push(() => $$unsubscribe_boxState());
   $$self.$$.on_destroy.push(() => $$unsubscribe_writable());
@@ -10477,6 +10509,11 @@ function instance58($$self, $$props, $$invalidate) {
       };
     }
   });
+  function focus_me() {
+    tippy_hide_all();
+    let a = document.activeElement;
+    a && a.blur && a.blur();
+  }
   function div0_binding($$value) {
     binding_callbacks[$$value ? "unshift" : "push"](() => {
       container = $$value;
@@ -10491,21 +10528,21 @@ function instance58($$self, $$props, $$invalidate) {
     if ("language" in $$props2)
       $$invalidate(2, language = $$props2.language);
     if ("containerRef" in $$props2)
-      $$invalidate(9, containerRef = $$props2.containerRef);
+      $$invalidate(10, containerRef = $$props2.containerRef);
     if ("config" in $$props2)
       $$invalidate(3, config = $$props2.config);
   };
   $$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 & 14336) {
+    if ($$self.$$.dirty & 28672) {
       if (!$writable) {
           $$invalidate(5, layout = "hidden");
         } else if ($boxState === "maximized") {
@@ -10522,14 +10559,14 @@ function instance58($$self, $$props, $$invalidate) {
       try {
           if (app && container) {
             app.bindContainer(container);
-            $$invalidate(10, mounted = true);
+            $$invalidate(11, mounted = true);
           }
         } catch (err) {
           console.error("[fastboard] An error occurred while binding container");
           console.error(err);
         }
     }
-    if ($$self.$$.dirty & 1027) {
+    if ($$self.$$.dirty & 2051) {
       if (app && theme && mounted) {
           app.manager.setPrefersColorScheme(theme);
         }
@@ -10545,6 +10582,7 @@ function instance58($$self, $$props, $$invalidate) {
     focusedApp,
     boxState,
     writable2,
+    focus_me,
     containerRef,
     mounted,
     $focusedApp,
@@ -10560,7 +10598,7 @@ var Fastboard = class extends SvelteComponent {
       app: 0,
       theme: 1,
       language: 2,
-      containerRef: 9,
+      containerRef: 10,
       config: 3
     });
   }
@@ -10570,72 +10608,79 @@ 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 update2(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: update2, 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 update2(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: update2, destroy, setElement };
   if (div) {
-    ui.mount(div);
+    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);
+exports.Fastboard = Fastboard_default;
+exports.PageControl = PageControl_default;
+exports.PlayerControl = PlayerControl_default;
+exports.RedoUndo = RedoUndo_default;
+exports.ReplayFastboard = ReplayFastboard_default;
+exports.Toolbar = Toolbar_default;
+exports.ZoomControl = ZoomControl_default;
+exports.apps = apps;
+exports.createReplayUI = createReplayUI;
+exports.createUI = createUI;
 //# sourceMappingURL=index.js.map