@ait-co/devtools 0.1.5 → 0.1.7

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;
@@ -1373,7 +1390,119 @@ function renderEventsTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/iap/index.ts
+/**
+* IAP (인앱결제) mock
+*/
+let orderCounter = 0;
+function generateOrderId() {
+	return `mock-order-${++orderCounter}-${Date.now()}`;
+}
+function buildOrderResult(sku) {
+	const product = aitState.state.iap.products.find((p) => p.sku === sku);
+	const amountStr = product?.displayAmount?.replace(/[^0-9]/g, "") ?? "1000";
+	return {
+		orderId: generateOrderId(),
+		displayName: product?.displayName ?? "Mock Product",
+		displayAmount: product?.displayAmount ?? "1,000원",
+		amount: parseInt(amountStr, 10) || 1e3,
+		currency: "KRW",
+		fraction: 0,
+		miniAppIconUrl: product?.iconUrl || null
+	};
+}
+async function handlePurchase(sku, processProductGrant, onEvent, onError) {
+	const nextResult = aitState.state.iap.nextResult;
+	await new Promise((r) => setTimeout(r, 300));
+	if (nextResult !== "success") {
+		onError({ code: nextResult });
+		return;
+	}
+	const result = buildOrderResult(sku);
+	try {
+		if (!await processProductGrant({ orderId: result.orderId })) {
+			onError({ code: "PRODUCT_NOT_GRANTED_BY_PARTNER" });
+			return;
+		}
+	} catch (e) {
+		onError(e);
+		return;
+	}
+	aitState.patch("iap", { completedOrders: [...aitState.state.iap.completedOrders, {
+		orderId: result.orderId,
+		sku,
+		status: "COMPLETED",
+		date: (/* @__PURE__ */ new Date()).toISOString()
+	}] });
+	await onEvent({
+		type: "success",
+		data: result
+	});
+}
+const IAP = createMockProxy("IAP", {
+	createOneTimePurchaseOrder(params) {
+		handlePurchase(params.options.sku ?? params.options.productId ?? "", params.options.processProductGrant, params.onEvent, params.onError).catch((e) => console.error("[@ait-co/devtools] IAP unexpected error:", e));
+		return () => {};
+	},
+	createSubscriptionPurchaseOrder(params) {
+		handlePurchase(params.options.sku, params.options.processProductGrant, params.onEvent, params.onError).catch((e) => console.error("[@ait-co/devtools] IAP unexpected error:", e));
+		return () => {};
+	},
+	async getProductItemList() {
+		return { products: aitState.state.iap.products.map((p) => ({
+			...p,
+			...p.type === "SUBSCRIPTION" ? { renewalCycle: p.renewalCycle ?? "MONTHLY" } : {}
+		})) };
+	},
+	async getPendingOrders() {
+		return { orders: [...aitState.state.iap.pendingOrders] };
+	},
+	async getCompletedOrRefundedOrders() {
+		return {
+			hasNext: false,
+			nextKey: null,
+			orders: [...aitState.state.iap.completedOrders]
+		};
+	},
+	async completeProductGrant(args) {
+		const idx = aitState.state.iap.pendingOrders.findIndex((o) => o.orderId === args.params.orderId);
+		if (idx !== -1) {
+			const order = aitState.state.iap.pendingOrders[idx];
+			const pendingOrders = aitState.state.iap.pendingOrders.filter((_, i) => i !== idx);
+			const completedOrders = [...aitState.state.iap.completedOrders, {
+				orderId: order.orderId,
+				sku: order.sku,
+				status: "COMPLETED",
+				date: (/* @__PURE__ */ new Date()).toISOString()
+			}];
+			aitState.patch("iap", {
+				pendingOrders,
+				completedOrders
+			});
+		}
+		return true;
+	},
+	async getSubscriptionInfo(_args) {
+		return { subscription: {
+			catalogId: 1,
+			status: "ACTIVE",
+			expiresAt: new Date(Date.now() + 720 * 60 * 60 * 1e3).toISOString(),
+			isAutoRenew: true,
+			gracePeriodExpiresAt: null,
+			isAccessible: true
+		} };
+	}
+});
+//#endregion
 //#region src/panel/tabs/iap.ts
+function formatTimestamp(iso) {
+	const d = new Date(iso);
+	if (Number.isNaN(d.getTime())) return iso;
+	return d.toLocaleTimeString();
+}
+function shortOrderId(orderId) {
+	return orderId.length > 12 ? `…${orderId.slice(-10)}` : orderId;
+}
 function renderIapTab() {
 	const s = aitState.state;
 	const disabled = !s.panelEditable;
@@ -1388,11 +1517,26 @@ function renderIapTab() {
 		"INTERNAL_ERROR"
 	];
 	if (disabled) container.appendChild(monitoringNotice());
+	const pendingOrders = s.iap.pendingOrders;
+	const pendingSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Pending Orders (${pendingOrders.length})`));
+	if (pendingOrders.length === 0) pendingSection.appendChild(h("div", { className: "ait-log-entry" }, "(no pending orders)"));
+	else for (const o of pendingOrders) {
+		const completeBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Complete");
+		if (disabled) completeBtn.disabled = true;
+		completeBtn.addEventListener("click", () => {
+			IAP.completeProductGrant({ params: { orderId: o.orderId } }).catch((err) => console.error("[@ait-co/devtools] completeProductGrant error:", err));
+		});
+		pendingSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, "PENDING"), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.paymentCompletedDate)} `, completeBtn));
+	}
+	const completedOrders = s.iap.completedOrders;
+	const completedSection = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Completed Orders (${completedOrders.length})`));
+	if (completedOrders.length === 0) completedSection.appendChild(h("div", { className: "ait-log-entry" }, "(no completed orders)"));
+	else for (const o of completedOrders) completedSection.appendChild(h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, o.status), `${o.sku} (${shortOrderId(o.orderId)}) · ${formatTimestamp(o.date)}`));
 	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "IAP Simulator"), selectRow("Next Purchase Result", results, s.iap.nextResult, (v) => {
 		aitState.patch("iap", { nextResult: v });
 	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "TossPay"), selectRow("Next Payment Result", ["success", "fail"], s.payment.nextResult, (v) => {
 		aitState.patch("payment", { nextResult: v });
-	}, disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Completed Orders (${s.iap.completedOrders.length})`), ...s.iap.completedOrders.slice(-5).map((o) => h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-type" }, o.status), `${o.sku} (${o.orderId.slice(-8)})`))));
+	}, disabled)), pendingSection, completedSection);
 	return container;
 }
 //#endregion
@@ -1755,7 +1899,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 +1911,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 +1934,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 +2021,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 +2068,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 +2216,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 +2243,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 +2251,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 +2502,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.7`), 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) {
@@ -2378,7 +2541,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport")) refreshPanel();
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}