RemoteBox

@RemoteComposable
@Composable
fun RemoteBox(modifier: RemoteModifier = RemoteModifier): Unit

@RemoteComposable
@Composable
fun RemoteBox(
    modifier: RemoteModifier = RemoteModifier,
    contentAlignment: RemoteAlignment = RemoteAlignment.TopStart,
    content: @Composable () -> Unit
): Unit

import androidx.compose.remote.creation.compose.layout.RemoteAlignment
import androidx.compose.remote.creation.compose.layout.RemoteBox
import androidx.compose.remote.creation.compose.layout.RemoteText
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.background
import androidx.compose.remote.creation.compose.modifier.size
import androidx.compose.remote.creation.compose.state.rc
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.ui.graphics.Color

RemoteBox(
    modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
    contentAlignment = RemoteAlignment.Center,
) {
    RemoteBox(modifier = RemoteModifier.size(100.rdp).background(Color.Blue.rc))
    RemoteText(text = "Centered".rs, color = Color.White.rc)
}

import androidx.compose.remote.creation.compose.layout.RemoteAlignment
import androidx.compose.remote.creation.compose.layout.RemoteBox
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.background
import androidx.compose.remote.creation.compose.modifier.size
import androidx.compose.remote.creation.compose.state.rc
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.ui.graphics.Color

// Outer box centered
RemoteBox(
    modifier = RemoteModifier.size(200.rdp).background(Color.LightGray.rc),
    contentAlignment = RemoteAlignment.Center,
) {
    // Red box (150dp) also centered in outer box
    // It aligns its own children to TopStart
    RemoteBox(
        modifier = RemoteModifier.size(150.rdp).background(Color.Red.rc),
        contentAlignment = RemoteAlignment.TopStart,
    ) {
        RemoteBox(modifier = RemoteModifier.size(50.rdp).background(Color.Yellow.rc))

        // Nested depth to show stacking within aligned container
        RemoteBox(
            modifier = RemoteModifier.size(30.rdp).background(Color.Black.rc),
            contentAlignment = RemoteAlignment.Center,
        ) {
            RemoteBox(modifier = RemoteModifier.size(10.rdp).background(Color.White.rc))
        }
    }

    // Green box (100dp) centered in outer box (overlaps Red)
    // It aligns its own children to BottomEnd
    RemoteBox(
        modifier = RemoteModifier.size(100.rdp).background(Color.Green.rc),
        contentAlignment = RemoteAlignment.BottomEnd,
    ) {
        RemoteBox(modifier = RemoteModifier.size(40.rdp).background(Color.Magenta.rc))
    }

    // Blue box (50dp) centered in outer box (overlaps Green)
    // It aligns its own children to Center
    RemoteBox(
        modifier = RemoteModifier.size(50.rdp).background(Color.Blue.rc),
        contentAlignment = RemoteAlignment.Center,
    ) {
        RemoteBox(modifier = RemoteModifier.size(20.rdp).background(Color.Cyan.rc))
    }
}