crossmate

PuzzleView.swift (60472B)

---

 import SwiftUI
 
 private 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
     /// 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
     @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 isConfirmingReveal = false
     @State private var pendingRevealScope: RevealScope = .square
     @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 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
     @Environment(\.engagementStatus) private var engagementStatus
 
     private enum PadLayout {
         case landscape
         case 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 a sticky, input-blocking announcement (currently only
     /// access revocation) is showing for this game. Greys out the custom
     /// keyboard and makes the hardware-key handler a no-op.
     private var isInputBlocked: Bool {
         announcements.isInputBlocked(forGame: session.mutator.gameID)
     }
 
     var body: some View {
         Group {
             switch padLayout {
             case .landscape:
                 landscapePadLayout
             case .portrait:
                 portraitPadLayout
             case .none:
                 phoneLayout
             }
         }
         .background(Color(.systemBackground))
         .background {
             HardwareKeyboardInputView(onPress: handleHardwareKeyboardEvent)
                 .frame(width: 0, height: 0)
                 .allowsHitTesting(false)
         }
         .ignoresSafeArea(.keyboard)
         .modifier(PuzzleToolbarModifier(
             session: session,
             roster: roster,
             shareController: shareController,
             isSolved: isSolved,
             canResign: onResign != nil,
             canDelete: onDelete != nil,
             isRenaming: $isRenaming,
             renameDraft: $renameDraft,
             isConfirmingResign: $isConfirmingResign,
             isConfirmingDelete: $isConfirmingDelete,
             isConfirmingLeave: $isConfirmingLeave,
             isConfirmingReveal: $isConfirmingReveal,
             pendingRevealScope: $pendingRevealScope,
             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,
             isConfirmingReveal: $isConfirmingReveal,
             pendingRevealScope: $pendingRevealScope,
             leaveError: $leaveError,
             destructiveActionError: $destructiveActionError,
             isShowingShareSheet: $isShowingShareSheet,
             performResign: performResign,
             performDelete: performDelete,
             leaveSharedGame: leaveSharedGame
         ))
         .onGeometryChange(for: CGSize.self) { proxy in
             proxy.size
         } action: { newSize in
             updateLayoutTrait(for: newSize)
         }
         .onAppear {
             session.onRecentChangesAcknowledged = markPuzzleViewed
         }
         .task(id: session.mutator.gameID) {
             // 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 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)
 
                         Divider()
                     }
 
                     ClueList(session: session, presentation: .sidebar, replayFrame: replay.frame)
                 }
                     .frame(minWidth: 300, idealWidth: 360, maxWidth: 420)
                     .background(Color(.secondarySystemBackground))
 
                 Divider()
                     .ignoresSafeArea(edges: .top)
 
                 puzzleArea
                     .padding(.bottom, 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
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
                     .padding(.bottom, 12)
 
                 VStack(spacing: 0) {
                     Divider()
 
                     HStack(alignment: .top, spacing: 0) {
                         if !isSolved {
                             PuzzleScoreboard(session: session, roster: roster)
                                 .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) {
         guard UIDevice.current.userInterfaceIdiom == .pad, size != .zero else {
             padLayout = nil
             return
         }
         padLayout = size.width > size.height ? .landscape : .portrait
     }
 
     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 var puzzleArea: some View {
         ZStack {
             VStack(spacing: 4) {
                 PuzzleHeader(
                     session: session,
                     roster: roster,
                     title: titleParts.title,
                     subtitle: titleParts.subtitle,
                     showsScoreboard: padLayout == nil,
                     gameID: session.mutator.gameID,
                     isEngagementLive: engagementStatus?.isLive(gameID: session.mutator.gameID) == true,
                     isArmed: isArmed
                 )
                 GridView(
                     session: session,
                     roster: roster,
                     showsSharedAnnotations: session.mutator.isShared,
                     showsPeerCursors: !isSolved,
                     replayFrame: replay.frame
                 )
             }
             .frame(maxWidth: .infinity, maxHeight: .infinity)
             .padding(.top, -8)
 
             if session.isRebusActive {
                 Color.black.opacity(0.35)
                     .ignoresSafeArea(edges: .top)
                     .contentShape(Rectangle())
                     .onTapGesture {
                         session.commitRebus()
                     }
                 RebusModal(text: session.rebusBuffer)
                     .padding(.horizontal)
                     .contentShape(Rectangle())
                     .onTapGesture { /* swallow */ }
             }
         }
     }
 
     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: padLayout != 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 }
 
         // Cmd+Z undoes, Shift-Cmd-Z redoes. Caught before the letter switch so
         // the modified press isn't read as typing a "Z".
         if event.keyCode == .keyboardZ, event.modifierFlags.contains(.command) {
             guard !session.isRebusActive else { return false }
             if event.modifierFlags.contains(.shift) {
                 session.redo()
             } else {
                 session.undo()
             }
             return true
         }
 
         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:
             guard !event.modifierFlags.contains(.command),
                   !event.modifierFlags.contains(.control),
                   !event.modifierFlags.contains(.alternate),
                   let letter = hardwareKeyboardLetter(from: event) else {
                 return false
             }
             if session.isRebusActive {
                 session.appendRebusLetter(letter)
             } else {
                 session.enter(letter)
             }
             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 hardwareKeyboardLetter(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:
             return String(Character(scalar)).uppercased()
         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 PuzzleScoreboard: View {
     @Bindable var session: PlayerSession
     let roster: PlayerRoster
     var layout: Layout = .vertical
     @Environment(PlayerPreferences.self) private var preferences
     @ScaledMetric(relativeTo: .subheadline) private var horizontalHeaderHeight: CGFloat = 56
 
     enum Layout {
         /// Side-panel style: stacked rows under a "Players" heading.
         case vertical
         /// Paged-header style: a horizontally scrollable strip of player
         /// chips, sized to scroll past two players when more arrive.
         case horizontal
     }
 
     private struct Score: Identifiable {
         let authorID: String?
         let name: String
         let color: PlayerColor?
         let filledCount: Int
 
         var id: String { authorID ?? "unattributed" }
     }
 
     private var fillableCellCount: Int {
         session.puzzle.cells.reduce(0) { count, row in
             count + row.filter { !$0.isBlock }.count
         }
     }
 
     private var filledCellCount: Int {
         var count = 0
         for r in 0..<session.puzzle.height {
             for c in 0..<session.puzzle.width {
                 guard !session.puzzle.cells[r][c].isBlock else { continue }
                 if !session.game.squares[r][c].entry.isEmpty {
                     count += 1
                 }
             }
         }
         return count
     }
 
     private var revealedSquareCount: Int {
         var count = 0
         for r in 0..<session.puzzle.height {
             for c in 0..<session.puzzle.width {
                 guard !session.puzzle.cells[r][c].isBlock else { continue }
                 if session.game.squares[r][c].mark.isRevealed {
                     count += 1
                 }
             }
         }
         return count
     }
 
     private var remainingCount: Int {
         max(0, fillableCellCount - filledCellCount)
     }
 
     private var remainingPhrase: String {
         switch remainingCount {
         case 0:
             return "no squares to go"
         case 1:
             return "1 square to go"
         default:
             return "\(remainingCount) squares to go"
         }
     }
 
     private var revealedPhrase: String {
         switch revealedSquareCount {
         case 0:
             return "No squares revealed"
         case 1:
             return "1 square revealed"
         default:
             return "\(revealedSquareCount) squares revealed"
         }
     }
 
     private var progressText: String {
         if revealedSquareCount > 0 {
             return "\(revealedPhrase), \(remainingPhrase)"
         }
         switch remainingCount {
         case 0:
             return "No squares to go"
         case 1:
             return "1 square to go"
         default:
             return "\(remainingCount) squares to go"
         }
     }
 
     private var scores: [Score] {
         var counts: [String?: Int] = [:]
         for r in 0..<session.puzzle.height {
             for c in 0..<session.puzzle.width {
                 guard !session.puzzle.cells[r][c].isBlock else { continue }
                 let square = session.game.squares[r][c]
                 guard !square.entry.isEmpty, !square.mark.isRevealed else { continue }
                 counts[normalizedAuthorID(square.letterAuthorID), default: 0] += 1
             }
         }
 
         let entries = roster.entries
         let usesLocalFallback = entries.isEmpty
         let entryByAuthorID = Dictionary(uniqueKeysWithValues: entries.map { ($0.authorID, $0) })
         let rosterAuthorIDs = Set(entries.map(\.authorID))
 
         let rosterScores: [Score]
         if usesLocalFallback {
             rosterScores = [
                 Score(
                     authorID: nil,
                     name: preferences.name,
                     color: preferences.color,
                     filledCount: counts[nil] ?? 0
                 )
             ]
         } else {
             rosterScores = entries.map { entry in
                 Score(
                     authorID: entry.authorID,
                     name: entry.name,
                     color: entry.color,
                     filledCount: counts[entry.authorID] ?? 0
                 )
             }
         }
 
         let extraScores = counts.compactMap { authorID, count -> Score? in
             if let authorID, rosterAuthorIDs.contains(authorID) {
                 return nil
             }
             if authorID == nil && usesLocalFallback {
                 return nil
             }
             if let authorID, let entry = entryByAuthorID[authorID] {
                 return Score(authorID: authorID, name: entry.name, color: entry.color, filledCount: count)
             }
             if authorID == nil {
                 // A `nil` author key only arises with remote players present
                 // (see `normalizedAuthorID`): an authorless square, e.g. a cell
                 // sealed to the solution at completion before its author's
                 // letter arrived. It belongs to no player, so drop it rather
                 // than tallying an "Unattributed" entry.
                 return nil
             }
             return Score(authorID: authorID, name: "Player", color: nil, filledCount: count)
         }
 
         return (rosterScores + extraScores)
             .sorted {
                 if $0.filledCount != $1.filledCount { return $0.filledCount > $1.filledCount }
                 return $0.name < $1.name
             }
     }
 
     private func normalizedAuthorID(_ authorID: String?) -> String? {
         guard let authorID else {
             return roster.entries.contains(where: { !$0.isLocal }) ? nil : roster.localAuthorID
         }
         return authorID
     }
 
     @ViewBuilder
     var body: some View {
         switch layout {
         case .vertical:
             verticalBody
         case .horizontal:
             horizontalBody
         }
     }
 
     private var verticalBody: some View {
         VStack(alignment: .leading, spacing: 12) {
             Text("Players")
                 .font(.headline)
 
             VStack(alignment: .leading, spacing: 6) {
                 ForEach(scores) { score in
                     scoreRow(score)
                 }
 
                 Text(progressText)
                     .font(.footnote)
                     .foregroundStyle(.secondary)
                     .padding(.top, 10)
                     .frame(maxWidth: .infinity, alignment: .center)
             }
         }
         .padding(.horizontal, 18)
         .padding(.vertical, 14)
         .frame(maxWidth: .infinity, alignment: .leading)
     }
 
     private var chipFlow: some View {
         FlowLayout(spacing: 18, lineSpacing: 8) {
             ForEach(scores) { score in
                 scoreChip(score)
             }
         }
         .padding(.horizontal, 18)
         .padding(.vertical, 4)
     }
 
     private var horizontalBody: some View {
         // A titled "Players" section mirroring the iPad side panel
         // (verticalBody). It sizes to its content and sits top-anchored
         // in a ScrollView, so it reads as a deliberate header section
         // rather than a stray chip, and scrolls when there are enough
         // players to overflow the band — no centring tricks required.
         ScrollView(.vertical, showsIndicators: false) {
             VStack(spacing: 6) {
                 Text("Players")
                     .font(.subheadline.weight(.semibold))
                 chipFlow
             }
             .frame(maxWidth: .infinity)
             .padding(.vertical, 8)
         }
         .frame(height: horizontalHeaderHeight)
     }
 
     private func scoreChip(_ score: Score) -> some View {
         HStack(spacing: 6) {
             Circle()
                 .fill(score.color?.tint ?? Color.secondary)
                 .frame(width: 8, height: 8)
             Text(score.name)
                 .font(.subheadline)
                 .lineLimit(1)
             Text("\(score.filledCount)")
                 .font(.subheadline.monospacedDigit().weight(.semibold))
         }
         .accessibilityElement(children: .combine)
     }
 
     private func scoreRow(_ score: Score) -> some View {
         HStack(spacing: 8) {
             Circle()
                 .fill(score.color?.tint ?? Color.secondary)
                 .frame(width: 8, height: 8)
             Text(score.name)
                 .font(.subheadline)
                 .lineLimit(1)
             Spacer(minLength: 8)
             Text("\(score.filledCount)")
                 .font(.subheadline.monospacedDigit().weight(.semibold))
         }
         .accessibilityElement(children: .combine)
     }
 }
 
 private struct PuzzleToolbarModifier: ViewModifier {
     let session: PlayerSession
     let roster: PlayerRoster
     let shareController: ShareController?
     let isSolved: Bool
     let canResign: Bool
     let canDelete: Bool
     @Binding var isRenaming: Bool
     @Binding var renameDraft: String
     @Binding var isConfirmingResign: Bool
     @Binding var isConfirmingDelete: Bool
     @Binding var isConfirmingLeave: Bool
     @Binding var isConfirmingReveal: Bool
     @Binding var pendingRevealScope: RevealScope
     @Binding var isShowingShareSheet: Bool
     @Environment(PlayerPreferences.self) private var preferences
     @AppStorage("debugMode") private var debugMode = false
 
     func body(content: Content) -> some View {
         content.toolbar {
             ToolbarItemGroup(placement: .topBarTrailing) {
                 pencilButton
                 entryMenu
                 hintsMenu
                 playersMenu
             }
         }
     }
 
     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 var pencilButton: some View {
         Button {
             session.togglePencil()
         } label: {
             Image(systemName: "pencil")
                 .foregroundStyle(pencilButtonForeground)
                 .padding(6)
                 .glassEffect(
                     !isSolved && session.isPencilMode
                         ? .regular.tint(preferences.color.tint)
                         : .identity,
                     in: Circle()
                 )
         }
         .accessibilityLabel("Pencil")
         .disabled(isSolved)
     }
 
     private var pencilButtonForeground: Color {
         if isSolved {
             return .secondary
         }
         return session.isPencilMode ? .white : .primary
     }
 
     private var entryMenu: some View {
         Menu {
             Section {
                 Button("Undo Move") { session.undo() }
                     .disabled(!session.canUndo)
                 Button("Redo Move") { session.redo() }
                     .disabled(!session.canRedo)
             }
 
             Section {
                 Button("Enter Rebus") { session.startRebus() }
                 Button("Toggle Direction") { session.toggleDirection() }
             }
 
             if debugMode {
                 Section {
                     NavigationLink {
                         DiagnosticsView()
                     } label: {
                         Text("Diagnostics Log")
                     }
                 }
             }
 
             Section {
                 Button("Clear Word") { session.clearCurrentWord() }
                 Button("Clear Puzzle", role: .destructive) { session.clearPuzzle() }
             }
         } label: {
             Label("Entry", systemImage: "squareshape.split.2x2")
         }
         .disabled(isSolved)
     }
 
     private var hintsMenu: some View {
         Menu {
             Section {
                 Button("Check Square") { session.checkSquare() }
                 Button("Check Word") { session.checkCurrentWord() }
                 Button("Check Puzzle") { session.checkPuzzle() }
             }
             Section {
                 Button("Reveal Square") { confirmReveal(.square) }
                 Button("Reveal Word") { confirmReveal(.word) }
                 Button("Reveal Puzzle") { confirmReveal(.puzzle) }
             }
         } label: {
             Label("Hints", systemImage: "lightbulb")
         }
         .disabled(isSolved)
     }
 
     private func confirmReveal(_ scope: RevealScope) {
         pendingRevealScope = scope
         isConfirmingReveal = true
     }
 
     private var playersMenu: some View {
         Menu {
             playerRosterSection
             playerPreferencesSection
             shareSection
             puzzleDestructiveSection
         } label: {
             Label("Players", systemImage: "person.2")
         }
         .disabled(isSolved)
     }
 
     @ViewBuilder
     private var playerRosterSection: some View {
         Section {
             if !roster.entries.isEmpty {
                 ForEach(roster.entries) { entry in
                     Button {} label: {
                         Label {
                             Text(entry.isLocal ? "\(entry.name) (you)" : entry.name)
                         } icon: {
                             swatchImage(for: entry.color)
                         }
                     }
                     .disabled(true)
                 }
             } else {
                 Button {} label: {
                     Label {
                         Text(preferences.name)
                     } icon: {
                         swatchImage(for: preferences.color)
                     }
                 }
                 .disabled(true)
             }
         }
     }
 
     private var playerPreferencesSection: some View {
         Section {
             Menu("Change Colour") {
                 ForEach(PlayerColor.palette) { color in
                     Button {
                         preferences.color = color
                         // Friend colours are derived with the local user's
                         // colour reserved, so refreshing re-derives and bumps
                         // any friend that now collides with the new choice.
                         Task { await roster.refresh() }
                     } label: {
                         Label {
                             Text(color.id == preferences.colorID ? "\(color.name)  ✓" : color.name)
                         } icon: {
                             swatchImage(for: color)
                         }
                     }
                 }
             }
 
             Button("Change Name") {
                 renameDraft = preferences.name
                 isRenaming = true
             }
         }
     }
 
     @ViewBuilder
     private var shareSection: some View {
         if shareController != nil {
             Section {
                 Button {
                     isShowingShareSheet = true
                 } label: {
                     Text("Share Game")
                 }
                 .disabled(!session.mutator.isOwned)
             }
         }
     }
 
     private var puzzleDestructiveSection: some View {
         Section {
             Button("Resign Game", role: .destructive) {
                 isConfirmingResign = true
             }
             .disabled(isSolved || !canResign)
 
             if session.mutator.isShared && !session.mutator.isOwned {
                 Button("Leave Game", role: .destructive) {
                     isConfirmingLeave = true
                 }
                 .disabled(shareController == nil)
             } else {
                 Button("Delete Game", role: .destructive) {
                     isConfirmingDelete = true
                 }
                 .disabled(!canDelete)
             }
         }
     }
 }
 
 private struct PuzzleLifecycleModifier: ViewModifier {
     let session: PlayerSession
     let roster: PlayerRoster
     @Binding var hasSolved: Bool
     let onCompletionEvent: (PlayerSession.CompletionEvent) -> Void
     let onSolvedOnAppear: () -> Void
 
     func body(content: Content) -> some View {
         content
             .task {
                 await roster.refresh()
             }
             .onAppear {
                 if session.game.completionState == .solved {
                     hasSolved = true
                     onSolvedOnAppear()
                 }
             }
             .onChange(of: session.completionEvent) { _, newValue in
                 guard let newValue else { return }
                 onCompletionEvent(newValue)
             }
     }
 }
 
 private struct PuzzlePresentationModifier: ViewModifier {
     let session: PlayerSession
     let shareController: ShareController?
     @Binding var isRenaming: Bool
     @Binding var renameDraft: String
     @Binding var showErrorsAlert: Bool
     @Binding var isConfirmingResign: Bool
     @Binding var isConfirmingDelete: Bool
     @Binding var isConfirmingLeave: Bool
     @Binding var isConfirmingReveal: Bool
     @Binding var pendingRevealScope: RevealScope
     @Binding var leaveError: String?
     @Binding var destructiveActionError: String?
     @Binding var isShowingShareSheet: Bool
     let performResign: () -> Void
     let performDelete: () -> Void
     let leaveSharedGame: () async -> Void
     @Environment(PlayerPreferences.self) private var preferences
 
     func body(content: Content) -> some View {
         content
             .alert("Not Quite Right", isPresented: $showErrorsAlert) {
                 Button("OK", role: .cancel) {}
             } message: {
                 Text("One or more squares are incorrect.")
             }
             .alert("Resign Puzzle?", isPresented: $isConfirmingResign) {
                 Button("Resign", role: .destructive) {
                     performResign()
                 }
                 Button("Cancel", role: .cancel) {}
             } message: {
                 Text("This will reveal the puzzle and mark it complete.")
             }
             .alert("Delete Puzzle?", isPresented: $isConfirmingDelete) {
                 Button("Delete", role: .destructive) {
                     performDelete()
                 }
                 Button("Cancel", role: .cancel) {}
             } message: {
                 deleteConfirmationMessage
             }
             .alert("Leave Puzzle?", isPresented: $isConfirmingLeave) {
                 Button("Leave", role: .destructive) {
                     Task { await leaveSharedGame() }
                 }
                 Button("Cancel", role: .cancel) {}
             } message: {
                 Text("You will lose access to \"\(session.puzzle.title)\".")
             }
             .alert(pendingRevealScope.title, isPresented: $isConfirmingReveal) {
                 Button("Reveal", role: .destructive) {
                     performReveal(pendingRevealScope)
                 }
                 Button("Cancel", role: .cancel) {}
             } message: {
                 Text(pendingRevealScope.message)
             }
             .alert(
                 "Couldn't Leave",
                 isPresented: .init(
                     get: { leaveError != nil },
                     set: { if !$0 { leaveError = nil } }
                 ),
                 presenting: leaveError
             ) { _ in
                 Button("OK", role: .cancel) {}
             } message: { message in
                 Text(message)
             }
             .alert(
                 "Couldn't Update Puzzle",
                 isPresented: .init(
                     get: { destructiveActionError != nil },
                     set: { if !$0 { destructiveActionError = nil } }
                 ),
                 presenting: destructiveActionError
             ) { _ in
                 Button("OK", role: .cancel) {}
             } message: { message in
                 Text(message)
             }
             .alert("Change Name", isPresented: $isRenaming) {
                 TextField("Name", text: $renameDraft)
                     .textInputAutocapitalization(.never)
                     .autocorrectionDisabled()
                 Button("Cancel", role: .cancel) {}
                 Button("Save") {
                     let trimmed = renameDraft.trimmingCharacters(in: .whitespacesAndNewlines)
                     if !trimmed.isEmpty {
                         preferences.name = trimmed
                     }
                 }
                 .keyboardShortcut(.defaultAction)
             } message: {
                 Text("Enter the name other players will see.")
             }
             .sheet(isPresented: $isShowingShareSheet) {
                 if let shareController {
                     GameShareSheet(
                         gameID: session.mutator.gameID,
                         title: session.puzzle.title,
                         shareController: shareController
                     )
                 }
             }
     }
 
     private func performReveal(_ scope: RevealScope) {
         switch scope {
         case .square: session.revealSquare()
         case .word: session.revealCurrentWord()
         case .puzzle: session.revealPuzzle()
         }
     }
 
     private var deleteConfirmationMessage: Text {
         if session.mutator.isOwned && session.mutator.isShared {
             Text("This will permanently delete \"\(session.puzzle.title)\" from iCloud for everyone.")
         } else {
             Text("This will permanently delete \"\(session.puzzle.title)\" and all progress.")
         }
     }
 }
 
 /// Swipeable header that sits above the grid. Page 1 is the title, the
 /// last page is the credits, and on iPhone a scoreboard page sits between
 /// them (iPad shows the scoreboard permanently in the side panel, so it is
 /// omitted here). A fixed height is required because `.page` style fills
 /// its container rather than sizing to content.
 private struct PuzzleHeader: View {
     @Bindable var session: PlayerSession
     let roster: PlayerRoster
     let title: String
     let subtitle: String?
     let showsScoreboard: Bool
     let gameID: UUID
     let isEngagementLive: Bool
     /// The shared open "arm" beat, owned by `PuzzleView` so the banner and the
     /// grid's "changed while you were away" borders reveal together. Until it
     /// flips (a moment after open), the title is the only thing on screen;
     /// then banner posts — including a session summary that arrived during the
     /// hold — animate in.
     let isArmed: Bool
     @Environment(AnnouncementCenter.self) private var announcements
     @Environment(\.dynamicTypeSize) private var dynamicTypeSize
     @State private var selection: Page = .title
 
     private enum Page: Hashable {
         case title
         case scoreboard
         case credits
     }
 
     /// Reconstructed as "© <year> <publisher>" from the puzzle's date and
     /// publisher, falling back to whatever pieces exist, and finally to the
     /// raw copyright string parsed from the source.
     private var copyrightLine: String? {
         let year = session.puzzle.date.map {
             Calendar.current.component(.year, from: $0)
         }
         switch (year, session.puzzle.publisher) {
         case let (year?, publisher?):
             return "© \(year) \(publisher)"
         case let (year?, nil):
             return "© \(year)"
         case let (nil, publisher?):
             return "© \(publisher)"
         case (nil, nil):
             return session.puzzle.copyright
         }
     }
 
     private var hasCredits: Bool {
         session.puzzle.author != nil || copyrightLine != nil
     }
 
     private var pages: [Page] {
         var result: [Page] = [.title]
         if showsScoreboard { result.append(.scoreboard) }
         if hasCredits { result.append(.credits) }
         return result
     }
 
     /// Above the default text size the clue bar below the grid grows to fit
     /// the (must-read) clue, squeezing the grid. The title/scoreboard/credits
     /// shown here are the least important text on screen, so the header yields
     /// its own height as type scales up — shedding a few points per step down
     /// to a legible-enough floor — and hands that space back to the grid. The
     /// text inside just truncates within the smaller box. At or below the
     /// default size the comfortable full height is preserved.
     private var headerHeight: CGFloat {
         let sizes = DynamicTypeSize.allCases
         guard let current = sizes.firstIndex(of: dynamicTypeSize),
               let baseline = sizes.firstIndex(of: .large)
         else { return 80 }
         let stepsAboveDefault = max(0, current - baseline)
         return max(48, 80 - CGFloat(stepsAboveDefault) * 6)
     }
 
     var body: some View {
         let visibleAnnouncement = isArmed
             ? announcements.current(forGame: gameID)
             : nil
         Group {
             // Title/scoreboard/credits is the baseline — it renders
             // immediately on open and stays put. After the open beat we
             // start reacting to announcements: the banner slides down
             // over the title and slides back out on dismissal. Both
             // branches occupy the same fixed-height frame so the grid
             // below doesn't jump.
             if let announcement = visibleAnnouncement {
                 AnnouncementBanner(
                     announcement: announcement,
                     fillsAvailableHeight: true
                 ) {
                     announcements.dismiss(id: announcement.id)
                 }
                 .padding(.horizontal, 12)
                 .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
                 .transition(.move(edge: .bottom).combined(with: .opacity))
             } else {
                 headerPages
                     .transition(.move(edge: .bottom).combined(with: .opacity))
             }
         }
         .frame(height: headerHeight)
         .padding(.bottom, 14)
         .animation(.easeInOut(duration: 0.3), value: visibleAnnouncement)
         .animation(.easeInOut(duration: 0.2), value: isEngagementLive)
     }
 
     private var headerPages: some View {
         VStack(spacing: 10) {
             TabView(selection: $selection) {
                 ForEach(pages, id: \.self) { page in
                     pageContent(page)
                         .tag(page)
                 }
             }
             .tabViewStyle(.page(indexDisplayMode: .never))
 
             if pages.count > 1 {
                 HStack(spacing: 6) {
                     ForEach(pages, id: \.self) { page in
                         Circle()
                             .fill(page == selection ? Color.secondary : Color.secondary.opacity(0.3))
                             .frame(width: 6, height: 6)
                     }
                 }
                 .animation(.easeInOut(duration: 0.2), value: selection)
             }
         }
     }
 
     @ViewBuilder
     private func pageContent(_ page: Page) -> some View {
         switch page {
         case .title:
             PuzzleTitle(title: title, subtitle: subtitle, isEngagementLive: isEngagementLive)
                 .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
         case .scoreboard:
             PuzzleScoreboard(session: session, roster: roster, layout: .horizontal)
                 .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
         case .credits:
             PuzzleCredits(author: session.puzzle.author, copyright: copyrightLine)
                 .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
         }
     }
 }
 
 private struct PuzzleTitle: View {
     let title: String
     let subtitle: String?
     let isEngagementLive: Bool
     @State private var showsEngagementIcon = false
 
     var body: some View {
         VStack(spacing: 2) {
             Text(title)
                 .font(.headline)
                 .lineLimit(2)
                 .overlay(alignment: .trailing) {
                     engagementIcon
                         .offset(x: 28)
                         .opacity(showsEngagementIcon ? 1 : 0)
                         .accessibilityLabel("Engagement live")
                         .accessibilityHidden(!showsEngagementIcon)
                 }
             if let subtitle {
                 Text(subtitle)
                     .font(.subheadline)
                     .foregroundStyle(.secondary)
                     .lineLimit(1)
             }
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: .infinity)
         .padding(.horizontal)
         .animation(.easeInOut(duration: 0.2), value: showsEngagementIcon)
         .onAppear {
             showsEngagementIcon = isEngagementLive
         }
         .onChange(of: isEngagementLive) { _, isLive in
             withAnimation(.easeInOut(duration: 0.2)) {
                 showsEngagementIcon = isLive
             }
         }
     }
 
     private var engagementIcon: some View {
         Image(systemName: "bolt.circle")
             .font(.headline)
             .foregroundStyle(.green)
             .symbolRenderingMode(.monochrome)
     }
 }
 
 private struct PuzzleCredits: View {
     let author: String?
     let copyright: String?
 
     var body: some View {
         VStack(spacing: 2) {
             if let author, !author.isEmpty {
                 Text("By \(author)")
                     .font(.subheadline)
                     .lineLimit(2)
             }
             if let copyright {
                 Text(copyright)
                     .font(.footnote)
                     .foregroundStyle(.secondary)
                     .lineLimit(2)
             }
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: .infinity)
         .padding(.horizontal)
     }
 }
 
 private struct ClueKey: Hashable {
     let direction: Puzzle.Direction
     let number: Int
 }
 
 private struct ReplayClueTarget {
     let position: GridPosition
     let direction: Puzzle.Direction?
 }
 
 private struct ClueBarSlot: View {
     @Bindable var session: PlayerSession
     let replayFrame: ReplayFrame?
 
     private var replayClueTarget: ReplayClueTarget? {
         guard let cursor = replayFrame?.cursor else { return nil }
         return ReplayClueTarget(position: cursor, direction: replayFrame?.cursorDirection)
     }
 
     var body: some View {
         ZStack(alignment: .bottom) {
             ClueBarReservation()
 
             ClueBar(session: session, replayClueTarget: replayClueTarget)
         }
     }
 }
 
 private struct ClueBarReservation: View {
     var body: some View {
         ClueBarContent(
             label: "99 Across",
             clueText: "Clue reservation",
             reservesClueSpace: true
         )
             .opacity(0)
             .accessibilityHidden(true)
             .allowsHitTesting(false)
     }
 }
 
 private struct ClueBarContent: View {
     let label: String
     let clueText: String
     var reservesClueSpace = false
     var currentKey: ClueKey?
     var slideEdge: Edge = .trailing
     var onPrevious: (() -> Void)?
     var onNext: (() -> Void)?
     var onClueTap: (() -> Void)?
     var onLabelTap: (() -> Void)?
 
     var body: some View {
         HStack(alignment: .clueCenter, spacing: 8) {
             ClueBarIcon(systemName: "chevron.left", action: onPrevious)
 
             VStack(alignment: .leading, spacing: 4) {
                 Text(label)
                     .font(.caption)
                     .textCase(.uppercase)
                     .foregroundStyle(.secondary)
                     .contentShape(Rectangle())
                     .highPriorityGesture(
                         TapGesture()
                             .onEnded {
                                 onLabelTap?()
                             }
                     )
                 ZStack(alignment: .leading) {
                     clueTextView
                 }
                 .alignmentGuide(.clueCenter) { d in d[VerticalAlignment.center] }
                 .frame(maxWidth: .infinity, alignment: .leading)
                 .clipped()
             }
             .contentShape(Rectangle())
             .onTapGesture {
                 onClueTap?()
             }
 
             ClueBarIcon(systemName: "chevron.right", action: onNext)
         }
         .padding(.horizontal, 8)
         .padding(.top, 12)
         .padding(.bottom, 6)
     }
 
     @ViewBuilder
     private var clueTextView: some View {
         baseClueText
             .id(currentKey)
             .transition(.asymmetric(
                 insertion: .move(edge: slideEdge),
                 removal: .move(edge: slideEdge == .trailing ? .leading : .trailing)
             ))
     }
 
     private var baseClueText: some View {
         Text(clueText)
             .font(.headline)
             .lineLimit(2, reservesSpace: reservesClueSpace)
             .multilineTextAlignment(.leading)
             .frame(maxWidth: .infinity, alignment: .leading)
     }
 }
 
 private struct ClueBarIcon: View {
     let systemName: String
     var action: (() -> Void)?
 
     var body: some View {
         if let action {
             Button(action: action) {
                 icon
             }
             .buttonStyle(.plain)
         } else {
             icon
         }
     }
 
     private var icon: some View {
         Image(systemName: systemName)
             .font(.title3.weight(.semibold))
             .frame(width: 44, height: 44)
             .contentShape(Rectangle())
     }
 }
 
 private struct ClueBar: View {
     @Bindable var session: PlayerSession
     let replayClueTarget: ReplayClueTarget?
     @Environment(PlayerPreferences.self) private var preferences
     @Environment(\.colorScheme) private var colorScheme
     @State private var slideEdge: Edge = .trailing
     @State private var isShowingClueList = false
 
     private var backgroundColor: Color {
         preferences.color.clueBarFill(dark: colorScheme == .dark)
     }
 
     var body: some View {
         let display = replayClueDisplay ?? liveClueDisplay
         let isShowingReplayClue = replayClueDisplay != nil
 
         ClueBarContent(
             label: label(for: display.clue, direction: display.direction),
             clueText: display.clue?.text ?? "—",
             currentKey: display.currentKey,
             slideEdge: slideEdge,
             onPrevious: isShowingReplayClue ? nil : {
                 slideEdge = .leading
                 session.goToPreviousClue()
             },
             onNext: isShowingReplayClue ? nil : {
                 slideEdge = .trailing
                 session.goToNextClue()
             },
             onClueTap: isShowingReplayClue ? nil : {
                 isShowingClueList = true
             },
             onLabelTap: isShowingReplayClue ? nil : {
                 session.toggleDirection()
             }
         )
         .background(backgroundColor)
         .animation(
             isShowingReplayClue ? nil : .smooth(duration: 0.22),
             value: display.currentKey
         )
         .sheet(isPresented: $isShowingClueList) {
             ClueList(session: session)
                 .presentationDetents([.medium, .large])
                 .presentationDragIndicator(.visible)
         }
     }
 
     private var liveClueDisplay: ClueDisplay {
         let clue = session.currentClue()
         return ClueDisplay(clue: clue, direction: session.direction)
     }
 
     private var replayClueDisplay: ClueDisplay? {
         guard let replayClueTarget else { return nil }
         let position = replayClueTarget.position
         guard let direction = replayClueTarget.direction else { return nil }
         return ClueDisplay(
             clue: session.puzzle.clue(atRow: position.row, col: position.col, direction: direction),
             direction: direction
         )
     }
 
     private struct ClueDisplay {
         let clue: Puzzle.Clue?
         let direction: Puzzle.Direction
 
         var currentKey: ClueKey? {
             clue.map { ClueKey(direction: direction, number: $0.number) }
         }
     }
 
     private func label(for clue: Puzzle.Clue?, direction: Puzzle.Direction) -> String {
         let direction = direction == .across ? "Across" : "Down"
         if let clue {
             return "\(clue.number) \(direction)"
         }
         return direction
     }
 }
 
 private struct RebusModal: View {
     let text: String
 
     var body: some View {
         Text(text.isEmpty ? " " : text)
             .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 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)
     }
 }
 
 private extension VerticalAlignment {
     enum ClueCenterID: AlignmentID {
         static func defaultValue(in d: ViewDimensions) -> CGFloat { d[VerticalAlignment.center] }
     }
     static let clueCenter = VerticalAlignment(ClueCenterID.self)
 }
 
 /// Lays subviews left-to-right, wrapping onto a new line when the next
 /// subview would overflow the proposed width. Reports the wrapped
 /// height for that width so a surrounding `ViewThatFits` can choose
 /// between a centred (fits) and a scrolling (overflows) presentation.
 private struct FlowLayout: Layout {
     var spacing: CGFloat = 18
     var lineSpacing: CGFloat = 8
 
     private struct Row {
         var indices: [Int] = []
         var width: CGFloat = 0
         var height: CGFloat = 0
     }
 
     private func rows(_ subviews: Subviews, maxWidth: CGFloat) -> [Row] {
         var rows: [Row] = []
         var current = Row()
         for index in subviews.indices {
             let size = subviews[index].sizeThatFits(.unspecified)
             let needed = current.indices.isEmpty
                 ? size.width
                 : current.width + spacing + size.width
             if !current.indices.isEmpty, needed > maxWidth {
                 rows.append(current)
                 current = Row(indices: [index], width: size.width, height: size.height)
             } else {
                 if !current.indices.isEmpty { current.width += spacing }
                 current.indices.append(index)
                 current.width += size.width
                 current.height = max(current.height, size.height)
             }
         }
         if !current.indices.isEmpty { rows.append(current) }
         return rows
     }
 
     func sizeThatFits(
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) -> CGSize {
         let rows = rows(subviews, maxWidth: proposal.width ?? .infinity)
         let height = rows.reduce(0) { $0 + $1.height }
             + lineSpacing * CGFloat(max(0, rows.count - 1))
         let widest = rows.map(\.width).max() ?? 0
         return CGSize(width: proposal.width ?? widest, height: height)
     }
 
     func placeSubviews(
         in bounds: CGRect,
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) {
         let rows = rows(subviews, maxWidth: bounds.width)
         var y = bounds.minY
         for row in rows {
             // Centre each row within the available width so a short
             // strip (e.g. a single player) sits in the middle.
             var x = bounds.minX + max(0, (bounds.width - row.width) / 2)
             for index in row.indices {
                 let size = subviews[index].sizeThatFits(.unspecified)
                 subviews[index].place(
                     at: CGPoint(x: x, y: y),
                     anchor: .topLeading,
                     proposal: ProposedViewSize(size)
                 )
                 x += size.width + spacing
             }
             y += row.height + lineSpacing
         }
     }
 }
 
 private struct WeightedVStack: Layout {
     let weights: [CGFloat]
 
     func sizeThatFits(
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) -> CGSize {
         CGSize(
             width: proposal.width ?? 0,
             height: proposal.height ?? 0
         )
     }
 
     func placeSubviews(
         in bounds: CGRect,
         proposal: ProposedViewSize,
         subviews: Subviews,
         cache: inout ()
     ) {
         let totalWeight = weights.reduce(0, +)
         guard totalWeight > 0 else { return }
 
         var y = bounds.minY
         for (index, subview) in subviews.enumerated() {
             let weight = index < weights.count ? weights[index] : 0
             let height = bounds.height * weight / totalWeight
             subview.place(
                 at: CGPoint(x: bounds.minX, y: y),
                 anchor: .topLeading,
                 proposal: ProposedViewSize(width: bounds.width, height: height)
             )
             y += height
         }
     }
 }