@ytspar/devbar 1.0.0-canary.3c85c90 → 1.0.0-canary.4b73445

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 { DevBarSettings, DevBarPosition, MetricsVisibility } from './settings.js';
-export { DEFAULT_SETTINGS, ACCENT_COLOR_PRESETS, getSettingsManager } from './settings.js';
+export type { DevBarPosition, DevBarSettings, MetricsVisibility } from './settings.js';
+export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
 interface EarlyConsoleCapture {
     errorCount: number;
     warningCount: number;
@@ -46,6 +46,8 @@ export declare class GlobalDevBar {
     private apiKeyStatus;
     private lastOutline;
     private lastSchema;
+    private savingOutline;
+    private savingSchema;
     private consoleFilter;
     private showOutlineModal;
     private showSchemaModal;
@@ -55,6 +57,10 @@ 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;
@@ -231,6 +237,10 @@ 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
      */
@@ -249,6 +259,30 @@ 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, 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 { 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 { 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 { DEFAULT_SETTINGS, ACCENT_COLOR_PRESETS, getSettingsManager } from './settings.js';
+export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
 const html2canvas = (html2canvasModule.default ??
     html2canvasModule);
 const earlyConsoleCapture = (() => {
@@ -91,6 +91,8 @@ 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;
@@ -101,6 +103,8 @@ 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;
@@ -127,11 +131,39 @@ 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,
@@ -345,27 +377,64 @@ export class GlobalDevBar {
             document.head.appendChild(style);
         }
     }
-    connectWebSocket() {
+    connectWebSocket(port) {
         if (this.destroyed)
             return;
-        this.debug.ws('Connecting to WebSocket', { port: WS_PORT });
-        const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
+        const targetPort = port ?? this.baseWsPort;
+        this.debug.ws('Connecting to WebSocket', { port: targetPort, appPort: this.currentAppPort });
+        const ws = new WebSocket(`ws://localhost:${targetPort}`);
         this.ws = ws;
+        this.wsVerified = false;
         ws.onopen = () => {
-            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);
+            this.debug.ws('WebSocket socket opened, awaiting server-info');
             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 command = JSON.parse(event.data);
+                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;
                 this.debug.ws('Received command', { type: command.type });
                 await this.handleSweetlinkCommand(command);
             }
@@ -374,16 +443,21 @@ export class GlobalDevBar {
             }
         };
         ws.onclose = () => {
-            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));
+            // 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));
+                }
             }
         };
         ws.onerror = () => {
@@ -579,6 +653,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'outline':
+                this.savingOutline = false;
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
@@ -588,6 +663,7 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'schema':
+                this.savingSchema = false;
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
@@ -720,7 +796,11 @@ 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);
@@ -777,12 +857,16 @@ 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),
                     });
@@ -809,6 +893,8 @@ 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();
     }
