@thewhateverapp/tile-sdk 0.14.2 → 0.14.3

package/dist/scene/SceneRenderer.d.ts

@@ -10,17 +10,20 @@ export interface SceneRendererProps {
     onEvent?: (event: string, data?: unknown) => void;
     /** Whether the scene is paused */
     paused?: boolean;
-    /** Width override (default: TILE_WIDTH) */
+    /** Fixed width (if not set, fills container responsively) */
     width?: number;
-    /** Height override (default: TILE_HEIGHT) */
+    /** 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, height, debug, }: SceneRendererProps): React.JSX.Element;
+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 +1 @@
-{"version":3,"file":"SceneRenderer.d.ts","sourceRoot":"","sources":["../../src/scene/SceneRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,2BAA2B,CAAC;AAqBrE;;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,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6BAA6B;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EAAE,SAAS,EACf,OAAO,EACP,MAAc,EACd,KAAkB,EAClB,MAAoB,EACpB,KAAa,GACd,EAAE,kBAAkB,qBA8BpB;AAuOD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"SceneRenderer.d.ts","sourceRoot":"","sources":["../../src/scene/SceneRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,KAAK,EAAE,WAAW,EAAU,MAAM,2BAA2B,CAAC;AAmDrE;;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;AAuOD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/dist/scene/SceneRenderer.js

@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect, useRef, useCallback, useMemo } from 'react';
+import React, { useEffect, useRef, useCallback, useMemo, useState } from 'react';
 import { compileScene } from '@thewhateverapp/scene-sdk';
 import { PixiGame, useGameLoop, Container } from '../pixi/index.js';
 import { SceneContext, createEntityState, createPlayerState, createCameraState, createInputState, createTimelineState, } from './SceneContext.js';
@@ -10,10 +10,42 @@ import { useComponentRunner } from './components/ComponentRunner.js';
 import { useTimelineExecutor } from './timeline/TimelineExecutor.js';
 import { useCameraController } from './camera/CameraController.js';
 import { TILE_WIDTH, TILE_HEIGHT } from '../react/PixiGame.js';
+/**
+ * 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 = TILE_WIDTH, height = TILE_HEIGHT, debug = false, }) {
+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
@@ -24,8 +56,9 @@ export function SceneRenderer({ spec: inputSpec, onEvent, paused = false, width
         }
         return 0x0a0a1a; // Default dark background
     }, [compiledSpec]);
-    return (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 })));
+    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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thewhateverapp/tile-sdk",
-  "version": "0.14.2",
+  "version": "0.14.3",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",