### Basic KVision Application Setup

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

Demonstrates the basic usage of the startApplication function to create and launch a KVision application. This example shows how to provide the application builder and core modules.

```kotlin
fun main() {
    startApplication(
        ::MyApp,
        CoreModule
    )
}

class MyApp : Application() {
    override fun start() {
        Root("app") {
            vPanel {
                h1("Welcome")
                p("My KVision Application")
            }
        }
    }
}
```

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

### KVision Application UI Initialization Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

An example demonstrating how to initialize the application UI by overriding the start() method.

```kotlin
class MyApp : Application() {
    override fun start() {
        Root("app") {
            vPanel {
                h1("Hello, KVision!")
                button("Click me").onClick {
                    console.log("Button clicked")
                }
            }
        }
    }
}
```

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

### Navigate to Showcase Example Directory (Windows)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Enter the showcase example directory on a Windows system.

```bash
cd kvision-examples\showcase
```

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

### start()

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

The starting point for the application. Override this method to initialize your application UI.

```APIDOC
## start()

```kotlin
open fun start()
```

Starting point for the application. Override this method to initialize your application UI.

**Example:**
```kotlin
class MyApp : Application() {
    override fun start() {
        Root("app") {
            vPanel {
                h1("Hello, KVision!")
                button("Click me").onClick {
                    console.log("Button clicked")
                }
            }
        }
    }
}
```
```

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

### Navigate to Showcase Example Directory (Linux)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Enter the showcase example directory on a Linux system.

```bash
cd kvision-examples/showcase
```

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

### Clone KVision Examples Repository

Source: https://github.com/rjaros/kvision/blob/master/README.md

Download the KVision examples from GitHub to your local machine.

```bash
git clone https://github.com/rjaros/kvision-examples.git
```

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

### start(state: Map<String, Any>)

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

An alternative starting point called when Hot Module Replacement is enabled, allowing the restoration of the application state during development.

```APIDOC
## start(state: Map<String, Any>)

```kotlin
open fun start(state: Map<String, Any>)
```

Alternative starting point called when Hot Module Replacement is enabled. Allows restoring the application state during development.

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| state | Map<String, Any> | Yes | Previous application state for HMR |
```

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

### KVision Application Start Method

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

The starting point for the application. Override this method to initialize your application UI.

```kotlin
open fun start()
```

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

### Form Component Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Demonstrates the usage of Email, HelpText, and InvalidFeedback components within a vPanel. This example shows how to set placeholders and display help and error messages.

```kotlin
vPanel {
    label("Email")
    Email(name = "email") {
        placeholder = "your@email.com"
    }
    HelpText("We'll never share your email")
    InvalidFeedback("Please provide a valid email address")
}
```

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

### Manual Subscription Examples

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Provides examples of manually subscribing to observable state changes.

```APIDOC
## Manual Subscription Examples

### Description
Illustrates how to manually subscribe to observable state changes using `subscribe()` and `unsubscribe()` methods for fine-grained control over updates.
```

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

### Basic List Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Demonstrates creating a simple unordered list with three list items using the DSL builders.

```kotlin
Root("app") {
    ul {
        li("First item")
        li("Second item")
        li("Third item")
    }
}
```

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

### KVision Application with HMR Support

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

Shows how to integrate Hot Module Replacement (HMR) with the startApplication function for development. This example includes the necessary setup for HMR and demonstrates how to handle application state during hot reloads.

```kotlin
@JsModule("MODULE_NAME")
@JsNonModule
external val module: dynamic

fun main() {
    startApplication(
        ::MyApp,
        module.hot,
        CoreModule
    )
}

class MyApp : Application() {
    private var state = 0
    
    override fun start(state: Map<String, Any>) {
        this.state = (state["appState"] as? Int) ?: 0
        Root("app") {
            vPanel {
                h1("State: ${this@MyApp.state}")
            }
        }
    }
    
    override fun dispose(): Map<String, Any> {
        return mapOf("appState" to state)
    }
}
```

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

### FlexPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Example demonstrating how to instantiate and configure a FlexPanel with various properties and child components.

```APIDOC
## FlexPanel Usage Example

### Description
Demonstrates the usage of FlexPanel with common configuration options.

### Code
```kotlin
Root("app") {
    FlexPanel(
        direction = FlexDirection.ROW,
        spacing = 20,
        alignItems = AlignItems.CENTER,
        justifyContent = JustifyContent.BETWEEN
    ) {
        h2("Header")
        input(type = InputType.SEARCH) {
            placeholder = "Search"
            width = 200.px
        }
        button("Settings")
    }
}
```
```

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

### Basic KVision Application Setup

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Sets up a basic KVision application with a root container and a simple heading. This is the entry point for most KVision applications.

```kotlin
class MyApp : Application() {
    override fun start() {
        Root("app") {
            h1("Hello World")
        }
    }
}

fun main() {
    startApplication(::MyApp, CoreModule)
}
```

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

### VPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use the VPanel to create a vertical stack of components. Spacing between items can be configured via the constructor.

