### Initialize Progress and Picker Controls

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Examples for creating a ProgressBar for activity feedback and a Picker for list-based selection.

```lua
loveli.ProgressBar:new{ progress = 0.75 }

local picker = loveli.Picker:new{ selectedindexchanged = function(sender, oldindex, newindex) print(oldindex, newindex) end, itemssource = { "Option 1", "Option 2", "Option 3", "Option 4", { tostring = function(self) return "Option 5" end } }, text = "Select...", width = 100, height = "auto" } )
```

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

### Initialize Basic UI Controls

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Examples for initializing standard controls like Labels, Buttons, Images, and ImageButtons within the Loveli framework.

```lua
loveli.Label:new{ text = "Label" }

loveli.Button:new{
  text = "Button",
  clicked = function(sender) end,
  ismultiline = false,
  font = love.graphics.getFont(),
  horizontaltextalignment = "center",
  verticaltextalignment = "center",
  textcolor = loveli.Color.parse(0x000000FF),
  backgroundcolor = loveli.Color.parse(0xC0C0C0FF),
  bordercolor = loveli.Color.parse(0xFFFFFFFF),
  x = 0,
  y = 0,
  width = "auto",
  height = "auto",
  minwidth = 0,
  minheight = math.huge,
  maxwidth = 0,
  maxheight = math.huge,
  margin = loveli.Thickness.parse(0),
  horizontaloptions = "start",
  verticaloptions = "start",
  name = nil,
  isvisible = true,
  isenabled = true
}

loveli.ImageButton:new{ source = "icon.png", aspect = "aspectfit", width = 64, height = 32, clicked = function(sender) end }

loveli.Image:new{ source = "icon.png", aspect = "aspectfit", width = 64, height = 32 }
```

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

### Basic LOVELi Setup and Event Handling in LÖVE 2D

Source: https://context7.com/mtanksl/loveli/llms.txt

This snippet demonstrates the basic setup for using the LOVELi library within a LÖVE 2D project. It includes importing the library, creating a LayoutManager, composing a simple UI hierarchy with a StackLayout, Label, and Button, and hooking LÖVE's callback functions to route input events and rendering to the LayoutManager. It also shows how to handle key presses, text input, mouse events, joystick input, window resizing, updates, and drawing.

```lua
local loveli = require("LOVELi")

function love.load(arg)
    -- Create a layout manager with a root control
    layoutmanager = loveli.LayoutManager:new{}
        :with(loveli.StackLayout:new{ orientation = "vertical", spacing = 10, width = "*", height = "*", margin = loveli.Thickness.parse(10) }
            :with(loveli.Label:new{ text = "Hello, LOVELi!" })
            :with(loveli.Button:new{ text = "Click Me", width = 100, height = 30, clicked = function(sender) print("Button clicked!") end })
        )
end

function love.keypressed(key, scancode, isrepeat)
    layoutmanager:keypressed(key, scancode, isrepeat)
end

function love.textinput(text)
    layoutmanager:textinput(text)
end

function love.mousepressed(x, y, button, istouch, presses)
    layoutmanager:mousepressed(x, y, button, istouch, presses)
end

function love.mousereleased(x, y, button, istouch, presses)
    layoutmanager:mousereleased(x, y, button, istouch, presses)
end

function love.mousemoved(x, y, dx, dy, istouch)
    layoutmanager:mousemoved(x, y, dx, dy, istouch)
end

function love.wheelmoved(dx, dy)
    layoutmanager:wheelmoved(dx, dy)
end

function love.joystickhat(joystick, hat, direction)
    layoutmanager:joystickhat(joystick, hat, direction)
end

function love.joystickpressed(joystick, button)
    layoutmanager:joystickpressed(joystick, button)
end

function love.resize(w, h)
    layoutmanager:resize(w, h)
end

function love.update(dt)
    layoutmanager:update(dt)
end

function love.draw()
    love.graphics.clear(0.18, 0.18, 0.18)
    layoutmanager:draw()
end
```

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

### Initialize Selection and Input Controls

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Examples for creating interactive selection components like CheckBox, RadioButton, Switch, Slider, and text input fields.

```lua
loveli.CheckBox:new{ ischecked = false, checkedchanging = function(sender, oldvalue, newvalue) return true end, checkedchanged = function(sender, oldvalue, newvalue) end }

loveli.RadioButton:new{ ischecked = false, groupname = "1", checkedchanging = function(sender, oldvalue, newvalue) return true end, checkedchanged = function(sender, oldvalue, newvalue) end }

loveli.Switch:new{ istoggled = false, toggling = function(sender, oldvalue, newvalue) return true end, toggled = function(sender, oldvalue, newvalue) end }

loveli.Slider:new{ value = 5, minimum = 0, maximum = 10, valuechanging = function(sender, oldvalue, newvalue) return true end, valuechanged = function(sender, oldvalue, newvalue) end }

local textbox = loveli.TextBox:new{ text = "TextBox", ispassword = false, maxlength = 255, textchanging = function(sender, oldvalue, newvalue) return true end, textchanged = function(sender, oldtext, newtext) end }

local maskedtextbox = loveli.MaskedTextBox:new{ mask = "(000) 000-0000", patterns = { ["0"] = { pattern = "%d" } }, textchanging = function(sender, oldvalue, newvalue) return true end, textchanged = function(sender, oldtext, newtext) end }
```

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

