bumble-tech · manuel-martos · Apr 3, 2024 · Aug 19, 2023 · Sep 12, 2023 · Sep 18, 2023
diff --git a/...in/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt b/...in/kotlin/com/bumble/appyx/components/experimental/promoter/android/PromoterExperiment.kt
@@ -10,9 +10,9 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
-import androidx.compose.material.Button
 import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.Text
+import androidx.compose.material3.Button
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
@@ -29,12 +29,12 @@ import com.bumble.appyx.interactions.composable.AppyxInteractionsContainer
 import com.bumble.appyx.interactions.model.transition.Operation.Mode.IMMEDIATE
 import com.bumble.appyx.interactions.model.transition.Operation.Mode.KEYFRAME
 import com.bumble.appyx.interactions.ui.helper.AppyxComponentSetup
-import com.bumble.appyx.interactions.utils.ui.Element
 import com.bumble.appyx.interactions.utils.testing.TestTarget
 import com.bumble.appyx.interactions.utils.testing.TestTarget.Child1
 import com.bumble.appyx.interactions.utils.testing.TestTarget.Child2
 import com.bumble.appyx.interactions.utils.testing.TestTarget.Child3
 import com.bumble.appyx.interactions.utils.testing.TestTarget.Child4
+import com.bumble.appyx.interactions.utils.ui.Element
 import kotlin.math.roundToInt
 
 
