crossmate

PuzzleView.swift (29878B)

---

 import SwiftUI
 
 enum RevealScope {
     case square
     case word
     case puzzle
 
     var title: String {
         switch self {
         case .square: "Reveal Square?"
         case .word: "Reveal Word?"
         case .puzzle: "Reveal Puzzle?"
         }
     }
 
     var message: String {
         switch self {
         case .square: "This will reveal the current square."
         case .word: "This will reveal the current word."
         case .puzzle: "This will reveal the entire puzzle and mark it complete."
         }
     }
 }
 
 struct PuzzleView: View {
     @Bindable var session: PlayerSession
     var shareController: ShareController? = nil
     let roster: PlayerRoster
     var onComplete: ((_ notifyPeers: Bool) -> Void)? = nil
     var onResign: (() throws -> Void)? = nil
     var onDelete: (() throws -> Void)? = nil
     /// Sends a broadcast nudge to the other players. `nil` for solo/test
     /// sessions, which hides the menu button.
     var onNudge: (() async -> Void)? = nil
     /// When the next nudge becomes allowed (the send cooldown's end), or `nil`
     /// if one is allowed right now. A session without nudging wired up hides the
     /// button regardless (see `onNudge`).
     var nudgeReadyAt: () -> Date? = { nil }
     /// Loads the finished game's merged journal for the finish-banner replay
     /// scrubber. Defaults to `.unavailable` so previews/tests need not wire it.
     var loadReplay: () async -> JournalReplayResult = { .unavailable }
     /// Cells a peer filled or cleared since this player last viewed the puzzle,
     /// mapped to the writing author. Read once on the open arm beat. Defaults to
     /// empty so previews/tests need not wire it.
     var loadRecentChanges: () -> [GridPosition: String] = { [:] }
     /// Stamps this game's last-viewed timestamp (device-local). Called when the
     /// away-change borders are acknowledged. Defaults to a no-op.
     var markPuzzleViewed: () -> Void = {}
     @Environment(InputMonitor.self) private var inputMonitor
     @Environment(PlayerPreferences.self) private var preferences
     @Environment(AnnouncementCenter.self) private var announcements
     @Environment(\.dismiss) private var dismiss
     @Environment(\.accessibilityVoiceOverEnabled) private var isVoiceOverEnabled
     @State private var isRenaming = false
     @State private var renameDraft = ""
     @State private var showErrorsAlert = false
     @State private var isConfirmingResign = false
     @State private var isConfirmingDelete = false
     @State private var isConfirmingLeave = false
     @State private var revealConfirmation = RevealConfirmation()
     @State private var isConfirmingClear = false
     @State private var leaveError: String?
     @State private var destructiveActionError: String?
     @State private var isShowingShareSheet = false
     @State private var hasSolved = false
     @State private var replay = ReplayControls()
     @State private var padLayout: PadLayout?
     /// The most recent size reported while the app was frontmost. Snapshot
     /// passes the system runs while backgrounded report other orientations;
     /// those must not disturb the layout, so only active-time sizes are kept
     /// and re-applied when the scene returns to the foreground.
     @State private var lastActiveSize: CGSize = .zero
     /// The shared open "arm" beat: flips a moment after open so the banner and
     /// the "changed while you were away" borders reveal together.
     @State private var isArmed = false
     @State private var announcedIntroGameID: UUID?
     /// Drives the system keyboard for rebus entry. Bound to `isRebusActive`:
     /// focusing the rebus field raises the keyboard, and losing focus (e.g. the
     /// player swipes the keyboard away) commits the buffer.
     @FocusState private var isRebusFieldFocused: Bool
     @Environment(\.engagementStatus) private var engagementStatus
     @Environment(\.scenePhase) private var scenePhase
 
     private enum PadLayout: Equatable {
         case landscape
         case portrait
     }
 
     private var effectivePadLayout: PadLayout? {
         guard UIDevice.current.userInterfaceIdiom == .pad else { return nil }
         return padLayout ?? .portrait
     }
 
     private func swatchImage(for color: PlayerColor) -> Image {
         let tint = UIColor(color.tint)
         let base = UIImage(systemName: "circle.fill") ?? UIImage()
         return Image(uiImage: base.withTintColor(tint, renderingMode: .alwaysOriginal))
     }
 
     private struct TitleParts {
         let title: String
         let subtitle: String?
     }
 
     private var titleParts: TitleParts {
         let title = session.puzzle.title
         let formattedDate = session.puzzle.date?.formatted(date: .long, time: .omitted)
         let subtitle: String?
         if let publisher = session.puzzle.publisher, let formattedDate {
             subtitle = "\(publisher) · \(formattedDate)"
         } else if let publisher = session.puzzle.publisher {
             subtitle = publisher
         } else {
             subtitle = formattedDate
         }
         return TitleParts(title: title, subtitle: subtitle)
     }
 
     // Latched completion counts as solved for the read-only presentation
     // (hides the keyboard, shows the finish panel, disables the controls) even
     // when the locally merged grid drifted and no longer reads `.solved`.
     private var isSolved: Bool { hasSolved || session.mutator.isCompleted }
 
     /// Whether the mutator is read-only (access revoked, unsupported protocol,
     /// completed) or a sticky, input-blocking announcement is showing. Greys
     /// out the custom keyboard, makes the hardware-key handler a no-op, and
     /// disables the toolbar's editing menus. Reads the mutator's own predicate
     /// so the block holds even if the matching banner was never posted.
     private var isInputBlocked: Bool {
         !session.mutator.isEditable
             || announcements.isInputBlocked(forGame: session.mutator.gameID)
     }
 
     private var shouldAutoRevealScoreboard: Bool {
         onNudge != nil && !isSolved && roster.entries.contains(where: { !$0.isLocal })
     }
 
     var body: some View {
         Group {
             switch effectivePadLayout {
             case .landscape:
                 landscapePadLayout
             case .portrait:
                 portraitPadLayout
             case .none:
                 phoneLayout
             }
         }
         .background(Color(.systemBackground))
         .background {
             // Yields first responder during rebus so the focused rebus field
             // owns input (including hardware keys) and the system keyboard rises.
             HardwareKeyboardInputView(
                 onPress: handleHardwareKeyboardEvent,
                 isActive: !session.isRebusActive
             )
             .frame(width: 0, height: 0)
             .allowsHitTesting(false)
         }
         .ignoresSafeArea(.keyboard)
         .onChange(of: session.isRebusActive) { _, active in
             isRebusFieldFocused = active
         }
         .onChange(of: isRebusFieldFocused) { _, focused in
             // The player dismissed the keyboard (swipe-down / hardware Esc):
             // treat it as a commit, matching the scrim tap.
             if !focused, session.isRebusActive {
                 session.commitRebus()
             }
         }
         .modifier(PuzzleToolbarModifier(
             session: session,
             roster: roster,
             shareController: shareController,
             isSolved: isSolved,
             isEditingBlocked: isSolved || isInputBlocked,
             canResign: onResign != nil,
             canDelete: onDelete != nil,
             onNudge: onNudge,
             nudgeReadyAt: nudgeReadyAt,
             isRenaming: $isRenaming,
             renameDraft: $renameDraft,
             isConfirmingResign: $isConfirmingResign,
             isConfirmingDelete: $isConfirmingDelete,
             isConfirmingLeave: $isConfirmingLeave,
             revealConfirmation: revealConfirmation,
             isConfirmingClear: $isConfirmingClear,
             isShowingShareSheet: $isShowingShareSheet
         ))
         .modifier(PuzzleLifecycleModifier(
             session: session,
             roster: roster,
             hasSolved: $hasSolved,
             onCompletionEvent: handleCompletionEvent,
             onSolvedOnAppear: {
                 onComplete?(false)
             }
         ))
         .modifier(PuzzlePresentationModifier(
             session: session,
             shareController: shareController,
             isRenaming: $isRenaming,
             renameDraft: $renameDraft,
             showErrorsAlert: $showErrorsAlert,
             isConfirmingResign: $isConfirmingResign,
             isConfirmingDelete: $isConfirmingDelete,
             isConfirmingLeave: $isConfirmingLeave,
             revealConfirmation: revealConfirmation,
             isConfirmingClear: $isConfirmingClear,
             leaveError: $leaveError,
             destructiveActionError: $destructiveActionError,
             isShowingShareSheet: $isShowingShareSheet,
             performResign: performResign,
             performDelete: performDelete,
             leaveSharedGame: leaveSharedGame
         ))
         // Surfaces the puzzle's actions to the app-level menu so the hold-⌘
         // shortcut overlay lists them; reveal routes through the same
         // confirmation alert the toolbar uses.
         .focusedSceneValue(\.puzzleActions, PuzzleActionTarget(
             session: session,
             revealConfirmation: revealConfirmation,
             isEnabled: !isSolved && !isInputBlocked
         ))
         .frame(
             width: scenePhase == .active || lastActiveSize == .zero ? nil : lastActiveSize.width,
             height: scenePhase == .active || lastActiveSize == .zero ? nil : lastActiveSize.height
         )
         .onGeometryChange(for: CGSize.self) { proxy in
             proxy.size
         } action: { newSize in
             if UIApplication.shared.applicationState == .active {
                 lastActiveSize = newSize
             }
             updateLayoutTrait(for: newSize)
         }
         .onChange(of: scenePhase) { _, newPhase in
             // On return to the foreground, re-derive the layout from the last
             // size seen while active — never from a backgrounded snapshot pass.
             if newPhase == .active {
                 updateLayoutTrait(for: lastActiveSize, force: true)
             }
         }
         .onAppear {
             session.onRecentChangesAcknowledged = markPuzzleViewed
         }
         .task(id: session.mutator.gameID) {
             announcePuzzleIntroIfNeeded()
             // The shared open beat. A short hold lets the puzzle settle and the
             // on-open sync land; then we arm the banner and capture — once —
             // which cells a peer changed while we were away, so both reveal
             // together. Moves that arrive after this are live activity (peer
             // cursor tints), not part of the away-summary.
             isArmed = false
             try? await Task.sleep(for: .milliseconds(750))
             isArmed = true
             if session.mutator.isShared {
                 session.recentChanges = loadRecentChanges()
             }
         }
     }
 
     private func announcePuzzleIntroIfNeeded() {
         guard isVoiceOverEnabled,
               announcedIntroGameID != session.mutator.gameID
         else { return }
         announcedIntroGameID = session.mutator.gameID
         AccessibilityNotification.Announcement(puzzleIntroAnnouncement).post()
     }
 
     private var puzzleIntroAnnouncement: String {
         var parts = [
             titleParts.title,
             "\(session.puzzle.width) by \(session.puzzle.height) puzzle"
         ]
         if let shared = sharedPlayersAnnouncement {
             parts.append(shared)
         }
         return parts.joined(separator: ". ")
     }
 
     private var sharedPlayersAnnouncement: String? {
         let names = roster.entries
             .filter { !$0.isLocal }
             .map(\.name)
             .filter { !$0.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty }
         guard !names.isEmpty else { return nil }
         return "Shared with \(Self.formattedList(names))"
     }
 
     private static func formattedList(_ items: [String]) -> String {
         switch items.count {
         case 0:
             return ""
         case 1:
             return items[0]
         case 2:
             return "\(items[0]) and \(items[1])"
         default:
             let prefix = items.dropLast().joined(separator: ", ")
             return "\(prefix), and \(items[items.count - 1])"
         }
     }
 
     private var phoneLayout: some View {
         VStack(spacing: 0) {
             puzzleArea()
             controlsArea(showClueBar: true)
         }
     }
 
     private var landscapePadLayout: some View {
         VStack(spacing: 0) {
             HStack(spacing: 0) {
                 VStack(spacing: 0) {
                     if !isSolved {
                         PuzzleScoreboard(
                             session: session,
                             roster: roster,
                             onNudge: onNudge,
                             nudgeReadyAt: nudgeReadyAt
                         )
 
                         Divider()
                     }
 
                     ClueList(session: session, presentation: .sidebar, replayFrame: replay.frame)
                 }
                     .frame(minWidth: 300, idealWidth: 360, maxWidth: 420)
                     .background(Color(.secondarySystemBackground))
 
                 Divider()
                     .ignoresSafeArea(edges: .top)
 
                 puzzleArea(bottomInset: 12)
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
 
             controlsArea(showClueBar: false)
         }
     }
 
     private var portraitPadLayout: some View {
         VStack(spacing: 0) {
             WeightedVStack(weights: [3, 1]) {
                 puzzleArea(bottomInset: 12)
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
 
                 VStack(spacing: 0) {
                     Divider()
 
                     HStack(alignment: .top, spacing: 0) {
                         if !isSolved {
                             PuzzleScoreboard(
                                 session: session,
                                 roster: roster,
                                 onNudge: onNudge,
                                 nudgeReadyAt: nudgeReadyAt
                             )
                                 .frame(minWidth: 240, idealWidth: 280, maxWidth: 320)
 
                             Divider()
                         }
 
                         ClueList(session: session, presentation: .sidebar, replayFrame: replay.frame)
                             .frame(maxWidth: .infinity, maxHeight: .infinity)
                     }
                     .background(Color(.secondarySystemBackground))
                 }
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
 
             controlsArea(showClueBar: false)
         }
     }
 
     private func updateLayoutTrait(for size: CGSize, force: Bool = false) {
         // Ignore geometry reported while the app is backgrounded: the system
         // lays the scene out at both orientations to render app-switcher
         // snapshots, and reacting to those would flip `padLayout` and rebuild
         // the puzzle subtree — losing the Clue List's scroll position. A forced
         // re-apply on return to active handles a genuine rotation made while
         // away.
         guard force || UIApplication.shared.applicationState == .active else {
             return
         }
         let newLayout: PadLayout?
         if UIDevice.current.userInterfaceIdiom == .pad {
             if Self.activeWindowSceneOrientation?.isLandscape == true {
                 newLayout = .landscape
             } else {
                 newLayout = size.width > size.height ? .landscape : .portrait
             }
         } else {
             newLayout = nil
         }
         // Dedupe so re-applying the same value on foreground doesn't needlessly
         // invalidate the layout.
         if newLayout != padLayout {
             padLayout = newLayout
         }
     }
 
     private static var activeWindowSceneOrientation: UIInterfaceOrientation? {
         UIApplication.shared.connectedScenes
             .compactMap { $0 as? UIWindowScene }
             .first { $0.activationState == .foregroundActive }?
             .interfaceOrientation
     }
 
     private func performResign() {
         do {
             try onResign?()
             dismiss()
         } catch {
             destructiveActionError = String(describing: error)
         }
     }
 
     private func performDelete() {
         do {
             try onDelete?()
             dismiss()
         } catch {
             destructiveActionError = String(describing: error)
         }
     }
 
     private func handleCompletionEvent(_ event: PlayerSession.CompletionEvent) {
         switch (event.origin, event.state) {
         case (_, .incomplete):
             break
         case (.observed, .filledWithErrors):
             // A collaborator's wrong entry must not interrupt the local solver.
             break
         case (.local, .filledWithErrors):
             showErrorsAlert = true
         case (.local, .solved):
             guard !hasSolved else { return }
             hasSolved = true
             if session.isPencilMode {
                 session.togglePencil()
             }
             Task { @MainActor in
                 onComplete?(true)
             }
         case (.observed, .solved):
             guard !hasSolved else { return }
             hasSolved = true
             onComplete?(false)
         }
     }
 
     private func puzzleArea(bottomInset: CGFloat = 0) -> some View {
         ZStack {
             VStack(spacing: 4) {
                 PuzzleHeader(
                     session: session,
                     roster: roster,
                     title: titleParts.title,
                     subtitle: titleParts.subtitle,
                     showsScoreboard: effectivePadLayout == nil,
                     shouldAutoRevealScoreboard: shouldAutoRevealScoreboard,
                     gameID: session.mutator.gameID,
                     isEngagementLive: engagementStatus?.isLive(gameID: session.mutator.gameID) == true,
                     onNudge: onNudge,
                     nudgeReadyAt: nudgeReadyAt,
                     isArmed: isArmed
                 )
                 GridView(
                     session: session,
                     roster: roster,
                     revealConfirmation: revealConfirmation,
                     showsSharedAnnotations: session.mutator.showsPlayerAttribution,
                     showsPeerCursors: !isSolved,
                     replayFrame: replay.frame
                 )
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
             .padding(.top, -8)
             // Keep the gap above the clue list inside the ZStack so the rebus
             // scrim (a sibling below) covers it too, rather than leaving a strip
             // of background showing between the grid and the clue list.
             .padding(.bottom, bottomInset)
 
             if session.isRebusActive {
                 Color.black.opacity(0.35)
                     // Ignore the bottom edge too: with a hardware keyboard there
                     // is no software keyboard covering the bottom safe area, so a
                     // top-only scrim leaves an un-dimmed strip at the screen edge.
                     .ignoresSafeArea(edges: [.top, .bottom])
                     .contentShape(Rectangle())
                     .onTapGesture {
                         session.commitRebus()
                     }
                 // No swallow gesture here: the card's opaque background already
                 // blocks taps from reaching the commit scrim beneath, and adding
                 // a tap gesture in front would steal the field's own taps,
                 // limiting the caret to the start/end of the buffer.
                 RebusModal(text: $session.rebusBuffer, isFocused: $isRebusFieldFocused) {
                     session.commitRebus()
                 }
                 .padding(.horizontal)
             }
         }
     }
 
     private func controlsArea(showClueBar: Bool) -> some View {
         VStack(spacing: 0) {
             if showClueBar {
                 ClueBarSlot(session: session, replayFrame: replay.frame)
             }
             controlsPanel
                 .frame(height: controlsPanelHeight)
         }
     }
 
     private var controlsPanel: some View {
         ZStack(alignment: .top) {
             if isSolved {
                 ControlsView(height: controlsPanelHeight) {
                     SuccessPanel(
                         session: session,
                         roster: roster,
                         replay: replay,
                         loadReplay: loadReplay
                     )
                 }
                 .transition(.move(edge: .bottom))
             } else if showsCustomKeyboard {
                 ControlsView(height: controlsPanelHeight) {
                     KeyboardView(session: session, showsNavigationKeys: effectivePadLayout != nil)
                         .opacity(isInputBlocked ? 0.4 : 1)
                         .allowsHitTesting(!isInputBlocked)
                         .animation(.easeInOut(duration: 0.3), value: isInputBlocked)
                 }
                 .transition(.move(edge: .bottom))
             }
         }
         .frame(height: controlsPanelHeight, alignment: .top)
         .background {
             Color(.systemGroupedBackground)
                 .ignoresSafeArea(edges: .bottom)
         }
         .overlay(alignment: .top) {
             if controlsPanelHeight > 0 {
                 Rectangle()
                     .fill(Color(.opaqueSeparator))
                     .frame(height: 0.5)
             }
         }
         .animation(.easeOut(duration: 0.25), value: isSolved)
         .ignoresSafeArea(edges: .bottom)
     }
 
     private var controlsPanelHeight: CGFloat {
         isSolved || showsCustomKeyboard ? KeyboardView.standardHeight : 0
     }
 
     private var showsCustomKeyboard: Bool {
         !inputMonitor.isConnected
     }
 
     private func handleHardwareKeyboardEvent(_ event: HardwareKeyboardEvent) -> Bool {
         guard !isSolved, !isInputBlocked else { return false }
 
         // Undo/redo (⌘Z, ⇧⌘Z) live in the app menu (see PuzzleCommands) so they
         // appear in the hold-⌘ shortcut overlay. A ⌘-modified Z falls through
         // the letter case below (which rejects modifiers) and bubbles up to that
         // menu command.
         switch event.keyCode {
         case .keyboardA, .keyboardB, .keyboardC, .keyboardD, .keyboardE,
              .keyboardF, .keyboardG, .keyboardH, .keyboardI, .keyboardJ,
              .keyboardK, .keyboardL, .keyboardM, .keyboardN, .keyboardO,
              .keyboardP, .keyboardQ, .keyboardR, .keyboardS, .keyboardT,
              .keyboardU, .keyboardV, .keyboardW, .keyboardX, .keyboardY,
              .keyboardZ,
              .keyboard0, .keyboard1, .keyboard2, .keyboard3, .keyboard4,
              .keyboard5, .keyboard6, .keyboard7, .keyboard8, .keyboard9:
             guard !event.modifierFlags.contains(.command),
                   !event.modifierFlags.contains(.control),
                   !event.modifierFlags.contains(.alternate),
                   let character = hardwareKeyboardCharacter(from: event) else {
                 return false
             }
             if session.isRebusActive {
                 session.appendRebusLetter(character)
             } else {
                 session.enter(character)
             }
             return true
 
         case .keyboardDeleteOrBackspace, .keyboardDeleteForward:
             if session.isRebusActive {
                 session.deleteRebusLetter()
             } else {
                 session.deleteBackward()
             }
             return true
 
         case .keyboardLeftArrow:
             guard !session.isRebusActive else { return false }
             if event.modifierFlags.contains(.command) {
                 session.goToPreviousWord()
                 return true
             }
             moveWithHardwareArrow(direction: .across) {
                 session.goToPreviousLetter()
             }
             return true
 
         case .keyboardRightArrow:
             guard !session.isRebusActive else { return false }
             if event.modifierFlags.contains(.command) {
                 session.goToNextWord()
                 return true
             }
             moveWithHardwareArrow(direction: .across) {
                 session.goToNextLetter()
             }
             return true
 
         case .keyboardUpArrow:
             guard !session.isRebusActive else { return false }
             moveWithHardwareArrow(direction: .down) {
                 session.goToPreviousLetter()
             }
             return true
 
         case .keyboardDownArrow:
             guard !session.isRebusActive else { return false }
             moveWithHardwareArrow(direction: .down) {
                 session.goToNextLetter()
             }
             return true
 
         case .keyboardTab:
             guard !session.isRebusActive else { return false }
             if event.modifierFlags.contains(.shift) {
                 session.goToPreviousClue()
             } else {
                 session.goToNextClue()
             }
             return true
 
         case .keyboardSpacebar:
             guard !session.isRebusActive else { return false }
             session.toggleDirection()
             return true
 
         case .keyboardReturnOrEnter:
             if session.isRebusActive {
                 session.commitRebus()
             } else {
                 session.toggleDirection()
             }
             return true
 
         case .keyboardEscape:
             if session.isRebusActive {
                 session.commitRebus()
                 return true
             }
             return false
 
         default:
             return false
         }
     }
 
     private func hardwareKeyboardCharacter(from event: HardwareKeyboardEvent) -> String? {
         let scalars = event.charactersIgnoringModifiers.unicodeScalars
         guard scalars.count == 1, let scalar = scalars.first else { return nil }
 
         switch scalar.value {
         case 65...90, 97...122:  // A–Z, a–z
             return String(Character(scalar)).uppercased()
         case 48...57:            // 0–9
             return String(Character(scalar))
         default:
             return nil
         }
     }
 
     private func moveWithHardwareArrow(direction: Puzzle.Direction, move: () -> Void) {
         if session.direction != direction {
             let previousDirection = session.direction
             session.setDirection(direction)
             if session.direction != previousDirection {
                 return
             }
         }
 
         move()
     }
 
     private func leaveSharedGame() async {
         guard let shareController else { return }
         do {
             try await shareController.leaveShare(gameID: session.mutator.gameID)
             dismiss()
         } catch {
             leaveError = String(describing: error)
         }
     }
 }
 
 private struct RebusModal: View {
     @Binding var text: String
     var isFocused: FocusState<Bool>.Binding
     let onCommit: () -> Void
 
     var body: some View {
         styledField
             .accessibilityLabel("Rebus entry")
             .accessibilityValue(accessibilityValue)
             .accessibilityHint("Enter the full text for this square")
             .accessibilityAction(.default, onCommit)
     }
 
     private var styledField: some View {
         // An editable field styled to read as the centred display card: the
         // system keyboard drives entry (so symbols, accents, and emoji are all
         // reachable) while the look and placement match the prior read-only modal.
         TextField("", text: $text)
             .focused(isFocused)
             .keyboardType(.asciiCapable)
             .textInputAutocapitalization(.characters)
             // .textInputAutocapitalization only sets the software keyboard's
             // shift state; hardware-keyboard input arrives as typed. Uppercase
             // the buffer directly so rebus fills are capitalised either way,
             // matching the custom-keyboard path in appendRebusLetter.
             .onChange(of: text) { _, newValue in
                 let upper = newValue.uppercased()
                 if upper != newValue { text = upper }
             }
             .autocorrectionDisabled()
             .submitLabel(.done)
             .onSubmit(onCommit)
             .multilineTextAlignment(.center)
             .font(.system(size: 32, weight: .semibold, design: .rounded))
             .foregroundStyle(.primary)
             .frame(maxWidth: .infinity, minHeight: 56)
             .padding(.horizontal, 16)
             .background(Color(.systemBackground))
             .clipShape(RoundedRectangle(cornerRadius: 10, style: .continuous))
             .padding(20)
             .frame(maxWidth: .infinity)
             .background(Color(.secondarySystemBackground))
             .clipShape(RoundedRectangle(cornerRadius: 14, style: .continuous))
     }
 
     private var accessibilityValue: String {
         text.isEmpty ? "Empty" : text
     }
 }
 
 private struct ControlsView<Content: View>: View {
     let height: CGFloat
     @ViewBuilder var content: () -> Content
 
     var body: some View {
         VStack(spacing: 0) {
             content()
                 .frame(height: height)
             Color(.systemGroupedBackground)
         }
         .background(Color(.systemGroupedBackground))
         .ignoresSafeArea(edges: .bottom)
     }
 }