@thewhateverapp/tile-sdk 0.2.6 → 0.3.0

package/dist/bridge/TileBridge.d.ts

@@ -32,6 +32,7 @@ export declare class TileBridge {
     private handleConfig;
     private handleResponse;
     private handleEvent;
+    private handleNavigate;
     private sendToParent;
     /**
      * Request to navigate to full page view
@@ -49,6 +50,11 @@ export declare class TileBridge {
      * Send analytics event
      */
     trackEvent(eventName: string, data?: any): void;
+    /**
+     * Show or hide the attribution badge
+     * Useful for mobile devices (no hover) or when tile needs full attention
+     */
+    setAttributionVisible(visible: boolean): void;
     /**
      * Request clipboard write (requires user permission)
      */
@@ -100,6 +106,7 @@ export declare class TileBridge {
     private generateId;
     private isDevelopment;
     private isPreview;
+    private isInIframe;
 }
 export declare function getTileBridge(): TileBridge;
 //# 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":"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,KAAK,EAAE,MAAM,CAAC;IACd,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;AAED,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;gBAEjB,cAAc,GAAE,MAAkC;IA4B9D,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,aAAa;IAqCrB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,YAAY;IAmCpB;;OAEG;IACI,cAAc,IAAI,IAAI;IAc7B;;OAEG;IACI,cAAc,IAAI,IAAI;IAO7B;;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;;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;;OAEG;IACU,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC;IAehD,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,SAAS;CAIlB;AAKD,wBAAgB,aAAa,IAAI,UAAU,CAK1C"}
+{"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,KAAK,EAAE,MAAM,CAAC;IACd,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;AAED,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;gBAEjB,cAAc,GAAE,MAAkC;IA4B9D,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,aAAa;IAyCrB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,YAAY;IAmCpB;;OAEG;IACI,cAAc,IAAI,IAAI;IAsB7B;;OAEG;IACI,cAAc,IAAI,IAAI;IAmB7B;;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;;OAEG;IACU,YAAY,IAAI,OAAO,CAAC,UAAU,CAAC;IAehD,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,UAAU;CAGnB;AAKD,wBAAgB,aAAa,IAAI,UAAU,CAK1C"}

package/dist/bridge/TileBridge.js

@@ -76,6 +76,9 @@ 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);
@@ -106,6 +109,26 @@ 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: {} }));
+        }
+    }
     sendToParent(message) {
         if (typeof window === 'undefined' || !window.parent)
             return;
@@ -145,21 +168,37 @@ export class TileBridge {
                 ready: this.ready,
                 parentOrigin: this.parentOrigin,
                 currentOrigin: window.location.origin,
+                isInIframe: this.isInIframe(),
+            });
+        }
+        // Emit local navigation event for app to handle with Next.js router
+        this.emitEvent('navigate', { route: '/page', target: 'page' });
+        // Also send to parent if in iframe (for platform integration)
+        if (this.isInIframe()) {
+            this.sendToParent({
+                type: 'tile:navigate',
+                payload: { target: 'page' },
             });
         }
-        this.sendToParent({
-            type: 'tile:navigate',
-            payload: { target: 'page' },
-        });
     }
     /**
      * Request to navigate back to tile view (from page)
      */
     navigateToTile() {
-        this.sendToParent({
-            type: 'tile:navigate',
-            payload: { target: 'tile' },
-        });
+        if (this.isDevelopment() || this.isPreview()) {
+            console.log('[TileBridge] Requesting navigation to tile', {
+                isInIframe: this.isInIframe(),
+            });
+        }
+        // Emit local navigation event for app to handle with Next.js router
+        this.emitEvent('navigate', { route: '/tile', target: 'tile' });
+        // Also send to parent if in iframe (for platform integration)
+        if (this.isInIframe()) {
+            this.sendToParent({
+                type: 'tile:navigate',
+                payload: { target: 'tile' },
+            });
+        }
     }
     /**
      * Request to open a URL (with user confirmation)
@@ -179,6 +218,16 @@ export class TileBridge {
             payload: { event: eventName, data },
         });
     }
+    /**
+     * Show or hide the attribution badge
+     * Useful for mobile devices (no hover) or when tile needs full attention
+     */
+    setAttributionVisible(visible) {
+        this.sendToParent({
+            type: 'tile:set-attribution',
+            payload: { visible },
+        });
+    }
     /**
      * Request clipboard write (requires user permission)
      */
@@ -415,6 +464,9 @@ export class TileBridge {
         return typeof window !== 'undefined' &&
             window.location.hostname === 'api.thewhatever.app';
     }
+    isInIframe() {
+        return typeof window !== 'undefined' && window.self !== window.top;
+    }
 }
 // Singleton instance
 let bridgeInstance = null;

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export { TileProvider } from './react/TileProvider';
 export { useTile } from './react/useTile';
+export { useTileNavigation } from './react/useTileNavigation';
 export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
 export { getTileBridge, TileBridge } from './bridge/TileBridge';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAG5C,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAGnE,cAAc,SAAS,CAAC;AAGxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,6 +1,7 @@
 // React components and hooks
 export { TileProvider } from './react/TileProvider';
 export { useTile } from './react/useTile';
+export { useTileNavigation } from './react/useTileNavigation';
 export { TileContainer } from './react/TileContainer';
 export { withTile } from './react/withTile';
 // Bridge for secure communication

package/dist/react/TileProvider.d.ts

