@thewhateverapp/tile-sdk 0.14.7 → 0.14.9

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,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"}
+{"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"}

package/dist/scene/SceneFromJson.js

@@ -1,7 +1,6 @@
 'use client';
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { validateScene } from '@thewhateverapp/scene-sdk';
-import { SceneRenderer } from './SceneRenderer.js';
 /**
  * SceneFromJson - Renders a scene from a JSON object with validation
  *
@@ -17,6 +16,30 @@ import { SceneRenderer } from './SceneRenderer.js';
  * ```
  */
 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) => {
+        // 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
@@ -25,7 +48,7 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
             height: container === 'page' ? '100vh' : '100%',
         };
     // Validate the JSON
-    const validationResult = React.useMemo(() => {
+    const validationResult = useMemo(() => {
         try {
             return validateScene(json);
         }
@@ -38,7 +61,7 @@ export function SceneFromJson({ json, showErrors = true, onEvent, container = 't
         }
     }, [json]);
     // Report validation errors to agent for correction
-    React.useEffect(() => {
+    useEffect(() => {
         if (!validationResult.valid) {
             const errorMessage = `Scene Validation Errors:\n${validationResult.errors
                 .map((e) => `${e.path}: ${e.message}`)
@@ -49,6 +72,20 @@ 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) {
@@ -75,9 +112,13 @@ 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) {
+    if (validationResult.warnings.length > 0 && isClient) {
         console.warn('Scene validation warnings:', validationResult.warnings);
     }
-    const sceneContent = (React.createElement(SceneRenderer, { spec: json, onEvent: onEvent, ...props }));
+    // 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;
 }

package/package.json

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