Builtin Library
README.md
edui.widgets (module)
Editor-chrome primitive builders for edui. Each returns a styled ui.*
widget subtree; the common ones are re-exported flat onto edui
(edui.panel{...}, edui.text{...}, edui.iconButton{...}, …).
Two things make these "framework" primitives rather than raw ui.*:
- They read the active theme's editor tokens (
editor-row-height,editor-selection-bg,editor-hover-bg,border,radius-md, …) viaui.getToken, so chrome looks like the editor by default and restyles with the theme.edui.palette()returns the resolved set. - Interactive builders register their closures with the currently-building
eduiapp (edui.current()), so you passonClick = function() endand never touch a callback id.
Builders
- Containers:
vbox,hbox,spacer,divider,panel,toolbar. - Content:
text,svgIcon,iconButton,button. panel{ title? | toolbar?, body }is the standard dockable-panel shell (a header over a height-filling body).nodeGraph{ key, nodes, edges, selected?, height?, onSelect?, onMove?, onConnect?, onDisconnect?, onDelete?, onOpen?, onField?, redraw? }— a node graph on one canvas: titled nodes with output and input ports, wires between them, and a value on every input port that has no wire into it. Drag the background to pan, scroll to zoom, drag a node to move it, drag from a port to another port to connect, drag a connected input away to pick its wire up, click a value to edit it where it stands, press Delete to remove the selection. The widget draws and reports; the owner holds the graph and applies whatonField,onConnect,onDisconnect,onMoveandonDeletereport. Nodes with no position are laid out left to right over the wires.edui.nodeGraphView(key)answers where the view stands and, through itslocate, where a port or a value is on the canvas.iconButton{ d, tooltip?, active?, onClick, key }— a hoverable/active icon square;dis an SVG path (or full<svg>).
Icons are inline SVG (feather/lucide-style 24-view stroke paths), matching the
editor's icon language — pass a path d and it is wrapped for you.