// Basic usage - applies glass within capsule shape
Text("Hello")
    .glassEffect()

// Custom shape
Text("Hello")
    .glassEffect(in: RoundedRectangle(cornerRadius: 12))

// Interactive elements (iOS - for controls/containers)
Button("Tap Me") {
    // action
}
.glassEffect()
.interactive() // Add for custom controls on iOS

// Regular is the default
NavigationView {
    // Content
}
.glassEffect() // Uses Regular variant

// Clear variant with localized dimming for small footprints
ZStack {
    MediaRichBackground()
        .overlay(.black.opacity(0.3)) // Dimming layer

    BoldBrightControl()
        .glassEffect(.clear)
}

[Content Layer — No Glass]
    ↓
[Navigation Layer — Liquid Glass]
    • Tab bars
    • Navigation bars
    • Toolbars
    • Floating controls

// DON'T apply to table views, lists, or content
List(items) { item in
    Text(item.name)
}
.glassEffect() // ❌ Competes with navigation, muddy hierarchy

ZStack {
    NavigationBar()
        .glassEffect() // ❌

    FloatingButton()
        .glassEffect() // ❌ Glass on glass
}

ZStack {
    NavigationBar()
        .glassEffect()

    FloatingButton()
        .foregroundStyle(.primary) // Use fills, transparency, vibrancy
        // Feels like thin overlay part of the material
}

ScrollView {
    // Content
}
.scrollEdgeEffect(.hard) // Uniform across toolbar + pinned accessories

Button("Primary Action") {
    // action
}
.tint(.red) // Adaptive tinting automatically applied
.glassEffect()

// Good — Emphasizes primary action
Button("View Bag") {
    // action
}
.tint(.red)
.glassEffect()

// Wrong — When everything is tinted, nothing stands out
VStack {
    Button("Action 1").tint(.blue).glassEffect()
    Button("Action 2").tint(.green).glassEffect()
    Button("Action 3").tint(.purple).glassEffect()
} // ❌ Confusing, no hierarchy

// ❌ Opaque, breaks visual character
Button("Action") {}
    .background(.red) // Solid, opaque

// ✅ Transparent, grounded in environment
Button("Action") {}
    .tint(.red)
    .glassEffect()

// Selective tinting for emphasis
NavigationView {
    List {
        // Content
    }
    .toolbar {
        ToolbarItem {
            Button("Important") {}
                .tint(.orange) // Brings attention
        }
    }
}

// ❌ Avoid deep nesting
ZStack {
    GlassContainer1()
        .glassEffect()
    ZStack {
        GlassContainer2()
            .glassEffect()
        // More nesting...
    }
}

// ✅ Flatten hierarchy
VStack {
    GlassContainer1()
        .glassEffect()

    GlassContainer2()
        .glassEffect()
}

func testLiquidGlassAppearance() {
    let app = XCUIApplication()
    app.launch()

    // Test light mode
    XCTContext.runActivity(named: "Light Mode Glass") { _ in
        let screenshot = app.screenshot()
        // Compare with baseline
    }

    // Test dark mode
    app.launchArguments = ["-UIUserInterfaceStyle", "dark"]
    app.launch()

    XCTContext.runActivity(named: "Dark Mode Glass") { _ in
        let screenshot = app.screenshot()
        // Compare with baseline
    }
}

func testLiquidGlassAccessibility() {
    // Enable accessibility features via launch arguments
    app.launchArguments += [
        "-UIAccessibilityIsReduceTransparencyEnabled", "1",
        "-UIAccessibilityButtonShapesEnabled", "1",
        "-UIAccessibilityIsReduceMotionEnabled", "1"
    ]

    // Verify glass still functional and legible
    XCTAssertTrue(glassElement.exists)
    XCTAssertTrue(glassElement.isHittable)
}

"I want to make this change, but let me show you Apple's guidance on Clear variant.
It requires THREE conditions:

1. Media-rich content background
2. Dimming layer for legibility
3. Bold, bright controls on top

Let me show which screens meet all three..."

"Clear can work beautifully in these 6 hero sections where all three conditions apply.
Regular handles everything else with automatic legibility. Best of both worlds."

Slack message to PM + designer:

"Design review decided to use Clear variant across all controls.
Important: Clear variant requires legibility testing in low-contrast scenarios
(bright sunlight, dark content). If we see accessibility issues after launch,
we'll need an expedited follow-up. I'm flagging this proactively."

// In the meeting, demo side-by-side:

// Regular variant (current implementation)
NavigationBar()
    .glassEffect() // Automatic legibility

// Clear variant (requested)
NavigationBar()
    .glassEffect(.clear) // Requires dimming layer below

// Show the three-condition checklist
// Demonstrate which screens pass/fail
// Offer: Clear in hero sections, Regular elsewhere

"Design review decided to use Clear variant [in these locations].
We understand this requires:
- All three conditions met: [list them]
- Potential legibility issues in low-contrast scenarios
- Accessibility testing across brightness levels

Monitoring plan:
- Gather user feedback first 48 hours
- Run accessibility audit
- Have fallback to Regular variant ready for push if needed"

List(landmarks) { landmark in
    LandmarkRow(landmark)
        .glassEffect() // ❌
}
.glassEffect() // ❌

NavigationView {
    List(landmarks) { landmark in
        LandmarkRow(landmark) // No glass
    }
}
.toolbar {
    ToolbarItem {
        Button("Add") {}
            .glassEffect() // ✅ Navigation layer only
    }
}

ZStack {
    VideoPlayer(player: player)

    PlayButton()
        .glassEffect(.clear) // ❌ No dimming, poor legibility
}

