@ait-co/devtools 0.1.31 → 0.1.33

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",
@@ -84,6 +90,10 @@ const en = {
 	"device.prompt.label.lng": "Lng",
 	"device.prompt.send": "Send",
 	"device.prompt.cancel": "Cancel",
+	"device.section.haptic": "Haptic",
+	"device.haptic.lastCall": "Last haptic",
+	"device.haptic.noneYet": "(none yet)",
+	"device.haptic.trigger": "Trigger haptic",
 	"viewport.section.device": "Device",
 	"viewport.row.preset": "Preset",
 	"viewport.row.orientation": "Orientation",
@@ -99,7 +109,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",
@@ -119,6 +129,9 @@ const en = {
 	"events.row.tossLoginIntegrated": "Toss Login Integrated",
 	"analytics.section.log": "Analytics Log ({count})",
 	"analytics.btn.clear": "Clear",
+	"analytics.calls.section": "SDK Calls ({count})",
+	"analytics.calls.btn.clear": "Clear",
+	"analytics.calls.empty": "(no SDK calls yet)",
 	"storage.section.title": "Storage ({count} items)",
 	"storage.btn.clearAll": "Clear All",
 	"storage.empty": "No items in storage",
@@ -143,6 +156,13 @@ const en = {
 	"ads.section.fullScreenAd": "FullScreenAd",
 	"ads.btn.load": "Load",
 	"ads.btn.show": "Show",
+	"ads.section.tossAdsBanner": "TossAds Banner",
+	"ads.row.rewardUnitType": "Reward unit type",
+	"ads.row.rewardAmount": "Reward amount",
+	"ads.btn.render": "Render",
+	"ads.btn.noFill": "No-fill",
+	"ads.btn.click": "Click",
+	"ads.btn.destroy": "Destroy",
 	"notifications.section.title": "requestNotificationAgreement",
 	"notifications.option.newAgreement": "newAgreement (first-time agree)",
 	"notifications.option.alreadyAgreed": "alreadyAgreed (already opted-in)",
@@ -186,6 +206,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",
@@ -235,6 +261,10 @@ const ko = {
 	"device.prompt.label.lng": "Lng",
 	"device.prompt.send": "Send",
 	"device.prompt.cancel": "Cancel",
+	"device.section.haptic": "Haptic",
+	"device.haptic.lastCall": "마지막 haptic",
+	"device.haptic.noneYet": "(아직 없음)",
+	"device.haptic.trigger": "Haptic 트리거",
 	"viewport.section.device": "Device",
 	"viewport.row.preset": "Preset",
 	"viewport.row.orientation": "Orientation",
@@ -250,7 +280,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",
@@ -270,6 +300,9 @@ const ko = {
 	"events.row.tossLoginIntegrated": "Toss Login Integrated",
 	"analytics.section.log": "Analytics Log ({count})",
 	"analytics.btn.clear": "Clear",
+	"analytics.calls.section": "SDK Calls ({count})",
+	"analytics.calls.btn.clear": "Clear",
+	"analytics.calls.empty": "(아직 SDK 호출 없음)",
 	"storage.section.title": "Storage ({count} items)",
 	"storage.btn.clearAll": "Clear All",
 	"storage.empty": "저장된 항목이 없습니다",
@@ -294,6 +327,13 @@ const ko = {
 	"ads.section.fullScreenAd": "FullScreenAd",
 	"ads.btn.load": "Load",
 	"ads.btn.show": "Show",
+	"ads.section.tossAdsBanner": "TossAds 배너",
+	"ads.row.rewardUnitType": "리워드 단위 타입",
+	"ads.row.rewardAmount": "리워드 수량",
+	"ads.btn.render": "Render",
+	"ads.btn.noFill": "No-fill",
+	"ads.btn.click": "Click",
+	"ads.btn.destroy": "Destroy",
 	"notifications.section.title": "requestNotificationAgreement",
 	"notifications.option.newAgreement": "newAgreement (최초 동의)",
 	"notifications.option.alreadyAgreed": "alreadyAgreed (이미 동의됨)",
@@ -380,6 +420,8 @@ function t(key, vars) {
 }
 //#endregion
 //#region src/mock/state.ts
+/** SDK 호출 로그 ring buffer 상한 */
+const SDK_CALL_LOG_MAX = 200;
 const DEFAULT_STATE = {
 	platform: "ios",
 	environment: "sandbox",
@@ -395,6 +437,7 @@ const DEFAULT_STATE = {
 		primaryColor: "#3182F6"
 	},
 	networkStatus: "WIFI",
+	navigation: { iosSwipeGestureEnabled: null },
 	permissions: {
 		clipboard: "allowed",
 		contacts: "allowed",
@@ -416,7 +459,7 @@ const DEFAULT_STATE = {
 		accessLocation: "FINE"
 	},
 	safeAreaInsets: {
-		top: 47,
+		top: 54,
 		bottom: 34,
 		left: 0,
 		right: 0
@@ -456,7 +499,9 @@ const DEFAULT_STATE = {
 		isLoaded: false,
 		nextEvent: "loaded",
 		forceNoFill: false,
-		lastEvent: null
+		lastEvent: null,
+		rewardUnitType: "coins",
+		rewardAmount: 10
 	},
 	game: {
 		profile: {
@@ -466,6 +511,7 @@ const DEFAULT_STATE = {
 		leaderboardScores: []
 	},
 	analyticsLog: [],
+	sdkCallLog: [],
 	deviceModes: {
 		camera: "mock",
 		photos: "mock",
@@ -578,6 +624,19 @@ var AitStateManager = class {
 		};
 		this._notify();
 	}
+	/**
+	* SDK 호출 로그 추가 (ring buffer, 상한 SDK_CALL_LOG_MAX).
+	* `observe()`가 호출하고, proxy의 KNOWN_UNIMPLEMENTED 경로도 직접 호출한다.
+	*/
+	logSdkCall(entry) {
+		const log = this._state.sdkCallLog;
+		const next = log.length >= SDK_CALL_LOG_MAX ? log.slice(1 - SDK_CALL_LOG_MAX) : log;
+		this._state = {
+			...this._state,
+			sdkCallLog: [...next, entry]
+		};
+		this._notify();
+	}
 	/** 이벤트 트리거 (backEvent, homeEvent 등) */
 	trigger(event) {
 		window.dispatchEvent(new CustomEvent(`__ait:${event}`));
@@ -1050,7 +1109,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.31";
+	return "0.1.33";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -1587,28 +1646,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 +1694,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;
@@ -2045,6 +2119,75 @@ const _fetchContacts = async (options) => {
 };
 withPermission(_fetchContacts, "contacts");
 //#endregion
+//#region src/mock/device/haptic.ts
+/**
+* Haptic Feedback & saveBase64Data mock
+*
+* generateHapticFeedback — 영역 3 (하드웨어 API 관측):
+*   - 10종 HapticFeedbackType을 navigator.vibrate 패턴으로 매핑(근사, best-effort).
+*   - `typeof navigator.vibrate === 'function'` 가드 — API 없는 환경에서 throw 없이 skip.
+*   - sdkCallLog에 🟡(partial)로 기록. params: { hapticType, vibrated: boolean }.
+*   - 시그니처 불변 — __typecheck.ts의 Assert<Mock, Original> 통과.
+*/
+/**
+* HapticFeedbackType 10종 → navigator.vibrate 패턴 매핑.
+* 숫자: 진동 ms. 배열: [진동, 정지, 진동, …] 교대 패턴.
+*/
+const HAPTIC_VIBRATE_PATTERN = {
+	tickWeak: 10,
+	tap: 20,
+	tickMedium: 30,
+	softMedium: 40,
+	basicWeak: 15,
+	basicMedium: 50,
+	success: [
+		10,
+		40,
+		10
+	],
+	error: [
+		40,
+		30,
+		40
+	],
+	wiggle: [
+		20,
+		20,
+		20,
+		20,
+		20
+	],
+	confetti: [
+		10,
+		20,
+		10,
+		20,
+		10,
+		20,
+		10
+	]
+};
+async function generateHapticFeedback(options) {
+	const timestamp = Date.now();
+	aitState.logAnalytics({
+		type: "haptic",
+		params: { hapticType: options.type }
+	});
+	const pattern = HAPTIC_VIBRATE_PATTERN[options.type] ?? 30;
+	const vibrated = typeof navigator.vibrate === "function" ? navigator.vibrate(pattern) : false;
+	aitState.logSdkCall({
+		method: "generateHapticFeedback",
+		args: [{ type: options.type }],
+		timestamp,
+		status: "resolved",
+		result: {
+			hapticType: options.type,
+			vibrated
+		},
+		fidelity: "partial"
+	});
+}
+//#endregion
 //#region src/mock/device/location.ts
 /**
 * Location mock (getCurrentLocation, startUpdateLocation)
@@ -2156,12 +2299,35 @@ withPermission(_startUpdateLocation, "geolocation");
 * mock이 미구현인 API는 실 SDK에서는 존재할 수 있고, 사용자가 이를 인지하지
 * 못한 채 개발을 이어가면 배포 시점에 놀라게 된다. 에러 메시지에 이슈 URL을
 * 포함해 사용자가 mock 누락을 제보할 수 있게 한다.
+*
+* ## KNOWN_UNIMPLEMENTED 정책
+* SDK에 존재하는 것으로 알려져 있으나 현재 mock이 없는 API 이름만 이 집합에 둔다.
+* 이 경우에만 throw 대신 🔴 inert no-op을 반환하고 sdkCallLog에 기록한다.
+* 완전히 미지의 이름은 여전히 throw — "잘 되는 척" 방지.
 */
 const ISSUES_URL = "https://github.com/apps-in-toss-community/devtools/issues";
+/**
+* SDK에 존재하나 mock이 아직 없는 것으로 확인된 이름 목록.
+* 새 API가 SDK에 추가되면 여기에 추가하고 별도 PR에서 mock 구현으로 이동한다.
+* 확인되지 않은 이름은 절대 여기에 추가하지 않는다 — throw가 더 안전하다.
+*/
+const KNOWN_UNIMPLEMENTED = /* @__PURE__ */ new Set([]);
 function createMockProxy(moduleName, implementations) {
 	return new Proxy(implementations, { get(target, prop) {
 		if (typeof prop === "symbol") return void 0;
 		if (prop in target) return target[prop];
+		const name = String(prop);
+		if (KNOWN_UNIMPLEMENTED.has(name)) return (...args) => {
+			console.warn(`[@ait-co/devtools] ${moduleName}.${name} is known-unimplemented (🔴 inert). Returning undefined. Please file or upvote an issue: ${ISSUES_URL}`);
+			aitState.logSdkCall({
+				method: `${moduleName}.${name}`,
+				args,
+				timestamp: Date.now(),
+				status: "resolved",
+				result: void 0,
+				fidelity: "inert"
+			});
+		};
 		throw new Error(`[@ait-co/devtools] ${moduleName}.${prop} is not mocked. This API may exist in @apps-in-toss/web-framework, but devtools' mock does not cover it yet. Please file an issue: ${ISSUES_URL}`);
 	} });
 }
@@ -2369,19 +2535,127 @@ function renderDeviceTab() {
 	});
 	if (disabled) clearImagesBtn.disabled = true;
 	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("device.section.mockImages", { count: images.length })), imageGrid, h("div", { className: "ait-btn-row" }, addBtn, defaultsBtn, clearImagesBtn)));
+	container.appendChild(renderHapticSection());
 	return container;
 }
+function renderHapticSection() {
+	const lastResult = [...aitState.state.sdkCallLog].reverse().find((e) => e.method === "generateHapticFeedback")?.result;
+	const lastCallValue = lastResult ? `${lastResult.hapticType} (vibrated: ${String(lastResult.vibrated)})` : t("device.haptic.noneYet");
+	const lastCallRow = h("div", { className: "ait-row" }, h("label", {}, t("device.haptic.lastCall")), h("span", { className: "ait-value" }, lastCallValue));
+	const hapticTypes = Object.keys(HAPTIC_VIBRATE_PATTERN);
+	const triggerSection = h("div", { className: "ait-section-subtitle" }, t("device.haptic.trigger"));
+	const btnRow = h("div", { className: "ait-btn-row" }, ...hapticTypes.map((type) => {
+		const btn = h("button", {
+			className: "ait-btn-secondary",
+			"data-testid": `haptic-${type}-btn`
+		}, type);
+		btn.addEventListener("click", () => {
+			generateHapticFeedback({ type }).then(() => {
+				refreshPanel$1();
+			});
+		});
+		return btn;
+	}));
+	return h("div", {
+		className: "ait-section",
+		"data-testid": "section-haptic"
+	}, h("div", { className: "ait-section-title" }, t("device.section.haptic")), lastCallRow, triggerSection, btnRow);
+}
+//#endregion
+//#region src/mock/observe.ts
+/**
+* fn을 observe로 감싼다.
+*
+* @param apiName  - 로그에 기록할 SDK 메서드 이름 (예: `'setScreenAwakeMode'`)
+* @param fidelity - 이 mock의 fidelity grade ('faithful' | 'partial' | 'inert')
+* @param fn       - 실제 mock 구현체. 시그니처를 그대로 통과시킨다.
+* @returns fn과 동일한 타입의 래퍼 함수
+*/
+function observe(apiName, fidelity, fn) {
+	return (...args) => {
+		const timestamp = Date.now();
+		const safeArgs = args.map((a) => safeSerialize(a));
+		const result = fn(...args);
+		if (result instanceof Promise) {
+			aitState.logSdkCall({
+				method: apiName,
+				args: safeArgs,
+				timestamp,
+				status: "pending",
+				fidelity
+			});
+			result.then((value) => {
+				aitState.logSdkCall({
+					method: apiName,
+					args: safeArgs,
+					timestamp,
+					status: "resolved",
+					result: safeSerialize(value),
+					fidelity
+				});
+			}, (err) => {
+				aitState.logSdkCall({
+					method: apiName,
+					args: safeArgs,
+					timestamp,
+					status: "rejected",
+					error: err instanceof Error ? err.message : String(err),
+					fidelity
+				});
+			});
+			return result;
+		}
+		aitState.logSdkCall({
+			method: apiName,
+			args: safeArgs,
+			timestamp,
+			status: "resolved",
+			result: safeSerialize(result),
+			fidelity
+		});
+		return result;
+	};
+}
+/**
+* 값을 JSON-safe한 형태로 변환한다.
+* - null / primitive — 그대로.
+* - 함수 — `'[Function: name]'` 문자열.
+* - 기타 객체 — JSON.stringify 실패 시 `'[unserializable]'`.
+*/
+function safeSerialize(value) {
+	if (value === null || value === void 0) return value;
+	if (typeof value === "function") return `[Function: ${value.name || "anonymous"}]`;
+	if (typeof value !== "object") return value;
+	try {
+		return JSON.parse(JSON.stringify(value));
+	} catch {
+		return "[unserializable]";
+	}
+}
 //#endregion
 //#region src/mock/ads/index.ts
 /**
 * 광고 mock (GoogleAdMob, TossAds, FullScreenAd)
+*
+* 변경 이력 (#196):
+* - slot 레지스트리로 TossAds destroy/destroyAll 누수 수정 (🟡→🟢)
+* - attachBanner BannerSlotCallbacks 발화 (onAdRendered/onAdImpression/onNoFill 등)
+* - initialize onInitialized/onInitializationFailed 발화
+* - AdMob reward 파라미터화 (state.ads.rewardUnitType/rewardAmount)
+* - 모든 호출 observe()로 sdkCallLog에 기록
 */
 function withIsSupported(fn) {
 	fn.isSupported = () => true;
 	return fn;
 }
+const _slotRegistry = /* @__PURE__ */ new Map();
+let _slotCounter = 0;
+function _nextSlotId(adGroupId) {
+	_slotCounter += 1;
+	return `mock-slot-${adGroupId}-${_slotCounter}`;
+}
 const GoogleAdMob = createMockProxy("GoogleAdMob", {
-	loadAppsInTossAdMob: withIsSupported((args) => {
+	loadAppsInTossAdMob: withIsSupported(observe("GoogleAdMob.loadAppsInTossAdMob", "faithful", (args) => {
 		setTimeout(() => {
 			if (aitState.state.ads.forceNoFill) {
 				args.onError(/* @__PURE__ */ new Error("No fill"));
@@ -2394,8 +2668,8 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 			});
 		}, 200);
 		return () => {};
-	}),
-	showAppsInTossAdMob: withIsSupported((args) => {
+	})),
+	showAppsInTossAdMob: withIsSupported(observe("GoogleAdMob.showAppsInTossAdMob", "faithful", (args) => {
 		if (!aitState.state.ads.isLoaded) {
 			args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
 			return () => {};
@@ -2404,11 +2678,12 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 		setTimeout(() => args.onEvent({ type: "show" }), 100);
 		setTimeout(() => args.onEvent({ type: "impression" }), 150);
 		setTimeout(() => {
+			const { rewardUnitType, rewardAmount } = aitState.state.ads;
 			args.onEvent({
 				type: "userEarnedReward",
 				data: {
-					unitType: "coins",
-					unitAmount: 10
+					unitType: rewardUnitType,
+					unitAmount: rewardAmount
 				}
 			});
 		}, 1e3);
@@ -2417,14 +2692,18 @@ const GoogleAdMob = createMockProxy("GoogleAdMob", {
 			aitState.patch("ads", { isLoaded: false });
 		}, 1500);
 		return () => {};
-	}),
-	isAppsInTossAdMobLoaded: withIsSupported(async (_options) => aitState.state.ads.isLoaded)
+	})),
+	isAppsInTossAdMobLoaded: withIsSupported(observe("GoogleAdMob.isAppsInTossAdMobLoaded", "faithful", async (_options) => aitState.state.ads.isLoaded))
 });
-createMockProxy("TossAds", {
-	initialize: withIsSupported((_options) => {
-		console.log("[@ait-co/devtools] TossAds.initialize (mock)");
-	}),
-	attach: withIsSupported((_adGroupId, target, _options) => {
+const TossAds = createMockProxy("TossAds", {
+	initialize: withIsSupported(observe("TossAds.initialize", "partial", (options) => {
+		if (aitState.state.ads.forceNoFill) {
+			options.callbacks?.onInitializationFailed?.(/* @__PURE__ */ new Error("No fill"));
+			return;
+		}
+		options.callbacks?.onInitialized?.();
+	})),
+	attach: withIsSupported(observe("TossAds.attach", "partial", (_adGroupId, target, _options) => {
 		const el = typeof target === "string" ? document.querySelector(target) : target;
 		if (el) {
 			const placeholder = document.createElement("div");
@@ -2432,21 +2711,76 @@ createMockProxy("TossAds", {
 			placeholder.textContent = "[@ait-co/devtools] TossAds Placeholder";
 			el.appendChild(placeholder);
 		}
-	}),
-	attachBanner: withIsSupported((_adGroupId, target, _options) => {
+	})),
+	attachBanner: withIsSupported(observe("TossAds.attachBanner", "faithful", (adGroupId, target, options) => {
 		const el = typeof target === "string" ? document.querySelector(target) : target;
+		const slotId = _nextSlotId(adGroupId);
+		const placeholder = document.createElement("div");
+		const theme = options?.theme ?? "auto";
+		const variant = options?.variant ?? "card";
+		const isDark = theme === "dark" || theme === "auto" && typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+		const bg = isDark ? "#1a1a1a" : "#f0f0f0";
+		const textColor = isDark ? "#aaa" : "#666";
+		const borderColor = isDark ? "#555" : "#999";
+		const height = variant === "expanded" ? "120px" : "60px";
+		placeholder.dataset.aitSlotId = slotId;
+		placeholder.style.cssText = `background:${bg};border:1px dashed ${borderColor};padding:8px 12px;text-align:center;color:${textColor};font-size:12px;min-height:${height};display:flex;align-items:center;justify-content:center;`;
+		placeholder.textContent = `[@ait-co/devtools] Banner Ad (${variant})`;
 		if (el) {
-			const placeholder = document.createElement("div");
-			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:12px;text-align:center;color:#666;font-size:12px;";
-			placeholder.textContent = "[@ait-co/devtools] Banner Ad Placeholder";
 			el.appendChild(placeholder);
+			_slotRegistry.set(slotId, placeholder);
 		}
-		return { destroy: () => {} };
-	}),
-	destroy: withIsSupported((_slotId) => {}),
-	destroyAll: withIsSupported(() => {})
+		const destroySlot = () => {
+			const registered = _slotRegistry.get(slotId);
+			if (registered) {
+				registered.remove();
+				_slotRegistry.delete(slotId);
+			}
+		};
+		setTimeout(() => {
+			if (aitState.state.ads.forceNoFill) {
+				options?.callbacks?.onNoFill?.({
+					slotId,
+					adGroupId,
+					adMetadata: {}
+				});
+				options?.callbacks?.onAdFailedToRender?.({
+					slotId,
+					adGroupId,
+					adMetadata: {},
+					error: {
+						code: 0,
+						message: "No fill"
+					}
+				});
+				return;
+			}
+			const eventPayload = {
+				slotId,
+				adGroupId,
+				adMetadata: {
+					creativeId: `mock-creative-${slotId}`,
+					requestId: `mock-req-${slotId}`
+				}
+			};
+			options?.callbacks?.onAdRendered?.(eventPayload);
+			options?.callbacks?.onAdImpression?.(eventPayload);
+		}, 100);
+		return { destroy: destroySlot };
+	})),
+	destroy: withIsSupported(observe("TossAds.destroy", "faithful", (slotId) => {
+		const el = _slotRegistry.get(slotId);
+		if (el) {
+			el.remove();
+			_slotRegistry.delete(slotId);
+		}
+	})),
+	destroyAll: withIsSupported(observe("TossAds.destroyAll", "faithful", () => {
+		for (const el of _slotRegistry.values()) el.remove();
+		_slotRegistry.clear();
+	}))
 });
-const loadFullScreenAd = withIsSupported((args) => {
+const loadFullScreenAd = withIsSupported(observe("loadFullScreenAd", "faithful", (args) => {
 	setTimeout(() => {
 		if (aitState.state.ads.forceNoFill) {
 			args.onError(/* @__PURE__ */ new Error("No fill"));
@@ -2459,8 +2793,8 @@ const loadFullScreenAd = withIsSupported((args) => {
 		});
 	}, 200);
 	return () => {};
-});
-const showFullScreenAd = withIsSupported((args) => {
+}));
+const showFullScreenAd = withIsSupported(observe("showFullScreenAd", "faithful", (args) => {
 	if (!aitState.state.ads.isLoaded) {
 		args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
 		return () => {};
@@ -2468,7 +2802,7 @@ const showFullScreenAd = withIsSupported((args) => {
 	setTimeout(() => args.onEvent({ type: "show" }), 100);
 	setTimeout(() => args.onEvent({ type: "dismissed" }), 1500);
 	return () => {};
-});
+}));
 //#endregion
 //#region src/panel/tabs/ads.ts
 function recordEvent(type) {
@@ -2503,6 +2837,57 @@ function adSection(title, onLoad, onShow, disabled) {
 	showBtn.addEventListener("click", onShow);
 	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title), h("div", { className: "ait-btn-row" }, loadBtn, showBtn));
 }
+/** TossAds 배너 인터랙티브 섹션 — Render/No-fill/Click/Destroy 버튼 */
+function tossAdsBannerSection(disabled) {
+	const mountTarget = h("div", { style: "min-height:60px;background:#111;border-radius:4px;margin-bottom:6px;overflow:hidden;" });
+	const renderBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.render"));
+	const noFillBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.noFill"));
+	const clickBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.click"));
+	const destroyBtn = h("button", { className: "ait-btn ait-btn-sm" }, t("ads.btn.destroy"));
+	if (disabled) {
+		renderBtn.disabled = true;
+		noFillBtn.disabled = true;
+		clickBtn.disabled = true;
+		destroyBtn.disabled = true;
+	}
+	let currentHandle = null;
+	renderBtn.addEventListener("click", () => {
+		currentHandle?.destroy();
+		currentHandle = null;
+		mountTarget.innerHTML = "";
+		currentHandle = TossAds.attachBanner("mock-banner-group", mountTarget, {
+			theme: "auto",
+			variant: "card",
+			callbacks: {
+				onAdRendered: (p) => recordEvent(`onAdRendered(${p.slotId})`),
+				onAdImpression: (p) => recordEvent(`onAdImpression(${p.slotId})`),
+				onAdClicked: (p) => recordEvent(`onAdClicked(${p.slotId})`),
+				onAdFailedToRender: (p) => recordEvent(`error: onAdFailedToRender(${p.slotId})`),
+				onNoFill: (p) => recordEvent(`error: onNoFill(${p.slotId})`)
+			}
+		});
+	});
+	noFillBtn.addEventListener("click", () => {
+		currentHandle?.destroy();
+		currentHandle = null;
+		mountTarget.innerHTML = "";
+		const slotId = `mock-slot-no-fill-${Date.now()}`;
+		recordEvent(`error: onNoFill(${slotId})`);
+		recordEvent(`error: onAdFailedToRender(${slotId})`);
+	});
+	clickBtn.addEventListener("click", () => {
+		recordEvent("banner:clicked");
+	});
+	destroyBtn.addEventListener("click", () => {
+		if (currentHandle) {
+			currentHandle.destroy();
+			currentHandle = null;
+			mountTarget.innerHTML = "";
+			recordEvent("banner:destroyed");
+		} else recordError("No banner to destroy");
+	});
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.tossAdsBanner")), mountTarget, h("div", { className: "ait-btn-row" }, renderBtn, noFillBtn, clickBtn, destroyBtn));
+}
 function renderAdsTab() {
 	const s = aitState.state;
 	const disabled = !s.panelEditable;
@@ -2517,7 +2902,10 @@ function renderAdsTab() {
 	forceNoFillCb.addEventListener("change", () => {
 		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.state")), statusRow(t("ads.row.isLoaded"), String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, t("ads.row.forceNoFill")), forceNoFillCb), lastEventLine()), adSection(t("ads.section.googleAdMob"), () => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("ads.section.state")), statusRow(t("ads.row.isLoaded"), String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, t("ads.row.forceNoFill")), forceNoFillCb), inputRow(t("ads.row.rewardUnitType"), s.ads.rewardUnitType, (v) => aitState.patch("ads", { rewardUnitType: v }), disabled), inputRow(t("ads.row.rewardAmount"), String(s.ads.rewardAmount), (v) => {
+		const n = Number(v);
+		if (!Number.isNaN(n)) aitState.patch("ads", { rewardAmount: n });
+	}, disabled), lastEventLine()), adSection(t("ads.section.googleAdMob"), () => {
 		GoogleAdMob.loadAppsInTossAdMob({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -2528,12 +2916,13 @@ function renderAdsTab() {
 			onError: (err) => recordError(err.message)
 		});
 	}, disabled), adSection(t("ads.section.tossAds"), () => {
-		if (aitState.state.ads.forceNoFill) {
-			recordError("No fill");
-			return;
-		}
-		aitState.patch("ads", { isLoaded: true });
-		recordEvent("loaded");
+		TossAds.initialize({ callbacks: {
+			onInitialized: () => {
+				aitState.patch("ads", { isLoaded: true });
+				recordEvent("loaded");
+			},
+			onInitializationFailed: (err) => recordError(err.message)
+		} });
 	}, () => {
 		if (!aitState.state.ads.isLoaded) {
 			recordError("Ad not loaded");
@@ -2544,7 +2933,7 @@ function renderAdsTab() {
 			recordEvent("dismissed");
 			aitState.patch("ads", { isLoaded: false });
 		}, 1500);
-	}, disabled), adSection(t("ads.section.fullScreenAd"), () => {
+	}, disabled), tossAdsBannerSection(disabled), adSection(t("ads.section.fullScreenAd"), () => {
 		loadFullScreenAd({
 			onEvent: (e) => recordEvent(e.type),
 			onError: (err) => recordError(err.message)
@@ -2559,19 +2948,37 @@ function renderAdsTab() {
 }
 //#endregion
 //#region src/panel/tabs/analytics.ts
+const FIDELITY_BADGE = {
+	faithful: "🟢",
+	partial: "🟡",
+	inert: "🔴"
+};
 function renderAnalyticsTab() {
 	const disabled = !aitState.state.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
 	const logs = aitState.state.analyticsLog;
-	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.btn.clear"));
-	if (disabled) clearBtn.disabled = true;
-	clearBtn.addEventListener("click", () => {
+	const clearAnalyticsBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.btn.clear"));
+	if (disabled) clearAnalyticsBtn.disabled = true;
+	clearAnalyticsBtn.addEventListener("click", () => {
 		aitState.update({ analyticsLog: [] });
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.section.log", { count: logs.length })), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.section.log", { count: logs.length })), clearAnalyticsBtn), ...logs.slice(-30).reverse().map((entry) => {
 		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString()), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
 	})));
+	const calls = aitState.state.sdkCallLog;
+	const clearCallsBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, t("analytics.calls.btn.clear"));
+	if (disabled) clearCallsBtn.disabled = true;
+	clearCallsBtn.addEventListener("click", () => {
+		aitState.update({ sdkCallLog: [] });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, t("analytics.calls.section", { count: calls.length })), clearCallsBtn), calls.length === 0 ? h("div", { className: "ait-log-entry ait-log-empty" }, t("analytics.calls.empty")) : h("div", {}, ...calls.slice(-50).reverse().map((call) => {
+		const badge = FIDELITY_BADGE[call.fidelity] ?? "⬜";
+		const time = new Date(call.timestamp).toLocaleTimeString();
+		const argsStr = call.args.length > 0 ? `(${call.args.map((a) => JSON.stringify(a)).join(", ")})` : "()";
+		const statusSuffix = call.status === "rejected" ? ` ✗ ${call.error ?? "error"}` : call.status === "pending" ? " …" : "";
+		return h("div", { className: `ait-log-entry ait-sdk-call ait-sdk-call-${call.fidelity}` }, h("span", { className: "ait-log-badge" }, badge), h("span", { className: "ait-log-method" }, call.method), h("span", { className: "ait-log-args" }, argsStr), h("span", { className: "ait-log-time" }, ` · ${time}`), statusSuffix ? h("span", { className: "ait-log-status" }, statusSuffix) : "");
+	}))));
 	return container;
 }
 //#endregion
@@ -2590,9 +2997,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" });
@@ -3302,22 +3720,131 @@ async function closeView() {
 	console.log("[@ait-co/devtools] closeView called");
 	window.history.back();
 }
-async function requestReview() {
+observe("setScreenAwakeMode", "inert", async (options) => {
+	console.log("[@ait-co/devtools] setScreenAwakeMode:", options.enabled);
+	return { enabled: options.enabled };
+});
+observe("setSecureScreen", "inert", async (options) => {
+	console.log("[@ait-co/devtools] setSecureScreen:", options.enabled);
+	return { enabled: options.enabled };
+});
+const requestReview = observe("requestReview", "inert", async () => {
 	console.log("[@ait-co/devtools] requestReview called");
-}
+});
 requestReview.isSupported = () => true;
 async function getServerTime() {
 	return Date.now();
 }
 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,17 +3856,51 @@ const NONE_PRESET = {
 	height: 0,
 	dpr: 1,
 	notch: "none",
-	safeAreaTop: 0,
+	notchInset: 0,
+	navBarHeight: 0,
+	safeAreaBottom: 0
+};
+const CUSTOM_PRESET = {
+	id: "custom",
+	label: "Custom",
+	width: 0,
+	height: 0,
+	dpr: 1,
+	notch: "none",
+	notchInset: 0,
+	navBarHeight: 0,
 	safeAreaBottom: 0
 };
+/** Shorthands used when building preset provenance entries. */
+const EXTRAPOLATED = { source: "extrapolated" };
+const PLACEHOLDER = { source: "placeholder" };
 /**
 * 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 스펙이 같다.
+*
+* safeAreaProvenance: 각 preset의 safe-area 값 신뢰도 출처.
+* - `measured` — relay 실기기 세션(measure_safe_area)으로 직접 확인한 값.
+*   현재 iPhone 15 Pro portrait iOS partner만 해당 (devtools#190).
+* - `extrapolated` — Apple 스펙/같은 시리즈 기기에서 유추한 값.
+* - `placeholder` — 연결 기기 없이 추정한 값. QA ground truth로 쓰지 말 것.
+*   `measure_safe_area` MCP 툴로 relay 세션에서 `measured`로 승급 필요.
 */
 const VIEWPORT_PRESETS = [
 	NONE_PRESET,
@@ -3350,8 +3911,26 @@ const VIEWPORT_PRESETS = [
 		height: 667,
 		dpr: 2,
 		notch: "none",
-		safeAreaTop: 20,
-		safeAreaBottom: 0
+		notchInset: 20,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-15-pro",
+		label: "iPhone 15 Pro",
+		width: 393,
+		height: 852,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: {
+			source: "measured",
+			device: "iPhone 15 Pro",
+			date: "2026-05-25"
+		}
 	},
 	{
 		id: "iphone-16e",
@@ -3360,8 +3939,10 @@ const VIEWPORT_PRESETS = [
 		height: 844,
 		dpr: 3,
 		notch: "notch",
-		safeAreaTop: 47,
-		safeAreaBottom: 34
+		notchInset: 47,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17",
@@ -3370,8 +3951,10 @@ const VIEWPORT_PRESETS = [
 		height: 874,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
-		safeAreaBottom: 34
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-air",
@@ -3380,8 +3963,10 @@ const VIEWPORT_PRESETS = [
 		height: 912,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
-		safeAreaBottom: 34
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17-pro",
@@ -3390,8 +3975,10 @@ const VIEWPORT_PRESETS = [
 		height: 874,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 59,
-		safeAreaBottom: 34
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "iphone-17-pro-max",
@@ -3400,8 +3987,10 @@ const VIEWPORT_PRESETS = [
 		height: 956,
 		dpr: 3,
 		notch: "dynamic-island",
-		safeAreaTop: 62,
-		safeAreaBottom: 34
+		notchInset: 62,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
 	},
 	{
 		id: "galaxy-s26",
@@ -3410,8 +3999,10 @@ const VIEWPORT_PRESETS = [
 		height: 773,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
-		safeAreaBottom: 0
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-s26-plus",
@@ -3420,8 +4011,10 @@ const VIEWPORT_PRESETS = [
 		height: 1040,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
-		safeAreaBottom: 0
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-s26-ultra",
@@ -3430,8 +4023,10 @@ const VIEWPORT_PRESETS = [
 		height: 1040,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 40,
-		safeAreaBottom: 0
+		notchInset: 40,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-flip7",
@@ -3440,8 +4035,10 @@ const VIEWPORT_PRESETS = [
 		height: 990,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 36,
-		safeAreaBottom: 0
+		notchInset: 36,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-fold7-folded",
@@ -3450,8 +4047,10 @@ const VIEWPORT_PRESETS = [
 		height: 870,
 		dpr: 3,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
-		safeAreaBottom: 0
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
 	{
 		id: "galaxy-z-fold7-unfolded",
@@ -3460,19 +4059,12 @@ const VIEWPORT_PRESETS = [
 		height: 884,
 		dpr: 2.625,
 		notch: "punch-hole-center",
-		safeAreaTop: 32,
-		safeAreaBottom: 0
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
 	},
-	{
-		id: "custom",
-		label: "Custom",
-		width: 0,
-		height: 0,
-		dpr: 1,
-		notch: "none",
-		safeAreaTop: 0,
-		safeAreaBottom: 0
-	}
+	CUSTOM_PRESET
 ];
 function getPreset(id) {
 	return VIEWPORT_PRESETS.find((p) => p.id === id) ?? NONE_PRESET;
@@ -3511,23 +4103,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 +4134,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 +4147,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 +4181,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 +4282,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 +4303,7 @@ function applyViewport(state) {
 		removeNotchElement();
 		removeHomeIndicator();
 		removeNavBarElement();
+		syncDeviceEmulation(null, false);
 		return;
 	}
 	if (!bodyScrollHintEmitted) {
@@ -3710,19 +4314,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) {
@@ -3823,6 +4430,24 @@ function initViewport() {
 }
 //#endregion
 //#region src/panel/tabs/viewport.ts
+/**
+* Renders a small inline provenance badge for safe-area values.
+* - `measured`     — no badge (confirmed value)
+* - `extrapolated` — "(추정치)" in muted gray
+* - `placeholder`  — "(미측정)" in amber
+*/
+function provenanceBadge(provenance) {
+	if (!provenance || provenance.source === "measured") return null;
+	const text = provenance.source === "placeholder" ? "(미측정)" : "(추정치)";
+	const color = provenance.source === "placeholder" ? "#b45309" : "#888";
+	const badge = h("span", {
+		className: "ait-provenance-badge",
+		title: provenance.source === "placeholder" ? "safe-area 값이 미실측 추정치입니다. relay 세션에서 measure_safe_area로 실측 후 승급하세요." : "safe-area 값이 기기 스펙에서 유추한 추정치입니다. relay 세션에서 measure_safe_area로 확인하세요."
+	});
+	badge.textContent = text;
+	badge.style.cssText = `font-size:10px;color:${color};margin-left:4px`;
+	return badge;
+}
 function renderViewportTab() {
 	const s = aitState.state;
 	const vp = s.viewport;
@@ -3941,13 +4566,19 @@ 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);
-			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}`)));
+			const insets = computeSafeAreaInsets(preset, landscape, vp.landscapeSide, vp.aitNavBar, vp.aitNavBarType);
+			const safeAreaValueEl = h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`);
+			const badge = provenanceBadge(preset.safeAreaProvenance);
+			if (badge) safeAreaValueEl.appendChild(badge);
+			rows.push(h("div", { className: "ait-status-row" }, h("span", {}, t("viewport.status.safeArea")), safeAreaValueEl));
+		}
+		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
+			}))));
 		}
-		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
-		}))));
 		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 +4873,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.33`), 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 +4915,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);
 		}