```kotlin
Root("app") {
    VPanel(spacing = 10) {
        h1("Vertical Stack")
        p("First item")
        p("Second item")
        p("Third item")
    }
}
```

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

### Button Creation Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Demonstrates creating a primary button with the text 'Click me' and an associated click handler that logs a message to the console.

```kotlin
Root("app") {
    button("Click me", style = ButtonStyle.SUCCESS) {
        onClick {
            console.log("Clicked!")
        }
    }
}
```

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

### Run Gradle Incremental Build (Windows)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Start a Gradle incremental build for development on Windows. Changes are reflected immediately in the browser.

```bash
gradlew.bat -t run
```

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

### List Components

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Documentation for list components (Ul, Ol, Li) with observable examples.

```APIDOC
## List Components

### Description
Components for creating unordered (Ul) and ordered (Ol) lists, including list items (Li).

### Components
- **Ul**: Unordered list.
- **Ol**: Ordered list.
- **Li**: List item.

### Examples
Includes examples demonstrating binding lists to observable data.
```

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

### Responsive Design Patterns

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Examples and patterns for implementing responsive design with media queries.

```APIDOC
## Responsive Design Patterns

### Description
Illustrates how to create responsive user interfaces using media queries and adaptive styling techniques within KVision.
```

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

### KVision Application Start Method with State

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

An alternative starting point called when Hot Module Replacement is enabled. Allows restoring the application state during development.

```kotlin
open fun start(state: Map<String, Any>)
```

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

### Run Gradle Incremental Build (Linux)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Start a Gradle incremental build for development on Linux. Changes are reflected immediately in the browser.

```bash
./gradlew -t run
```

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

### Text Input Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Demonstrates how to create and configure a Text input component, including setting a placeholder and handling the onChange event to log the input value.

```kotlin
Root("app") {
    Text("default", name = "username", label = "Username") {
        placeholder = "Enter username"
        onChange { event ->
            val input = event.target as HTMLInputElement
            console.log("Value: ${input.value}")
        }
    }
}
```

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

### Apply Custom Styles with DSL

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Demonstrates how to create and apply custom CSS classes using the Style.create DSL method. Includes examples for basic styles, hover effects, responsive design, and media queries.

```kotlin
class App : Application() {
    override fun start() {
        Style.create(".custom-button") {
            backgroundColor = "#007bff"
            color = "white"
            padding = 10.px
            borderRadius = 5.px
            border = "none"
            cursor = Cursor.POINTER
            fontSize = 16.px
        }
        
        Style.create(".custom-button:hover") {
            backgroundColor = "#0056b3"
        }
        
        Style.create(".responsive") {
            width = 100.perc
        }
        
        // Media query
        Style.create(".responsive", {
            width = 50.perc
        }, "(min-width: 768px)")
        
        Root("app") {
            button("Click me") {
                addCssClass("custom-button")
            }
        }
    }
}
```

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

### Image DSL Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Shows how to create an image element using the img DSL builder. You can set the image source, alt text, and apply styles like width.

```kotlin
Root("app") {
    img(src = "photo.jpg", alt = "A photo") {
        width = "300px"
    }
}
```

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

### Text Input Components Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Example demonstrating the usage of Email, Password, and Search input components.

```APIDOC
## Usage

```kotlin
Root("app") {
    Email(label = "Email Address")
    Password(label = "Password") {
        placeholder = "Enter password"
    }
    Search(label = "Search")
}
```
```

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

### InheritingStyle Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Demonstrates how to create and apply styles using the InheritingStyle class. Styles like fontSize, fontWeight, and color can be set.

```kotlin
val labelStyle = InheritingStyle(".form-label")
labelStyle.fontSize = 14.px
labelStyle.fontWeight = FontWeight.BOLD
labelStyle.color = "#333333"
```

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

### HPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use the HPanel to arrange components horizontally. Spacing between items can be configured via the constructor.

```kotlin
Root("app") {
    HPanel(spacing = 15) {
        button("Left")
        button("Center")
        button("Right")
    }
}
```

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

### KVision Application State Preservation Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

An example demonstrating how to save application state by overriding the dispose() method, returning a map to preserve during HMR.

```kotlin
class MyApp : Application() {
    private var counter = 0
    
    override fun start() {
        Root("app") {
            button("Count: $counter").onClick {
                counter++
            }
        }
    }
    
    override fun dispose(): Map<String, Any> {
        return mapOf("counter" to counter)
    }
}
```

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

### Application Class Methods

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Documentation for the Application class, including methods for starting and disposing the application, and managing its state.

```APIDOC
## Application Class

### Description
Provides methods to control the lifecycle of the KVision application.

### Methods
- **start()**: Initializes and starts the application.
- **start(state)**: Initializes and starts the application with a specific initial state.
- **dispose()**: Cleans up and disposes of the application resources.
```

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

### GridPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to create and configure a GridPanel with specific column and row definitions, gaps, and populates it with child components.

