Reads the color bindings of an action (its variables, e.g.
ShowToastAction.variables and ConfirmAction.variables): a color
field's name mapped to a variable path or formula that gives a color,
such as ${pal.surface} or ${= alpha(pal.gold, 0.5)}.
Shows ShowToastAction messages: a toast near the bottom or top of the
screen that fades in, stays for the action's duration and fades out. A
new toast replaces the one on screen.
Paints a circular indicator as an arc: a track across sweepAngle
degrees from startAngle (clockwise from 3 o'clock) and, over it, the
value fraction of that arc. Without a value the whole arc is color.
The stroke sits on the bounds like CircularProgressIndicator's:
strokeAlign -1 inside, 0 centered on the edge, 1 outside.
Paints an arc progress bar: a track, colored zone bands just outside it,
the progress arc, tick marks and an optional needle. progress is the
value as a fraction of the max; over 1 fills the arc and pushes the needle
a little past its end.
The API validates HTTPS URL syntax, not DNS or redirects: these are handled
by the platform player and OS. A typed host policy for untrusted content is
owned by GenUI, not by this SDK transformer.
Adapter permits tests to exercise playback without a platform or network.
An implementation that uses Firebase auth to authenticate users and manage
authentication state. Handles anonymous authentication, token verification,
and cloud storage access checks.
Paints child only while its front faces the viewer, judged by its
whole transform to the screen, so a face turned away by its own motion
or by any rotating parent disappears (CSS backface-visibility: hidden).
A hidden face takes no taps either.
The screen width that picks responsive variants below it, set where a
canvas is not the screen: a dialog, sheet or popover is narrower than the
screen it is shown on, but its layouts follow the screen's breakpoint
(a 560-wide form on a desktop shows its desktop layout).
The width the canvas above is laid out at, which picks the variant a
responsive VarianceNode shows (see VarianceNode.variantForWidth), the
same width the editor's design canvas has.
The x and y bounds of a line chart's plot, in data units. Date x values
are epoch milliseconds of their wall-clock time (see
LineChartGeometry.parseX).
Allows access to cloud storage. Implementations of this class should be
able to store and retrieve data from the cloud storage in secure manner.
This is mainly used to store data on cloud via actions for the SDK.
Reads and writes documents for CloudDataActions and CloudBatchActions
on a FirestoreCloudDatabase, applying its DataRules: owner stamps on
writes, owner filters on reads and the collection schemas.
Turns field values written in the editor into what Firestore stores,
following a collection's CollectionSchema. Pure, so the same rules hold
for every write and are testable without Firestore.
A small regex-based syntax highlighter for the languages of
SyntaxLanguage: keywords, strings (template, backtick and triple-quoted
ones included), comments, numbers, function calls, types and built-ins,
properties and keys, punctuation, and for shells their $ prompts,
commands, flags and variables.
What a Draggable carries between a DragSourceBox and a
DropTargetBox. A draggable's data is fixed when it builds but the
payload is made when the drag starts, so this holder is filled in then.
Displays an already-published layout, forwarding native paywall actions
to the scoped controller. A product change rebuilds
CodelesslyWidget with fresh scoped data (including localized store prices).
Placement-only widget: resolves and presents the published placement via
the SDK, calls onResult once, and never exposes a raw unverified CTA.
The widget owns its nested route and closes it when removed.
A screen of a Codelessly app and the parameters it was opened with, as a
link: {canvasId}?key=value, or the screen's own URL path when it has one
(guide/bat-star for a screen at guide/:id, see
Codelessly.pathOf). Codelessly.route holds the one shown; a
CodelesslyRouter keeps the browser's address on it.
Reports the screen stack to the browser: a screen the app opens adds a
history entry, and going back in the app goes back in the browser, so the
browser's back and forward buttons and the app's own agree.
The screens of a Codelessly app as pages of a Router, built on
NavigationUtils, so the app navigates the way a website does: every screen
has a URL, the browser's back and forward buttons move through the screens
the app opened, and a reload or a shared link opens the same screen with
the same back stack.
The stack of screens of a Codelessly app, as a NavigationUtils router
delegate. Each screen (layout) of the published app is a route: at its
URL path when it has one (/guide/:id), at its canvas id otherwise
(/<canvasId>), and the entry screen at /. The route's query and path
parameters are the screen's parameters (${route.name}).
Helpers for computed variables: variables whose value is a ${= ...}
formula over other variables (see VariableData.isComputed), e.g.
visible = ${= sortBy(filter(records, r => r.crate == crateId), sortBy)}.
Draws child in the app's overlay, exactly where it is laid out: above
every other node, not clipped by its ancestors and tappable outside
them. The layout keeps an empty box of the child's size, so nothing
around it moves. Used for nodes marked floating (a type-ahead's menu
under its field). Without an Overlay above it, the child is drawn in
place.
Ticks on every frame while anything listens, so widgets whose formulas
call nowMs() rebuild each frame: a meter decaying from its last hit
(${= hit * exp(-7 * (nowMs() - at) / 1000)}), a progress bar, a timer
to the millisecond. Nothing runs while nothing listens, and a pinned
FormulaClock (an editor or test) doesn't tick.
Lays out the children of a freeform container (frame, stack, freeform
placeholder) the way the editor's solver does, at whatever size the
container gets at runtime.
Registers the render box of one node instance with the nearest
NodeGeometryScope. Lays out and paints exactly like its child. Without
a scope above it, it builds child alone.
Paints a soft, blurred glow of color behind another thumb shape, like
a lit knob. The glow is the thumb's outline grown by spread and blurred
by blur (a sigma); it does not change the thumb's size.
Places a default linear gradient (left edge to right edge) between the
handles begin and end, alignments in the box, the way design tools
do: the gradient is laid out in the box's normalized space and stretched
with it, so its bands stay perpendicular to the handles there. Begin
(-1, -1) and end (1, 1) then run corner to corner on any box, with the
other diagonal on the middle band. On a square box this is Flutter's
LinearGradient(begin: begin, end: end).
A slider track that can fill from the thumb to the end, fade its active
part in from activeStartOpacity and draw a thin marker at
markerFraction of its length.
Draws the inline code of a text: the segments of its resolved text
wrapped in backticks take an InlineCodeStyle and lose their backticks
(see TextNode.inlineCode).
Tracks the pointer and focus over a node and shows its interaction
states: puts the overrides of every active state (in
InteractionState order, the later winning) in a PropertyOverrideScope
over builder. A disabled node ignores the pointer, so its actions do
not run, and the cursor over it is the basic one.
How a list keys its items and, for a list that layers them, the order it
paints them in: from its itemKey and itemZIndex bindings (see
ListViewNode.itemKeyVariable and ListViewNode.itemZIndexVariable),
evaluated for each item, and ListViewProperties.reversePaintOrder.
Allows access to local storage on the device. Implementations of this class
should be able to store and retrieve data from the device's local storage.
This is mainly used to store data via actions for the SDK.
Runs a node's LoopAnimation on child over and over: it scales and
fades child for LoopAnimationType.pulse, fades it for
LoopAnimationType.fade, scales it for LoopAnimationType.scale,
rotates it for LoopAnimationType.spin, about its center, hops it for
LoopAnimationType.bob and rocks it for LoopAnimationType.sway.
A TextEditingController that shows its text as live Markdown while
markdown is set: **bold** bold, _italic_ italic, `code` in
the code font, list markers and @mentions colored. Every character stays
(the markers are dimmed, see MarkdownStyle.showMarkers), so the cursor
and selection work as in plain text.
A LayoutBuilder that can be measured: it reports intrinsic sizes and a
dry layout instead of throwing "LayoutBuilder does not support returning
intrinsic dimensions".
Where each node is shown: its id mapped to the build contexts of the
widgets that show it, in the order they appeared, so an action can find
a node on screen (see ScrollToAction).
Makes child draggable as drag describes: it follows the pointer as a
transform over its layout, tilts by DragModel.rotateFactor, and on
release springs back, stays, or flies off and calls onDismissed.
Makes child a value control that moves along track: it is drawn at
value's place on the track, and dragging it (or, with
DragTrackModel.jumpOnTap, tapping along the track) reports new values
through onChanged. Double tap resets to DragTrackModel.defaultValue;
the mouse wheel steps the value.
Shared elements: a node with a BaseNode.heroTag is wrapped in a
Flutter Hero, so it flies between two screens that both show a node
with that tag while the navigation's page transition plays.
Carries what a node reads from above it to a copy of it built elsewhere,
such as the flying copy of a shared element in the navigator's overlay:
the Codelessly instance, context and controller, the list items around
it, its parent's size, its state and interaction-state overrides, the
canvas's sizing, skeleton and feedback scopes, and the themes.
Draws a PathNode: its SVG path scaled from its view box to the node's
size, filled with its solid fills and outlined with its strokes (weight,
cap, dashes), trimmed to PathNode.trimStart..PathNode.trimEnd of its
length. pathData, trimStart and trimEnd can be bound; a bound trim
eases to new values over the node's BaseNode.transitionMs.
Non-purchasing fallback: price and purchase controls stay absent until the
published layout and store metadata are available. Restore still requires
server verification through the supplied PurchaseService.
Gives the nodes below it the PropertyOverrides of the states shown
around them: a property-override variant, or the interaction states of
an ancestor (or of the node itself). Nested scopes layer: the inner one
wins for the same node and property.
The verification callback must validate store purchase tokens on a trusted server.
Only a verified purchase can grant an entitlement or complete a paywall.
Loads the documents the fields (reference fields of the list's
collection, collectionPath) of docs point to, once each, and builds
builder with what has loaded so far; it rebuilds as more arrive.
Rotates a linear gradient by radians about the box center, like
GradientRotation, after squeezing one run of its stops into period
logical pixels along its axis. With TileMode.repeated the stops then
repeat every period pixels whatever the box size, e.g. even stripes.
A rounded rectangle slider thumb, like a fader cap, with an optional
stroke drawn inside its edge. size is in the slider's own (horizontal)
layout: its width runs along the track.
Gives the screens below it route params, as ${route.<name>} reads
them, where no router opened the screen: a design canvas showing a
screen at changelog/:version with sample params. A screen a
Codelessly router shows reads its own location's params instead.
A Wrap whose children are each as thick across direction as the
thickest child of their run: equal-height tiles in every row of a
feature grid, like CSS flex-wrap with align-items: stretch.
Lays child out at designSize and scales it by fit into the space it
gets, like a FittedBox that fills that space: a frame's content with
FrameNode.contentFit. On an axis it hugs (or that is unbounded) it
takes the design size.
A class that holds the scoped values for a widget/context. This is helpful
access context bound data in a widget tree. This makes it so that you don't
have to pass context around to access data and end up using context
across async gaps. This collects all the data you need in one place
before-hand so that you can access it later.
The content of a scroll view whose main axis must be at least
viewportExtent long. The child is laid out once with the scroll view's
unbounded main axis to find its natural length. When that is shorter than
the viewport it is laid out again with exactly the viewport's length, so:
Runs reactions (TriggerType.scrollEnd) when the node's own scrollable
comes within threshold of its end, or its content doesn't fill it, as
infinite scroll needs: the actions load the next page.
Device-local retry journal. Host apps handling sensitive receipt data should
replace with an encrypted PurchaseRetryQueue appropriate to their threat model.
Keeps how many items a "Show more" list has revealed, across rebuilds of
its query results, and builds builder with it. Starts at pageSize
and grows by it each time the button is pressed.
Paints child as a loading skeleton while enabled: every painted
pixel turns a neutral grey with a light band sweeping across it. When
not enabled, child paints as it is; the widget tree stays the same
either way, so switching keeps the state below (a loading list keeps
its query).
Tells the nodes below it that they are shown as a loading skeleton, so
a cloud list that is still loading builds a few sample items to shimmer
instead of nothing.
Rotates a linear gradient by radians about the box center and stretches
it to span the whole box along its new direction: the box's extent along
the axis, w·|cos| + h·|sin|, as a CSS angled gradient does.
Text-to-speech for SpeakActions, and the live state the speech
variable reads: speaking, text (what is being said, '' when quiet)
and available (whether this device has a voice).
The items of a ListLayout.stack list: layered in the list's padded box,
each placed at its item node's bound x/y, evaluated for that item, or
at the item node's design offset when not bound.
A Widget that will fit its child to the size of the BaseNode, it will
not take into account the node's BaseNode.horizontalFit and
BaseNode.verticalFit. It will strictly use the
BaseNode.middleBoxLocal as the size of the node.
Reports swipes on child as TriggerType.swipeLeft, swipeRight,
swipeUp or swipeDown. A drag counts as a swipe when it travels
minDistance or is flung faster than minVelocity. A mouse wheel
scroll counts too: scrolling down swipes up, the way content moves.
Makes the empty parts of the layout below let taps through to what is
behind it: the parts where neither a node's fills, strokes or content
paint nor a reactive node is (a transparent canvas, an empty frame). Set
by CodelesslyDialogWidget, so a tap beside a full-screen dialog's
layout reaches the barrier and closes a dismissible dialog.
The edits a rich text composer makes at a text field's cursor: the
operations of an EditTextAction, list continuation on Enter, and what
the field's triggers read about the cursor.
The text fields on screen by node id, so an EditTextAction finds the
field it names. Fields register while they are mounted and running (not
on a design canvas).
Turns everything typed or pasted into a text field into capitals, for a
field with TextCapitalizationC.characters: a booking reference typed
mx4821 reads MX4821. The selection stays where it was (upper-casing
can change a text's length, e.g. ß to SS; the caret then goes to the
end).
Reports how much of child is visible: inside the screen and inside
every Scrollable around it (a scrolling page, a scrollable frame, a
list or a page view).
Sizes the item child of a wrapping list: the item keeps its own size
on both axes. An expanded or flexible item, which has nothing to fill in
a run, takes its design size; with itemExtent the item takes that
extent along the wrap direction.
Sizes a wrapping list node (see ListViewProperties.wrap) and builds its
content. The flag given to builder says whether the runs must scroll
along the cross axis: true when the box has a set extent there.
Who can read and write a cloud database collection. Set per collection in
the editor's Data panel, stored in data_rules/{projectId}, and enforced
by Firestore security rules; the SDK stamps and filters by
DataRules.ownerField so its writes and queries pass them.
Names of the Material icons that point a reading direction (arrows,
chevrons, undo, send, ...): Flutter mirrors them in a right-to-left
layout, and so does an icon drawn from its SVG.
The key under which a layout's published variables hold the project's
app variables, shared by every screen of the app.
Not __app__: Firestore rejects ids that start and end with __.
The key under which a layout's published variables hold the variables of
its editor page, shared by every screen on that page. Not __page__:
Firestore rejects field names that start and end with __.
Widths at which the screen variable's breakpoint changes: below 600 is
mobile, below 1024 tablet, and anything wider desktop. The rule itself is
ScreenBreakpoint.forWidth, which responsive variances use too.
The latest version of each Material Icon by name, as its SVG URL on
fonts.gstatic.com needs it. Used to show an icon chosen by name at
runtime (an icon bound to a variable or formula).
The height an autoScale canvas takes when scaled to width: its design
height times the scale BoxFit.fitWidth applies, after the canvas's max
width cap.
node's arc properties with the values its variables bind (see
ProgressBarProperties.bindableKeys): angles, thickness, max and colors,
so one arc per item of a data list can make up a segmented ring.
The text a design canvas shows as node's label: the variable or formula
its label is bound to, or its own label text. Both can hold ${...}
paths and formulas, which the canvas shows with their default values (see
VariablePreview), as the runtime shows the bound value.
Constructs a Query on top of given Query reference using given whereFilters
and orderByOperations, all of it run by Firestore. Use
resolveCloudQuery and CloudQuery.plan for queries that may need a
composite index.
A box with borderRadius and boxShadow around child. A shadow with a
spread on a rounded box is painted by SpreadShadowPainter, so its
corners grow with it as in CSS and design tools; BoxDecoration keeps the
box's radius, which turns a spread glow around a dot into a square.
The colour a button of type has when its buttonColor is unset (null):
no fill for a text button, as Flutter's TextButton; black for every other
type, which is what designs saved before buttonColor was nullable meant by
leaving it out. An outlined button is never filled; black is its outline
and label colour.
The transform of a one-shot EffectAnimationType at progress t
(0 to 1) and strength amount, as offsets in logical pixels, scales,
a rotation in radians and an opacity.
The size node takes on each axis it is sized on by a fraction of its
parent (see fractionalSizeOf), given the parentWidth and
parentHeight the parent gives it; null on an axis without a fraction or
whose parent size is unbounded. The node's margins are taken off the
parent's size first, as the node's box sits inside them.
The fractions of its parent's width and height node takes, with its
widthFactor and heightFactor bindings read with scopedValues (a
binding wins over the node's own factor). Null on an axis that isn't
sized by a fraction. Negative fractions count as 0.
If the parent is wrapping on an axis, one of its siblings is going to be
laid out without Positioned or Align, marking the child as the best
candidate for the Stack to figure out its own size.
The centre of a radial or angular paint: its
PaintModel.gradientCenterX and PaintModel.gradientCenterY as an
alignment in the box, the centre when unset.
Whether node is sized as a fraction of its parent on an axis: it has a
BaseNode.widthFactor or BaseNode.heightFactor, or binds one through
variables['widthFactor'] / variables['heightFactor'].
base showing the Material icon named name instead, for an icon bound
to data. name is a Flutter Icons name such as kitchen or
kitchen_outlined: an _outlined, _rounded or _sharp suffix picks
the style. The icon is drawn from its SVG by name, so no codepoint is
needed. Returns base for an empty or malformed name.
How long an implicit transition of ms milliseconds (a transitionMs
fill or opacity, a drawScale change) runs where it builds: zero under a
disabled TickerMode (the editor's design canvas and its captures),
where the transition could never tick and would hold the old value, so
it jumps to the new one instead. Unchanged where tickers run.
The strings of node that can hold inline ${...} variable paths and
formulas: a text's characters, every string in a widget's properties
(a button's label, a field's hint, a tab's label, ...) and a queryable
node's collection path, where filters and order-by filters, so a list
re-queries when a value its query reads changes. Reactions are left
out: their actions read values when they run, not when the node builds.
The widget of node listens to every path these read, so it rebuilds when
one of them changes.
This fixes an issue with Flutter's image aligning. Flutter can't align
image with given alignment when the widget and image both have same size.
This is a workaround for that. It uses a stack in that case.
The label a "Key Down" trigger's ${result.key} reads for key: the
character of a character key (a, 1, /), else the key's name
without spaces (ArrowLeft, Delete, Escape, Enter, Space).
Whether a Key Down trigger is for key pressed with the modifiers
keyboard holds: its TriggerModel.key combination matches (see
KeyCombo.matches), or it has no key and listens for every key. A key
that doesn't read as a combination matches nothing.
Whether list node builds all its items up front, as a plain Flex or a
Wrap rather than a viewport: it wraps (see listWraps), or it doesn't
scroll, has a known item count (bound data or a set count) and either
hugs its items along its axis or stretches them across a cross axis it
hugs (see listStretchesHuggedCross). Such a list builds every item
either way, so it needs no viewport.
Whether list node stretches its items (ListViewProperties.stretchItems)
across a cross axis it shrink-wraps. Its cross extent is then that of its
thickest item, which only laying out every item tells: a viewport could
only take the design size, which the editor solves from the item
template alone (the first item's data), so a thicker item further on
overflowed.
Whether list node lays its items out in a Wrap: it wraps
(ListViewProperties.wrap) and has a known item count. Such a list builds
all its items and never scrolls, whatever its scroll settings. A list
with an unknown count ignores ListViewProperties.wrap and scrolls.
Renders spans (a text node's resolved text) as Markdown in style:
paragraphs, - and 1. list items, bold, italic, code,
links and @mentions. The text takes the style of its first run.
The codepoint of icon in Flutter's bundled MaterialIcons font, or
null when it isn't a Material Icon Flutter ships (Google Fonts'
codepoints, which the model stores, draw other glyphs in that font).
The codepoint in Flutter's bundled MaterialIcons font of the Material
Icon that looks like the Material Symbol icon (fill is its fill
axis), or null when icon isn't a Material Symbol or Flutter ships no
icon of its name.
Whether fraction of a node being visible counts as in view for a
threshold (a TriggerModel.visibleFraction or
MotionModel.revealFraction): 0 asks for any visible pixel, anything
else at least that share.
Whether icon is directional: Flutter's Material icon of the same name
matches the text direction (an arrow or chevron), so it is mirrored in a
right-to-left layout wherever it is drawn from.
The outline of a box of size with rounded corners of borderRadius and
semicircles of each notch's radius cut out of its edges: the shape of a
paper ticket.
Paints the band a solid stroke covers around rect: the area between the
box's shape grown by the stroke's outset and shrunk by its inset (see
strokeBandInsets).
Parses SVG path data (RectangleNode.path) into a Path: the M, L, H,
V, C, S, Q, T, A and Z commands, absolute (upper case) and relative
(lower case), with numbers separated by spaces, commas or signs. Returns
null when data is empty or not valid path data.
Where a node moving along SVG path data is at progress (0 to 1, by
arc length), relative to the path's start, and the path's direction
there in radians. Null when the path can't be read or is empty.
child with the Codelessly providers of from (the app, its context and
controller, a paywall): for nodes built in an overlay, such as the copy of
a list row being dragged, which sits above the providers of the screen.
The CloudQuery that whereFilters, orderByOperations and limit
describe, with variables in fields and values substituted. baseFilters,
such as the owner filter of DataRules.readFilters, come first.
Returns a sanitized version of the given data to be used in the SDK
and variables.
Updates the SDKConstants.createdAt and SDKConstants.updatedAt fields
with the current time.
Returns a sanitized version of the given data to be sent to the cloud
storage.
Updates the SDKConstants.createdAt and SDKConstants.updatedAt fields
with the current time.
The value of the screen variable for a screen of size: its width,
height, breakpoint (mobile, tablet or desktop), isMobile,
isTablet, isDesktop, orientation (portrait or landscape),
isPortrait and isLandscape, and the device's light or dark mode as
brightness (light or dark) and isDark, for a theme that follows
the system.
The path through pts: straight segments, or with curved a smooth
curve that passes through every point without overshooting it
(control points share the neighbouring points' heights).
A copy of root with value at keys (map keys and list indexes),
making missing maps on the way; null when a key doesn't fit (an index
past the end of a list, a key into a list).
The page a "Show more" list shows: revealed items of the loaded ones,
and what is left of the total (all documents the query matches, when
counted) or of what hasMoreToFetch says Firestore still has.
How far a stroke of width reaches into the box (inset) and out of it
(outset) on each side. Only the sides side names get a stroke;
align splits its width between the inside and the outside of the edge,
as Figma and the editor do.
Whether node or any node below it builds a widget that cannot report
intrinsic sizes: a list, grid or page view that scrolls (a viewport), a
scrolling row, column or frame, or a web view.
icon showing the Material Symbol name instead, for an iconName
bound to data. Material Symbols load by name alone (Material Icons need
each icon's version), so a Material Icon becomes the Material Symbol of
the same style, filled when it was filled.
doc with each of its reference fields that related has loaded
replaced by the referenced document (with its id). A reference not
loaded yet stays its id.
A circle on a point with an optional label above or below it. A marker
may style itself (a result-coloured dot on a halo, say); unset styles
fall back to the chart's: radius 5, filled with the line colour or the
hollow colour, a 2px outline in the line colour.
A horizontal grid line with an optional label.
A horizontal grid line with its label. The label sits left of the plot,
against it (align: "end", the default) or at the chart's left edge
(align: "start").
Allows to carry information about the type of bytes. This is useful when
decoding is required and the type of bytes is necessary to know how to
decode them.
