@ait-co/devtools 0.0.1 → 0.0.3

package/dist/panel/index.js

@@ -1,15 +1,179 @@
-import {
-  aitState
-} from "../chunk-YYIIG3JT.js";
-
-// src/panel/styles.ts
-var PANEL_STYLES = (
-  /* css */
-  `
+//#region src/mock/state.ts
+const DEFAULT_STATE = {
+	platform: "ios",
+	environment: "sandbox",
+	appVersion: "5.240.0",
+	locale: "ko-KR",
+	schemeUri: "/",
+	groupId: "mock-group-id",
+	deploymentId: "mock-deployment-id",
+	deviceId: "",
+	brand: {
+		displayName: "Mock App",
+		icon: "",
+		primaryColor: "#3182F6"
+	},
+	networkStatus: "WIFI",
+	permissions: {
+		clipboard: "allowed",
+		contacts: "allowed",
+		photos: "allowed",
+		geolocation: "allowed",
+		camera: "allowed",
+		microphone: "notDetermined"
+	},
+	location: {
+		coords: {
+			latitude: 37.5665,
+			longitude: 126.978,
+			altitude: 0,
+			accuracy: 10,
+			altitudeAccuracy: 0,
+			heading: 0
+		},
+		timestamp: Date.now(),
+		accessLocation: "FINE"
+	},
+	safeAreaInsets: {
+		top: 47,
+		bottom: 34,
+		left: 0,
+		right: 0
+	},
+	contacts: [{
+		name: "홍길동",
+		phoneNumber: "010-1234-5678"
+	}, {
+		name: "김토스",
+		phoneNumber: "010-9876-5432"
+	}],
+	iap: {
+		products: [{
+			sku: "mock-gem-100",
+			type: "CONSUMABLE",
+			displayName: "보석 100개",
+			displayAmount: "1,000원",
+			iconUrl: "",
+			description: "게임에서 사용할 수 있는 보석 100개"
+		}],
+		nextResult: "success",
+		pendingOrders: [],
+		completedOrders: []
+	},
+	payment: {
+		nextResult: "success",
+		failReason: ""
+	},
+	auth: {
+		isLoggedIn: true,
+		isTossLoginIntegrated: true,
+		userKeyHash: "mock-user-hash-abc123"
+	},
+	ads: {
+		isLoaded: false,
+		nextEvent: "loaded"
+	},
+	game: {
+		profile: {
+			nickname: "MockPlayer",
+			profileImageUri: ""
+		},
+		leaderboardScores: []
+	},
+	analyticsLog: [],
+	deviceModes: {
+		camera: "mock",
+		photos: "mock",
+		location: "mock",
+		network: "mock",
+		clipboard: "web"
+	},
+	mockData: {
+		images: [],
+		clipboardText: ""
+	},
+	panelEditable: true
+};
+function generateDeviceId() {
+	const stored = localStorage.getItem("__ait_device_id");
+	if (stored) return stored;
+	const id = crypto.randomUUID();
+	localStorage.setItem("__ait_device_id", id);
+	return id;
+}
+var AitStateManager = class {
+	_state;
+	_listeners = /* @__PURE__ */ new Set();
+	constructor() {
+		this._state = structuredClone(DEFAULT_STATE);
+		try {
+			this._state.deviceId = generateDeviceId();
+		} catch {
+			this._state.deviceId = "mock-device-" + Math.random().toString(36).slice(2);
+		}
+	}
+	get state() {
+		return this._state;
+	}
+	update(partial) {
+		this._state = {
+			...this._state,
+			...partial
+		};
+		this._notify();
+	}
+	/** 중첩 객체 업데이트용 */
+	patch(key, partial) {
+		const current = this._state[key];
+		if (typeof current === "object" && current !== null && !Array.isArray(current)) this._state = {
+			...this._state,
+			[key]: {
+				...current,
+				...partial
+			}
+		};
+		else this._state = {
+			...this._state,
+			[key]: partial
+		};
+		this._notify();
+	}
+	subscribe(listener) {
+		this._listeners.add(listener);
+		return () => this._listeners.delete(listener);
+	}
+	/** 분석 로그 추가 */
+	logAnalytics(entry) {
+		this._state = {
+			...this._state,
+			analyticsLog: [...this._state.analyticsLog, {
+				...entry,
+				timestamp: Date.now()
+			}]
+		};
+		this._notify();
+	}
+	/** 이벤트 트리거 (backEvent, homeEvent 등) */
+	trigger(event) {
+		window.dispatchEvent(new CustomEvent(`__ait:${event}`));
+	}
+	reset() {
+		const deviceId = this._state.deviceId;
+		this._state = {
+			...structuredClone(DEFAULT_STATE),
+			deviceId
+		};
+		this._notify();
+	}
+	_notify() {
+		for (const listener of this._listeners) listener();
+	}
+};
+const aitState = new AitStateManager();
+if (typeof window !== "undefined") window.__ait = aitState;
+const PANEL_STYLES = `
   .ait-panel-toggle {
     position: fixed;
-    bottom: 16px;
-    right: 16px;
     z-index: 99999;
     width: 48px;
     height: 48px;
@@ -25,18 +189,18 @@ var PANEL_STYLES = (
     color: white;
     transition: transform 0.15s;
     font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+    touch-action: none;
+    user-select: none;
   }
-  .ait-panel-toggle:hover {
+  .ait-panel-toggle:hover:not(.dragging) {
     transform: scale(1.1);
   }
 
   .ait-panel {
     position: fixed;
-    bottom: 72px;
-    right: 16px;
     z-index: 99998;
     width: 360px;
-    max-height: 520px;
+    height: 480px;
     background: #1a1a2e;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0,0,0,0.4);
@@ -61,7 +225,7 @@ var PANEL_STYLES = (
     align-items: center;
     border-bottom: 1px solid #2a2a4a;
   }
-  .ait-panel-header span {
+  .ait-panel-header > span:first-child {
     color: #3182F6;
   }
 
@@ -98,8 +262,8 @@ var PANEL_STYLES = (
   .ait-panel-body {
     padding: 12px 16px;
     overflow-y: auto;
-    max-height: 400px;
     flex: 1;
+    min-height: 0;
   }
 
   .ait-section {
@@ -205,324 +369,1258 @@ var PANEL_STYLES = (
     flex: 1;
     word-break: break-all;
   }
-`
-);
 
-// src/panel/index.ts
-var TABS = [
-  { id: "env", label: "Environment" },
-  { id: "permissions", label: "Permissions" },
-  { id: "location", label: "Location" },
-  { id: "iap", label: "IAP" },
-  { id: "events", label: "Events" },
-  { id: "analytics", label: "Analytics" },
-  { id: "storage", label: "Storage" }
-];
-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);
+  /* Device tab */
+  .ait-image-grid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 8px;
+  }
+  .ait-image-thumb {
+    position: relative;
+    width: 64px;
+    height: 64px;
+    border-radius: 4px;
+    overflow: hidden;
+    border: 1px solid #3a3a5a;
+  }
+  .ait-image-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .ait-image-thumb .ait-image-remove {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: rgba(231,76,60,0.9);
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 10px;
+    line-height: 18px;
+    text-align: center;
+    padding: 0;
+  }
+  .ait-btn-row {
+    display: flex;
+    gap: 6px;
+    margin-top: 8px;
+  }
+  .ait-btn-secondary {
+    background: #2a2a4a;
+    color: #e0e0e0;
+    border: 1px solid #3a3a5a;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 11px;
+    cursor: pointer;
+    font-family: inherit;
+  }
+  .ait-btn-secondary:hover {
+    background: #3a3a5a;
+  }
+
+  /* Prompt notification */
+  .ait-prompt-banner {
+    background: #2d1b69;
+    border: 1px solid #6c3bd5;
+    border-radius: 6px;
+    padding: 10px 12px;
+    margin-bottom: 12px;
+  }
+  .ait-prompt-banner .ait-prompt-title {
+    color: #b388ff;
+    font-size: 12px;
+    font-weight: 600;
+    margin-bottom: 8px;
+  }
+  .ait-prompt-input-row {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+    margin-top: 6px;
+  }
+  .ait-prompt-input-row input {
+    background: #2a2a4a;
+    color: #e0e0e0;
+    border: 1px solid #3a3a5a;
+    border-radius: 4px;
+    padding: 4px 8px;
+    font-size: 12px;
+    width: 80px;
+    font-family: inherit;
+  }
+  .ait-prompt-input-row label {
+    color: #aaa;
+    font-size: 11px;
+    min-width: 30px;
+  }
+
+  .ait-panel-close {
+    display: none;
+    background: none;
+    border: none;
+    color: #888;
+    font-size: 18px;
+    cursor: pointer;
+    padding: 0 4px;
+    font-family: inherit;
+  }
+  .ait-panel-close:hover {
+    color: #e0e0e0;
+  }
+
+  /* Disabled state for monitoring-only mode */
+  .ait-select:disabled,
+  .ait-input:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .ait-btn:disabled,
+  .ait-btn-secondary:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .ait-btn-danger:disabled {
+    background: #5a5a5a;
+  }
+
+  /* Mock status badge */
+  .ait-mock-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    cursor: pointer;
+  }
+  .ait-mock-badge-on {
+    background: #1a4731;
+    color: #4ade80;
+  }
+  .ait-mock-badge-off {
+    background: #4a1a1a;
+    color: #f87171;
+  }
+
+  /* Monitoring-only notice */
+  .ait-monitoring-notice {
+    background: #2a1a00;
+    border: 1px solid #6b4c00;
+    border-radius: 4px;
+    padding: 6px 10px;
+    margin-bottom: 12px;
+    font-size: 11px;
+    color: #fbbf24;
+  }
+
+  .ait-panel-tab-error {
+    padding: 12px;
+    color: #e53e3e; /* readable on both light (#fff) and dark (#1a1a2e) panel backgrounds */
+  }
+
+  @media (max-width: 480px) {
+    .ait-panel.open {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      max-height: 100%;
+      border-radius: 0;
+    }
+    .ait-panel-toggle {
+      z-index: 100000;
+    }
+    .ait-panel-close {
+      display: block;
     }
   }
-  for (const child of children) {
-    el.append(typeof child === "string" ? document.createTextNode(child) : child);
-  }
-  return el;
-}
-function selectRow(label, options, value, onChange) {
-  const select = h("select", { className: "ait-select" });
-  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) {
-  const input = h("input", { className: "ait-input", value });
-  input.addEventListener("change", () => onChange(input.value));
-  return h("div", { className: "ait-row" }, h("label", {}, label), input);
-}
-function renderEnvTab() {
-  const s = aitState.state;
-  const container = h("div");
-  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 })),
-      inputRow("App Version", s.appVersion, (v) => aitState.update({ appVersion: v })),
-      selectRow("Environment", ["toss", "sandbox"], s.environment, (v) => aitState.update({ environment: v })),
-      inputRow("Locale", s.locale, (v) => aitState.update({ locale: v }))
-    ),
-    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 }))
-    ),
-    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) })),
-      inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }))
-    )
-  );
-  return container;
+`;
+//#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 container = h("div");
-  const names = ["camera", "photos", "geolocation", "clipboard", "contacts", "microphone"];
-  const statuses = ["allowed", "denied", "notDetermined"];
-  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 });
-        })
-      )
-    )
-  );
-  return container;
+	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 container = h("div");
-  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 });
-      }),
-      inputRow("Longitude", String(s.location.coords.longitude), (v) => {
-        const coords = { ...s.location.coords, longitude: Number(v) };
-        aitState.patch("location", { coords });
-      }),
-      inputRow("Accuracy", String(s.location.coords.accuracy), (v) => {
-        const coords = { ...s.location.coords, accuracy: Number(v) };
-        aitState.patch("location", { coords });
-      })
-    )
-  );
-  return container;
+	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
+/**
+* 디바이스 모듈 내부 공유 헬퍼
+*/
+function generatePlaceholderImage(width, height, text, color) {
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	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);
+	}
+	ctx.fillStyle = color;
+	ctx.fillRect(0, 0, width, height);
+	ctx.fillStyle = "white";
+	ctx.font = "16px sans-serif";
+	ctx.textAlign = "center";
+	ctx.textBaseline = "middle";
+	ctx.fillText(text, width / 2, height / 2);
+	return canvas.toDataURL("image/png");
+}
+const DEFAULT_PLACEHOLDERS = [
+	{
+		text: "Mock Photo 1",
+		color: "#3182F6"
+	},
+	{
+		text: "Mock Photo 2",
+		color: "#27ae60"
+	},
+	{
+		text: "Mock Photo 3",
+		color: "#e67e22"
+	}
+];
+let cachedPlaceholders = null;
+function getDefaultPlaceholderImages() {
+	if (!cachedPlaceholders) cachedPlaceholders = DEFAULT_PLACEHOLDERS.map((p) => generatePlaceholderImage(320, 240, p.text, p.color));
+	return [...cachedPlaceholders];
+}
+/** @internal device 모듈 내부 전용 */
+function getMockImages() {
+	const images = aitState.state.mockData.images;
+	if (images.length > 0) return images;
+	return getDefaultPlaceholderImages();
+}
+const PROMPT_TIMEOUT_MS = 3e4;
+/** @internal device 모듈 내부 전용 */
+function waitForPromptResponse(type) {
+	return new Promise((resolve, reject) => {
+		const eventName = "__ait:prompt-response:" + type;
+		const cancelName = "__ait:prompt-cancel";
+		function cleanup() {
+			clearTimeout(timer);
+			window.removeEventListener(eventName, handler);
+			window.removeEventListener(cancelName, cancelHandler);
+		}
+		const timer = setTimeout(() => {
+			cleanup();
+			const hint = !!document.querySelector(".ait-panel") ? "Please provide input via the DevTools panel." : "Is @ait-co/devtools/panel imported?";
+			reject(/* @__PURE__ */ new Error(`[@ait-co/devtools] Prompt timeout for "${type}" after ${PROMPT_TIMEOUT_MS / 1e3}s. ${hint}`));
+		}, PROMPT_TIMEOUT_MS);
+		const handler = (e) => {
+			cleanup();
+			resolve(e.detail);
+		};
+		const cancelHandler = () => {
+			cleanup();
+			reject(/* @__PURE__ */ new Error(`[@ait-co/devtools] Prompt cancelled for "${type}"`));
+		};
+		window.addEventListener(eventName, handler);
+		window.addEventListener(cancelName, cancelHandler);
+		window.dispatchEvent(new CustomEvent("__ait:prompt-request", { detail: { 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
+* 각 디바이스 API (.getPermission, .openPermissionDialog)에 부착된다.
+*/
+async function getPermission(name) {
+	return aitState.state.permissions[name];
+}
+async function openPermissionDialog(name) {
+	if (aitState.state.permissions[name] === "allowed") return "allowed";
+	aitState.patch("permissions", { [name]: "allowed" });
+	return "allowed";
+}
+/** 권한이 필요한 함수에 .getPermission(), .openPermissionDialog()를 부착 */
+function withPermission(fn, permissionName) {
+	const enhanced = fn;
+	enhanced.getPermission = () => getPermission(permissionName);
+	enhanced.openPermissionDialog = () => openPermissionDialog(permissionName);
+	return enhanced;
+}
+/** 권한 체크 후 denied면 에러 throw */
+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
+/**
+* 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/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
+	};
+}
+const _openCamera = async (_options) => {
+	checkPermission("camera", "openCamera");
+	const mode = aitState.state.deviceModes.camera;
+	if (mode === "web") return openCameraWeb();
+	if (mode === "prompt") return openCameraPrompt();
+	return openCameraMock();
+};
+withPermission(_openCamera, "camera");
+async function fetchAlbumPhotosMock(maxCount) {
+	return getMockImages().slice(0, maxCount).map((dataUri) => ({
+		id: crypto.randomUUID(),
+		dataUri
+	}));
+}
+async function fetchAlbumPhotosWeb(maxCount) {
+	return new Promise((resolve, reject) => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = "image/*";
+		input.multiple = true;
+		let settled = false;
+		input.onchange = async () => {
+			settled = true;
+			const files = Array.from(input.files ?? []).slice(0, maxCount);
+			if (files.length === 0) {
+				reject(/* @__PURE__ */ new Error("No files selected"));
+				return;
+			}
+			resolve(await Promise.all(files.map((file) => new Promise((res, rej) => {
+				const reader = new FileReader();
+				reader.onload = () => res({
+					id: crypto.randomUUID(),
+					dataUri: reader.result
+				});
+				reader.onerror = () => rej(/* @__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 fetchAlbumPhotosPrompt(maxCount) {
+	return (await waitForPromptResponse("photos")).slice(0, maxCount).map((dataUri) => ({
+		id: crypto.randomUUID(),
+		dataUri
+	}));
+}
+const _fetchAlbumPhotos = async (options) => {
+	checkPermission("photos", "fetchAlbumPhotos");
+	const maxCount = options?.maxCount ?? 10;
+	const mode = aitState.state.deviceModes.photos;
+	if (mode === "web") return fetchAlbumPhotosWeb(maxCount);
+	if (mode === "prompt") return fetchAlbumPhotosPrompt(maxCount);
+	return fetchAlbumPhotosMock(maxCount);
+};
+withPermission(_fetchAlbumPhotos, "photos");
+//#endregion
+//#region src/mock/device/clipboard.ts
+/**
+* Clipboard mock
+* mock/web 모드 지원
+*/
+const _getClipboardText = async () => {
+	checkPermission("clipboard", "getClipboardText");
+	if (aitState.state.deviceModes.clipboard === "mock") return aitState.state.mockData.clipboardText;
+	try {
+		return await navigator.clipboard.readText();
+	} catch {
+		return "";
+	}
+};
+withPermission(_getClipboardText, "clipboard");
+const _setClipboardText = async (text) => {
+	checkPermission("clipboard", "setClipboardText");
+	if (aitState.state.deviceModes.clipboard === "mock") {
+		aitState.patch("mockData", { clipboardText: text });
+		return;
+	}
+	await navigator.clipboard.writeText(text);
+};
+withPermission(_setClipboardText, "clipboard");
+//#endregion
+//#region src/mock/device/contacts.ts
+/**
+* Contacts mock
+*/
+const _fetchContacts = async (options) => {
+	checkPermission("contacts", "fetchContacts");
+	let contacts = aitState.state.contacts;
+	if (options.query?.contains) {
+		const q = options.query.contains.toLowerCase();
+		contacts = contacts.filter((c) => c.name.toLowerCase().includes(q) || c.phoneNumber.includes(q));
+	}
+	const sliced = contacts.slice(options.offset, options.offset + options.size);
+	const nextOffset = options.offset + options.size;
+	return {
+		result: sliced,
+		nextOffset: nextOffset < contacts.length ? nextOffset : null,
+		done: nextOffset >= contacts.length
+	};
+};
+withPermission(_fetchContacts, "contacts");
+//#endregion
+//#region src/panel/tabs/device.ts
+let pendingPrompt = null;
+let refreshPanel$1 = () => {};
+function setDeviceRefreshPanel(fn) {
+	refreshPanel$1 = fn;
+}
+if (typeof window !== "undefined") window.addEventListener("__ait:prompt-request", (e) => {
+	pendingPrompt = { type: e.detail.type };
+	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 }));
+	pendingPrompt = null;
+	refreshPanel$1();
+}
+function renderPromptBanner() {
+	if (!pendingPrompt) return null;
+	const banner = h("div", { className: "ait-prompt-banner" });
+	if (pendingPrompt.type === "camera") {
+		banner.append(h("div", { className: "ait-prompt-title" }, "Camera Prompt — Select an image"));
+		const input = h("input", {
+			type: "file",
+			accept: "image/*",
+			style: "font-size:11px;color:#aaa"
+		});
+		input.addEventListener("change", () => {
+			const file = input.files?.[0];
+			if (!file) return;
+			const reader = new FileReader();
+			reader.onload = () => resolvePrompt("camera", reader.result);
+			reader.readAsDataURL(file);
+		});
+		banner.appendChild(input);
+	} else if (pendingPrompt.type === "photos") {
+		banner.append(h("div", { className: "ait-prompt-title" }, "Photos Prompt — Select images"));
+		const input = h("input", {
+			type: "file",
+			accept: "image/*",
+			multiple: "",
+			style: "font-size:11px;color:#aaa"
+		});
+		input.addEventListener("change", () => {
+			const files = Array.from(input.files ?? []);
+			if (files.length === 0) return;
+			Promise.all(files.map((file) => new Promise((res) => {
+				const reader = new FileReader();
+				reader.onload = () => res(reader.result);
+				reader.readAsDataURL(file);
+			}))).then((dataUris) => resolvePrompt("photos", dataUris));
+		});
+		banner.appendChild(input);
+	} else if (pendingPrompt.type === "location" || pendingPrompt.type === "location-update") {
+		banner.append(h("div", { className: "ait-prompt-title" }, pendingPrompt.type === "location" ? "Location Prompt — Enter coordinates" : "Location Update — Send coordinates"));
+		const latInput = h("input", {
+			className: "ait-input",
+			value: String(aitState.state.location.coords.latitude),
+			style: "width:80px"
+		});
+		const lngInput = h("input", {
+			className: "ait-input",
+			value: String(aitState.state.location.coords.longitude),
+			style: "width:80px"
+		});
+		const sendBtn = h("button", { className: "ait-btn ait-btn-sm" }, "Send");
+		sendBtn.addEventListener("click", () => {
+			const loc = {
+				coords: {
+					latitude: Number(latInput.value),
+					longitude: Number(lngInput.value),
+					altitude: 0,
+					accuracy: 10,
+					altitudeAccuracy: 0,
+					heading: 0
+				},
+				timestamp: Date.now(),
+				accessLocation: "FINE"
+			};
+			resolvePrompt(pendingPrompt.type, loc);
+		});
+		banner.append(h("div", { className: "ait-prompt-input-row" }, h("label", {}, "Lat"), latInput, h("label", {}, "Lng"), lngInput, sendBtn));
+	} else banner.append(h("div", { className: "ait-prompt-title" }, `Prompt: ${pendingPrompt.type}`));
+	const cancelBtn = h("button", {
+		className: "ait-btn ait-btn-sm ait-btn-danger",
+		style: "margin-top:8px"
+	}, "Cancel");
+	cancelBtn.addEventListener("click", () => {
+		pendingPrompt = null;
+		window.dispatchEvent(new CustomEvent("__ait:prompt-cancel"));
+		refreshPanel$1();
+	});
+	banner.appendChild(cancelBtn);
+	return banner;
+}
+function renderDeviceTab() {
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	if (s.panelEditable) {
+		const promptBanner = renderPromptBanner();
+		if (promptBanner) container.appendChild(promptBanner);
+	}
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, "Device API Modes"), ...[
+		{
+			label: "Camera",
+			key: "camera",
+			options: [
+				"mock",
+				"web",
+				"prompt"
+			]
+		},
+		{
+			label: "Photos",
+			key: "photos",
+			options: [
+				"mock",
+				"web",
+				"prompt"
+			]
+		},
+		{
+			label: "Location",
+			key: "location",
+			options: [
+				"mock",
+				"web",
+				"prompt"
+			]
+		},
+		{
+			label: "Network",
+			key: "network",
+			options: ["mock", "web"]
+		},
+		{
+			label: "Clipboard",
+			key: "clipboard",
+			options: ["mock", "web"]
+		}
+	].map((entry) => selectRow(entry.label, entry.options, s.deviceModes[entry.key], (v) => {
+		aitState.patch("deviceModes", { [entry.key]: v });
+	}, disabled))));
+	const images = s.mockData.images;
+	const imageGrid = h("div", { className: "ait-image-grid" });
+	images.forEach((dataUri, idx) => {
+		const thumb = h("div", { className: "ait-image-thumb" });
+		const img = h("img", { src: dataUri });
+		const removeBtn = h("button", { className: "ait-image-remove" }, "x");
+		removeBtn.addEventListener("click", () => {
+			const newImages = [...aitState.state.mockData.images];
+			newImages.splice(idx, 1);
+			aitState.patch("mockData", { images: newImages });
+		});
+		if (disabled) removeBtn.disabled = true;
+		thumb.append(img, removeBtn);
+		imageGrid.appendChild(thumb);
+	});
+	const addBtn = h("button", { className: "ait-btn-secondary" }, "+ Add");
+	addBtn.addEventListener("click", () => {
+		const input = document.createElement("input");
+		input.type = "file";
+		input.accept = "image/*";
+		input.multiple = true;
+		input.onchange = () => {
+			const files = Array.from(input.files ?? []);
+			Promise.all(files.map((file) => new Promise((res) => {
+				const reader = new FileReader();
+				reader.onload = () => res(reader.result);
+				reader.readAsDataURL(file);
+			}))).then((dataUris) => {
+				aitState.patch("mockData", { images: [...aitState.state.mockData.images, ...dataUris] });
+			});
+		};
+		input.click();
+	});
+	if (disabled) addBtn.disabled = true;
+	const defaultsBtn = h("button", { className: "ait-btn-secondary" }, "Use defaults");
+	defaultsBtn.addEventListener("click", () => {
+		aitState.patch("mockData", { images: [...getDefaultPlaceholderImages()] });
+	});
+	if (disabled) defaultsBtn.disabled = true;
+	const clearImagesBtn = h("button", { className: "ait-btn-secondary" }, "Clear");
+	clearImagesBtn.addEventListener("click", () => {
+		aitState.patch("mockData", { images: [] });
+	});
+	if (disabled) clearImagesBtn.disabled = true;
+	container.append(h("div", { className: "ait-section" }, h("div", { className: "ait-section-title" }, `Mock Images (${images.length})`), imageGrid, h("div", { className: "ait-btn-row" }, addBtn, defaultsBtn, clearImagesBtn)));
+	return container;
+}
+//#endregion
+//#region src/panel/tabs/iap.ts
 function renderIapTab() {
-  const s = aitState.state;
-  const container = h("div");
-  const results = ["success", "USER_CANCELED", "INVALID_PRODUCT_ID", "PAYMENT_PENDING", "NETWORK_ERROR", "ITEM_ALREADY_OWNED", "INTERNAL_ERROR"];
-  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 });
-      })
-    ),
-    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 });
-      })
-    ),
-    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)})`
-        )
-      )
-    )
-  );
-  return container;
+	const s = aitState.state;
+	const disabled = !s.panelEditable;
+	const container = h("div");
+	const results = [
+		"success",
+		"USER_CANCELED",
+		"INVALID_PRODUCT_ID",
+		"PAYMENT_PENDING",
+		"NETWORK_ERROR",
+		"ITEM_ALREADY_OWNED",
+		"INTERNAL_ERROR"
+	];
+	if (disabled) container.appendChild(monitoringNotice());
+	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)})`))));
+	return container;
 }
