@thewhateverapp/tile-sdk 0.15.3 → 0.15.4

package/dist/scene/SceneContext.js

@@ -1,89 +0,0 @@
-'use client';
-import { createContext, useContext } from 'react';
-/**
- * Scene context
- */
-export const SceneContext = createContext(null);
-/**
- * Hook to access scene context
- */
-export function useScene() {
-    const context = useContext(SceneContext);
-    if (!context) {
-        throw new Error('useScene must be used within a SceneRenderer');
-    }
-    return context;
-}
-/**
- * Create initial entity state from entity definition
- */
-export function createEntityState(entity) {
-    return {
-        entity,
-        x: entity.transform.x,
-        y: entity.transform.y,
-        rotation: (entity.transform.rotation ?? 0) * (Math.PI / 180), // Convert to radians
-        scaleX: entity.transform.scaleX ?? 1,
-        scaleY: entity.transform.scaleY ?? 1,
-        velocityX: 0,
-        velocityY: 0,
-        visible: entity.render?.visible ?? true,
-        fill: entity.render?.fill,
-        alpha: entity.render?.alpha ?? 1,
-        destroyed: false,
-        componentState: {},
-    };
-}
-/**
- * Create initial player state
- */
-export function createPlayerState() {
-    return {
-        started: false,
-        grounded: false,
-        dead: false,
-        jumpCount: 0,
-        checkpointX: 0,
-        checkpointY: 0,
-        touchingOrb: null,
-        gravityDir: 1,
-        speedMultiplier: 1,
-        deaths: 0,
-        complete: false,
-        invincible: false,
-        invincibilityTimeRemaining: 0,
-    };
-}
-/**
- * Create initial camera state from config
- */
-export function createCameraState(config) {
-    return {
-        x: config?.initialX ?? 0,
-        y: config?.initialY ?? 0,
-        zoom: config?.zoom ?? 1,
-        shakeIntensity: 0,
-        shakeTimeRemaining: 0,
-    };
-}
-/**
- * Create initial input state
- */
-export function createInputState() {
-    return {
-        jumpPressed: false,
-        touching: false,
-        keys: {},
-    };
-}
-/**
- * Create initial timeline state
- */
-export function createTimelineState() {
-    return {
-        elapsedMs: 0,
-        currentBeat: 0,
-        nextEventIndex: 0,
-        activeTweens: [],
-    };
-}

package/dist/scene/SceneFromJson.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-import { type SceneRendererProps } from './SceneRenderer.js';
-/**
- * Props for SceneFromJson
- */
-export interface SceneFromJsonProps extends Omit<SceneRendererProps, 'spec'> {
-    /** The scene spec JSON object (imported from scene.json) */
-    json: unknown;
-    /** Show validation errors in UI instead of throwing */
-    showErrors?: boolean;
-    /**
-     * Container sizing mode:
-     * - 'tile': Fills parent container (w-full h-full) - default
-     * - 'page': Fills viewport (w-full h-screen)
-     * - 'none': No container wrapper (you manage sizing)
-     */
-    container?: 'tile' | 'page' | 'none';
-}
-/**
- * SceneFromJson - Renders a scene from a JSON object with validation
- *
- * @example
- * ```tsx
- * // In your tile page:
- * import { SceneFromJson } from '@thewhateverapp/tile-sdk/scene';
- * import sceneJson from './scene.json';
- *
- * export default function TilePage() {
- *   return <SceneFromJson json={sceneJson} />;
- * }
- * ```
- */
-export declare function SceneFromJson({ json, showErrors, onEvent, container, ...props }: SceneFromJsonProps): React.JSX.Element;
-//# sourceMappingURL=SceneFromJson.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAG/D,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IAC1E,4DAA4D;IAC5D,IAAI,EAAE,OAAO,CAAC;IACd,uDAAuD;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACtC;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,UAAiB,EACjB,OAAO,EACP,SAAkB,EAClB,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAoGpB"}

package/dist/scene/SceneFromJson.js

