zgpui

ZGPUI - A GPU-accelerated UI framework for Kit inspired by Zed's GPUI, powered by raylib

Files

Dependencies

• raylib

Installation

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

Usage

import Kit.Zgpui

License

MIT License - see LICENSE for details.

Exported Functions & Types

ZGPUIError

ZGPUI error type for typed error handling.

close-window

Close a window and release its resources.

{handle: Int, width: Int, height: Int, title: String} -> Unit

window-should-close?

Check if a window should close (user clicked X, etc.).

{handle: Int, width: Int, height: Int, title: String} -> Bool

set-window-title

Set the window title.

{handle: Int, width: Int, height: Int, title: String} -> String -> Unit

get-window-size

Get the window size as a record {width, height}.

{handle: Int, width: Int, height: Int, title: String} -> {width: Int, height: Int}

set-window-size

Set the window size.

{handle: Int, width: Int, height: Int, title: String} -> Int -> Int -> Unit

begin-frame

Begin a new frame for rendering.

{handle: Int, width: Int, height: Int, title: String} -> Unit

end-frame

End the current frame and present to screen.

{handle: Int, width: Int, height: Int, title: String} -> Unit

clear

Clear the frame with a background color.

{handle: Int, width: Int, height: Int, title: String} -> Int -> Unit

draw-rect

Draw a filled rectangle.

{handle: Int, width: Int, height: Int, title: String} -> Float -> Float -> Float -> Float -> Int -> Unit

draw-rounded-rect

Draw a rounded rectangle. Note: raylib's draw-rectangle doesn't support rounded corners directly, so this falls back to a regular rectangle.

{handle: Int, width: Int, height: Int, title: String} -> Float -> Float -> Float -> Float -> Float -> Int -> Unit

draw-rect-outline

Draw a rectangle outline.

{handle: Int, width: Int, height: Int, title: String} -> Float -> Float -> Float -> Float -> Float -> Int -> Unit

draw-circle

Draw a filled circle.

{handle: Int, width: Int, height: Int, title: String} -> Float -> Float -> Float -> Int -> Unit

draw-line

Draw a line.

{handle: Int, width: Int, height: Int, title: String} -> Float -> Float -> Float -> Float -> Float -> Int -> Unit

draw-text

Draw text at a position.

{handle: Int, width: Int, height: Int, title: String} -> String -> Float -> Float -> Float -> Int -> Unit

measure-text

Measure text width.

{handle: Int, width: Int, height: Int, title: String} -> String -> Float -> {width: Int, height: Int}

is-key-pressed?

Check if a key is currently held down.

{handle: Int, width: Int, height: Int, title: String} -> Int -> Bool

is-key-just-pressed?

Check if a key was just pressed this frame.

{handle: Int, width: Int, height: Int, title: String} -> Int -> Bool

is-mouse-pressed?

Check if a mouse button is pressed.

{handle: Int, width: Int, height: Int, title: String} -> Int -> Bool

get-mouse-position

Get the current mouse position as {x, y}.

{handle: Int, width: Int, height: Int, title: String} -> {x: Float, y: Float}

get-mouse-wheel

Get the mouse wheel delta.

{handle: Int, width: Int, height: Int, title: String} -> Float

get-delta-time

Get the time since the last frame in seconds.

{handle: Int, width: Int, height: Int, title: String} -> Float

get-fps

Get the current FPS.

{handle: Int, width: Int, height: Int, title: String} -> Int

pack-color

Pack RGBA values (0-255) into a single integer.

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

rgb

Create an RGB color with full opacity.

Int -> Int -> Int -> Int

rgba

Create an RGBA color.

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

FlexDirection

Flex direction: row (horizontal) or column (vertical)

JustifyContent

Main axis alignment

AlignItems

Cross axis alignment

Node

A UI node with flexbox layout properties

hstack

Create a horizontal flex container.

List Node -> Node

vstack

Create a vertical flex container.

List Node -> Node

label

Create a text node.

String -> Float -> Int -> Node

spacer

Create a flexible spacer.

Unit -> Node

with-gap

Set gap between children.

Node -> Float -> Node

with-padding

Set padding.

Node -> Float -> Node

with-background

Set background color.

Node -> Int -> Node

with-width

Set fixed width.

Node -> Float -> Node

with-height

Set fixed height.

Node -> Float -> Node

with-justify

Set justify content.

Node -> JustifyContent -> Node

with-align

Set align items.

Node -> AlignItems -> Node

compute-layout

Compute layout for a node within a given bounding box.

{handle: Int, width: Int, height: Int, title: String} -> Node -> Float -> Float -> Float -> Float -> List {x: Float, y: Float, width: Float, height: Float, node: Node}

node-description

Get a description of a node for debugging.

Node -> String

render-layout

Render a computed layout tree.

{handle: Int, width: Int, height: Int, title: String} -> List {x: Float, y: Float, width: Float, height: Float, node: Node} -> Unit

div

Create a div container element.

a -> b -> List c -> {kind: String, style: b, children: List c}

text

Create a text element.

a -> String -> b -> {kind: String, content: String, style: b, children: List c}

button

Create a button element.

a -> String -> b -> c -> {kind: String, label: String, on-click: b, style: c, children: List d}

run-app

Run a simple game loop with init, update, and draw callbacks.

{handle: Int, width: Int, height: Int, title: String} -> (Unit -> Unit) -> (Unit -> Unit) -> (Unit -> Unit) -> Unit