@netless/fastboard-ui 0.3.0-canary.0

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@netless/fastboard-ui",
+  "version": "0.3.0-canary.0",
+  "description": "The front-end of @netless/fastboard-core.",
+  "main": "dist/index.js",
+  "svelte": "dist/index.svelte.mjs",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "peerDependencies": {
+    "@netless/fastboard-core": "0.3.0-canary.0"
+  },
+  "dependencies": {
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "@netless/esbuild-plugin-inline-sass": "0.1.0",
+    "@netless/fastboard-core": "0.3.0-canary.0"
+  },
+  "scripts": {
+    "cleanup": "rimraf dist",
+    "check": "tsc --noEmit",
+    "build": "tsup",
+    "dev": "vite",
+    "test:ssr": "esbuild-dev test/ssr.ts"
+  },
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "readme": "## @netless/fastboard-ui\n\nThe front-end of [@netless/fastboard-core](https://github.com/netless-io/fastboard/tree/main/packages/fastboard-core).\n\n### License\n\nMIT @ [netless](https://github.com/netless-io)\n"
+}

package/src/actions/height.ts

@@ -0,0 +1,43 @@
+import type { Writable } from "svelte/store";
+import type { SvelteAction } from "../typings";
+
+export const height: SvelteAction<Writable<number>> = function (node, height) {
+  const styles = getComputedStyle(node);
+  const paddings =
+    (parseInt(styles.paddingTop) || 0) +
+    (parseInt(styles.paddingBottom) || 0) +
+    (parseInt(styles.borderTopWidth) || 0) +
+    (parseInt(styles.borderBottomWidth) || 0);
+
+  const observer = new ResizeObserver(() => {
+    height.set(node.getBoundingClientRect().height - paddings);
+  });
+
+  observer.observe(node);
+
+  return {
+    update(new_height) {
+      height = new_height;
+    },
+    destroy() {
+      observer.disconnect();
+    },
+  };
+};
+
+export const scrollHeight: SvelteAction<Writable<number>> = function (node, height) {
+  const observer = new ResizeObserver(() => {
+    height.set(node.scrollHeight);
+  });
+
+  observer.observe(node);
+
+  return {
+    update(new_height) {
+      height = new_height;
+    },
+    destroy() {
+      observer.disconnect();
+    },
+  };
+};

package/src/actions/scroll.ts

@@ -0,0 +1,31 @@
+import type { Writable } from "svelte/store";
+import type { SvelteAction } from "../typings";
+
+export const scrollTop: SvelteAction<Writable<number>> = function (node, value) {
+  const listener = (top: number) => {
+    node.scrollTo({ top, behavior: "smooth" });
+  };
+
+  let timer = 0;
+
+  function on_scroll() {
+    clearTimeout(timer);
+    timer = setTimeout(() => value.set(node.scrollTop), 200);
+  }
+
+  node.addEventListener("scroll", on_scroll);
+
+  let unsubscribe = value.subscribe(listener);
+
+  return {
+    update(new_value) {
+      unsubscribe();
+      unsubscribe = (value = new_value).subscribe(listener);
+    },
+    destroy() {
+      clearTimeout(timer);
+      node.removeEventListener("scroll", on_scroll);
+      unsubscribe();
+    },
+  };
+};

package/src/actions/tippy.ts

@@ -0,0 +1,70 @@
+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) {
+  Tippy.setDefaultProps({
+    delay: [1000, 400],
+    duration: 300,
+    offset: [0, 11],
+    theme: "dark",
+    plugins: [
+      {
+        name: "className",
+        defaultValue: "",
+        fn(instance) {
+          function add() {
+            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);
+              }
+            }
+          }
+
+          function remove() {
+            instance.popper.firstElementChild?.classList.remove("fastboard-tip");
+          }
+
+          return {
+            onCreate: add,
+            onBeforeUpdate: remove,
+            onAfterUpdate: add,
+          };
+        },
+      },
+    ],
+  });
+}
+
+export const tippy: SvelteAction<Partial<Props & { className: string }>> = function (node, props) {
+  const instance = Tippy(node, props);
+
+  return {
+    update(props: Partial<Props & { className: string }>) {
+      instance.setProps(props);
+    },
+    destroy() {
+      instance.destroy();
+    },
+  };
+};
+
+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();
+  });
+}
+
+export const tippy_menu: Partial<Props> = {
+  delay: 0,
+  placement: "right-start",
+  interactive: true,
+  trigger: "click",
+};