@@ -1,97 +0,0 @@
-'use client';
-import React, { useEffect, useMemo, useCallback } from 'react';
-import { validateScene } from '@thewhateverapp/scene-sdk';
-import { SceneRenderer } from './SceneRenderer.js';
-/**
- * SceneFromJson - Renders a scene from a JSON object with validation
- *
- * @example
- * ```tsx
- * // In your tile page:
- * import { SceneFromJson } from '@thewhateverapp/tile-sdk/scene';
- * import sceneJson from './scene.json';
- *
- * export default function TilePage() {
- *   return <SceneFromJson json={sceneJson} />;
- * }
- * ```
- */
-export function SceneFromJson({ json, showErrors = true, onEvent, container = 'tile', ...props }) {
-    // Wrap onEvent to forward to parent window via postMessage
-    const wrappedOnEvent = useCallback((event, data) => {
-        // Call user's onEvent handler
-        onEvent?.(event, data);
-        // Forward to parent window for tile containers to handle
-        if (typeof window !== 'undefined' && window.parent !== window) {
-            window.parent.postMessage({
-                type: 'tile:event',
-                payload: { event, data },
-                timestamp: Date.now(),
-            }, '*' // Allow any parent origin (tile containers validate origin)
-            );
-        }
-    }, [onEvent]);
-    // Container styles based on mode
-    const containerStyle = container === 'none'
-        ? undefined
-        : {
-            width: '100%',
-            height: container === 'page' ? '100vh' : '100%',
-        };
-    // Validate the JSON
-    const validationResult = useMemo(() => {
-        try {
-            return validateScene(json);
-        }
-        catch (error) {
-            return {
-                valid: false,
-                errors: [{ path: 'root', message: String(error), code: 'PARSE_ERROR' }],
-                warnings: [],
-            };
-        }
-    }, [json]);
-    // Report validation errors to agent for correction
-    useEffect(() => {
-        if (!validationResult.valid) {
-            const errorMessage = `Scene Validation Errors:\n${validationResult.errors
-                .map((e) => `${e.path}: ${e.message}`)
-                .join('\n')}`;
-            // Report to agent via preview error reporting mechanism
-            if (typeof window !== 'undefined' && window.__PREVIEW_REPORT_ERROR__) {
-                window.__PREVIEW_REPORT_ERROR__(errorMessage, null, null);
-            }
-        }
-    }, [validationResult]);
-    // Show errors if validation failed
-    if (!validationResult.valid) {
-        if (showErrors) {
-            const errorContent = (React.createElement("div", { style: {
-                    width: '100%',
-                    height: '100%',
-                    backgroundColor: '#1a0a0a',
-                    color: '#ff4444',
-                    padding: 16,
-                    fontFamily: 'monospace',
-                    fontSize: 12,
-                    overflow: 'auto',
-                } },
-                React.createElement("div", { style: { fontWeight: 'bold', marginBottom: 8 } }, "Scene Validation Errors:"),
-                validationResult.errors.map((error, i) => (React.createElement("div", { key: i, style: { marginBottom: 4 } },
-                    React.createElement("span", { style: { color: '#ff8888' } },
-                        error.path,
-                        ":"),
-                    " ",
-                    error.message)))));
-            return containerStyle ? React.createElement("div", { style: containerStyle }, errorContent) : errorContent;
-        }
-        // Throw if not showing errors
-        throw new Error(`Scene validation failed: ${validationResult.errors.map((e) => e.message).join(', ')}`);
-    }
-    // Show warnings in console
-    if (validationResult.warnings.length > 0) {
-        console.warn('Scene validation warnings:', validationResult.warnings);
-    }
-    const sceneContent = (React.createElement(SceneRenderer, { spec: json, onEvent: wrappedOnEvent, ...props }));
-    return containerStyle ? React.createElement("div", { style: containerStyle }, sceneContent) : sceneContent;
-}

