fraxel 0.1.0-alpha.1

package/dist/nodes/node2d/sprite.d.ts

@@ -0,0 +1,285 @@
+import { type Texture } from '../../assets/texture.js';
+import { Vector2, type VectorLike } from '../../math/vector2.js';
+import type { Color } from '../../math/types.js';
+import { PrimaryNode } from '../lib/enum.js';
+import { Node2D, type Node2DOptions } from './_node2d.js';
+import type { Reactive } from '../../reactivity/types.js';
+export interface SpriteOptions extends Node2DOptions<PrimaryNode.Sprite> {
+    /**
+     * The **`textureId`** property of `Sprite` represents the sprite's texture.
+     * The texture must be loaded with `loadTexture()` first.
+     *
+     * @example
+     * ```tsx
+     * const BALL_TEXTURE = await loadTexture('/assets/ball.png')
+     *
+     * function Ball() {
+     *   return <sprite textureId={BALL_TEXTURE} />
+     * }
+     * ```
+     */
+    textureId?: Reactive<symbol>;
+    /**
+     * The **`margin`** property of `Sprite` represents the texture offset.
+     *
+     * @example
+     * ```tsx
+     * const IDLE_TEXTURE = await loadTexture('/assets/idle.png')
+     *
+     * function Player() {
+     *   return (
+     *     <sprite textureId={IDLE_TEXTURE} margin={new Vector2(16, 0)} />
+     *   )
+     * }
+     * ```
+     */
+    margin?: Reactive<VectorLike>;
+    /**
+     * The **`sourceSize`** property of `Sprite` represents the source size to render.
+     *
+     * @default texture.size
+     *
+     * @example
+     * ```tsx
+     * const IDLE_TEXTURE = await loadTexture('/assets/idle.png')
+     *
+     * function Player() {
+     *   return (
+     *     <sprite
+     *       textureId={IDLE_TEXTURE}
+     *       margin={new Vector2(16, 0)}
+     *       sourceSize={new Vector2(16, 16)}
+     *     />
+     *   )
+     * }
+     * ```
+     */
+    sourceSize?: Reactive<VectorLike>;
+    /**
+     * The **`displaySize`** property of `Sprite` represents the display size.
+     *
+     * @default this.sourceSize
+     *
+     * @example
+     * ```tsx
+     * const IDLE_TEXTURE = await loadTexture('/assets/idle.png')
+     *
+     * function Player() {
+     *   return (
+     *     <sprite
+     *       textureId={IDLE_TEXTURE}
+     *       margin={new Vector2(16, 0)}
+     *       sourceSize={new Vector2(16, 16)}
+     *       displaySize={new Vector2(32, 32)}
+     *     />
+     *   )
+     * }
+     * ```
+     */
+    displaySize?: Reactive<VectorLike>;
+    /** Whether to flip the sprite horizontally */
+    flipX?: Reactive<boolean>;
+    /** Whether to flip the sprite vertically */
+    flipY?: Reactive<boolean>;
+    /**
+     * The **`brightness`** filter adjusts the sprite's brightness.
+     * `0` = black, `1` = base, `2` = white.
+     *
+     * @default 1
+     *
+     * @example
+     * ```tsx
+     * // Make sprite 50% brighter
+     * <sprite textureId={TEX} brightness={1.5} />
+     * ```
+     */
+    brightness?: Reactive<number>;
+    /**
+     * The **`grayscale`** filter converts the sprite to grayscale.
+     * `0` = full color, `1` = fully grayscale.
+     *
+     * @default 0
+     *
+     * @example
+     * ```tsx
+     * // Half grayscale
+     * <sprite textureId={TEX} grayscale={0.5} />
+     * ```
+     */
+    grayscale?: Reactive<number>;
+    /**
+     * The **`modulate`** filter multiplies the sprite's colors by an RGBA tint.
+     * Each channel ranges from `0` (no intensity) to `1` (full intensity).
+     *
+     * @default [1, 1, 1, 1]
+     *
+     * @example
+     * ```tsx
+     * // Orange tint
+     * <sprite textureId={TEX} modulate={[1, 0.5, 0, 1]} />
+     *
+     * // Red channel only
+     * <sprite textureId={TEX} modulate={[1, 0, 0, 1]} />
+     *
+     * // Semi-transparent
+     * <sprite textureId={TEX} modulate={[1, 1, 1, 0.5]} />
+     * ```
+     */
+    modulate?: Reactive<Color>;
+    /**
+     * The **`contrast`** filter adjusts the sprite's contrast.
+     * `0` = no contrast, `1` = base, `2` = double contrast.
+     *
+     * @default 1
+     *
+     * @example
+     * ```tsx
+     * <sprite textureId={TEX} contrast={1.5} />
+     * ```
+     */
+    contrast?: Reactive<number>;
+    /**
+     * The **`saturate`** filter adjusts the sprite's color saturation.
+     * `0` = desaturated, `1` = base, `2` = double saturation.
+     *
+     * @default 1
+     *
+     * @example
+     * ```tsx
+     * <sprite textureId={TEX} saturate={0.5} />
+     * ```
+     */
+    saturate?: Reactive<number>;
+    /**
+     * The **`hueRotate`** filter rotates the sprite's hue in degrees.
+     * `0` = no rotation, `360` = full rotation.
+     *
+     * @default 0
+     *
+     * @example
+     * ```tsx
+     * // Rotate hue 90 degrees
+     * <sprite textureId={TEX} hueRotate={90} />
+     * ```
+     */
+    hueRotate?: Reactive<number>;
+    /**
+     * The **`invert`** filter inverts the sprite's colors.
+     * `0` = normal, `1` = fully inverted.
+     *
+     * @default 0
+     *
+     * @example
+     * ```tsx
+     * <sprite textureId={TEX} invert={1} />
+     * ```
+     */
+    invert?: Reactive<number>;
+    /**
+     * The **`opacity`** filter adjusts the sprite's opacity.
+     * `0` = fully transparent, `1` = fully opaque.
+     *
+     * @default 1
+     *
+     * @example
+     * ```tsx
+     * // 50% transparent
+     * <sprite textureId={TEX} opacity={0.5} />
+     * ```
+     */
+    opacity?: Reactive<number>;
+}
+/**
+ * The **`Sprite`** node displays a texture or sprite in the game world.
+ * It supports texture atlases with margin/sourceSize, display scaling, flipping, and visual filters.
+ *
+ * @example
+ * ```tsx
+ * import { loadTexture } from 'dinix'
+ * import { useNode } from 'dinix/hooks'
+ *
+ * const PLAYER_TEXTURE = await loadTexture('/assets/player.png')
+ *
+ * function Player() {
+ *   const sprite = useNode(PrimaryNode.Sprite)
+ *
+ *   return (
+ *     <sprite
+ *       ref={sprite}
+ *       textureId={PLAYER_TEXTURE}
+ *       sourceSize={new Vector2(32, 32)}
+ *       displaySize={new Vector2(64, 64)}
+ *       brightness={1.2}
+ *       modulate={[1, 0.5, 0, 1]}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare class Sprite extends Node2D<PrimaryNode.Sprite> {
+    #private;
+    /**
+     * The **`margin`** property defines the texture offset within the source image.
+     * Useful for sprite sheets where each frame has a different position.
+     */
+    margin?: Vector2 | undefined;
+    /**
+     * The **`sourceSize`** property defines the region of the texture to render.
+     * Defaults to the full texture size if not set.
+     */
+    sourceSize?: Vector2 | undefined;
+    /**
+     * The **`displaySize`** property defines the rendered size of the sprite.
+     * Defaults to `sourceSize` if not set.
+     */
+    displaySize?: Vector2 | undefined;
+    /**
+     * The **`flipX`** property controls horizontal mirroring of the sprite.
+     */
+    flipX: boolean;
+    /**
+     * The **`flipY`** property controls vertical mirroring of the sprite.
+     */
+    flipY: boolean;
+    /**
+     * Gets or sets the `textureId` of this sprite.
+     * Setting a new texture updates the sprite's visual immediately.
+     */
+    get textureId(): symbol | undefined;
+    set textureId(value: symbol | undefined);
+    /**
+     * The **`getTexture`** method returns the current texture.
+     * @returns The current `Texture` or `undefined` if no texture is set
+     */
+    getTexture(): Texture | undefined;
+    /** The **`brightness`** filter value. `0` = black, `1` = base, `2` = white. */
+    get brightness(): number;
+    set brightness(value: number);
+    /** The **`grayscale`** filter value. `0` = color, `1` = grayscale. */
+    get grayscale(): number;
+    set grayscale(value: number);
+    /** The **`modulate`** filter color `[r, g, b, a]` with values `0`-`1`. */
+    get modulate(): Color;
+    set modulate(value: Color);
+    /** The **`contrast`** filter value. `0` = no contrast, `1` = base, `2` = double. */
+    get contrast(): number;
+    set contrast(value: number);
+    /** The **`saturate`** filter value. `0` = desaturated, `1` = base, `2` = double. */
+    get saturate(): number;
+    set saturate(value: number);
+    /** The **`hueRotate`** filter value in degrees. `0` = no rotation, `360` = full. */
+    get hueRotate(): number;
+    set hueRotate(value: number);
+    /** The **`invert`** filter value. `0` = normal, `1` = fully inverted. */
+    get invert(): number;
+    set invert(value: number);
+    /** The **`opacity`** filter value. `0` = transparent, `1` = opaque. */
+    get opacity(): number;
+    set opacity(value: number);
+    constructor(options: SpriteOptions);
+    /** @internal Loads the texture when the sprite starts. */
+    start(): void;
+    /** @internal Draws the sprite texture with filters. */
+    draw(delta: number): void;
+}
+//# sourceMappingURL=sprite.d.ts.map

