@ytspar/devbar 1.0.0-canary.4b73445 → 1.0.0-canary.6349f79

package/dist/GlobalDevBar.d.ts

@@ -259,30 +259,10 @@ 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 */
+    /**
+     * Attach an HTML tooltip with colored threshold labels to a metric element
+     */
     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

@@ -131,23 +131,6 @@ 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);
@@ -2643,10 +2626,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 =
@@ -2671,7 +2653,7 @@ export class GlobalDevBar {
                 fcpSpan.className = 'devbar-item';
                 Object.assign(fcpSpan.style, { opacity: '0.85', cursor: 'default' });
                 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' });
+                this.attachMetricTooltip(fcpSpan, 'First Contentful Paint (FCP): Time until first text/image renders.', { good: '<1.8s', needsWork: '1.8-3s', poor: '>3s' });
                 infoSection.appendChild(fcpSpan);
             }
             if (showMetrics.lcp) {
@@ -2680,7 +2662,7 @@ export class GlobalDevBar {
                 lcpSpan.className = 'devbar-item';
                 Object.assign(lcpSpan.style, { opacity: '0.85', cursor: 'default' });
                 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' });
+                this.attachMetricTooltip(lcpSpan, 'Largest Contentful Paint (LCP): Time until largest visible element renders.', { good: '<2.5s', needsWork: '2.5-4s', poor: '>4s' });
                 infoSection.appendChild(lcpSpan);
             }
             if (showMetrics.cls) {
@@ -2689,7 +2671,7 @@ export class GlobalDevBar {
                 clsSpan.className = 'devbar-item';
                 Object.assign(clsSpan.style, { opacity: '0.85', cursor: 'default' });
                 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' });
+                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) {
@@ -2698,15 +2680,15 @@ export class GlobalDevBar {
                 inpSpan.className = 'devbar-item';
                 Object.assign(inpSpan.style, { opacity: '0.85', cursor: 'default' });
                 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' });
+                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);
             }
@@ -2787,206 +2769,104 @@ 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) {
+    /**
+     * Attach an HTML tooltip with colored threshold labels to a metric element
+     */
+    attachMetricTooltip(element, description, thresholds) {
         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',
+            tooltipEl = document.createElement('div');
+            tooltipEl.setAttribute('data-devbar', 'true');
+            Object.assign(tooltipEl.style, {
+                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',
             });
-            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, {
+            // Description
+            const descEl = document.createElement('div');
+            Object.assign(descEl.style, {
+                color: COLORS.text,
+                marginBottom: '10px',
+                lineHeight: '1.4',
+            });
+            descEl.textContent = description;
+            tooltipEl.appendChild(descEl);
+            // Thresholds header
+            const thresholdsHeader = document.createElement('div');
+            Object.assign(thresholdsHeader.style, {
+                color: COLORS.textMuted,
+                fontSize: '0.625rem',
+                textTransform: 'uppercase',
+                letterSpacing: '0.05em',
+                marginBottom: '6px',
+            });
+            thresholdsHeader.textContent = 'Thresholds';
+            tooltipEl.appendChild(thresholdsHeader);
+            // Thresholds with colors
+            const thresholdsEl = document.createElement('div');
+            Object.assign(thresholdsEl.style, {
                 display: 'flex',
                 flexDirection: 'column',
-                gap: '2px',
-                fontSize: '0.625rem',
+                gap: '4px',
             });
-            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 addThreshold = (label, value, color) => {
                 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',
+                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',
                 });
-                nameSpan.textContent = bp.name;
-                row.appendChild(nameSpan);
-                const rangeSpan = document.createElement('span');
-                Object.assign(rangeSpan.style, {
-                    color: bp.name === breakpoint ? COLORS.text : COLORS.textMuted,
+                row.appendChild(dot);
+                const labelSpan = document.createElement('span');
+                Object.assign(labelSpan.style, {
+                    color,
+                    fontWeight: '500',
+                    minWidth: '70px',
                 });
-                rangeSpan.textContent = bp.range;
-                row.appendChild(rangeSpan);
-                bpContainer.appendChild(row);
+                labelSpan.textContent = label;
+                row.appendChild(labelSpan);
+                const valueSpan = document.createElement('span');
+                Object.assign(valueSpan.style, { color: COLORS.textMuted });
+                valueSpan.textContent = value;
+                row.appendChild(valueSpan);
+                thresholdsEl.appendChild(row);
+            };
+            addThreshold('Good', thresholds.good, COLORS.primary);
+            addThreshold('Needs work', thresholds.needsWork, COLORS.warning);
+            addThreshold('Poor', thresholds.poor, COLORS.error);
+            tooltipEl.appendChild(thresholdsEl);
+            // Position tooltip above element
+            const rect = element.getBoundingClientRect();
+            tooltipEl.style.left = `${rect.left}px`;
+            tooltipEl.style.bottom = `${window.innerHeight - rect.top + 8}px`;
+            document.body.appendChild(tooltipEl);
+            // Adjust if off-screen
+            const tooltipRect = tooltipEl.getBoundingClientRect();
+            if (tooltipRect.right > window.innerWidth - 10) {
+                tooltipEl.style.left = `${window.innerWidth - tooltipRect.width - 10}px`;
             }
-            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);
-        });
+            if (tooltipRect.left < 10) {
+                tooltipEl.style.left = '10px';
+            }
+        };
+        element.onmouseleave = () => {
+            if (tooltipEl) {
+                tooltipEl.remove();
+                tooltipEl = null;
+            }
+        };
     }
     /**
      * Create a console badge for error/warning counts
@@ -3026,9 +2906,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 +2922,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 +2983,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 +3046,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 +3066,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/package.json

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