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

package/dist/settings.js

@@ -0,0 +1,292 @@
+/**
+ * DevBar Settings Persistence
+ *
+ * Handles saving and loading DevBar settings with Sweetlink server persistence
+ * and localStorage fallback.
+ */
+// ============================================================================
+// Default Settings
+// ============================================================================
+/** Default accent color (emerald) */
+export const DEFAULT_ACCENT_COLOR = '#10b981';
+/** Preset accent colors for the color picker */
+export const ACCENT_COLOR_PRESETS = [
+    { name: 'Emerald', value: '#10b981' },
+    { name: 'Blue', value: '#3b82f6' },
+    { name: 'Purple', value: '#a855f7' },
+    { name: 'Pink', value: '#ec4899' },
+    { name: 'Amber', value: '#f59e0b' },
+    { name: 'Cyan', value: '#06b6d4' },
+];
+/**
+ * Default settings used when no saved settings exist
+ */
+export const DEFAULT_SETTINGS = {
+    version: 1,
+    // Display
+    position: 'bottom-left',
+    themeMode: 'system',
+    compactMode: false,
+    accentColor: DEFAULT_ACCENT_COLOR,
+    // Features
+    showScreenshot: true,
+    showConsoleBadges: true,
+    showTooltips: true,
+    // Metrics visibility
+    showMetrics: {
+        breakpoint: true,
+        fcp: true,
+        lcp: true,
+        cls: true,
+        inp: true,
+        pageSize: true,
+    },
+    // Debug
+    debug: false,
+};
+// ============================================================================
+// Storage Keys
+// ============================================================================
+/** LocalStorage key for DevBar settings fallback */
+export const SETTINGS_STORAGE_KEY = 'devbar-settings';
+/**
+ * SettingsManager handles loading and saving DevBar settings.
+ *
+ * Storage priority:
+ * 1. Sweetlink server (.devbar/settings.json) when connected
+ * 2. localStorage fallback when disconnected
+ *
+ * Settings are always saved to localStorage as a backup, ensuring
+ * settings persist even when Sweetlink is unavailable.
+ */
+export class SettingsManager {
+    constructor() {
+        this.ws = null;
+        this.sweetlinkConnected = false;
+        this.changeCallbacks = [];
+        this.saveTimeout = null;
+        this.pendingLoadResolvers = [];
+        this.settings = { ...DEFAULT_SETTINGS };
+    }
+    /**
+     * Set the WebSocket connection for Sweetlink communication
+     */
+    setWebSocket(ws) {
+        this.ws = ws;
+        this.sweetlinkConnected = ws !== null && ws.readyState === WebSocket.OPEN;
+    }
+    /**
+     * Update connection status (called when WebSocket connects/disconnects)
+     */
+    setConnected(connected) {
+        this.sweetlinkConnected = connected;
+    }
+    /**
+     * Get current settings (synchronous)
+     */
+    getSettings() {
+        return { ...this.settings };
+    }
+    /**
+     * Get a specific setting value
+     */
+    get(key) {
+        return this.settings[key];
+    }
+    /**
+     * Load settings from storage
+     *
+     * When Sweetlink is connected, requests settings from the server.
+     * Otherwise, loads from localStorage.
+     */
+    async loadSettings() {
+        // Always start with localStorage to have immediate values
+        const localSettings = this.loadFromLocalStorage();
+        this.settings = localSettings;
+        // If Sweetlink is connected, request server settings
+        if (this.sweetlinkConnected && this.ws && this.ws.readyState === WebSocket.OPEN) {
+            try {
+                const serverSettings = await this.loadFromServer();
+                if (serverSettings) {
+                    this.settings = serverSettings;
+                    // Sync to localStorage as backup
+                    this.saveToLocalStorage(this.settings);
+                }
+            }
+            catch (error) {
+                console.warn('[DevBar] Failed to load settings from server, using localStorage:', error);
+            }
+        }
+        return this.settings;
+    }
+    /**
+     * Handle settings loaded from server (called by WebSocket message handler)
+     */
+    handleSettingsLoaded(settings) {
+        if (settings) {
+            this.settings = this.migrateSettings(settings);
+            this.saveToLocalStorage(this.settings);
+            this.notifyChange();
+        }
+        // Resolve any pending load promises
+        const resolvers = this.pendingLoadResolvers;
+        this.pendingLoadResolvers = [];
+        for (const resolve of resolvers) {
+            resolve(this.settings);
+        }
+    }
+    /**
+     * Save settings (debounced)
+     *
+     * Saves to both Sweetlink server (if connected) and localStorage.
+     */
+    saveSettings(partial) {
+        // Merge with current settings
+        this.settings = { ...this.settings, ...partial };
+        // Debounce saves to avoid excessive writes
+        if (this.saveTimeout) {
+            clearTimeout(this.saveTimeout);
+        }
+        this.saveTimeout = setTimeout(() => {
+            this.saveTimeout = null;
+            this.performSave();
+        }, SettingsManager.SAVE_DEBOUNCE_MS);
+    }
+    /**
+     * Save settings immediately without debouncing
+     */
+    saveSettingsNow(partial) {
+        if (this.saveTimeout) {
+            clearTimeout(this.saveTimeout);
+            this.saveTimeout = null;
+        }
+        this.settings = { ...this.settings, ...partial };
+        this.performSave();
+    }
+    /**
+     * Reset settings to defaults
+     */
+    resetToDefaults() {
+        this.settings = { ...DEFAULT_SETTINGS };
+        this.performSave();
+        this.notifyChange();
+    }
+    /**
+     * Subscribe to settings changes
+     */
+    onChange(callback) {
+        this.changeCallbacks.push(callback);
+        return () => {
+            this.changeCallbacks = this.changeCallbacks.filter((cb) => cb !== callback);
+        };
+    }
+    // ============================================================================
+    // Private Methods
+    // ============================================================================
+    performSave() {
+        // Always save to localStorage as backup
+        this.saveToLocalStorage(this.settings);
+        // Save to server if connected (saveToServer checks readyState internally)
+        if (this.sweetlinkConnected) {
+            this.saveToServer(this.settings);
+        }
+        this.notifyChange();
+    }
+    notifyChange() {
+        for (const callback of this.changeCallbacks) {
+            try {
+                callback(this.settings);
+            }
+            catch (error) {
+                console.error('[DevBar] Settings change callback error:', error);
+            }
+        }
+    }
+    loadFromLocalStorage() {
+        if (typeof localStorage === 'undefined') {
+            return { ...DEFAULT_SETTINGS };
+        }
+        try {
+            const stored = localStorage.getItem(SETTINGS_STORAGE_KEY);
+            if (!stored) {
+                return { ...DEFAULT_SETTINGS };
+            }
+            const parsed = JSON.parse(stored);
+            return this.migrateSettings(parsed);
+        }
+        catch (error) {
+            console.warn('[DevBar] Failed to parse localStorage settings:', error);
+            return { ...DEFAULT_SETTINGS };
+        }
+    }
+    saveToLocalStorage(settings) {
+        if (typeof localStorage === 'undefined')
+            return;
+        try {
+            localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(settings));
+        }
+        catch (error) {
+            console.warn('[DevBar] Failed to save settings to localStorage:', error);
+        }
+    }
+    async loadFromServer() {
+        return new Promise((resolve) => {
+            if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+                resolve(null);
+                return;
+            }
+            // Store resolver to be called when settings-loaded message arrives
+            this.pendingLoadResolvers.push(resolve);
+            // Request settings from server
+            this.ws.send(JSON.stringify({ type: 'load-settings' }));
+            // Timeout after 5 seconds
+            setTimeout(() => {
+                const index = this.pendingLoadResolvers.indexOf(resolve);
+                if (index !== -1) {
+                    this.pendingLoadResolvers.splice(index, 1);
+                    resolve(null);
+                }
+            }, 5000);
+        });
+    }
+    saveToServer(settings) {
+        if (!this.ws || this.ws.readyState !== WebSocket.OPEN)
+            return;
+        this.ws.send(JSON.stringify({
+            type: 'save-settings',
+            data: { settings },
+        }));
+    }
+    /**
+     * Migrate settings from older versions and fill in missing defaults
+     */
+    migrateSettings(partial) {
+        // Merge partial settings over defaults, then handle nested objects specially
+        return {
+            ...DEFAULT_SETTINGS,
+            ...partial,
+            // Always use current schema version
+            version: 1,
+            // Deep merge showMetrics to preserve unset defaults
+            showMetrics: {
+                ...DEFAULT_SETTINGS.showMetrics,
+                ...partial.showMetrics,
+            },
+        };
+    }
+}
+/** Debounce delay for saving settings (ms) */
+SettingsManager.SAVE_DEBOUNCE_MS = 300;
+/**
+ * Singleton settings manager instance
+ */
+let settingsManagerInstance = null;
+/**
+ * Get the singleton SettingsManager instance
+ */
+export function getSettingsManager() {
+    if (!settingsManagerInstance) {
+        settingsManagerInstance = new SettingsManager();
+    }
+    return settingsManagerInstance;
+}