```kotlin
Root("app") {
    GridPanel(
        cols = "repeat(3, 1fr)",
        rows = "auto auto auto",
        columnGap = 10,
        rowGap = 10
    ) {
        h2() { +"Header 1" }
        h2() { +"Header 2" }
        h2() { +"Header 3" }
        
        p() { +"Content 1" }
        p() { +"Content 2" }
        p() { +"Content 3" }
        
        p() { +"Content 4" }
        p() { +"Content 5" }
        p() { +"Content 6" }
    }
}
```

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

### Form Panel Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Demonstrates how to use the formPanel builder to create a login form with username and password fields. Includes validation and data retrieval.

```kotlin
data class LoginForm(val username: String = "", val password: String = "")

Root("app") {
    formPanel<LoginForm> {
        add(
            Text(name = "username", label = "Username"),
            required = true
        )
        add(
            Password(name = "password", label = "Password"),
            required = true
        )
        button("Login") {
            onClick {
                if (validate()) {
                    val data = getDataJson()
                    console.log("Login: $data")
                }
            }
        }
    }
}
```

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

### Observable List Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Shows how to create a list where items are bound to an ObservableValue. The list content updates automatically when the observable changes.

```kotlin
val items = ObservableValue(listOf("A", "B", "C"))

Root("app") {
    ul(items) { list ->
        list.map { item -> li(item) }
    }
}
```

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

### Example Usage of h1 DSL

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Demonstrates how to use the h1 DSL function to create a main title with an additional CSS class.

```kotlin
Root("app") {
    h1("Main Title") {
        addCssClass("page-header")
    }
}
```

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

### Dark Mode Support

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Examples demonstrating how to implement dark mode in KVision applications.

```APIDOC
## Dark Mode Support

### Description
Provides examples and patterns for implementing dark mode functionality in KVision applications, allowing users to switch between light and dark themes.
```

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

### Complete Form Example with Validation

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Demonstrates creating a complete form with data binding, custom validators, and event handlers for submission and cancellation using KVision's DSL.

```kotlin
data class UserForm(val username: String = "", val email: String = "", val age: Int = 0, val newsletter: Boolean = false)

Root("app") {
    formPanel<UserForm> {
        vPanel(spacing = 10) {
            h2("User Registration")
            
            add(
                Text(name = "username", label = "Username"),
                required = true,
                validator = { field ->
                    (field.getValue()?.length ?: 0) >= 3
                },
                validatorMessage = { "At least 3 characters" }
            )
            
            add(
                Email(name = "email", label = "Email"),
                required = true
            )
            
            add(
                Numeric(name = "age", label = "Age"),
                validator = { field ->
                    val age = field.getValue()?.toIntOrNull()
                    age != null && age >= 18
                },
                validatorMessage = { "Must be 18+" }
            )
            
            add(
                CheckBox(label = "Subscribe to newsletter")
            )
            
            hPanel(spacing = 10) {
                button("Register", style = ButtonStyle.SUCCESS) {
                    onClick {
                        if (validate()) {
                            val data = getDataJson()
                            console.log("Registering: $data")
                        }
                    }
                }
                
                button("Cancel", style = ButtonStyle.SECONDARY) {
                    onClick {
                        setDataJson(json())
                    }
                }
            }
        }
    }
}
```

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

### Custom Module Configuration

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/configuration.md

Define and register custom module initializers for additional application setup.

```kotlin
object CustomModule : ModuleInitializer {
    override fun initialize() {
        // Custom initialization code
        console.log("Custom module initialized")
        
        // Configure components
        Style.create(".custom-global") {
            backgroundColor = "#f0f0f0"
        }
    }
}

fun main() {
    startApplication(
        ::MyApp,
        CoreModule,
        CustomModule
    )
}
```

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

### DockPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use the DockPanel to arrange components in different dock positions (TOP, LEFT, CENTER, BOTTOM). Ensure the Root element is initialized with an ID.

```kotlin
Root("app") {
    DockPanel {
        add(
            div {
                h3("Header")
            },
            Edge.TOP
        )
        add(
            div {
                h3("Sidebar")
                ul {
                    li("Item 1")
                    li("Item 2")
                }
            },
            Edge.LEFT
        )
        add(
            div {
                h2("Content")
                p("Main content area")
            },
            Edge.CENTER
        )
        add(
            div {
                p("Footer")
            },
            Edge.BOTTOM
        )
    }
}
```

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

### CssClass Implementation Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Shows how to implement the CssClass interface to create custom CSS class objects. The className is provided during instantiation.

```kotlin
class CustomClass(override val className: String) : CssClass

val myClass = CustomClass("my-custom-class")
```

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

### ObservableState.subscribe, getState, setState

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/API-INVENTORY.txt

Methods for subscribing to, getting, and setting the state of an ObservableState.

```APIDOC
## ObservableState.subscribe, getState, setState

### Description
`subscribe` allows registration of a callback for state changes.
`getState` returns the current state.
`setState` updates the state, notifying subscribers.

### Method
`subscribe`, `getState`, `setState`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **subscribe**: 
  - **callback** (function) - Required - The function to execute on state change.
- **getState**: No parameters.
- **setState**: 
  - **state** (any) - Required - The new state to apply.
```

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

### SplitPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Shows how to create a SplitPanel with a row direction and an initial proportion of 30%. It divides the content into two distinct panels.

```kotlin
Root("app") {
    SplitPanel(direction = FlexDirection.ROW, proportion = 30) {
        div {
            h2("Left Panel")
            p("Sidebar content")
        }
        div {
            h2("Right Panel")
            p("Main content")
        }
    }
}
```

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

### Disabled Button Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Shows how to create a button that is initially disabled. Set the 'disabled' property to true to prevent user interaction.

```kotlin
button("Disabled") {
    disabled = true
}
```

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

### Multiple Text Input Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Shows the instantiation of Email, Password, and Search input components within a KVision application root. The Password component demonstrates setting a placeholder.

```kotlin
Root("app") {
    Email(label = "Email Address")
    Password(label = "Password") {
        placeholder = "Enter password"
    }
    Search(label = "Search")
}
```

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

### Dark Mode Setup

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Sets up basic dark mode styles for the body and demonstrates how to toggle it using KVManager. This is useful for providing a better user experience in low-light conditions.

```kotlin
fun setupDarkMode() {
    Style.create("body") {
        backgroundColor = "white"
        color = "#333"
    }
    
    Style.create("body.dark-mode") {
        backgroundColor = "#1e1e1e"
        color = "#e0e0e0"
    }
    
    // Toggle with KVManager
    KVManager.darkMode = true
}
```

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

### StackPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use StackPanel to create a tabbed interface. The activeIndex property controls which child is visible.

```kotlin
Root("app") {
    StackPanel {
        h1("Screen 1")
        h1("Screen 2")
        h1("Screen 3")
    }.apply {
        activeIndex = 0  // Show first child
    }
    
    button("Next").onClick {
        stackPanel.activeIndex = (stackPanel.activeIndex + 1) % 3
    }
}
```

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

### SimplePanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use the SimplePanel to group and display multiple child components within a KVision application. The Root component is used to mount the application.

```kotlin
Root("app") {
    SimplePanel {
        h1("Title")
        p("First paragraph")
        p("Second paragraph")
    }
}
```

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

### FormPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Demonstrates how to use the FormPanel to create a login form. It includes adding text, password, and checkbox fields, along with a login button that validates the form and logs the data.

```kotlin
Root("app") {
    FormPanel<LoginData> {
        add(
            Text(name = "username", label = "Username"),
            required = true,
            validator = { field ->
                field.getValue()?.length ?: 0 >= 3
            },
            validatorMessage = { "Username must be at least 3 characters" }
        )
        
        add(
            Password(name = "password", label = "Password"),
            required = true
        )
        
        add(
            CheckBox(label = "Remember me")
        )
        
        button("Login") {
            onClick {
                if (validate()) {
                    val json = getDataJson()
                    console.log("Form data: $json")
                }
            }
        }
    }
}
```

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

### FlexPanel Usage Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/containers.md

Demonstrates how to use the FlexPanel to create a row-based layout with centered items and space between them. It includes a header, a search input, and a button.

```kotlin
Root("app") {
    FlexPanel(
        direction = FlexDirection.ROW,
        spacing = 20,
        alignItems = AlignItems.CENTER,
        justifyContent = JustifyContent.BETWEEN
    ) {
        h2("Header")
        input(type = InputType.SEARCH) {
            placeholder = "Search"
            width = 200.px
        }
        button("Settings")
    }
}
```

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

### KVision Basic Input Components

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Shows examples of basic input components like Text, Password, Email, Numeric, and Range. These are used for user data entry.

```kotlin
Text(label = "Name") { placeholder = "Your name" }
Password(label = "Password")
Email(label = "Email")
Numeric(label = "Age") { min = 0; max = 150 }
Range(label = "Volume") { min = 0; max = 100 }
```

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

### Button Styles

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Use these examples to create buttons with different predefined styles and sizes. The `style` parameter accepts enums like PRIMARY, SUCCESS, DANGER, etc., while `size` accepts LARGE or SMALL.

```kotlin
button("Default", style = ButtonStyle.PRIMARY)
button("Success", style = ButtonStyle.SUCCESS)
button("Danger", style = ButtonStyle.DANGER)
button("Warning", style = ButtonStyle.WARNING)
button("Info", style = ButtonStyle.INFO)
button("Light", style = ButtonStyle.LIGHT)
button("Dark", style = ButtonStyle.DARK)
button("Link", style = ButtonStyle.LINK)

// Outline variants
button("Outline", style = ButtonStyle.OUTLINEPRIMARY)

// Sizes
button("Large", size = ButtonSize.LARGE)
button("Small", size = ButtonSize.SMALL)
```

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

### Example with Custom Form Validation

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Demonstrates how to apply custom validator and validatorMessage functions to form fields within a FormPanel for email and age validation.