### Implement Toggle Switches

Source: https://context7.com/mtanksl/loveli/llms.txt

Shows how to use the Switch control for binary states. Includes examples of basic toggling and conditional validation to prevent state changes.

```lua
local loveli = require("LOVELi")

-- Basic switch
local toggle = loveli.Switch:new{
    istoggled = false,
    forecolor = loveli.Color.parse(0xFFFFFFFF),
    onbackgroundcolor = loveli.Color.parse(0x4CAF50FF),  -- Green when on
    offbackgroundcolor = loveli.Color.parse(0x9E9E9EFF), -- Gray when off
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    toggled = function(sender, oldvalue, newvalue)
        print("Switch is now:", newvalue and "ON" or "OFF")
    end
}

-- Switch with validation
local conditionalSwitch = loveli.Switch:new{
    istoggled = true,
    toggling = function(sender, oldvalue, newvalue)
        -- Prevent turning off if condition not met
        if oldvalue == true and newvalue == false then
            return canTurnOff
        end
        return true
    end,
    toggled = function(sender, oldvalue, newvalue)
        applySetting(newvalue)
    end
}
```

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

### FlexLayout: Row and Column Examples in Lua

Source: https://context7.com/mtanksl/loveli/llms.txt

Demonstrates creating row-based and column-based FlexLayouts in Lua. FlexLayout allows children to wrap into rows or columns when they overflow, offering flexible alignment and distribution. It requires the LOVELi library and accepts various layout properties.

```lua
local loveli = require("LOVELi")

-- Row-based FlexLayout with wrapping
local flexRow = loveli.FlexLayout:new{
    direction = "row",           -- "row" or "column"
    justifycontent = "spaceevenly",  -- "start", "center", "end", "spacebetween", "spaceevenly"
    aligncontent = "center",     -- "start", "center", "end", "spacebetween", "spaceevenly"
    width = 200,
    height = 100,
    horizontaloptions = "center",
    verticaloptions = "center",
    margin = loveli.Thickness.parse(10)
}
    :with(loveli.Button:new{ text = "B1", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B2", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B3", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B4", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B5", width = 40, height = 30 })

-- Column-based FlexLayout
local flexColumn = loveli.FlexLayout:new{
    direction = "column",
    justifycontent = "center",
    aligncontent = "spaceevenly",
    width = 150,
    height = 200
}
    :with(loveli.Button:new{ text = "Item 1", width = 60, height = 25 })
    :with(loveli.Button:new{ text = "Item 2", width = 60, height = 25 })
    :with(loveli.Button:new{ text = "Item 3", width = 60, height = 25 })
```

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

### Game State Functions

Source: https://context7.com/mtanksl/loveli/llms.txt

Provides basic functions for managing game states such as starting a new game, continuing an existing one, or accessing options.

```lua
function startNewGame()
    print("Starting new game...")
end

function continueGame()
    print("Continuing game...")
end

function showOptions()
    print("Opening options...")
end
```

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

### Display Progress Bars

Source: https://context7.com/mtanksl/loveli/llms.txt

Provides examples for using the ProgressBar component to visualize task completion or health status. Includes methods for updating the progress value dynamically.

```lua
local loveli = require("LOVELi")

-- Loading progress bar
local progressBar = loveli.ProgressBar:new{
    progress = 0.0,  -- 0.0 to 1.0
    forecolor = loveli.Color.parse(0x4CAF50FF),  -- Green fill
    backgroundcolor = loveli.Color.parse(0x333333FF),
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    width = 200,
    height = 20
}

-- Update progress
function updateProgress(percent)
    progressBar:setprogress(percent)
    progressBar:invalidate()
end

-- Health bar example
local healthBar = loveli.ProgressBar:new{
    progress = 0.75,  -- 75% health
    forecolor = loveli.Color.parse(0xFF0000FF),  -- Red
    backgroundcolor = loveli.Color.parse(0x330000FF),
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    width = 100,
    height = 10
}
```

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

### Render Custom Graphics with GraphicsView

Source: https://context7.com/mtanksl/loveli/llms.txt

Provides examples of using the GraphicsView component to create custom drawing areas. This allows developers to use standard LÖVE drawing functions within a UI container.

