tea

Kind	kit
Categories	gui functional-programming architecture
Keywords	tea elm-architecture gui functional reactive

The Elm Architecture (TEA) framework for Kit - functional GUI programming

Files

File	Description
`kit.toml`	Package manifest with metadata and dependencies
`src/tea.kit`	Main module re-exporting all TEA functionality
`src/types.kit`	Core types: Element, Msg, Cmd, Sub, Theme, Layout
`src/runtime.kit`	Application runtime, game loop, and input handling
`src/render.kit`	Element rendering to screen via Raylib
`src/elements.kit`	Element constructors for shapes, text, and layouts
`src/widgets.kit`	Widget interaction helpers (clicks, hovers, focus)
`src/events.kit`	Keyboard, mouse, and timing event matchers
`src/commands.kit`	Side-effect commands (random, time, batch)
`src/subscriptions.kit`	Declarative event streams (timers, window events)
`src/themes.kit`	Built-in themes (dark, light) and themed widgets
`src/scrollable.kit`	Scrollable container helpers and scrollbar logic
`src/text-editor.kit`	Multi-line text editor widget helpers
`src/utils.kit`	Geometry utilities, color constants, key bindings
`tests/test-commands.kit`	Tests for command constructors and batching
`tests/test-events.kit`	Tests for event matchers and message creation
`tests/test-subscriptions.kit`	Tests for subscription constructors
`tests/test-themes.kit`	Tests for theme colors and themed widgets
`tests/test-types.kit`	Tests for type constructors and layouts
`tests/test-utils.kit`	Tests for geometry and utility functions
`tests/test-widgets.kit`	Tests for widget interaction detection
`examples/counter.kit`	Classic counter with increment/decrement buttons
`examples/pong.kit`	Pong game with paddle controls and ball physics
`examples/button-demo.kit`	Button styles, gradients, and click handling
`examples/checkbox-enhanced-demo.kit`	Styled checkboxes with custom colors
`examples/slider-demo.kit`	Slider widget with value display
`examples/text-input-demo.kit`	Text input fields with validation
`examples/text-editor-demo.kit`	Multi-line text editor with cursor
`examples/pick-list-demo.kit`	Dropdown pick list selection
`examples/scrollable-demo.kit`	Scrollable containers with overflow content
`examples/layout-demo.kit`	Row/column layouts and spacing
`examples/alignment-demo.kit`	Element alignment (start, center, end)
`examples/gradient-demo.kit`	Linear and radial gradient fills
`examples/theme-demo.kit`	Theme switching (dark/light modes)
`examples/font-demo.kit`	Custom font loading and text rendering
`examples/timer-demo.kit`	Timer subscriptions and animations
`examples/cmd-demo.kit`	Commands for random numbers and time
`examples/clicks.kit`	Mouse click detection and handling
`examples/rule-demo.kit`	Horizontal and vertical divider rules
`examples/logging-demo.kit`	Debug logging configuration
`examples/widgets-demo.kit`	Showcase of all available widgets
`examples/window-events-demo.kit`	Window resize and focus events
`examples/traits-test.kit`	Testing trait implementations
`LICENSE`	MIT license file

Architecture

The Elm Architecture (TEA) is a pattern for building interactive applications with unidirectional data flow:

sequenceDiagram participant User participant View participant Runtime participant Update participant Model User->>View: Interaction (click, key, etc.) View->>Runtime: Msg Runtime->>Update: (Msg, Model) Update->>Model: New Model + Cmd Model->>Runtime: State Changed Runtime->>View: Render(Model) View->>User: Updated UI

Module Structure

graph TD A[tea.kit] --> B[runtime.kit] A --> C[elements.kit] A --> D[widgets.kit] B --> E[commands.kit] B --> F[subscriptions.kit] B --> G[events.kit] C --> H[render.kit] D --> H H --> I[raylib]

Dependencies

logging
raylib

Installation

kit add gitlab.com/kit-lang/packages/kit-tea.git

Usage

import Kit.Tea

License

MIT License - see LICENSE for details.

Exported Functions & Types

`sub-none`

No subscription

() -> Sub

`sub-timer`

Timer subscription - fires every interval-ms milliseconds

Int -> Sub

`sub-window-resize`

Window resize subscription - fires when window is resized

() -> Sub

`sub-window-focus`

Window focus subscription - fires when window gains or loses focus

() -> Sub

`sub-batch`

Batch multiple subscriptions together

List Sub -> Sub

`sub-timer-tick?`

