@blorkfield/blork-tabs 0.2.6 → 0.3.0

package/dist/index.js

@@ -1,3 +1,61 @@
+// src/DebugPanel.ts
+function createDebugPanelContent(_config, classes) {
+  const content = document.createElement("div");
+  const logContainer = document.createElement("div");
+  logContainer.className = classes.debugLog;
+  content.appendChild(logContainer);
+  return {
+    content,
+    elements: { logContainer, clearButton: null }
+  };
+}
+function createDebugPanelInterface(panel, elements, config, classes) {
+  const maxEntries = config.maxEntries ?? 50;
+  const showTimestamps = config.showTimestamps ?? false;
+  function addEntry(level, eventName, data) {
+    const entry = document.createElement("div");
+    entry.className = classes.debugLogEntry;
+    if (level === "warn") entry.classList.add(classes.debugLogEntryWarn);
+    if (level === "error") entry.classList.add(classes.debugLogEntryError);
+    let html = "";
+    if (showTimestamps) {
+      const time = (/* @__PURE__ */ new Date()).toLocaleTimeString("en-US", {
+        hour12: false,
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit"
+      });
+      html += `<span class="${classes.debugLogTimestamp}">${time}</span>`;
+    }
+    html += `<span class="${classes.debugLogName}">${escapeHtml(eventName)}</span>`;
+    if (data) {
+      const dataStr = JSON.stringify(data);
+      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]);
+    }
+  }
+  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 = "";
+    }
+  };
+}
+function escapeHtml(str) {
+  const div = document.createElement("div");
+  div.textContent = str;
+  return div.innerHTML;
+}
+
 // src/Panel.ts
 function createPanelElement(config, classes) {
   const element = document.createElement("div");
@@ -52,7 +110,7 @@ function createPanelElement(config, classes) {
     detachGrip
   };
 }
