@thewhateverapp/tile-sdk 0.17.0 → 0.17.1

package/dist/react/index.d.ts

@@ -2,6 +2,7 @@ export { TileProvider, TileContext } from './TileProvider.js';
 export type { TileContextValue } from './TileProvider.js';
 export { useTile } from './useTile.js';
 export { useKeyboard } from './useKeyboard.js';
+export { useViewport } from './useViewport.js';
 export { TileContainer } from './TileContainer.js';
 export { withTile } from './withTile.js';
 export * from './overlay/index.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC9D,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQzC,cAAc,oBAAoB,CAAC"}

package/dist/react/index.js

@@ -2,6 +2,7 @@
 export { TileProvider, TileContext } from './TileProvider.js';
 export { useTile } from './useTile.js';
 export { useKeyboard } from './useKeyboard.js';
+export { useViewport } from './useViewport.js';
 export { TileContainer } from './TileContainer.js';
 export { withTile } from './withTile.js';
 // TileInitializer removed - router should be injected directly into TileProvider

package/dist/react/useViewport.d.ts

@@ -0,0 +1,14 @@
+export interface SafeAreaInsets {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface ViewportInfo {
+    width: number;
+    height: number;
+    safeAreaInsets: SafeAreaInsets;
+    isVisualViewport: boolean;
+}
+export declare function useViewport(): ViewportInfo;
+//# sourceMappingURL=useViewport.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useViewport.d.ts","sourceRoot":"","sources":["../../src/react/useViewport.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,cAAc,EAAE,cAAc,CAAC;IAC/B,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAyDD,wBAAgB,WAAW,IAAI,YAAY,CAwB1C"}

package/dist/react/useViewport.js

@@ -0,0 +1,69 @@
+import { useEffect, useState } from 'react';
+const defaultInsets = { top: 0, right: 0, bottom: 0, left: 0 };
+function readSafeAreaInsets() {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return defaultInsets;
+    }
+    if (!document.body) {
+        return defaultInsets;
+    }
+    const probe = document.createElement('div');
+    probe.style.cssText = [
+        'position:fixed',
+        'top:0',
+        'left:0',
+        'right:0',
+        'bottom:0',
+        'padding-top:env(safe-area-inset-top)',
+        'padding-right:env(safe-area-inset-right)',
+        'padding-bottom:env(safe-area-inset-bottom)',
+        'padding-left:env(safe-area-inset-left)',
+        'pointer-events:none',
+        'visibility:hidden'
+    ].join(';');
+    document.body.appendChild(probe);
+    const style = window.getComputedStyle(probe);
+    const insets = {
+        top: Number.parseFloat(style.paddingTop) || 0,
+        right: Number.parseFloat(style.paddingRight) || 0,
+        bottom: Number.parseFloat(style.paddingBottom) || 0,
+        left: Number.parseFloat(style.paddingLeft) || 0,
+    };
+    document.body.removeChild(probe);
+    return insets;
+}
+function getViewportInfo() {
+    if (typeof window === 'undefined') {
+        return { width: 0, height: 0, safeAreaInsets: defaultInsets, isVisualViewport: false };
+    }
+    const visual = window.visualViewport;
+    const width = visual?.width ?? window.innerWidth;
+    const height = visual?.height ?? window.innerHeight;
+    return {
+        width,
+        height,
+        safeAreaInsets: readSafeAreaInsets(),
+        isVisualViewport: Boolean(visual),
+    };
+}
+export function useViewport() {
+    const [info, setInfo] = useState(() => getViewportInfo());
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const update = () => setInfo(getViewportInfo());
+        const visual = window.visualViewport;
+        update();
+        window.addEventListener('resize', update);
+        window.addEventListener('orientationchange', update);
+        visual?.addEventListener('resize', update);
+        visual?.addEventListener('scroll', update);
+        return () => {
+            window.removeEventListener('resize', update);
+            window.removeEventListener('orientationchange', update);
+            visual?.removeEventListener('resize', update);
+            visual?.removeEventListener('scroll', update);
+        };
+    }, []);
+    return info;
+}

package/package.json

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