@thewhateverapp/tile-sdk 0.13.37 → 0.14.1

package/dist/scene/entities/EntityRenderer.js

@@ -0,0 +1,203 @@
+'use client';
+import React, { useCallback, useMemo } from 'react';
+import { Container, Graphics, Text } from '../../pixi';
+/**
+ * Renders a single entity based on its kind
+ */
+export function EntityRenderer({ state, debug = false }) {
+    const { entity, x, y, rotation, scaleX, scaleY, alpha, fill } = state;
+    const kind = entity.kind;
+    // Parse fill color
+    const fillColor = useMemo(() => {
+        const color = fill ?? entity.render?.fill ?? '#ffffff';
+        return parseInt(color.replace('#', ''), 16);
+    }, [fill, entity.render?.fill]);
+    // Parse stroke color
+    const strokeColor = useMemo(() => {
+        const color = entity.render?.stroke;
+        if (!color)
+            return undefined;
+        return parseInt(color.replace('#', ''), 16);
+    }, [entity.render?.stroke]);
+    const strokeWidth = entity.render?.strokeWidth ?? 0;
+    // Common container props
+    const containerProps = {
+        x,
+        y,
+        rotation,
+        scale: { x: scaleX, y: scaleY },
+        alpha,
+    };
+    switch (kind) {
+        case 'rect':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(RectEntity, { geom: entity.geom, fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth }),
+                debug && React.createElement(DebugBounds, { geom: entity.geom })));
+        case 'circle':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(CircleEntity, { geom: entity.geom, fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth })));
+        case 'poly':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(PolyEntity, { geom: entity.geom, fillColor: fillColor, strokeColor: strokeColor, strokeWidth: strokeWidth })));
+        case 'line':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(LineEntity, { geom: entity.geom, strokeColor: strokeColor ?? fillColor })));
+        case 'text':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(TextEntity, { geom: entity.geom, fillColor: fillColor })));
+        case 'sprite':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(SpriteEntity, { geom: entity.geom })));
+        case 'emitter':
+            return (React.createElement(Container, { ...containerProps },
+                React.createElement(EmitterEntity, { geom: entity.geom, fillColor: fillColor })));
+        case 'group':
+            // Groups are just containers, children are rendered separately
+            return React.createElement(Container, { ...containerProps });
+        default:
+            console.warn(`Unknown entity kind: ${kind}`);
+            return null;
+    }
+}
+/**
+ * Rect entity renderer
+ */
+function RectEntity({ geom, fillColor, strokeColor, strokeWidth, }) {
+    const draw = useCallback((g) => {
+        g.clear();
+        if (strokeColor !== undefined && strokeWidth > 0) {
+            g.lineStyle(strokeWidth, strokeColor);
+        }
+        g.beginFill(fillColor);
+        const anchorX = geom.w / 2;
+        const anchorY = geom.h / 2;
+        if (geom.cornerRadius && geom.cornerRadius > 0) {
+            g.drawRoundedRect(-anchorX, -anchorY, geom.w, geom.h, geom.cornerRadius);
+        }
+        else {
+            g.drawRect(-anchorX, -anchorY, geom.w, geom.h);
+        }
+        g.endFill();
+    }, [geom.w, geom.h, geom.cornerRadius, fillColor, strokeColor, strokeWidth]);
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Circle entity renderer
+ */
+function CircleEntity({ geom, fillColor, strokeColor, strokeWidth, }) {
+    const draw = useCallback((g) => {
+        g.clear();
+        if (strokeColor !== undefined && strokeWidth > 0) {
+            g.lineStyle(strokeWidth, strokeColor);
+        }
+        g.beginFill(fillColor);
+        g.drawCircle(0, 0, geom.r);
+        g.endFill();
+    }, [geom.r, fillColor, strokeColor, strokeWidth]);
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Polygon entity renderer
+ */
+function PolyEntity({ geom, fillColor, strokeColor, strokeWidth, }) {
+    const draw = useCallback((g) => {
+        g.clear();
+        if (strokeColor !== undefined && strokeWidth > 0) {
+            g.lineStyle(strokeWidth, strokeColor);
+        }
+        g.beginFill(fillColor);
+        const points = geom.points;
+        if (points.length < 3)
+            return;
+        g.moveTo(points[0][0], points[0][1]);
+        for (let i = 1; i < points.length; i++) {
+            g.lineTo(points[i][0], points[i][1]);
+        }
+        g.closePath();
+        g.endFill();
+    }, [geom.points, fillColor, strokeColor, strokeWidth]);
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Line entity renderer
+ */
+function LineEntity({ geom, strokeColor, }) {
+    const draw = useCallback((g) => {
+        g.clear();
+        g.lineStyle(geom.lineWidth ?? 2, strokeColor);
+        const points = geom.points;
+        if (points.length < 2)
+            return;
+        g.moveTo(points[0][0], points[0][1]);
+        for (let i = 1; i < points.length; i++) {
+            g.lineTo(points[i][0], points[i][1]);
+        }
+    }, [geom.points, geom.lineWidth, strokeColor]);
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Text entity renderer
+ */
+function TextEntity({ geom, fillColor, }) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const style = useMemo(() => ({
+        fontFamily: geom.fontFamily ?? 'Arial',
+        fontSize: geom.fontSize ?? 16,
+        fontWeight: geom.fontWeight ?? 'normal',
+        fill: fillColor,
+        align: geom.align ?? 'center',
+    }), [geom.fontFamily, geom.fontSize, geom.fontWeight, geom.align, fillColor]);
+    return (React.createElement(Text, { text: geom.text, style: style, anchor: { x: 0.5, y: 0.5 } }));
+}
+/**
+ * Sprite entity renderer
+ */
+function SpriteEntity({ geom }) {
+    // For now, just render a placeholder
+    // Full sprite loading requires texture management
+    const draw = useCallback((g) => {
+        g.clear();
+        g.beginFill(0x888888);
+        const w = geom.w ?? 32;
+        const h = geom.h ?? 32;
+        g.drawRect(-w / 2, -h / 2, w, h);
+        g.endFill();
+        // Draw X to indicate missing sprite
+        g.lineStyle(2, 0xff0000);
+        g.moveTo(-w / 2, -h / 2);
+        g.lineTo(w / 2, h / 2);
+        g.moveTo(w / 2, -h / 2);
+        g.lineTo(-w / 2, h / 2);
+    }, [geom.w, geom.h]);
+    // TODO: Load actual sprite from geom.src
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Particle emitter entity renderer
+ * This is a simplified version - full particle system is in effects/
+ */
+function EmitterEntity({ geom, fillColor, }) {
+    // For now, just draw a marker for the emitter
+    const draw = useCallback((g) => {
+        g.clear();
+        g.beginFill(fillColor, 0.3);
+        g.drawCircle(0, 0, 10);
+        g.endFill();
+        // Draw emitter indicator
+        g.lineStyle(1, fillColor);
+        g.drawCircle(0, 0, 15);
+    }, [fillColor]);
+    // TODO: Implement full particle system
+    return React.createElement(Graphics, { draw: draw });
+}
+/**
+ * Debug bounds renderer
+ */
+function DebugBounds({ geom }) {
+    const draw = useCallback((g) => {
+        g.clear();
+        g.lineStyle(1, 0x00ff00, 0.5);
+        g.drawRect(-geom.w / 2, -geom.h / 2, geom.w, geom.h);
+    }, [geom.w, geom.h]);
+    return React.createElement(Graphics, { draw: draw });
+}

package/dist/scene/index.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Scene SDK - Runtime renderer for SceneSpecV1
+ *
+ * Import from '@thewhateverapp/tile-sdk/scene' to use the scene renderer.
+ *
+ * @example
+ * ```tsx
+ * // RECOMMENDED: Use SceneFromJson with a JSON file
+ * import { SceneFromJson } from '@thewhateverapp/tile-sdk/scene';
+ * import sceneJson from './scene.json';
+ *
+ * export default function TilePage() {
+ *   return <SceneFromJson json={sceneJson} />;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Alternative: Use SceneRenderer with a spec object (for computed values)
+ * import { SceneRenderer } from '@thewhateverapp/tile-sdk/scene';
+ * import type { SceneSpecV1 } from '@thewhateverapp/scene-sdk';
+ *
+ * function MyGame() {
+ *   const spec: SceneSpecV1 = { version: 1, entities: [...] };
+ *   return <SceneRenderer spec={spec} />;
+ * }
+ * ```
+ */
+export { SceneFromJson } from './SceneFromJson';
+export type { SceneFromJsonProps } from './SceneFromJson';
+export { SceneRenderer, useScene } from './SceneRenderer';
+export type { SceneRendererProps } from './SceneRenderer';
+export { SceneContext, createEntityState, createPlayerState, createCameraState, createInputState, createTimelineState, } from './SceneContext';
+export type { SceneContextValue, EntityState, PlayerState, CameraState, InputState, TimelineState, ActiveTween, } from './SceneContext';
+export { EntityRenderer } from './entities/EntityRenderer';
+export type { EntityRendererProps } from './entities/EntityRenderer';
+export { usePhysicsEngine, applyImpulse, setVelocity, } from './physics/PhysicsEngine';
+export { useInputManager, isJumpPressed, isKeyPressed, isTouching, } from './input/InputManager';
+export { useComponentRunner, registerComponent, } from './components/ComponentRunner';
+export { useTimelineExecutor } from './timeline/TimelineExecutor';
+export { useCameraController } from './camera/CameraController';
+export { createGlowOptions, parseColor, isGlowFilterAvailable, createGlowShadow, } from './effects/GlowFilter';
+export type { GlowOptions } from './effects/GlowFilter';
+export { createEmitter, updateEmitter, drawParticles, burstEmit, } from './effects/ParticleSystem';
+export type { Particle, ParticleEmitter } from './effects/ParticleSystem';
+//# sourceMappingURL=index.d.ts.map

package/dist/scene/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/scene/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAG1D,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AACxB,YAAY,EACV,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,WAAW,EACX,UAAU,EACV,aAAa,EACb,WAAW,GACZ,MAAM,gBAAgB,CAAC;AAGxB,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,YAAY,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGrE,OAAO,EACL,gBAAgB,EAChB,YAAY,EACZ,WAAW,GACZ,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,eAAe,EACf,aAAa,EACb,YAAY,EACZ,UAAU,GACX,MAAM,sBAAsB,CAAC;AAG9B,OAAO,EACL,kBAAkB,EAClB,iBAAiB,GAClB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAGlE,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAGhE,OAAO,EACL,iBAAiB,EACjB,UAAU,EACV,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAExD,OAAO,EACL,aAAa,EACb,aAAa,EACb,aAAa,EACb,SAAS,GACV,MAAM,0BAA0B,CAAC;AAClC,YAAY,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/scene/index.js

@@ -0,0 +1,50 @@
+'use client';
+/**
+ * Scene SDK - Runtime renderer for SceneSpecV1
+ *
+ * Import from '@thewhateverapp/tile-sdk/scene' to use the scene renderer.
+ *
+ * @example
+ * ```tsx
+ * // RECOMMENDED: Use SceneFromJson with a JSON file
+ * import { SceneFromJson } from '@thewhateverapp/tile-sdk/scene';
+ * import sceneJson from './scene.json';
+ *
+ * export default function TilePage() {
+ *   return <SceneFromJson json={sceneJson} />;
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Alternative: Use SceneRenderer with a spec object (for computed values)
+ * import { SceneRenderer } from '@thewhateverapp/tile-sdk/scene';
+ * import type { SceneSpecV1 } from '@thewhateverapp/scene-sdk';
+ *
+ * function MyGame() {
+ *   const spec: SceneSpecV1 = { version: 1, entities: [...] };
+ *   return <SceneRenderer spec={spec} />;
+ * }
+ * ```
+ */
+// Main components - JSON-first approach
+export { SceneFromJson } from './SceneFromJson';
+// SceneRenderer for advanced use (computed specs)
+export { SceneRenderer, useScene } from './SceneRenderer';
+// Context and types
+export { SceneContext, createEntityState, createPlayerState, createCameraState, createInputState, createTimelineState, } from './SceneContext';
+// Entity rendering
+export { EntityRenderer } from './entities/EntityRenderer';
+// Physics
+export { usePhysicsEngine, applyImpulse, setVelocity, } from './physics/PhysicsEngine';
+// Input
+export { useInputManager, isJumpPressed, isKeyPressed, isTouching, } from './input/InputManager';
+// Components
+export { useComponentRunner, registerComponent, } from './components/ComponentRunner';
+// Timeline
+export { useTimelineExecutor } from './timeline/TimelineExecutor';
+// Camera
+export { useCameraController } from './camera/CameraController';
+// Effects
+export { createGlowOptions, parseColor, isGlowFilterAvailable, createGlowShadow, } from './effects/GlowFilter';
+export { createEmitter, updateEmitter, drawParticles, burstEmit, } from './effects/ParticleSystem';

package/dist/scene/input/InputManager.d.ts

@@ -0,0 +1,18 @@
+import type { SceneContextValue } from '../SceneContext';
+/**
+ * Hook to manage keyboard and touch input
+ */
+export declare function useInputManager(context: SceneContextValue): void;
+/**
+ * Check if jump is currently pressed
+ */
+export declare function isJumpPressed(context: SceneContextValue): boolean;
+/**
+ * Check if a specific key is pressed
+ */
+export declare function isKeyPressed(context: SceneContextValue, key: string): boolean;
+/**
+ * Check if touch/click is active
+ */
+export declare function isTouching(context: SceneContextValue): boolean;
+//# sourceMappingURL=InputManager.d.ts.map

package/dist/scene/input/InputManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputManager.d.ts","sourceRoot":"","sources":["../../../src/scene/input/InputManager.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAEzD;;GAEG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,iBAAiB,QA2EzD;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAEjE;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAE7E;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,OAAO,EAAE,iBAAiB,GAAG,OAAO,CAE9D"}

package/dist/scene/input/InputManager.js

@@ -0,0 +1,86 @@
+'use client';
+import { useEffect } from 'react';
+/**
+ * Hook to manage keyboard and touch input
+ */
+export function useInputManager(context) {
+    const { input } = context;
+    useEffect(() => {
+        const inputState = input.current;
+        // Keyboard event handlers
+        const handleKeyDown = (e) => {
+            const key = e.key;
+            const code = e.code;
+            // Track all keys
+            inputState.keys[key] = true;
+            inputState.keys[code] = true;
+            // Jump keys: Space, ArrowUp, W
+            if (key === ' ' || key === 'ArrowUp' || key === 'w' || key === 'W') {
+                inputState.jumpPressed = true;
+            }
+        };
+        const handleKeyUp = (e) => {
+            const key = e.key;
+            const code = e.code;
+            // Track all keys
+            inputState.keys[key] = false;
+            inputState.keys[code] = false;
+            // Jump keys: Space, ArrowUp, W
+            if (key === ' ' || key === 'ArrowUp' || key === 'w' || key === 'W') {
+                inputState.jumpPressed = false;
+            }
+        };
+        // Touch event handlers
+        const handleTouchStart = (e) => {
+            inputState.touching = true;
+            inputState.jumpPressed = true;
+        };
+        const handleTouchEnd = (e) => {
+            inputState.touching = false;
+            inputState.jumpPressed = false;
+        };
+        // Mouse event handlers (for desktop click)
+        const handleMouseDown = (e) => {
+            inputState.touching = true;
+            inputState.jumpPressed = true;
+        };
+        const handleMouseUp = (e) => {
+            inputState.touching = false;
+            inputState.jumpPressed = false;
+        };
+        // Add event listeners
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('keyup', handleKeyUp);
+        window.addEventListener('touchstart', handleTouchStart, { passive: true });
+        window.addEventListener('touchend', handleTouchEnd, { passive: true });
+        window.addEventListener('mousedown', handleMouseDown);
+        window.addEventListener('mouseup', handleMouseUp);
+        // Cleanup
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('keyup', handleKeyUp);
+            window.removeEventListener('touchstart', handleTouchStart);
+            window.removeEventListener('touchend', handleTouchEnd);
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [input]);
+}
+/**
+ * Check if jump is currently pressed
+ */
+export function isJumpPressed(context) {
+    return context.input.current.jumpPressed;
+}
+/**
+ * Check if a specific key is pressed
+ */
+export function isKeyPressed(context, key) {
+    return context.input.current.keys[key] ?? false;
+}
+/**
+ * Check if touch/click is active
+ */
+export function isTouching(context) {
+    return context.input.current.touching;
+}

package/dist/scene/physics/PhysicsEngine.d.ts

@@ -0,0 +1,15 @@
+import Matter from 'matter-js';
+import type { SceneContextValue } from '../SceneContext';
+/**
+ * Hook to initialize and run the physics engine
+ */
+export declare function usePhysicsEngine(context: SceneContextValue, width: number, height: number): void;
+/**
+ * Apply impulse to a body
+ */
+export declare function applyImpulse(body: Matter.Body, impulseX: number, impulseY: number): void;
+/**
+ * Set velocity on a body
+ */
+export declare function setVelocity(body: Matter.Body, velocityX: number, velocityY: number): void;
+//# sourceMappingURL=PhysicsEngine.d.ts.map

package/dist/scene/physics/PhysicsEngine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhysicsEngine.d.ts","sourceRoot":"","sources":["../../../src/scene/physics/PhysicsEngine.tsx"],"names":[],"mappings":"AAGA,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,KAAK,EAAE,iBAAiB,EAAe,MAAM,iBAAiB,CAAC;AAqEtE;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,QAsGf;AA2GD;;GAEG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,QAMjB;AAED;;GAEG;AACH,wBAAgB,WAAW,CACzB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,MAAM,QAGlB"}

package/dist/scene/physics/PhysicsEngine.js

@@ -0,0 +1,252 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import Matter from 'matter-js';
+import { useGameLoop } from '../../pixi';
+const { Engine, World, Bodies, Body, Events } = Matter;
+/**
+ * Creates a Matter.js body from an entity state
+ */
+function createBody(state, worldGravity) {
+    const { entity } = state;
+    const bodyConfig = entity.body;
+    // No physics body
+    if (!bodyConfig || bodyConfig.type === 'none') {
+        return null;
+    }
+    const transform = entity.transform;
+    const x = transform.x;
+    const y = transform.y;
+    const rotation = (transform.rotation ?? 0) * (Math.PI / 180);
+    // Common body options
+    const options = {
+        isStatic: bodyConfig.isStatic ?? false,
+        isSensor: bodyConfig.type === 'sensor',
+        restitution: bodyConfig.restitution ?? 0,
+        friction: bodyConfig.friction ?? 0.1,
+        frictionAir: 0.01,
+        angle: rotation,
+        label: entity.id,
+        collisionFilter: {
+            category: bodyConfig.category ?? 0x0001,
+            mask: bodyConfig.mask ?? 0xFFFF,
+        },
+    };
+    let body = null;
+    // Create body based on shape
+    switch (bodyConfig.shape) {
+        case 'rect': {
+            const geom = entity.geom;
+            body = Bodies.rectangle(x, y, geom.w, geom.h, options);
+            break;
+        }
+        case 'circle': {
+            const geom = entity.geom;
+            body = Bodies.circle(x, y, geom.r, options);
+            break;
+        }
+        case 'poly': {
+            const geom = entity.geom;
+            // Convert points to Matter.js format
+            const vertices = geom.points.map(([px, py]) => ({ x: px, y: py }));
+            body = Bodies.fromVertices(x, y, [vertices], options);
+            break;
+        }
+        default:
+            console.warn(`Unknown body shape: ${bodyConfig.shape}`);
+            return null;
+    }
+    return body;
+}
+/**
+ * Hook to initialize and run the physics engine
+ */
+export function usePhysicsEngine(context, width, height) {
+    const { spec, entities, player, engine: engineRef, emitEvent } = context;
+    const bodiesMapRef = useRef(new Map());
+    // Get gravity from spec
+    const gravity = spec.world?.gravity ?? 2600;
+    // Initialize engine
+    useEffect(() => {
+        // Create engine with gravity
+        const engine = Engine.create({
+            gravity: {
+                x: 0,
+                y: gravity / 1000, // Matter.js uses different scale
+                scale: 0.001,
+            },
+        });
+        engineRef.current = engine;
+        // Create bodies for all entities
+        const bodiesMap = new Map();
+        const bodiesToAdd = [];
+        for (const [id, state] of entities.current) {
+            const body = createBody(state, gravity);
+            if (body) {
+                bodiesMap.set(id, body);
+                bodiesToAdd.push(body);
+                state.body = body;
+            }
+        }
+        // Add all bodies to world
+        World.add(engine.world, bodiesToAdd);
+        bodiesMapRef.current = bodiesMap;
+        // Set up collision events
+        Events.on(engine, 'collisionStart', (event) => {
+            for (const pair of event.pairs) {
+                const entityA = entities.current.get(pair.bodyA.label);
+                const entityB = entities.current.get(pair.bodyB.label);
+                if (entityA && entityB) {
+                    handleCollision(entityA, entityB, context);
+                }
+            }
+        });
+        // Cleanup
+        return () => {
+            Events.off(engine, 'collisionStart');
+            World.clear(engine.world, false);
+            Engine.clear(engine);
+            engineRef.current = null;
+        };
+    }, [spec, gravity, engineRef, entities]);
+    // Physics update loop
+    useGameLoop((delta) => {
+        const engine = engineRef.current;
+        if (!engine)
+            return;
+        const playerState = player.current;
+        // Update gravity direction for player
+        engine.gravity.y = (gravity / 1000) * playerState.gravityDir;
+        // Step physics (delta is ~1 at 60fps, so we use 16.67ms per frame)
+        Engine.update(engine, 16.67 * delta);
+        // Sync entity positions from physics bodies
+        for (const [id, body] of bodiesMapRef.current) {
+            const state = entities.current.get(id);
+            if (!state || state.destroyed)
+                continue;
+            // Update entity position from body
+            state.x = body.position.x;
+            state.y = body.position.y;
+            state.rotation = body.angle;
+            state.velocityX = body.velocity.x;
+            state.velocityY = body.velocity.y;
+        }
+        // Check if player is grounded
+        const playerEntity = findPlayerEntity(entities.current);
+        if (playerEntity?.body) {
+            const body = playerEntity.body;
+            // Simple ground check - if velocity.y is very small and we're not in the air
+            playerState.grounded = Math.abs(body.velocity.y) < 0.5;
+        }
+        // Check for death (fell off screen)
+        if (playerEntity && playerEntity.y > height + 100) {
+            if (!playerState.dead) {
+                playerState.dead = true;
+                playerState.deaths++;
+                emitEvent('player.death', { cause: 'fall', deaths: playerState.deaths });
+            }
+        }
+    });
+}
+/**
+ * Handle collision between two entities
+ */
+function handleCollision(entityA, entityB, context) {
+    const { player, emitEvent } = context;
+    const playerState = player.current;
+    // Check if either entity is the player
+    const isPlayerA = entityA.entity.tags?.includes('player');
+    const isPlayerB = entityB.entity.tags?.includes('player');
+    if (!isPlayerA && !isPlayerB)
+        return;
+    const playerEntity = isPlayerA ? entityA : entityB;
+    const otherEntity = isPlayerA ? entityB : entityA;
+    const otherTags = otherEntity.entity.tags ?? [];
+    // Check for hazard collision
+    if (otherTags.includes('hazard') || hasComponent(otherEntity, 'KillOnTouch')) {
+        if (!playerState.dead) {
+            playerState.dead = true;
+            playerState.deaths++;
+            emitEvent('player.death', { cause: 'hazard', deaths: playerState.deaths });
+        }
+        return;
+    }
+    // Check for checkpoint collision
+    if (otherTags.includes('checkpoint') || hasComponent(otherEntity, 'Checkpoint')) {
+        playerState.checkpointX = otherEntity.x;
+        playerState.checkpointY = otherEntity.y;
+        emitEvent('checkpoint.reached', { x: otherEntity.x, y: otherEntity.y });
+        return;
+    }
+    // Check for finish line collision
+    if (otherTags.includes('finish') || hasComponent(otherEntity, 'FinishLine')) {
+        if (!playerState.complete) {
+            playerState.complete = true;
+            emitEvent('level.complete', { deaths: playerState.deaths });
+        }
+        return;
+    }
+    // Check for jump orb collision
+    if (otherTags.includes('orb') || hasComponent(otherEntity, 'JumpOrb')) {
+        playerState.touchingOrb = otherEntity.entity.id;
+        return;
+    }
+    // Check for speed portal collision
+    if (hasComponent(otherEntity, 'SpeedPortal')) {
+        const component = getComponent(otherEntity, 'SpeedPortal');
+        const params = component?.params;
+        if (params?.speed) {
+            playerState.speedMultiplier = params.speed / 320; // Base speed
+            emitEvent('speed.changed', { speed: params.speed });
+        }
+        return;
+    }
+    // Check for gravity portal collision
+    if (hasComponent(otherEntity, 'GravityPortal')) {
+        playerState.gravityDir *= -1;
+        emitEvent('gravity.flipped', { direction: playerState.gravityDir });
+        return;
+    }
+    // Ground collision - reset jump count
+    if (otherEntity.entity.body?.isStatic && !otherEntity.entity.body?.type) {
+        playerState.grounded = true;
+        playerState.jumpCount = 0;
+    }
+}
+/**
+ * Find the player entity
+ */
+function findPlayerEntity(entities) {
+    for (const [, state] of entities) {
+        if (state.entity.tags?.includes('player')) {
+            return state;
+        }
+    }
+    return null;
+}
+/**
+ * Check if entity has a component
+ */
+function hasComponent(state, type) {
+    return state.entity.components?.some((c) => c.type === type) ?? false;
+}
+/**
+ * Get a component from an entity
+ */
+function getComponent(state, type) {
+    return state.entity.components?.find((c) => c.type === type);
+}
+/**
+ * Apply impulse to a body
+ */
+export function applyImpulse(body, impulseX, impulseY) {
+    Body.applyForce(body, body.position, {
+        x: impulseX * 0.001,
+        y: impulseY * 0.001,
+    });
+}
+/**
+ * Set velocity on a body
+ */
+export function setVelocity(body, velocityX, velocityY) {
+    Body.setVelocity(body, { x: velocityX, y: velocityY });
+}