Add a common BoxWithConstraints layout composable

It has been tested manually in an internal project on JVM desktop, but not on JS DOM yet.

Since the APIs provided, especially those members of `BoxWithConstraintsScope`, are a subset of the corresponding `androidx.compose` ones, also consider moving it out of the `ext` package. The counterargument is that `minWidth` and `minHeight` of `androidx.compose.foundation.layout.BoxWithConstraintsScope` seem not possible to be supported on JS DOM, which is the reason why it's still kept in the `ext` package.

Add a `CommonModifier` typealias BTW.

Author: ShreckYe

README.md

@@ -30,6 +30,10 @@ This project is still in development and has not reached the stable state yet. S
 - `Row` (via flexbox on JS, based on Kobweb)
 - `Spacer`
 
+###### `ext` layouts
+
+ - `BoxWithConstraints`
+
 ##### Lazy
 
 - `LazyColumn` (via flexbox on JS, based on Kobweb)

compose-multiplatform-common/src/androidxCommonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/BoxWithConstraints.androidxCommon.kt

@@ -0,0 +1,29 @@
+package com.huanshankeji.compose.foundation.layout.ext
+
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.unit.Dp
+import com.huanshankeji.compose.foundation.ExperimentalFoundationApi
+import com.huanshankeji.compose.ui.Alignment
+import com.huanshankeji.compose.ui.Modifier
+
+@ExperimentalFoundationApi
+@Composable
+actual fun BoxWithConstraints(
+    modifier: Modifier,
+    contentAlignment: Alignment,
+    content: @Composable BoxWithConstraintsScope.() -> Unit
+) =
+    androidx.compose.foundation.layout.BoxWithConstraints(
+        modifier.platformModifier, contentAlignment.platformAlignment/*, false*/
+    ) {
+        BoxWithConstraintsScopeImpl(this, maxWidth, maxHeight).content()
+    }
+
+@Stable
+class BoxWithConstraintsScopeImpl(
+    override val platformBoxScope: BoxScope,
+    override val maxWidth: Dp,
+    override val maxHeight: Dp
+) : BoxWithConstraintsScope

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/BoxWithConstraints.kt

@@ -0,0 +1,27 @@
+package com.huanshankeji.compose.foundation.layout.ext
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.Stable
+import androidx.compose.ui.unit.Dp
+import com.huanshankeji.compose.foundation.ExperimentalFoundationApi
+import com.huanshankeji.compose.foundation.layout.BoxScope
+import com.huanshankeji.compose.ui.Alignment
+import com.huanshankeji.compose.ui.Modifier
+
+// copied and adapted from `androidx.compose.foundation.layout`
+
+@ExperimentalFoundationApi
+@Composable
+//@UiComposable
+expect fun BoxWithConstraints(
+    modifier: Modifier = Modifier,
+    contentAlignment: Alignment = Alignment.TopStart,
+    //propagateMinConstraints: Boolean = false,
+    content: @Composable /*@UiComposable*/ BoxWithConstraintsScope.() -> Unit
+)
+
+@Stable
+interface BoxWithConstraintsScope : BoxScope {
+    val maxWidth: Dp
+    val maxHeight: Dp
+}

compose-multiplatform-common/src/commonMain/kotlin/com/huanshankeji/compose/ui/Modifier.kt

@@ -5,4 +5,10 @@ expect interface Modifier {
     open infix fun then(other: Modifier): Modifier
     interface Element : Modifier
     companion object : Modifier
-}
+}
+
+/**
+ * This serves as a shortcut for code completion and an alternative name when you prefer another type taking the name `Modifier` in a file.
+ * In most cases, it's recommended to use [Modifier] directly.
+ */
+typealias CommonModifier = Modifier

compose-multiplatform-common/src/jsMain/kotlin/com/huanshankeji/compose/foundation/layout/ext/BoxWithConstraints.js.kt

@@ -0,0 +1,46 @@
+package com.huanshankeji.compose.foundation.layout.ext
+
+import androidx.compose.runtime.*
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.huanshankeji.compose.foundation.ExperimentalFoundationApi
+import com.huanshankeji.compose.foundation.layout.Box
+import com.huanshankeji.compose.ui.Alignment
+import com.huanshankeji.compose.ui.Modifier
+import com.varabyte.kobweb.compose.foundation.layout.BoxScope
+import com.varabyte.kobweb.compose.ui.attrsModifier
+
+@ExperimentalFoundationApi
+@Composable
+actual fun BoxWithConstraints(
+    modifier: Modifier,
+    contentAlignment: Alignment,
+    content: @Composable BoxWithConstraintsScope.() -> Unit
+) {
+    var clientSize by remember { mutableStateOf<ClientSize?>(null) }
+    Box(
+        Modifier.platformModify {
+            attrsModifier {
+                ref {
+                    clientSize = ClientSize(it.clientWidth, it.clientHeight)
+                    onDispose { clientSize = null }
+                }
+            }
+        }.then(modifier),
+        contentAlignment
+    ) {
+        clientSize?.let {
+            // TODO extra conversions might be needed in some cases when converting to `dp`
+            BoxWithConstraintsScopeImpl(platformBoxScope, it.clientWidth.dp, it.clientHeight.dp).content()
+        }
+    }
+}
+
+@Stable
+class BoxWithConstraintsScopeImpl(
+    override val platformBoxScope: BoxScope,
+    override val maxWidth: Dp,
+    override val maxHeight: Dp
+) : BoxWithConstraintsScope
+
+private class ClientSize(val clientWidth: Int, val clientHeight: Int)