```kotlin
FormPanel<ContactForm> {
    add(
        Email(name = "email", label = "Email"),
        required = true,
        validator = { field ->
            val email = field.getValue()
            email != null && email.contains("@")
        },
        validatorMessage = { "Please enter a valid email" }
    )
    
    add(
        Numeric(name = "age", label = "Age"),
        validator = { field ->
            val age = field.getValue()?.toIntOrNull()
            age != null && age >= 18
        },
        validatorMessage = { "Must be 18 or older" }
    )
}
```

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

### Modal/Overlay Implementation in KVision

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Example of creating a modal dialog that appears on top of the main content. The modal's visibility is controlled by a boolean variable, and it includes basic styling for overlay and content.

```kotlin
var showModal = false

Root("app") {
    button("Open") {
        onClick { showModal = true }
    }
    
    div {
        visible = showModal
        style {
            display = Display.FLEX
            position = Position.FIXED
            top = 0.px
            left = 0.px
            width = 100.perc
            height = 100.perc
            backgroundColor = "rgba(0,0,0,0.5)"
        }
        
        div {
            backgroundColor = "white"
            padding = 20.px
            borderRadius = 8.px
            
            h2("Modal Title")
            p("Modal content")
            
            button("Close") {
                onClick { showModal = false }
            }
        }
    }
}
```

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

### Canvas Drawing Example

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates how to use the Canvas component to draw a red rectangle. It utilizes an after insert hook to access the canvas element and its 2D context.

```kotlin
Root("app") {
    Canvas(width = 400, height = 300) {
        addAfterInsertHook { vnode ->
            val canvas = vnode.elm as? HTMLCanvasElement
            val ctx = canvas?.getContext("2d")
            if (ctx != null) {
                ctx.asDynamic().fillStyle = "red"
                ctx.asDynamic().fillRect(0.0, 0.0, 400.0, 300.0)
            }
        }
    }
}
```

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

### Build Production Application Package (Windows)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Create a production-optimized application package using Gradle on Windows. The output is a zip file.

```bash
gradlew.bat zip
```

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

### Build Production Application Package (Linux)

Source: https://github.com/rjaros/kvision/blob/master/README.md

Create a production-optimized application package using Gradle on Linux. The output is a zip file.

```bash
./gradlew zip
```

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

### ObservableValue.getState, setState

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/API-INVENTORY.txt

Provides methods to get the current state and set a new state for an ObservableValue.

```APIDOC
## ObservableValue.getState, setState

### Description
`getState` retrieves the current value of the observable.
`setState` updates the observable to a new value, triggering subscriptions.

### Method
`getState`, `setState`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **getState**: No parameters.
- **setState**: 
  - **value** (any) - Required - The new value to set for the observable.
```

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

### Static List Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates creating a static shopping list and a step-by-step ordered list using Ul, Ol, and Li components.

```kotlin
Root("app") {
    h2("Shopping List")
    ul {
        li("Apples")
        li("Bananas")
        li("Oranges")
    }
    
    h2("Steps")
    ol {
        li("First step")
        li("Second step")
        li("Third step")
    }
}
```

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

### FormControl Interface Methods

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/API-INVENTORY.txt

Methods for interacting with form controls, including getting and setting values, and managing focus.

```APIDOC
## FormControl Interface Methods

### Description
Methods for interacting with form controls, including value management and focus control.

### Methods
- `getValue(): String`
- `setValue(value: String)`
- `focus()`
- `blur()`
```

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

### startApplication Function

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Details on the startApplication function used for initializing the KVision application.

```APIDOC
## startApplication Function

### Description
This function is responsible for the initial setup and launch of the KVision application.

### Usage
`startApplication()`
```

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

### Basic Select Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/form-components.md

Demonstrates how to create a single-select dropdown for choosing a color. Includes setting initial value and handling the 'onChange' event to log the selected value.

```kotlin
Root("app") {
    Select(
        options = listOf(
            "red" to "Red",
            "green" to "Green",
            "blue" to "Blue"
        ),
        label = "Choose color"
    ) {
        value = "red"
        onChange { event ->
            val select = event.target as HTMLSelectElement
            console.log("Selected: ${select.value}")
        }
    }
    
    Select(
        options = listOf(
            "python" to "Python",
            "kotlin" to "Kotlin",
            "javascript" to "JavaScript"
        ),
        label = "Languages",
        multiple = true
    )
}
```

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

### ModuleInitializer Interface

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

The ModuleInitializer interface is used for modules that need to perform actions during application startup. The `initialize` method is called once before the application starts.

```APIDOC
## ModuleInitializer Interface

**Import:** `io.kvision.ModuleInitializer`

Interface for module initializers that are called during application startup.

```kotlin
interface ModuleInitializer {
    fun initialize()
}
```

### Methods

#### initialize()

```kotlin
fun initialize()
```

Called once during application startup, before the application's `start()` method.
```

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

### Basic Button Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates how to create a simple clickable button with primary styling. Attach event handlers like onClick to define button actions.

```kotlin
Root("app") {
    button("Click me") {
        style = ButtonStyle.PRIMARY
        onClick {
            console.log("Clicked!")
        }
    }
}
```

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

