@thewhateverapp/tile-sdk 0.14.9 → 0.14.11

package/dist/pixi/index.d.ts

@@ -2,21 +2,42 @@
  * Pixi.js game components for tile-sdk
  *
  * Import from '@thewhateverapp/tile-sdk/pixi' to use pixi.js features.
- * This is a separate entry point to avoid loading pixi.js when not needed.
+ * This uses pixi.js directly (no @pixi/react) for better stability.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk/pixi';
+ * import { PixiGame, usePixiApp, useGameLoop } from '@thewhateverapp/tile-sdk/pixi';
+ * import * as PIXI from 'pixi.js';
  *
  * function MyGame() {
  *   return (
- *     <PixiGame>
+ *     <PixiGame width={256} height={554}>
  *       <GameContent />
  *     </PixiGame>
  *   );
  * }
+ *
+ * function GameContent() {
+ *   const app = usePixiApp();
+ *
+ *   useEffect(() => {
+ *     if (!app) return;
+ *     const graphics = new PIXI.Graphics();
+ *     graphics.beginFill(0xff0000);
+ *     graphics.drawRect(100, 100, 50, 50);
+ *     graphics.endFill();
+ *     app.stage.addChild(graphics);
+ *     return () => graphics.destroy();
+ *   }, [app]);
+ *
+ *   useGameLoop((delta) => {
+ *     // Game logic runs every frame
+ *   });
+ *
+ *   return null;
+ * }
  * ```
  */
-export { PixiGame, useGameLoop, useGameState, useGameInput, Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp, TILE_WIDTH, TILE_HEIGHT, } from '../react/PixiGame.js';
+export { PixiGame, usePixiApp, useApp, useGameLoop, useGameState, useGameInput, Container, Graphics, Text, Sprite, TILE_WIDTH, TILE_HEIGHT, } from '../react/PixiGame.js';
 export type { PixiGameProps } from '../react/PixiGame.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pixi/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EACL,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,EAEZ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,cAAc,EACd,MAAM,EAEN,UAAU,EACV,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/pixi/index.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAY,EAEZ,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,MAAM,EAEN,UAAU,EACV,WAAW,GACZ,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC"}

package/dist/pixi/index.js

@@ -3,23 +3,44 @@
  * Pixi.js game components for tile-sdk
  *
  * Import from '@thewhateverapp/tile-sdk/pixi' to use pixi.js features.
- * This is a separate entry point to avoid loading pixi.js when not needed.
+ * This uses pixi.js directly (no @pixi/react) for better stability.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk/pixi';
+ * import { PixiGame, usePixiApp, useGameLoop } from '@thewhateverapp/tile-sdk/pixi';
+ * import * as PIXI from 'pixi.js';
  *
  * function MyGame() {
  *   return (
- *     <PixiGame>
+ *     <PixiGame width={256} height={554}>
  *       <GameContent />
  *     </PixiGame>
  *   );
  * }
+ *
+ * function GameContent() {
+ *   const app = usePixiApp();
+ *
+ *   useEffect(() => {
+ *     if (!app) return;
+ *     const graphics = new PIXI.Graphics();
+ *     graphics.beginFill(0xff0000);
+ *     graphics.drawRect(100, 100, 50, 50);
+ *     graphics.endFill();
+ *     app.stage.addChild(graphics);
+ *     return () => graphics.destroy();
+ *   }, [app]);
+ *
+ *   useGameLoop((delta) => {
+ *     // Game logic runs every frame
+ *   });
+ *
+ *   return null;
+ * }
  * ```
  */
