refactor: add debugInspectorInfo for Modifier and some tweaks

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/AreaBox.kt

@@ -46,6 +46,7 @@ import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.shadow
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.highcapable.flexiui.DefaultShapes
@@ -136,7 +137,13 @@ private fun Modifier.areaBox(
     style: AreaBoxStyle,
     then: Modifier,
     initializer: Modifier.() -> Modifier
-) = composed {
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "areaBox"
+        properties["color"] = color
+        properties["style"] = style
+    }
+) {
     initializer()
         .shadow(style.shadowSize, style.shape)
         .clip(style.shape)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Button.kt

@@ -43,15 +43,16 @@ import androidx.compose.ui.composed
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.semantics.Role
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.interaction.rippleClickable
-import com.highcapable.flexiui.interaction.rippleToggleable
 import com.highcapable.flexiui.extension.borderOrNot
 import com.highcapable.flexiui.extension.orElse
 import com.highcapable.flexiui.extension.status
+import com.highcapable.flexiui.interaction.rippleClickable
+import com.highcapable.flexiui.interaction.rippleToggleable
 
 @Immutable
 data class ButtonColors(
@@ -178,7 +179,14 @@ private fun Modifier.button(
     colors: ButtonColors,
     style: ButtonStyle,
     then: Modifier
-) = composed {
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "button"
+        properties["enabled"] = enabled
+        properties["colors"] = colors
+        properties["style"] = style
+    }
+) {
     status(enabled)
         .clip(style.shape)
         .background(colors.backgroundColor, style.shape)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/CheckBox.kt

@@ -52,11 +52,11 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
+import com.highcapable.flexiui.extension.borderOrNot
+import com.highcapable.flexiui.extension.status
 import com.highcapable.flexiui.interaction.clickable
 import com.highcapable.flexiui.resources.Icons
 import com.highcapable.flexiui.resources.icon.CheckMark
-import com.highcapable.flexiui.extension.borderOrNot
-import com.highcapable.flexiui.extension.status
 
 @Immutable
 data class CheckBoxColors(

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Dropdown.kt

@@ -91,6 +91,7 @@ import androidx.compose.ui.input.key.type
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.platform.LocalInputModeManager
+import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.unit.Density
 import androidx.compose.ui.unit.Dp
@@ -105,14 +106,14 @@ import androidx.compose.ui.window.PopupProperties
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.interaction.rippleClickable
-import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.icon.Dropdown
 import com.highcapable.flexiui.extension.borderOrNot
 import com.highcapable.flexiui.extension.horizontal
 import com.highcapable.flexiui.extension.orElse
 import com.highcapable.flexiui.extension.solidColor
 import com.highcapable.flexiui.extension.status
+import com.highcapable.flexiui.interaction.rippleClickable
+import com.highcapable.flexiui.resources.Icons
+import com.highcapable.flexiui.resources.icon.Dropdown
 import kotlin.math.max
 import kotlin.math.min
 
@@ -187,10 +188,10 @@ fun DropdownList(
     }.copy(animatedBorderWidth, SolidColor(animatedBorderColor))
     DropdownMenuBox(
         modifier = Modifier.dropdownList(
+            enabled = enabled,
             colors = colors,
             style = style,
             border = border,
-            enabled = enabled,
             focusRequester = focusRequester,
             interactionSource = interactionSource,
             then = modifier.rippleClickable(
@@ -410,14 +411,22 @@ private fun DropdownMenuContent(
 }
 
 private fun Modifier.dropdownList(
+    enabled: Boolean,
     colors: DropdownListColors,
     style: DropdownListStyle,
     border: BorderStroke,
-    enabled: Boolean,
     focusRequester: FocusRequester,
     interactionSource: MutableInteractionSource,
     then: Modifier
-) = composed {
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "dropdownList"
+        properties["enabled"] = enabled
+        properties["colors"] = colors
+        properties["style"] = style
+        properties["border"] = border
+    }
+) {
     status(enabled)
         .focusRequester(focusRequester)
         .focusable(enabled, interactionSource)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/RadioButton.kt

@@ -53,8 +53,8 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.interaction.clickable
 import com.highcapable.flexiui.extension.status
+import com.highcapable.flexiui.interaction.clickable
 
 @Immutable
 data class RadioButtonColors(

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Surface.kt

@@ -35,6 +35,7 @@ import androidx.compose.runtime.ReadOnlyComposable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.debugInspectorInfo
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalSizes
 
@@ -67,7 +68,13 @@ private fun Modifier.surface(
     padding: PaddingValues,
     then: Modifier,
     initializer: Modifier.() -> Modifier
-) = composed {
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "surface"
+        properties["colors"] = colors
+        properties["padding"] = padding
+    }
+) {
     initializer()
         .background(colors.backgroundColor)
         .then(then)

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/Switch.kt

@@ -61,9 +61,9 @@ import androidx.compose.ui.unit.dp
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.interaction.clickable
 import com.highcapable.flexiui.extension.borderOrNot
 import com.highcapable.flexiui.extension.status
+import com.highcapable.flexiui.interaction.clickable
 import kotlin.math.roundToInt
 
 @Immutable

flexiui-core/src/commonMain/kotlin/com/highcapable/flexiui/component/TextField.kt

@@ -73,6 +73,7 @@ import androidx.compose.ui.input.key.KeyEventType
 import androidx.compose.ui.input.key.key
 import androidx.compose.ui.input.key.onKeyEvent
 import androidx.compose.ui.input.key.type
+import androidx.compose.ui.platform.debugInspectorInfo
 import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextLayoutResult
 import androidx.compose.ui.text.TextRange
@@ -88,16 +89,16 @@ import androidx.compose.ui.window.PopupProperties
 import com.highcapable.flexiui.LocalColors
 import com.highcapable.flexiui.LocalShapes
 import com.highcapable.flexiui.LocalSizes
-import com.highcapable.flexiui.resources.Icons
-import com.highcapable.flexiui.resources.icon.Backspace
-import com.highcapable.flexiui.resources.icon.ViewerClose
-import com.highcapable.flexiui.resources.icon.ViewerOpen
 import com.highcapable.flexiui.extension.borderOrNot
 import com.highcapable.flexiui.extension.calculateEnd
 import com.highcapable.flexiui.extension.calculateStart
 import com.highcapable.flexiui.extension.orElse
 import com.highcapable.flexiui.extension.solidColor
 import com.highcapable.flexiui.extension.status
+import com.highcapable.flexiui.resources.Icons
+import com.highcapable.flexiui.resources.icon.Backspace
+import com.highcapable.flexiui.resources.icon.ViewerClose
+import com.highcapable.flexiui.resources.icon.ViewerOpen
 
 @Immutable
 data class TextFieldColors(
@@ -180,10 +181,10 @@ fun TextField(
     }.copy(animatedBorderWidth, SolidColor(animatedBorderColor))
     BoxWithConstraints(
         modifier = Modifier.textField(
+            enabled = enabled,
             colors = colors,
             style = style,
             border = border,
-            enabled = enabled,
             interactionSource = interactionSource,
             then = modifier
         ).pointerHoverState(TextFieldPointerState.Text)
@@ -712,13 +713,21 @@ private class TextFieldKeyEventFactory {
 }
 
 private fun Modifier.textField(
+    enabled: Boolean,
     colors: TextFieldColors,
     style: TextFieldStyle,
     border: BorderStroke,
-    enabled: Boolean,
     interactionSource: MutableInteractionSource,
     then: Modifier
-) = composed {
+) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "textField"
+        properties["enabled"] = enabled
+        properties["colors"] = colors
+        properties["style"] = style
+        properties["border"] = border
+    }
+) {
     status(enabled)
         .focusable(enabled, interactionSource)
         .hoverable(interactionSource, enabled)

flexiui-core/src/desktopMain/kotlin/com/highcapable/flexiui/component/TextField.desktop.kt

@@ -27,9 +27,15 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
 import androidx.compose.ui.input.pointer.PointerIcon
 import androidx.compose.ui.input.pointer.pointerHoverIcon
+import androidx.compose.ui.platform.debugInspectorInfo
 import java.awt.Cursor
 
-internal actual fun Modifier.pointerHoverState(state: TextFieldPointerState) = composed {
+internal actual fun Modifier.pointerHoverState(state: TextFieldPointerState) = composed(
+    inspectorInfo = debugInspectorInfo {
+        name = "pointerHoverState"
+        value = state
+    }
+) {
     pointerHoverIcon(
         PointerIcon(
             Cursor.getPredefinedCursor(when (state) {