```lua
local loveli = require("LOVELi")

-- Custom graphics view
local customGraphics = loveli.GraphicsView:new{
    width = 100,
    height = 100,
    drawable = function(sender, x, y, width, height)
        -- Draw a filled circle
        love.graphics.setColor(0.2, 0.6, 0.9, 1)
        love.graphics.circle("fill", x + width/2, y + height/2, math.min(width, height)/2 - 5)

        -- Draw a border
        love.graphics.setColor(1, 1, 1, 1)
        love.graphics.circle("line", x + width/2, y + height/2, math.min(width, height)/2 - 5)
    end
}

-- Mini-map example
local miniMap = loveli.GraphicsView:new{
    width = 150,
    height = 150,
    drawable = function(sender, x, y, width, height)
        -- Draw background
        love.graphics.setColor(0.1, 0.1, 0.1, 0.8)
        love.graphics.rectangle("fill", x, y, width, height)

        -- Draw player position
        love.graphics.setColor(0, 1, 0, 1)
        love.graphics.circle("fill", x + playerX * width, y + playerY * height, 5)

        -- Draw border
        love.graphics.setColor(1, 1, 1, 1)
        love.graphics.rectangle("line", x, y, width, height)
    end
}
```

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

### LOVELi Custom Control: AnimatedLabel Inheritance

Source: https://context7.com/mtanksl/loveli/llms.txt

Provides an example of creating a custom control, AnimatedLabel, by inheriting from LOVELi.Label. It implements typing text effects by overriding update and render methods and using observable properties.

```lua
local loveli = require("LOVELi")

-- Create an AnimatedLabel that types out text over time
LOVELi.AnimatedLabel = {}
LOVELi.AnimatedLabel.__index = LOVELi.AnimatedLabel
setmetatable(LOVELi.AnimatedLabel, LOVELi.Label)  -- Inherit from Label

function LOVELi.AnimatedLabel:new(options)
    local o = LOVELi.Label.new(self, options)
    o.isplaying = LOVELi.Property.parse(options.isplaying or false)
    o.duration = LOVELi.Property.parse(options.duration or 1)
    o.elapsed = LOVELi.Property.parse(options.elapsed or 0)
    return o
end

function LOVELi.AnimatedLabel:getisplaying()
    return self.isplaying:getvalue()
end

function LOVELi.AnimatedLabel:update(dt)
    if self:getisplaying() and self:getelapsed() < self:getduration() then
        self:setelapsed(math.min(self:getduration(), self:getelapsed() + dt))
        self:invalidate()
    end
end

function LOVELi.AnimatedLabel:render(x, y)
    -- Calculate visible portion based on elapsed time
    local progress = self:getelapsed() / self:getduration()
    local visibleLength = math.floor(progress * #self:gettext())
    local visibleText = string.sub(self:gettext(), 1, visibleLength)

    love.graphics.setColor(self:gettextcolor():getrgba())
    love.graphics.print(visibleText, self:getfont(), x + self:getmargin():getleft(), y + self:getmargin():gettop())
end

function LOVELi.AnimatedLabel:type()
    return "AnimatedLabel"
end

-- Usage
local typingLabel = loveli.AnimatedLabel:new{
    isplaying = true,
    duration = 5,  -- 5 seconds to type out full text
    text = "Welcome to the game! Press any key to continue...",
    ismultiline = true,
    width = 300,
    height = "auto"
}
```

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

### ScrollView: Vertical and Bidirectional Scrolling in Lua

Source: https://context7.com/mtanksl/loveli/llms.txt

Shows how to implement scrollable content areas using ScrollView in Lua. Examples include a vertical scrolling list and a bidirectional scrolling view for larger content like maps. Requires the LOVELi library and configuration of orientation and scrollbar properties.

```lua
local loveli = require("LOVELi")

-- Vertical scrolling list
local scrollableList = loveli.ScrollView:new{
    orientation = "vertical",  -- "vertical", "horizontal", "both", "neither"
    verticalscrollbarvisibility = "default",  -- "default", "always", "never"
    verticalscrollbarwidth = 8,
    verticalscrollbarincrement = 50,  -- Scroll amount per step
    width = 200,
    height = 150,
    scrolled = function(sender, dx, dy)
        print("Scrolled:", dx, dy)
    end
}
    :with(loveli.StackLayout:new{ orientation = "vertical", spacing = 5, width = "auto", height = "auto" }
        :with(loveli.Button:new{ text = "Item 1", width = 150, height = 30 })
        :with(loveli.Button:new{ text = "Item 2", width = 150, height = 30 })
        :with(loveli.Button:new{ text = "Item 3", width = 150, height = 30 })
        :with(loveli.Button:new{ text = "Item 4", width = 150, height = 30 })
        :with(loveli.Button:new{ text = "Item 5", width = 150, height = 30 })
        :with(loveli.Button:new{ text = "Item 6", width = 150, height = 30 })
    )

-- Bidirectional scrolling (use shift+scroll for horizontal)
local panningView = loveli.ScrollView:new{
    orientation = "both",
    horizontalscrollbarheight = 5,
    horizontalscrollbarincrement = 30,
    verticalscrollbarwidth = 5,
    verticalscrollbarincrement = 30,
    width = 100,
    height = 100
}
    :with(loveli.StackLayout:new{ width = 300, height = 300 } -- Assuming StackLayout can contain AbsoluteLayout or similar for positioning
        :with(loveli.Image:new{ source = "large_map.png", width = 300, height = 300 })
    )
```

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

