@ytspar/devbar 1.0.0-canary.2b99e1e → 1.0.0-canary.3c85c90

package/dist/GlobalDevBar.d.ts

@@ -10,8 +10,8 @@
 import { getThemeColors } from './constants.js';
 import type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode } from './types.js';
 export type { ConsoleLog, DebugConfig, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl, ThemeMode, };
-export type { DevBarPosition, DevBarSettings, MetricsVisibility } from './settings.js';
-export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
+export type { DevBarSettings, DevBarPosition, MetricsVisibility } from './settings.js';
+export { DEFAULT_SETTINGS, ACCENT_COLOR_PRESETS, getSettingsManager } from './settings.js';
 interface EarlyConsoleCapture {
     errorCount: number;
     warningCount: number;
@@ -46,8 +46,6 @@ export declare class GlobalDevBar {
     private apiKeyStatus;
     private lastOutline;
     private lastSchema;
-    private savingOutline;
-    private savingSchema;
     private consoleFilter;
     private showOutlineModal;
     private showSchemaModal;
@@ -57,10 +55,6 @@ export declare class GlobalDevBar {
     private clsValue;
     private inpValue;
     private reconnectAttempts;
-    private readonly currentAppPort;
-    private readonly baseWsPort;
-    private wsVerified;
-    private serverProjectDir;
     private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;
@@ -237,10 +231,6 @@ export declare class GlobalDevBar {
      * Create the settings gear button
      */
     private createSettingsButton;
-    /**
-     * Create the compact mode toggle button with chevron icon
-     */
-    private createCompactToggleButton;
     /**
      * Create a settings section with title
      */
@@ -259,30 +249,6 @@ export declare class GlobalDevBar {
     private resetToDefaults;
     private renderCollapsed;
     private renderExpanded;
-    /** Base styles for tooltip containers */
-    private readonly TOOLTIP_BASE_STYLES;
-    /** Create a tooltip container element */
-    private createTooltipContainer;
-    /** Add a bold title to tooltip (metric name, feature name, etc.) */
-    private addTooltipTitle;
-    /** Add a description paragraph to tooltip */
-    private addTooltipDescription;
-    /** Add a muted uppercase section header to tooltip */
-    private addTooltipSectionHeader;
-    /** Add a colored row with dot + label + value (for thresholds) */
-    private addTooltipColoredRow;
-    /** Add an info row with label + value (for breakpoint details) */
-    private addTooltipInfoRow;
-    /** Position tooltip above the anchor element, adjusting for screen edges */
-    private positionTooltip;
-    /** Attach an HTML tooltip to an element with custom content builder */
-    private attachHtmlTooltip;
-    /** Attach a metric tooltip with title, description, and colored thresholds */
-    private attachMetricTooltip;
-    /** Attach a breakpoint tooltip showing current breakpoint and all breakpoint ranges */
-    private attachBreakpointTooltip;
-    /** Attach a simple info tooltip with title and description */
-    private attachInfoTooltip;
     /**
      * Create a console badge for error/warning counts
      */

package/dist/GlobalDevBar.js

@@ -8,14 +8,14 @@
  * to avoid React dependency conflicts in host applications.
  */
 import * as html2canvasModule from 'html2canvas-pro';
-import { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getTheme, getThemeColors, injectThemeCSS, MAX_CONSOLE_LOGS, MAX_PORT_RETRIES, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, PORT_RETRY_DELAY_MS, PORT_SCAN_RESTART_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, WS_PORT, WS_PORT_OFFSET, } from './constants.js';
+import { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getThemeColors, MAX_CONSOLE_LOGS, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, WS_PORT, } from './constants.js';
 import { DebugLogger, normalizeDebugConfig } from './debug.js';
 import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
 import { extractPageSchema, schemaToMarkdown } from './schema.js';
 import { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager, } from './settings.js';
 import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createStyledButton, createSvgIcon, getButtonStyles, } from './ui/index.js';
 import { canvasToDataUrl, copyCanvasToClipboard, delay, formatArgs, prepareForCapture, } from './utils.js';
-export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
+export { DEFAULT_SETTINGS, ACCENT_COLOR_PRESETS, getSettingsManager } from './settings.js';
 const html2canvas = (html2canvasModule.default ??
     html2canvasModule);
 const earlyConsoleCapture = (() => {
@@ -91,8 +91,6 @@ export class GlobalDevBar {
         this.apiKeyStatus = null;
         this.lastOutline = null;
         this.lastSchema = null;
-        this.savingOutline = false;
-        this.savingSchema = false;
         this.consoleFilter = null;
         // Modal states
         this.showOutlineModal = false;
@@ -103,8 +101,6 @@ export class GlobalDevBar {
         this.clsValue = 0;
         this.inpValue = 0;
         this.reconnectAttempts = 0;
-        this.wsVerified = false;
-        this.serverProjectDir = null;
         // Track the position of the connection indicator dot for smooth collapse
         this.lastDotPosition = null;
         this.reconnectTimeout = null;
@@ -131,39 +127,11 @@ export class GlobalDevBar {
         this.showSettingsPopover = false;
         // Overlay element for modals
         this.overlayElement = null;
-        // ============================================================================
-        // Tooltip Helpers (DRY system for HTML tooltips)
-        // ============================================================================
-        /** Base styles for tooltip containers */
-        this.TOOLTIP_BASE_STYLES = {
-            position: 'fixed',
-            zIndex: '10004',
-            backgroundColor: 'rgba(17, 24, 39, 0.98)',
-            border: `1px solid ${COLORS.border}`,
-            borderRadius: '6px',
-            padding: '10px 12px',
-            fontSize: '0.6875rem',
-            fontFamily: FONT_MONO,
-            maxWidth: '280px',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.4)',
-            pointerEvents: 'none',
-        };
         // 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,
@@ -377,64 +345,27 @@ export class GlobalDevBar {
             document.head.appendChild(style);
         }
     }
-    connectWebSocket(port) {
+    connectWebSocket() {
         if (this.destroyed)
             return;
-        const targetPort = port ?? this.baseWsPort;
-        this.debug.ws('Connecting to WebSocket', { port: targetPort, appPort: this.currentAppPort });
-        const ws = new WebSocket(`ws://localhost:${targetPort}`);
+        this.debug.ws('Connecting to WebSocket', { port: WS_PORT });
+        const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
         this.ws = ws;
-        this.wsVerified = false;
         ws.onopen = () => {
-            this.debug.ws('WebSocket socket opened, awaiting server-info');
+            this.sweetlinkConnected = true;
+            this.reconnectAttempts = 0;
+            this.debug.ws('WebSocket connected');
+            // Update settings manager with WebSocket connection
+            this.settingsManager.setWebSocket(ws);
+            this.settingsManager.setConnected(true);
             ws.send(JSON.stringify({ type: 'browser-client-ready' }));
+            // Request settings from server
+            ws.send(JSON.stringify({ type: 'load-settings' }));
+            this.render();
         };
         ws.onmessage = async (event) => {
             try {
-                const message = JSON.parse(event.data);
-                // Handle server-info for port matching
-                if (message.type === 'server-info') {
-                    const serverAppPort = message.appPort;
-                    const serverMatchesApp = serverAppPort === null || serverAppPort === this.currentAppPort;
-                    if (!serverMatchesApp) {
-                        this.debug.ws('Server mismatch', {
-                            serverAppPort,
-                            currentAppPort: this.currentAppPort,
-                            tryingNextPort: targetPort + 1,
-                        });
-                        ws.close();
-                        // Try next port
-                        const nextPort = targetPort + 1;
-                        if (nextPort < this.baseWsPort + MAX_PORT_RETRIES) {
-                            setTimeout(() => this.connectWebSocket(nextPort), PORT_RETRY_DELAY_MS);
-                        }
-                        else {
-                            this.debug.ws('No matching server found, will retry from base port');
-                            setTimeout(() => this.connectWebSocket(this.baseWsPort), PORT_SCAN_RESTART_DELAY_MS);
-                        }
-                        return;
-                    }
-                    // Server matches - mark as verified and connected
-                    this.wsVerified = true;
-                    this.sweetlinkConnected = true;
-                    this.reconnectAttempts = 0;
-                    this.serverProjectDir = message.projectDir ?? null;
-                    this.debug.ws('Server verified', {
-                        appPort: serverAppPort ?? 'any',
-                        projectDir: this.serverProjectDir,
-                    });
-                    this.settingsManager.setWebSocket(ws);
-                    this.settingsManager.setConnected(true);
-                    ws.send(JSON.stringify({ type: 'load-settings' }));
-                    this.render();
-                    return;
-                }
-                // Ignore other commands until verified
-                if (!this.wsVerified) {
-                    this.debug.ws('Ignoring command before verification', { type: message.type });
-                    return;
-                }
-                const command = message;
+                const command = JSON.parse(event.data);
                 this.debug.ws('Received command', { type: command.type });
                 await this.handleSweetlinkCommand(command);
             }
@@ -443,21 +374,16 @@ export class GlobalDevBar {
             }
         };
         ws.onclose = () => {
-            // Only reset connection state if we were actually verified/connected
-            if (this.wsVerified) {
-                this.sweetlinkConnected = false;
-                this.wsVerified = false;
-                this.serverProjectDir = null;
-                this.settingsManager.setConnected(false);
-                this.debug.ws('WebSocket disconnected');
-                this.render();
-                // Auto-reconnect with exponential backoff (start from base port)
-                if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                    const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
-                    this.reconnectAttempts++;
-                    this.debug.ws('Scheduling reconnect', { attempt: this.reconnectAttempts, delayMs });
-                    this.reconnectTimeout = setTimeout(() => this.connectWebSocket(this.baseWsPort), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
-                }
+            this.sweetlinkConnected = false;
+            this.settingsManager.setConnected(false);
+            this.debug.ws('WebSocket disconnected');
+            this.render();
+            // Auto-reconnect with exponential backoff
+            if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
+                this.reconnectAttempts++;
+                this.debug.ws('Scheduling reconnect', { attempt: this.reconnectAttempts, delayMs });
+                this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
             }
         };
         ws.onerror = () => {
@@ -653,7 +579,6 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'outline':
-                this.savingOutline = false;
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
@@ -663,7 +588,6 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'schema':
-                this.savingSchema = false;
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
@@ -796,11 +720,7 @@ export class GlobalDevBar {
                 }
             });
             // durationThreshold filters out very short interactions
-            this.inpObserver.observe({
-                type: 'event',
-                buffered: true,
-                durationThreshold: 16,
-            });
+            this.inpObserver.observe({ type: 'event', buffered: true, durationThreshold: 16 });
         }
         catch (e) {
             console.warn('[GlobalDevBar] INP PerformanceObserver not supported', e);
@@ -857,16 +777,12 @@ export class GlobalDevBar {
         // Load stored theme preference from settings manager
         const settings = this.settingsManager.getSettings();
         this.themeMode = settings.themeMode;
-        // Inject the appropriate theme CSS variables on initial load
-        injectThemeCSS(getTheme(this.themeMode));
         this.debug.state('Theme loaded', { mode: this.themeMode });
         // Listen for system theme changes
         if (typeof window !== 'undefined' && window.matchMedia) {
             this.themeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
             this.themeMediaHandler = () => {
                 if (this.themeMode === 'system') {
-                    // Re-inject theme CSS when system preference changes
-                    injectThemeCSS(getTheme(this.themeMode));
                     this.debug.state('System theme changed', {
                         effectiveTheme: getEffectiveTheme(this.themeMode),
                     });
@@ -893,8 +809,6 @@ export class GlobalDevBar {
     setThemeMode(mode) {
         this.themeMode = mode;
         this.settingsManager.saveSettings({ themeMode: mode });
-        // Inject the appropriate theme CSS variables
-        injectThemeCSS(getTheme(mode));
         this.debug.state('Theme mode changed', { mode, effectiveTheme: getEffectiveTheme(mode) });
         this.render();
     }
@@ -1148,13 +1062,9 @@ export class GlobalDevBar {
         this.render();
     }
     handleSaveOutline() {
-        if (this.savingOutline)
-            return; // Prevent repeated clicks
         const outline = extractDocumentOutline();
         const markdown = outlineToMarkdown(outline);
         if (this.ws?.readyState === WebSocket.OPEN) {
-            this.savingOutline = true;
-            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-outline',
                 data: {
@@ -1168,13 +1078,9 @@ export class GlobalDevBar {
         }
     }
     handleSaveSchema() {
-        if (this.savingSchema)
-            return; // Prevent repeated clicks
         const schema = extractPageSchema();
         const markdown = schemaToMarkdown(schema);
         if (this.ws?.readyState === WebSocket.OPEN) {
-            this.savingSchema = true;
-            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-schema',
                 data: {
@@ -1552,8 +1458,6 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveOutline(),
             sweetlinkConnected: this.sweetlinkConnected,
-            isSaving: this.savingOutline,
-            savedPath: this.lastOutline,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1640,8 +1544,6 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveSchema(),
             sweetlinkConnected: this.sweetlinkConnected,
-            isSaving: this.savingSchema,
-            savedPath: this.lastSchema,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1999,64 +1901,6 @@ export class GlobalDevBar {
         btn.appendChild(svg);
         return btn;
     }
-    /**
-     * Create the compact mode toggle button with chevron icon
-     */
-    createCompactToggleButton() {
-        const btn = document.createElement('button');
-        btn.type = 'button';
-        btn.className = this.tooltipClass('right');
-        const isCompact = this.compactMode;
-        const tooltip = isCompact ? 'Expand (Cmd+Shift+M)' : 'Compact (Cmd+Shift+M)';
-        btn.setAttribute('data-tooltip', tooltip);
-        const { accentColor } = this.options;
-        const iconColor = COLORS.textSecondary;
-        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 ${accentColor}60`,
-            backgroundColor: 'transparent',
-            color: `${iconColor}99`,
-            cursor: 'pointer',
-            transition: 'all 150ms',
-        });
-        btn.onmouseenter = () => {
-            btn.style.borderColor = accentColor;
-            btn.style.backgroundColor = `${accentColor}20`;
-            btn.style.color = iconColor;
-        };
-        btn.onmouseleave = () => {
-            btn.style.borderColor = `${accentColor}60`;
-            btn.style.backgroundColor = 'transparent';
-            btn.style.color = `${iconColor}99`;
-        };
-        btn.onclick = () => {
-            this.toggleCompactMode();
-        };
-        // Chevron icon SVG - points right when expanded, left when compact
-        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-        svg.setAttribute('width', '12');
-        svg.setAttribute('height', '12');
-        svg.setAttribute('viewBox', '0 0 24 24');
-        svg.setAttribute('fill', 'none');
-        svg.setAttribute('stroke', 'currentColor');
-        svg.setAttribute('stroke-width', '2');
-        svg.setAttribute('stroke-linecap', 'round');
-        svg.setAttribute('stroke-linejoin', 'round');
-        const path = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
-        // Left chevron (<) when expanded to shrink, right chevron (>) when compact to expand
-        path.setAttribute('points', isCompact ? '9 18 15 12 9 6' : '15 18 9 12 15 6');
-        svg.appendChild(path);
-        btn.appendChild(svg);
-        return btn;
-    }
     /**
      * Create a settings section with title
      */
@@ -2210,78 +2054,49 @@ export class GlobalDevBar {
         popover.appendChild(themeSection);
         // ========== DISPLAY SECTION ==========
         const displaySection = this.createSettingsSection('Display');
-        // Position mini-map selector
+        // Position dropdown
         const positionRow = document.createElement('div');
-        Object.assign(positionRow.style, { marginBottom: '10px' });
-        const posLabel = document.createElement('div');
-        Object.assign(posLabel.style, {
-            color: COLORS.text,
-            fontSize: '0.6875rem',
-            marginBottom: '6px',
+        Object.assign(positionRow.style, {
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            marginBottom: '8px',
         });
+        const posLabel = document.createElement('span');
+        Object.assign(posLabel.style, { color: COLORS.text, fontSize: '0.6875rem' });
         posLabel.textContent = 'Position';
         positionRow.appendChild(posLabel);
-        // Mini-map container
-        const miniMap = document.createElement('div');
-        Object.assign(miniMap.style, {
-            position: 'relative',
-            width: '100%',
-            height: '50px',
-            backgroundColor: 'rgba(10, 15, 26, 0.6)',
-            border: `1px solid ${color}30`,
+        const posSelect = document.createElement('select');
+        Object.assign(posSelect.style, {
+            backgroundColor: 'rgba(10, 15, 26, 0.8)',
+            border: `1px solid ${color}40`,
             borderRadius: '4px',
+            color: COLORS.text,
+            fontSize: '0.625rem',
+            padding: '4px 6px',
+            cursor: 'pointer',
+            fontFamily: FONT_MONO,
         });
-        const positionConfigs = [
-            { value: 'top-left', style: { top: '8px', left: '10%' }, title: 'Top Left' },
-            { value: 'top-right', style: { top: '8px', right: '6%' }, title: 'Top Right' },
-            { value: 'bottom-left', style: { bottom: '8px', left: '10%' }, title: 'Bottom Left' },
-            { value: 'bottom-right', style: { bottom: '8px', right: '6%' }, title: 'Bottom Right' },
-            {
-                value: 'bottom-center',
-                style: { bottom: '6px', left: '50%', transform: 'translateX(-50%)' },
-                title: 'Bottom Center',
-            },
+        const positions = [
+            { value: 'bottom-left', label: 'Bottom Left' },
+            { value: 'bottom-right', label: 'Bottom Right' },
+            { value: 'bottom-center', label: 'Bottom Center' },
+            { value: 'top-left', label: 'Top Left' },
+            { value: 'top-right', label: 'Top Right' },
         ];
-        positionConfigs.forEach(({ value, style, title }) => {
-            const indicator = document.createElement('button');
-            const isActive = this.options.position === value;
-            Object.assign(indicator.style, {
-                position: 'absolute',
-                width: '20px',
-                height: '6px',
-                backgroundColor: isActive ? accentColor : `${color}60`,
-                border: `1px solid ${isActive ? accentColor : `${color}40`}`,
-                borderRadius: '2px',
-                cursor: 'pointer',
-                padding: '0',
-                transition: 'all 150ms',
-                boxShadow: isActive ? `0 0 8px ${accentColor}60` : 'none',
-                ...style,
-            });
-            indicator.title = title;
-            indicator.onclick = () => {
-                this.options.position = value;
-                this.settingsManager.saveSettings({ position: value });
-                this.render();
-            };
-            // Hover effect
-            indicator.onmouseenter = () => {
-                if (!isActive) {
-                    indicator.style.backgroundColor = accentColor;
-                    indicator.style.borderColor = accentColor;
-                    indicator.style.boxShadow = `0 0 6px ${accentColor}40`;
-                }
-            };
-            indicator.onmouseleave = () => {
-                if (!isActive) {
-                    indicator.style.backgroundColor = `${color}60`;
-                    indicator.style.borderColor = `${color}40`;
-                    indicator.style.boxShadow = 'none';
-                }
-            };
-            miniMap.appendChild(indicator);
+        positions.forEach(({ value, label }) => {
+            const option = document.createElement('option');
+            option.value = value;
+            option.textContent = label;
+            option.selected = this.options.position === value;
+            posSelect.appendChild(option);
         });
-        positionRow.appendChild(miniMap);
+        posSelect.onchange = () => {
+            this.options.position = posSelect.value;
+            this.settingsManager.saveSettings({ position: this.options.position });
+            this.render();
+        };
+        positionRow.appendChild(posSelect);
         displaySection.appendChild(positionRow);
         // Compact mode toggle
         displaySection.appendChild(this.createToggleRow('Compact Mode', this.compactMode, accentColor, () => {
@@ -2643,10 +2458,9 @@ export class GlobalDevBar {
             const bp = this.breakpointInfo.tailwindBreakpoint;
             const breakpointData = TAILWIND_BREAKPOINTS[bp];
             const bpSpan = document.createElement('span');
-            bpSpan.className = 'devbar-item';
+            bpSpan.className = this.tooltipClass('left', 'devbar-item');
             Object.assign(bpSpan.style, { opacity: '0.9', cursor: 'default' });
-            // Use HTML tooltip for breakpoint info
-            this.attachBreakpointTooltip(bpSpan, bp, this.breakpointInfo.dimensions, breakpointData?.label || '');
+            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 =
@@ -2668,45 +2482,45 @@ export class GlobalDevBar {
             if (showMetrics.fcp) {
                 addSeparator();
                 const fcpSpan = document.createElement('span');
-                fcpSpan.className = 'devbar-item';
+                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}`;
-                this.attachMetricTooltip(fcpSpan, 'First Contentful Paint (FCP)', 'Time until the first text or image renders on screen.', { good: '<1.8s', needsWork: '1.8-3s', poor: '>3s' });
                 infoSection.appendChild(fcpSpan);
             }
             if (showMetrics.lcp) {
                 addSeparator();
                 const lcpSpan = document.createElement('span');
-                lcpSpan.className = 'devbar-item';
+                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}`;
-                this.attachMetricTooltip(lcpSpan, 'Largest Contentful Paint (LCP)', 'Time until the largest visible element renders on screen.', { good: '<2.5s', needsWork: '2.5-4s', poor: '>4s' });
                 infoSection.appendChild(lcpSpan);
             }
             if (showMetrics.cls) {
                 addSeparator();
                 const clsSpan = document.createElement('span');
-                clsSpan.className = 'devbar-item';
+                clsSpan.className = this.tooltipClass('left', 'devbar-item');
                 Object.assign(clsSpan.style, { opacity: '0.85', cursor: 'default' });
+                clsSpan.setAttribute('data-tooltip', 'Cumulative Layout Shift (CLS): Visual stability score.\nHigher values mean more unexpected layout shifts.\n\nGood: <0.1\nNeeds work: 0.1-0.25\nPoor: >0.25');
                 clsSpan.textContent = `CLS ${this.perfStats.cls}`;
-                this.attachMetricTooltip(clsSpan, 'Cumulative Layout Shift (CLS)', 'Visual stability score. Higher values mean more unexpected layout shifts.', { good: '<0.1', needsWork: '0.1-0.25', poor: '>0.25' });
                 infoSection.appendChild(clsSpan);
             }
             if (showMetrics.inp) {
                 addSeparator();
                 const inpSpan = document.createElement('span');
-                inpSpan.className = 'devbar-item';
+                inpSpan.className = this.tooltipClass('left', 'devbar-item');
                 Object.assign(inpSpan.style, { opacity: '0.85', cursor: 'default' });
+                inpSpan.setAttribute('data-tooltip', 'Interaction to Next Paint (INP): Responsiveness to user input.\nMeasures the longest interaction delay.\n\nGood: <200ms\nNeeds work: 200-500ms\nPoor: >500ms');
                 inpSpan.textContent = `INP ${this.perfStats.inp}`;
-                this.attachMetricTooltip(inpSpan, 'Interaction to Next Paint (INP)', 'Responsiveness to user input. Measures the longest interaction delay.', { good: '<200ms', needsWork: '200-500ms', poor: '>500ms' });
                 infoSection.appendChild(inpSpan);
             }
             if (showMetrics.pageSize) {
                 addSeparator();
                 const sizeSpan = document.createElement('span');
-                sizeSpan.className = 'devbar-item';
+                sizeSpan.className = this.tooltipClass('left', 'devbar-item');
                 Object.assign(sizeSpan.style, { opacity: '0.7', cursor: 'default' });
-                this.attachInfoTooltip(sizeSpan, 'Total Page Size', 'Compressed/transferred size including HTML, CSS, JS, images, and other resources.');
+                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);
             }
@@ -2732,7 +2546,6 @@ export class GlobalDevBar {
         actionsContainer.appendChild(this.createOutlineButton());
         actionsContainer.appendChild(this.createSchemaButton());
         actionsContainer.appendChild(this.createSettingsButton());
-        actionsContainer.appendChild(this.createCompactToggleButton());
         mainRow.appendChild(actionsContainer);
         wrapper.appendChild(mainRow);
         // Render custom controls row if there are any
@@ -2787,207 +2600,6 @@ export class GlobalDevBar {
             wrapper.appendChild(customRow);
         }
     }
-    /** Create a tooltip container element */
-    createTooltipContainer() {
-        const tooltip = document.createElement('div');
-        tooltip.setAttribute('data-devbar', 'true');
-        Object.assign(tooltip.style, this.TOOLTIP_BASE_STYLES);
-        return tooltip;
-    }
-    /** Add a bold title to tooltip (metric name, feature name, etc.) */
-    addTooltipTitle(container, title) {
-        const titleEl = document.createElement('div');
-        const accentColor = this.settingsManager.get('accentColor') || COLORS.primary;
-        Object.assign(titleEl.style, {
-            color: accentColor,
-            fontWeight: '600',
-            marginBottom: '4px',
-        });
-        titleEl.textContent = title;
-        container.appendChild(titleEl);
-    }
-    /** Add a description paragraph to tooltip */
-    addTooltipDescription(container, description) {
-        const descEl = document.createElement('div');
-        Object.assign(descEl.style, {
-            color: COLORS.text,
-            marginBottom: '10px',
-            lineHeight: '1.4',
-        });
-        descEl.textContent = description;
-        container.appendChild(descEl);
-    }
-    /** Add a muted uppercase section header to tooltip */
-    addTooltipSectionHeader(container, header) {
-        const headerEl = document.createElement('div');
-        Object.assign(headerEl.style, {
-            color: COLORS.textMuted,
-            fontSize: '0.625rem',
-            textTransform: 'uppercase',
-            letterSpacing: '0.05em',
-            marginBottom: '6px',
-        });
-        headerEl.textContent = header;
-        container.appendChild(headerEl);
-    }
-    /** Add a colored row with dot + label + value (for thresholds) */
-    addTooltipColoredRow(container, label, value, color, labelWidth = '70px') {
-        const row = document.createElement('div');
-        Object.assign(row.style, { display: 'flex', alignItems: 'center', gap: '8px' });
-        const dot = document.createElement('span');
-        Object.assign(dot.style, {
-            width: '6px',
-            height: '6px',
-            borderRadius: '50%',
-            backgroundColor: color,
-            flexShrink: '0',
-        });
-        row.appendChild(dot);
-        const labelSpan = document.createElement('span');
-        Object.assign(labelSpan.style, {
-            color,
-            fontWeight: '500',
-            minWidth: labelWidth,
-        });
-        labelSpan.textContent = label;
-        row.appendChild(labelSpan);
-        const valueSpan = document.createElement('span');
-        Object.assign(valueSpan.style, { color: COLORS.textMuted });
-        valueSpan.textContent = value;
-        row.appendChild(valueSpan);
-        container.appendChild(row);
-    }
-    /** Add an info row with label + value (for breakpoint details) */
-    addTooltipInfoRow(container, label, value) {
-        const row = document.createElement('div');
-        Object.assign(row.style, {
-            display: 'flex',
-            gap: '8px',
-            lineHeight: '1.4',
-        });
-        const labelSpan = document.createElement('span');
-        Object.assign(labelSpan.style, { color: COLORS.textMuted });
-        labelSpan.textContent = label;
-        row.appendChild(labelSpan);
-        const valueSpan = document.createElement('span');
-        Object.assign(valueSpan.style, { color: COLORS.text });
-        valueSpan.textContent = value;
-        row.appendChild(valueSpan);
-        container.appendChild(row);
-    }
-    /** Position tooltip above the anchor element, adjusting for screen edges */
-    positionTooltip(tooltip, anchor) {
-        const rect = anchor.getBoundingClientRect();
-        tooltip.style.left = `${rect.left}px`;
-        tooltip.style.bottom = `${window.innerHeight - rect.top + 8}px`;
-        document.body.appendChild(tooltip);
-        // Adjust if off-screen
-        const tooltipRect = tooltip.getBoundingClientRect();
-        if (tooltipRect.right > window.innerWidth - 10) {
-            tooltip.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
-        }
-        if (tooltipRect.left < 10) {
-            tooltip.style.left = '10px';
-        }
-    }
-    /** Attach an HTML tooltip to an element with custom content builder */
-    attachHtmlTooltip(element, buildContent) {
-        let tooltipEl = null;
-        element.onmouseenter = () => {
-            tooltipEl = this.createTooltipContainer();
-            buildContent(tooltipEl);
-            this.positionTooltip(tooltipEl, element);
-        };
-        element.onmouseleave = () => {
-            if (tooltipEl) {
-                tooltipEl.remove();
-                tooltipEl = null;
-            }
-        };
-    }
-    // ============================================================================
-    // Tooltip Attachment Methods (specific tooltip types)
-    // ============================================================================
-    /** Attach a metric tooltip with title, description, and colored thresholds */
-    attachMetricTooltip(element, title, description, thresholds) {
-        this.attachHtmlTooltip(element, (tooltip) => {
-            this.addTooltipTitle(tooltip, title);
-            this.addTooltipDescription(tooltip, description);
-            this.addTooltipSectionHeader(tooltip, 'Thresholds');
-            const thresholdsContainer = document.createElement('div');
-            Object.assign(thresholdsContainer.style, {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '4px',
-            });
-            this.addTooltipColoredRow(thresholdsContainer, 'Good', thresholds.good, COLORS.primary);
-            this.addTooltipColoredRow(thresholdsContainer, 'Needs work', thresholds.needsWork, COLORS.warning);
-            this.addTooltipColoredRow(thresholdsContainer, 'Poor', thresholds.poor, COLORS.error);
-            tooltip.appendChild(thresholdsContainer);
-        });
-    }
-    /** Attach a breakpoint tooltip showing current breakpoint and all breakpoint ranges */
-    attachBreakpointTooltip(element, breakpoint, dimensions, breakpointLabel) {
-        this.attachHtmlTooltip(element, (tooltip) => {
-            this.addTooltipTitle(tooltip, 'Tailwind Breakpoint');
-            // Current breakpoint info
-            const currentSection = document.createElement('div');
-            Object.assign(currentSection.style, { marginBottom: '10px' });
-            this.addTooltipInfoRow(currentSection, 'Current:', `${breakpoint} (${breakpointLabel})`);
-            this.addTooltipInfoRow(currentSection, 'Viewport:', dimensions);
-            tooltip.appendChild(currentSection);
-            // Breakpoints reference
-            this.addTooltipSectionHeader(tooltip, 'Breakpoints');
-            const bpContainer = document.createElement('div');
-            Object.assign(bpContainer.style, {
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '2px',
-                fontSize: '0.625rem',
-            });
-            const breakpoints = [
-                { name: 'base', range: '<640px' },
-                { name: 'sm', range: '≥640px' },
-                { name: 'md', range: '≥768px' },
-                { name: 'lg', range: '≥1024px' },
-                { name: 'xl', range: '≥1280px' },
-                { name: '2xl', range: '≥1536px' },
-            ];
-            for (const bp of breakpoints) {
-                const row = document.createElement('div');
-                Object.assign(row.style, { display: 'flex', gap: '8px' });
-                const nameSpan = document.createElement('span');
-                Object.assign(nameSpan.style, {
-                    color: bp.name === breakpoint ? COLORS.primary : COLORS.textMuted,
-                    fontWeight: bp.name === breakpoint ? '600' : '400',
-                    minWidth: '32px',
-                });
-                nameSpan.textContent = bp.name;
-                row.appendChild(nameSpan);
-                const rangeSpan = document.createElement('span');
-                Object.assign(rangeSpan.style, {
-                    color: bp.name === breakpoint ? COLORS.text : COLORS.textMuted,
-                });
-                rangeSpan.textContent = bp.range;
-                row.appendChild(rangeSpan);
-                bpContainer.appendChild(row);
-            }
-            tooltip.appendChild(bpContainer);
-        });
-    }
-    /** Attach a simple info tooltip with title and description */
-    attachInfoTooltip(element, title, description) {
-        this.attachHtmlTooltip(element, (tooltip) => {
-            this.addTooltipTitle(tooltip, title);
-            const descEl = document.createElement('div');
-            Object.assign(descEl.style, {
-                color: COLORS.text,
-                lineHeight: '1.4',
-            });
-            descEl.textContent = description;
-            tooltip.appendChild(descEl);
-        });
-    }
     /**
      * Create a console badge for error/warning counts
      */
@@ -3026,9 +2638,6 @@ export class GlobalDevBar {
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
         const hasSuccessState = this.copiedToClipboard || this.copiedPath || this.lastScreenshot;
-        const isDisabled = this.capturing;
-        // Grey out when not connected (save won't work, but clipboard still does)
-        const isGreyedOut = !this.sweetlinkConnected && !hasSuccessState;
         const tooltip = this.getScreenshotTooltip();
         btn.setAttribute('data-tooltip', tooltip);
         Object.assign(btn.style, {
@@ -3045,11 +2654,11 @@ export class GlobalDevBar {
             borderColor: hasSuccessState ? accentColor : `${accentColor}80`,
             backgroundColor: hasSuccessState ? `${accentColor}33` : 'transparent',
             color: hasSuccessState ? accentColor : `${accentColor}99`,
-            cursor: !isDisabled ? 'pointer' : 'not-allowed',
-            opacity: isGreyedOut ? '0.4' : '1',
+            cursor: !this.capturing ? 'pointer' : 'not-allowed',
+            opacity: '1',
             transition: 'all 150ms',
         });
-        btn.disabled = isDisabled;
+        btn.disabled = this.capturing;
         btn.onclick = (e) => {
             // If we have a saved screenshot path, clicking copies the path
             if (this.lastScreenshot && !e.shiftKey) {
@@ -3106,10 +2715,10 @@ export class GlobalDevBar {
         if (this.lastScreenshot) {
             return `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`;
         }
-        if (!this.sweetlinkConnected) {
-            return `Screenshot (Disconnected)\n\nShift+Click: Copy to clipboard\n\n⚠ Sweetlink not connected\nSave to file unavailable`;
-        }
-        return `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy`;
+        const baseTooltip = `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy`;
+        return this.sweetlinkConnected
+            ? baseTooltip
+            : `${baseTooltip}\n\nWarning: Sweetlink not connected`;
     }
     /**
      * Get the tooltip text for the AI review button based on current state
@@ -3169,16 +2778,9 @@ export class GlobalDevBar {
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
-        let tooltip;
-        if (this.lastOutline) {
-            tooltip = `Outline saved to:\n${this.lastOutline}`;
-        }
-        else if (!this.sweetlinkConnected) {
-            tooltip = `Document Outline\n\nView page heading structure.\n\n⚠ Sweetlink not connected\nSave to file unavailable`;
-        }
-        else {
-            tooltip = `Document Outline\n\nView page heading structure and\nsave as markdown.`;
-        }
+        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));
@@ -3196,16 +2798,9 @@ export class GlobalDevBar {
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
-        let tooltip;
-        if (this.lastSchema) {
-            tooltip = `Schema saved to:\n${this.lastSchema}`;
-        }
-        else if (!this.sweetlinkConnected) {
-            tooltip = `Page Schema\n\nView JSON-LD, Open Graph, and\nother structured data.\n\n⚠ Sweetlink not connected\nSave to file unavailable`;
-        }
-        else {
-            tooltip = `Page Schema\n\nView JSON-LD, Open Graph, and\nother structured data.`;
-        }
+        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));

package/dist/constants.d.ts

@@ -11,16 +11,8 @@ export declare const MAX_RECONNECT_ATTEMPTS = 10;
 export declare const BASE_RECONNECT_DELAY_MS = 1000;
 /** Maximum delay between reconnection attempts (ms) */
 export declare const MAX_RECONNECT_DELAY_MS = 30000;
-/** Default WebSocket port for Sweetlink connection (legacy fallback) */
+/** Default WebSocket port for Sweetlink connection */
 export declare const WS_PORT = 9223;
-/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
-export declare const WS_PORT_OFFSET = 6223;
-/** Maximum ports to try when scanning for matching server */
-export declare const MAX_PORT_RETRIES = 10;
-/** Delay between port scan attempts (ms) */
-export declare const PORT_RETRY_DELAY_MS = 100;
-/** Delay before restarting port scan from base after all ports fail (ms) */
-export declare const PORT_SCAN_RESTART_DELAY_MS = 3000;
 /** Duration to show screenshot notification (ms) */
 export declare const SCREENSHOT_NOTIFICATION_MS = 3000;
 /** Duration to show clipboard notification (ms) */
@@ -138,28 +130,28 @@ export declare const DEVBAR_THEME: {
     };
 };
 export type DevBarTheme = typeof DEVBAR_THEME;
-/** Light theme variant - terminal aesthetic with light green tones */
+/** Light theme variant - same structure, different colors */
 export declare const DEVBAR_THEME_LIGHT: {
     readonly colors: {
-        readonly primary: "#047857";
-        readonly primaryHover: "#065f46";
-        readonly primaryGlow: "rgba(4, 120, 87, 0.25)";
-        readonly error: "#dc2626";
+        readonly primary: "#059669";
+        readonly primaryHover: "#047857";
+        readonly primaryGlow: "rgba(5, 150, 105, 0.2)";
+        readonly error: "#ef4444";
         readonly warning: "#d97706";
         readonly info: "#2563eb";
-        readonly purple: "#7c3aed";
+        readonly purple: "#9333ea";
         readonly cyan: "#0891b2";
         readonly pink: "#db2777";
         readonly lime: "#65a30d";
-        readonly bg: "#ecfdf5";
-        readonly bgCard: "rgba(255, 255, 255, 0.85)";
-        readonly bgElevated: "rgba(255, 255, 255, 0.95)";
-        readonly bgInput: "rgba(236, 253, 245, 0.9)";
-        readonly text: "#064e3b";
-        readonly textSecondary: "#065f46";
-        readonly textMuted: "#047857";
-        readonly border: "rgba(4, 120, 87, 0.3)";
-        readonly borderSubtle: "rgba(4, 120, 87, 0.1)";
+        readonly bg: "#f8fafc";
+        readonly bgCard: "rgba(255, 255, 255, 0.98)";
+        readonly bgElevated: "rgba(255, 255, 255, 0.99)";
+        readonly bgInput: "rgba(241, 245, 249, 0.9)";
+        readonly text: "#1e293b";
+        readonly textSecondary: "#475569";
+        readonly textMuted: "#64748b";
+        readonly border: "rgba(5, 150, 105, 0.25)";
+        readonly borderSubtle: "rgba(0, 0, 0, 0.06)";
     };
     readonly fonts: {
         readonly mono: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
@@ -189,10 +181,10 @@ export declare const DEVBAR_THEME_LIGHT: {
         readonly lg: "12px";
     };
     readonly shadows: {
-        readonly sm: "0 1px 2px rgba(4, 120, 87, 0.1)";
-        readonly md: "0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)";
-        readonly lg: "0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)";
-        readonly glow: "0 0 20px rgba(4, 120, 87, 0.15)";
+        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.08)";
+        readonly md: "0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(5, 150, 105, 0.1)";
+        readonly lg: "0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(5, 150, 105, 0.12)";
+        readonly glow: "0 0 20px rgba(5, 150, 105, 0.1)";
     };
     readonly transitions: {
         readonly fast: "150ms";

package/dist/constants.js

@@ -18,16 +18,8 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
 // ============================================================================
 // WebSocket Settings
 // ============================================================================
-/** Default WebSocket port for Sweetlink connection (legacy fallback) */
+/** Default WebSocket port for Sweetlink connection */
 export const WS_PORT = 9223;
-/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
-export const WS_PORT_OFFSET = 6223;
-/** Maximum ports to try when scanning for matching server */
-export const MAX_PORT_RETRIES = 10;
-/** Delay between port scan attempts (ms) */
-export const PORT_RETRY_DELAY_MS = 100;
-/** Delay before restarting port scan from base after all ports fail (ms) */
-export const PORT_SCAN_RESTART_DELAY_MS = 3000;
 // ============================================================================
 // Notification Durations
 // ============================================================================
@@ -182,44 +174,44 @@ export const DEVBAR_THEME = {
         fast: '150ms',
     },
 };
-/** Light theme variant - terminal aesthetic with light green tones */
+/** Light theme variant - same structure, different colors */
 export const DEVBAR_THEME_LIGHT = {
     colors: {
-        // Primary accent (darker emerald for contrast)
-        primary: '#047857', // darker emerald for better contrast
-        primaryHover: '#065f46',
-        primaryGlow: 'rgba(4, 120, 87, 0.25)',
-        // Semantic colors (adjusted for light bg)
-        error: '#dc2626',
-        warning: '#d97706',
-        info: '#2563eb',
-        // Extended palette (darker for light mode)
-        purple: '#7c3aed',
+        // Primary accent (darker for light mode)
+        primary: '#059669', // darker emerald
+        primaryHover: '#047857',
+        primaryGlow: 'rgba(5, 150, 105, 0.2)',
+        // Semantic colors (same)
+        error: PALETTE.red,
+        warning: '#d97706', // darker amber
+        info: '#2563eb', // darker blue
+        // Extended palette (darker variants)
+        purple: '#9333ea',
         cyan: '#0891b2',
         pink: '#db2777',
         lime: '#65a30d',
-        // Backgrounds - terminal light green aesthetic
-        bg: '#ecfdf5', // very light mint/green
-        bgCard: 'rgba(255, 255, 255, 0.85)',
-        bgElevated: 'rgba(255, 255, 255, 0.95)',
-        bgInput: 'rgba(236, 253, 245, 0.9)', // light mint input
+        // Backgrounds (light)
+        bg: '#f8fafc',
+        bgCard: 'rgba(255, 255, 255, 0.98)',
+        bgElevated: 'rgba(255, 255, 255, 0.99)',
+        bgInput: 'rgba(241, 245, 249, 0.9)',
         // Text (dark on light)
-        text: '#064e3b', // dark emerald text
-        textSecondary: '#065f46',
-        textMuted: '#047857',
-        // Borders (emerald-tinted)
-        border: 'rgba(4, 120, 87, 0.3)',
-        borderSubtle: 'rgba(4, 120, 87, 0.1)',
+        text: '#1e293b',
+        textSecondary: '#475569',
+        textMuted: '#64748b',
+        // Borders (green-tinted)
+        border: 'rgba(5, 150, 105, 0.25)',
+        borderSubtle: 'rgba(0, 0, 0, 0.06)',
     },
     // Other properties same as dark theme
     fonts: DEVBAR_THEME.fonts,
     typography: DEVBAR_THEME.typography,
     radius: DEVBAR_THEME.radius,
     shadows: {
-        sm: '0 1px 2px rgba(4, 120, 87, 0.1)',
-        md: '0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)',
-        lg: '0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)',
-        glow: '0 0 20px rgba(4, 120, 87, 0.15)',
+        sm: '0 1px 2px rgba(0, 0, 0, 0.08)',
+        md: '0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(5, 150, 105, 0.1)',
+        lg: '0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(5, 150, 105, 0.12)',
+        glow: '0 0 20px rgba(5, 150, 105, 0.1)',
     },
     transitions: DEVBAR_THEME.transitions,
 };

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export { type A11yState, type AxeResult, type AxeViolation, clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
-export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, type DevBarTheme, type DevBarThemeInput, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, type TailwindBreakpoint, type ThemeColors, } from './constants.js';
+export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, type DevBarTheme, type DevBarThemeInput, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, setStoredThemeMode, STORAGE_KEYS, TAILWIND_BREAKPOINTS, type TailwindBreakpoint, type ThemeColors, } from './constants.js';
 export { DebugLogger, normalizeDebugConfig } from './debug.js';
 export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
 export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
+export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
-export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, type NetworkEntry, NetworkMonitor, type NetworkState, } from './network.js';
 export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
-export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { extractPageSchema, schemaToMarkdown } from './schema.js';
-export { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, type NetworkEntry, type NetworkState, } from './network.js';
+export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, type CookieItem, type StorageData, type StorageItem, } from './storage.js';
+export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, type A11yState, type AxeResult, type AxeViolation, } from './accessibility.js';
 export type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode, } from './types.js';
 export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/index.js

@@ -1,25 +1,25 @@
 // DevBar - Development toolbar and utilities
 // Pure vanilla JavaScript - no framework dependencies
-// Accessibility audit utilities
-export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
 // Re-export constants and theme utilities
-export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, } from './constants.js';
+export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, setStoredThemeMode, STORAGE_KEYS, TAILWIND_BREAKPOINTS, } from './constants.js';
 // Debug utilities
 export { DebugLogger, normalizeDebugConfig } from './debug.js';
 // Early console capture script for injection
 export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
 // Main vanilla JS devbar
 export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
+// Configuration presets
+export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 // Lazy loading utilities
 export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
-// Network monitoring utilities
-export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
 // Re-export outline/schema functions
 export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
-// Configuration presets
-export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { extractPageSchema, schemaToMarkdown } from './schema.js';
+// Network monitoring utilities
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
 // Storage inspection utilities
 export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
+// Accessibility audit utilities
+export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
 // Re-export utilities for external use
 export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/presets.d.ts

@@ -3,7 +3,7 @@
  *
  * Pre-configured options for common DevBar use cases.
  */
-import { type GlobalDevBar } from './GlobalDevBar.js';
+import { GlobalDevBar } from './GlobalDevBar.js';
 import type { GlobalDevBarOptions } from './types.js';
 /**
  * Minimal preset - shows only essential features

package/dist/ui/modals.d.ts

@@ -13,10 +13,6 @@ export interface ModalConfig {
     onCopyMd: () => Promise<void>;
     onSave?: () => void;
     sweetlinkConnected: boolean;
-    /** Whether a save operation is in progress */
-    isSaving?: boolean;
-    /** Path where data was saved (shows confirmation) */
-    savedPath?: string | null;
 }
 /**
  * Create modal overlay with click-outside-to-close behavior

package/dist/ui/modals.js

@@ -34,7 +34,7 @@ export function createModalBox(color) {
  * Create modal header with title, copy/save/close buttons
  */
 export function createModalHeader(config) {
-    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected, isSaving, savedPath } = config;
+    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected } = config;
     const header = document.createElement('div');
     Object.assign(header.style, {
         display: 'flex',
@@ -42,8 +42,6 @@ export function createModalHeader(config) {
         justifyContent: 'space-between',
         padding: '16px 20px',
         borderBottom: `1px solid ${color}40`,
-        flexWrap: 'wrap',
-        gap: '8px',
     });
     const titleEl = document.createElement('h2');
     Object.assign(titleEl.style, {
@@ -55,7 +53,7 @@ export function createModalHeader(config) {
     titleEl.textContent = title;
     header.appendChild(titleEl);
     const headerButtons = document.createElement('div');
-    Object.assign(headerButtons.style, { display: 'flex', gap: '10px', alignItems: 'center' });
+    Object.assign(headerButtons.style, { display: 'flex', gap: '10px' });
     // Copy MD button
     const copyBtn = createStyledButton({ color, text: 'Copy MD' });
     copyBtn.onclick = async () => {
@@ -73,17 +71,8 @@ export function createModalHeader(config) {
     headerButtons.appendChild(copyBtn);
     // Save button (if Sweetlink connected)
     if (sweetlinkConnected && onSave) {
-        const saveBtn = createStyledButton({
-            color,
-            text: isSaving ? 'Saving...' : 'Save',
-        });
-        if (isSaving) {
-            saveBtn.style.opacity = '0.6';
-            saveBtn.style.cursor = 'not-allowed';
-        }
-        else {
-            saveBtn.onclick = onSave;
-        }
+        const saveBtn = createStyledButton({ color, text: 'Save' });
+        saveBtn.onclick = onSave;
         headerButtons.appendChild(saveBtn);
     }
     // Close button - use same padding as other buttons for consistent height
@@ -96,39 +85,6 @@ export function createModalHeader(config) {
     closeBtn.onclick = onClose;
     headerButtons.appendChild(closeBtn);
     header.appendChild(headerButtons);
-    // Show saved path confirmation below buttons
-    if (savedPath) {
-        const savedConfirm = document.createElement('div');
-        Object.assign(savedConfirm.style, {
-            width: '100%',
-            marginTop: '4px',
-            padding: '8px 12px',
-            backgroundColor: `${color}15`,
-            border: `1px solid ${color}30`,
-            borderRadius: '6px',
-            fontSize: '0.75rem',
-            color: color,
-            display: 'flex',
-            alignItems: 'center',
-            gap: '6px',
-        });
-        // Checkmark icon
-        const checkmark = document.createElement('span');
-        checkmark.textContent = '✓';
-        Object.assign(checkmark.style, { fontWeight: '600' });
-        savedConfirm.appendChild(checkmark);
-        // Path text
-        const pathText = document.createElement('span');
-        Object.assign(pathText.style, {
-            color: '#9ca3af',
-            fontFamily: 'monospace',
-            fontSize: '0.6875rem',
-            wordBreak: 'break-all',
-        });
-        pathText.textContent = `Saved to ${savedPath}`;
-        savedConfirm.appendChild(pathText);
-        header.appendChild(savedConfirm);
-    }
     return header;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ytspar/devbar",
-  "version": "1.0.0-canary.2b99e1e",
+  "version": "1.0.0-canary.3c85c90",
   "type": "module",
   "private": false,
   "description": "Development toolbar and utilities with Sweetlink integration - pure vanilla JS, no framework dependencies",