### Responsive Design Styles in KVision

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Illustrates creating responsive styles using Style.create. Define base styles and apply conditional styles based on minimum viewport widths.

```kotlin
Style.create(".container") {
    width = 100.perc
}

Style.create(".container", {
    width = 960.px
}, "(min-width: 1200px)")
```

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

### Form with Validation in KVision

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Example of creating a form with input fields, required validation, and custom validators. The `validate()` method checks all fields before submission.

```kotlin
FormPanel<LoginForm> {
    add(
        Text(name = "email", label = "Email"),
        required = true,
        validator = { field ->
            field.getValue()?.contains("@") ?: false
        },
        validatorMessage = { "Invalid email" }
    )
    
    add(
        Password(name = "password", label = "Password"),
        required = true
    )
    
    button("Login") {
        onClick {
            if (validate()) {
                // Submit form
            }
        }
    }
}
```

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

### Get HTML Attribute from KVision Component

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/core-components.md

Retrieves the value of an additional HTML attribute from the component's element. Returns null if the attribute is not set.

```kotlin
fun getAttribute(name: String): String?
```

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

### Create a Vertical Panel (vPanel)

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Use the `vPanel` extension function to create a vertical panel. It accepts parameters for spacing and alignment.

```kotlin
fun Container.vPanel(
    spacing: Int? = null,
    alignItems: AlignItems? = null,
    className: String? = null,
    init: (VPanel.() -> Unit)? = null
): VPanel
```

```kotlin
Root("app") {
    vPanel(spacing = 10) {
        h1("Title")
        p("Content")
    }
}
```

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

### MutableState Interface

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/state-management.md

The MutableState interface provides methods to get, set, and subscribe to state changes in a reactive manner. It extends the base State interface.

```APIDOC
## MutableState Interface

### Description
The base interface for mutable state objects that can be observed for changes.

### Methods

#### getState()

##### Description
Gets the current state value.

##### Returns
T — the current state

#### setState(state: T)

##### Description
Sets the state value and notifies all observers.

##### Parameters
- **state** (T) - Required - New state value

#### subscribe(observer: (T) -> Unit): () -> Unit

##### Description
Subscribes to state changes. The observer function is called immediately with the current state, then called again whenever the state changes.

##### Parameters
- **observer** ((T) -> Unit) - Required - Function called with state updates

##### Returns
() -> Unit — unsubscribe function

### Example
```kotlin
val state: MutableState<String> = ObservableValue("initial")

val unsubscribe = state.subscribe { newValue ->
    println("State changed to: $newValue")
}

state.setState("updated")  // Prints "State changed to: updated"
unsubscribe()              // Stop listening to changes
```
```

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

### KVision startApplication Function Signature

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

The signature of the startApplication function, which is the main entry point for KVision applications. It accepts a builder function for the application, an optional Hot Module Replacement reference, and variable arguments for module initializers.

```kotlin
fun startApplication(
    builder: () -> Application,
    hot: Hot? = null,
    vararg moduleInitializer: ModuleInitializer
)
```

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

### Component Attribute Management

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Set and get custom HTML attributes for a component using `setAttribute` and `getAttribute`. This is helpful for integrating with JavaScript or custom data attributes.

```kotlin
component.setAttribute("data-value", "test")
component.getAttribute("data-value")
```

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

### Basic Div Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates how to use the Div component to create a card-like structure with a title and content.

```kotlin
Root("app") {
    div("card") {
        h2("Card Title")
        p("Card content")
    }
}
```

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

### Basic Paragraph Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates the basic usage of the KVision paragraph component (p).

```kotlin
Root("app") {
    p("This is a paragraph of text.")
    p("This paragraph has ") {
        strong("bold text")
        +" and "
        em("italic text")
        +"."
    }
}
```

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

### Basic HTML Headings Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates the basic usage of KVision's heading components (h1 to h6) within a Root element.

```kotlin
Root("app") {
    h1("Page Title")
    h2("Section Title")
    h3("Subsection")
    h4("Sub-subsection")
    h5("Minor heading")
    h6("Least important heading")
}
```

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

### show Method

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/core-components.md

Makes the component visible by setting its visibility property to true.

```APIDOC
## show

### Description
Shows the component by setting visibility to true.

### Method
fun show()
```

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

### Link Component Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Demonstrates how to use the Link component to create navigation links.

```kotlin
Root("app") {
    link("Visit Google", href = "https://google.com")
    link("Open in new window", href = "https://example.com") {
        target = LinkTarget.BLANK
    }
}
```

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

### ModuleInitializer Interface

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Defines the interface for setting up application modules.

```APIDOC
## ModuleInitializer Interface

### Description
An interface used for configuring and initializing application modules.

### Methods
- **initialize()**: Method to be implemented for module setup.
```

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

### Observing State Changes

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/state-management.md

Demonstrates how to subscribe to state changes, update the state, and unsubscribe.

