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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.0",
+  "version": "1.0.0-canary.10",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
@@ -8,16 +8,19 @@
     "src",
     "dist"
   ],
+  "sideEffects": [
+    "dist/index.css"
+  ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.0-canary.0"
+    "@netless/fastboard-core": "1.0.0-canary.10"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
     "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.0"
+    "@netless/fastboard-core": "1.0.0-canary.10"
   },
   "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/actions/tippy.ts

@@ -19,7 +19,7 @@ if (is_client) {
             const el = instance.popper.firstElementChild;
             if (el) {
               el.classList.add("fastboard-tip");
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
               const extra = ((instance.props as any).className || "").trim();
               if (extra) {
                 el.classList.add(extra);
@@ -56,10 +56,14 @@ export const tippy: SvelteAction<Partial<Props & { className: string }>> = funct
 };
 
 export function tippy_hide_all() {
-  document.querySelectorAll("[data-tippy-root]").forEach(el => {
-    const instance = (el as unknown as { _tippy: Instance })._tippy;
-    if (instance) instance.hide();
-  });
+  document.querySelectorAll("[data-tippy-root]").forEach(tippy_hide);
+}
+
+export function tippy_hide(el: Element) {
+  const instance = (el as unknown as { _tippy: Instance })._tippy;
+  if (instance) {
+    instance.hide();
+  }
 }
 
 export const tippy_menu: Partial<Props> = {

package/src/behaviors/apps.ts

@@ -1,7 +1,7 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import code_editor_svg from "./icons/visual-studio-code.svg";
-import geogebra_svg from "./icons/geogebra.svg";
-import countdown_svg from "./icons/countdown.svg";
+// import code_editor_svg from "./icons/visual-studio-code.svg";
+// import geogebra_svg from "./icons/geogebra.svg";
+// import countdown_svg from "./icons/countdown.svg";
 
 export interface AppInToolbar {
   kind: string;
@@ -46,38 +46,4 @@ class AppsInToolbar {
 
 export type { AppsInToolbar };
 
-export const apps = new AppsInToolbar([
-  {
-    kind: "Monaco",
-    icon: code_editor_svg,
-    label: "Code Editor",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Monaco",
-        options: { title: "Code Editor" },
-      });
-    },
-  },
-  {
-    kind: "GeoGebra",
-    icon: geogebra_svg,
-    label: "GeoGebra",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "GeoGebra",
-        options: { title: "GeoGebra" },
-      });
-    },
-  },
-  {
-    kind: "Countdown",
-    icon: countdown_svg,
-    label: "Countdown",
-    onClick(app) {
-      app.manager.addApp({
-        kind: "Countdown",
-        options: { title: "Countdown" },
-      });
-    },
-  },
-]);
+export const stockedApps = new AppsInToolbar([]);

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;
@@ -18,8 +19,7 @@ export declare interface ButtonEvents {
 }
 
 export declare interface ButtonSlots {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  default: {};
+  default: any;
 }
 
 declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}

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

@@ -61,10 +61,17 @@
       };
     }
   });
