diff --git a/CHANGELOG.md b/CHANGELOG.md
index 014addb..e9e0d9d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,9 @@
# Changelog
+## Unreleased
+
+- Fixed an error when UI config is updated to `{ toolbar: undefined }`.
+
## 0.3.11
- Added toolbar config `placement: "left" | "right"` and `items: ToolbarItem[]` to further control the style of toolbar; added 2 more tools `hand` and `laserPointer` to `ToolbarItem`.
diff --git a/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte b/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
index 33a4140..83ce637 100644
--- a/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
+++ b/packages/fastboard-ui/src/components/Fastboard/Fastboard.svelte
@@ -84,7 +84,7 @@
class:hidden={!toolbar_has_items || !(layout === "visible" || layout === "toolbar-only")}
>
{#if config.toolbar?.enable !== false}
-
+
{/if}
diff --git a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
index 157c0dc..be92884 100644
--- a/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
+++ b/packages/fastboard-ui/src/components/Toolbar/Toolbar.svelte
@@ -5,6 +5,7 @@
import { height } from "../../actions/height";
import { clamp } from "../helpers";
import Contents from "./components/Contents.svelte";
+ import { default_items } from "./components/constants";
export let app: FastboardApp | null | undefined = null;
export let theme: Theme = "light";
@@ -25,7 +26,7 @@
$: scrollable = $scroll_height + extra_height > $container_height;
$: placement = config.placement || "left";
- $: items = config.items;
+ $: items = config.items || default_items;
$: hide_apps = config.apps?.enable === false;
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte b/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
index bbaa143..dcbc949 100644
--- a/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
+++ b/packages/fastboard-ui/src/components/Toolbar/components/Contents.svelte
@@ -7,7 +7,7 @@
import { scrollTop } from "../../../actions/scroll";
import { tippy_hide_all } from "../../../actions/tippy";
import { clamp } from "../../helpers";
- import { i18n } from "./constants";
+ import { default_items, i18n } from "./constants";
import { apps } from "../../../behaviors";
import { tooltip } from "./helper";
import Icons from "../../Icons";
@@ -36,7 +36,7 @@
export let computed_height = 0;
export let scrollable = false;
export let placement: "left" | "right" = "left";
- export let items: ToolbarItem[] = ["clicker", "selector", "pencil", "text", "shapes", "eraser", "clear"];
+ export let items: ToolbarItem[] = default_items;
export let hide_apps = false;
const name = "fastboard-toolbar";
diff --git a/packages/fastboard-ui/src/components/Toolbar/components/constants.ts b/packages/fastboard-ui/src/components/Toolbar/components/constants.ts
index 2d32d74..f4c4c85 100644
--- a/packages/fastboard-ui/src/components/Toolbar/components/constants.ts
+++ b/packages/fastboard-ui/src/components/Toolbar/components/constants.ts
@@ -2,6 +2,16 @@ import type { Appliance, Color } from "@netless/fastboard-core";
import type { I18nData, ToolbarItem } from "../../../typings";
import Icons from "../../Icons";
+export const default_items: ToolbarItem[] = [
+ "clicker",
+ "selector",
+ "pencil",
+ "text",
+ "shapes",
+ "eraser",
+ "clear",
+];
+
export const colors: Record = {
"#E02020": [224, 32, 32],
"#F7B500": [247, 181, 0],