@thewhateverapp/tile-sdk 0.13.35 → 0.13.36

package/dist/react/PixiGame.d.ts

@@ -1,17 +1,14 @@
 /**
- * PixiGame - A wrapper component that abstracts @pixi/react v8's Application boilerplate
+ * PixiGame - A wrapper component that abstracts @pixi/react v7's Stage boilerplate
  *
- * @pixi/react v8 requires:
- * 1. Importing pixi.js classes
- * 2. Calling extend() to register them
- * 3. Using them as <pixi*> JSX elements (e.g., <pixiContainer>, <pixiSprite>)
- * 4. Hooks like useTick must be used INSIDE the Application tree
+ * @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.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop } from '@thewhateverapp/tile-sdk';
+ * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk';
  *
  * function MyGame() {
  *   return (
@@ -29,19 +26,22 @@
  *     playerRef.current.x += 1 * delta;
  *   });
  *
- *   // Use lowercase 'pixi' prefix for pixi.js elements
  *   return (
- *     <pixiContainer>
- *       <pixiSprite texture={texture} x={playerRef.current.x} />
- *     </pixiContainer>
+ *     <Container>
+ *       <Graphics draw={(g) => {
+ *         g.beginFill(0xff0000);
+ *         g.drawRect(playerRef.current.x, playerRef.current.y, 32, 32);
+ *         g.endFill();
+ *       }} />
+ *     </Container>
  *   );
  * }
  * ```
  */
 import React, { ReactNode } from 'react';
-import { useApplication, extend } from '@pixi/react';
-export { extend };
-export { useApplication };
+import { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp } from '@pixi/react';
+export { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane };
+export { useApp };
 /**
  * Tile dimensions - standard tile size
  */
@@ -54,34 +54,36 @@ export interface PixiGameProps {
     /** Height in pixels (default: 554 for tile) */
     height?: number;
     /** Background color (default: black) */
-    background?: string | number;
-    /** Whether to use antialiasing (default: true) */
-    antialias?: boolean;
-    /** Resolution/pixel ratio (default: window.devicePixelRatio || 1) */
-    resolution?: number;
+    background?: number;
+    /** Stage options */
+    options?: {
+        antialias?: boolean;
+        resolution?: number;
+        autoDensity?: boolean;
+    };
     /** Whether game is paused */
     paused?: boolean;
     /** Callback when Application is ready */
-    onReady?: () => void;
+    onMount?: (app: any) => void;
 }
 /**
  * PixiGame - Main wrapper component for pixi.js games
  *
- * Provides the Application context that @pixi/react hooks need.
+ * Provides the Stage/Application context that @pixi/react hooks need.
  * All game content should be rendered as children of this component.
  *
- * After importing PixiGame, use pixi.js elements with the 'pixi' prefix:
- * - <pixiContainer> - Container for grouping elements
- * - <pixiSprite texture={...}> - Sprite with texture
- * - <pixiGraphics draw={...}> - Graphics with draw callback
- * - <pixiText text="..." style={...}> - Text element
+ * 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
  */
-export declare function PixiGame({ children, width, height, background, antialias, resolution, paused, onReady, }: PixiGameProps): React.JSX.Element;
+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 Application).
+ * 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)
@@ -96,13 +98,11 @@ export declare function PixiGame({ children, width, height, background, antialia
  *     if (posRef.current.x > 256) posRef.current.x = 0;
  *   });
  *
- *   return <pixiSprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
+ *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
  * }
  * ```
  */
-export declare function useGameLoop(callback: (ticker: {
-    deltaTime: number;
-}) => void, enabled?: boolean): void;
+export declare function useGameLoop(callback: (delta: number) => void, enabled?: boolean): void;
 /**
  * useGameState - Helper for managing game state with refs
  *
@@ -120,12 +120,12 @@ export declare function useGameLoop(callback: (ticker: {
  *
  *   useGameLoop((delta) => {
  *     state.current.playerX += 1 * delta;
- *     if (state.current.score !== previousScore) {
+ *     if (scoreChanged) {
  *       forceUpdate(); // Only re-render when score changes
  *     }
  *   });
  *
- *   return <pixiText text={`Score: ${state.current.score}`} />;
+ *   return <Text text={`Score: ${state.current.score}`} />;
  * }
  * ```
  */
