@ait-co/devtools 0.1.31 → 0.1.32

package/dist/panel/index.js

@@ -35,6 +35,12 @@ const en = {
 	"env.section.safeArea": "Safe Area Insets",
 	"env.row.safeArea.top": "Top",
 	"env.row.safeArea.bottom": "Bottom",
+	"env.section.navigation": "Navigation",
+	"env.row.iosSwipeGesture": "iOS swipe-back",
+	"env.value.iosSwipeGesture.unset": "not called",
+	"env.value.iosSwipeGesture.enabled": "enabled",
+	"env.value.iosSwipeGesture.disabled": "disabled",
+	"env.hint.iosSwipeGesture": "Last value passed to setIosSwipeGestureEnabled. Switching Environment to toss lets a toss-gated guard toggle this.",
 	"env.telemetry.section": "Telemetry",
 	"env.telemetry.t0Row": "Anonymous usage signal (Tier 0)",
 	"env.telemetry.t0On": "On",
@@ -99,7 +105,7 @@ const en = {
 	"viewport.status.cssPhysical": "CSS / physical",
 	"viewport.status.safeArea": "Safe area",
 	"viewport.status.aitNavBar": "AIT nav bar",
-	"viewport.status.aitNavBarValue": "{height}px (excl. SafeArea) · {type}",
+	"viewport.status.aitNavBarValue": "{height}px → SafeArea top · {type}",
 	"viewport.orientation.autoSuffix": "{orient} (auto)",
 	"iap.section.simulator": "IAP Simulator",
 	"iap.row.nextResult": "Next Purchase Result",
@@ -186,6 +192,12 @@ const ko = {
 	"env.section.safeArea": "Safe Area Insets",
 	"env.row.safeArea.top": "Top",
 	"env.row.safeArea.bottom": "Bottom",
+	"env.section.navigation": "Navigation",
+	"env.row.iosSwipeGesture": "iOS swipe-back",
+	"env.value.iosSwipeGesture.unset": "미호출",
+	"env.value.iosSwipeGesture.enabled": "enabled",
+	"env.value.iosSwipeGesture.disabled": "disabled",
+	"env.hint.iosSwipeGesture": "setIosSwipeGestureEnabled의 마지막 호출값. Environment를 toss로 바꾸면 toss-gated 가드가 이 값을 토글합니다.",
 	"env.telemetry.section": "Telemetry",
 	"env.telemetry.t0Row": "익명 사용 신호 (Tier 0)",
 	"env.telemetry.t0On": "On",
@@ -250,7 +262,7 @@ const ko = {
 	"viewport.status.cssPhysical": "CSS / physical",
 	"viewport.status.safeArea": "Safe area",
 	"viewport.status.aitNavBar": "AIT nav bar",
-	"viewport.status.aitNavBarValue": "{height}px (excl. SafeArea) · {type}",
+	"viewport.status.aitNavBarValue": "{height}px → SafeArea top · {type}",
 	"viewport.orientation.autoSuffix": "{orient} (auto)",
 	"iap.section.simulator": "IAP Simulator",
 	"iap.row.nextResult": "Next Purchase Result",
@@ -395,6 +407,7 @@ const DEFAULT_STATE = {
 		primaryColor: "#3182F6"
 	},
 	networkStatus: "WIFI",
+	navigation: { iosSwipeGestureEnabled: null },
 	permissions: {
 		clipboard: "allowed",
 		contacts: "allowed",
@@ -416,7 +429,7 @@ const DEFAULT_STATE = {
 		accessLocation: "FINE"
 	},
 	safeAreaInsets: {
-		top: 47,
+		top: 54,
 		bottom: 34,
 		left: 0,
 		right: 0
@@ -1050,7 +1063,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.31";
+	return "0.1.32";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -1587,28 +1600,39 @@ const PANEL_STYLES = `
   }
   html.ait-viewport-framed body {
     border-radius: 36px;
+    /* Reserve the status bar strip above the WebView so the notch sits outside
+       the body (OS notch is outside the WebView; env top=0). */
+    margin-top: 74px;
     box-shadow:
       0 0 0 10px #1a1a2e,
       0 0 0 12px #3a3a5a,
       0 24px 48px rgba(0,0,0,0.5);
   }
 
-  /* Notch / Dynamic Island / punch-hole overlay (top of body) */
+  /* Notch / Dynamic Island / punch-hole — drawn in the status bar strip ABOVE
+     the WebView (negative top puts it in the reserved margin), so it never
+     overlaps the nav bar (which sits at the body's top edge). */
   .ait-notch {
     position: absolute;
-    top: 0;
     left: 50%;
     transform: translateX(-50%);
     background: #000;
     z-index: 10;
     pointer-events: none;
   }
-  .ait-notch-dynamic-island { top: 11px; width: 126px; height: 37px; border-radius: 20px; }
+  .ait-notch-dynamic-island {
+    top: -44px;
+    width: 126px; height: 37px; border-radius: 20px;
+  }
   .ait-notch-pill {
+    top: -50px;
     width: 160px; height: 30px;
     border-bottom-left-radius: 20px; border-bottom-right-radius: 20px;
   }
-  .ait-notch-punch-hole { top: 10px; width: 12px; height: 12px; border-radius: 50%; }
+  .ait-notch-punch-hole {
+    top: -40px;
+    width: 12px; height: 12px; border-radius: 50%;
+  }
 
   /* Home indicator pill (bottom of body, iPhones with safe-area bottom > 0) */
   .ait-home-indicator {
@@ -1624,12 +1648,16 @@ const PANEL_STYLES = `
     pointer-events: none;
   }
 
-  /* Apps in Toss host nav bar — sits directly below the OS status bar */
+  /* Apps in Toss host nav bar — sits at the top of the WebView (body). The OS
+     notch lives outside the WebView (env top=0), so the nav bar bottom is the
+     content's top edge; applyViewport gives body padding-top = nav bar height
+     so content starts exactly below it. */
   .ait-navbar {
     position: absolute;
+    top: 0;
     left: 0;
     right: 0;
-    height: 48px; /* AIT_NAV_BAR_HEIGHT */
+    height: 54px; /* AIT_NAV_BAR_HEIGHT_PARTNER (relay 실측) */
     background: rgba(255, 255, 255, 0.92);
     backdrop-filter: blur(8px);
     display: flex;
@@ -2590,9 +2618,20 @@ function renderEnvironmentTab() {
 		"OFFLINE",
 		"WWAN",
 		"UNKNOWN"
-	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.safeArea")), inputRow(t("env.row.safeArea.top"), String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow(t("env.row.safeArea.bottom"), String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)), buildLanguageSection(), buildTelemetrySection());
+	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.safeArea")), inputRow(t("env.row.safeArea.top"), String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow(t("env.row.safeArea.bottom"), String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)), buildNavigationSection(), buildLanguageSection(), buildTelemetrySection());
 	return container;
 }
+/**
+* Navigation 동작 관측 (read-only) — real(토스 WebView)에서 native bridge로 발화하는
+* no-op API의 마지막 호출값을 보여준다. Environment를 toss로 바꾸면 toss-gated 가드
+* (예: sdk-example `useDisableIosSwipeGestureInToss`)가 돌면서 이 값이 토글되므로,
+* "toss 진입 → 가드 실행 → 관측 가능한 state 변화" 루프를 패널에서 한눈에 확인할 수 있다.
+*/
+function buildNavigationSection() {
+	const swipe = aitState.state.navigation.iosSwipeGestureEnabled;
+	const valueText = swipe === null ? t("env.value.iosSwipeGesture.unset") : swipe ? t("env.value.iosSwipeGesture.enabled") : t("env.value.iosSwipeGesture.disabled");
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("env.section.navigation")), h("div", { className: "ait-row" }, h("label", {}, t("env.row.iosSwipeGesture")), h("span", { style: `font-family:'SF Mono','Menlo',monospace;font-size:12px;color:${swipe === null ? "#888" : "#95e6cb"}` }, valueText)), h("div", { style: "font-size:11px;color:#666;margin-top:4px" }, t("env.hint.iosSwipeGesture")));
+}
 function buildLanguageSection() {
 	const current = getLocale();
 	const select = h("select", { className: "ait-select" });
@@ -3311,13 +3350,114 @@ async function getServerTime() {
 }
 getServerTime.isSupported = () => true;
 //#endregion
+//#region src/panel/device-emulation.ts
+/**
+* 기기 preset ↔ 브라우저 특성 정합
+*
+* Viewport preset이 active일 때(`none`/`custom` 아님), 그 preset이 주장하는 기기와
+* `navigator.userAgent`·`navigator.platform`·`window.devicePixelRatio`·`screen.*`를
+* 일치시킨다. 특정 기기 frame 가상환경을 제공하는 이상 UA/DPR만 호스트 데스크톱 값으로
+* 남으면 비일관적이기 때문이다 (#190).
+*
+* 한계 — page-JS override는 **JS 읽기값만** 바꾼다. 실 CSS media query(`@media`),
+* 실제 터치 이벤트, 엔진 레벨 레이아웃은 호스트 브라우저 값이 그대로다. 픽셀/입력 단위
+* 완전 emulation이 필요하면 Chrome DevTools device-mode(또는 CDP)를 쓴다. preset이
+* `none`/`custom`이면 override를 걸지 않아 일반 dev의 호스트 환경을 건드리지 않는다.
+*
+* 구현 — 대상 속성은 setter가 없어도 `configurable: true`이므로 `Object.defineProperty`로
+* getter를 덮어쓸 수 있다. 원복을 위해 최초 override 직전의 디스크립터를 저장한다.
+*/
+/** preset id → 플랫폼. Apple 계열은 ios, 그 외(Galaxy)는 android. */
+function platformForPreset(presetId) {
+	return presetId.startsWith("iphone") || presetId.startsWith("ipad") ? "ios" : "android";
+}
+/**
+* preset + 토스 앱 버전으로 기기 프로필을 합성한다.
+*
+* UA는 표준 모바일 UA 뒤에 `AppsInToss TossApp/<appVersion>` 토큰을 붙인다 — #171
+* 실측(`AppsInToss TossApp/5.261.0`)에서 확인된 토스 WebView UA 형태.
+*
+* @param preset      portrait 기준 width/height/dpr를 가진 device preset
+* @param appVersion  `aitState.state.appVersion` (UA suffix의 버전 토큰)
+* @param landscape   true면 screen width/height를 swap
+*/
+function buildDeviceProfile(preset, appVersion, landscape) {
+	const platform = platformForPreset(preset.id);
+	const tossToken = `AppsInToss TossApp/${appVersion}`;
+	const baseUa = platform === "ios" ? "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148" : "Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36";
+	const physWidth = Math.round(preset.width * preset.dpr);
+	const physHeight = Math.round(preset.height * preset.dpr);
+	return {
+		platform,
+		userAgent: `${baseUa} ${tossToken}`,
+		navigatorPlatform: platform === "ios" ? "iPhone" : "Linux armv8l",
+		devicePixelRatio: preset.dpr,
+		screenWidth: landscape ? physHeight : physWidth,
+		screenHeight: landscape ? physWidth : physHeight
+	};
+}
+let savedDescriptors = null;
+function override(target, prop, value, saved) {
+	if (!saved.some((s) => s.target === target && s.prop === prop)) saved.push({
+		target,
+		prop,
+		descriptor: Object.getOwnPropertyDescriptor(target, prop)
+	});
+	try {
+		Object.defineProperty(target, prop, {
+			configurable: true,
+			get: () => value
+		});
+	} catch {}
+}
+/**
+* 기기 프로필을 현재 페이지의 `navigator`/`window`/`screen`에 적용한다.
+* 호출 시 직전 디스크립터를 저장하므로 `revertDeviceEmulation()`으로 원복 가능.
+*/
+function applyDeviceEmulation(profile) {
+	if (typeof navigator === "undefined" || typeof window === "undefined") return;
+	revertDeviceEmulation();
+	const saved = [];
+	override(navigator, "userAgent", profile.userAgent, saved);
+	override(navigator, "platform", profile.navigatorPlatform, saved);
+	override(window, "devicePixelRatio", profile.devicePixelRatio, saved);
+	if (typeof screen !== "undefined") {
+		override(screen, "width", profile.screenWidth, saved);
+		override(screen, "height", profile.screenHeight, saved);
+	}
+	savedDescriptors = saved;
+}
+/** `applyDeviceEmulation`이 덮어쓴 속성을 원래 디스크립터로 되돌린다. */
+function revertDeviceEmulation() {
+	if (!savedDescriptors) return;
+	for (const { target, prop, descriptor } of savedDescriptors) try {
+		if (descriptor) Object.defineProperty(target, prop, descriptor);
+		else delete target[prop];
+	} catch {}
+	savedDescriptors = null;
+}
+/**
+* Viewport state를 받아 preset이 active면 emulation 적용, 아니면 원복.
+* `applyViewport`가 매 viewport 변경마다 호출한다.
+*/
+function syncDeviceEmulation(preset, landscape) {
+	if (!preset || preset.id === "none" || preset.id === "custom") {
+		revertDeviceEmulation();
+		return;
+	}
+	const profile = buildDeviceProfile(preset, aitState.state.appVersion, landscape);
+	applyDeviceEmulation(profile);
+	if (aitState.state.platform !== profile.platform) aitState.update({ platform: profile.platform });
+}
+//#endregion
 //#region src/panel/viewport.ts
 /**
 * Viewport 시뮬레이션 유틸
 *
 * Panel에서 선택한 디바이스 프리셋을 `document.body`에 적용한다. 정적 CSS는
 * `panel/styles.ts`에 정의되어 있고 (Panel mount 시 head에 주입), 여기서는 프리셋별
-* 동적 값(width/height, navbar top offset)만 별도 `<style>` 엘리먼트로 관리한다.
+* 동적 값(width/height, 콘텐츠 push용 body padding-top)만 별도 `<style>` 엘리먼트로
+* 관리한다.
 */
 const VIEWPORT_STORAGE_KEY = "__ait_viewport";
 /** Custom width/height의 안전 상한 (CSS px). 4K + 여유. */
@@ -3329,14 +3469,27 @@ const NONE_PRESET = {
 	height: 0,
 	dpr: 1,
 	notch: "none",
-	safeAreaTop: 0,
+	notchInset: 0,
+	navBarHeight: 0,
 	safeAreaBottom: 0
 };
 /**
 * Device presets (2026). CSS viewport 크기는 실제 기기의 `window.innerWidth/innerHeight`.
 * iPhone 17 시리즈는 2025-09 출시. iPhone Air는 2026-04 출시.
 * Galaxy S26 시리즈는 2026-03-11 출시 — viewport 값은 phone-simulator.com에서 보고된
-* 측정치를 사용. safe area는 토스 호스트 환경 실측 필요 — S25 값으로 잠정.
+* 측정치를 사용.
+*
+* safe-area 모델 (devtools#190 relay 실측 반영):
+* - `notchInset` = OS 노치/status bar inset. 기기별 물리값(landscape 측면 inset + 시각
+*   노치 오버레이용). iPhone 15 Pro 실측에서 `env(safe-area-inset-top)`은 0이었으므로 이
+*   값은 portrait SDK top에는 들어가지 않는다.
+* - `navBarHeight` = 토스 호스트 nav bar 높이. partner type portrait의 SDK `top`(실측 54).
+*   호스트 chrome이라 기기 무관 — 전 preset이 `AIT_NAV_BAR_HEIGHT_PARTNER` 공유.
+* - `safeAreaBottom` = home-indicator inset. 기기별(노치 iPhone 34, 홈버튼/Android 0).
+*   iPhone 15 Pro 실측 bottom 34와 일치.
+*
+* 단, navBarHeight 54는 iOS partner에서만 실측됐다 — Android nav bar 높이와 game type
+* 미세 차이는 후속 실측 대상(현재는 같은 값을 잠정 적용).
 *
 * iPhone 17과 17 Pro는 CSS viewport / DPR / safe area가 동일 — 이는 의도이며 카피-페이스트
 * 실수가 아니다. Apple의 17 lineup은 base와 Pro의 web-relevant 스펙이 같다.
@@ -3350,9 +3503,21 @@ const VIEWPORT_PRESETS = [
 		height: 667,
 		dpr: 2,
 		notch: "none",
-		safeAreaTop: 20,
+		notchInset: 20,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
+	{
+		id: "iphone-15-pro",
+		label: "iPhone 15 Pro",
+		width: 393,
+		height: 852,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34
+	},
 	{
 		id: "iphone-16e",
 		label: "iPhone 16e",
@@ -3360,7 +3525,8 @@ const VIEWPORT_PRESETS = [
 		height: 844,
 		dpr: 3,
 		notch: "notch",
-		safeAreaTop: 47,
+		notchInset: 47,
+		navBarHeight: 54,
 		safeAreaBottom: 34
 	},
 	{
@@ -3370,7 +3536,8 @@ const VIEWPORT_PRESETS = [
 		height: 874,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
+		notchInset: 59,
+		navBarHeight: 54,
 		safeAreaBottom: 34
 	},
 	{
@@ -3380,7 +3547,8 @@ const VIEWPORT_PRESETS = [
 		height: 912,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
+		notchInset: 59,
+		navBarHeight: 54,
 		safeAreaBottom: 34
 	},
 	{
@@ -3390,7 +3558,8 @@ const VIEWPORT_PRESETS = [
 		height: 874,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
+		notchInset: 59,
+		navBarHeight: 54,
 		safeAreaBottom: 34
 	},
 	{
@@ -3400,7 +3569,8 @@ const VIEWPORT_PRESETS = [
 		height: 956,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 62,
+		notchInset: 62,
+		navBarHeight: 54,
 		safeAreaBottom: 34
 	},
 	{
@@ -3410,7 +3580,8 @@ const VIEWPORT_PRESETS = [
 		height: 773,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
+		notchInset: 32,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3420,7 +3591,8 @@ const VIEWPORT_PRESETS = [
 		height: 1040,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
+		notchInset: 32,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3430,7 +3602,8 @@ const VIEWPORT_PRESETS = [
 		height: 1040,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 40,
+		notchInset: 40,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3440,7 +3613,8 @@ const VIEWPORT_PRESETS = [
 		height: 990,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 36,
+		notchInset: 36,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3450,7 +3624,8 @@ const VIEWPORT_PRESETS = [
 		height: 870,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
+		notchInset: 32,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3460,7 +3635,8 @@ const VIEWPORT_PRESETS = [
 		height: 884,
 		dpr: 2.625,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
+		notchInset: 32,
+		navBarHeight: 54,
 		safeAreaBottom: 0
 	},
 	{
@@ -3470,7 +3646,8 @@ const VIEWPORT_PRESETS = [
 		height: 0,
 		dpr: 1,
 		notch: "none",
-		safeAreaTop: 0,
+		notchInset: 0,
+		navBarHeight: 0,
 		safeAreaBottom: 0
 	}
 ];
@@ -3511,23 +3688,30 @@ function resolveViewportSize(state) {
 	};
 }
 /**
-* 프리셋 + landscape 여부 + landscape side로부터 OS-level safe-area insets를 계산한다.
+* 프리셋 + orientation + nav bar 상태로부터 SDK `SafeAreaInsets.get()`이 반환할 insets를
+* 계산한다. iPhone 15 Pro on-device relay 실측(devtools#190)에 맞춘 모델:
 *
-* - Portrait: preset의 `safeAreaTop`, `safeAreaBottom`을 그대로 사용.
-* - Landscape iPhone(notch/Dynamic Island): 노치가 한쪽으로 가므로 `landscapeSide`에
-*   따라 left 또는 right에만 인셋을 준다 (실 기기 동작과 일치). top은 0,
-*   home-indicator는 bottom에 유지.
-* - Android punch-hole(status bar): landscape 시에도 top에 status bar가 유지된다.
+* - **Portrait top = 토스 nav bar 높이** (OS 노치가 아니다). 실측에서
+*   `env(safe-area-inset-top)` = 0, `SafeAreaInsets.get().top` = 54 였고, 그 54는 호스트
+*   nav bar다. 따라서 nav bar가 떠 있고 `partner` type일 때만 `navBarHeight`를 top에 준다.
+*   `game`(투명 오버레이, 콘텐츠 안 밀어냄) 또는 nav bar 미표시면 top = 0.
+* - **Bottom = `safeAreaBottom`** (home-indicator). 실측 34와 일치.
+* - **Landscape iPhone(notch/Dynamic Island)**: 노치가 한쪽으로 가므로 `landscapeSide`에
+*   따라 left/right 한쪽에만 `notchInset`을 준다. top은 0(landscape nav bar 거동은
+*   미실측 — portrait 모델만 확정), home-indicator는 bottom에 유지.
+* - **Android punch-hole(status bar)**: landscape에서도 top에 status bar(`notchInset`)가
+*   유지된다.
 */
-function computeSafeAreaInsets(preset, landscape, side) {
+function computeSafeAreaInsets(preset, landscape, side, navBarVisible, navBarType) {
 	if (preset.id === "none" || preset.id === "custom") return {
 		top: 0,
 		bottom: 0,
 		left: 0,
 		right: 0
 	};
+	const navBarTop = navBarVisible && navBarType === "partner" ? preset.navBarHeight : 0;
 	if (!landscape) return {
-		top: preset.safeAreaTop,
+		top: navBarTop,
 		bottom: preset.safeAreaBottom,
 		left: 0,
 		right: 0
@@ -3535,11 +3719,11 @@ function computeSafeAreaInsets(preset, landscape, side) {
 	if (preset.notch === "notch" || preset.notch === "dynamic-island") return {
 		top: 0,
 		bottom: preset.safeAreaBottom,
-		left: side === "left" ? preset.safeAreaTop : 0,
-		right: side === "right" ? preset.safeAreaTop : 0
+		left: side === "left" ? preset.notchInset : 0,
+		right: side === "right" ? preset.notchInset : 0
 	};
 	return {
-		top: preset.safeAreaTop,
+		top: preset.notchInset,
 		bottom: preset.safeAreaBottom,
 		left: 0,
 		right: 0
@@ -3548,7 +3732,7 @@ function computeSafeAreaInsets(preset, landscape, side) {
 /** viewport preset 또는 orientation이 바뀌면 safe-area insets도 자동 갱신한다. */
 function syncSafeAreaFromViewport(state) {
 	if (state.preset === "none" || state.preset === "custom") return;
-	const next = computeSafeAreaInsets(getPreset(state.preset), effectiveOrientation(state) === "landscape", state.landscapeSide);
+	const next = computeSafeAreaInsets(getPreset(state.preset), effectiveOrientation(state) === "landscape", state.landscapeSide, state.aitNavBar, state.aitNavBarType);
 	const current = aitState.state.safeAreaInsets;
 	if (current.top === next.top && current.bottom === next.bottom && current.left === next.left && current.right === next.right) return;
 	aitState.update({ safeAreaInsets: next });
@@ -3582,27 +3766,30 @@ function removeNavBarElement() {
 	removeById(NAV_BAR_ELEMENT_ID);
 }
 /**
-* Apps in Toss host nav bar 렌더. OS status bar 아래에 48px 높이로 쌓인다.
+* Apps in Toss host nav bar 렌더. OS status bar(notch) 아래에 쌓인다.
 *
 * 변형(SDK `webViewProps.type`과 의미 일치):
 * - `partner` (기본): 흰 배경, 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`),
 *   우측 `⋯` + 구분선 + `×`.
 * - `game`: 투명 배경, 게임 캔버스를 가리지 않도록 우측 `⋯` + 구분선 + `×`만.
 *
-* `env(safe-area-inset-top)`에는 이 높이가 포함되지 않으므로 (SDK 동작 확인),
-* 오버레이는 preset.safeAreaTop만큼 아래로 내려서 그린다.
+* nav bar는 WebView(body) 좌표계의 최상단(top 0)에 앉는다 — 실기기에서 OS notch는
+* WebView 밖(status bar)이라 `env(safe-area-inset-top)`이 0이고, WebView 콘텐츠 영역은
+* nav bar 바로 아래(= SDK `SafeAreaInsets.get().top` = `navBarHeight`)에서 시작한다.
+* 콘텐츠를 그만큼 밀어내는 건 `applyViewport`의 body `padding-top`이 담당하므로, nav bar
+* 바닥과 콘텐츠 시작이 정확히 맞물린다. 시각 notch 오버레이는 body 밖 위쪽(status bar
+* 영역)에 따로 그린다(`renderNotchOverlay`) — body 안이 아니다.
 *
 * 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
 * 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
 */
-function renderNavBar(preset, displayName, type) {
+function renderNavBar(displayName, type) {
 	removeNavBarElement();
 	const el = h("div", {
 		id: NAV_BAR_ELEMENT_ID,
 		className: `ait-navbar ait-navbar-${type}`,
 		"aria-hidden": "true"
 	});
-	el.style.top = `${preset.safeAreaTop}px`;
 	const moreBtn = h("button", {
 		className: "ait-navbar-btn",
 		type: "button",
@@ -3680,12 +3867,13 @@ function disposeViewport() {
 	removeNotchElement();
 	removeHomeIndicator();
 	removeNavBarElement();
+	revertDeviceEmulation();
 	bodyScrollHintEmitted = false;
 }
 /**
 * DOM에 뷰포트 제약을 적용한다.
 * - `html.ait-viewport-active` 클래스로 정적 CSS(styles.ts) 활성화
-* - body의 width/height는 preset 값으로, navbar top offset은 safeAreaTop으로 인라인 주입
+* - body의 width/height는 preset 값으로, navbar top offset은 notchInset으로 인라인 주입
 */
 function applyViewport(state) {
 	if (typeof document === "undefined") return;
@@ -3700,6 +3888,7 @@ function applyViewport(state) {
 		removeNotchElement();
 		removeHomeIndicator();
 		removeNavBarElement();
+		syncDeviceEmulation(null, false);
 		return;
 	}
 	if (!bodyScrollHintEmitted) {
@@ -3710,19 +3899,22 @@ function applyViewport(state) {
 	html.classList.toggle("ait-viewport-framed", state.frame);
 	const preset = state.preset === "custom" ? null : getPreset(state.preset);
 	const landscape = effectiveOrientation(state) === "landscape";
+	syncDeviceEmulation(preset, landscape);
+	const contentTop = preset ? computeSafeAreaInsets(preset, landscape, state.landscapeSide, state.aitNavBar, state.aitNavBarType).top : 0;
 	style.textContent = `
     html.ait-viewport-active body {
       width: ${size.width}px;
       max-width: ${size.width}px;
       min-height: ${size.height}px;
       max-height: ${size.height}px;
+      padding-top: ${contentTop}px;
     }
   `;
 	if (preset && state.frame && !landscape) renderNotchOverlay(preset);
 	else removeNotchElement();
 	if (preset && state.frame && !landscape && preset.safeAreaBottom > 0) renderHomeIndicator();
 	else removeHomeIndicator();
-	if (preset && state.aitNavBar && !landscape) renderNavBar(preset, aitState.state.brand.displayName, state.aitNavBarType);
+	if (preset && state.aitNavBar && !landscape) renderNavBar(aitState.state.brand.displayName, state.aitNavBarType);
 	else removeNavBarElement();
 }
 function isViewportPresetId(v) {
@@ -3941,13 +4133,16 @@ function renderViewportTab() {
 		const orientDisplay = vp.orientation === "auto" ? t("viewport.orientation.autoSuffix", { orient: effOrient }) : effOrient;
 		rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.cssPhysical")), h("span", { className: "ait-status-value" }, `${size.width}×${size.height}@${dpr}x | ${physW}×${physH} ${orientDisplay}`)));
 		if (preset) {
-			const insets = computeSafeAreaInsets(preset, landscape, vp.landscapeSide);
+			const insets = computeSafeAreaInsets(preset, landscape, vp.landscapeSide, vp.aitNavBar, vp.aitNavBarType);
 			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.safeArea")), h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`)));
 		}
-		if (vp.aitNavBar && !landscape) rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.aitNavBar")), h("span", { className: "ait-status-value" }, t("viewport.status.aitNavBarValue", {
-			height: 48,
-			type: vp.aitNavBarType
-		}))));
+		if (vp.aitNavBar && !landscape) {
+			const navBarTop = vp.aitNavBarType === "partner" ? preset?.navBarHeight ?? 0 : 0;
+			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.aitNavBar")), h("span", { className: "ait-status-value" }, t("viewport.status.aitNavBarValue", {
+				height: navBarTop,
+				type: vp.aitNavBarType
+			}))));
+		}
 		for (const row of rows) statusEl.appendChild(row);
 	}
 	const deviceSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("viewport.section.device")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.preset")), presetSelect), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.orientation")), orientationSelect));
@@ -4242,7 +4437,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? t("panel.editMode.on") : t("panel.editMode.off");
 		refreshPanel();
 	});
-	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.31`), closeBtn);
+	const headerRight = h("span", { style: "display:flex;align-items:center;gap:6px" }, mockBadge, h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v0.1.32`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, t("panel.title")), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of getTabs()) {
@@ -4284,7 +4479,7 @@ function mount() {
 	window.addEventListener("resize", resizeHandler);
 	aitStateUnsubscribe = aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads" || currentTab === "presets")) refreshPanel();
+			if (isOpen && (currentTab === "env" || currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads" || currentTab === "presets")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}