add toolbar builder

src/routes/+page.svelte

@@ -17,7 +17,7 @@
 	import TimezoneInput from '$lib/TimezoneInput.svelte';
 	import ToggleGroup from '$lib/ToggleGroup.svelte';
 	import ToggleSelect from '$lib/ToggleSelect.svelte';
-	import { Toolbar, type ToolbarToggleState } from '$lib/Toolbar.svelte';
+	import { Toolbar } from '$lib/Toolbar';
 	import {
 		ArrowUUpLeft,
 		ArrowUUpRight,
@@ -33,7 +33,7 @@
 
 	const toolbar = new Toolbar();
 	const fontGroup = toolbar.group('font');
-	const { state: boldState, ...boldToggle } = toolbar.toggle({ group: 'font' });
+	const { state: boldState, ...boldProps } = fontGroup.toggle();
 </script>
 
 <title>sui</title>
@@ -235,37 +235,21 @@
 			</button>
 		</div>
 		<div class="bg-sui-text/50 w-[1px] self-stretch"></div>
-		<div class="flex items-center gap-1" {...fontGroup}>
-			<button
-				class="item"
-				title="Toggle Bold"
-				aria-label="bold"
-				{...boldToggle}
-				use:boldToggle.bindDataState
-			>
+		<div class="flex items-center gap-1">
+			<button class="item" title="Toggle Bold" aria-label="bold" {...boldProps}>
 				<TextB size="1.25em" />
 			</button>
-			<button
-				class="item"
-				title="Toggle Italic"
-				aria-label="italic"
-				{...toolbar.toggle({ group: 'font' })}
-			>
+			<button class="item" title="Toggle Italic" aria-label="italic" {...fontGroup.toggle()}>
 				<TextItalic size="1.25em" />
 			</button>
-			<button
-				class="item"
-				title="Toggle Underline"
-				aria-label="underline"
-				{...toolbar.toggle({ group: 'font' })}
-			>
+			<button class="item" title="Toggle Underline" aria-label="underline" {...fontGroup.toggle()}>
 				<TextUnderline size="1.25em" />
 			</button>
 			<button
 				class="item"
 				title="Toggle Strikethrough"
 				aria-label="strikethrough"
-				{...toolbar.toggle({ group: 'font' })}
+				{...fontGroup.toggle()}
 			>
 				<TextStrikethrough size="1.25em" />
 			</button>