capdebug 0.1.0

package/dist/plugin.mjs

@@ -0,0 +1,2766 @@
+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 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;
+    }
+    sanitize(value) {
+        const seen = new WeakSet();
+        return this.sanitizeRecursive(value, 0, seen);
+    }
+    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 defaultSanitizer = new DataSanitizer();
+function sanitize(value, options) {
+    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);
+        };
+    }
+    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();
+        }
+    }
+    dispatchToListeners() {
+        const filtered = this.getFiltered();
+        for (const listener of this.listeners) {
+            try {
+                listener(filtered, this);
+            }
+            catch (err) {
+                // Prevent subscriber errors from halting store
+            }
+        }
+    }
+    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;
+            }
+        }
+        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;
+            }
+        }
+        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(),
+                    },
+                }));
+            }
+            catch {
+                // ignore
+            }
+        };
+        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]';
+                }
+            }
+            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;
+            }
+            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;
+            }
+        };
+        this.running = true;
+    }
+    stop() {
+        if (!this.running || typeof window === 'undefined')
+            return;
+        if (this.originalFetch) {
+            window.fetch = this.originalFetch;
+            this.originalFetch = null;
+        }
+        this.running = false;
+    }
+    emitNetworkEvent(detail) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            window.dispatchEvent(new CustomEvent('capdebug', {
+                detail: {
+                    source: 'network',
+                    ...detail,
+                },
+            }));
+        }
+        catch {
+            // ignore
+        }
+    }
+}
+
+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;
+    }
+}
+
+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;
+    }
+}
+
+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(),
+            },
+        }));
+    }
+}
+
+const VIEWER_STYLES = `
+:host {
+  --cd-bg-base: #0d1117;
+  --cd-bg-surface: #161b22;
+  --cd-bg-surface-elevated: #21262d;
+  --cd-bg-hover: #30363d;
+  --cd-border: #30363d;
+  --cd-border-subtle: #21262d;
+  
+  --cd-text-primary: #f0f6fc;
+  --cd-text-secondary: #8b949e;
+  --cd-text-muted: #6e7681;
+  
+  --cd-color-brand: #58a6ff;
+  --cd-color-brand-rgb: 88, 166, 255;
+  --cd-color-info: #38bdf8;
+  --cd-color-warn: #fbbf24;
+  --cd-color-error: #f87171;
+  --cd-color-debug: #c084fc;
+  --cd-color-success: #34d399;
+
+  --cd-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --cd-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  
+  --cd-z-index: 2147483647;
+  
+  all: initial;
+  font-family: var(--cd-font-sans);
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--cd-text-primary);
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+/* Floating Trigger Button */
+.cd-floating-btn {
+  position: fixed;
+  z-index: var(--cd-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 38px;
+  padding: 0 12px;
+  background: rgba(22, 27, 34, 0.88);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(240, 246, 252, 0.15);
+  border-radius: 9999px;
+  color: var(--cd-text-primary);
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
+  transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.cd-floating-btn:active {
+  transform: scale(0.94);
+}
+
+.cd-floating-btn.dragging {
+  opacity: 0.85;
+  transform: scale(1.05);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
+}
+
+.cd-btn-logo {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 700;
+  font-size: 11px;
+  letter-spacing: 0.5px;
+  color: #38bdf8;
+  font-family: var(--cd-font-mono);
+}
+
+.cd-btn-badge {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 10px;
+  font-weight: 700;
+  font-family: var(--cd-font-mono);
+  background: var(--cd-color-error);
+  color: #ffffff;
+  border-radius: 9999px;
+}
+
+.cd-btn-badge.visible {
+  display: flex;
+}
+
+/* Backdrop */
+.cd-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--cd-z-index) - 1);
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(2px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cd-backdrop.open {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* Main Drawer Panel */
+.cd-panel {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: var(--cd-z-index);
+  height: 80vh;
+  max-height: 85vh;
+  background: var(--cd-bg-base);
+  border-top: 1px solid var(--cd-border);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
+  display: flex;
+  flex-direction: column;
+  transform: translateY(100%);
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+  padding-bottom: env(safe-area-inset-bottom, 12px);
+}
+
+@media (min-width: 768px) {
+  .cd-panel {
+    bottom: 12px;
+    right: 12px;
+    left: auto;
+    width: 480px;
+    height: calc(100vh - 24px);
+    max-height: 880px;
+    border-radius: 16px;
+    border: 1px solid var(--cd-border);
+    transform: translateX(calc(100% + 24px));
+    padding-bottom: 0;
+  }
+}
+
+.cd-panel.open {
+  transform: translateY(0);
+}
+
+@media (min-width: 768px) {
+  .cd-panel.open {
+    transform: translateX(0);
+  }
+}
+
+/* Panel Header */
+.cd-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--cd-border);
+  background: var(--cd-bg-surface);
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+  user-select: none;
+}
+
+.cd-header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.cd-header-title {
+  font-weight: 700;
+  font-size: 13px;
+  font-family: var(--cd-font-mono);
+  color: var(--cd-text-primary);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cd-status-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--cd-color-success);
+}
+
+.cd-status-indicator.paused {
+  background: var(--cd-color-warn);
+}
+
+.cd-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.cd-btn-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--cd-text-secondary);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  padding: 0;
+}
+
+.cd-btn-icon:hover {
+  background: var(--cd-bg-hover);
+  color: var(--cd-text-primary);
+  border-color: var(--cd-border);
+}
+
+.cd-btn-icon.active {
+  background: rgba(251, 191, 36, 0.15);
+  color: var(--cd-color-warn);
+  border-color: rgba(251, 191, 36, 0.3);
+}
+
+/* Tabs Bar */
+.cd-tabs-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 10px;
+  background: var(--cd-bg-surface);
+  border-bottom: 1px solid var(--cd-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cd-tabs-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.cd-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  color: var(--cd-text-secondary);
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: all 0.15s ease;
+}
+
+.cd-tab:hover {
+  background: var(--cd-bg-hover);
+  color: var(--cd-text-primary);
+}
+
+.cd-tab.active {
+  background: var(--cd-bg-surface-elevated);
+  border-color: var(--cd-border);
+  color: var(--cd-text-primary);
+  font-weight: 600;
+}
+
+.cd-tab-badge {
+  font-size: 10px;
+  font-family: var(--cd-font-mono);
+  padding: 1px 5px;
+  background: var(--cd-bg-hover);
+  border-radius: 10px;
+  color: var(--cd-text-muted);
+}
+
+.cd-tab.active .cd-tab-badge {
+  background: rgba(88, 166, 255, 0.2);
+  color: var(--cd-color-brand);
+}
+
+/* Toolbar */
+.cd-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--cd-bg-base);
+  border-bottom: 1px solid var(--cd-border-subtle);
+}
+
+.cd-search-input {
+  flex: 1;
+  height: 28px;
+  padding: 0 8px;
+  background: var(--cd-bg-surface);
+  border: 1px solid var(--cd-border);
+  border-radius: 6px;
+  color: var(--cd-text-primary);
+  font-size: 12px;
+  outline: none;
+  transition: border-color 0.15s ease;
+}
+
+.cd-search-input:focus {
+  border-color: var(--cd-color-brand);
+}
+
+.cd-search-input::placeholder {
+  color: var(--cd-text-muted);
+}
+
+.cd-level-filters {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cd-level-pill {
+  padding: 3px 7px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 600;
+  background: transparent;
+  border: 1px solid var(--cd-border-subtle);
+  color: var(--cd-text-muted);
+  cursor: pointer;
+  transition: all 0.12s ease;
+}
+
+.cd-level-pill:hover {
+  border-color: var(--cd-border);
+  color: var(--cd-text-secondary);
+}
+
+.cd-level-pill.active {
+  background: var(--cd-bg-surface-elevated);
+  border-color: var(--cd-border);
+  color: var(--cd-text-primary);
+}
+
+.cd-level-pill[data-level="error"].active {
+  background: rgba(248, 113, 113, 0.15);
+  border-color: rgba(248, 113, 113, 0.3);
+  color: var(--cd-color-error);
+}
+
+.cd-level-pill[data-level="warn"].active {
+  background: rgba(251, 191, 36, 0.15);
+  border-color: rgba(251, 191, 36, 0.3);
+  color: var(--cd-color-warn);
+}
+
+/* Event List */
+.cd-content {
+  flex: 1;
+  overflow-y: auto;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+
+.cd-event-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.cd-event-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--cd-border-subtle);
+  cursor: pointer;
+  transition: background-color 0.12s ease;
+  font-family: var(--cd-font-mono);
+  font-size: 11.5px;
+}
+
+.cd-event-row:hover {
+  background: var(--cd-bg-surface);
+}
+
+.cd-event-level-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  margin-top: 5px;
+  flex-shrink: 0;
+  background: var(--cd-text-muted);
+}
+
+.cd-event-row[data-level="info"] .cd-event-level-dot { background: var(--cd-color-info); }
+.cd-event-row[data-level="warn"] .cd-event-level-dot { background: var(--cd-color-warn); }
+.cd-event-row[data-level="error"] .cd-event-level-dot { background: var(--cd-color-error); }
+.cd-event-row[data-level="debug"] .cd-event-level-dot { background: var(--cd-color-debug); }
+
+.cd-event-time {
+  color: var(--cd-text-muted);
+  font-size: 10.5px;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.cd-event-source {
+  padding: 1px 5px;
+  border-radius: 3px;
+  background: var(--cd-bg-surface-elevated);
+  color: var(--cd-text-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+
+.cd-event-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cd-event-type {
+  font-weight: 600;
+  color: var(--cd-text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cd-event-msg {
+  color: var(--cd-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+}
+
+.cd-event-duration {
+  font-size: 10px;
+  padding: 1px 4px;
+  border-radius: 3px;
+  background: rgba(88, 166, 255, 0.1);
+  color: var(--cd-color-brand);
+  flex-shrink: 0;
+}
+
+.cd-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: var(--cd-text-muted);
+  gap: 8px;
+  font-size: 12px;
+}
+
+/* Detail Modal Overlay */
+.cd-detail-overlay {
+  position: absolute;
+  inset: 0;
+  background: var(--cd-bg-base);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  transform: translateX(100%);
+  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cd-detail-overlay.open {
+  transform: translateX(0);
+}
+
+.cd-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--cd-border);
+  background: var(--cd-bg-surface);
+}
+
+.cd-detail-back {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: transparent;
+  border: none;
+  color: var(--cd-color-brand);
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 4px;
+}
+
+.cd-detail-back:hover {
+  background: var(--cd-bg-hover);
+}
+
+.cd-detail-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  font-family: var(--cd-font-mono);
+  font-size: 12px;
+}
+
+.cd-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 8px;
+  padding: 10px;
+  background: var(--cd-bg-surface);
+  border: 1px solid var(--cd-border-subtle);
+  border-radius: 8px;
+}
+
+.cd-meta-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cd-meta-label {
+  font-size: 10px;
+  text-transform: uppercase;
+  color: var(--cd-text-muted);
+  font-weight: 600;
+}
+
+.cd-meta-val {
+  font-size: 11.5px;
+  color: var(--cd-text-primary);
+  word-break: break-all;
+}
+
+.cd-section-title {
+  font-size: 11px;
+  text-transform: uppercase;
+  color: var(--cd-text-muted);
+  font-weight: 700;
+  margin-top: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cd-msg-block {
+  padding: 10px;
+  background: var(--cd-bg-surface);
+  border: 1px solid var(--cd-border-subtle);
+  border-radius: 8px;
+  color: var(--cd-text-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+  line-height: 1.5;
+}
+
+/* Device Tab View */
+.cd-device-view {
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.cd-device-card {
+  background: var(--cd-bg-surface);
+  border: 1px solid var(--cd-border);
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cd-device-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--cd-color-brand);
+  border-bottom: 1px solid var(--cd-border-subtle);
+  padding-bottom: 6px;
+}
+
+.cd-device-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+  gap: 8px;
+}
+
+/* Collapsible JSON Viewer */
+.cd-json-tree {
+  background: var(--cd-bg-surface);
+  border: 1px solid var(--cd-border-subtle);
+  border-radius: 8px;
+  padding: 10px;
+  font-family: var(--cd-font-mono);
+  font-size: 11.5px;
+  line-height: 1.5;
+  overflow-x: auto;
+}
+
+.cd-json-node {
+  display: block;
+}
+
+.cd-json-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  padding: 1px 0;
+}
+
+.cd-json-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  user-select: none;
+  color: var(--cd-text-muted);
+  font-size: 9px;
+  transition: transform 0.1s ease;
+}
+
+.cd-json-toggle.collapsed {
+  transform: rotate(-90deg);
+}
+
+.cd-json-key {
+  color: #7ee787;
+}
+
+.cd-json-colon {
+  color: var(--cd-text-muted);
+}
+
+.cd-json-string {
+  color: #a5d6ff;
+  word-break: break-all;
+}
+
+.cd-json-number {
+  color: #79c0ff;
+}
+
+.cd-json-boolean {
+  color: #ff7b72;
+}
+
+.cd-json-null {
+  color: var(--cd-text-muted);
+  font-style: italic;
+}
+
+.cd-json-copy-btn {
+  opacity: 0;
+  padding: 1px 4px;
+  font-size: 9px;
+  background: var(--cd-bg-hover);
+  border: 1px solid var(--cd-border);
+  border-radius: 3px;
+  color: var(--cd-text-secondary);
+  cursor: pointer;
+  margin-left: 6px;
+}
+
+.cd-json-row:hover .cd-json-copy-btn {
+  opacity: 1;
+}
+
+.cd-json-children {
+  padding-left: 14px;
+  border-left: 1px solid var(--cd-border-subtle);
+  margin-left: 6px;
+}
+
+.cd-json-children.hidden {
+  display: none;
+}
+
+/* Small UI helpers */
+.cd-copy-btn-sm {
+  background: var(--cd-bg-surface-elevated);
+  border: 1px solid var(--cd-border);
+  border-radius: 4px;
+  color: var(--cd-text-secondary);
+  font-size: 10px;
+  padding: 3px 8px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.cd-copy-btn-sm:hover {
+  background: var(--cd-bg-hover);
+  color: var(--cd-text-primary);
+}
+`;
+
+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';
+    }
+    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
+            }
+        }
+    }
+}
+
+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;
+        }
+    }
+}
+
+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;
+    }
+    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();
+        }
+    }
+    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;
+        }
+    }
+    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';
+        }
+    }
+    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());
+        });
+    }
+    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 = `
+        <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);
+        }
+    }
+    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 = `
+        <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 = `
+      <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 = `
+        <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;
+        }
+    }
+    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 = `
+            <span class="cd-meta-label">${k}</span>
+            <span class="cd-meta-val">${v !== undefined && v !== null ? String(v) : '—'}</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}`;
+    }
+}
+
+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);
+            }
+        });
+    }
+    show() {
+        if (this.debugPanel) {
+            this.debugPanel.open();
+        }
+    }
+    hide() {
+        if (this.debugPanel) {
+            this.debugPanel.close();
+        }
+    }
+    toggle() {
+        if (this.debugPanel) {
+            return this.debugPanel.toggle();
+        }
+        return false;
+    }
+    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 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();
+        }
+    }
+    /**
+     * 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
+});
+
+export { BridgeCollector, BrowserEventCollector, CapDebug, CapDebugManager, CapDebugNative, CapDebugStore, CapDebugViewerElement, ConsoleCollector, CustomEventCollector, DataSanitizer, ErrorCollector, JsonViewer, NetworkCollector, CapDebug as default, defaultSanitizer, registerCustomElement, sanitize };
+//# sourceMappingURL=plugin.mjs.map