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

package/dist/constants.d.ts

@@ -11,8 +11,18 @@ 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 */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 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) */
@@ -130,28 +140,28 @@ export declare const DEVBAR_THEME: {
     };
 };
 export type DevBarTheme = typeof DEVBAR_THEME;
-/** Light theme variant - same structure, different colors */
+/** Light theme variant - terminal aesthetic with light green tones */
 export declare const DEVBAR_THEME_LIGHT: {
     readonly colors: {
-        readonly primary: "#059669";
-        readonly primaryHover: "#047857";
-        readonly primaryGlow: "rgba(5, 150, 105, 0.2)";
-        readonly error: "#ef4444";
+        readonly primary: "#047857";
+        readonly primaryHover: "#065f46";
+        readonly primaryGlow: "rgba(4, 120, 87, 0.25)";
+        readonly error: "#dc2626";
         readonly warning: "#d97706";
         readonly info: "#2563eb";
-        readonly purple: "#9333ea";
+        readonly purple: "#7c3aed";
         readonly cyan: "#0891b2";
         readonly pink: "#db2777";
         readonly lime: "#65a30d";
-        readonly bg: "#f8fafc";
-        readonly bgCard: "rgba(255, 255, 255, 0.98)";
-        readonly bgElevated: "rgba(255, 255, 255, 0.99)";
-        readonly bgInput: "rgba(241, 245, 249, 0.9)";
-        readonly text: "#1e293b";
-        readonly textSecondary: "#475569";
-        readonly textMuted: "#64748b";
-        readonly border: "rgba(5, 150, 105, 0.25)";
-        readonly borderSubtle: "rgba(0, 0, 0, 0.06)";
+        readonly bg: "#ecfdf5";
+        readonly bgCard: "rgba(255, 255, 255, 0.85)";
+        readonly bgElevated: "rgba(255, 255, 255, 0.95)";
+        readonly bgInput: "rgba(236, 253, 245, 0.9)";
+        readonly text: "#064e3b";
+        readonly textSecondary: "#065f46";
+        readonly textMuted: "#047857";
+        readonly border: "rgba(4, 120, 87, 0.3)";
+        readonly borderSubtle: "rgba(4, 120, 87, 0.1)";
     };
     readonly fonts: {
         readonly mono: "'Departure Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
@@ -181,10 +191,10 @@ export declare const DEVBAR_THEME_LIGHT: {
         readonly lg: "12px";
     };
     readonly shadows: {
-        readonly sm: "0 1px 2px rgba(0, 0, 0, 0.08)";
-        readonly md: "0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(5, 150, 105, 0.1)";
-        readonly lg: "0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(5, 150, 105, 0.12)";
-        readonly glow: "0 0 20px rgba(5, 150, 105, 0.1)";
+        readonly sm: "0 1px 2px rgba(4, 120, 87, 0.1)";
+        readonly md: "0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)";
+        readonly lg: "0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)";
+        readonly glow: "0 0 20px rgba(4, 120, 87, 0.15)";
     };
     readonly transitions: {
         readonly fast: "150ms";

package/dist/constants.js

@@ -18,8 +18,18 @@ export const MAX_RECONNECT_DELAY_MS = 30000;
 // ============================================================================
 // WebSocket Settings
 // ============================================================================
-/** Default WebSocket port for Sweetlink connection */
+/** Default WebSocket port for Sweetlink connection (legacy fallback) */
 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
 // ============================================================================
@@ -174,44 +184,44 @@ export const DEVBAR_THEME = {
         fast: '150ms',
     },
 };
-/** Light theme variant - same structure, different colors */
+/** Light theme variant - terminal aesthetic with light green tones */
 export const DEVBAR_THEME_LIGHT = {
     colors: {
-        // Primary accent (darker for light mode)
-        primary: '#059669', // darker emerald
-        primaryHover: '#047857',
-        primaryGlow: 'rgba(5, 150, 105, 0.2)',
-        // Semantic colors (same)
-        error: PALETTE.red,
-        warning: '#d97706', // darker amber
-        info: '#2563eb', // darker blue
-        // Extended palette (darker variants)
-        purple: '#9333ea',
+        // Primary accent (darker emerald for contrast)
+        primary: '#047857', // darker emerald for better contrast
+        primaryHover: '#065f46',
+        primaryGlow: 'rgba(4, 120, 87, 0.25)',
+        // Semantic colors (adjusted for light bg)
+        error: '#dc2626',
+        warning: '#d97706',
+        info: '#2563eb',
+        // Extended palette (darker for light mode)
+        purple: '#7c3aed',
         cyan: '#0891b2',
         pink: '#db2777',
         lime: '#65a30d',
-        // Backgrounds (light)
-        bg: '#f8fafc',
-        bgCard: 'rgba(255, 255, 255, 0.98)',
-        bgElevated: 'rgba(255, 255, 255, 0.99)',
-        bgInput: 'rgba(241, 245, 249, 0.9)',
+        // Backgrounds - terminal light green aesthetic
+        bg: '#ecfdf5', // very light mint/green
+        bgCard: 'rgba(255, 255, 255, 0.85)',
+        bgElevated: 'rgba(255, 255, 255, 0.95)',
+        bgInput: 'rgba(236, 253, 245, 0.9)', // light mint input
         // Text (dark on light)
-        text: '#1e293b',
-        textSecondary: '#475569',
-        textMuted: '#64748b',
-        // Borders (green-tinted)
-        border: 'rgba(5, 150, 105, 0.25)',
-        borderSubtle: 'rgba(0, 0, 0, 0.06)',
+        text: '#064e3b', // dark emerald text
+        textSecondary: '#065f46',
+        textMuted: '#047857',
+        // Borders (emerald-tinted)
+        border: 'rgba(4, 120, 87, 0.3)',
+        borderSubtle: 'rgba(4, 120, 87, 0.1)',
     },
     // Other properties same as dark theme
     fonts: DEVBAR_THEME.fonts,
     typography: DEVBAR_THEME.typography,
     radius: DEVBAR_THEME.radius,
     shadows: {
-        sm: '0 1px 2px rgba(0, 0, 0, 0.08)',
-        md: '0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(5, 150, 105, 0.1)',
-        lg: '0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(5, 150, 105, 0.12)',
-        glow: '0 0 20px rgba(5, 150, 105, 0.1)',
+        sm: '0 1px 2px rgba(4, 120, 87, 0.1)',
+        md: '0 4px 12px rgba(4, 120, 87, 0.12), 0 0 0 1px rgba(4, 120, 87, 0.15)',
+        lg: '0 8px 32px rgba(4, 120, 87, 0.15), 0 0 0 1px rgba(4, 120, 87, 0.2)',
+        glow: '0 0 20px rgba(4, 120, 87, 0.15)',
     },
     transitions: DEVBAR_THEME.transitions,
 };

package/dist/index.d.ts

@@ -1,13 +1,13 @@
-export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, type DevBarTheme, type DevBarThemeInput, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, setStoredThemeMode, STORAGE_KEYS, TAILWIND_BREAKPOINTS, type TailwindBreakpoint, type ThemeColors, } from './constants.js';
+export { type A11yState, type AxeResult, type AxeViolation, clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
+export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, type DevBarTheme, type DevBarThemeInput, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, type TailwindBreakpoint, type ThemeColors, } from './constants.js';
 export { DebugLogger, normalizeDebugConfig } from './debug.js';
 export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
 export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
-export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, type NetworkEntry, NetworkMonitor, type NetworkState, } from './network.js';
 export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