package/dist/scene/SceneRenderer.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import type { SceneSpecV1 } from '@thewhateverapp/scene-sdk';
-/**
- * Props for SceneRenderer
- */
-export interface SceneRendererProps {
-    /** Scene specification to render */
-    spec: SceneSpecV1;
-    /** Callback for scene events (player.death, level.complete, etc.) */
-    onEvent?: (event: string, data?: unknown) => void;
-    /** Whether the scene is paused */
-    paused?: boolean;
-    /** Fixed width (if not set, fills container responsively) */
-    width?: number;
-    /** Fixed height (if not set, fills container responsively) */
-    height?: number;
-    /** Enable debug rendering */
-    debug?: boolean;
-}
-/**
- * SceneRenderer - Renders a SceneSpecV1 with physics, components, and timeline
- *
- * By default, fills its parent container responsively. Pass explicit width/height
- * to override with fixed dimensions.
- */
-export declare function SceneRenderer({ spec: inputSpec, onEvent, paused, width: fixedWidth, height: fixedHeight, debug, }: SceneRendererProps): React.JSX.Element;
-import { useScene } from './SceneContext.js';
-export { useScene };
-//# sourceMappingURL=SceneRenderer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SceneRenderer.d.ts","sourceRoot":"","sources":["../../src/scene/SceneRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAGjF,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,2BAA2B,CAAC;AAwDrE;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,oCAAoC;IACpC,IAAI,EAAE,WAAW,CAAC;IAClB,qEAAqE;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,kCAAkC;IAClC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EAAE,SAAS,EACf,OAAO,EACP,MAAc,EACd,KAAK,EAAE,UAAU,EACjB,MAAM,EAAE,WAAW,EACnB,KAAa,GACd,EAAE,kBAAkB,qBA0CpB;AAgTD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/scene/SceneRenderer.js

