@ait-co/devtools 0.1.73 → 0.1.75

package/dist/panel/index.js

@@ -25378,6 +25378,9 @@ const en = {
 	"dashboard.pages.empty": "No attached pages",
 	"dashboard.url.copy": "Copy",
 	"dashboard.url.copied": "Copied",
+	"dashboard.inspector.section": "Inspector",
+	"dashboard.inspector.open": "Open inspector",
+	"dashboard.inspector.waiting": "Inspector URL pending — appears after a page attaches",
 	"attach.title": "AIT Debug Session — QR Scan",
 	"attach.deployment": "deployment: {label}",
 	"attach.steps.section": "How to scan",
@@ -25421,6 +25424,7 @@ const en = {
 	"launcher.diagNo": "no",
 	"launcher.letterboxDetected": "Display area is {pt}pt short — likely an iOS standalone letterbox. Removing and re-adding the launcher to the home screen may fix it.",
 	"launcher.navbar.defaultTitle": "Mini App",
+	"launcher.navbar.back": "Back",
 	"launcher.navbar.menu": "Menu",
 	"launcher.navbar.close": "Close",
 	"launcher.navbar.menuRescan": "Rescan",
@@ -25610,6 +25614,9 @@ const ko = {
 	"dashboard.pages.empty": "attach된 페이지 없음",
 	"dashboard.url.copy": "복사",
 	"dashboard.url.copied": "복사됨",
+	"dashboard.inspector.section": "인스펙터",
+	"dashboard.inspector.open": "인스펙터 열기",
+	"dashboard.inspector.waiting": "인스펙터 URL 대기 중 (페이지 attach 후 표시됩니다)",
 	"attach.title": "AIT 디버그 세션 — QR 스캔",
 	"attach.deployment": "deployment: {label}",
 	"attach.steps.section": "스캔 절차",
@@ -25653,6 +25660,7 @@ const ko = {
 	"launcher.diagNo": "아니요",
 	"launcher.letterboxDetected": "표시 영역이 {pt}pt 부족합니다 — iOS standalone letterbox로 보입니다. 런처를 홈 화면에서 제거 후 다시 설치하면 해소될 수 있어요.",
 	"launcher.navbar.defaultTitle": "미니앱",
+	"launcher.navbar.back": "뒤로가기",
 	"launcher.navbar.menu": "메뉴",
 	"launcher.navbar.close": "닫기",
 	"launcher.navbar.menuRescan": "다시 스캔",
@@ -26482,7 +26490,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.73";
+	return "0.1.75";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -29006,822 +29014,6 @@ function syncDeviceEmulation(preset, 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)만 별도 `<style>` 엘리먼트로 관리한다.
-*
-* body `padding-top`은 주입하지 않는다: 실기기에서 토스 native nav bar는 WebView viewport
-* 밖이라 콘텐츠는 top=0부터 시작한다(devtools#275).
-*/
-const VIEWPORT_STORAGE_KEY = "__ait_viewport";
-/** Custom width/height의 안전 상한 (CSS px). 4K + 여유. */
-const VIEWPORT_CUSTOM_MAX = 4096;
-const NONE_PRESET = {
-	id: "none",
-	label: "None (full window)",
-	width: 0,
-	height: 0,
-	dpr: 1,
-	notch: "none",
-	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 모델 (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,
-	{
-		id: "iphone-se-3",
-		label: "iPhone SE (3rd gen)",
-		width: 375,
-		height: 667,
-		dpr: 2,
-		notch: "none",
-		notchInset: 20,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "iphone-15-pro",
-		label: "iPhone 15 Pro",
-		width: 393,
-		height: 754,
-		screenHeight: 852,
-		dpr: 3,
-		notch: "dynamic-island",
-		notchInset: 59,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaBottomLandscape: 20,
-		safeAreaProvenance: {
-			source: "measured",
-			device: "iPhone 15 Pro",
-			date: "2026-05-28",
-			orientations: ["portrait", "landscape"]
-		}
-	},
-	{
-		id: "iphone-16e",
-		label: "iPhone 16e",
-		width: 390,
-		height: 844,
-		dpr: 3,
-		notch: "notch",
-		notchInset: 47,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "iphone-17",
-		label: "iPhone 17",
-		width: 402,
-		height: 874,
-		dpr: 3,
-		notch: "dynamic-island",
-		notchInset: 59,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "iphone-air",
-		label: "iPhone Air",
-		width: 420,
-		height: 912,
-		dpr: 3,
-		notch: "dynamic-island",
-		notchInset: 59,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "iphone-17-pro",
-		label: "iPhone 17 Pro",
-		width: 402,
-		height: 874,
-		dpr: 3,
-		notch: "dynamic-island",
-		notchInset: 59,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "iphone-17-pro-max",
-		label: "iPhone 17 Pro Max",
-		width: 440,
-		height: 956,
-		dpr: 3,
-		notch: "dynamic-island",
-		notchInset: 62,
-		navBarHeight: 54,
-		safeAreaBottom: 34,
-		safeAreaProvenance: EXTRAPOLATED
-	},
-	{
-		id: "galaxy-s26",
-		label: "Galaxy S26",
-		width: 360,
-		height: 773,
-		dpr: 3,
-		notch: "punch-hole-center",
-		notchInset: 32,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	{
-		id: "galaxy-s26-plus",
-		label: "Galaxy S26+",
-		width: 480,
-		height: 1040,
-		dpr: 3,
-		notch: "punch-hole-center",
-		notchInset: 32,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	{
-		id: "galaxy-s26-ultra",
-		label: "Galaxy S26 Ultra",
-		width: 480,
-		height: 1040,
-		dpr: 3,
-		notch: "punch-hole-center",
-		notchInset: 40,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	{
-		id: "galaxy-z-flip7",
-		label: "Galaxy Z Flip7",
-		width: 412,
-		height: 990,
-		dpr: 3,
-		notch: "punch-hole-center",
-		notchInset: 36,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	{
-		id: "galaxy-z-fold7-folded",
-		label: "Galaxy Z Fold7 (folded)",
-		width: 384,
-		height: 870,
-		dpr: 3,
-		notch: "punch-hole-center",
-		notchInset: 32,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	{
-		id: "galaxy-z-fold7-unfolded",
-		label: "Galaxy Z Fold7 (unfolded)",
-		width: 768,
-		height: 884,
-		dpr: 2.625,
-		notch: "punch-hole-center",
-		notchInset: 32,
-		navBarHeight: 54,
-		safeAreaBottom: 0,
-		safeAreaProvenance: PLACEHOLDER
-	},
-	CUSTOM_PRESET
-];
-function getPreset(id) {
-	return VIEWPORT_PRESETS.find((p) => p.id === id) ?? NONE_PRESET;
-}
-/**
-* 실제로 화면에 표시될 orientation을 결정한다.
-*
-* - Panel `orientation === 'auto'`: 앱이 마지막으로 SDK로 요청한 값
-*   (`appOrientation`)을 따른다. 호출 전이면 portrait.
-* - Panel `orientation === 'portrait' | 'landscape'`: Panel 값이 우선.
-*/
-function effectiveOrientation(state) {
-	if (state.orientation === "auto") return state.appOrientation ?? "portrait";
-	return state.orientation;
-}
-/**
-* 선택된 뷰포트의 실제 width/height를 계산한다.
-* preset === 'custom'이면 customWidth/customHeight, 그 외에는 preset의 값.
-* effective orientation이 landscape이면 width/height를 swap한다.
-*/
-function resolveViewportSize(state) {
-	if (state.preset === "none") return {
-		width: 0,
-		height: 0
-	};
-	const base = state.preset === "custom" ? {
-		width: state.customWidth,
-		height: state.customHeight
-	} : getPreset(state.preset);
-	return effectiveOrientation(state) === "landscape" ? {
-		width: base.height,
-		height: base.width
-	} : {
-		width: base.width,
-		height: base.height
-	};
-}
-/**
-* 프리셋 + orientation + nav bar 상태로부터 SDK `SafeAreaInsets.get()`이 반환할 insets를
-* 계산한다. iPhone 15 Pro on-device relay 실측(devtools#190, #198, #232, #275)에 맞춘 모델:
-*
-* - **Portrait top = 0** (partner/game 모두). 실측(devtools#275)에서 토스 native nav bar는
-*   partner WebView **viewport 밖**에 그려진다. SDK가 반환하는 `top=54`는 호스트 nav bar
-*   높이에 대한 정보용 값이고, WebView 좌표계에서 콘텐츠는 top=0부터 시작한다. 소비자가
-*   이 값을 `padding-top`으로 적용하면 실기기에서 잉여 공간이 생긴다(double-count).
-*   mock은 top=0을 반환해 소비자 코드가 실기기와 같은 결과를 내도록 한다.
-*   `game` type 측정은 아직 미진행이지만 동일하게 top=0을 반환한다(추후 실측으로 갱신).
-* - **Bottom = `safeAreaBottom`** (portrait home-indicator, 실측 34).
-*   landscape는 `safeAreaBottomLandscape`가 정의돼 있으면 그 값을 사용한다
-*   (iPhone 15 Pro landscape 실측 20 — portrait 34와 다름).
-* - **Landscape iPhone(notch/Dynamic Island)**: CSS env()와 SDK SafeAreaInsets 모두
-*   `left = right = notchInset`(양쪽 대칭)을 반환한다. 물리적 노치는 한쪽으로 가지만
-*   OS가 양쪽 모두에 같은 inset을 부여하므로 landscapeSide mental model은 틀렸다
-*   (2026-05-28 iPhone 15 Pro relay 실측 #198/#232: left=right=59). top=0(landscape에서
-*   토스 앱이 partner nav bar를 숨김, #232 실측 확인).
-* - **Android punch-hole(status bar)**: landscape에서도 top에 status bar(`notchInset`)가
-*   유지된다.
-*/
-function computeSafeAreaInsets(preset, landscape) {
-	if (preset.id === "none" || preset.id === "custom") return {
-		top: 0,
-		bottom: 0,
-		left: 0,
-		right: 0
-	};
-	if (!landscape) return {
-		top: 0,
-		bottom: preset.safeAreaBottom,
-		left: 0,
-		right: 0
-	};
-	const landscapeBottom = preset.safeAreaBottomLandscape !== void 0 ? preset.safeAreaBottomLandscape : preset.safeAreaBottom;
-	if (preset.notch === "notch" || preset.notch === "dynamic-island") return {
-		top: 0,
-		bottom: landscapeBottom,
-		left: preset.notchInset,
-		right: preset.notchInset
-	};
-	return {
-		top: preset.notchInset,
-		bottom: landscapeBottom,
-		left: 0,
-		right: 0
-	};
-}
-/** 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");
-	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 });
-}
-const STYLE_ELEMENT_ID = "__ait-viewport-style";
-const NOTCH_ELEMENT_ID = "__ait-viewport-notch";
-const HOME_INDICATOR_ID = "__ait-viewport-home-indicator";
-const NAV_BAR_ELEMENT_ID = "__ait-viewport-navbar";
-let bodyScrollHintEmitted = false;
-function ensureStyleElement() {
-	if (typeof document === "undefined") return null;
-	let el = document.getElementById(STYLE_ELEMENT_ID);
-	if (!el) {
-		el = document.createElement("style");
-		el.id = STYLE_ELEMENT_ID;
-		document.head.appendChild(el);
-	}
-	return el;
-}
-function removeById(id) {
-	const el = document.getElementById(id);
-	if (el) el.remove();
-}
-function removeNotchElement() {
-	removeById(NOTCH_ELEMENT_ID);
-}
-function removeHomeIndicator() {
-	removeById(HOME_INDICATOR_ID);
-}
-function removeNavBarElement() {
-	removeById(NAV_BAR_ELEMENT_ID);
-}
-/**
-* Apps in Toss host nav bar 렌더. OS status bar(notch) 아래에 쌓인다.
-*
-* 변형(SDK `webViewProps.type`과 의미 일치):
-* - `partner` (기본): 흰 배경, 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`),
-*   우측 `⋯` + 구분선 + `×`.
-* - `game`: 투명 배경, 게임 캔버스를 가리지 않도록 우측 `⋯` + 구분선 + `×`만.
-*
-* 이 오버레이는 **시각 참고용 frame 장식**이다. 실기기에서 토스 native nav bar는 WebView
-* viewport 밖에 그려지므로(devtools#275), mock의 nav bar 오버레이가 콘텐츠 위에 overlap
-* 되는 것이 실제 동작과 일치한다 — body에 `padding-top`을 주입하지 않는다.
-* 시각 notch 오버레이는 body 밖 위쪽에 따로 그린다(`renderNotchOverlay`) — body 안이 아니다.
-*
-* 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
-* 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
-*/
-function renderNavBar(displayName, type) {
-	removeNavBarElement();
-	const el = h("div", {
-		id: NAV_BAR_ELEMENT_ID,
-		className: `ait-navbar ait-navbar-${type}`,
-		"aria-hidden": "true"
-	});
-	const moreBtn = h("button", {
-		className: "ait-navbar-btn",
-		type: "button",
-		"aria-label": "More"
-	});
-	moreBtn.textContent = "⋯";
-	const closeBtn = h("button", {
-		className: "ait-navbar-btn",
-		type: "button",
-		"aria-label": "Close"
-	});
-	closeBtn.textContent = "×";
-	closeBtn.addEventListener("click", () => {
-		closeView().catch((err) => console.error("[@ait-co/devtools] navbar close failed:", err));
-	});
-	const actions = h("div", { className: "ait-navbar-actions" }, moreBtn, h("span", { className: "ait-navbar-divider" }), closeBtn);
-	if (type === "game") el.append(actions);
-	else {
-		const backBtn = h("button", {
-			className: "ait-navbar-btn ait-navbar-back",
-			type: "button",
-			"aria-label": "Back"
-		});
-		backBtn.textContent = "‹";
-		backBtn.addEventListener("click", () => {
-			aitState.trigger("backEvent");
-		});
-		const nameSpan = h("span", { className: "ait-navbar-name" });
-		nameSpan.textContent = displayName;
-		el.append(backBtn, h("div", { className: "ait-navbar-title" }, h("span", { className: "ait-navbar-icon" }), nameSpan), actions);
-	}
-	document.body.appendChild(el);
-}
-/**
-* 현재 preset의 notch/Dynamic Island/punch-hole을 body 상단에 시각적으로 렌더한다.
-* landscape 시에는 노치가 한쪽 변에 있는 것이 실제 기기 동작이지만, 시뮬레이터에서는
-* landscape에서 오버레이를 그리지 않는다 (safeAreaInsets의 left/right로 이미 반영).
-*/
-function renderNotchOverlay(preset) {
-	removeNotchElement();
-	if (preset.notch === "none") return;
-	const notch = h("div", {
-		id: NOTCH_ELEMENT_ID,
-		className: `ait-notch ${preset.notch === "dynamic-island" ? "ait-notch-dynamic-island" : preset.notch === "notch" ? "ait-notch-pill" : "ait-notch-punch-hole"}`,
-		"aria-hidden": "true"
-	});
-	document.body.appendChild(notch);
-}
-/** brand 이름만 바뀐 경우 nav bar 전체를 다시 만들지 않고 텍스트 노드만 교체한다. */
-function refreshNavBarBrand(displayName) {
-	const name = document.querySelector(`#${NAV_BAR_ELEMENT_ID} .ait-navbar-name`);
-	if (name) name.textContent = displayName;
-}
-function renderHomeIndicator() {
-	removeHomeIndicator();
-	const el = h("div", {
-		id: HOME_INDICATOR_ID,
-		className: "ait-home-indicator",
-		"aria-hidden": "true"
-	});
-	document.body.appendChild(el);
-}
-/**
-* 모든 viewport DOM mutation을 원복하고 aitState 구독도 해제한다.
-* 외부 consumer가 패널을 동적으로 제거할 때 호출. 호출 후에는 aitState 변경이
-* DOM에 반영되지 않으므로 안전하게 panel을 떼어낼 수 있다.
-*/
-function disposeViewport() {
-	if (typeof document === "undefined") return;
-	if (viewportUnsubscribe) viewportUnsubscribe();
-	const html = document.documentElement;
-	html.classList.remove("ait-viewport-active");
-	html.classList.remove("ait-viewport-framed");
-	removeById(STYLE_ELEMENT_ID);
-	removeNotchElement();
-	removeHomeIndicator();
-	removeNavBarElement();
-	revertDeviceEmulation();
-	bodyScrollHintEmitted = false;
-}
-/**
-* DOM에 뷰포트 제약을 적용한다.
-* - `html.ait-viewport-active` 클래스로 정적 CSS(styles.ts) 활성화
-* - body의 width/height는 preset 값으로, navbar top offset은 notchInset으로 인라인 주입
-*/
-function applyViewport(state) {
-	if (typeof document === "undefined") return;
-	const html = document.documentElement;
-	const style = ensureStyleElement();
-	if (!style) return;
-	const size = resolveViewportSize(state);
-	if (state.preset === "none" || size.width === 0 || size.height === 0) {
-		html.classList.remove("ait-viewport-active");
-		html.classList.remove("ait-viewport-framed");
-		style.textContent = "";
-		removeNotchElement();
-		removeHomeIndicator();
-		removeNavBarElement();
-		syncDeviceEmulation(null, false);
-		return;
-	}
-	if (!bodyScrollHintEmitted) {
-		bodyScrollHintEmitted = true;
-		console.info("[@ait-co/devtools] Viewport simulation active — scroll happens on body, not window. See README \"Known limitations\" for details.");
-	}
-	html.classList.add("ait-viewport-active");
-	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);
-	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;
-    }
-  `;
-	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(aitState.state.brand.displayName, state.aitNavBarType);
-	else removeNavBarElement();
-}
-function isViewportPresetId(v) {
-	return typeof v === "string" && VIEWPORT_PRESETS.some((p) => p.id === v);
-}
-function isViewportOrientation(v) {
-	return v === "auto" || v === "portrait" || v === "landscape";
-}
-function isAppOrientation(v) {
-	return v === null || v === "portrait" || v === "landscape";
-}
-/** 1 이상의 정수 + VIEWPORT_CUSTOM_MAX 이하인지 검사. sessionStorage 보호용. */
-function isValidCustomDimension(v) {
-	return typeof v === "number" && Number.isInteger(v) && v >= 1 && v <= 4096;
-}
-/** Custom 입력에서 사용. 잘린 정수 + 클램프된 안전한 값 또는 null 반환. */
-function clampCustomDimension(raw) {
-	if (!Number.isFinite(raw)) return null;
-	const n = Math.floor(raw);
-	if (n < 1) return null;
-	return Math.min(n, VIEWPORT_CUSTOM_MAX);
-}
-/**
-* sessionStorage에 저장된 뷰포트 상태를 읽어서 현재 state에 merge한다.
-* 값이 없거나 파싱 실패 시 no-op.
-*/
-function loadViewportFromStorage() {
-	if (typeof sessionStorage === "undefined") return null;
-	const raw = sessionStorage.getItem(VIEWPORT_STORAGE_KEY);
-	if (!raw) return null;
-	try {
-		const parsed = JSON.parse(raw);
-		if (typeof parsed !== "object" || parsed === null) return null;
-		const obj = parsed;
-		const next = {};
-		if (isViewportPresetId(obj.preset)) next.preset = obj.preset;
-		if (isViewportOrientation(obj.orientation)) next.orientation = obj.orientation;
-		if (isAppOrientation(obj.appOrientation)) next.appOrientation = obj.appOrientation;
-		if (isValidCustomDimension(obj.customWidth)) next.customWidth = obj.customWidth;
-		if (isValidCustomDimension(obj.customHeight)) next.customHeight = obj.customHeight;
-		if (typeof obj.frame === "boolean") next.frame = obj.frame;
-		if (typeof obj.aitNavBar === "boolean") next.aitNavBar = obj.aitNavBar;
-		if (obj.aitNavBarType === "partner" || obj.aitNavBarType === "game") next.aitNavBarType = obj.aitNavBarType;
-		return next;
-	} catch {
-		return null;
-	}
-}
-function saveViewportToStorage(state) {
-	if (typeof sessionStorage === "undefined") return;
-	try {
-		sessionStorage.setItem(VIEWPORT_STORAGE_KEY, JSON.stringify(state));
-	} catch {}
-}
-let viewportInitialized = false;
-let viewportUnsubscribe = null;
-/**
-* Panel mount 시 호출. sessionStorage 복원 → aitState에 반영 → DOM 적용.
-* aitState 변경을 구독해서 DOM / storage / safe-area insets를 자동 동기화한다.
-*
-* Idempotent: 두 번째 호출은 기존 unsubscribe를 그대로 반환한다 (HMR / 재mount 안전).
-* 테스트는 반환된 unsubscribe를 afterEach에서 호출해 cleanup해야 한다.
-*/
-function initViewport() {
-	if (typeof window === "undefined") return () => {};
-	if (viewportInitialized && viewportUnsubscribe) return viewportUnsubscribe;
-	const restored = loadViewportFromStorage();
-	if (restored) aitState.patch("viewport", restored);
-	applyViewport(aitState.state.viewport);
-	syncSafeAreaFromViewport(aitState.state.viewport);
-	let lastViewportJson = JSON.stringify(aitState.state.viewport);
-	let lastBrandName = aitState.state.brand.displayName;
-	const unsubscribeFn = aitState.subscribe(() => {
-		const vp = aitState.state.viewport;
-		const brandName = aitState.state.brand.displayName;
-		const json = JSON.stringify(vp);
-		const viewportChanged = json !== lastViewportJson;
-		if (!viewportChanged && !(brandName !== lastBrandName)) return;
-		lastViewportJson = json;
-		lastBrandName = brandName;
-		if (viewportChanged) {
-			applyViewport(vp);
-			saveViewportToStorage(vp);
-			syncSafeAreaFromViewport(vp);
-		} else refreshNavBarBrand(brandName);
-	});
-	viewportInitialized = true;
-	viewportUnsubscribe = () => {
-		unsubscribeFn();
-		viewportInitialized = false;
-		viewportUnsubscribe = null;
-	};
-	return viewportUnsubscribe;
-}
-//#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;
-	const disabled = !s.panelEditable;
-	const container = h("div");
-	if (disabled) container.appendChild(monitoringNotice());
-	const presetSelect = h("select", { className: "ait-select" });
-	if (disabled) presetSelect.disabled = true;
-	for (const preset of VIEWPORT_PRESETS) {
-		const label = preset.id === "none" || preset.id === "custom" ? preset.label : `${preset.label} (${preset.width}×${preset.height})`;
-		const option = h("option", { value: preset.id }, label);
-		if (preset.id === vp.preset) option.selected = true;
-		presetSelect.appendChild(option);
-	}
-	presetSelect.addEventListener("change", () => {
-		const id = presetSelect.value;
-		const patch = { preset: id };
-		if (id === "custom") {
-			const current = getPreset(vp.preset);
-			if (current.width > 0) patch.customWidth = current.width;
-			if (current.height > 0) patch.customHeight = current.height;
-		}
-		aitState.patch("viewport", patch);
-	});
-	const orientationSelect = h("select", { className: "ait-select" });
-	if (disabled) orientationSelect.disabled = true;
-	for (const opt of [
-		"auto",
-		"portrait",
-		"landscape"
-	]) {
-		const option = h("option", { value: opt }, opt);
-		if (opt === vp.orientation) option.selected = true;
-		orientationSelect.appendChild(option);
-	}
-	orientationSelect.addEventListener("change", () => {
-		aitState.patch("viewport", { orientation: orientationSelect.value });
-	});
-	const customRow = h("div", { className: "ait-section" });
-	if (vp.preset === "custom") {
-		const widthInput = h("input", {
-			className: "ait-input",
-			type: "number",
-			min: "1",
-			value: String(vp.customWidth)
-		});
-		const heightInput = h("input", {
-			className: "ait-input",
-			type: "number",
-			min: "1",
-			value: String(vp.customHeight)
-		});
-		if (disabled) {
-			widthInput.disabled = true;
-			heightInput.disabled = true;
-		}
-		widthInput.addEventListener("change", () => {
-			const clamped = clampCustomDimension(Number(widthInput.value));
-			if (clamped !== null) {
-				aitState.patch("viewport", { customWidth: clamped });
-				widthInput.value = String(clamped);
-			}
-		});
-		heightInput.addEventListener("change", () => {
-			const clamped = clampCustomDimension(Number(heightInput.value));
-			if (clamped !== null) {
-				aitState.patch("viewport", { customHeight: clamped });
-				heightInput.value = String(clamped);
-			}
-		});
-		customRow.append(h("div", { className: "ait-section-title" }, t("viewport.section.custom")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.width")), widthInput), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.height")), heightInput));
-	}
-	const frameCheckbox = h("input", { type: "checkbox" });
-	frameCheckbox.checked = vp.frame;
-	if (disabled) frameCheckbox.disabled = true;
-	frameCheckbox.addEventListener("change", () => {
-		aitState.patch("viewport", { frame: frameCheckbox.checked });
-	});
-	const navBarCheckbox = h("input", { type: "checkbox" });
-	navBarCheckbox.checked = vp.aitNavBar;
-	if (disabled) navBarCheckbox.disabled = true;
-	navBarCheckbox.addEventListener("change", () => {
-		aitState.patch("viewport", { aitNavBar: navBarCheckbox.checked });
-	});
-	const navBarTypeSelect = h("select", { className: "ait-select" });
-	if (disabled || !vp.aitNavBar) navBarTypeSelect.disabled = true;
-	for (const opt of ["partner", "game"]) {
-		const option = h("option", { value: opt }, opt);
-		if (opt === vp.aitNavBarType) option.selected = true;
-		navBarTypeSelect.appendChild(option);
-	}
-	navBarTypeSelect.addEventListener("change", () => {
-		aitState.patch("viewport", { aitNavBarType: navBarTypeSelect.value });
-	});
-	const size = resolveViewportSize(vp);
-	const statusEl = h("div", { className: "ait-section" });
-	if (vp.preset === "none" || size.width === 0) statusEl.appendChild(h("div", { style: "color:#888;font-size:11px" }, t("viewport.status.noConstraint")));
-	else {
-		const preset = vp.preset === "custom" ? null : getPreset(vp.preset);
-		const effOrient = effectiveOrientation(vp);
-		const landscape = effOrient === "landscape";
-		const rows = [];
-		const dpr = preset?.dpr ?? 1;
-		const physW = Math.round(size.width * dpr);
-		const physH = Math.round(size.height * dpr);
-		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);
-			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
-			}))));
-		}
-		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));
-	container.append(deviceSection, customRow, h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("viewport.section.appearance")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showFrame")), frameCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showAitNavBar")), navBarCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.navBarType")), navBarTypeSelect)), statusEl);
-	return container;
-}
-//#endregion
-//#region src/panel/tabs/index.ts
-const TAB_DEFS = [
-	{
-		id: "env",
-		labelKey: "panel.tab.env"
-	},
-	{
-		id: "presets",
-		labelKey: "panel.tab.presets"
-	},
-	{
-		id: "viewport",
-		labelKey: "panel.tab.viewport"
-	},
-	{
-		id: "permissions",
-		labelKey: "panel.tab.permissions"
-	},
-	{
-		id: "notifications",
-		labelKey: "panel.tab.notifications"
-	},
-	{
-		id: "location",
-		labelKey: "panel.tab.location"
-	},
-	{
-		id: "device",
-		labelKey: "panel.tab.device"
-	},
-	{
-		id: "iap",
-		labelKey: "panel.tab.iap"
-	},
-	{
-		id: "ads",
-		labelKey: "panel.tab.ads"
-	},
-	{
-		id: "events",
-		labelKey: "panel.tab.events"
-	},
-	{
-		id: "analytics",
-		labelKey: "panel.tab.analytics"
-	},
-	{
-		id: "storage",
-		labelKey: "panel.tab.storage"
-	}
-];
-function getTabs() {
-	return TAB_DEFS.map((def) => ({
-		id: def.id,
-		label: t(def.labelKey)
-	}));
-}
-function createTabRenderers(refreshPanel) {
-	return {
-		env: renderEnvironmentTab,
-		presets: () => renderPresetsTab(refreshPanel),
-		permissions: renderPermissionsTab,
-		notifications: renderNotificationsTab,
-		location: renderLocationTab,
-		device: renderDeviceTab,
-		viewport: renderViewportTab,
-		iap: renderIapTab,
-		ads: renderAdsTab,
-		events: renderEventsTab,
-		analytics: renderAnalyticsTab,
-		storage: () => renderStorageTab(refreshPanel)
-	};
-}
 const PANEL_STYLES = `
   .ait-panel-toggle {
     position: fixed;
@@ -30394,8 +29586,824 @@ const PANEL_STYLES = `
     .ait-panel-close {
       display: block;
     }
-  }
-`;
+  }
+`;
+//#endregion
+//#region src/panel/viewport.ts
+/**
+* Viewport 시뮬레이션 유틸
+*
+* Panel에서 선택한 디바이스 프리셋을 `document.body`에 적용한다. 정적 CSS는
+* `panel/styles.ts`에 정의되어 있고 (Panel mount 시 head에 주입), 여기서는 프리셋별
+* 동적 값(width/height)만 별도 `<style>` 엘리먼트로 관리한다.
+*
+* body `padding-top`은 주입하지 않는다: 실기기에서 토스 native nav bar는 WebView viewport
+* 밖이라 콘텐츠는 top=0부터 시작한다(devtools#275).
+*/
+const VIEWPORT_STORAGE_KEY = "__ait_viewport";
+/** Custom width/height의 안전 상한 (CSS px). 4K + 여유. */
+const VIEWPORT_CUSTOM_MAX = 4096;
+const NONE_PRESET = {
+	id: "none",
+	label: "None (full window)",
+	width: 0,
+	height: 0,
+	dpr: 1,
+	notch: "none",
+	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 모델 (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,
+	{
+		id: "iphone-se-3",
+		label: "iPhone SE (3rd gen)",
+		width: 375,
+		height: 667,
+		dpr: 2,
+		notch: "none",
+		notchInset: 20,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-15-pro",
+		label: "iPhone 15 Pro",
+		width: 393,
+		height: 754,
+		screenHeight: 852,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaBottomLandscape: 20,
+		safeAreaProvenance: {
+			source: "measured",
+			device: "iPhone 15 Pro",
+			date: "2026-05-28",
+			orientations: ["portrait", "landscape"]
+		}
+	},
+	{
+		id: "iphone-16e",
+		label: "iPhone 16e",
+		width: 390,
+		height: 844,
+		dpr: 3,
+		notch: "notch",
+		notchInset: 47,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-17",
+		label: "iPhone 17",
+		width: 402,
+		height: 874,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-air",
+		label: "iPhone Air",
+		width: 420,
+		height: 912,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-17-pro",
+		label: "iPhone 17 Pro",
+		width: 402,
+		height: 874,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 59,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "iphone-17-pro-max",
+		label: "iPhone 17 Pro Max",
+		width: 440,
+		height: 956,
+		dpr: 3,
+		notch: "dynamic-island",
+		notchInset: 62,
+		navBarHeight: 54,
+		safeAreaBottom: 34,
+		safeAreaProvenance: EXTRAPOLATED
+	},
+	{
+		id: "galaxy-s26",
+		label: "Galaxy S26",
+		width: 360,
+		height: 773,
+		dpr: 3,
+		notch: "punch-hole-center",
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	{
+		id: "galaxy-s26-plus",
+		label: "Galaxy S26+",
+		width: 480,
+		height: 1040,
+		dpr: 3,
+		notch: "punch-hole-center",
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	{
+		id: "galaxy-s26-ultra",
+		label: "Galaxy S26 Ultra",
+		width: 480,
+		height: 1040,
+		dpr: 3,
+		notch: "punch-hole-center",
+		notchInset: 40,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	{
+		id: "galaxy-z-flip7",
+		label: "Galaxy Z Flip7",
+		width: 412,
+		height: 990,
+		dpr: 3,
+		notch: "punch-hole-center",
+		notchInset: 36,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	{
+		id: "galaxy-z-fold7-folded",
+		label: "Galaxy Z Fold7 (folded)",
+		width: 384,
+		height: 870,
+		dpr: 3,
+		notch: "punch-hole-center",
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	{
+		id: "galaxy-z-fold7-unfolded",
+		label: "Galaxy Z Fold7 (unfolded)",
+		width: 768,
+		height: 884,
+		dpr: 2.625,
+		notch: "punch-hole-center",
+		notchInset: 32,
+		navBarHeight: 54,
+		safeAreaBottom: 0,
+		safeAreaProvenance: PLACEHOLDER
+	},
+	CUSTOM_PRESET
+];
+function getPreset(id) {
+	return VIEWPORT_PRESETS.find((p) => p.id === id) ?? NONE_PRESET;
+}
+/**
+* 실제로 화면에 표시될 orientation을 결정한다.
+*
+* - Panel `orientation === 'auto'`: 앱이 마지막으로 SDK로 요청한 값
+*   (`appOrientation`)을 따른다. 호출 전이면 portrait.
+* - Panel `orientation === 'portrait' | 'landscape'`: Panel 값이 우선.
+*/
+function effectiveOrientation(state) {
+	if (state.orientation === "auto") return state.appOrientation ?? "portrait";
+	return state.orientation;
+}
+/**
+* 선택된 뷰포트의 실제 width/height를 계산한다.
+* preset === 'custom'이면 customWidth/customHeight, 그 외에는 preset의 값.
+* effective orientation이 landscape이면 width/height를 swap한다.
+*/
+function resolveViewportSize(state) {
+	if (state.preset === "none") return {
+		width: 0,
+		height: 0
+	};
+	const base = state.preset === "custom" ? {
+		width: state.customWidth,
+		height: state.customHeight
+	} : getPreset(state.preset);
+	return effectiveOrientation(state) === "landscape" ? {
+		width: base.height,
+		height: base.width
+	} : {
+		width: base.width,
+		height: base.height
+	};
+}
+/**
+* 프리셋 + orientation + nav bar 상태로부터 SDK `SafeAreaInsets.get()`이 반환할 insets를
+* 계산한다. iPhone 15 Pro on-device relay 실측(devtools#190, #198, #232, #275)에 맞춘 모델:
+*
+* - **Portrait top = 0** (partner/game 모두). 실측(devtools#275)에서 토스 native nav bar는
+*   partner WebView **viewport 밖**에 그려진다. SDK가 반환하는 `top=54`는 호스트 nav bar
+*   높이에 대한 정보용 값이고, WebView 좌표계에서 콘텐츠는 top=0부터 시작한다. 소비자가
+*   이 값을 `padding-top`으로 적용하면 실기기에서 잉여 공간이 생긴다(double-count).
+*   mock은 top=0을 반환해 소비자 코드가 실기기와 같은 결과를 내도록 한다.
+*   `game` type 측정은 아직 미진행이지만 동일하게 top=0을 반환한다(추후 실측으로 갱신).
+* - **Bottom = `safeAreaBottom`** (portrait home-indicator, 실측 34).
+*   landscape는 `safeAreaBottomLandscape`가 정의돼 있으면 그 값을 사용한다
+*   (iPhone 15 Pro landscape 실측 20 — portrait 34와 다름).
+* - **Landscape iPhone(notch/Dynamic Island)**: CSS env()와 SDK SafeAreaInsets 모두
+*   `left = right = notchInset`(양쪽 대칭)을 반환한다. 물리적 노치는 한쪽으로 가지만
+*   OS가 양쪽 모두에 같은 inset을 부여하므로 landscapeSide mental model은 틀렸다
+*   (2026-05-28 iPhone 15 Pro relay 실측 #198/#232: left=right=59). top=0(landscape에서
+*   토스 앱이 partner nav bar를 숨김, #232 실측 확인).
+* - **Android punch-hole(status bar)**: landscape에서도 top에 status bar(`notchInset`)가
+*   유지된다.
+*/
+function computeSafeAreaInsets(preset, landscape) {
+	if (preset.id === "none" || preset.id === "custom") return {
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	};
+	if (!landscape) return {
+		top: 0,
+		bottom: preset.safeAreaBottom,
+		left: 0,
+		right: 0
+	};
+	const landscapeBottom = preset.safeAreaBottomLandscape !== void 0 ? preset.safeAreaBottomLandscape : preset.safeAreaBottom;
+	if (preset.notch === "notch" || preset.notch === "dynamic-island") return {
+		top: 0,
+		bottom: landscapeBottom,
+		left: preset.notchInset,
+		right: preset.notchInset
+	};
+	return {
+		top: preset.notchInset,
+		bottom: landscapeBottom,
+		left: 0,
+		right: 0
+	};
+}
+/** 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");
+	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 });
+}
+const STYLE_ELEMENT_ID = "__ait-viewport-style";
+const NOTCH_ELEMENT_ID = "__ait-viewport-notch";
+const HOME_INDICATOR_ID = "__ait-viewport-home-indicator";
+const NAV_BAR_ELEMENT_ID = "__ait-viewport-navbar";
+let bodyScrollHintEmitted = false;
+function ensureStyleElement() {
+	if (typeof document === "undefined") return null;
+	let el = document.getElementById(STYLE_ELEMENT_ID);
+	if (!el) {
+		el = document.createElement("style");
+		el.id = STYLE_ELEMENT_ID;
+		document.head.appendChild(el);
+	}
+	return el;
+}
+function removeById(id) {
+	const el = document.getElementById(id);
+	if (el) el.remove();
+}
+function removeNotchElement() {
+	removeById(NOTCH_ELEMENT_ID);
+}
+function removeHomeIndicator() {
+	removeById(HOME_INDICATOR_ID);
+}
+function removeNavBarElement() {
+	removeById(NAV_BAR_ELEMENT_ID);
+}
+/**
+* Apps in Toss host nav bar 렌더. OS status bar(notch) 아래에 쌓인다.
+*
+* 변형(SDK `webViewProps.type`과 의미 일치):
+* - `partner` (기본): 흰 배경, 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`),
+*   우측 `⋯` + 구분선 + `×`.
+* - `game`: 투명 배경, 게임 캔버스를 가리지 않도록 우측 `⋯` + 구분선 + `×`만.
+*
+* 이 오버레이는 **시각 참고용 frame 장식**이다. 실기기에서 토스 native nav bar는 WebView
+* viewport 밖에 그려지므로(devtools#275), mock의 nav bar 오버레이가 콘텐츠 위에 overlap
+* 되는 것이 실제 동작과 일치한다 — body에 `padding-top`을 주입하지 않는다.
+* 시각 notch 오버레이는 body 밖 위쪽에 따로 그린다(`renderNotchOverlay`) — body 안이 아니다.
+*
+* 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
+* 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
+*/
+function renderNavBar(displayName, type) {
+	removeNavBarElement();
+	const el = h("div", {
+		id: NAV_BAR_ELEMENT_ID,
+		className: `ait-navbar ait-navbar-${type}`,
+		"aria-hidden": "true"
+	});
+	const moreBtn = h("button", {
+		className: "ait-navbar-btn",
+		type: "button",
+		"aria-label": "More"
+	});
+	moreBtn.textContent = "⋯";
+	const closeBtn = h("button", {
+		className: "ait-navbar-btn",
+		type: "button",
+		"aria-label": "Close"
+	});
+	closeBtn.textContent = "×";
+	closeBtn.addEventListener("click", () => {
+		closeView().catch((err) => console.error("[@ait-co/devtools] navbar close failed:", err));
+	});
+	const actions = h("div", { className: "ait-navbar-actions" }, moreBtn, h("span", { className: "ait-navbar-divider" }), closeBtn);
+	if (type === "game") el.append(actions);
+	else {
+		const backBtn = h("button", {
+			className: "ait-navbar-btn ait-navbar-back",
+			type: "button",
+			"aria-label": "Back"
+		});
+		backBtn.textContent = "‹";
+		backBtn.addEventListener("click", () => {
+			aitState.trigger("backEvent");
+		});
+		const nameSpan = h("span", { className: "ait-navbar-name" });
+		nameSpan.textContent = displayName;
+		el.append(backBtn, h("div", { className: "ait-navbar-title" }, h("span", { className: "ait-navbar-icon" }), nameSpan), actions);
+	}
+	document.body.appendChild(el);
+}
+/**
+* 현재 preset의 notch/Dynamic Island/punch-hole을 body 상단에 시각적으로 렌더한다.
+* landscape 시에는 노치가 한쪽 변에 있는 것이 실제 기기 동작이지만, 시뮬레이터에서는
+* landscape에서 오버레이를 그리지 않는다 (safeAreaInsets의 left/right로 이미 반영).
+*/
+function renderNotchOverlay(preset) {
+	removeNotchElement();
+	if (preset.notch === "none") return;
+	const notch = h("div", {
+		id: NOTCH_ELEMENT_ID,
+		className: `ait-notch ${preset.notch === "dynamic-island" ? "ait-notch-dynamic-island" : preset.notch === "notch" ? "ait-notch-pill" : "ait-notch-punch-hole"}`,
+		"aria-hidden": "true"
+	});
+	document.body.appendChild(notch);
+}
+/** brand 이름만 바뀐 경우 nav bar 전체를 다시 만들지 않고 텍스트 노드만 교체한다. */
+function refreshNavBarBrand(displayName) {
+	const name = document.querySelector(`#${NAV_BAR_ELEMENT_ID} .ait-navbar-name`);
+	if (name) name.textContent = displayName;
+}
+function renderHomeIndicator() {
+	removeHomeIndicator();
+	const el = h("div", {
+		id: HOME_INDICATOR_ID,
+		className: "ait-home-indicator",
+		"aria-hidden": "true"
+	});
+	document.body.appendChild(el);
+}
+/**
+* 모든 viewport DOM mutation을 원복하고 aitState 구독도 해제한다.
+* 외부 consumer가 패널을 동적으로 제거할 때 호출. 호출 후에는 aitState 변경이
+* DOM에 반영되지 않으므로 안전하게 panel을 떼어낼 수 있다.
+*/
+function disposeViewport() {
+	if (typeof document === "undefined") return;
+	if (viewportUnsubscribe) viewportUnsubscribe();
+	const html = document.documentElement;
+	html.classList.remove("ait-viewport-active");
+	html.classList.remove("ait-viewport-framed");
+	removeById(STYLE_ELEMENT_ID);
+	removeNotchElement();
+	removeHomeIndicator();
+	removeNavBarElement();
+	revertDeviceEmulation();
+	bodyScrollHintEmitted = false;
+}
+/**
+* DOM에 뷰포트 제약을 적용한다.
+* - `html.ait-viewport-active` 클래스로 정적 CSS(styles.ts) 활성화
+* - body의 width/height는 preset 값으로, navbar top offset은 notchInset으로 인라인 주입
+*/
+function applyViewport(state) {
+	if (typeof document === "undefined") return;
+	const html = document.documentElement;
+	const style = ensureStyleElement();
+	if (!style) return;
+	const size = resolveViewportSize(state);
+	if (state.preset === "none" || size.width === 0 || size.height === 0) {
+		html.classList.remove("ait-viewport-active");
+		html.classList.remove("ait-viewport-framed");
+		style.textContent = "";
+		removeNotchElement();
+		removeHomeIndicator();
+		removeNavBarElement();
+		syncDeviceEmulation(null, false);
+		return;
+	}
+	if (!bodyScrollHintEmitted) {
+		bodyScrollHintEmitted = true;
+		console.info("[@ait-co/devtools] Viewport simulation active — scroll happens on body, not window. See README \"Known limitations\" for details.");
+	}
+	html.classList.add("ait-viewport-active");
+	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);
+	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;
+    }
+  `;
+	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(aitState.state.brand.displayName, state.aitNavBarType);
+	else removeNavBarElement();
+}
+function isViewportPresetId(v) {
+	return typeof v === "string" && VIEWPORT_PRESETS.some((p) => p.id === v);
+}
+function isViewportOrientation(v) {
+	return v === "auto" || v === "portrait" || v === "landscape";
+}
+function isAppOrientation(v) {
+	return v === null || v === "portrait" || v === "landscape";
+}
+/** 1 이상의 정수 + VIEWPORT_CUSTOM_MAX 이하인지 검사. sessionStorage 보호용. */
+function isValidCustomDimension(v) {
+	return typeof v === "number" && Number.isInteger(v) && v >= 1 && v <= 4096;
+}
+/** Custom 입력에서 사용. 잘린 정수 + 클램프된 안전한 값 또는 null 반환. */
+function clampCustomDimension(raw) {
+	if (!Number.isFinite(raw)) return null;
+	const n = Math.floor(raw);
+	if (n < 1) return null;
+	return Math.min(n, VIEWPORT_CUSTOM_MAX);
+}
+/**
+* sessionStorage에 저장된 뷰포트 상태를 읽어서 현재 state에 merge한다.
+* 값이 없거나 파싱 실패 시 no-op.
+*/
+function loadViewportFromStorage() {
+	if (typeof sessionStorage === "undefined") return null;
+	const raw = sessionStorage.getItem(VIEWPORT_STORAGE_KEY);
+	if (!raw) return null;
+	try {
+		const parsed = JSON.parse(raw);
+		if (typeof parsed !== "object" || parsed === null) return null;
+		const obj = parsed;
+		const next = {};
+		if (isViewportPresetId(obj.preset)) next.preset = obj.preset;
+		if (isViewportOrientation(obj.orientation)) next.orientation = obj.orientation;
+		if (isAppOrientation(obj.appOrientation)) next.appOrientation = obj.appOrientation;
+		if (isValidCustomDimension(obj.customWidth)) next.customWidth = obj.customWidth;
+		if (isValidCustomDimension(obj.customHeight)) next.customHeight = obj.customHeight;
+		if (typeof obj.frame === "boolean") next.frame = obj.frame;
+		if (typeof obj.aitNavBar === "boolean") next.aitNavBar = obj.aitNavBar;
+		if (obj.aitNavBarType === "partner" || obj.aitNavBarType === "game") next.aitNavBarType = obj.aitNavBarType;
+		return next;
+	} catch {
+		return null;
+	}
+}
+function saveViewportToStorage(state) {
+	if (typeof sessionStorage === "undefined") return;
+	try {
+		sessionStorage.setItem(VIEWPORT_STORAGE_KEY, JSON.stringify(state));
+	} catch {}
+}
+let viewportInitialized = false;
+let viewportUnsubscribe = null;
+/**
+* Panel mount 시 호출. sessionStorage 복원 → aitState에 반영 → DOM 적용.
+* aitState 변경을 구독해서 DOM / storage / safe-area insets를 자동 동기화한다.
+*
+* Idempotent: 두 번째 호출은 기존 unsubscribe를 그대로 반환한다 (HMR / 재mount 안전).
+* 테스트는 반환된 unsubscribe를 afterEach에서 호출해 cleanup해야 한다.
+*/
+function initViewport() {
+	if (typeof window === "undefined") return () => {};
+	if (viewportInitialized && viewportUnsubscribe) return viewportUnsubscribe;
+	const restored = loadViewportFromStorage();
+	if (restored) aitState.patch("viewport", restored);
+	applyViewport(aitState.state.viewport);
+	syncSafeAreaFromViewport(aitState.state.viewport);
+	let lastViewportJson = JSON.stringify(aitState.state.viewport);
+	let lastBrandName = aitState.state.brand.displayName;
+	const unsubscribeFn = aitState.subscribe(() => {
+		const vp = aitState.state.viewport;
+		const brandName = aitState.state.brand.displayName;
+		const json = JSON.stringify(vp);
+		const viewportChanged = json !== lastViewportJson;
+		if (!viewportChanged && !(brandName !== lastBrandName)) return;
+		lastViewportJson = json;
+		lastBrandName = brandName;
+		if (viewportChanged) {
+			applyViewport(vp);
+			saveViewportToStorage(vp);
+			syncSafeAreaFromViewport(vp);
+		} else refreshNavBarBrand(brandName);
+	});
+	viewportInitialized = true;
+	viewportUnsubscribe = () => {
+		unsubscribeFn();
+		viewportInitialized = false;
+		viewportUnsubscribe = null;
+	};
+	return viewportUnsubscribe;
+}
+//#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;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const presetSelect = h("select", { className: "ait-select" });
+	if (disabled) presetSelect.disabled = true;
+	for (const preset of VIEWPORT_PRESETS) {
+		const label = preset.id === "none" || preset.id === "custom" ? preset.label : `${preset.label} (${preset.width}×${preset.height})`;
+		const option = h("option", { value: preset.id }, label);
+		if (preset.id === vp.preset) option.selected = true;
+		presetSelect.appendChild(option);
+	}
+	presetSelect.addEventListener("change", () => {
+		const id = presetSelect.value;
+		const patch = { preset: id };
+		if (id === "custom") {
+			const current = getPreset(vp.preset);
+			if (current.width > 0) patch.customWidth = current.width;
+			if (current.height > 0) patch.customHeight = current.height;
+		}
+		aitState.patch("viewport", patch);
+	});
+	const orientationSelect = h("select", { className: "ait-select" });
+	if (disabled) orientationSelect.disabled = true;
+	for (const opt of [
+		"auto",
+		"portrait",
+		"landscape"
+	]) {
+		const option = h("option", { value: opt }, opt);
+		if (opt === vp.orientation) option.selected = true;
+		orientationSelect.appendChild(option);
+	}
+	orientationSelect.addEventListener("change", () => {
+		aitState.patch("viewport", { orientation: orientationSelect.value });
+	});
+	const customRow = h("div", { className: "ait-section" });
+	if (vp.preset === "custom") {
+		const widthInput = h("input", {
+			className: "ait-input",
+			type: "number",
+			min: "1",
+			value: String(vp.customWidth)
+		});
+		const heightInput = h("input", {
+			className: "ait-input",
+			type: "number",
+			min: "1",
+			value: String(vp.customHeight)
+		});
+		if (disabled) {
+			widthInput.disabled = true;
+			heightInput.disabled = true;
+		}
+		widthInput.addEventListener("change", () => {
+			const clamped = clampCustomDimension(Number(widthInput.value));
+			if (clamped !== null) {
+				aitState.patch("viewport", { customWidth: clamped });
+				widthInput.value = String(clamped);
+			}
+		});
+		heightInput.addEventListener("change", () => {
+			const clamped = clampCustomDimension(Number(heightInput.value));
+			if (clamped !== null) {
+				aitState.patch("viewport", { customHeight: clamped });
+				heightInput.value = String(clamped);
+			}
+		});
+		customRow.append(h("div", { className: "ait-section-title" }, t("viewport.section.custom")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.width")), widthInput), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.height")), heightInput));
+	}
+	const frameCheckbox = h("input", { type: "checkbox" });
+	frameCheckbox.checked = vp.frame;
+	if (disabled) frameCheckbox.disabled = true;
+	frameCheckbox.addEventListener("change", () => {
+		aitState.patch("viewport", { frame: frameCheckbox.checked });
+	});
+	const navBarCheckbox = h("input", { type: "checkbox" });
+	navBarCheckbox.checked = vp.aitNavBar;
+	if (disabled) navBarCheckbox.disabled = true;
+	navBarCheckbox.addEventListener("change", () => {
+		aitState.patch("viewport", { aitNavBar: navBarCheckbox.checked });
+	});
+	const navBarTypeSelect = h("select", { className: "ait-select" });
+	if (disabled || !vp.aitNavBar) navBarTypeSelect.disabled = true;
+	for (const opt of ["partner", "game"]) {
+		const option = h("option", { value: opt }, opt);
+		if (opt === vp.aitNavBarType) option.selected = true;
+		navBarTypeSelect.appendChild(option);
+	}
+	navBarTypeSelect.addEventListener("change", () => {
+		aitState.patch("viewport", { aitNavBarType: navBarTypeSelect.value });
+	});
+	const size = resolveViewportSize(vp);
+	const statusEl = h("div", { className: "ait-section" });
+	if (vp.preset === "none" || size.width === 0) statusEl.appendChild(h("div", { style: "color:#888;font-size:11px" }, t("viewport.status.noConstraint")));
+	else {
+		const preset = vp.preset === "custom" ? null : getPreset(vp.preset);
+		const effOrient = effectiveOrientation(vp);
+		const landscape = effOrient === "landscape";
+		const rows = [];
+		const dpr = preset?.dpr ?? 1;
+		const physW = Math.round(size.width * dpr);
+		const physH = Math.round(size.height * dpr);
+		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);
+			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
+			}))));
+		}
+		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));
+	container.append(deviceSection, customRow, h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, t("viewport.section.appearance")), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showFrame")), frameCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.showAitNavBar")), navBarCheckbox), h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.navBarType")), navBarTypeSelect)), statusEl);
+	return container;
+}
+//#endregion
+//#region src/panel/tabs/index.ts
+const TAB_DEFS = [
+	{
+		id: "env",
+		labelKey: "panel.tab.env"
+	},
+	{
+		id: "presets",
+		labelKey: "panel.tab.presets"
+	},
+	{
+		id: "viewport",
+		labelKey: "panel.tab.viewport"
+	},
+	{
+		id: "permissions",
+		labelKey: "panel.tab.permissions"
+	},
+	{
+		id: "notifications",
+		labelKey: "panel.tab.notifications"
+	},
+	{
+		id: "location",
+		labelKey: "panel.tab.location"
+	},
+	{
+		id: "device",
+		labelKey: "panel.tab.device"
+	},
+	{
+		id: "iap",
+		labelKey: "panel.tab.iap"
+	},
+	{
+		id: "ads",
+		labelKey: "panel.tab.ads"
+	},
+	{
+		id: "events",
+		labelKey: "panel.tab.events"
+	},
+	{
+		id: "analytics",
+		labelKey: "panel.tab.analytics"
+	},
+	{
+		id: "storage",
+		labelKey: "panel.tab.storage"
+	}
+];
+function getTabs() {
+	return TAB_DEFS.map((def) => ({
+		id: def.id,
+		label: t(def.labelKey)
+	}));
+}
+function createTabRenderers(refreshPanel) {
+	return {
+		env: renderEnvironmentTab,
+		presets: () => renderPresetsTab(refreshPanel),
+		permissions: renderPermissionsTab,
+		notifications: renderNotificationsTab,
+		location: renderLocationTab,
+		device: renderDeviceTab,
+		viewport: renderViewportTab,
+		iap: renderIapTab,
+		ads: renderAdsTab,
+		events: renderEventsTab,
+		analytics: renderAnalyticsTab,
+		storage: () => renderStorageTab(refreshPanel)
+	};
+}
 //#endregion
 //#region src/panel/use-draggable.ts
 /**
@@ -30733,7 +30741,7 @@ function Panel() {
 								color: "#666",
 								fontWeight: 400
 							},
-							children: ["v", "0.1.73"]
+							children: ["v", "0.1.75"]
 						}),
 						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
 							type: "button",