+export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { extractPageSchema, schemaToMarkdown } from './schema.js';
-export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, type NetworkEntry, type NetworkState, } from './network.js';
-export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, type CookieItem, type StorageData, type StorageItem, } from './storage.js';
-export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, type A11yState, type AxeResult, type AxeViolation, } from './accessibility.js';
+export { beautifyJson, type CookieItem, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, type StorageData, type StorageItem, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
 export type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode, } from './types.js';
 export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/index.js

@@ -1,25 +1,25 @@
 // DevBar - Development toolbar and utilities
 // Pure vanilla JavaScript - no framework dependencies
+// Accessibility audit utilities
+export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
 // Re-export constants and theme utilities
-export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, setStoredThemeMode, STORAGE_KEYS, TAILWIND_BREAKPOINTS, } from './constants.js';
+export { BUTTON_COLORS, CATEGORY_COLORS, COLORS, DEVBAR_THEME, DEVBAR_THEME_LIGHT, FONT_MONO, generateBreakpointCSS, generateThemeCSSVars, getEffectiveTheme, getStoredThemeMode, getTheme, getThemeColors, injectThemeCSS, STORAGE_KEYS, setStoredThemeMode, TAILWIND_BREAKPOINTS, } from './constants.js';
 // Debug utilities
 export { DebugLogger, normalizeDebugConfig } from './debug.js';
 // Early console capture script for injection
 export { EARLY_CONSOLE_CAPTURE_SCRIPT } from './earlyConsoleCapture.js';
 // Main vanilla JS devbar
 export { destroyGlobalDevBar, earlyConsoleCapture, GlobalDevBar, getGlobalDevBar, initGlobalDevBar, } from './GlobalDevBar.js';
-// Configuration presets
-export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 // Lazy loading utilities
 export { getHtml2Canvas, isHtml2CanvasLoaded, preloadHtml2Canvas } from './lazy/index.js';
+// Network monitoring utilities
+export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
 // Re-export outline/schema functions
 export { extractDocumentOutline, outlineToMarkdown } from './outline.js';
