@ait-co/devtools 0.1.8 → 0.1.9

package/dist/panel/index.js

@@ -117,6 +117,7 @@ function generateDeviceId() {
 var AitStateManager = class {
 	_state;
 	_listeners = /* @__PURE__ */ new Set();
+	_inTransaction = false;
 	constructor() {
 		this._state = structuredClone(DEFAULT_STATE);
 		try {
@@ -155,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 = {
@@ -179,6 +208,7 @@ var AitStateManager = class {
 		this._notify();
 	}
 	_notify() {
+		if (this._inTransaction) return;
 		for (const listener of this._listeners) listener();
 	}
 };
@@ -573,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;
@@ -1781,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;
@@ -2449,6 +2845,10 @@ const TABS = [
 		id: "env",
 		label: "Environment"
 	},
+	{
+		id: "presets",
+		label: "Presets"
+	},
 	{
 		id: "viewport",
 		label: "Viewport"
@@ -2489,6 +2889,7 @@ const TABS = [
 function createTabRenderers(refreshPanel) {
 	return {
 		env: renderEnvironmentTab,
+		presets: () => renderPresetsTab(refreshPanel),
 		permissions: renderPermissionsTab,
 		location: renderLocationTab,
 		device: renderDeviceTab,
@@ -2695,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.8`), 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) {
@@ -2734,7 +3135,7 @@ function mount() {
 	});
 	aitState.subscribe(() => {
 		try {
-			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device" || currentTab === "viewport" || currentTab === "iap" || currentTab === "ads")) 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);
 		}