---
title: "openvibe-sdk/ui-layout · OpenVibe.Services"
canonical: "https://openvibe.services/docs/sdk/ui-layout"
updated: null
---

# openvibe-sdk/ui-layout · OpenVibe.Services

HTML: [openvibe-sdk/ui-layout · OpenVibe.Services](https://openvibe.services/docs/sdk/ui-layout)

# `openvibe-sdk/ui-layout`

Generated at 2026-11-13 06:25:48 UTC from [`openvibe-contracts v0.419.0`](https://github.com/OpenVibers/OpenVibe.Contracts/tree/v0.419.0) and [`openvibe-sdk v0.161.0`](https://github.com/OpenVibers/OpenVibe.SDK/tree/v0.161.0).

From `types/ui-layout.d.ts` (both). Declarations are shown verbatim.

## interface UiSurfacePart

A ui.surface@1 part (the subset this module reads).

~~~~
export interface UiSurfacePart {
    id: string;
    name: string;
    kind?: 'stick' | 'button' | 'slider' | 'readout' | 'video' | 'list';
    required?: boolean;
    pressed?: boolean;
    min?: { w?: number; h?: number; px?: number };
    styles?: {
        tints?: string[];
        shapes?: Array<'round' | 'pill' | 'square'>;
        opacity?: { min?: number; max?: number };
        label?: boolean;
    };
    bindings?: { keys?: string[]; gamepad?: string[] };
    never_covers?: string[];
}
~~~~

## interface UiSurfaceCatalog

The parts of ui.surface@1 this module reads.

~~~~
export interface UiSurfaceCatalog {
    id: string;
    version: number;
    name?: string;
    devices?: Array<'phone' | 'tablet' | 'computer'>;
    grid?: {
        columns?: Partial<Record<'phone' | 'tablet' | 'computer', number>>;
        cell_px?: Partial<Record<'phone' | 'tablet' | 'computer', number>>;
    };
    theme_tokens?: string[];
    parts: UiSurfacePart[];
}
~~~~

## interface UiLayoutPart

~~~~
export interface UiLayoutPart {
    id: string;
    visible: boolean;
    place: { x: number; y: number; w: number; h: number } | { dock: 'left' | 'right' | 'top' | 'bottom'; order: number; w: number; h: number };
    style: { tint: string; shape: 'round' | 'pill' | 'square'; opacity: number; label: boolean };
    bindings: { keys: string[]; gamepad: string[] };
}
~~~~

## interface UiLayout

A ui.layout@1 document as this module reads and writes it.

~~~~
export interface UiLayout {
    id?: string;
    revision?: number;
    active?: boolean;
    surface: string;
    surface_version: number;
    device: 'phone' | 'tablet' | 'computer';
    name: string;
    author: { name: string; subject?: { type: string; id: string } };
    sharing: 'private' | 'link' | 'gallery';
    parts: UiLayoutPart[];
    updated_at?: string;
}
~~~~

## interface UiLayoutValidation

~~~~
export interface UiLayoutValidation {
    ok: boolean;
    reasons: string[];
}
~~~~

## function validate

Every rule the design note gives, in plain words.

~~~~
export declare function validate(catalog: UiSurfaceCatalog, layout: UiLayout): UiLayoutValidation;
~~~~

## function applyDefaults

The default arrangement: every part visible, required parts first, none under 44 px.

~~~~
export declare function applyDefaults(catalog: UiSurfaceCatalog, device?: 'phone' | 'tablet' | 'computer'): UiLayout;
~~~~

## function merge

A copy with the patch applied; parts merge by id, new parts append, nothing is mutated.

~~~~
export declare function merge(layout: UiLayout, patch: Partial<UiLayout> & { parts?: Array<Partial<UiLayoutPart> & { id: string }> }): UiLayout;
~~~~

## const PRESSED\_PX

~~~~
export declare const PRESSED_PX: number;
~~~~