@ytspar/devbar 0.0.1 → 1.0.0-canary.19cb05c

package/dist/settings.d.ts

@@ -0,0 +1,150 @@
+/**
+ * DevBar Settings Persistence
+ *
+ * Handles saving and loading DevBar settings with Sweetlink server persistence
+ * and localStorage fallback.
+ */
+import type { ThemeMode } from './types.js';
+/**
+ * Position options for the DevBar
+ */
+export type DevBarPosition = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'bottom-center';
+/**
+ * Metrics visibility configuration
+ */
+export interface MetricsVisibility {
+    breakpoint: boolean;
+    fcp: boolean;
+    lcp: boolean;
+    cls: boolean;
+    inp: boolean;
+    pageSize: boolean;
+}
+/**
+ * Complete DevBar settings schema
+ */
+export interface DevBarSettings {
+    /** Schema version for future migrations */
+    version: 1;
+    position: DevBarPosition;
+    themeMode: ThemeMode;
+    compactMode: boolean;
+    accentColor: string;
+    showScreenshot: boolean;
+    showConsoleBadges: boolean;
+    showTooltips: boolean;
+    showMetrics: MetricsVisibility;
+    debug: boolean;
+}
+/** Default accent color (emerald) */
+export declare const DEFAULT_ACCENT_COLOR = "#10b981";
+/** Preset accent colors for the color picker */
+export declare const ACCENT_COLOR_PRESETS: readonly [{
+    readonly name: "Emerald";
+    readonly value: "#10b981";
+}, {
+    readonly name: "Blue";
+    readonly value: "#3b82f6";
+}, {
+    readonly name: "Purple";
+    readonly value: "#a855f7";
+}, {
+    readonly name: "Pink";
+    readonly value: "#ec4899";
+}, {
+    readonly name: "Amber";
+    readonly value: "#f59e0b";
+}, {
+    readonly name: "Cyan";
+    readonly value: "#06b6d4";
+}];
+/**
+ * Default settings used when no saved settings exist
+ */
+export declare const DEFAULT_SETTINGS: DevBarSettings;
+/** LocalStorage key for DevBar settings fallback */
+export declare const SETTINGS_STORAGE_KEY = "devbar-settings";
+/**
+ * Callback type for settings change events
+ */
+export type SettingsChangeCallback = (settings: DevBarSettings) => void;
+/**
+ * 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 declare class SettingsManager {
+    private settings;
+    private ws;
+    private sweetlinkConnected;
+    private changeCallbacks;
+    private saveTimeout;
+    private pendingLoadResolvers;
+    /** Debounce delay for saving settings (ms) */
+    private static readonly SAVE_DEBOUNCE_MS;
+    constructor();
+    /**
+     * Set the WebSocket connection for Sweetlink communication
+     */
+    setWebSocket(ws: WebSocket | null): void;
+    /**
+     * Update connection status (called when WebSocket connects/disconnects)
+     */
+    setConnected(connected: boolean): void;
+    /**
+     * Get current settings (synchronous)
+     */
+    getSettings(): DevBarSettings;
+    /**
+     * Get a specific setting value
+     */
+    get<K extends keyof DevBarSettings>(key: K): DevBarSettings[K];
+    /**
+     * Load settings from storage
+     *
+     * When Sweetlink is connected, requests settings from the server.
+     * Otherwise, loads from localStorage.
+     */
+    loadSettings(): Promise<DevBarSettings>;
+    /**
+     * Handle settings loaded from server (called by WebSocket message handler)
+     */
+    handleSettingsLoaded(settings: DevBarSettings | null): void;
+    /**
+     * Save settings (debounced)
+     *
+     * Saves to both Sweetlink server (if connected) and localStorage.
+     */
+    saveSettings(partial: Partial<DevBarSettings>): void;
+    /**
+     * Save settings immediately without debouncing
+     */
+    saveSettingsNow(partial: Partial<DevBarSettings>): void;
+    /**
+     * Reset settings to defaults
+     */
+    resetToDefaults(): void;
+    /**
+     * Subscribe to settings changes
+     */
+    onChange(callback: SettingsChangeCallback): () => void;
+    private performSave;
+    private notifyChange;
+    private loadFromLocalStorage;
+    private saveToLocalStorage;
+    private loadFromServer;
+    private saveToServer;
+    /**
+     * Migrate settings from older versions and fill in missing defaults
+     */
+    private migrateSettings;
+}
+/**
+ * Get the singleton SettingsManager instance
+ */
+export declare function getSettingsManager(): SettingsManager;

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/storage.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Storage Inspector Utilities
+ *
+ * Utilities for inspecting and managing browser storage (localStorage, sessionStorage, cookies).
+ */
+/**
+ * Storage item with parsed value
+ */
+export interface StorageItem {
+    key: string;
+    value: string;
+    parsedValue?: unknown;
+    isParseable: boolean;
+    size: number;
+}
+/**
+ * Cookie item
+ */
+export interface CookieItem {
+    name: string;
+    value: string;
+    size: number;
+}
+/**
+ * Storage data from all sources
+ */
+export interface StorageData {
+    localStorage: StorageItem[];
+    sessionStorage: StorageItem[];
+    cookies: CookieItem[];
+}
+/**
+ * Get all localStorage items
+ */
+export declare function getLocalStorage(): StorageItem[];
+/**
+ * Get all sessionStorage items
+ */
+export declare function getSessionStorage(): StorageItem[];
+/**
+ * Get all cookies
+ */
+export declare function getCookies(): CookieItem[];
+/**
+ * Get all storage data from all sources
+ */
+export declare function getStorageData(): StorageData;
+/**
+ * Set a localStorage item
+ */
+export declare function setLocalStorageItem(key: string, value: string): void;
+/**
+ * Delete a localStorage item
+ */
+export declare function deleteLocalStorageItem(key: string): void;
+/**
+ * Set a sessionStorage item
+ */
+export declare function setSessionStorageItem(key: string, value: string): void;
+/**
+ * Delete a sessionStorage item
+ */
+export declare function deleteSessionStorageItem(key: string): void;
+/**
+ * Delete a cookie by name
+ */
+export declare function deleteCookie(name: string): void;
+/**
+ * Clear all localStorage
+ */
+export declare function clearLocalStorage(): void;
+/**
+ * Clear all sessionStorage
+ */
+export declare function clearSessionStorage(): void;
+/**
+ * Format storage size summary
+ */
+export declare function formatStorageSummary(data: StorageData): string;
+/**
+ * Beautify JSON string for display
+ */
+export declare function beautifyJson(value: string): string;

