@blorkfield/blork-tabs 0.3.0 → 0.3.1

package/src/DebugPanel.ts

@@ -3,7 +3,7 @@
  * In-browser debug log panel for environments without console access
  */
 
-import type { DebugPanelConfig, DebugPanel, DebugLogLevel, PanelState, CSSClasses } from './types';
+import type { DebugPanelConfig, DebugPanel, DebugLog, DebugLogConfig, DebugLogLevel, PanelState, CSSClasses } from './types';
 
 export interface DebugPanelElements {
   logContainer: HTMLDivElement;
@@ -30,7 +30,8 @@ export function createDebugPanelContent(
 }
 
 /**
- * Create the interface for interacting with a debug panel
+ * Create the interface for interacting with a debug panel.
+ * Uses the shared createDebugLogInterface internally.
  */
 export function createDebugPanelInterface(
   panel: PanelState,
@@ -38,12 +39,46 @@ export function createDebugPanelInterface(
   config: DebugPanelConfig,
   classes: CSSClasses
 ): DebugPanel {
+  const debugLog = createDebugLogInterface(elements.logContainer, config, classes);
+  return {
+    panel,
+    ...debugLog,
+  };
+}
+
+/**
+ * Escape HTML special characters to prevent XSS
+ */
+function escapeHtml(str: string): string {
+  const div = document.createElement('div');
+  div.textContent = str;
+  return div.innerHTML;
+}
+
+/**
+ * Shared interface config for debug log creation
+ */
+interface DebugLogInterfaceConfig {
+  maxEntries?: number;
+  showTimestamps?: boolean;
+}
+
+/**
+ * Create the logging interface for a debug log container.
+ * This is the shared implementation used by both standalone panels and embedded logs.
+ */
+export function createDebugLogInterface(
+  logContainer: HTMLElement,
+  config: DebugLogInterfaceConfig,
+  classes: CSSClasses
+): DebugLog {
   const maxEntries = config.maxEntries ?? 50;
   const showTimestamps = config.showTimestamps ?? false;
+  const entryClass = classes.debugLogEntry;
 
   function addEntry(level: DebugLogLevel, eventName: string, data?: Record<string, unknown>): void {
     const entry = document.createElement('div');
-    entry.className = classes.debugLogEntry;
+    entry.className = entryClass;
 
     // Add level-specific class for color coding
     if (level === 'warn') entry.classList.add(classes.debugLogEntryWarn);
@@ -69,30 +104,165 @@ export function createDebugPanelInterface(
     }
 
     entry.innerHTML = html;
-    elements.logContainer.appendChild(entry);
-    elements.logContainer.scrollTop = elements.logContainer.scrollHeight;
+    logContainer.appendChild(entry);
+    logContainer.scrollTop = logContainer.scrollHeight;
 
-    // Remove oldest entries if over limit
-    while (elements.logContainer.children.length > maxEntries) {
-      elements.logContainer.removeChild(elements.logContainer.children[0]);
+    // Remove oldest entries if over limit (only count actual log entries, not the close button)
+    const entries = logContainer.querySelectorAll(`.${entryClass}`);
+    if (entries.length > maxEntries) {
+      const toRemove = entries.length - maxEntries;
+      for (let i = 0; i < toRemove; i++) {
+        entries[i].remove();
+      }
     }
   }
 
+  function clearEntries(): void {
+    // Only remove log entries, preserve the close button
+    const entries = logContainer.querySelectorAll(`.${entryClass}`);
+    entries.forEach(entry => entry.remove());
+  }
+
   return {
-    panel,
     log: (name, data) => addEntry('log', name, data),
     info: (name, data) => addEntry('info', name, data),
     warn: (name, data) => addEntry('warn', name, data),
     error: (name, data) => addEntry('error', name, data),
-    clear: () => { elements.logContainer.innerHTML = ''; }
+    clear: clearEntries,
   };
 }
 
+export interface DebugLogSetup {
+  debugLog: DebugLog;
+  logContainer: HTMLDivElement;
+}
+
 /**
- * Escape HTML special characters to prevent XSS
+ * Create an embeddable debug log in any container element
  */
-function escapeHtml(str: string): string {
-  const div = document.createElement('div');
-  div.textContent = str;
-  return div.innerHTML;
+export function createDebugLog(
+  container: HTMLElement,
+  config: DebugLogConfig,
+  classes: CSSClasses
+): DebugLogSetup {
+  // Create log container
+  const logContainer = document.createElement('div');
+  logContainer.className = classes.debugLog;
+  container.appendChild(logContainer);
+
+  // Use shared interface creation
+  const debugLog = createDebugLogInterface(logContainer, config, classes);
+
+  return { debugLog, logContainer };
+}
+
+export interface HoverEnlargeConfig {
+  /** The log container element (.blork-tabs-debug-log) to enlarge */
+  logContainer: HTMLElement;
+  /** Hover delay in ms (0 = disable) */
+  hoverDelay: number;
+  /** Container to append backdrop to */
+  backdropContainer: HTMLElement;
+  /** CSS classes */
+  classes: CSSClasses;
+  /** Called when hovering starts */
+  onHoverStart?: () => void;
+  /** Called when hovering ends (without enlarging) */
+  onHoverEnd?: () => void;
+  /** Called when enlarged view is closed */
+  onClose?: () => void;
+}
+
+/**
+ * Set up hover-to-enlarge behavior for a debug log container.
+ * Works the same for both standalone debug panels and embedded logs.
+ */
+export function setupHoverEnlarge(config: HoverEnlargeConfig): void {
+  const { logContainer, hoverDelay, backdropContainer, classes, onHoverStart, onHoverEnd, onClose } = config;
+
+  // Add debug panel class for hover border effect
+  logContainer.classList.add(classes.debugPanel);
+
+  // Create close button inside the log container
+  const closeBtn = document.createElement('button');
+  closeBtn.className = classes.debugClearButton;
+  closeBtn.textContent = '×';
+  closeBtn.title = 'Close enlarged view';
+  logContainer.appendChild(closeBtn);
+
+  let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
+  let isEnlarged = false;
+  let backdrop: HTMLDivElement | null = null;
+  let originalParent: HTMLElement | null = null;
+  let placeholder: Comment | null = null;
+
+  const closeEnlarged = () => {
+    if (!isEnlarged) return;
+    isEnlarged = false;
+    logContainer.classList.remove(classes.debugPanelEnlarged);
+
+    // Move log container back to original parent
+    if (originalParent && placeholder) {
+      originalParent.insertBefore(logContainer, placeholder);
+      placeholder.remove();
+      placeholder = null;
+      originalParent = null;
+    }
+
+    if (backdrop) {
+      backdrop.remove();
+      backdrop = null;
+    }
+    onClose?.();
+  };
+
+  const openEnlarged = () => {
+    if (isEnlarged) return;
+    isEnlarged = true;
+
+    // Create backdrop
+    backdrop = document.createElement('div');
+    backdrop.className = classes.debugBackdrop;
+    backdropContainer.appendChild(backdrop);
+
+    // Click backdrop to close
+    backdrop.addEventListener('click', closeEnlarged);
+
+    // Move log container to body to escape parent stacking context
+    originalParent = logContainer.parentElement;
+    placeholder = document.createComment('debug-log-placeholder');
+    originalParent?.insertBefore(placeholder, logContainer);
+    backdropContainer.appendChild(logContainer);
+
+    // Add enlarged class to log container
+    logContainer.classList.add(classes.debugPanelEnlarged);
+  };
+
+  // Hover to start enlarge timer
+  logContainer.addEventListener('mouseenter', () => {
+    onHoverStart?.();
+    if (isEnlarged) return;
+    if (hoverDelay > 0) {
+      hoverTimeout = setTimeout(() => {
+        openEnlarged();
+      }, hoverDelay);
+    }
+  });
+
+  // Cancel timer if mouse leaves
+  logContainer.addEventListener('mouseleave', () => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+    if (!isEnlarged) {
+      onHoverEnd?.();
+    }
+  });
+
+  // Close button closes enlarged view
+  closeBtn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    closeEnlarged();
+  });
 }

package/src/TabManager.ts

@@ -20,8 +20,10 @@ import type {
   Position,
   DebugPanelConfig,
   DebugPanel,
+  DebugLogConfig,
+  DebugLog,
 } from './types';
-import { createDebugPanelContent, createDebugPanelInterface, DebugPanelElements } from './DebugPanel';
+import { createDebugPanelContent, createDebugPanelInterface, createDebugLog, setupHoverEnlarge, DebugPanelElements } from './DebugPanel';
 import { createPanelState, toggleCollapse, setPanelPosition } from './Panel';
 import { getConnectedGroup, detachFromGroup, updateSnappedPositions, snapPanels } from './SnapChain';
 import { DragManager } from './DragManager';
@@ -253,80 +255,45 @@ export class TabManager {
 
     const state = this.addPanel(panelConfig);
 
-    // Add debug panel class for hover effects
-    state.element.classList.add(this.classes.debugPanel);
-
-    // Add close button (×) to header - used to close enlarged view
-    const closeBtn = document.createElement('button');
-    closeBtn.className = this.classes.debugClearButton;
-    closeBtn.textContent = '×';
-    closeBtn.title = 'Close enlarged view';
-    if (state.collapseButton) {
-      state.collapseButton.parentElement?.insertBefore(closeBtn, state.collapseButton);
-    }
-    elements.clearButton = closeBtn;
-
     this.debugPanelElements.set(state.id, elements);
 
     const debugPanel = createDebugPanelInterface(state, elements, config, this.classes);
 
-    // Set up hover-to-enlarge behavior (5 second delay)
-    let hoverTimeout: ReturnType<typeof setTimeout> | null = null;
-    let isEnlarged = false;
-    let backdrop: HTMLDivElement | null = null;
-    const enlargedClass = this.classes.debugPanelEnlarged;
-    const backdropClass = this.classes.debugBackdrop;
-
-    const closeEnlarged = () => {
-      if (!isEnlarged) return;
-      isEnlarged = false;
-      state.element.classList.remove(enlargedClass);
-      if (backdrop) {
-        backdrop.remove();
-        backdrop = null;
-      }
-    };
-
-    const openEnlarged = () => {
-      if (isEnlarged) return;
-      isEnlarged = true;
-
-      // Create backdrop
-      backdrop = document.createElement('div');
-      backdrop.className = backdropClass;
-      this.config.container.appendChild(backdrop);
-
-      // Click backdrop to close
-      backdrop.addEventListener('click', closeEnlarged);
-
-      // Add enlarged class
-      state.element.classList.add(enlargedClass);
-    };
-
-    // Hover to start enlarge timer (only when not already enlarged)
-    state.element.addEventListener('mouseenter', () => {
-      if (isEnlarged) return;
-      hoverTimeout = setTimeout(() => {
-        openEnlarged();
-      }, 5000);
-    });
+    // Set up hover-to-enlarge behavior on the log container (shared with embedded logs)
+    const hoverDelay = config.hoverDelay ?? 5000;
+    if (hoverDelay > 0) {
+      setupHoverEnlarge({
+        logContainer: elements.logContainer,
+        hoverDelay,
+        backdropContainer: this.config.container,
+        classes: this.classes,
+        onHoverStart: () => this.autoHideManager.pauseTimer(state.id),
+        onHoverEnd: () => this.autoHideManager.resumeTimer(state.id),
+        onClose: () => this.autoHideManager.resumeTimer(state.id),
+      });
+    }
 
-    // Cancel timer if mouse leaves before 5 seconds (but don't close if already enlarged)
-    state.element.addEventListener('mouseleave', () => {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
-        hoverTimeout = null;
-      }
-      // Don't close on mouseleave - only × or backdrop click closes
-    });
+    return debugPanel;
+  }
 
