@ait-co/devtools 0.0.3 → 0.1.0

package/dist/panel/index.js

@@ -109,7 +109,7 @@ var AitStateManager = class {
 		try {
 			this._state.deviceId = generateDeviceId();
 		} catch {
-			this._state.deviceId = "mock-device-" + Math.random().toString(36).slice(2);
+			this._state.deviceId = `mock-device-${Math.random().toString(36).slice(2)}`;
 		}
 	}
 	get state() {
@@ -171,6 +171,41 @@ var AitStateManager = class {
 };
 const aitState = new AitStateManager();
 if (typeof window !== "undefined") window.__ait = aitState;
+//#endregion
+//#region src/panel/helpers.ts
+/**
+* 공통 DOM 헬퍼 함수
+*/
+function h(tag, attrs, ...children) {
+	const el = document.createElement(tag);
+	if (attrs) for (const [k, v] of Object.entries(attrs)) if (k === "className") el.className = v;
+	else el.setAttribute(k, v);
+	for (const child of children) el.append(typeof child === "string" ? document.createTextNode(child) : child);
+	return el;
+}
+function selectRow(label, options, value, onChange, disabled = false) {
+	const select = h("select", { className: "ait-select" });
+	if (disabled) select.disabled = true;
+	for (const opt of options) {
+		const option = h("option", { value: opt }, opt);
+		if (opt === value) option.selected = true;
+		select.appendChild(option);
+	}
+	select.addEventListener("change", () => onChange(select.value));
+	return h("div", { className: "ait-row" }, h("label", {}, label), select);
+}
+function inputRow(label, value, onChange, disabled = false) {
+	const input = h("input", {
+		className: "ait-input",
+		value
+	});
+	if (disabled) input.disabled = true;
+	input.addEventListener("change", () => onChange(input.value));
+	return h("div", { className: "ait-row" }, h("label", {}, label), input);
+}
+function monitoringNotice() {
+	return h("div", { className: "ait-monitoring-notice" }, "Read-only — mock responses are controlled at build time.");
+}
 const PANEL_STYLES = `
   .ait-panel-toggle {
     position: fixed;
@@ -546,113 +581,6 @@ const PANEL_STYLES = `
   }
 `;
 //#endregion
-//#region src/panel/helpers.ts
-/**
-* 공통 DOM 헬퍼 함수
-*/
-function h(tag, attrs, ...children) {
-	const el = document.createElement(tag);
-	if (attrs) for (const [k, v] of Object.entries(attrs)) if (k === "className") el.className = v;
-	else el.setAttribute(k, v);
-	for (const child of children) el.append(typeof child === "string" ? document.createTextNode(child) : child);
-	return el;
-}
-function selectRow(label, options, value, onChange, disabled = false) {
-	const select = h("select", { className: "ait-select" });
-	if (disabled) select.disabled = true;
-	for (const opt of options) {
-		const option = h("option", { value: opt }, opt);
-		if (opt === value) option.selected = true;
-		select.appendChild(option);
-	}
-	select.addEventListener("change", () => onChange(select.value));
-	return h("div", { className: "ait-row" }, h("label", {}, label), select);
-}
-function inputRow(label, value, onChange, disabled = false) {
-	const input = h("input", {
-		className: "ait-input",
-		value
-	});
-	if (disabled) input.disabled = true;
-	input.addEventListener("change", () => onChange(input.value));
-	return h("div", { className: "ait-row" }, h("label", {}, label), input);
-}
-function monitoringNotice() {
-	return h("div", { className: "ait-monitoring-notice" }, "Read-only — mock responses are controlled at build time.");
-}
-//#endregion
-//#region src/panel/tabs/environment.ts
-function renderEnvironmentTab() {
-	const s = aitState.state;
-	const disabled = !s.panelEditable;
-	const container = h("div");
-	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Platform"), selectRow("OS", ["ios", "android"], s.platform, (v) => aitState.update({ platform: v }), disabled), inputRow("App Version", s.appVersion, (v) => aitState.update({ appVersion: v }), disabled), selectRow("Environment", ["toss", "sandbox"], s.environment, (v) => aitState.update({ environment: v }), disabled), inputRow("Locale", s.locale, (v) => aitState.update({ locale: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Network"), selectRow("Status", [
-		"WIFI",
-		"4G",
-		"5G",
-		"3G",
-		"2G",
-		"OFFLINE",
-		"WWAN",
-		"UNKNOWN"
-	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Safe Area Insets"), inputRow("Top", String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)));
-	return container;
-}
-//#endregion
-//#region src/panel/tabs/permissions.ts
-function renderPermissionsTab() {
-	const s = aitState.state;
-	const disabled = !s.panelEditable;
-	const container = h("div");
-	const names = [
-		"camera",
-		"photos",
-		"geolocation",
-		"clipboard",
-		"contacts",
-		"microphone"
-	];
-	const statuses = [
-		"allowed",
-		"denied",
-		"notDetermined"
-	];
-	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device Permissions"), ...names.map((name) => selectRow(name, statuses, s.permissions[name], (v) => {
-		aitState.patch("permissions", { [name]: v });
-	}, disabled))));
-	return container;
-}
-//#endregion
-//#region src/panel/tabs/location.ts
-function renderLocationTab() {
-	const s = aitState.state;
-	const disabled = !s.panelEditable;
-	const container = h("div");
-	if (disabled) container.appendChild(monitoringNotice());
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Current Location"), inputRow("Latitude", String(s.location.coords.latitude), (v) => {
-		const coords = {
-			...s.location.coords,
-			latitude: Number(v)
-		};
-		aitState.patch("location", { coords });
-	}, disabled), inputRow("Longitude", String(s.location.coords.longitude), (v) => {
-		const coords = {
-			...s.location.coords,
-			longitude: Number(v)
-		};
-		aitState.patch("location", { coords });
-	}, disabled), inputRow("Accuracy", String(s.location.coords.accuracy), (v) => {
-		const coords = {
-			...s.location.coords,
-			accuracy: Number(v)
-		};
-		aitState.patch("location", { coords });
-	}, disabled)));
-	return container;
-}
-//#endregion
 //#region src/mock/device/_helpers.ts
 /**
 * 디바이스 모듈 내부 공유 헬퍼
@@ -664,7 +592,7 @@ function generatePlaceholderImage(width, height, text, color) {
 	const ctx = canvas.getContext("2d");
 	if (!ctx) {
 		const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}"><rect fill="${color}" width="${width}" height="${height}"/><text x="50%" y="50%" fill="white" font-size="16" text-anchor="middle" dominant-baseline="middle">${text}</text></svg>`;