package/dist/storage.js

@@ -0,0 +1,182 @@
+/**
+ * Storage Inspector Utilities
+ *
+ * Utilities for inspecting and managing browser storage (localStorage, sessionStorage, cookies).
+ */
+/**
+ * Try to parse a JSON string
+ */
+function tryParseJson(value) {
+    try {
+        const parsed = JSON.parse(value);
+        return { parsed, success: true };
+    }
+    catch {
+        return { parsed: undefined, success: false };
+    }
+}
+/**
+ * Get all items from a Storage object (localStorage or sessionStorage)
+ */
+function getStorageItems(storage) {
+    const items = [];
+    for (let i = 0; i < storage.length; i++) {
+        const key = storage.key(i);
+        if (key === null)
+            continue;
+        const value = storage.getItem(key) ?? '';
+        const { parsed, success } = tryParseJson(value);
+        items.push({
+            key,
+            value,
+            parsedValue: success ? parsed : undefined,
+            isParseable: success,
+            size: new Blob([value]).size,
+        });
+    }
+    // Sort by key
+    return items.sort((a, b) => a.key.localeCompare(b.key));
+}
+/**
+ * Get all localStorage items
+ */
+export function getLocalStorage() {
+    if (typeof localStorage === 'undefined')
+        return [];
+    return getStorageItems(localStorage);
+}
+/**
+ * Get all sessionStorage items
+ */
+export function getSessionStorage() {
+    if (typeof sessionStorage === 'undefined')
+        return [];
+    return getStorageItems(sessionStorage);
+}
+/**
+ * Get all cookies
+ */
+export function getCookies() {
+    if (typeof document === 'undefined' || !document.cookie)
+        return [];
+    return document.cookie
+        .split(';')
+        .map((cookie) => {
+        const [name, ...valueParts] = cookie.trim().split('=');
+        const value = valueParts.join('=');
+        return {
+            name: name.trim(),
+            value: decodeURIComponent(value || ''),
+            size: new Blob([value || '']).size,
+        };
+    })
+        .filter((c) => c.name)
+        .sort((a, b) => a.name.localeCompare(b.name));
+}
+/**
+ * Get all storage data from all sources
+ */
+export function getStorageData() {
+    return {
+        localStorage: getLocalStorage(),
+        sessionStorage: getSessionStorage(),
+        cookies: getCookies(),
+    };
+}
+/**
+ * Set a localStorage item
+ */
+export function setLocalStorageItem(key, value) {
+    if (typeof localStorage === 'undefined')
+        return;
+    localStorage.setItem(key, value);
+}
+/**
+ * Delete a localStorage item
+ */
+export function deleteLocalStorageItem(key) {
+    if (typeof localStorage === 'undefined')
+        return;
+    localStorage.removeItem(key);
+}
+/**
+ * Set a sessionStorage item
+ */
+export function setSessionStorageItem(key, value) {
+    if (typeof sessionStorage === 'undefined')
+        return;
+    sessionStorage.setItem(key, value);
+}
+/**
+ * Delete a sessionStorage item
+ */
+export function deleteSessionStorageItem(key) {
+    if (typeof sessionStorage === 'undefined')
+        return;
+    sessionStorage.removeItem(key);
+}
+/**
+ * Delete a cookie by name
+ */
+export function deleteCookie(name) {
+    if (typeof document === 'undefined')
+        return;
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}
+/**
+ * Clear all localStorage
+ */
+export function clearLocalStorage() {
+    if (typeof localStorage === 'undefined')
+        return;
+    localStorage.clear();
+}
+/**
+ * Clear all sessionStorage
+ */
+export function clearSessionStorage() {
+    if (typeof sessionStorage === 'undefined')
+        return;
+    sessionStorage.clear();
+}
+/**
+ * Format storage size summary
+ */
+export function formatStorageSummary(data) {
+    const localSize = data.localStorage.reduce((sum, item) => sum + item.size, 0);
+    const sessionSize = data.sessionStorage.reduce((sum, item) => sum + item.size, 0);
+    const cookieSize = data.cookies.reduce((sum, item) => sum + item.size, 0);
+    const parts = [];
+    if (data.localStorage.length > 0) {
+        parts.push(`localStorage: ${data.localStorage.length} items (${formatBytes(localSize)})`);
+    }
+    if (data.sessionStorage.length > 0) {
+        parts.push(`sessionStorage: ${data.sessionStorage.length} items (${formatBytes(sessionSize)})`);
+    }
+    if (data.cookies.length > 0) {
+        parts.push(`cookies: ${data.cookies.length} (${formatBytes(cookieSize)})`);
+    }
+    return parts.join(' | ') || 'No storage data';
+}
+/**
+ * Format bytes to human-readable string
+ */
+function formatBytes(bytes) {
+    if (bytes < 1024)
+        return `${bytes} B`;
+    if (bytes < 1024 * 1024)
+        return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+ * Beautify JSON string for display
+ */
+export function beautifyJson(value) {
+    try {
+        const parsed = JSON.parse(value);
+        return JSON.stringify(parsed, null, 2);
+    }
+    catch {
+        return value;
+    }
+}