### Compose Multiplatform Project Setup with Starter Module

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

This configuration uses the `starter` module of Compose Preview Lab, which bundles all core modules for a simplified setup in Compose Multiplatform projects. It requires the KSP plugin and the Compose Preview Lab Gradle plugin. The dependencies are added to the `commonMain` source set and the `kspCommonMainMetadata`, `kspAndroid`, `kspJvm`, `kspJs`, and `kspWasmJs` configurations.

```kotlin
plugins {
    // ⭐️ Add KSP for collect `@Preview`
    id("com.google.devtools.ksp") version "<ksp-version>"
    // ⭐️ Add Compose Preview Lab Gradle plugin
    id("me.tbsten.compose.preview.lab") version "<compose-preview-lab-version>"
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            // ⭐️ Add Compose Preview Lab starter (includes all core modules)
            implementation("me.tbsten.compose.preview.lab:starter:<compose-preview-lab-version>")
        }
    }
}

dependencies {
    // ⭐️ Add Compose Preview Lab KSP plugin
    val composePreviewLabKspPlugin =
        "me.tbsten.compose.preview.lab:ksp-plugin:<compose-preview-lab-version>"
    add("kspCommonMainMetadata", composePreviewLabKspPlugin)
    // each platform
    add("kspAndroid", composePreviewLabKspPlugin)
    add("kspJvm", composePreviewLabKspPlugin)
    add("kspJs", composePreviewLabKspPlugin)
    add("kspWasmJs", composePreviewLabKspPlugin)
    // iOS targets (if needed)
    // add("kspIosX64", composePreviewLabKspPlugin)
    // add("kspIosArm64", composePreviewLabKspPlugin)
    // add("kspIosSimulatorArm64", composePreviewLabKspPlugin)
}
```

--------------------------------

### Start Local Development Server (Bash)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/integrationTest/web/README.md

Starts a local development server for live previewing changes. The server automatically reloads most modifications.

```bash
yarn start
```

--------------------------------

### Install Dependencies (Bash)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/integrationTest/web/README.md

Installs project dependencies using Yarn. This is a prerequisite for running other commands.

```bash
yarn
```

--------------------------------

### Compose Multiplatform Project Setup with Individual Modules

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

This configuration allows for fine-grained control by adding individual modules of Compose Preview Lab instead of the starter. It requires the KSP plugin and the Compose Preview Lab Gradle plugin. Dependencies for individual modules can be added to the `commonMain` source set, and the KSP plugin is configured for various platforms.

```kotlin
plugins {
    // ⭐️ Add KSP for collect `@Preview`
    id("com.google.devtools.ksp") version "<ksp-version>"
    // ⭐️ Add Compose Preview Lab Gradle plugin
    id("me.tbsten.compose.preview.lab") version "<compose-preview-lab-version>"
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            // ⭐️ Add individual modules as needed
            implementation("me.tbsten.compose.preview.lab:starter:<compose-preview-lab-version>")
        }
    }
}

dependencies {
    // ⭐️ Add Compose Preview Lab KSP plugin
    val composePreviewLabKspPlugin =
        "me.tbsten.compose.preview.lab:ksp-plugin:<compose-preview-lab-version>"
    add("kspCommonMainMetadata", composePreviewLabKspPlugin)
    // each platform
    add("kspAndroid", composePreviewLabKspPlugin)
    add("kspJvm", composePreviewLabKspPlugin)
    add("kspJs", composePreviewLabKspPlugin)
    add("kspWasmJs", composePreviewLabKspPlugin)
    // iOS targets (if needed)
    // add("kspIosX64", composePreviewLabKspPlugin)
    // add("kspIosArm64", composePreviewLabKspPlugin)
    // add("kspIosSimulatorArm64", composePreviewLabKspPlugin)
}
```

--------------------------------

### Gradle Setup for Compose Preview Lab

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Configures the Gradle build files to include the necessary plugins and dependencies for Compose Preview Lab. This involves applying KSP and the Compose Preview Lab plugin, and adding the starter module dependency.

```kotlin
// build.gradle.kts
plugins {
    id("com.google.devtools.ksp") version "<ksp-version>"
    id("me.tbsten.compose.preview.lab") version "<compose-preview-lab-version>"
}

kotlin {
    sourceSets {
        commonMain.dependencies {
            // All-in-one starter module
            implementation("me.tbsten.compose.preview.lab:starter:<version>")
        }
    }
}

dependencies {
    val kspPlugin = "me.tbsten.compose.preview.lab:ksp-plugin:<version>"
    add("kspCommonMainMetadata", kspPlugin)
    add("kspAndroid", kspPlugin)
    add("kspJvm", kspPlugin)
    add("kspJs", kspPlugin)
    add("kspWasmJs", kspPlugin)
}
```