Match a timer tick message Returns Some time if this is a timer tick, None otherwise

Msg -> Option Float

`sub-window-resized?`

Match a window resize message Returns Some {width, height} if window was resized

Msg -> Option {width: Int, height: Int}

`sub-window-focused?`

Match a window focus message Returns Some is-focused? (true if window gained focus, false if lost)

Msg -> Option Bool

`check-subscriptions`

Check all subscriptions and return messages with updated state

Sub -> SubState -> Float -> {messages: List Msg, state: SubState}

`button-clicked?`

Check if a button was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

`is-button-hovered?`

Check if mouse is hovering over button bounds

Msg -> Int -> Int -> Int -> Int -> Bool

`measure-text`

Measure text width (useful for auto-sizing buttons)

String -> Int -> Int

`checkbox-clicked?`

Check if a checkbox was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Option Int

`is-checkbox-hovered?`

Check if mouse is hovering over checkbox bounds

Msg -> Int -> Int -> Int -> Bool

`compute-status`

Compute widget status from hover state and enabled state is-hovered?: whether mouse is over the widget is-enabled?: whether the widget is interactive

Bool -> Bool -> WidgetStatus

`checkbox-status`

Compute checkbox status from message and widget bounds msg: current message (for mouse position) x, y, size: checkbox bounds is-enabled?: whether the checkbox is interactive

Msg -> Int -> Int -> Int -> Bool -> WidgetStatus

`default-checkbox-style`

Default checkbox style (dark theme)

() -> CheckboxStyle

`light-checkbox-style`

Light theme checkbox style

() -> CheckboxStyle

`checkbox-colors`

Get checkbox colors based on status and style Returns {bg, border, icon, text} colors

CheckboxStyle -> WidgetStatus -> Bool -> {bg: Int, border: Int, icon: Int, text: Int}

`radio-clicked?`

Check if a radio button was clicked this frame Returns Some button-id (the mouse button) if clicked, None otherwise

Msg -> Int -> Int -> Int -> Option Int

`is-radio-hovered?`

Check if mouse is hovering over radio button bounds

Msg -> Int -> Int -> Int -> Bool

`slider-value`

Check if slider is being dragged and return new value Returns Some new-value if mouse is down within slider bounds, None otherwise

Msg -> Int -> Int -> Int -> Int -> Float -> Float -> Option Float

`is-slider-hovered?`

Check if mouse is hovering over slider bounds

Msg -> Int -> Int -> Int -> Int -> Bool

`toggler-clicked?`

Check if a toggler was clicked this frame Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

`is-toggler-hovered?`

Check if mouse is hovering over toggler bounds

Msg -> Int -> Int -> Int -> Int -> Bool

`text-input-clicked?`

Check if a text input was clicked this frame Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

`text-input-update`

Process a message for a focused text input Returns Some {text, cursor} if the input was modified, None otherwise

Msg -> String -> Int -> Bool -> Option {text: String, cursor: Int}

`pick-list-clicked?`

Check if the pick list header was clicked (to toggle open/close) Returns Some button-id if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option Int

`pick-list-selection`

Check if an option was selected from an open pick list Returns Some index if an option was clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> List String -> Bool -> Option Int

`pick-list-item-height`

Height of each option in the dropdown

`default-config`

Default configuration

`run`

Run a TEA application with default configuration

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> Element) -> Int -> Int -> String -> ()

`run-with-config`

Run a TEA application with custom configuration

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> Element) -> Config -> ()

`run-with-cmd`

Run a TEA application with command support

(() -> {model: Model, cmd: Cmd}) -> (Msg -> Model -> {model: Model, cmd: Cmd}) -> (Model -> Element) -> Int -> Int -> String -> ()

`run-with-cmd-config`

Run a TEA application with commands and custom configuration

(() -> {model: Model, cmd: Cmd}) -> (Msg -> Model -> {model: Model, cmd: Cmd}) -> (Model -> Element) -> Config -> ()

`run-with-sub`

Run a TEA application with subscription support

(() -> Model) -> (Msg -> Model -> Model) -> (Model -> Sub) -> (Model -> Element) -> Int -> Int -> String -> ()

`theme-dark`

Dark theme - default dark color scheme

`theme-light`

Light theme - light color scheme

`theme-with`

Create a custom theme by modifying an existing theme

Theme -> Record -> Theme

`themed-button`

Themed button - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> String -> Theme -> Element

`themed-progress-bar`

Themed progress bar - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> Float -> Theme -> Element

