@ytspar/devbar 1.0.0-canary.c511f13 → 1.0.0-canary.cdf7fa2

package/dist/GlobalDevBar.d.ts

@@ -46,8 +46,6 @@ export declare class GlobalDevBar {
     private apiKeyStatus;
     private lastOutline;
     private lastSchema;
-    private savingOutline;
-    private savingSchema;
     private consoleFilter;
     private showOutlineModal;
     private showSchemaModal;
@@ -57,11 +55,6 @@ export declare class GlobalDevBar {
     private clsValue;
     private inpValue;
     private reconnectAttempts;
-    private readonly currentAppPort;
-    private readonly baseWsPort;
-    private wsVerified;
-    private serverProjectDir;
-    private verificationTimeout;
     private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;

package/dist/GlobalDevBar.js

@@ -8,7 +8,7 @@
  * to avoid React dependency conflicts in host applications.
  */
 import * as html2canvasModule from 'html2canvas-pro';
-import { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getTheme, getThemeColors, injectThemeCSS, MAX_CONSOLE_LOGS, MAX_PORT_RETRIES, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, PORT_RETRY_DELAY_MS, PORT_SCAN_RESTART_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, VERIFICATION_TIMEOUT_MS, WS_PORT, WS_PORT_OFFSET, } from './constants.js';
+import { BASE_RECONNECT_DELAY_MS, BUTTON_COLORS, CATEGORY_COLORS, CLIPBOARD_NOTIFICATION_MS, COLORS, DESIGN_REVIEW_NOTIFICATION_MS, DEVBAR_SCREENSHOT_QUALITY, FONT_MONO, getEffectiveTheme, getThemeColors, MAX_CONSOLE_LOGS, MAX_RECONNECT_ATTEMPTS, MAX_RECONNECT_DELAY_MS, SCREENSHOT_BLUR_DELAY_MS, SCREENSHOT_NOTIFICATION_MS, SCREENSHOT_SCALE, TAILWIND_BREAKPOINTS, TOOLTIP_STYLES, WS_PORT, } from './constants.js';
 import { DebugLogger, normalizeDebugConfig } from './debug.js';
 import { extractDocumentOutline, outlineToMarkdown } from './outline.js';
 import { extractPageSchema, schemaToMarkdown } from './schema.js';
@@ -91,8 +91,6 @@ export class GlobalDevBar {
         this.apiKeyStatus = null;
         this.lastOutline = null;
         this.lastSchema = null;
-        this.savingOutline = false;
-        this.savingSchema = false;
         this.consoleFilter = null;
         // Modal states
         this.showOutlineModal = false;
@@ -103,9 +101,6 @@ export class GlobalDevBar {
         this.clsValue = 0;
         this.inpValue = 0;
         this.reconnectAttempts = 0;
-        this.wsVerified = false;
-        this.serverProjectDir = null;
-        this.verificationTimeout = null;
         // Track the position of the connection indicator dot for smooth collapse
         this.lastDotPosition = null;
         this.reconnectTimeout = null;
@@ -137,17 +132,6 @@ export class GlobalDevBar {
         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,
@@ -303,8 +287,6 @@ export class GlobalDevBar {
         this.reconnectAttempts = MAX_RECONNECT_ATTEMPTS; // Prevent reconnection
         if (this.reconnectTimeout)
             clearTimeout(this.reconnectTimeout);
-        if (this.verificationTimeout)
-            clearTimeout(this.verificationTimeout);
         if (this.ws)
             this.ws.close();
         // Clear timeouts
@@ -363,82 +345,27 @@ export class GlobalDevBar {
             document.head.appendChild(style);
         }
     }
-    connectWebSocket(port) {
+    connectWebSocket() {
         if (this.destroyed)
             return;
-        const targetPort = port ?? this.baseWsPort;
-        this.debug.ws('Connecting to WebSocket', { port: targetPort, appPort: this.currentAppPort });
-        const ws = new WebSocket(`ws://localhost:${targetPort}`);
+        this.debug.ws('Connecting to WebSocket', { port: WS_PORT });
+        const ws = new WebSocket(`ws://localhost:${WS_PORT}`);
         this.ws = ws;
-        this.wsVerified = false;
-        // Timeout for server-info verification
-        this.verificationTimeout = setTimeout(() => {
-            if (!this.wsVerified && ws.readyState === WebSocket.OPEN) {
-                // Server didn't send server-info (old version) - accept for backwards compatibility
-                this.debug.ws('Server is old version (no server-info), accepting for backwards compat');
-                this.wsVerified = true;
-                this.sweetlinkConnected = true;
-                this.reconnectAttempts = 0;
-                this.settingsManager.setWebSocket(ws);
-                this.settingsManager.setConnected(true);
-                ws.send(JSON.stringify({ type: 'load-settings' }));
-                this.render();
-            }
-        }, VERIFICATION_TIMEOUT_MS);
         ws.onopen = () => {
-            this.debug.ws('WebSocket socket opened, awaiting server-info');
+            this.sweetlinkConnected = true;
+            this.reconnectAttempts = 0;
+            this.debug.ws('WebSocket connected');
+            // Update settings manager with WebSocket connection
+            this.settingsManager.setWebSocket(ws);
+            this.settingsManager.setConnected(true);
             ws.send(JSON.stringify({ type: 'browser-client-ready' }));
+            // Request settings from server
+            ws.send(JSON.stringify({ type: 'load-settings' }));
+            this.render();
         };
         ws.onmessage = async (event) => {
             try {
-                const message = JSON.parse(event.data);
-                // Handle server-info for port matching
-                if (message.type === 'server-info') {
-                    if (this.verificationTimeout) {
-                        clearTimeout(this.verificationTimeout);
-                        this.verificationTimeout = null;
-                    }
-                    const serverAppPort = message.appPort;
-                    const serverMatchesApp = serverAppPort === null || serverAppPort === this.currentAppPort;
-                    if (!serverMatchesApp) {
-                        this.debug.ws('Server mismatch', {
-                            serverAppPort,
-                            currentAppPort: this.currentAppPort,
-                            tryingNextPort: targetPort + 1,
-                        });
-                        ws.close();
-                        // Try next port
-                        const nextPort = targetPort + 1;
-                        if (nextPort < this.baseWsPort + MAX_PORT_RETRIES) {
-                            setTimeout(() => this.connectWebSocket(nextPort), PORT_RETRY_DELAY_MS);
-                        }
-                        else {
-                            this.debug.ws('No matching server found, will retry from base port');
-                            setTimeout(() => this.connectWebSocket(this.baseWsPort), PORT_SCAN_RESTART_DELAY_MS);
-                        }
-                        return;
-                    }
-                    // Server matches - mark as verified and connected
-                    this.wsVerified = true;
-                    this.sweetlinkConnected = true;
-                    this.reconnectAttempts = 0;
-                    this.serverProjectDir = message.projectDir ?? null;
-                    this.debug.ws('Server verified', {
-                        appPort: serverAppPort ?? 'any',
-                        projectDir: this.serverProjectDir,
-                    });
-                    this.settingsManager.setWebSocket(ws);
-                    this.settingsManager.setConnected(true);
-                    ws.send(JSON.stringify({ type: 'load-settings' }));
-                    this.render();
-                    return;
-                }
-                // Ignore other commands until verified
-                if (!this.wsVerified) {
-                    this.debug.ws('Ignoring command before verification', { type: message.type });
-                    return;
-                }
-                const command = message;
+                const command = JSON.parse(event.data);
                 this.debug.ws('Received command', { type: command.type });
                 await this.handleSweetlinkCommand(command);
             }
@@ -447,25 +374,16 @@ export class GlobalDevBar {
             }
         };
         ws.onclose = () => {
-            if (this.verificationTimeout) {
-                clearTimeout(this.verificationTimeout);
-                this.verificationTimeout = null;
-            }
-            // Only reset connection state if we were actually verified/connected
-            if (this.wsVerified) {
-                this.sweetlinkConnected = false;
-                this.wsVerified = false;
-                this.serverProjectDir = null;
-                this.settingsManager.setConnected(false);
-                this.debug.ws('WebSocket disconnected');
-                this.render();
-                // Auto-reconnect with exponential backoff (start from base port)
-                if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
-                    const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
-                    this.reconnectAttempts++;
-                    this.debug.ws('Scheduling reconnect', { attempt: this.reconnectAttempts, delayMs });
-                    this.reconnectTimeout = setTimeout(() => this.connectWebSocket(this.baseWsPort), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
-                }
+            this.sweetlinkConnected = false;
+            this.settingsManager.setConnected(false);
+            this.debug.ws('WebSocket disconnected');
+            this.render();
+            // Auto-reconnect with exponential backoff
+            if (!this.destroyed && this.reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+                const delayMs = BASE_RECONNECT_DELAY_MS * 2 ** this.reconnectAttempts;
+                this.reconnectAttempts++;
+                this.debug.ws('Scheduling reconnect', { attempt: this.reconnectAttempts, delayMs });
+                this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), Math.min(delayMs, MAX_RECONNECT_DELAY_MS));
             }
         };
         ws.onerror = () => {
@@ -661,7 +579,6 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'outline':
-                this.savingOutline = false;
                 this.lastOutline = path;
                 if (this.outlineTimeout)
                     clearTimeout(this.outlineTimeout);
@@ -671,7 +588,6 @@ export class GlobalDevBar {
                 }, durationMs);
                 break;
             case 'schema':
-                this.savingSchema = false;
                 this.lastSchema = path;
                 if (this.schemaTimeout)
                     clearTimeout(this.schemaTimeout);
@@ -871,8 +787,6 @@ export class GlobalDevBar {
             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),
                     });
@@ -899,8 +813,6 @@ export class GlobalDevBar {
     setThemeMode(mode) {
         this.themeMode = mode;
         this.settingsManager.saveSettings({ themeMode: mode });
-        // Inject the appropriate theme CSS variables
-        injectThemeCSS(getTheme(mode));
         this.debug.state('Theme mode changed', { mode, effectiveTheme: getEffectiveTheme(mode) });
         this.render();
     }
@@ -1154,13 +1066,9 @@ export class GlobalDevBar {
         this.render();
     }
     handleSaveOutline() {
-        if (this.savingOutline)
-            return; // Prevent repeated clicks
         const outline = extractDocumentOutline();
         const markdown = outlineToMarkdown(outline);
         if (this.ws?.readyState === WebSocket.OPEN) {
-            this.savingOutline = true;
-            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-outline',
                 data: {
@@ -1174,13 +1082,9 @@ export class GlobalDevBar {
         }
     }
     handleSaveSchema() {
-        if (this.savingSchema)
-            return; // Prevent repeated clicks
         const schema = extractPageSchema();
         const markdown = schemaToMarkdown(schema);
         if (this.ws?.readyState === WebSocket.OPEN) {
-            this.savingSchema = true;
-            this.render();
             this.ws.send(JSON.stringify({
                 type: 'save-schema',
                 data: {
@@ -1558,8 +1462,6 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveOutline(),
             sweetlinkConnected: this.sweetlinkConnected,
-            isSaving: this.savingOutline,
-            savedPath: this.lastOutline,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -1646,8 +1548,6 @@ export class GlobalDevBar {
             },
             onSave: () => this.handleSaveSchema(),
             sweetlinkConnected: this.sweetlinkConnected,
-            isSaving: this.savingSchema,
-            savedPath: this.lastSchema,
         });
         modal.appendChild(header);
         const content = createModalContent();
@@ -2015,8 +1915,7 @@ export class GlobalDevBar {
         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;
+        const color = COLORS.textSecondary;
         Object.assign(btn.style, {
             display: 'flex',
             alignItems: 'center',
@@ -2027,21 +1926,21 @@ export class GlobalDevBar {
             minHeight: '22px',
             flexShrink: '0',
             borderRadius: '50%',
-            border: `1px solid ${accentColor}60`,
+            border: `1px solid ${color}60`,
             backgroundColor: 'transparent',
-            color: `${iconColor}99`,
+            color: `${color}99`,
             cursor: 'pointer',
             transition: 'all 150ms',
         });
         btn.onmouseenter = () => {
-            btn.style.borderColor = accentColor;
-            btn.style.backgroundColor = `${accentColor}20`;
-            btn.style.color = iconColor;
+            btn.style.borderColor = color;
+            btn.style.backgroundColor = `${color}20`;
+            btn.style.color = color;
         };
         btn.onmouseleave = () => {
-            btn.style.borderColor = `${accentColor}60`;
+            btn.style.borderColor = `${color}60`;
             btn.style.backgroundColor = 'transparent';
-            btn.style.color = `${iconColor}99`;
+            btn.style.color = `${color}99`;
         };
         btn.onclick = () => {
             this.toggleCompactMode();
@@ -2057,8 +1956,8 @@ export class GlobalDevBar {
         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');
+        // Right chevron (>) when not compact, left chevron (<) when compact
+        path.setAttribute('points', isCompact ? '15 18 9 12 15 6' : '9 18 15 12 9 6');
         svg.appendChild(path);
         btn.appendChild(svg);
         return btn;

package/dist/constants.d.ts

@@ -11,18 +11,8 @@ export declare const MAX_RECONNECT_ATTEMPTS = 10;
 export declare const BASE_RECONNECT_DELAY_MS = 1000;
 /** Maximum delay between reconnection attempts (ms) */
 export declare const MAX_RECONNECT_DELAY_MS = 30000;
-/** Default WebSocket port for Sweetlink connection (legacy fallback) */
+/** Default WebSocket port for Sweetlink connection */
 export declare const WS_PORT = 9223;
-/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
-export declare const WS_PORT_OFFSET = 6223;
-/** Maximum ports to try when scanning for matching server */
-export declare const MAX_PORT_RETRIES = 10;
-/** Delay between port scan attempts (ms) */
-export declare const PORT_RETRY_DELAY_MS = 100;
-/** Timeout for server-info verification (ms) */
-export declare const VERIFICATION_TIMEOUT_MS = 1000;
-/** 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) */

package/dist/constants.js

@@ -18,18 +18,8 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
 // ============================================================================
 // WebSocket Settings
 // ============================================================================
-/** Default WebSocket port for Sweetlink connection (legacy fallback) */
+/** Default WebSocket port for Sweetlink connection */
 export const WS_PORT = 9223;
-/** Port offset from app port to calculate WebSocket port (matches SweetlinkBridge) */
-export const WS_PORT_OFFSET = 6223;
-/** Maximum ports to try when scanning for matching server */
-export const MAX_PORT_RETRIES = 10;
-/** Delay between port scan attempts (ms) */
-export const PORT_RETRY_DELAY_MS = 100;
-/** Timeout for server-info verification (ms) */
-export const VERIFICATION_TIMEOUT_MS = 1000;
-/** Delay before restarting port scan from base after all ports fail (ms) */
-export const PORT_SCAN_RESTART_DELAY_MS = 3000;
 // ============================================================================
 // Notification Durations
 // ============================================================================

package/dist/ui/modals.d.ts

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

package/dist/ui/modals.js

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

package/package.json

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