### V UI Running Examples

Source: https://github.com/vlang/ui/blob/master/README.md

Instructions for running the example applications provided with the V UI library. This involves navigating to the examples directory and using the V compiler to execute specific example files.

```bash
cd examples
v run users.v
v run rgb_color.v
v run ...
```

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

### V UI: Button Widget Example

Source: https://github.com/vlang/ui/blob/master/docs.md

Shows how to create a `ui.button` with specific properties like text, width, tooltip, and an `on_click` callback. The example highlights common parameters for button customization.

```v
ui.button(
    width:    60,
    text:     'Add user',
    tooltip:  'Required fields:\n  * First name\n  * Last name\n  * Age',
    on_click: app.btn_add_click, // `app` holds the application state
    radius:   .0
),
```

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

### V UI Installation

Source: https://github.com/vlang/ui/blob/master/README.md

Commands required to install the V UI library using the V package manager. This includes updating the V toolchain and then installing the UI module.

```bash
v up
v install ui
```

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

### V UI: Create and Run Main Window

Source: https://github.com/vlang/ui/blob/master/docs.md

Demonstrates the basic structure for creating a main window in V UI, including setting its dimensions, title, and root layout, and starting the application's event loop.

```v
import ui

fn main() {
    // Create the main window
    window := ui.window(
        width: 800,
        height: 600,
        title: 'My App',
        layout: ui.column( // Add your root layout here
            children: [
                ui.label(text: 'Hello, V UI!')
            ]
        )
    )
    // Start the event loop
    ui.run(window)
}
```

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

### V UI: Textbox Widget Examples

Source: https://github.com/vlang/ui/blob/master/docs.md

Illustrates the usage of `ui.textbox` for single-line input with data binding and error state, and a multiline textbox with custom styling and properties.

```v
// Simple textbox with placeholder and data binding
ui.textbox(
    max_len:     20,
    width:       200,
    placeholder: 'First name',
    text:        &app.first_name, // Bind to app.first_name string
    is_error:    &app.is_error,  // Bind error state
    is_focused: true
),

// Multiline textbox
ui.textbox(
    mode:               .multiline,
    id:                 'edit',
    z_index:            20,
    height:             200,
    line_height_factor: 1.0,
    text_size:          24,
    text_font_name:     'fixed',
    bg_color:           gx.hex(0xfcf4e4ff)
)
```

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

### V ui.box_layout Example

Source: https://github.com/vlang/ui/blob/master/docs.md

Demonstrates the usage of ui.box_layout for absolute and relative positioning of child widgets within a parent container. It showcases various bounding box syntaxes for defining child placement and sizing.

```v
ui.box_layout(
    id:       'bl',
    children: {
        // Top-left corner, 30x30 pixels
        'id1: (0,0) ++ (30,30)': ui.rectangle(...),
        // From (30,30) to 30.5 pixels from the right/bottom edges
        'id2: (30,30) -> (-30.5,-30.5)': ui.rectangle(...),
        // From center (50%, 50%) to bottom-right corner (100%, 100%)
        'id3: (50%,50%) ->  (100%,100%)': ui.rectangle(...),
        // Bottom-right corner, 30x30 pixels (size defined from bottom-right)
        'id4: (-30.5, -30.5) ++ (30,30)': ui.rectangle(...),
        // Position relative to id4, size 20x20
        'id5: (@id4.x + 5, @id4.y+5) ++ (20,20)': ui.rectangle(...)
    }
)
```

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

### V ui.canvas_layout Example

Source: https://github.com/vlang/ui/blob/master/docs.md

Illustrates the use of ui.canvas_layout for arranging widgets and performing custom drawing operations. Widgets are placed using ui.at(), and custom drawing logic can be provided via the on_draw callback.

```v
ui.canvas_layout(
    id:              'demo_cl',
    on_draw:         draw, // Custom background drawing
    scrollview:      true,
    children:        [
        ui.at(10, 10, ui.button(id:'b_thm', ...)), // Place button at (10, 10)
        ui.at(120, 10, ui.dropdown(...)),         // Place dropdown at (120, 10)
        // ... other widgets placed with ui.at()
    ]
)
```

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

