From 2a30d860077ab6bcfc822c650e36e6255170b967 Mon Sep 17 00:00:00 2001
From: Owais Jamil <desertthunder.dev@gmail.com>
Date: Fri, 17 Jul 2026 23:31:22 -0500
Subject: [PATCH] refactor: migrate more UI to ui package

---
 ROADMAP.md                                    |  13 +-
 .../src/lib/components/HistoryViewer.svelte   |   2 +-
 apps/web/src/lib/components/Icon.svelte       |  63 -------
 .../src/lib/components/StencilPalette.svelte  |   3 +-
 apps/web/src/lib/components/Toolbar.svelte    |  88 +++++++---
 .../src/lib/filebrowser/FileBrowser.svelte    |   4 +-
 .../src/lib/tests/BrushPopover.svelte.test.ts | 162 ------------------
 .../tests/components/Dialog.svelte.test.ts    |  96 -----------
 .../lib/tests/components/Sheet.svelte.test.ts | 131 --------------
 apps/web/src/lib/theme.svelte.ts              |  76 ++++----
 packages/ui/README.md                         |   5 +
 .../lib/components/BrushPopover.stories.ts    |  26 +++
 .../src/lib/components/BrushPopover.svelte    |  61 ++++---
 .../components/BrushPopover.svelte.test.ts    |  52 ++++++
 .../ui/src/lib/components/Dialog.stories.ts   |  18 ++
 .../ui}/src/lib/components/Dialog.svelte      |  39 +++--
 .../src/lib/components/Dialog.svelte.test.ts  |  49 ++++++
 .../ui/src/lib/components/DialogStory.svelte  |  47 +++++
 .../ui/src/lib/components/Icon.stories.ts     |  18 ++
 packages/ui/src/lib/components/Icon.svelte    |   9 +-
 .../ui/src/lib/components/Sheet.stories.ts    |  19 ++
 .../ui}/src/lib/components/Sheet.svelte       |  31 ++--
 .../src/lib/components/Sheet.svelte.test.ts   |  37 ++++
 .../ui/src/lib/components/SheetStory.svelte   |  42 +++++
 packages/ui/src/lib/icons.ts                  |  35 ++--
 packages/ui/src/lib/index.ts                  |  30 ++--
 packages/ui/src/lib/styles/icons.css          |   5 +
 packages/ui/vitest.setup.ts                   |   4 +
 28 files changed, 552 insertions(+), 613 deletions(-)
 delete mode 100644 apps/web/src/lib/components/Icon.svelte
 delete mode 100644 apps/web/src/lib/tests/BrushPopover.svelte.test.ts
 delete mode 100644 apps/web/src/lib/tests/components/Dialog.svelte.test.ts
 delete mode 100644 apps/web/src/lib/tests/components/Sheet.svelte.test.ts
 create mode 100644 packages/ui/src/lib/components/BrushPopover.stories.ts
 rename {apps/web => packages/ui}/src/lib/components/BrushPopover.svelte (86%)
 create mode 100644 packages/ui/src/lib/components/BrushPopover.svelte.test.ts
 create mode 100644 packages/ui/src/lib/components/Dialog.stories.ts
 rename {apps/web => packages/ui}/src/lib/components/Dialog.svelte (72%)
 create mode 100644 packages/ui/src/lib/components/Dialog.svelte.test.ts
 create mode 100644 packages/ui/src/lib/components/DialogStory.svelte
 create mode 100644 packages/ui/src/lib/components/Icon.stories.ts
 create mode 100644 packages/ui/src/lib/components/Sheet.stories.ts
 rename {apps/web => packages/ui}/src/lib/components/Sheet.svelte (84%)
 create mode 100644 packages/ui/src/lib/components/Sheet.svelte.test.ts
 create mode 100644 packages/ui/src/lib/components/SheetStory.svelte

diff --git a/ROADMAP.md b/ROADMAP.md
index e04267f..f6dfb57 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -37,8 +37,9 @@ the CLI and a bundled `SKILL.md`; MCP and UI automation are not part of vNext.
 - The pnpm monorepo contains a TypeScript core, Canvas 2D renderer, SvelteKit web
   UI, and Tauri 2 wrapper.
 - `@inkfinite/ui` provides shared Svelte components, theme tokens, fonts, and
-  icons for the browser and the Tauri-hosted frontend. `apps/web` imports the
-  shared stylesheet once and uses shared controls in its desktop vertical slice.
+  icons for the browser and the Tauri-hosted frontend. Shared buttons, icons,
+  panels, toolbars, dialogs, sheets, and brush controls have package-owned tests
+  and Storybook stories. `apps/web` keeps document-aware panels and adapters.
 - TypeScript currently owns a flat page/shape model, snapshot undo/redo, tools,
   and browser persistence. Web documents use Dexie; desktop documents use a
   thin adapter over Rust-owned sessions and typed Tauri commands.
@@ -191,7 +192,10 @@ that boundary into one history command, and the desktop session adapter builds
 one Rust transaction before replacing its mirror from the returned snapshot.
 `@inkfinite/input-dom` owns browser listener and coordinate normalization. A
 browser integration test covers drag, simulated Rust commit, patch-driven
-redraw, and undo back to the original document.
+redraw, and undo back to the original document. The final UI boundary moved the
+dependency-free dialog, sheet, brush popover, and remaining semantic icons into
+`@inkfinite/ui`, along with their tests and Storybook stories. Document-aware
+panels remain in `apps/web` and compose those shared controls.
 
 One Inkfinite transaction maps to one Automerge change. Causal heads, rather
 than a scalar revision, are the concurrency token. A local sequence number may
@@ -455,8 +459,7 @@ recovery prompts, and release migrations.
 - Adapt the standalone browser runtime and Dexie persistence to the v2 Rust/CRDT
   authority after the desktop contracts and file format stabilize. Its migration
   must backfill every existing board with a default layer and preserve shape
-  order. Shared `apps/web` components and `@inkfinite/ui` adoption remain part of
-  milestone 3; keep the browser build green while desktop behavior changes.
+  order. Keep the shared browser build green while desktop behavior changes.
 - Add hosted sync relay, identity, invitations, permissions, and ephemeral
   presence after local peer sync is correct and threat-modeled.
 - Consider WebGL, OffscreenCanvas, third-party shape plugins, Figma import,
diff --git a/apps/web/src/lib/components/HistoryViewer.svelte b/apps/web/src/lib/components/HistoryViewer.svelte
index ec04c49..7e060fe 100644
--- a/apps/web/src/lib/components/HistoryViewer.svelte
+++ b/apps/web/src/lib/components/HistoryViewer.svelte
@@ -7,7 +7,7 @@
 	 */
 
 	import type { Store } from '@inkfinite/core';
-	import Sheet from './Sheet.svelte';
+	import { Sheet } from '@inkfinite/ui';
 
 	type Props = { store: Store; open: boolean; onClose: () => void };
 
