Quack Lab UI31 components
AppBarLayout

The strip across the top of every screen: the app's name, the input a person came for, and one line of context on the right.

PageLayout

The whole screen: strips across the top, the main area that scrolls, and the status bar pinned to the bottom.

PanelLayout

A bordered box on panel with a one-line head, holding one thing: a job, a worker, a form, a log.

StatusBarLayout

A fixed strip along the bottom of the screen with permanent slots for the version, what is running, the latest outcome, and the connection.

ToolbarLayout

A strip under the nav holding the controls that scope everything below it: a time window, a bucket size, a search, a toggle.

ButtonActions

A bordered mono label that does one thing when clicked.

SegmentedActions

A row of joined buttons that picks one of a few views or modes.

CheckInputs

A square checkbox with its label to the right: a line frame on bg, an accent square inside when checked, an accent dash when indeterminate.

ComboboxInputs

A text input with a list of matches under it, for picking one thing out of more than a select can hold: an item out of thousands, a host, a character.

EditableInputs

Text that is always editable where it stands, saved when the person moves on.

InputInputs

A text, number or select field with a mono value on the page ground.

SliderInputs

A flat bar with a square handle, filled in accent up to the value, with the value in a fixed-width cell to the right.

EmptyStatus

One row-high line standing where rows will be: nothing there yet, still loading, or the load failed.

ProgressStatus

A thin flat bar for how far along running work is, or how full something is.

StateStatus

A fixed-width tinted pill naming what something is doing right now.

TagStatus

A small outlined mono chip for a fixed property of a thing: who can reach it, what protocol it speaks.

FacetsData

A grid of filter lists, one per dimension of the data, each with its own search and a count or total per value.

FieldsData

A two-column grid of key and value rows describing one thing: a job, a worker, a device.

ItemData

A thing with a picture: a square image, its name, and a mono detail line.

ListData

A grouped list of items, each with a title, a mono subline and trailing tags.

LogData

A mono pane of log records, newest last, one record per line with time, level and message.

NumberData

Mono, tabular figures for every count, size, rate and time, and a stat block for the few numbers a screen leads with.

TableData

A dense, fixed-layout table of things with their state, numbers and row actions.

TilesData

A grid of one-line link tiles, each naming a thing and a short trailing fact, for directories and health boards.

TreeData

A table whose rows nest: places holding containers holding things, each level indented under its parent, with columns that still line up.

BarChartCharts

Columns compared against one baseline: amounts per day, per character, per category.

HeatmapCharts

A grid of cells shaded by magnitude on the seq ramp: jobs per hour of the week, requests per service per day, errors per host.

LineChartCharts

One or more values over time on a shared axis: net worth, price, queue depth.

PieChartCharts

Shares of one whole, drawn as a ring with the total in the middle and a legend listing every slice with its amount and percentage.

StackedChartCharts

Parts of a total over time, stacked from the bottom, with the total drawn as a line on top: net worth split into cash, orders and assets, disk use split by folder, traffic split by service.