@blorkfield/blork-tabs 0.3.0 → 0.3.1

package/README.md

@@ -312,11 +312,13 @@ debug.clear();
 
 The debug panel has a special "focus mode" for reading logs:
 
-1. **Hover for 5 seconds** → Panel enlarges to 75% of screen with doubled text size
+1. **Hover for configurable delay** → Panel enlarges to 75% of screen with doubled text size (default: 5 seconds, configurable via `hoverDelay`)
 2. **Mouse can move freely** → Panel stays enlarged, won't close on mouse leave
 3. **Click × or backdrop** → Returns to normal size
 
-The × button is only visible when enlarged.
+The × button is only visible when enlarged. Set `hoverDelay: 0` to disable the enlarge feature entirely.
+
+**Auto-hide interaction:** When hovering a debug panel that has auto-hide enabled, the auto-hide timer is paused so the panel won't disappear before the hover-to-enlarge triggers.
 
 ### Configuration Options
 
@@ -324,6 +326,7 @@ The × button is only visible when enlarged.
 |--------|------|---------|-------------|
 | `maxEntries` | `number` | `50` | Maximum log entries before oldest are removed |
 | `showTimestamps` | `boolean` | `false` | Show timestamps on each entry |
+| `hoverDelay` | `number` | `5000` | Milliseconds to hover before enlarging (0 = disable) |
 
 Plus all standard `PanelConfig` options (`id`, `title`, `width`, `initialPosition`, `startCollapsed`, etc.)
 
