@blorkfield/blork-tabs 0.3.0 → 0.3.1

package/dist/index.js

@@ -10,11 +10,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 = "";
@@ -33,27 +46,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
@@ -846,6 +931,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;
@@ -867,6 +953,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) {
@@ -896,6 +983,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
    */
@@ -1102,58 +1206,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
    */
@@ -1420,6 +1504,7 @@ export {
   SnapPreview,
   TabManager,
   areInSameChain,
+  createDebugLog,
   createDebugPanelContent,
   createDebugPanelInterface,
   createPanelElement,
@@ -1438,6 +1523,7 @@ export {
   hidePanel,
   setPanelPosition,
   setPanelZIndex,
+  setupHoverEnlarge,
   showPanel,
   snapPanels,
   snapPanelsToTarget,

package/dist/styles.css

@@ -270,70 +270,81 @@
   opacity: 1;
 }
 
-/* Hide close button when NOT enlarged (only show when zoomed) */
-.blork-tabs-debug-panel .blork-tabs-debug-clear-btn {
-  display: none;
-}
-
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-clear-btn {
-  display: flex;
+/* Debug log hover effects - applied to .blork-tabs-debug-log */
+.blork-tabs-debug-log.blork-tabs-debug-panel {
+  transition: border-color 0.3s ease;
+  position: relative;
 }
 
-/* Debug panel hover effects */
-.blork-tabs-debug-panel {
-  transition: border-color 0.3s ease, opacity 0.3s ease;
-}
-
-.blork-tabs-debug-panel:hover {
+.blork-tabs-debug-log.blork-tabs-debug-panel:hover {
   border-color: var(--blork-tabs-accent, #4a90d9);
   box-shadow: 0 0 12px rgba(74, 144, 217, 0.3);
 }
 
-/* Enlarged state after hover timeout - 75% of screen, modal-level z-index */
-.blork-tabs-debug-panel-enlarged {
+/* No hover effect when already enlarged */
+.blork-tabs-debug-log.blork-tabs-debug-panel.blork-tabs-debug-panel-enlarged:hover {
+  border-color: rgba(255, 255, 255, 0.1);
+  box-shadow: none;
+}
+
+/* Enlarged state for debug log - applies to .blork-tabs-debug-log directly */
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged {
   position: fixed !important;
   width: 75vw !important;
   left: 12.5vw !important;
   top: 12.5vh !important;
+  max-height: 75vh !important;
+  min-height: 75vh !important;
   z-index: 100000 !important;
-}
-
-/* Make content area fill the enlarged panel */
-.blork-tabs-debug-panel-enlarged .blork-tabs-content {
-  max-height: 70vh !important;
-  padding: 16px;
-}
-
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log {
-  max-height: 65vh !important;
-  min-height: 65vh !important;
   font-size: 22px !important;
   line-height: 1.6;
+  padding: 16px;
+  border-radius: 8px;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.95) !important;
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-entry {
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-entry {
   padding: 10px 0;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-name {
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-name {
   font-size: 22px;
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-data {
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-data {
   font-size: 20px;
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-timestamp {
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-timestamp {
   font-size: 20px !important;
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-header {
-  padding: 14px 18px;
+/* Close button inside enlarged log */
+.blork-tabs-debug-log .blork-tabs-debug-clear-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  display: none;
+  width: 32px;
+  height: 32px;
+  font-size: 20px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 4px;
+  z-index: 1;
+}
+
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged {
+  position: fixed !important;
 }
 
-.blork-tabs-debug-panel-enlarged .blork-tabs-title {
-  font-size: 20px;
+.blork-tabs-debug-log.blork-tabs-debug-panel-enlarged .blork-tabs-debug-clear-btn {
+  display: flex;
+  position: sticky;
+  top: 0;
+  float: right;
+  margin-bottom: -32px;
 }
 
 /* Backdrop when enlarged */
@@ -344,7 +355,7 @@
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
-  z-index: 9999;
+  z-index: 99999;
 }
 
 /* Debug log scrollbar styling */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blorkfield/blork-tabs",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A framework-agnostic tab/panel management system with snapping and docking",
   "packageManager": "pnpm@10.28.2",
   "type": "module",

package/src/AutoHideManager.ts

@@ -19,6 +19,7 @@ export class AutoHideManager {
   private classes: CSSClasses;
   private callbacks: AutoHideCallbacks;
   private hideTimers: Map<string, ReturnType<typeof setTimeout>> = new Map();
+  private pausedPanels: Set<string> = new Set();
   private boundActivityHandler: () => void;
   private listenersAttached = false;
 
@@ -49,6 +50,9 @@ export class AutoHideManager {
    */
   private handleActivity(): void {
     for (const panel of this.panels.values()) {
+      // Skip paused panels - they handle their own timing
+      if (this.pausedPanels.has(panel.id)) continue;
+
       // Only process panels that participate in auto-hide
       if (panel.resolvedAutoHideDelay !== undefined || panel.isHidden) {
         this.show(panel, 'activity');
@@ -62,7 +66,7 @@ export class AutoHideManager {
   /**
    * Schedule a panel to hide after its delay
    */
-  private scheduleHide(panel: PanelState): void {
+  scheduleHide(panel: PanelState): void {
     this.clearTimer(panel.id);
     if (panel.resolvedAutoHideDelay === undefined) return;
 
@@ -75,7 +79,7 @@ export class AutoHideManager {
   /**
    * Clear hide timer for a panel
    */
-  private clearTimer(panelId: string): void {
+  clearTimer(panelId: string): void {
     const timer = this.hideTimers.get(panelId);
     if (timer) {
       clearTimeout(timer);
@@ -83,6 +87,25 @@ export class AutoHideManager {
     }
   }
 
+  /**
+   * Pause auto-hide timer for a panel (e.g., during debug hover)
+   */
+  pauseTimer(panelId: string): void {
+    this.clearTimer(panelId);
+    this.pausedPanels.add(panelId);
+  }
+
+  /**
+   * Resume auto-hide timer for a panel
+   */
+  resumeTimer(panelId: string): void {
+    this.pausedPanels.delete(panelId);
+    const panel = this.panels.get(panelId);
+    if (panel && panel.resolvedAutoHideDelay !== undefined) {
+      this.scheduleHide(panel);
+    }
+  }
+
   /**
    * Show a panel
    */