-		return "data:image/svg+xml;base64," + btoa(svg);
+		return `data:image/svg+xml;base64,${btoa(svg)}`;
 	}
 	ctx.fillStyle = color;
 	ctx.fillRect(0, 0, width, height);
@@ -704,7 +632,7 @@ const PROMPT_TIMEOUT_MS = 3e4;
 /** @internal device 모듈 내부 전용 */
 function waitForPromptResponse(type) {
 	return new Promise((resolve, reject) => {
-		const eventName = "__ait:prompt-response:" + type;
+		const eventName = `__ait:prompt-response:${type}`;
 		const cancelName = "__ait:prompt-cancel";
 		function cleanup() {
 			clearTimeout(timer);
@@ -730,39 +658,6 @@ function waitForPromptResponse(type) {
 	});
 }
 //#endregion
-//#region src/mock/proxy.ts
-/**
-* 미구현 API용 Proxy 트립와이어.
-*
-* 미구현 프로퍼티에 접근하면 throw한다. 이는 "devtools에서는 멀쩡히 돌지만
-* 실 SDK에선 실제로 동작하는" 시나리오를 차단하기 위한 의도적 선택이다.
-* mock이 미구현인 API는 실 SDK에서는 존재할 수 있고, 사용자가 이를 인지하지
-* 못한 채 개발을 이어가면 배포 시점에 놀라게 된다. 에러 메시지에 이슈 URL을
-* 포함해 사용자가 mock 누락을 제보할 수 있게 한다.
-*/
-const ISSUES_URL = "https://github.com/apps-in-toss-community/devtools/issues";
-function createMockProxy(moduleName, implementations) {
-	return new Proxy(implementations, { get(target, prop) {
-		if (typeof prop === "symbol") return void 0;
-		if (prop in target) return target[prop];
-		throw new Error(`[@ait-co/devtools] ${moduleName}.${prop} is not mocked. This API may exist in @apps-in-toss/web-framework, but devtools' mock does not cover it yet. Please file an issue: ${ISSUES_URL}`);
-	} });
-}
-createMockProxy("Storage", {
-	getItem: async (key) => {
-		return localStorage.getItem(`__ait_storage:${key}`);
-	},
-	setItem: async (key, value) => {
-		localStorage.setItem(`__ait_storage:${key}`, value);
-	},
-	removeItem: async (key) => {
-		localStorage.removeItem(`__ait_storage:${key}`);
-	},
-	clearItems: async () => {
-		Object.keys(localStorage).filter((k) => k.startsWith("__ait_storage:")).forEach((k) => localStorage.removeItem(k));
-	}
-});
-//#endregion
 //#region src/mock/permissions.ts
 /**
 * 권한 시스템 mock
@@ -788,158 +683,56 @@ function checkPermission(name, fnName) {
 	if (aitState.state.permissions[name] === "denied") throw new Error(`[@ait-co/devtools] ${fnName}: Permission "${name}" is denied. Change it in the DevTools panel.`);
 }
 //#endregion
-//#region src/mock/device/location.ts
+//#region src/mock/device/camera.ts
 /**
-* Location mock (getCurrentLocation, startUpdateLocation)
+* Camera & Album Photos mock
 * mock/web/prompt 모드 지원
 */
-function buildLocation() {
+async function openCameraMock() {
+	const images = getMockImages();
 	return {
-		coords: { ...aitState.state.location.coords },
-		timestamp: Date.now(),
-		accessLocation: aitState.state.location.accessLocation
+		id: crypto.randomUUID(),
+		dataUri: images[0]
 	};
 }
-async function getCurrentLocationMock() {
-	return buildLocation();
-}
-async function getCurrentLocationWeb() {
-	return new Promise((resolve) => {
-		if (!navigator.geolocation) {
-			console.warn("[@ait-co/devtools] Geolocation API not available, falling back to mock");
-			resolve(buildLocation());
-			return;
-		}
-		navigator.geolocation.getCurrentPosition((pos) => {
-			resolve({
-				coords: {
-					latitude: pos.coords.latitude,
-					longitude: pos.coords.longitude,
-					altitude: pos.coords.altitude ?? 0,
-					accuracy: pos.coords.accuracy,
-					altitudeAccuracy: pos.coords.altitudeAccuracy ?? 0,
-					heading: pos.coords.heading ?? 0
-				},
-				timestamp: pos.timestamp,
-				accessLocation: "FINE"
+async function openCameraWeb() {
+	return new Promise((resolve, reject) => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = "image/*";
+		input.capture = "environment";
+		let settled = false;
+		input.onchange = () => {
+			settled = true;
+			const file = input.files?.[0];
+			if (!file) {
+				reject(/* @__PURE__ */ new Error("No file selected"));
+				return;
+			}
+			const reader = new FileReader();
+			reader.onload = () => resolve({
+				id: crypto.randomUUID(),
+				dataUri: reader.result
 			});
-		}, () => {
-			console.warn("[@ait-co/devtools] Geolocation failed, falling back to mock");
-			resolve(buildLocation());
-		});
+			reader.onerror = () => reject(/* @__PURE__ */ new Error("Failed to read file"));
+			reader.readAsDataURL(file);
+		};
+		const onFocus = () => {
+			setTimeout(() => {
+				if (!settled) reject(/* @__PURE__ */ new Error("File picker cancelled"));
+				window.removeEventListener("focus", onFocus);
+			}, 300);
+		};
+		window.addEventListener("focus", onFocus);
+		input.click();
 	});
 }
-async function getCurrentLocationPrompt() {
-	return waitForPromptResponse("location");
-}
-const _getCurrentLocation = async (_options) => {
-	checkPermission("geolocation", "getCurrentLocation");
-	const mode = aitState.state.deviceModes.location;
-	if (mode === "web") return getCurrentLocationWeb();
-	if (mode === "prompt") return getCurrentLocationPrompt();
-	return getCurrentLocationMock();
-};
-withPermission(_getCurrentLocation, "geolocation");
-function startUpdateLocationMock(eventParams) {
-	const { onEvent, options } = eventParams;
-	const interval = Math.max(options.timeInterval, 500);
-	const id = setInterval(() => {
-		const loc = buildLocation();
-		loc.coords.latitude += (Math.random() - .5) * 1e-4;
-		loc.coords.longitude += (Math.random() - .5) * 1e-4;
-		onEvent(loc);
-	}, interval);
-	return () => clearInterval(id);
-}
-function startUpdateLocationWeb(eventParams) {
-	const { onEvent, onError } = eventParams;
-	if (!navigator.geolocation) {
-		console.warn("[@ait-co/devtools] Geolocation API not available, falling back to mock");
-		return startUpdateLocationMock(eventParams);
-	}
-	const watchId = navigator.geolocation.watchPosition((pos) => {
-		onEvent({
-			coords: {
-				latitude: pos.coords.latitude,
-				longitude: pos.coords.longitude,
-				altitude: pos.coords.altitude ?? 0,
-				accuracy: pos.coords.accuracy,
-				altitudeAccuracy: pos.coords.altitudeAccuracy ?? 0,
-				heading: pos.coords.heading ?? 0
-			},
-			timestamp: pos.timestamp,
-			accessLocation: "FINE"
-		});
-	}, (err) => onError(err));
-	return () => navigator.geolocation.clearWatch(watchId);
-}
-function startUpdateLocationPrompt(eventParams) {
-	const { onEvent } = eventParams;
-	const handler = (e) => {
-		onEvent(e.detail);
-	};
-	window.addEventListener("__ait:prompt-response:location-update", handler);
-	window.dispatchEvent(new CustomEvent("__ait:prompt-request", { detail: { type: "location-update" } }));
-	return () => window.removeEventListener("__ait:prompt-response:location-update", handler);
-}
-const _startUpdateLocation = (eventParams) => {
-	const mode = aitState.state.deviceModes.location;
-	if (mode === "web") return startUpdateLocationWeb(eventParams);
-	if (mode === "prompt") return startUpdateLocationPrompt(eventParams);
-	return startUpdateLocationMock(eventParams);
-};
-withPermission(_startUpdateLocation, "geolocation");
-//#endregion
-//#region src/mock/device/camera.ts
-/**
-* Camera & Album Photos mock
-* mock/web/prompt 모드 지원
-*/
-async function openCameraMock() {
-	const images = getMockImages();
-	return {
-		id: crypto.randomUUID(),
-		dataUri: images[0]
-	};
-}
-async function openCameraWeb() {
-	return new Promise((resolve, reject) => {
-		const input = document.createElement("input");
-		input.type = "file";
-		input.accept = "image/*";
-		input.capture = "environment";
-		let settled = false;
-		input.onchange = () => {
-			settled = true;
-			const file = input.files?.[0];
-			if (!file) {
-				reject(/* @__PURE__ */ new Error("No file selected"));
-				return;
-			}
-			const reader = new FileReader();
-			reader.onload = () => resolve({
-				id: crypto.randomUUID(),
-				dataUri: reader.result
-			});
-			reader.onerror = () => reject(/* @__PURE__ */ new Error("Failed to read file"));
-			reader.readAsDataURL(file);
-		};
-		const onFocus = () => {
-			setTimeout(() => {
-				if (!settled) reject(/* @__PURE__ */ new Error("File picker cancelled"));
-				window.removeEventListener("focus", onFocus);
-			}, 300);
-		};
-		window.addEventListener("focus", onFocus);
-		input.click();
-	});
-}
-async function openCameraPrompt() {
-	const dataUri = await waitForPromptResponse("camera");
-	return {
-		id: crypto.randomUUID(),
-		dataUri
-	};
+async function openCameraPrompt() {
+	const dataUri = await waitForPromptResponse("camera");
+	return {
+		id: crypto.randomUUID(),
+		dataUri
+	};
 }
 const _openCamera = async (_options) => {
 	checkPermission("camera", "openCamera");
@@ -1051,6 +844,142 @@ const _fetchContacts = async (options) => {
 };
 withPermission(_fetchContacts, "contacts");
 //#endregion
+//#region src/mock/device/location.ts
+/**
+* Location mock (getCurrentLocation, startUpdateLocation)
+* mock/web/prompt 모드 지원
+*/
+function buildLocation() {
+	return {
+		coords: { ...aitState.state.location.coords },
+		timestamp: Date.now(),
+		accessLocation: aitState.state.location.accessLocation
+	};
+}
+async function getCurrentLocationMock() {
+	return buildLocation();
+}
+async function getCurrentLocationWeb() {
+	return new Promise((resolve) => {
+		if (!navigator.geolocation) {
+			console.warn("[@ait-co/devtools] Geolocation API not available, falling back to mock");
+			resolve(buildLocation());
+			return;
+		}
+		navigator.geolocation.getCurrentPosition((pos) => {
+			resolve({
+				coords: {
+					latitude: pos.coords.latitude,
+					longitude: pos.coords.longitude,
+					altitude: pos.coords.altitude ?? 0,
+					accuracy: pos.coords.accuracy,
+					altitudeAccuracy: pos.coords.altitudeAccuracy ?? 0,
+					heading: pos.coords.heading ?? 0
+				},
+				timestamp: pos.timestamp,
+				accessLocation: "FINE"
+			});
+		}, () => {
+			console.warn("[@ait-co/devtools] Geolocation failed, falling back to mock");
+			resolve(buildLocation());
+		});
+	});
+}
+async function getCurrentLocationPrompt() {
+	return waitForPromptResponse("location");
+}
+const _getCurrentLocation = async (_options) => {
+	checkPermission("geolocation", "getCurrentLocation");
+	const mode = aitState.state.deviceModes.location;
+	if (mode === "web") return getCurrentLocationWeb();
+	if (mode === "prompt") return getCurrentLocationPrompt();
+	return getCurrentLocationMock();
+};
+withPermission(_getCurrentLocation, "geolocation");
+function startUpdateLocationMock(eventParams) {
+	const { onEvent, options } = eventParams;
+	const interval = Math.max(options.timeInterval, 500);
+	const id = setInterval(() => {
+		const loc = buildLocation();
+		loc.coords.latitude += (Math.random() - .5) * 1e-4;
+		loc.coords.longitude += (Math.random() - .5) * 1e-4;
+		onEvent(loc);
+	}, interval);
+	return () => clearInterval(id);
+}
+function startUpdateLocationWeb(eventParams) {
+	const { onEvent, onError } = eventParams;
+	if (!navigator.geolocation) {
+		console.warn("[@ait-co/devtools] Geolocation API not available, falling back to mock");
+		return startUpdateLocationMock(eventParams);
+	}
+	const watchId = navigator.geolocation.watchPosition((pos) => {
+		onEvent({
+			coords: {
+				latitude: pos.coords.latitude,
+				longitude: pos.coords.longitude,
+				altitude: pos.coords.altitude ?? 0,
+				accuracy: pos.coords.accuracy,
+				altitudeAccuracy: pos.coords.altitudeAccuracy ?? 0,
+				heading: pos.coords.heading ?? 0
+			},
+			timestamp: pos.timestamp,
+			accessLocation: "FINE"
+		});
+	}, (err) => onError(err));
+	return () => navigator.geolocation.clearWatch(watchId);
+}
+function startUpdateLocationPrompt(eventParams) {
+	const { onEvent } = eventParams;
+	const handler = (e) => {
+		onEvent(e.detail);
+	};
+	window.addEventListener("__ait:prompt-response:location-update", handler);
+	window.dispatchEvent(new CustomEvent("__ait:prompt-request", { detail: { type: "location-update" } }));
+	return () => window.removeEventListener("__ait:prompt-response:location-update", handler);
+}
+const _startUpdateLocation = (eventParams) => {
+	const mode = aitState.state.deviceModes.location;
+	if (mode === "web") return startUpdateLocationWeb(eventParams);
+	if (mode === "prompt") return startUpdateLocationPrompt(eventParams);
+	return startUpdateLocationMock(eventParams);
+};
+withPermission(_startUpdateLocation, "geolocation");
+//#endregion
+//#region src/mock/proxy.ts
+/**
+* 미구현 API용 Proxy 트립와이어.
+*
+* 미구현 프로퍼티에 접근하면 throw한다. 이는 "devtools에서는 멀쩡히 돌지만
+* 실 SDK에선 실제로 동작하는" 시나리오를 차단하기 위한 의도적 선택이다.
+* mock이 미구현인 API는 실 SDK에서는 존재할 수 있고, 사용자가 이를 인지하지
+* 못한 채 개발을 이어가면 배포 시점에 놀라게 된다. 에러 메시지에 이슈 URL을
+* 포함해 사용자가 mock 누락을 제보할 수 있게 한다.
+*/
+const ISSUES_URL = "https://github.com/apps-in-toss-community/devtools/issues";
+function createMockProxy(moduleName, implementations) {
+	return new Proxy(implementations, { get(target, prop) {
+		if (typeof prop === "symbol") return void 0;
+		if (prop in target) return target[prop];
+		throw new Error(`[@ait-co/devtools] ${moduleName}.${prop} is not mocked. This API may exist in @apps-in-toss/web-framework, but devtools' mock does not cover it yet. Please file an issue: ${ISSUES_URL}`);
+	} });
+}
+createMockProxy("Storage", {
+	getItem: async (key) => {
+		return localStorage.getItem(`__ait_storage:${key}`);
+	},
+	setItem: async (key, value) => {
+		localStorage.setItem(`__ait_storage:${key}`, value);
+	},
+	removeItem: async (key) => {
+		localStorage.removeItem(`__ait_storage:${key}`);
+	},
+	clearItems: async () => {
+		const keys = Object.keys(localStorage).filter((k) => k.startsWith("__ait_storage:"));
+		for (const k of keys) localStorage.removeItem(k);
+	}
+});
+//#endregion
 //#region src/panel/tabs/device.ts
 let pendingPrompt = null;
 let refreshPanel$1 = () => {};
@@ -1062,7 +991,7 @@ if (typeof window !== "undefined") window.addEventListener("__ait:prompt-request
 	window.dispatchEvent(new CustomEvent("__ait:panel-switch-tab", { detail: { tab: "device" } }));
 });
 function resolvePrompt(type, data) {
-	window.dispatchEvent(new CustomEvent("__ait:prompt-response:" + type, { detail: data }));
+	window.dispatchEvent(new CustomEvent(`__ait:prompt-response:${type}`, { detail: data }));
 	pendingPrompt = null;
 	refreshPanel$1();
 }
@@ -1242,6 +1171,61 @@ function renderDeviceTab() {
 	return container;
 }
 //#endregion
+//#region src/panel/tabs/analytics.ts
+function renderAnalyticsTab() {
+	const disabled = !aitState.state.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const logs = aitState.state.analyticsLog;
+	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear");
+	if (disabled) clearBtn.disabled = true;
+	clearBtn.addEventListener("click", () => {
+		aitState.update({ analyticsLog: [] });
+	});
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Analytics Log (${logs.length})`), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
+		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString("ko-KR", { hour12: false })), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
+	})));
+	return container;
+}
+//#endregion
+//#region src/panel/tabs/environment.ts
+function renderEnvironmentTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Platform"), selectRow("OS", ["ios", "android"], s.platform, (v) => aitState.update({ platform: v }), disabled), inputRow("App Version", s.appVersion, (v) => aitState.update({ appVersion: v }), disabled), selectRow("Environment", ["toss", "sandbox"], s.environment, (v) => aitState.update({ environment: v }), disabled), inputRow("Locale", s.locale, (v) => aitState.update({ locale: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Network"), selectRow("Status", [
+		"WIFI",
+		"4G",
+		"5G",
+		"3G",
+		"2G",
+		"OFFLINE",
+		"WWAN",
+		"UNKNOWN"
+	], s.networkStatus, (v) => aitState.update({ networkStatus: v }), disabled)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Safe Area Insets"), inputRow("Top", String(s.safeAreaInsets.top), (v) => aitState.patch("safeAreaInsets", { top: Number(v) }), disabled), inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }), disabled)));
+	return container;
+}
+//#endregion
+//#region src/panel/tabs/events.ts
+function renderEventsTab() {
+	const disabled = !aitState.state.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const backBtn = h("button", { className: "ait-btn" }, "Trigger Back Event");
+	backBtn.addEventListener("click", () => aitState.trigger("backEvent"));
+	if (disabled) backBtn.disabled = true;
+	const homeBtn = h("button", { className: "ait-btn" }, "Trigger Home Event");
+	homeBtn.addEventListener("click", () => aitState.trigger("homeEvent"));
+	if (disabled) homeBtn.disabled = true;
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Navigation Events"), h("div", { className: "ait-row" }, backBtn, homeBtn)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Login"), selectRow("Logged In", ["true", "false"], String(aitState.state.auth.isLoggedIn), (v) => {
+		aitState.patch("auth", { isLoggedIn: v === "true" });
+	}, disabled), selectRow("Toss Login Integrated", ["true", "false"], String(aitState.state.auth.isTossLoginIntegrated), (v) => {
+		aitState.patch("auth", { isTossLoginIntegrated: v === "true" });
+	}, disabled)));
+	return container;
+}
+//#endregion
 //#region src/panel/tabs/iap.ts
 function renderIapTab() {
 	const s = aitState.state;
@@ -1265,39 +1249,56 @@ function renderIapTab() {
 	return container;
 }
 //#endregion
-//#region src/panel/tabs/events.ts
-function renderEventsTab() {
-	const disabled = !aitState.state.panelEditable;
+//#region src/panel/tabs/location.ts
+function renderLocationTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
 	const container = h("div");
 	if (disabled) container.appendChild(monitoringNotice());
-	const backBtn = h("button", { className: "ait-btn" }, "Trigger Back Event");
-	backBtn.addEventListener("click", () => aitState.trigger("backEvent"));
-	if (disabled) backBtn.disabled = true;
-	const homeBtn = h("button", { className: "ait-btn" }, "Trigger Home Event");
-	homeBtn.addEventListener("click", () => aitState.trigger("homeEvent"));
-	if (disabled) homeBtn.disabled = true;
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Navigation Events"), h("div", { className: "ait-row" }, backBtn, homeBtn)), h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Login"), selectRow("Logged In", ["true", "false"], String(aitState.state.auth.isLoggedIn), (v) => {
-		aitState.patch("auth", { isLoggedIn: v === "true" });
-	}, disabled), selectRow("Toss Login Integrated", ["true", "false"], String(aitState.state.auth.isTossLoginIntegrated), (v) => {
-		aitState.patch("auth", { isTossLoginIntegrated: v === "true" });
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Current Location"), inputRow("Latitude", String(s.location.coords.latitude), (v) => {
+		const coords = {
+			...s.location.coords,
+			latitude: Number(v)
+		};
+		aitState.patch("location", { coords });
+	}, disabled), inputRow("Longitude", String(s.location.coords.longitude), (v) => {
+		const coords = {
+			...s.location.coords,
+			longitude: Number(v)
+		};
+		aitState.patch("location", { coords });
+	}, disabled), inputRow("Accuracy", String(s.location.coords.accuracy), (v) => {
+		const coords = {
+			...s.location.coords,
+			accuracy: Number(v)
+		};
+		aitState.patch("location", { coords });
 	}, disabled)));
 	return container;
 }
 //#endregion
-//#region src/panel/tabs/analytics.ts
-function renderAnalyticsTab() {
-	const disabled = !aitState.state.panelEditable;
+//#region src/panel/tabs/permissions.ts
+function renderPermissionsTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
 	const container = h("div");
+	const names = [
+		"camera",
+		"photos",
+		"geolocation",
+		"clipboard",
+		"contacts",
+		"microphone"
+	];
+	const statuses = [
+		"allowed",
+		"denied",
+		"notDetermined"
+	];
 	if (disabled) container.appendChild(monitoringNotice());
-	const logs = aitState.state.analyticsLog;
-	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear");
-	if (disabled) clearBtn.disabled = true;
-	clearBtn.addEventListener("click", () => {
-		aitState.update({ analyticsLog: [] });
-	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Analytics Log (${logs.length})`), clearBtn), ...logs.slice(-30).reverse().map((entry) => {
-		return h("div", { className: "ait-log-entry" }, h("span", { className: "ait-log-time" }, new Date(entry.timestamp).toLocaleTimeString("ko-KR", { hour12: false })), h("span", { className: "ait-log-type" }, entry.type), JSON.stringify(entry.params));
-	})));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device Permissions"), ...names.map((name) => selectRow(name, statuses, s.permissions[name], (v) => {
+		aitState.patch("permissions", { [name]: v });
+	}, disabled))));
 	return container;
 }
 //#endregion
