@ytspar/devbar 1.0.0-canary.5aad4c9 → 1.0.0-canary.6349f79

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,41 @@ 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;
+    /**
+     * Attach an HTML tooltip with colored threshold labels to a metric element
+     */
+    private attachMetricTooltip;
     /**
      * Create a console badge for error/warning counts
      */