`themed-checkbox`

Themed checkbox - uses theme colors

Int -> Int -> Int -> Bool -> String -> Theme -> Element

`themed-slider`

Themed slider - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Theme -> Element

`themed-toggler`

Themed toggler - uses theme colors with pill shape

Int -> Int -> Int -> Int -> Bool -> String -> Theme -> Element

`themed-radio`

Themed radio - uses theme colors

Int -> Int -> Int -> Bool -> String -> Theme -> Element

`themed-text-input`

Themed text input - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Theme -> Element

`themed-pick-list`

Themed pick list - uses theme colors with rounded corners

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Theme -> Element

`themed-text`

Themed text - uses theme text color

Int -> Int -> Int -> String -> Theme -> Element

`themed-text-secondary`

Themed secondary text - uses theme secondary text color

Int -> Int -> Int -> String -> Theme -> Element

`themed-button-with-font`

Themed button with custom font

Int -> Int -> Int -> Int -> String -> Theme -> Ptr -> Element

`themed-checkbox-with-font`

Themed checkbox with custom font

Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

`themed-toggler-with-font`

Themed toggler with custom font

Int -> Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

`themed-radio-with-font`

Themed radio with custom font

Int -> Int -> Int -> Bool -> String -> Theme -> Ptr -> Element

`themed-text-with-font`

Themed text with custom font

Int -> Int -> Int -> String -> Theme -> Ptr -> Element

`themed-text-secondary-with-font`

Themed secondary text with custom font

Int -> Int -> Int -> String -> Theme -> Ptr -> Element

`make-key-msg`

String -> Int -> Msg

`make-mouse-msg`

String -> Int -> Int -> Int -> Msg

`make-tick-msg`

Float -> Msg

`make-frame-msg`

() -> Msg

`key-pressed?`

Check if a key was pressed this frame Returns Some key-code if pressed, None otherwise

Msg -> Option Int

`key-down?`

Check if a key is currently held down Returns Some key-code if held, None otherwise

Msg -> Option Int

`key-released?`

Check if a key was released this frame Returns Some key-code if released, None otherwise

Msg -> Option Int

`char-typed?`

Check if a character was typed (for text input) Returns Some char-string if a character was typed, None otherwise

Msg -> Option String

`char-pressed?`

Check if a character was typed this frame Returns Some char-code if typed, None otherwise

Msg -> Option Int

`mouse-clicked?`

Check if a mouse button was clicked this frame Returns Some {x, y, button} if clicked, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

`mouse-down?`

Check if a mouse button is currently held down Returns Some {x, y, button} if held, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

`mouse-released?`

Check if a mouse button was released this frame Returns Some {x, y, button} if released, None otherwise

Msg -> Option {x: Int, y: Int, button: Int}

`mouse-moved?`

Check if the mouse moved this frame Returns Some {x, y} if moved, None otherwise

Msg -> Option {x: Int, y: Int}

`mouse-wheel?`

Check if the mouse wheel was scrolled Returns Some delta if scrolled, None otherwise

Msg -> Option Float

`is-tick?`

Check if this is a tick message (timing update)

Msg -> Bool

`get-tick-dt`

Get the delta time from a tick message

Msg -> Float

`is-frame-tick?`

Check if this is a frame tick message

Msg -> Bool

`text-editor-lines`

Split text into lines

String -> List String

`text-editor-line-count`

Count number of lines in text

String -> Int

`text-editor-get-line`

Get a specific line (0-indexed), returns empty string if out of bounds

String -> Int -> String

`text-editor-line-length`

Get line length

String -> Int -> Int

`text-editor-insert-char`

Insert character at cursor position

String -> Int -> Int -> String -> String

`text-editor-insert-newline`

Insert newline at cursor position

String -> Int -> Int -> String

`text-editor-delete-before`

Delete character before cursor (backspace)

String -> Int -> Int -> String

`text-editor-delete-at`

Delete character at cursor (delete key)

String -> Int -> Int -> String

`text-editor-cursor-left`

Move cursor left, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

`text-editor-cursor-right`

Move cursor right, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

`text-editor-cursor-up`

Move cursor up, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

`text-editor-cursor-down`

Move cursor down, returns {line, col}

String -> Int -> Int -> {line: Int, col: Int}

`text-editor-cursor-home`

Move cursor to start of line (Home key)

Int -> {line: Int, col: Int}

`text-editor-cursor-end`

Move cursor to end of line (End key)

String -> Int -> {line: Int, col: Int}