### Create FlexLayout Container

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Demonstrates how to initialize a FlexLayout with specific alignment and orientation settings, and how to chain child controls using the with method.

```lua
local flexlayout = loveli.FlexLayout:new{ direction = "row", justifycontent = "spaceevenly", aligncontent = "center", width = 300, height = 100, verticaloptions = "center", horizontaloptions = "center", margin = loveli.Thickness.parse(10) }
  :with(loveli.Button:new{ text = "Button 1", width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Button 2", width = 75, height = 23, margin = loveli.Thickness.parse(10)  } )
  :with(loveli.Button:new{ text = "Button 3", width = 75, height = 23, verticaloptions = "start" } )
  :with(loveli.Button:new{ text = "Button 4", width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Button 5", width = 75, height = 23 } )		
local rootcontrol = flexlayout
```

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

### Initialize LOVELi LayoutManager

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Demonstrates how to integrate the LOVELi library into a LÖVE project by hooking the necessary love callbacks to the LayoutManager instance.

```lua
local loveli = require("LOVELi")
function love.load(arg)
  layoutmanager = loveli.LayoutManager:new{}
    :with(rootcontrol)
end
function love.keypressed(key, scancode, isrepeat)
  layoutmanager:keypressed(key, scancode, isrepeat)
end
function love.textinput(text)
  layoutmanager:textinput(text)
end
function love.mousepressed(x, y, button, istouch, presses)
  layoutmanager:mousepressed(x, y, button, istouch, presses)
end
function love.mousereleased(x, y, button, istouch, presses)
	layoutmanager:mousereleased(x, y, button, istouch, presses)
end
function love.mousemoved(x, y, dx, dy, istouch)
  layoutmanager:mousemoved(x, y, dx, dy, istouch)
end
function love.wheelmoved(dx, dy)
  layoutmanager:wheelmoved(dx, dy)
end
function love.joystickhat(joystick, hat, direction)
  layoutmanager:joystickhat(joystick, hat, direction)
end
function love.joystickpressed(joystick, button)
  layoutmanager:joystickpressed(joystick, button)
end
function love.resize(w, h)
  layoutmanager:resize(w, h)
end
function love.update(dt)
  layoutmanager:update(dt)
end
function love.draw()	
  layoutmanager:draw()
end
```

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

### Create and Configure Buttons in LOVELi

Source: https://context7.com/mtanksl/loveli/llms.txt

Demonstrates how to create standard, styled, and disabled buttons using the loveli.Button class. Includes event handling via the clicked callback.

```lua
local loveli = require("LOVELi")

-- Basic button with click handler
local button = loveli.Button:new{
    text = "Submit",
    width = 100,
    height = 30,
    clicked = function(sender)
        print("Button clicked:", sender:gettext())
    end
}

-- Styled button with custom colors
local styledButton = loveli.Button:new{
    text = "Custom Style",
    font = love.graphics.newFont(14),
    textcolor = loveli.Color.parse(0xFFFFFFFF),
    backgroundcolor = loveli.Color.parse(0x4A90D9FF),
    bordercolor = loveli.Color.parse(0x2A5A9DFF),
    horizontaltextalignment = "center",
    verticaltextalignment = "center",
    width = 120,
    height = 35,
    clicked = function(sender)
        sender:setbackgroundcolor(loveli.Color.parse(0x6AB0F9FF))
    end
}

-- Disabled button
local disabledButton = loveli.Button:new{
    text = "Disabled",
    width = 100,
    height = 30,
    isenabled = false
}
```

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

### Initialize Loveli Border Component

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Demonstrates how to create and configure a Border component in Loveli. It allows setting padding, border color, and background color for a container.

```lua
local border = loveli.Border:new{ padding = loveli.Thickness.parse(10), bordercolor = loveli.Color.parse(0x00000000), backgroundcolor = loveli.Color.parse(0x00000000) }
  :with(textbox)
```

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

### LOVELi LayoutManager Initialization and Control Management

Source: https://context7.com/mtanksl/loveli/llms.txt

This snippet shows how to create and configure a LOVELi LayoutManager. It covers initializing the manager with custom options like debug layout lines, position offsets, dimensions, and visibility/enabled states. It also demonstrates how to set a root control for the manager, toggle layout lines for debugging via key press, retrieve a control by its name, and invalidate the layout to trigger recalculations.