@@ -334,6 +337,41 @@ Plus all standard `PanelConfig` options (`id`, `title`, `width`, `initialPositio
 debug.panel;  // PanelState - for advanced manipulation
 ```
 
+### Embeddable Debug Log
+
+You can embed a debug log inside any panel or container element using `createDebugLog()`:
+
+```typescript
+const manager = new TabManager();
+
+// Create a panel with custom content
+const panel = manager.addPanel({
+  id: 'my-panel',
+  title: 'My Panel',
+  content: '<div id="my-content">Some content</div>',
+});
+
+// Add a debug log section to the panel
+const logSection = document.createElement('div');
+panel.contentWrapper.appendChild(logSection);
+
+// Create the embedded debug log (shares hover-to-enlarge with standalone panels)
+const embeddedLog = manager.createDebugLog(logSection, {
+  maxEntries: 20,
+  showTimestamps: true,
+  hoverDelay: 3000,  // 3 second hover delay (0 to disable, default: 5000)
+});
+
+// Use it like a regular debug panel
+embeddedLog.log('event', { data: 'value' });
+embeddedLog.info('status', { connected: true });
+embeddedLog.warn('warning', { message: 'Low memory' });
+embeddedLog.error('error', { code: 500 });
+embeddedLog.clear();
+```
+
+The embedded log supports the same hover-to-enlarge behavior as the standalone debug panel.
+
 ## CSS Customization
 
 Override CSS variables to customize appearance:

package/dist/index.cjs

@@ -26,6 +26,7 @@ __export(index_exports, {
   SnapPreview: () => SnapPreview,
   TabManager: () => TabManager,
   areInSameChain: () => areInSameChain,
+  createDebugLog: () => createDebugLog,
   createDebugPanelContent: () => createDebugPanelContent,
   createDebugPanelInterface: () => createDebugPanelInterface,
   createPanelElement: () => createPanelElement,
@@ -44,6 +45,7 @@ __export(index_exports, {
   hidePanel: () => hidePanel,
   setPanelPosition: () => setPanelPosition,
   setPanelZIndex: () => setPanelZIndex,
+  setupHoverEnlarge: () => setupHoverEnlarge,
   showPanel: () => showPanel,
   snapPanels: () => snapPanels,
   snapPanelsToTarget: () => snapPanelsToTarget,
@@ -65,11 +67,24 @@ function createDebugPanelContent(_config, classes) {
   };
 }
 function createDebugPanelInterface(panel, elements, config, classes) {
+  const debugLog = createDebugLogInterface(elements.logContainer, config, classes);
+  return {
+    panel,
+    ...debugLog
+  };
+}
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+function createDebugLogInterface(logContainer, config, classes) {
   const maxEntries = config.maxEntries ?? 50;
   const showTimestamps = config.showTimestamps ?? false;
+  const entryClass = classes.debugLogEntry;
   function addEntry(level, eventName, data) {
     const entry = document.createElement("div");
-    entry.className = classes.debugLogEntry;
+    entry.className = entryClass;
     if (level === "warn") entry.classList.add(classes.debugLogEntryWarn);
     if (level === "error") entry.classList.add(classes.debugLogEntryError);
     let html = "";
@@ -88,27 +103,99 @@ function createDebugPanelInterface(panel, elements, config, classes) {
       html += `<span class="${classes.debugLogData}">${escapeHtml(dataStr)}</span>`;
     }
     entry.innerHTML = html;
-    elements.logContainer.appendChild(entry);
-    elements.logContainer.scrollTop = elements.logContainer.scrollHeight;
-    while (elements.logContainer.children.length > maxEntries) {
-      elements.logContainer.removeChild(elements.logContainer.children[0]);
+    logContainer.appendChild(entry);
+    logContainer.scrollTop = logContainer.scrollHeight;
+    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() {
+    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
   };
 }
-function escapeHtml(str) {
-  const div = document.createElement("div");
-  div.textContent = str;
-  return div.innerHTML;
+function createDebugLog(container, config, classes) {
+  const logContainer = document.createElement("div");
+  logContainer.className = classes.debugLog;
+  container.appendChild(logContainer);
+  const debugLog = createDebugLogInterface(logContainer, config, classes);
+  return { debugLog, logContainer };
+}
+function setupHoverEnlarge(config) {
+  const { logContainer, hoverDelay, backdropContainer, classes, onHoverStart, onHoverEnd, onClose } = config;
+  logContainer.classList.add(classes.debugPanel);
+  const closeBtn = document.createElement("button");
+  closeBtn.className = classes.debugClearButton;
+  closeBtn.textContent = "\xD7";
+  closeBtn.title = "Close enlarged view";
+  logContainer.appendChild(closeBtn);
+  let hoverTimeout = null;
+  let isEnlarged = false;
+  let backdrop = null;
+  let originalParent = null;
+  let placeholder = null;
+  const closeEnlarged = () => {
+    if (!isEnlarged) return;
+    isEnlarged = false;
+    logContainer.classList.remove(classes.debugPanelEnlarged);
+    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;
+    backdrop = document.createElement("div");
+    backdrop.className = classes.debugBackdrop;
+    backdropContainer.appendChild(backdrop);
+    backdrop.addEventListener("click", closeEnlarged);
+    originalParent = logContainer.parentElement;
+    placeholder = document.createComment("debug-log-placeholder");
+    originalParent?.insertBefore(placeholder, logContainer);
+    backdropContainer.appendChild(logContainer);
+    logContainer.classList.add(classes.debugPanelEnlarged);
+  };
+  logContainer.addEventListener("mouseenter", () => {
+    onHoverStart?.();
+    if (isEnlarged) return;
+    if (hoverDelay > 0) {
+      hoverTimeout = setTimeout(() => {
+        openEnlarged();
+      }, hoverDelay);
+    }
+  });
+  logContainer.addEventListener("mouseleave", () => {
+    if (hoverTimeout) {
+      clearTimeout(hoverTimeout);
+      hoverTimeout = null;
+    }
+    if (!isEnlarged) {
+      onHoverEnd?.();
+    }
+  });
+  closeBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    closeEnlarged();
+  });
 }
 
 // src/Panel.ts
@@ -901,6 +988,7 @@ var SnapPreview = class {
 var AutoHideManager = class {
   constructor(panels, classes, callbacks) {
     this.hideTimers = /* @__PURE__ */ new Map();
+    this.pausedPanels = /* @__PURE__ */ new Set();
     this.listenersAttached = false;
     this.panels = panels;
     this.classes = classes;
@@ -922,6 +1010,7 @@ var AutoHideManager = class {
    */
   handleActivity() {
     for (const panel of this.panels.values()) {
+      if (this.pausedPanels.has(panel.id)) continue;
       if (panel.resolvedAutoHideDelay !== void 0 || panel.isHidden) {
         this.show(panel, "activity");
         if (panel.resolvedAutoHideDelay !== void 0) {
@@ -951,6 +1040,23 @@ var AutoHideManager = class {
       this.hideTimers.delete(panelId);
     }
   }
+  /**
+   * Pause auto-hide timer for a panel (e.g., during debug hover)
+   */
+  pauseTimer(panelId) {
+    this.clearTimer(panelId);
+    this.pausedPanels.add(panelId);
+  }
+  /**
+   * Resume auto-hide timer for a panel
+   */
+  resumeTimer(panelId) {
+    this.pausedPanels.delete(panelId);
+    const panel = this.panels.get(panelId);
+    if (panel && panel.resolvedAutoHideDelay !== void 0) {
+      this.scheduleHide(panel);
+    }
+  }
   /**
    * Show a panel
    */
@@ -1157,58 +1263,38 @@ var TabManager = class {
       startCollapsed: config.startCollapsed ?? true
     };
     const state = this.addPanel(panelConfig);
-    state.element.classList.add(this.classes.debugPanel);
-    const closeBtn = document.createElement("button");
-    closeBtn.className = this.classes.debugClearButton;
-    closeBtn.textContent = "\xD7";
-    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);
-    let hoverTimeout = null;
-    let isEnlarged = false;
-    let backdrop = 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;
-      backdrop = document.createElement("div");
-      backdrop.className = backdropClass;
-      this.config.container.appendChild(backdrop);
-      backdrop.addEventListener("click", closeEnlarged);
-      state.element.classList.add(enlargedClass);
-    };
-    state.element.addEventListener("mouseenter", () => {
-      if (isEnlarged) return;
-      hoverTimeout = setTimeout(() => {
-        openEnlarged();
-      }, 5e3);
-    });
-    state.element.addEventListener("mouseleave", () => {
-      if (hoverTimeout) {
-        clearTimeout(hoverTimeout);
-        hoverTimeout = null;
-      }
-    });
-    closeBtn.addEventListener("click", (e) => {
-      e.stopPropagation();
-      closeEnlarged();
-    });
+    const hoverDelay = config.hoverDelay ?? 5e3;
+    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)
+      });
+    }
     return debugPanel;
   }
+  /**
+   * Create an embeddable debug log in any container element
+   */
+  createDebugLog(container, config = {}) {
+    const { debugLog, logContainer } = createDebugLog(container, config, this.classes);
+    const hoverDelay = config.hoverDelay ?? 5e3;
+    if (hoverDelay > 0) {
+      setupHoverEnlarge({
+        logContainer,
+        hoverDelay,
+        backdropContainer: this.config.container,
+        classes: this.classes
+      });
+    }
+    return debugLog;
+  }
   /**
    * Set up event handlers for a panel
    */
@@ -1476,6 +1562,7 @@ var TabManager = class {
   SnapPreview,
   TabManager,
   areInSameChain,
+  createDebugLog,
   createDebugPanelContent,
   createDebugPanelInterface,
   createPanelElement,
@@ -1494,6 +1581,7 @@ var TabManager = class {
   hidePanel,
   setPanelPosition,
   setPanelZIndex,
+  setupHoverEnlarge,
   showPanel,
   snapPanels,
   snapPanelsToTarget,

package/dist/index.d.cts

@@ -324,6 +324,19 @@ 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
+ */
+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;
 }
 /**
  * Log level for debug entries
@@ -346,6 +359,21 @@ interface DebugPanel {
     /** The underlying panel state */
     panel: PanelState;
 }
+/**
+ * Interface for an embeddable debug log (without panel)
+ */
+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;
+}
 
 /**
  * @blorkfield/blork-tabs - TabManager
@@ -396,6 +424,10 @@ declare class TabManager {
      * Add a debug panel with built-in logging functionality
      */
     addDebugPanel(config: DebugPanelConfig): DebugPanel;
+    /**
+     * Create an embeddable debug log in any container element
+     */
+    createDebugLog(container: HTMLElement, config?: DebugLogConfig): DebugLog;
     /**
      * Set up event handlers for a panel
      */
@@ -666,6 +698,7 @@ declare class AutoHideManager {
     private classes;
     private callbacks;
     private hideTimers;
+    private pausedPanels;
     private boundActivityHandler;
     private listenersAttached;
     constructor(panels: Map<string, PanelState>, classes: CSSClasses, callbacks: AutoHideCallbacks);
@@ -680,11 +713,19 @@ declare class AutoHideManager {
     /**
      * Schedule a panel to hide after its delay
      */
-    private scheduleHide;
+    scheduleHide(panel: PanelState): void;
     /**
      * Clear hide timer for a panel
      */
-    private clearTimer;
+    clearTimer(panelId: string): void;
+    /**
+     * Pause auto-hide timer for a panel (e.g., during debug hover)
+     */
+    pauseTimer(panelId: string): void;
+    /**
+     * Resume auto-hide timer for a panel
+     */
+    resumeTimer(panelId: string): void;
     /**
      * Show a panel
      */
@@ -724,9 +765,39 @@ declare function createDebugPanelContent(_config: DebugPanelConfig, classes: CSS
     elements: DebugPanelElements;
 };
 /**
- * Create the interface for interacting with a debug panel
+ * Create the interface for interacting with a debug panel.
+ * Uses the shared createDebugLogInterface internally.
  */
 declare function createDebugPanelInterface(panel: PanelState, elements: DebugPanelElements, config: DebugPanelConfig, classes: CSSClasses): DebugPanel;
+interface DebugLogSetup {
+    debugLog: DebugLog;
+    logContainer: HTMLDivElement;
+}
+/**
+ * Create an embeddable debug log in any container element
+ */
+declare function createDebugLog(container: HTMLElement, config: DebugLogConfig, classes: CSSClasses): DebugLogSetup;
+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.
+ */
+declare function setupHoverEnlarge(config: HoverEnlargeConfig): void;
 
 /**
  * @blorkfield/blork-tabs - Panel
@@ -843,4 +914,4 @@ declare function snapPanels(leftPanel: PanelState, rightPanel: PanelState): void
  */
 declare function unsnap(leftPanel: PanelState, rightPanel: PanelState): void;
 
-export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, unsnap, updateSnappedPositions };
+export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, unsnap, updateSnappedPositions };

package/dist/index.d.ts

@@ -324,6 +324,19 @@ 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
+ */
+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;
 }
 /**
  * Log level for debug entries
@@ -346,6 +359,21 @@ interface DebugPanel {
     /** The underlying panel state */
     panel: PanelState;
 }
+/**
+ * Interface for an embeddable debug log (without panel)
+ */
+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;
+}
 
 /**
  * @blorkfield/blork-tabs - TabManager
@@ -396,6 +424,10 @@ declare class TabManager {
      * Add a debug panel with built-in logging functionality
      */
     addDebugPanel(config: DebugPanelConfig): DebugPanel;
+    /**
+     * Create an embeddable debug log in any container element
+     */
+    createDebugLog(container: HTMLElement, config?: DebugLogConfig): DebugLog;
     /**
      * Set up event handlers for a panel
      */
@@ -666,6 +698,7 @@ declare class AutoHideManager {
     private classes;
     private callbacks;
     private hideTimers;
+    private pausedPanels;
     private boundActivityHandler;
     private listenersAttached;
     constructor(panels: Map<string, PanelState>, classes: CSSClasses, callbacks: AutoHideCallbacks);
@@ -680,11 +713,19 @@ declare class AutoHideManager {
     /**
      * Schedule a panel to hide after its delay
      */
-    private scheduleHide;
+    scheduleHide(panel: PanelState): void;
     /**
      * Clear hide timer for a panel
      */
-    private clearTimer;
+    clearTimer(panelId: string): void;
+    /**
+     * Pause auto-hide timer for a panel (e.g., during debug hover)
+     */
+    pauseTimer(panelId: string): void;
+    /**
+     * Resume auto-hide timer for a panel
+     */
+    resumeTimer(panelId: string): void;
     /**
      * Show a panel
      */
@@ -724,9 +765,39 @@ declare function createDebugPanelContent(_config: DebugPanelConfig, classes: CSS
     elements: DebugPanelElements;
 };
 /**
- * Create the interface for interacting with a debug panel
+ * Create the interface for interacting with a debug panel.
+ * Uses the shared createDebugLogInterface internally.
  */
 declare function createDebugPanelInterface(panel: PanelState, elements: DebugPanelElements, config: DebugPanelConfig, classes: CSSClasses): DebugPanel;
+interface DebugLogSetup {
+    debugLog: DebugLog;
+    logContainer: HTMLDivElement;
+}
+/**
+ * Create an embeddable debug log in any container element
+ */
+declare function createDebugLog(container: HTMLElement, config: DebugLogConfig, classes: CSSClasses): DebugLogSetup;
+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.
+ */
+declare function setupHoverEnlarge(config: HoverEnlargeConfig): void;
 
 /**
  * @blorkfield/blork-tabs - Panel
@@ -843,4 +914,4 @@ declare function snapPanels(leftPanel: PanelState, rightPanel: PanelState): void
  */
 declare function unsnap(leftPanel: PanelState, rightPanel: PanelState): void;
 
-export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, unsnap, updateSnappedPositions };
+export { type AnchorConfig, AnchorManager, type AnchorPreset, type AnchorSnapEvent, type AnchorSnapResult, type AnchorState, type AutoHideCallbacks, AutoHideManager, type Bounds, type CSSClasses, type DebugLog, type DebugLogConfig, type DebugLogLevel, type DebugPanel, type DebugPanelConfig, type DragEndEvent, DragManager, type DragMode, type DragMoveEvent, type DragStartEvent, type DragState, type EventListener, type PanelAddedEvent, type PanelCollapseEvent, type PanelConfig, type PanelDetachedEvent, type PanelHideEvent, type PanelRemovedEvent, type PanelShowEvent, type PanelSnapEvent, type PanelState, type Position, type ResolvedTabManagerConfig, SnapPreview, type SnapSide, type SnapTarget, TabManager, type TabManagerConfig, type TabManagerEvents, areInSameChain, createDebugLog, createDebugPanelContent, createDebugPanelInterface, createPanelElement, createPanelState, createPresetAnchor, detachFromGroup, findSnapTarget, getConnectedGroup, getDefaultAnchorConfigs, getDefaultZIndex, getDragZIndex, getLeftmostPanel, getPanelDimensions, getPanelPosition, getRightmostPanel, hidePanel, setPanelPosition, setPanelZIndex, setupHoverEnlarge, showPanel, snapPanels, snapPanelsToTarget, toggleCollapse, unsnap, updateSnappedPositions };