`text-editor-clicked?`

Check if text editor was clicked

Msg -> Int -> Int -> Int -> Int -> Option {x: Int, y: Int}

`text-editor-click-to-cursor`

Calculate cursor position from click Returns {line, col} based on click position

String -> Int -> Int -> Int -> Int -> Int -> Int -> {line: Int, col: Int}

`text-editor-handle-key`

Handle keyboard input for text editor Returns Some {text, line, col} if input was handled, None otherwise

Msg -> String -> Int -> Int -> Bool -> Option {text: String, line: Int, col: Int}

`text-editor-scroll-to-cursor`

Calculate scroll needed to keep cursor visible

Int -> Int -> Int -> Int -> Int

`cmd-none`

No-op command - use when no side effect is needed

() -> Cmd

`cmd-batch`

Batch multiple commands together

List Cmd -> Cmd

`cmd-random`

Generate a random integer between min and max (inclusive)

Int -> Int -> Cmd

`cmd-get-time`

Get current time in seconds since program start

() -> Cmd

`no-cmd`

Wrap a model with no command

Model -> {model: Model, cmd: Cmd}

`with-cmd`

Wrap a model with a command

Model -> Cmd -> {model: Model, cmd: Cmd}

`cmd-random-result?`

Match a random command result Returns Some value if this is a random result, None otherwise

Msg -> Option Int

`cmd-time-result?`

Match a time command result Returns Some time if this is a time result, None otherwise

Msg -> Option Float

`make-cmd-msg`

Create a command result message

String -> Int -> Float -> Msg

`execute-cmd`

Execute a command and return any resulting messages

Cmd -> List Msg

`execute-cmd-batch`

Execute a batch of commands

List Cmd -> List Msg

`is-cmd-none?`

Check if a command is CmdNone

Cmd -> Bool

`combine-cmds`

Combine two commands into one

Cmd -> Cmd -> Cmd

`make-cmd-batch`

Create a batch from two commands

Cmd -> Cmd -> Cmd

`scrollbar-width`

Scrollbar width in pixels

`scrollable-scroll?`

Check if mouse wheel was used within scrollable bounds Returns Some {dx, dy} if scrolling occurred within bounds, None otherwise

Msg -> Int -> Int -> Int -> Int -> Option {dx: Float, dy: Float}

`scroll-clamp`

Calculate new scroll offset, clamping to valid range

Int -> Float -> Int -> Int -> Int

`scrollable-update-scroll-y`

Update vertical scroll based on mouse wheel within bounds Returns Some new-scroll-y if scroll changed, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

`scrollable-update-scroll-x`

Update horizontal scroll based on mouse wheel within bounds Returns Some new-scroll-x if scroll changed, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

`scrollable-in-bounds?`

Check if a point is within a scrollable's viewport

Int -> Int -> Int -> Int -> Int -> Int -> Bool

`scrollable-arrow-key-scroll?`

Check for arrow/page key scrolling Returns Some scroll-delta if scroll key pressed, None otherwise

Msg -> Option Int

`scrollable-arrow-scroll`

Update scroll based on arrow keys Returns Some new-scroll if changed, None otherwise

Msg -> Int -> Int -> Int -> Option Int

`scrollbar-track-clicked?`

Check if mouse is clicking on the vertical scrollbar track Returns Some scroll-y if clicked, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Option Int

`scrollbar-drag?`

Check if mouse is dragging the scrollbar (mouse button held) Returns Some new-scroll if dragging within scrollbar area, None otherwise

Msg -> Int -> Int -> Int -> Int -> Int -> Int -> Bool -> Option Int

`scrollbar-drag-ended?`

Check if scrollbar drag should end (mouse released)

Msg -> Bool

`render`

Render an Element tree to the screen

Element -> ()

`render-list`

List Element -> ()

`LogFormat`

Log output formats for Raylib trace logging

Variants

LogJson

LogPretty

LogFile {path}

LogNone

Messages represent events that can occur in your application. The runtime automatically generates Key and Mouse messages from input.

`Cmd`

Commands represent side effects that can be triggered from update functions.

Variants

CmdNone

CmdBatch {cmds}

CmdRandomInt {min-val, max-val}

CmdGetTime

`Sub`

Subscriptions represent declarative event streams.

Variants

SubNone

SubTimer {interval-ms}

SubWindowResize

SubWindowFocus

SubBatch {subs}

Theme defines colors for the entire application.

`WidgetStatus`

Widget interaction status for hover/disabled states Used by widgets to render differently based on user interaction