@@ -1,312 +0,0 @@
-'use client';
-import React, { useEffect, useRef, useCallback, useMemo, useState } from 'react';
-import * as PIXI from 'pixi.js';
-import Matter from 'matter-js';
-import { compileScene } from '@thewhateverapp/scene-sdk';
-import { PixiGame, usePixiApp, useGameLoop, TILE_WIDTH, TILE_HEIGHT } from '../pixi/index.js';
-import { SceneContext, createEntityState, createPlayerState, createCameraState, createInputState, createTimelineState, } from './SceneContext.js';
-import { usePhysicsEngine } from './physics/PhysicsEngine.js';
-import { useInputManager } from './input/InputManager.js';
-import { useComponentRunner } from './components/ComponentRunner.js';
-import { useTimelineExecutor } from './timeline/TimelineExecutor.js';
-import { useCameraController } from './camera/CameraController.js';
-import { createEntityGraphics, updateEntityGraphics, } from './entities/EntityGraphics.js';
-const { Body } = Matter;
-/**
- * Hook to track container size using ResizeObserver
- */
-function useContainerSize(containerRef) {
-    const [size, setSize] = useState({ width: TILE_WIDTH, height: TILE_HEIGHT });
-    useEffect(() => {
-        const container = containerRef.current;
-        if (!container)
-            return;
-        const updateSize = () => {
-            const rect = container.getBoundingClientRect();
-            if (rect.width > 0 && rect.height > 0) {
-                setSize({ width: rect.width, height: rect.height });
-            }
-        };
-        // Initial size
-        updateSize();
-        // Watch for resize
-        const observer = new ResizeObserver(updateSize);
-        observer.observe(container);
-        return () => observer.disconnect();
-    }, [containerRef]);
-    return size;
-}
-/**
- * SceneRenderer - Renders a SceneSpecV1 with physics, components, and timeline
- *
- * By default, fills its parent container responsively. Pass explicit width/height
- * to override with fixed dimensions.
- */
-export function SceneRenderer({ spec: inputSpec, onEvent, paused = false, width: fixedWidth, height: fixedHeight, debug = false, }) {
-    const containerRef = useRef(null);
-    const autoSize = useContainerSize(containerRef);
-    // Use fixed dimensions if provided, otherwise auto-size to container
-    const width = fixedWidth ?? autoSize.width;
-    const height = fixedHeight ?? autoSize.height;
-    // Compile patterns once on mount
-    const compiledSpec = useMemo(() => compileScene(inputSpec), [inputSpec]);
-    // Get background color from spec
-    const backgroundColor = useMemo(() => {
-        const bg = compiledSpec.style?.background?.color;
-        if (bg) {
-            return parseInt(bg.replace('#', ''), 16);
-        }
-        return 0x0a0a1a; // Default dark background
-    }, [compiledSpec]);
-    return (React.createElement("div", { ref: containerRef, style: { width: '100%', height: '100%' } },
-        React.createElement(PixiGame, { width: width, height: height, background: backgroundColor, paused: paused },
-            React.createElement(SceneContent, { spec: compiledSpec, onEvent: onEvent, paused: paused, width: width, height: height, debug: debug }))));
-}
-/**
- * Inner component that runs inside PixiGame context
- */
-function SceneContent({ spec, onEvent, paused, width, height, debug, }) {
-    const app = usePixiApp();
-    // Pixi containers
-    const worldContainerRef = useRef(null);
-    const layerContainersRef = useRef(new Map());
-    const entityGraphicsRef = useRef(new Map());
-    // Initialize refs for all state
-    const entitiesRef = useRef(new Map());
-    const playerRef = useRef(createPlayerState());
-    const cameraRef = useRef(createCameraState(spec.camera));
-    const inputRef = useRef(createInputState());
-    const timelineRef = useRef(createTimelineState());
-    const engineRef = useRef(null);
-    const startTimeRef = useRef(Date.now());
-    // Get layers from spec or use defaults
-    const layers = useMemo(() => {
-        if (spec.layers && spec.layers.length > 0) {
-            return spec.layers;
-        }
-        // Default dash layers
-        return ['bg', 'deco', 'solids', 'hazards', 'orbs', 'player', 'fx', 'ui'];
-    }, [spec.layers]);
-    // Get BPM from spec
-    const bpm = spec.meta?.bpm ?? 120;
-    // Event emitter callback
-    const emitEvent = useCallback((event, data) => {
-        onEvent?.(event, data);
-    }, [onEvent]);
-    // Get entity by ID
-    const getEntity = useCallback((id) => {
-        return entitiesRef.current.get(id);
-    }, []);
-    // Spawn entity from prefab
-    const spawnEntity = useCallback((prefabId, x, y) => {
-        const prefab = spec.prefabs?.[prefabId];
-        if (!prefab) {
-            console.warn(`Prefab not found: ${prefabId}`);
-            return;
-        }
-        const id = `${prefabId}_${Date.now()}`;
-        const entity = {
-            id,
-            kind: prefab.kind ?? 'rect',
-            layer: prefab.layer ?? 'fx',
-            transform: {
-                x,
-                y,
-                ...prefab.transform,
-            },
-            geom: prefab.geom ?? { w: 20, h: 20 },
-            render: prefab.render,
-            body: prefab.body,
-            tags: prefab.tags,
-            components: prefab.components,
-        };
-        const state = createEntityState(entity);
-        entitiesRef.current.set(id, state);
-        // Create graphics for the new entity
-        const layerContainer = layerContainersRef.current.get(entity.layer);
-        if (layerContainer) {
-            const graphics = createEntityGraphics(state, debug);
-            entityGraphicsRef.current.set(id, graphics);
-            layerContainer.addChild(graphics.container);
-        }
-    }, [spec.prefabs, debug]);
-    // Destroy entity
-    const destroyEntity = useCallback((id) => {
-        const entity = entitiesRef.current.get(id);
-        if (entity) {
-            entity.destroyed = true;
-            // Body cleanup happens in physics engine
-            // Graphics cleanup happens in render loop
-        }
-    }, []);
-    // Respawn player at checkpoint
-    const respawnPlayer = useCallback(() => {
-        const player = playerRef.current;
-        player.dead = false;
-        player.jumpCount = 0;
-        player.gravityDir = 1;
-        // Grant 1 second of invincibility to prevent instant re-death
-        player.invincible = true;
-        player.invincibilityTimeRemaining = 1000;
-        // Find player entity and reset position
-        for (const [, state] of entitiesRef.current) {
-            if (state.entity.tags?.includes('player')) {
-                const respawnX = player.checkpointX ?? state.entity.transform.x;
-                const respawnY = player.checkpointY ?? state.entity.transform.y;
-                state.x = respawnX;
-                state.y = respawnY;
-                state.velocityX = 0;
-                state.velocityY = 0;
-                state.rotation = 0;
-                // Update physics body if it exists
-                if (state.body) {
-                    Body.setPosition(state.body, { x: respawnX, y: respawnY });
-                    Body.setVelocity(state.body, { x: 0, y: 0 });
-                    Body.setAngle(state.body, 0);
-                }
-                break;
-            }
-        }
-        emitEvent('player.respawn', { x: player.checkpointX, y: player.checkpointY });
-    }, [emitEvent]);
-    // Build context value
-    const contextValue = useMemo(() => ({
-        spec,
-        entities: entitiesRef,
-        layers,
-        player: playerRef,
-        camera: cameraRef,
-        input: inputRef,
-        timeline: timelineRef,
-        engine: engineRef,
-        emitEvent,
-        getEntity,
-        spawnEntity,
-        destroyEntity,
-        respawnPlayer,
-        bpm,
-        startTime: startTimeRef.current,
-    }), [spec, layers, bpm, emitEvent, getEntity, spawnEntity, destroyEntity, respawnPlayer]);
-    // Initialize pixi containers
-    useEffect(() => {
-        if (!app)
-            return;
-        // Create world container
-        const worldContainer = new PIXI.Container();
-        worldContainer.sortableChildren = true;
-        app.stage.addChild(worldContainer);
-        worldContainerRef.current = worldContainer;
-        // Create layer containers
-        const layerContainers = new Map();
-        layers.forEach((layer, index) => {
-            const container = new PIXI.Container();
-            container.zIndex = index;
-            worldContainer.addChild(container);
-            layerContainers.set(layer, container);
-        });
-        layerContainersRef.current = layerContainers;
-        return () => {
-            // Cleanup
-            entityGraphicsRef.current.forEach((graphics) => {
-                graphics.container.destroy({ children: true });
-            });
-            entityGraphicsRef.current.clear();
-            layerContainersRef.current.clear();
-            worldContainer.destroy({ children: true });
-            worldContainerRef.current = null;
-        };
-    }, [app, layers]);
-    // Initialize entities from spec
-    useEffect(() => {
-        const entityMap = new Map();
-        for (const entity of spec.entities) {
-            entityMap.set(entity.id, createEntityState(entity));
-        }
-        entitiesRef.current = entityMap;
-        // Find player and set initial checkpoint
-        for (const entity of spec.entities) {
-            if (entity.tags?.includes('player')) {
-                playerRef.current.checkpointX = entity.transform.x;
-                playerRef.current.checkpointY = entity.transform.y;
-                break;
-            }
-        }
-        // Reset start time
-        startTimeRef.current = Date.now();
-        timelineRef.current = createTimelineState();
-        // Create graphics for all entities
-        entityGraphicsRef.current.forEach((graphics) => {
-            graphics.container.destroy({ children: true });
-        });
-        entityGraphicsRef.current.clear();
-        for (const [id, state] of entityMap) {
-            const layerContainer = layerContainersRef.current.get(state.entity.layer);
-            if (layerContainer) {
-                const graphics = createEntityGraphics(state, debug);
-                entityGraphicsRef.current.set(id, graphics);
-                layerContainer.addChild(graphics.container);
-            }
-        }
-    }, [spec, debug]);
-    // Initialize physics engine
-    usePhysicsEngine(contextValue, width, height);
-    // Initialize input handling
-    useInputManager(contextValue);
-    // Run component logic
-    useComponentRunner(contextValue);
-    // Run timeline
-    useTimelineExecutor(contextValue);
-    // Update camera
-    useCameraController(contextValue, width, height);
-    // Main game loop - update graphics positions
-    useGameLoop((delta) => {
-        if (paused)
-            return;
-        const playerState = playerRef.current;
-        // Update timeline elapsed time (only when game has started)
-        if (playerState.started) {
-            // Adjust start time on first frame after starting
-            if (timelineRef.current.elapsedMs === 0) {
-                startTimeRef.current = Date.now();
-            }
-            const now = Date.now();
-            timelineRef.current.elapsedMs = now - startTimeRef.current;
-            timelineRef.current.currentBeat = (timelineRef.current.elapsedMs / 1000) * (bpm / 60);
-        }
-        // Update camera position
-        if (worldContainerRef.current) {
-            const camera = cameraRef.current;
-            worldContainerRef.current.x = -camera.x + width / 2;
-            worldContainerRef.current.y = -camera.y + height / 2;
-            worldContainerRef.current.scale.set(camera.zoom);
-        }
-        // Update entity graphics
-        for (const [id, state] of entitiesRef.current) {
-            const graphics = entityGraphicsRef.current.get(id);
-            if (!graphics)
-                continue;
-            if (state.destroyed || !state.visible) {
-                // Remove destroyed/hidden entities
-                if (graphics.container.parent) {
-                    graphics.container.parent.removeChild(graphics.container);
-                }
-                if (state.destroyed) {
-                    graphics.container.destroy({ children: true });
-                    entityGraphicsRef.current.delete(id);
-                    entitiesRef.current.delete(id);
-                }
-                else {
-                    graphics.container.visible = false;
-                }
-                continue;
-            }
-            graphics.container.visible = true;
-            updateEntityGraphics(graphics, state);
-        }
-    }, !paused);
-    // Provide context for hooks that need it
-    return (React.createElement(SceneContext.Provider, { value: contextValue }, null));
-}
-// Re-export useScene for convenience
-import { useScene } from './SceneContext.js';
-export { useScene };

