mediaQuery

@ExperimentalMediaQueryApi
@Composable
inline fun <T : Any?> mediaQuery(query: UiMediaScope.() -> T): T

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.Text
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.UiMediaScope.Posture
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.unit.dp

Column(Modifier.fillMaxSize()) {
    when (mediaQuery { windowPosture }) {
        Posture.Tabletop -> {
            // Tabletop mode layout: Two rows separated by hinge
            Column(Modifier.fillMaxSize()) {
                Box(
                    Modifier.weight(1f).background(Color.Red).fillMaxWidth(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text("Tabletop mode")
                }
                Box(
                    Modifier.height(20.dp).background(Color.Black).fillMaxWidth()
                ) // Hinge visualization
                Box(Modifier.weight(1f).background(Color.Blue).fillMaxWidth())
            }
        }
        Posture.Book -> {
            // Book mode layout: Two columns separated by hinge
            Row(Modifier.fillMaxSize()) {
                Box(
                    Modifier.weight(1f).background(Color.Red).fillMaxHeight(),
                    contentAlignment = Alignment.Center,
                ) {
                    Text("Book mode")
                }
                Box(
                    Modifier.width(20.dp).background(Color.Black).fillMaxHeight()
                ) // Hinge visualization
                Box(Modifier.weight(1f).background(Color.Blue).fillMaxHeight())
            }
        }
        else -> {
            // Flat mode
            Box(
                Modifier.background(Color.LightGray).fillMaxSize(),
                contentAlignment = Alignment.Center,
            ) {
                Text("Flat mode")
            }
        }
    }
}

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.style.Style
import androidx.compose.foundation.style.size
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.ui.Modifier
import androidx.compose.ui.UiMediaScope.PointerPrecision
import androidx.compose.ui.UiMediaScope.ViewingDistance
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.mediaQuery
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.DpSize
import androidx.compose.ui.unit.dp

Column(Modifier.padding(top = 100.dp).padding(16.dp)) {
    // Adjust button size for touch targets directly using a media query
    val adaptiveSize = mediaQuery {
        when {
            viewingDistance != ViewingDistance.Near -> DpSize(150.dp, 70.dp)
            pointerPrecision == PointerPrecision.Coarse -> DpSize(120.dp, 50.dp)
            else -> DpSize(100.dp, 40.dp)
        }
    }

    // Adjust style for reachability
    val label = "Submit"
    val adaptiveLabel = mediaQuery {
        if (viewingDistance != ViewingDistance.Near) label.uppercase(getDefault()) else label
    }

    Button(
        modifier =
            Modifier.clip(RoundedCornerShape(8.dp)).size(adaptiveSize).background(Color.Blue),
        onClick = {},
    ) {
        Text(text = adaptiveLabel, color = Color.White, style = TextStyle())
    }
}