capdebug 0.1.0 → 0.3.0

package/dist/plugin.mjs

@@ -1,842 +1,772 @@
 import { registerPlugin, WebPlugin } from '@capacitor/core';
 
-const DEFAULT_SENSITIVE_KEYS = new Set([
-    'authorization',
-    'cookie',
-    'set-cookie',
-    'password',
-    'passwd',
-    'pass',
-    'token',
-    'access_token',
-    'accesstoken',
-    'refresh_token',
-    'refreshtoken',
-    'api_key',
-    'apikey',
-    'secret',
-    'client_secret',
-    'clientsecret',
-    'bearer',
-    'private_key',
-    'privatekey',
-    'session_id',
-    'sessionid',
-    'jwt',
-    'credit_card',
-    'creditcard',
-    'cvv',
-    'ssn',
+const DEFAULT_SENSITIVE_KEYS = /* @__PURE__ */ new Set([
+  "authorization",
+  "cookie",
+  "set-cookie",
+  "password",
+  "passwd",
+  "pass",
+  "token",
+  "access_token",
+  "accesstoken",
+  "refresh_token",
+  "refreshtoken",
+  "api_key",
+  "apikey",
+  "secret",
+  "client_secret",
+  "clientsecret",
+  "bearer",
+  "private_key",
+  "privatekey",
+  "session_id",
+  "sessionid",
+  "jwt",
+  "credit_card",
+  "creditcard",
+  "cvv",
+  "ssn"
 ]);
-const MASK_VALUE = '********';
+const MASK_VALUE = "********";
 class DataSanitizer {
-    maskKeys;
-    maxDepth;
-    maxArrayLength;
-    constructor(options = {}) {
-        this.maskKeys = new Set([
-            ...DEFAULT_SENSITIVE_KEYS,
-            ...(options.customMaskKeys || []).map(k => k.toLowerCase().trim()),
-        ]);
-        this.maxDepth = options.maxDepth ?? 10;
-        this.maxArrayLength = options.maxArrayLength ?? 100;
-    }
-    isSensitiveKey(key) {
-        const normalized = key.toLowerCase().replace(/[-_]/g, '');
-        if (this.maskKeys.has(key.toLowerCase()) || this.maskKeys.has(normalized)) {
-            return true;
-        }
-        for (const sensitive of this.maskKeys) {
-            const cleanSensitive = sensitive.replace(/[-_]/g, '');
-            if (normalized.includes(cleanSensitive) && cleanSensitive.length >= 4) {
-                return true;
-            }
-        }
-        return false;
+  maskKeys;
+  maxDepth;
+  maxArrayLength;
+  constructor(options = {}) {
+    this.maskKeys = /* @__PURE__ */ new Set([
+      ...DEFAULT_SENSITIVE_KEYS,
+      ...(options.customMaskKeys || []).map((k) => k.toLowerCase().trim())
+    ]);
+    this.maxDepth = options.maxDepth ?? 10;
+    this.maxArrayLength = options.maxArrayLength ?? 100;
+  }
+  isSensitiveKey(key) {
+    const normalized = key.toLowerCase().replace(/[-_]/g, "");
+    if (this.maskKeys.has(key.toLowerCase()) || this.maskKeys.has(normalized)) {
+      return true;
+    }
+    for (const sensitive of this.maskKeys) {
+      const cleanSensitive = sensitive.replace(/[-_]/g, "");
+      if (normalized.includes(cleanSensitive) && cleanSensitive.length >= 4) {
+        return true;
+      }
+    }
+    return false;
+  }
+  sanitize(value) {
+    const seen = /* @__PURE__ */ new WeakSet();
+    return this.sanitizeRecursive(value, 0, seen);
+  }
+  sanitizeRecursive(value, depth, seen) {
+    if (value === null || value === void 0) {
+      return value;
     }
-    sanitize(value) {
-        const seen = new WeakSet();
-        return this.sanitizeRecursive(value, 0, seen);
+    if (depth > this.maxDepth) {
+      return "[Max Depth Reached]";
     }
-    sanitizeRecursive(value, depth, seen) {
-        if (value === null || value === undefined) {
-            return value;
-        }
-        if (depth > this.maxDepth) {
-            return '[Max Depth Reached]';
-        }
-        const type = typeof value;
-        if (type === 'string' || type === 'number' || type === 'boolean') {
-            return value;
-        }
-        if (type === 'bigint') {
-            return value.toString() + 'n';
-        }
-        if (type === 'symbol') {
-            return value.toString();
-        }
-        if (type === 'function') {
-            return `[Function: ${value.name || 'anonymous'}]`;
-        }
-        if (typeof value === 'object') {
-            // Check circular reference
-            if (seen.has(value)) {
-                return '[Circular Reference]';
-            }
-            seen.add(value);
-            // Error handling
-            if (value instanceof Error) {
-                return {
-                    name: value.name,
-                    message: value.message,
-                    stack: value.stack,
-                    ...value,
-                };
-            }
-            // Date handling
-            if (value instanceof Date) {
-                return value.toISOString();
-            }
-            // RegExp handling
-            if (value instanceof RegExp) {
-                return value.toString();
-            }
-            // DOM Node handling
-            if (typeof Element !== 'undefined' && value instanceof Element) {
-                const id = value.id ? `#${value.id}` : '';
-                const className = value.className ? `.${String(value.className).trim().replace(/\s+/g, '.')}` : '';
-                return `<${value.tagName.toLowerCase()}${id}${className}>`;
-            }
-            // Array handling
-            if (Array.isArray(value)) {
-                const arr = value.slice(0, this.maxArrayLength).map(item => this.sanitizeRecursive(item, depth + 1, seen));
-                if (value.length > this.maxArrayLength) {
-                    arr.push(`[... ${value.length - this.maxArrayLength} more items]`);
-                }
-                return arr;
-            }
-            // Map handling
-            if (value instanceof Map) {
-                const entries = {};
-                for (const [k, v] of value.entries()) {
-                    const keyStr = String(k);
-                    entries[keyStr] = this.isSensitiveKey(keyStr)
-                        ? MASK_VALUE
-                        : this.sanitizeRecursive(v, depth + 1, seen);
-                }
-                return entries;
-            }
-            // Set handling
-            if (value instanceof Set) {
-                return Array.from(value).map(item => this.sanitizeRecursive(item, depth + 1, seen));
-            }
-            // Plain Object handling
-            const result = {};
-            const obj = value;
-            for (const [key, val] of Object.entries(obj)) {
-                if (this.isSensitiveKey(key)) {
-                    result[key] = MASK_VALUE;
-                }
-                else {
-                    result[key] = this.sanitizeRecursive(val, depth + 1, seen);
-                }
-            }
-            return result;
-        }
-        return String(value);
+    const type = typeof value;
+    if (type === "string" || type === "number" || type === "boolean") {
+      return value;
+    }
+    if (type === "bigint") {
+      return value.toString() + "n";
     }
+    if (type === "symbol") {
+      return value.toString();
+    }
+    if (type === "function") {
+      return `[Function: ${value.name || "anonymous"}]`;
+    }
+    if (typeof value === "object") {
+      if (seen.has(value)) {
+        return "[Circular Reference]";
+      }
+      seen.add(value);
+      if (value instanceof Error) {
+        return {
+          name: value.name,
+          message: value.message,
+          stack: value.stack,
+          ...value
+        };
+      }
+      if (value instanceof Date) {
+        return value.toISOString();
+      }
+      if (value instanceof RegExp) {
+        return value.toString();
+      }
+      if (typeof Element !== "undefined" && value instanceof Element) {
+        const id = value.id ? `#${value.id}` : "";
+        const className = value.className ? `.${String(value.className).trim().replace(/\s+/g, ".")}` : "";
+        return `<${value.tagName.toLowerCase()}${id}${className}>`;
+      }
+      if (Array.isArray(value)) {
+        const arr = value.slice(0, this.maxArrayLength).map(
+          (item) => this.sanitizeRecursive(item, depth + 1, seen)
+        );
+        if (value.length > this.maxArrayLength) {
+          arr.push(`[... ${value.length - this.maxArrayLength} more items]`);
+        }
+        return arr;
+      }
+      if (value instanceof Map) {
+        const entries = {};
+        for (const [k, v] of value.entries()) {
+          const keyStr = String(k);
+          entries[keyStr] = this.isSensitiveKey(keyStr) ? MASK_VALUE : this.sanitizeRecursive(v, depth + 1, seen);
+        }
+        return entries;
+      }
+      if (value instanceof Set) {
+        return Array.from(value).map(
+          (item) => this.sanitizeRecursive(item, depth + 1, seen)
+        );
+      }
+      const result = {};
+      const obj = value;
+      for (const [key, val] of Object.entries(obj)) {
+        if (this.isSensitiveKey(key)) {
+          result[key] = MASK_VALUE;
+        } else {
+          result[key] = this.sanitizeRecursive(val, depth + 1, seen);
+        }
+      }
+      return result;
+    }
+    return String(value);
+  }
 }
 const defaultSanitizer = new DataSanitizer();
 function sanitize(value, options) {
-    if (!options) {
-        return defaultSanitizer.sanitize(value);
-    }
-    return new DataSanitizer(options).sanitize(value);
+  if (!options) {
+    return defaultSanitizer.sanitize(value);
+  }
+  return new DataSanitizer(options).sanitize(value);
 }
 
 class CapDebugStore {
-    buffer = [];
-    maxEvents;
-    paused = false;
-    listeners = new Set();
-    rafId = null;
-    customMaskKeys = [];
-    filterState = {
-        tab: 'all',
-        search: '',
-        level: 'all',
-        source: 'all',
-    };
-    constructor(maxEvents = 500, customMaskKeys = []) {
-        this.maxEvents = Math.max(1, maxEvents);
-        this.customMaskKeys = customMaskKeys;
-    }
-    setMaxEvents(max) {
-        this.maxEvents = Math.max(1, max);
-        if (this.buffer.length > this.maxEvents) {
-            this.buffer = this.buffer.slice(this.buffer.length - this.maxEvents);
-            this.notify();
-        }
-    }
-    setCustomMaskKeys(keys) {
-        this.customMaskKeys = keys;
-    }
-    add(event) {
-        if (this.paused) {
-            return null;
-        }
-        const sanitizedData = event.data !== undefined
-            ? sanitize(event.data, { customMaskKeys: this.customMaskKeys })
-            : undefined;
-        const fullEvent = {
-            id: event.id || this.generateId(),
-            timestamp: event.timestamp || Date.now(),
-            source: event.source || 'web',
-            type: event.type,
-            level: event.level || 'info',
-            message: event.message,
-            data: sanitizedData,
-            duration: event.duration,
-            platform: event.platform,
-        };
-        if (this.buffer.length >= this.maxEvents) {
-            this.buffer.shift(); // Evict oldest FIFO
-        }
-        this.buffer.push(fullEvent);
-        this.notify();
-        return fullEvent;
-    }
-    clear() {
-        this.buffer = [];
-        this.notify();
-    }
-    pause() {
-        this.paused = true;
-        this.notify();
-    }
-    resume() {
-        this.paused = false;
-        this.notify();
-    }
-    togglePause() {
-        this.paused = !this.paused;
-        this.notify();
-        return this.paused;
-    }
-    isPaused() {
-        return this.paused;
-    }
-    setFilter(partial) {
-        this.filterState = { ...this.filterState, ...partial };
-        this.notify();
-    }
-    getFilter() {
-        return this.filterState;
-    }
-    getAll() {
-        return [...this.buffer];
-    }
-    getCounts() {
-        const counts = {
-            all: this.buffer.length,
-            console: 0,
-            errors: 0,
-            events: 0,
-            native: 0,
-            device: 0,
-            network: 0,
-            bridge: 0,
-        };
-        for (const ev of this.buffer) {
-            if (ev.source === 'console')
-                counts.console++;
-            if (ev.level === 'error')
-                counts.errors++;
-            if (ev.source === 'web' || ev.source === 'system')
-                counts.events++;
-            if (ev.source === 'native')
-                counts.native++;
-            if (ev.source === 'network')
-                counts.network++;
-            if (ev.source === 'bridge')
-                counts.bridge++;
-        }
-        return counts;
-    }
-    getFiltered() {
-        const { tab, search, level, source } = this.filterState;
-        const query = search.trim().toLowerCase();
-        return this.buffer.filter(event => {
-            // 1. Tab filtering
-            if (tab === 'console' && event.source !== 'console')
-                return false;
-            if (tab === 'errors' && event.level !== 'error')
-                return false;
-            if (tab === 'events' && (event.source !== 'web' && event.source !== 'system'))
-                return false;
-            if (tab === 'native' && event.source !== 'native')
-                return false;
-            if (tab === 'network' && event.source !== 'network')
-                return false;
-            if (tab === 'bridge' && event.source !== 'bridge')
-                return false;
-            // 2. Level filter
-            if (level !== 'all' && event.level !== level)
-                return false;
-            // 3. Source filter
-            if (source !== 'all' && event.source !== source)
-                return false;
-            // 4. Search query
-            if (query) {
-                const typeMatch = event.type.toLowerCase().includes(query);
-                const msgMatch = event.message ? event.message.toLowerCase().includes(query) : false;
-                const sourceMatch = event.source.toLowerCase().includes(query);
-                if (typeMatch || msgMatch || sourceMatch)
-                    return true;
-                if (event.data) {
-                    try {
-                        const dataStr = typeof event.data === 'string'
-                            ? event.data.toLowerCase()
-                            : JSON.stringify(event.data).toLowerCase();
-                        return dataStr.includes(query);
-                    }
-                    catch {
-                        return false;
-                    }
-                }
-                return false;
-            }
-            return true;
-        });
-    }
-    exportJson() {
-        return JSON.stringify({
-            exportedAt: new Date().toISOString(),
-            totalEvents: this.buffer.length,
-            events: this.buffer,
-        }, null, 2);
-    }
-    subscribe(listener) {
-        this.listeners.add(listener);
-        listener(this.getFiltered(), this);
-        return () => {
-            this.listeners.delete(listener);
-        };
+  buffer = [];
+  maxEvents;
+  paused = false;
+  listeners = /* @__PURE__ */ new Set();
+  rafId = null;
+  customMaskKeys = [];
+  filterState = {
+    tab: "all",
+    search: "",
+    level: "all",
+    source: "all"
+  };
+  constructor(maxEvents = 500, customMaskKeys = []) {
+    this.maxEvents = Math.max(1, maxEvents);
+    this.customMaskKeys = customMaskKeys;
+  }
+  setMaxEvents(max) {
+    this.maxEvents = Math.max(1, max);
+    if (this.buffer.length > this.maxEvents) {
+      this.buffer = this.buffer.slice(this.buffer.length - this.maxEvents);
+      this.notify();
     }
-    notify() {
-        if (typeof window !== 'undefined' && typeof window.requestAnimationFrame === 'function') {
-            if (this.rafId !== null) {
-                cancelAnimationFrame(this.rafId);
-            }
-            this.rafId = requestAnimationFrame(() => {
-                this.rafId = null;
-                this.dispatchToListeners();
-            });
-        }
-        else {
-            this.dispatchToListeners();
-        }
+  }
+  setCustomMaskKeys(keys) {
+    this.customMaskKeys = keys;
+  }
+  add(event) {
+    if (this.paused) {
+      return null;
+    }
+    const sanitizedData = event.data !== void 0 ? sanitize(event.data, { customMaskKeys: this.customMaskKeys }) : void 0;
+    const fullEvent = {
+      id: event.id || this.generateId(),
+      timestamp: event.timestamp || Date.now(),
+      source: event.source || "web",
+      type: event.type,
+      level: event.level || "info",
+      message: event.message,
+      data: sanitizedData,
+      duration: event.duration,
+      platform: event.platform
+    };
+    if (this.buffer.length >= this.maxEvents) {
+      this.buffer.shift();
     }
-    dispatchToListeners() {
-        const filtered = this.getFiltered();
-        for (const listener of this.listeners) {
-            try {
-                listener(filtered, this);
-            }
-            catch (err) {
-                // Prevent subscriber errors from halting store
-            }
+    this.buffer.push(fullEvent);
+    this.notify();
+    return fullEvent;
+  }
+  clear() {
+    this.buffer = [];
+    this.notify();
+  }
+  pause() {
+    this.paused = true;
+    this.notify();
+  }
+  resume() {
+    this.paused = false;
+    this.notify();
+  }
+  togglePause() {
+    this.paused = !this.paused;
+    this.notify();
+    return this.paused;
+  }
+  isPaused() {
+    return this.paused;
+  }
+  setFilter(partial) {
+    this.filterState = { ...this.filterState, ...partial };
+    this.notify();
+  }
+  getFilter() {
+    return this.filterState;
+  }
+  getAll() {
+    return [...this.buffer];
+  }
+  getCounts() {
+    const counts = {
+      all: this.buffer.length,
+      console: 0,
+      errors: 0,
+      events: 0,
+      native: 0,
+      device: 0,
+      network: 0,
+      bridge: 0
+    };
+    for (const ev of this.buffer) {
+      if (ev.source === "console") counts.console++;
+      if (ev.level === "error") counts.errors++;
+      if (ev.source === "web" || ev.source === "system") counts.events++;
+      if (ev.source === "native") counts.native++;
+      if (ev.source === "network") counts.network++;
+      if (ev.source === "bridge") counts.bridge++;
+    }
+    return counts;
+  }
+  getFiltered() {
+    const { tab, search, level, source } = this.filterState;
+    const query = search.trim().toLowerCase();
+    return this.buffer.filter((event) => {
+      if (tab === "console" && event.source !== "console") return false;
+      if (tab === "errors" && event.level !== "error") return false;
+      if (tab === "events" && (event.source !== "web" && event.source !== "system")) return false;
+      if (tab === "native" && event.source !== "native") return false;
+      if (tab === "network" && event.source !== "network") return false;
+      if (tab === "bridge" && event.source !== "bridge") return false;
+      if (level !== "all" && event.level !== level) return false;
+      if (source !== "all" && event.source !== source) return false;
+      if (query) {
+        const typeMatch = event.type.toLowerCase().includes(query);
+        const msgMatch = event.message ? event.message.toLowerCase().includes(query) : false;
+        const sourceMatch = event.source.toLowerCase().includes(query);
+        if (typeMatch || msgMatch || sourceMatch) return true;
+        if (event.data) {
+          try {
+            const dataStr = typeof event.data === "string" ? event.data.toLowerCase() : JSON.stringify(event.data).toLowerCase();
+            return dataStr.includes(query);
+          } catch {
+            return false;
+          }
         }
+        return false;
+      }
+      return true;
+    });
+  }
+  exportJson() {
+    return JSON.stringify(
+      {
+        exportedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        totalEvents: this.buffer.length,
+        events: this.buffer
+      },
+      null,
+      2
+    );
+  }
+  subscribe(listener) {
+    this.listeners.add(listener);
+    listener(this.getFiltered(), this);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+  notify() {
+    if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
+      if (this.rafId !== null) {
+        cancelAnimationFrame(this.rafId);
+      }
+      this.rafId = requestAnimationFrame(() => {
+        this.rafId = null;
+        this.dispatchToListeners();
+      });
+    } else {
+      this.dispatchToListeners();
     }
-    generateId() {
-        return 'ev_' + Math.random().toString(36).substring(2, 9) + '_' + Date.now().toString(36);
+  }
+  dispatchToListeners() {
+    const filtered = this.getFiltered();
+    for (const listener of this.listeners) {
+      try {
+        listener(filtered, this);
+      } catch (err) {
+      }
     }
+  }
+  generateId() {
+    return "ev_" + Math.random().toString(36).substring(2, 9) + "_" + Date.now().toString(36);
+  }
 }
 
 class ConsoleCollector {
-    id = 'console';
-    running = false;
-    originalMethods = {};
-    start() {
-        if (this.running || typeof console === 'undefined')
-            return;
-        const methods = [
-            { method: 'log', level: 'info' },
-            { method: 'info', level: 'info' },
-            { method: 'warn', level: 'warn' },
-            { method: 'error', level: 'error' },
-            { method: 'debug', level: 'debug' },
-        ];
-        for (const { method, level } of methods) {
-            const original = console[method]?.bind(console);
-            this.originalMethods[method] = original;
-            console[method] = (...args) => {
-                // 1. Call original console method
-                if (original) {
-                    try {
-                        original(...args);
-                    }
-                    catch {
-                        // ignore
-                    }
-                }
-                // 2. Dispatch CapDebug event safely
-                try {
-                    this.emitConsoleEvent(method, level, args);
-                }
-                catch {
-                    // ignore to prevent crashing host application
-                }
-            };
-        }
-        this.running = true;
-    }
-    stop() {
-        if (!this.running || typeof console === 'undefined')
-            return;
-        for (const method of Object.keys(this.originalMethods)) {
-            const original = this.originalMethods[method];
-            if (original) {
-                console[method] = original;
-            }
+  id = "console";
+  running = false;
+  originalMethods = {};
+  start() {
+    if (this.running || typeof console === "undefined") return;
+    const methods = [
+      { method: "log", level: "info" },
+      { method: "info", level: "info" },
+      { method: "warn", level: "warn" },
+      { method: "error", level: "error" },
+      { method: "debug", level: "debug" }
+    ];
+    for (const { method, level } of methods) {
+      const original = console[method]?.bind(console);
+      this.originalMethods[method] = original;
+      console[method] = (...args) => {
+        if (original) {
+          try {
+            original(...args);
+          } catch {
+          }
         }
-        this.originalMethods = {};
-        this.running = false;
-    }
-    emitConsoleEvent(method, level, args) {
-        if (typeof window === 'undefined')
-            return;
-        let message = '';
-        let data = undefined;
-        if (args.length === 1) {
-            const arg = args[0];
-            if (typeof arg === 'string' || typeof arg === 'number' || typeof arg === 'boolean') {
-                message = String(arg);
-            }
-            else if (arg instanceof Error) {
-                message = `${arg.name}: ${arg.message}`;
-                data = { name: arg.name, message: arg.message, stack: arg.stack };
-            }
-            else {
-                message = `[${typeof arg}]`;
-                data = arg;
-            }
-        }
-        else if (args.length > 1) {
-            // Multiple arguments
-            const first = args[0];
-            if (typeof first === 'string') {
-                message = first;
-                data = args.slice(1);
-            }
-            else {
-                message = args.map(a => (typeof a === 'object' && a !== null ? '[Object]' : String(a))).join(' ');
-                data = args;
-            }
+        try {
+          this.emitConsoleEvent(method, level, args);
+        } catch {
         }
-        window.dispatchEvent(new CustomEvent('capdebug', {
-            detail: {
-                source: 'console',
-                type: `console.${method}`,
-                level,
-                message,
-                data,
-                timestamp: Date.now(),
-            },
-        }));
+      };
     }
+    this.running = true;
+  }
+  stop() {
+    if (!this.running || typeof console === "undefined") return;
+    for (const method of Object.keys(this.originalMethods)) {
+      const original = this.originalMethods[method];
+      if (original) {
+        console[method] = original;
+      }
+    }
+    this.originalMethods = {};
+    this.running = false;
+  }
+  emitConsoleEvent(method, level, args) {
+    if (typeof window === "undefined") return;
+    let message = "";
+    let data = void 0;
+    if (args.length === 1) {
+      const arg = args[0];
+      if (typeof arg === "string" || typeof arg === "number" || typeof arg === "boolean") {
+        message = String(arg);
+      } else if (arg instanceof Error) {
+        message = `${arg.name}: ${arg.message}`;
+        data = { name: arg.name, message: arg.message, stack: arg.stack };
+      } else {
+        message = `[${typeof arg}]`;
+        data = arg;
+      }
+    } else if (args.length > 1) {
+      const first = args[0];
+      if (typeof first === "string") {
+        message = first;
+        data = args.slice(1);
+      } else {
+        message = args.map((a) => typeof a === "object" && a !== null ? "[Object]" : String(a)).join(" ");
+        data = args;
+      }
+    }
+    window.dispatchEvent(
+      new CustomEvent("capdebug", {
+        detail: {
+          source: "console",
+          type: `console.${method}`,
+          level,
+          message,
+          data,
+          timestamp: Date.now()
+        }
+      })
+    );
+  }
 }
 
 class ErrorCollector {
-    id = 'error';
-    running = false;
-    errorHandler = null;
-    rejectionHandler = null;
-    start() {
-        if (this.running || typeof window === 'undefined')
-            return;
-        this.errorHandler = (event) => {
-            try {
-                const error = event.error;
-                const message = event.message || (error && error.message) || 'Uncaught Error';
-                const stack = error && error.stack ? error.stack : undefined;
-                window.dispatchEvent(new CustomEvent('capdebug', {
-                    detail: {
-                        source: 'web',
-                        type: 'window.error',
-                        level: 'error',
-                        message,
-                        data: {
-                            filename: event.filename,
-                            lineno: event.lineno,
-                            colno: event.colno,
-                            stack,
-                            errorName: error?.name,
-                        },
-                        timestamp: Date.now(),
-                    },
-                }));
-            }
-            catch {
-                // ignore
-            }
-        };
-        this.rejectionHandler = (event) => {
-            try {
-                const reason = event.reason;
-                let message = 'Unhandled Promise Rejection';
-                let stack = undefined;
-                let data = reason;
-                if (reason instanceof Error) {
-                    message = `Unhandled Rejection: ${reason.message}`;
-                    stack = reason.stack;
-                    data = {
-                        name: reason.name,
-                        message: reason.message,
-                        stack,
-                    };
-                }
-                else if (typeof reason === 'string') {
-                    message = `Unhandled Rejection: ${reason}`;
-                }
-                window.dispatchEvent(new CustomEvent('capdebug', {
-                    detail: {
-                        source: 'web',
-                        type: 'unhandledrejection',
-                        level: 'error',
-                        message,
-                        data: {
-                            reason: data,
-                            stack,
-                        },
-                        timestamp: Date.now(),
-                    },
-                }));
+  id = "error";
+  running = false;
+  errorHandler = null;
+  rejectionHandler = null;
+  start() {
+    if (this.running || typeof window === "undefined") return;
+    this.errorHandler = (event) => {
+      try {
+        const error = event.error;
+        const message = event.message || error && error.message || "Uncaught Error";
+        const stack = error && error.stack ? error.stack : void 0;
+        window.dispatchEvent(
+          new CustomEvent("capdebug", {
+            detail: {
+              source: "web",
+              type: "window.error",
+              level: "error",
+              message,
+              data: {
+                filename: event.filename,
+                lineno: event.lineno,
+                colno: event.colno,
+                stack,
+                errorName: error?.name
+              },
+              timestamp: Date.now()
             }
-            catch {
-                // ignore
+          })
+        );
+      } catch {
+      }
+    };
+    this.rejectionHandler = (event) => {
+      try {
+        const reason = event.reason;
+        let message = "Unhandled Promise Rejection";
+        let stack = void 0;
+        let data = reason;
+        if (reason instanceof Error) {
+          message = `Unhandled Rejection: ${reason.message}`;
+          stack = reason.stack;
+          data = {
+            name: reason.name,
+            message: reason.message,
+            stack
+          };
+        } else if (typeof reason === "string") {
+          message = `Unhandled Rejection: ${reason}`;
+        }
+        window.dispatchEvent(
+          new CustomEvent("capdebug", {
+            detail: {
+              source: "web",
+              type: "unhandledrejection",
+              level: "error",
+              message,
+              data: {
+                reason: data,
+                stack
+              },
+              timestamp: Date.now()
             }
-        };
-        window.addEventListener('error', this.errorHandler);
-        window.addEventListener('unhandledrejection', this.rejectionHandler);
-        this.running = true;
-    }
-    stop() {
-        if (!this.running || typeof window === 'undefined')
-            return;
-        if (this.errorHandler) {
-            window.removeEventListener('error', this.errorHandler);
-            this.errorHandler = null;
-        }
-        if (this.rejectionHandler) {
-            window.removeEventListener('unhandledrejection', this.rejectionHandler);
-            this.rejectionHandler = null;
-        }
-        this.running = false;
+          })
+        );
+      } catch {
+      }
+    };
+    window.addEventListener("error", this.errorHandler);
+    window.addEventListener("unhandledrejection", this.rejectionHandler);
+    this.running = true;
+  }
+  stop() {
+    if (!this.running || typeof window === "undefined") return;
+    if (this.errorHandler) {
+      window.removeEventListener("error", this.errorHandler);
+      this.errorHandler = null;
+    }
+    if (this.rejectionHandler) {
+      window.removeEventListener("unhandledrejection", this.rejectionHandler);
+      this.rejectionHandler = null;
     }
+    this.running = false;
+  }
 }
 
 class NetworkCollector {
-    id = 'network';
-    running = false;
-    originalFetch = null;
-    options;
-    constructor(options = {}) {
-        this.options = {
-            body: false,
-            ...options,
-        };
-    }
-    setOptions(options) {
-        this.options = { ...this.options, ...options };
-    }
-    start() {
-        if (this.running || typeof window === 'undefined' || !window.fetch)
-            return;
-        this.originalFetch = window.fetch;
-        const self = this;
-        window.fetch = async function (input, init) {
-            const startTime = performance.now();
-            const timestamp = Date.now();
-            let url = '';
-            let method = 'GET';
-            if (typeof input === 'string') {
-                url = input;
-            }
-            else if (input instanceof URL) {
-                url = input.toString();
-            }
-            else if (typeof Request !== 'undefined' && input instanceof Request) {
-                url = input.url;
-                method = input.method;
-            }
-            if (init && init.method) {
-                method = init.method.toUpperCase();
-            }
-            let requestHeaders = {};
-            if (init && init.headers) {
-                if (typeof Headers !== 'undefined' && init.headers instanceof Headers) {
-                    init.headers.forEach((value, key) => {
-                        requestHeaders[key] = value;
-                    });
-                }
-                else if (Array.isArray(init.headers)) {
-                    for (const [k, v] of init.headers) {
-                        requestHeaders[k] = v;
-                    }
-                }
-                else if (typeof init.headers === 'object') {
-                    requestHeaders = { ...init.headers };
-                }
-            }
-            let requestBody = undefined;
-            if (self.options.body && init && init.body) {
-                try {
-                    if (typeof init.body === 'string') {
-                        try {
-                            requestBody = JSON.parse(init.body);
-                        }
-                        catch {
-                            requestBody = init.body;
-                        }
-                    }
-                    else {
-                        requestBody = '[Binary/Stream Body]';
-                    }
-                }
-                catch {
-                    requestBody = '[Unreadable Body]';
-                }
-            }
+  id = "network";
+  running = false;
+  originalFetch = null;
+  options;
+  constructor(options = {}) {
+    this.options = {
+      body: false,
+      ...options
+    };
+  }
+  setOptions(options) {
+    this.options = { ...this.options, ...options };
+  }
+  start() {
+    if (this.running || typeof window === "undefined" || !window.fetch) return;
+    this.originalFetch = window.fetch;
+    const self = this;
+    window.fetch = async function(input, init) {
+      const startTime = performance.now();
+      const timestamp = Date.now();
+      let url = "";
+      let method = "GET";
+      if (typeof input === "string") {
+        url = input;
+      } else if (input instanceof URL) {
+        url = input.toString();
+      } else if (typeof Request !== "undefined" && input instanceof Request) {
+        url = input.url;
+        method = input.method;
+      }
+      if (init && init.method) {
+        method = init.method.toUpperCase();
+      }
+      let requestHeaders = {};
+      if (init && init.headers) {
+        if (typeof Headers !== "undefined" && init.headers instanceof Headers) {
+          init.headers.forEach((value, key) => {
+            requestHeaders[key] = value;
+          });
+        } else if (Array.isArray(init.headers)) {
+          for (const [k, v] of init.headers) {
+            requestHeaders[k] = v;
+          }
+        } else if (typeof init.headers === "object") {
+          requestHeaders = { ...init.headers };
+        }
+      }
+      let requestBody = void 0;
+      if (self.options.body && init && init.body) {
+        try {
+          if (typeof init.body === "string") {
             try {
-                const response = await self.originalFetch.call(this, input, init);
-                const duration = Math.round(performance.now() - startTime);
-                let level = 'info';
-                if (response.status >= 500) {
-                    level = 'error';
-                }
-                else if (response.status >= 400) {
-                    level = 'warn';
-                }
-                let responseBody = undefined;
-                if (self.options.body) {
-                    try {
-                        const clone = response.clone();
-                        const contentType = clone.headers.get('content-type') || '';
-                        if (contentType.includes('application/json')) {
-                            responseBody = await clone.json();
-                        }
-                        else if (contentType.includes('text/')) {
-                            responseBody = await clone.text();
-                        }
-                    }
-                    catch {
-                        responseBody = '[Could not clone response body]';
-                    }
-                }
-                const responseHeaders = {};
-                response.headers.forEach((v, k) => {
-                    responseHeaders[k] = v;
-                });
-                self.emitNetworkEvent({
-                    type: `fetch ${method}`,
-                    level,
-                    message: `${method} ${url} → ${response.status} ${response.statusText} (${duration}ms)`,
-                    duration,
-                    timestamp,
-                    data: {
-                        method,
-                        url,
-                        status: response.status,
-                        statusText: response.statusText,
-                        ok: response.ok,
-                        duration,
-                        requestHeaders,
-                        responseHeaders,
-                        requestBody,
-                        responseBody,
-                    },
-                });
-                return response;
+              requestBody = JSON.parse(init.body);
+            } catch {
+              requestBody = init.body;
             }
-            catch (err) {
-                const duration = Math.round(performance.now() - startTime);
-                self.emitNetworkEvent({
-                    type: `fetch ${method}`,
-                    level: 'error',
-                    message: `${method} ${url} → Failed: ${err?.message || 'Network Error'} (${duration}ms)`,
-                    duration,
-                    timestamp,
-                    data: {
-                        method,
-                        url,
-                        error: err?.message || String(err),
-                        duration,
-                        requestHeaders,
-                        requestBody,
-                    },
-                });
-                throw err;
+          } else {
+            requestBody = "[Binary/Stream Body]";
+          }
+        } catch {
+          requestBody = "[Unreadable Body]";
+        }
+      }
+      try {
+        const response = await self.originalFetch.call(this, input, init);
+        const duration = Math.round(performance.now() - startTime);
+        let level = "info";
+        if (response.status >= 500) {
+          level = "error";
+        } else if (response.status >= 400) {
+          level = "warn";
+        }
+        let responseBody = void 0;
+        if (self.options.body) {
+          try {
+            const clone = response.clone();
+            const contentType = clone.headers.get("content-type") || "";
+            if (contentType.includes("application/json")) {
+              responseBody = await clone.json();
+            } else if (contentType.includes("text/")) {
+              responseBody = await clone.text();
             }
-        };
-        this.running = true;
-    }
-    stop() {
-        if (!this.running || typeof window === 'undefined')
-            return;
-        if (this.originalFetch) {
-            window.fetch = this.originalFetch;
-            this.originalFetch = null;
+          } catch {
+            responseBody = "[Could not clone response body]";
+          }
         }
-        this.running = false;
+        const responseHeaders = {};
+        response.headers.forEach((v, k) => {
+          responseHeaders[k] = v;
+        });
+        self.emitNetworkEvent({
+          type: `fetch ${method}`,
+          level,
+          message: `${method} ${url} \u2192 ${response.status} ${response.statusText} (${duration}ms)`,
+          duration,
+          timestamp,
+          data: {
+            method,
+            url,
+            status: response.status,
+            statusText: response.statusText,
+            ok: response.ok,
+            duration,
+            requestHeaders,
+            responseHeaders,
+            requestBody,
+            responseBody
+          }
+        });
+        return response;
+      } catch (err) {
+        const duration = Math.round(performance.now() - startTime);
+        self.emitNetworkEvent({
+          type: `fetch ${method}`,
+          level: "error",
+          message: `${method} ${url} \u2192 Failed: ${err?.message || "Network Error"} (${duration}ms)`,
+          duration,
+          timestamp,
+          data: {
+            method,
+            url,
+            error: err?.message || String(err),
+            duration,
+            requestHeaders,
+            requestBody
+          }
+        });
+        throw err;
+      }
+    };
+    this.running = true;
+  }
+  stop() {
+    if (!this.running || typeof window === "undefined") return;
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch;
+      this.originalFetch = null;
     }
-    emitNetworkEvent(detail) {
-        if (typeof window === 'undefined')
-            return;
-        try {
-            window.dispatchEvent(new CustomEvent('capdebug', {
-                detail: {
-                    source: 'network',
-                    ...detail,
-                },
-            }));
-        }
-        catch {
-            // ignore
-        }
+    this.running = false;
+  }
+  emitNetworkEvent(detail) {
+    if (typeof window === "undefined") return;
+    try {
+      window.dispatchEvent(
+        new CustomEvent("capdebug", {
+          detail: {
+            source: "network",
+            ...detail
+          }
+        })
+      );
+    } catch {
     }
+  }
 }
 
 class CustomEventCollector {
-    id = 'custom-event';
-    store;
-    running = false;
-    handler = null;
-    constructor(store) {
-        this.store = store;
-    }
-    start() {
-        if (this.running || typeof window === 'undefined')
-            return;
-        this.handler = (event) => {
-            const customEvent = event;
-            if (customEvent && customEvent.detail) {
-                const detail = customEvent.detail;
-                this.store.add({
-                    id: detail.id,
-                    timestamp: detail.timestamp || Date.now(),
-                    source: detail.source || 'web',
-                    type: detail.type || 'custom-event',
-                    level: detail.level || 'info',
-                    message: detail.message,
-                    data: detail.data,
-                    duration: detail.duration,
-                    platform: detail.platform,
-                });
-            }
-        };
-        window.addEventListener('capdebug', this.handler);
-        this.running = true;
-    }
-    stop() {
-        if (!this.running || typeof window === 'undefined')
-            return;
-        if (this.handler) {
-            window.removeEventListener('capdebug', this.handler);
-            this.handler = null;
-        }
-        this.running = false;
+  id = "custom-event";
+  store;
+  running = false;
+  handler = null;
+  constructor(store) {
+    this.store = store;
+  }
+  start() {
+    if (this.running || typeof window === "undefined") return;
+    this.handler = (event) => {
+      const customEvent = event;
+      if (customEvent && customEvent.detail) {
+        const detail = customEvent.detail;
+        this.store.add({
+          id: detail.id,
+          timestamp: detail.timestamp || Date.now(),
+          source: detail.source || "web",
+          type: detail.type || "custom-event",
+          level: detail.level || "info",
+          message: detail.message,
+          data: detail.data,
+          duration: detail.duration,
+          platform: detail.platform
+        });
+      }
+    };
+    window.addEventListener("capdebug", this.handler);
+    this.running = true;
+  }
+  stop() {
+    if (!this.running || typeof window === "undefined") return;
+    if (this.handler) {
+      window.removeEventListener("capdebug", this.handler);
+      this.handler = null;
     }
+    this.running = false;
+  }
 }
 
 class BrowserEventCollector {
-    id = 'browser-event';
-    running = false;
-    observedEvents = new Map();
-    start() {
-        this.running = true;
-    }
-    observe(eventName) {
-        if (!this.running || typeof window === 'undefined' || this.observedEvents.has(eventName))
-            return;
-        const listener = (event) => {
-            let data = {
-                type: event.type,
-                timeStamp: event.timeStamp,
-            };
-            if (event.type === 'visibilitychange' && typeof document !== 'undefined') {
-                data.visibilityState = document.visibilityState;
-                data.hidden = document.hidden;
-            }
-            else if (event.type === 'online' || event.type === 'offline') {
-                data.onLine = typeof navigator !== 'undefined' ? navigator.onLine : undefined;
-            }
-            window.dispatchEvent(new CustomEvent('capdebug', {
-                detail: {
-                    source: 'system',
-                    type: `event.${eventName}`,
-                    level: 'info',
-                    message: `Browser event fired: ${eventName}`,
-                    data,
-                    timestamp: Date.now(),
-                },
-            }));
-        };
-        const target = eventName === 'visibilitychange' && typeof document !== 'undefined'
-            ? document
-            : window;
-        target.addEventListener(eventName, listener);
-        this.observedEvents.set(eventName, listener);
-    }
-    unobserve(eventName) {
-        const listener = this.observedEvents.get(eventName);
-        if (!listener)
-            return;
-        const target = eventName === 'visibilitychange' && typeof document !== 'undefined'
-            ? document
-            : window;
-        target.removeEventListener(eventName, listener);
-        this.observedEvents.delete(eventName);
-    }
-    stop() {
-        for (const [eventName, listener] of this.observedEvents.entries()) {
-            const target = eventName === 'visibilitychange' && typeof document !== 'undefined'
-                ? document
-                : window;
-            target.removeEventListener(eventName, listener);
-        }
-        this.observedEvents.clear();
-        this.running = false;
+  id = "browser-event";
+  running = false;
+  observedEvents = /* @__PURE__ */ new Map();
+  start() {
+    this.running = true;
+  }
+  observe(eventName) {
+    if (!this.running || typeof window === "undefined" || this.observedEvents.has(eventName)) return;
+    const listener = (event) => {
+      let data = {
+        type: event.type,
+        timeStamp: event.timeStamp
+      };
+      if (event.type === "visibilitychange" && typeof document !== "undefined") {
+        data.visibilityState = document.visibilityState;
+        data.hidden = document.hidden;
+      } else if (event.type === "online" || event.type === "offline") {
+        data.onLine = typeof navigator !== "undefined" ? navigator.onLine : void 0;
+      }
+      window.dispatchEvent(
+        new CustomEvent("capdebug", {
+          detail: {
+            source: "system",
+            type: `event.${eventName}`,
+            level: "info",
+            message: `Browser event fired: ${eventName}`,
+            data,
+            timestamp: Date.now()
+          }
+        })
+      );
+    };
+    const target = eventName === "visibilitychange" && typeof document !== "undefined" ? document : window;
+    target.addEventListener(eventName, listener);
+    this.observedEvents.set(eventName, listener);
+  }
+  unobserve(eventName) {
+    const listener = this.observedEvents.get(eventName);
+    if (!listener) return;
+    const target = eventName === "visibilitychange" && typeof document !== "undefined" ? document : window;
+    target.removeEventListener(eventName, listener);
+    this.observedEvents.delete(eventName);
+  }
+  stop() {
+    for (const [eventName, listener] of this.observedEvents.entries()) {
+      const target = eventName === "visibilitychange" && typeof document !== "undefined" ? document : window;
+      target.removeEventListener(eventName, listener);
     }
+    this.observedEvents.clear();
+    this.running = false;
+  }
 }
 
 class BridgeCollector {
-    id = 'bridge';
-    running = false;
-    start() {
-        if (this.running)
-            return;
-        // Reserved for non-intrusive Capacitor bridge telemetry
-        this.running = true;
-    }
-    stop() {
-        this.running = false;
-    }
-    emitBridgeCall(pluginName, methodName, options, duration) {
-        if (!this.running || typeof window === 'undefined')
-            return;
-        window.dispatchEvent(new CustomEvent('capdebug', {
-            detail: {
-                source: 'bridge',
-                type: `${pluginName}.${methodName}`,
-                level: 'debug',
-                message: `Bridge call: ${pluginName}.${methodName}`,
-                data: options,
-                duration,
-                timestamp: Date.now(),
-            },
-        }));
-    }
+  id = "bridge";
+  running = false;
+  start() {
+    if (this.running) return;
+    this.running = true;
+  }
+  stop() {
+    this.running = false;
+  }
+  emitBridgeCall(pluginName, methodName, options, duration) {
+    if (!this.running || typeof window === "undefined") return;
+    window.dispatchEvent(
+      new CustomEvent("capdebug", {
+        detail: {
+          source: "bridge",
+          type: `${pluginName}.${methodName}`,
+          level: "debug",
+          message: `Bridge call: ${pluginName}.${methodName}`,
+          data: options,
+          duration,
+          timestamp: Date.now()
+        }
+      })
+    );
+  }
 }
 
 const VIEWER_STYLES = `
@@ -1563,1204 +1493,1993 @@ const VIEWER_STYLES = `
 }
 `;
 
-const STORAGE_KEY = 'capdebug_btn_pos';
+const STORAGE_KEY = "capdebug_btn_pos";
 class FloatingButton {
-    element;
-    badgeElement;
-    options;
-    isDragging = false;
-    hasMoved = false;
-    startX = 0;
-    startY = 0;
-    initialLeft = 0;
-    initialTop = 0;
-    constructor(options = {}) {
-        this.options = {
-            position: 'right',
-            persistPosition: true,
-            ...options,
-        };
-        this.element = document.createElement('div');
-        this.element.className = 'cd-floating-btn';
-        this.element.setAttribute('role', 'button');
-        this.element.setAttribute('aria-label', 'Open CapDebug');
-        const logo = document.createElement('span');
-        logo.className = 'cd-btn-logo';
-        logo.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>CAP`;
-        this.badgeElement = document.createElement('span');
-        this.badgeElement.className = 'cd-btn-badge';
-        this.badgeElement.textContent = '0';
-        this.element.appendChild(logo);
-        this.element.appendChild(this.badgeElement);
-        this.initPosition();
-        this.bindEvents();
-    }
-    getElement() {
-        return this.element;
-    }
-    setErrorCount(count) {
-        if (count > 0) {
-            this.badgeElement.textContent = count > 99 ? '99+' : String(count);
-            this.badgeElement.classList.add('visible');
-        }
-        else {
-            this.badgeElement.classList.remove('visible');
-        }
-    }
-    show() {
-        this.element.style.display = 'flex';
-    }
-    hide() {
-        this.element.style.display = 'none';
+  element;
+  badgeElement;
+  options;
+  isDragging = false;
+  hasMoved = false;
+  startX = 0;
+  startY = 0;
+  initialLeft = 0;
+  initialTop = 0;
+  constructor(options = {}) {
+    this.options = {
+      position: "right",
+      persistPosition: true,
+      ...options
+    };
+    this.element = document.createElement("div");
+    this.element.className = "cd-floating-btn";
+    this.element.setAttribute("role", "button");
+    this.element.setAttribute("aria-label", "Open CapDebug");
+    const logo = document.createElement("span");
+    logo.className = "cd-btn-logo";
+    logo.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>CAP`;
+    this.badgeElement = document.createElement("span");
+    this.badgeElement.className = "cd-btn-badge";
+    this.badgeElement.textContent = "0";
+    this.element.appendChild(logo);
+    this.element.appendChild(this.badgeElement);
+    this.initPosition();
+    this.bindEvents();
+  }
+  getElement() {
+    return this.element;
+  }
+  setErrorCount(count) {
+    if (count > 0) {
+      this.badgeElement.textContent = count > 99 ? "99+" : String(count);
+      this.badgeElement.classList.add("visible");
+    } else {
+      this.badgeElement.classList.remove("visible");
     }
-    initPosition() {
-        let savedPos = null;
-        if (this.options.persistPosition && typeof localStorage !== 'undefined') {
-            try {
-                const stored = localStorage.getItem(STORAGE_KEY);
-                if (stored) {
-                    savedPos = JSON.parse(stored);
-                }
-            }
-            catch {
-                // ignore
-            }
-        }
-        const windowWidth = typeof window !== 'undefined' ? window.innerWidth : 400;
-        const windowHeight = typeof window !== 'undefined' ? window.innerHeight : 800;
-        let x = windowWidth - 76;
-        let y = Math.max(80, windowHeight * 0.4);
-        if (savedPos && typeof savedPos.x === 'number' && typeof savedPos.y === 'number') {
-            x = Math.min(Math.max(10, savedPos.x), windowWidth - 76);
-            y = Math.min(Math.max(60, savedPos.y), windowHeight - 60);
-        }
-        else if (typeof this.options.position === 'object') {
-            x = this.options.position.x;
-            y = this.options.position.y;
-        }
-        else if (this.options.position === 'left') {
-            x = 12;
-        }
-        this.setPosition(x, y);
-    }
-    setPosition(x, y) {
-        this.element.style.left = `${x}px`;
-        this.element.style.top = `${y}px`;
-        this.element.style.right = 'auto';
-        this.element.style.bottom = 'auto';
-    }
-    bindEvents() {
-        const onPointerDown = (e) => {
-            this.isDragging = true;
-            this.hasMoved = false;
-            this.startX = e.clientX;
-            this.startY = e.clientY;
-            const rect = this.element.getBoundingClientRect();
-            this.initialLeft = rect.left;
-            this.initialTop = rect.top;
-            this.element.classList.add('dragging');
-            this.element.setPointerCapture(e.pointerId);
-        };
-        const onPointerMove = (e) => {
-            if (!this.isDragging)
-                return;
-            const deltaX = e.clientX - this.startX;
-            const deltaY = e.clientY - this.startY;
-            if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4) {
-                this.hasMoved = true;
-            }
-            let newX = this.initialLeft + deltaX;
-            let newY = this.initialTop + deltaY;
-            const maxX = window.innerWidth - this.element.offsetWidth - 8;
-            const maxY = window.innerHeight - this.element.offsetHeight - 8;
-            newX = Math.max(8, Math.min(newX, maxX));
-            newY = Math.max(40, Math.min(newY, maxY));
-            this.setPosition(newX, newY);
-        };
-        const onPointerUp = (e) => {
-            if (!this.isDragging)
-                return;
-            this.isDragging = false;
-            this.element.classList.remove('dragging');
-            try {
-                this.element.releasePointerCapture(e.pointerId);
-            }
-            catch {
-                // ignore
-            }
-            if (!this.hasMoved) {
-                // Tap / Click action
-                if (this.options.onClick) {
-                    this.options.onClick();
-                }
-            }
-            else {
-                // Snap to nearest edge (left or right)
-                this.snapToEdge();
-            }
-        };
-        this.element.addEventListener('pointerdown', onPointerDown);
-        this.element.addEventListener('pointermove', onPointerMove);
-        this.element.addEventListener('pointerup', onPointerUp);
-        this.element.addEventListener('pointercancel', onPointerUp);
-    }
-    snapToEdge() {
-        const rect = this.element.getBoundingClientRect();
-        const windowWidth = window.innerWidth;
-        const windowHeight = window.innerHeight;
-        const snapLeft = 12;
-        const snapRight = windowWidth - rect.width - 12;
-        const targetX = rect.left + rect.width / 2 < windowWidth / 2 ? snapLeft : snapRight;
-        const targetY = Math.max(50, Math.min(rect.top, windowHeight - rect.height - 50));
-        this.element.style.transition = 'left 0.2s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s cubic-bezier(0.16, 1, 0.3, 1)';
-        this.setPosition(targetX, targetY);
-        setTimeout(() => {
-            this.element.style.transition = '';
-        }, 200);
-        if (this.options.persistPosition && typeof localStorage !== 'undefined') {
-            try {
-                localStorage.setItem(STORAGE_KEY, JSON.stringify({ x: targetX, y: targetY }));
-            }
-            catch {
-                // ignore
-            }
-        }
+  }
+  show() {
+    this.element.style.display = "flex";
+  }
+  hide() {
+    this.element.style.display = "none";
+  }
+  initPosition() {
+    let savedPos = null;
+    if (this.options.persistPosition && typeof localStorage !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          savedPos = JSON.parse(stored);
+        }
+      } catch {
+      }
+    }
+    const windowWidth = typeof window !== "undefined" ? window.innerWidth : 400;
+    const windowHeight = typeof window !== "undefined" ? window.innerHeight : 800;
+    let x = windowWidth - 76;
+    let y = Math.max(80, windowHeight * 0.4);
+    if (savedPos && typeof savedPos.x === "number" && typeof savedPos.y === "number") {
+      x = Math.min(Math.max(10, savedPos.x), windowWidth - 76);
+      y = Math.min(Math.max(60, savedPos.y), windowHeight - 60);
+    } else if (typeof this.options.position === "object") {
+      x = this.options.position.x;
+      y = this.options.position.y;
+    } else if (this.options.position === "left") {
+      x = 12;
+    }
+    this.setPosition(x, y);
+  }
+  setPosition(x, y) {
+    this.element.style.left = `${x}px`;
+    this.element.style.top = `${y}px`;
+    this.element.style.right = "auto";
+    this.element.style.bottom = "auto";
+  }
+  bindEvents() {
+    const onPointerDown = (e) => {
+      this.isDragging = true;
+      this.hasMoved = false;
+      this.startX = e.clientX;
+      this.startY = e.clientY;
+      const rect = this.element.getBoundingClientRect();
+      this.initialLeft = rect.left;
+      this.initialTop = rect.top;
+      this.element.classList.add("dragging");
+      this.element.setPointerCapture(e.pointerId);
+    };
+    const onPointerMove = (e) => {
+      if (!this.isDragging) return;
+      const deltaX = e.clientX - this.startX;
+      const deltaY = e.clientY - this.startY;
+      if (Math.abs(deltaX) > 4 || Math.abs(deltaY) > 4) {
+        this.hasMoved = true;
+      }
+      let newX = this.initialLeft + deltaX;
+      let newY = this.initialTop + deltaY;
+      const maxX = window.innerWidth - this.element.offsetWidth - 8;
+      const maxY = window.innerHeight - this.element.offsetHeight - 8;
+      newX = Math.max(8, Math.min(newX, maxX));
+      newY = Math.max(40, Math.min(newY, maxY));
+      this.setPosition(newX, newY);
+    };
+    const onPointerUp = (e) => {
+      if (!this.isDragging) return;
+      this.isDragging = false;
+      this.element.classList.remove("dragging");
+      try {
+        this.element.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      if (!this.hasMoved) {
+        if (this.options.onClick) {
+          this.options.onClick();
+        }
+      } else {
+        this.snapToEdge();
+      }
+    };
+    this.element.addEventListener("pointerdown", onPointerDown);
+    this.element.addEventListener("pointermove", onPointerMove);
+    this.element.addEventListener("pointerup", onPointerUp);
+    this.element.addEventListener("pointercancel", onPointerUp);
+  }
+  snapToEdge() {
+    const rect = this.element.getBoundingClientRect();
+    const windowWidth = window.innerWidth;
+    const windowHeight = window.innerHeight;
+    const snapLeft = 12;
+    const snapRight = windowWidth - rect.width - 12;
+    const targetX = rect.left + rect.width / 2 < windowWidth / 2 ? snapLeft : snapRight;
+    const targetY = Math.max(50, Math.min(rect.top, windowHeight - rect.height - 50));
+    this.element.style.transition = "left 0.2s cubic-bezier(0.16, 1, 0.3, 1), top 0.2s cubic-bezier(0.16, 1, 0.3, 1)";
+    this.setPosition(targetX, targetY);
+    setTimeout(() => {
+      this.element.style.transition = "";
+    }, 200);
+    if (this.options.persistPosition && typeof localStorage !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify({ x: targetX, y: targetY }));
+      } catch {
+      }
     }
+  }
 }
 
 class JsonViewer {
-    static render(data, initialExpandedDepth = 2) {
-        const container = document.createElement('div');
-        container.className = 'cd-json-tree';
-        if (data === undefined) {
-            const undefinedSpan = document.createElement('span');
-            undefinedSpan.className = 'cd-json-null';
-            undefinedSpan.textContent = 'undefined';
-            container.appendChild(undefinedSpan);
-            return container;
-        }
-        const rootNode = JsonViewer.renderNode('', data, 0, initialExpandedDepth);
-        container.appendChild(rootNode);
-        return container;
-    }
-    static renderNode(key, value, depth, maxExpandedDepth) {
-        const node = document.createElement('div');
-        node.className = 'cd-json-node';
-        const row = document.createElement('div');
-        row.className = 'cd-json-row';
-        const isObject = typeof value === 'object' && value !== null;
-        const isArray = Array.isArray(value);
-        // Toggle button for objects/arrays
-        if (isObject) {
-            const toggle = document.createElement('span');
-            toggle.className = 'cd-json-toggle';
-            toggle.innerHTML = '▼';
-            row.appendChild(toggle);
-        }
-        else {
-            const spacer = document.createElement('span');
-            spacer.style.width = '14px';
-            spacer.style.display = 'inline-block';
-            row.appendChild(spacer);
-        }
-        // Key (if present)
-        if (key !== '') {
-            const keySpan = document.createElement('span');
-            keySpan.className = 'cd-json-key';
-            keySpan.textContent = typeof key === 'number' ? `[${key}]` : `"${key}"`;
-            row.appendChild(keySpan);
-            const colonSpan = document.createElement('span');
-            colonSpan.className = 'cd-json-colon';
-            colonSpan.textContent = ': ';
-            row.appendChild(colonSpan);
-        }
-        // Value preview or primitive
-        if (isObject) {
-            const entries = isArray
-                ? value.map((v, i) => [i, v])
-                : Object.entries(value);
-            const bracketOpen = isArray ? '[' : '{';
-            const bracketClose = isArray ? ']' : '}';
-            const previewSpan = document.createElement('span');
-            previewSpan.className = 'cd-json-colon';
-            previewSpan.textContent = `${bracketOpen} ${entries.length} ${isArray ? 'items' : 'keys'} ${bracketClose}`;
-            row.appendChild(previewSpan);
-            // Copy object JSON button
-            const copyBtn = document.createElement('button');
-            copyBtn.className = 'cd-json-copy-btn';
-            copyBtn.textContent = 'copy';
-            copyBtn.title = 'Copy branch JSON';
-            copyBtn.addEventListener('click', e => {
-                e.stopPropagation();
-                JsonViewer.copyToClipboard(JSON.stringify(value, null, 2), copyBtn);
-            });
-            row.appendChild(copyBtn);
-            node.appendChild(row);
-            // Children container
-            const childrenContainer = document.createElement('div');
-            childrenContainer.className = 'cd-json-children';
-            const isInitiallyExpanded = depth < maxExpandedDepth;
-            if (!isInitiallyExpanded) {
-                childrenContainer.classList.add('hidden');
-                const toggle = row.querySelector('.cd-json-toggle');
-                if (toggle)
-                    toggle.classList.add('collapsed');
-            }
-            for (const [childKey, childVal] of entries) {
-                childrenContainer.appendChild(JsonViewer.renderNode(childKey, childVal, depth + 1, maxExpandedDepth));
-            }
-            node.appendChild(childrenContainer);
-            // Toggle collapse on row or toggle click
-            row.addEventListener('click', e => {
-                if (e.target.tagName.toLowerCase() === 'button')
-                    return;
-                const toggle = row.querySelector('.cd-json-toggle');
-                const isHidden = childrenContainer.classList.toggle('hidden');
-                if (toggle) {
-                    toggle.classList.toggle('collapsed', isHidden);
-                }
-            });
-        }
-        else {
-            // Primitive value
-            const valSpan = document.createElement('span');
-            const valType = typeof value;
-            if (value === null) {
-                valSpan.className = 'cd-json-null';
-                valSpan.textContent = 'null';
-            }
-            else if (valType === 'string') {
-                valSpan.className = 'cd-json-string';
-                valSpan.textContent = `"${value}"`;
-            }
-            else if (valType === 'number') {
-                valSpan.className = 'cd-json-number';
-                valSpan.textContent = String(value);
-            }
-            else if (valType === 'boolean') {
-                valSpan.className = 'cd-json-boolean';
-                valSpan.textContent = String(value);
-            }
-            else {
-                valSpan.className = 'cd-json-null';
-                valSpan.textContent = String(value);
-            }
-            row.appendChild(valSpan);
-            // Copy primitive value button
-            const copyBtn = document.createElement('button');
-            copyBtn.className = 'cd-json-copy-btn';
-            copyBtn.textContent = 'copy';
-            copyBtn.title = 'Copy value';
-            copyBtn.addEventListener('click', e => {
-                e.stopPropagation();
-                JsonViewer.copyToClipboard(String(value), copyBtn);
-            });
-            row.appendChild(copyBtn);
-            node.appendChild(row);
-        }
-        return node;
-    }
-    static async copyToClipboard(text, triggerBtn) {
-        try {
-            if (navigator.clipboard && window.isSecureContext) {
-                await navigator.clipboard.writeText(text);
-            }
-            else {
-                const textarea = document.createElement('textarea');
-                textarea.value = text;
-                textarea.style.position = 'fixed';
-                textarea.style.left = '-9999px';
-                textarea.style.top = '-9999px';
-                document.body.appendChild(textarea);
-                textarea.focus();
-                textarea.select();
-                document.execCommand('copy');
-                document.body.removeChild(textarea);
-            }
-            if (triggerBtn) {
-                const originalText = triggerBtn.textContent;
-                triggerBtn.textContent = 'copied!';
-                triggerBtn.style.color = '#34d399';
-                setTimeout(() => {
-                    triggerBtn.textContent = originalText;
-                    triggerBtn.style.color = '';
-                }, 1500);
-            }
-            return true;
-        }
-        catch {
-            return false;
-        }
+  static render(data, initialExpandedDepth = 2) {
+    const container = document.createElement("div");
+    container.className = "cd-json-tree";
+    if (data === void 0) {
+      const undefinedSpan = document.createElement("span");
+      undefinedSpan.className = "cd-json-null";
+      undefinedSpan.textContent = "undefined";
+      container.appendChild(undefinedSpan);
+      return container;
+    }
+    const rootNode = JsonViewer.renderNode("", data, 0, initialExpandedDepth);
+    container.appendChild(rootNode);
+    return container;
+  }
+  static renderNode(key, value, depth, maxExpandedDepth) {
+    const node = document.createElement("div");
+    node.className = "cd-json-node";
+    const row = document.createElement("div");
+    row.className = "cd-json-row";
+    const isObject = typeof value === "object" && value !== null;
+    const isArray = Array.isArray(value);
+    if (isObject) {
+      const toggle = document.createElement("span");
+      toggle.className = "cd-json-toggle";
+      toggle.innerHTML = "\u25BC";
+      row.appendChild(toggle);
+    } else {
+      const spacer = document.createElement("span");
+      spacer.style.width = "14px";
+      spacer.style.display = "inline-block";
+      row.appendChild(spacer);
+    }
+    if (key !== "") {
+      const keySpan = document.createElement("span");
+      keySpan.className = "cd-json-key";
+      keySpan.textContent = typeof key === "number" ? `[${key}]` : `"${key}"`;
+      row.appendChild(keySpan);
+      const colonSpan = document.createElement("span");
+      colonSpan.className = "cd-json-colon";
+      colonSpan.textContent = ": ";
+      row.appendChild(colonSpan);
+    }
+    if (isObject) {
+      const entries = isArray ? value.map((v, i) => [i, v]) : Object.entries(value);
+      const bracketOpen = isArray ? "[" : "{";
+      const bracketClose = isArray ? "]" : "}";
+      const previewSpan = document.createElement("span");
+      previewSpan.className = "cd-json-colon";
+      previewSpan.textContent = `${bracketOpen} ${entries.length} ${isArray ? "items" : "keys"} ${bracketClose}`;
+      row.appendChild(previewSpan);
+      const copyBtn = document.createElement("button");
+      copyBtn.className = "cd-json-copy-btn";
+      copyBtn.textContent = "copy";
+      copyBtn.title = "Copy branch JSON";
+      copyBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        JsonViewer.copyToClipboard(JSON.stringify(value, null, 2), copyBtn);
+      });
+      row.appendChild(copyBtn);
+      node.appendChild(row);
+      const childrenContainer = document.createElement("div");
+      childrenContainer.className = "cd-json-children";
+      const isInitiallyExpanded = depth < maxExpandedDepth;
+      if (!isInitiallyExpanded) {
+        childrenContainer.classList.add("hidden");
+        const toggle = row.querySelector(".cd-json-toggle");
+        if (toggle) toggle.classList.add("collapsed");
+      }
+      for (const [childKey, childVal] of entries) {
+        childrenContainer.appendChild(
+          JsonViewer.renderNode(childKey, childVal, depth + 1, maxExpandedDepth)
+        );
+      }
+      node.appendChild(childrenContainer);
+      row.addEventListener("click", (e) => {
+        if (e.target.tagName.toLowerCase() === "button") return;
+        const toggle = row.querySelector(".cd-json-toggle");
+        const isHidden = childrenContainer.classList.toggle("hidden");
+        if (toggle) {
+          toggle.classList.toggle("collapsed", isHidden);
+        }
+      });
+    } else {
+      const valSpan = document.createElement("span");
+      const valType = typeof value;
+      if (value === null) {
+        valSpan.className = "cd-json-null";
+        valSpan.textContent = "null";
+      } else if (valType === "string") {
+        valSpan.className = "cd-json-string";
+        valSpan.textContent = `"${value}"`;
+      } else if (valType === "number") {
+        valSpan.className = "cd-json-number";
+        valSpan.textContent = String(value);
+      } else if (valType === "boolean") {
+        valSpan.className = "cd-json-boolean";
+        valSpan.textContent = String(value);
+      } else {
+        valSpan.className = "cd-json-null";
+        valSpan.textContent = String(value);
+      }
+      row.appendChild(valSpan);
+      const copyBtn = document.createElement("button");
+      copyBtn.className = "cd-json-copy-btn";
+      copyBtn.textContent = "copy";
+      copyBtn.title = "Copy value";
+      copyBtn.addEventListener("click", (e) => {
+        e.stopPropagation();
+        JsonViewer.copyToClipboard(String(value), copyBtn);
+      });
+      row.appendChild(copyBtn);
+      node.appendChild(row);
+    }
+    return node;
+  }
+  static async copyToClipboard(text, triggerBtn) {
+    try {
+      if (navigator.clipboard && window.isSecureContext) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        const textarea = document.createElement("textarea");
+        textarea.value = text;
+        textarea.style.position = "fixed";
+        textarea.style.left = "-9999px";
+        textarea.style.top = "-9999px";
+        document.body.appendChild(textarea);
+        textarea.focus();
+        textarea.select();
+        document.execCommand("copy");
+        document.body.removeChild(textarea);
+      }
+      if (triggerBtn) {
+        const originalText = triggerBtn.textContent;
+        triggerBtn.textContent = "copied!";
+        triggerBtn.style.color = "#34d399";
+        setTimeout(() => {
+          triggerBtn.textContent = originalText;
+          triggerBtn.style.color = "";
+        }, 1500);
+      }
+      return true;
+    } catch {
+      return false;
     }
+  }
 }
 
-const CapDebugNative = registerPlugin('CapDebug', {
-    web: () => Promise.resolve().then(function () { return web; }).then(m => new m.CapDebugWeb()),
+const CapDebugNative = registerPlugin("CapDebug", {
+  web: () => Promise.resolve().then(function () { return web; }).then((m) => new m.CapDebugWeb())
 });
 
 class DebugPanel {
-    element;
-    backdrop;
-    store;
-    options;
-    isOpen = false;
-    // Header UI
-    statusIndicator;
-    titleCountSpan;
-    pauseBtn;
-    // Tab elements
-    tabElements = new Map();
-    tabBadgeElements = new Map();
-    // Search & Filter UI
-    searchInput;
-    levelPills = new Map();
-    // Content
-    contentContainer;
-    eventListContainer;
-    deviceViewContainer;
-    // Detail Overlay
-    detailOverlay;
-    selectedEvent = null;
-    // Device tab state
-    isDeviceLoading = false;
-    deviceData = null;
-    constructor(store, options = {}) {
-        this.store = store;
-        this.options = {
-            defaultTab: 'all',
-            ...options,
-        };
-        this.backdrop = document.createElement('div');
-        this.backdrop.className = 'cd-backdrop';
-        this.element = document.createElement('div');
-        this.element.className = 'cd-panel';
-        this.buildUI();
-        this.bindStore();
-        if (this.options.defaultTab) {
-            this.store.setFilter({ tab: this.options.defaultTab });
-        }
-    }
-    getElement() {
-        return this.element;
-    }
-    getBackdrop() {
-        return this.backdrop;
+  element;
+  backdrop;
+  store;
+  options;
+  isOpen = false;
+  // Header UI
+  statusIndicator;
+  titleCountSpan;
+  pauseBtn;
+  // Tab elements
+  tabElements = /* @__PURE__ */ new Map();
+  tabBadgeElements = /* @__PURE__ */ new Map();
+  // Search & Filter UI
+  searchInput;
+  levelPills = /* @__PURE__ */ new Map();
+  // Content
+  contentContainer;
+  eventListContainer;
+  deviceViewContainer;
+  // Detail Overlay
+  detailOverlay;
+  selectedEvent = null;
+  // Device tab state
+  isDeviceLoading = false;
+  deviceData = null;
+  constructor(store, options = {}) {
+    this.store = store;
+    this.options = {
+      defaultTab: "all",
+      ...options
+    };
+    this.backdrop = document.createElement("div");
+    this.backdrop.className = "cd-backdrop";
+    this.element = document.createElement("div");
+    this.element.className = "cd-panel";
+    this.buildUI();
+    this.bindStore();
+    if (this.options.defaultTab) {
+      this.store.setFilter({ tab: this.options.defaultTab });
     }
-    open() {
-        this.isOpen = true;
-        this.element.classList.add('open');
-        this.backdrop.classList.add('open');
-        // If device tab is active, trigger lazy load
-        if (this.store.getFilter().tab === 'device') {
-            this.loadDeviceDiagnostics();
-        }
+  }
+  getElement() {
+    return this.element;
+  }
+  getBackdrop() {
+    return this.backdrop;
+  }
+  open() {
+    this.isOpen = true;
+    this.element.classList.add("open");
+    this.backdrop.classList.add("open");
+    if (this.store.getFilter().tab === "device") {
+      this.loadDeviceDiagnostics();
     }
-    close() {
-        this.isOpen = false;
-        this.element.classList.remove('open');
-        this.backdrop.classList.remove('open');
-        this.closeDetail();
-        if (this.options.onClose) {
-            this.options.onClose();
-        }
+  }
+  close() {
+    this.isOpen = false;
+    this.element.classList.remove("open");
+    this.backdrop.classList.remove("open");
+    this.closeDetail();
+    if (this.options.onClose) {
+      this.options.onClose();
     }
-    toggle() {
-        if (this.isOpen) {
-            this.close();
-            return false;
-        }
-        else {
-            this.open();
-            return true;
-        }
+  }
+  toggle() {
+    if (this.isOpen) {
+      this.close();
+      return false;
+    } else {
+      this.open();
+      return true;
     }
-    isPanelOpen() {
-        return this.isOpen;
-    }
-    buildUI() {
-        this.backdrop.addEventListener('click', () => this.close());
-        // 1. Header
-        const header = document.createElement('div');
-        header.className = 'cd-header';
-        const headerLeft = document.createElement('div');
-        headerLeft.className = 'cd-header-left';
-        this.statusIndicator = document.createElement('div');
-        this.statusIndicator.className = 'cd-status-indicator';
-        this.statusIndicator.title = 'CapDebug Active';
-        const headerTitle = document.createElement('div');
-        headerTitle.className = 'cd-header-title';
-        headerTitle.innerHTML = `<span>CapDebug</span>`;
-        this.titleCountSpan = document.createElement('span');
-        this.titleCountSpan.style.color = 'var(--cd-text-muted)';
-        this.titleCountSpan.style.fontSize = '11px';
-        this.titleCountSpan.textContent = '(0)';
-        headerTitle.appendChild(this.titleCountSpan);
-        headerLeft.appendChild(this.statusIndicator);
-        headerLeft.appendChild(headerTitle);
-        const headerActions = document.createElement('div');
-        headerActions.className = 'cd-header-actions';
-        // Pause/Resume Button
-        this.pauseBtn = document.createElement('button');
-        this.pauseBtn.className = 'cd-btn-icon';
-        this.pauseBtn.title = 'Pause/Resume capture';
-        this.pauseBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>`;
-        this.pauseBtn.addEventListener('click', () => {
-            const isPaused = this.store.togglePause();
-            this.updatePauseState(isPaused);
-        });
-        // Clear Button
-        const clearBtn = document.createElement('button');
-        clearBtn.className = 'cd-btn-icon';
-        clearBtn.title = 'Clear events';
-        clearBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>`;
-        clearBtn.addEventListener('click', () => {
-            this.store.clear();
-            this.closeDetail();
-        });
-        // Export Button
-        const exportBtn = document.createElement('button');
-        exportBtn.className = 'cd-btn-icon';
-        exportBtn.title = 'Export JSON to clipboard';
-        exportBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
-        exportBtn.addEventListener('click', async () => {
-            const json = this.store.exportJson();
-            await JsonViewer.copyToClipboard(json, exportBtn);
-        });
-        // Close Button
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'cd-btn-icon';
-        closeBtn.title = 'Close viewer';
-        closeBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
-        closeBtn.addEventListener('click', () => this.close());
-        headerActions.appendChild(this.pauseBtn);
-        headerActions.appendChild(clearBtn);
-        headerActions.appendChild(exportBtn);
-        headerActions.appendChild(closeBtn);
-        header.appendChild(headerLeft);
-        header.appendChild(headerActions);
-        this.element.appendChild(header);
-        // 2. Tabs Bar
-        const tabsBar = document.createElement('div');
-        tabsBar.className = 'cd-tabs-bar';
-        const tabs = [
-            { id: 'all', label: 'All' },
-            { id: 'console', label: 'Console' },
-            { id: 'errors', label: 'Errors' },
-            { id: 'events', label: 'Events' },
-            { id: 'native', label: 'Native' },
-            { id: 'device', label: 'Device' },
-            { id: 'network', label: 'Network' },
-            { id: 'bridge', label: 'Bridge' },
-        ];
-        for (const { id, label } of tabs) {
-            const tabBtn = document.createElement('button');
-            tabBtn.className = 'cd-tab';
-            if (id === this.options.defaultTab) {
-                tabBtn.classList.add('active');
-            }
-            const labelSpan = document.createElement('span');
-            labelSpan.textContent = label;
-            const badgeSpan = document.createElement('span');
-            badgeSpan.className = 'cd-tab-badge';
-            badgeSpan.textContent = '0';
-            tabBtn.appendChild(labelSpan);
-            tabBtn.appendChild(badgeSpan);
-            tabBtn.addEventListener('click', () => {
-                this.selectTab(id);
-            });
-            this.tabElements.set(id, tabBtn);
-            this.tabBadgeElements.set(id, badgeSpan);
-            tabsBar.appendChild(tabBtn);
-        }
-        this.element.appendChild(tabsBar);
-        // 3. Toolbar (Search & Level Filters)
-        const toolbar = document.createElement('div');
-        toolbar.className = 'cd-toolbar';
-        this.searchInput = document.createElement('input');
-        this.searchInput.className = 'cd-search-input';
-        this.searchInput.type = 'text';
-        this.searchInput.placeholder = 'Filter logs, types, payloads...';
-        this.searchInput.addEventListener('input', () => {
-            this.store.setFilter({ search: this.searchInput.value });
-        });
-        const levelFilters = document.createElement('div');
-        levelFilters.className = 'cd-level-filters';
-        const levels = ['all', 'error', 'warn', 'info', 'debug'];
-        for (const lvl of levels) {
-            const pill = document.createElement('button');
-            pill.className = 'cd-level-pill';
-            pill.setAttribute('data-level', lvl);
-            pill.textContent = lvl === 'all' ? 'All' : lvl.toUpperCase();
-            if (lvl === 'all')
-                pill.classList.add('active');
-            pill.addEventListener('click', () => {
-                this.selectLevel(lvl);
-            });
-            this.levelPills.set(lvl, pill);
-            levelFilters.appendChild(pill);
-        }
-        toolbar.appendChild(this.searchInput);
-        toolbar.appendChild(levelFilters);
-        this.element.appendChild(toolbar);
-        // 4. Content Area
-        this.contentContainer = document.createElement('div');
-        this.contentContainer.className = 'cd-content';
-        this.eventListContainer = document.createElement('div');
-        this.eventListContainer.className = 'cd-event-list';
-        this.deviceViewContainer = document.createElement('div');
-        this.deviceViewContainer.className = 'cd-device-view';
-        this.deviceViewContainer.style.display = 'none';
-        this.contentContainer.appendChild(this.eventListContainer);
-        this.contentContainer.appendChild(this.deviceViewContainer);
-        this.element.appendChild(this.contentContainer);
-        // 5. Detail Overlay
-        this.buildDetailOverlay();
-    }
-    selectTab(tab) {
-        for (const [id, el] of this.tabElements.entries()) {
-            el.classList.toggle('active', id === tab);
-        }
-        this.store.setFilter({ tab });
-        this.closeDetail();
-        if (tab === 'device') {
-            this.eventListContainer.style.display = 'none';
-            this.deviceViewContainer.style.display = 'flex';
-            this.loadDeviceDiagnostics();
-        }
-        else {
-            this.eventListContainer.style.display = 'flex';
-            this.deviceViewContainer.style.display = 'none';
-        }
+  }
+  isPanelOpen() {
+    return this.isOpen;
+  }
+  buildUI() {
+    this.backdrop.addEventListener("click", () => this.close());
+    const header = document.createElement("div");
+    header.className = "cd-header";
+    const headerLeft = document.createElement("div");
+    headerLeft.className = "cd-header-left";
+    this.statusIndicator = document.createElement("div");
+    this.statusIndicator.className = "cd-status-indicator";
+    this.statusIndicator.title = "CapDebug Active";
+    const headerTitle = document.createElement("div");
+    headerTitle.className = "cd-header-title";
+    headerTitle.innerHTML = `<span>CapDebug</span>`;
+    this.titleCountSpan = document.createElement("span");
+    this.titleCountSpan.style.color = "var(--cd-text-muted)";
+    this.titleCountSpan.style.fontSize = "11px";
+    this.titleCountSpan.textContent = "(0)";
+    headerTitle.appendChild(this.titleCountSpan);
+    headerLeft.appendChild(this.statusIndicator);
+    headerLeft.appendChild(headerTitle);
+    const headerActions = document.createElement("div");
+    headerActions.className = "cd-header-actions";
+    this.pauseBtn = document.createElement("button");
+    this.pauseBtn.className = "cd-btn-icon";
+    this.pauseBtn.title = "Pause/Resume capture";
+    this.pauseBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>`;
+    this.pauseBtn.addEventListener("click", () => {
+      const isPaused = this.store.togglePause();
+      this.updatePauseState(isPaused);
+    });
+    const clearBtn = document.createElement("button");
+    clearBtn.className = "cd-btn-icon";
+    clearBtn.title = "Clear events";
+    clearBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>`;
+    clearBtn.addEventListener("click", () => {
+      this.store.clear();
+      this.closeDetail();
+    });
+    const exportBtn = document.createElement("button");
+    exportBtn.className = "cd-btn-icon";
+    exportBtn.title = "Export JSON to clipboard";
+    exportBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>`;
+    exportBtn.addEventListener("click", async () => {
+      const json = this.store.exportJson();
+      await JsonViewer.copyToClipboard(json, exportBtn);
+    });
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "cd-btn-icon";
+    closeBtn.title = "Close viewer";
+    closeBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
+    closeBtn.addEventListener("click", () => this.close());
+    headerActions.appendChild(this.pauseBtn);
+    headerActions.appendChild(clearBtn);
+    headerActions.appendChild(exportBtn);
+    headerActions.appendChild(closeBtn);
+    header.appendChild(headerLeft);
+    header.appendChild(headerActions);
+    this.element.appendChild(header);
+    const tabsBar = document.createElement("div");
+    tabsBar.className = "cd-tabs-bar";
+    const tabs = [
+      { id: "all", label: "All" },
+      { id: "console", label: "Console" },
+      { id: "errors", label: "Errors" },
+      { id: "events", label: "Events" },
+      { id: "native", label: "Native" },
+      { id: "device", label: "Device" },
+      { id: "network", label: "Network" },
+      { id: "bridge", label: "Bridge" }
+    ];
+    for (const { id, label } of tabs) {
+      const tabBtn = document.createElement("button");
+      tabBtn.className = "cd-tab";
+      if (id === this.options.defaultTab) {
+        tabBtn.classList.add("active");
+      }
+      const labelSpan = document.createElement("span");
+      labelSpan.textContent = label;
+      const badgeSpan = document.createElement("span");
+      badgeSpan.className = "cd-tab-badge";
+      badgeSpan.textContent = "0";
+      tabBtn.appendChild(labelSpan);
+      tabBtn.appendChild(badgeSpan);
+      tabBtn.addEventListener("click", () => {
+        this.selectTab(id);
+      });
+      this.tabElements.set(id, tabBtn);
+      this.tabBadgeElements.set(id, badgeSpan);
+      tabsBar.appendChild(tabBtn);
+    }
+    this.element.appendChild(tabsBar);
+    const toolbar = document.createElement("div");
+    toolbar.className = "cd-toolbar";
+    this.searchInput = document.createElement("input");
+    this.searchInput.className = "cd-search-input";
+    this.searchInput.type = "text";
+    this.searchInput.placeholder = "Filter logs, types, payloads...";
+    this.searchInput.addEventListener("input", () => {
+      this.store.setFilter({ search: this.searchInput.value });
+    });
+    const levelFilters = document.createElement("div");
+    levelFilters.className = "cd-level-filters";
+    const levels = ["all", "error", "warn", "info", "debug"];
+    for (const lvl of levels) {
+      const pill = document.createElement("button");
+      pill.className = "cd-level-pill";
+      pill.setAttribute("data-level", lvl);
+      pill.textContent = lvl === "all" ? "All" : lvl.toUpperCase();
+      if (lvl === "all") pill.classList.add("active");
+      pill.addEventListener("click", () => {
+        this.selectLevel(lvl);
+      });
+      this.levelPills.set(lvl, pill);
+      levelFilters.appendChild(pill);
+    }
+    toolbar.appendChild(this.searchInput);
+    toolbar.appendChild(levelFilters);
+    this.element.appendChild(toolbar);
+    this.contentContainer = document.createElement("div");
+    this.contentContainer.className = "cd-content";
+    this.eventListContainer = document.createElement("div");
+    this.eventListContainer.className = "cd-event-list";
+    this.deviceViewContainer = document.createElement("div");
+    this.deviceViewContainer.className = "cd-device-view";
+    this.deviceViewContainer.style.display = "none";
+    this.contentContainer.appendChild(this.eventListContainer);
+    this.contentContainer.appendChild(this.deviceViewContainer);
+    this.element.appendChild(this.contentContainer);
+    this.buildDetailOverlay();
+  }
+  selectTab(tab) {
+    for (const [id, el] of this.tabElements.entries()) {
+      el.classList.toggle("active", id === tab);
+    }
+    this.store.setFilter({ tab });
+    this.closeDetail();
+    if (tab === "device") {
+      this.eventListContainer.style.display = "none";
+      this.deviceViewContainer.style.display = "flex";
+      this.loadDeviceDiagnostics();
+    } else {
+      this.eventListContainer.style.display = "flex";
+      this.deviceViewContainer.style.display = "none";
     }
-    selectLevel(level) {
-        for (const [lvl, pill] of this.levelPills.entries()) {
-            pill.classList.toggle('active', lvl === level);
-        }
-        this.store.setFilter({ level });
-    }
-    updatePauseState(isPaused) {
-        this.statusIndicator.classList.toggle('paused', isPaused);
-        this.pauseBtn.classList.toggle('active', isPaused);
-        this.pauseBtn.title = isPaused ? 'Resume capture' : 'Pause capture';
-    }
-    bindStore() {
-        this.store.subscribe((events, store) => {
-            this.renderEventList(events);
-            this.renderCounts(store.getCounts());
-            this.updatePauseState(store.isPaused());
-        });
+  }
+  selectLevel(level) {
+    for (const [lvl, pill] of this.levelPills.entries()) {
+      pill.classList.toggle("active", lvl === level);
     }
-    renderCounts(counts) {
-        this.titleCountSpan.textContent = `(${counts.all})`;
-        for (const [tab, badge] of this.tabBadgeElements.entries()) {
-            if (tab === 'device') {
-                badge.style.display = 'none';
-            }
-            else {
-                const count = counts[tab] || 0;
-                badge.textContent = count > 999 ? '999+' : String(count);
-            }
-        }
+    this.store.setFilter({ level });
+  }
+  updatePauseState(isPaused) {
+    this.statusIndicator.classList.toggle("paused", isPaused);
+    this.pauseBtn.classList.toggle("active", isPaused);
+    this.pauseBtn.title = isPaused ? "Resume capture" : "Pause capture";
+  }
+  bindStore() {
+    this.store.subscribe((events, store) => {
+      this.renderEventList(events);
+      this.renderCounts(store.getCounts());
+      this.updatePauseState(store.isPaused());
+    });
+  }
+  renderCounts(counts) {
+    this.titleCountSpan.textContent = `(${counts.all})`;
+    for (const [tab, badge] of this.tabBadgeElements.entries()) {
+      if (tab === "device") {
+        badge.style.display = "none";
+      } else {
+        const count = counts[tab] || 0;
+        badge.textContent = count > 999 ? "999+" : String(count);
+      }
     }
-    renderEventList(events) {
-        if (this.store.getFilter().tab === 'device') {
-            return;
-        }
-        this.eventListContainer.innerHTML = '';
-        if (events.length === 0) {
-            const empty = document.createElement('div');
-            empty.className = 'cd-empty-state';
-            empty.innerHTML = `
+  }
+  renderEventList(events) {
+    if (this.store.getFilter().tab === "device") {
+      return;
+    }
+    this.eventListContainer.innerHTML = "";
+    if (events.length === 0) {
+      const empty = document.createElement("div");
+      empty.className = "cd-empty-state";
+      empty.innerHTML = `
         <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
         <span>No events match current filter</span>
       `;
-            this.eventListContainer.appendChild(empty);
-            return;
-        }
-        // Render newest items at the top
-        for (let i = events.length - 1; i >= 0; i--) {
-            const event = events[i];
-            const row = this.createEventRow(event);
-            this.eventListContainer.appendChild(row);
-        }
+      this.eventListContainer.appendChild(empty);
+      return;
     }
-    createEventRow(event) {
-        const row = document.createElement('div');
-        row.className = 'cd-event-row';
-        row.setAttribute('data-level', event.level || 'info');
-        const dot = document.createElement('div');
-        dot.className = 'cd-event-level-dot';
-        const time = document.createElement('div');
-        time.className = 'cd-event-time';
-        time.textContent = this.formatTime(event.timestamp);
-        const source = document.createElement('div');
-        source.className = 'cd-event-source';
-        source.textContent = event.source;
-        const main = document.createElement('div');
-        main.className = 'cd-event-main';
-        const type = document.createElement('div');
-        type.className = 'cd-event-type';
-        type.textContent = event.type;
-        main.appendChild(type);
-        if (event.message) {
-            const msg = document.createElement('div');
-            msg.className = 'cd-event-msg';
-            msg.textContent = event.message;
-            main.appendChild(msg);
-        }
-        row.appendChild(dot);
-        row.appendChild(time);
-        row.appendChild(source);
-        row.appendChild(main);
-        if (event.duration !== undefined) {
-            const duration = document.createElement('div');
-            duration.className = 'cd-event-duration';
-            duration.textContent = `${event.duration}ms`;
-            row.appendChild(duration);
-        }
-        row.addEventListener('click', () => {
-            this.showDetail(event);
-        });
-        return row;
-    }
-    buildDetailOverlay() {
-        this.detailOverlay = document.createElement('div');
-        this.detailOverlay.className = 'cd-detail-overlay';
-        const header = document.createElement('div');
-        header.className = 'cd-detail-header';
-        const backBtn = document.createElement('button');
-        backBtn.className = 'cd-detail-back';
-        backBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Back`;
-        backBtn.addEventListener('click', () => this.closeDetail());
-        const copyAllBtn = document.createElement('button');
-        copyAllBtn.className = 'cd-copy-btn-sm';
-        copyAllBtn.textContent = 'Copy JSON';
-        copyAllBtn.addEventListener('click', async () => {
-            if (this.selectedEvent) {
-                await JsonViewer.copyToClipboard(JSON.stringify(this.selectedEvent, null, 2), copyAllBtn);
-            }
-        });
-        header.appendChild(backBtn);
-        header.appendChild(copyAllBtn);
-        this.detailOverlay.appendChild(header);
-        const body = document.createElement('div');
-        body.className = 'cd-detail-body';
-        this.detailOverlay.appendChild(body);
-        this.contentContainer.appendChild(this.detailOverlay);
-    }
-    showDetail(event) {
-        this.selectedEvent = event;
-        const body = this.detailOverlay.querySelector('.cd-detail-body');
-        body.innerHTML = '';
-        // 1. Meta Grid
-        const metaGrid = document.createElement('div');
-        metaGrid.className = 'cd-meta-grid';
-        const addMeta = (label, value) => {
-            if (value === undefined)
-                return;
-            const item = document.createElement('div');
-            item.className = 'cd-meta-item';
-            item.innerHTML = `
+    for (let i = events.length - 1; i >= 0; i--) {
+      const event = events[i];
+      const row = this.createEventRow(event);
+      this.eventListContainer.appendChild(row);
+    }
+  }
+  createEventRow(event) {
+    const row = document.createElement("div");
+    row.className = "cd-event-row";
+    row.setAttribute("data-level", event.level || "info");
+    const dot = document.createElement("div");
+    dot.className = "cd-event-level-dot";
+    const time = document.createElement("div");
+    time.className = "cd-event-time";
+    time.textContent = this.formatTime(event.timestamp);
+    const source = document.createElement("div");
+    source.className = "cd-event-source";
+    source.textContent = event.source;
+    const main = document.createElement("div");
+    main.className = "cd-event-main";
+    const type = document.createElement("div");
+    type.className = "cd-event-type";
+    type.textContent = event.type;
+    main.appendChild(type);
+    if (event.message) {
+      const msg = document.createElement("div");
+      msg.className = "cd-event-msg";
+      msg.textContent = event.message;
+      main.appendChild(msg);
+    }
+    row.appendChild(dot);
+    row.appendChild(time);
+    row.appendChild(source);
+    row.appendChild(main);
+    if (event.duration !== void 0) {
+      const duration = document.createElement("div");
+      duration.className = "cd-event-duration";
+      duration.textContent = `${event.duration}ms`;
+      row.appendChild(duration);
+    }
+    row.addEventListener("click", () => {
+      this.showDetail(event);
+    });
+    return row;
+  }
+  buildDetailOverlay() {
+    this.detailOverlay = document.createElement("div");
+    this.detailOverlay.className = "cd-detail-overlay";
+    const header = document.createElement("div");
+    header.className = "cd-detail-header";
+    const backBtn = document.createElement("button");
+    backBtn.className = "cd-detail-back";
+    backBtn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg> Back`;
+    backBtn.addEventListener("click", () => this.closeDetail());
+    const copyAllBtn = document.createElement("button");
+    copyAllBtn.className = "cd-copy-btn-sm";
+    copyAllBtn.textContent = "Copy JSON";
+    copyAllBtn.addEventListener("click", async () => {
+      if (this.selectedEvent) {
+        await JsonViewer.copyToClipboard(
+          JSON.stringify(this.selectedEvent, null, 2),
+          copyAllBtn
+        );
+      }
+    });
+    header.appendChild(backBtn);
+    header.appendChild(copyAllBtn);
+    this.detailOverlay.appendChild(header);
+    const body = document.createElement("div");
+    body.className = "cd-detail-body";
+    this.detailOverlay.appendChild(body);
+    this.contentContainer.appendChild(this.detailOverlay);
+  }
+  showDetail(event) {
+    this.selectedEvent = event;
+    const body = this.detailOverlay.querySelector(".cd-detail-body");
+    body.innerHTML = "";
+    const metaGrid = document.createElement("div");
+    metaGrid.className = "cd-meta-grid";
+    const addMeta = (label, value) => {
+      if (value === void 0) return;
+      const item = document.createElement("div");
+      item.className = "cd-meta-item";
+      item.innerHTML = `
         <span class="cd-meta-label">${label}</span>
         <span class="cd-meta-val">${value}</span>
       `;
-            metaGrid.appendChild(item);
-        };
-        addMeta('Type', event.type);
-        addMeta('Source', event.source);
-        addMeta('Level', event.level);
-        addMeta('Time', `${this.formatTime(event.timestamp)} (${new Date(event.timestamp).toLocaleTimeString()})`);
-        addMeta('ID', event.id);
-        if (event.duration !== undefined)
-            addMeta('Duration', `${event.duration}ms`);
-        if (event.platform)
-            addMeta('Platform', event.platform);
-        body.appendChild(metaGrid);
-        // 2. Message
-        if (event.message) {
-            const msgSection = document.createElement('div');
-            msgSection.innerHTML = `<div class="cd-section-title">Message</div>`;
-            const msgBlock = document.createElement('div');
-            msgBlock.className = 'cd-msg-block';
-            msgBlock.textContent = event.message;
-            msgSection.appendChild(msgBlock);
-            body.appendChild(msgSection);
-        }
-        // 3. Data Payload / JSON Viewer
-        if (event.data !== undefined) {
-            const dataSection = document.createElement('div');
-            dataSection.innerHTML = `<div class="cd-section-title">Data Payload</div>`;
-            const jsonTree = JsonViewer.render(event.data, 3);
-            dataSection.appendChild(jsonTree);
-            body.appendChild(dataSection);
-        }
-        this.detailOverlay.classList.add('open');
-    }
-    closeDetail() {
-        this.selectedEvent = null;
-        this.detailOverlay.classList.remove('open');
-    }
-    async loadDeviceDiagnostics() {
-        if (this.isDeviceLoading)
-            return;
-        this.isDeviceLoading = true;
-        this.deviceViewContainer.innerHTML = `
+      metaGrid.appendChild(item);
+    };
+    addMeta("Type", event.type);
+    addMeta("Source", event.source);
+    addMeta("Level", event.level);
+    addMeta("Time", `${this.formatTime(event.timestamp)} (${new Date(event.timestamp).toLocaleTimeString()})`);
+    addMeta("ID", event.id);
+    if (event.duration !== void 0) addMeta("Duration", `${event.duration}ms`);
+    if (event.platform) addMeta("Platform", event.platform);
+    body.appendChild(metaGrid);
+    if (event.message) {
+      const msgSection = document.createElement("div");
+      msgSection.innerHTML = `<div class="cd-section-title">Message</div>`;
+      const msgBlock = document.createElement("div");
+      msgBlock.className = "cd-msg-block";
+      msgBlock.textContent = event.message;
+      msgSection.appendChild(msgBlock);
+      body.appendChild(msgSection);
+    }
+    if (event.data !== void 0) {
+      const dataSection = document.createElement("div");
+      dataSection.innerHTML = `<div class="cd-section-title">Data Payload</div>`;
+      const jsonTree = JsonViewer.render(event.data, 3);
+      dataSection.appendChild(jsonTree);
+      body.appendChild(dataSection);
+    }
+    this.detailOverlay.classList.add("open");
+  }
+  closeDetail() {
+    this.selectedEvent = null;
+    this.detailOverlay.classList.remove("open");
+  }
+  async loadDeviceDiagnostics() {
+    if (this.isDeviceLoading) return;
+    this.isDeviceLoading = true;
+    this.deviceViewContainer.innerHTML = `
       <div class="cd-empty-state">
         <span>Querying native device diagnostics...</span>
       </div>
     `;
-        try {
-            const [device, memory, webView, app, network] = await Promise.allSettled([
-                CapDebugNative.getDeviceInfo(),
-                CapDebugNative.getMemoryInfo(),
-                CapDebugNative.getWebViewInfo(),
-                CapDebugNative.getAppInfo(),
-                CapDebugNative.getNetworkInfo(),
-            ]);
-            this.deviceData = {
-                device: device.status === 'fulfilled' ? device.value : { error: String(device.reason) },
-                memory: memory.status === 'fulfilled' ? memory.value : { error: String(memory.reason) },
-                webView: webView.status === 'fulfilled' ? webView.value : { error: String(webView.reason) },
-                app: app.status === 'fulfilled' ? app.value : { error: String(app.reason) },
-                network: network.status === 'fulfilled' ? network.value : { error: String(network.reason) },
-            };
-            // Emit native diagnostics event into the store as well
-            this.store.add({
-                source: 'native',
-                type: 'device.diagnostics',
-                level: 'info',
-                message: 'Device diagnostics loaded',
-                data: this.deviceData,
-            });
-            this.renderDeviceView();
-        }
-        catch (err) {
-            this.deviceViewContainer.innerHTML = `
+    try {
+      const [device, memory, webView, app, network] = await Promise.allSettled([
+        CapDebugNative.getDeviceInfo(),
+        CapDebugNative.getMemoryInfo(),
+        CapDebugNative.getWebViewInfo(),
+        CapDebugNative.getAppInfo(),
+        CapDebugNative.getNetworkInfo()
+      ]);
+      this.deviceData = {
+        device: device.status === "fulfilled" ? device.value : { error: String(device.reason) },
+        memory: memory.status === "fulfilled" ? memory.value : { error: String(memory.reason) },
+        webView: webView.status === "fulfilled" ? webView.value : { error: String(webView.reason) },
+        app: app.status === "fulfilled" ? app.value : { error: String(app.reason) },
+        network: network.status === "fulfilled" ? network.value : { error: String(network.reason) }
+      };
+      this.store.add({
+        source: "native",
+        type: "device.diagnostics",
+        level: "info",
+        message: "Device diagnostics loaded",
+        data: this.deviceData
+      });
+      this.renderDeviceView();
+    } catch (err) {
+      this.deviceViewContainer.innerHTML = `
         <div class="cd-empty-state">
           <span style="color: var(--cd-color-error)">Failed to load diagnostics: ${err?.message || String(err)}</span>
         </div>
       `;
-        }
-        finally {
-            this.isDeviceLoading = false;
-        }
+    } finally {
+      this.isDeviceLoading = false;
     }
-    renderDeviceView() {
-        if (!this.deviceData)
-            return;
-        this.deviceViewContainer.innerHTML = '';
-        // Refresh action bar
-        const topBar = document.createElement('div');
-        topBar.style.display = 'flex';
-        topBar.style.justifyContent = 'space-between';
-        topBar.style.alignItems = 'center';
-        const infoLabel = document.createElement('span');
-        infoLabel.style.fontSize = '11px';
-        infoLabel.style.color = 'var(--cd-text-muted)';
-        infoLabel.textContent = `Diagnostic snapshot: ${new Date().toLocaleTimeString()}`;
-        const refreshBtn = document.createElement('button');
-        refreshBtn.className = 'cd-copy-btn-sm';
-        refreshBtn.textContent = '↻ Refresh Live Data';
-        refreshBtn.addEventListener('click', () => this.loadDeviceDiagnostics());
-        topBar.appendChild(infoLabel);
-        topBar.appendChild(refreshBtn);
-        this.deviceViewContainer.appendChild(topBar);
-        const sections = [
-            { title: 'Device Information', data: this.deviceData.device },
-            { title: 'Memory & Heap', data: this.deviceData.memory },
-            { title: 'Application Info', data: this.deviceData.app },
-            { title: 'WebView & User Agent', data: this.deviceData.webView },
-            { title: 'Network State', data: this.deviceData.network },
-        ];
-        for (const { title, data } of sections) {
-            const card = document.createElement('div');
-            card.className = 'cd-device-card';
-            const cardHeader = document.createElement('div');
-            cardHeader.className = 'cd-device-card-header';
-            cardHeader.textContent = title;
-            card.appendChild(cardHeader);
-            if (typeof data === 'object' && data !== null) {
-                const grid = document.createElement('div');
-                grid.className = 'cd-device-grid';
-                for (const [k, v] of Object.entries(data)) {
-                    if (typeof v === 'object' && v !== null)
-                        continue;
-                    const item = document.createElement('div');
-                    item.className = 'cd-meta-item';
-                    item.innerHTML = `
+  }
+  renderDeviceView() {
+    if (!this.deviceData) return;
+    this.deviceViewContainer.innerHTML = "";
+    const topBar = document.createElement("div");
+    topBar.style.display = "flex";
+    topBar.style.justifyContent = "space-between";
+    topBar.style.alignItems = "center";
+    const infoLabel = document.createElement("span");
+    infoLabel.style.fontSize = "11px";
+    infoLabel.style.color = "var(--cd-text-muted)";
+    infoLabel.textContent = `Diagnostic snapshot: ${(/* @__PURE__ */ new Date()).toLocaleTimeString()}`;
+    const refreshBtn = document.createElement("button");
+    refreshBtn.className = "cd-copy-btn-sm";
+    refreshBtn.textContent = "\u21BB Refresh Live Data";
+    refreshBtn.addEventListener("click", () => this.loadDeviceDiagnostics());
+    topBar.appendChild(infoLabel);
+    topBar.appendChild(refreshBtn);
+    this.deviceViewContainer.appendChild(topBar);
+    const sections = [
+      { title: "Device Information", data: this.deviceData.device },
+      { title: "Memory & Heap", data: this.deviceData.memory },
+      { title: "Application Info", data: this.deviceData.app },
+      { title: "WebView & User Agent", data: this.deviceData.webView },
+      { title: "Network State", data: this.deviceData.network }
+    ];
+    for (const { title, data } of sections) {
+      const card = document.createElement("div");
+      card.className = "cd-device-card";
+      const cardHeader = document.createElement("div");
+      cardHeader.className = "cd-device-card-header";
+      cardHeader.textContent = title;
+      card.appendChild(cardHeader);
+      if (typeof data === "object" && data !== null) {
+        const grid = document.createElement("div");
+        grid.className = "cd-device-grid";
+        for (const [k, v] of Object.entries(data)) {
+          if (typeof v === "object" && v !== null) continue;
+          const item = document.createElement("div");
+          item.className = "cd-meta-item";
+          item.innerHTML = `
             <span class="cd-meta-label">${k}</span>
-            <span class="cd-meta-val">${v !== undefined && v !== null ? String(v) : '—'}</span>
+            <span class="cd-meta-val">${v !== void 0 && v !== null ? String(v) : "\u2014"}</span>
           `;
-                    grid.appendChild(item);
-                }
-                card.appendChild(grid);
-                // Render nested objects if present
-                for (const [k, v] of Object.entries(data)) {
-                    if (typeof v === 'object' && v !== null) {
-                        const nestedSection = document.createElement('div');
-                        nestedSection.innerHTML = `<div style="font-size: 10px; color: var(--cd-text-muted); font-weight: 600; margin-top: 6px;">${k.toUpperCase()}</div>`;
-                        nestedSection.appendChild(JsonViewer.render(v, 2));
-                        card.appendChild(nestedSection);
-                    }
-                }
-            }
-            else {
-                card.textContent = String(data);
-            }
-            this.deviceViewContainer.appendChild(card);
-        }
-    }
-    formatTime(timestamp) {
-        const d = new Date(timestamp);
-        const h = String(d.getHours()).padStart(2, '0');
-        const m = String(d.getMinutes()).padStart(2, '0');
-        const s = String(d.getSeconds()).padStart(2, '0');
-        const ms = String(d.getMilliseconds()).padStart(3, '0');
-        return `${h}:${m}:${s}.${ms}`;
+          grid.appendChild(item);
+        }
+        card.appendChild(grid);
+        for (const [k, v] of Object.entries(data)) {
+          if (typeof v === "object" && v !== null) {
+            const nestedSection = document.createElement("div");
+            nestedSection.innerHTML = `<div style="font-size: 10px; color: var(--cd-text-muted); font-weight: 600; margin-top: 6px;">${k.toUpperCase()}</div>`;
+            nestedSection.appendChild(JsonViewer.render(v, 2));
+            card.appendChild(nestedSection);
+          }
+        }
+      } else {
+        card.textContent = String(data);
+      }
+      this.deviceViewContainer.appendChild(card);
     }
+  }
+  formatTime(timestamp) {
+    const d = new Date(timestamp);
+    const h = String(d.getHours()).padStart(2, "0");
+    const m = String(d.getMinutes()).padStart(2, "0");
+    const s = String(d.getSeconds()).padStart(2, "0");
+    const ms = String(d.getMilliseconds()).padStart(3, "0");
+    return `${h}:${m}:${s}.${ms}`;
+  }
 }
 
 class CapDebugViewerElement extends HTMLElement {
-    static TAG = 'cap-debug-viewer';
-    shadowRootNode;
-    floatingButton = null;
-    debugPanel = null;
-    store = null;
-    unsubscribeStore = null;
-    constructor() {
-        super();
-        this.shadowRootNode = this.attachShadow({ mode: 'open' });
-    }
-    getStore() {
-        return this.store;
-    }
-    init(store, options = {}) {
-        this.store = store;
-        // Inject isolated styles
-        const styleEl = document.createElement('style');
-        styleEl.textContent = VIEWER_STYLES;
-        this.shadowRootNode.appendChild(styleEl);
-        // Create Panel
-        this.debugPanel = new DebugPanel(store, {
-            defaultTab: options.defaultTab || 'all',
-            onClose: () => {
-                // Can handle panel close events if needed
-            },
-        });
-        this.shadowRootNode.appendChild(this.debugPanel.getBackdrop());
-        this.shadowRootNode.appendChild(this.debugPanel.getElement());
-        // Create Floating Button (if enabled)
-        if (options.button !== false) {
-            this.floatingButton = new FloatingButton({
-                position: options.position,
-                persistPosition: options.persistPosition !== false,
-                onClick: () => {
-                    this.toggle();
-                },
-            });
-            this.shadowRootNode.appendChild(this.floatingButton.getElement());
-        }
-        // Subscribe to error counts for the button badge
-        this.unsubscribeStore = store.subscribe((_events, s) => {
-            const counts = s.getCounts();
-            if (this.floatingButton) {
-                this.floatingButton.setErrorCount(counts.errors);
-            }
-        });
+  static TAG = "cap-debug-viewer";
+  shadowRootNode;
+  floatingButton = null;
+  debugPanel = null;
+  store = null;
+  unsubscribeStore = null;
+  constructor() {
+    super();
+    this.shadowRootNode = this.attachShadow({ mode: "open" });
+  }
+  getStore() {
+    return this.store;
+  }
+  init(store, options = {}) {
+    this.store = store;
+    const styleEl = document.createElement("style");
+    styleEl.textContent = VIEWER_STYLES;
+    this.shadowRootNode.appendChild(styleEl);
+    this.debugPanel = new DebugPanel(store, {
+      defaultTab: options.defaultTab || "all",
+      onClose: () => {
+      }
+    });
+    this.shadowRootNode.appendChild(this.debugPanel.getBackdrop());
+    this.shadowRootNode.appendChild(this.debugPanel.getElement());
+    if (options.button !== false) {
+      this.floatingButton = new FloatingButton({
+        position: options.position,
+        persistPosition: options.persistPosition !== false,
+        onClick: () => {
+          this.toggle();
+        }
+      });
+      this.shadowRootNode.appendChild(this.floatingButton.getElement());
+    }
+    this.unsubscribeStore = store.subscribe((_events, s) => {
+      const counts = s.getCounts();
+      if (this.floatingButton) {
+        this.floatingButton.setErrorCount(counts.errors);
+      }
+    });
+  }
+  show() {
+    if (this.debugPanel) {
+      this.debugPanel.open();
     }
-    show() {
-        if (this.debugPanel) {
-            this.debugPanel.open();
-        }
+  }
+  hide() {
+    if (this.debugPanel) {
+      this.debugPanel.close();
     }
-    hide() {
-        if (this.debugPanel) {
-            this.debugPanel.close();
-        }
+  }
+  toggle() {
+    if (this.debugPanel) {
+      return this.debugPanel.toggle();
     }
-    toggle() {
-        if (this.debugPanel) {
-            return this.debugPanel.toggle();
-        }
-        return false;
+    return false;
+  }
+  showButton() {
+    if (this.floatingButton) {
+      this.floatingButton.show();
     }
-    showButton() {
-        if (this.floatingButton) {
-            this.floatingButton.show();
-        }
+  }
+  hideButton() {
+    if (this.floatingButton) {
+      this.floatingButton.hide();
+    }
+  }
+  disconnectedCallback() {
+    if (this.unsubscribeStore) {
+      this.unsubscribeStore();
+      this.unsubscribeStore = null;
+    }
+  }
+}
+function registerCustomElement() {
+  if (typeof customElements !== "undefined" && !customElements.get(CapDebugViewerElement.TAG)) {
+    customElements.define(CapDebugViewerElement.TAG, CapDebugViewerElement);
+  }
+}
+
+class HttpSseSignalingClient {
+  baseUrl;
+  sessionId = "";
+  secret = "";
+  role = "peer";
+  eventSource = null;
+  listeners = /* @__PURE__ */ new Set();
+  isClosed = false;
+  pollTimer = null;
+  constructor(baseUrl) {
+    this.baseUrl = baseUrl.replace(/\/+$/, "");
+  }
+  async createSession(ttlSeconds = 300) {
+    this.role = "host";
+    const res = await fetch(`${this.baseUrl}/api/pair/create`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ ttl: ttlSeconds })
+    });
+    if (!res.ok) {
+      throw new Error(`Failed to create pairing session: ${res.statusText}`);
+    }
+    const data = await res.json();
+    this.sessionId = data.sessionId;
+    this.secret = data.secret;
+    this.connectEventStream();
+    return data;
+  }
+  async joinSession(sessionId, secret) {
+    this.role = "peer";
+    this.sessionId = sessionId;
+    this.secret = secret;
+    const res = await fetch(`${this.baseUrl}/api/pair/join`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ sessionId, secret })
+    });
+    if (!res.ok) {
+      const err = await res.text().catch(() => "");
+      throw new Error(`Failed to join pairing session: ${err || res.statusText}`);
+    }
+    this.connectEventStream();
+  }
+  async send(message) {
+    if (this.isClosed) return;
+    message.sessionId = this.sessionId;
+    message.secret = this.secret;
+    message.sender = this.role;
+    message.timestamp = Date.now();
+    await fetch(`${this.baseUrl}/api/pair/signal`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(message)
+    });
+  }
+  onMessage(callback) {
+    this.listeners.add(callback);
+    return () => {
+      this.listeners.delete(callback);
+    };
+  }
+  close() {
+    this.isClosed = true;
+    if (this.eventSource) {
+      this.eventSource.close();
+      this.eventSource = null;
     }
-    hideButton() {
-        if (this.floatingButton) {
-            this.floatingButton.hide();
+    if (this.pollTimer) {
+      clearInterval(this.pollTimer);
+      this.pollTimer = null;
+    }
+    this.listeners.clear();
+  }
+  connectEventStream() {
+    if (typeof EventSource !== "undefined") {
+      const sseUrl = `${this.baseUrl}/api/pair/events?session=${encodeURIComponent(this.sessionId)}&secret=${encodeURIComponent(this.secret)}&role=${this.role}`;
+      this.eventSource = new EventSource(sseUrl);
+      this.eventSource.onmessage = (event) => {
+        if (!event.data) return;
+        try {
+          const msg = JSON.parse(event.data);
+          this.dispatchMessage(msg);
+        } catch {
         }
+      };
+      this.eventSource.onerror = () => {
+      };
+    } else {
+      this.startPolling();
     }
-    disconnectedCallback() {
-        if (this.unsubscribeStore) {
-            this.unsubscribeStore();
-            this.unsubscribeStore = null;
+  }
+  startPolling() {
+    if (this.pollTimer) return;
+    this.pollTimer = setInterval(async () => {
+      if (this.isClosed || !this.sessionId) return;
+      try {
+        const res = await fetch(
+          `${this.baseUrl}/api/pair/poll?session=${encodeURIComponent(this.sessionId)}&secret=${encodeURIComponent(this.secret)}&role=${this.role}`
+        );
+        if (res.ok) {
+          const messages = await res.json();
+          if (Array.isArray(messages)) {
+            for (const msg of messages) {
+              this.dispatchMessage(msg);
+            }
+          }
         }
+      } catch {
+      }
+    }, 1e3);
+  }
+  dispatchMessage(message) {
+    for (const listener of this.listeners) {
+      try {
+        listener(message);
+      } catch (err) {
+        console.error("[CapDebug Signaling] Listener error:", err);
+      }
     }
+  }
 }
-function registerCustomElement() {
-    if (typeof customElements !== 'undefined' && !customElements.get(CapDebugViewerElement.TAG)) {
-        customElements.define(CapDebugViewerElement.TAG, CapDebugViewerElement);
+
+const PROTOCOL_VERSION = 1;
+class RemoteProtocol {
+  static createHello(capdebugVersion = "0.2.0", platform = "web", deviceName) {
+    return {
+      v: 1,
+      type: "hello",
+      payload: {
+        capdebugVersion,
+        platform,
+        deviceName: deviceName || (typeof navigator !== "undefined" ? navigator.userAgent : "Unknown Device")
+      },
+      timestamp: Date.now()
+    };
+  }
+  static createHelloAck() {
+    return {
+      v: 1,
+      type: "hello-ack",
+      payload: {
+        serverTime: Date.now()
+      },
+      timestamp: Date.now()
+    };
+  }
+  static createEvent(event) {
+    return {
+      v: 1,
+      type: "event",
+      event,
+      timestamp: Date.now()
+    };
+  }
+  static createBatch(events) {
+    return {
+      v: 1,
+      type: "events-batch",
+      events,
+      timestamp: Date.now()
+    };
+  }
+  static createControl(command) {
+    return {
+      v: 1,
+      type: "control",
+      command,
+      timestamp: Date.now()
+    };
+  }
+  static createPing(timestamp = Date.now()) {
+    return {
+      v: 1,
+      type: "ping",
+      timestamp
+    };
+  }
+  static createPong(pingTimestamp) {
+    return {
+      v: 1,
+      type: "pong",
+      payload: { pingTimestamp },
+      timestamp: Date.now()
+    };
+  }
+  static serialize(message) {
+    return JSON.stringify(message);
+  }
+  static parse(raw) {
+    try {
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") {
+        return null;
+      }
+      if (parsed.v !== PROTOCOL_VERSION) {
+        console.warn(`[CapDebug Remote] Unsupported protocol version: ${parsed.v}`);
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
     }
+  }
 }
 
-class CapDebugManager {
-    store;
-    viewerElement = null;
-    isMounted = false;
-    customEventCollector;
-    consoleCollector;
-    errorCollector;
-    networkCollector;
-    browserEventCollector;
-    bridgeCollector;
-    constructor() {
-        this.store = new CapDebugStore();
-        this.customEventCollector = new CustomEventCollector(this.store);
-        this.consoleCollector = new ConsoleCollector();
-        this.errorCollector = new ErrorCollector();
-        this.networkCollector = new NetworkCollector();
-        this.browserEventCollector = new BrowserEventCollector();
-        this.bridgeCollector = new BridgeCollector();
-    }
-    get native() {
-        return CapDebugNative;
-    }
-    get currentStore() {
-        return this.store;
-    }
-    /**
-     * Mounts the CapDebug UI into the DOM and activates collectors.
-     */
-    mount(options = {}) {
-        if (typeof window === 'undefined' || typeof document === 'undefined') {
-            return;
-        }
-        if (this.isMounted) {
-            this.unmount();
-        }
-        // Configure store
-        if (options.maxEvents) {
-            this.store.setMaxEvents(options.maxEvents);
-        }
-        if (options.customMaskKeys) {
-            this.store.setCustomMaskKeys(options.customMaskKeys);
-        }
-        // 1. Start core CustomEvent bus listener
-        this.customEventCollector.start();
-        // 2. Start optional collectors
-        if (options.console !== false) {
-            this.consoleCollector.start();
-        }
-        if (options.errors !== false) {
-            this.errorCollector.start();
-        }
-        if (options.network) {
-            const netOpts = typeof options.network === 'object' ? options.network : {};
-            this.networkCollector.setOptions(netOpts);
-            this.networkCollector.start();
-        }
-        if (options.bridge) {
-            this.bridgeCollector.start();
-        }
-        this.browserEventCollector.start();
-        // 3. Register and create Web Component
-        registerCustomElement();
-        this.viewerElement = document.createElement(CapDebugViewerElement.TAG);
-        this.viewerElement.init(this.store, options);
-        document.body.appendChild(this.viewerElement);
-        this.isMounted = true;
-    }
-    /**
-     * Unmounts CapDebug UI and stops all collectors.
-     */
-    unmount() {
-        if (!this.isMounted)
-            return;
-        if (this.viewerElement && this.viewerElement.parentNode) {
-            this.viewerElement.parentNode.removeChild(this.viewerElement);
-            this.viewerElement = null;
-        }
-        this.customEventCollector.stop();
-        this.consoleCollector.stop();
-        this.errorCollector.stop();
-        this.networkCollector.stop();
-        this.browserEventCollector.stop();
-        this.bridgeCollector.stop();
-        this.isMounted = false;
-    }
-    /**
-     * Opens the debug viewer drawer.
-     */
-    show() {
-        if (this.viewerElement) {
-            this.viewerElement.show();
-        }
+class RemoteEventBuffer {
+  buffer = [];
+  maxCapacity;
+  droppedCount = 0;
+  constructor(maxCapacity = 100) {
+    this.maxCapacity = Math.max(1, maxCapacity);
+  }
+  push(event) {
+    if (this.buffer.length >= this.maxCapacity) {
+      this.buffer.shift();
     }
-    /**
-     * Closes the debug viewer drawer.
-     */
-    hide() {
-        if (this.viewerElement) {
-            this.viewerElement.hide();
-        }
+    this.buffer.push(event);
+  }
+  flush() {
+    const items = [...this.buffer];
+    this.buffer = [];
+    return items;
+  }
+  clear() {
+    this.buffer = [];
+    this.droppedCount = 0;
+  }
+  size() {
+    return this.buffer.length;
+  }
+  getDroppedCount() {
+    return this.droppedCount;
+  }
+  incrementDropped() {
+    this.droppedCount++;
+  }
+}
+
+class WebRTCTransport {
+  id = "webrtc";
+  pc = null;
+  signaling = null;
+  config = null;
+  eventsChannel = null;
+  controlChannel = null;
+  status = "disconnected";
+  buffer = new RemoteEventBuffer(100);
+  eventListeners = /* @__PURE__ */ new Set();
+  controlListeners = /* @__PURE__ */ new Set();
+  statusListeners = /* @__PURE__ */ new Set();
+  diagnosticsListeners = /* @__PURE__ */ new Set();
+  pingTimer = null;
+  statsTimer = null;
+  rttMs = 0;
+  totalEventsSent = 0;
+  totalEventsReceived = 0;
+  connectedAt = 0;
+  remoteDeviceName = "Unknown Device";
+  remotePlatform = "unknown";
+  diagnostics = {
+    transport: "webrtc",
+    status: "disconnected",
+    route: "unknown"
+  };
+  async connect(config) {
+    this.config = config;
+    this.setStatus("connecting");
+    const signalingUrl = config.signalingUrl || (typeof window !== "undefined" ? window.location.origin : "http://localhost:4783");
+    this.signaling = new HttpSseSignalingClient(signalingUrl);
+    this.signaling.onMessage((msg) => this.handleSignalingMessage(msg));
+    if (config.isHost) {
+      this.setStatus("signaling");
+    } else {
+      this.setStatus("signaling");
+      await this.signaling.joinSession(config.sessionId, config.secret);
     }
-    /**
-     * Toggles the debug viewer drawer open/closed.
-     */
-    toggle() {
-        if (this.viewerElement) {
-            return this.viewerElement.toggle();
-        }
-        return false;
+  }
+  send(event) {
+    if (this.eventsChannel && this.eventsChannel.readyState === "open") {
+      if (this.eventsChannel.bufferedAmount > 256 * 1024) {
+        if (event.level === "debug" || event.level === "info") {
+          this.buffer.incrementDropped();
+          return;
+        }
+      }
+      const msg = RemoteProtocol.createEvent(event);
+      try {
+        this.eventsChannel.send(RemoteProtocol.serialize(msg));
+        this.totalEventsSent++;
+      } catch (err) {
+        console.error("[CapDebug Remote] Send error:", err);
+      }
+    } else {
+      this.buffer.push(event);
     }
-    /**
-     * Dispatches a debug event through the CustomEvent bus.
-     */
-    emit(event) {
-        if (typeof window === 'undefined')
-            return;
-        window.dispatchEvent(new CustomEvent('capdebug', {
-            detail: {
-                id: event.id,
-                timestamp: event.timestamp || Date.now(),
-                source: event.source || 'web',
-                type: event.type,
-                level: event.level || 'info',
-                message: event.message,
-                data: event.data,
-                duration: event.duration,
-                platform: event.platform,
-            },
-        }));
-    }
-    /**
-     * Clears all recorded events from the store.
-     */
-    clear() {
-        this.store.clear();
-    }
-    /**
-     * Pauses capturing new events.
-     */
-    pause() {
-        this.store.pause();
-    }
-    /**
-     * Resumes capturing events.
-     */
-    resume() {
-        this.store.resume();
-    }
-    captureConsole() {
-        this.consoleCollector.start();
-    }
-    releaseConsole() {
-        this.consoleCollector.stop();
-    }
-    captureErrors() {
-        this.errorCollector.start();
-    }
-    releaseErrors() {
-        this.errorCollector.stop();
-    }
-    captureFetch(options) {
-        if (options) {
-            this.networkCollector.setOptions(options);
+  }
+  sendControl(command) {
+    if (this.controlChannel && this.controlChannel.readyState === "open") {
+      const msg = RemoteProtocol.createControl(command);
+      try {
+        this.controlChannel.send(RemoteProtocol.serialize(msg));
+      } catch (err) {
+        console.error("[CapDebug Remote] Control send error:", err);
+      }
+    }
+  }
+  disconnect() {
+    this.stopTimers();
+    if (this.controlChannel) {
+      try {
+        this.sendControl({ type: "disconnect" });
+      } catch {
+      }
+    }
+    if (this.signaling) {
+      this.signaling.close();
+      this.signaling = null;
+    }
+    if (this.eventsChannel) {
+      this.eventsChannel.close();
+      this.eventsChannel = null;
+    }
+    if (this.controlChannel) {
+      this.controlChannel.close();
+      this.controlChannel = null;
+    }
+    if (this.pc) {
+      this.pc.close();
+      this.pc = null;
+    }
+    this.setStatus("disconnected");
+  }
+  getStatus() {
+    return this.status;
+  }
+  getDiagnostics() {
+    return {
+      ...this.diagnostics,
+      status: this.status,
+      rttMs: this.rttMs,
+      bufferedAmountBytes: this.eventsChannel?.bufferedAmount || 0,
+      droppedEventsCount: this.buffer.getDroppedCount(),
+      totalEventsSent: this.totalEventsSent,
+      totalEventsReceived: this.totalEventsReceived,
+      connectedAt: this.connectedAt,
+      deviceName: this.remoteDeviceName,
+      platform: this.remotePlatform
+    };
+  }
+  onEvent(callback) {
+    this.eventListeners.add(callback);
+    return () => this.eventListeners.delete(callback);
+  }
+  onControl(callback) {
+    this.controlListeners.add(callback);
+    return () => this.controlListeners.delete(callback);
+  }
+  onStatusChange(callback) {
+    this.statusListeners.add(callback);
+    callback(this.status);
+    return () => this.statusListeners.delete(callback);
+  }
+  onDiagnostics(callback) {
+    this.diagnosticsListeners.add(callback);
+    return () => this.diagnosticsListeners.delete(callback);
+  }
+  async handleSignalingMessage(msg) {
+    switch (msg.type) {
+      case "peer-joined":
+        if (this.config?.isHost) {
+          await this.startHandshakeAsInitiator();
+        }
+        break;
+      case "offer":
+        if (!this.config?.isHost) {
+          await this.handleOffer(msg.payload);
+        }
+        break;
+      case "answer":
+        if (this.config?.isHost && this.pc) {
+          await this.pc.setRemoteDescription(new RTCSessionDescription(msg.payload));
+        }
+        break;
+      case "ice-candidate":
+        if (this.pc && msg.payload) {
+          try {
+            await this.pc.addIceCandidate(new RTCIceCandidate(msg.payload));
+          } catch (err) {
+            console.warn("[CapDebug Remote] ICE Candidate error:", err);
+          }
+        }
+        break;
+      case "disconnect":
+        this.disconnect();
+        break;
+    }
+  }
+  initPeerConnection() {
+    const iceServers = this.config?.iceServers || [
+      { urls: "stun:stun.l.google.com:19302" },
+      { urls: "stun:global.stun.twilio.com:3478" }
+    ];
+    const pc = new RTCPeerConnection({ iceServers });
+    pc.onicecandidate = (event) => {
+      if (event.candidate && this.signaling) {
+        this.signaling.send({
+          sessionId: this.config.sessionId,
+          secret: this.config.secret,
+          type: "ice-candidate",
+          sender: this.config.isHost ? "host" : "peer",
+          payload: event.candidate.toJSON()
+        });
+      }
+    };
+    pc.onconnectionstatechange = () => {
+      this.updateDiagnostics();
+      if (pc.connectionState === "failed") {
+        this.setStatus("failed");
+      } else if (pc.connectionState === "closed" || pc.connectionState === "disconnected") {
+        this.setStatus("disconnected");
+      }
+    };
+    pc.oniceconnectionstatechange = () => {
+      this.updateDiagnostics();
+    };
+    this.pc = pc;
+    return pc;
+  }
+  async startHandshakeAsInitiator() {
+    const pc = this.initPeerConnection();
+    this.eventsChannel = pc.createDataChannel("events", { ordered: true });
+    this.controlChannel = pc.createDataChannel("control", { ordered: true });
+    this.setupDataChannel(this.eventsChannel, "events");
+    this.setupDataChannel(this.controlChannel, "control");
+    const offer = await pc.createOffer();
+    await pc.setLocalDescription(offer);
+    if (this.signaling) {
+      await this.signaling.send({
+        sessionId: this.config.sessionId,
+        secret: this.config.secret,
+        type: "offer",
+        sender: "host",
+        payload: offer
+      });
+    }
+  }
+  async handleOffer(offerSdp) {
+    const pc = this.initPeerConnection();
+    pc.ondatachannel = (event) => {
+      const channel = event.channel;
+      if (channel.label === "events") {
+        this.eventsChannel = channel;
+        this.setupDataChannel(channel, "events");
+      } else if (channel.label === "control") {
+        this.controlChannel = channel;
+        this.setupDataChannel(channel, "control");
+      }
+    };
+    await pc.setRemoteDescription(new RTCSessionDescription(offerSdp));
+    const answer = await pc.createAnswer();
+    await pc.setLocalDescription(answer);
+    if (this.signaling) {
+      await this.signaling.send({
+        sessionId: this.config.sessionId,
+        secret: this.config.secret,
+        type: "answer",
+        sender: "peer",
+        payload: answer
+      });
+    }
+  }
+  setupDataChannel(channel, label) {
+    channel.onopen = () => {
+      if (this.eventsChannel?.readyState === "open" && this.controlChannel?.readyState === "open") {
+        this.connectedAt = Date.now();
+        this.setStatus("connected");
+        this.startTimers();
+        if (!this.config?.isHost) {
+          const hello = RemoteProtocol.createHello("0.2.0", "mobile");
+          channel.send(RemoteProtocol.serialize(hello));
+          const buffered = this.buffer.flush();
+          if (buffered.length > 0 && this.eventsChannel?.readyState === "open") {
+            const batch = RemoteProtocol.createBatch(buffered);
+            this.eventsChannel.send(RemoteProtocol.serialize(batch));
+            this.totalEventsSent += buffered.length;
+          }
+        }
+      }
+    };
+    channel.onclose = () => {
+      this.setStatus("disconnected");
+    };
+    channel.onmessage = (e) => {
+      const raw = e.data;
+      if (typeof raw !== "string") return;
+      const message = RemoteProtocol.parse(raw);
+      if (!message) return;
+      if (label === "events") {
+        if (message.type === "event" && message.event) {
+          this.totalEventsReceived++;
+          for (const listener of this.eventListeners) {
+            listener(message.event);
+          }
+        } else if (message.type === "events-batch" && Array.isArray(message.events)) {
+          this.totalEventsReceived += message.events.length;
+          for (const ev of message.events) {
+            for (const listener of this.eventListeners) {
+              listener(ev);
+            }
+          }
         }
-        this.networkCollector.start();
+      } else if (label === "control") {
+        this.handleControlMessage(message);
+      }
+    };
+  }
+  handleControlMessage(message) {
+    if (message.type === "control" && message.command) {
+      for (const listener of this.controlListeners) {
+        listener(message.command);
+      }
+    } else if (message.type === "hello") {
+      this.remoteDeviceName = message.payload?.deviceName || "Mobile Device";
+      this.remotePlatform = message.payload?.platform || "mobile";
+      if (this.controlChannel?.readyState === "open") {
+        this.controlChannel.send(RemoteProtocol.serialize(RemoteProtocol.createHelloAck()));
+      }
+      this.updateDiagnostics();
+    } else if (message.type === "hello-ack") {
+      this.updateDiagnostics();
+    } else if (message.type === "ping") {
+      if (this.controlChannel?.readyState === "open") {
+        const pong = RemoteProtocol.createPong(message.timestamp || Date.now());
+        this.controlChannel.send(RemoteProtocol.serialize(pong));
+      }
+    } else if (message.type === "pong") {
+      const pingTime = message.payload?.pingTimestamp || message.timestamp;
+      if (pingTime) {
+        this.rttMs = Math.max(1, Date.now() - pingTime);
+        this.updateDiagnostics();
+      }
+    }
+  }
+  startTimers() {
+    this.stopTimers();
+    this.pingTimer = setInterval(() => {
+      if (this.controlChannel?.readyState === "open") {
+        this.controlChannel.send(RemoteProtocol.serialize(RemoteProtocol.createPing(Date.now())));
+      }
+    }, 2e3);
+    this.statsTimer = setInterval(() => {
+      this.queryWebRTCStats();
+    }, 3e3);
+  }
+  stopTimers() {
+    if (this.pingTimer) {
+      clearInterval(this.pingTimer);
+      this.pingTimer = null;
+    }
+    if (this.statsTimer) {
+      clearInterval(this.statsTimer);
+      this.statsTimer = null;
+    }
+  }
+  async queryWebRTCStats() {
+    if (!this.pc) return;
+    try {
+      const stats = await this.pc.getStats();
+      let candidateType = "unknown";
+      let protocol = "UDP";
+      let route = "unknown";
+      stats.forEach((report) => {
+        if (report.type === "candidate-pair" && (report.selected || report.state === "succeeded")) {
+          const localCandidate = stats.get(report.localCandidateId);
+          if (localCandidate) {
+            candidateType = localCandidate.candidateType || "host";
+            protocol = localCandidate.protocol || "UDP";
+            if (candidateType === "host") {
+              route = "direct / LAN";
+            } else if (candidateType === "srflx" || candidateType === "prflx") {
+              route = "STUN / WAN";
+            } else if (candidateType === "relay") {
+              route = "relay / TURN";
+            }
+          }
+          if (report.currentRoundTripTime) {
+            this.rttMs = Math.round(report.currentRoundTripTime * 1e3);
+          }
+        }
+      });
+      this.diagnostics = {
+        ...this.diagnostics,
+        candidateType,
+        protocol,
+        route
+      };
+      this.updateDiagnostics();
+    } catch {
     }
-    releaseFetch() {
-        this.networkCollector.stop();
+  }
+  setStatus(status) {
+    this.status = status;
+    this.updateDiagnostics();
+    for (const listener of this.statusListeners) {
+      listener(status);
     }
-    observeEvent(eventName) {
-        this.browserEventCollector.observe(eventName);
+  }
+  updateDiagnostics() {
+    if (this.pc) {
+      this.diagnostics.connectionState = this.pc.connectionState;
+      this.diagnostics.iceConnectionState = this.pc.iceConnectionState;
+      this.diagnostics.iceGatheringState = this.pc.iceGatheringState;
+      this.diagnostics.signalingState = this.pc.signalingState;
     }
-    unobserveEvent(eventName) {
-        this.browserEventCollector.unobserve(eventName);
+    const fullDiag = this.getDiagnostics();
+    for (const listener of this.diagnosticsListeners) {
+      listener(fullDiag);
     }
+  }
 }
-const CapDebug = new CapDebugManager();
 
-function formatBytes(bytes) {
-    if (bytes === 0)
-        return '0 B';
-    const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-class CapDebugWeb extends WebPlugin {
-    async getDeviceInfo() {
-        const nav = typeof navigator !== 'undefined' ? navigator : {};
+class PairingHelper {
+  /**
+   * Creates a new pairing session with given TTL (default 5 minutes).
+   */
+  static createSession(ttlMs = 5 * 60 * 1e3) {
+    const now = Date.now();
+    return {
+      id: this.generateSessionId(),
+      createdAt: now,
+      expiresAt: now + ttlMs,
+      status: "waiting"
+    };
+  }
+  /**
+   * Generates a short, human-readable session ID (e.g. "K7P4-M2" or "7HQ2-9X").
+   */
+  static generateSessionId() {
+    const chars = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ";
+    const bytes = this.getRandomBytes(4);
+    let id = "";
+    for (let i = 0; i < 4; i++) {
+      id += chars[bytes[i] % chars.length];
+    }
+    const suffix = this.getRandomBytes(2);
+    id += "-" + chars[suffix[0] % chars.length] + chars[suffix[1] % chars.length];
+    return id;
+  }
+  /**
+   * Generates a cryptographically strong 128-bit random secret string.
+   */
+  static generateSecret() {
+    const bytes = this.getRandomBytes(16);
+    return Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+  }
+  /**
+   * Formats a web pairing URL where the secret is stored strictly in the URL fragment (#SECRET).
+   */
+  static formatPairingUrl(baseUrl, sessionId, secret) {
+    const cleanBase = baseUrl.replace(/\/+$/, "");
+    return `${cleanBase}/pair?s=${encodeURIComponent(sessionId)}#${secret}`;
+  }
+  /**
+   * Formats a Capacitor mobile deep link URL.
+   */
+  static formatDeepLinkUrl(sessionId, secret, signalingUrl) {
+    let url = `capdebug://pair?session=${encodeURIComponent(sessionId)}&secret=${encodeURIComponent(secret)}`;
+    if (signalingUrl) {
+      url += `&server=${encodeURIComponent(signalingUrl)}`;
+    }
+    return url;
+  }
+  /**
+   * Parses a web pairing URL or Capacitor deep-link URL into session and secret components.
+   */
+  static parseUrl(urlStr) {
+    if (!urlStr || typeof urlStr !== "string") return null;
+    try {
+      if (urlStr.startsWith("capdebug://")) {
+        const queryIdx = urlStr.indexOf("?");
+        if (queryIdx === -1) return null;
+        const search = urlStr.substring(queryIdx + 1);
+        const params = new URLSearchParams(search);
+        const sessionId2 = params.get("session") || params.get("s");
+        const secret2 = params.get("secret") || params.get("sec") || "";
+        const signalingUrl2 = params.get("server") || params.get("sig") || void 0;
+        if (sessionId2 && secret2) {
+          return { sessionId: sessionId2, secret: secret2, signalingUrl: signalingUrl2, rawUrl: urlStr };
+        }
+        return null;
+      }
+      const url = new URL(urlStr);
+      let sessionId = url.searchParams.get("s") || url.searchParams.get("session");
+      if (!sessionId && url.pathname.includes("/s/")) {
+        const parts = url.pathname.split("/s/");
+        if (parts[1]) {
+          sessionId = decodeURIComponent(parts[1].split("/")[0]);
+        }
+      }
+      let secret = url.hash.replace(/^#/, "");
+      if (!secret) {
+        secret = url.searchParams.get("secret") || url.searchParams.get("sec") || "";
+      }
+      const signalingUrl = url.searchParams.get("server") || `${url.protocol}//${url.host}`;
+      if (sessionId && secret) {
         return {
-            manufacturer: 'Web Browser',
-            model: nav.userAgentData?.brands?.[0]?.brand || nav.appName || 'Browser',
-            device: nav.platform || 'Web',
-            systemVersion: nav.appVersion || 'Unknown',
-            architecture: nav.userAgentData?.architecture || 'Unknown',
-            availableProcessors: nav.hardwareConcurrency || 1,
-            isEmulator: false,
-            platform: 'web',
+          sessionId: sessionId.trim(),
+          secret: secret.trim(),
+          signalingUrl,
+          rawUrl: urlStr
         };
+      }
+      return null;
+    } catch {
+      return null;
     }
-    async getMemoryInfo() {
-        const perf = typeof window !== 'undefined' ? window.performance : null;
-        const memory = perf && perf.memory ? perf.memory : null;
-        if (memory) {
-            return {
-                appMemoryUsage: memory.usedJSHeapSize,
-                appMemoryUsageFormatted: formatBytes(memory.usedJSHeapSize),
-                totalHeap: memory.totalJSHeapSize,
-                totalHeapFormatted: formatBytes(memory.totalJSHeapSize),
-                maxHeap: memory.jsHeapSizeLimit,
-                maxHeapFormatted: formatBytes(memory.jsHeapSizeLimit),
-                freeHeap: memory.totalJSHeapSize - memory.usedJSHeapSize,
-                freeHeapFormatted: formatBytes(memory.totalJSHeapSize - memory.usedJSHeapSize),
-                lowMemory: false,
-            };
-        }
-        return {
-            appMemoryUsageFormatted: 'N/A (Browser non-Chrome)',
-            lowMemory: false,
-        };
+  }
+  static getRandomBytes(length) {
+    const bytes = new Uint8Array(length);
+    if (typeof crypto !== "undefined" && crypto.getRandomValues) {
+      crypto.getRandomValues(bytes);
+    } else {
+      for (let i = 0; i < length; i++) {
+        bytes[i] = Math.floor(Math.random() * 256);
+      }
+    }
+    return bytes;
+  }
+}
+
+class RemoteManager {
+  transport;
+  store;
+  isListening = false;
+  eventListener = null;
+  constructor(store) {
+    this.store = store;
+    this.transport = new WebRTCTransport();
+    this.setupControlHandler();
+  }
+  get activeTransport() {
+    return this.transport;
+  }
+  async connect(config) {
+    this.startEventListener();
+    await this.transport.connect(config);
+  }
+  disconnect() {
+    this.transport.disconnect();
+    this.stopEventListener();
+  }
+  status() {
+    return this.transport.getStatus();
+  }
+  getDiagnostics() {
+    return this.transport.getDiagnostics();
+  }
+  async handlePairingUrl(url) {
+    const parsed = PairingHelper.parseUrl(url);
+    if (!parsed) {
+      console.warn("[CapDebug Remote] Invalid pairing URL:", url);
+      return false;
+    }
+    try {
+      await this.connect({
+        sessionId: parsed.sessionId,
+        secret: parsed.secret,
+        signalingUrl: parsed.signalingUrl,
+        isHost: false
+      });
+      return true;
+    } catch (err) {
+      console.error("[CapDebug Remote] Failed to connect via pairing URL:", err);
+      return false;
     }
-    async getWebViewInfo() {
-        const nav = typeof navigator !== 'undefined' ? navigator : {};
-        return {
-            userAgent: nav.userAgent || 'Unknown',
-            version: nav.appVersion || 'Unknown',
-            packageName: typeof window !== 'undefined' ? window.location.hostname : 'localhost',
-            debugEnabled: true,
-        };
+  }
+  startEventListener() {
+    if (this.isListening || typeof window === "undefined") return;
+    this.eventListener = (event) => {
+      const customEvent = event;
+      if (customEvent.detail) {
+        this.transport.send(customEvent.detail);
+      }
+    };
+    window.addEventListener("capdebug", this.eventListener);
+    this.isListening = true;
+  }
+  stopEventListener() {
+    if (!this.isListening || typeof window === "undefined") return;
+    if (this.eventListener) {
+      window.removeEventListener("capdebug", this.eventListener);
+      this.eventListener = null;
     }
-    async getAppInfo() {
-        return {
-            applicationId: typeof window !== 'undefined' ? window.location.host : 'localhost',
-            version: '1.0.0',
-            versionName: '1.0.0 (Web)',
-            versionCode: 1,
-            buildType: typeof process !== 'undefined' && process.env?.NODE_ENV ? process.env.NODE_ENV : 'development',
-        };
+    this.isListening = false;
+  }
+  setupControlHandler() {
+    this.transport.onControl(async (cmd) => {
+      switch (cmd.type) {
+        case "pause":
+          this.store.pause();
+          break;
+        case "resume":
+          this.store.resume();
+          break;
+        case "clear":
+          this.store.clear();
+          break;
+        case "snapshot.request":
+          try {
+            const [device, memory, webView, app, network] = await Promise.allSettled([
+              CapDebugNative.getDeviceInfo(),
+              CapDebugNative.getMemoryInfo(),
+              CapDebugNative.getWebViewInfo(),
+              CapDebugNative.getAppInfo(),
+              CapDebugNative.getNetworkInfo()
+            ]);
+            const snapshot = {
+              device: device.status === "fulfilled" ? device.value : null,
+              memory: memory.status === "fulfilled" ? memory.value : null,
+              webView: webView.status === "fulfilled" ? webView.value : null,
+              app: app.status === "fulfilled" ? app.value : null,
+              network: network.status === "fulfilled" ? network.value : null
+            };
+            this.transport.send({
+              id: "diag_" + Date.now(),
+              timestamp: Date.now(),
+              source: "native",
+              type: "device.snapshot",
+              level: "info",
+              message: "Live native diagnostics snapshot",
+              data: snapshot
+            });
+          } catch (err) {
+            console.error("[CapDebug Remote] Failed snapshot:", err);
+          }
+          break;
+        case "disconnect":
+          this.disconnect();
+          break;
+      }
+    });
+  }
+}
+
+class DeepLinkHandler {
+  static parse(url) {
+    return PairingHelper.parseUrl(url);
+  }
+}
+
+class CapDebugManager {
+  store;
+  viewerElement = null;
+  isMounted = false;
+  remoteManager;
+  customEventCollector;
+  consoleCollector;
+  errorCollector;
+  networkCollector;
+  browserEventCollector;
+  bridgeCollector;
+  constructor() {
+    this.store = new CapDebugStore();
+    this.remoteManager = new RemoteManager(this.store);
+    this.customEventCollector = new CustomEventCollector(this.store);
+    this.consoleCollector = new ConsoleCollector();
+    this.errorCollector = new ErrorCollector();
+    this.networkCollector = new NetworkCollector();
+    this.browserEventCollector = new BrowserEventCollector();
+    this.bridgeCollector = new BridgeCollector();
+  }
+  get remote() {
+    return this.remoteManager;
+  }
+  async handlePairingUrl(url) {
+    return this.remoteManager.handlePairingUrl(url);
+  }
+  get native() {
+    return CapDebugNative;
+  }
+  get currentStore() {
+    return this.store;
+  }
+  /**
+   * Mounts the CapDebug UI into the DOM and activates collectors.
+   */
+  mount(options = {}) {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    if (this.isMounted) {
+      this.unmount();
+    }
+    if (options.maxEvents) {
+      this.store.setMaxEvents(options.maxEvents);
+    }
+    if (options.customMaskKeys) {
+      this.store.setCustomMaskKeys(options.customMaskKeys);
+    }
+    this.customEventCollector.start();
+    if (options.console !== false) {
+      this.consoleCollector.start();
+    }
+    if (options.errors !== false) {
+      this.errorCollector.start();
+    }
+    if (options.network) {
+      const netOpts = typeof options.network === "object" ? options.network : {};
+      this.networkCollector.setOptions(netOpts);
+      this.networkCollector.start();
+    }
+    if (options.bridge) {
+      this.bridgeCollector.start();
+    }
+    this.browserEventCollector.start();
+    registerCustomElement();
+    this.viewerElement = document.createElement(CapDebugViewerElement.TAG);
+    this.viewerElement.init(this.store, options);
+    document.body.appendChild(this.viewerElement);
+    this.isMounted = true;
+  }
+  /**
+   * Unmounts CapDebug UI and stops all collectors.
+   */
+  unmount() {
+    if (!this.isMounted) return;
+    if (this.viewerElement && this.viewerElement.parentNode) {
+      this.viewerElement.parentNode.removeChild(this.viewerElement);
+      this.viewerElement = null;
+    }
+    this.customEventCollector.stop();
+    this.consoleCollector.stop();
+    this.errorCollector.stop();
+    this.networkCollector.stop();
+    this.browserEventCollector.stop();
+    this.bridgeCollector.stop();
+    this.isMounted = false;
+  }
+  /**
+   * Opens the debug viewer drawer.
+   */
+  show() {
+    if (this.viewerElement) {
+      this.viewerElement.show();
     }
-    async getNetworkInfo() {
-        const nav = typeof navigator !== 'undefined' ? navigator : {};
-        const conn = nav.connection || nav.mozConnection || nav.webkitConnection;
-        return {
-            connected: nav.onLine ?? true,
-            connectionType: conn ? conn.effectiveType || conn.type || 'unknown' : (nav.onLine ? 'online' : 'offline'),
-            metered: conn ? conn.saveData ?? false : false,
-        };
+  }
+  /**
+   * Closes the debug viewer drawer.
+   */
+  hide() {
+    if (this.viewerElement) {
+      this.viewerElement.hide();
     }
+  }
+  /**
+   * Toggles the debug viewer drawer open/closed.
+   */
+  toggle() {
+    if (this.viewerElement) {
+      return this.viewerElement.toggle();
+    }
+    return false;
+  }
+  /**
+   * Dispatches a debug event through the CustomEvent bus.
+   */
+  emit(event) {
+    if (typeof window === "undefined") return;
+    window.dispatchEvent(
+      new CustomEvent("capdebug", {
+        detail: {
+          id: event.id,
+          timestamp: event.timestamp || Date.now(),
+          source: event.source || "web",
+          type: event.type,
+          level: event.level || "info",
+          message: event.message,
+          data: event.data,
+          duration: event.duration,
+          platform: event.platform
+        }
+      })
+    );
+  }
+  /**
+   * Clears all recorded events from the store.
+   */
+  clear() {
+    this.store.clear();
+  }
+  /**
+   * Pauses capturing new events.
+   */
+  pause() {
+    this.store.pause();
+  }
+  /**
+   * Resumes capturing events.
+   */
+  resume() {
+    this.store.resume();
+  }
+  captureConsole() {
+    this.consoleCollector.start();
+  }
+  releaseConsole() {
+    this.consoleCollector.stop();
+  }
+  captureErrors() {
+    this.errorCollector.start();
+  }
+  releaseErrors() {
+    this.errorCollector.stop();
+  }
+  captureFetch(options) {
+    if (options) {
+      this.networkCollector.setOptions(options);
+    }
+    this.networkCollector.start();
+  }
+  releaseFetch() {
+    this.networkCollector.stop();
+  }
+  observeEvent(eventName) {
+    this.browserEventCollector.observe(eventName);
+  }
+  unobserveEvent(eventName) {
+    this.browserEventCollector.unobserve(eventName);
+  }
+}
+const CapDebug = new CapDebugManager();
+
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+}
+class CapDebugWeb extends WebPlugin {
+  async getDeviceInfo() {
+    const nav = typeof navigator !== "undefined" ? navigator : {};
+    return {
+      manufacturer: "Web Browser",
+      model: nav.userAgentData?.brands?.[0]?.brand || nav.appName || "Browser",
+      device: nav.platform || "Web",
+      systemVersion: nav.appVersion || "Unknown",
+      architecture: nav.userAgentData?.architecture || "Unknown",
+      availableProcessors: nav.hardwareConcurrency || 1,
+      isEmulator: false,
+      platform: "web"
+    };
+  }
+  async getMemoryInfo() {
+    const perf = typeof window !== "undefined" ? window.performance : null;
+    const memory = perf && perf.memory ? perf.memory : null;
+    if (memory) {
+      return {
+        appMemoryUsage: memory.usedJSHeapSize,
+        appMemoryUsageFormatted: formatBytes(memory.usedJSHeapSize),
+        totalHeap: memory.totalJSHeapSize,
+        totalHeapFormatted: formatBytes(memory.totalJSHeapSize),
+        maxHeap: memory.jsHeapSizeLimit,
+        maxHeapFormatted: formatBytes(memory.jsHeapSizeLimit),
+        freeHeap: memory.totalJSHeapSize - memory.usedJSHeapSize,
+        freeHeapFormatted: formatBytes(memory.totalJSHeapSize - memory.usedJSHeapSize),
+        lowMemory: false
+      };
+    }
+    return {
+      appMemoryUsageFormatted: "N/A (Browser non-Chrome)",
+      lowMemory: false
+    };
+  }
+  async getWebViewInfo() {
+    const nav = typeof navigator !== "undefined" ? navigator : {};
+    return {
+      userAgent: nav.userAgent || "Unknown",
+      version: nav.appVersion || "Unknown",
+      packageName: typeof window !== "undefined" ? window.location.hostname : "localhost",
+      debugEnabled: true
+    };
+  }
+  async getAppInfo() {
+    return {
+      applicationId: typeof window !== "undefined" ? window.location.host : "localhost",
+      version: "1.0.0",
+      versionName: "1.0.0 (Web)",
+      versionCode: 1,
+      buildType: typeof process !== "undefined" && process.env?.NODE_ENV ? process.env.NODE_ENV : "development"
+    };
+  }
+  async getNetworkInfo() {
+    const nav = typeof navigator !== "undefined" ? navigator : {};
+    const conn = nav.connection || nav.mozConnection || nav.webkitConnection;
+    return {
+      connected: nav.onLine ?? true,
+      connectionType: conn ? conn.effectiveType || conn.type || "unknown" : nav.onLine ? "online" : "offline",
+      metered: conn ? conn.saveData ?? false : false
+    };
+  }
 }
 
 var web = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    CapDebugWeb: CapDebugWeb
+  __proto__: null,
+  CapDebugWeb: CapDebugWeb
 });
 
-export { BridgeCollector, BrowserEventCollector, CapDebug, CapDebugManager, CapDebugNative, CapDebugStore, CapDebugViewerElement, ConsoleCollector, CustomEventCollector, DataSanitizer, ErrorCollector, JsonViewer, NetworkCollector, CapDebug as default, defaultSanitizer, registerCustomElement, sanitize };
+export { BridgeCollector, BrowserEventCollector, CapDebug, CapDebugManager, CapDebugNative, CapDebugStore, CapDebugViewerElement, ConsoleCollector, CustomEventCollector, DataSanitizer, DeepLinkHandler, ErrorCollector, HttpSseSignalingClient, JsonViewer, NetworkCollector, PROTOCOL_VERSION, PairingHelper, RemoteEventBuffer, RemoteManager, RemoteProtocol, WebRTCTransport, CapDebug as default, defaultSanitizer, registerCustomElement, sanitize };
 //# sourceMappingURL=plugin.mjs.map