@twick/2d 0.15.8 → 0.15.10

package/dist/jsx-dev-runtime-EZGUDKMi.d.ts

@@ -0,0 +1,2112 @@
+import * as _twick_core from '@twick/core';
+import { SimpleSignal, SignalValue, Vector2Signal, PossibleColor, PossibleVector2, Color, Vector2, Signal, SignalContext, TimingFunction, ThreadGenerator, InterpolationFunction, WebGLConvertible, PlaybackState, ReferenceReceiver, Promisable, SimpleVector2Signal, SpacingSignal, ColorSignal, PossibleSpacing, BBox, SerializedVector2, Origin } from '@twick/core';
+
+/**
+ * All possible CSS filter names.
+ *
+ * @internal
+ */
+type FilterName = 'invert' | 'sepia' | 'grayscale' | 'brightness' | 'contrast' | 'saturate' | 'hue' | 'blur';
+/**
+ * Definitions of all possible CSS filters.
+ *
+ * @internal
+ */
+declare const FILTERS: Record<string, Partial<FilterProps>>;
+/**
+ * A unified abstraction for all CSS filters.
+ */
+interface FilterProps {
+    name: string;
+    value: SignalValue<number>;
+    unit: string;
+    scale: number;
+    transform: boolean;
+    default: number;
+}
+declare class Filter {
+    get name(): string;
+    get default(): number;
+    readonly value: SimpleSignal<number, Filter>;
+    private readonly props;
+    constructor(props: Partial<FilterProps>);
+    isActive(): boolean;
+    serialize(matrix: DOMMatrix): string;
+}
+/**
+ * Create an {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert | invert} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function invert(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia | sepia} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function sepia(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale | grayscale} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function grayscale(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness | brightness} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function brightness(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast | contrast} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function contrast(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate | saturate} filter.
+ *
+ * @param value - The value of the filter.
+ */
+declare function saturate(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate | hue} filter.
+ *
+ * @param value - The value of the filter in degrees.
+ */
+declare function hue(value?: SignalValue<number>): Filter;
+/**
+ * Create a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur | blur} filter.
+ *
+ * @param value - The value of the filter in pixels.
+ */
+declare function blur(value?: SignalValue<number>): Filter;
+
+type GradientType = 'linear' | 'conic' | 'radial';
+interface GradientStop {
+    offset: SignalValue<number>;
+    color: SignalValue<PossibleColor>;
+}
+interface GradientProps {
+    type?: SignalValue<GradientType>;
+    fromX?: SignalValue<number>;
+    fromY?: SignalValue<number>;
+    from?: SignalValue<PossibleVector2>;
+    toX?: SignalValue<number>;
+    toY?: SignalValue<number>;
+    to?: SignalValue<PossibleVector2>;
+    angle?: SignalValue<number>;
+    fromRadius?: SignalValue<number>;
+    toRadius?: SignalValue<number>;
+    stops?: GradientStop[];
+}
+declare class Gradient {
+    readonly type: SimpleSignal<GradientType, this>;
+    readonly from: Vector2Signal<this>;
+    readonly to: Vector2Signal<this>;
+    readonly angle: SimpleSignal<number, this>;
+    readonly fromRadius: SimpleSignal<number, this>;
+    readonly toRadius: SimpleSignal<number, this>;
+    readonly stops: SimpleSignal<GradientStop[], this>;
+    constructor(props: GradientProps);
+    canvasGradient(context: CanvasRenderingContext2D): CanvasGradient;
+}
+
+type CanvasRepetition = null | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat';
+interface PatternProps {
+    image: CanvasImageSource;
+    repetition?: CanvasRepetition;
+}
+declare class Pattern {
+    readonly image: SimpleSignal<CanvasImageSource, this>;
+    readonly repetition: SimpleSignal<CanvasRepetition, this>;
+    constructor(props: PatternProps);
+    canvasPattern(context: CanvasRenderingContext2D): CanvasPattern | null;
+}
+
+type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+type FlexBasis = Length | 'content' | 'max-content' | 'min-content' | 'fit-content' | null;
+type FlexContent = 'center' | 'start' | 'end' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch';
+type FlexItems = 'center' | 'start' | 'end' | 'stretch' | 'baseline';
+type TextWrap = boolean | 'pre' | 'balance';
+type LayoutMode = boolean | null;
+/**
+ * Represents a length used by most layout properties.
+ *
+ * @remarks
+ * The value can be either:
+ * - `number` - the desired length in pixels
+ * - `${number}%` - a string with the desired length in percents, for example
+ *                  `'50%'`
+ */
+type Length = number | `${number}%`;
+/**
+ * Represents a desired length used internally by layout Nodes.
+ *
+ * @remarks
+ * When the desired length is set to `null` it represents a default value for
+ * whatever property it describes.
+ */
+type DesiredLength = Length | null;
+/**
+ * Represents a length limit used by layout properties such as `max-width`.
+ */
+type LengthLimit = Length | null | 'max-content' | 'min-content';
+type PossibleCanvasStyle = null | PossibleColor | Gradient | Pattern;
+type CanvasStyle = null | Color | Gradient | Pattern;
+
+interface CurveDrawingInfo {
+    path: Path2D;
+    arrowSize: number;
+    endPoint: Vector2;
+    endTangent: Vector2;
+    startPoint: Vector2;
+    startTangent: Vector2;
+    startOffset: number;
+}
+
+interface CurvePoint {
+    position: Vector2;
+    /**
+     * @deprecated
+     * The tangent is currently inconsistent for different types of curves and may
+     * sometimes return the normal of the point, instead. This will be fixed in
+     * the next major version but is kept as is for now for backwards
+     * compatibility reasons. To always get the real tangent of the point, you can
+     * use `normal.flipped.perpendicular`, instead.
+     */
+    tangent: Vector2;
+    normal: Vector2;
+}
+
+declare abstract class Segment {
+    abstract readonly points: Vector2[];
+    abstract draw(context: CanvasRenderingContext2D | Path2D, start: number, end: number, move: boolean): [CurvePoint, CurvePoint];
+    abstract getPoint(distance: number): CurvePoint;
+    abstract get arcLength(): number;
+}
+
+interface CurveProfile {
+    arcLength: number;
+    segments: Segment[];
+    minSin: number;
+}
+
+type CanvasStyleSignal<T> = Signal<PossibleCanvasStyle, CanvasStyle, T>;
+declare function canvasStyleSignal(): PropertyDecorator;
+
+type FiltersSignal<TOwner> = Signal<Filter[], Filter[], TOwner, FiltersSignalContext<TOwner>> & {
+    [K in FilterName]: SimpleSignal<number, TOwner>;
+};
+declare class FiltersSignalContext<TOwner> extends SignalContext<Filter[], Filter[], TOwner> {
+    constructor(initial: Filter[], owner: TOwner);
+    tweener(value: SignalValue<Filter[]>, duration: number, timingFunction: TimingFunction): ThreadGenerator;
+}
+declare function filtersSignal(): PropertyDecorator;
+
+/**
+ * @internal
+ */
+declare const NODE_NAME: unique symbol;
+/**
+ * @internal
+ */
+declare function nodeName(name: string): (target: any) => void;
+
+interface PropertyMetadata<T> {
+    default?: T;
+    interpolationFunction?: InterpolationFunction<T>;
+    parser?: (value: any) => T;
+    getter?: () => T;
+    setter?: (value: any) => void;
+    tweener?: (value: T, duration: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<T>) => void;
+    cloneable?: boolean;
+    inspectable?: boolean;
+    compoundParent?: string;
+    compound?: boolean;
+    compoundEntries: [string, string][];
+}
+declare function getPropertyMeta<T>(object: any, key: string | symbol): PropertyMetadata<T> | null;
+declare function getPropertyMetaOrCreate<T>(object: any, key: string | symbol): PropertyMetadata<T>;
+declare function getPropertiesOf(value: any): Record<string, PropertyMetadata<any>>;
+declare function initializeSignals(instance: any, props: Record<string, any>): void;
+/**
+ * Create a signal decorator.
+ *
+ * @remarks
+ * This decorator turns the given property into a signal.
+ *
+ * The class using this decorator can implement the following methods:
+ * - `get[PropertyName]` - A property getter.
+ * - `get[PropertyName]` - A property setter.
+ * - `tween[PropertyName]` - A tween provider.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@property()
+ *   public declare length: Signal<number, this>;
+ * }
+ * ```
+ */
+declare function signal<T>(): PropertyDecorator;
+/**
+ * Create an initial signal value decorator.
+ *
+ * @remarks
+ * This decorator specifies the initial value of a property.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@initial(1)
+ *   \@property()
+ *   public declare length: Signal<number, this>;
+ * }
+ * ```
+ *
+ * @param value - The initial value of the property.
+ */
+declare function initial<T>(value: T): PropertyDecorator;
+/**
+ * Create a signal interpolation function decorator.
+ *
+ * @remarks
+ * This decorator specifies the interpolation function of a property.
+ * The interpolation function is used when tweening between different values.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@interpolation(textLerp)
+ *   \@property()
+ *   public declare text: Signal<string, this>;
+ * }
+ * ```
+ *
+ * @param value - The interpolation function for the property.
+ */
+declare function interpolation<T>(value: InterpolationFunction<T>): PropertyDecorator;
+/**
+ * Create a signal parser decorator.
+ *
+ * @remarks
+ * This decorator specifies the parser of a property.
+ * Instead of returning the raw value, its passed as the first parameter to the
+ * parser and the resulting value is returned.
+ *
+ * If the wrapper class has a method called `lerp` it will be set as the
+ * default interpolation function for the property.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@wrapper(Vector2)
+ *   \@property()
+ *   public declare offset: Signal<Vector2, this>;
+ * }
+ * ```
+ *
+ * @param value - The wrapper class for the property.
+ */
+declare function parser<T>(value: (value: any) => T): PropertyDecorator;
+/**
+ * Create a signal wrapper decorator.
+ *
+ * @remarks
+ * This is a shortcut decorator for setting both the {@link parser} and
+ * {@link interpolation}.
+ *
+ * The interpolation function will be set only if the wrapper class has a method
+ * called `lerp`, which will be used as said function.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@wrapper(Vector2)
+ *   \@property()
+ *   public declare offset: Signal<Vector2, this>;
+ *
+ *   // same as:
+ *   \@parser(value => new Vector2(value))
+ *   \@interpolation(Vector2.lerp)
+ *   \@property()
+ *   public declare offset: Signal<Vector2, this>;
+ * }
+ * ```
+ *
+ * @param value - The wrapper class for the property.
+ */
+declare function wrapper<T>(value: (new (value: any) => T) & {
+    lerp?: InterpolationFunction<T>;
+}): PropertyDecorator;
+/**
+ * Create a cloneable property decorator.
+ *
+ * @remarks
+ * This decorator specifies whether the property should be copied over when
+ * cloning the node.
+ *
+ * By default, any property is cloneable.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@clone(false)
+ *   \@property()
+ *   public declare length: Signal<number, this>;
+ * }
+ * ```
+ *
+ * @param value - Whether the property should be cloneable.
+ */
+declare function cloneable<T>(value?: boolean): PropertyDecorator;
+/**
+ * Create an inspectable property decorator.
+ *
+ * @remarks
+ * This decorator specifies whether the property should be visible in the
+ * inspector.
+ *
+ * By default, any property is inspectable.
+ *
+ * Must be specified before the {@link signal} decorator.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@inspectable(false)
+ *   \@property()
+ *   public declare hiddenLength: Signal<number, this>;
+ * }
+ * ```
+ *
+ * @param value - Whether the property should be inspectable.
+ */
+declare function inspectable<T>(value?: boolean): PropertyDecorator;
+
+type Vector2LengthSignal<TOwner> = Signal<PossibleVector2<Length>, Vector2, TOwner> & {
+    x: Signal<Length, number, TOwner>;
+    y: Signal<Length, number, TOwner>;
+};
+declare function vector2Signal(prefix?: string | Record<string, string>): PropertyDecorator;
+
+/**
+ * Describes a shader program used to apply effects to nodes.
+ *
+ * @experimental
+ */
+interface ShaderConfig {
+    /**
+     * The source code of the fragment shader.
+     *
+     * @example
+     * ```glsl
+     * #version 300 es
+     * precision highp float;
+     *
+     * #include "@twick/core/shaders/common.glsl"
+     *
+     * void main() {
+     *     out_color = texture(core_source_tx, source_uv);
+     * }
+     * ```
+     */
+    fragment: string;
+    /**
+     * Custom uniforms to be passed to the shader.
+     *
+     * @remarks
+     * The keys of this object will be used as the uniform names.
+     * The values can be either a number or an array of numbers.
+     * The following table shows how the values will be mapped to GLSL types.
+     *
+     * | TypeScript                         | GLSL    |
+     * | ---------------------------------- | ------- |
+     * | `number`                           | `float` |
+     * | `[number, number]`                 | `vec2`  |
+     * | `[number, number, number]`         | `vec3`  |
+     * | `[number, number, number, number]` | `vec4`  |
+     *
+     * @example
+     * ```ts
+     * const shader = {
+     *   // ...
+     *   uniforms: {
+     *     my_value: () => 1,
+     *     my_vector: [1, 2, 3],
+     *   },
+     * };
+     * ```
+     *
+     * ```glsl
+     * uniform float my_value;
+     * uniform vec3 my_vector;
+     * ```
+     */
+    uniforms?: Record<string, SignalValue<number | number[] | WebGLConvertible>>;
+    /**
+     * A custom hook run before the shader is used.
+     *
+     * @remarks
+     * Gives you low-level access to the WebGL context and the shader program.
+     *
+     * @param gl - WebGL context.
+     * @param program - The shader program.
+     */
+    setup?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
+    /**
+     * A custom hook run after the shader is used.
+     *
+     * @remarks
+     * Gives you low-level access to the WebGL context and the shader program.
+     * Can be used to clean up resources created in the {@link setup} hook.
+     *
+     * @param gl - WebGL context.
+     * @param program - The shader program.
+     */
+    teardown?: (gl: WebGL2RenderingContext, program: WebGLProgram) => void;
+}
+type PossibleShaderConfig = (ShaderConfig | string)[] | ShaderConfig | string | null;
+
+interface View2DProps extends RectProps {
+    assetHash: string;
+}
+declare class View2D extends Rect {
+    static shadowRoot: ShadowRoot;
+    readonly playbackState: SimpleSignal<PlaybackState, this>;
+    readonly globalTime: SimpleSignal<number, this>;
+    readonly fps: SimpleSignal<number, this>;
+    readonly assetHash: SimpleSignal<string, this>;
+    constructor(props: View2DProps);
+    dispose(): void;
+    render(context: CanvasRenderingContext2D): Promise<void>;
+    /**
+     * Find a node by its key.
+     *
+     * @param key - The key of the node.
+     */
+    findKey<T extends Node = Node>(key: string): T | null;
+    protected requestLayoutUpdate(): void;
+    protected requestFontUpdate(): void;
+    view(): View2D;
+}
+
+type ComponentChild = Node | object | string | number | bigint | boolean | null | undefined;
+type ComponentChildren = ComponentChild | ComponentChild[];
+type NodeChildren = Node | Node[];
+type PropsOf<T> = T extends NodeConstructor<infer P> ? P : T extends FunctionComponent<infer P> ? P : never;
+interface JSXProps {
+    children?: ComponentChildren;
+    ref?: ReferenceReceiver<Node>;
+}
+interface FunctionComponent<T = any> {
+    (props: T): Node | null;
+}
+interface NodeConstructor<TProps = any, TNode = Node> {
+    new (props: TProps): TNode;
+}
+
+type NodeState = NodeProps & Record<string, any>;
+interface NodeProps {
+    ref?: ReferenceReceiver<any>;
+    children?: SignalValue<ComponentChildren>;
+    /**
+     * @deprecated Use {@link children} instead.
+     */
+    spawner?: SignalValue<ComponentChildren>;
+    key?: string;
+    x?: SignalValue<number>;
+    y?: SignalValue<number>;
+    position?: SignalValue<PossibleVector2>;
+    rotation?: SignalValue<number>;
+    scaleX?: SignalValue<number>;
+    scaleY?: SignalValue<number>;
+    scale?: SignalValue<PossibleVector2>;
+    skewX?: SignalValue<number>;
+    skewY?: SignalValue<number>;
+    skew?: SignalValue<PossibleVector2>;
+    zIndex?: SignalValue<number>;
+    opacity?: SignalValue<number>;
+    filters?: SignalValue<Filter[]>;
+    shadowColor?: SignalValue<PossibleColor>;
+    shadowBlur?: SignalValue<number>;
+    shadowOffsetX?: SignalValue<number>;
+    shadowOffsetY?: SignalValue<number>;
+    shadowOffset?: SignalValue<PossibleVector2>;
+    cache?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Node.cachePadding}
+     */
+    cachePaddingTop?: SignalValue<number>;
+    /**
+     * {@inheritDoc Node.cachePadding}
+     */
+    cachePaddingBottom?: SignalValue<number>;
+    /**
+     * {@inheritDoc Node.cachePadding}
+     */
+    cachePaddingLeft?: SignalValue<number>;
+    /**
+     * {@inheritDoc Node.cachePadding}
+     */
+    cachePaddingRight?: SignalValue<number>;
+    /**
+     * {@inheritDoc Node.cachePadding}
+     */
+    cachePadding?: SignalValue<PossibleSpacing>;
+    composite?: SignalValue<boolean>;
+    compositeOperation?: SignalValue<GlobalCompositeOperation>;
+    /**
+     * @experimental
+     */
+    shaders?: PossibleShaderConfig;
+}
+declare class Node implements Promisable<Node> {
+    /**
+     * @internal
+     */
+    readonly [NODE_NAME]: string;
+    isClass: boolean;
+    /**
+     * Represents the position of this node in local space of its parent.
+     *
+     * @example
+     * Initializing the position:
+     * ```tsx
+     * // with a possible vector:
+     * <Node position={[1, 2]} />
+     * // with individual components:
+     * <Node x={1} y={2} />
+     * ```
+     *
+     * Accessing the position:
+     * ```tsx
+     * // retrieving the vector:
+     * const position = node.position();
+     * // retrieving an individual component:
+     * const x = node.position.x();
+     * ```
+     *
+     * Setting the position:
+     * ```tsx
+     * // with a possible vector:
+     * node.position([1, 2]);
+     * node.position(() => [1, 2]);
+     * // with individual components:
+     * node.position.x(1);
+     * node.position.x(() => 1);
+     * ```
+     */
+    readonly position: Vector2Signal<this>;
+    get x(): SimpleSignal<number, this>;
+    get y(): SimpleSignal<number, this>;
+    /**
+     * A helper signal for operating on the position in world space.
+     *
+     * @remarks
+     * Retrieving the position using this signal returns the position in world
+     * space. Similarly, setting the position using this signal transforms the
+     * new value to local space.
+     *
+     * If the new value is a function, the position of this node will be
+     * continuously updated to always match the position returned by the function.
+     * This can be useful to "pin" the node in a specific place or to make it
+     * follow another node's position.
+     *
+     * Unlike {@link position}, this signal is not compound - it doesn't contain
+     * separate signals for the `x` and `y` components.
+     */
+    readonly absolutePosition: SimpleVector2Signal<this>;
+    protected getAbsolutePosition(): Vector2;
+    protected setAbsolutePosition(value: SignalValue<PossibleVector2>): void;
+    /**
+     * Represents the rotation (in degrees) of this node relative to its parent.
+     */
+    readonly rotation: SimpleSignal<number, this>;
+    /**
+     * A helper signal for operating on the rotation in world space.
+     *
+     * @remarks
+     * Retrieving the rotation using this signal returns the rotation in world
+     * space. Similarly, setting the rotation using this signal transforms the
+     * new value to local space.
+     *
+     * If the new value is a function, the rotation of this node will be
+     * continuously updated to always match the rotation returned by the function.
+     */
+    readonly absoluteRotation: SimpleSignal<number, this>;
+    protected getAbsoluteRotation(): number;
+    protected setAbsoluteRotation(value: SignalValue<number>): void;
+    /**
+     * Represents the scale of this node in local space of its parent.
+     *
+     * @example
+     * Initializing the scale:
+     * ```tsx
+     * // with a possible vector:
+     * <Node scale={[1, 2]} />
+     * // with individual components:
+     * <Node scaleX={1} scaleY={2} />
+     * ```
+     *
+     * Accessing the scale:
+     * ```tsx
+     * // retrieving the vector:
+     * const scale = node.scale();
+     * // retrieving an individual component:
+     * const scaleX = node.scale.x();
+     * ```
+     *
+     * Setting the scale:
+     * ```tsx
+     * // with a possible vector:
+     * node.scale([1, 2]);
+     * node.scale(() => [1, 2]);
+     * // with individual components:
+     * node.scale.x(1);
+     * node.scale.x(() => 1);
+     * ```
+     */
+    readonly scale: Vector2Signal<this>;
+    /**
+     * Represents the skew of this node in local space of its parent.
+     *
+     * @example
+     * Initializing the skew:
+     * ```tsx
+     * // with a possible vector:
+     * <Node skew={[40, 20]} />
+     * // with individual components:
+     * <Node skewX={40} skewY={20} />
+     * ```
+     *
+     * Accessing the skew:
+     * ```tsx
+     * // retrieving the vector:
+     * const skew = node.skew();
+     * // retrieving an individual component:
+     * const skewX = node.skew.x();
+     * ```
+     *
+     * Setting the skew:
+     * ```tsx
+     * // with a possible vector:
+     * node.skew([40, 20]);
+     * node.skew(() => [40, 20]);
+     * // with individual components:
+     * node.skew.x(40);
+     * node.skew.x(() => 40);
+     * ```
+     */
+    readonly skew: Vector2Signal<this>;
+    /**
+     * A helper signal for operating on the scale in world space.
+     *
+     * @remarks
+     * Retrieving the scale using this signal returns the scale in world space.
+     * Similarly, setting the scale using this signal transforms the new value to
+     * local space.
+     *
+     * If the new value is a function, the scale of this node will be continuously
+     * updated to always match the position returned by the function.
+     *
+     * Unlike {@link scale}, this signal is not compound - it doesn't contain
+     * separate signals for the `x` and `y` components.
+     */
+    readonly absoluteScale: SimpleVector2Signal<this>;
+    protected getAbsoluteScale(): Vector2;
+    protected setAbsoluteScale(value: SignalValue<PossibleVector2>): void;
+    private getRelativeScale;
+    readonly zIndex: SimpleSignal<number, this>;
+    readonly cache: SimpleSignal<boolean, this>;
+    /**
+     * Controls the padding of the cached canvas used by this node.
+     *
+     * @remarks
+     * By default, the size of the cache is determined based on the bounding box
+     * of the node and its children. That includes effects such as stroke or
+     * shadow. This property can be used to expand the cache area further.
+     * Usually used to account for custom effects created by {@link shaders}.
+     */
+    readonly cachePadding: SpacingSignal<this>;
+    readonly composite: SimpleSignal<boolean, this>;
+    readonly compositeOperation: SimpleSignal<GlobalCompositeOperation, this>;
+    private readonly compositeOverride;
+    protected tweenCompositeOperation(value: SignalValue<GlobalCompositeOperation>, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | Promisable<any>, void, any>;
+    /**
+     * Represents the opacity of this node in the range 0-1.
+     *
+     * @remarks
+     * The value is clamped to the range 0-1.
+     */
+    readonly opacity: SimpleSignal<number, this>;
+    absoluteOpacity(): number;
+    readonly filters: FiltersSignal<this>;
+    readonly shadowColor: ColorSignal<this>;
+    readonly shadowBlur: SimpleSignal<number, this>;
+    readonly shadowOffset: Vector2Signal<this>;
+    /**
+     * @experimental
+     */
+    readonly shaders: Signal<PossibleShaderConfig, ShaderConfig[], this>;
+    protected hasFilters(): boolean;
+    protected hasShadow(): boolean;
+    protected filterString(): string;
+    /**
+     * @deprecated Use {@link children} instead.
+     */
+    protected readonly spawner: SimpleSignal<ComponentChildren, this>;
+    protected getSpawner(): ComponentChildren;
+    protected setSpawner(value: SignalValue<ComponentChildren>): void;
+    readonly children: Signal<ComponentChildren, Node[], this>;
+    protected setChildren(value: SignalValue<ComponentChildren>): void;
+    protected getChildren(): Node[];
+    protected spawnedChildren(): Node[];
+    protected sortedChildren(): Node[];
+    protected view2D: View2D;
+    private stateStack;
+    protected realChildren: Node[];
+    protected hasSpawnedChildren: boolean;
+    private unregister;
+    readonly parent: SimpleSignal<Node | null, void>;
+    readonly properties: Record<string, PropertyMetadata<any>>;
+    readonly key: string;
+    readonly creationStack?: string;
+    constructor({ children, spawner, key, ...rest }: NodeProps);
+    /**
+     * Get the local-to-world matrix for this node.
+     *
+     * @remarks
+     * This matrix transforms vectors from local space of this node to world
+     * space.
+     *
+     * @example
+     * Calculate the absolute position of a point located 200 pixels to the right
+     * of the node:
+     * ```ts
+     * const local = new Vector2(0, 200);
+     * const world = transformVectorAsPoint(local, node.localToWorld());
+     * ```
+     */
+    localToWorld(): DOMMatrix;
+    /**
+     * Get the world-to-local matrix for this node.
+     *
+     * @remarks
+     * This matrix transforms vectors from world space to local space of this
+     * node.
+     *
+     * @example
+     * Calculate the position relative to this node for a point located in the
+     * top-left corner of the screen:
+     * ```ts
+     * const world = new Vector2(0, 0);
+     * const local = transformVectorAsPoint(world, node.worldToLocal());
+     * ```
+     */
+    worldToLocal(): DOMMatrix;
+    /**
+     * Get the world-to-parent matrix for this node.
+     *
+     * @remarks
+     * This matrix transforms vectors from world space to local space of this
+     * node's parent.
+     */
+    worldToParent(): DOMMatrix;
+    /**
+     * Get the local-to-parent matrix for this node.
+     *
+     * @remarks
+     * This matrix transforms vectors from local space of this node to local space
+     * of this node's parent.
+     */
+    localToParent(): DOMMatrix;
+    /**
+     * A matrix mapping composite space to world space.
+     *
+     * @remarks
+     * Certain effects such as blur and shadows ignore the current transformation.
+     * This matrix can be used to transform their parameters so that the effect
+     * appears relative to the closest composite root.
+     */
+    compositeToWorld(): DOMMatrix;
+    protected compositeRoot(): Node | null;
+    compositeToLocal(): DOMMatrix;
+    view(): View2D;
+    /**
+     * Add the given node(s) as the children of this node.
+     *
+     * @remarks
+     * The nodes will be appended at the end of the children list.
+     *
+     * @example
+     * ```tsx
+     * const node = <Layout />;
+     * node.add(<Rect />);
+     * node.add(<Circle />);
+     * ```
+     * Result:
+     * ```mermaid
+     * graph TD;
+     *   layout([Layout])
+     *   circle([Circle])
+     *   rect([Rect])
+     *     layout-->rect;
+     *     layout-->circle;
+     * ```
+     *
+     * @param node - A node or an array of nodes to append.
+     */
+    add(node: ComponentChildren): this;
+    /**
+     * Insert the given node(s) at the specified index in the children list.
+     *
+     * @example
+     * ```tsx
+     * const node = (
+     *   <Layout>
+     *     <Rect />
+     *     <Circle />
+     *   </Layout>
+     * );
+     *
+     * node.insert(<Txt />, 1);
+     * ```
+     *
+     * Result:
+     * ```mermaid
+     * graph TD;
+     *   layout([Layout])
+     *   circle([Circle])
+     *   text([Text])
+     *   rect([Rect])
+     *     layout-->rect;
+     *     layout-->text;
+     *     layout-->circle;
+     * ```
+     *
+     * @param node - A node or an array of nodes to insert.
+     * @param index - An index at which to insert the node(s).
+     */
+    insert(node: ComponentChildren, index?: number): this;
+    /**
+     * Remove this node from the tree.
+     */
+    remove(): this;
+    /**
+     * Rearrange this node in relation to its siblings.
+     *
+     * @remarks
+     * Children are rendered starting from the beginning of the children list.
+     * We can change the rendering order by rearranging said list.
+     *
+     * A positive `by` arguments move the node up (it will be rendered on top of
+     * the elements it has passed). Negative values move it down.
+     *
+     * @param by - Number of places by which the node should be moved.
+     */
+    move(by?: number): this;
+    /**
+     * Move the node up in relation to its siblings.
+     *
+     * @remarks
+     * The node will exchange places with the sibling right above it (if any) and
+     * from then on will be rendered on top of it.
+     */
+    moveUp(): this;
+    /**
+     * Move the node down in relation to its siblings.
+     *
+     * @remarks
+     * The node will exchange places with the sibling right below it (if any) and
+     * from then on will be rendered under it.
+     */
+    moveDown(): this;
+    /**
+     * Move the node to the top in relation to its siblings.
+     *
+     * @remarks
+     * The node will be placed at the end of the children list and from then on
+     * will be rendered on top of all of its siblings.
+     */
+    moveToTop(): this;
+    /**
+     * Move the node to the bottom in relation to its siblings.
+     *
+     * @remarks
+     * The node will be placed at the beginning of the children list and from then
+     * on will be rendered below all of its siblings.
+     */
+    moveToBottom(): this;
+    /**
+     * Move the node to the provided position relative to its siblings.
+     *
+     * @remarks
+     * If the node is getting moved to a lower position, it will be placed below
+     * the sibling that's currently at the provided index (if any).
+     * If the node is getting moved to a higher position, it will be placed above
+     * the sibling that's currently at the provided index (if any).
+     *
+     * @param index - The index to move the node to.
+     */
+    moveTo(index: number): this;
+    /**
+     * Move the node below the provided node in the parent's layout.
+     *
+     * @remarks
+     * The node will be moved below the provided node and from then on will be
+     * rendered below it. By default, if the node is already positioned lower than
+     * the sibling node, it will not get moved.
+     *
+     * @param node - The sibling node below which to move.
+     * @param directlyBelow - Whether the node should be positioned directly below
+     *                        the sibling. When true, will move the node even if
+     *                        it is already positioned below the sibling.
+     */
+    moveBelow(node: Node, directlyBelow?: boolean): this;
+    /**
+     * Move the node above the provided node in the parent's layout.
+     *
+     * @remarks
+     * The node will be moved above the provided node and from then on will be
+     * rendered on top of it. By default, if the node is already positioned
+     * higher than the sibling node, it will not get moved.
+     *
+     * @param node - The sibling node below which to move.
+     * @param directlyAbove - Whether the node should be positioned directly above the
+     *                        sibling. When true, will move the node even if it is
+     *                        already positioned above the sibling.
+     */
+    moveAbove(node: Node, directlyAbove?: boolean): this;
+    /**
+     * Change the parent of this node while keeping the absolute transform.
+     *
+     * @remarks
+     * After performing this operation, the node will stay in the same place
+     * visually, but its parent will be changed.
+     *
+     * @param newParent - The new parent of this node.
+     */
+    reparent(newParent: Node): void;
+    /**
+     * Remove all children of this node.
+     */
+    removeChildren(): void;
+    /**
+     * Get the current children of this node.
+     *
+     * @remarks
+     * Unlike {@link children}, this method does not have any side effects.
+     * It does not register the `children` signal as a dependency, and it does not
+     * spawn any children. It can be used to safely retrieve the current state of
+     * the scene graph for debugging purposes.
+     */
+    peekChildren(): readonly Node[];
+    /**
+     * Find all descendants of this node that match the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findAll<T extends Node>(predicate: (node: any) => node is T): T[];
+    /**
+     * Find all descendants of this node that match the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findAll<T extends Node = Node>(predicate: (node: any) => boolean): T[];
+    /**
+     * Find the first descendant of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findFirst<T extends Node>(predicate: (node: Node) => node is T): T | null;
+    /**
+     * Find the first descendant of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findFirst<T extends Node = Node>(predicate: (node: Node) => boolean): T | null;
+    /**
+     * Find the last descendant of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findLast<T extends Node>(predicate: (node: Node) => node is T): T | null;
+    /**
+     * Find the last descendant of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findLast<T extends Node = Node>(predicate: (node: Node) => boolean): T | null;
+    /**
+     * Find the closest ancestor of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findAncestor<T extends Node>(predicate: (node: Node) => node is T): T | null;
+    /**
+     * Find the closest ancestor of this node that matches the given predicate.
+     *
+     * @param predicate - A function that returns true if the node matches.
+     */
+    findAncestor<T extends Node = Node>(predicate: (node: Node) => boolean): T | null;
+    /**
+     * Get the nth children cast to the specified type.
+     *
+     * @param index - The index of the child to retrieve.
+     */
+    childAs<T extends Node = Node>(index: number): T | null;
+    /**
+     * Get the children array cast to the specified type.
+     */
+    childrenAs<T extends Node = Node>(): T[];
+    /**
+     * Get the parent cast to the specified type.
+     */
+    parentAs<T extends Node = Node>(): T | null;
+    /**
+     * Prepare this node to be disposed of.
+     *
+     * @remarks
+     * This method is called automatically when a scene is refreshed. It will
+     * be called even if the node is not currently attached to the tree.
+     *
+     * The goal of this method is to clean any external references to allow the
+     * node to be garbage collected.
+     */
+    dispose(): void;
+    /**
+     * Create a copy of this node.
+     *
+     * @param customProps - Properties to override.
+     */
+    clone(customProps?: NodeState): this;
+    /**
+     * Create a copy of this node.
+     *
+     * @remarks
+     * Unlike {@link clone}, a snapshot clone calculates any reactive properties
+     * at the moment of cloning and passes the raw values to the copy.
+     *
+     * @param customProps - Properties to override.
+     */
+    snapshotClone(customProps?: NodeState): this;
+    /**
+     * Create a reactive copy of this node.
+     *
+     * @remarks
+     * A reactive copy has all its properties dynamically updated to match the
+     * source node.
+     *
+     * @param customProps - Properties to override.
+     */
+    reactiveClone(customProps?: NodeState): this;
+    /**
+     * Create an instance of this node's class.
+     *
+     * @param props - Properties to pass to the constructor.
+     */
+    instantiate(props?: NodeProps): this;
+    /**
+     * Set the children without parsing them.
+     *
+     * @remarks
+     * This method assumes that the caller took care of parsing the children and
+     * updating the hierarchy.
+     *
+     * @param value - The children to set.
+     */
+    protected setParsedChildren(value: Node[]): void;
+    protected spawnChildren(reactive: boolean, children: ComponentChildren): void;
+    /**
+     * Parse any `ComponentChildren` into an array of nodes.
+     *
+     * @param children - The children to parse.
+     */
+    protected parseChildren(children: ComponentChildren): Node[];
+    /**
+     * Remove the given child.
+     */
+    protected removeChild(child: Node): void;
+    /**
+     * Whether this node should be cached or not.
+     */
+    protected requiresCache(): boolean;
+    protected cacheCanvas(): CanvasRenderingContext2D;
+    /**
+     * Get a cache canvas with the contents of this node rendered onto it.
+     */
+    protected cachedCanvas(): Promise<CanvasRenderingContext2D>;
+    /**
+     * Get a bounding box for the contents rendered by this node.
+     *
+     * @remarks
+     * The returned bounding box should be in local space.
+     */
+    protected getCacheBBox(): BBox;
+    /**
+     * Get a bounding box for the contents rendered by this node as well
+     * as its children.
+     */
+    cacheBBox(): BBox;
+    /**
+     * Get a bounding box for the contents rendered by this node (including
+     * effects applied after caching).
+     *
+     * @remarks
+     * The returned bounding box should be in local space.
+     */
+    protected fullCacheBBox(): BBox;
+    /**
+     * Get a bounding box in world space for the contents rendered by this node as
+     * well as its children.
+     *
+     * @remarks
+     * This is the same the bounding box returned by {@link cacheBBox} only
+     * transformed to world space.
+     */
+    protected worldSpaceCacheBBox(): BBox;
+    protected parentWorldSpaceCacheBBox(): BBox;
+    /**
+     * Prepare the given context for drawing a cached node onto it.
+     *
+     * @remarks
+     * This method is called before the contents of the cache canvas are drawn
+     * on the screen. It can be used to apply effects to the entire node together
+     * with its children, instead of applying them individually.
+     * Effects such as transparency, shadows, and filters use this technique.
+     *
+     * Whether the node is cached is decided by the {@link requiresCache} method.
+     *
+     * @param context - The context using which the cache will be drawn.
+     */
+    protected setupDrawFromCache(context: CanvasRenderingContext2D): void;
+    protected renderFromSource(context: CanvasRenderingContext2D, source: CanvasImageSource, x: number, y: number): void;
+    private shaderCanvas;
+    /**
+     * Render this node onto the given canvas.
+     *
+     * @param context - The context to draw with.
+     */
+    render(context: CanvasRenderingContext2D): Promise<void>;
+    /**
+     * Draw this node onto the canvas.
+     *
+     * @remarks
+     * This method is used when drawing directly onto the screen as well as onto
+     * the cache canvas.
+     * It assumes that the context have already been transformed to local space.
+     *
+     * @param context - The context to draw with.
+     */
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected drawChildren(context: CanvasRenderingContext2D): Promise<void>;
+    /**
+     * Draw an overlay for this node.
+     *
+     * @remarks
+     * The overlay for the currently inspected node is displayed on top of the
+     * canvas.
+     *
+     * The provided context is in screen space. The local-to-screen matrix can be
+     * used to transform all shapes that need to be displayed.
+     * This approach allows to keep the line widths and gizmo sizes consistent,
+     * no matter how zoomed-in the view is.
+     *
+     * @param context - The context to draw with.
+     * @param matrix - A local-to-screen matrix.
+     */
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    protected transformContext(context: CanvasRenderingContext2D): void;
+    /**
+     * Try to find a node intersecting the given position.
+     *
+     * @param position - The searched position.
+     */
+    hit(position: Vector2): Node | null;
+    /**
+     * Collect all asynchronous resources used by this node.
+     */
+    protected collectAsyncResources(): void;
+    /**
+     * Wait for any asynchronous resources that this node or its children have.
+     *
+     * @remarks
+     * Certain resources like images are always loaded asynchronously.
+     * Awaiting this method makes sure that all such resources are done loading
+     * before continuing the animation.
+     */
+    toPromise(): Promise<this>;
+    /**
+     * Return a snapshot of the node's current signal values.
+     *
+     * @remarks
+     * This method will calculate the values of any reactive properties of the
+     * node at the time the method is called.
+     */
+    getState(): NodeState;
+    /**
+     * Apply the given state to the node, setting all matching signal values to
+     * the provided values.
+     *
+     * @param state - The state to apply to the node.
+     */
+    applyState(state: NodeState): void;
+    /**
+     * Smoothly transition between the current state of the node and the given
+     * state.
+     *
+     * @param state - The state to transition to.
+     * @param duration - The duration of the transition.
+     * @param timing - The timing function to use for the transition.
+     */
+    applyState(state: NodeState, duration: number, timing?: TimingFunction): ThreadGenerator;
+    /**
+     * Push a snapshot of the node's current state onto the node's state stack.
+     *
+     * @remarks
+     * This method can be used together with the {@link restore} method to save a
+     * node's current state and later restore it. It is possible to store more
+     * than one state by calling `save` method multiple times.
+     */
+    save(): void;
+    /**
+     * Restore the node to its last saved state.
+     *
+     * @remarks
+     * This method can be used together with the {@link save} method to restore a
+     * node to a previously saved state. Restoring a node to a previous state
+     * removes that state from the state stack.
+     *
+     * @example
+     * ```tsx
+     * const node = <Circle width={100} height={100} fill={"lightseagreen"} />
+     *
+     * view.add(node);
+     *
+     * // Save the node's current state
+     * node.save();
+     *
+     * // Modify some of the node's properties
+     * yield* node.scale(2, 1);
+     * yield* node.fill('hotpink', 1);
+     *
+     * // Restore the node to its saved state
+     * node.restore();
+     * ```
+     */
+    restore(): void;
+    /**
+     * Tween the node to its last saved state.
+     *
+     * @remarks
+     * This method can be used together with the {@link save} method to restore a
+     * node to a previously saved state. Restoring a node to a previous state
+     * removes that state from the state stack.
+     *
+     * @example
+     * ```tsx
+     * const node = <Circle width={100} height={100} fill={"lightseagreen"} />
+     *
+     * view.add(node);
+     *
+     * // Save the node's current state
+     * node.save();
+     *
+     * // Modify some of the node's properties
+     * yield* node.scale(2, 1);
+     * yield* node.fill('hotpink', 1);
+     *
+     * // Tween the node to its saved state over 1 second
+     * yield* node.restore(1);
+     * ```
+     *
+     * @param duration - The duration of the transition.
+     * @param timing - The timing function to use for the transition.
+     */
+    restore(duration: number, timing?: TimingFunction): ThreadGenerator;
+    [Symbol.iterator](): Generator<{
+        meta: PropertyMetadata<any>;
+        signal: SimpleSignal<any>;
+        key: string;
+    }, void, unknown>;
+    private signalByKey;
+    private reversedChildren;
+}
+
+interface LayoutProps extends NodeProps {
+    layout?: LayoutMode;
+    tagName?: keyof HTMLElementTagNameMap;
+    width?: SignalValue<Length>;
+    height?: SignalValue<Length>;
+    maxWidth?: SignalValue<LengthLimit>;
+    maxHeight?: SignalValue<LengthLimit>;
+    minWidth?: SignalValue<LengthLimit>;
+    minHeight?: SignalValue<LengthLimit>;
+    ratio?: SignalValue<number>;
+    marginTop?: SignalValue<number>;
+    marginBottom?: SignalValue<number>;
+    marginLeft?: SignalValue<number>;
+    marginRight?: SignalValue<number>;
+    margin?: SignalValue<PossibleSpacing>;
+    paddingTop?: SignalValue<number>;
+    paddingBottom?: SignalValue<number>;
+    paddingLeft?: SignalValue<number>;
+    paddingRight?: SignalValue<number>;
+    padding?: SignalValue<PossibleSpacing>;
+    direction?: SignalValue<FlexDirection>;
+    basis?: SignalValue<FlexBasis>;
+    grow?: SignalValue<number>;
+    shrink?: SignalValue<number>;
+    wrap?: SignalValue<FlexWrap>;
+    justifyContent?: SignalValue<FlexContent>;
+    alignContent?: SignalValue<FlexContent>;
+    alignItems?: SignalValue<FlexItems>;
+    alignSelf?: SignalValue<FlexItems>;
+    rowGap?: SignalValue<Length>;
+    columnGap?: SignalValue<Length>;
+    gap?: SignalValue<Length>;
+    fontFamily?: SignalValue<string>;
+    fontSize?: SignalValue<number>;
+    fontStyle?: SignalValue<string>;
+    fontWeight?: SignalValue<number>;
+    lineHeight?: SignalValue<Length>;
+    letterSpacing?: SignalValue<number>;
+    textWrap?: SignalValue<TextWrap>;
+    textDirection?: SignalValue<CanvasDirection>;
+    textAlign?: SignalValue<CanvasTextAlign>;
+    size?: SignalValue<PossibleVector2<Length>>;
+    offsetX?: SignalValue<number>;
+    offsetY?: SignalValue<number>;
+    offset?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the center of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the center ends
+     * up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     * When {@link offset} is not set, this will be the same as the
+     * {@link NodeProps.position}.
+     */
+    middle?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the top edge of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the top edge
+     * ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    top?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the bottom edge of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the bottom edge
+     * ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    bottom?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the left edge of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the left edge
+     * ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    left?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the right edge of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the right edge
+     * ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    right?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the top left corner of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the top left
+     * corner ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    topLeft?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the top right corner of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the top right
+     * corner ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    topRight?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the bottom left corner of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the bottom left
+     * corner ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    bottomLeft?: SignalValue<PossibleVector2>;
+    /**
+     * The position of the bottom right corner of this node.
+     *
+     * @remarks
+     * This shortcut property will set the node's position so that the bottom
+     * right corner ends up in the given place.
+     * If present, overrides the {@link NodeProps.position} property.
+     */
+    bottomRight?: SignalValue<PossibleVector2>;
+    clip?: SignalValue<boolean>;
+}
+declare class Layout extends Node {
+    readonly layout: SimpleSignal<LayoutMode, this>;
+    readonly maxWidth: SimpleSignal<LengthLimit, this>;
+    readonly maxHeight: SimpleSignal<LengthLimit, this>;
+    readonly minWidth: SimpleSignal<LengthLimit, this>;
+    readonly minHeight: SimpleSignal<LengthLimit, this>;
+    readonly ratio: SimpleSignal<number | null, this>;
+    readonly margin: SpacingSignal<this>;
+    readonly padding: SpacingSignal<this>;
+    readonly direction: SimpleSignal<FlexDirection, this>;
+    readonly basis: SimpleSignal<FlexBasis, this>;
+    readonly grow: SimpleSignal<number, this>;
+    readonly shrink: SimpleSignal<number, this>;
+    readonly wrap: SimpleSignal<FlexWrap, this>;
+    readonly justifyContent: SimpleSignal<FlexContent, this>;
+    readonly alignContent: SimpleSignal<FlexContent, this>;
+    readonly alignItems: SimpleSignal<FlexItems, this>;
+    readonly alignSelf: SimpleSignal<FlexItems, this>;
+    readonly gap: Vector2LengthSignal<this>;
+    get columnGap(): Signal<Length, number, this>;
+    get rowGap(): Signal<Length, number, this>;
+    readonly fontFamily: SimpleSignal<string, this>;
+    readonly fontSize: SimpleSignal<number, this>;
+    readonly fontStyle: SimpleSignal<string, this>;
+    readonly fontWeight: SimpleSignal<number, this>;
+    readonly lineHeight: SimpleSignal<Length, this>;
+    readonly letterSpacing: SimpleSignal<number, this>;
+    readonly textWrap: SimpleSignal<TextWrap, this>;
+    readonly textDirection: SimpleSignal<CanvasDirection, this>;
+    readonly textAlign: SimpleSignal<CanvasTextAlign, this>;
+    protected getX(): number;
+    protected setX(value: SignalValue<number>): void;
+    protected getY(): number;
+    protected setY(value: SignalValue<number>): void;
+    /**
+     * Represents the size of this node.
+     *
+     * @remarks
+     * A size is a two-dimensional vector, where `x` represents the `width`, and `y`
+     * represents the `height`.
+     *
+     * The value of both x and y is of type {@link partials.Length} which is
+     * either:
+     * - `number` - the desired length in pixels
+     * - `${number}%` - a string with the desired length in percents, for example
+     *                  `'50%'`
+     * - `null` - an automatic length
+     *
+     * When retrieving the size, all units are converted to pixels, using the
+     * current state of the layout. For example, retrieving the width set to
+     * `'50%'`, while the parent has a width of `200px` will result in the number
+     * `100` being returned.
+     *
+     * When the node is not part of the layout, setting its size using percents
+     * refers to the size of the entire scene.
+     *
+     * @example
+     * Initializing the size:
+     * ```tsx
+     * // with a possible vector:
+     * <Node size={['50%', 200]} />
+     * // with individual components:
+     * <Node width={'50%'} height={200} />
+     * ```
+     *
+     * Accessing the size:
+     * ```tsx
+     * // retrieving the vector:
+     * const size = node.size();
+     * // retrieving an individual component:
+     * const width = node.size.x();
+     * ```
+     *
+     * Setting the size:
+     * ```tsx
+     * // with a possible vector:
+     * node.size(['50%', 200]);
+     * node.size(() => ['50%', 200]);
+     * // with individual components:
+     * node.size.x('50%');
+     * node.size.x(() => '50%');
+     * ```
+     */
+    readonly size: Vector2LengthSignal<this>;
+    get width(): Signal<Length, number, this>;
+    get height(): Signal<Length, number, this>;
+    protected getWidth(): number;
+    protected setWidth(value: SignalValue<Length>): void;
+    protected tweenWidth(value: SignalValue<Length>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<Length>): ThreadGenerator;
+    protected getHeight(): number;
+    protected setHeight(value: SignalValue<Length>): void;
+    protected tweenHeight(value: SignalValue<Length>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<Length>): ThreadGenerator;
+    /**
+     * Get the desired size of this node.
+     *
+     * @remarks
+     * This method can be used to control the size using external factors.
+     * By default, the returned size is the same as the one declared by the user.
+     */
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected tweenSize(value: SignalValue<SerializedVector2<Length>>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<Vector2>): ThreadGenerator;
+    /**
+     * Represents the offset of this node's origin.
+     *
+     * @remarks
+     * By default, the origin of a node is located at its center. The origin
+     * serves as the pivot point when rotating and scaling a node, but it doesn't
+     * affect the placement of its children.
+     *
+     * The value is relative to the size of this node. A value of `1` means as far
+     * to the right/bottom as possible. Here are a few examples of offsets:
+     * - `[-1, -1]` - top left corner
+     * - `[1, -1]` - top right corner
+     * - `[0, 1]` - bottom edge
+     * - `[-1, 1]` - bottom left corner
+     */
+    readonly offset: Vector2Signal<this>;
+    /**
+     * The position of the center of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the center ends up in the given place.
+     *
+     * If the {@link offset} has not been changed, this will be the same as the
+     * {@link position}.
+     *
+     * When retrieved, it will return the position of the center in the parent
+     * space.
+     */
+    readonly middle: SimpleVector2Signal<this>;
+    /**
+     * The position of the top edge of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the top edge ends up in the given place.
+     *
+     * When retrieved, it will return the position of the top edge in the parent
+     * space.
+     */
+    readonly top: SimpleVector2Signal<this>;
+    /**
+     * The position of the bottom edge of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the bottom edge ends up in the given place.
+     *
+     * When retrieved, it will return the position of the bottom edge in the
+     * parent space.
+     */
+    readonly bottom: SimpleVector2Signal<this>;
+    /**
+     * The position of the left edge of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the left edge ends up in the given place.
+     *
+     * When retrieved, it will return the position of the left edge in the parent
+     * space.
+     */
+    readonly left: SimpleVector2Signal<this>;
+    /**
+     * The position of the right edge of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the right edge ends up in the given place.
+     *
+     * When retrieved, it will return the position of the right edge in the parent
+     * space.
+     */
+    readonly right: SimpleVector2Signal<this>;
+    /**
+     * The position of the top left corner of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the top left corner ends up in the given place.
+     *
+     * When retrieved, it will return the position of the top left corner in the
+     * parent space.
+     */
+    readonly topLeft: SimpleVector2Signal<this>;
+    /**
+     * The position of the top right corner of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the top right corner ends up in the given place.
+     *
+     * When retrieved, it will return the position of the top right corner in the
+     * parent space.
+     */
+    readonly topRight: SimpleVector2Signal<this>;
+    /**
+     * The position of the bottom left corner of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the bottom left corner ends up in the given place.
+     *
+     * When retrieved, it will return the position of the bottom left corner in
+     * the parent space.
+     */
+    readonly bottomLeft: SimpleVector2Signal<this>;
+    /**
+     * The position of the bottom right corner of this node.
+     *
+     * @remarks
+     * When set, this shortcut property will modify the node's position so that
+     * the bottom right corner ends up in the given place.
+     *
+     * When retrieved, it will return the position of the bottom right corner in
+     * the parent space.
+     */
+    readonly bottomRight: SimpleVector2Signal<this>;
+    readonly clip: SimpleSignal<boolean, this>;
+    element: HTMLElement;
+    styles: CSSStyleDeclaration;
+    protected readonly sizeLockCounter: SimpleSignal<number, this>;
+    constructor(props: LayoutProps);
+    lockSize(): void;
+    releaseSize(): void;
+    protected parentTransform(): Layout | null;
+    anchorPosition(): Vector2;
+    /**
+     * Get the resolved layout mode of this node.
+     *
+     * @remarks
+     * When the mode is `null`, its value will be inherited from the parent.
+     *
+     * Use {@link layout} to get the raw mode set for this node (without
+     * inheritance).
+     */
+    layoutEnabled(): boolean;
+    isLayoutRoot(): boolean;
+    localToParent(): DOMMatrix;
+    /**
+     * A simplified version of {@link localToParent} matrix used for transforming
+     * direction vectors.
+     *
+     * @internal
+     */
+    protected scalingRotationMatrix(): DOMMatrix;
+    protected getComputedLayout(): BBox;
+    computedPosition(): Vector2;
+    protected computedSize(): Vector2;
+    /**
+     * Find the closest layout root and apply any new layout changes.
+     */
+    protected requestLayoutUpdate(): void;
+    protected appendedToView(): boolean;
+    /**
+     * Apply any new layout changes to this node and its children.
+     */
+    protected updateLayout(): void;
+    protected layoutChildren(): Layout[];
+    /**
+     * Apply any new font changes to this node and all of its ancestors.
+     */
+    protected requestFontUpdate(): void;
+    protected getCacheBBox(): BBox;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    getOriginDelta(origin: Origin): Vector2;
+    /**
+     * Update the offset of this node and adjust the position to keep it in the
+     * same place.
+     *
+     * @param offset - The new offset.
+     */
+    moveOffset(offset: Vector2): void;
+    protected parsePixels(value: number | null): string;
+    protected parseLength(value: number | string | null): string;
+    protected applyFlex(): void;
+    protected applyFont(): void;
+    dispose(): void;
+    hit(position: Vector2): Node | null;
+}
+
+interface ShapeProps extends LayoutProps {
+    fill?: SignalValue<PossibleCanvasStyle>;
+    stroke?: SignalValue<PossibleCanvasStyle>;
+    strokeFirst?: SignalValue<boolean>;
+    lineWidth?: SignalValue<number>;
+    lineJoin?: SignalValue<CanvasLineJoin>;
+    lineCap?: SignalValue<CanvasLineCap>;
+    lineDash?: SignalValue<number[]>;
+    lineDashOffset?: SignalValue<number>;
+    antialiased?: SignalValue<boolean>;
+}
+declare abstract class Shape extends Layout {
+    readonly fill: CanvasStyleSignal<this>;
+    readonly stroke: CanvasStyleSignal<this>;
+    readonly strokeFirst: SimpleSignal<boolean, this>;
+    readonly lineWidth: SimpleSignal<number, this>;
+    readonly lineJoin: SimpleSignal<CanvasLineJoin, this>;
+    readonly lineCap: SimpleSignal<CanvasLineCap, this>;
+    readonly lineDash: SimpleSignal<number[], this>;
+    readonly lineDashOffset: SimpleSignal<number, this>;
+    readonly antialiased: SimpleSignal<boolean, this>;
+    protected readonly rippleStrength: SimpleSignal<number, this>;
+    protected rippleSize(): number;
+    constructor(props: ShapeProps);
+    protected applyText(context: CanvasRenderingContext2D): void;
+    protected applyStyle(context: CanvasRenderingContext2D): void;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    protected getCacheBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getRipplePath(): Path2D;
+    protected drawRipple(context: CanvasRenderingContext2D): void;
+    ripple(duration?: number): Generator<void | _twick_core.ThreadGenerator | Promise<any> | _twick_core.Promisable<any>, void, any>;
+}
+
+interface CurveProps extends ShapeProps {
+    /**
+     * {@inheritDoc Curve.closed}
+     */
+    closed?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.start}
+     */
+    start?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.startOffset}
+     */
+    startOffset?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.startArrow}
+     */
+    startArrow?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.end}
+     */
+    end?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.endOffset}
+     */
+    endOffset?: SignalValue<number>;
+    /**
+     * {@inheritDoc Curve.endArrow}
+     */
+    endArrow?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Curve.arrowSize}
+     */
+    arrowSize?: SignalValue<number>;
+}
+declare abstract class Curve extends Shape {
+    /**
+     * Whether the curve should be closed.
+     *
+     * @remarks
+     * Closed curves have their start and end points connected.
+     */
+    readonly closed: SimpleSignal<boolean, this>;
+    /**
+     * A percentage from the start before which the curve should be clipped.
+     *
+     * @remarks
+     * The portion of the curve that comes before the given percentage will be
+     * made invisible.
+     *
+     * This property is usefully for animating the curve appearing on the screen.
+     * The value of `0` means the very start of the curve (accounting for the
+     * {@link startOffset}) while `1` means the very end (accounting for the
+     * {@link endOffset}).
+     */
+    readonly start: SimpleSignal<number, this>;
+    /**
+     * The offset in pixels from the start of the curve.
+     *
+     * @remarks
+     * This property lets you specify where along the defined curve the actual
+     * visible portion starts. For example, setting it to `20` will make the first
+     * 20 pixels of the curve invisible.
+     *
+     * This property is useful for trimming the curve using a fixed distance.
+     * If you want to animate the curve appearing on the screen, use {@link start}
+     * instead.
+     */
+    readonly startOffset: SimpleSignal<number, this>;
+    /**
+     * Whether to display an arrow at the start of the visible curve.
+     *
+     * @remarks
+     * Use {@link arrowSize} to control the size of the arrow.
+     */
+    readonly startArrow: SimpleSignal<boolean, this>;
+    /**
+     * A percentage from the start after which the curve should be clipped.
+     *
+     * @remarks
+     * The portion of the curve that comes after the given percentage will be
+     * made invisible.
+     *
+     * This property is usefully for animating the curve appearing on the screen.
+     * The value of `0` means the very start of the curve (accounting for the
+     * {@link startOffset}) while `1` means the very end (accounting for the
+     * {@link endOffset}).
+     */
+    readonly end: SimpleSignal<number, this>;
+    /**
+     * The offset in pixels from the end of the curve.
+     *
+     * @remarks
+     * This property lets you specify where along the defined curve the actual
+     * visible portion ends. For example, setting it to `20` will make the last
+     * 20 pixels of the curve invisible.
+     *
+     * This property is useful for trimming the curve using a fixed distance.
+     * If you want to animate the curve appearing on the screen, use {@link end}
+     * instead.
+     */
+    readonly endOffset: SimpleSignal<number, this>;
+    /**
+     * Whether to display an arrow at the end of the visible curve.
+     *
+     * @remarks
+     * Use {@link arrowSize} to control the size of the arrow.
+     */
+    readonly endArrow: SimpleSignal<boolean, this>;
+    /**
+     * Controls the size of the end and start arrows.
+     *
+     * @remarks
+     * To make the arrows visible make sure to enable {@link startArrow} and/or
+     * {@link endArrow}.
+     */
+    readonly arrowSize: SimpleSignal<number, this>;
+    protected canHaveSubpath: boolean;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    constructor(props: CurveProps);
+    protected abstract childrenBBox(): BBox;
+    abstract profile(): CurveProfile;
+    /**
+     * Convert a percentage along the curve to a distance.
+     *
+     * @remarks
+     * The returned distance is given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The percentage along the curve.
+     */
+    percentageToDistance(value: number): number;
+    /**
+     * Convert a distance along the curve to a percentage.
+     *
+     * @remarks
+     * The distance should be given in relation to the full curve, not
+     * accounting for {@link startOffset} and {@link endOffset}.
+     *
+     * @param value - The distance along the curve.
+     */
+    distanceToPercentage(value: number): number;
+    /**
+     * The base arc length of this curve.
+     *
+     * @remarks
+     * This is the entire length of this curve, not accounting for
+     * {@link startOffset | the offsets}.
+     */
+    baseArcLength(): number;
+    /**
+     * The offset arc length of this curve.
+     *
+     * @remarks
+     * This is the length of the curve that accounts for
+     * {@link startOffset | the offsets}.
+     */
+    offsetArcLength(): number;
+    /**
+     * The visible arc length of this curve.
+     *
+     * @remarks
+     * This arc length accounts for both the offset and the {@link start} and
+     * {@link end} properties.
+     */
+    arcLength(): number;
+    /**
+     * The percentage of the curve that's currently visible.
+     *
+     * @remarks
+     * The returned value is the ratio between the visible length (as defined by
+     * {@link start} and {@link end}) and the offset length of the curve.
+     */
+    completion(): number;
+    protected processSubpath(_path: Path2D, _startPoint: Vector2 | null, _endPoint: Vector2 | null): void;
+    protected curveDrawingInfo(): CurveDrawingInfo;
+    protected getPointAtDistance(value: number): CurvePoint;
+    getPointAtPercentage(value: number): CurvePoint;
+    protected getComputedLayout(): BBox;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected getPath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    /**
+     * Check if the path requires a profile.
+     *
+     * @remarks
+     * The profile is only required if certain features are used. Otherwise, the
+     * profile generation can be skipped, and the curve can be drawn directly
+     * using the 2D context.
+     */
+    protected requiresProfile(): boolean;
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    private drawArrows;
+    private drawArrow;
+}
+
+interface RectProps extends CurveProps {
+    /**
+     * {@inheritDoc Rect.radius}
+     */
+    radius?: SignalValue<PossibleSpacing>;
+    /**
+     * {@inheritDoc Rect.smoothCorners}
+     */
+    smoothCorners?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Rect.cornerSharpness}
+     */
+    cornerSharpness?: SignalValue<number>;
+}
+declare class Rect extends Curve {
+    /**
+     * Rounds the corners of this rectangle.
+     *
+     * @remarks
+     * The value represents the radius of the quarter circle that is used to round
+     * the corners. If the value is a number, the same radius is used for all
+     * corners. Passing an array of two to four numbers will set individual radii
+     * for each corner. Individual radii correspond to different corners depending
+     * on the number of values passed:
+     *
+     * ```ts
+     * // top-left-and-bottom-right | top-right-and-bottom-left
+     * [10, 30]
+     * // top-left | top-right-and-bottom-left | bottom-right
+     * [10, 20, 30]
+     * // top-left | top-right | bottom-right | bottom-left
+     * [10, 20, 30, 40]
+     * ```
+     *
+     * @example
+     * One uniform radius:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={40}
+     *   fill={'white'}
+     * />
+     * ```
+     * @example
+     * Individual radii for each corner:
+     * ```tsx
+     * <Rect
+     *   size={320}
+     *   radius={[10, 20, 30, 40]}
+     *   fill={'white'}
+     * />
+     * ```
+     */
+    readonly radius: SpacingSignal<this>;
+    /**
+     * Enables corner smoothing.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * When enabled, rounded corners are drawn continuously using Bézier curves
+     * rather than quarter circles. The sharpness of the curve can be controlled
+     * with {@link cornerSharpness}.
+     *
+     * You can read more about corner smoothing in
+     * [this article by Nick Lawrence](https://uxplanet.org/ui-ux-design-corner-smoothing-720509d1ae48).
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   width={300}
+     *   height={300}
+     *   smoothCorners={true}
+     * />
+     * ```
+     */
+    readonly smoothCorners: SimpleSignal<boolean, this>;
+    /**
+     * Controls the sharpness of {@link smoothCorners}.
+     *
+     * @remarks
+     * This property only affects the way rounded corners are drawn. To control
+     * the corner radius use the {@link radius} property.
+     *
+     * Requires {@link smoothCorners} to be enabled to have any effect.
+     * By default, corner sharpness is set to `0.6` which represents a smooth,
+     * circle-like rounding. At `0` the edges are squared off.
+     *
+     * @example
+     * ```tsx
+     * <Rect
+     *   size={300}
+     *   smoothCorners={true}
+     *   cornerSharpness={0.7}
+     * />
+     * ```
+     */
+    readonly cornerSharpness: SimpleSignal<number, this>;
+    constructor(props: RectProps);
+    profile(): CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected getRipplePath(): Path2D;
+}
+
+declare namespace JSX {
+    type Element = Node;
+    type ElementClass = Node;
+    interface ElementChildrenAttribute {
+        children: any;
+    }
+}
+declare const Fragment: FunctionComponent;
+declare function jsx(type: NodeConstructor | FunctionComponent | typeof Fragment, config: JSXProps, key?: any): ComponentChildren;
+
+export { type FilterName as $, getPropertyMeta as A, getPropertyMetaOrCreate as B, type CurvePoint as C, type DesiredLength as D, getPropertiesOf as E, type FunctionComponent as F, Gradient as G, initializeSignals as H, signal as I, type JSXProps as J, initial as K, type LayoutProps as L, interpolation as M, type NodeProps as N, parser as O, type PossibleCanvasStyle as P, wrapper as Q, Rect as R, Segment as S, cloneable as T, inspectable as U, View2D as V, type Vector2LengthSignal as W, vector2Signal as X, jsx as Y, JSX as Z, Fragment as _, type RectProps as a, FILTERS as a0, type FilterProps as a1, Filter as a2, invert as a3, sepia as a4, grayscale as a5, brightness as a6, contrast as a7, saturate as a8, hue as a9, blur as aa, type GradientType as ab, type GradientStop as ac, type GradientProps as ad, type CanvasRepetition as ae, type PatternProps as af, type FlexDirection as ag, type FlexWrap as ah, type FlexBasis as ai, type FlexContent as aj, type FlexItems as ak, type TextWrap as al, type LayoutMode as am, type Length as an, type LengthLimit as ao, type CurveProfile as b, Curve as c, type CurveProps as d, Shape as e, type ShapeProps as f, Node as g, type ComponentChildren as h, Pattern as i, type CanvasStyle as j, Layout as k, type NodeState as l, type ComponentChild as m, type NodeChildren as n, type PropsOf as o, type NodeConstructor as p, type View2DProps as q, type CurveDrawingInfo as r, type CanvasStyleSignal as s, canvasStyleSignal as t, type FiltersSignal as u, FiltersSignalContext as v, filtersSignal as w, NODE_NAME as x, nodeName as y, type PropertyMetadata as z };