--------------------------------

### Android Project Setup for Compose Preview Lab

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

This configuration is for pure Android projects that do not use Kotlin Multiplatform. While functional, its capabilities are limited compared to multiplatform projects, particularly regarding web browsing. It requires the KSP plugin and the Compose Preview Lab Gradle plugin, with dependencies added directly to the project.

```kotlin
plugins {
    // ⭐️ add ksp for collect `@Preview`
    id("com.google.devtools.ksp") version "<ksp-version>"
    // ⭐️ Add Compose Preview Lab Gradle plugin
    id("me.tbsten.compose.preview.lab") version "<compose-preview-lab-version>"
}

dependencies {
    // ⭐️ Use starter for simple setup (or individual modules if needed)
    implementation("me.tbsten.compose.preview.lab:starter:<compose-preview-lab-version>")
    ksp("me.tbsten.compose.preview.lab:ksp-plugin:<compose-preview-lab-version>")
}
```

--------------------------------

### Build Static Website (Bash)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/integrationTest/web/README.md

Generates the static content for the website into the 'build' directory. This output can be hosted on any static hosting service.

```bash
yarn build
```

--------------------------------

### Prepare Composable Catalog with PreviewLab

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

This snippet demonstrates how to prepare a Composable catalog using `PreviewLab`. It requires enclosing your `@Preview` composables within the `PreviewLab { }` block, simplifying the cataloging process.

```kotlin
PreviewLab {
    // Your @Preview composables go here
}
```

--------------------------------

### Create Reusable PreviewLab Instances with Custom Themes

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Allows the creation of custom `PreviewLab` configurations with specific themes, typography, and settings. This enables consistent styling and behavior for multiple previews.

```kotlin
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.graphics.Color
import androidx.compose.material3.lightColorScheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.ui.tooling.preview.Preview

val customizedPreviewLab = PreviewLab(
    defaultScreenSizes = ScreenSize.AllPresets,
    contentRoot = { content ->
        MaterialTheme(
            colorScheme = lightColorScheme(
                primary = Color(0xFF6200EE),
                onPrimary = Color.White
            )
        ) {
            CompositionLocalProvider(
                LocalCustomTypography provides customTypography
            ) {
                content()
            }
        }
    },
    defaultIsHeaderShow = { true }
)

@Preview
@Composable
private fun ThemedPreview() = customizedPreviewLab {
    val text by fieldState { StringField("Text", "Themed Button") }

    Button(onClick = { onEvent("Click") }) {
        Text(text)
    }
}
```

--------------------------------

### Deploy Website (Bash)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/integrationTest/web/README.md

Deploys the website, optionally using SSH. This command builds the static content and pushes it to the 'gh-pages' branch, suitable for GitHub Pages.

```bash
USE_SSH=true yarn deploy
```

```bash
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Initialize Interactive Preview with PreviewLab

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

The main entry point for creating interactive previews. It wraps your composable content to enable dynamic parameter controls, event tracking, and multi-device testing capabilities.

```kotlin
@Preview
@Composable
private fun MyButtonPreview() = PreviewLab {
    val buttonText by fieldState { StringField("Text", "Click Me!") }
    val isEnabled by fieldState { BooleanField("Enabled", true) }
    val variant by fieldState { EnumField<ButtonVariant>("Variant", ButtonVariant.Primary) }

    MyButton(
        text = buttonText,
        enabled = isEnabled,
        variant = variant,
        onClick = { onEvent("Button clicked", "User tapped the primary button") }
    )
}
```

--------------------------------

### Display Collected Previews with Searchable Sidebar

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Renders a list of collected `PreviewLabPreview` objects within the `PreviewLabGallery`. It includes a searchable sidebar and comparison features, utilizing KSP-generated preview data.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember

@Composable
fun PreviewGalleryScreen() {
    val previews: List<PreviewLabPreview> = CollectedPreviews // Generated by KSP

    PreviewLabGallery(
        previewList = previews,
        state = remember { PreviewLabGalleryState() },
        featuredFileList = mapOf(
            "Buttons" to listOf("**/Button*.kt"),
            "Forms" to listOf("**/Form*.kt", "**/Input*.kt")
        )
    )
}
```

--------------------------------

### Compose Preview Interactive Mode with PreviewLab

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

Demonstrates how to use the PreviewLab Composable to create an interactive preview for a MyButton Composable. It utilizes fieldValue() to set initial text and onEvent() to capture click events, allowing for interaction within the preview environment.

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

