rework toolbar to use attachment pattern, simpler external control

src/routes/+page.svelte

@@ -32,8 +32,9 @@
 	let dialogOpen = $state(false);
 
 	const toolbar = new Toolbar();
-	const fontGroup = toolbar.group('font');
-	const { state: boldState, ...boldProps } = fontGroup.toggle();
+	const fontGroup = toolbar.group();
+	const boldToggle = fontGroup.toggle();
+	const boldStore = boldToggle.store;
 </script>
 
 <title>sui</title>
@@ -219,7 +220,7 @@
 	<p class="title">Toolbar</p>
 
 	<div class="my-2">
-		<p>Bold is enabled: {$boldState}</p>
+		<p>Bold is enabled: {$boldStore}</p>
 	</div>
 
 	<div
@@ -236,20 +237,30 @@
 		</div>
 		<div class="bg-sui-text/50 w-[1px] self-stretch"></div>
 		<div class="flex items-center gap-1">
-			<button class="item" title="Toggle Bold" aria-label="bold" {...boldProps}>
+			<button class="item" title="Toggle Bold" aria-label="bold" {@attach boldToggle.attachment}>
 				<TextB size="1.25em" />
 			</button>
-			<button class="item" title="Toggle Italic" aria-label="italic" {...fontGroup.toggle()}>
+			<button
+				class="item"
+				title="Toggle Italic"
+				aria-label="italic"
+				{@attach fontGroup.toggle().attachment}
+			>
 				<TextItalic size="1.25em" />
 			</button>
-			<button class="item" title="Toggle Underline" aria-label="underline" {...fontGroup.toggle()}>
+			<button
+				class="item"
+				title="Toggle Underline"
+				aria-label="underline"
+				{@attach fontGroup.toggle().attachment}
+			>
 				<TextUnderline size="1.25em" />
 			</button>
 			<button
 				class="item"
 				title="Toggle Strikethrough"
 				aria-label="strikethrough"
-				{...fontGroup.toggle()}
+				{...fontGroup.toggle().props}
 			>
 				<TextStrikethrough size="1.25em" />
 			</button>