canvasengine 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/components/DisplayObject.d.ts

@@ -0,0 +1,94 @@
+import { Element, Props } from '../engine/reactive';
+import { AlignContent, EdgeSize, FlexDirection, ObjectFit, ObjectPosition, TransformOrigin } from './types/DisplayObject';
+import { ObservablePoint, Point, Rectangle } from 'pixi.js';
+import { BehaviorSubject } from 'rxjs';
+export interface ComponentInstance extends PixiMixins.ContainerOptions {
+    id?: string;
+    children?: ComponentInstance[];
+    onInit?(props: Props): void;
+    onUpdate?(props: Props): void;
+    onDestroy?(parent: Element, afterDestroy: () => void): void;
+    onMount?(context: Element<any>, index?: number): void;
+    setWidth(width: number): void;
+    setHeight(height: number): void;
+    getLocalBounds?(): Rectangle;
+    getGlobalPosition?(): Point;
+}
+export declare const EVENTS: string[];
+export type OnHook = (() => void) | (() => Promise<void> | void);
+export declare function DisplayObject(extendClass: any): {
+    new (): {
+        [x: string]: any;
+        "__#private@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: Props;
+        isMounted: boolean;
+        _anchorPoints: ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: import('@signe/reactive').WritableSignal<number>;
+        displayHeight: import('@signe/reactive').WritableSignal<number>;
+        overrideProps: string[];
+        layout: any;
+        onBeforeDestroy: OnHook | null;
+        onAfterMount: OnHook | null;
+        subjectInit: BehaviorSubject<any>;
+        disableLayout: boolean;
+        "__#private@#registeredEvents": Map<string, Function>;
+        "__#private@#computedLayoutBox": {
+            width?: number;
+            height?: number;
+        } | null;
+        "__#private@#element": Element<any> | null;
+        /**
+         * Get the element reference for freeze checking
+         * @returns The element reference or null
+         */
+        getElement(): Element<any> | null;
+        onLayoutComputed(_event: any): void;
+        get deltaRatio(): any;
+        get parentIsFlex(): any;
+        onInit(props: Props): void;
+        onMount(element: Element<any>, index?: number): Promise<void>;
+        onUpdate(props: Props): void;
+        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
+        setFlexDirection(direction: FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        setAlignContent(align: AlignContent): void;
+        setAlignSelf(align: AlignContent): void;
+        setAlignItems(align: AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        setPosition(position: EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: EdgeSize): void;
+        setMargin(margin: EdgeSize): void;
+        setGap(gap: EdgeSize): void;
+        setBorder(border: EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+        setMinWidth(minWidth: number | string): void;
+        setMinHeight(minHeight: number | string): void;
+        setMaxWidth(maxWidth: number | string): void;
+        setMaxHeight(maxHeight: number | string): void;
+        setAspectRatio(aspectRatio: number): void;
+        setFlexGrow(flexGrow: number): void;
+        setFlexShrink(flexShrink: number): void;
+        setFlexBasis(flexBasis: number | string): void;
+        setRowGap(rowGap: number): void;
+        setColumnGap(columnGap: number): void;
+        setTop(top: number | string): void;
+        setLeft(left: number | string): void;
+        setRight(right: number | string): void;
+        setBottom(bottom: number | string): void;
+        setObjectFit(objectFit: ObjectFit): void;
+        setObjectPosition(objectPosition: ObjectPosition): void;
+        setTransformOrigin(transformOrigin: TransformOrigin): void;
+    };
+    [x: string]: any;
+};
+//# sourceMappingURL=DisplayObject.d.ts.map

package/dist/components/DisplayObject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayObject.d.ts","sourceRoot":"","sources":["../../src/components/DisplayObject.ts"],"names":[],"mappings":"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"}

package/dist/components/FocusContainer.d.ts

@@ -0,0 +1,129 @@
+import { Element } from '../engine/reactive';
+import { ComponentFunction } from '../engine/signal';
+import { DisplayObjectProps } from './types/DisplayObject';
+import { ScrollOptions } from '../engine/FocusManager';
+import { Signal } from '@signe/reactive';
+import { CanvasViewport } from './Viewport';
+import { Controls } from '../directives/ControlsBase';
+/**
+ * Properties for FocusContainer component
+ *
+ * @property tabindex - Focus index for the container (default: 0 if present)
+ * @property controls - Controls configuration for automatic navigation
+ * @property onFocusChange - Callback when focus changes
+ * @property autoScroll - Enable automatic scrolling to focused element (default: false)
+ * @property viewport - Viewport instance to use for scrolling (optional, uses context viewport by default)
+ */
+export interface FocusContainerProps extends DisplayObjectProps {
+    tabindex?: number;
+    controls?: Controls | Signal<Controls>;
+    onFocusChange?: (index: number, element: Element | null) => void;
+    autoScroll?: boolean | ScrollOptions;
+    viewport?: CanvasViewport;
+    context?: {
+        viewport?: CanvasViewport;
+    };
+}
+/**
+ * FocusContainer component for managing focus navigation
+ *
+ * This component provides a container that manages focus navigation between
+ * focusable child elements. It supports automatic navigation via Controls
+ * (keyboard/gamepad) and automatic scrolling with Viewport.
+ *
+ * ## Features
+ *
+ * - **Focus Management**: Automatically registers focusable children
+ * - **Navigation**: Supports keyboard/gamepad navigation via Controls
+ * - **Auto-scroll**: Automatically scrolls viewport to show focused element
+ * - **Hooks**: Provides reactive signals for focus state
+ *
+ * @example
+ * ```typescript
+ * // Basic usage
+ * <FocusContainer tabindex={0}>
+ *   <Button tabindex={0} text="Button 1" />
+ *   <Button tabindex={1} text="Button 2" />
+ * </FocusContainer>
+ *
+ * // With Controls
+ * <FocusContainer tabindex={0} controls={controlsConfig}>
+ *   <Button tabindex={0} text="Button 1" />
+ *   <Button tabindex={1} text="Button 2" />
+ * </FocusContainer>
+ *
+ * // With auto-scroll
+ * <Viewport worldWidth={2000} worldHeight={5000}>
+ *   <FocusContainer tabindex={0} autoScroll={true}>
+ *     <Button tabindex={0} y={0} text="Item 1" />
+ *     <Button tabindex={1} y={100} text="Item 2" />
+ *   </FocusContainer>
+ * </Viewport>
+ * ```
+ */
+export declare class CanvasFocusContainer {
+    private containerId;
+    private currentIndexSignal;
+    private focusedElementSignal;
+    private registeredFocusables;
+    /**
+     * Initialize the focus container
+     *
+     * @param props - Component properties
+     */
+    onInit(props: FocusContainerProps): void;
+    /**
+     * Mount hook - register focusable children
+     *
+     * @param element - The element being mounted
+     */
+    onMount(element: Element<CanvasFocusContainer>): Promise<void>;
+    /**
+     * Update hook - handle prop changes
+     *
+     * @param props - Updated properties
+     */
+    onUpdate(props: FocusContainerProps): void;
+    /**
+     * Destroy hook - cleanup
+     *
+     * @param parent - Parent element
+     * @param afterDestroy - Callback after destruction
+     */
+    onDestroy(parent: Element<any>, afterDestroy?: () => void): Promise<void>;
+    /**
+     * Register focusable children from element
+     *
+     * @param element - Container element
+     */
+    private registerChildren;
+    /**
+     * Get the container ID
+     *
+     * @returns Container identifier
+     */
+    getContainerId(): string;
+    /**
+     * Get current index signal
+     *
+     * @returns Signal for current focus index
+     */
+    getCurrentIndexSignal(): Signal<number | null> | null;
+    /**
+     * Get focused element signal
+     *
+     * @returns Signal for current focused element
+     */
+    getFocusedElementSignal(): Signal<Element | null> | null;
+}
+export interface CanvasFocusContainer extends DisplayObjectProps {
+}
+/**
+ * FocusContainer component function
+ *
+ * @param props - Component properties
+ * @returns FocusContainer element
+ */
+export declare const FocusContainer: ComponentFunction<FocusContainerProps>;
+export declare const Navigation: ComponentFunction<FocusContainerProps>;
+//# sourceMappingURL=FocusContainer.d.ts.map

package/dist/components/FocusContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusContainer.d.ts","sourceRoot":"","sources":["../../src/components/FocusContainer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAEtF,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAgB,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAU,MAAM,EAAkD,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AAEtD,OAAO,+BAA+B,CAAC;AAEvC;;;;;;;;GAQG;AACH,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IACjE,UAAU,CAAC,EAAE,OAAO,GAAG,aAAa,CAAC;IACrC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,OAAO,CAAC,EAAE;QACR,QAAQ,CAAC,EAAE,cAAc,CAAC;KAC3B,CAAC;CACH;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,kBAAkB,CAA8C;IACxE,OAAO,CAAC,oBAAoB,CAAsF;IAClH,OAAO,CAAC,oBAAoB,CAA0B;IAEtD;;;;OAIG;IACH,MAAM,CAAC,KAAK,EAAE,mBAAmB;IAyBjC;;;;OAIG;IACG,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,oBAAoB,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAkDpE;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,mBAAmB;IAUnC;;;;;OAKG;IACG,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,YAAY,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;IAc/E;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IA8HxB;;;;OAIG;IACH,cAAc,IAAI,MAAM;IAIxB;;;;OAIG;IACH,qBAAqB,IAAI,MAAM,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI;IAIrD;;;;OAIG;IACH,uBAAuB,IAAI,MAAM,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI;CAGzD;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;CAAI;AAIpE;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CAEjE,CAAC;AAEF,eAAO,MAAM,UAAU,wCAAiB,CAAC"}

package/dist/components/Graphic.d.ts

@@ -0,0 +1,64 @@
+import { Graphics as PixiGraphics } from 'pixi.js';
+import { Element } from '../engine/reactive';
+import { ComponentInstance } from './DisplayObject';
+import { DisplayObjectProps } from './types/DisplayObject';
+import { SignalOrPrimitive } from './types';
+interface GraphicsProps extends DisplayObjectProps {
+    draw?: (graphics: PixiGraphics, width: number, height: number, anchor?: [number, number]) => void;
+}
+interface RectProps extends DisplayObjectProps {
+    color: SignalOrPrimitive<string>;
+}
+interface CircleProps extends DisplayObjectProps {
+    radius: SignalOrPrimitive<number>;
+    color: SignalOrPrimitive<string>;
+}
+interface EllipseProps extends DisplayObjectProps {
+    color: SignalOrPrimitive<string>;
+}
+interface TriangleProps extends DisplayObjectProps {
+    base: SignalOrPrimitive<number>;
+    color: SignalOrPrimitive<string>;
+}
+interface SvgProps extends DisplayObjectProps {
+    /** SVG content as string (legacy prop) */
+    svg?: string;
+    /** URL source of the SVG file to load */
+    src?: string;
+    /** Direct SVG content as string */
+    content?: string;
+}
+export declare function Graphics(props: GraphicsProps): Element<ComponentInstance>;
+export declare function Rect(props: RectProps): Element<ComponentInstance>;
+export declare function Circle(props: CircleProps): Element<ComponentInstance>;
+export declare function Ellipse(props: EllipseProps): Element<ComponentInstance>;
+export declare function Triangle(props: TriangleProps): Element<ComponentInstance>;
+/**
+ * Creates an SVG component that can render SVG graphics from URL, content, or legacy svg prop.
+ *
+ * This component provides three ways to display SVG graphics:
+ * - **src**: Load SVG from a URL using Assets.load with parseAsGraphicsContext option
+ * - **content**: Render SVG directly from string content using Graphics.svg() method
+ * - **svg**: Legacy prop for SVG content (for backward compatibility)
+ *
+ * @param props - Component properties including src, content, or svg
+ * @returns A reactive SVG component
+ * @example
+ * ```typescript
+ * // Load from URL
+ * const svgFromUrl = Svg({ src: "/assets/logo.svg" });
+ *
+ * // Direct content
+ * const svgFromContent = Svg({
+ *   content: `<svg viewBox="0 0 100 100">
+ *     <circle cx="50" cy="50" r="40" fill="blue"/>
+ *   </svg>`
+ * });
+ *
+ * // Legacy usage
+ * const svgLegacy = Svg({ svg: "<svg>...</svg>" });
+ * ```
+ */
+export declare function Svg(props: SvgProps): Element<ComponentInstance>;
+export {};
+//# sourceMappingURL=Graphic.d.ts.map

package/dist/components/Graphic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../src/components/Graphic.ts"],"names":[],"mappings":"AACA,OAAO,EAA2B,QAAQ,IAAI,YAAY,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAmB,OAAO,EAAqB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAI5C,UAAU,aAAc,SAAQ,kBAAkB;IAChD,IAAI,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CACnG;AAED,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,UAAU,WAAY,SAAQ,kBAAkB;IAC9C,MAAM,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAClC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,UAAU,YAAa,SAAQ,kBAAkB;IAC/C,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,UAAU,aAAc,SAAQ,kBAAkB;IAChD,IAAI,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAChC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;CAClC;AAED,UAAU,QAAS,SAAQ,kBAAkB;IAC3C,0CAA0C;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAsID,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8BAE5C;AAWD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,8BAqBpC;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,8BAoBxC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,8BAE1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8BAmB5C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,8BAyBlC"}

package/dist/components/Joystick.d.ts

@@ -0,0 +1,36 @@
+export interface JoystickChangeEvent {
+    angle: number;
+    direction: Direction;
+    power: number;
+}
+export declare enum Direction {
+    LEFT = "left",
+    TOP = "top",
+    BOTTOM = "bottom",
+    RIGHT = "right",
+    TOP_LEFT = "top_left",
+    TOP_RIGHT = "top_right",
+    BOTTOM_LEFT = "bottom_left",
+    BOTTOM_RIGHT = "bottom_right"
+}
+export interface JoystickSettings {
+    outer?: string;
+    inner?: string;
+    outerScale?: {
+        x: number;
+        y: number;
+    };
+    innerScale?: {
+        x: number;
+        y: number;
+    };
+    innerColor?: string;
+    outerColor?: string;
+    onChange?: (data: JoystickChangeEvent) => void;
+    onStart?: () => void;
+    onEnd?: () => void;
+    /** Controls instance to automatically apply joystick events to (e.g., JoystickControls or ControlsDirective) */
+    controls?: any;
+}
+export declare function Joystick(opts?: JoystickSettings): import('../').Element<import('./DisplayObject').ComponentInstance> | Promise<import('../').Element<import('./DisplayObject').ComponentInstance>>;
+//# sourceMappingURL=Joystick.d.ts.map

package/dist/components/Joystick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Joystick.d.ts","sourceRoot":"","sources":["../../src/components/Joystick.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,SAAS;IACnB,IAAI,SAAS;IACb,GAAG,QAAQ;IACX,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,QAAQ,aAAa;IACrB,SAAS,cAAc;IACvB,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;CAC9B;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,wBAAgB,QAAQ,CAAC,IAAI,GAAE,gBAAqB,oJAkUnD"}

package/dist/components/Mesh.d.ts

@@ -0,0 +1,208 @@
+import { Geometry, Shader, Texture } from 'pixi.js';
+import { Element } from '../engine/reactive';
+import { ComponentInstance } from './DisplayObject';
+import { DisplayObjectProps } from './types/DisplayObject';
+import { SignalOrPrimitive } from './types';
+import { ComponentFunction } from '../engine/signal';
+/**
+ * Interface defining the properties for a Mesh component.
+ * Extends DisplayObjectProps to inherit common display object properties.
+ */
+interface MeshProps extends DisplayObjectProps {
+    /** The geometry defining the mesh structure (vertices, indices, UVs, etc.) */
+    geometry?: Geometry;
+    /** The shader to render the mesh with */
+    shader?: Shader;
+    /** The texture to apply to the mesh */
+    texture?: Texture | string;
+    /** The image URL to load as texture */
+    image?: string;
+    /** The tint color to apply to the mesh */
+    tint?: SignalOrPrimitive<number>;
+    /** Whether to round pixels for sharper rendering */
+    roundPixels?: SignalOrPrimitive<boolean>;
+}
+declare const CanvasMesh_base: {
+    new (): {
+        [x: string]: any;
+        "__#private@#canvasContext": {
+            [key: string]: any;
+        } | null;
+        isFlex: boolean;
+        fullProps: import('..').Props;
+        isMounted: boolean;
+        _anchorPoints: import('pixi.js').ObservablePoint;
+        isCustomAnchor: boolean;
+        displayWidth: import('@signe/reactive').WritableSignal<number>;
+        displayHeight: import('@signe/reactive').WritableSignal<number>;
+        overrideProps: string[];
+        layout: any;
+        onBeforeDestroy: import('./DisplayObject').OnHook | null;
+        onAfterMount: import('./DisplayObject').OnHook | null;
+        subjectInit: import('rxjs').BehaviorSubject<any>;
+        disableLayout: boolean;
+        "__#private@#registeredEvents": Map<string, Function>;
+        "__#private@#computedLayoutBox": {
+            width?: number;
+            height?: number;
+        } | null;
+        "__#private@#element": Element<any> | null;
+        getElement(): Element<any> | null;
+        onLayoutComputed(_event: any): void;
+        get deltaRatio(): any;
+        get parentIsFlex(): any;
+        onInit(props: import('..').Props): void;
+        onMount(element: Element<any>, index?: number): Promise<void>;
+        onUpdate(props: import('..').Props): void;
+        onDestroy(parent: Element, afterDestroy?: () => void): Promise<void>;
+        setFlexDirection(direction: import('./types/DisplayObject').FlexDirection): void;
+        setFlexWrap(wrap: "wrap" | "nowrap" | "wrap-reverse"): void;
+        setAlignContent(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignSelf(align: import('./types/DisplayObject').AlignContent): void;
+        setAlignItems(align: import('./types/DisplayObject').AlignContent): void;
+        setJustifyContent(justifyContent: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): void;
+        setPosition(position: import('./types/DisplayObject').EdgeSize): void;
+        setX(x: number): void;
+        setY(y: number): void;
+        setPadding(padding: import('./types/DisplayObject').EdgeSize): void;
+        setMargin(margin: import('./types/DisplayObject').EdgeSize): void;
+        setGap(gap: import('./types/DisplayObject').EdgeSize): void;
+        setBorder(border: import('./types/DisplayObject').EdgeSize): void;
+        setPositionType(positionType: "relative" | "absolute"): void;
+        setWidth(width: number): void;
+        setHeight(height: number): void;
+        getWidth(): number;
+        getHeight(): number;
+        setMinWidth(minWidth: number | string): void;
+        setMinHeight(minHeight: number | string): void;
+        setMaxWidth(maxWidth: number | string): void;
+        setMaxHeight(maxHeight: number | string): void;
+        setAspectRatio(aspectRatio: number): void;
+        setFlexGrow(flexGrow: number): void;
+        setFlexShrink(flexShrink: number): void;
+        setFlexBasis(flexBasis: number | string): void;
+        setRowGap(rowGap: number): void;
+        setColumnGap(columnGap: number): void;
+        setTop(top: number | string): void;
+        setLeft(left: number | string): void;
+        setRight(right: number | string): void;
+        setBottom(bottom: number | string): void;
+        setObjectFit(objectFit: import('./types/DisplayObject').ObjectFit): void;
+        setObjectPosition(objectPosition: import('./types/DisplayObject').ObjectPosition): void;
+        setTransformOrigin(transformOrigin: import('./types/DisplayObject').TransformOrigin): void;
+    };
+    [x: string]: any;
+};
+/**
+ * Canvas Mesh component class that extends DisplayObject with PixiMesh functionality.
+ * This component allows rendering of custom 3D meshes with shaders and textures.
+ *
+ * @example
+ * ```typescript
+ * // Basic mesh with geometry and texture
+ * const mesh = Mesh({
+ *   geometry: myGeometry,
+ *   texture: "path/to/texture.png",
+ *   tint: 0xff0000
+ * });
+ *
+ * // Mesh with custom shader
+ * const customMesh = Mesh({
+ *   geometry: myGeometry,
+ *   shader: myCustomShader,
+ *   draw: (mesh) => {
+ *     // Custom mesh manipulation
+ *     mesh.rotation += 0.01;
+ *   }
+ * });
+ * ```
+ */
+declare class CanvasMesh extends CanvasMesh_base {
+    /**
+     * Constructor for the CanvasMesh component.
+     * Initializes the PixiMesh with default geometry and shader to prevent errors.
+     *
+     * @example
+     * ```typescript
+     * // This constructor is called internally by the engine
+     * const mesh = new CanvasMesh();
+     * ```
+     */
+    constructor();
+    /**
+     * Initializes the mesh component with the provided properties.
+     * This method is called before onUpdate to set up initial state.
+     *
+     * @param props - The initial properties
+     * @example
+     * ```typescript
+     * // This method is called internally when the component is created
+     * mesh.onInit({
+     *   geometry: myGeometry,
+     *   texture: "texture.png"
+     * });
+     * ```
+     */
+    onInit(props: MeshProps): void;
+    /**
+     * Updates the mesh component when properties change.
+     * Handles texture loading, shader updates, and other property changes.
+     *
+     * @param props - The updated properties
+     * @example
+     * ```typescript
+     * // This method is called internally when props change
+     * mesh.onUpdate({
+     *   tint: 0x00ff00,
+     *   texture: "new-texture.png"
+     * });
+     * ```
+     */
+    onUpdate(props: MeshProps): Promise<void>;
+    /**
+     * Called when the component is about to be destroyed.
+     * Cleans up the draw effect subscription and calls the parent destroy method.
+     *
+     * @param parent - The parent element
+     * @param afterDestroy - Callback function to execute after destruction
+     * @example
+     * ```typescript
+     * // This method is typically called by the engine internally
+     * await mesh.onDestroy(parentElement, () => console.log('Mesh destroyed'));
+     * ```
+     */
+    onDestroy(parent: Element<ComponentInstance>, afterDestroy: () => void): Promise<void>;
+}
+/**
+ * Creates a Mesh component with the specified properties.
+ * This is the main function used to create mesh instances in your application.
+ *
+ * @param props - The properties for the mesh component
+ * @returns A mesh component element
+ * @example
+ * ```typescript
+ * import { Mesh } from 'canvasengine';
+ *
+ * // Create a basic textured mesh
+ * const myMesh = Mesh({
+ *   geometry: triangleGeometry,
+ *   texture: "assets/texture.png",
+ *   x: 100,
+ *   y: 100,
+ *   tint: 0xff0000
+ * });
+ *
+ * // Create a mesh with custom shader
+ * const shaderMesh = Mesh({
+ *   geometry: planeGeometry,
+ *   shader: customShader,
+ *   draw: (mesh) => {
+ *     mesh.rotation += 0.01;
+ *   }
+ * });
+ * ```
+ */
+export declare const Mesh: ComponentFunction<MeshProps>;
+export { CanvasMesh };
+export type { MeshProps };
+//# sourceMappingURL=Mesh.d.ts.map

package/dist/components/Mesh.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Mesh.d.ts","sourceRoot":"","sources":["../../src/components/Mesh.ts"],"names":[],"mappings":"AACA,OAAO,EAAoB,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAuB,MAAM,SAAS,CAAC;AAC3F,OAAO,EAAmB,OAAO,EAAqB,MAAM,oBAAoB,CAAC;AACjF,OAAO,EAAE,iBAAiB,EAAiB,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;GAGG;AACH,UAAU,SAAU,SAAQ,kBAAkB;IAC5C,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAC3B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0CAA0C;IAC1C,IAAI,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IACjC,oDAAoD;IACpD,WAAW,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,CAAC;CAC1C;;;;;;;;;;;;;;;;;;;;;;iBA+Ec,CAAC;kBAAgB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA7EjC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,cAAM,UAAW,SAAQ,eAAuB;IAC9C;;;;;;;;;OASG;;IASH;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,KAAK,EAAE,SAAS;IAkBvB;;;;;;;;;;;;;OAaG;IACG,QAAQ,CAAC,KAAK,EAAE,SAAS;IA4C/B;;;;;;;;;;;OAWG;IACG,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,iBAAiB,CAAC,EAAE,YAAY,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC;CAM7F;AAKD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,SAAS,CAE7C,CAAC;AAGF,OAAO,EAAE,UAAU,EAAE,CAAC;AAGtB,YAAY,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/NineSliceSprite.d.ts

@@ -0,0 +1,16 @@
+import { Texture } from 'pixi.js';
+import { DisplayObjectProps } from './types/DisplayObject';
+interface NineSliceSpriteProps extends DisplayObjectProps {
+    image?: string;
+    texture?: Texture;
+    width?: number;
+    height?: number;
+    leftWidth?: number;
+    rightWidth?: number;
+    topHeight?: number;
+    bottomHeight?: number;
+    roundPixels?: boolean;
+}
+export declare function NineSliceSprite(props: NineSliceSpriteProps): import('..').Element<import('./DisplayObject').ComponentInstance>;
+export {};
+//# sourceMappingURL=NineSliceSprite.d.ts.map

package/dist/components/NineSliceSprite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NineSliceSprite.d.ts","sourceRoot":"","sources":["../../src/components/NineSliceSprite.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkD,OAAO,EAAE,MAAM,SAAS,CAAC;AAGlF,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAG3D,UAAU,oBAAqB,SAAQ,kBAAkB;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB;AA8BD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qEAE1D"}

package/dist/components/ParticleEmitter.d.ts

@@ -0,0 +1,4 @@
+import { Element } from '../engine/reactive';
+import { ComponentInstance } from './DisplayObject';
+export declare function ParticlesEmitter(props: any): Element<ComponentInstance>;
+//# sourceMappingURL=ParticleEmitter.d.ts.map

package/dist/components/ParticleEmitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ParticleEmitter.d.ts","sourceRoot":"","sources":["../../src/components/ParticleEmitter.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,OAAO,EAAqB,MAAM,oBAAoB,CAAC;AAGjF,OAAO,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAoCpD,wBAAgB,gBAAgB,CAAC,KAAK,KAAA,8BAErC"}

package/dist/components/Scene.d.ts

@@ -0,0 +1,2 @@
+export declare function Scene(props: any): import('..').Element<import('./DisplayObject').ComponentInstance> | Promise<import('..').Element<import('./DisplayObject').ComponentInstance>>;
+//# sourceMappingURL=Scene.d.ts.map

package/dist/components/Scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scene.d.ts","sourceRoot":"","sources":["../../src/components/Scene.ts"],"names":[],"mappings":"AAGA,wBAAgB,KAAK,CAAC,KAAK,KAAA,kJAE1B"}