Widgets and keys
Every core widget, generated from the schema the compiler, the language server and the LAYR Skill read.
Layout
Container
A box: size, paint, border, corners, shadow and padding around one object.
Row
Lays objects out left to right.
Column
Lays objects out top to bottom.
Stack
Layers objects on top of each other; later objects paint above earlier ones (or use Order).
Position
Offsets an object inside a Stack by x/y, pins it to edges, or keeps it in view with sticky: true.
Order
Sets an object's layer in a Stack, Mask or Subtract.
Mid
Fills its parent and centres its object.
Align
Fills its parent and places its object at an alignment.
Expand
Makes its object fill the remaining space along the parent's direction.
Gap
Fixed empty space along the parent's direction: Gap(20).
Wrap
Lays objects out in rows that wrap onto new lines.
Grid
A grid with a fixed column count or columns that fit a minimum item width.
Scroll
Scrolls its object along an axis.
Aspect
Keeps its object at an aspect ratio.
SafeArea
Pads its object away from device notches and system bars.
Adapt
Shows the first candidate layout that fits the available space.
Scaffold
The page's viewport box: full height, safe areas, scroll policy and the overflow boundary.
Content
Text
Text.
Span
Inline text runs inside Text: Text(Span(.config(weight: bold) 'Bold'), ' and plain').
Image
An image.
Svg
An SVG from a URL.
Icon
An icon by name from a registered icon set: register SVG strings once with icons({ name: '<svg…>' }) from @dynshift/layr/react.
Video
A video with native controls and captions.
Effects
Blur
Blurs what is behind the object (blurOn: background, frosted glass) or the object's own content (blurOn: object), uniformly or progressively: a progressive blur rises smoothly toward one edge, the way content dissolves under a header or at the end of a list.
Mask
Masks layers with the lowest Order layer (a paint: colour, gradient or image).
Subtract
Cuts the upper layer's shape out of the base layer.
Clip
Clips its object to a shape.
Filter
Colour filters and blend modes for its object.
Interact
Button
An accessible button.
Link
Navigates to a page or URL.
Input
A labelled text input.
Toggle
A checkbox or switch.
Select
A labelled choice from options.
Slider
A labelled range slider.
Form
Groups inputs; .fnc runs on submit.
Overlay
Content above the page (dialogs, popovers, sheets) with focus management.
Focus
Focus behaviour for its object: autofocus, focus ring, trap.