package/src/behaviors/icons/countdown.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--radix-icons" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 15 15"><path fill="grey" fill-rule="evenodd" d="M13.15 7.5c0-2.835-2.21-5.65-5.65-5.65c-2.778 0-4.151 2.056-4.737 3.15H4.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 1 0v1.813C2.705 3.071 4.334.85 7.5.85c4.063 0 6.65 3.335 6.65 6.65c0 3.315-2.587 6.65-6.65 6.65c-1.944 0-3.562-.77-4.715-1.942a6.772 6.772 0 0 1-1.427-2.167a.5.5 0 1 1 .925-.38c.28.681.692 1.314 1.216 1.846c.972.99 2.336 1.643 4.001 1.643c3.44 0 5.65-2.815 5.65-5.65ZM7 10V5h1v5H7Z" clip-rule="evenodd"></path></svg>

package/src/behaviors/icons/geogebra.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--arcticons" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"><path fill="none" stroke="#6557d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M24 3a4.77 4.77 0 1 0 4.77 4.77A4.78 4.78 0 0 0 24 3ZM7.69 14.86a4.77 4.77 0 1 0 4.76 4.77a4.76 4.76 0 0 0-4.76-4.77Zm32.64 0a4.77 4.77 0 1 0 4.77 4.77a4.77 4.77 0 0 0-4.77-4.77ZM13.92 34.05a4.77 4.77 0 1 0 4.77 4.77a4.76 4.76 0 0 0-4.77-4.77Zm20.18 0a4.77 4.77 0 1 0 4.76 4.77a4.76 4.76 0 0 0-4.76-4.77Z"></path><path fill="none" stroke="#6557d2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M19.27 8.35a17.24 17.24 0 0 0-9.73 6.87m28.51.22a17.28 17.28 0 0 0-9.34-6.94m8.7 26.89A17.09 17.09 0 0 0 40.93 25v-.61M18 41.22a17.23 17.23 0 0 0 5.68 1a17 17 0 0 0 6.2-1.22M6.53 24.25v.72a17.16 17.16 0 0 0 3.77 10.76"></path></svg>

