canvasengine 2.0.0-beta.6 → 2.0.0-beta.61

package/dist/components/Button.d.ts

@@ -0,0 +1,185 @@
+import { Signal } from '@signe/reactive';
+import { FederatedPointerEvent } from 'pixi.js';
+import { ControlsDirective } from '../directives/Controls';
+import { JoystickControls } from '../directives/JoystickControls';
+import { Element } from '../engine/reactive';
+/**
+ * Button states for visual feedback
+ */
+export declare enum ButtonState {
+    Normal = "normal",
+    Hover = "hover",
+    Pressed = "pressed",
+    Disabled = "disabled"
+}
+/**
+ * Button style configuration for different visual approaches
+ */
+export interface ButtonStyle {
+    /** Background color for each state */
+    backgroundColor?: {
+        [ButtonState.Normal]?: string;
+        [ButtonState.Hover]?: string;
+        [ButtonState.Pressed]?: string;
+        [ButtonState.Disabled]?: string;
+    };
+    /** Border configuration */
+    border?: {
+        color?: string;
+        width?: number;
+        radius?: number;
+    };
+    /** Text styling */
+    text?: {
+        color?: string;
+        fontSize?: number;
+        fontFamily?: string;
+    };
+    /** Sprite textures for each state (alternative to backgroundColor) */
+    textures?: {
+        [ButtonState.Normal]?: string;
+        [ButtonState.Hover]?: string;
+        [ButtonState.Pressed]?: string;
+        [ButtonState.Disabled]?: string;
+    };
+}
+/**
+ * Properties for the Button component
+ */
+export interface ButtonProps {
+    /** Button text content */
+    text?: string;
+    /** Button disabled state */
+    disabled?: boolean;
+    /** Click event handler */
+    click?: (event: FederatedPointerEvent) => void;
+    /** Hover enter event handler */
+    hoverEnter?: (event: FederatedPointerEvent) => void;
+    /** Hover leave event handler */
+    hoverLeave?: (event: FederatedPointerEvent) => void;
+    /** Press down event handler */
+    pressDown?: (event: FederatedPointerEvent) => void;
+    /** Press up event handler */
+    pressUp?: (event: FederatedPointerEvent) => void;
+    /** Visual style configuration */
+    style?: ButtonStyle;
+    /** Button width */
+    width?: number;
+    /** Button height */
+    height?: number;
+    /** Button position X */
+    x?: number;
+    /** Button position Y */
+    y?: number;
+    /** Button alpha/opacity */
+    alpha?: number;
+    /** Button visibility */
+    visible?: boolean;
+    /** Button cursor */
+    cursor?: string;
+    /** Controls instance to automatically apply button events to (e.g., ControlsDirective or JoystickControls) */
+    controls?: ControlsDirective | JoystickControls | any;
+    /** Name of the control to trigger with applyControl when button is clicked */
+    controlName?: string;
+    /** Shape of the button background: 'rect', 'circle', or 'ellipse' */
+    shape?: 'rect' | 'circle' | 'ellipse';
+    /** Custom background component or element (replaces default background if provided) */
+    background?: Element | any;
+    /** Custom children components for button content (takes priority over text if provided) */
+    children?: Element[];
+    /** Focus index for the button */
+    tabindex?: number | Signal<number>;
+}
+/**
+ * Creates a Button component with interactive states and customizable styling.
+ *
+ * This component provides a fully interactive button with visual feedback
+ * for different states (normal, hover, pressed, disabled). It supports both
+ * sprite-based and graphics-based rendering approaches.
+ *
+ * The button is built using a Container with background and text elements,
+ * providing reactive state management and event handling.
+ *
+ * ## Features
+ *
+ * - **Controls Integration**: Automatically trigger controls via `applyControl` when clicked
+ * - **Multiple Shapes**: Support for rect, circle, and ellipse shapes
+ * - **Custom Content**: Use children components for custom button content
+ * - **Custom Background**: Provide a custom background component
+ *
+ * @param props - Button configuration including text, styling, controls, shape, and event handlers
+ * @returns A reactive Button component
+ * @example
+ * ```typescript
+ * // Simple button with text and click handler
+ * const simpleButton = Button({
+ *   text: "Click Me",
+ *   click: () => console.log("Button clicked!"),
+ *   width: 150,
+ *   height: 50
+ * });
+ *
+ * // Button with controls integration
+ * const jumpButton = Button({
+ *   text: "Jump",
+ *   controls: controlsInstance,
+ *   controlName: "jump",
+ *   width: 120,
+ *   height: 40
+ * });
+ *
+ * // Circular button
+ * const circleButton = Button({
+ *   text: "Action",
+ *   shape: "circle",
+ *   width: 100,
+ *   height: 100
+ * });
+ *
+ * // Button with custom content (children)
+ * const customButton = Button({
+ *   shape: "circle",
+ *   width: 80,
+ *   height: 80,
+ *   children: [
+ *     h(Sprite, { image: "icon.png", width: 50, height: 50 })
+ *   ]
+ * });
+ *
+ * // Styled button with custom colors
+ * const styledButton = Button({
+ *   text: "Styled Button",
+ *   style: {
+ *     backgroundColor: {
+ *       normal: "#28a745",
+ *       hover: "#218838",
+ *       pressed: "#1e7e34",
+ *       disabled: "#6c757d"
+ *     },
+ *     border: {
+ *       radius: 8,
+ *       width: 2,
+ *       color: "#ffffff"
+ *     },
+ *     text: {
+ *       fontSize: 18,
+ *       color: "#ffffff"
+ *     }
+ *   }
+ * });
+ *
+ * // Sprite-based button
+ * const spriteButton = Button({
+ *   text: "Play Game",
+ *   style: {
+ *     textures: {
+ *       normal: "/assets/button-normal.png",
+ *       hover: "/assets/button-hover.png",
+ *       pressed: "/assets/button-pressed.png"
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function Button(props: ButtonProps): Element<import('./DisplayObject').ComponentInstance> | Promise<Element<import('./DisplayObject').ComponentInstance>>;
+//# sourceMappingURL=Button.d.ts.map

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

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

package/dist/components/Canvas.d.ts

@@ -0,0 +1,17 @@
+import { Props } from '../engine/reactive';
+import { ComponentFunction } from '../engine/signal';
+import { SignalOrPrimitive } from './types';
+import { Size } from './types/DisplayObject';
+export interface CanvasProps extends Props {
+    cursorStyles?: () => any;
+    width?: SignalOrPrimitive<Size>;
+    height?: SignalOrPrimitive<Size>;
+    canvasEl?: HTMLElement;
+    selector?: string;
+    isRoot?: boolean;
+    tick?: any;
+    class?: SignalOrPrimitive<string>;
+    background?: string;
+}
+export declare const Canvas: ComponentFunction<CanvasProps>;
+//# sourceMappingURL=Canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Canvas.d.ts","sourceRoot":"","sources":["../../src/components/Canvas.ts"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,EAIN,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAgB7C,MAAM,WAAW,WAAY,SAAQ,KAAK;IACxC,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC;IACzB,KAAK,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,iBAAiB,CAAC,IAAI,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,KAAK,CAAC,EAAE,iBAAiB,CAAC,MAAM,CAAC,CAAC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA4HjD,CAAC"}

package/dist/components/DOMElement.d.ts

@@ -0,0 +1,54 @@
+import { Element } from '../engine/reactive';
+import { OnHook } from './DisplayObject';
+import { ComponentFunction } from '../engine/signal';
+import { DisplayObjectProps } from './types/DisplayObject';
+export interface DOMElementProps extends DisplayObjectProps {
+    element?: string | {
+        value: HTMLElement;
+    };
+    textContent?: string;
+    attrs?: Record<string, any> & {
+        class?: string | string[] | Record<string, boolean> | {
+            items?: string[];
+        } | {
+            value?: string | string[] | Record<string, boolean>;
+        };
+        style?: string | Record<string, string | number> | {
+            value?: string | Record<string, string | number>;
+        };
+    };
+    onBeforeDestroy?: OnHook;
+}
+export interface DOMContainerProps extends DOMElementProps {
+    element: string | {
+        value: HTMLElement;
+    };
+}
+export declare class CanvasDOMElement {
+    element: HTMLElement;
+    private eventListeners;
+    private onBeforeDestroy;
+    private valueSignal;
+    private isFormElementType;
+    private classSubscriptions;
+    private childTextSubscriptions;
+    /**
+     * Checks if the element is a form element that supports the value attribute
+     * @param elementType - The element type string from props
+     * @returns true if the element is a form element with value support
+     */
+    private isFormElement;
+    private collectClassTokens;
+    private collectClassSignals;
+    private applyClassList;
+    private syncClassSubscriptions;
+    private appendChildElement;
+    onInit(props: DOMElementProps): void;
+    onMount(context: Element<CanvasDOMElement>): void;
+    onUpdate(props: DOMElementProps): void;
+    onDestroy(parent: Element<CanvasDOMElement>, afterDestroy: () => void): Promise<void>;
+}
+export interface CanvasDOMElement extends DisplayObjectProps {
+}
+export declare const DOMElement: ComponentFunction<DOMContainerProps>;
+//# sourceMappingURL=DOMElement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DOMElement.d.ts","sourceRoot":"","sources":["../../src/components/DOMElement.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,OAAO,EAER,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAoC,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI3D,MAAM,WAAW,eAAgB,SAAQ,kBAAkB;IACzD,OAAO,CAAC,EACN,MAAM,GACN;QACA,KAAK,EAAE,WAAW,CAAC;KACpB,CAAC;IACF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG;QAC5B,KAAK,CAAC,EACJ,MAAM,GACN,MAAM,EAAE,GACR,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GACvB;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GACpB;YAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;SAAE,CAAC;QAC1D,KAAK,CAAC,EACJ,MAAM,GACN,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAC/B;YAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;SAAE,CAAC;KACxD,CAAC;IACF,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAkB,SAAQ,eAAe;IACxD,OAAO,EACL,MAAM,GACN;QACA,KAAK,EAAE,WAAW,CAAC;KACpB,CAAC;CACH;AAwKD,qBAAa,gBAAgB;IACpB,OAAO,EAAE,WAAW,CAAC;IAC5B,OAAO,CAAC,cAAc,CAA8C;IACpE,OAAO,CAAC,eAAe,CAAuB;IAC9C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,kBAAkB,CAA0C;IACpE,OAAO,CAAC,sBAAsB,CAA0C;IAExE;;;;OAIG;IACH,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,kBAAkB;IAwB1B,OAAO,CAAC,mBAAmB;IAiB3B,OAAO,CAAC,cAAc;IAiBtB,OAAO,CAAC,sBAAsB;IAmB9B,OAAO,CAAC,kBAAkB;IAqD1B,MAAM,CAAC,KAAK,EAAE,eAAe;IAyD7B,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC;IAgC1C,QAAQ,CAAC,KAAK,EAAE,eAAe;IAqEzB,SAAS,CACb,MAAM,EAAE,OAAO,CAAC,gBAAgB,CAAC,EACjC,YAAY,EAAE,MAAM,IAAI,GACvB,OAAO,CAAC,IAAI,CAAC;CA6BjB;AAED,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;CAAI;AAIhE,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,iBAAiB,CAE3D,CAAC"}

