@netless/fastboard-ui 1.0.0-canary.6 → 1.0.0-canary.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.6",
+  "version": "1.0.0-canary.8",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -13,14 +13,14 @@
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.0-canary.6"
+    "@netless/fastboard-core": "1.0.0-canary.8"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.6"
+    "@netless/fastboard-core": "1.0.0-canary.8"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/components/Button/Button.svelte

@@ -7,6 +7,7 @@
   export { className as class };
   export let name = "fastboard-ui";
   export let theme: Theme = "light";
+  export let active = false;
   export let disabled = false;
   export let content: Content = "";
   export let placement: Placement = "top";
@@ -19,6 +20,7 @@
     <span class="{name}-btn-interactive {theme}" use:tippy={{ content, placement, className }}>
       <button
         class="{name}-btn {className} {theme}"
+        class:is-active={active}
         {disabled}
         on:click
         use:tippy={{
@@ -37,6 +39,7 @@
   {:else}
     <button
       class="{name}-btn {className} {theme}"
+      class:is-active={active}
       {disabled}
       on:click
       use:tippy={{ content, placement, className }}
@@ -45,7 +48,7 @@
     </button>
   {/if}
 {:else}
-  <button class="{name}-btn {className} {theme}" {disabled} on:click>
+  <button class="{name}-btn {className} {theme}" class:is-active={active} {disabled} on:click>
     <slot />
   </button>
 {/if}

package/src/components/Button/Button.svelte.d.ts

@@ -6,6 +6,7 @@ export declare interface ButtonProps {
   class?: string;
   name?: string;
   theme?: Theme;
+  active?: boolean;
   disabled?: boolean;
   content?: Content;
   placement?: Placement;

package/src/components/Fastboard/Fastboard.scss

@@ -17,14 +17,14 @@
   display: flex;
   align-items: center;
   position: absolute;
-  bottom: 62px;
+  bottom: 50px;
   top: 8px;
   left: 0;
   z-index: 200;
   pointer-events: none;
 
   .fastboard-toolbar {
-    padding-left: 16px;
+    padding-left: 8px;
   }
 }
 
@@ -34,7 +34,6 @@
   position: absolute;
   bottom: 8px;
   left: 8px;
-  padding: 8px;
   z-index: 200;
   pointer-events: none;
 }

package/src/components/Toolbar/Toolbar.scss

@@ -7,12 +7,12 @@ $name: "fastboard-toolbar";
   display: flex;
   align-items: center;
   position: relative;
-  transform: translateX(0);
-  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  left: 0px;
+  transition: left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
   pointer-events: none;
 
   &.collapsed {
-    transform: translateX(-100%);
+    left: -100%;
   }
 }
 
@@ -71,7 +71,7 @@ $name: "fastboard-toolbar";
 }
 
 .#{$name}-btn {
-  @include btn(32px, 4px);
+  @include btn(32px, 4px, 8px);
 }
 
 @import "./components/Slider.scss";

package/src/components/Toolbar/Toolbar.svelte

@@ -45,20 +45,29 @@
   </div>
   <label class="{name}-handler {theme}">
     <input type="checkbox" bind:checked={collapsed} />
-    <svg fill="none" stroke-width="2" viewBox="0 0 32 120">
+    <svg width="17" height="42" viewBox="0 0 17 42" fill="none">
       <path
+        d="M0 41H12C14.2091 41 16 39.2091 16 37V5C16 2.79086 14.2091 1 12 1H0"
+        stroke="#000"
         fill="#fff"
-        stroke="none"
-        d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120"
-        class="{name}-handler-bg-color"
+        class="{name}-handler-border-color {name}-handler-bg-color"
       />