+//#endregion
+//#region src/panel/tabs/events.ts
 function renderEventsTab() {
-  const container = h("div");
-  const backBtn = h("button", { className: "ait-btn" }, "Trigger Back Event");
-  backBtn.addEventListener("click", () => aitState.trigger("backEvent"));
-  const homeBtn = h("button", { className: "ait-btn" }, "Trigger Home Event");
-  homeBtn.addEventListener("click", () => aitState.trigger("homeEvent"));
-  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" });
-      }),
-      selectRow("Toss Login Integrated", ["true", "false"], String(aitState.state.auth.isTossLoginIntegrated), (v) => {
-        aitState.patch("auth", { isTossLoginIntegrated: v === "true" });
-      })
-    )
-  );
-  return container;
+	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/analytics.ts
 function renderAnalyticsTab() {
-  const container = h("div");
-  const logs = aitState.state.analyticsLog;
-  const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear");
-  clearBtn.addEventListener("click", () => {
-    aitState.state.analyticsLog.length = 0;
-    refreshPanel();
-  });
-  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) => {
-        const time = new Date(entry.timestamp).toLocaleTimeString("ko-KR", { hour12: false });
-        return h(
-          "div",
-          { className: "ait-log-entry" },
-          h("span", { className: "ait-log-time" }, time),
-          h("span", { className: "ait-log-type" }, entry.type),
-          JSON.stringify(entry.params)
-        );
-      })
-    )
-  );
-  return container;
-}
-function renderStorageTab() {
-  const container = h("div");
-  const prefix = "__ait_storage:";
-  const entries = [];
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-    if (key?.startsWith(prefix)) {
-      entries.push([key.slice(prefix.length), localStorage.getItem(key) ?? ""]);
-    }
-  }
-  const clearBtn = h("button", { className: "ait-btn ait-btn-sm ait-btn-danger" }, "Clear All");
-  clearBtn.addEventListener("click", () => {
-    entries.forEach(([key]) => 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)
-          )
-        )
-      )
-    )
-  );
-  return container;
-}
-var TAB_RENDERERS = {
-  env: renderEnvTab,
-  permissions: renderPermissionsTab,
-  location: renderLocationTab,
-  iap: renderIapTab,
-  events: renderEventsTab,
-  analytics: renderAnalyticsTab,
-  storage: renderStorageTab
-};
-var currentTab = "env";
-var panelEl = null;
-var bodyEl = null;
-var tabsEl = null;
+	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/storage.ts
+function renderStorageTab(refreshPanel) {
+	const disabled = !aitState.state.panelEditable;
+	const container = h("div");
+	if (disabled) container.appendChild(monitoringNotice());
+	const prefix = "__ait_storage:";
+	const entries = [];
+	for (let i = 0; i < localStorage.length; i++) {
+		const key = localStorage.key(i);
+		if (key?.startsWith(prefix)) entries.push([key.slice(14), localStorage.getItem(key) ?? ""]);
+	}
+	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));
+		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))))));
+	return container;
+}
+//#endregion
+//#region src/panel/tabs/index.ts
+const TABS = [
+	{
+		id: "env",
+		label: "Environment"
+	},
+	{
+		id: "permissions",
+		label: "Permissions"
+	},
+	{
+		id: "location",
+		label: "Location"
+	},
+	{
+		id: "device",
+		label: "Device"
+	},
+	{
+		id: "iap",
+		label: "IAP"
+	},
+	{
+		id: "events",
+		label: "Events"
+	},
+	{
+		id: "analytics",
+		label: "Analytics"
+	},
+	{
+		id: "storage",
+		label: "Storage"
+	}
+];
+function createTabRenderers(refreshPanel) {
+	return {
+		env: renderEnvironmentTab,
+		permissions: renderPermissionsTab,
+		location: renderLocationTab,
+		device: renderDeviceTab,
+		iap: renderIapTab,
+		events: renderEventsTab,
+		analytics: renderAnalyticsTab,
+		storage: () => renderStorageTab(refreshPanel)
+	};
+}
+//#endregion
+//#region src/panel/index.ts
+/**
+* @ait-co/devtools Floating Panel
+*
+* import 하면 자동으로 페이지에 DevTools 패널을 마운트한다.
+* 외부 의존성 없이 vanilla DOM으로 구현.
+*/
+function makeDraggable(el, onClickOnly) {
+	let isDragging = false;
+	let startX = 0, startY = 0;
+	let startLeft = 0, startTop = 0;
+	let hasMoved = false;
+	el.addEventListener("pointerdown", (e) => {
+		isDragging = true;
+		hasMoved = false;
+		startX = e.clientX;
+		startY = e.clientY;
+		const rect = el.getBoundingClientRect();
+		startLeft = rect.left;
+		startTop = rect.top;
+		el.setPointerCapture(e.pointerId);
+		e.preventDefault();
+	});
+	el.addEventListener("pointermove", (e) => {
+		if (!isDragging) return;
+		const dx = e.clientX - startX;
+		const dy = e.clientY - startY;
+		if (Math.abs(dx) > 3 || Math.abs(dy) > 3) {
+			hasMoved = true;
+			el.classList.add("dragging");
+		}
+		if (!hasMoved) return;
+		el.style.left = startLeft + dx + "px";
+		el.style.top = startTop + dy + "px";
+		el.style.right = "auto";
+		el.style.bottom = "auto";
+	});
+	el.addEventListener("pointerup", (e) => {
+		if (!isDragging) return;
+		isDragging = false;
+		el.classList.remove("dragging");
+		el.releasePointerCapture(e.pointerId);
+		if (hasMoved) {
+			snapToEdge(el);
+			updatePanelPosition(el);
+			saveButtonPosition(el);
+		} else onClickOnly();
+	});
+	el.addEventListener("pointercancel", (e) => {
+		isDragging = false;
+		el.classList.remove("dragging");
+		el.releasePointerCapture(e.pointerId);
+		if (hasMoved) {
+			snapToEdge(el);
+			updatePanelPosition(el);
+			saveButtonPosition(el);
+		}
+	});
+}
+function snapToEdge(el) {
+	const rect = el.getBoundingClientRect();
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	const cx = rect.left + rect.width / 2;
+	const margin = 16;
+	if (cx < vw / 2) {
+		el.style.left = margin + "px";
+		el.style.right = "auto";
+	} else {
+		el.style.left = "auto";
+		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.bottom = "auto";
+}
+function updatePanelPosition(toggleEl) {
+	if (!panelEl) return;
+	const vw = window.innerWidth;
+	const vh = window.innerHeight;
+	if (vw <= 480) {
+		panelEl.style.top = "";
+		panelEl.style.left = "";
+		panelEl.style.right = "";
+		panelEl.style.bottom = "";
+		return;
+	}
+	const rect = toggleEl.getBoundingClientRect();
+	const panelHeight = 480;
+	const margin = 16;
+	if (rect.left < vw / 2) {
+		panelEl.style.left = margin + "px";
+		panelEl.style.right = "auto";
+	} else {
+		panelEl.style.left = "auto";
+		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.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";
+	}
+}
+function saveButtonPosition(el) {
+	localStorage.setItem("__ait_btn_pos", JSON.stringify({
+		left: el.style.left,
+		top: el.style.top,
+		right: el.style.right,
+		bottom: el.style.bottom
+	}));
+}
+function restoreButtonPosition(el) {
+	const saved = localStorage.getItem("__ait_btn_pos");
+	if (saved) try {
+		const pos = JSON.parse(saved);
+		if (typeof pos !== "object" || pos === null) return;
+		const allowedKeys = [
+			"left",
+			"top",
+			"right",
+			"bottom"
+		];
+		const validCssValue = /^(\d+px|auto)$/;
+		for (const key of allowedKeys) if (key in pos && typeof pos[key] === "string" && validCssValue.test(pos[key])) el.style[key] = pos[key];
+	} catch {}
+	else {
+		el.style.bottom = "16px";
+		el.style.right = "16px";
+	}
+}
+let currentTab = "env";
+let isOpen = false;
+let panelEl = null;
+let bodyEl = null;
+let tabsEl = null;
+let tabRenderers = null;
 function refreshPanel() {
-  if (!bodyEl || !tabsEl) return;
-  bodyEl.innerHTML = "";
-  bodyEl.appendChild(TAB_RENDERERS[currentTab]());
-  tabsEl.querySelectorAll(".ait-panel-tab").forEach((el) => {
-    el.classList.toggle("active", el.getAttribute("data-tab") === currentTab);
-  });
+	if (!bodyEl || !tabsEl) return;
+	if (!tabRenderers) tabRenderers = createTabRenderers(refreshPanel);
+	bodyEl.innerHTML = "";
+	try {
+		bodyEl.appendChild(tabRenderers[currentTab]());
+	} catch (err) {
+		console.error(`[@ait-co/devtools] Error rendering tab "${currentTab}":`, err);
+		bodyEl.appendChild(h("div", { className: "ait-panel-tab-error" }, `Error rendering "${currentTab}" tab.`));
+	}
+	tabsEl.querySelectorAll(".ait-panel-tab").forEach((el) => {
+		el.classList.toggle("active", el.getAttribute("data-tab") === currentTab);
+	});
 }
+if (typeof window !== "undefined") window.addEventListener("__ait:panel-switch-tab", (e) => {
+	currentTab = e.detail.tab;
+	if (panelEl && !panelEl.classList.contains("open")) {
+		isOpen = true;
+		panelEl.classList.add("open");
+	}
+	refreshPanel();
+});
 function mount() {
-  if (typeof document === "undefined") return;
-  if (document.querySelector(".ait-panel-toggle")) return;
-  const style = document.createElement("style");
-  style.textContent = PANEL_STYLES;
-  document.head.appendChild(style);
-  const toggle = h("button", { className: "ait-panel-toggle", title: "AIT DevTools" }, "AIT");
-  let isOpen = false;
-  panelEl = h("div", { className: "ait-panel" });
-  const header = h(
-    "div",
-    { className: "ait-panel-header" },
-    h("span", {}, "AIT DevTools"),
-    h("span", { style: "font-size:11px;color:#666;font-weight:400" }, `v${aitState.state.appVersion}`)
-  );
-  tabsEl = h("div", { className: "ait-panel-tabs" });
-  for (const tab of TABS) {
-    const tabEl = h("button", { className: "ait-panel-tab", "data-tab": tab.id }, tab.label);
-    tabEl.addEventListener("click", () => {
-      currentTab = tab.id;
-      refreshPanel();
-    });
-    tabsEl.appendChild(tabEl);
-  }
-  bodyEl = h("div", { className: "ait-panel-body" });
-  panelEl.append(header, tabsEl, bodyEl);
-  document.body.append(panelEl, toggle);
-  toggle.addEventListener("click", () => {
-    isOpen = !isOpen;
-    panelEl.classList.toggle("open", isOpen);
-    if (isOpen) refreshPanel();
-  });
-  aitState.subscribe(() => {
-    if (isOpen && (currentTab === "analytics" || currentTab === "storage")) {
-      refreshPanel();
-    }
-  });
-  refreshPanel();
+	if (typeof document === "undefined") return;
+	if (document.querySelector(".ait-panel-toggle")) return;
+	setDeviceRefreshPanel(refreshPanel);
+	const style = document.createElement("style");
+	style.textContent = PANEL_STYLES;
+	document.head.appendChild(style);
+	const toggle = h("button", {
+		className: "ait-panel-toggle",
+		title: "AIT DevTools"
+	}, "AIT");
+	restoreButtonPosition(toggle);
+	panelEl = h("div", { className: "ait-panel" });
+	const closeBtn = h("button", {
+		className: "ait-panel-close",
+		title: "Close"
+	}, "×");
+	closeBtn.addEventListener("click", () => {
+		isOpen = false;
+		panelEl.classList.remove("open");
+	});
+	const mockBadge = h("span", {
+		className: `ait-mock-badge ${aitState.state.panelEditable ? "ait-mock-badge-on" : "ait-mock-badge-off"}`,
+		title: "Toggle panel edit mode"
+	}, aitState.state.panelEditable ? "EDIT" : "READ-ONLY");
+	mockBadge.addEventListener("click", () => {
+		aitState.update({ panelEditable: !aitState.state.panelEditable });
+		mockBadge.className = `ait-mock-badge ${aitState.state.panelEditable ? "ait-mock-badge-on" : "ait-mock-badge-off"}`;
+		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 header = h("div", { className: "ait-panel-header" }, h("span", {}, "AIT DevTools"), headerRight);
+	tabsEl = h("div", { className: "ait-panel-tabs" });
+	for (const tab of TABS) {
+		const tabEl = h("button", {
+			className: "ait-panel-tab",
+			"data-tab": tab.id
+		}, tab.label);
+		tabEl.addEventListener("click", () => {
+			currentTab = tab.id;
+			refreshPanel();
+		});
+		tabsEl.appendChild(tabEl);
+	}
+	bodyEl = h("div", { className: "ait-panel-body" });
+	panelEl.append(header, tabsEl, bodyEl);
+	document.body.append(panelEl, toggle);
+	snapToEdge(toggle);
+	saveButtonPosition(toggle);
+	makeDraggable(toggle, () => {
+		isOpen = !isOpen;
+		panelEl.classList.toggle("open", isOpen);
+		if (isOpen) {
+			updatePanelPosition(toggle);
+			refreshPanel();
+		}
+	});
+	let resizeRaf = 0;
+	window.addEventListener("resize", () => {
+		if (resizeRaf) return;
+		resizeRaf = requestAnimationFrame(() => {
+			resizeRaf = 0;
+			snapToEdge(toggle);
+			saveButtonPosition(toggle);
+			if (isOpen) updatePanelPosition(toggle);
+		});
+	});
+	aitState.subscribe(() => {
+		try {
+			if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device")) refreshPanel();
+		} catch (err) {
+			console.error("[@ait-co/devtools] Error in subscribe callback:", err);
+		}
+	});
+	refreshPanel();
 }
 if (typeof document !== "undefined") {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", mount);
-  } else {
-    mount();
-  }
+	const safeMount = () => {
+		try {
+			mount();
+		} catch (err) {
+			console.error("[@ait-co/devtools] Failed to mount panel:", err);
+		}
+	};
+	if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", safeMount);
+	else safeMount();
 }
-export {
-  mount
-};
+//#endregion
+export { mount };
+
 //# sourceMappingURL=index.js.map