API index

Generated by pnpm docs:reference from the committed API reports in packages/*/api/. Do not edit this page; edit apps/docs/src/reference/author-surface.ts.

This is 184 names, which is not the whole public surface. The reports the index is built from describe everything the packages export, several hundred names, most of it machinery an application never types. The list of what belongs here is curated by hand in apps/docs/src/reference/author-surface.ts, seeded from every name the pages and examples on this site actually import. If something you use is missing, that file is the one to add it to.

Two things are checked when the page is generated, so neither the names nor the links can rot: every name has to appear in its package API report, and every link has to resolve to a page here. What each name is for is written by hand, in the same file.

The kind is how the API report declares it, so class and interface are the report speaking rather than an editorial choice.

Starting an app

The two ends of the barrier: what the page calls, and what the worker calls back.

Name	Kind	Package	What it is
createApp	function	gesso-framework	Starts a render worker against a canvas, from the shell thread.
renderRoot	function	gesso-framework	Mounts a tree inside the render worker. The last line of every worker entry file.
WorkerApp	class	gesso-framework	What createApp returns: mount it on an element, dispose it when the page leaves.
WorkerAppOptions	interface	gesso-framework	Everything the shell side is configured with: the worker, the renderer, the callbacks.
WorkerHandle	interface	gesso-framework	A worker a channel can open a port on, so several channels can share one.
ShellRequest	type	gesso-framework	A request the worker sends across the barrier for the shell to carry out.

Components and state

A component runs once. These are the pieces that let it change afterwards.

Name	Kind	Package	What it is
createComponent	function	gesso-framework	Instantiates a component with its props. What JSX compiles to for a component tag.
ComponentContext	interface	gesso-framework	The second argument to a component: injection, lifetime, and the node it is mounted on.
Inputs	type	gesso-framework	Wraps a props type so every prop arrives as a cell rather than a value.
input	function	gesso-framework	Creates a single input cell, mostly for a test that drives a component by hand.
internalState	function	gesso-framework	State a component owns. Read it, write it, bind it into the tree.
InternalState	class	gesso-framework	The type internalState returns: a BehaviorSubject with a current value.
computed	function	gesso-framework	A cell that is a function of what it reads. The one derivation to reach for.
select	function	gesso-framework	One field, or one projection, of a cell, as a cell. Structural by default.
Each	function	gesso-framework	A keyed list: <Each of={rows} by="id">{row => ...}</Each>.
Show	function	gesso-framework	One child while a condition holds, with a stable key and no node of its own.
resource	function	gesso-framework	A keyed request with a status, a value, an error and a retry. A stale answer cannot win.
mutate	function	gesso-framework	An optimistic change to a cell, with a rollback that does not clobber a newer one.
debounced	function	gesso-framework	A cell that follows its source once it has stopped moving.
throttled	function	gesso-framework	A cell that follows its source at most once every so often, leading and trailing.
UiChild	type	gesso-core	Anything that can be a child: an element, a component, or an Observable of either.
Presence	function	gesso-framework	Keeps a child mounted while it plays its exit, then removes it.

Elements

The element factories. In a .tsx file the intrinsics compile to these, so a page rarely names them.

Name	Kind	Package	What it is
Box	function	gesso-core	A rectangle with properties and children. The <box> intrinsic.
Row	function	gesso-core	A box laid out along the x axis. The <row> intrinsic.
Column	function	gesso-core	A box laid out along the y axis. The <column> intrinsic.
Text	function	gesso-core	A run of text, measured and broken into lines. The <text> intrinsic.
Button	function	gesso-core	A box that is focusable and hit-testable by default. The <button> intrinsic.
LazyColumn	function	gesso-core	A column that builds only the rows inside the window it is asked for.

Modifiers

Behaviour attached to an element rather than written into it.

Name	Kind	Package	What it is
UiModifier	interface	gesso-core	A behaviour attached to an element, keyed so it survives a rebind.
defineModifier	function	gesso-core	Declares a modifier kind, with the attach and detach it runs.
interactive	function	gesso-core	Hover, press and disabled visual states, plus the cursor that goes with them.
bundle	function	gesso-core	A set of modifiers named once and attached as one, built at module level.
focusRing	function	gesso-core	Paints a ring while the element holds focus.
autoFocus	function	gesso-core	Takes focus once, when the element mounts.
draggable	function	gesso-core	Turns pointer drags on the element into an offset stream.
DragOffset	interface	gesso-core	What draggable reports: the offset from where the drag began.
measure	const	gesso-core	Pushes the laid-out box of the element into a Subject after every layout.
LayoutBox	interface	gesso-core	The box measure reports: position and size in coordinates of the layout root.
scrollPosition	const	gesso-core	Reads and writes the offset of a scroll container without a relayout.
animateLayout	const	gesso-core	Animates the element from its previous box to its new one after a layout change.
sharedElement	const	gesso-core	Matches an element across two trees by name, so it moves rather than swaps.
videoSource	const	gesso-core	Binds a video source to the element and hands back its playback state.
tooltip	function	gesso-components	Attaches a tooltip to any element, positioned by the overlay service.

Layout values

The lengths and track sizes a layout property accepts.

Name	Kind	Package	What it is
auto	const	gesso-core	Size from content. The default for a track and for a box that sets no size.
percent	function	gesso-core	A length relative to the containing block, as percent(100).
fr	function	gesso-core	A grid track that takes a share of the space left over.
minmax	function	gesso-core	A grid track with a floor and a ceiling.
repeat	function	gesso-core	Repeats a run of track sizes a fixed number of times.
UiAlignment	type	gesso-core	What the x, y, selfX and selfY alignment properties accept.
UiFlexWrap	type	gesso-core	What flexWrap accepts: nowrap, wrap, wrap-reverse.
ObjectFit	type	gesso-core	How an image or video fills its box: fill, cover, contain, none.

Colour, theme and type

The environment values every element inherits, and the tokens that name them.

Name	Kind	Package	What it is
UiTheme	interface	gesso-core	A palette and a type scale, provided once and inherited by everything below.
lightTheme	const	gesso-core	The light theme that ships with the framework.
defaultSpacing	const	gesso-core	The spacing scale a theme carries: eight steps, from none to huge.
withDensity	function	gesso-core	The same theme at another density. Scales the spacing scale and nothing else.
withContrast	function	gesso-core	The same theme with every foreground raised to a 7:1 ratio against its ground.
defineThemeExtension	function	gesso-core	A token group of your own on a theme, typed, with no change to UiTheme.
withThemeExtension	function	gesso-core	The same theme carrying one extension’s tokens.
themeExtension	function	gesso-core	Reads a token group back off a theme, completing on its names.
darkTheme	const	gesso-core	The dark theme that ships with the framework.
lightColors	const	gesso-core	The light palette on its own, for a theme that keeps the colours and changes the type.
UiColors	interface	gesso-core	The token set a palette has to fill: surface, text, accent, and the rest.
UiColor	interface	gesso-core	A resolved colour: red, green, blue, alpha.
parseColor	function	gesso-core	Parses a CSS colour string into a UiColor.
UiTypography	interface	gesso-core	The type scale in a theme: body, heading, caption and their siblings.
UiTextStyle	interface	gesso-core	One step of the scale: family, size, weight, line height, spacing, alignment.
UiFontWeight	type	gesso-core	What fontWeight accepts: a number, a numeric string, or a CSS keyword.
UiEnvironmentKeys	const	gesso-core	The keys a scoped environment value can be provided under.
ColorScheme	type	gesso-framework	The appearance signal the shell reports: light or dark.

Motion

Enter and exit states, springs, and the service that runs them.

Name	Kind	Package	What it is
fade	const	gesso-core	An enter or exit state that animates opacity.
scaleFrom	function	gesso-core	An enter or exit state that animates scale.
slideUp	function	gesso-core	An enter or exit state that animates a vertical offset.
spring	function	gesso-core	A spring transition, by token or by stiffness and damping.
AnimationService	class	gesso-framework	Runs the animations on the frame clock, and honours reduced motion.

Services

Injected with ctx.inject. Each one owns a capability the worker cannot reach directly.

Name	Kind	Package	What it is
ServiceRegistry	class	gesso-framework	What ctx.inject looks in. One instance per app, populated at start.
ShellService	class	gesso-framework	What the worker knows of the page: viewport size, appearance, and requests it can send.
OverlayService	class	gesso-framework	Mounts a layer above the app: dialogs, menus, tooltips and toasts.
useOverlay	function	gesso-components	The hook the shipped components use to open and close an overlay.
FocusService	class	gesso-framework	Owns focus: where it is, where tab sends it, and which trap holds it.
FindService	class	gesso-framework	Searches the text in the tree, because browser find cannot see a canvas.
MediaService	class	gesso-framework	Asks the shell to decode an image or open a video, and hands back the result.
RouterService	class	gesso-framework	The current route, and the navigation the app performs on it.

Routing

Typed routes, and the outlet that renders whichever one matched.

Name	Kind	Package	What it is
route	function	gesso-framework	Declares one route, with its path parameters typed from the path string.
RouteDefinition	interface	gesso-framework	What route returns, and what a router is configured with.
to	function	gesso-framework	Builds a target for a route, refusing a missing or misspelt parameter.
RouterOutlet	class	gesso-framework	Renders whichever route matched, and swaps the tree when it changes.
OutletProps	interface	gesso-framework	What an outlet takes, including the transition between routes.
createShellHistory	function	gesso-framework	Binds the router to browser history, on the shell thread.

Channels and the barrier

The typed message path between the shell thread and the render worker.

Name	Kind	Package	What it is
channel	function	gesso-framework	Declares a typed channel: a view the worker reads, and commands it sends.
defineChannel	function	gesso-framework	The same token from one object, so the view keys and their initial values are written once.
ViewOf	type	gesso-framework	The view type of a token declared with defineChannel.
provide	function	gesso-framework	Serves a channel from the shell thread, over a port.
ChannelSource	interface	gesso-framework	What a provider implements: the current view, and a handler per command.
ChannelPort	interface	gesso-framework	The message port a channel runs over. A MessagePort satisfies it.
createChannelRegistry	function	gesso-framework	Collects several channels behind one port, and reports which one failed.
serveChannels	function	gesso-framework	Starts serving a set of channels from the shell, and returns the teardown.
Patch	type	gesso-framework	One change to a projected view, as it crosses the barrier.
diffProjection	function	gesso-framework	Turns an old and a new view into the patches between them.
isChannelHostMessage	function	gesso-framework	Narrows a message event to something the host sent.
isChannelClientMessage	function	gesso-framework	Narrows a message event to something the client sent.

The node graph

What an element becomes once it is mounted. Reached from a test or a devtool, not from a component.

Name	Kind	Package	What it is
UiNode	class	gesso-core	A mounted element: its properties, its layout record, and its children.
UiNodeType	enum	gesso-core	Which kind of element a node is.
resolvePropertyByName	function	gesso-core	Reads one resolved property off a node, inheritance and defaults applied.
createPaintState	function	gesso-core	Allocates the scratch record resolvePaintState fills.
resolvePaintState	function	gesso-core	Resolves everything the painter needs for one node, into that record.
UiVisualState	enum	gesso-core	Hover, press, focus, disabled: what interactive sets and paint reads.
UiVisualStateSet	type	gesso-core	The set of visual states a node currently holds.

Semantics

The accessibility record a node publishes, and the shapes it is patched with.

Name	Kind	Package	What it is
UiSemanticsRecord	interface	gesso-core	What one node publishes to the accessibility mirror.
UiSemanticsUpdate	interface	gesso-core	A batch of semantics changes crossing to the shell in one message.
UiSemanticsPatch	type	gesso-core	The change to one record inside that batch.
UiSemanticState	type	gesso-core	What the states property accepts: checked, expanded, busy, and the rest.

Input, selection and find

Pointer events, and the text ranges selection and find leave behind on a node.

Name	Kind	Package	What it is
UiPointerEvent	class	gesso-core	A pointer event as it reaches a node, in coordinates local to the node.
UiPointerDevice	interface	gesso-core	What kind of pointer it was, and what it can do.
noKeyModifiers	function	gesso-core	An empty modifier set, for a test or a synthesised key event.
selectableTextNodes	function	gesso-core	The text nodes under a root, in the order a selection walks them.
selectionRangeOf	function	gesso-core	The selected range on a node, if any of it is selected.
matchRangesOf	function	gesso-core	The ranges find has highlighted on a node.

Media

Images, video and icons, all of which resolve on the shell thread and arrive as bitmaps.

Name	Kind	Package	What it is
UiImage	type	gesso-core	What the image property holds: a decoded ImageBitmap.
ImageResolver	interface	gesso-core	The contract an application implements to turn a source into a bitmap.
DefaultImageResolver	class	gesso-core	The resolver that ships: fetch, decode, cache, and share in-flight requests.
UiVideoSurface	interface	gesso-core	A frame source the painter can draw, backed by a video on the shell thread.
isVideoSurface	function	gesso-core	Narrows a value to a video surface.
VideoPlayback	interface	gesso-core	The playback state a video reports back: time, duration, paused, ended.
VideoResolver	interface	gesso-core	The contract for opening a video source and driving it.
IconRasterizer	class	gesso-core	Turns icon path data into a bitmap at the size and scale it will be drawn.
IconCanvas	interface	gesso-core	The drawing surface a rasterizer needs, so it can run in a worker.
IconContext	interface	gesso-core	The 2D context of that surface, narrowed to what rasterizing uses.

Components

Everything gesso-components exports that a page documents, with the option types they take.

Name	Kind	Package	What it is
Accordion	function	gesso-components	Sections that expand one at a time, or several.
AccordionSection	interface	gesso-components	One section: its id, its header, its content.
Alert	function	gesso-components	A banner that stays on the screen, in one of the three tones.
Avatar	function	gesso-components	A face, falling back to initials and then to a glyph.
Badge	function	gesso-components	A count or a short marker on something else, silent unless it is named.
Breadcrumb	function	gesso-components	The trail to where you are, whose last crumb is not a link.
BreadcrumbItem	interface	gesso-components	One crumb: its value and the word on it.
Card	function	gesso-components	A surface with padding, a radius and an elevation.
Checkbox	function	gesso-components	A tri-state box: checked, unchecked, mixed.
Chip	function	gesso-components	A pill that is on or off, for a row of filters; a toggle button that reports pressed.
DataTable	function	gesso-components	A sortable table over a row array, virtualized down the column.
DataColumn	interface	gesso-components	One column: its header, its width, and how it reads a row.
DataTableSort	interface	gesso-components	Which column the table is sorted by, and in which direction.
Dialog	function	gesso-components	A modal surface in the overlay layer, with focus held inside it.
Divider	function	gesso-components	A rule between things, horizontal or vertical.
FindBar	function	gesso-components	The search bar over FindService, with match count and stepping.
Icon	function	gesso-components	One icon from the registry, rasterized at the size it is drawn.
Image	function	gesso-components	An image with a fit, a placeholder, and an error state.
LazyList	function	gesso-components	A virtualized list that builds only the rows in the window.
Link	function	gesso-components	Words that go somewhere, announced as a link rather than a button.
Menu	function	gesso-components	A menu in the overlay layer, with roving focus and type-ahead.
MenuItem	interface	gesso-components	One item: its label, its shortcut, whether it is enabled.
Meter	function	gesso-components	A measurement inside a known range, with bands that decide its tone.
NumberInput	function	gesso-components	A numeric field with steppers, a range, and keyboard stepping.
Pagination	function	gesso-components	The strip of page numbers under a paged list.
ProgressBar	function	gesso-components	Determinate or indeterminate progress.
RadioGroup	function	gesso-components	One choice from several, with arrow keys moving the selection.
RadioOption	interface	gesso-components	One option: its value, its label, whether it is enabled.
Select	function	gesso-components	A listbox in the overlay layer, opened from a closed control.
SelectOption	interface	gesso-components	One option in that list.
SegmentedControl	function	gesso-components	One value chosen from a few, laid out as one track of segments.
SegmentedOption	interface	gesso-components	One segment: its value, its label and whether it can be chosen.
Skeleton	function	gesso-components	A stand-in holding the box of content that has not arrived, shimmering if asked.
SkeletonText	function	gesso-components	A run of stand-in lines, the last one short, for a paragraph still loading.
Slider	function	gesso-components	A value in a range, dragged or stepped.
Spinner	function	gesso-components	A busy indicator, driven by the frame clock.
SplitPane	function	gesso-components	Two panes and a draggable divider between them.
Switch	function	gesso-components	An on or off control, with the thumb animated between.
Tabs	function	gesso-components	A tab strip and its panel, with arrow keys moving between tabs.
TabDefinition	interface	gesso-components	One tab: its id, its label, its panel.
TextInput	function	gesso-components	A single-line field with selection, an IME path, and a caret.
TextArea	function	gesso-components	The same field over several lines.
Toast	function	gesso-components	A transient message in the overlay layer, announced to the mirror.
Toolbar	function	gesso-components	A row of controls with one tab stop and roving focus inside.
Tooltip	function	gesso-components	The tooltip surface itself, for a layout that places its own.
Tree	function	gesso-components	A disclosure tree with levels, expansion and typed selection.
TreeNode	interface	gesso-components	One node: its id, its label, its children.
Video	function	gesso-components	A video surface with controls, drawn into the canvas like anything else.

Testing

Rendering a tree in node and querying it through the semantics it publishes.

Name	Kind	Package	What it is
renderTest	function	gesso-testing	Renders a tree in node, with a canvas double, and returns queries over it.
Rendered	type	gesso-testing	What renderTest returns: the queries, the root, and the frame control.

Devtools

Panels mounted on the shell thread, beside the canvas rather than inside it.

Name	Kind	Package	What it is
createActionLog	function	gesso-devtools	Records what the app did, frame by frame, for the panel to show.
mountActionLogPanel	function	gesso-devtools	Mounts that log as a panel beside the canvas.
mountNodeInspector	function	gesso-devtools	Mounts the inspector: pick a node, read its resolved properties.
mountFrameProfiler	function	gesso-devtools	Mounts the frame timeline, phase by phase.
mountErrorOverlay	function	gesso-devtools	Shows an error from the worker over the canvas, with its stack.
connectDevtools	function	gesso-devtools	Registers the app with the page so the devtools panel, or the Chrome extension, finds it.
mountDevtoolsPanel	function	gesso-devtools	Mounts the panel itself, over a port, anywhere in a page.

Next

The properties page is the other generated one: every property a node can hold, with its default and what changing it invalidates.