@@ -148,7 +148,7 @@ export declare function useGameState<T extends object>(initialState: T): [React.
  *     if (keys.current[' ']) jump(); // Space key
  *   });
  *
- *   return <pixiSprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
+ *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
  * }
  * ```
  */

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,EAAe,cAAc,EAAW,MAAM,EAAE,MAAM,aAAa,CAAC;AA0B3E,OAAO,EAAE,MAAM,EAAE,CAAC;AAGlB,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B;;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,GAAG,MAAM,CAAC;IAC7B,kDAAkD;IAClD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,6BAA6B;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,KAAkB,EAClB,MAAoB,EACpB,UAAqB,EACrB,SAAgB,EAChB,UAAU,EACV,MAAc,EACd,OAAO,GACR,EAAE,aAAa,qBAiBf;AA2BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CACzB,QAAQ,EAAE,CAAC,MAAM,EAAE;IAAE,SAAS,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,EACjD,OAAO,GAAE,OAAc,QAMxB;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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"}

package/dist/react/PixiGame.js

@@ -1,18 +1,15 @@
 'use client';
 /**
- * PixiGame - A wrapper component that abstracts @pixi/react v8's Application boilerplate
+ * PixiGame - A wrapper component that abstracts @pixi/react v7's Stage boilerplate
  *
- * @pixi/react v8 requires:
- * 1. Importing pixi.js classes
- * 2. Calling extend() to register them
- * 3. Using them as <pixi*> JSX elements (e.g., <pixiContainer>, <pixiSprite>)
- * 4. Hooks like useTick must be used INSIDE the Application tree
+ * @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.
  *
  * @example
  * ```tsx
- * import { PixiGame, useGameLoop } from '@thewhateverapp/tile-sdk';
+ * import { PixiGame, useGameLoop, Container, Graphics } from '@thewhateverapp/tile-sdk';
  *
  * function MyGame() {
  *   return (
@@ -30,34 +27,24 @@
  *     playerRef.current.x += 1 * delta;
  *   });
  *
- *   // Use lowercase 'pixi' prefix for pixi.js elements
  *   return (
- *     <pixiContainer>
- *       <pixiSprite texture={texture} x={playerRef.current.x} />
- *     </pixiContainer>
+ *     <Container>
+ *       <Graphics draw={(g) => {
+ *         g.beginFill(0xff0000);
+ *         g.drawRect(playerRef.current.x, playerRef.current.y, 32, 32);
+ *         g.endFill();
+ *       }} />
+ *     </Container>
  *   );
  * }
  * ```
  */
 import React, { useCallback, useRef, useEffect } from 'react';
-import { Application, useApplication, useTick, extend } from '@pixi/react';
-import { Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSliceSprite, Mesh, } from 'pixi.js';
-// Register all common pixi.js classes so they're available as JSX elements
-// After this, you can use <pixiContainer>, <pixiSprite>, <pixiGraphics>, etc.
-extend({
-    Container,
-    Sprite,
-    Graphics,
-    Text,
-    AnimatedSprite,
-    TilingSprite,
-    NineSliceSprite,
-    Mesh,
-});
-// Re-export the extend function for advanced use cases
-export { extend };
-// Re-export useApplication for advanced use cases
-export { useApplication };
+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 };
 /**
  * Tile dimensions - standard tile size
  */
@@ -66,27 +53,30 @@ export const TILE_HEIGHT = 554;
 /**
  * PixiGame - Main wrapper component for pixi.js games
  *
- * Provides the Application context that @pixi/react hooks need.
+ * Provides the Stage/Application context that @pixi/react hooks need.
  * All game content should be rendered as children of this component.
  *
- * After importing PixiGame, use pixi.js elements with the 'pixi' prefix:
- * - <pixiContainer> - Container for grouping elements
- * - <pixiSprite texture={...}> - Sprite with texture
- * - <pixiGraphics draw={...}> - Graphics with draw callback
- * - <pixiText text="..." style={...}> - Text element
+ * 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
  */
-export function PixiGame({ children, width = TILE_WIDTH, height = TILE_HEIGHT, background = 0x000000, antialias = true, resolution, paused = false, onReady, }) {
-    const handleReady = useCallback(() => {
-        onReady?.();
-    }, [onReady]);
-    return (React.createElement(Application, { width: width, height: height, background: background, antialias: antialias, resolution: resolution ?? (typeof window !== 'undefined' ? window.devicePixelRatio : 1), onInit: handleReady },
+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)));
 }
 /**
  * Internal wrapper that provides pause functionality
  */
 function GameWrapper({ children, paused, }) {
-    const { app } = useApplication();
+    const app = useApp();
     useEffect(() => {
         if (app?.ticker) {
             if (paused) {
@@ -103,7 +93,7 @@ function GameWrapper({ children, paused, }) {
  * 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 Application).
+ * 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)
@@ -118,15 +108,12 @@ function GameWrapper({ children, paused, }) {
  *     if (posRef.current.x > 256) posRef.current.x = 0;
  *   });
  *
- *   return <pixiSprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
+ *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
  * }
  * ```
  */
 export function useGameLoop(callback, enabled = true) {
-    useTick({
-        callback: (ticker) => callback(ticker),
-        isEnabled: enabled,
-    });
+    useTick(callback, enabled);
 }
 /**
  * useGameState - Helper for managing game state with refs
@@ -145,12 +132,12 @@ export function useGameLoop(callback, enabled = true) {
  *
  *   useGameLoop((delta) => {
  *     state.current.playerX += 1 * delta;
- *     if (state.current.score !== previousScore) {
+ *     if (scoreChanged) {
  *       forceUpdate(); // Only re-render when score changes
  *     }
  *   });
  *
- *   return <pixiText text={`Score: ${state.current.score}`} />;
+ *   return <Text text={`Score: ${state.current.score}`} />;
  * }
  * ```
  */
