capdebug 0.1.0

package/dist/plugin.js

@@ -0,0 +1,2789 @@
+var capacitorCapDebug = (function (exports, core) {
+    'use strict';
+
+    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 = core.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 core.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
+    });
+
+    exports.BridgeCollector = BridgeCollector;
+    exports.BrowserEventCollector = BrowserEventCollector;
+    exports.CapDebug = CapDebug;
+    exports.CapDebugManager = CapDebugManager;
+    exports.CapDebugNative = CapDebugNative;
+    exports.CapDebugStore = CapDebugStore;
+    exports.CapDebugViewerElement = CapDebugViewerElement;
+    exports.ConsoleCollector = ConsoleCollector;
+    exports.CustomEventCollector = CustomEventCollector;
+    exports.DataSanitizer = DataSanitizer;
+    exports.ErrorCollector = ErrorCollector;
+    exports.JsonViewer = JsonViewer;
+    exports.NetworkCollector = NetworkCollector;
+    exports.default = CapDebug;
+    exports.defaultSanitizer = defaultSanitizer;
+    exports.registerCustomElement = registerCustomElement;
+    exports.sanitize = sanitize;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
+
+    return exports;
+
+})({}, capacitorExports);
+//# sourceMappingURL=plugin.js.map