@@ -71,8 +71,10 @@ fun PromoterExperiment(modifier: Modifier = Modifier) {
             .fillMaxSize()
     ) {
         val density = LocalDensity.current
-        val screenWidthPx = (LocalConfiguration.current.screenWidthDp * density.density).roundToInt()
-        val screenHeightPx = (LocalConfiguration.current.screenHeightDp * density.density).roundToInt()
+        val screenWidthPx =
+            (LocalConfiguration.current.screenWidthDp * density.density).roundToInt()
+        val screenHeightPx =
+            (LocalConfiguration.current.screenHeightDp * density.density).roundToInt()
 
         AppyxInteractionsContainer(
             appyxComponent = promoter,

diff --git a/...ntal/puzzle15/web/src/jsMain/kotlin/com/bumble/appyx/experimental/puzzle15/web/main.js.kt b/...ntal/puzzle15/web/src/jsMain/kotlin/com/bumble/appyx/experimental/puzzle15/web/main.js.kt
@@ -9,19 +9,21 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.bumble.appyx.components.experimental.puzzle15.ui.Puzzle15Ui
 import org.jetbrains.skiko.wasm.onWasmReady
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        Window("Puzzle15") {
+        CanvasBasedWindow("Puzzle15") {
             val requester = remember { FocusRequester() }
             var size by remember { mutableStateOf(IntSize.Zero) }
             Surface(

diff --git a/...ponents/internal/test-drive/android/screenshots/GesturesTest_drag_to_middle.png b/...ponents/internal/test-drive/android/screenshots/GesturesTest_drag_to_middle.png
diff --git a/...ed_to_the_second_position_when_dragged_back_then_first_element_is_visible_1.png b/...ed_to_the_second_position_when_dragged_back_then_first_element_is_visible_1.png
diff --git a/...ed_to_the_second_position_when_dragged_back_then_first_element_is_visible_2.png b/...ed_to_the_second_position_when_dragged_back_then_first_element_is_visible_2.png
diff --git a/...esTest_when_drag_past_maximum_value_then_second_at_maximum_value_is_visible.png b/...esTest_when_drag_past_maximum_value_then_second_at_maximum_value_is_visible.png
diff --git a/...screenshots/GesturesTest_when_released_after_threshold_snaps_to_destination.png b/...screenshots/GesturesTest_when_released_after_threshold_snaps_to_destination.png
diff --git a/...oid/screenshots/GesturesTest_when_released_before_threshold_snaps_to_origin.png b/...oid/screenshots/GesturesTest_when_released_before_threshold_snaps_to_origin.png
diff --git a/...al/test-drive/android/screenshots/KeyframesTest_basic_behaviour_all_at_once.png b/...al/test-drive/android/screenshots/KeyframesTest_basic_behaviour_all_at_once.png
diff --git a/...al/test-drive/android/screenshots/KeyframesTest_basic_behaviour_one_segment.png b/...al/test-drive/android/screenshots/KeyframesTest_basic_behaviour_one_segment.png
diff --git a/...nal/test-drive/android/screenshots/KeyframesTest_basic_behaviour_sequential.png b/...nal/test-drive/android/screenshots/KeyframesTest_basic_behaviour_sequential.png
diff --git a/...ramesTest_when_keyframe_is_running_then_possible_to_enqueue_more_operations.png b/...ramesTest_when_keyframe_is_running_then_possible_to_enqueue_more_operations.png
diff --git a/.../screenshots/KeyframesTest_when_passing_segment_threshold_then_no_artefacts.png b/.../screenshots/KeyframesTest_when_passing_segment_threshold_then_no_artefacts.png
diff --git a/...oid/screenshots/KeyframesToUpdateTest_when_in_segment_interrupt_with_update.png b/...oid/screenshots/KeyframesToUpdateTest_when_in_segment_interrupt_with_update.png
diff --git a/...internal/test-drive/android/screenshots/UpdateTest_basic_behaviour_multiple.png b/...internal/test-drive/android/screenshots/UpdateTest_basic_behaviour_multiple.png
diff --git a/...ternal/test-drive/android/screenshots/UpdateTest_basic_behaviour_one_update.png b/...ternal/test-drive/android/screenshots/UpdateTest_basic_behaviour_one_update.png
diff --git a/...shots/UpdateToKeyframesTest_when_animation_settles_go_back_to_keyframe_mode.png b/...shots/UpdateToKeyframesTest_when_animation_settles_go_back_to_keyframe_mode.png
diff --git a/...creenshots/UpdateToKeyframesTest_when_update_not_settled_keyframe_is_update.png b/...creenshots/UpdateToKeyframesTest_when_update_not_settled_keyframe_is_update.png
diff --git a/...st/kotlin/com/bumble/appyx/components/internal/testdrive/android/helper/TestDriveUtils.kt b/...st/kotlin/com/bumble/appyx/components/internal/testdrive/android/helper/TestDriveUtils.kt
@@ -6,7 +6,7 @@ import androidx.compose.animation.core.SpringSpec
 import androidx.compose.animation.core.spring
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.Surface
+import androidx.compose.material3.Surface
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalDensity

diff --git a/.../SpotlightViewpointTest_when_keyframe_operation_then_scroll_using_viewpoint.png b/.../SpotlightViewpointTest_when_keyframe_operation_then_scroll_using_viewpoint.png
diff --git a/...s/SpotlightViewpointTest_when_update__operation_then_scroll_using_viewpoint.png b/...s/SpotlightViewpointTest_when_update__operation_then_scroll_using_viewpoint.png
diff --git a/...ractions/android-utils/src/main/java/com/bumble/appyx/interactions/utils/testing/Utils.kt b/...ractions/android-utils/src/main/java/com/bumble/appyx/interactions/utils/testing/Utils.kt
@@ -5,8 +5,8 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.Surface
-import androidx.compose.material.Text
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier

diff --git a/...common/src/jsMain/kotlin/com/bumble/appyx/navigation/integration/BrowserViewportWindow.kt b/...common/src/jsMain/kotlin/com/bumble/appyx/navigation/integration/BrowserViewportWindow.kt
@@ -23,10 +23,11 @@ private const val CANVAS_ELEMENT_ID = "ComposeTarget" // Hardwired into ComposeW
 /**
  * A Skiko/Canvas-based top-level window using the browser's entire viewport. Supports resizing.
  */
+@Composable
 @Suppress("FunctionNaming")
 fun BrowserViewportWindow(
     title: String = "Untitled",
-    content: @Composable ComposeWindow.() -> Unit
+    content: @Composable () -> Unit
 ) {
     val htmlHeadElement = document.head!!
     htmlHeadElement.appendChild(
@@ -59,7 +60,7 @@ fun BrowserViewportWindow(
         fillViewportSize()
     }
 
-    ComposeWindow().apply {
+    ComposeWindow(canvasId = "Appyx", content = content).apply {
         window.addEventListener("resize", {
             canvas.fillViewportSize()
             layer.layer.attachTo(canvas)
@@ -77,9 +78,5 @@ fun BrowserViewportWindow(
                     ?: document.createElement("title").also { htmlHeadElement.appendChild(it) }
                 ) as HTMLTitleElement
         htmlTitleElement.textContent = title
-
-        setContent {
-            content(this)
-        }
     }
 }
diff --git a/demos/appyx-interactions/android/lint-baseline.xml b/demos/appyx-interactions/android/lint-baseline.xml
@@ -1,4 +1,59 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<issues format="6" by="lint 7.4.0" type="baseline" client="gradle" dependencies="false" name="AGP (7.4.0)" variant="all" version="7.4.0">
+<issues format="6" by="lint 8.2.1" type="baseline" client="gradle" dependencies="false" name="AGP (8.2.1)" variant="all" version="8.2.1">
+
+    <issue
+        id="UsingMaterialAndMaterial3Libraries"
+        message="Using a material import while also using the material3 library"
+        errorLine1="import androidx.compose.material.FractionalThreshold"
+        errorLine2="       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
+        <location
+            file="src/main/kotlin/com/bumble/appyx/interactions/sample/KnobControl.kt"
+            line="12"
+            column="8"/>
+    </issue>
+
+    <issue
+        id="UsingMaterialAndMaterial3Libraries"
+        message="Using a material import while also using the material3 library"
+        errorLine1="import androidx.compose.material.rememberSwipeableState"
+        errorLine2="       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
+        <location
+            file="src/main/kotlin/com/bumble/appyx/interactions/sample/KnobControl.kt"
+            line="13"
+            column="8"/>
+    </issue>
+
+    <issue
+        id="UsingMaterialAndMaterial3Libraries"
+        message="Using a material import while also using the material3 library"
+        errorLine1="import androidx.compose.material.swipeable"
+        errorLine2="       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
+        <location
+            file="src/main/kotlin/com/bumble/appyx/interactions/sample/KnobControl.kt"
+            line="14"
+            column="8"/>
+    </issue>
+
+    <issue
+        id="UsingMaterialAndMaterial3Libraries"
+        message="Using a material import while also using the material3 library"
+        errorLine1="import androidx.compose.material.Button"
+        errorLine2="       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
+        <location
+            file="src/main/kotlin/com/bumble/appyx/interactions/sample/SpotlightExperiment.kt"
+            line="12"
+            column="8"/>
+    </issue>
+
+    <issue
+        id="UsingMaterialAndMaterial3Libraries"
+        message="Using a material import while also using the material3 library"
+        errorLine1="import androidx.compose.material.Text"
+        errorLine2="       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~">
+        <location
+            file="src/main/kotlin/com/bumble/appyx/interactions/sample/SpotlightExperiment.kt"
+            line="13"
+            column="8"/>
+    </issue>
 
 </issues>
diff --git a/demos/appyx-interactions/web/src/jsMain/kotlin/com/bumble/appyx/interactions/main.js.kt b/demos/appyx-interactions/web/src/jsMain/kotlin/com/bumble/appyx/interactions/main.js.kt
@@ -7,11 +7,12 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.bumble.appyx.components.internal.testdrive.TestDriveExperiment
 import com.bumble.appyx.components.internal.testdrive.ui.md_amber_500
 import com.bumble.appyx.components.internal.testdrive.ui.md_blue_500
@@ -53,9 +54,10 @@ enum class InteractionTarget {
     Child1
 }
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     onWasmReady {
-        Window("Appyx") {
+        CanvasBasedWindow("Appyx") {
             var size by remember { mutableStateOf(IntSize.Zero) }
             Surface(
                 modifier = Modifier

diff --git a/demos/appyx-navigation/common/build.gradle.kts b/demos/appyx-navigation/common/build.gradle.kts
@@ -38,7 +38,7 @@ kotlin {
                 api(project(":utils:utils-customisations"))
                 api(project(":utils:utils-material3"))
                 api(project(":utils:utils-multiplatform"))
-                api(project(":demos:image-loader:image-loader"))
+                api(project(":demos:image-loader:loader"))
                 implementation(project(":appyx-components:experimental:cards:cards"))
                 implementation(project(":appyx-components:experimental:promoter:promoter"))
                 implementation(project(":appyx-components:standard:backstack:backstack"))

diff --git a/...mmon/src/commonMain/kotlin/com/bumble/appyx/demos/navigation/node/checkout/CartContent.kt b/...mmon/src/commonMain/kotlin/com/bumble/appyx/demos/navigation/node/checkout/CartContent.kt
@@ -28,14 +28,13 @@ import androidx.compose.material.icons.filled.Delete
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Card
-import androidx.compose.material3.DismissDirection.EndToStart
-import androidx.compose.material3.DismissValue
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.SwipeToDismiss
+import androidx.compose.material3.SwipeToDismissBox
+import androidx.compose.material3.SwipeToDismissBoxValue
 import androidx.compose.material3.Text
-import androidx.compose.material3.rememberDismissState
+import androidx.compose.material3.rememberSwipeToDismissBoxState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
@@ -118,12 +117,12 @@ private fun LazyItemScope.CartListItem(
     val quantity = cakeToQuantity.second
     val coroutineScope = rememberCoroutineScope()
 
-    val dismissState = rememberDismissState(confirmValueChange = { dismissValue ->
+    val dismissState = rememberSwipeToDismissBoxState(confirmValueChange = { dismissValue ->
         when (dismissValue) {
-            DismissValue.Default,
-            DismissValue.DismissedToEnd -> false
+            SwipeToDismissBoxValue.Settled,
+            SwipeToDismissBoxValue.StartToEnd -> false
 
-            DismissValue.DismissedToStart -> {
+            SwipeToDismissBoxValue.EndToStart -> {
                 coroutineScope.launch {
                     delay(250)
                     onDeleteCake(cake)
@@ -133,21 +132,21 @@ private fun LazyItemScope.CartListItem(
         }
     })
 
-    SwipeToDismiss(
+    SwipeToDismissBox(
         modifier = Modifier.animateItemPlacement(),
         state = dismissState,
-        directions = setOf(EndToStart),
-        background = { CartItemDismissBackground() },
-        dismissContent = {
-            CardItem(
-                cake = cake,
-                quantity = quantity,
-                onGoToCake = onGoToCake,
-                plusOneCakeAction = onPlusOneCake,
-                minusOneCakeAction = onMinusOneCake,
-            )
-        },
-    )
+        enableDismissFromStartToEnd = false,
+        enableDismissFromEndToStart = true,
+        backgroundContent = { CartItemDismissBackground() },
+    ) {
+        CardItem(
+            cake = cake,
+            quantity = quantity,
+            onGoToCake = onGoToCake,
+            plusOneCakeAction = onPlusOneCake,
+            minusOneCakeAction = onMinusOneCake,
+        )
+    }
 }
 
 @Composable

diff --git a/...s/image-loader/common/src/commonMain/kotlin/com/bumble/appyx/imageloader/ResourceImage.kt b/...s/image-loader/common/src/commonMain/kotlin/com/bumble/appyx/imageloader/ResourceImage.kt
@@ -12,11 +12,11 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.withContext
-import org.jetbrains.compose.resources.ExperimentalResourceApi
-import org.jetbrains.compose.resources.resource
+import org.jetbrains.compose.resources.InternalResourceApi
+import org.jetbrains.compose.resources.readResourceBytes
 
+@OptIn(InternalResourceApi::class)
 @Suppress("TooGenericExceptionCaught", "SwallowedException")
-@OptIn(ExperimentalResourceApi::class)
 @Composable
 fun ResourceImage(
     path: String,
@@ -29,13 +29,11 @@ fun ResourceImage(
     LaunchedEffect(Unit) {
         image = withContext(Dispatchers.Default) {
             try {
-                resource(path)
-                    .readBytes()
+                readResourceBytes(path)
                     .toImageBitmap()
             } catch (e: Throwable) {
                 try {
-                    resource(fallbackUrl)
-                        .readBytes()
+                    readResourceBytes(fallbackUrl)
                         .toImageBitmap()
                 } catch (e: Throwable) {
                     null

diff --git a/...s/backstack/fader/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/fader/main.js.kt b/...s/backstack/fader/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/fader/main.js.kt
@@ -8,18 +8,20 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.bumble.appyx.demos.appyxSample
 import com.bumble.appyx.demos.common.color_dark
 
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     appyxSample {
-        Window("Appyx") {
+        CanvasBasedWindow("Appyx") {
             var size by remember { mutableStateOf(IntSize.Zero) }
             Surface(
                 modifier = Modifier

diff --git a/...stack/parallax/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/parallax/main.js.kt b/...stack/parallax/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/parallax/main.js.kt
@@ -8,18 +8,20 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.bumble.appyx.demos.appyxSample
 import com.bumble.appyx.demos.common.color_dark
 
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     appyxSample {
-        Window("Appyx") {
+        CanvasBasedWindow("Appyx") {
             var size by remember { mutableStateOf(IntSize.Zero) }
             Surface(
                 modifier = Modifier

diff --git a/...backstack/slider/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/slider/main.js.kt b/...backstack/slider/web/src/jsMain/kotlin/com/bumble/appyx/demos/backstack/slider/main.js.kt
@@ -8,18 +8,20 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.CanvasBasedWindow
 import com.bumble.appyx.demos.appyxSample
 import com.bumble.appyx.demos.common.color_dark
 
 
+@OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     appyxSample {
-        Window("Appyx") {
+        CanvasBasedWindow("Appyx") {
             var size by remember { mutableStateOf(IntSize.Zero) }
             Surface(
                 modifier = Modifier