---
title: "SurfaceCompositionSchema · types"
url: https://developers.dagio.ai/fr/reference/types-surface-composition/
---

# SurfaceCompositionSchema · types

   
                                         
                                                                                  
                                           
                  
           
          
   

Les types ci-dessous définissent les objets nommés et leurs relations. Les propriétés héritées sont incluses dans les tableaux. Les types dérivés d’un schéma renvoient à sa structure; une déclaration TypeScript ne remplace pas les contrôles sémantiques du compilateur.

## SurfaceModelComposition

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

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

## SurfaceComposition

Concise name for the same sole compiled composition contract.

```typescript
export type SurfaceComposition = SurfaceModelComposition;
```

## SurfaceCompositionElement

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

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

## SurfaceCompositionComponentName

A bundle advertises only the adapters it actually implements.

```typescript
export type SurfaceCompositionComponentName = SurfaceCompositionElement['type'];
```

```typescript
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.

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

[Toutes les références](https://developers.dagio.ai/fr/reference/)

<!-- surface-examples:start -->

## Exemples appliqués : Choisir le composant selon son rôle

Le Field édite Notes; le tableau présente les soumissions issues d’un groupe de relations.

### Configuration

Propriétés du composant `RecordField.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#recordfield).

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

### Variante et raccordement

Propriétés du composant `QueryTable.props`. [Propriétés et valeurs admises](https://developers.dagio.ai/fr/surface-components/#querytable).

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

### Exemple de disposition UI

La disposition illustrative ci-dessous situe cette configuration dans l’app Clients/Soumissions. Chaque fragment s’insère à l’emplacement indiqué; ses références aux Fields, Queries et Actions correspondent aux déclarations du Model.

1. Identité du client
2. Notes et suivi
3. Paramètres
4. Soumissions liées

<!-- surface-examples:end -->