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.

create-window

Create a new window with the specified dimensions and title. Returns a Result containing a window handle or a ZGPUIError.

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

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} -> NonEmptyString -> 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} -> PositiveInt -> PositiveInt -> 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 -> NonNegativeFloat -> 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 -> PositiveFloat -> 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

slate-50

Slate 50 color value.

Int

slate-100

Slate 100 color value.

Int

slate-200

Slate 200 color value.

Int

slate-300

Slate 300 color value.

Int

slate-400

Slate 400 color value.

Int

slate-500

Slate 500 color value.

Int

slate-600

Slate 600 color value.

Int

slate-700

Slate 700 color value.

Int

slate-800

Slate 800 color value.

Int

slate-900

Slate 900 color value.

Int

slate-950

Slate 950 color value.

Int

gray-50

Gray 50 color value.

Int

gray-100

Gray 100 color value.

Int

gray-200

Gray 200 color value.

Int

gray-300

Gray 300 color value.

Int

gray-400

Gray 400 color value.

Int

gray-500

Gray 500 color value.

Int

gray-600

Gray 600 color value.

Int

gray-700

Gray 700 color value.

Int

gray-800

Gray 800 color value.

Int

gray-900

Gray 900 color value.

Int

gray-950

Gray 950 color value.

Int

red-500

Red 500 color value.

Int

red-600

Red 600 color value.

Int

orange-500

Orange 500 color value.

Int

yellow-500

Yellow 500 color value.

Int

green-500

Green 500 color value.

Int

green-600

Green 600 color value.

Int

blue-500

Blue 500 color value.

Int

blue-600

Blue 600 color value.

Int

indigo-500

Indigo 500 color value.

Int

purple-500

Purple 500 color value.

Int

pink-500

Pink 500 color value.

Int

white

White color value.

Int

black

Black color value.

Int

transparent

Transparent color value.

Int

key-space

Space key code.

Int

key-escape

Escape key code.

Int

key-enter

Enter key code.

Int

key-tab

Tab key code.

Int

key-backspace

Backspace key code.

Int

key-delete

Delete key code.

Int

key-right

Right arrow key code.

Int

key-left

Left arrow key code.

Int

key-down

Down arrow key code.

Int

key-up

Up arrow key code.

Int

key-a

A key code.

Int

key-b

B key code.

Int

key-c

C key code.

Int

key-d

D key code.

Int

key-e

E key code.

Int

key-f

F key code.

Int

key-g

G key code.

Int

key-h

H key code.

Int

key-i

I key code.

Int

key-j

J key code.

Int

key-k

K key code.

Int

key-l

L key code.

Int

key-m

M key code.

Int

key-n

N key code.

Int

key-o

O key code.

Int

key-p

P key code.

Int

key-q

Q key code.

Int

key-r

R key code.

Int

key-s

S key code.

Int

key-t

T key code.

Int

key-u

U key code.

Int

key-v

V key code.

Int

key-w

W key code.

Int

key-x

X key code.

Int

key-y

Y key code.

Int

key-z

Z key code.

Int

mouse-left

Left mouse button code.

Int

mouse-right

Right mouse button code.

Int

mouse-middle

Middle mouse button code.

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