@ait-co/devtools 0.1.5 → 0.1.6

package/dist/panel/index.js

@@ -101,7 +101,8 @@ const DEFAULT_STATE = {
 		customWidth: 402,
 		customHeight: 874,
 		frame: false,
-		aitNavBar: true
+		aitNavBar: true,
+		aitNavBarType: "partner"
 	}
 };
 function generateDeviceId() {
@@ -707,6 +708,22 @@ const PANEL_STYLES = `
   .ait-navbar-back { padding: 0 8px; font-size: 24px; }
   .ait-navbar-divider { width: 1px; height: 16px; background: rgba(0, 0, 0, 0.15); }
 
+  /* Game variant: 투명 배경, 우측 actions만 — 풀스크린 게임 캔버스를 가리지 않는다 */
+  .ait-navbar.ait-navbar-game {
+    background: transparent;
+    backdrop-filter: none;
+    justify-content: flex-end;
+    color: #fff;
+  }
+  .ait-navbar.ait-navbar-game .ait-navbar-actions {
+    background: rgba(0, 0, 0, 0.35);
+    color: #fff;
+  }
+  .ait-navbar.ait-navbar-game .ait-navbar-divider {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  .ait-navbar.ait-navbar-game .ait-navbar-btn:hover { color: #8ab4ff; }
+
   @media (max-width: 720px) {
     .ait-panel.open {
       position: fixed;
@@ -1755,7 +1772,11 @@ function removeNavBarElement() {
 }
 /**
 * Apps in Toss host nav bar 렌더. OS status bar 아래에 48px 높이로 쌓인다.
-* 구성: 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`), 우측 `⋯` + 구분선 + `×`.
+*
+* 변형(SDK `webViewProps.type`과 의미 일치):
+* - `partner` (기본): 흰 배경, 좌측 뒤로가기(‹), 앱 아이콘 + 이름(`brand.displayName`),
+*   우측 `⋯` + 구분선 + `×`.
+* - `game`: 투명 배경, 게임 캔버스를 가리지 않도록 우측 `⋯` + 구분선 + `×`만.
 *
 * `env(safe-area-inset-top)`에는 이 높이가 포함되지 않으므로 (공식 SDK 확인),
 * 오버레이는 preset.safeAreaTop만큼 아래로 내려서 그린다.
@@ -1763,23 +1784,14 @@ function removeNavBarElement() {
 * 뒤로가기 버튼은 `__ait:backEvent`를 트리거하고, X 버튼은 `closeView()`를 호출한다.
 * 실제 SDK 이벤트 플러밍을 한 곳에서 검증할 수 있다.
 */
-function renderNavBar(preset, displayName) {
+function renderNavBar(preset, displayName, type) {
 	removeNavBarElement();
 	const el = h("div", {
 		id: NAV_BAR_ELEMENT_ID,
-		className: "ait-navbar",
+		className: `ait-navbar ait-navbar-${type}`,
 		"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",
@@ -1795,9 +1807,22 @@ function renderNavBar(preset, displayName) {
 	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));
+	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);
 }
 /**
@@ -1869,7 +1894,7 @@ function applyViewport(state) {
 	else removeNotchElement();
 	if (preset && state.frame && !landscape && preset.safeAreaBottom > 0) renderHomeIndicator();
 	else removeHomeIndicator();
-	if (preset && state.aitNavBar && !landscape) renderNavBar(preset, aitState.state.brand.displayName);
+	if (preset && state.aitNavBar && !landscape) renderNavBar(preset, aitState.state.brand.displayName, state.aitNavBarType);
 	else removeNavBarElement();
 }
 function isViewportPresetId(v) {
@@ -1916,6 +1941,7 @@ function loadViewportFromStorage() {
 		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;
@@ -2063,6 +2089,16 @@ function renderViewportTab() {
 	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" }, "No viewport constraint — body fills the window."));
@@ -2080,7 +2116,7 @@ function renderViewportTab() {
 			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)`)));
+		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) · ${vp.aitNavBarType}`)));
 		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));
@@ -2088,7 +2124,7 @@ function renderViewportTab() {
 		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);
+	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), h("div", { className: "ait-row" }, h("label", {}, "Nav bar type"), navBarTypeSelect)), statusEl);
 	return container;
 }
 //#endregion
@@ -2339,7 +2375,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.5`), 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.6`), 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) {