@ytspar/devbar 1.0.0-canary.3007fc6 → 1.0.0-canary.92db425

package/dist/GlobalDevBar.d.ts

@@ -7,8 +7,8 @@
  * This is a vanilla JS replacement for the React-based GlobalDevBar component
  * to avoid React dependency conflicts in host applications.
  */
-import type { ConsoleLog, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand } from './types.js';
-export type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl, };
+import type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl } from './types.js';
+export type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl };
 interface EarlyConsoleCapture {
     errorCount: number;
     warningCount: number;
@@ -48,7 +48,6 @@ export declare class GlobalDevBar {
     private perfStats;
     private lcpValue;
     private reconnectAttempts;
-    private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;
     private copiedPathTimeout;
@@ -95,10 +94,6 @@ export declare class GlobalDevBar {
      * Initialize and mount the devbar
      */
     init(): void;
-    /**
-     * Get the current position
-     */
-    getPosition(): string;
     /**
      * Destroy the devbar and cleanup
      */
@@ -184,14 +179,6 @@ export declare class GlobalDevBar {
      */
     private createConsoleBadge;
     private createScreenshotButton;
-    /**
-     * Get the tooltip text for the screenshot button based on current state
-     */
-    private getScreenshotTooltip;
-    /**
-     * Get the tooltip text for the AI review button based on current state
-     */
-    private getAIReviewTooltip;
     private createAIReviewButton;
     private createOutlineButton;
     private createSchemaButton;

package/dist/GlobalDevBar.js

@@ -8,20 +8,19 @@
  * 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, 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 { MAX_CONSOLE_LOGS, DEVBAR_SCREENSHOT_QUALITY, MAX_RECONNECT_ATTEMPTS, BASE_RECONNECT_DELAY_MS, MAX_RECONNECT_DELAY_MS, WS_PORT, SCREENSHOT_NOTIFICATION_MS, CLIPBOARD_NOTIFICATION_MS, DESIGN_REVIEW_NOTIFICATION_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, BUTTON_COLORS, CATEGORY_COLORS, TOOLTIP_STYLES, COLORS, FONT_MONO, } from './constants.js';
+import { formatArgs, canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from './utils.js';
 import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
 import { extractPageSchema, schemaToMarkdown } from './schema.js';
-import { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, createStyledButton, createSvgIcon, getButtonStyles, } from './ui/index.js';
-import { canvasToDataUrl, copyCanvasToClipboard, delay, formatArgs, prepareForCapture, } from './utils.js';
-const html2canvas = (html2canvasModule.default ??
-    html2canvasModule);
+import { createSvgIcon, getButtonStyles, createStyledButton, createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox, } from './ui/index.js';
+const html2canvas = (html2canvasModule.default ?? html2canvasModule);
 const earlyConsoleCapture = (() => {
     const ssrFallback = {
         errorCount: 0,
         warningCount: 0,
         logs: [],
         originalConsole: null,
-        isPatched: false,
+        isPatched: false
     };
     // Skip on server-side rendering
     if (typeof window === 'undefined')
@@ -34,9 +33,9 @@ const earlyConsoleCapture = (() => {
             log: console.log,
             error: console.error,
             warn: console.warn,
-            info: console.info,
+            info: console.info
         },
-        isPatched: false,
+        isPatched: false
     };
     const captureLog = (level, args) => {
         capture.logs.push({ level, message: formatArgs(args), timestamp: Date.now() });
@@ -45,24 +44,10 @@ const earlyConsoleCapture = (() => {
     };
     // Patch console immediately
     if (!capture.isPatched && capture.originalConsole) {
-        console.log = (...args) => {
-            captureLog('log', args);
-            capture.originalConsole.log(...args);
-        };
-        console.error = (...args) => {
-            captureLog('error', args);
-            capture.errorCount++;
-            capture.originalConsole.error(...args);
-        };
-        console.warn = (...args) => {
-            captureLog('warn', args);
-            capture.warningCount++;
-            capture.originalConsole.warn(...args);
-        };
-        console.info = (...args) => {
-            captureLog('info', args);
-            capture.originalConsole.info(...args);
-        };
+        console.log = (...args) => { captureLog('log', args); capture.originalConsole.log(...args); };
+        console.error = (...args) => { captureLog('error', args); capture.errorCount++; capture.originalConsole.error(...args); };
+        console.warn = (...args) => { captureLog('warn', args); capture.warningCount++; capture.originalConsole.warn(...args); };
+        console.info = (...args) => { captureLog('info', args); capture.originalConsole.info(...args); };
         capture.isPatched = true;
     }
     return capture;
@@ -96,8 +81,6 @@ export class GlobalDevBar {
         this.perfStats = null;
         this.lcpValue = null;
         this.reconnectAttempts = 0;
-        // Track the position of the connection indicator dot for smooth collapse
-        this.lastDotPosition = null;
         this.reconnectTimeout = null;
         this.screenshotTimeout = null;
         this.copiedPathTimeout = null;
@@ -170,7 +153,7 @@ export class GlobalDevBar {
             fontWeight: '600',
             display: 'flex',
             alignItems: 'center',
-            justifyContent: 'center',
+            justifyContent: 'center'
         });
         badge.textContent = count > 99 ? '!' : String(count);
         return badge;
@@ -183,7 +166,7 @@ export class GlobalDevBar {
      */
     static registerControl(control) {
         // Remove existing control with same ID
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== control.id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== control.id);
         GlobalDevBar.customControls.push(control);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
@@ -195,7 +178,7 @@ export class GlobalDevBar {
      * Unregister a custom control by ID
      */
     static unregisterControl(id) {
-        GlobalDevBar.customControls = GlobalDevBar.customControls.filter((c) => c.id !== id);
+        GlobalDevBar.customControls = GlobalDevBar.customControls.filter(c => c.id !== id);
         // Trigger re-render of all instances
         const instance = getGlobalInstance();
         if (instance) {
@@ -241,12 +224,6 @@ export class GlobalDevBar {
         // Initial render
         this.render();
     }
-    /**
-     * Get the current position
-     */
-    getPosition() {
-        return this.options.position;
-    }
     /**
      * Destroy the devbar and cleanup
      */
@@ -330,7 +307,7 @@ export class GlobalDevBar {
             this.render();
             // Auto-reconnect with exponential backoff
             if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
+                const delayMs = BASE_RECONNECT_DELAY_MS * Math.pow(2, this.reconnectAttempts);
                 this.reconnectAttempts++;
                 this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
             }
@@ -348,20 +325,11 @@ export class GlobalDevBar {
                 const targetElement = command.selector
                     ? document.querySelector(command.selector) || document.body
                     : document.body;
-                const canvas = await html2canvas(targetElement, {
-                    logging: false,
-                    useCORS: true,
-                    allowTaint: true,
-                });
+                const canvas = await html2canvas(targetElement, { logging: false, useCORS: true, allowTaint: true });
                 ws.send(JSON.stringify({
                     success: true,
-                    data: {
-                        screenshot: canvas.toDataURL('image/png'),
-                        width: canvas.width,
-                        height: canvas.height,
-                        selector: command.selector || 'body',
-                    },
-                    timestamp: Date.now(),
+                    data: { screenshot: canvas.toDataURL('image/png'), width: canvas.width, height: canvas.height, selector: command.selector || 'body' },
+                    timestamp: Date.now()
                 }));
                 break;
             }
@@ -369,7 +337,7 @@ export class GlobalDevBar {
                 let logs = this.consoleLogs;
                 if (command.filter) {
                     const filter = command.filter.toLowerCase();
-                    logs = logs.filter((log) => log.level.includes(filter) || log.message.toLowerCase().includes(filter));
+                    logs = logs.filter(log => log.level.includes(filter) || log.message.toLowerCase().includes(filter));
                 }
                 ws.send(JSON.stringify({ success: true, data: logs, timestamp: Date.now() }));
                 break;
@@ -380,18 +348,9 @@ export class GlobalDevBar {
                     const results = elements.map((el) => {
                         if (command.property)
                             return el[command.property] ?? null;
-                        return {
-                            tagName: el.tagName,
-                            className: el.className,
-                            id: el.id,
-                            textContent: el.textContent?.trim().slice(0, 100),
-                        };
+                        return { tagName: el.tagName, className: el.className, id: el.id, textContent: el.textContent?.trim().slice(0, 100) };
                     });
-                    ws.send(JSON.stringify({
-                        success: true,
-                        data: { count: results.length, results },
-                        timestamp: Date.now(),
-                    }));
+                    ws.send(JSON.stringify({ success: true, data: { count: results.length, results }, timestamp: Date.now() }));
                 }
                 break;
             }
@@ -404,11 +363,7 @@ export class GlobalDevBar {
                         ws.send(JSON.stringify({ success: true, data: result, timestamp: Date.now() }));
                     }
                     catch (e) {
-                        ws.send(JSON.stringify({
-                            success: false,
-                            error: e instanceof Error ? e.message : 'Execution failed',
-                            timestamp: Date.now(),
-                        }));
+                        ws.send(JSON.stringify({ success: false, error: e instanceof Error ? e.message : 'Execution failed', timestamp: Date.now() }));
                     }
                 }
                 break;
@@ -472,37 +427,25 @@ export class GlobalDevBar {
                 this.lastScreenshot = path;
                 if (this.screenshotTimeout)
                     clearTimeout(this.screenshotTimeout);
-                this.screenshotTimeout = setTimeout(() => {
-                    this.lastScreenshot = null;
-                    this.render();
-                }, durationMs);
+                this.screenshotTimeout = setTimeout(() => { this.lastScreenshot = null; this.render(); }, durationMs);
                 break;
             case 'designReview':
                 this.lastDesignReview = path;
                 if (this.designReviewTimeout)
                     clearTimeout(this.designReviewTimeout);
-                this.designReviewTimeout = setTimeout(() => {
-                    this.lastDesignReview = null;
-                    this.render();
-                }, durationMs);
+                this.designReviewTimeout = setTimeout(() => { this.lastDesignReview = null; this.render(); }, durationMs);
                 break;
             case 'outline':
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
-                this.outlineTimeout = setTimeout(() => {
-                    this.lastOutline = null;
-                    this.render();
-                }, durationMs);
+                this.outlineTimeout = setTimeout(() => { this.lastOutline = null; this.render(); }, durationMs);
                 break;
             case 'schema':
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
-                this.schemaTimeout = setTimeout(() => {
-                    this.lastSchema = null;
-                    this.render();
-                }, durationMs);
+                this.schemaTimeout = setTimeout(() => { this.lastSchema = null; this.render(); }, durationMs);
                 break;
         }
         this.render();
@@ -512,17 +455,20 @@ export class GlobalDevBar {
             const width = window.innerWidth;
             const height = window.innerHeight;
             // Determine breakpoint by checking thresholds in descending order
-            const breakpointOrder = [
-                '2xl',
-                'xl',
-                'lg',
-                'md',
-                'sm',
-            ];
-            const tailwindBreakpoint = breakpointOrder.find((bp) => width >= TAILWIND_BREAKPOINTS[bp].min) ?? 'base';
+            let tailwindBreakpoint = 'base';
+            if (width >= TAILWIND_BREAKPOINTS['2xl'].min)
+                tailwindBreakpoint = '2xl';
+            else if (width >= TAILWIND_BREAKPOINTS.xl.min)
+                tailwindBreakpoint = 'xl';
+            else if (width >= TAILWIND_BREAKPOINTS.lg.min)
+                tailwindBreakpoint = 'lg';
+            else if (width >= TAILWIND_BREAKPOINTS.md.min)
+                tailwindBreakpoint = 'md';
+            else if (width >= TAILWIND_BREAKPOINTS.sm.min)
+                tailwindBreakpoint = 'sm';
             this.breakpointInfo = {
                 tailwindBreakpoint,
-                dimensions: `${width}x${height}`,
+                dimensions: `${width}x${height}`
             };
             this.render();
         };
@@ -534,7 +480,7 @@ export class GlobalDevBar {
         const updatePerfStats = () => {
             // FCP
             const paintEntries = performance.getEntriesByType('paint');
-            const fcpEntry = paintEntries.find((entry) => entry.name === 'first-contentful-paint');
+            const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
             const fcp = fcpEntry ? `${Math.round(fcpEntry.startTime)}ms` : '-';
             // LCP (from cached value, updated by observer)
             const lcp = this.lcpValue !== null ? `${Math.round(this.lcpValue)}ms` : '-';
@@ -596,10 +542,7 @@ export class GlobalDevBar {
         this.keydownHandler = (e) => {
             // Close modals on Escape
             if (e.key === 'Escape') {
-                if (this.consoleFilter ||
-                    this.showOutlineModal ||
-                    this.showSchemaModal ||
-                    this.showDesignReviewConfirm) {
+                if (this.consoleFilter || this.showOutlineModal || this.showSchemaModal || this.showDesignReviewConfirm) {
                     this.consoleFilter = null;
                     this.showOutlineModal = false;
                     this.showSchemaModal = false;
@@ -661,7 +604,7 @@ export class GlobalDevBar {
                 allowTaint: true,
                 scale: SCREENSHOT_SCALE,
                 width: window.innerWidth,
-                windowWidth: window.innerWidth,
+                windowWidth: window.innerWidth
             });
             // Restore page state
             cleanup();
@@ -683,10 +626,7 @@ export class GlobalDevBar {
                 }
             }
             else {
-                const dataUrl = canvasToDataUrl(canvas, {
-                    format: 'jpeg',
-                    quality: DEVBAR_SCREENSHOT_QUALITY,
-                });
+                const dataUrl = canvasToDataUrl(canvas, { format: 'jpeg', quality: DEVBAR_SCREENSHOT_QUALITY });
                 if (this.ws?.readyState === WebSocket.OPEN) {
                     this.ws.send(JSON.stringify({
                         type: 'save-screenshot',
@@ -696,8 +636,8 @@ export class GlobalDevBar {
                             height: canvas.height,
                             logs: this.consoleLogs,
                             url: window.location.href,
-                            timestamp: Date.now(),
-                        },
+                            timestamp: Date.now()
+                        }
                     }));
                 }
             }
@@ -732,7 +672,7 @@ export class GlobalDevBar {
                 allowTaint: true,
                 scale: 1, // Full quality for design review
                 width: window.innerWidth,
-                windowWidth: window.innerWidth,
+                windowWidth: window.innerWidth
             });
             // Restore page state
             cleanup();
@@ -747,8 +687,8 @@ export class GlobalDevBar {
                         height: canvas.height,
                         logs: this.consoleLogs,
                         url: window.location.href,
-                        timestamp: Date.now(),
-                    },
+                        timestamp: Date.now()
+                    }
                 }));
             }
         }
@@ -843,8 +783,8 @@ export class GlobalDevBar {
                     markdown,
                     url: window.location.href,
                     title: document.title,
-                    timestamp: Date.now(),
-                },
+                    timestamp: Date.now()
+                }
             }));
         }
     }
@@ -859,8 +799,8 @@ export class GlobalDevBar {
                     markdown,
                     url: window.location.href,
                     title: document.title,
-                    timestamp: Date.now(),
-                },
+                    timestamp: Date.now()
+                }
             }));
         }
     }