package/src/behaviors/icons/visual-studio-code.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.01em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 254" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"><defs><linearGradient id="IconifyId-17f872155be-cc766e-5439" x1="50%" x2="50%" y1="0%" y2="100%"><stop offset="0%" stop-color="#FFF"/><stop offset="100%" stop-color="#FFF" stop-opacity="0"/></linearGradient><path id="IconifyId-17f872155be-cc766e-5440" d="M180.828 252.605a15.872 15.872 0 0 0 12.65-.486l52.501-25.262a15.94 15.94 0 0 0 9.025-14.364V41.197a15.939 15.939 0 0 0-9.025-14.363l-52.5-25.263a15.877 15.877 0 0 0-18.115 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.507 91.695a15.853 15.853 0 0 0 5.464 3.571Zm10.464-183.649l-76.262 57.889l76.262 57.888V68.956Z"/></defs><mask id="IconifyId-17f872155be-cc766e-5441" fill="#fff"><use href="#IconifyId-17f872155be-cc766e-5440"/></mask><path fill="#0065A9" d="M246.135 26.873L193.593 1.575a15.885 15.885 0 0 0-18.123 3.08L3.466 161.482c-4.626 4.219-4.62 11.502.012 15.714l14.05 12.772a10.625 10.625 0 0 0 13.569.604L238.229 33.436c6.949-5.271 16.93-.315 16.93 8.407v-.61a15.938 15.938 0 0 0-9.024-14.36Z" mask="url(#IconifyId-17f872155be-cc766e-5441)"/><path fill="#007ACC" d="m246.135 226.816l-52.542 25.298a15.887 15.887 0 0 1-18.123-3.08L3.466 92.207c-4.626-4.218-4.62-11.502.012-15.713l14.05-12.773a10.625 10.625 0 0 1 13.569-.603l207.132 157.135c6.949 5.271 16.93.315 16.93-8.408v.611a15.939 15.939 0 0 1-9.024 14.36Z" mask="url(#IconifyId-17f872155be-cc766e-5441)"/><path fill="#1F9CF0" d="M193.428 252.134a15.892 15.892 0 0 1-18.125-3.083c5.881 5.88 15.938 1.715 15.938-6.603V11.273c0-8.318-10.057-12.483-15.938-6.602a15.892 15.892 0 0 1 18.125-3.084l52.533 25.263a15.937 15.937 0 0 1 9.03 14.363V212.51c0 6.125-3.51 11.709-9.03 14.363l-52.533 25.262Z" mask="url(#IconifyId-17f872155be-cc766e-5441)"/><path fill="url(#IconifyId-17f872155be-cc766e-5439)" fill-opacity=".25" d="M180.828 252.605a15.874 15.874 0 0 0 12.65-.486l52.5-25.263a15.938 15.938 0 0 0 9.026-14.363V41.197a15.939 15.939 0 0 0-9.025-14.363L193.477 1.57a15.877 15.877 0 0 0-18.114 3.084L74.857 96.35l-43.78-33.232a10.614 10.614 0 0 0-13.56.603L3.476 76.494c-4.63 4.211-4.635 11.495-.012 15.713l37.967 34.638l-37.967 34.637c-4.623 4.219-4.618 11.502.012 15.714l14.041 12.772a10.614 10.614 0 0 0 13.56.604l43.78-33.233l100.506 91.695a15.857 15.857 0 0 0 5.465 3.571Zm10.464-183.65l-76.262 57.89l76.262 57.888V68.956Z" mask="url(#IconifyId-17f872155be-cc766e-5441)"/></svg>

package/src/behaviors/index.ts