```kotlin
val state: MutableState<String> = ObservableValue("initial")

val unsubscribe = state.subscribe { newValue ->
    println("State changed to: $newValue")
}

state.setState("updated")  // Prints "State changed to: updated"
unsubscribe()              // Stop listening to changes
```

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

### Widget Event Handlers DSL

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/core-components.md

Provides a Domain Specific Language (DSL) for easily binding various event listeners to Widget components. These functions allow for concise event handling setup.

```kotlin
fun <T : Widget> T.onClick(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onDoubleClick(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onKeyDown(listener: (KeyboardEvent) -> Unit) : T
fun <T : Widget> T.onKeyUp(listener: (KeyboardEvent) -> Unit) : T
fun <T : Widget> T.onFocus(listener: (Event) -> Unit) : T
fun <T : Widget> T.onBlur(listener: (Event) -> Unit) : T
fun <T : Widget> T.onChange(listener: (Event) -> Unit) : T
fun <T : Widget> T.onInput(listener: (Event) -> Unit) : T
fun <T : Widget> T.onMouseDown(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onMouseUp(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onMouseEnter(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onMouseLeave(listener: (MouseEvent) -> Unit) : T
fun <T : Widget> T.onScroll(listener: (Event) -> Unit) : T
fun <T : Widget> T.onDragStart(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDrag(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDragEnd(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDragEnter(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDragLeave(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDragOver(listener: (DragEvent) -> Unit) : T
fun <T : Widget> T.onDrop(listener: (DragEvent) -> Unit) : T
```

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

### Set Up Hot Module Replacement (HMR) for Application State

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/configuration.md

Configure Hot Module Replacement (HMR) to enable state preservation during development. This involves overriding `start` and `dispose` methods to save and restore application state.

```kotlin
@JsModule("MODULE_NAME")
@JsNonModule
external val module: dynamic

class App : Application() {
    private var appState: AppState = AppState()
    
    override fun start(state: Map<String, Any>) {
        // Restore state from HMR
        val savedState = (state["appState"] as? AppState) ?: AppState()
        appState = savedState
        
        Root("app") {
            h1("App State: ${appState.counter}")
        }
    }
    
    override fun dispose(): Map<String, Any> {
        // Save state for HMR
        return mapOf("appState" to appState)
    }
}

fun main() {
    startApplication(
        ::App,
        module.hot,
        CoreModule
    )
}
```

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

### Style.create (DSL Builder)

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Creates a global CSS style rule using a Kotlin DSL builder for more structured style definition, with an optional media query.

```APIDOC
## Style.create (DSL Builder)

### Description
Creates a global style rule using a DSL builder.

### Method
`static fun Style.create(selector: String, init: (Style.() -> Unit)?, mediaQuery: String? = null)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters Table
| Parameter | Type | Description |
|-----------|------|-------------|
| selector | String | CSS selector |
| init | (Style.() -> Unit)? | Style builder function |
| mediaQuery | String? | Media query condition |

### Request Example
```kotlin
Style.create(".custom-button") {
    backgroundColor = "#007bff"
    color = "white"
    padding = 10.px
    borderRadius = 5.px
    border = "none"
    cursor = Cursor.POINTER
    fontSize = 16.px
}
```

### Response
None (modifies global styles)

#### Success Response (N/A)
None

#### Response Example
None
```

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

### Apply Styles with Raw CSS String

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Shows how to create a global style rule for a '.card' selector using a raw CSS string. This is a concise way to apply predefined CSS properties.

```kotlin
Style.create(".card", "border: 1px solid #ddd; padding: 20px; border-radius: 8px;")
```

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

### Form State Management Pattern with ObservableState

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/state-management.md

A pattern for managing complex form states using ObservableState. This example demonstrates binding input fields (text, password, checkbox) and a button to a data class representing the form state, updating the state on user interaction.

```kotlin
data class LoginForm(
    val username: String = "",
    val password: String = "",
    val rememberMe: Boolean = false,
    val isLoading: Boolean = false
)

class LoginPage : Application() {
    private val formState = ObservableState(LoginForm())
    
    override fun start() {
        Root("app") {
            vPanel {
                h1("Login")
                
                // Username field
                textInput {
                    placeholder = "Username"
                    value(formState) { it.username }
                    onChange { event ->
                        val input = event.target as HTMLInputElement
                        formState.value = formState.value.copy(
                            username = input.value
                        )
                    }
                }
                
                // Password field
                passwordInput {
                    placeholder = "Password"
                    value(formState) { it.password }
                    onChange { event ->
                        val input = event.target as HTMLInputElement
                        formState.value = formState.value.copy(
                            password = input.value
                        )
                    }
                }
                
                // Remember me checkbox
                checkBox("Remember me") {
                    checked(formState) { it.rememberMe }
                    onChange { event ->
                        val checkbox = event.target as HTMLInputElement
                        formState.value = formState.value.copy(
                            rememberMe = checkbox.checked
                        )
                    }
                }
                
                // Submit button
                button("Login") {
                    disabled(formState) { it.isLoading }
                    onClick {
                        val form = formState.value
                        formState.value = form.copy(isLoading = true)
                        
                        // Simulate API call
                        window.setTimeout({
                            formState.value = form.copy(isLoading = false)
                        }, 1000)
                    }
                }
            }
        }
    }
}
```

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

### Show Widget

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/core-components.md

Makes the widget visible by setting its visibility property to true.

```kotlin
fun show()
```

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

### Flexbox Layouts in KVision

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/quick-reference.md

Demonstrates vertical, horizontal, and wrapping flexbox layouts using VPanel, HPanel, and FlexPanel. Use these for arranging components with flexible spacing and alignment.

```kotlin
VPanel(spacing = 10, alignItems = AlignItems.CENTER) {
    // Vertical layout, centered
}

