@twick/2d 0.14.21 → 0.15.0

package/dist/index.d.ts

@@ -0,0 +1,4657 @@
+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, Spacing, GeneratorScene, Inspectable, FullSceneDescription, ThreadGeneratorFactory, Scene, InspectedElement, InspectedAttributes, AssetInfo, DescriptionOf } from '@twick/core';
+import { HighlightStyle } from '@codemirror/language';
+import { Tree, Parser } from '@lezer/common';
+import { OptionList } from 'mathjax-full/js/util/Options';
+
+/**
+ * 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;
+
+declare function colorSignal(): PropertyDecorator;
+
+/**
+ * Create a compound property decorator.
+ *
+ * @remarks
+ * This decorator turns a given property into a signal consisting of one or more
+ * nested signals.
+ *
+ * @example
+ * ```ts
+ * class Example {
+ *   \@compound({x: 'scaleX', y: 'scaleY'})
+ *   public declare readonly scale: Signal<Vector2, this>;
+ *
+ *   public setScale() {
+ *     this.scale({x: 7, y: 3});
+ *     // same as:
+ *     this.scale.x(7).scale.y(3);
+ *   }
+ * }
+ * ```
+ *
+ * @param entries - A record mapping the property in the compound object to the
+ *                  corresponding property on the owner node.
+ */
+declare function compound(entries: Record<string, string>): PropertyDecorator;
+
+/**
+ * Create a computed method decorator.
+ *
+ * @remarks
+ * This decorator turns the given method into a computed value.
+ * See {@link createComputed} for more information.
+ */
+declare function computed(): MethodDecorator;
+
+declare function defaultStyle<T>(styleName: string, parse?: (value: string) => T): 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;
+
+type Initializer<T> = (instance: T, context?: any) => void;
+declare function addInitializer<T>(target: any, initializer: Initializer<T>): void;
+declare function initialize(target: any, context?: any): void;
+
+/**
+ * @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;
+}
+
+interface MediaProps extends RectProps {
+    src?: SignalValue<string>;
+    loop?: SignalValue<boolean>;
+    playbackRate?: number;
+    volume?: number;
+    time?: SignalValue<number>;
+    play?: boolean;
+    awaitCanPlay?: SignalValue<boolean>;
+    allowVolumeAmplificationInPreview?: SignalValue<boolean>;
+}
+declare abstract class Media extends Rect {
+    readonly src: SimpleSignal<string, this>;
+    readonly loop: SimpleSignal<boolean, this>;
+    readonly playbackRate: SimpleSignal<number, this>;
+    protected readonly time: SimpleSignal<number, this>;
+    protected readonly playing: SimpleSignal<boolean, this>;
+    protected readonly awaitCanPlay: SimpleSignal<boolean, this>;
+    protected readonly allowVolumeAmplificationInPreview: SimpleSignal<boolean, this>;
+    protected volume: number;
+    protected static readonly amplificationPool: Record<string, {
+        audioContext: AudioContext;
+        sourceNode: MediaElementAudioSourceNode;
+        gainNode: GainNode;
+    }>;
+    protected lastTime: number;
+    private isSchedulingPlay;
+    constructor(props: MediaProps);
+    isPlaying(): boolean;
+    getCurrentTime(): number;
+    getDuration(): number;
+    getVolume(): number;
+    getUrl(): string;
+    dispose(): void;
+    completion(): number;
+    protected abstract mediaElement(): HTMLMediaElement;
+    protected abstract seekedMedia(): HTMLMediaElement;
+    protected abstract fastSeekedMedia(): HTMLMediaElement;
+    protected abstract draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected setCurrentTime(value: number): void;
+    setVolume(volume: number): void;
+    protected amplify(node: HTMLMediaElement, volume: number): void;
+    protected setPlaybackRate(playbackRate: number): void;
+    protected scheduleSeek(time: number): void;
+    /**
+     * Waits for the canplay event to be fired before calling onCanPlay.
+     *
+     * If the media is already ready to play, onCanPlay is called immediately.
+     * @param onCanPlay - The function to call when the media is ready to play.
+     * @returns
+     */
+    protected waitForCanPlay(media: HTMLMediaElement, onCanPlay: () => void): void;
+    /**
+     * Returns true if we should wait for the media to be ready to play.
+     */
+    protected waitForCanPlayNecessary(media: HTMLMediaElement): boolean;
+    play(): void;
+    protected schedulePlay(): void;
+    private simplePlay;
+    private actuallyPlay;
+    pause(): void;
+    clampTime(time: number): number;
+    protected collectAsyncResources(): void;
+    protected autoPlayBasedOnTwick(): void;
+    protected getErrorReason(errCode?: number): string;
+    protected isIOS(): boolean;
+}
+
+declare class Audio extends Media {
+    private static readonly pool;
+    constructor(props: MediaProps);
+    protected mediaElement(): HTMLAudioElement;
+    protected seekedMedia(): HTMLAudioElement;
+    protected fastSeekedMedia(): HTMLAudioElement;
+    protected audio(): HTMLAudioElement;
+    protected seekedAudio(): HTMLAudioElement;
+    protected fastSeekedAudio(): HTMLAudioElement;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+}
+
+declare class CircleSegment extends Segment {
+    private center;
+    private radius;
+    private from;
+    private to;
+    private counter;
+    private readonly length;
+    private readonly angle;
+    readonly points: Vector2[];
+    constructor(center: Vector2, radius: number, from: Vector2, to: Vector2, counter: boolean);
+    get arcLength(): number;
+    draw(context: CanvasRenderingContext2D | Path2D, from: number, to: number): [CurvePoint, CurvePoint];
+    getPoint(distance: number): CurvePoint;
+}
+
+/**
+ * A polynomial in the form ax^3 + bx^2 + cx + d up to a cubic polynomial.
+ *
+ * Source code liberally taken from:
+ * https://github.com/FreyaHolmer/Mathfs/blob/master/Runtime/Curves/Polynomial.cs
+ */
+declare class Polynomial {
+    readonly c0: number;
+    readonly c1: number;
+    readonly c2: number;
+    readonly c3: number;
+    /**
+     * Constructs a constant polynomial
+     *
+     * @param c0 - The constant coefficient
+     */
+    static constant(c0: number): Polynomial;
+    /**
+     * Constructs a linear polynomial
+     *
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     */
+    static linear(c0: number, c1: number): Polynomial;
+    /**
+     * Constructs a quadratic polynomial
+     *
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     * @param c2 - The quadratic coefficient
+     */
+    static quadratic(c0: number, c1: number, c2: number): Polynomial;
+    /**
+     * Constructs a cubic polynomial
+     *
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     * @param c2 - The quadratic coefficient
+     * @param c3 - The cubic coefficient
+     */
+    static cubic(c0: number, c1: number, c2: number, c3: number): Polynomial;
+    /**
+     * The degree of the polynomial
+     */
+    get degree(): number;
+    /**
+     * @param c0 - The constant coefficient
+     */
+    constructor(c0: number);
+    /**
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     */
+    constructor(c0: number, c1: number);
+    /**
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     * @param c2 - The quadratic coefficient
+     */
+    constructor(c0: number, c1: number, c2: number);
+    /**
+     * @param c0 - The constant coefficient
+     * @param c1 - The linear coefficient
+     * @param c2 - The quadratic coefficient
+     * @param c3 - The cubic coefficient
+     */
+    constructor(c0: number, c1: number, c2: number, c3: number);
+    /**
+     * Return the nth derivative of the polynomial.
+     *
+     * @param n - The number of times to differentiate the polynomial.
+     */
+    differentiate(n?: number): Polynomial;
+    /**
+     * Evaluate the polynomial at the given value t.
+     *
+     * @param t - The value to sample at
+     */
+    eval(t: number): number;
+    /**
+     * Evaluate the nth derivative of the polynomial at the given value t.
+     *
+     * @param t - The value to sample at
+     * @param derivative - The derivative of the polynomial to sample from
+     */
+    eval(t: number, derivative: number): number;
+    /**
+     * Split the polynomial into two polynomials of the same overall shape.
+     *
+     * @param u - The point at which to split the polynomial.
+     */
+    split(u: number): [Polynomial, Polynomial];
+    /**
+     * Calculate the roots (values where this polynomial = 0).
+     *
+     * @remarks
+     * Depending on the degree of the polynomial, returns between 0 and 3 results.
+     */
+    roots(): number[];
+    /**
+     * Calculate the local extrema of the polynomial.
+     */
+    localExtrema(): number[];
+    /**
+     * Calculate the local extrema of the polynomial in the unit interval.
+     */
+    localExtrema01(): number[];
+    /**
+     * Return the output value range within the unit interval.
+     */
+    outputRange01(): number[];
+    private solveCubicRoots;
+    private solveDepressedCubicRoots;
+    private solveQuadraticRoots;
+    private solveLinearRoot;
+    private almostZero;
+}
+
+declare class Polynomial2D {
+    readonly c0: Vector2 | Polynomial;
+    readonly c1: Vector2 | Polynomial;
+    readonly c2?: Vector2 | undefined;
+    readonly c3?: Vector2 | undefined;
+    readonly x: Polynomial;
+    readonly y: Polynomial;
+    constructor(c0: Vector2, c1: Vector2, c2: Vector2, c3: Vector2);
+    constructor(c0: Vector2, c1: Vector2, c2: Vector2);
+    constructor(x: Polynomial, y: Polynomial);
+    eval(t: number, derivative?: number): Vector2;
+    split(u: number): [Polynomial2D, Polynomial2D];
+    differentiate(n?: number): Polynomial2D;
+    evalDerivative(t: number): Vector2;
+    /**
+     * Calculate the tight axis-aligned bounds of the curve in the unit interval.
+     */
+    getBounds(): BBox;
+}
+
+/**
+ * Class to uniformly sample points on a given polynomial curve.
+ *
+ * @remarks
+ * In order to uniformly sample points from non-linear curves, this sampler
+ * re-parameterizes the curve by arclength.
+ */
+declare class UniformPolynomialCurveSampler {
+    private readonly curve;
+    private sampledDistances;
+    /**
+     * @param curve - The curve to sample
+     * @param samples - How many points to sample from the provided curve. The
+     *                  more points get sampled, the higher the resolution–and
+     *                  therefore precision–of the sampler.
+     */
+    constructor(curve: PolynomialSegment, samples?: number);
+    /**
+     * Discard all previously sampled points and resample the provided number of
+     * points from the curve.
+     *
+     * @param samples - The number of points to sample.
+     */
+    resample(samples: number): void;
+    /**
+     * Return the point at the provided distance along the sampled curve's
+     * arclength.
+     *
+     * @param distance - The distance along the curve's arclength for which to
+     *                   retrieve the point.
+     */
+    pointAtDistance(distance: number): CurvePoint;
+    /**
+     * Return the t value for the point at the provided distance along the sampled
+     * curve's arc length.
+     *
+     * @param distance - The distance along the arclength
+     */
+    distanceToT(distance: number): number;
+}
+
+declare abstract class PolynomialSegment extends Segment {
+    protected readonly curve: Polynomial2D;
+    protected readonly length: number;
+    protected readonly pointSampler: UniformPolynomialCurveSampler;
+    get arcLength(): number;
+    abstract get points(): Vector2[];
+    protected constructor(curve: Polynomial2D, length: number);
+    getBBox(): BBox;
+    /**
+     * Evaluate the polynomial at the given t value.
+     *
+     * @param t - The t value at which to evaluate the curve.
+     */
+    eval(t: number): CurvePoint;
+    /**
+     * Split the curve into two separate polynomials at the given t value. The two
+     * resulting curves form the same overall shape as the original curve.
+     *
+     * @param t - The t value at which to split the curve.
+     */
+    abstract split(t: number): [PolynomialSegment, PolynomialSegment];
+    getPoint(distance: number): CurvePoint;
+    transformPoints(matrix: DOMMatrix): Vector2[];
+    /**
+     * Return the tangent of the point that sits at the provided t value on the
+     * curve.
+     *
+     * @param t - The t value at which to evaluate the curve.
+     */
+    tangent(t: number): Vector2;
+    draw(context: CanvasRenderingContext2D | Path2D, start?: number, end?: number, move?: boolean): [CurvePoint, CurvePoint];
+    protected abstract doDraw(context: CanvasRenderingContext2D | Path2D): void;
+}
+
+/**
+ * A spline segment representing a cubic Bézier curve.
+ */
+declare class CubicBezierSegment extends PolynomialSegment {
+    readonly p0: Vector2;
+    readonly p1: Vector2;
+    readonly p2: Vector2;
+    readonly p3: Vector2;
+    private static el;
+    get points(): Vector2[];
+    constructor(p0: Vector2, p1: Vector2, p2: Vector2, p3: Vector2);
+    split(t: number): [PolynomialSegment, PolynomialSegment];
+    protected doDraw(context: CanvasRenderingContext2D | Path2D): void;
+    protected static getLength(p0: Vector2, p1: Vector2, p2: Vector2, p3: Vector2): number;
+}
+
+type KnotAutoHandles = {
+    start: number;
+    end: number;
+};
+interface KnotInfo {
+    position: Vector2;
+    startHandle: Vector2;
+    endHandle: Vector2;
+    auto: KnotAutoHandles;
+}
+
+/**
+ * Calculate the curve profile of a spline based on a set of knots.
+ *
+ * @param knots - The knots defining the spline
+ * @param closed - Whether the spline should be closed or not
+ * @param smoothness - The desired smoothness of the spline when using auto
+ *                     calculated handles.
+ */
+declare function getBezierSplineProfile(knots: KnotInfo[], closed: boolean, smoothness: number): CurveProfile;
+
+declare function getCircleProfile(size: Vector2, startAngle: number, endAngle: number, closed: boolean, counterclockwise?: boolean): CurveProfile;
+
+declare function getPointAtDistance(profile: CurveProfile, distance: number): CurvePoint;
+
+declare function getPolylineProfile(points: readonly Vector2[], radius: number, closed: boolean): CurveProfile;
+
+declare function getRectProfile(rect: BBox, radius: Spacing, smoothCorners: boolean, cornerSharpness: number): CurveProfile;
+
+declare class LineSegment extends Segment {
+    readonly from: Vector2;
+    readonly to: Vector2;
+    private readonly length;
+    private readonly vector;
+    private readonly normal;
+    readonly points: Vector2[];
+    constructor(from: Vector2, to: Vector2);
+    get arcLength(): number;
+    draw(context: CanvasRenderingContext2D | Path2D, start?: number, end?: number, move?: boolean): [CurvePoint, CurvePoint];
+    getPoint(distance: number): CurvePoint;
+}
+
+/**
+ * A spline segment representing a quadratic Bézier curve.
+ */
+declare class QuadBezierSegment extends PolynomialSegment {
+    readonly p0: Vector2;
+    readonly p1: Vector2;
+    readonly p2: Vector2;
+    private static el;
+    get points(): Vector2[];
+    constructor(p0: Vector2, p1: Vector2, p2: Vector2);
+    split(t: number): [PolynomialSegment, PolynomialSegment];
+    protected static getLength(p0: Vector2, p1: Vector2, p2: Vector2): number;
+    protected doDraw(context: CanvasRenderingContext2D | Path2D): void;
+}
+
+interface BezierOverlayInfo {
+    curve: Path2D;
+    handleLines: Path2D;
+    controlPoints: Vector2[];
+    startPoint: Vector2;
+    endPoint: Vector2;
+}
+declare abstract class Bezier extends Curve {
+    profile(): CurveProfile;
+    protected abstract segment(): PolynomialSegment;
+    protected abstract overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+    protected childrenBBox(): BBox;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+
+interface CircleProps extends CurveProps {
+    /**
+     * {@inheritDoc Circle.startAngle}
+     */
+    startAngle?: SignalValue<number>;
+    /**
+     * {@inheritDoc Circle.endAngle}
+     */
+    endAngle?: SignalValue<number>;
+    /**
+     * {@inheritDoc Circle.counterclockwise}
+     */
+    counterclockwise?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Circle.closed}
+     */
+    closed?: SignalValue<boolean>;
+}
+/**
+ * A node for drawing circular shapes.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: circle, ellipse, arc, and
+ * sector (pie chart).
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple circle
+ * import {makeScene2D, Circle} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *    );
+ * });
+ *
+ * // snippet Ellipse
+ * import {makeScene2D, Circle} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Circle
+ *       width={160}
+ *       height={80}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ * });
+ *
+ * // snippet Sector (pie chart):
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *       startAngle={30}
+ *       endAngle={270}
+ *       closed={true}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(270, 2).to(30, 2);
+ * });
+ *
+ * // snippet Arc:
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       startAngle={-90}
+ *       endAngle={90}
+ *     />
+ *   );
+ *
+ *   yield* ref().startAngle(-270, 2).to(-90, 2);
+ * });
+ *
+ * // snippet Curve properties:
+ * import {makeScene2D, Circle} from '@twick/2d';
+ * import {all, createRef, easeInCubic, easeOutCubic} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Circle>();
+ *   view.add(
+ *     <Circle
+ *       ref={ref}
+ *       size={160}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       endAngle={270}
+ *       endArrow
+ *     />,
+ *   );
+ *
+ *   yield* all(ref().start(1, 1), ref().rotation(180, 1, easeInCubic));
+ *   ref().start(0).end(0);
+ *   yield* all(ref().end(1, 1), ref().rotation(360, 1, easeOutCubic));
+ * });
+ * ```
+ */
+declare class Circle extends Curve {
+    /**
+     * The starting angle in degrees for the circle sector.
+     *
+     * @remarks
+     * This property can be used together with {@link startAngle} to turn this
+     * circle into a sector (when using fill) or an arc (when using stroke).
+     *
+     * @defaultValue 0
+     */
+    readonly startAngle: SimpleSignal<number, this>;
+    /**
+     * The ending angle in degrees for the circle sector.
+     *
+     * @remarks
+     * This property can be used together with {@link endAngle} to turn this
+     * circle into a sector (when using fill) or an arc (when using stroke).
+     *
+     * @defaultValue 360
+     */
+    readonly endAngle: SimpleSignal<number, this>;
+    /**
+     * Whether the circle sector should be drawn counterclockwise.
+     *
+     * @remarks
+     * By default, the circle begins at {@link startAngle} and is drawn clockwise
+     * until reaching {@link endAngle}. Setting this property to true will reverse
+     * this direction.
+     */
+    readonly counterclockwise: SimpleSignal<boolean, this>;
+    /**
+     * Whether the path of this circle should be closed.
+     *
+     * @remarks
+     * When set to true, the path of this circle will start and end at the center.
+     * This can be used to fine-tune how sectors are rendered.
+     *
+     * @example
+     * A closed circle will look like a pie chart:
+     * ```tsx
+     * <Circle
+     *   size={300}
+     *   fill={'lightseagreen'}
+     *   endAngle={230}
+     *   closed={true}
+     * />
+     * ```
+     * An open one will look like an arc:
+     * ```tsx
+     * <Circle
+     *   size={300}
+     *   stroke={'lightseagreen'}
+     *   lineWidth={8}
+     *   endAngle={230}
+     *   closed={false}
+     * />
+     * ```
+     *
+     * @defaultValue false
+     */
+    readonly closed: SimpleSignal<boolean, this>;
+    constructor(props: CircleProps);
+    profile(): CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected getPath(): Path2D;
+    protected getRipplePath(): Path2D;
+    protected getCacheBBox(): BBox;
+    protected createPath(expand?: number): Path2D;
+}
+
+interface DrawTokenHook {
+    (ctx: CanvasRenderingContext2D, text: string, position: Vector2, color: string, selection: number): void;
+}
+/**
+ * Describes custom drawing logic used by the Code node.
+ */
+interface DrawHooks {
+    /**
+     * Custom drawing logic for individual code tokens.
+     *
+     * @example
+     * ```ts
+     * token(ctx, text, position, color, selection) {
+     *   const blur = map(3, 0, selection);
+     *   const alpha = map(0.5, 1, selection);
+     *   ctx.globalAlpha *= alpha;
+     *   ctx.filter = `blur(${blur}px)`;
+     *   ctx.fillStyle = color;
+     *   ctx.fillText(text, position.x, position.y);
+     * }
+     * ```
+     */
+    token: DrawTokenHook;
+}
+interface CodeProps extends ShapeProps {
+    /**
+     * {@inheritDoc Code.highlighter}
+     */
+    highlighter?: SignalValue<CodeHighlighter | null>;
+    /**
+     * {@inheritDoc Code.code}
+     */
+    code?: SignalValue<PossibleCodeScope>;
+    /**
+     * {@inheritDoc Code.selection}
+     */
+    selection?: SignalValue<PossibleCodeSelection>;
+    /**
+     * {@inheritDoc Code.drawHooks}
+     */
+    drawHooks?: SignalValue<DrawHooks>;
+}
+/**
+ * A node for displaying and animating code.
+ *
+ * @experimental
+ *
+ * @preview
+ * ```tsx editor
+ * import {parser} from '@lezer/javascript';
+ * import {Code, LezerHighlighter, makeScene2D} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   LezerHighlighter.registerParser(parser);
+ *   const code = createRef<Code>();
+ *
+ *   view.add(
+ *     <Code
+ *       ref={code}
+ *       offset={-1}
+ *       position={view.size().scale(-0.5).add(60)}
+ *       fontFamily={'JetBrains Mono, monospace'}
+ *       fontSize={36}
+ *       code={`\
+ * function hello() {
+ *   console.log('Hello');
+ * }`}
+ *     />,
+ *   );
+ *
+ *   yield* code()
+ *     .code(
+ *       `\
+ * function hello() {
+ *   console.warn('Hello World');
+ * }`,
+ *       1,
+ *     )
+ *     .wait(0.5)
+ *     .back(1)
+ *     .wait(0.5);
+ * });
+ * ```
+ */
+declare class Code extends Shape {
+    /**
+     * Create a standalone code signal.
+     *
+     * @param initial - The initial code.
+     * @param highlighter - Custom highlighter to use.
+     */
+    static createSignal(initial: PossibleCodeScope, highlighter?: SignalValue<CodeHighlighter>): CodeSignal<void>;
+    static defaultHighlighter: CodeHighlighter | null;
+    /**
+     * The code highlighter to use for this code node.
+     *
+     * @remarks
+     * Defaults to a shared {@link code.LezerHighlighter}.
+     */
+    readonly highlighter: SimpleSignal<CodeHighlighter | null, this>;
+    /**
+     * The code to display.
+     */
+    readonly code: CodeSignal<this>;
+    /**
+     * Custom drawing logic for the code.
+     *
+     * @remarks
+     * Check out {@link DrawHooks} for available render hooks.
+     *
+     * @example
+     * Make the unselected code blurry and transparent:
+     * ```tsx
+     * <Code
+     *   drawHooks={{
+     *     token(ctx, text, position, color, selection) {
+     *       const blur = map(3, 0, selection);
+     *       const alpha = map(0.5, 1, selection);
+     *       ctx.globalAlpha *= alpha;
+     *       ctx.filter = `blur(${blur}px)`;
+     *       ctx.fillStyle = color;
+     *       ctx.fillText(text, position.x, position.y);
+     *     },
+     *   }}
+     *   // ...
+     * />
+     * ```
+     */
+    readonly drawHooks: SimpleSignal<DrawHooks, this>;
+    protected setDrawHooks(value: DrawHooks): void;
+    /**
+     * The currently selected code range.
+     *
+     * @remarks
+     * Either a single {@link code.CodeRange} or an array of them
+     * describing which parts of the code should be visually emphasized.
+     *
+     * You can use {@link code.word} and
+     * {@link code.lines} to quickly create ranges.
+     *
+     * @example
+     * The following will select the word "console" in the code.
+     * Both lines and columns are 0-based. So it will select a 7-character-long
+     * (`7`) word in the second line (`1`) starting at the third character (`2`).
+     * ```tsx
+     * <Code
+     *   selection={word(1, 2, 7)}
+     *   code={`\
+     * function hello() => {
+     *   console.log('Hello');
+     * }`}
+     *   // ...
+     * />
+     * ```
+     */
+    readonly selection: Signal<PossibleCodeSelection, CodeSelection, this>;
+    oldSelection: CodeSelection | null;
+    selectionProgress: SimpleSignal<number | null, void>;
+    protected tweenSelection(value: CodeRange[], duration: number, timingFunction: TimingFunction): ThreadGenerator;
+    /**
+     * Get the currently displayed code as a string.
+     */
+    parsed(): string;
+    highlighterCache(): {
+        before: unknown;
+        after: unknown;
+    } | null;
+    private cursorCache;
+    private get cursor();
+    constructor(props: CodeProps);
+    /**
+     * Create a child code signal.
+     *
+     * @param initial - The initial code.
+     */
+    createSignal(initial: PossibleCodeScope): CodeSignal<this>;
+    /**
+     * Find all code ranges that match the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findAllRanges(pattern: string | RegExp): CodeRange[];
+    /**
+     * Find the first code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findFirstRange(pattern: string | RegExp): CodeRange;
+    /**
+     * Find the last code range that matches the given pattern.
+     *
+     * @param pattern - Either a string or a regular expression to match.
+     */
+    findLastRange(pattern: string | RegExp): CodeRange;
+    /**
+     * Return the bounding box of the given point (character) in the code.
+     *
+     * @remarks
+     * The returned bound box is in local space of the `Code` node.
+     *
+     * @param point - The point to get the bounding box for.
+     */
+    getPointBbox(point: CodePoint): BBox;
+    /**
+     * Return bounding boxes of all characters in the selection.
+     *
+     * @remarks
+     * The returned bound boxes are in local space of the `Code` node.
+     * Each line of code has a separate bounding box.
+     *
+     * @param selection - The selection to get the bounding boxes for.
+     */
+    getSelectionBbox(selection: PossibleCodeSelection): BBox[];
+    protected drawingInfo(): {
+        fragments: CodeFragmentDrawingInfo[];
+        verticalOffset: number;
+        fontHeight: number;
+    };
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected applyText(context: CanvasRenderingContext2D): void;
+    protected collectAsyncResources(): void;
+}
+
+interface CubicBezierProps extends CurveProps {
+    p0?: SignalValue<PossibleVector2>;
+    p0X?: SignalValue<number>;
+    p0Y?: SignalValue<number>;
+    p1?: SignalValue<PossibleVector2>;
+    p1X?: SignalValue<number>;
+    p1Y?: SignalValue<number>;
+    p2?: SignalValue<PossibleVector2>;
+    p2X?: SignalValue<number>;
+    p2Y?: SignalValue<number>;
+    p3?: SignalValue<PossibleVector2>;
+    p3X?: SignalValue<number>;
+    p3Y?: SignalValue<number>;
+}
+/**
+ * A node for drawing a cubic Bézier curve.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D, CubicBezier} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const bezier = createRef<CubicBezier>();
+ *
+ *   view.add(
+ *     <CubicBezier
+ *       ref={bezier}
+ *       lineWidth={4}
+ *       stroke={'lightseagreen'}
+ *       p0={[-200, -100]}
+ *       p1={[100, -100]}
+ *       p2={[-100, 100]}
+ *       p3={[200, 100]}
+ *       end={0}
+ *     />
+ *   );
+ *
+ *   yield* bezier().end(1, 1);
+ *   yield* bezier().start(1, 1).to(0, 1);
+ * });
+ * ```
+ */
+declare class CubicBezier extends Bezier {
+    /**
+     * The start point of the Bézier curve.
+     */
+    readonly p0: Vector2Signal<this>;
+    /**
+     * The first control point of the Bézier curve.
+     */
+    readonly p1: Vector2Signal<this>;
+    /**
+     * The second control point of the Bézier curve.
+     */
+    readonly p2: Vector2Signal<this>;
+    /**
+     * The end point of the Bézier curve.
+     */
+    readonly p3: Vector2Signal<this>;
+    constructor(props: CubicBezierProps);
+    protected segment(): PolynomialSegment;
+    protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+}
+
+interface GridProps extends ShapeProps {
+    /**
+     * {@inheritDoc Grid.spacing}
+     */
+    spacing?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Grid.start}
+     */
+    start?: SignalValue<number>;
+    /**
+     * {@inheritDoc Grid.end}
+     */
+    end?: SignalValue<number>;
+}
+/**
+ * A node for drawing a two-dimensional grid.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Grid, makeScene2D} from '@twick/2d';
+ * import {all, createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const grid = createRef<Grid>();
+ *
+ *   view.add(
+ *     <Grid
+ *       ref={grid}
+ *       width={'100%'}
+ *       height={'100%'}
+ *       stroke={'#666'}
+ *       start={0}
+ *       end={1}
+ *     />,
+ *   );
+ *
+ *   yield* all(
+ *     grid().end(0.5, 1).to(1, 1).wait(1),
+ *     grid().start(0.5, 1).to(0, 1).wait(1),
+ *   );
+ * });
+ * ```
+ */
+declare class Grid extends Shape {
+    /**
+     * The spacing between the grid lines.
+     */
+    readonly spacing: Vector2Signal<this>;
+    /**
+     * The percentage that should be clipped from the beginning of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes before the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly start: SimpleSignal<number, this>;
+    /**
+     * The percentage that should be clipped from the end of each grid line.
+     *
+     * @remarks
+     * The portion of each grid line that comes after the given percentage will
+     * be made invisible.
+     *
+     * This property is useful for animating the grid appearing on-screen.
+     */
+    readonly end: SimpleSignal<number, this>;
+    constructor(props: GridProps);
+    protected drawShape(context: CanvasRenderingContext2D): void;
+    private mapPoints;
+}
+
+interface ImgProps extends RectProps {
+    /**
+     * {@inheritDoc Img.src}
+     */
+    src?: SignalValue<string | null>;
+    /**
+     * {@inheritDoc Img.alpha}
+     */
+    alpha?: SignalValue<number>;
+    /**
+     * {@inheritDoc Img.smoothing}
+     */
+    smoothing?: SignalValue<boolean>;
+}
+/**
+ * A node for displaying images.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Img} from '@twick/2d';
+ * import {all, waitFor} from '@twick/core';
+ * import {createRef} from '@twick/core';
+ * import {makeScene2D} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Img>();
+ *   yield view.add(
+ *     <Img
+ *       ref={ref}
+ *       src="https://images.unsplash.com/photo-1679218407381-a6f1660d60e9"
+ *       width={300}
+ *       radius={20}
+ *     />,
+ *   );
+ *
+ *   // set the background using the color sampled from the image:
+ *   ref().fill(ref().getColorAtPoint(0));
+ *
+ *   yield* all(
+ *     ref().size([100, 100], 1).to([300, null], 1),
+ *     ref().radius(50, 1).to(20, 1),
+ *     ref().alpha(0, 1).to(1, 1),
+ *   );
+ *   yield* waitFor(0.5);
+ * });
+ * ```
+ */
+declare class Img extends Rect {
+    private static pool;
+    /**
+     * The source of this image.
+     *
+     * @example
+     * Using a local image:
+     * ```tsx
+     * import image from './example.png';
+     * // ...
+     * view.add(<Img src={image} />)
+     * ```
+     * Loading an image from the internet:
+     * ```tsx
+     * view.add(<Img src="https://example.com/image.png" />)
+     * ```
+     */
+    readonly src: SimpleSignal<string, this>;
+    /**
+     * The alpha value of this image.
+     *
+     * @remarks
+     * Unlike opacity, the alpha value affects only the image itself, leaving the
+     * fill, stroke, and children intact.
+     */
+    readonly alpha: SimpleSignal<number, this>;
+    /**
+     * Whether the image should be smoothed.
+     *
+     * @remarks
+     * When disabled, the image will be scaled using the nearest neighbor
+     * interpolation with no smoothing. The resulting image will appear pixelated.
+     *
+     * @defaultValue true
+     */
+    readonly smoothing: SimpleSignal<boolean, this>;
+    constructor(props: ImgProps);
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected image(): HTMLImageElement;
+    protected imageCanvas(): CanvasRenderingContext2D;
+    protected filledImageCanvas(): CanvasRenderingContext2D;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected applyFlex(): void;
+    /**
+     * Get color of the image at the given position.
+     *
+     * @param position - The position in local space at which to sample the color.
+     */
+    getColorAtPoint(position: PossibleVector2): Color;
+    /**
+     * The natural size of this image.
+     *
+     * @remarks
+     * The natural size is the size of the source image unaffected by the size
+     * and scale properties.
+     */
+    naturalSize(): Vector2;
+    /**
+     * Get color of the image at the given pixel.
+     *
+     * @param position - The pixel's position.
+     */
+    getPixelColor(position: PossibleVector2): Color;
+    protected collectAsyncResources(): void;
+}
+
+interface IconProps extends ImgProps {
+    /**
+     * {@inheritDoc Icon.icon}
+     */
+    icon: SignalValue<string>;
+    /**
+     * {@inheritDoc Icon.color}
+     */
+    color?: SignalValue<PossibleColor>;
+}
+/**
+ * An Icon Component that provides easy access to over 150k icons.
+ * See https://icones.js.org/collection/all for all available Icons.
+ */
+declare class Icon extends Img {
+    /**
+     * The identifier of the icon.
+     *
+     * @remarks
+     * You can find identifiers on [Icônes](https://icones.js.org).
+     * They can look like this:
+     * * `mdi:language-typescript`
+     * * `ph:anchor-simple-bold`
+     * * `ph:activity-bold`
+     */
+    icon: SimpleSignal<string, this>;
+    /**
+     * The color of the icon
+     *
+     * @remarks
+     * Provide the color in one of the following formats:
+     * * named color like `red`, `darkgray`, …
+     * * hexadecimal string with # like `#bada55`, `#141414`
+     *   Value can be either RGB or RGBA: `#bada55`, `#bada55aa` (latter is partially transparent)
+     *   The shorthand version (e.g. `#abc` for `#aabbcc` is also possible.)
+     *
+     * @defaultValue 'white'
+     */
+    color: ColorSignal<this>;
+    constructor(props: IconProps);
+    /**
+     * Create the URL that will be used as the Image source
+     * @returns Address to Iconify API for the requested Icon.
+     */
+    protected svgUrl(): string;
+    /**
+     * overrides `Image.src` getter
+     */
+    protected getSrc(): string;
+    /**
+     * overrides `Image.src` setter to warn the user that the value
+     * is not used
+     */
+    protected setSrc(src: string | null): void;
+}
+
+interface KnotProps extends NodeProps {
+    /**
+     * {@inheritDoc Knot.startHandle}
+     */
+    startHandle?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Knot.endHandle}
+     */
+    endHandle?: SignalValue<PossibleVector2>;
+    /**
+     * {@inheritDoc Knot.auto}
+     */
+    auto?: SignalValue<PossibleKnotAuto>;
+    startHandleAuto?: SignalValue<number>;
+    endHandleAuto?: SignalValue<number>;
+}
+type KnotAuto = {
+    startHandle: number;
+    endHandle: number;
+};
+type PossibleKnotAuto = KnotAuto | number | [number, number];
+type KnotAutoSignal<TOwner> = Signal<PossibleKnotAuto, KnotAuto, TOwner> & {
+    endHandle: Signal<number, number, TOwner>;
+    startHandle: Signal<number, number, TOwner>;
+};
+/**
+ * A node representing a knot of a {@link Spline}.
+ */
+declare class Knot extends Node {
+    /**
+     * The position of the knot's start handle. The position is provided relative
+     * to the knot's position.
+     *
+     * @remarks
+     * By default, the position of the start handle will be the mirrored position
+     * of the {@link endHandle}.
+     *
+     * If neither an end handle nor a start handle is provided, the positions of
+     * the handles gets calculated automatically to create smooth curve through
+     * the knot. The smoothness of the resulting curve can be controlled via the
+     * {@link Spline.smoothness} property.
+     *
+     * It is also possible to blend between a user-defined position and the
+     * auto-calculated position by using the {@link auto} property.
+     *
+     * @defaultValue Mirrored position of the endHandle.
+     */
+    readonly startHandle: Vector2Signal<this>;
+    /**
+     * The position of the knot's end handle. The position is provided relative
+     * to the knot's position.
+     *
+     * @remarks
+     * By default, the position of the end handle will be the mirrored position
+     * of the {@link startHandle}.
+     *
+     * If neither an end handle nor a start handle is provided, the positions of
+     * the handles gets calculated automatically to create smooth curve through
+     * the knot. The smoothness of the resulting curve can be controlled via the
+     * {@link Spline.smoothness} property.
+     *
+     * It is also possible to blend between a user-defined position and the
+     * auto-calculated position by using the {@link auto} property.
+     *
+     * @defaultValue Mirrored position of the startHandle.
+     */
+    readonly endHandle: Vector2Signal<this>;
+    /**
+     * How much to blend between the user-provided handles and the auto-calculated
+     * handles.
+     *
+     * @remarks
+     * This property has no effect if no explicit handles are provided for the
+     * knot.
+     *
+     * @defaultValue 0
+     */
+    readonly auto: KnotAutoSignal<this>;
+    get startHandleAuto(): Signal<number, number, this, _twick_core.SignalContext<number, number, this>>;
+    get endHandleAuto(): Signal<number, number, this, _twick_core.SignalContext<number, number, this>>;
+    constructor(props: KnotProps);
+    points(): KnotInfo;
+    private getDefaultEndHandle;
+    private getDefaultStartHandle;
+}
+
+interface LatexProps extends ImgProps {
+    tex?: SignalValue<string>;
+    renderProps?: SignalValue<OptionList>;
+}
+/**
+ * A node for rendering equations with LaTeX.
+ *
+ * @preview
+ * ```tsx editor
+ * import {Latex, makeScene2D} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Latex
+ *       // Note how this uses \color to set the color.
+ *       tex="{\color{white} ax^2+bx+c=0 \implies x=\frac{-b \pm \sqrt{b^2-4ac}}{2a}}"
+ *       width={600} // height and width can calculate based on each other
+ *     />,
+ *   );
+ * });
+ * ```
+ */
+declare class Latex extends Img {
+    private static svgContentsPool;
+    private static mathJaxInitialized;
+    private static adaptor;
+    private static jaxDocument;
+    private static initializeMathJax;
+    private readonly imageElement;
+    readonly options: SimpleSignal<OptionList, this>;
+    readonly tex: SimpleSignal<string, this>;
+    constructor(props: LatexProps);
+    protected image(): HTMLImageElement;
+}
+
+interface LineProps extends CurveProps {
+    /**
+     * {@inheritDoc Line.radius}
+     */
+    radius?: SignalValue<number>;
+    /**
+     * {@inheritDoc Line.points}
+     */
+    points?: SignalValue<SignalValue<PossibleVector2>[]>;
+}
+/**
+ * A node for drawing lines and polygons.
+ *
+ * @remarks
+ * This node can be used to render any polygonal shape defined by a set of
+ * points.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Simple line
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [150, 50],
+ *         [0, -50],
+ *         [-150, 50],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={40}
+ *       startArrow
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Polygon
+ * import {makeScene2D, Line} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-200, 70],
+ *         [150, 70],
+ *         [100, -70],
+ *         [-100, -70],
+ *       ]}
+ *       fill={'lightseagreen'}
+ *       closed
+ *     />,
+ *   );
+ * });
+ *
+ * // snippet Using signals
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createSignal} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const tip = createSignal(-150);
+ *   view.add(
+ *     <Line
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         // this point is dynamically calculated based on the signal:
+ *         () => [tip(), -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* tip(150, 1).back(1);
+ * });
+ *
+ * // snippet Tweening points
+ * import {makeScene2D, Line} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const line = createRef<Line>();
+ *   view.add(
+ *     <Line
+ *       ref={line}
+ *       points={[
+ *         [-150, 70],
+ *         [150, 70],
+ *         [0, -70],
+ *       ]}
+ *       stroke={'lightseagreen'}
+ *       lineWidth={8}
+ *       radius={20}
+ *       closed
+ *     />,
+ *   );
+ *
+ *   yield* line()
+ *     .points(
+ *       [
+ *         [-150, 0],
+ *         [0, 100],
+ *         [150, 0],
+ *         [150, -70],
+ *         [-150, -70],
+ *       ],
+ *       2,
+ *     )
+ *     .back(2);
+ * });
+ * ```
+ */
+declare class Line extends Curve {
+    /**
+     * Rotate the points to minimize the overall distance traveled when tweening.
+     *
+     * @param points - The points to rotate.
+     * @param reference - The reference points to which the distance is measured.
+     * @param closed - Whether the points form a closed polygon.
+     */
+    private static rotatePoints;
+    /**
+     * Distribute additional points along the polyline.
+     *
+     * @param points - The points of a polyline along which new points should be
+     *                 distributed.
+     * @param count - The number of points to add.
+     */
+    private static distributePoints;
+    /**
+     * The radius of the line's corners.
+     */
+    readonly radius: SimpleSignal<number, this>;
+    /**
+     * The points of the line.
+     *
+     * @remarks
+     * When set to `null`, the Line will use the positions of its children as
+     * points.
+     */
+    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+    protected tweenPoints(value: SignalValue<SignalValue<PossibleVector2>[] | null>, time: number, timingFunction: TimingFunction): ThreadGenerator;
+    private tweenedPoints;
+    constructor(props: LineProps);
+    protected childrenBBox(): BBox;
+    parsedPoints(): Vector2[];
+    profile(): CurveProfile;
+    protected lineWidthCoefficient(): number;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    private parsePoints;
+}
+
+interface PathProps extends CurveProps {
+    data: SignalValue<string>;
+}
+declare class Path extends Curve {
+    private currentProfile;
+    readonly data: SimpleSignal<string, this>;
+    constructor(props: PathProps);
+    profile(): CurveProfile;
+    protected childrenBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    protected processSubpath(path: Path2D, startPoint: Vector2 | null, endPoint: Vector2 | null): void;
+    protected tweenData(newPath: SignalValue<string>, time: number, timingFunction: TimingFunction): Generator<void | _twick_core.ThreadGenerator | Promise<any> | _twick_core.Promisable<any>, void, any>;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+
+interface PolygonProps extends CurveProps {
+    /**
+     * {@inheritDoc Polygon.sides}
+     */
+    sides?: SignalValue<number>;
+    /**
+     * {@inheritDoc Polygon.radius}
+     */
+    radius?: SignalValue<number>;
+}
+/**
+ * A node for drawing regular polygons.
+ *
+ * @remarks
+ * This node can be used to render shapes such as: triangle, pentagon,
+ * hexagon and more.
+ *
+ * Note that the polygon is inscribed in a circle defined by the height
+ * and width. If height and width are unequal, the polygon is inscribed
+ * in the resulting ellipse.
+ *
+ * Since the polygon is inscribed in the circle, the actual displayed
+ * height and width may differ somewhat from the bounding rectangle. This
+ * will be particularly noticeable if the number of sides is low, e.g. for a
+ * triangle.
+ *
+ * @preview
+ * ```tsx editor
+ * // snippet Polygon
+ * import {makeScene2D, Polygon} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ref = createRef<Polygon>();
+ *   view.add(
+ *     <Polygon
+ *       ref={ref}
+ *       sides={6}
+ *       size={160}
+ *       fill={'lightseagreen'}
+ *     />
+ *   );
+ *
+ *   yield* ref().sides(3, 2).to(6, 2);
+ * });
+ *
+ * // snippet Pentagon outline
+ * import {makeScene2D, Polygon} from '@twick/2d';
+ *
+ * export default makeScene2D(function* (view) {
+ *   view.add(
+ *     <Polygon
+ *       sides={5}
+ *       size={160}
+ *       radius={30}
+ *       stroke={'lightblue'}
+ *       lineWidth={8}
+ *     />
+ *   );
+ * });
+ * ```
+ */
+declare class Polygon extends Curve {
+    /**
+     * The number of sides of the polygon.
+     *
+     * @remarks
+     * For example, a value of 6 creates a hexagon.
+     *
+     * @example
+     * ```tsx
+     * <Polygon
+     *   size={320}
+     *   sides={7}
+     *   stroke={'#fff'}
+     *   lineWidth={8}
+     *   fill={'lightseagreen'}
+     * />
+     * ```
+     */
+    readonly sides: SimpleSignal<number, this>;
+    /**
+     * The radius of the polygon's corners.
+     *
+     * @example
+     * ```tsx
+     * <Polygon
+     *   radius={30}
+     *   size={320}
+     *   sides={3}
+     *   stroke={'#fff'}
+     *   lineWidth={8}
+     * />
+     * ```
+     */
+    readonly radius: SimpleSignal<number, this>;
+    constructor(props: PolygonProps);
+    profile(): CurveProfile;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    protected childrenBBox(): BBox;
+    protected requiresProfile(): boolean;
+    protected getPath(): Path2D;
+    protected getRipplePath(): Path2D;
+    protected createPath(expand?: number): Path2D;
+}
+
+interface QuadBezierProps extends CurveProps {
+    p0?: SignalValue<PossibleVector2>;
+    p0X?: SignalValue<number>;
+    p0Y?: SignalValue<number>;
+    p1?: SignalValue<PossibleVector2>;
+    p1X?: SignalValue<number>;
+    p1Y?: SignalValue<number>;
+    p2?: SignalValue<PossibleVector2>;
+    p2X?: SignalValue<number>;
+    p2Y?: SignalValue<number>;
+}
+/**
+ * A node for drawing a quadratic Bézier curve.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D, QuadBezier} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const bezier = createRef<QuadBezier>();
+ *
+ *   view.add(
+ *     <QuadBezier
+ *       ref={bezier}
+ *       lineWidth={4}
+ *       stroke={'lightseagreen'}
+ *       p0={[-200, 0]}
+ *       p1={[0, -200]}
+ *       p2={[200, 0]}
+ *       end={0}
+ *     />
+ *   );
+ *
+ *   yield* bezier().end(1, 1);
+ *   yield* bezier().start(1, 1).to(0, 1);
+ * });
+ * ```
+ */
+declare class QuadBezier extends Bezier {
+    /**
+     * The start point of the Bézier curve.
+     */
+    readonly p0: Vector2Signal<this>;
+    /**
+     * The control point of the Bézier curve.
+     */
+    readonly p1: Vector2Signal<this>;
+    /**
+     * The end point of the Bézier curve.
+     */
+    readonly p2: Vector2Signal<this>;
+    constructor(props: QuadBezierProps);
+    protected segment(): PolynomialSegment;
+    protected overlayInfo(matrix: DOMMatrix): BezierOverlayInfo;
+}
+
+interface RayProps extends CurveProps {
+    /**
+     * {@inheritDoc Ray.from}
+     */
+    from?: SignalValue<PossibleVector2>;
+    fromX?: SignalValue<number>;
+    fromY?: SignalValue<number>;
+    /**
+     * {@inheritDoc Ray.to}
+     */
+    to?: SignalValue<PossibleVector2>;
+    toX?: SignalValue<number>;
+    toY?: SignalValue<number>;
+}
+/**
+ * A node for drawing an individual line segment.
+ *
+ * @preview
+ * ```tsx editor
+ * import {makeScene2D} from '@twick/2d';
+ * import {Ray} from '@twick/2d';
+ * import {createRef} from '@twick/core';
+ *
+ * export default makeScene2D(function* (view) {
+ *   const ray = createRef<Ray>();
+ *
+ *   view.add(
+ *     <Ray
+ *       ref={ray}
+ *       lineWidth={8}
+ *       endArrow
+ *       stroke={'lightseagreen'}
+ *       fromX={-200}
+ *       toX={200}
+ *     />,
+ *   );
+ *
+ *   yield* ray().start(1, 1);
+ *   yield* ray().start(0).end(0).start(1, 1);
+ * });
+ * ```
+ */
+declare class Ray extends Curve {
+    /**
+     * The starting point of the ray.
+     */
+    readonly from: Vector2Signal<this>;
+    /**
+     * The ending point of the ray.
+     */
+    readonly to: Vector2Signal<this>;
+    constructor(props: RayProps);
+    protected childrenBBox(): BBox;
+    profile(): CurveProfile;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+}
+
+interface RiveProps extends RectProps {
+    src?: SignalValue<string>;
+    artboardId?: SignalValue<string | number>;
+    animationId?: SignalValue<string | number>;
+}
+declare class Rive extends Rect {
+    readonly src: SimpleSignal<string, this>;
+    readonly artboardId: SimpleSignal<number | string, this>;
+    readonly animationId: SimpleSignal<number | string, this>;
+    protected readonly time: SimpleSignal<number, this>;
+    protected currentTime: number;
+    protected lastTime: number;
+    constructor(props: RiveProps);
+    private rive;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    private getArtboard;
+    private getAnimation;
+}
+
+interface SplineProps extends CurveProps {
+    /**
+     * {@inheritDoc Spline.smoothness}
+     */
+    smoothness?: SignalValue<number>;
+    /**
+     * {@inheritDoc Spline.points}
+     */
+    points?: SignalValue<SignalValue<PossibleVector2[]>>;
+}
+/**
+ * A node for drawing a smooth line through a number of points.
+ *
+ * @remarks
+ * This node uses Bézier curves for drawing each segment of the spline.
+ *
+ * @example
+ * Defining knots using the `points` property. This will automatically
+ * calculate the handle positions for each knot do draw a smooth curve. You
+ * can control the smoothness of the resulting curve via the
+ * {@link Spline.smoothness} property:
+ *
+ * ```tsx
+ * <Spline
+ *   lineWidth={4}
+ *   stroke={'white'}
+ *   smoothness={0.4}
+ *   points={[
+ *     [-400, 0],
+ *     [-200, -300],
+ *     [0, 0],
+ *     [200, -300],
+ *     [400, 0],
+ *   ]}
+ * />
+ * ```
+ *
+ * Defining knots with {@link Knot} nodes:
+ *
+ * ```tsx
+ * <Spline lineWidth={4} stroke={'white'}>
+ *   <Knot position={[-400, 0]} />
+ *   <Knot position={[-200, -300]} />
+ *   <Knot
+ *     position={[0, 0]}
+ *     startHandle={[-100, 200]}
+ *     endHandle={[100, 200]}
+ *   />
+ *   <Knot position={[200, -300]} />
+ *   <Knot position={[400, 0]} />
+ * </Spline>
+ * ```
+ */
+declare class Spline extends Curve {
+    /**
+     * The smoothness of the spline when using auto-calculated handles.
+     *
+     * @remarks
+     * This property is only applied to knots that don't use explicit handles.
+     *
+     * @defaultValue 0.4
+     */
+    readonly smoothness: SimpleSignal<number>;
+    /**
+     * The knots of the spline as an array of knots with auto-calculated handles.
+     *
+     * @remarks
+     * You can control the smoothness of the resulting curve
+     * via the {@link smoothness} property.
+     */
+    readonly points: SimpleSignal<SignalValue<PossibleVector2>[] | null, this>;
+    constructor(props: SplineProps);
+    profile(): CurveProfile;
+    knots(): KnotInfo[];
+    protected childrenBBox(): BBox;
+    protected lineWidthCoefficient(): number;
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected offsetComputedLayout(box: BBox): BBox;
+    private getTightBBox;
+    drawOverlay(context: CanvasRenderingContext2D, matrix: DOMMatrix): void;
+    private isKnot;
+}
+
+/**
+ * Represent SVG shape.
+ * This only used single time because `node` may have reference to parent SVG renderer.
+ */
+interface SVGShape {
+    id: string;
+    shape: Node;
+}
+/**
+ * Data of SVGShape.
+ * This can used many times  because it do not reference parent SVG.
+ * This must build into SVGShape
+ */
+interface SVGShapeData {
+    id: string;
+    type: new (props: NodeProps) => Node;
+    props: ShapeProps;
+    children?: SVGShapeData[];
+}
+/**
+ * Represent SVG document that contains SVG shapes.
+ * This only used single time because `nodes` have reference to parent SVG renderer.
+ */
+interface SVGDocument {
+    size: Vector2;
+    nodes: SVGShape[];
+}
+/**
+ * Data of SVGDocument.
+ * This can used many times because it do not reference parent SVG.
+ * This must build into SVGDocument
+ */
+interface SVGDocumentData {
+    size: Vector2;
+    nodes: SVGShapeData[];
+}
+interface SVGProps extends ShapeProps {
+    svg: SignalValue<string>;
+}
+/**
+A Node for drawing and animating SVG images.
+
+@remarks
+If you're not interested in animating SVG, you can use {@link Img} instead.
+ */
+declare class SVG extends Shape {
+    protected static containerElement: HTMLDivElement;
+    private static svgNodesPool;
+    /**
+     * SVG string to be rendered
+     */
+    readonly svg: SimpleSignal<string, this>;
+    /**
+     * Child to wrap all SVG node
+     */
+    wrapper: Node;
+    private lastTweenTargetSrc;
+    private lastTweenTargetDocument;
+    constructor(props: SVGProps);
+    /**
+     * Get all SVG nodes with the given id.
+     * @param id - An id to query.
+     */
+    getChildrenById(id: string): Node[];
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected getCurrentSize(): {
+        x: number | null;
+        y: number | null;
+    };
+    protected calculateWrapperScale(documentSize: Vector2, parentSize: SerializedVector2<number | null>): Vector2;
+    /**
+     * Convert `SVGDocumentData` to `SVGDocument`.
+     * @param data - `SVGDocumentData` to convert.
+     */
+    protected buildDocument(data: SVGDocumentData): SVGDocument;
+    /**
+     * Convert `SVGShapeData` to `SVGShape`.
+     * @param data - `SVGShapeData` to convert.
+     */
+    protected buildShape({ id, type, props, children }: SVGShapeData): SVGShape;
+    /**
+     * Convert an SVG string to `SVGDocument`.
+     * @param svg - An SVG string to be parsed.
+     */
+    protected parseSVG(svg: string): SVGDocument;
+    /**
+     * Create a tweening list to tween between two SVG nodes.
+     * @param from - The initial node,
+     * @param to - The final node.
+     * @param duration - The duration of the tween.
+     * @param timing - The timing function.
+     */
+    protected generateTransformer(from: Node, to: Node, duration: number, timing: TimingFunction): Generator<ThreadGenerator>;
+    protected tweenSvg(value: SignalValue<string>, time: number, timingFunction: TimingFunction): Generator<void | ThreadGenerator | Promise<any> | _twick_core.Promisable<any>, void, any>;
+    private wrapperScale;
+    /**
+     * Get the current `SVGDocument`.
+     */
+    private document;
+    /**
+     * Get current document nodes.
+     */
+    private documentNodes;
+    /**
+     * Convert SVG colors in Shape properties to Motion Canvas colors.
+     * @param param - Shape properties.
+     * @returns Converted Shape properties.
+     */
+    private processElementStyle;
+    /**
+     * Parse an SVG string as `SVGDocumentData`.
+     * @param svg - And SVG string to be parsed.
+     * @returns `SVGDocumentData` that can be used to build SVGDocument.
+     */
+    protected static parseSVGData(svg: string): SVGDocumentData;
+    /**
+     * Get position, rotation and scale from Matrix transformation as Shape properties
+     * @param transform - Matrix transformation
+     * @returns MotionCanvas Shape properties
+     */
+    protected static getMatrixTransformation(transform: DOMMatrix): ShapeProps;
+    /**
+     * Convert an SVG color into a Motion Canvas color.
+     * @param color - SVG color.
+     * @returns Motion Canvas color.
+     */
+    private static processSVGColor;
+    /**
+     * Get the final transformation matrix for the given SVG element.
+     * @param element - SVG element.
+     * @param parentTransform - The transformation matrix of the parent.
+     */
+    private static getElementTransformation;
+    private static parseLineCap;
+    private static parseLineJoin;
+    private static parseLineDash;
+    private static parseDashOffset;
+    private static parseOpacity;
+    /**
+     * Convert the SVG element's style to a Motion Canvas Shape properties.
+     * @param element - An SVG element whose style should be converted.
+     * @param inheritedStyle - The parent style that should be inherited.
+     */
+    private static getElementStyle;
+    /**
+     * Extract `SVGShapeData` list from the SVG element's children.
+     * This will not extract the current element's shape.
+     * @param element - An element whose children will be extracted.
+     * @param svgRoot - The SVG root ("svg" tag) of the element.
+     * @param parentTransform - The transformation matrix applied to the parent.
+     * @param inheritedStyle - The style of the current SVG `element` that the children should inherit.
+     */
+    private static extractGroupNodes;
+    /**
+     * Parse a number from an SVG element attribute.
+     * @param element - SVG element whose attribute will be parsed.
+     * @param name - The name of the attribute to parse.
+     * @returns a parsed number or `0` if the attribute is not defined.
+     */
+    private static parseNumberAttribute;
+    /**
+     * Extract `SVGShapeData` list from the SVG element.
+     * This will also recursively extract shapes from its children.
+     * @param child - An SVG element to extract.
+     * @param svgRoot - The SVG root ("svg" tag) of the element.
+     * @param parentTransform - The transformation matrix applied to the parent.
+     * @param inheritedStyle - The style of the parent SVG element that the element should inherit.
+     */
+    private static extractElementNodes;
+}
+
+interface TxtLeafProps extends ShapeProps {
+    children?: string;
+    text?: SignalValue<string>;
+}
+declare const TXT_TYPE: unique symbol;
+declare class TxtLeaf extends Shape {
+    protected static readonly segmenter: any;
+    readonly text: SimpleSignal<string, this>;
+    constructor({ children, ...rest }: TxtLeafProps);
+    protected parentTxt(): (Node & Record<typeof TXT_TYPE, unknown>) | null;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected drawText(context: CanvasRenderingContext2D, text: string, box: BBox): Promise<void>;
+    protected getCacheBBox(): BBox;
+    protected applyFlex(): void;
+    protected updateLayout(): void;
+}
+
+type TxtChildren = string | Node | (string | Node)[];
+type AnyTxt = Txt | TxtLeaf;
+interface TxtProps extends ShapeProps {
+    children?: TxtChildren;
+    text?: SignalValue<string>;
+}
+declare class Txt extends Shape {
+    readonly [TXT_TYPE] = true;
+    /**
+     * Create a bold text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontWeight={700} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static b(props: TxtProps): Txt;
+    /**
+     * Create an italic text node.
+     *
+     * @remarks
+     * This is a shortcut for
+     * ```tsx
+     * <Txt fontStyle={'italic'} />
+     * ```
+     *
+     * @param props - Additional text properties.
+     */
+    static i(props: TxtProps): Txt;
+    readonly text: SimpleSignal<string, this>;
+    protected getText(): string;
+    protected setText(value: SignalValue<string>): void;
+    protected setChildren(value: SignalValue<ComponentChildren>): void;
+    protected tweenText(value: SignalValue<string>, time: number, timingFunction: TimingFunction, interpolationFunction: InterpolationFunction<string>): ThreadGenerator;
+    protected getLayout(): boolean;
+    constructor({ children, text, ...props }: TxtProps);
+    protected innerText(): string;
+    protected parentTxt(): Txt | null;
+    protected parseChildren(children: ComponentChildren): AnyTxt[];
+    protected applyFlex(): void;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+}
+
+interface VideoProps extends MediaProps {
+    /**
+     * {@inheritDoc Video.alpha}
+     */
+    alpha?: SignalValue<number>;
+    /**
+     * {@inheritDoc Video.smoothing}
+     */
+    smoothing?: SignalValue<boolean>;
+    /**
+     * {@inheritDoc Video.decoder}
+     */
+    decoder?: SignalValue<'web' | 'ffmpeg' | 'slow' | null>;
+}
+declare class Video extends Media {
+    /**
+     * The alpha value of this video.
+     *
+     * @remarks
+     * Unlike opacity, the alpha value affects only the video itself, leaving the
+     * fill, stroke, and children intact.
+     */
+    readonly alpha: SimpleSignal<number, this>;
+    /**
+     * Whether the video should be smoothed.
+     *
+     * @remarks
+     * When disabled, the video will be scaled using the nearest neighbor
+     * interpolation with no smoothing. The resulting video will appear pixelated.
+     *
+     * @defaultValue true
+     */
+    readonly smoothing: SimpleSignal<boolean, this>;
+    /**
+     * Which decoder to use during rendering. The `web` decoder is the fastest
+     * but only supports MP4 files. The `ffmpeg` decoder is slower and more resource
+     * intensive but supports more formats. The `slow` decoder is the slowest but
+     * supports all formats.
+     *
+     * @defaultValue null
+     */
+    readonly decoder: SimpleSignal<'web' | 'ffmpeg' | 'slow' | null, this>;
+    detectedFileType: 'mp4' | 'webm' | 'hls' | 'mov' | 'unknown';
+    private fileTypeWasDetected;
+    private static readonly pool;
+    private static readonly imageCommunication;
+    constructor(props: VideoProps);
+    protected desiredSize(): SerializedVector2<DesiredLength>;
+    protected mediaElement(): HTMLVideoElement;
+    protected seekedMedia(): HTMLVideoElement;
+    protected fastSeekedMedia(): HTMLVideoElement;
+    private video;
+    protected seekedVideo(): HTMLVideoElement;
+    protected fastSeekedVideo(): HTMLVideoElement;
+    protected lastFrame: ImageBitmap | null;
+    protected webcodecSeekedVideo(): Promise<CanvasImageSource>;
+    protected ffmpegSeekedVideo(): Promise<ImageBitmap>;
+    protected seekFunction(): Promise<CanvasImageSource>;
+    protected draw(context: CanvasRenderingContext2D): Promise<void>;
+    protected applyFlex(): void;
+    remove(): this;
+    private handleUnknownFileType;
+    private detectFileType;
+}
+
+interface CodeMetrics {
+    content: string;
+    newRows: number;
+    endColumn: number;
+    firstWidth: number;
+    maxWidth: number;
+    lastWidth: number;
+}
+
+interface CodeFragment {
+    before: CodeMetrics;
+    after: CodeMetrics;
+}
+interface RawCodeFragment {
+    before: string;
+    after: string;
+}
+type PossibleCodeFragment = CodeFragment | CodeMetrics | RawCodeFragment | string;
+declare function metricsToFragment(value: CodeMetrics): CodeFragment;
+declare function parseCodeFragment(value: PossibleCodeFragment, context: CanvasRenderingContext2D, monoWidth: number): CodeFragment;
+/**
+ * Create a code fragment that represents an insertion of code.
+ *
+ * @remarks
+ * Can be used in conjunction with {@link code.CodeSignalHelpers.edit}.
+ *
+ * @param code - The code to insert.
+ */
+declare function insert(code: string): RawCodeFragment;
+/**
+ * Create a code fragment that represents a change from one piece of code to
+ * another.
+ *
+ * @remarks
+ * Can be used in conjunction with {@link code.CodeSignalHelpers.edit}.
+ *
+ * @param before - The code to change from.
+ * @param after - The code to change to.
+ */
+declare function replace(before: string, after: string): RawCodeFragment;
+/**
+ * Create a code fragment that represents a removal of code.
+ *
+ * @remarks
+ * Can be used in conjunction with {@link code.CodeSignalHelpers.edit}.
+ *
+ * @param code - The code to remove.
+ */
+declare function remove(code: string): RawCodeFragment;
+
+interface CodeScope {
+    progress: SignalValue<number>;
+    fragments: CodeTag[];
+}
+type PossibleCodeScope = CodeScope | CodeTag[] | string;
+type CodeTag = SignalValue<PossibleCodeFragment | CodeScope | CodeTag[]>;
+declare function CODE(strings: TemplateStringsArray, ...tags: CodeTag[]): CodeTag[];
+declare function isCodeScope(value: any): value is CodeScope;
+declare function parseCodeScope(value: PossibleCodeScope): CodeScope;
+type IsAfterPredicate = ((scope: CodeScope) => boolean) | boolean;
+declare function resolveScope(scope: CodeScope, isAfter: IsAfterPredicate): string;
+declare function resolveCodeTag(wrapped: CodeTag, after: boolean, isAfter?: IsAfterPredicate): string;
+
+interface CodeFragmentDrawingInfo {
+    text: string;
+    position: Vector2;
+    characterSize: Vector2;
+    cursor: Vector2;
+    fill: string;
+    time: number;
+    alpha: number;
+}
+/**
+ * A stateful class for recursively traversing a code scope.
+ *
+ * @internal
+ */
+declare class CodeCursor {
+    private readonly node;
+    cursor: Vector2;
+    beforeCursor: Vector2;
+    afterCursor: Vector2;
+    beforeIndex: number;
+    afterIndex: number;
+    private context;
+    private monoWidth;
+    private maxWidth;
+    private lineHeight;
+    private fallbackFill;
+    private caches;
+    private highlighter;
+    private selection;
+    private selectionProgress;
+    private globalProgress;
+    private fragmentDrawingInfo;
+    private fontHeight;
+    private verticalOffset;
+    constructor(node: Code);
+    /**
+     * Prepare the cursor for the next traversal.
+     *
+     * @param context - The context used to measure and draw the code.
+     */
+    setupMeasure(context: CanvasRenderingContext2D): void;
+    setupDraw(context: CanvasRenderingContext2D): void;
+    /**
+     * Measure the desired size of the code scope.
+     *
+     * @remarks
+     * The result can be retrieved with {@link getSize}.
+     *
+     * @param scope - The code scope to measure.
+     */
+    measureSize(scope: CodeScope): void;
+    /**
+     * Get the size measured by the cursor.
+     */
+    getSize(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Get the drawing information created by the cursor.
+     */
+    getDrawingInfo(): {
+        fragments: CodeFragmentDrawingInfo[];
+        verticalOffset: number;
+        fontHeight: number;
+    };
+    /**
+     * Draw the given code scope.
+     *
+     * @param scope - The code scope to draw.
+     */
+    drawScope(scope: CodeScope): void;
+    private drawToken;
+    private calculateWidth;
+    private calculateMaxWidth;
+    private currentProgress;
+    private processSelection;
+    private isSelected;
+}
+
+type CodeTokenizer = (input: string) => string[];
+/**
+ * Default tokenizer function used by ownerless code signals.
+ *
+ * @param input - The code to tokenize.
+ */
+declare function defaultTokenize(input: string): string[];
+
+/**
+ * A function that compares two code snippets and returns a list of
+ * {@link CodeTag}s describing a transition between them.
+ */
+type CodeDiffer = (
+/**
+ * The original code scope.
+ */
+from: CodeScope, 
+/**
+ * The new code scope.
+ */
+to: CodeScope, 
+/**
+ * The inherited tokenizer to use.
+ */
+tokenize: CodeTokenizer) => CodeTag[];
+/**
+ * Default diffing function utilizing {@link code.patienceDiff}.
+ *
+ * @param from - The original code scope.
+ * @param to - The new code scope.
+ * @param tokenize - The inherited tokenizer to use.
+ */
+declare function defaultDiffer(from: CodeScope, to: CodeScope, tokenize: CodeTokenizer): CodeTag[];
+
+/**
+ * Describes the result of a highlight operation.
+ */
+interface HighlightResult {
+    /**
+     * The color of the code at the given index.
+     */
+    color: string | null;
+    /**
+     * The number of characters to skip ahead.
+     *
+     * @remarks
+     * This should be used to skip to the end of the currently highlighted token.
+     * The returned style will be used for the skipped characters, and they will
+     * be drawn as one continuous string keeping emojis and ligatures intact.
+     *
+     * The returned value is the number of characters to skip ahead, not the
+     * index of the end of the token.
+     */
+    skipAhead: number;
+}
+/**
+ * Describes custom highlighters used by the Code node.
+ *
+ * @typeParam T - The type of the cache used by the highlighter.
+ */
+interface CodeHighlighter<T = unknown> {
+    /**
+     * Initializes the highlighter.
+     *
+     * @remarks
+     * This method is called when collecting async resources for the node.
+     * It can be called multiple times so caching the initialization is
+     * recommended.
+     *
+     * If initialization is asynchronous, a promise should be registered using
+     * {@link DependencyContext.collectPromise} and the value of `false` should
+     * be returned. The hook will be called again when the promise resolves.
+     * This process can be repeated until the value of `true` is returned which
+     * will mark the highlighter as ready.
+     */
+    initialize(): boolean;
+    /**
+     * Prepares the code for highlighting.
+     *
+     * @remarks
+     * This method is called each time the code changes. It can be used to do
+     * any preprocessing of the code before highlighting. The result of this
+     * method is cached and passed to {@link highlight} when the code is
+     * highlighted.
+     *
+     * @param code - The code to prepare.
+     * @param dialect - The language in which the code is written.
+     */
+    prepare(code: string): T;
+    /**
+     * Highlights the code at the given index.
+     *
+     * @param index - The index of the code to highlight.
+     * @param cache - The result of {@link prepare}.
+     */
+    highlight(index: number, cache: T): HighlightResult;
+    /**
+     * Tokenize the code.
+     *
+     * @param code - The code to tokenize.
+     * @param dialect - The language in which the code is written.
+     */
+    tokenize(code: string): string[];
+}
+
+type CodePoint = [number, number];
+type CodeRange = [CodePoint, CodePoint];
+declare function isCodeRange(value: unknown): value is CodeRange;
+/**
+ * Create a code range that spans the given lines.
+ *
+ * @param from - The line from which the range starts.
+ * @param to - The line at which the range ends. If omitted, the range will
+ *             cover only one line.
+ */
+declare function lines(from: number, to?: number): CodeRange;
+/**
+ * Create a code range that highlights the given word.
+ *
+ * @param line - The line at which the word appears.
+ * @param from - The column at which the word starts.
+ * @param length - The length of the word. If omitted, the range will cover the
+ *                 rest of the line.
+ */
+declare function word(line: number, from: number, length?: number): CodeRange;
+/**
+ * Create a custom selection range.
+ *
+ * @param startLine - The line at which the selection starts.
+ * @param startColumn - The column at which the selection starts.
+ * @param endLine - The line at which the selection ends.
+ * @param endColumn - The column at which the selection ends.
+ */
+declare function pointToPoint(startLine: number, startColumn: number, endLine: number, endColumn: number): CodeRange;
+declare function isPointInCodeRange(point: CodePoint, range: CodeRange): boolean;
+declare function consolidateCodeRanges(ranges: CodeRange[]): CodeRange[];
+declare function inverseCodeRange(ranges: CodeRange[]): CodeRange[];
+/**
+ * Find all code ranges that match the given pattern.
+ *
+ * @param code - The code to search in.
+ * @param pattern - Either a string or a regular expression to search for.
+ * @param limit - An optional limit on the number of ranges to find.
+ */
+declare function findAllCodeRanges(code: string, pattern: string | RegExp, limit?: number): CodeRange[];
+
+type CodeSelection = CodeRange[];
+type PossibleCodeSelection = CodeRange | CodeRange[];
+declare function parseCodeSelection(value: PossibleCodeSelection): CodeSelection;
+declare function isPointInCodeSelection(point: CodePoint, selection: CodeSelection): boolean;
+
+interface CodeModifier<TOwner> {
+    (code: string): TOwner;
+    (code: string, duration: number): ThreadGenerator;
+    (duration?: number): TagGenerator;
+}
+interface CodeInsert<TOwner> {
+    (point: CodePoint, code: string): TOwner;
+    (point: CodePoint, code: string, duration: number): ThreadGenerator;
+}
+interface CodeRemove<TOwner> {
+    (range: CodeRange): TOwner;
+    (range: CodeRange, duration: number): ThreadGenerator;
+}
+interface CodeReplace<TOwner> {
+    (range: CodeRange, code: string): TOwner;
+    (range: CodeRange, code: string, duration: number): ThreadGenerator;
+}
+type TagGenerator = (strings: TemplateStringsArray, ...tags: CodeTag[]) => ThreadGenerator;
+interface CodeSignalHelpers<TOwner> {
+    edit(duration?: number): TagGenerator;
+    append: CodeModifier<TOwner>;
+    prepend: CodeModifier<TOwner>;
+    insert: CodeInsert<TOwner>;
+    remove: CodeRemove<TOwner>;
+    replace: CodeReplace<TOwner>;
+}
+type CodeSignal<TOwner> = Signal<PossibleCodeScope, CodeScope, TOwner, CodeSignalContext<TOwner>> & CodeSignalHelpers<TOwner>;
+declare class CodeSignalContext<TOwner> extends SignalContext<PossibleCodeScope, CodeScope, TOwner> implements CodeSignalHelpers<TOwner> {
+    private readonly highlighter?;
+    private readonly progress;
+    constructor(initial: PossibleCodeScope, owner: TOwner, highlighter?: SignalValue<CodeHighlighter | null> | undefined);
+    tweener(value: SignalValue<PossibleCodeScope>, duration: number, timingFunction: TimingFunction): ThreadGenerator;
+    edit(duration?: number): TagGenerator;
+    append(code: string): TOwner;
+    append(code: string, duration: number): ThreadGenerator;
+    append(duration?: number): TagGenerator;
+    prepend(code: string): TOwner;
+    prepend(code: string, duration: number): ThreadGenerator;
+    prepend(duration?: number): TagGenerator;
+    insert(point: CodePoint, code: string): TOwner;
+    insert(point: CodePoint, code: string, duration: number): ThreadGenerator;
+    remove(range: CodeRange): TOwner;
+    remove(range: CodeRange, duration: number): ThreadGenerator;
+    replace(range: CodeRange, code: string): TOwner;
+    replace(range: CodeRange, code: string, duration: number): ThreadGenerator;
+    private replaceTween;
+    private editTween;
+    private appendTween;
+    private prependTween;
+    parse(value: PossibleCodeScope): CodeScope;
+    toSignal(): CodeSignal<TOwner>;
+}
+declare function codeSignal(): PropertyDecorator;
+
+declare const DefaultHighlightStyle: HighlightStyle;
+
+/**
+ * Performs a patience diff on two arrays of strings, returning an object
+ * containing the lines that were deleted, inserted, and potentially moved
+ * lines. The plus parameter can result in a significant performance hit due
+ * to additional Longest Common Substring searches.
+ *
+ * @param aLines - The original array of strings
+ * @param bLines - The new array of strings
+ * @param plus - Whether to return the moved lines
+ *
+ * Adapted from Jonathan "jonTrent" Trent's patience-diff algorithm.
+ * Types and tests added by Hunter "hhenrichsen" Henrichsen.
+ *
+ * {@link https://github.com/jonTrent/PatienceDiff}
+ */
+declare function patienceDiff(aLines: string[], bLines: string[]): {
+    lines: {
+        line: string;
+        aIndex: number;
+        bIndex: number;
+    }[];
+    lineCountDeleted: number;
+    lineCountInserted: number;
+};
+/**
+ * Utility function for debugging patienceDiff.
+ *
+ * @internal
+ */
+declare function printDiff(diff: ReturnType<typeof patienceDiff>): void;
+
+/**
+ * Transform the fragments to isolate the given range into its own fragment.
+ *
+ * @remarks
+ * This function will try to preserve the original fragments, resolving them
+ * only if they overlap with the range.
+ *
+ * @param range - The range to extract.
+ * @param fragments - The fragments to transform.
+ *
+ * @returns A tuple containing the transformed fragments and the index of the
+ *          isolated fragment within.
+ */
+declare function extractRange(range: CodeRange, fragments: CodeTag[]): [CodeTag[], number];
+
+interface LezerCache {
+    tree: Tree;
+    code: string;
+    colorLookup: Map<string, string>;
+}
+declare class LezerHighlighter implements CodeHighlighter<LezerCache | null> {
+    private readonly parser;
+    private readonly style;
+    private static classRegex;
+    private readonly classLookup;
+    constructor(parser: Parser, style?: HighlightStyle);
+    initialize(): boolean;
+    prepare(code: string): LezerCache | null;
+    highlight(index: number, cache: LezerCache | null): HighlightResult;
+    tokenize(code: string): string[];
+    private getNodeId;
+}
+
+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;
+
+declare class Scene2D extends GeneratorScene<View2D> implements Inspectable {
+    private view;
+    private registeredNodes;
+    private readonly nodeCounters;
+    private assetHash;
+    constructor(description: FullSceneDescription<ThreadGeneratorFactory<View2D>>);
+    getView(): View2D;
+    next(): Promise<void>;
+    draw(context: CanvasRenderingContext2D): Promise<void>;
+    reset(previousScene?: Scene): Promise<void>;
+    inspectPosition(x: number, y: number): InspectedElement | null;
+    getNodeByPosition(x: number, y: number): Node | null;
+    validateInspection(element: InspectedElement | null): InspectedElement | null;
+    inspectAttributes(element: InspectedElement): InspectedAttributes | null;
+    drawOverlay(element: InspectedElement, matrix: DOMMatrix, context: CanvasRenderingContext2D): void;
+    transformMousePosition(x: number, y: number): Vector2 | null;
+    registerNode(node: Node, key?: string): [string, () => void];
+    getNode(key: any): Node | null;
+    getDetachedNodes(): Generator<Node, void, unknown>;
+    getMediaAssets(): Array<AssetInfo>;
+    stopAllMedia(): void;
+    adjustVolume(volumeScale: number): void;
+    protected recreateView(): void;
+}
+
+declare function makeScene2D(name: string, runner: ThreadGeneratorFactory<View2D>): DescriptionOf<Scene2D>;
+
+declare function useScene2D(): Scene2D;
+
+declare function canvasStyleParser(style: PossibleCanvasStyle): Color | Gradient | Pattern | null;
+declare function resolveCanvasStyle(style: CanvasStyle, context: CanvasRenderingContext2D): string | CanvasGradient | CanvasPattern;
+declare function drawRoundRect(context: CanvasRenderingContext2D | Path2D, rect: BBox, radius: Spacing, smoothCorners: boolean, cornerSharpness: number): void;
+declare function adjustRectRadius(radius: number, horizontal: number, vertical: number, rect: BBox): number;
+declare function drawRect(context: CanvasRenderingContext2D | Path2D, rect: BBox): void;
+declare function fillRect(context: CanvasRenderingContext2D, rect: BBox): void;
+declare function strokeRect(context: CanvasRenderingContext2D, rect: BBox): void;
+declare function drawPolygon(path: CanvasRenderingContext2D | Path2D, rect: BBox, sides: number): void;
+declare function drawImage(context: CanvasRenderingContext2D, image: CanvasImageSource, destination: BBox): void;
+declare function drawImage(context: CanvasRenderingContext2D, image: CanvasImageSource, source: BBox, destination: BBox): void;
+declare function moveTo(context: CanvasRenderingContext2D | Path2D, position: Vector2): void;
+declare function lineTo(context: CanvasRenderingContext2D | Path2D, position: Vector2): void;
+declare function arcTo(context: CanvasRenderingContext2D | Path2D, through: Vector2, position: Vector2, radius: number): void;
+declare function drawLine(context: CanvasRenderingContext2D | Path2D, points: Vector2[]): void;
+declare function drawPivot(context: CanvasRenderingContext2D | Path2D, offset: Vector2, radius?: number): void;
+declare function arc(context: CanvasRenderingContext2D | Path2D, center: Vector2, radius: number, startAngle?: number, endAngle?: number, counterclockwise?: boolean): void;
+declare function bezierCurveTo(context: CanvasRenderingContext2D | Path2D, controlPoint1: Vector2, controlPoint2: Vector2, to: Vector2): void;
+declare function quadraticCurveTo(context: CanvasRenderingContext2D | Path2D, controlPoint: Vector2, to: Vector2): void;
+
+/**
+ * Create a predicate that checks if the given object is an instance of the
+ * given class.
+ *
+ * @param klass - The class to check against.
+ */
+declare function is<T>(klass: new (...args: any[]) => T): (object: any) => object is T;
+
+export { Audio, Bezier, type BezierOverlayInfo, CODE, type CanvasRepetition, type CanvasStyle, type CanvasStyleSignal, Circle, type CircleProps, CircleSegment, Code, CodeCursor, type CodeDiffer, type CodeFragment, type CodeFragmentDrawingInfo, type CodeHighlighter, type CodePoint, type CodeProps, type CodeRange, type CodeScope, type CodeSelection, type CodeSignal, CodeSignalContext, type CodeSignalHelpers, type CodeTag, type CodeTokenizer, type ComponentChild, type ComponentChildren, CubicBezier, type CubicBezierProps, CubicBezierSegment, Curve, type CurveDrawingInfo, type CurvePoint, type CurveProfile, type CurveProps, DefaultHighlightStyle, type DesiredLength, type DrawHooks, type DrawTokenHook, FILTERS, Filter, type FilterName, type FilterProps, type FiltersSignal, FiltersSignalContext, type FlexBasis, type FlexContent, type FlexDirection, type FlexItems, type FlexWrap, Fragment, type FunctionComponent, Gradient, type GradientProps, type GradientStop, type GradientType, Grid, type GridProps, type HighlightResult, Icon, type IconProps, Img, type ImgProps, type Initializer, JSX, type JSXProps, Knot, type KnotAuto, type KnotAutoHandles, type KnotAutoSignal, type KnotInfo, type KnotProps, Latex, type LatexProps, Layout, type LayoutMode, type LayoutProps, type Length, type LengthLimit, LezerHighlighter, Line, type LineProps, LineSegment, Media, type MediaProps, NODE_NAME, Node, type NodeChildren, type NodeConstructor, type NodeProps, type NodeState, Path, type PathProps, Pattern, type PatternProps, Polygon, type PolygonProps, Polynomial, Polynomial2D, type PossibleCanvasStyle, type PossibleCodeFragment, type PossibleCodeScope, type PossibleCodeSelection, type PossibleKnotAuto, type PropertyMetadata, type PropsOf, QuadBezier, type QuadBezierProps, QuadBezierSegment, type RawCodeFragment, Ray, type RayProps, Rect, type RectProps, Rive, type RiveProps, SVG, type SVGDocument, type SVGDocumentData, type SVGProps, type SVGShape, type SVGShapeData, Scene2D, Segment, Shape, type ShapeProps, Spline, type SplineProps, type TextWrap, Txt, type TxtProps, type Vector2LengthSignal, Video, type VideoProps, View2D, type View2DProps, addInitializer, adjustRectRadius, arc, arcTo, bezierCurveTo, blur, brightness, canvasStyleParser, canvasStyleSignal, cloneable, codeSignal, colorSignal, compound, computed, consolidateCodeRanges, contrast, defaultDiffer, defaultStyle, defaultTokenize, drawImage, drawLine, drawPivot, drawPolygon, drawRect, drawRoundRect, extractRange, fillRect, filtersSignal, findAllCodeRanges, getBezierSplineProfile, getCircleProfile, getPointAtDistance, getPolylineProfile, getPropertiesOf, getPropertyMeta, getPropertyMetaOrCreate, getRectProfile, grayscale, hue, initial, initialize, initializeSignals, insert, inspectable, interpolation, inverseCodeRange, invert, is, isCodeRange, isCodeScope, isPointInCodeRange, isPointInCodeSelection, jsx, jsx as jsxs, lineTo, lines, makeScene2D, metricsToFragment, moveTo, nodeName, parseCodeFragment, parseCodeScope, parseCodeSelection, parser, patienceDiff, pointToPoint, printDiff, quadraticCurveTo, remove, replace, resolveCanvasStyle, resolveCodeTag, resolveScope, saturate, sepia, signal, strokeRect, useScene2D, vector2Signal, word, wrapper };