@api.stream/studio-kit/types/src/compositor/layouts.d.ts

Client SDK for building studio experiences with API.stream

import { SceneNode } from './compositor';
import type { LayoutProps } from '../core/layouts/index';
import * as CSS from 'csstype';
export { LayoutProps };
type Size = {
    x: string | number;
    y: string | number;
};
type Position = {
    x: string | number;
    y: string | number;
};
type Duration = string | number;
export type Transition = {
    delay?: Duration;
    offset?: Position;
    scale?: {
        x?: number;
        y?: number;
    };
    opacity?: number;
    timingFn?: CSS.StandardProperties['transitionTimingFunction'] | 'exit';
};
export type LayoutChild = HTMLElement & {
    data: ChildPosition;
};
export type LayoutArgs<T extends Record<string, any> = {}> = {
    props: T;
    children: SceneNode[];
    size: {
        x: number;
        y: number;
    };
};
export type ChildPosition = {
    position: Position;
    size: Size;
    opacity: number;
    borderRadius: number;
    zIndex: number;
    entryTransition: Transition;
    exitTransition: Transition;
    rootOffset?: {
        x: number;
        y: number;
    };
};
export type ChildPositionIndex = {
    [nodeId: string]: ChildPosition;
};
export type LayoutResult = ChildPositionIndex | HTMLElement;
export type LayoutDefinition<T extends Record<string, any> = {}> = ({ props, children, size, }: LayoutArgs<T>) => LayoutResult;
export type LayoutMap = {
    [name: string]: LayoutDeclaration;
};
export type LayoutName = 'Grid' | 'Free' | 'Column' | 'Row' | 'Presentation' | 'Layered' | string;
export type LayoutDeclaration<T extends Record<string, any> = {}> = {
    name: LayoutName;
    props?: T;
    layout: LayoutDefinition<T>;
};
export type LayoutRegister<T extends Record<string, any> = {}> = (declaration: LayoutDeclaration<T> | LayoutDeclaration<T>[]) => void;