@@ -1062,9 +1148,13 @@ 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: {
@@ -1078,9 +1168,13 @@ 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: {
@@ -1458,6 +1552,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveOutline(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingOutline,
+            savedPath: this.lastOutline,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1544,6 +1640,8 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveSchema(),
             sweetlinkConnected: this.sweetlinkConnected,
+            isSaving: this.savingSchema,
+            savedPath: this.lastSchema,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1901,6 +1999,64 @@ 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
      */
@@ -2054,49 +2210,78 @@ export class GlobalDevBar {
         popover.appendChild(themeSection);
         // ========== DISPLAY SECTION ==========
         const displaySection = this.createSettingsSection('Display');
-        // Position dropdown
+        // Position mini-map selector
         const positionRow = document.createElement('div');
-        Object.assign(positionRow.style, {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            marginBottom: '8px',
+        Object.assign(positionRow.style, { marginBottom: '10px' });
+        const posLabel = document.createElement('div');
+        Object.assign(posLabel.style, {
+            color: COLORS.text,
+            fontSize: '0.6875rem',
+            marginBottom: '6px',
         });
-        const posLabel = document.createElement('span');
-        Object.assign(posLabel.style, { color: COLORS.text, fontSize: '0.6875rem' });
         posLabel.textContent = 'Position';
         positionRow.appendChild(posLabel);
-        const posSelect = document.createElement('select');
-        Object.assign(posSelect.style, {
-            backgroundColor: 'rgba(10, 15, 26, 0.8)',
-            border: `1px solid ${color}40`,
+        // 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`,
             borderRadius: '4px',
-            color: COLORS.text,
-            fontSize: '0.625rem',
-            padding: '4px 6px',
-            cursor: 'pointer',
-            fontFamily: FONT_MONO,
         });
-        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' },
+        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',
+            },
         ];
-        positions.forEach(({ value, label }) => {
-            const option = document.createElement('option');
-            option.value = value;
-            option.textContent = label;
-            option.selected = this.options.position === value;
-            posSelect.appendChild(option);
+        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);
         });
-        posSelect.onchange = () => {
-            this.options.position = posSelect.value;
-            this.settingsManager.saveSettings({ position: this.options.position });
-            this.render();
-        };
-        positionRow.appendChild(posSelect);
+        positionRow.appendChild(miniMap);
         displaySection.appendChild(positionRow);
         // Compact mode toggle
         displaySection.appendChild(this.createToggleRow('Compact Mode', this.compactMode, accentColor, () => {
@@ -2458,9 +2643,10 @@ export class GlobalDevBar {
             const bp = this.breakpointInfo.tailwindBreakpoint;
             const breakpointData = TAILWIND_BREAKPOINTS[bp];
             const bpSpan = document.createElement('span');
-            bpSpan.className = this.tooltipClass('left', 'devbar-item');
+            bpSpan.className = '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`);
+            // Use HTML tooltip for breakpoint info
+            this.attachBreakpointTooltip(bpSpan, bp, this.breakpointInfo.dimensions, breakpointData?.label || '');
             let bpText = bp;
             if (bp !== 'base') {
                 bpText =
@@ -2482,45 +2668,45 @@ export class GlobalDevBar {
             if (showMetrics.fcp) {
                 addSeparator();
                 const fcpSpan = document.createElement('span');
-                fcpSpan.className = this.tooltipClass('left', 'devbar-item');
+                fcpSpan.className = '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 = this.tooltipClass('left', 'devbar-item');
+                lcpSpan.className = '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 = this.tooltipClass('left', 'devbar-item');
+                clsSpan.className = '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 = this.tooltipClass('left', 'devbar-item');
+                inpSpan.className = '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 = this.tooltipClass('left', 'devbar-item');
+                sizeSpan.className = '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.');
+                this.attachInfoTooltip(sizeSpan, 'Total Page Size', 'Compressed/transferred size including HTML, CSS, JS, images, and other resources.');
                 sizeSpan.textContent = this.perfStats.totalSize;
                 infoSection.appendChild(sizeSpan);
             }
@@ -2546,6 +2732,7 @@ 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
@@ -2600,6 +2787,207 @@ 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
      */
@@ -2638,6 +3026,9 @@ 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, {
@@ -2654,11 +3045,11 @@ export class GlobalDevBar {
             borderColor: hasSuccessState ? accentColor : `${accentColor}80`,
             backgroundColor: hasSuccessState ? `${accentColor}33` : 'transparent',
             color: hasSuccessState ? accentColor : `${accentColor}99`,
-            cursor: !this.capturing ? 'pointer' : 'not-allowed',
-            opacity: '1',
+            cursor: !isDisabled ? 'pointer' : 'not-allowed',
+            opacity: isGreyedOut ? '0.4' : '1',
             transition: 'all 150ms',
         });
-        btn.disabled = this.capturing;
+        btn.disabled = isDisabled;
         btn.onclick = (e) => {
             // If we have a saved screenshot path, clicking copies the path
             if (this.lastScreenshot && !e.shiftKey) {
@@ -2715,10 +3106,10 @@ export class GlobalDevBar {
         if (this.lastScreenshot) {
             return `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`;
         }
-        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`;
+        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`;
     }
     /**
      * Get the tooltip text for the AI review button based on current state
@@ -2778,9 +3169,16 @@ export class GlobalDevBar {
         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.`;
+        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.`;
+        }
         btn.setAttribute('data-tooltip', tooltip);
         const isActive = this.showOutlineModal || !!this.lastOutline;
         Object.assign(btn.style, getButtonStyles(BUTTON_COLORS.outline, isActive, false));
@@ -2798,9 +3196,16 @@ export class GlobalDevBar {
         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.`;
+        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.`;
+        }
         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,8 +11,16 @@ 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 */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 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) */
@@ -130,28 +138,28 @@ export declare const DEVBAR_THEME: {
     };
 };
 export type DevBarTheme = typeof DEVBAR_THEME;
-/** Light theme variant - same structure, different colors */
+/** Light theme variant - terminal aesthetic with light green tones */
 export declare const DEVBAR_THEME_LIGHT: {
     readonly colors: {
-        readonly primary: "#059669";
-        readonly primaryHover: "#047857";
-        readonly primaryGlow: "rgba(5, 150, 105, 0.2)";
-        readonly error: "#ef4444";
+        readonly primary: "#047857";
+        readonly primaryHover: "#065f46";
+        readonly primaryGlow: "rgba(4, 120, 87, 0.25)";
+        readonly error: "#dc2626";
         readonly warning: "#d97706";
         readonly info: "#2563eb";
-        readonly purple: "#9333ea";
+        readonly purple: "#7c3aed";
         readonly cyan: "#0891b2";
         readonly pink: "#db2777";
         readonly lime: "#65a30d";
-        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 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 fonts: {
         readonly mono: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
@@ -181,10 +189,10 @@ export declare const DEVBAR_THEME_LIGHT: {
         readonly lg: "12px";
     };
     readonly shadows: {
-        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 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 transitions: {
         readonly fast: "150ms";

package/dist/constants.js

@@ -18,8 +18,16 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
 // ============================================================================
 // WebSocket Settings
 // ============================================================================
-/** Default WebSocket port for Sweetlink connection */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 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
 // ============================================================================
@@ -174,44 +182,44 @@ export const DEVBAR_THEME = {
         fast: '150ms',
     },
 };
-/** Light theme variant - same structure, different colors */
+/** Light theme variant - terminal aesthetic with light green tones */
 export const DEVBAR_THEME_LIGHT = {
     colors: {
-        // 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',
+        // 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',
         cyan: '#0891b2',
         pink: '#db2777',
         lime: '#65a30d',
-        // 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)',
+        // 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
         // Text (dark on light)
-        text: '#1e293b',
-        textSecondary: '#475569',
-        textMuted: '#64748b',
-        // Borders (green-tinted)
-        border: 'rgba(5, 150, 105, 0.25)',
-        borderSubtle: 'rgba(0, 0, 0, 0.06)',
+        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)',
     },
     // Other properties same as dark theme
     fonts: DEVBAR_THEME.fonts,
     typography: DEVBAR_THEME.typography,
     radius: DEVBAR_THEME.radius,
     shadows: {
-        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)',
+        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)',
     },
     transitions: DEVBAR_THEME.transitions,
 };

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-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 { 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 { 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 { 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 { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.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, setStoredThemeMode, STORAGE_KEYS, 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, STORAGE_KEYS, setStoredThemeMode, 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 { GlobalDevBar } from './GlobalDevBar.js';
+import { type GlobalDevBar } from './GlobalDevBar.js';
 import type { GlobalDevBarOptions } from './types.js';
 /**
  * Minimal preset - shows only essential features

package/dist/ui/modals.d.ts

@@ -13,6 +13,10 @@ 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 } = config;
+    const { color, title, onClose, onCopyMd, onSave, sweetlinkConnected, isSaving, savedPath } = config;
     const header = document.createElement('div');
     Object.assign(header.style, {
         display: 'flex',
@@ -42,6 +42,8 @@ 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, {
@@ -53,7 +55,7 @@ export function createModalHeader(config) {
     titleEl.textContent = title;
     header.appendChild(titleEl);
     const headerButtons = document.createElement('div');
-    Object.assign(headerButtons.style, { display: 'flex', gap: '10px' });
+    Object.assign(headerButtons.style, { display: 'flex', gap: '10px', alignItems: 'center' });
     // Copy MD button
     const copyBtn = createStyledButton({ color, text: 'Copy MD' });
     copyBtn.onclick = async () => {
@@ -71,8 +73,17 @@ export function createModalHeader(config) {
     headerButtons.appendChild(copyBtn);
     // Save button (if Sweetlink connected)
     if (sweetlinkConnected && onSave) {
-        const saveBtn = createStyledButton({ color, text: 'Save' });
-        saveBtn.onclick = 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;
+        }
         headerButtons.appendChild(saveBtn);
     }
     // Close button - use same padding as other buttons for consistent height
@@ -85,6 +96,39 @@ 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.3c85c90",
+  "version": "1.0.0-canary.4b73445",
   "type": "module",
   "private": false,
   "description": "Development toolbar and utilities with Sweetlink integration - pure vanilla JS, no framework dependencies",