@@ -0,0 +1,68 @@
+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";
+
+export interface AppInToolbar {
+  kind: string;
+  icon: string;
+  label: string;
+  onClick: (app: FastboardApp) => void;
+}
+
+class AppsInToolbar {
+  _listeners: Array<(data: AppInToolbar[]) => void> = [];
+  constructor(private _data: AppInToolbar[]) {}
+  get data() {
+    return this._data;
+  }
+  get length() {
+    return this._data.length;
+  }
+  subscribe(fn: (data: AppInToolbar[]) => void) {
+    this._listeners.push(fn);
+    fn(this._data);
+    return () => {
+      this._listeners = this._listeners.filter(item => item !== fn);
+    };
+  }
+  push(data: AppInToolbar) {
+    this._data.push(data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  insert(data: AppInToolbar, index: number) {
+    this._data.splice(index, 0, data);
+    this._listeners.forEach(fn => fn(this._data));
+  }
+  delete(filter: (data: AppInToolbar) => boolean) {
+    this._data = this._data.filter(item => !filter(item));
+    this._listeners.forEach(fn => fn(this._data));
+  }
+}
+
+export const apps = new AppsInToolbar([
+  {
+    kind: "Monaco",
+    icon: code_editor_svg,
+    label: "Code Editor",
+    onClick(app) {
+      app.insertCodeEditor();
+    },
+  },
+  {
+    kind: "GeoGebra",
+    icon: geogebra_svg,
+    label: "GeoGebra",
+    onClick(app) {
+      app.insertGeoGebra();
+    },
+  },
+  {
+    kind: "Countdown",
+    icon: countdown_svg,
+    label: "Countdown",
+    onClick(app) {
+      app.insertCountdown();
+    },
+  },
+]);

package/src/components/Button/Button.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Content, Placement } from "tippy.js";
+  import type { Theme } from "../../typings";
+  import { tippy, tippy_menu } from "../../actions/tippy";
+
+  let className = "";
+  export { className as class };
+  export let name = "fastboard-ui";
+  export let theme: Theme = "light";
+  export let disabled = false;
+  export let content: Content = "";
+  export let placement: Placement = "top";
+  export let menu: Content = "";
+  export let menu_placement: Placement = "right-start";
+</script>
+
+{#if content}
+  {#if menu}
+    <span class="{name}-btn-interactive {theme}" use:tippy={{ content, placement, className }}>
+      <button
+        class="{name}-btn {className} {theme}"
+        {disabled}
+        on:click
+        use:tippy={{
+          content: menu,
+          ...tippy_menu,
+          placement: menu_placement,
+          appendTo: document.body,
+          theme,
+          className: "fastboard-panel",
+        }}
+      >
+        <slot />
+      </button>
+      <span class="{name}-triangle" />
+    </span>
+  {:else}
+    <button
+      class="{name}-btn {className} {theme}"
+      {disabled}
+      on:click
+      use:tippy={{ content, placement, className }}
+    >
+      <slot />
+    </button>
+  {/if}
+{:else}
+  <button class="{name}-btn {className} {theme}" {disabled} on:click>
+    <slot />
+  </button>
+{/if}

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

@@ -0,0 +1,26 @@
+import { SvelteComponentTyped } from "svelte";
+import type { Content, Placement } from "tippy.js";
+import type { Theme } from "../../typings";
+
+export declare interface ButtonProps {
+  class?: string;
+  name?: string;
+  theme?: Theme;
+  disabled?: boolean;
+  content?: Content;
+  placement?: Placement;
+  menu?: Content;
+  menu_placement?: Placement;
+}
+
+export declare interface ButtonEvents {
+  click: WindowEventMap["click"];
+}
+
+export declare interface ButtonSlots {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  default: {};
+}
+
+declare class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {}
+export default Button;

package/src/components/Button/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Button.svelte";
+export * from "./Button.svelte";

package/src/components/Fastboard/Fastboard.scss

@@ -0,0 +1,49 @@
+.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;
+
+  .fastboard-toolbar {
+    padding-left: 16px;
+  }
+}
+
+.fastboard-bottom-left {
+  display: flex;
+  gap: 10px;
+  position: absolute;
+  bottom: 8px;
+  left: 8px;
+  padding: 8px;
+  z-index: 200;
+}
+
+.fastboard-bottom-right {
+  @extend .fastboard-bottom-left;
+  left: auto;
+  right: 8px;
+}
+
+.fastboard-bottom {
+  @extend .fastboard-bottom-left;
+  right: 8px;
+}

package/src/components/Fastboard/Fastboard.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { FastboardApp } from "@netless/fastboard-core";
+  import type { Language, Theme } from "../../typings";
+  import RedoUndo from "../RedoUndo";
+  import ZoomControl from "../ZoomControl";
+  import PageControl from "../PageControl";
+  import Toolbar from "../Toolbar";
+
+  export let app: FastboardApp | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+
+  const name = "fastboard";
+
+  let container: HTMLDivElement;
+
+  $: if (app && container) app.bindContainer(container);
+</script>
+
+<div class="{name}-root" class:loading={!app}>
+  <div class="{name}-view" bind:this={container} />
+  <div class="{name}-left">
+    <Toolbar {app} {theme} {language} />
+  </div>
+  <div class="{name}-bottom-left">
+    <RedoUndo {app} {theme} {language} />
+    <ZoomControl {app} {theme} {language} />
+  </div>
+  <div class="{name}-bottom-right">
+    <PageControl {app} {theme} {language} />
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+import type { FastboardApp } from "@netless/fastboard-core";
+import type { Theme, Language } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface FastboardProps {
+  app?: FastboardApp | null;
+  theme?: Theme;
+  language?: Language;
+}
+
+declare class Fastboard extends SvelteComponentTyped<FastboardProps> {}
+export default Fastboard;

package/src/components/Fastboard/ReplayFastboard.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import type { FastboardPlayer } from "@netless/fastboard-core";
+  import type { Language, Theme } from "../../typings";
+  import PlayerControl from "../PlayerControl";
+
+  export let player: FastboardPlayer | null | undefined = null;
+  export let theme: Theme = "light";
+  export let language: Language = "en";
+
+  const name = "fastboard";
+
+  let container: HTMLDivElement;
+
+  $: if (player && container) player.bindContainer(container);
+</script>
+
+<div class="{name}-root" class:loading={!player}>
+  <div class="{name}-view" bind:this={container} />
+  <div class="{name}-bottom">
+    <PlayerControl {player} {theme} {language} />
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+import type { FastboardPlayer } from "@netless/fastboard-core";
+import type { Theme, Language } from "../../typings";
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface ReplayFastboardProps {
+  player?: FastboardPlayer | null;
+  theme?: Theme;
+  language?: Language;
+}
+
+declare class ReplayFastboard extends SvelteComponentTyped<ReplayFastboardProps> {}
+export default ReplayFastboard;

package/src/components/Fastboard/index.ts

@@ -0,0 +1,5 @@
+export { default as ReplayFastboard } from "./ReplayFastboard.svelte";
+export * from "./ReplayFastboard.svelte";
+
+export { default as Fastboard } from "./Fastboard.svelte";
+export * from "./Fastboard.svelte";

package/src/components/Icon/Icon.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  export let src = "";
+  export let alt = "";
+  export let title = "";
+</script>
+
+{#if src}
+  <img {src} {alt} title={title || alt} />
+{:else}
+  <slot />
+{/if}

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

@@ -0,0 +1,10 @@
+import { SvelteComponentTyped } from "svelte";
+
+export declare interface IconProps {
+  src?: string;
+  alt?: string;
+  title?: string;
+}
+
+declare class Icon extends SvelteComponentTyped<IconProps> {}
+export default Icon;

package/src/components/Icon/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Icon.svelte";
+export * from "./Icon.svelte";

package/src/components/Icons/Apps.svelte

@@ -0,0 +1,49 @@
+<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}>
+  <rect
+    x="5"
+    y="5"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="13"
+    y="5"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="5"
+    y="13"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+  <rect
+    x="13"
+    y="13"
+    width="6"
+    height="6"
+    stroke="#5D6066"
+    stroke-width="1.25"
+    stroke-linejoin="round"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Arrow.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="M5 19 15.5 8.5M17 12l2-7-7 2 3.5 1.5L17 12Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/ArrowBolded.svelte

@@ -0,0 +1,17 @@
+<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.75"
+    d="M5 19 15.5 8.5"
+    class="fastboard-icon-stroke-color"
+  />
+  <path fill="#5D6066" d="m17 12 2-7-7 2 3.5 1.5L17 12Z" class="fastboard-icon-fill-color" />
+</svg>

package/src/components/Icons/Balloon.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="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/BalloonBolded.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.75"
+    d="M19 7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h2v3l2.414-2.414A2 2 0 0 1 12.828 16H17a2 2 0 0 0 2-2V7Z"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>

package/src/components/Icons/Circle.svelte

@@ -0,0 +1,20 @@
+<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}>
+  <rect
+    width="16"
+    height="16"
+    x="4"
+    y="4"
+    stroke="#5D6066"
+    stroke-linejoin="round"
+    stroke-width="1.25"
+    rx="8"
+    class="fastboard-icon-stroke-color"
+  />
+</svg>