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

package/dist/types.d.ts

@@ -5,7 +5,28 @@
  *
  * NOTE: We import from the types sub-path to avoid pulling in Node.js-only modules.
  */
-export type { ConsoleLog, SweetlinkCommand, OutlineNode, PageSchema, } from '@ytspar/sweetlink/types';
+export type { ConsoleLog, OutlineNode, PageSchema, SweetlinkCommand, } from '@ytspar/sweetlink/types';
+/**
+ * Theme mode for DevBar display
+ */
+export type ThemeMode = 'dark' | 'light' | 'system';
+/**
+ * Debug configuration for DevBar
+ * When true, all debug options are enabled.
+ * When an object, specific options can be toggled.
+ */
+export interface DebugConfig {
+    /** Enable debug logging. Default: false */
+    enabled: boolean;
+    /** Log lifecycle events (init, destroy). Default: true when enabled */
+    logLifecycle?: boolean;
+    /** Log state changes (collapse, modals). Default: true when enabled */
+    logStateChanges?: boolean;
+    /** Log WebSocket events (connect, disconnect, messages). Default: true when enabled */
+    logWebSocket?: boolean;
+    /** Log performance measurements (FCP, LCP, CLS, INP). Default: true when enabled */
+    logPerformance?: boolean;
+}
 /**
  * Options for configuring the GlobalDevBar
  */
@@ -19,6 +40,8 @@ export interface GlobalDevBarOptions {
         breakpoint?: boolean;
         fcp?: boolean;
         lcp?: boolean;
+        cls?: boolean;
+        inp?: boolean;
         pageSize?: boolean;
     };
     /** Whether to show the screenshot button. Default: true */
@@ -36,6 +59,8 @@ export interface GlobalDevBarOptions {
         /** Custom min-width (CSS value). Optional */
         minWidth?: string;
     };
+    /** Enable debug logging. Pass true for all options, or an object for specific options. */
+    debug?: boolean | DebugConfig;
 }
 /**
  * Custom control that can be registered by host applications

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.c37df82",
+  "version": "1.0.0-canary.c511f13",
   "type": "module",
   "private": false,
   "description": "Development toolbar and utilities with Sweetlink integration - pure vanilla JS, no framework dependencies",