package/dist/nodes/node2d/sprite.d.ts.map

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

package/dist/nodes/node2d/sprite.js

@@ -0,0 +1,226 @@
+import { getTexture } from '../../assets/texture.js';
+import { GameConfig } from '../../core/game-config.js';
+import { vectorize, Vector2 } from '../../math/vector2.js';
+import { applySignal, ns, propSignal } from '../../utils/ternaries.js';
+import { PrimaryNode } from '../lib/enum.js';
+import { Node2D } from './_node2d.js';
+import { Nodes } from '../lib/registry.js';
+/**
+ * The **`Sprite`** node displays a texture or sprite in the game world.
+ * It supports texture atlases with margin/sourceSize, display scaling, flipping, and visual filters.
+ *
+ * @example
+ * ```tsx
+ * import { loadTexture } from 'dinix'
+ * import { useNode } from 'dinix/hooks'
+ *
+ * const PLAYER_TEXTURE = await loadTexture('/assets/player.png')
+ *
+ * function Player() {
+ *   const sprite = useNode(PrimaryNode.Sprite)
+ *
+ *   return (
+ *     <sprite
+ *       ref={sprite}
+ *       textureId={PLAYER_TEXTURE}
+ *       sourceSize={new Vector2(32, 32)}
+ *       displaySize={new Vector2(64, 64)}
+ *       brightness={1.2}
+ *       modulate={[1, 0.5, 0, 1]}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export class Sprite extends Node2D {
+    #textureId;
+    #texture;
+    /**
+     * The **`margin`** property defines the texture offset within the source image.
+     * Useful for sprite sheets where each frame has a different position.
+     */
+    margin;
+    /**
+     * The **`sourceSize`** property defines the region of the texture to render.
+     * Defaults to the full texture size if not set.
+     */
+    sourceSize;
+    /**
+     * The **`displaySize`** property defines the rendered size of the sprite.
+     * Defaults to `sourceSize` if not set.
+     */
+    displaySize;
+    /**
+     * The **`flipX`** property controls horizontal mirroring of the sprite.
+     */
+    flipX = false;
+    /**
+     * The **`flipY`** property controls vertical mirroring of the sprite.
+     */
+    flipY = false;
+    #brightness = 1;
+    #grayscale = 0;
+    #modulate = [1, 1, 1, 1];
+    #contrast = 1;
+    #saturate = 1;
+    #hueRotate = 0;
+    #invert = 0;
+    #opacity = 1;
+    /**
+     * Gets or sets the `textureId` of this sprite.
+     * Setting a new texture updates the sprite's visual immediately.
+     */
+    get textureId() {
+        return this.#textureId;
+    }
+    set textureId(value) {
+        if (this.textureId === value)
+            return;
+        if (value == null) {
+            this.#textureId = undefined;
+            this.#texture = undefined;
+            return;
+        }
+        this.#textureId = value;
+        if (this.isStarted) {
+            this.#texture = getTexture(value);
+        }
+    }
+    /**
+     * The **`getTexture`** method returns the current texture.
+     * @returns The current `Texture` or `undefined` if no texture is set
+     */
+    getTexture() {
+        return this.#texture;
+    }
+    /** The **`brightness`** filter value. `0` = black, `1` = base, `2` = white. */
+    get brightness() {
+        return this.#brightness;
+    }
+    set brightness(value) {
+        this.#brightness = value;
+    }
+    /** The **`grayscale`** filter value. `0` = color, `1` = grayscale. */
+    get grayscale() {
+        return this.#grayscale;
+    }
+    set grayscale(value) {
+        this.#grayscale = value;
+    }
+    /** The **`modulate`** filter color `[r, g, b, a]` with values `0`-`1`. */
+    get modulate() {
+        return this.#modulate;
+    }
+    set modulate(value) {
+        this.#modulate = value;
+    }
+    /** The **`contrast`** filter value. `0` = no contrast, `1` = base, `2` = double. */
+    get contrast() {
+        return this.#contrast;
+    }
+    set contrast(value) {
+        this.#contrast = value;
+    }
+    /** The **`saturate`** filter value. `0` = desaturated, `1` = base, `2` = double. */
+    get saturate() {
+        return this.#saturate;
+    }
+    set saturate(value) {
+        this.#saturate = value;
+    }
+    /** The **`hueRotate`** filter value in degrees. `0` = no rotation, `360` = full. */
+    get hueRotate() {
+        return this.#hueRotate;
+    }
+    set hueRotate(value) {
+        this.#hueRotate = value;
+    }
+    /** The **`invert`** filter value. `0` = normal, `1` = fully inverted. */
+    get invert() {
+        return this.#invert;
+    }
+    set invert(value) {
+        this.#invert = value;
+    }
+    /** The **`opacity`** filter value. `0` = transparent, `1` = opaque. */
+    get opacity() {
+        return this.#opacity;
+    }
+    set opacity(value) {
+        this.#opacity = value;
+    }
+    constructor(options) {
+        super(PrimaryNode.Sprite, options);
+        const vectors = (key) => {
+            return ns(options[key], (vector) => propSignal(this, key, applySignal(vector, vectorize)), this[key]);
+        };
+        this.margin = vectors('margin');
+        this.sourceSize = vectors('sourceSize');
+        this.displaySize = vectors('displaySize');
+        this.textureId = propSignal(this, 'textureId', options.textureId);
+        this.flipX = propSignal(this, 'flipX', options.flipX);
+        this.flipY = propSignal(this, 'flipY', options.flipY);
+        this.brightness = propSignal(this, 'brightness', options.brightness);
+        this.grayscale = propSignal(this, 'grayscale', options.grayscale);
+        this.modulate = propSignal(this, 'modulate', options.modulate);
+        this.contrast = propSignal(this, 'contrast', options.contrast);
+        this.saturate = propSignal(this, 'saturate', options.saturate);
+        this.hueRotate = propSignal(this, 'hueRotate', options.hueRotate);
+        this.invert = propSignal(this, 'invert', options.invert);
+        this.opacity = propSignal(this, 'opacity', options.opacity);
+    }
+    /** @internal Loads the texture when the sprite starts. */
+    start() {
+        if (this.textureId) {
+            this.#texture = getTexture(this.textureId);
+        }
+        super.start();
+    }
+    /** @internal Draws the sprite texture with filters. */
+    draw(delta) {
+        if (this.#texture != null) {
+            const ctx = GameConfig.ctx;
+            const filters = [];
+            if (this.#brightness !== 1)
+                filters.push(`brightness(${this.#brightness})`);
+            if (this.#grayscale !== 0)
+                filters.push(`grayscale(${this.#grayscale})`);
+            if (this.#contrast !== 1)
+                filters.push(`contrast(${this.#contrast})`);
+            if (this.#saturate !== 1)
+                filters.push(`saturate(${this.#saturate})`);
+            if (this.#hueRotate !== 0)
+                filters.push(`hue-rotate(${this.#hueRotate}deg)`);
+            if (this.#invert !== 0)
+                filters.push(`invert(${this.#invert})`);
+            if (this.#opacity !== 1)
+                filters.push(`opacity(${this.#opacity})`);
+            ctx.save();
+            if (filters.length > 0) {
+                ctx.filter = filters.join(' ');
+            }
+            const ds = this.displaySize ?? this.sourceSize;
+            this.#texture.draw({
+                position: this.position,
+                margin: this.margin,
+                sourceSize: this.sourceSize,
+                displaySize: this.displaySize?.toMultiplied(new Vector2(this.flipX ? -1 : 1, this.flipY ? -1 : 1)),
+            });
+            const isModulated = this.#modulate[0] !== 1 ||
+                this.#modulate[1] !== 1 ||
+                this.#modulate[2] !== 1 ||
+                this.#modulate[3] !== 1;
+            if (isModulated) {
+                ctx.filter = 'none';
+                ctx.globalCompositeOperation = 'multiply';
+                ctx.fillStyle = `rgba(${this.#modulate[0] * 255}, ${this.#modulate[1] * 255}, ${this.#modulate[2] * 255}, ${this.#modulate[3]})`;
+                ctx.fillRect(this.position.x, this.position.y, ds?.x ?? 0, ds?.y ?? 0);
+                ctx.globalCompositeOperation = 'source-over';
+            }
+            ctx.restore();
+        }
+        super.draw(delta);
+    }
+}
+Nodes.sprite = Sprite;
+//# sourceMappingURL=sprite.js.map

package/dist/nodes/node2d/sprite.js.map

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

package/dist/nodes/node2d/text.d.ts

@@ -0,0 +1,62 @@
+import { TextStyle } from '../../core/theme.js';
+import { PrimaryNode } from '../lib/enum.js';
+import { Node2D, type Node2DOptions } from './_node2d.js';
+import type { Reactive } from '../../reactivity/types.js';
+/**
+ * Options for the `Text` node.
+ */
+export interface TextOptions extends Node2DOptions<PrimaryNode.Text> {
+    /**
+     * The **`text`** property defines the string to render.
+     *
+     * @example
+     * ```tsx
+     * <text text="Hello World" />
+     * <text text={() => `Score: ${score()}`} />
+     * ```
+     */
+    text: Reactive<string>;
+    /**
+     * The **`style`** property defines the text rendering style.
+     * Accepts a partial `TextStyle` — omitted properties use defaults.
+     *
+     * @default TextStyle.DEFAULT
+     *
+     * @example
+     * ```tsx
+     * <text text="Bold" style={{ fontSize: 24, fontWeight: FontWeight.Bold }} />
+     * ```
+     */
+    style?: Partial<TextStyle>;
+}
+/**
+ * The **`Text`** node renders text on the canvas using `ctx.fillText()`.
+ * It supports reactive text values and configurable styling via `TextStyle`.
+ *
+ * @example
+ * ```tsx
+ * import { useNode } from 'dinix/hooks'
+ * import { PrimaryNode } from 'dinix/nodes/enum'
+ *
+ * function ScoreLabel() {
+ *   const label = useNode(PrimaryNode.Text)
+ *
+ *   return (
+ *     <text
+ *       ref={label}
+ *       position={[10, 20]}
+ *       text={() => `Score: ${score()}`}
+ *       style={{ fontSize: 16, foregroundColor: '#ffffff' }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare class Text extends Node2D<PrimaryNode.Text> {
+    #private;
+    text: string;
+    constructor(options: TextOptions);
+    /** @internal Draws the text. */
+    draw(delta: number): void;
+}
+//# sourceMappingURL=text.d.ts.map

package/dist/nodes/node2d/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/nodes/node2d/text.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,MAAM,EAAE,KAAK,aAAa,EAAE,MAAM,cAAc,CAAA;AACzD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAA;AAEzD;;GAEG;AACH,MAAM,WAAW,WAAY,SAAQ,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC;IAClE;;;;;;;;OAQG;IACH,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAA;IACtB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,SAAS,CAAC,CAAA;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAAa,IAAK,SAAQ,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;;IAChD,IAAI,EAAE,MAAM,CAAA;gBAGA,OAAO,EAAE,WAAW;IAMhC,gCAAgC;IAChC,IAAI,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;CAgB1B"}

package/dist/nodes/node2d/text.js

@@ -0,0 +1,52 @@
+import { GameConfig } from '../../core/game-config.js';
+import { TextStyle } from '../../core/theme.js';
+import { propSignal } from '../../utils/ternaries.js';
+import { PrimaryNode } from '../lib/enum.js';
+import { Nodes } from '../lib/registry.js';
+import { Node2D } from './_node2d.js';
+/**
+ * The **`Text`** node renders text on the canvas using `ctx.fillText()`.
+ * It supports reactive text values and configurable styling via `TextStyle`.
+ *
+ * @example
+ * ```tsx
+ * import { useNode } from 'dinix/hooks'
+ * import { PrimaryNode } from 'dinix/nodes/enum'
+ *
+ * function ScoreLabel() {
+ *   const label = useNode(PrimaryNode.Text)
+ *
+ *   return (
+ *     <text
+ *       ref={label}
+ *       position={[10, 20]}
+ *       text={() => `Score: ${score()}`}
+ *       style={{ fontSize: 16, foregroundColor: '#ffffff' }}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export class Text extends Node2D {
+    text;
+    #style;
+    constructor(options) {
+        super(PrimaryNode.Text, options);
+        this.text = propSignal(this, 'text', options.text) ?? '';
+        this.#style = Object.assign(TextStyle.DEFAULT, options.style);
+    }
+    /** @internal Draws the text. */
+    draw(delta) {
+        const ctx = GameConfig.ctx;
+        ctx.save();
+        ctx.font = `${this.#style.fontWeight} ${this.#style.fontSize}px ${this.#style.fontFamily}`;
+        ctx.fillStyle = this.#style.foregroundColor;
+        ctx.textAlign = this.#style.textAlign;
+        ctx.textBaseline = 'top';
+        ctx.fillText(this.text, this.position.x, this.position.y);
+        ctx.restore();
+        super.draw(delta);
+    }
+}
+Nodes.text = Text;
+//# sourceMappingURL=text.js.map

package/dist/nodes/node2d/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../../src/nodes/node2d/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAA;AAC1C,OAAO,EAAE,MAAM,EAAsB,MAAM,cAAc,CAAA;AA+BzD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,OAAO,IAAK,SAAQ,MAAwB;IAChD,IAAI,CAAQ;IACZ,MAAM,CAAW;IAEjB,YAAY,OAAoB;QAC9B,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;QAChC,IAAI,CAAC,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,CAAA;QACxD,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;IAC/D,CAAC;IAED,gCAAgC;IAChC,IAAI,CAAC,KAAa;QAChB,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAA;QAE1B,GAAG,CAAC,IAAI,EAAE,CAAA;QAEV,GAAG,CAAC,IAAI,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAA;QAC1F,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,eAAe,CAAA;QAC3C,GAAG,CAAC,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAA;QACrC,GAAG,CAAC,YAAY,GAAG,KAAK,CAAA;QAExB,GAAG,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;QAEzD,GAAG,CAAC,OAAO,EAAE,CAAA;QAEb,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IACnB,CAAC;CACF;AAED,KAAK,CAAC,IAAI,GAAG,IAAI,CAAA"}

package/dist/nodes/node2d/transform.d.ts

@@ -0,0 +1,32 @@
+import { PrimaryNode } from '../lib/enum.js';
+import { Node2D, type Node2DOptions } from './_node2d.js';
+/**
+ * The **`TransformOptions`** interface defines the options for a `Transform` node.
+ * Extends `Node2DOptions` with no additional properties.
+ */
+export interface TransformOptions extends Node2DOptions<PrimaryNode.Transform> {
+}
+/**
+ * The **`Transform`** node is a container for positioning and organizing child nodes.
+ * It has no visual representation but provides a coordinate system for its children.
+ *
+ * @example
+ * ```tsx
+ * import { useNode } from 'dinix/hooks'
+ * import { PrimaryNode } from 'dinix/nodes/enum'
+ *
+ * function Player() {
+ *   const body = useNode(PrimaryNode.Transform)
+ *
+ *   return (
+ *     <transform ref={body} position={new Vector2(100, 200)}>
+ *       <sprite textureId={PLAYER} />
+ *     </transform>
+ *   )
+ * }
+ * ```
+ */
+export declare class Transform extends Node2D<PrimaryNode.Transform> {
+    constructor(options: TransformOptions);
+}
+//# sourceMappingURL=transform.d.ts.map