-export { PixiGame, useGameLoop, useGameState, useGameInput, 
-// Re-exported @pixi/react components
-Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp, 
+export { PixiGame, usePixiApp, useApp, useGameLoop, useGameState, useGameInput, 
+// Re-exported PIXI classes
+Container, Graphics, Text, Sprite, 
 // Constants
 TILE_WIDTH, TILE_HEIGHT, } from '../react/PixiGame.js';

package/dist/react/PixiGame.d.ts

@@ -1,14 +1,13 @@
 /**
- * PixiGame - A wrapper component that abstracts @pixi/react v7's Stage boilerplate
+ * PixiGame - Direct pixi.js integration without @pixi/react
  *
- * @pixi/react v7 uses the Stage component which provides the Application context.
- * Hooks like useTick must be used INSIDE the Stage tree.
- *
- * This component handles all of that setup automatically.
+ * This component creates a PIXI.Application imperatively and provides
+ * it via React context. This avoids react-reconciler issues that plague
+ * @pixi/react.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk';
+ * import { PixiGame, usePixiApp, useGameLoop } from '@thewhateverapp/tile-sdk/pixi';
  *
  * function MyGame() {
  *   return (
@@ -19,34 +18,51 @@
  * }
  *
  * function GameContent() {
- *   const playerRef = useRef({ x: 128, y: 400 });
+ *   const app = usePixiApp();
+ *   const containerRef = useRef<PIXI.Container | null>(null);
+ *
+ *   useEffect(() => {
+ *     if (!app) return;
+ *     const container = new PIXI.Container();
+ *     app.stage.addChild(container);
+ *     containerRef.current = container;
+ *     return () => {
+ *       app.stage.removeChild(container);
+ *       container.destroy();
+ *     };
+ *   }, [app]);
  *
  *   useGameLoop((delta) => {
- *     // Game logic here - runs every frame
- *     playerRef.current.x += 1 * delta;
+ *     // Game logic here
  *   });
  *
- *   return (
- *     <Container>
- *       <Graphics draw={(g) => {
- *         g.beginFill(0xff0000);
- *         g.drawRect(playerRef.current.x, playerRef.current.y, 32, 32);
- *         g.endFill();
- *       }} />
- *     </Container>
- *   );
+ *   return null; // No React children needed - pixi manages rendering
  * }
  * ```
  */
-import React, { ReactNode } from 'react';
-import { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp } from '@pixi/react';
-export { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane };
-export { useApp };
+import React, { type ReactNode } from 'react';
+import * as PIXI from 'pixi.js';
+export { Container, Graphics, Text, Sprite } from 'pixi.js';
 /**
  * Tile dimensions - standard tile size
  */
 export declare const TILE_WIDTH = 256;
 export declare const TILE_HEIGHT = 554;
+/**
+ * Hook to get the PIXI Application
+ */
+export declare function usePixiApp(): PIXI.Application | null;
+/**
+ * Hook to get the PIXI Application (alias for backwards compatibility)
+ */
+export declare function useApp(): PIXI.Application | null;
+/**
+ * useGameLoop - Run a callback every frame
+ *
+ * @param callback - Function called every frame with delta time (in frames, ~1 at 60fps)
+ * @param enabled - Whether the loop is active (default: true)
+ */
+export declare function useGameLoop(callback: (delta: number) => void, enabled?: boolean): void;
 export interface PixiGameProps {
     children: ReactNode;
     /** Width in pixels (default: 256 for tile) */
@@ -64,93 +80,26 @@ export interface PixiGameProps {
     /** Whether game is paused */
     paused?: boolean;
     /** Callback when Application is ready */
-    onMount?: (app: any) => void;
+    onMount?: (app: PIXI.Application) => void;
 }
 /**
  * PixiGame - Main wrapper component for pixi.js games
  *
- * Provides the Stage/Application context that @pixi/react hooks need.
- * All game content should be rendered as children of this component.
- *
- * Use pixi components directly:
- * - <Container> - Container for grouping elements
- * - <Sprite texture={...}> - Sprite with texture
- * - <Graphics draw={...}> - Graphics with draw callback
- * - <Text text="..." style={...}> - Text element
+ * Creates a PIXI.Application and provides it via context.
+ * Children can use usePixiApp() to access the app and create pixi objects.
  */
 export declare function PixiGame({ children, width, height, background, options, paused, onMount, }: PixiGameProps): React.JSX.Element;
-/**
- * useGameLoop - A more intuitive name for useTick
- *
- * Runs a callback every frame with delta time.
- * Must be used inside a PixiGame component (or any @pixi/react Stage).
- *
- * @param callback - Function called every frame with delta time (in frames, ~1 at 60fps)
- * @param enabled - Whether the loop is active (default: true)
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const posRef = useRef({ x: 0, y: 0 });
- *
- *   useGameLoop((delta) => {
- *     posRef.current.x += 2 * delta;
- *     if (posRef.current.x > 256) posRef.current.x = 0;
- *   });
- *
- *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
- * }
- * ```
- */
-export declare function useGameLoop(callback: (delta: number) => void, enabled?: boolean): void;
 /**
  * useGameState - Helper for managing game state with refs
  *
  * Returns a ref and a forceUpdate function for when you need to trigger re-renders.
  * Use refs for continuous game state (position, velocity) to avoid re-render loops.
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const [state, forceUpdate] = useGameState({
- *     playerX: 128,
- *     playerY: 400,
- *     score: 0,
- *   });
- *
- *   useGameLoop((delta) => {
- *     state.current.playerX += 1 * delta;
- *     if (scoreChanged) {
- *       forceUpdate(); // Only re-render when score changes
- *     }
- *   });
- *
- *   return <Text text={`Score: ${state.current.score}`} />;
- * }
- * ```
  */
 export declare function useGameState<T extends object>(initialState: T): [React.MutableRefObject<T>, () => void];
 /**
  * useGameInput - Simple keyboard input hook for games
  *
  * Returns a ref with currently pressed keys.
- * Can be used inside or outside PixiGame component.
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const keys = useGameInput();
- *   const posRef = useRef({ x: 128, y: 400 });
- *
- *   useGameLoop((delta) => {
- *     if (keys.current.ArrowLeft) posRef.current.x -= 5 * delta;
- *     if (keys.current.ArrowRight) posRef.current.x += 5 * delta;
- *     if (keys.current[' ']) jump(); // Space key
- *   });
- *
- *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
- * }
- * ```
  */
 export declare function useGameInput(): React.MutableRefObject<Record<string, boolean>>;
 //# sourceMappingURL=PixiGame.d.ts.map

package/dist/react/PixiGame.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PixiGame.d.ts","sourceRoot":"","sources":["../../src/react/PixiGame.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAEH,OAAO,KAAK,EAAE,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AACzE,OAAO,EAEL,SAAS,EACT,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,YAAY,EACZ,cAAc,EAEd,MAAM,EACP,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;AAG3F,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB;;GAEG;AACH,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,WAAW,MAAM,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;CAC9B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAkB,EAClB,MAAoB,EACpB,UAAqB,EACrB,OAAY,EACZ,MAAc,EACd,OAAO,GACR,EAAE,aAAa,qBAkBf;AA2BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACjC,OAAO,GAAE,OAAc,QAGxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,YAAY,EAAE,CAAC,GACd,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CASzC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,YAAY,oDAwB3B"}
+{"version":3,"file":"PixiGame.d.ts","sourceRoot":"","sources":["../../src/react/PixiGame.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,IAAI,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5D;;GAEG;AACH,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,WAAW,MAAM,CAAC;AAY/B;;GAEG;AACH,wBAAgB,UAAU,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAMpD;AAED;;GAEG;AACH,wBAAgB,MAAM,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAEhD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,EACjC,OAAO,GAAE,OAAc,QAexB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,SAAS,CAAC;IACpB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oBAAoB;IACpB,OAAO,CAAC,EAAE;QACR,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,CAAC;IACF,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC;CAC3C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAkB,EAClB,MAAoB,EACpB,UAAqB,EACrB,OAAY,EACZ,MAAc,EACd,OAAO,GACR,EAAE,aAAa,qBAqFf;AAED;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC3C,YAAY,EAAE,CAAC,GACd,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,MAAM,IAAI,CAAC,CASzC;AAED;;;;GAIG;AACH,wBAAgB,YAAY,oDAwB3B"}

package/dist/react/PixiGame.js

@@ -1,15 +1,14 @@
 'use client';
 /**
- * PixiGame - A wrapper component that abstracts @pixi/react v7's Stage boilerplate
+ * PixiGame - Direct pixi.js integration without @pixi/react
  *
- * @pixi/react v7 uses the Stage component which provides the Application context.
- * Hooks like useTick must be used INSIDE the Stage tree.
- *
- * This component handles all of that setup automatically.
+ * This component creates a PIXI.Application imperatively and provides
+ * it via React context. This avoids react-reconciler issues that plague
+ * @pixi/react.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk';
+ * import { PixiGame, usePixiApp, useGameLoop } from '@thewhateverapp/tile-sdk/pixi';
  *
  * function MyGame() {
  *   return (
@@ -20,130 +19,157 @@
  * }
  *
  * function GameContent() {
- *   const playerRef = useRef({ x: 128, y: 400 });
+ *   const app = usePixiApp();
+ *   const containerRef = useRef<PIXI.Container | null>(null);
+ *
+ *   useEffect(() => {
+ *     if (!app) return;
+ *     const container = new PIXI.Container();
+ *     app.stage.addChild(container);
+ *     containerRef.current = container;
+ *     return () => {
+ *       app.stage.removeChild(container);
+ *       container.destroy();
+ *     };
+ *   }, [app]);
  *
  *   useGameLoop((delta) => {
- *     // Game logic here - runs every frame
- *     playerRef.current.x += 1 * delta;
+ *     // Game logic here
  *   });
  *
- *   return (
- *     <Container>
- *       <Graphics draw={(g) => {
- *         g.beginFill(0xff0000);
- *         g.drawRect(playerRef.current.x, playerRef.current.y, 32, 32);
- *         g.endFill();
- *       }} />
- *     </Container>
- *   );
+ *   return null; // No React children needed - pixi manages rendering
  * }
  * ```
  */
-import React, { useCallback, useRef, useEffect } from 'react';
-import { Stage, Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useTick, useApp, } from '@pixi/react';
-// Re-export @pixi/react components for convenience
-export { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane };
-// Re-export useApp for advanced use cases
-export { useApp };
+import React, { createContext, useContext, useRef, useEffect, useState, useCallback, } from 'react';
+import * as PIXI from 'pixi.js';
+// Re-export PIXI classes for convenience
+export { Container, Graphics, Text, Sprite } from 'pixi.js';
 /**
  * Tile dimensions - standard tile size
  */
 export const TILE_WIDTH = 256;
 export const TILE_HEIGHT = 554;
+const PixiContext = createContext(null);
 /**
- * PixiGame - Main wrapper component for pixi.js games
- *
- * Provides the Stage/Application context that @pixi/react hooks need.
- * All game content should be rendered as children of this component.
- *
- * Use pixi components directly:
- * - <Container> - Container for grouping elements
- * - <Sprite texture={...}> - Sprite with texture
- * - <Graphics draw={...}> - Graphics with draw callback
- * - <Text text="..." style={...}> - Text element
+ * Hook to get the PIXI Application
  */
-export function PixiGame({ children, width = TILE_WIDTH, height = TILE_HEIGHT, background = 0x000000, options = {}, paused = false, onMount, }) {
-    const stageOptions = {
-        antialias: options.antialias ?? true,
-        resolution: options.resolution ?? (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
-        autoDensity: options.autoDensity ?? true,
-        backgroundColor: background,
-    };
-    return (React.createElement(Stage, { width: width, height: height, options: stageOptions, onMount: onMount },
-        React.createElement(GameWrapper, { paused: paused }, children)));
+export function usePixiApp() {
+    const context = useContext(PixiContext);
+    if (!context) {
+        throw new Error('usePixiApp must be used within a PixiGame component');
+    }
+    return context.app;
 }
 /**
- * Internal wrapper that provides pause functionality
+ * Hook to get the PIXI Application (alias for backwards compatibility)
  */
-function GameWrapper({ children, paused, }) {
-    const app = useApp();
-    useEffect(() => {
-        if (app?.ticker) {
-            if (paused) {
-                app.ticker.stop();
-            }
-            else {
-                app.ticker.start();
-            }
-        }
-    }, [app, paused]);
-    return React.createElement(React.Fragment, null, children);
+export function useApp() {
+    return usePixiApp();
 }
 /**
- * useGameLoop - A more intuitive name for useTick
- *
- * Runs a callback every frame with delta time.
- * Must be used inside a PixiGame component (or any @pixi/react Stage).
+ * useGameLoop - Run a callback every frame
  *
  * @param callback - Function called every frame with delta time (in frames, ~1 at 60fps)
  * @param enabled - Whether the loop is active (default: true)
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const posRef = useRef({ x: 0, y: 0 });
- *
- *   useGameLoop((delta) => {
- *     posRef.current.x += 2 * delta;
- *     if (posRef.current.x > 256) posRef.current.x = 0;
- *   });
- *
- *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
- * }
- * ```
  */
 export function useGameLoop(callback, enabled = true) {
-    useTick(callback, enabled);
+    const context = useContext(PixiContext);
+    const callbackRef = useRef(callback);
+    callbackRef.current = callback;
+    useEffect(() => {
+        if (!context || !enabled)
+            return;
+        const wrappedCallback = (delta) => {
+            callbackRef.current(delta);
+        };
+        return context.addTickerCallback(wrappedCallback);
+    }, [context, enabled]);
+}
+/**
+ * PixiGame - Main wrapper component for pixi.js games
+ *
+ * Creates a PIXI.Application and provides it via context.
+ * Children can use usePixiApp() to access the app and create pixi objects.
+ */
+export function PixiGame({ children, width = TILE_WIDTH, height = TILE_HEIGHT, background = 0x000000, options = {}, paused = false, onMount, }) {
+    const containerRef = useRef(null);
+    const appRef = useRef(null);
+    const tickerCallbacksRef = useRef(new Set());
+    const [isReady, setIsReady] = useState(false);
+    // Create PIXI Application
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const app = new PIXI.Application({
+            width,
+            height,
+            backgroundColor: background,
+            antialias: options.antialias ?? true,
+            resolution: options.resolution ?? (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+            autoDensity: options.autoDensity ?? true,
+        });
+        containerRef.current.appendChild(app.view);
+        appRef.current = app;
+        // Add master ticker callback that calls all registered callbacks
+        app.ticker.add((delta) => {
+            for (const callback of tickerCallbacksRef.current) {
+                callback(delta);
+            }
+        });
+        setIsReady(true);
+        onMount?.(app);
+        return () => {
+            setIsReady(false);
+            tickerCallbacksRef.current.clear();
+            app.destroy(true, { children: true, texture: true, baseTexture: true });
+            appRef.current = null;
+        };
+    }, []); // Only run once on mount
+    // Handle size changes
+    useEffect(() => {
+        if (appRef.current) {
+            appRef.current.renderer.resize(width, height);
+        }
+    }, [width, height]);
+    // Handle background color changes
+    useEffect(() => {
+        if (appRef.current) {
+            appRef.current.renderer.background.color = background;
+        }
+    }, [background]);
+    // Handle pause state
+    useEffect(() => {
+        if (appRef.current) {
+            if (paused) {
+                appRef.current.ticker.stop();
+            }
+            else {
+                appRef.current.ticker.start();
+            }
+        }
+    }, [paused]);
+    // Context value with app and ticker registration
+    const contextValue = {
+        app: appRef.current,
+        addTickerCallback: useCallback((callback) => {
+            tickerCallbacksRef.current.add(callback);
+            return () => {
+                tickerCallbacksRef.current.delete(callback);
+            };
+        }, []),
+    };
+    return (React.createElement("div", { ref: containerRef, style: { width, height } }, isReady && (React.createElement(PixiContext.Provider, { value: contextValue }, children))));
 }
 /**
  * useGameState - Helper for managing game state with refs
  *
  * Returns a ref and a forceUpdate function for when you need to trigger re-renders.
  * Use refs for continuous game state (position, velocity) to avoid re-render loops.
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const [state, forceUpdate] = useGameState({
- *     playerX: 128,
- *     playerY: 400,
- *     score: 0,
- *   });
- *
- *   useGameLoop((delta) => {
- *     state.current.playerX += 1 * delta;
- *     if (scoreChanged) {
- *       forceUpdate(); // Only re-render when score changes
- *     }
- *   });
- *
- *   return <Text text={`Score: ${state.current.score}`} />;
- * }
- * ```
  */
 export function useGameState(initialState) {
     const stateRef = useRef(initialState);
-    const [, setTick] = React.useState(0);
+    const [, setTick] = useState(0);
     const forceUpdate = useCallback(() => {
         setTick((t) => t + 1);
     }, []);
@@ -153,23 +179,6 @@ export function useGameState(initialState) {
  * useGameInput - Simple keyboard input hook for games
  *
  * Returns a ref with currently pressed keys.
- * Can be used inside or outside PixiGame component.
- *
- * @example
- * ```tsx
- * function GameContent() {
- *   const keys = useGameInput();
- *   const posRef = useRef({ x: 128, y: 400 });
- *
- *   useGameLoop((delta) => {
- *     if (keys.current.ArrowLeft) posRef.current.x -= 5 * delta;
- *     if (keys.current.ArrowRight) posRef.current.x += 5 * delta;
- *     if (keys.current[' ']) jump(); // Space key
- *   });
- *
- *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
- * }
- * ```
  */
 export function useGameInput() {
     const keysRef = useRef({});

package/dist/scene/SceneFromJson.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SceneRendererProps } from './SceneRenderer.js';
+import { type SceneRendererProps } from './SceneRenderer.js';
 /**
  * Props for SceneFromJson
  */

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

@@ -1 +1 @@
-{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAE7D;;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,qBAyIpB"}
+{"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,6 +1,7 @@
 'use client';
-import React, { useState, useEffect, useMemo } from 'react';
+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
  *
@@ -16,18 +17,8 @@ import { validateScene } from '@thewhateverapp/scene-sdk';
  * ```
  */
 export function SceneFromJson({ json, showErrors = true, onEvent, container = 'tile', ...props }) {
-    // SSR detection - only render SceneRenderer on client
-    const [isClient, setIsClient] = useState(false);
-    const [SceneRenderer, setSceneRenderer] = useState(null);
-    // Load SceneRenderer dynamically on client only (pixi.js requires browser APIs)
-    useEffect(() => {
-        setIsClient(true);
-        import('./SceneRenderer.js').then((mod) => {
-            setSceneRenderer(() => mod.SceneRenderer);
-        });
-    }, []);
     // Wrap onEvent to forward to parent window via postMessage
-    const wrappedOnEvent = React.useCallback((event, data) => {
+    const wrappedOnEvent = useCallback((event, data) => {
         // Call user's onEvent handler
         onEvent?.(event, data);
         // Forward to parent window for tile containers to handle
@@ -72,20 +63,6 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
             }
         }
     }, [validationResult]);
-    // Loading placeholder for SSR and dynamic import
-    const loadingPlaceholder = (React.createElement("div", { style: {
-            width: '100%',
-            height: '100%',
-            backgroundColor: '#0a0a1a',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-        } },
-        React.createElement("div", { style: {
-                color: '#666',
-                fontSize: 14,
-                fontFamily: 'system-ui, sans-serif',
-            } }, "Loading...")));
     // Show errors if validation failed
     if (!validationResult.valid) {
         if (showErrors) {
@@ -112,13 +89,9 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
         throw new Error(`Scene validation failed: ${validationResult.errors.map((e) => e.message).join(', ')}`);
     }
     // Show warnings in console
-    if (validationResult.warnings.length > 0 && isClient) {
+    if (validationResult.warnings.length > 0) {
         console.warn('Scene validation warnings:', validationResult.warnings);
     }
-    // Wait for client-side rendering and dynamic import
-    if (!isClient || !SceneRenderer) {
-        return containerStyle ? React.createElement("div", { style: containerStyle }, loadingPlaceholder) : loadingPlaceholder;
-    }
     const sceneContent = (React.createElement(SceneRenderer, { spec: json, onEvent: wrappedOnEvent, ...props }));
     return containerStyle ? React.createElement("div", { style: containerStyle }, sceneContent) : sceneContent;
 }