@blorkfield/blork-tabs 0.3.0 → 0.4.0

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,
@@ -38,16 +39,19 @@ __export(index_exports, {
   getDefaultZIndex: () => getDefaultZIndex,
   getDragZIndex: () => getDragZIndex,
   getLeftmostPanel: () => getLeftmostPanel,
+  getMovingGroupRespectingPins: () => getMovingGroupRespectingPins,
   getPanelDimensions: () => getPanelDimensions,
   getPanelPosition: () => getPanelPosition,
   getRightmostPanel: () => getRightmostPanel,
   hidePanel: () => hidePanel,
   setPanelPosition: () => setPanelPosition,
   setPanelZIndex: () => setPanelZIndex,
+  setupHoverEnlarge: () => setupHoverEnlarge,
   showPanel: () => showPanel,
   snapPanels: () => snapPanels,
   snapPanelsToTarget: () => snapPanelsToTarget,
   toggleCollapse: () => toggleCollapse,
+  togglePin: () => togglePin,
   unsnap: () => unsnap,
   updateSnappedPositions: () => updateSnappedPositions
 });
@@ -65,11 +69,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,30 +105,104 @@ 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
+var PIN_ICON_UNPINNED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17H19V16L17 11V4H7L5 11V16Z"/><line x1="5" y1="11" x2="19" y2="11"/></svg>`;
+var PIN_ICON_PINNED = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display:block;transform:rotate(90deg)"><line x1="12" y1="17" x2="12" y2="22"/><path d="M5 17H19V16L17 11V4H7L5 11V16Z"/><line x1="5" y1="11" x2="19" y2="11"/></svg>`;
 function createPanelElement(config, classes) {
   const element = document.createElement("div");
   element.className = classes.panel;
@@ -134,6 +225,14 @@ function createPanelElement(config, classes) {
     title.textContent = config.title;
     header.appendChild(title);
   }
+  let pinButton = null;
+  if (config.pinnable === true) {
+    pinButton = document.createElement("button");
+    pinButton.className = classes.pinButton;
+    pinButton.id = `${config.id}-pin-btn`;
+    pinButton.innerHTML = config.startPinned === true ? PIN_ICON_PINNED : PIN_ICON_UNPINNED;
+    header.appendChild(pinButton);
+  }
   let collapseButton = null;
   if (config.collapsible !== false) {
     collapseButton = document.createElement("button");
@@ -160,6 +259,7 @@ function createPanelElement(config, classes) {
   return {
     element,
     dragHandle: header,
+    pinButton,
     collapseButton,
     contentWrapper,
     detachGrip
@@ -168,12 +268,14 @@ function createPanelElement(config, classes) {
 function createPanelState(config, classes, globalConfig) {
   let element;
   let dragHandle;
+  let pinButton;
   let collapseButton;
   let contentWrapper;
   let detachGrip;
   if (config.element) {
     element = config.element;
     dragHandle = config.dragHandle ?? element.querySelector(`.${classes.panelHeader}`);
+    pinButton = config.pinButton ?? element.querySelector(`.${classes.pinButton}`);
     collapseButton = config.collapseButton ?? element.querySelector(`.${classes.collapseButton}`);
     contentWrapper = config.contentWrapper ?? element.querySelector(`.${classes.panelContent}`);
     detachGrip = config.detachGrip ?? element.querySelector(`.${classes.detachGrip}`);
@@ -181,6 +283,7 @@ function createPanelState(config, classes, globalConfig) {
     const created = createPanelElement(config, classes);
     element = created.element;
     dragHandle = created.dragHandle;
+    pinButton = created.pinButton;
     collapseButton = created.collapseButton;
     contentWrapper = created.contentWrapper;
     detachGrip = created.detachGrip;
@@ -194,9 +297,11 @@ function createPanelState(config, classes, globalConfig) {
     id: config.id,
     element,
     dragHandle,
+    pinButton,
     collapseButton,
     contentWrapper,
     detachGrip,
+    isPinned: config.startPinned === true,
     isCollapsed: config.startCollapsed !== false,
     snappedTo: null,
     snappedFrom: null,
@@ -218,6 +323,14 @@ function toggleCollapse(state, classes, collapsed) {
   }
   return newState;
 }
+function togglePin(state, pinned) {
+  const newState = pinned ?? !state.isPinned;
+  state.isPinned = newState;
+  if (state.pinButton) {
+    state.pinButton.innerHTML = newState ? PIN_ICON_PINNED : PIN_ICON_UNPINNED;
+  }
+  return newState;
+}
 function showPanel(state, classes) {
   if (!state.isHidden) return;
   state.isHidden = false;
@@ -395,6 +508,28 @@ function snapPanels(leftPanel, rightPanel) {
   leftPanel.snappedTo = rightPanel.id;
   rightPanel.snappedFrom = leftPanel.id;
 }
+function getMovingGroupRespectingPins(grabbedPanel, panels) {
+  if (grabbedPanel.isPinned) return [];
+  const fullGroup = getConnectedGroup(grabbedPanel, panels);
+  const grabbedIndex = fullGroup.indexOf(grabbedPanel);
+  const leftPanels = [];
+  for (let i = grabbedIndex; i >= 0; i--) {
+    if (fullGroup[i].isPinned) {
+      unsnap(fullGroup[i], fullGroup[i + 1]);
+      break;
+    }
+    leftPanels.unshift(fullGroup[i]);
+  }
+  const rightPanels = [];
+  for (let i = grabbedIndex + 1; i < fullGroup.length; i++) {
+    if (fullGroup[i].isPinned) {
+      unsnap(fullGroup[i - 1], fullGroup[i]);
+      break;
+    }
+    rightPanels.push(fullGroup[i]);
+  }
+  return [...leftPanels, ...rightPanels];
+}
 function unsnap(leftPanel, rightPanel) {
   if (leftPanel.snappedTo === rightPanel.id) {
     leftPanel.snappedTo = null;
@@ -422,18 +557,18 @@ var DragManager = class {
   startDrag(e, panel, mode) {
     e.preventDefault();
     e.stopPropagation();
-    const connectedPanels = getConnectedGroup(panel, this.panels);
-    const initialGroupPositions = /* @__PURE__ */ new Map();
-    for (const p of connectedPanels) {
-      const rect2 = p.element.getBoundingClientRect();
-      initialGroupPositions.set(p.id, { x: rect2.left, y: rect2.top });
-    }
     let movingPanels;
     if (mode === "single") {
       detachFromGroup(panel, this.panels);
       movingPanels = [panel];
     } else {
-      movingPanels = connectedPanels;
+      movingPanels = getMovingGroupRespectingPins(panel, this.panels);
+      if (movingPanels.length === 0) return;
+    }
+    const initialGroupPositions = /* @__PURE__ */ new Map();
+    for (const p of movingPanels) {
+      const rect2 = p.element.getBoundingClientRect();
+      initialGroupPositions.set(p.id, { x: rect2.left, y: rect2.top });
     }
     const rect = panel.element.getBoundingClientRect();
     this.activeDrag = {
@@ -901,6 +1036,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 +1058,8 @@ var AutoHideManager = class {
    */
   handleActivity() {
     for (const panel of this.panels.values()) {
+      if (panel.isPinned) continue;
+      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 +1089,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
    */
@@ -964,9 +1119,27 @@ var AutoHideManager = class {
    */
   hide(panel, trigger) {
     if (panel.isHidden) return;
+    if (panel.isPinned) return;
     hidePanel(panel, this.classes);
     this.callbacks.onHide?.(panel, trigger);
   }
+  /**
+   * Called when a panel's pin state changes.
+   * Pinning cancels the hide timer and reveals the panel if hidden.
+   * Unpinning restarts the timer if the panel participates in auto-hide.
+   */
+  onPanelPinChanged(panel) {
+    if (panel.isPinned) {
+      this.clearTimer(panel.id);
+      if (panel.isHidden) {
+        this.show(panel, "api");
+      }
+    } else {
+      if (!panel.isHidden && panel.resolvedAutoHideDelay !== void 0) {
+        this.scheduleHide(panel);
+      }
+    }
+  }
   /**
    * Initialize a newly added panel's auto-hide state
    */
@@ -1021,6 +1194,7 @@ function generateClasses(prefix) {
     panelContent: `${prefix}-content`,
     panelContentCollapsed: `${prefix}-content-collapsed`,
     detachGrip: `${prefix}-detach-grip`,
+    pinButton: `${prefix}-pin-btn`,
     collapseButton: `${prefix}-collapse-btn`,
     snapPreview: `${prefix}-snap-preview`,
     snapPreviewVisible: `${prefix}-snap-preview-visible`,
@@ -1111,6 +1285,7 @@ var TabManager = class {
       id,
       element,
       dragHandle: options.dragHandle,
+      pinButton: options.pinButton,
       collapseButton: options.collapseButton,
       contentWrapper: options.contentWrapper,
       detachGrip: options.detachGrip,
@@ -1157,58 +1332,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
    */
@@ -1220,15 +1375,25 @@ var TabManager = class {
         this.emit("panel:collapse", { panel: state, isCollapsed: newState });
       });
     }
+    if (state.pinButton) {
+      state.pinButton.addEventListener("click", () => {
+        const isPinned = togglePin(state);
+        this.autoHideManager.onPanelPinChanged(state);
+        this.emit("panel:pin", { panel: state, isPinned });
+      });
+    }
     if (state.detachGrip) {
       state.detachGrip.addEventListener("mousedown", (e) => {
+        if (state.isPinned) return;
         this.dragManager.startDrag(e, state, "single");
       });
     }
     state.dragHandle.addEventListener("mousedown", (e) => {
-      if (e.target === state.collapseButton || e.target === state.detachGrip) {
+      const target = e.target;
+      if (e.target === state.collapseButton || e.target === state.detachGrip || state.pinButton && state.pinButton.contains(target)) {
         return;
       }
+      if (state.isPinned) return;
       this.dragManager.startDrag(e, state, "group");
     });
   }
@@ -1476,6 +1641,7 @@ var TabManager = class {
   SnapPreview,
   TabManager,
   areInSameChain,
+  createDebugLog,
   createDebugPanelContent,
   createDebugPanelInterface,
   createPanelElement,
@@ -1488,16 +1654,19 @@ var TabManager = class {
   getDefaultZIndex,
   getDragZIndex,
   getLeftmostPanel,
+  getMovingGroupRespectingPins,
   getPanelDimensions,
   getPanelPosition,
   getRightmostPanel,
   hidePanel,
   setPanelPosition,
   setPanelZIndex,
+  setupHoverEnlarge,
   showPanel,
   snapPanels,
   snapPanelsToTarget,
   toggleCollapse,
+  togglePin,
   unsnap,
   updateSnappedPositions
 });