Variants

StatusActive

StatusHovered

StatusDisabled

Style configuration for Checkbox widget Allows full customization of checkbox appearance

Style configuration for Button widget Allows full customization of button appearance

Style configuration for Slider widget Allows full customization of slider appearance

`GradientDir`

Gradient direction for linear gradients

Variants

Horizontal

Vertical

Diagonal

DiagonalReverse

`Gradient`

Gradient fill for backgrounds

Variants

GradientNone

LinearGradient {dir, start-color, end-color}

RadialGradient {center-x, center-y, inner-color, outer-color}

`Length`

Length specifies how an element should be sized

Variants

Fill

Shrink

Fixed {pixels}

FillPortion {factor}

`Alignment`

Alignment specifies how children are positioned within a container

Variants

Start

Center

End

`Element`

Elements are declarative descriptions of what to render. Widgets with 'radius' field support rounded corners (0.0 = sharp, 1.0 = fully rounded). Widgets with shadow fields (shadow-x, shadow-y, shadow-blur, shadow-color) support drop shadows. Shadow fields: shadow-x/y = offset in pixels, shadow-blur = blur amount (0 = hard shadow), shadow-color = shadow color with alpha (use rgba for semi-transparent shadows).

Variants

Rect-Fill {x, y, w, h, color}

Rect-Outline {x, y, w, h, color}

Rect-Rounded {x, y, w, h, color, radius}

Rect-Rounded-Outline {x, y, w, h, color, radius}

Rect-Gradient {x, y, w, h, gradient}

Rect-Gradient-Rounded {x, y, w, h, gradient, radius}

Circle-Fill {x, y, r, color}

Circle-Outline {x, y, r, color}

Line {x1, y1, x2, y2, color}

Text {x, y, size, color, content, font, spacing}

Triangle {x1, y1, x2, y2, x3, y3, color}

Polygon {x, y, sides, radius, rotation, color}

Group {elements}

Empty

Row {x, y, w, h, children, spacing, align}

Column {x, y, w, h, children, spacing, align}

Container {x, y, w, h, child, padding, align}

Spacer {w, h}

RuleH {x, y, length, thickness, color}

RuleV {x, y, length, thickness, color}

Button {x, y, w, h, label, bg, fg, border-color, radius, shadow-x, shadow-y, shadow-blur, shadow-color, font}

