Module ui

Expand description

Layer 3: nodes. Typed builders for every kind (except block, which is Tern’s own), every documented prop, the common props, styled spans and handlers that map events to the program’s messages.

Every builder converts into Node; containers take children with .child(…) / .children(…). Any prop can also be set untyped with .prop(name, value), and any kind built with node.

§Example

use tern_sdk::ui::{self, CardStatus, View};

#[derive(Clone)]
enum Msg {
	Rerun,
}

let view: View<Msg> = View::new().main([ui::card()
	.head("Deploy")
	.status(CardStatus::Running)
	.on_menu("rerun", Msg::Rerun)
	.child(ui::md("Uploading **api-gateway**"))
	.child(ui::progress().value(0.4).label("40%"))]);
assert!(view.regions()[0].is_some());

Modules§

html: el builders, one per allowed tag.

Structs§

ActButton: A button that sends act: in a table’s selection bar (bar, sent with the picked ids as value), or attached to an input or editor (buttons; "copy" copies the text).
Actions: What a pointer does on a node: {click?, dblclick?, menu?}.
Agent: agent: one subagent row.
AgentStats: An agent’s stats.
AgentTool: The tool an agent runs now.
Ansi: ansi: output with escape sequences.
Ask: The contents of a tool’s approval panel (ask), drawn while its status is ask.
AskScope: A scope of a tool’s approval (how long the yes lasts).
Attachment: attachment: a file attached to a message, with its upload state.
Avatar: avatar: a person, bot or org as initials, an icon or a picture.
AvatarItem: One avatar of an avatars stack.
Avatars: avatars: avatars stacked, with an overflow count. Its max is an avatar count, not the common size bounds.
Badge: badge: a pill chip.
BadgeSpec: A badge in a tool’s or agent’s head, or after a picker row’s label.
Bound: Size bounds {w?, h?} for min and max.
Breadcrumb: breadcrumb: a trail of places, the last one current.
Button: button: a push button. A click sends action with actions.click ("click" by default); it never takes focus.
ButtonCell: A table cell drawn as a sm button. Its click sends an action event with act and the row as item, and doesn’t select the row.
Buttons: buttons: button children drawn as one group: joined, split or a toolbar.
Calendar: calendar: a month grid or a week strip of days.
Card: card: a rounded card with a head and a body, optionally folding.
Carousel: carousel: slides (its children) shown one at a time. A move by the user sends change with the index shown.
Chart: chart: bars, a sparkline, a heatmap, a line or area chart or a donut.
ChartCol: A heatmap column label.
ChartMark: A dashed reference line (a target, a limit) across a bars, spark, line or area chart. Outside the domain it is clamped to its edge.
Checklist: checklist: a todo list.
ChecklistItem: A checklist item.
ChoiceOption: An option of a prefs choice or multi control.
Cite: A source a span cites.
Code: code: highlighted code.
CodeFold: A run of lines a code block draws as one row until it is opened.
CodeMark: A code line mark.
Col: col: a vertical stack.
Column: A table column.
Confirm: A picker confirm strip.
Crumb: A crumb of a breadcrumb.
Date: date: a date field that opens a calendar popover.
DayMark: A day of a calendar carrying a dot.
Decor: A styled range of an editor’s text (UTF-16 offsets).
Diff: diff: a unified or split diff.
Editing: The prefs row being edited with the keyboard.
Editor: editor: a multi-line text field whose text the program owns.
Effort: effort: a thinking-effort glyph.
Elapsed: elapsed: a live timer Tern clocks.
Empty: empty: an empty state: icon, title, a line and its children (the actions). Its title is text, not a tooltip.
Field: field: a labelled form row around its control(s): label, hint, error or warning.
Frame: A frame of a stacktrace.
FrameCode: A source excerpt of a stacktrace frame.
Hunk: A diff hunk given directly.
IconAction: An icon button of a message or an attachment (actions).
IconNode: icon: a named icon.
Image: image: an image from a blob.
Input: input: a single-line text field.
Item: item: one list row.
Json: json: a JSON value Tern draws as a foldable tree.
Kbd: kbd: keycaps.
Kv: kv: an aligned key/value list.
KvItem: One kv pair.
List: list: a selectable list of items.
Math: math: TeX math.
Md: md: Markdown.
Media: media: a file Tern loads by path and shows in its media viewer.
Menu: menu: a button that opens a menu of commands.
MenuItem: A menu row. Choosing it sends action with id as act (and the new checked of a check or radio row).
Menubar: menubar: a strip of menus.
MenubarMenu: A menu of a menubar.
Message: message: one chat message: author, body (its children), reactions and actions.
Meter: meter: a value as a bar, ring or grid.
MeterCell: A table cell drawn as a meter.
MeterMark: A tick on a meter.
Nav: nav: navigation links, some opening a menu or panel of sub-items. A pick sends select with the item.
NavItem: An item of a nav.
NavSubItem: A sub-item of a nav item.
Node: A node: a kind, props, children and handlers. It has no id until it is reconciled. Every kind’s builder converts into it.
Otp: otp: a one-time code, one cell per character.
Overlay: overlay: a floating panel or sheet in layer.
Pager: pager: pagination. A page click sends change with the page; the more row sends action more.
Part: A stacked part of a meter or meter cell.
Phase: A checklist phase.
Picker: picker: a searchable picker sheet (its child is the preview).
PickerAction: A picker action bar button.
PickerColumn: A picker fact column.
PickerItem: A picker catalog item.
PickerTab: A picker tab.
Point: One bar of a bars or spark chart, one point of a one-series line or area chart, or one segment of a donut.
Prefs: prefs: a settings page or sheet.
PrefsPage: A prefs nav page.
PrefsRow: A prefs row.
PrefsSection: A prefs section.
Preset: A preset of a week calendar.
Progress: progress: a progress bar (indeterminate without a value).
Question: A question of a questions node.
QuestionChoice: A choice of a question.
Questions: questions: a questionnaire.
Rate: rate: a number easing between updates.
Reaction: A reaction chip of a message.
Retry: An agent’s retry countdown.
Row: row: a horizontal flex row.
Rows: rows: pre-rendered ANSI rows (the migration fallback).
Rule: rule: a divider hairline.
Scope: A picker scope.
Scroll: scroll: a scrolling container, optionally pinned to its end. Scrolling is the viewer’s; it sends nothing.
Section: section: a lighter disclosure group.
Seg: seg: a status bar segment.
Select: select: a value picked from a menu, as a field or a quiet trigger, optionally searchable.
SelectOption: An option of a select.
Series: One line of a multi-series line or area chart.
Shimmer: shimmer: a shimmering label.
ShimmerPalette: A shimmer’s sweep colors, as span tokens.
Skeleton: skeleton: placeholder shapes while content loads.
Slider: slider: a value, or a range, dragged along a track.
Sort: The column a table’s rows are sorted by.
Source: A source chip of a trace or one of its lines.
Spacer: spacer: vertical space.
Span: One styled run of text: {t, s?, fx?, href?, cite?}.
SparkCell: A table cell drawn as a sparkline.
Spinner: spinner: an activity indicator.
Split: split: panes (its children) the user resizes by dragging the handles between them.
StackError: The error of a stacktrace.
Stacktrace: stacktrace: an error and its stack frames.
StatItem: One tile of a stats well.
Stats: stats: a well of stat tiles.
StatusBar: status: a status bar strip of segs.
Strip: A picker’s chip strip.
StripItem: A switch chip of a picker strip.
Suggestion: A prompt of a suggestions node.
Suggestions: suggestions: suggested prompts. A click sends activate with the item’s id (else its text).
Switch: switch: an on/off setting. A click flips it at once and sends change with the new state as value.
Tab: A tab of a tabs strip.
Table: table: a table with priority-hidden columns and meter cells.
TableRow: A table row.
Tabs: tabs: a tab strip.
TextCell: A table cell: text with a status dot or icon before it.
TextNode: text: styled spans, wrapped or truncated.
Thresholds: Fill levels that tint a meter.
Toast: toast: a transient notice.
Tool: tool: one coding-agent tool call.
ToolButton: A hover button on a tool.
Trace: trace: an agent’s steps, each opening in place.
TraceLine: A step of a trace. A child keyed by its id is its content.
Tree: tree: a disclosure tree.
TreeItem: A tree item.
View: A surface’s view: the root of each region (main, dock, layer). A region left out is not shown.