@@ -943,12 +883,7 @@ export class GlobalDevBar {
         Object.assign(title.style, { color, fontSize: '0.875rem', fontWeight: '600' });
         title.textContent = 'AI Design Review';
         header.appendChild(title);
-        const closeBtn = createStyledButton({
-            color: COLORS.textMuted,
-            text: '×',
-            padding: '0',
-            fontSize: '1.25rem',
-        });
+        const closeBtn = createStyledButton({ color: COLORS.textMuted, text: '×', padding: '0', fontSize: '1.25rem' });
         closeBtn.style.border = 'none';
         closeBtn.onclick = closeModal;
         header.appendChild(closeBtn);
@@ -980,11 +915,7 @@ export class GlobalDevBar {
             padding: '14px 18px',
             borderTop: `1px solid ${COLORS.border}`,
         });
-        const cancelBtn = createStyledButton({
-            color: COLORS.textMuted,
-            text: 'Cancel',
-            padding: '8px 16px',
-        });
+        const cancelBtn = createStyledButton({ color: COLORS.textMuted, text: 'Cancel', padding: '8px 16px' });
         cancelBtn.onclick = closeModal;
         footer.appendChild(cancelBtn);
         if (this.apiKeyStatus?.configured) {
@@ -1007,11 +938,7 @@ export class GlobalDevBar {
         const instructions = document.createElement('div');
         Object.assign(instructions.style, { marginBottom: '12px' });
         const instructTitle = document.createElement('div');
-        Object.assign(instructTitle.style, {
-            color: COLORS.textSecondary,
-            fontWeight: '600',
-            marginBottom: '8px',
-        });
+        Object.assign(instructTitle.style, { color: COLORS.textSecondary, fontWeight: '600', marginBottom: '8px' });
         instructTitle.textContent = 'To configure:';
         instructions.appendChild(instructTitle);
         const steps = [
@@ -1071,11 +998,7 @@ export class GlobalDevBar {
         // Model info
         if (this.apiKeyStatus?.model) {
             const modelDiv = document.createElement('div');
-            Object.assign(modelDiv.style, {
-                color: COLORS.textMuted,
-                fontSize: '0.6875rem',
-                marginTop: '12px',
-            });
+            Object.assign(modelDiv.style, { color: COLORS.textMuted, fontSize: '0.6875rem', marginTop: '12px' });
             modelDiv.textContent = `Model: ${this.apiKeyStatus.model}`;
             if (this.apiKeyStatus.maskedKey) {
                 modelDiv.textContent += ` | Key: ${this.apiKeyStatus.maskedKey}`;
@@ -1088,7 +1011,7 @@ export class GlobalDevBar {
         const filterType = this.consoleFilter;
         if (!filterType)
             return;
-        const logs = earlyConsoleCapture.logs.filter((log) => log.level === filterType);
+        const logs = earlyConsoleCapture.logs.filter(log => log.level === filterType);
         const color = filterType === 'error' ? BUTTON_COLORS.error : BUTTON_COLORS.warning;
         const label = filterType === 'error' ? 'Errors' : 'Warnings';
         const popup = document.createElement('div');
@@ -1197,8 +1120,7 @@ export class GlobalDevBar {
                 wordBreak: 'break-word',
                 whiteSpace: 'pre-wrap',
             });
-            message.textContent =
-                log.message.length > 500 ? `${log.message.slice(0, 500)}...` : log.message;
+            message.textContent = log.message.length > 500 ? log.message.slice(0, 500) + '...' : log.message;
             logItem.appendChild(message);
             container.appendChild(logItem);
         });
@@ -1270,7 +1192,7 @@ export class GlobalDevBar {
                 fontSize: '0.6875rem',
                 marginLeft: '8px',
             });
-            const truncatedText = node.text.length > 60 ? `${node.text.slice(0, 60)}...` : node.text;
+            const truncatedText = node.text.length > 60 ? node.text.slice(0, 60) + '...' : node.text;
             textSpan.textContent = truncatedText;
             nodeEl.appendChild(textSpan);
             if (node.id) {
@@ -1403,7 +1325,7 @@ export class GlobalDevBar {
             punct: COLORS.textMuted, // gray
         };
         // Simple tokenizer for JSON using matchAll for safety
-        const tokenPattern = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|(\btrue\b|\bfalse\b)|(\bnull\b)|(-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)|([{}[\],])|(\s+)/g;
+        const tokenPattern = /("(?:\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*")(\s*:)?|(\btrue\b|\bfalse\b)|(\bnull\b)|(-?\d+(?:\.\d*)?(?:[eE][+-]?\d+)?)|([{}\[\],])|(\s+)/g;
         for (const match of json.matchAll(tokenPattern)) {
             const [, str, colon, bool, nullToken, num, punct, whitespace] = match;
             if (whitespace) {
@@ -1495,27 +1417,18 @@ export class GlobalDevBar {
             return;
         const { position, accentColor } = this.options;
         const { errorCount, warningCount } = this.getLogCounts();
-        // Use captured dot position if available, otherwise fall back to preset positions
-        // The 13px offset accounts for half the collapsed circle diameter (26px / 2)
-        let posStyle;
-        if (this.lastDotPosition) {
-            // Position based on where the dot actually was
-            const isTop = position.startsWith('top');
-            posStyle = isTop
-                ? { top: `${this.lastDotPosition.top - 13}px`, left: `${this.lastDotPosition.left - 13}px` }
-                : { bottom: `${this.lastDotPosition.bottom - 13}px`, left: `${this.lastDotPosition.left - 13}px` };
-        }
-        else {
-            // Fallback preset positions for when no dot position was captured
-            const collapsedPositions = {
-                'bottom-left': { bottom: '27px', left: '86px' },
-                'bottom-right': { bottom: '27px', right: '29px' },
-                'top-left': { top: '27px', left: '86px' },
-                'top-right': { top: '27px', right: '29px' },
-                'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
-            };
-            posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
-        }
+        // Calculate position so the collapsed dot aligns with where it appears in expanded state
+        // Expanded: left:80 + border:1 + padding:12 + half-indicator:6 = 99px horizontal center
+        // Expanded: bottom:20 + border:1 + padding:8 + half-row-height:11 = 40px vertical center (approx)
+        // Collapsed circle diameter: 26px, so offset by 13px from center
+        const collapsedPositions = {
+            'bottom-left': { bottom: '27px', left: '86px' },
+            'bottom-right': { bottom: '27px', right: '29px' },
+            'top-left': { top: '27px', left: '86px' },
+            'top-right': { top: '27px', right: '29px' },
+            'bottom-center': { bottom: '19px', left: '50%', transform: 'translateX(-50%)' },
+        };
+        const posStyle = collapsedPositions[position] ?? collapsedPositions['bottom-left'];
         const wrapper = this.container;
         wrapper.className = this.tooltipClass('left', 'devbar-collapse');
         wrapper.setAttribute('data-tooltip', `Click to expand DevBar${this.sweetlinkConnected ? ' (Sweetlink connected)' : ' (Sweetlink not connected)'}${errorCount > 0 ? `\n${errorCount} console error${errorCount === 1 ? '' : 's'}` : ''}`);
@@ -1543,7 +1456,7 @@ export class GlobalDevBar {
             width: '26px',
             height: '26px',
             boxSizing: 'border-box',
-            animation: 'devbar-collapse 150ms ease-out',
+            animation: 'devbar-collapse 150ms ease-out'
         });
         wrapper.onclick = () => {
             this.collapsed = false;
@@ -1556,7 +1469,7 @@ export class GlobalDevBar {
             height: '6px',
             borderRadius: '50%',
             backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
-            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
+            boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none'
         });
         wrapper.appendChild(dot);
         // Error badge (absolute, top-right of circle, shifted left if warning badge exists)
@@ -1611,19 +1524,9 @@ export class GlobalDevBar {
             width: sizeOverrides?.width ?? defaultWidth,
             maxWidth: sizeOverrides?.maxWidth ?? defaultMaxWidth,
             minWidth: sizeOverrides?.minWidth ?? defaultMinWidth,
-            cursor: 'default',
+            cursor: 'default'
         });
         wrapper.ondblclick = () => {
-            // Capture dot position before collapsing
-            const dotEl = wrapper.querySelector('.devbar-status span span');
-            if (dotEl) {
-                const rect = dotEl.getBoundingClientRect();
-                this.lastDotPosition = {
-                    left: rect.left + rect.width / 2,
-                    top: rect.top + rect.height / 2,
-                    bottom: window.innerHeight - (rect.top + rect.height / 2),
-                };
-            }
             this.collapsed = true;
             this.render();
         };
@@ -1641,14 +1544,12 @@ export class GlobalDevBar {
             boxSizing: 'border-box',
             fontFamily: FONT_MONO,
             fontSize: '0.6875rem',
-            lineHeight: '1rem',
+            lineHeight: '1rem'
         });
         // Connection indicator (click to collapse)
         const connIndicator = document.createElement('span');
         connIndicator.className = this.tooltipClass('left', 'devbar-clickable');
-        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected
-            ? 'Sweetlink connected (click to minimize)'
-            : 'Sweetlink disconnected (click to minimize)');
+        connIndicator.setAttribute('data-tooltip', this.sweetlinkConnected ? 'Sweetlink connected (click to minimize)' : 'Sweetlink disconnected (click to minimize)');
         Object.assign(connIndicator.style, {
             width: '12px',
             height: '12px',
@@ -1658,17 +1559,10 @@ export class GlobalDevBar {
             alignItems: 'center',
             justifyContent: 'center',
             cursor: 'pointer',
-            flexShrink: '0',
+            flexShrink: '0'
         });
         connIndicator.onclick = (e) => {
             e.stopPropagation();
-            // Capture dot position before collapsing (connDot is the inner 6px dot)
-            const rect = connIndicator.getBoundingClientRect();
-            this.lastDotPosition = {
-                left: rect.left + rect.width / 2,
-                top: rect.top + rect.height / 2,
-                bottom: window.innerHeight - (rect.top + rect.height / 2),
-            };
             this.collapsed = true;
             this.render();
         };
@@ -1679,7 +1573,7 @@ export class GlobalDevBar {
             borderRadius: '50%',
             backgroundColor: this.sweetlinkConnected ? COLORS.primary : COLORS.textMuted,
             boxShadow: this.sweetlinkConnected ? `0 0 6px ${COLORS.primary}` : 'none',
-            transition: 'all 300ms',
+            transition: 'all 300ms'
         });
         connIndicator.appendChild(connDot);
         // Status row wrapper - keeps connection dot, info, and badges together
@@ -1690,7 +1584,7 @@ export class GlobalDevBar {
             alignItems: 'center',
             gap: '0.5rem',
             flexWrap: 'nowrap',
-            flexShrink: '0',
+            flexShrink: '0'
         });
         statusRow.appendChild(connIndicator);
         // Info section
@@ -1704,7 +1598,7 @@ export class GlobalDevBar {
             letterSpacing: '0.05em',
             flexShrink: '1',
             minWidth: '0',
-            overflow: 'visible',
+            overflow: 'visible'
         });
         // Breakpoint info
         if (showMetrics.breakpoint && this.breakpointInfo) {
@@ -1716,10 +1610,9 @@ export class GlobalDevBar {
             bpSpan.setAttribute('data-tooltip', `Tailwind Breakpoint: ${bp}\n${breakpointData?.label || ''}\n\nViewport: ${this.breakpointInfo.dimensions}\n\nBreakpoints:\nbase: <640px | sm: >=640px\nmd: >=768px | lg: >=1024px\nxl: >=1280px | 2xl: >=1536px`);
             let bpText = bp;
             if (bp !== 'base') {
-                bpText =
-                    bp === 'sm'
-                        ? `${bp} - ${this.breakpointInfo.dimensions.split('x')[0]}`
-                        : `${bp} - ${this.breakpointInfo.dimensions}`;
+                bpText = bp === 'sm'
+                    ? `${bp} - ${this.breakpointInfo.dimensions.split('x')[0]}`
+                    : `${bp} - ${this.breakpointInfo.dimensions}`;
             }
             bpSpan.textContent = bpText;
             infoSection.appendChild(bpSpan);
@@ -1797,7 +1690,7 @@ export class GlobalDevBar {
                 fontFamily: FONT_MONO,
                 fontSize: '0.6875rem',
             });
-            GlobalDevBar.customControls.forEach((control) => {
+            GlobalDevBar.customControls.forEach(control => {
                 const btn = document.createElement('button');
                 btn.type = 'button';
                 const color = control.variant === 'warning' ? BUTTON_COLORS.warning : accentColor;
@@ -1872,7 +1765,13 @@ export class GlobalDevBar {
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
         const hasSuccessState = this.copiedToClipboard || this.copiedPath || this.lastScreenshot;
-        const tooltip = this.getScreenshotTooltip();
+        const tooltip = this.copiedToClipboard
+            ? 'Copied to clipboard!'
+            : this.copiedPath
+                ? 'Path copied to clipboard!'
+                : this.lastScreenshot
+                    ? `Screenshot saved!\n${this.lastScreenshot}\n\nClick to copy path`
+                    : `Screenshot\n\nClick: Save to file\nShift+Click: Copy to clipboard\n\nKeyboard:\nCmd/Ctrl+Shift+S: Save\nCmd/Ctrl+Shift+C: Copy${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
         btn.setAttribute('data-tooltip', tooltip);
         Object.assign(btn.style, {
             display: 'flex',
@@ -1890,7 +1789,7 @@ export class GlobalDevBar {
             color: hasSuccessState ? accentColor : `${accentColor}99`,
             cursor: !this.capturing ? 'pointer' : 'not-allowed',
             opacity: '1',
-            transition: 'all 150ms',
+            transition: 'all 150ms'
         });
         btn.disabled = this.capturing;
         btn.onclick = (e) => {
@@ -1936,47 +1835,17 @@ export class GlobalDevBar {
         }
         return btn;
     }
-    /**
-     * Get the tooltip text for the screenshot button based on current state
-     */
-    getScreenshotTooltip() {
-        if (this.copiedToClipboard) {
-            return 'Copied to clipboard!';
-        }
-        if (this.copiedPath) {
-            return 'Path copied to clipboard!';
-        }
-        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`;
-    }
-    /**
-     * Get the tooltip text for the AI review button based on current state
-     */
-    getAIReviewTooltip() {
-        if (this.designReviewInProgress) {
-            return 'AI Design Review in progress...';
-        }
-        if (this.designReviewError) {
-            return `Design review failed:\n${this.designReviewError}`;
-        }
-        if (this.lastDesignReview) {
-            return `Design review saved to:\n${this.lastDesignReview}`;
-        }
-        const baseTooltip = `AI Design Review\n\nCaptures screenshot and sends to\nClaude for design analysis.\n\nRequires ANTHROPIC_API_KEY.`;
-        return this.sweetlinkConnected
-            ? baseTooltip
-            : `${baseTooltip}\n\nWarning: Sweetlink not connected`;
-    }
     createAIReviewButton() {
         const btn = document.createElement('button');
         btn.type = 'button';
         btn.className = this.tooltipClass('right');
-        const tooltip = this.getAIReviewTooltip();
+        const tooltip = this.designReviewInProgress
+            ? 'AI Design Review in progress...'
+            : this.designReviewError
+                ? `Design review failed:\n${this.designReviewError}`
+                : this.lastDesignReview
+                    ? `Design review saved to:\n${this.lastDesignReview}`
+                    : `AI Design Review\n\nCaptures screenshot and sends to\nClaude for design analysis.\n\nRequires ANTHROPIC_API_KEY.${!this.sweetlinkConnected ? '\n\nWarning: Sweetlink not connected' : ''}`;
         btn.setAttribute('data-tooltip', tooltip);
         const hasError = !!this.designReviewError;
         const isActive = this.designReviewInProgress || !!this.lastDesignReview || hasError;
@@ -2076,7 +1945,7 @@ export function initGlobalDevBar(options) {
     const existing = getGlobalInstance();
     if (existing) {
         // Check if already initialized with same position - skip re-init during HMR
-        const existingPosition = existing.getPosition();
+        const existingPosition = existing['options']?.position ?? 'bottom-left';
         const newPosition = options?.position ?? 'bottom-left';
         if (existingPosition === newPosition) {
             return existing;

package/dist/constants.js

@@ -41,11 +41,11 @@ export const SCREENSHOT_SCALE = 0.75;
 // ============================================================================
 /** Tailwind CSS breakpoint definitions */
 export const TAILWIND_BREAKPOINTS = {
-    base: { min: 0, label: 'Tailwind base: <640px' },
-    sm: { min: 640, label: 'Tailwind sm: >=640px' },
-    md: { min: 768, label: 'Tailwind md: >=768px' },
-    lg: { min: 1024, label: 'Tailwind lg: >=1024px' },
-    xl: { min: 1280, label: 'Tailwind xl: >=1280px' },
+    'base': { min: 0, label: 'Tailwind base: <640px' },
+    'sm': { min: 640, label: 'Tailwind sm: >=640px' },
+    'md': { min: 768, label: 'Tailwind md: >=768px' },
+    'lg': { min: 1024, label: 'Tailwind lg: >=1024px' },
+    'xl': { min: 1280, label: 'Tailwind xl: >=1280px' },
     '2xl': { min: 1536, label: 'Tailwind 2xl: >=1536px' },
 };
 // ============================================================================
@@ -489,8 +489,7 @@ export const TOOLTIP_STYLES = `
 }
 /* BASE only (< 640px): fit content, centered horizontally */
 @media (max-width: 639px) {
-  /* Expanded state: center and constrain width */
-  [data-devbar]:not(.devbar-collapse) {
+  [data-devbar] {
     width: auto !important;
     min-width: auto !important;
     max-width: calc(100vw - 32px) !important;
@@ -498,7 +497,6 @@ export const TOOLTIP_STYLES = `
     right: auto !important;
     transform: translateX(-50%) !important;
   }
-  /* Collapsed state: JS handles positioning based on captured dot location */
   .devbar-main {
     flex-wrap: wrap;
     justify-content: center;

package/package.json

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