410ece2df9
Phase 7, the second half. Every screen in this app is a `when` over a UI state -- loading, error, empty, loaded -- and every one of those changes was an unannounced cut: the spinner is there in one frame and the content is there in the next, with nothing saying they are the same screen answering the same question. `ScreenStateTransition` is M3's fade-through, which is the transition for content that replaces other content without being spatially related to it: the outgoing state fades out, the incoming one fades in and grows the last 8% into place. `SizeTransform(clip = false)`, so a tall loaded state does not stretch a short spinner on its way in. Specs from the theme's `MotionScheme`, effects for the fade and spatial for the scale. **The content key is the state's class, not the state.** This is the half that is easy to get wrong and impossible to see: keyed on the value, a screen re-runs the whole fade every time its loaded data changes -- a message arriving, a list growing by one -- so the screen flickers whenever anything happens, and every screenshot of it looks perfect. Keyed on the class, the animation runs when the state does and the data flows through untouched. There is a test for exactly that, and it is the more useful of the two. **Applied to 20 screens, and not to 15 others.** `AnimatedContent` is a layout node, so it can only wrap a `when` that is a composable's whole body. Where the `when` sits inside a `Column` whose branches use `Modifier.weight` -- the sign-in and create-profile flows, the frost signing and proposal screens, the two feed detail widgets, the four render helpers still on view models -- wrapping it would take those branches out of `ColumnScope`. The rule is mechanical, the reason is recorded once in `ScreenState.kt` rather than at each site, and the screens it excludes are named here rather than silently skipped. Reduced motion keeps the crossfade and drops the scale, which is the same position the navigation transitions take: what WCAG 2.3.3 and M3 ask to remove is movement, not the signal that something changed. **Most of this diff is indentation** -- 3,699 lines of it against 157 lines of substance, which is 21 screens gaining a wrapper and one helper being written. `git diff -w` shows the second number. **Verified by holding the clock still and looking at one frame**, which is the only frame that can tell a crossfade from a cut: during a transition both states are composed, and during a cut only ever one is. 639 jvm tests green; android and desktop compile. The audit's motion count goes 11 -> 13. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This is a Kotlin Multiplatform project targeting Android, iOS, Desktop (JVM).
-
/composeApp is for code that will be shared across your Compose Multiplatform applications. It contains several subfolders:
- commonMain is for code that’s common for all targets.
- Other folders are for Kotlin code that will be compiled for only the platform indicated in the folder name. For example, if you want to use Apple’s CoreCrypto for the iOS part of your Kotlin app, the iosMain folder would be the right place for such calls. Similarly, if you want to edit the Desktop (JVM) specific part, the jvmMain folder is the appropriate location.
-
/iosApp contains iOS applications. Even if you’re sharing your UI with Compose Multiplatform, you need this entry point for your iOS app. This is also where you should add SwiftUI code for your project.
Build and Run Android Application
To build and run the development version of the Android app, use the run configuration from the run widget in your IDE’s toolbar or build it directly from the terminal:
- on macOS/Linux
./gradlew :composeApp:assembleDebug - on Windows
.\gradlew.bat :composeApp:assembleDebug
Build and Run Desktop (JVM) Application
To build and run the development version of the desktop app, use the run configuration from the run widget in your IDE’s toolbar or run it directly from the terminal:
- on macOS/Linux
./gradlew :composeApp:run - on Windows
.\gradlew.bat :composeApp:run
Build and Run iOS Application
To build and run the development version of the iOS app, use the run configuration from the run widget in your IDE’s toolbar or open the /iosApp directory in Xcode and run it from there.
Learn more about Kotlin Multiplatform…