@ait-co/devtools 0.1.7 → 0.1.9

package/dist/panel/index.js

@@ -71,7 +71,9 @@ const DEFAULT_STATE = {
 	},
 	ads: {
 		isLoaded: false,
-		nextEvent: "loaded"
+		nextEvent: "loaded",
+		forceNoFill: false,
+		lastEvent: null
 	},
 	game: {
 		profile: {
@@ -115,6 +117,7 @@ function generateDeviceId() {
 var AitStateManager = class {
 	_state;
 	_listeners = /* @__PURE__ */ new Set();
+	_inTransaction = false;
 	constructor() {
 		this._state = structuredClone(DEFAULT_STATE);
 		try {
@@ -153,6 +156,34 @@ var AitStateManager = class {
 		this._listeners.add(listener);
 		return () => this._listeners.delete(listener);
 	}
+	/**
+	* 한 묶음의 update/patch 호출을 묶어 listener notify 1회로 만든다.
+	* preset 적용처럼 여러 슬라이스를 동시에 바꿀 때 panel re-render 폭주를
+	* 방지한다. 중첩 호출은 outermost transaction이 끝날 때 한 번만 notify
+	* (inner도 throw해도 outer finally가 flag를 복구한다).
+	*
+	* Rollback은 없다 — `fn`이 throw해도 그때까지의 state 변경은 유지된다.
+	* 구독자가 partial state를 영원히 못 보는 사고를 막기 위해, throw 여부와
+	* 무관하게 항상 한 번 notify한 뒤 throw를 propagate한다. DB transaction이
+	* 아니라 "여러 mutation을 한 notify로 묶는 batch"라고 생각하면 된다.
+	*
+	* Listener는 throw해선 안 된다 — finally 안의 `_notify()`가 throw하면 원래
+	* `fn`의 throw를 덮어버린다. 우리 구독자는 panel re-render뿐이라 실제
+	* 발생 사례는 없지만, 외부에서 listener를 등록할 때 주의.
+	*/
+	transaction(fn) {
+		if (this._inTransaction) {
+			fn();
+			return;
+		}
+		this._inTransaction = true;
+		try {
+			fn();
+		} finally {
+			this._inTransaction = false;
+			this._notify();
+		}
+	}
 	/** 분석 로그 추가 */
 	logAnalytics(entry) {
 		this._state = {
@@ -177,6 +208,7 @@ var AitStateManager = class {
 		this._notify();
 	}
 	_notify() {
+		if (this._inTransaction) return;
 		for (const listener of this._listeners) listener();
 	}
 };
@@ -571,6 +603,38 @@ const PANEL_STYLES = `
     color: #e53e3e; /* readable on both light (#fff) and dark (#1a1a2e) panel backgrounds */
   }
 
+  /* Presets tab */
+  .ait-preset-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 4px 0;
+    border-bottom: 1px solid #2a2a4a;
+  }
+  .ait-preset-row.ait-preset-active .ait-preset-label {
+    color: #4ade80;
+    font-weight: 600;
+  }
+  .ait-preset-label {
+    font-size: 12px;
+    color: #ddd;
+    flex: 1;
+    word-break: break-word;
+  }
+  .ait-preset-actions {
+    display: flex;
+    gap: 4px;
+    flex-shrink: 0;
+  }
+  .ait-preset-description {
+    font-size: 11px;
+    color: #777;
+    padding: 0 0 6px 4px;
+    border-bottom: 1px solid #2a2a4a;
+    margin-bottom: 0;
+  }
+
   /* Viewport tab status rows */
   .ait-status-row {
     display: flex;
@@ -1335,6 +1399,192 @@ function renderDeviceTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/ads/index.ts
+/**
+* 광고 mock (GoogleAdMob, TossAds, FullScreenAd)
+*/
+function withIsSupported(fn) {
+	fn.isSupported = () => true;
+	return fn;
+}
+const GoogleAdMob = createMockProxy("GoogleAdMob", {
+	loadAppsInTossAdMob: withIsSupported((args) => {
+		setTimeout(() => {
+			if (aitState.state.ads.forceNoFill) {
+				args.onError(/* @__PURE__ */ new Error("No fill"));
+				return;
+			}
+			aitState.patch("ads", { isLoaded: true });
+			args.onEvent({
+				type: "loaded",
+				data: { adGroupId: args.options?.adGroupId }
+			});
+		}, 200);
+		return () => {};
+	}),
+	showAppsInTossAdMob: withIsSupported((args) => {
+		if (!aitState.state.ads.isLoaded) {
+			args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+			return () => {};
+		}
+		setTimeout(() => args.onEvent({ type: "requested" }), 50);
+		setTimeout(() => args.onEvent({ type: "show" }), 100);
+		setTimeout(() => args.onEvent({ type: "impression" }), 150);
+		setTimeout(() => {
+			args.onEvent({
+				type: "userEarnedReward",
+				data: {
+					unitType: "coins",
+					unitAmount: 10
+				}
+			});
+		}, 1e3);
+		setTimeout(() => {
+			args.onEvent({ type: "dismissed" });
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+		return () => {};
+	}),
+	isAppsInTossAdMobLoaded: withIsSupported(async (_options) => aitState.state.ads.isLoaded)
+});
+createMockProxy("TossAds", {
+	initialize: withIsSupported((_options) => {
+		console.log("[@ait-co/devtools] TossAds.initialize (mock)");
+	}),
+	attach: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:16px;text-align:center;color:#666;font-size:14px;";
+			placeholder.textContent = "[@ait-co/devtools] TossAds Placeholder";
+			el.appendChild(placeholder);
+		}
+	}),
+	attachBanner: withIsSupported((_adGroupId, target, _options) => {
+		const el = typeof target === "string" ? document.querySelector(target) : target;
+		if (el) {
+			const placeholder = document.createElement("div");
+			placeholder.style.cssText = "background:#f0f0f0;border:1px dashed #999;padding:12px;text-align:center;color:#666;font-size:12px;";
+			placeholder.textContent = "[@ait-co/devtools] Banner Ad Placeholder";
+			el.appendChild(placeholder);
+		}
+		return { destroy: () => {} };
+	}),
+	destroy: withIsSupported((_slotId) => {}),
+	destroyAll: withIsSupported(() => {})
+});
+const loadFullScreenAd = withIsSupported((args) => {
+	setTimeout(() => {
+		if (aitState.state.ads.forceNoFill) {
+			args.onError(/* @__PURE__ */ new Error("No fill"));
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		args.onEvent({
+			type: "loaded",
+			data: { adGroupId: args.options?.adGroupId }
+		});
+	}, 200);
+	return () => {};
+});
+const showFullScreenAd = withIsSupported((args) => {
+	if (!aitState.state.ads.isLoaded) {
+		args.onError(/* @__PURE__ */ new Error("Ad not loaded"));
+		return () => {};
+	}
+	setTimeout(() => args.onEvent({ type: "show" }), 100);
+	setTimeout(() => args.onEvent({ type: "dismissed" }), 1500);
+	return () => {};
+});
+//#endregion
+//#region src/panel/tabs/ads.ts
+function recordEvent(type) {
+	aitState.patch("ads", { lastEvent: {
+		type,
+		timestamp: Date.now()
+	} });
+}
+function recordError(message) {
+	recordEvent(`error: ${message}`);
+}
+function statusRow(label, value) {
+	return h("div", { className: "ait-row" }, h("label", {}, label), h("span", { style: "font-family:SF Mono,Menlo,monospace;font-size:11px;color:#aaa" }, value));
+}
+function lastEventLine() {
+	const last = aitState.state.ads.lastEvent;
+	if (!last) return h("div", { className: "ait-log-entry" }, h("span", { style: "color:#555" }, "No events yet"));
+	const time = new Date(last.timestamp).toLocaleTimeString();
+	return h("div", { className: "ait-log-entry" }, h("span", {
+		className: "ait-log-type",
+		style: last.type.startsWith("error:") ? "color:#e74c3c" : ""
+	}, last.type), h("span", { className: "ait-log-time" }, time));
+}
+function adSection(title, onLoad, onShow, disabled) {
+	const loadBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Load");
+	const showBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Show");
+	if (disabled) {
+		loadBtn.disabled = true;
+		showBtn.disabled = true;
+	}
+	loadBtn.addEventListener("click", onLoad);
+	showBtn.addEventListener("click", onShow);
+	return h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title), h("div", { className: "ait-btn-row" }, loadBtn, showBtn));
+}
+function renderAdsTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const forceNoFillCb = h("input", {
+		type: "checkbox",
+		className: "ait-checkbox"
+	});
+	forceNoFillCb.checked = s.ads.forceNoFill;
+	if (disabled) forceNoFillCb.disabled = true;
+	forceNoFillCb.addEventListener("change", () => {
+		aitState.patch("ads", { forceNoFill: forceNoFillCb.checked });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Ads State"), statusRow("isLoaded", String(s.ads.isLoaded)), h("div", { className: "ait-row" }, h("label", {}, "Force \"no fill\""), forceNoFillCb), lastEventLine()), adSection("GoogleAdMob", () => {
+		GoogleAdMob.loadAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		GoogleAdMob.showAppsInTossAdMob({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled), adSection("TossAds", () => {
+		if (aitState.state.ads.forceNoFill) {
+			recordError("No fill");
+			return;
+		}
+		aitState.patch("ads", { isLoaded: true });
+		recordEvent("loaded");
+	}, () => {
+		if (!aitState.state.ads.isLoaded) {
+			recordError("Ad not loaded");
+			return;
+		}
+		recordEvent("show");
+		setTimeout(() => {
+			recordEvent("dismissed");
+			aitState.patch("ads", { isLoaded: false });
+		}, 1500);
+	}, disabled), adSection("FullScreenAd", () => {
+		loadFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, () => {
+		showFullScreenAd({
+			onEvent: (e) => recordEvent(e.type),
+			onError: (err) => recordError(err.message)
+		});
+	}, disabled));
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/analytics.ts
 function renderAnalyticsTab() {
 	const disabled = !aitState.state.panelEditable;
@@ -1593,6 +1843,340 @@ function renderPermissionsTab() {
 	return container;
 }
 //#endregion
+//#region src/mock/preset-store.ts
+const PREFIX = "__ait_preset:";
+function safeLocalStorage() {
+	try {
+		if (typeof localStorage === "undefined") return null;
+		return localStorage;
+	} catch {
+		return null;
+	}
+}
+function isObject(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/**
+* Storage에서 읽은 임의 JSON을 MockPreset으로 검증. id/label 필수, state는
+* object여야 함. 실패하면 null — caller가 storage entry를 무시하거나 정리하면 된다.
+*
+* `state`의 내부 키/값은 검증하지 않는다. `applyPreset`이 `pickKnownKeys`로
+* 키만 거른 뒤 그대로 state에 패치하므로 잘못된 enum 값이 통과될 수 있지만,
+* mock state라 보안 위협은 없다 — 새 enum 값이 추가됐을 때 저장된 preset을
+* reject하지 않으려는 의도.
+*/
+function parsePreset(raw) {
+	try {
+		const parsed = JSON.parse(raw);
+		if (!isObject(parsed)) return null;
+		const { id, label, description, state } = parsed;
+		if (typeof id !== "string" || id.length === 0) return null;
+		if (typeof label !== "string" || label.length === 0) return null;
+		if (!isObject(state)) return null;
+		return {
+			id,
+			label,
+			description: typeof description === "string" ? description : void 0,
+			state
+		};
+	} catch {
+		return null;
+	}
+}
+function listUserPresets() {
+	const ls = safeLocalStorage();
+	if (!ls) return [];
+	const out = [];
+	for (let i = 0; i < ls.length; i++) {
+		const key = ls.key(i);
+		if (!key?.startsWith(PREFIX)) continue;
+		const raw = ls.getItem(key);
+		if (!raw) continue;
+		const preset = parsePreset(raw);
+		if (preset) out.push(preset);
+	}
+	return out.sort((a, b) => a.label.localeCompare(b.label));
+}
+/**
+* Preset을 저장한다. label에서 slug를 derive — 같은 slug가 이미 있으면 `-2`, `-3`
+* suffix를 붙여 새 entry를 만든다 (기존 entry 덮어쓰기 아님). UI는 label만 받으면 된다.
+*
+* Throws:
+* - label trim한 뒤 빈 문자열일 때
+* - localStorage 미가용 환경일 때 (SSR 등)
+* - `setItem` 실패 (`QuotaExceededError` 등) — caller가 처리해야 함
+*/
+function saveUserPreset(label, state, description) {
+	const trimmed = label.trim();
+	if (trimmed.length === 0) throw new Error("Preset label cannot be empty");
+	const ls = safeLocalStorage();
+	if (!ls) throw new Error("localStorage not available");
+	const id = generateId(trimmed, ls);
+	const preset = {
+		id,
+		label: trimmed,
+		state,
+		...description !== void 0 && description.length > 0 ? { description } : {}
+	};
+	ls.setItem(PREFIX + id, JSON.stringify(preset));
+	return preset;
+}
+function deleteUserPreset(id) {
+	const ls = safeLocalStorage();
+	if (!ls) return;
+	ls.removeItem(PREFIX + id);
+}
+/** 충돌 시 `-2`, `-3` 등 suffix를 붙여 unique한 id 만든다. */
+function generateId(label, ls) {
+	const base = label.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40) || "preset";
+	let candidate = base;
+	let n = 2;
+	while (ls.getItem(PREFIX + candidate) !== null) {
+		candidate = `${base}-${n}`;
+		n += 1;
+	}
+	return candidate;
+}
+//#endregion
+//#region src/mock/presets.ts
+const builtInPresets = [
+	{
+		id: "all-allowed",
+		label: "All allowed (default-ish)",
+		description: "모든 권한 허용, WIFI, 로그인됨, IAP success",
+		state: {
+			networkStatus: "WIFI",
+			permissions: {
+				camera: "allowed",
+				photos: "allowed",
+				geolocation: "allowed",
+				clipboard: "allowed",
+				contacts: "allowed",
+				microphone: "allowed"
+			},
+			auth: { isLoggedIn: true },
+			iap: { nextResult: "success" },
+			ads: { forceNoFill: false },
+			payment: {
+				nextResult: "success",
+				failReason: ""
+			}
+		}
+	},
+	{
+		id: "permission-denied",
+		label: "Permissions denied",
+		description: "camera / photos / geolocation / contacts 거부",
+		state: { permissions: {
+			camera: "denied",
+			photos: "denied",
+			geolocation: "denied",
+			contacts: "denied"
+		} }
+	},
+	{
+		id: "offline",
+		label: "Offline",
+		description: "getNetworkStatus → OFFLINE, IAP NETWORK_ERROR",
+		state: {
+			networkStatus: "OFFLINE",
+			iap: { nextResult: "NETWORK_ERROR" },
+			payment: {
+				nextResult: "fail",
+				failReason: "NETWORK_ERROR"
+			}
+		}
+	},
+	{
+		id: "logged-out",
+		label: "Logged out",
+		description: "auth.isLoggedIn=false. login flow 검증용",
+		state: { auth: { isLoggedIn: false } }
+	},
+	{
+		id: "iap-pending",
+		label: "IAP payment pending",
+		description: "결제 진행 중 분기 검증",
+		state: { iap: { nextResult: "PAYMENT_PENDING" } }
+	},
+	{
+		id: "ads-no-fill",
+		label: "Ads — no fill",
+		description: "광고 fill 실패 분기 검증",
+		state: {
+			networkStatus: "WIFI",
+			ads: { forceNoFill: true }
+		}
+	}
+];
+/**
+* Preset의 nested slice를 검증된 키만 골라서 풀어낸다. Forward-compat 차원에서
+* 알지 못하는 키는 drop, drop된 키 전부를 모아 한 번에 warn한다.
+*
+* Value 단위 검증은 하지 않는다 — `permissions.camera`에 enum 외 값이 들어와도
+* 그대로 통과한다. mock state라 잘못된 값은 mock 함수 분기 결과만 흔든다.
+* 새 enum 값이 추가됐을 때 저장된 preset을 reject하지 않으려는 의도.
+*/
+function pickKnownKeys(input, allowed) {
+	if (typeof input !== "object" || input === null) return {};
+	const out = {};
+	const dropped = [];
+	for (const [key, value] of Object.entries(input)) if (allowed.includes(key)) out[key] = value;
+	else dropped.push(key);
+	if (dropped.length > 0) console.warn(`[@ait-co/devtools] Preset dropped unknown keys: ${dropped.join(", ")}`);
+	return out;
+}
+const PERMISSION_KEYS = [
+	"camera",
+	"photos",
+	"geolocation",
+	"clipboard",
+	"contacts",
+	"microphone"
+];
+const AUTH_KEYS = [
+	"isLoggedIn",
+	"isTossLoginIntegrated",
+	"userKeyHash"
+];
+const IAP_KEYS = ["nextResult"];
+const ADS_KEYS = [
+	"isLoaded",
+	"nextEvent",
+	"forceNoFill",
+	"lastEvent"
+];
+const PAYMENT_KEYS = ["nextResult", "failReason"];
+/**
+* Preset state를 현재 `aitState`에 적용한다. 정의된 키만 덮어쓰고, 알지 못하는 키는
+* 조용히 drop한다 (한 번 warn). 여러 슬라이스를 적용해도 listener notify는 한 번이다
+* (`aitState.transaction` 사용 — panel re-render 폭주 방지).
+*/
+function applyPreset(state) {
+	aitState.transaction(() => {
+		if (state.networkStatus !== void 0) aitState.update({ networkStatus: state.networkStatus });
+		if (state.permissions !== void 0) aitState.patch("permissions", pickKnownKeys(state.permissions, PERMISSION_KEYS));
+		if (state.auth !== void 0) aitState.patch("auth", pickKnownKeys(state.auth, AUTH_KEYS));
+		if (state.iap !== void 0) {
+			const picked = pickKnownKeys(state.iap, IAP_KEYS);
+			aitState.patch("iap", picked);
+		}
+		if (state.ads !== void 0) aitState.patch("ads", pickKnownKeys(state.ads, ADS_KEYS));
+		if (state.payment !== void 0) aitState.patch("payment", pickKnownKeys(state.payment, PAYMENT_KEYS));
+	});
+}
+/**
+* Preset의 모든 정의된 슬라이스가 현재 state와 일치하는지 검사. UI에서 dirty
+* indicator를 그릴 때 쓴다.
+*
+* 일치한다 = preset이 정의한 키 전부가 그대로다. preset이 정의하지 않은 키는
+* 비교 대상이 아니다 — preset은 partial이므로 다른 토글이 바뀌어도 dirty가 아니다.
+*/
+function matchesPreset(snapshot, preset) {
+	if (preset.networkStatus !== void 0 && snapshot.networkStatus !== preset.networkStatus) return false;
+	if (preset.permissions !== void 0) for (const k of PERMISSION_KEYS) {
+		const want = preset.permissions[k];
+		if (want !== void 0 && snapshot.permissions[k] !== want) return false;
+	}
+	if (preset.auth !== void 0) for (const k of AUTH_KEYS) {
+		const want = preset.auth[k];
+		if (want !== void 0 && snapshot.auth[k] !== want) return false;
+	}
+	if (preset.iap !== void 0) {
+		if (preset.iap.nextResult !== void 0 && snapshot.iap.nextResult !== preset.iap.nextResult) return false;
+	}
+	if (preset.ads !== void 0) {
+		if (preset.ads.forceNoFill !== void 0 && snapshot.ads.forceNoFill !== preset.ads.forceNoFill) return false;
+		if (preset.ads.isLoaded !== void 0 && snapshot.ads.isLoaded !== preset.ads.isLoaded) return false;
+		if (preset.ads.nextEvent !== void 0 && snapshot.ads.nextEvent !== preset.ads.nextEvent) return false;
+	}
+	if (preset.payment !== void 0) for (const k of PAYMENT_KEYS) {
+		const want = preset.payment[k];
+		if (want !== void 0 && snapshot.payment[k] !== want) return false;
+	}
+	return true;
+}
+/**
+* 현재 state에서 preset에 저장할 만한 슬라이스를 추출. "save current as preset"에서 쓴다.
+*/
+function captureCurrentState(snapshot) {
+	return {
+		networkStatus: snapshot.networkStatus,
+		permissions: { ...snapshot.permissions },
+		auth: {
+			isLoggedIn: snapshot.auth.isLoggedIn,
+			isTossLoginIntegrated: snapshot.auth.isTossLoginIntegrated,
+			userKeyHash: snapshot.auth.userKeyHash
+		},
+		iap: { nextResult: snapshot.iap.nextResult },
+		ads: {
+			forceNoFill: snapshot.ads.forceNoFill,
+			isLoaded: snapshot.ads.isLoaded,
+			nextEvent: snapshot.ads.nextEvent
+		},
+		payment: { ...snapshot.payment }
+	};
+}
+//#endregion
+//#region src/panel/tabs/presets.ts
+function renderPresetsTab(refreshPanel) {
+	const disabled = !aitState.state.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const userPresets = listUserPresets();
+	const snapshot = aitState.state;
+	container.append(renderSection("Built-in scenarios", builtInPresets, disabled, snapshot, refreshPanel, false));
+	container.append(renderSection(`Saved presets (${userPresets.length})`, userPresets, disabled, snapshot, refreshPanel, true));
+	const saveBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Save current as preset");
+	if (disabled) saveBtn.disabled = true;
+	saveBtn.addEventListener("click", () => {
+		const label = window.prompt("Preset label?");
+		if (label === null) return;
+		try {
+			saveUserPreset(label, captureCurrentState(aitState.state));
+		} catch (err) {
+			window.alert(err.message);
+			return;
+		}
+		refreshPanel();
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Save"), h("div", { style: "color:#888;font-size:11px;margin-bottom:6px" }, "Capture network / permissions / auth / IAP / ads / payment slices."), saveBtn));
+	return container;
+}
+function renderSection(title, presets, disabled, snapshot, refreshPanel, deletable) {
+	const section = h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, title));
+	if (presets.length === 0) {
+		section.append(h("div", { style: "color:#555;font-size:12px" }, deletable ? "No saved presets yet." : "No built-in presets."));
+		return section;
+	}
+	for (const preset of presets) {
+		const isActive = matchesPreset(snapshot, preset.state);
+		const labelEl = h("span", { className: "ait-preset-label" }, isActive ? `✓ ${preset.label}` : preset.label);
+		const applyBtn = h("button", { className: "ait-btn ait-btn-sm" }, isActive ? "Re-apply" : "Apply");
+		if (disabled) applyBtn.disabled = true;
+		applyBtn.addEventListener("click", () => {
+			applyPreset(preset.state);
+			refreshPanel();
+		});
+		const buttons = [applyBtn];
+		if (deletable) {
+			const delBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Delete");
+			if (disabled) delBtn.disabled = true;
+			delBtn.addEventListener("click", () => {
+				if (!window.confirm(`Delete preset "${preset.label}"?`)) return;
+				deleteUserPreset(preset.id);
+				refreshPanel();
+			});
+			buttons.push(delBtn);
+		}
+		const actions = h("span", { className: "ait-preset-actions" }, ...buttons);
+		const row = h("div", { className: `ait-preset-row${isActive ? " ait-preset-active" : ""}` }, labelEl, actions);
+		section.append(row);
+		if (preset.description) section.append(h("div", { className: "ait-preset-description" }, preset.description));
+	}
+	return section;
+}
+//#endregion
 //#region src/panel/tabs/storage.ts
 function renderStorageTab(refreshPanel) {
 	const disabled = !aitState.state.panelEditable;
@@ -2261,6 +2845,10 @@ const TABS = [
 		id: "env",
 		label: "Environment"
 	},
+	{
+		id: "presets",
+		label: "Presets"
+	},
 	{
 		id: "viewport",
 		label: "Viewport"
@@ -2281,6 +2869,10 @@ const TABS = [
 		id: "iap",
 		label: "IAP"
 	},
+	{
+		id: "ads",
+		label: "Ads"
+	},
 	{
 		id: "events",
 		label: "Events"
@@ -2297,11 +2889,13 @@ const TABS = [
 function createTabRenderers(refreshPanel) {
 	return {
 		env: renderEnvironmentTab,
+		presets: () => renderPresetsTab(refreshPanel),
 		permissions: renderPermissionsTab,
 		location: renderLocationTab,
 		device: renderDeviceTab,
 		viewport: renderViewportTab,
 		iap: renderIapTab,
+		ads: renderAdsTab,
 		events: renderEventsTab,
 		analytics: renderAnalyticsTab,
 		storage: () => renderStorageTab(refreshPanel)
@@ -2502,7 +3096,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.7`), 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.9`), 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) {
@@ -2541,7 +3135,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap")) refreshPanel();
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads" || currentTab === "presets")) refreshPanel();
 		} catch (err) {
 			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
 		}