package/dist/scene/camera/CameraController.d.ts

@@ -1,6 +0,0 @@
-import type { SceneContextValue } from '../SceneContext.js';
-/**
- * Hook to control the camera
- */
-export declare function useCameraController(context: SceneContextValue, width: number, height: number): void;
-//# sourceMappingURL=CameraController.d.ts.map

package/dist/scene/camera/CameraController.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CameraController.d.ts","sourceRoot":"","sources":["../../../src/scene/camera/CameraController.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAE5D;;GAEG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,MAAM,QA6Ff"}

package/dist/scene/camera/CameraController.js

@@ -1,90 +0,0 @@
-'use client';
-import { useGameLoop } from '../../pixi/index.js';
-/**
- * Hook to control the camera
- */
-export function useCameraController(context, width, height) {
-    const { spec, camera, entities, player, timeline } = context;
-    const cameraConfig = spec.camera;
-    useGameLoop((delta) => {
-        const cameraState = camera.current;
-        const playerState = player.current;
-        const elapsedMs = timeline.current.elapsedMs;
-        // Get camera mode
-        const mode = cameraConfig?.mode ?? 'static';
-        switch (mode) {
-            case 'static': {
-                // Camera stays at initial position
-                cameraState.x = cameraConfig?.initialX ?? width / 2;
-                cameraState.y = cameraConfig?.initialY ?? height / 2;
-                break;
-            }
-            case 'scroll': {
-                // Auto-scroll camera (only when game has started)
-                if (!playerState.started) {
-                    // Initialize camera position when not started
-                    cameraState.x = cameraConfig?.initialX ?? width / 2;
-                    cameraState.y = cameraConfig?.initialY ?? height / 2;
-                    break;
-                }
-                const scrollSpeed = (cameraConfig?.scrollSpeed ?? 320) * playerState.speedMultiplier;
-                const direction = cameraConfig?.scrollDirection ?? 'right';
-                switch (direction) {
-                    case 'right':
-                        cameraState.x += scrollSpeed * delta * 0.016;
-                        break;
-                    case 'left':
-                        cameraState.x -= scrollSpeed * delta * 0.016;
-                        break;
-                    case 'down':
-                        cameraState.y += scrollSpeed * delta * 0.016;
-                        break;
-                    case 'up':
-                        cameraState.y -= scrollSpeed * delta * 0.016;
-                        break;
-                }
-                break;
-            }
-            case 'follow': {
-                // Follow target entity
-                const targetId = cameraConfig?.followTarget;
-                if (!targetId)
-                    break;
-                const targetEntity = entities.current.get(targetId);
-                if (!targetEntity)
-                    break;
-                const smoothing = cameraConfig?.smoothing ?? 0.1;
-                const targetX = targetEntity.x;
-                const targetY = targetEntity.y;
-                // Lerp camera towards target
-                cameraState.x += (targetX - cameraState.x) * smoothing;
-                cameraState.y += (targetY - cameraState.y) * smoothing;
-                break;
-            }
-        }
-        // Apply camera bounds
-        const bounds = cameraConfig?.bounds;
-        if (bounds) {
-            if (bounds.minX !== undefined)
-                cameraState.x = Math.max(cameraState.x, bounds.minX);
-            if (bounds.maxX !== undefined)
-                cameraState.x = Math.min(cameraState.x, bounds.maxX);
-            if (bounds.minY !== undefined)
-                cameraState.y = Math.max(cameraState.y, bounds.minY);
-            if (bounds.maxY !== undefined)
-                cameraState.y = Math.min(cameraState.y, bounds.maxY);
-        }
-        // Apply camera shake
-        if (cameraState.shakeTimeRemaining > 0) {
-            const intensity = cameraState.shakeIntensity;
-            cameraState.x += (Math.random() - 0.5) * intensity;
-            cameraState.y += (Math.random() - 0.5) * intensity;
-            cameraState.shakeTimeRemaining -= delta * 16.67;
-            if (cameraState.shakeTimeRemaining <= 0) {
-                cameraState.shakeIntensity = 0;
-            }
-        }
-        // Apply zoom
-        cameraState.zoom = cameraConfig?.zoom ?? 1;
-    });
-}