package/dist/components/DOMSprite.d.ts

@@ -0,0 +1,127 @@
+import { Signal } from '@signe/reactive';
+import { Element } from '../engine/reactive';
+import { ComponentFunction } from '../engine/signal';
+import { CanvasDOMElement, DOMElementProps } from './DOMElement';
+import { OnHook } from './DisplayObject';
+import { Tick } from '../directives/Scheduler';
+import { SpritesheetOptions } from './types/Spritesheet';
+export interface DOMSpriteFrame {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface DOMSpriteProps extends DOMElementProps {
+    image?: string;
+    rectangle?: DOMSpriteFrame | {
+        value?: DOMSpriteFrame;
+    };
+    frames?: DOMSpriteFrame[];
+    frameIndex?: number;
+    fps?: number;
+    playing?: boolean;
+    loop?: boolean;
+    sheet?: {
+        definition?: DOMSpriteSheetDefinition | {
+            value?: DOMSpriteSheetDefinition;
+        } | Signal<DOMSpriteSheetDefinition | undefined> | Promise<DOMSpriteSheetDefinition>;
+        playing?: string;
+        params?: any;
+        onFinish?: () => void;
+    };
+    element?: "div" | "img";
+    class?: any;
+    style?: any;
+    attrs?: Record<string, any> & {
+        class?: string | string[] | Record<string, boolean> | {
+            items?: string[];
+        } | {
+            value?: string | string[] | Record<string, boolean>;
+        };
+        style?: string | Record<string, string | number> | {
+            value?: string | Record<string, string | number>;
+        };
+    };
+    onBeforeDestroy?: OnHook;
+    context?: {
+        tick?: Signal<Tick | null>;
+    };
+}
+type DOMSpriteSheetDefinition = SpritesheetOptions & {
+    image?: string;
+};
+export declare class CanvasDOMSprite extends CanvasDOMElement {
+    private frameIndex;
+    private frames;
+    private rectangle?;
+    private image?;
+    private fps;
+    private loop;
+    private playing;
+    private hasExternalFrameIndex;
+    private elapsed;
+    private tickSignal?;
+    private tickSubscription?;
+    private sheetSubscriptions;
+    private sheetDefinition?;
+    private sheetAnimations;
+    private sheetCurrentAnimation?;
+    private sheetCurrentName?;
+    private sheetParams;
+    private sheetTime;
+    private sheetFrameIndex;
+    private sheetFinished;
+    private sheetLoadToken;
+    private sheetOnFinish?;
+    private rafId?;
+    private lastRafTimestamp?;
+    private lastTickTimestamp?;
+    private renderElementType;
+    private wrapperElementType;
+    private isAnimating;
+    private playingSubscription?;
+    private playingSignal?;
+    private explicitWidth?;
+    private explicitHeight?;
+    private frameWidth;
+    private frameHeight;
+    private fitMode?;
+    private renderElement?;
+    private isContained;
+    onInit(props: DOMElementProps): void;
+    onMount(context: Element<CanvasDOMElement>): void;
+    onUpdate(props: DOMElementProps): void;
+    onDestroy(parent: Element<CanvasDOMElement>, afterDestroy: () => void): Promise<void>;
+    private resolveRectangle;
+    private resolveSheetDefinition;
+    private detectImageDimensions;
+    private createSheetAnimations;
+    private setSheetDefinition;
+    private playSheet;
+    private getCurrentSheetFrame;
+    private advanceSheet;
+    private mergeEventAttrs;
+    private applyProps;
+    private resolveValue;
+    private resolvePoint;
+    private resolveSize;
+    private resolvePixelSize;
+    private toCssColor;
+    private applyDisplayProps;
+    private syncRenderElement;
+    private getRenderElement;
+    private applyContainScale;
+    private bindPlayingSignal;
+    private bindSheetParams;
+    private getFrames;
+    private normalizeIndex;
+    private render;
+    private applyFrame;
+    private updateAnimationLoop;
+    private startAnimationLoop;
+    private stopAnimationLoop;
+    private advance;
+}
+export declare const DOMSprite: ComponentFunction<DOMSpriteProps>;
+export {};
+//# sourceMappingURL=DOMSprite.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DOMSprite.d.ts","sourceRoot":"","sources":["../../src/components/DOMSprite.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;AAaD,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,8BAsBpC;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,8BAqBxC;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,8BAE1C;AAED,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,8BAoB5C;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/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