@netless/fastboard-ui 1.0.0-canary.7 → 1.0.0-canary.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.7",
+  "version": "1.0.0-canary.9",
   "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.7"
+    "@netless/fastboard-core": "1.0.0-canary.9"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.7"
+    "@netless/fastboard-core": "1.0.0-canary.9"
   },
   "scripts": {
     "cleanup": "rimraf dist",

package/src/actions/scroll.ts

@@ -10,7 +10,7 @@ export const scrollTop: SvelteAction<Writable<number>> = function (node, value)
 
   function on_scroll() {
     clearTimeout(timer);
-    timer = setTimeout(() => value.set(node.scrollTop), 200);
+    timer = window.setTimeout(() => value.set(node.scrollTop), 200);
   }
 
   node.addEventListener("scroll", on_scroll);

package/src/components/Icons/Curve.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path stroke="#5D6066" stroke-width="1.25" d="M4 4c16 0 0 16 16 16" class="fastboard-icon-stroke-color" />
+</svg>

package/src/components/Icons/CurveDashed.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import type { Theme } from "../../typings";
+
+  export let theme: Theme = "light";
+  export let active = false;
+</script>
+
+<svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
+  <path
+    stroke="#5D6066"
+    stroke-dasharray="1.25 1.25"
+    stroke-width="1.25"
+    d="M4 4c16 0 0 16 16 16"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -46,6 +46,8 @@ import WhiteboardAdd from "./WhiteboardAdd.svelte";
 import Play from "./Play.svelte";
 import Pause from "./Pause.svelte";
 import Loading from "./Loading.svelte";
+import Curve from "./Curve.svelte";
+import CurveDashed from "./CurveDashed.svelte";
 
 const Icons = {
   Apps,
@@ -93,6 +95,8 @@ const Icons = {
   Play,
   Pause,
   Loading,
+  Curve,
+  CurveDashed,
 };
 
 export default Icons;

package/src/components/Toolbar/Toolbar.svelte

@@ -25,6 +25,7 @@
   $: computed_height = clamp($container_height, extra_height, $scroll_height + extra_height);
   $: scrollable = $scroll_height + extra_height > $container_height;
 
+  $: hide_dotted = config.pencil?.dotted === false;
   $: hide_apps = config.apps?.enable === false;
   $: eraser_type = config.eraser?.behavior || "both";
 </script>
@@ -39,6 +40,7 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {hide_dotted}
       {hide_apps}
       {eraser_type}
     />

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

@@ -3,6 +3,9 @@ import type { Theme, Language } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface ToolbarConfig {
+  pencil?: {
+    dotted?: boolean;
+  };
   apps?: {
     enable?: boolean;
   };

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

@@ -28,6 +28,7 @@
   export let scroll_height: Writable<number>;
   export let computed_height = 0;
   export let scrollable = false;
+  export let hide_dotted = false;
   export let hide_apps = false;
   export let eraser_type: "delete" | "pencil" | "both" = "both";
 
@@ -58,6 +59,7 @@
   };
   $: memberState = app?.memberState;
   $: appliance = $memberState?.currentApplianceName;
+  $: dotted = $memberState?.dottedLine;
   $: shape = $memberState?.shapeType;
   $: status = app?.appsStatus;
 
@@ -94,6 +96,12 @@
   function text() {
     app?.setAppliance("text");
   }
+  function set_dotted() {
+    app?.toggleDottedLine(true);
+  }
+  function unset_dotted() {
+    app?.toggleDottedLine(false);
+  }
   function select_last_shape() {
     if (applianceShapes.includes(last_shape as Appliance)) {
       app?.setAppliance(last_shape as Appliance);
@@ -251,6 +259,31 @@
 
 <div class="{name}-panel-wrapper" style="display:none">
   <div class="{name}-panel pencil" bind:this={pencil_panel}>
+    {#if !hide_dotted}
+      <div class="{name}-panel-btns">
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && !dotted}
+          {...btn_props}
+          on:click={unset_dotted}
+          placement="top"
+          content={t.solid}
+        >
+          <Icons.Curve {theme} active={appliance === "pencil" && !dotted} />
+        </Button>
+        <Button
+          class="pencil"
+          active={appliance === "pencil" && dotted}
+          {...btn_props}
+          on:click={set_dotted}
+          placement="top"
+          content={t.dashed}
+        >
+          <Icons.CurveDashed {theme} active={appliance === "pencil" && dotted} />
+        </Button>
+      </div>
+      <div class="{name}-panel-divider" />
+    {/if}
     <StrokeWidth {app} {theme} {disabled} />
     <div class="{name}-panel-divider" />
     <StrokeColor {app} {theme} {disabled} />

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/Slider.svelte

@@ -39,7 +39,6 @@
     class="{name}-track {theme}"
     class:grabbing
     type="range"
-    role="slider"
     {disabled}
     {min}
     {max}

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/Toolbar/components/constants.ts

@@ -24,7 +24,7 @@ export const shapes = [
   "speechBalloon",
 ] as const;
 
-export type Shape = typeof shapes[number];
+export type Shape = (typeof shapes)[number];
 
 export const applianceShapes = shapes.slice(0, 4) as Appliance[];
 
@@ -52,7 +52,7 @@ export const shapesIconActive: Record<Shape, any> = {
 
 export const erasers = ["eraser", "pencilEraser"] as const;
 
-export type Eraser = typeof erasers[number];
+export type Eraser = (typeof erasers)[number];
 
 export const eraserIcon: Record<Eraser, any> = {
   eraser: Icons.Eraser,
@@ -65,7 +65,17 @@ export const eraserIconActive: Record<Eraser, any> = {
 };
 
 export const i18n: I18nData<
-  "clicker" | "selector" | "pencil" | "pencilEraser" | "text" | "shapes" | "eraser" | "clear" | "apps"
+  | "clicker"
+  | "selector"
+  | "pencil"
+  | "pencilEraser"
+  | "text"
+  | "shapes"
+  | "eraser"
+  | "clear"
+  | "apps"
+  | "solid"
+  | "dashed"
 > = {
   en: {
     clicker: "clicker",
@@ -77,6 +87,8 @@ export const i18n: I18nData<
     shapes: "shapes",
     clear: "clear",
     apps: "apps",
+    solid: "solid",
+    dashed: "dashed",
   },
   "zh-CN": {
     clicker: "点击",
@@ -88,6 +100,8 @@ export const i18n: I18nData<
     shapes: "形状",
     clear: "清屏",
     apps: "Apps",
+    solid: "实线",
+    dashed: "虚线",
   },
 };
 

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/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.light:not(:disabled).is-active{background-color:var(--fastboard-active-bg-color, #ebf2ff)}.fastboard-redo-undo-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-redo-undo-btn.dark:not(:disabled).is-active{background-color:var(--fastboard-active-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.light:not(:disabled).is-active{background-color:var(--fastboard-active-bg-color, #ebf2ff)}.fastboard-zoom-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-zoom-control-btn.dark:not(:disabled).is-active{background-color:var(--fastboard-active-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.light:not(:disabled).is-active{background-color:var(--fastboard-active-bg-color, #ebf2ff)}.fastboard-page-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-page-control-btn.dark:not(:disabled).is-active{background-color:var(--fastboard-active-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.light:not(:disabled).is-active{background-color:var(--fastboard-active-bg-color, #ebf2ff)}.fastboard-player-control-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-player-control-btn.dark:not(:disabled).is-active{background-color:var(--fastboard-active-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;left:0;transition:left .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none}.fastboard-toolbar.collapsed{left:-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:8px;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.light:not(:disabled).is-active{background-color:var(--fastboard-active-bg-color, #ebf2ff)}.fastboard-toolbar-btn.dark:not(:disabled):hover{background-color:var(--fastboard-hover-bg-color, #383b42)}.fastboard-toolbar-btn.dark:not(:disabled).is-active{background-color:var(--fastboard-active-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:3px solid;border-left:3px 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:0}.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:50px;top:8px;left:0;z-index:200;pointer-events:none}.fastboard-left .fastboard-toolbar{padding-left:8px}.fastboard-bottom-left,.fastboard-bottom,.fastboard-bottom-right{display:flex;gap:10px;position:absolute;bottom:8px;left: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":[]}