Settings

Describe the page as a SettingsModel (profile, sections, rows with stable ids) and the screen does the rest. The profile header moves at half scroll speed, stretches on over-scroll and collapses into an inline avatar-and-name title. Rows sit in grouped surfaces with tinted icon tiles and a press highlight. Toggles tick with a soft haptic; navigation rows push nested pages and picker rows push a single-choice list, both entering with their groups sliding in along the push axis. Sign-out is a red row that confirms in a compact sheet whose button turns into progress while your async signOut runs, and a version footer closes the page.

Notes

• Inside a tab or another NavigationStack, pass wrapsInNavigationStack: false: the screen skips its own stack and pages push onto the enclosing one. The templates embed it this way.
• Row kinds: toggle(Binding<Bool>), navigation(SettingsPage, value:), picker(options:selection:), action(() -> Void) and info(String). Pages nest freely; routes are resolved by id against the model, so bindings stay live on pushed pages.
• The header height is measured, so the collapse point adapts to Dynamic Type and to a hidden plan badge.
• The sheet uses presentationDetents([.height(340)]), a visible drag indicator and a 32 pt corner radius; dismissal is disabled while signing out. A .warning haptic plays when it appears.
• Reduce Motion drops the slide-in offsets and springs; the collapse still tracks the scroll.
• The navigation title you pass becomes the back-button label on pushed pages; the inline principal title shows the person.
• SettingsScreenExample at the end of SettingsScreen.swift is the screen shown in the preview; copy it as a starting point.

Theming

• Reads SPTheme tokens from @Environment(\.spTheme) and requires the design-system item. Set .environment(\.spTheme, YourTheme()) above the screen to re-skin it.
• Pages sit on color.bg, groups on spSurface(.e1) with radius.lg, and text, dividers, the plan badge and the sign-out row use textPrimary, textSecondary, separator, fill and danger. Navigation chrome and the picker checkmark use accent; switches use success.
• SettingsRow.tint is optional. Pass a color to give a row its own icon tile, or leave it nil for an accent tile with an accentOn glyph.
• Presses use motion.standard and motion.bouncy, and pushed groups slide in with motion.hero, which becomes a short fade under Reduce Motion. The parallax header and collapse stay scroll-linked.