HPanel(spacing = 15, justifyContent = JustifyContent.BETWEEN) {
    // Horizontal layout, space between items
}

FlexPanel(
    direction = FlexDirection.ROW,
    spacing = 20,
    wrap = FlexWrap.WRAP
) {
    // Flexbox with wrapping
}
```

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

### Root Container Initialization with Fluid Container

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/application-lifecycle.md

Initializes the Root container with a fluid Bootstrap container type. This allows the content to take up the full width of the viewport.

```kotlin
Root("app", ContainerType.FLUID) {
    vPanel {
        h1("Full Width App")
    }
}
```

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

### Create Image DSL

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Use this builder to create an image element. You can specify the source, alt text, title, and CSS classes.

```kotlin
fun Container.img(
    src: String? = null,
    alt: String? = null,
    title: String? = null,
    className: String? = null,
    init: (Img.() -> Unit)? = null
): Img
```

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

### VPanel

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/COMPLETION-SUMMARY.txt

Documentation for the VPanel, a vertical layout container.

```APIDOC
## VPanel

### Description
A container component that arranges its children vertically in a column layout.
```

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

### Create Global Style Rule using DSL Builder

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Use this method to create a global CSS style rule using KVision's DSL builder. This allows for a more type-safe and structured way to define styles.

```kotlin
fun Style.create(selector: String, init: (Style.() -> Unit)?, mediaQuery: String? = null)
```

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

### CoreModule Initialization

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/configuration.md

The default KVision core module that initializes base styles and framework.

```kotlin
object CoreModule : ModuleInitializer {
    override fun initialize()
}
```

```kotlin
fun startApplication(
    ::MyApp,
    CoreModule  // Initialize core module
)
```

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

### pre DSL

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/dsl-builders.md

Creates a preformatted text block with optional text and a builder function.

```APIDOC
## pre DSL

### Description
Creates a preformatted text block with optional text and a builder function.

### Method
Extension Function

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters Table
| Parameter | Type | Required | Default | Description |
|---|---|---|---|---|
| text | String | No | "" | Preformatted text content |
| className | String? | No | null | CSS classes |
| init | (Pre.() -> Unit)? | No | null | Builder function |

### Response
#### Success Response
Returns the created preformatted text block.

#### Response Example
None provided.
```

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

### Style.create (CSS String)

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/styling-and-css.md

Creates a global CSS style rule by providing a selector, raw CSS properties, and an optional media query.

```APIDOC
## Style.create (CSS String)

### Description
Creates a global style rule from a CSS string.

### Method
`static fun Style.create(selector: String, css: String, mediaQuery: String? = null)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters Table
| Parameter | Type | Description |
|-----------|------|-------------|
| selector | String | CSS selector |
| css | String | Raw CSS properties |
| mediaQuery | String? | Media query condition |

### Request Example
```kotlin
Style.create(".card", "border: 1px solid #ddd; padding: 20px; border-radius: 8px;")
```

### Response
None (modifies global styles)

#### Success Response (N/A)
None

#### Response Example
None
```

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

### Observable List Usage

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/api-reference/html-elements.md

Shows how to render a list dynamically from an ObservableValue and update it.

```kotlin
val items = ObservableValue(listOf("Item 1", "Item 2"))

Root("app") {
    ul(items) { itemList ->
        itemList.map { item ->
            li(item)
        }
    }
}

items.value = items.value + "Item 3"
```

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

### Global Style Creation

Source: https://github.com/rjaros/kvision/blob/master/_autodocs/configuration.md

Configures application-wide styles using the `Style.create` function. Supports defining styles for elements, pseudo-elements, and media queries.

```kotlin
Style.create("body") {
    fontFamily = "Arial, sans-serif"
    fontSize = 14.px
    lineHeight = 1.5.em
    color = "#333"
}

Style.create("button") {
    padding = 10.px
    borderRadius = 4.px
    border = "none"
    cursor = Cursor.POINTER
    transition = "background-color 0.3s ease"
}

Style.create("input, select, textarea") {
    padding = 8.px
    border = "1px solid #ddd"
    borderRadius = 4.px
    fontFamily = "inherit"
}

// Media queries
Style.create(".responsive", {
    width = 100.perc
}, "(max-width: 768px)")

Root("app") {
    // ... components
}
```