diff --git a/apps/web/src/lib/components/Icon.svelte b/apps/web/src/lib/components/Icon.svelte
deleted file mode 100644
index 5ed5577..0000000
--- a/apps/web/src/lib/components/Icon.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-	import CloseIcon from '$lib/assets/close.svg?raw';
-	import FolderIcon from '$lib/assets/folder.svg?raw';
-	import GridDotsIcon from '$lib/assets/grid-dots.svg?raw';
-	import InfoCircleIcon from '$lib/assets/info-circle.svg?raw';
-	import MoonIcon from '$lib/assets/moon.svg?raw';
-	import PencilIcon from '$lib/assets/pencil.svg?raw';
-	import SearchIcon from '$lib/assets/search.svg?raw';
-	import SunIcon from '$lib/assets/sun.svg?raw';
-	import TrashIcon from '$lib/assets/trash.svg?raw';
-	import GripVerticalIcon from '$lib/assets/grip-vertical.svg?raw';
-
-	export type IconName =
-		| 'close'
-		| 'folder'
-		| 'grid-dots'
-		| 'grip-vertical'
-		| 'info-circle'
-		| 'moon'
-		| 'pencil'
-		| 'search'
-		| 'sun'
-		| 'trash';
-
-	type Props = { name: IconName; size?: number; color?: string };
-
-	const { name, size = 16, color = '#4c566a' }: Props = $props();
-
-	const icons: Record<IconName, string> = {
-		close: CloseIcon,
-		folder: FolderIcon,
-		'grid-dots': GridDotsIcon,
-		'grip-vertical': GripVerticalIcon,
-		'info-circle': InfoCircleIcon,
-		moon: MoonIcon,
-		pencil: PencilIcon,
-		search: SearchIcon,
-		sun: SunIcon,
-		trash: TrashIcon
-	};
-
-	const svg = $derived(icons[name]);
-</script>
-
-<!-- eslint-disable svelte/no-at-html-tags -->
-<span class="icon" style:width="{size}px" style:height="{size}px" style:color aria-hidden="true">
-	{@html svg}
-</span>
-
-<style>
-	.icon {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-		padding: 1px;
-	}
-
-	.icon :global(svg) {
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/apps/web/src/lib/components/StencilPalette.svelte b/apps/web/src/lib/components/StencilPalette.svelte
index 9dc57e4..ec15285 100644
--- a/apps/web/src/lib/components/StencilPalette.svelte
+++ b/apps/web/src/lib/components/StencilPalette.svelte
@@ -2,9 +2,8 @@
 	import { onMount } from 'svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 	import { stencils } from '@inkfinite/core';
+	import { Icon, Sheet } from '@inkfinite/ui';
 	import { startDrag, endDrag, draggingStencil } from '../dnd.svelte';
-	import Sheet from '$lib/components/Sheet.svelte';
-	import Icon from '$lib/components/Icon.svelte';
 
 	type Stencil = stencils.Stencil;
 	const { registry, registerBuiltinStencils } = stencils;
diff --git a/apps/web/src/lib/components/Toolbar.svelte b/apps/web/src/lib/components/Toolbar.svelte
index 7fead8d..1445cf5 100644
--- a/apps/web/src/lib/components/Toolbar.svelte
+++ b/apps/web/src/lib/components/Toolbar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Icon from '$lib/components/Icon.svelte';
+	import { BrushPopover, Dialog, Icon } from '@inkfinite/ui';
 	import {
 		DEFAULT_FILL_COLOR,
 		DEFAULT_STROKE_COLOR,
@@ -36,8 +36,6 @@
 	import { fade } from 'svelte/transition';
 	import icon from '../assets/favicon.svg';
 	import ArrowPopover from './ArrowPopover.svelte';
-	import BrushPopover from './BrushPopover.svelte';
-	import Dialog from './Dialog.svelte';
 
 	type Viewport = { width: number; height: number };
 
@@ -90,7 +88,9 @@
 	let fillDisabled = $state(true);
 	let strokeDisabled = $state(true);
 	let brush = $derived<BrushSettings>(brushStore.get());
-	let hasArrowSelection = $derived(getSelectedShapes(editorState).some((s) => s.type === 'arrow'));
+	let hasArrowSelection = $derived(
+		getSelectedShapes(editorState).some((s) => s.type === 'arrow')
+	);
 	let infoOpen = $state(false);
 
 	$effect(() => {
@@ -116,7 +116,11 @@
 		strokeDisabled = strokable.length === 0;
 		if (fillable.length > 0) {
 			const shared = getSharedColor(fillable, (shape) =>
-				shape.type === 'text' ? shape.props.color : 'fill' in shape.props ? shape.props.fill : null
+				shape.type === 'text'
+					? shape.props.color
+					: 'fill' in shape.props
+						? shape.props.fill
+						: null
 			);
 			if (shared) {
 				fillColorValue = shared;
@@ -135,7 +139,9 @@
 	let showColorControls = $derived(
 		toolSupportsStyles(currentTool) ||
 			toolSupportsFill(currentTool) ||
-			getSelectedShapes(editorState).some((s) => shapeSupportsFill(s) || shapeSupportsStroke(s))
+			getSelectedShapes(editorState).some(
+				(s) => shapeSupportsFill(s) || shapeSupportsStroke(s)
+			)
 	);
 
 	let position = $state({ x: 20, y: 20 });
@@ -235,7 +241,10 @@
 		const scaleX = (viewport.width - margin) / width;
 		const scaleY = (viewport.height - margin) / height;
 		const zoom = Math.max(Math.min(scaleX, scaleY), 0.05);
-		const center = { x: (bounds.min.x + bounds.max.x) / 2, y: (bounds.min.y + bounds.max.y) / 2 };
+		const center = {
+			x: (bounds.min.x + bounds.max.x) / 2,
+			y: (bounds.min.y + bounds.max.y) / 2
+		};
 		store.setState((state) => ({ ...state, camera: { x: center.x, y: center.y, zoom } }));
 		zoomMenuOpen = false;
 	}
@@ -252,8 +261,14 @@
 				return shapeBox;
 			}
 			return {
-				min: { x: Math.min(acc.min.x, shapeBox.min.x), y: Math.min(acc.min.y, shapeBox.min.y) },
-				max: { x: Math.max(acc.max.x, shapeBox.max.x), y: Math.max(acc.max.y, shapeBox.max.y) }
+				min: {
+					x: Math.min(acc.min.x, shapeBox.min.x),
+					y: Math.min(acc.min.y, shapeBox.min.y)
+				},
+				max: {
+					x: Math.max(acc.max.x, shapeBox.max.x),
+					y: Math.max(acc.max.y, shapeBox.max.y)
+				}
 			};
 		}, null);
 
@@ -275,8 +290,14 @@
 				return shapeBox;
 			}
 			return {
-				min: { x: Math.min(acc.min.x, shapeBox.min.x), y: Math.min(acc.min.y, shapeBox.min.y) },
-				max: { x: Math.max(acc.max.x, shapeBox.max.x), y: Math.max(acc.max.y, shapeBox.max.y) }
+				min: {
+					x: Math.min(acc.min.x, shapeBox.min.x),
+					y: Math.min(acc.min.y, shapeBox.min.y)
+				},
+				max: {
+					x: Math.max(acc.max.x, shapeBox.max.x),
+					y: Math.max(acc.max.y, shapeBox.max.y)
+				}
 			};
 		}, null);
 
@@ -390,7 +411,12 @@
 			}
 		}
 		const after = { ...state, doc: { ...state.doc, shapes: newShapes } };
-		const command = new SnapshotCommand('Set fill color', 'doc', before, EditorState.clone(after));
+		const command = new SnapshotCommand(
+			'Set fill color',
+			'doc',
+			before,
+			EditorState.clone(after)
+		);
 		store.executeCommand(command);
 	}
 
