diff --git a/src/uix/eidos/components/words/words-inspector.svelte b/src/uix/eidos/components/words/words-inspector.svelte index 846f69571..388f893ad 100644 --- a/src/uix/eidos/components/words/words-inspector.svelte +++ b/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 } })} /> - edit({ border: { ...block.border, radius: n } })} - />
- {t(L.LABEL_PRESET)} + {t(L.LABEL_CORNER_RADIUS)} { - 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)} > {t(L.PRESET_NONE)} + S + M + L {t(L.PRESET_FULL)}