Views and components

A view is a tree of components. Every component has a type and can have a tooltip. Send a whole tree each time; Nook keeps what the user typed or toggled until you send a different value.

Layout rules

column stacks its children downward and row places them left to right. gap sets the space between them (default 6).
A spacer with no size pushes everything after it to the far end. [title, spacer, button] puts the button on the right.
align (start, center, end) aligns children on the other axis. On a column, justify places the whole column at the top, middle or bottom of the space.
Add "scroll": true to a column on a page when it may be taller than the space.

json

{ "type": "tile", "view":
  { "type": "row", "align": "center", "gap": 10, "children": [
    { "type": "icon", "icon": "cloud-sun", "size": 28, "color": "accent" },
    { "type": "column", "gap": 0, "children": [
      { "type": "text", "text": "Tbilisi", "size": "small", "color": "dim" },
      { "type": "text", "text": "21°  Sunny", "size": "title" } ] } ] } }

Components

Layout

type	Fields	Notes
`column`	`children gap align justify scroll`	Top to bottom.
`row`	`children gap align`	Left to right.
`grid`	`columns children gap`	Equal-width cells, good for dashboards.
`card`	`children padding gap`	A glass panel that groups its children.
`spacer`	`size?`	A fixed gap, or with no size, pushes what follows to the end.
`divider`		A thin line.

Content

type	Fields	Notes
`text`	`text size color bold wrap mono`	`size` is `small body title big huge`. Long text ends in "…" unless `wrap`.
`icon`	`icon size color fill`	Default size 18.
`image`	`path` or `base64`, `width height rounding`	PNG, JPG or BMP. Reloaded when the file changes; scaled down past 1024 px.
`progress`	`value color width`	A thin bar. `value` is 0 to 1.
`ring`	`value label size color`	A circular progress ring with a short label inside.
`sparkline`	`values max color width height`	An area chart; the newest value is on the right.
`list`	`items: [{id title subtitle icon trailing selected}]`	Clickable rows. A click sends an event with the item's `id`.
`canvas`	`height width id shapes`	Free drawing, see Canvas.

Controls

Each control sends event messages carrying its id.

type	Fields	Sends
`button`	`id label icon primary width`	`click`. With no label it's a round icon button. `width: 0` fills the row.
`toggle`	`id value label`	`change` with `true` or `false`.
`slider`	`id value min max step width`	`change` while dragging and `commit` when released.
`input`	`id value hint width live`	`submit` on Enter. With `live`, also `change` on every edit.
`chips`	`id options selected`	`change` with `{"index", "label"}`.

Controls update right away. A toggle flips and an input keeps what the user typed before your program answers. If you later send a different value for the same id, your value replaces the user's. Keep ids stable across redraws.

Colors

Theme names follow the user's light or dark theme and accent color: text, dim, faint, accent, on_accent. Fixed colors: red orange yellow green teal blue purple pink white black transparent. You can also use #RGB, #RRGGBB or #RRGGBBAA. Prefer the theme names so your plugin looks right in both themes.

Icons

Use any of the 1,530 Phosphor names, such as "cloud-sun", "cloud_sun" or "CloudSun". "fill": true draws the filled style. An unknown name shows a question mark.