modern-canvas 0.3.3 → 0.4.0

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 import { Font } from 'modern-font';
 import { AnimationItem } from 'lottie-web';
 import { AnyColor, Colord } from 'colord';
-import { IDOCTextStyleDeclaration, IDOCTransformStyleDeclaration, Visibility, Overflow } from 'modern-idoc';
-import { Path2D, LineStyle, LineCap, LineJoin } from 'modern-path2d';
-import { TextOptions, Text, MeasureResult } from 'modern-text';
+import { Path2D, LineCap, LineJoin, LineStyle } from 'modern-path2d';
+import { TextStyleDeclaration, ElementStyleDeclaration, ImageRect } from 'modern-idoc';
 import { Node as Node$1, Direction } from 'yoga-layout/load';
+import { TextOptions, Text, MeasureResult } from 'modern-text';
 
 declare abstract class Loader {
     abstract install(assets: Assets): this;
@@ -57,7 +57,69 @@ declare class Ticker {
     protected static _performUpdate(): void;
 }
 
-type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ns-resize' | 'ew-resize' | 'nesw-resize' | 'col-resize' | 'nwse-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing';
+type Cursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'e-resize' | 'n-resize' | 'ne-resize' | 'nw-resize' | 's-resize' | 'se-resize' | 'sw-resize' | 'w-resize' | 'ns-resize' | 'ew-resize' | 'nesw-resize' | 'col-resize' | 'nwse-resize' | 'row-resize' | 'all-scroll' | 'zoom-in' | 'zoom-out' | 'grab' | 'grabbing' | string;
+
+type EventListenerValue = (...args: any[]) => void;
+type EventListenerOptions = boolean | AddEventListenerOptions;
+interface EventListener {
+    value: EventListenerValue;
+    options?: EventListenerOptions;
+}
+declare class EventEmitter {
+    eventListeners: Map<string, EventListener | EventListener[]>;
+    removeAllListeners(): this;
+    hasEventListener(event: string): boolean;
+    on(type: string, listener: EventListenerValue, options?: EventListenerOptions): any;
+    once(type: string, listener: EventListenerValue): this;
+    off(type: string, listener?: EventListenerValue, options?: EventListenerOptions): this;
+    emit(type: string, ...args: any[]): boolean;
+}
+
+interface CoreObjectEventMap {
+    updateProperty: (key: PropertyKey, newValue: any, oldValue: any, declaration?: PropertyDeclaration) => void;
+}
+interface CoreObject {
+    on: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    once: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof CoreObjectEventMap>(type: K, listener?: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof CoreObjectEventMap>(type: K, ...args: Parameters<CoreObjectEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class CoreObject extends EventEmitter {
+    readonly instanceId: number;
+    protected _defaultProperties?: Record<PropertyKey, any>;
+    protected _updatedProperties: Map<PropertyKey, any>;
+    protected _changedProperties: Set<PropertyKey>;
+    protected _updatingPromise: Promise<void>;
+    protected _updating: boolean;
+    is(target: CoreObject | undefined | null): boolean;
+    protected _enqueueUpdate(): Promise<void>;
+    update(): void;
+    protected _update(changed: Map<PropertyKey, any>): void;
+    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    isDirty(key: string): boolean;
+    getPropertyDeclarations(): Map<PropertyKey, PropertyDeclaration>;
+    getPropertyDeclaration(key: PropertyKey): PropertyDeclaration | undefined;
+    getDefaultProperties(): Record<PropertyKey, any>;
+    getProperty(key: PropertyKey): any | undefined;
+    setProperty(key: PropertyKey, value: any): this;
+    getProperties(keys?: PropertyKey[]): Record<PropertyKey, any>;
+    setProperties(properties?: Record<PropertyKey, any>): this;
+    requestUpdate(key?: PropertyKey, oldValue?: unknown, declaration?: PropertyDeclaration): void;
+    toJSON(): Record<string, any>;
+    clone(): this;
+    free(): void;
+}
+
+interface RefCountedEventMap extends CoreObjectEventMap {
+}
+interface RefCounted {
+    on: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    once: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof RefCountedEventMap>(type: K, listener?: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof RefCountedEventMap>(type: K, ...args: Parameters<RefCountedEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class RefCounted extends CoreObject {
+}
 
 declare class InputEvent<N extends UIEvent = UIEvent> implements UIEvent {
     bubbles: boolean;
@@ -150,68 +212,6 @@ declare class MouseInputEvent extends InputEvent implements MouseEvent {
     initMouseEvent(..._args: any[]): void;
 }
 
-type EventListenerValue = (...args: any[]) => void;
-type EventListenerOptions = boolean | AddEventListenerOptions;
-interface EventListener {
-    value: EventListenerValue;
-    options?: EventListenerOptions;
-}
-declare class EventEmitter {
-    eventListeners: Map<string, EventListener | EventListener[]>;
-    removeAllListeners(): this;
-    hasEventListener(event: string): boolean;
-    on(type: string, listener: EventListenerValue, options?: EventListenerOptions): any;
-    once(type: string, listener: EventListenerValue): this;
-    off(type: string, listener?: EventListenerValue, options?: EventListenerOptions): this;
-    emit(type: string, ...args: any[]): boolean;
-}
-
-interface CoreObjectEventMap {
-    updateProperty: (key: PropertyKey, newValue: any, oldValue: any, declaration?: PropertyDeclaration) => void;
-}
-interface CoreObject {
-    on: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    once: (<K extends keyof CoreObjectEventMap>(type: K, listener: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    off: (<K extends keyof CoreObjectEventMap>(type: K, listener?: CoreObjectEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    emit: (<K extends keyof CoreObjectEventMap>(type: K, ...args: Parameters<CoreObjectEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
-}
-declare class CoreObject extends EventEmitter {
-    readonly instanceId: number;
-    protected _defaultProperties?: Record<PropertyKey, any>;
-    protected _updatedProperties: Map<PropertyKey, any>;
-    protected _changedProperties: Set<PropertyKey>;
-    protected _updatingPromise: Promise<void>;
-    protected _updating: boolean;
-    is(target: CoreObject | undefined | null): boolean;
-    protected _enqueueUpdate(): Promise<void>;
-    protected _performUpdate(): void;
-    protected _update(changed: Map<PropertyKey, any>): void;
-    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    isDirty(key: string): boolean;
-    getPropertyDeclarations(): Map<PropertyKey, PropertyDeclaration>;
-    getPropertyDeclaration(key: PropertyKey): PropertyDeclaration | undefined;
-    getDefaultProperties(): Record<PropertyKey, any>;
-    getProperty(key: PropertyKey): any | undefined;
-    setProperty(key: PropertyKey, value: any): this;
-    getProperties(keys?: PropertyKey[]): Record<PropertyKey, any>;
-    setProperties(properties?: Record<PropertyKey, any>): this;
-    requestUpdate(key?: PropertyKey, oldValue?: unknown, declaration?: PropertyDeclaration): void;
-    toJSON(): Record<string, any>;
-    clone(): this;
-    destroy(): void;
-}
-
-interface RefCountedEventMap extends CoreObjectEventMap {
-}
-interface RefCounted {
-    on: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    once: (<K extends keyof RefCountedEventMap>(type: K, listener: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    off: (<K extends keyof RefCountedEventMap>(type: K, listener?: RefCountedEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
-    emit: (<K extends keyof RefCountedEventMap>(type: K, ...args: Parameters<RefCountedEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
-}
-declare class RefCounted extends CoreObject {
-}
-
 declare class PointerInputEvent extends MouseInputEvent implements PointerEvent {
     altitudeAngle: number;
     azimuthAngle: number;
@@ -277,11 +277,7 @@ declare class Input extends EventEmitter {
     protected cloneWheelEvent(nativeEvent: WheelEvent): WheelInputEvent;
     protected clonePointerEvent(nativeEvent: PointerEvent): PointerInputEvent;
     protected copyMouseEvent(event: MouseInputEvent, nativeEvent: MouseEvent): void;
-    /**
-     * Sets the current cursor mode, handling any callbacks or CSS style changes.
-     * @param mode - cursor mode, a key from the cursorStyles dictionary
-     */
-    setCursor(mode: string): void;
+    setCursor(mode?: Cursor): void;
     mapPositionToPoint(point: {
         x: number;
         y: number;
@@ -347,8 +343,8 @@ declare abstract class Vector extends EventEmitter {
     rotate<T extends VectorOperateOutput>(angle: number, output: T): T;
     set(value: VectorLike, ...args: number[]): this;
     equals(value: VectorLike): boolean;
+    copy(value: VectorLike): this;
     clone(): this;
-    protected _emitUpdate(array: number[]): void;
     protected _onUpdate(_array: number[]): void;
     toArray(): number[];
     toName(): string;
@@ -364,14 +360,12 @@ declare abstract class Matrix extends EventEmitter {
     constructor(rows: number, cols: number, array?: number[]);
     protected _operate(operator: string, target: MatrixLike | Vector, output?: MatrixOperateOutput): any;
     identity(): this;
-    clone(): this;
     set(value: MatrixLike): this;
+    copy(value: MatrixLike): this;
+    clone(): this;
     multiply<T extends Vector>(value: T): T;
     multiply(value: MatrixLike): this;
     multiply<T extends MatrixOperateOutput>(value: MatrixLike, output: T): T;
-    onUpdate(callback: (array: number[]) => void): this;
-    offUpdate(callback: (array: number[]) => void): this;
-    protected _emitUpdate(array: number[]): void;
     protected _onUpdate(_array: number[]): void;
     toArray(transpose?: boolean): number[];
     toName(): string;
@@ -466,6 +460,10 @@ declare class Vector2 extends Vector {
     set width(val: number);
     get height(): number;
     set height(val: number);
+    get left(): number;
+    set left(val: number);
+    get top(): number;
+    set top(val: number);
     constructor(x?: VectorLike, y?: number);
     update(x: number, y: number): this;
     getLength(): number;
@@ -600,6 +598,7 @@ declare class MainLoop extends CoreObject {
     start(process: (delta: number) => void): this;
     stop(): this;
     protected _onNextTick(): void;
+    free(): void;
 }
 
 interface CssFunctionArg {
@@ -862,7 +861,7 @@ declare class WebGLRenderer extends Renderer {
     draw(options?: WebGLDrawOptions): void;
     reset(): void;
     flush(): void;
-    destroy(): void;
+    free(): void;
     toPixels(): Uint8ClampedArray;
 }
 
@@ -898,7 +897,7 @@ declare abstract class WebGLModule {
     onUpdateContext(): void;
     flush(): void;
     reset(): void;
-    destroy(): void;
+    free(): void;
 }
 
 interface WebGLState {
@@ -954,6 +953,7 @@ interface Batchable2D {
     colorMatrix?: ArrayLike<number>;
     colorMatrixOffset?: ArrayLike<number>;
     blendMode?: WebGLBlendMode;
+    disableWrapMode?: boolean;
 }
 interface Shader {
     update: (attributeBuffer: ArrayBuffer, indexBuffer: Uint16Array) => void;
@@ -963,7 +963,6 @@ declare class WebGLBatch2DModule extends WebGLModule {
     install(renderer: WebGLRenderer): void;
     protected _state: WebGLState;
     protected _batchSize: number;
-    protected _vertexSize: number;
     protected _drawCallUid: number;
     protected _defaultModulate: number;
     protected _defaultBackgroundColor: number;
@@ -976,6 +975,7 @@ declare class WebGLBatch2DModule extends WebGLModule {
     protected _indexBuffers: Uint16Array[];
     protected _shaders: Map<number, Shader>;
     protected _attributes: Record<string, Partial<WebGLVertexAttrib>>;
+    protected _vertexSize: number;
     protected _getShader(maxTextureUnits: number): Shader;
     protected _createShader(maxTextureUnits: number): Shader;
     render(batchable: Batchable2D): void;
@@ -1086,7 +1086,7 @@ declare class WebGLProgramModule extends WebGLModule {
     updateUniforms(program: WebGLProgram, uniforms: Record<string, any>): void;
     updateUniforms(uniforms: Record<string, any>): void;
     reset(): void;
-    destroy(): void;
+    free(): void;
 }
 
 declare class WebGLScissorModule extends WebGLModule {
@@ -1286,7 +1286,6 @@ declare class UvGeometry extends Geometry {
     positionBuffer: VertexBuffer;
     uvBuffer: VertexBuffer;
     constructor();
-    update(vertices: Float32Array, uvs: Float32Array, indices: Uint16Array): this;
 }
 
 type Texture2DFilterMode = WebGLTextureFilterMode;
@@ -1327,7 +1326,7 @@ declare class Texture2D<T extends Texture2DSource = Texture2DSource> extends Res
     upload(renderer: WebGLRenderer, options?: Partial<WebGLTextureOptions>): boolean;
     activate(renderer: WebGLRenderer, location?: number): boolean;
     inactivate(renderer: WebGLRenderer): void;
-    destroy(): void;
+    free(): void;
 }
 
 interface ImageFrame {
@@ -1339,7 +1338,7 @@ declare class AnimatedTexture extends Resource {
     duration: number;
     constructor(source: Texture2D | ImageFrame[]);
     updateDuration(): this;
-    destroy(): void;
+    free(): void;
 }
 
 declare class CanvasTexture extends Texture2D<HTMLCanvasElement> {
@@ -1419,80 +1418,25 @@ declare class VideoTexture extends Texture2D<HTMLVideoElement> {
     protected _videoFrameRequestCallback: () => void;
     requestUpload: () => void;
     load(): Promise<this>;
-    destroy(): void;
+    free(): void;
 }
 
 declare class ViewportTexture extends PixelsTexture {
 }
 
-type CanvasItemStyleFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'invert' | 'sepia' | 'opacity' | 'grayscale';
-type CanvasItemStyleFilter = Record<CanvasItemStyleFilterKey, number>;
-interface CanvasItemStyleProperties extends IDOCTextStyleDeclaration, IDOCTransformStyleDeclaration {
-    direction: 'inherit' | 'ltr' | 'rtl';
-    backgroundColor?: 'none' | ColorValue;
-    backgroundImage?: string;
-    filter: string;
-    boxShadow: 'none' | string;
-    maskImage: 'none' | string;
-    opacity: number;
-    borderWidth: number;
-    borderRadius: number;
-    borderColor: 'none' | ColorValue;
-    borderStyle: string;
-    outlineWidth: number;
-    outlineOffset: number;
-    outlineColor: 'none' | ColorValue;
-    outlineStyle: string;
-    visibility: Visibility;
-    overflow: Overflow;
-    pointerEvents: PointerEvents$1;
-}
-type PointerEvents$1 = 'auto' | 'none';
-interface CanvasItemStyle extends CanvasItemStyleProperties {
-}
-declare class CanvasItemStyle extends Resource {
-    backgroundColor: 'none' | ColorValue;
-    backgroundImage: 'none' | string;
-    filter: 'none' | string;
-    direction: 'inherit' | 'ltr' | 'rtl';
-    boxShadow: 'none' | string;
-    maskImage: 'none' | string;
-    opacity: number;
-    borderWidth: number;
-    borderRadius: number;
-    borderColor: 'none' | ColorValue;
-    borderStyle: 'none' | string;
-    outlineWidth: number;
-    outlineOffset: number;
-    outlineColor: 'none' | ColorValue;
-    outlineStyle: 'none' | string;
-    visibility: Visibility;
-    overflow: Overflow;
-    pointerEvents: PointerEvents$1;
-    protected _backgroundColor: Color;
-    constructor(properties?: Partial<CanvasItemStyleProperties>);
-    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    canPointeEvents(): boolean;
-    getComputedOpacity(): number;
-    getComputedBackgroundColor(): Color;
-    loadBackgroundImage(): Promise<Texture2D<ImageBitmap> | undefined>;
-    getComputedTransform(): Transform2D;
-    getComputedTransformOrigin(): number[];
-    getComputedFilter(): CanvasItemStyleFilter;
-    getComputedFilterColorMatrix(): ColorMatrix;
-}
-
 interface CanvasBatchable extends Batchable2D {
     type: 'stroke' | 'fill';
     texture?: Texture2D;
 }
-interface StrokedGraphics {
+interface StrokeDraw {
+    type: 'stroke';
     path: Path2D;
     texture?: Texture2D;
     textureTransform?: Transform2D;
     style: LineStyle;
 }
-interface FilledGraphics {
+interface FillDraw {
+    type: 'fill';
     path: Path2D;
     texture?: Texture2D;
     textureTransform?: Transform2D;
@@ -1506,8 +1450,7 @@ declare class CanvasContext extends Path2D {
     lineWidth?: number;
     miterLimit?: number;
     _defaultStyle: Texture2D<Texture2DSource>;
-    _strokes: StrokedGraphics[];
-    _fills: FilledGraphics[];
+    _draws: (StrokeDraw | FillDraw)[];
     stroke(): void;
     fillRect(x: number, y: number, width: number, height: number): void;
     strokeRect(x: number, y: number, width: number, height: number): void;
@@ -1628,6 +1571,7 @@ interface SceneTree {
 declare class SceneTree extends MainLoop {
     paused: boolean;
     backgroundColor?: ColorValue;
+    readonly input: Input;
     readonly renderStack: RenderStack;
     readonly root: Viewport;
     readonly timeline: Timeline;
@@ -1639,6 +1583,7 @@ declare class SceneTree extends MainLoop {
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _render(renderer: WebGLRenderer, delta?: number): this;
     protected _renderScreen(renderer: WebGLRenderer): void;
+    free(): void;
 }
 
 interface NodeEventMap extends CoreObjectEventMap, InputEventMap {
@@ -1684,7 +1629,7 @@ declare class Node extends CoreObject {
     renderMode: RenderMode;
     internalMode: InternalMode;
     protected _readyed: boolean;
-    constructor(properties?: Partial<NodeProperties>, children?: Node[]);
+    constructor(properties?: Partial<NodeProperties>, nodes?: Node[]);
     /** Name */
     getName(): string;
     setName(value: string): this;
@@ -1754,6 +1699,7 @@ declare class Node extends CoreObject {
     protected _process(delta: number): void;
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _render(renderer: WebGLRenderer): void;
+    clone(): this;
     toJSON(): Record<string, any>;
     static parse(JSON: Record<string, any>[]): Node[];
     static parse(JSON: Record<string, any>): Node;
@@ -1777,7 +1723,7 @@ declare class TimelineNode extends Node {
     delay: number;
     duration: number;
     paused: boolean;
-    constructor(properties?: Partial<TimelineNodeProperties>, children?: Node[]);
+    constructor(properties?: Partial<TimelineNodeProperties>, nodes?: Node[]);
     /** Timeline */
     computedDuration: number;
     protected _currentTime: number;
@@ -1796,12 +1742,10 @@ declare class TimelineNode extends Node {
 }
 
 interface CanvasItemProperties extends TimelineNodeProperties {
-    style: Partial<CanvasItemStyleProperties>;
     modulate: ColorValue;
     blendMode: WebGLBlendMode;
 }
 interface CanvasItemEventMap extends TimelineNodeEventMap {
-    updateStyleProperty: (key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration) => void;
     draw: () => void;
 }
 interface CanvasItem {
@@ -1813,56 +1757,40 @@ interface CanvasItem {
 declare class CanvasItem extends TimelineNode {
     modulate?: ColorValue;
     blendMode?: WebGLBlendMode;
-    protected _style: CanvasItemStyle;
-    get style(): CanvasItemStyle;
-    set style(style: CanvasItemStyle);
-    /** @internal */
-    opacity: number;
     visible: boolean;
-    protected _parentOpacity?: number;
-    protected _parentVisible?: boolean;
+    opacity: number;
+    protected _parentGlobalVisible?: boolean;
+    protected _globalVisible?: boolean;
+    get globalVisible(): boolean;
+    protected _parentGlobalOpacity?: number;
+    protected _globalOpacity?: number;
+    get globalOpacity(): number;
     protected _modulate: Color;
     protected _backgroundImage?: Texture2D;
     context: CanvasContext;
     protected _resetContext: boolean;
     protected _redrawing: boolean;
-    protected _reflowing: boolean;
+    protected _relayouting: boolean;
     protected _repainting: boolean;
     protected _originalBatchables: CanvasBatchable[];
     protected _layoutedBatchables: CanvasBatchable[];
     protected _batchables: CanvasBatchable[];
-    constructor(properties?: Partial<CanvasItemProperties>, children?: Node[]);
-    setProperties(properties?: Record<PropertyKey, any>): this;
+    constructor(properties?: Partial<CanvasItemProperties>, nodes?: Node[]);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateBoxShadow(): void;
-    protected _updateMaskImage(): void;
-    protected _updateBackgroundColor(): void;
-    protected _updateBackgroundImage(): Promise<void>;
-    protected _updateOpacity(): void;
-    protected _updateCurrentTime(force?: boolean): void;
-    protected _updateVisible(): void;
     show(): void;
     hide(): void;
     isVisibleInTree(): boolean;
     canRender(): boolean;
     requestRedraw(): void;
-    requestReflow(): void;
+    requestRelayout(): void;
     requestRepaint(): void;
-    protected _process(delta: number): void;
-    protected _draw(): void;
-    protected _drawBackground(): void;
-    protected _drawContent(): void;
-    protected _drawBorder(): void;
-    protected _drawOutline(): void;
-    protected _drawBoundingRect(): void;
-    protected _fillBoundingRect(): void;
-    protected _strokeBoundingRect(): void;
+    protected _updateGlobalVisible(): void;
+    protected _updateGlobalOpacity(): void;
     protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _reflow(batchables: CanvasBatchable[]): CanvasBatchable[];
     protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
+    protected _draw(): void;
+    protected _update(): void;
     protected _render(renderer: WebGLRenderer): void;
-    toJSON(): Record<string, any>;
 }
 
 type EffectMode = 'before' | 'parent' | 'children' | 'transition';
@@ -1919,21 +1847,238 @@ declare class Transition extends Effect {
     constructor(properties?: Partial<TransitionProperties>, children?: Node[]);
 }
 
+interface BaseElement2DStyleProperties extends TextStyleDeclaration, Omit<ElementStyleDeclaration, 'left' | 'top' | 'width' | 'height' | 'backgroundColor' | 'borderColor'> {
+    backgroundColor: 'none' | ColorValue;
+    maskImage: 'none' | string;
+    borderColor: 'none' | ColorValue;
+    outlineWidth: number;
+    outlineOffset: number;
+    outlineColor: 'none' | ColorValue;
+    outlineStyle: string;
+}
+interface BaseElement2DStyle extends BaseElement2DStyleProperties {
+}
+declare class BaseElement2DStyle extends Resource {
+    protected _backgroundColor: Color;
+    constructor(properties?: Partial<BaseElement2DStyleProperties>);
+    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    getComputedBackgroundColor(): Color;
+    loadBackgroundImage(): Promise<Texture2D<ImageBitmap> | undefined>;
+}
+
 interface Node2DProperties extends CanvasItemProperties {
 }
 declare class Node2D extends CanvasItem {
+    position: Vector2;
+    rotation: number;
+    scale: Vector2;
+    skew: Vector2;
     transform: Transform2D;
+    globalPosition: Vector2;
+    globalRotation: number;
+    globalScale: Vector2;
+    globalSkew: Vector2;
+    globalTransform: Transform2D;
     protected _parentTransformDirtyId?: number;
-    constructor(properties?: Partial<Node2DProperties>, children?: Node[]);
+    constructor(properties?: Partial<Node2DProperties>, nodes?: Node[]);
+    protected _updateTransform(): void;
+    protected _updateGlobalTransform(): void;
+    protected _transformVertices(vertices: number[]): number[];
+    protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
+    protected _process(delta: number): void;
+}
+
+interface BaseElement2DEventMap extends CanvasItemEventMap {
+    updateStyleProperty: (key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration) => void;
+}
+interface BaseElement2DProperties extends Node2DProperties {
+    style: Partial<BaseElement2DStyleProperties>;
+    modulate: ColorValue;
+    blendMode: WebGLBlendMode;
+}
+interface BaseElement2D {
+    on: (<K extends keyof BaseElement2DEventMap>(type: K, listener: BaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    once: (<K extends keyof BaseElement2DEventMap>(type: K, listener: BaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof BaseElement2DEventMap>(type: K, listener?: BaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof BaseElement2DEventMap>(type: K, ...args: Parameters<BaseElement2DEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class BaseElement2D extends Node2D implements Rectangulable {
+    size: Vector2;
+    protected _style: BaseElement2DStyle;
+    get style(): BaseElement2DStyle;
+    set style(style: BaseElement2DStyle);
+    constructor(properties?: Partial<BaseElement2DProperties>, nodes?: Node[]);
+    setProperties(properties?: Record<PropertyKey, any>): this;
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    protected _updateBoxShadow(): void;
+    protected _updateMaskImage(): void;
+    protected _updateBackgroundColor(): void;
+    protected _updateBackgroundImage(): Promise<void>;
     protected _updateTransform(): void;
+    protected _updateGlobalTransform(): void;
     getRect(): Rect2;
     protected _updateOverflow(): void;
-    protected _transformVertices(vertices: number[]): number[];
-    protected _reflow(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _process(delta: number): void;
+    protected _draw(): void;
+    protected _drawBackground(): void;
+    protected _drawContent(): void;
+    protected _drawBorder(): void;
+    protected _drawOutline(): void;
+    protected _drawBoundingRect(): void;
+    protected _fillBoundingRect(): void;
+    protected _strokeBoundingRect(): void;
+    protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
+    canPointerEvents(): boolean;
+    input(event: InputEvent, key: InputEventKey): void;
+    protected _pointerEntering: boolean;
+    protected _pointerEntered(): void;
+    protected _pointerExited(): void;
+    protected _pointerInput(point: {
+        x: number;
+        y: number;
+    }, key: InputEventKey): boolean;
     protected _input(event: InputEvent, key: InputEventKey): void;
-    clone(): this;
+    toJSON(): Record<string, any>;
+}
+
+interface Element2DStyleProperties extends BaseElement2DStyleProperties {
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+}
+interface Element2DStyle extends Element2DStyleProperties {
+}
+declare class Element2DStyle extends BaseElement2DStyle {
+    constructor(properties?: Partial<Element2DStyleProperties>);
+}
+
+interface Element2DEventMap extends BaseElement2DEventMap {
+}
+interface Element2DProperties extends BaseElement2DProperties {
+    style: Partial<Element2DStyleProperties>;
+}
+interface Element2D {
+    on: (<K extends keyof Element2DEventMap>(type: K, listener: Element2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    once: (<K extends keyof Element2DEventMap>(type: K, listener: Element2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof Element2DEventMap>(type: K, listener?: Element2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof Element2DEventMap>(type: K, ...args: Parameters<Element2DEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class Element2D extends BaseElement2D {
+    protected _style: Element2DStyle;
+    get style(): Element2DStyle;
+    set style(style: Element2DStyle);
+    constructor(properties?: Partial<Element2DProperties>, nodes?: Node[]);
+    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+}
+
+type Align = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';
+type FlexDirection = 'column' | 'column-reverse' | 'row' | 'row-reverse';
+type FlexWrap = 'nowrap' | 'wrap' | 'Wrap-reverse';
+type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+type Position = 'static' | 'relative' | 'absolute';
+type BoxSizing = 'border-box' | 'content-box';
+interface LayoutStyleDeclaration {
+    alignContent: Align;
+    alignItems: Align;
+    alignSelf: Align;
+    borderTop: string;
+    borderLeft: string;
+    borderRight: string;
+    borderBottom: string;
+    borderWidth: number;
+    border: string;
+    direction: 'inherit' | 'ltr' | 'rtl';
+    display: 'none' | 'flex' | 'contents';
+    flex: number;
+    flexBasis: number | 'auto' | `${number}%`;
+    flexDirection: FlexDirection;
+    flexGrow: number;
+    flexShrink: number;
+    flexWrap: FlexWrap;
+    height: number | 'auto' | `${number}%`;
+    justifyContent: Justify;
+    gap: number | `${number}%`;
+    marginTop: number | 'auto' | `${number}%`;
+    marginLeft: number | 'auto' | `${number}%`;
+    marginRight: number | 'auto' | `${number}%`;
+    marginBottom: number | 'auto' | `${number}%`;
+    margin: number | 'auto' | `${number}%`;
+    maxHeight: number | `${number}%`;
+    maxWidth: number | `${number}%`;
+    minHeight: number | `${number}%`;
+    minWidth: number | `${number}%`;
+    paddingTop: number | `${number}%`;
+    paddingLeft: number | `${number}%`;
+    paddingRight: number | `${number}%`;
+    paddingBottom: number | `${number}%`;
+    padding: number | `${number}%`;
+    top: number | `${number}%`;
+    bottom: number | `${number}%`;
+    left: number | `${number}%`;
+    right: number | `${number}%`;
+    position: Position;
+    boxSizing: BoxSizing;
+    width: number | 'auto' | `${number}%`;
+}
+interface FlexElement2DStyleProperties extends BaseElement2DStyleProperties, LayoutStyleDeclaration {
+}
+interface FlexElement2DStyle extends FlexElement2DStyleProperties {
+}
+declare class FlexElement2DStyle extends BaseElement2DStyle {
+    constructor(properties?: Partial<FlexElement2DStyleProperties>);
+}
+
+interface ComputedLayout {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+declare class FlexLayout {
+    protected _element: FlexElement2D;
+    static _yoga?: any;
+    static load(): Promise<void>;
+    _node: Node$1;
+    protected get _style(): FlexElement2DStyle;
+    get offsetLeft(): number;
+    get offsetTop(): number;
+    get offsetWidth(): number;
+    get offsetHeight(): number;
+    constructor(_element: FlexElement2D);
+    calculateLayout(width?: number | 'auto', height?: number | 'auto', direction?: Direction): void;
+    getComputedLayout(): ComputedLayout;
+    updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+}
+
+interface FlexBaseElement2DEventMap extends BaseElement2DEventMap {
+    updateStyleProperty: (key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration) => void;
+}
+interface FlexElement2DProperties extends BaseElement2DProperties {
+    style: Partial<FlexElement2DStyleProperties>;
+}
+interface FlexElement2D {
+    on: (<K extends keyof FlexBaseElement2DEventMap>(type: K, listener: FlexBaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    once: (<K extends keyof FlexBaseElement2DEventMap>(type: K, listener: FlexBaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    off: (<K extends keyof FlexBaseElement2DEventMap>(type: K, listener?: FlexBaseElement2DEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
+    emit: (<K extends keyof FlexBaseElement2DEventMap>(type: K, ...args: Parameters<FlexBaseElement2DEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
+}
+declare class FlexElement2D extends BaseElement2D implements Rectangulable {
+    protected _style: FlexElement2DStyle;
+    get style(): FlexElement2DStyle;
+    set style(style: FlexElement2DStyle);
+    _layout: FlexLayout;
+    get offsetLeft(): number;
+    get offsetTop(): number;
+    get offsetWidth(): number;
+    get offsetHeight(): number;
+    constructor(properties?: Partial<FlexElement2DProperties>, nodes?: Node[]);
+    protected _parented(parent: Node): void;
+    protected _unparented(oldParent: Node): void;
+    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
+    protected _updateTransform(): void;
+    calculateLayout(width?: number | 'auto', height?: number | 'auto', direction?: Direction): void;
 }
 
 declare class Graphics2D extends Node2D {
@@ -1960,16 +2105,18 @@ declare class Graphics2D extends Node2D {
     drawEllipse(x: number, y: number, width: number, height: number): this;
 }
 
-interface Image2DProperties extends Node2DProperties {
+interface Image2DProperties extends Element2DProperties {
     src: string;
+    srcRect: ImageRect;
     gif: boolean;
 }
-declare class Image2D extends Node2D {
-    resource?: AnimatedTexture;
-    gif: boolean;
+declare class Image2D extends Element2D {
+    texture?: AnimatedTexture;
+    srcRect: ImageRect;
     src: string;
-    get currentTexture(): Texture2D | undefined;
-    get framesDuration(): number;
+    gif: boolean;
+    get currentFrameTexture(): Texture2D | undefined;
+    get textureDuration(): number;
     get naturalWidth(): number;
     get naturalHeight(): number;
     get complete(): boolean;
@@ -1985,12 +2132,14 @@ declare class Image2D extends Node2D {
     protected _updateFrameIndex(): this;
     protected _process(delta: number): void;
     protected _drawContent(): void;
+    protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
 }
 
-interface TextureRect2DProperties extends Node2DProperties {
+interface TextureRect2DProperties extends Element2DProperties {
 }
-declare class TextureRect2D<T extends Texture2D = Texture2D> extends Node2D implements Rectangulable {
+declare class TextureRect2D<T extends Texture2D = Texture2D> extends Element2D {
     texture?: T;
+    constructor(properties?: Partial<TextureRect2DProperties>, children?: Node[]);
     protected _drawContent(): void;
 }
 
@@ -2041,10 +2190,11 @@ declare class Text2D extends TextureRect2D<CanvasTexture> {
     protected _drawContent(): void;
 }
 
-interface TransformRect2DProperties extends Node2DProperties {
+interface TransformRect2DProperties extends BaseElement2DProperties {
 }
-declare class TransformRect2D extends Node2D implements Rectangulable {
-    size: number;
+declare class TransformRect2D extends Element2D {
+    handleSize: number;
+    constructor(properties?: Partial<TransformRect2DProperties>, nodes?: Node[]);
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _drawCircle(x: number, y: number): void;
     protected _drawEllipse(x: number, y: number): void;
@@ -2186,7 +2336,7 @@ declare class HTMLAudioContext extends EventEmitter implements IAudioContext {
     get audioContext(): AudioContext;
     toggleMute(): boolean;
     togglePause(): boolean;
-    destroy(): void;
+    free(): void;
 }
 
 declare class HTMLSound extends EventEmitter {
@@ -2232,7 +2382,7 @@ declare class HTMLSound extends EventEmitter {
     play(options?: IPlayOptions): void;
     protected _onUpdate: () => void;
     protected _onComplete(): void;
-    destroy(): void;
+    free(): void;
 }
 
 declare class HTMLAudio {
@@ -2334,7 +2484,7 @@ declare class WebSound extends EventEmitter {
     protected _onComplete: () => void;
     protected _updateListener: () => void;
     protected _enableTicker(enabled: boolean): void;
-    destroy(): void;
+    free(): void;
 }
 
 declare class WebAudio extends AudioPipeline {
@@ -2422,12 +2572,12 @@ declare class Audio extends TimelineNode {
 declare class AudioSpectrum extends Node2D {
 }
 
-interface AudioWaveformProperties extends Node2DProperties {
+interface AudioWaveformProperties extends Element2DProperties {
     src: string;
     gap: number;
     color: string;
 }
-declare class AudioWaveform extends Node2D {
+declare class AudioWaveform extends Element2D {
     src?: string;
     gap: number;
     color: string;
@@ -2575,7 +2725,7 @@ declare class ZoomBlurEffect extends Effect {
 
 interface ControlEventMap extends CanvasItemEventMap, RectangulableEventMap {
 }
-interface ControlProperties extends CanvasItemProperties {
+interface ControlProperties extends BaseElement2DProperties {
 }
 interface Control {
     on: (<K extends keyof ControlEventMap>(type: K, listener: ControlEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
@@ -2583,7 +2733,7 @@ interface Control {
     off: (<K extends keyof ControlEventMap>(type: K, listener?: ControlEventMap[K], options?: EventListenerOptions) => this) & ((type: string, listener: EventListenerValue, options?: EventListenerOptions) => this);
     emit: (<K extends keyof ControlEventMap>(type: K, ...args: Parameters<ControlEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
 }
-declare class Control extends CanvasItem implements Rectangulable {
+declare class Control extends Element2D implements Rectangulable {
     constructor(properties?: Partial<ControlProperties>, children?: Node[]);
     protected _parented(parent: any): void;
     protected _unparented(oldParent: any): void;
@@ -2591,7 +2741,6 @@ declare class Control extends CanvasItem implements Rectangulable {
     protected _input(event: InputEvent, key: InputEventKey): void;
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _guiInput(event: InputEvent, key: InputEventKey): void;
-    getRect(): Rect2;
 }
 
 interface RangeProperties extends ControlProperties {
@@ -2635,7 +2784,7 @@ declare class Ruler extends Control {
     markBackgroundColor: string;
     markColor: string;
     gap: number;
-    scale: number;
+    gapScale: number;
     texture: CanvasTexture;
     constructor(properties?: Partial<RulerProperties>, children?: Node[]);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
@@ -2651,8 +2800,18 @@ declare class ScrollBar extends Range {
     direction: 'vertical' | 'horizontal';
     constructor(properties?: Partial<ScrollBarProperties>, children?: Node[]);
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _guiInput(event: InputEvent, key: InputEventKey): void;
+    protected _rect(): {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        radii: number;
+    };
     protected _draw(): void;
+    protected _pointerInput(point: {
+        x: number;
+        y: number;
+    }, key: InputEventKey): boolean;
 }
 
 interface XScrollBarProperties extends Omit<ScrollBarProperties, 'direction'> {
@@ -2667,220 +2826,6 @@ declare class YScrollBar extends ScrollBar {
     constructor(properties?: Partial<YScrollBarProperties>, children?: Node[]);
 }
 
-type Align = 'auto' | 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline' | 'space-between' | 'space-around' | 'space-evenly';
-type FlexDirection = 'column' | 'column-reverse' | 'row' | 'row-reverse';
-type FlexWrap = 'no-wrap' | 'wrap' | 'Wrap-reverse';
-type Justify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
-type Position = 'static' | 'relative' | 'absolute';
-type BoxSizing = 'border-box' | 'content-box';
-interface IDOCLayoutStyleDeclaration {
-    alignContent: Align;
-    alignItems: Align;
-    alignSelf: Align;
-    borderTop: string;
-    borderLeft: string;
-    borderRight: string;
-    borderBottom: string;
-    borderWidth: number;
-    border: string;
-    direction: 'inherit' | 'ltr' | 'rtl';
-    display: 'none' | 'flex' | 'contents';
-    flex: number;
-    flexBasis: number | 'auto' | `${number}%`;
-    flexDirection: FlexDirection;
-    flexGrow: number;
-    flexShrink: number;
-    flexWrap: FlexWrap;
-    height: number | 'auto' | `${number}%`;
-    justifyContent: Justify;
-    gap: number | `${number}%`;
-    marginTop: number | 'auto' | `${number}%`;
-    marginLeft: number | 'auto' | `${number}%`;
-    marginRight: number | 'auto' | `${number}%`;
-    marginBottom: number | 'auto' | `${number}%`;
-    margin: number | 'auto' | `${number}%`;
-    maxHeight: number | `${number}%`;
-    maxWidth: number | `${number}%`;
-    minHeight: number | `${number}%`;
-    minWidth: number | `${number}%`;
-    paddingTop: number | `${number}%`;
-    paddingLeft: number | `${number}%`;
-    paddingRight: number | `${number}%`;
-    paddingBottom: number | `${number}%`;
-    padding: number | `${number}%`;
-    top: number | `${number}%`;
-    bottom: number | `${number}%`;
-    left: number | `${number}%`;
-    right: number | `${number}%`;
-    position: Position;
-    boxSizing: BoxSizing;
-    width: number | 'auto' | `${number}%`;
-}
-type ElementStyleFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'invert' | 'sepia' | 'opacity' | 'grayscale';
-type ElementStyleFilter = Record<ElementStyleFilterKey, number>;
-interface ElementStyleProperties extends IDOCTextStyleDeclaration, Omit<IDOCTransformStyleDeclaration, 'left' | 'top' | 'width' | 'height'>, IDOCLayoutStyleDeclaration {
-    backgroundColor?: 'none' | ColorValue;
-    backgroundImage?: string;
-    filter: string;
-    boxShadow: 'none' | string;
-    maskImage: 'none' | string;
-    opacity: number;
-    borderWidth: number;
-    borderRadius: number;
-    borderColor: 'none' | ColorValue;
-    borderStyle: string;
-    outlineWidth: number;
-    outlineOffset: number;
-    outlineColor: 'none' | ColorValue;
-    outlineStyle: string;
-    visibility: Visibility;
-    overflow: Overflow;
-    pointerEvents: PointerEvents;
-}
-type PointerEvents = 'auto' | 'none';
-interface ElementStyle extends ElementStyleProperties {
-}
-declare class ElementStyle extends Resource {
-    backgroundColor: 'none' | ColorValue;
-    backgroundImage: 'none' | string;
-    filter: 'none' | string;
-    boxShadow: 'none' | string;
-    maskImage: 'none' | string;
-    opacity: number;
-    borderRadius: number;
-    borderColor: 'none' | ColorValue;
-    borderStyle: 'none' | string;
-    outlineWidth: number;
-    outlineOffset: number;
-    outlineColor: 'none' | ColorValue;
-    outlineStyle: 'none' | string;
-    visibility: Visibility;
-    overflow: Overflow;
-    pointerEvents: PointerEvents;
-    alignContent: Align;
-    alignItems: Align;
-    alignSelf: Align;
-    borderTop: string;
-    borderLeft: string;
-    borderRight: string;
-    borderBottom: string;
-    borderWidth: number;
-    border: string;
-    direction: 'inherit' | 'ltr' | 'rtl';
-    display: 'none' | 'flex' | 'contents';
-    flex: number;
-    flexBasis: number | 'auto' | `${number}%`;
-    flexDirection: FlexDirection;
-    flexGrow: number;
-    flexShrink: number;
-    flexWrap: FlexWrap;
-    height: number | 'auto' | `${number}%`;
-    justifyContent: Justify;
-    gap: number | `${number}%`;
-    marginTop: number | 'auto' | `${number}%`;
-    marginLeft: number | 'auto' | `${number}%`;
-    marginRight: number | 'auto' | `${number}%`;
-    marginBottom: number | 'auto' | `${number}%`;
-    margin: number | 'auto' | `${number}%`;
-    maxHeight: number | `${number}%`;
-    maxWidth: number | `${number}%`;
-    minHeight: number | `${number}%`;
-    minWidth: number | `${number}%`;
-    paddingTop: number | `${number}%`;
-    paddingLeft: number | `${number}%`;
-    paddingRight: number | `${number}%`;
-    paddingBottom: number | `${number}%`;
-    padding: number | `${number}%`;
-    top: number | `${number}%`;
-    bottom: number | `${number}%`;
-    left: number | `${number}%`;
-    right: number | `${number}%`;
-    position: Position;
-    boxSizing: BoxSizing;
-    width: number | 'auto' | `${number}%`;
-    protected _backgroundColor: Color;
-    constructor(properties?: Partial<ElementStyleProperties>);
-    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    canPointeEvents(): boolean;
-    getComputedOpacity(): number;
-    getComputedBackgroundColor(): Color;
-    loadBackgroundImage(): Promise<Texture2D<ImageBitmap> | undefined>;
-    getComputedTransformOrigin(): number[];
-    protected _defaultFilter: ElementStyleFilter;
-    getComputedFilter(): ElementStyleFilter;
-    getComputedFilterColorMatrix(): ColorMatrix;
-}
-
-interface ElementProperties extends NodeProperties {
-    style: Partial<ElementStyleProperties>;
-    modulate: ColorValue;
-    blendMode: WebGLBlendMode;
-}
-declare class Element$1 extends Node {
-    modulate?: ColorValue;
-    blendMode?: WebGLBlendMode;
-    static layoutEngine?: any;
-    static loadLayoutEngine(): Promise<void>;
-    protected _style: ElementStyle;
-    get style(): ElementStyle;
-    set style(style: ElementStyle);
-    _layout: Node$1;
-    transform: Transform2D;
-    protected _parentTransformDirtyId?: number;
-    opacity: number;
-    visible: boolean;
-    protected _parentOpacity?: number;
-    protected _parentVisible?: boolean;
-    protected _modulate: Color;
-    protected _backgroundImage?: Texture2D;
-    context: CanvasContext;
-    protected _resetContext: boolean;
-    protected _redrawing: boolean;
-    protected _reflowing: boolean;
-    protected _repainting: boolean;
-    protected _originalBatchables: CanvasBatchable[];
-    protected _layoutedBatchables: CanvasBatchable[];
-    protected _batchables: CanvasBatchable[];
-    constructor(properties?: Partial<ElementProperties>, children?: Node[]);
-    setProperties(properties?: Record<PropertyKey, any>): this;
-    protected _parented(parent: Node): void;
-    protected _unparented(oldParent: Node): void;
-    protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
-    protected _updateBoxShadow(): void;
-    protected _updateMaskImage(): void;
-    protected _updateBackgroundColor(): void;
-    protected _updateBackgroundImage(): Promise<void>;
-    protected _updateOpacity(): void;
-    protected _updateVisible(): void;
-    protected _updateTransform(): void;
-    getRect(): Rect2;
-    protected _updateOverflow(): void;
-    show(): void;
-    hide(): void;
-    isVisibleInTree(): boolean;
-    canRender(): boolean;
-    requestRedraw(): void;
-    requestReflow(): void;
-    requestRepaint(): void;
-    protected _process(delta: number): void;
-    protected _transformVertices(vertices: number[]): number[];
-    protected _draw(): void;
-    protected _drawBackground(): void;
-    protected _drawContent(): void;
-    protected _drawBorder(): void;
-    protected _drawOutline(): void;
-    protected _drawBoundingRect(): void;
-    protected _fillBoundingRect(): void;
-    protected _strokeBoundingRect(): void;
-    protected _relayout(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _reflow(batchables: CanvasBatchable[]): CanvasBatchable[];
-    protected _repaint(batchables: CanvasBatchable[]): CanvasBatchable[];
-    calculateLayout(width?: number | 'auto', height?: number | 'auto', direction?: Direction): void;
-    protected _render(renderer: WebGLRenderer): void;
-    toJSON(): Record<string, any>;
-}
-
 interface ScalerEventMap extends NodeEventMap {
     updateScale: (scale: number) => void;
 }
@@ -2899,7 +2844,7 @@ declare class Scaler extends Node {
     value: number;
     minValue: number;
     maxValue: number;
-    get target(): CanvasItem | undefined;
+    get target(): Element2D | undefined;
     constructor(properties?: Partial<ScalerProperties>, children?: Node[]);
     protected _updateProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
     protected _updateScale(): void;
@@ -2996,21 +2941,29 @@ declare class Assets {
 }
 declare const assets: Assets;
 
+type CSSFilterKey = 'hue-rotate' | 'saturate' | 'brightness' | 'contrast' | 'invert' | 'sepia' | 'opacity' | 'grayscale';
+type CSSFilters = Record<CSSFilterKey, number>;
+declare function parseCSSFilter(filter: string): ColorMatrix;
+
+declare function parseCSSTransform(transform: string, width: number, height: number): Transform2D;
+
+declare function parseCSSTransformOrigin(transformOrigin: string): number[];
+
 declare class CanvasItemEditor extends Control {
-    protected _pointerStart?: CanvasItemStyle;
+    protected _pointerStart?: Element2DStyle;
     protected _pointerOffset?: {
         x: number;
         y: number;
     };
-    selected?: CanvasItem;
-    dragging?: CanvasItem;
-    hovered?: CanvasItem;
-    hover: Node2D;
+    selected?: Element2D;
+    dragging?: Element2D;
+    hovered?: Element2D;
+    hover: Element2D;
     transformRect: TransformRect2D;
     scaler: Scaler;
     xScrollBar: XScrollBar;
     yScrollBar: YScrollBar;
-    drawboard: Node2D;
+    drawboard: Element2D;
     ruler: Ruler;
     constructor();
     protected _updateStyleProperty(key: PropertyKey, value: any, oldValue: any, declaration?: PropertyDeclaration): void;
@@ -3018,6 +2971,7 @@ declare class CanvasItemEditor extends Control {
     protected _onPointerdown(e: PointerInputEvent): void;
     protected _onPointermove(e: PointerInputEvent): void;
     protected _onPointerup(): void;
+    protected _copyGlobalTransform(a: Element2D, b: Element2D): void;
     protected _updateHover(): void;
     protected _updateSelectionRect(): void;
     protected _updateScrollbars(): void;
@@ -3055,7 +3009,6 @@ interface Engine {
     emit: (<K extends keyof EngineEventMap>(type: K, ...args: Parameters<EngineEventMap[K]>) => boolean) & ((type: string, ...args: any[]) => boolean);
 }
 declare class Engine extends SceneTree {
-    readonly input: Input;
     readonly renderer: WebGLRenderer;
     get view(): HTMLCanvasElement | undefined;
     get gl(): WebGLRenderingContext | WebGL2RenderingContext;
@@ -3078,7 +3031,7 @@ declare class Engine extends SceneTree {
     waitUntilLoad(): Promise<void>;
     render(delta?: number): this;
     start(): this;
-    destroy(): void;
+    free(): void;
     toPixels(): Uint8ClampedArray;
     toImageData(): ImageData;
     toCanvas2D(): HTMLCanvasElement;
@@ -3091,4 +3044,4 @@ interface RenderOptions {
 }
 declare function render(options: RenderOptions): Promise<HTMLCanvasElement>;
 
-export { AnimatedTexture, Animation, type AnimationEffectMode, type AnimationProperties, type AssetHandler, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, type AudioWaveformProperties, type Batchable2D, BlurEffect, type CanvasBatchable, CanvasContext, CanvasItem, CanvasItemEditor, type CanvasItemEventMap, type CanvasItemProperties, CanvasItemStyle, type CanvasItemStyleFilter, type CanvasItemStyleFilterKey, type CanvasItemStyleProperties, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, type ColorFilterEffectProperties, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, type ColorValue, Control, type ControlEventMap, type ControlProperties, CoreObject, type CoreObjectEventMap, type CssFunction, type CssFunctionArg, type Cursor, DEG_TO_RAD, DEVICE_PIXEL_RATIO, type Easing, Effect, type EffectContext, EffectMaterial, type EffectMode, type EffectProperties, Element$1 as Element, type ElementProperties, ElementStyle, type ElementStyleFilter, type ElementStyleFilterKey, type ElementStyleProperties, EmbossEffect, Engine, type EngineOptions, EventEmitter, type EventListener, type EventListenerOptions, type EventListenerValue, type FilledGraphics, FontLoader, GIFLoader, Geometry, type GeometryOptions, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, type IAudioContext, type IAudioNode, type IDOCLayoutStyleDeclaration, IN_BROWSER, type IPlayOptions, Image2D, type Image2DProperties, type ImageFrame, ImageTexture, type ImageTextureOptions, IndexBuffer, type IndexBufferOptions, Input, InputEvent, type InputEventKey, type InputEventMap, type InternalMode, JSONLoader, KawaseTransition, type Keyframe, LeftEraseTransition, Loader, Lottie2D, type Lottie2DProperties, LottieLoader, MainLoop, type MainLoopEventMap, type MaskColor, type MaskData, MaskEffect, type MaskEffectProperties, type MaskObject, type MaskRect, type Maskable, Material, type MaterialOptions, Matrix, Matrix2, Matrix3, Matrix4, type MatrixLike, type MatrixOperateOutput, MouseInputEvent, Node, Node2D, type Node2DProperties, type NodeEventMap, type NodeProperties, type NormalizedKeyframe, PI, PI_2, PixelateEffect, PixelsTexture, type PlatformAudio, type PlatformSound, type PointerEvents$1 as PointerEvents, PointerInputEvent, type ProcessMode, Projection2D, type PropertyDeclaration, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, type RangeProperties, RawWeakMap, Rect2, RefCounted, type RefCountedEventMap, type RenderMode, type RenderOptions, type Renderable, Renderer, Resource, type ResourceEventMap, Ruler, type RulerProperties, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, type ScalerEventMap, type ScalerProperties, SceneTree, type SceneTreeEventMap, ScrollBar, type ScrollBarProperties, ShadowEffect, type StrokedGraphics, Text2D, type Text2DProperties, TextLoader, Texture2D, type Texture2DFilterMode, type Texture2DPixelsSource, type Texture2DSource, type Texture2DWrapMode, TextureLoader, TextureRect2D, type TextureRect2DProperties, Ticker, TiltShiftTransition, Timeline, type TimelineEventMap, TimelineNode, type TimelineNodeEventMap, type TimelineNodeProperties, type TimelineProperties, type TimingFunctions, Transform2D, type Transform2DObject, TransformRect2D, type TransformRect2DProperties, Transition, type TransitionProperties, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, type VectorLike, type VectorOperateOutput, VertexAttribute, type VertexAttributeOptions, VertexBuffer, type VertexBufferOptions, Video2D, type Video2DProperties, VideoLoader, VideoTexture, type VideoTextureOptions, type VideoTextureSource, Viewport, type ViewportEventMap, type ViewportFramebuffer, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, type WebGLBufferMeta, WebGLBufferModule, type WebGLBufferOptions, type WebGLBufferTarget, type WebGLBufferUsage, type WebGLDrawMode, type WebGLDrawOptions, type WebGLExtensions, type WebGLFramebufferMeta, WebGLFramebufferModule, type WebGLFramebufferOptions, WebGLMaskModule, WebGLModule, type WebGLProgramMeta, WebGLProgramModule, type WebGLProgramOptions, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, type WebGLTarget, type WebGLTextureFilterMode, type WebGLTextureLocation, type WebGLTextureMeta, WebGLTextureModule, type WebGLTextureOptions, type WebGLTextureSource, type WebGLTextureTarget, type WebGLTextureWrapMode, WebGLVertexArrayModule, type WebGLVertexArrayObjectMeta, type WebGLVertexArrayObjectOptions, type WebGLVertexAttrib, type WebGLVertexAttribType, type WebGLViewport, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, type XScrollBarProperties, YScrollBar, type YScrollBarProperties, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };
+export { type Align, AnimatedTexture, Animation, type AnimationEffectMode, type AnimationProperties, type AssetHandler, Assets, Audio, AudioPipeline, AudioProcessor, AudioSpectrum, AudioWaveform, type AudioWaveformProperties, BaseElement2D, type BaseElement2DEventMap, type BaseElement2DProperties, BaseElement2DStyle, type BaseElement2DStyleProperties, type Batchable2D, BlurEffect, type BoxSizing, type CSSFilterKey, type CSSFilters, type CanvasBatchable, CanvasContext, CanvasItem, CanvasItemEditor, type CanvasItemEventMap, type CanvasItemProperties, CanvasTexture, Color, ColorAdjustEffect, ColorFilterEffect, type ColorFilterEffectProperties, ColorMatrix, ColorOverlayEffect, ColorRemoveEffect, ColorReplaceEffect, ColorTexture, type ColorValue, type ComputedLayout, Control, type ControlEventMap, type ControlProperties, CoreObject, type CoreObjectEventMap, type CssFunction, type CssFunctionArg, type Cursor, DEG_TO_RAD, DEVICE_PIXEL_RATIO, type Easing, Effect, type EffectContext, EffectMaterial, type EffectMode, type EffectProperties, Element2D, type Element2DEventMap, type Element2DProperties, Element2DStyle, type Element2DStyleProperties, EmbossEffect, Engine, type EngineOptions, EventEmitter, type EventListener, type EventListenerOptions, type EventListenerValue, type FillDraw, type FlexBaseElement2DEventMap, type FlexDirection, FlexElement2D, type FlexElement2DProperties, FlexElement2DStyle, type FlexElement2DStyleProperties, FlexLayout, type FlexWrap, FontLoader, GIFLoader, Geometry, type GeometryOptions, GlitchEffect, GodrayEffect, Graphics2D, HTMLAudio, HTMLAudioContext, HTMLSound, type IAudioContext, type IAudioNode, IN_BROWSER, type IPlayOptions, Image2D, type Image2DProperties, type ImageFrame, ImageTexture, type ImageTextureOptions, IndexBuffer, type IndexBufferOptions, Input, InputEvent, type InputEventKey, type InputEventMap, type InternalMode, JSONLoader, type Justify, KawaseTransition, type Keyframe, type LayoutStyleDeclaration, LeftEraseTransition, Loader, Lottie2D, type Lottie2DProperties, LottieLoader, MainLoop, type MainLoopEventMap, type MaskColor, type MaskData, MaskEffect, type MaskEffectProperties, type MaskObject, type MaskRect, type Maskable, Material, type MaterialOptions, Matrix, Matrix2, Matrix3, Matrix4, type MatrixLike, type MatrixOperateOutput, MouseInputEvent, Node, Node2D, type Node2DProperties, type NodeEventMap, type NodeProperties, type NormalizedKeyframe, PI, PI_2, PixelateEffect, PixelsTexture, type PlatformAudio, type PlatformSound, PointerInputEvent, type Position, type ProcessMode, Projection2D, type PropertyDeclaration, QuadGeometry, QuadUvGeometry, RAD_TO_DEG, Range, type RangeProperties, RawWeakMap, Rect2, type Rectangulable, type RectangulableEventMap, RefCounted, type RefCountedEventMap, type RenderMode, type RenderOptions, type Renderable, Renderer, Resource, type ResourceEventMap, Ruler, type RulerProperties, SUPPORTS_AUDIO_CONTEXT, SUPPORTS_CLICK_EVENTS, SUPPORTS_CREATE_IMAGE_BITMAP, SUPPORTS_IMAGE_BITMAP, SUPPORTS_MOUSE_EVENTS, SUPPORTS_OFFLINE_AUDIO_CONTEXT, SUPPORTS_POINTER_EVENTS, SUPPORTS_RESIZE_OBSERVER, SUPPORTS_TOUCH_EVENTS, SUPPORTS_WEBGL2, SUPPORTS_WEBKIT_AUDIO_CONTEXT, SUPPORTS_WEBKIT_OFFLINE_AUDIO_CONTEXT, SUPPORTS_WEB_AUDIO, SUPPORTS_WHEEL_EVENTS, Scaler, type ScalerEventMap, type ScalerProperties, SceneTree, type SceneTreeEventMap, ScrollBar, type ScrollBarProperties, ShadowEffect, type StrokeDraw, Text2D, type Text2DProperties, TextLoader, Texture2D, type Texture2DFilterMode, type Texture2DPixelsSource, type Texture2DSource, type Texture2DWrapMode, TextureLoader, TextureRect2D, type TextureRect2DProperties, Ticker, TiltShiftTransition, Timeline, type TimelineEventMap, TimelineNode, type TimelineNodeEventMap, type TimelineNodeProperties, type TimelineProperties, type TimingFunctions, Transform2D, type Transform2DObject, TransformRect2D, type TransformRect2DProperties, Transition, type TransitionProperties, TwistTransition, UvGeometry, UvMaterial, Vector, Vector2, Vector3, Vector4, type VectorLike, type VectorOperateOutput, VertexAttribute, type VertexAttributeOptions, VertexBuffer, type VertexBufferOptions, Video2D, type Video2DProperties, VideoLoader, VideoTexture, type VideoTextureOptions, type VideoTextureSource, Viewport, type ViewportEventMap, type ViewportFramebuffer, ViewportTexture, WebAudio, WebAudioContext, WebGLBatch2DModule, WebGLBlendMode, type WebGLBufferMeta, WebGLBufferModule, type WebGLBufferOptions, type WebGLBufferTarget, type WebGLBufferUsage, type WebGLDrawMode, type WebGLDrawOptions, type WebGLExtensions, type WebGLFramebufferMeta, WebGLFramebufferModule, type WebGLFramebufferOptions, WebGLMaskModule, WebGLModule, type WebGLProgramMeta, WebGLProgramModule, type WebGLProgramOptions, WebGLRenderer, WebGLScissorModule, WebGLState, WebGLStateModule, WebGLStencilModule, type WebGLTarget, type WebGLTextureFilterMode, type WebGLTextureLocation, type WebGLTextureMeta, WebGLTextureModule, type WebGLTextureOptions, type WebGLTextureSource, type WebGLTextureTarget, type WebGLTextureWrapMode, WebGLVertexArrayModule, type WebGLVertexArrayObjectMeta, type WebGLVertexArrayObjectOptions, type WebGLVertexAttrib, type WebGLVertexAttribType, type WebGLViewport, WebGLViewportModule, WebSound, WheelInputEvent, XScrollBar, type XScrollBarProperties, YScrollBar, type YScrollBarProperties, ZoomBlurEffect, assets, clamp, createHTMLCanvas, createNode, crossOrigin, cubicBezier, curves, customNode, customNodes, defaultOptions, defineProperty, determineCrossOrigin, ease, easeIn, easeInOut, easeOut, getDeclarations, getDefaultCssPropertyValue, isCanvasElement, isElementNode, isImageElement, isPow2, isVideoElement, isWebgl2, lerp, linear, log2, mapWebGLBlendModes, nextPow2, nextTick, parseCSSFilter, parseCSSTransform, parseCSSTransformOrigin, parseCssFunctions, parseCssProperty, property, protectedProperty, render, timingFunctions, uid };