ui_components

Small reusable UI widget patterns built on top of zui. Lightweight by design — worlds can still build widget trees directly when they need to escape the canned patterns. No module state; every builder returns a fresh widget tree.

Exports

• M.kvRow(label: any, value: any, opts: KvRowOpts?) -> any — key/value pair as a zui hbox; label on the left, spacer, value on the right.
• M.sectionHeader(text: any) -> any — section header label using the ui-components-section-header class.
• M.searchRow(id: string, value: string?, placeholder: string?, opts: SearchRowOpts?) -> any — "Search:"-labelled input row bound to callback id.
• M.formatNumber(n: number, decimals: number?) -> string — proxy to json_utils.formatNumber for display formatting.

Types:

• KvRowOpts = { labelClass?, valueClass?, labelStyle?, valueStyle?, rowClass?, rowStyle? }
• SearchRowOpts = { rowClass?, rowStyle?, inputStyle? }

Usage

local UIComponents = require("@builtin::modules.ui_components")

local row    = UIComponents.kvRow("Health", "120")
local header = UIComponents.sectionHeader("Stats")
local search = UIComponents.searchRow("filter", "", "Search...")
local pretty = UIComponents.formatNumber(3.14159, 2)

Notes

• All builders apply default CSS classes (ui-components-key, ui-components-value, ui-components-row, ui-components-section-header) that worlds can style from their stylesheet. Pass the *Class opts to scope styling to a specific row.
• formatNumber delegates to json_utils.formatNumber so display formatting stays consistent with how numbers are emitted into JSON.