-function createPanelState(config, classes) {
+function createPanelState(config, classes, globalConfig) {
   let element;
   let dragHandle;
   let collapseButton;
@@ -72,6 +130,11 @@ function createPanelState(config, classes) {
     contentWrapper = created.contentWrapper;
     detachGrip = created.detachGrip;
   }
+  const resolvedStartHidden = config.startHidden ?? globalConfig?.startHidden ?? false;
+  const resolvedAutoHideDelay = config.autoHideDelay !== void 0 ? config.autoHideDelay === 0 ? void 0 : config.autoHideDelay : globalConfig?.autoHideDelay;
+  if (resolvedStartHidden) {
+    element.classList.add(classes.panelHidden);
+  }
   return {
     id: config.id,
     element,
@@ -82,7 +145,9 @@ function createPanelState(config, classes) {
     isCollapsed: config.startCollapsed !== false,
     snappedTo: null,
     snappedFrom: null,
-    config
+    config,
+    isHidden: resolvedStartHidden,
+    resolvedAutoHideDelay
   };
 }
 function toggleCollapse(state, classes, collapsed) {
@@ -98,6 +163,16 @@ function toggleCollapse(state, classes, collapsed) {
   }
   return newState;
 }
+function showPanel(state, classes) {
+  if (!state.isHidden) return;
+  state.isHidden = false;
+  state.element.classList.remove(classes.panelHidden);
+}
+function hidePanel(state, classes) {
+  if (state.isHidden) return;
+  state.isHidden = true;
+  state.element.classList.add(classes.panelHidden);
+}
 function setPanelPosition(state, x, y) {
   state.element.style.left = `${x}px`;
   state.element.style.top = `${y}px`;
@@ -767,6 +842,109 @@ var SnapPreview = class {
   }
 };
 
+// src/AutoHideManager.ts
+var AutoHideManager = class {
+  constructor(panels, classes, callbacks) {
+    this.hideTimers = /* @__PURE__ */ new Map();
+    this.listenersAttached = false;
+    this.panels = panels;
+    this.classes = classes;
+    this.callbacks = callbacks;
+    this.boundActivityHandler = this.handleActivity.bind(this);
+  }
+  /**
+   * Attach activity listeners to document
+   */
+  attachListeners() {
+    if (this.listenersAttached) return;
+    document.addEventListener("mousemove", this.boundActivityHandler);
+    document.addEventListener("mousedown", this.boundActivityHandler);
+    document.addEventListener("keydown", this.boundActivityHandler);
+    this.listenersAttached = true;
+  }
+  /**
+   * Handle user activity - show hidden panels and reset timers
+   */
+  handleActivity() {
+    for (const panel of this.panels.values()) {
+      if (panel.resolvedAutoHideDelay !== void 0 || panel.isHidden) {
+        this.show(panel, "activity");
+        if (panel.resolvedAutoHideDelay !== void 0) {
+          this.scheduleHide(panel);
+        }
+      }
+    }
+  }
+  /**
+   * Schedule a panel to hide after its delay
+   */
+  scheduleHide(panel) {
+    this.clearTimer(panel.id);
+    if (panel.resolvedAutoHideDelay === void 0) return;
+    const timer = setTimeout(() => {
+      this.hide(panel, "timeout");
+    }, panel.resolvedAutoHideDelay);
+    this.hideTimers.set(panel.id, timer);
+  }
+  /**
+   * Clear hide timer for a panel
+   */
+  clearTimer(panelId) {
+    const timer = this.hideTimers.get(panelId);
+    if (timer) {
+      clearTimeout(timer);
+      this.hideTimers.delete(panelId);
+    }
+  }
+  /**
+   * Show a panel
+   */
+  show(panel, trigger) {
+    if (!panel.isHidden) return;
+    showPanel(panel, this.classes);
+    this.callbacks.onShow?.(panel, trigger);
+  }
+  /**
+   * Hide a panel
+   */
+  hide(panel, trigger) {
+    if (panel.isHidden) return;
+    hidePanel(panel, this.classes);
+    this.callbacks.onHide?.(panel, trigger);
+  }
+  /**
+   * Initialize a newly added panel's auto-hide state
+   */
+  initializePanel(panel) {
+    if (panel.resolvedAutoHideDelay !== void 0 || panel.isHidden) {
+      this.attachListeners();
+    }
+    if (!panel.isHidden && panel.resolvedAutoHideDelay !== void 0) {
+      this.scheduleHide(panel);
+    }
+  }
+  /**
+   * Clean up when a panel is removed
+   */
+  cleanupPanel(panelId) {
+    this.clearTimer(panelId);
+  }
+  /**
+   * Clean up all resources
+   */
+  destroy() {
+    if (this.listenersAttached) {
+      document.removeEventListener("mousemove", this.boundActivityHandler);
+      document.removeEventListener("mousedown", this.boundActivityHandler);
+      document.removeEventListener("keydown", this.boundActivityHandler);
+    }
+    for (const timer of this.hideTimers.values()) {
+      clearTimeout(timer);
+    }
+    this.hideTimers.clear();
+  }
+};
+
 // src/TabManager.ts
 var DEFAULT_CONFIG = {
   snapThreshold: 50,
@@ -776,7 +954,9 @@ var DEFAULT_CONFIG = {
   defaultPanelWidth: 300,
   container: document.body,
   initializeDefaultAnchors: true,
-  classPrefix: "blork-tabs"
+  classPrefix: "blork-tabs",
+  startHidden: false,
+  autoHideDelay: void 0
 };
 function generateClasses(prefix) {
   return {
@@ -792,13 +972,27 @@ function generateClasses(prefix) {
     anchorIndicator: `${prefix}-anchor-indicator`,
     anchorIndicatorVisible: `${prefix}-anchor-indicator-visible`,
     anchorIndicatorActive: `${prefix}-anchor-indicator-active`,
-    dragging: `${prefix}-dragging`
+    dragging: `${prefix}-dragging`,
+    panelHidden: `${prefix}-panel-hidden`,
+    debugLog: `${prefix}-debug-log`,
+    debugLogEntry: `${prefix}-debug-log-entry`,
+    debugLogEntryInfo: `${prefix}-debug-log-entry-info`,
+    debugLogEntryWarn: `${prefix}-debug-log-entry-warn`,
+    debugLogEntryError: `${prefix}-debug-log-entry-error`,
+    debugLogName: `${prefix}-debug-log-name`,
+    debugLogData: `${prefix}-debug-log-data`,
+    debugLogTimestamp: `${prefix}-debug-log-timestamp`,
+    debugClearButton: `${prefix}-debug-clear-btn`,
+    debugPanel: `${prefix}-debug-panel`,
+    debugPanelEnlarged: `${prefix}-debug-panel-enlarged`,
+    debugBackdrop: `${prefix}-debug-backdrop`
   };
 }
 var TabManager = class {
   constructor(userConfig = {}) {
     this.panels = /* @__PURE__ */ new Map();
     this.eventListeners = /* @__PURE__ */ new Map();
+    this.debugPanelElements = /* @__PURE__ */ new Map();
     this.config = {
       ...DEFAULT_CONFIG,
       ...userConfig,
@@ -821,6 +1015,14 @@ var TabManager = class {
         findAnchorTarget: (panels) => this.anchorManager.findNearestAnchor(panels)
       }
     );
+    this.autoHideManager = new AutoHideManager(
+      this.panels,
+      this.classes,
+      {
+        onShow: (panel, trigger) => this.emit("panel:show", { panel, trigger }),
+        onHide: (panel, trigger) => this.emit("panel:hide", { panel, trigger })
+      }
+    );
     if (this.config.initializeDefaultAnchors) {
       this.anchorManager.addDefaultAnchors();
     }
@@ -830,7 +1032,10 @@ var TabManager = class {
    * Add a new panel
    */
   addPanel(panelConfig) {
-    const state = createPanelState(panelConfig, this.classes);
+    const state = createPanelState(panelConfig, this.classes, {
+      startHidden: this.config.startHidden,
+      autoHideDelay: this.config.autoHideDelay
+    });
     if (!panelConfig.element && !this.config.container.contains(state.element)) {
       this.config.container.appendChild(state.element);
     }
@@ -839,6 +1044,7 @@ var TabManager = class {
     if (panelConfig.initialPosition) {
       setPanelPosition(state, panelConfig.initialPosition.x, panelConfig.initialPosition.y);
     }
+    this.autoHideManager.initializePanel(state);
     this.emit("panel:added", { panel: state });
     return state;
   }
@@ -862,6 +1068,8 @@ var TabManager = class {
   removePanel(id) {
     const panel = this.panels.get(id);
     if (!panel) return false;
+    this.autoHideManager.cleanupPanel(id);
+    this.debugPanelElements.delete(id);
     detachFromGroup(panel, this.panels);
     if (!panel.config.element) {
       panel.element.remove();
@@ -882,6 +1090,70 @@ var TabManager = class {
   getAllPanels() {
     return Array.from(this.panels.values());
   }
+  /**
+   * Add a debug panel with built-in logging functionality
+   */
+  addDebugPanel(config) {
+    const { content, elements } = createDebugPanelContent(config, this.classes);
+    const panelConfig = {
+      ...config,
+      title: config.title ?? "Debug",
+      content,
+      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();
+    });
+    return debugPanel;
+  }
   /**
    * Set up event handlers for a panel
    */
@@ -967,6 +1239,31 @@ var TabManager = class {
   getAnchors() {
     return this.anchorManager.getAnchors();
   }
+  // ==================== Auto-Hide ====================
+  /**
+   * Show a hidden panel
+   */
+  show(panelId) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return false;
+    this.autoHideManager.show(panel, "api");
+    return true;
+  }
+  /**
+   * Hide a panel
+   */
+  hide(panelId) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return false;
+    this.autoHideManager.hide(panel, "api");
+    return true;
+  }
+  /**
+   * Check if a panel is hidden
+   */
+  isHidden(panelId) {
+    return this.panels.get(panelId)?.isHidden ?? false;
+  }
   // ==================== Drag Callbacks ====================
   handleDragStart(state) {
     this.anchorManager.showIndicators(null);
@@ -1105,6 +1402,7 @@ var TabManager = class {
     this.dragManager.destroy();
     this.anchorManager.destroy();
     this.snapPreview.destroy();
+    this.autoHideManager.destroy();
     for (const panel of this.panels.values()) {
       if (!panel.config.element) {
         panel.element.remove();
@@ -1112,14 +1410,18 @@ var TabManager = class {
     }
     this.panels.clear();
     this.eventListeners.clear();
+    this.debugPanelElements.clear();
   }
 };
 export {
   AnchorManager,
+  AutoHideManager,
   DragManager,
   SnapPreview,
   TabManager,
   areInSameChain,
+  createDebugPanelContent,
+  createDebugPanelInterface,
   createPanelElement,
   createPanelState,
   createPresetAnchor,
@@ -1133,8 +1435,10 @@ export {
   getPanelDimensions,
   getPanelPosition,
   getRightmostPanel,
+  hidePanel,
   setPanelPosition,
   setPanelZIndex,
+  showPanel,
   snapPanels,
   snapPanelsToTarget,
   toggleCollapse,

package/dist/styles.css

@@ -119,6 +119,16 @@
   display: none;
 }
 
+/* Auto-hide state */
+.blork-tabs-panel-hidden {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.blork-tabs-panel {
+  transition: opacity 0.3s ease;
+}
+
 /* Snap Preview */
 .blork-tabs-snap-preview {
   position: fixed;
@@ -189,3 +199,168 @@
 .blork-tabs-dragging .blork-tabs-panel {
   transition: none !important;
 }
+
+/* Debug Panel Log */
+.blork-tabs-debug-log {
+  min-height: 100px;
+  max-height: 200px;
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 8px;
+  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  font-size: 11px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.blork-tabs-debug-log-entry {
+  padding: 3px 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #a0a0a0;
+  word-break: break-all;
+}
+
+.blork-tabs-debug-log-entry:last-child {
+  border-bottom: none;
+}
+
+.blork-tabs-debug-log-name {
+  color: var(--blork-tabs-accent, #4a90d9);
+  margin-right: 6px;
+}
+
+/* Log level colors */
+.blork-tabs-debug-log-entry-warn .blork-tabs-debug-log-name {
+  color: #feca57;
+}
+
+.blork-tabs-debug-log-entry-error .blork-tabs-debug-log-name {
+  color: #ff6b6b;
+}
+
+.blork-tabs-debug-log-data {
+  color: #888;
+}
+
+.blork-tabs-debug-log-timestamp {
+  color: #666;
+  margin-right: 6px;
+  font-size: 10px;
+}
+
+.blork-tabs-debug-clear-btn {
+  width: 20px;
+  height: 20px;
+  border: none;
+  background: transparent;
+  color: var(--blork-tabs-header-color, #e0e0e0);
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 4px;
+  opacity: 0.6;
+}
+
+.blork-tabs-debug-clear-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  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 panel hover effects */
+.blork-tabs-debug-panel {
+  transition: border-color 0.3s ease, opacity 0.3s ease;
+}
+
+.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 {
+  position: fixed !important;
+  width: 75vw !important;
+  left: 12.5vw !important;
+  top: 12.5vh !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;
+}
+
+.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 {
+  font-size: 22px;
+}
+
+.blork-tabs-debug-panel-enlarged .blork-tabs-debug-log-data {
+  font-size: 20px;
+}
+
+.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;
+}
+
+.blork-tabs-debug-panel-enlarged .blork-tabs-title {
+  font-size: 20px;
+}
+
+/* Backdrop when enlarged */
+.blork-tabs-debug-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+
+/* Debug log scrollbar styling */
+.blork-tabs-debug-log::-webkit-scrollbar {
+  width: 6px;
+}
+
+.blork-tabs-debug-log::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.blork-tabs-debug-log::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 3px;
+}
+
+.blork-tabs-debug-log::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}

package/package.json

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