// Assuming MyButton and PreviewLab are defined elsewhere
// For demonstration purposes, let's define placeholder functions:

@Composable
fun MyButton(text: String, onClick: () -> Unit) {
    // Button implementation
}

@Composable
fun PreviewLab(content: @Composable () -> Unit) {
    // PreviewLab implementation
    content()
}

fun fieldValue(field: Any): Any {
    // Placeholder for fieldValue logic
    return field
}

fun StringField(defaultValue: String): String {
    // Placeholder for StringField logic
    return defaultValue
}

fun onEvent(eventName: String) {
    // Placeholder for onEvent logic
    println("Event triggered: $eventName")
}

@Preview
@Composable
private fun MyButtonPreview() = PreviewLab {
    MyButton(
        text = fieldValue { StringField("Click Me") } as String,
        onClick = { onEvent("MyButton.onClick") },
    )
}
```

--------------------------------

### Test Components Across Different Screen Sizes

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Enables testing of Compose components across various screen sizes using the `screenSizes` parameter within `PreviewLab`. It supports predefined sizes like Phone, Tablet, and Desktop, as well as single fixed dimensions.

```kotlin
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun ResponsiveLayoutPreview() = PreviewLab(
    screenSizes = listOf(
        ScreenSize.Phone,
        ScreenSize.Tablet,
        ScreenSize.Desktop
    )
) {
    val itemCount by fieldState { IntField("Item Count", 10) }

    ResponsiveGrid(
        items = (1..itemCount).map { "Item $it" },
        onItemClick = { onEvent("Item clicked", "Clicked: $it") }
    )
}