-      <path stroke="#000" d="m0 0 24 16q6 4 6 14v60q0 10-6 14L0 120" class="{name}-handler-border-color" />
       {#if collapsed}
-        <path stroke="#000" d="M10 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M14 52v16l8-8z" class="{name}-handler-image-fill-color" />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M8 19L6 17V25L8 23L10 21L8 19ZM4 17H5V25H4V17Z"
+          fill="#fff"
+          class="{name}-handler-image-fill-color"
+        />
       {:else}
-        <path stroke="#000" d="M20 52v16" class="{name}-handler-image-stroke-color" />
-        <path fill="#000" stroke="none" d="M16 52v16l-8-8z" class="{name}-handler-image-fill-color" />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M6 19L8 17V25L6 23L4 21L6 19ZM10 17H9V25H10V17Z"
+          fill="#fff"
+          class="{name}-handler-image-fill-color"
+        />
       {/if}
     </svg>
   </label>

package/src/components/Toolbar/components/Contents.scss

@@ -20,8 +20,8 @@ $name: "fastboard-toolbar";
 .#{$name}-triangle {
   width: 0px;
   height: 0px;
-  border-bottom: 4px solid;
-  border-left: 4px solid transparent;
+  border-bottom: 3px solid;
+  border-left: 3px solid transparent;
   position: absolute;
   bottom: 0;
   right: 0;
@@ -36,7 +36,7 @@ $name: "fastboard-toolbar";
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 0;
 }
 
 .#{$name}-tooltip {

package/src/components/Toolbar/components/Contents.svelte

@@ -121,35 +121,68 @@
   </Button>
 {/if}
 <div class="{name}-scrollable" class:scrollable use:scrollHeight={scroll_height} use:scrollTop={top}>
