SurfaceCompositionSchema · types

The following types define named objects and their relationships. Tables include inherited properties. Schema-derived types refer to their validated structures; a TypeScript declaration does not replace the compiler’s semantic checks.

SurfaceModelComposition

A detached closed spec contains declarations, not runtime values or retained authority.

export type SurfaceModelComposition = z.infer<typeof surfaceCompositionSpecSchema>;

SurfaceComposition

Concise name for the same sole compiled composition contract.

export type SurfaceComposition = SurfaceModelComposition;

SurfaceCompositionElement

Renderer narrowing uses this exact admitted union without assertions or schema copies.

export type SurfaceCompositionElement = z.infer<typeof surfaceCompositionElementSchema>;

SurfaceCompositionComponentName

A bundle advertises only the adapters it actually implements.

export type SurfaceCompositionComponentName = SurfaceCompositionElement['type'];

type SurfaceCompositionComponentName = "HomeHeader" | "HomeLaunchers" | "HomeLayout" | "HomeSection" | "HomeActivity" | "Page" | "Section" | "Stack" | "Grid" | "Card" | "Heading" | "Text" | "Badge" | "Icon" | "RecordIdentity" | "RecordField" | "RecordSettings" | "RecordTags" | "RecordMetric" | "RecordRelations" | "NativeContent" | "QueryTable" | "RecordCards" | "QueryGraph" | "QueryKanban" | "QueryGantt" | "QueryTimeline" | "QueryCalendar" | "ModelAction" | "RecordLayout" | "Tabs" | "TabPanel" | "ActionGroup" | "Header" | "WorkIdentity" | "WorkNavigation" | "WorkPanel" | "WorkStageRail" | "WorkTargetContent" | "WorkSources" | "WorkRequests" | "WorkCriteria" | "WorkAction";

SurfaceCompositionComponentProps

Precise props of the registered native adapter.

export type SurfaceCompositionComponentProps<K extends SurfaceCompositionComponentName> = Extract<
  SurfaceCompositionElement,
  { type: K }
>['props'];

All references

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

SurfaceCompositionSchema · typesChoose 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