ProgressBar {x, y, w, h, progress, bg, fg, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

Checkbox {x, y, size, is-checked, label, fg, font}

CheckboxStyled {x, y, size, is-checked, label, status, style, font}

Slider {x, y, w, h, value, min-val, max-val, bg, fg, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

Toggler {x, y, w, h, is-on?, label, bg-off, bg-on, knob, radius, shadow-x, shadow-y, shadow-blur, shadow-color, font}

Radio {x, y, size, is-selected?, label, fg, font}

TextInput {x, y, w, h, text, cursor, is-focused?, placeholder, bg, fg, border, radius, shadow-x, shadow-y, shadow-blur, shadow-color, font}

PickList {x, y, w, h, options, selected, is-open?, placeholder, bg, fg, border, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

TextEditor {x, y, w, h, text, cursor-line, cursor-col, scroll-y, is-focused?, line-height, bg, fg, border, radius, shadow-x, shadow-y, shadow-blur, shadow-color, font}

Sized {w, h, child}

Scrollable {x, y, w, h, child, scroll-x, scroll-y, content-w, content-h}

ButtonGradient {x, y, w, h, label, gradient, fg, border-color, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

ProgressBarGradient {x, y, w, h, progress, bg, fg-gradient, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

SliderGradient {x, y, w, h, value, min-val, max-val, bg, fg-gradient, radius, shadow-x, shadow-y, shadow-blur, shadow-color}

Configuration for the TEA runtime

`Styleable`

Styleable - Compute a style from a theme and widget status

Widgets that implement Styleable can derive their visual appearance from a Theme and their current interaction status.

extend MyButton with Styleable
  style = fn(theme, status) =>
    match status
      | StatusActive -> {bg: theme.primary, fg: theme.primary-text}
      | StatusHovered -> {bg: theme.primary-hover, fg: theme.primary-text}
      | StatusDisabled -> {bg: theme.surface, fg: theme.text-disabled}

`Statusable`

Statusable - Compute widget status from interaction state

Widgets that implement Statusable can determine their current interaction status (active, hovered, disabled) from input state.

extend MyWidget with Statusable
  compute-status = fn(is-enabled?, is-hovered?) =>
    if not is-enabled? then StatusDisabled
    else if is-hovered? then StatusHovered
    else StatusActive

`Measurable`

Measurable - Calculate the size of an element

Types that implement Measurable can report their dimensions. This is useful for layout calculations and hit testing.

extend MyWidget with Measurable
  measure = fn(widget) => {w: widget.width, h: widget.height}

`Renderable`

Renderable - Convert a value to a renderable Element

Types that implement Renderable can be converted to Element for display. This is the core trait for the view layer of TEA.

extend MyWidget with Renderable
  render = fn(widget) =>
    Button{
      x: widget.x, y: widget.y, w: widget.w, h: widget.h,
      label: widget.label, bg: widget.bg, fg: widget.fg,
      border-color: widget.border, radius: widget.radius,
      shadow-x: 0, shadow-y: 0, shadow-blur: 0, shadow-color: 0,
      font: None
    }

`point-in-rect?`

Check if a point is inside a rectangle

Int -> Int -> Int -> Int -> Int -> Int -> Bool

`rects-overlap?`

Check if two rectangles overlap

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Bool

`clamp`

Clamp a value between min and max

a -> a -> a -> a

`lerp`

Linear interpolation

Float -> Float -> Float -> Float

`screen-width`

Get screen dimensions (must be called after run starts)

() -> Int

`screen-height`

() -> Int

`rgb`

Create a custom color from RGB values

Int -> Int -> Int -> Int

`rgba`

Create a custom color from RGBA values

Int -> Int -> Int -> Int -> Int

`rect`

Create a filled rectangle

Int -> Int -> Int -> Int -> Int -> Element

`rect-outline`

Create a rectangle outline

Int -> Int -> Int -> Int -> Int -> Element

`rect-rounded`

Create a filled rounded rectangle radius is a value from 0.0 (sharp corners) to 1.0 (fully rounded)

Int -> Int -> Int -> Int -> Float -> Int -> Element

`rect-rounded-outline`

Create a rounded rectangle outline radius is a value from 0.0 (sharp corners) to 1.0 (fully rounded)

Int -> Int -> Int -> Int -> Float -> Int -> Element

`rect-gradient`

Create a gradient-filled rectangle

Int -> Int -> Int -> Int -> Gradient -> Element

`rect-gradient-rounded`

Create a rounded gradient-filled rectangle

Int -> Int -> Int -> Int -> Float -> Gradient -> Element

`gradient-horizontal`

Create a horizontal linear gradient

Int -> Int -> Gradient

`gradient-vertical`

Create a vertical linear gradient

Int -> Int -> Gradient

`gradient-diagonal`

Create a diagonal linear gradient (top-left to bottom-right)

Int -> Int -> Gradient

`gradient-diagonal-reverse`

Create a reverse diagonal linear gradient (top-right to bottom-left)

Int -> Int -> Gradient

`gradient-radial`

Create a radial gradient (center uses default center of element)

Int -> Int -> Gradient

`gradient-radial-at`

Create a radial gradient with custom center

Int -> Int -> Int -> Int -> Gradient

`gradient-none`

No gradient (solid color fallback)

() -> Gradient

`circle`

Create a filled circle

Int -> Int -> Float -> Int -> Element

`circle-outline`

Create a circle outline

Int -> Int -> Float -> Int -> Element

`line`

Create a line

Int -> Int -> Int -> Int -> Int -> Element

`text`

Create text (uses default font)

Int -> Int -> Int -> Int -> String -> Element

`text-with-font`

Create text with custom font font should be a font record from Raylib.load-font-ex (with ptr field)

Int -> Int -> Int -> Int -> String -> {ptr: Ptr} -> Element

`text-styled`

Create text with custom font and spacing font-ptr-opt should be Option Ptr (raw font pointer)

Int -> Int -> Int -> Int -> String -> Option Ptr -> Float -> Element

`triangle`

Create a triangle

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Element

`polygon`

Create a regular polygon

Int -> Int -> Int -> Float -> Float -> Int -> Element

`group`

Group multiple elements together

List Element -> Element

`empty`

Empty element (renders nothing)

() -> Element

`row`

Create a horizontal row of elements

Int -> Int -> Int -> Int -> List Element -> Element

`row-spaced`

Create a horizontal row with custom spacing

Int -> Int -> Int -> Int -> Int -> List Element -> Element

`row-aligned`

Create a horizontal row with alignment (cross-axis: Start=top, Center=middle, End=bottom)

Int -> Int -> Int -> Int -> Int -> Alignment -> List Element -> Element

`column`

Create a vertical column of elements

Int -> Int -> Int -> Int -> List Element -> Element

`column-spaced`

Create a vertical column with custom spacing

Int -> Int -> Int -> Int -> Int -> List Element -> Element

`column-aligned`

Create a vertical column with alignment (cross-axis: Start=left, Center=middle, End=right)

Int -> Int -> Int -> Int -> Int -> Alignment -> List Element -> Element

`container`

Create a container wrapping a single element

Int -> Int -> Int -> Int -> Element -> Element

`container-padded`

Create a container with padding

Int -> Int -> Int -> Int -> Int -> Element -> Element

`container-aligned`

Create a container with alignment (Start=top-left, Center=center, End=bottom-right)

Int -> Int -> Int -> Int -> Int -> Alignment -> Element -> Element

`spacer`

Create a spacer element

Int -> Int -> Element

`sized`

Wrap an element with explicit dimensions (useful in layouts)

Int -> Int -> Element -> Element

`rule-horizontal`

Create a horizontal rule (divider line) x, y: position, length: width of the line, thickness: height of the line

Int -> Int -> Int -> Int -> Int -> Element

`rule-vertical`

Create a vertical rule (divider line) x, y: position, length: height of the line, thickness: width of the line

Int -> Int -> Int -> Int -> Int -> Element

`rule-h`

Create a horizontal rule with default thickness (1 pixel)

Int -> Int -> Int -> Int -> Element

`rule-v`

Create a vertical rule with default thickness (1 pixel)

Int -> Int -> Int -> Int -> Element

`button`

Create a button with default style (gray background, white text, rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Element

`button-with-font`

Create a button with custom font

Int -> Int -> Int -> Int -> String -> Option Ptr -> Element

`button-styled`

Create a button with custom colors and radius (no shadow) radius: 0.0 = sharp corners, 0.5 = moderate rounding, 1.0 = pill shape

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Element

`button-styled-with-font`

Create a button with custom colors, radius, and font (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Option Ptr -> Element

`button-with-shadow`

Create a button with custom colors, radius, and shadow shadow-x/y: offset in pixels, shadow-blur: blur amount (0 = hard), shadow-color: color with alpha

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`progress-bar`

Create a progress bar with default style (dark gray background, green fill, rounded, no shadow)

Int -> Int -> Int -> Int -> Float -> Element

`progress-bar-styled`

Create a progress bar with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Float -> Int -> Int -> Float -> Element

`progress-bar-with-shadow`

Create a progress bar with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Float -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`slider`

Create a slider with default style (gray background, white handle, rounded track, no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Element

`slider-styled`

Create a slider with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Element

`slider-with-shadow`

Create a slider with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`toggler`

Create a toggler (on/off switch) with default style (pill-shaped track, no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Element

`toggler-with-font`

Create a toggler with custom font

Int -> Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

`toggler-styled`

Create a toggler with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

`toggler-styled-with-font`

Create a toggler with custom colors, radius, and font (no shadow)

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Option Ptr -> Element

`toggler-with-shadow`

Create a toggler with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`checkbox`

Create a checkbox with default style (white foreground)

Int -> Int -> Int -> Bool -> String -> Element

`checkbox-with-font`

Create a checkbox with custom font

Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

`checkbox-styled`

Create a checkbox with custom color

Int -> Int -> Int -> Bool -> String -> Int -> Element

`checkbox-styled-with-font`

Create a checkbox with custom color and font

Int -> Int -> Int -> Bool -> String -> Int -> Option Ptr -> Element

`checkbox-enhanced`

Create an enhanced checkbox with full styling and status status: StatusActive, StatusHovered, or StatusDisabled style: CheckboxStyle record with all color/border settings

Int -> Int -> Int -> Bool -> String -> WidgetStatus -> CheckboxStyle -> Option Ptr -> Element

`checkbox-with-status`

Create an enhanced checkbox with default style Useful when you only need status handling without custom colors

Int -> Int -> Int -> Bool -> String -> WidgetStatus -> Option Ptr -> Element

`radio`

Create a radio button with default style (white foreground)

Int -> Int -> Int -> Bool -> String -> Element

`radio-with-font`

Create a radio button with custom font

Int -> Int -> Int -> Bool -> String -> Option Ptr -> Element

`radio-styled`

Create a radio button with custom color

Int -> Int -> Int -> Bool -> String -> Int -> Element

`radio-styled-with-font`

Create a radio button with custom color and font

Int -> Int -> Int -> Bool -> String -> Int -> Option Ptr -> Element

`text-input`

Create a text input with default style (rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Element

`text-input-with-font`

Create a text input with custom font

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Option Ptr -> Element

`text-input-styled`

Create a text input with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

`text-input-with-shadow`

Create a text input with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`pick-list`

Create a pick list with default style (rounded corners, no shadow)

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Element

`pick-list-styled`

Create a pick list with custom colors and radius (no shadow)

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Element

`pick-list-with-shadow`

Create a pick list with custom colors, radius, and shadow

Int -> Int -> Int -> Int -> List String -> Int -> Bool -> String -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`text-editor`

Create a multi-line text editor (rounded corners, no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Element

`text-editor-with-font`

Create a multi-line text editor with custom font

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Option Ptr -> Element

`text-editor-styled`

Create a text editor with custom styling and radius (no shadow)

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Int -> Int -> Int -> Int -> Float -> Element

`text-editor-with-shadow`

Create a text editor with custom styling, radius, and shadow

Int -> Int -> Int -> Int -> String -> Int -> Int -> Int -> Bool -> Int -> Int -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`scrollable`

Create a scrollable area

Int -> Int -> Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

`scrollable-vertical`

Create a vertical scrollable area (only scrolls vertically)

Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

`scrollable-horizontal`

Create a horizontal scrollable area (only scrolls horizontally)

Int -> Int -> Int -> Int -> Int -> Int -> Element -> Element

`button-gradient`

Create a button with gradient background (no shadow)

Int -> Int -> Int -> Int -> String -> Gradient -> Element

`button-gradient-styled`

Create a button with gradient background and custom styling (no shadow)

Int -> Int -> Int -> Int -> String -> Gradient -> Int -> Int -> Float -> Element

`button-gradient-with-shadow`

Create a button with gradient background, custom styling, and shadow

Int -> Int -> Int -> Int -> String -> Gradient -> Int -> Int -> Float -> Int -> Int -> Int -> Int -> Element

`progress-bar-gradient`

Create a progress bar with gradient fill (no shadow)

Int -> Int -> Int -> Int -> Float -> Gradient -> Element

`progress-bar-gradient-styled`

Create a progress bar with gradient fill and custom styling (no shadow)

Int -> Int -> Int -> Int -> Float -> Int -> Gradient -> Float -> Element

`progress-bar-gradient-with-shadow`

Create a progress bar with gradient fill, custom styling, and shadow

Int -> Int -> Int -> Int -> Float -> Int -> Gradient -> Float -> Int -> Int -> Int -> Int -> Element

`slider-gradient`

Create a slider with gradient handle (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Gradient -> Element

`slider-gradient-styled`

Create a slider with gradient handle and custom styling (no shadow)

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Gradient -> Float -> Element

`slider-gradient-with-shadow`

Create a slider with gradient handle, custom styling, and shadow

Int -> Int -> Int -> Int -> Float -> Float -> Float -> Int -> Gradient -> Float -> Int -> Int -> Int -> Int -> Element

`configure-logging`

Configure Raylib trace logging format.

LogFormat -> ()

`reset-logging`

Reset Raylib logging to defaults

() -> ()

`configure-window`

Configure window with flags.

Int -> ()

`enable-window-resize`

Enable window resizing.

() -> ()

`fira-font-path`

Get the path to the bundled Fira Sans font Uses HOME environment variable to construct the absolute path

() -> String

`load-fira-font`

Load the default Fira Sans font at specified size Returns Option Font (None if loading failed)

Int -> Option Ptr

`load-font`

Load a custom font from path

String -> Ptr

`load-font-ex`

Load a custom font with specific size

String -> Int -> Int -> Ptr

`unload-font`

Unload a font

Ptr -> ()

`draw-text-ex`

Draw text with a custom font

Ptr -> String -> Float -> Float -> Float -> Float -> Int -> ()

`measure-text-ex`

Measure text width with a custom font

Ptr -> String -> Float -> Float -> {width: Float, height: Float}

`font-base-size`

Get the base size a font was loaded at

Ptr -> Int

`filter-point`

Filter constants for anti-aliasing

`set-font-antialiased`

Enable anti-aliasing for a font (applies bilinear filtering) Call this after loading a font for smooth text rendering

Ptr -> ()

`set-font-filter`

Set custom filter for a font

Ptr -> Int -> ()