@@ -405,17 +431,26 @@
 		for (const shape of targets) {
 			switch (shape.type) {
 				case 'rect': {
-					const updated: RectShape = { ...shape, props: { ...shape.props, stroke: color } };
+					const updated: RectShape = {
+						...shape,
+						props: { ...shape.props, stroke: color }
+					};
 					newShapes[shape.id] = updated;
 					break;
 				}
 				case 'ellipse': {
-					const updated: EllipseShape = { ...shape, props: { ...shape.props, stroke: color } };
+					const updated: EllipseShape = {
+						...shape,
+						props: { ...shape.props, stroke: color }
+					};
 					newShapes[shape.id] = updated;
 					break;
 				}
 				case 'line': {
-					const updated: LineShape = { ...shape, props: { ...shape.props, stroke: color } };
+					const updated: LineShape = {
+						...shape,
+						props: { ...shape.props, stroke: color }
+					};
 					newShapes[shape.id] = updated;
 					break;
 				}
@@ -574,7 +609,10 @@
 	{/each}
 
 	{#if showColorControls}
-		<div class="toolbar__colors" aria-label="Color controls" transition:fade={{ duration: 150 }}>
+		<div
+			class="toolbar__colors"
+			aria-label="Color controls"
+			transition:fade={{ duration: 150 }}>
 			{#if toolSupportsFill(currentTool) || getSelectedShapes(editorState).some(shapeSupportsFill)}
 				<label class="toolbar__color-control">
 					<span>Fill</span>
@@ -616,7 +654,11 @@
 		</button>
 
 		{#if zoomMenuOpen}
-			<div class="toolbar__zoom-menu" bind:this={zoomMenuEl} role="menu" aria-label="Zoom options">
+			<div
+				class="toolbar__zoom-menu"
+				bind:this={zoomMenuEl}
+				role="menu"
+				aria-label="Zoom options">
 				{#each ZOOM_PRESETS as preset (`${preset.label}:${preset.value}`)}
 					<button
 						class="toolbar__menu-item"
@@ -694,7 +736,8 @@
 			aria-label="Toggle Dark Mode"
 			title="Toggle Dark Mode">
 			<Icon name={themeStore.current === 'dark' ? 'sun' : 'moon'} size={16} />
-			<span class="toolbar__info-label">{themeStore.current === 'dark' ? 'Light' : 'Dark'}</span>
+			<span class="toolbar__info-label"
+				>{themeStore.current === 'dark' ? 'Light' : 'Dark'}</span>
 		</button>
 		{#if platform === 'web' && onOpenBrowser}
 			<button class="toolbar__info" onclick={onOpenBrowser} aria-label="Browse boards">
@@ -726,8 +769,8 @@
 	<section class="about">
 		<h1>About Inkfinite</h1>
 		<p>
-			Inkfinite is an infinite canvas prototype. The goal is to build a cross-platform editor with
-			a framework-agnostic core so the same engine powers both the web and desktop apps.
+			Inkfinite is an infinite canvas prototype. The goal is to build a cross-platform editor
+			with a framework-agnostic core so the same engine powers both the web and desktop apps.
 		</p>
 
 		<div class="about__section">
@@ -745,7 +788,10 @@
 				{#each HELP_LINKS as link (link.href)}
 					<li>
 						<!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
-						<a href={link.href} target={link.external ? '_blank' : undefined} rel="noreferrer">
+						<a
+							href={link.href}
+							target={link.external ? '_blank' : undefined}
+							rel="noreferrer">
 							{link.label}
 						</a>
 					</li>
diff --git a/apps/web/src/lib/filebrowser/FileBrowser.svelte b/apps/web/src/lib/filebrowser/FileBrowser.svelte
index a451dc2..6f6acca 100644
--- a/apps/web/src/lib/filebrowser/FileBrowser.svelte
+++ b/apps/web/src/lib/filebrowser/FileBrowser.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import Icon from '$lib/components/Icon.svelte';
-	import Sheet from '$lib/components/Sheet.svelte';
-	import { Button } from '@inkfinite/ui';
+	import { Button, Icon, Sheet } from '@inkfinite/ui';
 	import type { DesktopDocRepo } from '$lib/persistence/desktop';
 	import type {
 		BoardInspectorData,
diff --git a/apps/web/src/lib/tests/BrushPopover.svelte.test.ts b/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
deleted file mode 100644
index 79ee57b..0000000
--- a/apps/web/src/lib/tests/BrushPopover.svelte.test.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import BrushPopover from "$lib/components/BrushPopover.svelte";
-import type { BrushSettings } from "$lib/status";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render } from "vitest-browser-svelte";
-import { page } from "vitest/browser";
-
-describe("BrushPopover", () => {
-  const defaultBrush: BrushSettings = {
-    size: 16,
-    thinning: 0.5,
-    smoothing: 0.5,
-    streamline: 0.5,
-    simulatePressure: true,
-    color: "#88c0d0",
-  };
-
-  beforeEach(async () => {
-    document.body.innerHTML = "";
-  });
-
-  describe("Rendering", () => {
-    it("renders the brush button", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await expect.element(button).toBeInTheDocument();
-    });
-
-    it("does not show popover by default", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).not.toBeInTheDocument();
-    });
-
-    it("disables button when disabled prop is true", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange, disabled: true });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await expect.element(button).toBeDisabled();
-    });
-  });
-
-  describe("Interaction", () => {
-    it("opens popover when button is clicked", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toBeInTheDocument();
-    });
-
-    it("closes popover when button is clicked again", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toBeInTheDocument();
-
-      await button.click();
-      await expect.element(dialog).not.toBeInTheDocument();
-    });
-
-    it("does not show dialog when disabled", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange, disabled: true });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).not.toBeInTheDocument();
-    });
-  });
-
-  describe("Brush Controls", () => {
-    it("displays all brush controls when open", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      await expect.element(page.getByLabelText(/brush size/i)).toBeInTheDocument();
-      await expect.element(page.getByLabelText(/brush thinning/i)).toBeInTheDocument();
-      await expect.element(page.getByLabelText(/brush smoothing/i)).toBeInTheDocument();
-      await expect.element(page.getByLabelText(/brush streamline/i)).toBeInTheDocument();
-      await expect.element(page.getByLabelText(/brush color/i)).toBeInTheDocument();
-      await expect.element(page.getByLabelText(/simulate pressure/i)).toBeInTheDocument();
-    });
-
-    it("displays current brush values", async () => {
-      const customBrush: BrushSettings = {
-        size: 20,
-        thinning: 0.7,
-        smoothing: 0.3,
-        streamline: 0.9,
-        simulatePressure: false,
-        color: "#ff6600",
-      };
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: customBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const sizeSlider = page.getByLabelText(/brush size/i);
-      await expect.element(sizeSlider).toHaveValue("20");
-
-      const thinningSlider = page.getByLabelText(/brush thinning/i);
-      await expect.element(thinningSlider).toHaveValue("0.7");
-
-      const checkbox = page.getByLabelText(/simulate pressure/i);
-      await expect.element(checkbox).not.toBeChecked();
-    });
-
-    it("calls onBrushChange when size slider changes", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const sizeSlider = page.getByLabelText(/brush size/i);
-      await sizeSlider.fill("25");
-
-      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, size: 25 });
-    });
-
-    it("calls onBrushChange when simulate pressure checkbox changes", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const checkbox = page.getByLabelText(/simulate pressure/i);
-      await checkbox.click();
-
-      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, simulatePressure: false });
-    });
-
-    it("calls onBrushChange when color input changes", async () => {
-      const onBrushChange = vi.fn();
-      render(BrushPopover, { brush: defaultBrush, onBrushChange });
-
-      const button = page.getByRole("button", { name: /brush settings/i });
-      await button.click();
-
-      const colorInput = page.getByLabelText(/brush color/i);
-      await colorInput.fill("#ff5577");
-
-      expect(onBrushChange).toHaveBeenCalledWith({ ...defaultBrush, color: "#ff5577" });
-    });
-  });
-});
diff --git a/apps/web/src/lib/tests/components/Dialog.svelte.test.ts b/apps/web/src/lib/tests/components/Dialog.svelte.test.ts
deleted file mode 100644
index 2c28142..0000000
--- a/apps/web/src/lib/tests/components/Dialog.svelte.test.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import Dialog from "$lib/components/Dialog.svelte";
-import { describe, expect, it, vi } from "vitest";
-import { render } from "vitest-browser-svelte";
-import { page } from "vitest/browser";
-
-describe("Dialog", () => {
-  describe("visibility", () => {
-    it("should render when open is true", async () => {
-      render(Dialog, { open: true, title: "Test Dialog" });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toBeInTheDocument();
-    });
-
-    it("should not render when open is false", async () => {
-      render(Dialog, { open: false, title: "Test Dialog" });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).not.toBeInTheDocument();
-    });
-  });
-
-  describe("accessibility", () => {
-    it("should have correct ARIA attributes", async () => {
-      render(Dialog, { open: true, title: "Test Dialog" });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toHaveAttribute("aria-modal", "true");
-      await expect.element(dialog).toHaveAttribute("aria-label", "Test Dialog");
-    });
-
-    it("should be focusable", async () => {
-      render(Dialog, { open: true, title: "Test Dialog" });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toHaveAttribute("tabindex", "-1");
-    });
-  });
-
-  describe("close behavior", () => {
-    it("should call onClose when backdrop is clicked and closeOnBackdrop is true", async () => {
-      const onClose = vi.fn();
-
-      render(Dialog, { open: true, onClose, closeOnBackdrop: true, title: "Test" });
-
-      const backdrop = page.getByRole("presentation");
-      await backdrop.click();
-
-      expect(onClose).toHaveBeenCalledOnce();
-    });
-
-    it("should call onClose when Escape key is pressed and closeOnEscape is true", async () => {
-      const onClose = vi.fn();
-
-      render(Dialog, { open: true, onClose, closeOnEscape: true, title: "Test" });
-
-      const dialog = document.querySelector<HTMLElement>("[role=\"dialog\"]")!;
-
-      dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-
-      expect(onClose).toHaveBeenCalledOnce();
-    });
-
-    it("should not call onClose when backdrop is clicked and closeOnBackdrop is false", async () => {
-      const onClose = vi.fn();
-
-      render(Dialog, { open: true, onClose, closeOnBackdrop: false, title: "Test" });
-
-      const backdrop = page.getByRole("presentation");
-      await backdrop.click();
-
-      expect(onClose).not.toHaveBeenCalled();
-    });
-
-    it("should not call onClose when Escape key is pressed and closeOnEscape is false", async () => {
-      const onClose = vi.fn();
-
-      render(Dialog, { open: true, onClose, closeOnEscape: false, title: "Test" });
-
-      const dialog = document.querySelector<HTMLElement>("[role=\"dialog\"]")!;
-
-      dialog.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-
-      expect(onClose).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("styling", () => {
-    it("should apply custom class to dialog content", async () => {
-      render(Dialog, { open: true, title: "Test", class: "custom-class" });
-
-      const dialog = page.getByRole("dialog");
-      await expect.element(dialog).toHaveClass("custom-class");
-    });
-  });
-});
diff --git a/apps/web/src/lib/tests/components/Sheet.svelte.test.ts b/apps/web/src/lib/tests/components/Sheet.svelte.test.ts
deleted file mode 100644
index 21a020c..0000000
--- a/apps/web/src/lib/tests/components/Sheet.svelte.test.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import Sheet from "$lib/components/Sheet.svelte";
-import { describe, expect, it, vi } from "vitest";
-import { render } from "vitest-browser-svelte";
-import { page } from "vitest/browser";
-
-describe("Sheet", () => {
-  describe("visibility", () => {
-    it("should render when open is true", async () => {
-      render(Sheet, { open: true, title: "Test Sheet" });
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toBeInTheDocument();
-    });
-
-    it("should not render when open is false", async () => {
-      render(Sheet, { open: false, title: "Test Sheet" });
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).not.toBeInTheDocument();
-    });
-  });
-
-  describe("positioning", () => {
-    it("should apply right side class", async () => {
-      render(Sheet, { open: true, side: "right", title: "Test" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("sheet-right");
-    });
-
-    it("should apply left side class", async () => {
-      render(Sheet, { open: true, side: "left", title: "Test" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("sheet-left");
-    });
-
-    it("should apply top side class", async () => {
-      render(Sheet, { open: true, side: "top", title: "Test" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("sheet-top");
-    });
-
-    it("should apply bottom side class", async () => {
-      render(Sheet, { open: true, side: "bottom", title: "Test" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("sheet-bottom");
-    });
-
-    it("should default to right side when no side is specified", async () => {
-      render(Sheet, { open: true, title: "Test" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("sheet-right");
-    });
-  });
-
-  describe("accessibility", () => {
-    it("should have correct ARIA attributes", async () => {
-      render(Sheet, { open: true, title: "Test Sheet" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveAttribute("aria-modal", "true");
-      await expect.element(sheet).toHaveAttribute("aria-label", "Test Sheet");
-    });
-
-    it("should be focusable", async () => {
-      render(Sheet, { open: true, title: "Test Sheet" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveAttribute("tabindex", "-1");
-    });
-  });
-
-  describe("close behavior", () => {
-    it("should call onClose when backdrop is clicked and closeOnBackdrop is true", async () => {
-      const onClose = vi.fn();
-
-      render(Sheet, { open: true, onClose, closeOnBackdrop: true, title: "Test" });
-
-      const backdrop = page.getByRole("presentation");
-      await backdrop.click({ position: { x: 5, y: 5 } });
-
-      expect(onClose).toHaveBeenCalledOnce();
-    });
-
-    it("should call onClose when Escape key is pressed and closeOnEscape is true", async () => {
-      const onClose = vi.fn();
-
-      render(Sheet, { open: true, onClose, closeOnEscape: true, title: "Test" });
-
-      const sheet = document.querySelector<HTMLElement>("[role=\"dialog\"]")!;
-
-      sheet.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-
-      expect(onClose).toHaveBeenCalledOnce();
-    });
-
-    it("should not call onClose when backdrop is clicked and closeOnBackdrop is false", async () => {
-      const onClose = vi.fn();
-
-      render(Sheet, { open: true, onClose, closeOnBackdrop: false, title: "Test" });
-
-      const backdrop = page.getByRole("presentation");
-      await backdrop.click({ position: { x: 5, y: 5 } });
-
-      expect(onClose).not.toHaveBeenCalled();
-    });
-
-    it("should not call onClose when Escape key is pressed and closeOnEscape is false", async () => {
-      const onClose = vi.fn();
-
-      render(Sheet, { open: true, onClose, closeOnEscape: false, title: "Test" });
-
-      const sheet = document.querySelector<HTMLElement>("[role=\"dialog\"]")!;
-
-      sheet.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
-
-      expect(onClose).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("styling", () => {
-    it("should apply custom class to sheet content", async () => {
-      render(Sheet, { open: true, title: "Test", class: "custom-class" });
-
-      const sheet = page.getByRole("dialog");
-      await expect.element(sheet).toHaveClass("custom-class");
-    });
-  });
-});
diff --git a/apps/web/src/lib/theme.svelte.ts b/apps/web/src/lib/theme.svelte.ts
index 5fbcfaf..4b173e8 100644
--- a/apps/web/src/lib/theme.svelte.ts
+++ b/apps/web/src/lib/theme.svelte.ts
@@ -1,42 +1,38 @@
-import { browser } from "$app/environment";
-
-export type Theme = "light" | "dark";
-
-export function createThemeStore() {
-  const stored = browser ? localStorage.getItem("theme") : null;
-  const initialTheme: Theme = stored === "light" || stored === "dark" ? stored : "dark";
-  let theme = $state<Theme>(initialTheme);
-
-  if (browser) {
-    if (stored !== "light" && stored !== "dark") {
-      localStorage.setItem("theme", "dark");
-    }
-    document.documentElement.setAttribute("data-theme", initialTheme);
-  }
-
-  function toggle() {
-    theme = theme === "dark" ? "light" : "dark";
-    if (browser) {
-      localStorage.setItem("theme", theme);
-      document.documentElement.setAttribute("data-theme", theme);
-    }
-  }
-
-  function set(newTheme: Theme) {
-    theme = newTheme;
-    if (browser) {
-      localStorage.setItem("theme", theme);
-      document.documentElement.setAttribute("data-theme", theme);
-    }
-  }
-
-  return {
-    get current() {
-      return theme;
-    },
-    toggle,
-    set,
-  };
+import { browser } from '$app/environment';
+
+/** Explicit color themes supported by the web editor. */
+export type Theme = 'light' | 'dark';
+
+/** Reactive light and dark theme state shared by the web editor. */
+export class ThemeStore {
+	#theme = $state<Theme>('dark');
+	/** Currently active theme, derived from the store's private mutable state. */
+	readonly current = $derived(this.#theme);
+
+	constructor() {
+		const stored = browser ? localStorage.getItem('theme') : null;
+		this.#theme = stored === 'light' || stored === 'dark' ? stored : 'dark';
+		this.#syncTheme();
+	}
+
+	/** Switches between the light and dark themes. */
+	toggle() {
+		this.set(this.#theme === 'dark' ? 'light' : 'dark');
+	}
+
+	/** Applies and persists an explicit theme. */
+	set(theme: Theme) {
+		this.#theme = theme;
+		this.#syncTheme();
+	}
+
+	#syncTheme() {
+		if (!browser) return;
+
+		localStorage.setItem('theme', this.#theme);
+		document.documentElement.setAttribute('data-theme', this.#theme);
+		document.documentElement.setAttribute('data-ink-theme', this.#theme);
+	}
 }
 
-export const themeStore = createThemeStore();
+export const themeStore = new ThemeStore();
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 9772d2b..58fd4c4 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -2,6 +2,11 @@
 
 Shared Svelte 5 components and design tokens for Inkfinite's web app and Tauri desktop shell.
 
+The package exports buttons, icon buttons, semantic icons, panels, toolbars,
+dialogs, sheets, and brush settings. Application components should compose these
+controls while keeping document, runtime, persistence, and Tauri dependencies in
+the consuming app.
+
 The light theme uses Eldritch Dusk. The dark theme uses the restrained Eldritch Abyss palette. IBM Plex Sans Variable is the body face; Playpen Sans Variable is reserved for display text and handwritten accents. UnoCSS generates a small, fixed Iconify bundle from Phosphor, Tabler, and Bootstrap Icons.
 
 ## Use the library
diff --git a/packages/ui/src/lib/components/BrushPopover.stories.ts b/packages/ui/src/lib/components/BrushPopover.stories.ts
new file mode 100644
index 0000000..c855dbc
--- /dev/null
+++ b/packages/ui/src/lib/components/BrushPopover.stories.ts
@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import BrushPopover from './BrushPopover.svelte';
+
+const meta = {
+	title: 'Controls/Brush popover',
+	component: BrushPopover,
+	tags: ['autodocs'],
+	args: {
+		brush: {
+			color: '#8a69f7',
+			simulatePressure: true,
+			size: 16,
+			smoothing: 0.5,
+			streamline: 0.5,
+			thinning: 0.5
+		},
+		onBrushChange: () => {}
+	}
+} satisfies Meta<typeof BrushPopover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Disabled: Story = { args: { disabled: true } };
diff --git a/apps/web/src/lib/components/BrushPopover.svelte b/packages/ui/src/lib/components/BrushPopover.svelte
similarity index 86%
rename from apps/web/src/lib/components/BrushPopover.svelte
rename to packages/ui/src/lib/components/BrushPopover.svelte
index f949344..c279f79 100644
--- a/apps/web/src/lib/components/BrushPopover.svelte
+++ b/packages/ui/src/lib/components/BrushPopover.svelte
@@ -1,13 +1,24 @@
-<script lang="ts">
-	import type { BrushSettings } from '$lib/status';
+<script module lang="ts">
+	/** Visual brush settings edited by the shared brush popover. */
+	export interface BrushSettings {
+		color: string;
+		simulatePressure: boolean;
+		size: number;
+		smoothing: number;
+		streamline: number;
+		thinning: number;
+	}
 
-	type Props = {
+	/** Props for the shared brush settings control. */
+	export interface BrushPopoverProps {
 		brush: BrushSettings;
 		onBrushChange: (brush: BrushSettings) => void;
 		disabled?: boolean;
-	};
+	}
+</script>
 
-	let { brush, onBrushChange, disabled = false }: Props = $props();
+<script lang="ts">
+	let { brush, onBrushChange, disabled = false }: BrushPopoverProps = $props();
 
 	let isOpen = $state(false);
 	let popoverEl = $state<HTMLDivElement | null>(null);
@@ -227,9 +238,9 @@
 	}
 
 	.brush-popover__button {
-		border: 1px solid var(--border);
-		background: var(--surface);
-		color: var(--text);
+		border: var(--ink-line-width) solid var(--ink-border-strong);
+		background: var(--ink-surface-raised);
+		color: var(--ink-text);
 		padding: 0.5rem 0.75rem;
 		border-radius: 0.25rem;
 		cursor: pointer;
@@ -238,11 +249,11 @@
 	}
 
 	.brush-popover__button:hover:not(:disabled) {
-		background: var(--surface-elevated);
+		background: var(--ink-surface-hover);
 	}
 
 	.brush-popover__button:focus {
-		outline: 2px solid var(--accent);
+		outline: 3px solid var(--ink-focus);
 		outline-offset: 2px;
 	}
 
@@ -255,11 +266,11 @@
 		position: absolute;
 		top: calc(100% + 4px);
 		left: 0;
-		background: var(--surface);
-		color: var(--text);
-		border: 1px solid var(--border);
-		border-radius: 6px;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+		background: var(--ink-surface-raised);
+		color: var(--ink-text);
+		border: var(--ink-line-width) solid var(--ink-border-strong);
+		border-radius: var(--ink-radius-panel-small);
+		box-shadow: var(--ink-shadow-toolbar);
 		padding: 0.75rem;
 		display: flex;
 		flex-direction: column;
@@ -279,7 +290,7 @@
 		justify-content: space-between;
 		align-items: center;
 		font-size: 0.75rem;
-		color: var(--text);
+		color: var(--ink-text);
 	}
 
 	.brush-popover__label {
@@ -287,7 +298,7 @@
 	}
 
 	.brush-popover__value {
-		color: var(--text-muted);
+		color: var(--ink-text-muted);
 		font-variant-numeric: tabular-nums;
 	}
 
@@ -295,7 +306,7 @@
 		width: 100%;
 		height: 0.25rem;
 		border-radius: 2px;
-		background: var(--border);
+		background: var(--ink-border);
 		outline: none;
 		-webkit-appearance: none;
 		appearance: none;
@@ -307,7 +318,7 @@
 		width: 14px;
 		height: 14px;
 		border-radius: 50%;
-		background: var(--accent);
+		background: var(--ink-accent);
 		cursor: pointer;
 	}
 
@@ -315,18 +326,18 @@
 		width: 14px;
 		height: 14px;
 		border-radius: 50%;
-		background: var(--accent);
+		background: var(--ink-accent);
 		cursor: pointer;
 		border: none;
 	}
 
 	.brush-popover__control input[type='range']:focus::-webkit-slider-thumb {
-		outline: 2px solid var(--accent);
+		outline: 2px solid var(--ink-focus);
 		outline-offset: 2px;
 	}
 
 	.brush-popover__control input[type='range']:focus::-moz-range-thumb {
-		outline: 2px solid var(--accent);
+		outline: 2px solid var(--ink-focus);
 		outline-offset: 2px;
 	}
 
@@ -337,10 +348,10 @@
 
 	.brush-popover__control--color input[type='color'] {
 		width: 100%;
-		border: 1px solid var(--border);
+		border: 1px solid var(--ink-border);
 		border-radius: 0.25rem;
 		height: 32px;
-		background: var(--surface);
+		background: var(--ink-surface-raised);
 		cursor: pointer;
 	}
 
@@ -348,6 +359,6 @@
 		width: 16px;
 		height: 16px;
 		cursor: pointer;
-		accent-color: var(--accent);
+		accent-color: var(--ink-accent);
 	}
 </style>
diff --git a/packages/ui/src/lib/components/BrushPopover.svelte.test.ts b/packages/ui/src/lib/components/BrushPopover.svelte.test.ts
new file mode 100644
index 0000000..b01f8f8
--- /dev/null
+++ b/packages/ui/src/lib/components/BrushPopover.svelte.test.ts
@@ -0,0 +1,52 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import BrushPopover, { type BrushSettings } from './BrushPopover.svelte';
+
+const brush: BrushSettings = {
+	color: '#88c0d0',
+	simulatePressure: true,
+	size: 16,
+	smoothing: 0.5,
+	streamline: 0.5,
+	thinning: 0.5
+};
+
+describe('BrushPopover', () => {
+	it('opens an accessible set of brush controls', async () => {
+		const user = userEvent.setup();
+		render(BrushPopover, { brush, onBrushChange: vi.fn() });
+
+		await user.click(screen.getByRole('button', { name: 'Brush settings' }));
+
+		expect(screen.getByRole('dialog', { name: 'Brush settings' })).toBeInTheDocument();
+		expect(screen.getByLabelText('Brush size')).toHaveValue('16');
+		expect(screen.getByLabelText('Brush thinning')).toHaveValue('0.5');
+		expect(screen.getByLabelText('Simulate pressure')).toBeChecked();
+	});
+
+	it('reports completed brush changes', async () => {
+		const user = userEvent.setup();
+		const onBrushChange = vi.fn();
+		render(BrushPopover, { brush, onBrushChange });
+		await user.click(screen.getByRole('button', { name: 'Brush settings' }));
+
+		const size = screen.getByLabelText('Brush size');
+		await fireEvent.input(size, { target: { value: '25' } });
+		await fireEvent.change(size);
+
+		expect(onBrushChange).toHaveBeenLastCalledWith({ ...brush, size: 25 });
+	});
+
+	it('does not open while disabled', async () => {
+		const user = userEvent.setup();
+		render(BrushPopover, { brush, disabled: true, onBrushChange: vi.fn() });
+
+		const button = screen.getByRole('button', { name: 'Brush settings' });
+		await user.click(button);
+
+		expect(button).toBeDisabled();
+		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+	});
+});
diff --git a/packages/ui/src/lib/components/Dialog.stories.ts b/packages/ui/src/lib/components/Dialog.stories.ts
new file mode 100644
index 0000000..b5507fd
--- /dev/null
+++ b/packages/ui/src/lib/components/Dialog.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import Dialog from './Dialog.svelte';
+import DialogStory from './DialogStory.svelte';
+
+const meta = {
+	title: 'Surfaces/Dialog',
+	component: Dialog,
+	tags: ['autodocs'],
+	args: { open: true, title: 'About this board' },
+	render: (args) => ({ Component: DialogStory, props: args })
+} satisfies Meta<typeof Dialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Persistent: Story = { args: { closeOnBackdrop: false, closeOnEscape: false } };
diff --git a/apps/web/src/lib/components/Dialog.svelte b/packages/ui/src/lib/components/Dialog.svelte
similarity index 72%
rename from apps/web/src/lib/components/Dialog.svelte
rename to packages/ui/src/lib/components/Dialog.svelte
index 3028509..a6a2deb 100644
--- a/apps/web/src/lib/components/Dialog.svelte
+++ b/packages/ui/src/lib/components/Dialog.svelte
@@ -1,22 +1,25 @@
-<script lang="ts">
+<script module lang="ts">
 	import type { Snippet } from 'svelte';
 
-	type Props = {
-		/** Whether the dialog is open */
+	/** Props for the shared modal dialog surface. */
+	export interface DialogProps {
+		/** Whether the dialog is visible. */
 		open: boolean;
-		/** Callback when dialog should close */
+		/** Called after the dialog requests to close. */
 		onClose?: () => void;
-		/** Dialog title (for accessibility) */
+		/** Accessible name announced for the dialog. */
 		title?: string;
-		/** Whether clicking backdrop closes dialog (default: true) */
+		/** Whether a backdrop click closes the dialog. */
 		closeOnBackdrop?: boolean;
-		/** Whether escape key closes dialog (default: true) */
+		/** Whether Escape closes the dialog. */
 		closeOnEscape?: boolean;
-		/** Custom class for the dialog content */
+		/** Class applied to the dialog surface. */
 		class?: string;
 		children?: Snippet;
-	};
+	}
+</script>
 
+<script lang="ts">
 	let {
 		open = $bindable(false),
 		onClose,
@@ -25,7 +28,7 @@
 		closeOnBackdrop = true,
 		closeOnEscape = true,
 		class: className = ''
-	}: Props = $props();
+	}: DialogProps = $props();
 
 	let dialogElement: HTMLDivElement | undefined = $state();
 
@@ -49,9 +52,8 @@
 
 	$effect(() => {
 		if (open && dialogElement) {
-			dialogElement.focus();
-
 			const previouslyFocused = document.activeElement as HTMLElement;
+			dialogElement.focus();
 
 			return () => {
 				previouslyFocused?.focus();
@@ -85,7 +87,7 @@
 		left: 0;
 		width: 100vw;
 		height: 100vh;
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: color-mix(in srgb, var(--ink-shadow-color) 52%, transparent);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -94,12 +96,11 @@
 	}
 
 	.dialog__content {
-		background-color: var(--surface);
-		color: var(--text);
-		border-radius: 8px;
-		box-shadow:
-			0 10px 25px rgba(0, 0, 0, 0.1),
-			0 4px 10px rgba(0, 0, 0, 0.08);
+		background-color: var(--ink-surface-raised);
+		color: var(--ink-text);
+		border: var(--ink-line-width) solid var(--ink-border-strong);
+		border-radius: var(--ink-radius-panel);
+		box-shadow: var(--ink-shadow-panel);
 		max-width: 90vw;
 		max-height: 90vh;
 		overflow: auto;
diff --git a/packages/ui/src/lib/components/Dialog.svelte.test.ts b/packages/ui/src/lib/components/Dialog.svelte.test.ts
new file mode 100644
index 0000000..5eebe7b
--- /dev/null
+++ b/packages/ui/src/lib/components/Dialog.svelte.test.ts
@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import Dialog from './Dialog.svelte';
+
+describe('Dialog', () => {
+	it('renders an accessible modal only while open', () => {
+		const { rerender } = render(Dialog, { open: false, title: 'About Inkfinite' });
+		expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+		rerender({ open: true, title: 'About Inkfinite' });
+
+		const dialog = screen.getByRole('dialog', { name: 'About Inkfinite' });
+		expect(dialog).toHaveAttribute('aria-modal', 'true');
+		expect(dialog).toHaveFocus();
+	});
+
+	it('closes from the backdrop and Escape key when enabled', async () => {
+		const user = userEvent.setup();
+		const onClose = vi.fn();
+		render(Dialog, { open: true, onClose, title: 'Test dialog' });
+
+		await user.click(screen.getByRole('presentation'));
+		expect(onClose).toHaveBeenCalledOnce();
+
+		render(Dialog, { open: true, onClose, title: 'Second dialog' });
+		await user.keyboard('{Escape}');
+		expect(onClose).toHaveBeenCalledTimes(2);
+	});
+
+	it('keeps the dialog open when dismissal is disabled', async () => {
+		const user = userEvent.setup();
+		const onClose = vi.fn();
+		render(Dialog, {
+			closeOnBackdrop: false,
+			closeOnEscape: false,
+			onClose,
+			open: true,
+			title: 'Persistent dialog'
+		});
+
+		await user.click(screen.getByRole('presentation'));
+		await user.keyboard('{Escape}');
+
+		expect(onClose).not.toHaveBeenCalled();
+		expect(screen.getByRole('dialog')).toBeInTheDocument();
+	});
+});
diff --git a/packages/ui/src/lib/components/DialogStory.svelte b/packages/ui/src/lib/components/DialogStory.svelte
new file mode 100644
index 0000000..f6a6e5f
--- /dev/null
+++ b/packages/ui/src/lib/components/DialogStory.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import Dialog, { type DialogProps } from './Dialog.svelte';
+
+	let { open = true, ...props }: DialogProps = $props();
+</script>
+
+<Dialog bind:open {...props}>
+	<div class="story-dialog">
+		<p class="story-dialog__eyebrow">Shared surface</p>
+		<h2>About this board</h2>
+		<p>
+			Dialog content stays in the consuming app while focus and dismissal remain consistent.
+		</p>
+		<button type="button" onclick={() => (open = false)}>Close dialog</button>
+	</div>
+</Dialog>
+
+<style>
+	.story-dialog {
+		display: grid;
+		gap: var(--ink-space-3);
+		max-width: 28rem;
+		padding: var(--ink-space-5);
+	}
+
+	.story-dialog__eyebrow,
+	.story-dialog h2,
+	.story-dialog p {
+		margin: 0;
+	}
+
+	.story-dialog__eyebrow {
+		color: var(--ink-accent-text);
+		font-size: var(--ink-type-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.story-dialog h2 {
+		font-family: var(--ink-font-display);
+	}
+
+	.story-dialog button {
+		justify-self: start;
+		padding: var(--ink-space-2) var(--ink-space-3);
+	}
+</style>
diff --git a/packages/ui/src/lib/components/Icon.stories.ts b/packages/ui/src/lib/components/Icon.stories.ts
new file mode 100644
index 0000000..ea7bd01
--- /dev/null
+++ b/packages/ui/src/lib/components/Icon.stories.ts
@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import Icon from './Icon.svelte';
+import { ICONS } from '../icons';
+
+const meta = {
+	title: 'Controls/Icon',
+	component: Icon,
+	tags: ['autodocs'],
+	args: { name: 'draw', size: 24 },
+	argTypes: { name: { control: 'select', options: Object.keys(ICONS) } }
+} satisfies Meta<typeof Icon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Labeled: Story = { args: { label: 'Draw', name: 'draw' } };
diff --git a/packages/ui/src/lib/components/Icon.svelte b/packages/ui/src/lib/components/Icon.svelte
index c91caad..24a900d 100644
--- a/packages/ui/src/lib/components/Icon.svelte
+++ b/packages/ui/src/lib/components/Icon.svelte
@@ -5,16 +5,18 @@
 
 	/** Props for the shared Iconify-backed icon primitive. */
 	export interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+		color?: string;
 		label?: string;
 		name: IconName;
-		size?: string;
+		size?: number | string;
 	}
 </script>
 
 <script lang="ts">
 	import { ICONS } from '../icons';
 
-	let { class: className = '', label, name, size = '1em', ...rest }: IconProps = $props();
+	let { class: className = '', color, label, name, size = '1em', ...rest }: IconProps = $props();
+	let resolvedSize = $derived(typeof size === 'number' ? `${size}px` : size);
 </script>
 
 <span
@@ -23,7 +25,8 @@
 	aria-label={label}
 	class={['ink-icon', ICONS[name], className]}
 	role={label ? 'img' : undefined}
-	style:--ink-icon-size={size}></span>
+	style:--ink-icon-size={resolvedSize}
+	style:color></span>
 
 <style>
 	.ink-icon {
diff --git a/packages/ui/src/lib/components/Sheet.stories.ts b/packages/ui/src/lib/components/Sheet.stories.ts
new file mode 100644
index 0000000..9af3e22
--- /dev/null
+++ b/packages/ui/src/lib/components/Sheet.stories.ts
@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/sveltekit';
+
+import Sheet from './Sheet.svelte';
+import SheetStory from './SheetStory.svelte';
+
+const meta = {
+	title: 'Surfaces/Sheet',
+	component: Sheet,
+	tags: ['autodocs'],
+	args: { open: true, side: 'left', title: 'Stencil library' },
+	argTypes: { side: { control: 'select', options: ['left', 'right', 'top', 'bottom'] } },
+	render: (args) => ({ Component: SheetStory, props: args })
+} satisfies Meta<typeof Sheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const FromBottom: Story = { args: { side: 'bottom' } };
diff --git a/apps/web/src/lib/components/Sheet.svelte b/packages/ui/src/lib/components/Sheet.svelte
similarity index 84%
rename from apps/web/src/lib/components/Sheet.svelte
rename to packages/ui/src/lib/components/Sheet.svelte
index f1b6bc4..66d4164 100644
--- a/apps/web/src/lib/components/Sheet.svelte
+++ b/packages/ui/src/lib/components/Sheet.svelte
@@ -1,21 +1,24 @@
-<script lang="ts">
+<script module lang="ts">
 	import type { Snippet } from 'svelte';
 
-	/** Which side the sheet slides in from */
-	type Side = 'left' | 'right' | 'top' | 'bottom';
+	/** Side of the viewport from which a sheet enters. */
+	export type SheetSide = 'left' | 'right' | 'top' | 'bottom';
 
-	type Props = {
+	/** Props for the shared modal sheet surface. */
+	export interface SheetProps {
 		open: boolean;
 		onClose?: () => void;
 		title?: string;
-		side?: Side;
+		side?: SheetSide;
 		closeOnBackdrop?: boolean;
 		closeOnEscape?: boolean;
 		class?: string;
 		backdropClass?: string;
 		children?: Snippet;
-	};
+	}
+</script>
 
+<script lang="ts">
 	let {
 		open = $bindable(false),
 		onClose,
@@ -26,7 +29,7 @@
 		closeOnEscape = true,
 		class: className = '',
 		backdropClass = ''
-	}: Props = $props();
+	}: SheetProps = $props();
 
 	let sheetElement = $state<HTMLDivElement>();
 
@@ -50,9 +53,8 @@
 
 	$effect(() => {
 		if (open && sheetElement) {
-			sheetElement.focus();
-
 			const previouslyFocused = document.activeElement as HTMLElement;
+			sheetElement.focus();
 
 			return () => {
 				previouslyFocused?.focus();
@@ -86,18 +88,17 @@
 		left: 0;
 		width: 100vw;
 		height: 100vh;
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: color-mix(in srgb, var(--ink-shadow-color) 52%, transparent);
 		display: flex;
 		z-index: 1000;
 		animation: fadeIn 0.15s ease-out;
 	}
 
 	.sheet__content {
-		background-color: var(--surface);
-		color: var(--text);
-		box-shadow:
-			0 10px 25px rgba(0, 0, 0, 0.1),
-			0 4px 10px rgba(0, 0, 0, 0.08);
+		background-color: var(--ink-surface-raised);
+		color: var(--ink-text);
+		border: var(--ink-line-width) solid var(--ink-border-strong);
+		box-shadow: var(--ink-shadow-panel);
 		overflow: auto;
 		outline: none;
 	}
diff --git a/packages/ui/src/lib/components/Sheet.svelte.test.ts b/packages/ui/src/lib/components/Sheet.svelte.test.ts
new file mode 100644
index 0000000..1d77a19
--- /dev/null
+++ b/packages/ui/src/lib/components/Sheet.svelte.test.ts
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import Sheet from './Sheet.svelte';
+
+describe('Sheet', () => {
+	it.each(['left', 'right', 'top', 'bottom'] as const)(
+		'renders an accessible %s-side modal',
+		(side) => {
+			render(Sheet, { open: true, side, title: 'Layers' });
+
+			const sheet = screen.getByRole('dialog', { name: 'Layers' });
+			expect(sheet).toHaveAttribute('aria-modal', 'true');
+			expect(sheet).toHaveClass(`sheet-${side}`);
+			expect(sheet).toHaveFocus();
+		}
+	);
+
+	it('defaults to the right side', () => {
+		render(Sheet, { open: true, title: 'History' });
+		expect(screen.getByRole('dialog')).toHaveClass('sheet-right');
+	});
+
+	it('closes from the backdrop and Escape key', async () => {
+		const user = userEvent.setup();
+		const onClose = vi.fn();
+		render(Sheet, { open: true, onClose, title: 'First sheet' });
+
+		await user.click(screen.getByRole('presentation'));
+		expect(onClose).toHaveBeenCalledOnce();
+
+		render(Sheet, { open: true, onClose, title: 'Second sheet' });
+		await user.keyboard('{Escape}');
+		expect(onClose).toHaveBeenCalledTimes(2);
+	});
+});
diff --git a/packages/ui/src/lib/components/SheetStory.svelte b/packages/ui/src/lib/components/SheetStory.svelte
new file mode 100644
index 0000000..89aa315
--- /dev/null
+++ b/packages/ui/src/lib/components/SheetStory.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import Sheet, { type SheetProps } from './Sheet.svelte';
+
+	let { open = true, ...props }: SheetProps = $props();
+</script>
+
+<Sheet bind:open {...props}>
+	<div class="story-sheet">
+		<p>Shared sheet</p>
+		<h2>Stencil library</h2>
+		<label>
+			<span>Filter components</span>
+			<input type="search" placeholder="Search…" />
+		</label>
+		<button type="button" onclick={() => (open = false)}>Close sheet</button>
+	</div>
+</Sheet>
+
+<style>
+	.story-sheet {
+		display: grid;
+		gap: var(--ink-space-4);
+		padding: var(--ink-space-5);
+	}
+
+	.story-sheet p,
+	.story-sheet h2 {
+		margin: 0;
+	}
+
+	.story-sheet p {
+		color: var(--ink-accent-text);
+		font-size: var(--ink-type-xs);
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.story-sheet label {
+		display: grid;
+		gap: var(--ink-space-2);
+	}
+</style>
diff --git a/packages/ui/src/lib/icons.ts b/packages/ui/src/lib/icons.ts
index 0de36a0..2d43295 100644
--- a/packages/ui/src/lib/icons.ts
+++ b/packages/ui/src/lib/icons.ts
@@ -1,18 +1,27 @@
 /** Iconify classes used by Inkfinite's shared icon component. */
 export const ICONS = {
-  add: "i-ph-plus-bold",
-  arrow: "i-tabler-arrow-up-right",
-  check: "i-bi-check-lg",
-  close: "i-ph-x-bold",
-  dark: "i-tabler-moon",
-  delete: "i-bi-trash3",
-  draw: "i-ph-pencil-simple-line-bold",
-  light: "i-tabler-sun",
-  menu: "i-bi-list",
-  redo: "i-tabler-arrow-forward-up",
-  save: "i-ph-floppy-disk-back-bold",
-  settings: "i-bi-sliders",
-  undo: "i-tabler-arrow-back-up",
+	add: 'i-ph-plus-bold',
+	arrow: 'i-tabler-arrow-up-right',
+	check: 'i-bi-check-lg',
+	close: 'i-ph-x-bold',
+	dark: 'i-tabler-moon',
+	delete: 'i-bi-trash3',
+	draw: 'i-ph-pencil-simple-line-bold',
+	folder: 'i-ph-folder-bold',
+	'grid-dots': 'i-tabler-grid-dots',
+	'grip-vertical': 'i-tabler-grip-vertical',
+	'info-circle': 'i-tabler-info-circle',
+	light: 'i-tabler-sun',
+	menu: 'i-bi-list',
+	moon: 'i-tabler-moon',
+	pencil: 'i-ph-pencil-simple-line-bold',
+	redo: 'i-tabler-arrow-forward-up',
+	save: 'i-ph-floppy-disk-back-bold',
+	search: 'i-ph-magnifying-glass-bold',
+	settings: 'i-bi-sliders',
+	sun: 'i-tabler-sun',
+	trash: 'i-bi-trash3',
+	undo: 'i-tabler-arrow-back-up'
 } as const;
 
 /** A semantic icon name supported by the shared icon component. */
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index 79d19c8..c2f15db 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -1,14 +1,16 @@
-export { default as Button } from "./components/Button.svelte";
-export type { ButtonProps, ButtonVariant } from "./components/Button.svelte";
-export { default as Icon } from "./components/Icon.svelte";
-export type { IconProps } from "./components/Icon.svelte";
-export { default as IconButton } from "./components/IconButton.svelte";
-export type { IconButtonProps } from "./components/IconButton.svelte";
-export { default as Panel } from "./components/Panel.svelte";
-export type { PanelProps } from "./components/Panel.svelte";
-export { default as Toolbar } from "./components/Toolbar.svelte";
-export type { ToolbarProps } from "./components/Toolbar.svelte";
-export { ICONS } from "./icons";
-export type { IconName } from "./icons";
-export { applyInkTheme } from "./theme";
-export type { InkTheme } from "./theme";
+export { default as Button } from './components/Button.svelte';
+export type { ButtonProps, ButtonVariant } from './components/Button.svelte';
+
+export { default as BrushPopover } from './components/BrushPopover.svelte';
+export type { BrushPopoverProps, BrushSettings } from './components/BrushPopover.svelte';
+
+export { default as Sheet } from './components/Sheet.svelte';
+export type { SheetProps, SheetSide } from './components/Sheet.svelte';
+
+export { default as Dialog, type DialogProps } from './components/Dialog.svelte';
+export { default as Icon, type IconProps } from './components/Icon.svelte';
+export { default as IconButton, type IconButtonProps } from './components/IconButton.svelte';
+export { default as Panel, type PanelProps } from './components/Panel.svelte';
+export { default as Toolbar, type ToolbarProps } from './components/Toolbar.svelte';
+export { ICONS, type IconName } from './icons';
+export { applyInkTheme, type InkTheme } from './theme';
diff --git a/packages/ui/src/lib/styles/icons.css b/packages/ui/src/lib/styles/icons.css
index 20f76af..5b454b6 100644
--- a/packages/ui/src/lib/styles/icons.css
+++ b/packages/ui/src/lib/styles/icons.css
@@ -5,11 +5,16 @@
 .i-bi-sliders{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M11.5 2a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3zM4.5 7a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8zm9.45 4a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3m-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-bi-trash3{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 16 16' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5M11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1zm1.958 1l-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47M8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-ph-floppy-disk-back-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208 28H83.31a19.86 19.86 0 0 0-14.14 5.86L33.86 69.17A19.86 19.86 0 0 0 28 83.31V208a20 20 0 0 0 20 20h160a20 20 0 0 0 20-20V48a20 20 0 0 0-20-20M92 52h72v20H92Zm112 152H52V85l16-16v7a20 20 0 0 0 20 20h80a20 20 0 0 0 20-20V52h16Zm-76-96a42 42 0 1 0 42 42a42 42 0 0 0-42-42m0 60a18 18 0 1 1 18-18a18 18 0 0 1-18 18'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
+.i-ph-folder-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M216 68h-82.61l-26-29.29a20 20 0 0 0-15-6.71H40a20 20 0 0 0-20 20v148.62A19.41 19.41 0 0 0 39.38 220h177.51A19.13 19.13 0 0 0 236 200.89V88a20 20 0 0 0-20-20M44 56h46.61l10.67 12H44Zm168 140H44V92h168Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
+.i-ph-magnifying-glass-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M232.49 215.51L185 168a92.12 92.12 0 1 0-17 17l47.53 47.54a12 12 0 0 0 17-17ZM44 112a68 68 0 1 1 68 68a68.07 68.07 0 0 1-68-68'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-ph-pencil-simple-line-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='m230.15 70.54l-44.69-44.68a20 20 0 0 0-28.28 0L33.86 149.17A19.86 19.86 0 0 0 28 163.31V208a20 20 0 0 0 20 20h168a12 12 0 0 0 0-24h-91L230.15 98.83a20 20 0 0 0 0-28.29M91 204H52v-39l84-84l39 39Zm101-101l-39-39l18.34-18.34l39 39Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-ph-plus-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-ph-x-bold{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 256 256' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='currentColor' d='M208.49 191.51a12 12 0 0 1-17 17L128 145l-63.51 63.49a12 12 0 0 1-17-17L111 128L47.51 64.49a12 12 0 0 1 17-17L128 111l63.51-63.52a12 12 0 0 1 17 17L145 128Z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-tabler-arrow-back-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m9 14l-4-4l4-4'/%3E%3Cpath d='M5 10h11a4 4 0 1 1 0 8h-1'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-tabler-arrow-forward-up{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m15 14l4-4l-4-4'/%3E%3Cpath d='M19 10H8a4 4 0 1 0 0 8h1'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-tabler-arrow-up-right{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 7L7 17M8 7h9v9'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
+.i-tabler-grid-dots{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0M4 19a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0m7 0a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
+.i-tabler-grip-vertical{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 5a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m6-14a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0m0 7a1 1 0 1 0 2 0a1 1 0 1 0-2 0'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
+.i-tabler-info-circle{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cg fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0m9-3h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-tabler-moon{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
 .i-tabler-sun{--un-icon:url("data:image/svg+xml;utf8,%3Csvg viewBox='0 0 24 24' display='inline-block' flex-shrink='0' vertical-align='-0.125em' width='1em' height='1em' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7'/%3E%3C/svg%3E");-webkit-mask:var(--un-icon) no-repeat;mask:var(--un-icon) no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;background-color:currentColor;color:inherit;display:inline-block;flex-shrink:0;vertical-align:-0.125em;width:1em;height:1em;}
diff --git a/packages/ui/vitest.setup.ts b/packages/ui/vitest.setup.ts
index f149f27..f91c8d3 100644
--- a/packages/ui/vitest.setup.ts
+++ b/packages/ui/vitest.setup.ts
@@ -1 +1,5 @@
 import "@testing-library/jest-dom/vitest";
+import { cleanup } from "@testing-library/svelte";
+import { afterEach } from "vitest";
+
+afterEach(cleanup);
-- 
2.51.2