@@ -1315,10 +1316,10 @@ function renderStorageTab(refreshPanel) {
 	const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear All");
 	if (disabled) clearBtn.disabled = true;
 	clearBtn.addEventListener("click", () => {
-		entries.forEach(([key]) => localStorage.removeItem(prefix + key));
+		for (const [key] of entries) localStorage.removeItem(prefix + key);
 		refreshPanel();
 	});
-	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Storage (${entries.length} items)`), clearBtn), entries.length === 0 ? h("div", { style: "color:#555;font-size:12px" }, "No items in storage") : h("div", {}, ...entries.map(([key, value]) => h("div", { className: "ait-storage-row" }, h("span", { className: "ait-storage-key" }, key), h("span", { className: "ait-storage-value" }, value.length > 100 ? value.slice(0, 100) + "..." : value))))));
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-row" }, h("div", { className: "ait-section-title" }, `Storage (${entries.length} items)`), clearBtn), entries.length === 0 ? h("div", { style: "color:#555;font-size:12px" }, "No items in storage") : h("div", {}, ...entries.map(([key, value]) => h("div", { className: "ait-storage-row" }, h("span", { className: "ait-storage-key" }, key), h("span", { className: "ait-storage-value" }, value.length > 100 ? `${value.slice(0, 100)}...` : value))))));
 	return container;
 }
 //#endregion
@@ -1402,8 +1403,8 @@ function makeDraggable(el, onClickOnly) {
 			el.classList.add("dragging");
 		}
 		if (!hasMoved) return;
-		el.style.left = startLeft + dx + "px";
-		el.style.top = startTop + dy + "px";
+		el.style.left = `${startLeft + dx}px`;
+		el.style.top = `${startTop + dy}px`;
 		el.style.right = "auto";
 		el.style.bottom = "auto";
 	});
@@ -1436,14 +1437,14 @@ function snapToEdge(el) {
 	const cx = rect.left + rect.width / 2;
 	const margin = 16;
 	if (cx < vw / 2) {
-		el.style.left = margin + "px";
+		el.style.left = `${margin}px`;
 		el.style.right = "auto";
 	} else {
 		el.style.left = "auto";
-		el.style.right = margin + "px";
+		el.style.right = `${margin}px`;
 	}
 	const top = Math.max(margin, Math.min(vh - rect.height - margin, rect.top));
-	el.style.top = top + "px";
+	el.style.top = `${top}px`;
 	el.style.bottom = "auto";
 }
 function updatePanelPosition(toggleEl) {
@@ -1461,20 +1462,20 @@ function updatePanelPosition(toggleEl) {
 	const panelHeight = 480;
 	const margin = 16;
 	if (rect.left < vw / 2) {
-		panelEl.style.left = margin + "px";
+		panelEl.style.left = `${margin}px`;
 		panelEl.style.right = "auto";
 	} else {
 		panelEl.style.left = "auto";
-		panelEl.style.right = margin + "px";
+		panelEl.style.right = `${margin}px`;
 	}
 	if (rect.top < vh / 2) {
 		const top = Math.min(rect.bottom + 8, vh - panelHeight - margin);
-		panelEl.style.top = Math.max(margin, top) + "px";
+		panelEl.style.top = `${Math.max(margin, top)}px`;
 		panelEl.style.bottom = "auto";
 	} else {
 		const bottom = Math.min(vh - rect.top + 8, vh - panelHeight - margin);
 		panelEl.style.top = "auto";
-		panelEl.style.bottom = Math.max(margin, bottom) + "px";
+		panelEl.style.bottom = `${Math.max(margin, bottom)}px`;
 	}
 }
 function saveButtonPosition(el) {
@@ -1563,7 +1564,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.0.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.0`), 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) {