@alien_org/react 0.2.3 → 0.2.4

package/dist/index.cjs

@@ -6,6 +6,17 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/context.tsx
 const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 const AlienContext = (0, react.createContext)(null);
+const SAFE_AREA_EDGES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function setSafeAreaCssVars(insets) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	for (const edge of SAFE_AREA_EDGES) root.style.setProperty(`--alien-safe-area-inset-${edge}`, `${insets?.[edge] ?? 0}px`);
+}
 /**
 * Provider component that initializes the Alien miniapp context.
 * Must wrap your app to use Alien hooks.
@@ -45,6 +56,7 @@ function AlienProvider({ children, autoReady = true, interceptLinks = true }) {
 			isBridgeAvailable: bridgeAvailable,
 			ready
 		});
+		setSafeAreaCssVars(launchParams?.safeAreaInsets);
 		if (!bridgeAvailable) console.warn("[@alien_org/react] Bridge is not available. Running in dev mode? The SDK will handle errors gracefully, but bridge communication will not work.");
 	}, [ready]);
 	(0, react.useEffect)(() => {

package/dist/index.d.cts

@@ -178,6 +178,16 @@ declare const PLATFORMS: readonly ["ios", "android"];
  * Platform the miniapp is running on.
  */
 type Platform = (typeof PLATFORMS)[number];
+/**
+ * Safe area insets in CSS pixels, injected by the host app.
+ * Accounts for system UI (status bar, notch, home indicator, nav bar).
+ */
+interface SafeAreaInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
 /**
  * Launch parameters injected by the host app.
  */
@@ -190,6 +200,8 @@ interface LaunchParams {
   hostAppVersion: string | undefined;
   /** Platform the miniapp is running on */
   platform: Platform | undefined;
+  /** Safe area insets for the webview in CSS pixels */
+  safeAreaInsets: SafeAreaInsets | undefined;
   /**
    * Custom start parameter injected by host app.
    * Used for referral codes, campaign tracking, or custom routing.
@@ -470,6 +482,7 @@ declare global {
     __ALIEN_CONTRACT_VERSION__?: string;
     __ALIEN_HOST_VERSION__?: string;
     __ALIEN_PLATFORM__?: string;
+    __ALIEN_SAFE_AREA_INSETS__?: SafeAreaInsets;
     __ALIEN_START_PARAM__?: string;
   }
 }

package/dist/index.d.mts

@@ -178,6 +178,16 @@ declare const PLATFORMS: readonly ["ios", "android"];
  * Platform the miniapp is running on.
  */
 type Platform = (typeof PLATFORMS)[number];
+/**
+ * Safe area insets in CSS pixels, injected by the host app.
+ * Accounts for system UI (status bar, notch, home indicator, nav bar).
+ */
+interface SafeAreaInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
 /**
  * Launch parameters injected by the host app.
  */
@@ -190,6 +200,8 @@ interface LaunchParams {
   hostAppVersion: string | undefined;
   /** Platform the miniapp is running on */
   platform: Platform | undefined;
+  /** Safe area insets for the webview in CSS pixels */
+  safeAreaInsets: SafeAreaInsets | undefined;
   /**
    * Custom start parameter injected by host app.
    * Used for referral codes, campaign tracking, or custom routing.
@@ -470,6 +482,7 @@ declare global {
     __ALIEN_CONTRACT_VERSION__?: string;
     __ALIEN_HOST_VERSION__?: string;
     __ALIEN_PLATFORM__?: string;
+    __ALIEN_SAFE_AREA_INSETS__?: SafeAreaInsets;
     __ALIEN_START_PARAM__?: string;
   }
 }

package/dist/index.mjs

@@ -6,6 +6,17 @@ import { jsx } from "react/jsx-runtime";
 //#region src/context.tsx
 const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 const AlienContext = createContext(null);
+const SAFE_AREA_EDGES = [
+	"top",
+	"right",
+	"bottom",
+	"left"
+];
+function setSafeAreaCssVars(insets) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	for (const edge of SAFE_AREA_EDGES) root.style.setProperty(`--alien-safe-area-inset-${edge}`, `${insets?.[edge] ?? 0}px`);
+}
 /**
 * Provider component that initializes the Alien miniapp context.
 * Must wrap your app to use Alien hooks.
@@ -45,6 +56,7 @@ function AlienProvider({ children, autoReady = true, interceptLinks = true }) {
 			isBridgeAvailable: bridgeAvailable,
 			ready
 		});
+		setSafeAreaCssVars(launchParams?.safeAreaInsets);
 		if (!bridgeAvailable) console.warn("[@alien_org/react] Bridge is not available. Running in dev mode? The SDK will handle errors gracefully, but bridge communication will not work.");
 	}, [ready]);
 	useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alien_org/react",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -34,8 +34,8 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@alien_org/bridge": "0.2.2",
-    "@alien_org/contract": "0.2.1"
+    "@alien_org/bridge": "0.2.3",
+    "@alien_org/contract": "0.2.2"
   },
   "peerDependencies": {
     "react": "^18 || ^19",