@@ -180,7 +167,7 @@ export function useGameState(initialState) {
  *     if (keys.current[' ']) jump(); // Space key
  *   });
  *
- *   return <pixiSprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
+ *   return <Sprite x={posRef.current.x} y={posRef.current.y} texture={...} />;
  * }
  * ```
  */

package/dist/react/index.d.ts

@@ -4,7 +4,7 @@ export { useTile } from './useTile';
 export { useKeyboard } from './useKeyboard';
 export { TileContainer } from './TileContainer';
 export { withTile } from './withTile';
-export { PixiGame, useGameLoop, useGameState, useGameInput, extend, useApplication, TILE_WIDTH, TILE_HEIGHT, } from './PixiGame';
+export { PixiGame, useGameLoop, useGameState, useGameInput, Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp, TILE_WIDTH, TILE_HEIGHT, } from './PixiGame';
 export type { PixiGameProps } from './PixiGame';
 export * from './overlay';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,OAAO,EACL,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,EAEZ,MAAM,EACN,cAAc,EAEd,UAAU,EACV,WAAW,GACZ,MAAM,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACvD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,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,YAAY,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,cAAc,WAAW,CAAC"}

package/dist/react/index.js

@@ -5,10 +5,10 @@ export { useKeyboard } from './useKeyboard';
 export { TileContainer } from './TileContainer';
 export { withTile } from './withTile';
 // TileInitializer removed - router should be injected directly into TileProvider
-// PixiGame wrapper for @pixi/react games - abstracts Application context boilerplate
+// PixiGame wrapper for @pixi/react games - abstracts Stage context boilerplate
 export { PixiGame, useGameLoop, useGameState, useGameInput, 
-// Re-exported from @pixi/react
-extend, useApplication, 
+// Re-exported @pixi/react components
+Container, Sprite, Graphics, Text, AnimatedSprite, TilingSprite, NineSlicePlane, useApp, 
 // Constants
 TILE_WIDTH, TILE_HEIGHT, } from './PixiGame';
 // Overlay components for hybrid tiles (video/image with interactive overlays)

package/dist/spec/schema.d.ts

@@ -28,10 +28,10 @@ declare const ActionSchema: z.ZodObject<{
     $action: z.ZodEnum<["emit", "setState", "sequence", "openTile", "openFull", "navigate", "dismiss", "fx"]>;
     payload: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodUnknown>>;
 }, "strip", z.ZodTypeAny, {
-    $action: "navigate" | "emit" | "setState" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
+    $action: "navigate" | "setState" | "emit" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
     payload?: Record<string, unknown> | undefined;
 }, {
-    $action: "navigate" | "emit" | "setState" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
+    $action: "navigate" | "setState" | "emit" | "sequence" | "openTile" | "openFull" | "dismiss" | "fx";
     payload?: Record<string, unknown> | undefined;
 }>;
 declare const PropValueSchema: z.ZodType<unknown>;
@@ -61,20 +61,20 @@ declare const CaptionTrackSchema: z.ZodObject<{
     }, "strip", z.ZodTypeAny, {
         position: "center" | "bottom" | "top";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        color?: string | undefined;
         background?: "none" | "solid" | "gradient" | undefined;
+        color?: string | undefined;
     }, {
         position: "center" | "bottom" | "top";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        color?: string | undefined;
         background?: "none" | "solid" | "gradient" | undefined;
+        color?: string | undefined;
     }>;
 }, "strip", z.ZodTypeAny, {
     style: {
         position: "center" | "bottom" | "top";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        color?: string | undefined;
         background?: "none" | "solid" | "gradient" | undefined;
+        color?: string | undefined;
     };
     segments: {
         text: string;
@@ -86,8 +86,8 @@ declare const CaptionTrackSchema: z.ZodObject<{
     style: {
         position: "center" | "bottom" | "top";
         size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-        color?: string | undefined;
         background?: "none" | "solid" | "gradient" | undefined;
+        color?: string | undefined;
     };
     segments: {
         text: string;
@@ -347,11 +347,11 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             offsetMs: z.ZodOptional<z.ZodNumber>;
             scale: z.ZodOptional<z.ZodNumber>;
         }, "strip", z.ZodTypeAny, {
-            scale?: number | undefined;
             offsetMs?: number | undefined;
-        }, {
             scale?: number | undefined;
+        }, {
             offsetMs?: number | undefined;
+            scale?: number | undefined;
         }>>;
         freezeWhen: z.ZodOptional<z.ZodType<unknown, z.ZodTypeDef, unknown>>;
     }, "strip", z.ZodTypeAny, {
@@ -360,8 +360,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            scale?: number | undefined;
             offsetMs?: number | undefined;
+            scale?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     }, {
@@ -370,8 +370,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            scale?: number | undefined;
             offsetMs?: number | undefined;
+            scale?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     }>;
@@ -408,20 +408,20 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             }, "strip", z.ZodTypeAny, {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             }, {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             }>;
         }, "strip", z.ZodTypeAny, {
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;
@@ -433,8 +433,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;
@@ -636,8 +636,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;
@@ -683,8 +683,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;
@@ -726,8 +726,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            scale?: number | undefined;
             offsetMs?: number | undefined;
+            scale?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     };
@@ -768,8 +768,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;
@@ -805,8 +805,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
         toleranceMs: number;
         onSeek: "recompute";
         transform?: {
-            scale?: number | undefined;
             offsetMs?: number | undefined;
+            scale?: number | undefined;
         } | undefined;
         freezeWhen?: unknown;
     };
@@ -847,8 +847,8 @@ export declare const OverlaySpecSchema: z.ZodObject<{
             style: {
                 position: "center" | "bottom" | "top";
                 size: "sm" | "md" | "lg" | "xs" | "xl" | "2xl";
-                color?: string | undefined;
                 background?: "none" | "solid" | "gradient" | undefined;
+                color?: string | undefined;
             };
             segments: {
                 text: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.13.35",
+  "version": "0.13.36",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -60,8 +60,8 @@
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "@pixi/react": "^8.0.0",
-    "pixi.js": "^8.0.0"
+    "@pixi/react": "^7.0.0",
+    "pixi.js": "^7.0.0"
   },
   "peerDependenciesMeta": {
     "@pixi/react": {
@@ -72,12 +72,12 @@
     }
   },
   "devDependencies": {
-    "@pixi/react": "^8.0.0",
+    "@pixi/react": "^7.1.2",
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.48",
     "eslint": "^9.39.1",
     "next": "^14.2.0",
-    "pixi.js": "^8.0.0",
+    "pixi.js": "^7.4.2",
     "typescript": "^5.3.3"
   }
 }