cubeforge 0.0.9 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cubeforge",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "React-first 2D browser game engine",
   "main": "./dist/index.js",
   "scripts": {

package/dist/components/Animation.js

@@ -1,32 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { EngineContext, EntityContext } from '../context';
-export function Animation({ frames, fps = 12, loop = true, playing = true }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        const state = {
-            type: 'AnimationState',
-            frames,
-            fps,
-            loop,
-            playing,
-            currentIndex: 0,
-            timer: 0,
-        };
-        engine.ecs.addComponent(entityId, state);
-        return () => {
-            engine.ecs.removeComponent(entityId, 'AnimationState');
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync playing state and animation params
-    useEffect(() => {
-        const anim = engine.ecs.getComponent(entityId, 'AnimationState');
-        if (!anim)
-            return;
-        anim.playing = playing;
-        anim.fps = fps;
-        anim.loop = loop;
-    }, [playing, fps, loop, engine, entityId]);
-    return null;
-}

package/dist/components/BoxCollider.js

@@ -1,21 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createBoxCollider } from '@cubeforge/physics';
-import { EngineContext, EntityContext } from '../context';
-export function BoxCollider({ width, height, offsetX = 0, offsetY = 0, isTrigger = false, layer = 'default', }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, createBoxCollider(width, height, { offsetX, offsetY, isTrigger, layer }));
-        // Defer check so sibling components have had a chance to add their components
-        const checkId = setTimeout(() => {
-            if (engine.ecs.hasEntity(entityId) && !engine.ecs.hasComponent(entityId, 'Transform')) {
-                console.warn(`[Cubeforge] BoxCollider on entity ${entityId} has no Transform. Physics requires Transform.`);
-            }
-        }, 0);
-        return () => {
-            clearTimeout(checkId);
-            engine.ecs.removeComponent(entityId, 'BoxCollider');
-        };
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    return null;
-}

package/dist/components/Camera2D.js