```lua
local loveli = require("LOVELi")

-- Create a layout manager with custom options
layoutmanager = loveli.LayoutManager:new{
    showlayoutlines = false,  -- Debug: show layout boundaries
    x = 0,                     -- X position offset
    y = 0,                     -- Y position offset
    width = love.graphics:getWidth(),   -- Container width
    height = love.graphics:getHeight(), -- Container height
    isvisible = true,          -- Visibility toggle
    isenabled = true           -- Enable/disable input handling
}
    :with(rootcontrol)  -- Set the root control

-- Toggle layout lines for debugging
function love.keypressed(key, scancode, isrepeat)
    if key == "escape" then
        layoutmanager:setshowlayoutlines(not layoutmanager:getshowlayoutlines())
        layoutmanager:invalidate()
    end
    layoutmanager:keypressed(key, scancode, isrepeat)
end

-- Get a control by name
local myButton = layoutmanager:getcontrol("submitButton")

-- Invalidate layout to trigger re-calculation
layoutmanager:invalidate()
```

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

### LOVELi Grid: Row and Column Layout Management

Source: https://context7.com/mtanksl/loveli/llms.txt

Illustrates the use of Grid layout in LOVELi for arranging elements in rows and columns. Supports proportional and fixed-size definitions for rows and columns. Requires the 'LOVELi' library.

```lua
local loveli = require("LOVELi")

-- Create a 3-column, 2-row grid with mixed sizing
local grid = loveli.Grid:new{
    rowdefinitions = { "auto", "1*", "1*" },  -- auto, equal, equal
    columndefinitions = { "auto", "1*", 150 }, -- auto, fill, 150px
    width = "*",
    height = "*",
    margin = loveli.Thickness.parse(10)
}
    -- Add children with row, column indices (1-based)
    :with(1, 1, loveli.Label:new{ text = "Header", width = "auto", height = "auto" })
    :with(1, 2, loveli.Label:new{ text = "Title", width = "auto", height = "auto" })
    :with(1, 3, loveli.Button:new{ text = "Action", width = 75, height = 23 })
    :with(2, 1, loveli.StackLayout:new{ orientation = "vertical", width = "auto", height = "*" }
        :with(loveli.Label:new{ text = "Item 1" })
        :with(loveli.Label:new{ text = "Item 2" })
    )
    :with(2, 2, loveli.Label:new{ text = "Main Content", width = "*", height = "*" })

-- Simple equal-width columns
local simpleGrid = loveli.Grid:new{
    rowdefinitions = { "1*" },
    columndefinitions = { "1*", "1*", "1*" },
    width = "*", height = 100
}
    :with(1, 1, loveli.Button:new{ text = "Col 1", width = "*", height = "*" })
    :with(1, 2, loveli.Button:new{ text = "Col 2", width = "*", height = "*" })
    :with(1, 3, loveli.Button:new{ text = "Col 3", width = "*", height = "*" })
```

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

### Implement Picker Dropdown Selection

Source: https://context7.com/mtanksl/loveli/llms.txt

Explains how to create dropdown selection controls using the Picker component. It demonstrates binding both simple string arrays and complex objects to the selection source.

```lua
local loveli = require("LOVELi")

-- Basic picker with string options
local colorPicker = loveli.Picker:new{
    text = "Select Color...",
    itemssource = { "Red", "Green", "Blue", "Yellow", "Purple" },
    font = love.graphics.newFont(12),
    textcolor = loveli.Color.parse(0xFFFFFFFF),
    backgroundcolor = loveli.Color.parse(0x333333FF),
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    width = 120,
    height = "auto",
    selectedindexchanged = function(sender, oldindex, newindex)
        print("Selected:", sender:getitemssource()[newindex])
    end
}

-- Picker with custom objects
local difficultyPicker = loveli.Picker:new{
    text = "Choose Difficulty",
    itemssource = {
        { tostring = function(self) return "Easy" end, value = 1 },
        { tostring = function(self) return "Medium" end, value = 2 },
        { tostring = function(self) return "Hard" end, value = 3 },
        { tostring = function(self) return "Expert" end, value = 4 }
    },
    width = 130,
    height = "auto",
    selectedindexchanged = function(sender, oldindex, newindex)
        local selected = sender:getitemssource()[newindex]
        setDifficulty(selected.value)
    end
}
```

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

### Implement TextBox UI Controls

Source: https://context7.com/mtanksl/loveli/llms.txt

Demonstrates how to create single-line, password, and multi-line text input fields using the LOVELi TextBox component. It includes configuration for styling, character limits, and event handling for text changes.

```lua
local loveli = require("LOVELi")

-- Single-line text input
local nameInput = loveli.TextBox:new{
    text = "",
    maxlength = 50,
    font = love.graphics.newFont(14),
    textcolor = loveli.Color.parse(0xFFFFFFFF),
    backgroundcolor = loveli.Color.parse(0x333333FF),
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    width = 200,
    height = 30,
    textchanged = function(sender, oldvalue, newvalue)
        print("Text changed to:", newvalue)
    end
}

-- Password field
local passwordInput = loveli.TextBox:new{
    text = "",
    ispassword = true,
    maxlength = 32,
    width = 200,
    height = 30
}

-- Multiline text area
local descriptionInput = loveli.TextBox:new{
    text = "Enter description here...",
    ismultiline = true,
    horizontaltextalignment = "start",
    verticaltextalignment = "start",
    width = 250,
    height = 100,
    textchanging = function(sender, oldvalue, newvalue)
        -- Limit to 500 characters
        return #newvalue <= 500
    end
}
```

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

