Add desktop demo and rework demo modules

- Add :demo:desktopApp (Compose JVM desktop application) consuming the
  shared MainScreen.
- Move :wasmApp under :demo:wasmApp and consume the shared MainScreen.
- Migrate demo image picking from peekaboo-image-picker to FileKit.
- Set the demo Res class package to
  com.github.skydoves.colorpickercomposedemo.shared via packageOfResClass.
- Drop the GlobalScope/CoroutineScope constructor from ColorPickerController;
  ColorPicker now collects on a rememberCoroutineScope.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

22 files changed, 142 insertions, 193 deletions

diff --git a/build.gradle.kts b/build.gradle.kts
index 29d2ba4..8cda5ce 100644
--- a/build.gradle.kts
+++ b/build.gradle.kts
@@ -13,9 +13,9 @@ plugins {
   alias(libs.plugins.kotlin.binary.compatibility)
 }
 
-// Only the published library is API-stable. Demo, benchmark, and docs modules are not.
+// Only the published library is API-stable. Demo, benchmark, wasmApp, desktopApp, and docs modules are not.
 apiValidation {
-  ignoredProjects.addAll(listOf("androidApp", "shared", "benchmark", "wasmApp", "docs"))
+  ignoredProjects.addAll(listOf("androidApp", "shared", "benchmark", "wasmApp", "desktopApp", "docs"))
 }
 
 subprojects {
diff --git a/colorpicker-compose/api/desktop/colorpicker-compose.api b/colorpicker-compose/api/desktop/colorpicker-compose.api
index 928256a..047641c 100644
--- a/colorpicker-compose/api/desktop/colorpicker-compose.api
+++ b/colorpicker-compose/api/desktop/colorpicker-compose.api
@@ -41,8 +41,6 @@ public final class com/github/skydoves/colorpicker/compose/ColorEnvelope {
 public final class com/github/skydoves/colorpicker/compose/ColorPickerController {
 	public static final field $stable I
 	public fun <init> ()V
-	public fun <init> (Lkotlinx/coroutines/CoroutineScope;)V
-	public synthetic fun <init> (Lkotlinx/coroutines/CoroutineScope;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
 	public final fun getColorFlow (J)Lkotlinx/coroutines/flow/Flow;
 	public static synthetic fun getColorFlow$default (Lcom/github/skydoves/colorpicker/compose/ColorPickerController;JILjava/lang/Object;)Lkotlinx/coroutines/flow/Flow;
 	public final fun getDebounceDuration ()Ljava/lang/Long;
diff --git a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPicker.kt b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPicker.kt
index 7715695..f95c70c 100644
--- a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPicker.kt
+++ b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPicker.kt
@@ -23,6 +23,7 @@ import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
@@ -36,7 +37,6 @@ import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.layout.onSizeChanged
 import androidx.compose.ui.unit.IntSize
 import androidx.compose.ui.unit.toSize
-import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch
 
 /**
@@ -67,8 +67,9 @@ internal fun ColorPicker(
   var initialized by remember { mutableStateOf(false) }
 
   val debounceDuration = controller.debounceDuration
+  val coroutineScope = rememberCoroutineScope()
   DisposableEffect(key1 = controller, key2 = debounceDuration) {
-    val job = controller.coroutineScope.launch(Dispatchers.Main) {
+    val job = coroutineScope.launch {
       controller.getColorFlow(debounceDuration ?: 0).collect {
         onColorChanged(it)
       }
diff --git a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPickerController.kt b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPickerController.kt
index b0e3bac..fafd1f4 100644
--- a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPickerController.kt
+++ b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/ColorPickerController.kt
@@ -25,7 +25,6 @@ import androidx.compose.runtime.mutableFloatStateOf
 import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
-import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.geometry.Size
 import androidx.compose.ui.geometry.center
@@ -34,10 +33,7 @@ import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.graphics.Paint
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
-import kotlinx.coroutines.CoroutineScope
-import kotlinx.coroutines.DelicateCoroutinesApi
 import kotlinx.coroutines.FlowPreview
-import kotlinx.coroutines.GlobalScope
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
@@ -46,9 +42,8 @@ import kotlinx.coroutines.flow.filterNotNull
 
 /** Creates and remembers a [ColorPickerController] on the current composer. */
 @Composable
-public fun rememberColorPickerController(): ColorPickerController {
-  val scope = rememberCoroutineScope()
-  return remember { ColorPickerController(scope) }
+public fun rememberColorPickerController(): ColorPickerController = remember {
+  ColorPickerController()
 }
 
 /**
@@ -57,11 +52,7 @@ public fun rememberColorPickerController(): ColorPickerController {
  * with the [rememberColorPickerController] extension.
  */
 @Stable
-public class ColorPickerController
-@OptIn(DelicateCoroutinesApi::class)
-constructor(
-  internal val coroutineScope: CoroutineScope = GlobalScope,
-) {
+public class ColorPickerController {
   internal var canvasSize: Size = Size.Zero
     set(value) {
       if (value == field) {
@@ -105,7 +96,7 @@ constructor(
   /** An [ImageBitmap] to be drawn on the canvas as a wheel. */
   public var wheelBitmap: ImageBitmap? = null
 
-  internal val _debounceDuration: MutableState<Long?> = mutableStateOf(null)
+  private val _debounceDuration: MutableState<Long?> = mutableStateOf(null)
 
   /** A debounce duration for observing color changes. */
   public var debounceDuration: Long?
@@ -162,13 +153,13 @@ constructor(
   /** Whether a SaturationSlider is attached. */
   internal var isAttachedSaturationSlider: Boolean = false
 
-  internal var reviseTick = mutableIntStateOf(0)
+  internal val reviseTick = mutableIntStateOf(0)
 
-  private var _colorFlow = MutableStateFlow<ColorEnvelope?>(null)
+  private val colorFlow = MutableStateFlow<ColorEnvelope?>(null)
 
   @OptIn(FlowPreview::class)
   public fun getColorFlow(debounceDuration: Long = 0): Flow<ColorEnvelope> =
-    _colorFlow.filterNotNull().debounce(this.debounceDuration ?: debounceDuration)
+    colorFlow.filterNotNull().debounce(this.debounceDuration ?: debounceDuration)
 
   // Function that takes a coordinate and obtains a color
   // Also returns an adjusted coordinate if appropriate
@@ -317,7 +308,7 @@ constructor(
     source: ColorChangeSource = ColorChangeSource.Programmatic,
   ) {
     val color = _selectedColor.value
-    _colorFlow.value = ColorEnvelope(color, color.hexCode, fromUser, source)
+    colorFlow.value = ColorEnvelope(color, color.hexCode, fromUser, source)
   }
 
   /**
diff --git a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/PaletteContentScale.kt b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/PaletteContentScale.kt
index 57c9834..ea7675f 100644
--- a/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/PaletteContentScale.kt
+++ b/colorpicker-compose/src/commonMain/kotlin/com/github/skydoves/colorpicker/compose/PaletteContentScale.kt
@@ -31,7 +31,7 @@ public enum class PaletteContentScale {
    */
   CROP,
 
-  /**
+  /*
    * Scale the source with maintaining the source's aspect ratio
    * so that if both dimensions (width and height) of the source is smaller than the target size,
    * it will not be scaled.
diff --git a/demo/androidApp/build.gradle.kts b/demo/androidApp/build.gradle.kts
index 59e60d4..1c76a8e 100644
--- a/demo/androidApp/build.gradle.kts
+++ b/demo/androidApp/build.gradle.kts
@@ -18,7 +18,6 @@ import com.github.skydoves.colorpicker.compose.Configuration
 plugins {
   alias(libs.plugins.android.application)
   alias(libs.plugins.compose.compiler)
-  alias(libs.plugins.baseline.profile)
 }
 
 android {
@@ -52,15 +51,6 @@ android {
   lint {
     abortOnError = false
   }
-
-  buildTypes {
-    create("benchmark") {
-      initWith(buildTypes.getByName("release"))
-      signingConfig = signingConfigs.getByName("debug")
-      matchingFallbacks += listOf("release")
-      isDebuggable = false
-    }
-  }
 }
 
 dependencies {
@@ -69,7 +59,7 @@ dependencies {
   implementation(libs.compose.foundation)
   implementation(libs.compose.material)
   implementation(libs.compose.ui)
-  baselineProfile(project(":benchmark"))
+  implementation(libs.filekit.dialogs.compose)
 }
 
 kotlin {
diff --git a/demo/androidApp/src/main/kotlin/com/github/skydoves/colorpickercomposedemo/MainActivity.kt b/demo/androidApp/src/main/kotlin/com/github/skydoves/colorpickercomposedemo/MainActivity.kt
index 64a00ef..14e0276 100644
--- a/demo/androidApp/src/main/kotlin/com/github/skydoves/colorpickercomposedemo/MainActivity.kt
+++ b/demo/androidApp/src/main/kotlin/com/github/skydoves/colorpickercomposedemo/MainActivity.kt
@@ -28,11 +28,16 @@ import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.semantics.testTagsAsResourceId
+import io.github.vinceglb.filekit.FileKit
+import io.github.vinceglb.filekit.dialogs.init
 
 class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
 
+    // Initialize FileKit
+    FileKit.init(this)
+
     setContent {
       MaterialTheme(colors = darkColors()) {
         Box(
diff --git a/demo/desktopApp/build.gradle.kts b/demo/desktopApp/build.gradle.kts
new file mode 100644
index 0000000..db10789
--- /dev/null
+++ b/demo/desktopApp/build.gradle.kts
@@ -0,0 +1,39 @@
+import org.jetbrains.compose.desktop.application.dsl.TargetFormat
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+import org.jetbrains.kotlin.gradle.tasks.KotlinJvmCompile
+
+plugins {
+  alias(libs.plugins.kotlin.multiplatform)
+  alias(libs.plugins.jetbrains.compose)
+  alias(libs.plugins.compose.compiler)
+}
+
+kotlin {
+  jvm()
+
+  sourceSets {
+    jvmMain.dependencies {
+      implementation(compose.desktop.currentOs)
+      implementation(libs.filekit.dialogs.compose)
+
+      implementation(project(":demo:shared"))
+    }
+  }
+}
+
+compose.desktop {
+  application {
+    mainClass = "MainKt"
+    nativeDistributions {
+      targetFormats(TargetFormat.Dmg, TargetFormat.Msi, TargetFormat.Deb)
+      packageName = "ColorPickerComposeDemo"
+      packageVersion = "1.0.0"
+    }
+  }
+}
+
+tasks.withType<KotlinJvmCompile>().configureEach {
+  compilerOptions {
+    jvmTarget.set(JvmTarget.JVM_17)
+  }
+}
diff --git a/demo/desktopApp/src/jvmMain/kotlin/Main.kt b/demo/desktopApp/src/jvmMain/kotlin/Main.kt
new file mode 100644
index 0000000..79c16f3
--- /dev/null
+++ b/demo/desktopApp/src/jvmMain/kotlin/Main.kt
@@ -0,0 +1,32 @@
+/*
+ * Designed and developed by 2022 skydoves (Jaewoong Eum)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import androidx.compose.ui.window.Window
+import androidx.compose.ui.window.application
+import com.github.skydoves.colorpickercomposedemo.MainScreen
+import io.github.vinceglb.filekit.FileKit
+
+fun main() {
+  // Required so the image picker's native file dialog works on desktop.
+  FileKit.init("ColorPickerComposeDemo")
+  application {
+    Window(
+      onCloseRequest = ::exitApplication,
+      title = "ColorPicker Compose",
+    ) {
+      MainScreen()
+    }
+  }
+}
diff --git a/demo/shared/build.gradle.kts b/demo/shared/build.gradle.kts
index 40f3937..7c0af17 100644
--- a/demo/shared/build.gradle.kts
+++ b/demo/shared/build.gradle.kts
@@ -13,7 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@file:OptIn(ExperimentalWasmDsl::class)
+
 import com.github.skydoves.colorpicker.compose.Configuration
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
 
 plugins {
   alias(libs.plugins.kmp.android.library)
@@ -42,6 +45,12 @@ kotlin {
     }
   }
 
+  wasmJs {
+    browser()
+  }
+
+  jvm()
+
   sourceSets {
     commonMain.dependencies {
       implementation(libs.compose.runtime)
@@ -52,13 +61,17 @@ kotlin {
       implementation(libs.compose.components.resources)
 
       implementation(libs.androidx.compose.navigation)
-      implementation(libs.image.picker)
+      implementation(libs.filekit.dialogs.compose)
 
       api(project(":colorpicker-compose"))
     }
   }
 }
 
+compose.resources {
+  packageOfResClass = "com.github.skydoves.colorpickercomposedemo.shared"
+}
+
 dependencies {
   // The new com.android.kotlin.multiplatform.library plugin has no build variants,
   // so debugImplementation isn't available — use the unified android runtime classpath.
diff --git a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/MainScreen.kt b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/MainScreen.kt
index 7c2f304..44d1e64 100644
--- a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/MainScreen.kt
+++ b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/MainScreen.kt
@@ -42,12 +42,12 @@ import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
-import colorpickercomposedemo.demo.shared.generated.resources.Res
-import colorpickercomposedemo.demo.shared.generated.resources.app_name
-import colorpickercomposedemo.demo.shared.generated.resources.image_24px
-import colorpickercomposedemo.demo.shared.generated.resources.palette_24px
 import com.github.skydoves.colorpickercomposedemo.screens.HsvColorPickerColoredSelectorScreen
 import com.github.skydoves.colorpickercomposedemo.screens.ImageColorPickerScreen
+import com.github.skydoves.colorpickercomposedemo.shared.Res
+import com.github.skydoves.colorpickercomposedemo.shared.app_name
+import com.github.skydoves.colorpickercomposedemo.shared.image_24px
+import com.github.skydoves.colorpickercomposedemo.shared.palette_24px
 import org.jetbrains.compose.resources.DrawableResource
 import org.jetbrains.compose.resources.painterResource
 import org.jetbrains.compose.resources.stringResource
diff --git a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/PhotoPickerIcon.kt b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/PhotoPickerIcon.kt
index 27afaa1..94d0425 100644
--- a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/PhotoPickerIcon.kt
+++ b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/PhotoPickerIcon.kt
@@ -27,29 +27,29 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ImageBitmap
 import androidx.compose.ui.unit.dp
-import colorpickercomposedemo.demo.shared.generated.resources.Res
-import colorpickercomposedemo.demo.shared.generated.resources.ic_gallery
-import com.preat.peekaboo.image.picker.SelectionMode
-import com.preat.peekaboo.image.picker.rememberImagePickerLauncher
-import com.preat.peekaboo.image.picker.toImageBitmap
+import com.github.skydoves.colorpickercomposedemo.shared.Res
+import com.github.skydoves.colorpickercomposedemo.shared.ic_gallery
+import io.github.vinceglb.filekit.PlatformFile
+import io.github.vinceglb.filekit.dialogs.FileKitType
+import io.github.vinceglb.filekit.dialogs.compose.rememberFilePickerLauncher
+import io.github.vinceglb.filekit.readBytes
+import kotlinx.coroutines.launch
+import org.jetbrains.compose.resources.decodeToImageBitmap
 import org.jetbrains.compose.resources.vectorResource
 
 @Composable
-fun ColumnScope.PhotoPickerIcon(
-  onImageSelected: (ImageBitmap?) -> Unit,
-) {
+fun ColumnScope.PhotoPickerIcon(onImageSelected: (ImageBitmap?) -> Unit) {
   val scope = rememberCoroutineScope()
 
-  val singleImagePicker = rememberImagePickerLauncher(
-    selectionMode = SelectionMode.Single,
-    scope = scope,
-    onResult = { byteArrays ->
-      byteArrays.firstOrNull()?.let {
-        val imageBitmap = it.toImageBitmap()
-        onImageSelected.invoke(imageBitmap)
-      }
-    },
-  )
+  val singleImagePicker = rememberFilePickerLauncher(
+    type = FileKitType.Image,
+  ) { file: PlatformFile? ->
+    file ?: return@rememberFilePickerLauncher
+    scope.launch {
+      val imageBitmap = file.readBytes().decodeToImageBitmap()
+      onImageSelected.invoke(imageBitmap)
+    }
+  }
 
   Box(
     modifier = Modifier
diff --git a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/HsvColorPickerColoredSelectorScreen.kt b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/HsvColorPickerColoredSelectorScreen.kt
index 8d7e009..3748bf3 100644
--- a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/HsvColorPickerColoredSelectorScreen.kt
+++ b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/HsvColorPickerColoredSelectorScreen.kt
@@ -15,6 +15,7 @@
  */
 package com.github.skydoves.colorpickercomposedemo.screens
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -63,7 +64,7 @@ fun HsvColorPickerColoredSelectorScreen() {
   var lastSource by remember { mutableStateOf(ColorChangeSource.Programmatic) }
   var isInteracting by remember { mutableStateOf(false) }
 
-  Column {
+  Column(Modifier.background(Color.Black)) {
     Spacer(modifier = Modifier.weight(1f))
 
     Row(modifier = Modifier.weight(3f)) {
@@ -160,7 +161,7 @@ fun HsvColorPickerColoredSelectorScreen() {
     AlphaTile(
       modifier = Modifier
         .size(80.dp)
-        .clip(RoundedCornerShape(6.dp))
+        // .clip(RoundedCornerShape(6.dp))
         .align(Alignment.CenterHorizontally),
       controller = controller,
     )
diff --git a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/ImageColorPickerScreen.kt b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/ImageColorPickerScreen.kt
index 221476b..3e1355d 100644
--- a/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/ImageColorPickerScreen.kt
+++ b/demo/shared/src/commonMain/kotlin/com/github/skydoves/colorpickercomposedemo/screens/ImageColorPickerScreen.kt
@@ -37,8 +37,6 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import colorpickercomposedemo.demo.shared.generated.resources.Res
-import colorpickercomposedemo.demo.shared.generated.resources.palettebar
 import com.github.skydoves.colorpicker.compose.AlphaSlider
 import com.github.skydoves.colorpicker.compose.AlphaTile
 import com.github.skydoves.colorpicker.compose.BrightnessSlider
@@ -46,6 +44,8 @@ import com.github.skydoves.colorpicker.compose.ColorEnvelope
 import com.github.skydoves.colorpicker.compose.ImageColorPicker
 import com.github.skydoves.colorpicker.compose.rememberColorPickerController
 import com.github.skydoves.colorpickercomposedemo.PhotoPickerIcon
+import com.github.skydoves.colorpickercomposedemo.shared.Res
+import com.github.skydoves.colorpickercomposedemo.shared.palettebar
 import org.jetbrains.compose.resources.imageResource
 import org.jetbrains.compose.resources.painterResource
 
diff --git a/demo/shared/src/iosMain/kotlin/MainViewController.kt b/demo/shared/src/iosMain/kotlin/MainViewController.kt
index a240015..ede3402 100644
--- a/demo/shared/src/iosMain/kotlin/MainViewController.kt
+++ b/demo/shared/src/iosMain/kotlin/MainViewController.kt
@@ -16,4 +16,7 @@
 import androidx.compose.ui.window.ComposeUIViewController
 import com.github.skydoves.colorpickercomposedemo.MainScreen
 
+// Entry point consumed by iosApp.xcodeproj (Swift: MainViewControllerKt.MainViewController()),
+// so the PascalCase name is required and not subject to the function-naming convention.
+@Suppress("ktlint:standard:function-naming")
 fun MainViewController() = ComposeUIViewController { MainScreen() }
diff --git a/wasmApp/build.gradle.kts b/demo/wasmApp/build.gradle.kts
index 7ccde93..4c3a1cf 100644
--- a/wasmApp/build.gradle.kts
+++ b/demo/wasmApp/build.gradle.kts
@@ -30,11 +30,9 @@ kotlin {
       implementation(libs.compose.runtime)
       implementation(libs.compose.foundation)
       implementation(libs.compose.ui)
-      implementation(libs.compose.ui.tooling.preview)
       implementation(libs.compose.material)
-      implementation(libs.compose.components.resources)
 
-      implementation(project(":colorpicker-compose"))
+      implementation(project(":demo:shared"))
     }
   }
 }
diff --git a/wasmApp/src/wasmJsMain/kotlin/Main.kt b/demo/wasmApp/src/wasmJsMain/kotlin/Main.kt
index f283d4a..1c3476a 100644
--- a/wasmApp/src/wasmJsMain/kotlin/Main.kt
+++ b/demo/wasmApp/src/wasmJsMain/kotlin/Main.kt
@@ -15,11 +15,12 @@
  */
 import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.window.ComposeViewport
+import com.github.skydoves.colorpickercomposedemo.MainScreen
 import kotlinx.browser.document
 
 @OptIn(ExperimentalComposeUiApi::class)
 fun main() {
   ComposeViewport(document.body!!) {
-    PickColour()
+    MainScreen()
   }
 }
diff --git a/wasmApp/src/wasmJsMain/resources/index.html b/demo/wasmApp/src/wasmJsMain/resources/index.html
index b574d51..b574d51 100644
--- a/wasmApp/src/wasmJsMain/resources/index.html
+++ b/demo/wasmApp/src/wasmJsMain/resources/index.html
diff --git a/wasmApp/src/wasmJsMain/resources/style.css b/demo/wasmApp/src/wasmJsMain/resources/style.css
index 0608973..0608973 100644
--- a/wasmApp/src/wasmJsMain/resources/style.css
+++ b/demo/wasmApp/src/wasmJsMain/resources/style.css
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
index 4b97ce7..87b2241 100644
--- a/gradle/libs.versions.toml
+++ b/gradle/libs.versions.toml
@@ -12,7 +12,7 @@ jvmTarget = "17"
 androidxActivity = "1.13.0"
 androidxTest = "1.7.0"
 androidxNavigation = "2.9.2"
-imagePicker = "0.5.2"
+filekit = "0.14.1"
 profileInstaller = "1.4.1"
 uiAutomator = "2.3.0"
 spotless = "8.6.0"
@@ -36,7 +36,7 @@ baseline-profile = { id = "androidx.baselineprofile", version.ref = "androidxMac
 [libraries]
 androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "androidxActivity" }
 androidx-compose-navigation = { module = "org.jetbrains.androidx.navigation:navigation-compose", version.ref = "androidxNavigation" }
-image-picker = { group = "io.github.onseok", name = "peekaboo-image-picker", version.ref = "imagePicker" }
+filekit-dialogs-compose = { module = "io.github.vinceglb:filekit-dialogs-compose", version.ref = "filekit" }
 
 compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "compose-plugin" }
 compose-foundation = { module = "org.jetbrains.compose.foundation:foundation", version.ref = "compose-plugin" }
diff --git a/settings.gradle.kts b/settings.gradle.kts
index 08b4a8b..efca947 100644
--- a/settings.gradle.kts
+++ b/settings.gradle.kts
@@ -16,7 +16,8 @@ dependencyResolutionManagement {
 rootProject.name = "ColorPickerComposeDemo"
 include(":demo:androidApp")
 include(":demo:shared")
+include(":demo:wasmApp")
+include(":demo:desktopApp")
 include(":colorpicker-compose")
 include(":benchmark")
-include("wasmApp")
 include("docs")
diff --git a/wasmApp/src/commonMain/kotlin/PickColour.kt b/wasmApp/src/commonMain/kotlin/PickColour.kt
deleted file mode 100644
index 6a35e5b..0000000
--- a/wasmApp/src/commonMain/kotlin/PickColour.kt
+++ /dev/null
@@ -1,124 +0,0 @@
-/*
- * Designed and developed by 2022 skydoves (Jaewoong Eum)
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.foundation.text.selection.SelectionContainer
-import androidx.compose.material.Text
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.unit.dp
-import com.github.skydoves.colorpicker.compose.AlphaSlider
-import com.github.skydoves.colorpicker.compose.AlphaTile
-import com.github.skydoves.colorpicker.compose.BrightnessSlider
-import com.github.skydoves.colorpicker.compose.ColorEnvelope
-import com.github.skydoves.colorpicker.compose.HsvColorPicker
-import com.github.skydoves.colorpicker.compose.HueSlider
-import com.github.skydoves.colorpicker.compose.SaturationSlider
-import com.github.skydoves.colorpicker.compose.rememberColorPickerController
-
-@Composable
-fun PickColour() {
-  val controller = rememberColorPickerController()
-  var currentColorEnvelope by remember {
-    mutableStateOf(
-      ColorEnvelope(
-        Color.Green,
-        "ff00ff00",
-        false,
-      ),
-    )
-  }
-
-  Column(
-    modifier = Modifier.fillMaxSize().background(Color.Black),
-    horizontalAlignment = Alignment.CenterHorizontally,
-  ) {
-    HsvColorPicker(
-      initialColor = currentColorEnvelope.color,
-      modifier = Modifier.padding(10.dp).size(300.dp),
-      controller = controller,
-      onColorChanged = { colorEnvelope: ColorEnvelope ->
-        currentColorEnvelope = colorEnvelope
-      },
-    )
-
-    Spacer(Modifier.height(8.dp))
-
-    AlphaSlider(
-      modifier = Modifier
-        .height(35.dp)
-        .width(400.dp),
-      controller = controller,
-    )
-
-    Spacer(Modifier.height(8.dp))
-
-    BrightnessSlider(
-      modifier = Modifier
-        .height(35.dp)
-        .width(400.dp),
-      controller = controller,
-    )
-
-    Spacer(Modifier.height(8.dp))
-
-    HueSlider(
-      modifier = Modifier
-        .height(35.dp)
-        .width(400.dp),
-      controller = controller,
-    )
-
-    Spacer(Modifier.height(8.dp))
-
-    SaturationSlider(
-      modifier = Modifier
-        .height(35.dp)
-        .width(400.dp),
-      controller = controller,
-    )
-
-    Spacer(Modifier.height(8.dp))
-
-    SelectionContainer {
-      Text(
-        currentColorEnvelope.hexCode,
-        color = currentColorEnvelope.color,
-      )
-    }
-
-    AlphaTile(
-      modifier = Modifier
-        .size(80.dp)
-        .clip(RoundedCornerShape(6.dp)),
-      controller = controller,
-    )
-  }
-}