@@ -1,33 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createCamera2D } from '@cubeforge/renderer';
-import { EngineContext } from '../context';
-export function Camera2D({ followEntity, zoom = 1, smoothing = 0, background = '#1a1a2e', bounds, deadZone, }) {
-    const engine = useContext(EngineContext);
-    useEffect(() => {
-        const entityId = engine.ecs.createEntity();
-        engine.ecs.addComponent(entityId, createCamera2D({
-            followEntityId: followEntity,
-            zoom,
-            smoothing,
-            background,
-            bounds,
-            deadZone,
-        }));
-        return () => engine.ecs.destroyEntity(entityId);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync prop changes
-    useEffect(() => {
-        const camId = engine.ecs.queryOne('Camera2D');
-        if (camId === undefined)
-            return;
-        const cam = engine.ecs.getComponent(camId, 'Camera2D');
-        cam.followEntityId = followEntity;
-        cam.zoom = zoom;
-        cam.smoothing = smoothing;
-        cam.background = background;
-        cam.bounds = bounds;
-        cam.deadZone = deadZone;
-    }, [followEntity, zoom, smoothing, background, bounds, deadZone, engine]);
-    return null;
-}

package/dist/components/Checkpoint.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Entity } from './Entity';
-import { Transform } from './Transform';
-import { Sprite } from './Sprite';
-import { BoxCollider } from './BoxCollider';
-import { Script } from './Script';
-/**
- * A trigger zone that fires `onActivate` when the player enters it, then destroys itself.
- *
- * @example
- * <Checkpoint x={800} y={450} onActivate={() => setCheckpoint(800)} />
- */
-export function Checkpoint({ x, y, width = 24, height = 48, color = '#ffd54f', onActivate, }) {
-    return (_jsxs(Entity, { tags: ['checkpoint'], children: [_jsx(Transform, { x: x, y: y }), _jsx(Sprite, { width: width, height: height, color: color, zIndex: 5 }), _jsx(BoxCollider, { width: width, height: height, isTrigger: true }), _jsx(Script, { init: () => { }, update: (id, world) => {
-                    if (!world.hasEntity(id))
-                        return;
-                    const ct = world.getComponent(id, 'Transform');
-                    if (!ct)
-                        return;
-                    for (const pid of world.query('Tag')) {
-                        const tag = world.getComponent(pid, 'Tag');
-                        if (!tag?.tags.includes('player'))
-                            continue;
-                        const pt = world.getComponent(pid, 'Transform');
-                        if (!pt)
-                            continue;
-                        const dx = Math.abs(pt.x - ct.x);
-                        const dy = Math.abs(pt.y - ct.y);
-                        if (dx < (width / 2 + 16) && dy < (height / 2 + 20)) {
-                            onActivate?.();
-                            world.destroyEntity(id);
-                            return;
-                        }
-                    }
-                } })] }));
-}

package/dist/components/Entity.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useContext, useState } from 'react';
-import { createTag } from '@cubeforge/core';
-import { EngineContext, EntityContext } from '../context';
-export function Entity({ id, tags = [], children }) {
-    const engine = useContext(EngineContext);
-    const [entityId, setEntityId] = useState(null);
-    useEffect(() => {
-        const eid = engine.ecs.createEntity();
-        if (id) {
-            if (engine.entityIds.has(id)) {
-                console.warn(`[Cubeforge] Duplicate entity ID "${id}". Entity IDs must be unique — the previous entity with this ID will be replaced.`);
-            }
-            engine.entityIds.set(id, eid);
-        }
-        if (tags.length > 0)
-            engine.ecs.addComponent(eid, createTag(...tags));
-        setEntityId(eid);
-        return () => {
-            engine.ecs.destroyEntity(eid);
-            if (id)
-                engine.entityIds.delete(id);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    if (entityId === null)
-        return null;
-    return (_jsx(EntityContext.Provider, { value: entityId, children: children }));
-}

package/dist/components/Game.js

@@ -1,93 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from 'react';
-import { ECSWorld, GameLoop, EventBus, AssetManager, ScriptSystem } from '@cubeforge/core';
-import { InputManager } from '@cubeforge/input';
-import { Canvas2DRenderer, RenderSystem } from '@cubeforge/renderer';
-import { PhysicsSystem } from '@cubeforge/physics';
-import { EngineContext } from '../context';
-import { DebugSystem } from '../systems/debugSystem';
-export function Game({ width = 800, height = 600, gravity = 980, debug = false, scale = 'none', onReady, style, className, children, }) {
-    const canvasRef = useRef(null);
-    const wrapperRef = useRef(null);
-    const [engine, setEngine] = useState(null);
-    useEffect(() => {
-        const canvas = canvasRef.current;
-        const ecs = new ECSWorld();
-        const input = new InputManager();
-        const renderer = new Canvas2DRenderer(canvas);
-        const events = new EventBus();
-        const assets = new AssetManager();
-        const physics = new PhysicsSystem(gravity, events);
-        const entityIds = new Map();
-        const renderSystem = new RenderSystem(renderer, entityIds);
-        const debugSystem = debug ? new DebugSystem(renderer) : null;
-        // System order: scripts → physics → render → (debug)
-        ecs.addSystem(new ScriptSystem(input));
-        ecs.addSystem(physics);
-        ecs.addSystem(renderSystem);
-        if (debugSystem)
-            ecs.addSystem(debugSystem);
-        input.attach(canvas);
-        canvas.setAttribute('tabindex', '0');
-        // Validate dimensions
-        if (width <= 0 || height <= 0) {
-            console.warn(`[Cubeforge] Invalid Game dimensions: ${width}x${height}. Width and height must be positive.`);
-        }
-        const loop = new GameLoop((dt) => {
-            ecs.update(dt);
-            input.flush();
-        });
-        const state = { ecs, input, renderer, physics, events, assets, loop, canvas, entityIds };
-        setEngine(state);
-        loop.start();
-        // Expose controls via onReady callback
-        onReady?.({
-            pause: () => loop.pause(),
-            resume: () => loop.resume(),
-            reset: () => {
-                ecs.clear();
-                loop.stop();
-                loop.start();
-            },
-        });
-        // Handle contain scaling
-        let resizeObserver = null;
-        if (scale === 'contain' && wrapperRef.current) {
-            const wrapper = wrapperRef.current;
-            const updateScale = () => {
-                const parentW = wrapper.parentElement?.clientWidth ?? width;
-                const parentH = wrapper.parentElement?.clientHeight ?? height;
-                const scaleX = parentW / width;
-                const scaleY = parentH / height;
-                const s = Math.min(scaleX, scaleY);
-                canvas.style.transform = `scale(${s})`;
-                canvas.style.transformOrigin = 'top left';
-            };
-            updateScale();
-            resizeObserver = new ResizeObserver(updateScale);
-            if (wrapper.parentElement)
-                resizeObserver.observe(wrapper.parentElement);
-        }
-        return () => {
-            loop.stop();
-            input.detach();
-            ecs.clear();
-            resizeObserver?.disconnect();
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync gravity changes
-    useEffect(() => {
-        engine?.physics.setGravity(gravity);
-    }, [gravity, engine]);
-    const canvasStyle = {
-        display: 'block',
-        outline: 'none',
-        imageRendering: scale === 'pixel' ? 'pixelated' : undefined,
-        ...style,
-    };
-    const wrapperStyle = scale === 'contain'
-        ? { position: 'relative', width, height, overflow: 'visible' }
-        : {};
-    return (_jsxs(EngineContext.Provider, { value: engine, children: [_jsx("div", { ref: wrapperRef, style: wrapperStyle, children: _jsx("canvas", { ref: canvasRef, width: width, height: height, style: canvasStyle, className: className }) }), engine && children] }));
-}

package/dist/components/MovingPlatform.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Entity } from './Entity';
-import { Transform } from './Transform';
-import { Sprite } from './Sprite';
-import { RigidBody } from './RigidBody';
-import { BoxCollider } from './BoxCollider';
-import { Script } from './Script';
-const platformPhases = new Map();
-/**
- * A static platform that oscillates between (x1,y1) and (x2,y2).
- *
- * @example
- * <MovingPlatform x1={200} y1={350} x2={450} y2={350} width={120} duration={2.5} />
- */
-export function MovingPlatform({ x1, y1, x2, y2, width = 120, height = 18, duration = 3, color = '#37474f', }) {
-    return (_jsxs(Entity, { children: [_jsx(Transform, { x: x1, y: y1 }), _jsx(Sprite, { width: width, height: height, color: color, zIndex: 5 }), _jsx(RigidBody, { isStatic: true }), _jsx(BoxCollider, { width: width, height: height }), _jsx(Script, { init: () => { }, update: (id, world, _input, dt) => {
-                    if (!world.hasEntity(id))
-                        return;
-                    const t = world.getComponent(id, 'Transform');
-                    if (!t)
-                        return;
-                    const phase = (platformPhases.get(id) ?? 0) + dt * (Math.PI * 2) / duration;
-                    platformPhases.set(id, phase);
-                    const alpha = (Math.sin(phase) + 1) / 2; // 0..1
-                    t.x = x1 + (x2 - x1) * alpha;
-                    t.y = y1 + (y2 - y1) * alpha;
-                } })] }));
-}

package/dist/components/ParallaxLayer.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useContext } from 'react';
-import { Entity } from './Entity';
-import { Transform } from './Transform';
-import { EngineContext, EntityContext } from '../context';
-function ParallaxLayerInner({ src, speedX, speedY, repeatX, repeatY, zIndex, offsetX, offsetY, }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, {
-            type: 'ParallaxLayer',
-            src,
-            speedX,
-            speedY,
-            repeatX,
-            repeatY,
-            zIndex,
-            offsetX,
-            offsetY,
-            imageWidth: 0,
-            imageHeight: 0,
-        });
-        return () => engine.ecs.removeComponent(entityId, 'ParallaxLayer');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync prop changes
-    useEffect(() => {
-        const layer = engine.ecs.getComponent(entityId, 'ParallaxLayer');
-        if (!layer)
-            return;
-        layer.src = src;
-        layer.speedX = speedX;
-        layer.speedY = speedY;
-        layer.repeatX = repeatX;
-        layer.repeatY = repeatY;
-        layer.zIndex = zIndex;
-        layer.offsetX = offsetX;
-        layer.offsetY = offsetY;
-    }, [src, speedX, speedY, repeatX, repeatY, zIndex, offsetX, offsetY, engine, entityId]);
-    return null;
-}
-/**
- * A background layer that scrolls at a fraction of the camera speed to create depth.
- *
- * @example
- * <ParallaxLayer src="/bg/sky.png" speedX={0.2} repeatX />
- * <ParallaxLayer src="/bg/mountains.png" speedX={0.5} repeatX zIndex={-5} />
- */
-export function ParallaxLayer({ src, speedX = 0.5, speedY = 0, repeatX = true, repeatY = false, zIndex = -10, offsetX = 0, offsetY = 0, }) {
-    return (_jsxs(Entity, { children: [_jsx(Transform, { x: 0, y: 0 }), _jsx(ParallaxLayerInner, { src: src, speedX: speedX, speedY: speedY, repeatX: repeatX, repeatY: repeatY, zIndex: zIndex, offsetX: offsetX, offsetY: offsetY })] }));
-}

package/dist/components/ParticleEmitter.js

@@ -1,44 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { EngineContext, EntityContext } from '../context';
-import { PARTICLE_PRESETS } from './particlePresets';
-export function ParticleEmitter({ active = true, preset, rate, speed, spread, angle, particleLife, particleSize, color, gravity, maxParticles, }) {
-    const presetConfig = preset ? PARTICLE_PRESETS[preset] : {};
-    const resolvedRate = rate ?? presetConfig.rate ?? 20;
-    const resolvedSpeed = speed ?? presetConfig.speed ?? 80;
-    const resolvedSpread = spread ?? presetConfig.spread ?? Math.PI;
-    const resolvedAngle = angle ?? presetConfig.angle ?? -Math.PI / 2;
-    const resolvedParticleLife = particleLife ?? presetConfig.particleLife ?? 0.8;
-    const resolvedParticleSize = particleSize ?? presetConfig.particleSize ?? 4;
-    const resolvedColor = color ?? presetConfig.color ?? '#ffffff';
-    const resolvedGravity = gravity ?? presetConfig.gravity ?? 200;
-    const resolvedMaxParticles = maxParticles ?? presetConfig.maxParticles ?? 100;
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, {
-            type: 'ParticlePool',
-            particles: [],
-            maxParticles: resolvedMaxParticles,
-            active,
-            rate: resolvedRate,
-            timer: 0,
-            speed: resolvedSpeed,
-            spread: resolvedSpread,
-            angle: resolvedAngle,
-            particleLife: resolvedParticleLife,
-            particleSize: resolvedParticleSize,
-            color: resolvedColor,
-            gravity: resolvedGravity,
-        });
-        return () => engine.ecs.removeComponent(entityId, 'ParticlePool');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync active state
-    useEffect(() => {
-        const pool = engine.ecs.getComponent(entityId, 'ParticlePool');
-        if (!pool)
-            return;
-        pool.active = active;
-    }, [active, engine, entityId]);
-    return null;
-}

package/dist/components/RigidBody.js

@@ -1,13 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createRigidBody } from '@cubeforge/physics';
-import { EngineContext, EntityContext } from '../context';
-export function RigidBody({ mass = 1, gravityScale = 1, isStatic = false, bounce = 0, friction = 0.85, vx = 0, vy = 0, }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, createRigidBody({ mass, gravityScale, isStatic, bounce, friction, vx, vy }));
-        return () => engine.ecs.removeComponent(entityId, 'RigidBody');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return null;
-}

