# SwiftUI Blocks: every component with its source

Copy-paste SwiftUI components for iOS 18 through iOS 27. Swift 6, MIT. A component with a shader has two files: copy both.

## Breathing Guide Circle

A circle that expands and contracts through breathe in, hold and breathe out phases, with a label and a countdown.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/BreathingGuideCircle/BreathingGuideCircle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum BreathingGuideCirclePhase: String {
    case inhale = "Breathe In"
    case hold = "Hold"
    case exhale = "Breathe Out"
}

struct BreathingGuideCircleState: Equatable {
    let phase: BreathingGuideCirclePhase
    let secondsLeft: Int
    /// 0 is fully contracted and 1 is fully expanded.
    let expansion: Double
}

enum BreathingGuideCircleMath {
    /// Where the cycle is after `elapsed` seconds. Invalid durations count as zero.
    static func state(at elapsed: TimeInterval, inhale: Double, hold: Double, exhale: Double) -> BreathingGuideCircleState {
        let inhale = sanitized(inhale)
        let hold = sanitized(hold)
        let exhale = sanitized(exhale)
        let total = inhale + hold + exhale
        guard total > 0, elapsed.isFinite else {
            return BreathingGuideCircleState(phase: .inhale, secondsLeft: 0, expansion: 0)
        }

        var time = elapsed.truncatingRemainder(dividingBy: total)
        if time < 0 { time += total }

        if time < inhale {
            return BreathingGuideCircleState(phase: .inhale, secondsLeft: Int((inhale - time).rounded(.up)), expansion: eased(time / inhale))
        }
        time -= inhale
        if time < hold {
            return BreathingGuideCircleState(phase: .hold, secondsLeft: Int((hold - time).rounded(.up)), expansion: 1)
        }
        time -= hold
        let progress = exhale > 0 ? min(time / exhale, 1) : 1
        return BreathingGuideCircleState(phase: .exhale, secondsLeft: Int((exhale - time).rounded(.up)), expansion: 1 - eased(progress))
    }

    private static func sanitized(_ duration: Double) -> Double {
        duration.isFinite ? min(max(duration, 0), 3_600) : 0
    }

    private static func eased(_ progress: Double) -> Double {
        progress * progress * (3 - 2 * progress)
    }
}

/// A circle that expands and contracts through breathing phases, with a label and a countdown.
///
/// With Reduce Motion on, the circle stays still and the label keeps guiding.
struct BreathingGuideCircle: View {
    var inhale = 4.0
    var hold = 4.0
    var exhale = 6.0
    var tint: Color = .teal
    var diameter: CGFloat = 260

    @State private var start = Date.now
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// How much the scale of every ring grows from contracted to expanded.
    private let ringGrowth = 0.38

    var body: some View {
        TimelineView(.animation(minimumInterval: reduceMotion ? 0.25 : 1.0 / 30.0)) { timeline in
            let state = BreathingGuideCircleMath.state(
                at: timeline.date.timeIntervalSince(start),
                inhale: inhale,
                hold: hold,
                exhale: exhale
            )

            VStack(spacing: 36) {
                circle(expansion: reduceMotion ? 0.6 : state.expansion)

                VStack(spacing: 6) {
                    Text(state.phase.rawValue)
                        .font(.system(.title, design: .rounded, weight: .semibold))
                        .multilineTextAlignment(.center)
                    Text(state.secondsLeft, format: .number)
                        .font(.system(.title2, design: .rounded).monospacedDigit())
                        .foregroundStyle(.secondary)
                }
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Breathing guide")
            .accessibilityValue(state.phase.rawValue)
        }
    }

    private func circle(expansion: Double) -> some View {
        let size = max(diameter, 0)

        return ZStack {
            Circle()
                .fill(tint.opacity(0.14))
                .scaleEffect(0.62 + ringGrowth * expansion)
            Circle()
                .fill(tint.opacity(0.26))
                .scaleEffect(0.5 + ringGrowth * expansion)
            Circle()
                .fill(.linearGradient(colors: [tint, .blue], startPoint: .topLeading, endPoint: .bottomTrailing))
                .scaleEffect(0.38 + ringGrowth * expansion)
        }
        .frame(width: size, height: size)
    }
}

// MARK: - Demo

struct BreathingGuideCircleDemo: View {
    var body: some View {
        BreathingGuideCircle(inhale: 1.6, hold: 0.8, exhale: 1.6)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    BreathingGuideCircleDemo()
}
```

## Keyframe Timeline Showcase

A view animated by keyframe tracks for scale, offset and color, with the tracks and a playhead drawn on one shared timeline.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/KeyframeTimelineShowcase/KeyframeTimelineShowcase.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct KeyframeTimelineShowcaseValues {
    var scale = 1.0
    var offset = 0.0
    var tint = 0.0
    var playhead = 0.0
}

/// The length of each keyframe in seconds. Every track adds up to the same total, so the loop closes.
private enum KeyframeTimelineShowcaseTiming {
    static let scale = [0.3, 0.45, 0.35, 0.9]
    static let offset = [0.3, 0.4, 0.5, 0.8]
    static let tint = [0.75, 0.5, 0.75]
    static let total = 2.0

    static func ticks(_ durations: [Double]) -> [Double] {
        var elapsed = 0.0
        return durations.map { duration in
            elapsed += duration
            return elapsed / total
        }
    }
}

/// Plays scale, offset and color tracks on one shared keyframe timeline, and draws the tracks below.
///
/// With Reduce Motion on, the content rests and the timeline stays still.
struct KeyframeTimelineShowcase<Content: View>: View {
    var restColor: Color = .indigo
    var peakColor: Color = .pink
    @ViewBuilder var content: () -> Content

    @ScaledMetric(relativeTo: .largeTitle) private var tileSize = 120.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        if reduceMotion {
            stage(KeyframeTimelineShowcaseValues())
        } else {
            KeyframeAnimator(initialValue: KeyframeTimelineShowcaseValues(), repeating: true) { values in
                stage(values)
            } keyframes: { _ in
                KeyframeTrack(\.scale) {
                    CubicKeyframe(0.8, duration: KeyframeTimelineShowcaseTiming.scale[0])
                    SpringKeyframe(1.25, duration: KeyframeTimelineShowcaseTiming.scale[1], spring: .bouncy)
                    CubicKeyframe(0.92, duration: KeyframeTimelineShowcaseTiming.scale[2])
                    SpringKeyframe(1, duration: KeyframeTimelineShowcaseTiming.scale[3], spring: .bouncy)
                }
                KeyframeTrack(\.offset) {
                    LinearKeyframe(0, duration: KeyframeTimelineShowcaseTiming.offset[0])
                    CubicKeyframe(-90, duration: KeyframeTimelineShowcaseTiming.offset[1])
                    CubicKeyframe(0, duration: KeyframeTimelineShowcaseTiming.offset[2])
                    LinearKeyframe(0, duration: KeyframeTimelineShowcaseTiming.offset[3])
                }
                KeyframeTrack(\.tint) {
                    CubicKeyframe(1, duration: KeyframeTimelineShowcaseTiming.tint[0])
                    LinearKeyframe(1, duration: KeyframeTimelineShowcaseTiming.tint[1])
                    CubicKeyframe(0, duration: KeyframeTimelineShowcaseTiming.tint[2])
                }
                KeyframeTrack(\.playhead) {
                    // Each loop starts from the last value, so the playhead has to jump back.
                    MoveKeyframe(0)
                    LinearKeyframe(1, duration: KeyframeTimelineShowcaseTiming.total)
                }
            }
        }
    }

    private func stage(_ values: KeyframeTimelineShowcaseValues) -> some View {
        VStack(spacing: 32) {
            content()
                .frame(width: tileSize, height: tileSize)
                .background(
                    restColor.mix(with: peakColor, by: values.tint),
                    in: RoundedRectangle(cornerRadius: tileSize * 0.26, style: .continuous)
                )
                .scaleEffect(values.scale)
                .offset(y: values.offset)
                .frame(height: tileSize + 150, alignment: .bottom)

            VStack(spacing: 12) {
                lane("Scale", color: .orange, ticks: KeyframeTimelineShowcaseTiming.ticks(KeyframeTimelineShowcaseTiming.scale))
                lane("Offset", color: .teal, ticks: KeyframeTimelineShowcaseTiming.ticks(KeyframeTimelineShowcaseTiming.offset))
                lane("Color", color: peakColor, ticks: KeyframeTimelineShowcaseTiming.ticks(KeyframeTimelineShowcaseTiming.tint))
            }
            .overlay(alignment: .leading) {
                GeometryReader { proxy in
                    Capsule()
                        .fill(.primary)
                        .frame(width: 2)
                        .offset(x: proxy.size.width * values.playhead - 1)
                }
            }
            .accessibilityHidden(true)
        }
    }

    private func lane(_ title: String, color: Color, ticks: [Double]) -> some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(title)
                .font(.caption.weight(.semibold))
                .foregroundStyle(.secondary)

            Canvas { context, size in
                let track = CGRect(x: 0, y: size.height / 2 - 2, width: size.width, height: 4)
                context.fill(Path(roundedRect: track, cornerRadius: 2), with: .color(color.opacity(0.3)))
                for tick in ticks {
                    // The first and the last dot stay whole inside the lane.
                    let dot = CGRect(x: (size.width - 10) * tick, y: size.height / 2 - 5, width: 10, height: 10)
                    context.fill(Path(ellipseIn: dot), with: .color(color))
                }
            }
            .frame(height: 12)
        }
    }
}

// MARK: - Demo

struct KeyframeTimelineShowcaseDemo: View {
    var body: some View {
        KeyframeTimelineShowcase {
            Image(systemName: "sparkles")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
                .accessibilityLabel("Animated tile")
        }
        .padding(28)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    KeyframeTimelineShowcaseDemo()
}
```

## Phase Animator Cycle

A card that loops through several phases of scale, rotation and color.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/PhaseAnimatorCycle/PhaseAnimatorCycle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

private enum PhaseAnimatorCyclePhase: CaseIterable {
    case rest, lift, tilt, shrink

    var scale: Double {
        switch self {
        case .rest: 1
        case .lift: 1.14
        case .tilt: 1.04
        case .shrink: 0.88
        }
    }

    var rotation: Angle {
        switch self {
        case .rest: .zero
        case .lift: .degrees(-7)
        case .tilt: .degrees(9)
        case .shrink: .degrees(-3)
        }
    }

    var color: Color {
        switch self {
        case .rest: .indigo
        case .lift: .purple
        case .tilt: .pink
        case .shrink: .orange
        }
    }

    var animation: Animation {
        switch self {
        case .rest, .tilt: .spring(duration: 0.6, bounce: 0.4)
        case .lift, .shrink: .easeInOut(duration: 0.55)
        }
    }
}

/// A card that loops through phases of scale, rotation and color.
///
/// With Reduce Motion on, the card stays in its first phase.
struct PhaseAnimatorCycle<Content: View>: View {
    var cornerRadius: CGFloat = 32
    @ViewBuilder var content: () -> Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        if reduceMotion {
            card(.rest)
        } else {
            PhaseAnimator(PhaseAnimatorCyclePhase.allCases) { phase in
                card(phase)
            } animation: { phase in
                phase.animation
            }
        }
    }

    private func card(_ phase: PhaseAnimatorCyclePhase) -> some View {
        content()
            .background {
                RoundedRectangle(cornerRadius: max(0, cornerRadius), style: .continuous)
                    .fill(phase.color)
                    .overlay {
                        RoundedRectangle(cornerRadius: max(0, cornerRadius), style: .continuous)
                            .fill(.linearGradient(colors: [.white.opacity(0.3), .clear], startPoint: .top, endPoint: .bottom))
                    }
                    .shadow(color: phase.color.opacity(0.45), radius: 24, y: 14)
            }
            .scaleEffect(phase.scale)
            .rotationEffect(phase.rotation)
    }
}

// MARK: - Demo

struct PhaseAnimatorCycleDemo: View {
    var body: some View {
        PhaseAnimatorCycle {
            VStack(spacing: 14) {
                Image(systemName: "wand.and.stars")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .accessibilityHidden(true)
                Text("Four phases, one loop")
                    .font(.system(.title3, design: .rounded, weight: .semibold))
                    .multilineTextAlignment(.center)
            }
            .foregroundStyle(.white)
            .padding(.horizontal, 32)
            .padding(.vertical, 56)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    PhaseAnimatorCycleDemo()
}
```

## Split Flap Counter

A split-flap display where each digit flips down to its new value.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/SplitFlapCounter/SplitFlapCounter.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SplitFlapCounterMath {
    /// More places than any `Int` needs, so a huge `minimumDigits` cannot allocate without limit.
    static let maximumDigits = 20

    /// One cell per character, padded with zeros on the left and with a leading minus when negative.
    static func cells(for value: Int, minimumDigits: Int) -> [String] {
        let digits = String(value.magnitude).map(String.init)
        let wanted = min(max(minimumDigits, 0), maximumDigits)
        let padding = max(0, wanted - digits.count)
        return (value < 0 ? ["-"] : []) + Array(repeating: "0", count: padding) + digits
    }
}

/// A split-flap display where each digit flips down to its new value.
///
/// With Reduce Motion on, digits change without flipping.
struct SplitFlapCounter: View {
    let value: Int
    var minimumDigits = 1

    var body: some View {
        let cells = SplitFlapCounterMath.cells(for: value, minimumDigits: minimumDigits)

        ViewThatFits(in: .horizontal) {
            row(cells)
            ScrollView(.horizontal, showsIndicators: false) {
                row(cells)
            }
        }
        .accessibilityRepresentation { Text(value.formatted()) }
    }

    private func row(_ cells: [String]) -> some View {
        // Identified by their place from the right, so the units stay put when the number grows.
        HStack(spacing: 6) {
            ForEach(Array(cells.indices.reversed()), id: \.self) { place in
                SplitFlapCounterCell(text: cells[cells.count - 1 - place])
            }
        }
    }
}

private struct SplitFlapCounterCell: View {
    let text: String

    @State private var shown: String
    @State private var previous: String
    @State private var flips = 0.0
    @ScaledMetric(relativeTo: .largeTitle) private var height = 92.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    init(text: String) {
        self.text = text
        _shown = State(initialValue: text)
        _previous = State(initialValue: text)
    }

    var body: some View {
        SplitFlapCounterFace(flips: flips, shown: shown, previous: previous, height: height)
            .onChange(of: text) { _, newText in
                if reduceMotion {
                    previous = newText
                    shown = newText
                } else {
                    previous = shown
                    shown = newText
                    withAnimation(.easeIn(duration: 0.42)) { flips += 1 }
                }
            }
    }
}

/// `flips` grows by one per change. Its fractional part is how far the current flip has gone.
private struct SplitFlapCounterFace: View, Animatable {
    var flips: Double
    let shown: String
    let previous: String
    let height: Double

    nonisolated var animatableData: Double {
        get { flips }
        set { flips = newValue }
    }

    var body: some View {
        let progress = flips - flips.rounded(.down)
        let isFlipping = progress > 0
        let topAngle = isFlipping ? -180 * min(progress, 0.5) : -90
        let bottomAngle = isFlipping ? 180 * (1 - max(progress, 0.5)) : 0

        ZStack {
            VStack(spacing: 2) {
                half(shown, isTop: true)
                half(isFlipping ? previous : shown, isTop: false)
            }

            VStack(spacing: 2) {
                half(previous, isTop: true)
                    .brightness(-0.25 * min(progress * 2, 1))
                    .rotation3DEffect(.degrees(topAngle), axis: (x: 1, y: 0, z: 0), anchor: .bottom, perspective: 0.5)
                    .opacity(topAngle > -90 ? 1 : 0)
                half(shown, isTop: false)
                    .brightness(isFlipping ? -0.25 * (1 - progress) : 0)
                    .rotation3DEffect(.degrees(bottomAngle), axis: (x: 1, y: 0, z: 0), anchor: .top, perspective: 0.5)
                    .opacity(bottomAngle < 90 ? 1 : 0)
            }
        }
    }

    private func half(_ text: String, isTop: Bool) -> some View {
        let radius = height * 0.1

        return Text(text)
            .font(.system(size: height * 0.68, weight: .bold, design: .rounded).monospacedDigit())
            .foregroundStyle(.white)
            .frame(width: height * 0.68, height: height)
            .frame(height: height / 2, alignment: isTop ? .top : .bottom)
            .clipped()
            .background(
                Color(white: isTop ? 0.2 : 0.16),
                in: UnevenRoundedRectangle(
                    topLeadingRadius: isTop ? radius : 0,
                    bottomLeadingRadius: isTop ? 0 : radius,
                    bottomTrailingRadius: isTop ? 0 : radius,
                    topTrailingRadius: isTop ? radius : 0,
                    style: .continuous
                )
            )
    }
}

// MARK: - Demo

struct SplitFlapCounterDemo: View {
    @State private var value = 1_284
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 24) {
            Text("Passengers today")
                .font(.system(.title3, design: .rounded, weight: .semibold))
                .foregroundStyle(.white.opacity(0.7))

            SplitFlapCounter(value: value, minimumDigits: 5)
                .padding(.horizontal, 16)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(white: 0.06))
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1))
                guard !Task.isCancelled else { return }
                value += 37
            }
        }
    }
}

#Preview {
    SplitFlapCounterDemo()
}
```

## Spring Study Playground

Sliders for response and damping that show how a spring moves a view and draw its curve.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/SpringStudyPlayground/SpringStudyPlayground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SpringStudyPlaygroundMath {
    static let responseRange = 0.1...1.5
    static let dampingRange = 0.1...1.0

    static func clamped(_ value: Double, to range: ClosedRange<Double>) -> Double {
        value.isNaN ? range.lowerBound : min(max(value, range.lowerBound), range.upperBound)
    }

    /// The position of a spring going from 0 to 1, sampled evenly over `duration` seconds.
    static func samples(response: Double, damping: Double, count: Int, duration: Double) -> [Double] {
        guard count > 1, duration > 0, duration.isFinite else { return [] }
        let spring = Spring(
            response: clamped(response, to: responseRange),
            dampingRatio: clamped(damping, to: dampingRange)
        )
        let last = min(count, 512) - 1
        return (0...last).map { spring.value(target: 1.0, time: duration * Double($0) / Double(last)) }
    }
}

nonisolated private struct SpringStudyPlaygroundCurve: Shape {
    let samples: [Double]
    let maximum: Double

    func path(in rect: CGRect) -> Path {
        var path = Path()
        guard samples.count > 1, maximum > 0 else { return path }
        let points = samples.enumerated().map { index, value in
            CGPoint(
                x: rect.minX + rect.width * Double(index) / Double(samples.count - 1),
                y: rect.maxY - rect.height * value / maximum
            )
        }
        path.addLines(points)
        return path
    }
}

/// Sliders for response and damping that show how a spring moves a view, with its curve drawn below.
///
/// With Reduce Motion on, the ball jumps and the curve still shows what the spring would do.
struct SpringStudyPlayground: View {
    private enum Preset: String, CaseIterable, Identifiable {
        case smooth = "Smooth"
        case bouncy = "Bouncy"
        case stiff = "Stiff"

        var id: Self { self }

        var values: (response: Double, damping: Double) {
            switch self {
            case .smooth: (0.8, 1)
            case .bouncy: (0.75, 0.3)
            case .stiff: (0.2, 0.75)
            }
        }
    }

    /// The curve's scale. A spring with the lowest damping overshoots to almost this.
    private static let curveMaximum = 1.9
    private static let presetSpacing: CGFloat = 10

    @State private var response: Double
    @State private var damping: Double
    @State private var isAtEnd = false
    @ScaledMetric(relativeTo: .title2) private var ballSize = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    init(response: Double = 0.55, damping: Double = 0.55) {
        _response = State(initialValue: SpringStudyPlaygroundMath.clamped(response, to: SpringStudyPlaygroundMath.responseRange))
        _damping = State(initialValue: SpringStudyPlaygroundMath.clamped(damping, to: SpringStudyPlaygroundMath.dampingRange))
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 24) {
                stage
                curve
                slider("Response", value: $response, range: SpringStudyPlaygroundMath.responseRange, unit: " s")
                slider("Damping", value: $damping, range: SpringStudyPlaygroundMath.dampingRange, unit: "")
                presets
            }
            .padding(20)
        }
    }

    private var stage: some View {
        Circle()
            .fill(.linearGradient(colors: [.orange, .pink], startPoint: .top, endPoint: .bottom))
            .frame(width: ballSize, height: ballSize)
            .frame(maxWidth: .infinity, alignment: isAtEnd ? .trailing : .leading)
            .padding(10)
            .background(.quaternary, in: Capsule())
            .accessibilityHidden(true)
    }

    private var curve: some View {
        let settling = Spring(response: response, dampingRatio: damping).settlingDuration
        // The curve covers the time the spring takes to settle, so it always reaches the line.
        let samples = SpringStudyPlaygroundMath.samples(response: response, damping: damping, count: 120, duration: max(settling, 1))

        return VStack(alignment: .leading, spacing: 10) {
            ZStack {
                GeometryReader { proxy in
                    Path { path in
                        let y = proxy.size.height * (1 - 1 / Self.curveMaximum)
                        path.move(to: CGPoint(x: 0, y: y))
                        path.addLine(to: CGPoint(x: proxy.size.width, y: y))
                    }
                    .stroke(.secondary, style: StrokeStyle(lineWidth: 1, dash: [4, 4]))
                }

                SpringStudyPlaygroundCurve(samples: samples, maximum: Self.curveMaximum)
                    .stroke(.pink, style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
            }
            .frame(height: 150)
            .accessibilityHidden(true)

            Text("Settles in \(settling.formatted(.number.precision(.fractionLength(1)))) s")
                .font(.footnote)
                .foregroundStyle(.secondary)
        }
    }

    private func slider(_ title: String, value: Binding<Double>, range: ClosedRange<Double>, unit: String) -> some View {
        let text = value.wrappedValue.formatted(.number.precision(.fractionLength(2))) + unit

        return VStack(spacing: 4) {
            HStack {
                Text(title).font(.subheadline.weight(.semibold))
                Spacer()
                Text(text).font(.subheadline.monospacedDigit()).foregroundStyle(.secondary)
            }
            .accessibilityHidden(true)

            Slider(value: value, in: range) { Text(title) }
                .accessibilityValue(text)
                .tint(.pink)
        }
    }

    private var presets: some View {
        ViewThatFits(in: .horizontal) {
            HStack(spacing: Self.presetSpacing) { presetButtons }
            VStack(spacing: Self.presetSpacing) { presetButtons }
        }
    }

    @ViewBuilder private var presetButtons: some View {
        ForEach(Preset.allCases) { preset in
            Button {
                response = preset.values.response
                damping = preset.values.damping
                play()
            } label: {
                // In a narrow row a name shrinks a little before it would break in two.
                Text(preset.rawValue)
                    .lineLimit(1)
                    .minimumScaleFactor(0.75)
                    .frame(maxWidth: .infinity)
            }
            .buttonStyle(.bordered)
        }

        Button(action: play) {
            Text("Play").frame(maxWidth: .infinity)
        }
        .buttonStyle(.borderedProminent)
        .tint(.pink)
    }

    private func play() {
        withAnimation(reduceMotion ? nil : .spring(response: response, dampingFraction: damping)) {
            isAtEnd.toggle()
        }
    }
}

// MARK: - Demo

struct SpringStudyPlaygroundDemo: View {
    var body: some View {
        SpringStudyPlayground()
    }
}

#Preview {
    SpringStudyPlaygroundDemo()
}
```

## Symbol Effect Gallery

A gallery of SF Symbol effects, each played on demand and labeled with its name.

Category: Animations. Minimum: iOS 18.0. Path: Components/Animations/SymbolEffectGallery/SymbolEffectGallery.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

private enum SymbolEffectGalleryEffect: String, CaseIterable, Identifiable {
    case bounce = "Bounce"
    case pulse = "Pulse"
    case variableColor = "Variable Color"
    case wiggle = "Wiggle"
    case rotate = "Rotate"
    case breathe = "Breathe"

    var id: Self { self }

    var symbol: String {
        switch self {
        case .bounce: "arrow.down.circle.fill"
        case .pulse: "heart.fill"
        case .variableColor: "wifi"
        case .wiggle: "bell.fill"
        case .rotate: "gearshape.2.fill"
        case .breathe: "moon.stars.fill"
        }
    }

    var color: Color {
        switch self {
        case .bounce: .blue
        case .pulse: .pink
        case .variableColor: .teal
        case .wiggle: .orange
        case .rotate: .indigo
        case .breathe: .purple
        }
    }
}

/// A gallery of SF Symbol effects. Tapping a tile plays its effect once.
///
/// With Reduce Motion on, the effects are removed and the symbols stay still.
struct SymbolEffectGallery: View {
    @ScaledMetric(relativeTo: .body) private var minimumColumn = 150.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: minimumColumn), spacing: 14)], spacing: 14) {
                ForEach(SymbolEffectGalleryEffect.allCases) { effect in
                    SymbolEffectGalleryTile(effect: effect)
                }
            }
            .padding(20)
        }
        .symbolEffectsRemoved(reduceMotion)
    }
}

private struct SymbolEffectGalleryTile: View {
    let effect: SymbolEffectGalleryEffect

    @State private var plays = 0
    @ScaledMetric(relativeTo: .largeTitle) private var height = 68.0

    var body: some View {
        Button {
            plays += 1
        } label: {
            VStack(spacing: 14) {
                symbol
                    .font(.largeTitle)
                    .foregroundStyle(effect.color)
                    .frame(height: height)

                Text(effect.rawValue)
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.primary)
                    .multilineTextAlignment(.center)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 22)
            .padding(.horizontal, 12)
            .background(effect.color.opacity(0.12), in: RoundedRectangle(cornerRadius: 22, style: .continuous))
        }
        .buttonStyle(.plain)
        .accessibilityLabel(effect.rawValue)
        .accessibilityHint("Plays the effect")
    }

    @ViewBuilder private var symbol: some View {
        let image = Image(systemName: effect.symbol).accessibilityHidden(true)

        switch effect {
        case .bounce: image.symbolEffect(.bounce, value: plays)
        case .pulse: image.symbolEffect(.pulse, value: plays)
        case .variableColor: image.symbolEffect(.variableColor.iterative, value: plays)
        case .wiggle: image.symbolEffect(.wiggle, value: plays)
        case .rotate: image.symbolEffect(.rotate, value: plays)
        case .breathe: image.symbolEffect(.breathe, value: plays)
        }
    }
}

// MARK: - Demo

struct SymbolEffectGalleryDemo: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("Symbol Effects")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .padding(.horizontal, 20)
                .padding(.top, 12)

            SymbolEffectGallery()
        }
    }
}

#Preview {
    SymbolEffectGalleryDemo()
}
```

## Animated Gradient Background

A linear gradient that slowly drifts its colors and turns its direction.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/AnimatedGradientBackground/AnimatedGradientBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum AnimatedGradientBackgroundMath {
    /// The palette index for a position, also when a negative speed runs time backwards.
    static func index(at position: Double, count: Int) -> Int {
        (Int(floor(position)) % count + count) % count
    }
}

/// A linear gradient whose colors drift along it while its direction slowly turns.
///
/// With Reduce Motion on, it shows a still gradient.
struct AnimatedGradientBackground: View {
    var colors: [Color] = [.indigo, .purple, .pink, .orange]
    /// How many color steps pass each second.
    var speed: Double = 0.2

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { timeline in
            let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed
            let angle = time * 0.5
            let reach = CGSize(width: cos(angle) * 0.75, height: sin(angle) * 0.75)

            LinearGradient(
                colors: driftedColors(at: time),
                startPoint: UnitPoint(x: 0.5 - reach.width, y: 0.5 - reach.height),
                endPoint: UnitPoint(x: 0.5 + reach.width, y: 0.5 + reach.height)
            )
        }
        .ignoresSafeArea()
        .accessibilityHidden(true)
    }

    /// Each stop blends from one palette color to the next, wrapping around so the drift never ends.
    private func driftedColors(at time: Double) -> [Color] {
        guard colors.count > 1 else { return colors + colors }

        return colors.indices.map { index in
            let position = time + Double(index)
            let lower = AnimatedGradientBackgroundMath.index(at: position, count: colors.count)
            let upper = (lower + 1) % colors.count
            return colors[lower].mix(with: colors[upper], by: position - floor(position))
        }
    }
}

// MARK: - Demo

struct AnimatedGradientBackgroundDemo: View {
    var body: some View {
        ZStack {
            AnimatedGradientBackground()

            VStack(spacing: 6) {
                Text("Good Evening")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                Text("Colors that never sit still")
                    .font(.headline)
                    .foregroundStyle(.white.opacity(0.8))
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    AnimatedGradientBackgroundDemo()
}
```

## Aurora Mesh Background

An animated aurora background made with a mesh gradient.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/AuroraMeshBackground/AuroraMeshBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A slowly moving aurora built with a mesh gradient.
///
/// With Reduce Motion on, it shows a still gradient.
struct AuroraMeshBackground: View {
    var first: Color = .indigo
    var second: Color = .purple
    var third: Color = .teal
    var speed: Double = 0.6

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            MeshGradient(
                width: AuroraMesh.size,
                height: AuroraMesh.size,
                points: AuroraMesh.points(at: reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate * speed),
                colors: [
                    first, second, first,
                    third, second, first,
                    second, first, third,
                ]
            )
        }
        .ignoresSafeArea()
        .accessibilityHidden(true)
    }
}

enum AuroraMesh {
    static let size = 3

    /// Corners stay fixed and edge points slide along their edge, so the mesh always fills the view.
    static func points(at time: TimeInterval) -> [SIMD2<Float>] {
        func wave(speed: Double, phase: Double) -> Double {
            0.5 + sin(time * speed + phase) * 0.2
        }

        let positions: [(Double, Double)] = [
            (0, 0), (wave(speed: 0.8, phase: 2.1), 0), (1, 0),
            (0, wave(speed: 0.9, phase: 0)), (wave(speed: 1, phase: 0.7), wave(speed: 0.6, phase: 4.2)), (1, wave(speed: 0.7, phase: 1.3)),
            (0, 1), (wave(speed: 1.1, phase: 3.4), 1), (1, 1),
        ]
        return positions.map { SIMD2(Float($0.0), Float($0.1)) }
    }
}

// MARK: - Demo

struct AuroraMeshBackgroundDemo: View {
    var body: some View {
        ZStack {
            AuroraMeshBackground()

            Text("Aurora")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
        }
    }
}

#Preview {
    AuroraMeshBackgroundDemo()
}
```

## Bubbles Background

Translucent bubbles that rise and sway across the screen.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/BubblesBackground/BubblesBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Translucent bubbles that rise and sway. Larger bubbles rise faster.
///
/// With Reduce Motion on, the bubbles hold still.
struct BubblesBackground: View {
    var color: Color = .white
    var count: Int = 36
    var speed: Double = 1

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let margin = 40.0

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { timeline in
            Canvas { context, size in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed
                let tint = Gradient(colors: [color.opacity(0.02), color.opacity(0.26)])

                for index in 0..<count {
                    let scale = noise(index, 1)
                    let radius = 6 + scale * scale * 28
                    let center = position(of: index, scale: scale, at: time, in: size)
                    let bubble = Path(ellipseIn: CGRect(
                        x: center.x - radius,
                        y: center.y - radius,
                        width: radius * 2,
                        height: radius * 2
                    ))

                    context.fill(
                        bubble,
                        with: .radialGradient(tint, center: center, startRadius: radius * 0.3, endRadius: radius)
                    )
                    context.stroke(bubble, with: .color(color.opacity(0.5)), lineWidth: 1)

                    let shine = radius * 0.22
                    context.fill(
                        Path(ellipseIn: CGRect(
                            x: center.x - radius * 0.55,
                            y: center.y - radius * 0.6,
                            width: shine,
                            height: shine
                        )),
                        with: .color(color.opacity(0.75))
                    )
                }
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    private func position(of index: Int, scale: Double, at time: Double, in size: CGSize) -> CGPoint {
        let travel = size.height + Self.margin * 2
        let rise = 35 + scale * 70
        let climbed = (noise(index, 2) * travel + time * rise).truncatingRemainder(dividingBy: travel)
        let sway = sin(time * (0.7 + noise(index, 3)) + noise(index, 4) * 2 * .pi) * (10 + noise(index, 5) * 18)

        return CGPoint(x: noise(index, 6) * size.width + sway, y: size.height + Self.margin - climbed)
    }

    /// A repeatable pseudo-random value in 0..<1 for one bubble and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct BubblesBackgroundDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [.cyan, .blue, Color(red: 0.03, green: 0.12, blue: 0.4)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            BubblesBackground()

            Text("Deep Blue")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
        }
    }
}

#Preview {
    BubblesBackgroundDemo()
}
```

## Color Orbs Background

Large, soft colored orbs drifting slowly over a dark base.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/ColorOrbsBackground/ColorOrbsBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Large, soft colored orbs drifting slowly over a dark base.
///
/// With Reduce Motion on, the orbs hold still.
struct ColorOrbsBackground: View {
    /// One orb per color.
    var colors: [Color] = [.pink, .purple, .blue, .teal, .orange]
    var base: Color = Color(red: 0.05, green: 0.04, blue: 0.13)
    var speed: Double = 0.4

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { timeline in
            Canvas(opaque: true) { context, size in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed

                context.fill(Path(CGRect(origin: .zero, size: size)), with: .color(base))
                context.blendMode = .screen

                for (index, color) in colors.enumerated() {
                    drawOrb(index: index, color: color, at: time, in: context, size: size)
                }
            }
        }
        .ignoresSafeArea()
        .accessibilityHidden(true)
    }

    /// A radial falloff to clear looks like a heavy blur and costs far less to redraw each frame.
    private func drawOrb(index: Int, color: Color, at time: Double, in context: GraphicsContext, size: CGSize) {
        let center = CGPoint(
            x: (0.5 + 0.42 * sin(time * (0.5 + noise(index, 1) * 0.5) + noise(index, 2) * 2 * .pi)) * size.width,
            y: (0.5 + 0.42 * cos(time * (0.4 + noise(index, 3) * 0.5) + noise(index, 4) * 2 * .pi)) * size.height
        )
        let radius = max(size.width, size.height) * (0.34 + noise(index, 5) * 0.14)
        let falloff = Gradient(stops: [
            .init(color: color.opacity(0.9), location: 0),
            .init(color: color.opacity(0.45), location: 0.5),
            .init(color: color.opacity(0), location: 1),
        ])

        context.fill(
            Path(ellipseIn: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)),
            with: .radialGradient(falloff, center: center, startRadius: 0, endRadius: radius)
        )
    }

    /// A repeatable pseudo-random value in 0..<1 for one orb and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct ColorOrbsBackgroundDemo: View {
    var body: some View {
        ZStack {
            ColorOrbsBackground()

            VStack(alignment: .leading, spacing: 8) {
                Image(systemName: "moon.stars.fill")
                    .font(.title)
                    .accessibilityHidden(true)
                Text("Evening Focus")
                    .font(.system(.title, design: .rounded, weight: .bold))
                Text("Soft color moves behind your content without getting in its way.")
                    .font(.subheadline)
                    .foregroundStyle(.white.opacity(0.8))
            }
            .foregroundStyle(.white)
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.ultraThinMaterial, in: .rect(cornerRadius: 28))
            .environment(\.colorScheme, .dark)
            .padding(24)
        }
    }
}

#Preview {
    ColorOrbsBackgroundDemo()
}
```

## Grid Pulse Background

A grid of dots with a pulse of light spreading out from the center.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/GridPulseBackground/GridPulseBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum GridPulseBackgroundMath {
    /// How many dots fit on each side of the center, or `nil` when `spacing` cannot lay out a grid.
    static func dotsPerSide(extent: Double, spacing: Double) -> Int? {
        guard spacing.isFinite, spacing > 0 else { return nil }
        return Int(extent / 2 / spacing) + 1
    }
}

/// A grid of dots with a pulse of light spreading from the center.
///
/// With Reduce Motion on, it shows one still ring.
struct GridPulseBackground: View {
    var color: Color = .cyan
    var spacing: Double = 26
    /// Seconds for the pulse to travel from the center to the corners.
    var period: Double = 2.6

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let dotRadius = 2.0
    private static let restingOpacity = 0.32
    private static let bandWidth = 80.0

    var body: some View {
        TimelineView(.animation(paused: reduceMotion)) { timeline in
            Canvas { context, size in
                let cycle = timeline.date.timeIntervalSinceReferenceDate / period
                let progress = reduceMotion ? 0.4 : cycle - floor(cycle)
                draw(progress: progress, in: context, size: size)
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    private func draw(progress: Double, in context: GraphicsContext, size: CGSize) {
        guard
            let columns = GridPulseBackgroundMath.dotsPerSide(extent: size.width, spacing: spacing),
            let rows = GridPulseBackgroundMath.dotsPerSide(extent: size.height, spacing: spacing)
        else { return }

        let center = CGPoint(x: size.width / 2, y: size.height / 2)
        let front = progress * (hypot(size.width, size.height) / 2 + Self.bandWidth)
        var resting = Path()

        for row in -rows...rows {
            for column in -columns...columns {
                let dot = CGPoint(x: center.x + Double(column) * spacing, y: center.y + Double(row) * spacing)
                let gap = (hypot(dot.x - center.x, dot.y - center.y) - front) / Self.bandWidth
                let glow = exp(-gap * gap) * (1 - pow(progress, 4))

                if glow < 0.02 {
                    resting.addEllipse(in: circle(at: dot, radius: Self.dotRadius))
                } else {
                    context.fill(
                        Path(ellipseIn: circle(at: dot, radius: Self.dotRadius * (1 + glow * 1.6))),
                        with: .color(color.opacity(Self.restingOpacity + glow * (1 - Self.restingOpacity)))
                    )
                }
            }
        }

        context.fill(resting, with: .color(color.opacity(Self.restingOpacity)))
    }

    private func circle(at center: CGPoint, radius: Double) -> CGRect {
        CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)
    }
}

// MARK: - Demo

struct GridPulseBackgroundDemo: View {
    var body: some View {
        ZStack {
            Color(red: 0.03, green: 0.05, blue: 0.1)
                .ignoresSafeArea()

            GridPulseBackground()

            VStack(spacing: 10) {
                Image(systemName: "dot.radiowaves.left.and.right")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("Signal")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
            .padding(.horizontal, 28)
            .padding(.vertical, 20)
            .background(.ultraThinMaterial, in: .rect(cornerRadius: 24))
        }
    }
}

#Preview {
    GridPulseBackgroundDemo()
}
```

## Image Derived Gradient Background

A full-screen gradient whose colors are sampled from the pixels of an image and cross-fade when the image changes.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/ImageDerivedGradientBackground/ImageDerivedGradientBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct ImageDerivedGradientBackgroundSample: Equatable {
    let red: Double
    let green: Double
    let blue: Double
}

enum ImageDerivedGradientBackgroundMath {
    static let bytesPerPixel = 4

    /// Averages horizontal bands of premultiplied RGBA pixels, from top to bottom.
    ///
    /// Saturated pixels count for more, so a photo gives vivid colors instead of grey.
    /// Fully transparent bands are left out.
    static func bands(pixels: [UInt8], width: Int, height: Int, count: Int) -> [ImageDerivedGradientBackgroundSample] {
        guard width > 0, height > 0, count > 0, pixels.count / bytesPerPixel / width >= height else { return [] }
        let bandCount = min(count, height)

        return (0..<bandCount).compactMap { band in
            var red: Double = 0, green: Double = 0, blue: Double = 0, total: Double = 0

            for row in (band * height / bandCount)..<((band + 1) * height / bandCount) {
                for column in 0..<width {
                    let offset = (row * width + column) * bytesPerPixel
                    let alpha = Double(pixels[offset + 3])
                    guard alpha > 0 else { continue }

                    let r = Double(pixels[offset]) / alpha
                    let g = Double(pixels[offset + 1]) / alpha
                    let b = Double(pixels[offset + 2]) / alpha
                    let weight = alpha / 255 * (0.15 + max(r, g, b) - min(r, g, b))
                    red += r * weight
                    green += g * weight
                    blue += b * weight
                    total += weight
                }
            }

            guard total > 0 else { return nil }
            return ImageDerivedGradientBackgroundSample(red: red / total, green: green / total, blue: blue / total)
        }
    }
}

/// A full-screen gradient whose colors are sampled from an image and cross-fade when it changes.
///
/// Keep passing the same `Image` value while the picture is the same, or it is sampled again.
/// With Reduce Motion on, the colors change without fading.
struct ImageDerivedGradientBackground: View {
    private struct Request: Equatable {
        let image: Image
        let bands: Int
    }

    let image: Image
    var bands = 3
    var fallback: [Color] = [.indigo, .black]

    @State private var colors: [Color]?
    @State private var previous: [Color]?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let shown = colors ?? fallback

        ZStack {
            Color.black

            // The gradient before stays underneath while the new one fades in over it.
            // Fading one out as the other fades in would dip through the black.
            LinearGradient(colors: previous ?? shown, startPoint: .top, endPoint: .bottom)

            LinearGradient(colors: shown, startPoint: .top, endPoint: .bottom)
                .id(shown)
                .transition(.opacity)
        }
        .ignoresSafeArea()
        .accessibilityHidden(true)
        .task(id: Request(image: image, bands: bands)) {
            let sampled = sampledColors()
            guard !Task.isCancelled else { return }
            previous = colors ?? fallback
            withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.8)) { colors = sampled }
        }
    }

    /// Draws the image small and reads its pixels. Returns nil when it cannot be rendered.
    private func sampledColors() -> [Color]? {
        let renderer = ImageRenderer(content: image.resizable().scaledToFill().frame(width: 24, height: 24).clipped())
        renderer.scale = 1

        guard let cgImage = renderer.cgImage,
              let space = CGColorSpace(name: CGColorSpace.sRGB) else { return nil }

        let width = cgImage.width
        let height = cgImage.height
        var pixels = [UInt8](repeating: 0, count: width * height * ImageDerivedGradientBackgroundMath.bytesPerPixel)
        let didDraw = pixels.withUnsafeMutableBytes { buffer -> Bool in
            guard let context = CGContext(
                data: buffer.baseAddress,
                width: width,
                height: height,
                bitsPerComponent: 8,
                bytesPerRow: width * ImageDerivedGradientBackgroundMath.bytesPerPixel,
                space: space,
                bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue
            ) else { return false }

            context.draw(cgImage, in: CGRect(x: 0, y: 0, width: width, height: height))
            return true
        }
        guard didDraw else { return nil }

        let samples = ImageDerivedGradientBackgroundMath.bands(pixels: pixels, width: width, height: height, count: max(bands, 1))
        return samples.isEmpty ? nil : samples.map { Color(.sRGB, red: $0.red, green: $0.green, blue: $0.blue) }
    }
}

// MARK: - Demo

struct ImageDerivedGradientBackgroundDemo: View {
    @State private var photos = Self.makePhotos()
    @State private var index = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            if let photo = photos.isEmpty ? nil : photos[index % photos.count] {
                ImageDerivedGradientBackground(image: photo)

                photo
                    .resizable()
                    .scaledToFill()
                    .frame(width: 240, height: 240)
                    .clipShape(.rect(cornerRadius: 36, style: .continuous))
                    .shadow(color: .black.opacity(0.35), radius: 28, y: 16)
                    .id(index)
                    .transition(.opacity)
                    .accessibilityLabel("Placeholder photo")
            }
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.5))
                guard !Task.isCancelled else { return }
                withAnimation(.easeInOut(duration: 0.8)) { index += 1 }
            }
        }
    }

    /// Stands in for real photos: gradients and symbols rendered into images.
    private static func makePhotos() -> [Image] {
        let scenes: [(colors: [Color], symbol: String)] = [
            ([.orange, .pink, .purple], "sun.horizon.fill"),
            ([.teal, .blue, .indigo], "water.waves"),
            ([.mint, .green, .teal], "leaf.fill"),
        ]

        return scenes.compactMap { scene in
            let content = ZStack {
                LinearGradient(colors: scene.colors, startPoint: .top, endPoint: .bottom)
                Image(systemName: scene.symbol)
                    .font(.system(size: 120))
                    .foregroundStyle(.white.opacity(0.85))
            }
            .frame(width: 240, height: 240)

            let renderer = ImageRenderer(content: content)
            renderer.scale = 2
            return renderer.cgImage.map { Image(decorative: $0, scale: 2) }
        }
    }
}

#Preview {
    ImageDerivedGradientBackgroundDemo()
}
```

## Particle Field Background

Drifting points that are joined by faint lines when they come close.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/ParticleFieldBackground/ParticleFieldBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Drifting points joined by faint lines when they come close.
///
/// With Reduce Motion on, the field holds still.
struct ParticleFieldBackground: View {
    var color: Color = .white
    var count: Int = 70
    var linkDistance: Double = 105
    var speed: Double = 1

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { timeline in
            Canvas { context, size in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed
                let points = (0..<count).map { position(of: $0, at: time, in: size) }

                drawLinks(between: points, in: context)

                for (index, point) in points.enumerated() {
                    let radius = 1.2 + noise(index, 5) * 1.6
                    let dot = CGRect(x: point.x - radius, y: point.y - radius, width: radius * 2, height: radius * 2)
                    context.fill(Path(ellipseIn: dot), with: .color(color.opacity(0.85)))
                }
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    /// Links are grouped into a few opacity levels, so a frame strokes four paths and not hundreds.
    private func drawLinks(between points: [CGPoint], in context: GraphicsContext) {
        var levels = Array(repeating: Path(), count: 4)

        for first in points.indices {
            for second in points.indices where second > first {
                let distance = hypot(points[first].x - points[second].x, points[first].y - points[second].y)
                guard distance < linkDistance else { continue }

                let closeness = 1 - distance / linkDistance
                let level = min(Int(closeness * Double(levels.count)), levels.count - 1)
                levels[level].move(to: points[first])
                levels[level].addLine(to: points[second])
            }
        }

        for (level, path) in levels.enumerated() {
            context.stroke(path, with: .color(color.opacity(0.1 * Double(level + 1))), lineWidth: 0.8)
        }
    }

    private func position(of index: Int, at time: Double, in size: CGSize) -> CGPoint {
        CGPoint(
            x: bounce(noise(index, 1) + time * (noise(index, 2) - 0.5) * 0.08) * size.width,
            y: bounce(noise(index, 3) + time * (noise(index, 4) - 0.5) * 0.04) * size.height
        )
    }

    /// A triangle wave from 0 to 1, so a point turns around at the edge instead of jumping and snapping its links.
    private func bounce(_ value: Double) -> Double {
        abs((value - floor(value)) * 2 - 1)
    }

    /// A repeatable pseudo-random value in 0..<1 for one point and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct ParticleFieldBackgroundDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.05, green: 0.08, blue: 0.22), Color(red: 0.16, green: 0.06, blue: 0.34)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            ParticleFieldBackground()

            VStack(spacing: 6) {
                Text("Particle Field")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                Text("Points that find each other")
                    .font(.subheadline)
                    .foregroundStyle(.white.opacity(0.75))
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    ParticleFieldBackgroundDemo()
}
```

## Snowfall Background

Snowflakes falling at different speeds across three layers of depth.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/SnowfallBackground/SnowfallBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Snow in three depths: small and slow far away, large, fast and slightly blurred up close.
///
/// With Reduce Motion on, the flakes hold still.
struct SnowfallBackground: View {
    var color: Color = .white
    /// Multiplies the number of flakes in every depth.
    var density: Double = 1
    var speed: Double = 1

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private struct Depth {
        let count: Int
        let radius: ClosedRange<Double>
        let fall: Double
        let sway: Double
        let opacity: Double
        let blur: Double
    }

    private static let depths = [
        Depth(count: 110, radius: 0.8...1.5, fall: 26, sway: 6, opacity: 0.45, blur: 0),
        Depth(count: 60, radius: 1.8...3, fall: 55, sway: 12, opacity: 0.7, blur: 0),
        Depth(count: 18, radius: 3.5...6, fall: 105, sway: 22, opacity: 0.9, blur: 1.5),
    ]

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { timeline in
            Canvas { context, size in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed

                for (layer, depth) in Self.depths.enumerated() {
                    context.drawLayer { layerContext in
                        if depth.blur > 0 {
                            layerContext.addFilter(.blur(radius: depth.blur))
                        }
                        layerContext.fill(
                            flakes(of: depth, layer: layer, at: time, in: size),
                            with: .color(color.opacity(depth.opacity))
                        )
                    }
                }
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    /// One path holds every flake of a depth, so each depth is a single fill.
    private func flakes(of depth: Depth, layer: Int, at time: Double, in size: CGSize) -> Path {
        var path = Path()
        let margin = depth.radius.upperBound * 2
        let travel = size.height + margin * 2

        for index in 0..<Int(Double(depth.count) * density) {
            let seed = layer * 1000 + index
            let fallen = (noise(seed, 1) * travel + time * depth.fall).truncatingRemainder(dividingBy: travel)
            let sway = sin(time * (0.5 + noise(seed, 2)) + noise(seed, 3) * 2 * .pi) * depth.sway
            let radius = depth.radius.lowerBound + noise(seed, 4) * (depth.radius.upperBound - depth.radius.lowerBound)

            path.addEllipse(in: CGRect(
                x: noise(seed, 5) * size.width + sway - radius,
                y: fallen - margin - radius,
                width: radius * 2,
                height: radius * 2
            ))
        }
        return path
    }

    /// A repeatable pseudo-random value in 0..<1 for one flake and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct SnowfallBackgroundDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.07, green: 0.11, blue: 0.27), Color(red: 0.3, green: 0.4, blue: 0.6)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            SnowfallBackground()

            VStack(spacing: 10) {
                Image(systemName: "snowflake")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("First Snow")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    SnowfallBackgroundDemo()
}
```

## Starfield Background

Stars streaking toward the viewer with a simple perspective projection.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/StarfieldBackground/StarfieldBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Stars rushing toward the viewer, each one a streak along its line of flight.
///
/// With Reduce Motion on, it shows a still field of dots.
struct StarfieldBackground: View {
    var color: Color = .white
    var count: Int = 320
    /// Depth covered per second, where 1 is the whole way from the horizon to the viewer.
    var speed: Double = 0.22

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(paused: reduceMotion)) { timeline in
            Canvas { context, size in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed
                let center = CGPoint(x: size.width / 2, y: size.height / 2)
                let focalLength = max(size.width, size.height) * 0.12
                let trail = reduceMotion ? 0.004 : 0.04

                for index in 0..<count {
                    let cycle = noise(index, 3) + time
                    let depth = max(1 - (cycle - floor(cycle)), 0.02)
                    let angle = noise(index, 1) * 2 * .pi
                    let spread = (0.15 + noise(index, 2) * 1.25) * focalLength

                    func point(atDepth depth: Double) -> CGPoint {
                        CGPoint(
                            x: center.x + cos(angle) * spread / depth,
                            y: center.y + sin(angle) * spread / depth
                        )
                    }

                    var streak = Path()
                    streak.move(to: point(atDepth: min(depth + trail, 1)))
                    streak.addLine(to: point(atDepth: depth))

                    let closeness = 1 - depth
                    context.stroke(
                        streak,
                        with: .color(color.opacity(min(0.15 + closeness * 1.3, 1))),
                        style: StrokeStyle(lineWidth: 0.6 + closeness * 2.2, lineCap: .round)
                    )
                }
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    /// A repeatable pseudo-random value in 0..<1 for one star and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct StarfieldBackgroundDemo: View {
    var body: some View {
        ZStack {
            RadialGradient(
                colors: [Color(red: 0.1, green: 0.1, blue: 0.3), .black],
                center: .center,
                startRadius: 0,
                endRadius: 480
            )
            .ignoresSafeArea()

            StarfieldBackground()

            VStack(spacing: 10) {
                Image(systemName: "sparkles")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("Warp Speed")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
            .shadow(color: .black.opacity(0.7), radius: 12)
        }
    }
}

#Preview {
    StarfieldBackgroundDemo()
}
```

## Synthwave Grid Background

A retro perspective grid that scrolls under a gradient sky with a striped sun.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/SynthwaveGridBackground/SynthwaveGridBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SynthwaveGridBackgroundMath {
    /// Where the horizontal lines sit, from 0 at the horizon to 1 at the bottom edge.
    ///
    /// Each line reaches the next one's place as `phase` goes from 0 to 1, so the motion loops.
    static func horizontalLines(phase: Double, count: Int) -> [Double] {
        guard count > 0, phase.isFinite else { return [] }
        let lines = min(count, 128)
        let wrapped = phase - phase.rounded(.down)
        return (0..<lines).map { pow((Double($0) + wrapped) / Double(lines), 2.4) }
    }
}

/// A retro perspective grid scrolling under a gradient sky with a striped sun.
///
/// With Reduce Motion on, the grid stops moving.
struct SynthwaveGridBackground: View {
    var lineColor: Color = .cyan
    var skyColors: [Color] = [
        Color(red: 0.07, green: 0.03, blue: 0.2),
        Color(red: 0.42, green: 0.08, blue: 0.5),
        Color(red: 0.95, green: 0.25, blue: 0.5),
    ]
    var lineCount = 14
    var speed = 0.5

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { timeline in
            Canvas { context, size in
                draw(in: &context, size: size, phase: reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate * speed)
            }
        }
        .ignoresSafeArea()
        .accessibilityHidden(true)
    }

    private func draw(in context: inout GraphicsContext, size: CGSize, phase: Double) {
        guard size.width > 0, size.height > 0 else { return }
        let horizon = size.height * 0.58
        let center = size.width / 2

        context.fill(
            Path(CGRect(origin: .zero, size: CGSize(width: size.width, height: horizon))),
            with: .linearGradient(Gradient(colors: skyColors), startPoint: .zero, endPoint: CGPoint(x: 0, y: horizon))
        )
        drawSun(in: context, center: CGPoint(x: center, y: horizon - size.width * 0.14), radius: size.width * 0.3, horizon: horizon)

        let ground = CGRect(x: 0, y: horizon, width: size.width, height: size.height - horizon)
        context.fill(Path(ground), with: .color(Color(red: 0.05, green: 0.02, blue: 0.14)))

        var grid = Path()
        let spacing = size.width / 4
        for column in -12...12 {
            grid.move(to: CGPoint(x: center + Double(column) * spacing * 0.14, y: horizon))
            grid.addLine(to: CGPoint(x: center + Double(column) * spacing, y: size.height))
        }
        for line in SynthwaveGridBackgroundMath.horizontalLines(phase: phase, count: lineCount) {
            let y = horizon + ground.height * line
            grid.move(to: CGPoint(x: 0, y: y))
            grid.addLine(to: CGPoint(x: size.width, y: y))
        }

        context.stroke(grid, with: .color(lineColor.opacity(0.25)), lineWidth: 5)
        context.stroke(grid, with: .color(lineColor), lineWidth: 1.5)
    }

    private func drawSun(in context: GraphicsContext, center: CGPoint, radius: Double, horizon: Double) {
        var bands = Path()
        var y = center.y - radius
        var gap = 0.0
        // The stripes open up toward the bottom of the sun.
        while y < horizon, radius > 0 {
            let height = max(radius * 0.22 - gap * 0.7, radius * 0.05)
            bands.addRect(CGRect(x: center.x - radius, y: y, width: radius * 2, height: height))
            gap = radius * 0.03 + max(0, y - center.y) * 0.1
            y += height + gap
        }

        var clipped = context
        clipped.clip(to: bands)
        clipped.fill(
            Path(ellipseIn: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)),
            with: .linearGradient(
                Gradient(colors: [.yellow, .orange, .pink]),
                startPoint: CGPoint(x: center.x, y: center.y - radius),
                endPoint: CGPoint(x: center.x, y: center.y + radius)
            )
        )
    }
}

// MARK: - Demo

struct SynthwaveGridBackgroundDemo: View {
    var body: some View {
        ZStack {
            SynthwaveGridBackground()

            Text("NIGHT DRIVE")
                .font(.system(.largeTitle, design: .rounded, weight: .black))
                .foregroundStyle(.white)
                .shadow(color: .pink, radius: 12)
                .frame(maxHeight: .infinity, alignment: .top)
                .padding(.top, 72)
        }
    }
}

#Preview {
    SynthwaveGridBackgroundDemo()
}
```

## Waves Background

Layered waves animated with a custom animatable Shape.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/WavesBackground/WavesBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Layered waves, each one an animatable `Shape` driven by a single phase.
///
/// With Reduce Motion on, the waves hold still.
struct WavesBackground: View {
    /// One wave per color, from back to front.
    var colors: [Color] = [.teal, .cyan, .blue, .indigo]
    var amplitude: Double = 26
    /// Seconds for the slowest wave to complete one cycle.
    var period: Double = 7

    @State private var phase = 0.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    nonisolated private struct WaveLayer: Shape {
        var phase: Double
        var baseline: Double
        var amplitude: Double
        var waves: Double

        var animatableData: Double {
            get { phase }
            set { phase = newValue }
        }

        func path(in rect: CGRect) -> Path {
            var path = Path()
            path.move(to: CGPoint(x: rect.minX, y: rect.maxY))

            for x in stride(from: rect.minX, through: rect.maxX + 4, by: 4) {
                let angle = x / max(rect.width, 1) * waves * 2 * .pi
                let swell = sin(angle + phase) + 0.35 * sin(angle * 2 + phase * 2)
                path.addLine(to: CGPoint(x: x, y: rect.minY + rect.height * baseline + swell * amplitude))
            }

            path.addLine(to: CGPoint(x: rect.maxX + 4, y: rect.maxY))
            path.closeSubpath()
            return path
        }
    }

    var body: some View {
        ZStack {
            ForEach(colors.indices, id: \.self) { index in
                // A whole number of cycles per loop, so the repeat has no visible seam.
                let cycles = Double(index % 3 + 1) * (index.isMultiple(of: 2) ? 1 : -1)

                WaveLayer(
                    phase: phase * cycles + Double(index),
                    baseline: 0.45 + 0.12 * Double(index),
                    amplitude: amplitude * (1 - 0.1 * Double(index)),
                    waves: 1 + 0.5 * Double(index % 2 + 1)
                )
                .fill(colors[index].opacity(0.85))
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
        .task(id: reduceMotion) { updateMotion() }
    }

    private func updateMotion() {
        if reduceMotion {
            withTransaction(\.disablesAnimations, true) { phase = 0 }
        } else {
            withAnimation(.linear(duration: period).repeatForever(autoreverses: false)) {
                phase = 2 * .pi
            }
        }
    }
}

// MARK: - Demo

struct WavesBackgroundDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange, .pink, .purple], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            WavesBackground()

            VStack(spacing: 10) {
                Image(systemName: "sun.horizon.fill")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("High Tide")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
            .frame(maxHeight: .infinity, alignment: .top)
            .padding(.top, 150)
        }
    }
}

#Preview {
    WavesBackgroundDemo()
}
```

## Weather Effects Background

An animated sky for seven kinds of weather, with a turning sun, twinkling stars, drifting clouds, rain with splashes, lightning, swaying snow and fog, that fades from one to the next.

Category: Backgrounds. Minimum: iOS 18.0. Path: Components/Backgrounds/WeatherEffectsBackground/WeatherEffectsBackground.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An animated sky for a kind of weather: sun, stars, clouds, rain, storm, snow or fog.
///
/// Changing ``weather`` fades the sky and its effects into the new ones. Lightning follows a
/// fixed schedule of at most two flashes every few seconds, never more than three a second.
/// With Reduce Motion on, everything holds still and lightning never flashes. The sun sits in
/// the top trailing corner, so it moves to the left in a right-to-left layout.
///
/// It draws behind content, ignores the safe area and takes no touches, and VoiceOver skips it.
struct WeatherEffectsBackground: View {
    /// The weather to draw.
    var weather: WeatherEffectsBackgroundWeather

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// The weather fading out after a change, drawn under the new one until it is gone.
    @State private var leaving: WeatherEffectsBackgroundWeather?
    /// How far the change has gone, from 0 when it starts to 1 when only the new weather shows.
    @State private var arrival: Double = 1
    /// Counts the changes, so the end of an earlier fade does not clear a later one.
    @State private var change = 0

    private let fade: Animation = .easeInOut(duration: 1)

    var body: some View {
        ZStack {
            LinearGradient(colors: weather.skyColors, startPoint: .top, endPoint: .bottom)
                .animation(fade, value: weather)

            // Each weather keeps its own clock, so the effects that leave go on moving while they fade.
            if let leaving {
                effects(of: leaving)
                    .opacity(1 - arrival)
            }
            effects(of: weather)
                .opacity(arrival)
        }
        .onChange(of: weather) { previous, _ in
            change += 1
            let current = change
            leaving = previous
            arrival = 0
            withAnimation(fade) {
                arrival = 1
            } completion: {
                if change == current { leaving = nil }
            }
        }
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }
}

/// A kind of weather the background can draw.
nonisolated enum WeatherEffectsBackgroundWeather: String, CaseIterable, Sendable {
    case clearDay, clearNight, cloudy, rain, thunderstorm, snow, fog

    /// The name of the weather, for a label next to it.
    var title: LocalizedStringResource {
        switch self {
        case .clearDay: "Clear"
        case .clearNight: "Clear Night"
        case .cloudy: "Cloudy"
        case .rain: "Rain"
        case .thunderstorm: "Thunderstorm"
        case .snow: "Snow"
        case .fog: "Fog"
        }
    }

    /// Falling rain and snow need every frame; slow clouds, fog, the sun and the stars do with half.
    fileprivate var frameInterval: Double {
        switch self {
        case .rain, .thunderstorm, .snow: 1.0 / 60.0
        case .clearDay, .clearNight, .cloudy, .fog: 1.0 / 30.0
        }
    }

    fileprivate var skyColors: [Color] {
        switch self {
        case .clearDay: [Color(red: 0.11, green: 0.38, blue: 0.80), Color(red: 0.46, green: 0.72, blue: 0.96)]
        case .clearNight: [Color(red: 0.02, green: 0.03, blue: 0.13), Color(red: 0.10, green: 0.13, blue: 0.34)]
        case .cloudy: [Color(red: 0.33, green: 0.40, blue: 0.52), Color(red: 0.62, green: 0.68, blue: 0.76)]
        case .rain: [Color(red: 0.14, green: 0.19, blue: 0.27), Color(red: 0.33, green: 0.40, blue: 0.49)]
        case .thunderstorm: [Color(red: 0.06, green: 0.07, blue: 0.13), Color(red: 0.20, green: 0.22, blue: 0.34)]
        case .snow: [Color(red: 0.36, green: 0.44, blue: 0.58), Color(red: 0.70, green: 0.76, blue: 0.85)]
        case .fog: [Color(red: 0.46, green: 0.49, blue: 0.56), Color(red: 0.70, green: 0.72, blue: 0.75)]
        }
    }
}

// MARK: - Math

/// The timing of the effects: where a moving thing wraps around, and when lightning flashes.
nonisolated enum WeatherEffectsBackgroundMath {
    /// The seconds after which the lightning schedule repeats.
    static let lightningCycle: Double = 6

    /// A position moved back inside `0..<travel`, so what leaves one edge comes back at the other.
    static func wrap(_ position: Double, over travel: Double) -> Double {
        guard travel > 0 else { return 0 }
        let remainder = position.truncatingRemainder(dividingBy: travel)
        guard remainder < 0 else { return remainder }
        // A tiny negative remainder rounds up to `travel` itself, which belongs at the start.
        let wrapped = remainder + travel
        return wrapped < travel ? wrapped : 0
    }

    /// The brightness of the lightning at a moment, from 0 when dark to 1 at the peak of a flash.
    static func flash(at time: Double) -> Double {
        let moment = wrap(time, over: lightningCycle)
        for strike in strikes where moment >= strike.start && moment < strike.start + strike.duration {
            return sin(.pi * (moment - strike.start) / strike.duration)
        }
        return 0
    }

    /// Two strikes close together, as lightning often comes, early in each cycle.
    private static let strikes: [(start: Double, duration: Double)] = [(0.4, 0.18), (0.75, 0.22)]
}

extension WeatherEffectsBackground {
    private func effects(of weather: WeatherEffectsBackgroundWeather) -> some View {
        TimelineView(.animation(minimumInterval: weather.frameInterval, paused: reduceMotion)) { timeline in
            WeatherEffectsBackgroundLayers(
                weather: weather,
                time: reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate,
                flashes: !reduceMotion
            )
        }
        .id(weather)
    }
}

// MARK: - Layers

/// The effects of one weather at one moment.
private struct WeatherEffectsBackgroundLayers: View {
    let weather: WeatherEffectsBackgroundWeather
    let time: Double
    let flashes: Bool

    var body: some View {
        ZStack {
            switch weather {
            case .clearDay:
                WeatherEffectsBackgroundSun(time: time)
            case .clearNight:
                canvas { WeatherEffectsBackgroundStars.draw(in: &$0, size: $1, time: time) }
            case .cloudy:
                canvas { WeatherEffectsBackgroundClouds.draw(in: &$0, size: $1, time: time, color: .white, opacity: 0.5) }
            case .rain:
                canvas { WeatherEffectsBackgroundClouds.draw(in: &$0, size: $1, time: time, color: .white, opacity: 0.25) }
                canvas { WeatherEffectsBackgroundRain.draw(in: &$0, size: $1, time: time, drops: 110) }
            case .thunderstorm:
                canvas { WeatherEffectsBackgroundClouds.draw(in: &$0, size: $1, time: time, color: .black, opacity: 0.5) }
                if flashes {
                    canvas { WeatherEffectsBackgroundLightning.draw(in: &$0, size: $1, time: time) }
                }
                canvas { WeatherEffectsBackgroundRain.draw(in: &$0, size: $1, time: time, drops: 170) }
            case .snow:
                canvas { WeatherEffectsBackgroundSnow.draw(in: &$0, size: $1, time: time) }
            case .fog:
                canvas { WeatherEffectsBackgroundFog.draw(in: &$0, size: $1, time: time) }
            }
        }
    }

    private func canvas(_ draw: @escaping (inout GraphicsContext, CGSize) -> Void) -> some View {
        Canvas { context, size in draw(&context, size) }
    }
}

/// The property of a particle a pseudo-random value decides.
nonisolated private enum WeatherEffectsBackgroundTrait: Double {
    case x = 1, y, size, speed, phase, offset, extra
}

/// A repeatable pseudo-random value in 0..<1 for one particle and one of its properties.
nonisolated private func weatherEffectsBackgroundNoise(_ index: Int, _ trait: WeatherEffectsBackgroundTrait) -> Double {
    let value = sin(Double(index) * 127.1 + trait.rawValue * 311.7) * 43_758.5453
    return value - floor(value)
}

// MARK: - Sun

/// A glow in the top trailing corner with slow rays turning around it.
private struct WeatherEffectsBackgroundSun: View {
    let time: Double

    private let diameter: CGFloat = 520

    var body: some View {
        ZStack(alignment: .topTrailing) {
            Color.clear

            Canvas { context, size in
                let center = CGPoint(x: size.width / 2, y: size.height / 2)
                let radius = size.width / 2
                let rays = 14

                context.drawLayer { rayContext in
                    rayContext.addFilter(.blur(radius: 12))
                    rayContext.translateBy(x: center.x, y: center.y)
                    rayContext.rotate(by: .radians(time * 0.05))
                    for ray in 0..<rays {
                        let angle = Double(ray) / Double(rays) * 2 * .pi
                        let spread = 0.07 + weatherEffectsBackgroundNoise(ray, .size) * 0.05
                        let length = radius * (0.7 + weatherEffectsBackgroundNoise(ray, .extra) * 0.3)
                        var wedge = Path()
                        wedge.move(to: .zero)
                        wedge.addLine(to: CGPoint(x: cos(angle - spread) * length, y: sin(angle - spread) * length))
                        wedge.addLine(to: CGPoint(x: cos(angle + spread) * length, y: sin(angle + spread) * length))
                        wedge.closeSubpath()
                        let shimmer = 0.10 + 0.06 * sin(time * 0.8 + Double(ray))
                        rayContext.fill(wedge, with: .color(.white.opacity(shimmer)))
                    }
                }

                context.fill(
                    Path(ellipseIn: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)),
                    with: .radialGradient(
                        Gradient(colors: [.white.opacity(0.9), Color(red: 1, green: 0.93, blue: 0.7).opacity(0.45), .clear]),
                        center: center,
                        startRadius: 0,
                        endRadius: radius * 0.56
                    )
                )
            }
            .frame(width: diameter, height: diameter)
            .offset(x: diameter * 0.32, y: -diameter * 0.32)
        }
    }
}

// MARK: - Stars

nonisolated private enum WeatherEffectsBackgroundStars {
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double) {
        for index in 0..<120 {
            let x = weatherEffectsBackgroundNoise(index, .x) * size.width
            let y = weatherEffectsBackgroundNoise(index, .y) * size.height * 0.7
            let radius = 0.5 + weatherEffectsBackgroundNoise(index, .size) * 1.3
            let twinkle = 0.55 + 0.45 * sin(time * (0.8 + weatherEffectsBackgroundNoise(index, .speed) * 1.6) + Double(index))
            let star = Path(ellipseIn: CGRect(x: x - radius, y: y - radius, width: radius * 2, height: radius * 2))
            context.fill(star, with: .color(.white.opacity(twinkle)))
        }
    }
}

// MARK: - Clouds

nonisolated private enum WeatherEffectsBackgroundClouds {
    /// The soft ellipses that make up one cloud.
    private static let puffs = 4

    /// Soft clouds in three bands, the higher ones slower, drifting to the right in any layout.
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double, color: Color, opacity: Double) {
        let cloudWidth = size.width * 0.9
        context.drawLayer { layer in
            layer.addFilter(.blur(radius: 28))
            for index in 0..<7 {
                let band = Double(index % 3)
                let speed = 8 + band * 7
                let travel = size.width + cloudWidth
                let x = WeatherEffectsBackgroundMath.wrap(
                    weatherEffectsBackgroundNoise(index, .x) * travel + time * speed,
                    over: travel
                ) - cloudWidth
                let y = size.height * (0.05 + band * 0.12) + weatherEffectsBackgroundNoise(index, .y) * 40
                var cloud = Path()
                for puff in 0..<puffs {
                    let seed = index * puffs + puff
                    let puffWidth = cloudWidth * (0.35 + weatherEffectsBackgroundNoise(seed, .size) * 0.25)
                    let puffX = x + cloudWidth * Double(puff) * 0.18
                    let puffY = y + weatherEffectsBackgroundNoise(seed, .offset) * 36 - 18
                    cloud.addEllipse(in: CGRect(x: puffX, y: puffY, width: puffWidth, height: puffWidth * 0.42))
                }
                layer.fill(cloud, with: .color(color.opacity(opacity)))
            }
        }
    }
}

// MARK: - Rain

nonisolated private enum WeatherEffectsBackgroundRain {
    /// How far drops look: their length and speed against the near ones.
    private static let farDepth = 0.6

    /// The part of each splash's cycle in which it is seen spreading.
    private static let splashTime = 0.3

    /// Streaks in two depths, the near ones longer and faster, and splashes where they land.
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double, drops: Int) {
        var near = Path()
        var far = Path()
        let travel = size.height + 60

        for index in 0..<drops {
            let isNear = index % 3 == 0
            let depth: Double = isNear ? 1 : farDepth
            let y = WeatherEffectsBackgroundMath.wrap(
                weatherEffectsBackgroundNoise(index, .y) * travel + time * 700 * depth,
                over: travel
            ) - 30
            let x = weatherEffectsBackgroundNoise(index, .x) * (size.width + 40) - 20
            let length = 18 * depth
            var streak = Path()
            streak.move(to: CGPoint(x: x, y: y))
            streak.addLine(to: CGPoint(x: x - length * 0.15, y: y + length))
            if isNear { near.addPath(streak) } else { far.addPath(streak) }
        }
        context.stroke(far, with: .color(.white.opacity(0.22)), lineWidth: 1)
        context.stroke(near, with: .color(.white.opacity(0.5)), lineWidth: 1.4)

        for index in 0..<(drops / 4) {
            let phase = WeatherEffectsBackgroundMath.wrap(time * 1.6 + weatherEffectsBackgroundNoise(index, .phase), over: 1)
            guard phase < splashTime else { continue }
            let grown = phase / splashTime
            let x = weatherEffectsBackgroundNoise(index, .offset) * size.width
            let y = size.height - 8 - weatherEffectsBackgroundNoise(index, .extra) * 70
            let width = 4 + grown * 14
            let splash = Path(ellipseIn: CGRect(x: x - width / 2, y: y - width * 0.12, width: width, height: width * 0.24))
            context.stroke(splash, with: .color(.white.opacity(0.4 * (1 - grown))), lineWidth: 1)
        }
    }
}

// MARK: - Lightning

nonisolated private enum WeatherEffectsBackgroundLightning {
    /// The width of the blue glow around a bolt, and how far it blurs.
    private static let glowWidth: CGFloat = 6

    /// A flash over the whole sky and, at its brightest, a jagged bolt from the top.
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double) {
        let flash = WeatherEffectsBackgroundMath.flash(at: time)
        guard flash > 0 else { return }
        context.fill(Path(CGRect(origin: .zero, size: size)), with: .color(.white.opacity(flash * 0.45)))

        guard flash > 0.3 else { return }
        let cycle = Int(floor(time / WeatherEffectsBackgroundMath.lightningCycle))
        var x = size.width * (0.2 + weatherEffectsBackgroundNoise(cycle, .x) * 0.6)
        var y: Double = 0
        var bolt = Path()
        bolt.move(to: CGPoint(x: x, y: y))
        for step in 0..<9 {
            x += (weatherEffectsBackgroundNoise(cycle * 10 + step, .offset) - 0.5) * 60
            y += size.height * 0.065
            bolt.addLine(to: CGPoint(x: x, y: y))
        }
        context.drawLayer { glow in
            glow.addFilter(.blur(radius: glowWidth))
            glow.stroke(bolt, with: .color(Color(red: 0.75, green: 0.8, blue: 1).opacity(flash)), lineWidth: glowWidth)
        }
        context.stroke(bolt, with: .color(.white.opacity(flash)), lineWidth: 2)
    }
}

// MARK: - Snow

nonisolated private enum WeatherEffectsBackgroundSnow {
    /// Flakes in two depths that fall slowly and sway from side to side.
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double) {
        var near = Path()
        var far = Path()
        let travel = size.height + 20

        for index in 0..<130 {
            let isNear = index % 3 == 0
            let depth: Double = isNear ? 1 : 0.5
            let y = WeatherEffectsBackgroundMath.wrap(
                weatherEffectsBackgroundNoise(index, .y) * travel + time * 50 * depth,
                over: travel
            ) - 10
            let sway = sin(time * (0.5 + weatherEffectsBackgroundNoise(index, .speed)) + weatherEffectsBackgroundNoise(index, .phase) * 2 * .pi) * 14 * depth
            let x = weatherEffectsBackgroundNoise(index, .x) * size.width + sway
            let radius = (1.3 + weatherEffectsBackgroundNoise(index, .size) * 2) * depth
            let flake = Path(ellipseIn: CGRect(x: x - radius, y: y - radius, width: radius * 2, height: radius * 2))
            if isNear { near.addPath(flake) } else { far.addPath(flake) }
        }
        context.fill(far, with: .color(.white.opacity(0.55)))
        context.fill(near, with: .color(.white.opacity(0.9)))
    }
}

// MARK: - Fog

nonisolated private enum WeatherEffectsBackgroundFog {
    /// Wide, heavily blurred bands that drift slowly across the lower sky.
    static func draw(in context: inout GraphicsContext, size: CGSize, time: Double) {
        let bandWidth = size.width * 1.6
        context.drawLayer { layer in
            layer.addFilter(.blur(radius: 30))
            for index in 0..<8 {
                let travel = size.width + bandWidth
                let direction: Double = index.isMultiple(of: 2) ? 1 : -1
                let x = WeatherEffectsBackgroundMath.wrap(
                    weatherEffectsBackgroundNoise(index, .x) * travel + time * (5 + Double(index) * 2) * direction,
                    over: travel
                ) - bandWidth
                let y = size.height * (0.18 + Double(index) * 0.1)
                let band = Path(ellipseIn: CGRect(x: x, y: y, width: bandWidth, height: size.height * 0.14))
                layer.fill(band, with: .color(.white.opacity(0.5)))
            }
        }
    }
}

// MARK: - Demo

struct WeatherEffectsBackgroundDemo: View {
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @State private var weather = WeatherEffectsBackgroundWeather.clearDay

    /// A choice from the menu also stops the demo, which would otherwise move on from it.
    private var chosenWeather: Binding<WeatherEffectsBackgroundWeather> {
        Binding {
            weather
        } set: { choice in
            isAutoPlaying = false
            weather = choice
        }
    }

    var body: some View {
        ZStack {
            WeatherEffectsBackground(weather: weather)

            // The background takes no touches, so this layer catches the one that stops the demo.
            Color.clear
                .contentShape(.rect)
                .ignoresSafeArea()
        }
        .overlay(alignment: .bottom) {
            Picker("Weather", selection: chosenWeather) {
                ForEach(WeatherEffectsBackgroundWeather.allCases, id: \.self) { weather in
                    Text(weather.title).tag(weather)
                }
            }
            .pickerStyle(.menu)
            .tint(.white)
            .padding(.horizontal, 6)
            .background(.ultraThinMaterial, in: .capsule)
            .environment(\.colorScheme, .dark)
            .padding(.bottom, 40)
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task {
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.8))
                guard !Task.isCancelled, isAutoPlaying else { return }
                let all = WeatherEffectsBackgroundWeather.allCases
                let next = ((all.firstIndex(of: weather) ?? 0) + 1) % all.count
                weather = all[next]
            }
        }
    }
}

#Preview {
    WeatherEffectsBackgroundDemo()
}
```

## Async Action Button

A button that runs an async action, swaps its label for a spinner in the label color without changing width and ignores taps until the action ends.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/AsyncActionButton/AsyncActionButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Knows whether the action is running, so a second tap while it runs does nothing.
struct AsyncActionButtonRun: Equatable {
    private(set) var isRunning = false

    /// Returns `false`, and changes nothing, when the action is already running.
    mutating func start() -> Bool {
        guard !isRunning else { return false }
        isRunning = true
        return true
    }

    mutating func finish() {
        isRunning = false
    }
}

/// A button that runs an async action and shows a spinner in place of its label
/// until the action ends. It keeps its width, works with any button style, and
/// ignores taps while the action runs instead of looking disabled.
///
/// Leaving the screen cancels the action. The swap is a short crossfade, so it
/// needs nothing different with Reduce Motion on.
struct AsyncActionButton<Label: View>: View {
    let action: @MainActor () async -> Void
    let label: Label

    @State private var run = AsyncActionButtonRun()
    @State private var runID: UUID?

    init(action: @escaping @MainActor () async -> Void, @ViewBuilder label: () -> Label) {
        self.action = action
        self.label = label()
    }

    var body: some View {
        Button {
            guard run.start() else { return }
            runID = UUID()
        } label: {
            label
                .opacity(run.isRunning ? 0 : 1)
                .overlay {
                    if run.isRunning {
                        AsyncActionButtonSpinner()
                            .transition(.opacity)
                    }
                }
                .animation(.easeInOut(duration: 0.15), value: run)
        }
        .accessibilityValue(run.isRunning ? Text("In progress") : Text(""))
        .task(id: runID) {
            guard runID != nil else { return }
            await action()
            run.finish()
            runID = nil
        }
    }
}

/// Drawn with the label's foreground style, which a `ProgressView` does not
/// take, so it is white on a prominent button and tinted on a bordered one.
private struct AsyncActionButtonSpinner: View {
    @ScaledMetric(relativeTo: .body) private var size = 18.0

    var body: some View {
        TimelineView(.animation) { context in
            let turn = context.date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: 1)
            Circle()
                .trim(from: 0.15, to: 1)
                .stroke(style: StrokeStyle(lineWidth: size / 7, lineCap: .round))
                .frame(width: size, height: size)
                .rotationEffect(.degrees(turn * 360))
        }
        .accessibilityHidden(true)
    }
}

extension AsyncActionButton where Label == Text {
    init(_ title: LocalizedStringResource, action: @escaping @MainActor () async -> Void) {
        self.init(action: action) { Text(title) }
    }
}

extension AsyncActionButton where Label == SwiftUI.Label<Text, Image> {
    init(_ title: LocalizedStringResource, systemImage: String, action: @escaping @MainActor () async -> Void) {
        self.init(action: action) { SwiftUI.Label { Text(title) } icon: { Image(systemName: systemImage) } }
    }
}

// MARK: - Demo

struct AsyncActionButtonDemo: View {
    @State private var saves = 0
    @State private var syncs = 0

    var body: some View {
        VStack(spacing: 24) {
            VStack(spacing: 6) {
                Text("Edit Profile")
                    .font(.largeTitle.bold())
                Text("Saves: \(saves) · Syncs: \(syncs)")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.numericText())
            }

            AsyncActionButton {
                try? await Task.sleep(for: .seconds(1.5))
                saves += 1
            } label: {
                Text("Save Changes")
                    .frame(maxWidth: .infinity)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)

            HStack(spacing: 12) {
                AsyncActionButton("Sync", systemImage: "arrow.triangle.2.circlepath") {
                    try? await Task.sleep(for: .seconds(1))
                    syncs += 1
                }
                .buttonStyle(.bordered)

                AsyncActionButton("Send Invite") {
                    try? await Task.sleep(for: .seconds(2))
                }
                .buttonStyle(.bordered)
                .tint(.orange)
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    AsyncActionButtonDemo()
}
```

## Badged Icon Button

An icon button with a count badge on its corner that pops in, rolls its number, caps at 99+ and bounces the icon when the count goes up.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/BadgedIconButton/BadgedIconButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum BadgedIconButtonBadge {
    /// The text of the badge: none at zero, and `99+` past the limit.
    static func text(for count: Int, limit: Int = 99) -> String? {
        guard count > 0 else { return nil }
        return count > limit ? "\(limit)+" : "\(count)"
    }
}

/// An icon button, like a bell or a cart, with a count in a badge on its corner.
/// The badge pops in when the count appears, its number rolls as it changes,
/// and the icon bounces when the count goes up.
///
/// With Reduce Motion on, the badge fades and the icon stays still.
struct BadgedIconButton: View {
    let title: LocalizedStringResource
    let systemImage: String
    let count: Int
    var limit = 99
    var badgeColor: Color = .red
    let action: () -> Void

    @State private var bounces = 0
    @ScaledMetric(relativeTo: .title2) private var size = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var badgeText: String? {
        BadgedIconButtonBadge.text(for: count, limit: limit)
    }

    var body: some View {
        Button(action: action) {
            Image(systemName: systemImage)
                .font(.title2)
                .symbolEffect(.bounce, value: bounces)
                .frame(width: size, height: size)
                .overlay(alignment: .topTrailing) {
                    if let badgeText {
                        Text(badgeText)
                            .font(.caption2.bold())
                            .monospacedDigit()
                            .contentTransition(.numericText(value: Double(count)))
                            .foregroundStyle(BadgedIconButtonContrastingForeground(background: badgeColor))
                            .padding(.horizontal, 5)
                            .frame(minWidth: size * 0.42, minHeight: size * 0.42)
                            .background(badgeColor, in: .capsule)
                            .fixedSize()
                            .alignmentGuide(.top) { $0.height * 0.3 }
                            .alignmentGuide(.trailing) { $0.width * 0.7 }
                            .transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                    }
                }
                .contentShape(.rect)
        }
        .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.35, bounce: 0.5), value: count)
        .accessibilityLabel(title)
        .accessibilityValue(Text(verbatim: badgeText ?? ""))
        .onChange(of: count) { old, new in
            if new > old, !reduceMotion { bounces += 1 }
        }
    }
}

nonisolated struct BadgedIconButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct BadgedIconButtonDemo: View {
    @State private var notifications = 96
    @State private var messages = 2
    @State private var cartItems = 0
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 4) {
                Text("Inbox")
                    .font(.largeTitle.bold())
                    .lineLimit(1)
                    .minimumScaleFactor(0.6)
                Spacer()
                BadgedIconButton(title: "Messages", systemImage: "bubble.left", count: messages) {
                    messages = 0
                }
                BadgedIconButton(title: "Cart", systemImage: "cart", count: cartItems, badgeColor: .yellow) {
                    cartItems = 0
                }
                BadgedIconButton(title: "Notifications", systemImage: "bell", count: notifications) {
                    notifications = 0
                }
            }
            .padding(.horizontal, 20)
            .padding(.vertical, 12)

            Text("Tap an icon to clear its badge.")
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task {
            var step = 0
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled, isAutoPlaying else { return }
                switch step % 3 {
                case 0: notifications += 2
                case 1: cartItems += 1
                default: messages += 1
                }
                step += 1
            }
        }
    }
}

#Preview {
    BadgedIconButtonDemo()
}
```

## Button Variant Style

A button style with filled, tinted, outlined and plain variants that follows the control size, the disabled state and the destructive role.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ButtonVariantStyle/ButtonVariantStyle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A button style with four variants that reads its size, its enabled state and
/// its role from the environment, like the system styles: `.controlSize(.small)`
/// makes it small, `.disabled(true)` fades it, and a destructive role turns it red.
///
/// With Reduce Motion on, a press dims the button instead of shrinking it.
struct ButtonVariantStyle: ButtonStyle {
    enum Variant {
        case filled, tinted, outlined, plain
    }

    var variant: Variant = .filled
    var color: Color = .accentColor

    func makeBody(configuration: Configuration) -> some View {
        ButtonVariantStyleBody(
            configuration: configuration,
            variant: variant,
            color: configuration.role == .destructive ? .red : color
        )
    }
}

extension ButtonStyle where Self == ButtonVariantStyle {
    static func variant(_ variant: ButtonVariantStyle.Variant, color: Color = .accentColor) -> ButtonVariantStyle {
        ButtonVariantStyle(variant: variant, color: color)
    }
}

private struct ButtonVariantStyleBody: View {
    let configuration: ButtonStyleConfiguration
    let variant: ButtonVariantStyle.Variant
    let color: Color

    @Environment(\.controlSize) private var controlSize
    @Environment(\.isEnabled) private var isEnabled
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var metrics: (font: Font, horizontal: Double, vertical: Double, cornerRadius: Double) {
        switch controlSize {
        case .mini, .small: (.subheadline.weight(.semibold), 12, 7, 10)
        case .large, .extraLarge: (.title3.weight(.semibold), 24, 16, 16)
        default: (.body.weight(.semibold), 18, 12, 12)
        }
    }

    /// The small size is shorter than 44 points, so only its touch area grows.
    private var touchSlop: Double {
        controlSize == .mini || controlSize == .small ? 6 : 0
    }

    private var foreground: AnyShapeStyle {
        variant == .filled ? AnyShapeStyle(ButtonVariantStyleContrastingForeground(background: color)) : AnyShapeStyle(color)
    }

    var body: some View {
        let shape = RoundedRectangle(cornerRadius: metrics.cornerRadius, style: .continuous)
        let isPressed = configuration.isPressed

        configuration.label
            .font(metrics.font)
            .foregroundStyle(foreground)
            .padding(.horizontal, metrics.horizontal)
            .padding(.vertical, metrics.vertical)
            .background {
                switch variant {
                case .filled:
                    shape.fill(color).brightness(isPressed ? -0.08 : 0)
                case .tinted:
                    shape.fill(color.opacity(isPressed ? 0.25 : 0.15))
                case .outlined, .plain:
                    shape.fill(color.opacity(isPressed ? 0.12 : 0))
                }
            }
            .overlay {
                if variant == .outlined {
                    shape.strokeBorder(color, lineWidth: 1.5)
                }
            }
            .padding(.vertical, touchSlop)
            .contentShape(.rect)
            .padding(.vertical, -touchSlop)
            .scaleEffect(isPressed && !reduceMotion ? 0.96 : 1)
            .opacity(isEnabled ? (isPressed && reduceMotion ? 0.7 : 1) : 0.4)
            .animation(reduceMotion ? nil : .spring(duration: 0.25, bounce: 0.4), value: isPressed)
    }
}

nonisolated struct ButtonVariantStyleContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct ButtonVariantStyleDemo: View {
    @State private var controlSize = ControlSize.regular
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    private var rowLayout: AnyLayout {
        dynamicTypeSize.isAccessibilitySize ? AnyLayout(VStackLayout(spacing: 12)) : AnyLayout(HStackLayout(spacing: 12))
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 28) {
                Picker("Size", selection: $controlSize) {
                    Text("Small").tag(ControlSize.small)
                    Text("Medium").tag(ControlSize.regular)
                    Text("Large").tag(ControlSize.large)
                }
                .pickerStyle(.segmented)

                VStack(spacing: 16) {
                    Button {} label: {
                        Text("Continue").frame(maxWidth: .infinity)
                    }
                    .buttonStyle(.variant(.filled))

                    rowLayout {
                        Button("Save", systemImage: "bookmark") {}
                            .buttonStyle(.variant(.tinted))
                        Button("Share", systemImage: "square.and.arrow.up") {}
                            .buttonStyle(.variant(.outlined))
                    }

                    Button("Not Now") {}
                        .buttonStyle(.variant(.plain))

                    Divider()

                    rowLayout {
                        Button("Delete", role: .destructive) {}
                            .buttonStyle(.variant(.filled))
                        Button("Remove", role: .destructive) {}
                            .buttonStyle(.variant(.tinted))
                    }

                    rowLayout {
                        Button("Follow") {}
                            .buttonStyle(.variant(.filled, color: .orange))
                        Button("Sold Out") {}
                            .buttonStyle(.variant(.filled))
                            .disabled(true)
                    }
                }
                .controlSize(controlSize)
                .padding(20)
                .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 24, style: .continuous))
            }
            .padding(20)
            .animation(reduceMotion ? nil : .snappy, value: controlSize)
        }
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    ButtonVariantStyleDemo()
}
```

## Elastic Drag Button

A round button that stretches toward the finger and springs back on release.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ElasticDragButton/ElasticDragButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A round button that stretches toward your finger and springs back on release.
/// A press that does not travel counts as a tap.
///
/// With Reduce Motion on, the button stays in place and only dims while pressed.
struct ElasticDragButton: View {
    let systemImage: String
    let label: LocalizedStringResource
    var tint: Color = .indigo
    var reach: Double = 80
    let action: () -> Void

    @State private var pull = CGSize.zero
    @State private var stretch = 0.0
    @State private var angle = Angle.zero
    @GestureState private var isPressed = false
    @ScaledMetric(relativeTo: .largeTitle) private var diameter = 112.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let tapTolerance = 12.0

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    var body: some View {
        ZStack {
            Circle()
                .fill(tint.gradient)
                .scaleEffect(x: 1 + stretch, y: 1 - stretch * 0.45)
                .rotationEffect(angle)
                .shadow(color: tint.opacity(0.45), radius: 18, y: 10)

            Image(systemName: systemImage)
                .font(.largeTitle.bold())
                .foregroundStyle(ElasticDragButtonContrastingForeground(background: tint))
        }
        .frame(width: diameter, height: diameter)
        .offset(pull)
        .opacity(isPressed && reduceMotion ? 0.7 : 1)
        .contentShape(.circle)
        .gesture(drag)
        .onChange(of: isPressed) { _, pressed in
            guard !pressed else { return }
            withAnimation(.spring(duration: 0.6, bounce: 0.65)) {
                pull = .zero
                stretch = 0
            }
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(label)
        .accessibilityAddTraits(.isButton)
        .accessibilityAction { action() }
    }

    private var drag: some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($isPressed) { _, state, _ in state = true }
            .onChanged { value in
                guard !reduceMotion else { return }
                let distance = hypot(value.translation.width, value.translation.height)
                guard distance > 1 else { return }

                let eased = reach * (1 - exp(-distance / (reach * 2)))
                let width = value.translation.width * forward
                pull = CGSize(
                    width: width * eased / distance,
                    height: value.translation.height * eased / distance
                )
                stretch = eased / reach * 0.4
                angle = .radians(atan2(value.translation.height, width))
            }
            .onEnded { value in
                if hypot(value.translation.width, value.translation.height) < tapTolerance {
                    action()
                }
            }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct ElasticDragButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct ElasticDragButtonDemo: View {
    @State private var taps = 0

    var body: some View {
        ElasticDragButton(systemImage: "hand.point.up.left.fill", label: "Stretch") {
            taps += 1
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(alignment: .top) {
            VStack(spacing: 6) {
                Text("Pull me")
                    .font(.largeTitle.bold())
                Text(taps == 1 ? "1 tap" : "\(taps) taps")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .padding(.top, 72)
        }
        .background(
            LinearGradient(colors: [.indigo.opacity(0.14), .pink.opacity(0.12)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
    }
}

#Preview {
    ElasticDragButtonDemo()
}
```

## Emoji Reaction Picker

A long-press control that reveals a row of reaction emoji, magnifies the one under the finger and selects it on release.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/EmojiReactionPicker/EmojiReactionPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct EmojiReactionPickerOption: Identifiable, Equatable, Sendable {
    let emoji: String
    let name: LocalizedStringResource

    var id: String { emoji }

    static let defaults = [
        EmojiReactionPickerOption(emoji: "👍", name: "Like"),
        EmojiReactionPickerOption(emoji: "❤️", name: "Love"),
        EmojiReactionPickerOption(emoji: "😂", name: "Haha"),
        EmojiReactionPickerOption(emoji: "😮", name: "Wow"),
        EmojiReactionPickerOption(emoji: "😢", name: "Sad"),
    ]
}

enum EmojiReactionPickerMath {
    /// The cell under a horizontal position, clamped to the row. Nil when there is no row to hit.
    static func index(atX x: CGFloat, cellWidth: CGFloat, spacing: CGFloat, count: Int) -> Int? {
        guard count > 0, cellWidth > 0, x.isFinite else { return nil }
        let position = x / (cellWidth + max(spacing, 0))
        return Int(min(max(position, 0), CGFloat(count - 1)))
    }
}

/// A button that toggles the first reaction on tap and reveals every reaction on long press.
/// Slide along the row to magnify one and lift the finger to pick it.
///
/// The row opens above the button's leading edge. Reduce Motion replaces the magnification
/// with a highlight, and VoiceOver offers each reaction as an action.
struct EmojiReactionPicker: View {
    private enum Press: Equatable {
        case idle
        case active(location: CGPoint?)
    }

    @Binding var selection: EmojiReactionPickerOption?
    var options = EmojiReactionPickerOption.defaults
    var onSelect: (EmojiReactionPickerOption?) -> Void = { _ in }

    @GestureState private var press = Press.idle
    /// Measured from the row, which reads its own size under its text size cap.
    @State private var cellSize = 46.0
    @State private var triggerWidth: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let spacing = 6.0
    private let padding = 8.0
    private let gap = 12.0
    /// How far from the row the finger can drift before lifting it cancels.
    private let tolerance = 70.0

    private var isOpen: Bool { press != .idle && !options.isEmpty }

    private var highlighted: Int? {
        guard case .active(let location?) = press else { return nil }
        return index(at: location)
    }

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.28, bounce: 0.35)
    }

    var body: some View {
        trigger
            .contentShape(.capsule)
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { triggerWidth = $0 }
            .onTapGesture(perform: toggle)
            .gesture(longPressAndSlide)
            .overlay(alignment: .topLeading) {
                if isOpen {
                    row
                        .padding(.bottom, gap)
                        // A zero-height frame hangs the row above the button, whatever its height.
                        .frame(height: 0, alignment: .bottom)
                        .transition(reduceMotion ? .opacity : .scale(scale: 0.5, anchor: .bottomLeading).combined(with: .opacity))
                }
            }
            .animation(animation, value: isOpen)
            .animation(animation, value: highlighted)
            .sensoryFeedback(.selection, trigger: highlighted)
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Reaction")
            .accessibilityValue(selection?.name ?? "None")
            .accessibilityAddTraits(.isButton)
            .accessibilityAction(.default, toggle)
            .accessibilityActions {
                ForEach(options) { option in
                    Button(option.name) { choose(option) }
                }
            }
    }

    private var trigger: some View {
        HStack(spacing: 8) {
            if let selection {
                Text(selection.emoji)
                Text(selection.name)
            } else {
                Image(systemName: "hand.thumbsup")
                Text("React")
            }
        }
        .font(.headline)
        .foregroundStyle(selection == nil ? AnyShapeStyle(.secondary) : AnyShapeStyle(.primary))
        .padding(.horizontal, 18)
        .padding(.vertical, 12)
        .background(.quaternary, in: Capsule())
    }

    private var row: some View {
        EmojiReactionPickerRow(options: options, highlighted: highlighted, spacing: spacing, padding: padding)
            // The row cannot wrap under the finger, so it stops growing.
            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
            .fixedSize()
            .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { cellSize = $0 - padding * 2 }
    }

    private var longPressAndSlide: some Gesture {
        LongPressGesture(minimumDuration: 0.3)
            .sequenced(before: DragGesture(minimumDistance: 0))
            .updating($press) { value, state, _ in
                switch value {
                case .first(true): state = .active(location: nil)
                case .second(true, let drag): state = .active(location: drag?.location)
                default: state = .idle
                }
            }
            .onEnded { value in
                guard case .second(true, let drag?) = value,
                      let index = index(at: drag.location),
                      options.indices.contains(index) else { return }
                choose(options[index])
            }
    }

    /// Positions are relative to the button, and the row's first cell starts at its leading edge.
    private func index(at location: CGPoint) -> Int? {
        let rowHeight = cellSize + padding * 2
        guard location.y > -(gap + rowHeight + tolerance), location.y < cellSize + tolerance else { return nil }
        // Gestures report screen points, but the row mirrors in right-to-left layouts.
        let x = layoutDirection == .rightToLeft ? triggerWidth - location.x : location.x
        return EmojiReactionPickerMath.index(atX: x - padding, cellWidth: cellSize, spacing: spacing, count: options.count)
    }

    private func toggle() {
        guard let first = options.first else { return }
        let new = selection == nil ? first : nil
        selection = new
        onSelect(new)
    }

    private func choose(_ option: EmojiReactionPickerOption) {
        selection = option
        onSelect(option)
    }
}

private struct EmojiReactionPickerRow: View {
    let options: [EmojiReactionPickerOption]
    let highlighted: Int?
    let spacing: Double
    let padding: Double

    @ScaledMetric(relativeTo: .title) private var cellSize = 46.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: spacing) {
            ForEach(Array(options.enumerated()), id: \.offset) { index, option in
                let isHighlighted = index == highlighted

                Text(option.emoji)
                    .font(.title)
                    .frame(width: cellSize, height: cellSize)
                    .background {
                        if isHighlighted && reduceMotion { Circle().fill(.tint.opacity(0.3)) }
                    }
                    .scaleEffect(isHighlighted && !reduceMotion ? 1.55 : 1, anchor: .bottom)
                    .zIndex(isHighlighted ? 1 : 0)
            }
        }
        .padding(padding)
        .background(.regularMaterial, in: Capsule())
        .shadow(color: .black.opacity(0.18), radius: 14, y: 6)
    }
}

// MARK: - Demo

struct EmojiReactionPickerDemo: View {
    @State private var reaction: EmojiReactionPickerOption?

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            RoundedRectangle(cornerRadius: 22, style: .continuous)
                .fill(.linearGradient(colors: [.orange, .pink, .purple], startPoint: .topLeading, endPoint: .bottomTrailing))
                .frame(height: 280)
                .overlay {
                    Image(systemName: "sun.haze.fill")
                        .font(.system(.largeTitle, weight: .bold))
                        .foregroundStyle(.white)
                }
                .accessibilityHidden(true)

            Text("Sunset from the rooftop")
                .font(.title3.weight(.semibold))

            EmojiReactionPicker(selection: $reaction)
                .padding(.top, 72)
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    EmojiReactionPickerDemo()
}
```

## Expanding Search Button

A round magnifying glass button that opens into a search field.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ExpandingSearchButton/ExpandingSearchButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A round magnifying glass button that opens into a search field.
/// Closing it clears the text and dismisses the keyboard.
///
/// With Reduce Motion on, the field appears without animating.
struct ExpandingSearchButton: View {
    @Binding var text: String
    var prompt: LocalizedStringResource = "Search"
    var onSubmit: () -> Void = {}

    @State private var isExpanded = false
    @FocusState private var isFocused: Bool
    @ScaledMetric(relativeTo: .body) private var height = 54.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.25)
    }

    var body: some View {
        HStack(spacing: 0) {
            Button {
                open()
            } label: {
                Image(systemName: "magnifyingglass")
                    .font(.headline)
                    .frame(width: height, height: height)
                    .contentShape(.circle)
            }
            .buttonStyle(.plain)
            .accessibilityLabel("Search")

            if isExpanded {
                TextField(text: $text) { Text(prompt) }
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                    .focused($isFocused)
                    .submitLabel(.search)
                    .onSubmit(onSubmit)
                    .onAppear { isFocused = true }
                    .transition(.opacity)

                Button {
                    close()
                } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.title3)
                        .symbolRenderingMode(.hierarchical)
                        .frame(width: height, height: height)
                        .contentShape(.circle)
                }
                .buttonStyle(.plain)
                .accessibilityLabel("Close")
                .transition(.opacity)
            }
        }
        .frame(maxWidth: isExpanded ? .infinity : height)
        .background(.regularMaterial, in: .capsule)
        .overlay(Capsule().strokeBorder(.quaternary))
    }

    private func open() {
        if isExpanded {
            isFocused = true
        } else {
            withAnimation(animation) { isExpanded = true }
        }
    }

    private func close() {
        text = ""
        isFocused = false
        withAnimation(animation) { isExpanded = false }
    }
}

// MARK: - Demo

struct ExpandingSearchButtonDemo: View {
    private struct Row: Identifiable {
        let id: String
        let systemImage: String
    }

    @State private var text = ""

    private let rows = [
        Row(id: "Albums", systemImage: "square.stack.fill"),
        Row(id: "Artists", systemImage: "music.mic"),
        Row(id: "Playlists", systemImage: "music.note.list"),
        Row(id: "Podcasts", systemImage: "antenna.radiowaves.left.and.right"),
        Row(id: "Radio", systemImage: "dot.radiowaves.left.and.right"),
    ]

    private var visibleRows: [Row] {
        text.isEmpty ? rows : rows.filter { $0.id.localizedStandardContains(text) }
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 28) {
            HStack(spacing: 16) {
                Text("Library")
                    .font(.largeTitle.bold())
                    .fixedSize()
                ExpandingSearchButton(text: $text)
                    .frame(maxWidth: .infinity, alignment: .trailing)
            }

            VStack(alignment: .leading, spacing: 22) {
                ForEach(visibleRows) { row in
                    Label(row.id, systemImage: row.systemImage)
                        .font(.title3)
                }
            }

            if visibleRows.isEmpty {
                ContentUnavailableView.search(text: text)
            }

            Spacer(minLength: 0)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

#Preview {
    ExpandingSearchButtonDemo()
}
```

## Floating Action Menu

A plus button that rotates into a close icon and fans out its actions around it.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/FloatingActionMenu/FloatingActionMenu.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct FloatingActionMenuItem {
    let title: LocalizedStringResource
    let systemImage: String
    var tint: Color = .indigo
    let action: () -> Void
}

enum FloatingActionMenuMath {
    /// The offset of an item on an arc. Angles use screen coordinates: 180 is left and 270 is up.
    static func offset(index: Int, count: Int, radius: Double, startDegrees: Double, endDegrees: Double) -> CGSize {
        guard count > 0, (0..<count).contains(index) else { return .zero }
        let fraction = count == 1 ? 0.5 : Double(index) / Double(count - 1)
        let radians = (startDegrees + (endDegrees - startDegrees) * fraction) * .pi / 180
        let length = max(radius, 0)
        return CGSize(width: cos(radians) * length, height: sin(radians) * length)
    }

    /// The radius, grown when needed so that neighbouring items do not overlap, but not past `limit`.
    static func fittedRadius(_ radius: Double, itemSize: Double, count: Int, startDegrees: Double, endDegrees: Double, limit: Double = .infinity) -> Double {
        guard count > 1 else { return radius }
        let step = abs(endDegrees - startDegrees) / Double(count - 1) * .pi / 180
        let chordPerRadius = 2 * sin(step / 2)
        guard chordPerRadius > 0.01 else { return radius }
        return max(radius, min((itemSize + 6) / chordPerRadius, limit))
    }

    /// The largest radius that keeps every item at least `inset` away from the edges of `container`.
    static func radiusLimit(center: CGPoint, container: CGSize, inset: Double, count: Int, startDegrees: Double, endDegrees: Double) -> Double {
        (0..<count).reduce(.infinity) { limit, index in
            let unit = offset(index: index, count: count, radius: 1, startDegrees: startDegrees, endDegrees: endDegrees)
            return min(
                limit,
                reach(along: unit.width, before: center.x - inset, after: container.width - center.x - inset),
                reach(along: unit.height, before: center.y - inset, after: container.height - center.y - inset)
            )
        }
    }

    private static func reach(along direction: Double, before: Double, after: Double) -> Double {
        if direction < -0.001 { return before / -direction }
        if direction > 0.001 { return after / direction }
        return .infinity
    }
}

/// A plus button that turns into a close icon and fans out its actions around it.
///
/// The fan opens up and to the left by default, for a button in the bottom-trailing corner.
/// With more than four items it widens so they do not overlap, until it reaches the edge of the screen.
/// In the corner of a phone at the default text size, the default fan fits seven actions at 320 points
/// wide and nine at 393. Any more stay on screen but overlap, so use a list for longer menus.
/// With Reduce Motion on, the actions appear in place without moving.
struct FloatingActionMenu: View {
    let items: [FloatingActionMenuItem]
    var tint: Color = .indigo
    var startDegrees = 180.0
    var endDegrees = 270.0

    var body: some View {
        FloatingActionMenuStage(items: items, tint: tint, startDegrees: startDegrees, endDegrees: endDegrees)
            // The buttons only hold icons. The stage reads its sizes under this cap, which keeps the fan on screen.
            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
    }
}

private struct FloatingActionMenuStage: View {
    let items: [FloatingActionMenuItem]
    let tint: Color
    let startDegrees: Double
    let endDegrees: Double

    @State private var isOpen = false
    @ScaledMetric(relativeTo: .title2) private var buttonSize = 60.0
    @ScaledMetric(relativeTo: .title2) private var itemSize = 50.0
    @ScaledMetric(relativeTo: .title2) private var radius = 112.0
    @State private var containerFrame = CGRect.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            ForEach(Array(items.enumerated()), id: \.offset) { index, item in
                itemButton(item, index: index)
            }

            Button {
                withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.3)) { isOpen.toggle() }
            } label: {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .rotationEffect(.degrees(isOpen ? 135 : 0))
                    .foregroundStyle(FloatingActionMenuContrastingForeground(background: tint))
                    .frame(width: buttonSize, height: buttonSize)
                    .background(tint.gradient, in: Circle())
                    .shadow(color: tint.opacity(0.4), radius: 12, y: 6)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(isOpen ? "Close menu" : "Open menu")
        }
        .background {
            // Centred on the button and as big as its container, so one frame gives both.
            Color.clear
                .containerRelativeFrame([.horizontal, .vertical])
                .onGeometryChange(for: CGRect.self) { $0.frame(in: .global) } action: { containerFrame = $0 }
                .allowsHitTesting(false)
                .accessibilityHidden(true)
        }
        .sensoryFeedback(.impact(weight: .light), trigger: isOpen)
    }

    private func itemButton(_ item: FloatingActionMenuItem, index: Int) -> some View {
        let offset = FloatingActionMenuMath.offset(
            index: index,
            count: items.count,
            radius: FloatingActionMenuMath.fittedRadius(
                radius,
                itemSize: itemSize,
                count: items.count,
                startDegrees: startDegrees,
                endDegrees: endDegrees,
                limit: FloatingActionMenuMath.radiusLimit(
                    center: CGPoint(x: containerFrame.midX, y: containerFrame.midY),
                    container: containerFrame.size,
                    inset: itemSize / 2 + 8,
                    count: items.count,
                    startDegrees: startDegrees,
                    endDegrees: endDegrees
                )
            ),
            startDegrees: startDegrees,
            endDegrees: endDegrees
        )

        return Button {
            withAnimation(reduceMotion ? nil : .spring(duration: 0.35)) { isOpen = false }
            item.action()
        } label: {
            Image(systemName: item.systemImage)
                .font(.title3.weight(.semibold))
                .foregroundStyle(FloatingActionMenuContrastingForeground(background: item.tint))
                .frame(width: itemSize, height: itemSize)
                .background(item.tint, in: Circle())
                .shadow(color: .black.opacity(0.18), radius: 8, y: 4)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(item.title)
        .accessibilityHidden(!isOpen)
        .allowsHitTesting(isOpen)
        .scaleEffect(isOpen ? 1 : 0.4)
        .opacity(isOpen ? 1 : 0)
        .offset(isOpen ? offset : .zero)
        .animation(
            reduceMotion ? nil : .spring(duration: 0.42, bounce: 0.32).delay(isOpen ? Double(index) * 0.04 : 0),
            value: isOpen
        )
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct FloatingActionMenuContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct FloatingActionMenuDemo: View {
    @State private var lastAction = "Tap the plus button"

    private var items: [FloatingActionMenuItem] {
        [
            FloatingActionMenuItem(title: "Share", systemImage: "square.and.arrow.up", tint: .blue) { lastAction = "Shared" },
            FloatingActionMenuItem(title: "Photo", systemImage: "camera.fill", tint: .pink) { lastAction = "Photo added" },
            FloatingActionMenuItem(title: "Note", systemImage: "note.text", tint: .orange) { lastAction = "Note added" },
        ]
    }

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            Text(lastAction)
                .font(.title3.weight(.semibold))
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            FloatingActionMenu(items: items)
                .padding(28)
        }
    }
}

#Preview {
    FloatingActionMenuDemo()
}
```

## Gradient Border Button

A capsule button whose border is an angular gradient that keeps rotating.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/GradientBorderButton/GradientBorderButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A capsule button whose border is an angular gradient that keeps rotating.
///
/// With Reduce Motion on, the gradient stays still.
struct GradientBorderButton<Content: View>: View {
    var colors: [Color] = [.pink, .orange, .yellow, .mint, .blue, .purple, .pink]
    var lineWidth: Double = 3
    var period: Double = 3
    let action: () -> Void
    @ViewBuilder let label: () -> Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button(action: action) {
            label()
                .font(.title3.bold())
                .padding(.horizontal, 40)
                .padding(.vertical, 20)
                .background(.ultraThinMaterial, in: .capsule)
                .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .overlay {
            TimelineView(.animation(minimumInterval: nil, paused: reduceMotion)) { context in
                border(at: context.date)
            }
            .allowsHitTesting(false)
            .accessibilityHidden(true)
        }
    }

    private func border(at date: Date) -> some View {
        let elapsed = date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: period)
        let gradient = AngularGradient(
            colors: colors,
            center: .center,
            angle: .degrees(reduceMotion ? 0 : elapsed / period * 360)
        )

        return ZStack {
            Capsule()
                .strokeBorder(gradient, lineWidth: lineWidth)
                .blur(radius: 12)
                .opacity(0.8)
            Capsule()
                .strokeBorder(gradient, lineWidth: lineWidth)
        }
    }
}

// MARK: - Demo

struct GradientBorderButtonDemo: View {
    @State private var isUpgraded = false

    var body: some View {
        GradientBorderButton {
            isUpgraded.toggle()
        } label: {
            Label(isUpgraded ? "Upgraded" : "Upgrade to Pro", systemImage: "crown.fill")
                .foregroundStyle(.white)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(red: 0.05, green: 0.05, blue: 0.1).ignoresSafeArea())
    }
}

#Preview {
    GradientBorderButtonDemo()
}
```

## Hamburger Menu Button

A three-line menu button whose bars animate into a close cross when toggled.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/HamburgerMenuButton/HamburgerMenuButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct HamburgerMenuButtonBar: Equatable {
    let start: CGPoint
    let end: CGPoint
}

/// Three bars that become a cross as `progress` goes from 0 to 1.
nonisolated struct HamburgerMenuButtonShape: Shape {
    var progress: Double

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    /// The outer bars slide to the middle while turning. The middle bar shrinks away.
    func bars(in rect: CGRect) -> [HamburgerMenuButtonBar] {
        let amount = min(max(progress, 0), 1)
        let halfWidth = rect.width / 2
        let gap = rect.height * 0.32

        func outerBar(side: Double) -> HamburgerMenuButtonBar {
            let y = rect.midY + side * gap * (1 - amount)
            let angle = -side * .pi / 4 * amount
            let dx = cos(angle) * halfWidth
            let dy = sin(angle) * halfWidth
            return HamburgerMenuButtonBar(
                start: CGPoint(x: rect.midX - dx, y: y - dy),
                end: CGPoint(x: rect.midX + dx, y: y + dy)
            )
        }

        var result = [outerBar(side: -1), outerBar(side: 1)]
        if amount < 1 {
            let dx = halfWidth * (1 - amount)
            result.append(HamburgerMenuButtonBar(
                start: CGPoint(x: rect.midX - dx, y: rect.midY),
                end: CGPoint(x: rect.midX + dx, y: rect.midY)
            ))
        }
        return result
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()
        for bar in bars(in: rect) {
            path.move(to: bar.start)
            path.addLine(to: bar.end)
        }
        return path
    }
}

/// A three-line menu button whose bars animate into a close cross.
///
/// With Reduce Motion on, the icon changes without morphing.
struct HamburgerMenuButton: View {
    @Binding var isOpen: Bool
    var color: Color = .primary
    var openLabel = "Open menu"
    var closeLabel = "Close menu"

    @ScaledMetric(relativeTo: .title2) private var size = 24.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button {
            withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.25)) { isOpen.toggle() }
        } label: {
            HamburgerMenuButtonShape(progress: isOpen ? 1 : 0)
                .stroke(color, style: StrokeStyle(lineWidth: max(size * 0.12, 2), lineCap: .round))
                .frame(width: size, height: size)
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(isOpen ? closeLabel : openLabel)
    }
}

// MARK: - Demo

struct HamburgerMenuButtonDemo: View {
    @State private var isOpen = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            HStack {
                HamburgerMenuButton(isOpen: $isOpen)
                Text("Inbox")
                    .font(.system(.title2, design: .rounded, weight: .bold))
            }
            .padding(.horizontal, 12)

            if isOpen {
                VStack(alignment: .leading, spacing: 22) {
                    // One width for every symbol, so the names line up.
                    ForEach([("Inbox", "tray.fill"), ("Starred", "star.fill"), ("Sent", "paperplane.fill"), ("Trash", "trash.fill")], id: \.0) { title, symbol in
                        Label {
                            Text(title)
                        } icon: {
                            Image(systemName: symbol).frame(width: 30)
                        }
                    }
                }
                .font(.title3.weight(.medium))
                .padding(28)
                .transition(reduceMotion ? .opacity : .move(edge: .leading).combined(with: .opacity))
            }

            Spacer(minLength: 0)
        }
        .padding(.top, 12)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
    }
}

#Preview {
    HamburgerMenuButtonDemo()
}
```

## Hold To Confirm Button

A round button that fires only after a long press fills its progress ring, and cancels if released early.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/HoldToConfirmButton/HoldToConfirmButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A round button that only fires after being held while its ring fills.
/// Releasing early drains the ring and cancels.
///
/// With Reduce Motion on, the ring still fills, because it carries the meaning,
/// but the button does not squeeze. VoiceOver users confirm with a double tap.
struct HoldToConfirmButton: View {
    let title: LocalizedStringResource
    var systemImage: String = "checkmark"
    var tint: Color = .red
    var holdDuration: Double = 1.2
    let action: () -> Void

    @State private var progress = 0.0
    @State private var isConfirmed = false
    @State private var holdTask: Task<Void, Never>?
    @ScaledMetric(relativeTo: .title) private var diameter = 116.0
    @ScaledMetric(relativeTo: .title) private var ringWidth = 8.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isHolding: Bool { progress > 0 && !isConfirmed }

    var body: some View {
        VStack(spacing: 14) {
            ZStack {
                Circle()
                    .stroke(tint.opacity(0.18), lineWidth: ringWidth)
                Circle()
                    .trim(from: 0, to: progress)
                    .stroke(isConfirmed ? Color.green : tint, style: StrokeStyle(lineWidth: ringWidth, lineCap: .round))
                    .rotationEffect(.degrees(-90))
                Circle()
                    .fill((isConfirmed ? Color.green : tint).gradient)
                    .padding(ringWidth * 1.75)
                Image(systemName: isConfirmed ? "checkmark" : systemImage)
                    .font(.title.bold())
                    .foregroundStyle(HoldToConfirmButtonContrastingForeground(background: isConfirmed ? .green : tint))
                    .contentTransition(reduceMotion ? .identity : .symbolEffect(.replace))
            }
            .frame(width: diameter, height: diameter)
            .scaleEffect(isHolding && !reduceMotion ? 0.92 : 1)
            .contentShape(.circle)
            // The gesture only reports pressing. The task below times the hold,
            // so the long minimum duration here never completes first.
            .onLongPressGesture(minimumDuration: 60, perform: {}, onPressingChanged: { isPressing in
                pressingChanged(isPressing)
            })

            Text(title)
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.secondary)
        }
        .sensoryFeedback(.success, trigger: isConfirmed) { _, confirmed in confirmed }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(title)
        .accessibilityHint("Double tap to confirm")
        .accessibilityAddTraits(.isButton)
        .accessibilityAction { confirm() }
    }

    private func pressingChanged(_ isPressing: Bool) {
        guard !isConfirmed else { return }
        holdTask?.cancel()

        if isPressing {
            withAnimation(.linear(duration: holdDuration)) { progress = 1 }
            holdTask = Task {
                try? await Task.sleep(for: .seconds(holdDuration))
                guard !Task.isCancelled else { return }
                confirm()
            }
        } else {
            withAnimation(.easeOut(duration: 0.25)) { progress = 0 }
        }
    }

    private func confirm() {
        guard !isConfirmed else { return }
        withAnimation(.easeOut(duration: 0.2)) {
            progress = 1
            isConfirmed = true
        }
        action()

        holdTask = Task {
            try? await Task.sleep(for: .seconds(1.2))
            guard !Task.isCancelled else { return }
            withAnimation(.easeOut(duration: 0.3)) {
                progress = 0
                isConfirmed = false
            }
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct HoldToConfirmButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct HoldToConfirmButtonDemo: View {
    @State private var deleted = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HoldToConfirmButton(title: "Hold to delete", systemImage: "trash.fill") {
            deleted += 1
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(alignment: .top) {
            VStack(spacing: 6) {
                Text(deleted, format: .number)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .contentTransition(reduceMotion ? .identity : .numericText(value: Double(deleted)))
                    .animation(reduceMotion ? nil : .snappy, value: deleted)
                Text("Files deleted")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .accessibilityElement(children: .combine)
            .padding(.top, 72)
        }
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    HoldToConfirmButtonDemo()
}
```

## Like Burst Button

A heart button that pops and throws out a burst of small particles when liked.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/LikeBurstButton/LikeBurstButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A heart that pops and throws out a burst of small particles when liked.
///
/// With Reduce Motion on, the heart simply fills, with no pop or burst.
struct LikeBurstButton: View {
    @Binding var isLiked: Bool
    var color: Color = .pink
    var particleCount: Int = 12

    @State private var burstCount = 0
    @ScaledMetric(relativeTo: .largeTitle) private var heartSize = 72.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button {
            isLiked.toggle()
            if isLiked && !reduceMotion {
                burstCount += 1
            }
        } label: {
            ZStack {
                ForEach(0..<particleCount, id: \.self) { index in
                    LikeBurstButtonSpark(
                        angle: Double(index) / Double(particleCount) * 360,
                        reach: heartSize * (index.isMultiple(of: 2) ? 1.25 : 0.95),
                        size: heartSize * 0.14,
                        color: [color, .orange, .yellow][index % 3],
                        trigger: burstCount
                    )
                }

                Image(systemName: isLiked ? "heart.fill" : "heart")
                    .font(.system(size: heartSize, weight: .semibold))
                    .foregroundStyle(isLiked ? color : Color.secondary)
                    .keyframeAnimator(initialValue: 1.0, trigger: burstCount) { content, scale in
                        content.scaleEffect(scale)
                    } keyframes: { _ in
                        KeyframeTrack {
                            CubicKeyframe(0.6, duration: 0.09)
                            SpringKeyframe(1.3, duration: 0.2, spring: .bouncy)
                            SpringKeyframe(1, duration: 0.35, spring: .bouncy)
                        }
                    }
            }
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .sensoryFeedback(.impact(weight: .light), trigger: burstCount)
        .accessibilityLabel("Like")
        .accessibilityAddTraits(isLiked ? .isSelected : [])
    }
}

private struct LikeBurstButtonSparkState {
    var distance = 0.0
    var scale = 0.0
    var opacity = 0.0
}

private struct LikeBurstButtonSpark: View {
    let angle: Double
    let reach: Double
    let size: Double
    let color: Color
    let trigger: Int

    var body: some View {
        Circle()
            .fill(color)
            .frame(width: size, height: size)
            .keyframeAnimator(initialValue: LikeBurstButtonSparkState(), trigger: trigger) { [angle] content, state in
                content
                    .scaleEffect(state.scale)
                    .opacity(state.opacity)
                    .offset(y: -state.distance)
                    .rotationEffect(.degrees(angle))
            } keyframes: { _ in
                KeyframeTrack(\.distance) {
                    MoveKeyframe(0)
                    CubicKeyframe(reach, duration: 0.6)
                }
                KeyframeTrack(\.scale) {
                    MoveKeyframe(0.2)
                    SpringKeyframe(1, duration: 0.18, spring: .bouncy)
                    LinearKeyframe(0.1, duration: 0.42)
                }
                KeyframeTrack(\.opacity) {
                    MoveKeyframe(1)
                    LinearKeyframe(1, duration: 0.35)
                    LinearKeyframe(0, duration: 0.25)
                }
            }
            .accessibilityHidden(true)
    }
}

// MARK: - Demo

struct LikeBurstButtonDemo: View {
    @State private var isLiked = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var count: Int { isLiked ? 129 : 128 }

    var body: some View {
        VStack(spacing: 28) {
            LikeBurstButton(isLiked: $isLiked)

            VStack(spacing: 4) {
                Text(count, format: .number)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .contentTransition(reduceMotion ? .identity : .numericText(value: Double(count)))
                    .animation(reduceMotion ? nil : .snappy, value: count)
                Text("people love this")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .accessibilityElement(children: .combine)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.pink.opacity(0.08).ignoresSafeArea())
    }
}

#Preview {
    LikeBurstButtonDemo()
}
```

## Morphing Submit Button

A submit button that morphs into a spinner while it works and then into a checkmark.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/MorphingSubmitButton/MorphingSubmitButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

private enum MorphingSubmitButtonPhase {
    case idle, loading, success
}

/// A submit button that collapses into a spinner while its async action runs,
/// then turns into a checkmark before returning to normal.
///
/// With Reduce Motion on, the button keeps its shape and only its content crossfades.
struct MorphingSubmitButton: View {
    let title: LocalizedStringResource
    var tint: Color = .blue
    var successColor: Color = .green
    var successDuration: Double = 1.2
    let action: @MainActor () async -> Void

    @State private var phase = MorphingSubmitButtonPhase.idle
    @ScaledMetric(relativeTo: .headline) private var height = 64.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var morph: Animation {
        reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.5, bounce: 0.3)
    }

    private var isCollapsed: Bool { phase != .idle && !reduceMotion }

    private var accessibilityTitle: LocalizedStringResource {
        switch phase {
        case .idle: title
        case .loading: "Submitting"
        case .success: "Done"
        }
    }

    var body: some View {
        Button {
            submit()
        } label: {
            ZStack {
                Text(title)
                    .font(.title3.bold())
                    .fixedSize()
                    .opacity(phase == .idle ? 1 : 0)

                if phase == .loading {
                    ProgressView()
                        .tint(MorphingSubmitButtonContrastingForeground(background: phase == .success ? successColor : tint))
                        .transition(.opacity)
                }

                if phase == .success {
                    Image(systemName: "checkmark")
                        .font(.title2.bold())
                        .transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                }
            }
            .foregroundStyle(MorphingSubmitButtonContrastingForeground(background: phase == .success ? successColor : tint))
            .padding(.horizontal, isCollapsed ? 0 : 52)
            .frame(width: isCollapsed ? height : nil, height: height)
            .background(
                phase == .success ? successColor : tint,
                in: RoundedRectangle(cornerRadius: isCollapsed ? height / 2 : 18, style: .continuous)
            )
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .sensoryFeedback(.success, trigger: phase) { _, newPhase in newPhase == .success }
        .accessibilityLabel(accessibilityTitle)
    }

    private func submit() {
        guard phase == .idle else { return }
        withAnimation(morph) { phase = .loading }

        Task {
            await action()
            withAnimation(morph) { phase = .success }
            try? await Task.sleep(for: .seconds(successDuration))
            withAnimation(morph) { phase = .idle }
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct MorphingSubmitButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct MorphingSubmitButtonDemo: View {
    var body: some View {
        VStack(spacing: 32) {
            VStack(spacing: 10) {
                Image(systemName: "paperplane.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.blue)
                    .accessibilityHidden(true)
                Text("Join the waitlist")
                    .font(.largeTitle.bold())
                Text("We will write when your spot opens.")
                    .font(.body)
                    .foregroundStyle(.secondary)
            }

            MorphingSubmitButton(title: "Submit") {
                try? await Task.sleep(for: .seconds(1.4))
            }
            .frame(height: 80)
        }
        .multilineTextAlignment(.center)
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    MorphingSubmitButtonDemo()
}
```

## Play Pause Morph Button

A play button whose triangle morphs into two pause bars by interpolating its path.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/PlayPauseMorphButton/PlayPauseMorphButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A triangle that morphs into two bars as `progress` goes from 0 to 1.
nonisolated struct PlayPauseMorphButtonShape: Shape {
    var progress: Double

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    private static let iconTop = 0.1
    private static let iconBottom = 0.9
    /// The x where the triangle is cut in two.
    private static let triangleCut = 0.57

    /// The triangle, cut in two, in a unit square. Corners match one to one with `pauseBars`.
    private static let playHalves: [[CGPoint]] = [
        [CGPoint(x: 0.22, y: iconTop), CGPoint(x: triangleCut, y: 0.3), CGPoint(x: triangleCut, y: 0.7), CGPoint(x: 0.22, y: iconBottom)],
        [CGPoint(x: triangleCut, y: 0.3), CGPoint(x: 0.92, y: 0.5), CGPoint(x: 0.92, y: 0.5), CGPoint(x: triangleCut, y: 0.7)],
    ]

    private static let pauseBars: [[CGPoint]] = [
        [CGPoint(x: 0.2, y: iconTop), CGPoint(x: 0.42, y: iconTop), CGPoint(x: 0.42, y: iconBottom), CGPoint(x: 0.2, y: iconBottom)],
        [CGPoint(x: 0.58, y: iconTop), CGPoint(x: 0.8, y: iconTop), CGPoint(x: 0.8, y: iconBottom), CGPoint(x: 0.58, y: iconBottom)],
    ]

    /// The two four-cornered pieces at the current progress, in a unit square.
    func pieces() -> [[CGPoint]] {
        let amount = min(max(progress, 0), 1)
        return zip(Self.playHalves, Self.pauseBars).map { play, pause in
            zip(play, pause).map { from, to in
                CGPoint(x: from.x + (to.x - from.x) * amount, y: from.y + (to.y - from.y) * amount)
            }
        }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()
        for piece in pieces() {
            path.addLines(piece.map { CGPoint(x: rect.minX + $0.x * rect.width, y: rect.minY + $0.y * rect.height) })
            path.closeSubpath()
        }
        return path
    }
}

/// A play button whose triangle morphs into two pause bars.
///
/// With Reduce Motion on, the icon changes without morphing.
struct PlayPauseMorphButton: View {
    @Binding var isPlaying: Bool
    var colors: [Color] = [.pink, .purple]

    @ScaledMetric(relativeTo: .largeTitle) private var size = 92.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// The side of the icon as a fraction of the button's.
    private let iconScale = 0.42

    var body: some View {
        Button {
            withAnimation(reduceMotion ? nil : .spring(duration: 0.42, bounce: 0.2)) { isPlaying.toggle() }
        } label: {
            let shape = PlayPauseMorphButtonShape(progress: isPlaying ? 1 : 0)

            ZStack {
                shape.fill(.white)
                // A stroke of the same color softens the corners.
                shape.stroke(.white, style: StrokeStyle(lineWidth: size * 0.04, lineJoin: .round))
            }
            .frame(width: size * iconScale, height: size * iconScale)
            .frame(width: size, height: size)
            .background(.linearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: Circle())
            .shadow(color: (colors.first ?? .black).opacity(0.4), radius: 18, y: 10)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(isPlaying ? "Pause" : "Play")
    }
}

// MARK: - Demo

struct PlayPauseMorphButtonDemo: View {
    @State private var isPlaying = false

    var body: some View {
        VStack(spacing: 32) {
            VStack(spacing: 6) {
                Text("Midnight Drive")
                    .font(.system(.title, design: .rounded, weight: .bold))
                Text(isPlaying ? "Now playing" : "Paused")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }

            PlayPauseMorphButton(isPlaying: $isPlaying)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    PlayPauseMorphButtonDemo()
}
```

## Pressable Button Style

A button style that shrinks and dims on press, then springs back.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/PressableButtonStyle/PressableButtonStyle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Shrinks and dims a button while it is pressed, then springs back.
///
/// With Reduce Motion on, the button only dims.
struct PressableButtonStyle: ButtonStyle {
    var pressedScale: CGFloat = 0.94
    var pressedOpacity: Double = 0.8

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed && !reduceMotion ? pressedScale : 1)
            .opacity(configuration.isPressed ? pressedOpacity : 1)
            .animation(.spring(duration: 0.3, bounce: 0.45), value: configuration.isPressed)
    }
}

extension ButtonStyle where Self == PressableButtonStyle {
    static var pressable: PressableButtonStyle { PressableButtonStyle() }
}

// MARK: - Demo

struct PressableButtonStyleDemo: View {
    @State private var likes = 0

    var body: some View {
        VStack(spacing: 28) {
            Text(likes == 1 ? "1 like" : "\(likes) likes")
                .font(.largeTitle.bold())
                .contentTransition(.numericText())

            Button {
                withAnimation { likes += 1 }
            } label: {
                Label("Like", systemImage: "heart.fill")
                    .font(.title2.bold())
                    .foregroundStyle(.white)
                    .padding(.horizontal, 44)
                    .padding(.vertical, 20)
                    .background(.pink.gradient, in: .capsule)
            }
            .buttonStyle(.pressable)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    PressableButtonStyleDemo()
}
```

## Provider Sign In Button Stack

A stack of full-width sign-in buttons, each with a leading icon slot and its own loading state while authenticating.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ProviderSignInButtonStack/ProviderSignInButtonStack.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct ProviderSignInButtonStackOption: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let icon: Image
    var background: Color = .indigo
    var foreground: Color = .white
    let authenticate: @MainActor () async -> Void
}

/// A stack of full-width sign-in buttons. Each shows its own spinner while it authenticates,
/// and the others wait until it is done.
///
/// For Sign in with Apple, use the system `SignInWithAppleButton`: Apple's guidelines require it.
struct ProviderSignInButtonStack: View {
    let options: [ProviderSignInButtonStackOption]
    var spacing: CGFloat = 12

    @State private var loadingID: ProviderSignInButtonStackOption.ID?
    @State private var running: Task<Void, Never>?
    @ScaledMetric(relativeTo: .headline) private var minimumHeight = 54.0
    @ScaledMetric(relativeTo: .headline) private var iconSize = 24.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: max(spacing, 0)) {
            ForEach(options) { option in
                button(for: option)
            }
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.2), value: loadingID)
        .onDisappear {
            running?.cancel()
            running = nil
            loadingID = nil
        }
    }

    private func button(for option: ProviderSignInButtonStackOption) -> some View {
        let isLoading = loadingID == option.id
        let isWaiting = loadingID != nil && !isLoading

        return Button {
            start(option)
        } label: {
            HStack(spacing: 14) {
                ZStack {
                    if isLoading {
                        ProgressView().tint(option.foreground)
                    } else {
                        option.icon
                            .resizable()
                            .scaledToFit()
                            .accessibilityHidden(true)
                    }
                }
                .frame(width: iconSize, height: iconSize)

                Text(option.title)
                    .font(.headline)
                    .multilineTextAlignment(.leading)

                Spacer(minLength: 0)
            }
            .foregroundStyle(option.foreground)
            .padding(.horizontal, 18)
            .padding(.vertical, 8)
            .frame(maxWidth: .infinity, minHeight: minimumHeight)
            .background(option.background, in: RoundedRectangle(cornerRadius: 16, style: .continuous))
            .opacity(isWaiting ? 0.5 : 1)
        }
        .buttonStyle(.plain)
        // Not `disabled`, which would also dim the button that is signing in.
        .allowsHitTesting(loadingID == nil)
        .accessibilityLabel(option.title)
        .accessibilityValue(isLoading ? "Signing in" : "")
    }

    private func start(_ option: ProviderSignInButtonStackOption) {
        guard loadingID == nil else { return }
        loadingID = option.id
        let authenticate = option.authenticate

        running = Task {
            await authenticate()
            guard !Task.isCancelled else { return }
            loadingID = nil
            running = nil
        }
    }
}

// MARK: - Demo

struct ProviderSignInButtonStackDemo: View {
    @State private var status = "Choose how to sign in"

    private var options: [ProviderSignInButtonStackOption] {
        [
            option("passkey", "Continue with Passkey", symbol: "person.badge.key.fill", color: .indigo),
            option("email", "Continue with Email", symbol: "envelope.fill", color: .teal),
            option("phone", "Continue with Phone", symbol: "phone.fill", color: .pink),
        ]
    }

    private func option(_ id: String, _ title: LocalizedStringResource, symbol: String, color: Color) -> ProviderSignInButtonStackOption {
        ProviderSignInButtonStackOption(id: id, title: title, icon: Image(systemName: symbol), background: color) {
            do {
                try await Task.sleep(for: .seconds(1.4))
            } catch {
                return
            }
            status = "Signed in with \(id)"
        }
    }

    var body: some View {
        VStack(spacing: 28) {
            Image(systemName: "lock.shield.fill")
                .font(.system(.largeTitle, weight: .bold))
                .foregroundStyle(.indigo)
                .accessibilityHidden(true)

            Text(status)
                .font(.system(.title3, design: .rounded, weight: .semibold))
                .multilineTextAlignment(.center)

            ProviderSignInButtonStack(options: options)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    ProviderSignInButtonStackDemo()
}
```

## Pulse Ring Button

A round button with rings that keep radiating out from behind it.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/PulseRingButton/PulseRingButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

private enum PulseRingButtonPhase {
    case rest, expanded
}

/// A round button with rings that keep radiating out from behind it.
///
/// With Reduce Motion on, a single still halo replaces the rings. Set `isPulsing`
/// to false to leave the button without them, as when what it signals has stopped.
struct PulseRingButton: View {
    let systemImage: String
    let label: LocalizedStringResource
    var tint: Color = .red
    var ringCount: Int = 3
    var ringDuration: Double = 1.6
    var stagger: Double = 0.35
    var isPulsing = true
    let action: () -> Void

    @ScaledMetric(relativeTo: .largeTitle) private var diameter = 104.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            Group {
                if !isPulsing {
                    EmptyView()
                } else if reduceMotion {
                    Circle()
                        .fill(tint.opacity(0.2))
                        .scaleEffect(1.35)
                } else {
                    ForEach(0..<ringCount, id: \.self) { index in
                        ring(at: index)
                    }
                }
            }
            .allowsHitTesting(false)
            .accessibilityHidden(true)

            Button(action: action) {
                Image(systemName: systemImage)
                    .font(.largeTitle.bold())
                    .foregroundStyle(PulseRingButtonContrastingForeground(background: tint))
                    .frame(width: diameter, height: diameter)
                    .background(tint.gradient, in: .circle)
                    .contentShape(.circle)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(label)
        }
        .frame(width: diameter, height: diameter)
    }

    /// Every ring waits before growing and again before resetting, and the two
    /// delays add up to the same total, so all rings keep the same period.
    private func ring(at index: Int) -> some View {
        let startDelay = Double(index) * stagger
        let endDelay = Double(ringCount - 1 - index) * stagger

        return Circle()
            .fill(tint)
            .phaseAnimator([PulseRingButtonPhase.rest, .expanded]) { content, phase in
                content
                    .scaleEffect(phase == .expanded ? 2.5 : 1)
                    .opacity(phase == .expanded ? 0 : 0.55)
            } animation: { phase in
                phase == .expanded
                    ? .easeOut(duration: ringDuration).delay(startDelay)
                    : .linear(duration: 0.01).delay(endDelay)
            }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct PulseRingButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct PulseRingButtonDemo: View {
    @State private var isRecording = true

    var body: some View {
        PulseRingButton(systemImage: isRecording ? "mic.fill" : "mic.slash.fill", label: "Record", isPulsing: isRecording) {
            isRecording.toggle()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(alignment: .top) {
            VStack(spacing: 6) {
                Text(isRecording ? "Listening" : "Muted")
                    .font(.largeTitle.bold())
                Text("Tap to toggle the microphone")
                    .font(.headline)
                    .foregroundStyle(.white.opacity(0.65))
            }
            .foregroundStyle(.white)
            .padding(.top, 72)
        }
        .background(Color(red: 0.1, green: 0.05, blue: 0.08).ignoresSafeArea())
    }
}

#Preview {
    PulseRingButtonDemo()
}
```

## Shimmer Button

A gradient capsule button with a band of light that sweeps across it in a loop.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ShimmerButton/ShimmerButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A gradient capsule button with a band of light that sweeps across it in a loop.
///
/// With Reduce Motion on, the sweep is removed and the button stays still.
struct ShimmerButton: View {
    let title: LocalizedStringResource
    var systemImage: String?
    var colors: [Color] = [.indigo, .purple]
    var sweepDuration: Double = 1.1
    var pause: Double = 0.9
    let action: () -> Void

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button(action: action) {
            HStack(spacing: 10) {
                if let systemImage {
                    Image(systemName: systemImage)
                        .accessibilityHidden(true)
                }
                Text(title)
            }
            .font(.title3.bold())
            .foregroundStyle(.white)
            .padding(.horizontal, 40)
            .padding(.vertical, 20)
            .background(LinearGradient(colors: colors, startPoint: .leading, endPoint: .trailing))
            .overlay {
                if !reduceMotion {
                    sweep
                }
            }
            .clipShape(.capsule)
            .contentShape(.capsule)
            .shadow(color: (colors.first ?? .clear).opacity(0.5), radius: 18, y: 8)
        }
        .buttonStyle(ShimmerButtonPressStyle(reduceMotion: reduceMotion))
    }

    private var sweep: some View {
        LinearGradient(colors: [.clear, .white.opacity(0.65), .clear], startPoint: .leading, endPoint: .trailing)
            .scaleEffect(x: 0.4, y: 2.5)
            .rotationEffect(.degrees(20))
            .keyframeAnimator(initialValue: -1.1, repeating: true) { content, position in
                content.visualEffect { effect, proxy in
                    effect.offset(x: position * proxy.size.width)
                }
            } keyframes: { _ in
                KeyframeTrack {
                    LinearKeyframe(1.1, duration: sweepDuration)
                    LinearKeyframe(1.1, duration: pause)
                }
            }
            .allowsHitTesting(false)
            .accessibilityHidden(true)
    }
}

/// The button dims and shrinks a little while it is pressed.
private struct ShimmerButtonPressStyle: ButtonStyle {
    let reduceMotion: Bool

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.8 : 1)
            .scaleEffect(configuration.isPressed && !reduceMotion ? 0.96 : 1)
            .animation(.snappy(duration: 0.2), value: configuration.isPressed)
    }
}

// MARK: - Demo

struct ShimmerButtonDemo: View {
    @State private var isStarted = false

    var body: some View {
        VStack(spacing: 36) {
            VStack(spacing: 10) {
                Text("Unlock everything")
                    .font(.largeTitle.bold())
                Text("Every feature, free for a week.")
                    .font(.body)
                    .foregroundStyle(.white.opacity(0.7))
            }

            ShimmerButton(
                title: isStarted ? "Trial started" : "Start free trial",
                systemImage: isStarted ? "checkmark" : "sparkles"
            ) {
                isStarted.toggle()
            }
        }
        .foregroundStyle(.white)
        .multilineTextAlignment(.center)
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(red: 0.07, green: 0.06, blue: 0.16).ignoresSafeArea())
    }
}

#Preview {
    ShimmerButtonDemo()
}
```

## Shrinking Extended Button

An extended floating button that collapses from a labeled pill to a plain icon as the scroll view moves down.

Category: Buttons. Minimum: iOS 18.0. Path: Components/Buttons/ShrinkingExtendedButton/ShrinkingExtendedButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum ShrinkingExtendedButtonMath {
    /// Rubber-banding past the top gives a negative offset, which counts as being at the top.
    static func shouldExtend(offset: CGFloat, threshold: CGFloat) -> Bool {
        offset <= max(threshold, 0)
    }
}

/// An extended floating button that shrinks from a labeled pill to a plain icon.
///
/// Pass `isExtended`, or drive it from a scroll view with `ShrinkingExtendedButtonScrollTracker`.
/// With Reduce Motion on, it changes shape without animating.
struct ShrinkingExtendedButton: View {
    let title: LocalizedStringResource
    let systemImage: String
    var isExtended = true
    var tint: Color = .indigo
    let action: () -> Void

    @ScaledMetric(relativeTo: .headline) private var height = 58.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button(action: action) {
            HStack(spacing: 10) {
                Image(systemName: systemImage)
                    .font(.title3.weight(.semibold))

                if isExtended {
                    Text(title)
                        .font(.headline)
                        .transition(.opacity.combined(with: .scale(scale: 0.8, anchor: .leading)))
                }
            }
            .foregroundStyle(ShrinkingExtendedButtonContrastingForeground(background: tint))
            .padding(.horizontal, isExtended ? 22 : 0)
            .frame(minWidth: height, minHeight: height)
            .background(tint.gradient, in: Capsule())
            .shadow(color: tint.opacity(0.35), radius: 12, y: 6)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(title)
        .animation(reduceMotion ? nil : .spring(duration: 0.35, bounce: 0.15), value: isExtended)
    }
}

/// Apply to a scroll view to set `isExtended` from how far it has moved from the top.
struct ShrinkingExtendedButtonScrollTracker: ViewModifier {
    @Binding var isExtended: Bool
    var threshold: CGFloat = 40

    func body(content: Content) -> some View {
        content.onScrollGeometryChange(for: Bool.self) { geometry in
            ShrinkingExtendedButtonMath.shouldExtend(
                offset: geometry.contentOffset.y + geometry.contentInsets.top,
                threshold: threshold
            )
        } action: { _, shouldExtend in
            isExtended = shouldExtend
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct ShrinkingExtendedButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct ShrinkingExtendedButtonDemo: View {
    @State private var isExtended = true

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            ScrollView {
                LazyVStack(spacing: 12) {
                    ForEach(0..<30, id: \.self) { index in
                        HStack(spacing: 14) {
                            Circle()
                                .fill(Color(hue: Double(index % 8) / 8, saturation: 0.55, brightness: 0.9))
                                .frame(width: 44, height: 44)
                                .accessibilityHidden(true)
                            Text("Message \(index + 1)")
                                .font(.headline)
                            Spacer(minLength: 0)
                        }
                        .padding(14)
                        .background(.quaternary.opacity(0.6), in: RoundedRectangle(cornerRadius: 18, style: .continuous))
                    }
                }
                .padding(16)
            }
            .modifier(ShrinkingExtendedButtonScrollTracker(isExtended: $isExtended))

            ShrinkingExtendedButton(title: "New Message", systemImage: "square.and.pencil", isExtended: isExtended) {}
                .padding(24)
        }
    }
}

#Preview {
    ShrinkingExtendedButtonDemo()
}
```

## Calendar Month Grid

A month calendar for picking one day, with swipe paging between months.

Category: Calendars. Minimum: iOS 18.0. Path: Components/Calendars/CalendarMonthGrid/CalendarMonthGrid.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum CalendarMonthGridMath {
    /// Six weeks, so every month is the same height.
    static let cellCount = 42

    /// The cells of a month: nil before its first day and after its last.
    static func days(inMonthContaining date: Date, calendar: Calendar) -> [Date?] {
        guard let first = calendar.dateInterval(of: .month, for: date)?.start else {
            return Array(repeating: nil, count: cellCount)
        }

        let leading = (calendar.component(.weekday, from: first) - calendar.firstWeekday + 7) % 7
        let dayCount = calendar.range(of: .day, in: .month, for: first)?.count ?? 0
        let days = (0..<dayCount).map { calendar.date(byAdding: .day, value: $0, to: first) }
        let cells = Array(repeating: nil, count: leading) + days
        return Array(cells.prefix(cellCount)) + Array(repeating: nil, count: max(0, cellCount - cells.count))
    }

    /// The weekday initials, starting on the calendar's first day of the week.
    static func weekdaySymbols(calendar: Calendar) -> [String] {
        let symbols = calendar.veryShortStandaloneWeekdaySymbols
        guard !symbols.isEmpty else { return [] }
        let start = min(max(calendar.firstWeekday - 1, 0), symbols.count - 1)
        return Array(symbols[start...] + symbols[..<start])
    }

    /// What VoiceOver reads for a day, in the same calendar and time zone as the grid.
    static func dayLabel(for day: Date, calendar: Calendar) -> String {
        day.formatted(Date.FormatStyle(date: .complete, time: .omitted, calendar: calendar, timeZone: calendar.timeZone))
    }
}

/// A month calendar for picking one day, with swipe paging between months.
///
/// With Reduce Motion on, the arrows change the month without sliding.
struct CalendarMonthGrid: View {
    @Binding var selection: Date?
    var anchor: Date = .now
    /// How many months can be reached in each direction.
    var monthRange = 24
    var tint: Color = .indigo

    var body: some View {
        CalendarMonthGridStage(selection: $selection, anchor: anchor, monthRange: monthRange, tint: tint)
            // Seven columns cannot hold accessibility sizes, so growth stops here, row height included.
            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
    }
}

private struct CalendarMonthGridStage: View {
    @Binding var selection: Date?
    let anchor: Date
    let monthRange: Int
    let tint: Color

    @State private var page = 0
    @ScaledMetric(relativeTo: .body) private var rowHeight = 44.0
    @Environment(\.calendar) private var calendar
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let rowSpacing = 4.0
    private var reach: Int { min(max(monthRange, 0), 600) }

    var body: some View {
        VStack(spacing: 12) {
            header
            weekdays

            TabView(selection: $page) {
                ForEach(-reach...reach, id: \.self) { offset in
                    grid(for: month(at: offset))
                        .tag(offset)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .frame(height: rowHeight * 6 + rowSpacing * 5)
        }
    }

    private var header: some View {
        HStack {
            Text(month(at: page).formatted(monthStyle))
                .font(.system(.title3, design: .rounded, weight: .semibold))
                .frame(maxWidth: .infinity, alignment: .leading)
                .accessibilityAddTraits(.isHeader)

            arrow("chevron.backward", label: "Previous month", to: page - 1)
            arrow("chevron.forward", label: "Next month", to: page + 1)
        }
    }

    private var monthStyle: Date.FormatStyle {
        var style = Date.FormatStyle().month(.wide).year()
        style.calendar = calendar
        style.timeZone = calendar.timeZone
        return style
    }

    private func arrow(_ systemImage: String, label: String, to target: Int) -> some View {
        Button {
            withAnimation(reduceMotion ? nil : .smooth) { page = target }
        } label: {
            Image(systemName: systemImage)
                .font(.body.weight(.semibold))
                .frame(minWidth: 44, minHeight: 44)
        }
        .tint(tint)
        .disabled(abs(target) > reach)
        .accessibilityLabel(label)
    }

    private var weekdays: some View {
        HStack(spacing: 0) {
            ForEach(Array(CalendarMonthGridMath.weekdaySymbols(calendar: calendar).enumerated()), id: \.offset) { _, symbol in
                Text(symbol)
                    .font(.caption.weight(.semibold))
                    .foregroundStyle(.secondary)
                    .frame(maxWidth: .infinity)
            }
        }
        .accessibilityHidden(true)
    }

    private func grid(for month: Date) -> some View {
        let cells = CalendarMonthGridMath.days(inMonthContaining: month, calendar: calendar)
        let columns = Array(repeating: GridItem(.flexible(), spacing: 0), count: 7)

        return LazyVGrid(columns: columns, spacing: rowSpacing) {
            ForEach(Array(cells.enumerated()), id: \.offset) { _, day in
                if let day {
                    dayButton(day)
                } else {
                    Color.clear
                        .frame(height: rowHeight)
                        .accessibilityHidden(true)
                }
            }
        }
    }

    private func dayButton(_ day: Date) -> some View {
        let isSelected = selection.map { calendar.isDate($0, inSameDayAs: day) } ?? false
        let isToday = calendar.isDateInToday(day)

        return Button {
            selection = day
        } label: {
            Text(calendar.component(.day, from: day), format: .number.grouping(.never))
                .font(.body.weight(isSelected || isToday ? .semibold : .regular))
                .minimumScaleFactor(0.7)
                .lineLimit(1)
                .foregroundStyle(isSelected ? AnyShapeStyle(.white) : isToday ? AnyShapeStyle(tint) : AnyShapeStyle(.primary))
                .frame(maxWidth: .infinity)
                .frame(height: rowHeight)
                .background {
                    if isSelected { Circle().fill(tint) }
                }
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(CalendarMonthGridMath.dayLabel(for: day, calendar: calendar))
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private func month(at offset: Int) -> Date {
        calendar.date(byAdding: .month, value: offset, to: anchor) ?? anchor
    }
}

// MARK: - Demo

struct CalendarMonthGridDemo: View {
    @State private var selection: Date?

    var body: some View {
        VStack(spacing: 20) {
            CalendarMonthGrid(selection: $selection)
                .padding(16)
                .background(.background, in: RoundedRectangle(cornerRadius: 28, style: .continuous))
                .shadow(color: .black.opacity(0.08), radius: 20, y: 10)

            Text(selection?.formatted(date: .long, time: .omitted) ?? "Pick a day")
                .font(.headline)
                .foregroundStyle(.secondary)
        }
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.indigo.opacity(0.08))
    }
}

#Preview {
    CalendarMonthGridDemo()
}
```

## Calendar Range Selector

A month calendar that picks a start and an end day and shades the days between them.

Category: Calendars. Minimum: iOS 18.0. Path: Components/Calendars/CalendarRangeSelector/CalendarRangeSelector.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A month calendar that picks a start and an end day and shades the days between them.
///
/// The first tap sets the start and the second sets the end. Tapping a day before the
/// start, or any day once the range is complete, starts a new range.
struct CalendarRangeSelector: View {
    @Binding var start: Date?
    @Binding var end: Date?
    var calendar: Calendar
    var tint: Color

    @State private var month: Date
    @ScaledMetric(relativeTo: .body) private var dayHeight = 46.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.locale) private var locale

    init(
        start: Binding<Date?>,
        end: Binding<Date?>,
        month: Date = .now,
        calendar: Calendar = .current,
        tint: Color = .indigo
    ) {
        _start = start
        _end = end
        self.calendar = calendar
        self.tint = tint
        _month = State(initialValue: month)
    }

    private var selection: CalendarRangeSelectorLogic.Selection {
        .init(start: start, end: end)
    }

    var body: some View {
        VStack(spacing: 12) {
            header

            HStack(spacing: 0) {
                ForEach(Array(CalendarRangeSelectorLogic.weekdaySymbols(calendar: calendar).enumerated()), id: \.offset) { _, symbol in
                    Text(symbol)
                        .font(.caption.weight(.semibold))
                        .foregroundStyle(.secondary)
                        .frame(maxWidth: .infinity)
                }
            }
            .accessibilityHidden(true)

            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 0), count: 7), spacing: 4) {
                ForEach(0..<CalendarRangeSelectorLogic.leadingBlanks(inMonthOf: month, calendar: calendar), id: \.self) { _ in
                    Color.clear.frame(height: dayHeight)
                }
                ForEach(CalendarRangeSelectorLogic.days(inMonthOf: month, calendar: calendar), id: \.self) { day in
                    dayCell(day)
                }
            }
        }
    }

    private var header: some View {
        HStack {
            monthButton(systemImage: "chevron.backward", label: "Previous month", offset: -1)
            Spacer()
            Text(format(month, Date.FormatStyle().month(.wide).year()))
                .font(.headline)
                .accessibilityAddTraits(.isHeader)
            Spacer()
            monthButton(systemImage: "chevron.forward", label: "Next month", offset: 1)
        }
    }

    private func monthButton(systemImage: String, label: String, offset: Int) -> some View {
        Button {
            guard let next = calendar.date(byAdding: .month, value: offset, to: month) else { return }
            month = next
        } label: {
            Image(systemName: systemImage)
                .font(.body.weight(.semibold))
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(.rect)
        }
        .tint(tint)
        .accessibilityLabel(label)
    }

    private func dayCell(_ day: Date) -> some View {
        let role = CalendarRangeSelectorLogic.role(of: day, in: selection, calendar: calendar)
        let isEndpoint = role == .start || role == .end || role == .single
        let band = tint.opacity(0.18)

        return Button {
            choose(day)
        } label: {
            ZStack {
                HStack(spacing: 0) {
                    (role == .middle || role == .end ? band : Color.clear)
                    (role == .middle || role == .start ? band : Color.clear)
                }
                .padding(.vertical, 2)

                if isEndpoint {
                    Circle().fill(tint).padding(2)
                }

                Text(verbatim: String(calendar.component(.day, from: day)))
                    .font(.body.weight(isEndpoint ? .semibold : .regular))
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .foregroundStyle(isEndpoint ? Color.white : Color.primary)
            }
            .frame(height: dayHeight)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(format(day, Date.FormatStyle().weekday(.wide).day().month(.wide).year()))
        .accessibilityValue(accessibilityValue(for: role))
        .accessibilityAddTraits(isEndpoint ? .isSelected : [])
    }

    private func choose(_ day: Date) {
        let next = CalendarRangeSelectorLogic.selecting(day, in: selection, calendar: calendar)
        withAnimation(reduceMotion ? nil : .snappy(duration: 0.25)) {
            start = next.start
            end = next.end
        }
    }

    private func accessibilityValue(for role: CalendarRangeSelectorLogic.Role) -> String {
        switch role {
        case .outside: ""
        case .start: "Start of range"
        case .middle: "In range"
        case .end: "End of range"
        case .single: "Selected"
        }
    }

    private func format(_ date: Date, _ base: Date.FormatStyle) -> String {
        var style = base
        style.calendar = calendar
        style.timeZone = calendar.timeZone
        style.locale = locale
        return date.formatted(style)
    }
}

/// The date math of the calendar, apart from the view so it can be tested.
enum CalendarRangeSelectorLogic {
    struct Selection: Equatable {
        var start: Date?
        var end: Date?
    }

    enum Role: Equatable {
        case outside, start, middle, end, single
    }

    static func selecting(_ day: Date, in selection: Selection, calendar: Calendar) -> Selection {
        let day = calendar.startOfDay(for: day)
        guard let start = selection.start.map({ calendar.startOfDay(for: $0) }), selection.end == nil, day >= start else {
            return Selection(start: day, end: nil)
        }
        return Selection(start: start, end: day)
    }

    static func role(of day: Date, in selection: Selection, calendar: Calendar) -> Role {
        let day = calendar.startOfDay(for: day)
        guard let start = selection.start.map({ calendar.startOfDay(for: $0) }) else { return .outside }
        guard let end = selection.end.map({ calendar.startOfDay(for: $0) }), end != start else {
            return day == start ? .single : .outside
        }

        let lower = min(start, end)
        let upper = max(start, end)
        if day == lower { return .start }
        if day == upper { return .end }
        return day > lower && day < upper ? .middle : .outside
    }

    static func days(inMonthOf date: Date, calendar: Calendar) -> [Date] {
        guard let first = calendar.dateInterval(of: .month, for: date)?.start,
              let range = calendar.range(of: .day, in: .month, for: date) else { return [] }
        return range.compactMap { calendar.date(byAdding: .day, value: $0 - range.lowerBound, to: first) }
    }

    /// The empty cells before day one, given the calendar's first weekday.
    static func leadingBlanks(inMonthOf date: Date, calendar: Calendar) -> Int {
        guard let first = calendar.dateInterval(of: .month, for: date)?.start else { return 0 }
        return (calendar.component(.weekday, from: first) - calendar.firstWeekday + 7) % 7
    }

    static func weekdaySymbols(calendar: Calendar) -> [String] {
        let symbols = calendar.veryShortStandaloneWeekdaySymbols
        let offset = min(max(calendar.firstWeekday - 1, 0), symbols.count)
        return Array(symbols[offset...] + symbols[..<offset])
    }
}

// MARK: - Demo

struct CalendarRangeSelectorDemo: View {
    @State private var start: Date?
    @State private var end: Date?

    private let calendar = Calendar(identifier: .gregorian)

    private var firstOfMarch: Date {
        calendar.date(from: DateComponents(year: 2026, month: 3, day: 1)) ?? .now
    }

    private var summary: String {
        guard let start else { return "Pick your arrival" }
        guard let end else { return "Now pick your departure" }
        let nights = calendar.dateComponents([.day], from: start, to: end).day ?? 0
        guard nights > 0 else { return "Pick a later day to leave" }
        return nights == 1 ? "1 night" : "\(nights) nights"
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Book your stay")
                    .font(.largeTitle.bold())

                CalendarRangeSelector(start: $start, end: $end, month: firstOfMarch, calendar: calendar)
                    .padding(16)
                    .background(.background, in: .rect(cornerRadius: 24))

                Label(summary, systemImage: "moon.stars.fill")
                    .font(.title3.weight(.semibold))
                    .foregroundStyle(.indigo)
            }
            .padding(20)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.25), .pink.opacity(0.15)], startPoint: .top, endPoint: .bottom))
        .environment(\.locale, Locale(identifier: "en_US"))
    }
}

#Preview {
    CalendarRangeSelectorDemo()
}
```

## Date Strip Picker

A horizontal strip of days that keeps the selected day centered as you scroll.

Category: Calendars. Minimum: iOS 18.0. Path: Components/Calendars/DateStripPicker/DateStripPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A horizontal strip of days that keeps the selected day centered as you scroll.
///
/// With Reduce Motion on, tapping a day jumps to it without scrolling.
struct DateStripPicker: View {
    @Binding var selection: Date
    var tint: Color

    private let days: [Date]
    private let calendar: Calendar

    @State private var centeredDay: Date?
    @ScaledMetric(relativeTo: .title2) private var itemWidth = 58.0
    @ScaledMetric(relativeTo: .title2) private var itemHeight = 84.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let spacing = 10.0

    init(
        selection: Binding<Date>,
        center: Date = .now,
        daysBefore: Int = 30,
        daysAfter: Int = 30,
        calendar: Calendar = .current,
        tint: Color = .indigo
    ) {
        _selection = selection
        self.tint = tint
        self.calendar = calendar
        days = DateStripPickerLogic.days(around: center, before: daysBefore, after: daysAfter, calendar: calendar)
    }

    var body: some View {
        GeometryReader { proxy in
            ScrollView(.horizontal) {
                LazyHStack(spacing: spacing) {
                    ForEach(days, id: \.self) { dayCell($0) }
                }
                .scrollTargetLayout()
            }
            .contentMargins(.horizontal, max(0, (proxy.size.width - itemWidth) / 2), for: .scrollContent)
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $centeredDay, anchor: .center)
        }
        .frame(height: itemHeight)
        .onAppear { centeredDay = closestDay(to: selection) }
        .onChange(of: centeredDay) { _, day in
            guard let day, day != calendar.startOfDay(for: selection) else { return }
            selection = day
        }
        .onChange(of: selection) { _, newValue in
            let day = closestDay(to: newValue)
            guard day != centeredDay else { return }
            withAnimation(reduceMotion ? nil : .snappy) { centeredDay = day }
        }
        .sensoryFeedback(.selection, trigger: centeredDay) { old, new in old != nil && new != nil }
    }

    private func dayCell(_ day: Date) -> some View {
        let isSelected = day == calendar.startOfDay(for: selection)
        let isToday = calendar.isDateInToday(day)

        return Button {
            withAnimation(reduceMotion ? nil : .snappy) { centeredDay = day }
        } label: {
            VStack(spacing: 4) {
                Text(format(day, Date.FormatStyle().weekday(.abbreviated)))
                    .font(.caption.weight(.medium))
                Text(format(day, Date.FormatStyle().day()))
                    .font(.title2.weight(.bold))
                Circle()
                    .fill(isToday ? (isSelected ? Color.white : tint) : Color.clear)
                    .frame(width: 5, height: 5)
            }
            .lineLimit(1)
            .minimumScaleFactor(0.7)
            .foregroundStyle(isSelected ? Color.white : Color.primary)
            .frame(width: itemWidth, height: itemHeight)
            .background(isSelected ? AnyShapeStyle(tint.gradient) : AnyShapeStyle(.thinMaterial), in: .rect(cornerRadius: 18))
            .scaleEffect(isSelected || reduceMotion ? 1 : 0.92)
            .animation(reduceMotion ? nil : .snappy, value: isSelected)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(format(day, Date.FormatStyle().weekday(.wide).day().month(.wide)))
        .accessibilityValue(isToday ? "Today" : "")
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private func closestDay(to date: Date) -> Date? {
        DateStripPickerLogic.closestDay(to: date, in: days, calendar: calendar)
    }

    private func format(_ date: Date, _ base: Date.FormatStyle) -> String {
        var style = base
        style.calendar = calendar
        style.timeZone = calendar.timeZone
        return date.formatted(style)
    }
}

/// The date math of the strip, apart from the view so it can be tested.
enum DateStripPickerLogic {
    /// Keeps a very wide request from building an enormous array.
    static let maximumDaysPerSide = 3_650

    static func days(around center: Date, before: Int, after: Int, calendar: Calendar) -> [Date] {
        let before = min(max(before, 0), maximumDaysPerSide)
        let after = min(max(after, 0), maximumDaysPerSide)
        let start = calendar.startOfDay(for: center)
        return (-before...after).compactMap { offset in
            calendar.date(byAdding: .day, value: offset, to: start).map { calendar.startOfDay(for: $0) }
        }
    }

    /// The same day when it is in the strip, otherwise the nearest end of the strip.
    static func closestDay(to date: Date, in days: [Date], calendar: Calendar) -> Date? {
        let day = calendar.startOfDay(for: date)
        return days.first { $0 >= day } ?? days.last
    }
}

// MARK: - Demo

struct DateStripPickerDemo: View {
    @State private var selection = Date.now

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo.opacity(0.3), .teal.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            DateStripPicker(selection: $selection)

            VStack {
                Text("Your agenda")
                    .font(.largeTitle.bold())
                Spacer()
                Text(selection, format: .dateTime.weekday(.wide).day().month(.wide))
                    .font(.title3.weight(.semibold))
                    .multilineTextAlignment(.center)
            }
            .padding(32)
        }
    }
}

#Preview {
    DateStripPickerDemo()
}
```

## Day Schedule Timeline

The hours of a day down a column, with each event drawn over the time it takes, overlapping events side by side and a line at the current time.

Category: Calendars. Minimum: iOS 18.0. Path: Components/Calendars/DayScheduleTimeline/DayScheduleTimeline.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An event of the day. `start` and `end` are minutes after midnight: 570 is half past nine.
struct DayScheduleTimelineEvent: Identifiable {
    let id: String
    let title: String
    let start: Int
    let end: Int
    var color: Color = .blue
}

nonisolated enum DayScheduleTimelineMath {
    static let minutesPerHour = 60

    struct Slot: Equatable, Sendable {
        /// The column of the event, from the leading edge.
        let column: Int
        /// How many columns share the width where the event is.
        let columns: Int
    }

    /// Puts events that overlap side by side. Each takes the first free column, and every
    /// event of a run of overlaps is as wide as the others, so none hides another.
    static func slots(for spans: [ClosedRange<Int>]) -> [Slot] {
        var slots = [Slot](repeating: Slot(column: 0, columns: 1), count: spans.count)
        let order = spans.indices.sorted { (spans[$0].lowerBound, spans[$0].upperBound) < (spans[$1].lowerBound, spans[$1].upperBound) }

        var run: [Int] = []
        var runEnd = Int.min
        var columnEnds: [Int] = []

        func close() {
            for index in run { slots[index] = Slot(column: slots[index].column, columns: max(columnEnds.count, 1)) }
            run = []
            columnEnds = []
        }

        for index in order {
            let span = spans[index]
            if span.lowerBound >= runEnd { close() }

            let column = columnEnds.firstIndex { $0 <= span.lowerBound } ?? columnEnds.count
            if column == columnEnds.count { columnEnds.append(span.upperBound) } else { columnEnds[column] = span.upperBound }
            slots[index] = Slot(column: column, columns: 1)
            run.append(index)
            runEnd = max(runEnd, span.upperBound)
        }
        close()
        return slots
    }

    /// How far down a minute of the day is, in a column that starts at `firstHour`.
    static func offset(minute: Int, firstHour: Int, hourHeight: CGFloat) -> CGFloat {
        CGFloat(minute - firstHour * minutesPerHour) / CGFloat(minutesPerHour) * hourHeight
    }
}

/// The hours of a day down a column, with each event drawn over the time it takes. Events
/// that overlap share the width, and a line marks the time it is.
///
/// A tap on an event sets `selection`. The column starts scrolled to its first event.
struct DayScheduleTimeline: View {
    let events: [DayScheduleTimelineEvent]
    @Binding var selection: DayScheduleTimelineEvent.ID?
    var hours: ClosedRange<Int> = 7...21
    var showsCurrentTime = true

    @ScaledMetric(relativeTo: .body) private var hourHeight = 88.0
    @ScaledMetric(relativeTo: .caption) private var labelWidth = 52.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let calendar = Calendar.current
    private let gap: CGFloat = 3
    private let cornerRadius: CGFloat = 10
    private let minutesPerHour = DayScheduleTimelineMath.minutesPerHour

    private var firstHour: Int { min(max(hours.lowerBound, 0), 23) }
    private var lastHour: Int { min(max(hours.upperBound, firstHour + 1), 24) }

    private func date(atMinute minute: Int) -> Date {
        calendar.date(byAdding: .minute, value: minute, to: calendar.startOfDay(for: .now)) ?? .now
    }

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView {
                ZStack(alignment: .topLeading) {
                    grid
                    eventLayer
                    if showsCurrentTime { currentTime }
                }
                .padding(.vertical, 12)
            }
            .onAppear {
                guard let first = events.map(\.start).min() else { return }
                proxy.scrollTo(min(max(first / minutesPerHour, firstHour), lastHour - 1), anchor: .top)
            }
        }
    }

    private var grid: some View {
        VStack(spacing: 0) {
            ForEach(firstHour..<lastHour, id: \.self) { hour in
                HStack(alignment: .top, spacing: 8) {
                    Text(date(atMinute: hour * minutesPerHour), format: .dateTime.hour())
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .frame(width: labelWidth, alignment: .trailing)
                        // The label sits on its line, not under it.
                        .alignmentGuide(.top) { $0[VerticalAlignment.center] }

                    Rectangle()
                        .fill(.quaternary)
                        .frame(height: 1)
                }
                .frame(height: hourHeight, alignment: .top)
                .id(hour)
            }
        }
    }

    private var eventLayer: some View {
        let slots = DayScheduleTimelineMath.slots(for: events.map { $0.start...max($0.end, $0.start) })

        return GeometryReader { proxy in
            let width = max(proxy.size.width - labelWidth - 8, 0)

            ForEach(Array(events.enumerated()), id: \.element.id) { index, event in
                let slot = slots[index]
                let column = width / CGFloat(slot.columns)
                let height = max(DayScheduleTimelineMath.offset(minute: event.end, firstHour: 0, hourHeight: hourHeight) - DayScheduleTimelineMath.offset(minute: event.start, firstHour: 0, hourHeight: hourHeight), hourHeight / 2)

                block(event)
                    .frame(width: max(column - gap, 0), height: max(height - gap, 0), alignment: .topLeading)
                    .offset(
                        x: labelWidth + 8 + column * CGFloat(slot.column),
                        y: DayScheduleTimelineMath.offset(minute: event.start, firstHour: firstHour, hourHeight: hourHeight)
                    )
            }
        }
    }

    private func block(_ event: DayScheduleTimelineEvent) -> some View {
        let isSelected = selection == event.id

        return Button {
            withAnimation(reduceMotion ? nil : .snappy(duration: 0.25)) {
                selection = isSelected ? nil : event.id
            }
        } label: {
            VStack(alignment: .leading, spacing: 2) {
                Text(event.title)
                    .font(.subheadline.weight(.semibold))
                    .lineLimit(2)
                Text(date(atMinute: event.start)...date(atMinute: event.end))
                    .font(.caption)
                    .opacity(0.8)
                    .lineLimit(1)
            }
            .foregroundStyle(isSelected ? AnyShapeStyle(DayScheduleTimelineContrastingForeground(background: event.color)) : AnyShapeStyle(.primary))
            .padding(.horizontal, cornerRadius)
            .padding(.vertical, 6)
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
            .background(event.color.opacity(isSelected ? 1 : 0.22), in: .rect(cornerRadius: cornerRadius))
            .overlay(alignment: .leading) {
                UnevenRoundedRectangle(cornerRadii: .init(topLeading: cornerRadius, bottomLeading: cornerRadius))
                    .fill(event.color)
                    .frame(width: 4)
            }
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private var currentTime: some View {
        TimelineView(.everyMinute) { context in
            let parts = calendar.dateComponents([.hour, .minute], from: context.date)
            let minute = (parts.hour ?? 0) * minutesPerHour + (parts.minute ?? 0)

            if minute >= firstHour * minutesPerHour, minute <= lastHour * minutesPerHour {
                HStack(spacing: 0) {
                    Circle()
                        .fill(.red)
                        .frame(width: 9, height: 9)
                    Rectangle()
                        .fill(.red)
                        .frame(height: 1.5)
                }
                .padding(.leading, labelWidth + 3)
                .offset(y: DayScheduleTimelineMath.offset(minute: minute, firstHour: firstHour, hourHeight: hourHeight) - 4.5)
                .allowsHitTesting(false)
                .accessibilityHidden(true)
            }
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct DayScheduleTimelineContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct DayScheduleTimelineDemo: View {
    private let events = [
        DayScheduleTimelineEvent(id: "standup", title: "Stand-up", start: 9 * 60, end: 9 * 60 + 30, color: .teal),
        DayScheduleTimelineEvent(id: "review", title: "Design review", start: 10 * 60, end: 11 * 60 + 30, color: .indigo),
        DayScheduleTimelineEvent(id: "interview", title: "Interview", start: 10 * 60 + 30, end: 11 * 60 + 15, color: .orange),
        DayScheduleTimelineEvent(id: "lunch", title: "Lunch with Ana", start: 13 * 60, end: 14 * 60, color: .green),
        DayScheduleTimelineEvent(id: "focus", title: "Focus time", start: 15 * 60, end: 17 * 60, color: .purple),
        DayScheduleTimelineEvent(id: "gym", title: "Gym", start: 18 * 60 + 30, end: 19 * 60 + 30, color: .pink),
    ]

    @State private var selection: String? = "review"

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            VStack(alignment: .leading, spacing: 2) {
                Text(Date.now, format: .dateTime.weekday(.wide))
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.secondary)
                Text(Date.now, format: .dateTime.day().month(.wide))
                    .font(.largeTitle.bold())
            }
            .padding(.horizontal, 20)
            .padding(.vertical, 12)

            Divider()

            DayScheduleTimeline(events: events, selection: $selection)
                .padding(.trailing, 16)
        }
    }
}

#Preview {
    DayScheduleTimelineDemo()
}
```

## Avatar Stack

Overlapping avatars of initials with a badge counting the rest.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/AvatarStack/AvatarStack.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum AvatarStackMath {
    /// Splits a number of people into the avatars to draw and the count for the badge.
    static func visibleAndOverflow(count: Int, maxVisible: Int) -> (visible: Int, overflow: Int) {
        let visible = min(max(count, 0), max(maxVisible, 0))
        return (visible, max(count, 0) - visible)
    }

    /// The first letters of the first and last words of a name.
    static func initials(of name: String) -> String {
        let words = name.split(whereSeparator: \.isWhitespace)
        guard let first = words.first?.first else { return "?" }
        guard words.count > 1, let last = words.last?.first else { return String(first).uppercased() }
        return "\(first)\(last)".uppercased()
    }
}

/// Overlapping avatars of initials, with a +N badge for everyone who does not fit.
struct AvatarStack: View {
    let names: [String]
    var maxVisible = 4
    var diameter: CGFloat = 48

    @ScaledMetric(relativeTo: .body) private var textScale = 1.0

    private var size: CGFloat { diameter * textScale }

    private static var palette: [Color] { [.indigo, .pink, .orange, .teal, .purple, .blue] }

    private var split: (visible: Int, overflow: Int) {
        AvatarStackMath.visibleAndOverflow(count: names.count, maxVisible: maxVisible)
    }

    var body: some View {
        HStack(spacing: -size * 0.28) {
            ForEach(Array(names.prefix(split.visible).enumerated()), id: \.offset) { index, name in
                circle(AvatarStackMath.initials(of: name), fill: color(for: name))
                    .zIndex(Double(-index))
                    .transition(.scale.combined(with: .opacity))
            }

            if split.overflow > 0 {
                circle("+\(split.overflow)", fill: .gray)
                    .contentTransition(.numericText())
                    .zIndex(Double(-split.visible))
                    .transition(.scale.combined(with: .opacity))
            }
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(names.isEmpty ? "No people" : names.formatted(.list(type: .and)))
    }

    private func circle(_ text: String, fill: Color) -> some View {
        Text(text)
            .font(.system(.title3, design: .rounded, weight: .bold))
            .minimumScaleFactor(0.6)
            .lineLimit(1)
            .foregroundStyle(.white)
            .frame(width: size, height: size)
            .background(fill.gradient, in: .circle)
            .overlay { Circle().strokeBorder(.background, lineWidth: 3) }
    }

    private func color(for name: String) -> Color {
        let total = name.unicodeScalars.reduce(0) { $0 + Int($1.value) }
        return Self.palette[total % Self.palette.count]
    }
}

// MARK: - Demo

struct AvatarStackDemo: View {
    private let everyone = ["Ana Ruiz", "Luis Vega", "Marta Gil", "Omar Haddad", "Nora Lind", "Pablo Sanz", "Yuki Mori", "Sara Blanco", "Tomás Rey"]

    @State private var count = 3
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 28) {
            VStack(alignment: .leading, spacing: 16) {
                Text("Design review")
                    .font(.system(.title, design: .rounded, weight: .bold))
                Text("Today at 16:30")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)

                AvatarStack(names: Array(everyone.prefix(count)), diameter: 64)
                    .padding(.top, 8)
            }
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.background, in: .rect(cornerRadius: 28))
            .shadow(color: .black.opacity(0.12), radius: 18, y: 10)

            HStack(spacing: 14) {
                Button("Remove", systemImage: "person.badge.minus") { change(by: -1) }
                    .disabled(count == 0)
                Button("Add", systemImage: "person.badge.plus") { change(by: 1) }
                    .disabled(count == everyone.count)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.purple.opacity(0.4), .orange.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing))
    }

    private func change(by amount: Int) {
        withAnimation(reduceMotion ? nil : .bouncy(duration: 0.4)) { count += amount }
    }
}

#Preview {
    AvatarStackDemo()
}
```

## Expandable Info Card

A card that expands to show more, with a chevron that turns.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/ExpandableInfoCard/ExpandableInfoCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A card that expands to show more, with a chevron that turns.
///
/// With Reduce Motion on, the details fade in place.
struct ExpandableInfoCard<Details: View>: View {
    let title: LocalizedStringResource
    var subtitle: LocalizedStringResource?
    var systemImage = "info.circle.fill"
    var tint: Color = .blue
    @ViewBuilder var details: () -> Details

    @State private var isExpanded = false
    @ScaledMetric(relativeTo: .body) private var iconSize = 40.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            Button {
                withAnimation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.45, bounce: 0.2)) {
                    isExpanded.toggle()
                }
            } label: {
                header
            }
            .buttonStyle(.plain)
            .accessibilityLabel(title)
            .accessibilityValue(isExpanded ? "Expanded" : "Collapsed")
            .accessibilityHint(subtitle ?? "")

            if isExpanded {
                details()
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding([.horizontal, .bottom], 16)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .move(edge: .top)))
            }
        }
        .background(.background, in: .rect(cornerRadius: 22))
        .clipShape(.rect(cornerRadius: 22))
        .shadow(color: .black.opacity(0.08), radius: 12, y: 6)
    }

    private var header: some View {
        HStack(spacing: 14) {
            Image(systemName: systemImage)
                .font(.title3)
                .foregroundStyle(ExpandableInfoCardContrastingForeground(background: tint))
                .frame(width: iconSize, height: iconSize)
                .background(tint.gradient, in: .rect(cornerRadius: 12))
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text(title)
                    .font(.headline)
                if let subtitle {
                    Text(subtitle)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
            }

            Spacer(minLength: 8)

            Image(systemName: "chevron.down")
                .font(.subheadline.weight(.bold))
                .foregroundStyle(.tertiary)
                .rotationEffect(.degrees(isExpanded ? 180 : 0))
                .accessibilityHidden(true)
        }
        .padding(16)
        .contentShape(.rect)
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct ExpandableInfoCardContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct ExpandableInfoCardDemo: View {
    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 14) {
                Text("Your order")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .padding(.bottom, 8)

                ExpandableInfoCard(title: "Shipping", subtitle: "Arrives on Thursday", systemImage: "shippingbox.fill", tint: .orange) {
                    Text("Your parcel left the warehouse this morning. You will get a message when the courier is one stop away.")
                }
                ExpandableInfoCard(title: "Warranty", subtitle: "Covered for two years", systemImage: "checkmark.shield.fill", tint: .green) {
                    Text("Repairs and replacements are free for two years. Keep your order number handy if you need to contact us.")
                }
                ExpandableInfoCard(title: "Returns", subtitle: "Free within 30 days", systemImage: "arrow.uturn.left.circle.fill", tint: .pink) {
                    Text("Print the label from your account, pack the item in its box and drop it at any collection point.")
                }
            }
            .padding(24)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.22), .teal.opacity(0.16)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    ExpandableInfoCardDemo()
}
```

## Holographic Card

A card with a holographic foil whose colors, glints and glare shift as you tilt it by dragging, drawn by a Metal shader.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/HolographicCard/HolographicCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum HolographicCardMath {
    /// How far the card leans for a drag, from -1 to 1 on each axis.
    /// Dragging half the card's size leans it all the way.
    static func tilt(for translation: CGSize, in size: CGSize) -> CGSize {
        guard size.width > 0, size.height > 0 else { return .zero }
        return CGSize(
            width: min(max(translation.width / (size.width / 2), -1), 1),
            height: min(max(translation.height / (size.height / 2), -1), 1)
        )
    }

    /// The degrees the card turns around its vertical axis for a lean from -1 to 1.
    /// `rotation3DEffect` mirrors in a right-to-left layout and a drag does not, so the turn is reversed there.
    static func yaw(for lean: Double, maxAngle: Double, layoutDirection: LayoutDirection) -> Double {
        let turn = lean * maxAngle
        return layoutDirection == .rightToLeft ? -turn : turn
    }

    /// The function in `HolographicCard.metal`, with its arguments in the order it declares them.
    static func shader(size: CGSize, tilt: CGSize, intensity: Double) -> Shader {
        ShaderLibrary.HolographicCardFoil(.float2(size), .float2(tilt), .float(intensity))
    }
}

/// A card with a holographic foil that shifts as you tilt it by dragging, drawn by a Metal shader.
///
/// - Important: Copy two files into the same target: `HolographicCard.swift` and `HolographicCard.metal`.
///
/// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map, shows a placeholder.
///
/// With Reduce Motion on, the card stays flat and the foil stays still.
struct HolographicCard<Content: View>: View {
    /// The degrees the card leans at the end of a drag.
    var maxAngle: Double = 16
    var cornerRadius: CGFloat = 28
    /// How much foil the card has, from 0 for none to 1.
    var intensity: Double = 1
    @ViewBuilder var content: () -> Content

    @GestureState private var tilt = CGSize.zero
    @State private var size = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        content()
            .onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
            .modifier(
                HolographicCardSurface(
                    tilt: reduceMotion ? .zero : tilt,
                    size: size,
                    maxAngle: maxAngle,
                    cornerRadius: cornerRadius,
                    intensity: intensity
                )
            )
            .gesture(drag)
            .animation(.spring(duration: 0.5, bounce: 0.3), value: tilt)
    }

    private var drag: some Gesture {
        DragGesture(coordinateSpace: .global)
            .updating($tilt) { value, tilt, _ in
                tilt = HolographicCardMath.tilt(for: value.translation, in: size)
            }
    }
}

/// `Animatable`, so the foil follows the same spring as the lean: a shader's arguments do not animate by themselves.
private struct HolographicCardSurface: ViewModifier, Animatable {
    var tilt: CGSize
    let size: CGSize
    let maxAngle: Double
    let cornerRadius: CGFloat
    let intensity: Double

    @Environment(\.layoutDirection) private var layoutDirection

    nonisolated var animatableData: CGSize.AnimatableData {
        get { tilt.animatableData }
        set { tilt.animatableData = newValue }
    }

    func body(content: Content) -> some View {
        content
            .colorEffect(HolographicCardMath.shader(size: size, tilt: tilt, intensity: intensity))
            .clipShape(.rect(cornerRadius: cornerRadius))
            .shadow(color: .black.opacity(0.4), radius: 24, y: 16)
            .rotation3DEffect(.degrees(-tilt.height * maxAngle), axis: (x: 1, y: 0, z: 0), perspective: 0.6)
            .rotation3DEffect(
                .degrees(HolographicCardMath.yaw(for: tilt.width, maxAngle: maxAngle, layoutDirection: layoutDirection)),
                axis: (x: 0, y: 1, z: 0),
                perspective: 0.6
            )
    }
}

// MARK: - Demo

struct HolographicCardDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.04, green: 0.04, blue: 0.09), Color(red: 0.14, green: 0.09, blue: 0.27)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            HolographicCard {
                card
            }
            .padding(.horizontal, 44)
        }
    }

    private var card: some View {
        VStack(alignment: .leading, spacing: 8) {
            HStack {
                Image(systemName: "sparkles")
                    .font(.title)
                    .accessibilityHidden(true)

                Spacer()

                Text("No. 001")
                    .font(.footnote.monospaced())
                    .opacity(0.7)
            }

            Spacer()

            Text("Prism Pass")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
            Text("Drag to tilt the card")
                .font(.subheadline)
                .opacity(0.8)
        }
        .foregroundStyle(.white)
        .padding(24)
        .frame(maxWidth: .infinity, alignment: .leading)
        .aspectRatio(0.68, contentMode: .fit)
        .background(
            LinearGradient(
                colors: [
                    Color(red: 0.1, green: 0.12, blue: 0.3),
                    Color(red: 0.32, green: 0.12, blue: 0.42),
                    Color(red: 0.06, green: 0.06, blue: 0.14),
                ],
                startPoint: .topLeading,
                endPoint: .bottomTrailing
            )
        )
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    HolographicCardDemo()
}
```

Shader: Components/Cards/HolographicCard/HolographicCard.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// A repeatable pseudo-random number from 0 to 1 for each cell of a grid.
static float HolographicCardRandom(float2 cell) {
    uint2 seed = uint2(int2(cell));
    uint mixed = (seed.x * 0x9E3779B1u) ^ (seed.y * 0x85EBCA77u);
    mixed ^= mixed >> 15;
    mixed *= 0x2C1B3C6Du;
    mixed ^= mixed >> 12;
    return float(mixed & 0xFFFFu) / 65535.0;
}

// For SwiftUI's `colorEffect`. Adds a holographic foil to each pixel of a view
// of `size` points. `tilt` runs from -1 to 1 on each axis, and moves the colors
// and the glare as a real card does when it turns under a light.
[[ stitchable ]] half4 HolographicCardFoil(float2 position, half4 color, float2 size, float2 tilt, float intensity) {
    if (color.a <= 0.0) {
        return color;
    }
    float2 fromCenter = position / max(size, float2(1.0)) - 0.5;

    // A diffraction foil changes hue with the viewing angle, so its bands of
    // color slide across the card as it tilts.
    float angle = dot(fromCenter, float2(0.9, 0.5)) * 1.4 + dot(tilt, float2(0.8, 0.6));
    float3 spectrum = 0.5 + 0.5 * cos(6.2831853 * (angle + float3(0.0, 0.33, 0.67)));

    // Specks of glitter, one in each cell of a grid and somewhere off its
    // center. Each catches the light at its own angle, so they twinkle in turn.
    float2 grid = position / 5.0;
    float2 cell = floor(grid);
    float2 speck = 0.5 + 0.56 * (float2(HolographicCardRandom(cell + 17.0), HolographicCardRandom(cell + 43.0)) - 0.5);
    float shape = saturate(1.0 - length(grid - cell - speck) / 0.22);
    float facing = 0.5 + 0.5 * cos(6.2831853 * (HolographicCardRandom(cell) + angle * 2.0));
    float glint = smoothstep(0.55, 1.0, facing) * shape * shape;

    // The glare of a light above the card slides against the tilt.
    float2 fromGlare = fromCenter + tilt * 0.35;
    float glare = exp(-6.0 * dot(fromGlare, fromGlare));

    float3 foil = intensity * (spectrum * (0.14 + 0.4 * glare) + glint * (0.3 + 0.7 * glare));

    // Screen the foil over the pixel, so it only ever adds light. Colors come
    // premultiplied by their alpha.
    float3 base = float3(color.rgb) / color.a;
    float3 lit = 1.0 - (1.0 - base) * (1.0 - saturate(foil));
    return half4(half3(lit * color.a), color.a);
}
```

## Swipeable Card Stack

A deck of cards you swipe away to reveal the next one.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/SwipeableCardStack/SwipeableCardStack.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SwipeableCardStackDirection: Equatable, Sendable {
    case left, right

    var sign: CGFloat { self == .left ? -1 : 1 }
}

enum SwipeableCardStackLogic {
    /// Decides where a released card goes from where its momentum would carry it,
    /// so both a long drag and a short flick count, and a flick back cancels.
    static func direction(predictedEnd: CGFloat, width: CGFloat, threshold: CGFloat = 0.35) -> SwipeableCardStackDirection? {
        guard width > 0, abs(predictedEnd) >= width * threshold else { return nil }
        return predictedEnd > 0 ? .right : .left
    }

    /// One swiped card still flying away, the top card and three behind it.
    /// Empty when the deck shrank below the cards already swiped.
    static func positions(top: Int, count: Int, loops: Bool) -> [Int] {
        guard count > 0 else { return [] }
        let start = max(top - 1, 0)
        let end = loops ? top + 4 : min(top + 4, count)
        return start < end ? Array(start..<end) : []
    }
}

/// A deck of cards. Swipe the top one away to reveal the next.
///
/// With Reduce Motion on, a swiped card fades out instead of flying away.
struct SwipeableCardStack<Item, Card: View>: View {
    let items: [Item]
    var loops = false
    var threshold: CGFloat = 0.35
    var onSwipe: (Item, SwipeableCardStackDirection) -> Void = { _, _ in }
    @ViewBuilder var card: (Item) -> Card

    @State private var top = 0
    @State private var drag = CGSize.zero
    @State private var lastDirection = SwipeableCardStackDirection.right
    @State private var size = CGSize.zero
    @GestureState private var isDragging = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private var width: CGFloat { size.width }

    /// Gestures and swipe directions are in screen terms, but layout mirrors in right-to-left
    /// layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var hasTopCard: Bool { !items.isEmpty && (loops || top < items.count) }

    private var positions: [Int] {
        SwipeableCardStackLogic.positions(top: top, count: items.count, loops: loops)
    }

    private var dragProgress: CGFloat {
        min(abs(drag.width) / max(width * threshold, 1), 1)
    }

    var body: some View {
        ZStack {
            ForEach(positions, id: \.self) { position in
                let depth = max(CGFloat(position - top) - dragProgress, 0)

                card(items[position % items.count])
                    .scaleEffect(1 - depth * 0.06)
                    .offset(offset(of: position, depth: depth))
                    .rotationEffect(.degrees(rotation(of: position)))
                    .opacity(position < top || position - top > 2 ? 0 : 1)
                    .zIndex(Double(-position))
                    .accessibilityElement(children: .combine)
                    .accessibilityHidden(position != top)
                    .accessibilityAction(named: "Swipe left") { swipe(.left) }
                    .accessibilityAction(named: "Swipe right") { swipe(.right) }
            }
        }
        .onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
        .contentShape(.rect)
        .gesture(dragGesture)
        .onChange(of: isDragging) { _, dragging in
            if !dragging {
                withAnimation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.4, bounce: 0.3)) { drag = .zero }
            }
        }
    }

    private func offset(of position: Int, depth: CGFloat) -> CGSize {
        if position < top {
            return CGSize(width: reduceMotion ? 0 : lastDirection.sign * forward * width * 1.5, height: 0)
        }
        if position == top {
            return CGSize(width: drag.width, height: drag.height * 0.25)
        }
        // Scaling shrinks a card around its center, so move it down by that amount plus the visible peek.
        return CGSize(width: 0, height: depth * (size.height * 0.03 + 14))
    }

    private func rotation(of position: Int) -> Double {
        guard !reduceMotion, width > 0 else { return 0 }
        if position < top { return Double(lastDirection.sign * forward) * 18 }
        return position == top ? Double(drag.width / width) * 14 : 0
    }

    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 8)
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { value in
                if hasTopCard { drag = CGSize(width: value.translation.width * forward, height: value.translation.height) }
            }
            .onEnded { value in
                let predictedEnd = value.predictedEndTranslation.width
                if let direction = SwipeableCardStackLogic.direction(predictedEnd: predictedEnd, width: width, threshold: threshold) {
                    swipe(direction)
                }
            }
    }

    private func swipe(_ direction: SwipeableCardStackDirection) {
        guard hasTopCard else { return }
        let item = items[top % items.count]
        withAnimation(reduceMotion ? .easeInOut(duration: 0.2) : .snappy(duration: 0.4)) {
            lastDirection = direction
            top += 1
            drag = .zero
        }
        onSwipe(item, direction)
    }
}

// MARK: - Demo

private struct DemoPlace {
    let name: String
    let symbol: String
    let colors: [Color]
}

struct SwipeableCardStackDemo: View {
    @State private var liked = 0
    @State private var passed = 0

    private let places = [
        DemoPlace(name: "Kyoto", symbol: "leaf.fill", colors: [.pink, .purple]),
        DemoPlace(name: "Reykjavik", symbol: "snowflake", colors: [.cyan, .blue]),
        DemoPlace(name: "Marrakesh", symbol: "sun.max.fill", colors: [.orange, .red]),
        DemoPlace(name: "Lisbon", symbol: "tram.fill", colors: [.yellow, .orange]),
        DemoPlace(name: "Patagonia", symbol: "mountain.2.fill", colors: [.teal, .indigo]),
    ]

    var body: some View {
        VStack(spacing: 28) {
            Text("Where next?")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))

            SwipeableCardStack(items: places, loops: true) { place, direction in
                if direction == .right { liked += 1 } else { passed += 1 }
            } card: { place in
                cardView(for: place)
            }
            .padding(.horizontal, 32)
            .frame(maxHeight: 500)
            .padding(.bottom, 32)

            HStack(spacing: 32) {
                Label("\(passed)", systemImage: "xmark")
                    .accessibilityLabel("Passed \(passed)")
                Label("\(liked)", systemImage: "heart.fill")
                    .accessibilityLabel("Liked \(liked)")
            }
            .font(.title3.weight(.semibold))
            .monospacedDigit()
            .foregroundStyle(.secondary)
        }
        .padding(.vertical, 24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.indigo.opacity(0.18), .pink.opacity(0.12)], startPoint: .top, endPoint: .bottom))
    }

    private func cardView(for place: DemoPlace) -> some View {
        VStack(spacing: 16) {
            Image(systemName: place.symbol)
                .font(.system(.largeTitle))
                .imageScale(.large)
                .accessibilityHidden(true)
            Text(place.name)
                .font(.system(.title, design: .rounded, weight: .bold))
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: place.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 32))
        .shadow(color: .black.opacity(0.18), radius: 14, y: 8)
    }
}

#Preview {
    SwipeableCardStackDemo()
}
```

## Tilt Card

A card that tilts in 3D toward the finger with a moving highlight.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/TiltCard/TiltCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A card that leans in 3D toward the finger, with a highlight that follows it.
///
/// `restingPoint` is where the card leans while nobody touches it. `nil` keeps it flat.
/// With Reduce Motion on, the card stays flat and only the highlight moves.
struct TiltCard<Content: View>: View {
    var maxAngle: Double = 14
    var cornerRadius: CGFloat = 28
    var restingPoint: UnitPoint?
    @ViewBuilder var content: () -> Content

    @GestureState private var touchPoint: UnitPoint?
    @State private var size = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private var focus: UnitPoint? { touchPoint ?? restingPoint }

    private var pitch: Double {
        guard let focus, !reduceMotion else { return 0 }
        return (0.5 - focus.y) * 2 * maxAngle
    }

    private var yaw: Double {
        guard let focus, !reduceMotion else { return 0 }
        return (focus.x - 0.5) * 2 * maxAngle
    }

    var body: some View {
        content()
            .overlay { highlight }
            .clipShape(.rect(cornerRadius: cornerRadius))
            .onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
            .gesture(tilt)
            .shadow(color: .black.opacity(0.35), radius: 24, y: 16)
            .rotation3DEffect(.degrees(pitch), axis: (x: 1, y: 0, z: 0), perspective: 0.6)
            .rotation3DEffect(.degrees(yaw), axis: (x: 0, y: 1, z: 0), perspective: 0.6)
            .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.3), value: touchPoint)
    }

    private var highlight: some View {
        RadialGradient(
            colors: [.white.opacity(0.35), .white.opacity(0)],
            center: focus ?? .center,
            startRadius: 0,
            endRadius: max(size.width, size.height) * 0.8
        )
        .blendMode(.plusLighter)
        .opacity(focus == nil ? 0 : 1)
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    private var tilt: some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($touchPoint) { value, state, _ in
                guard size.width > 0, size.height > 0 else { return }
                // Gestures report screen points, but a unit point counts from the leading edge.
                let x = min(max(value.location.x / size.width, 0), 1)
                state = UnitPoint(
                    x: layoutDirection == .rightToLeft ? 1 - x : x,
                    y: min(max(value.location.y / size.height, 0), 1)
                )
            }
    }
}

// MARK: - Demo

struct TiltCardDemo: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { context in
                let time = context.date.timeIntervalSinceReferenceDate * 1.6

                TiltCard(restingPoint: reduceMotion ? nil : UnitPoint(x: 0.5 + 0.45 * cos(time), y: 0.5 + 0.45 * sin(time))) {
                    card
                }
            }
            .padding(.horizontal, 44)
        }
    }

    private var card: some View {
        VStack(alignment: .leading, spacing: 8) {
            Image(systemName: "sparkles")
                .font(.largeTitle)
                .accessibilityHidden(true)

            Spacer()

            Text("Aurora Pass")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
            Text("Touch and move your finger")
                .font(.subheadline)
                .opacity(0.8)
        }
        .foregroundStyle(.white)
        .padding(24)
        .frame(maxWidth: .infinity, alignment: .leading)
        .aspectRatio(0.68, contentMode: .fit)
        .background(LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    TiltCardDemo()
}
```

## Wallet Card Stack

A stack of cards where the one you tap rises to the top with its details and the rest wait in a pile below.

Category: Cards. Minimum: iOS 18.0. Path: Components/Cards/WalletCardStack/WalletCardStack.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum WalletCardStackMath {
    /// The distance between the tops of two cards in the stack.
    ///
    /// It is `peek`, or less when the stack would not fit in `height`.
    static func step(count: Int, peek: Double, cardHeight: Double, height: Double) -> Double {
        guard count > 1, peek.isFinite, cardHeight.isFinite, height.isFinite else { return 0 }
        let room = max(height - cardHeight, 0)
        return min(max(peek, 0), room / Double(count - 1))
    }

    /// Where the top of each card goes.
    ///
    /// With no card open they sit one below another, `step` apart. With one open, it goes to the
    /// top and the others gather in a pile that keeps `pileHeight` at the bottom of `height`.
    static func tops(count: Int, selected: Int?, step: Double, height: Double, pileHeight: Double, pileStep: Double = 14) -> [Double] {
        guard count > 0 else { return [] }
        guard let selected, (0..<count).contains(selected) else {
            return (0..<count).map { Double($0) * step }
        }

        let others = count - 1
        let gap = others > 0 ? min(max(pileStep, 0), max(pileHeight, 0) / Double(others)) : 0
        var place = 0
        return (0..<count).map { index in
            guard index != selected else { return 0 }
            defer { place += 1 }
            return height - pileHeight + Double(place) * gap
        }
    }
}

/// A stack of cards, each one showing its top edge above the next. Tap a card and it rises to the
/// top with its details below, while the others wait in a pile at the bottom. Tap again to close.
///
/// Give it the height it can use: the stack tightens to fit, and the pile sits at the bottom edge.
/// With Reduce Motion on, the cards change places without sliding.
struct WalletCardStack<Item: Identifiable, Card: View, Detail: View>: View {
    let items: [Item]
    /// The card that is open, or `nil` when all of them are in the stack.
    @Binding var selection: Item.ID?
    var cardHeight: CGFloat = 200
    /// How much of a card shows above the next one in the stack. It grows with Dynamic Type.
    var peek: CGFloat = 64
    /// How much room the other cards keep at the bottom while one is open.
    var pileHeight: CGFloat = 76
    @ViewBuilder var card: (Item) -> Card
    @ViewBuilder var detail: (Item) -> Detail

    private let spacing: CGFloat = 16
    private let shadowRoom: CGFloat = 40

    @State private var height: CGFloat = 0
    @ScaledMetric(relativeTo: .headline) private var textScale = 1.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let selected = items.firstIndex { $0.id == selection }
        let step = WalletCardStackMath.step(count: items.count, peek: peek * textScale, cardHeight: cardHeight, height: height)
        let tops = WalletCardStackMath.tops(count: items.count, selected: selected, step: step, height: height, pileHeight: pileHeight)

        ZStack(alignment: .top) {
            if let selected {
                detail(items[selected])
                    .frame(maxWidth: .infinity, alignment: .top)
                    .frame(height: max(height - cardHeight - pileHeight - spacing * 2, 0), alignment: .top)
                    .clipped()
                    .offset(y: cardHeight + spacing)
                    .transition(.opacity)
            }

            ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                // In the stack only the top edge of a card is free, so that is where assistive touches land.
                let shown = selected == nil && index < items.count - 1 ? min(step, cardHeight) : cardHeight

                Button {
                    selection = selection == nil ? item.id : nil
                } label: {
                    card(item)
                        .frame(height: cardHeight)
                }
                .buttonStyle(WalletCardStackPressStyle())
                .offset(y: tops[index])
                .zIndex(Double(index + 1))
                .accessibilityActivationPoint(UnitPoint(x: 0.5, y: cardHeight > 0 ? shown / cardHeight / 2 : 0.5))
                .accessibilityAddTraits(index == selected ? .isSelected : [])
                .accessibilityHint(index == selected ? "Returns to the stack" : "Shows its details")
                .accessibilityHidden(selected != nil && index != selected)
                .accessibilitySortPriority(index == selected ? 1 : 0)
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { height = $0 }
        // Cuts the pile at the bottom edge and leaves room for the shadows of the cards everywhere else.
        .mask { Rectangle().padding(.horizontal, -shadowRoom).padding(.top, -shadowRoom) }
        .animation(reduceMotion ? nil : .spring(duration: 0.5, bounce: 0.2), value: selection)
        .accessibilityAction(.escape) { selection = nil }
    }
}

private struct WalletCardStackPressStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .scaleEffect(configuration.isPressed ? 0.98 : 1)
            .animation(.easeOut(duration: 0.15), value: configuration.isPressed)
    }
}

// MARK: - Demo

private struct WalletCardStackDemoCard: Identifiable {
    let id: Int
    let name: String
    let digits: String
    let symbol: String
    let colors: [Color]
    let payments: [(place: String, symbol: String, amount: Double)]
}

struct WalletCardStackDemo: View {
    private let cards = [
        WalletCardStackDemoCard(id: 0, name: "Everyday", digits: "4821", symbol: "creditcard.fill", colors: [.indigo, .blue], payments: [
            ("Corner Bakery", "cup.and.saucer.fill", 6.4), ("Bookshop", "book.fill", 18.9), ("Groceries", "cart.fill", 52.3),
        ]),
        WalletCardStackDemoCard(id: 1, name: "Savings", digits: "0375", symbol: "leaf.fill", colors: [.teal, .green], payments: [
            ("Monthly transfer", "arrow.down.circle.fill", 250), ("Interest", "percent", 3.12), ("Round-ups", "plus.circle.fill", 14.75),
        ]),
        WalletCardStackDemoCard(id: 2, name: "Travel", digits: "9164", symbol: "airplane", colors: [.orange, .pink], payments: [
            ("Night train", "tram.fill", 74), ("Harbor Hotel", "bed.double.fill", 139.5), ("Museum", "building.columns.fill", 16),
        ]),
        WalletCardStackDemoCard(id: 3, name: "Transit", digits: "2208", symbol: "bus.fill", colors: [.purple, .indigo], payments: [
            ("Line 4", "bus.fill", 1.9), ("Top up", "plus.circle.fill", 20), ("Line 12", "bus.fill", 1.9),
        ]),
    ]

    @State private var selection: Int?

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("Wallet")
                .font(.largeTitle.bold())

            WalletCardStack(items: cards, selection: $selection) { card in
                face(of: card)
            } detail: { card in
                payments(of: card)
            }
            .ignoresSafeArea(edges: .bottom)
        }
        .padding([.horizontal, .top], 20)
        .background(Color(.systemGroupedBackground))
    }

    private func face(of card: WalletCardStackDemoCard) -> some View {
        VStack(alignment: .leading) {
            HStack {
                Text(card.name)
                    .font(.headline)
                Spacer()
                Image(systemName: card.symbol)
                    .font(.title3)
            }
            Spacer()
            Text("•••• \(card.digits)")
                .font(.title3.monospacedDigit())
        }
        .padding(20)
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: card.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 20))
        .shadow(color: .black.opacity(0.3), radius: 10)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("\(card.name), ending in \(card.digits)")
    }

    private func payments(of card: WalletCardStackDemoCard) -> some View {
        VStack(alignment: .leading, spacing: 14) {
            Text("Latest")
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.secondary)

            ForEach(card.payments, id: \.place) { payment in
                HStack(spacing: 12) {
                    Image(systemName: payment.symbol)
                        .frame(width: 32)
                        .foregroundStyle(card.colors[0])
                        .accessibilityHidden(true)
                    Text(payment.place)
                    Spacer()
                    Text(payment.amount, format: .currency(code: "USD"))
                        .monospacedDigit()
                        .foregroundStyle(.secondary)
                }
                .accessibilityElement(children: .combine)
            }
        }
        .padding(16)
        .background(.background, in: .rect(cornerRadius: 16))
    }
}

#Preview {
    WalletCardStackDemo()
}
```

## Animated Bar Chart

Bars that grow from the baseline one after another with a spring.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/AnimatedBarChart/AnimatedBarChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct AnimatedBarChartEntry: Hashable {
    let label: String
    let value: Double
}

/// Bars that grow from the baseline one after another, and again whenever the data changes.
///
/// With Reduce Motion on, the bars are drawn at their final height.
struct AnimatedBarChart: View {
    let entries: [AnimatedBarChartEntry]
    var tint: Color = .indigo
    var stagger: Double = 0.09

    @State private var isRevealed = false
    @ScaledMetric(relativeTo: .caption2) private var valueHeight = 22.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 8) {
            GeometryReader { proxy in
                HStack(spacing: 10) {
                    ForEach(Array(entries.enumerated()), id: \.offset) { index, entry in
                        column(entry, index: index, plotHeight: max(0, proxy.size.height - valueHeight))
                    }
                }
            }

            HStack(spacing: 10) {
                ForEach(Array(entries.enumerated()), id: \.offset) { _, entry in
                    Text(entry.label)
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .lineLimit(1)
                        .minimumScaleFactor(0.6)
                        .frame(maxWidth: .infinity)
                }
            }
            .accessibilityHidden(true)
        }
        .task(id: entries) {
            guard !reduceMotion else {
                isRevealed = true
                return
            }
            var reset = Transaction()
            reset.disablesAnimations = true
            withTransaction(reset) { isRevealed = false }
            try? await Task.sleep(for: .milliseconds(50))
            guard !Task.isCancelled else { return }
            isRevealed = true
        }
    }

    private func column(_ entry: AnimatedBarChartEntry, index: Int, plotHeight: CGFloat) -> some View {
        let isShown = isRevealed || reduceMotion
        let ratio = AnimatedBarChartLogic.ratio(of: entry.value, in: entries.map(\.value))
        let valueText = entry.value.formatted()

        return VStack(spacing: 4) {
            Text(valueText)
                .font(.caption2.weight(.semibold))
                .lineLimit(1)
                .minimumScaleFactor(0.6)
                .opacity(isShown ? 1 : 0)

            UnevenRoundedRectangle(topLeadingRadius: 8, topTrailingRadius: 8)
                .fill(tint.gradient)
                .frame(height: isShown ? plotHeight * ratio : 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottom)
        .animation(
            reduceMotion ? nil : .spring(duration: 0.6, bounce: 0.3).delay(Double(index) * max(0, stagger)),
            value: isRevealed
        )
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(entry.label)
        .accessibilityValue(valueText)
    }
}

enum AnimatedBarChartLogic {
    /// How tall a bar is compared with the tallest, from 0 to 1.
    static func ratio(of value: Double, in values: [Double]) -> Double {
        guard value.isFinite, value > 0,
              let highest = values.filter(\.isFinite).max(), highest > 0 else { return 0 }
        return min(value / highest, 1)
    }
}

// MARK: - Demo

struct AnimatedBarChartDemo: View {
    @State private var index = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let weeks: [(title: String, values: [Double])] = [
        ("This week", [12, 19, 8, 24, 16, 30, 22]),
        ("Last week", [20, 11, 27, 14, 29, 9, 17]),
    ]

    private var week: (title: String, values: [Double]) {
        weeks[index % weeks.count]
    }

    private var entries: [AnimatedBarChartEntry] {
        zip(["M", "T", "W", "T", "F", "S", "S"], week.values).map { AnimatedBarChartEntry(label: $0, value: $1) }
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Workouts")
                .font(.largeTitle.bold())
            Text(week.title)
                .font(.title3)
                .foregroundStyle(.secondary)

            AnimatedBarChart(entries: entries)
                .padding(.top, 24)
        }
        .padding(24)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(2.6))
                guard !Task.isCancelled else { return }
                index = (index + 1) % weeks.count
            }
        }
    }
}

#Preview {
    AnimatedBarChartDemo()
}
```

## Animated Donut Chart

A donut chart whose segments grow in one by one, and the selected segment lifts out.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/AnimatedDonutChart/AnimatedDonutChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import SwiftUI

struct AnimatedDonutChartSegment: Identifiable, Hashable {
    let id: String
    let value: Double
    let color: Color
}

/// A donut chart whose segments grow in one by one, and the selected segment lifts out.
///
/// Tap a segment or its legend row to select it. With Reduce Motion on, the whole donut
/// appears at once.
struct AnimatedDonutChart: View {
    let segments: [AnimatedDonutChartSegment]
    @Binding var selection: String?

    @State private var revealedCount = 0
    @State private var touchedAngle: Double?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var visibleCount: Int { reduceMotion ? segments.count : revealedCount }
    private var total: Double { AnimatedDonutChartLogic.total(of: segments) }

    private var visibleTotal: Double {
        AnimatedDonutChartLogic.total(of: Array(segments.prefix(visibleCount)))
    }

    private var selectedSegment: AnimatedDonutChartSegment? {
        segments.first { $0.id == selection }
    }

    var body: some View {
        VStack(spacing: 24) {
            ZStack {
                chart
                centerLabel
            }
            .aspectRatio(1, contentMode: .fit)

            legend
        }
        .task(id: segments) {
            guard !reduceMotion else {
                revealedCount = segments.count
                return
            }
            var reset = Transaction()
            reset.disablesAnimations = true
            withTransaction(reset) { revealedCount = 0 }

            for count in segments.indices {
                try? await Task.sleep(for: .milliseconds(count == 0 ? 60 : 260))
                guard !Task.isCancelled else { return }
                withAnimation(.smooth(duration: 0.35)) { revealedCount = count + 1 }
            }
        }
        .onChange(of: touchedAngle) { oldValue, newValue in
            guard let newValue,
                  let id = AnimatedDonutChartLogic.segmentID(atAngleValue: newValue, in: segments) else { return }
            selection = oldValue == nil && selection == id ? nil : id
        }
    }

    private var chart: some View {
        Chart {
            ForEach(Array(segments.enumerated()), id: \.element.id) { index, segment in
                SectorMark(
                    angle: .value("Value", index < visibleCount ? AnimatedDonutChartLogic.sanitized(segment.value) : 0),
                    innerRadius: .ratio(0.62),
                    outerRadius: .ratio(selection == segment.id ? 1 : 0.9),
                    angularInset: 1.5
                )
                .cornerRadius(5)
                .foregroundStyle(segment.color)
                .opacity(selection == nil || selection == segment.id ? 1 : 0.4)
            }

            // The empty part of the ring, so that early segments do not fill the circle.
            SectorMark(
                angle: .value("Remaining", total > 0 ? max(total - visibleTotal, 0) : 1),
                innerRadius: .ratio(0.62),
                outerRadius: .ratio(0.9)
            )
            .foregroundStyle(total > 0 ? Color.clear : Color.secondary.opacity(0.2))
        }
        .chartLegend(.hidden)
        .chartAngleSelection(value: $touchedAngle)
        .animation(reduceMotion ? nil : .snappy, value: selection)
        .accessibilityHidden(true)
    }

    private var centerLabel: some View {
        VStack(spacing: 2) {
            Text(selectedSegment?.id ?? "Total")
                .font(.subheadline)
                .foregroundStyle(.secondary)
            Text((selectedSegment?.value ?? total).formatted())
                .font(.title.bold())
                .contentTransition(reduceMotion ? .identity : .numericText())
                .animation(reduceMotion ? nil : .snappy, value: selection)
        }
        .lineLimit(1)
        .minimumScaleFactor(0.5)
        .frame(maxWidth: 130)
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    private var legend: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: 150), alignment: .leading)], alignment: .leading, spacing: 10) {
            ForEach(segments) { segment in
                let isSelected = selection == segment.id
                let percent = AnimatedDonutChartLogic.share(of: segment, in: segments).formatted(.percent.precision(.fractionLength(0)))

                Button {
                    selection = isSelected ? nil : segment.id
                } label: {
                    HStack(spacing: 8) {
                        Circle().fill(segment.color).frame(width: 10, height: 10)
                        Text(segment.id)
                        Spacer(minLength: 4)
                        Text(percent).foregroundStyle(.secondary)
                    }
                    .font(isSelected ? .subheadline.weight(.semibold) : .subheadline)
                    // A row is too short to hit. The padding widens what answers to a touch,
                    // and the same padding taken back keeps the legend as compact as it was.
                    .padding(.vertical, 13)
                    .contentShape(.rect)
                    .padding(.vertical, -13)
                }
                .buttonStyle(.plain)
                .accessibilityLabel(segment.id)
                .accessibilityValue("\(segment.value.formatted()), \(percent)")
                .accessibilityAddTraits(isSelected ? .isSelected : [])
            }
        }
    }
}

enum AnimatedDonutChartLogic {
    static func sanitized(_ value: Double) -> Double {
        value.isFinite ? max(value, 0) : 0
    }

    static func total(of segments: [AnimatedDonutChartSegment]) -> Double {
        segments.reduce(0) { $0 + sanitized($1.value) }
    }

    static func share(of segment: AnimatedDonutChartSegment, in segments: [AnimatedDonutChartSegment]) -> Double {
        let total = total(of: segments)
        return total > 0 ? sanitized(segment.value) / total : 0
    }

    /// Finds the segment under an angle, given in the same units as the values.
    static func segmentID(atAngleValue angle: Double, in segments: [AnimatedDonutChartSegment]) -> String? {
        guard angle.isFinite, angle >= 0 else { return nil }
        var cumulative = 0.0
        for segment in segments where sanitized(segment.value) > 0 {
            cumulative += sanitized(segment.value)
            if angle <= cumulative { return segment.id }
        }
        return nil
    }
}

// MARK: - Demo

struct AnimatedDonutChartDemo: View {
    @State private var selection: String?
    @State private var isAlternate = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var segments: [AnimatedDonutChartSegment] {
        let values: [Double] = isAlternate ? [980, 240, 310, 160] : [1_120, 420, 180, 290]
        return zip(zip(["Housing", "Food", "Travel", "Fun"], values), [Color.indigo, .teal, .orange, .pink])
            .map { AnimatedDonutChartSegment(id: $0.0, value: $0.1, color: $1) }
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                Text("Spending")
                    .font(.largeTitle.bold())

                AnimatedDonutChart(segments: segments, selection: $selection)
            }
            .padding(24)
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.5))
                for id in ["Housing", "Travel"] {
                    guard !Task.isCancelled else { return }
                    selection = id
                    try? await Task.sleep(for: .seconds(0.8))
                }
                guard !Task.isCancelled else { return }
                selection = nil
                isAlternate.toggle()
            }
        }
    }
}

#Preview {
    AnimatedDonutChartDemo()
}
```

## Candlestick Chart

A candlestick chart of open, high, low and close prices, with a rule that reads the day under the finger.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/CandlestickChart/CandlestickChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import SwiftUI

nonisolated struct CandlestickChartCandle: Identifiable, Hashable, Sendable {
    var date: Date
    var open: Double
    var high: Double
    var low: Double
    var close: Double

    var id: Date { date }
    var isRising: Bool { close >= open }
}

nonisolated enum CandlestickChartMath {
    /// The prices the chart shows: from the lowest low to the highest high, with some room at
    /// both ends so no candle touches the edge.
    static func domain(of candles: [CandlestickChartCandle], padding: Double = 0.08) -> ClosedRange<Double> {
        guard let low = candles.map(\.low).min(), let high = candles.map(\.high).max(), high >= low else { return 0...1 }
        let room = max(high - low, abs(high) * 0.01, 0.01) * max(padding, 0)
        return (low - room)...(high + room)
    }

    /// The two ends of the body of a candle. A day that closed where it opened still gets a body
    /// `minimum` tall, so it shows as a line instead of vanishing.
    static func body(of candle: CandlestickChartCandle, minimum: Double) -> ClosedRange<Double> {
        let low = min(candle.open, candle.close)
        let high = max(candle.open, candle.close)
        let missing = max(minimum - (high - low), 0)
        return (low - missing / 2)...(high + missing / 2)
    }

    /// How much the price moved from open to close, as a share of the open.
    static func change(of candle: CandlestickChartCandle) -> Double {
        candle.open != 0 ? (candle.close - candle.open) / candle.open : 0
    }

    /// The candle of the day closest to a date, which is how a touch between two days picks one.
    static func nearest(to date: Date, in candles: [CandlestickChartCandle]) -> CandlestickChartCandle? {
        candles.min { abs($0.date.timeIntervalSince(date)) < abs($1.date.timeIntervalSince(date)) }
    }
}

/// A candlestick chart: each day is a thin line from its low to its high and a body from its
/// open to its close, in one color when the price rose and another when it fell.
///
/// Drag over it to read a day: a rule follows the finger and `selection` gets its candle.
/// VoiceOver treats the chart as one value to adjust, and reads the date and the four prices
/// of a day at a time. With Differentiate Without Color on, the days
/// that fell are drawn lighter, so the two kinds do not depend on the color alone.
struct CandlestickChart: View {
    let candles: [CandlestickChartCandle]
    @Binding var selection: CandlestickChartCandle?
    var risingColor = Color.green
    var fallingColor = Color.red

    @State private var selectedDate: Date?
    @Environment(\.accessibilityDifferentiateWithoutColor) private var differentiateWithoutColor

    var body: some View {
        let domain = CandlestickChartMath.domain(of: candles)
        let minimumBody = (domain.upperBound - domain.lowerBound) * 0.004

        Chart {
            ForEach(candles) { candle in
                let color = candle.isRising ? risingColor : fallingColor
                let prices = CandlestickChartMath.body(of: candle, minimum: minimumBody)

                RuleMark(
                    x: .value("Day", candle.date, unit: .day),
                    yStart: .value("Low", candle.low),
                    yEnd: .value("High", candle.high)
                )
                .lineStyle(StrokeStyle(lineWidth: 1.5, lineCap: .round))
                .foregroundStyle(color)
                .accessibilityHidden(true)

                RectangleMark(
                    x: .value("Day", candle.date, unit: .day),
                    yStart: .value("Open", prices.lowerBound),
                    yEnd: .value("Close", prices.upperBound),
                    width: .ratio(0.62)
                )
                .foregroundStyle(color.opacity(!candle.isRising && differentiateWithoutColor ? 0.45 : 1))
                .clipShape(.rect(cornerRadius: 1.5))
                .accessibilityLabel(candle.date.formatted(date: .abbreviated, time: .omitted))
                .accessibilityValue(description(of: candle))
            }

            if let selection {
                RuleMark(x: .value("Selected", selection.date, unit: .day))
                    .lineStyle(StrokeStyle(lineWidth: 1, dash: [3, 3]))
                    .foregroundStyle(.secondary)
                    .accessibilityHidden(true)
            }
        }
        .chartYScale(domain: domain)
        .chartXAxis {
            AxisMarks(preset: .aligned)
        }
        .chartXSelection(value: $selectedDate)
        .onChange(of: selectedDate) { _, date in
            selection = date.flatMap { CandlestickChartMath.nearest(to: $0, in: candles) }
        }
        .sensoryFeedback(.selection, trigger: selection)
        // Charts groups marks this close into ranges of dates, with no prices. One element that
        // steps through the days reads them instead.
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Candlestick chart")
        .accessibilityValue(accessibilityValue)
        .accessibilityAdjustableAction { direction in
            guard !candles.isEmpty else { return }
            let last = candles.count - 1
            let current = selection.flatMap { chosen in candles.firstIndex { $0.date == chosen.date } } ?? last
            switch direction {
            case .increment: selection = candles[min(current + 1, last)]
            case .decrement: selection = candles[max(current - 1, 0)]
            @unknown default: break
            }
        }
    }

    private var accessibilityValue: String {
        guard let candle = selection ?? candles.last else { return "" }
        return "\(candle.date.formatted(date: .abbreviated, time: .omitted)), \(description(of: candle))"
    }

    private func description(of candle: CandlestickChartCandle) -> String {
        let prices = [("Open", candle.open), ("high", candle.high), ("low", candle.low), ("close", candle.close)]
        return prices.map { "\($0.0) \($0.1.formatted(.number.precision(.fractionLength(2))))" }.joined(separator: ", ")
    }
}

// MARK: - Demo

struct CandlestickChartDemo: View {
    @State private var selection: CandlestickChartCandle?

    /// A month of made-up prices, the same on every run.
    private let candles: [CandlestickChartCandle] = {
        var seed: UInt64 = 42
        func next() -> Double {
            seed = seed &* 6_364_136_223_846_793_005 &+ 1_442_695_040_888_963_407
            return Double(seed >> 33) / Double(1 << 31)
        }
        let start = Date(timeIntervalSinceReferenceDate: 815_000_000)
        var price = 182.0
        return (0..<30).map { day in
            let open = price
            let close = open + (next() - 0.47) * 9
            let high = max(open, close) + next() * 4
            let low = min(open, close) - next() * 4
            price = close
            return CandlestickChartCandle(date: start.addingTimeInterval(Double(day) * 86_400), open: open, high: high, low: low, close: close)
        }
    }()

    private var shown: CandlestickChartCandle? { selection ?? candles.last }

    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            if let shown {
                VStack(alignment: .leading, spacing: 4) {
                    Text("ACME")
                        .font(.subheadline.weight(.semibold))
                        .foregroundStyle(.secondary)
                    HStack(alignment: .firstTextBaseline) {
                        Text(shown.close, format: .currency(code: "USD"))
                            .font(.largeTitle.bold())
                        Text(CandlestickChartMath.change(of: shown), format: .percent.precision(.fractionLength(1)).sign(strategy: .always()))
                            .font(.headline)
                            .foregroundStyle(shown.isRising ? .green : .red)
                    }
                    .monospacedDigit()
                    .contentTransition(.numericText())
                    Text(selection == nil ? "Last close · drag to read a day" : shown.date.formatted(date: .abbreviated, time: .omitted))
                        .font(.footnote)
                        .foregroundStyle(.secondary)
                }
                .accessibilityElement(children: .combine)

                CandlestickChart(candles: candles, selection: $selection)
                    .frame(height: 280)

                HStack {
                    price("Open", shown.open)
                    price("High", shown.high)
                    price("Low", shown.low)
                    price("Close", shown.close)
                }
            }
        }
        .padding(20)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }

    private func price(_ title: String, _ value: Double) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(title)
                .font(.caption)
                .foregroundStyle(.secondary)
            Text(value, format: .number.precision(.fractionLength(2)))
                .font(.subheadline.weight(.semibold))
                .monospacedDigit()
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    CandlestickChartDemo()
}
```

## Contribution Heatmap

A calendar grid of colored cells whose intensity shows the activity of each day.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/ContributionHeatmap/ContributionHeatmap.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A calendar grid of colored cells whose intensity shows the activity of each day.
///
/// It opens scrolled to the newest week. VoiceOver reads the whole grid as one summary,
/// and with Reduce Motion on the cells appear without animating.
struct ContributionHeatmap: View {
    let activity: [Date: Int]
    var endDate: Date = .now
    var weeks: Int = 26
    var calendar: Calendar = .current
    var tint: Color = .green
    var cellSize: CGFloat = 18
    var spacing: CGFloat = 4

    @State private var isRevealed = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let levels = 4

    var body: some View {
        let days = ContributionHeatmapLogic.days(endingAt: endDate, weeks: weeks, calendar: calendar)
        let counts = ContributionHeatmapLogic.counts(for: days, activity: activity, calendar: calendar)
        let highest = counts.max() ?? 0
        let size = max(cellSize, 1)
        let gap = max(spacing, 0)

        VStack(alignment: .leading, spacing: 12) {
            ScrollView(.horizontal) {
                LazyHGrid(rows: Array(repeating: GridItem(.fixed(size), spacing: gap), count: ContributionHeatmapLogic.daysPerWeek), spacing: gap) {
                    ForEach(Array(counts.enumerated()), id: \.offset) { index, count in
                        cell(
                            level: ContributionHeatmapLogic.level(count: count, highest: highest, levels: levels),
                            delay: Double((counts.count - 1 - index) / ContributionHeatmapLogic.daysPerWeek) * 0.03
                        )
                    }
                }
            }
            .defaultScrollAnchor(.trailing)
            .scrollIndicators(.hidden)

            legend
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Activity over the last \(max(weeks, 1)) weeks")
        .accessibilityValue(summary(counts))
        .task(id: activity) {
            guard !reduceMotion else {
                isRevealed = true
                return
            }
            var reset = Transaction()
            reset.disablesAnimations = true
            withTransaction(reset) { isRevealed = false }
            try? await Task.sleep(for: .milliseconds(50))
            guard !Task.isCancelled else { return }
            isRevealed = true
        }
    }

    private func cell(level: Int, delay: Double) -> some View {
        let isShown = isRevealed || reduceMotion

        return RoundedRectangle(cornerRadius: 4)
            .fill(color(for: level))
            .scaleEffect(isShown ? 1 : 0.3)
            .opacity(isShown ? 1 : 0)
            .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.3).delay(delay), value: isRevealed)
    }

    private var legend: some View {
        HStack(spacing: 4) {
            Text("Less")
            ForEach(0...levels, id: \.self) { level in
                RoundedRectangle(cornerRadius: 3)
                    .fill(color(for: level))
                    .frame(width: 12, height: 12)
            }
            Text("More")
        }
        .font(.caption)
        .foregroundStyle(.secondary)
        .frame(maxWidth: .infinity, alignment: .trailing)
    }

    private func color(for level: Int) -> Color {
        guard level > 0 else { return Color.secondary.opacity(0.15) }
        return tint.opacity(0.25 + 0.75 * Double(level) / Double(levels))
    }

    private func summary(_ counts: [Int]) -> String {
        let activeDays = counts.count { $0 > 0 }
        return "\(ContributionHeatmapLogic.sum(counts)) contributions on \(activeDays) days"
    }
}

/// The grid math, apart from the view so it can be tested.
enum ContributionHeatmapLogic {
    static let daysPerWeek = 7

    /// Every day shown, oldest first. The first day starts a week, so columns line up.
    static func days(endingAt end: Date, weeks: Int, calendar: Calendar) -> [Date] {
        let weeks = min(max(weeks, 1), 530)
        let last = calendar.startOfDay(for: end)
        let daysIntoWeek = (calendar.component(.weekday, from: last) - calendar.firstWeekday + daysPerWeek) % daysPerWeek
        let count = (weeks - 1) * daysPerWeek + daysIntoWeek + 1
        return (0..<count).compactMap { calendar.date(byAdding: .day, value: $0 - count + 1, to: last) }
    }

    /// The count of each day. Dates are matched by day, and repeated days keep the highest.
    static func counts(for days: [Date], activity: [Date: Int], calendar: Calendar) -> [Int] {
        var byDay: [Date: Int] = [:]
        for (date, count) in activity {
            let day = calendar.startOfDay(for: date)
            byDay[day] = max(byDay[day] ?? 0, count)
        }
        return days.map { byDay[calendar.startOfDay(for: $0)] ?? 0 }
    }

    /// The color step of a count: 0 for nothing, then 1 up to `levels`.
    static func level(count: Int, highest: Int, levels: Int) -> Int {
        guard count > 0, highest > 0, levels > 0 else { return 0 }
        let ratio = Double(count) / Double(highest)
        return min(max(Int((ratio * Double(levels)).rounded(.up)), 1), levels)
    }

    /// Adds positive counts and stops at `Int.max` instead of overflowing.
    static func sum(_ counts: [Int]) -> Int {
        counts.reduce(0) { total, count in
            let (result, overflow) = total.addingReportingOverflow(max(count, 0))
            return overflow ? Int.max : result
        }
    }
}

// MARK: - Demo

struct ContributionHeatmapDemo: View {
    @State private var seed = 1.0

    private var activity: [Date: Int] {
        let today = Calendar.current.startOfDay(for: .now)
        var result: [Date: Int] = [:]
        for offset in 0..<210 {
            guard let day = Calendar.current.date(byAdding: .day, value: -offset, to: today) else { continue }
            let wave = sin(Double(offset) * 0.9 * seed) + cos(Double(offset) * 0.23 + seed)
            result[day] = max(0, Int(wave * 5))
        }
        return result
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            Spacer()
            Text("Commits")
                .font(.largeTitle.bold())
            Text("Your last 30 weeks of work")
                .font(.title3)
                .foregroundStyle(.secondary)

            ContributionHeatmap(activity: activity, weeks: 30)

            Button("Shuffle", systemImage: "shuffle") {
                seed = seed > 1.3 ? 1 : seed + 0.17
            }
            .buttonStyle(.bordered)
            .controlSize(.large)
            Spacer()
        }
        .padding(24)
    }
}

#Preview {
    ContributionHeatmapDemo()
}
```

## Gauge Chart

A half-moon gauge with colored zones and a needle that swings to the value.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/GaugeChart/GaugeChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated struct GaugeChartZone: Identifiable, Sendable {
    var name: String
    /// Where the zone ends. It starts where the one before it ends, or at the start of the range.
    var upTo: Double
    var color: Color

    var id: String { name }
}

nonisolated enum GaugeChartMath {
    /// How far along the dial a value is, from 0 at its start to 1 at its end.
    static func share(of value: Double, in range: ClosedRange<Double>) -> Double {
        let length = range.upperBound - range.lowerBound
        guard length > 0, value.isFinite else { return 0 }
        return min(max((value - range.lowerBound) / length, 0), 1)
    }

    /// The turn of the needle in degrees: -90 at the start of the dial, 0 straight up, 90 at its end.
    static func needleAngle(share: Double) -> Double {
        -90 + 180 * min(max(share, 0), 1)
    }

    /// The zone a value falls in: the first one that ends at or after it, or the last one for a
    /// value beyond them all.
    static func zone(for value: Double, in zones: [GaugeChartZone]) -> GaugeChartZone? {
        let sorted = zones.sorted { $0.upTo < $1.upTo }
        return sorted.first { value <= $0.upTo } ?? sorted.last
    }

    /// Where each zone starts and ends along the dial, as shares from 0 to 1.
    static func spans(of zones: [GaugeChartZone], in range: ClosedRange<Double>) -> [(zone: GaugeChartZone, start: Double, end: Double)] {
        var start = 0.0
        return zones.sorted { $0.upTo < $1.upTo }.compactMap { zone in
            let end = share(of: zone.upTo, in: range)
            defer { start = max(start, end) }
            return end > start ? (zone, start, end) : nil
        }
    }
}

/// A half-moon gauge for a panel: a dial split into colored zones and a needle that swings to
/// the value. For a small control inside a row, SwiftUI's own `Gauge` is the one to use.
///
/// VoiceOver reads the value and the name of its zone, so the reading does not depend on the
/// color. With Reduce Motion on, the needle goes to its place without swinging.
struct GaugeChart: View {
    var value: Double
    var range: ClosedRange<Double> = 0...100
    let zones: [GaugeChartZone]
    var label = "Gauge"
    var valueText: (Double) -> String = { $0.formatted(.number.precision(.fractionLength(0))) }

    private let lineWidth: CGFloat = 26
    private let gap = 0.004

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let share = GaugeChartMath.share(of: value, in: range)
        let zone = GaugeChartMath.zone(for: value, in: zones)

        GeometryReader { proxy in
            let width = proxy.size.width

            ZStack(alignment: .bottom) {
                ZStack {
                    ForEach(GaugeChartMath.spans(of: zones, in: range), id: \.zone.id) { span in
                        // A circle starts at three o'clock. Half a turn makes it start at nine, where the dial does.
                        Circle()
                            .inset(by: lineWidth / 2)
                            .trim(from: span.start / 2 + gap, to: span.end / 2 - gap)
                            .stroke(span.zone.color, style: StrokeStyle(lineWidth: lineWidth, lineCap: .butt))
                            .rotationEffect(.degrees(180))
                    }
                }
                .frame(width: width, height: width)
                .frame(height: width / 2, alignment: .top)
                .clipped()

                Capsule()
                    .fill(.primary)
                    .frame(width: 5, height: width / 2 - lineWidth - 10)
                    .rotationEffect(.degrees(GaugeChartMath.needleAngle(share: share)), anchor: .bottom)
                    .animation(reduceMotion ? nil : .spring(duration: 0.9, bounce: 0.35), value: share)

                Circle()
                    .fill(.primary)
                    .frame(width: 18, height: 18)
                    .offset(y: 9)
            }
        }
        .aspectRatio(2, contentMode: .fit)
        // A dial reads from left to right in every language, like a speedometer.
        .environment(\.layoutDirection, .leftToRight)
        .padding(.bottom, 9)
        .accessibilityElement()
        .accessibilityLabel(label)
        .accessibilityValue([valueText(value), zone?.name].compactMap { $0 }.joined(separator: ", "))
    }
}

// MARK: - Demo

struct GaugeChartDemo: View {
    private let zones = [
        GaugeChartZone(name: "Good", upTo: 50, color: .green),
        GaugeChartZone(name: "Moderate", upTo: 100, color: .yellow),
        GaugeChartZone(name: "Unhealthy", upTo: 150, color: .orange),
        GaugeChartZone(name: "Hazardous", upTo: 200, color: .red),
    ]
    private let readings: [(place: String, value: Double)] = [("Harbor", 32), ("Old Town", 118), ("Ring Road", 171), ("Hillside", 74)]

    @State private var index = 0

    var body: some View {
        let reading = readings[index]
        let zone = GaugeChartMath.zone(for: reading.value, in: zones)

        VStack(spacing: 18) {
            VStack(spacing: 4) {
                Text("Air Quality")
                    .font(.title2.bold())
                Text(reading.place)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.opacity)
            }

            GaugeChart(value: reading.value, range: 0...200, zones: zones, label: "Air quality index")
                .padding(.horizontal, 12)

            VStack(spacing: 2) {
                Text(reading.value, format: .number)
                    .font(.system(size: 52, weight: .bold, design: .rounded))
                    .contentTransition(.numericText())
                Text(zone?.name ?? "")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .accessibilityHidden(true)

            Button("Next Station", systemImage: "arrow.right") {
                withAnimation(.snappy) { index = (index + 1) % readings.count }
            }
            .buttonStyle(.bordered)
        }
        .padding(24)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }
}

#Preview {
    GaugeChartDemo()
}
```

## Interactive Line Chart

A line chart that shows a rule and a value tooltip under the finger as it scrubs along the time axis.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/InteractiveLineChart/InteractiveLineChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import SwiftUI

struct InteractiveLineChartPoint: Identifiable, Hashable {
    let date: Date
    let value: Double

    var id: Date { date }
}

/// A line chart that shows a rule and a value tooltip under the finger as it scrubs.
///
/// The tooltip only exists during the touch, and nothing animates on its own.
struct InteractiveLineChart: View {
    let points: [InteractiveLineChartPoint]
    var tint: Color = .indigo
    var format: (Double) -> String = { $0.formatted() }

    @State private var touchedDate: Date?
    @State private var tooltipWidth: CGFloat = 0
    @Environment(\.layoutDirection) private var layoutDirection
    @ScaledMetric(relativeTo: .caption) private var tooltipHeadroom = 60.0

    private var selected: InteractiveLineChartPoint? {
        touchedDate.flatMap { InteractiveLineChartLogic.nearest(to: $0, in: points) }
    }

    var body: some View {
        let domain = InteractiveLineChartLogic.domain(for: points)

        Chart {
            ForEach(points) { point in
                AreaMark(
                    x: .value("Date", point.date),
                    yStart: .value("Baseline", domain.lowerBound),
                    yEnd: .value("Value", point.value)
                )
                .foregroundStyle(.linearGradient(colors: [tint.opacity(0.3), tint.opacity(0)], startPoint: .top, endPoint: .bottom))
                .interpolationMethod(.monotone)
                .accessibilityHidden(true)

                LineMark(x: .value("Date", point.date), y: .value("Value", point.value))
                    .foregroundStyle(tint)
                    .lineStyle(StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
                    .interpolationMethod(.monotone)
                    .accessibilityLabel(point.date.formatted(date: .abbreviated, time: .omitted))
                    .accessibilityValue(format(point.value))
            }

            if let selected {
                RuleMark(x: .value("Selected", selected.date))
                    .foregroundStyle(.secondary)
                    .lineStyle(StrokeStyle(lineWidth: 1, dash: [4, 4]))
                    .accessibilityHidden(true)

                PointMark(x: .value("Selected", selected.date), y: .value("Value", selected.value))
                    .symbolSize(140)
                    .foregroundStyle(tint)
                    .accessibilityHidden(true)
            }
        }
        .chartYScale(domain: domain, range: .plotDimension(endPadding: tooltipHeadroom))
        // Keeps the last date inside the plot. Before iOS 26 it is drawn half cut at the trailing edge.
        .chartXAxis { AxisMarks(preset: .aligned) }
        .chartXSelection(value: $touchedDate)
        // Drawn over the chart and not as an annotation of the rule: on iOS 27 that
        // annotation is not drawn at all.
        .chartOverlay { proxy in
            GeometryReader { geometry in
                if let selected, let plotFrame = proxy.plotFrame, let x = proxy.position(forX: selected.date) {
                    let plot = geometry[plotFrame]
                    tooltip(for: selected)
                        .environment(\.layoutDirection, layoutDirection)
                        .fixedSize()
                        .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { tooltipWidth = $0 }
                        .position(
                            x: InteractiveLineChartLogic.tooltipX(at: plot.minX + x, width: tooltipWidth, in: plot.minX...plot.maxX),
                            y: plot.minY + tooltipHeadroom / 2
                        )
                        .allowsHitTesting(false)
                }
            }
            // The chart reports screen points, and a position is mirrored in a right-to-left
            // layout. Left to right here keeps the tooltip over the rule.
            .environment(\.layoutDirection, .leftToRight)
        }
        .sensoryFeedback(.selection, trigger: selected?.id)
    }

    private func tooltip(for point: InteractiveLineChartPoint) -> some View {
        VStack(spacing: 2) {
            Text(format(point.value))
                .font(.headline)
            Text(point.date, format: .dateTime.day().month())
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 6)
        // A material does not draw inside a chart annotation: it comes out black, or not at all.
        .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 12))
        .overlay { RoundedRectangle(cornerRadius: 12).strokeBorder(.separator) }
    }
}

enum InteractiveLineChartLogic {
    static func nearest(to date: Date, in points: [InteractiveLineChartPoint]) -> InteractiveLineChartPoint? {
        points.min { abs($0.date.timeIntervalSince(date)) < abs($1.date.timeIntervalSince(date)) }
    }

    /// The center of the tooltip: over the point, but never past either end of the plot.
    static func tooltipX(at x: CGFloat, width: CGFloat, in plot: ClosedRange<CGFloat>) -> CGFloat {
        let half = max(width, 0) / 2
        guard plot.upperBound - plot.lowerBound > half * 2 else { return (plot.lowerBound + plot.upperBound) / 2 }
        return min(max(x, plot.lowerBound + half), plot.upperBound - half)
    }

    /// The vertical range with some breathing room. A flat or empty series still gets a valid range.
    static func domain(for points: [InteractiveLineChartPoint]) -> ClosedRange<Double> {
        let values = points.map(\.value).filter(\.isFinite)
        guard let low = values.min(), let high = values.max() else { return 0...1 }
        guard high - low > 0, (high - low).isFinite else { return (low - 1)...(high + 1) }
        let padding = (high - low) * 0.15
        return (low - padding)...(high + padding)
    }
}

// MARK: - Demo

struct InteractiveLineChartDemo: View {
    @State private var points: [InteractiveLineChartPoint] = {
        let start = Calendar.current.startOfDay(for: .now)
        return (0..<36).compactMap { day in
            guard let date = Calendar.current.date(byAdding: .day, value: day - 35, to: start) else { return nil }
            let value = 1_200 + Double(day) * 14 + sin(Double(day) * 0.55) * 120 + cos(Double(day) * 1.7) * 40
            return InteractiveLineChartPoint(date: date, value: value.rounded())
        }
    }()

    private func euros(_ value: Double) -> String {
        value.formatted(.currency(code: "EUR").precision(.fractionLength(0)))
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Savings")
                .font(.title3)
                .foregroundStyle(.secondary)
            Text(euros(points.last?.value ?? 0))
                .font(.largeTitle.bold())
            Text("Drag along the chart")
                .font(.subheadline)
                .foregroundStyle(.secondary)

            InteractiveLineChart(points: points, format: euros)
                .padding(.vertical, 12)
        }
        .padding(24)
    }
}

#Preview {
    InteractiveLineChartDemo()
}
```

## Line Chart Draw In

A line chart whose line draws in from left to right while a dot follows its tip.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/LineChartDrawIn/LineChartDrawIn.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A line chart whose line draws in from left to right while a dot follows its tip.
///
/// It draws again whenever the values change. With Reduce Motion on, the finished chart appears.
struct LineChartDrawIn: View {
    let values: [Double]
    var tint: Color = .indigo
    var duration: Double = 1.6

    @State private var progress = 0.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let inset = 12.0
    private var shownProgress: Double { reduceMotion ? 1 : progress }

    var body: some View {
        ZStack {
            LineChartDrawInArea(values: values, inset: inset, progress: shownProgress)
                .fill(.linearGradient(colors: [tint.opacity(0.28), tint.opacity(0)], startPoint: .top, endPoint: .bottom))

            LineChartDrawInLine(values: values, inset: inset)
                .trim(from: 0, to: shownProgress)
                .stroke(tint, style: StrokeStyle(lineWidth: 3.5, lineCap: .round, lineJoin: .round))

            LineChartDrawInDot(values: values, inset: inset, radius: 12, progress: shownProgress)
                .fill(tint.opacity(0.25))

            LineChartDrawInDot(values: values, inset: inset, radius: 6, progress: shownProgress)
                .fill(tint)
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Line chart")
        .accessibilityValue(LineChartDrawInLogic.summary(of: values))
        .task(id: values) {
            guard !reduceMotion else {
                progress = 1
                return
            }
            var reset = Transaction()
            reset.disablesAnimations = true
            withTransaction(reset) { progress = 0 }
            try? await Task.sleep(for: .milliseconds(50))
            guard !Task.isCancelled else { return }
            withAnimation(.easeInOut(duration: max(duration, 0))) { progress = 1 }
        }
    }
}

nonisolated private struct LineChartDrawInLine: Shape {
    let values: [Double]
    let inset: CGFloat

    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.addLines(LineChartDrawInLogic.points(for: values, in: rect.insetBy(dx: inset, dy: inset)))
        return path
    }
}

/// The fill under the line, up to its tip, so it never runs ahead of the line being drawn.
nonisolated private struct LineChartDrawInArea: Shape {
    let values: [Double]
    let inset: CGFloat
    var progress: Double

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func path(in rect: CGRect) -> Path {
        let points = LineChartDrawInLogic.points(for: values, in: rect.insetBy(dx: inset, dy: inset))
        guard let first = points.first, let last = LineChartDrawInLogic.point(at: progress, along: points) else { return Path() }

        var path = Path()
        path.addLines(points.filter { $0.x < last.x } + [last])
        path.addLine(to: CGPoint(x: last.x, y: rect.maxY))
        path.addLine(to: CGPoint(x: first.x, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

/// A circle that re-computes its position for every animation frame, so it stays on the tip.
nonisolated private struct LineChartDrawInDot: Shape {
    let values: [Double]
    let inset: CGFloat
    let radius: CGFloat
    var progress: Double

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func path(in rect: CGRect) -> Path {
        let points = LineChartDrawInLogic.points(for: values, in: rect.insetBy(dx: inset, dy: inset))
        guard let center = LineChartDrawInLogic.point(at: progress, along: points) else { return Path() }
        return Path(ellipseIn: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2))
    }
}

/// The geometry of the chart, apart from the view so it can be tested.
nonisolated enum LineChartDrawInLogic {
    static func points(for values: [Double], in rect: CGRect) -> [CGPoint] {
        let values = values.filter(\.isFinite)
        guard !rect.isNull, rect.width > 0, rect.height > 0,
              let low = values.min(), let high = values.max() else { return [] }

        let span = high - low
        let step = values.count > 1 ? rect.width / CGFloat(values.count - 1) : 0
        return values.enumerated().map { index, value in
            let ratio = span > 0 && span.isFinite ? (value - low) / span : 0.5
            return CGPoint(x: rect.minX + CGFloat(index) * step, y: rect.maxY - CGFloat(ratio) * rect.height)
        }
    }

    /// The point at a fraction of the line's length, which is how `trim` measures it too.
    static func point(at progress: Double, along points: [CGPoint]) -> CGPoint? {
        guard let first = points.first else { return nil }
        let lengths = zip(points, points.dropFirst()).map { hypot($1.x - $0.x, $1.y - $0.y) }
        let total = lengths.reduce(0, +)
        guard total > 0 else { return first }

        var remaining = total * CGFloat(min(max(progress, 0), 1))
        for (index, length) in lengths.enumerated() where length > 0 {
            if remaining <= length {
                let fraction = remaining / length
                let start = points[index]
                let end = points[index + 1]
                return CGPoint(x: start.x + (end.x - start.x) * fraction, y: start.y + (end.y - start.y) * fraction)
            }
            remaining -= length
        }
        return points.last
    }

    static func summary(of values: [Double]) -> String {
        let values = values.filter(\.isFinite)
        guard let first = values.first, let last = values.last,
              let low = values.min(), let high = values.max() else { return "No data" }
        return "From \(first.formatted()) to \(last.formatted()). Lowest \(low.formatted()), highest \(high.formatted())."
    }
}

// MARK: - Demo

struct LineChartDrawInDemo: View {
    @State private var isAlternate = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var values: [Double] {
        isAlternate
            ? [62, 58, 70, 64, 80, 76, 66, 72, 88, 84, 96, 90]
            : [20, 34, 28, 46, 40, 58, 52, 74, 66, 82, 78, 96]
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Active users")
                .font(.largeTitle.bold())
            Text(isAlternate ? "Europe" : "Americas")
                .font(.title3)
                .foregroundStyle(.secondary)

            LineChartDrawIn(values: values)
                .padding(.vertical, 24)
        }
        .padding(24)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(2.8))
                guard !Task.isCancelled else { return }
                isAlternate.toggle()
            }
        }
    }
}

#Preview {
    LineChartDrawInDemo()
}
```

## Radar Chart

A radar chart with an axis per quality around a center and a shape per series that grows out when it appears.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/RadarChart/RadarChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated struct RadarChartSeries: Identifiable, Sendable {
    var name: String
    /// One value per axis, in the order of the axes.
    var values: [Double]
    var color: Color

    var id: String { name }
}

nonisolated enum RadarChartMath {
    /// The direction of an axis in radians, with the first one pointing up and the rest going clockwise.
    static func angle(of axis: Int, count: Int) -> Double {
        guard count > 0 else { return -.pi / 2 }
        return Double(axis) / Double(count) * 2 * .pi - .pi / 2
    }

    /// How far along its axis a value is, from 0 at the center to 1 at the edge.
    static func share(of value: Double, maximum: Double) -> Double {
        guard maximum > 0, value.isFinite else { return 0 }
        return min(max(value / maximum, 0), 1)
    }

    /// The point `share` of the way along an axis, in a circle of `radius` around `center`.
    static func point(axis: Int, count: Int, share: Double, center: CGPoint, radius: Double) -> CGPoint {
        let angle = angle(of: axis, count: count)
        return CGPoint(x: center.x + cos(angle) * radius * share, y: center.y + sin(angle) * radius * share)
    }

    /// The corners of the shape of a series: one per axis. A series with fewer values than axes
    /// is at the center on the rest.
    static func corners(values: [Double], axes: Int, maximum: Double, center: CGPoint, radius: Double) -> [CGPoint] {
        (0..<max(axes, 0)).map { axis in
            let value = axis < values.count ? values[axis] : 0
            return point(axis: axis, count: axes, share: share(of: value, maximum: maximum), center: center, radius: radius)
        }
    }
}

/// A radar chart: one axis per quality, spread around a center, and a shape per series that
/// reaches further along an axis the higher its value. It compares two or three profiles at a glance.
///
/// The shapes grow from the center when they appear. VoiceOver reads each axis with the value
/// of every series. With Reduce Motion on, the shapes are there from the start.
struct RadarChart: View {
    let axes: [String]
    let series: [RadarChartSeries]
    var maximum = 100.0
    /// How many rings the grid has, the outer one included.
    var rings = 4

    private let labelRoom: CGFloat = 34

    @State private var growth = 0.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        GeometryReader { proxy in
            let center = CGPoint(x: proxy.size.width / 2, y: proxy.size.height / 2)
            let radius = max(min(proxy.size.width, proxy.size.height) / 2 - labelRoom, 0)

            ZStack {
                RadarChartGrid(axes: axes.count, rings: rings)
                    .stroke(.quaternary, lineWidth: 1)
                    .padding(labelRoom)

                ForEach(series) { series in
                    let shape = RadarChartShape(values: series.values, axes: axes.count, maximum: maximum, growth: reduceMotion ? 1 : growth)

                    shape
                        .fill(series.color.opacity(0.22))
                        .padding(labelRoom)
                    shape
                        .stroke(series.color, style: StrokeStyle(lineWidth: 2, lineJoin: .round))
                        .padding(labelRoom)
                }

                ForEach(Array(axes.enumerated()), id: \.offset) { index, axis in
                    Text(axis)
                        .font(.caption.weight(.medium))
                        .foregroundStyle(.secondary)
                        .lineLimit(1)
                        .minimumScaleFactor(0.7)
                        .position(RadarChartMath.point(axis: index, count: axes.count, share: 1, center: center, radius: radius + labelRoom * 0.55))
                }
            }
        }
        .aspectRatio(1, contentMode: .fit)
        // The axes go clockwise from the top in every language, like the hours of a clock.
        .environment(\.layoutDirection, .leftToRight)
        .onAppear {
            withAnimation(.spring(duration: 0.9, bounce: 0.25)) { growth = 1 }
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Radar chart")
        .accessibilityChildren {
            ForEach(Array(axes.enumerated()), id: \.offset) { index, axis in
                Text(axis)
                    .accessibilityValue(description(ofAxis: index))
            }
        }
    }

    private func description(ofAxis axis: Int) -> String {
        series
            .map { "\($0.name) \((axis < $0.values.count ? $0.values[axis] : 0).formatted())" }
            .joined(separator: ", ")
    }
}

/// The grid behind the shapes: a polygon per ring and a spoke per axis.
nonisolated struct RadarChartGrid: Shape {
    var axes: Int
    var rings: Int

    func path(in rect: CGRect) -> Path {
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height) / 2
        var path = Path()
        guard axes > 2 else { return path }

        for ring in 1...max(rings, 1) {
            let share = Double(ring) / Double(max(rings, 1))
            path.addLines((0..<axes).map { RadarChartMath.point(axis: $0, count: axes, share: share, center: center, radius: radius) })
            path.closeSubpath()
        }
        for axis in 0..<axes {
            path.move(to: center)
            path.addLine(to: RadarChartMath.point(axis: axis, count: axes, share: 1, center: center, radius: radius))
        }
        return path
    }
}

/// The shape of one series. `growth` animates it out from the center.
nonisolated struct RadarChartShape: Shape {
    var values: [Double]
    var axes: Int
    var maximum: Double
    var growth: Double

    var animatableData: Double {
        get { growth }
        set { growth = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()
        guard axes > 2 else { return path }
        let center = CGPoint(x: rect.midX, y: rect.midY)
        path.addLines(RadarChartMath.corners(values: values, axes: axes, maximum: maximum, center: center, radius: min(rect.width, rect.height) / 2 * growth))
        path.closeSubpath()
        return path
    }
}

// MARK: - Demo

struct RadarChartDemo: View {
    private let axes = ["Speed", "Power", "Range", "Comfort", "Price", "Design"]
    private let bikes = [
        RadarChartSeries(name: "City", values: [55, 40, 62, 90, 85, 70], color: .teal),
        RadarChartSeries(name: "Trail", values: [80, 92, 78, 50, 45, 82], color: .orange),
    ]

    @State private var run = 0

    var body: some View {
        VStack(spacing: 20) {
            VStack(spacing: 4) {
                Text("Which e-bike?")
                    .font(.title2.bold())
                Text("Two models, six things that matter")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            RadarChart(axes: axes, series: bikes)
                .id(run)

            HStack(spacing: 20) {
                ForEach(bikes) { bike in
                    Label {
                        Text(bike.name)
                    } icon: {
                        Circle()
                            .fill(bike.color)
                            .frame(width: 10, height: 10)
                    }
                    .font(.subheadline.weight(.medium))
                }
            }
            .accessibilityHidden(true)

            Button("Replay", systemImage: "arrow.clockwise") {
                run += 1
            }
            .buttonStyle(.bordered)
        }
        .padding(20)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }
}

#Preview {
    RadarChartDemo()
}
```

## Scrollable Bar Chart

A bar chart that scrolls sideways a week at a time and marks the average of the days in sight.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/ScrollableBarChart/ScrollableBarChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import SwiftUI

nonisolated struct ScrollableBarChartEntry: Identifiable, Hashable, Sendable {
    var date: Date
    var value: Double

    var id: Date { date }
}

nonisolated enum ScrollableBarChartMath {
    static let secondsPerDay = 86_400.0

    /// The entries of the days in sight: those from `start` up to `days` later.
    static func visible(_ entries: [ScrollableBarChartEntry], from start: Date, days: Int) -> [ScrollableBarChartEntry] {
        let end = start.addingTimeInterval(Double(max(days, 0)) * secondsPerDay)
        return entries.filter { $0.date >= start && $0.date < end }
    }

    /// The mean of the values, or `nil` when there are none.
    static func average(of entries: [ScrollableBarChartEntry]) -> Double? {
        entries.isEmpty ? nil : entries.map(\.value).reduce(0, +) / Double(entries.count)
    }

    /// Where the chart starts so that its last `days` are the ones in sight.
    static func lastStart(of entries: [ScrollableBarChartEntry], days: Int) -> Date? {
        guard let last = entries.map(\.date).max() else { return nil }
        return last.addingTimeInterval(-Double(max(days, 1) - 1) * secondsPerDay)
    }

    /// The top of the value axis: the highest value of all, with some room, so the bars keep
    /// their scale while the chart scrolls.
    static func ceiling(of entries: [ScrollableBarChartEntry]) -> Double {
        max((entries.map(\.value).max() ?? 0) * 1.12, 1)
    }
}

/// A bar chart with more days than fit, which scrolls sideways and settles on whole days, a
/// week at a time. A line marks the average of the days in sight and `visible` reports them.
///
/// It starts on the latest days. Swift Charts gives VoiceOver every bar and an audio graph.
struct ScrollableBarChart: View {
    let entries: [ScrollableBarChartEntry]
    /// The entries of the days in sight, kept up to date as the chart scrolls.
    @Binding var visible: [ScrollableBarChartEntry]
    var visibleDays = 7

    @State private var position = Date.now

    var body: some View {
        let average = ScrollableBarChartMath.average(of: visible)

        Chart {
            ForEach(entries) { entry in
                BarMark(
                    x: .value("Day", entry.date, unit: .day),
                    y: .value("Value", entry.value)
                )
                .foregroundStyle(.tint)
                .clipShape(.rect(cornerRadius: 5))
            }

            if let average {
                RuleMark(y: .value("Average", average))
                    .lineStyle(StrokeStyle(lineWidth: 1.5, dash: [4, 4]))
                    .foregroundStyle(.secondary)
                    .accessibilityLabel("Average of the days in sight")
            }
        }
        .chartYScale(domain: 0...ScrollableBarChartMath.ceiling(of: entries))
        .chartScrollableAxes(.horizontal)
        .chartXVisibleDomain(length: Double(visibleDays) * ScrollableBarChartMath.secondsPerDay)
        .chartScrollPosition(x: $position)
        .chartScrollTargetBehavior(.valueAligned(matching: DateComponents(hour: 0), majorAlignment: .matching(DateComponents(weekday: Calendar.current.firstWeekday))))
        .chartXAxis {
            AxisMarks(values: .stride(by: .day)) { _ in
                AxisValueLabel(format: .dateTime.weekday(.narrow), centered: true)
            }
        }
        .onAppear {
            if let start = ScrollableBarChartMath.lastStart(of: entries, days: visibleDays) { position = start }
        }
        .onChange(of: position, initial: true) { _, start in
            let shown = ScrollableBarChartMath.visible(entries, from: start, days: visibleDays)
            if shown != visible { visible = shown }
        }
    }
}

// MARK: - Demo

struct ScrollableBarChartDemo: View {
    @State private var visible: [ScrollableBarChartEntry] = []

    /// Eight weeks of made-up step counts, the same on every run.
    private let entries: [ScrollableBarChartEntry] = {
        var seed: UInt64 = 7
        let start = Calendar.current.startOfDay(for: Date(timeIntervalSinceReferenceDate: 815_000_000))
        return (0..<56).map { day in
            seed = seed &* 6_364_136_223_846_793_005 &+ 1_442_695_040_888_963_407
            let noise = Double(seed >> 33) / Double(1 << 31)
            let weekend = day % 7 >= 5 ? 0.7 : 1
            return ScrollableBarChartEntry(date: start.addingTimeInterval(Double(day) * 86_400), value: (4_500 + noise * 7_500) * weekend)
        }
    }()

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            VStack(alignment: .leading, spacing: 4) {
                Text("Steps")
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.secondary)
                HStack(alignment: .firstTextBaseline, spacing: 6) {
                    Text(ScrollableBarChartMath.average(of: visible) ?? 0, format: .number.precision(.fractionLength(0)))
                        .font(.largeTitle.bold())
                        .monospacedDigit()
                        .contentTransition(.numericText())
                    Text("a day")
                        .font(.headline)
                        .foregroundStyle(.secondary)
                }
                Text(range)
                    .font(.footnote)
                    .foregroundStyle(.secondary)
            }
            .animation(.snappy, value: visible)
            .accessibilityElement(children: .combine)

            ScrollableBarChart(entries: entries, visible: $visible)
                .frame(height: 260)
        }
        .padding(20)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .tint(.orange)
    }

    private var range: String {
        guard let first = visible.first?.date, let last = visible.last?.date else { return " " }
        return (first..<last).formatted(.interval.month(.abbreviated).day())
    }
}

#Preview {
    ScrollableBarChartDemo()
}
```

## Sparkline Stat Tile

A stat tile with a small trend line behind its value.

Category: Charts. Minimum: iOS 18.0. Path: Components/Charts/SparklineStatTile/SparklineStatTile.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import SwiftUI

/// A stat tile with a small trend line behind its value.
///
/// VoiceOver reads the title, the value and the change as one element. With Reduce Motion
/// on, new values appear without animating the line.
struct SparklineStatTile: View {
    let title: LocalizedStringResource
    let value: String
    let trend: [Double]
    var systemImage: String = "chart.line.uptrend.xyaxis"
    var tint: Color = .indigo
    /// Set it to false for a figure that is good news when it falls, like churn. A fall is then green.
    var higherIsBetter = true

    @ScaledMetric(relativeTo: .largeTitle) private var minimumHeight = 150.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var change: Double? { SparklineStatTileLogic.change(in: trend) }

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            Label(title, systemImage: systemImage)
                .font(.subheadline.weight(.medium))
                .foregroundStyle(.secondary)

            Text(value)
                .font(.title.bold())
                .minimumScaleFactor(0.7)
                .contentTransition(reduceMotion ? .identity : .numericText())
                .animation(reduceMotion ? nil : .smooth, value: value)

            if let change {
                changeLabel(change)
            }

            Spacer(minLength: 0)
        }
        .padding(16)
        .frame(maxWidth: .infinity, minHeight: minimumHeight, alignment: .topLeading)
        .background(alignment: .bottom) { sparkline }
        .background(.thinMaterial)
        .clipShape(.rect(cornerRadius: 22))
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(title)
        .accessibilityValue(accessibilityValue)
    }

    private func changeLabel(_ change: Double) -> some View {
        Label(percent(change), systemImage: change >= 0 ? "arrow.up.right" : "arrow.down.right")
            .font(.caption.weight(.semibold))
            .foregroundStyle((change >= 0) == higherIsBetter ? .green : .red)
    }

    @ViewBuilder
    private var sparkline: some View {
        let values = trend.filter(\.isFinite)
        if values.count > 1 {
            let domain = SparklineStatTileLogic.domain(for: values)

            Chart(Array(values.enumerated()), id: \.offset) { index, value in
                AreaMark(x: .value("Index", index), yStart: .value("Low", domain.lowerBound), yEnd: .value("Value", value))
                    .foregroundStyle(.linearGradient(colors: [tint.opacity(0.3), tint.opacity(0)], startPoint: .top, endPoint: .bottom))
                    .interpolationMethod(.catmullRom)

                LineMark(x: .value("Index", index), y: .value("Value", value))
                    .foregroundStyle(tint)
                    .lineStyle(StrokeStyle(lineWidth: 2.5, lineCap: .round, lineJoin: .round))
                    .interpolationMethod(.catmullRom)
            }
            .chartXAxis(.hidden)
            .chartYAxis(.hidden)
            .chartLegend(.hidden)
            .chartXScale(domain: 0...(values.count - 1))
            .chartYScale(domain: domain)
            .frame(height: minimumHeight * 0.55)
            .animation(reduceMotion ? nil : .smooth, value: values)
            .accessibilityHidden(true)
        }
    }

    private var accessibilityValue: String {
        guard let change else { return value }
        return "\(value), \(change >= 0 ? "up" : "down") \(abs(change).formatted(.percent.precision(.fractionLength(1))))"
    }

    private func percent(_ change: Double) -> String {
        change.formatted(.percent.precision(.fractionLength(1)).sign(strategy: .always()))
    }
}

enum SparklineStatTileLogic {
    /// The change from the first value to the last, or `nil` when it cannot be computed.
    static func change(in values: [Double]) -> Double? {
        let values = values.filter(\.isFinite)
        guard values.count > 1, let first = values.first, let last = values.last, first != 0 else { return nil }
        let change = (last - first) / abs(first)
        return change.isFinite ? change : nil
    }

    /// A valid vertical range, also for a flat series, with room so the line is not cut off.
    static func domain(for values: [Double]) -> ClosedRange<Double> {
        guard let low = values.min(), let high = values.max() else { return 0...1 }
        guard high - low > 0, (high - low).isFinite else { return (low - 1)...(high + 1) }
        return (low - (high - low) * 0.1)...(high + (high - low) * 0.5)
    }
}

// MARK: - Demo

struct SparklineStatTileDemo: View {
    @State private var tick = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    private func series(base: Double, swing: Double, slope: Double, phase: Double) -> [Double] {
        (0..<14).map { index in
            let position = Double(index + tick)
            return (base + position * slope + sin(position * 0.8 + phase) * swing).rounded()
        }
    }

    private var columns: [GridItem] {
        Array(repeating: GridItem(.flexible(), spacing: 14), count: dynamicTypeSize.isAccessibilitySize ? 1 : 2)
    }

    private func tile(_ title: LocalizedStringResource, _ systemImage: String, _ tint: Color, _ trend: [Double], suffix: String = "", higherIsBetter: Bool = true) -> some View {
        SparklineStatTile(
            title: title,
            value: (trend.last ?? 0).formatted() + suffix,
            trend: trend,
            systemImage: systemImage,
            tint: tint,
            higherIsBetter: higherIsBetter
        )
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Overview")
                    .font(.largeTitle.bold())

                LazyVGrid(columns: columns, spacing: 14) {
                    tile("Revenue", "eurosign.circle", .indigo, series(base: 4_200, swing: 320, slope: 60, phase: 0))
                    tile("Signups", "person.badge.plus", .teal, series(base: 310, swing: 40, slope: 8, phase: 1.4))
                    tile("Churn", "arrow.uturn.left.circle", .pink, series(base: 60, swing: 7, slope: -1.5, phase: 2.2), suffix: " users", higherIsBetter: false)
                    tile("Sessions", "waveform.path.ecg", .orange, series(base: 1_900, swing: 240, slope: 18, phase: 3.1))
                    tile("Orders", "shippingbox", .green, series(base: 840, swing: 90, slope: 12, phase: 4.3))
                    tile("Tickets", "lifepreserver", .purple, series(base: 120, swing: 22, slope: -2, phase: 5), higherIsBetter: false)
                }
            }
            .padding(20)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.18), .teal.opacity(0.12)], startPoint: .top, endPoint: .bottom))
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1))
                guard !Task.isCancelled else { return }
                tick = (tick + 1) % 1_000
            }
        }
    }
}

#Preview {
    SparklineStatTileDemo()
}
```

## Surface 3D Chart

A 3D surface plot that rotates when dragged, with buttons for preset viewing angles.

Category: Charts. Minimum: iOS 26.0. Path: Components/Charts/Surface3DChart/Surface3DChart.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import Charts
import Spatial
import SwiftUI

@available(iOS 26, *)
enum Surface3DChartPreset: String, CaseIterable, Identifiable {
    case angled = "Angled"
    case front = "Front"
    case top = "Top"
    case side = "Side"

    var id: Self { self }

    var pose: Chart3DPose {
        switch self {
        case .angled: Chart3DPose(azimuth: .degrees(35), inclination: .degrees(25))
        case .front: .front
        case .top: .top
        case .side: .right
        }
    }
}

/// A 3D surface plot that rotates when dragged, with buttons for preset viewing angles.
///
/// With Reduce Motion on, the presets jump to their angle.
@available(iOS 26, *)
struct Surface3DChart: View {
    var domain: ClosedRange<Double> = -3...3
    var gradient = Gradient(colors: [.indigo, .purple, .pink, .orange])
    let function: @Sendable (Double, Double) -> Double

    @State private var pose = Surface3DChartPreset.angled.pose
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var safeDomain: ClosedRange<Double> {
        domain.lowerBound < domain.upperBound ? domain : -1...1
    }

    private var currentPreset: Surface3DChartPreset? {
        Surface3DChartPreset.allCases.first { $0.pose == pose }
    }

    var body: some View {
        let function = self.function

        VStack(spacing: 20) {
            Chart3D {
                SurfacePlot(x: "X", y: "Height", z: "Z") { x, z in
                    let height = function(x, z)
                    return height.isFinite ? height : 0
                }
                .foregroundStyle(.heightBased(gradient))
                .roughness(0.35)
            }
            .chartXScale(domain: safeDomain)
            .chartZScale(domain: safeDomain)
            .chart3DPose($pose)
            // The chart sizes its plot for the longer side of its frame. In a tall frame that
            // is wider than the view, which cuts the corners and the axis labels.
            .aspectRatio(1, contentMode: .fit)
            .accessibilityLabel("3D surface plot")
            .accessibilityValue(currentPreset.map { "\($0.rawValue) view" } ?? "Custom view")
            .accessibilityHint("Use the view buttons to change the angle")

            ViewThatFits(in: .horizontal) {
                presetRow
                ScrollView(.horizontal) { presetRow }.scrollIndicators(.hidden)
            }
        }
    }

    private var presetRow: some View {
        HStack(spacing: 8) {
            ForEach(Surface3DChartPreset.allCases) { preset in
                Button {
                    withAnimation(reduceMotion ? nil : .smooth(duration: 0.6)) { pose = preset.pose }
                } label: {
                    Text(preset.rawValue)
                        .font(.subheadline.weight(.semibold))
                        .padding(.horizontal, 16)
                        .frame(minHeight: 44)
                        .foregroundStyle(preset == currentPreset ? Color.white : Color.primary)
                        .background(preset == currentPreset ? AnyShapeStyle(.indigo) : AnyShapeStyle(.thinMaterial), in: .capsule)
                        .contentShape(.capsule)
                }
                .buttonStyle(.plain)
                .accessibilityAddTraits(preset == currentPreset ? .isSelected : [])
            }
        }
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct Surface3DChartDemo: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Ripple")
                .font(.largeTitle.bold())
            Text("Drag to rotate, or pick a view")
                .font(.title3)
                .foregroundStyle(.secondary)

            Surface3DChart { x, z in
                let radius = (x * x + z * z).squareRoot()
                return sin(radius * 2.2) * exp(-radius * 0.28)
            }
            .padding(.top, 16)
        }
        .padding(24)
    }
}

@available(iOS 26, *)
#Preview {
    Surface3DChartDemo()
}
```

## Chat Auto Scroll List

A message list that stays on the newest message as messages arrive, and stops following when the user scrolls up to read.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/ChatAutoScrollList/ChatAutoScrollList.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A message list that stays on the newest message, and stops following when you scroll up.
///
/// While you read older messages, a button brings you back to the latest. With Reduce
/// Motion on, the list jumps instead of scrolling.
struct ChatAutoScrollList<Item: Identifiable, Row: View>: View where Item.ID: Sendable {
    let items: [Item]
    var spacing: CGFloat
    @ViewBuilder let row: (Item) -> Row

    @State private var position = ScrollPosition(idType: Item.ID.self)
    @State private var follow = ChatAutoScrollListFollowState()
    @State private var isUserScrolling = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    init(items: [Item], spacing: CGFloat = 8, @ViewBuilder row: @escaping (Item) -> Row) {
        self.items = items
        self.spacing = spacing
        self.row = row
    }

    var body: some View {
        ScrollView {
            LazyVStack(spacing: max(spacing, 0)) {
                ForEach(items) { row($0) }
            }
            .scrollTargetLayout()
            .padding()
        }
        .scrollPosition($position)
        .defaultScrollAnchor(.bottom, for: .initialOffset)
        .onScrollPhaseChange { _, phase in
            isUserScrolling = phase == .tracking || phase == .interacting || phase == .decelerating
        }
        .onScrollGeometryChange(for: Bool.self) { geometry in
            ChatAutoScrollListLogic.isAtBottom(
                visibleMaxY: geometry.visibleRect.maxY,
                contentHeight: geometry.contentSize.height
            )
        } action: { _, isAtBottom in
            follow.scrolled(isAtBottom: isAtBottom, isUserDriven: isUserScrolling)
        }
        .onChange(of: items.last?.id) { _, newID in
            guard let newID else { return }
            follow.messageArrived()
            if follow.isFollowing { scroll(to: newID) }
        }
        .overlay(alignment: .bottom) {
            ZStack {
                if !follow.isFollowing {
                    jumpButton.transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                }
            }
            .animation(reduceMotion ? nil : .snappy, value: follow)
        }
    }

    private var jumpButton: some View {
        Button {
            follow.jumpedToLatest()
            if let id = items.last?.id { scroll(to: id) }
        } label: {
            Label(follow.hasNewMessages ? "New messages" : "Latest", systemImage: "arrow.down")
                .font(.subheadline.weight(.semibold))
                .padding(.horizontal, 16)
                .padding(.vertical, 10)
                .background(.regularMaterial, in: .capsule)
                .shadow(color: .black.opacity(0.15), radius: 8, y: 3)
        }
        .buttonStyle(.plain)
        .padding(.bottom, 12)
    }

    private func scroll(to id: Item.ID) {
        withAnimation(reduceMotion ? nil : .snappy) {
            position.scrollTo(id: id, anchor: .bottom)
        }
    }
}

/// Whether the list follows new messages.
///
/// Only the user can stop following. Otherwise the moment a new message makes the list
/// taller, or an animated scroll is on its way down, would count as having left the bottom.
struct ChatAutoScrollListFollowState: Equatable {
    private(set) var isFollowing = true
    private(set) var hasNewMessages = false

    mutating func messageArrived() {
        if !isFollowing { hasNewMessages = true }
    }

    mutating func scrolled(isAtBottom: Bool, isUserDriven: Bool) {
        if isAtBottom {
            jumpedToLatest()
        } else if isUserDriven {
            isFollowing = false
        }
    }

    mutating func jumpedToLatest() {
        isFollowing = true
        hasNewMessages = false
    }
}

enum ChatAutoScrollListLogic {
    static func isAtBottom(visibleMaxY: CGFloat, contentHeight: CGFloat, tolerance: CGFloat = 32) -> Bool {
        visibleMaxY >= contentHeight - max(tolerance, 0)
    }
}

// MARK: - Demo

private struct ChatAutoScrollListDemoMessage: Identifiable {
    let id: Int
    let text: String
    var isMine: Bool { id.isMultiple(of: 3) }
}

struct ChatAutoScrollListDemo: View {
    private static let initialCount = 12
    private static let lines = [
        "Did the build finish?",
        "Almost, the last tests are running now.",
        "Great. Scroll up and the list stops following.",
        "And when you come back to the bottom?",
        "It starts following the new messages again, without you doing anything.",
        "Nice.",
    ]

    @State private var messages = (0..<initialCount).map { ChatAutoScrollListDemoMessage(id: $0, text: lines[$0 % lines.count]) }
    @State private var nextID = initialCount
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 0) {
            ChatAutoScrollList(items: messages) { message in
                Text(message.text)
                    .padding(.horizontal, 14)
                    .padding(.vertical, 9)
                    .foregroundStyle(message.isMine ? Color.white : Color.primary)
                    .background(message.isMine ? AnyShapeStyle(.indigo) : AnyShapeStyle(.thinMaterial), in: .rect(cornerRadius: 18))
                    .frame(maxWidth: .infinity, alignment: message.isMine ? .trailing : .leading)
            }

            Button("Add message", systemImage: "plus.bubble") { addMessage() }
                .buttonStyle(.borderedProminent)
                .tint(.indigo)
                .padding()
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .teal.opacity(0.1)], startPoint: .top, endPoint: .bottom))
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.8))
                guard !Task.isCancelled else { return }
                addMessage()
            }
        }
    }

    private func addMessage() {
        messages.append(.init(id: nextID, text: Self.lines[nextID % Self.lines.count]))
        nextID += 1
        if messages.count > 60 { messages.removeFirst(30) }
    }
}

#Preview {
    ChatAutoScrollListDemo()
}
```

## Chat Bubble Shape

A message bubble with a tail, whose corners adapt to grouped consecutive messages.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/ChatBubbleShape/ChatBubbleShape.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ChatBubbleShapeSide: Sendable {
    case leading, trailing
}

/// Where a message sits inside a run of messages from the same sender.
nonisolated enum ChatBubbleShapePosition: Sendable {
    case single, first, middle, last
}

/// A message bubble with a tail, whose corners tighten where messages are grouped.
///
/// The tail is drawn just outside the shape's rect, so leave about 8 points beside it.
/// Corners and tail animate when a bubble's position changes.
nonisolated struct ChatBubbleShape: Shape {
    var side: ChatBubbleShapeSide = .trailing
    private var radii: RectangleCornerRadii
    private var tail: CGFloat

    private let tailWidth: CGFloat = 7

    init(
        side: ChatBubbleShapeSide = .trailing,
        position: ChatBubbleShapePosition = .single,
        radius: CGFloat = 18,
        tightRadius: CGFloat = 5
    ) {
        self.side = side
        radii = ChatBubbleShapeLogic.radii(for: position, radius: radius, tightRadius: tightRadius)
        tail = ChatBubbleShapeLogic.hasTail(position) ? 1 : 0
    }

    var animatableData: AnimatablePair<RectangleCornerRadii.AnimatableData, CGFloat> {
        get { AnimatablePair(radii.animatableData, tail) }
        set {
            radii.animatableData = newValue.first
            tail = newValue.second
        }
    }

    func path(in rect: CGRect) -> Path {
        guard rect.width > 0, rect.height > 0 else { return Path() }

        let path = outline(width: rect.width, height: rect.height)
        let placed = side == .trailing
            ? path
            : path.applying(CGAffineTransform(scaleX: -1, y: 1).translatedBy(x: -rect.width, y: 0))
        return placed.offsetBy(dx: rect.minX, dy: rect.minY)
    }

    /// One closed outline, with the tail on the right. The left side is its mirror image.
    private func outline(width: CGFloat, height: CGFloat) -> Path {
        let limit = min(width, height) / 2
        let topLeft = min(max(radii.topLeading, 0), limit)
        let topRight = min(max(radii.topTrailing, 0), limit)
        let bottomRight = min(max(radii.bottomTrailing, 0), limit)
        let bottomLeft = min(max(radii.bottomLeading, 0), limit)

        // The bottom right corner is two curves that meet at `tip`. With no tail they
        // form an ordinary rounded corner, and the tail pulls them out to a point.
        let cornerStart = CGPoint(x: width, y: height - bottomRight)
        let cornerEnd = CGPoint(x: width - bottomRight, y: height)
        let corner = CGPoint(x: width, y: height)
        let firstControl = midpoint(cornerStart, corner)
        let secondControl = midpoint(corner, cornerEnd)
        let roundedTip = midpoint(firstControl, secondControl)

        var path = Path()
        path.move(to: CGPoint(x: topLeft, y: 0))
        path.addLine(to: CGPoint(x: width - topRight, y: 0))
        path.addArc(tangent1End: CGPoint(x: width, y: 0), tangent2End: CGPoint(x: width, y: topRight), radius: topRight)
        path.addLine(to: cornerStart)
        path.addQuadCurve(
            to: blend(roundedTip, CGPoint(x: width + tailWidth, y: height), tail),
            control: blend(firstControl, CGPoint(x: width, y: height - 2), tail)
        )
        path.addQuadCurve(
            to: cornerEnd,
            control: blend(secondControl, CGPoint(x: width - 2, y: height - 1), tail)
        )
        path.addLine(to: CGPoint(x: bottomLeft, y: height))
        path.addArc(tangent1End: CGPoint(x: 0, y: height), tangent2End: CGPoint(x: 0, y: height - bottomLeft), radius: bottomLeft)
        path.addLine(to: CGPoint(x: 0, y: topLeft))
        path.addArc(tangent1End: .zero, tangent2End: CGPoint(x: topLeft, y: 0), radius: topLeft)
        path.closeSubpath()
        return path
    }

    private func midpoint(_ a: CGPoint, _ b: CGPoint) -> CGPoint {
        blend(a, b, 0.5)
    }

    private func blend(_ a: CGPoint, _ b: CGPoint, _ amount: CGFloat) -> CGPoint {
        CGPoint(x: a.x + (b.x - a.x) * amount, y: a.y + (b.y - a.y) * amount)
    }
}

nonisolated enum ChatBubbleShapeLogic {
    static func hasTail(_ position: ChatBubbleShapePosition) -> Bool {
        position == .single || position == .last
    }

    /// The corners, as if the tail were on the right.
    static func radii(for position: ChatBubbleShapePosition, radius: CGFloat, tightRadius: CGFloat) -> RectangleCornerRadii {
        let tightTop = position == .middle || position == .last
        let tightBottom = position == .first || position == .middle
        return RectangleCornerRadii(
            topLeading: radius,
            bottomLeading: radius,
            bottomTrailing: tightBottom ? tightRadius : radius,
            topTrailing: tightTop ? tightRadius : radius
        )
    }

    /// Works out each message's position from who sent it.
    static func positions<Sender: Equatable>(for senders: [Sender]) -> [ChatBubbleShapePosition] {
        senders.indices.map { index in
            let joinsPrevious = index > senders.startIndex && senders[index - 1] == senders[index]
            let joinsNext = index + 1 < senders.endIndex && senders[index + 1] == senders[index]
            switch (joinsPrevious, joinsNext) {
            case (false, false): return .single
            case (false, true): return .first
            case (true, true): return .middle
            case (true, false): return .last
            }
        }
    }
}

// MARK: - Demo

struct ChatBubbleShapeDemo: View {
    @State private var visibleCount = ChatBubbleShapeDemo.messages.count
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let messages: [(isMine: Bool, text: String)] = [
        (false, "Are you coming tonight?"),
        (true, "Yes!"),
        (true, "Running a little late"),
        (true, "Save me a seat"),
        (false, "Of course"),
        (false, "Front row, near the stage"),
        (true, "You are the best"),
    ]

    private var visible: ArraySlice<(isMine: Bool, text: String)> {
        Self.messages.prefix(visibleCount)
    }

    var body: some View {
        let positions = ChatBubbleShapeLogic.positions(for: visible.map(\.isMine))

        ScrollView {
            VStack(spacing: 0) {
                ForEach(Array(visible.enumerated()), id: \.offset) { index, message in
                    bubble(message.text, isMine: message.isMine, position: positions[index])
                        .transition(reduceMotion ? .opacity : .scale(scale: 0.8, anchor: .bottom).combined(with: .opacity))
                }
            }
            .padding(20)
        }
        .defaultScrollAnchor(.bottom)
        .task(id: reduceMotion) {
            guard !reduceMotion else {
                visibleCount = Self.messages.count
                return
            }
            while !Task.isCancelled {
                for count in 1...Self.messages.count {
                    guard !Task.isCancelled else { return }
                    withAnimation(.snappy(duration: 0.3)) { visibleCount = count }
                    try? await Task.sleep(for: .seconds(0.45))
                }
                try? await Task.sleep(for: .seconds(1))
            }
        }
    }

    private func bubble(_ text: String, isMine: Bool, position: ChatBubbleShapePosition) -> some View {
        Text(text)
            .padding(.horizontal, 14)
            .padding(.vertical, 9)
            .foregroundStyle(isMine ? Color.white : Color.primary)
            .background(
                isMine ? AnyShapeStyle(.blue) : AnyShapeStyle(.quaternary),
                in: ChatBubbleShape(side: isMine ? .trailing : .leading, position: position)
            )
            .padding(.horizontal, 8)
            .frame(maxWidth: .infinity, alignment: isMine ? .trailing : .leading)
            .padding(.top, position == .single || position == .first ? 14 : 2)
    }
}

#Preview {
    ChatBubbleShapeDemo()
}
```

## Keyboard Tracking Input Bar

A composer bar pinned below its content that rises with the keyboard and grows as the user types more lines.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/KeyboardTrackingInputBar/KeyboardTrackingInputBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A composer pinned below its content that rises with the keyboard and grows as you type.
///
/// `safeAreaInset` makes the content leave room for the bar and moves the bar with the
/// keyboard, so nothing here needs to measure it.
struct KeyboardTrackingInputBar<Content: View>: View {
    @Binding var text: String
    var placeholder: LocalizedStringResource
    var tint: Color
    var onSend: (String) -> Void
    @ViewBuilder let content: Content

    @FocusState private var isFocused: Bool
    @ScaledMetric(relativeTo: .body) private var sendSize = 34.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    init(
        text: Binding<String>,
        placeholder: LocalizedStringResource = "Message",
        tint: Color = .blue,
        onSend: @escaping (String) -> Void,
        @ViewBuilder content: () -> Content
    ) {
        _text = text
        self.placeholder = placeholder
        self.tint = tint
        self.onSend = onSend
        self.content = content()
    }

    private var message: String {
        text.trimmingCharacters(in: .whitespacesAndNewlines)
    }

    var body: some View {
        content.safeAreaInset(edge: .bottom, spacing: 0) {
            HStack(alignment: .bottom, spacing: 8) {
                TextField(placeholder, text: $text, axis: .vertical)
                    .lineLimit(1...5)
                    .focused($isFocused)
                    .padding(.horizontal, 14)
                    .padding(.vertical, 8)
                    .background(.background, in: .rect(cornerRadius: 20))
                    .overlay {
                        RoundedRectangle(cornerRadius: 20).strokeBorder(.quaternary)
                    }
                    .accessibilityLabel(placeholder)

                Button(action: send) {
                    Image(systemName: "arrow.up")
                        .font(.body.weight(.bold))
                        .foregroundStyle(KeyboardTrackingInputBarContrastingForeground(background: tint))
                        .frame(width: sendSize, height: sendSize)
                        .background(message.isEmpty ? AnyShapeStyle(.gray.opacity(0.4)) : AnyShapeStyle(tint), in: .circle)
                        .frame(minWidth: 44, minHeight: 44)
                        .contentShape(.rect)
                }
                .disabled(message.isEmpty)
                .accessibilityLabel("Send")
                .animation(reduceMotion ? nil : .snappy, value: message.isEmpty)
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 8)
            .background(.bar)
        }
    }

    private func send() {
        let sent = message
        guard !sent.isEmpty else { return }
        text = ""
        onSend(sent)
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct KeyboardTrackingInputBarContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

private struct KeyboardTrackingInputBarDemoMessage: Identifiable {
    let id = UUID()
    let text: String
}

struct KeyboardTrackingInputBarDemo: View {
    @State private var draft = ""
    @State private var messages = [
        KeyboardTrackingInputBarDemoMessage(text: "Tap the field and the bar rides up on the keyboard."),
        KeyboardTrackingInputBarDemoMessage(text: "Long messages make it grow, up to five lines."),
    ]

    var body: some View {
        KeyboardTrackingInputBar(text: $draft, onSend: { sent in
            messages.append(.init(text: sent))
        }, content: {
            ScrollView {
                LazyVStack(alignment: .trailing, spacing: 8) {
                    ForEach(messages) { message in
                        Text(message.text)
                            .padding(.horizontal, 14)
                            .padding(.vertical, 9)
                            .foregroundStyle(.white)
                            .background(.blue, in: .rect(cornerRadius: 18))
                    }
                }
                .padding()
                .frame(maxWidth: .infinity, alignment: .trailing)
            }
            .defaultScrollAnchor(.bottom)
            .scrollDismissesKeyboard(.interactively)
        })
    }
}

#Preview {
    KeyboardTrackingInputBarDemo()
}
```

## Nested Comment Thread

Threaded comments with indentation, connector lines and collapsible replies.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/NestedCommentThread/NestedCommentThread.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct NestedCommentThreadComment: Identifiable, Hashable {
    let id: String
    let author: String
    let text: String
    var age: String = ""
    var replies: [NestedCommentThreadComment] = []
}

/// Threaded comments with indentation, connector lines and collapsible replies.
///
/// Put it in a `ScrollView`. Indentation stops growing past a few levels, sooner with
/// accessibility text sizes, so deep threads keep room for their text.
struct NestedCommentThread: View {
    let comments: [NestedCommentThreadComment]
    var tint: Color = .indigo

    @State private var collapsed: Set<String> = []
    @ScaledMetric(relativeTo: .subheadline) private var avatarSize = 34.0
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let verticalPadding = 8.0
    private var maximumLevels: Int { dynamicTypeSize.isAccessibilitySize ? 2 : 5 }

    var body: some View {
        LazyVStack(alignment: .leading, spacing: 0) {
            ForEach(NestedCommentThreadLogic.rows(for: comments, collapsed: collapsed)) { row in
                rowView(row).transition(.opacity)
            }
        }
    }

    private func rowView(_ row: NestedCommentThreadLogic.Row) -> some View {
        let guides = Array(row.guides.suffix(maximumLevels))
        let leading = CGFloat(guides.count) * avatarSize
        let showsStem = !row.comment.replies.isEmpty && !collapsed.contains(row.comment.id)

        return HStack(alignment: .top, spacing: 10) {
            avatar(for: row.comment)
            content(for: row.comment)
        }
        .padding(.vertical, verticalPadding)
        .padding(.leading, leading)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(alignment: .leading) {
            HStack(spacing: 0) {
                ForEach(Array(guides.enumerated()), id: \.offset) { index, continues in
                    NestedCommentThreadGuide(
                        continues: continues,
                        elbowY: index == guides.count - 1 ? verticalPadding + avatarSize / 2 : nil
                    )
                    .stroke(.quaternary, style: StrokeStyle(lineWidth: 1.5, lineCap: .round))
                    .frame(width: avatarSize)
                }
            }
        }
        .background(alignment: .topLeading) {
            if showsStem {
                Rectangle()
                    .fill(.quaternary)
                    .frame(width: 1.5)
                    .padding(.top, verticalPadding + avatarSize)
                    .frame(maxHeight: .infinity)
                    .offset(x: leading + avatarSize / 2 - 0.75)
            }
        }
    }

    private func avatar(for comment: NestedCommentThreadComment) -> some View {
        Circle()
            .fill(tint.gradient)
            .frame(width: avatarSize, height: avatarSize)
            .overlay {
                Text(comment.author.prefix(1))
                    .font(.subheadline.weight(.bold))
                    .foregroundStyle(NestedCommentThreadContrastingForeground(background: tint))
            }
            .accessibilityHidden(true)
    }

    private func content(for comment: NestedCommentThreadComment) -> some View {
        VStack(alignment: .leading, spacing: 4) {
            VStack(alignment: .leading, spacing: 2) {
                HStack(spacing: 6) {
                    Text(comment.author).font(.subheadline.weight(.semibold))
                    Text(comment.age).font(.caption).foregroundStyle(.secondary)
                }
                Text(comment.text).font(.subheadline)
            }
            .accessibilityElement(children: .combine)

            if !comment.replies.isEmpty {
                toggle(for: comment)
            }
        }
    }

    private func toggle(for comment: NestedCommentThreadComment) -> some View {
        let isCollapsed = collapsed.contains(comment.id)
        let count = NestedCommentThreadLogic.replyCount(of: comment)
        let title = "\(isCollapsed ? "Show" : "Hide") \(count) \(count == 1 ? "reply" : "replies")"

        return Button {
            withAnimation(reduceMotion ? nil : .snappy) {
                if isCollapsed {
                    collapsed.remove(comment.id)
                } else {
                    collapsed.insert(comment.id)
                }
            }
        } label: {
            Text(title)
                .font(.caption.weight(.semibold))
                .foregroundStyle(tint)
                .frame(minHeight: 28)
                // The padding widens what answers to a touch, and the same padding taken
                // back keeps the thread as compact as it was.
                .padding(.vertical, 8)
                .contentShape(.rect)
                .padding(.vertical, -8)
        }
        .buttonStyle(.plain)
        .accessibilityLabel("\(title) to \(comment.author)")
    }
}

/// One indentation column: a straight line, and for a comment's own level an elbow into it.
nonisolated private struct NestedCommentThreadGuide: Shape {
    let continues: Bool
    let elbowY: CGFloat?

    func path(in rect: CGRect) -> Path {
        var path = Path()
        if let elbowY {
            let radius = min(10, rect.width / 2)
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.midX, y: max(rect.minY, elbowY - radius)))
            path.addQuadCurve(to: CGPoint(x: rect.midX + radius, y: elbowY), control: CGPoint(x: rect.midX, y: elbowY))
            path.addLine(to: CGPoint(x: rect.maxX, y: elbowY))
        }
        if continues {
            path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.maxY))
        }
        return path
    }
}

/// Turns the tree into the flat list of visible rows, apart from the view so it can be tested.
enum NestedCommentThreadLogic {
    struct Row: Identifiable, Equatable {
        let comment: NestedCommentThreadComment
        /// One entry per indentation level: whether its line continues below this row.
        let guides: [Bool]

        var id: String { comment.id }
    }

    static func rows(for comments: [NestedCommentThreadComment], collapsed: Set<String>) -> [Row] {
        var result: [Row] = []

        func visit(_ list: [NestedCommentThreadComment], guides: [Bool], isTopLevel: Bool) {
            for (index, comment) in list.enumerated() {
                let rowGuides = isTopLevel ? [] : guides + [index < list.count - 1]
                result.append(Row(comment: comment, guides: rowGuides))
                if !collapsed.contains(comment.id) {
                    visit(comment.replies, guides: rowGuides, isTopLevel: false)
                }
            }
        }

        visit(comments, guides: [], isTopLevel: true)
        return result
    }

    /// Every reply below a comment, however deep.
    static func replyCount(of comment: NestedCommentThreadComment) -> Int {
        comment.replies.reduce(comment.replies.count) { $0 + replyCount(of: $1) }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct NestedCommentThreadContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct NestedCommentThreadDemo: View {
    private let comments = [
        NestedCommentThreadComment(id: "1", author: "Marta", text: "Should we ship this behind a flag first?", age: "2h", replies: [
            NestedCommentThreadComment(id: "2", author: "Luis", text: "Yes, at least for the first week.", age: "1h", replies: [
                NestedCommentThreadComment(id: "3", author: "Ana", text: "Agreed. I can watch the metrics.", age: "40m"),
            ]),
            NestedCommentThreadComment(id: "4", author: "Noa", text: "I will set up the flag today.", age: "32m"),
        ]),
        NestedCommentThreadComment(id: "5", author: "Diego", text: "The new empty state looks great.", age: "25m", replies: [
            NestedCommentThreadComment(id: "6", author: "Iris", text: "Thanks! It took a few tries.", age: "12m"),
        ]),
        NestedCommentThreadComment(id: "7", author: "Sara", text: "Can someone review the copy before Friday?", age: "5m"),
    ]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Discussion")
                    .font(.largeTitle.bold())

                NestedCommentThread(comments: comments)
            }
            .padding(20)
        }
    }
}

#Preview {
    NestedCommentThreadDemo()
}
```

## Tapback Reaction Bubble

A message you press and hold to react to, with a bar of reactions above it and the chosen one kept as a badge on its corner.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/TapbackReactionBubble/TapbackReactionBubble.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum TapbackReactionBubbleLogic {
    /// The reaction a message has after one is chosen: choosing the one it had takes it away.
    static func toggled(_ current: String?, choosing reaction: String) -> String? {
        current == reaction ? nil : reaction
    }

    /// How long a reaction of the bar waits before it pops in, so they arrive in a quick wave
    /// that a long bar does not stretch.
    static func delay(for index: Int, step: Double = 0.03, limit: Double = 0.18) -> Double {
        min(Double(max(index, 0)) * step, limit)
    }
}

/// A message you press and hold to react to: it lifts, a bar of reactions opens above it, and the
/// one you choose stays on its corner as a badge. Choose it again to take it away.
///
/// The caller owns `isPicking`, so it can close the bar from outside and dim the other messages.
/// VoiceOver offers each reaction as an action of the message. With Reduce Motion on, nothing
/// scales: the bar and the badge fade.
struct TapbackReactionBubble<Content: View>: View {
    @Binding var reaction: String?
    @Binding var isPicking: Bool
    var reactions = ["❤️", "👍", "👎", "😂", "‼️", "❓"]
    /// The side of the screen the message sits on. The bar grows from that side and the badge
    /// goes to the other corner, toward the middle of the screen.
    var side = HorizontalAlignment.leading
    @ViewBuilder var content: () -> Content

    private let gap: CGFloat = 8
    private let badgeOverhang = 0.65

    @State private var isBarShown = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        // Plain values for the alignment guides, which may not capture a generic view: Xcode 26 rejects it.
        let gap = gap
        let overhang = badgeOverhang
        let isLeading = side == .leading

        content()
            .overlay(alignment: Alignment(horizontal: side == .leading ? .trailing : .leading, vertical: .top)) {
                // The guides go on a container that is always there: on a view that comes and goes
                // with a transition they are not read.
                ZStack {
                    if let reaction {
                        badge(reaction)
                    }
                }
                // Most of the badge hangs outside the corner, so it does not cover the message.
                .alignmentGuide(.top) { $0.height * overhang }
                .alignmentGuide(isLeading ? .trailing : .leading) { $0.width * (isLeading ? 1 - overhang : overhang) }
            }
            .scaleEffect(isPicking && !reduceMotion ? 1.04 : 1)
            .overlay(alignment: Alignment(horizontal: side, vertical: .top)) {
                ZStack {
                    if isPicking {
                        bar
                            .transition(reduceMotion ? .opacity : .scale(scale: 0.5, anchor: .bottom).combined(with: .opacity))
                    }
                }
                // The bottom of the bar sits a gap above the top of the message.
                .alignmentGuide(.top) { $0[.bottom] + gap }
            }
            .zIndex(isPicking ? 1 : 0)
            .onLongPressGesture(minimumDuration: 0.4) {
                isPicking = true
            }
            .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.35, bounce: 0.3), value: isPicking)
            .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.35, bounce: 0.5), value: reaction)
            .sensoryFeedback(trigger: isPicking) { _, isPicking in
                isPicking ? .impact(weight: .medium) : nil
            }
            .sensoryFeedback(.selection, trigger: reaction)
            .accessibilityElement(children: .combine)
            .accessibilityValue(reaction.map { "Reacted with \($0)" } ?? "")
            .accessibilityActions {
                ForEach(reactions, id: \.self) { option in
                    Button(option == reaction ? "Remove \(option)" : "React with \(option)") {
                        choose(option)
                    }
                }
            }
    }

    private func badge(_ reaction: String) -> some View {
        Text(reaction)
            .font(.footnote)
            .padding(6)
            .background(.regularMaterial, in: .circle)
            .overlay { Circle().strokeBorder(.background, lineWidth: 2) }
            .transition(reduceMotion ? .opacity : .scale(scale: 0.2).combined(with: .opacity))
            .id(reaction)
            .accessibilityHidden(true)
    }

    private var bar: some View {
        HStack(spacing: 4) {
            ForEach(Array(reactions.enumerated()), id: \.element) { index, option in
                Button {
                    choose(option)
                } label: {
                    Text(option)
                        .font(.title2)
                        .frame(minWidth: 40, minHeight: 40)
                        .background(option == reaction ? AnyShapeStyle(.tint.opacity(0.25)) : AnyShapeStyle(.clear), in: .circle)
                }
                .buttonStyle(.plain)
                .scaleEffect(isBarShown || reduceMotion ? 1 : 0.4)
                .animation(.spring(duration: 0.25, bounce: 0.45).delay(TapbackReactionBubbleLogic.delay(for: index)), value: isBarShown)
                .accessibilityLabel(option == reaction ? "Remove \(option)" : "React with \(option)")
            }
        }
        .padding(6)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.18), radius: 12, y: 4)
        .fixedSize()
        .onAppear { isBarShown = true }
        .onDisappear { isBarShown = false }
    }

    private func choose(_ option: String) {
        reaction = TapbackReactionBubbleLogic.toggled(reaction, choosing: option)
        isPicking = false
    }
}

// MARK: - Demo

private struct TapbackReactionBubbleDemoMessage: Identifiable {
    let id: Int
    let text: String
    let isMine: Bool
}

struct TapbackReactionBubbleDemo: View {
    private let messages = [
        TapbackReactionBubbleDemoMessage(id: 0, text: "Are we still on for the hike on Saturday?", isMine: false),
        TapbackReactionBubbleDemoMessage(id: 1, text: "Yes! I’ll bring the snacks.", isMine: true),
        TapbackReactionBubbleDemoMessage(id: 2, text: "Perfect. Meet at the trailhead at eight?", isMine: false),
        TapbackReactionBubbleDemoMessage(id: 3, text: "Eight it is.", isMine: true),
    ]

    @State private var reactions: [Int: String] = [1: "❤️"]
    @State private var picking: Int?

    var body: some View {
        VStack(spacing: 18) {
            Text("Press and hold a message")
                .font(.footnote)
                .foregroundStyle(.secondary)
                .padding(.bottom, 4)

            ForEach(messages) { message in
                let isOther = picking != nil && picking != message.id

                TapbackReactionBubble(
                    reaction: Binding { reactions[message.id] } set: { reactions[message.id] = $0 },
                    isPicking: Binding { picking == message.id } set: { picking = $0 ? message.id : nil },
                    side: message.isMine ? .trailing : .leading
                ) {
                    Text(message.text)
                        .padding(.horizontal, 14)
                        .padding(.vertical, 10)
                        .foregroundStyle(message.isMine ? .white : .primary)
                        .background(message.isMine ? AnyShapeStyle(.blue) : AnyShapeStyle(.fill.tertiary), in: .rect(cornerRadius: 20))
                }
                .frame(maxWidth: 280, alignment: message.isMine ? .trailing : .leading)
                .frame(maxWidth: .infinity, alignment: message.isMine ? .trailing : .leading)
                .opacity(isOther ? 0.3 : 1)
                .allowsHitTesting(!isOther)
                .zIndex(picking == message.id ? 1 : 0)
            }

            Spacer()
        }
        .padding(.horizontal, 16)
        .padding(.top, 80)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            // Catches the taps outside the open message, which close its bar.
            Color(.systemBackground)
                .ignoresSafeArea()
                .onTapGesture { picking = nil }
        }
        .animation(.easeInOut(duration: 0.25), value: picking)
    }
}

#Preview {
    TapbackReactionBubbleDemo()
}
```

## Typing Indicator Bubble

Three dots that bounce in turn inside a message bubble while someone is typing, and shrink away when they stop.

Category: Chat. Minimum: iOS 18.0. Path: Components/Chat/TypingIndicatorBubble/TypingIndicatorBubble.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// When each dot rises. Every dot waits, bounces and rests for the same total, so the three
/// keep their order however long the indicator stays on screen.
nonisolated enum TypingIndicatorBubbleTiming {
    static let bounce = 0.5

    /// What a dot waits before it rises: each one a step after the one before it.
    static func delay(for index: Int, stagger: Double) -> Double {
        Double(max(index, 0)) * max(stagger, 0)
    }

    /// What a dot rests after its bounce, so its wait, bounce and rest add up to `period`.
    static func rest(for index: Int, stagger: Double, period: Double) -> Double {
        max(period - bounce - delay(for: index, stagger: stagger), 0)
    }

    /// The shortest period in which the last dot still has time to bounce.
    static func period(_ period: Double, dots: Int, stagger: Double) -> Double {
        max(period, bounce + delay(for: dots - 1, stagger: stagger))
    }
}

/// Three dots that bounce in turn inside a message bubble while someone is typing.
///
/// Set `isTyping` to false and the bubble shrinks away into its corner. With Reduce Motion
/// on, the dots only brighten in turn and the bubble fades. VoiceOver reads `label`.
struct TypingIndicatorBubble: View {
    var isTyping = true
    var label: LocalizedStringResource = "Typing"
    var bubbleColor = Color(.secondarySystemFill)
    var dotColor = Color.secondary
    var dotCount = 3
    var period = 1.3

    @ScaledMetric(relativeTo: .body) private var dotSize = 9.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let stagger = 0.16
    private let cornerRadius: CGFloat = 20

    var body: some View {
        ZStack(alignment: .bottomLeading) {
            if isTyping {
                bubble
                    .transition(reduceMotion ? .opacity : .scale(scale: 0.5, anchor: .bottomLeading).combined(with: .opacity))
            }
        }
        .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.4, bounce: 0.35), value: isTyping)
    }

    private var bubble: some View {
        HStack(spacing: dotSize * 0.6) {
            ForEach(0..<max(dotCount, 1), id: \.self) { index in
                dot(at: index)
            }
        }
        .padding(.horizontal, dotSize * 1.6)
        .padding(.vertical, dotSize * 1.5)
        // The corner next to the sender is tighter, like the tail of a message.
        .background(bubbleColor, in: .rect(cornerRadii: .init(topLeading: cornerRadius, bottomLeading: 6, bottomTrailing: cornerRadius, topTrailing: cornerRadius)))
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(label)
    }

    private func dot(at index: Int) -> some View {
        let count = max(dotCount, 1)
        let total = TypingIndicatorBubbleTiming.period(period, dots: count, stagger: stagger)
        let delay = TypingIndicatorBubbleTiming.delay(for: index, stagger: stagger)
        let rest = TypingIndicatorBubbleTiming.rest(for: index, stagger: stagger, period: total)
        let half = TypingIndicatorBubbleTiming.bounce / 2
        let lift = reduceMotion ? 0 : dotSize * 0.7

        return Circle()
            .fill(dotColor)
            .frame(width: dotSize, height: dotSize)
            .keyframeAnimator(initialValue: 0.0, repeating: true) { content, rise in
                content
                    .offset(y: -lift * rise)
                    .opacity(0.45 + 0.55 * rise)
            } keyframes: { _ in
                KeyframeTrack {
                    LinearKeyframe(0, duration: delay)
                    CubicKeyframe(1, duration: half)
                    CubicKeyframe(0, duration: half)
                    LinearKeyframe(0, duration: rest)
                }
            }
    }
}

// MARK: - Demo

struct TypingIndicatorBubbleDemo: View {
    private static let replies = ["On my way!", "Save me a seat", "Five minutes, I promise"]

    @State private var messages = ["Are you coming tonight?"]
    @State private var isTyping = false

    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text("Maya")
                .font(.largeTitle.bold())
                .padding(.bottom, 8)

            ForEach(Array(messages.enumerated()), id: \.offset) { index, message in
                Text(message)
                    .padding(.horizontal, 14)
                    .padding(.vertical, 10)
                    .foregroundStyle(index == 0 ? .white : .primary)
                    .background(index == 0 ? AnyShapeStyle(.tint) : AnyShapeStyle(Color(.secondarySystemFill)), in: .rect(cornerRadius: 20))
                    .frame(maxWidth: .infinity, alignment: index == 0 ? .trailing : .leading)
                    .transition(.opacity.combined(with: .move(edge: .bottom)))
            }

            TypingIndicatorBubble(isTyping: isTyping, label: "Maya is typing")

            Spacer(minLength: 0)

            Button(isTyping ? "Stop typing" : "Start typing") {
                isTyping.toggle()
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .frame(maxWidth: .infinity)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .animation(reduceMotion ? nil : .snappy, value: messages)
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task {
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(0.7))
                guard !Task.isCancelled, isAutoPlaying else { return }
                isTyping = true

                try? await Task.sleep(for: .seconds(1.9))
                guard !Task.isCancelled, isAutoPlaying else { return }
                isTyping = false
                messages = messages.count > Self.replies.count
                    ? [messages[0]]
                    : messages + [Self.replies[messages.count - 1]]
            }
        }
    }
}

#Preview {
    TypingIndicatorBubbleDemo()
}
```

## Add To Cart Fly Button

An add-to-cart button that sends a copy of the product image arcing into the cart badge.

Category: Commerce. Minimum: iOS 18.0. Path: Components/Commerce/AddToCartFlyButton/AddToCartFlyButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A product image and an add button that sends a copy of the image arcing into the cart.
///
/// Measure your cart icon in the `.global` space and pass its frame as `cartFrame`. The
/// count goes up when the copy lands. With Reduce Motion on, or with no `cartFrame`, the
/// count goes up at once and nothing flies.
struct AddToCartFlyButton: View {
    let image: Image
    @Binding var count: Int
    var cartFrame: CGRect?
    var title: LocalizedStringResource = "Add to Cart"
    var imageLabel: LocalizedStringResource = "Product"
    var tint: Color = .indigo
    var onAdd: () -> Void = {}

    @State private var flights: [AddToCartFlyButtonLaunch] = []
    @State private var sourceFrame = CGRect.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let maximumFlights = 6

    var body: some View {
        VStack(spacing: 20) {
            image
                .resizable()
                .scaledToFit()
                .foregroundStyle(tint)
                .padding(36)
                .frame(maxWidth: .infinity)
                .frame(height: 260)
                .background(tint.opacity(0.12), in: .rect(cornerRadius: 28))
                .accessibilityLabel(imageLabel)
                .onGeometryChange(for: CGRect.self) { $0.frame(in: .global) } action: { sourceFrame = $0 }
                .overlay {
                    ForEach(flights) { flight in
                        AddToCartFlyButtonFlight(image: image, destination: flight.destination, tint: tint) {
                            land(flight.id)
                        }
                    }
                }

            Button(action: add) {
                Label(title, systemImage: "cart.badge.plus")
                    .font(.headline)
                    .frame(maxWidth: .infinity, minHeight: 44)
            }
            .buttonStyle(.borderedProminent)
            .tint(tint)
        }
    }

    private func add() {
        guard !reduceMotion, flights.count < maximumFlights, let cartFrame, sourceFrame != .zero else {
            increment()
            return
        }
        let destination = CGSize(width: cartFrame.midX - sourceFrame.midX, height: cartFrame.midY - sourceFrame.midY)
        flights.append(AddToCartFlyButtonLaunch(destination: destination))
    }

    private func land(_ id: UUID) {
        guard let index = flights.firstIndex(where: { $0.id == id }) else { return }
        flights.remove(at: index)
        increment()
    }

    private func increment() {
        count = count == .max ? count : count + 1
        onAdd()
    }
}

private struct AddToCartFlyButtonLaunch: Identifiable {
    let id = UUID()
    let destination: CGSize
}

/// The flying copy. It lands even if its view goes away mid-flight, so no item is lost.
private struct AddToCartFlyButtonFlight: View {
    let image: Image
    let destination: CGSize
    let tint: Color
    let onLand: () -> Void

    @State private var progress = 0.0

    private let duration = 0.65

    var body: some View {
        image
            .resizable()
            .scaledToFit()
            .foregroundStyle(tint)
            .padding(14)
            .frame(width: 84, height: 84)
            .background(.background, in: .circle)
            .overlay { Circle().strokeBorder(tint.opacity(0.3)) }
            .modifier(AddToCartFlyButtonArc(progress: progress, destination: destination))
            .allowsHitTesting(false)
            .accessibilityHidden(true)
            .task {
                withAnimation(.easeIn(duration: duration)) { progress = 1 }
                try? await Task.sleep(for: .seconds(duration))
                onLand()
            }
    }
}

/// Moves a view along the arc and shrinks it as it travels.
private struct AddToCartFlyButtonArc: GeometryEffect {
    var progress: Double
    let destination: CGSize

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {
        let offset = AddToCartFlyButtonLogic.arcOffset(progress: progress, destination: destination, lift: 120)
        let scale = 1 - 0.75 * CGFloat(min(max(progress, 0), 1))
        let transform = CGAffineTransform(translationX: offset.width + size.width / 2, y: offset.height + size.height / 2)
            .scaledBy(x: scale, y: scale)
            .translatedBy(x: -size.width / 2, y: -size.height / 2)
        return ProjectionTransform(transform)
    }
}

enum AddToCartFlyButtonLogic {
    /// A point on a curve from zero to `destination` that first rises by about `lift`.
    static func arcOffset(progress: Double, destination: CGSize, lift: CGFloat) -> CGSize {
        let t = CGFloat(min(max(progress, 0), 1))
        let controlX = destination.width * 0.35
        let controlY = min(destination.height, 0) - lift
        return CGSize(
            width: 2 * (1 - t) * t * controlX + t * t * destination.width,
            height: 2 * (1 - t) * t * controlY + t * t * destination.height
        )
    }
}

/// A cart icon with a count badge that bumps when the count changes.
struct AddToCartFlyButtonCart: View {
    let count: Int
    var tint: Color = .indigo

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Image(systemName: "cart.fill")
            .font(.title2)
            .foregroundStyle(tint)
            .padding(8)
            .overlay(alignment: .topTrailing) {
                if count > 0 {
                    Text(count, format: .number)
                        .font(.caption2.weight(.bold))
                        .foregroundStyle(.white)
                        .contentTransition(reduceMotion ? .identity : .numericText(value: Double(count)))
                        .animation(reduceMotion ? nil : .snappy, value: count)
                        .padding(.horizontal, 5)
                        .frame(minWidth: 18, minHeight: 18)
                        .background(.red, in: .capsule)
                }
            }
            .keyframeAnimator(initialValue: 1.0, trigger: reduceMotion ? 0 : count) { [reduceMotion] view, scale in
                view.scaleEffect(reduceMotion ? 1 : scale)
            } keyframes: { _ in
                SpringKeyframe(1.3, duration: 0.14)
                SpringKeyframe(1, duration: 0.3)
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Cart")
            .accessibilityValue(count == 1 ? "1 item" : "\(count) items")
    }
}

// MARK: - Demo

struct AddToCartFlyButtonDemo: View {
    @State private var count = 0
    @State private var cartFrame: CGRect?

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Text("Shop")
                    .font(.largeTitle.bold())
                Spacer()
                AddToCartFlyButtonCart(count: count)
                    .onGeometryChange(for: CGRect.self) { $0.frame(in: .global) } action: { cartFrame = $0 }
            }
            .padding(.horizontal, 24)
            .padding(.top, 8)

            ScrollView {
                VStack(alignment: .leading, spacing: 8) {
                    AddToCartFlyButton(
                        image: Image(systemName: "backpack.fill"),
                        count: $count,
                        cartFrame: cartFrame,
                        imageLabel: "Trail backpack"
                    )
                    .padding(.top, 48)

                    Text("Trail backpack")
                        .font(.title2.bold())
                        .padding(.top, 12)
                    Text("Twenty liters, water resistant and light enough for every day.")
                        .foregroundStyle(.secondary)
                }
                .padding(24)
            }
            .scrollClipDisabled()
        }
    }
}

#Preview {
    AddToCartFlyButtonDemo()
}
```

## Add To Cart Stepper

An add button that morphs into a quantity stepper and collapses back to the button when the quantity returns to zero.

Category: Commerce. Minimum: iOS 18.0. Path: Components/Commerce/AddToCartStepper/AddToCartStepper.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum AddToCartStepperMath {
    /// The highest quantity allowed. Zero is valid, and means nothing can be added.
    static func limit(maximum: Int) -> Int {
        min(max(maximum, 0), 1_000_000)
    }
}

/// An add button that morphs into a quantity stepper, and back again at zero.
///
/// The capsule is one background around content that changes, so it resizes by itself
/// and nothing has to match geometry. VoiceOver can also adjust the count directly.
struct AddToCartStepper: View {
    @Binding var quantity: Int
    var maximum: Int = 99
    var title: LocalizedStringResource = "Add"
    var tint: Color = .indigo

    @ScaledMetric(relativeTo: .headline) private var buttonSize = 44.0
    @ScaledMetric(relativeTo: .headline) private var countWidth = 34.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var limit: Int { AddToCartStepperMath.limit(maximum: maximum) }
    private var current: Int { min(max(quantity, 0), limit) }
    private var animation: Animation? { reduceMotion ? nil : .bouncy(duration: 0.35) }

    var body: some View {
        HStack(spacing: 0) {
            if quantity <= 0 {
                addButton.transition(.opacity)
            } else {
                stepButton(systemImage: quantity == 1 ? "trash" : "minus", label: "Decrease quantity", change: -1)
                    .transition(.opacity)
                countLabel.transition(.opacity)
                stepButton(systemImage: "plus", label: "Increase quantity", change: 1)
                    .disabled(quantity >= limit)
                    .transition(.opacity)
            }
        }
        .foregroundStyle(AddToCartStepperContrastingForeground(background: tint))
        .background(tint.gradient, in: .capsule)
        .sensoryFeedback(.selection, trigger: quantity)
    }

    private var addButton: some View {
        Button {
            set(1)
        } label: {
            Label(title, systemImage: "plus")
                .font(.headline)
                .padding(.horizontal, 22)
                .frame(minHeight: buttonSize)
                .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .disabled(limit == 0)
        .accessibilityLabel("\(title) to cart")
    }

    private func stepButton(systemImage: String, label: String, change: Int) -> some View {
        Button {
            set(current + change)
        } label: {
            Image(systemName: systemImage)
                .font(.headline)
                .frame(width: buttonSize, height: buttonSize)
                .contentTransition(reduceMotion ? .identity : .symbolEffect(.replace))
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(label)
    }

    private var countLabel: some View {
        Text(quantity, format: .number)
            .font(.headline.monospacedDigit())
            .lineLimit(1)
            .minimumScaleFactor(0.6)
            .contentTransition(reduceMotion ? .identity : .numericText(value: Double(quantity)))
            .frame(minWidth: countWidth)
            .accessibilityLabel("Quantity")
            .accessibilityValue(quantity.formatted())
            .accessibilityAdjustableAction { direction in
                switch direction {
                case .increment: set(current + 1)
                case .decrement: set(current - 1)
                @unknown default: break
                }
            }
    }

    private func set(_ newValue: Int) {
        withAnimation(animation) { quantity = min(max(newValue, 0), limit) }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct AddToCartStepperContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct AddToCartStepperDemo: View {
    @State private var quantity = 0

    private var subtotal: String {
        (Double(quantity) * 3.5).formatted(.currency(code: "EUR"))
    }

    var body: some View {
        ViewThatFits(in: .vertical) {
            content
            ScrollView { content }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.orange.opacity(0.16), .indigo.opacity(0.12)], startPoint: .top, endPoint: .bottom))
    }

    private var content: some View {
        VStack(spacing: 24) {
            Image(systemName: "cup.and.saucer.fill")
                .resizable()
                .scaledToFit()
                .frame(height: 110)
                .foregroundStyle(.linearGradient(colors: [.orange, .pink], startPoint: .top, endPoint: .bottom))
                .accessibilityHidden(true)

            VStack(spacing: 4) {
                Text("Flat white")
                    .font(.largeTitle.bold())
                Text("Double shot, velvety milk")
                    .foregroundStyle(.secondary)
            }

            AddToCartStepper(quantity: $quantity)
                .frame(minHeight: 44)

            Text("Subtotal \(subtotal)")
                .font(.title3.weight(.semibold))
                .opacity(quantity > 0 ? 1 : 0)
        }
        .padding(24)
    }
}

#Preview {
    AddToCartStepperDemo()
}
```

## Billing Period Toggle

A monthly and yearly switch where the price rolls to its new value and a savings badge appears.

Category: Commerce. Minimum: iOS 18.0. Path: Components/Commerce/BillingPeriodToggle/BillingPeriodToggle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum BillingPeriodToggleOption: String, CaseIterable, Hashable {
    case monthly = "Monthly"
    case yearly = "Yearly"
}

enum BillingPeriodTogglePricing {
    /// The whole percent saved by paying yearly, or nil when there is no saving to show.
    static func savingsPercent(monthly: Double, yearly: Double) -> Int? {
        let fullYear = monthly * 12
        guard fullYear.isFinite, yearly.isFinite, fullYear > 0, yearly >= 0, yearly < fullYear else { return nil }

        let percent = Int(((1 - yearly / fullYear) * 100).rounded())
        return percent > 0 ? percent : nil
    }
}

/// A monthly and yearly switch: the price rolls to its new value and a savings badge appears.
///
/// With Reduce Motion on, everything changes at once.
struct BillingPeriodToggle: View {
    @Binding var period: BillingPeriodToggleOption
    var monthlyPrice: Double = 12
    var yearlyPrice: Double = 99
    var currencyCode: String = "USD"
    var tint: Color = .indigo

    @Namespace private var namespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    private var pricePerMonth: Double {
        period == .monthly ? monthlyPrice : yearlyPrice / 12
    }

    private var savings: Int? {
        BillingPeriodTogglePricing.savingsPercent(monthly: monthlyPrice, yearly: yearlyPrice)
    }

    private var rowLayout: AnyLayout {
        dynamicTypeSize.isAccessibilitySize
            ? AnyLayout(VStackLayout(spacing: 6))
            : AnyLayout(HStackLayout(spacing: 6))
    }

    var body: some View {
        VStack(spacing: 18) {
            segments
            price
            footnote
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.2), value: period)
        .sensoryFeedback(.selection, trigger: period)
    }

    private var segments: some View {
        rowLayout {
            ForEach(BillingPeriodToggleOption.allCases, id: \.self) { option in
                let isSelected = option == period

                Button {
                    period = option
                } label: {
                    Text(option.rawValue)
                        .font(.headline)
                        .foregroundStyle(isSelected ? Color.white : Color.primary)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 12)
                        .background {
                            if isSelected {
                                Capsule()
                                    .fill(tint.gradient)
                                    .matchedGeometryEffect(id: "selection", in: namespace)
                            }
                        }
                        .contentShape(.capsule)
                }
                .buttonStyle(.plain)
                .accessibilityAddTraits(isSelected ? .isSelected : [])
            }
        }
        .padding(4)
        .background(.quaternary, in: .capsule)
    }

    private var price: some View {
        HStack(alignment: .firstTextBaseline, spacing: 4) {
            Text(pricePerMonth, format: .currency(code: currencyCode))
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .monospacedDigit()
                .contentTransition(.numericText(value: pricePerMonth))

            Text("per month")
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
        .accessibilityElement(children: .combine)
    }

    private var footnote: some View {
        rowLayout {
            Text(period == .monthly ? "Billed every month" : "Billed once a year")
                .font(.subheadline)
                .foregroundStyle(.secondary)

            if period == .yearly, let savings {
                Text("Save \(savings)%")
                    .font(.caption.bold())
                    .foregroundStyle(.white)
                    .padding(.horizontal, 10)
                    .padding(.vertical, 4)
                    .background(Color.green.gradient, in: .capsule)
                    .transition(.scale(scale: 0.5).combined(with: .opacity))
            }
        }
        .multilineTextAlignment(.center)
    }
}

// MARK: - Demo

struct BillingPeriodToggleDemo: View {
    @State private var period = BillingPeriodToggleOption.monthly

    private let features = ["Unlimited projects", "Sync across devices", "Priority support"]

    var body: some View {
        ScrollView {
            VStack(spacing: 28) {
                VStack(spacing: 8) {
                    Image(systemName: "sparkles")
                        .font(.largeTitle)
                        .foregroundStyle(.indigo)
                        .accessibilityHidden(true)

                    Text("Go Pro")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("Everything you need, billed your way.")
                        .font(.body)
                        .foregroundStyle(.secondary)
                        .multilineTextAlignment(.center)
                }

                BillingPeriodToggle(period: $period)
                    .padding(20)
                    .background(.regularMaterial, in: .rect(cornerRadius: 28))

                VStack(alignment: .leading, spacing: 12) {
                    ForEach(features, id: \.self) { feature in
                        Label(feature, systemImage: "checkmark.circle.fill")
                            .symbolRenderingMode(.hierarchical)
                            .foregroundStyle(.indigo)
                    }
                }
                .font(.body)
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal, 8)
            }
            .padding(24)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .background(
            LinearGradient(colors: [.indigo.opacity(0.18), .pink.opacity(0.12)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
    }
}

#Preview {
    BillingPeriodToggleDemo()
}
```

## Pricing Tier Cards

Snapping horizontal pricing cards with the recommended plan highlighted and enlarged.

Category: Commerce. Minimum: iOS 18.0. Path: Components/Commerce/PricingTierCards/PricingTierCards.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PricingTierCardsTier: Identifiable, Hashable {
    let name: String
    var price: String
    var period: String
    var features: [String]
    var isRecommended = false

    var id: String { name }
}

/// Horizontal pricing cards that snap into place, with the recommended plan highlighted and larger.
///
/// It opens centered on the recommended plan. Place it in a vertical `ScrollView`
/// so tall cards stay reachable at the largest text sizes.
struct PricingTierCards: View {
    let tiers: [PricingTierCardsTier]
    @Binding var selection: PricingTierCardsTier.ID?
    var tint: Color = .indigo

    @State private var centeredID: PricingTierCardsTier.ID?
    @State private var containerWidth: CGFloat = 0

    private var cardWidth: CGFloat {
        min(max(containerWidth - 72, 220), 300)
    }

    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 8) {
                ForEach(tiers) { tier in
                    card(for: tier)
                        .frame(width: cardWidth)
                        .scaleEffect(tier.isRecommended ? 1 : 0.92)
                        .zIndex(tier.isRecommended ? 1 : 0)
                }
            }
            .fixedSize(horizontal: false, vertical: true)
            .scrollTargetLayout()
            .padding(.vertical, 24)
        }
        .scrollIndicators(.hidden)
        // The shadow of the recommended plan reaches past the row.
        .scrollClipDisabled()
        .contentMargins(.horizontal, max((containerWidth - cardWidth) / 2, 16), for: .scrollContent)
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $centeredID)
        .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { containerWidth = $0 }
        .task(id: containerWidth) {
            guard containerWidth > 0, centeredID == nil else { return }
            centeredID = (tiers.first(where: \.isRecommended) ?? tiers.first)?.id
        }
        .sensoryFeedback(.selection, trigger: selection)
    }

    private func card(for tier: PricingTierCardsTier) -> some View {
        let isSelected = selection == tier.id
        let secondary = tier.isRecommended ? Color.white.opacity(0.85) : Color.secondary

        return VStack(alignment: .leading, spacing: 16) {
            HStack {
                Text(tier.name)
                    .font(.title3.bold())

                Spacer(minLength: 8)

                if tier.isRecommended {
                    Text("Popular")
                        .font(.caption.bold())
                        .padding(.horizontal, 10)
                        .padding(.vertical, 4)
                        .background(.white.opacity(0.22), in: .capsule)
                }
            }

            VStack(alignment: .leading, spacing: 2) {
                Text(tier.price)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Text(tier.period)
                    .font(.subheadline)
                    .foregroundStyle(secondary)
            }

            VStack(alignment: .leading, spacing: 10) {
                ForEach(Array(tier.features.enumerated()), id: \.offset) { _, feature in
                    Label(feature, systemImage: "checkmark.circle.fill")
                        .font(.subheadline)
                }
            }

            Spacer(minLength: 0)

            Button {
                selection = tier.id
            } label: {
                Text(isSelected ? "\(tier.name) selected" : "Choose \(tier.name)")
                    .font(.headline)
                    .foregroundStyle(tier.isRecommended ? tint : Color.white)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                    .background(tier.isRecommended ? Color.white : tint, in: .capsule)
                    .contentShape(.capsule)
            }
            .buttonStyle(.plain)
            .accessibilityAddTraits(isSelected ? .isSelected : [])
        }
        .foregroundStyle(tier.isRecommended ? Color.white : Color.primary)
        .padding(20)
        .frame(maxHeight: .infinity, alignment: .top)
        .background(
            tier.isRecommended ? AnyShapeStyle(tint.gradient) : AnyShapeStyle(.regularMaterial),
            in: .rect(cornerRadius: 28)
        )
        .shadow(color: tier.isRecommended ? tint.opacity(0.4) : .clear, radius: 18, y: 10)
        .accessibilityElement(children: .contain)
    }
}

// MARK: - Demo

struct PricingTierCardsDemo: View {
    @State private var selection: PricingTierCardsTier.ID?

    private let tiers = [
        PricingTierCardsTier(name: "Free", price: "$0", period: "forever", features: ["3 projects", "Community help"]),
        PricingTierCardsTier(
            name: "Pro",
            price: "$12",
            period: "per month",
            features: ["Unlimited projects", "Sync across devices", "Priority support"],
            isRecommended: true
        ),
        PricingTierCardsTier(name: "Team", price: "$29", period: "per seat", features: ["Everything in Pro", "Shared spaces", "Admin tools"]),
    ]

    var body: some View {
        ScrollView {
            VStack(spacing: 8) {
                Text("Pick your plan")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Text("Swipe to compare")
                    .font(.body)
                    .foregroundStyle(.secondary)

                PricingTierCards(tiers: tiers, selection: $selection)
            }
            .padding(.vertical, 24)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .background(
            LinearGradient(colors: [.indigo.opacity(0.2), .cyan.opacity(0.14)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
    }
}

#Preview {
    PricingTierCardsDemo()
}
```

## Trial Timeline Paywall

A paywall that shows what happens on each day of the free trial, with the plans and the button to start it.

Category: Commerce. Minimum: iOS 18.0. Path: Components/Commerce/TrialTimelinePaywall/TrialTimelinePaywall.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum TrialTimelinePaywallLogic {
    /// The days of a trial worth showing, counted from today: today, the day of the reminder and
    /// the day the trial ends. A trial too short for a reminder has none, and no trial is just today.
    static func days(trialDays: Int, reminderLead: Int = 2) -> [Int] {
        guard trialDays > 0 else { return [0] }
        let reminder = trialDays - reminderLead
        return reminderLead > 0 && reminder > 0 ? [0, reminder, trialDays] : [0, trialDays]
    }

    static func date(afterDays days: Int, from start: Date, calendar: Calendar = .current) -> Date {
        calendar.date(byAdding: .day, value: days, to: start) ?? start
    }
}

struct TrialTimelinePaywallPlan: Identifiable, Equatable {
    var id: String
    var title: LocalizedStringResource
    /// The price as it should be read, such as StoreKit's `displayPrice` and its period.
    var price: String
    var badge: LocalizedStringResource?
    /// How long its free trial lasts. Zero when it has none.
    var trialDays = 0
}

/// A paywall that shows what happens on each day of the free trial before asking to start it.
///
/// It draws the plans and the timeline and reports the taps: buying and restoring are up to you,
/// with StoreKit or whatever you use. The reminder step is a promise, so schedule that
/// notification, or set `reminderLead` to 0 to leave the step out.
struct TrialTimelinePaywall: View {
    var title: LocalizedStringResource = "How your free trial works"
    let plans: [TrialTimelinePaywallPlan]
    @Binding var selection: TrialTimelinePaywallPlan.ID
    /// How many days before the trial ends the reminder is sent.
    var reminderLead = 2
    var startDate = Date.now
    var isPurchasing = false
    var onContinue: (TrialTimelinePaywallPlan) -> Void
    var onRestore: () -> Void

    private let margin: CGFloat = 24
    private let cornerRadius: CGFloat = 16
    private let lineWidth: CGFloat = 6

    @State private var hasAppeared = false
    @ScaledMetric(relativeTo: .headline) private var markSize = 34.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var plan: TrialTimelinePaywallPlan? {
        plans.first { $0.id == selection } ?? plans.first
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 28) {
                Text(title)
                    .font(.largeTitle.bold())
                    .accessibilityAddTraits(.isHeader)

                if let plan {
                    timeline(for: plan)
                }

                VStack(spacing: 10) {
                    ForEach(plans) { plan in
                        card(for: plan)
                    }
                }
            }
            .padding(.horizontal, margin)
            .padding(.top, 32)
            .padding(.bottom, margin)
            .frame(maxWidth: 520, alignment: .leading)
            .frame(maxWidth: .infinity)
        }
        .scrollBounceBehavior(.basedOnSize)
        .safeAreaInset(edge: .bottom) {
            if let plan {
                footer(for: plan)
            }
        }
        .animation(reduceMotion ? nil : .snappy, value: selection)
        .onAppear { hasAppeared = true }
    }

    // MARK: Timeline

    private func timeline(for plan: TrialTimelinePaywallPlan) -> some View {
        let days = TrialTimelinePaywallLogic.days(trialDays: plan.trialDays, reminderLead: reminderLead)

        return VStack(alignment: .leading, spacing: 0) {
            ForEach(Array(days.enumerated()), id: \.element) { index, day in
                step(day: day, plan: plan, isLast: index == days.count - 1)
                    .opacity(hasAppeared ? 1 : 0)
                    .animation(reduceMotion ? nil : .easeOut(duration: 0.4).delay(Double(index) * 0.15), value: hasAppeared)
                    .transition(.opacity)
            }
        }
    }

    private func step(day: Int, plan: TrialTimelinePaywallPlan, isLast: Bool) -> some View {
        let isCharge = day == plan.trialDays

        return HStack(alignment: .top, spacing: 16) {
            Image(systemName: day == 0 && !isCharge ? "lock.open.fill" : isCharge ? "star.fill" : "bell.fill")
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.white)
                .frame(width: markSize, height: markSize)
                .background(.tint, in: .circle)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                HStack(alignment: .firstTextBaseline) {
                    Text(day == 0 ? "Today" : "Day \(day)")
                        .font(.headline)
                    if day > 0 {
                        Text(TrialTimelinePaywallLogic.date(afterDays: day, from: startDate), format: .dateTime.month(.abbreviated).day())
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                    }
                }
                Text(text(day: day, plan: plan))
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .fixedSize(horizontal: false, vertical: true)
            }
            .padding(.top, 6)
            .padding(.bottom, isLast ? 0 : 22)
        }
        .background(alignment: .topLeading) {
            // The line that joins this step to the next one. After the last step it fades away.
            Capsule()
                .fill(isLast ? AnyShapeStyle(LinearGradient(colors: [.accentColor.opacity(0.3), .clear], startPoint: .top, endPoint: .bottom)) : AnyShapeStyle(.tint.opacity(0.3)))
                .frame(width: lineWidth)
                .frame(maxHeight: isLast ? markSize * 2 : .infinity, alignment: .top)
                .padding(.leading, (markSize - lineWidth) / 2)
                .padding(.top, markSize / 2)
                .accessibilityHidden(true)
        }
        .padding(.bottom, isLast ? markSize : 0)
        .accessibilityElement(children: .combine)
    }

    private func text(day: Int, plan: TrialTimelinePaywallPlan) -> String {
        if day == plan.trialDays {
            return plan.trialDays > 0
                ? "Your subscription starts and you are charged \(plan.price). Cancel any time before."
                : "Your subscription starts and you are charged \(plan.price)."
        }
        return day == 0
            ? "You get full access to everything, free."
            : "We remind you that your trial is about to end."
    }

    // MARK: Plans

    private func card(for plan: TrialTimelinePaywallPlan) -> some View {
        let isSelected = plan.id == self.plan?.id

        return Button {
            selection = plan.id
        } label: {
            HStack(spacing: 12) {
                Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                    .font(.title3)
                    .foregroundStyle(isSelected ? AnyShapeStyle(.tint) : AnyShapeStyle(.tertiary))
                    .accessibilityHidden(true)

                VStack(alignment: .leading, spacing: 2) {
                    HStack {
                        Text(plan.title)
                            .font(.headline)
                        if let badge = plan.badge {
                            Text(badge)
                                .font(.caption.weight(.semibold))
                                .foregroundStyle(.tint)
                                .padding(.horizontal, 8)
                                .padding(.vertical, 3)
                                .background(.tint.opacity(0.15), in: .capsule)
                        }
                    }
                    Text(plan.trialDays > 0 ? "\(plan.trialDays) days free, then \(plan.price)" : plan.price)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }

                Spacer(minLength: 0)
            }
            .padding(16)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.fill.quaternary, in: .rect(cornerRadius: cornerRadius))
            .overlay {
                RoundedRectangle(cornerRadius: cornerRadius)
                    .strokeBorder(.tint, lineWidth: isSelected ? 2 : 0)
            }
            .contentShape(.rect(cornerRadius: cornerRadius))
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private func footer(for plan: TrialTimelinePaywallPlan) -> some View {
        VStack(spacing: 10) {
            Button {
                onContinue(plan)
            } label: {
                Text(plan.trialDays > 0 ? "Start \(plan.trialDays)-Day Free Trial" : "Subscribe")
                    .font(.headline)
                    .opacity(isPurchasing ? 0 : 1)
                    .frame(maxWidth: .infinity)
                    .overlay {
                        if isPurchasing {
                            ProgressView()
                                .controlSize(.regular)
                                .tint(.white)
                        }
                    }
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            // Not `disabled`, which would take the color away from under the spinner.
            .allowsHitTesting(!isPurchasing)
            .accessibilityValue(isPurchasing ? "In progress" : "")

            Button(action: onRestore) {
                // A line of text is too short to hit. The padding widens what answers to a
                // touch, and the same padding taken back keeps the layout as it was.
                Text("Restore Purchases")
                    .padding(.vertical, 14)
                    .contentShape(.rect)
                    .padding(.vertical, -14)
            }
            .font(.footnote)
            .disabled(isPurchasing)
        }
        .padding(.horizontal, margin)
        .padding(.vertical, 12)
        .frame(maxWidth: 520)
        .frame(maxWidth: .infinity)
        .background(.bar)
    }
}

// MARK: - Demo

struct TrialTimelinePaywallDemo: View {
    private let plans = [
        TrialTimelinePaywallPlan(id: "yearly", title: "Yearly", price: "$39.99 a year", badge: "Save 44%", trialDays: 7),
        TrialTimelinePaywallPlan(id: "monthly", title: "Monthly", price: "$5.99 a month"),
    ]

    @State private var selection = "yearly"
    @State private var isPurchasing = false

    var body: some View {
        TrialTimelinePaywall(plans: plans, selection: $selection, isPurchasing: isPurchasing) { _ in
            Task {
                isPurchasing = true
                try? await Task.sleep(for: .seconds(1.5))
                isPurchasing = false
            }
        } onRestore: {
        }
        .tint(.indigo)
    }
}

#Preview {
    TrialTimelinePaywallDemo()
}
```

## Animated Radio Button

A radio button whose inner dot springs in and whose ring pulses once when selected.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/AnimatedRadioButton/AnimatedRadioButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A radio button whose dot springs in and whose ring pulses once when selected.
///
/// With Reduce Motion on, the dot appears at once and there is no pulse.
struct AnimatedRadioButton: View {
    let title: LocalizedStringResource
    let isSelected: Bool
    var tint: Color = .indigo
    let action: () -> Void

    @ScaledMetric(relativeTo: .body) private var size = 26.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button(action: action) {
            HStack(spacing: 14) {
                indicator

                Text(title)
                    .font(.body)
                    .foregroundStyle(.primary)
                    .multilineTextAlignment(.leading)

                Spacer(minLength: 0)
            }
            // The whole row is the touch target, at the height recommended for one.
            .frame(minHeight: 44)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private var indicator: some View {
        ZStack {
            Circle()
                .strokeBorder(isSelected ? tint : Color.secondary, lineWidth: 2)

            Circle()
                .fill(tint)
                .padding(size * 0.22)
                .scaleEffect(isSelected ? 1 : 0.01)
                .opacity(isSelected ? 1 : 0)
        }
        .frame(width: size, height: size)
        .background {
            Circle()
                .stroke(tint, lineWidth: 2)
                .keyframeAnimator(initialValue: 0.0, trigger: isSelected) { [reduceMotion] ring, progress in
                    let isPulsing = isSelected && !reduceMotion && progress > 0 && progress < 1

                    ring
                        .scaleEffect(1 + progress * 0.9)
                        .opacity(isPulsing ? 1 - progress : 0)
                } keyframes: { _ in
                    // Each run starts from the last value, so the ring has to jump back.
                    MoveKeyframe(0)
                    CubicKeyframe(1, duration: 0.5)
                }
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.35, bounce: 0.55), value: isSelected)
        .accessibilityHidden(true)
    }
}

// MARK: - Demo

struct AnimatedRadioButtonDemo: View {
    private let options: [LocalizedStringResource] = ["Standard delivery", "Express delivery", "Pick up in store"]

    @State private var selection = 0
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                Text("How should we send it?")
                    .font(.system(.title, design: .rounded, weight: .bold))

                VStack(spacing: 4) {
                    ForEach(options.indices, id: \.self) { index in
                        AnimatedRadioButton(title: options[index], isSelected: selection == index) {
                            isAutoPlaying = false
                            selection = index
                        }
                    }
                }
                .padding(24)
                .background(.regularMaterial, in: .rect(cornerRadius: 28))
            }
            .padding(24)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .background(
            LinearGradient(colors: [.indigo.opacity(0.2), .mint.opacity(0.14)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }

            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.1))
                guard !Task.isCancelled, isAutoPlaying else { return }
                selection = (selection + 1) % options.count
            }
        }
    }
}

#Preview {
    AnimatedRadioButtonDemo()
}
```

## Checkmark Box Toggle Style

A checkbox toggle style for iOS whose box fills and draws its checkmark, with a dash for a mixed Toggle(sources:).

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/CheckmarkBoxToggleStyle/CheckmarkBoxToggleStyle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A checkbox for any `Toggle`: a rounded box that fills and draws its checkmark
/// when turned on, and shows a dash when a `Toggle(sources:isOn:)` is mixed.
/// The whole row is tappable, and VoiceOver reads it as a standard switch.
///
/// It is not called `CheckboxToggleStyle` because SwiftUI already has one, for
/// macOS only, and the two names would collide in a multiplatform app.
/// With Reduce Motion on, the checkmark appears without being drawn.
struct CheckmarkBoxToggleStyle: ToggleStyle {
    var color: Color = .accentColor

    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn = configuration.isMixed ? true : !configuration.isOn
        } label: {
            HStack(alignment: .top, spacing: 12) {
                CheckmarkBoxToggleStyleBox(isOn: configuration.isOn, isMixed: configuration.isMixed, color: color)
                configuration.label
                    .frame(maxWidth: .infinity, alignment: .leading)
            }
            .frame(minHeight: 44)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityRepresentation {
            if configuration.isMixed {
                Toggle(isOn: configuration.$isOn) { configuration.label }
                    .accessibilityValue(Text("Mixed"))
            } else {
                Toggle(isOn: configuration.$isOn) { configuration.label }
            }
        }
    }
}

extension ToggleStyle where Self == CheckmarkBoxToggleStyle {
    static var checkmarkBox: CheckmarkBoxToggleStyle { CheckmarkBoxToggleStyle() }
}

private struct CheckmarkBoxToggleStyleBox: View {
    let isOn: Bool
    let isMixed: Bool
    let color: Color

    @ScaledMetric(relativeTo: .body) private var size = 22.0
    @Environment(\.isEnabled) private var isEnabled
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isFilled: Bool { isOn || isMixed }

    var body: some View {
        let shape = RoundedRectangle(cornerRadius: size * 0.28, style: .continuous)
        let mark = CheckmarkBoxToggleStyleContrastingForeground(background: color)
        let lineWidth = size * 0.12

        ZStack {
            shape.fill(isFilled ? color : .clear)
            shape.strokeBorder(isFilled ? color : Color.secondary.opacity(0.6), lineWidth: lineWidth)

            if isMixed {
                Capsule()
                    .fill(mark)
                    .frame(width: size * 0.5, height: lineWidth)
                    .transition(.opacity)
            } else {
                CheckmarkBoxToggleStyleCheck()
                    .trim(from: 0, to: isOn ? 1 : 0)
                    .stroke(mark, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round))
            }
        }
        .frame(width: size, height: size)
        // A checkmark is not mirrored right-to-left, like the system symbol.
        .environment(\.layoutDirection, .leftToRight)
        .scaleEffect(isFilled && !reduceMotion ? 1 : 0.94)
        .opacity(isEnabled ? 1 : 0.4)
        .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.45), value: isFilled)
        .animation(reduceMotion ? nil : .easeOut(duration: 0.22), value: isOn)
        .animation(.easeInOut(duration: 0.15), value: isMixed)
    }
}

nonisolated struct CheckmarkBoxToggleStyleCheck: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.width * 0.26, y: rect.height * 0.52))
        path.addLine(to: CGPoint(x: rect.width * 0.43, y: rect.height * 0.69))
        path.addLine(to: CGPoint(x: rect.width * 0.75, y: rect.height * 0.33))
        return path
    }
}

nonisolated struct CheckmarkBoxToggleStyleContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct CheckmarkBoxToggleStyleDemo: View {
    @State private var remember = true
    @State private var newsletter = false
    @State private var terms = false
    @State private var toppings = [false, true, false]

    private let toppingNames: [LocalizedStringResource] = ["Cheese", "Mushrooms", "Olives"]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                Text("Create Account")
                    .font(.largeTitle.bold())

                VStack(alignment: .leading, spacing: 4) {
                    Toggle("Remember me", isOn: $remember)
                    Toggle("Email me about new features", isOn: $newsletter)
                    Toggle("I agree to the Terms of Service and the Privacy Policy", isOn: $terms)
                    Toggle("Two-factor authentication (coming soon)", isOn: .constant(false))
                        .disabled(true)
                }

                VStack(alignment: .leading, spacing: 4) {
                    Toggle("All toppings", sources: $toppings, isOn: \.self)
                        .font(.headline)
                    ForEach(toppings.indices, id: \.self) { index in
                        Toggle(isOn: $toppings[index]) { Text(toppingNames[index]) }
                            .padding(.leading, 34)
                    }
                }
                .toggleStyle(CheckmarkBoxToggleStyle(color: .orange))
            }
            .toggleStyle(.checkmarkBox)
            .padding(24)
        }
    }
}

#Preview {
    CheckmarkBoxToggleStyleDemo()
}
```

## Circular Range Slider

A dial with two handles that sets a range around the clock, like a night of sleep.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/CircularRangeSlider/CircularRangeSlider.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum CircularRangeSliderPart: Equatable, Sendable {
    case start, end, both
}

nonisolated enum CircularRangeSliderMath {
    static let touchTarget = 44.0

    /// How far around the dial a point is: 0 at twelve o'clock, growing clockwise up to 1.
    static func turn(at point: CGPoint, in size: CGSize) -> Double {
        let x = point.x - size.width / 2
        let y = point.y - size.height / 2
        guard x != 0 || y != 0 else { return 0 }
        let turn = atan2(x, -y) / (2 * .pi)
        return turn < 0 ? turn + 1 : turn
    }

    /// The center of a handle that is `turn` around a dial drawn with a line `lineWidth` thick.
    static func point(atTurn turn: Double, in size: CGSize, lineWidth: Double) -> CGPoint {
        let radius = (min(size.width, size.height) - lineWidth) / 2
        let angle = turn * 2 * .pi
        return CGPoint(x: size.width / 2 + sin(angle) * radius, y: size.height / 2 - cos(angle) * radius)
    }

    /// `value` snapped to `step` and brought into `0..<total`, since the dial has no end.
    static func wrapped(_ value: Double, total: Double, step: Double = 0) -> Double {
        guard total > 0, value.isFinite else { return 0 }
        let snapped = step > 0 ? (value / step).rounded() * step : value
        let rest = snapped.truncatingRemainder(dividingBy: total)
        return rest < 0 ? rest + total : rest
    }

    /// How long the range is, going clockwise from `start` to `end`.
    static func span(from start: Double, to end: Double, total: Double) -> Double {
        wrapped(end - start, total: total)
    }

    /// Whether a handle may move so that the range becomes `new` long.
    ///
    /// The range keeps `minimumSpan` and leaves as much free, and a handle cannot jump over the
    /// other one, which would turn a short range into a long one at once.
    static func allows(span new: Double, from old: Double, total: Double, minimumSpan: Double) -> Bool {
        let least = min(max(minimumSpan, 0), total / 2)
        return new >= least && new <= total - least && abs(new - old) <= total / 2
    }

    /// What a touch at `point` takes hold of: a handle, the range between them, or nothing.
    static func part(at point: CGPoint, in size: CGSize, startTurn: Double, endTurn: Double, lineWidth: Double) -> CircularRangeSliderPart? {
        let reach = max(lineWidth, touchTarget) / 2
        let start = self.point(atTurn: startTurn, in: size, lineWidth: lineWidth)
        let end = self.point(atTurn: endTurn, in: size, lineWidth: lineWidth)
        let toStart = hypot(point.x - start.x, point.y - start.y)
        let toEnd = hypot(point.x - end.x, point.y - end.y)
        if min(toStart, toEnd) <= reach { return toEnd <= toStart ? .end : .start }

        let radius = (min(size.width, size.height) - lineWidth) / 2
        let fromCenter = hypot(point.x - size.width / 2, point.y - size.height / 2)
        guard abs(fromCenter - radius) <= reach else { return nil }

        let here = span(from: startTurn, to: turn(at: point, in: size), total: 1)
        return here <= span(from: startTurn, to: endTurn, total: 1) ? .both : nil
    }
}

/// A dial with a range on it: drag either handle to move one end, or the band between them to
/// move both. The range can cross twelve o'clock, like a night from 23:00 to 7:00.
///
/// `start` and `end` go from 0 up to `total`, which is one full turn. Set the color with `tint`.
/// VoiceOver reads each handle as an adjustable value, described by `valueText`.
struct CircularRangeSlider<Center: View>: View {
    @Binding var start: Double
    @Binding var end: Double
    /// The value of a full turn.
    var total = 24.0
    /// The handles stop at multiples of it. Zero lets them stop anywhere.
    var step = 0.25
    /// The shortest range, which is also the shortest gap left outside it.
    var minimumSpan = 0.0
    var lineWidth: CGFloat = 40
    var startSymbol: String?
    var endSymbol: String?
    var startLabel = "Start"
    var endLabel = "End"
    var valueText: (Double) -> String = { $0.formatted() }
    @ViewBuilder var center: () -> Center

    private let handleInset: CGFloat = 4
    private let centerPadding: CGFloat = 12

    @State private var grab: CircularRangeSliderGrab?
    @GestureState private var isDragging = false

    private var startValue: Double { CircularRangeSliderMath.wrapped(start, total: total) }
    private var endValue: Double { CircularRangeSliderMath.wrapped(end, total: total) }
    private var span: Double { CircularRangeSliderMath.span(from: startValue, to: endValue, total: total) }

    var body: some View {
        ZStack {
            GeometryReader { proxy in
                dial(in: proxy.size)
            }
            // A dial turns clockwise in every language, like a clock, and a gesture is not mirrored either.
            .environment(\.layoutDirection, .leftToRight)

            center()
                .padding(lineWidth + centerPadding)
        }
        .aspectRatio(1, contentMode: .fit)
        .sensoryFeedback(trigger: [start, end]) { _, _ in step > 0 ? .selection : nil }
        .onChange(of: isDragging) { _, dragging in
            if !dragging { grab = nil }
        }
    }

    private func dial(in size: CGSize) -> some View {
        let startTurn = turn(of: startValue)
        let endTurn = turn(of: endValue)

        return ZStack {
            Circle()
                .strokeBorder(.fill.tertiary, lineWidth: lineWidth)

            Circle()
                .inset(by: lineWidth / 2)
                .trim(from: 0, to: turn(of: span))
                .stroke(.tint, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
                .rotationEffect(.degrees(startTurn * 360 - 90))

            handle(.start, symbol: startSymbol, label: startLabel, value: startValue, in: size)
            handle(.end, symbol: endSymbol, label: endLabel, value: endValue, in: size)
        }
        .frame(width: size.width, height: size.height)
        .contentShape(Circle().inset(by: lineWidth / 2).stroke(lineWidth: max(lineWidth, CircularRangeSliderMath.touchTarget)))
        .gesture(
            DragGesture(minimumDistance: 0)
                .updating($isDragging) { _, state, _ in state = true }
                .onChanged { value in
                    if grab == nil {
                        let part = CircularRangeSliderMath.part(at: value.startLocation, in: size, startTurn: startTurn, endTurn: endTurn, lineWidth: lineWidth)
                        grab = CircularRangeSliderGrab(part: part, turn: CircularRangeSliderMath.turn(at: value.startLocation, in: size), start: startValue, span: span)
                    }
                    if let grab, let part = grab.part {
                        move(part, to: CircularRangeSliderMath.turn(at: value.location, in: size), grab: grab)
                    }
                }
                .onEnded { _ in grab = nil }
        )
    }

    private func handle(_ part: CircularRangeSliderPart, symbol: String?, label: String, value: Double, in size: CGSize) -> some View {
        Circle()
            .fill(.white)
            .shadow(color: .black.opacity(0.2), radius: 3, y: 1)
            .overlay {
                if let symbol {
                    Image(systemName: symbol)
                        .font(.system(size: lineWidth * 0.4, weight: .semibold))
                        .foregroundStyle(.tint)
                }
            }
            .frame(width: lineWidth - handleInset * 2, height: lineWidth - handleInset * 2)
            .position(CircularRangeSliderMath.point(atTurn: turn(of: value), in: size, lineWidth: lineWidth))
            .accessibilityElement()
            .accessibilityLabel(label)
            .accessibilityValue(valueText(value))
            .accessibilityAdjustableAction { direction in
                let stride = step > 0 ? step : total / 100
                switch direction {
                case .increment: set(part, to: value + stride)
                case .decrement: set(part, to: value - stride)
                @unknown default: break
                }
            }
    }

    private func turn(of value: Double) -> Double {
        total > 0 ? value / total : 0
    }

    private func move(_ part: CircularRangeSliderPart, to turn: Double, grab: CircularRangeSliderGrab) {
        guard part == .both else { return set(part, to: turn * total) }

        let moved = CircularRangeSliderMath.wrapped(grab.start + (turn - grab.turn) * total, total: total, step: step)
        guard moved != startValue else { return }
        start = moved
        end = CircularRangeSliderMath.wrapped(moved + grab.span, total: total)
    }

    private func set(_ part: CircularRangeSliderPart, to value: Double) {
        let value = CircularRangeSliderMath.wrapped(value, total: total, step: step)
        let new = part == .start
            ? CircularRangeSliderMath.span(from: value, to: endValue, total: total)
            : CircularRangeSliderMath.span(from: startValue, to: value, total: total)
        guard CircularRangeSliderMath.allows(span: new, from: span, total: total, minimumSpan: minimumSpan) else { return }

        if part == .start, value != startValue { start = value }
        if part == .end, value != endValue { end = value }
    }
}

private struct CircularRangeSliderGrab: Equatable {
    /// `nil` when the touch began outside the handles and the range, and so moves nothing.
    var part: CircularRangeSliderPart?
    var turn: Double
    var start: Double
    var span: Double
}

// MARK: - Demo

struct CircularRangeSliderDemo: View {
    @State private var bedtime = 23.0
    @State private var wake = 7.0

    var body: some View {
        VStack(alignment: .leading, spacing: 28) {
            Text("Sleep")
                .font(.largeTitle.bold())

            CircularRangeSlider(start: $bedtime, end: $wake, minimumSpan: 1, startSymbol: "bed.double.fill", endSymbol: "alarm.fill", startLabel: "Bedtime", endLabel: "Wake up", valueText: clock) {
                ZStack {
                    hours

                    VStack(spacing: 4) {
                        Text(Duration.seconds(asleep * 3600), format: .units(allowed: [.hours, .minutes], width: .narrow))
                            .font(.title.bold())
                            .monospacedDigit()
                        Text("of sleep")
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                    }
                    .accessibilityElement(children: .combine)
                }
            }
            .tint(.indigo)
            .padding(.horizontal, 20)

            HStack {
                time("Bedtime", bedtime, symbol: "bed.double.fill")
                Spacer()
                time("Wake up", wake, symbol: "alarm.fill")
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .background(Color(.systemGroupedBackground))
    }

    /// The face of a 24-hour clock, with a mark every hour and a number every six.
    private var hours: some View {
        ZStack {
            ForEach(0..<24, id: \.self) { hour in
                let isMajor = hour % 6 == 0

                VStack(spacing: 4) {
                    Capsule()
                        .fill(isMajor ? HierarchicalShapeStyle.secondary : .tertiary)
                        .frame(width: 2, height: isMajor ? 10 : 5)
                    if isMajor {
                        Text(hour.formatted())
                            .font(.caption2.weight(.semibold))
                            .foregroundStyle(.secondary)
                            .rotationEffect(.degrees(Double(-hour) * 15))
                    }
                }
                .frame(maxHeight: .infinity, alignment: .top)
                .rotationEffect(.degrees(Double(hour) * 15))
            }
        }
        // The numbers of a clock stay where they are in a right-to-left layout.
        .environment(\.layoutDirection, .leftToRight)
        .accessibilityHidden(true)
    }

    private var asleep: Double {
        CircularRangeSliderMath.span(from: bedtime, to: wake, total: 24)
    }

    private func time(_ title: String, _ value: Double, symbol: String) -> some View {
        VStack(alignment: .leading, spacing: 4) {
            Label(title, systemImage: symbol)
                .font(.subheadline)
                .foregroundStyle(.secondary)
            Text(clock(value))
                .font(.title2.bold())
                .monospacedDigit()
        }
        .accessibilityElement(children: .combine)
    }

    private func clock(_ value: Double) -> String {
        let minutes = Int((value * 60).rounded())
        let twoDigits = IntegerFormatStyle<Int>.number.precision(.integerLength(2))
        return "\((minutes / 60 % 24).formatted(twoDigits)):\((minutes % 60).formatted(twoDigits))"
    }
}

#Preview {
    CircularRangeSliderDemo()
}
```

## Counter Stepper

Minus and plus buttons around a number that rolls as it changes and stops at its limits.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/CounterStepper/CounterStepper.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum CounterStepperValue {
    /// The result of adding `step` to `value`, kept inside `range`.
    static func stepped(_ value: Int, by step: Int, in range: ClosedRange<Int>) -> Int {
        let (sum, overflowed) = value.addingReportingOverflow(step)
        if overflowed {
            return step > 0 ? range.upperBound : range.lowerBound
        }
        return min(max(sum, range.lowerBound), range.upperBound)
    }

    static func canStep(_ value: Int, by step: Int, in range: ClosedRange<Int>) -> Bool {
        stepped(value, by: step, in: range) != value
    }
}

/// Minus and plus buttons around a number that rolls as it changes.
///
/// With Reduce Motion on, the number changes without rolling.
struct CounterStepper: View {
    @Binding var value: Int
    var range: ClosedRange<Int> = 0...99
    var step: Int = 1
    var title: LocalizedStringResource = "Value"
    var tint: Color = .indigo

    @ScaledMetric(relativeTo: .title) private var buttonSize = 56.0
    @ScaledMetric(relativeTo: .largeTitle) private var numberWidth = 76.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 6) {
            stepButton(systemImage: "minus", label: "Decrease", delta: -step)

            Text(value, format: .number)
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .monospacedDigit()
                .contentTransition(reduceMotion ? .identity : .numericText(value: Double(value)))
                .frame(minWidth: numberWidth)
                .accessibilityLabel(title)
                .accessibilityValue(value.formatted())

            stepButton(systemImage: "plus", label: "Increase", delta: step)
        }
        .padding(6)
        .background(.quaternary, in: .capsule)
        .sensoryFeedback(.selection, trigger: value)
    }

    private func stepButton(systemImage: String, label: String, delta: Int) -> some View {
        let isEnabled = CounterStepperValue.canStep(value, by: delta, in: range)

        return Button {
            withAnimation(reduceMotion ? nil : .snappy) {
                value = CounterStepperValue.stepped(value, by: delta, in: range)
            }
        } label: {
            Image(systemName: systemImage)
                .font(.title2.bold())
                .foregroundStyle(isEnabled ? Color.white : Color.secondary)
                .frame(width: buttonSize, height: buttonSize)
                .background(isEnabled ? tint : Color.gray.opacity(0.2), in: .circle)
                .contentShape(.circle)
        }
        .buttonStyle(.plain)
        .disabled(!isEnabled)
        .accessibilityLabel(label)
    }
}

// MARK: - Demo

struct CounterStepperDemo: View {
    @State private var tickets = 3
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var total: Int { tickets * 24 }

    var body: some View {
        VStack(spacing: 32) {
            VStack(spacing: 6) {
                Text("Tickets")
                    .font(.largeTitle.bold())
                Text(total, format: .currency(code: "EUR").precision(.fractionLength(0)))
                    .font(.title2.weight(.semibold))
                    .foregroundStyle(.secondary)
                    .contentTransition(reduceMotion ? .identity : .numericText(value: Double(total)))
            }
            .accessibilityElement(children: .combine)

            CounterStepper(value: $tickets, range: 0...5, title: "Tickets")
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    CounterStepperDemo()
}
```

## Day Night Toggle

A switch whose icon morphs between a sun and a moon while its background shifts between day and night colors.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/DayNightToggle/DayNightToggle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A switch whose icon morphs between a sun and a moon while the sky behind it changes.
/// VoiceOver reads it as a standard switch.
///
/// With Reduce Motion on, it changes without sliding.
struct DayNightToggle: View {
    @Binding var isNight: Bool
    var title: LocalizedStringResource = "Night mode"

    var body: some View {
        Toggle(isOn: $isNight) { Text(title) }
            .toggleStyle(DayNightToggleStyle())
    }
}

private struct DayNightToggleStyle: ToggleStyle {
    @ScaledMetric(relativeTo: .title) private var height = 56.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let day = LinearGradient(colors: [.cyan, .blue], startPoint: .top, endPoint: .bottom)
    private static let night = LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom)

    func makeBody(configuration: Configuration) -> some View {
        let isNight = configuration.isOn
        let knob = height - 8

        Button {
            configuration.isOn.toggle()
        } label: {
            ZStack {
                Capsule().fill(Self.day)
                Capsule().fill(Self.night).opacity(isNight ? 1 : 0)

                scenery(isNight: isNight, knob: knob)
                    .padding(.horizontal, height * 0.3)

                Circle()
                    .fill(isNight ? Color(white: 0.88) : Color.white)
                    .frame(width: knob, height: knob)
                    .overlay {
                        Image(systemName: isNight ? "moon.stars.fill" : "sun.max.fill")
                            .font(.system(size: knob * 0.56))
                            .foregroundStyle(isNight ? Color.indigo : Color.orange)
                            .contentTransition(.symbolEffect(.replace))
                    }
                    .shadow(color: .black.opacity(0.25), radius: 4, y: 2)
                    .frame(maxWidth: .infinity, alignment: isNight ? .trailing : .leading)
                    .padding(4)
            }
            .frame(width: height * 2.2, height: height)
            .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .animation(reduceMotion ? nil : .spring(duration: 0.55, bounce: 0.25), value: isNight)
        .accessibilityRepresentation {
            Toggle(isOn: configuration.$isOn) {
                configuration.label
            }
        }
    }

    /// Stars sit where the knob is not at night, and a cloud does the same by day.
    private func scenery(isNight: Bool, knob: CGFloat) -> some View {
        ZStack {
            HStack(spacing: knob * 0.14) {
                Image(systemName: "sparkle").font(.system(size: knob * 0.3))
                Image(systemName: "sparkle").font(.system(size: knob * 0.18)).offset(y: -knob * 0.2)
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .opacity(isNight ? 1 : 0)

            Image(systemName: "cloud.fill")
                .font(.system(size: knob * 0.44))
                .frame(maxWidth: .infinity, alignment: .trailing)
                .opacity(isNight ? 0 : 1)
        }
        .foregroundStyle(.white)
        .accessibilityHidden(true)
    }
}

// MARK: - Demo

struct DayNightToggleDemo: View {
    @State private var isNight = false
    @State private var lastAutoValue = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [.cyan.opacity(0.55), .white], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
                .opacity(isNight ? 1 : 0)

            ScrollView {
                VStack(spacing: 24) {
                    Text(isNight ? "Good night" : "Good morning")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                        .foregroundStyle(isNight ? Color.white : Color.primary)
                        .contentTransition(.opacity)

                    DayNightToggle(isNight: $isNight)
                }
                .padding(24)
                .frame(maxWidth: .infinity)
            }
            .defaultScrollAnchor(.center, for: .alignment)
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.55), value: isNight)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }

            while isNight == lastAutoValue {
                try? await Task.sleep(for: .seconds(1.5))
                guard !Task.isCancelled, isNight == lastAutoValue else { return }
                lastAutoValue.toggle()
                isNight = lastAutoValue
            }
        }
    }
}

#Preview {
    DayNightToggleDemo()
}
```

## Filter Chip Group

Selectable filter chips that show a checkmark when chosen and wrap onto as many rows as they need.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/FilterChipGroup/FilterChipGroup.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Flows chips into rows, starting a new row when the next chip does not fit.
nonisolated struct FilterChipGroupFlowLayout: Layout {
    var spacing: CGFloat = 8

    /// The indices of the items in each row. An item wider than the row gets a row of its own.
    static func rows(for widths: [CGFloat], maxWidth: CGFloat, spacing: CGFloat) -> [[Int]] {
        var rows: [[Int]] = []
        var current: [Int] = []
        var used: CGFloat = 0

        for (index, width) in widths.enumerated() {
            let needed = current.isEmpty ? width : used + spacing + width
            if needed > maxWidth, !current.isEmpty {
                rows.append(current)
                current = [index]
                used = width
            } else {
                current.append(index)
                used = needed
            }
        }
        if !current.isEmpty { rows.append(current) }
        return rows
    }

    /// Measures each chip at no more than the row, so a long one truncates instead of overflowing.
    private func sizes(of subviews: Subviews, maxWidth: CGFloat) -> [CGSize] {
        subviews.map { subview in
            let natural = subview.sizeThatFits(.unspecified)
            return natural.width > maxWidth ? subview.sizeThatFits(ProposedViewSize(width: maxWidth, height: nil)) : natural
        }
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let maxWidth = proposal.width ?? .infinity
        let sizes = sizes(of: subviews, maxWidth: maxWidth)
        var width: CGFloat = 0
        var height: CGFloat = 0

        for (number, row) in Self.rows(for: sizes.map(\.width), maxWidth: maxWidth, spacing: spacing).enumerated() {
            let rowWidths = row.map { sizes[$0].width }
            let rowWidth = rowWidths.reduce(0, +) + spacing * CGFloat(row.count - 1)
            let rowHeight = row.map { sizes[$0].height }.max() ?? 0
            width = max(width, rowWidth)
            height += number == 0 ? rowHeight : spacing + rowHeight
        }
        return CGSize(width: min(width, maxWidth), height: height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let sizes = sizes(of: subviews, maxWidth: bounds.width)
        var y = bounds.minY

        for row in Self.rows(for: sizes.map(\.width), maxWidth: bounds.width, spacing: spacing) {
            var x = bounds.minX
            let rowHeight = row.map { sizes[$0].height }.max() ?? 0
            for index in row {
                subviews[index].place(at: CGPoint(x: x, y: y + rowHeight / 2), anchor: .leading, proposal: ProposedViewSize(sizes[index]))
                x += sizes[index].width + spacing
            }
            y += rowHeight + spacing
        }
    }
}

/// Chips that filter a list: each one toggles on its own, shows a checkmark
/// when selected, and the group wraps onto as many rows as it needs.
///
/// With Reduce Motion on, the checkmark fades in instead of growing.
struct FilterChipGroup<Option: Hashable>: View {
    let options: [Option]
    @Binding var selection: Set<Option>
    var color: Color = .accentColor
    let title: (Option) -> LocalizedStringResource

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        FilterChipGroupFlowLayout {
            ForEach(options, id: \.self) { option in
                chip(option)
            }
        }
        .sensoryFeedback(.selection, trigger: selection)
    }

    private func chip(_ option: Option) -> some View {
        let isSelected = selection.contains(option)

        return Button {
            if isSelected { selection.remove(option) } else { selection.insert(option) }
        } label: {
            HStack(spacing: 6) {
                if isSelected {
                    Image(systemName: "checkmark")
                        .font(.caption.weight(.bold))
                        .transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                }
                Text(title(option))
                    .lineLimit(1)
            }
            .font(.subheadline.weight(.medium))
            .foregroundStyle(isSelected ? AnyShapeStyle(FilterChipGroupContrastingForeground(background: color)) : AnyShapeStyle(.primary))
            .padding(.horizontal, 14)
            .padding(.vertical, 8)
            .background(isSelected ? AnyShapeStyle(color) : AnyShapeStyle(.clear), in: .capsule)
            .overlay {
                Capsule().strokeBorder(isSelected ? AnyShapeStyle(color) : AnyShapeStyle(.quaternary), lineWidth: 1)
            }
            .padding(.vertical, 4)
            .contentShape(.rect)
            .padding(.vertical, -4)
        }
        .buttonStyle(.plain)
        .animation(reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.3, bounce: 0.35), value: isSelected)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

nonisolated struct FilterChipGroupContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

private enum FilterChipGroupDemoFilter: CaseIterable {
    case openNow, delivery, vegan, glutenFree, italian, japanese, mexican, indian, cheap, topRated

    var title: LocalizedStringResource {
        switch self {
        case .openNow: "Open Now"
        case .delivery: "Delivery"
        case .vegan: "Vegan"
        case .glutenFree: "Gluten-Free"
        case .italian: "Italian"
        case .japanese: "Japanese"
        case .mexican: "Mexican"
        case .indian: "Indian"
        case .cheap: "Under $15"
        case .topRated: "Top Rated"
        }
    }
}

struct FilterChipGroupDemo: View {
    @State private var filters: Set<FilterChipGroupDemoFilter> = [.openNow]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                HStack(alignment: .firstTextBaseline) {
                    Text("Restaurants")
                        .font(.largeTitle.bold())
                    Spacer()
                    Button("Clear") {
                        filters.removeAll()
                    }
                    .disabled(filters.isEmpty)
                }

                FilterChipGroup(options: FilterChipGroupDemoFilter.allCases, selection: $filters, color: .pink) { $0.title }

                Text("Filters applied: \(filters.count)")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.numericText(value: Double(filters.count)))
                    .animation(.snappy, value: filters.count)
            }
            .padding(20)
        }
    }
}

#Preview {
    FilterChipGroupDemo()
}
```

## Icon Switch Toggle Style

A switch toggle style whose knob carries a symbol for each state, like a checkmark and a cross, that swaps as it slides.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/IconSwitchToggleStyle/IconSwitchToggleStyle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A switch whose knob carries a symbol for each state, a checkmark and a cross
/// by default, that swaps as the knob slides. The state reads without relying
/// on the track color alone. The whole row is tappable, and VoiceOver reads it
/// as a standard switch.
///
/// With Reduce Motion on, the knob slides without bouncing and the symbols crossfade.
struct IconSwitchToggleStyle: ToggleStyle {
    var onSymbol = "checkmark"
    var offSymbol = "xmark"
    var color: Color = .green

    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn.toggle()
        } label: {
            HStack(spacing: 16) {
                configuration.label
                    .frame(maxWidth: .infinity, alignment: .leading)
                IconSwitchToggleStyleTrack(
                    isOn: configuration.isOn,
                    symbol: configuration.isOn ? onSymbol : offSymbol,
                    color: color
                )
            }
            .frame(minHeight: 44)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityRepresentation {
            Toggle(isOn: configuration.$isOn) {
                configuration.label
            }
        }
    }
}

extension ToggleStyle where Self == IconSwitchToggleStyle {
    static var iconSwitch: IconSwitchToggleStyle { IconSwitchToggleStyle() }

    static func iconSwitch(on onSymbol: String, off offSymbol: String, color: Color = .green) -> IconSwitchToggleStyle {
        IconSwitchToggleStyle(onSymbol: onSymbol, offSymbol: offSymbol, color: color)
    }
}

private struct IconSwitchToggleStyleTrack: View {
    let isOn: Bool
    let symbol: String
    let color: Color

    @ScaledMetric(relativeTo: .body) private var height = 32.0
    @Environment(\.isEnabled) private var isEnabled
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let inset = 3.0

    var body: some View {
        let knob = height - inset * 2

        Capsule()
            .fill(isOn ? color : Color.secondary.opacity(0.35))
            .frame(width: height * 1.8, height: height)
            .overlay(alignment: isOn ? .trailing : .leading) {
                Circle()
                    .fill(.white)
                    .shadow(color: .black.opacity(0.2), radius: 2, y: 1)
                    .overlay {
                        Image(systemName: symbol)
                            .font(.system(size: knob * 0.45, weight: .bold))
                            .foregroundStyle(isOn ? color : Color.gray)
                            .contentTransition(reduceMotion ? .opacity : .symbolEffect(.replace))
                    }
                    .frame(width: knob, height: knob)
                    .padding(inset)
            }
            .opacity(isEnabled ? 1 : 0.4)
            .animation(reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.35, bounce: 0.35), value: isOn)
            .accessibilityHidden(true)
    }
}

// MARK: - Demo

struct IconSwitchToggleStyleDemo: View {
    @State private var autoUpdates = true
    @State private var darkMode = false
    @State private var sound = true
    @State private var location = false

    var body: some View {
        VStack(spacing: 8) {
            Toggle("Automatic Updates", isOn: $autoUpdates)
                .toggleStyle(.iconSwitch)
            Toggle("Dark Mode", isOn: $darkMode)
                .toggleStyle(.iconSwitch(on: "moon.fill", off: "sun.max.fill", color: .indigo))
            Toggle("Sound", isOn: $sound)
                .toggleStyle(.iconSwitch(on: "speaker.wave.2.fill", off: "speaker.slash.fill", color: .orange))
            Toggle("Share Location", isOn: $location)
                .toggleStyle(.iconSwitch(on: "location.fill", off: "location.slash.fill", color: .blue))
        }
        .font(.body.weight(.medium))
        .padding(.horizontal, 20)
        .padding(.vertical, 12)
        .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 24, style: .continuous))
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    IconSwitchToggleStyleDemo()
}
```

## Range Slider

A slider with two thumbs that picks a range, like the lowest and highest price of a filter.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/RangeSlider/RangeSlider.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum RangeSliderThumb: Equatable, Sendable {
    case lower, upper
}

nonisolated enum RangeSliderMath {
    /// Where `value` is along `bounds`, from 0 to 1.
    static func fraction(of value: Double, in bounds: ClosedRange<Double>) -> Double {
        let length = bounds.upperBound - bounds.lowerBound
        guard length > 0, value.isFinite else { return 0 }
        return min(max((value - bounds.lowerBound) / length, 0), 1)
    }

    /// `value` moved to the nearest multiple of `step`, counted from the start of `bounds`.
    static func snapped(_ value: Double, in bounds: ClosedRange<Double>, step: Double) -> Double {
        guard step > 0 else { return value }
        return bounds.lowerBound + ((value - bounds.lowerBound) / step).rounded() * step
    }

    /// The lower end a drag asks for, kept inside `bounds` and `minimumSpan` below the upper end.
    static func lower(_ value: Double, upper: Double, in bounds: ClosedRange<Double>, step: Double = 0, minimumSpan: Double = 0) -> Double {
        guard value.isFinite else { return min(bounds.lowerBound, upper) }
        let highest = max(upper - max(minimumSpan, 0), bounds.lowerBound)
        return min(min(max(snapped(value, in: bounds, step: step), bounds.lowerBound), highest), upper)
    }

    /// The upper end a drag asks for, kept inside `bounds` and `minimumSpan` above the lower end.
    static func upper(_ value: Double, lower: Double, in bounds: ClosedRange<Double>, step: Double = 0, minimumSpan: Double = 0) -> Double {
        guard value.isFinite else { return max(bounds.upperBound, lower) }
        let lowest = min(lower + max(minimumSpan, 0), bounds.upperBound)
        return max(max(min(snapped(value, in: bounds, step: step), bounds.upperBound), lowest), lower)
    }

    /// The thumb a touch takes, with every position as a fraction of the track.
    ///
    /// It is the nearest one. When both sit on the same spot it is the one that can still move
    /// toward the touch, so two thumbs at one end never get stuck.
    static func thumb(nearest touch: Double, lower: Double, upper: Double) -> RangeSliderThumb {
        let toLower = abs(touch - lower)
        let toUpper = abs(touch - upper)
        if toLower != toUpper { return toLower < toUpper ? .lower : .upper }
        if touch != lower { return touch < lower ? .lower : .upper }
        return lower > 0.5 ? .lower : .upper
    }
}

/// A slider with two thumbs that picks a range, like a price filter.
///
/// Drag a thumb, or the track near it: the nearest thumb moves with the finger without jumping
/// to it. Set the color with `tint`. VoiceOver reads each thumb as an adjustable value, described
/// by `valueText`, and the slider follows the layout direction.
struct RangeSlider: View {
    @Binding var range: ClosedRange<Double>
    var bounds: ClosedRange<Double> = 0...1
    /// The thumbs stop at multiples of it. Zero lets them stop anywhere.
    var step = 0.0
    /// The shortest distance the thumbs keep between them.
    var minimumSpan = 0.0
    var lowerLabel = "Minimum"
    var upperLabel = "Maximum"
    var valueText: (Double) -> String = { $0.formatted() }

    private let thumbSize: CGFloat = 28
    private let trackHeight: CGFloat = 4
    private let touchHeight: CGFloat = 44

    @State private var width: CGFloat = 0
    @State private var grab: RangeSliderGrab?
    @GestureState private var isDragging = false
    @Environment(\.layoutDirection) private var layoutDirection

    /// How far the center of a thumb travels from one end of the track to the other.
    private var travel: CGFloat { max(width - thumbSize, 0) }

    var body: some View {
        let lower = RangeSliderMath.fraction(of: range.lowerBound, in: bounds)
        let upper = RangeSliderMath.fraction(of: range.upperBound, in: bounds)

        ZStack(alignment: .leading) {
            Capsule()
                .fill(.fill.tertiary)
                .frame(height: trackHeight)

            Capsule()
                .fill(.tint)
                .frame(width: CGFloat(upper - lower) * travel + thumbSize, height: trackHeight)
                .offset(x: CGFloat(lower) * travel)

            thumb(.lower, at: lower)
            thumb(.upper, at: upper)
        }
        .frame(height: touchHeight)
        .frame(maxWidth: .infinity, alignment: .leading)
        .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { width = $0 }
        .contentShape(.rect)
        .gesture(drag(lower: lower, upper: upper))
        .sensoryFeedback(trigger: range) { _, _ in step > 0 ? .selection : nil }
        .onChange(of: isDragging) { _, dragging in
            if !dragging { grab = nil }
        }
    }

    private func thumb(_ thumb: RangeSliderThumb, at fraction: Double) -> some View {
        let value = thumb == .lower ? range.lowerBound : range.upperBound

        return Circle()
            .fill(.white)
            .shadow(color: .black.opacity(0.2), radius: 3, y: 1)
            .frame(width: thumbSize, height: thumbSize)
            .offset(x: CGFloat(fraction) * travel)
            .accessibilityElement()
            .accessibilityLabel(thumb == .lower ? lowerLabel : upperLabel)
            .accessibilityValue(valueText(value))
            .accessibilityAdjustableAction { direction in
                let stride = step > 0 ? step : (bounds.upperBound - bounds.lowerBound) / 20
                switch direction {
                case .increment: set(thumb, to: value + stride)
                case .decrement: set(thumb, to: value - stride)
                @unknown default: break
                }
            }
    }

    private func drag(lower: Double, upper: Double) -> some Gesture {
        DragGesture(minimumDistance: 2)
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { value in
                guard travel > 0 else { return }
                // The track is mirrored in a right-to-left layout and the gesture is not.
                let isMirrored = layoutDirection == .rightToLeft

                if grab == nil {
                    let x = isMirrored ? width - value.startLocation.x : value.startLocation.x
                    let thumb = RangeSliderMath.thumb(nearest: Double((x - thumbSize / 2) / travel), lower: lower, upper: upper)
                    grab = RangeSliderGrab(thumb: thumb, value: thumb == .lower ? range.lowerBound : range.upperBound)
                }
                guard let grab else { return }

                let moved = Double((isMirrored ? -value.translation.width : value.translation.width) / travel)
                set(grab.thumb, to: grab.value + moved * (bounds.upperBound - bounds.lowerBound))
            }
            .onEnded { _ in grab = nil }
    }

    private func set(_ thumb: RangeSliderThumb, to value: Double) {
        let new = thumb == .lower
            ? RangeSliderMath.lower(value, upper: range.upperBound, in: bounds, step: step, minimumSpan: minimumSpan)...range.upperBound
            : range.lowerBound...RangeSliderMath.upper(value, lower: range.lowerBound, in: bounds, step: step, minimumSpan: minimumSpan)
        if new != range { range = new }
    }
}

private struct RangeSliderGrab {
    var thumb: RangeSliderThumb
    /// The value the thumb had when the drag began.
    var value: Double
}

// MARK: - Demo

struct RangeSliderDemo: View {
    private let bounds = 20.0...300.0
    /// How many stays there are in each slice of the price range, from the cheapest.
    private let stays = [2, 5, 9, 14, 22, 30, 34, 29, 24, 18, 15, 11, 8, 6, 4, 3, 2, 2, 1, 1]

    @State private var price = 60.0...180.0

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            VStack(alignment: .leading, spacing: 4) {
                Text("Price range")
                    .font(.title2.bold())
                Text("Nightly prices before fees and taxes")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            VStack(spacing: 0) {
                histogram

                RangeSlider(range: $price, bounds: bounds, step: 5, minimumSpan: 30, lowerLabel: "Minimum price", upperLabel: "Maximum price", valueText: dollars)
            }

            HStack {
                amount("Minimum", price.lowerBound)
                Spacer()
                amount("Maximum", price.upperBound)
            }

            Text("^[\(matches) stay](inflect: true)")
                .font(.headline)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 14)
                .foregroundStyle(.white)
                .background(.tint, in: .capsule)
                .contentTransition(.numericText())
                .animation(.snappy, value: matches)
        }
        .padding(24)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .tint(.pink)
    }

    private var histogram: some View {
        HStack(alignment: .bottom, spacing: 3) {
            ForEach(stays.indices, id: \.self) { index in
                RoundedRectangle(cornerRadius: 2)
                    .fill(isSelected(index) ? AnyShapeStyle(.tint) : AnyShapeStyle(.fill.tertiary))
                    .frame(height: CGFloat(stays[index]) * 3)
            }
        }
        .padding(.horizontal, 14)
        .accessibilityHidden(true)
    }

    private var matches: Int {
        stays.indices.filter(isSelected).map { stays[$0] }.reduce(0, +)
    }

    /// Whether the middle of a slice of the price range is inside the chosen prices.
    private func isSelected(_ index: Int) -> Bool {
        let slice = (bounds.upperBound - bounds.lowerBound) / Double(stays.count)
        return price.contains(bounds.lowerBound + (Double(index) + 0.5) * slice)
    }

    private func amount(_ title: String, _ value: Double) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(title)
                .font(.caption)
                .foregroundStyle(.secondary)
            Text(dollars(value))
                .font(.title3.weight(.semibold))
                .monospacedDigit()
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 10)
        .background(.fill.quaternary, in: .rect(cornerRadius: 12))
        .accessibilityElement(children: .combine)
    }

    private func dollars(_ value: Double) -> String {
        value.formatted(.currency(code: "USD").precision(.fractionLength(0)))
    }
}

#Preview {
    RangeSliderDemo()
}
```

## Ruler Scroll Picker

A horizontal ruler of tick marks that snaps to a value under a fixed center indicator.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/RulerScrollPicker/RulerScrollPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Converts between values, tick indices and scroll offsets. Bad input yields a usable scale.
struct RulerScrollPickerScale: Equatable {
    static let maximumTickCount = 20_000

    let lowerBound: Double
    let step: Double
    let tickCount: Int

    init(range: ClosedRange<Double>, step: Double) {
        let safeStep = step.isFinite && step > 0 ? step : 1
        let quotient = (range.upperBound - range.lowerBound) / safeStep
        // 0.1 has no exact binary form, so 0.3 / 0.1 lands just under 3.
        let ticks = abs(quotient - quotient.rounded()) < 1e-9 ? quotient.rounded() : quotient.rounded(.down)

        lowerBound = range.lowerBound
        self.step = safeStep
        tickCount = ticks.isFinite ? Int(min(max(ticks, 0), Double(Self.maximumTickCount - 1))) + 1 : 1
    }

    func value(at index: Int) -> Double {
        lowerBound + Double(min(max(index, 0), tickCount - 1)) * step
    }

    func index(for value: Double) -> Int {
        guard value.isFinite else { return 0 }
        return clampedIndex(((value - lowerBound) / step).rounded())
    }

    func index(forOffset offset: CGFloat, spacing: CGFloat) -> Int {
        guard offset.isFinite, spacing > 0 else { return 0 }
        return clampedIndex(Double((offset / spacing).rounded()))
    }

    private func clampedIndex(_ index: Double) -> Int {
        guard index.isFinite else { return 0 }
        return Int(min(max(index, 0), Double(tickCount - 1)))
    }
}

/// A ruler of tick marks that snaps to a value under a fixed center indicator.
///
/// Dragging writes the value, and changing the value from outside scrolls the ruler.
/// With Reduce Motion on, outside changes jump instead of gliding.
struct RulerScrollPicker: View {
    let title: LocalizedStringResource
    @Binding var value: Double
    var range: ClosedRange<Double> = 0...100
    var step: Double = 1
    var majorEvery: Int = 10
    var tickSpacing: CGFloat = 12
    var tint: Color = .indigo

    @State private var position = ScrollPosition(x: 0)
    @State private var phase = ScrollPhase.idle
    @State private var currentIndex = 0
    @ScaledMetric(relativeTo: .caption) private var labelHeight = 22.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let tickHeight = 48.0

    private var scale: RulerScrollPickerScale { RulerScrollPickerScale(range: range, step: step) }
    private var spacing: CGFloat { tickSpacing.isFinite ? max(tickSpacing, 4) : 12 }
    private var major: Int { max(majorEvery, 1) }

    var body: some View {
        GeometryReader { proxy in
            ScrollView(.horizontal) {
                LazyHStack(spacing: 0) {
                    ForEach(0..<scale.tickCount, id: \.self) { index in
                        tick(at: index)
                    }
                }
                .padding(.horizontal, max((proxy.size.width - spacing) / 2, 0))
            }
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(RulerScrollPickerSnap(spacing: spacing))
            .scrollPosition($position)
            .onScrollPhaseChange { _, newPhase in phase = newPhase }
            .onScrollGeometryChange(for: Int.self) { geometry in
                scale.index(forOffset: geometry.contentOffset.x, spacing: spacing)
            } action: { _, newIndex in
                userScrolled(to: newIndex)
            }
        }
        .frame(height: tickHeight + labelHeight + 8)
        .mask {
            LinearGradient(stops: [
                .init(color: .clear, location: 0),
                .init(color: .black, location: 0.18),
                .init(color: .black, location: 0.82),
                .init(color: .clear, location: 1),
            ], startPoint: .leading, endPoint: .trailing)
        }
        .overlay(alignment: .top) {
            Capsule()
                .fill(tint)
                .frame(width: 4, height: tickHeight + 8)
                .allowsHitTesting(false)
        }
        .sensoryFeedback(.selection, trigger: currentIndex)
        .onAppear { syncScroll(animated: false) }
        .onChange(of: value) { syncScroll(animated: true) }
        .onChange(of: scale) { syncScroll(animated: false) }
        .accessibilityElement()
        .accessibilityLabel(title)
        .accessibilityValue(value.formatted())
        .accessibilityAdjustableAction { direction in
            let index = scale.index(for: value)
            switch direction {
            case .increment: value = scale.value(at: index + 1)
            case .decrement: value = scale.value(at: index - 1)
            @unknown default: break
            }
        }
    }

    private func tick(at index: Int) -> some View {
        let isMajor = index % major == 0
        let isMiddle = !isMajor && major >= 2 && index % (major / 2) == 0

        return Capsule()
            .fill(isMajor ? Color.primary : Color.secondary.opacity(0.6))
            .frame(width: isMajor ? 2.5 : 1.5, height: isMajor ? tickHeight : isMiddle ? tickHeight * 0.7 : tickHeight * 0.45)
            .frame(width: spacing, height: tickHeight + labelHeight + 8, alignment: .top)
            .overlay(alignment: .bottom) {
                if isMajor {
                    Text(scale.value(at: index).formatted())
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .fixedSize()
                }
            }
    }

    private func userScrolled(to index: Int) {
        guard phase.isScrolling, phase != .animating else { return }

        currentIndex = index
        let newValue = scale.value(at: index)
        if newValue != value {
            value = newValue
        }
    }

    private func syncScroll(animated: Bool) {
        guard !phase.isScrolling || phase == .animating else { return }

        let index = scale.index(for: value)
        guard !animated || index != currentIndex else { return }

        currentIndex = index
        let offset = CGFloat(index) * spacing
        if animated, !reduceMotion {
            withAnimation(.smooth(duration: 0.7)) { position.scrollTo(x: offset) }
        } else {
            position.scrollTo(x: offset)
        }
    }
}

private struct RulerScrollPickerSnap: ScrollTargetBehavior {
    let spacing: CGFloat

    func updateTarget(_ target: inout ScrollTarget, context: TargetContext) {
        target.rect.origin.x = (target.rect.minX / spacing).rounded() * spacing
    }
}

// MARK: - Demo

struct RulerScrollPickerDemo: View {
    @State private var weight = 62.0
    @State private var lastAutoValue = 62.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let tour = [78.5, 55.0, 91.0, 62.0]

    var body: some View {
        ScrollView {
            VStack(spacing: 36) {
                Text("Your weight")
                    .font(.system(.title, design: .rounded, weight: .semibold))
                    .foregroundStyle(.secondary)

                HStack(alignment: .firstTextBaseline, spacing: 6) {
                    Text(weight, format: .number.precision(.fractionLength(1)))
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                        .monospacedDigit()
                        .contentTransition(.numericText(value: weight))

                    Text("kg")
                        .font(.title3)
                        .foregroundStyle(.secondary)
                }
                .accessibilityElement(children: .combine)
                .animation(reduceMotion ? nil : .smooth(duration: 0.7), value: weight)

                RulerScrollPicker(title: "Weight in kilograms", value: $weight, range: 40...120, step: 0.5)
            }
            .padding(.vertical, 24)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }

            for target in tour + tour + tour {
                try? await Task.sleep(for: .seconds(1.2))
                guard !Task.isCancelled, weight == lastAutoValue else { return }
                lastAutoValue = target
                weight = target
            }
        }
    }
}

#Preview {
    RulerScrollPickerDemo()
}
```

## Select All Checklist

A list of checkable rows under a select-all box that turns mixed when only some rows are checked and counts the selection.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/SelectAllChecklist/SelectAllChecklist.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SelectAllChecklistState: Equatable {
    case none, some, all

    /// Counts only the items in the list, so a selection kept from elsewhere does not make it look full.
    init<ID: Hashable>(selection: Set<ID>, among ids: [ID]) {
        let selected = ids.filter(selection.contains).count
        if ids.isEmpty || selected == 0 {
            self = .none
        } else {
            self = selected == ids.count ? .all : .some
        }
    }

    /// Selects every item unless all are selected, then deselects them, and leaves any other ID alone.
    static func toggledAll<ID: Hashable>(_ selection: Set<ID>, among ids: [ID]) -> Set<ID> {
        if SelectAllChecklistState(selection: selection, among: ids) == .all {
            return selection.subtracting(ids)
        }
        return selection.union(ids)
    }
}

/// A list of checkable rows under a "select all" box that is checked when every
/// row is, shows a dash when only some are, and counts them.
///
/// The selection is a `Set` of IDs, like a `List` with selection. With Reduce
/// Motion on, the checkmarks appear without being drawn.
struct SelectAllChecklist<Item: Identifiable, Row: View>: View {
    let title: LocalizedStringResource
    let items: [Item]
    @Binding var selection: Set<Item.ID>
    var color: Color = .accentColor
    @ViewBuilder let row: (Item) -> Row

    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    /// At accessibility sizes the count goes under the title, so the title is not broken mid-word.
    private var headerLayout: AnyLayout {
        dynamicTypeSize.isAccessibilitySize
            ? AnyLayout(VStackLayout(alignment: .leading, spacing: 2))
            : AnyLayout(HStackLayout(spacing: 8))
    }

    private var ids: [Item.ID] { items.map(\.id) }
    private var state: SelectAllChecklistState { SelectAllChecklistState(selection: selection, among: ids) }
    private var selectedCount: Int { ids.filter(selection.contains).count }

    var body: some View {
        VStack(spacing: 0) {
            Button {
                selection = SelectAllChecklistState.toggledAll(selection, among: ids)
            } label: {
                HStack(spacing: 12) {
                    SelectAllChecklistBox(state: state, color: color)
                    headerLayout {
                        Text(title)
                            .font(.headline)
                            .frame(maxWidth: .infinity, alignment: .leading)
                        Text("\(selectedCount) of \(items.count)")
                            .font(.subheadline)
                            .monospacedDigit()
                            .foregroundStyle(.secondary)
                            .contentTransition(.numericText(value: Double(selectedCount)))
                    }
                }
                .padding(.vertical, 8)
                .frame(minHeight: 44)
                .contentShape(.rect)
            }
            .buttonStyle(.plain)
            .accessibilityValue(Text("\(selectedCount) of \(items.count) selected"))
            .accessibilityAddTraits(state == .all ? .isSelected : [])

            Divider()

            ForEach(items) { item in
                let isSelected = selection.contains(item.id)

                Button {
                    if isSelected { selection.remove(item.id) } else { selection.insert(item.id) }
                } label: {
                    HStack(spacing: 12) {
                        SelectAllChecklistBox(state: isSelected ? .all : .none, color: color)
                        row(item)
                            .frame(maxWidth: .infinity, alignment: .leading)
                    }
                    .padding(.vertical, 6)
                    .frame(minHeight: 44)
                    .contentShape(.rect)
                }
                .buttonStyle(.plain)
                .accessibilityAddTraits(isSelected ? .isSelected : [])
            }
        }
        .sensoryFeedback(.selection, trigger: selection)
        .animation(.snappy(duration: 0.2), value: selectedCount)
    }
}

private struct SelectAllChecklistBox: View {
    let state: SelectAllChecklistState
    let color: Color

    @ScaledMetric(relativeTo: .body) private var size = 22.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let shape = RoundedRectangle(cornerRadius: size * 0.28, style: .continuous)
        let mark = SelectAllChecklistContrastingForeground(background: color)
        let lineWidth = size * 0.12
        let isFilled = state != .none

        ZStack {
            shape.fill(isFilled ? color : .clear)
            shape.strokeBorder(isFilled ? color : Color.secondary.opacity(0.6), lineWidth: lineWidth)

            if state == .some {
                Capsule()
                    .fill(mark)
                    .frame(width: size * 0.5, height: lineWidth)
                    .transition(.opacity)
            } else {
                SelectAllChecklistCheck()
                    .trim(from: 0, to: state == .all ? 1 : 0)
                    .stroke(mark, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round))
            }
        }
        .frame(width: size, height: size)
        // A checkmark is not mirrored right-to-left, like the system symbol.
        .environment(\.layoutDirection, .leftToRight)
        .animation(reduceMotion ? nil : .easeOut(duration: 0.22), value: state)
        .accessibilityHidden(true)
    }
}

nonisolated struct SelectAllChecklistCheck: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.width * 0.26, y: rect.height * 0.52))
        path.addLine(to: CGPoint(x: rect.width * 0.43, y: rect.height * 0.69))
        path.addLine(to: CGPoint(x: rect.width * 0.75, y: rect.height * 0.33))
        return path
    }
}

nonisolated struct SelectAllChecklistContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

private struct SelectAllChecklistDemoEpisode: Identifiable {
    let id: Int
    let title: String
    let size: String
}

struct SelectAllChecklistDemo: View {
    @State private var selection: Set<Int> = [2]

    private let episodes = [
        SelectAllChecklistDemoEpisode(id: 1, title: "The Shape of Light", size: "48 MB"),
        SelectAllChecklistDemoEpisode(id: 2, title: "Islands in the Stream", size: "62 MB"),
        SelectAllChecklistDemoEpisode(id: 3, title: "A Year Without Winter", size: "55 MB"),
        SelectAllChecklistDemoEpisode(id: 4, title: "Night Trains", size: "39 MB"),
        SelectAllChecklistDemoEpisode(id: 5, title: "The Last Lighthouse", size: "71 MB"),
    ]

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Downloads")
                    .font(.largeTitle.bold())

                SelectAllChecklist(title: "All Episodes", items: episodes, selection: $selection, color: .teal) { episode in
                    VStack(alignment: .leading, spacing: 2) {
                        Text(episode.title)
                        Text(episode.size)
                            .font(.footnote)
                            .foregroundStyle(.secondary)
                    }
                }
                .padding(.horizontal, 16)
                .padding(.vertical, 8)
                .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 20, style: .continuous))
            }
            .padding(20)
        }
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    SelectAllChecklistDemo()
}
```

## Settings Toggle Row

A settings row with a symbol on a colored rounded square, a title, an optional subtitle and a switch, like the Settings app.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/SettingsToggleRow/SettingsToggleRow.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A settings row like the ones in the Settings app: a symbol on a colored
/// rounded square, a title, an optional subtitle and a switch. It is a plain
/// `Toggle`, so it works in a `List` or a `Form` and reads as one switch in VoiceOver.
///
/// The symbol bounces when the switch turns on, except with Reduce Motion on.
struct SettingsToggleRow: View {
    let title: LocalizedStringResource
    var subtitle: LocalizedStringResource?
    let systemImage: String
    var iconColor: Color = .blue
    @Binding var isOn: Bool

    @State private var bounces = 0
    @ScaledMetric(relativeTo: .body) private var iconSize = 30.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Toggle(isOn: $isOn) {
            HStack(spacing: 14) {
                Image(systemName: systemImage)
                    .font(.system(size: iconSize * 0.55, weight: .semibold))
                    .foregroundStyle(SettingsToggleRowContrastingForeground(background: iconColor))
                    .symbolEffect(.bounce, value: bounces)
                    .frame(width: iconSize, height: iconSize)
                    .background(iconColor.gradient, in: .rect(cornerRadius: iconSize * 0.26, style: .continuous))
                    .accessibilityHidden(true)

                VStack(alignment: .leading, spacing: 2) {
                    Text(title)
                    if let subtitle {
                        Text(subtitle)
                            .font(.footnote)
                            .foregroundStyle(.secondary)
                    }
                }
            }
        }
        .onChange(of: isOn) { _, on in
            if on, !reduceMotion { bounces += 1 }
        }
    }
}

nonisolated struct SettingsToggleRowContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct SettingsToggleRowDemo: View {
    @State private var airplaneMode = false
    @State private var wifi = true
    @State private var bluetooth = true
    @State private var doNotDisturb = false
    @State private var lowPower = false
    @State private var previews = true

    var body: some View {
        NavigationStack {
            List {
                Section {
                    SettingsToggleRow(title: "Airplane Mode", systemImage: "airplane", iconColor: .orange, isOn: $airplaneMode)
                    SettingsToggleRow(title: "Wi-Fi", systemImage: "wifi", isOn: $wifi)
                    SettingsToggleRow(title: "Bluetooth", systemImage: "antenna.radiowaves.left.and.right", isOn: $bluetooth)
                }

                Section {
                    SettingsToggleRow(
                        title: "Do Not Disturb",
                        subtitle: "Silence calls and alerts",
                        systemImage: "moon.fill",
                        iconColor: .indigo,
                        isOn: $doNotDisturb
                    )
                    SettingsToggleRow(
                        title: "Low Power Mode",
                        subtitle: "Reduce background activity",
                        systemImage: "battery.25percent",
                        iconColor: .yellow,
                        isOn: $lowPower
                    )
                    SettingsToggleRow(title: "Show Previews", systemImage: "text.bubble.fill", iconColor: .green, isOn: $previews)
                }
            }
            .navigationTitle("Settings")
        }
    }
}

#Preview {
    SettingsToggleRowDemo()
}
```

## Sliding Segmented Picker

A segmented picker whose selected pill glides between the options.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/SlidingSegmentedPicker/SlidingSegmentedPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A segmented picker whose selected pill glides between the options.
///
/// With Reduce Motion on, the pill moves without animating.
struct SlidingSegmentedPicker<Option: Hashable>: View {
    @Binding var selection: Option
    let options: [Option]
    var tint: Color = .indigo
    let title: (Option) -> String

    @Namespace private var namespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 4) {
            ForEach(options, id: \.self) { option in
                let isSelected = option == selection

                Button {
                    selection = option
                } label: {
                    Text(title(option))
                        .font(.headline)
                        .lineLimit(1)
                        .minimumScaleFactor(0.7)
                        .foregroundStyle(isSelected ? Color.white : Color.primary)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 14)
                        .background {
                            if isSelected {
                                Capsule()
                                    .fill(tint.gradient)
                                    .matchedGeometryEffect(id: "pill", in: namespace)
                            }
                        }
                        .contentShape(.capsule)
                }
                .buttonStyle(.plain)
                .accessibilityAddTraits(isSelected ? .isSelected : [])
            }
        }
        .padding(4)
        .background(.quaternary, in: .capsule)
        .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.25), value: selection)
    }
}

// MARK: - Demo

struct SlidingSegmentedPickerDemo: View {
    private enum Period: String, CaseIterable {
        case day = "Day"
        case week = "Week"
        case month = "Month"
        case year = "Year"

        var steps: Int {
            switch self {
            case .day: 8_240
            case .week: 54_910
            case .month: 231_075
            case .year: 2_904_330
            }
        }
    }

    @State private var period = Period.day
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 36) {
            VStack(spacing: 6) {
                Text(period.steps, format: .number)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .contentTransition(reduceMotion ? .identity : .numericText(value: Double(period.steps)))
                Text("steps walked")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .accessibilityElement(children: .combine)

            SlidingSegmentedPicker(selection: $period, options: Period.allCases) { $0.rawValue }
        }
        .animation(reduceMotion ? nil : .snappy, value: period)
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    SlidingSegmentedPickerDemo()
}
```

## Spring Toggle Style

A custom toggle style whose knob widens under the finger and overshoots as it lands.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/SpringToggleStyle/SpringToggleStyle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A toggle whose knob widens under your finger and overshoots as it lands.
/// The whole row is tappable, and VoiceOver reads it as a standard switch.
///
/// With Reduce Motion on, the knob slides without bouncing or widening.
struct SpringToggleStyle: ToggleStyle {
    var onColor: Color = .green

    func makeBody(configuration: Configuration) -> some View {
        Button {
            configuration.isOn.toggle()
        } label: {
            configuration.label
                .frame(maxWidth: .infinity, alignment: .leading)
                .contentShape(.rect)
        }
        .buttonStyle(SpringToggleStyleRow(isOn: configuration.isOn, onColor: onColor))
        .accessibilityRepresentation {
            Toggle(isOn: configuration.$isOn) {
                configuration.label
            }
        }
    }
}

extension ToggleStyle where Self == SpringToggleStyle {
    static var spring: SpringToggleStyle { SpringToggleStyle() }
}

private struct SpringToggleStyleRow: ButtonStyle {
    let isOn: Bool
    let onColor: Color

    @ScaledMetric(relativeTo: .body) private var trackHeight = 34.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let knobInset = 3.0

    private var animation: Animation {
        reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.45, bounce: 0.55)
    }

    func makeBody(configuration: Configuration) -> some View {
        let isSquashed = configuration.isPressed && !reduceMotion
        let knobHeight = trackHeight - knobInset * 2

        HStack(spacing: 16) {
            configuration.label

            Capsule()
                .fill(isOn ? onColor : Color.gray.opacity(0.35))
                .frame(width: trackHeight * 1.75, height: trackHeight)
                .overlay(alignment: isOn ? .trailing : .leading) {
                    Capsule()
                        .fill(.white)
                        .shadow(color: .black.opacity(0.25), radius: 3, y: 2)
                        .frame(width: isSquashed ? knobHeight * 1.3 : knobHeight, height: knobHeight)
                        .padding(knobInset)
                }
        }
        .animation(animation, value: isOn)
        .animation(animation, value: isSquashed)
    }
}

// MARK: - Demo

struct SpringToggleStyleDemo: View {
    @State private var notifications = false
    @State private var sounds = true
    @State private var haptics = false

    var body: some View {
        VStack(spacing: 28) {
            Toggle(isOn: $notifications) { Label("Notifications", systemImage: "bell.fill") }
            Toggle(isOn: $sounds) { Label("Sounds", systemImage: "speaker.wave.2.fill") }
            Toggle(isOn: $haptics) { Label("Haptics", systemImage: "iphone.radiowaves.left.and.right") }
        }
        .toggleStyle(.spring)
        .font(.title3.weight(.medium))
        .padding(24)
        .background(.background, in: .rect(cornerRadius: 28))
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    SpringToggleStyleDemo()
}
```

## Swipe To Confirm Slider

A track with a thumb you drag to the end to confirm, which springs back if released early.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/SwipeToConfirmSlider/SwipeToConfirmSlider.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SwipeToConfirmSliderMath {
    /// How far along its travel the thumb is, from 0 to 1.
    static func progress(translation: Double, trackWidth: Double, thumbWidth: Double) -> Double {
        let travel = trackWidth - thumbWidth
        guard travel > 0 else { return 0 }
        return min(max(translation / travel, 0), 1)
    }

    static func thumbOffset(progress: Double, trackWidth: Double, thumbWidth: Double) -> Double {
        max(trackWidth - thumbWidth, 0) * min(max(progress, 0), 1)
    }

    static func isConfirmed(progress: Double, threshold: Double = 0.92) -> Bool {
        progress >= threshold
    }
}

/// A track with a thumb you drag to the end to confirm. Letting go early springs it back.
///
/// With Reduce Motion on, the thumb returns without bouncing. VoiceOver users
/// confirm with a double tap.
struct SwipeToConfirmSlider: View {
    let title: LocalizedStringResource
    var confirmedTitle: LocalizedStringResource = "Confirmed"
    var tint: Color = .indigo
    var resetDelay: Double = 1.4
    let onConfirm: () -> Void

    @State private var progress = 0.0
    @State private var isConfirmed = false
    @GestureState private var isDragging = false
    @ScaledMetric(relativeTo: .title3) private var height = 68.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let inset = 5.0

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var settle: Animation {
        reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.45, bounce: 0.35)
    }

    var body: some View {
        GeometryReader { proxy in
            let trackWidth = proxy.size.width - inset * 2
            let thumbWidth = height - inset * 2
            let offset = SwipeToConfirmSliderMath.thumbOffset(
                progress: progress,
                trackWidth: trackWidth,
                thumbWidth: thumbWidth
            )

            ZStack(alignment: .leading) {
                Capsule()
                    .fill(.quaternary)

                Capsule()
                    .fill(tint.gradient)
                    .frame(width: offset + height)

                Text(isConfirmed ? confirmedTitle : title)
                    .font(.title3.weight(.semibold))
                    .lineLimit(1)
                    .minimumScaleFactor(0.7)
                    .foregroundStyle(isConfirmed ? Color.white : Color.primary)
                    .opacity(isConfirmed ? 1 : max(1 - progress * 1.6, 0))
                    .padding(.horizontal, height)
                    .frame(maxWidth: .infinity)

                // Both symbols live in the thumb and fade in place. One image that changes its
                // symbol leaves the old one behind while the thumb travels back.
                ZStack {
                    Image(systemName: "chevron.forward.2")
                        .opacity(isConfirmed ? 0 : 1)
                    Image(systemName: "checkmark")
                        .opacity(isConfirmed ? 1 : 0)
                        .scaleEffect(isConfirmed || reduceMotion ? 1 : 0.4)
                }
                .font(.title3.bold())
                .foregroundStyle(tint)
                .frame(width: thumbWidth, height: thumbWidth)
                .background(.white, in: .circle)
                .shadow(color: .black.opacity(0.2), radius: 5, y: 3)
                .contentShape(.circle)
                .offset(x: inset + offset)
                .gesture(drag(trackWidth: trackWidth, thumbWidth: thumbWidth))
            }
        }
        .frame(height: height)
        .onChange(of: isDragging) { _, dragging in
            guard !dragging, !isConfirmed else { return }
            withAnimation(settle) { progress = 0 }
        }
        .sensoryFeedback(.success, trigger: isConfirmed) { _, confirmed in confirmed }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(isConfirmed ? confirmedTitle : title)
        .accessibilityHint("Double tap to confirm")
        .accessibilityAddTraits(.isButton)
        .accessibilityAction { confirm() }
    }

    private func drag(trackWidth: Double, thumbWidth: Double) -> some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { value in
                guard !isConfirmed else { return }
                progress = SwipeToConfirmSliderMath.progress(
                    translation: value.translation.width * forward,
                    trackWidth: trackWidth,
                    thumbWidth: thumbWidth
                )
            }
            .onEnded { _ in
                if SwipeToConfirmSliderMath.isConfirmed(progress: progress) {
                    confirm()
                }
            }
    }

    private func confirm() {
        guard !isConfirmed else { return }
        withAnimation(settle) {
            progress = 1
            isConfirmed = true
        }
        onConfirm()

        Task {
            try? await Task.sleep(for: .seconds(resetDelay))
            withAnimation(settle) {
                progress = 0
                isConfirmed = false
            }
        }
    }
}

// MARK: - Demo

struct SwipeToConfirmSliderDemo: View {
    @State private var payments = 0

    var body: some View {
        SwipeToConfirmSlider(title: "Slide to pay") {
            payments += 1
        }
        .padding(.horizontal, 24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .overlay(alignment: .top) {
            VStack(spacing: 6) {
                Text("48.00 €")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                Text(payments == 1 ? "1 payment sent" : "\(payments) payments sent")
                    .font(.headline)
                    .foregroundStyle(.secondary)
            }
            .padding(.top, 72)
        }
    }
}

#Preview {
    SwipeToConfirmSliderDemo()
}
```

## Tick Mark Slider

The system slider with a mark at the values that matter, which settles on the nearest one when let go.

Category: Controls. Minimum: iOS 26.0. Path: Components/Controls/TickMarkSlider/TickMarkSlider.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum TickMarkSliderMath {
    /// The tick closest to a value, which is where the slider settles when it is let go.
    static func nearestTick(to value: Double, in ticks: [Double]) -> Double? {
        ticks.min { abs($0 - value) < abs($1 - value) }
    }

    /// The ticks that fall inside the range, in order and without repeats.
    static func ticks(_ ticks: [Double], in range: ClosedRange<Double>) -> [Double] {
        Array(Set(ticks.filter { $0.isFinite && range.contains($0) })).sorted()
    }
}

/// The system slider with a mark at the values that matter, using the tick marks that iOS 26
/// added to `Slider`. Let go and it settles on the nearest mark. The system draws the marks as
/// dots and keeps their labels for assistive technologies.
///
/// `neutralValue` is where the tinted part of the track starts, for a value that goes both ways,
/// such as a balance or an offset. It is a system `Slider`, so VoiceOver and Dynamic Type are the system's.
@available(iOS 26, *)
struct TickMarkSlider: View {
    @Binding var value: Double
    var range: ClosedRange<Double> = 0...1
    let ticks: [Double]
    var neutralValue: Double?
    var label = "Value"
    /// Whether the slider moves to the nearest mark when it is let go.
    var snapsToTicks = true
    var tickLabel: (Double) -> String = { $0.formatted() }

    var body: some View {
        let marks = TickMarkSliderMath.ticks(ticks, in: range)

        Slider(value: $value, in: range, neutralValue: neutralValue) {
            Text(label)
        } currentValueLabel: {
            Text(tickLabel(value))
        } ticks: {
            SliderTickContentForEach(marks, id: \.self) { mark in
                SliderTick(mark) {
                    Text(tickLabel(mark))
                }
            }
        } onEditingChanged: { isEditing in
            guard !isEditing, snapsToTicks, let mark = TickMarkSliderMath.nearestTick(to: value, in: marks) else { return }
            withAnimation(.snappy) { value = mark }
        }
        .sensoryFeedback(.selection, trigger: TickMarkSliderMath.nearestTick(to: value, in: marks))
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct TickMarkSliderDemo: View {
    @State private var speed = 1.0
    @State private var balance = 0.0

    var body: some View {
        VStack(alignment: .leading, spacing: 28) {
            Text("Playback")
                .font(.title2.bold())

            setting("Speed", detail: "\(speed.formatted(.number.precision(.fractionLength(0...2))))×") {
                TickMarkSlider(value: $speed, range: 0.5...2, ticks: [0.5, 1, 1.5, 2], label: "Speed") {
                    "\($0.formatted())×"
                }
            }

            setting("Balance", detail: balance == 0 ? "Center" : (balance < 0 ? "Left" : "Right")) {
                TickMarkSlider(value: $balance, range: -1...1, ticks: [-1, 0, 1], neutralValue: 0, label: "Balance") { mark in
                    mark == 0 ? "C" : (mark < 0 ? "L" : "R")
                }
            }
        }
        .padding(24)
        .background(.background, in: .rect(cornerRadius: 24))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }

    private func setting(_ title: String, detail: String, @ViewBuilder slider: () -> some View) -> some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text(title)
                    .font(.headline)
                Spacer()
                Text(detail)
                    .font(.subheadline.monospacedDigit())
                    .foregroundStyle(.secondary)
                    .contentTransition(.numericText())
            }
            .accessibilityHidden(true)

            slider()
        }
    }
}

@available(iOS 26, *)
#Preview {
    TickMarkSliderDemo()
}
```

## Weekday Segmented Picker

A row of round day buttons that picks several days of the week in the calendar's order, with a summary like Weekdays under it.

Category: Controls. Minimum: iOS 18.0. Path: Components/Controls/WeekdaySegmentedPicker/WeekdaySegmentedPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct WeekdaySegmentedPickerDay: Identifiable, Equatable {
    /// The `Calendar` weekday number: 1 is Sunday and 7 is Saturday.
    let weekday: Int
    let letter: String
    let name: String
    let shortName: String

    var id: Int { weekday }
}

enum WeekdaySegmentedPickerSummary: Equatable {
    case never, everyDay, weekdays, weekends
    case days([Int])
}

enum WeekdaySegmentedPickerCalendar {
    /// The seven days in the order of the calendar, starting at its first weekday.
    static func days(for calendar: Calendar) -> [WeekdaySegmentedPickerDay] {
        let letters = calendar.veryShortStandaloneWeekdaySymbols
        let names = calendar.standaloneWeekdaySymbols
        let shortNames = calendar.shortStandaloneWeekdaySymbols

        return (0..<7).map { offset in
            let index = (calendar.firstWeekday - 1 + offset) % 7
            return WeekdaySegmentedPickerDay(weekday: index + 1, letter: letters[index], name: names[index], shortName: shortNames[index])
        }
    }

    /// Names a selection the way an alarm does. Saturday and Sunday make the weekend.
    static func summary(of selection: Set<Int>, order: [Int]) -> WeekdaySegmentedPickerSummary {
        let chosen = order.filter(selection.contains)
        switch Set(chosen) {
        case []: return .never
        case Set(1...7): return .everyDay
        case Set(2...6): return .weekdays
        case [1, 7]: return .weekends
        default: return .days(chosen)
        }
    }
}

/// A row of round day buttons that picks several days of the week, like the
/// repeat days of an alarm, with a summary such as "Weekdays" under it.
/// The days follow the calendar: its first weekday and its own letters.
///
/// The selection holds `Calendar` weekday numbers, 1 for Sunday. With Reduce
/// Motion on, a day changes color without popping.
struct WeekdaySegmentedPicker: View {
    @Binding var selection: Set<Int>
    var calendar: Calendar = .current
    var color: Color = .accentColor
    var showsSummary = true

    @ScaledMetric(relativeTo: .body) private var size = 40.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var days: [WeekdaySegmentedPickerDay] {
        WeekdaySegmentedPickerCalendar.days(for: calendar)
    }

    var body: some View {
        VStack(spacing: 12) {
            HStack(spacing: 0) {
                ForEach(days) { day in
                    dayButton(day)
                }
            }

            if showsSummary {
                summaryText
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.opacity)
                    .animation(.easeInOut(duration: 0.2), value: selection)
            }
        }
        .sensoryFeedback(.selection, trigger: selection)
    }

    private func dayButton(_ day: WeekdaySegmentedPickerDay) -> some View {
        let isSelected = selection.contains(day.weekday)

        return Button {
            if isSelected { selection.remove(day.weekday) } else { selection.insert(day.weekday) }
        } label: {
            Text(day.letter)
                .font(.subheadline.weight(.semibold))
                .minimumScaleFactor(0.6)
                .foregroundStyle(isSelected ? AnyShapeStyle(WeekdaySegmentedPickerContrastingForeground(background: color)) : AnyShapeStyle(.primary))
                .frame(maxWidth: size, maxHeight: size)
                .aspectRatio(1, contentMode: .fit)
                .background(isSelected ? AnyShapeStyle(color) : AnyShapeStyle(.quaternary), in: .circle)
                .scaleEffect(isSelected && !reduceMotion ? 1.06 : 1)
                .frame(maxWidth: .infinity, minHeight: 44)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .animation(reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.3, bounce: 0.5), value: isSelected)
        .accessibilityLabel(day.name)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }

    private var summaryText: Text {
        switch WeekdaySegmentedPickerCalendar.summary(of: selection, order: days.map(\.weekday)) {
        case .never: Text("Never")
        case .everyDay: Text("Every day")
        case .weekdays: Text("Weekdays")
        case .weekends: Text("Weekends")
        case .days(let weekdays):
            Text(days.filter { weekdays.contains($0.weekday) }.map(\.shortName).formatted(.list(type: .and)))
        }
    }
}

nonisolated struct WeekdaySegmentedPickerContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct WeekdaySegmentedPickerDemo: View {
    @State private var alarmDays: Set<Int> = [2, 4]
    @State private var gymDays: Set<Int> = [3, 5, 7]

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            Text("Repeat")
                .font(.largeTitle.bold())

            VStack(alignment: .leading, spacing: 14) {
                Label("7:30 Wake Up", systemImage: "alarm.fill")
                    .font(.headline)
                WeekdaySegmentedPicker(selection: $alarmDays, color: .orange)
            }
            .padding(18)
            .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 22, style: .continuous))

            VStack(alignment: .leading, spacing: 14) {
                Label("Workout", systemImage: "figure.run")
                    .font(.headline)
                WeekdaySegmentedPicker(selection: $gymDays, color: .mint)
            }
            .padding(18)
            .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 22, style: .continuous))
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    WeekdaySegmentedPickerDemo()
}
```

## Drawing Pad Speed Brush

A drawing pad whose stroke gets thinner as the finger moves faster.

Category: Drawing. Minimum: iOS 18.0. Path: Components/Drawing/DrawingPadSpeedBrush/DrawingPadSpeedBrush.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct DrawingPadSpeedBrushPoint: Equatable {
    var location: CGPoint
    var width: CGFloat
}

enum DrawingPadSpeedBrushMath {
    /// The stroke width for a finger speed in points per second: thick when slow, thin when fast.
    static func width(speed: CGFloat, thin: CGFloat, thick: CGFloat, fullSpeed: CGFloat) -> CGFloat {
        let thinnest = max(thin, 0.5)
        let thickest = max(thick, thinnest)
        guard fullSpeed > 0, speed.isFinite else { return thickest }

        let fraction = min(max(speed, 0) / fullSpeed, 1)
        return thickest + (thinnest - thickest) * fraction
    }

    /// Moves part of the way to the target, so the width does not jump between samples.
    static func smoothed(from previous: CGFloat, to target: CGFloat, factor: CGFloat = 0.3) -> CGFloat {
        previous + (target - previous) * min(max(factor, 0), 1)
    }
}

/// A drawing pad whose stroke gets thinner as the finger moves faster, like a brush pen.
///
/// A stroke the system interrupts is kept up to the point where it stopped.
struct DrawingPadSpeedBrush: View {
    @Binding var strokes: [[DrawingPadSpeedBrushPoint]]
    var color: Color = .primary
    var thinWidth: CGFloat = 2
    var thickWidth: CGFloat = 16
    var fullSpeed: CGFloat = 1400

    @State private var currentStroke: [DrawingPadSpeedBrushPoint] = []
    @State private var lastSampleTime: Date?
    @GestureState private var isDrawing = false

    var body: some View {
        Canvas { context, _ in
            let shading = GraphicsContext.Shading.color(color)
            for stroke in strokes {
                Self.draw(stroke, shading: shading, in: context)
            }
            Self.draw(currentStroke, shading: shading, in: context)
        }
        .clipped()
        .contentShape(.rect)
        .gesture(
            DragGesture(minimumDistance: 0)
                .updating($isDrawing) { _, state, _ in state = true }
                .onChanged(addSample)
        )
        .onChange(of: isDrawing) { _, drawing in
            if !drawing { finishStroke() }
        }
        .accessibilityElement()
        .accessibilityLabel("Drawing pad")
        .accessibilityValue("^[\(strokes.count) stroke](inflect: true)")
        .accessibilityAddTraits(.allowsDirectInteraction)
    }

    private func addSample(_ value: DragGesture.Value) {
        guard let last = currentStroke.last, let lastTime = lastSampleTime else {
            let width = DrawingPadSpeedBrushMath.width(speed: 0, thin: thinWidth, thick: thickWidth, fullSpeed: fullSpeed)
            currentStroke = [DrawingPadSpeedBrushPoint(location: value.location, width: width)]
            lastSampleTime = value.time
            return
        }

        let distance = hypot(value.location.x - last.location.x, value.location.y - last.location.y)
        guard distance >= 1 else { return }

        let seconds = value.time.timeIntervalSince(lastTime)
        let speed = seconds > 0 ? distance / seconds : fullSpeed
        let target = DrawingPadSpeedBrushMath.width(speed: speed, thin: thinWidth, thick: thickWidth, fullSpeed: fullSpeed)
        currentStroke.append(
            DrawingPadSpeedBrushPoint(
                location: value.location,
                width: DrawingPadSpeedBrushMath.smoothed(from: last.width, to: target)
            )
        )
        lastSampleTime = value.time
    }

    private func finishStroke() {
        lastSampleTime = nil
        guard !currentStroke.isEmpty else { return }
        strokes.append(currentStroke)
        currentStroke = []
    }

    /// Each sample becomes one curved segment with its own width.
    private static func draw(_ stroke: [DrawingPadSpeedBrushPoint], shading: GraphicsContext.Shading, in context: GraphicsContext) {
        guard let first = stroke.first else { return }

        guard stroke.count > 1 else {
            let radius = first.width / 2
            let dot = CGRect(x: first.location.x - radius, y: first.location.y - radius, width: first.width, height: first.width)
            context.fill(Path(ellipseIn: dot), with: shading)
            return
        }

        var start = first.location
        for index in 1..<stroke.count {
            let control = stroke[index]
            var end = control.location
            if index + 1 < stroke.count {
                let next = stroke[index + 1].location
                end = CGPoint(x: (control.location.x + next.x) / 2, y: (control.location.y + next.y) / 2)
            }

            var segment = Path()
            segment.move(to: start)
            segment.addQuadCurve(to: end, control: control.location)
            context.stroke(segment, with: shading, style: StrokeStyle(lineWidth: control.width, lineCap: .round, lineJoin: .round))
            start = end
        }
    }
}

// MARK: - Demo

struct DrawingPadSpeedBrushDemo: View {
    @State private var strokes: [[DrawingPadSpeedBrushPoint]] = []

    var body: some View {
        VStack(spacing: 16) {
            VStack(spacing: 4) {
                Text("Speed Brush")
                    .font(.system(.title, design: .rounded, weight: .bold))

                Text("Slow is thick, fast is thin")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            DrawingPadSpeedBrush(strokes: $strokes, color: .indigo)
                .background(.white.shadow(.drop(color: .black.opacity(0.12), radius: 16, y: 8)), in: .rect(cornerRadius: 24))

            Button("Clear", systemImage: "trash") {
                strokes = []
            }
            .buttonStyle(.bordered)
            .disabled(strokes.isEmpty)
        }
        .padding(20)
        .background(Color.indigo.opacity(0.1).ignoresSafeArea())
    }
}

#Preview {
    DrawingPadSpeedBrushDemo()
}
```

## Drawing Pad Undo Redo

A drawing pad that keeps its strokes in a history so they can be undone and redone.

Category: Drawing. Minimum: iOS 18.0. Path: Components/Drawing/DrawingPadUndoRedo/DrawingPadUndoRedo.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct DrawingPadUndoRedoStroke: Equatable {
    var points: [CGPoint]
}

/// The strokes on the pad plus the ones that can be brought back.
struct DrawingPadUndoRedoHistory: Equatable {
    private(set) var strokes: [DrawingPadUndoRedoStroke]
    private(set) var undone: [DrawingPadUndoRedoStroke] = []

    init(strokes: [DrawingPadUndoRedoStroke] = []) {
        self.strokes = strokes
    }

    var canUndo: Bool { !strokes.isEmpty }
    var canRedo: Bool { !undone.isEmpty }

    /// A new stroke starts a new future, so what was undone can no longer be redone.
    mutating func add(_ stroke: DrawingPadUndoRedoStroke) {
        guard !stroke.points.isEmpty else { return }
        strokes.append(stroke)
        undone.removeAll()
    }

    mutating func undo() {
        guard let stroke = strokes.popLast() else { return }
        undone.append(stroke)
    }

    mutating func redo() {
        guard let stroke = undone.popLast() else { return }
        strokes.append(stroke)
    }

    mutating func clear() {
        strokes.removeAll()
        undone.removeAll()
    }
}

/// A drawing pad that keeps its strokes in a history, with undo, redo and clear buttons.
///
/// A stroke the system interrupts is kept up to the point where it stopped.
struct DrawingPadUndoRedo: View {
    @Binding var history: DrawingPadUndoRedoHistory
    var color: Color = .primary
    var lineWidth: CGFloat = 6

    @State private var currentPoints: [CGPoint] = []
    @GestureState private var isDrawing = false
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    var body: some View {
        VStack(spacing: 14) {
            pad
            toolbar
        }
    }

    private var pad: some View {
        Canvas { context, _ in
            let shading = GraphicsContext.Shading.color(color)
            let width = max(lineWidth, 0.5)
            for stroke in history.strokes {
                Self.draw(stroke.points, width: width, shading: shading, in: context)
            }
            Self.draw(currentPoints, width: width, shading: shading, in: context)
        }
        .clipped()
        .contentShape(.rect)
        .gesture(
            DragGesture(minimumDistance: 0)
                .updating($isDrawing) { _, state, _ in state = true }
                .onChanged { currentPoints.append($0.location) }
        )
        .onChange(of: isDrawing) { _, drawing in
            guard !drawing else { return }
            history.add(DrawingPadUndoRedoStroke(points: currentPoints))
            currentPoints = []
        }
        .accessibilityElement()
        .accessibilityLabel("Drawing pad")
        .accessibilityValue("^[\(history.strokes.count) stroke](inflect: true)")
        .accessibilityAddTraits(.allowsDirectInteraction)
    }

    @ViewBuilder
    private var toolbar: some View {
        if dynamicTypeSize.isAccessibilitySize {
            toolbarButtons.labelStyle(.iconOnly)
        } else {
            toolbarButtons.labelStyle(.titleAndIcon)
        }
    }

    private var toolbarButtons: some View {
        HStack(spacing: 10) {
            Button("Undo", systemImage: "arrow.uturn.backward") { history.undo() }
                .disabled(!history.canUndo)

            Button("Redo", systemImage: "arrow.uturn.forward") { history.redo() }
                .disabled(!history.canRedo)

            Spacer(minLength: 0)

            Button("Clear", systemImage: "trash", role: .destructive) { history.clear() }
                .disabled(!history.canUndo && !history.canRedo)
        }
        .buttonStyle(.bordered)
    }

    private static func draw(_ points: [CGPoint], width: CGFloat, shading: GraphicsContext.Shading, in context: GraphicsContext) {
        guard let first = points.first else { return }

        guard points.count > 1 else {
            let dot = CGRect(x: first.x - width / 2, y: first.y - width / 2, width: width, height: width)
            context.fill(Path(ellipseIn: dot), with: shading)
            return
        }

        var path = Path()
        path.move(to: first)
        for index in 1..<points.count {
            let control = points[index]
            let end = index + 1 < points.count
                ? CGPoint(x: (control.x + points[index + 1].x) / 2, y: (control.y + points[index + 1].y) / 2)
                : control
            path.addQuadCurve(to: end, control: control)
        }
        context.stroke(path, with: shading, style: StrokeStyle(lineWidth: width, lineCap: .round, lineJoin: .round))
    }
}

// MARK: - Demo

struct DrawingPadUndoRedoDemo: View {
    @State private var history = DrawingPadUndoRedoHistory(
        strokes: [90.0, 200.0, 310.0].enumerated().map { index, height in
            DrawingPadUndoRedoStroke(
                points: stride(from: 24.0, through: 330.0, by: 6.0).map { x in
                    CGPoint(x: x, y: height + sin(x / 32 + Double(index) * 1.4) * 42)
                }
            )
        }
    )

    var body: some View {
        VStack(spacing: 16) {
            Text("Sketch")
                .font(.system(.title, design: .rounded, weight: .bold))

            DrawingPadUndoRedo(history: $history, color: .teal)
                .padding(14)
                .background(.regularMaterial, in: .rect(cornerRadius: 28))
        }
        .padding(20)
        .background(
            LinearGradient(colors: [.teal.opacity(0.22), .indigo.opacity(0.12)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
    }
}

#Preview {
    DrawingPadUndoRedoDemo()
}
```

## Path Trim Draw On

A custom shape, such as a logo, that draws itself along its path by animating trim.

Category: Drawing. Minimum: iOS 18.0. Path: Components/Drawing/PathTrimDrawOn/PathTrimDrawOn.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Draws any shape along its path when `isDrawn` turns true, over a faint guide of the same shape.
///
/// With Reduce Motion on, the shape appears at once.
struct PathTrimDrawOn<Outline: Shape>: View {
    let shape: Outline
    let isDrawn: Bool
    var label: LocalizedStringResource = "Logo"
    var colors: [Color] = [.pink, .orange]
    var lineWidth: CGFloat = 8
    var duration: Double = 1.6

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var style: StrokeStyle {
        StrokeStyle(lineWidth: max(lineWidth, 0), lineCap: .round, lineJoin: .round)
    }

    var body: some View {
        ZStack {
            shape.stroke(.quaternary, style: style)

            shape
                .trim(from: 0, to: isDrawn ? 1 : 0)
                .stroke(LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing), style: style)
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: duration > 0 ? duration : 0.01), value: isDrawn)
        .accessibilityElement()
        .accessibilityLabel(label)
    }
}

/// A heart with a pulse line through it, scaled to fit any rectangle.
nonisolated struct PathTrimDrawOnHeartbeat: Shape {
    /// The margin the heart's curves keep from the left and the top of the unit square.
    private static let inset: CGFloat = 0.04

    func path(in rect: CGRect) -> Path {
        let side = min(rect.width, rect.height)
        guard side > 0 else { return Path() }

        let origin = CGPoint(x: rect.midX - side / 2, y: rect.midY - side / 2)
        func point(_ x: CGFloat, _ y: CGFloat) -> CGPoint {
            CGPoint(x: origin.x + x * side, y: origin.y + y * side)
        }

        var path = Path()
        path.move(to: point(0.5, 0.92))
        path.addCurve(to: point(Self.inset, 0.36), control1: point(0.2, 0.7), control2: point(Self.inset, 0.54))
        path.addCurve(to: point(0.5, 0.24), control1: point(Self.inset, 0.08), control2: point(0.4, Self.inset))
        path.addCurve(to: point(0.96, 0.36), control1: point(0.6, Self.inset), control2: point(0.96, 0.08))
        path.addCurve(to: point(0.5, 0.92), control1: point(0.96, 0.54), control2: point(0.8, 0.7))

        path.move(to: point(0.16, 0.5))
        path.addLine(to: point(0.36, 0.5))
        path.addLine(to: point(0.44, 0.32))
        path.addLine(to: point(0.55, 0.68))
        path.addLine(to: point(0.63, 0.5))
        path.addLine(to: point(0.84, 0.5))
        return path
    }
}

// MARK: - Demo

struct PathTrimDrawOnDemo: View {
    @State private var isDrawn = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 28) {
            PathTrimDrawOn(shape: PathTrimDrawOnHeartbeat(), isDrawn: isDrawn, label: "Heart with a pulse line", duration: 1.5)
                .frame(maxWidth: 280, maxHeight: 280)

            Text("Heartbeat")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
        }
        .padding(32)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            LinearGradient(colors: [.pink.opacity(0.14), .orange.opacity(0.1)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
        .task(id: reduceMotion) {
            guard !reduceMotion else {
                isDrawn = true
                return
            }

            while !Task.isCancelled {
                isDrawn = true
                try? await Task.sleep(for: .seconds(2.2))
                guard !Task.isCancelled else { return }
                isDrawn = false
                try? await Task.sleep(for: .seconds(1.8))
            }
        }
    }
}

#Preview {
    PathTrimDrawOnDemo()
}
```

## Polygon Morph Shape

A shape that smoothly morphs between a square, a circle and a star using a custom animatable vector.

Category: Drawing. Minimum: iOS 18.0. Path: Components/Drawing/PolygonMorphShape/PolygonMorphShape.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum PolygonMorphShapeForm: String, CaseIterable, Hashable {
    case square = "Square"
    case circle = "Circle"
    case star = "Star"

    /// One sample per degree, so square corners and star tips land exactly on a sample.
    static let sampleCount = 360

    /// The outline's distance from the center, from 0 to 1, in a direction measured clockwise from the top.
    func radius(atDegrees degrees: Double) -> Double {
        let radians = degrees * .pi / 180

        switch self {
        case .square:
            return 0.7071 / max(abs(cos(radians)), abs(sin(radians)))
        case .circle:
            return 0.85
        case .star:
            return Self.starRadius(atDegrees: degrees)
        }
    }

    var radii: PolygonMorphShapeRadii {
        PolygonMorphShapeRadii(
            values: (0..<Self.sampleCount).map { radius(atDegrees: Double($0) * 360 / Double(Self.sampleCount)) }
        )
    }

    /// Finds where a ray from the center crosses the straight edge from a tip to its inner corner.
    private static func starRadius(atDegrees degrees: Double) -> Double {
        let sector = 72.0
        let wrapped = degrees.truncatingRemainder(dividingBy: sector)
        let positive = wrapped < 0 ? wrapped + sector : wrapped
        let folded = min(positive, sector - positive) * .pi / 180

        let outer = 1.0
        let inner = 0.46
        let halfSector = sector / 2 * .pi / 180
        let edgeX = inner * cos(halfSector) - outer
        let edgeY = inner * sin(halfSector)

        return (outer * edgeY) / (cos(folded) * edgeY - sin(folded) * edgeX)
    }
}

/// A list of radii that SwiftUI can interpolate, which is what makes the morph work between any two forms.
nonisolated struct PolygonMorphShapeRadii: VectorArithmetic {
    var values: [Double]

    static var zero: Self { Self(values: []) }

    static func + (lhs: Self, rhs: Self) -> Self { combine(lhs, rhs, +) }
    static func - (lhs: Self, rhs: Self) -> Self { combine(lhs, rhs, -) }

    mutating func scale(by rhs: Double) {
        values = values.map { $0 * rhs }
    }

    var magnitudeSquared: Double {
        values.reduce(0) { $0 + $1 * $1 }
    }

    /// `zero` is empty, so a missing value on either side counts as 0.
    private static func combine(_ lhs: Self, _ rhs: Self, _ operation: (Double, Double) -> Double) -> Self {
        let count = max(lhs.values.count, rhs.values.count)
        return Self(
            values: (0..<count).map { index in
                operation(
                    index < lhs.values.count ? lhs.values[index] : 0,
                    index < rhs.values.count ? rhs.values[index] : 0
                )
            }
        )
    }
}

/// A shape that morphs smoothly between a square, a circle and a star when its form changes.
///
/// Every form is sampled at the same angles, so morphing is only interpolating distances.
nonisolated struct PolygonMorphShape: Shape {
    var radii: PolygonMorphShapeRadii

    init(form: PolygonMorphShapeForm) {
        radii = form.radii
    }

    var animatableData: PolygonMorphShapeRadii {
        get { radii }
        set { radii = newValue }
    }

    func path(in rect: CGRect) -> Path {
        let count = radii.values.count
        let scale = min(rect.width, rect.height) / 2
        guard count > 0, scale > 0 else { return Path() }

        var path = Path()
        for (index, radius) in radii.values.enumerated() {
            let angle = 2 * Double.pi * Double(index) / Double(count)
            let point = CGPoint(
                x: rect.midX + radius * scale * sin(angle),
                y: rect.midY - radius * scale * cos(angle)
            )
            if index == 0 {
                path.move(to: point)
            } else {
                path.addLine(to: point)
            }
        }
        path.closeSubpath()
        return path
    }
}

// MARK: - Demo

struct PolygonMorphShapeDemo: View {
    @State private var form = PolygonMorphShapeForm.square
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var nextForm: PolygonMorphShapeForm {
        let forms = PolygonMorphShapeForm.allCases
        let index = forms.firstIndex(of: form) ?? 0
        return forms[(index + 1) % forms.count]
    }

    var body: some View {
        VStack(spacing: 36) {
            PolygonMorphShape(form: form)
                .fill(LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
                .shadow(color: .pink.opacity(0.4), radius: 24, y: 12)
                .frame(maxWidth: 280, maxHeight: 280)
                .accessibilityElement()
                .accessibilityLabel(form.rawValue)

            ViewThatFits(in: .horizontal) {
                HStack(spacing: 10) { buttons }
                VStack(spacing: 10) { buttons }
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.purple.opacity(0.08).ignoresSafeArea())
        .animation(reduceMotion ? nil : .spring(duration: 0.9, bounce: 0.25), value: form)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }

            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled, isAutoPlaying else { return }
                form = nextForm
            }
        }
    }

    private var buttons: some View {
        ForEach(PolygonMorphShapeForm.allCases, id: \.self) { option in
            Button(option.rawValue) {
                isAutoPlaying = false
                form = option
            }
            .buttonStyle(.bordered)
            .tint(option == form ? .pink : .secondary)
            .accessibilityAddTraits(option == form ? .isSelected : [])
        }
    }
}

#Preview {
    PolygonMorphShapeDemo()
}
```

## Blurred Image Backdrop

A full-screen backdrop made from a blurred image with a tint layer, for placing content on top of it.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/BlurredImageBackdrop/BlurredImageBackdrop.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A full-screen backdrop made from a blurred image with a tint on top, for placing content over it.
///
/// It is decorative, so VoiceOver skips it.
struct BlurredImageBackdrop: View {
    let image: Image
    var blurRadius: CGFloat = 40
    var tint: Color = .black
    var tintOpacity: Double = 0.35

    var body: some View {
        Color.clear
            .overlay {
                image
                    .resizable()
                    .scaledToFill()
                    .blur(radius: max(blurRadius, 0), opaque: true)
            }
            .overlay(tint.opacity(min(max(tintOpacity, 0), 1)))
            .clipped()
            .ignoresSafeArea()
            .accessibilityRepresentation { EmptyView() }
    }
}

// MARK: - Demo

struct BlurredImageBackdropDemo: View {
    private struct Album {
        let title: String
        let artist: String
        let symbol: String
        let colors: [Color]

        var artwork: Image {
            Image(size: CGSize(width: 600, height: 600)) { context in
                let bounds = CGRect(x: 0, y: 0, width: 600, height: 600)
                context.fill(
                    Path(bounds),
                    with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: 600, y: 600))
                )

                var symbolImage = context.resolve(Image(systemName: symbol).resizable())
                symbolImage.shading = .color(.white.opacity(0.9))
                context.draw(symbolImage, in: bounds.insetBy(dx: 170, dy: 170))
            }
        }
    }

    private let albums = [
        Album(title: "Solar Tide", artist: "The Longwaves", symbol: "sun.haze.fill", colors: [.orange, .pink]),
        Album(title: "Night Forest", artist: "Moss & Ember", symbol: "leaf.fill", colors: [.teal, .indigo]),
        Album(title: "Violet Hours", artist: "Paper Planes", symbol: "moon.stars.fill", colors: [.purple, .blue]),
    ]

    @State private var index = 0
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var album: Album { albums[index] }

    var body: some View {
        ZStack {
            BlurredImageBackdrop(image: album.artwork)
                .id(index)
                .transition(.opacity)

            ScrollView {
                VStack(spacing: 24) {
                    album.artwork
                        .resizable()
                        .scaledToFit()
                        .frame(maxWidth: 260)
                        .clipShape(.rect(cornerRadius: 28))
                        .shadow(color: .black.opacity(0.35), radius: 24, y: 14)
                        .id(index)
                        .transition(.opacity)
                        .accessibilityHidden(true)

                    VStack(spacing: 4) {
                        Text(album.title)
                            .font(.system(.title, design: .rounded, weight: .bold))

                        Text(album.artist)
                            .font(.body)
                            .opacity(0.85)
                    }
                    .multilineTextAlignment(.center)

                    Button("Next album", systemImage: "forward.fill") {
                        isAutoPlaying = false
                        index = (index + 1) % albums.count
                    }
                    .buttonStyle(.bordered)
                }
                .foregroundStyle(.white)
                .padding(24)
                .frame(maxWidth: .infinity)
            }
            .defaultScrollAnchor(.center, for: .alignment)
            .tint(.white)
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.8), value: index)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }

            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.6))
                guard !Task.isCancelled, isAutoPlaying else { return }
                index = (index + 1) % albums.count
            }
        }
    }
}

#Preview {
    BlurredImageBackdropDemo()
}
```

## Border Beam Modifier

A light beam with a fading tail that travels continuously around a rounded border.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/BorderBeamModifier/BorderBeamModifier.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum BorderBeamModifierMath {
    /// How far around the border the beam's head is, from 0 up to 1.
    static func head(time: Double, duration: Double) -> Double {
        guard duration > 0, time.isFinite else { return 0 }
        return wrapped(time / duration)
    }

    /// The trim ranges that cover `start` to `end` on a closed path, in two parts across the seam.
    static func trims(from start: Double, to end: Double) -> [ClosedRange<Double>] {
        let from = wrapped(start)
        let to = wrapped(end)
        if from == to { return [] }
        if from < to { return [from...to] }
        return to > 0 ? [from...1, 0...to] : [from...1]
    }

    private static func wrapped(_ value: Double) -> Double {
        value - floor(value)
    }
}

/// A light beam that travels around a rounded border at a steady speed, with a fading tail.
///
/// With Reduce Motion on, the beam stays still.
struct BorderBeamModifier: ViewModifier {
    var cornerRadius: CGFloat = 20
    var lineWidth: CGFloat = 2
    var head: Color = .cyan
    var tail: Color = .purple
    var duration: Double = 3.5
    var length: Double = 0.3

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content.overlay {
            TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { timeline in
                let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate

                Canvas { context, size in
                    drawBeam(in: context, size: size, position: BorderBeamModifierMath.head(time: time, duration: duration))
                }
            }
            .allowsHitTesting(false)
            .accessibilityHidden(true)
        }
    }

    private func drawBeam(in context: GraphicsContext, size: CGSize, position: Double) {
        let width = max(lineWidth, 0)
        let rect = CGRect(origin: .zero, size: size).insetBy(dx: width / 2, dy: width / 2)
        let beam = min(max(length, 0), 1)
        guard width > 0, beam > 0, rect.width > 0, rect.height > 0 else { return }

        let radius = min(max(cornerRadius - width / 2, 0), min(rect.width, rect.height) / 2)
        let border = RoundedRectangle(cornerRadius: radius, style: .continuous).path(in: rect)

        let slices = 32
        var segments: [(path: Path, shading: GraphicsContext.Shading)] = []
        for slice in 0..<slices {
            let fraction = Double(slice + 1) / Double(slices)
            let start = position - beam * (1 - Double(slice) / Double(slices))
            let end = position - beam * (1 - fraction) + 0.001
            let shading = GraphicsContext.Shading.color(tail.mix(with: head, by: fraction).opacity(fraction))

            for trim in BorderBeamModifierMath.trims(from: start, to: end) {
                segments.append((border.trimmedPath(from: trim.lowerBound, to: trim.upperBound), shading))
            }
        }

        var glow = context
        glow.addFilter(.blur(radius: width * 2.5))
        glow.drawLayer { layer in
            for segment in segments {
                layer.stroke(segment.path, with: segment.shading, lineWidth: width * 2)
            }
        }

        for segment in segments {
            context.stroke(segment.path, with: segment.shading, lineWidth: width)
        }
    }
}

extension View {
    /// Sends a light beam around this view's border. Match `cornerRadius` to the view's shape.
    func borderBeam(
        cornerRadius: CGFloat = 20,
        lineWidth: CGFloat = 2,
        head: Color = .cyan,
        tail: Color = .purple,
        duration: Double = 3.5,
        length: Double = 0.3
    ) -> some View {
        modifier(
            BorderBeamModifier(
                cornerRadius: cornerRadius,
                lineWidth: lineWidth,
                head: head,
                tail: tail,
                duration: duration,
                length: length
            )
        )
    }
}

// MARK: - Demo

struct BorderBeamModifierDemo: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 32) {
                VStack(alignment: .leading, spacing: 12) {
                    Image(systemName: "bolt.fill")
                        .font(.title)
                        .foregroundStyle(.cyan)
                        .accessibilityHidden(true)

                    Text("Introducing Beam")
                        .font(.system(.title, design: .rounded, weight: .bold))

                    Text("A quiet way to draw the eye to what matters most on the screen.")
                        .font(.body)
                        .foregroundStyle(.white.opacity(0.7))
                }
                .foregroundStyle(.white)
                .padding(24)
                .frame(maxWidth: .infinity, alignment: .leading)
                .background(.white.opacity(0.07), in: .rect(cornerRadius: 28, style: .continuous))
                .borderBeam(cornerRadius: 28, lineWidth: 2.5)

                Text("Get early access")
                    .font(.headline)
                    .foregroundStyle(.white)
                    .padding(.horizontal, 28)
                    .padding(.vertical, 14)
                    .background(.white.opacity(0.07), in: .capsule)
                    .borderBeam(cornerRadius: 200, head: .orange, tail: .pink, duration: 2.5, length: 0.4)
            }
            .padding(24)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .background(Color(red: 0.05, green: 0.05, blue: 0.1).ignoresSafeArea())
    }
}

#Preview {
    BorderBeamModifierDemo()
}
```

## Chromatic Glitch Shader

A view modifier that breaks a view up like a bad signal: its colors come apart, bands jump sideways and scan lines cross it, drawn by a Metal shader.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ChromaticGlitchShaderMath {
    /// The farthest a color channel moves from its place, in points.
    static let split = 7.0
    /// The farthest a band moves sideways, in points.
    static let shift = 26.0

    static func clamped(_ amount: Double) -> Double {
        guard amount.isFinite else { return 0 }
        return min(max(amount, 0), 1)
    }

    /// How far from a point the shader reads, which SwiftUI has to know beforehand.
    static func reach(amount: Double) -> Double {
        (split + shift) * clamped(amount)
    }

    /// The function in `ChromaticGlitchShader.metal`, with its arguments in the order it declares them.
    static func shader(amount: Double, time: Double, bounds: CGSize) -> Shader {
        ShaderLibrary.ChromaticGlitchShaderSplit(.float(clamped(amount)), .float(time), .float(split), .float(shift), .float2(bounds))
    }
}

extension View {
    /// Breaks this view up like a bad signal, by a Metal shader: its colors come apart, some
    /// bands jump sideways and scan lines cross it. `amount` goes from 0, untouched, to 1, and
    /// animates.
    ///
    /// - Important: Copy two files into the same target: `ChromaticGlitchShader.swift` and `ChromaticGlitchShader.metal`.
    ///
    /// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map, shows a placeholder.
    ///
    /// The bands change ten times a second. With Reduce Motion on they stand still, and only
    /// the colors come apart. It only changes how the view looks, not what VoiceOver reads.
    func chromaticGlitch(_ amount: Double) -> some View {
        modifier(ChromaticGlitchShaderModifier(amount: amount))
    }
}

/// `Animatable`, so the shader gets every step of the change: a shader's arguments do not animate by themselves.
private struct ChromaticGlitchShaderModifier: ViewModifier, Animatable {
    var amount: Double

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    nonisolated var animatableData: Double {
        get { amount }
        set { amount = newValue }
    }

    func body(content: Content) -> some View {
        let strength = ChromaticGlitchShaderMath.clamped(amount)
        let reach = ChromaticGlitchShaderMath.reach(amount: strength)

        // The clock only runs while there is something to move.
        TimelineView(.animation(minimumInterval: 1 / 30, paused: reduceMotion || strength == 0)) { context in
            let time = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: 600)

            content
                // `visualEffect` gives the shader the size of the view, which it needs at the edges.
                .visualEffect { view, proxy in
                    view.layerEffect(
                        ChromaticGlitchShaderMath.shader(amount: strength, time: time, bounds: proxy.size),
                        maxSampleOffset: CGSize(width: reach, height: 0),
                        isEnabled: strength > 0
                    )
                }
        }
        // The first use of a shader waits for it to compile. Doing that now keeps the first frames smooth.
        .task {
            try? await ChromaticGlitchShaderMath.shader(amount: 1, time: 0, bounds: .zero).compile(as: .layerEffect)
        }
    }
}

// MARK: - Demo

struct ChromaticGlitchShaderDemo: View {
    @State private var amount = 0.0

    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 36) {
            VStack(spacing: 14) {
                Image(systemName: "antenna.radiowaves.left.and.right")
                    .font(.system(size: 64, weight: .semibold))
                    .accessibilityHidden(true)
                Text("SIGNAL LOST")
                    .font(.system(.largeTitle, design: .monospaced, weight: .heavy))
                Text("Reconnecting to channel 7")
                    .font(.system(.subheadline, design: .monospaced))
                    .opacity(0.7)
            }
            .foregroundStyle(.white)
            .padding(.vertical, 44)
            .frame(maxWidth: .infinity)
            .background(LinearGradient(colors: [.cyan, .blue, .purple], startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 28))
            .chromaticGlitch(amount)

            VStack(alignment: .leading, spacing: 6) {
                Text("Glitch")
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.white.opacity(0.7))
                Slider(value: $amount, in: 0...1)
                    .tint(.cyan)
                    .accessibilityLabel("Glitch")
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(red: 0.04, green: 0.04, blue: 0.09).ignoresSafeArea())
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task {
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(0.9))
                guard !Task.isCancelled, isAutoPlaying else { return }
                withAnimation(reduceMotion ? nil : .easeIn(duration: 0.25)) { amount = 1 }

                try? await Task.sleep(for: .seconds(1.1))
                guard !Task.isCancelled, isAutoPlaying else { return }
                withAnimation(reduceMotion ? nil : .easeOut(duration: 0.6)) { amount = 0 }
            }
        }
    }
}

#Preview {
    ChromaticGlitchShaderDemo()
}
```

Shader: Components/Effects/ChromaticGlitchShader/ChromaticGlitchShader.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// The color of the view at a point, or nothing outside it. Without this a band
// that moves past an edge would drag the last color of the view along with it.
static half4 ChromaticGlitchShaderSample(SwiftUI::Layer layer, float2 point, float2 bounds) {
    if (point.x < 0.0 || point.y < 0.0 || point.x > bounds.x || point.y > bounds.y) {
        return half4(0.0);
    }
    return layer.sample(point);
}

// For SwiftUI's `layerEffect`. Splits the view into its red, green and blue,
// each a little to one side, shifts some horizontal bands sideways and draws
// faint scan lines over it. `amount` goes from 0, which leaves the view as it
// is, to 1. `time` picks which bands are shifted, and they change `rate` times
// a second. `split` and `shift` are the farthest a channel and a band move, in
// points, and `bounds` is the size of the view.
[[ stitchable ]] half4 ChromaticGlitchShaderSplit(
    float2 position,
    SwiftUI::Layer layer,
    float amount,
    float time,
    float split,
    float shift,
    float2 bounds
) {
    if (amount <= 0.0) {
        return layer.sample(position);
    }

    float rate = 10.0;
    float band = floor(position.y / 22.0);
    float noise = fract(sin(band * 91.7 + floor(time * rate) * 37.3) * 43758.5453);
    float moved = noise > 0.7 ? (noise - 0.7) / 0.3 : 0.0;

    float direction = noise > 0.85 ? -1.0 : 1.0;

    float2 point = float2(position.x + moved * direction * shift * amount, position.y);
    float2 offset = float2(split * amount, 0.0);

    half4 red = ChromaticGlitchShaderSample(layer, point + offset, bounds);
    half4 green = ChromaticGlitchShaderSample(layer, point, bounds);
    half4 blue = ChromaticGlitchShaderSample(layer, point - offset, bounds);
    half4 color = half4(red.r, green.g, blue.b, max(max(red.a, green.a), blue.a));

    float lines = 1.0 - 0.14 * amount * step(0.5, fract(position.y / 3.0));
    color.rgb *= half(lines);
    return color;
}
```

## Coin Flip View

A coin that flips in 3D over several turns and lands on heads or tails.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/CoinFlipView/CoinFlipView.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum CoinFlipViewSide: String, CaseIterable, Hashable {
    case heads = "Heads"
    case tails = "Tails"

    var symbolName: String {
        switch self {
        case .heads: "crown.fill"
        case .tails: "leaf.fill"
        }
    }
}

enum CoinFlipViewMath {
    /// Heads faces the viewer on even half turns.
    static func visibleSide(at angle: Double) -> CoinFlipViewSide {
        cos(angle * .pi / 180) >= 0 ? .heads : .tails
    }

    /// An angle at least `turns` full turns ahead that rests on the landing side.
    static func targetAngle(from angle: Double, landing: CoinFlipViewSide, turns: Int) -> Double {
        let halfTurns = (angle / 180).rounded()
        let target = halfTurns * 180 + Double(min(max(turns, 1), 100)) * 360
        return visibleSide(at: target) == landing ? target : target + 180
    }
}

/// A coin that flips in 3D over several turns and lands on heads or tails. Tap it to flip.
///
/// A tap during a flip is ignored, so each flip reports one result.
/// With Reduce Motion on, the coin shows the result at once.
struct CoinFlipView: View {
    @Binding var side: CoinFlipViewSide
    var size: CGFloat = 180
    var turns: Int = 5
    var onLanded: ((CoinFlipViewSide) -> Void)?

    @State private var angle: Double
    @State private var isFlipping = false
    @State private var flipCount = 0
    @State private var landedCount = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let flipDuration = 1.5

    init(
        side: Binding<CoinFlipViewSide>,
        size: CGFloat = 180,
        turns: Int = 5,
        onLanded: ((CoinFlipViewSide) -> Void)? = nil
    ) {
        _side = side
        self.size = size
        self.turns = turns
        self.onLanded = onLanded
        _angle = State(initialValue: side.wrappedValue == .heads ? 0 : 180)
    }

    private var diameter: CGFloat { max(size, 1) }

    var body: some View {
        Button(action: flip) {
            CoinFlipViewCoin(angle: angle, diameter: diameter)
                .keyframeAnimator(initialValue: 0.0, trigger: flipCount) { [diameter] coin, height in
                    coin.offset(y: -height * diameter * 1.1)
                } keyframes: { _ in
                    CubicKeyframe(1, duration: 0.65)
                    CubicKeyframe(0, duration: 0.85)
                }
        }
        .buttonStyle(.plain)
        .accessibilityLabel("Flip coin")
        .accessibilityValue(side.rawValue)
        .sensoryFeedback(.impact(weight: .medium), trigger: landedCount)
        .onChange(of: side) { _, newSide in
            guard !isFlipping, CoinFlipViewMath.visibleSide(at: angle) != newSide else { return }
            angle += 180
        }
    }

    private func flip() {
        guard !isFlipping else { return }

        let landing = CoinFlipViewSide.allCases.randomElement() ?? .heads
        let target = CoinFlipViewMath.targetAngle(from: angle, landing: landing, turns: turns)

        guard !reduceMotion else {
            angle = target
            land(on: landing)
            return
        }

        isFlipping = true
        flipCount += 1
        withAnimation(.timingCurve(0.2, 0.7, 0.3, 1, duration: flipDuration)) {
            angle = target
        } completion: {
            land(on: landing)
        }
    }

    private func land(on landing: CoinFlipViewSide) {
        isFlipping = false
        side = landing
        landedCount += 1
        onLanded?(landing)
    }
}

/// Animatable so its body runs on every frame and can swap the face at the edge-on moment.
private struct CoinFlipViewCoin: View, Animatable {
    var angle: Double
    let diameter: CGFloat

    nonisolated var animatableData: Double {
        get { angle }
        set { angle = newValue }
    }

    var body: some View {
        let visible = CoinFlipViewMath.visibleSide(at: angle)

        face(visible)
            .rotation3DEffect(.degrees(visible == .heads ? 0 : 180), axis: (x: 1, y: 0, z: 0))
            .rotation3DEffect(.degrees(angle), axis: (x: 1, y: 0, z: 0), perspective: 0.4)
    }

    private func face(_ side: CoinFlipViewSide) -> some View {
        ZStack {
            Circle()
                .fill(
                    LinearGradient(
                        colors: [Color(red: 1, green: 0.86, blue: 0.45), Color(red: 0.85, green: 0.58, blue: 0.13)],
                        startPoint: .topLeading,
                        endPoint: .bottomTrailing
                    )
                )

            Circle()
                .strokeBorder(.white.opacity(0.5), lineWidth: diameter * 0.03)
                .padding(diameter * 0.07)

            Image(systemName: side.symbolName)
                .font(.system(size: diameter * 0.38, weight: .bold))
                .foregroundStyle(Color(red: 0.55, green: 0.33, blue: 0.05))
        }
        .frame(width: diameter, height: diameter)
        .shadow(color: .black.opacity(0.25), radius: 12, y: 8)
    }
}

// MARK: - Demo

struct CoinFlipViewDemo: View {
    @State private var side = CoinFlipViewSide.heads
    @State private var flips = 0

    var body: some View {
        ScrollView {
            VStack(spacing: 40) {
                Text("Tap the coin")
                    .font(.system(.title, design: .rounded, weight: .bold))

                CoinFlipView(side: $side) { _ in
                    flips += 1
                }
                .padding(.top, 180)

                VStack(spacing: 4) {
                    Text(flips == 0 ? "Ready" : side.rawValue)
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("Flips: \(flips)")
                        .font(.body)
                        .foregroundStyle(.secondary)
                }
            }
            .padding(24)
            .frame(maxWidth: .infinity)
        }
        .defaultScrollAnchor(.center, for: .alignment)
        .background(
            LinearGradient(colors: [.yellow.opacity(0.18), .orange.opacity(0.12)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
        )
    }
}

#Preview {
    CoinFlipViewDemo()
}
```

## Color Reveal Image

A black and white image that gains its color as it scrolls toward the middle or when tapped.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/ColorRevealImage/ColorRevealImage.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ColorRevealImageMath {
    /// Full color near the middle of the scroll view, fading to none toward its edges.
    static func saturation(distanceFromCenter distance: CGFloat, viewportHeight: CGFloat) -> Double {
        guard viewportHeight > 0, distance.isFinite else { return 0 }

        let clearZone = viewportHeight * 0.12
        let fade = viewportHeight * 0.3
        return Double(min(max(1 - (abs(distance) - clearZone) / fade, 0), 1))
    }
}

/// A black and white image that gains its color as it nears the middle of a scroll view.
/// Tapping it shows the full color until tapped again.
///
/// Outside a scroll view it stays black and white until tapped. With Reduce Motion
/// on, a tap changes it at once. Scrolling still fades the color, which adds no movement.
struct ColorRevealImage: View {
    let image: Image
    let title: LocalizedStringResource
    var aspectRatio: CGFloat = 4.0 / 3.0
    var cornerRadius: CGFloat = 24

    @State private var isRevealed = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button {
            withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.5)) {
                isRevealed.toggle()
            }
        } label: {
            Color.clear
                .aspectRatio(aspectRatio > 0 ? aspectRatio : 1, contentMode: .fit)
                .overlay {
                    ZStack {
                        image
                            .resizable()
                            .scaledToFill()
                            .visualEffect { effect, proxy in
                                let viewport = proxy.bounds(of: .scrollView(axis: .vertical))
                                let distance = (viewport?.midY ?? 0) - proxy.size.height / 2

                                return effect.saturation(
                                    ColorRevealImageMath.saturation(
                                        distanceFromCenter: distance,
                                        viewportHeight: viewport?.height ?? 0
                                    )
                                )
                            }

                        image
                            .resizable()
                            .scaledToFill()
                            .opacity(isRevealed ? 1 : 0)
                    }
                    // The button already reads the title, so the images add nothing to VoiceOver.
                    .accessibilityRepresentation { EmptyView() }
                }
                .clipShape(.rect(cornerRadius: max(cornerRadius, 0), style: .continuous))
                .contentShape(.rect(cornerRadius: max(cornerRadius, 0), style: .continuous))
        }
        .buttonStyle(.plain)
        .accessibilityLabel(title)
        .accessibilityValue(isRevealed ? "In full color" : "Color follows scrolling")
    }
}

// MARK: - Demo

struct ColorRevealImageDemo: View {
    private struct Photo: Identifiable {
        let title: String
        let symbol: String
        let colors: [Color]

        var id: String { title }

        var image: Image {
            Image(size: CGSize(width: 800, height: 600)) { context in
                let bounds = CGRect(x: 0, y: 0, width: 800, height: 600)
                context.fill(
                    Path(bounds),
                    with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: 800, y: 600))
                )

                var symbolImage = context.resolve(Image(systemName: symbol).resizable())
                symbolImage.shading = .color(.white.opacity(0.85))
                context.draw(symbolImage, in: bounds.insetBy(dx: 290, dy: 190))
            }
        }
    }

    private let photos = [
        Photo(title: "Dunes", symbol: "sun.max.fill", colors: [.orange, .red]),
        Photo(title: "Forest", symbol: "tree.fill", colors: [.green, .teal]),
        Photo(title: "Lagoon", symbol: "water.waves", colors: [.cyan, .blue]),
        Photo(title: "Harbor", symbol: "sailboat.fill", colors: [.indigo, .pink]),
        Photo(title: "Meadow", symbol: "camera.macro", colors: [.yellow, .green]),
        Photo(title: "Canyon", symbol: "mountain.2.fill", colors: [.pink, .orange]),
    ]

    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                Text("Gallery")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .frame(maxWidth: .infinity, alignment: .leading)

                ForEach(photos) { photo in
                    ColorRevealImage(image: photo.image, title: "\(photo.title)")
                }
            }
            .padding(24)
        }
    }
}

#Preview {
    ColorRevealImageDemo()
}
```

## Confetti Burst

A one-shot confetti burst with simple physics, fired by changing a trigger.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/ConfettiBurst/ConfettiBurst.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Fires a one-shot burst of confetti every time `trigger` changes.
///
/// With Reduce Motion on, the pieces appear scattered and fade out without moving.
struct ConfettiBurst: ViewModifier {
    var trigger: Int
    var count: Int = 120
    /// Where the burst starts, as a fraction of the view.
    var origin: UnitPoint = UnitPoint(x: 0.5, y: 0.68)
    var colors: [Color] = [.pink, .yellow, .mint, .cyan, .orange, .purple]
    var lifetime: Double = 3

    @State private var start: Date?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let motion = ConfettiBurstMotion()
    private static let pieceWidth: CGFloat = 8

    func body(content: Content) -> some View {
        content
            .overlay {
                TimelineView(.animation(paused: start == nil)) { timeline in
                    Canvas { context, size in
                        guard let start else { return }
                        draw(elapsed: timeline.date.timeIntervalSince(start), in: context, size: size)
                    }
                }
                .ignoresSafeArea()
                .allowsHitTesting(false)
                .accessibilityHidden(true)
            }
            .onChange(of: trigger) { start = .now }
            .task(id: start) {
                guard start != nil else { return }
                try? await Task.sleep(for: .seconds(lifetime))
                if !Task.isCancelled { start = nil }
            }
    }

    private func draw(elapsed: Double, in context: GraphicsContext, size: CGSize) {
        guard elapsed < lifetime, !colors.isEmpty else { return }

        let time = reduceMotion ? 0.6 : elapsed
        let fade = min((lifetime - elapsed) / (lifetime * 0.3), 1)

        for index in 0..<count {
            let offset = Self.motion.offset(
                // Two random values added together cluster the pieces around straight up.
                angle: (noise(index, 1) + noise(index, 7) - 1) * 0.9,
                speed: 500 + noise(index, 2) * 1900,
                at: time
            )

            var piece = context
            piece.opacity = fade
            piece.translateBy(x: origin.x * size.width + offset.x, y: origin.y * size.height + offset.y)
            piece.rotate(by: .radians(time * (noise(index, 3) * 8 - 4) + noise(index, 4) * 2 * .pi))
            piece.scaleBy(x: cos(time * (4 + noise(index, 5) * 8) + noise(index, 6) * 2 * .pi), y: 1)

            let color = GraphicsContext.Shading.color(colors[index % colors.count])
            if index.isMultiple(of: 3) {
                piece.fill(Path(ellipseIn: CGRect(x: -Self.pieceWidth / 2, y: -Self.pieceWidth / 2, width: Self.pieceWidth, height: Self.pieceWidth)), with: color)
            } else {
                piece.fill(Path(CGRect(x: -Self.pieceWidth / 2, y: -6.5, width: Self.pieceWidth, height: 13)), with: color)
            }
        }
    }

    /// A repeatable pseudo-random value in 0..<1, different for each burst.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + (salt + Double(trigger) * 0.37) * 311.7) * 43758.5453
        return value - floor(value)
    }
}

/// The flight of one piece: thrown from the origin, slowed by air and pulled down by gravity.
struct ConfettiBurstMotion {
    /// Points per second squared.
    var gravity: Double = 900
    /// How quickly air slows a piece, per second.
    var drag: Double = 2.6

    /// The offset from the origin, with y growing downward.
    /// - Parameters:
    ///   - angle: The launch direction in radians: 0 is straight up, positive leans right.
    ///   - speed: The launch speed in points per second.
    ///   - time: The seconds since launch.
    func offset(angle: Double, speed: Double, at time: Double) -> CGPoint {
        let time = max(time, 0)
        let drag = max(drag, 0.001)
        let travelled = (1 - exp(-drag * time)) / drag

        return CGPoint(
            x: sin(angle) * speed * travelled,
            y: -cos(angle) * speed * travelled + gravity / drag * (time - travelled)
        )
    }
}

extension View {
    /// Fires a one-shot burst of confetti over this view every time `trigger` changes.
    func confettiBurst(trigger: Int, count: Int = 120, origin: UnitPoint = UnitPoint(x: 0.5, y: 0.68)) -> some View {
        modifier(ConfettiBurst(trigger: trigger, count: count, origin: origin))
    }
}

// MARK: - Demo

struct ConfettiBurstDemo: View {
    @State private var bursts = 0

    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.13, green: 0.09, blue: 0.33), Color(red: 0.36, green: 0.13, blue: 0.45)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            VStack(spacing: 14) {
                Spacer()

                Image(systemName: "trophy.fill")
                    .font(.system(.largeTitle, weight: .bold))
                    .foregroundStyle(.yellow)
                    .accessibilityHidden(true)
                Text("You Did It")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .foregroundStyle(.white)

                Spacer()

                Button("Celebrate") { bursts += 1 }
                    .font(.headline)
                    .buttonStyle(.borderedProminent)
                    .controlSize(.large)
                    .tint(.pink)
                    .padding(.bottom, 32)
            }
        }
        .confettiBurst(trigger: bursts)
        .task {
            try? await Task.sleep(for: .seconds(0.3))
            bursts += 1
        }
    }
}

#Preview {
    ConfettiBurstDemo()
}
```

## Fireworks Burst

Rockets that climb to where you tap and explode into particle sparks.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/FireworksBurst/FireworksBurst.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum FireworksBurstMath {
    enum Stage: Equatable {
        case climbing(Double)
        case bursting(Double)
        case finished
    }

    static let climbDuration = 0.65
    static let burstDuration = 1.5
    static var lifetime: Double { climbDuration + burstDuration }

    /// Where a rocket is in its life. Without a climb, it bursts as soon as it is launched.
    static func stage(elapsed: Double, skipsClimb: Bool = false) -> Stage {
        let afterClimb = skipsClimb ? max(elapsed, 0) : elapsed - climbDuration

        if !skipsClimb, afterClimb < 0 {
            return .climbing(min(max(elapsed / climbDuration, 0), 1))
        }
        return afterClimb < burstDuration ? .bursting(afterClimb / burstDuration) : .finished
    }

    /// A spark races outward, slows down and then droops under gravity.
    static func sparkOffset(angle: Double, speed: CGFloat, progress: Double) -> CGSize {
        let travel = speed * (1 - pow(1 - progress, 3))
        return CGSize(
            width: travel * cos(angle),
            height: travel * sin(angle) + 70 * progress * progress
        )
    }
}

private struct FireworksBurstSpark {
    let angle: Double
    let speed: CGFloat
    let size: CGFloat
}

private struct FireworksBurstRocket: Identifiable {
    let id = UUID()
    let launchDate: Date
    let start: CGPoint
    let target: CGPoint
    let color: Color
    let sparks: [FireworksBurstSpark]
}

/// Rockets that climb to where you tap and explode into sparks.
///
/// With Reduce Motion on, each burst appears in place and fades without moving.
struct FireworksBurst: View {
    var sparkCount: Int = 64
    var colors: [Color] = [.pink, .orange, .yellow, .mint, .cyan, .purple]

    @State private var rockets: [FireworksBurstRocket] = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let maximumRockets = 12

    var body: some View {
        GeometryReader { proxy in
            TimelineView(.animation(paused: rockets.isEmpty)) { timeline in
                Canvas { context, _ in
                    context.blendMode = .plusLighter
                    for rocket in rockets {
                        draw(rocket, at: timeline.date, in: context)
                    }
                }
            }
            .contentShape(.rect)
            .gesture(
                SpatialTapGesture().onEnded { launch(to: $0.location, groundY: proxy.size.height) }
            )
            .accessibilityElement()
            .accessibilityLabel("Night sky")
            .accessibilityHint("Launches a firework")
            .accessibilityAddTraits(.isButton)
            .accessibilityAction {
                launch(to: CGPoint(x: proxy.size.width / 2, y: proxy.size.height / 3), groundY: proxy.size.height)
            }
        }
        .task(id: rockets.last?.id) {
            guard !rockets.isEmpty else { return }

            try? await Task.sleep(for: .seconds(FireworksBurstMath.lifetime + 0.1))
            guard !Task.isCancelled else { return }

            let now = Date.now
            rockets.removeAll { now.timeIntervalSince($0.launchDate) >= FireworksBurstMath.lifetime }
        }
    }

    private func launch(to target: CGPoint, groundY: CGFloat) {
        let count = min(max(sparkCount, 1), 300)
        let sparks = (0..<count).map { index in
            FireworksBurstSpark(
                angle: Double(index) / Double(count) * 2 * .pi + .random(in: -0.08...0.08),
                speed: .random(in: 70...170),
                size: .random(in: 1.5...3.5)
            )
        }

        rockets.append(
            FireworksBurstRocket(
                launchDate: .now,
                start: CGPoint(x: target.x + .random(in: -24...24), y: groundY),
                target: target,
                color: colors.randomElement() ?? .white,
                sparks: sparks
            )
        )
        if rockets.count > maximumRockets {
            rockets.removeFirst(rockets.count - maximumRockets)
        }
    }

    private func draw(_ rocket: FireworksBurstRocket, at date: Date, in context: GraphicsContext) {
        let elapsed = date.timeIntervalSince(rocket.launchDate)

        switch FireworksBurstMath.stage(elapsed: elapsed, skipsClimb: reduceMotion) {
        case .climbing(let progress):
            let eased = 1 - (1 - progress) * (1 - progress)
            let head = CGPoint(
                x: rocket.start.x + (rocket.target.x - rocket.start.x) * eased,
                y: rocket.start.y + (rocket.target.y - rocket.start.y) * eased
            )
            var trail = Path()
            trail.move(to: CGPoint(x: head.x, y: head.y + 26))
            trail.addLine(to: head)
            context.stroke(trail, with: .color(.white.opacity(0.8)), style: StrokeStyle(lineWidth: 2.5, lineCap: .round))

        case .bursting(let progress):
            let shading = GraphicsContext.Shading.color(rocket.color.opacity(1 - progress))
            for spark in rocket.sparks {
                let shown = reduceMotion ? 0.8 : progress
                let offset = FireworksBurstMath.sparkOffset(angle: spark.angle, speed: spark.speed, progress: shown)
                let center = CGPoint(x: rocket.target.x + offset.width, y: rocket.target.y + offset.height)
                let dot = CGRect(x: center.x - spark.size / 2, y: center.y - spark.size / 2, width: spark.size, height: spark.size)
                context.fill(Path(ellipseIn: dot), with: shading)
            }

        case .finished:
            break
        }
    }
}

// MARK: - Demo

struct FireworksBurstDemo: View {
    var body: some View {
        ZStack(alignment: .top) {
            LinearGradient(
                colors: [Color(red: 0.03, green: 0.03, blue: 0.14), Color(red: 0.13, green: 0.07, blue: 0.3)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            FireworksBurst()
                .ignoresSafeArea()

            Text("Tap the sky")
                .font(.system(.title2, design: .rounded, weight: .semibold))
                .foregroundStyle(.white.opacity(0.75))
                .padding(.top, 24)
                .allowsHitTesting(false)
                .accessibilityHidden(true)
        }
    }
}

#Preview {
    FireworksBurstDemo()
}
```

## Floating Reactions Emitter

Emoji that float up from the tap point with a random drift and fade out.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/FloatingReactionsEmitter/FloatingReactionsEmitter.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum FloatingReactionsEmitterMath {
    /// How far a reaction has moved from its origin, weaving side to side as it rises.
    static func offset(progress: Double, rise: CGFloat, drift: CGFloat, swayPhase: Double) -> CGSize {
        let clamped = min(max(progress, 0), 1)
        let sway = sin(clamped * 3 * .pi + swayPhase) * 16 * clamped
        return CGSize(width: drift * clamped + sway, height: -rise * clamped)
    }

    /// Solid for most of the way, then fading out.
    static func opacity(progress: Double) -> Double {
        let clamped = min(max(progress, 0), 1)
        return clamped < 0.6 ? 1 : (1 - clamped) / 0.4
    }

    static func scale(progress: Double) -> Double {
        0.4 + 0.6 * min(max(progress, 0) / 0.15, 1)
    }
}

private struct FloatingReactionsEmitterReaction: Identifiable {
    let id = UUID()
    let emoji: String
    let origin: CGPoint
    let start: Date
    let drift: CGFloat
    let swayPhase: Double
}

/// Wraps content so that a tap sends an emoji floating up from that point.
///
/// With Reduce Motion on, the emoji stays where it was tapped and fades out.
struct FloatingReactionsEmitter<Content: View>: View {
    var emojis: [String] = ["❤️", "🔥", "👏", "😂", "🎉"]
    var lifetime: Double = 1.8
    var rise: CGFloat = 320
    @ViewBuilder var content: () -> Content

    @State private var reactions: [FloatingReactionsEmitterReaction] = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let maximumReactions = 40
    private var duration: Double { lifetime > 0 ? lifetime : 1 }

    var body: some View {
        GeometryReader { proxy in
            content()
                .frame(width: proxy.size.width, height: proxy.size.height)
                .contentShape(.rect)
                .gesture(SpatialTapGesture().onEnded { value in
                    // Gestures report screen points, but `position` mirrors in right-to-left layouts.
                    let x = layoutDirection == .rightToLeft ? proxy.size.width - value.location.x : value.location.x
                    emit(from: CGPoint(x: x, y: value.location.y))
                })
                .overlay {
                    TimelineView(.animation(paused: reactions.isEmpty)) { timeline in
                        ZStack {
                            ForEach(reactions) { reaction in
                                bubble(for: reaction, at: timeline.date)
                            }
                        }
                    }
                    .allowsHitTesting(false)
                    .accessibilityHidden(true)
                }
                .overlay(alignment: .bottom) {
                    Color.clear
                        .frame(height: 44)
                        .allowsHitTesting(false)
                        .accessibilityElement()
                        .accessibilityLabel("Send reaction")
                        .accessibilityAddTraits(.isButton)
                        .accessibilityAction {
                            emit(from: CGPoint(x: proxy.size.width / 2, y: proxy.size.height * 0.75))
                        }
                }
        }
        .task(id: reactions.last?.id) {
            guard !reactions.isEmpty else { return }

            try? await Task.sleep(for: .seconds(duration + 0.1))
            guard !Task.isCancelled else { return }

            let now = Date.now
            reactions.removeAll { now.timeIntervalSince($0.start) >= duration }
        }
    }

    private func bubble(for reaction: FloatingReactionsEmitterReaction, at date: Date) -> some View {
        let progress = date.timeIntervalSince(reaction.start) / duration
        let offset = reduceMotion
            ? .zero
            : FloatingReactionsEmitterMath.offset(progress: progress, rise: rise, drift: reaction.drift, swayPhase: reaction.swayPhase)

        return Text(reaction.emoji)
            .font(.largeTitle)
            .scaleEffect(reduceMotion ? 1 : FloatingReactionsEmitterMath.scale(progress: progress))
            .opacity(FloatingReactionsEmitterMath.opacity(progress: progress))
            .position(x: reaction.origin.x + offset.width, y: reaction.origin.y + offset.height)
    }

    private func emit(from location: CGPoint) {
        guard let emoji = emojis.randomElement() else { return }

        reactions.append(
            FloatingReactionsEmitterReaction(
                emoji: emoji,
                origin: location,
                start: .now,
                drift: .random(in: -70...70),
                swayPhase: .random(in: 0...(2 * .pi))
            )
        )
        if reactions.count > maximumReactions {
            reactions.removeFirst(reactions.count - maximumReactions)
        }
    }
}

// MARK: - Demo

struct FloatingReactionsEmitterDemo: View {
    var body: some View {
        FloatingReactionsEmitter {
            ZStack {
                LinearGradient(colors: [.purple, .pink, .orange], startPoint: .top, endPoint: .bottom)

                VStack(spacing: 14) {
                    Image(systemName: "dot.radiowaves.left.and.right")
                        .font(.largeTitle)
                        .accessibilityHidden(true)

                    Text("Live now")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("Tap anywhere to react")
                        .font(.body)
                        .opacity(0.85)
                }
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .padding(24)
            }
        }
        .ignoresSafeArea()
    }
}

#Preview {
    FloatingReactionsEmitterDemo()
}
```

## Flow Field Particles

Particles that drift along a smooth field of angles computed from position and time.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/FlowFieldParticles/FlowFieldParticles.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Particles that drift along a smooth field of angles.
///
/// Every frame is computed from the time alone, so there is no state to keep.
/// With Reduce Motion on, it draws one still frame. It looks best on a dark background.
struct FlowFieldParticles: View {
    var count = 260
    var colors: [Color] = [.cyan, .indigo, .pink]
    var speed = 1.0

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            let time = reduceMotion ? 8 : context.date.timeIntervalSinceReferenceDate * max(speed, 0)

            Canvas { canvas, size in
                canvas.blendMode = .plusLighter
                let palette = colors.isEmpty ? [Color.white] : colors
                for index in 0..<FlowFieldParticlesMath.clampedCount(count) {
                    let streak = FlowFieldParticlesMath.streak(index: index, time: time, size: size)
                    guard !streak.points.isEmpty else { continue }

                    var path = Path()
                    path.addLines(streak.points)
                    canvas.stroke(
                        path,
                        with: .color(palette[index % palette.count].opacity(streak.opacity)),
                        style: StrokeStyle(lineWidth: 1.5, lineCap: .round, lineJoin: .round)
                    )
                }
            }
        }
        .accessibilityHidden(true)
    }
}

struct FlowFieldParticlesStreak {
    var points: [CGPoint]
    var opacity: Double
}

enum FlowFieldParticlesMath {
    static func clampedCount(_ count: Int) -> Int {
        min(max(count, 0), 2_000)
    }

    /// The part of `value` after the decimal point, always in `0..<1`.
    static func fraction(_ value: Double) -> Double {
        guard value.isFinite else { return 0 }
        let part = value - floor(value)
        return part < 1 ? part : 0
    }

    /// The direction of the flow, in radians, at a point of the canvas.
    static func angle(x: Double, y: Double, time: Double) -> Double {
        let across = sin(x * 0.007 + time * 0.13) + cos(y * 0.009 - time * 0.11)
        let diagonal = sin((x + y) * 0.004 + time * 0.07)
        return (across + diagonal) * .pi * 0.7
    }

    /// Follows the field from where a particle was born to where it is now, and keeps its tail.
    static func streak(
        index: Int,
        time: Double,
        size: CGSize,
        steps: Int = 24,
        trail: Int = 8
    ) -> FlowFieldParticlesStreak {
        guard size.width > 0, size.height > 0, steps > 0, trail > 0 else {
            return FlowFieldParticlesStreak(points: [], opacity: 0)
        }

        let seed = Double(index)
        let lifetime = 3 + fraction(seed * 0.317) * 3
        let clock = time / lifetime + fraction(seed * 0.131)
        let age = fraction(clock)
        let generation = clock.isFinite ? floor(clock) : 0

        let margin = 60.0
        var x = fraction(0.5 + seed * 0.754_877 + generation * 0.37) * (size.width + margin * 2) - margin
        var y = fraction(0.5 + seed * 0.569_840 + generation * 0.61) * (size.height + margin * 2) - margin
        let stepLength = age * 150 / Double(steps)

        var points: [CGPoint] = []
        points.reserveCapacity(min(trail, steps) + 1)
        for step in 0...steps {
            if step >= steps - trail {
                points.append(CGPoint(x: x, y: y))
            }
            let direction = angle(x: x, y: y, time: time)
            x += cos(direction) * stepLength
            y += sin(direction) * stepLength
        }
        return FlowFieldParticlesStreak(points: points, opacity: sin(age * .pi) * 0.9)
    }
}

// MARK: - Demo

struct FlowFieldParticlesDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.03, green: 0.02, blue: 0.1), .black],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            FlowFieldParticles(count: 420)
                .ignoresSafeArea()

            Text("Flow Field")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
                .shadow(color: .black.opacity(0.7), radius: 12)
        }
    }
}

#Preview {
    FlowFieldParticlesDemo()
}
```

## Globe 3D Wireframe

A wireframe globe drawn on a Canvas that spins by itself and turns and tilts as the finger drags it.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/Globe3DWireframe/Globe3DWireframe.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct Globe3DWireframePin {
    var latitude: Double
    var longitude: Double
}

/// A wireframe globe drawn on a Canvas. Drag it to spin and tilt it.
///
/// With Reduce Motion on, it stops spinning by itself and only moves with the finger.
struct Globe3DWireframe: View {
    var meridians = 12
    var parallels = 7
    var color: Color = .cyan
    var pins: [Globe3DWireframePin] = []
    var autoRotates = true
    var label = "Globe"

    @State private var yaw = 0.0
    @State private var pitch = 0.35
    @GestureState private var drag = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let radiansPerPoint = 0.008
    private var isSpinning: Bool { autoRotates && !reduceMotion }

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: !isSpinning)) { context in
            let spin = isSpinning ? context.date.timeIntervalSinceReferenceDate * 0.35 : 0
            let currentYaw = yaw + spin + drag.width * radiansPerPoint
            let currentPitch = Globe3DWireframeMath.clampedPitch(pitch + drag.height * radiansPerPoint)

            Canvas { canvas, size in
                let radius = min(size.width, size.height) / 2 * 0.94
                guard radius > 0 else { return }
                let center = CGPoint(x: size.width / 2, y: size.height / 2)
                let disc = Path(ellipseIn: CGRect(
                    x: center.x - radius,
                    y: center.y - radius,
                    width: radius * 2,
                    height: radius * 2
                ))
                let wires = Globe3DWireframeMath.wires(
                    meridians: meridians,
                    parallels: parallels,
                    yaw: currentYaw,
                    pitch: currentPitch,
                    center: center,
                    radius: radius
                )
                let lineWidth = max(0.6, radius * 0.006)

                canvas.stroke(wires.back, with: .color(color.opacity(0.18)), lineWidth: lineWidth)
                canvas.fill(disc, with: .radialGradient(
                    Gradient(colors: [color.opacity(0.22), color.opacity(0.04)]),
                    center: CGPoint(x: center.x - radius * 0.3, y: center.y - radius * 0.3),
                    startRadius: 0,
                    endRadius: radius * 1.3
                ))
                canvas.stroke(wires.front, with: .color(color.opacity(0.85)), lineWidth: lineWidth)
                canvas.stroke(disc, with: .color(color.opacity(0.6)), lineWidth: lineWidth * 1.5)

                for pin in pins {
                    let point = Globe3DWireframeMath.project(
                        latitude: pin.latitude,
                        longitude: pin.longitude,
                        yaw: currentYaw,
                        pitch: currentPitch
                    )
                    guard point.z > 0 else { continue }
                    let screen = CGPoint(x: center.x + point.x * radius, y: center.y - point.y * radius)
                    let glow = radius * 0.05
                    let dot = radius * 0.018
                    canvas.fill(
                        Path(ellipseIn: CGRect(x: screen.x - glow, y: screen.y - glow, width: glow * 2, height: glow * 2)),
                        with: .color(.white.opacity(0.25))
                    )
                    canvas.fill(
                        Path(ellipseIn: CGRect(x: screen.x - dot, y: screen.y - dot, width: dot * 2, height: dot * 2)),
                        with: .color(.white)
                    )
                }
            }
        }
        .aspectRatio(1, contentMode: .fit)
        .contentShape(.circle)
        .gesture(
            DragGesture(minimumDistance: 4)
                .updating($drag) { value, state, _ in
                    state = value.translation
                }
                .onEnded { value in
                    yaw += value.translation.width * radiansPerPoint
                    pitch = Globe3DWireframeMath.clampedPitch(pitch + value.translation.height * radiansPerPoint)
                }
        )
        .accessibilityElement()
        .accessibilityLabel(label)
        .accessibilityValue("Rotated \(Globe3DWireframeMath.degrees(yaw)) degrees")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: yaw += .pi / 12
            case .decrement: yaw -= .pi / 12
            @unknown default: break
            }
        }
    }
}

enum Globe3DWireframeMath {
    struct Point {
        var x: Double
        var y: Double
        var z: Double
    }

    static let maximumPitch = 1.4

    static func clampedPitch(_ pitch: Double) -> Double {
        min(max(pitch, -maximumPitch), maximumPitch)
    }

    /// The rotation as a whole number of degrees from 0 to 359.
    static func degrees(_ radians: Double) -> Int {
        guard radians.isFinite else { return 0 }
        let degrees = (radians * 180 / .pi).truncatingRemainder(dividingBy: 360)
        return (Int(degrees.rounded()) + 360) % 360
    }

    /// Turns a point of the sphere around its axis, then tilts the sphere toward the viewer.
    /// `x` points right, `y` points up and `z` points at the viewer.
    static func project(latitude: Double, longitude: Double, yaw: Double, pitch: Double) -> Point {
        let lat = latitude * .pi / 180
        let lon = longitude * .pi / 180 + yaw
        let x = cos(lat) * sin(lon)
        let y = sin(lat)
        let z = cos(lat) * cos(lon)
        return Point(x: x, y: y * cos(pitch) - z * sin(pitch), z: y * sin(pitch) + z * cos(pitch))
    }

    /// The globe's lines, split into the half that faces the viewer and the half behind it.
    static func wires(
        meridians: Int,
        parallels: Int,
        yaw: Double,
        pitch: Double,
        center: CGPoint,
        radius: Double
    ) -> (front: Path, back: Path) {
        var front = Path()
        var back = Path()

        func addLine(samples: Int, coordinate: (Double) -> (latitude: Double, longitude: Double)) {
            var previous: Point?
            for sample in 0...samples {
                let position = coordinate(Double(sample) / Double(samples))
                let point = project(latitude: position.latitude, longitude: position.longitude, yaw: yaw, pitch: pitch)
                if let previous {
                    let start = CGPoint(x: center.x + previous.x * radius, y: center.y - previous.y * radius)
                    let end = CGPoint(x: center.x + point.x * radius, y: center.y - point.y * radius)
                    if previous.z + point.z >= 0 {
                        front.move(to: start)
                        front.addLine(to: end)
                    } else {
                        back.move(to: start)
                        back.addLine(to: end)
                    }
                }
                previous = point
            }
        }

        let meridianCount = min(max(meridians, 0), 90)
        for index in 0..<meridianCount {
            let longitude = 360 * Double(index) / Double(meridianCount)
            addLine(samples: 40) { (latitude: -90 + 180 * $0, longitude: longitude) }
        }

        let parallelCount = min(max(parallels, 0), 90)
        for index in 0..<parallelCount {
            let latitude = -90 + 180 * Double(index + 1) / Double(parallelCount + 1)
            addLine(samples: 72) { (latitude: latitude, longitude: 360 * $0) }
        }
        return (front, back)
    }
}

// MARK: - Demo

struct Globe3DWireframeDemo: View {
    private let cities = [
        Globe3DWireframePin(latitude: 40.4, longitude: -3.7),
        Globe3DWireframePin(latitude: 35.7, longitude: 139.7),
        Globe3DWireframePin(latitude: -33.9, longitude: 151.2),
        Globe3DWireframePin(latitude: 40.7, longitude: -74),
        Globe3DWireframePin(latitude: -23.5, longitude: -46.6),
        Globe3DWireframePin(latitude: -1.3, longitude: 36.8),
    ]

    var body: some View {
        ZStack {
            RadialGradient(
                colors: [Color(red: 0.05, green: 0.12, blue: 0.25), .black],
                center: .center,
                startRadius: 40,
                endRadius: 520
            )
            .ignoresSafeArea()

            Globe3DWireframe(pins: cities)
                .padding(24)

            VStack {
                Text("Drag to spin and tilt")
                    .font(.headline)
                    .foregroundStyle(.white.opacity(0.75))
                    .padding(.top, 24)
                Spacer()
            }
        }
    }
}

#Preview {
    Globe3DWireframeDemo()
}
```

## Intelligence Glow Border

A soft band of color that travels around a view's edge and spreads inward, like an assistant that is listening.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/IntelligenceGlowBorder/IntelligenceGlowBorder.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum IntelligenceGlowBorderMath {
    /// The mesh is 3 by 3: four corners, four edge points and a center.
    static let side = 3

    /// The points on the border in the order the colors travel, as indices into the mesh.
    static let perimeter = [0, 1, 2, 5, 8, 7, 6, 3]

    /// How far around the border the colors have travelled, from 0 up to 1.
    static func phase(time: Double, period: Double) -> Double {
        guard period > 0, time.isFinite else { return 0 }
        return wrapped(time / period)
    }

    /// The two colors of a palette of `count` that meet at `position`, and how much of the second one shows.
    /// The palette is a loop, so the last color blends back into the first.
    static func blend(at position: Double, count: Int) -> (lower: Int, upper: Int, fraction: Double) {
        guard count > 1, position.isFinite else { return (0, 0, 0) }

        let scaled = wrapped(position) * Double(count)
        let lower = min(Int(scaled), count - 1)
        return (lower, (lower + 1) % count, scaled - Double(lower))
    }

    /// Corners stay put and edge points slide along their edge, so the mesh always covers the border.
    static func points(phase: Double) -> [SIMD2<Float>] {
        func slide(_ offset: Double) -> Double {
            0.5 + sin((phase + offset) * 2 * .pi) * 0.16
        }

        let positions: [(Double, Double)] = [
            (0, 0), (slide(0), 0), (1, 0),
            (0, slide(0.75)), (0.5, 0.5), (1, slide(0.25)),
            (0, 1), (slide(0.5), 1), (1, 1),
        ]
        return positions.map { SIMD2(Float($0.0), Float($0.1)) }
    }

    private static func wrapped(_ value: Double) -> Double {
        value - floor(value)
    }
}

/// A soft band of moving color around the edge of a view, like the glow of an assistant that is listening.
///
/// The colors travel around the border and the light spreads inward. With Reduce Motion on, the
/// glow is still.
struct IntelligenceGlowBorder: ViewModifier {
    var isActive = true
    var cornerRadius: CGFloat = 28
    var lineWidth: CGFloat = 3
    var colors: [Color] = [.purple, .pink, .orange, .yellow, .cyan, .blue]
    /// Seconds for the colors to travel once around the border.
    var period: Double = 6

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .overlay {
                if isActive {
                    TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
                        let time = context.date.timeIntervalSinceReferenceDate
                        glow(phase: reduceMotion ? 0 : IntelligenceGlowBorderMath.phase(time: time, period: period))
                    }
                    .allowsHitTesting(false)
                    .accessibilityHidden(true)
                    .transition(.opacity)
                }
            }
            .animation(reduceMotion ? nil : .easeInOut(duration: 0.6), value: isActive)
    }

    private func glow(phase: Double) -> some View {
        let width = max(lineWidth, 0)
        let shape = RoundedRectangle(cornerRadius: max(cornerRadius, 0), style: .continuous)

        return MeshGradient(
            width: IntelligenceGlowBorderMath.side,
            height: IntelligenceGlowBorderMath.side,
            points: IntelligenceGlowBorderMath.points(phase: phase),
            colors: meshColors(phase: phase)
        )
        .mask {
            // A crisp line at the edge, and two wider and softer ones that carry the light inward.
            ZStack {
                shape.strokeBorder(lineWidth: width)
                shape.strokeBorder(lineWidth: width * 3).blur(radius: width * 2)
                shape.strokeBorder(lineWidth: width * 7).blur(radius: width * 5).opacity(0.7)
            }
        }
        // The blur also spreads outward, where the view's square frame would cut it in a straight line.
        .clipShape(shape)
    }

    /// The palette laid around the border, moved on by `phase`.
    private func meshColors(phase: Double) -> [Color] {
        let palette = colors.isEmpty ? [Color.accentColor] : colors
        let perimeter = IntelligenceGlowBorderMath.perimeter
        var mesh = Array(repeating: palette[0], count: IntelligenceGlowBorderMath.side * IntelligenceGlowBorderMath.side)

        for (step, index) in perimeter.enumerated() {
            let position = Double(step) / Double(perimeter.count) - phase
            let blend = IntelligenceGlowBorderMath.blend(at: position, count: palette.count)
            mesh[index] = palette[blend.lower].mix(with: palette[blend.upper], by: blend.fraction)
        }
        return mesh
    }
}

extension View {
    /// Draws a moving glow around this view's edge while `isActive` is true. Match `cornerRadius` to the view's shape.
    func intelligenceGlowBorder(isActive: Bool = true, cornerRadius: CGFloat = 28, lineWidth: CGFloat = 3) -> some View {
        modifier(IntelligenceGlowBorder(isActive: isActive, cornerRadius: cornerRadius, lineWidth: lineWidth))
    }
}

// MARK: - Demo

struct IntelligenceGlowBorderDemo: View {
    @State private var isListening = true

    var body: some View {
        VStack(spacing: 28) {
            VStack(alignment: .leading, spacing: 14) {
                Label(isListening ? "Listening" : "Ask anything", systemImage: "sparkles")
                    .font(.headline)
                    .foregroundStyle(.white.opacity(0.7))

                Text("Plan a weekend in Lisbon with two museums and somewhere good for dinner.")
                    .font(.title3.weight(.semibold))
                    .foregroundStyle(.white)
            }
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.white.opacity(0.08), in: .rect(cornerRadius: 32, style: .continuous))
            .intelligenceGlowBorder(isActive: isListening, cornerRadius: 32)

            Button(isListening ? "Stop" : "Start listening", systemImage: isListening ? "stop.fill" : "mic.fill") {
                isListening.toggle()
            }
            .buttonStyle(.borderedProminent)
            .tint(.white.opacity(0.18))
            .controlSize(.large)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(red: 0.04, green: 0.04, blue: 0.09).ignoresSafeArea())
    }
}

#Preview {
    IntelligenceGlowBorderDemo()
}
```

## Jiggle Edit Modifier

A view modifier that makes views wobble slightly, like app icons in edit mode.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/JiggleEditModifier/JiggleEditModifier.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

extension View {
    /// Wobbles the view, like an app icon in edit mode.
    ///
    /// Give each view a different `seed` so they do not move in step.
    func jiggleEditing(_ isActive: Bool, amplitude: Double = 2.4, seed: Int = 0) -> some View {
        modifier(JiggleEditModifier(isActive: isActive, amplitude: amplitude, seed: seed))
    }
}

/// With Reduce Motion on, the view stays still.
struct JiggleEditModifier: ViewModifier {
    var isActive: Bool
    var amplitude: Double
    var seed: Int

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isJiggling: Bool { isActive && !reduceMotion }

    func body(content: Content) -> some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: !isJiggling)) { context in
            let phase = context.date.timeIntervalSinceReferenceDate * 22 + Double(seed) * 2.4

            content
                .rotationEffect(.degrees(isJiggling ? sin(phase) * amplitude : 0))
                .offset(y: isJiggling ? cos(phase * 0.9) * 0.6 : 0)
                .animation(.easeOut(duration: 0.2), value: isJiggling)
        }
    }
}

// MARK: - Demo

private struct JiggleEditDemoApp: Identifiable {
    let id: String
    let systemImage: String
    let colors: [Color]
}

struct JiggleEditModifierDemo: View {
    private static let allApps = [
        JiggleEditDemoApp(id: "Mail", systemImage: "envelope.fill", colors: [.cyan, .blue]),
        JiggleEditDemoApp(id: "Music", systemImage: "music.note", colors: [.pink, .red]),
        JiggleEditDemoApp(id: "Photos", systemImage: "camera.macro", colors: [.yellow, .orange]),
        JiggleEditDemoApp(id: "Maps", systemImage: "map.fill", colors: [.mint, .green]),
        JiggleEditDemoApp(id: "Notes", systemImage: "note.text", colors: [.yellow, .brown]),
        JiggleEditDemoApp(id: "Clock", systemImage: "clock.fill", colors: [.gray, .black]),
        JiggleEditDemoApp(id: "Health", systemImage: "heart.fill", colors: [.red, .pink]),
        JiggleEditDemoApp(id: "Files", systemImage: "folder.fill", colors: [.blue, .indigo]),
        JiggleEditDemoApp(id: "Books", systemImage: "book.fill", colors: [.orange, .red]),
        JiggleEditDemoApp(id: "Wallet", systemImage: "wallet.pass.fill", colors: [.indigo, .black]),
        JiggleEditDemoApp(id: "Home", systemImage: "house.fill", colors: [.orange, .yellow]),
        JiggleEditDemoApp(id: "Weather", systemImage: "cloud.sun.fill", colors: [.teal, .blue]),
    ]

    @State private var apps = Self.allApps
    @State private var isEditing = true
    @ScaledMetric(relativeTo: .caption) private var iconSize = 66.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var columns: [GridItem] { [GridItem(.adaptive(minimum: iconSize + 10), spacing: 16)] }
    private var animation: Animation? { reduceMotion ? nil : .snappy }

    var body: some View {
        ZStack(alignment: .top) {
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            ScrollView {
                VStack(spacing: 28) {
                    HStack {
                        Button {
                            withAnimation(animation) { apps = Self.allApps }
                        } label: {
                            touchTarget(Text("Reset"))
                        }
                        Spacer()
                        Button {
                            isEditing.toggle()
                        } label: {
                            touchTarget(Text(isEditing ? "Done" : "Edit"))
                        }
                        .fontWeight(.bold)
                    }
                    .font(.headline)
                    .foregroundStyle(.white)

                    LazyVGrid(columns: columns, spacing: 24) {
                        ForEach(Array(apps.enumerated()), id: \.element.id) { index, app in
                            icon(for: app)
                                // Its place in the full list, so removing an icon does not change the rhythm of the rest.
                                .jiggleEditing(isEditing, seed: Self.allApps.firstIndex { $0.id == app.id } ?? index)
                        }
                    }
                }
                .padding(20)
            }
        }
    }

    /// Widens what answers to a touch around something small, without moving the layout.
    private func touchTarget(_ content: some View) -> some View {
        content
            .padding(12)
            .contentShape(.rect)
            .padding(-12)
    }

    private func icon(for app: JiggleEditDemoApp) -> some View {
        VStack(spacing: 6) {
            RoundedRectangle(cornerRadius: iconSize * 0.23, style: .continuous)
                .fill(LinearGradient(colors: app.colors, startPoint: .top, endPoint: .bottom))
                .frame(width: iconSize, height: iconSize)
                .overlay {
                    Image(systemName: app.systemImage)
                        .font(.title)
                        .foregroundStyle(.white)
                        .accessibilityHidden(true)
                }
                .overlay(alignment: .topLeading) {
                    if isEditing {
                        Button {
                            withAnimation(animation) { apps.removeAll { $0.id == app.id } }
                        } label: {
                            touchTarget(
                                Image(systemName: "minus.circle.fill")
                                    .font(.title3)
                                    .symbolRenderingMode(.palette)
                                    .foregroundStyle(.white, .black.opacity(0.7))
                            )
                        }
                        .accessibilityLabel("Remove \(app.id)")
                        .offset(x: -8, y: -8)
                    }
                }

            Text(app.id)
                .font(.caption)
                .foregroundStyle(.white)
                .lineLimit(1)
        }
    }
}

#Preview {
    JiggleEditModifierDemo()
}
```

## Metaball Lava Lamp

Round blobs that merge and separate like a lava lamp, drawn with a blur and alpha threshold on a Canvas.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/MetaballLavaLamp/MetaballLavaLamp.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Round blobs that merge and separate like a lava lamp.
///
/// The blobs are blurred and then cut at half their opacity, so two blobs that
/// touch join with a smooth neck. With Reduce Motion on, it shows a still frame.
struct MetaballLavaLamp: View {
    var blobCount = 7
    var colors: [Color] = [.red, .orange, .yellow]
    var speed = 1.0

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        LinearGradient(colors: colors.isEmpty ? [.orange] : colors, startPoint: .bottom, endPoint: .top)
            .mask {
                TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
                    let time = reduceMotion ? 12 : context.date.timeIntervalSinceReferenceDate * max(speed, 0)

                    Canvas { canvas, size in
                        let side = min(size.width, size.height)
                        guard side > 0 else { return }

                        canvas.addFilter(.alphaThreshold(min: 0.5, color: .white))
                        canvas.addFilter(.blur(radius: max(1, side * 0.05)))
                        canvas.drawLayer { layer in
                            for blob in MetaballLavaLampMath.blobs(count: blobCount, time: time, size: size) {
                                layer.fill(Path(ellipseIn: blob), with: .color(.white))
                            }
                        }
                    }
                }
            }
            .accessibilityHidden(true)
    }
}

enum MetaballLavaLampMath {
    /// The frames of the rising blobs, plus a pool of wax at the top and at the bottom.
    static func blobs(count: Int, time: Double, size: CGSize) -> [CGRect] {
        guard size.width > 0, size.height > 0 else { return [] }
        let width = size.width
        let height = size.height

        var frames = [
            CGRect(x: -width * 0.1, y: height * 0.9, width: width * 1.2, height: height * 0.25),
            CGRect(x: -width * 0.1, y: -height * 0.17, width: width * 1.2, height: height * 0.25),
        ]

        for index in 0..<min(max(count, 0), 48) {
            let seed = Double(index)
            let radius = width * (0.1 + 0.09 * unit(seed * 0.618 + 0.2))
            let rate = 0.28 + 0.2 * unit(seed * 0.37 + 0.5)
            let x = width * (0.5 + 0.32 * sin(time * 0.21 + seed * 1.7))
            let y = height * (0.5 + 0.47 * sin(time * rate + seed * 2.4))
            frames.append(CGRect(x: x - radius, y: y - radius, width: radius * 2, height: radius * 2))
        }
        return frames
    }

    /// A smooth value from 0 to 1 that differs from one blob to the next.
    private static func unit(_ value: Double) -> Double {
        (sin(value * 12.9) + 1) / 2
    }
}

// MARK: - Demo

struct MetaballLavaLampDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [Color(red: 0.22, green: 0.03, blue: 0.3), Color(red: 0.07, green: 0.02, blue: 0.16)],
                startPoint: .top,
                endPoint: .bottom
            )

            MetaballLavaLamp(blobCount: 9, colors: [.red, .orange, .pink], speed: 1.6)
        }
        .ignoresSafeArea()
    }
}

#Preview {
    MetaballLavaLampDemo()
}
```

## Noise Grain Overlay

A view modifier that lays a subtle animated film grain over any view.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/NoiseGrainOverlay/NoiseGrainOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A subtle film grain over any view: tiny light and dark specks redrawn a few times a second.
///
/// With Reduce Motion on, the grain is still.
struct NoiseGrainOverlay: ViewModifier {
    var intensity: Double = 0.16
    var grainSize: Double = 1.25
    var framesPerSecond: Double = 12

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// A tiny seeded generator: the same frame number always gives the same grain.
    private struct Generator: RandomNumberGenerator {
        var state: UInt64

        mutating func next() -> UInt64 {
            state ^= state << 13
            state ^= state >> 7
            state ^= state << 17
            return state
        }
    }

    func body(content: Content) -> some View {
        content.overlay {
            TimelineView(.animation(minimumInterval: 1 / framesPerSecond, paused: reduceMotion)) { timeline in
                Canvas { context, size in
                    let frame = reduceMotion ? 0 : UInt64(timeline.date.timeIntervalSinceReferenceDate * framesPerSecond)
                    drawGrain(frame: frame, in: context, size: size)
                }
            }
            .allowsHitTesting(false)
            .accessibilityHidden(true)
        }
    }

    /// Every speck goes into one of two paths, so a frame is only two fills.
    private func drawGrain(frame: UInt64, in context: GraphicsContext, size: CGSize) {
        var generator = Generator(state: (frame &+ 1) &* 0x9E37_79B9_7F4A_7C15)
        var light = Path()
        var dark = Path()

        for index in 0..<min(Int(size.width * size.height / 18), 20_000) {
            let speck = CGRect(
                x: Double.random(in: 0..<max(size.width, 1), using: &generator),
                y: Double.random(in: 0..<max(size.height, 1), using: &generator),
                width: grainSize,
                height: grainSize
            )
            if index.isMultiple(of: 2) {
                light.addRect(speck)
            } else {
                dark.addRect(speck)
            }
        }

        context.fill(light, with: .color(.white.opacity(intensity)))
        context.fill(dark, with: .color(.black.opacity(intensity)))
    }
}

extension View {
    /// Adds a subtle animated film grain on top of this view.
    func noiseGrainOverlay(intensity: Double = 0.16, grainSize: Double = 1.25) -> some View {
        modifier(NoiseGrainOverlay(intensity: intensity, grainSize: grainSize))
    }
}

// MARK: - Demo

struct NoiseGrainOverlayDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange, .pink, .indigo], startPoint: .topLeading, endPoint: .bottomTrailing)
                .noiseGrainOverlay(intensity: 0.22)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 10) {
                Image(systemName: "film")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("Golden Hour")
                    .font(.system(.title, design: .serif, weight: .bold))
                Text("Grain takes the digital edge off flat color.")
                    .font(.subheadline)
                    .foregroundStyle(.white.opacity(0.85))
            }
            .foregroundStyle(.white)
            .padding(24)
            .frame(maxWidth: .infinity, minHeight: 260, alignment: .bottomLeading)
            .background(Color(red: 0.16, green: 0.12, blue: 0.3))
            .noiseGrainOverlay(intensity: 0.15)
            .clipShape(.rect(cornerRadius: 28))
            .shadow(color: .black.opacity(0.35), radius: 24, y: 12)
            .padding(28)
        }
    }
}

#Preview {
    NoiseGrainOverlayDemo()
}
```

## Pixelate Shader Effect

A view modifier that draws a view in big square blocks, like a spoiler, and brings it into focus as they shrink, drawn by a Metal shader.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/PixelateShaderEffect/PixelateShaderEffect.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum PixelateShaderEffectMath {
    /// The side of the blocks for an amount of pixelation: one point, which changes nothing, at
    /// 0, and `maximum` at 1.
    static func blockSize(amount: Double, maximum: Double) -> Double {
        guard amount.isFinite else { return 1 }
        return 1 + (max(maximum, 1) - 1) * min(max(amount, 0), 1)
    }

    /// The center of the block a point falls in, which gives its color to the whole block.
    /// The shader does the same sum.
    static func blockCenter(of point: CGPoint, size: Double) -> CGPoint {
        guard size > 1 else { return point }
        return CGPoint(x: ((point.x / size).rounded(.down) + 0.5) * size, y: ((point.y / size).rounded(.down) + 0.5) * size)
    }

    /// The function in `PixelateShaderEffect.metal`, with its arguments in the order it declares them.
    static func shader(size: Double, bounds: CGSize) -> Shader {
        ShaderLibrary.PixelateShaderEffectBlocks(.float(size), .float2(bounds))
    }
}

extension View {
    /// Draws this view in big square blocks, like a censored picture, by a Metal shader.
    /// `amount` goes from 0, untouched, to 1, in blocks of `blockSize` points, and animates:
    /// the blocks shrink until the view comes into focus.
    ///
    /// - Important: Copy two files into the same target: `PixelateShaderEffect.swift` and `PixelateShaderEffect.metal`.
    ///
    /// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map, shows a placeholder.
    ///
    /// It only changes how the view looks: hide it from VoiceOver yourself while it is a secret.
    /// With Reduce Motion on, the view goes from blocks to sharp in one step.
    func pixelate(_ amount: Double, blockSize: CGFloat = 22) -> some View {
        modifier(PixelateShaderEffectModifier(amount: amount, blockSize: blockSize))
    }
}

/// `Animatable`, so the shader gets every step of the change: a shader's arguments do not animate by themselves.
private struct PixelateShaderEffectModifier: ViewModifier, Animatable {
    var amount: Double
    let blockSize: CGFloat

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    nonisolated var animatableData: Double {
        get { amount }
        set { amount = newValue }
    }

    func body(content: Content) -> some View {
        // With Reduce Motion the blocks do not shrink step by step: they are there or they are not.
        let shown = reduceMotion ? (amount > 0.5 ? 1 : 0) : amount
        let size = PixelateShaderEffectMath.blockSize(amount: shown, maximum: blockSize)

        content
            // `visualEffect` gives the shader the size of the view, which it needs at the edges.
            .visualEffect { view, proxy in
                view.layerEffect(
                    PixelateShaderEffectMath.shader(size: size, bounds: proxy.size),
                    maxSampleOffset: CGSize(width: size, height: size),
                    isEnabled: size > 1
                )
            }
            // The first use of a shader waits for it to compile. Doing that now keeps the first frames smooth.
            .task {
                try? await PixelateShaderEffectMath.shader(size: blockSize, bounds: .zero).compile(as: .layerEffect)
            }
    }
}

// MARK: - Demo

struct PixelateShaderEffectDemo: View {
    @State private var isHidden = true

    var body: some View {
        VStack(spacing: 24) {
            VStack(alignment: .leading, spacing: 10) {
                ZStack {
                    LinearGradient(colors: [.indigo, .purple, .orange], startPoint: .topLeading, endPoint: .bottomTrailing)
                    Image(systemName: "trophy.fill")
                        .font(.system(size: 84))
                        .foregroundStyle(.yellow.gradient)
                        .shadow(radius: 8)
                }
                .frame(height: 220)
                .clipShape(.rect(cornerRadius: 18))

                Text("Season finale")
                    .font(.title2.bold())
                Text("Rivera wins the final in the last minute, after trailing for the whole second half.")
                    .font(.body)
                    .foregroundStyle(.secondary)
            }
            .padding(16)
            .background(.background, in: .rect(cornerRadius: 26))
            .pixelate(isHidden ? 1 : 0)
            .accessibilityElement(children: .combine)
            .accessibilityHidden(isHidden)

            Button(isHidden ? "Reveal Spoiler" : "Hide Again", systemImage: isHidden ? "eye.fill" : "eye.slash.fill") {
                withAnimation(.easeInOut(duration: 0.8)) { isHidden.toggle() }
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }
}

#Preview {
    PixelateShaderEffectDemo()
}
```

Shader: Components/Effects/PixelateShaderEffect/PixelateShaderEffect.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// For SwiftUI's `layerEffect`. Draws the view in square blocks of `size`
// points, each one in the color of the point at its center. A block that
// sticks out of the view, which is `bounds` in size, takes the color of the
// last point inside, so the edges are not cut. A size of one point or less
// leaves the view as it is.
[[ stitchable ]] half4 PixelateShaderEffectBlocks(
    float2 position,
    SwiftUI::Layer layer,
    float size,
    float2 bounds
) {
    if (size <= 1.0) {
        return layer.sample(position);
    }
    float2 center = (floor(position / size) + 0.5) * size;
    return layer.sample(min(center, bounds - 0.5));
}
```

## Progressive Blur Header

A blur that grows toward the top edge of a scroll view, drawn by a Metal shader, so what scrolls under a header melts away.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ProgressiveBlurHeaderMath {
    /// How much of the blur a point gets at a distance from the top edge: all of it at the edge
    /// and none from `height` down, along the same smooth curve the shader uses.
    static func strength(at distance: Double, height: Double) -> Double {
        guard height > 0, distance.isFinite else { return 0 }
        let share = min(max(distance / height, 0), 1)
        return 1 - share * share * (3 - 2 * share)
    }

    /// The function in `ProgressiveBlurHeader.metal`, with its arguments in the order it declares them.
    static func shader(top: Double, height: Double, radius: Double, isHorizontal: Bool) -> Shader {
        ShaderLibrary.ProgressiveBlurHeaderPass(
            .float(top),
            .float(max(height, 0)),
            .float(max(radius, 0)),
            .float2(isHorizontal ? 1 : 0, isHorizontal ? 0 : 1)
        )
    }
}

extension View {
    /// Blurs this view more and more toward the top edge of the scroll view it is in, drawn by a
    /// Metal shader, so what scrolls under a header melts away instead of meeting a hard bar.
    /// Put it on the content of a `ScrollView`, not on the scroll view.
    ///
    /// - Important: Copy two files into the same target: `ProgressiveBlurHeader.swift` and `ProgressiveBlurHeader.metal`.
    ///
    /// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map or the
    /// scroll view itself, comes out empty.
    ///
    /// With Reduce Transparency on, the content is left sharp.
    func progressiveBlurHeader(height: CGFloat = 130, radius: CGFloat = 14) -> some View {
        modifier(ProgressiveBlurHeaderModifier(height: height, radius: radius))
    }
}

private struct ProgressiveBlurHeaderModifier: ViewModifier {
    let height: CGFloat
    let radius: CGFloat

    @Environment(\.accessibilityReduceTransparency) private var reduceTransparency

    func body(content: Content) -> some View {
        content
            // `visualEffect` knows where the content is in the scroll view on every frame, with no state to update.
            .visualEffect { [height, radius, reduceTransparency] view, proxy in
                // The line of the content that sits at the top edge of the scroll view.
                let top = -proxy.frame(in: .scrollView(axis: .vertical)).minY

                return view
                    .layerEffect(
                        ProgressiveBlurHeaderMath.shader(top: top, height: height, radius: radius, isHorizontal: true),
                        maxSampleOffset: CGSize(width: radius, height: 0),
                        isEnabled: !reduceTransparency
                    )
                    .layerEffect(
                        ProgressiveBlurHeaderMath.shader(top: top, height: height, radius: radius, isHorizontal: false),
                        maxSampleOffset: CGSize(width: 0, height: radius),
                        isEnabled: !reduceTransparency
                    )
            }
            // The first use of a shader waits for it to compile. Doing that now keeps the first frames smooth.
            .task {
                try? await ProgressiveBlurHeaderMath.shader(top: 0, height: height, radius: radius, isHorizontal: true).compile(as: .layerEffect)
            }
    }
}

// MARK: - Demo

struct ProgressiveBlurHeaderDemo: View {
    private let entries: [(title: String, text: String, colors: [Color])] = [
        ("Morning Light", "The harbor before the boats go out.", [.orange, .pink]),
        ("Slow Roads", "Three days with no highway in sight.", [.teal, .blue]),
        ("Market Day", "Peaches, noise and a very loud rooster.", [.yellow, .orange]),
        ("High Tide", "A beach that is only there at noon.", [.cyan, .indigo]),
        ("Old Stones", "A wall that outlived the town it kept.", [.gray, .brown]),
        ("Night Train", "Twelve hours, one window, no hurry.", [.indigo, .purple]),
    ]

    var body: some View {
        ScrollView {
            LazyVStack(spacing: 16) {
                ForEach(entries, id: \.title) { entry in
                    VStack(alignment: .leading, spacing: 6) {
                        Spacer()
                        Text(entry.title)
                            .font(.title2.bold())
                        Text(entry.text)
                            .font(.subheadline)
                    }
                    .foregroundStyle(.white)
                    .padding(18)
                    .frame(maxWidth: .infinity, minHeight: 170, alignment: .leading)
                    .background(LinearGradient(colors: entry.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 22))
                    .accessibilityElement(children: .combine)
                }
            }
            .padding(.horizontal, 16)
            .padding(.top, 130)
            .progressiveBlurHeader()
        }
        .ignoresSafeArea(edges: .top)
        .overlay(alignment: .top) {
            HStack {
                Text("Journal")
                    .font(.largeTitle.bold())
                Spacer()
                Image(systemName: "square.and.pencil")
                    .font(.title2)
                    .accessibilityLabel("New entry")
            }
            .padding(.horizontal, 20)
            .padding(.top, 4)
            .padding(.bottom, 44)
            .background {
                // A veil over the blur keeps the title readable whatever scrolls under it.
                LinearGradient(colors: [Color(.systemBackground).opacity(0.9), Color(.systemBackground).opacity(0)], startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea(edges: .top)
                    .allowsHitTesting(false)
            }
        }
        .background(Color(.systemBackground))
    }
}

#Preview {
    ProgressiveBlurHeaderDemo()
}
```

Shader: Components/Effects/ProgressiveBlurHeader/ProgressiveBlurHeader.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// For SwiftUI's `layerEffect`. Blurs along `direction` with a reach that is
// `radius` at `top`, the line where the header starts, and falls smoothly to
// nothing `height` points below it. One pass across and one pass down make
// the whole blur, with far fewer samples than doing both at once.
[[ stitchable ]] half4 ProgressiveBlurHeaderPass(
    float2 position,
    SwiftUI::Layer layer,
    float top,
    float height,
    float radius,
    float2 direction
) {
    float reach = radius * (1.0 - smoothstep(0.0, height, position.y - top));
    if (reach < 0.5) {
        return layer.sample(position);
    }

    // Samples spread over the reach, weighted like a bell so the middle counts most.
    const int steps = 8;
    half4 total = half4(0.0);
    float weights = 0.0;
    for (int step = -steps; step <= steps; step++) {
        float offset = float(step) / float(steps);
        float weight = exp(-2.0 * offset * offset);
        total += layer.sample(position + direction * offset * reach) * half(weight);
        weights += weight;
    }
    return total / half(weights);
}
```

## Ripple Shader Effect

A view modifier that sends a wave from the tapped point and bends the view as it passes, drawn by a Metal shader.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/RippleShaderEffect/RippleShaderEffect.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Where a wave is at one instant: how far its crest has travelled and how strong it still is.
nonisolated struct RippleShaderEffectWave: Equatable {
    var radius = 0.0
    var strength = 0.0

    /// The same wave held at its origin. With no bending either, all it leaves is a light that fades.
    var still: RippleShaderEffectWave {
        RippleShaderEffectWave(radius: 0, strength: strength)
    }
}

nonisolated enum RippleShaderEffectMath {
    /// How far a wave from `origin` travels until all of it has left a view of `size`.
    static func reach(from origin: CGPoint, in size: CGSize, wavelength: Double) -> Double {
        let horizontal = max(abs(origin.x), abs(size.width - origin.x))
        let vertical = max(abs(origin.y), abs(size.height - origin.y))
        return hypot(horizontal, vertical) + max(wavelength, 0)
    }

    /// The seconds a wave takes to cover `reach` points. A wave that cannot move lasts one frame.
    static func travelTime(reach: Double, speed: Double) -> Double {
        let frame = 1.0 / 60.0
        guard speed > 0, reach.isFinite else { return frame }
        return max(reach / speed, frame)
    }

    /// The function in `RippleShaderEffect.metal`, with its arguments in the order it declares them.
    static func shader(wave: RippleShaderEffectWave, origin: CGPoint, amplitude: Double, wavelength: Double) -> Shader {
        ShaderLibrary.RippleShaderEffectDistortion(
            .boundingRect,
            .float2(origin),
            .float(wave.radius),
            .float(wave.strength),
            .float(amplitude),
            .float(max(wavelength, 1))
        )
    }
}

/// A wave that spreads from a point and bends the view as it passes, drawn by a Metal shader.
///
/// - Important: Copy two files into the same target: `RippleShaderEffect.swift` and `RippleShaderEffect.metal`.
///
/// `.rippleShaderEffect()` starts a wave wherever the view is tapped, and
/// `.rippleShaderEffect(at:trigger:)` starts one from code.
/// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map, shows a placeholder.
///
/// With Reduce Motion on, a soft light fades where the wave would start, and nothing moves.
struct RippleShaderEffect<Trigger: Equatable & Sendable>: ViewModifier {
    /// Where the wave starts, in the view's own coordinates.
    var origin: CGPoint
    var trigger: Trigger
    /// How many points the wave moves what is under it.
    var amplitude: Double = 10
    /// The width of the wave, in points.
    var wavelength: Double = 110
    /// Points per second.
    var speed: Double = 650

    @State private var size = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        let origin = origin
        let amplitude = amplitude
        let wavelength = wavelength
        let reduceMotion = reduceMotion
        let reach = RippleShaderEffectMath.reach(from: origin, in: size, wavelength: wavelength)
        let travel = RippleShaderEffectMath.travelTime(reach: reach, speed: speed)

        content
            .onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
            .keyframeAnimator(initialValue: RippleShaderEffectWave(), trigger: trigger) { view, wave in
                view.layerEffect(
                    RippleShaderEffectMath.shader(
                        wave: reduceMotion ? wave.still : wave,
                        origin: origin,
                        amplitude: reduceMotion ? 0 : amplitude,
                        wavelength: wavelength
                    ),
                    maxSampleOffset: CGSize(width: abs(amplitude), height: abs(amplitude)),
                    isEnabled: wave.strength > 0
                )
            } keyframes: { _ in
                KeyframeTrack(\.radius) {
                    MoveKeyframe(0)
                    LinearKeyframe(reach, duration: travel)
                }
                KeyframeTrack(\.strength) {
                    MoveKeyframe(1)
                    LinearKeyframe(1, duration: travel * 0.35)
                    CubicKeyframe(0, duration: travel * 0.65)
                }
            }
            // The first use of a shader waits for it to compile. Doing that now keeps the first wave on time.
            .task {
                let shader = RippleShaderEffectMath.shader(wave: RippleShaderEffectWave(), origin: .zero, amplitude: 0, wavelength: 1)
                try? await shader.compile(as: .layerEffect)
            }
    }
}

private struct RippleShaderEffectOnTap: ViewModifier {
    let amplitude: Double
    let wavelength: Double
    let speed: Double

    @State private var origin = CGPoint.zero
    @State private var taps = 0

    func body(content: Content) -> some View {
        content
            .modifier(RippleShaderEffect(origin: origin, trigger: taps, amplitude: amplitude, wavelength: wavelength, speed: speed))
            .contentShape(.rect)
            .simultaneousGesture(
                SpatialTapGesture().onEnded { tap in
                    origin = tap.location
                    taps += 1
                }
            )
    }
}

extension View {
    /// Starts a wave wherever this view is tapped, without blocking its own controls.
    func rippleShaderEffect(amplitude: Double = 10, wavelength: Double = 110, speed: Double = 650) -> some View {
        modifier(RippleShaderEffectOnTap(amplitude: amplitude, wavelength: wavelength, speed: speed))
    }

    /// Starts a wave at `origin`, in this view's own coordinates, every time `trigger` changes.
    func rippleShaderEffect(
        at origin: CGPoint,
        trigger: some Equatable & Sendable,
        amplitude: Double = 10,
        wavelength: Double = 110,
        speed: Double = 650
    ) -> some View {
        modifier(RippleShaderEffect(origin: origin, trigger: trigger, amplitude: amplitude, wavelength: wavelength, speed: speed))
    }
}

// MARK: - Demo

struct RippleShaderEffectDemo: View {
    var body: some View {
        ZStack {
            RippleShaderEffectDemoTiles()

            VStack(spacing: 10) {
                Image(systemName: "drop.fill")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("Tap the Water")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
            .shadow(color: .black.opacity(0.35), radius: 8, y: 4)
        }
        .rippleShaderEffect()
        .ignoresSafeArea()
    }
}

/// The floor of a pool: a grid whose straight lines show how the wave bends them.
private struct RippleShaderEffectDemoTiles: View {
    var body: some View {
        Canvas { context, size in
            let side = 46.0
            let columns = Int((size.width / side).rounded(.up))
            let rows = Int((size.height / side).rounded(.up))

            for row in 0..<rows {
                for column in 0..<columns {
                    let tile = CGRect(x: Double(column) * side, y: Double(row) * side, width: side, height: side)
                    let shade = Double((row * 7 + column * 13) % 5) / 4
                    let color = Color(hue: 0.52 + 0.03 * shade, saturation: 0.7, brightness: 0.72 + 0.2 * shade)
                    context.fill(Path(roundedRect: tile.insetBy(dx: 2, dy: 2), cornerRadius: 6), with: .color(color))
                }
            }
        }
        .background(Color(hue: 0.56, saturation: 0.8, brightness: 0.42))
        .accessibilityHidden(true)
    }
}

#Preview {
    RippleShaderEffectDemo()
}
```

Shader: Components/Effects/RippleShaderEffect/RippleShaderEffect.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// For SwiftUI's `layerEffect`. Bends the layer where a ring of `radius` points
// around `origin` passes, and lights the crest of that wave. `strength` fades
// the whole wave from 1 to 0, and `bounds` is the frame of the layer.
[[ stitchable ]] half4 RippleShaderEffectDistortion(
    float2 position,
    SwiftUI::Layer layer,
    float4 bounds,
    float2 origin,
    float radius,
    float strength,
    float amplitude,
    float wavelength
) {
    float2 offset = position - origin;
    float fromOrigin = length(offset);
    float2 outward = fromOrigin > 0.0 ? offset / fromOrigin : float2(0.0);

    // How far this pixel is from the crest, in wavelengths. The wave is one
    // crest between two shallow troughs, and the layer is flat everywhere else.
    float phase = (fromOrigin - radius) / wavelength;
    float window = exp(-4.0 * phase * phase) * strength;
    float height = cos(6.2831853 * phase) * window;
    float slope = sin(6.2831853 * phase) * window;

    // Water refracts along its slope. Sampling a little toward the crest
    // magnifies what lies under it, as a ridge of water does. Staying a point
    // inside the layer keeps the wave from pulling in the emptiness around it.
    float2 source = position - outward * slope * amplitude;
    half4 color = layer.sample(clamp(source, bounds.xy + 1.0, bounds.xy + bounds.zw - 1.0));

    // Light the crest and shade the troughs. Colors come premultiplied by their alpha.
    color.rgb = max(color.rgb + half3(0.12 * height) * color.a, half3(0.0));
    return color;
}
```

## Ripple Tap Effect

A view modifier that spawns an expanding ripple wherever the user taps.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/RippleTapEffect/RippleTapEffect.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Spawns an expanding ripple wherever the user taps, without blocking the view's own controls.
///
/// With Reduce Motion on, a ripple fades in place instead of expanding.
struct RippleTapEffect: ViewModifier {
    var color: Color = .white
    var maxRadius: Double = 170
    var duration: Double = 0.9
    var cornerRadius: Double = 0

    private struct Ripple: Identifiable {
        let id = UUID()
        let location: CGPoint
        let start: Date
    }

    @State private var ripples: [Ripple] = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .overlay {
                TimelineView(.animation(paused: ripples.isEmpty)) { timeline in
                    Canvas { context, _ in
                        for ripple in ripples {
                            draw(ripple, at: timeline.date, in: context)
                        }
                    }
                }
                .clipShape(.rect(cornerRadius: cornerRadius))
                .allowsHitTesting(false)
                .accessibilityHidden(true)
            }
            .contentShape(.rect(cornerRadius: cornerRadius))
            .simultaneousGesture(SpatialTapGesture().onEnded { spawn(at: $0.location) })
    }

    private func spawn(at location: CGPoint) {
        let ripple = Ripple(location: location, start: .now)
        ripples.append(ripple)

        Task {
            try? await Task.sleep(for: .seconds(duration))
            ripples.removeAll { $0.id == ripple.id }
        }
    }

    private func draw(_ ripple: Ripple, at date: Date, in context: GraphicsContext) {
        let progress = min(max(date.timeIntervalSince(ripple.start) / duration, 0), 1)
        let eased = 1 - pow(1 - progress, 3)
        let fade = 1 - progress

        for (scale, width) in [(1.0, 2.5), (0.62, 1.5)] {
            let radius = (reduceMotion ? 0.45 : eased) * maxRadius * scale
            let circle = Path(ellipseIn: CGRect(
                x: ripple.location.x - radius,
                y: ripple.location.y - radius,
                width: radius * 2,
                height: radius * 2
            ))
            context.fill(circle, with: .color(color.opacity(0.1 * fade)))
            context.stroke(circle, with: .color(color.opacity(0.75 * fade)), lineWidth: width)
        }
    }
}

extension View {
    /// Spawns a ripple at every tap on this view.
    func rippleTapEffect(color: Color = .white, maxRadius: Double = 170, cornerRadius: Double = 0) -> some View {
        modifier(RippleTapEffect(color: color, maxRadius: maxRadius, cornerRadius: cornerRadius))
    }
}

// MARK: - Demo

struct RippleTapEffectDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(
                colors: [.teal, .blue, Color(red: 0.14, green: 0.1, blue: 0.45)],
                startPoint: .top,
                endPoint: .bottom
            )

            VStack(spacing: 10) {
                Image(systemName: "hand.tap.fill")
                    .font(.largeTitle)
                    .accessibilityHidden(true)
                Text("Tap Anywhere")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
        }
        .rippleTapEffect()
        .ignoresSafeArea()
    }
}

#Preview {
    RippleTapEffectDemo()
}
```

## Spotlight Overlay

A dark overlay with a soft hole that follows the finger.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/SpotlightOverlay/SpotlightOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A dark overlay with a soft hole that follows the finger.
///
/// The hole only moves with the finger, so it needs no change for Reduce Motion.
struct SpotlightOverlay: ViewModifier {
    /// The center of the hole, as a fraction of the view.
    @Binding var center: UnitPoint
    var radius: Double = 130
    /// How much of the radius is the soft edge, from 0 to 1.
    var softness: Double = 0.55
    var dimming: Color = .black.opacity(0.88)

    @Environment(\.layoutDirection) private var layoutDirection

    func body(content: Content) -> some View {
        content.overlay {
            GeometryReader { proxy in
                // Past its end radius the gradient keeps its last color, so one fill is both the hole and the dark.
                Rectangle()
                    .fill(RadialGradient(
                        stops: [
                            .init(color: dimming.opacity(0), location: 1 - softness),
                            .init(color: dimming, location: 1),
                        ],
                        center: center,
                        startRadius: 0,
                        endRadius: radius
                    ))
                    .contentShape(.rect)
                    .gesture(DragGesture(minimumDistance: 0).onChanged { value in
                        // Gestures report screen points, but a unit point counts from the leading edge.
                        let x = value.location.x / max(proxy.size.width, 1)
                        center = UnitPoint(
                            x: layoutDirection == .rightToLeft ? 1 - x : x,
                            y: value.location.y / max(proxy.size.height, 1)
                        )
                    })
            }
            .accessibilityHidden(true)
        }
    }
}

extension View {
    /// Darkens this view except for a soft hole at `center`, which follows the finger.
    func spotlightOverlay(
        center: Binding<UnitPoint>,
        radius: Double = 130,
        softness: Double = 0.55,
        dimming: Color = .black.opacity(0.88)
    ) -> some View {
        modifier(SpotlightOverlay(center: center, radius: radius, softness: softness, dimming: dimming))
    }
}

// MARK: - Demo

struct SpotlightOverlayDemo: View {
    @State private var center = UnitPoint(x: 0.5, y: 0.45)
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let symbols = [
        "star.fill", "heart.fill", "bolt.fill", "leaf.fill", "flame.fill", "drop.fill", "moon.fill",
        "sun.max.fill", "cloud.fill", "snowflake", "key.fill", "crown.fill", "gift.fill", "bell.fill",
        "camera.fill", "music.note", "paperplane.fill", "globe.americas.fill", "pawprint.fill", "fish.fill",
        "tortoise.fill", "hare.fill", "ladybug.fill", "ant.fill", "sparkles", "diamond.fill", "gamecontroller.fill",
        "airplane",
    ]
    private let palette: [Color] = [.pink, .orange, .yellow, .mint, .teal, .blue, .purple]

    /// Lets a finger take over from the automatic movement.
    private var touchCenter: Binding<UnitPoint> {
        Binding(
            get: { center },
            set: { newValue in
                isAutoPlaying = false
                center = newValue
            }
        )
    }

    var body: some View {
        ZStack {
            Color(red: 0.08, green: 0.08, blue: 0.16)

            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 12), count: 4), spacing: 12) {
                ForEach(symbols.indices, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 18)
                        .fill(palette[index % palette.count].gradient)
                        .aspectRatio(1, contentMode: .fit)
                        .overlay {
                            Image(systemName: symbols[index])
                                .font(.title)
                                .foregroundStyle(.white)
                        }
                        .accessibilityHidden(true)
                }
            }
            .padding(.horizontal, 16)
        }
        .spotlightOverlay(center: touchCenter)
        .overlay(alignment: .bottom) {
            Text("Drag to explore")
                .font(.headline)
                .foregroundStyle(.white)
                .padding(.bottom, 44)
                .allowsHitTesting(false)
        }
        .ignoresSafeArea()
        .task(id: reduceMotion) { await autoPlay() }
    }

    /// Only the demo moves the hole by itself, until the first touch.
    private func autoPlay() async {
        guard !reduceMotion else { return }

        let start = Date.now
        while isAutoPlaying, !Task.isCancelled {
            let time = Date.now.timeIntervalSince(start)
            center = UnitPoint(x: 0.5 + 0.3 * sin(time * 1.7), y: 0.45 + 0.27 * sin(time * 1.1 + 0.6))
            try? await Task.sleep(for: .milliseconds(16))
        }
    }
}

#Preview {
    SpotlightOverlayDemo()
}
```

## Touch Particle Trail

A trail of fading particles that follows the finger while it drags.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/TouchParticleTrail/TouchParticleTrail.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Leaves a trail of fading particles behind the finger while it drags over the content.
///
/// The content keeps receiving its own touches. With Reduce Motion on, the
/// particles stay where they were left and only fade.
struct TouchParticleTrail<Content: View>: View {
    var colors: [Color] = [.cyan, .purple, .pink]
    var lifetime = 0.9
    @ViewBuilder var content: () -> Content

    @State private var emitter = TouchParticleTrailEmitter()
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        content()
            .overlay {
                TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: emitter.particles.isEmpty)) { context in
                    Canvas { canvas, _ in
                        canvas.blendMode = .plusLighter
                        let palette = colors.isEmpty ? [Color.white] : colors
                        for particle in emitter.particles {
                            guard let frame = particle.frame(at: context.date) else { continue }
                            let color = palette[particle.colorIndex % palette.count]
                            let glow = frame.rect.insetBy(dx: -frame.rect.width * 0.8, dy: -frame.rect.height * 0.8)
                            canvas.fill(Path(ellipseIn: glow), with: .color(color.opacity(frame.opacity * 0.25)))
                            canvas.fill(Path(ellipseIn: frame.rect), with: .color(color.opacity(frame.opacity)))
                        }
                    }
                    .onChange(of: context.date) { _, now in
                        if emitter.isFinished(at: now) { emitter.removeAll() }
                    }
                }
                .allowsHitTesting(false)
                .accessibilityHidden(true)
            }
            .simultaneousGesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { value in
                        emitter.emit(at: value.location, now: .now, lifetime: lifetime, drifts: !reduceMotion)
                    }
                    .onEnded { _ in emitter.endStroke() }
            )
    }
}

struct TouchParticleTrailParticle {
    var position: CGPoint
    var velocity: CGVector
    var birth: Date
    var lifetime: Double
    var size: CGFloat
    var colorIndex: Int

    struct Frame {
        var rect: CGRect
        var opacity: Double
    }

    func isExpired(at now: Date) -> Bool {
        now.timeIntervalSince(birth) >= lifetime
    }

    /// Where the particle is drawn at a given moment, or `nil` once it has faded out.
    func frame(at now: Date) -> Frame? {
        let age = now.timeIntervalSince(birth)
        guard age >= 0, age < lifetime, lifetime > 0 else { return nil }

        let progress = age / lifetime
        let side = size * (1 - progress * 0.6)
        return Frame(
            rect: CGRect(
                x: position.x + velocity.dx * age - side / 2,
                y: position.y + velocity.dy * age - side / 2,
                width: side,
                height: side
            ),
            opacity: 1 - progress
        )
    }
}

struct TouchParticleTrailEmitter {
    private(set) var particles: [TouchParticleTrailParticle] = []
    private var lastPoint: CGPoint?
    private var lastEmission: Date?

    private let capacity = 240
    private let spacing: CGFloat = 9
    private let maximumPerEvent = 16
    private let strokeGap = 0.12

    /// Adds particles between the last point and this one, so a fast drag leaves no gaps.
    ///
    /// A long pause starts a new stroke. That also covers a gesture the system
    /// cancelled, which never reports its end.
    mutating func emit(at point: CGPoint, now: Date, lifetime: Double, drifts: Bool) {
        guard point.x.isFinite, point.y.isFinite else { return }
        let lifetime = max(lifetime, 0.05)
        particles.removeAll { $0.isExpired(at: now) }

        let previous = lastEmission.map { now.timeIntervalSince($0) <= strokeGap } == true ? lastPoint : nil
        lastEmission = now

        var count = 1
        if let previous {
            let distance = hypot(point.x - previous.x, point.y - previous.y)
            guard distance >= spacing else { return }
            count = Int(min(distance / spacing, CGFloat(maximumPerEvent)))
        }

        for step in 1...count {
            let progress = CGFloat(step) / CGFloat(count)
            let position = previous.map {
                CGPoint(x: $0.x + (point.x - $0.x) * progress, y: $0.y + (point.y - $0.y) * progress)
            } ?? point
            particles.append(makeParticle(at: position, now: now, lifetime: lifetime, drifts: drifts))
        }
        lastPoint = point

        if particles.count > capacity {
            particles.removeFirst(particles.count - capacity)
        }
    }

    /// Particles are in birth order and share a lifetime, so the last one is the last to go.
    func isFinished(at now: Date) -> Bool {
        particles.last?.isExpired(at: now) ?? false
    }

    /// Lifting the finger ends the stroke, so the next touch is not joined to this one.
    mutating func endStroke() {
        lastPoint = nil
        lastEmission = nil
    }

    mutating func removeAll() {
        particles.removeAll()
        lastPoint = nil
        lastEmission = nil
    }

    private func makeParticle(
        at position: CGPoint,
        now: Date,
        lifetime: Double,
        drifts: Bool
    ) -> TouchParticleTrailParticle {
        let angle = Double.random(in: 0..<(2 * .pi))
        let speed = drifts ? Double.random(in: 10...70) : 0
        return TouchParticleTrailParticle(
            position: position,
            velocity: CGVector(dx: cos(angle) * speed, dy: sin(angle) * speed),
            birth: now,
            lifetime: lifetime,
            size: .random(in: 7...15),
            colorIndex: .random(in: 0..<1_000)
        )
    }
}

// MARK: - Demo

struct TouchParticleTrailDemo: View {
    var body: some View {
        TouchParticleTrail {
            ZStack {
                LinearGradient(
                    colors: [Color(red: 0.05, green: 0.03, blue: 0.16), .black],
                    startPoint: .top,
                    endPoint: .bottom
                )

                VStack(spacing: 10) {
                    Image(systemName: "hand.draw.fill")
                        .font(.largeTitle)
                        .accessibilityHidden(true)
                    Text("Drag anywhere")
                        .font(.title2.bold())
                }
                .foregroundStyle(.white.opacity(0.75))
            }
            .ignoresSafeArea()
        }
        .ignoresSafeArea()
    }
}

#Preview {
    TouchParticleTrailDemo()
}
```

## Voice Orb

A glowing orb for a voice assistant whose colors swirl and that swells with the voice while it listens or speaks.

Category: Effects. Minimum: iOS 18.0. Path: Components/Effects/VoiceOrb/VoiceOrb.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum VoiceOrbState: String, CaseIterable, Sendable {
    case idle = "Idle"
    case listening = "Listening"
    case thinking = "Thinking"
    case speaking = "Speaking"
}

nonisolated enum VoiceOrbMath {
    /// How lively the orb is, from 0 to 1. At rest it barely moves, thinking keeps it halfway,
    /// and while it listens or speaks it follows the level of the voice.
    static func energy(state: VoiceOrbState, level: Double) -> Double {
        let level = level.isFinite ? min(max(level, 0), 1) : 0
        switch state {
        case .idle: return 0.1
        case .thinking: return 0.5
        case .listening, .speaking: return 0.25 + 0.75 * level
        }
    }

    /// How big the orb is drawn for an energy: it swells with the voice.
    static func scale(energy: Double) -> Double {
        0.86 + 0.14 * min(max(energy, 0), 1)
    }

    /// Where a blob of color is inside the orb, with the orb as a circle of radius 1 around zero.
    /// The blobs circle its center, every other one the opposite way, and reach further out the
    /// livelier the orb is.
    static func blobCenter(index: Int, count: Int, time: Double, energy: Double) -> CGPoint {
        let phase = Double(index) / Double(max(count, 1))
        let turns = time * (index.isMultiple(of: 2) ? 0.3 : -0.2) + phase
        let reach = 0.2 + 0.3 * min(max(energy, 0), 1)
        return CGPoint(x: cos(turns * 2 * .pi) * reach, y: sin(turns * 2 * .pi) * reach)
    }
}

/// A glowing orb for a voice assistant: colors swirl inside it, and it swells with the voice
/// while it listens or speaks.
///
/// Give it the level of the voice from 0 to 1, from your own audio code: the orb asks for no
/// microphone. With Reduce Motion on, the colors stay still and the orb brightens instead of
/// swelling.
struct VoiceOrb: View {
    var state = VoiceOrbState.idle
    /// How loud the voice is, from 0 to 1.
    var level = 0.0
    var colors: [Color] = [.blue, .purple, .pink, .cyan]
    var label = "Assistant"

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let energy = VoiceOrbMath.energy(state: state, level: level)

        VoiceOrbSurface(energy: energy, colors: colors, isStill: reduceMotion)
            .scaleEffect(reduceMotion ? 1 : VoiceOrbMath.scale(energy: energy))
            .brightness(reduceMotion ? energy * 0.2 : 0)
            .saturation(state == .idle ? 0.6 : 1)
            .hueRotation(.degrees(state == .speaking ? 40 : 0))
            .animation(.spring(duration: 0.35), value: energy)
            .animation(.easeInOut(duration: 0.5), value: state)
            .accessibilityElement()
            .accessibilityLabel(label)
            .accessibilityValue(state.rawValue)
    }
}

/// The inside of the orb. Its energy is animatable, so the blobs glide to their new reach when the
/// state changes instead of jumping.
private struct VoiceOrbSurface: View, Animatable {
    var energy: Double
    let colors: [Color]
    let isStill: Bool

    nonisolated var animatableData: Double {
        get { energy }
        set { energy = newValue }
    }

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: isStill)) { timeline in
            let time = isStill ? 0 : timeline.date.timeIntervalSinceReferenceDate

            Canvas { context, size in
                let radius = min(size.width, size.height) / 2
                let center = CGPoint(x: size.width / 2, y: size.height / 2)
                let orb = CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2)

                context.clip(to: Path(ellipseIn: orb))
                context.fill(Path(ellipseIn: orb), with: .color(colors.first ?? .blue))

                var blurred = context
                blurred.addFilter(.blur(radius: radius * 0.28))
                for (index, color) in colors.enumerated() {
                    let unit = VoiceOrbMath.blobCenter(index: index, count: colors.count, time: time, energy: energy)
                    let blob = CGRect(x: center.x + unit.x * radius - radius * 0.6, y: center.y + unit.y * radius - radius * 0.6, width: radius * 1.2, height: radius * 1.2)
                    blurred.fill(Path(ellipseIn: blob), with: .color(color))
                }

                // A soft light from the top, so the orb reads as a sphere.
                context.fill(Path(ellipseIn: orb), with: .radialGradient(
                    Gradient(colors: [.white.opacity(0.45), .clear]),
                    center: CGPoint(x: center.x - radius * 0.25, y: center.y - radius * 0.4),
                    startRadius: 0,
                    endRadius: radius * 1.1
                ))
            }
        }
        .aspectRatio(1, contentMode: .fit)
        .shadow(color: (colors.first ?? .blue).opacity(0.25 + 0.45 * energy), radius: 30)
    }
}

// MARK: - Demo

struct VoiceOrbDemo: View {
    @State private var state = VoiceOrbState.idle
    @State private var level = 0.0

    var body: some View {
        VStack(spacing: 36) {
            Spacer()

            VoiceOrb(state: state, level: level)
                .frame(width: 220, height: 220)

            Text(caption)
                .font(.title3.weight(.medium))
                .foregroundStyle(.white.opacity(0.85))
                .contentTransition(.opacity)
                .animation(.easeInOut(duration: 0.3), value: state)

            Spacer()

            Picker("State", selection: $state) {
                ForEach(VoiceOrbState.allCases, id: \.self) { state in
                    Text(state.rawValue)
                }
            }
            .pickerStyle(.segmented)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color.black.ignoresSafeArea())
        .preferredColorScheme(.dark)
        .task(id: state) {
            // Stands in for the level a microphone or a speech synthesizer would give.
            guard state == .listening || state == .speaking else {
                level = 0
                return
            }
            while !Task.isCancelled {
                level = Double.random(in: state == .speaking ? 0.3...1 : 0.1...0.9)
                try? await Task.sleep(for: .milliseconds(160))
            }
        }
    }

    private var caption: String {
        switch state {
        case .idle: "Tap a state to try it"
        case .listening: "I’m listening…"
        case .thinking: "Let me think…"
        case .speaking: "Here’s what I found"
        }
    }
}

#Preview {
    VoiceOrbDemo()
}
```

## Animated Badge Count

A count badge whose number rolls to its new value and whose capsule springs to fit it.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/AnimatedBadgeCount/AnimatedBadgeCount.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A count badge whose number rolls to its new value while the capsule springs to fit.
///
/// It hides at zero. With Reduce Motion on, the number changes without moving.
struct AnimatedBadgeCount: View {
    var count: Int
    var maximum = 99
    var tint: Color = .red
    var unit = "new"

    @ScaledMetric(relativeTo: .caption) private var height = 22.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var text: String? {
        AnimatedBadgeCountFormat.text(count: count, maximum: maximum)
    }

    var body: some View {
        ZStack {
            if let text {
                Text(text)
                    .font(.caption.weight(.bold))
                    .monospacedDigit()
                    .foregroundStyle(AnimatedBadgeCountContrastingForeground(background: tint))
                    .contentTransition(reduceMotion ? .identity : .numericText(value: Double(count)))
                    .padding(.horizontal, height * 0.32)
                    .frame(minWidth: height, minHeight: height)
                    .background(tint, in: .capsule)
                    .transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                    .accessibilityLabel("\(text) \(unit)")
            }
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.45), value: text)
    }
}

enum AnimatedBadgeCountFormat {
    /// The text of the badge, or `nil` when there is nothing to count.
    static func text(count: Int, maximum: Int) -> String? {
        guard count > 0 else { return nil }
        let maximum = max(maximum, 1)
        return count > maximum ? "\(maximum)+" : "\(count)"
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct AnimatedBadgeCountContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct AnimatedBadgeCountDemo: View {
    private static let script = [3, 4, 9, 12, 98, 99, 120, 0, 1, 2]

    @State private var step = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var count: Int { Self.script[step] }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .blue], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            HStack(spacing: 22) {
                icon("bell.fill", label: "Notifications", tint: .red)
                icon("envelope.fill", label: "Mail", tint: .orange)
                icon("cart.fill", label: "Cart", tint: .green)
            }
            .scaleEffect(1.4)
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.75))
                guard !Task.isCancelled else { return }
                step = (step + 1) % Self.script.count
            }
        }
    }

    private func icon(_ systemImage: String, label: String, tint: Color) -> some View {
        Image(systemName: systemImage)
            .font(.largeTitle)
            .foregroundStyle(.white)
            .padding(12)
            .accessibilityLabel(label)
            .overlay(alignment: .topTrailing) {
                AnimatedBadgeCount(count: count, tint: tint)
                    .offset(x: 12, y: -6)
            }
    }
}

#Preview {
    AnimatedBadgeCountDemo()
}
```

## Animated Checkmark Badge

A success badge where a circle springs in and the checkmark draws itself inside it.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/AnimatedCheckmarkBadge/AnimatedCheckmarkBadge.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A success badge: a circle springs in and the checkmark draws itself inside it.
///
/// With Reduce Motion on, the badge fades in and the checkmark does not draw.
struct AnimatedCheckmarkBadge: View {
    var isComplete: Bool
    var tint: Color = .green
    var size: CGFloat = 96
    var completeLabel = "Complete"
    var pendingLabel = "Pending"

    @ScaledMetric(relativeTo: .largeTitle) private var scale = 1.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var circleAnimation: Animation {
        if reduceMotion { return .easeInOut(duration: 0.2) }
        return isComplete ? .spring(duration: 0.5, bounce: 0.5) : .easeOut(duration: 0.18)
    }

    private var checkAnimation: Animation? {
        if reduceMotion { return nil }
        return isComplete ? .easeOut(duration: 0.3).delay(0.16) : .easeOut(duration: 0.12)
    }

    var body: some View {
        let side = max(size, 0) * scale

        ZStack {
            Circle()
                .fill(tint.gradient)
                .scaleEffect(isComplete || reduceMotion ? 1 : 0.2)
                .opacity(isComplete ? 1 : 0)
                .animation(circleAnimation, value: isComplete)

            AnimatedCheckmarkBadgeCheck()
                .trim(from: 0, to: isComplete ? 1 : 0)
                .stroke(.white, style: StrokeStyle(lineWidth: side * 0.1, lineCap: .round, lineJoin: .round))
                .opacity(isComplete ? 1 : 0)
                .animation(checkAnimation, value: isComplete)
        }
        .frame(width: side, height: side)
        .sensoryFeedback(.success, trigger: isComplete) { _, isNowComplete in isNowComplete }
        .accessibilityElement()
        .accessibilityLabel(isComplete ? completeLabel : pendingLabel)
    }
}

nonisolated private struct AnimatedCheckmarkBadgeCheck: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.minX + rect.width * 0.28, y: rect.minY + rect.height * 0.53))
        path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.44, y: rect.minY + rect.height * 0.68))
        path.addLine(to: CGPoint(x: rect.minX + rect.width * 0.73, y: rect.minY + rect.height * 0.35))
        return path
    }
}

// MARK: - Demo

struct AnimatedCheckmarkBadgeDemo: View {
    @State private var isDone = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.mint.opacity(0.35), .teal.opacity(0.15)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 24) {
                AnimatedCheckmarkBadge(isComplete: isDone, size: 120)
                    .background(Circle().fill(.quaternary))

                VStack(spacing: 6) {
                    Text(isDone ? "Payment sent" : "Review payment")
                        .font(.title2.bold())
                    Text(isDone ? "Your receipt is on its way." : "One tap and it is done.")
                        .font(.body)
                        .foregroundStyle(.secondary)
                }
                .multilineTextAlignment(.center)

                Button(isDone ? "Undo" : "Confirm") {
                    isDone.toggle()
                }
                .buttonStyle(.borderedProminent)
                .controlSize(.large)
                .tint(isDone ? .gray : .green)
            }
            .padding(32)
        }
    }
}

#Preview {
    AnimatedCheckmarkBadgeDemo()
}
```

## Dynamic Island Pill

A black capsule at the top of the screen that grows to show a live status and shrinks back to a pill.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/DynamicIslandPill/DynamicIslandPill.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A black capsule that grows to show a live status and shrinks back to a pill.
///
/// Place it at the top of the screen, over the island of the device. Its content starts
/// under the pill, because the sensors of a real island would cover it there. Hide the
/// status bar while it is expanded, because it takes that space. With Reduce Motion on,
/// it changes size without bouncing and its content only fades.
struct DynamicIslandPill<Content: View>: View {
    var isExpanded: Bool
    var pillSize = CGSize(width: 126, height: 37)
    var expandedCornerRadius: CGFloat = 36
    @ViewBuilder var content: () -> Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var width: CGFloat { max(pillSize.width, 0) }
    private var height: CGFloat { max(pillSize.height, 0) }

    var body: some View {
        let shape = RoundedRectangle(
            cornerRadius: isExpanded ? expandedCornerRadius : height / 2,
            style: .continuous
        )

        ZStack {
            if isExpanded {
                content()
                    .foregroundStyle(.white)
                    .environment(\.colorScheme, .dark)
                    .frame(maxWidth: .infinity)
                    .padding(.horizontal, 22)
                    .padding(.top, height + 8)
                    .padding(.bottom, 18)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .scale(scale: 0.8, anchor: .top)))
            }
        }
        .frame(width: isExpanded ? nil : width, height: isExpanded ? nil : height)
        .background(.black, in: shape)
        .clipShape(shape)
        .padding(.horizontal, isExpanded ? 10 : 0)
        .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.5, bounce: 0.3), value: isExpanded)
        .accessibilityElement(children: .contain)
        .accessibilityHidden(!isExpanded)
    }
}

// MARK: - Demo

private enum DynamicIslandPillDemoStatus {
    case music
    case timer
}

struct DynamicIslandPillDemo: View {
    @State private var status: DynamicIslandPillDemoStatus?
    @State private var timerEnd = Date.now
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack(alignment: .top) {
            LinearGradient(colors: [.purple, .indigo, .blue], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            DynamicIslandPill(isExpanded: status != nil) {
                switch status {
                case .music: musicStatus
                case .timer: timerStatus
                case nil: EmptyView()
                }
            }
            .animation(reduceMotion ? nil : .snappy, value: status)
            .padding(.top, 11)
            .ignoresSafeArea(edges: .top)

            VStack(spacing: 14) {
                Button("Music") { status = .music }
                Button("Timer") {
                    timerEnd = .now + 25 * 60
                    status = .timer
                }
                Button("Collapse") { status = nil }
            }
            .buttonStyle(.borderedProminent)
            .tint(.white.opacity(0.25))
            .controlSize(.large)
            .frame(maxHeight: .infinity)
        }
        .statusBarHidden(status != nil)
    }

    private var musicStatus: some View {
        HStack(spacing: 14) {
            RoundedRectangle(cornerRadius: 10, style: .continuous)
                .fill(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))
                .frame(width: 48, height: 48)
                .overlay {
                    Image(systemName: "music.note")
                        .foregroundStyle(.white)
                }
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text("Midnight City")
                    .font(.headline)
                Text("Now playing")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            .frame(maxWidth: .infinity, alignment: .leading)

            Image(systemName: "waveform")
                .font(.title2)
                .foregroundStyle(.pink)
                .symbolEffect(.variableColor.iterative, options: .repeating, isActive: !reduceMotion)
                .accessibilityHidden(true)
        }
    }

    private var timerStatus: some View {
        HStack(spacing: 14) {
            Image(systemName: "timer")
                .font(.title)
                .foregroundStyle(.orange)
                .accessibilityHidden(true)

            Text("Focus session")
                .font(.headline)
                .frame(maxWidth: .infinity, alignment: .leading)

            Text(timerEnd, style: .timer)
                .font(.title2.bold())
                .monospacedDigit()
                .foregroundStyle(.orange)
        }
    }
}

#Preview {
    DynamicIslandPillDemo()
}
```

## Empty State Placeholder

An empty screen with a breathing symbol, a message and an optional call to action.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/EmptyStatePlaceholder/EmptyStatePlaceholder.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An empty screen with a breathing symbol, a message and an optional call to action.
///
/// With Reduce Motion on, the symbol stays still.
struct EmptyStatePlaceholder: View {
    var systemImage: String
    var title: LocalizedStringResource
    var message: LocalizedStringResource
    var actionTitle: LocalizedStringResource?
    var action: (() -> Void)?

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ContentUnavailableView {
            Label {
                Text(title)
            } icon: {
                Image(systemName: systemImage)
                    .symbolEffect(.breathe, isActive: !reduceMotion)
            }
        } description: {
            Text(message)
        } actions: {
            if let actionTitle, let action {
                Button(actionTitle, action: action)
                    .buttonStyle(.borderedProminent)
            }
        }
    }
}

// MARK: - Demo

struct EmptyStatePlaceholderDemo: View {
    @State private var messages: [String] = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            if messages.isEmpty {
                EmptyStatePlaceholder(
                    systemImage: "tray",
                    title: "No messages",
                    message: "New conversations will show up here.",
                    actionTitle: "Load samples"
                ) {
                    withAnimation(reduceMotion ? nil : .snappy) {
                        messages = ["Welcome aboard", "Your invoice is ready", "Lunch on Friday?"]
                    }
                }
                .transition(.opacity)
            } else {
                List {
                    ForEach(messages, id: \.self) { message in
                        Label(message, systemImage: "envelope")
                    }
                    Button("Clear all", role: .destructive) {
                        withAnimation(reduceMotion ? nil : .snappy) { messages = [] }
                    }
                }
                .transition(.opacity)
            }
        }
    }
}

#Preview {
    EmptyStatePlaceholderDemo()
}
```

## Notification Stack

Notifications piled under the newest one, like a lock screen, that open into a column with a tap and can be swiped away one by one.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/NotificationStack/NotificationStack.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Where each card sits, apart from the views so it can be tested.
nonisolated enum NotificationStackMath {
    /// How many cards show their edge under the first one while the stack is collapsed.
    static let visibleBehind = 2

    /// The top of every card. Collapsed, each card behind the first lines its bottom edge up
    /// `peek` points under the one before it. Expanded, they follow one another.
    static func tops(heights: [CGFloat], spacing: CGFloat, peek: CGFloat, progress: Double) -> [CGFloat] {
        guard let front = heights.first else { return [] }
        let progress = CGFloat(min(max(progress, 0), 1))
        var expanded: CGFloat = 0

        return heights.enumerated().map { index, height in
            let collapsed = front + peek * CGFloat(min(index, visibleBehind)) - height
            let top = collapsed + (expanded - collapsed) * progress
            expanded += height + spacing
            return top
        }
    }

    static func height(heights: [CGFloat], spacing: CGFloat, peek: CGFloat, progress: Double) -> CGFloat {
        guard let front = heights.first else { return 0 }
        let progress = CGFloat(min(max(progress, 0), 1))
        let collapsed = front + peek * CGFloat(min(heights.count - 1, visibleBehind))
        let expanded = heights.reduce(0, +) + spacing * CGFloat(heights.count - 1)
        return collapsed + (expanded - collapsed) * progress
    }

    /// How much smaller a card is drawn while it waits behind the first one.
    static func scale(depth: Int, progress: Double) -> Double {
        1 - 0.06 * Double(min(max(depth, 0), visibleBehind)) * (1 - min(max(progress, 0), 1))
    }
}

/// A pile that opens into a column. `progress` animates, so the cards travel between the two.
nonisolated private struct NotificationStackLayout: Layout {
    var progress: Double
    var spacing: CGFloat
    var peek: CGFloat

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    private func heights(of subviews: Subviews, width: CGFloat) -> [CGFloat] {
        subviews.map { $0.sizeThatFits(ProposedViewSize(width: width, height: nil)).height }
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let width = proposal.width ?? subviews.map { $0.sizeThatFits(.unspecified).width }.max() ?? 0
        let height = NotificationStackMath.height(heights: heights(of: subviews, width: width), spacing: spacing, peek: peek, progress: progress)
        return CGSize(width: width, height: height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let heights = heights(of: subviews, width: bounds.width)
        let tops = NotificationStackMath.tops(heights: heights, spacing: spacing, peek: peek, progress: progress)
        for (index, subview) in subviews.enumerated() {
            subview.place(
                at: CGPoint(x: bounds.minX, y: bounds.minY + tops[index]),
                proposal: ProposedViewSize(width: bounds.width, height: heights[index])
            )
        }
    }
}

/// Notifications piled under the newest one, like a lock screen. A tap opens the pile into a
/// column, and there each card can be swiped away.
///
/// Give the cards a similar height: a card taller than the first shows over it while the pile
/// is closed. With Reduce Motion on, the pile opens and closes without moving.
struct NotificationStack<Item: Identifiable, Card: View>: View {
    let items: [Item]
    @Binding var isExpanded: Bool
    var title: LocalizedStringResource = "Notifications"
    var spacing: CGFloat = 10
    var peek: CGFloat = 10
    var onDismiss: ((Item) -> Void)?
    @ViewBuilder var card: (Item) -> Card

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let minimumTarget: CGFloat = 44

    private var isOpen: Bool { isExpanded || items.count < 2 }
    private var progress: Double { isOpen ? 1 : 0 }

    var body: some View {
        VStack(alignment: .leading, spacing: spacing) {
            if isExpanded, items.count > 1 {
                header
                    .transition(.opacity)
            }

            NotificationStackLayout(progress: progress, spacing: spacing, peek: peek) {
                ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                    NotificationStackRow(isSwipeable: isOpen && onDismiss != nil, onDismiss: { onDismiss?(item) }) {
                        card(item)
                    }
                    .frame(maxWidth: .infinity)
                    .scaleEffect(NotificationStackMath.scale(depth: index, progress: progress), anchor: .bottom)
                    .opacity(isOpen || index <= NotificationStackMath.visibleBehind ? 1 : 0)
                    .zIndex(Double(items.count - index))
                    .accessibilityHidden(!isOpen && index > 0)
                }
            }
            .allowsHitTesting(isOpen)
            .contentShape(.rect)
            .onTapGesture { isExpanded = true }
            .accessibilityElement(children: isOpen ? .contain : .combine)
            .accessibilityAddTraits(isOpen ? [] : .isButton)
            .accessibilityValue(isOpen ? Text(verbatim: "") : Text("^[\(items.count) notification](inflect: true)"))
            .accessibilityHint(isOpen ? Text(verbatim: "") : Text("Shows them all"))
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.2), value: isExpanded)
        .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.15), value: items.map(\.id).count)
    }

    private var header: some View {
        HStack {
            Text(title)
                .font(.title3.bold())
            Spacer()
            Button("Show less") { isExpanded = false }
                .font(.subheadline.weight(.semibold))
                .frame(minHeight: minimumTarget)
                .contentShape(.rect)
        }
    }
}

/// A card that follows the finger towards the leading edge and leaves when it is let go far enough.
private struct NotificationStackRow<Content: View>: View {
    let isSwipeable: Bool
    let onDismiss: () -> Void
    @ViewBuilder var content: () -> Content

    @State private var offset: CGFloat = 0
    @Environment(\.layoutDirection) private var layoutDirection
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let threshold: CGFloat = 110

    var body: some View {
        content()
            .offset(x: offset)
            .opacity(1 - min(abs(offset) / (threshold * 2.5), 0.6))
            .gesture(swipe, isEnabled: isSwipeable)
            .accessibilityAction(named: "Clear") { if isSwipeable { onDismiss() } }
    }

    private var swipe: some Gesture {
        DragGesture(minimumDistance: 20)
            .onChanged { value in
                // A gesture reports screen points. Offsets are mirrored in a right-to-left layout.
                let towardsLeading = layoutDirection == .rightToLeft ? -value.translation.width : value.translation.width
                offset = min(towardsLeading, 0)
            }
            .onEnded { _ in
                if offset < -threshold {
                    onDismiss()
                } else {
                    withAnimation(reduceMotion ? nil : .spring(duration: 0.35, bounce: 0.25)) { offset = 0 }
                }
            }
    }
}

// MARK: - Demo

private struct NotificationStackDemoNote: Identifiable {
    let id: String
    let app: String
    let symbol: String
    let color: Color
    let title: String
    let message: String
    let time: String
}

struct NotificationStackDemo: View {
    private static let all = [
        NotificationStackDemoNote(id: "messages", app: "Messages", symbol: "message.fill", color: .green, title: "Maya", message: "Are you coming tonight?", time: "now"),
        NotificationStackDemoNote(id: "calendar", app: "Calendar", symbol: "calendar", color: .red, title: "Design review", message: "Starts in 15 minutes, room 4", time: "5m"),
        NotificationStackDemoNote(id: "mail", app: "Mail", symbol: "envelope.fill", color: .blue, title: "Your order has shipped", message: "It arrives on Thursday", time: "22m"),
        NotificationStackDemoNote(id: "fitness", app: "Fitness", symbol: "figure.run", color: .orange, title: "Almost there", message: "A 10 minute walk closes your ring", time: "1h"),
    ]

    @State private var notes = all
    @State private var isExpanded = false

    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(spacing: 28) {
                VStack(spacing: 0) {
                    Text(Date.now, format: .dateTime.weekday(.wide).day().month(.wide))
                        .font(.title3.weight(.medium))
                    Text(Date.now, format: .dateTime.hour().minute())
                        .font(.system(size: 84, weight: .bold, design: .rounded))
                        .monospacedDigit()
                }
                .foregroundStyle(.white)
                .padding(.top, 36)

                NotificationStack(items: notes, isExpanded: $isExpanded, onDismiss: { note in
                    notes.removeAll { $0.id == note.id }
                }) { note in
                    card(note)
                }
                .foregroundStyle(.white)

                // Only for this demo: a way back once every notification is cleared.
                if notes.isEmpty {
                    Button("Start over") {
                        isExpanded = false
                        notes = Self.all
                    }
                    .buttonStyle(.borderedProminent)
                    .tint(.white.opacity(0.25))
                }
            }
            .padding(.horizontal, 16)
        }
        .background(LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .topLeading, endPoint: .bottomTrailing).ignoresSafeArea())
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.5))
                guard !Task.isCancelled, isAutoPlaying else { return }
                isExpanded.toggle()
            }
        }
    }

    private func card(_ note: NotificationStackDemoNote) -> some View {
        HStack(spacing: 12) {
            Image(systemName: note.symbol)
                .font(.title3)
                .foregroundStyle(.white)
                .frame(width: 42, height: 42)
                .background(note.color.gradient, in: .rect(cornerRadius: 10))
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                HStack {
                    Text(note.title)
                        .font(.subheadline.weight(.semibold))
                    Spacer()
                    Text(note.time)
                        .font(.caption)
                        .foregroundStyle(Color.secondary)
                }
                Text(note.message)
                    .font(.subheadline)
                    .lineLimit(1)
            }
        }
        .padding(14)
        // `Color.primary`, not `.primary`: the white set around the stack would make it white too.
        .foregroundStyle(Color.primary)
        .background(.regularMaterial, in: .rect(cornerRadius: 22))
        .accessibilityElement(children: .combine)
        .accessibilityLabel("\(note.app), \(note.title), \(note.message)")
    }
}

#Preview {
    NotificationStackDemo()
}
```

## Rating Stars

Tappable rating stars that pop with a spring and work as an adjustable value in VoiceOver.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/RatingStars/RatingStars.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum RatingStarsValue {
    /// Keeps a rating between zero and the number of stars.
    static func clamped(_ rating: Int, maximum: Int) -> Int {
        min(max(rating, 0), max(maximum, 0))
    }

    /// The rating after a tap on `star`: that star, or none when it was already the rating.
    static func tapping(_ star: Int, rating: Int, maximum: Int) -> Int {
        star == rating ? 0 : clamped(star, maximum: maximum)
    }
}

/// A row of tappable stars. Each star pops with a spring when it fills, and a tap on the
/// chosen star clears the rating.
///
/// VoiceOver treats the row as one adjustable value. With Reduce Motion on, the stars only change color.
struct RatingStars: View {
    @Binding var rating: Int
    var maximum: Int = 5
    var color: Color = .orange

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 10) {
            ForEach(1...max(maximum, 1), id: \.self) { star in
                starButton(star)
            }
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Rating")
        .accessibilityValue("\(rating) of \(maximum) stars")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: rating = RatingStarsValue.clamped(rating + 1, maximum: maximum)
            case .decrement: rating = RatingStarsValue.clamped(rating - 1, maximum: maximum)
            @unknown default: break
            }
        }
    }

    private func starButton(_ star: Int) -> some View {
        let isFilled = star <= rating

        return Button {
            rating = RatingStarsValue.tapping(star, rating: rating, maximum: maximum)
        } label: {
            Image(systemName: "star.fill")
                .font(.largeTitle)
                .foregroundStyle(isFilled ? AnyShapeStyle(color.gradient) : AnyShapeStyle(.quaternary))
                .animation(.easeOut(duration: 0.15), value: isFilled)
                .phaseAnimator([1.0, 1.4], trigger: isFilled) { view, scale in
                    view.scaleEffect(isFilled && !reduceMotion ? scale : 1)
                } animation: { scale in
                    scale > 1 ? .easeOut(duration: 0.1) : .spring(duration: 0.4, bounce: 0.6)
                }
                // A star answers to a touch up to the middle of the gap to the next one,
                // which makes it as big as a touch target should be. The stars do not move.
                .padding(5)
                .contentShape(.rect)
                .padding(-5)
        }
        .buttonStyle(.plain)
    }
}

// MARK: - Demo

struct RatingStarsDemo: View {
    @State private var rating = 0
    @State private var isAutoPlaying = true

    /// Any change made by the user, by touch or VoiceOver, ends the automatic rating.
    private var userRating: Binding<Int> {
        Binding(
            get: { rating },
            set: { newValue in
                isAutoPlaying = false
                rating = newValue
            }
        )
    }

    private var caption: String {
        ["Tap a star", "Terrible", "Not great", "It was fine", "Really good", "Loved it"][rating]
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange.opacity(0.25), .pink.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 20) {
                Image(systemName: "fork.knife.circle.fill")
                    .font(.system(.largeTitle, design: .rounded))
                    .imageScale(.large)
                    .foregroundStyle(.orange.gradient)
                    .accessibilityHidden(true)

                Text("How was your dinner?")
                    .font(.title2.bold())

                RatingStars(rating: userRating)

                Text(caption)
                    .font(.headline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.opacity)
                    .animation(.default, value: rating)
            }
            .padding(32)
            .frame(maxWidth: .infinity)
            .background(.regularMaterial, in: .rect(cornerRadius: 28))
            .padding(24)
        }
        .task(id: isAutoPlaying) {
            guard isAutoPlaying else { return }
            let script = [3, 5, 2, 4]
            var step = 0
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.9))
                guard !Task.isCancelled else { return }
                rating = script[step % script.count]
                step += 1
            }
        }
    }
}

#Preview {
    RatingStarsDemo()
}
```

## Shake Error Modifier

A modifier that shakes a view with keyframes whenever a trigger value changes.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/ShakeErrorModifier/ShakeErrorModifier.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Shakes a view sideways each time `trigger` changes, with an error haptic.
///
/// With Reduce Motion on, the view stays still and only the haptic plays, so also show the error some other way.
struct ShakeErrorModifier<Trigger: Equatable & Sendable>: ViewModifier {
    let trigger: Trigger
    var distance: CGFloat = 10

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        let distance = reduceMotion ? 0 : distance

        content
            .keyframeAnimator(initialValue: CGFloat.zero, trigger: trigger) { view, offset in
                view.offset(x: offset)
            } keyframes: { _ in
                KeyframeTrack {
                    LinearKeyframe(-distance, duration: 0.06)
                    LinearKeyframe(distance, duration: 0.1)
                    LinearKeyframe(-distance * 0.7, duration: 0.1)
                    LinearKeyframe(distance * 0.5, duration: 0.08)
                    SpringKeyframe(0, duration: 0.2, spring: .bouncy)
                }
            }
            .sensoryFeedback(.error, trigger: trigger)
    }
}

extension View {
    /// Shakes the view each time `trigger` changes.
    func shakeError(trigger: some Equatable & Sendable, distance: CGFloat = 10) -> some View {
        modifier(ShakeErrorModifier(trigger: trigger, distance: distance))
    }
}

// MARK: - Demo

struct ShakeErrorModifierDemo: View {
    @State private var email = "hello@"
    @State private var attempts = 0
    @State private var showsError = false

    private var isValid: Bool { email.contains("@") && email.contains(".") }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.pink.opacity(0.2), .orange.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 14) {
                Text("Join the beta")
                    .font(.title.bold())

                TextField("Email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                    .padding(16)
                    .background(.regularMaterial, in: .rect(cornerRadius: 14))
                    .overlay {
                        RoundedRectangle(cornerRadius: 14)
                            .strokeBorder(showsError ? Color.red : Color.clear, lineWidth: 2)
                    }
                    .shakeError(trigger: attempts)

                Text("Enter a complete email address.")
                    .font(.footnote)
                    .foregroundStyle(.red)
                    .opacity(showsError ? 1 : 0)
                    .accessibilityHidden(!showsError)

                Button(action: submit) {
                    Text("Submit")
                        .font(.headline)
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 16)
                        .background(.pink.gradient, in: .rect(cornerRadius: 14))
                }
                .buttonStyle(.plain)
            }
            .padding(24)
        }
        .onChange(of: email) { showsError = false }
    }

    private func submit() {
        showsError = !isValid
        if !isValid { attempts += 1 }
    }
}

#Preview {
    ShakeErrorModifierDemo()
}
```

## Toast Banner

A toast modifier that slides a banner from the top, announces it to VoiceOver and dismisses by itself.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/ToastBanner/ToastBanner.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The capsule shown by the `.toast(isPresented:)` modifier.
struct ToastBanner: View {
    let message: LocalizedStringResource
    var systemImage: String = "checkmark.circle.fill"
    var tint: Color = .green

    var body: some View {
        HStack(spacing: 10) {
            Image(systemName: systemImage)
                .font(.title3)
                .foregroundStyle(tint.gradient)
                .accessibilityHidden(true)

            Text(message)
                .font(.subheadline.weight(.semibold))
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.15), radius: 14, y: 6)
        .accessibilityElement(children: .combine)
    }
}

private struct ToastBannerModifier: ViewModifier {
    @Binding var isPresented: Bool
    let message: LocalizedStringResource
    let systemImage: String
    let tint: Color
    let duration: Double

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .top) {
                if isPresented {
                    ToastBanner(message: message, systemImage: systemImage, tint: tint)
                        .padding(.top, 8)
                        .transition(reduceMotion ? .opacity : .move(edge: .top).combined(with: .opacity))
                        .task(id: message) { await announceAndDismiss() }
                }
            }
            .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.45, bounce: 0.3), value: isPresented)
    }

    private func announceAndDismiss() async {
        AccessibilityNotification.Announcement(String(localized: message)).post()
        do {
            try await Task.sleep(for: .seconds(duration))
        } catch {
            return
        }
        isPresented = false
    }
}

extension View {
    /// Slides a banner in from the top, announces it to VoiceOver and dismisses it after `duration` seconds.
    ///
    /// With Reduce Motion on, the banner fades instead of sliding.
    func toast(
        isPresented: Binding<Bool>,
        message: LocalizedStringResource,
        systemImage: String = "checkmark.circle.fill",
        tint: Color = .green,
        duration: Double = 2.2
    ) -> some View {
        modifier(ToastBannerModifier(
            isPresented: isPresented,
            message: message,
            systemImage: systemImage,
            tint: tint,
            duration: duration
        ))
    }
}

// MARK: - Demo

struct ToastBannerDemo: View {
    @State private var showsToast = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.mint.opacity(0.35), .teal.opacity(0.25)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 28) {
                Image(systemName: "doc.text.fill")
                    .font(.largeTitle)
                    .imageScale(.large)
                    .foregroundStyle(.teal.gradient)
                    .accessibilityHidden(true)

                Text("Quarterly notes")
                    .font(.title2.bold())

                Button {
                    showsToast = true
                } label: {
                    Text("Save")
                        .font(.headline)
                        .foregroundStyle(.white)
                        .padding(.horizontal, 48)
                        .padding(.vertical, 16)
                        .background(.teal.gradient, in: .capsule)
                }
                .buttonStyle(.plain)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .toast(isPresented: $showsToast, message: "Changes saved")
    }
}

#Preview {
    ToastBannerDemo()
}
```

## Toast Host

A queue of toasts that show above everything, sheets and full-screen covers included.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/ToastHost/ToastHost.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ToastHostRole: Equatable, Sendable {
    case info, success, warning, error

    var symbol: String {
        switch self {
        case .info: "info.circle.fill"
        case .success: "checkmark.circle.fill"
        case .warning: "exclamationmark.triangle.fill"
        case .error: "xmark.octagon.fill"
        }
    }

    var color: Color {
        switch self {
        case .info: .blue
        case .success: .green
        case .warning: .orange
        case .error: .red
        }
    }
}

nonisolated struct ToastHostToast: Identifiable, Equatable, Sendable {
    var id = UUID()
    var message: LocalizedStringResource
    var role = ToastHostRole.info
    var duration = Duration.seconds(3)
}

/// The toasts waiting to be shown, one at a time and in the order they arrived.
nonisolated struct ToastHostQueue: Equatable, Sendable {
    private(set) var toasts: [ToastHostToast] = []
    /// How many toasts may wait behind the one on screen. The oldest waiting one makes room.
    var limit = 3

    var current: ToastHostToast? { toasts.first }

    /// Adds a toast, unless it says the same as the last one, which a double tap would repeat.
    mutating func add(_ toast: ToastHostToast) {
        guard toasts.last?.message != toast.message || toasts.last?.role != toast.role else { return }
        toasts.append(toast)
        if toasts.count > max(limit, 0) + 1 { toasts.remove(at: 1) }
    }

    mutating func remove(id: ToastHostToast.ID) {
        toasts.removeAll { $0.id == id }
    }
}

/// Where views send their toasts. `toastHost()` puts one in the environment:
/// `@Environment(ToastHostCenter.self) private var toasts`, then `toasts.show("Saved", role: .success)`.
@MainActor @Observable final class ToastHostCenter {
    private(set) var queue = ToastHostQueue()
    @ObservationIgnored fileprivate var window: ToastHostWindow?

    func show(_ message: LocalizedStringResource, role: ToastHostRole = .info, duration: Duration = .seconds(3)) {
        queue.add(ToastHostToast(message: message, role: role, duration: duration))
    }

    func dismiss(_ toast: ToastHostToast) {
        queue.remove(id: toast.id)
    }

    /// Puts the window of the toasts over everything else in `scene`, once.
    fileprivate func attach(to scene: UIWindowScene) {
        guard window?.windowScene !== scene else { return }
        let host = UIHostingController(rootView: ToastHostOverlay(center: self))
        host.view.backgroundColor = .clear

        let window = ToastHostWindow(windowScene: scene)
        window.windowLevel = .alert - 1
        window.rootViewController = host
        window.isHidden = false
        self.window = window
    }
}

extension View {
    /// Shows the toasts sent to its `ToastHostCenter` above everything, sheets and full-screen
    /// covers included. Put it once on the root view of a scene.
    ///
    /// The toasts live in a window of their own, so a `tint` or a `preferredColorScheme` set
    /// on your views does not reach them. A toast covers what is under it while it shows,
    /// and a tap or a swipe up dismisses it.
    func toastHost() -> some View {
        modifier(ToastHostModifier())
    }
}

private struct ToastHostModifier: ViewModifier {
    @State private var center = ToastHostCenter()

    func body(content: Content) -> some View {
        content
            .background { ToastHostSceneReader(center: center) }
            .environment(center)
    }
}

/// A window that lets every touch through to the app, except those on the toast it shows.
private final class ToastHostWindow: UIWindow {
    var toastFrame = CGRect.null

    override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
        toastFrame.contains(point) ? super.hitTest(point, with: event) : nil
    }
}

/// An invisible view that finds the scene its window belongs to.
private struct ToastHostSceneReader: UIViewRepresentable {
    let center: ToastHostCenter

    func makeUIView(context: Context) -> ToastHostSceneView {
        let view = ToastHostSceneView()
        view.isUserInteractionEnabled = false
        view.onScene = { [center] scene in center.attach(to: scene) }
        return view
    }

    func updateUIView(_ view: ToastHostSceneView, context: Context) {}
}

private final class ToastHostSceneView: UIView {
    var onScene: ((UIWindowScene) -> Void)?

    override func didMoveToWindow() {
        super.didMoveToWindow()
        if let scene = window?.windowScene { onScene?(scene) }
    }
}

private struct ToastHostOverlay: View {
    let center: ToastHostCenter

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack {
            if let toast = center.queue.current {
                banner(toast)
                    .id(toast.id)
                    .transition(reduceMotion ? .opacity : .move(edge: .top).combined(with: .opacity))
                    .task(id: toast.id) {
                        AccessibilityNotification.Announcement(String(localized: toast.message)).post()
                        try? await Task.sleep(for: toast.duration)
                        if !Task.isCancelled { center.dismiss(toast) }
                    }
            }
            Spacer(minLength: 0)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.45, bounce: 0.25), value: center.queue.current)
    }

    private func banner(_ toast: ToastHostToast) -> some View {
        Label {
            Text(toast.message)
                .font(.subheadline.weight(.medium))
                .foregroundStyle(.primary)
        } icon: {
            Image(systemName: toast.role.symbol)
                .foregroundStyle(toast.role.color)
        }
        .padding(.horizontal, 18)
        .padding(.vertical, 12)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.15), radius: 12, y: 4)
        .padding(.horizontal, 16)
        .padding(.top, 4)
        .onGeometryChange(for: CGRect.self) { $0.frame(in: .global) } action: { center.window?.toastFrame = $0 }
        .onDisappear { center.window?.toastFrame = .null }
        .onTapGesture { center.dismiss(toast) }
        .gesture(
            DragGesture(minimumDistance: 10).onEnded { value in
                if value.translation.height < 0 { center.dismiss(toast) }
            }
        )
        .accessibilityElement(children: .combine)
        .accessibilityAddTraits(.isButton)
        .accessibilityHint("Dismisses the message")
    }
}

// MARK: - Demo

struct ToastHostDemo: View {
    var body: some View {
        ToastHostDemoScreen()
            .toastHost()
    }
}

private struct ToastHostDemoScreen: View {
    @State private var isEditing = false
    @Environment(ToastHostCenter.self) private var toasts

    var body: some View {
        VStack(spacing: 14) {
            Text("Toasts")
                .font(.largeTitle.bold())
            Text("They show above sheets too, because they live in a window of their own.")
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
                .padding(.bottom, 10)

            Button("Copy Link") {
                toasts.show("Link copied", role: .success)
            }
            .buttonStyle(.borderedProminent)

            Button("Edit Profile") {
                isEditing = true
            }
            .buttonStyle(.bordered)
        }
        .controlSize(.large)
        .padding(32)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .sheet(isPresented: $isEditing) {
            ToastHostDemoSheet()
        }
    }
}

private struct ToastHostDemoSheet: View {
    @State private var name = "Alex Rivera"
    @Environment(ToastHostCenter.self) private var toasts
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        NavigationStack {
            Form {
                TextField("Name", text: $name)

                Button("Save Changes") {
                    toasts.show("Profile saved", role: .success)
                }
                Button("Upload Photo") {
                    toasts.show("No connection. Try again.", role: .error)
                }
            }
            .navigationTitle("Edit Profile")
            .navigationBarTitleDisplayMode(.inline)
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Cancel") { dismiss() }
                }
            }
        }
        // A toast covers what is under it while it shows. At half height the bar of the sheet stays clear.
        .presentationDetents([.medium, .large])
    }
}

#Preview {
    ToastHostDemo()
}
```

## Tooltip Popover

A tooltip bubble that pops out of its arrow next to an anchor view and closes on a tap outside.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/TooltipPopover/TooltipPopover.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

extension View {
    /// Marks this view as the place a tooltip points to.
    func tooltipPopoverAnchor(id: String, text: LocalizedStringResource) -> some View {
        anchorPreference(key: TooltipPopoverAnchorKey.self, value: .bounds) { bounds in
            [id: TooltipPopoverAnchor(text: text, bounds: bounds)]
        }
    }
}

/// Shows the tooltip of the anchor named by `activeID`, and closes it on a tap outside.
///
/// Wrap the whole screen, so the tooltip can draw over everything inside it. It
/// pops out of its arrow. With Reduce Motion on, it only fades.
struct TooltipPopoverHost<Content: View>: View {
    @Binding var activeID: String?
    var tint: Color = .indigo
    @ViewBuilder var content: () -> Content

    @ScaledMetric(relativeTo: .subheadline) private var maximumWidth = 260.0
    @AccessibilityFocusState private var isBubbleFocused: Bool
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        content()
            .overlayPreferenceValue(TooltipPopoverAnchorKey.self) { anchors in
                GeometryReader { proxy in
                    if let activeID, let tip = anchors[activeID] {
                        tooltip(text: tip.text, anchor: proxy[tip.bounds], container: proxy.size)
                    }
                }
                .animation(reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.32, bounce: 0.35), value: activeID)
            }
    }

    private func tooltip(text: LocalizedStringResource, anchor: CGRect, container: CGSize) -> some View {
        let opensAbove = TooltipPopoverGeometry.opensAbove(anchor: anchor, container: container)
        let scaleAnchor = TooltipPopoverGeometry.arrowTip(anchor: anchor, container: container, opensAbove: opensAbove)

        return ZStack {
            Color.clear
                .contentShape(.rect)
                .onTapGesture { activeID = nil }
                .accessibilityHidden(true)

            TooltipPopoverPlacement(anchor: anchor, opensAbove: opensAbove, maximumWidth: maximumWidth) {
                ViewThatFits(in: .vertical) {
                    bubbleText(text)
                    ScrollView { bubbleText(text) }
                }
                .background(tint, in: .rect(cornerRadius: 12, style: .continuous))
                .accessibilityElement(children: .combine)
                .accessibilityAddTraits(.isModal)
                .accessibilityAction(named: "Dismiss") { activeID = nil }
                .accessibilityAction(.escape) { activeID = nil }
                .accessibilityFocused($isBubbleFocused)
                .onAppear { isBubbleFocused = true }

                TooltipPopoverArrow(pointsDown: opensAbove)
                    .fill(tint)
                    .accessibilityHidden(true)
            }
        }
        .id(activeID)
        .transition(
            reduceMotion ? .opacity : .scale(scale: 0.2, anchor: scaleAnchor).combined(with: .opacity)
        )
    }

    private func bubbleText(_ text: LocalizedStringResource) -> some View {
        Text(text)
            .font(.subheadline)
            .foregroundStyle(TooltipPopoverContrastingForeground(background: tint))
            .fixedSize(horizontal: false, vertical: true)
            .padding(.horizontal, 14)
            .padding(.vertical, 10)
    }
}

struct TooltipPopoverAnchor {
    var text: LocalizedStringResource
    var bounds: Anchor<CGRect>
}

struct TooltipPopoverAnchorKey: PreferenceKey {
    static var defaultValue: [String: TooltipPopoverAnchor] { [:] }

    static func reduce(value: inout [String: TooltipPopoverAnchor], nextValue: () -> [String: TooltipPopoverAnchor]) {
        value.merge(nextValue()) { _, new in new }
    }
}

nonisolated enum TooltipPopoverGeometry {
    static let arrowSize = CGSize(width: 18, height: 9)
    static let margin: CGFloat = 12
    private static let cornerInset: CGFloat = 14

    /// The tooltip opens on the side of the anchor with more room.
    static func opensAbove(anchor: CGRect, container: CGSize) -> Bool {
        anchor.minY > container.height - anchor.maxY
    }

    /// Where the arrow touches the anchor, as a fraction of the container.
    static func arrowTip(anchor: CGRect, container: CGSize, opensAbove: Bool) -> UnitPoint {
        guard container.width > 0, container.height > 0 else { return .center }
        return UnitPoint(
            x: anchor.midX / container.width,
            y: (opensAbove ? anchor.minY : anchor.maxY) / container.height
        )
    }

    /// The most room the bubble can take on its side of the anchor.
    static func available(anchor: CGRect, container: CGSize, opensAbove: Bool, maximumWidth: CGFloat) -> CGSize {
        let room = opensAbove ? anchor.minY : container.height - anchor.maxY
        return CGSize(
            width: max(min(maximumWidth, container.width - margin * 2), 0),
            height: max(room - arrowSize.height - margin, 0)
        )
    }

    static func frames(
        anchor: CGRect,
        bubble: CGSize,
        container: CGSize,
        opensAbove: Bool
    ) -> (bubble: CGRect, arrow: CGRect) {
        let x = clamp(anchor.midX - bubble.width / 2, from: margin, to: container.width - margin - bubble.width)
        let y = opensAbove ? anchor.minY - arrowSize.height - bubble.height : anchor.maxY + arrowSize.height
        let bubbleFrame = CGRect(x: x, y: y, width: bubble.width, height: bubble.height)

        let arrowX = clamp(
            anchor.midX - arrowSize.width / 2,
            from: bubbleFrame.minX + cornerInset,
            to: bubbleFrame.maxX - cornerInset - arrowSize.width
        )
        let arrowY = opensAbove ? bubbleFrame.maxY : bubbleFrame.minY - arrowSize.height
        return (bubbleFrame, CGRect(origin: CGPoint(x: arrowX, y: arrowY), size: arrowSize))
    }

    private static func clamp(_ value: CGFloat, from lower: CGFloat, to upper: CGFloat) -> CGFloat {
        guard lower <= upper else { return lower }
        return min(max(value, lower), upper)
    }
}

/// Places its two subviews, the bubble and then the arrow, next to the anchor.
private struct TooltipPopoverPlacement: Layout {
    var anchor: CGRect
    var opensAbove: Bool
    var maximumWidth: CGFloat

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        proposal.replacingUnspecifiedDimensions()
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        guard subviews.count == 2 else { return }

        let bubbleProposal = ProposedViewSize(TooltipPopoverGeometry.available(
            anchor: anchor,
            container: bounds.size,
            opensAbove: opensAbove,
            maximumWidth: maximumWidth
        ))
        let frames = TooltipPopoverGeometry.frames(
            anchor: anchor,
            bubble: subviews[0].sizeThatFits(bubbleProposal),
            container: bounds.size,
            opensAbove: opensAbove
        )

        subviews[0].place(
            at: CGPoint(x: bounds.minX + frames.bubble.minX, y: bounds.minY + frames.bubble.minY),
            proposal: bubbleProposal
        )
        subviews[1].place(
            at: CGPoint(x: bounds.minX + frames.arrow.minX, y: bounds.minY + frames.arrow.minY),
            proposal: ProposedViewSize(frames.arrow.size)
        )
    }
}

nonisolated private struct TooltipPopoverArrow: Shape {
    var pointsDown: Bool

    func path(in rect: CGRect) -> Path {
        var path = Path()
        let tipY = pointsDown ? rect.maxY : rect.minY
        let baseY = pointsDown ? rect.minY : rect.maxY
        path.move(to: CGPoint(x: rect.minX, y: baseY))
        path.addLine(to: CGPoint(x: rect.midX, y: tipY))
        path.addLine(to: CGPoint(x: rect.maxX, y: baseY))
        path.closeSubpath()
        return path
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct TooltipPopoverContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct TooltipPopoverDemo: View {
    @State private var activeTip: String?

    var body: some View {
        TooltipPopoverHost(activeID: $activeTip) {
            ZStack {
                LinearGradient(colors: [.indigo.opacity(0.2), .pink.opacity(0.15)], startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()

                VStack(spacing: 18) {
                    Text("Settings")
                        .font(.largeTitle.bold())
                        .frame(maxWidth: .infinity, alignment: .leading)

                    row("iCloud Backup", id: "backup", tip: "Backups run overnight while the phone is charging on Wi-Fi.")
                    row("Offline Maps", id: "maps", tip: "Keeps recent places on the device, so directions work without a signal.")
                    row("Low Data Mode", id: "data", tip: "Pauses automatic downloads when your connection is limited.")
                }
                .padding(24)
            }
        }
    }

    private func row(_ title: String, id: String, tip: String) -> some View {
        HStack {
            Text(title)
                .font(.headline)
            Spacer()
            Button {
                activeTip = id
            } label: {
                // The icon is too small to hit. The padding widens what answers to a touch,
                // and the same padding taken back keeps the row as it was.
                Image(systemName: "info.circle.fill")
                    .font(.title2)
                    .padding(9)
                    .contentShape(.rect)
                    .padding(-9)
            }
            .accessibilityLabel("About \(title)")
            .tooltipPopoverAnchor(id: id, text: "\(tip)")
        }
        .padding(18)
        .background(.background, in: .rect(cornerRadius: 16, style: .continuous))
    }
}

#Preview {
    TooltipPopoverDemo()
}
```

## Undo Snackbar

A bottom bar with an Undo button and a shrinking timer line.

Category: Feedback. Minimum: iOS 18.0. Path: Components/Feedback/UndoSnackbar/UndoSnackbar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A bottom bar with an Undo button and a line that shrinks until the bar expires.
///
/// With Reduce Motion on, the line stays still and the bar simply fades away on time.
struct UndoSnackbar: View {
    let message: LocalizedStringResource
    var duration: Double = 5
    var tint: Color = .yellow
    let onUndo: () -> Void
    let onExpire: () -> Void

    @State private var remaining = 1.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    var body: some View {
        HStack(spacing: 12) {
            Text(message)
                .font(.subheadline.weight(.medium))
                .frame(maxWidth: .infinity, alignment: .leading)

            Button(action: onUndo) {
                Text("Undo")
                    .font(.subheadline.bold())
                    .foregroundStyle(tint)
                    .frame(minWidth: 44, minHeight: 44)
                    .contentShape(.rect)
            }
            .buttonStyle(.plain)
        }
        .foregroundStyle(.white)
        .padding(.horizontal, 18)
        .padding(.vertical, 6)
        .background(.black.opacity(0.85))
        .overlay(alignment: .bottom) {
            Rectangle()
                .fill(tint)
                .frame(height: 3)
                .scaleEffect(x: remaining, anchor: .leading)
                .accessibilityHidden(true)
        }
        .clipShape(.rect(cornerRadius: 16))
        .shadow(color: .black.opacity(0.2), radius: 14, y: 6)
        .task { await runTimer() }
    }

    private func runTimer() async {
        AccessibilityNotification.Announcement(String(localized: "\(message). Undo available.")).post()
        let seconds = voiceOverEnabled ? duration * 2 : duration
        if !reduceMotion {
            withAnimation(.linear(duration: seconds)) { remaining = 0 }
        }
        do {
            try await Task.sleep(for: .seconds(seconds))
        } catch {
            return
        }
        onExpire()
    }
}

private struct UndoSnackbarModifier: ViewModifier {
    @Binding var isPresented: Bool
    let message: LocalizedStringResource
    let duration: Double
    let onUndo: () -> Void

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .overlay(alignment: .bottom) {
                if isPresented {
                    UndoSnackbar(message: message, duration: duration) {
                        isPresented = false
                        onUndo()
                    } onExpire: {
                        isPresented = false
                    }
                    .padding(.horizontal, 16)
                    .padding(.bottom, 12)
                    .transition(reduceMotion ? .opacity : .move(edge: .bottom).combined(with: .opacity))
                }
            }
            .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.4, bounce: 0.2), value: isPresented)
    }
}

extension View {
    /// Shows an `UndoSnackbar` at the bottom for `duration` seconds.
    func undoSnackbar(
        isPresented: Binding<Bool>,
        message: LocalizedStringResource,
        duration: Double = 5,
        onUndo: @escaping () -> Void
    ) -> some View {
        modifier(UndoSnackbarModifier(isPresented: isPresented, message: message, duration: duration, onUndo: onUndo))
    }
}

// MARK: - Demo

struct UndoSnackbarDemo: View {
    private static let allMessages = ["Team lunch on Friday", "Your flight is confirmed", "Invoice for October"]

    @State private var messages = allMessages
    @State private var lastArchived: String?
    @State private var showsSnackbar = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.blue.opacity(0.25), .indigo.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 14) {
                HStack {
                    Text("Inbox")
                        .font(.largeTitle.bold())

                    Spacer()

                    Button("Archive", systemImage: "archivebox.fill", action: archive)
                        .font(.headline)
                        .buttonStyle(.borderedProminent)
                        .disabled(showsSnackbar)
                }
                .padding(.bottom, 10)

                ForEach(messages, id: \.self) { message in
                    Label(message, systemImage: "envelope.fill")
                        .font(.headline)
                        .padding(18)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .background(.regularMaterial, in: .rect(cornerRadius: 16))
                        .transition(.opacity)
                }

                Spacer()
            }
            .padding(24)
            .animation(.smooth, value: messages)
        }
        .undoSnackbar(isPresented: $showsSnackbar, message: "Conversation archived", duration: 3) {
            if let lastArchived { messages.insert(lastArchived, at: 0) }
        }
    }

    private func archive() {
        if messages.isEmpty { messages = Self.allMessages }
        lastArchived = messages.removeFirst()
        showsSnackbar = true
    }
}

#Preview {
    UndoSnackbarDemo()
}
```

## Completion Swipe Row

A row you swipe to the right to complete, where a checkmark pops in and the row collapses.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/CompletionSwipeRow/CompletionSwipeRow.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A row you swipe forward to complete, to the right or, in a right-to-left layout, to the left:
/// a checkmark pops in and the row collapses.
///
/// `onComplete` runs once, after the row has collapsed, and is where the caller
/// should remove the row. With Reduce Motion on, the row completes at once.
struct CompletionSwipeRow<Content: View>: View {
    var tint: Color = .green
    var rowBackground: Color = Color(.secondarySystemGroupedBackground)
    var cornerRadius: CGFloat = 16
    var actionName = "Complete"
    var onComplete: () -> Void
    @ViewBuilder var content: () -> Content

    private enum Phase {
        case idle, checked, collapsed
    }

    @State private var phase = Phase.idle
    @State private var size = CGSize.zero
    @GestureState private var dragX: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var isPastThreshold: Bool {
        phase != .idle || CompletionSwipeRowMath.shouldComplete(translation: CGSize(width: dragX, height: 0), width: size.width)
    }

    var body: some View {
        content()
            .fixedSize(horizontal: false, vertical: true)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(rowBackground)
            .onGeometryChange(for: CGSize.self, of: \.size) { size = $0 }
            .offset(x: phase == .idle ? dragX : size.width)
            .animation(reduceMotion ? nil : .spring(duration: 0.35, bounce: 0.25), value: dragX == 0)
            .background(alignment: .leading) {
                ZStack(alignment: .leading) {
                    tint

                    Image(systemName: "checkmark")
                        .font(.title2.bold())
                        .foregroundStyle(CompletionSwipeRowContrastingForeground(background: tint))
                        .scaleEffect(isPastThreshold ? 1.15 : (reduceMotion ? 1 : 0.5))
                        .opacity(isPastThreshold ? 1 : 0.55)
                        .padding(.leading, 24)
                        .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.6), value: isPastThreshold)
                        .accessibilityHidden(true)
                }
            }
            .frame(height: phase == .idle ? nil : (phase == .collapsed ? 0 : size.height))
            .clipShape(.rect(cornerRadius: cornerRadius, style: .continuous))
            .simultaneousGesture(swipe)
            .sensoryFeedback(.impact(weight: .medium), trigger: isPastThreshold) { _, isNowPast in isNowPast }
            .accessibilityElement(children: .combine)
            .accessibilityAction(named: actionName) { complete() }
    }

    private var swipe: some Gesture {
        DragGesture(minimumDistance: 20)
            .updating($dragX) { value, state, _ in
                let forwardDrag = value.translation.width * forward
                guard phase == .idle, forwardDrag > abs(value.translation.height) else { return }
                state = forwardDrag
            }
            .onEnded { value in
                let translation = CGSize(width: value.translation.width * forward, height: value.translation.height)
                guard CompletionSwipeRowMath.shouldComplete(translation: translation, width: size.width) else { return }
                complete()
            }
    }

    private func complete() {
        guard phase == .idle else { return }

        if reduceMotion {
            phase = .collapsed
            onComplete()
            return
        }

        withAnimation(.spring(duration: 0.35, bounce: 0.1)) {
            phase = .checked
        } completion: {
            withAnimation(.easeInOut(duration: 0.25).delay(0.12)) {
                phase = .collapsed
            } completion: {
                onComplete()
            }
        }
    }
}

enum CompletionSwipeRowMath {
    static let maximumThreshold: CGFloat = 140

    /// A swipe counts when it goes mostly forward, a positive width, and covers enough of the row.
    static func shouldComplete(translation: CGSize, width: CGFloat) -> Bool {
        guard width > 0, translation.width > abs(translation.height) else { return false }
        return translation.width >= min(width * 0.4, maximumThreshold)
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct CompletionSwipeRowContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

private struct CompletionSwipeRowDemoTask: Identifiable {
    let id: String
    let systemImage: String
}

struct CompletionSwipeRowDemo: View {
    private static let allTasks = [
        CompletionSwipeRowDemoTask(id: "Water the plants", systemImage: "drop.fill"),
        CompletionSwipeRowDemoTask(id: "Call the dentist", systemImage: "phone.fill"),
        CompletionSwipeRowDemoTask(id: "Buy groceries", systemImage: "cart.fill"),
        CompletionSwipeRowDemoTask(id: "Send the invoice", systemImage: "doc.text.fill"),
        CompletionSwipeRowDemoTask(id: "Book the flight", systemImage: "airplane"),
    ]

    @State private var tasks = Self.allTasks

    var body: some View {
        ZStack {
            Color(.systemGroupedBackground)
                .ignoresSafeArea()

            ScrollView {
                VStack(alignment: .leading, spacing: 12) {
                    Text("Today")
                        .font(.largeTitle.bold())
                        .padding(.bottom, 4)

                    ForEach(tasks) { task in
                        CompletionSwipeRow(onComplete: { tasks.removeAll { $0.id == task.id } }) {
                            Label(task.id, systemImage: task.systemImage)
                                .font(.headline)
                                .padding(.horizontal, 18)
                                .frame(minHeight: 68, alignment: .leading)
                        }
                    }

                    if tasks.isEmpty {
                        Button("Start over") { tasks = Self.allTasks }
                            .buttonStyle(.borderedProminent)
                            .frame(maxWidth: .infinity)
                            .padding(.top, 24)
                    }
                }
                .padding(.horizontal, 20)
                .padding(.top, 16)
            }
        }
    }
}

#Preview {
    CompletionSwipeRowDemo()
}
```

## Double Tap Heart Overlay

Double tapping a photo throws a heart at the finger and marks the photo as liked.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/DoubleTapHeartOverlay/DoubleTapHeartOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Wraps a photo, usually an `Image`. A double tap throws a heart at the finger and marks it as liked.
///
/// With Reduce Motion on, the heart appears in place and fades out.
struct DoubleTapHeartOverlay<Content: View>: View {
    @Binding var isLiked: Bool
    var tint: Color = .pink
    /// Throws a heart without a touch, for demos. Each new value throws one more.
    var programmaticBurst: DoubleTapHeartOverlayRequest? = nil
    @ViewBuilder var content: () -> Content

    @State private var hearts: [DoubleTapHeartOverlayBurst] = []
    @State private var size = CGSize.zero
    @Environment(\.layoutDirection) private var layoutDirection

    private let maximumHearts = 12

    var body: some View {
        content()
            .overlay {
                ZStack {
                    ForEach(hearts) { heart in
                        DoubleTapHeartOverlayHeart(rotation: heart.rotation, tint: tint) {
                            hearts.removeAll { $0.id == heart.id }
                        }
                        .position(heart.location)
                    }
                }
                .allowsHitTesting(false)
                .accessibilityHidden(true)
            }
            .contentShape(.rect)
            .onGeometryChange(for: CGSize.self) { $0.size } action: { size = $0 }
            .gesture(
                SpatialTapGesture(count: 2).onEnded { value in
                    // Gestures report screen points, but `position` mirrors in right-to-left layouts.
                    let x = layoutDirection == .rightToLeft ? size.width - value.location.x : value.location.x
                    throwHeart(at: CGPoint(x: x, y: value.location.y))
                }
            )
            .onChange(of: programmaticBurst) { _, request in
                guard let request else { return }
                throwHeart(at: CGPoint(x: request.point.x * size.width, y: request.point.y * size.height))
            }
            .sensoryFeedback(.impact(weight: .light), trigger: hearts.count) { old, new in new > old }
            .accessibilityAction(named: isLiked ? "Unlike" : "Like") { isLiked.toggle() }
    }

    private func throwHeart(at location: CGPoint) {
        hearts.append(DoubleTapHeartOverlayBurst(location: location, rotation: .random(in: -18...18)))
        if hearts.count > maximumHearts { hearts.removeFirst() }
        isLiked = true
    }
}

struct DoubleTapHeartOverlayRequest: Equatable {
    let id = UUID()
    let point: UnitPoint
}

struct DoubleTapHeartOverlayBurst: Identifiable {
    let id = UUID()
    let location: CGPoint
    let rotation: Double
}

private struct DoubleTapHeartOverlayHeart: View {
    let rotation: Double
    let tint: Color
    let onFinish: () -> Void

    @State private var scale = 0.3
    @State private var opacity = 0.0
    @State private var rise = 0.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Image(systemName: "heart.fill")
            .font(.largeTitle)
            .imageScale(.large)
            .scaleEffect(1.6)
            .foregroundStyle(tint.gradient)
            .shadow(color: .black.opacity(0.3), radius: 8, y: 4)
            .scaleEffect(scale)
            .rotationEffect(.degrees(reduceMotion ? 0 : rotation))
            .offset(y: rise)
            .opacity(opacity)
            .onAppear(perform: run)
    }

    private func run() {
        if reduceMotion {
            scale = 1
            opacity = 1
            withAnimation(.easeOut(duration: 0.8)) {
                opacity = 0
            } completion: {
                onFinish()
            }
            return
        }

        withAnimation(.spring(duration: 0.3, bounce: 0.55)) {
            scale = 1
            opacity = 1
        } completion: {
            withAnimation(.easeIn(duration: 0.35).delay(0.15)) {
                rise = -70
                scale = 0.8
                opacity = 0
            } completion: {
                onFinish()
            }
        }
    }
}

// MARK: - Demo

struct DoubleTapHeartOverlayDemo: View {
    @State private var isLiked = false
    @State private var burst: DoubleTapHeartOverlayRequest?
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            Color(.systemGroupedBackground)
                .ignoresSafeArea()

            VStack(spacing: 0) {
                DoubleTapHeartOverlay(isLiked: $isLiked, programmaticBurst: burst) {
                    placeholderPhoto
                }

                HStack(spacing: 14) {
                    Button {
                        isLiked.toggle()
                    } label: {
                        // The icon is too small to hit. The padding widens what answers to a
                        // touch, and the same padding taken back keeps the row as it was.
                        Image(systemName: isLiked ? "heart.fill" : "heart")
                            .font(.title2)
                            .foregroundStyle(isLiked ? .pink : .primary)
                            .symbolEffect(.bounce, value: isLiked)
                            .padding(10)
                            .contentShape(.rect)
                            .padding(-10)
                    }
                    .accessibilityLabel(isLiked ? "Unlike" : "Like")

                    Text(isLiked ? "You liked this" : "Double tap the photo")
                        .font(.headline)

                    Spacer()
                }
                .padding(18)
            }
            .background(.background)
            .clipShape(.rect(cornerRadius: 24, style: .continuous))
            .padding(20)
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await playHearts()
        }
    }

    // Only the demo plays by itself, because a real double tap needs a finger.
    private func playHearts() async {
        let points = [UnitPoint(x: 0.5, y: 0.45), UnitPoint(x: 0.28, y: 0.28), UnitPoint(x: 0.72, y: 0.62)]
        while isAutoPlaying {
            for point in points {
                try? await Task.sleep(for: .seconds(1.1))
                guard !Task.isCancelled, isAutoPlaying else { return }
                burst = DoubleTapHeartOverlayRequest(point: point)
            }
            try? await Task.sleep(for: .seconds(0.7))
            guard !Task.isCancelled, isAutoPlaying else { return }
            isLiked = false
        }
    }

    private var placeholderPhoto: some View {
        LinearGradient(colors: [.orange, .pink, .purple], startPoint: .top, endPoint: .bottom)
            .frame(maxWidth: .infinity, maxHeight: 520)
            .overlay(alignment: .bottom) {
                Image(systemName: "mountain.2.fill")
                    .font(.largeTitle)
                    .imageScale(.large)
                    .scaleEffect(2.6)
                    .foregroundStyle(.white.opacity(0.5))
                    .padding(.bottom, 80)
            }
            .overlay(alignment: .topTrailing) {
                Image(systemName: "sun.max.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.yellow.opacity(0.85))
                    .padding(28)
            }
            .accessibilityElement()
            .accessibilityLabel("Photo of mountains at sunset")
    }
}

#Preview {
    DoubleTapHeartOverlayDemo()
}
```

## Drag Select Grid

A grid where dragging across tiles selects them all in one stroke, as in photo libraries.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/DragSelectGrid/DragSelectGrid.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A grid where a drag selects every tile from the first to the one under the finger.
///
/// Tiles are square, and a tap toggles one. Starting on a selected tile deselects
/// instead. Keep it out of a `ScrollView`, or the scroll will take the drag.
struct DragSelectGrid<Item: Identifiable, Tile: View>: View {
    let items: [Item]
    @Binding var selection: Set<Item.ID>
    var columns = 4
    var spacing: CGFloat = 4
    @ViewBuilder var tile: (Item, Bool) -> Tile

    private struct Stroke {
        var base: Set<Item.ID>
        var start: Int
        var selecting: Bool
    }

    @State private var stroke: Stroke?
    @State private var gridWidth: CGFloat = 0
    @GestureState private var isDragging = false
    @Environment(\.layoutDirection) private var layoutDirection

    private var columnCount: Int { DragSelectGridMath.clampedColumns(columns) }
    private var gap: CGFloat { max(spacing, 0) }

    var body: some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: gap), count: columnCount), spacing: gap) {
            ForEach(items) { item in
                let isSelected = selection.contains(item.id)

                Color.clear
                    .aspectRatio(1, contentMode: .fit)
                    .overlay { tile(item, isSelected) }
                    .contentShape(.rect)
                    .onTapGesture { toggle(item) }
                    .accessibilityElement(children: .combine)
                    .accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
                    .accessibilityAction { toggle(item) }
            }
        }
        .onGeometryChange(for: CGFloat.self, of: \.size.width) { gridWidth = $0 }
        .simultaneousGesture(drag)
        .onChange(of: isDragging) { _, dragging in
            if !dragging { stroke = nil }
        }
        .sensoryFeedback(.selection, trigger: selection.count)
    }

    private var drag: some Gesture {
        DragGesture(minimumDistance: 10)
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { value in
                if stroke == nil, let start = index(at: value.startLocation) {
                    stroke = Stroke(base: selection, start: start, selecting: !selection.contains(items[start].id))
                }
                guard let stroke, let current = index(at: value.location) else { return }
                selection = DragSelectGridMath.selection(
                    base: stroke.base,
                    ids: items.map(\.id),
                    from: stroke.start,
                    to: current,
                    selecting: stroke.selecting
                )
            }
    }

    private func toggle(_ item: Item) {
        if selection.contains(item.id) {
            selection.remove(item.id)
        } else {
            selection.insert(item.id)
        }
    }

    private func index(at point: CGPoint) -> Int? {
        // Gestures report screen points, but the grid mirrors in right-to-left layouts.
        let x = layoutDirection == .rightToLeft ? gridWidth - point.x : point.x
        return DragSelectGridMath.index(at: CGPoint(x: x, y: point.y), width: gridWidth, columns: columnCount, spacing: gap, count: items.count)
    }
}

enum DragSelectGridMath {
    static func clampedColumns(_ columns: Int) -> Int {
        min(max(columns, 1), 24)
    }

    /// The tile under a point, or the nearest one when the point is outside the grid.
    static func index(at point: CGPoint, width: CGFloat, columns: Int, spacing: CGFloat, count: Int) -> Int? {
        guard count > 0, width > 0, point.x.isFinite, point.y.isFinite else { return nil }

        let columns = clampedColumns(columns)
        let gap = max(spacing, 0)
        let side = (width - gap * CGFloat(columns - 1)) / CGFloat(columns)
        guard side > 0 else { return nil }

        let rows = (count - 1) / columns + 1
        let column = Int(min(max(point.x / (side + gap), 0), CGFloat(columns - 1)))
        let row = Int(min(max(point.y / (side + gap), 0), CGFloat(rows - 1)))
        return min(row * columns + column, count - 1)
    }

    /// The selection during a stroke: what was selected before, plus or minus the tiles it covers.
    static func selection<ID: Hashable>(
        base: Set<ID>,
        ids: [ID],
        from start: Int,
        to current: Int,
        selecting: Bool
    ) -> Set<ID> {
        guard !ids.isEmpty else { return base }

        let first = min(max(min(start, current), 0), ids.count - 1)
        let last = min(max(max(start, current), 0), ids.count - 1)
        let covered = Set(ids[first...last])
        return selecting ? base.union(covered) : base.subtracting(covered)
    }
}

// MARK: - Demo

private struct DragSelectGridDemoPhoto: Identifiable {
    let id: Int
    let hue: Double
    let systemImage: String
}

struct DragSelectGridDemo: View {
    private let photos: [DragSelectGridDemoPhoto] = {
        let symbols = ["sun.max.fill", "leaf.fill", "moon.stars.fill", "flame.fill", "cloud.fill", "drop.fill"]
        return (0..<20).map { index in
            DragSelectGridDemoPhoto(id: index, hue: Double(index) / 20, systemImage: symbols[index % symbols.count])
        }
    }()

    @State private var selection: Set<Int> = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 16) {
            HStack {
                Text(selection.isEmpty ? "Drag to select" : "\(selection.count) selected")
                    .font(.title2.bold())
                    .contentTransition(reduceMotion ? .identity : .numericText())
                Spacer()
                Button {
                    selection = []
                } label: {
                    // A word is too small to hit. The padding widens what answers to a touch,
                    // and the same padding taken back keeps the layout as it was.
                    Text("Clear")
                        .padding(12)
                        .contentShape(.rect)
                        .padding(-12)
                }
                .disabled(selection.isEmpty)
            }
            .animation(reduceMotion ? nil : .snappy, value: selection.count)
            .padding(.horizontal, 16)

            DragSelectGrid(items: photos, selection: $selection) { photo, isSelected in
                tile(photo, isSelected: isSelected)
            }

            Spacer(minLength: 0)
        }
        .padding(.top, 16)
    }

    private func tile(_ photo: DragSelectGridDemoPhoto, isSelected: Bool) -> some View {
        Rectangle()
            .fill(
                LinearGradient(
                    colors: [Color(hue: photo.hue, saturation: 0.55, brightness: 0.95), Color(hue: photo.hue, saturation: 0.85, brightness: 0.6)],
                    startPoint: .top,
                    endPoint: .bottom
                )
            )
            .overlay {
                Image(systemName: photo.systemImage)
                    .font(.title)
                    .foregroundStyle(.white.opacity(0.8))
            }
            .overlay(alignment: .bottomTrailing) {
                if isSelected {
                    Image(systemName: "checkmark.circle.fill")
                        .font(.title3)
                        .symbolRenderingMode(.palette)
                        .foregroundStyle(.white, .blue)
                        .padding(5)
                }
            }
            .scaleEffect(isSelected && !reduceMotion ? 0.9 : 1)
            .animation(reduceMotion ? nil : .spring(duration: 0.25, bounce: 0.3), value: isSelected)
            .accessibilityElement()
            .accessibilityLabel("Photo \(photo.id + 1)")
    }
}

#Preview {
    DragSelectGridDemo()
}
```

## Drop Zone Highlight

A drop target that highlights and shows a hint while a dragged item hovers over it and clears when the drag leaves.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/DropZoneHighlight/DropZoneHighlight.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A drop target that lights up and shows a hint while something hovers over it.
///
/// `onDrop` returns whether the drop was accepted. With Reduce Motion on, the
/// highlight changes color without growing.
struct DropZoneHighlight<Payload: Transferable>: View {
    var title = "Drop here"
    var hint = "Release to add"
    var systemImage = "tray.and.arrow.down"
    var tint: Color = .blue
    var onDrop: ([Payload]) -> Bool

    @State private var isTargeted = false
    @ScaledMetric(relativeTo: .headline) private var minimumHeight = 150.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        let shape = RoundedRectangle(cornerRadius: 22, style: .continuous)

        VStack(spacing: 10) {
            Image(systemName: systemImage)
                .font(.largeTitle)
                .accessibilityHidden(true)
            Text(isTargeted ? hint : title)
                .font(.headline)
                .contentTransition(.opacity)
        }
        .foregroundStyle(isTargeted ? .white : tint)
        .frame(maxWidth: .infinity, minHeight: minimumHeight)
        .padding()
        .background(isTargeted ? tint : tint.opacity(0.1), in: shape)
        .overlay {
            shape.strokeBorder(tint, style: StrokeStyle(lineWidth: 2, dash: isTargeted ? [] : [8, 6]))
        }
        .scaleEffect(isTargeted && !reduceMotion ? 1.04 : 1)
        .animation(reduceMotion ? .easeInOut(duration: 0.15) : .spring(duration: 0.3, bounce: 0.35), value: isTargeted)
        .contentShape(shape)
        .dropDestination(for: Payload.self) { items, _ in
            guard !items.isEmpty else { return false }
            return onDrop(items)
        } isTargeted: { targeted in
            isTargeted = targeted
        }
        .accessibilityElement(children: .combine)
    }
}

// MARK: - Demo

struct DropZoneHighlightDemo: View {
    private static let files = ["Report.pdf", "Photo.heic", "Notes.txt", "Budget.xlsx"]
    @State private var waiting = files
    @State private var dropped: [String] = []
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            Color(.systemGroupedBackground)
                .ignoresSafeArea()

            ScrollView {
                VStack(alignment: .leading, spacing: 24) {
                    Text("Files")
                        .font(.largeTitle.bold())

                    ForEach(waiting, id: \.self) { name in
                        chip(name)
                            // Without it the preview of the drag is the chip on a white rectangle.
                            .contentShape(.dragPreview, .capsule)
                            .draggable(name)
                            .accessibilityAction(named: "Add to the box") { add([name]) }
                    }

                    DropZoneHighlight<String> { items in
                        add(items)
                        return true
                    }

                    Text(dropped.isEmpty ? "Nothing in the box yet" : "In the box: \(dropped.joined(separator: ", "))")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)

                    // Only for this demo: a way back once every file is in the box.
                    if waiting.isEmpty {
                        Button("Start over") {
                            withAnimation(reduceMotion ? nil : .snappy) {
                                waiting = Self.files
                                dropped = []
                            }
                        }
                        .buttonStyle(.borderedProminent)
                    }
                }
                .padding(24)
            }
        }
    }

    private func add(_ items: [String]) {
        withAnimation(reduceMotion ? nil : .snappy) {
            waiting.removeAll(where: items.contains)
            dropped.append(contentsOf: items)
        }
    }

    private func chip(_ name: String) -> some View {
        Label(name, systemImage: "doc.fill")
            .font(.headline)
            .padding(.horizontal, 16)
            .padding(.vertical, 12)
            .background(.background, in: .capsule)
    }
}

#Preview {
    DropZoneHighlightDemo()
}
```

## Long Press Radial Menu

A long press opens a ring of actions, and dragging onto one of them selects it on release.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/LongPressRadialMenu/LongPressRadialMenu.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct LongPressRadialMenuItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let action: () -> Void
}

/// A long press opens a ring of actions. Drag onto one and let go to choose it.
///
/// VoiceOver offers the same actions in its Actions list. With Reduce Motion on,
/// the ring fades in place.
struct LongPressRadialMenu<Label: View>: View {
    let items: [LongPressRadialMenuItem]
    var radius: CGFloat = 104
    var minimumDuration = 0.35
    var tint: Color = .indigo
    var accessibilityTitle = "Actions"
    @ViewBuilder var label: () -> Label

    private enum Press: Equatable {
        case idle
        case pressing
        case open(CGSize)
    }

    @GestureState private var press = Press.idle
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private var isOpen: Bool {
        if case .open = press { return true }
        return false
    }

    private var hoveredIndex: Int? {
        guard case .open(let translation) = press else { return nil }
        return LongPressRadialMenuMath.index(translation: translation, count: items.count, radius: radius)
    }

    var body: some View {
        label()
            .scaleEffect(press == .idle || reduceMotion ? 1 : 0.9)
            .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.3), value: press == .idle)
            .contentShape(.rect)
            .overlay { ring.allowsHitTesting(false).accessibilityHidden(true) }
            .gesture(gesture)
            .sensoryFeedback(.impact(weight: .medium), trigger: isOpen) { _, nowOpen in nowOpen }
            .sensoryFeedback(.selection, trigger: hoveredIndex)
            .accessibilityElement(children: .combine)
            .accessibilityLabel(accessibilityTitle)
            .accessibilityActions {
                ForEach(items) { item in
                    Button(item.title, action: item.action)
                }
            }
    }

    private var ring: some View {
        ZStack {
            LongPressRadialMenuBubbles(items: items, radius: radius, tint: tint, isOpen: isOpen, hoveredIndex: hoveredIndex)
                // The bubbles sit on a fixed radius, so they read their size under this cap. The title below does not.
                .dynamicTypeSize(...DynamicTypeSize.xxxLarge)

            if let hoveredIndex, items.indices.contains(hoveredIndex) {
                // Its bottom edge clears the largest bubble, so a taller title grows away from the ring.
                // The overlay offers it the width of the label, which would break a word in two.
                Text(items[hoveredIndex].title)
                    .font(.headline)
                    .lineLimit(1)
                    .fixedSize()
                    .padding(.horizontal, 14)
                    .padding(.vertical, 8)
                    .background(.regularMaterial, in: .capsule)
                    .alignmentGuide(VerticalAlignment.center) { $0[.bottom] }
                    .offset(y: -(radius + 48))
            }
        }
    }

    private var gesture: some Gesture {
        LongPressGesture(minimumDuration: max(minimumDuration, 0))
            .sequenced(before: DragGesture(minimumDistance: 0))
            .updating($press) { value, state, _ in
                switch value {
                case .first(true): state = .pressing
                case .second(true, let drag): state = .open(layoutTranslation(drag?.translation ?? .zero))
                default: state = .idle
                }
            }
            .onEnded { value in
                guard case .second(true, let drag?) = value,
                      let index = LongPressRadialMenuMath.index(translation: layoutTranslation(drag.translation), count: items.count, radius: radius),
                      items.indices.contains(index)
                else { return }
                items[index].action()
            }
    }

    /// Gestures report screen points, but layout mirrors in right-to-left layouts.
    private func layoutTranslation(_ translation: CGSize) -> CGSize {
        layoutDirection == .rightToLeft ? CGSize(width: -translation.width, height: translation.height) : translation
    }
}

private struct LongPressRadialMenuBubbles: View {
    let items: [LongPressRadialMenuItem]
    let radius: CGFloat
    let tint: Color
    let isOpen: Bool
    let hoveredIndex: Int?

    @ScaledMetric(relativeTo: .title3) private var bubbleSize = 56.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
            let isHovered = hoveredIndex == index
            let offset = LongPressRadialMenuMath.offset(index: index, count: items.count, radius: radius)

            Image(systemName: item.systemImage)
                .font(.title3.weight(.semibold))
                .foregroundStyle(isHovered ? .white : tint)
                .frame(width: bubbleSize, height: bubbleSize)
                .background(isHovered ? AnyShapeStyle(tint) : AnyShapeStyle(.regularMaterial), in: .circle)
                .scaleEffect(reduceMotion ? 1 : (isOpen ? (isHovered ? 1.2 : 1) : 0.3))
                .offset(isOpen || reduceMotion ? offset : .zero)
                .opacity(isOpen ? 1 : 0)
                .animation(
                    reduceMotion
                        ? .easeInOut(duration: 0.15)
                        : .spring(duration: 0.35, bounce: 0.4).delay(isOpen ? Double(index) * 0.02 : 0),
                    value: isOpen
                )
                .animation(reduceMotion ? nil : .spring(duration: 0.2), value: isHovered)
        }
    }
}

enum LongPressRadialMenuMath {
    /// How far the finger must travel, as a share of the radius, to reach the ring.
    static let deadZone = 0.45

    /// The direction of an item in radians, clockwise from the top.
    static func angle(index: Int, count: Int) -> Double {
        guard count > 0 else { return 0 }
        return 2 * .pi * Double(index) / Double(count)
    }

    static func offset(index: Int, count: Int, radius: CGFloat) -> CGSize {
        let angle = angle(index: index, count: count)
        return CGSize(width: sin(angle) * radius, height: -cos(angle) * radius)
    }

    /// The item nearest the finger, or `nil` while the finger is still near the center.
    static func index(translation: CGSize, count: Int, radius: CGFloat) -> Int? {
        guard count > 0, radius > 0 else { return nil }
        guard hypot(translation.width, translation.height) >= radius * deadZone else { return nil }

        let clockwise = atan2(translation.width, -translation.height)
        let positive = clockwise < 0 ? clockwise + 2 * .pi : clockwise
        let step = 2 * .pi / Double(count)
        return Int((positive / step).rounded()) % count
    }
}

// MARK: - Demo

struct LongPressRadialMenuDemo: View {
    @State private var lastAction = "Hold, then drag"

    private var items: [LongPressRadialMenuItem] {
        [
            LongPressRadialMenuItem(id: "camera", title: "Camera", systemImage: "camera.fill") { lastAction = "Camera" },
            LongPressRadialMenuItem(id: "note", title: "Note", systemImage: "note.text") { lastAction = "Note" },
            LongPressRadialMenuItem(id: "share", title: "Share", systemImage: "square.and.arrow.up") { lastAction = "Share" },
            LongPressRadialMenuItem(id: "star", title: "Favorite", systemImage: "star.fill") { lastAction = "Favorite" },
            LongPressRadialMenuItem(id: "trash", title: "Delete", systemImage: "trash.fill") { lastAction = "Delete" },
        ]
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack {
                Text(lastAction)
                    .font(.largeTitle.bold())
                    .foregroundStyle(.white)
                    .padding(.top, 48)
                Spacer()
            }

            LongPressRadialMenu(items: items) {
                Image(systemName: "plus")
                    .font(.title.bold())
                    .foregroundStyle(.indigo)
                    .frame(width: 84, height: 84)
                    .background(.white, in: .circle)
                    .shadow(color: .black.opacity(0.25), radius: 14, y: 8)
            }
        }
    }
}

#Preview {
    LongPressRadialMenuDemo()
}
```

## Pinch Zoom View

A view you pinch to zoom and drag, which springs back to its bounds.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/PinchZoomView/PinchZoomView.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum PinchZoomViewMath {
    static func clamp(_ value: CGFloat, to range: ClosedRange<CGFloat>) -> CGFloat {
        min(max(value, range.lowerBound), range.upperBound)
    }

    /// Follows the value inside the range and resists beyond it, so a gesture can overshoot a little.
    static func rubberBand(_ value: CGFloat, in range: ClosedRange<CGFloat>, resistance: CGFloat = 0.3) -> CGFloat {
        let limit = clamp(value, to: range)
        return limit + (value - limit) * resistance
    }

    /// How far content filling its container can move before showing an empty edge.
    static func maxOffset(scale: CGFloat, size: CGSize) -> CGSize {
        CGSize(width: max((scale - 1) * size.width / 2, 0), height: max((scale - 1) * size.height / 2, 0))
    }

    static func clampedOffset(_ offset: CGSize, scale: CGFloat, size: CGSize) -> CGSize {
        let limit = maxOffset(scale: scale, size: size)
        return CGSize(
            width: clamp(offset.width, to: -limit.width...limit.width),
            height: clamp(offset.height, to: -limit.height...limit.height)
        )
    }
}

/// Pinch to zoom and drag to pan. Going past the limits springs back when you let go.
///
/// Double tap toggles the zoom. With Reduce Motion on, it settles without a spring.
struct PinchZoomView<Content: View>: View {
    @Binding var scale: CGFloat
    var minScale: CGFloat = 1
    var maxScale: CGFloat = 4
    @ViewBuilder var content: () -> Content

    @State private var pinch: CGFloat = 1
    @State private var offset = CGSize.zero
    @State private var drag = CGSize.zero
    @State private var size = CGSize.zero
    @GestureState private var isGesturing = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var settle: Animation {
        reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.45, bounce: 0.25)
    }

    private var liveScale: CGFloat {
        PinchZoomViewMath.rubberBand(scale * pinch, in: minScale...maxScale)
    }

    private var liveOffset: CGSize {
        let limit = PinchZoomViewMath.maxOffset(scale: liveScale, size: size)
        return CGSize(
            width: PinchZoomViewMath.rubberBand(offset.width + drag.width, in: -limit.width...limit.width),
            height: PinchZoomViewMath.rubberBand(offset.height + drag.height, in: -limit.height...limit.height)
        )
    }

    var body: some View {
        content()
            .scaleEffect(liveScale)
            .offset(liveOffset)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .contentShape(.rect)
            .clipped()
            .onGeometryChange(for: CGSize.self) { $0.size } action: { newSize in
                size = newSize
                offset = PinchZoomViewMath.clampedOffset(offset, scale: scale, size: newSize)
            }
            .gesture(zoomAndPan)
            .onChange(of: isGesturing) { _, gesturing in
                if !gesturing { settleGesture() }
            }
            .onTapGesture(count: 2) { zoom(to: scale > minScale ? minScale : min(2, maxScale)) }
            .onChange(of: scale) { _, newScale in
                withAnimation(settle) { offset = PinchZoomViewMath.clampedOffset(offset, scale: newScale, size: size) }
            }
            .accessibilityValue("\(Int((scale * 100).rounded())) percent")
            .accessibilityZoomAction { action in
                zoom(to: scale + (action.direction == .zoomIn ? 0.5 : -0.5))
            }
    }

    private var zoomAndPan: some Gesture {
        MagnifyGesture()
            .simultaneously(with: DragGesture(minimumDistance: 4))
            .updating($isGesturing) { _, state, _ in state = true }
            .onChanged { value in
                if let magnification = value.first?.magnification { pinch = magnification }
                if let translation = value.second?.translation {
                    drag = CGSize(width: translation.width * forward, height: translation.height)
                }
            }
            .onEnded { _ in settleGesture() }
    }

    /// Commits the live pinch and drag. A gesture the system cancels skips `onEnded`, so this
    /// also runs when `isGesturing` resets. Running it twice changes nothing.
    private func settleGesture() {
        let newScale = PinchZoomViewMath.clamp(scale * pinch, to: minScale...maxScale)
        let target = CGSize(width: offset.width + drag.width, height: offset.height + drag.height)
        withAnimation(settle) {
            scale = newScale
            pinch = 1
            drag = .zero
            offset = PinchZoomViewMath.clampedOffset(target, scale: newScale, size: size)
        }
    }

    private func zoom(to target: CGFloat) {
        withAnimation(settle) { scale = PinchZoomViewMath.clamp(target, to: minScale...maxScale) }
    }
}

// MARK: - Demo

struct PinchZoomViewDemo: View {
    @State private var scale: CGFloat = 1
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var zoomText: String {
        Double(scale).formatted(.number.precision(.fractionLength(1)))
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            PinchZoomView(scale: $scale) { scene }
                .ignoresSafeArea()

            Text(zoomText)
                .font(.system(.title2, design: .rounded, weight: .bold))
                .monospacedDigit()
                .contentTransition(.numericText())
                .padding(.horizontal, 24)
                .padding(.vertical, 12)
                .background(.ultraThinMaterial, in: .capsule)
                .padding(.bottom, 24)
                .accessibilityLabel("Zoom \(zoomText)")
        }
        .task {
            guard !reduceMotion else { return }
            for target: CGFloat in [2.6, 1, 2.6, 1] {
                try? await Task.sleep(for: .seconds(0.5))
                withAnimation(.spring(duration: 0.8, bounce: 0.2)) { scale = target }
                try? await Task.sleep(for: .seconds(1))
            }
        }
    }

    private var scene: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .pink, .orange], startPoint: .top, endPoint: .bottom)

            Image(systemName: "sun.max.fill")
                .font(.system(.largeTitle))
                .imageScale(.large)
                .foregroundStyle(.yellow)
                .offset(y: -120)

            Image(systemName: "mountain.2.fill")
                .resizable()
                .scaledToFit()
                .foregroundStyle(.black.opacity(0.45))
                .padding(28)
                .offset(y: 90)
        }
        .accessibilityElement()
        .accessibilityLabel("A mountain at sunset")
    }
}

#Preview {
    PinchZoomViewDemo()
}
```

## Scratch To Reveal

A cover you scratch with a finger to uncover the content beneath it.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/ScratchToReveal/ScratchToReveal.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Tracks how much of a scratch card is uncovered, on a coarse grid of cells.
struct ScratchToRevealCoverage: Equatable {
    let columns: Int
    let rows: Int
    private(set) var cleared: Set<Int> = []

    init(columns: Int = 24, rows: Int = 24) {
        self.columns = min(max(columns, 1), 256)
        self.rows = min(max(rows, 1), 256)
    }

    var fraction: Double {
        Double(cleared.count) / Double(columns * rows)
    }

    /// Clears the cells under a brush line. The points are in a view of the given size.
    mutating func scratch(from start: CGPoint, to end: CGPoint, brushWidth: CGFloat, in size: CGSize) {
        guard size.width > 0, size.height > 0, brushWidth > 0 else { return }
        let distance = hypot(end.x - start.x, end.y - start.y)
        guard distance.isFinite else { return }

        let steps = Int(min(distance / (brushWidth / 2), 256)) + 1
        for step in 0...steps {
            let progress = CGFloat(step) / CGFloat(steps)
            let point = CGPoint(x: start.x + (end.x - start.x) * progress, y: start.y + (end.y - start.y) * progress)
            clear(around: point, radius: brushWidth / 2, in: size)
        }
    }

    private mutating func clear(around point: CGPoint, radius: CGFloat, in size: CGSize) {
        let cell = CGSize(width: size.width / CGFloat(columns), height: size.height / CGFloat(rows))
        let reach = max(radius, hypot(cell.width, cell.height) / 2)

        for row in index((point.y - reach) / cell.height, limit: rows)...index((point.y + reach) / cell.height, limit: rows) {
            for column in index((point.x - reach) / cell.width, limit: columns)...index((point.x + reach) / cell.width, limit: columns) {
                let center = CGPoint(x: (CGFloat(column) + 0.5) * cell.width, y: (CGFloat(row) + 0.5) * cell.height)
                if hypot(center.x - point.x, center.y - point.y) <= reach {
                    cleared.insert(row * columns + column)
                }
            }
        }
    }

    private func index(_ value: CGFloat, limit: Int) -> Int {
        Int(min(max(value.rounded(.down), 0), CGFloat(limit - 1)))
    }
}

/// A cover you scratch with a finger to uncover the content beneath it.
///
/// The rest falls away once `revealThreshold` of the cover is gone. To start over, change the
/// view's `id`. VoiceOver users double tap to reveal, and Reduce Motion removes the final fade.
struct ScratchToReveal<Content: View, Cover: View>: View {
    var brushWidth: CGFloat = 44
    var revealThreshold: Double = 0.6
    var onReveal: (() -> Void)? = nil
    @ViewBuilder var content: () -> Content
    @ViewBuilder var cover: () -> Cover

    @State private var strokes: [[CGPoint]] = []
    @State private var strokeStart: CGPoint?
    @State private var coverage = ScratchToRevealCoverage()
    @State private var isRevealed = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var brush: CGFloat { max(brushWidth, 1) }

    var body: some View {
        content()
            .accessibilityHidden(!isRevealed)
            .overlay {
                if !isRevealed {
                    GeometryReader { geometry in
                        cover()
                            .frame(width: geometry.size.width, height: geometry.size.height)
                            .mask { scratchMask }
                            .contentShape(.rect)
                            .gesture(scratch(in: geometry.size))
                    }
                    .transition(.opacity)
                    .accessibilityElement(children: .ignore)
                    .accessibilityLabel("Scratch card")
                    .accessibilityHint("Double tap to reveal what is underneath")
                    .accessibilityAddTraits(.isButton)
                    .accessibilityAction { reveal() }
                }
            }
    }

    private var scratchMask: some View {
        Canvas { context, size in
            context.fill(Path(CGRect(origin: .zero, size: size)), with: .color(.black))
            context.blendMode = .destinationOut
            let style = StrokeStyle(lineWidth: brush, lineCap: .round, lineJoin: .round)
            for stroke in strokes {
                var path = Path()
                path.addLines(stroke)
                context.stroke(path, with: .color(.black), style: style)
            }
        }
    }

    private func scratch(in size: CGSize) -> some Gesture {
        DragGesture(minimumDistance: 0)
            .onChanged { value in
                if strokeStart != value.startLocation {
                    strokeStart = value.startLocation
                    strokes.append([value.startLocation])
                }
                guard let last = strokes.indices.last, !isRevealed else { return }

                let previous = strokes[last].last ?? value.location
                strokes[last].append(value.location)
                coverage.scratch(from: previous, to: value.location, brushWidth: brush, in: size)
                if coverage.fraction >= min(max(revealThreshold, 0.01), 1) { reveal() }
            }
            .onEnded { _ in strokeStart = nil }
    }

    private func reveal() {
        guard !isRevealed else { return }
        withAnimation(reduceMotion ? nil : .easeOut(duration: 0.35)) { isRevealed = true }
        onReveal?()
    }
}

// MARK: - Demo

struct ScratchToRevealDemo: View {
    @State private var round = 0
    @State private var didWin = false

    var body: some View {
        VStack(spacing: 24) {
            Text(didWin ? "You found it!" : "Scratch the card")
                .font(.title.bold())

            ScratchToReveal(brushWidth: 56, revealThreshold: 0.7, onReveal: { didWin = true }) {
                prize
            } cover: {
                cover
            }
            .id(round)
            .frame(height: 240)
            .clipShape(.rect(cornerRadius: 28))
            .shadow(color: .black.opacity(0.2), radius: 16, y: 8)
            .padding(.horizontal, 28)

            Button("Try again", systemImage: "arrow.counterclockwise") {
                round += 1
                didWin = false
            }
            .buttonStyle(.bordered)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }

    private var prize: some View {
        VStack(spacing: 8) {
            Image(systemName: "gift.fill")
                .font(.largeTitle)
                .accessibilityHidden(true)
            Text("50% off")
                .font(.largeTitle.bold())
            Text("on your next order")
                .font(.headline)
        }
        .foregroundStyle(.white)
        .minimumScaleFactor(0.5)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
        .accessibilityElement(children: .combine)
    }

    private var cover: some View {
        LinearGradient(
            colors: [Color(white: 0.82), Color(white: 0.62), Color(white: 0.8)],
            startPoint: .topLeading,
            endPoint: .bottomTrailing
        )
        .overlay {
            Label("Scratch here", systemImage: "hand.draw.fill")
                .font(.title3.bold())
                .foregroundStyle(.white)
        }
    }
}

#Preview {
    ScratchToRevealDemo()
}
```

## Snap Corner Draggable

A floating view that can be dragged anywhere and springs to the nearest safe-area corner when released.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/SnapCornerDraggable/SnapCornerDraggable.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SnapCornerDraggableCorner: CaseIterable, Hashable, Sendable {
    case topLeading, topTrailing, bottomLeading, bottomTrailing

    var alignment: Alignment {
        switch self {
        case .topLeading: .topLeading
        case .topTrailing: .topTrailing
        case .bottomLeading: .bottomLeading
        case .bottomTrailing: .bottomTrailing
        }
    }

    /// The name VoiceOver reads. The leading corners are on the right in a right-to-left layout.
    func title(in layoutDirection: LayoutDirection) -> String {
        let isTop = self == .topLeading || self == .topTrailing
        let isLeading = self == .topLeading || self == .bottomLeading
        let isLeft = isLeading == (layoutDirection == .leftToRight)
        return "\(isTop ? "top" : "bottom") \(isLeft ? "left" : "right")"
    }

    /// The corner of the quadrant a point falls in, in a container of the given size.
    static func nearest(to point: CGPoint, in size: CGSize) -> Self {
        switch (point.x < size.width / 2, point.y < size.height / 2) {
        case (true, true): .topLeading
        case (false, true): .topTrailing
        case (true, false): .bottomLeading
        case (false, false): .bottomTrailing
        }
    }
}

/// A floating view you drag anywhere. It springs to the nearest corner of the safe area when
/// released, taking the speed of the flick into account.
///
/// Use it as an overlay: the empty space lets touches through. VoiceOver offers an action for
/// each corner, and with Reduce Motion on it moves there without a spring.
struct SnapCornerDraggable<Content: View>: View {
    @Binding var corner: SnapCornerDraggableCorner
    var inset: CGFloat = 16
    @ViewBuilder var content: () -> Content

    @State private var containerSize = CGSize.zero
    @GestureState private var translation = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let space = "SnapCornerDraggable"

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.3)
    }

    var body: some View {
        content()
            .offset(translation)
            .animation(animation, value: translation == .zero)
            .gesture(drag)
            .accessibilityElement(children: .combine)
            .accessibilityActions {
                ForEach(SnapCornerDraggableCorner.allCases.filter { $0 != corner }, id: \.self) { target in
                    Button("Move to \(target.title(in: layoutDirection))") {
                        withAnimation(animation) { corner = target }
                    }
                }
            }
            .padding(max(inset, 0))
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: corner.alignment)
            .coordinateSpace(.named(space))
            .onGeometryChange(for: CGSize.self) { $0.size } action: { containerSize = $0 }
    }

    private var drag: some Gesture {
        DragGesture(coordinateSpace: .named(space))
            .updating($translation) { value, state, _ in
                state = CGSize(width: value.translation.width * forward, height: value.translation.height)
            }
            .onEnded { value in
                var point = value.predictedEndLocation
                if layoutDirection == .rightToLeft { point.x = containerSize.width - point.x }
                let target = SnapCornerDraggableCorner.nearest(to: point, in: containerSize)
                withAnimation(animation) { corner = target }
            }
    }
}

// MARK: - Demo

struct SnapCornerDraggableDemo: View {
    @State private var corner = SnapCornerDraggableCorner.bottomTrailing
    @Environment(\.layoutDirection) private var layoutDirection

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 8) {
                Image(systemName: "person.2.fill")
                    .font(.system(.largeTitle, design: .rounded))
                    .accessibilityHidden(true)
                Text("On a call")
                    .font(.title.bold())
                Text("Drag the tile to any corner")
                    .font(.subheadline)
                    .opacity(0.8)
            }
            .foregroundStyle(.white)
            .multilineTextAlignment(.center)
            .padding(.horizontal, 32)

            SnapCornerDraggable(corner: $corner) {
                tile
            }
        }
    }

    private var tile: some View {
        RoundedRectangle(cornerRadius: 24)
            .fill(LinearGradient(colors: [.teal, .blue], startPoint: .topLeading, endPoint: .bottomTrailing))
            .overlay {
                Image(systemName: "person.crop.circle.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.white)
            }
            .frame(width: 120, height: 170)
            .shadow(color: .black.opacity(0.3), radius: 14, y: 8)
            .accessibilityLabel("Your camera, \(corner.title(in: layoutDirection))")
    }
}

#Preview {
    SnapCornerDraggableDemo()
}
```

## Swipe Action Row

A row that reveals action buttons under a horizontal swipe and snaps open or closed.

Category: Gestures. Minimum: iOS 18.0. Path: Components/Gestures/SwipeActionRow/SwipeActionRow.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct SwipeActionRowAction: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let tint: Color
    let handler: () -> Void
}

enum SwipeActionRowPhysics {
    /// Where the row sits for a drag, negative toward the buttons: it cannot move past closed and resists past fully open.
    static func offset(resting: CGFloat, translation: CGFloat, revealWidth: CGFloat) -> CGFloat {
        let raw = resting + translation
        if raw > 0 { return 0 }
        if raw < -revealWidth { return -revealWidth + (raw + revealWidth) * 0.25 }
        return raw
    }

    static func settlesOpen(resting: CGFloat, predictedTranslation: CGFloat, revealWidth: CGFloat) -> Bool {
        revealWidth > 0 && resting + predictedTranslation < -revealWidth / 2
    }
}

/// The one row that is open, shared by every row, so opening another closes it.
@MainActor @Observable private final class SwipeActionRowOpenRow {
    static let shared = SwipeActionRowOpenRow()

    var id: UUID?
}

/// A row that reveals action buttons under a horizontal swipe and snaps open or closed.
///
/// Only one row is open at a time: opening another closes it, as in a system list.
/// Vertical drags are left to the scroll view around it. VoiceOver reaches the same buttons as
/// custom actions, and with Reduce Motion on the row settles without animating.
struct SwipeActionRow<Content: View>: View {
    let actions: [SwipeActionRowAction]
    var buttonWidth: CGFloat = 80
    @ViewBuilder var content: () -> Content

    @State private var id = UUID()
    @GestureState private var translation: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var isOpen: Bool { SwipeActionRowOpenRow.shared.id == id }
    private var width: CGFloat { max(buttonWidth, 0) }
    private var revealWidth: CGFloat { CGFloat(actions.count) * width }
    private var resting: CGFloat { isOpen ? -revealWidth : 0 }

    private var animation: Animation? {
        reduceMotion ? nil : .snappy(duration: 0.3)
    }

    var body: some View {
        content()
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(Color(uiColor: .secondarySystemGroupedBackground))
            .accessibilityElement(children: .combine)
            .accessibilityActions {
                ForEach(actions) { action in
                    Button(action.title, action: action.handler)
                }
            }
            .overlay {
                if isOpen {
                    Color.clear
                        .contentShape(.rect)
                        .onTapGesture { close() }
                        .accessibilityHidden(true)
                }
            }
            .offset(x: SwipeActionRowPhysics.offset(resting: resting, translation: translation, revealWidth: revealWidth))
            .background(alignment: .trailing) { buttons }
            .clipped()
            .simultaneousGesture(swipe)
            // A tap on another row closes the one that is open, and still reaches that row.
            .simultaneousGesture(TapGesture().onEnded {
                if !isOpen { withAnimation(animation) { SwipeActionRowOpenRow.shared.id = nil } }
            })
            .animation(animation, value: translation == 0)
    }

    private var buttons: some View {
        HStack(spacing: 0) {
            ForEach(actions) { action in
                Button {
                    close()
                    action.handler()
                } label: {
                    VStack(spacing: 4) {
                        Image(systemName: action.systemImage)
                            .font(.title3)
                        Text(action.title)
                            .font(.caption.weight(.semibold))
                            .lineLimit(1)
                            .minimumScaleFactor(0.6)
                    }
                    .foregroundStyle(SwipeActionRowContrastingForeground(background: action.tint))
                    .padding(.horizontal, 4)
                    .frame(width: width)
                    .frame(maxHeight: .infinity)
                    .background(action.tint)
                }
                .buttonStyle(.plain)
            }
        }
        .accessibilityHidden(true)
    }

    private var swipe: some Gesture {
        DragGesture(minimumDistance: 14)
            .updating($translation) { value, state, _ in
                if state != 0 || abs(value.translation.width) > abs(value.translation.height) {
                    state = value.translation.width * forward
                }
            }
            .onEnded { value in
                guard abs(value.translation.width) > abs(value.translation.height) else { return }
                let opens = SwipeActionRowPhysics.settlesOpen(
                    resting: resting,
                    predictedTranslation: value.predictedEndTranslation.width * forward,
                    revealWidth: revealWidth
                )
                withAnimation(animation) { setOpen(opens) }
            }
    }

    private func close() {
        withAnimation(animation) { setOpen(false) }
    }

    private func setOpen(_ opens: Bool) {
        let openRow = SwipeActionRowOpenRow.shared
        if opens {
            openRow.id = id
        } else if openRow.id == id {
            openRow.id = nil
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct SwipeActionRowContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct SwipeActionRowDemo: View {
    private struct Message: Identifiable {
        let id: String
        let preview: String
    }

    private static let allMessages = [
        Message(id: "Weekly report", preview: "The numbers look great this week"),
        Message(id: "Flight update", preview: "Your gate has changed to B12"),
        Message(id: "Dinner on Friday?", preview: "I found a new place downtown"),
        Message(id: "Design review", preview: "Notes from this morning's session"),
    ]
    @State private var messages = allMessages
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 12) {
                Text("Inbox")
                    .font(.largeTitle.bold())
                    .padding(.bottom, 4)

                ForEach(messages) { message in
                    SwipeActionRow(actions: actions(for: message)) {
                        row(message)
                    }
                    .clipShape(.rect(cornerRadius: 18))
                }

                // Only for this demo: a way back once every row is gone.
                if messages.isEmpty {
                    ContentUnavailableView {
                        Label("Inbox zero", systemImage: "tray")
                    } actions: {
                        Button("Start over") {
                            withAnimation(reduceMotion ? nil : .snappy) { messages = Self.allMessages }
                        }
                        .buttonStyle(.borderedProminent)
                    }
                }
            }
            .padding(.horizontal, 16)
            .padding(.top, 24)
        }
        .background(Color(uiColor: .systemGroupedBackground))
    }

    private func row(_ message: Message) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(message.id)
                .font(.headline)
            Text(message.preview)
                .font(.subheadline)
                .foregroundStyle(.secondary)
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 14)
        .frame(maxWidth: .infinity, minHeight: 84, alignment: .leading)
    }

    private func actions(for message: Message) -> [SwipeActionRowAction] {
        [
            SwipeActionRowAction(id: "archive", title: "Archive", systemImage: "archivebox.fill", tint: .indigo) {
                remove(message)
            },
            SwipeActionRowAction(id: "delete", title: "Delete", systemImage: "trash.fill", tint: .red) {
                remove(message)
            },
        ]
    }

    private func remove(_ message: Message) {
        withAnimation(reduceMotion ? nil : .snappy) {
            messages.removeAll { $0.id == message.id }
        }
    }
}

#Preview {
    SwipeActionRowDemo()
}
```

## Glass Action Menu

A floating Liquid Glass button whose actions morph out of it.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassActionMenu/GlassActionMenu.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

@available(iOS 26, *)
struct GlassActionItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let action: () -> Void
}

/// A floating Liquid Glass button whose actions morph out of it.
///
/// With Reduce Motion on, the actions appear without morphing.
@available(iOS 26, *)
struct GlassActionMenu: View {
    nonisolated private enum GlassID: Hashable, Sendable {
        case toggle
        case item(String)
    }

    let items: [GlassActionItem]

    @State private var isExpanded = false
    @Namespace private var namespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .bouncy(duration: 0.5, extraBounce: 0.05)
    }

    var body: some View {
        // Known issue: iOS 27.2 reports the toggle's accessibility frame as the whole
        // stack when expanded. iOS 26.5 reports it correctly.
        GlassEffectContainer(spacing: 18) {
            VStack(spacing: 14) {
                if isExpanded {
                    ForEach(items) { item in
                        glassButton(id: .item(item.id), systemImage: item.systemImage, label: item.title) {
                            withAnimation(animation) { isExpanded = false }
                            item.action()
                        }
                    }
                }

                glassButton(
                    id: .toggle,
                    systemImage: "plus",
                    label: isExpanded ? "Close actions" : "Show actions",
                    rotation: isExpanded ? 45 : 0
                ) {
                    withAnimation(animation) { isExpanded.toggle() }
                }
            }
        }
        // The buttons only hold icons. Each icon reads its size under this cap, which keeps a tall stack on screen.
        .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
    }

    private func glassButton(
        id: GlassID,
        systemImage: String,
        label: LocalizedStringResource,
        rotation: Double = 0,
        action: @escaping () -> Void
    ) -> some View {
        Button(action: action) {
            GlassActionMenuIcon(systemImage: systemImage, rotation: rotation)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(label)
        .glassEffect(.regular.interactive(), in: .circle)
        .glassEffectID(id, in: namespace)
    }
}

@available(iOS 26, *)
private struct GlassActionMenuIcon: View {
    let systemImage: String
    let rotation: Double

    @ScaledMetric(relativeTo: .title2) private var size = 58.0

    var body: some View {
        Image(systemName: systemImage)
            .font(.title2.weight(.semibold))
            .rotationEffect(.degrees(rotation))
            .frame(width: size, height: size)
            .contentShape(.circle)
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct GlassActionMenuDemo: View {
    @State private var lastAction = "Tap the button"

    private var items: [GlassActionItem] {
        [
            GlassActionItem(id: "share", title: "Share", systemImage: "square.and.arrow.up") { lastAction = "Share" },
            GlassActionItem(id: "favorite", title: "Favorite", systemImage: "star") { lastAction = "Favorite" },
            GlassActionItem(id: "delete", title: "Delete", systemImage: "trash") { lastAction = "Delete" },
        ]
    }

    var body: some View {
        ZStack(alignment: .bottomTrailing) {
            LinearGradient(colors: [.orange, .pink, .indigo], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            Text(lastAction)
                .font(.largeTitle.bold())
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            GlassActionMenu(items: items)
                .padding(24)
        }
    }
}

@available(iOS 26, *)
#Preview {
    GlassActionMenuDemo()
}
```

## Glass Button Gallery

A reference gallery of the glass and prominent glass button styles in several sizes, shapes and tints.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassButtonGallery/GlassButtonGallery.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A tidy reference sheet of the system Liquid Glass button styles.
///
/// The styles draw their own press response, which the system adapts to Reduce Motion.
@available(iOS 26, *)
struct GlassButtonGallery: View {
    var tints: [(name: String, color: Color)] = [
        ("Blue", .blue), ("Pink", .pink), ("Orange", .orange), ("Green", .green),
    ]
    var onPress: (String) -> Void = { _ in }

    private let sizes: [(name: String, size: ControlSize)] = [
        ("Mini", .mini), ("Small", .small), ("Regular", .regular), ("Large", .large), ("Extra Large", .extraLarge),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            section("Sizes") {
                Grid(horizontalSpacing: 16, verticalSpacing: 10) {
                    ForEach(sizes, id: \.name) { item in
                        GridRow {
                            glassButton(item.name, label: "\(item.name) glass").controlSize(item.size)
                            prominentButton(item.name, label: "\(item.name) prominent").controlSize(item.size)
                        }
                    }
                }
                .frame(maxWidth: .infinity)
            }

            section("Shapes") {
                HStack(spacing: 12) {
                    glassButton("Capsule", label: "Capsule").buttonBorderShape(.capsule)
                    prominentButton("Rounded", label: "Rounded").buttonBorderShape(.roundedRectangle(radius: 10))
                    iconButton("star.fill", label: "Circle", prominent: false)
                    iconButton("heart.fill", label: "Filled circle", prominent: true)
                }
                .frame(maxWidth: .infinity)
            }

            section("Tints") {
                HStack(spacing: 12) {
                    ForEach(tints, id: \.name) { tint in
                        iconButton("drop.fill", label: "\(tint.name) glass", prominent: false).tint(tint.color)
                        iconButton("drop.fill", label: "\(tint.name) prominent", prominent: true).tint(tint.color)
                    }
                }
                .frame(maxWidth: .infinity)
            }
        }
    }

    private func section(_ title: String, @ViewBuilder content: () -> some View) -> some View {
        VStack(alignment: .leading, spacing: 12) {
            Text(title)
                .font(.headline)
                .accessibilityAddTraits(.isHeader)

            content()
        }
    }

    private func glassButton(_ title: String, label: String) -> some View {
        Button(title) { onPress(label) }
            .buttonStyle(.glass)
            .accessibilityLabel(label)
    }

    private func prominentButton(_ title: String, label: String) -> some View {
        Button(title) { onPress(label) }
            .buttonStyle(.glassProminent)
            .accessibilityLabel(label)
    }

    @ViewBuilder
    private func iconButton(_ systemImage: String, label: String, prominent: Bool) -> some View {
        let button = Button(label, systemImage: systemImage) { onPress(label) }
            .labelStyle(.iconOnly)
            .buttonBorderShape(.circle)

        if prominent {
            button.buttonStyle(.glassProminent)
        } else {
            button.buttonStyle(.glass)
        }
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct GlassButtonGalleryDemo: View {
    @State private var lastPressed = "Tap any button"

    var body: some View {
        ZStack {
            LinearGradient(colors: [.mint, .cyan, .indigo], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            ScrollView {
                VStack(alignment: .leading, spacing: 24) {
                    Text(lastPressed)
                        .font(.title.bold())
                        .contentTransition(.opacity)
                        .animation(.easeInOut, value: lastPressed)

                    GlassButtonGallery { lastPressed = $0 }
                }
                .padding(24)
            }
            .scrollBounceBehavior(.basedOnSize)
        }
    }
}

@available(iOS 26, *)
#Preview {
    GlassButtonGalleryDemo()
}
```

## Glass Segmented Control

A segmented control with a Liquid Glass thumb that slides between segments.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassSegmentedControl/GlassSegmentedControl.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A segmented control with a Liquid Glass thumb that slides between segments.
///
/// With Reduce Motion on, the thumb jumps to the new segment.
@available(iOS 26, *)
struct GlassSegmentedControl<Segment: Hashable>: View {
    let segments: [Segment]
    @Binding var selection: Segment
    var tint: Color?
    let title: (Segment) -> String

    @ScaledMetric(relativeTo: .subheadline) private var height = 44.0
    @State private var width: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    var body: some View {
        HStack(spacing: 0) {
            ForEach(segments, id: \.self) { segment in
                button(for: segment)
            }
        }
        .background { thumb }
        .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { width = $0 }
        // The thumb follows a finger dragged along the control, as the system's does.
        .simultaneousGesture(DragGesture(minimumDistance: 10).onChanged { select(at: $0.location.x) })
        .padding(4)
        .background(.ultraThinMaterial, in: .capsule)
        .sensoryFeedback(.selection, trigger: selection)
    }

    /// One view that moves, drawn behind the labels so they stay readable on top of it.
    private var thumb: some View {
        GeometryReader { proxy in
            let width = proxy.size.width / CGFloat(max(segments.count, 1))
            let index = segments.firstIndex(of: selection) ?? 0

            Color.clear
                .frame(width: width)
                .glassEffect(.regular.tint(tint), in: .capsule)
                .offset(x: width * CGFloat(index))
        }
    }

    private func select(at x: CGFloat) {
        guard width > 0, !segments.isEmpty else { return }
        // A gesture reports screen points, and a right-to-left layout counts from the other edge.
        let leading = layoutDirection == .rightToLeft ? width - x : x
        let index = min(max(Int(leading / width * CGFloat(segments.count)), 0), segments.count - 1)
        guard segments[index] != selection else { return }
        withAnimation(reduceMotion ? nil : .snappy(duration: 0.4)) {
            selection = segments[index]
        }
    }

    private func button(for segment: Segment) -> some View {
        let isSelected = segment == selection

        return Button {
            withAnimation(reduceMotion ? nil : .snappy(duration: 0.4)) {
                selection = segment
            }
        } label: {
            Text(title(segment))
                .font(.subheadline.weight(isSelected ? .semibold : .medium))
                .lineLimit(1)
                .frame(maxWidth: .infinity, minHeight: height)
                .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct GlassSegmentedControlDemo: View {
    @State private var period = "Week"
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let steps = ["Day": 8_214, "Week": 61_730, "Month": 248_902, "Year": 2_904_117]

    var body: some View {
        ZStack {
            LinearGradient(colors: [.teal, .blue, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 28) {
                VStack(spacing: 4) {
                    Text("Steps walked")
                        .font(.headline)
                        .foregroundStyle(.white.opacity(0.8))

                    Text(steps[period, default: 0], format: .number)
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                        .contentTransition(.numericText())
                        .foregroundStyle(.white)
                        .animation(reduceMotion ? nil : .snappy, value: period)
                }

                GlassSegmentedControl(segments: ["Day", "Week", "Month", "Year"], selection: $period) { $0 }
                    .padding(.horizontal, 24)
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    GlassSegmentedControlDemo()
}
```

## Glass Tab Accessory

A tab view with a Liquid Glass accessory above a tab bar that minimizes on scroll.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassTabAccessory/GlassTabAccessory.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A tab view with a Liquid Glass accessory above a tab bar that minimizes on scroll.
///
/// With Reduce Motion on, the tab bar stays at its full size.
@available(iOS 26, *)
struct GlassTabAccessory<Selection: Hashable, Tabs: TabContent<Selection>, Accessory: View>: View {
    @Binding var selection: Selection
    var minimizeBehavior: TabBarMinimizeBehavior = .onScrollDown
    @TabContentBuilder<Selection> let tabs: () -> Tabs
    @ViewBuilder let accessory: () -> Accessory

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TabView(selection: $selection, content: tabs)
            .tabBarMinimizeBehavior(reduceMotion ? .never : minimizeBehavior)
            .tabViewBottomAccessory(content: accessory)
    }
}

// MARK: - Demo

@available(iOS 26, *)
private struct GlassTabAccessoryPlayer: View {
    @Binding var isPlaying: Bool

    @Environment(\.tabViewBottomAccessoryPlacement) private var placement
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 12) {
            Image(systemName: "waveform")
                .symbolEffect(.variableColor.iterative, isActive: isPlaying && !reduceMotion)
                .foregroundStyle(.pink)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 0) {
                Text("Midnight Drive")
                    .font(.subheadline.weight(.semibold))
                    .lineLimit(1)

                if placement != .inline {
                    Text("The Glass Hours")
                        .font(.caption)
                        .foregroundStyle(.secondary)
                        .lineLimit(1)
                }
            }

            Spacer(minLength: 0)

            Button {
                isPlaying.toggle()
            } label: {
                // The glyph is too small to hit. The padding widens what answers to a touch,
                // and the same padding taken back keeps the accessory as it was.
                Label(isPlaying ? "Pause" : "Play", systemImage: isPlaying ? "pause.fill" : "play.fill")
                    .padding(17)
                    .contentShape(.rect)
                    .padding(-17)
            }
            .labelStyle(.iconOnly)
            .buttonStyle(.plain)
        }
        .padding(.horizontal, 16)
    }
}

@available(iOS 26, *)
struct GlassTabAccessoryDemo: View {
    @State private var selection = "albums"
    @State private var isPlaying = true

    var body: some View {
        GlassTabAccessory(selection: $selection) {
            Tab("Albums", systemImage: "square.stack.fill", value: "albums") {
                shelf(title: "New music", colors: [.pink, .orange, .purple, .blue, .teal])
            }
            Tab("Radio", systemImage: "dot.radiowaves.left.and.right", value: "radio") {
                shelf(title: "On air", colors: [.indigo, .mint, .red, .cyan, .yellow])
            }
        } accessory: {
            GlassTabAccessoryPlayer(isPlaying: $isPlaying)
        }
    }

    private func shelf(title: String, colors: [Color]) -> some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 150), spacing: 14)], spacing: 14) {
                ForEach(0..<24, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 20)
                        .fill(colors[index % colors.count].gradient)
                        .aspectRatio(1, contentMode: .fit)
                        .accessibilityHidden(true)
                }
            }
            .padding(16)
        }
        .safeAreaInset(edge: .top, spacing: 0) {
            Text(title)
                .font(.largeTitle.bold())
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal, 16)
                .padding(.bottom, 6)
                .background(.bar)
        }
    }
}

@available(iOS 26, *)
#Preview {
    GlassTabAccessoryDemo()
}
```

## Glass Tag Cloud

Tags of tinted, interactive Liquid Glass that melt together when they get close.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassTagCloud/GlassTagCloud.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

@available(iOS 26, *)
struct GlassTagCloudTag: Identifiable {
    let title: String
    let tint: Color

    var id: String { title }
}

/// Tags of tinted, interactive Liquid Glass that melt together when they get close.
///
/// `mergeDistance` is the gap below which neighbouring tags blend. With Reduce Motion on,
/// selecting a tag changes it without animating.
@available(iOS 26, *)
struct GlassTagCloud: View {
    let tags: [GlassTagCloudTag]
    @Binding var selection: Set<String>
    var spacing: CGFloat = 16
    var mergeDistance: CGFloat = 10

    @ScaledMetric(relativeTo: .subheadline) private var horizontalPadding = 16.0
    @ScaledMetric(relativeTo: .subheadline) private var verticalPadding = 10.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        GlassEffectContainer(spacing: mergeDistance) {
            GlassTagCloudLayout(spacing: spacing) {
                ForEach(tags) { tag in
                    tagButton(tag)
                }
            }
        }
    }

    private func tagButton(_ tag: GlassTagCloudTag) -> some View {
        let isSelected = selection.contains(tag.title)

        return Button {
            withAnimation(reduceMotion ? nil : .snappy) {
                if isSelected {
                    selection.remove(tag.title)
                } else {
                    selection.insert(tag.title)
                }
            }
        } label: {
            Text(tag.title)
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.white)
                .padding(.horizontal, horizontalPadding)
                .padding(.vertical, verticalPadding)
                // A little taller for a touch than it looks, up to the size of a touch target.
                .padding(.vertical, 3)
                .contentShape(.capsule)
                .padding(.vertical, -3)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
        .glassEffect(.regular.tint(tag.tint.opacity(isSelected ? 0.85 : 0.3)).interactive(), in: .capsule)
    }
}

@available(iOS 26, *)
private struct GlassTagCloudLayout: Layout {
    var spacing: CGFloat

    var animatableData: CGFloat {
        get { spacing }
        set { spacing = newValue }
    }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let sizes = subviews.map { $0.sizeThatFits(ProposedViewSize(width: proposal.width, height: nil)) }
        return GlassTagCloudFlow.arrange(sizes, width: proposal.width ?? .infinity, spacing: spacing).size
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let tagProposal = ProposedViewSize(width: bounds.width, height: nil)
        let sizes = subviews.map { $0.sizeThatFits(tagProposal) }
        let origins = GlassTagCloudFlow.arrange(sizes, width: bounds.width, spacing: spacing).origins
        for (subview, origin) in zip(subviews, origins) {
            subview.place(at: CGPoint(x: bounds.minX + origin.x, y: bounds.minY + origin.y), proposal: tagProposal)
        }
    }
}

@available(iOS 26, *)
nonisolated enum GlassTagCloudFlow {
    /// Places items left to right, starting a new row when the next item would not fit in `width`.
    static func arrange(_ sizes: [CGSize], width: CGFloat, spacing: CGFloat) -> (origins: [CGPoint], size: CGSize) {
        var origins: [CGPoint] = []
        var cursor = CGPoint.zero
        var rowHeight: CGFloat = 0
        var usedWidth: CGFloat = 0

        for size in sizes {
            if cursor.x > 0, cursor.x + size.width > width {
                cursor = CGPoint(x: 0, y: cursor.y + rowHeight + spacing)
                rowHeight = 0
            }
            origins.append(cursor)
            usedWidth = max(usedWidth, cursor.x + size.width)
            rowHeight = max(rowHeight, size.height)
            cursor.x += size.width + spacing
        }

        return (origins, CGSize(width: usedWidth, height: cursor.y + rowHeight))
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct GlassTagCloudDemo: View {
    @State private var selection: Set<String> = ["SwiftUI"]
    @State private var isTight = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let tags = [
        GlassTagCloudTag(title: "SwiftUI", tint: .blue),
        GlassTagCloudTag(title: "Animation", tint: .pink),
        GlassTagCloudTag(title: "Layout", tint: .orange),
        GlassTagCloudTag(title: "Glass", tint: .teal),
        GlassTagCloudTag(title: "Gestures", tint: .purple),
        GlassTagCloudTag(title: "Symbols", tint: .green),
        GlassTagCloudTag(title: "Charts", tint: .red),
        GlassTagCloudTag(title: "Navigation", tint: .indigo),
        GlassTagCloudTag(title: "Metal", tint: .mint),
        GlassTagCloudTag(title: "Widgets", tint: .yellow),
    ]

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .black], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            // Scrolls only when Dynamic Type makes the content taller than the screen.
            ViewThatFits(in: .vertical) {
                content

                ScrollView {
                    content
                }
            }
        }
    }

    private var content: some View {
        VStack(alignment: .leading, spacing: 32) {
            Text("Pick your interests")
                .font(.largeTitle.bold())
                .foregroundStyle(.white)

            GlassTagCloud(tags: tags, selection: $selection, spacing: isTight ? 3 : 18)
                .frame(maxWidth: .infinity, alignment: .leading)

            Toggle("Tight spacing", isOn: $isTight.animation(reduceMotion ? nil : .smooth(duration: 0.7)))
                .font(.headline)
                .foregroundStyle(.white)
        }
        .padding(24)
    }
}

@available(iOS 26, *)
#Preview {
    GlassTagCloudDemo()
}
```

## Glass Tool Strip

A row of Liquid Glass tool buttons with related tools fused into one shape.

Category: Glass. Minimum: iOS 26.0. Path: Components/Glass/GlassToolStrip/GlassToolStrip.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

@available(iOS 26, *)
struct GlassToolStripTool: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    /// Tools with the same group share one piece of glass. Nil keeps the tool on its own.
    var group: String?
}

/// A row of Liquid Glass tool buttons, with related tools fused into one shape.
///
/// With Reduce Motion on, tools change without animating.
@available(iOS 26, *)
struct GlassToolStrip: View {
    let tools: [GlassToolStripTool]
    @Binding var selection: String?
    var isGrouped = true
    var tint: Color = .accentColor

    @Namespace private var namespace
    @ScaledMetric(relativeTo: .title3) private var buttonSize = 52.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        // Scrolls only when Dynamic Type makes the row wider than the space it has.
        ViewThatFits(in: .horizontal) {
            strip

            ScrollView(.horizontal, showsIndicators: false) {
                strip
            }
            .scrollClipDisabled()
        }
    }

    private var strip: some View {
        GlassEffectContainer(spacing: 10) {
            HStack(spacing: 14) {
                ForEach(tools) { tool in
                    toolButton(tool)
                }
            }
        }
    }

    private func toolButton(_ tool: GlassToolStripTool) -> some View {
        let isSelected = tool.id == selection

        return Button {
            withAnimation(reduceMotion ? nil : .snappy) {
                selection = isSelected ? nil : tool.id
            }
        } label: {
            Image(systemName: tool.systemImage)
                .font(.title3.weight(.semibold))
                .foregroundStyle(isSelected ? tint : .primary)
                .frame(width: buttonSize, height: buttonSize)
                .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(tool.title)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
        // A union shares one shape across its members, so it has to be a capsule, and
        // selection only tints the symbol. A square capsule draws as a circle on its own.
        .glassEffect(.regular.interactive(), in: .capsule)
        .glassEffectUnion(id: isGrouped ? tool.group : nil, namespace: namespace)
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct GlassToolStripDemo: View {
    @State private var selection: String? = "pen"
    @State private var isGrouped = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let tools = [
        GlassToolStripTool(id: "pen", title: "Pen", systemImage: "pencil.tip", group: "draw"),
        GlassToolStripTool(id: "marker", title: "Marker", systemImage: "highlighter", group: "draw"),
        GlassToolStripTool(id: "eraser", title: "Eraser", systemImage: "eraser", group: "draw"),
        GlassToolStripTool(id: "lasso", title: "Lasso", systemImage: "lasso", group: "edit"),
        GlassToolStripTool(id: "ruler", title: "Ruler", systemImage: "ruler", group: "edit"),
    ]

    var body: some View {
        ZStack {
            MeshGradient(
                width: 2,
                height: 2,
                points: [[0, 0], [1, 0], [0, 1], [1, 1]],
                colors: [.pink, .orange, .purple, .blue]
            )
            .ignoresSafeArea()

            VStack(spacing: 32) {
                GlassToolStrip(tools: tools, selection: $selection, isGrouped: isGrouped, tint: .indigo)

                Button("Group tools", systemImage: isGrouped ? "square.split.2x1" : "square.on.square") {
                    withAnimation(reduceMotion ? nil : .bouncy(duration: 0.5)) { isGrouped.toggle() }
                }
                .buttonStyle(.glass)
                .accessibilityValue(isGrouped ? "On" : "Off")
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    GlassToolStripDemo()
}
```

## Before After Slider

Two stacked images split by a draggable handle that compares the before and after versions.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/BeforeAfterSlider/BeforeAfterSlider.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Two stacked images split by a handle you drag to compare them.
///
/// `position` runs from 0, all after, to 1, all before. VoiceOver adjusts it by swiping up or down.
struct BeforeAfterSlider: View {
    let before: Image
    let after: Image
    @Binding var position: Double
    var beforeTitle = "Before"
    var afterTitle = "After"

    @ScaledMetric(relativeTo: .body) private var knobSize = 44.0
    @Environment(\.layoutDirection) private var layoutDirection

    private var clamped: Double { min(max(position, 0), 1) }

    var body: some View {
        GeometryReader { geometry in
            let size = geometry.size
            let handleX = size.width * clamped

            ZStack {
                photo(after, in: size)
                photo(before, in: size)
                    .mask(alignment: .leading) {
                        Rectangle().frame(width: handleX)
                    }
                handle(height: size.height)
                    .position(x: handleX, y: size.height / 2)
            }
            .overlay(alignment: .topLeading) { tag(beforeTitle).opacity(min(clamped / 0.25, 1)) }
            .overlay(alignment: .topTrailing) { tag(afterTitle).opacity(min((1 - clamped) / 0.25, 1)) }
            .contentShape(.rect)
            .gesture(
                DragGesture(minimumDistance: 0).onChanged { value in
                    guard size.width > 0 else { return }
                    // Gestures report screen points, but the layout mirrors in right-to-left layouts.
                    let x = layoutDirection == .rightToLeft ? size.width - value.location.x : value.location.x
                    position = min(max(x / size.width, 0), 1)
                }
            )
        }
        .clipped()
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("\(beforeTitle) and \(afterTitle) comparison")
        .accessibilityValue("\(Int(clamped * 100)) percent \(beforeTitle)")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: position = min(clamped + 0.1, 1)
            case .decrement: position = max(clamped - 0.1, 0)
            @unknown default: break
            }
        }
    }

    private func photo(_ image: Image, in size: CGSize) -> some View {
        image
            .resizable()
            .scaledToFill()
            .frame(width: size.width, height: size.height)
            .clipped()
    }

    private func handle(height: CGFloat) -> some View {
        ZStack {
            Rectangle()
                .fill(.white)
                .frame(width: 3, height: height)
            Circle()
                .fill(.white)
                .frame(width: knobSize, height: knobSize)
                .shadow(color: .black.opacity(0.3), radius: 6, y: 2)
            Image(systemName: "arrow.left.and.right")
                .font(.body.weight(.bold))
                .foregroundStyle(.black.opacity(0.7))
        }
    }

    private func tag(_ title: String) -> some View {
        Text(title)
            .font(.caption.weight(.semibold))
            .foregroundStyle(.white)
            .padding(.horizontal, 10)
            .padding(.vertical, 5)
            .background(.black.opacity(0.5), in: .capsule)
            .padding(12)
    }
}

// MARK: - Demo

struct BeforeAfterSliderDemo: View {
    @State private var position = 0.5

    private let before = demoPhoto(sky: [Color(white: 0.55), Color(white: 0.78)], hill: Color(white: 0.34), label: "Flat landscape")
    private let after = demoPhoto(sky: [.indigo, .pink, .orange], hill: Color(red: 0.13, green: 0.16, blue: 0.4), label: "Graded landscape")

    var body: some View {
        BeforeAfterSlider(before: before, after: after, position: $position)
            .aspectRatio(3 / 4, contentMode: .fit)
            .clipShape(.rect(cornerRadius: 24))
            .padding(16)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

private func demoPhoto(sky: [Color], hill: Color, label: String) -> Image {
    let size = CGSize(width: 900, height: 1200)
    return Image(size: size, label: Text(label)) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: sky), startPoint: .zero, endPoint: CGPoint(x: 0, y: size.height))
        )
        context.fill(Path(ellipseIn: CGRect(x: 540, y: 220, width: 200, height: 200)), with: .color(.white.opacity(0.85)))

        var ridge = Path()
        ridge.move(to: CGPoint(x: 0, y: size.height))
        ridge.addLine(to: CGPoint(x: 0, y: 760))
        ridge.addCurve(to: CGPoint(x: size.width, y: 660), control1: CGPoint(x: 300, y: 480), control2: CGPoint(x: 600, y: 1020))
        ridge.addLine(to: CGPoint(x: size.width, y: size.height))
        ridge.closeSubpath()
        context.fill(ridge, with: .color(hill))
    }
}

#Preview {
    BeforeAfterSliderDemo()
}
```

## Blur Up Image

An image that goes from a blurred preview into sharp focus once the full picture arrives.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/BlurUpImage/BlurUpImage.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

private struct BlurUpImageFocus: Transition {
    let radius: CGFloat

    func body(content: Content, phase: TransitionPhase) -> some View {
        content
            .blur(radius: phase.isIdentity ? 0 : radius)
            .opacity(phase.isIdentity ? 1 : 0)
    }
}

/// Shows a blurred preview until the full image arrives, then brings it into focus.
///
/// It fills the space it is given. With Reduce Motion on, the full image fades in without the
/// focus pull. Use `BlurUpImageRemote` to load the full image from a URL.
struct BlurUpImage: View {
    let preview: Image
    let image: Image?
    let label: LocalizedStringResource
    var blurRadius: CGFloat = 24
    var isLoading = true

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var radius: CGFloat { max(blurRadius, 0) }

    private var transition: AnyTransition {
        reduceMotion ? .opacity : AnyTransition(BlurUpImageFocus(radius: radius))
    }

    var body: some View {
        Color.clear
            .overlay {
                preview
                    .resizable()
                    .scaledToFill()
                    .blur(radius: radius, opaque: true)
            }
            .overlay {
                if let image {
                    image
                        .resizable()
                        .scaledToFill()
                        .transition(transition)
                }
            }
            .overlay {
                if image == nil, isLoading {
                    ProgressView()
                        .tint(.white)
                }
            }
            .clipped()
            .animation(.easeOut(duration: reduceMotion ? 0.2 : 0.8), value: image != nil)
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(label)
            .accessibilityValue(image == nil && isLoading ? "Loading" : "")
            .accessibilityAddTraits(.isImage)
    }
}

/// Loads the full image from a URL. The preview stays on screen if the download fails.
struct BlurUpImageRemote: View {
    let url: URL?
    let preview: Image
    let label: LocalizedStringResource

    var body: some View {
        AsyncImage(url: url) { phase in
            BlurUpImage(preview: preview, image: phase.image, label: label, isLoading: url != nil && phase.error == nil)
        }
    }
}

// MARK: - Demo

struct BlurUpImageDemo: View {
    @State private var isLoaded = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let preview = demoPhoto(size: CGSize(width: 18, height: 24))
    private let full = demoPhoto(size: CGSize(width: 900, height: 1200))

    var body: some View {
        VStack(spacing: 20) {
            BlurUpImage(preview: preview, image: isLoaded ? full : nil, label: "Mountains at dusk")
                .aspectRatio(3 / 4, contentMode: .fit)
                .clipShape(.rect(cornerRadius: 24))

            Text(isLoaded ? "Full image loaded" : "Loading the full image")
                .font(.headline)
                .foregroundStyle(.secondary)
        }
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task(id: reduceMotion) {
            guard !reduceMotion else {
                isLoaded = true
                return
            }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled else { return }
                isLoaded = true
                try? await Task.sleep(for: .seconds(2.3))
                guard !Task.isCancelled else { return }
                isLoaded = false
            }
        }
    }
}

private func demoPhoto(size: CGSize) -> Image {
    Image(size: size, label: Text("Mountains at dusk")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(
                Gradient(colors: [.indigo, .purple, .orange]),
                startPoint: .zero,
                endPoint: CGPoint(x: 0, y: size.height)
            )
        )
        let sun = size.width * 0.22
        context.fill(
            Path(ellipseIn: CGRect(x: size.width * 0.6, y: size.height * 0.18, width: sun, height: sun)),
            with: .color(.white.opacity(0.85))
        )

        var ridge = Path()
        ridge.move(to: CGPoint(x: 0, y: size.height))
        ridge.addLine(to: CGPoint(x: 0, y: size.height * 0.63))
        ridge.addCurve(
            to: CGPoint(x: size.width, y: size.height * 0.55),
            control1: CGPoint(x: size.width / 3, y: size.height * 0.4),
            control2: CGPoint(x: size.width * 0.66, y: size.height * 0.85)
        )
        ridge.addLine(to: CGPoint(x: size.width, y: size.height))
        ridge.closeSubpath()
        context.fill(ridge, with: .color(Color(red: 0.12, green: 0.12, blue: 0.32)))
    }
}

#Preview {
    BlurUpImageDemo()
}
```

## Circular Avatar Cropper

A photo you pan and pinch under a fixed circular window to choose an avatar crop.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/CircularAvatarCropper/CircularAvatarCropper.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The zoom and position of a photo under the crop window. `offset` is a fraction of the window's
/// diameter, so a crop survives a change of size.
struct CircularAvatarCropperTransform: Equatable, Sendable {
    var zoom: CGFloat = 1
    var offset = CGSize.zero

    /// The photo's size at zoom 1, where its shorter side matches a window of diameter 1.
    static func fillSize(aspectRatio: CGFloat) -> CGSize {
        guard aspectRatio.isFinite else { return CGSize(width: 1, height: 1) }
        let ratio = min(max(aspectRatio, 0.01), 100)
        return ratio >= 1 ? CGSize(width: ratio, height: 1) : CGSize(width: 1, height: 1 / ratio)
    }

    /// Keeps the zoom in range and the window fully covered by the photo.
    func clamped(aspectRatio: CGFloat, maxZoom: CGFloat) -> Self {
        let fill = Self.fillSize(aspectRatio: aspectRatio)
        let safeZoom = min(max(zoom, 1), max(maxZoom, 1))
        let limit = CGSize(width: (fill.width * safeZoom - 1) / 2, height: (fill.height * safeZoom - 1) / 2)
        return Self(
            zoom: safeZoom,
            offset: CGSize(
                width: min(max(offset.width, -limit.width), limit.width),
                height: min(max(offset.height, -limit.height), limit.height)
            )
        )
    }

    /// The part of the photo inside the window, with every value from 0 to 1.
    func normalizedCropRect(aspectRatio: CGFloat) -> CGRect {
        let fill = Self.fillSize(aspectRatio: aspectRatio)
        let shown = CGSize(width: fill.width * zoom, height: fill.height * zoom)
        let size = CGSize(width: 1 / shown.width, height: 1 / shown.height)
        return CGRect(
            x: 0.5 - offset.width / shown.width - size.width / 2,
            y: 0.5 - offset.height / shown.height - size.height / 2,
            width: size.width,
            height: size.height
        )
    }
}

nonisolated private struct CircularAvatarCropperDim: Shape {
    let diameter: CGFloat

    func path(in rect: CGRect) -> Path {
        var path = Path(rect)
        path.addEllipse(in: CGRect(x: rect.midX - diameter / 2, y: rect.midY - diameter / 2, width: diameter, height: diameter))
        return path
    }
}

/// A photo you pan and pinch under a fixed circular window to choose an avatar crop.
///
/// Read `normalizedCropRect(aspectRatio:)` from the binding to cut the real image. `aspectRatio`
/// is the photo's width divided by its height. VoiceOver zooms by swiping up or down, and pans
/// with custom actions.
struct CircularAvatarCropper: View {
    let image: Image
    let aspectRatio: CGFloat
    @Binding var crop: CircularAvatarCropperTransform
    var maxZoom: CGFloat = 4
    var windowInset: CGFloat = 24

    @GestureState private var translation = CGSize.zero
    @GestureState private var magnification: CGFloat = 1

    /// How far a VoiceOver action moves the photo, as a fraction of the window's diameter.
    private let panStep: CGFloat = 0.1

    var body: some View {
        GeometryReader { geometry in
            let diameter = max(min(geometry.size.width, geometry.size.height) - 2 * max(windowInset, 0), 1)
            let fill = CircularAvatarCropperTransform.fillSize(aspectRatio: aspectRatio)
            let shown = liveCrop(diameter: diameter)

            image
                .resizable()
                .frame(width: fill.width * diameter, height: fill.height * diameter)
                .scaleEffect(shown.zoom)
                .offset(x: shown.offset.width * diameter, y: shown.offset.height * diameter)
                .frame(width: geometry.size.width, height: geometry.size.height)
                .overlay { window(diameter: diameter) }
                .contentShape(.rect)
                .gesture(pan(diameter: diameter).simultaneously(with: pinch))
        }
        // A photo is not mirrored in right-to-left layouts, so neither is the geometry that moves it.
        .environment(\.layoutDirection, .leftToRight)
        .clipped()
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Avatar crop")
        .accessibilityValue("\(Int(crop.clamped(aspectRatio: aspectRatio, maxZoom: maxZoom).zoom * 100)) percent zoom")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: update { $0.zoom += 0.25 }
            case .decrement: update { $0.zoom -= 0.25 }
            @unknown default: break
            }
        }
        .accessibilityActions {
            Button("Move photo left") { update { $0.offset.width -= panStep } }
            Button("Move photo right") { update { $0.offset.width += panStep } }
            Button("Move photo up") { update { $0.offset.height -= panStep } }
            Button("Move photo down") { update { $0.offset.height += panStep } }
        }
    }

    private func window(diameter: CGFloat) -> some View {
        ZStack {
            CircularAvatarCropperDim(diameter: diameter)
                .fill(.black.opacity(0.6), style: FillStyle(eoFill: true))
            Circle()
                .stroke(.white, lineWidth: 2)
                .frame(width: diameter, height: diameter)
        }
        .allowsHitTesting(false)
    }

    private func liveCrop(diameter: CGFloat) -> CircularAvatarCropperTransform {
        var shown = crop
        shown.zoom *= magnification
        shown.offset.width += translation.width / diameter
        shown.offset.height += translation.height / diameter
        return shown.clamped(aspectRatio: aspectRatio, maxZoom: maxZoom)
    }

    private func pan(diameter: CGFloat) -> some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($translation) { value, state, _ in
                state = value.translation
            }
            .onEnded { value in
                update {
                    $0.offset.width += value.translation.width / diameter
                    $0.offset.height += value.translation.height / diameter
                }
            }
    }

    private var pinch: some Gesture {
        MagnifyGesture()
            .updating($magnification) { value, state, _ in
                state = value.magnification
            }
            .onEnded { value in
                update { $0.zoom *= value.magnification }
            }
    }

    private func update(_ change: (inout CircularAvatarCropperTransform) -> Void) {
        var next = crop
        change(&next)
        crop = next.clamped(aspectRatio: aspectRatio, maxZoom: maxZoom)
    }
}

// MARK: - Demo

struct CircularAvatarCropperDemo: View {
    @State private var crop = CircularAvatarCropperTransform()
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let aspectRatio: CGFloat = 3 / 4
    private let photo = demoPhoto()
    private let avatarSize: CGFloat = 56

    var body: some View {
        VStack(spacing: 0) {
            CircularAvatarCropper(image: photo, aspectRatio: aspectRatio, crop: $crop)

            HStack(spacing: 12) {
                avatar
                Spacer(minLength: 0)
                control("Zoom out", systemImage: "minus.magnifyingglass") { $0.zoom -= 0.75 }
                control("Zoom in", systemImage: "plus.magnifyingglass") { $0.zoom += 0.75 }
                control("Reset", systemImage: "arrow.counterclockwise") { $0 = CircularAvatarCropperTransform() }
            }
            .padding(16)
        }
        .background(.black)
        .preferredColorScheme(.dark)
    }

    private var avatar: some View {
        let fill = CircularAvatarCropperTransform.fillSize(aspectRatio: aspectRatio)
        return photo
            .resizable()
            .frame(width: fill.width * avatarSize, height: fill.height * avatarSize)
            .scaleEffect(crop.zoom)
            .offset(x: crop.offset.width * avatarSize, y: crop.offset.height * avatarSize)
            .frame(width: avatarSize, height: avatarSize)
            .clipShape(.circle)
            .accessibilityLabel("Avatar preview")
    }

    private func control(
        _ title: String,
        systemImage: String,
        change: @escaping (inout CircularAvatarCropperTransform) -> Void
    ) -> some View {
        Button {
            var next = crop
            change(&next)
            withAnimation(reduceMotion ? nil : .snappy) {
                crop = next.clamped(aspectRatio: aspectRatio, maxZoom: 4)
            }
        } label: {
            Image(systemName: systemImage)
                .font(.title3)
                .frame(width: 44, height: 44)
        }
        .buttonStyle(.bordered)
        .accessibilityLabel(title)
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 900, height: 1200)
    return Image(size: size, label: Text("Portrait")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: [.teal, .blue, .indigo]), startPoint: .zero, endPoint: CGPoint(x: 900, y: 1200))
        )
        context.fill(Path(ellipseIn: CGRect(x: 310, y: 330, width: 280, height: 340)), with: .color(Color(red: 1, green: 0.84, blue: 0.7)))
        context.fill(Path(ellipseIn: CGRect(x: 190, y: 740, width: 520, height: 700)), with: .color(.orange))
        context.fill(Path(CGRect(x: 310, y: 300, width: 280, height: 120)), with: .color(Color(red: 0.25, green: 0.15, blue: 0.1)))
    }
}

#Preview {
    CircularAvatarCropperDemo()
}
```

## Crop Rectangle Overlay

A crop frame with draggable corners and edges over an image, dimming the area outside the selection.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/CropRectangleOverlay/CropRectangleOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A part of the crop frame that can be dragged. Rectangles are normalized, from 0 to 1.
enum CropRectangleOverlayHandle: CaseIterable, Hashable, Sendable {
    case body, top, right, bottom, left, topLeft, topRight, bottomRight, bottomLeft

    private var movesLeft: Bool { self == .left || self == .topLeft || self == .bottomLeft }
    private var movesRight: Bool { self == .right || self == .topRight || self == .bottomRight }
    private var movesTop: Bool { self == .top || self == .topLeft || self == .topRight }
    private var movesBottom: Bool { self == .bottom || self == .bottomLeft || self == .bottomRight }

    func adjusting(_ rect: CGRect, by delta: CGSize, minimumSide: CGFloat) -> CGRect {
        if self == .body {
            return CGRect(
                x: min(max(rect.minX + delta.width, 0), max(1 - rect.width, 0)),
                y: min(max(rect.minY + delta.height, 0), max(1 - rect.height, 0)),
                width: rect.width,
                height: rect.height
            )
        }

        let side = min(max(minimumSide, 0.01), 1)
        var left = rect.minX, right = rect.maxX, top = rect.minY, bottom = rect.maxY
        if movesLeft { left = max(min(left + delta.width, right - side), 0) }
        if movesRight { right = min(max(right + delta.width, left + side), 1) }
        if movesTop { top = max(min(top + delta.height, bottom - side), 0) }
        if movesBottom { bottom = min(max(bottom + delta.height, top + side), 1) }
        return CGRect(x: left, y: top, width: right - left, height: bottom - top)
    }

    /// The touch area for this handle around a crop frame in points.
    func hitArea(around rect: CGRect, grip: CGFloat) -> CGRect {
        let half = grip / 2
        switch self {
        case .body: return rect.insetBy(dx: min(half, rect.width / 2), dy: min(half, rect.height / 2))
        case .top: return CGRect(x: rect.minX + half, y: rect.minY - half, width: max(rect.width - grip, 0), height: grip)
        case .bottom: return CGRect(x: rect.minX + half, y: rect.maxY - half, width: max(rect.width - grip, 0), height: grip)
        case .left: return CGRect(x: rect.minX - half, y: rect.minY + half, width: grip, height: max(rect.height - grip, 0))
        case .right: return CGRect(x: rect.maxX - half, y: rect.minY + half, width: grip, height: max(rect.height - grip, 0))
        case .topLeft: return CGRect(x: rect.minX - half, y: rect.minY - half, width: grip, height: grip)
        case .topRight: return CGRect(x: rect.maxX - half, y: rect.minY - half, width: grip, height: grip)
        case .bottomLeft: return CGRect(x: rect.minX - half, y: rect.maxY - half, width: grip, height: grip)
        case .bottomRight: return CGRect(x: rect.maxX - half, y: rect.maxY - half, width: grip, height: grip)
        }
    }

    /// A rectangle that fits inside the unit square, whatever was passed in.
    static func sanitized(_ rect: CGRect) -> CGRect {
        let unit = CGRect(x: 0, y: 0, width: 1, height: 1)
        let fitted = rect.standardized.intersection(unit)
        return fitted.isNull || fitted.isEmpty ? unit : fitted
    }
}

nonisolated private struct CropRectangleOverlayDim: Shape {
    let hole: CGRect

    func path(in rect: CGRect) -> Path {
        var path = Path(rect)
        path.addRect(hole)
        return path
    }
}

/// A crop frame with draggable corners and edges over an image, dimming what is outside it.
///
/// `crop` is normalized, from 0 to 1, and changes when a drag ends. `aspectRatio` is the image's
/// width divided by its height. VoiceOver moves and resizes the frame with custom actions.
struct CropRectangleOverlay: View {
    private struct ActiveDrag: Equatable {
        let handle: CropRectangleOverlayHandle
        let delta: CGSize
    }

    let image: Image
    let aspectRatio: CGFloat
    @Binding var crop: CGRect
    var minimumSide: CGFloat = 0.15

    @GestureState private var drag: ActiveDrag?

    /// How far a VoiceOver action moves or resizes the frame, as a fraction of the image.
    private let adjustmentStep: CGFloat = 0.05

    private var committed: CGRect { CropRectangleOverlayHandle.sanitized(crop) }

    private var shown: CGRect {
        guard let drag else { return committed }
        return drag.handle.adjusting(committed, by: drag.delta, minimumSide: minimumSide)
    }

    var body: some View {
        image
            .resizable()
            .aspectRatio(aspectRatio.isFinite ? max(aspectRatio, 0.01) : 1, contentMode: .fit)
            .overlay {
                GeometryReader { geometry in
                    cropInterface(in: geometry.size)
                }
            }
            // A photo is not mirrored in right-to-left layouts, so neither is the crop drawn over it.
            .environment(\.layoutDirection, .leftToRight)
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Crop area")
            .accessibilityValue(accessibilityDescription)
            .accessibilityActions { accessibilityButtons }
    }

    private func cropInterface(in size: CGSize) -> some View {
        let frame = CGRect(
            x: shown.minX * size.width,
            y: shown.minY * size.height,
            width: shown.width * size.width,
            height: shown.height * size.height
        )

        return ZStack {
            CropRectangleOverlayDim(hole: frame)
                .fill(.black.opacity(0.55), style: FillStyle(eoFill: true))
            thirds(in: frame)
                .stroke(.white.opacity(0.5), lineWidth: 0.5)
            Path(frame)
                .stroke(.white, lineWidth: 1.5)
            brackets(in: frame)
                .stroke(.white, style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))

            ForEach(CropRectangleOverlayHandle.allCases, id: \.self) { handle in
                let area = handle.hitArea(around: frame, grip: 44)
                Color.clear
                    .frame(width: area.width, height: area.height)
                    .contentShape(.rect)
                    .gesture(dragGesture(for: handle, in: size))
                    .position(x: area.midX, y: area.midY)
            }
        }
    }

    private func thirds(in frame: CGRect) -> Path {
        Path { path in
            for part in [CGFloat(1) / 3, CGFloat(2) / 3] {
                path.move(to: CGPoint(x: frame.minX + frame.width * part, y: frame.minY))
                path.addLine(to: CGPoint(x: frame.minX + frame.width * part, y: frame.maxY))
                path.move(to: CGPoint(x: frame.minX, y: frame.minY + frame.height * part))
                path.addLine(to: CGPoint(x: frame.maxX, y: frame.minY + frame.height * part))
            }
        }
    }

    private func brackets(in frame: CGRect) -> Path {
        let length = min(22, min(frame.width, frame.height) / 2)
        return Path { path in
            for (corner, x, y) in [
                (CGPoint(x: frame.minX, y: frame.minY), length, length),
                (CGPoint(x: frame.maxX, y: frame.minY), -length, length),
                (CGPoint(x: frame.maxX, y: frame.maxY), -length, -length),
                (CGPoint(x: frame.minX, y: frame.maxY), length, -length),
            ] {
                path.move(to: CGPoint(x: corner.x + x, y: corner.y))
                path.addLine(to: corner)
                path.addLine(to: CGPoint(x: corner.x, y: corner.y + y))
            }
        }
    }

    private func dragGesture(for handle: CropRectangleOverlayHandle, in size: CGSize) -> some Gesture {
        DragGesture(minimumDistance: 0)
            .updating($drag) { value, state, _ in
                state = ActiveDrag(handle: handle, delta: normalized(value.translation, in: size))
            }
            .onEnded { value in
                crop = handle.adjusting(committed, by: normalized(value.translation, in: size), minimumSide: minimumSide)
            }
    }

    private func normalized(_ translation: CGSize, in size: CGSize) -> CGSize {
        guard size.width > 0, size.height > 0 else { return .zero }
        return CGSize(width: translation.width / size.width, height: translation.height / size.height)
    }

    private var accessibilityDescription: String {
        let parts = [("left", committed.minX), ("top", committed.minY), ("width", committed.width), ("height", committed.height)]
        return parts.map { "\($0.0) \(Int(($0.1 * 100).rounded())) percent" }.joined(separator: ", ")
    }

    @ViewBuilder private var accessibilityButtons: some View {
        adjustment("Move left", .body, dx: -adjustmentStep, dy: 0)
        adjustment("Move right", .body, dx: adjustmentStep, dy: 0)
        adjustment("Move up", .body, dx: 0, dy: -adjustmentStep)
        adjustment("Move down", .body, dx: 0, dy: adjustmentStep)
        adjustment("Make wider", .right, dx: adjustmentStep, dy: 0)
        adjustment("Make narrower", .right, dx: -adjustmentStep, dy: 0)
        adjustment("Make taller", .bottom, dx: 0, dy: adjustmentStep)
        adjustment("Make shorter", .bottom, dx: 0, dy: -adjustmentStep)
    }

    private func adjustment(_ title: String, _ handle: CropRectangleOverlayHandle, dx: CGFloat, dy: CGFloat) -> some View {
        Button(title) {
            crop = handle.adjusting(committed, by: CGSize(width: dx, height: dy), minimumSide: minimumSide)
        }
    }
}

// MARK: - Demo

struct CropRectangleOverlayDemo: View {
    private static let initialCrop = CGRect(x: 0.1, y: 0.1, width: 0.8, height: 0.8)

    @State private var crop = initialCrop
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let photo = demoPhoto()

    var body: some View {
        CropRectangleOverlay(image: photo, aspectRatio: 4 / 5, crop: $crop)
            .padding(16)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .overlay(alignment: .bottom) {
                HStack {
                    Text("\(Int((crop.width * 100).rounded()))% × \(Int((crop.height * 100).rounded()))%")
                        .font(.headline.monospacedDigit())
                    Spacer()
                    Button("Reset", systemImage: "arrow.counterclockwise") {
                        withAnimation(reduceMotion ? nil : .snappy) { crop = Self.initialCrop }
                    }
                    .buttonStyle(.bordered)
                }
                .padding(.horizontal, 24)
                .padding(.bottom, 8)
            }
            .background(.black)
            .preferredColorScheme(.dark)
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 800, height: 1000)
    return Image(size: size, label: Text("Coastline")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: [.cyan, .blue, .indigo]), startPoint: .zero, endPoint: CGPoint(x: 0, y: 1000))
        )
        context.fill(Path(ellipseIn: CGRect(x: 120, y: 130, width: 180, height: 180)), with: .color(.yellow.opacity(0.9)))

        var shore = Path()
        shore.move(to: CGPoint(x: 800, y: 1000))
        shore.addLine(to: CGPoint(x: 0, y: 1000))
        shore.addCurve(to: CGPoint(x: 800, y: 420), control1: CGPoint(x: 360, y: 820), control2: CGPoint(x: 460, y: 560))
        shore.closeSubpath()
        context.fill(shore, with: .color(Color(red: 0.95, green: 0.8, blue: 0.55)))
    }
}

#Preview {
    CropRectangleOverlayDemo()
}
```

## Double Tap Zoom Image

An image that zooms in on the point you double tap and returns to fit on the next double tap.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/DoubleTapZoomImage/DoubleTapZoomImage.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum DoubleTapZoomImageMath {
    /// How far a zoomed image can move before showing an empty edge.
    static func clampedOffset(_ offset: CGSize, zoom: CGFloat, in size: CGSize) -> CGSize {
        let limit = CGSize(width: max((zoom - 1) * size.width / 2, 0), height: max((zoom - 1) * size.height / 2, 0))
        return CGSize(
            width: min(max(offset.width, -limit.width), limit.width),
            height: min(max(offset.height, -limit.height), limit.height)
        )
    }

    /// The offset that brings a tapped point as close to the center as the image's edges allow.
    static func offset(centering point: CGPoint, zoom: CGFloat, in size: CGSize) -> CGSize {
        let wanted = CGSize(width: (size.width / 2 - point.x) * zoom, height: (size.height / 2 - point.y) * zoom)
        return clampedOffset(wanted, zoom: zoom, in: size)
    }
}

/// An image that zooms in on the point you double tap and returns to fit on the next double tap.
///
/// While zoomed, a drag pans the image. At rest it leaves drags to the scroll view around it.
/// With Reduce Motion on, the zoom changes without animating.
struct DoubleTapZoomImage: View {
    let image: Image
    let label: LocalizedStringResource
    var zoom: CGFloat = 2.5
    /// Zooms in on this point without a touch, for demos. `nil` returns to fit.
    var programmaticZoom: UnitPoint? = nil

    @State private var isZoomed = false
    @State private var offset = CGSize.zero
    @GestureState private var translation = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var targetZoom: CGFloat { max(zoom, 1) }

    var body: some View {
        GeometryReader { geometry in
            let size = geometry.size
            let shown = CGSize(width: offset.width + translation.width, height: offset.height + translation.height)

            image
                .resizable()
                .scaledToFill()
                .frame(width: size.width, height: size.height)
                .scaleEffect(isZoomed ? targetZoom : 1)
                .offset(isZoomed ? DoubleTapZoomImageMath.clampedOffset(shown, zoom: targetZoom, in: size) : .zero)
                .frame(width: size.width, height: size.height)
                .contentShape(.rect)
                .gesture(
                    SpatialTapGesture(count: 2).onEnded { value in
                        toggleZoom(at: value.location, in: size)
                    }
                )
                .gesture(pan(in: size), including: isZoomed ? .all : .subviews)
                .onChange(of: programmaticZoom) { _, target in
                    setZoom(target.map { CGPoint(x: $0.x * size.width, y: $0.y * size.height) }, in: size)
                }
                .accessibilityLabel(label)
                .accessibilityValue(isZoomed ? "Zoomed in" : "Fit")
                .accessibilityAddTraits(.isImage)
                .accessibilityAction(named: isZoomed ? "Zoom out" : "Zoom in") {
                    toggleZoom(at: CGPoint(x: size.width / 2, y: size.height / 2), in: size)
                }
        }
        // A photo is not mirrored in right-to-left layouts, so neither is the geometry that moves it.
        .environment(\.layoutDirection, .leftToRight)
        .clipped()
    }

    private func pan(in size: CGSize) -> some Gesture {
        DragGesture()
            .updating($translation) { value, state, _ in
                state = value.translation
            }
            .onEnded { value in
                let moved = CGSize(width: offset.width + value.translation.width, height: offset.height + value.translation.height)
                offset = DoubleTapZoomImageMath.clampedOffset(moved, zoom: targetZoom, in: size)
            }
    }

    private func toggleZoom(at point: CGPoint, in size: CGSize) {
        setZoom(isZoomed ? nil : point, in: size)
    }

    private func setZoom(_ point: CGPoint?, in size: CGSize) {
        withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.15)) {
            offset = point.map { DoubleTapZoomImageMath.offset(centering: $0, zoom: targetZoom, in: size) } ?? .zero
            isZoomed = point != nil
        }
    }
}

// MARK: - Demo

struct DoubleTapZoomImageDemo: View {
    private let photo = demoPhoto()

    @State private var zoomTarget: UnitPoint?
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 16) {
            DoubleTapZoomImage(image: photo, label: "City skyline at night", programmaticZoom: zoomTarget)
                .aspectRatio(3 / 4, contentMode: .fit)
                .clipShape(.rect(cornerRadius: 24))

            Label("Double tap anywhere", systemImage: "hand.tap.fill")
                .font(.headline)
                .foregroundStyle(.secondary)
        }
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await playZooms()
        }
    }

    // Only the demo plays by itself, because a real double tap needs a finger.
    private func playZooms() async {
        let targets: [UnitPoint?] = [UnitPoint(x: 0.75, y: 0.2), nil, UnitPoint(x: 0.3, y: 0.7), nil]
        while isAutoPlaying {
            for target in targets {
                try? await Task.sleep(for: .seconds(1.2))
                guard !Task.isCancelled, isAutoPlaying else { return }
                zoomTarget = target
            }
        }
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 900, height: 1200)
    return Image(size: size, label: Text("City skyline at night")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: [.black, .indigo, .purple]), startPoint: .zero, endPoint: CGPoint(x: 0, y: 1200))
        )
        context.fill(Path(ellipseIn: CGRect(x: 620, y: 140, width: 150, height: 150)), with: .color(.white.opacity(0.9)))

        let heights: [CGFloat] = [520, 760, 440, 880, 620, 700, 480]
        for (column, height) in heights.enumerated() {
            let x = CGFloat(column) * 130 - 5
            let tower = CGRect(x: x, y: 1200 - height, width: 120, height: height)
            context.fill(Path(tower), with: .color(Color(white: 0.09)))

            for row in stride(from: tower.minY + 30, to: tower.maxY - 30, by: 64) {
                for offset in [CGFloat(18), 70] where (column + Int(row) / 64 + Int(offset)).isMultiple(of: 3) == false {
                    context.fill(Path(CGRect(x: x + offset, y: row, width: 32, height: 34)), with: .color(.yellow.opacity(0.8)))
                }
            }
        }
    }
}

#Preview {
    DoubleTapZoomImageDemo()
}
```

## Ken Burns Image

A still picture that slowly zooms and pans so that it appears to move.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/KenBurnsImage/KenBurnsImage.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A still picture that slowly zooms and pans so that it appears to move.
///
/// It fills the space it is given and never shows an edge, because it only scales up around a
/// point inside the image. With Reduce Motion on, the picture stays still.
struct KenBurnsImage: View {
    let image: Image
    let label: LocalizedStringResource
    var duration: Double = 12
    var zoom: CGFloat = 1.3
    var from: UnitPoint = .topLeading
    var to: UnitPoint = .bottomTrailing

    @State private var isAtEnd = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .easeInOut(duration: max(duration, 0.1)).repeatForever(autoreverses: true)
    }

    var body: some View {
        Color.clear
            .overlay {
                image
                    .resizable()
                    .scaledToFill()
                    .scaleEffect(isAtEnd ? max(zoom, 1) : 1.02, anchor: isAtEnd ? to : from)
            }
            .clipped()
            .animation(animation, value: isAtEnd)
            .task(id: reduceMotion) { isAtEnd = !reduceMotion }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(label)
            .accessibilityAddTraits(.isImage)
    }
}

// MARK: - Demo

struct KenBurnsImageDemo: View {
    private let photo = demoPhoto()

    var body: some View {
        KenBurnsImage(image: photo, label: "Mountains at sunset", duration: 4, zoom: 1.6)
            .ignoresSafeArea()
            .overlay(alignment: .bottomLeading) {
                VStack(alignment: .leading, spacing: 4) {
                    Text("Sunset Ridge")
                        .font(.largeTitle.bold())
                    Text("Golden hour in the valley")
                        .font(.headline)
                        .opacity(0.85)
                }
                .foregroundStyle(.white)
                .shadow(color: .black.opacity(0.4), radius: 8, y: 2)
                .padding(24)
            }
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 900, height: 1600)
    return Image(size: size, label: Text("Mountains at sunset")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(
                Gradient(colors: [.indigo, .pink, .orange, .yellow]),
                startPoint: .zero,
                endPoint: CGPoint(x: 0, y: 1150)
            )
        )
        context.fill(Path(ellipseIn: CGRect(x: 280, y: 600, width: 340, height: 340)), with: .color(.white.opacity(0.8)))

        let ridges: [(base: CGFloat, color: Color)] = [
            (980, Color(red: 0.42, green: 0.2, blue: 0.5)),
            (1140, Color(red: 0.26, green: 0.14, blue: 0.42)),
            (1320, Color(red: 0.12, green: 0.08, blue: 0.26)),
        ]
        for (index, ridge) in ridges.enumerated() {
            let flip: CGFloat = index.isMultiple(of: 2) ? 1 : -1
            var path = Path()
            path.move(to: CGPoint(x: 0, y: size.height))
            path.addLine(to: CGPoint(x: 0, y: ridge.base))
            path.addCurve(
                to: CGPoint(x: size.width, y: ridge.base - 40 * flip),
                control1: CGPoint(x: 300, y: ridge.base - 220 * flip),
                control2: CGPoint(x: 620, y: ridge.base + 200 * flip)
            )
            path.addLine(to: CGPoint(x: size.width, y: size.height))
            path.closeSubpath()
            context.fill(path, with: .color(ridge.color))
        }
    }
}

#Preview {
    KenBurnsImageDemo()
}
```

## Photo Adjustment Sliders

Brightness, contrast, saturation and hue sliders that update a photo live as they move.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/PhotoAdjustmentSliders/PhotoAdjustmentSliders.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PhotoAdjustmentSlidersValues: Equatable, Sendable {
    var brightness = 0.0
    var contrast = 1.0
    var saturation = 1.0
    var hue = 0.0
}

extension View {
    func adjusted(by values: PhotoAdjustmentSlidersValues) -> some View {
        saturation(values.saturation)
            .contrast(values.contrast)
            .brightness(values.brightness)
            .hueRotation(.degrees(values.hue))
    }
}

/// Brightness, contrast, saturation and hue sliders that update a photo live as they move.
///
/// The whole view scrolls, so every slider stays reachable at the largest text sizes.
struct PhotoAdjustmentSliders: View {
    let image: Image
    @Binding var values: PhotoAdjustmentSlidersValues
    var maxImageHeight: CGFloat = 340

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(spacing: 18) {
                image
                    .resizable()
                    .scaledToFit()
                    .adjusted(by: values)
                    .clipShape(.rect(cornerRadius: 20))
                    .frame(maxHeight: max(maxImageHeight, 0))

                VStack(spacing: 12) {
                    row("Brightness", $values.brightness, in: -0.5...0.5, shown: percent(values.brightness))
                    row("Contrast", $values.contrast, in: 0.5...1.5, shown: percent(values.contrast - 1))
                    row("Saturation", $values.saturation, in: 0...2, shown: percent(values.saturation - 1))
                    row("Hue", $values.hue, in: -180...180, shown: "\(Int(values.hue.rounded()))°")
                }

                Button("Reset", systemImage: "arrow.counterclockwise") {
                    withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.3)) {
                        values = PhotoAdjustmentSlidersValues()
                    }
                }
                .buttonStyle(.bordered)
                .disabled(values == PhotoAdjustmentSlidersValues())
            }
            .padding(16)
        }
        .scrollBounceBehavior(.basedOnSize)
    }

    private func row(_ title: String, _ value: Binding<Double>, in range: ClosedRange<Double>, shown: String) -> some View {
        VStack(spacing: 2) {
            HStack {
                Text(title)
                Spacer()
                Text(shown)
                    .monospacedDigit()
                    .foregroundStyle(.secondary)
            }
            .font(.subheadline)
            .accessibilityHidden(true)

            Slider(value: value, in: range)
                .accessibilityLabel(title)
                .accessibilityValue(shown)
        }
    }

    private func percent(_ value: Double) -> String {
        let whole = Int((value * 100).rounded())
        return whole > 0 ? "+\(whole)%" : "\(whole)%"
    }
}

// MARK: - Demo

struct PhotoAdjustmentSlidersDemo: View {
    @State private var values = PhotoAdjustmentSlidersValues()
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let photo = demoPhoto()

    var body: some View {
        VStack(spacing: 0) {
            ViewThatFits(in: .horizontal) {
                looks
                ScrollView(.horizontal) { looks }
            }
            .padding(.top, 8)

            PhotoAdjustmentSliders(image: photo, values: $values)
        }
    }

    private var looks: some View {
        HStack(spacing: 8) {
            look("Vivid", PhotoAdjustmentSlidersValues(brightness: 0.05, contrast: 1.2, saturation: 1.7))
            look("Noir", PhotoAdjustmentSlidersValues(brightness: -0.05, contrast: 1.35, saturation: 0))
            look("Dream", PhotoAdjustmentSlidersValues(brightness: 0.1, contrast: 0.85, saturation: 1.2, hue: 60))
        }
    }

    private func look(_ title: String, _ target: PhotoAdjustmentSlidersValues) -> some View {
        Button(title) {
            withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.6)) { values = target }
        }
        .buttonStyle(.borderedProminent)
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 1000, height: 800)
    return Image(size: size, label: Text("Lake at sunrise")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: [.blue, .pink, .orange]), startPoint: .zero, endPoint: CGPoint(x: 0, y: 460))
        )
        context.fill(Path(ellipseIn: CGRect(x: 400, y: 240, width: 200, height: 200)), with: .color(.yellow))
        context.fill(
            Path(CGRect(x: 0, y: 460, width: 1000, height: 340)),
            with: .linearGradient(Gradient(colors: [.orange, .teal, .indigo]), startPoint: CGPoint(x: 0, y: 460), endPoint: CGPoint(x: 0, y: 800))
        )

        var hills = Path()
        hills.move(to: CGPoint(x: 0, y: 470))
        hills.addCurve(to: CGPoint(x: 1000, y: 470), control1: CGPoint(x: 300, y: 250), control2: CGPoint(x: 700, y: 620))
        hills.closeSubpath()
        context.fill(hills, with: .color(.green.opacity(0.8)))
    }
}

#Preview {
    PhotoAdjustmentSlidersDemo()
}
```

## Photo Filter Presets

A row of preset thumbnails that apply mono, warm, cool and high contrast looks to a photo using SwiftUI modifiers.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/PhotoFilterPresets/PhotoFilterPresets.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PhotoFilterPreset: Identifiable, Hashable, Sendable {
    let name: String
    var saturation = 1.0
    var contrast = 1.0
    var brightness = 0.0
    var hue = 0.0
    var tint = Color.white

    var id: String { name }

    static let original = PhotoFilterPreset(name: "Original")
    static let all = [
        original,
        PhotoFilterPreset(name: "Mono", saturation: 0, contrast: 1.15),
        PhotoFilterPreset(name: "Warm", saturation: 1.15, tint: Color(red: 1, green: 0.86, blue: 0.68)),
        PhotoFilterPreset(name: "Cool", saturation: 0.95, tint: Color(red: 0.7, green: 0.86, blue: 1)),
        PhotoFilterPreset(name: "Punch", saturation: 1.6, contrast: 1.3),
        PhotoFilterPreset(name: "Fade", saturation: 0.65, contrast: 0.8, brightness: 0.08),
    ]
}

extension View {
    func filtered(by preset: PhotoFilterPreset) -> some View {
        colorMultiply(preset.tint)
            .saturation(preset.saturation)
            .contrast(preset.contrast)
            .brightness(preset.brightness)
            .hueRotation(.degrees(preset.hue))
    }
}

/// A photo with a row of preset thumbnails that apply a look using SwiftUI modifiers.
///
/// The row scrolls sideways and its tiles grow with Dynamic Type. With Reduce Motion on, a new
/// look appears without a crossfade.
struct PhotoFilterPresets: View {
    let image: Image
    @Binding var selection: PhotoFilterPreset
    var presets = PhotoFilterPreset.all

    @ScaledMetric(relativeTo: .caption) private var tileSize = 72.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 20) {
            image
                .resizable()
                .scaledToFit()
                .filtered(by: selection)
                .clipShape(.rect(cornerRadius: 24))
                .frame(maxHeight: .infinity)
                .padding(.horizontal, 16)
                .accessibilityLabel("Photo with the \(selection.name) look")

            ScrollView(.horizontal) {
                HStack(spacing: 12) {
                    ForEach(presets) { preset in
                        tile(preset)
                    }
                }
                .padding(.horizontal, 16)
            }
            .scrollIndicators(.hidden)
            .fixedSize(horizontal: false, vertical: true)
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.3), value: selection)
    }

    private func tile(_ preset: PhotoFilterPreset) -> some View {
        let isSelected = preset == selection

        return Button {
            selection = preset
        } label: {
            VStack(spacing: 6) {
                Color.clear
                    .frame(width: tileSize, height: tileSize)
                    .overlay {
                        image
                            .resizable()
                            .scaledToFill()
                            .filtered(by: preset)
                    }
                    .clipShape(.rect(cornerRadius: 14))
                    .overlay {
                        RoundedRectangle(cornerRadius: 14)
                            .stroke(isSelected ? Color.accentColor : .clear, lineWidth: 3)
                    }

                Text(preset.name)
                    .font(.caption.weight(isSelected ? .semibold : .regular))
                    .foregroundStyle(isSelected ? Color.primary : Color.secondary)
                    .lineLimit(1)
            }
        }
        .buttonStyle(.plain)
        .accessibilityLabel(preset.name)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct PhotoFilterPresetsDemo: View {
    @State private var selection = PhotoFilterPreset.original

    private let photo = demoPhoto()

    var body: some View {
        PhotoFilterPresets(image: photo, selection: $selection)
            .padding(.vertical, 16)
    }
}

private func demoPhoto() -> Image {
    let size = CGSize(width: 900, height: 1125)
    return Image(size: size, label: Text("Flower field")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: [.cyan, .white]), startPoint: .zero, endPoint: CGPoint(x: 0, y: 620))
        )
        context.fill(Path(ellipseIn: CGRect(x: 610, y: 110, width: 170, height: 170)), with: .color(.yellow))
        context.fill(
            Path(CGRect(x: 0, y: 620, width: 900, height: 505)),
            with: .linearGradient(Gradient(colors: [.green, Color(red: 0, green: 0.35, blue: 0.2)]), startPoint: CGPoint(x: 0, y: 620), endPoint: CGPoint(x: 0, y: 1125))
        )

        let colors: [Color] = [.pink, .red, .orange, .purple]
        for index in 0..<36 {
            let x = CGFloat(index * 257 % 860) + 10
            let y = 660 + CGFloat(index * 131 % 430)
            let side = 30 + CGFloat(index % 4) * 14
            context.fill(Path(ellipseIn: CGRect(x: x, y: y, width: side, height: side)), with: .color(colors[index % colors.count]))
        }
    }
}

#Preview {
    PhotoFilterPresetsDemo()
}
```

## Photo Lightbox

A full-screen photo pager where each page zooms independently and the viewer closes on a swipe down.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/PhotoLightbox/PhotoLightbox.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum PhotoLightboxMath {
    /// `photo` is the photo's size at fit. A side that still fits the container cannot pan.
    static func clampedOffset(_ offset: CGSize, zoom: CGFloat, photo: CGSize, in size: CGSize) -> CGSize {
        let limit = CGSize(width: max((photo.width * zoom - size.width) / 2, 0), height: max((photo.height * zoom - size.height) / 2, 0))
        return CGSize(
            width: min(max(offset.width, -limit.width), limit.width),
            height: min(max(offset.height, -limit.height), limit.height)
        )
    }

    static func clampedZoom(_ zoom: CGFloat, maxZoom: CGFloat) -> CGFloat {
        min(max(zoom, 1), max(maxZoom, 1))
    }

    /// The nearest valid page, or 0 for an empty pager.
    static func clampedPage(_ page: Int, count: Int) -> Int {
        min(max(page, 0), max(count - 1, 0))
    }
}

/// A full-screen photo pager. Each page zooms on its own, and a swipe down closes the viewer.
///
/// Present it above your content, for example in a `ZStack`. Pinch or double tap to zoom. Paging
/// and the swipe down stop while the current photo is zoomed, so a drag pans it instead.
/// Changing `photos` returns every page to fit.
struct PhotoLightbox: View {
    let photos: [Image]
    @Binding var selection: Int
    var maxZoom: CGFloat = 4
    var onClose: () -> Void

    @State private var zooms: [Int: CGFloat] = [:]
    @GestureState private var pullDown: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isCurrentZoomed: Bool { (zooms[selection] ?? 1) > 1 }
    private var pullProgress: CGFloat { min(pullDown / 320, 1) }

    var body: some View {
        ZStack(alignment: .top) {
            Color.black
                .opacity(1 - pullProgress * 0.7)
                .ignoresSafeArea()

            TabView(selection: $selection) {
                ForEach(photos.indices, id: \.self) { index in
                    PhotoLightboxPage(
                        photo: photos[index],
                        zoom: Binding(get: { zooms[index] ?? 1 }, set: { zooms[index] = $0 }),
                        maxZoom: maxZoom
                    )
                    .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))
            .ignoresSafeArea()
            .scaleEffect(1 - pullProgress * 0.2)
            .offset(y: pullDown)
            .animation(reduceMotion ? nil : .snappy, value: pullDown == 0)
            .simultaneousGesture(closeGesture, including: isCurrentZoomed ? .subviews : .all)

            header
                .opacity(pullDown == 0 ? 1 : 0)
        }
        .preferredColorScheme(.dark)
        .accessibilityAction(.escape) { onClose() }
        .onChange(of: photos.count, initial: true) { _, count in
            let page = PhotoLightboxMath.clampedPage(selection, count: count)
            if page != selection { selection = page }
        }
        // Zoom is kept by position, so a photo that moves into another's place must not inherit its zoom.
        .onChange(of: photos) { zooms.removeAll() }
    }

    private var header: some View {
        HStack {
            if !photos.isEmpty {
                Text("\(PhotoLightboxMath.clampedPage(selection, count: photos.count) + 1) of \(photos.count)")
                    .font(.headline)
                    .monospacedDigit()
            }
            Spacer()
            Button(action: onClose) {
                Image(systemName: "xmark")
                    .font(.headline)
                    .frame(width: 44, height: 44)
                    .background(.ultraThinMaterial, in: .circle)
            }
            .accessibilityLabel("Close")
        }
        .foregroundStyle(.white)
        .padding(.horizontal, 16)
    }

    private var closeGesture: some Gesture {
        DragGesture(minimumDistance: 14)
            .updating($pullDown) { value, state, _ in
                if state != 0 || abs(value.translation.height) > abs(value.translation.width) {
                    state = max(value.translation.height, 0)
                }
            }
            .onEnded { value in
                guard abs(value.translation.height) > abs(value.translation.width),
                      value.predictedEndTranslation.height > 200 else { return }
                onClose()
            }
    }
}

private struct PhotoLightboxPage: View {
    let photo: Image
    @Binding var zoom: CGFloat
    let maxZoom: CGFloat

    @State private var offset = CGSize.zero
    @State private var fittedSize = CGSize.zero
    @GestureState private var pinch: CGFloat = 1
    @GestureState private var pan = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        GeometryReader { geometry in
            let size = geometry.size
            let liveZoom = PhotoLightboxMath.clampedZoom(zoom * pinch, maxZoom: maxZoom)
            let moved = CGSize(width: offset.width + pan.width, height: offset.height + pan.height)

            photo
                .resizable()
                .scaledToFit()
                .onGeometryChange(for: CGSize.self) { $0.size } action: { fittedSize = $0 }
                .frame(width: size.width, height: size.height)
                .scaleEffect(liveZoom)
                .offset(PhotoLightboxMath.clampedOffset(moved, zoom: liveZoom, photo: fittedSize, in: size))
                .frame(width: size.width, height: size.height)
                .contentShape(.rect)
                .gesture(TapGesture(count: 2).onEnded { toggleZoom() })
                .simultaneousGesture(pinchGesture(in: size))
                .gesture(panGesture(in: size), including: zoom > 1 ? .all : .subviews)
                .accessibilityAction(named: zoom > 1 ? "Zoom out" : "Zoom in") { toggleZoom() }
        }
        // A photo back at fit starts its next zoom from the center, also when the viewer resets the zoom.
        .onChange(of: zoom) { _, zoom in
            if zoom <= 1 { offset = .zero }
        }
        // A photo is not mirrored in right-to-left layouts, so neither is the geometry that moves it.
        .environment(\.layoutDirection, .leftToRight)
    }

    private func pinchGesture(in size: CGSize) -> some Gesture {
        MagnifyGesture()
            .updating($pinch) { value, state, _ in
                state = value.magnification
            }
            .onEnded { value in
                zoom = PhotoLightboxMath.clampedZoom(zoom * value.magnification, maxZoom: maxZoom)
                offset = PhotoLightboxMath.clampedOffset(offset, zoom: zoom, photo: fittedSize, in: size)
            }
    }

    private func panGesture(in size: CGSize) -> some Gesture {
        DragGesture()
            .updating($pan) { value, state, _ in
                state = value.translation
            }
            .onEnded { value in
                let moved = CGSize(width: offset.width + value.translation.width, height: offset.height + value.translation.height)
                offset = PhotoLightboxMath.clampedOffset(moved, zoom: zoom, photo: fittedSize, in: size)
            }
    }

    private func toggleZoom() {
        withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.15)) {
            zoom = zoom > 1 ? 1 : PhotoLightboxMath.clampedZoom(2.5, maxZoom: maxZoom)
            offset = .zero
        }
    }
}

// MARK: - Demo

struct PhotoLightboxDemo: View {
    @State private var selection = 0
    @State private var isOpen = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let photos = [
        demoPhoto([.indigo, .pink, .orange], hill: .purple, label: "Sunset"),
        demoPhoto([.cyan, .teal, .white], hill: .green, label: "Spring valley"),
        demoPhoto([.black, .indigo, .blue], hill: .black, label: "Night sky"),
        demoPhoto([.orange, .yellow, .white], hill: .brown, label: "Desert"),
    ]

    private var animation: Animation? {
        reduceMotion ? nil : .easeInOut(duration: 0.25)
    }

    var body: some View {
        ZStack {
            ScrollView {
                LazyVGrid(columns: [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)], spacing: 12) {
                    ForEach(photos.indices, id: \.self) { index in
                        thumbnail(index)
                    }
                }
                .padding(16)
            }

            if isOpen {
                PhotoLightbox(photos: photos, selection: $selection) {
                    withAnimation(animation) { isOpen = false }
                }
                .transition(.opacity)
            }
        }
    }

    private func thumbnail(_ index: Int) -> some View {
        Button {
            selection = index
            withAnimation(animation) { isOpen = true }
        } label: {
            Color.clear
                .aspectRatio(3 / 4, contentMode: .fit)
                .overlay {
                    photos[index]
                        .resizable()
                        .scaledToFill()
                }
                .clipShape(.rect(cornerRadius: 18))
        }
        .buttonStyle(.plain)
        .accessibilityLabel("Open photo \(index + 1)")
    }
}

private func demoPhoto(_ sky: [Color], hill: Color, label: String) -> Image {
    let size = CGSize(width: 900, height: 1200)
    return Image(size: size, label: Text(label)) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: sky), startPoint: .zero, endPoint: CGPoint(x: 0, y: size.height))
        )
        context.fill(Path(ellipseIn: CGRect(x: 540, y: 220, width: 200, height: 200)), with: .color(.white.opacity(0.85)))

        var ridge = Path()
        ridge.move(to: CGPoint(x: 0, y: size.height))
        ridge.addLine(to: CGPoint(x: 0, y: 760))
        ridge.addCurve(to: CGPoint(x: size.width, y: 660), control1: CGPoint(x: 300, y: 480), control2: CGPoint(x: 600, y: 1020))
        ridge.addLine(to: CGPoint(x: size.width, y: size.height))
        ridge.closeSubpath()
        context.fill(ridge, with: .color(hill))
    }
}

#Preview {
    PhotoLightboxDemo()
}
```

## Photo Multi Select Grid

A photo grid where a long press enters a multi-select mode that shows checkmarks on the chosen photos.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/PhotoMultiSelectGrid/PhotoMultiSelectGrid.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PhotoMultiSelectGridPhoto: Identifiable {
    let id: String
    let image: Image
    let label: LocalizedStringResource
}

/// A photo grid where a long press enters a multi-select mode with checkmarks.
///
/// In that mode a tap toggles a photo. Out of it, a tap calls `onOpen`. Photos that disappear
/// also leave the selection. With Reduce Motion on, photos change state without animating.
struct PhotoMultiSelectGrid: View {
    let photos: [PhotoMultiSelectGridPhoto]
    @Binding var selection: Set<String>
    @Binding var isSelecting: Bool
    var onOpen: (PhotoMultiSelectGridPhoto) -> Void = { _ in }

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .snappy(duration: 0.25)
    }

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: 110), spacing: 4)], spacing: 4) {
                ForEach(photos) { photo in
                    cell(photo)
                }
            }
        }
        .sensoryFeedback(.selection, trigger: selection)
        .onChange(of: photos.map(\.id)) { _, ids in
            selection.formIntersection(ids)
        }
    }

    private func cell(_ photo: PhotoMultiSelectGridPhoto) -> some View {
        let isChosen = selection.contains(photo.id)

        return Color.clear
            .aspectRatio(1, contentMode: .fit)
            .overlay {
                photo.image
                    .resizable()
                    .scaledToFill()
            }
            .clipShape(.rect(cornerRadius: isChosen ? 14 : 0))
            .scaleEffect(isChosen ? 0.86 : 1)
            .overlay(alignment: .bottomTrailing) {
                if isSelecting {
                    checkmark(isChosen: isChosen)
                }
            }
            .contentShape(.rect)
            .onTapGesture { handleTap(photo) }
            .onLongPressGesture(minimumDuration: 0.35) { enterSelection(with: photo) }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(photo.label)
            .accessibilityValue(isSelecting ? (isChosen ? "Selected" : "Not selected") : "")
            .accessibilityAddTraits(isChosen ? [.isButton, .isImage, .isSelected] : [.isButton, .isImage])
            .accessibilityAction { handleTap(photo) }
            .accessibilityActions {
                if !isSelecting {
                    Button("Select") { enterSelection(with: photo) }
                }
            }
    }

    private func checkmark(isChosen: Bool) -> some View {
        Image(systemName: isChosen ? "checkmark.circle.fill" : "circle")
            .font(.title2)
            .symbolRenderingMode(.palette)
            .foregroundStyle(.white, isChosen ? Color.accentColor : Color.black.opacity(0.25))
            .shadow(color: .black.opacity(0.3), radius: 3)
            .padding(8)
            .transition(.opacity)
    }

    private func handleTap(_ photo: PhotoMultiSelectGridPhoto) {
        guard isSelecting else {
            onOpen(photo)
            return
        }
        withAnimation(animation) {
            if selection.remove(photo.id) == nil {
                selection.insert(photo.id)
            }
        }
    }

    private func enterSelection(with photo: PhotoMultiSelectGridPhoto) {
        guard !isSelecting else { return }
        withAnimation(animation) {
            isSelecting = true
            selection.insert(photo.id)
        }
    }
}

// MARK: - Demo

struct PhotoMultiSelectGridDemo: View {
    @State private var selection: Set<String> = []
    @State private var isSelecting = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let photos = (1...15).map { number in
        PhotoMultiSelectGridPhoto(id: "\(number)", image: demoPhoto(number), label: "Photo \(number)")
    }

    var body: some View {
        VStack(spacing: 12) {
            HStack {
                Text(isSelecting ? "\(selection.count) selected" : "Long press a photo")
                    .font(.title3.bold())
                    .monospacedDigit()
                Spacer()
                if isSelecting {
                    Button("Done") {
                        withAnimation(reduceMotion ? nil : .snappy(duration: 0.25)) {
                            isSelecting = false
                            selection = []
                        }
                    }
                    .buttonStyle(.bordered)
                }
            }
            .frame(minHeight: 44)
            .padding(.horizontal, 16)

            PhotoMultiSelectGrid(photos: photos, selection: $selection, isSelecting: $isSelecting)
        }
    }
}

private func demoPhoto(_ number: Int) -> Image {
    let palettes: [[Color]] = [
        [.indigo, .pink], [.teal, .green], [.orange, .yellow], [.purple, .blue], [.red, .orange],
    ]
    let symbols = ["mountain.2.fill", "leaf.fill", "sun.max.fill", "moon.stars.fill", "flame.fill"]
    let colors = palettes[number % palettes.count]
    let symbol = symbols[number % symbols.count]
    let size = CGSize(width: 300, height: 300)

    return Image(size: size, label: Text("Photo \(number)")) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: 300, y: 300))
        )
        var icon = context.resolve(Image(systemName: symbol))
        icon.shading = .color(.white.opacity(0.85))
        context.draw(icon, in: CGRect(x: 90, y: 90, width: 120, height: 120))
    }
}

#Preview {
    PhotoMultiSelectGridDemo()
}
```

## Scattered Photo Board

Photos scattered at slight angles on a board that can be dragged around and brought to the front on touch.

Category: Images. Minimum: iOS 18.0. Path: Components/Images/ScatteredPhotoBoard/ScatteredPhotoBoard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct ScatteredPhotoBoardPhoto: Identifiable {
    let id: String
    let image: Image
    let caption: String
}

enum ScatteredPhotoBoardLayout {
    /// A repeatable pseudo-random number from -0.5 to 0.5.
    private static func noise(_ index: Int, salt: Double) -> Double {
        let value = sin(Double(index % 10_000) * 12.9898 + salt) * 43_758.5453
        return value - value.rounded(.down) - 0.5
    }

    static let maximumAngle = 9.0

    static func angle(index: Int) -> Double {
        noise(index, salt: 7) * maximumAngle * 2
    }

    /// Keeps a card's center inside the board, or in its middle if the card does not fit.
    static func clamped(_ point: CGPoint, card: CGSize, board: CGSize) -> CGPoint {
        // A tilted card is wider and taller than it is straight. This is the box at the widest tilt.
        let tilt = maximumAngle * .pi / 180
        let card = CGSize(
            width: card.width * cos(tilt) + card.height * sin(tilt),
            height: card.height * cos(tilt) + card.width * sin(tilt)
        )
        func clamp(_ value: CGFloat, side: CGFloat, length: CGFloat) -> CGFloat {
            guard length > side else { return length / 2 }
            return min(max(value, side / 2), length - side / 2)
        }
        return CGPoint(x: clamp(point.x, side: card.width, length: board.width), y: clamp(point.y, side: card.height, length: board.height))
    }

    /// The offset from `home` to keep after a drag: where the card stopped, not how far the finger went.
    static func settledOffset(home: CGPoint, saved: CGSize, translation: CGSize, card: CGSize, board: CGSize) -> CGSize {
        let end = clamped(
            CGPoint(x: home.x + saved.width + translation.width, y: home.y + saved.height + translation.height),
            card: card,
            board: board
        )
        return CGSize(width: end.x - home.x, height: end.y - home.y)
    }

    /// A slightly jittered grid position, so the same photos always land in the same place.
    static func center(index: Int, count: Int, card: CGSize, board: CGSize) -> CGPoint {
        guard count > 0 else { return CGPoint(x: board.width / 2, y: board.height / 2) }
        let columns = max(Int(Double(min(count, 10_000)).squareRoot().rounded(.up)), 1)
        let rows = count / columns + (count.isMultiple(of: columns) ? 0 : 1)
        let cell = CGSize(width: board.width / CGFloat(columns), height: board.height / CGFloat(rows))

        let point = CGPoint(
            x: (CGFloat(index % columns) + 0.5 + noise(index, salt: 1) * 0.35) * cell.width,
            y: (CGFloat(index / columns) + 0.5 + noise(index, salt: 3) * 0.35) * cell.height
        )
        return clamped(point, card: card, board: board)
    }
}

/// Photos scattered at slight angles on a board. Touching one brings it to the front, and it can
/// be dragged anywhere on the board.
///
/// VoiceOver reads each caption and offers an action to bring the photo to the front. With
/// Reduce Motion on, a card does not lift while dragged.
struct ScatteredPhotoBoard: View {
    private struct ActiveDrag {
        let id: String
        let translation: CGSize
    }

    let photos: [ScatteredPhotoBoardPhoto]
    var cardWidth: CGFloat = 150

    @State private var offsets: [String: CGSize] = [:]
    @State private var stacking: [String] = []
    @GestureState private var drag: ActiveDrag?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private let space = "ScatteredPhotoBoard"

    private var cardSize: CGSize {
        let width = max(cardWidth, 1)
        return CGSize(width: width, height: width * 1.2)
    }

    var body: some View {
        GeometryReader { geometry in
            ZStack {
                ForEach(Array(photos.enumerated()), id: \.element.id) { index, photo in
                    card(photo, index: index, board: geometry.size)
                        .position(position(of: photo, index: index, board: geometry.size))
                        .zIndex(depth(of: photo, index: index))
                }
            }
            .frame(width: geometry.size.width, height: geometry.size.height)
            .coordinateSpace(.named(space))
        }
    }

    private func card(_ photo: ScatteredPhotoBoardPhoto, index: Int, board: CGSize) -> some View {
        let isDragged = drag?.id == photo.id
        let lifted = isDragged && !reduceMotion

        return VStack(spacing: 6) {
            Color.clear
                .aspectRatio(1, contentMode: .fit)
                .overlay {
                    photo.image
                        .resizable()
                        .scaledToFill()
                }
                .clipped()
            Text(photo.caption)
                .font(.caption.weight(.medium))
                .foregroundStyle(.black.opacity(0.75))
                .lineLimit(1)
                .minimumScaleFactor(0.7)
        }
        .padding(8)
        .frame(width: cardSize.width)
        .background(.white, in: .rect(cornerRadius: 4))
        .shadow(color: .black.opacity(lifted ? 0.4 : 0.25), radius: lifted ? 16 : 6, y: lifted ? 10 : 3)
        .contentShape(.rect)
        .gesture(dragGesture(for: photo, index: index, board: board))
        .scaleEffect(lifted ? 1.06 : 1)
        .rotationEffect(.degrees(lifted ? 0 : ScatteredPhotoBoardLayout.angle(index: index)))
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: isDragged)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(photo.caption)
        .accessibilityAddTraits(.isImage)
        .accessibilityAction(named: "Bring to front") { bringToFront(photo) }
    }

    private func dragGesture(for photo: ScatteredPhotoBoardPhoto, index: Int, board: CGSize) -> some Gesture {
        DragGesture(minimumDistance: 0, coordinateSpace: .named(space))
            .updating($drag) { value, state, _ in
                state = ActiveDrag(id: photo.id, translation: layoutTranslation(value.translation))
            }
            .onChanged { _ in bringToFront(photo) }
            .onEnded { value in
                offsets[photo.id] = ScatteredPhotoBoardLayout.settledOffset(
                    home: ScatteredPhotoBoardLayout.center(index: index, count: photos.count, card: cardSize, board: board),
                    saved: offsets[photo.id] ?? .zero,
                    translation: layoutTranslation(value.translation),
                    card: cardSize,
                    board: board
                )
            }
    }

    /// Gestures report screen points, but layout mirrors in right-to-left layouts.
    private func layoutTranslation(_ translation: CGSize) -> CGSize {
        layoutDirection == .rightToLeft ? CGSize(width: -translation.width, height: translation.height) : translation
    }

    private func position(of photo: ScatteredPhotoBoardPhoto, index: Int, board: CGSize) -> CGPoint {
        let home = ScatteredPhotoBoardLayout.center(index: index, count: photos.count, card: cardSize, board: board)
        let saved = offsets[photo.id] ?? .zero
        let live = drag?.id == photo.id ? drag?.translation ?? .zero : .zero
        return ScatteredPhotoBoardLayout.clamped(
            CGPoint(x: home.x + saved.width + live.width, y: home.y + saved.height + live.height),
            card: cardSize,
            board: board
        )
    }

    private func depth(of photo: ScatteredPhotoBoardPhoto, index: Int) -> Double {
        guard let rank = stacking.firstIndex(of: photo.id) else { return Double(index) }
        return Double(photos.count + rank)
    }

    private func bringToFront(_ photo: ScatteredPhotoBoardPhoto) {
        guard stacking.last != photo.id else { return }
        stacking.removeAll { $0 == photo.id }
        stacking.append(photo.id)
    }
}

// MARK: - Demo

struct ScatteredPhotoBoardDemo: View {
    private let photos = [
        demoPhoto("Lisbon", [.orange, .pink], "sun.max.fill"),
        demoPhoto("Oslo", [.cyan, .blue], "snowflake"),
        demoPhoto("Kyoto", [.pink, .purple], "leaf.fill"),
        demoPhoto("Quito", [.green, .teal], "mountain.2.fill"),
        demoPhoto("Cairo", [.yellow, .orange], "sparkles"),
    ]

    var body: some View {
        ScatteredPhotoBoard(photos: photos)
            .background {
                LinearGradient(
                    colors: [Color(red: 0.72, green: 0.55, blue: 0.38), Color(red: 0.55, green: 0.39, blue: 0.25)],
                    startPoint: .top,
                    endPoint: .bottom
                )
                .ignoresSafeArea()
            }
    }
}

private func demoPhoto(_ caption: String, _ colors: [Color], _ symbol: String) -> ScatteredPhotoBoardPhoto {
    let size = CGSize(width: 400, height: 400)
    let image = Image(size: size, label: Text(caption)) { context in
        context.fill(
            Path(CGRect(origin: .zero, size: size)),
            with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: 400, y: 400))
        )
        var icon = context.resolve(Image(systemName: symbol))
        icon.shading = .color(.white.opacity(0.9))
        context.draw(icon, in: CGRect(x: 120, y: 120, width: 160, height: 160))
    }
    return ScatteredPhotoBoardPhoto(id: caption, image: image, caption: caption)
}

#Preview {
    ScatteredPhotoBoardDemo()
}
```

## Character Count Text Editor

A multiline text field with a placeholder, a ring that fills toward the limit and a count that turns orange near it and red past it.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/CharacterCountTextEditor/CharacterCountTextEditor.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum CharacterCountTextEditorLevel: Equatable {
    case normal, warning, over

    /// Warns from `warningFraction` of the limit, and is over only past it.
    init(count: Int, limit: Int, warningFraction: Double = 0.9) {
        if count > limit {
            self = .over
        } else if Double(count) >= Double(limit) * warningFraction {
            self = .warning
        } else {
            self = .normal
        }
    }

    /// Characters as people see them: an emoji or an accented letter counts once.
    static func count(of text: String) -> Int {
        text.count
    }
}

/// A multiline text field with a placeholder, a ring that fills toward the
/// limit and a count that turns orange near it and red past it.
///
/// It counts characters as people see them, so an emoji counts once, and it
/// never cuts the text: cutting it as it changes breaks typing in Japanese or
/// Chinese and pasting, so the caller disables sending instead. The ring and
/// the count change without motion, so Reduce Motion needs nothing different.
struct CharacterCountTextEditor: View {
    let title: LocalizedStringResource
    @Binding var text: String
    var limit = 280
    var lineLimit: ClosedRange<Int> = 3...8

    @FocusState private var isFocused: Bool
    @ScaledMetric(relativeTo: .footnote) private var ringSize = 18.0

    private var count: Int { CharacterCountTextEditorLevel.count(of: text) }
    private var level: CharacterCountTextEditorLevel { CharacterCountTextEditorLevel(count: count, limit: limit) }

    private var levelColor: Color {
        switch level {
        case .normal: .accentColor
        case .warning: .orange
        case .over: .red
        }
    }

    var body: some View {
        VStack(alignment: .trailing, spacing: 8) {
            TextField(text: $text, axis: .vertical) { Text(title) }
                .lineLimit(lineLimit)
                .focused($isFocused)
                .accessibilityLabel(Text(title))
                .accessibilityHint(Text("\(count) of \(limit) characters"))
                .padding(14)
                .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 16, style: .continuous))
                .overlay {
                    RoundedRectangle(cornerRadius: 16, style: .continuous)
                        .strokeBorder(level == .over ? AnyShapeStyle(.red) : isFocused ? AnyShapeStyle(.tint) : AnyShapeStyle(.quaternary), lineWidth: 1.5)
                }

            HStack(spacing: 8) {
                Text("\(count)/\(limit)")
                    .font(.footnote.weight(level == .normal ? .regular : .semibold))
                    .monospacedDigit()
                    .foregroundStyle(level == .normal ? AnyShapeStyle(.secondary) : AnyShapeStyle(levelColor))
                    .contentTransition(.numericText(value: Double(count)))

                ZStack {
                    Circle()
                        .stroke(.quaternary, lineWidth: ringSize / 6)
                    Circle()
                        .trim(from: 0, to: min(Double(count) / Double(max(limit, 1)), 1))
                        .stroke(levelColor, style: StrokeStyle(lineWidth: ringSize / 6, lineCap: .round))
                        .rotationEffect(.degrees(-90))
                }
                .frame(width: ringSize, height: ringSize)
            }
            .accessibilityHidden(true)
            .animation(.easeOut(duration: 0.15), value: count)
        }
        .onChange(of: level) { old, new in
            if new == .over, old != .over {
                AccessibilityNotification.Announcement(String(localized: "Over the character limit")).post()
            }
        }
    }
}

// MARK: - Demo

struct CharacterCountTextEditorDemo: View {
    @State private var status = ""
    @State private var bio = "Coffee, trains and old maps."
    @State private var postedStatus: String?

    private var canPost: Bool {
        !status.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty && status.count <= 80
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Profile")
                    .font(.largeTitle.bold())

                VStack(alignment: .leading, spacing: 8) {
                    Text("Status")
                        .font(.headline)
                    CharacterCountTextEditor(title: "What's on your mind?", text: $status, limit: 80)
                }

                VStack(alignment: .leading, spacing: 8) {
                    Text("Bio")
                        .font(.headline)
                    CharacterCountTextEditor(title: "Tell people about yourself", text: $bio, limit: 160, lineLimit: 2...4)
                }

                Button {
                    postedStatus = status
                    status = ""
                } label: {
                    Text("Post Status").frame(maxWidth: .infinity)
                }
                .buttonStyle(.borderedProminent)
                .controlSize(.large)
                .disabled(!canPost)

                if let postedStatus {
                    Text(verbatim: postedStatus)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
            }
            .padding(20)
        }
        .scrollDismissesKeyboard(.interactively)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    CharacterCountTextEditorDemo()
}
```

## Clearable Text Field

A text field with a leading symbol, a clear button that keeps the focus, a tinted border while editing and an optional error message.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/ClearableTextField/ClearableTextField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A text field with a leading symbol and a button that clears it. The border
/// and the symbol take the tint while it has focus, and both turn red with a
/// message under the field when the caller passes an error.
///
/// Clearing keeps the focus, so the keyboard stays up for the next text.
/// With Reduce Motion on, the clear button and the error fade instead of moving.
struct ClearableTextField: View {
    let title: LocalizedStringResource
    @Binding var text: String
    var systemImage: String?
    var errorMessage: LocalizedStringResource?

    @FocusState private var isFocused: Bool
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var accent: AnyShapeStyle {
        if errorMessage != nil { return AnyShapeStyle(.red) }
        return isFocused ? AnyShapeStyle(.tint) : AnyShapeStyle(.secondary)
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            HStack(spacing: 10) {
                if let systemImage {
                    Image(systemName: systemImage)
                        .foregroundStyle(accent)
                        .accessibilityHidden(true)
                }

                TextField(text: $text) { Text(title) }
                    .focused($isFocused)
                    .accessibilityLabel(Text(title))
                    .accessibilityHint(errorMessage.map { Text($0) } ?? Text(""))

                if !text.isEmpty {
                    Button {
                        text = ""
                        isFocused = true
                    } label: {
                        Image(systemName: "xmark.circle.fill")
                            .foregroundStyle(.tertiary)
                            .padding(13)
                            .contentShape(.rect)
                            .padding(-13)
                    }
                    .buttonStyle(.plain)
                    .accessibilityLabel("Clear text")
                    .transition(reduceMotion ? .opacity : .scale.combined(with: .opacity))
                }
            }
            .padding(.horizontal, 14)
            .padding(.vertical, 13)
            .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 14, style: .continuous))
            .overlay {
                RoundedRectangle(cornerRadius: 14, style: .continuous)
                    .strokeBorder(accent, lineWidth: isFocused || errorMessage != nil ? 1.5 : 0.5)
            }
            .contentShape(.rect)
            .onTapGesture { isFocused = true }

            if let errorMessage {
                Label { Text(errorMessage) } icon: { Image(systemName: "exclamationmark.circle.fill") }
                    .font(.footnote)
                    .foregroundStyle(.red)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .move(edge: .top)))
                    .accessibilityHidden(true)
            }
        }
        .animation(reduceMotion ? .easeInOut(duration: 0.15) : .snappy(duration: 0.25), value: text.isEmpty)
        .animation(reduceMotion ? .easeInOut(duration: 0.15) : .snappy(duration: 0.25), value: errorMessage == nil)
        .animation(.easeInOut(duration: 0.15), value: isFocused)
    }
}

// MARK: - Demo

struct ClearableTextFieldDemo: View {
    @State private var search = "Coffee near me"
    @State private var name = ""
    @State private var email = ""

    private var emailError: LocalizedStringResource? {
        !email.isEmpty && !email.contains("@") ? "Enter a valid email address." : nil
    }

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Contact")
                    .font(.largeTitle.bold())

                ClearableTextField(title: "Search", text: $search, systemImage: "magnifyingglass")
                ClearableTextField(title: "Name", text: $name, systemImage: "person")
                    .textContentType(.name)
                ClearableTextField(title: "Email", text: $email, systemImage: "envelope", errorMessage: emailError)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
            }
            .padding(20)
        }
        .tint(.indigo)
        .background(Color(uiColor: .systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    ClearableTextFieldDemo()
}
```

## Color Swatch Picker

A grid of selectable color swatches where the chosen one grows a ring.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/ColorSwatchPicker/ColorSwatchPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct ColorSwatchPickerOption: Hashable, Identifiable {
    let name: String
    let color: Color

    var id: String { name }
}

/// A grid of color swatches where the selected one grows a ring.
///
/// With Reduce Motion on, the ring fades in without growing.
struct ColorSwatchPicker: View {
    let options: [ColorSwatchPickerOption]
    @Binding var selection: ColorSwatchPickerOption

    @ScaledMetric(relativeTo: .title) private var swatchSize = 48.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: swatchSize), spacing: 12)], spacing: 12) {
            ForEach(options) { option in
                swatch(option)
            }
        }
        .animation(reduceMotion ? .easeOut(duration: 0.15) : .spring(duration: 0.35, bounce: 0.5), value: selection)
    }

    private func swatch(_ option: ColorSwatchPickerOption) -> some View {
        let isSelected = option == selection

        return Button {
            selection = option
        } label: {
            ZStack {
                Circle()
                    .strokeBorder(option.color, lineWidth: 3)
                    .scaleEffect(isSelected || reduceMotion ? 1 : 0.5)
                    .opacity(isSelected ? 1 : 0)

                Circle()
                    .fill(option.color.gradient)
                    .padding(isSelected ? 8 : 4)
            }
            .frame(width: swatchSize, height: swatchSize)
            .contentShape(.circle)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(option.name)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct ColorSwatchPickerDemo: View {
    private static let options = [
        ColorSwatchPickerOption(name: "Coral", color: .red),
        ColorSwatchPickerOption(name: "Amber", color: .orange),
        ColorSwatchPickerOption(name: "Mint", color: .mint),
        ColorSwatchPickerOption(name: "Sky", color: .cyan),
        ColorSwatchPickerOption(name: "Indigo", color: .indigo),
        ColorSwatchPickerOption(name: "Rose", color: .pink),
    ]

    @State private var selection = options[2]

    var body: some View {
        VStack(spacing: 32) {
            Image(systemName: "paintpalette.fill")
                .font(.largeTitle)
                .imageScale(.large)
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity)
                .frame(height: 220)
                .background(selection.color.gradient, in: .rect(cornerRadius: 28))
                .animation(.easeInOut(duration: 0.3), value: selection)
                .accessibilityHidden(true)

            Text("Pick an accent")
                .font(.title2.bold())

            ColorSwatchPicker(options: Self.options, selection: $selection)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    ColorSwatchPickerDemo()
}
```

## Floating Label Text Field

A text field whose placeholder floats up when it gains focus or has text.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/FloatingLabelTextField/FloatingLabelTextField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A text field whose placeholder floats up on focus or once it has text.
///
/// With Reduce Motion on, the label changes place without sliding.
struct FloatingLabelTextField: View {
    let title: LocalizedStringResource
    @Binding var text: String
    var tint: Color = .indigo

    @FocusState private var isFocused: Bool
    @ScaledMetric(relativeTo: .body) private var fieldHeight = 60.0
    @ScaledMetric(relativeTo: .body) private var textDrop = 9.0
    @ScaledMetric(relativeTo: .body) private var labelLift = 12.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isFloating: Bool { isFocused || !text.isEmpty }

    var body: some View {
        ZStack(alignment: .leading) {
            Text(title)
                .font(.body)
                .foregroundStyle(isFocused ? tint : Color.secondary)
                .scaleEffect(isFloating ? 0.78 : 1, anchor: .leading)
                .offset(y: isFloating ? -labelLift : 0)
                .accessibilityRepresentation { EmptyView() }
                .allowsHitTesting(false)

            TextField(text: $text, prompt: Text(verbatim: "")) { Text(title) }
                .accessibilityLabel(title)
                .font(.body)
                .focused($isFocused)
                .tint(tint)
                .offset(y: isFloating ? textDrop : 0)
        }
        .padding(.horizontal, 16)
        .frame(minHeight: fieldHeight)
        .background(.regularMaterial, in: .rect(cornerRadius: 14))
        .overlay {
            RoundedRectangle(cornerRadius: 14)
                .strokeBorder(isFocused ? tint : Color.secondary.opacity(0.25), lineWidth: isFocused ? 2 : 1)
        }
        .contentShape(.rect(cornerRadius: 14))
        .onTapGesture { isFocused = true }
        .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.2), value: isFloating)
        .animation(reduceMotion ? nil : .easeOut(duration: 0.2), value: isFocused)
    }
}

// MARK: - Demo

struct FloatingLabelTextFieldDemo: View {
    @State private var name = ""
    @State private var email = ""
    @State private var city = "Valencia"

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo.opacity(0.25), .purple.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 16) {
                Text("Create your account")
                    .font(.title.bold())
                    .padding(.bottom, 8)

                FloatingLabelTextField(title: "Name", text: $name)
                FloatingLabelTextField(title: "Email", text: $email)
                    .keyboardType(.emailAddress)
                    .textContentType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                FloatingLabelTextField(title: "City", text: $city)
            }
            .padding(24)
            .frame(maxHeight: .infinity, alignment: .top)
        }
        .ignoresSafeArea(.keyboard)
    }
}

#Preview {
    FloatingLabelTextFieldDemo()
}
```

## Masked Text Field

A text field that formats input as the user types, such as 12/34 or a phone number, using a mask.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/MaskedTextField/MaskedTextField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Applies a mask where `#` takes a digit, `A` takes a letter and anything else is written as is.
nonisolated enum MaskedTextFieldFormatter {
    private static func accepts(_ character: Character, slot: Character) -> Bool? {
        switch slot {
        case "#": character.isWholeNumber
        case "A": character.isLetter
        default: nil
        }
    }

    private static func isLiteral(_ slot: Character) -> Bool {
        slot != "#" && slot != "A"
    }

    /// The part of a run of literals that has to be there to read it back: `+34` for `+34 `, so a
    /// pasted number without the separator is recognized. A run like `1 (` has to be there whole,
    /// because without its separators it is just a `1` the user could be typing.
    private static func readBackPrefix(of literals: Substring) -> Substring {
        let isData: (Character) -> Bool = { $0.isWholeNumber || $0.isLetter }
        guard let end = literals.lastIndex(where: isData), !literals[...end].allSatisfy(isData) else { return literals }
        return literals[...end]
    }

    /// Literals are added only when a character follows them, so backspace can always delete.
    /// A run of literals is read back only when its prefix is there complete, so a typed `3` is
    /// not taken for the `3` of a `+34 ` prefix.
    static func format(_ input: String, mask: String) -> String {
        guard !mask.isEmpty else { return input }

        var result = ""
        var pendingLiterals = ""
        var remaining = Substring(input)

        var slots = Substring(mask)

        while let slot = slots.first {
            guard !remaining.isEmpty else { return result }

            if isLiteral(slot) {
                let literals = slots.prefix(while: isLiteral)
                slots.removeFirst(literals.count)
                pendingLiterals += literals
                let prefix = readBackPrefix(of: literals)
                if remaining.hasPrefix(prefix) { remaining.removeFirst(prefix.count) }
                continue
            }

            slots.removeFirst()
            while let next = remaining.first, accepts(next, slot: slot) == false {
                remaining.removeFirst()
            }
            guard let character = remaining.first else { return result }

            result += pendingLiterals
            pendingLiterals = ""
            result.append(character)
            remaining.removeFirst()
        }
        return result
    }

    static func isComplete(_ text: String, mask: String) -> Bool {
        !mask.isEmpty && format(text, mask: mask).count == mask.count
    }
}

/// A text field that formats its input as the user types, such as `12/34` or a phone number.
///
/// Editing in the middle of the text moves the cursor to the end, because the field rewrites its
/// text. The checkmark shows when the mask is full and `isValid` agrees, which is where to
/// check what a mask cannot, like a month over 12. With Reduce Motion on, it appears without
/// animating.
struct MaskedTextField: View {
    let title: LocalizedStringResource
    @Binding var text: String
    let mask: String
    var prompt: LocalizedStringResource? = nil
    var systemImage: String? = nil
    var keyboard: UIKeyboardType = .numberPad
    var isValid: (String) -> Bool = { _ in true }

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isComplete: Bool { MaskedTextFieldFormatter.isComplete(text, mask: mask) && isValid(text) }

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(title)
                .font(.subheadline.weight(.medium))
                .foregroundStyle(.secondary)
                .accessibilityHidden(true)

            HStack(spacing: 10) {
                if let systemImage {
                    Image(systemName: systemImage)
                        .foregroundStyle(.secondary)
                        .accessibilityHidden(true)
                }

                TextField(text: $text, prompt: prompt.map { Text($0) } ?? Text(verbatim: mask)) { Text(title) }
                    .keyboardType(keyboard)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                    .monospacedDigit()
                    .accessibilityLabel(title)
                    .accessibilityHint(isComplete ? "Complete" : "")

                if isComplete {
                    Image(systemName: "checkmark.circle.fill")
                        .foregroundStyle(.green)
                        .transition(.opacity)
                        .accessibilityHidden(true)
                }
            }
            .padding(14)
            .background(Color(uiColor: .secondarySystemGroupedBackground), in: .rect(cornerRadius: 14))
            .overlay {
                RoundedRectangle(cornerRadius: 14)
                    .stroke(isComplete ? Color.green : .clear, lineWidth: 1.5)
            }
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: isComplete)
        .onChange(of: text, initial: true) { _, newValue in
            let formatted = MaskedTextFieldFormatter.format(newValue, mask: mask)
            if formatted != newValue { text = formatted }
        }
    }
}

// MARK: - Demo

struct MaskedTextFieldDemo: View {
    @State private var card = ""
    @State private var expiry = ""
    @State private var phone = ""

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Payment details")
                    .font(.largeTitle.bold())

                MaskedTextField(title: "Card number", text: $card, mask: "#### #### #### ####", systemImage: "creditcard.fill")
                MaskedTextField(title: "Expiry date", text: $expiry, mask: "##/##", prompt: "MM/YY", systemImage: "calendar") { expiry in
                    (1...12).contains(Int(expiry.prefix(2)) ?? 0)
                }
                MaskedTextField(title: "Phone", text: $phone, mask: "(###) ###-####", systemImage: "phone.fill")
            }
            .padding(20)
        }
        .background(Color(uiColor: .systemGroupedBackground))
    }
}

#Preview {
    MaskedTextFieldDemo()
}
```

## Multi Step Form

A multi-step form with a progress bar that moves forward only when the current step is valid.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/MultiStepForm/MultiStepForm.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// One page of a `MultiStepForm`. `isValid` decides whether the person can continue.
struct MultiStepFormStep: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let isValid: Bool
    let content: AnyView

    init<Content: View>(id: String, title: LocalizedStringResource, isValid: Bool = true, @ViewBuilder content: () -> Content) {
        self.id = id
        self.title = title
        self.isValid = isValid
        self.content = AnyView(content())
    }
}

/// Where the person is in the form, kept apart from the view so it is easy to test.
struct MultiStepFormProgress: Equatable {
    private(set) var index = 0
    private(set) var isFinished = false

    /// Returns `true` only for the call that completes the last step.
    mutating func advance(stepCount: Int, isCurrentStepValid: Bool) -> Bool {
        guard stepCount > 0, isCurrentStepValid, !isFinished else { return false }
        guard index < stepCount - 1 else {
            isFinished = true
            return true
        }
        index += 1
        return false
    }

    mutating func goBack() {
        isFinished = false
        index = max(0, index - 1)
    }

    /// Keeps the position valid when the steps change while the form is on screen.
    mutating func clamp(stepCount: Int) {
        index = min(index, max(0, stepCount - 1))
    }
}

/// A form split into steps, with a progress bar on top. "Continue" stays disabled
/// until the current step is valid, and there is no swipe that could skip it.
struct MultiStepForm: View {
    let steps: [MultiStepFormStep]
    var finishTitle = "Finish"
    var onFinish: () -> Void = {}

    @State private var progress = MultiStepFormProgress()
    @State private var isMovingForward = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? { reduceMotion ? nil : .smooth(duration: 0.35) }

    private var transition: AnyTransition {
        guard !reduceMotion else { return .opacity }
        return .asymmetric(
            insertion: .move(edge: isMovingForward ? .trailing : .leading).combined(with: .opacity),
            removal: .move(edge: isMovingForward ? .leading : .trailing).combined(with: .opacity)
        )
    }

    var body: some View {
        Group {
            if steps.indices.contains(progress.index) {
                form(step: steps[progress.index])
            }
        }
        .onChange(of: steps.count) { _, count in progress.clamp(stepCount: count) }
    }

    private func form(step: MultiStepFormStep) -> some View {
        VStack(alignment: .leading, spacing: 20) {
            progressBar

            ScrollView {
                VStack(alignment: .leading, spacing: 20) {
                    header(step: step)
                    step.content
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.vertical, 2)
            }
            .scrollBounceBehavior(.basedOnSize)
            .id(step.id)
            .transition(transition)
            .frame(maxHeight: .infinity, alignment: .top)

            ViewThatFits(in: .horizontal) {
                HStack(spacing: 12) { buttons(step: step) }
                VStack(spacing: 12) { buttons(step: step) }
            }
            .controlSize(.large)
        }
    }

    private var progressBar: some View {
        HStack(spacing: 6) {
            ForEach(steps.indices, id: \.self) { index in
                Capsule()
                    .fill(index <= progress.index ? AnyShapeStyle(.tint) : AnyShapeStyle(.quaternary))
                    .frame(height: 6)
            }
        }
        .accessibilityHidden(true)
    }

    private func header(step: MultiStepFormStep) -> some View {
        VStack(alignment: .leading, spacing: 8) {
            Text("Step \(progress.index + 1) of \(steps.count)")
                .font(.subheadline.weight(.medium))
                .foregroundStyle(.secondary)

            Text(step.title)
                .font(.title.bold())
        }
        .accessibilityElement(children: .combine)
    }

    @ViewBuilder
    private func buttons(step: MultiStepFormStep) -> some View {
        if progress.index > 0 {
            Button("Back") {
                isMovingForward = false
                withAnimation(animation) { progress.goBack() }
            }
            .buttonStyle(.bordered)
            .frame(maxWidth: .infinity)
        }

        Button(progress.index == steps.count - 1 ? finishTitle : "Continue") {
            isMovingForward = true
            var next = progress
            let didFinish = next.advance(stepCount: steps.count, isCurrentStepValid: step.isValid)
            withAnimation(animation) { progress = next }
            if didFinish { onFinish() }
        }
        .buttonStyle(.borderedProminent)
        .frame(maxWidth: .infinity)
        .disabled(!step.isValid || progress.isFinished)
    }
}

// MARK: - Demo

struct MultiStepFormDemo: View {
    private static let plans = ["Free plan", "Pro plan", "Team plan"]
    private static let days = ["Monday", "Wednesday", "Friday"]

    @State private var plan: String?
    @State private var reminderDays: Set<String> = []
    @State private var acceptsTerms = false
    @State private var isDone = false
    @State private var run = 0

    var body: some View {
        Group {
            if isDone {
                ContentUnavailableView {
                    Label("You are all set", systemImage: "checkmark.seal.fill")
                } actions: {
                    Button("Start over") {
                        plan = nil
                        reminderDays = []
                        acceptsTerms = false
                        run += 1
                        isDone = false
                    }
                    .buttonStyle(.borderedProminent)
                }
            } else {
                MultiStepForm(steps: steps) { isDone = true }
                    .id(run)
                    .padding(24)
            }
        }
        .tint(.indigo)
        .background(LinearGradient(colors: [.indigo.opacity(0.12), .cyan.opacity(0.08)], startPoint: .top, endPoint: .bottom))
    }

    private var steps: [MultiStepFormStep] {
        [
            MultiStepFormStep(id: "plan", title: "Choose a plan", isValid: plan != nil) {
                VStack(spacing: 10) {
                    ForEach(Self.plans, id: \.self) { name in
                        row(name, isSelected: plan == name) { plan = name }
                    }
                }
            },
            MultiStepFormStep(id: "days", title: "Pick reminder days", isValid: !reminderDays.isEmpty) {
                VStack(spacing: 10) {
                    ForEach(Self.days, id: \.self) { day in
                        row(day, isSelected: reminderDays.contains(day)) {
                            if reminderDays.remove(day) == nil { reminderDays.insert(day) }
                        }
                    }
                }
            },
            MultiStepFormStep(id: "terms", title: "One last thing", isValid: acceptsTerms) {
                Toggle("Accept the terms", isOn: $acceptsTerms)
                    .padding()
                    .background(.background, in: .rect(cornerRadius: 16, style: .continuous))
            },
        ]
    }

    private func row(_ title: String, isSelected: Bool, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            HStack {
                Text(title).font(.headline)
                Spacer()
                Image(systemName: isSelected ? "checkmark.circle.fill" : "circle")
                    .foregroundStyle(isSelected ? AnyShapeStyle(.tint) : AnyShapeStyle(.tertiary))
                    .accessibilityHidden(true)
            }
            .padding()
            .background(.background, in: .rect(cornerRadius: 16, style: .continuous))
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

#Preview {
    MultiStepFormDemo()
}
```

## OTP Code Field

A one-time code field with one box per digit, backed by a single hidden text field.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/OTPCodeField/OTPCodeField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum OTPCodeFieldInput {
    /// Keeps only ASCII digits, up to `length`. Handles pasted text such as "123-456".
    static func sanitized(_ input: String, length: Int) -> String {
        String(input.filter { $0.isASCII && $0.isNumber }.prefix(max(length, 0)))
    }
}

/// A one-time code entry with a box per digit, backed by a single invisible `TextField`.
///
/// The field stays behind the boxes rather than hidden, so VoiceOver, paste and code
/// autofill reach it. With Reduce Motion on, digits appear without a pop.
struct OTPCodeField: View {
    @Binding var code: String
    var length: Int = 6
    var title: LocalizedStringResource = "Verification code"
    var tint: Color = .indigo
    var onComplete: ((String) -> Void)? = nil

    @FocusState private var isFocused: Bool
    @ScaledMetric(relativeTo: .title) private var boxHeight = 58.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 8) {
            ForEach(0..<length, id: \.self) { index in
                digitBox(at: index)
            }
        }
        .background {
            TextField(text: $code) { Text(title) }
                .textContentType(.oneTimeCode)
                .keyboardType(.numberPad)
                .focused($isFocused)
                .foregroundStyle(.clear)
                .tint(.clear)
        }
        .contentShape(.rect)
        .onTapGesture { isFocused = true }
        .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.5), value: code)
        .onChange(of: code) { oldValue, newValue in
            let clean = OTPCodeFieldInput.sanitized(newValue, length: length)
            if clean != newValue { code = clean }
            if clean.count == length, clean != OTPCodeFieldInput.sanitized(oldValue, length: length) {
                onComplete?(clean)
            }
        }
    }

    private func digitBox(at index: Int) -> some View {
        let digits = Array(code)
        let digit = index < digits.count ? String(digits[index]) : nil
        let isActive = isFocused && index == digits.count

        return RoundedRectangle(cornerRadius: 14)
            .fill(.regularMaterial)
            .strokeBorder(isActive ? tint : Color.secondary.opacity(0.3), lineWidth: isActive ? 2 : 1)
            .frame(height: boxHeight)
            .overlay {
                if let digit {
                    Text(digit)
                        .font(.system(.title, design: .rounded, weight: .semibold))
                        .monospacedDigit()
                        .transition(reduceMotion ? .identity : .scale(scale: 0.4).combined(with: .opacity))
                        .accessibilityRepresentation { EmptyView() }
                }
            }
    }
}

// MARK: - Demo

struct OTPCodeFieldDemo: View {
    @State private var code = ""
    @State private var isVerified = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo.opacity(0.3), .cyan.opacity(0.2)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 24) {
                Image(systemName: isVerified ? "checkmark.shield.fill" : "lock.shield.fill")
                    .font(.largeTitle)
                    .imageScale(.large)
                    .foregroundStyle(isVerified ? Color.green : Color.indigo)
                    .contentTransition(.symbolEffect(.replace))
                    .accessibilityHidden(true)

                Text(isVerified ? "You are in" : "Check your messages")
                    .font(.title2.bold())

                OTPCodeField(code: $code, title: "Code") { _ in
                    withAnimation { isVerified = true }
                }
            }
            .padding(.horizontal, 24)
        }
        .ignoresSafeArea(.keyboard)
        .onChange(of: code) { _, newValue in
            if newValue.count < 6 { isVerified = false }
        }
    }
}

#Preview {
    OTPCodeFieldDemo()
}
```

## Passcode Keypad

A number pad with a dot per digit that shakes and empties when the passcode is wrong.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/PasscodeKeypad/PasscodeKeypad.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum PasscodeKeypadLogic {
    static let rows = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]

    /// `code` with one more digit, or as it was when it is already `length` long.
    static func adding(_ digit: Int, to code: String, length: Int) -> String {
        guard (0...9).contains(digit), code.count < length else { return code }
        return code + String(digit)
    }

    /// How far to the side the dots are while they shake: `progress` goes from 0 to 1, and the
    /// swings get shorter until the dots are back in place.
    static func shake(at progress: Double, amplitude: Double = 12, swings: Double = 3) -> Double {
        guard progress > 0, progress < 1 else { return 0 }
        return sin(progress * swings * 2 * .pi) * amplitude * (1 - progress)
    }
}

/// A number pad with a dot per digit, for a passcode kept in the app.
///
/// `onComplete` gets the code when its last digit is entered. Return `false` to reject it: the
/// dots turn red, shake and empty, with a haptic and a VoiceOver announcement. The digits are
/// never shown or read aloud. With Reduce Motion on, the dots turn red without shaking.
struct PasscodeKeypad: View {
    var title = "Enter Passcode"
    var length = 6
    var onComplete: (String) -> Bool

    private let rejectionSeconds = 0.5
    private let keySpacing: CGFloat = 20

    @State private var code = ""
    @State private var failures = 0
    @State private var isRejected = false
    @ScaledMetric(relativeTo: .title) private var keySize = 78.0
    @ScaledMetric(relativeTo: .title) private var dotSize = 14.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 32) {
            Text(title)
                .font(.title3.weight(.medium))

            dots

            keys
        }
        .sensoryFeedback(.selection, trigger: code)
        .sensoryFeedback(.error, trigger: failures)
        .task(id: failures) {
            guard failures > 0 else { return }
            try? await Task.sleep(for: .seconds(rejectionSeconds))
            code = ""
            isRejected = false
        }
    }

    private var dots: some View {
        HStack(spacing: dotSize) {
            ForEach(0..<max(length, 0), id: \.self) { index in
                Circle()
                    .fill(index < code.count ? AnyShapeStyle(isRejected ? .red : .primary) : AnyShapeStyle(.clear))
                    .strokeBorder(isRejected ? AnyShapeStyle(.red) : AnyShapeStyle(.primary), lineWidth: 1.5)
                    .frame(width: dotSize, height: dotSize)
            }
        }
        .keyframeAnimator(initialValue: 0.0, trigger: reduceMotion ? 0 : failures) { view, progress in
            view.offset(x: PasscodeKeypadLogic.shake(at: progress))
        } keyframes: { _ in
            LinearKeyframe(1, duration: rejectionSeconds)
        }
        .accessibilityElement()
        .accessibilityLabel(title)
        .accessibilityValue("\(code.count) of \(length) digits entered")
    }

    private var keys: some View {
        Grid(horizontalSpacing: keySpacing, verticalSpacing: keySpacing) {
            ForEach(PasscodeKeypadLogic.rows, id: \.self) { row in
                GridRow {
                    ForEach(row, id: \.self) { digit in
                        key(digit)
                    }
                }
            }
            GridRow {
                Color.clear
                    .gridCellUnsizedAxes([.horizontal, .vertical])
                key(0)
                Button {
                    code = String(code.dropLast())
                } label: {
                    Image(systemName: "delete.backward")
                        .font(.title2)
                        .frame(maxWidth: keySize, maxHeight: keySize)
                        .aspectRatio(1, contentMode: .fit)
                        .contentShape(.circle)
                }
                .buttonStyle(.plain)
                .disabled(code.isEmpty || isRejected)
                .accessibilityLabel("Delete")
            }
        }
        // A number pad keeps 1, 2, 3 from left to right in every language, like a phone's.
        .environment(\.layoutDirection, .leftToRight)
    }

    private func key(_ digit: Int) -> some View {
        Button {
            press(digit)
        } label: {
            Text(verbatim: String(digit))
                .font(.system(.title, design: .rounded, weight: .medium))
                .minimumScaleFactor(0.5)
                .frame(maxWidth: keySize, maxHeight: keySize)
                .aspectRatio(1, contentMode: .fit)
        }
        .buttonStyle(PasscodeKeypadKeyStyle())
    }

    private func press(_ digit: Int) {
        guard !isRejected, code.count < length else { return }
        code = PasscodeKeypadLogic.adding(digit, to: code, length: length)
        guard code.count == length, !onComplete(code) else { return }

        isRejected = true
        failures += 1
        AccessibilityNotification.Announcement("Wrong passcode").post()
    }
}

private struct PasscodeKeypadKeyStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(configuration.isPressed ? AnyShapeStyle(.fill) : AnyShapeStyle(.fill.tertiary), in: .circle)
            .contentShape(.circle)
            .animation(configuration.isPressed ? nil : .easeOut(duration: 0.3), value: configuration.isPressed)
    }
}

// MARK: - Demo

struct PasscodeKeypadDemo: View {
    private let passcode = "2580"

    @State private var isUnlocked = false

    var body: some View {
        VStack(spacing: 24) {
            Image(systemName: isUnlocked ? "lock.open.fill" : "lock.fill")
                .font(.largeTitle)
                .foregroundStyle(isUnlocked ? .green : .secondary)
                .contentTransition(.symbolEffect(.replace))
                .accessibilityHidden(true)

            if isUnlocked {
                Text("Unlocked")
                    .font(.title2.bold())
                Button("Lock Again") {
                    isUnlocked = false
                }
                .buttonStyle(.bordered)
            } else {
                PasscodeKeypad(length: passcode.count) { code in
                    guard code == passcode else { return false }
                    Task {
                        try? await Task.sleep(for: .seconds(0.35))
                        isUnlocked = true
                    }
                    return true
                }

                Text("The passcode is \(passcode)")
                    .font(.footnote)
                    .foregroundStyle(.secondary)
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }
}

#Preview {
    PasscodeKeypadDemo()
}
```

## Password Strength Field

A password field with a strength meter and a checklist of rules that tick off as they are met.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/PasswordStrengthField/PasswordStrengthField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// One requirement of the password, shown as a line of the checklist.
struct PasswordStrengthFieldRule: Identifiable, Sendable {
    let id: String
    let title: LocalizedStringResource
    let isMet: @Sendable (String) -> Bool

    static let defaults: [PasswordStrengthFieldRule] = [
        .init(id: "length", title: "At least 8 characters") { $0.count >= 8 },
        .init(id: "case", title: "Upper and lower case letters") { $0.contains(where: \.isUppercase) && $0.contains(where: \.isLowercase) },
        .init(id: "digit", title: "A number") { $0.contains(where: \.isNumber) },
        .init(id: "symbol", title: "A symbol") { $0.contains { $0.isPunctuation || $0.isSymbol } },
    ]
}

/// Turns the rules into a strength level, from 0 (empty) to `levels`.
enum PasswordStrengthFieldMeter {
    static let levels = 4

    static func level(for password: String, rules: [PasswordStrengthFieldRule]) -> Int {
        guard !password.isEmpty, !rules.isEmpty else { return 0 }
        let met = rules.filter { $0.isMet(password) }.count
        let scaled = Double(met) / Double(rules.count) * Double(levels)
        return max(1, min(levels, Int(scaled.rounded(.up))))
    }
}

/// A password field with a strength meter and a checklist of rules that tick off as they are met.
struct PasswordStrengthField: View {
    let title: LocalizedStringResource
    @Binding var password: String
    var rules = PasswordStrengthFieldRule.defaults

    @State private var isRevealed = false
    @FocusState private var isFocused: Bool
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let fieldCornerRadius: CGFloat = 14

    private var level: Int { PasswordStrengthFieldMeter.level(for: password, rules: rules) }

    private var levelName: String {
        switch level {
        case 0: "Empty"
        case 1: "Weak"
        case 2: "Fair"
        case 3: "Good"
        default: "Strong"
        }
    }

    private var levelColor: Color {
        switch level {
        case 1: .red
        case 2: .orange
        case 3: .yellow
        default: .green
        }
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            field

            HStack(spacing: 6) {
                ForEach(1...PasswordStrengthFieldMeter.levels, id: \.self) { segment in
                    Capsule()
                        .fill(segment <= level ? AnyShapeStyle(levelColor) : AnyShapeStyle(.quaternary))
                        .frame(height: 6)
                }

                Text(levelName)
                    .font(.caption.weight(.semibold))
                    .foregroundStyle(.secondary)
                    .fixedSize()
                    .padding(.leading, 6)
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Password strength")
            .accessibilityValue(levelName)

            VStack(alignment: .leading, spacing: 8) {
                ForEach(rules) { rule in
                    checklistRow(rule)
                }
            }
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: password)
    }

    private var field: some View {
        HStack(spacing: 10) {
            Group {
                if isRevealed {
                    TextField(text: $password) { Text(title) }
                } else {
                    SecureField(text: $password) { Text(title) }
                }
            }
            .focused($isFocused)
            .textContentType(.newPassword)
            .textInputAutocapitalization(.never)
            .autocorrectionDisabled()
            .accessibilityLabel(title)

            Button {
                isRevealed.toggle()
                isFocused = true
            } label: {
                // The icon is too small to hit. The padding widens what answers to a touch,
                // and the same padding taken back keeps the field as it was.
                Image(systemName: isRevealed ? "eye.slash" : "eye")
                    .foregroundStyle(.secondary)
                    .padding(15)
                    .contentShape(.rect)
                    .padding(-15)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(isRevealed ? "Hide password" : "Show password")
        }
        .padding(14)
        .background(.background, in: .rect(cornerRadius: fieldCornerRadius, style: .continuous))
        .overlay {
            RoundedRectangle(cornerRadius: fieldCornerRadius, style: .continuous)
                .strokeBorder(isFocused ? AnyShapeStyle(.tint) : AnyShapeStyle(.quaternary), lineWidth: 1.5)
        }
    }

    private func checklistRow(_ rule: PasswordStrengthFieldRule) -> some View {
        let isMet = rule.isMet(password)
        return Label {
            Text(rule.title)
        } icon: {
            Image(systemName: isMet ? "checkmark.circle.fill" : "circle")
                .foregroundStyle(isMet ? .green : .secondary)
                .contentTransition(reduceMotion ? .identity : .symbolEffect(.replace))
        }
        .font(.subheadline)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(rule.title)
        .accessibilityValue(isMet ? "Met" : "Not met")
    }
}

// MARK: - Demo

struct PasswordStrengthFieldDemo: View {
    @State private var password = ""

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 22) {
                Text("Create your account")
                    .font(.largeTitle.bold())

                PasswordStrengthField(title: "Password", password: $password)
            }
            .padding(24)
        }
        .tint(.indigo)
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .pink.opacity(0.08)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    PasswordStrengthFieldDemo()
}
```

## Rich Text Editor

A text editor with a bar to make the selection bold, italic, underlined, struck through or highlighted.

Category: Inputs. Minimum: iOS 26.0. Path: Components/Inputs/RichTextEditor/RichTextEditor.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum RichTextEditorLogic {
    /// How many words a text has, whatever its formatting.
    static func wordCount(of text: AttributedString) -> Int {
        String(text.characters).split { $0.isWhitespace || $0.isNewline }.count
    }

    /// The highlight a tap leaves: the color tapped, or none when the text already had it.
    static func toggled<Value: Equatable>(_ current: Value?, choosing value: Value) -> Value? {
        current == value ? nil : value
    }
}

/// A text editor with a bar to make the selection bold, italic, underlined, struck through or
/// highlighted, on the rich text editing that iOS 26 added to `TextEditor`.
///
/// It edits an `AttributedString`. With no selection, the bar changes what is typed next, and
/// each button shows whether its format is on at the cursor.
@available(iOS 26, *)
struct RichTextEditor: View {
    @Binding var text: AttributedString
    var highlights: [Color] = [.yellow, .green, .pink]

    private let buttonSize: CGFloat = 44

    @State private var selection = AttributedTextSelection()
    @Environment(\.fontResolutionContext) private var fontResolutionContext

    private var typing: AttributeContainer { selection.typingAttributes(in: text) }
    private var font: Font.Resolved { (typing.font ?? .body).resolve(in: fontResolutionContext) }

    var body: some View {
        VStack(spacing: 0) {
            TextEditor(text: $text, selection: $selection)
                .padding(.horizontal, 12)

            Divider()

            ScrollView(.horizontal) {
                HStack(spacing: 6) {
                    // Each button reads its state once, so every run of the selection ends the same.
                    let isBold = font.isBold
                    let isItalic = font.isItalic
                    let isUnderlined = typing.underlineStyle != nil
                    let isStruck = typing.strikethroughStyle != nil

                    toggle("Bold", symbol: "bold", isOn: isBold) { attributes in
                        attributes.font = (attributes.font ?? .body).bold(!isBold)
                    }
                    toggle("Italic", symbol: "italic", isOn: isItalic) { attributes in
                        attributes.font = (attributes.font ?? .body).italic(!isItalic)
                    }
                    toggle("Underline", symbol: "underline", isOn: isUnderlined) { attributes in
                        attributes.underlineStyle = isUnderlined ? nil : .single
                    }
                    toggle("Strikethrough", symbol: "strikethrough", isOn: isStruck) { attributes in
                        attributes.strikethroughStyle = isStruck ? nil : .single
                    }

                    Divider()
                        .frame(height: 24)
                        .padding(.horizontal, 4)

                    ForEach(highlights, id: \.self) { color in
                        Button {
                            let highlight = RichTextEditorLogic.toggled(typing.backgroundColor, choosing: color.opacity(0.4))
                            apply { $0.backgroundColor = highlight }
                        } label: {
                            Image(systemName: "highlighter")
                                .frame(width: buttonSize, height: buttonSize)
                                .background(color.opacity(0.4), in: .rect(cornerRadius: 10))
                        }
                        .accessibilityLabel("Highlight in \(color.description)")
                    }
                }
                .padding(.horizontal, 12)
                .padding(.vertical, 8)
            }
            .scrollIndicators(.hidden)
            .buttonStyle(.plain)
        }
    }

    /// Changes every run of the selection on its own attributes, so a run keeps what makes it
    /// different, like the size of a title. With no selection it changes what is typed next.
    private func apply(_ change: (inout AttributeContainer) -> Void) {
        guard case .ranges(let ranges) = selection.indices(in: text), !ranges.isEmpty else {
            text.transformAttributes(in: &selection, body: change)
            return
        }
        // Indices do not survive a change, so the selection is kept as offsets and put back.
        let offsets = ranges.ranges.map { range in
            (
                text.characters.distance(from: text.startIndex, to: range.lowerBound),
                text.characters.distance(from: text.startIndex, to: range.upperBound)
            )
        }
        for (lower, upper) in offsets {
            let range = text.index(text.startIndex, offsetByCharacters: lower)..<text.index(text.startIndex, offsetByCharacters: upper)
            for run in Array(text[range].runs) {
                var attributes = run.attributes
                change(&attributes)
                text[run.range].setAttributes(attributes)
            }
        }
        var selected = RangeSet<AttributedString.Index>()
        for (lower, upper) in offsets {
            selected.insert(contentsOf: text.index(text.startIndex, offsetByCharacters: lower)..<text.index(text.startIndex, offsetByCharacters: upper))
        }
        selection = AttributedTextSelection(ranges: selected)
    }

    private func toggle(_ title: String, symbol: String, isOn: Bool, change: @escaping (inout AttributeContainer) -> Void) -> some View {
        Button {
            apply(change)
        } label: {
            Image(systemName: symbol)
                .font(.body.weight(.semibold))
                .frame(width: buttonSize, height: buttonSize)
                .foregroundStyle(isOn ? AnyShapeStyle(.white) : AnyShapeStyle(.primary))
                .background(isOn ? AnyShapeStyle(.tint) : AnyShapeStyle(.fill.tertiary), in: .rect(cornerRadius: 10))
        }
        .accessibilityLabel(title)
        .accessibilityAddTraits(isOn ? .isSelected : [])
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct RichTextEditorDemo: View {
    @State private var text: AttributedString = {
        var title = AttributedString("Trip notes\n")
        title.font = .title2.bold()
        var body = AttributedString("Book the night train before Friday. ")
        var important = AttributedString("Seats sell out fast.")
        important.backgroundColor = Color.yellow.opacity(0.4)
        body.append(important)
        return title + body
    }()

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            RichTextEditor(text: $text)

            Text("\(RichTextEditorLogic.wordCount(of: text)) words")
                .font(.footnote)
                .foregroundStyle(.secondary)
                .padding(.horizontal, 16)
                .padding(.bottom, 8)
        }
        .background(.background, in: .rect(cornerRadius: 22))
        .padding(16)
        .frame(maxWidth: .infinity, maxHeight: 420)
        .frame(maxHeight: .infinity, alignment: .top)
        .background(Color(.systemGroupedBackground))
    }
}

@available(iOS 26, *)
#Preview {
    RichTextEditorDemo()
}
```

## Search Field With Suggestions

A search field that lists matching suggestions as the user types and fills the field when one is chosen.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/SearchFieldWithSuggestions/SearchFieldWithSuggestions.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Picks the suggestions to show for what has been typed so far.
enum SearchFieldWithSuggestionsFilter {
    /// Ignores case and accents, lists prefix matches first and drops duplicates.
    /// Returns nothing for an empty query, or once the text is already a full suggestion.
    static func matches(for query: String, in suggestions: [String], limit: Int = 6) -> [String] {
        let needle = normalized(query)
        guard !needle.isEmpty, limit > 0 else { return [] }
        guard !suggestions.contains(where: { normalized($0) == needle }) else { return [] }

        var seen = Set<String>()
        let unique = suggestions.filter { seen.insert(normalized($0)).inserted }
        let prefix = unique.filter { normalized($0).hasPrefix(needle) }
        let inside = unique.filter { normalized($0).contains(needle) && !normalized($0).hasPrefix(needle) }
        return Array((prefix + inside).prefix(limit))
    }

    private static func normalized(_ text: String) -> String {
        text.trimmingCharacters(in: .whitespacesAndNewlines)
            .folding(options: [.caseInsensitive, .diacriticInsensitive], locale: nil)
    }
}

/// Lists matching suggestions under a search field as the person types.
/// Choosing one fills the field.
struct SearchFieldWithSuggestions: ViewModifier {
    @Binding var text: String
    let suggestions: [String]
    var placement: SearchFieldPlacement = .automatic
    var prompt = "Search"
    var limit = 6

    func body(content: Content) -> some View {
        content
            .searchable(text: $text, placement: placement, prompt: prompt)
            .searchSuggestions {
                ForEach(SearchFieldWithSuggestionsFilter.matches(for: text, in: suggestions, limit: limit), id: \.self) { suggestion in
                    Label(suggestion, systemImage: "magnifyingglass")
                        .searchCompletion(suggestion)
                }
            }
    }
}

extension View {
    /// Needs a navigation container, such as `NavigationStack`, to show the field.
    func searchFieldWithSuggestions(
        text: Binding<String>,
        suggestions: [String],
        placement: SearchFieldPlacement = .automatic,
        prompt: String = "Search",
        limit: Int = 6
    ) -> some View {
        modifier(SearchFieldWithSuggestions(text: text, suggestions: suggestions, placement: placement, prompt: prompt, limit: limit))
    }
}

// MARK: - Demo

struct SearchFieldWithSuggestionsDemo: View {
    private static let cities = ["Madrid", "Málaga", "Marseille", "Melbourne", "Lisbon", "London", "Seoul", "Oslo", "Kyoto"]

    @State private var text = ""
    @FocusState private var isSearching: Bool

    var body: some View {
        NavigationStack {
            VStack(spacing: 12) {
                Image(systemName: "globe.europe.africa.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.teal.gradient)
                    .accessibilityHidden(true)
                Text(text.isEmpty ? "Where to?" : "Results for \(text)")
                    .font(.title2.bold())
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(LinearGradient(colors: [.teal.opacity(0.14), .blue.opacity(0.08)], startPoint: .top, endPoint: .bottom))
            .navigationTitle("Cities")
            .searchFieldWithSuggestions(
                text: $text,
                suggestions: Self.cities,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "Search cities"
            )
            .searchFocused($isSearching)
            .task {
                // The field must be on screen before it can take focus.
                try? await Task.sleep(for: .seconds(0.4))
                guard !Task.isCancelled else { return }
                isSearching = true
            }
        }
    }
}

#Preview {
    SearchFieldWithSuggestionsDemo()
}
```

## Tag Input Field

A field that turns what you type into removable tags, which wrap onto as many lines as they need.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/TagInputField/TagInputField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum TagInputFieldLogic {
    /// An invisible character the field always keeps before the typed text. Deleting it is how a
    /// backspace in an empty field is noticed, which `TextField` does not report.
    static let marker = "\u{200B}"
    static let separators: Set<Character> = [",", "\n"]

    /// `tags` with the new ones at the end, trimmed, leaving out the empty and the repeated.
    static func adding(_ new: [String], to tags: [String]) -> [String] {
        new.reduce(into: tags) { tags, candidate in
            let tag = candidate.trimmingCharacters(in: .whitespacesAndNewlines)
            guard !tag.isEmpty, !tags.contains(where: { $0.caseInsensitiveCompare(tag) == .orderedSame }) else { return }
            tags.append(tag)
        }
    }

    /// What the field does when its text goes from `old` to `new`: the tags it leaves and the text it keeps.
    ///
    /// A separator turns what comes before it into tags, so pasting "red, green" adds two.
    /// A backspace with nothing typed removes the last tag.
    static func typing(_ new: String, after old: String, tags: [String]) -> (tags: [String], text: String) {
        if old == marker, new.isEmpty { return (Array(tags.dropLast()), marker) }

        let typed = new.replacingOccurrences(of: marker, with: "")
        let pieces = typed.split(omittingEmptySubsequences: false) { separators.contains($0) }.map(String.init)
        // Text that only lacks a separator is left as it is, wherever its marker sits: rewriting the
        // field while keys are still arriving loses some of them.
        if pieces.count == 1, new.count == typed.count + 1 { return (tags, new) }

        let rest = String((pieces.last ?? "").drop { $0 == " " })
        return (adding(Array(pieces.dropLast()), to: tags), marker + rest)
    }

    /// Where each view goes: one after another, on a new line when one does not fit.
    /// The last one is the text field, which takes what is left of its line.
    static func frames(sizes: [CGSize], width: CGFloat, spacing: CGFloat, fieldMinWidth: CGFloat) -> [CGRect] {
        var frames: [CGRect] = []
        var x: CGFloat = 0
        var y: CGFloat = 0
        var lineHeight: CGFloat = 0

        for (index, size) in sizes.enumerated() {
            let isField = index == sizes.count - 1
            var size = CGSize(width: isField ? fieldMinWidth : min(size.width, width), height: size.height)
            if x > 0, x + size.width > width {
                x = 0
                y += lineHeight + spacing
                lineHeight = 0
            }
            if isField, width.isFinite { size.width = max(width - x, fieldMinWidth) }

            frames.append(CGRect(origin: CGPoint(x: x, y: y), size: size))
            x += size.width + spacing
            lineHeight = max(lineHeight, size.height)
        }
        return frames
    }
}

/// A field that turns what you type into tags: press return or type a comma to add one, tap its
/// cross to remove it, or press delete in the empty field to remove the last one.
///
/// The tags wrap onto as many lines as they need and the field follows them. Repeated tags are
/// left out. VoiceOver reads each tag with a Remove action. Keyboard options such as
/// `autocorrectionDisabled` reach the field when set on this view.
struct TagInputField: View {
    @Binding var tags: [String]
    var prompt = "Add a tag"

    private let cornerRadius: CGFloat = 14

    @State private var text = TagInputFieldLogic.marker
    @FocusState private var isFocused: Bool
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TagInputFieldFlow {
            ForEach(tags, id: \.self) { tag in
                chip(tag)
            }

            TextField("", text: $text)
                .focused($isFocused)
                .font(.subheadline)
                .padding(.vertical, 6)
                .background(alignment: .leading) {
                    // The marker keeps the field from ever being empty, so it cannot show a prompt of its own.
                    if text == TagInputFieldLogic.marker {
                        Text(prompt)
                            .font(.subheadline)
                            .foregroundStyle(.tertiary)
                            .lineLimit(1)
                            .accessibilityHidden(true)
                    }
                }
                .accessibilityLabel(prompt)
                .onSubmit {
                    apply(TagInputFieldLogic.typing(text + ",", after: text, tags: tags))
                    isFocused = true
                }
        }
        .padding(10)
        .background(.fill.quaternary, in: .rect(cornerRadius: cornerRadius))
        .overlay {
            RoundedRectangle(cornerRadius: cornerRadius)
                .strokeBorder(.tint, lineWidth: isFocused ? 2 : 0)
        }
        .contentShape(.rect)
        .onTapGesture { isFocused = true }
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: tags)
        .onChange(of: text) { old, new in
            apply(TagInputFieldLogic.typing(new, after: old, tags: tags))
        }
    }

    private func chip(_ tag: String) -> some View {
        HStack(spacing: 2) {
            Text(tag)
                .lineLimit(1)

            Button {
                tags.removeAll { $0 == tag }
            } label: {
                Image(systemName: "xmark")
                    .font(.caption2.weight(.bold))
                    .foregroundStyle(.secondary)
                    .frame(minWidth: 24, minHeight: 20)
                    // Too small to hit. The padding widens what answers to a touch, and the
                    // same padding taken back keeps the tag as compact as it was.
                    .padding(.horizontal, 10)
                    .padding(.vertical, 12)
                    .contentShape(.rect)
                    .padding(.horizontal, -10)
                    .padding(.vertical, -12)
            }
            .buttonStyle(.plain)
        }
        .font(.subheadline.weight(.medium))
        .padding(.leading, 12)
        .padding(.trailing, 4)
        .padding(.vertical, 6)
        .background(.tint.opacity(0.16), in: .capsule)
        .transition(reduceMotion ? .opacity : .scale(scale: 0.6).combined(with: .opacity))
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(tag)
        .accessibilityAction(named: "Remove") {
            tags.removeAll { $0 == tag }
        }
    }

    private func apply(_ result: (tags: [String], text: String)) {
        if result.tags != tags { tags = result.tags }
        if result.text != text { text = result.text }
    }
}

private nonisolated struct TagInputFieldFlow: Layout {
    var spacing: CGFloat = 8
    var fieldMinWidth: CGFloat = 96

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let frames = frames(of: subviews, in: proposal.width ?? .infinity)
        return CGSize(width: proposal.width ?? (frames.map(\.maxX).max() ?? 0), height: frames.map(\.maxY).max() ?? 0)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        for (subview, frame) in zip(subviews, frames(of: subviews, in: bounds.width)) {
            subview.place(at: CGPoint(x: bounds.minX + frame.minX, y: bounds.minY + frame.minY), proposal: ProposedViewSize(frame.size))
        }
    }

    private func frames(of subviews: Subviews, in width: CGFloat) -> [CGRect] {
        TagInputFieldLogic.frames(sizes: subviews.map { $0.sizeThatFits(.unspecified) }, width: width, spacing: spacing, fieldMinWidth: fieldMinWidth)
    }
}

// MARK: - Demo

struct TagInputFieldDemo: View {
    private let suggestions = ["spicy", "gluten-free", "30 minutes", "one pot"]

    @State private var tags = ["vegan", "dinner", "weeknight"]

    var body: some View {
        VStack(alignment: .leading, spacing: 20) {
            VStack(alignment: .leading, spacing: 4) {
                Text("Recipe tags")
                    .font(.title2.bold())
                Text("Press return or type a comma to add one")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            TagInputField(tags: $tags)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()

            VStack(alignment: .leading, spacing: 10) {
                Text("Suggested")
                    .font(.footnote.weight(.semibold))
                    .foregroundStyle(.secondary)

                ScrollView(.horizontal) {
                    HStack {
                        ForEach(suggestions.filter { !tags.contains($0) }, id: \.self) { suggestion in
                            Button {
                                tags = TagInputFieldLogic.adding([suggestion], to: tags)
                            } label: {
                                Label(suggestion, systemImage: "plus")
                                    .font(.subheadline)
                            }
                            .buttonStyle(.bordered)
                            .buttonBorderShape(.capsule)
                        }
                    }
                }
                .scrollIndicators(.hidden)
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .background(Color(.systemGroupedBackground))
        .tint(.teal)
    }
}

#Preview {
    TagInputFieldDemo()
}
```

## Validated Text Field

A text field that checks its value when it loses focus and shows its error only after that.

Category: Inputs. Minimum: iOS 18.0. Path: Components/Inputs/ValidatedTextField/ValidatedTextField.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Decides when the error is shown, so the field never complains while someone is typing.
struct ValidatedTextFieldFeedback: Equatable {
    private(set) var message: String?

    /// The only moment an error can appear.
    mutating func fieldLostFocus(text: String, validate: (String) -> String?) {
        message = validate(text)
    }

    /// While typing, an error can only go away, as soon as the text is fixed.
    mutating func textChanged(text: String, validate: (String) -> String?) {
        if message != nil, validate(text) == nil { message = nil }
    }
}

/// A text field that checks its value when it loses focus and shows its error only after that.
struct ValidatedTextField: View {
    let title: LocalizedStringResource
    @Binding var text: String
    /// Returns the message to show, or `nil` when the value is fine.
    let validate: (String) -> String?

    @State private var feedback = ValidatedTextFieldFeedback()
    @FocusState private var isFocused: Bool
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var borderStyle: AnyShapeStyle {
        if feedback.message != nil { return AnyShapeStyle(.red) }
        return isFocused ? AnyShapeStyle(.tint) : AnyShapeStyle(.quaternary)
    }

    var body: some View {
        VStack(alignment: .leading, spacing: 6) {
            Text(title)
                .font(.subheadline.weight(.medium))
                .accessibilityHidden(true)

            TextField("", text: $text)
                .focused($isFocused)
                .padding(14)
                .background(.background, in: .rect(cornerRadius: 14, style: .continuous))
                .overlay {
                    RoundedRectangle(cornerRadius: 14, style: .continuous)
                        .strokeBorder(borderStyle, lineWidth: 1.5)
                }
                .accessibilityLabel(title)
                .accessibilityHint(feedback.message ?? "")

            if let message = feedback.message {
                Label(message, systemImage: "exclamationmark.circle.fill")
                    .font(.footnote)
                    .foregroundStyle(.red)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .move(edge: .top)))
                    .accessibilityHidden(true)
            }
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: feedback)
        .onChange(of: isFocused) { _, focused in
            guard !focused else { return }
            feedback.fieldLostFocus(text: text, validate: validate)
            if let message = feedback.message {
                AccessibilityNotification.Announcement(message).post()
            }
        }
        .onChange(of: text) { _, newValue in
            feedback.textChanged(text: newValue, validate: validate)
        }
    }
}

// MARK: - Demo

struct ValidatedTextFieldDemo: View {
    @State private var email = ""
    @State private var name = ""

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Your details")
                    .font(.largeTitle.bold())

                ValidatedTextField(title: "Email", text: $email) { value in
                    value.contains("@") && value.contains(".") ? nil : "Enter a valid email address."
                }
                .keyboardType(.emailAddress)
                .textInputAutocapitalization(.never)
                .autocorrectionDisabled()

                ValidatedTextField(title: "Name", text: $name) { value in
                    value.isEmpty ? "Tell us your name." : nil
                }
            }
            .padding(24)
        }
        .tint(.indigo)
        .background(LinearGradient(colors: [.indigo.opacity(0.12), .orange.opacity(0.08)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    ValidatedTextFieldDemo()
}
```

## Model Availability Gate

A view that shows its content when the on-device model can answer, and otherwise explains why not and what the person can do.

Category: Intelligence. Minimum: iOS 26.0. Path: Components/Intelligence/ModelAvailabilityGate/ModelAvailabilityGate.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import FoundationModels
import SwiftUI

/// Shows its content when the on-device model can answer. Otherwise it explains
/// why not and what the person can do.
///
/// The system does not notify changes in availability, so the view checks again
/// when the app becomes active and every few seconds while the model downloads.
@available(iOS 26, *)
struct ModelAvailabilityGate<Content: View>: View {
    /// Leave it `nil` to read the real model. Pass a value to force a state.
    var availability: SystemLanguageModel.Availability? = nil
    @ViewBuilder var content: () -> Content

    @State private var liveAvailability = SystemLanguageModel.default.availability
    @Environment(\.scenePhase) private var scenePhase

    var body: some View {
        Group {
            switch availability ?? liveAvailability {
            case .available:
                content()
            case .unavailable(let reason):
                // A long explanation at the largest text sizes stays reachable.
                ViewThatFits(in: .vertical) {
                    explanation(for: reason)
                    ScrollView { explanation(for: reason) }
                }
            }
        }
        .task(id: scenePhase) {
            guard availability == nil else { return }
            liveAvailability = SystemLanguageModel.default.availability
            while liveAvailability == .unavailable(.modelNotReady) {
                try? await Task.sleep(for: .seconds(3))
                guard !Task.isCancelled else { return }
                liveAvailability = SystemLanguageModel.default.availability
            }
        }
    }

    @ViewBuilder
    private func explanation(for reason: SystemLanguageModel.Availability.UnavailableReason) -> some View {
        switch reason {
        case .deviceNotEligible:
            ContentUnavailableView(
                "Not available on this device",
                systemImage: "iphone.slash",
                description: Text("This feature needs a device that supports Apple Intelligence. Everything else in the app keeps working.")
            )
        case .appleIntelligenceNotEnabled:
            ContentUnavailableView(
                "Apple Intelligence is off",
                systemImage: "sparkles",
                description: Text("Open the Settings app, turn on Apple Intelligence, then come back to use this feature.")
            )
        case .modelNotReady:
            ContentUnavailableView {
                Label("Getting the model ready", systemImage: "arrow.down.circle")
            } description: {
                Text("The model is still downloading. This screen updates by itself when it finishes.")
            } actions: {
                ProgressView()
                    .accessibilityLabel("Preparing the model")
            }
        @unknown default:
            ContentUnavailableView(
                "Not available right now",
                systemImage: "exclamationmark.circle",
                description: Text("The on-device model cannot answer at the moment. Try again later.")
            )
        }
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct ModelAvailabilityGateDemo: View {
    private enum Sample: String, CaseIterable, Identifiable {
        case ready = "Ready"
        case device = "Device"
        case off = "Off"
        case preparing = "Preparing"

        var id: Self { self }

        var availability: SystemLanguageModel.Availability {
            switch self {
            case .ready: .available
            case .device: .unavailable(.deviceNotEligible)
            case .off: .unavailable(.appleIntelligenceNotEnabled)
            case .preparing: .unavailable(.modelNotReady)
            }
        }
    }

    @State private var sample = Sample.device
    @State private var autoPlays = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var pickerSelection: Binding<Sample> {
        Binding(get: { sample }, set: { newValue in
            autoPlays = false
            sample = newValue
        })
    }

    var body: some View {
        VStack(spacing: 20) {
            ZStack {
                RoundedRectangle(cornerRadius: 28, style: .continuous)
                    .fill(.background)
                    .shadow(color: .indigo.opacity(0.18), radius: 22, y: 10)
                    .accessibilityHidden(true)

                ModelAvailabilityGate(availability: sample.availability) {
                    VStack(spacing: 14) {
                        Image(systemName: "sparkles")
                            .font(.largeTitle)
                            .foregroundStyle(.indigo.gradient)
                            .accessibilityHidden(true)
                        Text("The model is ready")
                            .font(.title2.bold())
                        Text("Your feature appears here.")
                            .font(.body)
                            .foregroundStyle(.secondary)
                    }
                    .padding()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                }
                .id(sample)
                .transition(.opacity)
            }

            Picker("Availability", selection: pickerSelection) {
                ForEach(Sample.allCases) { Text($0.rawValue).tag($0) }
            }
            .pickerStyle(.segmented)
        }
        .padding(20)
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .teal.opacity(0.1)], startPoint: .top, endPoint: .bottom))
        .task(id: autoPlays && !reduceMotion) {
            guard autoPlays, !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.2))
                guard !Task.isCancelled else { return }
                let all = Sample.allCases
                let next = ((all.firstIndex(of: sample) ?? 0) + 1) % all.count
                withAnimation(.smooth(duration: 0.3)) { sample = all[next] }
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    ModelAvailabilityGateDemo()
}
```

## On Device Streaming Answer

An answer that fills in as the on-device model streams it, with no network request.

Category: Intelligence. Minimum: iOS 26.0. Path: Components/Intelligence/OnDeviceStreamingAnswer/OnDeviceStreamingAnswer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import FoundationModels
import SwiftUI

/// An answer that fills in while the on-device model writes it, with no network request.
///
/// Changing `prompt` cancels the answer in progress and starts a new one.
/// An empty prompt shows `placeholder`.
@available(iOS 26, *)
struct OnDeviceStreamingAnswer: View {
    private enum Phase: Equatable {
        case idle, streaming, finished, failed
    }

    private struct ModelUnavailable: Error {}

    let prompt: String
    var instructions = "Answer in two short, friendly sentences."
    var placeholder = "Ask something to see the answer here."
    /// Replaces the model with your own text stream, for previews and for tests.
    /// Each element is the whole text so far.
    var sampleStream: (@MainActor (String) -> AsyncThrowingStream<String, Error>)? = nil
    /// Plays instead of an error when the model is unavailable or fails.
    /// Each element is the whole text so far.
    var fallbackStream: (@MainActor (String) -> AsyncThrowingStream<String, Error>)? = nil
    var failureMessage = "The on-device model couldn't answer right now. Please try again later."

    @State private var text = ""
    @State private var phase = Phase.idle
    @State private var answeredPrompt: String?
    @State private var preparedSession: LanguageModelSession?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var trimmedPrompt: String {
        prompt.trimmingCharacters(in: .whitespacesAndNewlines)
    }

    private var isStreaming: Bool { phase == .streaming }

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Label(isStreaming ? "Writing on your device" : "On-device answer", systemImage: "sparkles")
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.tint)
                .symbolEffect(.pulse, isActive: isStreaming && !reduceMotion)

            content
                .font(.body)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(18)
        .background(.regularMaterial, in: .rect(cornerRadius: 20, style: .continuous))
        .animation(reduceMotion ? nil : .easeOut(duration: 0.18), value: text)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("On-device answer")
        .accessibilityValue(accessibilityValue)
        .task {
            guard sampleStream == nil, SystemLanguageModel.default.isAvailable else { return }
            let session = LanguageModelSession(instructions: instructions)
            session.prewarm()
            preparedSession = session
        }
        .task(id: trimmedPrompt) { await answer() }
    }

    @ViewBuilder
    private var content: some View {
        switch phase {
        case .idle:
            Text(placeholder).foregroundStyle(.secondary)
        case .streaming:
            Text("\(Text(text))\(Text(" ▍").foregroundStyle(.tint))")
        case .finished:
            Text(text).textSelection(.enabled)
        case .failed:
            Text(failureMessage).foregroundStyle(.secondary)
        }
    }

    private var accessibilityValue: String {
        switch phase {
        case .idle: placeholder
        case .streaming: "Writing"
        case .finished: text
        case .failed: failureMessage
        }
    }

    private func answer() async {
        // `.task` runs again when the view reappears. A finished answer stays.
        guard trimmedPrompt != answeredPrompt else { return }
        answeredPrompt = nil
        text = ""
        guard !trimmedPrompt.isEmpty else {
            phase = .idle
            return
        }
        phase = .streaming

        do {
            if let sampleStream {
                for try await partial in sampleStream(trimmedPrompt) { text = partial }
            } else {
                try await streamFromModel()
            }
            guard !Task.isCancelled else { return }
            phase = .finished
            answeredPrompt = trimmedPrompt
            AccessibilityNotification.Announcement(text).post()
        } catch {
            guard !Task.isCancelled else { return }
            phase = .failed
        }
    }

    private func streamFromModel() async throws {
        do {
            guard SystemLanguageModel.default.isAvailable else { throw ModelUnavailable() }
            // Every answer gets its own session, so old turns never fill its context window.
            let session = preparedSession ?? LanguageModelSession(instructions: instructions)
            preparedSession = nil
            for try await snapshot in session.streamResponse(to: trimmedPrompt) { text = snapshot.content }
        } catch {
            guard let fallbackStream, !Task.isCancelled else { throw error }
            for try await partial in fallbackStream(trimmedPrompt) { text = partial }
        }
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct OnDeviceStreamingAnswerDemo: View {
    private static let questions: [(question: String, answer: String)] = [
        ("Why is the sky blue?", "Air scatters blue light far more than red light. That scattered blue reaches your eyes from every direction, so the whole sky glows."),
        ("Why is the sea salty?", "Rain slowly dissolves minerals from rocks and rivers carry them to the sea. The water evaporates, but the salt stays behind."),
    ]

    @State private var prompt = ""
    @State private var isPlayingSample = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 18) {
                Text("Ask the device")
                    .font(.largeTitle.bold())

                ForEach(Self.questions, id: \.question) { item in
                    Button(item.question) { prompt = item.question }
                        .buttonStyle(.bordered)
                        .tint(.indigo)
                }

                OnDeviceStreamingAnswer(prompt: prompt, fallbackStream: sample)
                    .tint(.indigo)

                if isPlayingSample {
                    Text("The on-device model can't answer here, so this demo plays sample text.")
                        .font(.footnote)
                        .foregroundStyle(.secondary)
                }
            }
            .padding(24)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.16), .mint.opacity(0.12)], startPoint: .top, endPoint: .bottom))
    }

    private func sample(_ prompt: String) -> AsyncThrowingStream<String, Error> {
        isPlayingSample = true
        let answer = Self.questions.first { $0.question == prompt }?.answer ?? ""
        let instant = reduceMotion
        return AsyncThrowingStream { continuation in
            let task = Task {
                guard !instant else {
                    continuation.yield(answer)
                    continuation.finish()
                    return
                }
                var written = ""
                for word in answer.split(separator: " ") {
                    try? await Task.sleep(for: .milliseconds(90))
                    guard !Task.isCancelled else { return }
                    written += written.isEmpty ? String(word) : " \(word)"
                    continuation.yield(written)
                }
                continuation.finish()
            }
            continuation.onTermination = { _ in task.cancel() }
        }
    }
}

@available(iOS 26, *)
#Preview {
    OnDeviceStreamingAnswerDemo()
}
```

## Structured Output Form

A form whose fields the on-device model fills in from a free-form note as a typed Generable value.

Category: Intelligence. Minimum: iOS 27.0. Path: Components/Intelligence/StructuredOutputForm/StructuredOutputForm.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import FoundationModels
import SwiftUI

@available(iOS 27, *)
@Generable
enum StructuredOutputFormCategory: String, CaseIterable, Identifiable {
    case food, travel, shopping, other

    var id: Self { self }
}

/// What the model must produce. `@Guide` tells it what each field means.
@available(iOS 27, *)
@Generable(description: "An expense extracted from a short note")
struct StructuredOutputFormExpense {
    @Guide(description: "Who was paid, in a few words")
    var merchant: String
    @Guide(description: "The amount paid, as a number without a currency symbol")
    var amount: Double
    var category: StructuredOutputFormCategory
    @Guide(description: "What the expense was for, in at most six words")
    var purpose: String
}

/// The editable values of the form. Empty until the model or the person fills them.
@available(iOS 27, *)
struct StructuredOutputFormDraft: Equatable, Sendable {
    var merchant = ""
    var amount: Double?
    var category = StructuredOutputFormCategory.other
    var purpose = ""
}

/// A form whose fields the on-device model fills in from a free-form note, as a typed value.
@available(iOS 27, *)
struct StructuredOutputForm: View {
    @Binding var note: String
    @Binding var draft: StructuredOutputFormDraft
    /// Replaces the model with your own stream, for previews and for tests.
    var sampleStream: (@MainActor (String) -> AsyncThrowingStream<StructuredOutputFormDraft, Error>)? = nil
    /// Plays instead of an error when the model is unavailable or fails.
    var fallbackStream: (@MainActor (String) -> AsyncThrowingStream<StructuredOutputFormDraft, Error>)? = nil
    var failureMessage = "The on-device model couldn't fill in the form right now. Please try again later."

    @State private var fillTask: Task<Void, Never>?
    @State private var isFilling = false
    @State private var didFail = false

    private var currencyCode: String { Locale.current.currency?.identifier ?? "USD" }

    private struct ModelUnavailable: Error {}

    private var hasNote: Bool {
        !note.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
    }

    var body: some View {
        Form {
            Section("Your note") {
                TextField("Note", text: $note, axis: .vertical)
                    .lineLimit(2...5)
                    .accessibilityLabel("Note")

                Button {
                    guard !isFilling else { return }
                    isFilling = true
                    fillTask = Task { await fill() }
                } label: {
                    HStack {
                        Label(isFilling ? "Filling in" : "Fill in the form", systemImage: "sparkles")
                        if isFilling {
                            Spacer()
                            ProgressView().accessibilityHidden(true)
                        }
                    }
                }
                .disabled(isFilling || !hasNote)
            }

            Section("Expense") {
                LabeledContent("Merchant") {
                    TextField("Merchant", text: $draft.merchant).multilineTextAlignment(.trailing)
                }
                LabeledContent("Amount") {
                    TextField("Amount", value: $draft.amount, format: .currency(code: currencyCode))
                        .multilineTextAlignment(.trailing)
                        .keyboardType(.decimalPad)
                }
                Picker("Category", selection: $draft.category) {
                    ForEach(StructuredOutputFormCategory.allCases) { Text($0.rawValue.capitalized).tag($0) }
                }
                LabeledContent("Purpose") {
                    TextField("Purpose", text: $draft.purpose).multilineTextAlignment(.trailing)
                }
            }
            .disabled(isFilling)

            if didFail {
                Section {
                    Label(failureMessage, systemImage: "exclamationmark.triangle")
                        .foregroundStyle(.secondary)
                }
            }
        }
        .onDisappear { fillTask?.cancel() }
    }

    private func fill() async {
        didFail = false
        defer { isFilling = false }

        let previous = draft
        draft = StructuredOutputFormDraft()

        do {
            if let sampleStream {
                for try await partial in sampleStream(note) { draft = partial }
            } else {
                try await fillFromModel()
            }
        } catch {
            draft = previous
            guard !Task.isCancelled else { return }
            didFail = true
        }
    }

    private func fillFromModel() async throws {
        do {
            guard SystemLanguageModel.default.isAvailable else { throw ModelUnavailable() }
            let session = LanguageModelSession(instructions: "Extract an expense from the note. Do not invent values.")
            let stream = session.streamResponse(
                to: note,
                generating: StructuredOutputFormExpense.self,
                contextOptions: ContextOptions(includeSchemaInPrompt: true)
            )
            for try await snapshot in stream { apply(snapshot.content) }
        } catch {
            guard let fallbackStream, !Task.isCancelled else { throw error }
            draft = StructuredOutputFormDraft()
            for try await partial in fallbackStream(note) { draft = partial }
        }
    }

    /// Fields arrive one by one, so a field stays as it is until its value exists.
    private func apply(_ partial: StructuredOutputFormExpense.PartiallyGenerated) {
        draft.merchant = partial.merchant ?? draft.merchant
        draft.amount = partial.amount ?? draft.amount
        draft.category = partial.category ?? draft.category
        draft.purpose = partial.purpose ?? draft.purpose
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct StructuredOutputFormDemo: View {
    @State private var note = "Lunch with Ana at Casa Lucio, 48.50 for the team offsite"
    @State private var draft = StructuredOutputFormDraft()
    @State private var isPlayingSample = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 0) {
            StructuredOutputForm(note: $note, draft: $draft, fallbackStream: sample)

            if isPlayingSample {
                Text("The on-device model can't answer here, so this demo plays sample values.")
                    .font(.footnote)
                    .foregroundStyle(.secondary)
                    .padding()
            }
        }
        .background(Color(.systemGroupedBackground))
        .tint(.indigo)
    }

    private func sample(_ note: String) -> AsyncThrowingStream<StructuredOutputFormDraft, Error> {
        isPlayingSample = true
        let steps: [StructuredOutputFormDraft] = [
            .init(merchant: "Casa Lucio"),
            .init(merchant: "Casa Lucio", amount: 48.5),
            .init(merchant: "Casa Lucio", amount: 48.5, category: .food),
            .init(merchant: "Casa Lucio", amount: 48.5, category: .food, purpose: "Team offsite lunch"),
        ]
        let instant = reduceMotion
        return AsyncThrowingStream { continuation in
            let task = Task {
                for step in instant ? Array(steps.suffix(1)) : steps {
                    if !instant {
                        try? await Task.sleep(for: .milliseconds(550))
                        guard !Task.isCancelled else { return }
                    }
                    continuation.yield(step)
                }
                continuation.finish()
            }
            continuation.onTermination = { _ in task.cancel() }
        }
    }
}

@available(iOS 27, *)
#Preview {
    StructuredOutputFormDemo()
}
```

## Adaptive Columns Grid

A grid whose column count is computed from the available width, so it gives more columns on iPad and fewer on iPhone.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/AdaptiveColumnsGrid/AdaptiveColumnsGrid.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// How many columns fit in a width.
enum AdaptiveColumnsGridMath {
    /// Always at least 1, and never more than `maxColumns`.
    static func columnCount(width: CGFloat, minColumnWidth: CGFloat, spacing: CGFloat, maxColumns: Int) -> Int {
        let limit = max(1, min(maxColumns, 1_000))
        guard width.isFinite, width > 0, minColumnWidth.isFinite, minColumnWidth > 0 else { return 1 }
        let gap = spacing.isFinite ? max(0, spacing) : 0
        let fitting = ((width + gap) / (minColumnWidth + gap)).rounded(.down)
        return max(1, min(limit, Int(min(fitting, 1_000))))
    }
}

/// A grid that computes its column count from the width it gets: fewer columns on
/// iPhone, more on iPad, with an upper limit that `.adaptive` grid items do not offer.
struct AdaptiveColumnsGrid<Data: RandomAccessCollection, Content: View>: View where Data.Element: Identifiable {
    let data: Data
    var minColumnWidth: CGFloat = 150
    var spacing: CGFloat = 12
    var maxColumns = 6
    @ViewBuilder let content: (Data.Element) -> Content

    @State private var width: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var gap: CGFloat { spacing.isFinite ? max(0, spacing) : 0 }

    private var columnCount: Int {
        AdaptiveColumnsGridMath.columnCount(width: width, minColumnWidth: minColumnWidth, spacing: gap, maxColumns: maxColumns)
    }

    var body: some View {
        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: gap), count: columnCount), spacing: gap) {
            ForEach(data) { element in
                content(element)
            }
        }
        .frame(maxWidth: .infinity)
        .onGeometryChange(for: CGFloat.self, of: { $0.size.width }, action: { newWidth in
            // The first measurement is not a change the person should see animate.
            var transaction = Transaction()
            transaction.disablesAnimations = width == 0
            withTransaction(transaction) { width = newWidth }
        })
        .animation(reduceMotion ? nil : .smooth(duration: 0.4), value: columnCount)
    }
}

// MARK: - Demo

struct AdaptiveColumnsGridDemo: View {
    private struct Tile: Identifiable {
        let id: Int
        var color: Color { [.indigo, .teal, .pink, .orange, .mint, .purple][id % 6] }
    }

    private enum Size: String, CaseIterable, Identifiable {
        case narrow = "Narrow", medium = "Medium", wide = "Wide"

        var id: Self { self }
        var width: CGFloat {
            switch self {
            case .narrow: 170
            case .medium: 270
            case .wide: 362
            }
        }
    }

    @State private var size = Size.narrow
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var selection: Binding<Size> {
        Binding(get: { size }, set: { newValue in
            isAutoPlaying = false
            size = newValue
        })
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                Picker("Width", selection: selection) {
                    ForEach(Size.allCases) { Text($0.rawValue).tag($0) }
                }
                .pickerStyle(.segmented)

                AdaptiveColumnsGrid(data: (0..<12).map(Tile.init), minColumnWidth: 80, spacing: 10) { tile in
                    RoundedRectangle(cornerRadius: 14, style: .continuous)
                        .fill(tile.color.gradient)
                        .frame(height: 72)
                        .overlay {
                            Text("\(tile.id + 1)")
                                .font(.headline)
                                .foregroundStyle(.white)
                        }
                }
                .frame(maxWidth: size.width)
            }
            .padding(20)
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: isAutoPlaying && !reduceMotion) {
            guard isAutoPlaying, !reduceMotion else { return }
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.1))
                guard !Task.isCancelled, isAutoPlaying else { return }
                let all = Size.allCases
                let next = ((all.firstIndex(of: size) ?? 0) + 1) % all.count
                withAnimation(.smooth(duration: 0.4)) { size = all[next] }
            }
        }
    }
}

#Preview {
    AdaptiveColumnsGridDemo()
}
```

## Any Layout Adaptive Switch

A group that animates between a row and a column when its available width changes.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/AnyLayoutAdaptiveSwitch/AnyLayoutAdaptiveSwitch.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A group that lays out its content in a row when there is room, and animates to a
/// column when the width drops below `threshold` or the text gets very large.
struct AnyLayoutAdaptiveSwitch<Content: View>: View {
    var threshold: CGFloat = 340
    var spacing: CGFloat = 12
    @ViewBuilder let content: () -> Content

    @State private var availableWidth = CGFloat.infinity
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var usesColumn: Bool {
        dynamicTypeSize.isAccessibilitySize || availableWidth < threshold
    }

    var body: some View {
        let layout = usesColumn ? AnyLayout(VStackLayout(spacing: spacing)) : AnyLayout(HStackLayout(spacing: spacing))

        layout { content() }
            // Reads the width offered by the parent, not the size of the row or column,
            // so that switching layout cannot change the measurement and loop.
            .frame(maxWidth: .infinity)
            .onGeometryChange(for: CGFloat.self, of: { $0.size.width }, action: { newWidth in
                // The first measurement is not a change the person should see animate.
                var transaction = Transaction()
                transaction.disablesAnimations = availableWidth == .infinity
                withTransaction(transaction) { availableWidth = newWidth }
            })
            .animation(reduceMotion ? nil : .smooth(duration: 0.45), value: usesColumn)
    }
}

// MARK: - Demo

struct AnyLayoutAdaptiveSwitchDemo: View {
    @State private var isWide = true
    @State private var autoPlays = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var wideBinding: Binding<Bool> {
        Binding(get: { isWide }, set: { newValue in
            autoPlays = false
            isWide = newValue
        })
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 28) {
            Toggle("Wide container", isOn: wideBinding)
                .font(.headline)

            AnyLayoutAdaptiveSwitch(threshold: 300) {
                tile("Photos", systemImage: "photo.fill", color: .pink)
                tile("Music", systemImage: "music.note", color: .orange)
                tile("Maps", systemImage: "map.fill", color: .teal)
            }
            .padding(14)
            .background(.quaternary.opacity(0.5), in: .rect(cornerRadius: 24, style: .continuous))
            .frame(maxWidth: isWide ? 362 : 200)

            }
            .padding(20)
        }
        .tint(.indigo)
        .task(id: autoPlays && !reduceMotion) {
            guard autoPlays, !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled else { return }
                withAnimation(.smooth(duration: 0.45)) { isWide.toggle() }
            }
        }
    }

    private func tile(_ title: String, systemImage: String, color: Color) -> some View {
        VStack(spacing: 8) {
            Image(systemName: systemImage)
                .font(.title2)
                .accessibilityHidden(true)
            Text(title)
                .font(.subheadline.weight(.semibold))
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, minHeight: 92)
        .background(color.gradient, in: .rect(cornerRadius: 16, style: .continuous))
    }
}

#Preview {
    AnyLayoutAdaptiveSwitchDemo()
}
```

## Bento Grid Layout

A custom Layout that packs tiles of varied spans into a bento grid.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/BentoGridLayout/BentoGridLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated struct BentoGridLayoutSpan: Equatable, Sendable {
    var columns = 1
    var rows = 1
}

nonisolated enum BentoGridLayoutMath {
    /// Packs each tile, in order, into the first free slot, reading the grid top to bottom and left to right.
    static func frames(
        spans: [BentoGridLayoutSpan],
        columns: Int,
        width: CGFloat,
        rowHeight: CGFloat,
        spacing: CGFloat
    ) -> [CGRect] {
        guard columns > 0 else { return [] }
        let columnWidth = (width - spacing * CGFloat(columns - 1)) / CGFloat(columns)
        var taken = Set<SIMD2<Int>>()

        func cells(column: Int, row: Int, span: BentoGridLayoutSpan) -> [SIMD2<Int>] {
            (column..<column + span.columns).flatMap { x in
                (row..<row + span.rows).map { y in SIMD2(x, y) }
            }
        }

        func firstFreeSlot(for span: BentoGridLayoutSpan) -> (column: Int, row: Int) {
            var row = 0
            while true {
                for column in 0...(columns - span.columns) where taken.isDisjoint(with: cells(column: column, row: row, span: span)) {
                    return (column, row)
                }
                row += 1
            }
        }

        return spans.map { requested in
            let span = BentoGridLayoutSpan(columns: min(max(requested.columns, 1), columns), rows: max(requested.rows, 1))
            let slot = firstFreeSlot(for: span)
            taken.formUnion(cells(column: slot.column, row: slot.row, span: span))
            return CGRect(
                x: CGFloat(slot.column) * (columnWidth + spacing),
                y: CGFloat(slot.row) * (rowHeight + spacing),
                width: CGFloat(span.columns) * columnWidth + CGFloat(span.columns - 1) * spacing,
                height: CGFloat(span.rows) * rowHeight + CGFloat(span.rows - 1) * spacing
            )
        }
    }
}

nonisolated private struct BentoGridLayoutSpanKey: LayoutValueKey {
    static let defaultValue = BentoGridLayoutSpan()
}

extension View {
    /// How many columns and rows this tile takes inside a `BentoGridLayout`.
    func bentoGridSpan(columns: Int = 1, rows: Int = 1) -> some View {
        layoutValue(key: BentoGridLayoutSpanKey.self, value: BentoGridLayoutSpan(columns: columns, rows: rows))
    }
}

/// A grid that packs tiles of varied spans, leaving as few holes as it can.
struct BentoGridLayout: Layout {
    var columns = 4
    var rowHeight: CGFloat = 110
    var spacing: CGFloat = 12

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let width = proposal.width ?? CGFloat(columns) * (rowHeight + spacing) - spacing
        let height = frames(for: subviews, width: width).map(\.maxY).max() ?? 0
        return CGSize(width: width, height: height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        for (subview, frame) in zip(subviews, frames(for: subviews, width: bounds.width)) {
            subview.place(
                at: CGPoint(x: bounds.minX + frame.minX, y: bounds.minY + frame.minY),
                proposal: ProposedViewSize(frame.size)
            )
        }
    }

    private func frames(for subviews: Subviews, width: CGFloat) -> [CGRect] {
        BentoGridLayoutMath.frames(
            spans: subviews.map { $0[BentoGridLayoutSpanKey.self] },
            columns: columns,
            width: width,
            rowHeight: rowHeight,
            spacing: spacing
        )
    }
}

// MARK: - Demo

private struct DemoTile: Identifiable {
    let id: String
    let symbol: String
    let colors: [Color]
}

struct BentoGridLayoutDemo: View {
    private let tiles = [
        DemoTile(id: "Sleep", symbol: "moon.fill", colors: [.indigo, .purple]),
        DemoTile(id: "Steps", symbol: "figure.walk", colors: [.green, .teal]),
        DemoTile(id: "Heart", symbol: "heart.fill", colors: [.pink, .red]),
        DemoTile(id: "Water", symbol: "drop.fill", colors: [.cyan, .blue]),
        DemoTile(id: "Sun", symbol: "sun.max.fill", colors: [.yellow, .orange]),
        DemoTile(id: "Focus", symbol: "brain.head.profile", colors: [.purple, .pink]),
        DemoTile(id: "Rest", symbol: "bed.double.fill", colors: [.teal, .indigo]),
    ]

    private let arrangements: [[(columns: Int, rows: Int)]] = [
        [(2, 2), (2, 1), (1, 1), (1, 1), (4, 1), (2, 2), (2, 2)],
        [(4, 1), (1, 2), (3, 2), (2, 1), (2, 1), (2, 1), (2, 1)],
        [(1, 2), (3, 1), (2, 1), (1, 1), (2, 2), (2, 1), (2, 1)],
    ]

    @State private var arrangement = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 20) {
            Text("Today")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .frame(maxWidth: .infinity, alignment: .leading)

            BentoGridLayout(rowHeight: 104) {
                ForEach(Array(tiles.enumerated()), id: \.element.id) { index, tile in
                    let span = arrangements[arrangement][index]
                    tileView(tile)
                        .bentoGridSpan(columns: span.columns, rows: span.rows)
                }
            }

            Spacer(minLength: 0)

            Button("Shuffle", systemImage: "shuffle") {
                withAnimation(reduceMotion ? nil : .bouncy(duration: 0.55)) {
                    arrangement = (arrangement + 1) % arrangements.count
                }
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .padding(16)
        .background(LinearGradient(colors: [.indigo.opacity(0.1), .pink.opacity(0.08)], startPoint: .top, endPoint: .bottom))
    }

    private func tileView(_ tile: DemoTile) -> some View {
        VStack(alignment: .leading) {
            Image(systemName: tile.symbol)
                .font(.title2)
                .accessibilityHidden(true)
            Spacer(minLength: 0)
            Text(tile.id)
                .font(.system(.headline, design: .rounded))
                .lineLimit(1)
                .minimumScaleFactor(0.7)
        }
        .foregroundStyle(.white)
        .padding(12)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        .background(LinearGradient(colors: tile.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 22))
    }
}

#Preview {
    BentoGridLayoutDemo()
}
```

## Flow Tags Layout

A custom Layout that wraps tags onto as many lines as they need.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/FlowTagsLayout/FlowTagsLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum FlowTagsLayoutMath {
    /// Groups widths into lines. A tag wider than `maxWidth` gets a line of its own.
    static func lines(widths: [CGFloat], maxWidth: CGFloat, spacing: CGFloat) -> [Range<Int>] {
        var lines: [Range<Int>] = []
        var start = 0
        var used: CGFloat = 0

        for (index, width) in widths.enumerated() {
            if index == start {
                used = width
            } else if used + spacing + width > maxWidth {
                lines.append(start..<index)
                start = index
                used = width
            } else {
                used += spacing + width
            }
        }

        if start < widths.count {
            lines.append(start..<widths.count)
        }
        return lines
    }
}

/// A layout that wraps its views onto as many lines as they need.
struct FlowTagsLayout: Layout {
    var spacing: CGFloat = 8
    var lineSpacing: CGFloat = 8

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        let sizes = measuredSizes(of: subviews, maxWidth: proposal.width ?? .infinity)
        let lines = FlowTagsLayoutMath.lines(widths: sizes.map(\.width), maxWidth: proposal.width ?? .infinity, spacing: spacing)
        let widest = lines.map { lineWidth($0, sizes: sizes) }.max() ?? 0
        let height = lines.reduce(0) { $0 + lineHeight($1, sizes: sizes) } + CGFloat(max(lines.count - 1, 0)) * lineSpacing
        return CGSize(width: proposal.width ?? widest, height: height)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let sizes = measuredSizes(of: subviews, maxWidth: bounds.width)
        var y = bounds.minY

        for line in FlowTagsLayoutMath.lines(widths: sizes.map(\.width), maxWidth: bounds.width, spacing: spacing) {
            let height = lineHeight(line, sizes: sizes)
            var x = bounds.minX

            for index in line {
                subviews[index].place(
                    at: CGPoint(x: x, y: y + height / 2),
                    anchor: .leading,
                    proposal: ProposedViewSize(width: min(sizes[index].width, bounds.width), height: nil)
                )
                x += sizes[index].width + spacing
            }
            y += height + lineSpacing
        }
    }

    /// A view wider than the layout is measured at the width it gets, so its wrapped height counts.
    private func measuredSizes(of subviews: Subviews, maxWidth: CGFloat) -> [CGSize] {
        subviews.map { subview in
            let ideal = subview.sizeThatFits(.unspecified)
            return ideal.width > maxWidth ? subview.sizeThatFits(ProposedViewSize(width: maxWidth, height: nil)) : ideal
        }
    }

    private func lineWidth(_ line: Range<Int>, sizes: [CGSize]) -> CGFloat {
        sizes[line].reduce(0) { $0 + $1.width } + CGFloat(line.count - 1) * spacing
    }

    private func lineHeight(_ line: Range<Int>, sizes: [CGSize]) -> CGFloat {
        sizes[line].map(\.height).max() ?? 0
    }
}

// MARK: - Demo

struct FlowTagsLayoutDemo: View {
    private static let extras = ["Typography", "Motion", "Haptics", "Color", "Icons"]

    @State private var tags = ["Swift", "Design", "Photography", "Travel", "Coffee", "Running", "Music", "Architecture", "Film", "Cooking", "Books", "Cycling"]
    @State private var added = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? { reduceMotion ? nil : .snappy(duration: 0.4) }

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            Text("Your interests")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))

            FlowTagsLayout(spacing: 10, lineSpacing: 12) {
                ForEach(tags, id: \.self) { tag in
                    Text(tag)
                        .font(.system(.body, design: .rounded, weight: .medium))
                        .foregroundStyle(.white)
                        .padding(.horizontal, 16)
                        .padding(.vertical, 10)
                        .background(LinearGradient(colors: [.indigo, .pink], startPoint: .leading, endPoint: .trailing), in: .capsule)
                        .transition(.scale.combined(with: .opacity))
                }
            }

            Spacer(minLength: 0)

            HStack(spacing: 14) {
                Button("Remove", systemImage: "minus") {
                    withAnimation(animation) {
                        tags.removeFirst()
                        added = max(added - 1, 0)
                    }
                }
                .disabled(tags.isEmpty)

                Button("Add", systemImage: "plus") {
                    withAnimation(animation) {
                        tags.insert(Self.extras[added], at: 0)
                        added += 1
                    }
                }
                .disabled(added == Self.extras.count)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .frame(maxWidth: .infinity)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .pink.opacity(0.14)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    FlowTagsLayoutDemo()
}
```

## Kanban Board

Columns of cards that the user drags from one column to another.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/KanbanBoard/KanbanBoard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct KanbanBoardCard: Identifiable, Hashable, Sendable {
    let id: String
    var title: String
}

struct KanbanBoardColumn: Identifiable, Hashable, Sendable {
    let id: String
    var title: String
    var cards: [KanbanBoardCard]
}

enum KanbanBoardMove {
    /// Moves a card to the end of another column. Returns `false`, changing nothing,
    /// when the card or the column does not exist or the card is already there.
    static func apply(cardID: String, toColumn columnID: String, in columns: inout [KanbanBoardColumn]) -> Bool {
        guard let target = columns.firstIndex(where: { $0.id == columnID }),
              let source = columns.firstIndex(where: { $0.cards.contains { $0.id == cardID } }),
              source != target,
              let position = columns[source].cards.firstIndex(where: { $0.id == cardID })
        else { return false }

        let card = columns[source].cards.remove(at: position)
        columns[target].cards.append(card)
        return true
    }
}

/// Columns of cards that move from one column to another by dragging, with a
/// context menu and VoiceOver actions for anyone who cannot drag.
///
/// The drag payload is the card's `id` as plain text, so a copied file does not
/// need a custom type in Info.plist. Text that matches no card is ignored.
struct KanbanBoard: View {
    @Binding var columns: [KanbanBoardColumn]

    @ScaledMetric private var columnWidth: CGFloat
    @State private var targetedColumnID: String?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let cardCornerRadius: CGFloat = 12

    init(columns: Binding<[KanbanBoardColumn]>, columnWidth: CGFloat = 220) {
        _columns = columns
        _columnWidth = ScaledMetric(wrappedValue: columnWidth, relativeTo: .body)
    }

    var body: some View {
        ScrollView([.horizontal, .vertical]) {
            HStack(alignment: .top, spacing: 12) {
                ForEach(columns) { column in
                    columnView(column)
                }
            }
            .padding()
        }
    }

    private func columnView(_ column: KanbanBoardColumn) -> some View {
        VStack(alignment: .leading, spacing: 10) {
            HStack {
                Text(column.title).font(.headline)
                Spacer()
                Text("\(column.cards.count)")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .accessibilityLabel("^[\(column.cards.count) card](inflect: true)")
            }
            .accessibilityElement(children: .combine)

            ForEach(column.cards) { card in
                cardView(card, in: column)
            }

            if column.cards.isEmpty {
                Text("Drop cards here")
                    .font(.footnote)
                    .foregroundStyle(.secondary)
                    .frame(maxWidth: .infinity, minHeight: 60)
            }
        }
        .padding(12)
        .frame(width: max(120, columnWidth), alignment: .topLeading)
        .background(
            targetedColumnID == column.id ? AnyShapeStyle(.tint.opacity(0.22)) : AnyShapeStyle(.quaternary.opacity(0.5)),
            in: .rect(cornerRadius: 18, style: .continuous)
        )
        .dropDestination(for: String.self) { cardIDs, _ in
            var didMove = false
            withAnimation(moveAnimation) {
                for cardID in cardIDs {
                    if KanbanBoardMove.apply(cardID: cardID, toColumn: column.id, in: &columns) { didMove = true }
                }
            }
            return didMove
        } isTargeted: { isTargeted in
            if isTargeted {
                targetedColumnID = column.id
            } else if targetedColumnID == column.id {
                targetedColumnID = nil
            }
        }
    }

    private func cardView(_ card: KanbanBoardCard, in column: KanbanBoardColumn) -> some View {
        cardLabel(card)
            .draggable(card.id) { cardLabel(card).frame(width: max(120, columnWidth) - 24) }
            .contextMenu { moveButtons(card, from: column) }
            .accessibilityActions { moveButtons(card, from: column) }
    }

    private func cardLabel(_ card: KanbanBoardCard) -> some View {
        Text(card.title)
            .font(.subheadline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(12)
            .background(.background, in: .rect(cornerRadius: cardCornerRadius, style: .continuous))
            .contentShape(.dragPreview, .rect(cornerRadius: cardCornerRadius, style: .continuous))
    }

    @ViewBuilder
    private func moveButtons(_ card: KanbanBoardCard, from source: KanbanBoardColumn) -> some View {
        ForEach(columns.filter { $0.id != source.id }) { destination in
            Button("Move to \(destination.title)") {
                withAnimation(moveAnimation) {
                    _ = KanbanBoardMove.apply(cardID: card.id, toColumn: destination.id, in: &columns)
                }
            }
        }
    }

    private var moveAnimation: Animation? { reduceMotion ? nil : .snappy(duration: 0.3) }
}

// MARK: - Demo

struct KanbanBoardDemo: View {
    @State private var columns = [
        KanbanBoardColumn(id: "todo", title: "To do", cards: [
            KanbanBoardCard(id: "1", title: "Sketch the onboarding"),
            KanbanBoardCard(id: "2", title: "Write release notes"),
            KanbanBoardCard(id: "3", title: "Fix the login crash"),
        ]),
        KanbanBoardColumn(id: "doing", title: "Doing", cards: [
            KanbanBoardCard(id: "4", title: "Record the previews"),
        ]),
        KanbanBoardColumn(id: "done", title: "Done", cards: []),
    ]

    var body: some View {
        // Narrow enough to show part of the third column, which says the board scrolls.
        KanbanBoard(columns: $columns, columnWidth: 150)
            .tint(.indigo)
            .background(LinearGradient(colors: [.indigo.opacity(0.14), .teal.opacity(0.1)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    KanbanBoardDemo()
}
```

## Masonry Layout

A custom layout that places items of different heights into the shortest of several columns, like a Pinterest board.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/MasonryLayout/MasonryLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The placement math, with no views, so it can be tested.
nonisolated enum MasonryLayoutMath {
    struct Placement: Equatable {
        let column: Int
        let y: CGFloat
    }

    static func columnWidth(totalWidth: CGFloat, columns: Int, spacing: CGFloat) -> CGFloat {
        guard columns > 0, totalWidth.isFinite else { return 0 }
        return max(0, (totalWidth - spacing * CGFloat(columns - 1)) / CGFloat(columns))
    }

    /// Puts each item in the shortest column so far, the leftmost one on a tie.
    /// Returns one placement per height, and the height of the tallest column.
    static func place(heights: [CGFloat], columns: Int, spacing: CGFloat) -> (placements: [Placement], totalHeight: CGFloat) {
        var tops = Array(repeating: CGFloat.zero, count: max(1, columns))
        var placements: [Placement] = []

        for height in heights {
            let column = tops.indices.min { tops[$0] < tops[$1] } ?? 0
            placements.append(Placement(column: column, y: tops[column]))
            tops[column] += max(0, height) + spacing
        }

        return (placements, heights.isEmpty ? 0 : max(0, (tops.max() ?? spacing) - spacing))
    }
}

/// A layout that places items of different heights into the shortest of several
/// columns, like a Pinterest board. Put it inside a `ScrollView` when it can grow.
struct MasonryLayout: Layout {
    var columns = 2
    var spacing: CGFloat = 12

    /// More columns than this makes no sense on any screen.
    private var columnCount: Int { min(max(1, columns), 64) }
    private var gap: CGFloat { spacing.isFinite ? max(0, spacing) : 0 }

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) -> CGSize {
        let width = totalWidth(for: proposal, subviews: subviews)
        let columnWidth = MasonryLayoutMath.columnWidth(totalWidth: width, columns: columnCount, spacing: gap)
        let result = MasonryLayoutMath.place(heights: heights(of: subviews, columnWidth: columnWidth), columns: columnCount, spacing: gap)
        return CGSize(width: width, height: result.totalHeight)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout Void) {
        let columnWidth = MasonryLayoutMath.columnWidth(totalWidth: bounds.width, columns: columnCount, spacing: gap)
        let result = MasonryLayoutMath.place(heights: heights(of: subviews, columnWidth: columnWidth), columns: columnCount, spacing: gap)

        for (subview, placement) in zip(subviews, result.placements) {
            subview.place(
                at: CGPoint(x: bounds.minX + CGFloat(placement.column) * (columnWidth + gap), y: bounds.minY + placement.y),
                anchor: .topLeading,
                proposal: ProposedViewSize(width: columnWidth, height: nil)
            )
        }
    }

    private func heights(of subviews: Subviews, columnWidth: CGFloat) -> [CGFloat] {
        subviews.map { $0.sizeThatFits(ProposedViewSize(width: columnWidth, height: nil)).height }
    }

    /// With no width to fill, for example in a horizontal scroll view, uses the widest item.
    private func totalWidth(for proposal: ProposedViewSize, subviews: Subviews) -> CGFloat {
        if let width = proposal.width, width.isFinite { return max(0, width) }
        let widest = subviews.map { $0.sizeThatFits(.unspecified).width }.max() ?? 0
        return widest * CGFloat(columnCount) + gap * CGFloat(columnCount - 1)
    }
}

// MARK: - Demo

struct MasonryLayoutDemo: View {
    private static let notes: [(title: String, height: CGFloat, color: Color)] = [
        ("Sunrise", 150, .orange), ("Moss", 96, .green), ("Tide", 190, .teal), ("Ember", 120, .red),
        ("Dusk", 170, .purple), ("Fern", 110, .mint), ("Harbor", 140, .blue), ("Clay", 200, .brown),
        ("Lilac", 104, .indigo), ("Peach", 160, .pink), ("Sage", 130, .cyan), ("Slate", 118, .gray),
    ]

    @State private var columns = 2
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var columnsBinding: Binding<Int> {
        Binding(get: { columns }, set: { newValue in
            isAutoPlaying = false
            columns = newValue
        })
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 18) {
                Picker("Columns", selection: columnsBinding) {
                    ForEach(2...3, id: \.self) { Text("\($0) columns").tag($0) }
                }
                .pickerStyle(.segmented)

                MasonryLayout(columns: columns, spacing: 10) {
                    ForEach(Self.notes, id: \.title) { note in
                        RoundedRectangle(cornerRadius: 16, style: .continuous)
                            .fill(note.color.gradient)
                            .frame(height: note.height)
                            .overlay(alignment: .bottomLeading) {
                                Text(note.title)
                                    .font(.subheadline.bold())
                                    .foregroundStyle(.white)
                                    .padding(12)
                            }
                    }
                }
            }
            .padding(20)
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: isAutoPlaying && !reduceMotion) {
            guard isAutoPlaying, !reduceMotion else { return }
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled, isAutoPlaying else { return }
                withAnimation(.smooth(duration: 0.5)) { columns = columns == 2 ? 3 : 2 }
            }
        }
    }
}

#Preview {
    MasonryLayoutDemo()
}
```

## Morphing Layout Switch

A switch that moves items between a list and a grid in one lazy grid, keeping the state of each cell.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/MorphingLayoutSwitch/MorphingLayoutSwitch.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Shows the same items as a list or as a grid. One grid changes its number of
/// columns, so every item glides to its new place and keeps its state.
///
/// `content` also receives `isGrid`, so a cell can change its own design.
struct MorphingLayoutSwitch<Data: RandomAccessCollection, Content: View>: View where Data.Element: Identifiable {
    let data: Data
    let isGrid: Bool
    var columns = 2
    var spacing: CGFloat = 12
    @ViewBuilder let content: (Data.Element, Bool) -> Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var gridColumns: [GridItem] {
        Array(repeating: GridItem(.flexible(), spacing: spacing), count: isGrid ? min(max(1, columns), 64) : 1)
    }

    var body: some View {
        LazyVGrid(columns: gridColumns, spacing: spacing) {
            ForEach(data) { element in
                content(element, isGrid)
            }
        }
        .animation(reduceMotion ? nil : .smooth(duration: 0.5), value: isGrid)
    }
}

// MARK: - Demo

struct MorphingLayoutSwitchDemo: View {
    private struct Album: Identifiable {
        let id: String
        let systemImage: String
        let color: Color
    }

    private static let albums = [
        Album(id: "Skyline", systemImage: "building.2.fill", color: .indigo),
        Album(id: "Forest", systemImage: "tree.fill", color: .green),
        Album(id: "Coast", systemImage: "water.waves", color: .teal),
        Album(id: "Desert", systemImage: "sun.max.fill", color: .orange),
        Album(id: "Night", systemImage: "moon.stars.fill", color: .purple),
        Album(id: "Snow", systemImage: "snowflake", color: .cyan),
    ]

    @State private var isGrid = false

    var body: some View {
        ScrollView {
            VStack(spacing: 18) {
                Button(isGrid ? "Show list" : "Show grid", systemImage: isGrid ? "list.bullet" : "square.grid.2x2") {
                    isGrid.toggle()
                }
                .buttonStyle(.borderedProminent)
                .frame(maxWidth: .infinity, alignment: .trailing)

                MorphingLayoutSwitch(data: Self.albums, isGrid: isGrid) { album, isGrid in
                    cell(album, isGrid: isGrid)
                }
            }
            .padding(20)
        }
        .tint(.indigo)
    }

    private func cell(_ album: Album, isGrid: Bool) -> some View {
        let layout = isGrid ? AnyLayout(VStackLayout(spacing: 10)) : AnyLayout(HStackLayout(spacing: 14))

        return layout {
            Image(systemName: album.systemImage)
                .font(isGrid ? .largeTitle : .title2)
                .accessibilityHidden(true)
            Text(album.id)
                .font(.headline)
            if !isGrid { Spacer(minLength: 0) }
        }
        .foregroundStyle(.white)
        .padding(16)
        .frame(maxWidth: .infinity, minHeight: isGrid ? 140 : 70)
        .background(album.color.gradient, in: .rect(cornerRadius: 18, style: .continuous))
    }
}

#Preview {
    MorphingLayoutSwitchDemo()
}
```

## Radial Layout

A custom Layout that spreads views around a circle and animates as the count changes.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/RadialLayout/RadialLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum RadialLayoutMath {
    /// Evenly spaced angles, the first one at `start`.
    static func angles(count: Int, start: Angle = .degrees(-90)) -> [Angle] {
        guard count > 0 else { return [] }
        let step = 360.0 / Double(count)
        return (0..<count).map { .degrees(start.degrees + Double($0) * step) }
    }

    static func point(at angle: Angle, center: CGPoint, radius: CGFloat) -> CGPoint {
        CGPoint(
            x: center.x + radius * cos(angle.radians),
            y: center.y + radius * sin(angle.radians)
        )
    }
}

/// A layout that spreads its views around a circle.
///
/// Change the number of views inside `withAnimation` and the others glide to their new places.
/// Leave `radius` as `nil` to fill the space it is given.
struct RadialLayout: Layout {
    var radius: CGFloat?
    var startAngle: Angle = .degrees(-90)

    func sizeThatFits(proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) -> CGSize {
        if let radius {
            let side = 2 * radius + largestSide(of: subviews)
            return CGSize(width: side, height: side)
        }
        let size = proposal.replacingUnspecifiedDimensions(by: CGSize(width: 280, height: 280))
        let side = min(size.width, size.height)
        return CGSize(width: side, height: side)
    }

    func placeSubviews(in bounds: CGRect, proposal: ProposedViewSize, subviews: Subviews, cache: inout ()) {
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let circleRadius = radius ?? max(min(bounds.width, bounds.height) / 2 - largestSide(of: subviews) / 2, 0)

        for (subview, angle) in zip(subviews, RadialLayoutMath.angles(count: subviews.count, start: startAngle)) {
            subview.place(
                at: RadialLayoutMath.point(at: angle, center: center, radius: circleRadius),
                anchor: .center,
                proposal: .unspecified
            )
        }
    }

    private func largestSide(of subviews: Subviews) -> CGFloat {
        subviews.map {
            let size = $0.sizeThatFits(.unspecified)
            return max(size.width, size.height)
        }.max() ?? 0
    }
}

// MARK: - Demo

private struct DemoApp: Identifiable {
    var id: String { name }
    let name: String
    let symbol: String
    let color: Color
}

struct RadialLayoutDemo: View {
    private static let all = [
        DemoApp(name: "Music", symbol: "music.note", color: .pink),
        DemoApp(name: "Photos", symbol: "photo.fill", color: .orange),
        DemoApp(name: "Maps", symbol: "map.fill", color: .green),
        DemoApp(name: "Mail", symbol: "envelope.fill", color: .blue),
        DemoApp(name: "Notes", symbol: "note.text", color: .yellow),
        DemoApp(name: "Weather", symbol: "cloud.sun.fill", color: .cyan),
        DemoApp(name: "Health", symbol: "heart.fill", color: .red),
        DemoApp(name: "Clock", symbol: "clock.fill", color: .purple),
        DemoApp(name: "Camera", symbol: "camera.fill", color: .teal),
    ]

    @State private var count = 5
    @ScaledMetric(relativeTo: .title2) private var iconSize = 64.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 40) {
            ZStack {
                RadialLayout {
                    ForEach(Self.all.prefix(count)) { app in
                        Image(systemName: app.symbol)
                            .font(.title2)
                            .foregroundStyle(.white)
                            .frame(width: iconSize, height: iconSize)
                            .background(app.color.gradient, in: .circle)
                            .accessibilityLabel(app.name)
                            .transition(.scale.combined(with: .opacity))
                    }
                }

                Text("\(count)")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .contentTransition(.numericText(value: Double(count)))
                    .accessibilityLabel("^[\(count) app](inflect: true)")
            }
            .frame(maxWidth: 340, maxHeight: 340)

            HStack(spacing: 14) {
                Button("Remove", systemImage: "minus") { change(by: -1) }
                    .disabled(count == 1)
                Button("Add", systemImage: "plus") { change(by: 1) }
                    .disabled(count == Self.all.count)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.indigo.opacity(0.18), .teal.opacity(0.14)], startPoint: .top, endPoint: .bottom))
    }

    private func change(by amount: Int) {
        withAnimation(reduceMotion ? nil : .bouncy(duration: 0.55)) { count += amount }
    }
}

#Preview {
    RadialLayoutDemo()
}
```

## Readable Width Container

A wrapper that caps its content to a comfortable reading width and centers it on large iPad screens.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/ReadableWidthContainer/ReadableWidthContainer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Caps its content to a comfortable reading width and centers it on wide screens.
/// The limit grows with Dynamic Type, so lines keep about the same number of words.
struct ReadableWidthContainer<Content: View>: View {
    @ScaledMetric private var maxWidth: CGFloat
    private let content: Content

    init(maxWidth: CGFloat = 640, @ViewBuilder content: () -> Content) {
        _maxWidth = ScaledMetric(wrappedValue: maxWidth.isFinite ? max(0, maxWidth) : 640, relativeTo: .body)
        self.content = content()
    }

    var body: some View {
        content
            .frame(maxWidth: maxWidth, alignment: .leading)
            .frame(maxWidth: .infinity)
    }
}

// MARK: - Demo

struct ReadableWidthContainerDemo: View {
    @State private var isExpanded = false
    @State private var autoPlays = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var expandedBinding: Binding<Bool> {
        Binding(get: { isExpanded }, set: { newValue in
            autoPlays = false
            isExpanded = newValue
        })
    }

    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
            Toggle("Wider screen", isOn: expandedBinding)
                .font(.headline)

            ReadableWidthContainer(maxWidth: 240) {
                VStack(alignment: .leading, spacing: 10) {
                    Text("On reading")
                        .font(.title2.bold())
                    Text("Long lines tire the eye. Past a certain width the text stops growing and simply sits in the middle of the space.")
                        .font(.body)
                }
                .padding(16)
                .background(.indigo.opacity(0.14), in: .rect(cornerRadius: 16, style: .continuous))
            }
            .padding(.vertical, 22)
            .frame(maxWidth: isExpanded ? 362 : 250)
            .background {
                RoundedRectangle(cornerRadius: 20, style: .continuous)
                    .strokeBorder(.secondary.opacity(0.5), style: StrokeStyle(lineWidth: 1.5, dash: [6, 5]))
                    .accessibilityHidden(true)
            }

            }
            .padding(20)
        }
        .tint(.indigo)
        .task(id: autoPlays && !reduceMotion) {
            guard autoPlays, !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled else { return }
                withAnimation(.smooth(duration: 0.5)) { isExpanded.toggle() }
            }
        }
    }
}

#Preview {
    ReadableWidthContainerDemo()
}
```

## Subview Card Container

A custom container that styles each child of its ViewBuilder as a card.

Category: Layouts. Minimum: iOS 18.0. Path: Components/Layouts/SubviewCardContainer/SubviewCardContainer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

extension ContainerValues {
    @Entry var subviewCardTint: Color = .accentColor
}

extension View {
    /// The color of the card this view gets inside a `SubviewCardContainer`.
    func subviewCardTint(_ color: Color) -> some View {
        containerValue(\.subviewCardTint, color)
    }
}

/// A container that turns every child of its `@ViewBuilder` into a tinted card.
///
/// `ForEach(subviews:)` sees each resolved child, so it works the same for
/// static views and for children that come from a `ForEach` or an `if`.
struct SubviewCardContainer<Content: View>: View {
    var spacing: CGFloat = 12
    @ViewBuilder var content: Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: spacing) {
            ForEach(subviews: content) { subview in
                let tint = subview.containerValues.subviewCardTint

                subview
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(16)
                    .padding(.leading, 6)
                    .background(tint.opacity(0.16), in: .rect(cornerRadius: 18))
                    .overlay(alignment: .leading) {
                        Capsule()
                            .fill(tint.gradient)
                            .frame(width: 5)
                            .padding(.vertical, 12)
                            .padding(.leading, 8)
                            .accessibilityHidden(true)
                    }
                    .transition(reduceMotion ? .opacity : .scale(scale: 0.9).combined(with: .opacity))
            }
        }
    }
}

// MARK: - Demo

struct SubviewCardContainerDemo: View {
    private static let colors: [Color] = [.pink, .orange, .teal, .purple, .green]

    @State private var reminders = 1
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 16) {
            ScrollView {
                VStack(alignment: .leading, spacing: 20) {
                    Text("Today")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    SubviewCardContainer {
                        Label("A static child", systemImage: "square.fill")
                            .font(.headline)
                            .subviewCardTint(.indigo)

                        Text("Plain text becomes a card too, with no wrapper around it.")
                            .subviewCardTint(.blue)

                        ForEach(0..<reminders, id: \.self) { index in
                            Label("Child \(index + 1) from a ForEach", systemImage: "bell.fill")
                                .subviewCardTint(Self.colors[index])
                        }
                    }
                }
                .padding(20)
            }

            HStack(spacing: 14) {
                Button("Remove", systemImage: "minus") { change(by: -1) }
                    .disabled(reminders == 0)
                Button("Add", systemImage: "plus") { change(by: 1) }
                    .disabled(reminders == Self.colors.count)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.1), .teal.opacity(0.1)], startPoint: .top, endPoint: .bottom))
    }

    private func change(by amount: Int) {
        withAnimation(reduceMotion ? nil : .snappy(duration: 0.35)) { reminders += amount }
    }
}

#Preview {
    SubviewCardContainerDemo()
}
```

## Accordion Section

A stack of sections where opening one section closes the others, with the content height animated.

Category: Lists. Minimum: iOS 18.0. Path: Components/Lists/AccordionSection/AccordionSection.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A stack of sections where opening one closes the others. Bind `expandedID`
/// to open or close a section from outside.
struct AccordionSection<Data: RandomAccessCollection, Content: View>: View where Data.Element: Identifiable {
    let data: Data
    @Binding var expandedID: Data.Element.ID?
    let title: (Data.Element) -> String
    @ViewBuilder let content: (Data.Element) -> Content

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let cornerRadius: CGFloat = 16

    var body: some View {
        VStack(spacing: 10) {
            ForEach(data) { element in
                section(element)
            }
        }
    }

    private func section(_ element: Data.Element) -> some View {
        let isExpanded = expandedID == element.id

        return VStack(alignment: .leading, spacing: 0) {
            Button {
                withAnimation(reduceMotion ? nil : .snappy(duration: 0.32)) {
                    expandedID = isExpanded ? nil : element.id
                }
            } label: {
                HStack {
                    Text(title(element))
                        .font(.headline)
                        .multilineTextAlignment(.leading)
                    Spacer(minLength: 12)
                    Image(systemName: "chevron.down")
                        .font(.subheadline.weight(.semibold))
                        .rotationEffect(.degrees(isExpanded ? 180 : 0))
                        .accessibilityHidden(true)
                }
                .padding(16)
                .contentShape(.rect)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(title(element))
            .accessibilityValue(isExpanded ? "Expanded" : "Collapsed")

            if isExpanded {
                content(element)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding([.horizontal, .bottom], 16)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .move(edge: .top)))
            }
        }
        .background(.background, in: .rect(cornerRadius: cornerRadius, style: .continuous))
        .clipShape(.rect(cornerRadius: cornerRadius, style: .continuous))
    }
}

// MARK: - Demo

struct AccordionSectionDemo: View {
    private struct Question: Identifiable {
        let id: String
        let answer: String
    }

    private static let questions = [
        Question(id: "Can I copy the code?", answer: "Yes. Every component is one file that you paste into your app."),
        Question(id: "Does it need a package?", answer: "No. There is nothing to install and nothing to keep up to date."),
        Question(id: "Which iOS does it need?", answer: "Most components run on iOS 18, and newer ones say so in their metadata."),
    ]

    @State private var expandedID: String?

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Questions")
                    .font(.largeTitle.bold())

                AccordionSection(data: Self.questions, expandedID: $expandedID, title: \.id) { question in
                    Text(question.answer)
                        .font(.body)
                        .foregroundStyle(.secondary)
                }
            }
            .padding(24)
        }
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .teal.opacity(0.1)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    AccordionSectionDemo()
}
```

## Disclosure Tree View

A nested tree of rows that expand and collapse, indenting each level, for folders or category hierarchies.

Category: Lists. Minimum: iOS 18.0. Path: Components/Lists/DisclosureTreeView/DisclosureTreeView.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A node of the tree. Ids must be unique across the whole tree.
struct DisclosureTreeViewNode: Identifiable, Hashable, Sendable {
    let id: String
    var title: String
    var systemImage = "doc"
    var children: [DisclosureTreeViewNode] = []
}

/// The rows on screen: every node whose ancestors are all expanded, in order.
enum DisclosureTreeViewRows {
    struct Row: Identifiable, Equatable {
        let node: DisclosureTreeViewNode
        let depth: Int

        var id: String { node.id }
    }

    static func visible(in nodes: [DisclosureTreeViewNode], expanded: Set<String>, depth: Int = 0) -> [Row] {
        nodes.flatMap { node -> [Row] in
            let row = Row(node: node, depth: depth)
            guard expanded.contains(node.id) else { return [row] }
            return [row] + visible(in: node.children, expanded: expanded, depth: depth + 1)
        }
    }

    /// The indent of a row. Very deep rows and very large text stop adding to it, so the title has room.
    static func indent(depth: Int, step: Double) -> Double {
        Double(min(depth, 6)) * min(step, 24)
    }
}

/// A nested tree of rows that expand and collapse, indenting each level.
struct DisclosureTreeView: View {
    let nodes: [DisclosureTreeViewNode]
    @Binding var expandedIDs: Set<String>

    @ScaledMetric(relativeTo: .body) private var indent = 20.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        LazyVStack(alignment: .leading, spacing: 2) {
            ForEach(DisclosureTreeViewRows.visible(in: nodes, expanded: expandedIDs)) { row in
                rowView(row)
                    .transition(reduceMotion ? .opacity : .opacity.combined(with: .move(edge: .top)))
            }
        }
    }

    @ViewBuilder
    private func rowView(_ row: DisclosureTreeViewRows.Row) -> some View {
        if row.node.children.isEmpty {
            rowLabel(row, isExpanded: false)
                .accessibilityElement(children: .ignore)
                .accessibilityLabel(row.node.title)
                .accessibilityValue("Level \(row.depth + 1)")
        } else {
            let isExpanded = expandedIDs.contains(row.id)

            Button {
                withAnimation(reduceMotion ? nil : .snappy(duration: 0.28)) {
                    if isExpanded {
                        expandedIDs.remove(row.id)
                    } else {
                        expandedIDs.insert(row.id)
                    }
                }
            } label: {
                rowLabel(row, isExpanded: isExpanded)
            }
            .buttonStyle(.plain)
            .accessibilityLabel(row.node.title)
            .accessibilityValue("\(isExpanded ? "Expanded" : "Collapsed"), level \(row.depth + 1)")
        }
    }

    private func rowLabel(_ row: DisclosureTreeViewRows.Row, isExpanded: Bool) -> some View {
        HStack(spacing: 10) {
            Image(systemName: "chevron.forward")
                .font(.caption.weight(.bold))
                .foregroundStyle(.secondary)
                .rotationEffect(.degrees(isExpanded ? 90 : 0))
                .opacity(row.node.children.isEmpty ? 0 : 1)
                .accessibilityHidden(true)

            Image(systemName: row.node.systemImage)
                .foregroundStyle(.tint)
                .accessibilityHidden(true)

            Text(row.node.title)
                .font(.body)
                .multilineTextAlignment(.leading)

            Spacer(minLength: 0)
        }
        .padding(.vertical, 10)
        .padding(.horizontal, 12)
        .padding(.leading, DisclosureTreeViewRows.indent(depth: row.depth, step: indent))
        .contentShape(.rect)
    }
}

// MARK: - Demo

struct DisclosureTreeViewDemo: View {
    private static let tree = [
        DisclosureTreeViewNode(id: "sources", title: "Sources", systemImage: "folder.fill", children: [
            DisclosureTreeViewNode(id: "components", title: "Components", systemImage: "folder.fill", children: [
                DisclosureTreeViewNode(id: "button", title: "Button.swift", systemImage: "swift"),
                DisclosureTreeViewNode(id: "card", title: "Card.swift", systemImage: "swift"),
            ]),
            DisclosureTreeViewNode(id: "app", title: "App.swift", systemImage: "swift"),
        ]),
        DisclosureTreeViewNode(id: "tests", title: "Tests", systemImage: "folder.fill", children: [
            DisclosureTreeViewNode(id: "buttontests", title: "ButtonTests.swift", systemImage: "checkmark.seal"),
        ]),
        DisclosureTreeViewNode(id: "readme", title: "README.md", systemImage: "doc.text"),
    ]

    @State private var expandedIDs: Set<String> = []

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                Text("Project")
                    .font(.largeTitle.bold())
                    .padding(.horizontal, 12)

                DisclosureTreeView(nodes: Self.tree, expandedIDs: $expandedIDs)
                    .padding(.vertical, 8)
                    .background(.background, in: .rect(cornerRadius: 18, style: .continuous))
            }
            .padding(20)
        }
        .tint(.indigo)
        .background(LinearGradient(colors: [.indigo.opacity(0.14), .blue.opacity(0.08)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    DisclosureTreeViewDemo()
}
```

## Edit Mode Multi Select

A list with a Select mode that shows selection circles on each row and a bottom bar of bulk actions.

Category: Lists. Minimum: iOS 18.0. Path: Components/Lists/EditModeMultiSelect/EditModeMultiSelect.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A list with a Select mode: selection circles on each row and a bottom bar of bulk actions.
///
/// Place it inside a `NavigationStack`, because Select and Done go in the toolbar.
/// With Reduce Motion on, the bar appears without sliding.
struct EditModeMultiSelect<Row: Identifiable, RowContent: View, Actions: View>: View {
    let rows: [Row]
    @Binding var selection: Set<Row.ID>
    @ViewBuilder var rowContent: (Row) -> RowContent
    /// The bulk actions. They are disabled while nothing is selected.
    @ViewBuilder var actions: () -> Actions

    @State private var editMode: EditMode = .inactive
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isEditing: Bool { editMode.isEditing }
    private var allSelected: Bool { !rows.isEmpty && selection.count >= rows.count }

    var body: some View {
        List(rows, selection: $selection) { row in
            rowContent(row)
        }
        .environment(\.editMode, $editMode)
        .overlay {
            if rows.isEmpty {
                ContentUnavailableView("Nothing here", systemImage: "tray")
            }
        }
        .safeAreaInset(edge: .bottom, spacing: 0) {
            if isEditing {
                bulkBar.transition(reduceMotion ? .opacity : .move(edge: .bottom).combined(with: .opacity))
            }
        }
        .toolbar {
            ToolbarItem(placement: .topBarTrailing) {
                Button(isEditing ? "Done" : "Select") { setEditing(!isEditing) }
                    .disabled(rows.isEmpty && !isEditing)
            }
            if isEditing {
                ToolbarItem(placement: .topBarLeading) {
                    Button(allSelected ? "Deselect All" : "Select All", action: toggleAll)
                }
            }
        }
        .onChange(of: rows.map(\.id)) { _, ids in
            selection.formIntersection(ids)
            if ids.isEmpty { setEditing(false) }
        }
    }

    private var bulkBar: some View {
        ViewThatFits(in: .horizontal) {
            HStack(spacing: 16) {
                selectedCount
                Spacer(minLength: 0)
                actionRow
            }
            VStack(spacing: 10) {
                selectedCount
                actionRow
            }
        }
        .padding(.horizontal, 20)
        .padding(.vertical, 12)
        .frame(maxWidth: .infinity)
        .background(.bar)
    }

    private var selectedCount: some View {
        Text("\(selection.count) selected")
            .font(.subheadline.weight(.semibold))
            .monospacedDigit()
    }

    private var actionRow: some View {
        HStack(spacing: 20) { actions() }
            .disabled(selection.isEmpty)
    }

    private func setEditing(_ editing: Bool) {
        withAnimation(reduceMotion ? nil : .snappy) {
            editMode = editing ? .active : .inactive
            if !editing { selection.removeAll() }
        }
    }

    private func toggleAll() {
        selection = allSelected ? [] : Set(rows.map(\.id))
    }
}

// MARK: - Demo

private struct EditModeMultiSelectDemoMail: Identifiable {
    let id: String
    let subtitle: String
    let systemImage: String
    let tint: Color
}

struct EditModeMultiSelectDemo: View {
    private static let allMails = [
        EditModeMultiSelectDemoMail(id: "Flights", subtitle: "Your boarding pass is ready", systemImage: "airplane", tint: .blue),
        EditModeMultiSelectDemoMail(id: "Receipts", subtitle: "Thanks for your order", systemImage: "cart.fill", tint: .green),
        EditModeMultiSelectDemoMail(id: "Newsletter", subtitle: "Five things to read this week", systemImage: "newspaper.fill", tint: .orange),
        EditModeMultiSelectDemoMail(id: "Calendar", subtitle: "Design review moved to 10:30", systemImage: "calendar", tint: .red),
        EditModeMultiSelectDemoMail(id: "Photos", subtitle: "12 new shared photos", systemImage: "photo.fill", tint: .purple),
        EditModeMultiSelectDemoMail(id: "Banking", subtitle: "Your statement is available", systemImage: "creditcard.fill", tint: .teal),
        EditModeMultiSelectDemoMail(id: "Podcasts", subtitle: "A new episode just landed", systemImage: "mic.fill", tint: .pink),
        EditModeMultiSelectDemoMail(id: "Fitness", subtitle: "You closed all your rings", systemImage: "figure.run", tint: .mint),
    ]
    @State private var mails = allMails
    @State private var selection = Set<String>()
    @ScaledMetric(relativeTo: .headline) private var iconSize = 40.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        NavigationStack {
            EditModeMultiSelect(rows: mails, selection: $selection) { mail in
                HStack(spacing: 14) {
                    Image(systemName: mail.systemImage)
                        .font(.headline)
                        .foregroundStyle(.white)
                        .frame(width: iconSize, height: iconSize)
                        .background(mail.tint.gradient, in: .rect(cornerRadius: 11))
                        .accessibilityHidden(true)

                    VStack(alignment: .leading, spacing: 2) {
                        Text(mail.id).font(.headline)
                        Text(mail.subtitle)
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                            .lineLimit(1)
                    }
                }
                .accessibilityElement(children: .combine)
            } actions: {
                Button("Archive", systemImage: "archivebox", action: removeSelected)
                Button("Delete", systemImage: "trash", role: .destructive, action: removeSelected)
            }
            .navigationTitle("Inbox")
            .navigationBarTitleDisplayMode(.inline)
            // Only for this demo: a way back once every row is gone.
            .safeAreaInset(edge: .bottom) {
                if mails.isEmpty {
                    Button("Start over") {
                        withAnimation(reduceMotion ? nil : .default) { mails = Self.allMails }
                    }
                    .buttonStyle(.borderedProminent)
                    .padding(.bottom, 24)
                }
            }
        }
    }

    private func removeSelected() {
        withAnimation(reduceMotion ? nil : .default) {
            mails.removeAll { selection.contains($0.id) }
        }
    }
}

#Preview {
    EditModeMultiSelectDemo()
}
```

## Load More Footer

An infinite list footer that requests the next page when it appears and shows loading, retry and end states.

Category: Lists. Minimum: iOS 18.0. Path: Components/Lists/LoadMoreFooter/LoadMoreFooter.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum LoadMoreFooterPhase: Equatable, Sendable {
    case idle, loading, failed, finished
}

struct LoadMoreFooterPage<Element> {
    let elements: [Element]
    let hasMore: Bool
}

/// Holds the loaded pages and makes sure only one request runs at a time.
@MainActor
@Observable
final class LoadMoreFooterPager<Element> {
    private(set) var elements: [Element] = []
    private(set) var phase = LoadMoreFooterPhase.idle

    private var nextPage = 0
    private let fetch: @MainActor (Int) async throws -> LoadMoreFooterPage<Element>

    init(fetch: @escaping @MainActor (Int) async throws -> LoadMoreFooterPage<Element>) {
        self.fetch = fetch
    }

    func loadNextPage() async {
        guard phase == .idle || phase == .failed else { return }
        phase = .loading
        do {
            let page = try await fetch(nextPage)
            elements += page.elements
            nextPage += 1
            phase = page.hasMore && !page.elements.isEmpty ? .idle : .finished
        } catch is CancellationError {
            phase = .idle
        } catch {
            phase = .failed
        }
    }
}

/// The last row of an infinite list. It asks for the next page as soon as it appears.
struct LoadMoreFooter: View {
    let phase: LoadMoreFooterPhase
    var finishedText = "You're all caught up"
    let onLoad: () -> Void

    var body: some View {
        Group {
            switch phase {
            case .idle:
                ProgressView()
                    .accessibilityLabel("Loading more")
                    .onAppear(perform: onLoad)
            case .loading:
                ProgressView()
                    .accessibilityLabel("Loading more")
            case .failed:
                Button("Try again", systemImage: "arrow.clockwise", action: onLoad)
                    .buttonStyle(.bordered)
            case .finished:
                Text(finishedText)
                    .font(.footnote)
                    .foregroundStyle(.secondary)
            }
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, 20)
    }
}

// MARK: - Demo

struct LoadMoreFooterDemo: View {
    @State private var pager = LoadMoreFooterPager<Int>(fetch: Self.fetchPage)
    @ScaledMetric(relativeTo: .headline) private var iconSize = 52.0

    private static func fetchPage(_ page: Int) async throws -> LoadMoreFooterPage<Int> {
        try await Task.sleep(for: .seconds(0.9))
        return LoadMoreFooterPage(elements: Array((page * 8)..<((page + 1) * 8)), hasMore: page < 3)
    }

    var body: some View {
        NavigationStack {
            ScrollView {
                LazyVStack(spacing: 12) {
                    ForEach(pager.elements, id: \.self, content: row)

                    LoadMoreFooter(phase: pager.phase) {
                        Task { await pager.loadNextPage() }
                    }
                }
                .padding(.horizontal, 16)
            }
            .navigationTitle("Stories")
            .navigationBarTitleDisplayMode(.inline)
        }
    }

    private func row(_ number: Int) -> some View {
        let hue = Double(number % 8) / 8
        return HStack(spacing: 14) {
            Image(systemName: "sparkles")
                .font(.title3)
                .foregroundStyle(.white)
                .frame(width: iconSize, height: iconSize)
                .background(Color(hue: hue, saturation: 0.65, brightness: 0.85).gradient, in: .rect(cornerRadius: 14))
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 3) {
                Text("Story \(number + 1)").font(.headline)
                Text("A short line about this story")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            Spacer(minLength: 0)
        }
        .padding(14)
        .background(.fill.quaternary, in: .rect(cornerRadius: 20))
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    LoadMoreFooterDemo()
}
```

## Reorderable Card List

A stack of cards you can drag into a new order, without using List.

Category: Lists. Minimum: iOS 27.0. Path: Components/Lists/ReorderableCardList/ReorderableCardList.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A stack of cards the user can drag into a new order, without using `List`.
@available(iOS 27, *)
struct ReorderableCardList<Item: Identifiable & Sendable, Card: View>: View where Item.ID: Sendable {
    @Binding var items: [Item]
    @ViewBuilder let card: (Item) -> Card

    var body: some View {
        ScrollView {
            VStack(spacing: 12) {
                ForEach(items) { item in
                    card(item)
                }
                .reorderable()
            }
            .padding()
            .reorderContainer(for: Item.self) { difference in
                let destination: Item.ID? = switch difference.destination.position {
                case .before(let id): id
                case .end: nil
                }
                items = CardReordering.moving(difference.sources, before: destination, in: items)
            }
        }
    }
}

@available(iOS 27, *)
enum CardReordering {
    /// Moves `sources` in front of `destination`, or to the end when it is nil.
    static func moving<Item: Identifiable>(
        _ sources: [Item.ID],
        before destination: Item.ID?,
        in items: [Item]
    ) -> [Item] {
        if let destination, sources.contains(destination) { return items }

        let moved = sources.compactMap { source in items.first { $0.id == source } }
        var remaining = items.filter { !sources.contains($0.id) }
        let index = remaining.firstIndex { $0.id == destination } ?? remaining.endIndex
        remaining.insert(contentsOf: moved, at: index)
        return remaining
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct ReorderableCardListDemo: View {
    nonisolated private struct Step: Identifiable, Sendable {
        let id: String
        let systemImage: String
        let color: Color
    }

    @State private var steps = [
        Step(id: "Design", systemImage: "paintbrush.fill", color: .pink),
        Step(id: "Build", systemImage: "hammer.fill", color: .orange),
        Step(id: "Test", systemImage: "checkmark.seal.fill", color: .green),
        Step(id: "Ship", systemImage: "paperplane.fill", color: .blue),
    ]

    var body: some View {
        ReorderableCardList(items: $steps) { step in
            HStack(spacing: 16) {
                Image(systemName: step.systemImage)
                    .font(.title2)
                    .foregroundStyle(.white)
                    .frame(width: 52, height: 52)
                    .background(step.color.gradient, in: .rect(cornerRadius: 14))
                    .accessibilityHidden(true)

                Text(step.id)
                    .font(.title3.bold())

                Spacer()

                Image(systemName: "line.3.horizontal")
                    .foregroundStyle(.secondary)
                    .accessibilityHidden(true)
            }
            .padding()
            .background(.background.secondary, in: .rect(cornerRadius: 20))
        }
    }
}

@available(iOS 27, *)
#Preview {
    ReorderableCardListDemo()
}
```

## Reorderable Grid

A grid of tiles the user can drag into a new order.

Category: Lists. Minimum: iOS 27.0. Path: Components/Lists/ReorderableGrid/ReorderableGrid.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A grid of tiles the user can drag into a new order.
@available(iOS 27, *)
struct ReorderableGrid<Item: Identifiable & Sendable, Tile: View>: View where Item.ID: Sendable {
    @Binding var items: [Item]
    var minimumTileWidth: CGFloat = 100
    var spacing: CGFloat = 14
    @ViewBuilder let tile: (Item) -> Tile

    var body: some View {
        ScrollView {
            LazyVGrid(columns: [GridItem(.adaptive(minimum: minimumTileWidth), spacing: spacing)], spacing: spacing) {
                ForEach(items) { item in
                    tile(item)
                }
                .reorderable()
            }
            .padding()
            .reorderContainer(for: Item.self) { difference in
                let destination: Item.ID? = switch difference.destination.position {
                case .before(let id): id
                case .end: nil
                }
                items = ReorderableGridReordering.moving(difference.sources, before: destination, in: items)
            }
        }
    }
}

@available(iOS 27, *)
enum ReorderableGridReordering {
    /// Moves `sources` in front of `destination`, or to the end when it is nil.
    ///
    /// When `destination` is itself being moved, the first unmoved item after it is the anchor.
    static func moving<Item: Identifiable>(
        _ sources: [Item.ID],
        before destination: Item.ID?,
        in items: [Item]
    ) -> [Item] {
        let moved = sources.compactMap { source in items.first { $0.id == source } }
        var remaining = items.filter { !sources.contains($0.id) }

        let start = items.firstIndex { $0.id == destination } ?? items.endIndex
        let anchor = items[start...].first { !sources.contains($0.id) }
        let index = remaining.firstIndex { $0.id == anchor?.id } ?? remaining.endIndex

        remaining.insert(contentsOf: moved, at: index)
        return remaining
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct ReorderableGridDemo: View {
    nonisolated private struct App: Identifiable, Sendable {
        let id: String
        let systemImage: String
        let color: Color
    }

    @State private var apps = [
        App(id: "Music", systemImage: "music.note", color: .pink),
        App(id: "Photos", systemImage: "photo.fill", color: .orange),
        App(id: "Maps", systemImage: "map.fill", color: .green),
        App(id: "Mail", systemImage: "envelope.fill", color: .blue),
        App(id: "Notes", systemImage: "note.text", color: .yellow),
        App(id: "Weather", systemImage: "cloud.sun.fill", color: .cyan),
        App(id: "Books", systemImage: "book.fill", color: .indigo),
        App(id: "Health", systemImage: "heart.fill", color: .red),
        App(id: "Files", systemImage: "folder.fill", color: .teal),
        App(id: "Clock", systemImage: "clock.fill", color: .purple),
        App(id: "Camera", systemImage: "camera.fill", color: .gray),
        App(id: "Wallet", systemImage: "wallet.bifold.fill", color: .mint),
    ]

    var body: some View {
        NavigationStack {
            ReorderableGrid(items: $apps) { app in
                VStack(spacing: 8) {
                    RoundedRectangle(cornerRadius: 26)
                        .fill(app.color.gradient)
                        .aspectRatio(1, contentMode: .fit)
                        .overlay {
                            Image(systemName: app.systemImage)
                                .font(.largeTitle)
                                .foregroundStyle(.white)
                        }
                        .accessibilityHidden(true)

                    Text(app.id)
                        .font(.subheadline.weight(.medium))
                }
            }
            .navigationTitle("Hold and drag")
        }
    }
}

@available(iOS 27, *)
#Preview {
    ReorderableGridDemo()
}
```

## Sticky Section Headers

A scrolling list of sections whose headers pin to the top until the next header pushes them off.

Category: Lists. Minimum: iOS 18.0. Path: Components/Lists/StickySectionHeaders/StickySectionHeaders.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct StickySectionHeadersGroup<Element: Identifiable>: Identifiable {
    let title: String
    let elements: [Element]

    /// Titles identify the groups, so keep them unique.
    var id: String { title }
}

/// A scrolling list whose section headers pin to the top until the next one pushes them off.
struct StickySectionHeaders<Element: Identifiable, Row: View>: View {
    let groups: [StickySectionHeadersGroup<Element>]
    var tint: Color = .accentColor
    @ViewBuilder var row: (Element) -> Row

    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 0, pinnedViews: [.sectionHeaders]) {
                ForEach(groups) { group in
                    Section {
                        ForEach(group.elements, content: row)
                    } header: {
                        header(group.title)
                    }
                }
            }
        }
    }

    private func header(_ title: String) -> some View {
        Text(title)
            .font(.headline)
            .foregroundStyle(tint)
            .padding(.horizontal, 20)
            .padding(.vertical, 10)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.bar)
            .accessibilityAddTraits(.isHeader)
    }
}

// MARK: - Demo

private struct StickySectionHeadersDemoContact: Identifiable {
    let name: String
    var id: String { name }
}

struct StickySectionHeadersDemo: View {
    @ScaledMetric(relativeTo: .body) private var avatarSize = 42.0

    private let groups: [StickySectionHeadersGroup<StickySectionHeadersDemoContact>] = [
        ("A", ["Ada Byron", "Alan Turing", "Alice Ball", "Amelia Earhart", "Anita Borg"]),
        ("B", ["Barbara Liskov", "Blaise Pascal", "Bob Kahn", "Brian Kernighan", "Bjarne Stroustrup"]),
        ("C", ["Carl Sagan", "Charles Babbage", "Chien-Shiung Wu", "Claude Shannon", "Cecilia Payne"]),
        ("D", ["Dennis Ritchie", "Donald Knuth", "Dorothy Vaughan", "Douglas Engelbart", "Dian Fossey"]),
        ("E", ["Edsger Dijkstra", "Emmy Noether", "Enrico Fermi", "Erwin Schrodinger", "Euclid"]),
    ].map { title, names in
        StickySectionHeadersGroup(title: title, elements: names.map(StickySectionHeadersDemoContact.init))
    }

    var body: some View {
        NavigationStack {
            StickySectionHeaders(groups: groups, tint: .indigo) { contact in
                HStack(spacing: 14) {
                    Text(String(contact.name.prefix(1)))
                        .font(.headline)
                        .foregroundStyle(.white)
                        .frame(width: avatarSize, height: avatarSize)
                        .background(.indigo.gradient, in: .circle)
                        .accessibilityHidden(true)

                    Text(contact.name).font(.body)

                    Spacer(minLength: 0)
                }
                .padding(.horizontal, 20)
                .padding(.vertical, 10)
            }
            .navigationTitle("Contacts")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

#Preview {
    StickySectionHeadersDemo()
}
```

## Swipe Action Cards

A column of cards with the system's swipe actions, outside a List.

Category: Lists. Minimum: iOS 27.0. Path: Components/Lists/SwipeActionCards/SwipeActionCards.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum SwipeActionCardsLogic {
    /// The items left after one is removed, in their order.
    static func removing<Item: Identifiable>(_ id: Item.ID, from items: [Item]) -> [Item] {
        items.filter { $0.id != id }
    }

    /// The items with one moved to the front, which is what pinning does. An unknown one changes nothing.
    static func pinning<Item: Identifiable>(_ id: Item.ID, in items: [Item]) -> [Item] {
        guard let index = items.firstIndex(where: { $0.id == id }) else { return items }
        var items = items
        items.insert(items.remove(at: index), at: 0)
        return items
    }
}

/// A column of cards with the system's swipe actions, outside a `List`: swipe a card to the
/// side to show its buttons, or all the way to run the first one.
///
/// Until iOS 27, `swipeActions` only worked on the rows of a `List`. `swipeActionsContainer`
/// brings it to any stack, so the cards can look however you want and keep the system's
/// gesture, haptics and VoiceOver actions.
@available(iOS 27, *)
struct SwipeActionCards<Item: Identifiable, Card: View, Actions: View>: View {
    let items: [Item]
    var spacing: CGFloat = 12
    @ViewBuilder var card: (Item) -> Card
    /// The buttons a card shows when it is swiped from its trailing edge, the first one outermost.
    @ViewBuilder var actions: (Item) -> Actions

    var body: some View {
        ScrollView {
            LazyVStack(spacing: spacing) {
                ForEach(items) { item in
                    card(item)
                        .swipeActions(edge: .trailing, allowsFullSwipe: true) {
                            actions(item)
                        }
                }
            }
            .padding(16)
            .swipeActionsContainer()
        }
    }
}

// MARK: - Demo

@available(iOS 27, *)
private struct SwipeActionCardsDemoTask: Identifiable {
    let id: Int
    let title: String
    let detail: String
    let symbol: String
    let color: Color
}

@available(iOS 27, *)
struct SwipeActionCardsDemo: View {
    private static let allTasks = [
        SwipeActionCardsDemoTask(id: 0, title: "Water the plants", detail: "Balcony and kitchen", symbol: "leaf.fill", color: .green),
        SwipeActionCardsDemoTask(id: 1, title: "Call the dentist", detail: "Before five", symbol: "phone.fill", color: .blue),
        SwipeActionCardsDemoTask(id: 2, title: "Renew the bike pass", detail: "Ends on Friday", symbol: "bicycle", color: .orange),
        SwipeActionCardsDemoTask(id: 3, title: "Pick up the parcel", detail: "Locker 12", symbol: "shippingbox.fill", color: .purple),
    ]
    @State private var tasks = allTasks

    var body: some View {
        SwipeActionCards(items: tasks) { task in
            HStack(spacing: 14) {
                Image(systemName: task.symbol)
                    .font(.title3)
                    .foregroundStyle(.white)
                    .frame(width: 44, height: 44)
                    .background(task.color.gradient, in: .rect(cornerRadius: 12))
                    .accessibilityHidden(true)

                VStack(alignment: .leading, spacing: 2) {
                    Text(task.title)
                        .font(.headline)
                    Text(task.detail)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                Spacer(minLength: 0)
            }
            .padding(14)
            .background(.background, in: .rect(cornerRadius: 18))
            .accessibilityElement(children: .combine)
        } actions: { task in
            Button("Delete", systemImage: "trash", role: .destructive) {
                withAnimation { tasks = SwipeActionCardsLogic.removing(task.id, from: tasks) }
            }

            Button("Pin", systemImage: "pin.fill") {
                withAnimation { tasks = SwipeActionCardsLogic.pinning(task.id, in: tasks) }
            }
            .tint(.orange)
        }
        // Only for this demo: a way back once every card is gone.
        .overlay {
            if tasks.isEmpty {
                ContentUnavailableView {
                    Label("All done", systemImage: "checkmark.circle")
                } actions: {
                    Button("Start over") {
                        withAnimation { tasks = Self.allTasks }
                    }
                    .buttonStyle(.borderedProminent)
                }
            }
        }
        .background(Color(.systemGroupedBackground))
    }
}

@available(iOS 27, *)
#Preview {
    SwipeActionCardsDemo()
}
```

## Arc Segments Loader

A spinner with gradient arc segments of different lengths turning in opposite directions.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/ArcSegmentsLoader/ArcSegmentsLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Two rings of arcs with different lengths, turning in opposite directions.
///
/// With Reduce Motion on, the arcs stay still.
struct ArcSegmentsLoader: View {
    var colors: [Color] = [.pink, .orange, .purple, .pink]
    /// The length of each arc, as a fraction of the ring.
    var lengths: [Double] = [0.32, 0.16, 0.07]
    var size: CGFloat = 64
    var period: TimeInterval = 1.8

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var lineWidth: CGFloat { size * 0.075 }

    private var arcs: [ClosedRange<Double>] {
        let gap = max(0, 1 - lengths.reduce(0, +)) / Double(max(lengths.count, 1))
        var start = 0.0
        return lengths.map { length in
            defer { start += length + gap }
            return start...(start + length)
        }
    }

    var body: some View {
        TimelineView(.animation(paused: reduceMotion)) { context in
            let turns = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate / period

            ZStack {
                ring(inset: 0)
                    .rotationEffect(.degrees(turns * 360))

                ring(inset: size * 0.2)
                    .rotationEffect(.degrees(-turns * 360 * 1.4 + 90))
                    .opacity(0.7)
            }
            .frame(width: size, height: size)
        }
        .accessibilityElement()
        .accessibilityLabel("Loading")
    }

    private func ring(inset: CGFloat) -> some View {
        ZStack {
            ForEach(arcs, id: \.lowerBound) { arc in
                Circle()
                    .trim(from: arc.lowerBound, to: arc.upperBound)
                    .stroke(
                        AngularGradient(colors: colors, center: .center),
                        style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                    )
            }
        }
        .padding(lineWidth / 2 + inset)
    }
}

// MARK: - Demo

struct ArcSegmentsLoaderDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .purple.opacity(0.6)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 40) {
                ArcSegmentsLoader(size: 260)

                VStack(spacing: 6) {
                    Text("Preparing your trip")
                        .font(.system(.title, design: .rounded, weight: .bold))
                        .foregroundStyle(.white)

                    Text("Comparing the best routes")
                        .font(.body)
                        .foregroundStyle(.white.opacity(0.75))
                }
                .multilineTextAlignment(.center)
            }
            .padding(24)
        }
    }
}

#Preview {
    ArcSegmentsLoaderDemo()
}
```

## Blob Morph Loader

A soft gradient blob drawn in a canvas that keeps changing shape while content loads.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/BlobMorphLoader/BlobMorphLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A soft blob that keeps changing shape, drawn in a canvas.
///
/// With Reduce Motion on, it shows one still blob.
struct BlobMorphLoader: View {
    var colors: [Color] = [.pink, .purple, .indigo]
    var size: CGFloat = 96
    var speed: Double = 1

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            let time = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate * speed

            Canvas { canvas, canvasSize in
                let blob = BlobMorphOutline.path(in: canvasSize, time: time)
                let shading = BlobMorphOutline.shading(colors: colors, in: canvasSize, time: time)

                var glow = canvas
                glow.addFilter(.blur(radius: canvasSize.width * 0.08))
                glow.opacity = 0.55
                glow.fill(blob, with: shading)

                canvas.fill(blob, with: shading)
            }
            .frame(width: size, height: size)
        }
        .accessibilityElement()
        .accessibilityLabel("Loading")
    }
}

private enum BlobMorphOutline {
    static let pointCount = 16

    /// A closed curve through points whose distance from the center is a sum of moving sine waves.
    static func path(in size: CGSize, time: Double) -> Path {
        let center = CGPoint(x: size.width / 2, y: size.height / 2)
        let base = min(size.width, size.height) * 0.31

        let points = (0..<pointCount).map { index -> CGPoint in
            let angle = Double(index) / Double(pointCount) * 2 * .pi
            let swell = 0.16 * sin(2 * angle + time * 1.4)
                + 0.10 * sin(3 * angle - time * 1.1)
                + 0.06 * sin(5 * angle + time * 0.7)
            let radius = base * (1 + swell)
            return CGPoint(x: center.x + cos(angle) * radius, y: center.y + sin(angle) * radius)
        }

        var path = Path()
        path.move(to: midpoint(points[pointCount - 1], points[0]))
        for index in 0..<pointCount {
            let next = points[(index + 1) % pointCount]
            path.addQuadCurve(to: midpoint(points[index], next), control: points[index])
        }
        path.closeSubpath()
        return path
    }

    /// A gradient whose direction turns slowly, so the color drifts across the blob.
    static func shading(colors: [Color], in size: CGSize, time: Double) -> GraphicsContext.Shading {
        let center = CGPoint(x: size.width / 2, y: size.height / 2)
        let reach = size.width * 0.4
        let offset = CGSize(width: cos(time * 0.6) * reach, height: sin(time * 0.6) * reach)

        return .linearGradient(
            Gradient(colors: colors),
            startPoint: CGPoint(x: center.x - offset.width, y: center.y - offset.height),
            endPoint: CGPoint(x: center.x + offset.width, y: center.y + offset.height)
        )
    }

    private static func midpoint(_ first: CGPoint, _ second: CGPoint) -> CGPoint {
        CGPoint(x: (first.x + second.x) / 2, y: (first.y + second.y) / 2)
    }
}

// MARK: - Demo

struct BlobMorphLoaderDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo.opacity(0.7)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 12) {
                BlobMorphLoader(size: 300)

                Text("Thinking")
                    .font(.system(.title, design: .rounded, weight: .bold))
                    .foregroundStyle(.white)

                Text("Your summary is almost ready")
                    .font(.body)
                    .foregroundStyle(.white.opacity(0.75))
            }
            .padding(24)
        }
    }
}

#Preview {
    BlobMorphLoaderDemo()
}
```

## Dots Pulse Loader

Three dots that pulse in sequence, as in a typing indicator.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/DotsPulseLoader/DotsPulseLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Dots that pulse one after the other.
///
/// With Reduce Motion on, the dots stay still.
struct DotsPulseLoader: View {
    var color: Color = .indigo
    var dotCount: Int = 3
    var dotSize: CGFloat = 14

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Group {
            if reduceMotion {
                dots(activeIndex: nil)
            } else {
                PhaseAnimator(Array(0..<max(dotCount, 2))) { index in
                    dots(activeIndex: index)
                } animation: { _ in
                    .easeInOut(duration: 0.32)
                }
            }
        }
        .accessibilityElement()
        .accessibilityLabel("Loading")
    }

    private func dots(activeIndex: Int?) -> some View {
        HStack(spacing: dotSize * 0.6) {
            ForEach(0..<dotCount, id: \.self) { index in
                Circle()
                    .fill(color.gradient)
                    .frame(width: dotSize, height: dotSize)
                    .scaleEffect(scale(index: index, activeIndex: activeIndex))
                    .opacity(index == activeIndex || activeIndex == nil ? 1 : 0.4)
            }
        }
    }

    private func scale(index: Int, activeIndex: Int?) -> CGFloat {
        guard let activeIndex else { return 0.85 }
        return index == activeIndex ? 1.15 : 0.7
    }
}

// MARK: - Demo

struct DotsPulseLoaderDemo: View {
    var body: some View {
        VStack(spacing: 48) {
            DotsPulseLoader(color: .indigo, dotSize: 44)

            VStack(alignment: .leading, spacing: 10) {
                Text("Did the package arrive?")
                    .font(.body)
                    .foregroundStyle(.white)
                    .padding(.horizontal, 16)
                    .padding(.vertical, 12)
                    .background(.blue.gradient, in: .rect(cornerRadius: 20))
                    .frame(maxWidth: .infinity, alignment: .trailing)

                DotsPulseLoader(color: .secondary, dotSize: 10)
                    .padding(.horizontal, 18)
                    .padding(.vertical, 16)
                    .background(Color(.secondarySystemBackground), in: .rect(cornerRadius: 20))
            }
            .padding(.horizontal, 24)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    DotsPulseLoaderDemo()
}
```

## Orbit Loader

A loading indicator with dots that orbit a glowing center.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/OrbitLoader/OrbitLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Dots that orbit a glowing center, bunching up and spreading out as they go.
///
/// With Reduce Motion on, the dots stay still, evenly spaced around the center.
struct OrbitLoader: View {
    var color: Color = .indigo
    var dotCount: Int = 3
    var size: CGFloat = 64
    var period: TimeInterval = 1.6

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(paused: reduceMotion)) { context in
            let turns = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate / period

            ZStack {
                Circle()
                    .stroke(color.opacity(0.2), lineWidth: size * 0.02)
                    .padding(size * 0.1)

                Circle()
                    .fill(color.gradient)
                    .frame(width: size * 0.26, height: size * 0.26)
                    .shadow(color: color.opacity(0.6), radius: size * 0.1)

                ForEach(0..<dotCount, id: \.self) { index in
                    Circle()
                        .fill(color.gradient)
                        .frame(width: size * 0.16, height: size * 0.16)
                        .offset(dotOffset(index: index, turns: turns))
                }
            }
            .frame(width: size, height: size)
        }
        .accessibilityElement()
        .accessibilityLabel("Loading")
    }

    private func dotOffset(index: Int, turns: Double) -> CGSize {
        let position = turns + Double(index) / Double(max(dotCount, 1))
        let angle = (position + 0.1 * sin(position * 2 * .pi)) * 2 * .pi
        let radius = size * 0.4
        return CGSize(width: cos(angle) * radius, height: sin(angle) * radius)
    }
}

// MARK: - Demo

struct OrbitLoaderDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo.opacity(0.8)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 36) {
                OrbitLoader(color: .cyan, size: 240)

                VStack(spacing: 6) {
                    Text("Connecting")
                        .font(.system(.title, design: .rounded, weight: .bold))
                        .foregroundStyle(.white)

                    Text("Looking for nearby devices")
                        .font(.body)
                        .foregroundStyle(.white.opacity(0.75))
                }

                HStack(spacing: 32) {
                    OrbitLoader(color: .pink, dotCount: 2, size: 56)
                    OrbitLoader(color: .mint, dotCount: 4, size: 56, period: 2.4)
                    OrbitLoader(color: .orange, dotCount: 5, size: 56, period: 1.2)
                }
            }
            .padding(24)
        }
    }
}

#Preview {
    OrbitLoaderDemo()
}
```

## Skeleton Shimmer Modifier

A view modifier that turns any view into a shimmering redacted placeholder while it loads.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/SkeletonShimmerModifier/SkeletonShimmerModifier.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

extension View {
    /// Shows this view as a shimmering placeholder while `active` is true.
    ///
    /// Apply it to the content inside a card, not to the card: the shimmer masks the
    /// view, so a shadow drawn outside its bounds would be cut off.
    func skeletonShimmer(active: Bool) -> some View {
        modifier(SkeletonShimmerModifier(active: active))
    }
}

/// Redacts its content and sweeps a band of light across the placeholders.
///
/// With Reduce Motion on, the placeholders stay still and slightly dimmed.
struct SkeletonShimmerModifier: ViewModifier {
    var active: Bool
    var duration: TimeInterval = 1.4

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .redacted(reason: active ? .placeholder : [])
            .mask {
                TimelineView(.animation(paused: !active || reduceMotion)) { context in
                    mask(at: context.date)
                }
            }
            .allowsHitTesting(!active)
            .accessibilityElement(children: active ? .ignore : .contain)
            .accessibilityLabel("Loading", isEnabled: active)
    }

    private func mask(at date: Date) -> LinearGradient {
        guard active else {
            return LinearGradient(colors: [.black, .black], startPoint: .leading, endPoint: .trailing)
        }
        guard !reduceMotion else {
            let dimmed = Color.black.opacity(0.6)
            return LinearGradient(colors: [dimmed, dimmed], startPoint: .leading, endPoint: .trailing)
        }

        let progress = date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: duration) / duration
        let center = -0.5 + 2 * progress
        return LinearGradient(
            colors: [.black.opacity(0.35), .black, .black.opacity(0.35)],
            startPoint: UnitPoint(x: center - 0.5, y: 0.2),
            endPoint: UnitPoint(x: center + 0.5, y: 0.8)
        )
    }
}

// MARK: - Demo

private struct SkeletonShimmerModifierDemoRow: Identifiable {
    let id = UUID()
    let name: String
    let message: String
    let time: String
    let color: Color
}

struct SkeletonShimmerModifierDemo: View {
    @State private var isLoading = true
    @ScaledMetric(relativeTo: .headline) private var avatarSize = 46
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let rows = [
        SkeletonShimmerModifierDemoRow(name: "Lucia Martin", message: "The photos from Sunday are up", time: "9:41", color: .pink),
        SkeletonShimmerModifierDemoRow(name: "Marco Rossi", message: "Can we move the call to four?", time: "9:12", color: .orange),
        SkeletonShimmerModifierDemoRow(name: "Aiko Tanaka", message: "Sent you the final invoice", time: "8:55", color: .teal),
        SkeletonShimmerModifierDemoRow(name: "Sam Porter", message: "Boarding now, see you tonight", time: "8:20", color: .indigo),
        SkeletonShimmerModifierDemoRow(name: "Nadia Haddad", message: "Loved the new onboarding", time: "Mon", color: .purple),
        SkeletonShimmerModifierDemoRow(name: "Tom Becker", message: "Tickets are booked for Friday", time: "Mon", color: .blue),
        SkeletonShimmerModifierDemoRow(name: "Elena Costa", message: "Recipe attached, enjoy it", time: "Sun", color: .green),
        SkeletonShimmerModifierDemoRow(name: "Ravi Patel", message: "The build is green again", time: "Sun", color: .mint),
    ]

    var body: some View {
        List {
            Section {
                ForEach(rows) { row in
                    rowContent(row)
                        .skeletonShimmer(active: isLoading)
                }
            } header: {
                Text("Messages")
                    .font(.largeTitle.bold())
                    .foregroundStyle(.primary)
                    .textCase(nil)
                    .padding(.bottom, 8)
            }
        }
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(2.2))
                withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.35)) {
                    isLoading.toggle()
                }
            }
        }
    }

    private func rowContent(_ row: SkeletonShimmerModifierDemoRow) -> some View {
        HStack(spacing: 12) {
            Circle()
                .fill(isLoading ? Color(.systemGray4) : row.color)
                .frame(width: avatarSize, height: avatarSize)
                .overlay {
                    Image(systemName: "person.fill")
                        .foregroundStyle(.white)
                        .opacity(isLoading ? 0 : 1)
                }
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 4) {
                // One line each, so a row is as tall loaded as it is as a skeleton.
                Text(row.name)
                    .font(.headline)
                    .lineLimit(1)

                Text(row.message)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .lineLimit(1)
            }

            Spacer(minLength: 8)

            Text(row.time)
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding(.vertical, 4)
    }
}

#Preview {
    SkeletonShimmerModifierDemo()
}
```

## Symbol Breathe Loader

A loading indicator made of an SF Symbol that uses the breathe and rotate symbol effects.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/SymbolBreatheLoader/SymbolBreatheLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum SymbolBreatheLoaderEffect {
    case breathe
    case rotate
    case both
}

/// An SF Symbol that breathes, rotates or does both while something loads.
///
/// With Reduce Motion on, the symbol stays still.
struct SymbolBreatheLoader: View {
    var systemName: String = "sparkles"
    var effect: SymbolBreatheLoaderEffect = .breathe
    var color: Color = .indigo
    var font: Font = .largeTitle

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Image(systemName: systemName)
            .font(font)
            .symbolRenderingMode(.hierarchical)
            .foregroundStyle(color)
            .symbolEffect(.breathe, options: .repeat(.continuous), isActive: !reduceMotion && effect != .rotate)
            .symbolEffect(.rotate, options: .repeat(.continuous), isActive: !reduceMotion && effect != .breathe)
            .accessibilityLabel("Loading")
    }
}

// MARK: - Demo

struct SymbolBreatheLoaderDemo: View {
    @ScaledMetric(relativeTo: .largeTitle) private var heroSize = 130

    var body: some View {
        VStack(spacing: 48) {
            SymbolBreatheLoader(systemName: "sparkles", color: .purple, font: .system(size: heroSize))

            VStack(spacing: 6) {
                Text("Working on it")
                    .font(.system(.title, design: .rounded, weight: .bold))

                Text("Breathe, rotate or both")
                    .font(.body)
                    .foregroundStyle(.secondary)
            }

            HStack(spacing: 40) {
                SymbolBreatheLoader(systemName: "gearshape.2.fill", effect: .rotate, color: .gray)
                SymbolBreatheLoader(systemName: "arrow.trianglehead.2.clockwise", effect: .rotate, color: .blue)
                SymbolBreatheLoader(systemName: "heart.fill", color: .pink)
                SymbolBreatheLoader(systemName: "fan.fill", effect: .both, color: .teal)
            }
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    SymbolBreatheLoaderDemo()
}
```

## Wave Bars Loader

A loading indicator with bars that rise and fall like an audio equalizer.

Category: Loaders. Minimum: iOS 18.0. Path: Components/Loaders/WaveBarsLoader/WaveBarsLoader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Bars that rise and fall like an equalizer.
///
/// With Reduce Motion on, the bars hold one uneven, still shape.
struct WaveBarsLoader: View {
    var colors: [Color] = [.blue, .cyan, .mint]
    var barCount: Int = 5
    var barWidth: CGFloat = 8
    var height: CGFloat = 44
    var speed: Double = 1

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            let time = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate * speed

            HStack(alignment: .bottom, spacing: barWidth * 0.6) {
                ForEach(0..<barCount, id: \.self) { index in
                    Capsule()
                        .fill(LinearGradient(colors: colors, startPoint: .bottom, endPoint: .top))
                        .frame(width: barWidth, height: barHeight(index: index, time: time))
                }
            }
            .frame(height: height, alignment: .bottom)
        }
        .accessibilityElement()
        .accessibilityLabel("Loading")
    }

    /// Two sine waves at different speeds keep the bars from looking like a plain wave.
    private func barHeight(index: Int, time: Double) -> CGFloat {
        let position = Double(index)
        let level = 0.55 + 0.3 * sin(time * 5 + position * 0.8) + 0.15 * sin(time * 9 + position * 1.7)
        return max(barWidth, height * level)
    }
}

// MARK: - Demo

struct WaveBarsLoaderDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .blue.opacity(0.6)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 40) {
                WaveBarsLoader(barCount: 9, barWidth: 20, height: 220)

                VStack(spacing: 6) {
                    Text("Tuning in")
                        .font(.system(.title, design: .rounded, weight: .bold))
                        .foregroundStyle(.white)

                    Text("Buffering your station")
                        .font(.body)
                        .foregroundStyle(.white.opacity(0.75))
                }
            }
            .padding(24)
        }
    }
}

#Preview {
    WaveBarsLoaderDemo()
}
```

## Map Annotation Callout

Map pins with a short label that open a callout above them when tapped, while the camera moves to fit it.

Category: Maps. Minimum: iOS 18.0. Path: Components/Maps/MapAnnotationCallout/MapAnnotationCallout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import MapKit
import SwiftUI

nonisolated struct MapAnnotationCalloutItem: Identifiable, Hashable, Sendable {
    var id: String
    /// The short text on the pin, such as a price.
    var label: String
    var title: String
    var latitude: Double
    var longitude: Double

    var coordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    }
}

nonisolated enum MapAnnotationCalloutLogic {
    /// The latitude the camera centers on to show a pin together with its callout: a little north
    /// of the pin, because the callout opens above it. `span` is the latitude the map shows.
    static func centerLatitude(showing latitude: Double, span: Double, shift: Double = 0.2) -> Double {
        guard latitude.isFinite, span.isFinite else { return 0 }
        return min(max(latitude + max(span, 0) * shift, -90), 90)
    }

    /// The region that shows every item with some room around them. Nil when there are none.
    /// `smallest` keeps a single pin, or pins on one spot, from zooming all the way in.
    static func region(fitting items: [MapAnnotationCalloutItem], room: Double = 1.6, smallest: Double = 0.01) -> MKCoordinateRegion? {
        let latitudes = items.map(\.latitude).filter(\.isFinite)
        let longitudes = items.map(\.longitude).filter(\.isFinite)
        guard let south = latitudes.min(), let north = latitudes.max(),
              let west = longitudes.min(), let east = longitudes.max() else { return nil }

        return MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: (south + north) / 2, longitude: (west + east) / 2),
            span: MKCoordinateSpan(
                latitudeDelta: min(max((north - south) * room, smallest), 180),
                longitudeDelta: min(max((east - west) * room, smallest), 360)
            )
        )
    }
}

/// A map of pins with a short label each. Tap one and it turns dark and opens a callout above
/// it with whatever you want to show, while the camera moves to fit both. Tap the map to close it.
///
/// VoiceOver reads each pin by its title and label. With Reduce Motion on, the callout fades in
/// and the camera does not fly.
struct MapAnnotationCallout<Callout: View>: View {
    let items: [MapAnnotationCalloutItem]
    @Binding var selection: MapAnnotationCalloutItem.ID?
    var calloutWidth: CGFloat = 220
    @ViewBuilder var callout: (MapAnnotationCalloutItem) -> Callout

    private let shadow = Color.black.opacity(0.2)

    @State private var position = MapCameraPosition.automatic
    @State private var visibleSpan = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Map(position: $position, selection: $selection) {
            ForEach(items) { item in
                Annotation(item.title, coordinate: item.coordinate, anchor: .bottom) {
                    pin(item)
                }
                .annotationTitles(.hidden)
                .tag(item.id)
            }
        }
        .mapStyle(.standard(pointsOfInterest: .excludingAll))
        .onMapCameraChange { context in
            visibleSpan = context.region.span
        }
        // The map starts on a region of its own, so the span is known from the start. With the
        // automatic camera it is not, and the first pin tapped also zoomed the map.
        .onAppear {
            guard let region = MapAnnotationCalloutLogic.region(fitting: items) else { return }
            position = .region(region)
            visibleSpan = region.span
        }
        .onChange(of: selection) { _, id in
            guard let item = items.first(where: { $0.id == id }) else { return }
            let latitude = MapAnnotationCalloutLogic.centerLatitude(showing: item.latitude, span: visibleSpan.latitudeDelta)
            let center = CLLocationCoordinate2D(latitude: latitude, longitude: item.longitude)
            withAnimation(reduceMotion ? nil : .smooth(duration: 0.6)) {
                position = .region(MKCoordinateRegion(center: center, span: visibleSpan))
            }
        }
    }

    private func pin(_ item: MapAnnotationCalloutItem) -> some View {
        let isSelected = item.id == selection

        return VStack(spacing: 6) {
            if isSelected {
                callout(item)
                    .frame(width: calloutWidth, alignment: .leading)
                    .padding(12)
                    .background(.regularMaterial, in: .rect(cornerRadius: 18))
                    .shadow(color: shadow, radius: 10, y: 4)
                    .transition(reduceMotion ? .opacity : .scale(scale: 0.6, anchor: .bottom).combined(with: .opacity))
            }

            Text(item.label)
                .font(.subheadline.weight(.bold))
                .padding(.horizontal, 10)
                .padding(.vertical, 6)
                .foregroundStyle(isSelected ? Color(.systemBackground) : Color.primary)
                .background(isSelected ? Color.primary : Color(.systemBackground), in: .capsule)
                .shadow(color: shadow, radius: 3, y: 1)
        }
        // Only opening is animated. The annotation shrinks at once when its callout goes, and a
        // callout still fading out would be drawn out of place.
        .animation(isSelected ? (reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.4, bounce: 0.3)) : nil, value: isSelected)
        .accessibilityElement(children: isSelected ? .combine : .ignore)
        .accessibilityLabel("\(item.title), \(item.label)")
        .accessibilityAddTraits(isSelected ? [.isButton, .isSelected] : .isButton)
    }
}

// MARK: - Demo

struct MapAnnotationCalloutDemo: View {
    private let stays = [
        MapAnnotationCalloutItem(id: "loft", label: "$120", title: "Rooftop Loft", latitude: 38.7139, longitude: -9.1389),
        MapAnnotationCalloutItem(id: "studio", label: "$86", title: "Tiled Studio", latitude: 38.7109, longitude: -9.1422),
        MapAnnotationCalloutItem(id: "house", label: "$210", title: "Garden House", latitude: 38.7163, longitude: -9.1432),
        MapAnnotationCalloutItem(id: "room", label: "$64", title: "Sunny Room", latitude: 38.7118, longitude: -9.1331),
        MapAnnotationCalloutItem(id: "flat", label: "$145", title: "River View Flat", latitude: 38.7083, longitude: -9.1368),
        MapAnnotationCalloutItem(id: "attic", label: "$98", title: "Quiet Attic", latitude: 38.7157, longitude: -9.1338),
    ]

    @State private var selection: String?

    var body: some View {
        MapAnnotationCallout(items: stays, selection: $selection) { stay in
            VStack(alignment: .leading, spacing: 6) {
                LinearGradient(colors: [.orange, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                    .frame(height: 84)
                    .overlay {
                        Image(systemName: "house.fill")
                            .font(.title)
                            .foregroundStyle(.white.opacity(0.9))
                    }
                    .clipShape(.rect(cornerRadius: 10))
                    .accessibilityHidden(true)

                Text(stay.title)
                    .font(.headline)
                Label("4.8 · 2 guests", systemImage: "star.fill")
                    .font(.footnote)
                    .foregroundStyle(.secondary)
                Text("\(stay.label) a night")
                    .font(.subheadline.weight(.semibold))
            }
        }
    }
}

#Preview {
    MapAnnotationCalloutDemo()
}
```

## Map Cluster Annotations

A map where places that are close together are drawn as one bubble with their count, which splits into its places as the map zooms in.

Category: Maps. Minimum: iOS 18.0. Path: Components/Maps/MapClusterAnnotations/MapClusterAnnotations.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import MapKit
import SwiftUI

nonisolated struct MapClusterAnnotationsPlace: Identifiable, Hashable, Sendable {
    var id: String
    var name: String
    var systemImage: String = "mappin"
    var latitude: Double
    var longitude: Double
}

nonisolated enum MapClusterAnnotationsLogic {
    /// Places that fall in the same cell of a grid over the map, drawn as one.
    struct Cluster: Identifiable, Equatable, Sendable {
        let places: [MapClusterAnnotationsPlace]
        let latitude: Double
        let longitude: Double

        var id: String { places.map(\.id).joined(separator: "|") }
    }

    /// Groups the places by the cell they fall in. A cell is one of `divisions` across what
    /// the map shows, so the groups split as the map zooms in and join as it zooms out.
    /// A group sits at the middle of its places, and the groups keep the order of the places.
    static func clusters(
        of places: [MapClusterAnnotationsPlace],
        latitudeDelta: Double,
        longitudeDelta: Double,
        divisions: Int = 6
    ) -> [Cluster] {
        let divisions = Double(max(divisions, 1))
        let cellLatitude = latitudeDelta / divisions
        let cellLongitude = longitudeDelta / divisions
        guard cellLatitude.isFinite, cellLongitude.isFinite, cellLatitude > 0, cellLongitude > 0 else {
            return places.map { Cluster(places: [$0], latitude: $0.latitude, longitude: $0.longitude) }
        }

        var order: [String] = []
        var cells: [String: [MapClusterAnnotationsPlace]] = [:]
        for place in places where place.latitude.isFinite && place.longitude.isFinite {
            let key = "\(Int((place.latitude / cellLatitude).rounded(.down))):\(Int((place.longitude / cellLongitude).rounded(.down)))"
            if cells[key] == nil { order.append(key) }
            cells[key, default: []].append(place)
        }

        return order.compactMap { key in
            guard let members = cells[key], !members.isEmpty else { return nil }
            let count = Double(members.count)
            return Cluster(
                places: members,
                latitude: members.map(\.latitude).reduce(0, +) / count,
                longitude: members.map(\.longitude).reduce(0, +) / count
            )
        }
    }

    /// The region that shows every place of a group with room around them.
    static func region(fitting places: [MapClusterAnnotationsPlace], room: Double = 1.8, smallest: Double = 0.004) -> MKCoordinateRegion? {
        let latitudes = places.map(\.latitude).filter(\.isFinite)
        let longitudes = places.map(\.longitude).filter(\.isFinite)
        guard let south = latitudes.min(), let north = latitudes.max(),
              let west = longitudes.min(), let east = longitudes.max() else { return nil }

        return MKCoordinateRegion(
            center: CLLocationCoordinate2D(latitude: (south + north) / 2, longitude: (west + east) / 2),
            span: MKCoordinateSpan(
                latitudeDelta: min(max((north - south) * room, smallest), 180),
                longitudeDelta: min(max((east - west) * room, smallest), 360)
            )
        )
    }
}

/// A map where places that are close together are drawn as one bubble with their count.
/// Zooming in splits a bubble into its places, and a tap on it flies there.
///
/// A tap on a place sets `selection` and shows its name. With Reduce Motion on, the camera
/// does not fly.
struct MapClusterAnnotations: View {
    let places: [MapClusterAnnotationsPlace]
    @Binding var selection: MapClusterAnnotationsPlace.ID?
    var tint: Color = .indigo

    @State private var position = MapCameraPosition.automatic
    @State private var span = MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
    @ScaledMetric(relativeTo: .body) private var pinSize = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let shadow = Color.black.opacity(0.25)

    private var clusters: [MapClusterAnnotationsLogic.Cluster] {
        MapClusterAnnotationsLogic.clusters(of: places, latitudeDelta: span.latitudeDelta, longitudeDelta: span.longitudeDelta)
    }

    var body: some View {
        Map(position: $position) {
            ForEach(clusters) { cluster in
                Annotation(
                    cluster.places.count == 1 ? cluster.places[0].name : "",
                    coordinate: CLLocationCoordinate2D(latitude: cluster.latitude, longitude: cluster.longitude)
                ) {
                    if cluster.places.count == 1 {
                        pin(cluster.places[0])
                    } else {
                        bubble(cluster)
                    }
                }
                .annotationTitles(.hidden)
            }
        }
        .mapStyle(.standard(pointsOfInterest: .excludingAll))
        // The groups are made again when the map comes to rest, not on every frame of a pinch.
        .onMapCameraChange(frequency: .onEnd) { context in
            withAnimation(reduceMotion ? nil : .snappy(duration: 0.3)) {
                span = context.region.span
            }
        }
        .onAppear {
            guard let region = MapClusterAnnotationsLogic.region(fitting: places, room: 1.3) else { return }
            position = .region(region)
            span = region.span
        }
    }

    private func pin(_ place: MapClusterAnnotationsPlace) -> some View {
        let isSelected = selection == place.id

        return Button {
            withAnimation(reduceMotion ? nil : .snappy(duration: 0.25)) {
                selection = isSelected ? nil : place.id
            }
        } label: {
            VStack(spacing: 4) {
                Image(systemName: place.systemImage)
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(MapClusterAnnotationsContrastingForeground(background: isSelected ? tint : .white))
                    .frame(width: pinSize * 0.75, height: pinSize * 0.75)
                    .background(isSelected ? tint : .white, in: .circle)
                    .shadow(color: shadow, radius: 5, y: 2)

                if isSelected {
                    Text(place.name)
                        .font(.caption.weight(.semibold))
                        .padding(.horizontal, 8)
                        .padding(.vertical, 4)
                        .background(.regularMaterial, in: .capsule)
                        .fixedSize()
                        .transition(.opacity)
                }
            }
            .frame(minWidth: pinSize, minHeight: pinSize, alignment: .top)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(place.name)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
        .transition(.scale.combined(with: .opacity))
    }

    private func bubble(_ cluster: MapClusterAnnotationsLogic.Cluster) -> some View {
        Button {
            guard let region = MapClusterAnnotationsLogic.region(fitting: cluster.places) else { return }
            withAnimation(reduceMotion ? nil : .smooth(duration: 0.7)) {
                position = .region(region)
            }
        } label: {
            Text(cluster.places.count, format: .number)
                .font(.headline)
                .monospacedDigit()
                .foregroundStyle(MapClusterAnnotationsContrastingForeground(background: tint))
                .frame(width: pinSize, height: pinSize)
                .background(tint.gradient, in: .circle)
                .overlay { Circle().stroke(.white, lineWidth: 3) }
                .shadow(color: shadow, radius: 6, y: 3)
                .contentShape(.circle)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(Text("^[\(cluster.places.count) place](inflect: true)"))
        .accessibilityHint("Zooms in to show them")
        .transition(.scale.combined(with: .opacity))
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct MapClusterAnnotationsContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct MapClusterAnnotationsDemo: View {
    private let places = [
        MapClusterAnnotationsPlace(id: "prado", name: "Prado Museum", systemImage: "building.columns.fill", latitude: 40.4138, longitude: -3.6921),
        MapClusterAnnotationsPlace(id: "thyssen", name: "Thyssen Museum", systemImage: "building.columns.fill", latitude: 40.4160, longitude: -3.6949),
        MapClusterAnnotationsPlace(id: "retiro", name: "Retiro Park", systemImage: "tree.fill", latitude: 40.4153, longitude: -3.6845),
        MapClusterAnnotationsPlace(id: "sol", name: "Puerta del Sol", systemImage: "star.fill", latitude: 40.4169, longitude: -3.7035),
        MapClusterAnnotationsPlace(id: "mayor", name: "Plaza Mayor", systemImage: "star.fill", latitude: 40.4155, longitude: -3.7074),
        MapClusterAnnotationsPlace(id: "palace", name: "Royal Palace", systemImage: "crown.fill", latitude: 40.4180, longitude: -3.7143),
        MapClusterAnnotationsPlace(id: "debod", name: "Temple of Debod", systemImage: "sun.horizon.fill", latitude: 40.4240, longitude: -3.7178),
        MapClusterAnnotationsPlace(id: "bernabeu", name: "Bernabéu Stadium", systemImage: "sportscourt.fill", latitude: 40.4531, longitude: -3.6883),
        MapClusterAnnotationsPlace(id: "matadero", name: "Matadero", systemImage: "theatermasks.fill", latitude: 40.3917, longitude: -3.6976),
    ]

    @State private var selection: String?

    var body: some View {
        MapClusterAnnotations(places: places, selection: $selection)
            .safeAreaInset(edge: .top) {
                VStack(spacing: 2) {
                    Text("Madrid in a day")
                        .font(.headline)
                    Text(selection.flatMap { id in places.first { $0.id == id }?.name } ?? "Tap a bubble to zoom in")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                        .contentTransition(.opacity)
                }
                .padding(.horizontal, 20)
                .padding(.vertical, 10)
                .background(.regularMaterial, in: .capsule)
                .padding(.top, 8)
            }
    }
}

#Preview {
    MapClusterAnnotationsDemo()
}
```

## Map Route Tracker

A route on a map with a marker that travels along it, the part done in solid and the rest dotted, like an order on its way.

Category: Maps. Minimum: iOS 18.0. Path: Components/Maps/MapRouteTracker/MapRouteTracker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import MapKit
import SwiftUI

nonisolated struct MapRouteTrackerPoint: Hashable, Sendable {
    var latitude: Double
    var longitude: Double

    var coordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    }
}

nonisolated enum MapRouteTrackerMath {
    static let earthRadius = 6_371_000.0

    /// The meters between two points, over the surface of the Earth.
    static func distance(from start: MapRouteTrackerPoint, to end: MapRouteTrackerPoint) -> Double {
        let startLatitude = start.latitude * .pi / 180
        let endLatitude = end.latitude * .pi / 180
        let latitude = endLatitude - startLatitude
        let longitude = (end.longitude - start.longitude) * .pi / 180
        let chord = sin(latitude / 2) * sin(latitude / 2) + cos(startLatitude) * cos(endLatitude) * sin(longitude / 2) * sin(longitude / 2)
        return 2 * earthRadius * asin(min(sqrt(chord), 1))
    }

    /// The meters from the start of the route to each of its points.
    static func distances(along route: [MapRouteTrackerPoint]) -> [Double] {
        var total = 0.0
        return route.indices.map { index in
            if index > 0 { total += distance(from: route[index - 1], to: route[index]) }
            return total
        }
    }

    /// The point that is `progress` of the way along the route, from 0 at its start to 1 at its end.
    static func point(at progress: Double, on route: [MapRouteTrackerPoint]) -> MapRouteTrackerPoint? {
        split(route, at: progress).done.last
    }

    /// The route cut where `progress` falls: what is done, and what is left. Both have the cut point.
    static func split(_ route: [MapRouteTrackerPoint], at progress: Double) -> (done: [MapRouteTrackerPoint], left: [MapRouteTrackerPoint]) {
        guard let first = route.first else { return ([], []) }
        let distances = distances(along: route)
        let target = (progress.isFinite ? min(max(progress, 0), 1) : 0) * (distances.last ?? 0)
        // The first point the target has not passed yet. The cut is between it and the one before.
        guard let next = distances.indices.dropFirst().first(where: { distances[$0] >= target }) else {
            return ([first], route)
        }

        let length = distances[next] - distances[next - 1]
        let fraction = length > 0 ? (target - distances[next - 1]) / length : 0
        let cut = MapRouteTrackerPoint(
            latitude: route[next - 1].latitude + (route[next].latitude - route[next - 1].latitude) * fraction,
            longitude: route[next - 1].longitude + (route[next].longitude - route[next - 1].longitude) * fraction
        )
        return (Array(route[..<next]) + [cut], [cut] + Array(route[next...]))
    }
}

/// A route on a map with a marker that travels along it, like an order on its way: the part
/// already done is solid, the rest is dotted and the camera can follow the marker.
///
/// Set `progress` from 0 to 1 as the trip advances. The route is yours: take it from
/// `MKDirections` or from your own data.
struct MapRouteTracker: View {
    let route: [MapRouteTrackerPoint]
    /// How much of the route is done, from 0 to 1.
    var progress: Double
    var symbol = "bicycle"
    var color = Color.blue
    var markerTitle = "Courier"
    var destinationTitle = "Destination"
    /// Whether the camera travels with the marker. Otherwise it shows the whole route.
    var followsMarker = true
    /// How far above the marker the camera stays while it follows it, in meters.
    var followDistance = 2200.0

    private let lineWidth: CGFloat = 6

    @State private var position = MapCameraPosition.automatic
    @ScaledMetric(relativeTo: .body) private var markerSize = 38.0

    var body: some View {
        let parts = MapRouteTrackerMath.split(route, at: progress)

        Map(position: $position) {
            if parts.left.count > 1 {
                MapPolyline(coordinates: parts.left.map(\.coordinate))
                    .stroke(color.opacity(0.45), style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round, dash: [1, lineWidth * 2]))
            }
            if parts.done.count > 1 {
                MapPolyline(coordinates: parts.done.map(\.coordinate))
                    .stroke(color, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round))
            }
            if let destination = route.last {
                Marker(destinationTitle, systemImage: "flag.checkered", coordinate: destination.coordinate)
                    .tint(color)
            }
            if let current = parts.done.last {
                Annotation(markerTitle, coordinate: current.coordinate) {
                    Image(systemName: symbol)
                        .font(.body.weight(.semibold))
                        .foregroundStyle(color)
                        .frame(width: markerSize, height: markerSize)
                        .background(.white, in: .circle)
                        .overlay { Circle().strokeBorder(color, lineWidth: 2) }
                        .shadow(color: .black.opacity(0.25), radius: 4, y: 2)
                        .accessibilityElement()
                        .accessibilityLabel(markerTitle)
                        .accessibilityValue(min(max(progress, 0), 1).formatted(.percent.precision(.fractionLength(0))))
                }
                .annotationTitles(.hidden)
            }
        }
        .mapStyle(.standard(pointsOfInterest: .excludingAll))
        .onChange(of: progress, initial: true) { follow() }
        .onChange(of: followsMarker) { follow() }
    }

    private func follow() {
        guard followsMarker, let current = MapRouteTrackerMath.point(at: progress, on: route) else {
            if !followsMarker { position = .automatic }
            return
        }
        position = .camera(MapCamera(centerCoordinate: current.coordinate, distance: followDistance))
    }
}

// MARK: - Demo

struct MapRouteTrackerDemo: View {
    private let route = [
        MapRouteTrackerPoint(latitude: 38.7158, longitude: -9.1420),
        MapRouteTrackerPoint(latitude: 38.7175, longitude: -9.1433),
        MapRouteTrackerPoint(latitude: 38.7193, longitude: -9.1448),
        MapRouteTrackerPoint(latitude: 38.7212, longitude: -9.1464),
        MapRouteTrackerPoint(latitude: 38.7232, longitude: -9.1481),
        MapRouteTrackerPoint(latitude: 38.7253, longitude: -9.1500),
    ]
    private let tripSeconds = 12.0
    private let tripMinutes = 9.0

    @State private var progress = 0.0
    @State private var isMoving = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        MapRouteTracker(route: route, progress: progress, color: .indigo, followsMarker: !reduceMotion)
            .safeAreaInset(edge: .bottom) {
                card
            }
            .task(id: isMoving) {
                guard isMoving else { return }
                let clock = ContinuousClock()
                var last = clock.now
                while !Task.isCancelled, progress < 1 {
                    try? await Task.sleep(for: .milliseconds(33))
                    let now = clock.now
                    progress = min(progress + (now - last) / .seconds(tripSeconds), 1)
                    last = now
                }
                if progress >= 1 { isMoving = false }
            }
    }

    private var card: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack {
                VStack(alignment: .leading, spacing: 2) {
                    Text(progress < 1 ? "Arriving in \(Int(((1 - progress) * tripMinutes).rounded(.up))) min" : "Your order is here")
                        .font(.headline)
                        .contentTransition(.numericText())
                    Text(progress < 1 ? "Alex is bringing your order" : "Delivered by Alex")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                Spacer()
                Button(progress < 1 ? (isMoving ? "Pause" : "Resume") : "Restart", systemImage: progress < 1 ? (isMoving ? "pause.fill" : "play.fill") : "arrow.counterclockwise") {
                    if progress >= 1 {
                        progress = 0
                        isMoving = true
                    } else {
                        isMoving.toggle()
                    }
                }
                .labelStyle(.iconOnly)
                .buttonStyle(.bordered)
                .buttonBorderShape(.circle)
                // The regular size of an icon in a circle is too small to hit.
                .controlSize(.large)
            }

            ProgressView(value: progress)
                .accessibilityLabel("Trip progress")
        }
        .padding(18)
        .background(.regularMaterial, in: .rect(cornerRadius: 22))
        .padding(.horizontal, 16)
        .padding(.bottom, 8)
        .tint(.indigo)
    }
}

#Preview {
    MapRouteTrackerDemo()
}
```

## Map Search Sheet

A map with a sheet of places that rests at the bottom, filters as you type and flies to the place you choose.

Category: Maps. Minimum: iOS 18.0. Path: Components/Maps/MapSearchSheet/MapSearchSheet.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import MapKit
import SwiftUI

nonisolated struct MapSearchSheetPlace: Identifiable, Hashable, Sendable {
    var id: String
    var name: String
    var kind: String
    var symbol: String
    var latitude: Double
    var longitude: Double

    var coordinate: CLLocationCoordinate2D {
        CLLocationCoordinate2D(latitude: latitude, longitude: longitude)
    }
}

nonisolated enum MapSearchSheetLogic {
    /// The places whose name or kind has every word of `query`, whatever its case and accents.
    /// An empty query keeps them all.
    static func matches(_ places: [MapSearchSheetPlace], query: String) -> [MapSearchSheetPlace] {
        let words = folded(query).split(separator: " ")
        guard !words.isEmpty else { return places }
        return places.filter { place in
            let text = folded("\(place.name) \(place.kind)")
            return words.allSatisfy { text.contains($0) }
        }
    }

    private static func folded(_ text: String) -> String {
        text.folding(options: [.caseInsensitive, .diacriticInsensitive], locale: nil)
    }
}

/// A map with a sheet of places that never goes away, like the one in Maps: it rests at the
/// bottom, at half height or full, and the map stays usable behind it.
///
/// Typing filters the list and the markers. Choosing a place, in the list or on the map, flies
/// the camera to it. The places are yours: fill them from `MKLocalSearch` or from your own data.
struct MapSearchSheet: View {
    let places: [MapSearchSheetPlace]
    var prompt: LocalizedStringResource = "Search places"
    /// How far above a chosen place the camera stops, in meters.
    var closeUpDistance = 1500.0

    private static let restingHeight: CGFloat = 76
    private static let resting = PresentationDetent.height(restingHeight)

    @State private var position = MapCameraPosition.automatic
    @State private var selection: MapSearchSheetPlace.ID?
    @State private var query = ""
    @State private var detent = PresentationDetent.medium
    @State private var isSheetPresented = false
    @State private var mapHeight: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var shown: [MapSearchSheetPlace] {
        MapSearchSheetLogic.matches(places, query: query)
    }

    var body: some View {
        Map(position: $position, selection: $selection) {
            ForEach(shown) { place in
                Marker(place.name, systemImage: place.symbol, coordinate: place.coordinate)
                    .tag(place.id)
            }
        }
        .mapStyle(.standard(pointsOfInterest: .excludingAll))
        // The whole height, safe area included: the padding below changes the safe area, and a
        // height that changed with it would never settle.
        .onGeometryChange(for: CGFloat.self) { proxy in
            (proxy.size.height + proxy.safeAreaInsets.top + proxy.safeAreaInsets.bottom).rounded()
        } action: { mapHeight = $0 }
        // Keeps what the map centers on, and its legal label, in the part the sheet leaves free.
        .safeAreaPadding(.bottom, detent == Self.resting ? Self.restingHeight : mapHeight / 2)
        .onChange(of: selection) { _, id in
            guard let place = places.first(where: { $0.id == id }) else { return }
            withAnimation(reduceMotion ? nil : .smooth(duration: 0.8)) {
                position = .camera(MapCamera(centerCoordinate: place.coordinate, distance: closeUpDistance))
            }
        }
        .onChange(of: query) {
            selection = nil
            withAnimation(reduceMotion ? nil : .smooth) { position = .automatic }
        }
        .sheet(isPresented: $isSheetPresented) {
            MapSearchSheetPanel(places: shown, prompt: prompt, query: $query, selection: $selection, detent: $detent)
                .presentationDetents([Self.resting, .medium, .large], selection: $detent)
                .presentationBackgroundInteraction(.enabled(upThrough: .medium))
                .presentationDragIndicator(.visible)
                .interactiveDismissDisabled()
        }
        .onAppear { isSheetPresented = true }
        .onDisappear { isSheetPresented = false }
    }
}

/// What the sheet shows: the search field and the places. It is a view of its own because the
/// focus of a field in a sheet has to be kept inside the sheet.
private struct MapSearchSheetPanel: View {
    let places: [MapSearchSheetPlace]
    let prompt: LocalizedStringResource
    @Binding var query: String
    @Binding var selection: MapSearchSheetPlace.ID?
    @Binding var detent: PresentationDetent

    @FocusState private var isSearching: Bool

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 8) {
                Image(systemName: "magnifyingglass")
                    .foregroundStyle(.secondary)
                    .accessibilityHidden(true)

                TextField(text: $query) { Text(prompt) }
                    .focused($isSearching)
                    .submitLabel(.search)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()

                if !query.isEmpty {
                    Button {
                        query = ""
                    } label: {
                        // The icon is too small to hit. The padding widens what answers to a
                        // touch, and the same padding taken back keeps the field as it was.
                        Label("Clear", systemImage: "xmark.circle.fill")
                            .padding(14)
                            .contentShape(.rect)
                            .padding(-14)
                    }
                    .labelStyle(.iconOnly)
                    .foregroundStyle(.secondary)
                    .buttonStyle(.plain)
                }
            }
            .padding(10)
            .background(.fill.tertiary, in: .rect(cornerRadius: 12))
            .padding(.horizontal, 16)
            .padding(.top, 22)
            .padding(.bottom, 12)

            if places.isEmpty {
                ContentUnavailableView.search(text: query)
            } else {
                List(places) { place in
                    Button {
                        isSearching = false
                        selection = place.id
                        detent = .medium
                    } label: {
                        row(place)
                    }
                    .buttonStyle(.plain)
                    .listRowBackground(place.id == selection ? Color.accentColor.opacity(0.12) : Color.clear)
                    .accessibilityAddTraits(place.id == selection ? .isSelected : [])
                }
                .listStyle(.plain)
                .scrollContentBackground(.hidden)
            }
        }
        .frame(maxHeight: .infinity, alignment: .top)
        .onChange(of: isSearching) { _, searching in
            if searching { detent = .large }
        }
    }

    private func row(_ place: MapSearchSheetPlace) -> some View {
        HStack(spacing: 12) {
            Image(systemName: place.symbol)
                .font(.body.weight(.semibold))
                .foregroundStyle(.white)
                .frame(width: 36, height: 36)
                .background(.tint, in: .circle)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text(place.name)
                    .font(.headline)
                Text(place.kind)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer(minLength: 0)
        }
        .contentShape(.rect)
        .accessibilityElement(children: .combine)
    }
}

// MARK: - Demo

struct MapSearchSheetDemo: View {
    private let places = [
        MapSearchSheetPlace(id: "coffee", name: "Harbor Coffee", kind: "Café", symbol: "cup.and.saucer.fill", latitude: 38.7109, longitude: -9.1422),
        MapSearchSheetPlace(id: "bakery", name: "Blue Door Bakery", kind: "Bakery", symbol: "birthday.cake.fill", latitude: 38.7139, longitude: -9.1389),
        MapSearchSheetPlace(id: "books", name: "Old Town Books", kind: "Bookshop", symbol: "book.fill", latitude: 38.7118, longitude: -9.1331),
        MapSearchSheetPlace(id: "park", name: "Riverside Garden", kind: "Park", symbol: "tree.fill", latitude: 38.7076, longitude: -9.1362),
        MapSearchSheetPlace(id: "market", name: "Corner Market", kind: "Grocery", symbol: "cart.fill", latitude: 38.7163, longitude: -9.1432),
        MapSearchSheetPlace(id: "museum", name: "Tile Museum Café", kind: "Café", symbol: "cup.and.saucer.fill", latitude: 38.7157, longitude: -9.1338),
        MapSearchSheetPlace(id: "diner", name: "Tram Stop Diner", kind: "Restaurant", symbol: "fork.knife", latitude: 38.7095, longitude: -9.1301),
    ]

    var body: some View {
        MapSearchSheet(places: places)
            .tint(.indigo)
    }
}

#Preview {
    MapSearchSheetDemo()
}
```

## Audio Player Card

A podcast-style player card with artwork, a scrubber, skip buttons and a play and pause toggle.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/AudioPlayerCard/AudioPlayerCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A podcast-style player card. It shows state and reports changes: wire it to your own player.
///
/// Pass any view as the artwork, usually `Image("cover").resizable().scaledToFill()`.
struct AudioPlayerCard<Artwork: View>: View {
    let title: String
    let subtitle: String
    let duration: TimeInterval
    @Binding var currentTime: TimeInterval
    @Binding var isPlaying: Bool
    /// Seconds per skip. Matching SF Symbols exist for 5, 10, 15, 30, 45, 60, 75 and 90.
    var skipInterval = 15
    /// Called with `true` when a scrub starts and `false` when it ends.
    var onScrubbingChanged: (Bool) -> Void = { _ in }
    @ViewBuilder var artwork: () -> Artwork

    @ScaledMetric(relativeTo: .title) private var artworkSize = 84.0
    @ScaledMetric(relativeTo: .largeTitle) private var playSize = 62.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var safeDuration: TimeInterval { duration.isFinite ? min(max(duration, 0), 360_000) : 0 }
    private var position: TimeInterval { currentTime.isFinite ? min(max(currentTime, 0), safeDuration) : 0 }

    var body: some View {
        VStack(spacing: 18) {
            HStack(spacing: 14) {
                artwork()
                    .frame(width: artworkSize, height: artworkSize)
                    .clipShape(.rect(cornerRadius: 18))
                    .accessibilityHidden(true)

                VStack(alignment: .leading, spacing: 4) {
                    Text(title).font(.headline)
                    Text(subtitle).font(.subheadline).foregroundStyle(.secondary)
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            }

            VStack(spacing: 4) {
                Slider(
                    value: Binding(get: { position }, set: { currentTime = $0 }),
                    in: 0...max(safeDuration, 1),
                    onEditingChanged: onScrubbingChanged
                )
                .disabled(safeDuration == 0)
                .accessibilityLabel("Playback position")
                .accessibilityValue("\(timeText(position)) of \(timeText(safeDuration))")

                HStack {
                    Text(timeText(position))
                    Spacer()
                    Text("-" + timeText(safeDuration - position))
                }
                .font(.caption.monospacedDigit())
                .foregroundStyle(.secondary)
                .accessibilityHidden(true)
            }

            HStack(spacing: 36) {
                skipButton(forward: false)

                Button {
                    withAnimation(reduceMotion ? nil : .snappy) { isPlaying.toggle() }
                } label: {
                    Image(systemName: isPlaying ? "pause.fill" : "play.fill")
                        .font(.title)
                        .contentTransition(reduceMotion ? .identity : .symbolEffect(.replace))
                        .foregroundStyle(.background)
                        .frame(width: playSize, height: playSize)
                        .background(.primary, in: .circle)
                }
                .accessibilityLabel(isPlaying ? "Pause" : "Play")

                skipButton(forward: true)
            }
            .buttonStyle(.plain)
            .sensoryFeedback(.impact(weight: .light), trigger: isPlaying)
        }
        .padding(20)
        .background(.regularMaterial, in: .rect(cornerRadius: 28))
    }

    private func skipButton(forward: Bool) -> some View {
        let base = forward ? "goforward" : "gobackward"
        let hasNumberedSymbol = [5, 10, 15, 30, 45, 60, 75, 90].contains(skipInterval)
        return Button {
            currentTime = min(max(position + Double(skipInterval) * (forward ? 1 : -1), 0), safeDuration)
        } label: {
            Image(systemName: hasNumberedSymbol ? "\(base).\(skipInterval)" : base)
                .font(.title2)
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(.rect)
        }
        .disabled(safeDuration == 0)
        .accessibilityLabel(forward ? "Skip forward \(skipInterval) seconds" : "Skip back \(skipInterval) seconds")
    }

    private func timeText(_ seconds: TimeInterval) -> String {
        Duration.seconds(max(seconds, 0)).formatted(.time(pattern: .minuteSecond))
    }
}

// MARK: - Demo

struct AudioPlayerCardDemo: View {
    private let duration: TimeInterval = 96

    @State private var currentTime: TimeInterval = 18
    @State private var isPlaying = false
    @State private var isScrubbing = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            ViewThatFits(in: .vertical) {
                card
                ScrollView { card }
            }
        }
        .task(id: isPlaying) {
            guard isPlaying else { return }
            // Play at the end starts again, as a player does.
            if currentTime >= duration { currentTime = 0 }
            while currentTime < duration {
                try? await Task.sleep(for: .milliseconds(250))
                guard !Task.isCancelled else { return }
                if !isScrubbing { currentTime += 0.25 }
            }
            isPlaying = false
        }
    }

    private var card: some View {
        AudioPlayerCard(
            title: "Small Screens, Big Ideas",
            subtitle: "Episode 12 · Design Notes",
            duration: duration,
            currentTime: $currentTime,
            isPlaying: $isPlaying,
            onScrubbingChanged: { isScrubbing = $0 }
        ) {
            LinearGradient(colors: [.orange, .pink], startPoint: .top, endPoint: .bottom)
                .overlay {
                    Image(systemName: "mic.fill")
                        .font(.largeTitle)
                        .foregroundStyle(.white)
                }
        }
        .padding(20)
    }
}

#Preview {
    AudioPlayerCardDemo()
}
```

## Double Tap Seek Overlay

Double tapping the left or right half of a video skips back or forward with a ripple and a seconds label.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/DoubleTapSeekOverlay/DoubleTapSeekOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum DoubleTapSeekOverlaySide: Sendable {
    case backward, forward
}

struct DoubleTapSeekOverlayRequest: Equatable {
    let id = UUID()
    let side: DoubleTapSeekOverlaySide
}

/// Adds up repeated double taps on one side, like "+10 s" then "+20 s".
struct DoubleTapSeekOverlayTally: Equatable {
    private(set) var side: DoubleTapSeekOverlaySide?
    private(set) var seconds = 0.0

    static func side(forX x: CGFloat, width: CGFloat) -> DoubleTapSeekOverlaySide {
        x < width / 2 ? .backward : .forward
    }

    mutating func record(_ newSide: DoubleTapSeekOverlaySide, interval: Double) {
        seconds = side == newSide ? seconds + interval : interval
        side = newSide
    }

    mutating func reset() {
        self = DoubleTapSeekOverlayTally()
    }
}

/// Double tap the left or right half of a video to skip back or forward.
///
/// `onSeek` receives the seconds to move, negative when going back. Put buttons in `controls`,
/// which sits above the seek gesture: a double tap on one runs it and does not seek, while one
/// left inside `video` would do both. VoiceOver users get the same skips as named actions.
/// With Reduce Motion on, the ripple is left out.
struct DoubleTapSeekOverlay<Video: View, Controls: View>: View {
    var interval = 10.0
    let onSeek: (Double) -> Void
    /// Skips without a touch, for demos. Each new value is one skip.
    var programmaticSeek: DoubleTapSeekOverlayRequest? = nil
    @ViewBuilder var video: () -> Video
    @ViewBuilder var controls: () -> Controls

    @State private var tally = DoubleTapSeekOverlayTally()
    @State private var tapCount = 0
    @State private var tapLocation = CGPoint.zero
    @State private var videoSize = CGSize.zero
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private var animation: Animation? { reduceMotion ? nil : .easeOut(duration: 0.2) }
    private var intervalText: String { interval.formatted() }

    var body: some View {
        video()
            .contentShape(.rect)
            .onGeometryChange(for: CGSize.self) { $0.size } action: { videoSize = $0 }
            // Simultaneous, so a tap handler inside the video still runs.
            .simultaneousGesture(
                SpatialTapGesture(count: 2).onEnded { value in
                    tapLocation = value.location
                    seek(DoubleTapSeekOverlayTally.side(forX: value.location.x, width: videoSize.width))
                }
            )
            .overlay {
                GeometryReader { proxy in
                    ZStack {
                        Color.clear
                            .allowsHitTesting(false)
                            .accessibilityElement()
                            .accessibilityLabel("Seek area")
                            .accessibilityAction(named: "Skip back \(intervalText) seconds") { seek(.backward) }
                            .accessibilityAction(named: "Skip forward \(intervalText) seconds") { seek(.forward) }

                        if let side = tally.side {
                            feedback(side, in: proxy.size).transition(.opacity)
                        }
                    }
                }
            }
            .overlay { controls() }
            .onChange(of: programmaticSeek) { _, request in
                guard let request else { return }
                tapLocation = CGPoint(x: videoSize.width * (request.side == .forward ? 0.75 : 0.25), y: videoSize.height / 2)
                seek(request.side)
            }
            .task(id: tapCount) {
                guard tapCount > 0 else { return }
                try? await Task.sleep(for: .seconds(0.9))
                guard !Task.isCancelled else { return }
                withAnimation(animation) { tally.reset() }
            }
    }

    private func feedback(_ side: DoubleTapSeekOverlaySide, in size: CGSize) -> some View {
        let halfWidth = size.width / 2
        let isForward = side == .forward
        let rippleCenter = CGPoint(x: isForward ? tapLocation.x - halfWidth : tapLocation.x, y: tapLocation.y)

        return ZStack {
            Color.black.opacity(0.22)

            if !reduceMotion {
                DoubleTapSeekOverlayRipple(center: rippleCenter, diameter: max(size.width, size.height))
                    .id(tapCount)
            }

            VStack(spacing: 6) {
                Image(systemName: isForward ? "forward.fill" : "backward.fill").font(.title2)
                Text("\(isForward ? "+" : "-")\(tally.seconds.formatted()) s")
                    .font(.headline.monospacedDigit())
            }
            .foregroundStyle(.white)
            .environment(\.layoutDirection, layoutDirection)
        }
        .frame(width: max(halfWidth, 0), height: max(size.height, 0))
        .clipped()
        .frame(maxWidth: .infinity, alignment: isForward ? .trailing : .leading)
        // Playback keeps its sides in right-to-left layouts: back stays on the left, where the taps are counted.
        .environment(\.layoutDirection, .leftToRight)
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    private func seek(_ side: DoubleTapSeekOverlaySide) {
        guard interval > 0 else { return }
        withAnimation(animation) { tally.record(side, interval: interval) }
        tapCount &+= 1
        onSeek(side == .backward ? -interval : interval)
    }
}

extension DoubleTapSeekOverlay where Controls == EmptyView {
    init(interval: Double = 10.0, onSeek: @escaping (Double) -> Void, programmaticSeek: DoubleTapSeekOverlayRequest? = nil, @ViewBuilder video: @escaping () -> Video) {
        self.init(interval: interval, onSeek: onSeek, programmaticSeek: programmaticSeek, video: video, controls: { EmptyView() })
    }
}

private struct DoubleTapSeekOverlayRipple: View {
    let center: CGPoint
    let diameter: CGFloat

    @State private var isExpanded = false

    var body: some View {
        Circle()
            .fill(.white.opacity(0.35))
            .frame(width: diameter, height: diameter)
            .scaleEffect(isExpanded ? 1 : 0.1)
            .opacity(isExpanded ? 0 : 1)
            .position(center)
            .onAppear {
                withAnimation(.easeOut(duration: 0.55)) { isExpanded = true }
            }
    }
}

// MARK: - Demo

struct DoubleTapSeekOverlayDemo: View {
    private let duration = 180.0

    @State private var position = 60.0
    @State private var seekRequest: DoubleTapSeekOverlayRequest?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 18) {
                Text("Double tap either side")
                    .font(.headline)
                    .foregroundStyle(.white.opacity(0.8))

                DoubleTapSeekOverlay(onSeek: { position = min(max(position + $0, 0), duration) }, programmaticSeek: seekRequest) {
                    videoPlaceholder
                }
                .aspectRatio(16 / 9, contentMode: .fit)
                .clipShape(.rect(cornerRadius: 16))

                ProgressView(value: position, total: duration)
                    .tint(.red)
                    .accessibilityLabel("Playback position")

                Text(Duration.seconds(position).formatted(.time(pattern: .minuteSecond)))
                    .font(.title3.monospacedDigit())
                    .foregroundStyle(.white)
                    .accessibilityHidden(true)
            }
            .padding(.horizontal, 16)
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await playSeeks()
        }
    }

    // Only the demo plays by itself, because a real double tap needs a finger.
    private func playSeeks() async {
        let steps: [(side: DoubleTapSeekOverlaySide, delay: Double)] = [(.forward, 0.7), (.forward, 0.45), (.backward, 1.5), (.backward, 0.45)]
        while !Task.isCancelled {
            for step in steps {
                try? await Task.sleep(for: .seconds(step.delay))
                guard !Task.isCancelled else { return }
                seekRequest = DoubleTapSeekOverlayRequest(side: step.side)
            }
            try? await Task.sleep(for: .seconds(1.2))
        }
    }

    private var videoPlaceholder: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 20.0, paused: reduceMotion)) { context in
            let time = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate
            LinearGradient(
                colors: [.indigo, .purple, .orange],
                startPoint: UnitPoint(x: 0.5 + sin(time * 0.7) * 0.5, y: 0),
                endPoint: UnitPoint(x: 0.5 - sin(time * 0.7) * 0.5, y: 1)
            )
        }
        .overlay {
            Image(systemName: "film")
                .font(.system(.largeTitle, weight: .light))
                .foregroundStyle(.white.opacity(0.45))
        }
        .accessibilityHidden(true)
    }
}

#Preview {
    DoubleTapSeekOverlayDemo()
}
```

## Expanding Mini Player

A mini player bar that morphs into a full player when it is tapped or pulled up.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/ExpandingMiniPlayer/ExpandingMiniPlayer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A mini player over your content that grows into a full player when tapped or pulled up.
///
/// Pull the full player down, or use its close button, to shrink it again.
/// With Reduce Motion on, the two states swap without morphing.
struct ExpandingMiniPlayer<Content: View, Artwork: View>: View {
    private enum MorphID: Hashable { case background, artwork }

    let title: String
    let subtitle: String
    @Binding var isPlaying: Bool
    /// From 0 to 1.
    var progress = 0.0
    var onPrevious: () -> Void = {}
    var onNext: () -> Void = {}
    @ViewBuilder var content: () -> Content
    @ViewBuilder var artwork: () -> Artwork

    @State private var isExpanded = false
    @GestureState private var dragOffset: CGFloat = 0
    @Namespace private var namespace
    @ScaledMetric(relativeTo: .subheadline) private var barHeight = 64.0
    @ScaledMetric(relativeTo: .subheadline) private var miniArtworkSize = 46.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let minTouchTarget: CGFloat = 44
    private let miniBarSpacing: CGFloat = 12

    private var safeProgress: Double { progress.isFinite ? min(max(progress, 0), 1) : 0 }

    var body: some View {
        ZStack(alignment: .bottom) {
            content()
                .safeAreaPadding(.bottom, barHeight + 16)
                .accessibilityHidden(isExpanded)

            if isExpanded {
                fullPlayer.zIndex(1)
            } else {
                miniBar
            }
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.3, bounce: 0.1), value: dragOffset)
    }

    // MARK: Mini player

    private var miniBar: some View {
        HStack(spacing: miniBarSpacing) {
            Button { setExpanded(true) } label: {
                HStack(spacing: miniBarSpacing) {
                    artwork()
                        .frame(width: miniArtworkSize, height: miniArtworkSize)
                        .clipShape(.rect(cornerRadius: 10))
                        .matchedGeometryEffect(id: MorphID.artwork, in: namespace)

                    VStack(alignment: .leading, spacing: 1) {
                        Text(title).font(.subheadline.weight(.semibold))
                        Text(subtitle).font(.caption).foregroundStyle(.secondary)
                    }
                    .lineLimit(1)

                    Spacer(minLength: 0)
                }
                .contentShape(.rect)
            }
            .accessibilityLabel("Open player")
            .accessibilityValue("\(title), \(subtitle)")

            playButton(font: .title3)
        }
        .buttonStyle(.plain)
        .padding(.horizontal, 10)
        .frame(minHeight: barHeight)
        .background {
            RoundedRectangle(cornerRadius: 18)
                .fill(.regularMaterial)
                .matchedGeometryEffect(id: MorphID.background, in: namespace)
                .shadow(color: .black.opacity(0.18), radius: 12, y: 4)
        }
        .padding(.horizontal, 12)
        .padding(.bottom, 8)
        .offset(y: min(dragOffset, 0) * 0.25)
        .simultaneousGesture(dragGesture)
    }

    // MARK: Full player

    private var fullPlayer: some View {
        VStack(spacing: 24) {
            Button { setExpanded(false) } label: {
                Image(systemName: "chevron.compact.down")
                    .font(.largeTitle)
                    .foregroundStyle(.secondary)
                    .frame(maxWidth: .infinity, minHeight: minTouchTarget)
                    .contentShape(.rect)
            }
            .accessibilityLabel("Close player")

            Color.clear
                .aspectRatio(1, contentMode: .fit)
                .overlay { artwork() }
                .clipShape(.rect(cornerRadius: 28))
                .matchedGeometryEffect(id: MorphID.artwork, in: namespace)
                .frame(maxWidth: 360)
                .layoutPriority(-1)
                .accessibilityHidden(true)

            VStack(spacing: 6) {
                Text(title).font(.title2.bold())
                Text(subtitle).font(.body).foregroundStyle(.secondary)
            }
            .lineLimit(2)
            .multilineTextAlignment(.center)

            ProgressView(value: safeProgress)
                .accessibilityLabel("Playback position")

            HStack(spacing: 44) {
                transportButton("backward.fill", label: "Previous", action: onPrevious)
                playButton(font: .largeTitle)
                transportButton("forward.fill", label: "Next", action: onNext)
            }

            Spacer(minLength: 0)
        }
        .buttonStyle(.plain)
        .padding(.horizontal, 28)
        .padding(.top, 8)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background {
            Rectangle()
                .fill(.thickMaterial)
                .matchedGeometryEffect(id: MorphID.background, in: namespace)
                .ignoresSafeArea()
        }
        .contentShape(.rect)
        .gesture(dragGesture)
        .offset(y: max(dragOffset, 0))
        .accessibilityAction(.escape) { setExpanded(false) }
    }

    // MARK: Parts

    private func playButton(font: Font) -> some View {
        Button { isPlaying.toggle() } label: {
            Image(systemName: isPlaying ? "pause.fill" : "play.fill")
                .font(font)
                .frame(minWidth: minTouchTarget, minHeight: minTouchTarget)
                .contentShape(.rect)
        }
        .accessibilityLabel(isPlaying ? "Pause" : "Play")
    }

    private func transportButton(_ systemImage: String, label: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            Image(systemName: systemImage)
                .font(.title)
                .frame(minWidth: minTouchTarget, minHeight: minTouchTarget)
                .contentShape(.rect)
        }
        .accessibilityLabel(label)
    }

    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 12)
            .updating($dragOffset) { value, offset, _ in
                offset = value.translation.height
            }
            .onEnded { value in
                let distance = value.translation.height
                let predicted = value.predictedEndTranslation.height
                if isExpanded {
                    if distance > 120 || predicted > 320 { setExpanded(false) }
                } else if distance < -40 || predicted < -160 {
                    setExpanded(true)
                }
            }
    }

    private func setExpanded(_ expanded: Bool) {
        withAnimation(reduceMotion ? nil : .spring(duration: 0.5, bounce: 0.15)) {
            isExpanded = expanded
        }
    }
}

// MARK: - Demo

struct ExpandingMiniPlayerDemo: View {
    private let songs = ["Midnight Drive", "Paper Planes", "Slow Tides", "Golden Hour", "Neon Rain", "Open Road", "Quiet Storm", "First Light"]

    @State private var isPlaying = false
    @State private var progress = 0.2
    @State private var index = 0
    @ScaledMetric(relativeTo: .body) private var coverSize = 48.0

    var body: some View {
        ExpandingMiniPlayer(
            title: songs[index],
            subtitle: "The Night Owls",
            isPlaying: $isPlaying,
            progress: progress,
            onPrevious: { play(index - 1) },
            onNext: { play(index + 1) }
        ) {
            NavigationStack {
                List(songs, id: \.self) { song in
                    HStack(spacing: 14) {
                        cover.frame(width: coverSize, height: coverSize)
                            .clipShape(.rect(cornerRadius: 10))
                            .accessibilityHidden(true)
                        Text(song).font(.body)
                    }
                }
                .navigationTitle("Library")
            }
        } artwork: {
            cover
        }
        .task(id: isPlaying) {
            guard isPlaying else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .milliseconds(100))
                guard !Task.isCancelled else { return }
                progress = progress >= 1 ? 0 : progress + 0.004
            }
        }
    }

    private func play(_ song: Int) {
        index = (song + songs.count) % songs.count
        progress = 0
    }

    private var cover: some View {
        LinearGradient(colors: [.purple, .pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing)
            .overlay {
                Image(systemName: "music.note")
                    .resizable()
                    .scaledToFit()
                    .padding(14)
                    .foregroundStyle(.white.opacity(0.9))
            }
    }
}

#Preview {
    ExpandingMiniPlayerDemo()
}
```

## Shutter Capture Button

A camera shutter whose inner shape shrinks on press and flashes a ring on capture, with a photo and video toggle.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/ShutterCaptureButton/ShutterCaptureButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum ShutterCaptureButtonMode: String, CaseIterable, Identifiable, Sendable {
    case photo = "Photo"
    case video = "Video"

    var id: Self { self }
}

/// A camera shutter with a photo and video toggle.
///
/// In photo mode a tap calls `onCapture` and flashes a ring. In video mode a tap
/// toggles `isRecording`. With Reduce Motion on, the shape changes without moving.
struct ShutterCaptureButton: View {
    @Binding var mode: ShutterCaptureButtonMode
    @Binding var isRecording: Bool
    var onCapture: () -> Void = {}

    @State private var captureCount = 0
    @ScaledMetric(relativeTo: .largeTitle) private var scaledSize = 80.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var size: CGFloat { min(scaledSize, 120) }
    private var animation: Animation? { reduceMotion ? nil : .snappy(duration: 0.25) }

    private var label: String {
        switch mode {
        case .photo: "Take photo"
        case .video: isRecording ? "Stop recording" : "Start recording"
        }
    }

    var body: some View {
        VStack(spacing: 20) {
            HStack(spacing: 28) {
                ForEach(ShutterCaptureButtonMode.allCases) { option in
                    Button {
                        withAnimation(animation) { mode = option }
                    } label: {
                        // A word is too small to hit. The padding widens what answers to a
                        // touch, and the same padding taken back keeps the layout as it was.
                        Text(option.rawValue)
                            .padding(13)
                            .contentShape(.rect)
                            .padding(-13)
                    }
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(mode == option ? Color.yellow : Color.white)
                    .accessibilityAddTraits(mode == option ? .isSelected : [])
                }
            }
            .disabled(isRecording)
            .opacity(isRecording ? 0.4 : 1)

            Button(action: shutterTapped) {
                ZStack {
                    Circle().strokeBorder(.white, lineWidth: 4)

                    if captureCount > 0, !reduceMotion {
                        ShutterCaptureButtonFlash().id(captureCount)
                    }
                }
                .frame(width: size, height: size)
                .contentShape(.circle)
            }
            .buttonStyle(ShutterCaptureButtonStyle(mode: mode, isRecording: isRecording, size: size, reduceMotion: reduceMotion))
            .accessibilityLabel(label)
            .sensoryFeedback(.impact(flexibility: .rigid), trigger: captureCount)
            .sensoryFeedback(.selection, trigger: isRecording)
        }
    }

    private func shutterTapped() {
        switch mode {
        case .photo:
            captureCount &+= 1
            onCapture()
        case .video:
            withAnimation(animation) { isRecording.toggle() }
        }
    }
}

/// Draws the inner shape: it shrinks while pressed and becomes a square while recording.
private struct ShutterCaptureButtonStyle: ButtonStyle {
    let mode: ShutterCaptureButtonMode
    let isRecording: Bool
    let size: CGFloat
    let reduceMotion: Bool

    func makeBody(configuration: Configuration) -> some View {
        let innerSize = size * (isRecording ? 0.42 : 0.82)

        return configuration.label
            .background {
                RoundedRectangle(cornerRadius: isRecording ? 8 : innerSize / 2)
                    .fill(mode == .video ? Color.red : Color.white)
                    .frame(width: innerSize, height: innerSize)
                    .scaleEffect(configuration.isPressed && !reduceMotion ? 0.86 : 1)
                    .opacity(configuration.isPressed && reduceMotion ? 0.7 : 1)
                    .animation(reduceMotion ? nil : .snappy(duration: 0.15), value: configuration.isPressed)
            }
    }
}

private struct ShutterCaptureButtonFlash: View {
    @State private var isExpanded = false

    var body: some View {
        Circle()
            .stroke(.white, lineWidth: 3)
            .scaleEffect(isExpanded ? 1.4 : 1)
            .opacity(isExpanded ? 0 : 0.9)
            .onAppear {
                withAnimation(.easeOut(duration: 0.4)) { isExpanded = true }
            }
    }
}

// MARK: - Demo

struct ShutterCaptureButtonDemo: View {
    @State private var mode = ShutterCaptureButtonMode.photo
    @State private var isRecording = false
    @State private var photos = 0

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 24) {
                RoundedRectangle(cornerRadius: 24)
                    .fill(LinearGradient(colors: [.teal, .indigo, .purple], startPoint: .top, endPoint: .bottom))
                    .overlay {
                        Image(systemName: "mountain.2.fill")
                            .font(.largeTitle)
                            .foregroundStyle(.white.opacity(0.7))
                    }
                    .overlay(alignment: .top) {
                        Text(isRecording ? "Recording" : "^[\(photos) photo](inflect: true)")
                            .font(.footnote.weight(.semibold).monospacedDigit())
                            .foregroundStyle(.white)
                            .padding(.horizontal, 12)
                            .padding(.vertical, 6)
                            .background(isRecording ? Color.red : Color.black.opacity(0.4), in: .capsule)
                            .padding(14)
                    }
                    .accessibilityHidden(true)

                ShutterCaptureButton(mode: $mode, isRecording: $isRecording) { photos += 1 }
            }
            .padding(16)
        }
    }
}

#Preview {
    ShutterCaptureButtonDemo()
}
```

## Spinning Vinyl Art

Circular album art on a vinyl disc that spins while playing and eases to a stop when paused.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/SpinningVinylArt/SpinningVinylArt.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The disc's angle over time. Speed ramps linearly after each change, so nothing jumps.
struct SpinningVinylArtSpin: Equatable {
    private var startAngle = 0.0
    private var startSpeed = 0.0
    private var targetSpeed = 0.0
    private var changedAt = Date.distantPast
    var ramp: TimeInterval = 0.9

    init(ramp: TimeInterval = 0.9) {
        self.ramp = ramp
    }

    func angle(at date: Date) -> Double {
        let elapsed = max(date.timeIntervalSince(changedAt), 0)
        let rampTime = max(ramp, 0)
        let duringRamp = min(elapsed, rampTime)
        let change = rampTime > 0 ? (targetSpeed - startSpeed) / rampTime : 0
        return startAngle + startSpeed * duringRamp + change * duringRamp * duringRamp / 2
            + targetSpeed * max(elapsed - rampTime, 0)
    }

    func speed(at date: Date) -> Double {
        let rampTime = max(ramp, 0)
        guard rampTime > 0 else { return targetSpeed }
        let fraction = min(max(date.timeIntervalSince(changedAt), 0) / rampTime, 1)
        return startSpeed + (targetSpeed - startSpeed) * fraction
    }

    mutating func setSpeed(_ speed: Double, at date: Date) {
        startAngle = angle(at: date).truncatingRemainder(dividingBy: 360)
        startSpeed = self.speed(at: date)
        targetSpeed = speed
        changedAt = date
    }
}

/// Circular album art that spins while playing and eases to a stop when paused.
///
/// Pass any view as the art, usually `Image("cover").resizable().scaledToFill()`.
/// With Reduce Motion on, the disc stays still.
struct SpinningVinylArt<Artwork: View>: View {
    let isPlaying: Bool
    /// Revolutions per minute. A 33 rpm record is slow enough to read the label.
    var rpm = 33.0
    var accessibilityName = "Album art"
    @ViewBuilder var artwork: () -> Artwork

    @State private var spin = SpinningVinylArtSpin()
    @State private var isEasing = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var degreesPerSecond: Double { rpm.isFinite ? min(max(rpm, -1_000), 1_000) * 6 : 0 }

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion || !(isPlaying || isEasing))) { context in
            disc.rotationEffect(.degrees(reduceMotion ? 0 : spin.angle(at: context.date)))
        }
        .overlay {
            Circle()
                .fill(AngularGradient(colors: [.clear, .white.opacity(0.22), .clear, .white.opacity(0.16), .clear], center: .center))
                .allowsHitTesting(false)
                .accessibilityHidden(true)
        }
        .aspectRatio(1, contentMode: .fit)
        .accessibilityElement()
        .accessibilityLabel(accessibilityName)
        .task(id: [isPlaying, reduceMotion]) {
            guard !reduceMotion else { return }
            spin.setSpeed(isPlaying ? degreesPerSecond : 0, at: .now)
            isEasing = !isPlaying
            guard !isPlaying else { return }
            try? await Task.sleep(for: .seconds(max(spin.ramp, 0) + 0.05))
            guard !Task.isCancelled else { return }
            isEasing = false
        }
        .onChange(of: degreesPerSecond) {
            guard isPlaying, !reduceMotion else { return }
            spin.setSpeed(degreesPerSecond, at: .now)
        }
    }

    private var disc: some View {
        GeometryReader { proxy in
            let side = max(min(proxy.size.width, proxy.size.height), 0)

            ZStack {
                Circle().fill(Color(white: 0.08))

                ForEach(1..<8, id: \.self) { ring in
                    Circle()
                        .stroke(.white.opacity(0.06), lineWidth: 1)
                        .padding(side * CGFloat(ring) * 0.028)
                }

                artwork()
                    .frame(width: side * 0.6, height: side * 0.6)
                    .clipShape(.circle)

                Circle()
                    .fill(Color(white: 0.08))
                    .frame(width: side * 0.05, height: side * 0.05)
            }
            .frame(width: side, height: side)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        }
    }
}

// MARK: - Demo

struct SpinningVinylArtDemo: View {
    @State private var isPlaying = true
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 36) {
                SpinningVinylArt(isPlaying: isPlaying) {
                    LinearGradient(colors: [.orange, .pink, .purple], startPoint: .topLeading, endPoint: .bottomTrailing)
                        .overlay {
                            Image(systemName: "music.quarternote.3")
                                .font(.largeTitle)
                                .foregroundStyle(.white)
                        }
                }
                .padding(.horizontal, 28)

                Button {
                    isPlaying.toggle()
                } label: {
                    Image(systemName: isPlaying ? "pause.circle.fill" : "play.circle.fill")
                        .font(.system(.largeTitle, weight: .regular))
                        .imageScale(.large)
                        .foregroundStyle(.white)
                }
                .accessibilityLabel(isPlaying ? "Pause" : "Play")
            }
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(isPlaying ? 2.2 : 1.4))
                guard !Task.isCancelled, isAutoPlaying else { return }
                isPlaying.toggle()
            }
        }
    }
}

#Preview {
    SpinningVinylArtDemo()
}
```

## Video Player Chrome

Custom controls over any video view that show on tap, hide after a few seconds and include a scrubber.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/VideoPlayerChrome/VideoPlayerChrome.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Custom controls over any video view. A tap shows them and they hide after a few seconds of playback.
///
/// Pass `VideoPlayer(player: player)`, or your own player layer, as the video, and drive
/// `isPlaying` and `currentTime` from it. With VoiceOver on, the controls never hide.
struct VideoPlayerChrome<Video: View>: View {
    private struct HideKey: Hashable {
        let isVisible, isPlaying, isScrubbing: Bool
        let activity: Int
    }

    let title: String
    let duration: TimeInterval
    @Binding var currentTime: TimeInterval
    @Binding var isPlaying: Bool
    var hideDelay: TimeInterval = 3
    @ViewBuilder var video: () -> Video

    @State private var isVisible = true
    @State private var isScrubbing = false
    @State private var activity = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    private var animation: Animation? { reduceMotion ? nil : .easeInOut(duration: 0.25) }
    private var showsChrome: Bool { isVisible || voiceOverEnabled }
    private var safeDuration: TimeInterval { duration.isFinite ? min(max(duration, 0), 360_000) : 0 }
    private var position: TimeInterval { currentTime.isFinite ? min(max(currentTime, 0), safeDuration) : 0 }

    private var hideKey: HideKey {
        HideKey(isVisible: isVisible, isPlaying: isPlaying, isScrubbing: isScrubbing, activity: activity)
    }

    var body: some View {
        video()
            .overlay {
                ZStack {
                    Color.clear
                        .contentShape(.rect)
                        .onTapGesture {
                            withAnimation(animation) { isVisible.toggle() }
                        }
                        .accessibilityHidden(true)

                    if showsChrome {
                        chrome.transition(.opacity)
                    }
                }
            }
            .task(id: hideKey) {
                guard isVisible, isPlaying, !isScrubbing, !voiceOverEnabled else { return }
                try? await Task.sleep(for: .seconds(max(hideDelay, 0)))
                guard !Task.isCancelled else { return }
                withAnimation(animation) { isVisible = false }
            }
    }

    private var chrome: some View {
        VStack {
            Text(title)
                .font(.headline)
                .foregroundStyle(.white)
                .lineLimit(2)
                .frame(maxWidth: .infinity, alignment: .leading)

            Spacer(minLength: 8)

            HStack(spacing: 44) {
                transportButton("gobackward.10", label: "Back 10 seconds") { seek(by: -10) }

                transportButton(isPlaying ? "pause.fill" : "play.fill", label: isPlaying ? "Pause" : "Play", font: .largeTitle) {
                    isPlaying.toggle()
                    activity &+= 1
                }

                transportButton("goforward.10", label: "Forward 10 seconds") { seek(by: 10) }
            }

            Spacer(minLength: 8)

            scrubber
        }
        .padding(16)
        .background {
            LinearGradient(colors: [.black.opacity(0.6), .clear, .black.opacity(0.6)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()
                .allowsHitTesting(false)
        }
    }

    private var scrubber: some View {
        VStack(spacing: 2) {
            Slider(
                value: Binding(get: { position }, set: { currentTime = $0 }),
                in: 0...max(safeDuration, 1),
                onEditingChanged: { isScrubbing = $0 }
            )
            .tint(.white)
            .disabled(safeDuration == 0)
            .accessibilityLabel("Playback position")
            .accessibilityValue("\(timeText(position)) of \(timeText(safeDuration))")

            HStack {
                Text(timeText(position))
                Spacer()
                Text(timeText(safeDuration))
            }
            .font(.caption.monospacedDigit())
            .foregroundStyle(.white.opacity(0.85))
            .accessibilityHidden(true)
        }
    }

    private func transportButton(
        _ systemImage: String,
        label: String,
        font: Font = .title2,
        action: @escaping () -> Void
    ) -> some View {
        Button(action: action) {
            Image(systemName: systemImage)
                .font(font)
                .foregroundStyle(.white)
                .frame(minWidth: 44, minHeight: 44)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(label)
    }

    private func seek(by delta: TimeInterval) {
        currentTime = min(max(position + delta, 0), safeDuration)
        activity &+= 1
    }

    private func timeText(_ seconds: TimeInterval) -> String {
        Duration.seconds(max(seconds, 0)).formatted(.time(pattern: .minuteSecond))
    }
}

// MARK: - Demo

struct VideoPlayerChromeDemo: View {
    private let duration: TimeInterval = 120

    @State private var currentTime: TimeInterval = 34
    @State private var isPlaying = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VideoPlayerChrome(title: "Sunset Over the Bay", duration: duration, currentTime: $currentTime, isPlaying: $isPlaying) {
            TimelineView(.animation(minimumInterval: 1.0 / 20.0, paused: reduceMotion || !isPlaying)) { context in
                let time = context.date.timeIntervalSinceReferenceDate
                LinearGradient(
                    colors: [.orange, .pink, .indigo],
                    startPoint: UnitPoint(x: 0.5 + sin(time * 0.6) * 0.5, y: 0),
                    endPoint: UnitPoint(x: 0.5 - sin(time * 0.6) * 0.5, y: 1)
                )
                .ignoresSafeArea()
            }
            .accessibilityHidden(true)
        }
        .task(id: isPlaying) {
            guard isPlaying else { return }
            // Play at the end starts again, as a player does.
            if currentTime >= duration { currentTime = 0 }
            while currentTime < duration {
                try? await Task.sleep(for: .seconds(0.25))
                guard !Task.isCancelled else { return }
                currentTime += 0.25
            }
            isPlaying = false
        }
    }
}

#Preview {
    VideoPlayerChromeDemo()
}
```

## Video Poster To Player

A poster with a play button that opens into the playing video in the same frame through a growing circle.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/VideoPosterToPlayer/VideoPosterToPlayer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A poster with a play button that opens into the playing video, in the same frame.
///
/// Pass any views: usually `Image("poster").resizable().scaledToFill()` and
/// `VideoPlayer(player: player)`. Start and stop your player from `isPlaying`.
/// With Reduce Motion on, the video fades in instead of opening from the button.
struct VideoPosterToPlayer<Poster: View, Player: View>: View {
    @Binding var isPlaying: Bool
    var aspectRatio: CGFloat = 16.0 / 9.0
    var cornerRadius: CGFloat = 22
    @ViewBuilder var poster: () -> Poster
    @ViewBuilder var player: () -> Player

    @ScaledMetric(relativeTo: .title) private var buttonSize = 72.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? { reduceMotion ? nil : .smooth(duration: 0.6) }

    var body: some View {
        Color.clear
            .aspectRatio(aspectRatio.isFinite && aspectRatio > 0 ? aspectRatio : 16.0 / 9.0, contentMode: .fit)
            .overlay { poster().accessibilityHidden(true) }
            .overlay {
                if isPlaying {
                    player().transition(reduceMotion ? .opacity : AnyTransition(VideoPosterToPlayerReveal()))
                }
            }
            .overlay(alignment: .topTrailing) {
                if isPlaying {
                    Button {
                        withAnimation(animation) { isPlaying = false }
                    } label: {
                        Image(systemName: "xmark")
                            .font(.footnote.bold())
                            .foregroundStyle(.white)
                            .frame(width: 36, height: 36)
                            .background(.black.opacity(0.5), in: .circle)
                            // The padding is part of the button, so all of it answers to a touch.
                            .padding(10)
                            .contentShape(.rect)
                    }
                    .accessibilityLabel("Close video")
                    .transition(.opacity)
                }
            }
            .overlay {
                if !isPlaying {
                    Button {
                        withAnimation(animation) { isPlaying = true }
                    } label: {
                        Image(systemName: "play.fill")
                            .font(.title)
                            .foregroundStyle(.white)
                            .frame(width: buttonSize, height: buttonSize)
                            .background(.ultraThinMaterial, in: .circle)
                    }
                    .buttonStyle(.plain)
                    .accessibilityLabel("Play video")
                    .transition(reduceMotion ? .opacity : .scale(scale: 1.8).combined(with: .opacity))
                }
            }
            .clipShape(.rect(cornerRadius: cornerRadius))
    }
}

/// Reveals the player through a circle that grows from the center until it covers the frame.
private struct VideoPosterToPlayerReveal: Transition {
    func body(content: Content, phase: TransitionPhase) -> some View {
        content.mask {
            GeometryReader { proxy in
                let diameter = hypot(proxy.size.width, proxy.size.height)

                Circle()
                    .frame(width: diameter, height: diameter)
                    .scaleEffect(phase.isIdentity ? 1 : 0.05)
                    .position(x: proxy.size.width / 2, y: proxy.size.height / 2)
            }
        }
    }
}

// MARK: - Demo

struct VideoPosterToPlayerDemo: View {
    @State private var isPlaying = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color(white: 0.1), .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 16) {
                VideoPosterToPlayer(isPlaying: $isPlaying) {
                    LinearGradient(colors: [.teal, .blue, .indigo], startPoint: .topLeading, endPoint: .bottomTrailing)
                        .overlay(alignment: .bottomLeading) {
                            Label("Trailer", systemImage: "film")
                                .font(.headline)
                                .foregroundStyle(.white)
                                .padding(16)
                        }
                } player: {
                    videoPlaceholder
                }

                Text("The Long Way Home")
                    .font(.title2.bold())
                    .foregroundStyle(.white)

                Text(isPlaying ? "Now playing" : "A two-minute trailer about a very long walk.")
                    .font(.body)
                    .foregroundStyle(.white.opacity(0.7))
            }
            .padding(20)
        }
    }

    private var videoPlaceholder: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 20.0, paused: reduceMotion || !isPlaying)) { context in
            let time = context.date.timeIntervalSinceReferenceDate
            LinearGradient(
                colors: [.orange, .pink, .purple],
                startPoint: UnitPoint(x: 0.5 + sin(time * 0.9) * 0.5, y: 0),
                endPoint: UnitPoint(x: 0.5 - sin(time * 0.9) * 0.5, y: 1)
            )
        }
        .overlay {
            Image(systemName: "waveform")
                .font(.largeTitle)
                .foregroundStyle(.white.opacity(0.6))
        }
        .accessibilityHidden(true)
    }
}

#Preview {
    VideoPosterToPlayerDemo()
}
```

## Waveform Scrubber

An audio waveform of bars that you drag to seek and that fills as playback moves on.

Category: Media. Minimum: iOS 18.0. Path: Components/Media/WaveformScrubber/WaveformScrubber.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum WaveformScrubberMath {
    /// The playback position for a touch at `x`, from 0 to 1.
    static func progress(forX x: CGFloat, width: CGFloat) -> Double {
        guard width > 0, x.isFinite else { return 0 }
        return Double(min(max(x / width, 0), 1))
    }

    /// Averages the samples into `count` bars, each from 0 to 1.
    static func bars(from samples: [Double], count: Int) -> [Double] {
        guard count > 0, !samples.isEmpty else { return [] }
        return (0..<count).map { index in
            let start = index * samples.count / count
            let end = max((index + 1) * samples.count / count, start + 1)
            let bucket = samples[start..<min(end, samples.count)]
            let total = bucket.reduce(0) { $0 + ($1.isFinite ? min(max($1, 0), 1) : 0) }
            return total / Double(bucket.count)
        }
    }

    /// How many bars of this width and spacing fit in `width`.
    static func barCount(width: CGFloat, barWidth: CGFloat, spacing: CGFloat) -> Int {
        let pitch = barWidth + max(spacing, 0)
        guard width > 0, barWidth > 0, pitch > 0, (width / pitch).isFinite else { return 0 }
        return Int(min(width / pitch, 2_000))
    }
}

/// An audio waveform of bars. Drag it to seek. It fills as `progress` moves on.
///
/// `samples` are loudness values from 0 to 1. With Reduce Motion on, the bars don't grow during a drag.
struct WaveformScrubber: View {
    let samples: [Double]
    @Binding var progress: Double
    var tint: Color = .accentColor
    var barWidth: CGFloat = 3
    var spacing: CGFloat = 2
    var onScrubbingChanged: (Bool) -> Void = { _ in }

    @GestureState private var isDragging = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var safeProgress: Double { progress.isFinite ? min(max(progress, 0), 1) : 0 }

    var body: some View {
        GeometryReader { proxy in
            canvas
                .contentShape(.rect)
                .gesture(
                    DragGesture(minimumDistance: 0)
                        .updating($isDragging) { _, state, _ in state = true }
                        .onChanged { progress = WaveformScrubberMath.progress(forX: $0.location.x, width: proxy.size.width) }
                )
        }
        .scaleEffect(y: isDragging && !reduceMotion ? 1.12 : 1)
        .animation(reduceMotion ? nil : .snappy(duration: 0.2), value: isDragging)
        .onChange(of: isDragging) { _, dragging in onScrubbingChanged(dragging) }
        .accessibilityElement()
        .accessibilityLabel("Playback position")
        .accessibilityValue(safeProgress.formatted(.percent.precision(.fractionLength(0))))
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: progress = min(safeProgress + 0.05, 1)
            case .decrement: progress = max(safeProgress - 0.05, 0)
            @unknown default: break
            }
        }
    }

    private var canvas: some View {
        Canvas { context, size in
            let count = WaveformScrubberMath.barCount(width: size.width, barWidth: barWidth, spacing: spacing)
            let bars = WaveformScrubberMath.bars(from: samples, count: count)
            guard !bars.isEmpty else { return }

            var path = Path()
            for (index, level) in bars.enumerated() {
                let height = max(size.height * level, barWidth)
                let rect = CGRect(
                    x: CGFloat(index) * (barWidth + max(spacing, 0)),
                    y: (size.height - height) / 2,
                    width: barWidth,
                    height: height
                )
                path.addRoundedRect(in: rect, cornerSize: CGSize(width: barWidth / 2, height: barWidth / 2))
            }

            context.fill(path, with: .color(.secondary.opacity(0.35)))

            var played = context
            played.clip(to: Path(CGRect(x: 0, y: 0, width: size.width * safeProgress, height: size.height)))
            played.fill(path, with: .color(tint))
        }
    }
}

// MARK: - Demo

struct WaveformScrubberDemo: View {
    private static let samples = (0..<160).map { index in
        let time = Double(index)
        return min(abs(sin(time * 0.31)) * 0.55 + abs(sin(time * 0.083)) * 0.45, 1)
    }

    @State private var progress = 0.08
    @State private var isPlaying = false
    @State private var isScrubbing = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, Color(red: 0.12, green: 0.1, blue: 0.3)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            WaveformScrubber(samples: Self.samples, progress: $progress, tint: .mint, onScrubbingChanged: { isScrubbing = $0 })
                .frame(height: 130)
                .padding(.horizontal, 20)
                .environment(\.colorScheme, .dark)
        }
        .overlay(alignment: .top) {
            VStack(spacing: 6) {
                Text("Morning Voice Note").font(.title2.bold())
                Text(progress.formatted(.percent.precision(.fractionLength(0))))
                    .font(.headline.monospacedDigit())
                    .foregroundStyle(.white.opacity(0.7))
                    .accessibilityHidden(true)
            }
            .foregroundStyle(.white)
            .padding(.top, 60)
        }
        .overlay(alignment: .bottom) {
            Button {
                isPlaying.toggle()
            } label: {
                Image(systemName: isPlaying ? "pause.circle.fill" : "play.circle.fill")
                    .font(.largeTitle)
                    .imageScale(.large)
                    .foregroundStyle(.mint)
            }
            .accessibilityLabel(isPlaying ? "Pause" : "Play")
            .padding(.bottom, 60)
        }
        .task(id: isPlaying) {
            guard isPlaying else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .milliseconds(50))
                guard !Task.isCancelled else { return }
                if !isScrubbing { progress = progress >= 1 ? 0 : min(progress + 0.0035, 1) }
            }
        }
    }
}

#Preview {
    WaveformScrubberDemo()
}
```

## Coach Mark Tour

A guided tour that dims the screen and spotlights a sequence of views with a step card next to each one.

Category: Menus. Minimum: iOS 18.0. Path: Components/Menus/CoachMarkTour/CoachMarkTour.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct CoachMarkTourStep: Identifiable {
    /// Matches the id passed to `coachMarkTourTarget(_:)`.
    let id: String
    let title: LocalizedStringResource
    let message: LocalizedStringResource
}

/// Where the tour is. `advance` and `finish` report the end only once.
struct CoachMarkTourProgress: Equatable {
    private(set) var index = 0
    private(set) var isFinished = false

    /// Moves to the next step. Returns `true` when this call finished the tour.
    mutating func advance(stepCount: Int) -> Bool {
        guard !isFinished else { return false }
        if index + 1 < stepCount {
            index += 1
            return false
        }
        return finish()
    }

    /// Ends the tour. Returns `true` only the first time.
    mutating func finish() -> Bool {
        guard !isFinished else { return false }
        isFinished = true
        return true
    }

    /// Keeps the index valid when the list of steps shrinks.
    mutating func clamp(stepCount: Int) {
        index = max(min(index, stepCount - 1), 0)
    }

    mutating func restart() {
        self = CoachMarkTourProgress()
    }
}

private struct CoachMarkTourAnchorKey: PreferenceKey {
    static var defaultValue: [String: Anchor<CGRect>] { [:] }

    static func reduce(value: inout [String: Anchor<CGRect>], nextValue: () -> [String: Anchor<CGRect>]) {
        value.merge(nextValue()) { $1 }
    }
}

extension View {
    /// Marks this view as the target of the tour step with the same id.
    func coachMarkTourTarget(_ id: String) -> some View {
        anchorPreference(key: CoachMarkTourAnchorKey.self, value: .bounds) { [id: $0] }
    }

    /// Runs a guided tour over this view. Apply it to a container of all the targets.
    func coachMarkTour(
        steps: [CoachMarkTourStep],
        isPresented: Binding<Bool>,
        onFinish: @escaping () -> Void = {}
    ) -> some View {
        modifier(CoachMarkTourModifier(steps: steps, isPresented: isPresented, onFinish: onFinish))
    }
}

private struct CoachMarkTourModifier: ViewModifier {
    let steps: [CoachMarkTourStep]
    @Binding var isPresented: Bool
    let onFinish: () -> Void

    @State private var progress = CoachMarkTourProgress()
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? { reduceMotion ? nil : .smooth(duration: 0.45) }

    func body(content: Content) -> some View {
        content
            .overlayPreferenceValue(CoachMarkTourAnchorKey.self) { anchors in
                GeometryReader { outer in
                    if isPresented, !progress.isFinished, steps.indices.contains(progress.index) {
                        let step = steps[progress.index]

                        GeometryReader { proxy in
                            let hole = anchors[step.id].map { proxy[$0].insetBy(dx: -8, dy: -8) }
                            overlay(step: step, hole: hole, screen: proxy.size, insets: outer.safeAreaInsets)
                        }
                        .ignoresSafeArea()
                        .transition(.opacity)
                    }
                }
            }
            .onChange(of: steps.count) { _, count in progress.clamp(stepCount: count) }
            .onChange(of: isPresented) { _, presented in
                if presented { progress.restart() }
            }
            .onChange(of: isPresented && steps.isEmpty, initial: true) { _, hasNothingToShow in
                guard hasNothingToShow else { return }
                progress.restart()
                skip()
            }
    }

    private func overlay(step: CoachMarkTourStep, hole: CGRect?, screen: CGSize, insets: EdgeInsets) -> some View {
        let holeRect = hole ?? CGRect(x: screen.width / 2, y: screen.height / 2, width: 0, height: 0)
        let placeBelow = screen.height - holeRect.maxY >= holeRect.minY
        let available = max(
            placeBelow ? screen.height - holeRect.maxY - insets.bottom - 24 : holeRect.minY - insets.top - 24,
            120
        )

        return ZStack(alignment: placeBelow ? .top : .bottom) {
            CoachMarkTourDim(hole: holeRect)
                .fill(.black.opacity(0.65), style: FillStyle(eoFill: true))
                .contentShape(.rect)
                .onTapGesture(perform: next)
                .accessibilityHidden(true)

            ViewThatFits(in: .vertical) {
                card(step)
                ScrollView { card(step) }
            }
            .frame(maxHeight: available)
            .padding(.horizontal, 20)
            .padding(placeBelow ? .top : .bottom, placeBelow ? holeRect.maxY + 12 : screen.height - holeRect.minY + 12)
        }
    }

    private func card(_ step: CoachMarkTourStep) -> some View {
        let isLast = progress.index + 1 >= steps.count

        return VStack(alignment: .leading, spacing: 8) {
            Text(step.title).font(.headline)
            Text(step.message).font(.subheadline).foregroundStyle(.secondary)

            HStack {
                Button(action: skip) {
                    // A line of text is too short to hit. The padding widens what answers to
                    // a touch, and the same padding taken back keeps the layout as it was.
                    Text("Skip tour")
                        .padding(.vertical, 13)
                        .contentShape(.rect)
                        .padding(.vertical, -13)
                }
                .font(.subheadline)
                .foregroundStyle(.secondary)

                Spacer()

                Text("\(progress.index + 1) of \(steps.count)")
                    .font(.caption.monospacedDigit())
                    .foregroundStyle(.secondary)

                Button(isLast ? "Done" : "Next", action: next)
                    .buttonStyle(.borderedProminent)
                    .accessibilityLabel(isLast ? "Finish tour" : "Next step")
            }
            .padding(.top, 6)
        }
        .padding(16)
        .frame(maxWidth: .infinity, alignment: .leading)
        .background(.regularMaterial, in: .rect(cornerRadius: 18))
        .accessibilityElement(children: .contain)
        .accessibilityAddTraits(.isModal)
    }

    private func next() {
        var updated = progress
        let finished = updated.advance(stepCount: steps.count)
        withAnimation(animation) {
            progress = updated
            if finished { isPresented = false }
        }
        if finished { onFinish() }
    }

    private func skip() {
        var updated = progress
        let finished = updated.finish()
        withAnimation(animation) {
            progress = updated
            if finished { isPresented = false }
        }
        if finished { onFinish() }
    }
}

/// The dimming layer with a rounded hole around the target. Its hole animates between steps.
nonisolated private struct CoachMarkTourDim: Shape {
    var hole: CGRect

    var animatableData: CGRect.AnimatableData {
        get { hole.animatableData }
        set { hole.animatableData = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path(rect)
        path.addRoundedRect(in: hole, cornerSize: CGSize(width: 14, height: 14))
        return path
    }
}

// MARK: - Demo

struct CoachMarkTourDemo: View {
    private let steps = [
        CoachMarkTourStep(id: "profile", title: "Your profile", message: "Change your photo and settings here."),
        CoachMarkTourStep(id: "search", title: "Search", message: "Find any note in a moment."),
        CoachMarkTourStep(id: "card", title: "Today", message: "Your plan for the day lives on this card."),
        CoachMarkTourStep(id: "add", title: "Add a note", message: "Tap here to write something new."),
    ]

    @State private var isTouring = true
    @ScaledMetric(relativeTo: .title2) private var buttonSize = 46.0

    var body: some View {
        VStack(spacing: 20) {
            HStack {
                circleButton("person.fill", label: "Profile").coachMarkTourTarget("profile")
                Spacer()
                Text("Notes").font(.title2.bold())
                Spacer()
                circleButton("magnifyingglass", label: "Search").coachMarkTourTarget("search")
            }

            VStack(alignment: .leading, spacing: 8) {
                Text("Today").font(.title.bold())
                Text("Three notes waiting for you").font(.body)
            }
            .foregroundStyle(.white)
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.indigo.gradient, in: .rect(cornerRadius: 26))
            .coachMarkTourTarget("card")

            Button("Start tour again") { isTouring = true }
                .buttonStyle(.bordered)

            Spacer()

            circleButton("plus", label: "Add note")
                .coachMarkTourTarget("add")
                .frame(maxWidth: .infinity, alignment: .trailing)
        }
        .padding(20)
        .coachMarkTour(steps: steps, isPresented: $isTouring)
    }

    private func circleButton(_ systemImage: String, label: String) -> some View {
        Button {} label: {
            Image(systemName: systemImage)
                .font(.title3.weight(.semibold))
                .foregroundStyle(.indigo)
                .frame(width: buttonSize, height: buttonSize)
                .background(.indigo.opacity(0.14), in: .circle)
        }
        .accessibilityLabel(label)
    }
}

#Preview {
    CoachMarkTourDemo()
}
```

## Command Palette

A searchable sheet of commands with shortcut hints and live filtering as you type.

Category: Menus. Minimum: iOS 18.0. Path: Components/Menus/CommandPalette/CommandPalette.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct CommandPaletteCommand: Identifiable {
    let id: String
    let title: String
    let section: String
    let systemImage: String
    /// A hint only, such as "⌘N".
    var shortcut: String?
    /// Extra words that find this command, such as synonyms.
    var keywords: [String] = []
    let action: () -> Void
}

struct CommandPaletteGroup: Identifiable {
    let title: String
    let commands: [CommandPaletteCommand]

    var id: String { title }
}

enum CommandPaletteFilter {
    /// Commands matching the query, grouped by section in the order they first appear.
    static func groups(_ commands: [CommandPaletteCommand], query: String) -> [CommandPaletteGroup] {
        let trimmed = query.trimmingCharacters(in: .whitespacesAndNewlines)
        let matches = commands.filter { command in
            trimmed.isEmpty || ([command.title, command.section] + command.keywords)
                .contains { $0.localizedStandardContains(trimmed) }
        }

        var titles: [String] = []
        var bySection: [String: [CommandPaletteCommand]] = [:]
        for command in matches {
            if bySection[command.section] == nil { titles.append(command.section) }
            bySection[command.section, default: []].append(command)
        }
        return titles.map { CommandPaletteGroup(title: $0, commands: bySection[$0] ?? []) }
    }

    /// The command at the top of the list for a query, which Return runs. Nothing for an empty query.
    static func firstMatch(in commands: [CommandPaletteCommand], query: String) -> CommandPaletteCommand? {
        guard !query.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty else { return nil }
        return groups(commands, query: query).first?.commands.first
    }
}

/// A searchable list of commands, filtered as you type. Show it in a sheet.
///
/// The search field takes focus when it appears, and Return runs the first match.
/// Running a command closes the sheet first.
struct CommandPalette: View {
    let commands: [CommandPaletteCommand]

    @State private var query = ""
    @State private var isSearching = false
    @Environment(\.dismiss) private var dismiss
    @ScaledMetric(relativeTo: .body) private var iconSize = 32.0

    private var groups: [CommandPaletteGroup] {
        CommandPaletteFilter.groups(commands, query: query)
    }

    var body: some View {
        NavigationStack {
            List(groups) { group in
                Section(group.title) {
                    ForEach(group.commands, content: row)
                }
            }
            .overlay {
                if groups.isEmpty {
                    ContentUnavailableView.search(text: query)
                }
            }
            .navigationTitle("Commands")
            .navigationBarTitleDisplayMode(.inline)
            .searchable(
                text: $query,
                isPresented: $isSearching,
                placement: .navigationBarDrawer(displayMode: .always),
                prompt: "Type a command"
            )
            // Return runs the first match, as in a command palette on a keyboard.
            .onSubmit(of: .search) {
                if let first = CommandPaletteFilter.firstMatch(in: commands, query: query) { run(first) }
            }
            .toolbar {
                ToolbarItem(placement: .cancellationAction) {
                    Button("Close") { dismiss() }
                }
            }
        }
        .task { isSearching = true }
    }

    private func row(_ command: CommandPaletteCommand) -> some View {
        Button {
            run(command)
        } label: {
            ViewThatFits(in: .horizontal) {
                HStack(spacing: 12) {
                    titleLabel(command)
                    Spacer(minLength: 12)
                    shortcutChip(command.shortcut)
                }
                titleLabel(command)
            }
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(command.title)
    }

    private func run(_ command: CommandPaletteCommand) {
        dismiss()
        command.action()
    }

    private func titleLabel(_ command: CommandPaletteCommand) -> some View {
        HStack(spacing: 12) {
            Image(systemName: command.systemImage)
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.tint)
                .frame(width: iconSize, height: iconSize)
                .background(.tint.opacity(0.14), in: .rect(cornerRadius: 8))
                .accessibilityHidden(true)

            Text(command.title).font(.body)
        }
    }

    @ViewBuilder
    private func shortcutChip(_ shortcut: String?) -> some View {
        if let shortcut {
            Text(shortcut)
                .font(.caption.monospaced())
                .foregroundStyle(.secondary)
                .padding(.horizontal, 7)
                .padding(.vertical, 3)
                .background(.fill.tertiary, in: .rect(cornerRadius: 6))
                .accessibilityHidden(true)
        }
    }
}

// MARK: - Demo

struct CommandPaletteDemo: View {
    @State private var isOpen = false
    @State private var lastCommand = "Nothing yet"

    private var commands: [CommandPaletteCommand] {
        [
            command("New Note", section: "Create", image: "square.and.pencil", shortcut: "⌘N"),
            command("New Folder", section: "Create", image: "folder.badge.plus", shortcut: "⇧⌘N"),
            command("Share Note", section: "Actions", image: "square.and.arrow.up", shortcut: "⌘S"),
            command("Duplicate", section: "Actions", image: "plus.square.on.square", shortcut: "⌘D"),
            command("Delete", section: "Actions", image: "trash", shortcut: "⌫"),
            command("Settings", section: "Go to", image: "gearshape", shortcut: "⌘,"),
            command("Trash", section: "Go to", image: "trash.circle"),
            command("Help", section: "Go to", image: "questionmark.circle", shortcut: "⌘?"),
        ]
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .blue], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 22) {
                Text(lastCommand)
                    .font(.title2.bold())
                    .foregroundStyle(.white)
                    .multilineTextAlignment(.center)

                Button {
                    isOpen = true
                } label: {
                    Label("Open commands", systemImage: "command")
                        .font(.headline)
                        .padding(.horizontal, 18)
                        .padding(.vertical, 12)
                        .background(.white, in: .capsule)
                        .foregroundStyle(.indigo)
                }
            }
            .padding(24)
        }
        .sheet(isPresented: $isOpen) {
            CommandPalette(commands: commands)
        }
    }

    private func command(_ title: String, section: String, image: String, shortcut: String? = nil) -> CommandPaletteCommand {
        CommandPaletteCommand(id: title, title: title, section: section, systemImage: image, shortcut: shortcut) {
            lastCommand = title
        }
    }
}

#Preview {
    CommandPaletteDemo()
}
```

## Context Menu Preview Card

A card that lifts a richer preview above its menu when you press and hold it.

Category: Menus. Minimum: iOS 18.0. Path: Components/Menus/ContextMenuPreviewCard/ContextMenuPreviewCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A card that lifts a richer preview above its menu when long pressed.
///
/// The system animates the lift and simplifies it for Reduce Motion. VoiceOver
/// users find the menu items in the actions rotor. Give the preview a fixed size.
struct ContextMenuPreviewCard<Card: View, Preview: View, MenuItems: View>: View {
    var cornerRadius: CGFloat = 22
    @ViewBuilder var card: () -> Card
    @ViewBuilder var preview: () -> Preview
    @ViewBuilder var menuItems: () -> MenuItems

    var body: some View {
        card()
            .clipShape(.rect(cornerRadius: cornerRadius))
            .contentShape(.contextMenuPreview, .rect(cornerRadius: cornerRadius))
            .contextMenu(menuItems: menuItems, preview: preview)
    }
}

// MARK: - Demo

private struct ContextMenuPreviewCardDemoTrip: Identifiable {
    let id: String
    let subtitle: String
    let systemImage: String
    let colors: [Color]
}

struct ContextMenuPreviewCardDemo: View {
    private static let allTrips = [
        ContextMenuPreviewCardDemoTrip(id: "Alps", subtitle: "Six days above the clouds", systemImage: "mountain.2.fill", colors: [.teal, .blue]),
        ContextMenuPreviewCardDemoTrip(id: "Coast", subtitle: "A slow week by the sea", systemImage: "sailboat.fill", colors: [.cyan, .indigo]),
        ContextMenuPreviewCardDemoTrip(id: "Desert", subtitle: "Stars and quiet nights", systemImage: "sun.max.fill", colors: [.orange, .pink]),
        ContextMenuPreviewCardDemoTrip(id: "Forest", subtitle: "Trails and cabins", systemImage: "tree.fill", colors: [.green, .mint]),
    ]

    @State private var trips = allTrips
    @State private var lastAction = "Press and hold a card"

    var body: some View {
        NavigationStack {
            ScrollView {
                VStack(alignment: .leading, spacing: 14) {
                    Text(lastAction)
                        .font(.subheadline)
                        .foregroundStyle(.secondary)

                    LazyVGrid(columns: [GridItem(.adaptive(minimum: 160), spacing: 14)], spacing: 14) {
                        ForEach(trips) { trip in
                            ContextMenuPreviewCard {
                                compactCard(trip)
                            } preview: {
                                richPreview(trip)
                            } menuItems: {
                                Button("Share", systemImage: "square.and.arrow.up") { lastAction = "Shared \(trip.id)" }
                                Button("Save", systemImage: "bookmark") { lastAction = "Saved \(trip.id)" }
                                Button("Remove", systemImage: "trash", role: .destructive) {
                                    lastAction = "Removed \(trip.id)"
                                    withAnimation { trips.removeAll { $0.id == trip.id } }
                                }
                            }
                        }
                    }

                    // Only for this demo: a way back once every card is gone.
                    if trips.isEmpty {
                        Button("Start over") {
                            lastAction = "Press and hold a card"
                            withAnimation { trips = Self.allTrips }
                        }
                        .buttonStyle(.borderedProminent)
                        .frame(maxWidth: .infinity)
                    }
                }
                .padding(16)
            }
            .navigationTitle("Trips")
        }
    }

    private func compactCard(_ trip: ContextMenuPreviewCardDemoTrip) -> some View {
        VStack(alignment: .leading, spacing: 4) {
            Image(systemName: trip.systemImage)
                .font(.title)
                .accessibilityHidden(true)

            Spacer(minLength: 24)

            Text(trip.id).font(.headline)
        }
        .foregroundStyle(.white)
        .padding(16)
        .frame(maxWidth: .infinity, minHeight: 150, alignment: .leading)
        .background(LinearGradient(colors: trip.colors, startPoint: .topLeading, endPoint: .bottomTrailing))
        .accessibilityElement(children: .combine)
    }

    private func richPreview(_ trip: ContextMenuPreviewCardDemoTrip) -> some View {
        VStack(alignment: .leading, spacing: 8) {
            LinearGradient(colors: trip.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .overlay {
                    Image(systemName: trip.systemImage)
                        .font(.largeTitle)
                        .imageScale(.large)
                        .foregroundStyle(.white)
                }
                .frame(height: 190)

            VStack(alignment: .leading, spacing: 4) {
                Text(trip.id).font(.title2.bold())
                Text(trip.subtitle).font(.body).foregroundStyle(.secondary)
            }
            .padding(16)
        }
        .frame(width: 300, height: 300, alignment: .top)
    }
}

#Preview {
    ContextMenuPreviewCardDemo()
}
```

## Dropdown Select Menu

A custom dropdown field whose list of options grows out of it and collapses on selection.

Category: Menus. Minimum: iOS 18.0. Path: Components/Menus/DropdownSelectMenu/DropdownSelectMenu.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A field whose list of options grows out of it and collapses on selection.
///
/// The list floats over the views below, so use it in a stack where it can overlap
/// them. It raises itself with `zIndex` while open, and a tap outside closes it.
struct DropdownSelectMenu<Option: Hashable>: View {
    let title: LocalizedStringResource
    let options: [Option]
    @Binding var selection: Option?
    var placeholder = "Choose"
    let label: (Option) -> String

    @State private var isOpen = false
    @State private var fieldHeight: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? { reduceMotion ? nil : .smooth(duration: 0.28) }
    private let cornerRadius: CGFloat = 14
    private let contentPadding: CGFloat = 14
    private let maxListHeight: CGFloat = 280

    private var listTop: CGFloat { fieldHeight + 6 }
    /// The top edge of the list, as a point of the padded box the transition scales.
    private var listAnchor: UnitPoint { UnitPoint(x: 0.5, y: listTop / (listTop + maxListHeight)) }

    var body: some View {
        field
            .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { fieldHeight = $0 }
            .overlay(alignment: .top) {
                if isOpen {
                    // An overlay is offered the size of the field, which would squeeze the list
                    // into one row. This offers it its own height, and starts it under the field.
                    optionsList
                        .frame(height: maxListHeight, alignment: .top)
                        .padding(.top, listTop)
                        .transition(reduceMotion ? .opacity : .scale(scale: 0.9, anchor: listAnchor).combined(with: .opacity))
                }
            }
            .background {
                if isOpen {
                    Color.clear
                        .frame(width: 4000, height: 4000)
                        .contentShape(.rect)
                        .onTapGesture { setOpen(false) }
                        .accessibilityHidden(true)
                }
            }
            .zIndex(isOpen ? 1 : 0)
    }

    private var field: some View {
        Button {
            setOpen(!isOpen)
        } label: {
            HStack(spacing: 10) {
                VStack(alignment: .leading, spacing: 2) {
                    Text(title).font(.caption).foregroundStyle(.secondary)
                    Text(selection.map(label) ?? placeholder)
                        .font(.body)
                        .foregroundStyle(selection == nil ? .secondary : .primary)
                }

                Spacer(minLength: 0)

                Image(systemName: "chevron.down")
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.secondary)
                    .rotationEffect(.degrees(isOpen ? 180 : 0))
                    .accessibilityHidden(true)
            }
            .padding(.horizontal, contentPadding)
            .padding(.vertical, 10)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.background, in: .rect(cornerRadius: cornerRadius))
            .overlay {
                RoundedRectangle(cornerRadius: cornerRadius).strokeBorder(.separator)
            }
            .contentShape(.rect(cornerRadius: cornerRadius))
        }
        .buttonStyle(.plain)
        .accessibilityLabel(title)
        .accessibilityValue(selection.map(label) ?? placeholder)
        .accessibilityHint(isOpen ? "Closes the list" : "Opens the list")
    }

    private var optionsList: some View {
        ViewThatFits(in: .vertical) {
            optionStack
            ScrollView { optionStack }
        }
        .background(.regularMaterial, in: .rect(cornerRadius: cornerRadius))
        .overlay {
            RoundedRectangle(cornerRadius: cornerRadius).strokeBorder(.separator)
        }
        .clipShape(.rect(cornerRadius: cornerRadius))
        .shadow(color: .black.opacity(0.14), radius: 14, y: 6)
    }

    private var optionStack: some View {
        VStack(spacing: 0) {
            if options.isEmpty {
                Text("No options")
                    .font(.body)
                    .foregroundStyle(.secondary)
                    .padding(contentPadding)
                    .frame(maxWidth: .infinity, alignment: .leading)
            }

            ForEach(options, id: \.self) { option in
                Button {
                    selection = option
                    setOpen(false)
                } label: {
                    HStack {
                        Text(label(option)).font(.body)
                        Spacer(minLength: 8)
                        if option == selection {
                            Image(systemName: "checkmark")
                                .font(.subheadline.weight(.bold))
                                .foregroundStyle(.tint)
                                .accessibilityHidden(true)
                        }
                    }
                    .padding(.horizontal, contentPadding)
                    .frame(minHeight: 46)
                    .contentShape(.rect)
                }
                .buttonStyle(.plain)
                .accessibilityAddTraits(option == selection ? .isSelected : [])
            }
        }
    }

    private func setOpen(_ open: Bool) {
        withAnimation(animation) { isOpen = open }
    }
}

// MARK: - Demo

struct DropdownSelectMenuDemo: View {
    @State private var shipping: String? = "Standard"
    @State private var country: String?
    @State private var notes = "Tap a field to open it"

    var body: some View {
        ZStack {
            LinearGradient(colors: [.blue.opacity(0.18), .purple.opacity(0.18)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 16) {
                Text("Checkout").font(.largeTitle.bold())

                DropdownSelectMenu(
                    title: "Shipping",
                    options: ["Standard", "Express", "Overnight", "Pickup"],
                    selection: $shipping,
                    label: { $0 }
                )

                DropdownSelectMenu(
                    title: "Country",
                    options: ["France", "Italy", "Portugal", "Spain"],
                    selection: $country,
                    placeholder: "Select a country",
                    label: { $0 }
                )

                Text(notes)
                    .font(.footnote)
                    .foregroundStyle(.secondary)

                Spacer()
            }
            .padding(20)
        }
        .onChange(of: shipping) { _, new in notes = "Delivery: \(new ?? "none")" }
    }
}

#Preview {
    DropdownSelectMenuDemo()
}
```

## Gooey Floating Menu

A floating button whose option bubbles melt and merge out of it like liquid.

Category: Menus. Minimum: iOS 18.0. Path: Components/Menus/GooeyFloatingMenu/GooeyFloatingMenu.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct GooeyFloatingMenuItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let action: () -> Void
}

/// A floating button whose options melt out of it like liquid.
///
/// A `Canvas` blurs the circles and then cuts their alpha at a threshold, so shapes that
/// come close merge into one blob. It fits up to about five options, and the buttons
/// shrink when the width cannot hold the fan at their full size.
/// With Reduce Motion on, the options appear without moving.
struct GooeyFloatingMenu: View {
    let items: [GooeyFloatingMenuItem]
    var tint: Color = .indigo

    @State private var isOpen = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.7, bounce: 0.25)
    }

    var body: some View {
        GooeyFloatingMenuStage(
            progress: isOpen ? 1 : 0,
            items: items,
            tint: tint,
            isOpen: isOpen,
            toggle: { withAnimation(animation) { isOpen.toggle() } },
            select: { item in
                withAnimation(animation) { isOpen = false }
                item.action()
            }
        )
        // The buttons only hold icons. The stage reads its size under this cap, which keeps the fan on screen.
        .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
        // A tap outside closes the fan, as it does a menu.
        .background {
            if isOpen {
                Color.clear
                    .frame(width: 4000, height: 4000)
                    .contentShape(.rect)
                    .onTapGesture { withAnimation(animation) { isOpen = false } }
                    .accessibilityHidden(true)
            }
        }
    }
}

/// `Animatable` re-evaluates the body on every frame, so the drawing and the buttons share one progress.
private struct GooeyFloatingMenuStage: View, Animatable {
    var progress: Double
    let items: [GooeyFloatingMenuItem]
    let tint: Color
    let isOpen: Bool
    let toggle: () -> Void
    let select: (GooeyFloatingMenuItem) -> Void

    @ScaledMetric(relativeTo: .title2) private var scaledButtonSize = 64.0
    @State private var availableWidth = Double.infinity

    nonisolated var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    private var buttonSize: Double {
        GooeyFloatingMenuMath.fittedButtonSize(scaledButtonSize, availableWidth: availableWidth)
    }
    private var radius: Double { buttonSize * 2.1 }
    private var width: Double { (radius + buttonSize) * 2 }
    private var height: Double { radius + buttonSize * 2 }
    private var anchor: CGPoint { CGPoint(x: width / 2, y: height - buttonSize * 0.75) }

    private func center(of index: Int) -> CGPoint {
        let target = GooeyFloatingMenuMath.offset(index: index, count: items.count, radius: radius)
        let travel = GooeyFloatingMenuMath.staggered(progress, index: index, count: items.count)
        return CGPoint(x: anchor.x + target.width * travel, y: anchor.y + target.height * travel)
    }

    var body: some View {
        ZStack {
            Rectangle()
                .fill(tint.gradient)
                .mask { blobs }
                .shadow(color: tint.opacity(0.45), radius: 14, y: 8)
                .allowsHitTesting(false)
                .accessibilityHidden(true)

            ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                let travel = GooeyFloatingMenuMath.staggered(progress, index: index, count: items.count)

                Button { select(item) } label: {
                    Image(systemName: item.systemImage)
                        .font(.title3.weight(.semibold))
                        .foregroundStyle(GooeyFloatingMenuContrastingForeground(background: tint))
                        .frame(width: buttonSize * 0.8, height: buttonSize * 0.8)
                        .contentShape(.circle)
                }
                .buttonStyle(.plain)
                .opacity(min(max(travel * 2 - 1, 0), 1))
                .position(center(of: index))
                .allowsHitTesting(isOpen)
                .accessibilityLabel(item.title)
                .accessibilityHidden(!isOpen)
            }

            Button(action: toggle) {
                Image(systemName: "plus")
                    .font(.title2.weight(.bold))
                    .foregroundStyle(GooeyFloatingMenuContrastingForeground(background: tint))
                    .rotationEffect(.degrees(45 * progress))
                    .frame(width: buttonSize, height: buttonSize)
                    .contentShape(.circle)
            }
            .buttonStyle(.plain)
            .position(anchor)
            .accessibilityLabel("Menu")
            .accessibilityValue(isOpen ? "Open" : "Closed")
        }
        .frame(width: width, height: height)
        // The minimum makes this frame report the width on offer, not the wider stage inside it.
        .frame(minWidth: 0, maxWidth: width)
        .onGeometryChange(for: Double.self) { $0.size.width } action: { availableWidth = $0 }
    }

    private var blobs: some View {
        Canvas { context, _ in
            let blur = buttonSize * 0.2
            context.addFilter(.alphaThreshold(min: 0.5, color: .white))
            context.addFilter(.blur(radius: blur))

            context.drawLayer { layer in
                func circle(at center: CGPoint, diameter: Double) {
                    let rect = CGRect(x: center.x - diameter / 2, y: center.y - diameter / 2, width: diameter, height: diameter)
                    layer.fill(Path(ellipseIn: rect), with: .color(.white))
                }

                circle(at: anchor, diameter: buttonSize + blur * 0.5)
                for index in items.indices {
                    let travel = min(GooeyFloatingMenuMath.staggered(progress, index: index, count: items.count), 1)
                    circle(at: center(of: index), diameter: buttonSize * (0.55 + 0.3 * travel) + blur * 0.5)
                }
            }
        }
    }
}

enum GooeyFloatingMenuMath {
    /// Where an option ends up, fanned across the top of the main button.
    static func offset(index: Int, count: Int, radius: Double) -> CGSize {
        let spread = Double.pi * 0.8
        let step = count > 1 ? spread / Double(count - 1) : 0
        let start = count > 1 ? -Double.pi / 2 - spread / 2 : -Double.pi / 2
        let angle = start + step * Double(index)
        return CGSize(width: cos(angle) * radius, height: sin(angle) * radius)
    }

    /// The size the width allows. The outer options reach just under 2.5 button sizes from the centre.
    static func fittedButtonSize(_ size: Double, availableWidth: Double) -> Double {
        min(size, availableWidth / 5)
    }

    /// Each option starts a little after the previous one, and all arrive together at 1.
    static func staggered(_ progress: Double, index: Int, count: Int) -> Double {
        guard count > 1 else { return max(progress, 0) }
        let delay = 0.35 * Double(index) / Double(count - 1)
        return max((progress - delay) / (1 - delay), 0)
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct GooeyFloatingMenuContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct GooeyFloatingMenuDemo: View {
    @State private var lastAction = "Pick an option"

    private var items: [GooeyFloatingMenuItem] {
        [
            GooeyFloatingMenuItem(id: "camera", title: "Camera", systemImage: "camera.fill") { lastAction = "Camera" },
            GooeyFloatingMenuItem(id: "note", title: "Note", systemImage: "square.and.pencil") { lastAction = "Note" },
            GooeyFloatingMenuItem(id: "voice", title: "Voice", systemImage: "waveform") { lastAction = "Voice" },
            GooeyFloatingMenuItem(id: "favorite", title: "Favorite", systemImage: "heart.fill") { lastAction = "Favorite" },
        ]
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            LinearGradient(
                colors: [Color(red: 0.07, green: 0.07, blue: 0.16), Color(red: 0.14, green: 0.1, blue: 0.3)],
                startPoint: .top,
                endPoint: .bottom
            )
            .ignoresSafeArea()

            Text(lastAction)
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            GooeyFloatingMenu(items: items, tint: .pink)
                .padding(.bottom, 24)
        }
    }
}

#Preview {
    GooeyFloatingMenuDemo()
}
```

## Animatable Ring

A progress ring whose arc animates through the @Animatable macro.

Category: Modern. Minimum: iOS 26.0. Path: Components/Modern/AnimatableRing/AnimatableRing.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An arc from `start` to `end` degrees. `@Animatable` writes its `animatableData`.
@available(iOS 26, *)
@Animatable
nonisolated struct AnimatableRingArc: Shape {
    var start: Double
    var end: Double
    @AnimatableIgnored var clockwise = false

    func path(in rect: CGRect) -> Path {
        Path { path in
            path.addArc(
                center: CGPoint(x: rect.midX, y: rect.midY),
                radius: min(rect.width, rect.height) / 2,
                startAngle: .degrees(start - 90),
                endAngle: .degrees(end - 90),
                clockwise: clockwise
            )
        }
    }
}

/// A progress ring whose arc animates through the shape's own `animatableData`.
///
/// With Reduce Motion on, the ring jumps to the new value.
@available(iOS 26, *)
struct AnimatableRing: View {
    let progress: Double
    var title: LocalizedStringKey = "Progress"
    var colors: [Color] = [.mint, .cyan, .blue, .mint]

    @ScaledMetric(relativeTo: .largeTitle) private var lineWidth = 26.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var clamped: Double { min(max(progress, 0), 1) }

    var body: some View {
        ZStack {
            Circle()
                .stroke(.quaternary, lineWidth: lineWidth)

            AnimatableRingArc(start: 0, end: clamped * 360)
                .stroke(
                    AngularGradient(colors: colors, center: .center),
                    style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                )

            Text(clamped, format: .percent.precision(.fractionLength(0)))
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .contentTransition(.numericText(value: clamped))
        }
        .padding(lineWidth / 2)
        .animation(reduceMotion ? nil : .smooth(duration: 0.8), value: clamped)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(title)
        .accessibilityValue(Text(clamped, format: .percent.precision(.fractionLength(0))))
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct AnimatableRingDemo: View {
    @State private var progress = 0.72
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 24) {
            AnimatableRing(progress: progress, title: "Daily goal")
                .frame(width: 260, height: 260)

            Text("Daily goal")
                .font(.title2.bold())
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task {
            guard !reduceMotion else { return }
            let values = [0.28, 0.91, 0.55, 0.72]
            while !Task.isCancelled {
                for value in values where !Task.isCancelled {
                    try? await Task.sleep(for: .seconds(1))
                    progress = value
                }
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    AnimatableRingDemo()
}
```

## Concentric Card

Nested cards whose corners stay concentric with ConcentricRectangle, however deep they sit.

Category: Modern. Minimum: iOS 26.0. Path: Components/Modern/ConcentricCard/ConcentricCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A card that publishes its corners, so `ConcentricCardSurface` views inside stay concentric.
@available(iOS 26, *)
struct ConcentricCard<Background: ShapeStyle, Content: View>: View {
    var cornerRadius: CGFloat = 36
    var padding: CGFloat = 12
    let background: Background
    @ViewBuilder let content: () -> Content

    var body: some View {
        content()
            .padding(padding)
            .background(background, in: .rect(cornerRadius: cornerRadius))
            .containerShape(.rect(cornerRadius: cornerRadius))
    }
}

/// A surface whose corners follow the nearest container shape, however deep or inset it sits.
///
/// `minimumRadius` stops corners from turning square far from the container's edge.
@available(iOS 26, *)
struct ConcentricCardSurface<Background: ShapeStyle, Content: View>: View {
    var padding: CGFloat = 12
    var minimumRadius: CGFloat = 8
    let background: Background
    @ViewBuilder let content: () -> Content

    var body: some View {
        content()
            .padding(padding)
            .background(background, in: ConcentricRectangle(corners: .concentric(minimum: .fixed(minimumRadius))))
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct ConcentricCardDemo: View {
    @State private var inset: CGFloat = 8
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            ConcentricCard(cornerRadius: 56, padding: inset, background: Color.white.opacity(0.16)) {
                ConcentricCardSurface(padding: inset, background: Color.orange.gradient) {
                    VStack(alignment: .leading, spacing: inset) {
                        Label("Concentric", systemImage: "circle.circle")
                            .font(.title2.bold())
                            .foregroundStyle(.white)
                            .padding(16)
                            .frame(maxWidth: .infinity, minHeight: 170, alignment: .bottomLeading)

                        ConcentricCardSurface(background: Color.white) {
                            Text("One shared center")
                                .font(.headline)
                                .foregroundStyle(.black)
                                .frame(maxWidth: .infinity)
                        }
                    }
                }
            }
            .padding(24)
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled else { return }
                withAnimation(.smooth(duration: 0.9)) { inset = inset == 8 ? 20 : 8 }
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    ConcentricCardDemo()
}
```

## Prominent Tab Bar

A tab view whose main action gets the system's prominent tab treatment.

Category: Modern. Minimum: iOS 27.0. Path: Components/Modern/ProminentTabBar/ProminentTabBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

@available(iOS 27, *)
struct ProminentTabBarItem<Value: Hashable>: Identifiable {
    let title: LocalizedStringResource
    let systemImage: String
    let value: Value

    var id: Value { value }
}

/// A tab view whose main action gets the system's prominent tab treatment.
@available(iOS 27, *)
struct ProminentTabBar<Value: Hashable, Content: View>: View {
    let tabs: [ProminentTabBarItem<Value>]
    let prominent: ProminentTabBarItem<Value>
    @Binding var selection: Value
    @ViewBuilder let content: (Value) -> Content

    var body: some View {
        TabView(selection: $selection) {
            ForEach(tabs) { tab in
                Tab(tab.title, systemImage: tab.systemImage, value: tab.value) {
                    content(tab.value)
                }
            }

            Tab(prominent.title, systemImage: prominent.systemImage, value: prominent.value, role: .prominent) {
                content(prominent.value)
            }
        }
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct ProminentTabBarDemo: View {
    private enum Screen: Hashable {
        case feed, explore, inbox, compose
    }

    @State private var selection = Screen.feed

    var body: some View {
        ProminentTabBar(
            tabs: [
                ProminentTabBarItem(title: "Feed", systemImage: "house.fill", value: .feed),
                ProminentTabBarItem(title: "Explore", systemImage: "safari.fill", value: .explore),
                ProminentTabBarItem(title: "Inbox", systemImage: "tray.fill", value: .inbox),
            ],
            prominent: ProminentTabBarItem(title: "Compose", systemImage: "plus", value: .compose),
            selection: $selection
        ) { screen in
            switch screen {
            case .feed: page("Good morning", icon: "sun.max.fill", colors: [.orange, .pink])
            case .explore: page("Find something new", icon: "binoculars.fill", colors: [.teal, .blue])
            case .inbox: page("All caught up", icon: "checkmark.seal.fill", colors: [.green, .mint])
            case .compose: page("Start writing", icon: "square.and.pencil", colors: [.purple, .indigo])
            }
        }
    }

    private func page(_ title: String, icon: String, colors: [Color]) -> some View {
        ZStack {
            LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 14) {
                Image(systemName: icon)
                    .font(.largeTitle)
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text(title)
                    .font(.largeTitle.bold())
            }
            .foregroundStyle(.white)
        }
    }
}

@available(iOS 27, *)
#Preview {
    ProminentTabBarDemo()
}
```

## Scroll Edge Header

A scroll view whose content dissolves under a custom header using the scroll edge effect.

Category: Modern. Minimum: iOS 26.0. Path: Components/Modern/ScrollEdgeHeader/ScrollEdgeHeader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A scroll view whose content dissolves under a custom header.
///
/// The header sits in a safe area bar, which is what lets the scroll edge effect reach it.
@available(iOS 26, *)
struct ScrollEdgeHeader<Header: View, Content: View>: View {
    var style: ScrollEdgeEffectStyle = .soft
    @ViewBuilder let header: () -> Header
    @ViewBuilder let content: () -> Content

    var body: some View {
        ScrollView(content: content)
            .scrollEdgeEffectStyle(style, for: .top)
            .safeAreaBar(edge: .top, content: header)
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct ScrollEdgeHeaderDemo: View {
    @State private var isHard = false

    private let colors: [Color] = [.pink, .orange, .yellow, .green, .teal, .blue, .indigo, .purple]

    var body: some View {
        ScrollEdgeHeader(style: isHard ? .hard : .soft) {
            HStack {
                VStack(alignment: .leading, spacing: 0) {
                    Text("Today")
                        .font(.largeTitle.bold())

                    Text(isHard ? "Hard edge" : "Soft edge")
                        .font(.subheadline.weight(.medium))
                }

                Spacer()

                Button("Change edge style", systemImage: "circle.lefthalf.filled") {
                    isHard.toggle()
                }
                .labelStyle(.iconOnly)
                .buttonStyle(.glass)
                .buttonBorderShape(.circle)
                // The regular size of an icon in a circle is too small to hit.
                .controlSize(.large)
            }
            .padding(.horizontal, 20)
            .padding(.bottom, 10)
        } content: {
            LazyVStack(spacing: 14) {
                ForEach(0..<30, id: \.self) { index in
                    Label("Story \(index + 1)", systemImage: "sparkles")
                        .font(.title3.bold())
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity, minHeight: 120, alignment: .bottomLeading)
                        .padding(18)
                        .background(colors[index % colors.count].gradient, in: .rect(cornerRadius: 24))
                }
            }
            .padding(.horizontal, 20)
        }
    }
}

@available(iOS 26, *)
#Preview {
    ScrollEdgeHeaderDemo()
}
```

## Symbol Draw On

An SF Symbol that draws itself on and off, stroke by stroke.

Category: Modern. Minimum: iOS 26.0. Path: Components/Modern/SymbolDrawOn/SymbolDrawOn.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An SF Symbol that draws itself on and off, stroke by stroke.
///
/// Only symbols with Draw annotations trace their strokes. Others fall back to a simpler
/// appearance. With Reduce Motion on, the symbol fades.
@available(iOS 26, *)
struct SymbolDrawOn: View {
    let systemName: String
    var isDrawn: Bool
    var label: LocalizedStringKey?

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Image(systemName: systemName)
            .symbolEffect(.drawOn.byLayer, isActive: !isDrawn)
            .symbolEffect(.drawOff.byLayer, isActive: !isDrawn)
            .symbolEffectsRemoved(reduceMotion)
            .opacity(reduceMotion && !isDrawn ? 0 : 1)
            .accessibilityRepresentation {
                if let label {
                    Image(systemName: systemName).accessibilityLabel(label)
                }
            }
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct SymbolDrawOnDemo: View {
    @State private var isDrawn = true
    @ScaledMetric(relativeTo: .largeTitle) private var cellSize = 104.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let symbols = ["signature", "scribble", "wind", "sun.max", "cloud.rain", "checkmark.circle"]

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            LazyVGrid(columns: [GridItem(.adaptive(minimum: cellSize))], spacing: 28) {
                ForEach(symbols, id: \.self) { symbol in
                    SymbolDrawOn(systemName: symbol, isDrawn: isDrawn)
                        .font(.largeTitle.weight(.medium))
                        .imageScale(.large)
                        .foregroundStyle(.white)
                        .frame(height: cellSize)
                }
            }
            .padding(24)
        }
        .task {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(isDrawn ? 1.8 : 1.3))
                withAnimation { isDrawn.toggle() }
            }
        }
    }
}

@available(iOS 26, *)
#Preview {
    SymbolDrawOnDemo()
}
```

## Toolbar Overflow Demo

A toolbar that ranks which actions survive when space runs out and keeps others in the overflow menu.

Category: Modern. Minimum: iOS 27.0. Path: Components/Modern/ToolbarOverflowDemo/ToolbarOverflowDemo.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

@available(iOS 27, *)
struct ToolbarOverflowDemoAction: Identifiable {
    let title: String
    let systemImage: String
    var priority: ToolbarItemVisibilityPriority = .automatic
    let perform: () -> Void

    var id: String { title }
}

/// A navigation screen that ranks which toolbar actions survive when space runs out.
///
/// `barActions` leave the bar lowest priority first. `overflowActions` always live in the menu.
/// The title is large, under the bar, where the actions cannot push it out.
@available(iOS 27, *)
struct ToolbarOverflowDemo<Content: View>: View {
    let title: LocalizedStringResource
    let barActions: [ToolbarOverflowDemoAction]
    let overflowActions: [ToolbarOverflowDemoAction]
    @ViewBuilder let content: () -> Content

    var body: some View {
        NavigationStack {
            content()
                .navigationTitle(title)
                .toolbarTitleDisplayMode(.large)
                .toolbar {
                    ForEach(barActions) { action in
                        ToolbarItem(placement: .primaryAction) {
                            button(for: action)
                        }
                        .visibilityPriority(action.priority)
                    }

                    ToolbarOverflowMenu {
                        ForEach(overflowActions, content: button(for:))
                    }
                }
        }
    }

    private func button(for action: ToolbarOverflowDemoAction) -> some View {
        Button(action.title, systemImage: action.systemImage, action: action.perform)
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct ToolbarOverflowDemoDemo: View {
    @State private var lastAction = "Pick an action"

    private func action(
        _ title: String,
        _ systemImage: String,
        _ priority: ToolbarItemVisibilityPriority = .automatic
    ) -> ToolbarOverflowDemoAction {
        ToolbarOverflowDemoAction(title: title, systemImage: systemImage, priority: priority) { lastAction = title }
    }

    var body: some View {
        ToolbarOverflowDemo(
            title: "Draft",
            barActions: [
                action("Share", "square.and.arrow.up", .high),
                action("Flag", "flag", .low),
                action("Comment", "text.bubble"),
                action("Tag", "tag"),
                action("Archive", "archivebox", .low),
                action("Bookmark", "bookmark", .high),
                action("Pin", "pin", .high),
            ],
            overflowActions: [
                action("Duplicate", "plus.square.on.square"),
                action("Export as PDF", "doc.richtext"),
                action("Print", "printer"),
            ]
        ) {
            ZStack {
                LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()
                    .toolbarColorScheme(.dark, for: .navigationBar)

                Text(lastAction)
                    .font(.largeTitle.bold())
                    .foregroundStyle(.white)
                    .contentTransition(.opacity)
                    .animation(.easeInOut, value: lastAction)
            }
        }
    }
}

@available(iOS 27, *)
#Preview {
    ToolbarOverflowDemoDemo()
}
```

## Adaptive Sidebar Layout

A split view driven by one Boolean that collapses to the detail on iPad and swaps columns on iPhone.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/AdaptiveSidebarLayout/AdaptiveSidebarLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A split layout driven by one Boolean: the sidebar is either showing or it is not.
///
/// On iPad the toolbar button collapses the view to the detail alone. On iPhone the same
/// value decides whether the sidebar or the detail is on top of the stack.
struct AdaptiveSidebarLayout<Sidebar: View, Detail: View>: View {
    @Binding var showsSidebar: Bool
    @ViewBuilder let sidebar: () -> Sidebar
    @ViewBuilder let detail: () -> Detail

    @Environment(\.horizontalSizeClass) private var horizontalSizeClass
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        NavigationSplitView(
            columnVisibility: columnVisibility,
            preferredCompactColumn: compactColumn
        ) {
            sidebar()
                .toolbar(removing: .sidebarToggle)
        } detail: {
            detail()
                .toolbar {
                    // On iPhone the system back button already does this job.
                    if horizontalSizeClass == .regular {
                        ToolbarItem(placement: .topBarLeading) {
                            Button(showsSidebar ? "Hide sidebar" : "Show sidebar", systemImage: "sidebar.left") {
                                withAnimation(reduceMotion ? nil : .default) { showsSidebar.toggle() }
                            }
                        }
                    }
                }
        }
    }

    private var columnVisibility: Binding<NavigationSplitViewVisibility> {
        let binding = $showsSidebar
        return Binding(
            get: { binding.wrappedValue ? .all : .detailOnly },
            set: { binding.wrappedValue = $0 != .detailOnly }
        )
    }

    private var compactColumn: Binding<NavigationSplitViewColumn> {
        let binding = $showsSidebar
        return Binding(
            get: { binding.wrappedValue ? .sidebar : .detail },
            set: { binding.wrappedValue = $0 == .sidebar }
        )
    }
}

// MARK: - Demo

private struct AdaptiveSidebarLayoutDemoFolder: Identifiable, Hashable {
    var id: String { title }
    let title: String
    let systemImage: String
    let color: Color
    let count: Int
}

struct AdaptiveSidebarLayoutDemo: View {
    private let folders = [
        AdaptiveSidebarLayoutDemoFolder(title: "Inbox", systemImage: "tray.fill", color: .blue, count: 12),
        AdaptiveSidebarLayoutDemoFolder(title: "Starred", systemImage: "star.fill", color: .orange, count: 3),
        AdaptiveSidebarLayoutDemoFolder(title: "Drafts", systemImage: "doc.fill", color: .purple, count: 5),
        AdaptiveSidebarLayoutDemoFolder(title: "Archive", systemImage: "archivebox.fill", color: .teal, count: 248),
    ]

    @State private var showsSidebar = true
    @State private var selected: AdaptiveSidebarLayoutDemoFolder?

    var body: some View {
        AdaptiveSidebarLayout(showsSidebar: $showsSidebar) {
            List(folders) { folder in
                Button {
                    selected = folder
                    showsSidebar = false
                } label: {
                    Label(folder.title, systemImage: folder.systemImage)
                        .foregroundStyle(folder.color)
                }
                .listRowBackground(selected == folder ? folder.color.opacity(0.15) : nil)
            }
            .navigationTitle("Mail")
        } detail: {
            detail
        }
    }

    @ViewBuilder
    private var detail: some View {
        if let selected {
            ZStack {
                LinearGradient(colors: [selected.color, selected.color.opacity(0.55)], startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()

                VStack(spacing: 14) {
                    Image(systemName: selected.systemImage)
                        .font(.system(.largeTitle, design: .rounded))
                        .accessibilityHidden(true)

                    Text(selected.title)
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("^[\(selected.count) message](inflect: true)")
                        .font(.headline)

                    Button("Folders", systemImage: "sidebar.left") {
                        showsSidebar = true
                    }
                    .buttonStyle(.borderedProminent)
                    .tint(.white)
                    .foregroundStyle(.black)
                    .padding(.top, 10)
                }
                .foregroundStyle(.white)
                .padding()
            }
            .navigationBarTitleDisplayMode(.inline)
        } else {
            ContentUnavailableView("Choose a folder", systemImage: "folder")
        }
    }
}

#Preview {
    AdaptiveSidebarLayoutDemo()
}
```

## Animated Tab Bar

A custom tab bar with a sliding indicator and icons that bounce on selection.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/AnimatedTabBar/AnimatedTabBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct AnimatedTabBarItem<Value: Hashable>: Identifiable {
    let value: Value
    let title: LocalizedStringResource
    let systemImage: String

    var id: Value { value }
}

/// A custom tab bar whose indicator slides to the selected tab while its icon bounces.
///
/// With Reduce Motion on, the indicator jumps and the icons stay still.
struct AnimatedTabBar<Value: Hashable>: View {
    let items: [AnimatedTabBarItem<Value>]
    @Binding var selection: Value
    var tint: Color = .indigo

    @State private var bounces: [Value: Int] = [:]
    @Namespace private var indicator
    @ScaledMetric(relativeTo: .title3) private var iconHeight = 26.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: 4) {
            ForEach(items) { item in
                tabButton(item)
            }
        }
        .padding(6)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.15), radius: 16, y: 8)
        .symbolEffectsRemoved(reduceMotion)
        .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.3), value: selection)
        .onChange(of: selection) { _, newValue in
            bounces[newValue, default: 0] += 1
        }
    }

    private func tabButton(_ item: AnimatedTabBarItem<Value>) -> some View {
        let isSelected = item.value == selection

        return Button {
            withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.3)) {
                selection = item.value
            }
        } label: {
            VStack(spacing: 2) {
                Image(systemName: item.systemImage)
                    .font(.title3.weight(.semibold))
                    .symbolEffect(.bounce, value: bounces[item.value, default: 0])
                    .frame(height: iconHeight)

                Text(item.title)
                    .font(.caption2.weight(.semibold))
                    .lineLimit(1)
            }
            // Not `.secondary`, which takes the color of what is behind the material and can fade into it.
            .foregroundStyle(isSelected ? tint : Color.primary.opacity(0.65))
            .frame(maxWidth: .infinity)
            .padding(.vertical, 8)
            .background {
                if isSelected {
                    Capsule()
                        .fill(tint.opacity(0.18))
                        .matchedGeometryEffect(id: "indicator", in: indicator)
                }
            }
            .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(item.title)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct AnimatedTabBarDemo: View {
    private enum Destination: Hashable {
        case home, search, saved, profile
    }

    private let items: [AnimatedTabBarItem<Destination>] = [
        AnimatedTabBarItem(value: .home, title: "Home", systemImage: "house.fill"),
        AnimatedTabBarItem(value: .search, title: "Search", systemImage: "magnifyingglass"),
        AnimatedTabBarItem(value: .saved, title: "Saved", systemImage: "bookmark.fill"),
        AnimatedTabBarItem(value: .profile, title: "Profile", systemImage: "person.fill"),
    ]

    @State private var selection = Destination.home

    private var page: (headline: String, colors: [Color]) {
        switch selection {
        case .home: ("Your day at a glance", [.indigo, .purple])
        case .search: ("Find anything", [.teal, .blue])
        case .saved: ("Kept for later", [.orange, .pink])
        case .profile: ("All about you", [.green, .teal])
        }
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            LinearGradient(colors: page.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()
                .animation(.easeInOut(duration: 0.4), value: selection)

            Text(page.headline)
                .font(.largeTitle.bold())
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .padding(32)
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            AnimatedTabBar(items: items, selection: $selection)
                .padding(.horizontal, 20)
                .padding(.bottom, 8)
        }
    }
}

#Preview {
    AnimatedTabBarDemo()
}
```

## Bottom Drawer

A draggable bottom drawer that snaps to detents, built as a custom overlay.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/BottomDrawer/BottomDrawer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum BottomDrawerSnapping {
    /// The stop closest to where a drag would come to rest. A drag upwards has a negative `predictedDrag`.
    static func stop(from current: CGFloat, predictedDrag: CGFloat, stops: [CGFloat]) -> CGFloat {
        let projected = current - predictedDrag
        return stops.min { abs($0 - projected) < abs($1 - projected) } ?? current
    }

    /// The stop `step` places away from `current`, held at the ends. With no stops it keeps `current`.
    static func stop(from current: CGFloat, step: Int, stops: [CGFloat]) -> CGFloat {
        let sorted = stops.sorted()
        guard !sorted.isEmpty else { return current }
        let index = sorted.firstIndex(of: current) ?? 0
        return sorted[min(max(index + step, 0), sorted.count - 1)]
    }

    /// Keeps the drawer between its lowest and highest stop while it is dragged.
    static func clamped(_ value: CGFloat, stops: [CGFloat]) -> CGFloat {
        guard let lowest = stops.min(), let highest = stops.max() else { return value }
        return min(max(value, lowest), highest)
    }
}

/// A drawer that rests on detents, given as fractions of the available height.
///
/// Place it above your content in a `ZStack`. The whole drawer is draggable, so keep scrolling
/// content out of it. VoiceOver adjusts the handle. With Reduce Motion on, the drawer snaps without a spring.
struct BottomDrawer<Content: View>: View {
    @Binding var detent: CGFloat
    var detents: [CGFloat] = [0.16, 0.5, 0.88]
    @ViewBuilder var content: Content

    @State private var dragTranslation: CGFloat = 0
    @GestureState private var isDragging = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.2)
    }

    var body: some View {
        GeometryReader { proxy in
            let total = max(proxy.size.height, 1)
            let visible = BottomDrawerSnapping.clamped(detent - dragTranslation / total, stops: detents)

            VStack(spacing: 0) {
                handle
                content
                Spacer(minLength: 0)
            }
            .frame(maxWidth: .infinity)
            .frame(height: (detents.max() ?? 1) * total, alignment: .top)
            .background(.regularMaterial, in: UnevenRoundedRectangle(topLeadingRadius: 28, topTrailingRadius: 28))
            .shadow(color: .black.opacity(0.18), radius: 18, y: -4)
            .contentShape(.rect)
            .offset(y: total * (1 - visible))
            .gesture(dragGesture(total: total))
        }
        .ignoresSafeArea(edges: .bottom)
        .onChange(of: isDragging) { _, dragging in
            if !dragging { withAnimation(animation) { dragTranslation = 0 } }
        }
    }

    private var handle: some View {
        Capsule()
            .fill(.secondary)
            .frame(width: 40, height: 5)
            .padding(.vertical, 12)
            .frame(maxWidth: .infinity)
            .contentShape(.rect)
            .accessibilityElement()
            .accessibilityLabel("Drawer")
            .accessibilityValue("Position \(sortedIndex + 1) of \(detents.count)")
            .accessibilityAdjustableAction { direction in
                switch direction {
                case .increment: moveDetent(by: 1)
                case .decrement: moveDetent(by: -1)
                @unknown default: break
                }
            }
    }

    private var sortedDetents: [CGFloat] { detents.sorted() }
    private var sortedIndex: Int { sortedDetents.firstIndex(of: detent) ?? 0 }

    private func moveDetent(by step: Int) {
        withAnimation(animation) { detent = BottomDrawerSnapping.stop(from: detent, step: step, stops: detents) }
    }

    private func dragGesture(total: CGFloat) -> some Gesture {
        DragGesture()
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { dragTranslation = $0.translation.height }
            .onEnded { value in
                let target = BottomDrawerSnapping.stop(
                    from: detent,
                    predictedDrag: value.predictedEndTranslation.height / total,
                    stops: detents
                )
                withAnimation(animation) {
                    detent = target
                    dragTranslation = 0
                }
            }
    }
}

// MARK: - Demo

struct BottomDrawerDemo: View {
    @State private var detent: CGFloat = 0.16

    private let places = [
        ("Harbor Coffee", "cup.and.saucer.fill", Color.brown),
        ("City Library", "books.vertical.fill", Color.indigo),
        ("Riverside Park", "leaf.fill", Color.green),
        ("Old Town Bakery", "birthday.cake.fill", Color.pink),
    ]

    var body: some View {
        ZStack {
            LinearGradient(colors: [.teal, .cyan, .mint], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            Image(systemName: "mappin.and.ellipse")
                .font(.largeTitle)
                .imageScale(.large)
                .foregroundStyle(.white)
                .shadow(radius: 6)
                .offset(y: -180)
                .accessibilityHidden(true)

            BottomDrawer(detent: $detent) {
                VStack(alignment: .leading, spacing: 18) {
                    Text("Nearby")
                        .font(.title2.bold())

                    ForEach(places, id: \.0) { name, symbol, color in
                        Label {
                            Text(name).font(.headline)
                        } icon: {
                            // One width for every symbol, so the names line up.
                            Image(systemName: symbol).foregroundStyle(color.gradient).frame(width: 28)
                        }
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal, 24)
            }
        }
    }
}

#Preview {
    BottomDrawerDemo()
}
```

## Breadcrumb Trail

A breadcrumb path that moves its middle crumbs into a menu when it runs out of width.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/BreadcrumbTrail/BreadcrumbTrail.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct BreadcrumbTrailItem: Identifiable, Hashable {
    let id: String
    let title: String
}

/// A breadcrumb path. When it is wider than its space, the middle crumbs move into a menu.
///
/// If even the shortest form does not fit, as at the largest text sizes, the row scrolls.
struct BreadcrumbTrail: View {
    let items: [BreadcrumbTrailItem]
    let onSelect: (BreadcrumbTrailItem) -> Void

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// A crumb is a short line of text, too small to hit. This padding widens what answers to a
    /// touch, and the same padding taken back keeps the trail as compact as it was.
    private let touchPadding: CGFloat = 13

    var body: some View {
        ViewThatFits(in: .horizontal) {
            fullRow

            ForEach(BreadcrumbTrailMath.collapsedTails(count: items.count), id: \.self) { tail in
                collapsedRow(tail: tail)
            }

            ScrollView(.horizontal) {
                fullRow
            }
            .scrollIndicators(.hidden)
        }
        .font(.subheadline)
        .animation(reduceMotion ? nil : .snappy, value: items)
    }

    private var fullRow: some View {
        HStack(spacing: 6) {
            crumbs(items[...])
        }
    }

    private func collapsedRow(tail: Int) -> some View {
        let parts = BreadcrumbTrailMath.split(items, tail: tail)

        return HStack(spacing: 6) {
            crumbs(parts.head)
            separator
            Menu {
                ForEach(parts.hidden) { item in
                    Button(item.title) { onSelect(item) }
                }
            } label: {
                Image(systemName: "ellipsis.circle.fill")
                    .symbolRenderingMode(.hierarchical)
                    .imageScale(.large)
                    .padding(touchPadding)
                    .contentShape(.rect)
                    .padding(-touchPadding)
            }
            .accessibilityLabel("More")
            separator
            crumbs(parts.tail)
        }
    }

    @ViewBuilder
    private func crumbs(_ slice: ArraySlice<BreadcrumbTrailItem>) -> some View {
        ForEach(slice) { item in
            if item != slice.first {
                separator
            }

            if item == items.last {
                Text(item.title)
                    .fontWeight(.semibold)
                    .lineLimit(1)
                    .fixedSize()
                    .accessibilityAddTraits(.isSelected)
            } else {
                Button {
                    onSelect(item)
                } label: {
                    Text(item.title)
                        .padding(.vertical, touchPadding)
                        .contentShape(.rect)
                        .padding(.vertical, -touchPadding)
                }
                .lineLimit(1)
                .fixedSize()
            }
        }
    }

    private var separator: some View {
        Image(systemName: "chevron.compact.forward")
            .foregroundStyle(.tertiary)
            .accessibilityHidden(true)
    }
}

enum BreadcrumbTrailMath {
    /// How many trailing crumbs each collapsed form keeps, from the widest form to the narrowest.
    static func collapsedTails(count: Int) -> [Int] {
        guard count > 2 else { return [] }
        return Array((1...min(count - 2, 3)).reversed())
    }

    /// Keeps the first crumb and the last `tail` crumbs. The rest go in the menu.
    static func split<Element>(
        _ items: [Element],
        tail: Int
    ) -> (head: ArraySlice<Element>, hidden: ArraySlice<Element>, tail: ArraySlice<Element>) {
        guard let first = items.indices.first else { return ([], [], []) }
        let tailStart = max(items.count - max(tail, 0), first + 1)
        return (items[first...first], items[(first + 1)..<tailStart], items[tailStart...])
    }
}

// MARK: - Demo

struct BreadcrumbTrailDemo: View {
    private let tree = ["Home", "Projects", "Mobile", "Catalog", "Components", "Navigation"]

    @State private var depth = 2

    private var trail: [BreadcrumbTrailItem] {
        tree.prefix(depth).map { BreadcrumbTrailItem(id: $0, title: $0) }
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.teal.opacity(0.35), .indigo.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 28) {
                BreadcrumbTrail(items: trail) { item in
                    if let index = tree.firstIndex(of: item.title) {
                        depth = index + 1
                    }
                }

                Image(systemName: "folder.fill")
                    .font(.system(.largeTitle, design: .rounded))
                    .foregroundStyle(.teal.gradient)
                    .accessibilityHidden(true)

                Button("Open", systemImage: "arrow.forward") {
                    depth = depth < tree.count ? depth + 1 : 1
                }
                .buttonStyle(.borderedProminent)
                .tint(.indigo)
            }
            .padding(24)
            .frame(maxWidth: .infinity, alignment: .leading)
            .background(.regularMaterial, in: .rect(cornerRadius: 24))
            .padding(16)
        }
    }
}

#Preview {
    BreadcrumbTrailDemo()
}
```

## Drag To Dismiss Screen

A full-screen page that follows a downward drag, shrinks and fades, then leaves when released past a threshold.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/DragToDismissScreen/DragToDismissScreen.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A full-screen page that follows a downward drag and leaves when released past a threshold.
///
/// Remove the view from `onDismiss`. With Reduce Motion on, the page does not scale and
/// leaves at once. VoiceOver users dismiss it with the escape gesture.
struct DragToDismissScreen<Content: View>: View {
    var threshold: CGFloat = 140
    let onDismiss: () -> Void
    @ViewBuilder let content: () -> Content

    @GestureState private var liveOffset: CGFloat = 0
    @State private var settledOffset: CGFloat = 0
    @State private var isDismissing = false
    @State private var screenHeight: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var progress: CGFloat {
        DragToDismissScreenMath.progress(offset: settledOffset + liveOffset, threshold: threshold)
    }

    var body: some View {
        content()
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .scaleEffect(reduceMotion ? 1 : 1 - 0.1 * progress)
            .opacity(1 - 0.3 * progress)
            .offset(y: settledOffset + liveOffset)
            .gesture(dragGesture)
            .allowsHitTesting(!isDismissing)
            .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { screenHeight = $0 }
            .accessibilityElement(children: .contain)
            .accessibilityAction(.escape) { dismiss(from: 0) }
    }

    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 16)
            .updating($liveOffset) { value, state, _ in
                state = max(value.translation.height, 0)
            }
            .onEnded { value in
                let translation = max(value.translation.height, 0)
                let shouldDismiss = DragToDismissScreenMath.shouldDismiss(
                    translation: translation,
                    predicted: value.predictedEndTranslation.height,
                    threshold: threshold
                )
                if shouldDismiss {
                    dismiss(from: translation)
                } else {
                    // Takes over from the gesture state, which resets without animating.
                    settledOffset = translation
                    withAnimation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.2)) {
                        settledOffset = 0
                    }
                }
            }
    }

    private func dismiss(from offset: CGFloat) {
        guard !isDismissing else { return }
        isDismissing = true

        if reduceMotion {
            onDismiss()
            return
        }

        settledOffset = offset
        withAnimation(.easeIn(duration: 0.25), completionCriteria: .logicallyComplete) {
            settledOffset = max(screenHeight, threshold * 4)
        } completion: {
            onDismiss()
        }
    }
}

enum DragToDismissScreenMath {
    /// How far the drag has gone towards the threshold, from 0 to 1.
    static func progress(offset: CGFloat, threshold: CGFloat) -> CGFloat {
        guard threshold > 0 else { return offset > 0 ? 1 : 0 }
        return min(max(offset, 0) / threshold, 1)
    }

    /// A long drag dismisses, and so does a quick flick that was heading far enough.
    static func shouldDismiss(translation: CGFloat, predicted: CGFloat, threshold: CGFloat) -> Bool {
        guard translation > 0 else { return false }
        return translation >= threshold || predicted >= threshold * 2
    }
}

// MARK: - Demo

struct DragToDismissScreenDemo: View {
    @State private var isOpen = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            Color(red: 0.08, green: 0.08, blue: 0.14)
                .ignoresSafeArea()

            Button("Open", systemImage: "arrow.up.left.and.arrow.down.right") {
                withAnimation(reduceMotion ? nil : .smooth(duration: 0.35)) { isOpen = true }
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .tint(.orange)

            if isOpen {
                DragToDismissScreen(onDismiss: { isOpen = false }) {
                    page
                }
                .transition(.move(edge: .bottom))
                .zIndex(1)
            }
        }
    }

    private var page: some View {
        ZStack {
            LinearGradient(colors: [.orange, .pink, .purple], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(spacing: 16) {
                Capsule()
                    .fill(.white.opacity(0.7))
                    .frame(width: 44, height: 5)
                    .accessibilityHidden(true)

                Spacer()

                Image(systemName: "sun.horizon.fill")
                    .font(.system(.largeTitle, design: .rounded))
                    .accessibilityHidden(true)

                Text("Golden Hour")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Text("Pull down to close")
                    .font(.headline)
                    .opacity(0.85)

                Spacer()
            }
            .foregroundStyle(.white)
            .padding(.top, 12)
        }
    }
}

#Preview {
    DragToDismissScreenDemo()
}
```

## Embedded Web Browser

A small browser inside the app, with an address bar, back, forward, reload and a line that fills while the page loads.

Category: Navigation. Minimum: iOS 26.0. Path: Components/Navigation/EmbeddedWebBrowser/EmbeddedWebBrowser.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI
import WebKit

nonisolated enum EmbeddedWebBrowserLogic {
    /// The address to load for what was typed: as it is when it names its scheme, with `https`
    /// in front when it looks like a host, and nothing when it is neither.
    static func url(from text: String) -> URL? {
        let typed = text.trimmingCharacters(in: .whitespacesAndNewlines)
        guard !typed.isEmpty, !typed.contains(where: \.isWhitespace) else { return nil }
        if let url = URL(string: typed), let scheme = url.scheme, ["http", "https"].contains(scheme.lowercased()), url.host() != nil {
            return url
        }
        guard !typed.contains("://"), typed.contains("."), !typed.hasPrefix("."), !typed.hasSuffix(".") else { return nil }
        return URL(string: "https://\(typed)")
    }

    /// What the address bar shows for a page: its host, without `www.`, or nothing for a page with no address.
    static func host(of url: URL?) -> String {
        guard let host = url?.host() else { return "" }
        return host.hasPrefix("www.") ? String(host.dropFirst(4)) : host
    }
}

/// A small browser inside the app: a web page with an address bar, back, forward and reload,
/// and a line that fills while the page loads. It is built on the `WebView` and `WebPage`
/// that iOS 26 added, with no UIKit.
///
/// Create the `WebPage`, load what it should start on, and hand it over.
@available(iOS 26, *)
struct EmbeddedWebBrowser: View {
    let page: WebPage

    @State private var address = ""
    @State private var selection: TextSelection?
    @FocusState private var isEditing: Bool

    private let touchTarget: CGFloat = 44

    var body: some View {
        VStack(spacing: 0) {
            WebView(page)

            if page.isLoading {
                ProgressView(value: page.estimatedProgress)
                    .progressViewStyle(.linear)
                    .accessibilityLabel("Loading page")
            }

            HStack(spacing: 2) {
                barButton("Back", systemImage: "chevron.backward") {
                    if let item = page.backForwardList.backList.last { _ = page.load(item) }
                }
                .disabled(page.backForwardList.backList.isEmpty)

                barButton("Forward", systemImage: "chevron.forward") {
                    if let item = page.backForwardList.forwardList.first { _ = page.load(item) }
                }
                .disabled(page.backForwardList.forwardList.isEmpty)

                TextField("Address", text: $address, selection: $selection)
                    .focused($isEditing)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
                    .keyboardType(.URL)
                    .submitLabel(.go)
                    .multilineTextAlignment(isEditing ? .leading : .center)
                    .padding(.horizontal, 12)
                    .padding(.vertical, 8)
                    .background(.fill.tertiary, in: .capsule)
                    .onSubmit {
                        if let url = EmbeddedWebBrowserLogic.url(from: address) { _ = page.load(url) }
                    }

                barButton(page.isLoading ? "Stop" : "Reload", systemImage: page.isLoading ? "xmark" : "arrow.clockwise") {
                    if page.isLoading {
                        page.stopLoading()
                    } else {
                        _ = page.reload()
                    }
                }
            }
            .labelStyle(.iconOnly)
            .font(.body.weight(.medium))
            .padding(.horizontal, 6)
            .padding(.vertical, 4)
            .background(.bar)
        }
        .onChange(of: page.url, initial: true) { _, url in
            if !isEditing { address = EmbeddedWebBrowserLogic.host(of: url) }
        }
        .onChange(of: isEditing) { _, editing in
            address = editing ? (page.url?.absoluteString ?? "") : EmbeddedWebBrowserLogic.host(of: page.url)
            // The whole address is selected, as in Safari, so typing replaces it.
            selection = editing ? TextSelection(range: address.startIndex..<address.endIndex) : nil
        }
    }

    /// An icon button with a touch target of the recommended size.
    private func barButton(_ title: LocalizedStringResource, systemImage: String, action: @escaping () -> Void) -> some View {
        Button(action: action) {
            Label { Text(title) } icon: { Image(systemName: systemImage) }
                .frame(minWidth: touchTarget, minHeight: touchTarget)
                .contentShape(.rect)
        }
    }
}

// MARK: - Demo

/// Serves the pages of the demo from the app under a scheme of its own, so it needs no network
/// and its links are real navigations, with a way back.
@available(iOS 26, *)
private nonisolated struct EmbeddedWebBrowserDemoPages: URLSchemeHandler {
    private static let walks = [
        "cliffs": ("The cliffs", "An hour along the edge, with the wind for company and gulls below your feet."),
        "lighthouse": ("The lighthouse", "Flat and easy. Go at dusk, when the lamp starts to turn."),
        "marsh": ("The marsh", "Boardwalks over still water. Bring binoculars and patience."),
    ]

    func reply(for request: URLRequest) -> AsyncThrowingStream<URLSchemeTaskResult, any Error> {
        AsyncThrowingStream { continuation in
            guard let url = request.url else { return continuation.finish(throwing: URLError(.badURL)) }
            let data = Data(Self.html(for: url.host() ?? "").utf8)
            continuation.yield(.response(URLResponse(url: url, mimeType: "text/html", expectedContentLength: data.count, textEncodingName: "utf-8")))
            continuation.yield(.data(data))
            continuation.finish()
        }
    }

    private static func html(for page: String) -> String {
        let content: String
        if let walk = walks[page] {
            content = "<h1>\(walk.0)</h1><p>\(walk.1)</p><a href=\"guide://home\">&larr; All walks</a>"
        } else {
            let links = walks.keys.sorted().map { "<a href=\"guide://\($0)\">\(walks[$0]?.0 ?? "") &rarr;</a>" }.joined()
            content = "<h1>Field Guide</h1><p>Three short walks near the harbor. Pick one to read about it.</p>\(links)"
        }
        return """
        <!doctype html><html><head><meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
        body { font: -apple-system-body; margin: 0; padding: 24px; color-scheme: light dark; }
        h1 { font: -apple-system-title1; font-weight: 700; margin: 0 0 8px; }
        p { line-height: 1.5; opacity: .8; }
        a { display: block; padding: 16px; margin: 12px 0; border-radius: 16px; background: color-mix(in srgb, CanvasText 8%, transparent); color: inherit; text-decoration: none; font-weight: 600; }
        </style></head><body>\(content)</body></html>
        """
    }
}

@available(iOS 26, *)
struct EmbeddedWebBrowserDemo: View {
    @State private var page: WebPage = {
        var configuration = WebPage.Configuration()
        if let scheme = URLScheme("guide") {
            configuration.urlSchemeHandlers[scheme] = EmbeddedWebBrowserDemoPages()
        }
        return WebPage(configuration: configuration)
    }()

    var body: some View {
        EmbeddedWebBrowser(page: page)
            .task {
                if page.url == nil { _ = page.load(URL(string: "guide://home")) }
            }
    }
}

@available(iOS 26, *)
#Preview {
    EmbeddedWebBrowserDemo()
}
```

## Full Screen Menu Overlay

A full-screen menu that opens over the content and brings its links in one by one.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/FullScreenMenuOverlay/FullScreenMenuOverlay.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct FullScreenMenuOverlayLink: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let action: () -> Void
}

/// A full-screen menu whose links arrive one by one. Add it on top of your content.
///
/// With Reduce Motion on, the menu and its links appear at once.
struct FullScreenMenuOverlay: View {
    @Binding var isPresented: Bool
    let links: [FullScreenMenuOverlayLink]
    var colors: [Color] = [.indigo, .purple, .pink]

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            if isPresented {
                FullScreenMenuOverlayPanel(
                    links: links,
                    colors: colors,
                    close: { isPresented = false }
                )
                .transition(.move(edge: .top).combined(with: .opacity))
            }
        }
        .animation(reduceMotion ? nil : .smooth(duration: 0.4), value: isPresented)
    }
}

private struct FullScreenMenuOverlayPanel: View {
    let links: [FullScreenMenuOverlayLink]
    let colors: [Color]
    let close: () -> Void

    @State private var showsLinks = false
    @ScaledMetric(relativeTo: .largeTitle) private var iconWidth = 48.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack(alignment: .topTrailing) {
            LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            // Scrolls only when large text makes the links taller than the screen.
            ScrollView {
                VStack(alignment: .leading, spacing: 22) {
                    ForEach(Array(links.enumerated()), id: \.element.id) { index, link in
                        row(for: link)
                            .opacity(showsLinks ? 1 : 0)
                            .offset(y: showsLinks ? 0 : 28)
                            .animation(animation(forRow: index), value: showsLinks)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.horizontal, 32)
                .padding(.vertical, 90)
            }
            .scrollBounceBehavior(.basedOnSize)

            Button(action: close) {
                Image(systemName: "xmark")
                    .font(.title3.weight(.bold))
                    .foregroundStyle(.white)
                    .padding(14)
                    .background(.white.opacity(0.2), in: .circle)
            }
            .accessibilityLabel("Close")
            .padding(20)
        }
        .onAppear { showsLinks = true }
        .accessibilityAddTraits(.isModal)
        .accessibilityAction(.escape, close)
    }

    private func animation(forRow index: Int) -> Animation? {
        guard !reduceMotion else { return nil }
        return .spring(duration: 0.55, bounce: 0.25).delay(0.12 + 0.08 * Double(min(index, 12)))
    }

    private func row(for link: FullScreenMenuOverlayLink) -> some View {
        Button {
            close()
            link.action()
        } label: {
            Label {
                Text(link.title)
            } icon: {
                // One width for every symbol, so the titles line up.
                Image(systemName: link.systemImage).frame(width: iconWidth)
            }
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
        }
        .buttonStyle(.plain)
    }
}

// MARK: - Demo

struct FullScreenMenuOverlayDemo: View {
    @State private var isOpen = false
    @State private var page = "Studio"

    private var links: [FullScreenMenuOverlayLink] {
        [
            ("Studio", "paintpalette.fill"),
            ("Projects", "square.grid.2x2.fill"),
            ("Journal", "book.fill"),
            ("Contact", "paperplane.fill"),
        ].map { title, systemImage in
            FullScreenMenuOverlayLink(id: title, title: "\(title)", systemImage: systemImage) { page = title }
        }
    }

    var body: some View {
        ZStack {
            VStack(spacing: 20) {
                HStack {
                    Spacer()
                    Button {
                        isOpen = true
                    } label: {
                        // The padding is part of the button, so all of it answers to a touch.
                        Label("Menu", systemImage: "line.3.horizontal")
                            .padding(20)
                            .contentShape(.rect)
                    }
                    .labelStyle(.iconOnly)
                    .font(.title2.weight(.semibold))
                }

                Spacer()

                Text(page)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .contentTransition(.opacity)

                Spacer()
            }
            .accessibilityHidden(isOpen)

            FullScreenMenuOverlay(isPresented: $isOpen, links: links)
        }
    }
}

#Preview {
    FullScreenMenuOverlayDemo()
}
```

## Navigation Path Router

A router that owns a NavigationPath so any view can push or pop screens by a typed value.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/NavigationPathRouter/NavigationPathRouter.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Owns a stack's path, so that any view can push or pop screens by a typed value.
///
/// Popping more screens than the stack holds is safe: it stops at the root.
@MainActor
@Observable
final class NavigationPathRouter<Destination: Hashable> {
    var path = NavigationPath()

    var depth: Int { path.count }

    func push(_ destination: Destination) {
        path.append(destination)
    }

    func pop(_ count: Int = 1) {
        let removable = min(max(count, 0), path.count)
        guard removable > 0 else { return }
        path.removeLast(removable)
    }

    func popToRoot() {
        pop(path.count)
    }
}

/// A navigation stack wired to a router, which it also places in the environment.
///
/// Read it from any screen with `@Environment(NavigationPathRouter<MyRoute>.self)`.
struct NavigationPathRouterStack<Destination: Hashable, Root: View, Screen: View>: View {
    let router: NavigationPathRouter<Destination>
    @ViewBuilder let root: () -> Root
    @ViewBuilder let screen: (Destination) -> Screen

    var body: some View {
        @Bindable var router = router

        NavigationStack(path: $router.path) {
            root()
                .navigationDestination(for: Destination.self, destination: screen)
        }
        .environment(router)
    }
}

// MARK: - Demo

private enum NavigationPathRouterDemoRoute: String, Hashable, CaseIterable {
    case profile = "Profile"
    case settings = "Settings"
    case about = "About"

    var systemImage: String {
        switch self {
        case .profile: "person.crop.circle.fill"
        case .settings: "gearshape.fill"
        case .about: "info.circle.fill"
        }
    }

    var color: Color {
        switch self {
        case .profile: .blue
        case .settings: .purple
        case .about: .teal
        }
    }
}

private struct NavigationPathRouterDemoScreen: View {
    var current: NavigationPathRouterDemoRoute?

    @Environment(NavigationPathRouter<NavigationPathRouterDemoRoute>.self) private var router

    var body: some View {
        ZStack {
            LinearGradient(colors: [current?.color ?? .indigo, .black.opacity(0.85)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 14) {
                Text("Depth \(router.depth)")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .foregroundStyle(.white)
                    .padding(.bottom, 10)

                ForEach(NavigationPathRouterDemoRoute.allCases.filter { $0 != current }, id: \.self) { route in
                    Button(route.rawValue, systemImage: route.systemImage) { router.push(route) }
                        .frame(maxWidth: .infinity)
                }

                if router.depth > 0 {
                    Button("Root", systemImage: "house.fill") { router.popToRoot() }
                }
            }
            .buttonStyle(.borderedProminent)
            .tint(.white.opacity(0.22))
            .foregroundStyle(.white)
            .padding(32)
        }
        .navigationTitle(current?.rawValue ?? "Router")
        .toolbarColorScheme(.dark, for: .navigationBar)
    }
}

struct NavigationPathRouterDemo: View {
    @State private var router = NavigationPathRouter<NavigationPathRouterDemoRoute>()

    var body: some View {
        NavigationPathRouterStack(router: router) {
            NavigationPathRouterDemoScreen()
        } screen: { route in
            NavigationPathRouterDemoScreen(current: route)
        }
    }
}

#Preview {
    NavigationPathRouterDemo()
}
```

## Page Dots Indicator

Page dots where the current one stretches into a capsule, following a paged TabView or scroll.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/PageDotsIndicator/PageDotsIndicator.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Page dots where the current one stretches into a capsule. Bind `current` to a paged `TabView` or a scroll position.
///
/// With Reduce Motion on, the capsule changes without animating.
struct PageDotsIndicator: View {
    let count: Int
    let current: Int
    var tint: Color = .primary

    @ScaledMetric(relativeTo: .caption) private var dotSize = 8.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        HStack(spacing: dotSize) {
            ForEach(0..<max(count, 0), id: \.self) { index in
                Capsule()
                    .fill(tint.opacity(index == current ? 1 : 0.25))
                    .frame(width: index == current ? dotSize * 3 : dotSize, height: dotSize)
            }
        }
        .animation(reduceMotion ? nil : .spring(duration: 0.35, bounce: 0.3), value: current)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Page")
        .accessibilityValue("\(current + 1) of \(count)")
    }
}

// MARK: - Demo

struct PageDotsIndicatorDemo: View {
    private let pages: [(title: String, symbol: String, colors: [Color])] = [
        ("Plan your trip", "map.fill", [.blue, .indigo]),
        ("Book in seconds", "ticket.fill", [.pink, .orange]),
        ("Pack with a list", "suitcase.fill", [.teal, .green]),
        ("Share the memories", "camera.fill", [.purple, .pink]),
    ]

    @State private var page = 0

    var body: some View {
        VStack(spacing: 24) {
            TabView(selection: $page) {
                ForEach(pages.indices, id: \.self) { index in
                    VStack(spacing: 24) {
                        Image(systemName: pages[index].symbol)
                            .font(.largeTitle)
                            .imageScale(.large)
                            .accessibilityHidden(true)

                        Text(pages[index].title)
                            .font(.title.bold())
                    }
                    .foregroundStyle(.white)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .background(
                        LinearGradient(colors: pages[index].colors, startPoint: .topLeading, endPoint: .bottomTrailing),
                        in: .rect(cornerRadius: 32)
                    )
                    .padding(.horizontal, 20)
                    .tag(index)
                }
            }
            .tabViewStyle(.page(indexDisplayMode: .never))

            PageDotsIndicator(count: pages.count, current: page)
                .padding(.bottom, 16)
        }
    }
}

#Preview {
    PageDotsIndicatorDemo()
}
```

## Scroll Spy Header

A bar of chips that highlights the section at the top of a scroll view and jumps to a section when tapped.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/ScrollSpyHeader/ScrollSpyHeader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A bar of chips that follows a scroll view: the chip of the section at the top is highlighted,
/// and tapping a chip jumps to its section.
///
/// With Reduce Motion on, jumps and the highlight happen without animation.
struct ScrollSpyHeader<Element: Identifiable, Content: View>: View where Element.ID: Sendable {
    let sections: [Element]
    let title: (Element) -> String
    @ViewBuilder let content: (Element) -> Content

    @State private var activeID: Element.ID?
    @State private var visibleIDs: Set<Element.ID> = []
    @State private var isAtEnd = false
    @State private var jumpTarget: Element.ID?
    @State private var isJumping = false
    /// A scroll view reader cannot jump to a section the lazy stack has not built yet. This can.
    @State private var position = ScrollPosition(idType: Element.ID.self)
    @Namespace private var chipNamespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// A jump wins, so the highlight does not flicker across the sections it passes.
    private var highlightedID: Element.ID? {
        jumpTarget ?? activeID ?? sections.first?.id
    }

    var body: some View {
        VStack(spacing: 0) {
            chipBar
            Divider()

            ScrollView {
                LazyVStack(alignment: .leading, spacing: 28) {
                    ForEach(sections) { section in
                        content(section)
                            .id(section.id)
                    }
                }
                .scrollTargetLayout()
                .padding()
            }
            .scrollPosition($position, anchor: .top)
            // The chip that was tapped stays chosen until the list moves again. A short
            // section near the end cannot reach the top, and would lose it to the last one.
            .onScrollPhaseChange { _, phase in
                if phase == .interacting || (phase == .animating && !isJumping) { jumpTarget = nil }
            }
            .onScrollTargetVisibilityChange(idType: Element.ID.self, threshold: 0.01) { ids in
                visibleIDs = Set(ids)
                refreshActiveID()
            }
            .onScrollGeometryChange(for: Bool.self) { geometry in
                ScrollSpyHeaderMath.isAtEnd(
                    visibleMaxY: geometry.visibleRect.maxY,
                    contentHeight: geometry.contentSize.height,
                    containerHeight: geometry.containerSize.height
                )
            } action: { _, newValue in
                isAtEnd = newValue
                refreshActiveID()
            }
        }
    }

    private var chipBar: some View {
        ScrollViewReader { chipProxy in
            ScrollView(.horizontal) {
                HStack(spacing: 8) {
                    ForEach(sections) { section in
                        chip(for: section)
                            .id(section.id)
                    }
                }
                .padding(.horizontal)
                .padding(.vertical, 10)
            }
            .scrollIndicators(.hidden)
            .onChange(of: highlightedID) { _, newValue in
                guard let newValue else { return }
                withAnimation(reduceMotion ? nil : .smooth) {
                    chipProxy.scrollTo(newValue, anchor: .center)
                }
            }
        }
    }

    private func chip(for section: Element) -> some View {
        let isActive = section.id == highlightedID

        return Button {
            jump(to: section.id)
        } label: {
            Text(title(section))
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(isActive ? Color.white : Color.primary)
                .padding(.horizontal, 14)
                .padding(.vertical, 8)
                .background {
                    if isActive {
                        Capsule()
                            .fill(.tint)
                            .matchedGeometryEffect(id: "active", in: chipNamespace)
                    } else {
                        Capsule()
                            .fill(.quaternary)
                    }
                }
                // A little taller for a touch than it looks, up to the size of a touch target.
                .padding(.vertical, 5)
                .contentShape(.rect)
                .padding(.vertical, -5)
        }
        .buttonStyle(.plain)
        .accessibilityAddTraits(isActive ? .isSelected : [])
        .animation(reduceMotion ? nil : .snappy, value: highlightedID)
    }

    private func jump(to id: Element.ID) {
        jumpTarget = id
        isJumping = true
        withAnimation(reduceMotion ? nil : .smooth(duration: 0.45), completionCriteria: .logicallyComplete) {
            position.scrollTo(id: id, anchor: .top)
        } completion: {
            isJumping = false
            refreshActiveID()
        }
    }

    private func refreshActiveID() {
        activeID = ScrollSpyHeaderMath.activeID(
            order: sections.map(\.id),
            visible: visibleIDs,
            isAtEnd: isAtEnd,
            previous: activeID
        )
    }
}

enum ScrollSpyHeaderMath {
    /// The first section still on screen, or the last one once the end is reached,
    /// because a short final section can never scroll to the top.
    static func activeID<ID: Hashable>(order: [ID], visible: Set<ID>, isAtEnd: Bool, previous: ID?) -> ID? {
        if isAtEnd, let last = order.last { return last }
        return order.first(where: visible.contains) ?? previous
    }

    static func isAtEnd(visibleMaxY: CGFloat, contentHeight: CGFloat, containerHeight: CGFloat) -> Bool {
        contentHeight > containerHeight && visibleMaxY >= contentHeight - 1
    }
}

// MARK: - Demo

private struct ScrollSpyHeaderDemoSection: Identifiable {
    var id: String { chip }
    let chip: String
    let heading: String
    let color: Color
    let dishes: [String]
}

struct ScrollSpyHeaderDemo: View {
    private let sections = [
        ScrollSpyHeaderDemoSection(chip: "Starters", heading: "To begin", color: .green, dishes: ["Garden salad", "Tomato bruschetta", "Crispy calamari", "Grilled halloumi", "Olive plate"]),
        ScrollSpyHeaderDemoSection(chip: "Mains", heading: "From the kitchen", color: .orange, dishes: ["Wood-fired pizza", "Pumpkin risotto", "Roast chicken", "Seared tuna", "Mushroom pasta"]),
        ScrollSpyHeaderDemoSection(chip: "Sides", heading: "On the side", color: .teal, dishes: ["Rosemary fries", "Charred greens", "Warm flatbread", "Slaw"]),
        ScrollSpyHeaderDemoSection(chip: "Desserts", heading: "Something sweet", color: .pink, dishes: ["Lemon tart", "Dark chocolate mousse", "Vanilla panna cotta", "Fig ice cream"]),
        ScrollSpyHeaderDemoSection(chip: "Drinks", heading: "To sip", color: .indigo, dishes: ["Sparkling water", "Iced tea", "Espresso"]),
    ]

    var body: some View {
        ScrollSpyHeader(sections: sections, title: \.chip) { section in
            VStack(alignment: .leading, spacing: 12) {
                Text(section.heading)
                    .font(.title2.bold())
                    .accessibilityAddTraits(.isHeader)

                ForEach(section.dishes, id: \.self) { dish in
                    HStack(spacing: 14) {
                        RoundedRectangle(cornerRadius: 12)
                            .fill(section.color.gradient)
                            .frame(width: 52, height: 52)
                            .overlay {
                                Image(systemName: "fork.knife")
                                    .foregroundStyle(.white)
                            }
                            .accessibilityHidden(true)

                        Text(dish)
                            .font(.body.weight(.medium))
                    }
                }
            }
        }
        .tint(.indigo)
    }
}

#Preview {
    ScrollSpyHeaderDemo()
}
```

## Scroll To Top Button

A floating button that appears after scrolling down and returns the scroll view to the top.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/ScrollToTopButton/ScrollToTopButton.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A scroll view that shows a floating button after scrolling down, which returns to the top.
///
/// With Reduce Motion on, the button fades and the view jumps to the top.
struct ScrollToTopButton<Content: View>: View {
    var threshold: CGFloat = 320
    var tint: Color = .indigo
    @ViewBuilder var content: Content

    @State private var position = ScrollPosition(edge: .top)
    @State private var isVisible = false
    @ScaledMetric(relativeTo: .title3) private var buttonSize = 52.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            content
        }
        .scrollPosition($position)
        .onScrollGeometryChange(for: Bool.self) { geometry in
            geometry.contentOffset.y + geometry.contentInsets.top > threshold
        } action: { _, isPastThreshold in
            withAnimation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.4, bounce: 0.35)) {
                isVisible = isPastThreshold
            }
        }
        .overlay(alignment: .bottomTrailing) {
            if isVisible {
                button
                    .padding(20)
                    .transition(reduceMotion ? .opacity : .scale(scale: 0.4).combined(with: .opacity))
            }
        }
    }

    private var button: some View {
        Button {
            withAnimation(reduceMotion ? nil : .smooth(duration: 0.5)) {
                position.scrollTo(edge: .top)
            }
        } label: {
            Image(systemName: "arrow.up")
                .font(.title3.bold())
                .foregroundStyle(ScrollToTopButtonContrastingForeground(background: tint))
                .frame(width: buttonSize, height: buttonSize)
                .background(tint.gradient, in: .circle)
                .shadow(color: .black.opacity(0.25), radius: 10, y: 5)
        }
        .buttonStyle(.plain)
        .accessibilityLabel("Back to top")
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct ScrollToTopButtonContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct ScrollToTopButtonDemo: View {
    private let colors: [Color] = [.indigo, .blue, .teal, .green, .orange, .pink]

    var body: some View {
        ScrollToTopButton {
            LazyVStack(spacing: 14) {
                ForEach(0..<30, id: \.self) { index in
                    HStack(spacing: 14) {
                        Image(systemName: "photo.fill")
                            .font(.title2)
                            .foregroundStyle(.white)
                            .frame(width: 60, height: 60)
                            .background(colors[index % colors.count].gradient, in: .rect(cornerRadius: 14))
                            .accessibilityHidden(true)

                        VStack(alignment: .leading, spacing: 4) {
                            Text("Story \(index + 1)")
                                .font(.headline)
                            Text("A short description of this story")
                                .font(.subheadline)
                                .foregroundStyle(.secondary)
                        }

                        Spacer(minLength: 0)
                    }
                    .padding(12)
                    .background(.regularMaterial, in: .rect(cornerRadius: 18))
                }
            }
            .padding(16)
        }
    }
}

#Preview {
    ScrollToTopButtonDemo()
}
```

## Search Scopes And Suggestions

A modifier that adds a search field with scope buttons and suggestion rows that narrow as you type.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/SearchScopesAndSuggestions/SearchScopesAndSuggestions.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Adds a search field with scope buttons and suggestion rows. Apply it inside a `NavigationStack`.
///
/// Tapping a suggestion fills in the field. The suggestions narrow as the person types.
struct SearchScopesAndSuggestions<Scope: Hashable>: ViewModifier {
    @Binding var text: String
    @Binding var isPresented: Bool
    @Binding var scope: Scope
    let scopes: [Scope]
    let scopeTitle: (Scope) -> String
    let suggestions: [String]
    var prompt: LocalizedStringResource = "Search"

    func body(content: Content) -> some View {
        content
            .searchable(text: $text, isPresented: $isPresented, prompt: prompt)
            .searchScopes($scope, activation: .onSearchPresentation) {
                ForEach(scopes, id: \.self) { scope in
                    Text(scopeTitle(scope)).tag(scope)
                }
            }
            .searchSuggestions {
                ForEach(SearchScopesAndSuggestionsMath.matches(in: suggestions, for: text), id: \.self) { suggestion in
                    Label(suggestion, systemImage: "magnifyingglass")
                        .searchCompletion(suggestion)
                }
            }
    }
}

enum SearchScopesAndSuggestionsMath {
    /// The suggestions worth showing: unique, containing the text, and not what is already typed.
    static func matches(in suggestions: [String], for text: String, limit: Int = 5) -> [String] {
        let query = text.trimmingCharacters(in: .whitespacesAndNewlines)
        var seen = Set<String>()
        let unique = suggestions.filter { seen.insert($0).inserted }

        let matching = query.isEmpty
            ? unique
            : unique.filter { $0.localizedStandardContains(query) && $0.localizedCaseInsensitiveCompare(query) != .orderedSame }
        return Array(matching.prefix(max(limit, 0)))
    }
}

// MARK: - Demo

private enum SearchScopesAndSuggestionsDemoScope: String, CaseIterable {
    case all = "All"
    case fruit = "Fruit"
    case vegetable = "Vegetables"
}

private struct SearchScopesAndSuggestionsDemoProduce: Identifiable {
    var id: String { name }
    let name: String
    let symbol: String
    let scope: SearchScopesAndSuggestionsDemoScope
}

struct SearchScopesAndSuggestionsDemo: View {
    private let produce = [
        SearchScopesAndSuggestionsDemoProduce(name: "Apple", symbol: "apple.logo", scope: .fruit),
        SearchScopesAndSuggestionsDemoProduce(name: "Apricot", symbol: "leaf.fill", scope: .fruit),
        SearchScopesAndSuggestionsDemoProduce(name: "Grape", symbol: "circle.grid.3x3.fill", scope: .fruit),
        SearchScopesAndSuggestionsDemoProduce(name: "Papaya", symbol: "sun.max.fill", scope: .fruit),
        SearchScopesAndSuggestionsDemoProduce(name: "Asparagus", symbol: "leaf", scope: .vegetable),
        SearchScopesAndSuggestionsDemoProduce(name: "Bell pepper", symbol: "flame.fill", scope: .vegetable),
        SearchScopesAndSuggestionsDemoProduce(name: "Carrot", symbol: "carrot.fill", scope: .vegetable),
        SearchScopesAndSuggestionsDemoProduce(name: "Spinach", symbol: "leaf.circle.fill", scope: .vegetable),
    ]

    @State private var text = ""
    @State private var isSearching = false
    @State private var scope = SearchScopesAndSuggestionsDemoScope.all

    private var results: [SearchScopesAndSuggestionsDemoProduce] {
        produce.filter { item in
            (scope == .all || item.scope == scope) && (text.isEmpty || item.name.localizedStandardContains(text))
        }
    }

    var body: some View {
        NavigationStack {
            List(results) { item in
                Label(item.name, systemImage: item.symbol)
            }
            .overlay {
                if results.isEmpty {
                    ContentUnavailableView.search(text: text)
                }
            }
            .navigationTitle("Market")
            .modifier(
                SearchScopesAndSuggestions(
                    text: $text,
                    isPresented: $isSearching,
                    scope: $scope,
                    scopes: SearchScopesAndSuggestionsDemoScope.allCases,
                    scopeTitle: \.rawValue,
                    suggestions: produce.map(\.name)
                )
            )
            // The scope bar goes away with the search, so its filter does too.
            .onChange(of: isSearching) { _, isSearching in
                if !isSearching { scope = .all }
            }
        }
    }
}

#Preview {
    SearchScopesAndSuggestionsDemo()
}
```

## Side Drawer

A side menu that slides in and pushes the content away, with drag to open and close.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/SideDrawer/SideDrawer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A side menu that pushes the content away. Drag sideways or tap the content to close it.
///
/// With Reduce Motion on, the menu opens and closes without sliding.
struct SideDrawer<MenuContent: View, Content: View>: View {
    @Binding var isOpen: Bool
    var menuWidth: CGFloat = 280
    @ViewBuilder var menu: MenuContent
    @ViewBuilder var content: Content

    @State private var dragTranslation: CGFloat = 0
    @GestureState private var isDragging = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var animation: Animation? {
        reduceMotion ? nil : .spring(duration: 0.45, bounce: 0.15)
    }

    private var pushOffset: CGFloat {
        min(max((isOpen ? menuWidth : 0) + dragTranslation, 0), menuWidth)
    }

    var body: some View {
        ZStack(alignment: .leading) {
            menu
                .frame(width: menuWidth)
                .frame(maxHeight: .infinity)
                .offset(x: pushOffset - menuWidth)
                .accessibilityHidden(!isOpen)

            content
                .frame(maxWidth: .infinity, maxHeight: .infinity)
                .accessibilityHidden(isOpen)
                .overlay {
                    if isOpen {
                        Button {
                            isOpen = false
                        } label: {
                            Color.clear.contentShape(.rect)
                        }
                        .buttonStyle(.plain)
                        .accessibilityLabel("Close menu")
                    }
                }
                .shadow(color: .black.opacity(pushOffset > 0 ? 0.3 : 0), radius: 20)
                .offset(x: pushOffset)
        }
        .gesture(dragGesture)
        .animation(animation, value: isOpen)
        .onChange(of: isDragging) { _, dragging in
            if !dragging { withAnimation(animation) { dragTranslation = 0 } }
        }
    }

    private var dragGesture: some Gesture {
        DragGesture(minimumDistance: 20)
            .updating($isDragging) { _, state, _ in state = true }
            .onChanged { dragTranslation = $0.translation.width * forward }
            .onEnded { value in
                let projected = (isOpen ? menuWidth : 0) + value.predictedEndTranslation.width * forward
                withAnimation(animation) {
                    isOpen = projected > menuWidth / 2
                    dragTranslation = 0
                }
            }
    }
}

// MARK: - Demo

struct SideDrawerDemo: View {
    private let destinations = [
        ("Inbox", "tray.fill"),
        ("Starred", "star.fill"),
        ("Archive", "archivebox.fill"),
        ("Settings", "gearshape.fill"),
    ]

    @State private var isOpen = false
    @State private var current = "tray.fill"

    var body: some View {
        SideDrawer(isOpen: $isOpen) {
            VStack(alignment: .leading, spacing: 2) {
                Text("Workspace")
                    .font(.title2.bold())
                    .padding(.bottom, 20)

                ForEach(destinations, id: \.0) { name, symbol in
                    Button {
                        current = symbol
                        isOpen = false
                    } label: {
                        // The whole row answers to a touch, not only its text.
                        Label(name, systemImage: symbol)
                            .font(.headline)
                            .frame(maxWidth: .infinity, minHeight: 44, alignment: .leading)
                            .contentShape(.rect)
                    }
                }

                Spacer()
            }
            .foregroundStyle(.white)
            .buttonStyle(.plain)
            .padding(.top, 40)
            .padding(.horizontal, 28)
            .frame(maxWidth: .infinity, alignment: .leading)
        } content: {
            ZStack(alignment: .topLeading) {
                LinearGradient(colors: [.orange, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea()

                Image(systemName: current)
                    .font(.largeTitle)
                    .imageScale(.large)
                    .foregroundStyle(.white)
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .accessibilityHidden(true)

                Button {
                    isOpen = true
                } label: {
                    Image(systemName: "line.3.horizontal")
                        .font(.title2.bold())
                        .foregroundStyle(.white)
                        .padding(14)
                        .background(.white.opacity(0.2), in: .circle)
                }
                .buttonStyle(.plain)
                .accessibilityLabel("Menu")
                .padding(20)
            }
        }
        .background(LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom).ignoresSafeArea())
    }
}

#Preview {
    SideDrawerDemo()
}
```

## Sidebar Adaptive Tabs

The same tabs as a bottom tab bar on iPhone and as a sidebar on iPad.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/SidebarAdaptiveTabs/SidebarAdaptiveTabs.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct SidebarAdaptiveTabsItem<Value: Hashable>: Identifiable {
    let title: LocalizedStringResource
    let systemImage: String
    let value: Value

    var id: Value { value }
}

/// The same tabs as a bottom tab bar on iPhone and as a sidebar people can show on iPad.
struct SidebarAdaptiveTabs<Value: Hashable, Content: View>: View {
    @Binding var selection: Value
    let tabs: [SidebarAdaptiveTabsItem<Value>]
    @ViewBuilder let content: (SidebarAdaptiveTabsItem<Value>) -> Content

    var body: some View {
        TabView(selection: $selection) {
            ForEach(tabs) { item in
                // The initializer that takes the title needs iOS 26 for a localizable one.
                Tab(value: item.value) {
                    content(item)
                } label: {
                    Label { Text(item.title) } icon: { Image(systemName: item.systemImage) }
                }
            }
        }
        .tabViewStyle(.sidebarAdaptable)
    }
}

// MARK: - Demo

private enum SidebarAdaptiveTabsDemoPage: Hashable {
    case home, explore, library, profile

    var headline: String {
        switch self {
        case .home: "Today's picks"
        case .explore: "New places"
        case .library: "Saved stories"
        case .profile: "Your account"
        }
    }

    var colors: [Color] {
        switch self {
        case .home: [.orange, .pink]
        case .explore: [.teal, .blue]
        case .library: [.purple, .indigo]
        case .profile: [.mint, .green]
        }
    }
}

struct SidebarAdaptiveTabsDemo: View {
    @State private var selection = SidebarAdaptiveTabsDemoPage.home

    private let tabs = [
        SidebarAdaptiveTabsItem(title: "Home", systemImage: "house.fill", value: SidebarAdaptiveTabsDemoPage.home),
        SidebarAdaptiveTabsItem(title: "Explore", systemImage: "safari.fill", value: .explore),
        SidebarAdaptiveTabsItem(title: "Library", systemImage: "books.vertical.fill", value: .library),
        SidebarAdaptiveTabsItem(title: "Profile", systemImage: "person.crop.circle.fill", value: .profile),
    ]

    var body: some View {
        SidebarAdaptiveTabs(selection: $selection, tabs: tabs) { item in
            ZStack {
                LinearGradient(colors: item.value.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea()

                VStack(spacing: 16) {
                    Image(systemName: item.systemImage)
                        .font(.system(.largeTitle, design: .rounded))
                        .accessibilityHidden(true)

                    Text(item.value.headline)
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                        .multilineTextAlignment(.center)
                }
                .foregroundStyle(.white)
                .padding()
            }
            // Before iOS 26 the bar is clear over a page that does not scroll, and its items take the page's color.
            .toolbarBackground(.visible, for: .tabBar)
        }
    }
}

#Preview {
    SidebarAdaptiveTabsDemo()
}
```

## Tab Navigation State Preserve

A tab bar where each tab keeps its own navigation path in one store, so switching back restores your place.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/TabNavigationStatePreserve/TabNavigationStatePreserve.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Keeps one navigation path per tab outside the tabs, so each can be read, reset or restored.
@MainActor
@Observable
final class TabNavigationStatePreserveStore<TabID: Hashable> {
    private(set) var selection: TabID
    private var paths: [TabID: NavigationPath] = [:]

    init(selection: TabID) {
        self.selection = selection
    }

    func path(for tab: TabID) -> NavigationPath {
        paths[tab] ?? NavigationPath()
    }

    func setPath(_ path: NavigationPath, for tab: TabID) {
        paths[tab] = path
    }

    func depth(of tab: TabID) -> Int {
        path(for: tab).count
    }

    func popToRoot(_ tab: TabID) {
        paths[tab] = NavigationPath()
    }

    /// Switches tab. Choosing the tab you are already on takes it back to its root.
    func select(_ tab: TabID) {
        if tab == selection {
            popToRoot(tab)
        } else {
            selection = tab
        }
    }
}

struct TabNavigationStatePreserveItem<TabID: Hashable>: Identifiable {
    let title: LocalizedStringResource
    let systemImage: String
    let tab: TabID

    var id: TabID { tab }
}

/// A tab bar where every tab keeps its own navigation stack.
///
/// Switching away and back restores the screen you left. Tapping the current tab pops
/// it to the root, on the iOS versions where `TabView` reports a repeated selection.
struct TabNavigationStatePreserve<TabID: Hashable, Route: Hashable, Root: View, Screen: View>: View {
    let store: TabNavigationStatePreserveStore<TabID>
    let tabs: [TabNavigationStatePreserveItem<TabID>]
    @ViewBuilder let root: (TabID) -> Root
    @ViewBuilder let screen: (Route) -> Screen

    var body: some View {
        TabView(selection: selection) {
            ForEach(tabs) { item in
                // The initializer that takes the title needs iOS 26 for a localizable one.
                Tab(value: item.tab) {
                    NavigationStack(path: path(for: item.tab)) {
                        root(item.tab)
                            .navigationDestination(for: Route.self, destination: screen)
                    }
                } label: {
                    Label { Text(item.title) } icon: { Image(systemName: item.systemImage) }
                }
            }
        }
    }

    private var selection: Binding<TabID> {
        Binding(get: { store.selection }, set: { store.select($0) })
    }

    private func path(for tab: TabID) -> Binding<NavigationPath> {
        Binding(get: { store.path(for: tab) }, set: { store.setPath($0, for: tab) })
    }
}

// MARK: - Demo

private enum TabNavigationStatePreserveDemoTab: Hashable {
    case home, library
}

private struct TabNavigationStatePreserveDemoPage: View {
    let title: LocalizedStringResource
    let link: String
    let route: Int
    let colors: [Color]
    let depth: Int

    var body: some View {
        ZStack {
            LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(spacing: 18) {
                Text("Level \(depth)")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                NavigationLink(link, value: route)
                    .buttonStyle(.borderedProminent)
                    .tint(.white.opacity(0.25))
            }
            .foregroundStyle(.white)
        }
        .navigationTitle(title)
        // Before iOS 26 the bar is clear over a page that does not scroll, and its items take the page's color.
        .toolbarBackground(.visible, for: .tabBar)
    }
}

struct TabNavigationStatePreserveDemo: View {
    @State private var store = TabNavigationStatePreserveStore(selection: TabNavigationStatePreserveDemoTab.home)

    private let tabs = [
        TabNavigationStatePreserveItem(title: "Home", systemImage: "house.fill", tab: TabNavigationStatePreserveDemoTab.home),
        TabNavigationStatePreserveItem(title: "Library", systemImage: "books.vertical.fill", tab: .library),
    ]

    private func colors(for tab: TabNavigationStatePreserveDemoTab) -> [Color] {
        tab == .home ? [.orange, .pink] : [.teal, .indigo]
    }

    var body: some View {
        TabNavigationStatePreserve(store: store, tabs: tabs) { tab in
            TabNavigationStatePreserveDemoPage(
                title: tab == .home ? "Kitchen" : "Shelves",
                link: tab == .home ? "Recipes" : "Albums",
                route: 1,
                colors: colors(for: tab),
                depth: 0
            )
        } screen: { (level: Int) in
            TabNavigationStatePreserveDemoPage(
                title: "Page \(level)",
                link: "Deeper",
                route: level + 1,
                colors: colors(for: store.selection),
                depth: level
            )
        }
    }
}

#Preview {
    TabNavigationStatePreserveDemo()
}
```

## Two Pane Split Layout

A list and its detail that sit side by side on iPad and share one navigation stack on iPhone, on NavigationSplitView.

Category: Navigation. Minimum: iOS 18.0. Path: Components/Navigation/TwoPaneSplitLayout/TwoPaneSplitLayout.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A list and its detail, side by side when there is room and pushed on one stack when not,
/// on the system's `NavigationSplitView`.
///
/// The system keeps the selection when an iPad rotates or a window is resized, and adds what a
/// split view is expected to have: the button that hides the list, the swipe back on iPhone
/// and the keyboard. The list selects with its own selection, so VoiceOver reads the selected row.
struct TwoPaneSplitLayout<Item: Identifiable & Hashable, Row: View, Detail: View>: View {
    let title: LocalizedStringResource
    let items: [Item]
    @Binding var selection: Item?
    var listWidth: CGFloat = 320
    @ViewBuilder let row: (Item) -> Row
    @ViewBuilder let detail: (Item) -> Detail

    var body: some View {
        NavigationSplitView {
            List(items, selection: $selection) { item in
                NavigationLink(value: item) {
                    row(item)
                }
            }
            .navigationTitle(title)
            .navigationSplitViewColumnWidth(ideal: max(listWidth, 0))
        } detail: {
            if let selection {
                detail(selection)
            } else {
                ContentUnavailableView("Nothing selected", systemImage: "sidebar.left")
            }
        }
        .navigationSplitViewStyle(.balanced)
    }
}

// MARK: - Demo

private struct TwoPaneSplitLayoutDemoTrail: Identifiable, Hashable {
    var id: String { name }
    let name: String
    let distance: Int
    let colors: [Color]
}

struct TwoPaneSplitLayoutDemo: View {
    private let trails = [
        TwoPaneSplitLayoutDemoTrail(name: "Alps", distance: 42, colors: [.blue, .teal]),
        TwoPaneSplitLayoutDemoTrail(name: "Dolomites", distance: 28, colors: [.orange, .pink]),
        TwoPaneSplitLayoutDemoTrail(name: "Pyrenees", distance: 65, colors: [.green, .mint]),
        TwoPaneSplitLayoutDemoTrail(name: "Rockies", distance: 110, colors: [.purple, .indigo]),
    ]

    @State private var selection: TwoPaneSplitLayoutDemoTrail?

    var body: some View {
        TwoPaneSplitLayout(title: "Trails", items: trails, selection: $selection) { trail in
            Label(trail.name, systemImage: "mountain.2.fill")
                .foregroundStyle(trail.colors[0])
        } detail: { trail in
            ZStack {
                LinearGradient(colors: trail.colors, startPoint: .top, endPoint: .bottom)
                    .ignoresSafeArea()

                VStack(spacing: 14) {
                    Image(systemName: "mountain.2.fill")
                        .font(.system(.largeTitle, design: .rounded))
                        .accessibilityHidden(true)

                    Text(trail.name)
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("\(trail.distance) km")
                        .font(.title3.weight(.medium))

                    Button("Done") { selection = nil }
                        .buttonStyle(.borderedProminent)
                        .tint(.white)
                        .foregroundStyle(.black)
                        .padding(.top, 8)
                }
                .foregroundStyle(.white)
                .padding()
            }
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

#Preview {
    TwoPaneSplitLayoutDemo()
}
```

## Permission Primer Screen

The screen shown before the system asks for a permission: what it is for, what the person gets, and one button that leads to the system's question.

Category: Patterns. Minimum: iOS 18.0. Path: Components/Patterns/PermissionPrimerScreen/PermissionPrimerScreen.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PermissionPrimerScreenBenefit: Identifiable {
    let systemImage: String
    let title: LocalizedStringResource
    let text: LocalizedStringResource

    var id: String { systemImage }
}

/// The screen an app shows before the system asks for a permission: what it is for, what the
/// person gets, and one button that leads to the system's question.
///
/// Ask for the permission in `onContinue`. Pass `skipTitle` as nil where the only way on has
/// to be the system's question, as Apple asks before the tracking prompt. With Reduce Motion
/// on, the rings stand still and the benefits appear together.
struct PermissionPrimerScreen: View {
    let systemImage: String
    let title: LocalizedStringResource
    let message: LocalizedStringResource
    let benefits: [PermissionPrimerScreenBenefit]
    var continueTitle: LocalizedStringResource = "Continue"
    var skipTitle: LocalizedStringResource? = "Not Now"
    var tint: Color = .blue
    let onContinue: () -> Void
    var onSkip: () -> Void = {}

    @State private var hasAppeared = false
    @ScaledMetric(relativeTo: .largeTitle) private var heroSize = 96.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let minimumTarget: CGFloat = 44

    var body: some View {
        ScrollView {
            VStack(spacing: 28) {
                hero

                VStack(spacing: 10) {
                    Text(title)
                        .font(.largeTitle.bold())
                        .accessibilityAddTraits(.isHeader)
                    Text(message)
                        .font(.body)
                        .foregroundStyle(.secondary)
                }
                .multilineTextAlignment(.center)

                VStack(alignment: .leading, spacing: 20) {
                    ForEach(Array(benefits.enumerated()), id: \.element.id) { index, benefit in
                        row(benefit)
                            .opacity(hasAppeared ? 1 : 0)
                            .offset(y: hasAppeared || reduceMotion ? 0 : 18)
                            .animation(reduceMotion ? .easeInOut(duration: 0.2) : .spring(duration: 0.5, bounce: 0.2).delay(0.2 + 0.12 * Double(index)), value: hasAppeared)
                    }
                }
                .frame(maxWidth: .infinity, alignment: .leading)
            }
            .padding(.horizontal, 28)
            .padding(.top, 36)
            .padding(.bottom, 16)
        }
        .scrollBounceBehavior(.basedOnSize)
        .safeAreaInset(edge: .bottom) { buttons }
        .onAppear { hasAppeared = true }
    }

    private var hero: some View {
        Image(systemName: systemImage)
            .font(.system(size: heroSize * 0.44, weight: .semibold))
            .foregroundStyle(PermissionPrimerScreenContrastingForeground(background: tint))
            .frame(width: heroSize, height: heroSize)
            .background(tint.gradient, in: .circle)
            .background {
                if !reduceMotion {
                    ForEach(0..<2, id: \.self) { ring in
                        Circle()
                            .stroke(tint, lineWidth: 2)
                            .phaseAnimator([false, true]) { content, isWide in
                                content
                                    .scaleEffect(isWide ? 1.7 : 1)
                                    .opacity(isWide ? 0 : 0.5)
                            } animation: { isWide in
                                isWide ? .easeOut(duration: 2).delay(Double(ring) * 0.7) : .linear(duration: 0.01).delay(Double(1 - ring) * 0.7)
                            }
                    }
                }
            }
            .padding(.vertical, heroSize * 0.3)
            .accessibilityHidden(true)
    }

    private func row(_ benefit: PermissionPrimerScreenBenefit) -> some View {
        HStack(alignment: .top, spacing: 16) {
            Image(systemName: benefit.systemImage)
                .font(.title2)
                .foregroundStyle(tint)
                .frame(width: 36)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text(benefit.title)
                    .font(.headline)
                Text(benefit.text)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
        }
        .accessibilityElement(children: .combine)
    }

    private var buttons: some View {
        VStack(spacing: 4) {
            Button(action: onContinue) {
                Text(continueTitle)
                    .font(.headline)
                    .foregroundStyle(PermissionPrimerScreenContrastingForeground(background: tint))
                    .frame(maxWidth: .infinity, minHeight: 54)
                    .background(tint.gradient, in: .rect(cornerRadius: 16))
            }
            .buttonStyle(.plain)

            if let skipTitle {
                Button(action: onSkip) {
                    Text(skipTitle)
                        .font(.subheadline.weight(.medium))
                        .frame(maxWidth: .infinity, minHeight: minimumTarget)
                        .contentShape(.rect)
                }
                .buttonStyle(.plain)
                .foregroundStyle(.secondary)
            }
        }
        .padding(.horizontal, 24)
        .padding(.top, 12)
        .padding(.bottom, 8)
        .background(.bar)
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct PermissionPrimerScreenContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct PermissionPrimerScreenDemo: View {
    private enum Answer {
        case allowed, later
    }

    @State private var answer: Answer?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            if let answer {
                // Only for this demo: what came of the choice, and a way back to the screen.
                ContentUnavailableView {
                    Label(answer == .allowed ? "The system would ask now" : "Maybe later", systemImage: answer == .allowed ? "bell.badge.fill" : "moon.zzz.fill")
                } description: {
                    Text(answer == .allowed ? "This is where your app requests the permission." : "Ask again when the person reaches something that needs it.")
                } actions: {
                    Button("Start over") { self.answer = nil }
                        .buttonStyle(.borderedProminent)
                }
                .transition(.opacity)
            } else {
                PermissionPrimerScreen(
                    systemImage: "bell.badge.fill",
                    title: "Stay in the loop",
                    message: "Turn on notifications and we only write when it matters.",
                    benefits: [
                        PermissionPrimerScreenBenefit(systemImage: "shippingbox.fill", title: "Order updates", text: "Know the moment your order ships and arrives."),
                        PermissionPrimerScreenBenefit(systemImage: "tag.fill", title: "Price drops", text: "Hear first when something you saved gets cheaper."),
                        PermissionPrimerScreenBenefit(systemImage: "moon.fill", title: "Quiet by default", text: "No marketing, and nothing at night."),
                    ],
                    tint: .indigo,
                    onContinue: { answer = .allowed },
                    onSkip: { answer = .later }
                )
                .transition(.opacity)
            }
        }
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.3), value: answer)
    }
}

#Preview {
    PermissionPrimerScreenDemo()
}
```

## Vertical Timeline

A vertical timeline with a connector line and done, current and upcoming steps.

Category: Patterns. Minimum: iOS 18.0. Path: Components/Patterns/VerticalTimeline/VerticalTimeline.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct VerticalTimelineStep: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let detail: LocalizedStringResource
}

enum VerticalTimelineStatus: Equatable {
    case done, current, upcoming

    /// A `currentIndex` past the end means everything is done, and a negative one that nothing has started.
    static func of(index: Int, currentIndex: Int) -> VerticalTimelineStatus {
        if index < currentIndex { return .done }
        return index == currentIndex ? .current : .upcoming
    }

    var spokenName: String {
        switch self {
        case .done: "Done"
        case .current: "In progress"
        case .upcoming: "Upcoming"
        }
    }
}

/// A vertical list of steps joined by a line, each done, in progress or still to come.
///
/// With Reduce Motion on, the current step does not pulse and changes are not animated.
struct VerticalTimeline: View {
    let steps: [VerticalTimelineStep]
    let currentIndex: Int
    var tint: Color = .indigo

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            ForEach(Array(steps.enumerated()), id: \.element.id) { index, step in
                row(
                    step,
                    status: .of(index: index, currentIndex: currentIndex),
                    isLast: index == steps.count - 1
                )
            }
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.4), value: currentIndex)
    }

    private func row(_ step: VerticalTimelineStep, status: VerticalTimelineStatus, isLast: Bool) -> some View {
        HStack(alignment: .top, spacing: 14) {
            VStack(spacing: 0) {
                VerticalTimelineMarker(status: status, tint: tint)

                if !isLast {
                    Rectangle()
                        .fill(status == .done ? AnyShapeStyle(tint) : AnyShapeStyle(.quaternary))
                        .frame(width: 2)
                        .frame(maxHeight: .infinity)
                }
            }

            VStack(alignment: .leading, spacing: 3) {
                Text(step.title)
                    .font(.headline)
                    .foregroundStyle(status == .upcoming ? .secondary : .primary)

                Text(step.detail)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            .padding(.bottom, isLast ? 0 : 26)

            Spacer(minLength: 0)
        }
        .fixedSize(horizontal: false, vertical: true)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("\(step.title). \(step.detail)")
        .accessibilityValue(status.spokenName)
    }
}

private struct VerticalTimelineMarker: View {
    let status: VerticalTimelineStatus
    let tint: Color

    @ScaledMetric(relativeTo: .headline) private var size = 26.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            switch status {
            case .done:
                Circle().fill(tint)
                Image(systemName: "checkmark")
                    .font(.caption.weight(.heavy))
                    .foregroundStyle(VerticalTimelineContrastingForeground(background: tint))
            case .current:
                halo
                Circle().fill(tint.opacity(0.18))
                Circle().strokeBorder(tint, lineWidth: 2)
                Circle().fill(tint).frame(width: size * 0.38, height: size * 0.38)
            case .upcoming:
                Circle().strokeBorder(.tertiary, lineWidth: 2)
            }
        }
        .frame(width: size, height: size)
        .accessibilityHidden(true)
    }

    @ViewBuilder
    private var halo: some View {
        if !reduceMotion {
            Circle()
                .fill(tint.opacity(0.35))
                .phaseAnimator([false, true]) { circle, isExpanded in
                    circle
                        .scaleEffect(isExpanded ? 1.7 : 1)
                        .opacity(isExpanded ? 0 : 1)
                } animation: { isExpanded in
                    isExpanded ? .easeOut(duration: 1.1) : nil
                }
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct VerticalTimelineContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct VerticalTimelineDemo: View {
    private let steps = [
        VerticalTimelineStep(id: "placed", title: "Order placed", detail: "Monday, 09:24"),
        VerticalTimelineStep(id: "packed", title: "Packed", detail: "Warehouse in Valencia"),
        VerticalTimelineStep(id: "shipped", title: "Shipped", detail: "On its way with your courier"),
        VerticalTimelineStep(id: "out", title: "Out for delivery", detail: "Arriving before 14:00"),
        VerticalTimelineStep(id: "delivered", title: "Delivered", detail: "Leave at the front door"),
    ]

    @State private var currentIndex = 2
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                VStack(alignment: .leading, spacing: 4) {
                    Text("Track order")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    Text("Order number 2048")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }

                VerticalTimeline(steps: steps, currentIndex: currentIndex)
                    .padding(22)
                    .background(.background.secondary, in: .rect(cornerRadius: 24))
            }
            .padding(20)
        }
        .scrollBounceBehavior(.basedOnSize)
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1))
                guard !Task.isCancelled else { return }
                currentIndex = currentIndex >= steps.count ? 0 : currentIndex + 1
            }
        }
    }
}

#Preview {
    VerticalTimelineDemo()
}
```

## Weather Forecast Screen

A weather screen with a header that shrinks to one line as it scrolls, an hourly strip, a ten-day list of temperature range bars over the week and an animated sky with rain or snow.

Category: Patterns. Minimum: iOS 18.0. Path: Components/Patterns/WeatherForecastScreen/WeatherForecastScreen.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A weather screen: the place and the temperature now, the next hours and the next days over an animated sky.
///
/// The large header fades as the forecast scrolls and a single line takes its place at the top.
/// Each day of the daily forecast draws its low and high as a bar over the span of the whole
/// week, colored from cold to warm, with a dot at the current temperature on the first day.
/// Rain and snow fall over the sky; with Reduce Motion on, they hold still. Temperatures are
/// shown in the unit of the person's region.
///
/// The model takes what WeatherKit gives, `Measurement<UnitTemperature>` and `Date`, so a
/// real forecast fills it without conversions.
struct WeatherForecastScreen: View {
    /// The forecast to show.
    let forecast: WeatherForecastScreenForecast
    /// How far the forecast scrolls, in points, before the header has become a single line.
    var collapseDistance: CGFloat = 120

    @State private var collapse: Double = 0
    @ScaledMetric(relativeTo: .largeTitle) private var temperatureSize: CGFloat = 96

    private let cardSpacing: CGFloat = 12

    var body: some View {
        ZStack {
            WeatherForecastScreenSky(condition: forecast.condition, isDaylight: forecast.isDaylight)

            // The single line sits above the scroll view, which clips the cards
            // under it instead of letting them pass behind the text.
            VStack(spacing: 0) {
                compactHeader
                    .opacity(collapse)
                    .accessibilityHidden(collapse < 0.5)

                ScrollView {
                    VStack(spacing: cardSpacing) {
                        header
                            .opacity(1 - collapse)
                            .scaleEffect(1 - collapse * 0.12, anchor: .top)
                            .accessibilityHidden(collapse >= 0.5)

                        WeatherForecastScreenHourlyCard(hours: forecast.hours)
                        WeatherForecastScreenDailyCard(days: forecast.days, current: forecast.temperature)
                    }
                    .padding(.horizontal, 16)
                    .padding(.bottom, 24)
                }
                .scrollIndicators(.hidden)
                // The transform returns the progress itself, so scrolling past the header stops updating the view.
                .onScrollGeometryChange(for: Double.self) { geometry in
                    WeatherForecastScreenMath.collapse(
                        offset: geometry.contentOffset.y + geometry.contentInsets.top,
                        distance: collapseDistance
                    )
                } action: { _, progress in
                    collapse = progress
                }
            }
        }
        .foregroundStyle(.white)
    }

    private var header: some View {
        VStack(spacing: 2) {
            Text(forecast.location)
                .font(.title.weight(.medium))

            Text(forecast.temperature.weatherText)
                .font(.system(size: temperatureSize, weight: .thin))
                .monospacedDigit()
                .lineLimit(1)
                .minimumScaleFactor(0.5)

            Text(forecast.condition.title)
                .font(.title3.weight(.medium))
                .foregroundStyle(.white.opacity(0.85))

            if let today = forecast.days.first {
                Text("H:\(today.high.weatherText)  L:\(today.low.weatherText)")
                    .font(.title3.weight(.medium))
            }
        }
        .padding(.top, 16)
        .padding(.bottom, 24)
        .shadow(color: .black.opacity(0.2), radius: 6, y: 2)
        .accessibilityElement(children: .combine)
    }

    private var compactHeader: some View {
        VStack(spacing: 0) {
            Text(forecast.location)
                .font(.title3.weight(.medium))

            Text("\(forecast.temperature.weatherText) · \(Text(forecast.condition.title))")
                .font(.subheadline.weight(.medium))
                .foregroundStyle(.white.opacity(0.85))
        }
        .frame(maxWidth: .infinity)
        .padding(.vertical, 8)
        .shadow(color: .black.opacity(0.2), radius: 6, y: 2)
        .accessibilityElement(children: .combine)
    }
}

// MARK: - Model

/// What the sky is doing, which picks its symbol, its colors and what falls from it.
nonisolated enum WeatherForecastScreenCondition: Sendable, CaseIterable {
    case clear, partlyCloudy, cloudy, rain, snow, thunderstorm

    var title: LocalizedStringResource {
        switch self {
        case .clear: "Clear"
        case .partlyCloudy: "Partly Cloudy"
        case .cloudy: "Cloudy"
        case .rain: "Rain"
        case .snow: "Snow"
        case .thunderstorm: "Thunderstorms"
        }
    }

    /// The name of the SF Symbol for this sky, by day or by night.
    func symbolName(isDaylight: Bool = true) -> String {
        switch self {
        case .clear: isDaylight ? "sun.max.fill" : "moon.stars.fill"
        case .partlyCloudy: isDaylight ? "cloud.sun.fill" : "cloud.moon.fill"
        case .cloudy: "cloud.fill"
        case .rain: "cloud.rain.fill"
        case .snow: "cloud.snow.fill"
        case .thunderstorm: "cloud.bolt.rain.fill"
        }
    }
}

/// The forecast for one hour.
nonisolated struct WeatherForecastScreenHour: Identifiable, Sendable {
    /// The start of the hour.
    let date: Date
    /// The sky in that hour.
    let condition: WeatherForecastScreenCondition
    /// The temperature in that hour, in any unit; it is shown in the region's.
    let temperature: Measurement<UnitTemperature>
    /// Whether the sun is up, which picks the day or the night symbol.
    var isDaylight = true

    var id: Date { date }
}

/// The forecast for one day.
nonisolated struct WeatherForecastScreenDay: Identifiable, Sendable {
    /// Any moment of the day; only its day is shown.
    let date: Date
    /// The sky for most of the day.
    let condition: WeatherForecastScreenCondition
    /// The lowest temperature of the day, in any unit.
    let low: Measurement<UnitTemperature>
    /// The highest temperature of the day, in any unit.
    let high: Measurement<UnitTemperature>
    /// The chance of rain or snow, from 0 to 1. Shown under the symbol from ``shownChance`` up.
    var precipitationChance: Double = 0

    /// The chance of rain or snow from which a day shows it.
    static let shownChance = 0.2

    var showsPrecipitation: Bool { precipitationChance >= Self.shownChance }

    var id: Date { date }
}

/// Everything the screen shows.
nonisolated struct WeatherForecastScreenForecast: Sendable {
    /// The name of the place, shown as it is.
    let location: String
    /// The sky now, which picks the colors of the sky and what falls from it.
    let condition: WeatherForecastScreenCondition
    /// Whether the sun is up now, which picks the colors of the sky.
    var isDaylight = true
    /// The temperature now.
    let temperature: Measurement<UnitTemperature>
    /// The coming hours, the first being now.
    let hours: [WeatherForecastScreenHour]
    /// The coming days, the first being today, whose low and high head the screen.
    let days: [WeatherForecastScreenDay]
}

nonisolated extension Measurement where UnitType == UnitTemperature {
    /// The temperature as a weather report writes it, in whole degrees of the region's unit: "21°".
    fileprivate var weatherText: String {
        let unit = UnitTemperature(forLocale: .current, usage: .weather)
        return "\(Int(converted(to: unit).value.rounded()).formatted())°"
    }

    fileprivate var celsius: Double { converted(to: .celsius).value }
}

// MARK: - Math

/// The geometry of the range bars and the collapsing header, in degrees Celsius and in fractions.
nonisolated enum WeatherForecastScreenMath {
    /// The span of a week: from the lowest low to the highest high, or nil without days.
    static func span(of days: [WeatherForecastScreenDay]) -> ClosedRange<Double>? {
        guard let low = days.map(\.low.celsius).min(), let high = days.map(\.high.celsius).max() else { return nil }
        return min(low, high)...max(low, high)
    }

    /// Where a temperature falls in a span, from 0 at its low end to 1 at its high end.
    static func fraction(of value: Double, in span: ClosedRange<Double>) -> Double {
        let width = span.upperBound - span.lowerBound
        guard width > 0 else { return 0.5 }
        return min(max((value - span.lowerBound) / width, 0), 1)
    }

    /// The part of the track a day covers. A week of one temperature fills the whole track.
    static func bar(low: Double, high: Double, in span: ClosedRange<Double>) -> ClosedRange<Double> {
        guard span.upperBound > span.lowerBound else { return 0...1 }
        let start = fraction(of: min(low, high), in: span)
        let end = fraction(of: max(low, high), in: span)
        return start...end
    }

    /// How collapsed the header is, from 0 at rest to 1 once the forecast has scrolled `distance`.
    static func collapse(offset: CGFloat, distance: CGFloat) -> Double {
        guard distance > 0 else { return offset > 0 ? 1 : 0 }
        return min(max(Double(offset / distance), 0), 1)
    }
}

// MARK: - Cards

/// The gap between the parts of a card and around each of its rows.
private let weatherForecastScreenGap: CGFloat = 10

private struct WeatherForecastScreenCard<Content: View>: View {
    let title: LocalizedStringResource
    let systemImage: String
    @ViewBuilder let content: Content

    var body: some View {
        VStack(alignment: .leading, spacing: weatherForecastScreenGap) {
            Label { Text(title) } icon: { Image(systemName: systemImage) }
                .font(.caption.weight(.semibold))
                .textCase(.uppercase)
                .foregroundStyle(.white.opacity(0.7))

            Divider()
                .overlay(.white.opacity(0.25))

            content
        }
        .padding(14)
        // A shade under the material keeps the dimmer text of the cards readable over a light sky.
        .background(Color.black.opacity(0.18), in: .rect(cornerRadius: 18))
        .background(.ultraThinMaterial, in: .rect(cornerRadius: 18))
        .environment(\.colorScheme, .dark)
    }
}

private struct WeatherForecastScreenHourlyCard: View {
    let hours: [WeatherForecastScreenHour]

    /// One height for every symbol, so the temperatures under them line up.
    @ScaledMetric(relativeTo: .title3) private var symbolHeight: CGFloat = 28

    var body: some View {
        WeatherForecastScreenCard(title: "Hourly Forecast", systemImage: "clock") {
            ScrollView(.horizontal) {
                HStack(spacing: 22) {
                    ForEach(Array(hours.enumerated()), id: \.element.id) { index, hour in
                        VStack(spacing: weatherForecastScreenGap) {
                            Group {
                                if index == 0 {
                                    Text("Now")
                                } else {
                                    Text(hour.date, format: .dateTime.hour())
                                }
                            }
                            .font(.subheadline.weight(.semibold))

                            Image(systemName: hour.condition.symbolName(isDaylight: hour.isDaylight))
                                .symbolRenderingMode(.multicolor)
                                .font(.title3)
                                .frame(height: symbolHeight)
                                .accessibilityLabel(Text(hour.condition.title))

                            Text(hour.temperature.weatherText)
                                .font(.title3.weight(.medium))
                                .monospacedDigit()
                        }
                        .accessibilityElement(children: .combine)
                    }
                }
                .padding(.vertical, 4)
            }
            .scrollIndicators(.hidden)
        }
    }
}

private struct WeatherForecastScreenDailyCard: View {
    let days: [WeatherForecastScreenDay]
    let current: Measurement<UnitTemperature>

    @ScaledMetric(relativeTo: .body) private var dayWidth: CGFloat = 52
    @ScaledMetric(relativeTo: .body) private var temperatureWidth: CGFloat = 40
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    @Environment(\.colorSchemeContrast) private var contrast

    /// Dimmer than the high, as the low is the less telling of the two, unless Increase Contrast is on.
    private var lowColor: Color { contrast == .increased ? .white : .white.opacity(0.72) }

    var body: some View {
        WeatherForecastScreenCard(title: "10-Day Forecast", systemImage: "calendar") {
            if let span = WeatherForecastScreenMath.span(of: days) {
                VStack(spacing: 0) {
                    ForEach(Array(days.enumerated()), id: \.element.id) { index, day in
                        row(day, isToday: index == 0, span: span)

                        if index < days.count - 1 {
                            Divider()
                                .overlay(.white.opacity(0.18))
                        }
                    }
                }
            }
        }
    }

    private func row(_ day: WeatherForecastScreenDay, isToday: Bool, span: ClosedRange<Double>) -> some View {
        // From xxLarge the columns no longer fit side by side on a narrow iPhone, so the bar takes a line of its own.
        Group {
            if dynamicTypeSize >= .xxLarge {
                VStack(alignment: .leading, spacing: weatherForecastScreenGap) {
                    HStack {
                        dayName(of: day, isToday: isToday)
                        Spacer()
                        symbol(of: day)
                    }

                    HStack(spacing: 12) {
                        Text(day.low.weatherText)
                            .foregroundStyle(lowColor)
                        rangeBar(of: day, isToday: isToday, span: span)
                        Text(day.high.weatherText)
                    }
                }
            } else {
                HStack(spacing: 12) {
                    dayName(of: day, isToday: isToday)
                        .frame(width: dayWidth, alignment: .leading)

                    symbol(of: day)
                        .frame(width: temperatureWidth)

                    Text(day.low.weatherText)
                        .foregroundStyle(lowColor)
                        .frame(width: temperatureWidth, alignment: .trailing)

                    rangeBar(of: day, isToday: isToday, span: span)

                    Text(day.high.weatherText)
                        .frame(width: temperatureWidth, alignment: .trailing)
                }
            }
        }
        .font(.body.weight(.medium))
        .monospacedDigit()
        .padding(.vertical, weatherForecastScreenGap)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(label(for: day, isToday: isToday))
    }

    private func dayName(of day: WeatherForecastScreenDay, isToday: Bool) -> some View {
        Group {
            if isToday {
                Text("Today")
            } else {
                Text(day.date, format: .dateTime.weekday(.abbreviated))
            }
        }
        .font(.body.weight(.semibold))
    }

    private func symbol(of day: WeatherForecastScreenDay) -> some View {
        VStack(spacing: 0) {
            Image(systemName: day.condition.symbolName())
                .symbolRenderingMode(.multicolor)
                .font(.title3)

            if day.showsPrecipitation {
                Text(day.precipitationChance, format: .percent.precision(.fractionLength(0)))
                    .font(.caption2.weight(.bold))
                    .foregroundStyle(Color(red: 0.55, green: 0.88, blue: 1))
            }
        }
    }

    private func rangeBar(of day: WeatherForecastScreenDay, isToday: Bool, span: ClosedRange<Double>) -> some View {
        WeatherForecastScreenRangeBar(
            range: WeatherForecastScreenMath.bar(low: day.low.celsius, high: day.high.celsius, in: span),
            span: span,
            marker: isToday ? WeatherForecastScreenMath.fraction(of: current.celsius, in: span) : nil
        )
    }

    private func label(for day: WeatherForecastScreenDay, isToday: Bool) -> Text {
        let name = isToday ? Text("Today") : Text(day.date, format: .dateTime.weekday(.wide))
        let temperatures = Text("Low \(day.low.weatherText), high \(day.high.weatherText)")
        guard day.showsPrecipitation else {
            return Text("\(name), \(Text(day.condition.title)), \(temperatures)")
        }
        let chance = day.precipitationChance.formatted(.percent.precision(.fractionLength(0)))
        return Text("\(name), \(Text(day.condition.title)), \(chance) chance of precipitation, \(temperatures)")
    }
}

/// A day's low to high over the week's track, painted with the week's cold-to-warm gradient.
private struct WeatherForecastScreenRangeBar: View {
    let range: ClosedRange<Double>
    let span: ClosedRange<Double>
    let marker: Double?

    private let height: CGFloat = 5

    var body: some View {
        GeometryReader { proxy in
            let width = proxy.size.width

            ZStack(alignment: .leading) {
                Capsule()
                    .fill(.white.opacity(0.15))

                let barWidth = min(width, max(height, width * (range.upperBound - range.lowerBound)))

                LinearGradient(colors: gradientColors, startPoint: .leading, endPoint: .trailing)
                    .mask(alignment: .leading) {
                        // A day at the top of the week still shows its whole capsule inside the track.
                        Capsule()
                            .frame(width: barWidth)
                            .offset(x: min(width * range.lowerBound, width - barWidth))
                    }

                if let marker {
                    Circle()
                        .fill(.white)
                        .overlay(Circle().stroke(.black.opacity(0.35), lineWidth: 1.5))
                        .frame(width: height + 2, height: height + 2)
                        .offset(x: width * marker - (height + 2) / 2)
                }
            }
        }
        .frame(height: height)
        .frame(minWidth: 60)
    }

    /// The colors of the temperatures across the week, so a warmer day shows warmer colors.
    private var gradientColors: [Color] {
        let samples = 5
        return (0..<samples).map { index in
            let fraction = Double(index) / Double(samples - 1)
            let celsius = span.lowerBound + (span.upperBound - span.lowerBound) * fraction
            return WeatherForecastScreenRangeBar.color(forCelsius: celsius)
        }
    }

    private static let palette: [(celsius: Double, color: Color)] = [
        (-10, Color(red: 0.45, green: 0.55, blue: 1)),
        (0, Color(red: 0.35, green: 0.80, blue: 1)),
        (10, Color(red: 0.42, green: 0.90, blue: 0.70)),
        (20, Color(red: 1, green: 0.84, blue: 0.30)),
        (30, Color(red: 1, green: 0.55, blue: 0.20)),
        (40, Color(red: 1, green: 0.26, blue: 0.24)),
    ]

    private static func color(forCelsius celsius: Double) -> Color {
        guard let first = palette.first, let last = palette.last else { return .white }
        if celsius <= first.celsius { return first.color }
        if celsius >= last.celsius { return last.color }
        let upper = palette.firstIndex { $0.celsius >= celsius } ?? palette.count - 1
        let lower = palette[upper - 1]
        let fraction = (celsius - lower.celsius) / (palette[upper].celsius - lower.celsius)
        return lower.color.mix(with: palette[upper].color, by: fraction)
    }
}

// MARK: - Sky

/// The sky behind the forecast: a gradient for the condition and the time of day, and what falls from it.
private struct WeatherForecastScreenSky: View {
    let condition: WeatherForecastScreenCondition
    let isDaylight: Bool

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)
                .animation(.easeInOut(duration: 0.8), value: colors)

            if let fall = WeatherForecastScreenFall(condition: condition) {
                TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { timeline in
                    Canvas { context, size in
                        let time = reduceMotion ? 0 : timeline.date.timeIntervalSinceReferenceDate
                        fall.draw(in: &context, size: size, time: time)
                    }
                }
                .transition(.opacity)
            }
        }
        .animation(.easeInOut(duration: 0.8), value: condition)
        .ignoresSafeArea()
        .allowsHitTesting(false)
        .accessibilityHidden(true)
    }

    /// Dark enough down to the header's line of highs and lows for white text to keep a contrast of 4.5:1.
    private var colors: [Color] {
        switch (condition, isDaylight) {
        case (_, false):
            [Color(red: 0.03, green: 0.05, blue: 0.16), Color(red: 0.13, green: 0.17, blue: 0.36)]
        case (.clear, true):
            [Color(red: 0.12, green: 0.36, blue: 0.74), Color(red: 0.33, green: 0.58, blue: 0.89)]
        case (.partlyCloudy, true):
            [Color(red: 0.17, green: 0.36, blue: 0.64), Color(red: 0.47, green: 0.62, blue: 0.80)]
        case (.cloudy, true):
            [Color(red: 0.24, green: 0.31, blue: 0.41), Color(red: 0.52, green: 0.58, blue: 0.66)]
        case (.rain, true), (.thunderstorm, true):
            [Color(red: 0.15, green: 0.20, blue: 0.29), Color(red: 0.33, green: 0.40, blue: 0.50)]
        case (.snow, true):
            [Color(red: 0.24, green: 0.32, blue: 0.45), Color(red: 0.58, green: 0.66, blue: 0.78)]
        }
    }
}

/// What falls from the sky: streaks of rain or flakes of snow, in two depths.
nonisolated private struct WeatherForecastScreenFall {
    private let isSnow: Bool
    private let count: Int

    init?(condition: WeatherForecastScreenCondition) {
        switch condition {
        case .rain: isSnow = false; count = 90
        case .thunderstorm: isSnow = false; count = 140
        case .snow: isSnow = true; count = 70
        case .clear, .partlyCloudy, .cloudy: return nil
        }
    }

    func draw(in context: inout GraphicsContext, size: CGSize, time: Double) {
        var near = Path()
        var far = Path()
        let speed: Double = isSnow ? 45 : 620
        let travel = size.height + 40

        for index in 0..<count {
            let isNear = index % 3 == 0
            let depth: Double = isNear ? 1 : 0.6
            let fallen = (noise(index, 1) * travel + time * speed * depth).truncatingRemainder(dividingBy: travel) - 20
            let x = noise(index, 2) * size.width

            if isSnow {
                let sway = sin(time * (0.6 + noise(index, 3)) + noise(index, 4) * 2 * .pi) * 10 * depth
                let radius = (1.2 + noise(index, 5) * 1.8) * depth
                let flake = Path(ellipseIn: CGRect(x: x + sway - radius, y: fallen - radius, width: radius * 2, height: radius * 2))
                if isNear { near.addPath(flake) } else { far.addPath(flake) }
            } else {
                let length = 14 * depth
                var streak = Path()
                streak.move(to: CGPoint(x: x, y: fallen))
                streak.addLine(to: CGPoint(x: x - length * 0.12, y: fallen + length))
                if isNear { near.addPath(streak) } else { far.addPath(streak) }
            }
        }

        if isSnow {
            context.fill(far, with: .color(.white.opacity(0.5)))
            context.fill(near, with: .color(.white.opacity(0.9)))
        } else {
            context.stroke(far, with: .color(.white.opacity(0.22)), lineWidth: 1)
            context.stroke(near, with: .color(.white.opacity(0.4)), lineWidth: 1.4)
        }
    }

    /// A repeatable pseudo-random value in 0..<1 for one drop and one property.
    private func noise(_ index: Int, _ salt: Double) -> Double {
        let value = sin(Double(index) * 127.1 + salt * 311.7) * 43_758.5453
        return value - floor(value)
    }
}

// MARK: - Demo

struct WeatherForecastScreenDemo: View {
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @State private var step = 0

    private let skies: [(condition: WeatherForecastScreenCondition, isDaylight: Bool, celsius: Double)] = [
        (.clear, true, 22),
        (.partlyCloudy, true, 19),
        (.rain, true, 14),
        (.snow, true, -1),
        (.clear, false, 12),
    ]

    var body: some View {
        WeatherForecastScreen(forecast: forecast(for: skies[step]))
            .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
            // A scroll view keeps the drag to itself, so the first scroll stops the demo too.
            .onScrollPhaseChange { _, phase in
                if phase != .idle { isAutoPlaying = false }
            }
            .task {
                while isAutoPlaying {
                    try? await Task.sleep(for: .seconds(1.5))
                    guard !Task.isCancelled, isAutoPlaying else { return }
                    step = (step + 1) % skies.count
                }
            }
    }

    private func forecast(
        for sky: (condition: WeatherForecastScreenCondition, isDaylight: Bool, celsius: Double)
    ) -> WeatherForecastScreenForecast {
        let calendar = Calendar.current
        let now = calendar.dateInterval(of: .hour, for: .now)?.start ?? .now
        let today = calendar.startOfDay(for: now)
        let offsets: [Double] = [0, 1, 1, 2, 2, 1, 0, -1, -2, -2, -3, -3]
        let conditions: [WeatherForecastScreenCondition] = [.partlyCloudy, .rain, .cloudy, .clear, .clear, .thunderstorm, .rain, .cloudy, .partlyCloudy, .clear]
        let lows: [Double] = [-5, -4, -2, -6, -3, -1, -4, -5, -3, -2]
        let highs: [Double] = [3, 5, 2, 4, 7, 6, 1, 3, 5, 6]
        let chances: [Double] = [0.1, 0.6, 0.3, 0, 0, 0.8, 0.5, 0.2, 0, 0]

        let hours = (0..<12).map { index in
            let date = calendar.date(byAdding: .hour, value: index, to: now) ?? now
            let hour = calendar.component(.hour, from: date)
            return WeatherForecastScreenHour(
                date: date,
                condition: index == 0 ? sky.condition : conditions[index % conditions.count],
                temperature: Measurement(value: sky.celsius + offsets[index], unit: .celsius),
                isDaylight: index == 0 ? sky.isDaylight : (7..<20).contains(hour)
            )
        }

        let days = (0..<10).map { index in
            WeatherForecastScreenDay(
                date: calendar.date(byAdding: .day, value: index, to: today) ?? today,
                condition: index == 0 ? sky.condition : conditions[index],
                low: Measurement(value: sky.celsius + lows[index], unit: .celsius),
                high: Measurement(value: sky.celsius + highs[index], unit: .celsius),
                precipitationChance: chances[index]
            )
        }

        return WeatherForecastScreenForecast(
            location: "Lisbon",
            condition: sky.condition,
            isDaylight: sky.isDaylight,
            temperature: Measurement(value: sky.celsius, unit: .celsius),
            hours: hours,
            days: days
        )
    }
}

#Preview {
    WeatherForecastScreenDemo()
}
```

## Country Picker

A searchable list of countries with flags and dial codes that opens on the current region.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/CountryPicker/CountryPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct CountryPickerCountry: Identifiable, Hashable, Sendable {
    let code: String
    let name: String
    let dialCode: String

    var id: String { code }
    var flag: String { CountryPickerData.flag(for: code) }
}

/// A searchable list of countries with flags and dial codes. Use it inside a `NavigationStack`.
///
/// It opens on the selected country, or on the region of the device if there is none.
struct CountryPicker: View {
    @Binding var selection: String?
    var countries: [CountryPickerCountry] = CountryPickerData.all

    @State private var query = ""

    private var results: [CountryPickerCountry] {
        CountryPickerData.filter(countries, query: query)
    }

    var body: some View {
        ScrollViewReader { proxy in
            List(results) { country in
                row(for: country)
                    .id(country.code)
            }
            .overlay {
                if results.isEmpty {
                    ContentUnavailableView.search(text: query)
                }
            }
            .searchable(text: $query, prompt: "Country or dial code")
            .task {
                if let start = selection ?? Locale.current.region?.identifier {
                    proxy.scrollTo(start, anchor: .center)
                }
            }
        }
    }

    private func row(for country: CountryPickerCountry) -> some View {
        Button {
            selection = country.code
        } label: {
            HStack(spacing: 12) {
                Text(country.flag)
                    .font(.title2)
                    .accessibilityHidden(true)

                // `Color.primary`, not `.primary`: inside a button the style is a shade of the tint.
                Text(country.name)
                    .foregroundStyle(Color.primary)

                Spacer(minLength: 8)

                Text(country.dialCode)
                    .foregroundStyle(Color.secondary)
                    .monospacedDigit()

                Image(systemName: "checkmark")
                    .fontWeight(.semibold)
                    .foregroundStyle(.tint)
                    .opacity(selection == country.code ? 1 : 0)
                    .accessibilityHidden(true)
            }
        }
        .accessibilityAddTraits(selection == country.code ? .isSelected : [])
    }
}

enum CountryPickerData {
    /// Every country in the table below that the system knows, named in the current language.
    static let all = countries(locale: .current)

    static func countries(locale: Locale) -> [CountryPickerCountry] {
        Locale.Region.isoRegions
            .compactMap { region -> CountryPickerCountry? in
                guard let dialCode = dialCodes[region.identifier] else { return nil }
                let name = locale.localizedString(forRegionCode: region.identifier) ?? region.identifier
                return CountryPickerCountry(code: region.identifier, name: name, dialCode: dialCode)
            }
            .sorted { $0.name.localizedStandardCompare($1.name) == .orderedAscending }
    }

    /// Matches names and region codes anywhere, and dial codes from their start.
    static func filter(_ countries: [CountryPickerCountry], query: String) -> [CountryPickerCountry] {
        let text = query.trimmingCharacters(in: .whitespacesAndNewlines)
        guard !text.isEmpty else { return countries }

        let digits = text.hasPrefix("+") ? String(text.dropFirst()) : text
        return countries.filter { country in
            country.name.localizedStandardContains(text)
                || country.code.caseInsensitiveCompare(text) == .orderedSame
                || (!digits.isEmpty && country.dialCode.dropFirst().hasPrefix(digits))
        }
    }

    /// Two letters become the two regional indicator symbols that draw a flag.
    static func flag(for code: String) -> String {
        let letters = code.uppercased().unicodeScalars
        guard letters.count == 2, letters.allSatisfy({ ("A"..."Z").contains($0) }) else { return "" }
        var flag = String.UnicodeScalarView()
        flag.append(contentsOf: letters.compactMap { Unicode.Scalar(127_397 + $0.value) })
        return String(flag)
    }

    /// Parses entries such as `ES34` into `["ES": "+34"]`. Apple has no API for dial codes.
    static func parseDialCodes(_ table: String) -> [String: String] {
        let pairs = table.split(whereSeparator: \.isWhitespace).compactMap { entry -> (String, String)? in
            let digits = entry.dropFirst(2)
            guard entry.count > 2, digits.allSatisfy(\.isNumber) else { return nil }
            return (String(entry.prefix(2)), "+" + digits)
        }
        return Dictionary(pairs) { first, _ in first }
    }

    private static let dialCodes = parseDialCodes("""
        AD376 AE971 AF93 AG1268 AI1264 AL355 AM374 AO244 AR54 AS1684 AT43 AU61 AW297 AX358 AZ994
        BA387 BB1246 BD880 BE32 BF226 BG359 BH973 BI257 BJ229 BL590 BM1441 BN673 BO591 BQ599 BR55
        BS1242 BT975 BW267 BY375 BZ501 CA1 CC61 CD243 CF236 CG242 CH41 CI225 CK682 CL56 CM237 CN86
        CO57 CR506 CU53 CV238 CW599 CX61 CY357 CZ420 DE49 DJ253 DK45 DM1767 DO1809 DZ213 EC593 EE372
        EG20 EH212 ER291 ES34 ET251 FI358 FJ679 FK500 FM691 FO298 FR33 GA241 GB44 GD1473 GE995 GF594
        GG44 GH233 GI350 GL299 GM220 GN224 GP590 GQ240 GR30 GT502 GU1671 GW245 GY592 HK852 HN504 HR385
        HT509 HU36 ID62 IE353 IL972 IM44 IN91 IO246 IQ964 IR98 IS354 IT39 JE44 JM1876 JO962 JP81
        KE254 KG996 KH855 KI686 KM269 KN1869 KP850 KR82 KW965 KY1345 KZ7 LA856 LB961 LC1758 LI423
        LK94 LR231 LS266 LT370 LU352 LV371 LY218 MA212 MC377 MD373 ME382 MF590 MG261 MH692 MK389
        ML223 MM95 MN976 MO853 MP1670 MQ596 MR222 MS1664 MT356 MU230 MV960 MW265 MX52 MY60 MZ258
        NA264 NC687 NE227 NF672 NG234 NI505 NL31 NO47 NP977 NR674 NU683 NZ64 OM968 PA507 PE51 PF689
        PG675 PH63 PK92 PL48 PM508 PR1787 PS970 PT351 PW680 PY595 QA974 RE262 RO40 RS381 RU7 RW250
        SA966 SB677 SC248 SD249 SE46 SG65 SH290 SI386 SJ47 SK421 SL232 SM378 SN221 SO252 SR597 SS211
        ST239 SV503 SX1721 SY963 SZ268 TC1649 TD235 TG228 TH66 TJ992 TK690 TL670 TM993 TN216 TO676
        TR90 TT1868 TV688 TW886 TZ255 UA380 UG256 US1 UY598 UZ998 VA39 VC1784 VE58 VG1284 VI1340
        VN84 VU678 WF681 WS685 XK383 YE967 YT262 ZA27 ZM260 ZW263
        """)
}

// MARK: - Demo

struct CountryPickerDemo: View {
    @State private var selection = Locale.current.region?.identifier

    private var chosen: CountryPickerCountry? {
        CountryPickerData.all.first { $0.code == selection }
    }

    var body: some View {
        NavigationStack {
            CountryPicker(selection: $selection)
                .navigationTitle("Country")
                .safeAreaInset(edge: .bottom) {
                    if let chosen {
                        HStack(spacing: 10) {
                            Text(chosen.flag)
                                .font(.title)
                                .accessibilityHidden(true)

                            Text(chosen.name)
                                .font(.headline)

                            Spacer(minLength: 8)

                            Text(chosen.dialCode)
                                .font(.headline.monospacedDigit())
                                .foregroundStyle(.secondary)
                        }
                        .padding()
                        .background(.regularMaterial, in: .rect(cornerRadius: 20))
                        .padding(.horizontal)
                        .padding(.bottom, 8)
                        .accessibilityElement(children: .combine)
                    }
                }
        }
    }
}

#Preview {
    CountryPickerDemo()
}
```

## Emoji Picker

A grid of emoji grouped by category, with tabs that jump between sections and a row of recent picks.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/EmojiPicker/EmojiPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct EmojiPickerCategory: Identifiable, Hashable, Sendable {
    let id: String
    let title: String
    let tabLabel: String
    let systemImage: String
    let emoji: [String]

    init(title: String, tabLabel: String, systemImage: String, emoji: String) {
        id = tabLabel
        self.title = title
        self.tabLabel = tabLabel
        self.systemImage = systemImage
        self.emoji = emoji.map(String.init)
    }

    static let standard = [
        EmojiPickerCategory(title: "Smileys & People", tabLabel: "Smileys", systemImage: "face.smiling", emoji: "😀😃😄😁😆😅😂🤣😊😇🙂😉😍🥰😘😋😜🤪😎🤩🥳😏😔😢😭😤😡🤯😱🤔🤗😴👍👎👏🙌🙏💪👋✌️"),
        EmojiPickerCategory(title: "Animals & Nature", tabLabel: "Animals", systemImage: "pawprint", emoji: "🐶🐱🐭🐹🐰🦊🐻🐼🐨🐯🦁🐮🐷🐸🐵🐔🐧🐦🦆🦉🦋🐝🐢🐙🐬🐳🌸🌻🌳🌵🍀🍁🌈⭐️🔥💧"),
        EmojiPickerCategory(title: "Food & Drink", tabLabel: "Food", systemImage: "fork.knife", emoji: "🍎🍊🍋🍌🍉🍇🍓🍒🍑🥭🍍🥥🥑🍅🌽🥕🥐🥖🧀🍳🍔🍟🍕🌮🍣🍜🍰🧁🍫🍩🍪☕️🍵🍺🍷🥂"),
        EmojiPickerCategory(title: "Travel & Places", tabLabel: "Travel", systemImage: "airplane", emoji: "🚗🚕🚌🏎️🚓🚑🚒🚲🛵🚂✈️🚀🛸🚁⛵️🚢🗺️🏖️🏝️🏔️⛺️🏠🏰🗼🗽🎡🌋🌅🌃"),
        EmojiPickerCategory(title: "Everyday Objects", tabLabel: "Objects", systemImage: "lightbulb", emoji: "⌚️📱💻⌨️🖥️📷🎥📺📻⏰🔦💡📚✏️📎✂️🔑🔒🔨🧰🎁🎈🎉🎨🎸🎧🎮⚽️🏀🎾"),
        EmojiPickerCategory(title: "Signs & Symbols", tabLabel: "Symbols", systemImage: "heart", emoji: "❤️🧡💛💚💙💜🖤🤍💔💕💯✅❌⭕️❗️❓⚠️♻️🔔🎵➕➖➡️⬅️⬆️⬇️🔁"),
        EmojiPickerCategory(title: "World Flags", tabLabel: "Flags", systemImage: "flag", emoji: "🏁🚩🏳️🏴🏳️‍🌈🇪🇸🇫🇷🇩🇪🇮🇹🇵🇹🇬🇧🇮🇪🇺🇸🇨🇦🇲🇽🇧🇷🇦🇷🇯🇵🇰🇷🇨🇳🇮🇳🇦🇺🇿🇦"),
    ]
}

/// A grid of emoji grouped by category, with tabs and a row of the ones used last.
///
/// With Reduce Motion on, tabs jump to their section without animating.
struct EmojiPicker: View {
    @Binding var recents: [String]
    var categories: [EmojiPickerCategory] = EmojiPickerCategory.standard
    var recentLimit = 12
    let onSelect: (String) -> Void

    @State private var visibleIDs: [String] = []
    @State private var isAtEnd = false
    /// The tab that was tapped stays chosen until the grid moves again. A short section near
    /// the end cannot reach the top, and would lose its tab to the one above it.
    @State private var tappedID: String?
    @State private var isJumping = false
    /// A scroll view reader cannot jump to a section the lazy stack has not built yet. This can.
    @State private var position = ScrollPosition(idType: String.self)
    @ScaledMetric(relativeTo: .title) private var cellSize = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let edgePadding: CGFloat = 12

    /// The first section in sight, or the last one once the grid is at its end, which a short
    /// section there would never reach otherwise.
    private var activeID: String? {
        let visible = categories.filter { visibleIDs.contains($0.id) }
        return isAtEnd ? visible.last?.id : visible.first?.id
    }

    private var animation: Animation? {
        reduceMotion ? nil : .smooth(duration: 0.35)
    }

    var body: some View {
        VStack(spacing: 0) {
            if !recents.isEmpty {
                recentRow
            }

            tabBar
            Divider()
            grid
        }
        .animation(reduceMotion ? nil : .snappy, value: recents)
    }

    private var recentRow: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 4) {
                ForEach(recents, id: \.self, content: emojiButton)
            }
            .padding(.horizontal, edgePadding)
        }
        .scrollIndicators(.hidden)
        .padding(.vertical, 6)
        .accessibilityElement(children: .contain)
        .accessibilityLabel("Recent")
    }

    private var tabBar: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 2) {
                ForEach(categories) { category in
                    let isActive = category.id == (tappedID ?? activeID ?? categories.first?.id)

                    Button {
                        tappedID = category.id
                        isJumping = true
                        withAnimation(animation, completionCriteria: .logicallyComplete) {
                            position.scrollTo(id: category.id, anchor: .top)
                        } completion: {
                            isJumping = false
                        }
                    } label: {
                        Image(systemName: category.systemImage)
                            .font(.title3)
                            .foregroundStyle(isActive ? Color.accentColor : Color.secondary)
                            .frame(minWidth: cellSize, minHeight: cellSize)
                            .background(isActive ? Color.accentColor.opacity(0.15) : .clear, in: .rect(cornerRadius: 12))
                    }
                    .buttonStyle(.plain)
                    .accessibilityLabel(category.tabLabel)
                    .accessibilityAddTraits(isActive ? .isSelected : [])
                }
            }
            .padding(.horizontal, edgePadding)
            .padding(.vertical, 6)
        }
        .scrollIndicators(.hidden)
    }

    private var grid: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 18) {
                ForEach(categories) { category in
                    VStack(alignment: .leading, spacing: 8) {
                        Text(category.title)
                            .font(.subheadline.weight(.semibold))
                            .foregroundStyle(.secondary)
                            .accessibilityAddTraits(.isHeader)

                        LazyVGrid(columns: [GridItem(.adaptive(minimum: max(cellSize, 1)), spacing: 4)], spacing: 4) {
                            ForEach(category.emoji, id: \.self, content: emojiButton)
                        }
                    }
                    .id(category.id)
                }
            }
            .scrollTargetLayout()
            .padding(edgePadding)
        }
        .scrollPosition($position, anchor: .top)
        .onScrollPhaseChange { _, phase in
            if phase == .interacting || (phase == .animating && !isJumping) { tappedID = nil }
        }
        .onScrollTargetVisibilityChange(idType: String.self, threshold: 0.01) { ids in
            visibleIDs = ids
        }
        .onScrollGeometryChange(for: Bool.self) { geometry in
            geometry.visibleRect.maxY >= geometry.contentSize.height - 1
        } action: { _, atEnd in
            isAtEnd = atEnd
        }
    }

    private func emojiButton(_ emoji: String) -> some View {
        Button {
            recents = EmojiPickerRecents.adding(emoji, to: recents, limit: recentLimit)
            onSelect(emoji)
        } label: {
            Text(emoji)
                .font(.title)
                .frame(minWidth: cellSize, minHeight: cellSize)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
    }
}

enum EmojiPickerRecents {
    /// Puts the emoji first, without repeating it, and keeps at most `limit` of them.
    static func adding(_ emoji: String, to recents: [String], limit: Int) -> [String] {
        Array(([emoji] + recents.filter { $0 != emoji }).prefix(max(limit, 0)))
    }
}

// MARK: - Demo

struct EmojiPickerDemo: View {
    @State private var recents: [String] = []
    @State private var chosen = "😀"
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 0) {
            ZStack {
                LinearGradient(colors: [.yellow, .orange, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea(edges: .top)

                Text(chosen)
                    .font(.system(.largeTitle, design: .rounded))
                    .scaleEffect(2.4)
                    .contentTransition(.opacity)
                    .id(chosen)
                    .transition(reduceMotion ? .identity : .scale(scale: 0.6).combined(with: .opacity))
            }
            .frame(height: 170)
            .accessibilityHidden(true)

            EmojiPicker(recents: $recents) { emoji in
                withAnimation(reduceMotion ? nil : .bouncy) { chosen = emoji }
            }
        }
    }
}

#Preview {
    EmojiPickerDemo()
}
```

## Inline Date Picker Disclosure

A date row that opens in place into a calendar and closes again once a day is chosen.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/InlineDatePickerDisclosure/InlineDatePickerDisclosure.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A date row that opens in place into a calendar and closes again once a day is chosen.
///
/// With Reduce Motion on, the calendar appears and disappears without animating.
struct InlineDatePickerDisclosure: View {
    let title: LocalizedStringResource
    @Binding var date: Date
    var range: ClosedRange<Date> = Date.distantPast...Date.distantFuture

    @State private var isExpanded = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .smooth(duration: 0.35)
    }

    var body: some View {
        VStack(spacing: 0) {
            Button {
                withAnimation(animation) { isExpanded.toggle() }
            } label: {
                row
            }
            .buttonStyle(.plain)
            .accessibilityLabel(title)
            .accessibilityValue(date.formatted(date: .long, time: .omitted))
            .accessibilityHint(isExpanded ? "Hides the calendar" : "Shows the calendar")

            if isExpanded {
                Divider()

                DatePicker(selection: $date, in: range, displayedComponents: .date) { Text(title) }
                    .datePickerStyle(.graphical)
                    .labelsHidden()
                    .padding(.horizontal, 8)
                    .transition(.opacity)
            }
        }
        .clipped()
        .onChange(of: date) { oldValue, newValue in
            if isExpanded, InlineDatePickerDisclosureRule.closes(from: oldValue, to: newValue, in: .current) {
                withAnimation(animation) { isExpanded = false }
            }
        }
    }

    private var row: some View {
        HStack(spacing: 12) {
            Image(systemName: "calendar")
                .foregroundStyle(.tint)
                .accessibilityHidden(true)

            // At the largest text sizes the date moves under the title.
            ViewThatFits(in: .horizontal) {
                HStack {
                    labels
                }
                VStack(alignment: .leading, spacing: 4) {
                    labels
                }
            }

            Image(systemName: "chevron.down")
                .font(.footnote.weight(.bold))
                .foregroundStyle(.secondary)
                .rotationEffect(.degrees(isExpanded ? 180 : 0))
                .accessibilityHidden(true)
        }
        .padding()
        .contentShape(.rect)
    }

    @ViewBuilder
    private var labels: some View {
        Text(title)
            .font(.body.weight(.medium))
            .lineLimit(1)
            .fixedSize()

        Spacer(minLength: 8)

        Text(date.formatted(date: .abbreviated, time: .omitted))
            .foregroundStyle(.secondary)
            .monospacedDigit()
            .lineLimit(1)
            .fixedSize()
    }
}

enum InlineDatePickerDisclosureRule {
    /// Paging through months does not change the date, so only a different day closes the calendar.
    static func closes(from oldValue: Date, to newValue: Date, in calendar: Calendar) -> Bool {
        !calendar.isDate(oldValue, inSameDayAs: newValue)
    }
}

// MARK: - Demo

struct InlineDatePickerDisclosureDemo: View {
    @State private var departure = Date.now
    @State private var comeback = Date.now.addingTimeInterval(4 * 86_400)

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("Your trip")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                VStack(spacing: 14) {
                    InlineDatePickerDisclosure(title: "Departure", date: $departure)
                        .background(.background.secondary, in: .rect(cornerRadius: 20))

                    InlineDatePickerDisclosure(title: "Return", date: $comeback, range: departure...Date.distantFuture)
                        .background(.background.secondary, in: .rect(cornerRadius: 20))
                }
                .tint(.indigo)
                // The return never comes before the departure.
                .onChange(of: departure) { _, newValue in
                    if comeback < newValue { comeback = newValue }
                }
            }
            .padding(20)
        }
    }
}

#Preview {
    InlineDatePickerDisclosureDemo()
}
```

## Multi Photo Picker Tray

A photo picker limited to a maximum count, with a tray of chosen thumbnails that can be removed.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/MultiPhotoPickerTray/MultiPhotoPickerTray.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import PhotosUI
import SwiftUI

/// A photo picker limited to `maxCount` photos, with a tray of thumbnails that can be removed.
///
/// `thumbnail` draws each photo. `MultiPhotoPickerTrayThumbnail` loads one from the library.
struct MultiPhotoPickerTray<Thumbnail: View>: View {
    @Binding var selection: [PhotosPickerItem]
    var maxCount: Int = 5
    @ViewBuilder var thumbnail: (PhotosPickerItem) -> Thumbnail

    @ScaledMetric(relativeTo: .body) private var tileSize: CGFloat = 92
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var limit: Int { max(1, maxCount) }

    var body: some View {
        VStack(alignment: .leading, spacing: 14) {
            ViewThatFits(in: .horizontal) {
                HStack {
                    counter
                    Spacer()
                    picker
                }
                VStack(alignment: .leading, spacing: 8) {
                    counter
                    picker
                }
            }

            ScrollView(.horizontal) {
                HStack(spacing: 10) {
                    if selection.isEmpty {
                        emptyTile
                    }
                    ForEach(Array(selection.enumerated()), id: \.element) { index, item in
                        tile(for: item, position: index + 1)
                            .transition(.scale(scale: 0.6).combined(with: .opacity))
                    }
                }
                .padding(.vertical, 2)
            }
            .scrollIndicators(.hidden)
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.3), value: selection)
    }

    private var counter: some View {
        Text("\(selection.count) of \(limit) photos")
            .font(.subheadline.weight(.medium))
            .foregroundStyle(.secondary)
            .contentTransition(.numericText())
    }

    private var picker: some View {
        PhotosPicker(
            selection: $selection,
            maxSelectionCount: limit,
            selectionBehavior: .ordered,
            matching: .images
        ) {
            Label("Choose Photos", systemImage: "photo.badge.plus")
                .font(.subheadline.weight(.semibold))
        }
    }

    private var emptyTile: some View {
        RoundedRectangle(cornerRadius: 16, style: .continuous)
            .strokeBorder(.tertiary, style: StrokeStyle(lineWidth: 1.5, dash: [6, 5]))
            .frame(width: tileSize, height: tileSize)
            .overlay {
                Image(systemName: "photo.on.rectangle.angled")
                    .font(.title2)
                    .foregroundStyle(.tertiary)
            }
            .accessibilityElement()
            .accessibilityLabel("No photos selected")
    }

    private func tile(for item: PhotosPickerItem, position: Int) -> some View {
        thumbnail(item)
            .frame(width: tileSize, height: tileSize)
            .clipShape(.rect(cornerRadius: 16, style: .continuous))
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Photo \(position)")
            .overlay(alignment: .topTrailing) {
                Button {
                    selection.removeAll { $0 == item }
                } label: {
                    Image(systemName: "xmark.circle.fill")
                        .font(.title3)
                        .symbolRenderingMode(.palette)
                        .foregroundStyle(.white, .black.opacity(0.55))
                        .frame(minWidth: 44, minHeight: 44, alignment: .topTrailing)
                        .padding(4)
                        .contentShape(.rect)
                }
                .buttonStyle(.plain)
                .accessibilityLabel("Remove photo \(position)")
            }
    }
}

/// Loads a picked photo as a small thumbnail.
struct MultiPhotoPickerTrayThumbnail: View {
    let item: PhotosPickerItem

    @State private var image: Image?
    @State private var didFail = false

    var body: some View {
        ZStack {
            Rectangle().fill(.quaternary)
            if let image {
                image
                    .resizable()
                    .scaledToFill()
            } else if didFail {
                Image(systemName: "exclamationmark.triangle")
                    .foregroundStyle(.secondary)
                    .accessibilityLabel("Photo could not be loaded")
            } else {
                ProgressView()
            }
        }
        .task(id: item) {
            image = nil
            didFail = false
            let data = try? await item.loadTransferable(type: Data.self)
            let thumbnail = await data.flatMap { UIImage(data: $0) }?.byPreparingThumbnail(ofSize: CGSize(width: 300, height: 300))
            guard !Task.isCancelled else { return }
            guard let thumbnail else {
                didFail = true
                return
            }
            image = Image(uiImage: thumbnail)
        }
    }
}

// MARK: - Demo

struct MultiPhotoPickerTrayDemo: View {
    @State private var selection: [PhotosPickerItem] = (0..<3).map {
        PhotosPickerItem(itemIdentifier: "demo-\($0)")
    }

    private let placeholders: [(symbol: String, colors: [Color])] = [
        ("mountain.2.fill", [.indigo, .cyan]),
        ("sun.max.fill", [.orange, .pink]),
        ("leaf.fill", [.green, .teal]),
        ("moon.stars.fill", [.purple, .blue]),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            VStack(alignment: .leading, spacing: 6) {
                Text("New Album")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                Text("Pick up to five photos to share.")
                    .font(.body)
                    .foregroundStyle(.secondary)
            }

            MultiPhotoPickerTray(selection: $selection, maxCount: 5) { item in
                if let placeholder = placeholder(for: item) {
                    ZStack {
                        LinearGradient(colors: placeholder.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                        Image(systemName: placeholder.symbol)
                            .font(.title)
                            .foregroundStyle(.white.opacity(0.9))
                    }
                } else {
                    MultiPhotoPickerTrayThumbnail(item: item)
                }
            }
            .padding(18)
            .background(.background, in: .rect(cornerRadius: 24, style: .continuous))

            Spacer()
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }

    private func placeholder(for item: PhotosPickerItem) -> (symbol: String, colors: [Color])? {
        guard
            let identifier = item.itemIdentifier,
            identifier.hasPrefix("demo-"),
            let index = Int(identifier.dropFirst(5)),
            placeholders.indices.contains(index)
        else { return nil }
        return placeholders[index]
    }
}

#Preview {
    MultiPhotoPickerTrayDemo()
}
```

## Time Slot Grid Picker

A grid of time slots where unavailable times are disabled and the chosen slot is highlighted.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/TimeSlotGridPicker/TimeSlotGridPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A grid of time slots. Unavailable times are disabled and the chosen one is highlighted.
struct TimeSlotGridPicker: View {
    let slots: [Date]
    var unavailable: Set<Date> = []
    @Binding var selection: Date?
    var format: Date.FormatStyle = .dateTime.hour().minute()
    var tint: Color = .indigo

    @ScaledMetric(relativeTo: .subheadline) private var minimumWidth: CGFloat = 96
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var orderedSlots: [Date] { Array(Set(slots)).sorted() }

    var body: some View {
        LazyVGrid(columns: [GridItem(.adaptive(minimum: minimumWidth), spacing: 10)], spacing: 10) {
            ForEach(orderedSlots, id: \.self) { slot in
                cell(for: slot)
            }
        }
        .animation(reduceMotion ? nil : .snappy(duration: 0.25), value: selection)
        .sensoryFeedback(.selection, trigger: selection)
    }

    private func cell(for slot: Date) -> some View {
        let isAvailable = !unavailable.contains(slot)
        let isSelected = isAvailable && selection == slot

        return Button {
            selection = slot
        } label: {
            Text(slot.formatted(format))
                .font(.subheadline.weight(.semibold).monospacedDigit())
                .strikethrough(!isAvailable)
                .lineLimit(1)
                .minimumScaleFactor(0.7)
                .padding(.vertical, 13)
                .frame(maxWidth: .infinity)
                .foregroundStyle(isSelected ? AnyShapeStyle(.white) : isAvailable ? AnyShapeStyle(.primary) : AnyShapeStyle(.tertiary))
                .background {
                    RoundedRectangle(cornerRadius: 14, style: .continuous)
                        .fill(isSelected ? AnyShapeStyle(tint) : isAvailable ? AnyShapeStyle(.quaternary) : AnyShapeStyle(.clear))
                }
                .overlay {
                    if !isAvailable {
                        RoundedRectangle(cornerRadius: 14, style: .continuous)
                            .strokeBorder(.quaternary)
                    }
                }
                .contentShape(.rect(cornerRadius: 14))
        }
        .buttonStyle(.plain)
        .disabled(!isAvailable)
        .accessibilityValue(isAvailable ? "" : "Unavailable")
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct TimeSlotGridPickerDemo: View {
    @State private var selection: Date?

    private static let format = Date.FormatStyle.dateTime.hour().minute().locale(Locale(identifier: "en_GB"))

    private static let slots: [Date] = stride(from: 9 * 60, through: 16 * 60, by: 30).compactMap { minutes in
        Calendar.current.date(bySettingHour: minutes / 60, minute: minutes % 60, second: 0, of: .now)
    }

    private static let unavailable: Set<Date> = Set(
        slots.enumerated().filter { [1, 4, 5, 9, 12].contains($0.offset) }.map(\.element)
    )

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 24) {
                VStack(alignment: .leading, spacing: 6) {
                    Text("Book a Table")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    Text("Choose a time for today.")
                        .font(.body)
                        .foregroundStyle(.secondary)
                }

                TimeSlotGridPicker(
                    slots: Self.slots,
                    unavailable: Self.unavailable,
                    selection: $selection,
                    format: Self.format
                )

                Text(selection.map { "Your table is at \($0.formatted(Self.format))" } ?? "No time chosen yet")
                    .font(.headline)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 16)
                    .background(.indigo.opacity(0.14), in: .rect(cornerRadius: 16, style: .continuous))
            }
            .padding(20)
        }
    }
}

#Preview {
    TimeSlotGridPickerDemo()
}
```

## Wheel Picker

A vertical wheel that picks one value from a list, with rows turning in 3D as they leave the center.

Category: Pickers. Minimum: iOS 18.0. Path: Components/Pickers/WheelPicker/WheelPicker.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A vertical wheel that picks one value. Rows turn away in 3D as they leave the center.
///
/// `values` must be unique. With Reduce Motion on, rows stay flat and only fade.
struct WheelPicker<Value: Hashable>: View {
    let title: LocalizedStringResource
    let values: [Value]
    @Binding var selection: Value
    var visibleRows: Int = 5
    var text: (Value) -> String

    @ScaledMetric(relativeTo: .title3) private var rowHeight: CGFloat = 44
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @State private var scrolledValue: Value?

    private let wheelSpace = "WheelPicker"

    var body: some View {
        let height = rowHeight * CGFloat(max(1, min(visibleRows, 15)))
        let row = rowHeight
        let tilts = !reduceMotion
        // A local copy: the effect below runs off the main actor and cannot capture the view.
        let space = wheelSpace

        ScrollView(.vertical) {
            LazyVStack(spacing: 0) {
                ForEach(values, id: \.self) { value in
                    Text(text(value))
                        .font(.title3.weight(.semibold).monospacedDigit())
                        .lineLimit(1)
                        .minimumScaleFactor(0.6)
                        .frame(maxWidth: .infinity)
                        .frame(height: row)
                        .contentShape(.rect)
                        .onTapGesture { selection = value }
                        .visualEffect { content, proxy in
                            let position = WheelPickerMath.position(midY: proxy.frame(in: .named(space)).midY, height: height)
                            return content
                                .rotation3DEffect(.degrees(tilts ? position * -62 : 0), axis: (1, 0, 0), perspective: 0.55)
                                .scaleEffect(tilts ? 1 - abs(position) * 0.12 : 1)
                                .opacity(1 - abs(position) * 0.72)
                        }
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.vertical, (height - row) / 2, for: .scrollContent)
        .scrollIndicators(.hidden)
        .scrollTargetBehavior(.viewAligned)
        .scrollPosition(id: $scrolledValue, anchor: .center)
        .frame(height: height)
        // The frame of the wheel itself. The scroll view's own space starts after its content
        // margin, which put the middle of the effect two rows below the selected one.
        .coordinateSpace(.named(wheelSpace))
        .background {
            RoundedRectangle(cornerRadius: 12, style: .continuous)
                .fill(.quaternary)
                .frame(height: row)
                .accessibilityHidden(true)
        }
        .onAppear { scrolledValue = selection }
        .onChange(of: scrolledValue) { _, value in
            if let value, value != selection {
                selection = value
            }
        }
        .onChange(of: selection) { _, value in
            if value != scrolledValue {
                withAnimation(reduceMotion ? nil : .snappy) { scrolledValue = value }
            }
        }
        .sensoryFeedback(.selection, trigger: selection)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(title)
        .accessibilityValue(text(selection))
        .accessibilityAdjustableAction { direction in
            let step = direction == .increment ? 1 : -1
            if let index = WheelPickerMath.adjustedIndex(current: values.firstIndex(of: selection), step: step, count: values.count) {
                selection = values[index]
            }
        }
    }
}

nonisolated enum WheelPickerMath {
    /// How far a row is from the center of the wheel: 0 at the center, -1 at the top, 1 at the bottom.
    static func position(midY: Double, height: Double) -> Double {
        guard height > 0, midY.isFinite else { return 0 }
        let halfHeight = height / 2
        return min(max((midY - halfHeight) / halfHeight, -1), 1)
    }

    /// The index one step away, stopping at both ends. Nil when there is nothing to pick.
    static func adjustedIndex(current: Int?, step: Int, count: Int) -> Int? {
        guard count > 0 else { return nil }
        guard let current else { return 0 }
        return min(max(current + step, 0), count - 1)
    }
}

// MARK: - Demo

struct WheelPickerDemo: View {
    @State private var hour = 7
    @State private var minute = 30

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 28) {
            VStack(spacing: 4) {
                Text("Wake Up")
                    .font(.headline)
                    .foregroundStyle(.secondary)
                Text(formatted(hour) + ":" + formatted(minute))
                    .font(.system(.largeTitle, design: .rounded, weight: .bold).monospacedDigit())
                    .contentTransition(.numericText())
                    .animation(reduceMotion ? nil : .snappy, value: hour)
                    .animation(reduceMotion ? nil : .snappy, value: minute)
            }

            HStack(spacing: 12) {
                WheelPicker(title: "Hour", values: Array(0..<24), selection: $hour, text: formatted)
                WheelPicker(title: "Minute", values: Array(stride(from: 0, to: 60, by: 5)), selection: $minute, text: formatted)
            }
            .padding(.horizontal, 24)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
    }

    private func formatted(_ value: Int) -> String {
        value < 10 ? "0\(value)" : "\(value)"
    }
}

#Preview {
    WheelPickerDemo()
}
```

## Bubble Wrap Pop

A sheet of bubbles that pop with a quick shrink and stay flat until reset.

Category: Playful. Minimum: iOS 18.0. Path: Components/Playful/BubbleWrapPop/BubbleWrapPop.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A sheet of bubbles that pop with a quick shrink and stay flat until `popped` is cleared.
struct BubbleWrapPop: View {
    @Binding var popped: Set<Int>
    var columns: Int = 6
    var count: Int = 48
    var tint: Color = .cyan

    var body: some View {
        let grid = Array(repeating: GridItem(.flexible(), spacing: 8), count: min(max(columns, 1), 16))

        LazyVGrid(columns: grid, spacing: 8) {
            ForEach(0..<min(max(count, 0), 600), id: \.self) { index in
                BubbleWrapPopBubble(index: index, tint: tint, isPopped: popped.contains(index)) {
                    popped.insert(index)
                }
            }
        }
        .sensoryFeedback(trigger: popped.count) { old, new in
            new > old ? .impact(flexibility: .soft, intensity: 0.8) : nil
        }
    }
}

private struct BubbleWrapPopBubble: View {
    let index: Int
    let tint: Color
    let isPopped: Bool
    let action: () -> Void

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Button(action: action) {
            Circle()
                .fill(
                    RadialGradient(
                        colors: isPopped ? [tint.opacity(0.12), tint.opacity(0.2)] : [.white.opacity(0.9), tint.opacity(0.55), tint.opacity(0.85)],
                        center: UnitPoint(x: 0.35, y: 0.3),
                        startRadius: 1,
                        endRadius: 44
                    )
                )
                .overlay {
                    Circle().strokeBorder(.white.opacity(isPopped ? 0.15 : 0.5), lineWidth: 1)
                }
                .aspectRatio(1, contentMode: .fit)
                .scaleEffect(isPopped ? 0.78 : 1)
                .shadow(color: tint.opacity(isPopped ? 0 : 0.35), radius: 3, y: 2)
        }
        .buttonStyle(.plain)
        .disabled(isPopped)
        .animation(reduceMotion ? nil : .spring(response: 0.18, dampingFraction: 0.45), value: isPopped)
        .accessibilityLabel("Bubble \(index + 1)")
        .accessibilityValue(isPopped ? "Popped" : "Not popped")
    }
}

// MARK: - Demo

struct BubbleWrapPopDemo: View {
    @State private var popped: Set<Int> = []

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(spacing: 20) {
                VStack(spacing: 4) {
                    Text("Bubble Wrap")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    Text("\(popped.count) of 48 popped")
                        .font(.headline.monospacedDigit())
                        .foregroundStyle(.secondary)
                        .contentTransition(.numericText())
                }

                BubbleWrapPop(popped: $popped)

                Button("Reset") {
                    withAnimation(reduceMotion ? nil : .smooth) { popped = [] }
                }
                .buttonStyle(.borderedProminent)
                .tint(.cyan)
                .disabled(popped.isEmpty)
            }
            .padding(20)
        }
    }
}

#Preview {
    BubbleWrapPopDemo()
}
```

## Slot Machine Reels

Reels of symbols that spin and stop one after another, with the result under a line across them.

Category: Playful. Minimum: iOS 18.0. Path: Components/Playful/SlotMachineReels/SlotMachineReels.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum SlotMachineReelsMath {
    /// The symbol under the line when a reel has turned `position` rows.
    static func index(at position: Int, count: Int) -> Int {
        guard count > 0 else { return 0 }
        return ((position % count) + count) % count
    }

    /// Where a reel stops: `turns` whole turns further on, and then on to `target`.
    static func stop(from position: Int, on target: Int, count: Int, turns: Int) -> Int {
        guard count > 0 else { return position }
        let ahead = index(at: target - index(at: position, count: count), count: count)
        return position + max(turns, 0) * count + ahead
    }

    /// A win is every reel on the same symbol.
    static func isWin(_ result: [Int]) -> Bool {
        guard let first = result.first, result.count > 1 else { return false }
        return result.allSatisfy { $0 == first }
    }
}

/// Reels that spin and stop one after another, each a little later than the one before.
///
/// `onResult` gets the symbols under the line once the last reel stops. With Reduce Motion
/// on, the reels change to their result without spinning.
struct SlotMachineReels: View {
    let symbols: [String]
    var reelCount = 3
    var spinTitle: LocalizedStringResource = "Spin"
    var tint: Color = .red
    var onResult: ([String]) -> Void = { _ in }

    @State private var positions: [Int] = []
    @State private var isSpinning = false
    @State private var stops = 0
    @ScaledMetric(relativeTo: .largeTitle) private var cell = 78.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let firstStop = 1.3
    private let stagger = 0.45

    private var reels: Int { max(reelCount, 1) }

    private func position(of reel: Int) -> Int {
        positions.indices.contains(reel) ? positions[reel] : 0
    }

    private var result: [String] {
        guard !symbols.isEmpty else { return [] }
        return (0..<reels).map { symbols[SlotMachineReelsMath.index(at: position(of: $0), count: symbols.count)] }
    }

    var body: some View {
        VStack(spacing: 22) {
            HStack(spacing: 10) {
                ForEach(0..<reels, id: \.self) { reel in
                    SlotMachineReelsStrip(position: Double(position(of: reel)), symbols: symbols, cell: cell)
                        .frame(maxWidth: .infinity)
                        .frame(height: cell * 2.2)
                        .background(.white, in: .rect(cornerRadius: 16))
                        .overlay {
                            // Light from above and below, so the symbols seem to turn on a drum.
                            LinearGradient(colors: [.black.opacity(0.28), .clear, .clear, .black.opacity(0.28)], startPoint: .top, endPoint: .bottom)
                                .clipShape(.rect(cornerRadius: 16))
                                .allowsHitTesting(false)
                        }
                }
            }
            .padding(12)
            .background(tint.gradient, in: .rect(cornerRadius: 26))
            .overlay {
                Capsule()
                    .fill(SlotMachineReelsContrastingForeground(background: tint))
                    .frame(height: 3)
                    .padding(.horizontal, 4)
                    .opacity(0.9)
                    .allowsHitTesting(false)
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Reels")
            .accessibilityValue(isSpinning ? Text("Spinning") : Text(verbatim: result.joined(separator: ", ")))

            Button(action: spin) {
                Text(spinTitle)
                    .font(.title3.bold())
                    .foregroundStyle(SlotMachineReelsContrastingForeground(background: tint))
                    .frame(maxWidth: .infinity, minHeight: 56)
                    .background(tint.gradient, in: .capsule)
                    .opacity(isSpinning ? 0.5 : 1)
            }
            .buttonStyle(.plain)
            .disabled(isSpinning || symbols.isEmpty)
        }
        .sensoryFeedback(.impact(weight: .medium), trigger: stops)
    }

    private func spin() {
        guard !isSpinning, !symbols.isEmpty else { return }
        isSpinning = true
        if positions.count != reels { positions = (0..<reels).map(position(of:)) }

        for reel in 0..<reels {
            let target = Int.random(in: symbols.indices)
            let next = SlotMachineReelsMath.stop(from: positions[reel], on: target, count: symbols.count, turns: 3 + reel)
            let isLast = reel == reels - 1

            withAnimation(reduceMotion ? nil : .timingCurve(0.2, 0.75, 0.25, 1, duration: firstStop + stagger * Double(reel))) {
                positions[reel] = next
            } completion: {
                stops += 1
                guard isLast else { return }
                isSpinning = false
                onResult(result)
            }
        }
    }
}

/// One reel. `Animatable` redraws it for every frame of a spin, so the symbols travel past the line.
private struct SlotMachineReelsStrip: View, Animatable {
    var position: Double
    let symbols: [String]
    let cell: CGFloat

    nonisolated var animatableData: Double {
        get { position }
        set { position = newValue }
    }

    var body: some View {
        let base = Int(position.rounded(.down))
        let fraction = position - Double(base)

        ZStack {
            if !symbols.isEmpty {
                ForEach(-2...2, id: \.self) { row in
                    Text(verbatim: symbols[SlotMachineReelsMath.index(at: base + row, count: symbols.count)])
                        .font(.system(size: cell * 0.56))
                        .frame(height: cell)
                        .offset(y: (fraction - Double(row)) * cell)
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .clipped()
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct SlotMachineReelsContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct SlotMachineReelsDemo: View {
    private let symbols = ["🍒", "🍋", "🔔", "⭐️", "💎", "🍀"]

    @State private var message: LocalizedStringResource = "Pull your luck"
    @State private var spins = 0

    var body: some View {
        VStack(spacing: 28) {
            VStack(spacing: 6) {
                Text("Lucky Reels")
                    .font(.system(.largeTitle, design: .rounded, weight: .heavy))
                Text(message)
                    .font(.title3.weight(.medium))
                    .foregroundStyle(.white.opacity(0.8))
                    .contentTransition(.opacity)
            }

            SlotMachineReels(symbols: symbols, tint: .yellow) { result in
                spins += 1
                message = Set(result).count == 1 ? "Three of a kind!" : (Set(result).count == 2 ? "So close" : "Try again")
            }

            Text("^[\(spins) spin](inflect: true)")
                .font(.footnote)
                .foregroundStyle(.white.opacity(0.6))
        }
        .foregroundStyle(.white)
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [Color(red: 0.36, green: 0.05, blue: 0.2), Color(red: 0.1, green: 0.02, blue: 0.12)], startPoint: .top, endPoint: .bottom).ignoresSafeArea())
        .animation(.easeInOut(duration: 0.25), value: spins)
    }
}

#Preview {
    SlotMachineReelsDemo()
}
```

## Spin Wheel Roulette

A prize wheel that spins with friction and lands on a random slice.

Category: Playful. Minimum: iOS 18.0. Path: Components/Playful/SpinWheelRoulette/SpinWheelRoulette.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A prize wheel that spins with friction and lands on a random slice.
///
/// With Reduce Motion on, the wheel moves straight to the result.
struct SpinWheelRoulette: View {
    let slices: [String]
    var onResult: (String) -> Void = { _ in }

    @State private var rotation = 0.0
    @State private var isSpinning = false
    @State private var lastResult: String?
    @State private var finishedSpins = 0
    @State private var lastSpinSlices: [String]?

    @ScaledMetric(relativeTo: .headline) private var hubSize: CGFloat = 78
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let palette: [Color] = [.pink, .orange, .yellow, .green, .teal, .blue, .indigo, .purple]

    /// The wheel keeps the slices of the last spin until the next one, so the result always matches it.
    private var drawnSlices: [String] { lastSpinSlices ?? slices }

    var body: some View {
        ZStack {
            wheel
                .rotationEffect(.degrees(rotation))
                .contentShape(.circle)
                .onTapGesture(perform: spin)
                .accessibilityElement()
                .accessibilityLabel("Prize wheel")
                .accessibilityValue(drawnSlices.joined(separator: ", "))

            Circle()
                .strokeBorder(.white.opacity(0.9), lineWidth: 6)
                .shadow(color: .black.opacity(0.25), radius: 10, y: 4)
                .accessibilityHidden(true)

            VStack {
                Image(systemName: "arrowtriangle.down.fill")
                    .font(.largeTitle)
                    .foregroundStyle(.white)
                    .shadow(color: .black.opacity(0.4), radius: 3, y: 2)
                    .offset(y: -16)
                Spacer()
            }
            .accessibilityHidden(true)

            Button(action: spin) {
                Text("Spin")
                    .font(.headline.weight(.heavy))
                    .lineLimit(1)
                    .minimumScaleFactor(0.6)
                    .foregroundStyle(.white)
                    .padding(8)
                    .frame(width: hubSize, height: hubSize)
                    .background(.black.gradient, in: .circle)
                    .overlay { Circle().strokeBorder(.white, lineWidth: 3) }
            }
            .buttonStyle(.plain)
            .disabled(isSpinning || slices.isEmpty)
            .accessibilityValue(lastResult ?? "")
        }
        .aspectRatio(1, contentMode: .fit)
        .sensoryFeedback(.success, trigger: finishedSpins)
    }

    private var wheel: some View {
        Canvas { [drawnSlices] context, size in
            let radius = min(size.width, size.height) / 2
            guard radius > 0, !drawnSlices.isEmpty else { return }

            let center = CGPoint(x: size.width / 2, y: size.height / 2)
            let slice = SpinWheelRouletteMath.sliceAngle(count: drawnSlices.count)

            for (index, label) in drawnSlices.enumerated() {
                let start = Double(index) * slice - 90
                var wedge = Path()
                if drawnSlices.count == 1 {
                    wedge.addEllipse(in: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2))
                } else {
                    wedge.move(to: center)
                    wedge.addArc(center: center, radius: radius, startAngle: .degrees(start), endAngle: .degrees(start + slice), clockwise: false)
                    wedge.closeSubpath()
                }
                context.fill(wedge, with: .color(palette[index % palette.count].opacity(0.92)))
                context.stroke(wedge, with: .color(.white.opacity(0.75)), lineWidth: 1.5)

                var labelContext = context
                labelContext.translateBy(x: center.x, y: center.y)
                labelContext.rotate(by: .degrees(start + slice / 2))
                labelContext.draw(
                    Text(label).font(.subheadline.weight(.bold)).foregroundStyle(.white),
                    in: CGRect(x: radius * 0.34, y: -radius * 0.1, width: radius * 0.62, height: radius * 0.2)
                )
            }
        }
        .clipShape(.circle)
    }

    private func spin() {
        guard !isSpinning, !slices.isEmpty else { return }

        let winner = Int.random(in: slices.indices)
        let label = slices[winner]
        let target = SpinWheelRouletteMath.targetRotation(
            from: rotation,
            winner: winner,
            count: slices.count,
            jitter: .random(in: -0.35...0.35)
        )
        isSpinning = true
        lastSpinSlices = slices

        if reduceMotion {
            rotation = target
            finish(with: label)
        } else {
            withAnimation(.timingCurve(0.12, 0.75, 0.12, 1, duration: 3.2), completionCriteria: .removed) {
                rotation = target
            } completion: {
                finish(with: label)
            }
        }
    }

    private func finish(with label: String) {
        isSpinning = false
        lastResult = label
        finishedSpins += 1
        AccessibilityNotification.Announcement("Landed on \(label)").post()
        onResult(label)
    }
}

enum SpinWheelRouletteMath {
    static func sliceAngle(count: Int) -> Double {
        count > 0 ? 360 / Double(count) : 360
    }

    /// The rotation that brings `winner` under the pointer after `turns` whole turns, always moving forward.
    /// `jitter` moves the landing point inside the slice, as a fraction of it.
    static func targetRotation(from current: Double, winner: Int, count: Int, turns: Int = 5, jitter: Double = 0) -> Double {
        let resting = -(Double(winner) + 0.5 + jitter) * sliceAngle(count: count)
        return current + Double(max(turns, 0)) * 360 + normalized(resting - current)
    }

    /// The slice under the pointer at the top of the wheel for a rotation in degrees.
    static func winner(rotation: Double, count: Int) -> Int? {
        guard count > 0, rotation.isFinite else { return nil }
        return min(Int(normalized(-rotation) / sliceAngle(count: count)), count - 1)
    }

    private static func normalized(_ degrees: Double) -> Double {
        let remainder = degrees.truncatingRemainder(dividingBy: 360)
        return remainder < 0 ? remainder + 360 : remainder
    }
}

// MARK: - Demo

struct SpinWheelRouletteDemo: View {
    @State private var result: String?

    private let slices = ["10% off", "Free tea", "Retry", "Gift", "25% off", "Bonus", "Sticker", "Jackpot"]

    var body: some View {
        VStack(spacing: 28) {
            Text("Spin to Win")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)

            SpinWheelRoulette(slices: slices) { result = $0 }
                .padding(.horizontal, 24)

            Text(result.map { "You got: \($0)" } ?? "Tap the wheel to try your luck")
                .font(.title3.weight(.semibold))
                .foregroundStyle(.white.opacity(0.9))
                .multilineTextAlignment(.center)
                .padding(.horizontal, 24)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    SpinWheelRouletteDemo()
}
```

## Profile Header Stretchy

A profile whose cover stretches when the page is pulled down and closes into a bar with the name as it scrolls, while the avatar on its edge shrinks away.

Category: Profiles. Minimum: iOS 18.0. Path: Components/Profiles/ProfileHeaderStretchy/ProfileHeaderStretchy.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum ProfileHeaderStretchyMath {
    /// How tall the cover is for a scroll offset: it grows when the content is pulled down,
    /// and shrinks with the scroll until it is the bar.
    static func coverHeight(offset: CGFloat, expanded: CGFloat, collapsed: CGFloat) -> CGFloat {
        max(expanded - offset, min(collapsed, expanded))
    }

    /// From 0, the whole cover, to 1, only the bar.
    static func progress(offset: CGFloat, expanded: CGFloat, collapsed: CGFloat) -> Double {
        let travel = expanded - collapsed
        guard travel > 0 else { return 1 }
        return Double(min(max(offset / travel, 0), 1))
    }

    /// The avatar gets smaller as the cover closes, and is gone a little before it is the bar.
    static func avatarScale(progress: Double) -> Double {
        1 - 0.45 * min(max(progress, 0), 1)
    }

    static func avatarOpacity(progress: Double) -> Double {
        1 - min(max((progress - 0.55) / 0.35, 0), 1)
    }

    /// The name shows in the bar over the last stretch, once the avatar is gone.
    static func titleOpacity(progress: Double) -> Double {
        min(max((progress - 0.8) / 0.2, 0), 1)
    }
}

/// A profile whose cover stretches when the page is pulled down and closes into a bar with the
/// name as it scrolls, while the avatar on its edge shrinks away.
///
/// The cover and the avatar follow the scroll itself, so there is nothing to slow down for
/// Reduce Motion. Put it at the top of a screen: the cover runs under the status bar.
struct ProfileHeaderStretchy<Cover: View, Avatar: View, Content: View>: View {
    let name: String
    var coverHeight: CGFloat = 190
    @ViewBuilder var cover: () -> Cover
    @ViewBuilder var avatar: () -> Avatar
    @ViewBuilder var content: () -> Content

    @State private var offset: CGFloat = 0
    @ScaledMetric(relativeTo: .title) private var avatarSize = 88.0

    private let barHeight: CGFloat = 44
    private let margin: CGFloat = 20

    var body: some View {
        GeometryReader { proxy in
            let collapsed = proxy.safeAreaInsets.top + barHeight
            let progress = ProfileHeaderStretchyMath.progress(offset: offset, expanded: coverHeight, collapsed: collapsed)

            ScrollView {
                VStack(alignment: .leading, spacing: 0) {
                    // Room for the cover, and for the half of the avatar that hangs under it.
                    Color.clear
                        .frame(height: coverHeight + avatarSize / 2 + 12)

                    content()
                }
            }
            .onScrollGeometryChange(for: CGFloat.self) { $0.contentOffset.y + $0.contentInsets.top } action: { _, new in
                offset = new
            }
            .overlay(alignment: .top) {
                header(height: ProfileHeaderStretchyMath.coverHeight(offset: offset, expanded: coverHeight, collapsed: collapsed), progress: progress)
            }
            .ignoresSafeArea(edges: .top)
        }
    }

    private func header(height: CGFloat, progress: Double) -> some View {
        cover()
            .frame(maxWidth: .infinity)
            .frame(height: height)
            .clipped()
            .overlay {
                Rectangle()
                    .fill(.ultraThinMaterial)
                    .opacity(progress)
            }
            .overlay(alignment: .bottom) {
                Text(name)
                    .font(.headline)
                    .lineLimit(1)
                    .frame(height: barHeight)
                    .padding(.horizontal, margin)
                    .opacity(ProfileHeaderStretchyMath.titleOpacity(progress: progress))
                    .accessibilityHidden(progress < 1)
            }
            .overlay(alignment: .bottomLeading) {
                avatar()
                    .frame(width: avatarSize, height: avatarSize)
                    .clipShape(.circle)
                    .overlay { Circle().stroke(.background, lineWidth: 4) }
                    .scaleEffect(ProfileHeaderStretchyMath.avatarScale(progress: progress), anchor: .bottomLeading)
                    .opacity(ProfileHeaderStretchyMath.avatarOpacity(progress: progress))
                    .padding(.leading, margin)
                    // Half of it hangs under the cover.
                    .alignmentGuide(.bottom) { $0[VerticalAlignment.center] }
            }
            .allowsHitTesting(false)
    }
}

// MARK: - Demo

struct ProfileHeaderStretchyDemo: View {
    private let posts = ["Morning light over the bay", "Notes from the design review", "A slow Sunday in the hills", "Why I draw every day", "The best coffee in Lisbon", "Sketches for the next app", "Ten minutes of quiet", "What the sea taught me", "Small tools, big ideas", "Walking home at dusk"]

    var body: some View {
        ProfileHeaderStretchy(name: "Maya Okafor") {
            LinearGradient(colors: [.orange, .pink, .purple], startPoint: .topLeading, endPoint: .bottomTrailing)
                .overlay {
                    Image(systemName: "mountain.2.fill")
                        .resizable()
                        .scaledToFit()
                        .foregroundStyle(.white.opacity(0.25))
                        .padding(.top, 60)
                        .accessibilityHidden(true)
                }
        } avatar: {
            LinearGradient(colors: [.indigo, .teal], startPoint: .top, endPoint: .bottom)
                .overlay {
                    Text("MO")
                        .font(.title.bold())
                        .foregroundStyle(.white)
                }
                .accessibilityLabel("Maya Okafor")
        } content: {
            VStack(alignment: .leading, spacing: 18) {
                VStack(alignment: .leading, spacing: 4) {
                    Text("Maya Okafor")
                        .font(.title2.bold())
                    Text("Designer. Draws, walks and writes about both.")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }

                HStack(spacing: 28) {
                    stat("128", "Posts")
                    stat("4.2K", "Followers")
                    stat("310", "Following")
                }

                Divider()

                ForEach(posts, id: \.self) { post in
                    HStack(spacing: 14) {
                        RoundedRectangle(cornerRadius: 12)
                            .fill(.quaternary)
                            .frame(width: 56, height: 56)
                            .overlay {
                                Image(systemName: "photo")
                                    .foregroundStyle(.secondary)
                            }
                            .accessibilityHidden(true)
                        Text(post)
                            .font(.body)
                    }
                }
            }
            .padding(.horizontal, 20)
            .padding(.bottom, 32)
        }
    }

    private func stat(_ value: String, _ label: LocalizedStringResource) -> some View {
        VStack(alignment: .leading, spacing: 2) {
            Text(value)
                .font(.headline)
            Text(label)
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    ProfileHeaderStretchyDemo()
}
```

## Stories Viewer

A full-screen story pager with segmented progress bars, tap to move and hold to pause.

Category: Profiles. Minimum: iOS 18.0. Path: Components/Profiles/StoriesViewer/StoriesViewer.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct StoriesViewerStory: Identifiable {
    let id: String
    let image: Image
    var title: String
    var caption: String
    /// What the image shows, for VoiceOver. Leave it nil when the image is decoration.
    var imageLabel: String?
}

/// A full-screen story pager with segmented progress bars.
///
/// Tap the left or right half to move, and hold to pause. Stories do not advance by themselves
/// with Reduce Motion or VoiceOver on: the tap areas still work.
struct StoriesViewer: View {
    let stories: [StoriesViewerStory]
    var duration: TimeInterval = 4
    var onClose: (() -> Void)?
    var onFinish: () -> Void = {}

    @State private var playback = StoriesViewerPlayback()
    @State private var isPressing = false
    @State private var pressStart: Date?

    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    private let holdThreshold: TimeInterval = 0.25

    private var advancesByItself: Bool { !reduceMotion && !voiceOverEnabled }

    private var isRunning: Bool {
        advancesByItself && !isPressing && !playback.isFinished && !stories.isEmpty
    }

    private var current: StoriesViewerStory? {
        stories.indices.contains(playback.index) ? stories[playback.index] : stories.last
    }

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            if let current {
                Color.clear
                    .overlay { storyImage(current) }
                    .clipped()
                    .ignoresSafeArea()
                    .id(current.id)
                    .transition(.opacity)

                tapAreas

                VStack(spacing: 0) {
                    header(for: current)
                    Spacer(minLength: 24)
                    caption(for: current)
                }
                .opacity(isPressing ? 0 : 1)
                .animation(.easeInOut(duration: 0.2).delay(isPressing ? holdThreshold : 0), value: isPressing)
            }
        }
        .foregroundStyle(.white)
        .task(id: StoriesViewerSchedule(isRunning: isRunning, count: stories.count, duration: duration)) {
            guard isRunning else { return }
            var last = Date.now
            while !Task.isCancelled {
                try? await Task.sleep(for: .milliseconds(33))
                guard !Task.isCancelled else { return }
                let now = Date.now
                let elapsed = now.timeIntervalSince(last)
                last = now
                update { $0.tick(elapsed: elapsed, duration: duration, count: stories.count) }
            }
        }
        .onChange(of: stories.count) { _, count in
            playback.clamp(count: count)
        }
        .onChange(of: playback.isFinished) { _, isFinished in
            if isFinished { onFinish() }
        }
    }

    @ViewBuilder
    private func storyImage(_ story: StoriesViewerStory) -> some View {
        let image = story.image.resizable().scaledToFill()

        if let label = story.imageLabel {
            image.accessibilityLabel(label)
        } else {
            image.accessibilityRepresentation { EmptyView() }
        }
    }

    private var tapAreas: some View {
        HStack(spacing: 0) {
            tapArea("Previous story") {
                update { $0.previous(count: stories.count) }
            }
            tapArea("Next story") {
                update { $0.next(count: stories.count) }
            }
        }
    }

    private func tapArea(_ label: String, action: @escaping () -> Void) -> some View {
        Button {
            let wasHold = pressStart.map { Date.now.timeIntervalSince($0) >= holdThreshold } ?? false
            pressStart = nil
            if !wasHold {
                action()
            }
        } label: {
            Color.clear.frame(maxWidth: .infinity, maxHeight: .infinity)
        }
        .buttonStyle(StoriesViewerTapAreaStyle { isPressed in
            if isPressed { pressStart = .now }
            isPressing = isPressed
        })
        .accessibilityLabel(label)
    }

    private func header(for story: StoriesViewerStory) -> some View {
        VStack(spacing: 10) {
            HStack(spacing: 4) {
                ForEach(stories.indices, id: \.self) { segment in
                    Capsule()
                        .fill(.white.opacity(0.32))
                        .overlay {
                            Capsule()
                                .fill(.white)
                                .scaleEffect(x: fill(for: segment), anchor: .leading)
                        }
                        .frame(height: 3)
                }
            }
            .allowsHitTesting(false)
            .accessibilityElement(children: .ignore)
            .accessibilityLabel("Story")
            .accessibilityValue("\(min(playback.index + 1, stories.count)) of \(stories.count)")

            HStack {
                Text(story.title)
                    .font(.headline)
                    .lineLimit(2)
                    .minimumScaleFactor(0.7)
                    .allowsHitTesting(false)
                Spacer()
                if let onClose {
                    Button(action: onClose) {
                        Image(systemName: "xmark")
                            .font(.headline)
                            .frame(minWidth: 44, minHeight: 44)
                            .contentShape(.rect)
                    }
                    .accessibilityLabel("Close")
                }
            }
        }
        .padding(.horizontal, 12)
        .padding(.top, 8)
    }

    private func caption(for story: StoriesViewerStory) -> some View {
        Text(story.caption)
            .font(.title3.weight(.semibold))
            .lineLimit(8)
            .minimumScaleFactor(0.6)
            .shadow(color: .black.opacity(0.45), radius: 6, y: 2)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.horizontal, 20)
            .padding(.bottom, 24)
            .allowsHitTesting(false)
    }

    private func fill(for segment: Int) -> Double {
        if !advancesByItself, segment == playback.index { return 1 }
        return playback.fill(for: segment)
    }

    private func update(_ change: (inout StoriesViewerPlayback) -> Void) {
        var updated = playback
        change(&updated)
        if updated.index == playback.index {
            playback = updated
        } else {
            withAnimation(reduceMotion ? nil : .easeInOut(duration: 0.2)) { playback = updated }
        }
    }
}

private struct StoriesViewerSchedule: Equatable {
    let isRunning: Bool
    let count: Int
    let duration: TimeInterval
}

/// Reports touches, including ones the system cancels, so a hold can never get stuck.
private struct StoriesViewerTapAreaStyle: ButtonStyle {
    let onPressChange: (Bool) -> Void

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .contentShape(.rect)
            .onChange(of: configuration.isPressed) { _, isPressed in
                onPressChange(isPressed)
            }
    }
}

struct StoriesViewerPlayback: Equatable {
    private(set) var index = 0
    private(set) var progress = 0.0
    private(set) var isFinished = false

    mutating func tick(elapsed: TimeInterval, duration: TimeInterval, count: Int) {
        guard count > 0, !isFinished, elapsed > 0 else { return }
        progress += elapsed / max(duration, 0.1)
        if progress >= 1 {
            next(count: count)
        }
    }

    mutating func next(count: Int) {
        guard count > 0, !isFinished else { return }
        if index + 1 < count {
            index += 1
            progress = 0
        } else {
            progress = 1
            isFinished = true
        }
    }

    mutating func previous(count: Int) {
        guard count > 0 else { return }
        isFinished = false
        index = max(index - 1, 0)
        progress = 0
    }

    /// Keeps the position valid when the list of stories changes, and moves on if new ones arrive after the end.
    mutating func clamp(count: Int) {
        if isFinished, index + 1 < count {
            isFinished = false
            index += 1
            progress = 0
            return
        }
        guard index >= count else { return }
        index = max(count - 1, 0)
        progress = 0
    }

    /// How full a segment's bar is, from 0 to 1.
    func fill(for segment: Int) -> Double {
        if segment < index { return 1 }
        return segment == index ? min(max(progress, 0), 1) : 0
    }
}

// MARK: - Demo

struct StoriesViewerDemo: View {
    @State private var run = 0

    private let stories = [
        StoriesViewerStory(
            id: "dawn",
            image: placeholder(colors: [.orange, .pink, .purple], symbol: "sunrise.fill"),
            title: "Morning hike",
            caption: "First light over the ridge.",
            imageLabel: "A sunrise on a pink and purple sky"
        ),
        StoriesViewerStory(
            id: "forest",
            image: placeholder(colors: [.teal, .green, .black], symbol: "tree.fill"),
            title: "Into the woods",
            caption: "Three hours of pure green.",
            imageLabel: "A tree on a dark green background"
        ),
        StoriesViewerStory(
            id: "night",
            image: placeholder(colors: [.indigo, .blue, .black], symbol: "moon.stars.fill"),
            title: "Camp",
            caption: "And then the stars came out.",
            imageLabel: "A moon and stars on a night sky"
        ),
    ]

    var body: some View {
        StoriesViewer(stories: stories, duration: 3, onFinish: { run += 1 })
            .id(run)
    }

    private static func placeholder(colors: [Color], symbol: String) -> Image {
        let size = CGSize(width: 402, height: 874)
        return Image(size: size, opaque: true) { context in
            context.fill(
                Path(CGRect(origin: .zero, size: size)),
                with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: size.width, y: size.height))
            )

            var icon = context.resolve(Image(systemName: symbol))
            icon.shading = .color(.white.opacity(0.35))
            let scale = 200 / max(icon.size.width, icon.size.height, 1)
            let iconSize = CGSize(width: icon.size.width * scale, height: icon.size.height * scale)
            context.draw(icon, in: CGRect(
                x: (size.width - iconSize.width) / 2,
                y: (size.height - iconSize.height) / 2,
                width: iconSize.width,
                height: iconSize.height
            ))
        }
    }
}

#Preview {
    StoriesViewerDemo()
}
```

## Story Ring Avatar

An avatar with a gradient ring that spins while there are unseen stories.

Category: Profiles. Minimum: iOS 18.0. Path: Components/Profiles/StoryRingAvatar/StoryRingAvatar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// An avatar with a gradient ring that spins while there are unseen stories.
///
/// `placeholder` shows while the image loads or when there is no URL. With Reduce Motion on,
/// the ring stays still.
struct StoryRingAvatar<Placeholder: View>: View {
    let name: String
    var url: URL?
    var hasUnseenStories: Bool = true
    var size: CGFloat = 72
    var colors: [Color] = [.yellow, .orange, .pink, .purple, .yellow]
    @ViewBuilder var placeholder: () -> Placeholder

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var spins: Bool { hasUnseenStories && !reduceMotion }

    var body: some View {
        let diameter = max(size, 0)
        let ringWidth = diameter * 0.05
        let photoSize = max(diameter - ringWidth * 4, 0)

        ZStack {
            Circle()
                .strokeBorder(.quaternary, lineWidth: max(ringWidth * 0.5, 1))

            TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: !spins)) { timeline in
                Circle()
                    .strokeBorder(AngularGradient(colors: colors, center: .center), lineWidth: ringWidth)
                    .rotationEffect(.degrees(spins ? angle(at: timeline.date) : 0))
            }
            .opacity(hasUnseenStories ? 1 : 0)

            AsyncImage(url: url) { phase in
                if let image = phase.image {
                    image
                        .resizable()
                        .scaledToFill()
                } else {
                    placeholder()
                }
            }
            .frame(width: photoSize, height: photoSize)
            .clipShape(.circle)
        }
        .frame(width: diameter, height: diameter)
        .animation(reduceMotion ? nil : .easeInOut(duration: 0.3), value: hasUnseenStories)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(name)
        .accessibilityValue(hasUnseenStories ? "New stories" : "No new stories")
    }

    private func angle(at date: Date) -> Double {
        (date.timeIntervalSinceReferenceDate * 90).truncatingRemainder(dividingBy: 360)
    }
}

// MARK: - Demo

struct StoryRingAvatarDemo: View {
    private struct Friend: Identifiable {
        let id: String
        let symbol: String
        let colors: [Color]
    }

    private let friends = [
        Friend(id: "Ana", symbol: "person.fill", colors: [.pink, .orange]),
        Friend(id: "Leo", symbol: "pawprint.fill", colors: [.teal, .blue]),
        Friend(id: "Mia", symbol: "camera.fill", colors: [.purple, .indigo]),
        Friend(id: "Noa", symbol: "music.note", colors: [.green, .mint]),
    ]

    @State private var seen: Set<String> = ["Noa"]

    var body: some View {
        VStack(spacing: 40) {
            Spacer()

            ScrollView(.horizontal) {
                HStack(spacing: 18) {
                    ForEach(friends) { friend in
                        Button {
                            if seen.remove(friend.id) == nil { seen.insert(friend.id) }
                        } label: {
                            VStack(spacing: 8) {
                                avatar(for: friend, size: 74)
                                Text(friend.id)
                                    .font(.caption.weight(.medium))
                                    .foregroundStyle(.primary)
                            }
                        }
                        .buttonStyle(.plain)
                        .accessibilityLabel(friend.id)
                        .accessibilityValue(seen.contains(friend.id) ? "No new stories" : "New stories")
                    }
                }
                .padding(.horizontal, 24)
                .frame(maxWidth: .infinity)
            }
            .scrollIndicators(.hidden)
            .fixedSize(horizontal: false, vertical: true)

            avatar(for: friends[0], size: 190)

            Text("Tap a friend to mark their stories as seen.")
                .font(.body)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)
                .padding(.horizontal, 32)

            Spacer()
        }
    }

    private func avatar(for friend: Friend, size: CGFloat) -> some View {
        StoryRingAvatar(name: friend.id, hasUnseenStories: !seen.contains(friend.id), size: size) {
            ZStack {
                LinearGradient(colors: friend.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                Image(systemName: friend.symbol)
                    .font(.system(size: size * 0.38))
                    .foregroundStyle(.white)
            }
        }
    }
}

#Preview {
    StoryRingAvatarDemo()
}
```

## Activity Rings

Concentric gradient rings that close as daily goals are reached.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/ActivityRings/ActivityRings.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct ActivityRingsRing {
    var title: String
    var progress: Double
    var colors: [Color]
}

/// Concentric gradient rings that close as their goals are reached.
struct ActivityRings: View {
    let rings: [ActivityRingsRing]
    var diameter: CGFloat = 240
    var lineWidth: CGFloat = 28
    var gap: CGFloat = 5

    var body: some View {
        let size = max(diameter, 0)
        let stroke = max(lineWidth, 0)
        let pitch = stroke + max(gap, 0)
        let visible = ActivityRingsMath.visibleCount(ringCount: rings.count, diameter: size, lineWidth: stroke, gap: max(gap, 0))

        ZStack {
            ForEach(0..<visible, id: \.self) { index in
                ActivityRingsTrack(ring: rings[index], diameter: size, lineWidth: stroke, inset: CGFloat(index) * pitch)
            }
        }
        .frame(width: size, height: size)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Activity rings")
        .accessibilityValue(summary)
    }

    private var summary: String {
        rings.map { ring in
            let percent = ActivityRingsMath.clamped(ring.progress).formatted(.percent.precision(.fractionLength(0)))
            return "\(ring.title) \(percent)"
        }
        .joined(separator: ", ")
    }
}

private struct ActivityRingsTrack: View {
    let ring: ActivityRingsRing
    let diameter: CGFloat
    let lineWidth: CGFloat
    let inset: CGFloat

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var colors: [Color] { ring.colors.isEmpty ? [.accentColor] : ring.colors }
    private var progress: Double { ActivityRingsMath.clamped(ring.progress) }

    var body: some View {
        ZStack {
            Circle()
                .inset(by: inset + lineWidth / 2)
                .stroke((colors.first ?? .accentColor).opacity(0.2), lineWidth: lineWidth)

            Circle()
                .inset(by: inset + lineWidth / 2)
                .trim(from: 0, to: progress)
                .stroke(
                    AngularGradient(colors: colors, center: .center),
                    style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                )
                .rotationEffect(.degrees(-90))

            Circle()
                .fill(colors.first ?? .accentColor)
                .frame(width: lineWidth, height: lineWidth)
                .offset(y: -(diameter / 2 - inset - lineWidth / 2))
                .opacity(progress > 0 ? 1 : 0)
        }
        .animation(reduceMotion ? nil : .spring(duration: 1.1, bounce: 0.2), value: progress)
    }
}

enum ActivityRingsMath {
    static func clamped(_ progress: Double) -> Double {
        progress.isFinite ? min(max(progress, 0), 1) : 0
    }

    /// How many rings fit inside the diameter, so inner rings never turn inside out.
    static func visibleCount(ringCount: Int, diameter: Double, lineWidth: Double, gap: Double) -> Int {
        let pitch = lineWidth + gap
        guard ringCount > 0, diameter > 0, pitch > 0, pitch.isFinite, diameter.isFinite else { return 0 }
        // The innermost ring needs no gap after it, which is why one gap is added back.
        return Int(min(Double(ringCount), ((diameter / 2 + gap) / pitch).rounded(.down)))
    }
}

// MARK: - Demo

struct ActivityRingsDemo: View {
    @State private var fill = 0.0

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let goals: [(title: String, value: Double, goal: Double, unit: String, colors: [Color])] = [
        ("Move", 520, 600, "kcal", [.red, .pink]),
        ("Exercise", 22, 30, "min", [.green, .mint]),
        ("Stand", 11, 12, "h", [.cyan, .blue]),
    ]

    var body: some View {
        VStack(spacing: 40) {
            ActivityRings(rings: goals.map { goal in
                ActivityRingsRing(title: goal.title, progress: goal.value / goal.goal * fill, colors: goal.colors)
            })

            VStack(spacing: 14) {
                ForEach(goals, id: \.title) { goal in
                    HStack {
                        Circle()
                            .fill(LinearGradient(colors: goal.colors, startPoint: .top, endPoint: .bottom))
                            .frame(width: 12, height: 12)
                            .accessibilityHidden(true)
                        Text(goal.title)
                            .font(.headline)
                        Spacer()
                        Text("\(Int(goal.value * fill)) / \(Int(goal.goal)) \(goal.unit)")
                            .font(.body.monospacedDigit())
                            .foregroundStyle(.white.opacity(0.75))
                            .contentTransition(.numericText())
                    }
                }
            }
            .padding(.horizontal, 44)
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.black)
        .task(id: reduceMotion) {
            guard !reduceMotion else {
                fill = 1
                return
            }
            while !Task.isCancelled {
                fill = 1
                try? await Task.sleep(for: .seconds(2.4))
                guard !Task.isCancelled else { return }
                fill = 0
                try? await Task.sleep(for: .seconds(1.1))
            }
        }
    }
}

#Preview {
    ActivityRingsDemo()
}
```

## Circular Progress Ring

An animated gradient ring that shows progress with a percentage in the middle.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/CircularProgressRing/CircularProgressRing.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The clamping and the text of the ring, apart from the view so they can be tested.
enum CircularProgressRingMath {
    static func clamped(_ value: Double) -> Double {
        value.isNaN ? 0 : min(max(value, 0), 1)
    }

    /// Only a finished ring reads 100: 99.6% rounds down to 99.
    static func wholePercent(_ value: Double) -> Int {
        let fraction = clamped(value)
        let percent = Int((fraction * 100).rounded())
        return percent == 100 && fraction < 1 ? 99 : percent
    }

    static func percentText(_ value: Double, locale: Locale = .autoupdatingCurrent) -> String {
        wholePercent(value).formatted(.percent.locale(locale))
    }
}

/// An animated ring with a gradient and the percentage in the middle. Give it a frame to size it.
///
/// With Reduce Motion on, the ring and the number change without animating.
struct CircularProgressRing: View {
    var progress: Double
    var colors: [Color] = [.cyan, .blue, .purple]
    var lineWidth: CGFloat = 18
    var font: Font = .system(.largeTitle, design: .rounded, weight: .bold)
    var label: LocalizedStringKey = "Progress"

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var value: Double { CircularProgressRingMath.clamped(progress) }
    private var percentText: String { CircularProgressRingMath.percentText(progress) }
    private var strokeStyle: StrokeStyle { StrokeStyle(lineWidth: lineWidth, lineCap: .round) }

    var body: some View {
        ZStack {
            Circle()
                .stroke(.quaternary, lineWidth: lineWidth)

            ZStack {
                Circle()
                    .trim(from: 0, to: value)
                    .stroke(AngularGradient(colors: colors, center: .center), style: strokeStyle)

                // The round cap at the start falls on the gradient's seam, so paint it with the first color.
                Circle()
                    .trim(from: 0, to: value > 0 ? 0.001 : 0)
                    .stroke(colors.first ?? .blue, style: strokeStyle)
            }
            // A round cap draws a dot even on a line with no length.
            .opacity(value > 0 ? 1 : 0)
            .rotationEffect(.degrees(-90))

            Text(percentText)
                .font(font)
                .monospacedDigit()
                .contentTransition(.numericText(value: value))
                .minimumScaleFactor(0.4)
                .lineLimit(1)
                .padding(lineWidth + 4)
        }
        .padding(lineWidth / 2)
        .aspectRatio(1, contentMode: .fit)
        .animation(reduceMotion ? nil : .smooth(duration: 0.7), value: value)
        .accessibilityElement()
        .accessibilityLabel(label)
        .accessibilityValue(percentText)
    }
}

// MARK: - Demo

struct CircularProgressRingDemo: View {
    @State private var progress = 0.0
    @ScaledMetric(relativeTo: .largeTitle) private var percentSize = 60

    var body: some View {
        VStack(spacing: 40) {
            Text("Uploading photos")
                .font(.system(.title, design: .rounded, weight: .bold))

            CircularProgressRing(
                progress: progress,
                lineWidth: 26,
                font: .system(size: percentSize, weight: .bold, design: .rounded),
                label: "Upload"
            )
            .frame(width: 280)

            HStack(spacing: 28) {
                CircularProgressRing(progress: 0.32, colors: [.pink, .orange], lineWidth: 8, font: .headline, label: "Move")
                CircularProgressRing(progress: 0.68, colors: [.green, .mint], lineWidth: 8, font: .headline, label: "Exercise")
                CircularProgressRing(progress: 0.91, colors: [.teal, .blue], lineWidth: 8, font: .headline, label: "Stand")
            }
            .frame(height: 88)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task {
            let values = [0.25, 0.6, 0.85, 1, 0]
            var index = 0
            while !Task.isCancelled {
                progress = values[index]
                index = (index + 1) % values.count
                try? await Task.sleep(for: .seconds(0.9))
            }
        }
    }
}

#Preview {
    CircularProgressRingDemo()
}
```

## Countdown Ring

A ring that empties and a number that counts down to a date.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/CountdownRing/CountdownRing.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// The time math of the ring, apart from the view so it can be tested.
enum CountdownRingMath {
    static func remaining(now: Date, endDate: Date, duration: TimeInterval) -> TimeInterval {
        min(max(endDate.timeIntervalSince(now), 0), max(duration, 0))
    }

    static func fraction(remaining: TimeInterval, duration: TimeInterval) -> Double {
        guard duration > 0 else { return 0 }
        return min(max(remaining / duration, 0), 1)
    }

    /// Rounds up, so the number only reaches 0 when the time is really over.
    static func wholeSeconds(remaining: TimeInterval) -> Int {
        Int(max(remaining, 0).rounded(.up))
    }

    /// `45` below a minute, `1:05` from then on.
    static func text(seconds: Int, locale: Locale = .autoupdatingCurrent) -> String {
        guard seconds >= 60 else {
            return seconds.formatted(.number.locale(locale))
        }
        return Duration.seconds(seconds).formatted(.time(pattern: .minuteSecond).locale(locale))
    }
}

/// A ring that empties and a number that counts down to `endDate`. Give it a frame to size it.
///
/// With Reduce Motion on, the ring moves once per second instead of continuously.
struct CountdownRing: View {
    var endDate: Date
    var duration: TimeInterval
    var colors: [Color] = [.orange, .pink]
    var lineWidth: CGFloat = 18
    var font: Font = .system(.largeTitle, design: .rounded, weight: .bold)
    var onFinish: (() -> Void)? = nil

    @State private var isFinished = false
    @State private var notifiedEndDate: Date?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: reduceMotion ? 0.25 : 1.0 / 30.0, paused: isFinished)) { context in
            let remaining = CountdownRingMath.remaining(
                now: isFinished ? endDate : context.date,
                endDate: endDate,
                duration: duration
            )
            let seconds = CountdownRingMath.wholeSeconds(remaining: remaining)
            let fraction = CountdownRingMath.fraction(
                remaining: reduceMotion ? TimeInterval(seconds) : remaining,
                duration: duration
            )

            ZStack {
                Circle()
                    .stroke(.quaternary, lineWidth: lineWidth)

                Circle()
                    .trim(from: 0, to: fraction)
                    .stroke(
                        LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom),
                        style: StrokeStyle(lineWidth: lineWidth, lineCap: .round)
                    )
                    .rotationEffect(.degrees(-90))

                Text(CountdownRingMath.text(seconds: seconds))
                    .font(font)
                    .monospacedDigit()
                    .contentTransition(.numericText(value: Double(seconds)))
                    .animation(reduceMotion ? nil : .snappy, value: seconds)
                    .minimumScaleFactor(0.4)
                    .lineLimit(1)
                    .padding(lineWidth + 4)
            }
            .padding(lineWidth / 2)
            .accessibilityElement()
            .accessibilityLabel("Time remaining")
            .accessibilityValue("^[\(seconds) second](inflect: true)")
        }
        .aspectRatio(1, contentMode: .fit)
        .task(id: endDate) {
            isFinished = false
            let delay = endDate.timeIntervalSinceNow
            if delay > 0 {
                try? await Task.sleep(for: .seconds(delay))
            }
            guard !Task.isCancelled else { return }
            isFinished = true
            guard notifiedEndDate != endDate else { return }
            notifiedEndDate = endDate
            onFinish?()
        }
    }
}

// MARK: - Demo

struct CountdownRingDemo: View {
    @State private var endDate = Date.now.addingTimeInterval(3)
    @ScaledMetric(relativeTo: .largeTitle) private var numberSize = 96

    private let duration: TimeInterval = 3

    var body: some View {
        VStack(spacing: 36) {
            Text("Get ready")
                .font(.system(.title, design: .rounded, weight: .bold))

            CountdownRing(
                endDate: endDate,
                duration: duration,
                lineWidth: 26,
                font: .system(size: numberSize, weight: .bold, design: .rounded)
            )
            .frame(width: 280)

            Text("Your next set starts soon")
                .font(.body)
                .foregroundStyle(.secondary)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(duration + 0.8))
                endDate = Date.now.addingTimeInterval(duration)
            }
        }
    }
}

#Preview {
    CountdownRingDemo()
}
```

## Download Pill Progress

A capsule button that turns into a progress ring while downloading, then into a checkmark.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/DownloadPillProgress/DownloadPillProgress.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum DownloadPillProgressState: Equatable {
    case idle
    case downloading(Double)
    case finished
}

/// A capsule button that shrinks into a progress ring while downloading, then shows a checkmark.
struct DownloadPillProgress: View {
    var title: LocalizedStringResource = "Download"
    let state: DownloadPillProgressState
    var tint: Color = .blue
    let action: () -> Void

    @ScaledMetric(relativeTo: .headline) private var height: CGFloat = 46
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var fraction: Double {
        guard case .downloading(let progress) = state, progress.isFinite else { return 0 }
        return min(max(progress, 0), 1)
    }

    private var stage: Int {
        switch state {
        case .idle: 0
        case .downloading: 1
        case .finished: 2
        }
    }

    var body: some View {
        Button(action: action) {
            ZStack {
                switch state {
                case .idle:
                    Text(title)
                        .font(.headline)
                        .lineLimit(1)
                        .foregroundStyle(DownloadPillProgressContrastingForeground(background: background))
                        .padding(.horizontal, 24)
                        .transition(.opacity)
                case .downloading:
                    ring.transition(.scale(scale: 0.6).combined(with: .opacity))
                case .finished:
                    Image(systemName: "checkmark")
                        .font(.headline.weight(.bold))
                        .foregroundStyle(DownloadPillProgressContrastingForeground(background: background))
                        .transition(.scale(scale: 0.4).combined(with: .opacity))
                }
            }
            .frame(minWidth: height, minHeight: height)
            .background(background, in: .capsule)
            .contentShape(.capsule)
        }
        .buttonStyle(.plain)
        .animation(reduceMotion ? nil : .spring(duration: 0.4, bounce: 0.25), value: stage)
        .sensoryFeedback(.success, trigger: stage) { _, new in new == 2 }
        .accessibilityLabel(title)
        .accessibilityValue(accessibilityText)
    }

    private var background: Color {
        switch state {
        case .idle: tint
        case .downloading: tint.opacity(0.14)
        case .finished: .green
        }
    }

    private var ring: some View {
        ZStack {
            Circle().stroke(tint.opacity(0.25), lineWidth: 3.5)
            Circle()
                .trim(from: 0, to: fraction)
                .stroke(tint, style: StrokeStyle(lineWidth: 3.5, lineCap: .round))
                .rotationEffect(.degrees(-90))
                .animation(reduceMotion ? nil : .linear(duration: 0.12), value: fraction)
            RoundedRectangle(cornerRadius: 2)
                .fill(tint)
                .frame(width: height * 0.22, height: height * 0.22)
        }
        .frame(width: height * 0.62, height: height * 0.62)
    }

    private var accessibilityText: String {
        switch state {
        case .idle: "Not downloaded"
        case .downloading: "Downloading, \(fraction.formatted(.percent.precision(.fractionLength(0))))"
        case .finished: "Finished"
        }
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct DownloadPillProgressContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct DownloadPillProgressDemo: View {
    @State private var state = DownloadPillProgressState.idle
    @State private var downloadID = 0

    var body: some View {
        VStack(spacing: 22) {
            Image(systemName: "shippingbox.fill")
                .font(.system(.largeTitle, weight: .semibold))
                .imageScale(.large)
                .foregroundStyle(.white)
                .padding(26)
                .background(LinearGradient(colors: [.blue, .indigo], startPoint: .top, endPoint: .bottom), in: .rect(cornerRadius: 26, style: .continuous))
                .accessibilityHidden(true)

            VStack(spacing: 4) {
                Text("Field Guide")
                    .font(.system(.title, design: .rounded, weight: .bold))
                Text("482 MB")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }

            DownloadPillProgress(state: state, action: tapped)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .task(id: downloadID) {
            guard state == .downloading(0) else { return }
            for step in 1...40 {
                try? await Task.sleep(for: .milliseconds(50))
                guard !Task.isCancelled, state != .idle else { return }
                state = .downloading(Double(step) / 40)
            }
            state = .finished
        }
    }

    private func tapped() {
        switch state {
        case .idle:
            state = .downloading(0)
            downloadID += 1
        case .downloading, .finished:
            state = .idle
        }
    }
}

#Preview {
    DownloadPillProgressDemo()
}
```

## Gradient Progress Bar

A rounded progress bar with a gradient fill that glows more strongly as it advances.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/GradientProgressBar/GradientProgressBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A rounded bar whose gradient fill glows more strongly as it advances.
///
/// With Reduce Motion on, the fill changes without animating.
struct GradientProgressBar: View {
    var progress: Double
    var colors: [Color] = [.cyan, .blue, .purple]
    var height: CGFloat = 12
    var label: LocalizedStringKey = "Progress"

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var value: Double {
        progress.isNaN ? 0 : min(max(progress, 0), 1)
    }

    var body: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                Capsule()
                    .fill(.quaternary)

                Capsule()
                    .fill(LinearGradient(colors: colors, startPoint: .leading, endPoint: .trailing))
                    .frame(width: value > 0 ? max(height, proxy.size.width * value) : 0)
                    .shadow(color: (colors.last ?? .blue).opacity(0.25 + 0.55 * value), radius: 3 + 12 * value)
            }
        }
        .frame(height: height)
        .animation(reduceMotion ? nil : .smooth(duration: 0.6), value: value)
        .accessibilityElement()
        .accessibilityLabel(label)
        .accessibilityValue(Text(value, format: .percent.precision(.fractionLength(0))))
    }
}

// MARK: - Demo

struct GradientProgressBarDemo: View {
    @State private var progress = 0.08

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo.opacity(0.6)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 44) {
                VStack(alignment: .leading, spacing: 18) {
                    Text("Downloading")
                        .font(.headline)
                        .foregroundStyle(.white.opacity(0.75))

                    Text(progress, format: .percent.precision(.fractionLength(0)))
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))
                        .monospacedDigit()
                        .foregroundStyle(.white)
                        .contentTransition(.numericText(value: progress))

                    GradientProgressBar(progress: progress, height: 22, label: "Download")
                }

                row("Maps", value: progress * 0.7, colors: [.mint, .green])
                row("Music", value: progress * 0.45, colors: [.orange, .pink])
            }
            .padding(28)
        }
        .environment(\.colorScheme, .dark)
        .task {
            let values = [0.08, 0.34, 0.62, 1, 0.08]
            var index = 0
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.9))
                index = (index + 1) % values.count
                withAnimation(.smooth(duration: 0.3)) { progress = values[index] }
            }
        }
    }

    private func row(_ title: LocalizedStringKey, value: Double, colors: [Color]) -> some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(title)
                .font(.subheadline)
                .foregroundStyle(.white.opacity(0.75))

            GradientProgressBar(progress: value, colors: colors, label: title)
        }
    }
}

#Preview {
    GradientProgressBarDemo()
}
```

## Liquid Fill Progress

A circular progress view filled by a moving liquid wave drawn with an animatable shape.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/LiquidFillProgress/LiquidFillProgress.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A circle filled by a moving liquid wave, with the percentage in the middle.
///
/// With Reduce Motion on, the surface stands still and the level changes without animating.
struct LiquidFillProgress: View {
    var progress: Double
    var color: Color = .blue
    var font: Font = .system(.largeTitle, design: .rounded, weight: .bold)
    var label: LocalizedStringKey = "Progress"

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var level: Double {
        progress.isNaN ? 0 : min(max(progress, 0), 1)
    }

    private var percentText: Text {
        Text(level, format: .percent.precision(.fractionLength(0)))
    }

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            let phase = reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate * 2.4
            let frontWave = LiquidFillWave(level: level, phase: phase)

            ZStack {
                Circle()
                    .fill(color.opacity(0.14))

                LiquidFillWave(level: level, phase: -phase * 0.8 + 1.4)
                    .fill(color.opacity(0.45))

                frontWave
                    .fill(color.gradient)

                percentLabel
                    .foregroundStyle(color)

                percentLabel
                    .foregroundStyle(LiquidFillProgressContrastingForeground(background: color))
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .mask(frontWave)
            }
            .clipShape(.circle)
            .overlay {
                Circle()
                    .strokeBorder(color.opacity(0.6), lineWidth: 3)
            }
            .animation(reduceMotion ? nil : .smooth(duration: 0.9), value: level)
        }
        .aspectRatio(1, contentMode: .fit)
        .accessibilityElement()
        .accessibilityLabel(label)
        .accessibilityValue(percentText)
    }

    private var percentLabel: some View {
        percentText
            .font(font)
            .monospacedDigit()
            .minimumScaleFactor(0.4)
            .lineLimit(1)
            .padding(12)
            .accessibilityRepresentation { EmptyView() }
    }
}

/// The liquid: only `level` is animatable, so a level change eases while `phase` keeps following the clock.
nonisolated private struct LiquidFillWave: Shape {
    var level: Double
    var phase: Double

    var animatableData: Double {
        get { level }
        set { level = newValue }
    }

    func path(in rect: CGRect) -> Path {
        guard !rect.isEmpty else { return Path() }

        let surface = rect.maxY - rect.height * level
        let swell = rect.height * 0.05 * min(1, min(level, 1 - level) * 6)

        var path = Path()
        path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
        for x in stride(from: rect.minX, through: rect.maxX, by: 2) {
            let angle = (x - rect.minX) / rect.width * 3 * .pi + phase
            path.addLine(to: CGPoint(x: x, y: surface + sin(angle) * swell))
        }
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.closeSubpath()
        return path
    }
}

/// White or black, whichever reads better on `background`. Black only on a
/// light color, so the system's own colors keep white.
nonisolated struct LiquidFillProgressContrastingForeground: ShapeStyle {
    let background: Color

    func resolve(in environment: EnvironmentValues) -> Color {
        let color = background.resolve(in: environment)
        let luminance = 0.2126 * color.linearRed + 0.7152 * color.linearGreen + 0.0722 * color.linearBlue
        return luminance > 0.5 ? .black : .white
    }
}

// MARK: - Demo

struct LiquidFillProgressDemo: View {
    @State private var progress = 0.15
    @ScaledMetric(relativeTo: .largeTitle) private var percentSize = 64

    var body: some View {
        VStack(spacing: 28) {
            Text("Daily water")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))

            LiquidFillProgress(
                progress: progress,
                color: .cyan,
                font: .system(size: percentSize, weight: .bold, design: .rounded),
                label: "Daily water"
            )
            .frame(width: 280)

            Text("Keep going, one more glass")
                .font(.body)
                .foregroundStyle(.secondary)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task {
            let levels = [0.15, 0.45, 0.8, 1, 0.5]
            var index = 0
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.9))
                index = (index + 1) % levels.count
                progress = levels[index]
            }
        }
    }
}

#Preview {
    LiquidFillProgressDemo()
}
```

## Step Progress Indicator

Numbered steps joined by a line that fills as the current step advances.

Category: Progress. Minimum: iOS 18.0. Path: Components/Progress/StepProgressIndicator/StepProgressIndicator.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Numbered steps joined by a line that fills as the current step advances.
///
/// `currentStep` starts at 0. Passing `steps.count` marks every step as done.
/// With Reduce Motion on, the steps change without animating.
struct StepProgressIndicator: View {
    let steps: [String]
    var currentStep: Int
    var tint: Color = .indigo

    @ScaledMetric(relativeTo: .subheadline) private var markerSize = 36
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let lineHeight: CGFloat = 4

    private var current: Int { min(max(currentStep, 0), steps.count) }

    private var lineFraction: CGFloat {
        guard steps.count > 1 else { return 0 }
        return CGFloat(min(current, steps.count - 1)) / CGFloat(steps.count - 1)
    }

    var body: some View {
        HStack(alignment: .top, spacing: 0) {
            ForEach(steps.indices, id: \.self) { index in
                VStack(spacing: 8) {
                    marker(index)

                    Text(steps[index])
                        .font(.caption)
                        .foregroundStyle(index <= current ? .primary : .secondary)
                        .multilineTextAlignment(.center)
                }
                .frame(maxWidth: .infinity)
            }
        }
        .background(alignment: .topLeading) { line }
        .animation(reduceMotion ? nil : .smooth(duration: 0.45), value: current)
        .accessibilityElement()
        .accessibilityLabel("Progress")
        .accessibilityValue(accessibilityText)
    }

    private var line: some View {
        GeometryReader { proxy in
            let inset = proxy.size.width / CGFloat(max(steps.count, 1) * 2)
            let length = proxy.size.width - inset * 2

            ZStack(alignment: .leading) {
                Capsule()
                    .fill(Color(.systemGray5))

                Capsule()
                    .fill(tint)
                    .frame(width: length * lineFraction)
            }
            .frame(width: length, height: lineHeight)
            .offset(x: inset, y: (markerSize - lineHeight) / 2)
        }
    }

    private func marker(_ index: Int) -> some View {
        let isDone = index < current
        let isCurrent = index == current

        return ZStack {
            Circle()
                .fill(isDone || isCurrent ? tint : Color(.systemGray5))

            if isDone {
                Image(systemName: "checkmark")
                    .fontWeight(.bold)
                    .transition(.scale.combined(with: .opacity))
            } else {
                Text("\(index + 1)")
            }
        }
        .font(.subheadline.weight(.semibold))
        .foregroundStyle(isDone || isCurrent ? Color.white : Color.primary)
        .frame(width: markerSize, height: markerSize)
        .background {
            Circle()
                .fill(tint.opacity(0.25))
                .padding(-5)
                .opacity(isCurrent ? 1 : 0)
        }
    }

    private var accessibilityText: String {
        guard current < steps.count else { return "All \(steps.count) steps done" }
        return "Step \(current + 1) of \(steps.count), \(steps[current])"
    }
}

// MARK: - Demo

struct StepProgressIndicatorDemo: View {
    @State private var step = 0

    private let steps = ["Cart", "Address", "Payment", "Review"]
    private let symbols = ["cart.fill", "house.fill", "creditcard.fill", "checkmark.seal.fill"]

    var body: some View {
        VStack(spacing: 44) {
            Image(systemName: symbols[min(step, symbols.count - 1)])
                .font(.system(.largeTitle))
                .imageScale(.large)
                .foregroundStyle(.indigo.gradient)
                .contentTransition(.symbolEffect(.replace))
                // The symbols are not equally tall. One height keeps what is below in place.
                .frame(height: 56)
                .accessibilityHidden(true)

            Text("Checkout")
                .font(.system(.title, design: .rounded, weight: .bold))

            StepProgressIndicator(steps: steps, currentStep: step)
        }
        .padding(24)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.9))
                step = (step + 1) % (steps.count + 1)
            }
        }
    }
}

#Preview {
    StepProgressIndicatorDemo()
}
```

## Auto Advance Carousel

A paged carousel that advances on a timer and pauses while the user is dragging it.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/AutoAdvanceCarousel/AutoAdvanceCarousel.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A paged carousel that advances on a timer and pauses while the user is dragging it.
///
/// It stays still with Reduce Motion or VoiceOver on, and can always be swiped by hand.
struct AutoAdvanceCarousel<Item: Identifiable, Content: View>: View {
    let items: [Item]
    var interval: TimeInterval = 3
    @ViewBuilder var content: (Item) -> Content

    @State private var currentID: Item.ID?
    @State private var isUserScrolling = false

    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    private var currentIndex: Int? { items.firstIndex { $0.id == currentID } }

    private var schedule: AutoAdvanceCarouselSchedule<Item.ID> {
        AutoAdvanceCarouselSchedule(
            isRunning: !isUserScrolling && !reduceMotion && !voiceOverEnabled && items.count > 1,
            interval: max(interval, 0.5),
            itemIDs: items.map(\.id)
        )
    }

    var body: some View {
        VStack(spacing: 14) {
            ScrollView(.horizontal) {
                LazyHStack(spacing: 0) {
                    ForEach(items) { item in
                        content(item)
                            .containerRelativeFrame(.horizontal)
                    }
                }
                .scrollTargetLayout()
            }
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.paging)
            .scrollPosition(id: $currentID)
            .onScrollPhaseChange { _, phase in
                isUserScrolling = phase == .tracking || phase == .interacting || phase == .decelerating
            }

            pageIndicator
        }
        .task(id: schedule) {
            guard schedule.isRunning else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(schedule.interval))
                guard !Task.isCancelled else { return }
                move(to: AutoAdvanceCarouselMath.nextIndex(after: currentIndex, count: items.count))
            }
        }
    }

    private var pageIndicator: some View {
        let position = (currentIndex ?? 0) + 1

        return ViewThatFits(in: .horizontal) {
            HStack(spacing: 7) {
                ForEach(items.indices, id: \.self) { index in
                    Capsule()
                        .fill(index == position - 1 ? AnyShapeStyle(.primary) : AnyShapeStyle(.tertiary))
                        .frame(width: index == position - 1 ? 22 : 7, height: 7)
                }
            }
            Text("\(position) / \(items.count)")
                .font(.caption.monospacedDigit())
                .foregroundStyle(.secondary)
        }
        .animation(reduceMotion ? nil : .snappy, value: position)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Page")
        .accessibilityValue("\(position) of \(items.count)")
        .accessibilityAdjustableAction { direction in
            let index = currentIndex ?? 0
            let target = direction == .increment ? index + 1 : index - 1
            move(to: items.indices.contains(target) ? target : nil)
        }
    }

    private func move(to index: Int?) {
        guard let index, items.indices.contains(index) else { return }
        withAnimation(reduceMotion ? nil : .smooth(duration: 0.5)) {
            currentID = items[index].id
        }
    }
}

/// The timer restarts when any of this changes. The ids matter because it holds on to the items.
private struct AutoAdvanceCarouselSchedule<ID: Hashable>: Equatable {
    let isRunning: Bool
    let interval: TimeInterval
    let itemIDs: [ID]
}

enum AutoAdvanceCarouselMath {
    /// The next page, wrapping to the first. Nil when there is nowhere to go.
    static func nextIndex(after current: Int?, count: Int) -> Int? {
        guard count > 1 else { return nil }
        return ((current ?? 0) + 1) % count
    }
}

// MARK: - Demo

struct AutoAdvanceCarouselDemo: View {
    private struct Slide: Identifiable {
        let id: String
        let symbol: String
        let colors: [Color]
    }

    private let slides = [
        Slide(id: "Summer Sale", symbol: "sun.max.fill", colors: [.orange, .pink]),
        Slide(id: "New Arrivals", symbol: "sparkles", colors: [.indigo, .purple]),
        Slide(id: "Free Shipping", symbol: "shippingbox.fill", colors: [.teal, .blue]),
        Slide(id: "Gift Cards", symbol: "gift.fill", colors: [.green, .mint]),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 18) {
            Text("Discover")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .padding(.horizontal, 20)

            AutoAdvanceCarousel(items: slides, interval: 1.5) { slide in
                ZStack(alignment: .bottomLeading) {
                    LinearGradient(colors: slide.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                    Image(systemName: slide.symbol)
                        .font(.system(.largeTitle))
                        .imageScale(.large)
                        .foregroundStyle(.white.opacity(0.85))
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .accessibilityHidden(true)
                    Text(slide.id)
                        .font(.title.weight(.bold))
                        .foregroundStyle(.white)
                        .padding(20)
                }
                .clipShape(.rect(cornerRadius: 26, style: .continuous))
                .padding(.horizontal, 20)
            }
            .frame(height: 420)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

#Preview {
    AutoAdvanceCarouselDemo()
}
```

## Cover Flow Carousel

A horizontal carousel where the centered item faces forward and its neighbours turn away in 3D as you scroll.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/CoverFlowCarousel/CoverFlowCarousel.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct CoverFlowCarouselItem: Identifiable {
    let id: String
    let title: String
    let image: Image
}

/// A horizontal carousel where the centered item faces forward and its neighbours turn away in 3D.
///
/// With Reduce Motion on, items stay flat and only fade.
struct CoverFlowCarousel: View {
    let items: [CoverFlowCarouselItem]
    @Binding var selection: String?

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        GeometryReader { geometry in
            let containerWidth = geometry.size.width
            let itemWidth = max(containerWidth * 0.62, 1)
            let tilts = !reduceMotion

            ScrollView(.horizontal) {
                LazyHStack(spacing: 8) {
                    ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                        card(for: item, position: index + 1)
                            .frame(width: itemWidth, height: min(itemWidth * 1.4, geometry.size.height))
                            .frame(maxHeight: .infinity)
                            .visualEffect { content, proxy in
                                let position = CoverFlowCarouselMath.position(midX: proxy.frame(in: .scrollView).midX, width: containerWidth)
                                return content
                                    .scaleEffect(tilts ? 1 - abs(position) * 0.14 : 1)
                                    .rotation3DEffect(.degrees(tilts ? position * -52 : 0), axis: (0, 1, 0), perspective: 0.5)
                                    .opacity(1 - abs(position) * 0.4)
                            }
                    }
                }
                .scrollTargetLayout()
            }
            .contentMargins(.horizontal, max((containerWidth - itemWidth) / 2, 0), for: .scrollContent)
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.viewAligned)
            .scrollPosition(id: $selection, anchor: .center)
        }
    }

    private func card(for item: CoverFlowCarouselItem, position: Int) -> some View {
        Color.clear
            .overlay {
                item.image
                    .resizable()
                    .scaledToFill()
                    .accessibilityRepresentation { EmptyView() }
            }
            .overlay(alignment: .bottomLeading) {
                Text(item.title)
                    .font(.title3.weight(.bold))
                    .foregroundStyle(.white)
                    .lineLimit(2)
                    .minimumScaleFactor(0.7)
                    .padding(16)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .background(LinearGradient(colors: [.clear, .black.opacity(0.55)], startPoint: .top, endPoint: .bottom))
            }
            .clipShape(.rect(cornerRadius: 24, style: .continuous))
            .shadow(color: .black.opacity(0.25), radius: 14, y: 8)
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(item.title)
            .accessibilityValue("\(position) of \(items.count)")
    }
}

nonisolated enum CoverFlowCarouselMath {
    /// How far an item is from the center of the carousel: 0 at the center, -1 or 1 one half width away.
    static func position(midX: Double, width: Double) -> Double {
        guard width > 0, midX.isFinite else { return 0 }
        let halfWidth = width / 2
        return min(max((midX - halfWidth) / halfWidth, -1), 1)
    }
}

// MARK: - Demo

struct CoverFlowCarouselDemo: View {
    @State private var selection: String? = "Midnight"
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let items = [
        CoverFlowCarouselItem(id: "Sunset", title: "Sunset", image: artwork([.orange, .pink], symbol: "sun.horizon.fill")),
        CoverFlowCarouselItem(id: "Forest", title: "Forest", image: artwork([.green, .teal], symbol: "tree.fill")),
        CoverFlowCarouselItem(id: "Midnight", title: "Midnight", image: artwork([.indigo, .black], symbol: "moon.stars.fill")),
        CoverFlowCarouselItem(id: "Ocean", title: "Ocean", image: artwork([.cyan, .blue], symbol: "water.waves")),
        CoverFlowCarouselItem(id: "Bloom", title: "Bloom", image: artwork([.pink, .purple], symbol: "camera.macro")),
    ]

    var body: some View {
        VStack(spacing: 18) {
            Text("Albums")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)

            CoverFlowCarousel(items: items, selection: $selection)
                .frame(height: 400)

            Text(selection ?? "")
                .font(.headline)
                .foregroundStyle(.white.opacity(0.75))
                .contentTransition(.opacity)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(.black)
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            let order = [3, 4, 3, 2, 1, 0, 1, 2]
            var step = 3
            while isAutoPlaying {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled, isAutoPlaying else { return }
                step = (step + 1) % order.count
                withAnimation(.smooth(duration: 0.8)) { selection = items[order[step]].id }
            }
        }
    }

    private static func artwork(_ colors: [Color], symbol: String) -> Image {
        let size = CGSize(width: 300, height: 420)
        return Image(size: size, opaque: true) { context in
            context.fill(
                Path(CGRect(origin: .zero, size: size)),
                with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: size.width, y: size.height))
            )

            var icon = context.resolve(Image(systemName: symbol))
            icon.shading = .color(.white.opacity(0.85))
            let scale = 110 / max(icon.size.width, icon.size.height, 1)
            let iconSize = CGSize(width: icon.size.width * scale, height: icon.size.height * scale)
            context.draw(icon, in: CGRect(
                x: (size.width - iconSize.width) / 2,
                y: (size.height - iconSize.height) / 2,
                width: iconSize.width,
                height: iconSize.height
            ))
        }
    }
}

#Preview {
    CoverFlowCarouselDemo()
}
```

## Hide On Scroll Bar

A bottom bar that slides out of view while the user scrolls down and returns as soon as they scroll up.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/HideOnScrollBar/HideOnScrollBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A scroll view with a bottom bar that hides while scrolling down and returns on scrolling up.
///
/// With Reduce Motion on, the bar fades instead of sliding. With VoiceOver on, it stays visible.
struct HideOnScrollBar<Content: View, Bar: View>: View {
    var threshold: Double = 16
    @ViewBuilder var content: () -> Content
    @ViewBuilder var bar: () -> Bar

    @State private var tracker = HideOnScrollBarTracker()
    @State private var isHidden = false
    @State private var barHeight: CGFloat = 0

    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    private var hidesBar: Bool { isHidden && !voiceOverEnabled }

    var body: some View {
        ScrollView(content: content)
            .safeAreaInset(edge: .bottom, spacing: 0) {
                bar()
                    .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { barHeight = $0 }
                    .offset(y: hidesBar && !reduceMotion ? barHeight + 60 : 0)
                    .opacity(hidesBar && reduceMotion ? 0 : 1)
                    .allowsHitTesting(!hidesBar)
                    .animation(reduceMotion ? .linear(duration: 0.15) : .snappy(duration: 0.3), value: hidesBar)
            }
            .onScrollGeometryChange(for: HideOnScrollBarMetrics.self) { geometry in
                HideOnScrollBarMetrics(
                    offset: geometry.contentOffset.y + geometry.contentInsets.top,
                    maxOffset: geometry.contentSize.height + geometry.contentInsets.top + geometry.contentInsets.bottom - geometry.containerSize.height
                )
            } action: { _, metrics in
                tracker.update(offset: metrics.offset, maxOffset: metrics.maxOffset, threshold: threshold)
                isHidden = tracker.isHidden
            }
    }
}

private struct HideOnScrollBarMetrics: Equatable {
    let offset: Double
    let maxOffset: Double
}

/// Decides when the bar hides, ignoring small movements and the bounce at both ends.
struct HideOnScrollBarTracker: Equatable {
    private(set) var isHidden = false
    private var lastOffset = 0.0
    private var travel = 0.0

    mutating func update(offset: Double, maxOffset: Double, threshold: Double = 16) {
        guard offset > 0, maxOffset > 0 else {
            isHidden = false
            lastOffset = max(offset, 0)
            travel = 0
            return
        }
        guard offset < maxOffset else {
            lastOffset = maxOffset
            return
        }

        let delta = offset - lastOffset
        lastOffset = offset
        guard delta != 0 else { return }

        if (delta > 0) != (travel > 0) {
            travel = 0
        }
        travel += delta

        let required = max(threshold, 0)
        if travel >= required {
            isHidden = true
        } else if travel <= -required {
            isHidden = false
        }
    }
}

// MARK: - Demo

struct HideOnScrollBarDemo: View {
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @State private var selected = "Home"
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let colors: [Color] = [.indigo, .teal, .orange, .pink, .blue, .green]

    var body: some View {
        ScrollViewReader { proxy in
            HideOnScrollBar {
                VStack(spacing: 12) {
                    ForEach(0..<30, id: \.self) { index in
                        row(index)
                            .id(index)
                    }
                }
                .padding(16)
            } bar: {
                HStack(spacing: 0) {
                    barButton("Home", symbol: "house.fill")
                    barButton("Search", symbol: "magnifyingglass")
                    barButton("Library", symbol: "books.vertical.fill")
                    barButton("Profile", symbol: "person.fill")
                }
                .padding(.vertical, 6)
                .padding(.horizontal, 8)
                .background(.regularMaterial, in: .capsule)
                .shadow(color: .black.opacity(0.18), radius: 14, y: 6)
                .padding(.horizontal, 28)
                .padding(.bottom, 4)
            }
            .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
            .task(id: reduceMotion) {
                guard !reduceMotion else { return }
                var target = 0
                while isAutoPlaying {
                    try? await Task.sleep(for: .seconds(1.6))
                    guard !Task.isCancelled, isAutoPlaying else { return }
                    target = target == 12 ? 4 : 12
                    withAnimation(.easeInOut(duration: 1)) {
                        proxy.scrollTo(target, anchor: .top)
                    }
                }
            }
        }
    }

    private func row(_ index: Int) -> some View {
        HStack(spacing: 14) {
            RoundedRectangle(cornerRadius: 14, style: .continuous)
                .fill(colors[index % colors.count].gradient)
                .frame(width: 56, height: 56)
                .accessibilityHidden(true)
            VStack(alignment: .leading, spacing: 4) {
                Text("Article \(index + 1)")
                    .font(.headline)
                Text("A short line of supporting text.")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer(minLength: 0)
        }
        .padding(12)
        .background(.quaternary.opacity(0.5), in: .rect(cornerRadius: 18, style: .continuous))
    }

    private func barButton(_ title: String, symbol: String) -> some View {
        Button {
            selected = title
        } label: {
            Image(systemName: symbol)
                .font(.title3)
                .frame(maxWidth: .infinity, minHeight: 44)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .foregroundStyle(selected == title ? AnyShapeStyle(.tint) : AnyShapeStyle(.secondary))
        .accessibilityLabel(title)
        .accessibilityAddTraits(selected == title ? .isSelected : [])
    }
}

#Preview {
    HideOnScrollBarDemo()
}
```

## Infinite Marquee Row

A row of content that scrolls forever without a visible seam.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/InfiniteMarqueeRow/InfiniteMarqueeRow.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A row of content that scrolls forever without a seam.
///
/// `speed` is in points per second. With Reduce Motion on, the row stops
/// moving and becomes a normal horizontal scroll view.
struct InfiniteMarqueeRow<Content: View>: View {
    var speed: Double = 40
    var spacing: CGFloat = 12
    var reversed = false
    @ViewBuilder var content: () -> Content

    @State private var contentWidth: CGFloat = 0
    @State private var containerWidth: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    /// The distance after which a copy lands exactly where the previous one was.
    private var loopWidth: CGFloat { contentWidth + spacing }

    private var copies: Int {
        guard contentWidth > 0 else { return 1 }
        return Int((containerWidth / loopWidth).rounded(.up)) + 1
    }

    var body: some View {
        if reduceMotion {
            ScrollView(.horizontal) { row }
                .scrollIndicators(.hidden)
        } else {
            TimelineView(.animation) { context in
                track.offset(x: offset(at: context.date))
            }
            // A zero ideal width keeps the number of copies from feeding back into the row's own size.
            .frame(minWidth: 0, idealWidth: 0, maxWidth: .infinity, alignment: .leading)
            .clipped()
            .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { containerWidth = $0 }
        }
    }

    private var row: some View {
        HStack(spacing: spacing) { content() }
            .fixedSize()
    }

    private var track: some View {
        HStack(spacing: spacing) {
            row.onGeometryChange(for: CGFloat.self) { $0.size.width } action: { contentWidth = $0 }

            ForEach(1..<copies, id: \.self) { _ in
                row.accessibilityRepresentation { EmptyView() }
            }
        }
        .fixedSize()
    }

    private func offset(at date: Date) -> CGFloat {
        guard contentWidth > 0 else { return 0 }
        let distance = CGFloat(date.timeIntervalSinceReferenceDate * speed).truncatingRemainder(dividingBy: loopWidth)
        return reversed ? distance - loopWidth : -distance
    }
}

// MARK: - Demo

struct InfiniteMarqueeRowDemo: View {
    private let rows: [(tags: [String], tint: Color, speed: Double)] = [
        (["SwiftUI", "Layout", "Gestures", "Animation", "Scrolling"], .pink, 46),
        (["Metal", "Shaders", "Particles", "Gradients", "Glass"], .orange, 32),
        (["Haptics", "Charts", "Maps", "Widgets", "Live Activities"], .teal, 54),
        (["Swift 6", "Concurrency", "Observation", "Testing", "Macros"], .purple, 38),
        (["Accessibility", "Dynamic Type", "VoiceOver", "Reduce Motion"], .blue, 48),
    ]

    var body: some View {
        VStack(spacing: 14) {
            Text("Trending topics")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .foregroundStyle(.white)
                .padding(.bottom, 20)

            ForEach(rows.indices, id: \.self) { index in
                InfiniteMarqueeRow(speed: rows[index].speed, reversed: index.isMultiple(of: 2)) {
                    ForEach(rows[index].tags, id: \.self) { tag in
                        Text(tag)
                            .font(.system(.body, design: .rounded, weight: .semibold))
                            .foregroundStyle(.white)
                            .padding(.horizontal, 18)
                            .padding(.vertical, 12)
                            .background(rows[index].tint.gradient, in: .capsule)
                    }
                }
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    InfiniteMarqueeRowDemo()
}
```

## Netflix Rows Scroller

A vertical stack of titled horizontal rows where each row scrolls on its own, like a streaming home screen.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/NetflixRowsScroller/NetflixRowsScroller.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct NetflixRowsScrollerTitle: Identifiable {
    let id: String
    let name: String
    let image: Image
}

struct NetflixRowsScrollerRow: Identifiable {
    let id: String
    let title: String
    let items: [NetflixRowsScrollerTitle]
}

/// A vertical stack of titled horizontal rows where each row scrolls on its own.
struct NetflixRowsScroller: View {
    let rows: [NetflixRowsScrollerRow]
    var onSelect: (NetflixRowsScrollerTitle) -> Void = { _ in }

    private let posterSpacing: CGFloat = 10

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 24) {
                ForEach(rows) { row in
                    VStack(alignment: .leading, spacing: 10) {
                        Text(row.title)
                            .font(.title3.weight(.bold))
                            .padding(.horizontal, 16)
                            .accessibilityAddTraits(.isHeader)

                        ScrollView(.horizontal) {
                            LazyHStack(spacing: posterSpacing) {
                                ForEach(row.items) { item in
                                    poster(for: item)
                                        .containerRelativeFrame(.horizontal, count: 3, span: 1, spacing: posterSpacing)
                                }
                            }
                            .scrollTargetLayout()
                        }
                        .contentMargins(.horizontal, 16, for: .scrollContent)
                        .scrollIndicators(.hidden)
                        .scrollTargetBehavior(.viewAligned)
                    }
                }
            }
            .padding(.vertical, 12)
        }
    }

    private func poster(for item: NetflixRowsScrollerTitle) -> some View {
        Button {
            onSelect(item)
        } label: {
            Color.clear
                .aspectRatio(2.0 / 3.0, contentMode: .fit)
                .overlay {
                    item.image
                        .resizable()
                        .scaledToFill()
                        .accessibilityRepresentation { EmptyView() }
                }
                .clipShape(.rect(cornerRadius: 10, style: .continuous))
        }
        .buttonStyle(NetflixRowsScrollerPosterStyle(reduceMotion: reduceMotion))
        .accessibilityLabel(item.name)
    }
}

/// A poster dims and shrinks a little while it is pressed.
private struct NetflixRowsScrollerPosterStyle: ButtonStyle {
    let reduceMotion: Bool

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.7 : 1)
            .scaleEffect(configuration.isPressed && !reduceMotion ? 0.95 : 1)
            .animation(.snappy(duration: 0.2), value: configuration.isPressed)
    }
}

// MARK: - Demo

struct NetflixRowsScrollerDemo: View {
    private static let palettes: [[Color]] = [
        [.red, .orange], [.indigo, .purple], [.teal, .blue], [.pink, .purple], [.green, .teal], [.orange, .yellow],
    ]

    private static let symbols = ["film.fill", "sparkles", "flame.fill", "bolt.fill", "moon.fill", "star.fill", "theatermasks.fill", "globe.americas.fill"]

    private let rows: [NetflixRowsScrollerRow] = ["Trending Now", "New Releases", "Because You Watched", "Top Picks"].enumerated().map { rowIndex, title in
        NetflixRowsScrollerRow(id: title, title: title, items: (0..<8).map { index in
            let seed = rowIndex * 3 + index
            return NetflixRowsScrollerTitle(
                id: "\(title)-\(index)",
                name: "\(title) \(index + 1)",
                image: poster(palettes[seed % palettes.count], symbol: symbols[seed % symbols.count])
            )
        })
    }

    @State private var selected: String?

    var body: some View {
        NetflixRowsScroller(rows: rows) { title in
            selected = title.name
        }
        .foregroundStyle(.white)
        .background(.black)
        .safeAreaInset(edge: .bottom) {
            if let selected {
                Label(selected, systemImage: "play.fill")
                    .font(.subheadline.weight(.semibold))
                    .foregroundStyle(.white)
                    .padding(.horizontal, 18)
                    .padding(.vertical, 12)
                    .background(.ultraThinMaterial, in: .capsule)
                    .environment(\.colorScheme, .dark)
                    .padding(.bottom, 8)
            }
        }
    }

    private static func poster(_ colors: [Color], symbol: String) -> Image {
        let size = CGSize(width: 200, height: 300)
        return Image(size: size, opaque: true) { context in
            context.fill(
                Path(CGRect(origin: .zero, size: size)),
                with: .linearGradient(Gradient(colors: colors), startPoint: .zero, endPoint: CGPoint(x: size.width, y: size.height))
            )

            var icon = context.resolve(Image(systemName: symbol))
            icon.shading = .color(.white.opacity(0.9))
            let scale = 80 / max(icon.size.width, icon.size.height, 1)
            let iconSize = CGSize(width: icon.size.width * scale, height: icon.size.height * scale)
            context.draw(icon, in: CGRect(
                x: (size.width - iconSize.width) / 2,
                y: (size.height - iconSize.height) / 2,
                width: iconSize.width,
                height: iconSize.height
            ))
        }
    }
}

#Preview {
    NetflixRowsScrollerDemo()
}
```

## Onboarding Pager

A full-screen onboarding flow with swipeable pages, a progress indicator and a button that advances or finishes.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/OnboardingPager/OnboardingPager.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct OnboardingPagerPage {
    var symbol: String
    var title: LocalizedStringResource
    var message: LocalizedStringResource
    var colors: [Color]
}

/// A full-screen onboarding flow with swipeable pages, a progress indicator and a button
/// that advances or finishes. `onFinish` runs once.
struct OnboardingPager: View {
    let pages: [OnboardingPagerPage]
    var finishTitle: LocalizedStringResource = "Get Started"
    var onFinish: () -> Void = {}

    @State private var page = 0
    @State private var didFinish = false

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var isLastPage: Bool { page >= pages.count - 1 }

    var body: some View {
        if pages.isEmpty {
            Color.clear
        } else {
            VStack(spacing: 20) {
                TabView(selection: $page) {
                    ForEach(Array(pages.enumerated()), id: \.offset) { index, item in
                        OnboardingPagerContent(page: item, isActive: index == page)
                            .tag(index)
                    }
                }
                .tabViewStyle(.page(indexDisplayMode: .never))

                indicator

                Button(action: advance) {
                    Text(isLastPage ? finishTitle : "Continue")
                        .font(.headline)
                        .frame(maxWidth: .infinity, minHeight: 50)
                }
                .buttonStyle(.plain)
                .foregroundStyle(.black)
                .background(.white, in: .capsule)
                .padding(.horizontal, 24)
                .padding(.bottom, 12)
            }
            .foregroundStyle(.white)
            .background {
                LinearGradient(colors: currentColors, startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea()
            }
            .animation(reduceMotion ? nil : .easeInOut(duration: 0.35), value: page)
            .sensoryFeedback(.selection, trigger: page)
            .onChange(of: pages.count) { _, count in
                page = min(page, max(count - 1, 0))
            }
        }
    }

    private var currentColors: [Color] {
        pages.indices.contains(page) ? pages[page].colors : [.black]
    }

    private var indicator: some View {
        ViewThatFits(in: .horizontal) {
            HStack(spacing: 8) {
                ForEach(pages.indices, id: \.self) { index in
                    Capsule()
                        .fill(.white.opacity(index == page ? 1 : 0.4))
                        .frame(width: index == page ? 28 : 8, height: 8)
                }
            }
            Text("\(page + 1) / \(pages.count)")
                .font(.footnote.monospacedDigit())
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Page")
        .accessibilityValue("\(min(page + 1, pages.count)) of \(pages.count)")
    }

    private func advance() {
        if isLastPage {
            guard !didFinish else { return }
            didFinish = true
            onFinish()
        } else {
            withAnimation(reduceMotion ? nil : .smooth(duration: 0.4)) { page += 1 }
        }
    }
}

private struct OnboardingPagerContent: View {
    let page: OnboardingPagerPage
    let isActive: Bool

    @ScaledMetric(relativeTo: .largeTitle) private var symbolSize: CGFloat = 96
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ViewThatFits(in: .vertical) {
            content
            ScrollView { content }
        }
    }

    private var content: some View {
        VStack(spacing: 24) {
            Image(systemName: page.symbol)
                .font(.system(size: symbolSize, weight: .semibold))
                .symbolEffect(.bounce, value: reduceMotion ? false : isActive)
                .accessibilityHidden(true)

            VStack(spacing: 10) {
                Text(page.title)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .accessibilityAddTraits(.isHeader)
                Text(page.message)
                    .font(.body)
                    .opacity(0.85)
            }
            .multilineTextAlignment(.center)
        }
        .padding(.horizontal, 32)
        .padding(.vertical, 16)
        .frame(maxWidth: .infinity)
    }
}

// MARK: - Demo

struct OnboardingPagerDemo: View {
    @State private var run = 0

    private let pages = [
        OnboardingPagerPage(symbol: "sparkles", title: "Welcome", message: "A calmer way to keep track of your day.", colors: [.indigo, .purple]),
        OnboardingPagerPage(symbol: "bell.badge.fill", title: "Stay on Time", message: "Gentle reminders, only when they matter.", colors: [.orange, .pink]),
        OnboardingPagerPage(symbol: "checkmark.seal.fill", title: "All Set", message: "Your first list is ready and waiting.", colors: [.teal, .blue]),
    ]

    var body: some View {
        OnboardingPager(pages: pages, onFinish: { run += 1 })
            .id(run)
    }
}

#Preview {
    OnboardingPagerDemo()
}
```

## Paged Grid Launcher

A launcher of icon grids that pages horizontally, with each page filled row by row like the iOS home screen.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/PagedGridLauncher/PagedGridLauncher.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct PagedGridLauncherItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let symbol: String
    let colors: [Color]
}

/// A launcher of icon grids that pages horizontally, each page filled row by row.
struct PagedGridLauncher: View {
    let items: [PagedGridLauncherItem]
    @Binding var page: Int
    var columns: Int = 4
    var rows: Int = 5
    var onSelect: (PagedGridLauncherItem) -> Void = { _ in }

    @State private var scrolledPage: Int?

    @ScaledMetric(relativeTo: .caption2) private var iconSize: CGFloat = 60
    private let pageDotSize: CGFloat = 8
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.dynamicTypeSize) private var dynamicTypeSize

    private var columnCount: Int {
        let requested = PagedGridLauncherLayout.clamped(columns)
        return dynamicTypeSize.isAccessibilitySize ? min(requested, 2) : requested
    }

    private var pages: [Range<Int>] {
        PagedGridLauncherLayout.pages(itemCount: items.count, columns: columnCount, rows: rows)
    }

    var body: some View {
        let pages = pages

        VStack(spacing: 14) {
            ScrollView(.horizontal) {
                LazyHStack(spacing: 0) {
                    ForEach(pages.indices, id: \.self) { index in
                        pageView(pages[index])
                            .containerRelativeFrame(.horizontal)
                    }
                }
                .scrollTargetLayout()
            }
            .scrollIndicators(.hidden)
            .scrollTargetBehavior(.paging)
            .scrollPosition(id: $scrolledPage)

            pageIndicator(count: pages.count)
        }
        .onAppear { scrolledPage = page }
        .onChange(of: scrolledPage) { _, value in
            if let value, value != page {
                page = value
            }
        }
        .onChange(of: page) { _, value in
            if value != scrolledPage {
                withAnimation(reduceMotion ? nil : .smooth(duration: 0.45)) { scrolledPage = value }
            }
        }
        .onChange(of: pages.count) { _, count in
            page = min(page, max(count - 1, 0))
        }
    }

    private func pageView(_ range: Range<Int>) -> some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 10), count: columnCount), spacing: 20) {
                ForEach(items[range]) { item in
                    icon(for: item)
                }
            }
            .padding(.horizontal, 18)
            .padding(.vertical, 8)
        }
        .scrollIndicators(.hidden)
        .scrollBounceBehavior(.basedOnSize)
    }

    private func icon(for item: PagedGridLauncherItem) -> some View {
        Button {
            onSelect(item)
        } label: {
            VStack(spacing: 6) {
                RoundedRectangle(cornerRadius: iconSize * 0.24, style: .continuous)
                    .fill(LinearGradient(colors: item.colors, startPoint: .topLeading, endPoint: .bottomTrailing))
                    .frame(width: iconSize, height: iconSize)
                    .overlay {
                        Image(systemName: item.symbol)
                            .font(.system(size: iconSize * 0.46, weight: .medium))
                            .foregroundStyle(.white)
                    }
                Text(item.title)
                    .font(.caption2.weight(.medium))
                    .lineLimit(1)
                    .minimumScaleFactor(0.75)
            }
        }
        .buttonStyle(.plain)
        .accessibilityLabel(item.title)
    }

    private func pageIndicator(count: Int) -> some View {
        ViewThatFits(in: .horizontal) {
            HStack(spacing: 8) {
                ForEach(0..<count, id: \.self) { index in
                    Circle()
                        .fill(.primary.opacity(index == page ? 0.9 : 0.25))
                        .frame(width: pageDotSize, height: pageDotSize)
                }
            }
            Text("\(page + 1) / \(count)")
                .font(.caption.monospacedDigit())
        }
        .animation(reduceMotion ? nil : .snappy, value: page)
        .accessibilityElement(children: .ignore)
        .accessibilityLabel("Page")
        .accessibilityValue("\(min(page + 1, count)) of \(count)")
        .accessibilityAdjustableAction { direction in
            let target = direction == .increment ? page + 1 : page - 1
            if (0..<count).contains(target) {
                page = target
            }
        }
    }
}

enum PagedGridLauncherLayout {
    static func clamped(_ value: Int) -> Int {
        min(max(value, 1), 12)
    }

    /// Splits the items into page-sized ranges, filling each page before the next one.
    static func pages(itemCount: Int, columns: Int, rows: Int) -> [Range<Int>] {
        guard itemCount > 0 else { return [] }
        let perPage = clamped(columns) * clamped(rows)
        return stride(from: 0, to: itemCount, by: perPage).map { start in
            start..<(itemCount - start > perPage ? start + perPage : itemCount)
        }
    }
}

// MARK: - Demo

struct PagedGridLauncherDemo: View {
    @State private var page = 0

    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private static let palettes: [[Color]] = [
        [.blue, .cyan], [.pink, .orange], [.green, .mint], [.purple, .indigo], [.orange, .yellow], [.teal, .blue], [.red, .pink],
    ]

    private static let apps: [(String, String)] = [
        ("Mail", "envelope.fill"), ("Maps", "map.fill"), ("Music", "music.note"), ("Photos", "photo.fill"),
        ("Clock", "clock.fill"), ("Notes", "note.text"), ("Files", "folder.fill"), ("Books", "book.fill"),
        ("Camera", "camera.fill"), ("Wallet", "wallet.pass.fill"), ("Weather", "cloud.sun.fill"), ("Home", "house.fill"),
        ("Health", "heart.fill"), ("News", "newspaper.fill"), ("Stocks", "chart.line.uptrend.xyaxis"), ("Calendar", "calendar"),
        ("Phone", "phone.fill"), ("Chat", "message.fill"), ("Video", "video.fill"), ("Radio", "dot.radiowaves.left.and.right"),
    ]

    // A page shows 20, so the names of the first page come back on the next one with a number.
    private let items: [PagedGridLauncherItem] = (0..<46).map { index in
        let app = apps[index % apps.count]
        let copy = index / apps.count + 1
        return PagedGridLauncherItem(id: "\(index)", title: copy == 1 ? "\(app.0)" : "\(app.0) \(copy)", symbol: app.1, colors: palettes[index % palettes.count])
    }

    var body: some View {
        PagedGridLauncher(items: items, page: $page)
            .padding(.vertical, 12)
            .background(LinearGradient(colors: [.indigo.opacity(0.35), .teal.opacity(0.25)], startPoint: .top, endPoint: .bottom))
            .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
            .task(id: reduceMotion) {
                guard !reduceMotion else { return }
                while isAutoPlaying {
                    try? await Task.sleep(for: .seconds(1.3))
                    guard !Task.isCancelled, isAutoPlaying else { return }
                    page = (page + 1) % 3
                }
            }
    }
}

#Preview {
    PagedGridLauncherDemo()
}
```

## Parallax Cards Row

A horizontal carousel whose card artwork moves in parallax using visualEffect.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/ParallaxCardsRow/ParallaxCardsRow.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A horizontal carousel whose card artwork moves slower than the card, for a parallax effect.
///
/// With Reduce Motion on, the artwork stays still inside the card.
struct ParallaxCardsRow<Item: Identifiable, Artwork: View, Overlay: View>: View {
    let items: [Item]
    var height: CGFloat = 460
    var strength: CGFloat = 70
    @ViewBuilder var artwork: (Item) -> Artwork
    @ViewBuilder var overlay: (Item) -> Overlay

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        // `visualEffect` takes a `@Sendable` closure, so it works with a local copy.
        let shift = reduceMotion ? 0 : strength

        ScrollView(.horizontal) {
            LazyHStack(spacing: 16) {
                ForEach(items) { item in
                    artwork(item)
                        .padding(.horizontal, -strength)
                        .visualEffect { content, proxy in
                            content.offset(x: parallaxOffset(in: proxy, shift: shift))
                        }
                        .containerRelativeFrame(.horizontal) { width, _ in width * 0.85 }
                        .frame(height: height)
                        .clipShape(.rect(cornerRadius: 30))
                        .overlay(alignment: .bottomLeading) { overlay(item) }
                }
            }
            .scrollTargetLayout()
        }
        .contentMargins(.horizontal, 40, for: .scrollContent)
        .scrollTargetBehavior(.viewAligned)
        .scrollIndicators(.hidden)
    }
}

// Moves against the scroll in proportion to the card's distance from the middle of the
// scroll view. It is clamped so the oversized artwork never exposes its edges.
private nonisolated func parallaxOffset(in proxy: GeometryProxy, shift: CGFloat) -> CGFloat {
    // `bounds(of:)` is converted to the card's own coordinate space.
    guard let bounds = proxy.bounds(of: .scrollView(axis: .horizontal)), bounds.width > 0 else { return 0 }
    let distance = (proxy.size.width / 2 - bounds.midX) / bounds.width
    return -min(max(distance, -1), 1) * shift
}

// MARK: - Demo

private struct ParallaxDemoCard: Identifiable {
    let id: String
    let systemImage: String
    let colors: [Color]
}

struct ParallaxCardsRowDemo: View {
    private let cards = [
        ParallaxDemoCard(id: "Alps", systemImage: "mountain.2.fill", colors: [.blue, .indigo]),
        ParallaxDemoCard(id: "Sahara", systemImage: "sun.max.fill", colors: [.orange, .red]),
        ParallaxDemoCard(id: "Amazon", systemImage: "leaf.fill", colors: [.green, .teal]),
        ParallaxDemoCard(id: "Arctic", systemImage: "snowflake", colors: [.cyan, .purple]),
        ParallaxDemoCard(id: "Pacific", systemImage: "water.waves", colors: [.teal, .blue]),
    ]

    @ScaledMetric(relativeTo: .largeTitle) private var symbolSize = 180.0

    var body: some View {
        ZStack {
            Color.black
                .ignoresSafeArea()

            ParallaxCardsRow(items: cards) { card in
                LinearGradient(colors: card.colors, startPoint: .leading, endPoint: .trailing)
                    .overlay {
                        Image(systemName: card.systemImage)
                            .font(.system(size: symbolSize))
                            .foregroundStyle(.white.opacity(0.35))
                            .accessibilityHidden(true)
                    }
            } overlay: { card in
                Text(card.id)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .foregroundStyle(.white)
                    .padding(28)
            }
        }
    }
}

#Preview {
    ParallaxCardsRowDemo()
}
```

## Peek Carousel

A paging carousel that shows the edges of its neighbours.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/PeekCarousel/PeekCarousel.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A paging carousel that shows the edges of the neighbouring cards.
///
/// `peek` is how much of each neighbour stays visible. Give the cards a height.
/// With Reduce Motion on, side cards keep their size and only dim.
struct PeekCarousel<Item: Identifiable, Card: View>: View {
    let items: [Item]
    var peek: CGFloat = 28
    var spacing: CGFloat = 12
    @ViewBuilder var card: (Item) -> Card

    @State private var currentID: Item.ID?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 18) {
            carousel
            dots
        }
    }

    private var carousel: some View {
        let scalesSideCards = !reduceMotion

        return ScrollView(.horizontal) {
            LazyHStack(spacing: spacing) {
                ForEach(items) { item in
                    card(item)
                        .containerRelativeFrame(.horizontal)
                        .scrollTransition(axis: .horizontal) { content, phase in
                            content
                                .scaleEffect(scalesSideCards && !phase.isIdentity ? 0.92 : 1)
                                .opacity(phase.isIdentity ? 1 : 0.7)
                        }
                }
            }
            .scrollTargetLayout()
        }
        .scrollIndicators(.hidden)
        .scrollTargetBehavior(.viewAligned(limitBehavior: .always))
        .scrollPosition(id: $currentID)
        .safeAreaPadding(.horizontal, peek + spacing)
    }

    private var dots: some View {
        let activeID = currentID ?? items.first?.id

        return HStack(spacing: 8) {
            ForEach(items) { item in
                Circle()
                    .fill(item.id == activeID ? AnyShapeStyle(.primary) : AnyShapeStyle(.tertiary))
                    .frame(width: 8, height: 8)
                    .scaleEffect(item.id == activeID ? 1.25 : 1)
            }
        }
        .animation(reduceMotion ? nil : .snappy, value: currentID)
        .accessibilityHidden(true)
    }
}

// MARK: - Demo

private struct DemoSlide: Identifiable {
    let id: String
    let symbol: String
    let colors: [Color]
}

struct PeekCarouselDemo: View {
    private let slides = [
        DemoSlide(id: "Sunrise", symbol: "sunrise.fill", colors: [.orange, .pink]),
        DemoSlide(id: "Forest", symbol: "tree.fill", colors: [.green, .teal]),
        DemoSlide(id: "Ocean", symbol: "water.waves", colors: [.cyan, .blue]),
        DemoSlide(id: "Night", symbol: "moon.stars.fill", colors: [.indigo, .purple]),
    ]

    var body: some View {
        VStack(alignment: .leading, spacing: 24) {
            Text("Explore")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .padding(.horizontal, 40)

            PeekCarousel(items: slides) { slide in
                VStack(spacing: 14) {
                    Image(systemName: slide.symbol)
                        .font(.largeTitle)
                        .imageScale(.large)
                        .accessibilityHidden(true)
                    Text(slide.id)
                        .font(.system(.title, design: .rounded, weight: .bold))
                }
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity)
                .frame(height: 500)
                .background(LinearGradient(colors: slide.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 32))
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(LinearGradient(colors: [.indigo.opacity(0.15), .pink.opacity(0.1)], startPoint: .top, endPoint: .bottom))
    }
}

#Preview {
    PeekCarouselDemo()
}
```

## Pull Progress Refresh

A custom pull to refresh whose ring fills with the pull distance and starts a refresh when released past a threshold.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/PullProgressRefresh/PullProgressRefresh.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum PullProgressRefreshMath {
    /// How far the content has been pulled past its resting position.
    static func pullDistance(contentOffsetY: CGFloat, topInset: CGFloat) -> CGFloat {
        max(0, -(contentOffsetY + topInset))
    }

    /// The fraction of the ring to fill, from 0 to 1.
    static func progress(pull: CGFloat, threshold: CGFloat) -> CGFloat {
        guard threshold > 0 else { return pull > 0 ? 1 : 0 }
        return min(max(pull / threshold, 0), 1)
    }
}

/// A scroll view whose ring fills as it is pulled, and refreshes when released past a threshold.
///
/// With Reduce Motion on, the content moves into place without a spring.
struct PullProgressRefresh<Content: View>: View {
    var threshold: CGFloat = 90
    var tint: Color = .accentColor
    let action: @MainActor () async -> Void
    @ViewBuilder var content: () -> Content

    @State private var pull: CGFloat = 0
    @State private var isRefreshing = false
    @State private var refreshToken: Int?
    @ScaledMetric(relativeTo: .title3) private var ringSize = 34.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var progress: CGFloat {
        isRefreshing ? 1 : PullProgressRefreshMath.progress(pull: pull, threshold: threshold)
    }

    private var slotHeight: CGFloat { ringSize + 28 }

    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                Color.clear
                    .frame(height: isRefreshing ? slotHeight : 0)
                    .accessibilityHidden(true)

                content()
            }
        }
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
            PullProgressRefreshMath.pullDistance(
                contentOffsetY: geometry.contentOffset.y,
                topInset: geometry.contentInsets.top
            )
        } action: { _, newValue in
            pull = newValue
        }
        .onScrollPhaseChange { oldPhase, newPhase in
            if oldPhase == .interacting, newPhase != .interacting, progress >= 1 {
                beginRefreshing()
            }
        }
        .overlay(alignment: .top) { indicator }
        .animation(reduceMotion ? nil : .snappy(duration: 0.35), value: isRefreshing)
        .task(id: refreshToken) {
            guard refreshToken != nil else { return }
            await action()
            isRefreshing = false
            refreshToken = nil
        }
    }

    private var indicator: some View {
        ZStack {
            Circle().stroke(tint.opacity(0.2), lineWidth: 3)

            if isRefreshing {
                ProgressView().tint(tint)
            } else {
                Circle()
                    .trim(from: 0, to: progress)
                    .stroke(tint, style: StrokeStyle(lineWidth: 3, lineCap: .round))
                    .rotationEffect(.degrees(-90))

                Image(systemName: "arrow.down")
                    .font(.footnote.weight(.bold))
                    .foregroundStyle(tint)
                    .rotationEffect(.degrees(progress >= 1 ? 180 : 0))
            }
        }
        .frame(width: ringSize, height: ringSize)
        .padding(.top, isRefreshing ? 14 : max(0, min(pull, slotHeight) - ringSize) / 2)
        // Never fully transparent, so VoiceOver can still find the refresh action.
        .opacity(isRefreshing ? 1 : max(progress, 0.01))
        .allowsHitTesting(false)
        .accessibilityElement()
        .accessibilityLabel(isRefreshing ? "Refreshing" : "Refresh")
        .accessibilityAddTraits(.isButton)
        .accessibilityAction { beginRefreshing() }
    }

    private func beginRefreshing() {
        guard !isRefreshing else { return }
        isRefreshing = true
        refreshToken = (refreshToken ?? 0) + 1
    }
}

// MARK: - Demo

struct PullProgressRefreshDemo: View {
    @State private var updates = 0

    var body: some View {
        PullProgressRefresh(tint: .indigo) {
            try? await Task.sleep(for: .seconds(1.4))
            guard !Task.isCancelled else { return }
            updates += 1
        } content: {
            LazyVStack(alignment: .leading, spacing: 12) {
                Text("Inbox")
                    .font(.largeTitle.bold())

                Text(updates == 0 ? "Pull down to refresh" : "Updated ^[\(updates) time](inflect: true)")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
                    .contentTransition(.numericText())

                ForEach(0..<16, id: \.self) { index in
                    row(index)
                }
            }
            .padding(.horizontal, 20)
            .padding(.top, 12)
        }
    }

    private func row(_ index: Int) -> some View {
        HStack(spacing: 14) {
            Circle()
                .fill(.indigo.gradient)
                .frame(width: 44, height: 44)
                .overlay {
                    Image(systemName: "envelope.fill")
                        .foregroundStyle(.white)
                }
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text("Message \(index + 1 + updates)")
                    .font(.headline)

                Text("A short preview of the message")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(12)
        .background(.quaternary.opacity(0.5), in: .rect(cornerRadius: 16))
    }
}

#Preview {
    PullProgressRefreshDemo()
}
```

## Scroll Fade Cards

A vertical scroll of cards that scale down and fade at its edges with scrollTransition.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/ScrollFadeCards/ScrollFadeCards.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A vertical scroll of cards that shrink and fade as they reach its edges.
///
/// With Reduce Motion on, the cards fade without scaling.
struct ScrollFadeCards<Item: Identifiable, Card: View>: View {
    let items: [Item]
    var spacing: CGFloat = 16
    var minimumScale: Double = 0.84
    var minimumOpacity: Double = 0.2
    @ViewBuilder var card: (Item) -> Card

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        // `scrollTransition` takes a `@Sendable` closure, so it works with local copies.
        let lowestScale = reduceMotion ? 1 : minimumScale
        let lowestOpacity = minimumOpacity

        ScrollView {
            LazyVStack(spacing: spacing) {
                ForEach(items) { item in
                    card(item)
                        .scrollTransition(.interactive.threshold(.visible(0.9))) { content, phase in
                            let distance = abs(phase.value)
                            return content
                                .scaleEffect(1 - distance * (1 - lowestScale))
                                .opacity(1 - distance * (1 - lowestOpacity))
                        }
                }
            }
            .padding(.horizontal, 20)
        }
    }
}

// MARK: - Demo

private struct ScrollFadeDemoCard: Identifiable {
    let id: Int
    let title: String
    let systemImage: String
    let colors: [Color]
}

struct ScrollFadeCardsDemo: View {
    private let cards: [ScrollFadeDemoCard] = {
        let themes: [(String, String, [Color])] = [
            ("Ocean", "water.waves", [.blue, .cyan]),
            ("Sunrise", "sunrise.fill", [.orange, .pink]),
            ("Meadow", "leaf.fill", [.green, .mint]),
            ("Dusk", "moon.haze.fill", [.purple, .indigo]),
        ]
        return (0..<16).map { index in
            let theme = themes[index % themes.count]
            return ScrollFadeDemoCard(id: index, title: theme.0, systemImage: theme.1, colors: theme.2)
        }
    }()

    @ScaledMetric(relativeTo: .title) private var cardHeight = 170.0

    var body: some View {
        ScrollFadeCards(items: cards) { card in
            HStack(spacing: 16) {
                Image(systemName: card.systemImage)
                    .font(.largeTitle)
                    .accessibilityHidden(true)

                Text(card.title)
                    .font(.system(.title, design: .rounded, weight: .bold))

                Spacer(minLength: 0)
            }
            .foregroundStyle(.white)
            .padding(.horizontal, 28)
            .frame(maxWidth: .infinity, minHeight: cardHeight)
            .background(
                LinearGradient(colors: card.colors, startPoint: .topLeading, endPoint: .bottomTrailing),
                in: .rect(cornerRadius: 26)
            )
        }
        .background(Color.black.ignoresSafeArea())
    }
}

#Preview {
    ScrollFadeCardsDemo()
}
```

## Scroll Progress Bar

A thin bar pinned to the top of a scroll view that grows with the reading progress of the content.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/ScrollProgressBar/ScrollProgressBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum ScrollProgressBarMath {
    /// How far through the content the reader is, from 0 to 1.
    static func progress(offsetY: CGFloat, topInset: CGFloat, bottomInset: CGFloat, contentHeight: CGFloat, containerHeight: CGFloat) -> CGFloat {
        let scrollable = contentHeight + topInset + bottomInset - containerHeight
        guard scrollable > 0 else { return 0 }
        return min(max((offsetY + topInset) / scrollable, 0), 1)
    }
}

/// A thin bar pinned to the top of a scroll view that grows with the reading progress.
///
/// Apply it to the `ScrollView` with `.scrollProgressBar()`. The bar follows the scroll
/// position directly, so it has no animation of its own.
struct ScrollProgressBar: ViewModifier {
    var tint: LinearGradient
    var height: CGFloat

    @State private var progress: CGFloat = 0

    func body(content: Content) -> some View {
        content
            .onScrollGeometryChange(for: CGFloat.self) { geometry in
                ScrollProgressBarMath.progress(
                    offsetY: geometry.contentOffset.y,
                    topInset: geometry.contentInsets.top,
                    bottomInset: geometry.contentInsets.bottom,
                    contentHeight: geometry.contentSize.height,
                    containerHeight: geometry.containerSize.height
                )
            } action: { _, newValue in
                progress = newValue
            }
            .overlay(alignment: .top) { bar }
    }

    private var bar: some View {
        GeometryReader { proxy in
            ZStack(alignment: .leading) {
                Capsule().fill(.quaternary)
                Capsule()
                    .fill(tint)
                    .frame(width: proxy.size.width * progress)
            }
        }
        .frame(height: max(height, 0))
        .padding(.horizontal, 12)
        .accessibilityElement()
        .accessibilityLabel("Reading progress")
        .accessibilityValue(Double(progress).formatted(.percent.precision(.fractionLength(0))))
    }
}

extension View {
    func scrollProgressBar(
        tint: LinearGradient = LinearGradient(colors: [.pink, .orange], startPoint: .leading, endPoint: .trailing),
        height: CGFloat = 5
    ) -> some View {
        modifier(ScrollProgressBar(tint: tint, height: height))
    }
}

// MARK: - Demo

struct ScrollProgressBarDemo: View {
    @State private var position = ScrollPosition(y: 0)
    @State private var maxOffset: CGFloat = 0
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let paragraph = "Good interfaces explain themselves. A small sign of how much is left can turn a long read into something that feels easy to finish, and it asks nothing of the reader."

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 20) {
                Text("The long read")
                    .font(.largeTitle.bold())

                ForEach(0..<14, id: \.self) { index in
                    Text("Chapter \(index + 1)")
                        .font(.title2.bold())

                    Text(paragraph)
                        .font(.body)
                        .foregroundStyle(.secondary)
                }
            }
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(24)
        }
        .scrollPosition($position)
        .scrollProgressBar()
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
            max(geometry.contentSize.height + geometry.contentInsets.top + geometry.contentInsets.bottom - geometry.containerSize.height, 0)
        } action: { _, newValue in
            maxOffset = newValue
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await autoScroll()
        }
    }

    // Only the demo scrolls by itself: down for most of the loop, then quickly back up.
    private func autoScroll() async {
        var time = 0.0
        while isAutoPlaying {
            try? await Task.sleep(for: .milliseconds(16))
            guard !Task.isCancelled, isAutoPlaying else { return }
            time = (time + 0.016).truncatingRemainder(dividingBy: 3)
            let fraction = time < 2.4 ? time / 2.4 : (3 - time) / 0.6
            position.scrollTo(y: maxOffset * fraction)
        }
    }
}

#Preview {
    ScrollProgressBarDemo()
}
```

## Scroll Visibility Reveal

Sections fade and slide into place the first time they become visible while the user scrolls.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/ScrollVisibilityReveal/ScrollVisibilityReveal.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Fades and slides a view into place the first time it becomes visible in a scroll view.
///
/// With Reduce Motion on, the view only fades in. With VoiceOver on, it is shown from the
/// start, so a section that has not been reached yet can still be found.
struct ScrollVisibilityReveal: ViewModifier {
    var threshold: Double
    var distance: CGFloat

    @State private var hasAppeared = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.accessibilityVoiceOverEnabled) private var voiceOverEnabled

    private var isVisible: Bool { hasAppeared || voiceOverEnabled }

    func body(content: Content) -> some View {
        content
            .opacity(isVisible ? 1 : 0)
            .offset(y: isVisible || reduceMotion ? 0 : distance)
            .onScrollVisibilityChange(threshold: min(max(threshold, 0), 1)) { visible in
                guard visible, !hasAppeared else { return }
                withAnimation(reduceMotion ? .easeIn(duration: 0.2) : .smooth(duration: 0.6)) {
                    hasAppeared = true
                }
            }
    }
}

extension View {
    /// A low threshold means a section taller than the screen still gets revealed.
    func scrollVisibilityReveal(threshold: Double = 0.15, distance: CGFloat = 36) -> some View {
        modifier(ScrollVisibilityReveal(threshold: threshold, distance: distance))
    }
}

// MARK: - Demo

struct ScrollVisibilityRevealDemo: View {
    private struct Section: Identifiable {
        let id: String
        let symbol: String
        let colors: [Color]
    }

    private let sections = [
        Section(id: "Sunrise", symbol: "sunrise.fill", colors: [.orange, .pink]),
        Section(id: "Forest", symbol: "leaf.fill", colors: [.green, .teal]),
        Section(id: "Ocean", symbol: "water.waves", colors: [.cyan, .blue]),
        Section(id: "Night", symbol: "moon.stars.fill", colors: [.indigo, .purple]),
        Section(id: "Storm", symbol: "cloud.bolt.rain.fill", colors: [.gray, .indigo]),
        Section(id: "Snow", symbol: "snowflake", colors: [.mint, .cyan]),
    ]

    @State private var position = ScrollPosition(y: 0)
    @State private var maxOffset: CGFloat = 0
    @State private var cycle = 0
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(spacing: 18) {
                ForEach(sections) { section in
                    card(section)
                        .scrollVisibilityReveal()
                }
            }
            .padding(20)
        }
        // A new identity forgets what has been revealed, so the demo can replay it.
        .id(cycle)
        .scrollPosition($position)
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
            max(geometry.contentSize.height + geometry.contentInsets.top + geometry.contentInsets.bottom - geometry.containerSize.height, 0)
        } action: { _, newValue in
            maxOffset = newValue
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await replay()
        }
    }

    private func card(_ section: Section) -> some View {
        VStack(spacing: 12) {
            Image(systemName: section.symbol)
                .font(.largeTitle)
                .accessibilityHidden(true)

            Text(section.id)
                .font(.title.bold())
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, minHeight: 240)
        .background(LinearGradient(colors: section.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 28))
    }

    // Only the demo scrolls by itself. Each pass scrolls to the end, then starts over.
    private func replay() async {
        var time = 0.0
        while isAutoPlaying {
            try? await Task.sleep(for: .milliseconds(16))
            guard !Task.isCancelled, isAutoPlaying else { return }
            time += 0.016
            if time >= 4 {
                time = 0
                cycle += 1
            }
            position.scrollTo(y: maxOffset * min(time / 3.6, 1))
        }
    }
}

#Preview {
    ScrollVisibilityRevealDemo()
}
```

## Sticky Parallax Header

A parallax header that stretches on overscroll and collapses into a pinned bar.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/StickyParallaxHeader/StickyParallaxHeader.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum StickyParallaxHeaderMath {
    /// How far the backdrop drifts up: half the scroll, stopping before its bottom edge shows.
    static func drift(offset: CGFloat, fullHeight: CGFloat, height: CGFloat) -> CGFloat {
        min(max(offset, 0) * 0.5, max(fullHeight - height, 0))
    }
}

/// A header that stretches on overscroll, drifts at half speed and collapses into a pinned bar.
///
/// `title` receives how collapsed the header is, from 0 to 1.
/// With Reduce Motion on, the backdrop does not drift.
struct StickyParallaxHeader<Backdrop: View, Title: View, Content: View>: View {
    var expandedHeight: CGFloat = 260
    var collapsedHeight: CGFloat = 60
    @ViewBuilder var backdrop: () -> Backdrop
    @ViewBuilder var title: (_ collapse: CGFloat) -> Title
    @ViewBuilder var content: () -> Content

    @State private var offset: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        GeometryReader { proxy in
            let fullHeight = expandedHeight + proxy.safeAreaInsets.top
            let pinnedHeight = collapsedHeight + proxy.safeAreaInsets.top
            let height = max(pinnedHeight, fullHeight - offset)
            let collapse = min(max(offset / max(fullHeight - pinnedHeight, 1), 0), 1)

            ZStack(alignment: .top) {
                ScrollView {
                    VStack(spacing: 0) {
                        Color.clear.frame(height: fullHeight)
                        content()
                    }
                }
                .onScrollGeometryChange(for: CGFloat.self) { geometry in
                    geometry.contentOffset.y + geometry.contentInsets.top
                } action: { _, newOffset in
                    offset = newOffset
                }

                header(height: height, fullHeight: fullHeight, collapse: collapse)
            }
            .ignoresSafeArea(edges: .top)
        }
    }

    private func header(height: CGFloat, fullHeight: CGFloat, collapse: CGFloat) -> some View {
        backdrop()
            .frame(maxWidth: .infinity)
            .frame(height: max(fullHeight, height))
            .offset(y: reduceMotion ? 0 : -StickyParallaxHeaderMath.drift(offset: offset, fullHeight: fullHeight, height: height))
            .frame(height: height, alignment: .top)
            .clipped()
            .accessibilityHidden(true)
            .overlay(alignment: .bottomLeading) {
                title(collapse)
                    .padding(.horizontal, 20)
                    .padding(.bottom, 10)
            }
            .allowsHitTesting(false)
    }
}

// MARK: - Demo

struct StickyParallaxHeaderDemo: View {
    @ScaledMetric(relativeTo: .largeTitle) private var collapsedHeight = 60.0

    private let trails = ["Tre Cime", "Seceda Ridge", "Lago di Braies", "Alpe di Siusi", "Sass Pordoi", "Cinque Torri", "Val di Funes", "Marmolada", "Passo Giau", "Lagazuoi"]

    var body: some View {
        StickyParallaxHeader(collapsedHeight: collapsedHeight) {
            ZStack(alignment: .bottom) {
                LinearGradient(colors: [.indigo, .purple, .orange], startPoint: .top, endPoint: .bottom)
                Image(systemName: "mountain.2.fill")
                    .resizable()
                    .scaledToFit()
                    .foregroundStyle(.black.opacity(0.35))
                    .padding(.horizontal, 24)
                    .offset(y: 30)
            }
        } title: { collapse in
            VStack(alignment: .leading, spacing: 0) {
                Text("Dolomites")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
                    .scaleEffect(1 - 0.3 * collapse, anchor: .bottomLeading)
                Text("10 trails nearby")
                    .font(.subheadline)
                    .opacity(1 - collapse * 2)
                    .frame(height: collapse > 0.5 ? 0 : nil, alignment: .top)
            }
            .foregroundStyle(.white)
        } content: {
            LazyVStack(spacing: 12) {
                ForEach(trails, id: \.self) { trail in
                    HStack(spacing: 14) {
                        Image(systemName: "figure.hiking")
                            .font(.title3)
                            .foregroundStyle(.indigo)
                            .accessibilityHidden(true)
                        Text(trail)
                            .font(.headline)
                        Spacer()
                    }
                    .padding(18)
                    .background(.indigo.opacity(0.1), in: .rect(cornerRadius: 18))
                }
            }
            .padding(16)
        }
    }
}

#Preview {
    StickyParallaxHeaderDemo()
}
```

## Sticky Stacked Cards

Cards that pile up at the top of the screen as the next card scrolls over them.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/StickyStackedCards/StickyStackedCards.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum StickyStackedCardsMath {
    /// How far down the card must move to stay pinned, 0 while it has not reached its pin.
    static func pinOffset(cardTop: CGFloat, pinY: CGFloat) -> CGFloat {
        max(pinY - cardTop, 0)
    }

    /// Where a card pins. The first few step down, so the edges of the pile stay visible.
    static func pinY(index: Int, top: CGFloat, peek: CGFloat, maxPeeking: Int) -> CGFloat {
        top + CGFloat(min(max(index, 0), max(maxPeeking, 0))) * max(peek, 0)
    }

    /// How much smaller a card gets as the next ones cover it.
    static func scale(pinOffset: CGFloat, cardHeight: CGFloat, spacing: CGFloat, step: CGFloat) -> CGFloat {
        let travel = cardHeight + max(spacing, 0)
        guard travel > 0 else { return 1 }
        return max(1 - min(pinOffset / travel, 4) * max(step, 0), 0.6)
    }
}

/// Cards that pile up at the top of the screen as the next card scrolls over them.
///
/// Place it inside a vertical `ScrollView`. With Reduce Motion on, the cards still pin in
/// place but do not shrink.
struct StickyStackedCards<Data: RandomAccessCollection, Card: View>: View where Data.Element: Identifiable {
    let data: Data
    var spacing: CGFloat = 20
    var top: CGFloat = 12
    var peek: CGFloat = 12
    var maxPeeking = 3
    @ViewBuilder var card: (Data.Element) -> Card

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        // `visualEffect` takes a `@Sendable` closure, so it works with local copies.
        let spacing = spacing
        let top = top
        let peek = peek
        let maxPeeking = maxPeeking
        let step: CGFloat = reduceMotion ? 0 : 0.05

        VStack(spacing: spacing) {
            ForEach(Array(data.enumerated()), id: \.element.id) { index, element in
                card(element)
                    .visualEffect { content, proxy in
                        let pin = StickyStackedCardsMath.pinOffset(
                            cardTop: proxy.frame(in: .scrollView).minY,
                            pinY: StickyStackedCardsMath.pinY(index: index, top: top, peek: peek, maxPeeking: maxPeeking)
                        )
                        let scale = StickyStackedCardsMath.scale(pinOffset: pin, cardHeight: proxy.size.height, spacing: spacing, step: step)
                        return content
                            .scaleEffect(scale, anchor: .top)
                            .offset(y: pin)
                    }
            }
        }
    }
}

// MARK: - Demo

struct StickyStackedCardsDemo: View {
    private struct Plan: Identifiable {
        let id: String
        let symbol: String
        let colors: [Color]
    }

    private let plans = [
        Plan(id: "Design", symbol: "paintpalette.fill", colors: [.pink, .orange]),
        Plan(id: "Build", symbol: "hammer.fill", colors: [.indigo, .blue]),
        Plan(id: "Test", symbol: "checkmark.seal.fill", colors: [.teal, .green]),
        Plan(id: "Ship", symbol: "paperplane.fill", colors: [.purple, .pink]),
        Plan(id: "Learn", symbol: "lightbulb.fill", colors: [.orange, .yellow]),
    ]

    @State private var position = ScrollPosition(y: 0)
    @State private var maxOffset: CGFloat = 0
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            StickyStackedCards(data: plans) { plan in
                card(plan)
            }
            .padding(.horizontal, 20)
            // Matches the default `top`, so the first card starts exactly at its pin.
            .padding(.top, 12)
            .padding(.bottom, 40)
        }
        .scrollPosition($position)
        .onScrollGeometryChange(for: CGFloat.self) { geometry in
            max(geometry.contentSize.height + geometry.contentInsets.top + geometry.contentInsets.bottom - geometry.containerSize.height, 0)
        } action: { _, newValue in
            maxOffset = newValue
        }
        .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            await autoScroll()
        }
    }

    private func card(_ plan: Plan) -> some View {
        VStack(alignment: .leading, spacing: 10) {
            Image(systemName: plan.symbol)
                .font(.largeTitle)
                .accessibilityHidden(true)

            Spacer(minLength: 24)

            Text(plan.id)
                .font(.largeTitle.bold())

            Text("Each step stacks on the last one as you scroll.")
                .font(.subheadline)
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, minHeight: 300, alignment: .leading)
        .padding(24)
        .background(LinearGradient(colors: plan.colors, startPoint: .topLeading, endPoint: .bottomTrailing), in: .rect(cornerRadius: 32))
    }

    // Only the demo scrolls by itself: slowly down, then quickly back to the top.
    private func autoScroll() async {
        var time = 0.0
        while isAutoPlaying {
            try? await Task.sleep(for: .milliseconds(16))
            guard !Task.isCancelled, isAutoPlaying else { return }
            time = (time + 0.016).truncatingRemainder(dividingBy: 5)
            let fraction = time < 4 ? time / 4 : 5 - time
            position.scrollTo(y: maxOffset * fraction)
        }
    }
}

#Preview {
    StickyStackedCardsDemo()
}
```

## Vertical Full Screen Feed

A vertical feed where each item fills the screen and snaps into place, in the style of short-video apps.

Category: Scrolling. Minimum: iOS 18.0. Path: Components/Scrolling/VerticalFullScreenFeed/VerticalFullScreenFeed.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct VerticalFullScreenFeedItem: Identifiable {
    let id: String
    let image: Image
    let title: String
    let subtitle: String
    /// What the image shows, for VoiceOver. Leave it nil when the image is decoration.
    var imageLabel: String?
}

/// A vertical feed where each item fills the screen and snaps into place.
///
/// The paging is driven by the finger, so Reduce Motion does not change it.
struct VerticalFullScreenFeed: View {
    let items: [VerticalFullScreenFeedItem]
    var selection: Binding<String?> = .constant(nil)

    var body: some View {
        GeometryReader { outer in
            ScrollView {
                LazyVStack(spacing: 0) {
                    ForEach(items) { item in
                        page(item, bottomInset: outer.safeAreaInsets.bottom)
                            .containerRelativeFrame([.horizontal, .vertical])
                    }
                }
                .scrollTargetLayout()
            }
            .scrollTargetBehavior(.paging)
            .scrollPosition(id: selection)
            .scrollIndicators(.hidden)
            .ignoresSafeArea()
        }
        .background(.black)
    }

    private func page(_ item: VerticalFullScreenFeedItem, bottomInset: CGFloat) -> some View {
        // The clear base takes the page size, so a large image cannot change the layout.
        Color.clear
            .overlay { pageImage(item) }
            .clipped()
            .overlay(alignment: .bottom) {
                LinearGradient(colors: [.clear, .black.opacity(0.75)], startPoint: .top, endPoint: .bottom)
                    .frame(height: 320)
                    .accessibilityHidden(true)
            }
            .overlay(alignment: .bottomLeading) {
                VStack(alignment: .leading, spacing: 6) {
                    Text(item.title)
                        .font(.title.bold())

                    Text(item.subtitle)
                        .font(.body)
                        .foregroundStyle(.white.opacity(0.85))
                }
                .foregroundStyle(.white)
                .padding(.horizontal, 20)
                .padding(.bottom, bottomInset + 20)
                .accessibilityElement(children: .combine)
            }
    }

    @ViewBuilder
    private func pageImage(_ item: VerticalFullScreenFeedItem) -> some View {
        let image = item.image.resizable().scaledToFill()

        if let label = item.imageLabel {
            image.accessibilityLabel(label)
        } else {
            image.accessibilityRepresentation { EmptyView() }
        }
    }
}

// MARK: - Demo

struct VerticalFullScreenFeedDemo: View {
    @State private var items = [
        VerticalFullScreenFeedDemo.item("Mountains at dawn", symbol: "mountain.2.fill", colors: [.orange, .pink, .indigo], imageLabel: "Two mountain peaks on a pink sky"),
        VerticalFullScreenFeedDemo.item("A walk in the forest", symbol: "tree.fill", colors: [.mint, .green, .teal], imageLabel: "A tree on a green background"),
        VerticalFullScreenFeedDemo.item("Deep blue water", symbol: "water.waves", colors: [.cyan, .blue, .indigo], imageLabel: "Waves on a blue background"),
        VerticalFullScreenFeedDemo.item("Under the stars", symbol: "moon.stars.fill", colors: [.purple, .indigo, .black], imageLabel: "A moon and stars on a dark sky"),
    ]
    @State private var selection: String?
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VerticalFullScreenFeed(items: items, selection: $selection)
            .simultaneousGesture(DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false })
            .task(id: reduceMotion) {
                guard !reduceMotion else { return }
                await autoAdvance()
            }
    }

    // Only the demo advances by itself. In an app the user swipes between pages.
    private func autoAdvance() async {
        var index = 0
        while isAutoPlaying {
            try? await Task.sleep(for: .seconds(1.6))
            guard !Task.isCancelled, isAutoPlaying, !items.isEmpty else { return }
            index = (index + 1) % items.count
            withAnimation(.smooth(duration: 0.6)) {
                selection = items[index].id
            }
        }
    }

    // Draws a placeholder poster, so the demo needs no image files or network.
    private static func item(_ title: String, symbol: String, colors: [Color], imageLabel: String) -> VerticalFullScreenFeedItem {
        let poster = ZStack {
            LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)

            Image(systemName: symbol)
                .font(.system(size: 170))
                .foregroundStyle(.white.opacity(0.85))
        }
        .frame(width: 402, height: 874)

        let renderer = ImageRenderer(content: poster)
        renderer.scale = 2
        let image = renderer.uiImage.map(Image.init(uiImage:)) ?? Image(systemName: symbol)
        return VerticalFullScreenFeedItem(id: title, image: image, title: title, subtitle: "A placeholder drawn with a gradient and a symbol.", imageLabel: imageLabel)
    }
}

#Preview {
    VerticalFullScreenFeedDemo()
}
```

## Custom Detent Sheet

A system sheet that snaps between custom heights using presentationDetents and a CustomPresentationDetent.

Category: Sheets. Minimum: iOS 18.0. Path: Components/Sheets/CustomDetentSheet/CustomDetentSheet.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A system sheet that snaps between custom heights with `presentationDetents`.
///
/// Set `interactiveUpThrough` to keep the content behind usable up to that height. The
/// system sheet animation already honours Reduce Motion.
struct CustomDetentSheet<SheetContent: View>: ViewModifier {
    @Binding var isPresented: Bool
    var detents: Set<PresentationDetent>
    @Binding var selection: PresentationDetent
    var interactiveUpThrough: PresentationDetent?
    @ViewBuilder var sheetContent: () -> SheetContent

    private var backgroundInteraction: PresentationBackgroundInteraction {
        interactiveUpThrough.map { .enabled(upThrough: $0) } ?? .automatic
    }

    func body(content: Content) -> some View {
        content.sheet(isPresented: $isPresented) {
            sheetContent()
                .presentationDetents(detents.isEmpty ? [selection] : detents, selection: $selection)
                .presentationDragIndicator(.visible)
                .presentationBackgroundInteraction(backgroundInteraction)
                .presentationCornerRadius(30)
        }
    }
}

extension View {
    func customDetentSheet<SheetContent: View>(
        isPresented: Binding<Bool>,
        detents: Set<PresentationDetent>,
        selection: Binding<PresentationDetent>,
        interactiveUpThrough: PresentationDetent? = nil,
        @ViewBuilder content: @escaping () -> SheetContent
    ) -> some View {
        modifier(CustomDetentSheet(
            isPresented: isPresented,
            detents: detents,
            selection: selection,
            interactiveUpThrough: interactiveUpThrough,
            sheetContent: content
        ))
    }
}

// MARK: - Demo

private struct CustomDetentSheetPeek: CustomPresentationDetent {
    static func height(in context: Context) -> CGFloat? {
        guard context.maxDetentValue > 0 else { return nil }
        return max(context.maxDetentValue * 0.22, min(context.maxDetentValue, 150))
    }
}

struct CustomDetentSheetDemo: View {
    private let peek = PresentationDetent.custom(CustomDetentSheetPeek.self)
    private let middle = PresentationDetent.height(400)
    private let stops = ["Museum", "Old town", "Riverside", "Market", "Viewpoint", "Harbour"]

    @State private var isPresented = false
    @State private var selection = PresentationDetent.height(400)
    /// Only for this demo: it plays by itself until someone touches it.
    @State private var isAutoPlaying = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ZStack {
            LinearGradient(colors: [.teal, .blue, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 16) {
                Text("City walk")
                    .font(.largeTitle.bold())
                    .foregroundStyle(.white)

                Button("Show stops") { isPresented = true }
                    .buttonStyle(.borderedProminent)
                    .tint(.white.opacity(0.25))
            }
            .frame(maxHeight: .infinity, alignment: .top)
            .padding(.top, 60)
        }
        .customDetentSheet(
            isPresented: $isPresented,
            detents: [peek, middle, .large],
            selection: $selection,
            interactiveUpThrough: peek
        ) {
            sheet
        }
        .simultaneousGesture(stopAutoPlay)
        .task { isPresented = true }
        .task(id: isPresented && !reduceMotion) {
            guard isPresented, !reduceMotion else { return }
            await cycleDetents()
        }
    }

    private var sheet: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 14) {
                Text("Today's stops")
                    .font(.title2.bold())

                ForEach(stops, id: \.self) { stop in
                    Label(stop, systemImage: "mappin.circle.fill")
                        .font(.headline)
                        .frame(maxWidth: .infinity, alignment: .leading)
                        .padding(14)
                        .background(.quaternary.opacity(0.6), in: .rect(cornerRadius: 16))
                }
            }
            .padding(24)
        }
        // The sheet is its own presentation, so a touch in it does not reach the gesture behind.
        .simultaneousGesture(stopAutoPlay)
    }

    private var stopAutoPlay: some Gesture {
        DragGesture(minimumDistance: 0).onChanged { _ in isAutoPlaying = false }
    }

    // Only the demo moves the sheet by itself, by changing the selected detent.
    private func cycleDetents() async {
        let order = [peek, middle, .large, middle]
        var index = 0
        var expected = selection
        while isAutoPlaying {
            try? await Task.sleep(for: .seconds(1.1))
            guard !Task.isCancelled, isAutoPlaying else { return }
            // Dragging the sheet by its grabber does not touch its content, but it changes the detent.
            guard selection == expected else {
                isAutoPlaying = false
                return
            }
            expected = order[index]
            withAnimation(.snappy(duration: 0.4)) {
                selection = expected
            }
            index = (index + 1) % order.count
        }
    }
}

#Preview {
    CustomDetentSheetDemo()
}
```

## Dynamic Height Tray

A sheet exactly as tall as its content, which grows and shrinks as one step of a flow gives way to the next.

Category: Sheets. Minimum: iOS 18.0. Path: Components/Sheets/DynamicHeightTray/DynamicHeightTray.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum DynamicHeightTrayLogic {
    /// The height the tray takes for content that is `content` tall: never under `minimum` nor
    /// over `maximum`, and a whole number of points, so a measure that is off by a fraction
    /// does not start another round of layout.
    static func height(content: Double, minimum: Double = 80, maximum: Double) -> Double {
        guard content.isFinite, maximum.isFinite else { return minimum }
        return min(max(content.rounded(.up), minimum), max(maximum, minimum))
    }
}

extension View {
    /// Presents a sheet that is exactly as tall as its content, and that grows or shrinks with
    /// it when the content changes, as when one step of a flow gives way to the next.
    ///
    /// Change the content inside `withAnimation` and the tray follows it. The content is measured
    /// at the height it asks for, so give a list too long for the screen a frame of its own.
    func dynamicHeightTray<Tray: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> Tray) -> some View {
        modifier(DynamicHeightTrayModifier(isPresented: isPresented, tray: content))
    }
}

private struct DynamicHeightTrayModifier<Tray: View>: ViewModifier {
    @Binding var isPresented: Bool
    @ViewBuilder var tray: () -> Tray

    /// The share of the screen the tray may take at most.
    private let maximumShare = 0.9

    @State private var detents: Set<PresentationDetent> = [.height(240)]
    @State private var detent = PresentationDetent.height(240)
    @State private var available: CGFloat = 800

    func body(content: Content) -> some View {
        content
            .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { available = $0 }
            .sheet(isPresented: $isPresented) {
                tray()
                    .fixedSize(horizontal: false, vertical: true)
                    .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { measured in
                        // A sheet animates from one detent to another, but not a detent that
                        // changes its height. So the new height joins the old one, the sheet
                        // moves to it, and the old one goes once it has arrived.
                        let fitted = PresentationDetent.height(DynamicHeightTrayLogic.height(content: measured, maximum: available * maximumShare))
                        detents.insert(fitted)
                        detent = fitted
                    }
                    .frame(maxHeight: .infinity, alignment: .top)
                    .presentationDetents(detents, selection: $detent)
                    .presentationDragIndicator(.visible)
                    .task(id: detent) {
                        try? await Task.sleep(for: .seconds(0.6))
                        if !Task.isCancelled { detents = [detent] }
                    }
            }
    }
}

// MARK: - Demo

struct DynamicHeightTrayDemo: View {
    private enum Step {
        case options, phrase, confirm, done
    }

    private let words = ["river", "amber", "quiet", "orbit", "maple", "candle", "harbor", "velvet", "summit", "ember", "willow", "north"]

    @State private var isPresented = false
    @State private var step = Step.options
    @State private var hasWallet = true
    @State private var hidesSmallBalances = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 14) {
            Image(systemName: "wallet.bifold.fill")
                .font(.system(size: 52))
                .foregroundStyle(.tint)
                .accessibilityHidden(true)
            Text(hasWallet ? "Main Wallet" : "No wallet")
                .font(.title2.bold())

            Button(hasWallet ? "Manage Wallet" : "Add Wallet") {
                guard hasWallet else {
                    hasWallet = true
                    return
                }
                step = .options
                isPresented = true
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .padding(.top, 8)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .dynamicHeightTray(isPresented: $isPresented) {
            VStack(alignment: .leading, spacing: 16) {
                switch step {
                case .options: options
                case .phrase: phrase
                case .confirm: confirm
                case .done: done
                }
            }
            .padding(.horizontal, 24)
            .padding(.top, 32)
            .padding(.bottom, 16)
            .frame(maxWidth: .infinity, alignment: .leading)
        }
    }

    private func go(to next: Step) {
        withAnimation(reduceMotion ? nil : .snappy(duration: 0.35)) { step = next }
    }

    @ViewBuilder private var options: some View {
        Text("Manage Wallet")
            .font(.title3.bold())

        row("View Recovery Phrase", symbol: "key.fill") {
            go(to: .phrase)
        }
        row(hidesSmallBalances ? "Show Small Balances" : "Hide Small Balances", symbol: hidesSmallBalances ? "eye.fill" : "eye.slash.fill") {
            hidesSmallBalances.toggle()
        }
        row("Remove Wallet", symbol: "trash.fill", role: .destructive) {
            go(to: .confirm)
        }
    }

    @ViewBuilder private var phrase: some View {
        Text("Recovery Phrase")
            .font(.title3.bold())

        LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 10), count: 3), spacing: 10) {
            ForEach(Array(words.enumerated()), id: \.offset) { index, word in
                Text("\(index + 1). \(word)")
                    .font(.callout.monospaced())
                    .lineLimit(1)
                    .minimumScaleFactor(0.7)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 12)
                    .background(.fill.quaternary, in: .rect(cornerRadius: 12))
            }
        }

        Button("Back") {
            go(to: .options)
        }
        .buttonStyle(.bordered)
        .controlSize(.large)
        .frame(maxWidth: .infinity)
    }

    @ViewBuilder private var confirm: some View {
        Text("Remove this wallet?")
            .font(.title3.bold())
        Text("You will need its recovery phrase to add it again.")
            .font(.subheadline)
            .foregroundStyle(.secondary)

        HStack(spacing: 12) {
            Button("Cancel") {
                go(to: .options)
            }
            .buttonStyle(.bordered)

            Button("Remove", role: .destructive) {
                hasWallet = false
                go(to: .done)
            }
            .buttonStyle(.borderedProminent)
        }
        .controlSize(.large)
        .frame(maxWidth: .infinity)
    }

    @ViewBuilder private var done: some View {
        Label("Wallet removed", systemImage: "checkmark.circle.fill")
            .font(.title3.bold())
            .foregroundStyle(.green)
            .frame(maxWidth: .infinity)
            .padding(.vertical, 8)

        Button("Done") {
            isPresented = false
        }
        .buttonStyle(.borderedProminent)
        .controlSize(.large)
        .frame(maxWidth: .infinity)
    }

    private func row(_ title: String, symbol: String, role: ButtonRole? = nil, action: @escaping () -> Void) -> some View {
        Button(role: role, action: action) {
            Label(title, systemImage: symbol)
                .font(.body.weight(.medium))
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.vertical, 14)
                .padding(.horizontal, 16)
                .background(.fill.quaternary, in: .rect(cornerRadius: 14))
        }
        .buttonStyle(.plain)
        .foregroundStyle(role == .destructive ? AnyShapeStyle(.red) : AnyShapeStyle(.primary))
    }
}

#Preview {
    DynamicHeightTrayDemo()
}
```

## What's New Sheet

A sheet that lists what a new version brings and comes up once for each version.

Category: Sheets. Minimum: iOS 18.0. Path: Components/Sheets/WhatsNewSheet/WhatsNewSheet.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum WhatsNewSheetLogic {
    /// Whether `version` comes after the one that was already shown, comparing number by number,
    /// so 2.10 is newer than 2.9 and 2.0 is the same as 2. Nothing shown yet counts as older.
    static func isNewer(_ version: String, than seen: String) -> Bool {
        let new = numbers(in: version)
        let old = numbers(in: seen)
        for index in 0..<max(new.count, old.count) {
            let left = index < new.count ? new[index] : 0
            let right = index < old.count ? old[index] : 0
            if left != right { return left > right }
        }
        return false
    }

    static func numbers(in version: String) -> [Int] {
        version.split(separator: ".").map { Int($0) ?? 0 }
    }

    /// How long a row waits before it comes in, so they arrive one after another without the
    /// last ones of a long list taking too long.
    static func delay(for index: Int, step: Double = 0.12, limit: Double = 0.6) -> Double {
        min(Double(max(index, 0)) * step, limit)
    }
}

struct WhatsNewSheetFeature: Identifiable {
    var symbol: String
    var title: LocalizedStringResource
    var text: LocalizedStringResource
    var tint: Color = .accentColor

    var id: String { title.key }
}

/// The page that tells what a new version brings: a title, a row per feature and a button.
///
/// Show it yourself in a sheet, or let `whatsNewSheet(version:features:)` show it once per version.
/// The rows come in one after another. With Reduce Motion on, they fade in together.
struct WhatsNewSheet: View {
    var title: LocalizedStringResource = "What’s New"
    let features: [WhatsNewSheetFeature]
    var buttonTitle = "Continue"
    var onContinue: () -> Void

    private let margin: CGFloat = 32

    @State private var hasAppeared = false
    @ScaledMetric(relativeTo: .title) private var symbolWidth = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            VStack(spacing: 40) {
                Text(title)
                    .font(.largeTitle.bold())
                    .multilineTextAlignment(.center)
                    .accessibilityAddTraits(.isHeader)

                VStack(alignment: .leading, spacing: 28) {
                    ForEach(Array(features.enumerated()), id: \.element.id) { index, feature in
                        row(feature)
                            .opacity(hasAppeared ? 1 : 0)
                            .offset(y: hasAppeared || reduceMotion ? 0 : 18)
                            .animation(animation(for: index), value: hasAppeared)
                    }
                }
            }
            .padding(.horizontal, margin)
            .padding(.top, 56)
            .padding(.bottom, 24)
            .frame(maxWidth: 520)
            .frame(maxWidth: .infinity)
        }
        .scrollBounceBehavior(.basedOnSize)
        .safeAreaInset(edge: .bottom) {
            Button(action: onContinue) {
                Text(buttonTitle)
                    .font(.headline)
                    .frame(maxWidth: .infinity)
            }
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
            .padding(.horizontal, margin)
            .padding(.vertical, 12)
            .frame(maxWidth: 520)
            .frame(maxWidth: .infinity)
            .background(.bar)
        }
        .onAppear { hasAppeared = true }
    }

    private func row(_ feature: WhatsNewSheetFeature) -> some View {
        HStack(alignment: .top, spacing: 16) {
            Image(systemName: feature.symbol)
                .font(.title)
                .foregroundStyle(feature.tint)
                .frame(width: symbolWidth)
                .accessibilityHidden(true)

            VStack(alignment: .leading, spacing: 2) {
                Text(feature.title)
                    .font(.headline)
                Text(feature.text)
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
        }
        .accessibilityElement(children: .combine)
    }

    private func animation(for index: Int) -> Animation {
        reduceMotion
            ? .easeOut(duration: 0.25)
            : .spring(duration: 0.5).delay(WhatsNewSheetLogic.delay(for: index))
    }
}

struct WhatsNewSheetModifier: ViewModifier {
    let version: String
    let title: LocalizedStringResource
    let features: [WhatsNewSheetFeature]

    @AppStorage private var seenVersion: String
    @State private var isPresented = false

    init(version: String, title: LocalizedStringResource, features: [WhatsNewSheetFeature], storageKey: String) {
        self.version = version
        self.title = title
        self.features = features
        _seenVersion = AppStorage(wrappedValue: "", storageKey)
    }

    func body(content: Content) -> some View {
        content
            .onChange(of: seenVersion, initial: true) {
                if WhatsNewSheetLogic.isNewer(version, than: seenVersion) { isPresented = true }
            }
            .sheet(isPresented: $isPresented) {
                seenVersion = version
            } content: {
                WhatsNewSheet(title: title, features: features) {
                    isPresented = false
                }
            }
    }
}

extension View {
    /// Shows `WhatsNewSheet` the first time the app runs a `version` newer than the last one it
    /// was shown for, and remembers it in `UserDefaults` when the sheet closes.
    func whatsNewSheet(version: String, title: LocalizedStringResource = "What’s New", features: [WhatsNewSheetFeature], storageKey: String = "WhatsNewSheet.seenVersion") -> some View {
        modifier(WhatsNewSheetModifier(version: version, title: title, features: features, storageKey: storageKey))
    }
}

// MARK: - Demo

struct WhatsNewSheetDemo: View {
    private let storageKey = "WhatsNewSheetDemo.seenVersion"
    private let features = [
        WhatsNewSheetFeature(symbol: "square.and.pencil", title: "Quick Notes", text: "Start a note from anywhere and find it later in its own folder.", tint: .orange),
        WhatsNewSheetFeature(symbol: "tag.fill", title: "Smart Tags", text: "Add a tag as you write and browse every note that shares it.", tint: .teal),
        WhatsNewSheetFeature(symbol: "person.2.fill", title: "Shared Folders", text: "Invite people to a folder and see their changes as they make them.", tint: .indigo),
        WhatsNewSheetFeature(symbol: "lock.fill", title: "Locked Notes", text: "Keep a note behind Face ID, so only you can open it.", tint: .pink),
    ]

    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: "note.text")
                .font(.system(size: 56))
                .foregroundStyle(.tint)
                .accessibilityHidden(true)
            Text("Notes 2.4")
                .font(.title2.bold())
            Text("The sheet comes up once for each new version.")
                .font(.subheadline)
                .foregroundStyle(.secondary)
                .multilineTextAlignment(.center)

            Button("Show Again", action: forget)
                .buttonStyle(.bordered)
                .padding(.top, 8)
        }
        .padding(32)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground))
        .whatsNewSheet(version: "2.4", features: features, storageKey: storageKey)
        .onAppear(perform: forget)
    }

    /// Forgets the version the sheet was shown for, as if the app had just been updated.
    private func forget() {
        UserDefaults.standard.removeObject(forKey: storageKey)
    }
}

#Preview {
    WhatsNewSheetDemo()
}
```

## Minimizing Tab Bar

A tab bar that shrinks into a compact capsule while scrolling using the system tab bar minimize behavior.

Category: Tabs. Minimum: iOS 26.0. Path: Components/Tabs/MinimizingTabBar/MinimizingTabBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A tab view whose tab bar shrinks into a compact capsule while the content scrolls.
///
/// The system draws and animates the bar, and honours Reduce Motion. Each tab needs a
/// scroll view for the bar to react.
@available(iOS 26, *)
struct MinimizingTabBar<Selection: Hashable, Tabs: TabContent>: View where Tabs.TabValue == Selection {
    @Binding var selection: Selection
    var behavior: TabBarMinimizeBehavior = .onScrollDown
    @TabContentBuilder<Selection> var tabs: () -> Tabs

    var body: some View {
        TabView(selection: $selection) {
            tabs()
        }
        .tabBarMinimizeBehavior(behavior)
    }
}

// MARK: - Demo

@available(iOS 26, *)
struct MinimizingTabBarDemo: View {
    private enum Screen: Hashable {
        case listen, browse, library
    }

    @State private var selection = Screen.listen

    var body: some View {
        MinimizingTabBar(selection: $selection) {
            Tab("Listen", systemImage: "play.circle.fill", value: Screen.listen) {
                screen(title: "Listen now", symbol: "music.note", colors: [.pink, .orange])
            }

            Tab("Browse", systemImage: "square.grid.2x2.fill", value: Screen.browse) {
                screen(title: "New releases", symbol: "sparkles", colors: [.purple, .indigo])
            }

            Tab("Library", systemImage: "books.vertical.fill", value: Screen.library) {
                screen(title: "Your songs", symbol: "heart.fill", colors: [.teal, .blue])
            }
        }
    }

    private func screen(title: String, symbol: String, colors: [Color]) -> some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 14) {
                Text(title)
                    .font(.largeTitle.bold())

                ForEach(1...24, id: \.self) { number in
                    HStack(spacing: 14) {
                        RoundedRectangle(cornerRadius: 12)
                            .fill(LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing))
                            .frame(width: 56, height: 56)
                            .overlay {
                                Image(systemName: symbol)
                                    .foregroundStyle(.white)
                            }
                            .accessibilityHidden(true)

                        Text("Track \(number)")
                            .font(.headline)

                        Spacer()
                    }
                }
            }
            .padding(20)
        }
    }
}

@available(iOS 26, *)
#Preview {
    MinimizingTabBarDemo()
}
```

## Notched Tab Bar

A tab bar whose background path carves a smooth notch under the selected tab that slides between items.

Category: Tabs. Minimum: iOS 18.0. Path: Components/Tabs/NotchedTabBar/NotchedTabBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct NotchedTabBarItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
}

nonisolated enum NotchedTabBarMath {
    /// The middle of a tab, with the tabs spread evenly inside the horizontal inset.
    static func centerX(index: Int, count: Int, width: CGFloat, inset: CGFloat) -> CGFloat {
        let usable = max(width - 2 * max(inset, 0), 0)
        guard count > 0, usable > 0 else { return max(width, 0) / 2 }
        let clamped = min(max(index, 0), count - 1)
        return max(inset, 0) + usable * (CGFloat(clamped) + 0.5) / CGFloat(count)
    }

    /// Half the width of the notch, narrowed so it never runs into a rounded corner.
    static func halfSpan(centerX: CGFloat, width: CGFloat, corner: CGFloat, desired: CGFloat) -> CGFloat {
        max(min(desired, centerX - corner, width - centerX - corner), 0)
    }
}

/// A rounded bar with a smooth notch that can slide along its top edge.
nonisolated struct NotchedTabBarShape: Shape {
    var centerX: CGFloat
    var desiredHalfSpan: CGFloat
    var depth: CGFloat
    var corner: CGFloat

    var animatableData: CGFloat {
        get { centerX }
        set { centerX = newValue }
    }

    func path(in rect: CGRect) -> Path {
        guard rect.width > 0, rect.height > 0 else { return Path() }

        let radius = min(corner, rect.width / 2, rect.height / 2)
        let span = NotchedTabBarMath.halfSpan(centerX: centerX, width: rect.width, corner: radius, desired: desiredHalfSpan)
        let dip = min(depth, rect.height)
        let (w, h) = (rect.width, rect.height)

        var path = Path()
        path.move(to: CGPoint(x: 0, y: radius))
        path.addArc(tangent1End: .zero, tangent2End: CGPoint(x: radius, y: 0), radius: radius)
        path.addLine(to: CGPoint(x: centerX - span, y: 0))
        // Each side is two curves that share a tangent, so the notch has no visible seam.
        path.addQuadCurve(to: CGPoint(x: centerX - span * 0.5, y: dip * 0.5), control: CGPoint(x: centerX - span * 0.62, y: 0))
        path.addQuadCurve(to: CGPoint(x: centerX, y: dip), control: CGPoint(x: centerX - span * 0.38, y: dip))
        path.addQuadCurve(to: CGPoint(x: centerX + span * 0.5, y: dip * 0.5), control: CGPoint(x: centerX + span * 0.38, y: dip))
        path.addQuadCurve(to: CGPoint(x: centerX + span, y: 0), control: CGPoint(x: centerX + span * 0.62, y: 0))
        path.addLine(to: CGPoint(x: w - radius, y: 0))
        path.addArc(tangent1End: CGPoint(x: w, y: 0), tangent2End: CGPoint(x: w, y: radius), radius: radius)
        path.addLine(to: CGPoint(x: w, y: h - radius))
        path.addArc(tangent1End: CGPoint(x: w, y: h), tangent2End: CGPoint(x: w - radius, y: h), radius: radius)
        path.addLine(to: CGPoint(x: radius, y: h))
        path.addArc(tangent1End: CGPoint(x: 0, y: h), tangent2End: CGPoint(x: 0, y: h - radius), radius: radius)
        path.closeSubpath()
        return path
    }
}

/// A tab bar whose background carves a smooth notch under the selected tab.
///
/// With Reduce Motion on, the notch moves to the new tab without sliding.
struct NotchedTabBar: View {
    let items: [NotchedTabBarItem]
    @Binding var selection: String
    var tint: Color = .indigo

    var body: some View {
        NotchedTabBarStage(items: items, selection: $selection, tint: tint)
            // The bar only holds short labels. The stage reads its sizes under this cap, which keeps every tab on screen.
            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
    }
}

private struct NotchedTabBarStage: View {
    let items: [NotchedTabBarItem]
    @Binding var selection: String
    let tint: Color

    @ScaledMetric(relativeTo: .caption) private var barHeight = 72.0
    @ScaledMetric(relativeTo: .title3) private var bubbleSize = 52.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let inset: CGFloat = 14

    private var selectedIndex: Int {
        items.firstIndex { $0.id == selection } ?? 0
    }

    var body: some View {
        let depth = bubbleSize * 0.7
        let bubbleY = depth - bubbleSize / 2 - 6

        GeometryReader { proxy in
            let center = NotchedTabBarMath.centerX(index: selectedIndex, count: items.count, width: proxy.size.width, inset: inset)

            ZStack(alignment: .topLeading) {
                NotchedTabBarShape(centerX: center, desiredHalfSpan: bubbleSize * 0.95, depth: depth, corner: 26)
                    .fill(.background)
                    .shadow(color: .black.opacity(0.15), radius: 14, y: 6)

                if !items.isEmpty {
                    Circle()
                        .fill(tint.gradient)
                        .frame(width: bubbleSize, height: bubbleSize)
                        .position(x: center, y: bubbleY)
                        .accessibilityHidden(true)
                }

                HStack(spacing: 0) {
                    ForEach(items) { item in
                        tabButton(item, iconLift: barHeight / 2 - 10 - bubbleY)
                    }
                }
                .padding(.horizontal, inset)
            }
        }
        .frame(height: barHeight)
        .padding(.top, bubbleSize / 2)
        .animation(reduceMotion ? nil : .snappy(duration: 0.4), value: selection)
    }

    private func tabButton(_ item: NotchedTabBarItem, iconLift: CGFloat) -> some View {
        let isSelected = item.id == selection

        return Button {
            selection = item.id
        } label: {
            VStack(spacing: 4) {
                Image(systemName: item.systemImage)
                    .font(.title3.weight(.semibold))
                    .foregroundStyle(isSelected ? .white : .secondary)
                    .offset(y: isSelected ? -iconLift : 0)

                Text(item.title)
                    .font(.caption)
                    .fontWeight(isSelected ? .semibold : .regular)
                    .foregroundStyle(isSelected ? tint : .secondary)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(item.title)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct NotchedTabBarDemo: View {
    private let items = [
        NotchedTabBarItem(id: "home", title: "Home", systemImage: "house.fill"),
        NotchedTabBarItem(id: "search", title: "Search", systemImage: "magnifyingglass"),
        NotchedTabBarItem(id: "saved", title: "Saved", systemImage: "bookmark.fill"),
        NotchedTabBarItem(id: "profile", title: "Profile", systemImage: "person.fill"),
    ]

    @State private var selection = "home"

    private var heading: LocalizedStringResource {
        items.first { $0.id == selection }.map { "\($0.title) page" } ?? ""
    }

    var body: some View {
        ZStack(alignment: .bottom) {
            LinearGradient(colors: [.indigo.opacity(0.35), .pink.opacity(0.25)], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            Text(heading)
                .font(.largeTitle.bold())
                .frame(maxWidth: .infinity, maxHeight: .infinity)

            NotchedTabBar(items: items, selection: $selection)
                .padding(.horizontal, 16)
                .padding(.bottom, 8)
        }
    }
}

#Preview {
    NotchedTabBarDemo()
}
```

## Scrolling Tab Strip

A horizontal row of tabs that scrolls the selected tab into the middle, with an underline that slides between tabs.

Category: Tabs. Minimum: iOS 18.0. Path: Components/Tabs/ScrollingTabStrip/ScrollingTabStrip.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A horizontal row of tabs that scrolls the selected tab into the middle.
///
/// With Reduce Motion on, the row and the underline jump to the new tab.
struct ScrollingTabStrip: View {
    let tabs: [String]
    @Binding var selection: String
    var tint: Color = .pink

    @Namespace private var namespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .snappy(duration: 0.35)
    }

    var body: some View {
        ScrollViewReader { proxy in
            ScrollView(.horizontal) {
                HStack(spacing: 22) {
                    ForEach(tabs, id: \.self) { tab in
                        tabButton(tab)
                            .id(tab)
                    }
                }
                .padding(.horizontal, 20)
            }
            .scrollIndicators(.hidden)
            .onChange(of: selection, initial: true) { _, newValue in
                withAnimation(animation) {
                    proxy.scrollTo(newValue, anchor: .center)
                }
            }
        }
    }

    private func tabButton(_ tab: String) -> some View {
        let isSelected = tab == selection

        return Button {
            withAnimation(animation) { selection = tab }
        } label: {
            VStack(spacing: 8) {
                Text(tab)
                    .font(.headline)
                    .foregroundStyle(isSelected ? .primary : .secondary)

                ZStack {
                    Capsule().fill(.clear)

                    if isSelected {
                        Capsule()
                            .fill(tint)
                            .matchedGeometryEffect(id: "underline", in: namespace)
                    }
                }
                .frame(height: 3)
            }
            .fixedSize()
            // A tab is shorter than a touch target. The padding widens what answers to a
            // touch, and the same padding taken back keeps the strip as it was.
            .padding(.horizontal, 2)
            .padding(.vertical, 7)
            .contentShape(.rect)
            .padding(.horizontal, -2)
            .padding(.vertical, -7)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(tab)
        .accessibilityAddTraits(isSelected ? .isSelected : [])
    }
}

// MARK: - Demo

struct ScrollingTabStripDemo: View {
    private let tabs = ["For You", "Trending", "Music", "Sports", "Travel", "Food", "Science", "Design", "Movies", "Gaming"]
    private let symbols = ["sparkles", "flame.fill", "music.note", "figure.run", "airplane", "fork.knife", "atom", "paintbrush.fill", "film.fill", "gamecontroller.fill"]

    @State private var selection = "For You"

    private var index: Int { tabs.firstIndex(of: selection) ?? 0 }

    var body: some View {
        VStack(spacing: 18) {
            ScrollingTabStrip(tabs: tabs, selection: $selection)
                .padding(.top, 12)

            ZStack {
                RoundedRectangle(cornerRadius: 32)
                    .fill(LinearGradient(colors: [.pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
                    .hueRotation(.degrees(Double(index) * 34))

                VStack(spacing: 16) {
                    Image(systemName: symbols[index])
                        .font(.largeTitle)
                        .imageScale(.large)
                        .contentTransition(.symbolEffect(.replace))
                        .accessibilityHidden(true)

                    Text("Stories about \(selection)")
                        .font(.title.bold())
                        .multilineTextAlignment(.center)
                }
                .foregroundStyle(.white)
                .padding(24)
            }
            .padding(.horizontal, 20)
            .padding(.bottom, 20)
        }
    }
}

#Preview {
    ScrollingTabStripDemo()
}
```

## Tabs Picker Pages

A row of tabs over a page that slides in with them, on the tabs picker style of iOS 27.

Category: Tabs. Minimum: iOS 27.0. Path: Components/Tabs/TabsPickerPages/TabsPickerPages.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum TabsPickerPagesLogic {
    /// Whether going from one option to another moves forward through the options, which decides
    /// the side the new page comes in from. An option that is not listed counts as the first.
    static func movesForward<Option: Equatable>(from old: Option, to new: Option, in options: [Option]) -> Bool {
        (options.firstIndex(of: new) ?? 0) >= (options.firstIndex(of: old) ?? 0)
    }
}

/// A row of tabs over a page that changes with them, using the tabs picker style that iOS 27
/// added to `Picker`. On an iPhone the system draws it much like a segmented control, with
/// the text of each label.
///
/// The new page slides in from the side its tab is on. It is a system `Picker`, so VoiceOver
/// and the keyboard are the system's. With Reduce Motion on, the pages cross-fade.
@available(iOS 27, *)
struct TabsPickerPages<Option: Hashable, Label: View, Page: View>: View {
    let options: [Option]
    @Binding var selection: Option
    var title = "Section"
    @ViewBuilder var label: (Option) -> Label
    @ViewBuilder var page: (Option) -> Page

    @State private var movesForward = true
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: 16) {
            Picker(title, selection: $selection) {
                ForEach(options, id: \.self) { option in
                    label(option)
                        .tag(option)
                }
            }
            .pickerStyle(.tabs)

            page(selection)
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
                .id(selection)
                .transition(transition)
        }
        .onChange(of: selection) { old, new in
            movesForward = TabsPickerPagesLogic.movesForward(from: old, to: new, in: options)
        }
        .animation(reduceMotion ? .easeInOut(duration: 0.2) : .snappy(duration: 0.35), value: selection)
    }

    private var transition: AnyTransition {
        guard !reduceMotion else { return .opacity }
        return .asymmetric(
            insertion: .move(edge: movesForward ? .trailing : .leading).combined(with: .opacity),
            removal: .move(edge: movesForward ? .leading : .trailing).combined(with: .opacity)
        )
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct TabsPickerPagesDemo: View {
    private enum Section: String, CaseIterable {
        case overview = "Overview"
        case activity = "Activity"
        case files = "Files"

        var symbol: String {
            switch self {
            case .overview: "square.grid.2x2"
            case .activity: "chart.line.uptrend.xyaxis"
            case .files: "folder"
            }
        }

        var rows: [String] {
            switch self {
            case .overview: ["Launch plan", "Budget", "Team"]
            case .activity: ["Ana updated the budget", "Leo added two files", "Mia closed a task"]
            case .files: ["Brief.pdf", "Timeline.numbers", "Logo.svg", "Notes.txt"]
            }
        }
    }

    @State private var section = Section.overview

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Spring Launch")
                .font(.largeTitle.bold())

            TabsPickerPages(options: Section.allCases, selection: $section) { section in
                SwiftUI.Label(section.rawValue, systemImage: section.symbol)
            } page: { section in
                VStack(spacing: 10) {
                    ForEach(section.rows, id: \.self) { row in
                        Text(row)
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .padding(16)
                            .background(.background, in: .rect(cornerRadius: 14))
                    }
                }
            }
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .background(Color(.systemGroupedBackground))
    }
}

@available(iOS 27, *)
#Preview {
    TabsPickerPagesDemo()
}
```

## Animated Gradient Text

Text filled with a gradient that drifts endlessly through its letters.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/AnimatedGradientText/AnimatedGradientText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Text filled with a gradient that drifts endlessly through the letters.
///
/// With Reduce Motion on, the gradient stays still.
struct AnimatedGradientText: View {
    let text: String
    var colors: [Color] = [.pink, .orange, .yellow, .mint, .cyan, .purple]
    /// Seconds for the colors to drift one full cycle.
    var duration: Double = 4

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { context in
            Text(text)
                .foregroundStyle(gradient(at: reduceMotion ? 0 : context.date.timeIntervalSinceReferenceDate))
        }
    }

    /// The gradient holds two copies of the colors and spans two text widths. Sliding it
    /// left by one width lands on an identical picture, so the loop has no visible seam.
    private func gradient(at time: TimeInterval) -> LinearGradient {
        let shift = time.truncatingRemainder(dividingBy: duration) / duration

        return LinearGradient(
            colors: colors + colors + colors.prefix(1),
            startPoint: UnitPoint(x: -shift, y: 0.5),
            endPoint: UnitPoint(x: 2 - shift, y: 0.5)
        )
    }
}

// MARK: - Demo

struct AnimatedGradientTextDemo: View {
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 16) {
                AnimatedGradientText(text: "Colors that\nnever stand\nstill")
                    .font(.system(.largeTitle, design: .rounded, weight: .black))
                    .multilineTextAlignment(.center)
                    .scaleEffect(1.3)

                AnimatedGradientText(text: "Drifting through every letter", colors: [.mint, .cyan, .indigo], duration: 3)
                    .font(.headline)
                    .padding(.top, 48)
            }
            .padding(24)
        }
    }
}

#Preview {
    AnimatedGradientTextDemo()
}
```

## Bouncy Letters Text

Letters that hop one after another in a repeating wave with squash and stretch.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/BouncyLettersText/BouncyLettersText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Letters that hop one after another, in a repeating wave.
///
/// Letters are laid out one by one, so it suits a short single line.
/// With Reduce Motion on, it is plain text.
struct BouncyLettersText: View {
    let text: String
    /// Seconds between one letter's hop and the next one's.
    var stagger: Double = 0.08
    /// Seconds of rest after the last letter lands.
    var pause: Double = 0.7

    @ScaledMetric(relativeTo: .largeTitle) private var hopHeight = 28.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        if reduceMotion {
            Text(text)
        } else {
            let letters = Array(text)

            HStack(spacing: 0) {
                ForEach(letters.indices, id: \.self) { index in
                    letter(letters[index], index: index, count: letters.count)
                }
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(text)
        }
    }

    /// Every letter's timeline has the same total length, so they stay in step as they repeat.
    private func letter(_ character: Character, index: Int, count: Int) -> some View {
        let firstLead = 0.001
        let rise = 0.16
        let fall = 0.16
        let settle = 0.2
        let period = firstLead + Double(count - 1) * stagger + rise + fall + settle + pause
        let lead = max(Double(index) * stagger, firstLead)
        let rest = period - lead - rise - fall - settle
        let height = hopHeight

        return Text(String(character))
            .accessibilityRepresentation { EmptyView() }
            .keyframeAnimator(initialValue: BouncyLetterPose(), repeating: true) { view, pose in
                view
                    .scaleEffect(x: 2 - pose.stretch, y: pose.stretch, anchor: .bottom)
                    .offset(y: pose.lift)
            } keyframes: { _ in
                KeyframeTrack(\.lift) {
                    LinearKeyframe(0, duration: lead)
                    CubicKeyframe(-height, duration: rise)
                    CubicKeyframe(0, duration: fall)
                    LinearKeyframe(0, duration: settle + rest)
                }
                KeyframeTrack(\.stretch) {
                    LinearKeyframe(1, duration: lead)
                    CubicKeyframe(1.14, duration: rise)
                    CubicKeyframe(0.8, duration: fall)
                    SpringKeyframe(1, duration: settle, spring: .bouncy)
                    LinearKeyframe(1, duration: rest)
                }
            }
    }
}

private struct BouncyLetterPose {
    var lift = 0.0
    var stretch = 1.0
}

// MARK: - Demo

struct BouncyLettersTextDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(spacing: 56) {
                BouncyLettersText(text: "Boing!")
                    .font(.system(.largeTitle, design: .rounded, weight: .black))
                    .scaleEffect(1.5)

                BouncyLettersText(text: "Hop in sequence", stagger: 0.05)
                    .font(.system(.title2, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    BouncyLettersTextDemo()
}
```

## Counting Number Text

A number that counts to its new value with its digits rolling into place.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/CountingNumberText/CountingNumberText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum CountingNumberTextMath {
    /// The number at `progress`, from 0 to 1. Works in `Double`, so extreme values cannot overflow.
    static func value(from: Int, to: Int, progress: Double) -> Int {
        guard progress < 1 else { return to }
        let exact = (Double(from) + (Double(to) - Double(from)) * progress).rounded()
        let sample = Int(exactly: exact) ?? (exact > 0 ? .max : .min)
        return min(max(sample, min(from, to)), max(from, to))
    }
}

/// A number that counts to its new value, with its digits rolling into place.
///
/// With Reduce Motion on, it jumps straight to the value.
struct CountingNumberText: View {
    let value: Int
    var duration: Double = 1.2
    var format: IntegerFormatStyle<Int> = .number

    @State private var shown = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(shown, format: format)
            .monospacedDigit()
            .contentTransition(.numericText(value: Double(shown)))
            .accessibilityLabel(Text(value, format: format))
            .task(id: value) { await count() }
    }

    /// Passes through intermediate values, slowing down as it gets close.
    private func count() async {
        guard !reduceMotion else {
            shown = value
            return
        }

        let from = shown
        let steps = max(Int(duration * 24), 1)

        for step in 1...steps {
            try? await Task.sleep(for: .seconds(duration / Double(steps)))
            guard !Task.isCancelled else { return }

            let eased = 1 - pow(1 - Double(step) / Double(steps), 3)
            withAnimation(.snappy(duration: 0.2)) {
                shown = CountingNumberTextMath.value(from: from, to: value, progress: eased)
            }
        }
    }
}

// MARK: - Demo

struct CountingNumberTextDemo: View {
    @State private var steps = 0
    @State private var calories = 0
    @State private var minutes = 0

    var body: some View {
        ZStack {
            LinearGradient(colors: [.teal, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 18) {
                statistic("Steps", systemImage: "figure.walk", value: steps)
                statistic("Calories", systemImage: "flame.fill", value: calories)
                statistic("Minutes", systemImage: "timer", value: minutes)
            }
            .padding(24)
        }
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(0.3))
                steps += 12_480
                calories += 2_347
                minutes += 86
                try? await Task.sleep(for: .seconds(1.9))
            }
        }
    }

    private func statistic(_ title: String, systemImage: String, value: Int) -> some View {
        HStack {
            Label(title, systemImage: systemImage)
                .font(.headline)

            Spacer()

            CountingNumberText(value: value)
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
        }
        .foregroundStyle(.white)
        .padding(24)
        .background(.white.opacity(0.16), in: .rect(cornerRadius: 24))
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    CountingNumberTextDemo()
}
```

## Glitch Text

Colored copies of the text that jump and flicker in short glitch bursts.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/GlitchText/GlitchText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Colored copies of the text that jump and flicker in short bursts.
///
/// With Reduce Motion on, the copies rest in a still, slightly split position.
struct GlitchText: View {
    let text: String
    var firstColor: Color = .cyan
    var secondColor: Color = .pink

    /// Ticks per second while flickering, one burst lasts `burstTicks` out of every `cycleTicks`.
    private let ticksPerSecond = 12.0
    private let burstTicks = 10
    private let cycleTicks = 30

    @ScaledMetric(relativeTo: .largeTitle) private var maxOffset = 7.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1 / ticksPerSecond, paused: reduceMotion)) { context in
            let tick = Int(context.date.timeIntervalSinceReferenceDate * ticksPerSecond)
            let isBursting = !reduceMotion && tick % cycleTicks < burstTicks

            ZStack {
                layer(color: firstColor, tick: tick, seed: 1, restingOffset: -0.3, isBursting: isBursting)
                layer(color: secondColor, tick: tick, seed: 2, restingOffset: 0.3, isBursting: isBursting)
                Text(text)
            }
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(text)
    }

    private func layer(color: Color, tick: Int, seed: Double, restingOffset: Double, isBursting: Bool) -> some View {
        let x = isBursting ? (noise(tick, seed: seed) - 0.5) * 2 : restingOffset
        let y = isBursting ? (noise(tick, seed: seed + 10) - 0.5) * 0.8 : 0
        let isVisible = !isBursting || noise(tick, seed: seed + 20) > 0.2

        return Text(text)
            .accessibilityRepresentation { EmptyView() }
            .foregroundStyle(color)
            .offset(x: x * maxOffset, y: y * maxOffset)
            .opacity(isVisible ? 1 : 0)
    }

    /// A repeatable pseudo-random value in 0..<1.
    private func noise(_ tick: Int, seed: Double) -> Double {
        let value = sin(Double(tick) * 12.9898 + seed * 78.233) * 43_758.5453
        return value - value.rounded(.down)
    }
}

// MARK: - Demo

struct GlitchTextDemo: View {
    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(spacing: 18) {
                GlitchText(text: "GLITCH")
                    .font(.system(.largeTitle, design: .monospaced, weight: .black))
                    .scaleEffect(1.6)

                GlitchText(text: "SIGNAL LOST", firstColor: .green, secondColor: .purple)
                    .font(.system(.title3, design: .monospaced, weight: .bold))
                    .padding(.top, 36)
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    GlitchTextDemo()
}
```

## Glyph Wave Text

Text whose glyphs ride a travelling sine wave, drawn by a custom TextRenderer.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/GlyphWaveText/GlyphWaveText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Text whose glyphs ride a travelling sine wave.
///
/// With Reduce Motion on, the text sits still on its baseline.
struct GlyphWaveText: View {
    let text: String
    /// Full waves per second.
    var speed: Double = 0.8

    @ScaledMetric(relativeTo: .largeTitle) private var amplitude = 12.0
    @ScaledMetric(relativeTo: .largeTitle) private var wavelength = 170.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0, paused: reduceMotion)) { context in
            Text(text)
                .textRenderer(GlyphWaveTextRenderer(
                    phase: context.date.timeIntervalSinceReferenceDate * speed * 2 * .pi,
                    amplitude: reduceMotion ? 0 : amplitude,
                    wavelength: wavelength
                ))
        }
    }
}

struct GlyphWaveTextRenderer: TextRenderer {
    var phase: Double
    var amplitude: Double
    var wavelength: Double

    /// Room for the glyphs that rise or fall outside the text's own frame.
    var displayPadding: EdgeInsets {
        EdgeInsets(top: amplitude, leading: 0, bottom: amplitude, trailing: 0)
    }

    func draw(layout: Text.Layout, in context: inout GraphicsContext) {
        for line in layout {
            for run in line {
                for glyph in run {
                    let position = glyph.typographicBounds.rect.midX / wavelength * 2 * .pi

                    var glyphContext = context
                    glyphContext.translateBy(x: 0, y: sin(position - phase) * amplitude)
                    glyphContext.draw(glyph)
                }
            }
        }
    }
}

// MARK: - Demo

struct GlyphWaveTextDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.cyan, .blue, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            Image(systemName: "water.waves")
                .resizable()
                .scaledToFit()
                .fontWeight(.ultraLight)
                .padding(40)
                .foregroundStyle(.white.opacity(0.14))
                .accessibilityHidden(true)

            GlyphWaveText(text: "Riding the\nsine wave")
                .font(.system(.largeTitle, design: .rounded, weight: .heavy))
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .lineSpacing(18)
        }
    }
}

#Preview {
    GlyphWaveTextDemo()
}
```

## Highlighted Search Text

Text with every match of a search query highlighted, ignoring case and accents.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/HighlightedSearchText/HighlightedSearchText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Text with every match of a search query highlighted, ignoring case and accents.
struct HighlightedSearchText: View {
    let text: String
    let query: String
    var highlightColor: Color = .yellow
    var highlightedTextColor: Color = .black

    var body: some View {
        Text(HighlightedSearchTextMatcher.highlighted(
            text,
            query: query,
            background: highlightColor,
            foreground: highlightedTextColor
        ))
    }
}

enum HighlightedSearchTextMatcher {
    /// The non-overlapping matches of `query` in `text`, from first to last.
    static func matches(of query: String, in text: String) -> [Range<String.Index>] {
        let needle = query.trimmingCharacters(in: .whitespacesAndNewlines)
        guard !needle.isEmpty else { return [] }

        var found: [Range<String.Index>] = []
        var searchStart = text.startIndex

        while let match = text.range(
            of: needle,
            options: [.caseInsensitive, .diacriticInsensitive],
            range: searchStart..<text.endIndex
        ), !match.isEmpty {
            found.append(match)
            searchStart = match.upperBound
        }
        return found
    }

    static func highlighted(_ text: String, query: String, background: Color, foreground: Color) -> AttributedString {
        var result = AttributedString(text)

        for match in matches(of: query, in: text) {
            guard let range = Range(match, in: result) else { continue }
            result[range].backgroundColor = background
            result[range].foregroundColor = foreground
        }
        return result
    }
}

// MARK: - Demo

struct HighlightedSearchTextDemo: View {
    @State private var query = ""
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let queries = ["cafe", "MANANA", "nino"]
    private let passage = """
    El café de la mañana sabe mejor. Un CAFE largo, una cafetería pequeña \
    y un niño que pide más café. Mañana volverá el NIÑO a la misma cafeteria.
    """

    private var matchCount: Int {
        HighlightedSearchTextMatcher.matches(of: query, in: passage).count
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.mint, .teal], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 20) {
                HStack {
                    Image(systemName: "magnifyingglass")
                        .accessibilityHidden(true)
                    Text(query.isEmpty ? "Search" : query)
                        .foregroundStyle(query.isEmpty ? .secondary : .primary)
                    Spacer()
                    Text("\(matchCount) found")
                        .font(.subheadline)
                        .foregroundStyle(.secondary)
                }
                .font(.title3)
                .padding(14)
                .background(.thinMaterial, in: .capsule)

                HighlightedSearchText(text: passage, query: query)
                    .font(.title2)
                    .lineSpacing(6)
            }
            .padding(24)
            .background(.regularMaterial, in: .rect(cornerRadius: 28))
            .padding(20)
        }
        .task { await typeQueries() }
    }

    /// Stands in for someone typing into a search field.
    private func typeQueries() async {
        guard !reduceMotion else {
            query = "cafe"
            return
        }

        while !Task.isCancelled {
            for word in queries {
                for count in 0...word.count {
                    query = String(word.prefix(count))
                    try? await Task.sleep(for: .seconds(0.11))
                }
                try? await Task.sleep(for: .seconds(1))
            }
        }
    }
}

#Preview {
    HighlightedSearchTextDemo()
}
```

## Karaoke Lyrics Text

Lyrics that start dim and light up from the first letter to the last as they are sung.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/KaraokeLyricsText/KaraokeLyricsText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum KaraokeLyricsTextMath {
    /// How much of each line has been sung, from 0 to 1, when `progress` of the whole text has.
    ///
    /// Lines fill in order and a wider line takes longer, so the light moves at one speed.
    static func fills(widths: [Double], progress: Double) -> [Double] {
        let lengths = widths.map { $0.isFinite ? max($0, 0) : 0 }
        let total = lengths.reduce(0, +)
        guard total > 0, progress.isFinite else { return Array(repeating: 0, count: widths.count) }

        var remaining = min(max(progress, 0), 1) * total
        return lengths.map { length in
            guard length > 0 else { return 0 }
            let sung = min(remaining, length)
            remaining -= sung
            return sung / length
        }
    }

    /// The same fills without the sweep: a line lights up whole as soon as it starts.
    static func wholeLines(_ fills: [Double]) -> [Double] {
        fills.map { $0 > 0 ? 1 : 0 }
    }
}

/// Lyrics that light up as they are sung: the text starts dim and a brighter copy sweeps over it.
///
/// Set `progress` from 0 to 1 and animate it over the time the line takes. The text keeps its font,
/// color and alignment, wraps like any other, and follows the direction of its language.
/// With Reduce Motion on, each line lights up at once instead of filling.
struct KaraokeLyricsText: View {
    let text: String
    /// How much of the text has been sung, from 0 to 1.
    var progress: Double
    /// The opacity of the part that has not been sung yet.
    var restOpacity: Double = 0.35

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(text)
            .textRenderer(KaraokeLyricsTextRenderer(progress: progress, restOpacity: restOpacity, sweeps: !reduceMotion))
    }
}

struct KaraokeLyricsTextRenderer: TextRenderer {
    var progress: Double
    var restOpacity: Double
    var sweeps: Bool

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func draw(layout: Text.Layout, in context: inout GraphicsContext) {
        let lines = Array(layout)
        let filled = KaraokeLyricsTextMath.fills(widths: lines.map { Double($0.typographicBounds.rect.width) }, progress: progress)
        let fills = sweeps ? filled : KaraokeLyricsTextMath.wholeLines(filled)

        for (line, fill) in zip(lines, fills) {
            var rest = context
            rest.opacity = min(max(restOpacity, 0), 1)
            rest.draw(line)

            guard fill > 0 else { continue }

            // The sung part starts where the line starts to be read, which is the right edge in a right-to-left script.
            let bounds = line.typographicBounds.rect
            let width = bounds.width * fill
            let startsAtRight = line.first?.layoutDirection == .rightToLeft
            let sung = CGRect(x: startsAtRight ? bounds.maxX - width : bounds.minX, y: bounds.minY, width: width, height: bounds.height)

            var bright = context
            bright.clip(to: Path(sung))
            bright.draw(line)
        }
    }
}

// MARK: - Demo

struct KaraokeLyricsTextDemo: View {
    private let lines = [
        "City lights are calling",
        "We run where the night begins",
        "Hold on to the echo",
        "Until the morning sings",
    ]
    private let secondsPerLine = 2.2

    @State private var current = 0
    @State private var progress = 0.0

    var body: some View {
        VStack(alignment: .leading, spacing: 22) {
            Label("Night Run", systemImage: "music.mic")
                .font(.headline)
                .foregroundStyle(.white.opacity(0.7))
                .padding(.bottom, 8)

            ForEach(lines.indices, id: \.self) { index in
                KaraokeLyricsText(text: lines[index], progress: index < current ? 1 : (index == current ? progress : 0))
                    .font(.system(.largeTitle, design: .rounded, weight: .heavy))
                    .foregroundStyle(.white)
            }
        }
        .padding(28)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
        .background(LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .topLeading, endPoint: .bottomTrailing).ignoresSafeArea())
        .task { await sing() }
    }

    private func sing() async {
        while !Task.isCancelled {
            for index in lines.indices {
                current = index
                progress = 0
                withAnimation(.linear(duration: secondsPerLine)) { progress = 1 }
                try? await Task.sleep(for: .seconds(secondsPerLine + 0.25))
                guard !Task.isCancelled else { return }
            }
            try? await Task.sleep(for: .seconds(0.8))
            current = 0
            progress = 0
        }
    }
}

#Preview {
    KaraokeLyricsTextDemo()
}
```

## Marquee Text

A single line of text that scrolls horizontally only when it does not fit.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/MarqueeText/MarqueeText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A single line that scrolls horizontally, only when it does not fit.
///
/// With Reduce Motion on, a long line is truncated instead of scrolling.
struct MarqueeText: View {
    let text: String
    /// Points per second.
    var speed: Double = 42
    /// Seconds to wait at the start of each lap.
    var pause: Double = 1

    @ScaledMetric(relativeTo: .body) private var gap = 48.0
    @State private var textWidth = 0.0
    @State private var containerWidth = 0.0
    @State private var start = Date.now
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var scrolls: Bool {
        containerWidth > 0 && textWidth > containerWidth && speed > 0 && !reduceMotion
    }

    var body: some View {
        Text(text)
            .lineLimit(1)
            .opacity(scrolls ? 0 : 1)
            .frame(maxWidth: .infinity, alignment: .leading)
            .onGeometryChange(for: Double.self) { $0.size.width } action: { containerWidth = $0 }
            .background {
                Text(text)
                    .lineLimit(1)
                    .fixedSize()
                    .hidden()
                    .onGeometryChange(for: Double.self) { $0.size.width } action: { textWidth = $0 }
            }
            .overlay(alignment: .leading) {
                if scrolls { scrollingCopies }
            }
            .mask {
                if scrolls {
                    LinearGradient(
                        stops: [
                            .init(color: .clear, location: 0),
                            .init(color: .black, location: 0.03),
                            .init(color: .black, location: 0.92),
                            .init(color: .clear, location: 1),
                        ],
                        startPoint: .leading,
                        endPoint: .trailing
                    )
                } else {
                    Color.black
                }
            }
            .accessibilityElement(children: .ignore)
            .accessibilityLabel(text)
            .task(id: text) { start = .now }
    }

    /// The second copy follows the first, so the end of a lap looks just like its start.
    private var scrollingCopies: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 60.0)) { context in
            HStack(spacing: gap) {
                Text(text)
                Text(text)
            }
            .lineLimit(1)
            .fixedSize()
            .accessibilityRepresentation { EmptyView() }
            .offset(x: -offset(at: context.date))
        }
    }

    private func offset(at date: Date) -> Double {
        let lapDistance = textWidth + gap
        let lapDuration = pause + lapDistance / speed
        let timeInLap = date.timeIntervalSince(start).truncatingRemainder(dividingBy: lapDuration)
        return max(timeInLap - pause, 0) * speed
    }
}

// MARK: - Demo

struct MarqueeTextDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [.purple, .indigo, .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 24) {
                RoundedRectangle(cornerRadius: 32)
                    .fill(.linearGradient(colors: [.pink, .orange], startPoint: .topLeading, endPoint: .bottomTrailing))
                    .aspectRatio(1, contentMode: .fit)
                    .overlay {
                        Image(systemName: "music.note")
                            .resizable()
                            .scaledToFit()
                            .fontWeight(.semibold)
                            .padding(80)
                            .foregroundStyle(.white)
                    }
                    .accessibilityHidden(true)

                VStack(alignment: .leading, spacing: 6) {
                    MarqueeText(text: "The Very Long Song Title That Could Never Fit on One Line")
                        .font(.title2.bold())
                        .foregroundStyle(.white)

                    MarqueeText(text: "Short and still")
                        .font(.title3)
                        .foregroundStyle(.white.opacity(0.7))
                }
            }
            .padding(32)
        }
    }
}

#Preview {
    MarqueeTextDemo()
}
```

## Read More Text

A paragraph truncated with a fade that expands in place when tapped.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/ReadMoreText/ReadMoreText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A paragraph truncated with a fade that expands in place when tapped.
///
/// The button only appears when the text does not fit. With Reduce Motion on, the
/// paragraph changes height at once. VoiceOver always reads the whole paragraph.
struct ReadMoreText: View {
    let text: String
    var collapsedLines = 3
    var moreLabel = "Read more"
    var lessLabel = "Show less"

    @State private var isExpanded = false
    @State private var fullHeight: CGFloat = 0
    @State private var collapsedHeight: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private let touchPadding: CGFloat = 13

    private var isTruncated: Bool { fullHeight > collapsedHeight + 1 && collapsedHeight > 0 }
    private var isFaded: Bool { isTruncated && !isExpanded }

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            Text(text)
                .fixedSize(horizontal: false, vertical: true)
                .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { fullHeight = $0 }
                .background { collapsedMeasure }
                .frame(height: isTruncated ? (isExpanded ? fullHeight : collapsedHeight) : nil, alignment: .top)
                .clipped()
                .mask { fade }

            if isTruncated {
                Button {
                    isExpanded.toggle()
                } label: {
                    // A line of text is too short to hit. The padding widens what answers to a
                    // touch, and the same padding taken back keeps the layout as it was.
                    Text(isExpanded ? lessLabel : moreLabel)
                        .padding(.vertical, touchPadding)
                        .contentShape(.rect)
                        .padding(.vertical, -touchPadding)
                }
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(.tint)
            }
        }
        .animation(reduceMotion ? nil : .smooth(duration: 0.4), value: isExpanded)
    }

    // A hidden copy, limited to the collapsed lines, tells how tall the collapsed text is.
    private var collapsedMeasure: some View {
        Text(text)
            .lineLimit(max(collapsedLines, 1))
            .fixedSize(horizontal: false, vertical: true)
            .hidden()
            .onGeometryChange(for: CGFloat.self) { $0.size.height } action: { collapsedHeight = $0 }
            .accessibilityRepresentation { EmptyView() }
    }

    private var fade: LinearGradient {
        LinearGradient(
            stops: [
                .init(color: .black, location: 0),
                .init(color: .black, location: isFaded ? 0.55 : 1),
                .init(color: isFaded ? .clear : .black, location: 1),
            ],
            startPoint: .top,
            endPoint: .bottom
        )
    }
}

// MARK: - Demo

struct ReadMoreTextDemo: View {
    private let story = "The sea looks blue because water absorbs the red end of the spectrum and scatters the blue back towards your eyes. The deeper the water, the more red is lost, which is why the open ocean looks so much darker than a shallow bay. Near the coast, sand and algae add greens and browns, and a bright sky adds its own reflection to the surface."

    var body: some View {
        ScrollView {
            VStack(alignment: .leading, spacing: 16) {
                RoundedRectangle(cornerRadius: 24)
                    .fill(LinearGradient(colors: [.cyan, .blue, .indigo], startPoint: .topLeading, endPoint: .bottomTrailing))
                    .frame(height: 220)
                    .overlay {
                        Image(systemName: "water.waves")
                            .font(.largeTitle)
                            .imageScale(.large)
                            .foregroundStyle(.white)
                    }
                    .accessibilityHidden(true)

                Text("Why the sea is blue")
                    .font(.title.bold())

                ReadMoreText(text: story)
                    .font(.body)
                    .foregroundStyle(.secondary)
            }
            .padding(20)
        }
    }
}

#Preview {
    ReadMoreTextDemo()
}
```

## Rotating Words Text

Words that take turns in the same spot, each one pushing the last out of the way.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/RotatingWordsText/RotatingWordsText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Words that take turns in the same spot, each one pushing the last out of the way.
///
/// It reserves the width of the longest word, so nothing around it moves.
/// With Reduce Motion on, the words crossfade.
struct RotatingWordsText: View {
    let words: [String]
    /// Seconds each word stays on screen.
    var interval: Double = 1.6

    @State private var index = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var transition: AnyTransition {
        reduceMotion ? .opacity : .push(from: .bottom)
    }

    var body: some View {
        ZStack(alignment: .leading) {
            ForEach(words.indices, id: \.self) { position in
                Text(words[position]).hidden()
            }

            if !words.isEmpty {
                Text(words[index % words.count])
                    .id(index)
                    .transition(transition)
            }
        }
        .clipped()
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(words.joined(separator: ", "))
        .task(id: words) { await rotate() }
    }

    private func rotate() async {
        guard words.count > 1 else { return }

        while !Task.isCancelled {
            try? await Task.sleep(for: .seconds(interval))
            guard !Task.isCancelled else { return }

            withAnimation(.snappy(duration: 0.45)) {
                index = (index + 1) % words.count
            }
        }
    }
}

// MARK: - Demo

struct RotatingWordsTextDemo: View {
    var body: some View {
        ZStack {
            LinearGradient(colors: [Color(white: 0.12), .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(alignment: .leading, spacing: 4) {
                Text("Made for")
                    .foregroundStyle(.white)

                RotatingWordsText(words: ["designers", "developers", "dreamers", "everyone"], interval: 1.2)
                    .foregroundStyle(.linearGradient(colors: [.orange, .pink], startPoint: .leading, endPoint: .trailing))
            }
            .font(.system(.largeTitle, design: .rounded, weight: .heavy))
            .padding(32)
        }
    }
}

#Preview {
    RotatingWordsTextDemo()
}
```

## Scramble Text

Random characters that settle from left to right into the final text.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/ScrambleText/ScrambleText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Random characters that settle, left to right, into the final text.
///
/// It plays again when `text` changes. With Reduce Motion on, the text appears directly.
struct ScrambleText: View {
    let text: String
    var duration: Double = 1.2
    var characters: [Character] = ScrambleTextScrambler.defaultCharacters

    @State private var displayed: String?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(displayed ?? text)
            .monospaced()
            .opacity(displayed == nil ? 0 : 1)
            .accessibilityLabel(text)
            .task(id: text) { await play() }
    }

    private func play() async {
        guard !reduceMotion else {
            displayed = text
            return
        }

        var generator = SystemRandomNumberGenerator()
        let steps = max(Int(duration * 30), 1)

        for step in 0...steps {
            guard !Task.isCancelled else { return }
            displayed = ScrambleTextScrambler.scrambled(
                text,
                progress: Double(step) / Double(steps),
                characters: characters,
                using: &generator
            )
            try? await Task.sleep(for: .seconds(duration / Double(steps)))
        }
    }
}

enum ScrambleTextScrambler {
    static let defaultCharacters = Array("ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*@")

    /// Keeps the first `progress` share of `text` and replaces the rest with random
    /// characters. Whitespace is kept, so words hold their shape and lines wrap the same.
    static func scrambled(
        _ text: String,
        progress: Double,
        characters: [Character] = defaultCharacters,
        using generator: inout some RandomNumberGenerator
    ) -> String {
        let letters = Array(text)
        let clamped = progress > 0 ? min(progress, 1) : 0
        let settled = Int(clamped * Double(letters.count))

        var result = ""
        for (index, letter) in letters.enumerated() {
            let isSettled = index < settled || letter.isWhitespace
            result.append(isSettled ? letter : characters.randomElement(using: &generator) ?? letter)
        }
        return result
    }
}

// MARK: - Demo

struct ScrambleTextDemo: View {
    @State private var index = 0

    private let phrases = ["ACCESS GRANTED", "DECRYPTING DATA", "SIGNAL ACQUIRED"]

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color(red: 0, green: 0.16, blue: 0.12), .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 20) {
                Image(systemName: "lock.open.fill")
                    .font(.largeTitle)
                    .accessibilityHidden(true)

                ScrambleText(text: phrases[index])
                    .font(.largeTitle.bold())
            }
            .foregroundStyle(.mint)
            .multilineTextAlignment(.center)
            .padding(24)
        }
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(2.4))
                index = (index + 1) % phrases.count
            }
        }
    }
}

#Preview {
    ScrambleTextDemo()
}
```

## Shimmer Text

Text with a band of light that sweeps across its letters through a mask.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/ShimmerText/ShimmerText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A band of light that sweeps across the letters, masked by the text itself.
///
/// With Reduce Motion on, the text is drawn plainly in the highlight color.
struct ShimmerText: View {
    let text: String
    var baseColor: Color = .secondary
    var highlightColor: Color = .primary
    /// Seconds for one sweep.
    var duration: Double = 2.2

    /// Half the width of the band of light, as a fraction of the text's width.
    private let bandWidth = 0.3

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(text)
            .foregroundStyle(reduceMotion ? highlightColor : baseColor)
            .overlay {
                if !reduceMotion {
                    TimelineView(.animation(minimumInterval: 1.0 / 60.0)) { context in
                        band(at: context.date)
                    }
                    .mask { Text(text).foregroundStyle(.black) }
                    .accessibilityHidden(true)
                }
            }
    }

    /// Start and end points beyond 0...1 place the band off to the side, between sweeps.
    private func band(at date: Date) -> LinearGradient {
        let cycle = date.timeIntervalSinceReferenceDate.truncatingRemainder(dividingBy: duration) / duration
        let center = -bandWidth + (1 + 2 * bandWidth) * cycle

        return LinearGradient(
            colors: [.clear, highlightColor, .clear],
            startPoint: UnitPoint(x: center - bandWidth, y: 0.5),
            endPoint: UnitPoint(x: center + bandWidth, y: 0.5)
        )
    }
}

// MARK: - Demo

struct ShimmerTextDemo: View {
    private let dimmed = Color.white.opacity(0.35)

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color(white: 0.16), .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 28) {
                ShimmerText(text: "Shimmer", baseColor: dimmed, highlightColor: .white)
                    .font(.system(.largeTitle, design: .rounded, weight: .black))
                    .scaleEffect(1.5)

                ShimmerText(text: "slide to unlock", baseColor: dimmed, highlightColor: .white, duration: 1.8)
                    .font(.title3.weight(.medium))

                Label {
                    ShimmerText(text: "Writing your summary...", baseColor: .purple.opacity(0.5), highlightColor: .white)
                } icon: {
                    Image(systemName: "sparkles")
                        .foregroundStyle(.purple)
                        .accessibilityHidden(true)
                }
                .font(.headline)
                .padding(.horizontal, 20)
                .padding(.vertical, 14)
                .background(.white.opacity(0.08), in: .capsule)
            }
            .padding(24)
        }
    }
}

#Preview {
    ShimmerTextDemo()
}
```

## Streaming Text

Text that arrives in chunks, like the answer of a language model, and fades each new part in from its first letter to its last.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/StreamingText/StreamingText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum StreamingTextMath {
    /// How opaque a character is when `visible` of them have arrived: whole once the front has
    /// passed it by `fade` characters, clear ahead of the front and in between on the way.
    static func opacity(of index: Double, visible: Double, fade: Double) -> Double {
        guard fade > 0 else { return index < visible ? 1 : 0 }
        return min(max((visible - index) / fade, 0), 1)
    }

    /// How long the front takes to cross `characters`: short for a word, capped for a long
    /// chunk, so a burst of text never keeps the reader waiting.
    static func duration(for characters: Double, charactersPerSecond: Double, limit: ClosedRange<Double> = 0.15...1.5) -> Double {
        guard characters > 0, charactersPerSecond > 0 else { return limit.lowerBound }
        return min(max(characters / charactersPerSecond, limit.lowerBound), limit.upperBound)
    }

    /// How many characters two texts have in common at their start.
    static func sharedPrefix(_ first: String, _ second: String) -> Int {
        zip(first, second).prefix { $0 == $1 }.count
    }
}

/// Text that arrives in chunks, like the answer of a language model: every time `text` grows,
/// the new part fades in from its first letter to its last instead of popping in.
///
/// The speed evens out the chunks, so a burst of words reads as smoothly as a single one.
/// Text that is replaced rather than extended starts again from where the two differ.
/// With Reduce Motion on, new text shows at once.
struct StreamingText: View {
    let text: String
    var charactersPerSecond = 80.0
    /// How many characters the soft edge of the new text spans.
    var fade = 10.0

    @State private var visible = 0.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(text)
            .textRenderer(StreamingTextRenderer(visible: visible, characters: text.count, fade: fade, isInstant: reduceMotion))
            .onChange(of: text, initial: true) { old, new in
                let kept = Double(StreamingTextMath.sharedPrefix(old, new))
                if kept < Double(old.count) { visible = min(visible, kept) }

                // The front ends past the last character, so that one becomes whole too.
                let target = Double(new.count) + fade
                let duration = StreamingTextMath.duration(for: target - visible, charactersPerSecond: charactersPerSecond)
                withAnimation(.linear(duration: duration)) { visible = target }
            }
    }
}

struct StreamingTextRenderer: TextRenderer {
    var visible: Double
    var characters: Int
    var fade: Double
    var isInstant: Bool

    var animatableData: Double {
        get { visible }
        set { visible = newValue }
    }

    func draw(layout: Text.Layout, in context: inout GraphicsContext) {
        let slices = layout.flatMap { line in line.flatMap { run in Array(run) } }
        // A character can be more than one glyph, or share one, so the glyphs are spread over the characters.
        let charactersPerSlice = slices.isEmpty ? 1 : Double(max(characters, 1)) / Double(slices.count)

        for (index, slice) in slices.enumerated() {
            let opacity = isInstant ? 1 : StreamingTextMath.opacity(of: Double(index) * charactersPerSlice, visible: visible, fade: fade)
            guard opacity > 0 else { continue }

            var copy = context
            copy.opacity = opacity
            copy.draw(slice)
        }
    }
}

// MARK: - Demo

struct StreamingTextDemo: View {
    private let answer = "Sourdough needs time more than effort. Mix flour, water, salt and a spoonful of starter in the evening, fold the dough a few times before bed, and let it rise overnight. In the morning, shape it, rest it for an hour and bake it in a hot pot with the lid on. The crust comes out crisp and the crumb stays open and soft."

    @State private var text = ""
    @State private var run = 0

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("How do I bake sourdough?")
                .padding(.horizontal, 14)
                .padding(.vertical, 10)
                .foregroundStyle(.white)
                .background(.blue, in: .rect(cornerRadius: 20))
                .frame(maxWidth: .infinity, alignment: .trailing)

            StreamingText(text: text)
                .font(.body)
                .lineSpacing(4)
                .frame(maxWidth: .infinity, alignment: .leading)

            Spacer()

            Button("Ask Again", systemImage: "arrow.clockwise") {
                run += 1
            }
            .buttonStyle(.bordered)
            .frame(maxWidth: .infinity)
        }
        .padding(20)
        .task(id: run) {
            // Stands in for a model that sends a few words at a time, at an uneven pace.
            text = ""
            var words = answer.split(separator: " ")[...]
            while !words.isEmpty, !Task.isCancelled {
                try? await Task.sleep(for: .milliseconds(Int.random(in: 120...380)))
                let chunk = words.prefix(Int.random(in: 2...6))
                words = words.dropFirst(chunk.count)
                if !Task.isCancelled { text += (text.isEmpty ? "" : " ") + chunk.joined(separator: " ") }
            }
        }
    }
}

#Preview {
    StreamingTextDemo()
}
```

## Text Blur Reveal

Text that appears line by line, coming into focus as it slides up, drawn by a custom TextRenderer.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/TextBlurReveal/TextBlurReveal.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Reveals text line by line: each line fades in, comes into focus and slides up.
///
/// Animate `progress` from 0 to 1 with `withAnimation`. With Reduce Motion on, the text is shown in full.
struct TextBlurReveal: View {
    let text: String
    var progress: Double = 1

    @ScaledMetric(relativeTo: .title) private var blurRadius = 12.0
    @ScaledMetric(relativeTo: .title) private var rise = 18.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        Text(text)
            .textRenderer(TextBlurRevealRenderer(
                progress: reduceMotion ? 1 : progress,
                blurRadius: blurRadius,
                rise: rise
            ))
    }
}

struct TextBlurRevealRenderer: TextRenderer {
    var progress: Double
    var blurRadius: Double
    var rise: Double

    /// How much of each line's animation overlaps with the next one.
    private let overlap = 0.55

    var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    /// Room for the blur and the slide, which draw outside the text's own frame.
    var displayPadding: EdgeInsets {
        let margin = blurRadius * 2
        return EdgeInsets(top: margin, leading: margin, bottom: margin + rise, trailing: margin)
    }

    func draw(layout: Text.Layout, in context: inout GraphicsContext) {
        for (index, line) in layout.enumerated() {
            let reveal = lineProgress(index: index, count: layout.count)

            var lineContext = context
            lineContext.opacity = reveal
            lineContext.addFilter(.blur(radius: (1 - reveal) * blurRadius))
            lineContext.translateBy(x: 0, y: (1 - reveal) * rise)
            lineContext.draw(line)
        }
    }

    private func lineProgress(index: Int, count: Int) -> Double {
        let step = 1 - overlap
        let lineDuration = 1 / (Double(count - 1) * step + 1)
        let lineStart = Double(index) * step * lineDuration
        return min(max((progress - lineStart) / lineDuration, 0), 1)
    }
}

// MARK: - Demo

struct TextBlurRevealDemo: View {
    @State private var progress = 0.0

    private let poem = """
    The morning arrives
    without asking anyone,
    one quiet line
    after another,
    until the page is full.
    """

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            TextBlurReveal(text: poem, progress: progress)
                .font(.system(.title, design: .serif, weight: .medium))
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .lineSpacing(10)
                .padding(32)
        }
        .task {
            while !Task.isCancelled {
                withAnimation(.easeOut(duration: 2.2)) { progress = 1 }
                try? await Task.sleep(for: .seconds(3.4))
                progress = 0
                try? await Task.sleep(for: .seconds(0.2))
            }
        }
    }
}

#Preview {
    TextBlurRevealDemo()
}
```

## Typewriter Text

Text that types itself one character at a time, followed by a blinking cursor.

Category: Text. Minimum: iOS 18.0. Path: Components/Text/TypewriterText/TypewriterText.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Types its text one character at a time, followed by a blinking cursor.
///
/// It restarts when `text` changes. With Reduce Motion on, the text appears in full with no cursor.
struct TypewriterText: View {
    let text: String
    var charactersPerSecond: Double = 20
    var cursorColor: Color = .accentColor

    @State private var started: (text: String, date: Date)?
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        TimelineView(.animation(minimumInterval: 1.0 / 30.0, paused: reduceMotion)) { context in
            Text(typed(at: context.date))
        }
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(text)
        .task(id: text) { started = (text, .now) }
    }

    /// The characters not typed yet stay in the string as clear text, so lines wrap once and never jump.
    private func typed(at date: Date) -> AttributedString {
        guard !reduceMotion else { return AttributedString(text) }

        let elapsed = started.flatMap { $0.text == text ? date.timeIntervalSince($0.date) : nil } ?? 0
        let count = TypewriterTextProgress.visibleCount(
            elapsed: elapsed,
            charactersPerSecond: charactersPerSecond,
            total: text.count
        )
        let isTyping = count < text.count

        var cursor = AttributedString("|")
        cursor.foregroundColor = isTyping || Int(elapsed * 2).isMultiple(of: 2) ? cursorColor : .clear

        var remaining = AttributedString(String(text.dropFirst(count)))
        remaining.foregroundColor = .clear

        return AttributedString(String(text.prefix(count))) + cursor + remaining
    }
}

enum TypewriterTextProgress {
    /// How many characters are visible after `elapsed` seconds, from 0 to `total`.
    static func visibleCount(elapsed: TimeInterval, charactersPerSecond: Double, total: Int) -> Int {
        guard total > 0 else { return 0 }
        guard charactersPerSecond > 0 else { return total }

        let typed = (elapsed * charactersPerSecond).rounded(.down)
        guard typed > 0 else { return 0 }
        return typed >= Double(total) ? total : Int(typed)
    }
}

// MARK: - Demo

struct TypewriterTextDemo: View {
    @State private var index = 0

    private let lines = [
        "$ swift build\nCompiling your ideas...",
        "$ swift test\nAll tests passed, no bugs today.",
        "$ git push\nShipped before lunch.",
    ]

    var body: some View {
        ZStack {
            Color.black.ignoresSafeArea()

            VStack(alignment: .leading, spacing: 16) {
                HStack(spacing: 8) {
                    ForEach([Color.red, .yellow, .green], id: \.self) { color in
                        Circle().fill(color).frame(width: 12, height: 12)
                    }
                }
                .accessibilityHidden(true)

                TypewriterText(text: lines[index], cursorColor: .green)
                    .font(.system(.title2, design: .monospaced, weight: .medium))
                    .foregroundStyle(.green)
                    .frame(maxWidth: .infinity, minHeight: 160, alignment: .topLeading)
            }
            .padding(24)
            .background(.white.opacity(0.08), in: .rect(cornerRadius: 20))
            .padding(20)
        }
        .task {
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(3.2))
                index = (index + 1) % lines.count
            }
        }
    }
}

#Preview {
    TypewriterTextDemo()
}
```

## Collapsing Bottom Bar

A bottom toolbar that shrinks to a pill while scrolling down and expands back when scrolling up.

Category: Toolbars. Minimum: iOS 18.0. Path: Components/Toolbars/CollapsingBottomBar/CollapsingBottomBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct CollapsingBottomBarItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let action: () -> Void
}

/// Decides when the bar collapses. A change of direction must travel past a threshold,
/// so small movements of the finger do not make the bar flicker.
struct CollapsingBottomBarState: Equatable {
    private(set) var isCollapsed = false
    private var anchor: CGFloat = 0

    mutating func update(offset: CGFloat, threshold: CGFloat) {
        guard offset > 0 else {
            isCollapsed = false
            anchor = 0
            return
        }

        let travel = offset - anchor
        let limit = max(threshold, 0)
        if isCollapsed ? travel < -limit : travel > limit {
            isCollapsed.toggle()
            anchor = offset
        } else if isCollapsed ? travel > 0 : travel < 0 {
            anchor = offset
        }
    }

    /// Removes the rubber band at both ends, which would otherwise look like a change of direction.
    static func clampedOffset(offsetY: CGFloat, topInset: CGFloat, bottomInset: CGFloat, contentHeight: CGFloat, containerHeight: CGFloat) -> CGFloat {
        let maxOffset = max(contentHeight + topInset + bottomInset - containerHeight, 0)
        return min(max(offsetY + topInset, 0), maxOffset)
    }
}

/// A bottom bar that shrinks to a pill while scrolling down and expands when scrolling up.
///
/// Apply it to a `ScrollView` with `.collapsingBottomBar(items:)`. With Reduce Motion on,
/// the bar changes size at once.
struct CollapsingBottomBar: ViewModifier {
    let items: [CollapsingBottomBarItem]

    @State private var state = CollapsingBottomBarState()
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .onScrollGeometryChange(for: CGFloat.self) { geometry in
                CollapsingBottomBarState.clampedOffset(
                    offsetY: geometry.contentOffset.y,
                    topInset: geometry.contentInsets.top,
                    bottomInset: geometry.contentInsets.bottom,
                    contentHeight: geometry.contentSize.height,
                    containerHeight: geometry.containerSize.height
                )
            } action: { _, newValue in
                state.update(offset: newValue, threshold: 24)
            }
            .safeAreaInset(edge: .bottom, spacing: 0) {
                CollapsingBottomBarSlot(items: items, isCollapsed: state.isCollapsed)
                    // The labels are short. The slot reads its height under this cap, which keeps every action on screen.
                    .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
            }
            .animation(reduceMotion ? nil : .snappy(duration: 0.35), value: state.isCollapsed)
    }
}

private struct CollapsingBottomBarSlot: View {
    let items: [CollapsingBottomBarItem]
    let isCollapsed: Bool

    @ScaledMetric(relativeTo: .caption2) private var slotHeight = 86.0

    var body: some View {
        // A fixed slot keeps the inset stable, so the bar's own resizing cannot move the scroll offset.
        bar.frame(height: slotHeight, alignment: .bottom)
    }

    private var bar: some View {
        HStack(spacing: isCollapsed ? 6 : 0) {
            ForEach(items) { item in
                Button(action: item.action) {
                    VStack(spacing: 3) {
                        Image(systemName: item.systemImage)
                            .font(.title3)

                        if !isCollapsed {
                            Text(item.title)
                                .font(.caption2)
                        }
                    }
                    .frame(minWidth: 44, maxWidth: isCollapsed ? nil : .infinity, minHeight: 44)
                    .contentShape(.rect)
                }
                .buttonStyle(.plain)
                .accessibilityLabel(item.title)
            }
        }
        .padding(.horizontal, isCollapsed ? 10 : 14)
        .padding(.vertical, 8)
        .background(.regularMaterial, in: .capsule)
        .shadow(color: .black.opacity(0.15), radius: 12, y: 6)
        .padding(.horizontal, 20)
        .padding(.bottom, 6)
    }
}

extension View {
    func collapsingBottomBar(items: [CollapsingBottomBarItem]) -> some View {
        modifier(CollapsingBottomBar(items: items))
    }
}

// MARK: - Demo

struct CollapsingBottomBarDemo: View {
    @State private var lastAction = "Scroll to collapse the bar"

    private var items: [CollapsingBottomBarItem] {
        [
            CollapsingBottomBarItem(id: "home", title: "Home", systemImage: "house.fill") { lastAction = "Home" },
            CollapsingBottomBarItem(id: "search", title: "Search", systemImage: "magnifyingglass") { lastAction = "Search" },
            CollapsingBottomBarItem(id: "add", title: "Add", systemImage: "plus.circle.fill") { lastAction = "Add" },
            CollapsingBottomBarItem(id: "inbox", title: "Inbox", systemImage: "tray.fill") { lastAction = "Inbox" },
        ]
    }

    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 14) {
                Text(lastAction)
                    .font(.title.bold())

                ForEach(0..<20, id: \.self) { index in
                    RoundedRectangle(cornerRadius: 20)
                        .fill(LinearGradient(colors: [.orange, .pink], startPoint: .leading, endPoint: .trailing))
                        .hueRotation(.degrees(Double(index) * 18))
                        .frame(height: 110)
                        .accessibilityHidden(true)
                }
            }
            .padding(20)
        }
        .collapsingBottomBar(items: items)
    }
}

#Preview {
    CollapsingBottomBarDemo()
}
```

## Floating Dock Bar

A row of icons that magnify under the finger, in the style of the macOS dock.

Category: Toolbars. Minimum: iOS 18.0. Path: Components/Toolbars/FloatingDockBar/FloatingDockBar.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

struct FloatingDockBarItem: Identifiable {
    let id: String
    let title: LocalizedStringResource
    let systemImage: String
    let colors: [Color]
    let action: () -> Void
}

enum FloatingDockBarMath {
    /// Grows smoothly from 1 at `spread` away from the finger to `maxScale` right under it.
    static func scale(distance: CGFloat, spread: CGFloat, maxScale: CGFloat) -> CGFloat {
        guard spread > 0, maxScale > 1 else { return 1 }
        let normalized = min(abs(distance) / spread, 1)
        let falloff = cos(normalized * .pi / 2)
        return 1 + (maxScale - 1) * falloff * falloff
    }

    /// Shrinks the icons when they would not all fit in the space available.
    static func iconSize(preferred: CGFloat, available: CGFloat, count: Int, spacing: CGFloat, padding: CGFloat) -> CGFloat {
        guard count > 0, available > 0 else { return max(preferred, 0) }
        let usable = available - 2 * padding - CGFloat(count - 1) * spacing
        return max(min(preferred, usable / CGFloat(count)), 20)
    }

    static func centerX(index: Int, iconSize: CGFloat, spacing: CGFloat) -> CGFloat {
        iconSize / 2 + CGFloat(index) * (iconSize + spacing)
    }
}

/// A row of icons that magnify under the finger, in the style of the macOS dock.
///
/// With Reduce Motion on, the magnification is small and has no spring. The dock only
/// holds icons, so it stops growing past the larger text sizes.
struct FloatingDockBar: View {
    let items: [FloatingDockBarItem]
    var maxScale: CGFloat = 1.6

    var body: some View {
        FloatingDockBarStage(items: items, maxScale: maxScale)
            // The stage reads its icon size under this cap.
            .dynamicTypeSize(...DynamicTypeSize.xxxLarge)
    }
}

private struct FloatingDockBarStage: View {
    let items: [FloatingDockBarItem]
    let maxScale: CGFloat

    private let spacing: CGFloat = 12
    private let padding: CGFloat = 12

    @GestureState private var fingerX: CGFloat?
    @State private var availableWidth: CGFloat = 0
    @ScaledMetric(relativeTo: .title2) private var preferredIconSize = 56.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    private var effectiveMaxScale: CGFloat { reduceMotion ? min(maxScale, 1.15) : maxScale }

    private var rowWidth: CGFloat {
        CGFloat(items.count) * iconSize + CGFloat(max(items.count - 1, 0)) * spacing
    }

    private var iconSize: CGFloat {
        FloatingDockBarMath.iconSize(preferred: preferredIconSize, available: availableWidth, count: items.count, spacing: spacing, padding: padding)
    }

    var body: some View {
        HStack(alignment: .bottom, spacing: spacing) {
            ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                iconButton(item, scale: scale(at: index))
                    .zIndex(Double(scale(at: index)))
            }
        }
        // Simultaneous, so the buttons inside keep working for taps and VoiceOver.
        .simultaneousGesture(
            DragGesture(minimumDistance: 0).updating($fingerX) { value, state, _ in
                // Gestures report screen points, but the row of icons mirrors in right-to-left layouts.
                state = layoutDirection == .rightToLeft ? rowWidth - value.location.x : value.location.x
            }
        )
        .padding(padding)
        .background(.ultraThinMaterial, in: .rect(cornerRadius: 26))
        .padding(.top, iconSize * max(effectiveMaxScale - 1, 0))
        // minWidth 0 makes this the width on offer, even while the icons are too wide for it.
        .frame(minWidth: 0, maxWidth: .infinity)
        .onGeometryChange(for: CGFloat.self) { $0.size.width } action: { availableWidth = $0 }
        .animation(reduceMotion ? nil : .spring(response: 0.25, dampingFraction: 0.72), value: fingerX)
    }

    private func scale(at index: Int) -> CGFloat {
        guard let fingerX else { return 1 }
        let center = FloatingDockBarMath.centerX(index: index, iconSize: iconSize, spacing: spacing)
        return FloatingDockBarMath.scale(distance: fingerX - center, spread: (iconSize + spacing) * 2.2, maxScale: effectiveMaxScale)
    }

    private func iconButton(_ item: FloatingDockBarItem, scale: CGFloat) -> some View {
        Button(action: item.action) {
            RoundedRectangle(cornerRadius: iconSize * 0.25)
                .fill(LinearGradient(colors: item.colors, startPoint: .topLeading, endPoint: .bottomTrailing))
                .frame(width: iconSize, height: iconSize)
                .overlay {
                    Image(systemName: item.systemImage)
                        .font(.title2)
                        .foregroundStyle(.white)
                }
        }
        .buttonStyle(.plain)
        .scaleEffect(scale, anchor: .bottom)
        .accessibilityLabel(item.title)
    }
}

// MARK: - Demo

struct FloatingDockBarDemo: View {
    @State private var opened = "Drag across the dock"

    private var items: [FloatingDockBarItem] {
        [
            FloatingDockBarItem(id: "mail", title: "Mail", systemImage: "envelope.fill", colors: [.cyan, .blue]) { opened = "Mail" },
            FloatingDockBarItem(id: "photos", title: "Photos", systemImage: "photo.fill", colors: [.yellow, .orange]) { opened = "Photos" },
            FloatingDockBarItem(id: "music", title: "Music", systemImage: "music.note", colors: [.pink, .red]) { opened = "Music" },
            FloatingDockBarItem(id: "notes", title: "Notes", systemImage: "note.text", colors: [.mint, .green]) { opened = "Notes" },
            FloatingDockBarItem(id: "settings", title: "Settings", systemImage: "gearshape.fill", colors: [.gray, .indigo]) { opened = "Settings" },
        ]
    }

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            FloatingDockBar(items: items)
                .padding(.horizontal, 16)
        }
        .overlay(alignment: .top) {
            Text(opened)
                .font(.largeTitle.bold())
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .padding(.top, 60)
        }
    }
}

#Preview {
    FloatingDockBarDemo()
}
```

## Blur Fade Transition

A custom transition that combines blur, fade and scale, available as .blurFade.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/BlurFadeTransition/BlurFadeTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A transition that blurs, fades and scales a view. Use it as `.transition(.blurFade)`.
///
/// With Reduce Motion on, the view only fades.
struct BlurFadeTransition: Transition {
    var radius: CGFloat = 18
    var scale: CGFloat = 0.9

    func body(content: Content, phase: TransitionPhase) -> some View {
        content.modifier(BlurFadeEffect(radius: radius, scale: scale, isIdentity: phase.isIdentity))
    }
}

extension Transition where Self == BlurFadeTransition {
    static var blurFade: BlurFadeTransition { BlurFadeTransition() }

    static func blurFade(radius: CGFloat, scale: CGFloat = 0.9) -> BlurFadeTransition {
        BlurFadeTransition(radius: radius, scale: scale)
    }
}

// The effect lives in a view modifier so it can read the environment.
private struct BlurFadeEffect: ViewModifier {
    let radius: CGFloat
    let scale: CGFloat
    let isIdentity: Bool

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .blur(radius: isIdentity || reduceMotion ? 0 : radius)
            .scaleEffect(isIdentity || reduceMotion ? 1 : scale)
            .opacity(isIdentity ? 1 : 0)
    }
}

// MARK: - Demo

struct BlurFadeTransitionDemo: View {
    @State private var isShown = true

    var body: some View {
        ZStack {
            LinearGradient(colors: [.black, .indigo], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            if isShown {
                VStack(spacing: 14) {
                    Image(systemName: "moon.stars.fill")
                        .font(.largeTitle)
                        .imageScale(.large)
                        .symbolRenderingMode(.hierarchical)
                        .accessibilityHidden(true)

                    Text("Good night")
                        .font(.system(.largeTitle, design: .rounded, weight: .bold))

                    Text("Sleep mode starts in ten minutes.")
                        .font(.callout)
                        .opacity(0.8)
                }
                .foregroundStyle(.white)
                .multilineTextAlignment(.center)
                .padding(36)
                .frame(maxWidth: .infinity)
                .background(.white.opacity(0.12), in: .rect(cornerRadius: 32))
                .padding(28)
                .transition(.blurFade)
            }
        }
        .task {
            while (try? await Task.sleep(for: .seconds(1.3))) != nil {
                withAnimation(.smooth(duration: 0.6)) { isShown.toggle() }
            }
        }
    }
}

#Preview {
    BlurFadeTransitionDemo()
}
```

## Circle Reveal Transition

A custom transition that reveals a view through a circular mask growing from a point.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/CircleRevealTransition/CircleRevealTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A transition that reveals a view through a circle growing from a point.
/// Use it as `.transition(.circleReveal(from: .bottomTrailing))`.
///
/// With Reduce Motion on, the view fades instead.
struct CircleRevealTransition: Transition {
    var origin: UnitPoint = .center

    func body(content: Content, phase: TransitionPhase) -> some View {
        content.modifier(CircleRevealEffect(origin: origin, isIdentity: phase.isIdentity))
    }
}

extension Transition where Self == CircleRevealTransition {
    static func circleReveal(from origin: UnitPoint = .center) -> CircleRevealTransition {
        CircleRevealTransition(origin: origin)
    }
}

nonisolated enum CircleRevealTransitionGeometry {
    /// The radius of the smallest circle centered on `origin` that covers the whole of `size`.
    static func coverRadius(from origin: UnitPoint, in size: CGSize) -> CGFloat {
        let horizontal = max(origin.x, 1 - origin.x) * size.width
        let vertical = max(origin.y, 1 - origin.y) * size.height
        return hypot(horizontal, vertical)
    }
}

private struct CircleRevealEffect: ViewModifier {
    let origin: UnitPoint
    let isIdentity: Bool

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    func body(content: Content) -> some View {
        content
            .clipShape(CircleRevealShape(origin: origin, progress: isIdentity || reduceMotion ? 1 : 0))
            .opacity(reduceMotion && !isIdentity ? 0 : 1)
    }
}

nonisolated private struct CircleRevealShape: Shape {
    let origin: UnitPoint
    var progress: CGFloat

    var animatableData: CGFloat {
        get { progress }
        set { progress = newValue }
    }

    func path(in rect: CGRect) -> Path {
        let radius = CircleRevealTransitionGeometry.coverRadius(from: origin, in: rect.size) * progress
        let center = CGPoint(x: rect.minX + rect.width * origin.x, y: rect.minY + rect.height * origin.y)
        return Path(ellipseIn: CGRect(x: center.x - radius, y: center.y - radius, width: radius * 2, height: radius * 2))
    }
}

// MARK: - Demo

struct CircleRevealTransitionDemo: View {
    @State private var isDark = false

    private let origin = UnitPoint(x: 0.5, y: 0.78)

    var body: some View {
        GeometryReader { proxy in
            ZStack {
                scene(colors: [.cyan, .blue], systemImage: "sun.max.fill", title: "Day")
                    .accessibilityHidden(isDark)

                if isDark {
                    scene(colors: [.indigo, .black], systemImage: "moon.stars.fill", title: "Night")
                        .transition(.circleReveal(from: origin))
                }

                Button(isDark ? "Sunrise" : "Sunset") {
                    withAnimation(.easeInOut(duration: 0.8)) { isDark.toggle() }
                }
                .font(.headline)
                .buttonStyle(.bordered)
                .controlSize(.large)
                .tint(.white)
                .position(x: proxy.size.width * origin.x, y: proxy.size.height * origin.y)
            }
        }
        .ignoresSafeArea()
    }

    private func scene(colors: [Color], systemImage: String, title: String) -> some View {
        ZStack {
            LinearGradient(colors: colors, startPoint: .top, endPoint: .bottom)

            VStack(spacing: 14) {
                Image(systemName: systemImage)
                    .font(.system(.largeTitle, weight: .semibold))
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text(title)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    CircleRevealTransitionDemo()
}
```

## Content Swap Transition

A showcase of text value changes using numericText, interpolate and opacity content transitions.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/ContentSwapTransition/ContentSwapTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum ContentSwapTransitionStyle {
    case numeric(Double)
    case interpolate
    case opacity
}

/// Text that swaps its value with a content transition: rolling digits, a morph or a fade.
/// Change the text inside an animation.
///
/// With Reduce Motion on, numbers fade instead of rolling.
struct ContentSwapTransition: View {
    let text: String
    var style: ContentSwapTransitionStyle = .opacity

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var transition: ContentTransition {
        switch style {
        case .numeric(let value): reduceMotion ? .opacity : .numericText(value: value)
        case .interpolate: .interpolate
        case .opacity: .opacity
        }
    }

    var body: some View {
        Text(text)
            .contentTransition(transition)
    }
}

// MARK: - Demo

struct ContentSwapTransitionDemo: View {
    @State private var step = 0

    private let amounts: [Double] = [1284, 1317, 2096, 1905]
    private let greetings = ["Hello", "Hola", "Bonjour", "Ciao"]

    private var amount: Double { amounts[step % amounts.count] }
    private var isHeavy: Bool { step.isMultiple(of: 2) }

    var body: some View {
        VStack(spacing: 16) {
            card("numericText", systemImage: "number", tint: .blue) {
                ContentSwapTransition(text: amount.formatted(.currency(code: "EUR")), style: .numeric(amount))
            }

            card("interpolate", systemImage: "textformat", tint: .pink) {
                ContentSwapTransition(text: "Weight", style: .interpolate)
                    .fontWeight(isHeavy ? .black : .ultraLight)
                    .foregroundStyle(isHeavy ? .pink : .orange)
            }

            card("opacity", systemImage: "circle.lefthalf.filled", tint: .teal) {
                ContentSwapTransition(text: greetings[step % greetings.count], style: .opacity)
            }
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
        .task {
            while (try? await Task.sleep(for: .seconds(1.2))) != nil {
                withAnimation(.smooth(duration: 0.6)) { step += 1 }
            }
        }
    }

    private func card(
        _ title: String,
        systemImage: String,
        tint: Color,
        @ViewBuilder content: () -> some View
    ) -> some View {
        VStack(alignment: .leading, spacing: 12) {
            Label(title, systemImage: systemImage)
                .font(.subheadline.weight(.semibold))
                .foregroundStyle(tint)

            content()
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
                .monospacedDigit()
                .lineLimit(1)
                .frame(maxWidth: .infinity, alignment: .leading)
        }
        .padding(24)
        .background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 24))
    }
}

#Preview {
    ContentSwapTransitionDemo()
}
```

## Cross Fade Navigation

A sheet that fades in over the content with the iOS 27 cross-fade navigation transition.

Category: Transitions. Minimum: iOS 27.0. Path: Components/Transitions/CrossFadeNavigation/CrossFadeNavigation.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// Presents a sheet that fades in over the content with the iOS 27 `.crossFade` transition,
/// instead of moving up from the bottom.
///
/// Apple documents `.crossFade` for sheets. Keep `navigationTransition` on the root of the
/// sheet's content, outside any container such as `VStack`. A cross-fade has no movement,
/// so Reduce Motion needs nothing different.
@available(iOS 27, *)
struct CrossFadeNavigation<SheetContent: View>: ViewModifier {
    @Binding var isPresented: Bool
    @ViewBuilder var sheetContent: () -> SheetContent

    func body(content: Content) -> some View {
        content.sheet(isPresented: $isPresented) {
            sheetContent()
                .navigationTransition(.crossFade)
        }
    }
}

@available(iOS 27, *)
extension View {
    func crossFadeSheet<SheetContent: View>(
        isPresented: Binding<Bool>,
        @ViewBuilder content: @escaping () -> SheetContent
    ) -> some View {
        modifier(CrossFadeNavigation(isPresented: isPresented, sheetContent: content))
    }
}

// MARK: - Demo

@available(iOS 27, *)
struct CrossFadeNavigationDemo: View {
    @State private var showsSheet = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [.orange, .pink], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 24) {
                Image(systemName: "sunrise.fill")
                    .font(.system(.largeTitle, weight: .semibold))
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text("Morning")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Button("Open") { showsSheet = true }
                    .font(.headline)
                    .buttonStyle(.bordered)
                    .controlSize(.large)
                    .tint(.white)
            }
            .foregroundStyle(.white)
        }
        .crossFadeSheet(isPresented: $showsSheet) {
            CrossFadeNavigationDemoSheet()
        }
    }
}

@available(iOS 27, *)
private struct CrossFadeNavigationDemoSheet: View {
    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            LinearGradient(colors: [.indigo, .black], startPoint: .top, endPoint: .bottom)
                .ignoresSafeArea()

            VStack(spacing: 24) {
                Image(systemName: "moon.stars.fill")
                    .font(.system(.largeTitle, weight: .semibold))
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text("Evening")
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Button("Close") { dismiss() }
                    .font(.headline)
                    .buttonStyle(.bordered)
                    .controlSize(.large)
                    .tint(.white)
            }
            .foregroundStyle(.white)
        }
    }
}

@available(iOS 27, *)
#Preview {
    CrossFadeNavigationDemo()
}
```

## Dissolve Shader Transition

A custom transition that burns a view away through noise, with a glowing edge, drawn by a Metal shader.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

nonisolated enum DissolveShaderTransitionMath {
    /// How wide the glowing edge is, as a share of the range of the noise.
    static let edgeWidth = 0.12

    /// The noise level under which a pixel is gone. It starts below every pixel and its glow,
    /// so the view begins whole, and ends above them all.
    static func threshold(progress: Double) -> Double {
        let clamped = min(max(progress, 0), 1)
        return clamped * (1 + edgeWidth) - edgeWidth
    }

    /// The function in `DissolveShaderTransition.metal`, with its arguments in the order it declares them.
    static func shader(progress: Double, grain: Double, edge: Color) -> Shader {
        ShaderLibrary.DissolveShaderTransitionBurn(
            .float(threshold(progress: progress)),
            .float(edgeWidth),
            .float(max(grain, 1)),
            .color(edge)
        )
    }
}

/// A transition that dissolves a view through noise, with a glowing edge where it burns away,
/// drawn by a Metal shader. Use it as `.transition(.dissolveShader)`.
///
/// - Important: Copy two files into the same target: `DissolveShaderTransition.swift` and `DissolveShaderTransition.metal`.
///
/// A shader draws what SwiftUI draws itself: a view backed by UIKit, such as a map, shows a placeholder.
///
/// With Reduce Motion on, the view fades instead.
struct DissolveShaderTransition: Transition {
    /// The color of the edge that burns.
    var edge: Color = .orange
    /// The size of the patches of noise, in points.
    var grain: Double = 44

    func body(content: Content, phase: TransitionPhase) -> some View {
        content.modifier(DissolveShaderTransitionEffect(progress: phase.isIdentity ? 0 : 1, edge: edge, grain: grain))
    }
}

extension Transition where Self == DissolveShaderTransition {
    static var dissolveShader: DissolveShaderTransition { DissolveShaderTransition() }

    static func dissolveShader(edge: Color, grain: Double = 44) -> DissolveShaderTransition {
        DissolveShaderTransition(edge: edge, grain: grain)
    }
}

/// `Animatable`, so the shader gets every step of the transition: a shader's arguments do not animate by themselves.
private struct DissolveShaderTransitionEffect: ViewModifier, Animatable {
    var progress: Double
    let edge: Color
    let grain: Double

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    nonisolated var animatableData: Double {
        get { progress }
        set { progress = newValue }
    }

    func body(content: Content) -> some View {
        content
            .colorEffect(
                DissolveShaderTransitionMath.shader(progress: progress, grain: grain, edge: edge),
                isEnabled: progress > 0 && !reduceMotion
            )
            .opacity(reduceMotion ? 1 - min(max(progress, 0), 1) : 1)
            // The first use of a shader waits for it to compile. Doing that now keeps the first frames of the transition.
            .task {
                let shader = DissolveShaderTransitionMath.shader(progress: 0, grain: grain, edge: edge)
                try? await shader.compile(as: .colorEffect)
            }
    }
}

// MARK: - Demo

struct DissolveShaderTransitionDemo: View {
    @State private var isShown = true

    var body: some View {
        ZStack {
            Color(red: 0.05, green: 0.04, blue: 0.08)
                .ignoresSafeArea()

            VStack(spacing: 36) {
                // An empty space of the same shape keeps the button still while the poster is gone.
                Color.clear
                    .aspectRatio(0.8, contentMode: .fit)
                    .overlay {
                        if isShown {
                            poster
                                .transition(.dissolveShader)
                        }
                    }

                Button(isShown ? "Dissolve" : "Restore") {
                    withAnimation(.easeInOut(duration: 1.5)) { isShown.toggle() }
                }
                .font(.headline)
                .buttonStyle(.borderedProminent)
                .controlSize(.large)
                .tint(.orange)
                .animation(nil, value: isShown)
            }
            .padding(.horizontal, 36)
        }
    }

    private var poster: some View {
        VStack(spacing: 14) {
            Image(systemName: "flame.fill")
                .font(.system(.largeTitle, weight: .semibold))
                .imageScale(.large)
                .accessibilityHidden(true)

            Text("Ember")
                .font(.system(.largeTitle, design: .rounded, weight: .bold))
            Text("Gone in a breath")
                .font(.subheadline)
                .opacity(0.8)
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            LinearGradient(colors: [.indigo, .purple, .pink], startPoint: .topLeading, endPoint: .bottomTrailing),
            in: .rect(cornerRadius: 28)
        )
        .accessibilityElement(children: .combine)
    }
}

#Preview {
    DissolveShaderTransitionDemo()
}
```

Shader: Components/Transitions/DissolveShaderTransition/DissolveShaderTransition.metal

```metal
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

#include <metal_stdlib>
#include <SwiftUI/SwiftUI_Metal.h>

using namespace metal;

// A repeatable pseudo-random number from 0 to 1 for each cell of a grid.
static float DissolveShaderTransitionRandom(float2 cell) {
    uint2 seed = uint2(int2(cell));
    uint mixed = (seed.x * 0x9E3779B1u) ^ (seed.y * 0x85EBCA77u);
    mixed ^= mixed >> 15;
    mixed *= 0x2C1B3C6Du;
    mixed ^= mixed >> 12;
    return float(mixed & 0xFFFFu) / 65535.0;
}

// Smooth noise from 0 to 1: a random value at each corner of a grid, blended
// across each cell.
static float DissolveShaderTransitionNoise(float2 point) {
    float2 cell = floor(point);
    float2 inside = point - cell;
    float2 blend = inside * inside * (3.0 - 2.0 * inside);

    float bottom = mix(
        DissolveShaderTransitionRandom(cell),
        DissolveShaderTransitionRandom(cell + float2(1.0, 0.0)),
        blend.x
    );
    float top = mix(
        DissolveShaderTransitionRandom(cell + float2(0.0, 1.0)),
        DissolveShaderTransitionRandom(cell + float2(1.0, 1.0)),
        blend.x
    );
    return mix(bottom, top, blend.y);
}

// For SwiftUI's `colorEffect`. Removes the pixels whose noise is under
// `threshold`, and makes the ones within `edgeWidth` above it glow in
// `edgeColor`, so the view burns away in patches of `grain` points.
[[ stitchable ]] half4 DissolveShaderTransitionBurn(
    float2 position,
    half4 color,
    float threshold,
    float edgeWidth,
    float grain,
    half4 edgeColor
) {
    // Large patches, with a finer layer that roughens their outline.
    float2 point = position / grain;
    float noise = 0.7 * DissolveShaderTransitionNoise(point)
        + 0.3 * DissolveShaderTransitionNoise(point * 3.1 + 17.0);
    // Noise gathers around the middle. Spreading it makes the burn last the
    // whole transition.
    noise = saturate((noise - 0.5) * 1.7 + 0.5);

    // A short ramp keeps the cut from looking jagged.
    float kept = smoothstep(threshold, threshold + 0.015, noise);
    float heat = 1.0 - smoothstep(threshold, threshold + edgeWidth, noise);

    // The edge is the color of the ember, and paler where it is hottest.
    // Colors come premultiplied by their alpha.
    half3 ember = mix(edgeColor.rgb, half3(1.0), half(0.35 * heat * heat)) * color.a;
    half3 burning = mix(color.rgb, ember, half(heat));
    return half4(burning, color.a) * half(kept);
}
```

## Flip Card Transition

A two-sided card that flips in 3D without ever showing mirrored content.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/FlipCardTransition/FlipCardTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A two-sided card that flips with a 3D rotation when `isFlipped` changes.
///
/// With Reduce Motion on, the faces swap without rotating.
struct FlipCardTransition<Front: View, Back: View>: View {
    let isFlipped: Bool
    @ViewBuilder var front: () -> Front
    @ViewBuilder var back: () -> Back

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        FlipCardFaces(degrees: isFlipped ? 180 : 0, front: front(), back: back())
            .animation(reduceMotion ? nil : .smooth(duration: 0.7), value: isFlipped)
    }
}

// Animatable so the visible face is chosen from the angle on every frame, at the exact
// moment the card is edge-on. A Bool would show a mirrored face for half of the flip.
private struct FlipCardFaces<Front: View, Back: View>: View, Animatable {
    nonisolated var degrees: Double
    let front: Front
    let back: Back

    nonisolated var animatableData: Double {
        get { degrees }
        set { degrees = newValue }
    }

    private var showsFront: Bool { degrees < 90 }

    var body: some View {
        ZStack {
            front
                .opacity(showsFront ? 1 : 0)
                .accessibilityHidden(!showsFront)

            // Turned half way so it reads correctly once the card has turned the other half.
            back
                .rotation3DEffect(.degrees(180), axis: (x: 0, y: 1, z: 0))
                .opacity(showsFront ? 0 : 1)
                .accessibilityHidden(showsFront)
        }
        .rotation3DEffect(.degrees(degrees), axis: (x: 0, y: 1, z: 0), perspective: 0.5)
    }
}

// MARK: - Demo

struct FlipCardTransitionDemo: View {
    @State private var isFlipped = false
    @ScaledMetric(relativeTo: .title) private var cardHeight = 240.0

    var body: some View {
        VStack(spacing: 40) {
            FlipCardTransition(isFlipped: isFlipped) {
                face(colors: [.indigo, .purple]) {
                    Image(systemName: "creditcard.fill")
                        .font(.largeTitle)
                        .accessibilityHidden(true)
                    Text("Membership")
                        .font(.title.bold())
                    Text("Tap Flip to see the back")
                        .font(.subheadline)
                }
            } back: {
                face(colors: [.teal, .mint]) {
                    Image(systemName: "qrcode")
                        .font(.largeTitle)
                        .accessibilityHidden(true)
                    Text("No. 2026 0042")
                        .font(.title.monospacedDigit().bold())
                    Text("Valid until December")
                        .font(.subheadline)
                }
            }
            .frame(height: cardHeight)
            .padding(.horizontal, 28)

            Button("Flip", systemImage: "arrow.left.arrow.right") {
                isFlipped.toggle()
            }
            .font(.headline)
            .buttonStyle(.borderedProminent)
            .controlSize(.large)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
    }

    private func face(colors: [Color], @ViewBuilder content: () -> some View) -> some View {
        VStack(spacing: 10) {
            content()
        }
        .foregroundStyle(.white)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(
            LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing),
            in: .rect(cornerRadius: 28)
        )
    }
}

#Preview {
    FlipCardTransitionDemo()
}
```

## Interactive Pager Transition

A page transition whose progress follows the finger during a drag and completes or cancels on release.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/InteractivePagerTransition/InteractivePagerTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum InteractivePagerTransitionMath {
    static func clampedIndex(_ index: Int, count: Int) -> Int {
        count > 0 ? min(max(index, 0), count - 1) : 0
    }

    /// Slows the drag past the first and last page.
    static func resisted(translation: CGFloat, index: Int, count: Int) -> CGFloat {
        let current = clampedIndex(index, count: count)
        let pastStart = current == 0 && translation > 0
        let pastEnd = current >= count - 1 && translation < 0
        return pastStart || pastEnd ? translation * 0.3 : translation
    }

    /// Commits when the finger went far enough, or was flicked hard enough. Otherwise cancels.
    static func targetIndex(index: Int, count: Int, translation: CGFloat, predicted: CGFloat, width: CGFloat) -> Int {
        let current = clampedIndex(index, count: count)
        guard count > 0, width > 0 else { return current }

        let decisive = abs(translation) > width * 0.4 ? translation : (abs(predicted) > width * 0.6 ? predicted : 0)
        guard decisive != 0 else { return current }
        return clampedIndex(current + (decisive < 0 ? 1 : -1), count: count)
    }

    /// `relative` is 0 for the centered page, 1 for the next one and -1 for the previous one.
    /// The page on top slides fully. The one underneath moves at a slower parallax speed.
    static func offsetX(relative: CGFloat, width: CGFloat, parallax: Bool) -> CGFloat {
        relative > 0 || !parallax ? relative * width : relative * width * 0.3
    }

    static func scale(relative: CGFloat, parallax: Bool) -> CGFloat {
        guard parallax, relative < 0 else { return 1 }
        return 1 - 0.08 * min(-relative, 1)
    }
}

/// A pager whose transition follows the finger, then completes or cancels on release.
///
/// VoiceOver can change page with a three-finger swipe or by adjusting the page dots. With
/// Reduce Motion on, pages slide plainly under the finger and settle at once.
struct InteractivePagerTransition<Page: Identifiable, PageContent: View>: View {
    let pages: [Page]
    @Binding var index: Int
    @ViewBuilder var content: (Page) -> PageContent

    @GestureState private var dragTranslation: CGFloat = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @Environment(\.layoutDirection) private var layoutDirection

    /// Gestures report screen points, but layout mirrors in right-to-left layouts: 1 or -1 converts between them.
    private var forward: CGFloat { layoutDirection == .rightToLeft ? -1 : 1 }

    private var currentIndex: Int {
        InteractivePagerTransitionMath.clampedIndex(index, count: pages.count)
    }

    var body: some View {
        GeometryReader { proxy in
            let width = proxy.size.width
            let drag = InteractivePagerTransitionMath.resisted(translation: dragTranslation, index: currentIndex, count: pages.count)
            let position = CGFloat(currentIndex) - (width > 0 ? drag / width : 0)

            ZStack {
                ForEach(Array(pages.enumerated()), id: \.element.id) { pageIndex, page in
                    if abs(pageIndex - currentIndex) <= 1 {
                        pageView(page, at: pageIndex, position: position, width: width)
                    }
                }
            }
            // The page underneath shrinks and darkens as it recedes. Black behind it reads as
            // depth; the background of the app would flash as bands above and below.
            .background { Color.black.ignoresSafeArea() }
            .contentShape(.rect)
            .gesture(dragGesture(width: width))
            // No animation while the finger is down, so the page tracks it exactly.
            .animation(dragTranslation != 0 || reduceMotion ? nil : .smooth(duration: 0.45), value: position)
        }
        .overlay(alignment: .bottom) { pageDots }
        .accessibilityScrollAction { edge in
            if edge == .trailing { step(1) }
            if edge == .leading { step(-1) }
        }
        .onChange(of: pages.count) {
            index = currentIndex
        }
    }

    private func pageView(_ page: Page, at pageIndex: Int, position: CGFloat, width: CGFloat) -> some View {
        let relative = CGFloat(pageIndex) - position
        let parallax = !reduceMotion

        return content(page)
            .frame(width: width > 0 ? width : nil)
            .scaleEffect(InteractivePagerTransitionMath.scale(relative: relative, parallax: parallax))
            .brightness(parallax && relative < 0 ? 0.25 * max(relative, -1) : 0)
            .offset(x: InteractivePagerTransitionMath.offsetX(relative: relative, width: width, parallax: parallax))
            .zIndex(Double(pageIndex))
            .allowsHitTesting(pageIndex == currentIndex)
            .accessibilityHidden(pageIndex != currentIndex)
    }

    private func dragGesture(width: CGFloat) -> some Gesture {
        DragGesture(minimumDistance: 10)
            .updating($dragTranslation) { value, state, _ in
                state = value.translation.width * forward
            }
            .onEnded { value in
                index = InteractivePagerTransitionMath.targetIndex(
                    index: currentIndex,
                    count: pages.count,
                    translation: value.translation.width * forward,
                    predicted: value.predictedEndTranslation.width * forward,
                    width: width
                )
            }
    }

    private func step(_ delta: Int) {
        index = InteractivePagerTransitionMath.clampedIndex(currentIndex + delta, count: pages.count)
    }

    private var pageDots: some View {
        HStack(spacing: 8) {
            ForEach(pages.indices, id: \.self) { dot in
                Capsule()
                    .fill(.white.opacity(dot == currentIndex ? 1 : 0.45))
                    .frame(width: dot == currentIndex ? 22 : 8, height: 8)
            }
        }
        .padding(.bottom, 18)
        .animation(reduceMotion ? nil : .snappy(duration: 0.3), value: currentIndex)
        .accessibilityElement()
        .accessibilityLabel("Page")
        .accessibilityValue(pages.isEmpty ? "None" : "\(currentIndex + 1) of \(pages.count)")
        .accessibilityAdjustableAction { direction in
            switch direction {
            case .increment: step(1)
            case .decrement: step(-1)
            @unknown default: break
            }
        }
    }
}

// MARK: - Demo

struct InteractivePagerTransitionDemo: View {
    private struct Slide: Identifiable {
        let id: String
        let symbol: String
        let colors: [Color]
    }

    private let slides = [
        Slide(id: "Explore", symbol: "safari.fill", colors: [.teal, .blue]),
        Slide(id: "Collect", symbol: "square.stack.3d.up.fill", colors: [.orange, .pink]),
        Slide(id: "Share", symbol: "paperplane.fill", colors: [.purple, .indigo]),
    ]

    @State private var index = 0

    var body: some View {
        InteractivePagerTransition(pages: slides, index: $index) { slide in
            ZStack {
                LinearGradient(colors: slide.colors, startPoint: .topLeading, endPoint: .bottomTrailing)

                VStack(spacing: 18) {
                    Image(systemName: slide.symbol)
                        .font(.system(size: 90))
                        .accessibilityHidden(true)

                    Text(slide.id)
                        .font(.largeTitle.bold())
                }
                .foregroundStyle(.white)
            }
            .ignoresSafeArea()
        }
    }
}

#Preview {
    InteractivePagerTransitionDemo()
}
```

## Matched Hero Card

A card that expands in place into a full detail view using matched geometry.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/MatchedHeroCard/MatchedHeroCard.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A card that grows in place to fill its parent. Its icon, title and subtitle travel to their
/// new places with `matchedGeometryEffect`.
///
/// With Reduce Motion on, the card changes state without animating.
struct MatchedHeroCard<Detail: View>: View {
    let title: String
    let subtitle: String
    let systemImage: String
    var colors: [Color] = [.indigo, .purple]
    @ViewBuilder var detail: () -> Detail

    @State private var isExpanded = false
    @Namespace private var namespace
    @ScaledMetric(relativeTo: .largeTitle) private var collapsedHeight = 220.0
    @ScaledMetric(relativeTo: .largeTitle) private var iconSize = 52.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var animation: Animation? {
        reduceMotion ? nil : .smooth(duration: 0.5, extraBounce: 0.08)
    }

    var body: some View {
        // One background for both states, so the card is never see-through while it changes,
        // and it clips the detail, so the text never runs over what is below the card.
        ZStack(alignment: .top) {
            if isExpanded {
                expandedContent
            } else {
                collapsedContent
            }
        }
        .frame(maxWidth: .infinity, minHeight: collapsedHeight, maxHeight: isExpanded ? .infinity : collapsedHeight)
        .background(LinearGradient(colors: colors, startPoint: .topLeading, endPoint: .bottomTrailing))
        .clipShape(.rect(cornerRadius: 28, style: .continuous))
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .top)
        .foregroundStyle(.white)
    }

    private var collapsedContent: some View {
        Button {
            withAnimation(animation) { isExpanded = true }
        } label: {
            header
                .padding(24)
                .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
                .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(title)
        .accessibilityHint("Expands the card")
    }

    private var expandedContent: some View {
        VStack(alignment: .leading, spacing: 24) {
            header

            detail()

            Spacer(minLength: 0)
        }
        .padding(24)
        .padding(.top, 32)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .overlay(alignment: .topTrailing) {
            Button {
                withAnimation(animation) { isExpanded = false }
            } label: {
                Image(systemName: "xmark")
                    .font(.headline)
                    .padding(12)
                    .background(.white.opacity(0.2), in: .circle)
                    // A little bigger for a touch than it looks, up to the size of a touch target.
                    .padding(2)
                    .contentShape(.rect)
                    .padding(-2)
            }
            .buttonStyle(.plain)
            .accessibilityLabel("Close")
            .padding(16)
        }
    }

    private var header: some View {
        VStack(alignment: .leading, spacing: 6) {
            Image(systemName: systemImage)
                .font(.system(size: iconSize, weight: .semibold))
                .matchedGeometryEffect(id: "icon", in: namespace)
                .accessibilityHidden(true)

            Text(title)
                .font(.largeTitle.bold())
                .matchedGeometryEffect(id: "title", in: namespace)

            Text(subtitle)
                .font(.subheadline)
                .opacity(0.85)
                .matchedGeometryEffect(id: "subtitle", in: namespace)
        }
    }
}

// MARK: - Demo

struct MatchedHeroCardDemo: View {
    @ScaledMetric(relativeTo: .largeTitle) private var rowsOffset = 240.0

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            Text("Today")
                .font(.largeTitle.bold())

            ZStack(alignment: .top) {
                VStack(spacing: 12) {
                    row("Harbor walk", systemImage: "sailboat.fill")
                    row("Lunch at the market", systemImage: "fork.knife")
                    row("Sunset viewpoint", systemImage: "sun.horizon.fill")
                }
                .padding(.top, rowsOffset)

                MatchedHeroCard(
                    title: "Lisbon",
                    subtitle: "Three days by the river",
                    systemImage: "tram.fill",
                    colors: [.orange, .pink, .purple]
                ) {
                    Text("Tiled streets, yellow trams and the best custard tarts you will ever taste. The card grew from where it was and goes back there when you close it.")
                        .font(.body)
                }
            }
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
    }

    private func row(_ title: String, systemImage: String) -> some View {
        Label(title, systemImage: systemImage)
            .font(.headline)
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(18)
            .background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 18))
    }
}

#Preview {
    MatchedHeroCardDemo()
}
```

## Parallax Push Transition

A custom Transition where the incoming page slides over while the outgoing page moves at a slower parallax speed.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/ParallaxPushTransition/ParallaxPushTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum ParallaxPushTransitionMath {
    /// The horizontal shift as a fraction of the page width.
    static func shift(phase: TransitionPhase, isForward: Bool, parallax: CGFloat) -> CGFloat {
        switch phase {
        case .identity: 0
        case .willAppear: isForward ? 1 : -parallax
        case .didDisappear: isForward ? -parallax : 1
        }
    }
}

/// The incoming page slides over while the outgoing page moves at a slower parallax speed.
///
/// A `Transition` cannot read the environment, so pass Reduce Motion in: with it on, the
/// pages crossfade. Give the page on top the higher `zIndex`.
struct ParallaxPushTransition: Transition {
    var isForward = true
    var reduceMotion = false
    var parallax: CGFloat = 0.3

    func body(content: Content, phase: TransitionPhase) -> some View {
        // `visualEffect` takes a `@Sendable` closure, so it works with a local copy.
        let shift = ParallaxPushTransitionMath.shift(phase: phase, isForward: isForward, parallax: parallax)

        if reduceMotion {
            content.opacity(phase.isIdentity ? 1 : 0)
        } else {
            content
                .brightness(shift < 0 ? -0.25 : 0)
                .visualEffect { effect, proxy in
                    effect.offset(x: shift * proxy.size.width)
                }
        }
    }
}

extension Transition where Self == ParallaxPushTransition {
    /// For moving forward. Moving back uses `.parallaxPop`, set before the page changes.
    static func parallaxPush(reduceMotion: Bool = false) -> ParallaxPushTransition {
        ParallaxPushTransition(isForward: true, reduceMotion: reduceMotion)
    }

    static func parallaxPop(reduceMotion: Bool = false) -> ParallaxPushTransition {
        ParallaxPushTransition(isForward: false, reduceMotion: reduceMotion)
    }
}

// MARK: - Demo

struct ParallaxPushTransitionDemo: View {
    private struct Screen {
        let title: String
        let symbol: String
        let colors: [Color]
    }

    private let screens = [
        Screen(title: "Arrive", symbol: "airplane.arrival", colors: [.indigo, .blue]),
        Screen(title: "Stay", symbol: "bed.double.fill", colors: [.orange, .pink]),
        Screen(title: "Taste", symbol: "fork.knife", colors: [.green, .teal]),
        Screen(title: "Depart", symbol: "airplane.departure", colors: [.purple, .pink]),
    ]

    // Keeps growing, so the newest page always has the highest `zIndex`.
    @State private var generation = 0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var screen: Screen { screens[generation % screens.count] }

    var body: some View {
        ZStack {
            page(screen)
                .transition(.parallaxPush(reduceMotion: reduceMotion))
                .id(generation)
                .zIndex(Double(generation))
        }
        .overlay(alignment: .bottom) {
            Button("Next page", systemImage: "arrow.forward", action: advance)
                .font(.headline)
                .buttonStyle(.borderedProminent)
                .tint(.white.opacity(0.25))
                .padding(.bottom, 32)
        }
        .task(id: reduceMotion) {
            guard !reduceMotion else { return }
            while !Task.isCancelled {
                try? await Task.sleep(for: .seconds(1.3))
                guard !Task.isCancelled else { return }
                advance()
            }
        }
    }

    private func advance() {
        withAnimation(.smooth(duration: 0.7)) {
            generation = generation == Int.max ? 0 : generation + 1
        }
    }

    private func page(_ screen: Screen) -> some View {
        ZStack {
            LinearGradient(colors: screen.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(spacing: 18) {
                Image(systemName: screen.symbol)
                    .font(.system(size: 90))
                    .accessibilityHidden(true)

                Text(screen.title)
                    .font(.largeTitle.bold())
            }
            .foregroundStyle(.white)
        }
    }
}

#Preview {
    ParallaxPushTransitionDemo()
}
```

## Slide Scale Transition

A custom transition that combines an offset with a scale, available as .slideScale.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/SlideScaleTransition/SlideScaleTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A transition that slides and scales a view: it enters from one side and leaves by the other.
///
/// With Reduce Motion on, the view only fades.
struct SlideScaleTransition: Transition {
    var axis: Axis = .horizontal
    var distance: CGFloat = 220
    var scale: CGFloat = 0.8

    func body(content: Content, phase: TransitionPhase) -> some View {
        content.modifier(SlideScaleEffect(axis: axis, distance: distance, scale: scale, phase: phase))
    }
}

extension Transition where Self == SlideScaleTransition {
    static var slideScale: SlideScaleTransition { SlideScaleTransition() }

    static func slideScale(axis: Axis, distance: CGFloat = 220, scale: CGFloat = 0.8) -> SlideScaleTransition {
        SlideScaleTransition(axis: axis, distance: distance, scale: scale)
    }
}

// The effect lives in a view modifier so it can read the environment.
private struct SlideScaleEffect: ViewModifier {
    let axis: Axis
    let distance: CGFloat
    let scale: CGFloat
    let phase: TransitionPhase

    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    // `phase.value` is -1 before appearing, 0 at rest and 1 after disappearing.
    private var offset: CGFloat {
        reduceMotion ? 0 : -phase.value * distance
    }

    func body(content: Content) -> some View {
        content
            .scaleEffect(phase.isIdentity || reduceMotion ? 1 : scale)
            .offset(x: axis == .horizontal ? offset : 0, y: axis == .vertical ? offset : 0)
            .opacity(phase.isIdentity ? 1 : 0)
    }
}

// MARK: - Demo

struct SlideScaleTransitionDemo: View {
    @State private var index = 0

    private let cards: [(title: String, systemImage: String, colors: [Color])] = [
        ("Run", "figure.run", [.orange, .red]),
        ("Swim", "figure.pool.swim", [.cyan, .blue]),
        ("Climb", "figure.climbing", [.mint, .green]),
    ]

    private var card: (title: String, systemImage: String, colors: [Color]) {
        cards[index % cards.count]
    }

    var body: some View {
        ZStack {
            Color(.systemGroupedBackground)
                .ignoresSafeArea()

            VStack(spacing: 20) {
                Image(systemName: card.systemImage)
                    .font(.system(.largeTitle, weight: .semibold))
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text(card.title)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))
            }
            .foregroundStyle(.white)
            .frame(maxWidth: .infinity)
            .frame(height: 340)
            .background(
                LinearGradient(colors: card.colors, startPoint: .topLeading, endPoint: .bottomTrailing),
                in: .rect(cornerRadius: 36)
            )
            .padding(32)
            .id(index)
            .transition(.slideScale)
        }
        .task {
            while (try? await Task.sleep(for: .seconds(1.3))) != nil {
                withAnimation(.smooth(duration: 0.55)) { index += 1 }
            }
        }
    }
}

#Preview {
    SlideScaleTransitionDemo()
}
```

## Staggered Appear List

A list whose rows enter one after another with a capped, testable delay.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/StaggeredAppearList/StaggeredAppearList.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

enum StaggeredAppearListTiming {
    /// How long a row waits before it enters. The cap keeps long lists from stalling.
    static func delay(
        forIndex index: Int,
        step: Double = 0.07,
        maximum: Double = 0.6,
        reduceMotion: Bool = false
    ) -> Double {
        guard !reduceMotion else { return 0 }
        return min(max(Double(index), 0) * step, maximum)
    }
}

/// Rows that enter one after another when the list appears.
///
/// With Reduce Motion on, every row fades in at once without moving.
struct StaggeredAppearList<Item: Identifiable, Row: View>: View {
    let items: [Item]
    var spacing: CGFloat = 12
    var travel: CGFloat = 28
    @ViewBuilder var row: (Item) -> Row

    @State private var isVisible = false
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        VStack(spacing: spacing) {
            ForEach(Array(items.enumerated()), id: \.element.id) { index, item in
                row(item)
                    .opacity(isVisible ? 1 : 0)
                    .offset(y: isVisible || reduceMotion ? 0 : travel)
                    .animation(
                        .smooth(duration: 0.45)
                            .delay(StaggeredAppearListTiming.delay(forIndex: index, reduceMotion: reduceMotion)),
                        value: isVisible
                    )
            }
        }
        .onAppear { isVisible = true }
    }
}

// MARK: - Demo

private struct StaggeredAppearDemoRow: Identifiable {
    let id: String
    let detail: String
    let systemImage: String
    let tint: Color
}

struct StaggeredAppearListDemo: View {
    @State private var replay = 0

    private let rows = [
        StaggeredAppearDemoRow(id: "Inbox", detail: "12 new messages", systemImage: "tray.fill", tint: .blue),
        StaggeredAppearDemoRow(id: "Calendar", detail: "Standup at 9:30", systemImage: "calendar", tint: .red),
        StaggeredAppearDemoRow(id: "Music", detail: "Your weekly mix", systemImage: "music.note", tint: .pink),
        StaggeredAppearDemoRow(id: "Photos", detail: "48 added today", systemImage: "photo.fill", tint: .orange),
        StaggeredAppearDemoRow(id: "Health", detail: "6,204 steps", systemImage: "heart.fill", tint: .green),
        StaggeredAppearDemoRow(id: "Files", detail: "2 shared with you", systemImage: "folder.fill", tint: .teal),
        StaggeredAppearDemoRow(id: "Notes", detail: "Groceries, ideas", systemImage: "note.text", tint: .yellow),
    ]

    var body: some View {
        ScrollView {
            StaggeredAppearList(items: rows) { row in
                HStack(spacing: 14) {
                    Image(systemName: row.systemImage)
                        .font(.title3)
                        .foregroundStyle(row.tint)
                        .frame(width: 36)
                        .accessibilityHidden(true)

                    VStack(alignment: .leading, spacing: 2) {
                        Text(row.id)
                            .font(.headline)
                        Text(row.detail)
                            .font(.subheadline)
                            .foregroundStyle(.secondary)
                    }

                    Spacer(minLength: 0)
                }
                .padding(16)
                .background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 18))
            }
            .id(replay)
            .padding(20)
        }
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
        .task {
            while (try? await Task.sleep(for: .seconds(2.4))) != nil {
                replay += 1
            }
        }
    }
}

#Preview {
    StaggeredAppearListDemo()
}
```

## Symbol Morph Toggle

A toggle whose SF Symbol morphs between states with the iOS 18 magic replace effect.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/SymbolMorphToggle/SymbolMorphToggle.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A toggle whose SF Symbol morphs between two states with the magic replace effect.
/// The magic effect shows between related symbols, such as `bell.fill` and `bell.slash.fill`.
///
/// With Reduce Motion on, the symbols fade.
struct SymbolMorphToggle: View {
    let title: LocalizedStringResource
    let onSymbol: String
    let offSymbol: String
    @Binding var isOn: Bool
    var tint: Color = .blue

    @ScaledMetric(relativeTo: .largeTitle) private var symbolSize = 44.0
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    private var transition: ContentTransition {
        reduceMotion ? .opacity : .symbolEffect(.replace.magic(fallback: .downUp.byLayer))
    }

    var body: some View {
        Button {
            withAnimation(.smooth(duration: 0.4)) { isOn.toggle() }
        } label: {
            VStack(spacing: 12) {
                Image(systemName: isOn ? onSymbol : offSymbol)
                    .font(.system(size: symbolSize, weight: .medium))
                    .symbolRenderingMode(.hierarchical)
                    .contentTransition(transition)
                    .frame(height: symbolSize * 1.3)
                    .foregroundStyle(isOn ? tint : .secondary)

                Text(title)
                    .font(.headline)
            }
            .frame(maxWidth: .infinity)
            .padding(.vertical, 28)
            .background(Color(.secondarySystemGroupedBackground), in: .rect(cornerRadius: 24))
            .contentShape(.rect)
        }
        .buttonStyle(.plain)
        .accessibilityLabel(title)
        .accessibilityValue(isOn ? "On" : "Off")
        .accessibilityAddTraits(.isToggle)
    }
}

// MARK: - Demo

struct SymbolMorphToggleDemo: View {
    @State private var alerts = true
    @State private var microphone = true
    @State private var camera = true
    @State private var network = true

    var body: some View {
        Grid(horizontalSpacing: 14, verticalSpacing: 14) {
            GridRow {
                SymbolMorphToggle(title: "Alerts", onSymbol: "bell.fill", offSymbol: "bell.slash.fill", isOn: $alerts, tint: .orange)
                SymbolMorphToggle(title: "Microphone", onSymbol: "mic.fill", offSymbol: "mic.slash.fill", isOn: $microphone, tint: .pink)
            }

            GridRow {
                SymbolMorphToggle(title: "Camera", onSymbol: "video.fill", offSymbol: "video.slash.fill", isOn: $camera, tint: .green)
                SymbolMorphToggle(title: "Network", onSymbol: "wifi", offSymbol: "wifi.slash", isOn: $network, tint: .blue)
            }
        }
        .padding(20)
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(.systemGroupedBackground).ignoresSafeArea())
    }
}

#Preview {
    SymbolMorphToggleDemo()
}
```

## Zoom Hero Transition

A grid of cards that zoom into their detail screen with the native navigation zoom transition.

Category: Transitions. Minimum: iOS 18.0. Path: Components/Transitions/ZoomHeroTransition/ZoomHeroTransition.swift

```swift
// SPDX-License-Identifier: MIT
// Copyright (c) 2026 Oscar Canton and SwiftUI Blocks contributors

import SwiftUI

/// A grid of cards that zoom into their detail screen. Place it inside a `NavigationStack`.
///
/// With Reduce Motion on, the detail opens with the standard navigation transition.
struct ZoomHeroTransition<Item: Identifiable & Hashable, Card: View, Detail: View>: View {
    let items: [Item]
    var columns: Int = 2
    var cornerRadius: CGFloat = 24
    @ViewBuilder var card: (Item) -> Card
    @ViewBuilder var detail: (Item) -> Detail

    @Namespace private var namespace
    @Environment(\.accessibilityReduceMotion) private var reduceMotion

    var body: some View {
        ScrollView {
            LazyVGrid(columns: Array(repeating: GridItem(.flexible(), spacing: 14), count: columns), spacing: 14) {
                ForEach(items) { item in
                    NavigationLink(value: item) {
                        card(item)
                            .clipShape(.rect(cornerRadius: cornerRadius))
                            .matchedTransitionSource(id: item.id, in: namespace) { source in
                                source.clipShape(RoundedRectangle(cornerRadius: cornerRadius))
                            }
                    }
                    .buttonStyle(.plain)
                }
            }
            .padding(16)
        }
        .navigationDestination(for: Item.self) { item in
            destination(for: item)
        }
    }

    // `.zoom` and `.automatic` are different types, so a ternary cannot choose between them on iOS 18.
    @ViewBuilder
    private func destination(for item: Item) -> some View {
        if reduceMotion {
            detail(item)
        } else {
            detail(item).navigationTransition(.zoom(sourceID: item.id, in: namespace))
        }
    }
}

// MARK: - Demo

private struct ZoomHeroDemoPlace: Identifiable, Hashable {
    let id: String
    let systemImage: String
    let colors: [Color]
}

struct ZoomHeroTransitionDemo: View {
    private let places = [
        ZoomHeroDemoPlace(id: "Aurora", systemImage: "sparkles", colors: [.indigo, .teal]),
        ZoomHeroDemoPlace(id: "Dunes", systemImage: "sun.max.fill", colors: [.orange, .pink]),
        ZoomHeroDemoPlace(id: "Forest", systemImage: "leaf.fill", colors: [.green, .mint]),
        ZoomHeroDemoPlace(id: "Glacier", systemImage: "snowflake", colors: [.cyan, .blue]),
        ZoomHeroDemoPlace(id: "Volcano", systemImage: "flame.fill", colors: [.red, .orange]),
        ZoomHeroDemoPlace(id: "Night", systemImage: "moon.stars.fill", colors: [.purple, .indigo]),
    ]

    var body: some View {
        NavigationStack {
            ZoomHeroTransition(items: places) { place in
                LinearGradient(colors: place.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                    .aspectRatio(0.78, contentMode: .fit)
                    .overlay {
                        Image(systemName: place.systemImage)
                            .font(.largeTitle)
                            .imageScale(.large)
                            .foregroundStyle(.white.opacity(0.9))
                            .accessibilityHidden(true)
                    }
                    .overlay(alignment: .bottomLeading) {
                        Text(place.id)
                            .font(.headline)
                            .foregroundStyle(.white)
                            .padding(14)
                    }
            } detail: { place in
                ZoomHeroDemoDetail(place: place)
            }
            .navigationTitle("Places")
        }
    }
}

private struct ZoomHeroDemoDetail: View {
    let place: ZoomHeroDemoPlace

    @Environment(\.dismiss) private var dismiss

    var body: some View {
        ZStack {
            LinearGradient(colors: place.colors, startPoint: .topLeading, endPoint: .bottomTrailing)
                .ignoresSafeArea()

            VStack(spacing: 18) {
                Image(systemName: place.systemImage)
                    .font(.system(.largeTitle, weight: .semibold))
                    .imageScale(.large)
                    .accessibilityHidden(true)

                Text(place.id)
                    .font(.system(.largeTitle, design: .rounded, weight: .bold))

                Text("The card grew into this screen. Swipe down or tap Close to send it back.")
                    .font(.body)
                    .multilineTextAlignment(.center)

                Button("Close") { dismiss() }
                    .buttonStyle(.bordered)
                    .tint(.white)
            }
            .foregroundStyle(.white)
            .padding(32)
        }
    }
}

#Preview {
    ZoomHeroTransitionDemo()
}
```