@thewhateverapp/tile-sdk 0.5.5 → 0.6.0

package/dist/bridge/TileBridge.d.ts

@@ -19,6 +19,11 @@ export interface TileConfig {
     theme?: 'light' | 'dark';
     debug?: boolean;
 }
+type NextRouter = {
+    push: (href: string) => void;
+    replace: (href: string) => void;
+    back: () => void;
+};
 export declare class TileBridge {
     private config;
     private messageQueue;
@@ -26,26 +31,29 @@ export declare class TileBridge {
     private eventHandlers;
     private ready;
     private parentOrigin;
-    constructor(expectedOrigin?: string);
+    private router;
+    constructor(expectedOrigin?: string, router?: NextRouter);
     private initialize;
     private handleMessage;
     private handleConfig;
     private handleResponse;
     private handleEvent;
-    private handleNavigate;
-    /**
-     * Notify parent that navigation has completed
-     */
-    private notifyNavigationComplete;
     private sendToParent;
     /**
      * Request to navigate to full page view
+     * SIMPLE & EXPLICIT: Directly navigates using Next.js router + notifies parent
      */
     navigateToPage(): void;
     /**
      * Request to navigate back to tile view (from page)
+     * SIMPLE & EXPLICIT: Directly navigates using Next.js router + notifies parent
      */
     navigateToTile(): void;
+    /**
+     * Set the Next.js router instance for navigation
+     * Call this from your app's layout/provider with the Next.js router
+     */
+    setRouter(router: NextRouter): void;
     /**
      * Request to open a URL (with user confirmation)
      */
@@ -116,5 +124,6 @@ export declare class TileBridge {
     private isInIframe;
     private isValidOrigin;
 }
-export declare function getTileBridge(): TileBridge;
+export declare function getTileBridge(router?: NextRouter): TileBridge;
+export {};
 //# sourceMappingURL=TileBridge.d.ts.map

package/dist/bridge/TileBridge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,gBAAgB,CAAmD;IAC3E,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,MAAM,CAA2B;gBAE7B,cAAc,GAAE,MAAkC,EAAE,MAAM,CAAC,EAAE,UAAU;IA6BnF,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAmCpB;;;OAGG;IACI,cAAc,IAAI,IAAI;IAuB7B;;;OAGG;IACI,cAAc,IAAI,IAAI;IAuB7B;;;OAGG;IACI,SAAS,CAAC,MAAM,EAAE,UAAU,GAAG,IAAI;IAI1C;;OAEG;IACI,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,GAAE,QAAQ,GAAG,OAAkB,GAAG,IAAI;IAOxE;;OAEG;IACI,UAAU,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI;IAOtD;;;OAGG;IACI,qBAAqB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAOpD;;OAEG;IACU,gBAAgB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IA4B1D;;OAEG;IACU,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC;IA2B/D;;OAEG;IACU,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC;IAoBlD;;OAEG;IACI,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAWzD;;OAEG;IACU,OAAO,CAAC,OAAO,CAAC,EAAE;QAC7B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;QAClB,MAAM,CAAC,EAAE,MAAM,CAAC;KACjB,GAAG,OAAO,CAAC,GAAG,CAAC;IAiChB;;OAEG;IACU,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,OAAO,CAAC;IA8B9D;;OAEG;IACU,cAAc,IAAI,OAAO,CAAC,GAAG,CAAC;IAuB3C;;OAEG;IACI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,GAAG,MAAM,IAAI;IAgBlE;;OAEG;IACI,SAAS,IAAI,UAAU,GAAG,IAAI;IAIrC;;OAEG;IACI,OAAO,IAAI,OAAO;IAIzB;;;;;OAKG;IACU,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC;IAuBhD,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;CAgCtB;AAKD,wBAAgB,aAAa,CAAC,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAQ7D"}

package/dist/bridge/TileBridge.js

@@ -3,13 +3,15 @@
  * This runs inside the iframe (tile side)
  */
 export class TileBridge {
-    constructor(expectedOrigin = 'https://thewhatever.app') {
+    constructor(expectedOrigin = 'https://thewhatever.app', router) {
         this.config = null;
         this.messageQueue = [];
         this.responseHandlers = new Map();
         this.eventHandlers = new Map();
         this.ready = false;
+        this.router = null;
         this.parentOrigin = expectedOrigin;
+        this.router = router || null;
         // Auto-detect parent origin based on environment
         if (typeof window !== 'undefined') {
             const isInIframe = window.self !== window.top;
@@ -78,9 +80,6 @@ export class TileBridge {
             case 'parent:event':
                 this.handleEvent(message);
                 break;
-            case 'parent:navigate':
-                this.handleNavigate(message.payload);
-                break;
             default:
                 // Handle custom messages
                 this.emitEvent(message.type, message.payload);
@@ -111,45 +110,6 @@ export class TileBridge {
     handleEvent(message) {
         this.emitEvent(message.payload?.type, message.payload?.data);
     }
-    handleNavigate(payload) {
-        // Parent is telling us to navigate internally using Next.js router
-        if (typeof window === 'undefined')
-            return;
-        const route = payload?.route;
-        if (!route)
-            return;
-        if (this.isDevelopment() || this.isPreview()) {
-            console.log('[TileBridge] Received navigate command:', route);
-        }
-        // Emit navigate event so the app can handle it with Next.js router
-        this.emitEvent('navigate', { route });
-        // Also try using window.location if Next.js router isn't available
-        // This is a fallback, the app should preferably use the 'navigate' event
-        if (window.location.pathname !== route) {
-            window.history.pushState({}, '', route);
-            // Trigger a popstate event to notify the app
-            window.dispatchEvent(new PopStateEvent('popstate', { state: {} }));
-        }
-        // Wait for navigation to complete, then notify parent
-        // Use requestAnimationFrame + timeout to ensure DOM has updated
-        requestAnimationFrame(() => {
-            setTimeout(() => {
-                this.notifyNavigationComplete(route);
-            }, 50); // Small delay to ensure Next.js has finished mounting
-        });
-    }
-    /**
-     * Notify parent that navigation has completed
-     */
-    notifyNavigationComplete(route) {
-        if (this.isDevelopment() || this.isPreview()) {
-            console.log('[TileBridge] 📍 Navigation complete:', route);
-        }
-        this.sendToParent({
-            type: 'tile:navigation-complete',
-            payload: { route },
-        });
-    }
     sendToParent(message) {
         if (typeof window === 'undefined' || !window.parent)
             return;
@@ -182,19 +142,24 @@ export class TileBridge {
     // Public API
     /**
      * Request to navigate to full page view
+     * SIMPLE & EXPLICIT: Directly navigates using Next.js router + notifies parent
      */
     navigateToPage() {
         if (this.isDevelopment() || this.isPreview()) {
-            console.log('[TileBridge] Requesting navigation to page', {
-                ready: this.ready,
-                parentOrigin: this.parentOrigin,
-                currentOrigin: window.location.origin,
+            console.log('[TileBridge] Navigating to /page', {
+                hasRouter: !!this.router,
                 isInIframe: this.isInIframe(),
             });
         }
-        // Emit local navigation event for app to handle with Next.js router
-        this.emitEvent('navigate', { route: '/page', target: 'page' });
-        // Always send to parent (tiles are always in iframes on the platform)
+        // 1. Navigate directly using Next.js router (if available)
+        if (this.router) {
+            this.router.push('/page');
+        }
+        else if (typeof window !== 'undefined') {
+            // Fallback: use window.location for preview mode
+            window.location.pathname = '/page';
+        }
+        // 2. Notify parent to enter fullscreen mode
         this.sendToParent({
             type: 'tile:navigate',
             payload: { target: 'page' },
@@ -202,21 +167,36 @@ export class TileBridge {
     }
     /**
      * Request to navigate back to tile view (from page)
+     * SIMPLE & EXPLICIT: Directly navigates using Next.js router + notifies parent
      */
     navigateToTile() {
         if (this.isDevelopment() || this.isPreview()) {
-            console.log('[TileBridge] Requesting navigation to tile', {
+            console.log('[TileBridge] Navigating to /tile', {
+                hasRouter: !!this.router,
                 isInIframe: this.isInIframe(),
             });
         }
-        // Emit local navigation event for app to handle with Next.js router
-        this.emitEvent('navigate', { route: '/tile', target: 'tile' });
-        // Always send to parent (tiles are always in iframes on the platform)
+        // 1. Navigate directly using Next.js router (if available)
+        if (this.router) {
+            this.router.push('/tile');
+        }
+        else if (typeof window !== 'undefined') {
+            // Fallback: use window.location for preview mode
+            window.location.pathname = '/tile';
+        }
+        // 2. Notify parent to exit fullscreen mode
         this.sendToParent({
             type: 'tile:navigate',
             payload: { target: 'tile' },
         });
     }
+    /**
+     * Set the Next.js router instance for navigation
+     * Call this from your app's layout/provider with the Next.js router
+     */
+    setRouter(router) {
+        this.router = router;
+    }
     /**
      * Request to open a URL (with user confirmation)
      */
@@ -528,9 +508,13 @@ export class TileBridge {
 }
 // Singleton instance
 let bridgeInstance = null;
-export function getTileBridge() {
+export function getTileBridge(router) {
     if (!bridgeInstance) {
-        bridgeInstance = new TileBridge();
+        bridgeInstance = new TileBridge('https://thewhatever.app', router);
+    }
+    else if (router && !bridgeInstance['router']) {
+        // Update router if provided and not already set
+        bridgeInstance.setRouter(router);
     }
     return bridgeInstance;
 }

package/package.json

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