@ait-co/devtools 0.0.1 → 0.0.2

package/dist/panel/index.js

@@ -1,15 +1,16 @@
 import {
-  aitState
-} from "../chunk-YYIIG3JT.js";
+  aitState,
+  getDefaultPlaceholderImages
+} from "../chunk-6PPZTREF.js";
 
 // src/panel/styles.ts
+var PANEL_WIDTH = 360;
+var PANEL_HEIGHT = 480;
 var PANEL_STYLES = (
   /* css */
   `
   .ait-panel-toggle {
     position: fixed;
-    bottom: 16px;
-    right: 16px;
     z-index: 99999;
     width: 48px;
     height: 48px;
@@ -25,18 +26,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;
+    width: ${PANEL_WIDTH}px;
+    height: ${PANEL_HEIGHT}px;
     background: #1a1a2e;
     border-radius: 12px;
     box-shadow: 0 8px 32px rgba(0,0,0,0.4);
@@ -61,7 +62,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 +99,8 @@ var PANEL_STYLES = (
   .ait-panel-body {
     padding: 12px 16px;
     overflow-y: auto;
-    max-height: 400px;
     flex: 1;
+    min-height: 0;
   }
 
   .ait-section {
@@ -205,6 +206,176 @@ var PANEL_STYLES = (
     flex: 1;
     word-break: break-all;
   }
+
+  /* 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;
+  }
+
+  @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;
+    }
+  }
 `
 );
 
@@ -213,6 +384,7 @@ var 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" },
@@ -231,8 +403,9 @@ function h(tag, attrs, ...children) {
   }
   return el;
 }
-function selectRow(label, options, value, onChange) {
+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;
@@ -241,45 +414,50 @@ function selectRow(label, options, value, onChange) {
   select.addEventListener("change", () => onChange(select.value));
   return h("div", { className: "ait-row" }, h("label", {}, label), select);
 }
-function inputRow(label, value, onChange) {
+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 renderEnvTab() {
   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 })),
-      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 }))
+      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 }))
+      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) })),
-      inputRow("Bottom", String(s.safeAreaInsets.bottom), (v) => aitState.patch("safeAreaInsets", { bottom: Number(v) }))
+      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;
 }
 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",
@@ -288,7 +466,7 @@ function renderPermissionsTab() {
       ...names.map(
         (name) => selectRow(name, statuses, s.permissions[name], (v) => {
           aitState.patch("permissions", { [name]: v });
-        })
+        }, disabled)
       )
     )
   );
@@ -296,7 +474,9 @@ function renderPermissionsTab() {
 }
 function renderLocationTab() {
   const s = aitState.state;
+  const disabled = !s.panelEditable;
   const container = h("div");
+  if (disabled) container.appendChild(monitoringNotice());
   container.append(
     h(
       "div",
@@ -305,23 +485,25 @@ function renderLocationTab() {
       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;
 }
 function renderIapTab() {
   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",
@@ -329,7 +511,7 @@ function renderIapTab() {
       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",
@@ -337,7 +519,7 @@ function renderIapTab() {
       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",
@@ -356,11 +538,15 @@ function renderIapTab() {
   return container;
 }
 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",
@@ -374,18 +560,21 @@ function renderEventsTab() {
       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;
 }
 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.state.analyticsLog.length = 0;
     refreshPanel();
@@ -415,7 +604,9 @@ function renderAnalyticsTab() {
   return container;
 }
 function renderStorageTab() {
+  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++) {
@@ -425,6 +616,7 @@ function renderStorageTab() {
     }
   }
   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();
@@ -455,15 +647,341 @@ function renderStorageTab() {
   );
   return container;
 }
+var pendingPrompt = null;
+if (typeof window !== "undefined") {
+  window.addEventListener("__ait:prompt-request", (e) => {
+    const detail = e.detail;
+    pendingPrompt = { type: detail.type };
+    currentTab = "device";
+    if (panelEl && !panelEl.classList.contains("open")) {
+      panelEl.classList.add("open");
+    }
+    refreshPanel();
+  });
+}
+function resolvePrompt(type, data) {
+  window.dispatchEvent(new CustomEvent("__ait:prompt-response:" + type, { detail: data }));
+  pendingPrompt = null;
+  refreshPanel();
+}
+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 \u2014 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 \u2014 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 \u2014 Enter coordinates" : "Location Update \u2014 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();
+  });
+  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);
+  }
+  const modeEntries = [
+    { 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"] }
+  ];
+  container.append(
+    h(
+      "div",
+      { className: "ait-section" },
+      h("div", { className: "ait-section-title" }, "Device API Modes"),
+      ...modeEntries.map(
+        (entry) => selectRow(entry.label, entry.options, s.deviceModes[entry.key], (v) => {
+          aitState.patch("deviceModes", { [entry.key]: v });
+          refreshPanel();
+        }, 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 });
+      refreshPanel();
+    });
+    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] });
+        refreshPanel();
+      });
+    };
+    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()] });
+    refreshPanel();
+  });
+  if (disabled) defaultsBtn.disabled = true;
+  const clearImagesBtn = h("button", { className: "ait-btn-secondary" }, "Clear");
+  clearImagesBtn.addEventListener("click", () => {
+    aitState.patch("mockData", { images: [] });
+    refreshPanel();
+  });
+  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;
+}
+function monitoringNotice() {
+  return h(
+    "div",
+    { className: "ait-monitoring-notice" },
+    "Read-only \u2014 mock responses are controlled at build time."
+  );
+}
 var TAB_RENDERERS = {
   env: renderEnvTab,
   permissions: renderPermissionsTab,
   location: renderLocationTab,
+  device: renderDeviceTab,
   iap: renderIapTab,
   events: renderEventsTab,
   analytics: renderAnalyticsTab,
   storage: renderStorageTab
 };
+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 panelWidth = PANEL_WIDTH;
+  const panelHeight = PANEL_HEIGHT;
+  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";
+  }
+}
 var currentTab = "env";
 var panelEl = null;
 var bodyEl = null;
@@ -484,12 +1002,35 @@ function mount() {
   document.head.appendChild(style);
   const toggle = h("button", { className: "ait-panel-toggle", title: "AIT DevTools" }, "AIT");
   let isOpen = false;
+  restoreButtonPosition(toggle);
   panelEl = h("div", { className: "ait-panel" });
+  const closeBtn = h("button", { className: "ait-panel-close", title: "Close" }, "\xD7");
+  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" }, `v${"0.0.2"}`),
+    closeBtn
+  );
   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}`)
+    headerRight
   );
   tabsEl = h("div", { className: "ait-panel-tabs" });
   for (const tab of TABS) {
@@ -503,13 +1044,28 @@ function mount() {
   bodyEl = h("div", { className: "ait-panel-body" });
   panelEl.append(header, tabsEl, bodyEl);
   document.body.append(panelEl, toggle);
-  toggle.addEventListener("click", () => {
+  snapToEdge(toggle);
+  saveButtonPosition(toggle);
+  makeDraggable(toggle, () => {
     isOpen = !isOpen;
     panelEl.classList.toggle("open", isOpen);
-    if (isOpen) refreshPanel();
+    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(() => {
-    if (isOpen && (currentTab === "analytics" || currentTab === "storage")) {
+    if (isOpen && (currentTab === "analytics" || currentTab === "storage" || currentTab === "device")) {
       refreshPanel();
     }
   });