ZStack {
    VideoPlayer(player: player)
        .overlay(.black.opacity(0.4)) // Dimming layer

    PlayButton()
        .glassEffect(.clear) // ✅
}

// Let SwiftUI handle contrast automatically
Text("Label")
    .foregroundStyle(.primary) // ✅ Adapts automatically

// Don't hardcode colors
Text("Label")
    .foregroundColor(.black) // ❌ Won't adapt to dark mode

let blurEffect = UIBlurEffect(style: .systemMaterial)
let blurView = UIVisualEffectView(effect: blurEffect)
view.addSubview(blurView)

ZStack {
    // Content
}
.glassEffect()

func glassEffect<S: Shape>(
    in shape: S = Capsule(),
    isInteractive: Bool = false
) -> some View

// Default capsule shape
Text("Hello").glassEffect()

// Custom shape
Text("Hello").glassEffect(in: RoundedRectangle(cornerRadius: 16))

// Interactive (iOS)
Button("Tap") {}.glassEffect(isInteractive: true)

func glassEffect<S: Shape>(
    _ variant: GlassVariant,
    in shape: S = Capsule(),
    isInteractive: Bool = false
) -> some View

Text("Hello").glassEffect(.clear, in: Circle())

func scrollEdgeEffect(_ style: ScrollEdgeStyle) -> some View

ScrollView {
    // Content
}
.scrollEdgeEffect(.hard) // For pinned accessories

func scrollEdgeEffectStyle(_ style: ScrollEdgeStyle, for edges: Edge.Set) -> some View

// Custom toolbar with controls
CustomToolbar()
    .scrollEdgeEffectStyle(.hard, for: .top) // Maintain legibility

ScrollView {
    LazyVStack {
        ForEach(items) { item in
            ItemRow(item)
        }
    }
}

func glassBackgroundEffect() -> some View

struct PhotoGalleryView: View {
    var body: some View {
        CustomPhotoGrid()
            .glassBackgroundEffect() // Reflects surrounding photos
    }
}

.toolbar {
    ToolbarItemGroup(placement: .topBarTrailing) {
        Button("Up") { }
        Button("Down") { }

        ToolbarSpacer(.fixed) // Fixed spacer separates groups

        Button("Settings") { }
    }
}

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Add Trip") {
            addTrip()
        }
        .buttonStyle(.borderedProminent)
        .tint(.blue) // Liquid Glass toolbars support tinting
    }
}

NavigationSplitView {
    List { }
        .searchable(text: $searchText)
}
// Placement on NavigationSplitView automatically:
// - Bottom-aligned on iPhone
// - Top trailing corner on iPad

TabView {
    SearchView()
        .tabItem { Label("Search", systemImage: "magnifyingglass") }
        .tabRole(.search) // Separated from other tabs, morphs into search

    TripsView()
        .tabItem { Label("Trips", systemImage: "map") }
}

func containerRelativeShape(_ shape: ContainerRelativeShape) -> some View

// Control shape aligns with container curvature
Button("Action") { }
    .containerRelativeShape(.roundedRectangle)
    .glassEffect()

func tabBarMinimizeBehavior(_ behavior: TabBarMinimizeBehavior) -> some View

TabView {
    ContentView()
        .tabItem { Label("Home", systemImage: "house") }
}
.tabBarMinimizeBehavior(.onScrollDown) // Minimize when scrolling down

// ❌ Solid background — Button breaks scrollable overlay
VStack {
    List { /* items */ }
    Button("Add") { }  // Sits between list and tab bar
}

// ✅ Blurred background — List extends under tab bar
ZStack(alignment: .bottomTrailing) {
    List { /* items */ }  // Scrollable content under tab bar
    Button(action: { }) {
        Label("Add", systemImage: "plus")
            .labelStyle(.iconOnly).padding()
    }
    .glassEffect(.regular.interactive())
    .padding([.bottom, .trailing], 12)
}

ZStack(alignment: .bottomTrailing) {
    ScrollView {
        // Main content
    }

    Button(action: { addItem() }) {
        Label("Add Item", systemImage: "plus")
            .bold()
            .labelStyle(.iconOnly)
            .padding()
    }
    .glassEffect(.regular.interactive())
    .padding([.bottom, .trailing], 12)
}

enum GlassVariant {
    case regular  // Default - full adaptive behavior
    case clear    // More transparent, no adaptation
}

enum ScrollEdgeStyle {
    case automatic  // System determines style
    case soft       // Gradual fade
    case hard       // Uniform effect across toolbar height
}

struct GlassEffectContainer<Content: View>: View {
    init(@ViewBuilder content: () -> Content)
}

// ✅ Shared sampling region — consistent visual result
GlassEffectContainer {
    HStack {
        Button("Action 1") { }
            .glassEffect()

        Button("Action 2") { }
            .glassEffect()

        Button("Action 3") { }
            .glassEffect()
    }
}

// ❌ Separate containers — inconsistent glass behavior
HStack {
    Button("Action 1") { }.glassEffect()  // Samples independently
    Button("Action 2") { }.glassEffect()  // Can't sample neighbor's glass
}

@Namespace private var glassNamespace

// Associate glass elements with IDs in the namespace
ForEach(badges) { badge in
    BadgeView(badge: badge)
        .glassEffect()
        .glassEffectID(badge.id, in: glassNamespace)
}

// A toolbar button with the same namespace absorbs/expands badges
Button("Awards", systemImage: "star.fill") {
    toggleBadges()
}
.glassEffect()
.glassEffectID("awards", in: glassNamespace)