package/dist/components/ScreenFlash.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-export const ScreenFlash = forwardRef((_, ref) => {
-    const divRef = useRef(null);
-    useImperativeHandle(ref, () => ({
-        flash(color, duration) {
-            const el = divRef.current;
-            if (!el)
-                return;
-            el.style.backgroundColor = color;
-            el.style.opacity = '1';
-            el.style.transition = 'none';
-            const durationMs = duration * 1000;
-            // Next frame: start the fade
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    if (!divRef.current)
-                        return;
-                    divRef.current.style.transition = `opacity ${durationMs}ms linear`;
-                    divRef.current.style.opacity = '0';
-                });
-            });
-        },
-    }));
-    return (_jsx("div", { ref: divRef, style: {
-            position: 'absolute',
-            inset: 0,
-            pointerEvents: 'none',
-            zIndex: 9999,
-            opacity: 0,
-            backgroundColor: 'transparent',
-        } }));
-});
-ScreenFlash.displayName = 'ScreenFlash';

package/dist/components/Script.js

@@ -1,20 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createScript } from '@cubeforge/core';
-import { EngineContext, EntityContext } from '../context';
-export function Script({ init, update }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        if (init) {
-            try {
-                init(entityId, engine.ecs);
-            }
-            catch (err) {
-                console.error(`[Cubeforge] Script init error on entity ${entityId}:`, err);
-            }
-        }
-        engine.ecs.addComponent(entityId, createScript(update));
-        return () => engine.ecs.removeComponent(entityId, 'Script');
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-    return null;
-}

