@netless/fastboard-ui 1.0.0-canary.9 → 1.0.1-beta.0

package/dist/lite.d.ts

@@ -0,0 +1,178 @@
+import { Color, FastboardApp, FastboardPlayer } from '@netless/fastboard-core/lite';
+import { SvelteComponentTyped } from 'svelte/internal';
+export { SvelteComponentTyped } from 'svelte/internal';
+
+interface SvelteAction<T = void> {
+    (node: HTMLElement, parameters: T): void | {
+        update?: (parameters: T) => void;
+        destroy?: () => void;
+    };
+}
+type Theme = "light" | "dark";
+type Language = "en" | "zh-CN";
+type IconType = "normal" | "disable";
+type GenericIcon<K extends string, E extends string = IconType> = {
+    [key in K]: {
+        [kind in E]: string;
+    };
+};
+type I18nData<T extends string> = Record<Language, Record<T, string>>;
+type ToolbarItem = "clicker" | "selector" | "pencil" | "text" | "shapes" | "eraser" | "clear" | "hand" | "laserPointer";
+interface ToolbarConfig {
+    /** @default "left" */
+    placement?: "left" | "right";
+    /** @default ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"] */
+    items?: ToolbarItem[];
+    /**
+     * Note: updating this option does not take effect when the element was mounted.
+     * Make sure to set this option in `UI.mount(div, { configs: { toolbar: { collapsed: true } } })`.
+     * @default false
+     */
+    collapsed?: boolean;
+    /** Control the last button which opens apps stock on toolbar. */
+    apps?: {
+        enable?: boolean;
+    };
+    /** 颜色 */
+    colors?: Color[];
+}
+interface FastboardUIConfig {
+    toolbar?: {
+        enable?: boolean;
+    } & ToolbarConfig;
+    redo_undo?: {
+        enable?: boolean;
+    };
+    zoom_control?: {
+        enable?: boolean;
+    };
+    page_control?: {
+        enable?: boolean;
+    };
+}
+interface ReplayFastboardUIConfig {
+    player_control?: {
+        enable?: boolean;
+    };
+}
+
+declare interface RedoUndoProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"undo" | "redo">;
+}
+
+declare class RedoUndo extends SvelteComponentTyped<RedoUndoProps> {}
+
+declare interface PageControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"prev" | "next" | "add">;
+}
+
+declare class PageControl extends SvelteComponentTyped<PageControlProps> {}
+
+declare interface ZoomControlProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"plus" | "minus" | "reset">;
+}
+
+declare class ZoomControl extends SvelteComponentTyped<ZoomControlProps> {}
+
+declare interface ToolbarProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  config?: ToolbarConfig;
+}
+
+declare class Toolbar extends SvelteComponentTyped<ToolbarProps> {}
+
+declare interface PlayerControlProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  icons?: GenericIcon<"play" | "pause" | "loading">;
+}
+
+declare class PlayerControl extends SvelteComponentTyped<PlayerControlProps> {}
+
+declare interface ReplayFastboardProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: ReplayFastboardUIConfig;
+}
+
+declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
+
+declare interface FastboardProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+  /**
+   * Note: updating this option does not take effect when the element was mounted.
+   * Make sure to set this option in `UI.mount(div, { containerRef })`.
+   */
+  containerRef?: (container: HTMLDivElement | null) => void;
+  config?: FastboardUIConfig;
+}
+
+declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
+
+interface UI {
+    /** render UI to div */
+    mount(div: Element, props?: FastboardProps): UI;
+    /** update UI (theme, language, etc.) */
+    update(props?: FastboardProps): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createUI(fastboardApp, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createUI(app?: FastboardApp | null, div?: Element): UI;
+interface ReplayUI {
+    /** render UI to div */
+    mount(div: Element, props?: ReplayFastboardProps): ReplayUI;
+    /** update UI (theme, language, etc.) */
+    update(props?: ReplayFastboardProps): void;
+    /** remove UI */
+    destroy(): void;
+}
+/**
+ * @example
+ * let ui = createReplayUI(fastboardPlayer, document.getElementById("whiteboard"));
+ * ui.update({ theme: "dark" })
+ */
+declare function createReplayUI(player?: FastboardPlayer | null, div?: Element): ReplayUI;
+
+interface AppInToolbar {
+    kind: string;
+    icon: string;
+    label: string;
+    onClick: (app: FastboardApp) => void;
+}
+declare class AppsInToolbar {
+    private _data;
+    _listeners: Array<(data: AppInToolbar[]) => void>;
+    constructor(_data: AppInToolbar[]);
+    get data(): AppInToolbar[];
+    get length(): number;
+    subscribe(fn: (data: AppInToolbar[]) => void): () => void;
+    push(...data: AppInToolbar[]): void;
+    insert(data: AppInToolbar, index: number): void;
+    delete(filter: (data: AppInToolbar) => boolean): void;
+    clear(): void;
+}
+
+declare const apps: AppsInToolbar;
+
+export { AppInToolbar, AppsInToolbar, Fastboard, FastboardProps, FastboardUIConfig, GenericIcon, I18nData, IconType, Language, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ReplayFastboardUIConfig, ReplayUI, SvelteAction, Theme, Toolbar, ToolbarConfig, ToolbarItem, ToolbarProps, UI, ZoomControl, ZoomControlProps, apps, createReplayUI, createUI };

package/full.d.ts

@@ -0,0 +1 @@
+export * from "./dist/full";

package/lite.d.ts

@@ -0,0 +1 @@
+export * from "./dist/lite";

package/package.json

@@ -1,34 +1,48 @@
 {
   "name": "@netless/fastboard-ui",
-  "version": "1.0.0-canary.9",
+  "version": "1.0.1-beta.0",
   "description": "The front-end of @netless/fastboard-core.",
   "main": "dist/index.js",
   "svelte": "dist/index.svelte.mjs",
   "files": [
     "src",
-    "dist"
-  ],
-  "sideEffects": [
-    "dist/index.css"
+    "dist",
+    "lite.d.ts",
+    "full.d.ts"
   ],
   "repository": "netless-io/fastboard",
   "peerDependencies": {
-    "@netless/fastboard-core": "1.0.0-canary.9"
+    "@netless/fastboard-core": "1.0.1-beta.0"
   },
   "dependencies": {
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
-    "@netless/esbuild-plugin-inline-sass": "0.1.0",
-    "@netless/fastboard-core": "1.0.0-canary.9"
+    "@netless/fastboard-core": "1.0.1-beta.0",
+    "@netless/buildtool": "0.1.0",
+    "@netless/esbuild-plugin-inline-sass": "0.1.0"
   },
   "scripts": {
     "cleanup": "rimraf dist",
     "check": "tsc --noEmit && svelte-check",
-    "build": "tsup",
+    "build": "buildtool",
     "dev": "vite",
     "test:ssr": "esbuild-dev test/ssr.ts"
   },
   "module": "dist/index.mjs",
-  "types": "dist/index.d.ts"
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./lite": {
+      "types": "./dist/lite.d.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./full": {
+      "types": "./dist/full.d.ts",
+      "default": "./dist/index.mjs"
+    }
+  }
 }

package/src/actions/tippy.ts

@@ -1,10 +1,9 @@
 import type { Instance, Props } from "tippy.js";
 import type { SvelteAction } from "../typings";
-import { is_client } from "svelte/internal";
 
 import Tippy from "tippy.js";
 
-if (is_client) {
+if (typeof window !== "undefined") {
   Tippy.setDefaultProps({
     delay: [1000, 400],
     duration: 300,
@@ -19,7 +18,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,14 +55,10 @@ export const tippy: SvelteAction<Partial<Props & { className: string }>> = funct
 };
 
 export function tippy_hide_all() {
-  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();
-  }
+  document.querySelectorAll("[data-tippy-root]").forEach(el => {
+    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,4 +46,38 @@ class AppsInToolbar {
 
 export type { AppsInToolbar };
 
-export const stockedApps = new 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" },
+      });
+    },
+  },
+]);

package/src/components/Button/Button.svelte

@@ -7,7 +7,6 @@
   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";
@@ -20,7 +19,6 @@
     <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={{
@@ -39,7 +37,6 @@
   {:else}
     <button
       class="{name}-btn {className} {theme}"
-      class:is-active={active}
       {disabled}
       on:click
       use:tippy={{ content, placement, className }}
@@ -48,7 +45,7 @@
     </button>
   {/if}
 {:else}
-  <button class="{name}-btn {className} {theme}" class:is-active={active} {disabled} on:click>
+  <button class="{name}-btn {className} {theme}" {disabled} on:click>
     <slot />
   </button>
 {/if}

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

@@ -1,12 +1,11 @@
-import { SvelteComponentTyped } from "svelte";
 import type { Content, Placement } from "tippy.js";
 import type { Theme } from "../../typings";
+import { SvelteComponentTyped } from "../../typings";
 
 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,25 @@
   display: flex;
   align-items: center;
   position: absolute;
-  bottom: 50px;
+  bottom: 62px;
   top: 8px;
   left: 0;
   z-index: 200;
   pointer-events: none;
 
   .fastboard-toolbar {
-    padding-left: 8px;
+    padding-left: 16px;
+  }
+}
+
+.fastboard-right {
+  @extend .fastboard-left;
+  left: auto;
+  right: 0;
+
+  .fastboard-toolbar {
+    padding-left: 0;
+    padding-right: 16px;
   }
 }
 
@@ -34,6 +45,7 @@
   position: absolute;
   bottom: 8px;
   left: 8px;
+  padding: 8px;
   z-index: 200;
   pointer-events: none;
 }

package/src/components/Fastboard/Fastboard.svelte

@@ -39,6 +39,13 @@
     layout = "visible";
   }
 