### V UI Styling and Theming

Source: https://github.com/vlang/ui/blob/master/docs.md

Explains how to style widgets and layouts using parameters like `theme` and `bg_color`. It also covers loading themes from TOML files and applying styles using helper functions.

```APIDOC
Styling:

Widgets and layouts often accept `theme` and `bg_color` parameters.
Specific style parameters (like `radius`, `text_color`, `text_size`) can be passed during creation.
The library includes support for themes loaded from TOML files (`src/styles.v`, `src/style_*.v`).
`src/style_4colors.v` and `src/style_accent_color.v` provide functions (`load_4colors_style`, `load_accent_color_style`) to apply themes based on a few base colors.
The `users_resizable.v` example shows adding a theme switching shortcut (`window.add_shortcut_theme()`).
```

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

### Launch Multiple V UI Applications with Window Manager

Source: https://github.com/vlang/ui/blob/master/apps/README.md

Demonstrates launching multiple V UI applications concurrently using a window manager. It imports necessary modules, creates application instances, adds them to the window manager with specific positions and sizes, and then runs the manager to display them.

```v
import ui
import ui.apps.users
import ui.apps.editor

fn main() {
	mut wm := ui.wm()
	mut app := users.new()
	wm.add('appusers: (20,20) ++ (600,400)', mut app)
	mut app2 := editor.new()
	wm.add('editor: (400,10) ++ (600,400)', mut app2)
	wm.run()
}
```

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

### V UI Basic Window and Widgets

Source: https://github.com/vlang/ui/blob/master/README.md

Demonstrates creating a basic V UI window with text input fields. It shows how to structure UI elements using rows and columns, set properties like width and placeholder, and bind text fields to struct members. This snippet illustrates the declarative API approach.

```v
import ui

struct App {
mut:
    window     &ui.Window = unsafe { nil }
    first_name string
    last_name  string
}

fn main() {
    mut app := &App{}
    app.window = ui.window(
        width: 600
        height: 400
        title: 'V UI Demo'
        children: [
            ui.row(
                margin: ui.Margin{10, 10, 10, 10}
                children: [
                    ui.column(
                        width: 200
                        spacing: 13
                        children: [
                            ui.textbox(
                                max_len: 20
                                width: 200
                                placeholder: 'First name'
                                text: &app.first_name
                            ),
                            ui.textbox(
                                max_len: 50
                                width: 200
                                placeholder: 'Last name'
                                text: &app.last_name
                            ),
                        ]
                    ),
                ]
            ),
        ]
    )
    ui.run(app.window)
}
```

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

### Run vui_demo.v with V

Source: https://github.com/vlang/ui/blob/master/bin/README.md

This command executes the 'vui_demo.v' file using the V compiler. The '-live' flag enables live reloading, automatically recompiling and restarting the program when source files change.

```v
v -live run vui_demo.v
```

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

### Generate demos.json

Source: https://github.com/vlang/ui/blob/master/bin/assets/README.md

Command to generate the demos.json file. This script should be executed after adding new demo files to the '../demo' directory. The generated file is embedded in the 'vui_demo.v' source file.

```v
v run build_demo_json.vsh
```

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

### V UI Application Structure

Source: https://github.com/vlang/ui/blob/master/docs.md

Describes a common pattern for structuring V UI applications. It involves defining UI structs, parameters, initialization functions, and layout construction methods.

```APIDOC
Application Structure (`ui.Application`):

Common pattern for V UI applications:
1. Define an `AppUI` (or similar) struct marked `@[heap]`. This holds application state, including references to important widgets (`&ui.Window`, `&ui.Layout`, specific buttons/textboxes).
2. Define an `AppUIParams` struct marked `@[params]` for initialization parameters.
3. Implement a `new(params)` function to create and initialize the `AppUI` instance, including calling `make_layout()`.
4. Implement an `app(params)` function that returns `&ui.Application(&AppUI)`.
5. Implement a `make_layout()` method on `AppUI` that constructs the UI using `ui.row`, `ui.column`, widgets, and components, assigning the result to `app.layout`.
6. Optionally implement an `on_init` callback (`fn [mut app] (w &ui.Window)`) assigned to `app.on_init` for setup after the window is created (e.g., adding shortcuts).

This pattern encapsulates the UI's state and construction logic.
```

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