-    // × button closes enlarged view
-    closeBtn.addEventListener('click', (e) => {
-      e.stopPropagation();
-      closeEnlarged();
-    });
+  /**
+   * Create an embeddable debug log in any container element
+   */
+  createDebugLog(container: HTMLElement, config: DebugLogConfig = {}): DebugLog {
+    const { debugLog, logContainer } = createDebugLog(container, config, this.classes);
+
+    // Set up hover-to-enlarge behavior using shared helper (same as standalone panel)
+    const hoverDelay = config.hoverDelay ?? 5000;
+    if (hoverDelay > 0) {
+      setupHoverEnlarge({
+        logContainer,
+        hoverDelay,
+        backdropContainer: this.config.container,
+        classes: this.classes,
+      });
+    }
 
-    return debugPanel;
+    return debugLog;
   }
 
   /**

package/src/index.ts

@@ -42,7 +42,7 @@ export { AnchorManager, getDefaultAnchorConfigs, createPresetAnchor } from './An
 export { DragManager } from './DragManager';
 export { SnapPreview } from './SnapPreview';
 export { AutoHideManager } from './AutoHideManager';
-export { createDebugPanelContent, createDebugPanelInterface } from './DebugPanel';
+export { createDebugPanelContent, createDebugPanelInterface, createDebugLog, setupHoverEnlarge } from './DebugPanel';
 export type { AutoHideCallbacks } from './AutoHideManager';
 export {
   createPanelElement,
@@ -113,5 +113,7 @@ export type {
 
   // Debug Panel
   DebugPanel,
+  DebugLog,
+  DebugLogConfig,
   DebugLogLevel,
 } from './types';

package/src/types.ts

@@ -370,6 +370,20 @@ export interface DebugPanelConfig extends Omit<PanelConfig, 'content'> {
   maxEntries?: number;
   /** Show timestamps on entries (default: false) */
   showTimestamps?: boolean;
+  /** Milliseconds to hover before enlarging (default: 5000, 0 = disable) */
+  hoverDelay?: number;
+}
+
+/**
+ * Configuration for creating an embeddable debug log
+ */
+export interface DebugLogConfig {
+  /** Maximum log entries before oldest are removed (default: 50) */
+  maxEntries?: number;
+  /** Show timestamps on entries (default: false) */
+  showTimestamps?: boolean;
+  /** Milliseconds to hover before enlarging (default: 5000, 0 = disable) */
+  hoverDelay?: number;
 }
 
 /**
@@ -394,3 +408,19 @@ export interface DebugPanel {
   /** The underlying panel state */
   panel: PanelState;
 }
+
+/**
+ * Interface for an embeddable debug log (without panel)
+ */
+export interface DebugLog {
+  /** Log an event (alias for info) */
+  log(eventName: string, data?: Record<string, unknown>): void;
+  /** Log an info event (blue) */
+  info(eventName: string, data?: Record<string, unknown>): void;
+  /** Log a warning event (yellow) */
+  warn(eventName: string, data?: Record<string, unknown>): void;
+  /** Log an error event (red) */
+  error(eventName: string, data?: Record<string, unknown>): void;
+  /** Clear all log entries */
+  clear(): void;
+}