+  $: toolbar_has_items =
+    !config.toolbar ||
+    !config.toolbar.items ||
+    !config.toolbar.apps ||
+    config.toolbar.items.length > 0 ||
+    config.toolbar.apps.enable !== false;
+
   $: try {
     if (app && container) {
       app.bindContainer(container);
@@ -72,22 +79,25 @@
 
 <div class="{name}-root" class:loading={!app}>
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
-  <div class="{name}-left" class:hidden={!(layout === "visible" || layout === "toolbar-only")}>
+  <div
+    class="{name}-{config.toolbar?.placement || 'left'}"
+    class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
+  >
     {#if config.toolbar?.enable !== false}
-      <Toolbar {app} {theme} {language} config={config.toolbar} />
+      <Toolbar {app} {theme} {language} config={config.toolbar || {}} />
     {/if}
   </div>
   <div class="{name}-bottom-left" class:hidden={layout !== "visible"}>
     {#if config.redo_undo?.enable !== false}
-      <RedoUndo {app} {theme} {language} icons={config.redo_undo?.icons} />
+      <RedoUndo {app} {theme} {language} />
     {/if}
     {#if config.zoom_control?.enable !== false}
-      <ZoomControl {app} {theme} {language} icons={config.zoom_control?.icons} />
+      <ZoomControl {app} {theme} {language} />
     {/if}
   </div>
   <div class="{name}-bottom-right" class:hidden={layout !== "visible"}>
     {#if config.page_control?.enable !== false}
-      <PageControl {app} {theme} {language} icons={config.page_control?.icons} />
+      <PageControl {app} {theme} {language} />
     {/if}
   </div>
 </div>

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

@@ -1,11 +1,15 @@
 import type { FastboardApp } from "@netless/fastboard-core";
-import type { FastboardUIConfig, Language, Theme } from "../../typings";
-import { SvelteComponentTyped } from "svelte";
+import type { Theme, Language, FastboardUIConfig } from "../../typings";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface FastboardProps {
   app?: FastboardApp | null;
   theme?: Theme;
   language?: Language;
+  /**
+   * Note: updating this option does not take effect when the element was mounted.
+   * Make sure to set this option in `UI.mount(div, { containerRef })`.
+   */
   containerRef?: (container: HTMLDivElement | null) => void;
   config?: FastboardUIConfig;
 }

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -10,8 +10,8 @@
   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;
+  export let config: ReplayFastboardUIConfig = {};
 
   const name = "fastboard";
 
@@ -53,7 +53,7 @@
   <div class="{name}-view" bind:this={container} on:touchstart|capture={focus_me} />
   <div class="{name}-bottom">
     {#if config.player_control?.enable !== false}
-      <PlayerControl {player} {theme} {language} icons={config.player_control?.icons} />
+      <PlayerControl {player} {theme} {language} />
     {/if}
   </div>
 </div>

package/src/components/Fastboard/ReplayFastboard.svelte.d.ts

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

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

@@ -1,4 +1,4 @@
-import { SvelteComponentTyped } from "svelte";
+import { SvelteComponentTyped } from "../../typings";
 
 export declare interface IconProps {
   src?: string;

package/src/components/Icons/{PencilEraser.svelte → Drag.svelte}

@@ -7,10 +7,10 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
+    d="M17.143 8.143v2.571h-3.857V6.857h2.571L12 3 8.143 6.857h2.571v3.857H6.857V8.143L3 12l1.286 1.286 2.571 2.571v-2.571h3.857v3.857H8.143L12 21l1.286-1.286 2.571-2.571h-2.571v-3.857h3.857v2.571L21 12l-3.857-3.857Z"
     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"
+    stroke-linejoin="round"
     class="fastboard-icon-stroke-color"
   />
 </svg>

package/src/components/Icons/{PencilEraserFilled.svelte → DragFilled.svelte}

@@ -7,10 +7,8 @@
 
 <svg fill="none" viewBox="0 0 24 24" class="fastboard-icon {theme}" class:is-active={active}>
   <path
+    d="M17.143 8.143v2.571h-3.857V6.857h2.571L12 3 8.143 6.857h2.571v3.857H6.857V8.143L3 12l1.286 1.286 2.571 2.571v-2.571h3.857v3.857H8.143L12 21l1.286-1.286 2.571-2.571h-2.571v-3.857h3.857v2.571L21 12l-3.857-3.857Z"
     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/Eraser.svelte

@@ -7,44 +7,10 @@
 
 <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"
-    stroke-linejoin="round"
-  />
-  <path
-    d="M16.2422 4.92896L13.4138 7.75738"
-    stroke="#5D6066"
+    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"
-    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/Laser.svelte

@@ -0,0 +1,21 @@
+<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
+    d="m11.48 10.033 2.695 2.696m-2.695-2.696-7.375 7.379a.364.364 0 0 0 0 .515l2.18 2.182a.361.361 0 0 0 .514 0l7.376-7.38m-2.695-2.696 2.438-2.438a.363.363 0 0 1 .514 0l2.18 2.182v-.001a.363.363 0 0 1 0 .514l-2.437 2.439"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <path
+    d="M10.895 6.652a.363.363 0 0 0-.13-.182c-.348-.399-.338-1.264.032-1.634a.362.362 0 1 0-.513-.514c-.18.18-.491.286-.834.286-.343 0-.654-.107-.833-.286a.363.363 0 1 0-.514.514c.38.382.38 1.286 0 1.667a.364.364 0 0 0 .514.515c.179-.18.49-.287.833-.287.343 0 .654.107.834.287a.362.362 0 0 0 .256.106h.008a.363.363 0 0 0 .347-.472Zm6.294-.149a.366.366 0 0 0 .118.594.363.363 0 0 0 .396-.079c.18-.18.49-.287.834-.287.343 0 .654.107.832.287a.362.362 0 0 0 .258.106h.007a.363.363 0 0 0 .218-.654c-.35-.399-.338-1.264.032-1.634a.363.363 0 1 0-.515-.514c-.178.18-.49.286-.832.286-.343 0-.654-.107-.834-.286a.364.364 0 0 0-.514.514c.382.382.382 1.286 0 1.667Zm2.794 9.239a.363.363 0 0 0-.13-.182c-.35-.398-.34-1.263.03-1.633a.363.363 0 1 0-.514-.515c-.178.18-.49.287-.832.287-.343 0-.654-.107-.834-.287a.365.365 0 0 0-.514.515c.382.38.382 1.285 0 1.667a.364.364 0 0 0 .514.514c.18-.18.49-.286.834-.286.343 0 .654.107.832.286a.363.363 0 0 0 .258.107h.007a.363.363 0 0 0 .349-.473Z"
+    fill="#5D6066"
+    class="fastboard-icon-fill-color"
+  />
+</svg>

package/src/components/Icons/LaserFilled.svelte

@@ -0,0 +1,14 @@
+<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
+    d="m11.48 10.033 2.695 2.696-7.376 7.38a.361.361 0 0 1-.514 0l-2.18-2.182a.362.362 0 0 1 0-.515l7.375-7.379Zm5.133-.257a.363.363 0 0 1 0 .514l-1.925 1.925-2.694-2.696 1.924-1.924a.363.363 0 0 1 .514 0l2.18 2.182v-.001Zm-5.718-3.124a.363.363 0 0 0-.13-.182c-.348-.399-.338-1.264.032-1.634a.362.362 0 1 0-.513-.514c-.18.18-.491.286-.834.286-.343 0-.654-.107-.833-.286a.363.363 0 1 0-.514.514c.38.382.38 1.286 0 1.667a.364.364 0 0 0 .514.515c.179-.18.49-.287.833-.287.343 0 .654.107.834.287a.362.362 0 0 0 .256.106h.008a.363.363 0 0 0 .347-.472Zm6.294-.149a.366.366 0 0 0 .118.594.363.363 0 0 0 .396-.079c.18-.18.49-.287.834-.287.343 0 .654.107.832.287a.362.362 0 0 0 .258.106h.007a.363.363 0 0 0 .218-.654c-.35-.399-.338-1.264.032-1.634a.363.363 0 1 0-.515-.514c-.178.18-.49.286-.832.286-.343 0-.654-.107-.834-.286a.364.364 0 0 0-.514.514c.382.382.382 1.286 0 1.667Zm2.794 9.239a.363.363 0 0 0-.13-.182c-.35-.398-.34-1.263.03-1.633a.363.363 0 1 0-.514-.515c-.178.18-.49.287-.832.287-.343 0-.654-.107-.834-.287a.365.365 0 0 0-.514.515c.382.38.382 1.285 0 1.667a.364.364 0 0 0 .514.514c.18-.18.49-.286.834-.286.343 0 .654.107.832.286a.363.363 0 0 0 .258.107h.007a.363.363 0 0 0 .349-.473Z"
+    fill="#5D6066"
+    class="fastboard-icon-fill-color"
+  />
+</svg>