@ytspar/devbar 1.0.0-canary.3007fc6 → 1.0.0-canary.4b73445

package/dist/GlobalDevBar.d.ts

@@ -7,8 +7,11 @@
  * 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 { getThemeColors } from './constants.js';
+import type { ConsoleLog, DebugConfig, DevBarControl, GlobalDevBarOptions, OutlineNode, PageSchema, SweetlinkCommand, ThemeMode } from './types.js';
+export type { ConsoleLog, DebugConfig, SweetlinkCommand, OutlineNode, PageSchema, GlobalDevBarOptions, DevBarControl, ThemeMode, };
+export type { DevBarPosition, DevBarSettings, MetricsVisibility } from './settings.js';
+export { ACCENT_COLOR_PRESETS, DEFAULT_SETTINGS, getSettingsManager } from './settings.js';
 interface EarlyConsoleCapture {
     errorCount: number;
     warningCount: number;
@@ -25,6 +28,8 @@ declare const earlyConsoleCapture: EarlyConsoleCapture;
 export declare class GlobalDevBar {
     private static customControls;
     private options;
+    private debugConfig;
+    private debug;
     private container;
     private ws;
     private consoleLogs;
@@ -41,13 +46,21 @@ export declare class GlobalDevBar {
     private apiKeyStatus;
     private lastOutline;
     private lastSchema;
+    private savingOutline;
+    private savingSchema;
     private consoleFilter;
     private showOutlineModal;
     private showSchemaModal;
     private breakpointInfo;
     private perfStats;
     private lcpValue;
+    private clsValue;
+    private inpValue;
     private reconnectAttempts;
+    private readonly currentAppPort;
+    private readonly baseWsPort;
+    private wsVerified;
+    private serverProjectDir;
     private lastDotPosition;
     private reconnectTimeout;
     private screenshotTimeout;
@@ -60,8 +73,16 @@ export declare class GlobalDevBar {
     private keydownHandler;
     private fcpObserver;
     private lcpObserver;
+    private clsObserver;
+    private inpObserver;
     private destroyed;
+    private themeMode;
+    private themeMediaQuery;
+    private themeMediaHandler;
+    private compactMode;
+    private showSettingsPopover;
     private overlayElement;
+    private settingsManager;
     constructor(options?: GlobalDevBarOptions);
     /**
      * Get tooltip class name(s) if tooltips are enabled, otherwise empty string
@@ -106,6 +127,14 @@ export declare class GlobalDevBar {
     private injectStyles;
     private connectWebSocket;
     private handleSweetlinkCommand;
+    /**
+     * Handle settings loaded from server
+     */
+    private handleSettingsLoaded;
+    /**
+     * Apply settings to the DevBar state and options
+     */
+    private applySettings;
     /**
      * Handle notification state updates with auto-clear timeout
      */
@@ -113,6 +142,28 @@ export declare class GlobalDevBar {
     private setupBreakpointDetection;
     private setupPerformanceMonitoring;
     private setupKeyboardShortcuts;
+    private setupTheme;
+    private loadCompactMode;
+    /**
+     * Get the current theme mode
+     */
+    getThemeMode(): ThemeMode;
+    /**
+     * Set the theme mode
+     */
+    setThemeMode(mode: ThemeMode): void;
+    /**
+     * Get the current effective theme colors
+     */
+    getColors(): ReturnType<typeof getThemeColors>;
+    /**
+     * Toggle compact mode
+     */
+    toggleCompactMode(): void;
+    /**
+     * Check if compact mode is enabled
+     */
+    isCompactMode(): boolean;
     private copyPathToClipboard;
     private handleScreenshot;
     private handleDesignReview;
@@ -177,8 +228,61 @@ export declare class GlobalDevBar {
      * Render key-value pairs as rows with ellipsis overflow and hover tooltip
      */
     private renderKeyValueItems;
+    /**
+     * Render compact mode - single row with essential controls only
+     * Shows: connection dot, error/warn badges, screenshot button, settings gear
+     */
+    private renderCompact;
+    /**
+     * Create the settings gear button
+     */
+    private createSettingsButton;
+    /**
+     * Create the compact mode toggle button with chevron icon
+     */
+    private createCompactToggleButton;
+    /**
+     * Create a settings section with title
+     */
+    private createSettingsSection;
+    /**
+     * Create a toggle switch row
+     */
+    private createToggleRow;
+    /**
+     * Render the settings popover
+     */
+    private renderSettingsPopover;
+    /**
+     * Reset all settings to defaults
+     */
+    private resetToDefaults;
     private renderCollapsed;
     private renderExpanded;
+    /** Base styles for tooltip containers */
+    private readonly TOOLTIP_BASE_STYLES;
+    /** Create a tooltip container element */
+    private createTooltipContainer;
+    /** Add a bold title to tooltip (metric name, feature name, etc.) */
+    private addTooltipTitle;
+    /** Add a description paragraph to tooltip */
+    private addTooltipDescription;
+    /** Add a muted uppercase section header to tooltip */
+    private addTooltipSectionHeader;
+    /** Add a colored row with dot + label + value (for thresholds) */
+    private addTooltipColoredRow;
+    /** Add an info row with label + value (for breakpoint details) */
+    private addTooltipInfoRow;
+    /** Position tooltip above the anchor element, adjusting for screen edges */
+    private positionTooltip;
+    /** Attach an HTML tooltip to an element with custom content builder */
+    private attachHtmlTooltip;
+    /** Attach a metric tooltip with title, description, and colored thresholds */
+    private attachMetricTooltip;
+    /** Attach a breakpoint tooltip showing current breakpoint and all breakpoint ranges */
+    private attachBreakpointTooltip;
+    /** Attach a simple info tooltip with title and description */
+    private attachInfoTooltip;
     /**
      * Create a console badge for error/warning counts
      */