### V UI Menu File Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Implements a common file menu pattern with New, Open, Save buttons and a directory tree view. It provides callbacks for file selection and button actions.

```APIDOC
uic.menufile_stack:
  id: (string) Base ID.
  dirs: ([]string) Initial directories.
  on_file_changed: (fn(&MenuFileComponent)) Callback when a file is selected in the tree.
  on_new: (fn(&MenuFileComponent)) Callback for 'New' button action.
  on_save: (fn(&MenuFileComponent)) Callback for 'Save' button action.
```

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

### V UI Components (uic) API Documentation

Source: https://github.com/vlang/ui/blob/master/docs.md

Provides API details for various pre-built V UI components, covering their parameters, functionality, and common usage patterns.

```APIDOC
ui.box_layout(id: string, children: map[string]Widget, scrollview: bool)
  - Provides absolute and relative positioning and sizing within a parent container.
  - Key Parameters (`BoxLayoutParams`):
    - `id`: (string) Identifier for the layout.
    - `children`: (map[string]Widget) A map where the key defines the child's `id` and `bounding box`, and the value is the `Widget`.
      - Bounding Box Syntax (in map key): `child_id: bounding_spec`
      - `child_id`: An identifier for the child within this box layout.
      - `bounding_spec`: Defines position and size using pixels, percentages, or relative references (e.g., `@other_id.x + 5`). Supports `(x, y) ++ (w, h)` or `(x, y) -> (x2, y2)` formats.
      - Special Values: `stretch` (equivalent to `(0, 0) -> (100%, 100%)`), `hidden` (makes child invisible and excluded from layout).
    - `scrollview`: (bool) Enable scrolling for the layout.
  - Limitations: Requires careful definition of bounding specifications.
```

```APIDOC
ui.canvas_layout(id: string, children: []Widget, on_draw fn(mut DrawDevice, &CanvasLayout), scrollview: bool, full_width int, full_height int)
  - Similar to `box_layout` but uses `ui.at(x, y, widget)` for direct placement and allows custom drawing via `on_draw`.
  - Key Parameters (`CanvasLayoutParams`):
    - `id`: (string) Identifier for the layout.
    - `children`: ([]Widget) List of widgets, often wrapped in `ui.at()`.
    - `on_draw`: (fn(mut DrawDevice, &CanvasLayout)) Custom drawing callback function.
    - `scrollview`: (bool) Enable scrolling.
    - `full_width`, `full_height`: (int) Define the total scrollable area size if different from content bounds.
```

```APIDOC
uic.accordion_stack(id: string, titles: []string, children: []ui.Widget, scrollview: bool)
  - Creates collapsible sections within a UI.
  - Parameters:
    - `id`: (string) Base identifier for the accordion stack.
    - `titles`: ([]string) An array of strings, where each string is the title for a collapsible section header.
    - `children`: ([]ui.Widget) An array of UI widgets, where each widget corresponds to the content of a section.
    - `scrollview`: (bool) If true, enables scrolling for the entire accordion component.
```

```APIDOC
uic.alpha_stack(id: string, alpha: int, on_changed fn(&AlphaComponent))
  - A component combining a slider and a textbox for selecting an alpha (transparency) value.
  - Parameters:
    - `id`: (string) Base identifier for the alpha component.
    - `alpha`: (int) The initial alpha value, typically ranging from 0 to 255.
    - `on_changed`: (fn(&AlphaComponent)) A callback function that is invoked whenever the alpha value is changed.
```

