Component catalog

One shared catalog

The catalog describes available components and their property schemas. Users, Studio and AI rely on the same definitions. Rich widgets do not need to introduce separate storage or permissions.

Family	Components / expected values	Purpose
Organization	Containers, sections, stacks and cards	Compose a readable hierarchy
Identity	Heading, text, badge, avatar, icon	Recognize objects and status
Fields	Typed controls, choices and references	Read and edit declared values
Collections	Table, list and cards	Explore Query results
Relations	Selector and relation groups	Link and open objects
Content	Document, Code, Canvas and Asset	Use native editors
Work	Actions, steps and results	Advance and monitor a Flow

Inspect a component entry

Before using a component, check required properties, available values, admitted children and events. Data components also need their binding or source. A visual title is not a business identity; a confirmation button must reference an Action.

RecordLayout arranges two explicitly declared Stack children, main content then supporting information. Its required asideWidth preset selects a standard or compact right panel; the regions stack on smaller screens. It does not add a Card around either region. Compose the record for the complete placement rules.

Check the exact catalog family recorded by the Model, not a software package version. The reference lists which families admit each component; a newer catalog does not silently change an existing Model or its data.

The Surface reference

Header arranges page identity and actions using exactly two declared Stack children, in that order. It has no properties or events and creates no surrounding Card. An empty actions region still retains its Stack. This layout belongs to catalog family 0.5.15; its listing does not add it to the current default family or to an older Model. The composition guide explains its use without changing the underlying Actions or native editor.

The Surface component reference describes primitives and business widgets: Fields, settings, relations, native content, Query views and Actions. It exposes properties and events from the Surface catalog.

Choose a component for the information it presents: RecordField for an editable Field, RecordSettings for record settings, QueryTable for a collection and ModelAction for a command. Each reference entry specifies its properties, expected values and available events.

Example

On a Client record, a card presents identity, a section holds Notes, a control selects Status and a relation group displays quotes. Composition brings these uses together without turning quotes into client text Fields.

Tabs and Action groups

Tabs and its TabPanel components organize a record without closing its editor or losing input when a panel is hidden. The Model chooses the keys, labels, order and initial tab. Each panel keeps its components mounted; the composition contains only one native editor.

ActionGroup presents at most one primary Action, secondary Actions and a menu. Every entry names a declared Action and retains its preparation, permissions and confirmation. These components belong to an explicit catalogue family; an existing application does not acquire them through a silent version change.

Applied examples : Choose each component for its role

The Field edits Notes; the table presents quotes from a relation group.

Configuration

Component properties RecordField.props. Properties and accepted values.

{
  "recordProfileKey": "client",
  "fieldPath": "fields/notes"
}

Variation and connection

Component properties QueryTable.props. Properties and accepted values.

{
  "binding": {
    "kind": "record-relations",
    "recordProfileKey": "client",
    "groupKey": "quotes"
  }
}

UI layout example

The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.

1. Client identity
2. Notes and follow-up
3. Settings
4. Linked quotes

SurfaceClients / North StudioExample

Component catalogChoose each component for its role

Clients

NS

North StudioActive client · Professional services

StatusActive ⌄

Notes and follow-up

The client wants a proposal for a new project. Clarify requirements and confirm the budget before review.

Editable text on the Surface

Record settings