@ait-co/devtools 0.1.41 → 0.1.44

package/dist/panel/index.js

@@ -528,7 +528,6 @@ const DEFAULT_STATE = {
 		preset: "none",
 		orientation: "auto",
 		appOrientation: null,
-		landscapeSide: "left",
 		customWidth: 402,
 		customHeight: 874,
 		frame: false,
@@ -1109,7 +1108,7 @@ function readGlobalString(key) {
 }
 const TELEMETRY_ENDPOINT = readGlobalString("__TELEMETRY_ENDPOINT__") ?? "https://t.aitc.dev";
 function getVersion() {
-	return "0.1.41";
+	return "0.1.44";
 }
 let panelVisibleSince = null;
 let accumulatedMs = 0;
@@ -3773,7 +3772,7 @@ function buildDeviceProfile(preset, appVersion, landscape) {
 	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);
+	const physHeight = Math.round((preset.screenHeight ?? preset.height) * preset.dpr);
 	return {
 		platform,
 		userAgent: `${baseUa} ${tossToken}`,
@@ -3843,8 +3842,10 @@ function syncDeviceEmulation(preset, landscape) {
 *
 * Panel에서 선택한 디바이스 프리셋을 `document.body`에 적용한다. 정적 CSS는
 * `panel/styles.ts`에 정의되어 있고 (Panel mount 시 head에 주입), 여기서는 프리셋별
-* 동적 값(width/height, 콘텐츠 push용 body padding-top)만 별도 `<style>` 엘리먼트로
-* 관리한다.
+* 동적 값(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 + 여유. */
@@ -3920,16 +3921,19 @@ const VIEWPORT_PRESETS = [
 		id: "iphone-15-pro",
 		label: "iPhone 15 Pro",
 		width: 393,
-		height: 852,
+		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-25"
+			date: "2026-05-28",
+			orientations: ["portrait", "landscape"]
 		}
 	},
 	{
@@ -4104,42 +4108,48 @@ function resolveViewportSize(state) {
 }
 /**
 * 프리셋 + orientation + nav bar 상태로부터 SDK `SafeAreaInsets.get()`이 반환할 insets를
-* 계산한다. iPhone 15 Pro on-device relay 실측(devtools#190)에 맞춘 모델:
+* 계산한다. iPhone 15 Pro on-device relay 실측(devtools#190, #198, #232, #275)에 맞춘 모델:
 *
-* - **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에 유지.
+* - **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, side, navBarVisible, navBarType) {
+function computeSafeAreaInsets(preset, landscape) {
 	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: navBarTop,
+		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: preset.safeAreaBottom,
-		left: side === "left" ? preset.notchInset : 0,
-		right: side === "right" ? preset.notchInset : 0
+		bottom: landscapeBottom,
+		left: preset.notchInset,
+		right: preset.notchInset
 	};
 	return {
 		top: preset.notchInset,
-		bottom: preset.safeAreaBottom,
+		bottom: landscapeBottom,
 		left: 0,
 		right: 0
 	};
@@ -4147,7 +4157,7 @@ function computeSafeAreaInsets(preset, landscape, side, navBarVisible, navBarTyp
 /** 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, state.aitNavBar, state.aitNavBarType);
+	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 });
@@ -4188,12 +4198,10 @@ function removeNavBarElement() {
 *   우측 `⋯` + 구분선 + `×`.
 * - `game`: 투명 배경, 게임 캔버스를 가리지 않도록 우측 `⋯` + 구분선 + `×`만.
 *
-* 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 안이 아니다.
+* 이 오버레이는 **시각 참고용 frame 장식**이다. 실기기에서 토스 native nav bar는 WebView
+* viewport 밖에 그려지므로(devtools#275), mock의 nav bar 오버레이가 콘텐츠 위에 overlap
+* 되는 것이 실제 동작과 일치한다 — body에 `padding-top`을 주입하지 않는다.
+* 시각 notch 오버레이는 body 밖 위쪽에 따로 그린다(`renderNotchOverlay`) — body 안이 아니다.
 *
 * 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
 * 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
@@ -4315,14 +4323,12 @@ function applyViewport(state) {
 	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);
@@ -4341,9 +4347,6 @@ function isViewportOrientation(v) {
 function isAppOrientation(v) {
 	return v === null || v === "portrait" || v === "landscape";
 }
-function isLandscapeSide(v) {
-	return v === "left" || v === "right";
-}
 /** 1 이상의 정수 + VIEWPORT_CUSTOM_MAX 이하인지 검사. sessionStorage 보호용. */
 function isValidCustomDimension(v) {
 	return typeof v === "number" && Number.isInteger(v) && v >= 1 && v <= 4096;
@@ -4371,7 +4374,6 @@ function loadViewportFromStorage() {
 		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 (isLandscapeSide(obj.landscapeSide)) next.landscapeSide = obj.landscapeSide;
 		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;
@@ -4486,16 +4488,6 @@ function renderViewportTab() {
 	orientationSelect.addEventListener("change", () => {
 		aitState.patch("viewport", { orientation: orientationSelect.value });
 	});
-	const landscapeSideSelect = h("select", { className: "ait-select" });
-	if (disabled) landscapeSideSelect.disabled = true;
-	for (const opt of ["left", "right"]) {
-		const option = h("option", { value: opt }, opt);
-		if (opt === vp.landscapeSide) option.selected = true;
-		landscapeSideSelect.appendChild(option);
-	}
-	landscapeSideSelect.addEventListener("change", () => {
-		aitState.patch("viewport", { landscapeSide: landscapeSideSelect.value });
-	});
 	const customRow = h("div", { className: "ait-section" });
 	if (vp.preset === "custom") {
 		const widthInput = h("input", {
@@ -4566,7 +4558,7 @@ 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, vp.aitNavBar, vp.aitNavBarType);
+			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);
@@ -4582,10 +4574,6 @@ function renderViewportTab() {
 		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));
-	if (effectiveOrientation(vp) === "landscape" && vp.preset !== "none" && vp.preset !== "custom") {
-		const notch = getPreset(vp.preset).notch;
-		if (notch === "notch" || notch === "dynamic-island") deviceSection.appendChild(h("div", { className: "ait-row" }, h("label", {}, t("viewport.row.notchSide")), landscapeSideSelect));
-	}
 	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;
 }
@@ -4873,7 +4861,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.41`), 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.44`), 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()) {