```APIDOC
uic.colorbox_stack(id: string, light bool, hsl bool, drag bool, connect(&gx.Color), connect_colorbutton(&ColorButtonComponent))
  - A comprehensive color picker component featuring Hue, Saturation/Value, and RGB input controls.
  - Often used in conjunction with `uic.colorbox_subwindow_add` to display it in a separate window.
  - Parameters:
    - `id`: (string) Base identifier for the color picker.
    - `light`, `hsl`, `drag`: (bool) Configuration options for the picker's appearance and behavior.
    - `connect(&gx.Color)`: Links the picker's output color to a specific `gx.Color` variable.
    - `connect_colorbutton(&ColorButtonComponent)`: Links the picker to a `uic.colorbutton` component.
```

```APIDOC
uic.colorbutton(id: string, bg_color: &gx.Color, on_click fn(&ColorButtonComponent), on_changed fn(&ColorButtonComponent))
  - A button that displays a color swatch and can trigger a color picker.
  - Typically, right-clicking the button opens a `colorbox` subwindow.
  - Parameters:
    - `id`: (string) Identifier for the color button.
    - `bg_color`: (&gx.Color) A pointer to the `gx.Color` variable that the button represents and displays.
    - `on_click`: (fn(&ColorButtonComponent)) Callback function executed on a left-click event.
    - `on_changed`: (fn(&ColorButtonComponent)) Callback function executed when the button's color is modified (e.g., by an external color picker).
```

```APIDOC
uic.colorpalette_stack(id: string, ncolors int, connect_color(&gx.Color))
  - Displays a palette of colors, including a main editable color swatch and several predefined swatches, along with an alpha slider.
  - Parameters:
    - `id`: (string) Base identifier for the color palette.
    - `ncolors`: (int) Specifies the number of additional color swatches to display in the palette.
    - `connect_color(&gx.Color)`: Links the palette's primary output color to a specified `gx.Color` variable.
```

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

### Vlang Menu and MenuBar Structure

Source: https://github.com/vlang/ui/blob/master/docs.md

Components for creating context menus and menu bars. `ui.menuitem` defines individual menu entries, which can contain text, an action callback, or a nested submenu. `ui.menu` groups items, and `ui.menubar` structures top-level menus.

```APIDOC
ui.menuitem:
  Parameters:
    text: (string) Display text for the menu item.
    action: (fn(&MenuItem)) Callback function executed when the item is clicked (for non-submenu items).
    submenu: (&Menu) A nested ui.menu structure.

ui.menu:
  Parameters:
    id: (string) Identifier for the menu.
    text: (string) Text for the menu button itself (if not part of a menubar).
    items: ([]&MenuItem) A list of ui.menuitem structures.

ui.menubar:
  Parameters:
    id: (string) Identifier for the menubar.
    items: ([]&MenuItem) A list of top-level ui.menuitem structures, typically containing submenus.

  Example Structure:
    menu_items := [
        ui.menuitem(
            text:    'File',
            submenu: ui.menu(
                items: [
                    ui.menuitem(text: 'Open', action: menu_click),
                    ui.menuitem(text: 'Save', action: menu_click),
                    ui.menuitem(text: 'Exit', action: menu_click),
                ]
            )
        ),
        // ... other top-level menus
    ]
    // Usage in layout:
    ui.menubar(
        id:    'menubar',
        items: menu_items
    )
```

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

### Run a Single V UI Editor Application

Source: https://github.com/vlang/ui/blob/master/apps/README.md

Shows how to run a single V UI application, specifically the editor, as a standalone application. It imports the editor module and directly calls its run method after creating an instance.

```v
import ui.apps.editor

fn main() {
	mut app := editor.app()
	app.run()
}
```

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

### ui.webview Integration

Source: https://github.com/vlang/ui/blob/master/docs.md

Provides functions to embed web content within V UI applications. It allows creating new windows, navigating to URLs, and executing JavaScript within the webview.

```APIDOC
WebView Integration (`ui.webview`):

Provides a `webview.new_window` function to embed web content.

Parameters for `webview.new_window`:
  url: (string) Initial URL.
  title: (string) Window title.

Methods:
  navigate(url): Loads a new URL.
  eval_js(script): Executes JavaScript in the webview context.
```

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