Enums§

AgentStatus: The state of an agent.
Align: Cross-axis alignment of a row’s or column’s children.
Anchor: Where an overlay floats.
Approved: A tool’s resolved approval, shown as a head chip.
AskAlways: The Always button of a tool’s approval card.
AttachmentState: An attachment’s upload state.
AttachmentVariant: An attachment’s look.
AvatarSize: An avatar’s size.
AvatarVariant: An avatar’s shape.
Basis: A flex basis.
BreadcrumbVariant: A breadcrumb’s look.
ButtonSize: A button’s height.
ButtonVariant: A button’s chrome.
ButtonsVariant: A buttons group’s look.
CalendarVariant: A calendar’s look.
CardVariant: A card variant.
CarouselVariant: A carousel’s look.
Cell: A table cell: spans, a meter, decorated text, a badge, a button or a sparkline.
ChartKind: Which chart.
ChecklistMode: A checklist’s presentation.
ChoiceStyle: How a prefs choice draws.
CiteStyle: How cited spans of a text look.
ColumnFormat: A picker column’s format.
Control: A prefs row’s control, by k.
DateValue: A calendar’s or date’s selection: a YYYY-MM-DD day, or a range whose end may still be open.
DiffMode: How a diff lays out.
Disabled: Whether something is disabled: true, or a reason shown as its tooltip.
EffortLevel: A thinking-effort rung.
ElapsedFormat: How an elapsed timer reads.
EmptyVariant: An empty state’s look.
Extent: A size bound: "<n>ch", "<n>lines" or a fraction of the parent.
FieldVariant: A field’s layout.
Fx: A span effect.
Gap: Space between children, or a spacer’s height.
Height: A height in pixels or in the surface’s cells and lines.
Icon: A named icon from Tern’s icon set.
InputType: The type of an el input.
InputVariant: An input’s or editor’s look.
ItemStatus: A checklist item’s state.
Justify: Main-axis distribution of a row’s or column’s children.
KvLayout: How a kv lays out.
Mark: A transient selection mark drawn over a node.
Measure: A text’s line-length cap.
MenuAlign: Which edge of its trigger a menu lines up with.
MenuEntry: An entry of a menu, of a menubar menu or of actions.menu.
MenuVariant: A menu’s look.
MenubarVariant: A menubar’s look.
MessageSide: Which side a message sits on.
MessageVariant: A message’s look.
MeterStyle: A meter’s shape.
NavVariant: A nav’s look.
NodeKey: A node key: a string, or an integer named in decimal.
Noun: What a scroll’s counts name: one word made plural with an s, or both forms.
OrderEntry: A picker order entry: an item id or a group header.
OtherAnswer: A question’s free-text answer: on, or on with a placeholder.
OtpMask: How an otp hides what was typed.
OtpState: An otp’s state.
OtpVariant: An otp’s look.
OverlaySide: The edge an overlay docks to as a sheet or drawer.
OverlaySize: An overlay’s size.
OverlayVariant: How a docked overlay sits at its edge.
PagerVariant: A pager’s look.
PaneMin: The minimum size of a split’s panes along the split.
PickerFocus: Which part of a picker the keys drive.
PickerLayout: A picker’s row template.
PickerPreview: Where a picker’s preview sits.
PickerSize: A picker sheet’s size.
PickerState: A picker’s state.
Preview: Lines a collapsed card shows.
QuestionAnswer: An answer of a questions node: a choice’s value or text, or the values of a multi question.
QuestionsVariant: A questions’s look.
Reveal: When a message’s action buttons show.
RuleVariant: A rule’s look.
ScrollBar: When a scroll’s thumb shows.
ScrollVariant: A scroll’s look.
SelectVariant: A select’s look.
ShimmerMode: How a shimmer sweeps.
Side: Which group of a status strip a segment sits in.
Size: Small, medium or large.
SkeletonShape: What a skeleton stands for.
SkeletonVariant: A skeleton’s look.
SliderFormat: How a slider’s value reads.
SliderValue: A slider’s value: one, or a range drawn with two thumbs.
SliderVariant: A slider’s look.
Slot: What a slot prop (card head/end, section head, overlay end/foot) holds: text, or a node drawn there.
SortDir: A sort direction.
SpinnerStyle: A spinner’s indicator.
SplitDir: How a split lays out its panes.
SplitVariant: A split’s look.
StacktraceVariant: A stacktrace’s look.
Status: The state of a card or tool.
Stick: Where a scroll keeps to while its content grows.
SuggestionsVariant: A suggestions’s look.
SwitchVariant: A switch’s look.
TableVariant: How a multi table’s picks and sort look.
TabsVariant: A tabs strip’s look.
TargetKind: How a tool’s string target is drawn.
Text: Text given as a plain string or as styled spans.
TextAlign: Text alignment in a table column.
TextFlag: Text, or a bare flag: a field’s error/warning (true sets the state without a line), a chart’s last (true prints the value, false hides it).
Ticks: A slider’s tick marks.
Token: A span style token (several join with spaces; palette tokens through Other).
Tone: The semantic color of a node’s chrome.
ToolConfirm: The approval look of a tool whose status is ask.
ToolFrame: A tool’s frame.
ToolPreview: The clamp of a collapsed tool body.
TraceVariant: A trace’s look.
Truncate: Where overflowing text is cut.
WeekStart: The first column of a month grid.
Wrap: How text wraps.

