Update sdk types

ts/@live-compositor/node/README.md

@@ -20,7 +20,7 @@ function ExampleApp() {
 
 async function run() {
   const compositor = new LiveCompositor();
-  await compositor.init()
+  await compositor.init();
 
   // register input/outputs/images/shaders/...
 
@@ -39,7 +39,7 @@ async function run() {
         type: 'opus',
         channels: 'stereo',
       },
-    }
+    },
   });
 
   await compositor.start();

ts/live-compositor/README.md

@@ -20,7 +20,7 @@ import { View, Text, InputStream, Rescaler } from 'live-compositor';
 function ExampleApp() {
   return (
     <View style={{ direction: 'column' }}>
-      <Rescaler style={{ resizeMode: 'fill' }}>
+      <Rescaler style={{ rescaleMode: 'fill' }}>
         <InputStream inputId="example_input_1" />
       </Rescaler>
       <Text fontSize={20}>Example label</Text>

ts/live-compositor/src/component.ts

@@ -4,15 +4,24 @@ import type * as Api from './api.js';
 
 export const DEFAULT_FONT_SIZE = 50;
 
-type ComponentProps<P> = { children?: React.ReactNode; id?: Api.ComponentId } & P;
+export type ComponentBaseProps = {
+  /**
+   * Component children.
+   */
+  children?: React.ReactNode;
+  /**
+   * Id of a component.
+   */
+  id?: Api.ComponentId;
+};
 
 export type SceneComponent = Api.Component | string;
 export type SceneBuilder<P> = (props: P, children: SceneComponent[]) => Api.Component;
 
-export function createCompositorComponent<P>(
+export function createCompositorComponent<P extends ComponentBaseProps>(
   sceneBuilder: SceneBuilder<P>
-): (props: ComponentProps<P>) => React.ReactNode {
-  return (props: ComponentProps<P>): React.ReactNode => {
+): (props: P) => React.ReactNode {
+  return (props: P): React.ReactNode => {
     const { children, ...otherProps } = props;
     const autoId = useId();
 

ts/live-compositor/src/components/Image.ts

@@ -1,14 +1,12 @@
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent } from '../component.js';
 import type { Api } from '../index.js';
 
-export type ImageProps = {
-  children?: undefined;
-
+export type ImageProps = Omit<ComponentBaseProps, 'children'> & {
   /**
    * Id of a component.
    */
-  id?: Api.ComponentId | null;
+  id?: Api.ComponentId;
   /**
    * Id of an image. It identifies an image registered using `LiveCompositor.registerImage`.
    */

ts/live-compositor/src/components/InputStream.ts

@@ -1,16 +1,10 @@
 import { createElement } from 'react';
 import type * as Api from '../api.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent } from '../component.js';
 import { useAudioInput } from '../hooks.js';
 
-export type InputStreamProps = {
-  children?: undefined;
-
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type InputStreamProps = Omit<ComponentBaseProps, 'children'> & {
   /**
    * Id of an input. It identifies a stream registered using a `LiveCompositor.registerInput`.
    */

ts/live-compositor/src/components/Rescaler.ts

@@ -2,14 +2,14 @@ import type React from 'react';
 import type * as Api from '../api.js';
 import type { Transition } from './common.js';
 import { intoApiTransition } from './common.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type RescalerStyle = {
+export type RescalerStyleProps = {
   /**
-   * (**default=`"fit"`**) Resize mode:
+   * (**default=`"fit"`**) Rescale mode:
    */
-  resizeMode?: Api.RescaleMode;
+  rescaleMode?: Api.RescaleMode;
   /**
    * (**default=`"center"`**) Horizontal alignment.
    */
@@ -40,41 +40,39 @@ export type RescalerStyle = {
    */
   top?: number;
   /**
-   * Distance in pixels between this component's left edge and its parent's left edge.
+   * Distance in pixels between this component's right edge and its parent's right edge.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
-  left?: number;
+  right?: number;
   /**
    * Distance in pixels between this component's bottom edge and its parent's bottom edge.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
   bottom?: number;
   /**
-   * Distance in pixels between this component's right edge and its parent's right edge.
+   * Distance in pixels between this component's left edge and its parent's left edge.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
-  right?: number;
+  left?: number;
   /**
    * Rotation of a component in degrees. If this field is defined, this element will be
    * absolutely positioned, instead of being laid out by its parent.
    */
   rotation?: number;
 };
 
-export type RescalerProps = {
-  children: React.ReactElement | string | number;
-
+export type RescalerProps = ComponentBaseProps & {
   /**
-   * Id of a component.
+   * Single component child.
    */
-  id?: Api.ComponentId;
+  children: React.ReactElement | string | number;
   /**
    * Rescaler styling properties
    */
-  style?: RescalerStyle;
+  style?: RescalerStyleProps;
   /**
    * Defines how this component will behave during a scene update. This will only have an
    * effect if the previous scene already contained a `Rescaler` component with the same id.
@@ -96,7 +94,7 @@ function sceneBuilder(
     type: 'rescaler',
     id: id,
     child: sceneComponentIntoApi(children[0]),
-    mode: style?.resizeMode,
+    mode: style?.rescaleMode,
     horizontal_align: style?.horizontalAlign,
     vertical_align: style?.verticalAlign,
     width: style?.width,

ts/live-compositor/src/components/Shader.ts

@@ -1,12 +1,8 @@
 import type * as Api from '../api.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type ShaderProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type ShaderProps = ComponentBaseProps & {
   /**
    * Id of a shader. It identifies a shader registered using `LiveCompositor.registerShader`.
    */

ts/live-compositor/src/components/Show.ts

@@ -1,13 +1,17 @@
-import type React from 'react';
-
 import { useAfterTimestamp } from '../hooks.js';
 import { LiveCompositorContext } from '../context/index.js';
 import { useContext, useEffect, useState } from 'react';
+import type { ComponentBaseProps } from '../component.js';
 
-export type ShowProps = {
+export type ShowProps = Omit<ComponentBaseProps, 'id'> & {
+  /**
+   * Optional range in milliseconds defining when the child should be visible.
+   */
   timeRangeMs?: { start?: number; end?: number };
+  /**
+   * Delay of the child being shown in milliseconds.
+   */
   delayMs?: number;
-  children?: React.ReactNode;
 };
 
 function Show(props: ShowProps) {

ts/live-compositor/src/components/SlideShow.ts

@@ -9,14 +9,14 @@ import {
   ChildrenLifetimeContextType,
   useTimeLimitedComponent,
 } from '../context/childrenLifetimeContext.js';
+import type { ComponentBaseProps } from '../component.js';
 
-export type SlideProps = {
+export type SlideProps = Omit<ComponentBaseProps, 'id'> & {
   /**
    * Duration in milliseconds how long this component should be shown.
    * If not specified defaults to value of an Input stream
    */
   durationMs?: number;
-  children?: React.ReactNode;
 };
 
 export type SlideShowProps = {

ts/live-compositor/src/components/Text.ts

@@ -1,9 +1,9 @@
 import type * as Api from '../api.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, DEFAULT_FONT_SIZE } from '../component.js';
 import { intoApiRgbaColor } from './common.js';
 
-export type TextStyle = {
+export type TextStyleProps = {
   /**
    * Width of a texture that text will be rendered on. If not provided, the resulting texture
    * will be sized based on the defined text but limited to `max_width` value.
@@ -64,18 +64,15 @@ export type TextStyle = {
   fontWeight?: Api.TextWeight;
 };
 
-export type TextProps = {
-  children?: (string | number)[] | string | number;
-
+export type TextProps = ComponentBaseProps & {
   /**
-   * Id of a component.
+   * Text content.
    */
-  id?: Api.ComponentId;
-
+  children?: (string | number)[] | string | number;
   /**
    * Text styling properties
    */
-  style?: TextStyle;
+  style?: TextStyleProps;
 };
 
 const Text = createCompositorComponent<TextProps>(sceneBuilder);

ts/live-compositor/src/components/Tiles.ts

@@ -1,10 +1,10 @@
 import type * as Api from '../api.js';
 import type { Transition } from './common.js';
 import { intoApiRgbaColor, intoApiTransition } from './common.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type TilesStyle = {
+export type TilesStyleProps = {
   /**
    * Width of a component in pixels. Exact behavior might be different based on the parent
    * component:
@@ -47,15 +47,11 @@ export type TilesStyle = {
   verticalAlign?: Api.VerticalAlign;
 };
 
-export type TilesProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
+export type TilesProps = ComponentBaseProps & {
   /**
    * Tiles styling properties
    */
-  style?: TilesStyle;
+  style?: TilesStyleProps;
   /**
    * Defines how this component will behave during a scene update. This will only have an
    * effect if the previous scene already contained a `Tiles` component with the same id.

ts/live-compositor/src/components/View.ts

@@ -1,10 +1,10 @@
 import type * as Api from '../api.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 import type { Transition } from './common.js';
 import { intoApiRgbaColor, intoApiTransition } from './common.js';
 
-export type ViewStyle = {
+export type ViewStyleProps = {
   /**
    * Width of a component in pixels. Exact behavior might be different based on the parent
    * component:
@@ -31,23 +31,23 @@ export type ViewStyle = {
    */
   top?: number;
   /**
-   * Distance in pixels between this component's left edge and its parent's left edge.
+   * Distance in pixels between this component's right edge and its parent's right edge.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
-  left?: number;
+  right?: number;
   /**
    * Distance in pixels between the bottom edge of this component and the bottom edge of its parent.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
   bottom?: number;
   /**
-   * Distance in pixels between this component's right edge and its parent's right edge.
+   * Distance in pixels between this component's left edge and its parent's left edge.
    * If this field is defined, this element will be absolutely positioned, instead of being
    * laid out by its parent.
    */
-  right?: number;
+  left?: number;
   /**
    * Rotation of a component in degrees. If this field is defined, this element will be
    * absolutely positioned, instead of being laid out by its parent.
@@ -63,17 +63,11 @@ export type ViewStyle = {
   backgroundColor?: string;
 };
 
-export type ViewProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId;
-
+export type ViewProps = ComponentBaseProps & {
   /**
    * Component styling properties.
    */
-  style?: ViewStyle;
-
+  style?: ViewStyleProps;
   /**
    * Defines how this component will behave during a scene update. This will only have an
    * effect if the previous scene already contained a `View` component with the same id.

ts/live-compositor/src/components/WebView.ts

@@ -1,12 +1,8 @@
 import type * as Api from '../api.js';
-import type { SceneComponent } from '../component.js';
+import type { ComponentBaseProps, SceneComponent } from '../component.js';
 import { createCompositorComponent, sceneComponentIntoApi } from '../component.js';
 
-export type WebViewProps = {
-  /**
-   * Id of a component.
-   */
-  id?: Api.ComponentId | null;
+export type WebViewProps = ComponentBaseProps & {
   /**
    * Id of a web renderer instance. It identifies an instance registered using `LiveCompositor.registerWebRenderer`.
    *