### V UI: Animated Transitions

Source: https://github.com/vlang/ui/blob/master/docs.md

Manages animated transitions for integer properties like widget position offsets. It requires a duration, an easing function, and a pointer to the integer value to animate. The animation is triggered by setting the `target_value`.

```v
// Initialization
app.x_transition = ui.transition(duration: 750, easing: ui.easing(.ease_in_out_cubic))
app.y_transition = ui.transition(duration: 750, easing: ui.easing(.ease_in_out_quart))
app.picture = ui.picture(...)

// In window layout:
children: [
    // ... other widgets
    app.picture,
    app.x_transition, // Add transition widgets to the window
    app.y_transition,
]

// To start animation:
fn (mut app App) btn_toggle_click(button &ui.Button) {
    // Set the target variable ONCE
    if app.x_transition.animated_value == 0 {
        app.x_transition.set_value(&app.picture.offset_x)
        app.y_transition.set_value(&app.picture.offset_y)
    }
    // Set the destination value
    app.x_transition.target_value = new_x_position
    app.y_transition.target_value = new_y_position
    // The draw() method of the transition handles the animation
}
```

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

### V UI Split Panel Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Creates two resizable panels separated by a draggable splitter bar. It supports both horizontal and vertical splitting and allows configuration of the initial weight distribution.

```APIDOC
uic.splitpanel_stack:
  id: (string) Base ID.
  child1, child2: (&ui.Widget) The widgets for the two panels.
  direction: (ui.Direction) .row (vertical splitter) or .column (horizontal splitter).
  weight: (f64) Initial percentage (0-100) of space allocated to child1.
```

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

### V UI Tabs Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Implements a tabbed interface, allowing multiple content panels to be switched via tabs. It takes a list of tab titles and corresponding widgets, and allows setting the initial active tab.

```APIDOC
uic.tabs_stack:
  id: (string) Base ID.
  tabs: ([]string) List of tab titles.
  pages: ([]ui.Widget) List of widgets corresponding to each tab's content.
  active: (int) Index of the initially active tab.
```

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

### V UI Data Grid Components

Source: https://github.com/vlang/ui/blob/master/docs.md

A powerful, interactive data grid built on `canvas_layout`. It supports spreadsheet-like formulas and various data types. `datagrid_stack` includes settings, and `gridsettings_stack` provides column sorting UI.

```APIDOC
uic.grid_canvaslayout / uic.datagrid_stack / uic.gridsettings_stack:
  GridParams:
    id: (string) Base ID.
    vars: (map[string]GridData) Data columns. GridData can be []string, []bool, []int, []f64, or uic.Factor { levels [], values [] }.
    formulas: (map[string]string) Spreadsheet-like formulas (e.g., 'B1': '=sum(C1:C5)').
    width, height: (int) Default cell size.
  DataGridParams: Wraps GridParams and adds settings options.
  GridSettingsComponent: Provides UI for sorting columns.
```

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

### ui.picture Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays an image from a file, allowing it to be scaled to specified dimensions. It supports setting an ID, image path, display size, and enabling drag functionality. A tooltip can also be provided.

```v
ui.picture(
    id:     'logo',
    width:  50,
    height: 50,
    path:   logo // Variable holding the image path
)
```

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

### V UI Color Sliders Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Provides separate R, G, B sliders and textboxes for color selection. It accepts an initial color and orientation, and supports a callback for value changes.

```APIDOC
uic.colorsliders_stack:
  id: (string) Base ID.
  color: (gx.Color) Initial color.
  orientation: (ui.Orientation) .horizontal or .vertical.
  on_changed: (fn(&ColorSlidersComponent)) Callback on value change.
  color(): Method to get the current gx.Color.
  set_color(gx.Color): Method to set the sliders' color.
```

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

### ui.label Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays static text with various styling options like size, color, and alignment. Key parameters include `id`, `text`, `text_size`, and `text_color`. It also supports font name specification.