Functions§

agent: A subagent row.
ansi: Terminal output.
attachment: An attached file named name.
avatar: An avatar of text.
avatars: A stack of avatars.
badge: A pill chip.
breadcrumb: A trail of places.
button: A push button labeled text.
buttons: A group of buttons.
calendar: A calendar.
card: A card.
carousel: Slides shown one at a time.
chart: A chart.
checklist: A todo list.
code: Highlighted code.
col: A vertical stack.
date: A date field.
diff: A diff.
editor: A multi-line text field.
effort: A thinking-effort glyph.
elapsed: A live timer.
empty: An empty state titled title.
field: A form row labeled label.
icon: A named icon.
image: An image.
input: A single-line text field.
item: A list row.
json: A JSON value Tern draws natively as an interactive tree. Check the hello reply’s kinds for json and fall back to tree otherwise.
kbd: Keycaps (["cmd", "K"]).
kv: A key/value list.
list: A selectable list.
math: TeX math.
md: Markdown.
media: A file at path (absolute, or relative to the pane’s working directory) in Tern’s media viewer.
menu: A menu button.
menubar: A strip of menus.
message: A chat message.
meter: A meter.
nav: Navigation links.
node: A node of any kind (the untyped escape hatch).
otp: A one-time code of length cells.
overlay: A floating panel.
pager: Pagination.
picker: A picker sheet.
prefs: A settings page.
progress: A progress bar.
questions: A questionnaire.
rate: An easing number.
row: A horizontal flex row.
rows: Pre-rendered rows.
rule: A divider.
scroll: A scrolling container.
section: A section.
seg: A status bar segment.
select: A value picked from a menu.
shimmer: A shimmering label.
skeleton: Placeholder shapes.
slider: A slider.
spacer: Vertical space.
span: A styled span of text.
spinner: An activity indicator.
split: Resizable panes.
stacktrace: An error and its stack.
stats: A well of stat tiles.
status: A status bar strip.
suggestions: Suggested prompts.
switch: An on/off switch labeled label.
table: A table.
tabs: A tab strip.
text: Text, plain or styled.
toast: A transient notice.
tool: A tool call.
trace: An agent’s steps.
tree: A disclosure tree.

Type Aliases§

CardStatus: The status chip of a card (the same values as tools).

Module ui

Module ui Copy item path

§Example

Modules§

Structs§

Enums§

Functions§

Type Aliases§

Module ui