+// Configuration presets
+export { initDebug, initFull, initMinimal, initPerformance, initResponsive, PRESET_DEBUG, PRESET_FULL, PRESET_MINIMAL, PRESET_PERFORMANCE, PRESET_RESPONSIVE, } from './presets.js';
 export { extractPageSchema, schemaToMarkdown } from './schema.js';
-// Network monitoring utilities
-export { formatBytes as formatNetworkBytes, formatDuration, getInitiatorColor, NetworkMonitor, } from './network.js';
 // Storage inspection utilities
 export { beautifyJson, clearLocalStorage, clearSessionStorage, deleteCookie, deleteLocalStorageItem, deleteSessionStorageItem, formatStorageSummary, getCookies, getLocalStorage, getSessionStorage, getStorageData, setLocalStorageItem, setSessionStorageItem, } from './storage.js';
-// Accessibility audit utilities
-export { clearA11yCache, formatViolation, getBadgeColor, getCachedResult, getImpactColor, getViolationCounts, groupViolationsByImpact, isAxeLoaded, preloadAxe, runA11yAudit, } from './accessibility.js';
 // Re-export utilities for external use
 export { canvasToDataUrl, copyCanvasToClipboard, delay, formatArg, formatArgs, prepareForCapture, } from './utils.js';

package/dist/outline.js

@@ -7,14 +7,39 @@
 // Semantic Element Sets
 // ============================================================================
 const semanticElements = new Set([
-    'article', 'aside', 'nav', 'section',
-    'main', 'body',
-    'header', 'footer', 'figure', 'figcaption',
-    'details', 'summary', 'dialog', 'address', 'hgroup',
-    'form', 'fieldset', 'legend',
-    'ul', 'ol', 'dl', 'menu',
-    'table', 'thead', 'tbody', 'tfoot', 'caption',
-    'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
+    'article',
+    'aside',
+    'nav',
+    'section',
+    'main',
+    'body',
+    'header',
+    'footer',
+    'figure',
+    'figcaption',
+    'details',
+    'summary',
+    'dialog',
+    'address',
+    'hgroup',
+    'form',
+    'fieldset',
+    'legend',
+    'ul',
+    'ol',
+    'dl',
+    'menu',
+    'table',
+    'thead',
+    'tbody',
+    'tfoot',
+    'caption',
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
 ]);
 const headingElements = new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']);
 // ============================================================================
@@ -138,7 +163,15 @@ function extractFromElement(root) {
         if (semanticElements.has(tagName)) {
             const text = getElementText(child, tagName);
             const isHeading = headingElements.has(tagName);
-            const isLandmark = ['main', 'nav', 'header', 'footer', 'article', 'section', 'aside'].includes(tagName);
+            const isLandmark = [
+                'main',
+                'nav',
+                'header',
+                'footer',
+                'article',
+                'section',
+                'aside',
+            ].includes(tagName);
             const hasText = text.length > 0;
             if (isHeading || isLandmark || hasText) {
                 const level = isHeading ? parseInt(tagName[1], 10) : 0;
@@ -148,7 +181,7 @@ function extractFromElement(root) {
                     text: text || `<${tagName}>`,
                     id: child.id || undefined,
                     children: [],
-                    category: getSemanticCategory(tagName)
+                    category: getSemanticCategory(tagName),
                 };
                 if (!isHeading) {
                     node.children = extractFromElement(child);

package/dist/presets.d.ts

@@ -3,7 +3,7 @@
  *
  * Pre-configured options for common DevBar use cases.
  */
-import { GlobalDevBar } from './GlobalDevBar.js';
+import { type GlobalDevBar } from './GlobalDevBar.js';
 import type { GlobalDevBarOptions } from './types.js';
 /**
  * Minimal preset - shows only essential features

package/dist/schema.js

@@ -15,7 +15,7 @@ export function extractPageSchema() {
         metaTags: {},
         openGraph: {},
         twitter: {},
-        microdata: []
+        microdata: [],
     };
     // Extract JSON-LD
     const jsonLdScripts = document.querySelectorAll('script[type="application/ld+json"]');
@@ -52,7 +52,8 @@ export function extractPageSchema() {
             const propName = prop.getAttribute('itemprop') || '';
             const propValue = prop.getAttribute('content') ||
                 prop.getAttribute('href') ||
-                prop.textContent?.trim().slice(0, 200) || '';
+                prop.textContent?.trim().slice(0, 200) ||
+                '';
             if (propName)
                 props[propName] = propValue;
         });
@@ -71,7 +72,7 @@ export function schemaToMarkdown(schema) {
         md += '## JSON-LD\n\n';
         schema.jsonLd.forEach((item, i) => {
             md += `### Schema ${i + 1}\n\n`;
-            md += '```json\n' + JSON.stringify(item, null, 2) + '\n```\n\n';
+            md += `\`\`\`json\n${JSON.stringify(item, null, 2)}\n\`\`\`\n\n`;
         });
     }
     if (Object.keys(schema.openGraph).length > 0) {

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;