@ait-co/devtools 0.1.3 → 0.1.5

package/dist/panel/index.js

@@ -92,7 +92,17 @@ const DEFAULT_STATE = {
 		images: [],
 		clipboardText: ""
 	},
-	panelEditable: true
+	panelEditable: true,
+	viewport: {
+		preset: "none",
+		orientation: "auto",
+		appOrientation: null,
+		landscapeSide: "left",
+		customWidth: 402,
+		customHeight: 874,
+		frame: false,
+		aitNavBar: true
+	}
 };
 function generateDeviceId() {
 	const stored = localStorage.getItem("__ait_device_id");
@@ -560,6 +570,143 @@ const PANEL_STYLES = `
     color: #e53e3e; /* readable on both light (#fff) and dark (#1a1a2e) panel backgrounds */
   }
 
+  /* Viewport tab status rows */
+  .ait-status-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    font-size: 11px;
+    color: #888;
+    padding: 3px 0;
+    border-bottom: 1px dashed #2a2a4a;
+    gap: 8px;
+  }
+  .ait-status-row:last-child { border-bottom: none; }
+  .ait-status-row .ait-status-value {
+    font-family: 'SF Mono', 'Menlo', monospace;
+    color: #95e6cb;
+    font-size: 11px;
+    text-align: right;
+    word-break: break-word;
+  }
+
+  /* === Viewport simulation === */
+  /* Static rules. Dynamic per-preset values (width/height, navbar top offset)
+     are still injected via a separate <style id="__ait-viewport-style">. */
+  html.ait-viewport-active {
+    background: #0a0a14;
+    min-height: 100dvh;
+  }
+  html.ait-viewport-active body {
+    position: relative;
+    /* isolation: isolate creates a stacking context so notch/navbar z-index
+       cannot escape body and paint over the floating Panel toggle. */
+    isolation: isolate;
+    margin: 24px auto;
+    overflow: auto;
+    background: #fff;
+    box-sizing: border-box;
+  }
+  html.ait-viewport-framed body {
+    border-radius: 36px;
+    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) */
+  .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-pill {
+    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%; }
+
+  /* Home indicator pill (bottom of body, iPhones with safe-area bottom > 0) */
+  .ait-home-indicator {
+    position: absolute;
+    bottom: 8px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 134px;
+    height: 5px;
+    border-radius: 3px;
+    background: rgba(0, 0, 0, 0.85);
+    z-index: 10;
+    pointer-events: none;
+  }
+
+  /* Apps in Toss host nav bar — sits directly below the OS status bar */
+  .ait-navbar {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 48px; /* AIT_NAV_BAR_HEIGHT */
+    background: rgba(255, 255, 255, 0.92);
+    backdrop-filter: blur(8px);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 12px;
+    box-sizing: border-box;
+    font: 500 15px -apple-system, BlinkMacSystemFont, 'Pretendard', sans-serif;
+    color: #1a1a1a;
+    z-index: 10;
+  }
+  .ait-navbar-title {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: 1;
+    margin-left: 4px;
+    overflow: hidden;
+  }
+  .ait-navbar-icon {
+    width: 22px;
+    height: 22px;
+    border-radius: 6px;
+    background: linear-gradient(135deg, #3182f6, #7c3aed);
+    flex-shrink: 0;
+  }
+  .ait-navbar-name {
+    font-size: 15px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .ait-navbar-actions {
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.05);
+    border-radius: 999px;
+    padding: 4px 8px;
+    gap: 4px;
+  }
+  .ait-navbar-btn {
+    background: none;
+    border: none;
+    padding: 2px 8px;
+    font: inherit;
+    font-size: 18px;
+    color: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .ait-navbar-btn:hover { color: #3182f6; }
+  .ait-navbar-back { padding: 0 8px; font-size: 24px; }
+  .ait-navbar-divider { width: 1px; height: 16px; background: rgba(0, 0, 0, 0.15); }
+
   @media (max-width: 720px) {
     .ait-panel.open {
       position: fixed;
@@ -1323,12 +1470,638 @@ function renderStorageTab(refreshPanel) {
 	return container;
 }
 //#endregion
+//#region src/mock/navigation/index.ts
+async function closeView() {
+	console.log("[@ait-co/devtools] closeView called");
+	window.history.back();
+}
+async function requestReview() {
+	console.log("[@ait-co/devtools] requestReview called");
+}
+requestReview.isSupported = () => true;
+async function getServerTime() {
+	return Date.now();
+}
+getServerTime.isSupported = () => true;
+//#endregion
+//#region src/panel/viewport.ts
+/**
+* Viewport 시뮬레이션 유틸
+*
+* Panel에서 선택한 디바이스 프리셋을 `document.body`에 적용한다. 정적 CSS는
+* `panel/styles.ts`에 정의되어 있고 (Panel mount 시 head에 주입), 여기서는 프리셋별
+* 동적 값(width/height, navbar top offset)만 별도 `<style>` 엘리먼트로 관리한다.
+*/
+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",
+	safeAreaTop: 0,
+	safeAreaBottom: 0
+};
+/**
+* Device presets (2026). CSS viewport 크기는 실제 기기의 `window.innerWidth/innerHeight`.
+* iPhone 17 시리즈는 2025-09 출시. iPhone Air와 Galaxy S26 시리즈는 2026-04 기준 미출시라
+* 추정 값(`(est)` 라벨 표기). 실제 출시 후 값을 갱신한다.
+*
+* iPhone 17과 17 Pro는 CSS viewport / DPR / safe area가 동일 — 이는 의도이며 카피-페이스트
+* 실수가 아니다. Apple의 17 lineup은 base와 Pro의 web-relevant 스펙이 같다.
+*/
+const VIEWPORT_PRESETS = [
+	NONE_PRESET,
+	{
+		id: "iphone-se-3",
+		label: "iPhone SE (3rd gen)",
+		width: 375,
+		height: 667,
+		dpr: 2,
+		notch: "none",
+		safeAreaTop: 20,
+		safeAreaBottom: 0
+	},
+	{
+		id: "iphone-16e",
+		label: "iPhone 16e",
+		width: 390,
+		height: 844,
+		dpr: 3,
+		notch: "notch",
+		safeAreaTop: 47,
+		safeAreaBottom: 34
+	},
+	{
+		id: "iphone-17",
+		label: "iPhone 17",
+		width: 402,
+		height: 874,
+		dpr: 3,
+		notch: "dynamic-island",
+		safeAreaTop: 59,
+		safeAreaBottom: 34
+	},
+	{
+		id: "iphone-air",
+		label: "iPhone Air (est)",
+		width: 420,
+		height: 912,
+		dpr: 3,
+		notch: "dynamic-island",
+		safeAreaTop: 59,
+		safeAreaBottom: 34
+	},
+	{
+		id: "iphone-17-pro",
+		label: "iPhone 17 Pro",
+		width: 402,
+		height: 874,
+		dpr: 3,
+		notch: "dynamic-island",
+		safeAreaTop: 59,
+		safeAreaBottom: 34
+	},
+	{
+		id: "iphone-17-pro-max",
+		label: "iPhone 17 Pro Max",
+		width: 440,
+		height: 956,
+		dpr: 3,
+		notch: "dynamic-island",
+		safeAreaTop: 62,
+		safeAreaBottom: 34
+	},
+	{
+		id: "galaxy-s26",
+		label: "Galaxy S26 (est)",
+		width: 384,
+		height: 832,
+		dpr: 3,
+		notch: "punch-hole-center",
+		safeAreaTop: 32,
+		safeAreaBottom: 0
+	},
+	{
+		id: "galaxy-s26-plus",
+		label: "Galaxy S26+ (est)",
+		width: 412,
+		height: 915,
+		dpr: 3,
+		notch: "punch-hole-center",
+		safeAreaTop: 32,
+		safeAreaBottom: 0
+	},
+	{
+		id: "galaxy-s26-ultra",
+		label: "Galaxy S26 Ultra (est)",
+		width: 412,
+		height: 915,
+		dpr: 3.5,
+		notch: "punch-hole-center",
+		safeAreaTop: 40,
+		safeAreaBottom: 0
+	},
+	{
+		id: "galaxy-z-flip7",
+		label: "Galaxy Z Flip7",
+		width: 412,
+		height: 990,
+		dpr: 3,
+		notch: "punch-hole-center",
+		safeAreaTop: 36,
+		safeAreaBottom: 0
+	},
+	{
+		id: "galaxy-z-fold7-folded",
+		label: "Galaxy Z Fold7 (folded)",
+		width: 384,
+		height: 870,
+		dpr: 3,
+		notch: "punch-hole-center",
+		safeAreaTop: 32,
+		safeAreaBottom: 0
+	},
+	{
+		id: "galaxy-z-fold7-unfolded",
+		label: "Galaxy Z Fold7 (unfolded)",
+		width: 768,
+		height: 884,
+		dpr: 2.625,
+		notch: "punch-hole-center",
+		safeAreaTop: 32,
+		safeAreaBottom: 0
+	},
+	{
+		id: "custom",
+		label: "Custom",
+		width: 0,
+		height: 0,
+		dpr: 1,
+		notch: "none",
+		safeAreaTop: 0,
+		safeAreaBottom: 0
+	}
+];
+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
+	};
+}
+/**
+* 프리셋 + landscape 여부 + landscape side로부터 OS-level safe-area insets를 계산한다.
+*
+* - 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가 유지된다.
+*/
+function computeSafeAreaInsets(preset, landscape, side) {
+	if (preset.id === "none" || preset.id === "custom") return {
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	};
+	if (!landscape) return {
+		top: preset.safeAreaTop,
+		bottom: preset.safeAreaBottom,
+		left: 0,
+		right: 0
+	};
+	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
+	};
+	return {
+		top: preset.safeAreaTop,
+		bottom: preset.safeAreaBottom,
+		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", state.landscapeSide);
+	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 아래에 48px 높이로 쌓인다.
+* 구성: 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`), 우측 `⋯` + 구분선 + `×`.
+*
+* `env(safe-area-inset-top)`에는 이 높이가 포함되지 않으므로 (공식 SDK 확인),
+* 오버레이는 preset.safeAreaTop만큼 아래로 내려서 그린다.
+*
+* 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
+* 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
+*/
+function renderNavBar(preset, displayName) {
+	removeNavBarElement();
+	const el = h("div", {
+		id: NAV_BAR_ELEMENT_ID,
+		className: "ait-navbar",
+		"aria-hidden": "true"
+	});
+	el.style.top = `${preset.safeAreaTop}px`;
+	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 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 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), h("div", { className: "ait-navbar-actions" }, moreBtn, h("span", { className: "ait-navbar-divider" }), closeBtn));
+	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);
+}
+/**
+* DOM에 뷰포트 제약을 적용한다.
+* - `html.ait-viewport-active` 클래스로 정적 CSS(styles.ts) 활성화
+* - body의 width/height는 preset 값으로, navbar top offset은 safeAreaTop으로 인라인 주입
+*/
+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();
+		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";
+	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(preset, aitState.state.brand.displayName);
+	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";
+}
+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;
+}
+/** 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 (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;
+		if (typeof obj.aitNavBar === "boolean") next.aitNavBar = obj.aitNavBar;
+		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
+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 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", {
+			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" }, "Custom size"), h("div", { className: "ait-row" }, h("label", {}, "Width (px)"), widthInput), h("div", { className: "ait-row" }, h("label", {}, "Height (px)"), 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 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" }, "No viewport constraint — body fills the window."));
+	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" ? `${effOrient} (auto)` : effOrient;
+		rows.push(h("div", { className: "ait-status-row" }, h("span", {}, "CSS / physical"), 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", {}, "Safe area"), h("span", { className: "ait-status-value" }, `T${insets.top} R${insets.right} B${insets.bottom} L${insets.left}`)));
+		}
+		if (vp.aitNavBar && !landscape) rows.push(h("div", { className: "ait-status-row" }, h("span", {}, "AIT nav bar"), h("span", { className: "ait-status-value" }, `48px (excl. SafeArea)`)));
+		for (const row of rows) statusEl.appendChild(row);
+	}
+	const deviceSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device"), h("div", { className: "ait-row" }, h("label", {}, "Preset"), presetSelect), h("div", { className: "ait-row" }, h("label", {}, "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", {}, "Notch side"), landscapeSideSelect));
+	}
+	container.append(deviceSection, customRow, h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Appearance"), h("div", { className: "ait-row" }, h("label", {}, "Show frame"), frameCheckbox), h("div", { className: "ait-row" }, h("label", {}, "Show Apps in Toss nav bar"), navBarCheckbox)), statusEl);
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/index.ts
 const TABS = [
 	{
 		id: "env",
 		label: "Environment"
 	},
+	{
+		id: "viewport",
+		label: "Viewport"
+	},
 	{
 		id: "permissions",
 		label: "Permissions"
@@ -1364,6 +2137,7 @@ function createTabRenderers(refreshPanel) {
 		permissions: renderPermissionsTab,
 		location: renderLocationTab,
 		device: renderDeviceTab,
+		viewport: renderViewportTab,
 		iap: renderIapTab,
 		events: renderEventsTab,
 		analytics: renderAnalyticsTab,
@@ -1537,6 +2311,7 @@ function mount() {
 	if (typeof document === "undefined") return;
 	if (document.querySelector(".ait-panel-toggle")) return;
 	setDeviceRefreshPanel(refreshPanel);
+	initViewport();
 	const style = document.createElement("style");
 	style.textContent = PANEL_STYLES;
 	document.head.appendChild(style);
@@ -1564,7 +2339,7 @@ function mount() {
 		mockBadge.textContent = aitState.state.panelEditable ? "EDIT" : "READ-ONLY";
 		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.3`), 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.5`), closeBtn);
 	const header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
 	tabsEl = h("div", { className: "ait-panel-tabs" });
 	for (const tab of TABS) {
@@ -1603,7 +2378,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device")) refreshPanel();
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}