package/dist/components/Sprite.js

@@ -1,49 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createSprite } from '@cubeforge/renderer';
-import { EngineContext, EntityContext } from '../context';
-export function Sprite({ width, height, color = '#ffffff', src, offsetX = 0, offsetY = 0, zIndex = 0, visible = true, flipX = false, anchorX = 0.5, anchorY = 0.5, frameIndex = 0, frameWidth, frameHeight, frameColumns, atlas, frame, }) {
-    const resolvedFrameIndex = (atlas && frame != null) ? (atlas[frame] ?? 0) : frameIndex;
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        const comp = createSprite({
-            width,
-            height,
-            color,
-            src,
-            offsetX,
-            offsetY,
-            zIndex,
-            visible,
-            flipX,
-            anchorX,
-            anchorY,
-            frameIndex: resolvedFrameIndex,
-            frameWidth,
-            frameHeight,
-            frameColumns,
-        });
-        engine.ecs.addComponent(entityId, comp);
-        if (src) {
-            engine.assets.loadImage(src).then((img) => {
-                const c = engine.ecs.getComponent(entityId, 'Sprite');
-                if (c)
-                    c.image = img;
-            }).catch(console.error);
-        }
-        return () => engine.ecs.removeComponent(entityId, 'Sprite');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync mutable props
-    useEffect(() => {
-        const comp = engine.ecs.getComponent(entityId, 'Sprite');
-        if (!comp)
-            return;
-        comp.color = color;
-        comp.visible = visible;
-        comp.flipX = flipX;
-        comp.zIndex = zIndex;
-        comp.frameIndex = resolvedFrameIndex;
-    }, [color, visible, flipX, zIndex, resolvedFrameIndex, engine, entityId]);
-    return null;
-}

package/dist/components/SquashStretch.js

@@ -1,18 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { EngineContext, EntityContext } from '../context';
-export function SquashStretch({ intensity = 0.2, recovery = 8 }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, {
-            type: 'SquashStretch',
-            intensity,
-            recovery,
-            currentScaleX: 1,
-            currentScaleY: 1,
-        });
-        return () => engine.ecs.removeComponent(entityId, 'SquashStretch');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return null;
-}

package/dist/components/Tilemap.js

