@oasiz/sdk 1.5.4 → 1.5.5

package/README.md

@@ -196,11 +196,11 @@ private onGameOver(): void {
 
 ### Layout
 
-Use the runtime safe-area value instead of hardcoded top offsets. The SDK returns the top inset as **a percentage of the viewport height (0–100)**. If the host exposes CSS pixels via `window.getSafeAreaTop()` or `window.__OASIZ_SAFE_AREA_TOP__`, the SDK converts using `window.innerHeight`. The host may instead set **`window.getSafeAreaTopPercent()`** or **`window.__OASIZ_SAFE_AREA_TOP_PERCENT__`** (0–100) and that value is used directly.
+Use the runtime safe-area value instead of hardcoded top offsets. The SDK returns the top inset as **a percentage of the active viewport height (0–100)**. If the host exposes CSS pixels via `window.getSafeAreaTop()` or `window.__OASIZ_SAFE_AREA_TOP__`, the SDK converts using `window.visualViewport.height` when available, then `window.innerHeight`, then document height. The host may instead set **`window.getSafeAreaTopPercent()`** or **`window.__OASIZ_SAFE_AREA_TOP_PERCENT__`** (0–100) and that value is used directly. When no host bridge is available, the SDK falls back to CSS `env(safe-area-inset-top)` / `constant(safe-area-inset-top)`.
 
 #### `oasiz.getSafeAreaTop(): number`
 
-Returns the top inset as a percentage of viewport height (0–100). To get pixels in JavaScript, use `(getSafeAreaTop() / 100) * window.innerHeight`. In CSS, the same value matches **`vh`** units (for example `12.5vh` for 12.5% of the viewport height). Unsupported hosts return `0`.
+Returns the top inset as a percentage of viewport height (0–100). To get pixels in JavaScript, multiply by `window.visualViewport?.height || window.innerHeight`. In CSS, the same value matches **`vh`** units (for example `12.5vh` for 12.5% of the viewport height). Unsupported hosts return `0`.
 
 ```ts
 const safeTopPct = oasiz.getSafeAreaTop();

package/dist/index.cjs

@@ -1319,31 +1319,130 @@ function warnMissingBridge6(methodName) {
     );
   }
 }
-function normalizeSafeAreaTopPixels(value) {
+function toFiniteNumber(value) {
   if (typeof value !== "number" || !Number.isFinite(value)) {
+    if (typeof value !== "string") {
+      return void 0;
+    }
+    const parsed = Number.parseFloat(value.trim());
+    if (!Number.isFinite(parsed)) {
+      return void 0;
+    }
+    return parsed;
+  }
+  return value;
+}
+function clampSafeAreaTopPixels(value) {
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
     return 0;
   }
-  return Math.max(0, value);
+  return Math.max(0, numeric);
 }
 function normalizeSafeAreaTopPercent(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return 0;
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
+    return void 0;
   }
-  return Math.min(100, Math.max(0, value));
+  return Math.min(100, Math.max(0, numeric));
 }
-function viewportInnerHeight(bridge) {
-  const h = bridge.innerHeight;
-  if (typeof h !== "number" || !Number.isFinite(h) || h <= 0) {
+function getViewportHeight(bridge) {
+  const visualViewportHeight = bridge.visualViewport?.height;
+  if (typeof visualViewportHeight === "number" && Number.isFinite(visualViewportHeight) && visualViewportHeight > 0) {
+    return visualViewportHeight;
+  }
+  const innerHeight = bridge.innerHeight;
+  if (typeof innerHeight === "number" && Number.isFinite(innerHeight) && innerHeight > 0) {
+    return innerHeight;
+  }
+  const documentHeight = bridge.document?.documentElement?.clientHeight;
+  if (typeof documentHeight === "number" && Number.isFinite(documentHeight) && documentHeight > 0) {
+    return documentHeight;
+  }
+  const bodyHeight = bridge.document?.body?.clientHeight;
+  if (typeof bodyHeight === "number" && Number.isFinite(bodyHeight) && bodyHeight > 0) {
+    return bodyHeight;
+  }
+  return 0;
+}
+function readCssSafeAreaValue(bridge, cssValue) {
+  const doc = bridge.document;
+  const root = doc?.body ?? doc?.documentElement;
+  if (!doc || !root || typeof doc.createElement !== "function" || typeof root.appendChild !== "function" || typeof bridge.getComputedStyle !== "function") {
     return 0;
   }
-  return h;
+  const probe = doc.createElement("div");
+  probe.style.position = "fixed";
+  probe.style.top = "0";
+  probe.style.left = "0";
+  probe.style.width = "0";
+  probe.style.height = "0";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  probe.style.paddingTop = cssValue;
+  root.appendChild(probe);
+  try {
+    return clampSafeAreaTopPixels(bridge.getComputedStyle(probe).paddingTop);
+  } finally {
+    if (typeof probe.remove === "function") {
+      probe.remove();
+    } else {
+      probe.parentNode?.removeChild(probe);
+    }
+  }
+}
+function readCssSafeAreaTopPixels(bridge) {
+  const envPixels = readCssSafeAreaValue(bridge, "env(safe-area-inset-top)");
+  if (envPixels > 0) {
+    return envPixels;
+  }
+  return readCssSafeAreaValue(bridge, "constant(safe-area-inset-top)");
+}
+function getDevicePixelRatio(bridge) {
+  const dpr = bridge.devicePixelRatio;
+  if (typeof dpr !== "number" || !Number.isFinite(dpr) || dpr <= 0) {
+    return 1;
+  }
+  return dpr;
+}
+function roughlyEqualPixels(a, b) {
+  return Math.abs(a - b) <= 2;
+}
+function normalizeSafeAreaTopPixels(value, bridge) {
+  const pixels = clampSafeAreaTopPixels(value);
+  const cssEnvPixels = readCssSafeAreaTopPixels(bridge);
+  if (pixels <= 0) {
+    return cssEnvPixels;
+  }
+  const dpr = getDevicePixelRatio(bridge);
+  if (cssEnvPixels > 0 && dpr > 1 && roughlyEqualPixels(pixels / dpr, cssEnvPixels)) {
+    return cssEnvPixels;
+  }
+  return pixels;
 }
 function pixelsTopToPercentOfViewport(pixels, bridge) {
-  const h = viewportInnerHeight(bridge);
+  const h = getViewportHeight(bridge);
   if (h <= 0) {
     return 0;
   }
-  return normalizeSafeAreaTopPercent(pixels / h * 100);
+  return normalizeSafeAreaTopPercent(pixels / h * 100) ?? 0;
+}
+function cssSafeAreaTopPercent(bridge) {
+  return pixelsTopToPercentOfViewport(readCssSafeAreaTopPixels(bridge), bridge);
+}
+function resolvePercentValue(value, bridge) {
+  const percent = normalizeSafeAreaTopPercent(value);
+  if (typeof percent === "undefined") {
+    return void 0;
+  }
+  return percent > 0 ? percent : cssSafeAreaTopPercent(bridge);
+}
+function resolvePixelValue(value, bridge) {
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
+    return void 0;
+  }
+  return pixelsTopToPercentOfViewport(normalizeSafeAreaTopPixels(numeric, bridge), bridge);
 }
 function getSafeAreaTop() {
   const bridge = getBridgeWindow8();
@@ -1351,18 +1450,32 @@ function getSafeAreaTop() {
     return 0;
   }
   if (typeof bridge.getSafeAreaTopPercent === "function") {
-    return normalizeSafeAreaTopPercent(bridge.getSafeAreaTopPercent());
+    const percent = resolvePercentValue(bridge.getSafeAreaTopPercent(), bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__ !== "undefined") {
-    return normalizeSafeAreaTopPercent(bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__);
+    const percent = resolvePercentValue(bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__, bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.getSafeAreaTop === "function") {
-    const px = normalizeSafeAreaTopPixels(bridge.getSafeAreaTop());
-    return pixelsTopToPercentOfViewport(px, bridge);
+    const percent = resolvePixelValue(bridge.getSafeAreaTop(), bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.__OASIZ_SAFE_AREA_TOP__ !== "undefined") {
-    const px = normalizeSafeAreaTopPixels(bridge.__OASIZ_SAFE_AREA_TOP__);
-    return pixelsTopToPercentOfViewport(px, bridge);
+    const percent = resolvePixelValue(bridge.__OASIZ_SAFE_AREA_TOP__, bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
+  }
+  const cssPercent = cssSafeAreaTopPercent(bridge);
+  if (cssPercent > 0) {
+    return cssPercent;
   }
   warnMissingBridge6("getSafeAreaTop");
   return 0;

package/dist/index.js

@@ -1269,31 +1269,130 @@ function warnMissingBridge6(methodName) {
     );
   }
 }
-function normalizeSafeAreaTopPixels(value) {
+function toFiniteNumber(value) {
   if (typeof value !== "number" || !Number.isFinite(value)) {
+    if (typeof value !== "string") {
+      return void 0;
+    }
+    const parsed = Number.parseFloat(value.trim());
+    if (!Number.isFinite(parsed)) {
+      return void 0;
+    }
+    return parsed;
+  }
+  return value;
+}
+function clampSafeAreaTopPixels(value) {
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
     return 0;
   }
-  return Math.max(0, value);
+  return Math.max(0, numeric);
 }
 function normalizeSafeAreaTopPercent(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) {
-    return 0;
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
+    return void 0;
   }
-  return Math.min(100, Math.max(0, value));
+  return Math.min(100, Math.max(0, numeric));
 }
-function viewportInnerHeight(bridge) {
-  const h = bridge.innerHeight;
-  if (typeof h !== "number" || !Number.isFinite(h) || h <= 0) {
+function getViewportHeight(bridge) {
+  const visualViewportHeight = bridge.visualViewport?.height;
+  if (typeof visualViewportHeight === "number" && Number.isFinite(visualViewportHeight) && visualViewportHeight > 0) {
+    return visualViewportHeight;
+  }
+  const innerHeight = bridge.innerHeight;
+  if (typeof innerHeight === "number" && Number.isFinite(innerHeight) && innerHeight > 0) {
+    return innerHeight;
+  }
+  const documentHeight = bridge.document?.documentElement?.clientHeight;
+  if (typeof documentHeight === "number" && Number.isFinite(documentHeight) && documentHeight > 0) {
+    return documentHeight;
+  }
+  const bodyHeight = bridge.document?.body?.clientHeight;
+  if (typeof bodyHeight === "number" && Number.isFinite(bodyHeight) && bodyHeight > 0) {
+    return bodyHeight;
+  }
+  return 0;
+}
+function readCssSafeAreaValue(bridge, cssValue) {
+  const doc = bridge.document;
+  const root = doc?.body ?? doc?.documentElement;
+  if (!doc || !root || typeof doc.createElement !== "function" || typeof root.appendChild !== "function" || typeof bridge.getComputedStyle !== "function") {
     return 0;
   }
-  return h;
+  const probe = doc.createElement("div");
+  probe.style.position = "fixed";
+  probe.style.top = "0";
+  probe.style.left = "0";
+  probe.style.width = "0";
+  probe.style.height = "0";
+  probe.style.visibility = "hidden";
+  probe.style.pointerEvents = "none";
+  probe.style.paddingTop = cssValue;
+  root.appendChild(probe);
+  try {
+    return clampSafeAreaTopPixels(bridge.getComputedStyle(probe).paddingTop);
+  } finally {
+    if (typeof probe.remove === "function") {
+      probe.remove();
+    } else {
+      probe.parentNode?.removeChild(probe);
+    }
+  }
+}
+function readCssSafeAreaTopPixels(bridge) {
+  const envPixels = readCssSafeAreaValue(bridge, "env(safe-area-inset-top)");
+  if (envPixels > 0) {
+    return envPixels;
+  }
+  return readCssSafeAreaValue(bridge, "constant(safe-area-inset-top)");
+}
+function getDevicePixelRatio(bridge) {
+  const dpr = bridge.devicePixelRatio;
+  if (typeof dpr !== "number" || !Number.isFinite(dpr) || dpr <= 0) {
+    return 1;
+  }
+  return dpr;
+}
+function roughlyEqualPixels(a, b) {
+  return Math.abs(a - b) <= 2;
+}
+function normalizeSafeAreaTopPixels(value, bridge) {
+  const pixels = clampSafeAreaTopPixels(value);
+  const cssEnvPixels = readCssSafeAreaTopPixels(bridge);
+  if (pixels <= 0) {
+    return cssEnvPixels;
+  }
+  const dpr = getDevicePixelRatio(bridge);
+  if (cssEnvPixels > 0 && dpr > 1 && roughlyEqualPixels(pixels / dpr, cssEnvPixels)) {
+    return cssEnvPixels;
+  }
+  return pixels;
 }
 function pixelsTopToPercentOfViewport(pixels, bridge) {
-  const h = viewportInnerHeight(bridge);
+  const h = getViewportHeight(bridge);
   if (h <= 0) {
     return 0;
   }
-  return normalizeSafeAreaTopPercent(pixels / h * 100);
+  return normalizeSafeAreaTopPercent(pixels / h * 100) ?? 0;
+}
+function cssSafeAreaTopPercent(bridge) {
+  return pixelsTopToPercentOfViewport(readCssSafeAreaTopPixels(bridge), bridge);
+}
+function resolvePercentValue(value, bridge) {
+  const percent = normalizeSafeAreaTopPercent(value);
+  if (typeof percent === "undefined") {
+    return void 0;
+  }
+  return percent > 0 ? percent : cssSafeAreaTopPercent(bridge);
+}
+function resolvePixelValue(value, bridge) {
+  const numeric = toFiniteNumber(value);
+  if (typeof numeric === "undefined") {
+    return void 0;
+  }
+  return pixelsTopToPercentOfViewport(normalizeSafeAreaTopPixels(numeric, bridge), bridge);
 }
 function getSafeAreaTop() {
   const bridge = getBridgeWindow8();
@@ -1301,18 +1400,32 @@ function getSafeAreaTop() {
     return 0;
   }
   if (typeof bridge.getSafeAreaTopPercent === "function") {
-    return normalizeSafeAreaTopPercent(bridge.getSafeAreaTopPercent());
+    const percent = resolvePercentValue(bridge.getSafeAreaTopPercent(), bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__ !== "undefined") {
-    return normalizeSafeAreaTopPercent(bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__);
+    const percent = resolvePercentValue(bridge.__OASIZ_SAFE_AREA_TOP_PERCENT__, bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.getSafeAreaTop === "function") {
-    const px = normalizeSafeAreaTopPixels(bridge.getSafeAreaTop());
-    return pixelsTopToPercentOfViewport(px, bridge);
+    const percent = resolvePixelValue(bridge.getSafeAreaTop(), bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
   }
   if (typeof bridge.__OASIZ_SAFE_AREA_TOP__ !== "undefined") {
-    const px = normalizeSafeAreaTopPixels(bridge.__OASIZ_SAFE_AREA_TOP__);
-    return pixelsTopToPercentOfViewport(px, bridge);
+    const percent = resolvePixelValue(bridge.__OASIZ_SAFE_AREA_TOP__, bridge);
+    if (typeof percent !== "undefined") {
+      return percent;
+    }
+  }
+  const cssPercent = cssSafeAreaTopPercent(bridge);
+  if (cssPercent > 0) {
+    return cssPercent;
   }
   warnMissingBridge6("getSafeAreaTop");
   return 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oasiz/sdk",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Typed SDK for Oasiz game platform bridge APIs.",
   "type": "module",
   "main": "./dist/index.cjs",