@ytspar/devbar 1.0.0-canary.e1f65d0 → 1.0.0-canary.f2afc5a

package/dist/GlobalDevBar.js

@@ -4,104 +4,137 @@
  * A development toolbar that displays breakpoint info, performance stats,
  * console error/warning counts, and provides screenshot capabilities via Sweetlink.
  *
- * This is a vanilla JS replacement for the React-based GlobalDevBar component
- * to avoid React dependency conflicts in host applications.
+ * Framework-agnostic — no React, Vue, or other framework dependencies.
+ *
+ * Implementation is split across focused modules in ./modules/:
+ * - websocket.ts   — WebSocket connection, reconnection, port scanning, message handling
+ * - screenshot.ts  — Screenshot capture, design review, clipboard operations
+ * - rendering.ts   — renderBar(), renderConsolePopup(), renderModal(), all DOM creation
+ * - performance.ts — setupPerformanceMonitoring(), FCP/LCP/CLS/INP observers
+ * - theme.ts       — setupTheme(), toggleTheme(), theme media query handling
+ * - keyboard.ts    — setupKeyboardShortcuts(), handleKeydown()
+ * - tooltips.ts    — tooltip creation, positioning, and management helpers
  */
-import * as html2canvasModule from 'html2canvas-pro';
-import { MAX_CONSOLE_LOGS, DEVBAR_SCREENSHOT_QUALITY, MAX_RECONNECT_ATTEMPTS, BASE_RECONNECT_DELAY_MS, MAX_RECONNECT_DELAY_MS, WS_PORT, SCREENSHOT_NOTIFICATION_MS, CLIPBOARD_NOTIFICATION_MS, DESIGN_REVIEW_NOTIFICATION_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, TOOLTIP_STYLES, COLORS, FONT_MONO, } from './constants.js';
-import { formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
-import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
-import { extractPageSchema, schemaToMarkdown } from './schema.js';
-import { createSvgIcon, getButtonStyles, createStyledButton, createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox, } from './ui/index.js';
-const html2canvas = (html2canvasModule.default ?? html2canvasModule);
-const earlyConsoleCapture = (() => {
-    const ssrFallback = {
-        errorCount: 0,
-        warningCount: 0,
-        logs: [],
-        originalConsole: null,
-        isPatched: false
-    };
-    // Skip on server-side rendering
-    if (typeof window === 'undefined')
-        return ssrFallback;
-    const capture = {
-        errorCount: 0,
-        warningCount: 0,
-        logs: [],
-        originalConsole: {
-            log: console.log,
-            error: console.error,
-            warn: console.warn,
-            info: console.info
-        },
-        isPatched: false
-    };
-    const captureLog = (level, args) => {
-        capture.logs.push({ level, message: formatArgs(args), timestamp: Date.now() });
-        if (capture.logs.length > MAX_CONSOLE_LOGS)
-            capture.logs = capture.logs.slice(-MAX_CONSOLE_LOGS);
-    };
-    // Patch console immediately
-    if (!capture.isPatched && capture.originalConsole) {
-        console.log = (...args) => { captureLog('log', args); capture.originalConsole.log(...args); };
-        console.error = (...args) => { captureLog('error', args); capture.errorCount++; capture.originalConsole.error(...args); };
-        console.warn = (...args) => { captureLog('warn', args); capture.warningCount++; capture.originalConsole.warn(...args); };
-        console.info = (...args) => { captureLog('info', args); capture.originalConsole.info(...args); };
-        capture.isPatched = true;
-    }
-    return capture;
-})();
+import { CSS_COLORS, DEVBAR_STYLES, getThemeColors, MAX_RECONNECT_ATTEMPTS, WS_PORT, WS_PORT_OFFSET, } from './constants.js';
+import { DebugLogger, normalizeDebugConfig } from './debug.js';
+import { getSettingsManager, } from './settings.js';
+import { ConsoleCapture } from '@ytspar/sweetlink/browser/consoleCapture';
+// Import module functions
+import { connectWebSocket, handleNotification } from './modules/websocket.js';
+import { handleScreenshot as moduleHandleScreenshot } from './modules/screenshot.js';
+import { render as moduleRender } from './modules/rendering.js';
+import { setupBreakpointDetection, setupPerformanceMonitoring, } from './modules/performance.js';
+import { setupKeyboardShortcuts } from './modules/keyboard.js';
+import { setupTheme, loadCompactMode, setThemeMode as moduleSetThemeMode, } from './modules/theme.js';
+export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
+// html2canvas is lazy-loaded via getHtml2Canvas() to avoid bundling ~400KB upfront
+// ============================================================================
+// Console Capture (single implementation from @ytspar/sweetlink)
+// ============================================================================
+const consoleCapture = new ConsoleCapture({ trackCounts: true });
+consoleCapture.importEarlyLogs();
+consoleCapture.start();
 // ============================================================================
 // GlobalDevBar Class
 // ============================================================================
 export class GlobalDevBar {
+    // Static storage for custom controls
+    static customControls = [];
+    // -- Public state exposed via DevBarState interface for modules --
+    options;
+    debugConfig;
+    debug;
+    container = null;
+    ws = null;
+    consoleLogs = [];
+    sweetlinkConnected = false;
+    collapsed = false;
+    capturing = false;
+    copiedToClipboard = false;
+    copiedPath = false;
+    lastScreenshot = null;
+    designReviewInProgress = false;
+    lastDesignReview = null;
+    designReviewError = null;
+    showDesignReviewConfirm = false;
+    apiKeyStatus = null;
+    lastOutline = null;
+    lastSchema = null;
+    savingOutline = false;
+    savingSchema = false;
+    consoleFilter = null;
+    // Modal states
+    showOutlineModal = false;
+    showSchemaModal = false;
+    // Track active HTML tooltips for cleanup on re-render
+    activeTooltips = new Set();
+    breakpointInfo = null;
+    perfStats = null;
+    lcpValue = null;
+    clsValue = 0;
+    inpValue = 0;
+    reconnectAttempts = 0;
+    // Port scanning state for multi-instance support
+    currentAppPort;
+    baseWsPort;
+    wsVerified = false;
+    serverProjectDir = null;
+    // Track the position of the connection indicator dot for smooth collapse
+    lastDotPosition = null;
+    reconnectTimeout = null;
+    screenshotTimeout = null;
+    copiedPathTimeout = null;
+    designReviewTimeout = null;
+    designReviewErrorTimeout = null;
+    outlineTimeout = null;
+    schemaTimeout = null;
+    resizeHandler = null;
+    keydownHandler = null;
+    fcpObserver = null;
+    lcpObserver = null;
+    clsObserver = null;
+    inpObserver = null;
+    destroyed = false;
+    // Theme state
+    themeMode = 'system';
+    themeMediaQuery = null;
+    themeMediaHandler = null;
+    // Compact mode state
+    compactMode = false;
+    // Settings popover state
+    showSettingsPopover = false;
+    // Overlay element for modals
+    overlayElement = null;
+    // Settings manager for persistence
+    settingsManager;
+    // Console log listener for real-time badge updates
+    logChangeListener = null;
     constructor(options = {}) {
-        this.container = null;
-        this.ws = null;
-        this.consoleLogs = [];
-        this.sweetlinkConnected = false;
-        this.collapsed = false;
-        this.capturing = false;
-        this.copiedToClipboard = false;
-        this.copiedPath = false;
-        this.lastScreenshot = null;
-        this.designReviewInProgress = false;
-        this.lastDesignReview = null;
-        this.designReviewError = null;
-        this.showDesignReviewConfirm = false;
-        this.apiKeyStatus = null;
-        this.lastOutline = null;
-        this.lastSchema = null;
-        this.consoleFilter = null;
-        // Modal states
-        this.showOutlineModal = false;
-        this.showSchemaModal = false;
-        this.breakpointInfo = null;
-        this.perfStats = null;
-        this.lcpValue = null;
-        this.reconnectAttempts = 0;
-        this.reconnectTimeout = null;
-        this.screenshotTimeout = null;
-        this.copiedPathTimeout = null;
-        this.designReviewTimeout = null;
-        this.designReviewErrorTimeout = null;
-        this.outlineTimeout = null;
-        this.schemaTimeout = null;
-        this.resizeHandler = null;
-        this.keydownHandler = null;
-        this.fcpObserver = null;
-        this.lcpObserver = null;
-        this.destroyed = false;
-        // Overlay element for modals
-        this.overlayElement = null;
+        // Initialize debug config first so we can log during construction
+        this.debugConfig = normalizeDebugConfig(options.debug);
+        this.debug = new DebugLogger(this.debugConfig);
+        // Initialize settings manager
+        this.settingsManager = getSettingsManager();
+        // Calculate app port from URL for multi-instance support
+        if (typeof window !== 'undefined') {
+            this.currentAppPort =
+                parseInt(window.location.port, 10) || (window.location.protocol === 'https:' ? 443 : 80);
+            // Calculate expected WS port (appPort + port offset) like SweetlinkBridge does
+            this.baseWsPort = this.currentAppPort > 0 ? this.currentAppPort + WS_PORT_OFFSET : WS_PORT;
+        }
+        else {
+            this.currentAppPort = 0;
+            this.baseWsPort = WS_PORT;
+        }
         this.options = {
             position: options.position ?? 'bottom-left',
-            accentColor: options.accentColor ?? COLORS.primary,
+            accentColor: options.accentColor ?? CSS_COLORS.primary,
             showMetrics: {
                 breakpoint: options.showMetrics?.breakpoint ?? true,
                 fcp: options.showMetrics?.fcp ?? true,
                 lcp: options.showMetrics?.lcp ?? true,
+                cls: options.showMetrics?.cls ?? true,
+                inp: options.showMetrics?.inp ?? true,
                 pageSize: options.showMetrics?.pageSize ?? true,
             },
             showScreenshot: options.showScreenshot ?? true,
@@ -109,30 +142,23 @@ export class GlobalDevBar {
             showTooltips: options.showTooltips ?? true,
             sizeOverrides: options.sizeOverrides,
         };
+        this.debug.lifecycle('GlobalDevBar constructed', { options: this.options });
     }
     /**
-     * Get tooltip class name(s) if tooltips are enabled, otherwise empty string
+     * Get current error, warning, and info counts from the log array
      */
-    tooltipClass(direction = 'left', ...additionalClasses) {
-        if (!this.options.showTooltips) {
-            return additionalClasses.join(' ');
-        }
-        return ['devbar-tooltip', `devbar-tooltip-${direction}`, ...additionalClasses].join(' ');
+    getLogCounts() {
+        return {
+            errorCount: consoleCapture.getErrorCount(),
+            warningCount: consoleCapture.getWarningCount(),
+            infoCount: consoleCapture.getInfoCount(),
+        };
     }
     /**
-     * Get current error and warning counts from the log array
+     * Reset position style properties on an element to clear stale values
      */
-    getLogCounts() {
-        const logs = earlyConsoleCapture.logs;
-        let errorCount = 0;
-        let warningCount = 0;
-        for (const log of logs) {
-            if (log.level === 'error')
-                errorCount++;
-            else if (log.level === 'warn')
-                warningCount++;
-        }
-        return { errorCount, warningCount };
+    resetPositionStyles(element) {
+        Object.assign(element.style, { top: '', bottom: '', left: '', right: '', transform: '' });
     }
     /**
      * Create a collapsed count badge (used for error/warning counts in minimized state)
@@ -153,7 +179,7 @@ export class GlobalDevBar {
             fontWeight: '600',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
         });
         badge.textContent = count > 99 ? '!' : String(count);
         return badge;
@@ -166,7 +192,7 @@ export class GlobalDevBar {
      */
     static registerControl(control) {
         // Remove existing control with same ID
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== control.id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== control.id);
         GlobalDevBar.customControls.push(control);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
@@ -178,7 +204,7 @@ export class GlobalDevBar {
      * Unregister a custom control by ID
      */
     static unregisterControl(id) {
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== id);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
         if (instance) {
@@ -209,25 +235,45 @@ export class GlobalDevBar {
             return;
         if (this.destroyed)
             return;
-        // Inject tooltip styles
+        this.debug.lifecycle('Initializing DevBar');
+        // Inject animation and utility CSS
         this.injectStyles();
-        // Copy early captured logs
-        this.consoleLogs = [...earlyConsoleCapture.logs];
+        // Copy captured logs
+        this.consoleLogs = consoleCapture.getLogs();
+        this.debug.lifecycle('Copied console logs', { count: this.consoleLogs.length });
+        // Subscribe to log changes for real-time badge updates
+        this.logChangeListener = () => {
+            this.consoleLogs = consoleCapture.getLogs();
+            this.render();
+        };
+        consoleCapture.addListener(this.logChangeListener);
+        // Setup theme
+        setupTheme(this);
+        // Load compact mode from storage
+        loadCompactMode(this);
         // Setup WebSocket connection
         this.connectWebSocket();
         // Setup breakpoint detection
-        this.setupBreakpointDetection();
+        setupBreakpointDetection(this);
         // Setup performance monitoring
-        this.setupPerformanceMonitoring();
+        setupPerformanceMonitoring(this);
         // Setup keyboard shortcuts
-        this.setupKeyboardShortcuts();
+        setupKeyboardShortcuts(this);
         // Initial render
         this.render();
+        this.debug.lifecycle('DevBar initialized successfully');
+    }
+    /**
+     * Get the current position
+     */
+    getPosition() {
+        return this.options.position;
     }
     /**
      * Destroy the devbar and cleanup
      */
     destroy() {
+        this.debug.lifecycle('Destroying DevBar');
         this.destroyed = true;
         // Close WebSocket
         this.reconnectAttempts = MAX_RECONNECT_ATTEMPTS; // Prevent reconnection
@@ -256,13 +302,21 @@ export class GlobalDevBar {
             this.fcpObserver.disconnect();
         if (this.lcpObserver)
             this.lcpObserver.disconnect();
-        // Restore console
-        if (earlyConsoleCapture.originalConsole) {
-            console.log = earlyConsoleCapture.originalConsole.log;
-            console.error = earlyConsoleCapture.originalConsole.error;
-            console.warn = earlyConsoleCapture.originalConsole.warn;
-            console.info = earlyConsoleCapture.originalConsole.info;
+        if (this.clsObserver)
+            this.clsObserver.disconnect();
+        if (this.inpObserver)
+            this.inpObserver.disconnect();
+        // Remove theme media listener
+        if (this.themeMediaQuery && this.themeMediaHandler) {
+            this.themeMediaQuery.removeEventListener('change', this.themeMediaHandler);
+        }
+        // Remove log change listener
+        if (this.logChangeListener) {
+            consoleCapture.removeListener(this.logChangeListener);
+            this.logChangeListener = null;
         }
+        // Restore console
+        consoleCapture.stop();
         // Remove DOM elements
         if (this.container) {
             this.container.remove();
@@ -272,1654 +326,90 @@ export class GlobalDevBar {
             this.overlayElement.remove();
             this.overlayElement = null;
         }
+        this.debug.lifecycle('DevBar destroyed');
     }
     injectStyles() {
-        const styleId = 'devbar-tooltip-styles';
+        const styleId = 'devbar-styles';
         if (!document.getElementById(styleId)) {
             const style = document.createElement('style');
             style.id = styleId;
-            style.textContent = TOOLTIP_STYLES;
+            style.textContent = DEVBAR_STYLES;
             document.head.appendChild(style);
         }
     }
-    connectWebSocket() {
-        if (this.destroyed)
-            return;
-        const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
-        this.ws = ws;
-        ws.onopen = () => {
-            this.sweetlinkConnected = true;
-            this.reconnectAttempts = 0;
-            ws.send(JSON.stringify({ type: 'browser-client-ready' }));
-            this.render();
-        };
-        ws.onmessage = async (event) => {
-            try {
-                const command = JSON.parse(event.data);
-                await this.handleSweetlinkCommand(command);
-            }
-            catch (e) {
-                console.error('[GlobalDevBar] Error handling command:', e);
-            }
-        };
-        ws.onclose = () => {
-            this.sweetlinkConnected = false;
-            this.render();
-            // Auto-reconnect with exponential backoff
-            if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                const delayMs = BASE_RECONNECT_DELAY_MS * Math.pow(2, this.reconnectAttempts);
-                this.reconnectAttempts++;
-                this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
-            }
-        };
-        ws.onerror = () => {
-            // Error will trigger onclose, which handles reconnection
-        };
+    // Delegate to module functions, binding `this` as state
+    connectWebSocket(port) {
+        connectWebSocket(this, port);
     }
-    async handleSweetlinkCommand(command) {
-        const ws = this.ws;
-        if (!ws || ws.readyState !== WebSocket.OPEN)
-            return;
-        switch (command.type) {
-            case 'screenshot': {
-                const targetElement = command.selector
-                    ? document.querySelector(command.selector) || document.body
-                    : document.body;
-                const canvas = await html2canvas(targetElement, { logging: false, useCORS: true, allowTaint: true });
-                ws.send(JSON.stringify({
-                    success: true,
-                    data: { screenshot: canvas.toDataURL('image/png'), width: canvas.width, height: canvas.height, selector: command.selector || 'body' },
-                    timestamp: Date.now()
-                }));
-                break;
-            }
-            case 'get-logs': {
-                let logs = this.consoleLogs;
-                if (command.filter) {
-                    const filter = command.filter.toLowerCase();
-                    logs = logs.filter(log => log.level.includes(filter) || log.message.toLowerCase().includes(filter));
-                }
-                ws.send(JSON.stringify({ success: true, data: logs, timestamp: Date.now() }));
-                break;
-            }
-            case 'query-dom': {
-                if (command.selector) {
-                    const elements = Array.from(document.querySelectorAll(command.selector));
-                    const results = elements.map((el) => {
-                        if (command.property)
-                            return el[command.property] ?? null;
-                        return { tagName: el.tagName, className: el.className, id: el.id, textContent: el.textContent?.trim().slice(0, 100) };
-                    });
-                    ws.send(JSON.stringify({ success: true, data: { count: results.length, results }, timestamp: Date.now() }));
-                }
-                break;
-            }
-            case 'exec-js': {
-                if (command.code) {
-                    try {
-                        // Use indirect eval to avoid strict mode issues
-                        const indirectEval = eval;
-                        const result = indirectEval(command.code);
-                        ws.send(JSON.stringify({ success: true, data: result, timestamp: Date.now() }));
-                    }
-                    catch (e) {
-                        ws.send(JSON.stringify({ success: false, error: e instanceof Error ? e.message : 'Execution failed', timestamp: Date.now() }));
-                    }
-                }
-                break;
-            }
-            case 'screenshot-saved':
-                this.handleNotification('screenshot', command.path, SCREENSHOT_NOTIFICATION_MS);
-                break;
-            case 'design-review-saved':
-                this.designReviewInProgress = false;
-                this.handleNotification('designReview', command.reviewPath, DESIGN_REVIEW_NOTIFICATION_MS);
-                break;
-            case 'design-review-error':
-                this.designReviewInProgress = false;
-                this.designReviewError = command.error || 'Unknown error';
-                console.error('[GlobalDevBar] Design review failed:', command.error);
-                // Clear error after notification duration
-                if (this.designReviewErrorTimeout)
-                    clearTimeout(this.designReviewErrorTimeout);
-                this.designReviewErrorTimeout = setTimeout(() => {
-                    this.designReviewError = null;
-                    this.render();
-                }, DESIGN_REVIEW_NOTIFICATION_MS);
-                this.render();
-                break;
-            case 'api-key-status': {
-                // Properties are at top level of the response
-                const response = command;
-                this.apiKeyStatus = {
-                    configured: response.configured ?? false,
-                    maskedKey: response.maskedKey,
-                    model: response.model,
-                    pricing: response.pricing,
-                };
-                // Re-render to update the confirmation modal
-                this.render();
-                break;
-            }
-            case 'outline-saved':
-                this.handleNotification('outline', command.outlinePath, SCREENSHOT_NOTIFICATION_MS);
-                break;
-            case 'outline-error':
-                console.error('[GlobalDevBar] Outline save failed:', command.error);
-                break;
-            case 'schema-saved':
-                this.handleNotification('schema', command.schemaPath, SCREENSHOT_NOTIFICATION_MS);
-                break;
-            case 'schema-error':
-                console.error('[GlobalDevBar] Schema save failed:', command.error);
-                break;
-        }
-    }
-    /**
-     * Handle notification state updates with auto-clear timeout
-     */
     handleNotification(type, path, durationMs) {
-        if (!path)
-            return;
-        // Update the appropriate state
-        switch (type) {
-            case 'screenshot':
-                this.lastScreenshot = path;
-                if (this.screenshotTimeout)
-                    clearTimeout(this.screenshotTimeout);
-                this.screenshotTimeout = setTimeout(() => { this.lastScreenshot = null; this.render(); }, durationMs);
-                break;
-            case 'designReview':
-                this.lastDesignReview = path;
-                if (this.designReviewTimeout)
-                    clearTimeout(this.designReviewTimeout);
-                this.designReviewTimeout = setTimeout(() => { this.lastDesignReview = null; this.render(); }, durationMs);
-                break;
-            case 'outline':
-                this.lastOutline = path;
-                if (this.outlineTimeout)
-                    clearTimeout(this.outlineTimeout);
-                this.outlineTimeout = setTimeout(() => { this.lastOutline = null; this.render(); }, durationMs);
-                break;
-            case 'schema':
-                this.lastSchema = path;
-                if (this.schemaTimeout)
-                    clearTimeout(this.schemaTimeout);
-                this.schemaTimeout = setTimeout(() => { this.lastSchema = null; this.render(); }, durationMs);
-                break;
-        }
-        this.render();
-    }
-    setupBreakpointDetection() {
-        const updateBreakpointInfo = () => {
-            const width = window.innerWidth;
-            const height = window.innerHeight;
-            // Determine breakpoint by checking thresholds in descending order
-            let tailwindBreakpoint = 'base';
-            if (width >= TAILWIND_BREAKPOINTS['2xl'].min)
-                tailwindBreakpoint = '2xl';
-            else if (width >= TAILWIND_BREAKPOINTS.xl.min)
-                tailwindBreakpoint = 'xl';
-            else if (width >= TAILWIND_BREAKPOINTS.lg.min)
-                tailwindBreakpoint = 'lg';
-            else if (width >= TAILWIND_BREAKPOINTS.md.min)
-                tailwindBreakpoint = 'md';
-            else if (width >= TAILWIND_BREAKPOINTS.sm.min)
-                tailwindBreakpoint = 'sm';
-            this.breakpointInfo = {
-                tailwindBreakpoint,
-                dimensions: `${width}x${height}`
-            };
-            this.render();
-        };
-        updateBreakpointInfo();
-        this.resizeHandler = updateBreakpointInfo;
-        window.addEventListener('resize', this.resizeHandler);
-    }
-    setupPerformanceMonitoring() {
-        const updatePerfStats = () => {
-            // FCP
-            const paintEntries = performance.getEntriesByType('paint');
-            const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
-            const fcp = fcpEntry ? `${Math.round(fcpEntry.startTime)}ms` : '-';
-            // LCP (from cached value, updated by observer)
-            const lcp = this.lcpValue !== null ? `${Math.round(this.lcpValue)}ms` : '-';
-            // Total Resource Size
-            const resources = performance.getEntriesByType('resource');
-            let totalBytes = 0;
-            const navEntry = performance.getEntriesByType('navigation')[0];
-            if (navEntry) {
-                totalBytes += navEntry.transferSize || 0;
-            }
-            resources.forEach((entry) => {
-                const resourceEntry = entry;
-                totalBytes += resourceEntry.transferSize || 0;
-            });
-            const totalSize = totalBytes > 1024 * 1024
-                ? `${(totalBytes / (1024 * 1024)).toFixed(1)} MB`
-                : `${Math.round(totalBytes / 1024)} KB`;
-            this.perfStats = { fcp, lcp, totalSize };
-            this.render();
-        };
-        if (document.readyState === 'complete') {
-            setTimeout(updatePerfStats, 100);
-        }
-        else {
-            window.addEventListener('load', () => setTimeout(updatePerfStats, 100));
-        }
-        // FCP Observer
-        try {
-            this.fcpObserver = new PerformanceObserver((list) => {
-                const entries = list.getEntries();
-                entries.forEach((entry) => {
-                    if (entry.name === 'first-contentful-paint') {
-                        updatePerfStats();
-                    }
-                });
-            });
-            this.fcpObserver.observe({ type: 'paint', buffered: true });
-        }
-        catch (e) {
-            console.warn('[GlobalDevBar] FCP PerformanceObserver not supported', e);
-        }
-        // LCP Observer
-        try {
-            this.lcpObserver = new PerformanceObserver((list) => {
-                const entries = list.getEntries();
-                const lastEntry = entries[entries.length - 1];
-                if (lastEntry) {
-                    this.lcpValue = lastEntry.startTime;
-                    updatePerfStats();
-                }
-            });
-            this.lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });
-        }
-        catch (e) {
-            console.warn('[GlobalDevBar] LCP PerformanceObserver not supported', e);
-        }
-    }
-    setupKeyboardShortcuts() {
-        this.keydownHandler = (e) => {
-            // Close modals on Escape
-            if (e.key === 'Escape') {
-                if (this.consoleFilter || this.showOutlineModal || this.showSchemaModal || this.showDesignReviewConfirm) {
-                    this.consoleFilter = null;
-                    this.showOutlineModal = false;
-                    this.showSchemaModal = false;
-                    this.showDesignReviewConfirm = false;
-                    this.render();
-                    return;
-                }
-            }
-            if ((e.ctrlKey || e.metaKey) && e.shiftKey) {
-                if (e.key === 'S' || e.key === 's') {
-                    e.preventDefault();
-                    if (this.sweetlinkConnected && !this.capturing) {
-                        this.handleScreenshot(false);
-                    }
-                }
-                else if (e.key === 'C' || e.key === 'c') {
-                    const selection = window.getSelection();
-                    if (!selection || selection.toString().length === 0) {
-                        e.preventDefault();
-                        if (!this.capturing) {
-                            this.handleScreenshot(true);
-                        }
-                    }
-                }
-            }
-        };
-        window.addEventListener('keydown', this.keydownHandler);
-    }
-    async copyPathToClipboard(path) {
-        try {
-            await navigator.clipboard.writeText(path);
-            this.copiedPath = true;
-            if (this.copiedPathTimeout)
-                clearTimeout(this.copiedPathTimeout);
-            this.copiedPathTimeout = setTimeout(() => {
-                this.copiedPath = false;
-                this.render();
-            }, CLIPBOARD_NOTIFICATION_MS);
-            this.render();
-        }
-        catch (error) {
-            console.error('[GlobalDevBar] Failed to copy path:', error);
-        }
-    }
-    async handleScreenshot(copyToClipboard = false) {
-        if (this.capturing)
-            return;
-        if (!copyToClipboard && !this.sweetlinkConnected)
-            return;
-        let cleanup = null;
-        try {
-            this.capturing = true;
-            this.render();
-            cleanup = prepareForCapture();
-            await delay(SCREENSHOT_BLUR_DELAY_MS);
-            const canvas = await html2canvas(document.body, {
-                logging: false,
-                useCORS: true,
-                allowTaint: true,
-                scale: SCREENSHOT_SCALE,
-                width: window.innerWidth,
-                windowWidth: window.innerWidth
-            });
-            // Restore page state
-            cleanup();
-            cleanup = null;
-            if (copyToClipboard) {
-                try {
-                    await copyCanvasToClipboard(canvas);
-                    this.copiedToClipboard = true;
-                    this.render();
-                    if (this.screenshotTimeout)
-                        clearTimeout(this.screenshotTimeout);
-                    this.screenshotTimeout = setTimeout(() => {
-                        this.copiedToClipboard = false;
-                        this.render();
-                    }, CLIPBOARD_NOTIFICATION_MS);
-                }
-                catch (e) {
-                    console.error('[GlobalDevBar] Failed to copy to clipboard:', e);
-                }
-            }
-            else {
-                const dataUrl = canvasToDataUrl(canvas, { format: 'jpeg', quality: DEVBAR_SCREENSHOT_QUALITY });
-                if (this.ws?.readyState === WebSocket.OPEN) {
-                    this.ws.send(JSON.stringify({
-                        type: 'save-screenshot',
-                        data: {
-                            screenshot: dataUrl,
-                            width: canvas.width,
-                            height: canvas.height,
-                            logs: this.consoleLogs,
-                            url: window.location.href,
-                            timestamp: Date.now()
-                        }
-                    }));
-                }
-            }
-        }
-        catch (e) {
-            console.error('[GlobalDevBar] Screenshot failed:', e);
-            if (cleanup)
-                cleanup();
-        }
-        finally {
-            this.capturing = false;
-            this.render();
-        }
-    }
-    async handleDesignReview() {
-        if (this.designReviewInProgress || !this.sweetlinkConnected)
-            return;
-        let cleanup = null;
-        try {
-            this.designReviewInProgress = true;
-            this.designReviewError = null; // Clear any previous error
-            if (this.designReviewErrorTimeout) {
-                clearTimeout(this.designReviewErrorTimeout);
-                this.designReviewErrorTimeout = null;
-            }
-            this.render();
-            cleanup = prepareForCapture();
-            await delay(SCREENSHOT_BLUR_DELAY_MS);
-            const canvas = await html2canvas(document.body, {
-                logging: false,
-                useCORS: true,
-                allowTaint: true,
-                scale: 1, // Full quality for design review
-                width: window.innerWidth,
-                windowWidth: window.innerWidth
-            });
-            // Restore page state
-            cleanup();
-            cleanup = null;
-            const dataUrl = canvasToDataUrl(canvas, { format: 'png' });
-            if (this.ws?.readyState === WebSocket.OPEN) {
-                this.ws.send(JSON.stringify({
-                    type: 'design-review-screenshot',
-                    data: {
-                        screenshot: dataUrl,
-                        width: canvas.width,
-                        height: canvas.height,
-                        logs: this.consoleLogs,
-                        url: window.location.href,
-                        timestamp: Date.now()
-                    }
-                }));
-            }
-        }
-        catch (e) {
-            console.error('[GlobalDevBar] Design review failed:', e);
-            if (cleanup)
-                cleanup();
-            this.designReviewInProgress = false;
-            this.render();
-        }
+        handleNotification(this, type, path, durationMs);
     }
     /**
-     * Show the design review confirmation modal
-     * Checks API key status first
+     * Apply settings to the DevBar state and options
      */
-    showDesignReviewConfirmation() {
-        if (!this.sweetlinkConnected)
-            return;
-        // Request API key status from server
-        if (this.ws?.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify({ type: 'check-api-key' }));
-        }
-        // Show the confirmation modal
-        this.showDesignReviewConfirm = true;
-        this.showOutlineModal = false;
-        this.showSchemaModal = false;
-        this.consoleFilter = null;
+    applySettings(settings) {
+        // Update local state
+        this.themeMode = settings.themeMode;
+        this.compactMode = settings.compactMode;
+        // Update options
+        this.options.position = settings.position;
+        this.options.accentColor = settings.accentColor;
+        this.options.showScreenshot = settings.showScreenshot;
+        this.options.showConsoleBadges = settings.showConsoleBadges;
+        this.options.showTooltips = settings.showTooltips;
+        this.options.showMetrics = { ...settings.showMetrics };
+        // Re-render with new settings
         this.render();
     }
-    /**
-     * Calculate estimated cost for design review based on viewport size
-     */
-    calculateCostEstimate() {
-        if (!this.apiKeyStatus?.pricing)
-            return null;
-        // Image token estimation for Claude Vision:
-        // Images are resized to fit within a bounding box, then tokenized
-        // Rough estimate: ~1 token per 1.5x1.5 pixels, or (width * height) / 750
-        const width = window.innerWidth;
-        const height = window.innerHeight;
-        const imageTokens = Math.ceil((width * height) / 750);
-        // Prompt is ~500 tokens, output up to 2048 tokens
-        const promptTokens = 500;
-        const estimatedOutputTokens = 1500; // Conservative estimate
-        const totalInputTokens = imageTokens + promptTokens;
-        const { input: inputPrice, output: outputPrice } = this.apiKeyStatus.pricing;
-        const inputCost = (totalInputTokens / 1000000) * inputPrice;
-        const outputCost = (estimatedOutputTokens / 1000000) * outputPrice;
-        const totalCost = inputCost + outputCost;
-        return {
-            tokens: totalInputTokens + estimatedOutputTokens,
-            cost: totalCost < 0.01 ? '<$0.01' : `~$${totalCost.toFixed(2)}`,
-        };
-    }
-    /**
-     * Close the design review confirmation modal
-     */
-    closeDesignReviewConfirm() {
-        this.showDesignReviewConfirm = false;
-        this.apiKeyStatus = null; // Reset so it's re-fetched next time
-        this.render();
-    }
-    /**
-     * Proceed with design review after confirmation
-     */
-    proceedWithDesignReview() {
-        this.showDesignReviewConfirm = false;
-        this.handleDesignReview();
-    }
-    handleDocumentOutline() {
-        // Toggle outline modal
-        this.showOutlineModal = !this.showOutlineModal;
-        this.showSchemaModal = false;
-        this.consoleFilter = null;
-        this.render();
-    }
-    handlePageSchema() {
-        // Toggle schema modal
-        this.showSchemaModal = !this.showSchemaModal;
-        this.showOutlineModal = false;
-        this.consoleFilter = null;
-        this.render();
-    }
-    handleSaveOutline() {
-        const outline = extractDocumentOutline();
-        const markdown = outlineToMarkdown(outline);
-        if (this.ws?.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify({
-                type: 'save-outline',
-                data: {
-                    outline,
-                    markdown,
-                    url: window.location.href,
-                    title: document.title,
-                    timestamp: Date.now()
-                }
-            }));
-        }
-    }
-    handleSaveSchema() {
-        const schema = extractPageSchema();
-        const markdown = schemaToMarkdown(schema);
-        if (this.ws?.readyState === WebSocket.OPEN) {
-            this.ws.send(JSON.stringify({
-                type: 'save-schema',
-                data: {
-                    schema,
-                    markdown,
-                    url: window.location.href,
-                    title: document.title,
-                    timestamp: Date.now()
-                }
-            }));
-        }
-    }
     clearConsoleLogs() {
-        // Clear the logs array
-        earlyConsoleCapture.logs = [];
-        earlyConsoleCapture.errorCount = 0;
-        earlyConsoleCapture.warningCount = 0;
+        consoleCapture.clear();
         this.consoleLogs = [];
         this.consoleFilter = null;
         this.render();
     }
-    // ============================================================================
-    // Render Methods (Using Safe DOM Methods)
-    // ============================================================================
-    render() {
-        if (this.destroyed)
-            return;
-        if (typeof document === 'undefined')
-            return;
-        // Remove existing container if any
-        if (this.container) {
-            this.container.remove();
-        }
-        // Create new container
-        this.container = document.createElement('div');
-        this.container.setAttribute('data-devbar', 'true');
-        if (this.collapsed) {
-            this.renderCollapsed();
-        }
-        else {
-            this.renderExpanded();
-        }
-        document.body.appendChild(this.container);
-        // Render overlays/modals
-        this.renderOverlays();
-    }
-    renderOverlays() {
-        // Remove existing overlay
-        if (this.overlayElement) {
-            this.overlayElement.remove();
-            this.overlayElement = null;
-        }
-        // Render console popup if filter is active
-        if (this.consoleFilter) {
-            this.renderConsolePopup();
-        }
-        // Render outline modal
-        if (this.showOutlineModal) {
-            this.renderOutlineModal();
-        }
-        // Render schema modal
-        if (this.showSchemaModal) {
-            this.renderSchemaModal();
-        }
-        // Render design review confirmation modal
-        if (this.showDesignReviewConfirm) {
-            this.renderDesignReviewConfirmModal();
-        }
-    }
-    renderDesignReviewConfirmModal() {
-        const color = BUTTON_COLORS.review;
-        const closeModal = () => this.closeDesignReviewConfirm();
-        const overlay = createModalOverlay(closeModal);
-        // Override z-index for this modal to be above others
-        overlay.style.zIndex = '10003';
-        const modal = createModalBox(color);
-        modal.style.maxWidth = '450px';
-        // Header with title and close button
-        const header = document.createElement('div');
-        Object.assign(header.style, {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '14px 18px',
-            borderBottom: `1px solid ${color}40`,
-            backgroundColor: `${color}15`,
-        });
-        const title = document.createElement('span');
-        Object.assign(title.style, { color, fontSize: '0.875rem', fontWeight: '600' });
-        title.textContent = 'AI Design Review';
-        header.appendChild(title);
-        const closeBtn = createStyledButton({ color: COLORS.textMuted, text: '×', padding: '0', fontSize: '1.25rem' });
-        closeBtn.style.border = 'none';
-        closeBtn.onclick = closeModal;
-        header.appendChild(closeBtn);
-        modal.appendChild(header);
-        // Content
-        const content = document.createElement('div');
-        Object.assign(content.style, {
-            padding: '18px',
-            color: COLORS.text,
-            fontSize: '0.8125rem',
-            lineHeight: '1.6',
-        });
-        if (this.apiKeyStatus === null) {
-            content.appendChild(createEmptyMessage('Checking API key configuration...'));
-        }
-        else if (!this.apiKeyStatus.configured) {
-            content.appendChild(this.renderApiKeyNotConfiguredContent());
-        }
-        else {
-            content.appendChild(this.renderApiKeyConfiguredContent());
-        }
-        modal.appendChild(content);
-        // Footer with buttons
-        const footer = document.createElement('div');
-        Object.assign(footer.style, {
-            display: 'flex',
-            justifyContent: 'flex-end',
-            gap: '10px',
-            padding: '14px 18px',
-            borderTop: `1px solid ${COLORS.border}`,
-        });
-        const cancelBtn = createStyledButton({ color: COLORS.textMuted, text: 'Cancel', padding: '8px 16px' });
-        cancelBtn.onclick = closeModal;
-        footer.appendChild(cancelBtn);
-        if (this.apiKeyStatus?.configured) {
-            const proceedBtn = createStyledButton({ color, text: 'Run Review', padding: '8px 16px' });
-            proceedBtn.style.backgroundColor = `${color}20`;
-            proceedBtn.onclick = () => this.proceedWithDesignReview();
-            footer.appendChild(proceedBtn);
-        }
-        modal.appendChild(footer);
-        overlay.appendChild(modal);
-        document.body.appendChild(overlay);
-    }
-    /**
-     * Render content when API key is not configured
-     */
-    renderApiKeyNotConfiguredContent() {
-        const wrapper = document.createElement('div');
-        wrapper.appendChild(createInfoBox(COLORS.error, 'API Key Not Configured', 'The ANTHROPIC_API_KEY environment variable is not set.'));
-        // Instructions
-        const instructions = document.createElement('div');
-        Object.assign(instructions.style, { marginBottom: '12px' });
-        const instructTitle = document.createElement('div');
-        Object.assign(instructTitle.style, { color: COLORS.textSecondary, fontWeight: '600', marginBottom: '8px' });
-        instructTitle.textContent = 'To configure:';
-        instructions.appendChild(instructTitle);
-        const steps = [
-            { text: '1. Get an API key from console.anthropic.com', highlight: false },
-            { text: '2. Add to your .env file:', highlight: false },
-            { text: '   ANTHROPIC_API_KEY=sk-ant-...', highlight: true },
-            { text: '3. Restart your dev server', highlight: false },
-        ];
-        steps.forEach(({ text, highlight }) => {
-            const stepDiv = document.createElement('div');
-            Object.assign(stepDiv.style, {
-                color: highlight ? COLORS.primary : COLORS.textMuted,
-                fontSize: '0.75rem',
-                marginBottom: '4px',
-                fontFamily: FONT_MONO,
-            });
-            stepDiv.textContent = text;
-            instructions.appendChild(stepDiv);
-        });
-        wrapper.appendChild(instructions);
-        return wrapper;
-    }
-    /**
-     * Render content when API key is configured (cost estimate and model info)
-     */
-    renderApiKeyConfiguredContent() {
-        const wrapper = document.createElement('div');
-        Object.assign(wrapper.style, { marginBottom: '16px' });
-        const desc = document.createElement('p');
-        Object.assign(desc.style, { color: COLORS.textSecondary, marginBottom: '12px' });
-        desc.textContent = 'This will capture a screenshot and send it to Claude for design analysis.';
-        wrapper.appendChild(desc);
-        // Cost estimate
-        const estimate = this.calculateCostEstimate();
-        if (estimate) {
-            const costBox = createInfoBox(COLORS.primary, 'Estimated Cost', []);
-            // Remove default margin and adjust padding
-            costBox.style.marginBottom = '0';
-            costBox.style.padding = '12px';
-            const costDetails = document.createElement('div');
-            Object.assign(costDetails.style, {
-                display: 'flex',
-                justifyContent: 'space-between',
-                color: COLORS.textSecondary,
-                fontSize: '0.75rem',
-            });
-            const tokensSpan = document.createElement('span');
-            tokensSpan.textContent = `~${estimate.tokens.toLocaleString()} tokens`;
-            costDetails.appendChild(tokensSpan);
-            const priceSpan = document.createElement('span');
-            Object.assign(priceSpan.style, { color: COLORS.warning, fontWeight: '600' });
-            priceSpan.textContent = estimate.cost;
-            costDetails.appendChild(priceSpan);
-            costBox.appendChild(costDetails);
-            wrapper.appendChild(costBox);
-        }
-        // Model info
-        if (this.apiKeyStatus?.model) {
-            const modelDiv = document.createElement('div');
-            Object.assign(modelDiv.style, { color: COLORS.textMuted, fontSize: '0.6875rem', marginTop: '12px' });
-            modelDiv.textContent = `Model: ${this.apiKeyStatus.model}`;
-            if (this.apiKeyStatus.maskedKey) {
-                modelDiv.textContent += ` | Key: ${this.apiKeyStatus.maskedKey}`;
-            }
-            wrapper.appendChild(modelDiv);
-        }
-        return wrapper;
-    }
-    renderConsolePopup() {
-        const filterType = this.consoleFilter;
-        if (!filterType)
-            return;
-        const logs = earlyConsoleCapture.logs.filter(log => log.level === filterType);
-        const color = filterType === 'error' ? BUTTON_COLORS.error : BUTTON_COLORS.warning;
-        const label = filterType === 'error' ? 'Errors' : 'Warnings';
-        const popup = document.createElement('div');
-        popup.setAttribute('data-devbar', 'true');
-        Object.assign(popup.style, {
-            position: 'fixed',
-            bottom: '60px',
-            left: '80px',
-            zIndex: '10002',
-            backgroundColor: 'rgba(17, 24, 39, 0.98)',
-            border: `1px solid ${color}`,
-            borderRadius: '8px',
-            boxShadow: `0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px ${color}33`,
-            backdropFilter: 'blur(8px)',
-            WebkitBackdropFilter: 'blur(8px)',
-            minWidth: '400px',
-            maxWidth: '600px',
-            maxHeight: '400px',
-            display: 'flex',
-            flexDirection: 'column',
-            fontFamily: FONT_MONO,
-        });
-        // Header
-        const header = document.createElement('div');
-        Object.assign(header.style, {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            padding: '10px 14px',
-            borderBottom: `1px solid ${color}40`,
-        });
-        const title = document.createElement('span');
-        Object.assign(title.style, { color, fontSize: '0.8125rem', fontWeight: '600' });
-        title.textContent = `Console ${label} (${logs.length})`;
-        header.appendChild(title);
-        const headerButtons = document.createElement('div');
-        Object.assign(headerButtons.style, { display: 'flex', gap: '8px' });
-        // Clear button
-        const clearBtn = createStyledButton({
-            color,
-            text: 'Clear All',
-            padding: '4px 10px',
-            borderRadius: '4px',
-            fontSize: '0.6875rem',
-        });
-        clearBtn.onclick = () => this.clearConsoleLogs();
-        headerButtons.appendChild(clearBtn);
-        // Close button - match Clear button padding for consistent height
-        const closeBtn = createStyledButton({
-            color,
-            text: '×',
-            padding: '4px 8px',
-            borderRadius: '4px',
-            fontSize: '0.75rem',
-        });
-        closeBtn.onclick = () => {
-            this.consoleFilter = null;
-            this.render();
-        };
-        headerButtons.appendChild(closeBtn);
-        header.appendChild(headerButtons);
-        popup.appendChild(header);
-        // Content
-        const content = document.createElement('div');
-        Object.assign(content.style, { flex: '1', overflow: 'auto', padding: '8px 0' });
-        if (logs.length === 0) {
-            const emptyMsg = document.createElement('div');
-            Object.assign(emptyMsg.style, {
-                padding: '20px',
-                textAlign: 'center',
-                color: COLORS.textMuted,
-                fontSize: '0.75rem',
-            });
-            emptyMsg.textContent = `No ${filterType}s recorded`;
-            content.appendChild(emptyMsg);
-        }
-        else {
-            this.renderConsoleLogs(content, logs, color);
-        }
-        popup.appendChild(content);
-        this.overlayElement = popup;
-        document.body.appendChild(popup);
+    handleScreenshot(copyToClipboard) {
+        return moduleHandleScreenshot(this, copyToClipboard);
     }
     /**
-     * Render console log items into a container
+     * Get the current theme mode
      */
-    renderConsoleLogs(container, logs, color) {
-        logs.forEach((log, index) => {
-            const logItem = document.createElement('div');
-            Object.assign(logItem.style, {
-                padding: '8px 14px',
-                borderBottom: index < logs.length - 1 ? '1px solid rgba(255, 255, 255, 0.05)' : 'none',
-            });
-            const timestamp = document.createElement('span');
-            Object.assign(timestamp.style, {
-                color: COLORS.textMuted,
-                fontSize: '0.625rem',
-                marginRight: '8px',
-            });
-            timestamp.textContent = new Date(log.timestamp).toLocaleTimeString();
-            logItem.appendChild(timestamp);
-            const message = document.createElement('span');
-            Object.assign(message.style, {
-                color,
-                fontSize: '0.6875rem',
-                wordBreak: 'break-word',
-                whiteSpace: 'pre-wrap',
-            });
-            message.textContent = log.message.length > 500 ? log.message.slice(0, 500) + '...' : log.message;
-            logItem.appendChild(message);
-            container.appendChild(logItem);
-        });
-    }
-    renderOutlineModal() {
-        const outline = extractDocumentOutline();
-        const color = BUTTON_COLORS.outline;
-        const closeModal = () => {
-            this.showOutlineModal = false;
-            this.render();
-        };
-        const overlay = createModalOverlay(closeModal);
-        const modal = createModalBox(color);
-        const header = createModalHeader({
-            color,
-            title: 'Document Outline',
-            onClose: closeModal,
-            onCopyMd: async () => {
-                const markdown = outlineToMarkdown(outline);
-                await navigator.clipboard.writeText(markdown);
-            },
-            onSave: () => this.handleSaveOutline(),
-            sweetlinkConnected: this.sweetlinkConnected,
-        });
-        modal.appendChild(header);
-        const content = createModalContent();
-        if (outline.length === 0) {
-            content.appendChild(createEmptyMessage('No semantic elements found in this document'));
-        }
-        else {
-            this.renderOutlineNodes(outline, content, 0);
-        }
-        modal.appendChild(content);
-        overlay.appendChild(modal);
-        this.overlayElement = overlay;
-        document.body.appendChild(overlay);
+    getThemeMode() {
+        return this.themeMode;
     }
     /**
-     * Recursively render outline nodes into a container element
+     * Set the theme mode
      */
-    renderOutlineNodes(nodes, parentEl, depth) {
-        for (const node of nodes) {
-            const nodeEl = document.createElement('div');
-            Object.assign(nodeEl.style, {
-                padding: `4px 0 4px ${depth * 16}px`,
-            });
-            const tagSpan = document.createElement('span');
-            const categoryColor = CATEGORY_COLORS[node.category || 'other'] || CATEGORY_COLORS.other;
-            Object.assign(tagSpan.style, {
-                color: categoryColor,
-                fontSize: '0.6875rem',
-                fontWeight: '500',
-            });
-            tagSpan.textContent = `<${node.tagName}>`;
-            nodeEl.appendChild(tagSpan);
-            if (node.category) {
-                const categorySpan = document.createElement('span');
-                Object.assign(categorySpan.style, {
-                    color: COLORS.textMuted,
-                    fontSize: '0.625rem',
-                    marginLeft: '6px',
-                });
-                categorySpan.textContent = `[${node.category}]`;
-                nodeEl.appendChild(categorySpan);
-            }
-            const textSpan = document.createElement('span');
-            Object.assign(textSpan.style, {
-                color: '#d1d5db',
-                fontSize: '0.6875rem',
-                marginLeft: '8px',
-            });
-            const truncatedText = node.text.length > 60 ? node.text.slice(0, 60) + '...' : node.text;
-            textSpan.textContent = truncatedText;
-            nodeEl.appendChild(textSpan);
-            if (node.id) {
-                const idSpan = document.createElement('span');
-                Object.assign(idSpan.style, {
-                    color: '#9ca3af',
-                    fontSize: '0.625rem',
-                    marginLeft: '6px',
-                });
-                idSpan.textContent = `#${node.id}`;
-                nodeEl.appendChild(idSpan);
-            }
-            parentEl.appendChild(nodeEl);
-            if (node.children.length > 0) {
-                this.renderOutlineNodes(node.children, parentEl, depth + 1);
-            }
-        }
-    }
-    renderSchemaModal() {
-        const schema = extractPageSchema();
-        const color = BUTTON_COLORS.schema;
-        const closeModal = () => {
-            this.showSchemaModal = false;
-            this.render();
-        };
-        const overlay = createModalOverlay(closeModal);
-        const modal = createModalBox(color);
-        const header = createModalHeader({
-            color,
-            title: 'Page Schema',
-            onClose: closeModal,
-            onCopyMd: async () => {
-                const markdown = schemaToMarkdown(schema);
-                await navigator.clipboard.writeText(markdown);
-            },
-            onSave: () => this.handleSaveSchema(),
-            sweetlinkConnected: this.sweetlinkConnected,
-        });
-        modal.appendChild(header);
-        const content = createModalContent();
-        const hasContent = schema.jsonLd.length > 0 ||
-            Object.keys(schema.openGraph).length > 0 ||
-            Object.keys(schema.twitter).length > 0 ||
-            Object.keys(schema.metaTags).length > 0;
-        if (!hasContent) {
-            content.appendChild(createEmptyMessage('No structured data found on this page'));
-        }
-        else {
-            this.renderSchemaSection(content, 'JSON-LD', schema.jsonLd, color);
-            this.renderSchemaSection(content, 'Open Graph', schema.openGraph, COLORS.info);
-            this.renderSchemaSection(content, 'Twitter Cards', schema.twitter, COLORS.cyan);
-            this.renderSchemaSection(content, 'Meta Tags', schema.metaTags, COLORS.textMuted);
-        }
-        modal.appendChild(content);
-        overlay.appendChild(modal);
-        this.overlayElement = overlay;
-        document.body.appendChild(overlay);
+    setThemeMode(mode) {
+        moduleSetThemeMode(this, mode);
     }
     /**
-     * Render a section of schema data (either array or key-value object)
+     * Get the current effective theme colors
      */
-    renderSchemaSection(container, title, items, color) {
-        const isEmpty = Array.isArray(items) ? items.length === 0 : Object.keys(items).length === 0;
-        if (isEmpty)
-            return;
-        const section = document.createElement('div');
-        section.style.marginBottom = '20px';
-        const sectionTitle = document.createElement('h3');
-        Object.assign(sectionTitle.style, {
-            color,
-            fontSize: '0.8125rem',
-            fontWeight: '600',
-            marginBottom: '10px',
-            borderBottom: `1px solid ${color}40`,
-            paddingBottom: '6px',
-        });
-        sectionTitle.textContent = title;
-        section.appendChild(sectionTitle);
-        if (Array.isArray(items)) {
-            this.renderJsonLdItems(section, items);
-        }
-        else {
-            this.renderKeyValueItems(section, items);
-        }
-        container.appendChild(section);
-    }
-    /**
-     * Render JSON-LD items as formatted code blocks with syntax highlighting
-     */
-    renderJsonLdItems(container, items) {
-        items.forEach((item, i) => {
-            const itemEl = document.createElement('div');
-            itemEl.style.marginBottom = '10px';
-            const itemTitle = document.createElement('div');
-            Object.assign(itemTitle.style, {
-                color: '#9ca3af',
-                fontSize: '0.6875rem',
-                marginBottom: '4px',
-            });
-            itemTitle.textContent = `Schema ${i + 1}`;
-            itemEl.appendChild(itemTitle);
-            const codeEl = document.createElement('pre');
-            Object.assign(codeEl.style, {
-                backgroundColor: 'rgba(0, 0, 0, 0.3)',
-                borderRadius: '4px',
-                padding: '10px',
-                overflow: 'auto',
-                fontSize: '0.625rem',
-                margin: '0',
-                maxHeight: '300px', // Taller for more content
-            });
-            // Syntax highlight the JSON using DOM methods for safety
-            this.appendHighlightedJson(codeEl, JSON.stringify(item, null, 2));
-            itemEl.appendChild(codeEl);
-            container.appendChild(itemEl);
-        });
+    getColors() {
+        return getThemeColors(this.themeMode);
     }
     /**
-     * Append syntax-highlighted JSON to an element using safe DOM methods
-     * Uses textContent for all text to prevent XSS
+     * Toggle compact mode
      */
-    appendHighlightedJson(container, json) {
-        // Color map for different token types
-        const colors = {
-            key: COLORS.primary, // green
-            string: COLORS.warning, // amber/yellow
-            number: COLORS.purple, // purple
-            boolean: COLORS.info, // blue
-            nullVal: COLORS.error, // red
-            punct: COLORS.textMuted, // gray
-        };
-        // Simple tokenizer for JSON using matchAll for safety
-        const tokenPattern = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|(\btrue\b|\bfalse\b)|(\bnull\b)|(-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)|([{}\[\],])|(\s+)/g;
-        for (const match of json.matchAll(tokenPattern)) {
-            const [, str, colon, bool, nullToken, num, punct, whitespace] = match;
-            if (whitespace) {
-                container.appendChild(document.createTextNode(whitespace));
-            }
-            else if (str !== undefined) {
-                const span = document.createElement('span');
-                span.style.color = colon ? colors.key : colors.string;
-                span.textContent = str;
-                container.appendChild(span);
-                if (colon) {
-                    const colonSpan = document.createElement('span');
-                    colonSpan.style.color = colors.punct;
-                    colonSpan.textContent = ':';
-                    container.appendChild(colonSpan);
-                }
-            }
-            else if (bool) {
-                const span = document.createElement('span');
-                span.style.color = colors.boolean;
-                span.textContent = bool;
-                container.appendChild(span);
-            }
-            else if (nullToken) {
-                const span = document.createElement('span');
-                span.style.color = colors.nullVal;
-                span.textContent = nullToken;
-                container.appendChild(span);
-            }
-            else if (num) {
-                const span = document.createElement('span');
-                span.style.color = colors.number;
-                span.textContent = num;
-                container.appendChild(span);
-            }
-            else if (punct) {
-                const span = document.createElement('span');
-                span.style.color = colors.punct;
-                span.textContent = punct;
-                container.appendChild(span);
-            }
-        }
-    }
-    /**
-     * Render key-value pairs as rows with ellipsis overflow and hover tooltip
-     */
-    renderKeyValueItems(container, items) {
-        for (const [key, value] of Object.entries(items)) {
-            const row = document.createElement('div');
-            Object.assign(row.style, {
-                display: 'flex',
-                marginBottom: '4px',
-                alignItems: 'flex-start',
-            });
-            const keyEl = document.createElement('span');
-            Object.assign(keyEl.style, {
-                color: '#9ca3af',
-                fontSize: '0.6875rem',
-                width: '120px',
-                minWidth: '120px',
-                maxWidth: '120px',
-                flexShrink: '0',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-            });
-            keyEl.textContent = key;
-            // Show full key on hover if it might be truncated
-            if (key.length > 18) {
-                keyEl.title = key;
-            }
-            row.appendChild(keyEl);
-            const valueEl = document.createElement('span');
-            const strValue = String(value);
-            Object.assign(valueEl.style, {
-                color: '#d1d5db',
-                fontSize: '0.6875rem',
-                flex: '1',
-                wordBreak: 'break-word',
-                whiteSpace: 'pre-wrap',
-            });
-            valueEl.textContent = strValue;
-            row.appendChild(valueEl);
-            container.appendChild(row);
-        }
-    }
-    renderCollapsed() {
-        if (!this.container)
-            return;
-        const { position, accentColor } = this.options;
-        const { errorCount, warningCount } = this.getLogCounts();
-        // Calculate position so the collapsed dot aligns with where it appears in expanded state
-        // Expanded: left:80 + border:1 + padding:12 + half-indicator:6 = 99px horizontal center
-        // Expanded: bottom:20 + border:1 + padding:8 + half-row-height:11 = 40px vertical center (approx)
-        // Collapsed circle diameter: 26px, so offset by 13px from center
-        const collapsedPositions = {
-            'bottom-left': { bottom: '27px', left: '86px' },
-            'bottom-right': { bottom: '27px', right: '29px' },
-            'top-left': { top: '27px', left: '86px' },
-            'top-right': { top: '27px', right: '29px' },
-            'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
-        };
-        const posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
-        const wrapper = this.container;
-        wrapper.className = this.tooltipClass('left', 'devbar-collapse');
-        wrapper.setAttribute('data-tooltip', `Click to expand DevBar${this.sweetlinkConnected ? ' (Sweetlink connected)' : ' (Sweetlink not connected)'}${errorCount > 0 ? `\n${errorCount} console error${errorCount === 1 ? '' : 's'}` : ''}`);
-        // Reset position properties first to avoid stale values
-        wrapper.style.top = '';
-        wrapper.style.bottom = '';
-        wrapper.style.left = '';
-        wrapper.style.right = '';
-        wrapper.style.transform = '';
-        Object.assign(wrapper.style, {
-            position: 'fixed',
-            ...posStyle,
-            zIndex: '9999',
-            backgroundColor: 'rgba(17, 24, 39, 0.95)',
-            border: `1px solid ${accentColor}`,
-            borderRadius: '50%',
-            color: accentColor,
-            boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${accentColor}1A`,
-            backdropFilter: 'blur(8px)',
-            WebkitBackdropFilter: 'blur(8px)',
-            cursor: 'pointer',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '26px',
-            height: '26px',
-            boxSizing: 'border-box',
-            animation: 'devbar-collapse 150ms ease-out'
-        });
-        wrapper.onclick = () => {
-            this.collapsed = false;
-            this.render();
-        };
-        // Connection indicator dot (same size as in expanded state)
-        const dot = document.createElement('span');
-        Object.assign(dot.style, {
-            width: '6px',
-            height: '6px',
-            borderRadius: '50%',
-            backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
-            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none'
-        });
-        wrapper.appendChild(dot);
-        // Error badge (absolute, top-right of circle, shifted left if warning badge exists)
-        if (errorCount > 0) {
-            wrapper.appendChild(this.createCollapsedBadge(errorCount, 'rgba(239, 68, 68, 0.95)', warningCount > 0 ? '12px' : '-6px'));
-        }
-        // Warning badge (absolute, top-right)
-        if (warningCount > 0) {
-            wrapper.appendChild(this.createCollapsedBadge(warningCount, 'rgba(245, 158, 11, 0.95)', '-6px'));
-        }
-    }
-    renderExpanded() {
-        if (!this.container)
-            return;
-        const { position, accentColor, showMetrics, showScreenshot, showConsoleBadges } = this.options;
-        const { errorCount, warningCount } = this.getLogCounts();
-        const positionStyles = {
-            'bottom-left': { bottom: '20px', left: '80px' },
-            'bottom-right': { bottom: '20px', right: '16px' },
-            'top-left': { top: '20px', left: '80px' },
-            'top-right': { top: '20px', right: '16px' },
-            'bottom-center': { bottom: '12px', left: '50%', transform: 'translateX(-50%)' },
-        };
-        const posStyle = positionStyles[position] ?? positionStyles['bottom-left'];
-        const isCentered = position === 'bottom-center';
-        const sizeOverrides = this.options.sizeOverrides;
-        const wrapper = this.container;
-        // Reset position properties first to avoid stale values from previous renders
-        wrapper.style.top = '';
-        wrapper.style.bottom = '';
-        wrapper.style.left = '';
-        wrapper.style.right = '';
-        wrapper.style.transform = '';
-        // Calculate size values with overrides or defaults
-        // Width always fit-content, maxWidth prevents overlap with other dev bars
-        // BASE breakpoint (<640px) wraps buttons to centered second row via CSS
-        const defaultWidth = 'fit-content';
-        const defaultMinWidth = 'auto';
-        const defaultMaxWidth = isCentered ? 'calc(100vw - 140px)' : 'calc(100vw - 32px)';
-        Object.assign(wrapper.style, {
-            position: 'fixed',
-            ...posStyle,
-            zIndex: '9999',
-            backgroundColor: 'rgba(17, 24, 39, 0.95)',
-            border: `1px solid ${accentColor}`,
-            borderRadius: '12px',
-            color: accentColor,
-            boxShadow: `0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px ${accentColor}1A`,
-            backdropFilter: 'blur(8px)',
-            WebkitBackdropFilter: 'blur(8px)',
-            boxSizing: 'border-box',
-            width: sizeOverrides?.width ?? defaultWidth,
-            maxWidth: sizeOverrides?.maxWidth ?? defaultMaxWidth,
-            minWidth: sizeOverrides?.minWidth ?? defaultMinWidth,
-            cursor: 'default'
-        });
-        wrapper.ondblclick = () => {
-            this.collapsed = true;
-            this.render();
-        };
-        // Main row - wrapping controlled by CSS media query
-        const mainRow = document.createElement('div');
-        mainRow.className = 'devbar-main';
-        Object.assign(mainRow.style, {
-            display: 'flex',
-            alignItems: 'center',
-            alignContent: 'flex-start',
-            justifyContent: 'flex-start',
-            gap: '0.5rem',
-            padding: '0.5rem 0.75rem',
-            minWidth: '0',
-            boxSizing: 'border-box',
-            fontFamily: FONT_MONO,
-            fontSize: '0.6875rem',
-            lineHeight: '1rem'
-        });
-        // Connection indicator (click to collapse)
-        const connIndicator = document.createElement('span');
-        connIndicator.className = this.tooltipClass('left', 'devbar-clickable');
-        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected ? 'Sweetlink connected (click to minimize)' : 'Sweetlink disconnected (click to minimize)');
-        Object.assign(connIndicator.style, {
-            width: '12px',
-            height: '12px',
-            borderRadius: '50%',
-            backgroundColor: 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            cursor: 'pointer',
-            flexShrink: '0'
-        });
-        connIndicator.onclick = (e) => {
-            e.stopPropagation();
-            this.collapsed = true;
-            this.render();
-        };
-        const connDot = document.createElement('span');
-        Object.assign(connDot.style, {
-            width: '6px',
-            height: '6px',
-            borderRadius: '50%',
-            backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
-            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
-            transition: 'all 300ms'
-        });
-        connIndicator.appendChild(connDot);
-        // Status row wrapper - keeps connection dot, info, and badges together
-        const statusRow = document.createElement('div');
-        statusRow.className = 'devbar-status';
-        Object.assign(statusRow.style, {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem',
-            flexWrap: 'nowrap',
-            flexShrink: '0'
-        });
-        statusRow.appendChild(connIndicator);
-        // Info section
-        const infoSection = document.createElement('div');
-        infoSection.className = 'devbar-info';
-        Object.assign(infoSection.style, {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '0.5rem',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            flexShrink: '1',
-            minWidth: '0',
-            overflow: 'visible'
-        });
-        // Breakpoint info
-        if (showMetrics.breakpoint && this.breakpointInfo) {
-            const bp = this.breakpointInfo.tailwindBreakpoint;
-            const breakpointData = TAILWIND_BREAKPOINTS[bp];
-            const bpSpan = document.createElement('span');
-            bpSpan.className = this.tooltipClass('left', 'devbar-item');
-            Object.assign(bpSpan.style, { opacity: '0.9', cursor: 'default' });
-            bpSpan.setAttribute('data-tooltip', `Tailwind Breakpoint: ${bp}\n${breakpointData?.label || ''}\n\nViewport: ${this.breakpointInfo.dimensions}\n\nBreakpoints:\nbase: <640px | sm: >=640px\nmd: >=768px | lg: >=1024px\nxl: >=1280px | 2xl: >=1536px`);
-            let bpText = bp;
-            if (bp !== 'base') {
-                bpText = bp === 'sm'
-                    ? `${bp} - ${this.breakpointInfo.dimensions.split('x')[0]}`
-                    : `${bp} - ${this.breakpointInfo.dimensions}`;
-            }
-            bpSpan.textContent = bpText;
-            infoSection.appendChild(bpSpan);
-        }
-        // Performance stats
-        if (this.perfStats) {
-            const addSeparator = () => {
-                const sep = document.createElement('span');
-                sep.style.opacity = '0.4';
-                sep.textContent = '|';
-                infoSection.appendChild(sep);
-            };
-            if (showMetrics.fcp) {
-                addSeparator();
-                const fcpSpan = document.createElement('span');
-                fcpSpan.className = this.tooltipClass('left', 'devbar-item');
-                Object.assign(fcpSpan.style, { opacity: '0.85', cursor: 'default' });
-                fcpSpan.setAttribute('data-tooltip', 'First Contentful Paint (FCP): Time until first text/image renders.\n\nGood: <1.8s\nNeeds work: 1.8-3s\nPoor: >3s');
-                fcpSpan.textContent = `FCP ${this.perfStats.fcp}`;
-                infoSection.appendChild(fcpSpan);
-            }
-            if (showMetrics.lcp) {
-                addSeparator();
-                const lcpSpan = document.createElement('span');
-                lcpSpan.className = this.tooltipClass('left', 'devbar-item');
-                Object.assign(lcpSpan.style, { opacity: '0.85', cursor: 'default' });
-                lcpSpan.setAttribute('data-tooltip', 'Largest Contentful Paint (LCP): Time until largest visible element renders.\n\nGood: <2.5s\nNeeds work: 2.5-4s\nPoor: >4s');
-                lcpSpan.textContent = `LCP ${this.perfStats.lcp}`;
-                infoSection.appendChild(lcpSpan);
-            }
-            if (showMetrics.pageSize) {
-                addSeparator();
-                const sizeSpan = document.createElement('span');
-                sizeSpan.className = this.tooltipClass('left', 'devbar-item');
-                Object.assign(sizeSpan.style, { opacity: '0.7', cursor: 'default' });
-                sizeSpan.setAttribute('data-tooltip', 'Total page size (compressed/transferred).\nIncludes HTML, CSS, JS, images, and other resources.');
-                sizeSpan.textContent = this.perfStats.totalSize;
-                infoSection.appendChild(sizeSpan);
-            }
-        }
-        statusRow.appendChild(infoSection);
-        // Console badges - add to status row so they stay with info
-        if (showConsoleBadges) {
-            if (errorCount > 0) {
-                statusRow.appendChild(this.createConsoleBadge('error', errorCount, BUTTON_COLORS.error));
-            }
-            if (warningCount > 0) {
-                statusRow.appendChild(this.createConsoleBadge('warn', warningCount, BUTTON_COLORS.warning));
-            }
-        }
-        mainRow.appendChild(statusRow);
-        // Action buttons - always render container for consistent height
-        const actionsContainer = document.createElement('div');
-        actionsContainer.className = 'devbar-actions';
-        if (showScreenshot) {
-            actionsContainer.appendChild(this.createScreenshotButton(accentColor));
-        }
-        actionsContainer.appendChild(this.createAIReviewButton());
-        actionsContainer.appendChild(this.createOutlineButton());
-        actionsContainer.appendChild(this.createSchemaButton());
-        mainRow.appendChild(actionsContainer);
-        wrapper.appendChild(mainRow);
-        // Render custom controls row if there are any
-        if (GlobalDevBar.customControls.length > 0) {
-            const customRow = document.createElement('div');
-            Object.assign(customRow.style, {
-                display: 'flex',
-                flexWrap: 'wrap',
-                alignItems: 'center',
-                gap: '0.5rem',
-                padding: '0 0.75rem 0.5rem 0.75rem',
-                borderTop: `1px solid ${accentColor}30`,
-                marginTop: '0',
-                paddingTop: '0.5rem',
-                fontFamily: FONT_MONO,
-                fontSize: '0.6875rem',
-            });
-            GlobalDevBar.customControls.forEach(control => {
-                const btn = document.createElement('button');
-                btn.type = 'button';
-                const color = control.variant === 'warning' ? BUTTON_COLORS.warning : accentColor;
-                const isActive = control.active ?? false;
-                const isDisabled = control.disabled ?? false;
-                Object.assign(btn.style, {
-                    padding: '4px 10px',
-                    backgroundColor: isActive ? `${color}33` : 'transparent',
-                    border: `1px solid ${isActive ? color : `${color}60`}`,
-                    borderRadius: '6px',
-                    color: isActive ? color : `${color}99`,
-                    fontSize: '0.625rem',
-                    cursor: isDisabled ? 'not-allowed' : 'pointer',
-                    opacity: isDisabled ? '0.5' : '1',
-                    transition: 'all 150ms',
-                });
-                btn.textContent = control.label;
-                btn.disabled = isDisabled;
-                if (!isDisabled) {
-                    btn.onmouseenter = () => {
-                        btn.style.backgroundColor = `${color}20`;
-                        btn.style.borderColor = color;
-                        btn.style.color = color;
-                    };
-                    btn.onmouseleave = () => {
-                        btn.style.backgroundColor = isActive ? `${color}33` : 'transparent';
-                        btn.style.borderColor = isActive ? color : `${color}60`;
-                        btn.style.color = isActive ? color : `${color}99`;
-                    };
-                    btn.onclick = () => control.onClick();
-                }
-                customRow.appendChild(btn);
-            });
-            wrapper.appendChild(customRow);
-        }
+    toggleCompactMode() {
+        this.compactMode = !this.compactMode;
+        this.settingsManager.saveSettings({ compactMode: this.compactMode });
+        this.debug.state('Compact mode toggled', { compactMode: this.compactMode });
+        this.render();
     }
     /**
-     * Create a console badge for error/warning counts
+     * Check if compact mode is enabled
      */
-    createConsoleBadge(type, count, color) {
-        const label = type === 'error' ? 'error' : 'warning';
-        const isActive = this.consoleFilter === type;
-        const badge = document.createElement('span');
-        badge.className = this.tooltipClass('right', 'devbar-badge');
-        badge.setAttribute('data-tooltip', `${count} console ${label}${count === 1 ? '' : 's'} (click to view)`);
-        Object.assign(badge.style, {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            minWidth: '18px',
-            height: '18px',
-            padding: '0 5px',
-            borderRadius: '9999px',
-            backgroundColor: isActive ? color : `${color}E6`,
-            color: '#fff',
-            fontSize: '0.625rem',
-            fontWeight: '600',
-            cursor: 'pointer',
-            boxShadow: isActive ? `0 0 8px ${color}CC` : 'none',
-        });
-        badge.textContent = count > 99 ? '99+' : String(count);
-        badge.onclick = () => {
-            this.consoleFilter = this.consoleFilter === type ? null : type;
-            this.showOutlineModal = false;
-            this.showSchemaModal = false;
-            this.render();
-        };
-        return badge;
-    }
-    createScreenshotButton(accentColor) {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = this.tooltipClass('right');
-        const hasSuccessState = this.copiedToClipboard || this.copiedPath || this.lastScreenshot;
-        const tooltip = this.copiedToClipboard
-            ? 'Copied to clipboard!'
-            : this.copiedPath
-                ? 'Path copied to clipboard!'
-                : this.lastScreenshot
-                    ? `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`
-                    : `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
-        btn.setAttribute('data-tooltip', tooltip);
-        Object.assign(btn.style, {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '22px',
-            height: '22px',
-            minWidth: '22px',
-            minHeight: '22px',
-            flexShrink: '0',
-            borderRadius: '50%',
-            border: '1px solid',
-            borderColor: hasSuccessState ? accentColor : `${accentColor}80`,
-            backgroundColor: hasSuccessState ? `${accentColor}33` : 'transparent',
-            color: hasSuccessState ? accentColor : `${accentColor}99`,
-            cursor: !this.capturing ? 'pointer' : 'not-allowed',
-            opacity: '1',
-            transition: 'all 150ms'
-        });
-        btn.disabled = this.capturing;
-        btn.onclick = (e) => {
-            // If we have a saved screenshot path, clicking copies the path
-            if (this.lastScreenshot && !e.shiftKey) {
-                this.copyPathToClipboard(this.lastScreenshot);
-            }
-            else {
-                this.handleScreenshot(e.shiftKey);
-            }
-        };
-        // Button content
-        if (this.copiedToClipboard || this.copiedPath || this.lastScreenshot) {
-            btn.textContent = '✓';
-            btn.style.fontSize = '0.6rem';
-        }
-        else if (this.capturing) {
-            btn.textContent = '...';
-            btn.style.fontSize = '0.5rem';
-        }
-        else {
-            // Camera icon SVG
-            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            svg.setAttribute('width', '12');
-            svg.setAttribute('height', '12');
-            svg.setAttribute('viewBox', '0 0 50.8 50.8');
-            svg.style.stroke = 'currentColor';
-            svg.style.fill = 'none';
-            const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
-            g.setAttribute('stroke-linecap', 'round');
-            g.setAttribute('stroke-linejoin', 'round');
-            g.setAttribute('stroke-width', '4');
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            path.setAttribute('d', 'M19.844 7.938H7.938v11.905m0 11.113v11.906h11.905m23.019-11.906v11.906H30.956m11.906-23.018V7.938H30.956');
-            const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-            circle.setAttribute('cx', '25.4');
-            circle.setAttribute('cy', '25.4');
-            circle.setAttribute('r', '8.731');
-            g.appendChild(path);
-            g.appendChild(circle);
-            svg.appendChild(g);
-            btn.appendChild(svg);
-        }
-        return btn;
+    isCompactMode() {
+        return this.compactMode;
     }
-    createAIReviewButton() {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = this.tooltipClass('right');
-        const tooltip = this.designReviewInProgress
-            ? 'AI Design Review in progress...'
-            : this.designReviewError
-                ? `Design review failed:\n${this.designReviewError}`
-                : this.lastDesignReview
-                    ? `Design review saved to:\n${this.lastDesignReview}`
-                    : `AI Design Review\n\nCaptures screenshot and sends to\nClaude for design analysis.\n\nRequires ANTHROPIC_API_KEY.${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
-        btn.setAttribute('data-tooltip', tooltip);
-        const hasError = !!this.designReviewError;
-        const isActive = this.designReviewInProgress || !!this.lastDesignReview || hasError;
-        const isDisabled = this.designReviewInProgress || !this.sweetlinkConnected;
-        // Use error color (red) when there's an error, otherwise normal review color
-        const buttonColor = hasError ? '#ef4444' : BUTTON_COLORS.review;
-        Object.assign(btn.style, getButtonStyles(buttonColor, isActive, isDisabled));
-        if (!this.sweetlinkConnected)
-            btn.style.opacity = '0.5';
-        btn.disabled = isDisabled;
-        btn.onclick = () => this.showDesignReviewConfirmation();
-        if (this.designReviewInProgress) {
-            btn.textContent = '~';
-            btn.style.fontSize = '0.5rem';
-            btn.style.animation = 'pulse 1s infinite';
-        }
-        else if (this.designReviewError) {
-            // Show 'x' for error state
-            btn.textContent = '×';
-            btn.style.fontSize = '0.875rem';
-            btn.style.fontWeight = 'bold';
-        }
-        else if (this.lastDesignReview) {
-            btn.textContent = 'v';
-            btn.style.fontSize = '0.5rem';
-        }
-        else {
-            btn.appendChild(createSvgIcon('M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z', { fill: true }));
-        }
-        return btn;
-    }
-    createOutlineButton() {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = this.tooltipClass('right');
-        const tooltip = this.lastOutline
-            ? `Outline saved to:\n${this.lastOutline}`
-            : `Document Outline\n\nView page heading structure and\nsave as markdown.`;
-        btn.setAttribute('data-tooltip', tooltip);
-        const isActive = this.showOutlineModal || !!this.lastOutline;
-        Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.outline, isActive, false));
-        btn.onclick = () => this.handleDocumentOutline();
-        if (this.lastOutline) {
-            btn.textContent = 'v';
-            btn.style.fontSize = '0.5rem';
-        }
-        else {
-            btn.appendChild(createSvgIcon('M3 4h18v2H3V4zm0 7h12v2H3v-2zm0 7h18v2H3v-2z', { fill: true }));
-        }
-        return btn;
-    }
-    createSchemaButton() {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = this.tooltipClass('right');
-        const tooltip = this.lastSchema
-            ? `Schema saved to:\n${this.lastSchema}`
-            : `Page Schema\n\nView JSON-LD, Open Graph, and\nother structured data.`;
-        btn.setAttribute('data-tooltip', tooltip);
-        const isActive = this.showSchemaModal || !!this.lastSchema;
-        Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.schema, isActive, false));
-        btn.onclick = () => this.handlePageSchema();
-        if (this.lastSchema) {
-            btn.textContent = 'v';
-            btn.style.fontSize = '0.5rem';
-        }
-        else {
-            btn.appendChild(createSvgIcon('M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z', { fill: true }));
-        }
-        return btn;
+    // ============================================================================
+    // Render (delegates to rendering module)
+    // ============================================================================
+    render() {
+        moduleRender(this, consoleCapture, GlobalDevBar.customControls);
     }
 }
-// Static storage for custom controls
-GlobalDevBar.customControls = [];
 // ============================================================================
 // Convenience Functions
 // ============================================================================
@@ -1945,7 +435,7 @@ export function initGlobalDevBar(options) {
     const existing = getGlobalInstance();
     if (existing) {
         // Check if already initialized with same position - skip re-init during HMR
-        const existingPosition = existing['options']?.position ?? 'bottom-left';
+        const existingPosition = existing.getPosition();
         const newPosition = options?.position ?? 'bottom-left';
         if (existingPosition === newPosition) {
             return existing;
@@ -1975,5 +465,6 @@ export function destroyGlobalDevBar() {
         setGlobalInstance(null);
     }
 }
-// Re-export console capture for external use
-export { earlyConsoleCapture };
+// Re-export console capture instance for backward compatibility
+export { consoleCapture as earlyConsoleCapture };
+//# sourceMappingURL=GlobalDevBar.js.map