+
+  function focus_me() {
+    tippy_hide_all();
+    // workaround for some devices that enabled "windows ink"
+    let a = document.activeElement as HTMLElement | null;
+    a && a.blur && a.blur();
+  }
 </script>
 
 <div class="{name}-root" class:loading={!app}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
     {#if config.toolbar?.enable !== false}
       <Toolbar {app} {theme} {language} config={config.toolbar} />
@@ -72,15 +79,15 @@
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
     {#if config.redo_undo?.enable !== false}
-      <RedoUndo {app} {theme} {language} />
+      <RedoUndo {app} {theme} {language} icons={config.redo_undo?.icons} />
     {/if}
     {#if config.zoom_control?.enable !== false}
-      <ZoomControl {app} {theme} {language} />
+      <ZoomControl {app} {theme} {language} icons={config.zoom_control?.icons} />
     {/if}
   </div>
   <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
     {#if config.page_control?.enable !== false}
-      <PageControl {app} {theme} {language} />
+      <PageControl {app} {theme} {language} icons={config.page_control?.icons} />
     {/if}
   </div>
 </div>

package/src/components/Fastboard/{Fastboard.svelte.ts → Fastboard.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, FastboardUIConfig } from "../../typings";
+import type { FastboardUIConfig, Language, Theme } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface FastboardProps {

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -2,7 +2,7 @@
 
 <script lang="ts">
   import type { FastboardPlayer } from "@netless/fastboard-core";
-  import type { Language, Theme } from "../../typings";
+  import type { Language, ReplayFastboardUIConfig, Theme } from "../../typings";
   import { onMount } from "svelte";
   import { tippy_hide_all } from "../../actions/tippy";
   import PlayerControl from "../PlayerControl";
@@ -10,6 +10,7 @@
   export let player: FastboardPlayer | null | undefined = null;
   export let theme: Theme = "light";
   export let language: Language = "en";
+  export let config: ReplayFastboardUIConfig = {};
   export let containerRef: ((element: HTMLDivElement | null) => void) | undefined = undefined;
 
   const name = "fastboard";
@@ -39,11 +40,20 @@
       };
     }
   });
+
+  function focus_me() {
+    tippy_hide_all();
+    // workaround for some devices that enabled "windows ink"
+    let a = document.activeElement as HTMLElement | null;
+    a && a.blur && a.blur();
+  }
 </script>
 
 <div class="{name}-root" class:loading={!player}>
-  <div class="{name}-view" bind:this={container} on:touchstart|capture|passive={tippy_hide_all} />
+  <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-bottom">
-    <PlayerControl {player} {theme} {language} />
+    {#if config.player_control?.enable !== false}
+      <PlayerControl {player} {theme} {language} icons={config.player_control?.icons} />
+    {/if}
   </div>
 </div>

package/src/components/Fastboard/{ReplayFastboard.svelte.ts → ReplayFastboard.svelte.d.ts}

@@ -1,11 +1,12 @@
 import type { FastboardPlayer } from "@netless/fastboard-core";
-import type { Theme, Language } from "../../typings";
+import type { Language, ReplayFastboardUIConfig, Theme } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
 export declare interface ReplayFastboardProps {
   player?: FastboardPlayer | null;
   theme?: Theme;
   language?: Language;
+  config?: ReplayFastboardUIConfig;
   containerRef?: (container: HTMLDivElement | null) => void;
 }
 

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

@@ -7,10 +7,44 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
+    d="M16 16L20 20M20 16L16 20"
     stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+  />
+  <path
+    d="M13.4139 4.92898C14.195 4.14794 15.4613 4.14794 16.2423 4.92898L19.0708 7.75741C19.8518 8.53846 19.8518 9.80479 19.0708 10.5858L11.9997 17.6569C10.4376 19.219 7.90494 19.219 6.34284 17.6569L4.92863 16.2427C4.14758 15.4616 4.14758 14.1953 4.92863 13.4143L13.4139 4.92898Z"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
     stroke-linejoin="round"
+  />
+  <path
+    d="M12 6.34314L17.6569 12"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
     stroke-width="1.25"
-    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M16.2422 4.92896L13.4138 7.75738"
+    stroke="#5D6066"
     class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M17.6572 6.34314L14.8288 9.17157"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M19.0713 7.75732L16.2429 10.5858"
+    stroke="#5D6066"
+    class="fastboard-icon-stroke-color"
+    stroke-width="1.25"
+    stroke-linejoin="round"
   />
 </svg>

package/src/components/Icons/EraserFilled.svelte

@@ -7,10 +7,10 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
-    fill="#5D6066"
     fill-rule="evenodd"
-    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
     clip-rule="evenodd"
+    d="M16.2423 4.92893C15.4612 4.14788 14.1949 4.14788 13.4138 4.92893L4.92856 13.4142C4.14751 14.1953 4.14751 15.4616 4.92856 16.2426L6.34277 17.6568C7.90487 19.2189 10.4375 19.2189 11.9996 17.6568L17.2146 12.4419L11.5577 6.78508L12.4416 5.9012L18.0985 11.558L19.0707 10.5858C19.8517 9.80473 19.8517 8.5384 19.0707 7.75735L16.2423 4.92893ZM17.1161 18L15.5581 16.4419L16.4419 15.5581L18 17.1161L19.5581 15.5581L20.4419 16.4419L18.8839 18L20.4419 19.5581L19.5581 20.4419L18 18.8839L16.4419 20.4419L15.5581 19.5581L17.1161 18Z"
+    fill="#3381FF"
     class="fastboard-icon-fill-color"
   />
 </svg>

package/src/components/Icons/PencilEraser.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-linejoin="round"
+    stroke-width="1.25"
+    d="M13.414 4.929a2 2 0 0 1 2.829 0l2.828 2.828a2 2 0 0 1 0 2.829L12 17.656a4 4 0 0 1-5.657 0L4.93 16.244a2 2 0 0 1 0-2.829l8.485-8.485ZM12 6.343 17.657 12m-1.414-7.071-2.829 2.828m4.243-1.414-2.829 2.829m4.243-1.415-2.828 2.829"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/PencilEraserFilled.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
+    fill="#5D6066"
+    fill-rule="evenodd"
+    d="M16.242 4.929a2 2 0 0 0-2.828 0L4.93 13.414a2 2 0 0 0 0 2.829l1.414 1.414a4 4 0 0 0 5.657 0l5.215-5.215-5.657-5.657.884-.884 5.657 5.657.972-.972a2 2 0 0 0 0-2.829l-2.83-2.827Z"
+    clip-rule="evenodd"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/index.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+// @ts-nocheck
+
 import Apps from "./Apps.svelte";
 import Arrow from "./Arrow.svelte";
 import ArrowBolded from "./ArrowBolded.svelte";
@@ -18,6 +21,8 @@ import LineBolded from "./LineBolded.svelte";
 import Minus from "./Minus.svelte";
 import Pencil from "./Pencil.svelte";
 import PencilFilled from "./PencilFilled.svelte";
+import PencilEraser from "./PencilEraser.svelte";
+import PencilEraserFilled from "./PencilEraserFilled.svelte";
 import Plus from "./Plus.svelte";
 import Rectangle from "./Rectangle.svelte";
 import RectangleBolded from "./RectangleBolded.svelte";
@@ -41,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,
@@ -63,6 +70,8 @@ const Icons = {
   Minus,
   Pencil,
   PencilFilled,
+  PencilEraser,
+  PencilEraserFilled,
   Plus,
   Rectangle,
   RectangleBolded,
@@ -86,6 +95,8 @@ const Icons = {
   Play,
   Pause,
   Loading,
+  Curve,
+  CurveDashed,
 };
 
 export default Icons;

package/src/components/PageControl/PageControl.svelte

@@ -34,8 +34,8 @@
   let type: IconType;
   $: type = disabled ? "disable" : "normal";
 
-  $: index = app?.sceneIndex;
-  $: length = app?.sceneLength;
+  $: index = app?.pageIndex;
+  $: length = app?.pageLength;
   $: prev_disabled = disabled || !$index;
   $: next_disabled = disabled || $length == null || $index === $length - 1;
 

package/src/components/Toolbar/README.md

@@ -52,6 +52,6 @@ The `computed_height` is calculated by:
 
 ```js
 const max_height = button_height * 2 + scrollable_area_full_height;
-let full_height = container.height;
+const full_height = container.height;
 computed_height = full_height < max_height ? full_height : max_height;
 ```

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%;
   }
 }
 
@@ -25,7 +25,7 @@ $name: "fastboard-toolbar";
   cursor: pointer;
   pointer-events: auto;
 
-  &:focus-within {
+  &:focus-visible {
     outline: 2px solid -webkit-focus-ring-color;
   }
 
@@ -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

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { FastboardApp } from "@netless/fastboard-core";
-  import type { Language, Theme, ToolbarConfig } from "../../typings";
+  import type { Language, Theme } from "../../typings";
+  import type { ToolbarConfig } from ".";
   import { writable as svelte_writable } from "svelte/store";
   import { height } from "../../actions/height";
   import { clamp } from "../helpers";
@@ -24,7 +25,9 @@
   $: 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>
 
 <div class="{name} {theme}" class:collapsed use:height={container_height}>
@@ -37,25 +40,36 @@
       {scroll_height}
       {computed_height}
       {scrollable}
+      {hide_dotted}
       {hide_apps}
+      {eraser_type}
     />
   </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/Toolbar.svelte.d.ts

@@ -1,7 +1,24 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { Theme, Language, ToolbarConfig } from "../../typings";
+import type { Theme, Language } from "../../typings";
 import { SvelteComponentTyped } from "svelte";
 
+export declare interface ToolbarConfig {
+  pencil?: {
+    dotted?: boolean;
+  };
+  apps?: {
+    enable?: boolean;
+  };
+  eraser?: {
+    /**
+     * - delete: remove shapes under eraser
+     * - pencil: wipe out part of strokes under eraser, like a real eraser
+     * - both (default): will show a panel to choose different behavior
+     */
+    behavior?: "delete" | "pencil" | "both";
+  };
+}
+
 export declare interface ToolbarProps {
   app?: FastboardApp | null;
   theme?: Theme;

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 {
@@ -72,6 +72,17 @@ $name: "fastboard-toolbar";
   background-color: rgba(#fff, 0.15);
 }
 
+.#{$name}-slider.pencil-eraser-size {
+  width: 136px;
+}
+
+// .#{$name}-panel-btns {
+//   // min-width: 108px;
+
+//   // .#{$name}-btn {
+//   // }
+// }
+
 .#{$name}-colors,
 .#{$name}-shapes {
   display: grid;