```v
ui.label(id: 'counter', text: '2/10', text_font_name: 'fixed_bold_italic')
```

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

### V UI Message Box Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays a simple message box with text and an OK button, typically within a subwindow. It allows customization of the message text and box dimensions.

```APIDOC
uic.messagebox_stack / uic.messagebox_subwindow_add:
  id: (string) ID for the subwindow.
  text: (string) Message to display.
  width, height: (int) Size of the message box.
```

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

### V UI: Toggle Switch Control

Source: https://github.com/vlang/ui/blob/master/docs.md

A simple toggle switch control. It can be initialized with an `open` state and accepts an `on_click` callback function that is executed when the switch is toggled.

```v
app.switcher = ui.switcher(open: true, on_click: app.on_switch_click)
```

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

### uic.treeview_stack and uic.dirtreeview_stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays hierarchical data. `dirtreeview_stack` is specialized for directory structures. Supports incremental loading and hidden file display.

```APIDOC
uic.treeview_stack / uic.dirtreeview_stack:
  Displays hierarchical data. `dirtreeview_stack` is specialized for directory structures.

  Parameters:
    id: (string) Base ID.
    trees: ([]uic.Tree or []string for `dirtreeview`) The hierarchical data. `uic.Tree` has `title` and `items []TreeItem` (which can be string or another Tree).
    on_click: (fn(&ui.CanvasLayout, mut uic.TreeViewComponent)) Callback when an item is clicked.
    incr_mode: (bool) Load subdirectories incrementally on expansion (for `dirtreeview`).
    hidden_files: (bool) Show hidden files/dirs (for `dirtreeview`).

  Methods:
    selected_full_title(): Method to get the path-like title of the selected item.
```

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

### Vlang Listbox Component API

Source: https://github.com/vlang/ui/blob/master/docs.md

A component for displaying selectable items in a list. It supports dynamic item management, multi-selection, reordering, and file dropping. Key methods allow for adding, deleting, resetting items, and retrieving selected items.

```APIDOC
ui.listbox:
  Parameters:
    id: (string) Unique identifier.
    width, height: (int) Size of the listbox.
    items: (map[string]string) Map of item ID to display text.
    on_change: (fn(&ListBox)) Callback when selection changes.
    multi: (bool) Allow multiple selections.
    ordered: (bool) Allow reordering items via drag-and-drop.
    scrollview: (bool) Enable scrolling.
    files_dropped: (bool) Accept dropped files (adds them to the list).

  Methods:
    selected() -> !(id, text)
      Returns the ID and text of the selected item.
    selected_item() -> (id, text)
      Returns the ID and text of the selected item, or ('', '') if none selected.
    add_item(id, text)
      Adds a new item to the listbox.
    delete_item(id)
      Removes an item from the listbox by its ID.
    reset()
      Clears all items from the listbox.

  Example Usage:
    ui.listbox(
        id: 'lb_people'
        // Items added dynamically via app.update_listbox()
    )

    // Update items later:
    app.lb_people.reset()
    for p in app.people {
        app.lb_people.add_item(p.id, person_name(p.name, p.surname))
    }

    // Get selection:
    id, _ := app.lb_people.selected_item()
```

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

### V UI Hideable Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Wraps another layout, allowing it to be shown or hidden, often controlled via a shortcut. It manages the visibility state of its child layout.

```APIDOC
uic.hideable_stack:
  id: (string) Base ID.
  layout: (&ui.Stack) The layout to hide/show.
  hidden: (bool) Initial state.
  hideable_toggle(window, id), hideable_show(window, id), hideable_hide(window, id).
  hideable_add_shortcut(...).
```

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

### ui.progressbar Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Visually represents progress. It allows setting minimum and maximum values, the current value, and customizing the fill and background colors. The progress bar can be updated dynamically.

```v
app.pbar = ui.progressbar(
    width: 170,
    max:   10,
    val:   2 // Initial value, can be updated later: app.pbar.val++
)
```

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

