SettingsLayout

A sectioned settings workspace with stable in-page navigation, app-owned dirty data, and one persistent asynchronous save bar.@gemologic/sheen-patterns · application

Playground

This example has no scalar controls. Its validated source remains interactive below.

Profile

Display name

<AppShell label="Settings"><SettingsLayout label="Workspace settings" sections={sections} dirty={false} onSave={() => {}} /></AppShell>

Variant matrix

Dirty settings

Profile

Display name

Anatomy

Package

@gemologic/sheen-patterns

Source

packages/patterns/src/SettingsLayout.tsx

Tokens

--sheen-color-bg
--sheen-color-bg-raised
--sheen-color-border
--sheen-color-fg-muted
--sheen-space-section

Accessibility

Role: group, navigation, section, heading, statusKeyboard: Tab, Shift+Tab, Enter, Space

Do

Keep draft and accepted values in the app and return the real save promise.
Keep the layout mounted while saving and while section data refreshes.
Pass activeSection when a router or observer owns section selection.

Do not

Do not remount section inputs on save or refresh.
Do not infer dirty state from the DOM.
Do not hide the save bar when settings become clean and strand keyboard focus.

Generated props

Name	Type	Default	Description
`label` *	`string`	—	Accessible name for the settings workspace.
`sections` *	`readonly SettingsLayoutSection[]`	—	Stable-ID section labels, optional descriptions, and app-owned setting content.
`activeSection`	`string`	—	Optional controlled section highlighted in the navigation rail.
`onSectionChange`	`(id: string) => void`	—	Receives navigation intent after a section button is activated.
`sectionHeadingLevel`	`1 \| 2 \| 3 \| 4 \| 5 \| 6`	`2`	Semantic heading level shared by section titles.
`dirty` *	`boolean`	—	App-owned dirty state registered with the surrounding AppShell navigation guard.
`onSave` *	`() => void \| Promise<void>`	—	App save operation. Rejections retain content and expose a localized failure state.
`onDiscard`	`() => void`	—	Optional app-owned restoration of the last accepted settings values.
`saveError`	`string \| null`	—	Optional app-localized save error retained beside the save controls.

Native Solid/HTML attributes remain available and are omitted from this authored-prop view.