### FlexLayout

Source: https://context7.com/mtanksl/loveli/llms.txt

Demonstrates how to create row-based and column-based FlexLayouts with various alignment and distribution options.

```APIDOC
## FlexLayout

Wraps children into rows or columns when they overflow, with flexible alignment and distribution options.

### Row-based FlexLayout with wrapping
```lua
local loveli = require("LOVELi")

local flexRow = loveli.FlexLayout:new{
    direction = "row",           -- "row" or "column"
    justifycontent = "spaceevenly",  -- "start", "center", "end", "spacebetween", "spaceevenly"
    aligncontent = "center",     -- "start", "center", "end", "spacebetween", "spaceevenly"
    width = 200,
    height = 100,
    horizontaloptions = "center",
    verticaloptions = "center",
    margin = loveli.Thickness.parse(10)
}
    :with(loveli.Button:new{ text = "B1", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B2", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B3", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B4", width = 40, height = 30 })
    :with(loveli.Button:new{ text = "B5", width = 40, height = 30 })
```

### Column-based FlexLayout
```lua
local loveli = require("LOVELi")

local flexColumn = loveli.FlexLayout:new{
    direction = "column",
    justifycontent = "center",
    aligncontent = "spaceevenly",
    width = 150,
    height = 200
}
    :with(loveli.Button:new{ text = "Item 1", width = 60, height = 25 })
    :with(loveli.Button:new{ text = "Item 2", width = 60, height = 25 })
    :with(loveli.Button:new{ text = "Item 3", width = 60, height = 25 })
```
```

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

### Create a Grid Layout

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Configures a Grid layout to display elements in rows and columns with proportional or absolute sizing.

```lua
local grid = loveli.Grid:new{ rowdefinitions = { "auto", "1*", "1*" }, columndefinitions = { "auto", "1*", 150 }, width = "*", height = "*", margin = loveli.Thickness.parse(10) } 
  :with(1, 1, absolutelayout)
  :with(2, 2, stacklayout)
local rootcontrol = grid
```

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

### Implement Game Menu with LOVELi

Source: https://context7.com/mtanksl/loveli/llms.txt

This Lua code demonstrates how to create a game menu using the LOVELi framework. It defines UI elements, their properties, and event handlers for user interactions such as button clicks and input. The layout is managed using LOVELi's layout system.

```lua
local loveli = require("LOVELi")

function love.load(arg)
    -- Define theme colors
    local font = loveli.Property.parse(love.graphics.newFont(16))
    local textcolor = loveli.Property.parse(loveli.Color.parse(0xFFFFFFFF))
    local buttonBg = loveli.Property.parse(loveli.Color.parse(0xDF4794FF))

    -- Create the menu layout
    layoutmanager = loveli.LayoutManager:new{}
        :with(loveli.AbsoluteLayout:new{ width = "*", height = "*", margin = loveli.Thickness.parse(10) }
            -- FPS counter (top-left)
            :with(loveli.Label:new{
                name = "fpsLabel",
                text = "FPS: 0",
                font = font,
                textcolor = textcolor,
                width = 75, height = "auto"
            })

            -- Main menu (centered)
            :with(loveli.Grid:new{
                rowdefinitions = { "1*" },
                columndefinitions = { "1*" },
                width = "*", height = "*"
            }
                :with(1, 1, loveli.StackLayout:new{
                    orientation = "vertical",
                    spacing = 15,
                    width = "auto", height = "auto",
                    horizontaloptions = "center",
                    verticaloptions = "center"
                }
                    -- Title
                    :with(loveli.Label:new{
                        text = "MY AWESOME GAME",
                        font = loveli.Property.parse(love.graphics.newFont(24)),
                        textcolor = textcolor,
                        horizontaloptions = "center"
                    })

                    -- Logo
                    :with(loveli.Image:new{
                        source = "icon.png",
                        aspect = "aspectfit",
                        width = 100, height = 100,
                        horizontaloptions = "center"
                    })

                    -- Menu buttons
                    :with(loveli.Button:new{
                        text = "New Game",
                        font = font,
                        textcolor = textcolor,
                        backgroundcolor = buttonBg,
                        bordercolor = textcolor,
                        width = 120, height = 35,
                        horizontaloptions = "center",
                        clicked = function(sender) startNewGame() end
                    })
                    :with(loveli.Button:new{
                        text = "Continue",
                        font = font,
                        textcolor = textcolor,
                        backgroundcolor = buttonBg,
                        bordercolor = textcolor,
                        width = 120, height = 35,
                        horizontaloptions = "center",
                        clicked = function(sender) continueGame() end
                    })
                    :with(loveli.Button:new{
                        text = "Options",
                        font = font,
                        textcolor = textcolor,
                        backgroundcolor = buttonBg,
                        bordercolor = textcolor,
                        width = 120, height = 35,
                        horizontaloptions = "center",
                        clicked = function(sender) showOptions() end
                    })
                    :with(loveli.Button:new{
                        text = "Exit",
                        font = font,
                        textcolor = textcolor,
                        backgroundcolor = buttonBg,
                        bordercolor = textcolor,
                        width = 120, height = 35,
                        horizontaloptions = "center",
                        clicked = function(sender) love.event.quit() end
                    })
                )
            )

            -- Version info (bottom-center)
            :with(loveli.Label:new{
                text = "v1.0.0",
                font = font,
                textcolor = loveli.Color.parse(0x888888FF),
                horizontaloptions = "center",
                verticaloptions = "end",
                width = "auto", height = "auto"
            })
        )
end

function love.keypressed(key, scancode, isrepeat)
    layoutmanager:keypressed(key, scancode, isrepeat)
end

function love.textinput(text)
    layoutmanager:textinput(text)
end

function love.mousepressed(x, y, button, istouch, presses)
    layoutmanager:mousepressed(x, y, button, istouch, presses)
end

function love.mousereleased(x, y, button, istouch, presses)
    layoutmanager:mousereleased(x, y, button, istouch, presses)
end

function love.mousemoved(x, y, dx, dy, istouch)
    layoutmanager:mousemoved(x, y, dx, dy, istouch)
end

function love.wheelmoved(dx, dy)
    layoutmanager:wheelmoved(dx, dy)
end

function love.joystickhat(joystick, hat, direction)

```

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

### LOVELi Thickness Parsing and Creation

Source: https://context7.com/mtanksl/loveli/llms.txt

Illustrates creating thickness values for margins and padding in LOVELi. Supports uniform values, individual side definitions via tables or strings, direct construction, and accessing specific values.

```lua
local loveli = require("LOVELi")

-- Uniform thickness (all sides equal)
local uniformMargin = loveli.Thickness.parse(10)

-- From table (individual sides)
local customMargin = loveli.Thickness.parse({
    left = 5,
    top = 10,
    right = 5,
    bottom = 10
})

-- From string "left,top,right,bottom"
local stringMargin = loveli.Thickness.parse("5,10,15,20")

-- Direct construction
local directMargin = loveli.Thickness:new(5, 10, 15, 20)

-- Access individual values
local left = customMargin:getleft()
local horizontal = customMargin:gethorizontal()  -- left + right
local vertical = customMargin:getvertical()      -- top + bottom
```

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

### Create an AbsoluteLayout

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Configures an AbsoluteLayout to position and size UI elements using explicit coordinate values.

```lua
local absolutelayout = loveli.AbsoluteLayout:new{ width = 250, height = 250, margin = loveli.Thickness.parse(10) } 
  :with(loveli.Button:new{ text = "Top Left", horizontaltextalignment = "center", verticaltextalignment = "center", x = 0, y = 0, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Top Center", horizontaltextalignment = "center", verticaltextalignment = "center", x = 125 -38.5, y = 0, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Top Right", horizontaltextalignment = "center", verticaltextalignment = "center", x = 250 -75, y = 0, width = 75, height = 23 } )	
  :with(loveli.Button:new{ text = "Center Left", horizontaltextalignment = "center", verticaltextalignment = "center", x = 0, y = 125 -11.5, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Center", horizontaltextalignment = "center", verticaltextalignment = "center", x = 125 -38.5, y = 125 -11.5, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Center Right", horizontaltextalignment = "center", verticaltextalignment = "center", x = 250 -75, y = 125 -11.5, width = 75, height = 23 } )	
  :with(loveli.Button:new{ text = "Bottom Left", horizontaltextalignment = "center", verticaltextalignment = "center", x = 0, y = 250 -23, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Bottom Center", horizontaltextalignment = "center", verticaltextalignment = "center", x = 125 -38.5, y = 250 -23, width = 75, height = 23 } )
  :with(loveli.Button:new{ text = "Bottom Right", horizontaltextalignment = "center", verticaltextalignment = "center", x = 250 -75, y = 250 -23, width = 75, height = 23 } )
local rootcontrol = absolutelayout
```

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

### Implement CheckBoxes with State Validation

Source: https://context7.com/mtanksl/loveli/llms.txt

Explains how to create checkboxes, handle state changes, and implement validation logic to prevent specific state transitions.

```lua
local loveli = require("LOVELi")

-- Basic checkbox
local checkbox = loveli.CheckBox:new{
    ischecked = false,
    checkedchanged = function(sender, oldvalue, newvalue)
        print("Checkbox changed from", oldvalue, "to", newvalue)
    end
}

-- Checkbox with validation
local validatedCheckbox = loveli.CheckBox:new{
    ischecked = false,
    forecolor = loveli.Color.parse(0xFFFFFFFF),
    backgroundcolor = loveli.Color.parse(0x333333FF),
    bordercolor = loveli.Color.parse(0xFFFFFFFF),
    checkedchanging = function(sender, oldvalue, newvalue)
        if newvalue == true then
            return someConditionIsMet
        end
        return true
    end,
    checkedchanged = function(sender, oldvalue, newvalue)
    end
}

-- Indeterminate state
local indeterminateCheckbox = loveli.CheckBox:new{
    ischecked = nil
}
```

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

### Initialize Loveli GraphicsView Component

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Shows the initialization of a GraphicsView component in Loveli, which serves as a canvas for 2D graphics. It includes a placeholder for a drawable function.

```lua
local graphicsview = loveli.GraphicsView:new{ drawable = function(sender, x, y, width, height) end, width = "*", height = "*" }
```

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

### Display Images with ImageButtons

Source: https://context7.com/mtanksl/loveli/llms.txt

Shows how to implement buttons that display images instead of text, supporting various aspect ratio modes like aspectfit and aspectfill.

```lua
local loveli = require("LOVELi")

-- Image button with aspect fit
local imageButton = loveli.ImageButton:new{
    source = "play_icon.png",
    aspect = "aspectfit",
    width = 64,
    height = 64,
    clicked = function(sender)
        print("Play button clicked!")
    end
}

-- Square icon button
local iconButton = loveli.ImageButton:new{
    source = "settings.png",
    aspect = "aspectfit",
    width = 32,
    height = 32,
    margin = loveli.Thickness.parse(5),
    clicked = function(sender)
    end
}
```

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

### Create a StackLayout

Source: https://github.com/mtanksl/loveli/blob/main/README.md

Configures a StackLayout to organize UI elements in a one-dimensional stack, supporting vertical or horizontal orientation.

```lua
local stacklayout = loveli.StackLayout:new{ orientation = "vertical", spacing = 5, width = "*", height = "*", margin = loveli.Thickness.parse(10) } 
  :with(loveli.Button:new{ text = "Button 1", horizontaltextalignment = "start", verticaltextalignment = "center", width = 75, height = 23, horizontaloptions = "start" } )
  :with(loveli.Button:new{ text = "Button 2", horizontaltextalignment = "center", verticaltextalignment = "center", width = 75, height = "*", horizontaloptions = "center" } )
  :with(loveli.Button:new{ text = "Button 3", horizontaltextalignment = "end", verticaltextalignment = "center", width = 75, height = 23, horizontaloptions = "end" } )		
local rootcontrol = stacklayout
```

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

### Manage Text Labels and Dynamic Updates

Source: https://context7.com/mtanksl/loveli/llms.txt

Covers creating simple, multiline, and dynamic labels. Demonstrates how to update label text at runtime using the invalidate method.

```lua
local loveli = require("LOVELi")

-- Simple label
local label = loveli.Label:new{
    text = "Hello, World!",
    width = "auto",
    height = "auto"
}

-- Styled multiline label
local multilineLabel = loveli.Label:new{
    text = "The quick brown fox jumps over the lazy dog. This is a long text that will wrap.",
    ismultiline = true,
    font = love.graphics.newFont(12),
    textcolor = loveli.Color.parse(0xCCCCCCFF),
    horizontaltextalignment = "center",
    verticaltextalignment = "center",
    width = 150,
    height = "auto"
}

-- Dynamic label update
local fpsLabel = loveli.Label:new{
    text = "FPS: 0",
    textcolor = loveli.Color.parse(0x00FF00FF),
    width = 75,
    height = "auto"
}

function love.update(dt)
    fpsLabel:settext("FPS: " .. love.timer.getFPS())
    fpsLabel:invalidate()
    layoutmanager:update(dt)
end
```

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

### LOVELi Property for Reactive Updates

Source: https://context7.com/mtanksl/loveli/llms.txt

Shows how to create observable properties in LOVELi for shared state and reactive UI updates. Demonstrates creating a property, using it in multiple controls, and updating the value to trigger changes.

```lua
local loveli = require("LOVELi")

-- Shared color property
local themeColor = loveli.Property.parse(loveli.Color.parse(0x4A90D9FF))

-- Use in multiple controls
local button1 = loveli.Button:new{
    text = "Button 1",
    backgroundcolor = themeColor,  -- References the property
    width = 100, height = 30
}
local button2 = loveli.Button:new{
    text = "Button 2",
    backgroundcolor = themeColor,  -- Same property
    width = 100, height = 30
}

-- Change theme - updates all controls using this property
function changeTheme()
    themeColor:setvalue(loveli.Color.parse(0xDF4794FF))
    layoutmanager:invalidate()  -- Trigger redraw
end
```