@@ -1,245 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState, useContext } from 'react';
-import { createTransform, createScript } from '@cubeforge/core';
-import { createSprite } from '@cubeforge/renderer';
-import { createRigidBody, createBoxCollider } from '@cubeforge/physics';
-import { EngineContext } from '../context';
-const animatedTiles = new Map();
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function getProperty(props, name) {
-    return props?.find(p => p.name === name)?.value;
-}
-function matchesLayerName(layer, name) {
-    return (layer.name === name ||
-        layer.name.toLowerCase() === name.toLowerCase());
-}
-function isCollisionLayer(layer, collisionLayer) {
-    return (matchesLayerName(layer, collisionLayer) ||
-        getProperty(layer.properties, 'collision') === true);
-}
-function isTriggerLayer(layer, triggerLayer) {
-    return (matchesLayerName(layer, triggerLayer) ||
-        getProperty(layer.properties, 'trigger') === true);
-}
-export function Tilemap({ src, onSpawnObject, layerFilter, zIndex = 0, collisionLayer = 'collision', triggerLayer: triggerLayerName = 'triggers', onTileProperty, }) {
-    const engine = useContext(EngineContext);
-    const [spawnedNodes, setSpawnedNodes] = useState([]);
-    useEffect(() => {
-        if (!engine)
-            return;
-        const createdEntities = [];
-        async function load() {
-            let mapData;
-            try {
-                const res = await fetch(src);
-                if (!res.ok)
-                    throw new Error(`HTTP ${res.status}`);
-                mapData = await res.json();
-            }
-            catch (err) {
-                console.warn(`[Cubeforge] Tilemap: failed to load "${src}":`, err);
-                return;
-            }
-            const { tilewidth, tileheight, tilesets } = mapData;
-            // Resolve the tileset for a given GID, plus the local tile id within it
-            function resolveTileset(gid) {
-                let tileset = null;
-                for (let i = tilesets.length - 1; i >= 0; i--) {
-                    if (gid >= tilesets[i].firstgid) {
-                        tileset = tilesets[i];
-                        break;
-                    }
-                }
-                if (!tileset)
-                    return null;
-                return { tileset, localId: gid - tileset.firstgid };
-            }
-            // Build tileset image map: GID → { imageSrc, sx, sy, sw, sh }
-            function getTileFrame(gid) {
-                const resolved = resolveTileset(gid);
-                if (!resolved)
-                    return null;
-                const { tileset, localId } = resolved;
-                const col = localId % tileset.columns;
-                const row = Math.floor(localId / tileset.columns);
-                const sx = tileset.margin + col * (tileset.tilewidth + tileset.spacing);
-                const sy = tileset.margin + row * (tileset.tileheight + tileset.spacing);
-                // Resolve image path relative to the map src
-                const base = src.substring(0, src.lastIndexOf('/') + 1);
-                const imageSrc = tileset.image.startsWith('/') ? tileset.image : base + tileset.image;
-                return { imageSrc, sx, sy, sw: tileset.tilewidth, sh: tileset.tileheight };
-            }
-            // Look up per-tile data (animation, properties) from the tileset
-            function getTileData(gid) {
-                const resolved = resolveTileset(gid);
-                if (!resolved)
-                    return null;
-                const { tileset, localId } = resolved;
-                return tileset.tiles?.find(t => t.id === localId) ?? null;
-            }
-            // Compute the frame region for a local tile id within a tileset
-            function getFrameForLocalId(tileset, localId) {
-                const col = localId % tileset.columns;
-                const row = Math.floor(localId / tileset.columns);
-                const sx = tileset.margin + col * (tileset.tilewidth + tileset.spacing);
-                const sy = tileset.margin + row * (tileset.tileheight + tileset.spacing);
-                const base = src.substring(0, src.lastIndexOf('/') + 1);
-                const imageSrc = tileset.image.startsWith('/') ? tileset.image : base + tileset.image;
-                return { imageSrc, sx, sy, sw: tileset.tilewidth, sh: tileset.tileheight };
-            }
-            const objectNodes = [];
-            for (const layer of mapData.layers) {
-                if (layerFilter && !layerFilter(layer))
-                    continue;
-                if (!layer.visible)
-                    continue;
-                if (layer.type === 'tilelayer' && layer.data) {
-                    const collision = isCollisionLayer(layer, collisionLayer);
-                    const trigger = !collision && isTriggerLayer(layer, triggerLayerName);
-                    if (collision || trigger) {
-                        // Merge adjacent filled tiles in each row into single wide colliders
-                        for (let row = 0; row < mapData.height; row++) {
-                            let col = 0;
-                            while (col < mapData.width) {
-                                const i = row * mapData.width + col;
-                                const gid = layer.data[i];
-                                if (gid === 0) {
-                                    col++;
-                                    continue;
-                                }
-                                // Start of a run — extend right while tiles are filled
-                                let runLength = 1;
-                                while (col + runLength < mapData.width &&
-                                    layer.data[row * mapData.width + col + runLength] !== 0) {
-                                    runLength++;
-                                }
-                                const runWidth = runLength * tilewidth;
-                                const x = col * tilewidth + runWidth / 2;
-                                const y = row * tileheight + tileheight / 2;
-                                const eid = engine.ecs.createEntity();
-                                createdEntities.push(eid);
-                                engine.ecs.addComponent(eid, createTransform(x, y));
-                                if (collision) {
-                                    // Invisible solid collider spanning the entire run
-                                    engine.ecs.addComponent(eid, createRigidBody({ isStatic: true }));
-                                    engine.ecs.addComponent(eid, createBoxCollider(runWidth, tileheight));
-                                }
-                                else {
-                                    // Invisible trigger collider spanning the entire run
-                                    engine.ecs.addComponent(eid, createBoxCollider(runWidth, tileheight, { isTrigger: true }));
-                                }
-                                col += runLength;
-                            }
-                        }
-                    }
-                    else {
-                        // Visual tiles — render per tile with sprites
-                        for (let i = 0; i < layer.data.length; i++) {
-                            const gid = layer.data[i];
-                            if (gid === 0)
-                                continue;
-                            const col = i % mapData.width;
-                            const row = Math.floor(i / mapData.width);
-                            // Tile center position
-                            const x = col * tilewidth + tilewidth / 2;
-                            const y = row * tileheight + tileheight / 2;
-                            const eid = engine.ecs.createEntity();
-                            createdEntities.push(eid);
-                            engine.ecs.addComponent(eid, createTransform(x, y));
-                            // Visual tile — load image and set frame
-                            const frame = getTileFrame(gid);
-                            const sprite = createSprite({ width: tilewidth, height: tileheight, color: '#888', zIndex });
-                            if (frame) {
-                                sprite.frame = { sx: frame.sx, sy: frame.sy, sw: frame.sw, sh: frame.sh };
-                                engine.assets.loadImage(frame.imageSrc)
-                                    .then((img) => {
-                                    const s = engine.ecs.getComponent(eid, 'Sprite');
-                                    if (s)
-                                        s.image = img;
-                                })
-                                    .catch(() => { });
-                            }
-                            engine.ecs.addComponent(eid, sprite);
-                            // Check for animated tile
-                            const tileData = getTileData(gid);
-                            if (tileData?.animation && tileData.animation.length > 0) {
-                                const resolved = resolveTileset(gid);
-                                const frames = tileData.animation.map(a => a.tileid);
-                                const durations = tileData.animation.map(a => a.duration / 1000); // ms → seconds
-                                const state = { frames, durations, timer: 0, currentFrame: 0 };
-                                animatedTiles.set(eid, state);
-                                // Pre-load first frame image (tileset image already loading above)
-                                // Set initial frame region from the first animation frame
-                                const firstFrameRegion = getFrameForLocalId(resolved.tileset, frames[0]);
-                                engine.assets.loadImage(firstFrameRegion.imageSrc)
-                                    .then((img) => {
-                                    const s = engine.ecs.getComponent(eid, 'Sprite');
-                                    if (s) {
-                                        s.image = img;
-                                        s.frame = {
-                                            sx: firstFrameRegion.sx,
-                                            sy: firstFrameRegion.sy,
-                                            sw: firstFrameRegion.sw,
-                                            sh: firstFrameRegion.sh,
-                                        };
-                                    }
-                                })
-                                    .catch(() => { });
-                                engine.ecs.addComponent(eid, createScript((_eid, world, _input, dt) => {
-                                    const animState = animatedTiles.get(_eid);
-                                    if (!animState)
-                                        return;
-                                    animState.timer += dt;
-                                    const currentDuration = animState.durations[animState.currentFrame];
-                                    if (animState.timer >= currentDuration) {
-                                        animState.timer -= currentDuration;
-                                        animState.currentFrame = (animState.currentFrame + 1) % animState.frames.length;
-                                        const nextLocalId = animState.frames[animState.currentFrame];
-                                        const resolvedTs = resolveTileset(gid);
-                                        if (!resolvedTs)
-                                            return;
-                                        const region = getFrameForLocalId(resolvedTs.tileset, nextLocalId);
-                                        const s = world.getComponent(_eid, 'Sprite');
-                                        if (s) {
-                                            s.frame = { sx: region.sx, sy: region.sy, sw: region.sw, sh: region.sh };
-                                        }
-                                    }
-                                }));
-                            }
-                            // Fire onTileProperty callback if tile has custom properties
-                            if (onTileProperty && tileData?.properties && tileData.properties.length > 0) {
-                                const propsMap = {};
-                                for (const p of tileData.properties) {
-                                    propsMap[p.name] = p.value;
-                                }
-                                onTileProperty(gid, propsMap, x, y);
-                            }
-                        }
-                    }
-                }
-                else if (layer.type === 'objectgroup' && layer.objects) {
-                    if (onSpawnObject) {
-                        for (const obj of layer.objects) {
-                            const node = onSpawnObject(obj, layer);
-                            if (node)
-                                objectNodes.push(node);
-                        }
-                    }
-                }
-            }
-            setSpawnedNodes(objectNodes);
-        }
-        load();
-        return () => {
-            for (const eid of createdEntities) {
-                animatedTiles.delete(eid);
-                if (engine.ecs.hasEntity(eid))
-                    engine.ecs.destroyEntity(eid);
-            }
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [src]);
-    if (spawnedNodes.length === 0)
-        return null;
-    return _jsx(_Fragment, { children: spawnedNodes });
-}

package/dist/components/Transform.js

@@ -1,24 +0,0 @@
-import { useEffect, useContext } from 'react';
-import { createTransform } from '@cubeforge/core';
-import { EngineContext, EntityContext } from '../context';
-export function Transform({ x = 0, y = 0, rotation = 0, scaleX = 1, scaleY = 1 }) {
-    const engine = useContext(EngineContext);
-    const entityId = useContext(EntityContext);
-    useEffect(() => {
-        engine.ecs.addComponent(entityId, createTransform(x, y, rotation, scaleX, scaleY));
-        return () => engine.ecs.removeComponent(entityId, 'Transform');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    // Sync prop changes to component data
-    useEffect(() => {
-        const comp = engine.ecs.getComponent(entityId, 'Transform');
-        if (comp) {
-            comp.x = x;
-            comp.y = y;
-            comp.rotation = rotation;
-            comp.scaleX = scaleX;
-            comp.scaleY = scaleY;
-        }
-    }, [x, y, rotation, scaleX, scaleY, engine, entityId]);
-    return null;
-}

package/dist/components/World.js

@@ -1,28 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useContext } from 'react';
-import { EngineContext } from '../context';
-export function World({ gravity, background = '#1a1a2e', children }) {
-    const engine = useContext(EngineContext);
-    useEffect(() => {
-        if (!engine)
-            return;
-        if (gravity !== undefined)
-            engine.physics.setGravity(gravity);
-    }, [gravity, engine]);
-    useEffect(() => {
-        if (!engine)
-            return;
-        // Propagate background to the camera component (or store it for renderer)
-        // The camera component stores background — if no camera exists, fill canvas directly
-        const camId = engine.ecs.queryOne('Camera2D');
-        if (camId !== undefined) {
-            const cam = engine.ecs.getComponent(camId, 'Camera2D');
-            if (cam)
-                cam.background = background;
-        }
-        else {
-            engine.canvas.style.background = background;
-        }
-    }, [background, engine]);
-    return _jsx(_Fragment, { children: children });
-}

package/dist/components/particlePresets.js

@@ -1,27 +0,0 @@
-export const PARTICLE_PRESETS = {
-    explosion: {
-        rate: 60, speed: 200, spread: Math.PI * 2, angle: 0,
-        particleLife: 0.5, particleSize: 6, color: '#ff6b35',
-        gravity: 300, maxParticles: 80,
-    },
-    spark: {
-        rate: 40, speed: 150, spread: Math.PI * 2, angle: 0,
-        particleLife: 0.3, particleSize: 3, color: '#ffd54f',
-        gravity: 400, maxParticles: 50,
-    },
-    smoke: {
-        rate: 15, speed: 30, spread: 0.5, angle: -Math.PI / 2,
-        particleLife: 1.2, particleSize: 10, color: '#90a4ae',
-        gravity: -20, maxParticles: 40,
-    },
-    coinPickup: {
-        rate: 30, speed: 80, spread: Math.PI * 2, angle: -Math.PI / 2,
-        particleLife: 0.4, particleSize: 4, color: '#ffd700',
-        gravity: 200, maxParticles: 20,
-    },
-    jumpDust: {
-        rate: 25, speed: 60, spread: Math.PI, angle: Math.PI / 2,
-        particleLife: 0.3, particleSize: 5, color: '#b0bec5',
-        gravity: 80, maxParticles: 20,
-    },
-};

package/dist/components/spriteAtlas.js

@@ -1,10 +0,0 @@
-/**
- * Helper to build an atlas from a grid spritesheet.
- * columns = number of frames per row.
- * names = frame names in row-major order.
- */
-export function createAtlas(names, _columns) {
-    const atlas = {};
-    names.forEach((name, i) => { atlas[name] = i; });
-    return atlas;
-}

package/dist/context.js

@@ -1,3 +0,0 @@
-import { createContext } from 'react';
-export const EngineContext = createContext(null);
-export const EntityContext = createContext(null);

package/dist/hooks/useEntity.js

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-import { EntityContext } from '../context';
-export function useEntity() {
-    const id = useContext(EntityContext);
-    if (id === null)
-        throw new Error('useEntity must be used inside <Entity>');
-    return id;
-}

package/dist/hooks/useEvents.js

@@ -1,15 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { EngineContext } from '../context';
-export function useEvents() {
-    const engine = useContext(EngineContext);
-    if (!engine)
-        throw new Error('useEvents must be used inside <Game>');
-    return engine.events;
-}
-export function useEvent(event, handler) {
-    const events = useEvents();
-    useEffect(() => {
-        return events.on(event, handler);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [events, event]);
-}

package/dist/hooks/useGame.js

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-import { EngineContext } from '../context';
-export function useGame() {
-    const engine = useContext(EngineContext);
-    if (!engine)
-        throw new Error('useGame must be used inside <Game>');
-    return engine;
-}

package/dist/hooks/useInput.js

@@ -1,8 +0,0 @@
-import { useContext } from 'react';
-import { EngineContext } from '../context';
-export function useInput() {
-    const engine = useContext(EngineContext);
-    if (!engine)
-        throw new Error('useInput must be used inside <Game>');
-    return engine.input;
-}

package/dist/hooks/usePlatformerController.js

@@ -1,82 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { createScript } from '@cubeforge/core';
-import { EngineContext } from '../context';
-/**
- * Attaches platformer movement (WASD/Arrows + Space/Up to jump) to an entity.
- * The entity must already have a RigidBody component.
- *
- * @example
- * function Player() {
- *   const id = useEntity()
- *   usePlatformerController(id, { speed: 220, maxJumps: 2 })
- *   return (
- *     <Entity id="player">
- *       <Transform x={100} y={300} />
- *       <Sprite width={28} height={40} color="#4fc3f7" />
- *       <RigidBody />
- *       <BoxCollider width={26} height={40} />
- *     </Entity>
- *   )
- * }
- */
-export function usePlatformerController(entityId, opts = {}) {
-    const engine = useContext(EngineContext);
-    const { speed = 200, jumpForce = -500, maxJumps = 1, coyoteTime = 0.08, jumpBuffer = 0.08, } = opts;
-    useEffect(() => {
-        const state = { coyoteTimer: 0, jumpBuffer: 0, jumpsLeft: maxJumps };
-        const updateFn = (id, world, input, dt) => {
-            if (!world.hasEntity(id))
-                return;
-            const rb = world.getComponent(id, 'RigidBody');
-            if (!rb)
-                return;
-            // Ground tracking
-            if (rb.onGround) {
-                state.coyoteTimer = coyoteTime;
-                state.jumpsLeft = maxJumps;
-            }
-            else
-                state.coyoteTimer = Math.max(0, state.coyoteTimer - dt);
-            // Jump buffer
-            const jumpPressed = input.isPressed('Space') || input.isPressed('ArrowUp') ||
-                input.isPressed('KeyW') || input.isPressed('w');
-            if (jumpPressed)
-                state.jumpBuffer = jumpBuffer;
-            else
-                state.jumpBuffer = Math.max(0, state.jumpBuffer - dt);
-            // Horizontal movement
-            const left = input.isDown('ArrowLeft') || input.isDown('KeyA') || input.isDown('a');
-            const right = input.isDown('ArrowRight') || input.isDown('KeyD') || input.isDown('d');
-            if (left)
-                rb.vx = -speed;
-            else if (right)
-                rb.vx = speed;
-            else
-                rb.vx *= rb.onGround ? 0.6 : 0.92;
-            // Sprite flip
-            const sprite = world.getComponent(id, 'Sprite');
-            if (sprite) {
-                if (left)
-                    sprite.flipX = true;
-                if (right)
-                    sprite.flipX = false;
-            }
-            // Jump
-            const canJump = state.coyoteTimer > 0 || state.jumpsLeft > 0;
-            if (state.jumpBuffer > 0 && canJump) {
-                rb.vy = jumpForce;
-                state.jumpsLeft = Math.max(0, state.jumpsLeft - 1);
-                state.coyoteTimer = 0;
-                state.jumpBuffer = 0;
-            }
-            // Variable jump height — release early to cut arc
-            const jumpHeld = input.isDown('Space') || input.isDown('ArrowUp') ||
-                input.isDown('KeyW') || input.isDown('w');
-            if (!jumpHeld && rb.vy < -120)
-                rb.vy += 800 * dt;
-        };
-        engine.ecs.addComponent(entityId, createScript(updateFn));
-        return () => engine.ecs.removeComponent(entityId, 'Script');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}

package/dist/hooks/useTopDownMovement.js

@@ -1,46 +0,0 @@
-import { useContext, useEffect } from 'react';
-import { createScript } from '@cubeforge/core';
-import { EngineContext } from '../context';
-/**
- * Attaches 4-directional top-down movement (WASD/Arrows) to an entity.
- * The entity must have a RigidBody with gravityScale=0 for top-down games.
- *
- * @example
- * <Entity id="player">
- *   <Transform x={100} y={100} />
- *   <Sprite width={24} height={24} color="#4fc3f7" />
- *   <RigidBody gravityScale={0} />
- *   <BoxCollider width={24} height={24} />
- * </Entity>
- * // In a Script or parent component:
- * useTopDownMovement(playerId, { speed: 180 })
- */
-export function useTopDownMovement(entityId, opts = {}) {
-    const engine = useContext(EngineContext);
-    const { speed = 200, normalizeDiagonal = true } = opts;
-    useEffect(() => {
-        const updateFn = (id, world, input) => {
-            if (!world.hasEntity(id))
-                return;
-            const rb = world.getComponent(id, 'RigidBody');
-            if (!rb)
-                return;
-            const left = (input.isDown('ArrowLeft') || input.isDown('KeyA') || input.isDown('a')) ? -1 : 0;
-            const right = (input.isDown('ArrowRight') || input.isDown('KeyD') || input.isDown('d')) ? 1 : 0;
-            const up = (input.isDown('ArrowUp') || input.isDown('KeyW') || input.isDown('w')) ? -1 : 0;
-            const down = (input.isDown('ArrowDown') || input.isDown('KeyS') || input.isDown('s')) ? 1 : 0;
-            let dx = left + right;
-            let dy = up + down;
-            if (normalizeDiagonal && dx !== 0 && dy !== 0) {
-                const len = Math.sqrt(dx * dx + dy * dy);
-                dx /= len;
-                dy /= len;
-            }
-            rb.vx = dx * speed;
-            rb.vy = dy * speed;
-        };
-        engine.ecs.addComponent(entityId, createScript(updateFn));
-        return () => engine.ecs.removeComponent(entityId, 'Script');
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}

package/dist/systems/debugSystem.js

@@ -1,104 +0,0 @@
-export class DebugSystem {
-    renderer;
-    frameCount = 0;
-    lastFpsTime = 0;
-    fps = 0;
-    constructor(renderer) {
-        this.renderer = renderer;
-    }
-    update(world, dt) {
-        const { ctx, canvas } = this.renderer;
-        // FPS tracking
-        this.frameCount++;
-        this.lastFpsTime += dt;
-        if (this.lastFpsTime >= 0.5) {
-            this.fps = Math.round(this.frameCount / this.lastFpsTime);
-            this.frameCount = 0;
-            this.lastFpsTime = 0;
-        }
-        // Get camera for world-space drawing
-        const camId = world.queryOne('Camera2D');
-        let camX = 0, camY = 0, zoom = 1;
-        if (camId !== undefined) {
-            const cam = world.getComponent(camId, 'Camera2D');
-            camX = cam.x;
-            camY = cam.y;
-            zoom = cam.zoom;
-        }
-        // Draw collider wireframes in world space
-        ctx.save();
-        ctx.translate(canvas.width / 2 - camX * zoom, canvas.height / 2 - camY * zoom);
-        ctx.scale(zoom, zoom);
-        const lw = 1 / zoom;
-        for (const id of world.query('Transform', 'BoxCollider')) {
-            const t = world.getComponent(id, 'Transform');
-            const c = world.getComponent(id, 'BoxCollider');
-            ctx.strokeStyle = c.isTrigger ? 'rgba(255,200,0,0.85)' : 'rgba(0,255,120,0.85)';
-            ctx.lineWidth = lw;
-            ctx.strokeRect(t.x + c.offsetX - c.width / 2, t.y + c.offsetY - c.height / 2, c.width, c.height);
-            // Entity ID label
-            ctx.fillStyle = 'rgba(255,255,255,0.5)';
-            ctx.font = `${10 / zoom}px monospace`;
-            ctx.fillText(String(id), t.x + c.offsetX - c.width / 2 + lw, t.y + c.offsetY - c.height / 2 - lw * 2);
-        }
-        // Camera bounds visualization (drawn in same world-space context)
-        if (camId !== undefined) {
-            const camFull = world.getComponent(camId, 'Camera2D');
-            if (camFull.bounds) {
-                const b = camFull.bounds;
-                ctx.strokeStyle = 'rgba(0, 255, 255, 0.4)';
-                ctx.lineWidth = 1 / zoom;
-                ctx.setLineDash([8 / zoom, 4 / zoom]);
-                ctx.strokeRect(b.x, b.y, b.width, b.height);
-                ctx.setLineDash([]);
-            }
-        }
-        ctx.restore();
-        // Physics grid visualization (128px spatial broadphase grid)
-        const GRID_SIZE = 128;
-        ctx.save();
-        ctx.strokeStyle = 'rgba(255, 255, 255, 0.04)';
-        ctx.lineWidth = 1;
-        ctx.setLineDash([]);
-        // Compute visible world-space range
-        const offsetX = camX - canvas.width / (2 * zoom);
-        const offsetY = camY - canvas.height / (2 * zoom);
-        const visibleW = canvas.width / zoom;
-        const visibleH = canvas.height / zoom;
-        const startCol = Math.floor(offsetX / GRID_SIZE);
-        const endCol = Math.ceil((offsetX + visibleW) / GRID_SIZE);
-        const startRow = Math.floor(offsetY / GRID_SIZE);
-        const endRow = Math.ceil((offsetY + visibleH) / GRID_SIZE);
-        ctx.translate(canvas.width / 2 - camX * zoom, canvas.height / 2 - camY * zoom);
-        ctx.scale(zoom, zoom);
-        for (let col = startCol; col <= endCol; col++) {
-            const wx = col * GRID_SIZE;
-            ctx.beginPath();
-            ctx.moveTo(wx, startRow * GRID_SIZE);
-            ctx.lineTo(wx, endRow * GRID_SIZE);
-            ctx.stroke();
-        }
-        for (let row = startRow; row <= endRow; row++) {
-            const wy = row * GRID_SIZE;
-            ctx.beginPath();
-            ctx.moveTo(startCol * GRID_SIZE, wy);
-            ctx.lineTo(endCol * GRID_SIZE, wy);
-            ctx.stroke();
-        }
-        ctx.restore();
-        // Screen-space HUD
-        const entityCount = world.entityCount;
-        const physicsCount = world.query('RigidBody', 'BoxCollider').length;
-        const renderCount = world.query('Transform', 'Sprite').length;
-        ctx.save();
-        ctx.fillStyle = 'rgba(0,0,0,0.65)';
-        ctx.fillRect(8, 8, 184, 84);
-        ctx.fillStyle = '#00ff88';
-        ctx.font = '11px monospace';
-        ctx.fillText(`FPS         ${this.fps}`, 16, 26);
-        ctx.fillText(`Entities    ${entityCount}`, 16, 42);
-        ctx.fillText(`Physics     ${physicsCount}`, 16, 58);
-        ctx.fillText(`Renderables ${renderCount}`, 16, 74);
-        ctx.restore();
-    }
-}