Glossary

The shared vocabulary used in Codelab, its documentation, and its code.

Structure

App: A collection of pages and shared resources.

Page: An element tree in an app's route hierarchy. A Page is either a leaf or a Layout.

Layout: A Page that wraps child Pages and chooses where their content appears.

Outlet: The point in a Layout where its selected child Page appears.

Element: One node in a page or component tree. It has a kind, props, styles, and children.

Tree: Elements arranged as parents and children. A subtree is an element and its descendants.

Kind: The primitive or component an element renders.

Primitive: A supplied building block. Primitive elements form component trees; primitive functions form action chains.

Registry: A catalog of supplied primitives: element kinds with their props, or functions with their parameters.

Component: A reusable element tree with an interface for its props.

Instance: One use of a component, with its own prop values and component state.

Repeat: A subtree rendered once for each item in an array.

Conditional rendering: A condition that determines whether an element and its subtree appear.

One Card component can have two instances, each with a different title.

Data

State: The current values used by an app, page, or component.

Store: A named collection of state fields and actions, scoped to an app, page, or component.

Scope: Where a store or hook is available: an app, page, or component. A hook can be shared across selected pages.

Prop: A named value supplied to an element or component.

Field: A named declaration with a type and an optional default value.

Type: The values a field accepts, such as Text, Number, or Boolean.

Interface: A list of fields describing a set of named values, such as component props or function inputs.

Schema: A named interface that can be reused within an app.

Expression: A value computed from the current context, such as {{stores.counter.count}}.

Namespace: The first name in an expression, such as stores, props, or page. It selects where the value comes from.

Binding: A reference to a component, element, function, or file. Component bindings can supply props; function bindings can supply arguments.

File: An image an app owns: uploaded, imported from a URL, or generated for it. An image prop or app setting binds to a file.

A field declares title: Text. A prop supplies title: "Hello". An expression computes a value. A binding selects a target. A store's scope decides where it exists; {{stores.cart.total}} reads it through the stores namespace.

Behavior

Event: An interaction or change, such as a click or an input value changing.

Function: A callable operation with inputs and an optional output. A binding can call a primitive function, an action, or a hook method.

Action: A named, reusable chain of function calls on a store. Calls run in order; the last call supplies the result.

Parameter: A declared input to a function or action.

Argument: A value supplied for a parameter when a function or action is called.

Hook: Configured behavior that provides values or methods, such as form state, query results, or a reference.

Render prop: A callback whose result is an element subtree. Its inputs are available to that subtree through render expressions.

A button's onClick prop can bind to an action. The action calls functions to update state or navigate.

Delivery

Delivery: The system that runs and observes CI checks, preview and production deployments, and native packaging.

Builder

Workspace: The complete Builder interface around the editable app, including navigation rails, sidebars, canvas controls, panels, drawers, and overlays.

Shell: A page's frame: a navigation rail, sidebars and a main area side by side, over a status bar. Each area splits into a header and a body; a header is pinned above its body or docked, hidden behind a handle. A part that is absent takes no space, so a dashboard page is a main area alone. On mobile, the Shell's drawer frames the page instead, its side area a drawer that slides the page aside.

Orientation: Whether a navigation rail runs vertically, as the Workspace's icon rails do, or horizontally, as a strip of tabs. A rail's item marker and tooltips follow it.

Segmented control: One choice of a few, drawn as a row of icon buttons in a muted track; the pressed button is the value. The style panel uses it for text align, overflow, box sizing and other short scales.

Overlay: A Workspace surface opened by an action that floats over the canvas instead of docking in a sidebar: the AI chat and the Components palette. An overlay is not a panel and has no rail item.

Canvas mode: The canvas choice between Builder and Preview. Builder selects and edits elements; Preview runs the page's behavior.

Full-screen: The internal canvas layout setting that hides Workspace chrome. The Zen mode control uses it with Preview.

Zen mode: Preview canvas mode with Workspace chrome hidden. Entering Zen mode selects Preview and enables full-screen; switching to Builder exits Zen mode.

Editor read-only: An editor restriction that prevents editing content. It is separate from canvas mode and Zen mode.

Workspace view: A derived description of the Workspace as it is currently presented. It does not own or persist the underlying settings, navigation, or app state.

Workspace view intent: A partial desired Workspace view. Unspecified parts remain unchanged; the Workspace reconciles the intent through the same operations used by its visible controls.

Inline components: A Workspace view setting that exposes component internals as selectable elements while preserving the shared component definition.

Inline layouts: A Workspace view setting that exposes wrapping Layout internals as selectable elements while preserving the Layout and Page structure.

Recipe: A tailwind-variants tv() definition that styles one Workspace component: a slot per styled part and a variant per state. Call sites pass the state; the recipe supplies every part's classes.

Story: A Storybook example that renders one Workspace component in chosen states, kept beside the component in a *.stories.tsx file.

Grid track: One row or one column of a CSS grid. Grid columns and grid rows take the same track tokens: a count from 1 to 12, none, or subgrid.

Agent

Agent: The AI assistant in the Builder. It answers questions about the app and proposes changes to it.

Command plan: A labeled set of changes the agent proposes as one option. The user previews it on the canvas, then applies or rejects it.

Planning: The steps the agent takes before it proposes a change or replies, such as reasoning and looking up element kinds. Planning changes nothing.

Approval: The user's decision to apply or reject a change the agent proposes. A command plan always waits for it.

Activity: The timed steps of the agent's current reply, such as connecting tools or generating a response.

The agent plans, then proposes a command plan; approval applies it. Activity shows what the agent is doing until it replies.