fix(words): corner radius is a 5-step preset ToggleGroup

The radius control was a 0-48 slider plus a none/full-only toggle — the
preset toggle 'didn't work' for anything between, and a bare slider value
is invisible until the block also has a border or background. Replace both
with one attached ToggleGroup of named steps: None / S / M / L / Full →
0 / 4 / 8 / 16 / 9999 px (render.ts already emits border-radius from
border.radius). Verified the control renders [Ninguno, S, M, L, Completo].

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/words/words-inspector.svelte

@@ -328,6 +328,27 @@
 		'#ffffff'
 	];
 
+	// Corner-radius presets → px. The radius is a ToggleGroup of named steps
+	// (not a free slider): none / S / M / L / Full, mapping to the global
+	// radius scale. `9999` is the canonical "pill" sentinel the render clamps
+	// to half the box. (border-radius only shows once the block carries a
+	// border OR a background — render.ts emits it either way.)
+	const RADIUS_PRESETS = { none: 0, sm: 4, md: 8, lg: 16, full: 9999 } as const;
+	function radiusPreset(radius: number | undefined): string {
+		switch (radius) {
+			case 4:
+				return 'sm';
+			case 8:
+				return 'md';
+			case 16:
+				return 'lg';
+			case 9999:
+				return 'full';
+			default:
+				return 'none';
+		}
+	}
+
 	function blockTitle(b: WordsBlock): string {
 		switch (b.type) {
 			case 'heading':
@@ -702,35 +723,24 @@
 								presets={COLOR_PRESETS}
 								onPick={(hex) => edit({ border: { ...block.border, color: hex } })}
 							/>
-							<WordsNumRow
-								label={t(L.LABEL_CORNER_RADIUS)}
-								value={block.border?.radius ?? 0}
-								min={0}
-								max={48}
-								step={1}
-								sliderOnly
-								onCommit={(n) => edit({ border: { ...block.border, radius: n } })}
-							/>
 							<div data-words-inspector-row data-inline>
-								<span data-words-inspector-label>{t(L.LABEL_PRESET)}</span>
+								<span data-words-inspector-label>{t(L.LABEL_CORNER_RADIUS)}</span>
 								<ToggleGroup
 									type="single"
 									size="xs"
 									variant="ghost"
 									attached
-									value={block.border?.radius === 9999
-										? ['full']
-										: block.border?.radius === 0
-											? ['none']
-											: []}
+									value={[radiusPreset(block.border?.radius)]}
 									onValueChange={(v: string[]) => {
-										const preset = v[0];
-										if (preset === 'full') edit({ border: { ...block.border, radius: 9999 } });
-										else if (preset === 'none') edit({ border: { ...block.border, radius: 0 } });
+										const px = RADIUS_PRESETS[v[0] as keyof typeof RADIUS_PRESETS];
+										if (px !== undefined) edit({ border: { ...block.border, radius: px } });
 									}}
 									aria-label={t(L.ARIA_RADIUS_PRESET)}
 								>
 									<ToggleGroup.Item value="none">{t(L.PRESET_NONE)}</ToggleGroup.Item>
+									<ToggleGroup.Item value="sm">S</ToggleGroup.Item>
+									<ToggleGroup.Item value="md">M</ToggleGroup.Item>
+									<ToggleGroup.Item value="lg">L</ToggleGroup.Item>
 									<ToggleGroup.Item value="full">{t(L.PRESET_FULL)}</ToggleGroup.Item>
 								</ToggleGroup>
 							</div>