package/dist/ui/index.d.ts

@@ -3,6 +3,6 @@
  *
  * Re-exports all UI utilities.
  */
+export { createStyledButton, getButtonStyles } from './buttons.js';
 export { createSvgIcon } from './icons.js';
-export { getButtonStyles, createStyledButton } from './buttons.js';
-export { createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox, type ModalConfig } from './modals.js';
+export { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, type ModalConfig, } from './modals.js';

package/dist/ui/index.js

@@ -3,6 +3,6 @@
  *
  * Re-exports all UI utilities.
  */
+export { createStyledButton, getButtonStyles } from './buttons.js';
 export { createSvgIcon } from './icons.js';
-export { getButtonStyles, createStyledButton } from './buttons.js';
-export { createModalOverlay, createModalBox, createModalHeader, createModalContent, createEmptyMessage, createInfoBox } from './modals.js';
+export { createEmptyMessage, createInfoBox, createModalBox, createModalContent, createModalHeader, createModalOverlay, } from './modals.js';

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

@@ -3,7 +3,7 @@
  *
  * Modal creation utilities for the DevBar UI.
  */
-import { MODAL_OVERLAY_STYLES, MODAL_BOX_BASE_STYLES } from '../constants.js';
+import { MODAL_BOX_BASE_STYLES, MODAL_OVERLAY_STYLES } from '../constants.js';
 import { createStyledButton } from './buttons.js';
 /**
  * Create modal overlay with click-outside-to-close behavior
@@ -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,14 +55,16 @@ 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 () => {
         try {
             await onCopyMd();
             copyBtn.textContent = 'Copied!';
-            setTimeout(() => { copyBtn.textContent = 'Copy MD'; }, 1500);
+            setTimeout(() => {
+                copyBtn.textContent = 'Copy MD';
+            }, 1500);
         }
         catch {
             console.error('[GlobalDevBar] Failed to copy to clipboard');
@@ -69,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
@@ -83,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;
 }
 /**
@@ -138,7 +184,7 @@ export function createInfoBox(color, title, content) {
         box.appendChild(textEl);
     }
     else {
-        content.forEach(el => box.appendChild(el));
+        content.forEach((el) => box.appendChild(el));
     }
     return box;
 }

package/dist/utils.d.ts

@@ -8,4 +8,4 @@
  * that would break browser/test environments.
  */
 export { formatArg, formatArgs } from '@ytspar/sweetlink/browser/consoleCapture';
-export { canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from '@ytspar/sweetlink/browser/screenshotUtils';
+export { canvasToDataUrl, copyCanvasToClipboard, delay, prepareForCapture, } from '@ytspar/sweetlink/browser/screenshotUtils';

package/dist/utils.js

@@ -10,4 +10,4 @@
 // Re-export console formatting utilities from sweetlink's browser module
 export { formatArg, formatArgs } from '@ytspar/sweetlink/browser/consoleCapture';
 // Re-export screenshot utilities from sweetlink's browser module
-export { canvasToDataUrl, prepareForCapture, delay, copyCanvasToClipboard, } from '@ytspar/sweetlink/browser/screenshotUtils';
+export { canvasToDataUrl, copyCanvasToClipboard, delay, prepareForCapture, } from '@ytspar/sweetlink/browser/screenshotUtils';

package/package.json

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