Settings Section

Usage

Import SettingsSection, SettingsRow, and the layout enums from @prepared911/ui/blocks/settings-section.

Each section fills its column up to Breakpoint.CenteredBlock (640px; --breakpoint-centered-block on the section root via Box maxWidth; SSEC-26) and stays full width in narrower layouts.

Each commit row passes a control render function that receives { labelId, descriptionId, value, disabled, readOnly, busy, onValueChange }. Wire labelledBy and describedBy on the control from those ids.

SettingsRow owns inline layout: the control centers on a one-line title and top-aligns to the first title line when the title wraps; summary values render under the title; internal audience markers use the shipped Badge; overridden rows show a plain Reset button directly before the control; row actions hug their text width.

Sections render null when every row is hidden by permission or audience. When the backing data is empty but the section stays on the page, pass emptyState so ComposedEmptyState fills the card.

Danger sections use kind: danger with layout: destructive rows and typed ConfirmDialog; they never commit on change until confirm succeeds.

Call Transcript / Accessibility

Settings Section / API and Development