@mmerterden/multi-agent-pipeline 20.17.1 → 20.17.2

package/pipeline/skills/shared/external/swiftui-patterns/references/design-polish.md

@@ -1,786 +0,0 @@
-# Design Polish
-
-Human Interface Guidelines applied in SwiftUI (layout, type, color, navigation
-chrome, feedback, accessibility, empty states), plus theming, haptics, matched
-transitions, loading placeholders and form focus.
-
-## Contents
-
-1. [HIG: Layout and Spacing](#1-hig-layout-and-spacing)
-2. [HIG: Typography](#2-hig-typography)
-3. [HIG: Color](#3-hig-color)
-4. [HIG: Navigation Chrome](#4-hig-navigation-chrome)
-5. [HIG: Feedback](#5-hig-feedback)
-6. [HIG: Accessibility](#6-hig-accessibility)
-7. [HIG: Error and Empty States](#7-hig-error-and-empty-states)
-8. [Theming and Dynamic Type](#8-theming-and-dynamic-type)
-9. [Haptics](#9-haptics)
-10. [Core Haptics](#10-core-haptics)
-11. [Matched Transitions](#11-matched-transitions)
-12. [Loading and Placeholders](#12-loading-and-placeholders)
-13. [Form Focus](#13-form-focus)
-
-## 1. HIG: Layout and Spacing
-
-Start by leaving `spacing:` off stacks; the adaptive default is usually right.
-When you do choose a value on purpose, take it from a 4 point grid. That grid is
-a widespread design convention, not something Apple requires, and values
-between its stops should not be invented.
-
-| Points | Token | Typical use |
-|---|---|---|
-| 4 | `xxSmall` | Icon to label, inline badge offset |
-| 8 | `xSmall` | Related items in one group, tight stack gaps |
-| 12 | `small` | Row inner padding, label to secondary text |
-| 16 | `medium` | Standard margin, default gap between sections |
-| 20 | `mediumLarge` | Room between separate controls |
-| 24 | `large` | Section separators, card inner padding |
-| 32 | `xLarge` | Major groups, header to content |
-| 40 | `xxLarge` | Large section breaks |
-| 48 | `xxxLarge` | Hero, splash and onboarding layouts |
-
-```swift
-enum Spacing {
-    static let xxSmall: CGFloat = 4
-    static let xSmall: CGFloat = 8
-    static let small: CGFloat = 12
-    static let medium: CGFloat = 16
-    static let mediumLarge: CGFloat = 20
-    static let large: CGFloat = 24
-    static let xLarge: CGFloat = 32
-    static let xxLarge: CGFloat = 40
-    static let xxxLarge: CGFloat = 48
-}
-```
-
-Margins shared across screens can be named insets:
-
-```swift
-private enum Margin {
-    static let regular: CGFloat = 16
-    static let tight: CGFloat = 8
-    static let wide: CGFloat = 24
-}
-
-extension EdgeInsets {
-    static let regular = EdgeInsets(top: Margin.regular, leading: Margin.regular,
-                                    bottom: Margin.regular, trailing: Margin.regular)
-    static let rowContent = EdgeInsets(top: 12, leading: Margin.regular,
-                                       bottom: 12, trailing: Margin.regular)
-}
-```
-
-Respect the safe area and pin persistent actions with `safeAreaInset`:
-
-```swift
-ScrollView {
-    LazyVStack { ForEach(lines) { OrderLineRow(line: $0) } }
-        .padding(.horizontal)
-}
-.safeAreaInset(edge: .bottom) {
-    HStack {
-        Button("Back", action: goBack).buttonStyle(.bordered)
-        Button("Place order", action: placeOrder).buttonStyle(.borderedProminent)
-    }
-    .padding()
-    .background(.regularMaterial)
-}
-```
-
-Adapt compact and regular widths with the size class:
-
-```swift
-@Environment(\.horizontalSizeClass) private var sizeClass
-
-private var gridColumns: [GridItem] {
-    let count = sizeClass == .regular ? 3 : 1
-    return Array(repeating: GridItem(.flexible()), count: count)
-}
-```
-
-## 2. HIG: Typography
-
-Text styles scale with Dynamic Type without extra work. Sizes below are the
-iOS defaults at the Large content size.
-
-| Style | Size and weight | Use |
-|---|---|---|
-| `.largeTitle` | 34 pt regular | Screen title |
-| `.title` | 28 pt regular | Section header |
-| `.title2` | 22 pt regular | Sub-section header |
-| `.title3` | 20 pt regular | Group header |
-| `.headline` | 17 pt semibold | Row title |
-| `.body` | 17 pt regular | Main content |
-| `.callout` | 16 pt regular | Secondary content |
-| `.subheadline` | 15 pt regular | Supporting text |
-| `.footnote` | 13 pt regular | Tertiary information |
-| `.caption` | 12 pt regular | Labels |
-| `.caption2` | 11 pt regular | Small labels |
-
-A custom typeface keeps Dynamic Type when it is tied to a text style:
-
-```swift
-extension Font {
-    static func brandBody(_ family: String) -> Font {
-        .custom(family, size: 17, relativeTo: .body)
-    }
-}
-```
-
-## 3. HIG: Color
-
-Semantic colors switch between light and dark appearance on their own.
-
-| Role | Colors |
-|---|---|
-| Labels | `Color.primary`, `Color.secondary`, `Color(uiColor: .tertiaryLabel)` |
-| Backgrounds | `Color(uiColor: .systemBackground)`, `.secondarySystemBackground`, `.systemGroupedBackground` |
-| Fill and divider | `.systemFill` and `.separator`, both wrapped in `Color(uiColor:)` |
-
-- Set the app tint once on the root view, for example `.tint(.indigo)`.
-- Interactive elements use the tint through `.tint(...)` or
-  `.foregroundStyle(.tint)`.
-- Destructive actions use red (`Color.red`, or a `.destructive` button role).
-
-## 4. HIG: Navigation Chrome
-
-Multi-column hierarchies on iPad and Mac use `NavigationSplitView`:
-
-```swift
-NavigationSplitView {
-    List(folders, selection: $selectedFolder) { folder in
-        NavigationLink(folder.name, value: folder)
-    }
-    .navigationTitle("Folders")
-} detail: {
-    if let selectedFolder {
-        FolderDetail(folder: selectedFolder)
-    } else {
-        ContentUnavailableView("Pick a folder", systemImage: "sidebar.leading")
-    }
-}
-```
-
-Tab-based apps give each tab its own `NavigationStack` inside a `TabView`. The
-full tab patterns are in `swiftui-navigation`.
-
-Toolbars (`.topBarLeading` and `.topBarTrailing` come with the iOS 17 SDK and
-are back-deployed to iOS 14):
-
-```swift
-.toolbar {
-    ToolbarItem(placement: .topBarLeading) {
-        EditButton()
-    }
-    ToolbarItemGroup(placement: .topBarTrailing) {
-        Button("Mark all read", systemImage: "envelope.open", action: markAllRead)
-        Button("New", systemImage: "plus", action: createItem)
-    }
-    ToolbarItemGroup(placement: .bottomBar) {
-        Button("Archive", systemImage: "archivebox", action: archiveSelection)
-        Spacer()
-        Text("\(messages.count) messages")
-            .font(.footnote)
-            .foregroundStyle(.secondary)
-        Spacer()
-        Button("Compose", systemImage: "square.and.pencil", action: compose)
-    }
-}
-```
-
-Search with scopes (`.searchScopes` needs iOS 16.4):
-
-```swift
-enum LibraryScope: String, CaseIterable {
-    case titles, authors, tags
-    var label: String { rawValue.localizedCapitalized }
-}
-
-.searchable(text: $query, placement: .navigationBarDrawer(displayMode: .always))
-.searchScopes($scope) {
-    ForEach(LibraryScope.allCases, id: \.self) { scope in
-        Text(scope.label).tag(scope)
-    }
-}
-```
-
-## 5. HIG: Feedback
-
-For haptics that follow state, use `sensoryFeedback(_:trigger:)` (iOS 17+):
-
-```swift
-Button("Bookmark") { isBookmarked.toggle() }
-    .sensoryFeedback(.success, trigger: isBookmarked)
-
-Picker("Order", selection: $ordering) {
-    ForEach(Ordering.allCases) { Text($0.title).tag($0) }
-}
-.sensoryFeedback(.selection, trigger: ordering)
-```
-
-Reach for UIKit feedback generators only when the trigger is imperative and
-comes from UIKit or other code outside SwiftUI views.
-
-## 6. HIG: Accessibility
-
-Combine a row into one VoiceOver element and describe it:
-
-```swift
-VStack(alignment: .leading) {
-    Text(course.title).font(.headline)
-    Text("\(course.score, specifier: "%.1f") out of 5")
-}
-.accessibilityElement(children: .combine)
-.accessibilityLabel(course.title)
-.accessibilityValue("Rated \(course.score, specifier: "%.1f") out of 5")
-.accessibilityHint("Opens the course overview")
-.accessibilityAddTraits(.isButton)
-```
-
-Switch layout for the accessibility text sizes:
-
-```swift
-@Environment(\.dynamicTypeSize) private var typeSize
-
-var body: some View {
-    if typeSize.isAccessibilitySize {
-        VStack(alignment: .leading) { avatar; details }
-    } else {
-        HStack { avatar; details; Spacer() }
-    }
-}
-```
-
-## 7. HIG: Error and Empty States
-
-`ContentUnavailableView` covers both. The builder form adds actions:
-
-```swift
-ContentUnavailableView {
-    Label("Sync failed", systemImage: "icloud.slash")
-} description: {
-    Text(error.localizedDescription)
-} actions: {
-    Button("Retry") { Task { await resync() } }
-        .buttonStyle(.borderedProminent)
-}
-
-ContentUnavailableView {
-    Label("No receipts", systemImage: "doc.text.viewfinder")
-} description: {
-    Text("Scan a paper receipt to add it here.")
-} actions: {
-    Button("Scan") { isScannerPresented = true }
-        .buttonStyle(.borderedProminent)
-}
-```
-
-## 8. Theming and Dynamic Type
-
-Goal: theming that grows with the app while view code stays semantic.
-
-- One `Theme` object is the only source of colors, fonts and spacing.
-- Install it at the app root; views read it with `@Environment(Theme.self)`.
-- Name values by role (`primaryBackground`, `secondaryBackground`, `label`,
-  `tint`) rather than by hue.
-- Put user-facing theme choices on a dedicated settings screen.
-- Scaling with the user's text size comes from three places: built-in text
-  styles, a custom font tied to a style via `Font.custom(_:size:relativeTo:)`,
-  and `@ScaledMetric` for numeric layout values.
-
-```swift
-@MainActor @Observable
-final class Theme {
-    var accent: Color = .teal
-    var primaryBackground: Color = .white
-    var secondaryBackground: Color = .secondary.opacity(0.12)
-    var label: Color = .primary
-    var textScale: Double = 1.0
-}
-
-@main
-struct JournalApp: App {
-    @State private var theme = Theme()
-
-    var body: some Scene {
-        WindowGroup {
-            EntriesView().environment(theme)
-        }
-    }
-}
-
-struct EntryCard: View {
-    @Environment(Theme.self) private var currentTheme
-    let entry: Entry
-
-    var body: some View {
-        Text(entry.title)
-            .foregroundStyle(currentTheme.label)
-            .background(currentTheme.primaryBackground)
-    }
-}
-```
-
-Guidelines:
-
-- Keep the set of theme values small and semantic; do not re-create system
-  colors.
-- Persist theme choices the user makes, if the app offers them.
-- Check contrast between every text color and its background.
-
-Pitfalls:
-
-- Raw `Color` literals spread through views.
-- A theme stored in one view's local state.
-- Treating `@Environment(\.colorScheme)` as the whole theming story. Light or
-  dark mode is one input to the theme, not a substitute for it.
-
-## 9. Haptics
-
-Use haptics for moments that matter (tab switch, refresh, success, failure) and
-respect the user's settings.
-
-- In SwiftUI views, prefer `sensoryFeedback(_:trigger:)`.
-- Centralise imperative feedback in a manager only for UIKit interop or code
-  that is not a view.
-- Check both the user preference and hardware support.
-- Use different feedback types for different moments: selection, notification,
-  refresh.
-- Core Haptics is the step up when a pattern needs shaping that the built-in
-  feedback types do not offer.
-
-SwiftUI first:
-
-```swift
-@State private var uploadCount = 0
-
-Button("Upload") {
-    uploadCount += 1
-    startUpload()
-}
-.sensoryFeedback(.success, trigger: uploadCount)
-```
-
-UIKit interop:
-
-```swift
-import UIKit
-
-@MainActor
-final class FeedbackPlayer {
-    static let shared = FeedbackPlayer()
-
-    enum Kind {
-        case tap
-        case tabChange
-        case refresh(strength: CGFloat)
-        case result(UINotificationFeedbackGenerator.FeedbackType)
-    }
-
-    private let selection = UISelectionFeedbackGenerator()
-    private let impact = UIImpactFeedbackGenerator(style: .heavy)
-    private let notification = UINotificationFeedbackGenerator()
-
-    private init() { selection.prepare() }
-
-    func play(_ kind: Kind, allowed: Bool) {
-        guard allowed else { return }
-        switch kind {
-        case .tap: impact.impactOccurred()
-        case .tabChange: selection.selectionChanged()
-        case .refresh(let strength): impact.impactOccurred(intensity: strength)
-        case .result(let type): notification.notificationOccurred(type)
-        }
-    }
-}
-```
-
-```swift
-@AppStorage("hapticsOn") private var hapticsOn = true
-
-Button("Pay") {
-    FeedbackPlayer.shared.play(.result(.success), allowed: hapticsOn)
-}
-
-TabView(selection: $tab) { tabs }
-    .onChange(of: tab) {
-        FeedbackPlayer.shared.play(.tabChange, allowed: hapticsOn)
-    }
-```
-
-Guidelines:
-
-- Keep feedback subtle and skip it for minor interactions.
-- Offer a setting that turns haptics off.
-- Trigger feedback where the user acts, not from the data layer.
-
-Pitfalls:
-
-- Several haptics fired back to back.
-- Assuming the device has a haptic engine.
-
-## 10. Core Haptics
-
-Core Haptics controls intensity, sharpness, timing and audio sync precisely,
-for patterns the simple generators cannot produce. Apple docs:
-[CHHapticEngine](https://developer.apple.com/documentation/corehaptics/chhapticengine),
-and the [Core Haptics](https://developer.apple.com/documentation/corehaptics)
-topic page, whose "Essentials" group holds the article on preparing an app to
-play haptics.
-
-### Engine lifecycle
-
-Check the hardware before creating an engine.
-
-```swift
-import CoreHaptics
-import OSLog
-
-extension Logger {
-    static let haptics = Logger(subsystem: "app.haptics", category: "engine")
-}
-
-@MainActor
-final class PatternPlayer {
-    private var engine: CHHapticEngine?
-
-    var canPlayHaptics: Bool {
-        CHHapticEngine.capabilitiesForHardware().supportsHaptics
-    }
-
-    var canPlayHapticAudio: Bool {
-        CHHapticEngine.capabilitiesForHardware().supportsAudio
-    }
-
-    func startEngine() throws {
-        guard canPlayHaptics else { return }
-        let engine = try CHHapticEngine()
-        engine.stoppedHandler = { @Sendable reason in
-            Logger.haptics.info("Engine stopped, reason \(reason.rawValue)")
-        }
-        engine.resetHandler = { @Sendable [weak self] in
-            Task { @MainActor in try? self?.engine?.start() }
-        }
-        try engine.start()
-        self.engine = engine
-    }
-
-    func stopEngine() {
-        engine?.stop()
-    }
-}
-```
-
-- `stoppedHandler` runs when something outside the app stops the engine, such
-  as an audio session interruption or the app moving to the background.
-- Both handlers are called on a queue owned by the engine, so they are
-  `@Sendable`; any state change is scheduled onto the main actor first.
-- `resetHandler` runs after the system resets the engine, for instance once an
-  audio interruption is over. Start the engine again there.
-- Call `start()` before playing any pattern.
-- Once the screen no longer plays patterns, `stop()` the engine to save power.
-
-### A single tap
-
-```swift
-func playTap() throws {
-    let crisp = CHHapticEventParameter(parameterID: .hapticSharpness, value: 0.75)
-    let strong = CHHapticEventParameter(parameterID: .hapticIntensity, value: 0.95)
-    let tap = CHHapticEvent(eventType: .hapticTransient,
-                            parameters: [crisp, strong],
-                            relativeTime: 0)
-    let pattern = try CHHapticPattern(events: [tap], parameters: [])
-    try engine?.makePlayer(with: pattern).start(atTime: CHHapticTimeImmediate)
-}
-```
-
-### Event types and parameters
-
-| Event type | Effect |
-|---|---|
-| `.hapticTransient` | Short impulse, like a tap |
-| `.hapticContinuous` | Sustained vibration for a `duration` |
-| `.audioContinuous` | Sustained audio tone |
-| `.audioCustom` | Plays an audio resource you register |
-
-Common parameters: `.hapticIntensity` (0 to 1), `.hapticSharpness` (0 to 1),
-`.attackTime`, `.decayTime`, `.releaseTime`.
-
-```swift
-func playHum() throws {
-    let hum = CHHapticEvent(
-        eventType: .hapticContinuous,
-        parameters: [
-            CHHapticEventParameter(parameterID: .hapticIntensity, value: 0.55),
-            CHHapticEventParameter(parameterID: .hapticSharpness, value: 0.35)
-        ],
-        relativeTime: 0,
-        duration: 0.5
-    )
-    let humPattern = try CHHapticPattern(events: [hum], parameters: [])
-    try engine?.makePlayer(with: humPattern).start(atTime: CHHapticTimeImmediate)
-}
-```
-
-Looping, seeking and pausing need a `CHHapticAdvancedPatternPlayer` from
-`engine.makeAdvancedPlayer(with:)`.
-
-### Parameter curves
-
-A `CHHapticParameterCurve` changes a parameter smoothly while the pattern
-plays:
-
-```swift
-func playSwell() throws {
-    let base = CHHapticEvent(
-        eventType: .hapticContinuous,
-        parameters: [
-            CHHapticEventParameter(parameterID: .hapticIntensity, value: 0.25),
-            CHHapticEventParameter(parameterID: .hapticSharpness, value: 0.15)
-        ],
-        relativeTime: 0,
-        duration: 1.0
-    )
-    let swell = CHHapticParameterCurve(
-        parameterID: .hapticIntensityControl,
-        controlPoints: [
-            CHHapticParameterCurve.ControlPoint(relativeTime: 0, value: 0.25),
-            CHHapticParameterCurve.ControlPoint(relativeTime: 0.4, value: 0.6),
-            CHHapticParameterCurve.ControlPoint(relativeTime: 0.9, value: 1)
-        ],
-        relativeTime: 0
-    )
-    let pattern = try CHHapticPattern(events: [base], parameterCurves: [swell])
-    try engine?.makePlayer(with: pattern).start(atTime: CHHapticTimeImmediate)
-}
-```
-
-### AHAP files
-
-Patterns can also live outside code, in an AHAP file: a JSON document you
-tune without recompiling.
-
-```swift
-func playFromFile() throws {
-    guard let patternURL = Bundle.main.url(forResource: "checkout", withExtension: "ahap") else {
-        return
-    }
-    try engine?.playPattern(from: patternURL)
-}
-```
-
-Everything the code API expresses (events, parameters, curves) can be written
-in AHAP too, and Xcode can play the file back for you while you iterate. File
-format reference: the AHAP article listed on the
-[Core Haptics](https://developer.apple.com/documentation/corehaptics) topic page.
-
-## 11. Matched Transitions
-
-Goal: carry the eye from a source view (thumbnail, avatar) to its destination
-(sheet, detail, full-screen viewer).
-
-- Share a `Namespace` between source and destination, and give the source a
-  stable id.
-- Across screens, use `matchedTransitionSource(id:in:)` with
-  `navigationTransition(.zoom(sourceID:in:))`. Both need iOS 18.
-- Inside one hierarchy, use `matchedGeometryEffect(id:in:)`.
-- Ids must stay the same across updates; never generate random UUIDs for them.
-
-```swift
-struct GalleryGrid: View {
-    @Namespace private var zoom
-    @State private var opened: Photo?
-    let photos: [Photo]
-
-    var body: some View {
-        LazyVGrid(columns: [GridItem(.adaptive(minimum: 96))]) {
-            ForEach(photos) { photo in
-                Button { opened = photo } label: {
-                    PhotoThumbnail(photo: photo)
-                }
-                .matchedTransitionSource(id: photo.id, in: zoom)
-            }
-        }
-        .sheet(item: $opened) { photo in
-            PhotoViewer(photo: photo)
-                .navigationTransition(.zoom(sourceID: photo.id, in: zoom))
-        }
-    }
-}
-```
-
-In-place change within one view:
-
-```swift
-struct LockToggle: View {
-    @Namespace private var space
-    @State private var isLocked = false
-
-    var body: some View {
-        Button {
-            withAnimation(.spring) { isLocked.toggle() }
-        } label: {
-            Image(systemName: isLocked ? "lock" : "lock.open")
-                .matchedGeometryEffect(id: "lockGlyph", in: space)
-        }
-    }
-}
-```
-
-Guidelines:
-
-- Prefer `matchedTransitionSource` for transitions between screens.
-- Keep source and destination sizes close so the scale change is not jarring.
-- Drive state-based transitions with `withAnimation`.
-
-Pitfalls:
-
-- Ids that change between updates break the transition.
-- Shapes that do not match (a square into a circle) look wrong unless the
-  design asks for it.
-
-## 12. Loading and Placeholders
-
-Use this for loading states (skeletons, redaction, empty state) that stay
-consistent and never block interaction.
-
-- For lists and detail content, prefer redacted placeholders; the layout stays
-  in place while data arrives.
-- Once loading ends with nothing to show, or with an error, show
-  `ContentUnavailableView`.
-- Keep `ProgressView` for short, global operations, and use it sparingly on
-  content-heavy screens.
-
-Steps:
-
-1. Render the real layout with placeholder data and apply
-   `.redacted(reason: .placeholder)`.
-2. A list gets a small, fixed set of skeleton rows, never a spinner that runs
-   with no end in sight.
-3. When loading finishes with no data, switch to `ContentUnavailableView`.
-
-```swift
-List {
-    if isFetching {
-        ForEach(0..<4, id: \.self) { _ in
-            InvoiceRow(invoice: .sample)
-                .redacted(reason: .placeholder)
-        }
-    } else if invoices.isEmpty {
-        ContentUnavailableView("No invoices", systemImage: "tray")
-    } else {
-        ForEach(invoices) { InvoiceRow(invoice: $0) }
-    }
-}
-```
-
-Pitfalls and limits:
-
-- Layout that shifts or animates while redacted. Keep frames stable.
-- Spinners nested inside spinners. One indicator per section.
-- More than three to six placeholder rows, which costs frames on older
-  devices.
-
-## 13. Form Focus
-
-This section covers keyboard focus in forms. Directional focus, focus sections
-and focus on tvOS, macOS and iPadOS keyboards are covered in `hig-inputs`;
-VoiceOver and other assistive focus is covered in `ios-accessibility`.
-
-`@FocusState` sets keyboard focus, moves it from field to field, and
-coordinates it across a complex form.
-
-- Describe the focusable fields with an enum.
-- Set the first focus in `onAppear`.
-- Move to the following field in `.onSubmit`.
-- For a variable number of fields, use an enum case with an associated value,
-  such as `.answer(Int)`.
-
-One field:
-
-```swift
-struct HostEntryForm: View {
-    @State private var host = ""
-    @FocusState private var hostFocused: Bool
-
-    var body: some View {
-        Form {
-            TextField("Host", text: $host)
-                .focused($hostFocused)
-        }
-        .onAppear { hostFocused = true }
-    }
-}
-```
-
-Chained fields:
-
-```swift
-struct ContactForm: View {
-    enum Field { case name, phone, note }
-
-    @State private var name = ""
-    @State private var phone = ""
-    @State private var note = ""
-    @FocusState private var focus: Field?
-
-    var body: some View {
-        Form {
-            TextField("Name", text: $name)
-                .focused($focus, equals: .name)
-                .onSubmit { focus = .phone }
-            TextField("Phone", text: $phone)
-                .focused($focus, equals: .phone)
-                .onSubmit { focus = .note }
-            TextField("Note", text: $note)
-                .focused($focus, equals: .note)
-        }
-        .onAppear { focus = .name }
-    }
-}
-```
-
-A growing list of fields:
-
-```swift
-struct SurveyAnswers: View {
-    enum Field: Hashable { case answer(Int) }
-
-    @State private var answers = [""]
-    @FocusState private var focus: Field?
-
-    var body: some View {
-        Form {
-            ForEach(answers.indices, id: \.self) { index in
-                TextField("Answer \(index + 1)", text: $answers[index])
-                    .focused($focus, equals: .answer(index))
-                    .onSubmit { addAnswer(after: index) }
-            }
-        }
-    }
-
-    private func addAnswer(after index: Int) {
-        answers.append("")
-        let next = answers.count - 1
-        Task { @MainActor in
-            try? await Task.sleep(for: Duration.milliseconds(15))
-            focus = .answer(next)
-        }
-    }
-}
-```
-
-The short sleep lets SwiftUI insert the new field before focus moves to it.
-
-Guidelines:
-
-- The view holding the text fields also holds their `@FocusState`.
-- React to focus moving: show a validation message or a hint for the field
-  that just gained or lost focus.
-- Inside a `ScrollView` or `Form`, pair focus with `.scrollDismissesKeyboard(_:)`.
-
-Pitfalls:
-
-- Focus state stored in shared objects; it is local to the view.
-- Focus changed aggressively in the middle of an animation. Delay it when
-  needed.