crossmate

SuccessPanel.swift (34853B)

---

 import SwiftUI
 
 struct SuccessPanel: View {
     let session: PlayerSession
     let roster: PlayerRoster
     /// Drives the finish-banner replay scrubber and the grid override above.
     var replay: ReplayControls? = nil
     /// Loads the merged journal (Phase 2b). Called once when the banner appears
     /// (and again on "check again" while waiting on a peer's upload).
     var loadReplay: (() async -> JournalReplayResult)? = nil
     @Environment(PlayerPreferences.self) private var preferences
     @Environment(\.displayScale) private var displayScale
     /// The rendered completion card, set when the user taps Share. Carrying the
     /// image on the sheet's `item` (rather than a separate flag) guarantees it's
     /// present the first time the sheet opens.
     @State private var sharePreview: SharePreviewItem?
 
     private typealias Contribution = PuzzleGridStats.ParticipantCount
 
     private var gridStats: PuzzleGridStats {
         makeGridStats(replayCells: replay?.frame?.cells)
     }
 
     /// Stats over the live grid, ignoring any loaded replay frame — the same
     /// source the share card's tints read, so the card's legend counts match
     /// its tinted squares.
     private var liveGridStats: PuzzleGridStats {
         makeGridStats(replayCells: nil)
     }
 
     private func makeGridStats(
         replayCells: [GridPosition: JournalCellState]?
     ) -> PuzzleGridStats {
         let hasRemotePlayers = roster.entries.contains { !$0.isLocal }
         return PuzzleGridStats(
             puzzle: session.puzzle,
             hasRemotePlayers: hasRemotePlayers,
             localAuthorID: roster.localAuthorID,
             countsIncorrectEntries: false
         ) { r, c in
             PuzzleGridStats.CellState(
                 displayedCellState(row: r, col: c, replayCells: replayCells)
             )
         }
     }
 
     private func revealedSquaresText(for stats: PuzzleGridStats) -> String {
         switch stats.revealedSquareCount {
         case 0:
             return "No squares revealed"
         case 1:
             return "1 square revealed"
         default:
             return "\(stats.revealedSquareCount) squares revealed"
         }
     }
 
     /// Total active solve time, frozen at completion (`roster.solveTime` bounds
     /// the union at `completedAt`). "Finished" rather than "Solved" so it reads
     /// correctly for a resignation too — and because an offline solo win carries
     /// no `completedBy`, so a win and a resign aren't reliably distinguishable
     /// here anyway. `nil` when there is no time to show — an archive made before
     /// the clock existed — so the line is omitted rather than reading 0:00.
     private var finishedInText: String? {
         let seconds = roster.solveTime()
         guard seconds > 0 else { return nil }
         return "Finished in \(TimeLog.clockString(seconds))"
     }
 
     /// Co-players in the roster other than the local solver. Drives the
     /// "with N friends" clause in the share text; 0 for a solo solve.
     private var friendCount: Int {
         roster.entries.filter { !$0.isLocal }.count
     }
 
     /// Whether a solve time is available to share at all (an archive made
     /// before the clock existed has none).
     private var hasClock: Bool { roster.solveTime() > 0 }
 
     /// The tint for a filled square, using the lighter author-attribution wash
     /// pre-composited over white. The share card's Canvas paints gridlines
     /// first, so using a translucent fill would blend the wash with gray rather
     /// than the white cell colour the Clue Bar uses.
     /// Keyed on authorship, not the reveal mark: a revealed square clears its
     /// author (Game.revealCells), and that nil author survives persistence even
     /// when the `.revealed` mark doesn't — so an unauthored square is reliably
     /// left untinted on both live and reloaded games. In a non-shared puzzle an
     /// authored square is the user's own colour; in a shared puzzle it's the
     /// contributing author's colour.
     private func contributorTint(for authorID: String?) -> Color? {
         guard let authorID else { return nil }
         let hasRemotePlayers = roster.entries.contains { !$0.isLocal }
         guard hasRemotePlayers else {
             return shareCardWash(for: preferences.color, opacity: PlayerColor.authorTintOpacity)
         }
         guard let color = roster.entries.first(where: { $0.authorID == authorID })?.color else {
             return nil
         }
         return shareCardWash(for: color, opacity: PlayerColor.authorTintOpacity)
     }
 
     private func shareCardWash(for color: PlayerColor, opacity: Double) -> Color {
         let resolved = UIColor(color.tint).resolvedColor(with: UITraitCollection(userInterfaceStyle: .light))
         var red: CGFloat = 0
         var green: CGFloat = 0
         var blue: CGFloat = 0
         var alpha: CGFloat = 0
         guard resolved.getRed(&red, green: &green, blue: &blue, alpha: &alpha) else {
             return color.tint.opacity(opacity)
         }
 
         let washAlpha = CGFloat(opacity) * alpha
         return Color(
             red: Double(1 - washAlpha + red * washAlpha),
             green: Double(1 - washAlpha + green * washAlpha),
             blue: Double(1 - washAlpha + blue * washAlpha)
         )
     }
 
     /// Per-cell tints for the share card's silhouette: `nil` for blocks, for
     /// revealed squares, and for squares with no attributable author; otherwise
     /// the contributor's colour. Reads the live `session.game` — the locally
     /// authoritative grid that carries entries, marks (including `.revealed`),
     /// and authors promptly, without depending on the journal/replay, which for
     /// a shared game only finishes syncing long after completion. The card
     /// renders on tap, by which point any resignation reveal has refreshed the
     /// live game (the grid already shows the filled answers).
     private var shareCellTints: [[Color?]] {
         (0..<session.puzzle.height).map { r in
             (0..<session.puzzle.width).map { c -> Color? in
                 guard !session.puzzle.cells[r][c].isBlock else { return nil }
                 let square = session.game.squares[r][c]
                 guard !square.mark.isRevealed else { return nil }
                 return contributorTint(for: square.letterAuthorID)
             }
         }
     }
 
     /// The card's bottom line: "Completed Solo" or "Completed with N
     /// Friend(s)", with "in <time>" appended when a clock exists and the
     /// user hasn't opted it out.
     private func completionLine(includeClock: Bool) -> String {
         var text = friendCount > 0
             ? "Completed with \(friendCount) Friend\(friendCount == 1 ? "" : "s")"
             : "Completed Solo"
         if includeClock, hasClock {
             text += " in \(TimeLog.clockString(roster.solveTime()))"
         }
         return text
     }
 
     /// Legend rows for the share card: the local player first as 'Me', then
     /// each co-player as 'Friend N' in contribution order. Counts come from
     /// the live grid; the dots use the selection-strength wash — stronger
     /// than the squares' own tint — so they read clearly at dot size.
     private func shareLegend() -> [SuccessShareCard.LegendEntry] {
         let counts = liveGridStats.participantCounts(
             entries: roster.entries,
             localName: preferences.name,
             localColor: preferences.color,
             includesUnattributedLocalWhenNoRemote: true
         )
         // Unattributed counts only surface when there are no remote players,
         // so a nil authorID is always the local solver.
         let isLocal: (Contribution) -> Bool = {
             $0.authorID == nil || $0.authorID == roster.localAuthorID
         }
         let dotColor: (PlayerColor?) -> Color = { color in
             guard let color else { return Color(white: 0.75) }
             return shareCardWash(for: color, opacity: color.selectedOpacity)
         }
 
         var legend = [SuccessShareCard.LegendEntry(
             id: "me",
             name: "Me",
             dot: dotColor(preferences.color),
             count: counts.filter(isLocal).reduce(0) { $0 + $1.count }
         )]
         let friends = counts.filter { !isLocal($0) }.sorted {
             if $0.count != $1.count { return $0.count > $1.count }
             return $0.name < $1.name
         }
         for (index, friend) in friends.enumerated() {
             legend.append(SuccessShareCard.LegendEntry(
                 id: friend.id,
                 name: "Friend \(index + 1)",
                 dot: dotColor(friend.color),
                 count: friend.count
             ))
         }
         return legend
     }
 
     @MainActor private func makeShareImage(includeClock: Bool) -> Image? {
         let card = SuccessShareCard(
             puzzle: session.puzzle,
             cellTints: shareCellTints,
             legend: shareLegend(),
             completionText: completionLine(includeClock: includeClock)
         )
         let renderer = ImageRenderer(content: card)
         renderer.scale = displayScale
         guard let uiImage = renderer.uiImage else { return nil }
         return Image(uiImage: uiImage)
     }
 
     private func contributions(for stats: PuzzleGridStats) -> [Contribution] {
         stats.participantCounts(
             entries: roster.entries,
             localName: preferences.name,
             localColor: preferences.color,
             includesUnattributedLocalWhenNoRemote: true
         )
         .sorted {
             if $0.count != $1.count { return $0.count > $1.count }
             return $0.name < $1.name
         }
     }
 
     private func displayedCellState(
         row: Int,
         col: Int,
         replayCells: [GridPosition: JournalCellState]?
     ) -> JournalCellState {
         let position = GridPosition(row: row, col: col)
         if let replayCells {
             return replayCells[position] ?? .empty
         }
 
         let square = session.game.squares[row][col]
         return JournalCellState(
             letter: square.entry,
             mark: square.mark,
             cellAuthorID: square.letterAuthorID
         )
     }
 
     var body: some View {
         VStack(spacing: 0) {
             if let replay {
                 ReplayScrubber(replay: replay, fillColor: preferences.color.tint)
             }
             scoreboard
         }
         .frame(maxWidth: .infinity, maxHeight: .infinity)
         // Drive the load from the panel itself, not the scrubber subview: the
         // scrubber renders `EmptyView` until a timeline loads, and SwiftUI skips
         // a non-rendering view's `.task`. Keyed on `reloadToken` so "check
         // again" re-fires it.
         .task(id: replay?.reloadToken) {
             guard let replay, let loadReplay else { return }
             await replay.load(loadReplay)
         }
         // A contributor's journal just synced — re-check completeness so a
         // waiting scrubber flips to ready without polling. Same async-sequence
         // idiom PlayerRoster uses for `.playerRosterShouldRefresh`.
         .task {
             let gameID = session.mutator.gameID
             for await note in NotificationCenter.default.notifications(named: .replayJournalDidSync) {
                 guard let replay, case .waiting = replay.status,
                       let gameIDs = note.userInfo?["gameIDs"] as? Set<UUID>,
                       gameIDs.contains(gameID)
                 else { continue }
                 replay.retry()
             }
         }
     }
 
     private var shareIcon: some View {
         Image(systemName: "square.and.arrow.up")
             .font(.system(size: 18, weight: .medium))
             .foregroundStyle(.secondary)
             .frame(width: 32, height: 32)
             .accessibilityLabel("Share")
     }
 
     private var shareButton: some View {
         // Render on tap, not on appear, so the card captures the loaded replay
         // frame (the authoritative final grid) rather than the empty pre-load
         // state. Present our own preview first — the system share sheet's header
         // thumbnail is always small.
         Button {
             if let image = makeShareImage(includeClock: true) {
                 sharePreview = SharePreviewItem(
                     title: session.puzzle.title,
                     initialImage: image,
                     hasClock: hasClock,
                     renderImage: { makeShareImage(includeClock: $0) }
                 )
             }
         } label: {
             shareIcon
         }
         .buttonStyle(.plain)
         .sheet(item: $sharePreview) { preview in
             SharePreviewSheet(item: preview)
         }
     }
 
     private var scoreboard: some View {
         let stats = gridStats
         let contributions = contributions(for: stats)
         return HStack(alignment: .center, spacing: 16) {
             VStack(alignment: .center, spacing: 8) {
                 Image(systemName: "checkmark.seal.fill")
                     .font(.system(size: 44))
                     .foregroundStyle(.tint)
 
                 VStack(alignment: .center, spacing: 2) {
                     Text(session.puzzle.title)
                         .font(.subheadline.weight(.semibold))
                         .lineLimit(1)
                     if let date = session.puzzle.date {
                         Text(date.formatted(date: .long, time: .omitted))
                             .font(.caption)
                             .foregroundStyle(.secondary)
                             .lineLimit(1)
                     }
                     if let author = session.puzzle.author {
                         Text(author)
                             .font(.caption)
                             .foregroundStyle(.secondary)
                             .lineLimit(1)
                     }
                     if let publisher = session.puzzle.publisher {
                         Text(publisher)
                             .font(.caption)
                             .foregroundStyle(.secondary)
                             .lineLimit(1)
                     }
                 }
                 .multilineTextAlignment(.center)
                 .frame(maxWidth: .infinity, alignment: .center)
             }
             .frame(maxWidth: .infinity, alignment: .center)
 
             VStack(alignment: .leading, spacing: 12) {
                 ScrollView {
                     VStack(alignment: .leading, spacing: 6) {
                         ForEach(contributions) { contribution in
                             HStack(spacing: 8) {
                                 Circle()
                                     .fill(contribution.color?.tint ?? Color.secondary)
                                     .frame(width: 8, height: 8)
                                 Text(contribution.name)
                                     .font(.subheadline)
                                     .lineLimit(1)
                                 Spacer(minLength: 8)
                                 Text("\(contribution.count)")
                                     .font(.subheadline.monospacedDigit().weight(.semibold))
                             }
                         }
 
                         HStack(alignment: .center, spacing: 18) {
                             VStack(alignment: .center, spacing: 4) {
                                 if let finishedInText {
                                     Text(finishedInText)
                                 }
                                 Text(revealedSquaresText(for: stats))
                             }
                             .font(.footnote)
                             .foregroundStyle(.secondary)
                             .multilineTextAlignment(.center)
 
                             shareButton
                         }
                         .padding(.top, 8)
                         .frame(maxWidth: .infinity)
                     }
                 }
                 .scrollIndicators(.hidden)
             }
             // Cap the list width so a wide iPad column doesn't strand each
             // name far from its count, then expand-to-fill and centre that
             // capped block within the column.
             .frame(maxWidth: 320, alignment: .leading)
             .frame(maxWidth: .infinity)
             .padding(.top, 14)
         }
         .padding(.leading, 18)
         .padding(.trailing, 24)
         .padding(.top, 8)
         .padding(.bottom, 4)
         .frame(maxWidth: .infinity, maxHeight: .infinity)
     }
 }
 
 /// The replay scrubber that sits atop the finish banner. The thumb starts at
 /// the far right (the finished grid) and dragging left rewinds the puzzle grid
 /// above through its move history. Disabled with a sync caption while a
 /// contributing device's journal is still missing (strict completeness).
 private struct ReplayScrubber: View {
     @Bindable var replay: ReplayControls
     /// The local player's accent colour, for the filled track.
     var fillColor: Color
 
     /// Shared height for every scrubber state (slider, waiting, loading) so the
     /// banner doesn't change height as it loads, and captions sit vertically
     /// centred in the same space the slider occupies.
     private static let rowHeight: CGFloat = 24
 
     var body: some View {
         Group {
             switch replay.status {
             case .ready(let timeline) where timeline.count > 0:
                 slider(count: timeline.count)
             case .waiting:
                 waiting
             case .loading:
                 caption {
                     ProgressView().controlSize(.small)
                     Text("Loading replay…")
                 }
             case .idle, .ready, .unavailable:
                 // Not started yet (`.idle`), nothing to replay (empty log), or
                 // no reachable history. Hold the row's height anyway so the
                 // banner doesn't change size as the load resolves — otherwise
                 // the scoreboard below hitches up and down as the scrubber
                 // appears then collapses.
                 Color.clear.frame(height: Self.rowHeight)
             }
         }
         .padding(.horizontal, 18)
         .padding(.top, 14)
     }
 
     private func slider(count: Int) -> some View {
         HStack(spacing: 10) {
             historyOrSpeedControl
             CompactSlider(
                 value: $replay.position,
                 range: 0...count,
                 fillColor: UIColor(fillColor),
                 // A manual scrub always wins: cancel autoplay the moment the
                 // user grabs the thumb, while preserving the selected speed.
                 onUserScrub: { replay.pausePlayback() }
             )
             PlaybackControl(
                 isPlaying: replay.isPlaybackActive,
                 selectedSpeed: replay.selectedPlaybackSpeed,
                 onTap: { replay.togglePlayback() }
             )
         }
         .frame(height: Self.rowHeight)
         // Drive autoplay: play/pause and speed changes restart the loop with
         // the current interval. A paused replay yields a `nil` interval, so the
         // task exits and the grid rests.
         .task(id: PlaybackTaskID(
             isActive: replay.isPlaybackActive,
             speed: replay.selectedPlaybackSpeed
         )) {
             guard let interval = replay.playbackStepInterval else { return }
             while !Task.isCancelled {
                 try? await Task.sleep(for: interval)
                 if Task.isCancelled { break }
                 replay.advancePlayback()
             }
         }
     }
 
     private struct PlaybackTaskID: Equatable {
         let isActive: Bool
         let speed: Int
     }
 
     private var historyOrSpeedControl: some View {
         ZStack {
             Image(systemName: "clock.arrow.circlepath")
                 .font(.footnote)
                 .foregroundStyle(.secondary)
                 .opacity(replay.isPlaybackActive ? 0 : 1)
                 .scaleEffect(replay.isPlaybackActive ? 0.75 : 1)
                 .blur(radius: replay.isPlaybackActive ? 2 : 0)
                 .accessibilityHidden(replay.isPlaybackActive)
 
             Button {
                 replay.cycleSelectedPlaybackSpeed()
             } label: {
                 Text("\(replay.selectedPlaybackSpeed)x")
                     .font(.caption2.monospacedDigit().weight(.semibold))
                     .contentTransition(.numericText())
                     .frame(width: 28, height: 18)
                     .replayGlass()
                     .animation(.easeInOut(duration: 0.16), value: replay.selectedPlaybackSpeed)
             }
             .foregroundStyle(.secondary)
             .buttonStyle(.plain)
             .opacity(replay.isPlaybackActive ? 1 : 0)
             .scaleEffect(replay.isPlaybackActive ? 1 : 1.35)
             .blur(radius: replay.isPlaybackActive ? 0 : 2)
             .allowsHitTesting(replay.isPlaybackActive)
             .accessibilityHidden(!replay.isPlaybackActive)
             .accessibilityLabel("Replay speed")
             .accessibilityValue("Speed \(replay.selectedPlaybackSpeed) of \(ReplayControls.maxPlaybackSpeed)")
         }
         .frame(width: 30, height: 22)
         // The symbol/speed glyphs read a touch high against the slider track;
         // nudge the pair down a point to sit centred on it.
         .offset(y: 1)
         .animation(.spring(response: 0.34, dampingFraction: 0.62), value: replay.isPlaybackActive)
     }
 
     private var waiting: some View {
         caption {
             Image(systemName: "arrow.triangle.2.circlepath")
                 .font(.footnote)
             if case .waiting(let missing) = replay.status {
                 Text("Waiting for \(missing) device\(missing == 1 ? "" : "s") to sync history")
                     .lineLimit(1)
             }
             Spacer(minLength: 8)
             Button("Check Again") { replay.retry() }
                 .font(.caption.weight(.semibold))
                 .buttonStyle(.borderless)
         }
     }
 
     private func caption<Content: View>(@ViewBuilder _ content: () -> Content) -> some View {
         HStack(spacing: 8, content: content)
             .font(.caption)
             .foregroundStyle(.secondary)
             .frame(height: Self.rowHeight)
             .frame(maxWidth: .infinity, alignment: .leading)
     }
 }
 
 /// A shaped play/pause control for replay autoplay.
 private struct PlaybackControl: View {
     let isPlaying: Bool
     let selectedSpeed: Int
     let onTap: () -> Void
 
     var body: some View {
         Button(action: onTap) {
             Image(systemName: isPlaying ? "pause.fill" : "play.fill")
                 .font(.caption2.weight(.heavy))
                 .frame(width: 26, height: 18)
                 .padding(.horizontal, 7)
                 .padding(.vertical, 4)
                 .replayGlass()
             .animation(.easeInOut(duration: 0.18), value: isPlaying)
         }
         .buttonStyle(.plain)
         .accessibilityLabel(isPlaying ? "Pause replay" : "Play replay")
         .accessibilityValue(isPlaying ? "Playing at speed \(selectedSpeed)" : "Paused")
     }
 }
 
 /// Drives `.sheet(item:)`. Carries the initial rendered card (so the sheet
 /// never opens empty) plus a closure to re-render the card when the
 /// "Include Time" toggle changes.
 private struct SharePreviewItem: Identifiable {
     let id = UUID()
     let title: String
     let initialImage: Image
     /// Whether a solve time exists to offer the toggle for at all.
     let hasClock: Bool
     let renderImage: @MainActor (Bool) -> Image?
 }
 
 /// A confirmation sheet that shows the rendered card at full size with its
 /// caption and a Share button. Stands in for the system share sheet's tiny
 /// preview header so the user can see exactly what they're about to share.
 /// When a solve time exists, a toggle re-renders the card with or without it.
 private struct SharePreviewSheet: View {
     let item: SharePreviewItem
     @Environment(\.dismiss) private var dismiss
     @State private var includeClock: Bool
     @State private var image: Image
 
     init(item: SharePreviewItem) {
         self.item = item
         _image = State(initialValue: item.initialImage)
         // Off when there's no time to share; the toggle still shows, disabled.
         _includeClock = State(initialValue: item.hasClock)
     }
 
     var body: some View {
         NavigationStack {
             VStack(spacing: 20) {
                 image
                     .resizable()
                     .scaledToFit()
                     .clipShape(RoundedRectangle(cornerRadius: 16, style: .continuous))
                     .overlay(
                         RoundedRectangle(cornerRadius: 16, style: .continuous)
                             .strokeBorder(.separator, lineWidth: 0.5)
                     )
                     .padding()
                     .frame(maxWidth: .infinity, maxHeight: .infinity)
 
                 Toggle("Include Time", isOn: $includeClock)
                     .disabled(!item.hasClock)
                     .padding(.horizontal)
 
                 ShareLink(
                     item: image,
                     subject: Text(item.title),
                     preview: SharePreview(item.title, image: image)
                 ) {
                     Label("Share", systemImage: "square.and.arrow.up")
                         .frame(maxWidth: .infinity)
                 }
                 .buttonStyle(.borderedProminent)
                 .controlSize(.large)
                 .padding([.horizontal, .bottom])
             }
             .navigationTitle("Share")
             .navigationBarTitleDisplayMode(.inline)
             .toolbar {
                 ToolbarItem(placement: .cancellationAction) {
                     Button("Done") { dismiss() }
                 }
             }
             .onChange(of: includeClock) { _, newValue in
                 if let updated = item.renderImage(newValue) { image = updated }
             }
         }
         .presentationDetents([.large])
     }
 }
 
 /// The shareable completion card, snapshotted by `ImageRenderer` and handed to
 /// the share sheet. Uses explicit colours (not the environment) so the exported
 /// image reads the same regardless of the device's light/dark setting.
 private struct SuccessShareCard: View {
     /// One entry of the colour legend under the silhouette.
     struct LegendEntry: Identifiable {
         let id: String
         /// 'Me' for the local player, 'Friend N' for co-players.
         let name: String
         /// The dot's fill — the player's selection-strength wash.
         let dot: Color
         let count: Int
     }
 
     let puzzle: Puzzle
     /// Per-cell author tints, parallel to `puzzle.cells`; `nil` draws neutral.
     let cellTints: [[Color?]]
     /// The colour legend, local player first.
     let legend: [LegendEntry]
     /// "Completed Solo/with N Friend(s)", plus the solve time unless the
     /// user opted it out.
     let completionText: String
 
     /// Fixed render width; the grid sizes itself to the puzzle's aspect ratio.
     private static let width: CGFloat = 480
 
     var body: some View {
         VStack(spacing: 24) {
             HStack(spacing: 6) {
                 Text("Solved with")
                 Image("AboutIcon")
                     .resizable()
                     .scaledToFit()
                     .frame(width: 22, height: 22)
                     .clipShape(RoundedRectangle(cornerRadius: 5, style: .continuous))
                 Text("Crossmate")
             }
             .font(.system(size: 16, weight: .regular, design: .rounded))
             .foregroundStyle(.secondary)
 
             VStack(spacing: 6) {
                 Text(puzzle.title)
                     .font(.system(size: 24, weight: .semibold, design: .rounded))
                     .foregroundStyle(.black)
                     .multilineTextAlignment(.center)
                     .lineLimit(2)
 
                 if let author = puzzle.author {
                     Text("by \(author)")
                         .font(.system(size: 17, weight: .medium, design: .rounded))
                         .foregroundStyle(.black)
                         .multilineTextAlignment(.center)
                         .lineLimit(1)
                 }
             }
 
             ShareGridSilhouette(
                 cells: puzzle.cells,
                 tints: cellTints,
                 rows: puzzle.height,
                 cols: puzzle.width
             )
             .frame(maxWidth: 320)
 
             // The colour legend: which colour is the sharer's, and which are
             // their friends', with each player's filled-square count. Entries
             // run left-to-right from 'Me' and wrap onto further centred lines
             // when they outgrow the card.
             CenteredFlowLayout(horizontalSpacing: 18, verticalSpacing: 6) {
                 ForEach(legend) { entry in
                     HStack(spacing: 7) {
                         Circle()
                             .fill(entry.dot)
                             .frame(width: 9, height: 9)
                         // A soft black: dimmer than the headline text without
                         // falling to the secondary grey the count uses.
                         Text(entry.name)
                             .foregroundStyle(Color(white: 0.3))
                         Text("\(entry.count)")
                             .monospacedDigit()
                             .foregroundStyle(.secondary)
                     }
                 }
             }
             .font(.system(size: 14, weight: .regular, design: .rounded))
 
             Text(completionText)
                 .font(.system(size: 20, weight: .medium, design: .rounded))
                 .monospacedDigit()
                 .foregroundStyle(.black)
                 .lineLimit(1)
         }
         .padding(24)
         .frame(width: Self.width)
         .background(Color.white)
     }
 }
 
 /// A wrapping row layout for the share card's legend: subviews flow
 /// left-to-right at their ideal sizes, wrapping onto a new line when the
 /// next one would overflow, with every line centred horizontally.
 private struct CenteredFlowLayout: Layout {
     var horizontalSpacing: CGFloat
     var verticalSpacing: CGFloat
 
     /// Subview indices grouped into lines that fit within `width`.
     private func lines(subviews: Subviews, in width: CGFloat) -> [[Int]] {
         var lines: [[Int]] = []
         var current: [Int] = []
         var x: CGFloat = 0
         for index in subviews.indices {
             let size = subviews[index].sizeThatFits(.unspecified)
             if !current.isEmpty, x + horizontalSpacing + size.width > width {
                 lines.append(current)
                 current = [index]
                 x = size.width
             } else {
                 x += (current.isEmpty ? 0 : horizontalSpacing) + size.width
                 current.append(index)
             }
         }
         if !current.isEmpty { lines.append(current) }
         return lines
     }
 
     func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
         let width = proposal.width ?? .infinity
         var maxLineWidth: CGFloat = 0
         var height: CGFloat = 0
         for (index, line) in lines(subviews: subviews, in: width).enumerated() {
             let sizes = line.map { subviews[$0].sizeThatFits(.unspecified) }
             let lineWidth = sizes.reduce(0) { $0 + $1.width }
                 + horizontalSpacing * CGFloat(line.count - 1)
             maxLineWidth = max(maxLineWidth, lineWidth)
             height += (index == 0 ? 0 : verticalSpacing) + (sizes.map(\.height).max() ?? 0)
         }
         return CGSize(width: proposal.width ?? maxLineWidth, height: height)
     }
 
     func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
         var y = bounds.minY
         for line in lines(subviews: subviews, in: bounds.width) {
             let sizes = line.map { subviews[$0].sizeThatFits(.unspecified) }
             let lineWidth = sizes.reduce(0) { $0 + $1.width }
                 + horizontalSpacing * CGFloat(line.count - 1)
             let lineHeight = sizes.map(\.height).max() ?? 0
             var x = bounds.minX + (bounds.width - lineWidth) / 2
             for (offset, index) in line.enumerated() {
                 subviews[index].place(
                     at: CGPoint(x: x, y: y + (lineHeight - sizes[offset].height) / 2),
                     anchor: .topLeading,
                     proposal: .unspecified
                 )
                 x += sizes[offset].width + horizontalSpacing
             }
             y += lineHeight + verticalSpacing
         }
     }
 }
 
 /// A two-tone rendering of the grid shape — open squares light, blocks dark —
 /// drawn with `Canvas` so it scales crisply at any render size.
 private struct ShareGridSilhouette: View {
     let cells: [[Puzzle.Cell]]
     /// Per-cell author tints, parallel to `cells`; `nil` falls back to `openColor`.
     let tints: [[Color?]]
     let rows: Int
     let cols: Int
 
     private let blockColor = Color(white: 0.15)
     private let openColor = Color.white
     private let lineColor = Color(white: 0.78)
 
     var body: some View {
         Canvas { context, size in
             guard rows > 0, cols > 0 else { return }
             let cw = size.width / CGFloat(cols)
             let ch = size.height / CGFloat(rows)
             let line = max(1, min(cw, ch) * 0.06)
             // The gridline colour shows through the inset gaps between cells.
             context.fill(Path(CGRect(origin: .zero, size: size)), with: .color(lineColor))
             for r in 0..<rows {
                 guard r < cells.count else { continue }
                 for c in 0..<cols {
                     guard c < cells[r].count else { continue }
                     let cellRect = CGRect(
                         x: CGFloat(c) * cw,
                         y: CGFloat(r) * ch,
                         width: cw,
                         height: ch
                     )
                     if cells[r][c].isBlock {
                         // Fill the whole cell so adjacent blocks merge into a
                         // solid region — Crossmate draws no gridlines between
                         // black squares.
                         context.fill(Path(cellRect), with: .color(blockColor))
                     } else {
                         // Inset so the gridline colour shows around open squares.
                         let tint = (r < tints.count && c < tints[r].count) ? tints[r][c] : nil
                         context.fill(
                             Path(cellRect.insetBy(dx: line / 2, dy: line / 2)),
                             with: .color(tint ?? openColor)
                         )
                     }
                 }
             }
         }
         .aspectRatio(CGFloat(cols) / CGFloat(rows), contentMode: .fit)
     }
 }