### V UI Double Listbox Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

Features two listboxes with buttons (>>, <<, clear) to move items between them. It accepts initial items and provides a method to retrieve the items currently in the right listbox.

```APIDOC
uic.doublelistbox_stack:
  id: (string) Base ID.
  items: ([]string) Initial items for the left listbox.
  values(): Method to get the items currently in the *right* listbox.
```

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

### V UI: Simple Grid Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays data in a simple, non-interactive grid. It takes column headers and a 2D array of cell data, along with width and height parameters.

```v
h := ['One', 'Two', 'Three']
b := [['body one', 'body two', 'body three'], ['V', 'UI is', 'Beautiful']]
app.grid = ui.grid(header: h, body: b, width: win_width - 10, height: win_height)
```

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

### V UI: Row Layout

Source: https://github.com/vlang/ui/blob/master/docs.md

Arranges children linearly in a row, using `ui.stack` internally. Key parameters include `widths` for child sizing, `heights` for the row itself, and `spacing` between children.

```v
// Row with compact buttons and spacing
ui.row(
    id:       'btn_row',
    widths:   ui.compact, // Children take their own width
    heights:  20.0,       // Fixed height for the row
    spacing:  80,         // 80px spacing between buttons
    children: [ /* ... buttons ... */ ]
)
```

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

### V UI GG Canvas Layout

Source: https://github.com/vlang/ui/blob/master/docs.md

Integrates a `gg` application, which must implement `ui.GGApplication`, into a V UI layout. This is useful for embedding graphical applications within the UI.

```APIDOC
uic.gg_canvaslayout:
  id: (string) ID.
  app: (ui.GGApplication) The gg application instance.
```

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

### V UI File Browser Stack

Source: https://github.com/vlang/ui/blob/master/docs.md

A file or directory browser component utilizing a tree view, commonly used within a subwindow. It supports folder-only selection and callbacks for OK/Cancel actions.

```APIDOC
uic.filebrowser_stack / uic.filebrowser_subwindow_add:
  id: (string) Base ID.
  dirs: ([]string) Initial directories to display.
  folder_only: (bool) Only allow selection of folders.
  on_click_ok: (fn(&Button)) Callback for the 'Ok' button.
  on_click_cancel: (fn(&Button)) Callback for the 'Cancel' button.
  selected_full_title(): Method to get the full path of the selected item.
```

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

### Vlang Dropdown Component API

Source: https://github.com/vlang/ui/blob/master/docs.md

A component that presents a list of options in a collapsible menu for single selection. It can be populated with items via a map or a list of strings, and supports custom default text and selection change callbacks.

```APIDOC
ui.dropdown:
  Parameters:
    id: (string) Unique identifier.
    width, height: (int) Size of the collapsed dropdown.
    items: ([]DropdownItem) List of items, where each item is a struct with a 'text' field.
    texts: ([]string) Alternative way to specify items using just text.
    def_text: (string) Text displayed when no item is selected.
    selected_index: (int) Index of the initially selected item (-1 for none).
    on_selection_changed: (fn(&Dropdown)) Callback when selection changes.

  Methods:
    selected() -> DropdownItem
      Returns the currently selected DropdownItem.

  Example Usage:
    ui.dropdown(
        id:                   'dd_flight',
        z_index:              10,
        selected_index:       0,
        on_selection_changed: app.dd_change,
        items:                [
            ui.DropdownItem{ text: 'one-way flight' },
            ui.DropdownItem{ text: 'return flight' },
        ]
    )
```

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

### ui.checkbox Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Implements a standard checkbox with an associated label. It supports setting the initial checked state, a click callback, and disabling interaction. Multiple checkboxes can be instantiated.

```v
ui.checkbox(
    checked: true,
    text:    'Online registration'
),
ui.checkbox(text: 'Subscribe to the newsletter')
```

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

### Vlang Canvas Drawing Surface

Source: https://github.com/vlang/ui/blob/master/docs.md

