@thewhateverapp/tile-sdk 0.14.2 → 0.14.4

package/dist/scene/SceneFromJson.d.ts

@@ -8,6 +8,13 @@ export interface SceneFromJsonProps extends Omit<SceneRendererProps, 'spec'> {
     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
@@ -23,5 +30,5 @@ export interface SceneFromJsonProps extends Omit<SceneRendererProps, 'spec'> {
  * }
  * ```
  */
-export declare function SceneFromJson({ json, showErrors, onEvent, ...props }: SceneFromJsonProps): React.JSX.Element;
+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 +1 @@
-{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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;CACtB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,UAAiB,EACjB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,kBAAkB,qBAuEpB"}
+{"version":3,"file":"SceneFromJson.d.ts","sourceRoot":"","sources":["../../src/scene/SceneFromJson.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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,qBAiFpB"}

package/dist/scene/SceneFromJson.js

@@ -16,7 +16,14 @@ import { SceneRenderer } from './SceneRenderer.js';
  * }
  * ```
  */
-export function SceneFromJson({ json, showErrors = true, onEvent, ...props }) {
+export function SceneFromJson({ json, showErrors = true, onEvent, container = 'tile', ...props }) {
+    // Container styles based on mode
+    const containerStyle = container === 'none'
+        ? undefined
+        : {
+            width: '100%',
+            height: container === 'page' ? '100vh' : '100%',
+        };
     // Validate the JSON
     const validationResult = React.useMemo(() => {
         try {
@@ -45,7 +52,7 @@ export function SceneFromJson({ json, showErrors = true, onEvent, ...props }) {
     // Show errors if validation failed
     if (!validationResult.valid) {
         if (showErrors) {
-            return (React.createElement("div", { style: {
+            const errorContent = (React.createElement("div", { style: {
                     width: '100%',
                     height: '100%',
                     backgroundColor: '#1a0a0a',
@@ -62,6 +69,7 @@ export function SceneFromJson({ json, showErrors = true, onEvent, ...props }) {
                         ":"),
                     " ",
                     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(', ')}`);
@@ -70,5 +78,6 @@ export function SceneFromJson({ json, showErrors = true, onEvent, ...props }) {
     if (validationResult.warnings.length > 0) {
         console.warn('Scene validation warnings:', validationResult.warnings);
     }
-    return (React.createElement(SceneRenderer, { spec: json, onEvent: onEvent, ...props }));
+    const sceneContent = (React.createElement(SceneRenderer, { spec: json, onEvent: onEvent, ...props }));
+    return containerStyle ? React.createElement("div", { style: containerStyle }, sceneContent) : sceneContent;
 }

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.4",
   "description": "SDK for building interactive tiles on The Whatever App platform",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",