-  <Button class="clicker" {...btn_props} on:click={clicker} content={c.clicker}>
+  <Button
+    class="clicker"
+    active={appliance === "clicker"}
+    {...btn_props}
+    on:click={clicker}
+    content={c.clicker}
+  >
     {#if appliance === "clicker"}
       <Icons.ClickFilled {theme} active />
     {:else}
       <Icons.Click {theme} />
     {/if}
   </Button>
-  <Button class="selector" {...btn_props} on:click={selector} content={c.selector}>
+  <Button
+    class="selector"
+    active={appliance === "selector"}
+    {...btn_props}
+    on:click={selector}
+    content={c.selector}
+  >
     {#if appliance === "selector"}
       <Icons.SelectorFilled {theme} active />
     {:else}
       <Icons.Selector {theme} />
     {/if}
   </Button>
-  <Button class="pencil" {...btn_props} on:click={pencil} content={c.pencil} menu={pencil_panel}>
+  <Button
+    class="pencil"
+    active={appliance === "pencil"}
+    {...btn_props}
+    on:click={pencil}
+    content={c.pencil}
+    menu={pencil_panel}
+  >
     {#if appliance === "pencil"}
       <Icons.PencilFilled {theme} active />
     {:else}
       <Icons.Pencil {theme} />
     {/if}
   </Button>
-  <Button class="text" {...btn_props} on:click={text} content={c.text} menu={text_panel}>
+  <Button
+    class="text"
+    active={appliance === "text"}
+    {...btn_props}
+    on:click={text}
+    content={c.text}
+    menu={text_panel}
+  >
     {#if appliance === "text"}
       <Icons.TextFilled {theme} active />
     {:else}
       <Icons.Text {theme} />
     {/if}
   </Button>
-  <Button class="shapes" {...btn_props} on:click={select_last_shape} content={t.shapes} menu={shapes_panel}>
+  <Button
+    class="shapes"
+    active={appliance === last_shape || (appliance === "shape" && shape === last_shape)}
+    {...btn_props}
+    on:click={select_last_shape}
+    content={t.shapes}
+    menu={shapes_panel}
+  >
     {#if appliance === last_shape || (appliance === "shape" && shape === last_shape)}
       <svelte:component this={shapesIconActive[last_shape]} {theme} active />
     {:else}
@@ -157,7 +190,13 @@
     {/if}
   </Button>
   {#if eraser_type === "delete"}
-    <Button class="eraser" {...btn_props} on:click={select_eraser} content={c.eraser}>
+    <Button
+      class="eraser"
+      active={appliance === "eraser"}
+      {...btn_props}
+      on:click={select_eraser}
+      content={c.eraser}
+    >
       {#if appliance === "eraser"}
         <Icons.EraserFilled {theme} active />
       {:else}
@@ -167,6 +206,7 @@
   {:else if eraser_type === "pencil"}
     <Button
       class="eraser"
+      active={appliance === "pencilEraser"}
       {...btn_props}
       on:click={select_pencil_eraser}
       content={c.pencilEraser}
@@ -181,6 +221,7 @@
   {:else}
     <Button
       class="eraser"
+      active={appliance === last_eraser}
       {...btn_props}
       on:click={select_last_eraser}
       content={t[last_eraser]}
@@ -229,6 +270,7 @@
       <div class="{name}-panel-btns">
         <Button
           class="eraser"
+          active={appliance === "pencilEraser"}
           {...btn_props}
           on:click={select_pencil_eraser}
           placement="top"
@@ -242,6 +284,7 @@
         </Button>
         <Button
           class="eraser"
+          active={appliance === "eraser"}
           {...btn_props}
           on:click={select_eraser}
           placement="top"

package/src/components/Toolbar/components/Shapes.svelte

@@ -65,6 +65,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-shapes {theme}" on:click={set_appliance_or_shape}>
   {#each shapes as key (key)}
     {@const is_selected = appliance === "shape" ? shape === key : appliance === key}

package/src/components/Toolbar/components/StrokeColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/components/Toolbar/components/TextColor.svelte

@@ -25,6 +25,7 @@
   }
 </script>
 
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="fastboard-toolbar-colors {theme}" on:click={set_stroke_color}>
   {#each colorKeys as key (key)}
     <button

package/src/components/ZoomControl/ZoomControl.svelte

@@ -55,7 +55,7 @@
   let type: IconType;
   $: type = disabled ? "disable" : "normal";
 
-  $: camera = app?.baseCamera;
+  $: camera = app?.camera;
   $: scale = $camera?.scale ?? 1;
   $: plus_disabled = disabled || next_scale(scale, 1) <= scale;
   $: minus_disabled = disabled || next_scale(scale, -1) >= scale;

package/src/components/theme.scss

@@ -7,6 +7,7 @@ $themes: (
     active-color: $blue-6,
     bg-color: color.change(white, $alpha: 0.9),
     hover-bg-color: $blue-1,
+    active-bg-color: $blue-1,
     border-color: $grey-1,
   ),
   dark: (
@@ -14,6 +15,7 @@ $themes: (
     active-color: $blue-7,
     bg-color: color.change($grey-10, $alpha: 0.9),
     hover-bg-color: $grey-8,
+    active-bg-color: $grey-8,
     border-color: $grey-8,
   ),
 );
@@ -58,7 +60,7 @@ $themes: (
   }
 }
 
-@mixin btn($size: 24px, $padding: 0) {
+@mixin btn($size: 24px, $padding: 0, $radius: 4px) {
   appearance: none;
   cursor: pointer;
   margin: 0;
@@ -67,7 +69,7 @@ $themes: (
   width: $size;
   height: $size;
   background-color: transparent;
-  border-radius: 4px;
+  border-radius: $radius;
   font-size: 0;
   line-height: 1;
   flex-shrink: 0;
@@ -85,8 +87,13 @@ $themes: (
   }
 
   @each $name, $theme in $themes {
-    &.#{$name}:not(:disabled):hover {
-      background-color: read($theme, "hover-bg-color");
+    &.#{$name}:not(:disabled) {
+      &:hover {
+        background-color: read($theme, "hover-bg-color");
+      }
+      &.is-active {
+        background-color: read($theme, "active-bg-color");
+      }
     }
   }
 }

package/dist/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["sass:./style.scss"],"sourcesContent":[".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-slider.pencil-eraser-size{width:136px}.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}"],"mappings":"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","names":[]}