Provides a drawing surface for custom graphics using gg drawing functions. The `canvas_plus` variant adds background color, radius, and other styling features. Key parameters include size, drawing callbacks, and event handlers.

```v
ui.canvas_plus(
    width:     400,
    height:    275,
    on_draw:   app.draw, // Custom drawing function in the App struct
    bg_color:  gx.Color{255, 220, 220, 150},
    bg_radius: 10
)

// Inside the app.draw function:
fn (app &State) draw(mut d ui.DrawDevice, c &ui.CanvasLayout) {
    // Use methods like c.draw_device_rect_empty, c.draw_device_line, c.draw_device_text
    // Example:
    c.draw_device_rect_empty(d, marginx, y, table_width, cell_height, gx.gray)
    c.draw_device_text(d, marginx + 5, y + 5, user.first_name)
    // ...
}
```

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

### V UI: Column Layout

Source: https://github.com/vlang/ui/blob/master/docs.md

Arranges children linearly in a column, using `ui.stack` internally. Key parameters include `heights` for child sizing, `widths` for the column itself, `spacing` between children, and `scrollview` for content overflow.

```v
// Column with mixed height children
ui.column(
    spacing:    10,
    widths:     ui.compact, // Column takes width of widest child
    heights:    ui.compact, // Children take their own height
    scrollview: true,      // Enable vertical scrolling if needed
    children:   [ /* ... textboxes, checkboxes, etc. ... */ ]
)
```

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

### V UI Font Selection Components

Source: https://github.com/vlang/ui/blob/master/docs.md

Manages font selection for widgets. `fontbutton` opens a `fontchooser` subwindow, which is added via `fontchooser_subwindow_add`, targeting a specific `DrawTextWidget`.

```APIDOC
uic.fontbutton / uic.fontchooser_stack / uic.fontchooser_subwindow_add:
  fontbutton:
    id: (string) ID.
    dtw: (&ui.DrawTextWidget) The widget whose font will be changed.
  fontchooser_subwindow_add: Adds the necessary subwindow to the main window.
```

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

### ui.rectangle Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Draws a simple rectangle, optionally with text and rounded corners. It supports setting dimensions, fill color, border properties, and text content.

```v
ui.rectangle(
    height: 64,
    width:  64,
    color:  gx.rgb(255, 100, 100),
    radius: 10,
    text:   'Red'
)
```

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

### V UI Setting Font Component

Source: https://github.com/vlang/ui/blob/master/docs.md

A row component designed for settings dialogs, combining a label with a `uic.fontbutton` for font selection. It simplifies the UI for font-related settings.

```APIDOC
uic.setting_font:
  id: (string) Base ID.
  text: (string) Label for the setting.
```

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

### ui.radio Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Allows users to select one option from a list. It can display options vertically or horizontally and supports a title and a callback for selection changes. The `selected_value()` method retrieves the current choice.

```v
app.country = ui.radio(
    width:  200,
    values: ['United States', 'Canada', 'United Kingdom', 'Australia'],
    title:  'Country'
)
// Get selected value later:
selected := app.country.selected_value()
```

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

### V UI Raster View Canvas Layout

Source: https://github.com/vlang/ui/blob/master/docs.md

Displays and allows basic pixel editing of images, often used with a color palette. It provides methods for image manipulation and callbacks for pixel clicks.

```APIDOC
uic.rasterview_canvaslayout:
  id: (string) Base ID.
  on_click: (fn(&RasterViewComponent)) Callback on pixel click.
  load_image(path), save_image_as(path), new_image().
  set_pixel(i, j, color), get_pixel(i, j).
```

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

### ui.slider Component

Source: https://github.com/vlang/ui/blob/master/docs.md

Provides a slider control for selecting a value within a defined range. It can be oriented horizontally or vertically and allows customization of min/max values, current value, and thumb color. A callback is available for value changes.

```v
app.hor_slider = ui.slider(
    width:            200,
    height:           20,
    orientation:      .horizontal,
    max:              100,
    val:              0,
    on_value_changed: app.on_hor_value_changed
)
```

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