Profile Form SwiftUI Block

The photo sits at the top in a circle, with Add photo or Change photo opening the system photo picker and Remove taking it out; a picked photo is scaled to 1024 points and shown at once. One card holds Name, Username and Bio. The username drops its @, keeps to lowercase letters, digits, periods and underscores, and checks itself through your closure a moment after typing stops: a spinner in the field and "Checking availability", then a check in the success colour with "@maya.chen is available", or a cross with "@maya is taken. Try one of these:" and your suggestions as chips that fill the field when tapped. The bio counts toward its limit, turning to the warning colour near it and to the danger colour past it. Pronouns and Website sit in an Optional card; the website checks its shape once you leave it. Save stays dimmed until something has changed and everything is valid, then runs your closure with a spinner, a check, or the thrown error's message under it. hasChanges tells your screen there are unsaved edits so it can ask before it closes. Pass nil while the profile loads and the block draws grey shapes in its own layout.

Notes

• ProfileForm(profile:hasChanges:bioLimit:checkUsername:onSave:onSuccess:). Only profile and onSave are required. It is a section: no navigation stack, background, padding or scroll view of its own, so place it in your own column or sheet.
• ProfileForm.Profile holds name, username (without the @), bio, pronouns, website and an optional photoURL, loaded with AsyncImage; without one the block shows the initials. Profile.sample is Maya Chen from the preview. A new profile replaces the fields only while nothing is edited, so a refresh never wipes what was typed.
• onSave receives ProfileForm.Changes: the edited Profile, trimmed, and a PhotoChange (.unchanged, .replaced(Data) with a JPEG at most 1024 points on its longest side, or .removed). Return to succeed, throw to fail; a thrown LocalizedError's errorDescription shows under Save, otherwise "Couldn't save your profile. Try again." A CancellationError goes back to rest quietly. After the check, the saved values become the new baseline and onSuccess is called; close your sheet there.
• checkUsername receives the cleaned name about half a second after typing stops and returns a UsernameStatus: .available, .taken(suggestions:) or .invalid(message) in your words. A thrown error reads "Couldn't check this name right now. You can still save." and lets Save go ahead. Leave it out to check the format only (at least 3 characters, no leading, trailing or doubled periods). A name the person already has is never checked.
• hasChanges is a Binding<Bool> the block writes. Use it for .interactiveDismissDisabled(hasChanges) and a "Discard your changes?" confirmationDialog on Cancel, as the Example does.
• bioLimit defaults to 160 characters.
• Fields: Name is .name, Username .username with the ASCII keyboard, Website .URL with the URL keyboard. Return moves from Name to Username to Bio and from Pronouns to Website, and Done on the website saves when it can.
• Haptics: success when a save lands, an error when it fails or a photo can't be read.
• VoiceOver reads each field by its label, the username's state as its value ("Checking", "Available", "Taken"), the bio count as "89 of 160 characters", announces available, taken, removed and saved, and hints at Save while nothing has changed. Each suggestion reads "Use maya.chen". Every control is at least 44 points tall, and text wraps at accessibility sizes.
• Reduce Motion turns every change into a short fade.
• ProfileFormExample at the end of ProfileForm.swift is the Edit profile sheet from the preview: Cancel confirms before discarding edits and the sheet can't be swiped away while there are some. Its stand-in server says "maya" and a few other short names are taken and offers three others. It reads the theme from the environment; pass wrapsInNavigationStack: false to push it in your own stack.

Theming

• Reads SPTheme from @Environment(\.spTheme) and requires the design-system item.
• Cards are color.surface with radius.lg and 16 point padding; groups sit 24 points apart. The Optional title is type.headline.
• Fields are 52 points tall on fill with radius.md and a 1 point separator hairline that turns to textPrimary when focused and to danger on an error. Labels are type.subhead in textSecondary, input type.body in textPrimary, prompts and the @ textTertiary, the count type.caption with monospaced digits.
• The photo is an 88 point circle on fill with a separator ring; initials use the display face (type.face) at 32 points, capped at semibold, in textSecondary.
• Availability uses success and danger for its icon and line; suggestion chips are capsules on fill with a separator ring.
• Save is the only accent: accent with accentOn in type.headline, radius.md, 52 points, at 40% opacity while there's nothing to save. Change photo is type.subhead semibold in textPrimary, Remove textSecondary.
• States move with motion.snappy, loading with motion.smooth, presses with motion.standard.