// Or use single fixed size
@Preview
@Composable
fun FixedSizePreview() = PreviewLab(
    maxWidth = 360.dp,
    maxHeight = 640.dp
) {
    MyMobileComponent()
}
```

--------------------------------

### Custom Field Implementation for Parameter Types

Source: https://github.com/tbsten/compose-preview-lab/blob/main/README.md

Illustrates the implementation of a custom Field in Compose Preview Lab to freely customize UI, including operation UI and providing utilities like `SelectableField`. This allows for advanced parameter handling beyond standard types.

```kotlin
class MyCustomField : Field {
    // Implementation for custom UI and parameter handling
    override fun render(context: FieldContext) {
        // ... rendering logic ...
    }
}
```

--------------------------------

### Track User Interactions with onEvent

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Records user interactions and displays them as toast notifications. These events are also logged in the Events tab within the Preview Lab for debugging purposes, providing insights into component behavior.

```kotlin
@Preview
@Composable
fun InteractiveComponentPreview() = PreviewLab {
    val count by fieldState { IntField("Count", 0) }

    Column {
        Button(onClick = {
            onEvent("Increment clicked", "Current count: $count")
        }) {
            Text("Increment")
        }

        Button(onClick = {
            onEvent("Reset clicked")
        }) {
            Text("Reset")
        }
    }
}
```

--------------------------------

### Manage Mutable State with fieldState

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Creates a mutable field that returns a `MutableState<T>`, enabling the use of Kotlin's property delegation syntax for state management within previews. Changes to the state are reflected in the UI.

```kotlin
@Preview
@Composable
fun TextFieldPreview() = PreviewLab {
    var inputText by fieldState { StringField("Input", "Initial value") }

    TextField(
        value = inputText,
        onValueChange = { inputText = it },
        label = { Text("Enter text") }
    )
}
```

--------------------------------

### Configure Read-Only Fields with fieldValue

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Creates a read-only field for parameter configuration within the Preview Lab. Use this when the parameter's value should not be updated programmatically from within the preview.

```kotlin
@Preview
@Composable
fun TextPreview() = PreviewLab {
    val text: String = fieldValue { StringField("Text", "Hello World!!") }
    val fontSize: TextUnit = fieldValue { SpField("Font Size", 16.sp) }
    val textColor: Color = fieldValue { ColorField("Color", Color.Black) }

    Text(
        text = text,
        fontSize = fontSize,
        color = textColor
    )
}
```

--------------------------------

### Configure String Fields with StringField

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

A field specifically designed for string input. It supports optional prefix and suffix decorations, allowing for enhanced visual presentation of the input field.

```kotlin
@Preview
@Composable
fun UrlPreview() = PreviewLab {
    val path: String = fieldValue {
        StringField(
            label = "Path",
            initialValue = "home",
            prefix = { Text("https://example.com/") },
            suffix = { Icon(Icons.Default.Link, null) }
        )
    }
    Text(text = "URL: https://example.com/$path")
}
```

--------------------------------

### SelectableField: Flexible Selection UI in Compose Previews

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

SelectableField provides a versatile UI for making selections in Compose previews, supporting dropdowns, chips, or radio buttons. It can handle simple lists or complex builder syntax with custom values and labels. Input is a list of choices or a builder lambda.

```kotlin
@Preview
@Composable
fun SelectableFieldPreview() = PreviewLab {
    // Simple list selection
    val theme: String = fieldValue {
        SelectableField(
            label = "Theme",
            choices = listOf("Light", "Dark", "Auto")
        )
    }

    // Builder syntax with custom values
    val icon: ImageVector = fieldValue {
        SelectableField<ImageVector>(label = "Icon") {
            choice(Icons.Default.Home, "Home", isDefault = true)
            choice(Icons.Default.Search, "Search")
            choice(Icons.Default.Settings, "Settings")
        }
    }

    // Chips UI type
    val size: Int = fieldValue {
        SelectableField(
            label = "Size",
            choices = listOf(32, 48, 64),
            choiceLabel = { "${it}dp" },
            type = SelectableField.Type.CHIPS
        )
    }

    MyComponent(theme = theme, icon = icon, size = size.dp)
}
```

--------------------------------

### Configure Boolean Fields with BooleanField

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Provides a field for boolean values, typically rendered as a switch UI element. This allows for easy toggling of boolean states within the preview.

```kotlin
@Preview
@Composable
fun TogglePreview() = PreviewLab {
    val isDarkMode: Boolean = fieldValue { BooleanField("Dark Mode", false) }
    val showBadge: Boolean = fieldValue { BooleanField("Show Badge", true) }

    MyComponent(
        darkMode = isDarkMode,
        showBadge = showBadge
    )
}
```

--------------------------------

### Configure Numeric Fields (Int, Long, Float, Double)

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

Offers input fields for various numeric types including Int, Long, Float, and Double. These fields support optional prefix and suffix decorations for better context and usability.

```kotlin
@Preview
@Composable
fun NumericFieldsPreview() = PreviewLab {
    val count: Int = fieldValue { IntField("Count", 10) }
    val timestamp: Long = fieldValue { LongField("Timestamp", 1704067200L) }
    val progress: Float = fieldValue { FloatField("Progress", 0.5f) }
    val price: Double = fieldValue {
        DoubleField(
            label = "Price",
            initialValue = 99.99,
            inputType = NumberField.InputType.TextField(
                prefix = { Text("$") },
                suffix = { Text("USD") }
            )
        )
    }

    Column {
        Text("Count: $count")
        Text("Progress: ${(progress * 100).toInt()}%")
        Text("Price: $$price")
    }
}
```

--------------------------------

### Styling for iframe Test in Compose Preview Lab (HTML, CSS)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/integrationTest/app/src/webMain/resources/iframe-test.html

This CSS code styles the HTML document for the Compose Preview Lab iframe test. It sets global styles for the body, defines a flex container for layout, and styles header elements, including an iframe wrapper and the iframe itself. It ensures a responsive and visually appealing presentation.

```css
html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; background-color: #f5f5f5; }
.container { display: flex;
flex-direction: column;
min-height: 100%;
padding: 20px;
box-sizing: border-box; }
.header { margin-bottom: 20px; }
h1 { margin: 0 0 10px 0;
font-size: 24px;
color: #333; }
p { margin: 0;
color: #666;
font-size: 14px; }
.iframe-wrapper { height: 400px;
border: 2px solid #ddd;
border-radius: 8px;
overflow: hidden;
background-color: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
margin: 20px; }
iframe { width: 100%;
height: 100%;
border: none; }
```

--------------------------------

### OffsetField/DpOffsetField/SizeField/DpSizeField: Compose Position/Size Input

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

These fields handle position and size values in Compose previews, with separate inputs for x/y coordinates (OffsetField, DpOffsetField) or width/height dimensions (SizeField, DpSizeField). They simplify the definition of layout properties. Inputs are DpOffset or DpSize objects.

```kotlin
@Preview
@Composable
fun PositionSizeFieldsPreview() = PreviewLab {
    val position: DpOffset = fieldValue { DpOffsetField("Position", DpOffset(16.dp, 8.dp)) }
    val containerSize: DpSize = fieldValue { DpSizeField("Size", DpSize(200.dp, 100.dp)) }

    Box(modifier = Modifier.size(300.dp)) {
        Box(
            modifier = Modifier
                .offset(position.x, position.y)
                .size(containerSize)
                .background(Color.Blue)
        )
    }
}
```

--------------------------------

### Apply Full Viewport Styles to Compose Preview Lab (CSS)

Source: https://github.com/tbsten/compose-preview-lab/blob/main/dev/src/jsMain/resources/index.html

This CSS snippet applies styles to the html and body elements to ensure the Compose Preview Lab occupies the full width and height of the browser window. It removes default margins and padding, and prevents any content from overflowing the viewport.

```css
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
```

--------------------------------

### DpField/SpField: Compose Dimension Input Fields

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

DpField and SpField are specialized input fields for Compose previews to handle density-independent pixels (Dp) and scalable pixels (Sp) respectively. They simplify the process of defining sizes, padding, and font sizes. Input values are Dp or TextUnit.

```kotlin
@Preview
@Composable
fun DimensionFieldsPreview() = PreviewLab {
    val padding: Dp = fieldValue { DpField("Padding", 16.dp) }
    val fontSize: TextUnit = fieldValue { SpField("Font Size", 14.sp) }
    val buttonSize: Dp = fieldValue { DpField("Button Size", 48.dp) }

    Box(
        modifier = Modifier
            .padding(padding)
            .size(buttonSize)
    ) {
        Text("Hello", fontSize = fontSize)
    }
}
```

--------------------------------

### EnumField: Select Enum Values in Compose Previews

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

EnumField allows users to select values from a Kotlin enum in Compose previews. It supports automatic serialization and custom labels for choices. Dependencies include standard Kotlin enums and Compose UI elements.

```kotlin
enum class ButtonVariant { Primary, Secondary, Tertiary }
enum class LayoutDirection { Ltr, Rtl }

@Preview
@Composable
fun EnumFieldPreview() = PreviewLab {
    val variant: ButtonVariant = fieldValue {
        EnumField(
            label = "Variant",
            initialValue = ButtonVariant.Primary
        )
    }
    val direction: LayoutDirection = fieldValue {
        EnumField(
            label = "Direction",
            initialValue = LayoutDirection.Ltr,
            choiceLabel = { if (it == LayoutDirection.Ltr) "Left to Right" else "Right to Left" }
        )
    }

    MyButton(variant = variant, layoutDirection = direction)
}
```

--------------------------------

### ColorField: Compose Color Picker Field

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

ColorField provides an interactive color picker for Compose previews, featuring HSV sliders and alpha channel controls. It allows users to easily select and define colors for various UI elements. Input is a Color object.

```kotlin
@Preview
@Composable
fun ColorFieldPreview() = PreviewLab {
    val backgroundColor: Color = fieldValue { ColorField("Background", Color.White) }
    val textColor: Color = fieldValue { ColorField("Text Color", Color.Black) }
    val borderColor: Color = fieldValue {
        ColorField("Border", Color.Gray).withPredefinedColorHint()
    }

    Box(
        modifier = Modifier
            .size(150.dp)
            .background(backgroundColor)
            .border(2.dp, borderColor),
        contentAlignment = Alignment.Center
    ) {
        Text("Styled Text", color = textColor)
    }
}
```

--------------------------------

### CombinedField: Compose Composite Data Type Input

Source: https://context7.com/tbsten/compose-preview-lab/llms.txt

CombinedField allows the creation of composite input fields in Compose previews, merging multiple sub-fields into a single complex data type. It supports custom `combine` and `split` lambdas for data transformation. Useful for structured data like Padding or Point.

```kotlin
data class Padding(val horizontal: Dp, val vertical: Dp)
data class Point(val x: Float, val y: Float)

@Preview
@Composable
fun CombinedFieldPreview() = PreviewLab {
    // Two-field combination
    val padding: Padding = fieldValue {
        combined(
            label = "Padding",
            field1 = DpField("Horizontal", 16.dp),
            field2 = DpField("Vertical", 8.dp),
            combine = { h, v -> Padding(h, v) },
            split = { splitedOf(it.horizontal, it.vertical) }
        )
    }

    // Three-field combination
    val point: Point = fieldValue {
        combined(
            label = "Point",
            field1 = FloatField("X", 10f),
            field2 = FloatField("Y", 20f),
            combine = { x, y -> Point(x, y) },
            split = { splitedOf(it.x, it.y) }
        )
    }

    Box(
        modifier = Modifier
            .padding(horizontal = padding.horizontal, vertical = padding.vertical)
    ) {
        Canvas(modifier = Modifier.size(200.dp)) {
            drawCircle(Color.Red, radius = 10f, center = Offset(point.x, point.y))
        }
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.