wip

.run/web-wasm-release.run.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="web-release" type="GradleRunConfiguration" factoryName="Gradle">
+  <configuration default="false" name="web-wasm-release" type="GradleRunConfiguration" factoryName="Gradle">
     <ExternalSystemSettings>
       <option name="executionName" />
       <option name="externalProjectPath" value="$PROJECT_DIR$" />

.run/web-wasm.run.xml

@@ -1,5 +1,5 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="web" type="GradleRunConfiguration" factoryName="Gradle">
+  <configuration default="false" name="web-wasm" type="GradleRunConfiguration" factoryName="Gradle">
     <ExternalSystemSettings>
       <option name="executionName" />
       <option name="externalProjectPath" value="$PROJECT_DIR$" />

app/build.gradle.kts

@@ -1,7 +1,6 @@
 import com.codingfeline.buildkonfig.compiler.FieldSpec.Type.INT
 import com.codingfeline.buildkonfig.compiler.FieldSpec.Type.STRING
 import org.jetbrains.compose.desktop.application.dsl.TargetFormat
-import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
 import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 import org.jetbrains.kotlin.gradle.dsl.JvmTarget
 import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
@@ -25,6 +24,16 @@ buildkonfig {
 }
 
 kotlin {
+    js {
+        moduleName = "app"
+        browser {
+            commonWebpackConfig {
+                outputFileName = "app.js"
+            }
+        }
+        binaries.executable()
+    }
+
     @OptIn(ExperimentalWasmDsl::class)
     wasmJs {
         moduleName = "app"
@@ -45,7 +54,6 @@ kotlin {
     }
 
     androidTarget {
-        @OptIn(ExperimentalKotlinGradlePluginApi::class)
         compilerOptions {
             jvmTarget.set(JvmTarget.JVM_17)
         }
@@ -136,8 +144,11 @@ kotlin {
             implementation(libs.kstore.file)
         }
 
+        jsMain.dependencies {
+            implementation(npm("jszip", "3.10.1"))
+        }
+
         wasmJsMain.dependencies {
-            implementation(libs.kstore.storage)
             implementation(npm("jszip", "3.10.1"))
         }
 
@@ -148,6 +159,16 @@ kotlin {
             desktopMain.dependsOn(this)
         }
 
+        val browserMain by creating {
+            dependsOn(commonMain.get())
+            wasmJsMain.get().dependsOn(this)
+            jsMain.get().dependsOn(this)
+
+            dependencies {
+                implementation(libs.kstore.storage)
+            }
+        }
+
         val mobileMain by creating {
             dependsOn(commonMain.get())
             androidMain.get().dependsOn(this)

app/src/browserMain/kotlin/com/materialkolor/builder/core/BrowserRegex.kt

@@ -0,0 +1,18 @@
+package com.materialkolor.builder.core
+
+private val REGEX1 = Regex(
+    pattern = "(android|bb\\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series([46])0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino",
+    options = setOf(RegexOption.IGNORE_CASE),
+)
+
+private val REGEX2 = Regex(
+    pattern = "1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br([ev])w|bumb|bw-([nu])|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly([-_])|g1 u|g560|gene|gf-5|g-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \\-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c([-01])|47|mc|nd|ri)|sgh-|shar|sie([-m])|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel([im])|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c([- ])|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-",
+    options = setOf(RegexOption.IGNORE_CASE),
+)
+
+internal fun isMobileBrowser(userAgent: String, vendor: String): Boolean {
+    return REGEX1.containsMatchIn(userAgent) ||
+        REGEX2.containsMatchIn(userAgent.substring(0, 4)) ||
+        REGEX1.containsMatchIn(vendor) ||
+        REGEX2.containsMatchIn(vendor.substring(0, 4))
+}

app/src/browserMain/kotlin/com/materialkolor/builder/core/Platform.browser.kt

@@ -0,0 +1,7 @@
+package com.materialkolor.builder.core
+
+actual val shareToClipboard: Boolean = true
+
+actual fun shareUrl(url: String) {
+    copyTextToClipboard(url)
+}

app/src/browserMain/resources/index.html

@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <!-- Primary Meta Tags -->
+    <title>Material Kolor Builder - Create Material 3 Color Schemes</title>
+    <meta
+        name="title"
+        content="Material Kolor Builder - Create Material 3 Color Schemes"
+    />
+    <meta
+        name="description"
+        content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
+    />
+    <meta
+        name="keywords"
+        content="Material You, Material Design 3, color scheme, theme generator, MaterialKolor, Kotlin Multiplatform, Compose Multiplatform, Kotlin, Compose"
+    />
+    <meta name="author" content="Jordon de Hoog"/>
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website"/>
+    <meta property="og:url" content="https://materialkolor.com"/>
+    <meta
+        property="og:title"
+        content="Material Kolor Builder - Create Material 3 Color Schemes"
+    />
+    <meta
+        property="og:description"
+        content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
+    />
+    <meta
+        property="og:image"
+        content="https://materialkolor.com/meta.png"
+    />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image"/>
+    <meta property="twitter:url" content="https://materialkolor.com"/>
+    <meta
+        property="twitter:title"
+        content="Material Kolor Builder - Create Material 3 Color Schemes"
+    />
+    <meta
+        property="twitter:description"
+        content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
+    />
+    <meta
+        property="twitter:image"
+        content="https://materialkolor.com/meta.png"
+    />
+
+    <!-- Favicon -->
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/>
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/>
+    <link rel="manifest" href="/site.webmanifest"/>
+
+    <!-- Styles and Scripts -->
+    <link href="styles.css" rel="stylesheet" type="text/css"/>
+    <script src="app.js" type="application/javascript"></script>
+</head>
+    <body>
+        <div id="warning">
+            ⚠️ This page using <b>experimental Kotlin/Wasm</b> requires:
+            <ul>
+                <li>Hardware acceleration enabled</li>
+                <li>Chrome version >= 119, or</li>
+                <li>Firefox version >= 120</li>
+            </ul>
+        </div>
+
+        <script>
+            window.kotlinWasmInitialized = false;
+        </script>
+
+        <script>
+            setTimeout(() => {
+                if (!window.kotlinWasmInitialized) {
+                    document.getElementById('warning').style.display = 'block';
+                }
+            }, 2000);
+        </script>
+    </body>
+</html>

app/src/browserMain/resources/styles.css

@@ -0,0 +1,28 @@
+body {
+    margin: 0;
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#warning {
+    background-color: #fff3cd;
+    border: 1px solid #ffeeba;
+    color: #856404;
+    padding: 1rem;
+    border-radius: 0.25rem;
+    display: none;
+    width: fit-content;
+    max-width: 90vw;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1000;
+}
+
+#warning ul {
+    margin-bottom: 0;
+    padding-left: 1.5rem;
+}

app/src/jsMain/kotlin/com/materialkolor/builder/core/Clipboard.js.kt

@@ -0,0 +1,7 @@
+package com.materialkolor.builder.core
+
+import kotlinx.browser.window
+
+internal actual fun copyTextToClipboard(text: String) {
+    window.navigator.clipboard.writeText(text)
+}

app/src/jsMain/kotlin/com/materialkolor/builder/core/LinkLauncher.js.kt

@@ -0,0 +1,7 @@
+package com.materialkolor.builder.core
+
+import kotlinx.browser.window
+
+internal actual fun launchUrl(url: String) {
+    window.open(url, target = "_blank")
+}

app/src/jsMain/kotlin/com/materialkolor/builder/core/Platform.js.kt

@@ -0,0 +1,48 @@
+package com.materialkolor.builder.core
+
+import com.mohamedrejeb.calf.core.PlatformContext
+import kotlinx.browser.window
+import kotlinx.coroutines.channels.awaitClose
+import kotlinx.coroutines.flow.Flow
+import kotlinx.coroutines.flow.callbackFlow
+import org.w3c.dom.events.Event
+
+private const val EVENT_NAME = "popstate"
+
+actual val baseUrl: String
+    get() = window.location.origin
+
+actual val isMobile: Boolean
+    get() = isMobileBrowser(window.navigator.userAgent, window.navigator.vendor)
+
+/**
+ * Only support exporting on desktops
+ */
+actual val exportSupported: Boolean
+    get() = !isMobile
+
+actual val platformContext: PlatformContext
+    get() = PlatformContext.INSTANCE
+
+actual fun updatePlatformQueryParams(queryParams: String) {
+    // TODO: Add setting to enable/disable undo
+    window.history.pushState(null, "", queryParams)
+}
+
+actual fun readPlatformQueryParams(): String? {
+    return window.location.search.takeIf { it.isNotBlank() }
+}
+
+actual fun observePlatformQueryParams(): Flow<String> = callbackFlow {
+    val callback: (Event) -> Unit = {
+        val params = readPlatformQueryParams()
+        if (params != null) {
+            trySend(params)
+        }
+    }
+
+    window.addEventListener(EVENT_NAME, callback)
+    awaitClose {
+        window.removeEventListener(EVENT_NAME, callback)
+    }
+}

app/src/jsMain/kotlin/com/materialkolor/builder/export/Export.js.kt

@@ -0,0 +1,43 @@
+package com.materialkolor.builder.export
+
+import com.materialkolor.builder.export.model.ExportFile
+import kotlinx.browser.document
+import kotlinx.coroutines.await
+import org.w3c.dom.HTMLAnchorElement
+import org.w3c.dom.url.URL
+import org.w3c.files.Blob
+import kotlin.js.Promise
+
+@JsModule("jszip")
+@JsNonModule
+external class JSZip {
+
+    fun file(name: String, data: String)
+    fun generateAsync(options: dynamic = definedExternally): Promise<dynamic>
+}
+
+actual suspend fun exportFiles(list: List<ExportFile>) {
+    val blob = createZipBlob(list)
+    offerFileForDownload(blob, "theme.zip")
+}
+
+private suspend fun createZipBlob(files: List<ExportFile>): Blob {
+    val zip = JSZip()
+
+    files.forEach { file ->
+        zip.file(file.name, file.content)
+    }
+
+    return zip.generateAsync(createParams()).await()
+}
+
+private fun createParams(): dynamic = js("({ type: 'blob' })")
+
+private fun offerFileForDownload(blob: Blob, filename: String) {
+    val url = URL.createObjectURL(blob)
+    val a = document.createElement("a") as HTMLAnchorElement
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+}

app/src/jsMain/kotlin/com/materialkolor/builder/main.kt

@@ -0,0 +1,35 @@
+package com.materialkolor.builder
+
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.ExperimentalComposeUiApi
+import androidx.compose.ui.window.ComposeViewport
+import com.materialkolor.builder.core.readPlatformQueryParams
+import com.materialkolor.builder.settings.DESTINATION_QUERY_PARAM
+import com.materialkolor.builder.settings.store.entity.splitQueryParams
+import com.materialkolor.builder.ui.App
+import kotlinx.browser.document
+import org.jetbrains.skiko.wasm.onWasmReady
+
+@OptIn(ExperimentalComposeUiApi::class)
+fun main() {
+    onWasmReady {
+        document.getElementById("warning")?.remove()
+        ComposeViewport(document.body!!) {
+            LaunchedEffect(Unit) {
+                initWasm()
+            }
+
+            val initialDestination = extractInitialDestination()
+            App(initialDestination)
+        }
+    }
+}
+
+private fun initWasm() {
+    js("window.kotlinWasmInitialized = true")
+}
+
+private fun extractInitialDestination(): String? {
+    val query = readPlatformQueryParams() ?: return null
+    return query.splitQueryParams()[DESTINATION_QUERY_PARAM]
+}

app/src/wasmJsMain/kotlin/com/materialkolor/builder/core/Platform.wasmJs.kt

@@ -7,29 +7,19 @@ import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.callbackFlow
 import org.w3c.dom.events.Event
 
-private val REGEX1 = Regex(
-    pattern = "(android|bb\\d+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series([46])0|symbian|treo|up\\.(browser|link)|vodafone|wap|windows ce|xda|xiino",
-    options = setOf(RegexOption.IGNORE_CASE),
-)
-
-private val REGEX2 = Regex(
-    pattern = "1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br([ev])w|bumb|bw-([nu])|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly([-_])|g1 u|g560|gene|gf-5|g-mo|go(\\.w|od)|gr(ad|un)|haie|hcit|hd-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \\-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|/([klu])|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c([-01])|47|mc|nd|ri)|sgh-|shar|sie([-m])|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel([im])|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c([- ])|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-",
-    options = setOf(RegexOption.IGNORE_CASE),
-)
-
 private const val EVENT_NAME = "popstate"
 
 actual val baseUrl: String
     get() = window.location.origin
 
 actual val isMobile: Boolean
-    get() = isMobileBrowser()
+    get() = isMobileBrowser(window.navigator.userAgent, window.navigator.vendor)
 
 /**
  * Only support exporting on desktops
  */
 actual val exportSupported: Boolean
-    get() = !isMobileBrowser()
+    get() = !isMobile
 
 actual val platformContext: PlatformContext
     get() = PlatformContext.INSTANCE
@@ -56,19 +46,3 @@ actual fun observePlatformQueryParams(): Flow<String> = callbackFlow {
         window.removeEventListener(EVENT_NAME, callback)
     }
 }
-
-actual val shareToClipboard: Boolean = true
-
-actual fun shareUrl(url: String) {
-    copyTextToClipboard(url)
-}
-
-private fun isMobileBrowser(): Boolean {
-    val userAgent = window.navigator.userAgent
-    val vendor = window.navigator.vendor
-
-    return REGEX1.containsMatchIn(userAgent) ||
-        REGEX2.containsMatchIn(userAgent.substring(0, 4)) ||
-        REGEX1.containsMatchIn(vendor) ||
-        REGEX2.containsMatchIn(vendor.substring(0, 4))
-}

app/src/wasmJsMain/kotlin/com/materialkolor/builder/main.kt

@@ -1,5 +1,6 @@
 package com.materialkolor.builder
 
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
 import com.materialkolor.builder.core.readPlatformQueryParams
@@ -11,11 +12,19 @@ import kotlinx.browser.document
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
     ComposeViewport(document.body!!) {
+        LaunchedEffect(Unit) {
+            initWasm()
+        }
+
         val initialDestination = extractInitialDestination()
         App(initialDestination)
     }
 }
 
+private fun initWasm() {
+    js("window.kotlinWasmInitialized = true")
+}
+
 private fun extractInitialDestination(): String? {
     val query = readPlatformQueryParams() ?: return null
     return query.splitQueryParams()[DESTINATION_QUERY_PARAM]

app/src/wasmJsMain/resources/index.html

@@ -1,66 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
-    <!-- Primary Meta Tags -->
-    <title>Material Kolor Builder - Create Material 3 Color Schemes</title>
-    <meta
-      name="title"
-      content="Material Kolor Builder - Create Material 3 Color Schemes"
-    />
-    <meta
-      name="description"
-      content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
-    />
-    <meta
-      name="keywords"
-      content="Material You, Material Design 3, color scheme, theme generator, MaterialKolor, Kotlin Multiplatform, Compose Multiplatform, Kotlin, Compose"
-    />
-    <meta name="author" content="Jordon de Hoog" />
-
-    <!-- Open Graph / Facebook -->
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="https://materialkolor.com" />
-    <meta
-      property="og:title"
-      content="Material Kolor Builder - Create Material 3 Color Schemes"
-    />
-    <meta
-      property="og:description"
-      content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
-    />
-    <meta
-      property="og:image"
-      content="https://materialkolor.com/meta.png"
-    />
-
-    <!-- Twitter -->
-    <meta property="twitter:card" content="summary_large_image" />
-    <meta property="twitter:url" content="https://materialkolor.com" />
-    <meta
-      property="twitter:title"
-      content="Material Kolor Builder - Create Material 3 Color Schemes"
-    />
-    <meta
-      property="twitter:description"
-      content="Generate Material 3 color schemes from a single color. Create, customize, and export Material Design 3 themes for Android or Compose Multiplatform apps with ease."
-    />
-    <meta
-      property="twitter:image"
-      content="https://materialkolor.com/meta.png"
-    />
-
-    <!-- Favicon -->
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/site.webmanifest" />
-
-    <!-- Styles and Scripts -->
-    <link href="styles.css" rel="stylesheet" type="text/css" />
-    <script src="app.js" type="application/javascript"></script>
-  </head>
-  <body></body>
-</html>

app/src/wasmJsMain/resources/styles.css

@@ -1,7 +0,0 @@
-html, body {
-    width: 100%;
-    height: 100%;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-}

gradle.properties

@@ -13,6 +13,7 @@ android.nonTransitiveRClass=true
 android.useAndroidX=true
 
 # Kotlin Multiplatform
+org.jetbrains.compose.experimental.jscanvas.enabled=true
 kotlin.mpp.enableCInteropCommonization=true
 kotlin.mpp.androidGradlePluginCompatibility.nowarn=true
 kotlin.apple.xcodeCompatibility.nowarn=true