@@ -8,6 +8,7 @@ export interface TileContextValue {
     navigateToTile: () => void;
     openUrl: (url: string, target?: '_blank' | '_self') => void;
     trackEvent: (eventName: string, data?: any) => void;
+    setAttributionVisible: (visible: boolean) => void;
     storage: {
         get: (key: string) => Promise<any>;
         set: (key: string, value: any) => Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"TileProvider.d.ts","sourceRoot":"","sources":["../../src/react/TileProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAiB,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IAC5D,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpD,OAAO,EAAE;QACP,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;QACnC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KACjD,CAAC;IACF,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KACxC,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE;YAAE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;QAC5E,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;QACtD,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;CACH;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAoDrE"}
+{"version":3,"file":"TileProvider.d.ts","sourceRoot":"","sources":["../../src/react/TileProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,EAAiB,UAAU,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,UAAU,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;IAC5D,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE;QACP,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;QACnC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KACjD,CAAC;IACF,SAAS,EAAE;QACT,KAAK,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KACxC,CAAC;IACF,IAAI,EAAE;QACJ,OAAO,EAAE,CAAC,OAAO,CAAC,EAAE;YAAE,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,MAAM,CAAC,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;QAC5E,aAAa,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;QACtD,cAAc,EAAE,MAAM,OAAO,CAAC,GAAG,CAAC,CAAC;KACpC,CAAC;CACH;AAED,eAAO,MAAM,WAAW,wCAA+C,CAAC;AAExE,UAAU,iBAAiB;IACzB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,iBAAiB,qBAmDrE"}

package/dist/react/TileProvider.js

@@ -25,6 +25,7 @@ export function TileProvider({ children, fallback }) {
         navigateToTile: () => bridge.navigateToTile(),
         openUrl: (url, target) => bridge.openUrl(url, target),
         trackEvent: (eventName, data) => bridge.trackEvent(eventName, data),
+        setAttributionVisible: (visible) => bridge.setAttributionVisible(visible),
         storage: {
             get: (key) => bridge.getStorage(key),
             set: (key, value) => bridge.setStorage(key, value),
@@ -38,9 +39,8 @@ export function TileProvider({ children, fallback }) {
             getCurrentUser: () => bridge.getCurrentUser(),
         },
     };
-    // Show fallback while loading
-    if (!isReady && fallback) {
-        return React.createElement(React.Fragment, null, fallback);
-    }
-    return (React.createElement(TileContext.Provider, { value: contextValue }, children));
+    // Always render children immediately - don't wait for config
+    // This eliminates the delay before animations start
+    // Components can check isReady if they need to wait
+    return (React.createElement(TileContext.Provider, { value: contextValue }, !isReady && fallback ? fallback : children));
 }

package/dist/react/useTileNavigation.d.ts

@@ -0,0 +1,31 @@
+type AppRouterInstance = {
+    push: (href: string) => void;
+    replace: (href: string) => void;
+    back: () => void;
+};
+interface UseTileNavigationProps {
+    router: AppRouterInstance;
+    pathname: string;
+}
+/**
+ * Hook to integrate TileBridge navigation with Next.js App Router
+ *
+ * This hook listens for navigation events from TileBridge and uses
+ * Next.js router to navigate between /tile and /page routes.
+ *
+ * Usage in app/layout.tsx with Next.js hooks:
+ * ```tsx
+ * import { useRouter, usePathname } from 'next/navigation';
+ * import { useTileNavigation } from '@thewhateverapp/tile-sdk';
+ *
+ * function NavigationProvider({ children }) {
+ *   const router = useRouter();
+ *   const pathname = usePathname();
+ *   useTileNavigation({ router, pathname });
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export declare function useTileNavigation({ router, pathname }: UseTileNavigationProps): void;
+export {};
+//# sourceMappingURL=useTileNavigation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useTileNavigation.d.ts","sourceRoot":"","sources":["../../src/react/useTileNavigation.ts"],"names":[],"mappings":"AAIA,KAAK,iBAAiB,GAAG;IACvB,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,UAAU,sBAAsB;IAC9B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,sBAAsB,QA8B7E"}

package/dist/react/useTileNavigation.js

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { getTileBridge } from '../bridge/TileBridge.js';
+/**
+ * Hook to integrate TileBridge navigation with Next.js App Router
+ *
+ * This hook listens for navigation events from TileBridge and uses
+ * Next.js router to navigate between /tile and /page routes.
+ *
+ * Usage in app/layout.tsx with Next.js hooks:
+ * ```tsx
+ * import { useRouter, usePathname } from 'next/navigation';
+ * import { useTileNavigation } from '@thewhateverapp/tile-sdk';
+ *
+ * function NavigationProvider({ children }) {
+ *   const router = useRouter();
+ *   const pathname = usePathname();
+ *   useTileNavigation({ router, pathname });
+ *   return <>{children}</>;
+ * }
+ * ```
+ */
+export function useTileNavigation({ router, pathname }) {
+    const bridge = getTileBridge();
+    useEffect(() => {
+        // Listen for navigation events from TileBridge
+        const unsubscribe = bridge.on('navigate', (data) => {
+            const targetRoute = data.route;
+            if (typeof window !== 'undefined') {
+                console.log('[useTileNavigation] Navigation event received:', {
+                    targetRoute,
+                    currentPathname: pathname,
+                    target: data.target,
+                });
+            }
+            // Only navigate if we're not already on the target route
+            if (pathname !== targetRoute) {
+                console.log('[useTileNavigation] Navigating to:', targetRoute);
+                router.push(targetRoute);
+            }
+            else {
+                console.log('[useTileNavigation] Already on target route, skipping navigation');
+            }
+        });
+        // Cleanup
+        return () => {
+            unsubscribe();
+        };
+    }, [bridge, router, pathname]);
+}

package/package.json

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