@blorkfield/blork-tabs 0.1.3

package/dist/index.cjs

@@ -0,0 +1,1194 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AnchorManager: () => AnchorManager,
+  DragManager: () => DragManager,
+  SnapPreview: () => SnapPreview,
+  TabManager: () => TabManager,
+  areInSameChain: () => areInSameChain,
+  createPanelElement: () => createPanelElement,
+  createPanelState: () => createPanelState,
+  createPresetAnchor: () => createPresetAnchor,
+  detachFromGroup: () => detachFromGroup,
+  findSnapTarget: () => findSnapTarget,
+  getConnectedGroup: () => getConnectedGroup,
+  getDefaultAnchorConfigs: () => getDefaultAnchorConfigs,
+  getDefaultZIndex: () => getDefaultZIndex,
+  getDragZIndex: () => getDragZIndex,
+  getLeftmostPanel: () => getLeftmostPanel,
+  getPanelDimensions: () => getPanelDimensions,
+  getPanelPosition: () => getPanelPosition,
+  getRightmostPanel: () => getRightmostPanel,
+  setPanelPosition: () => setPanelPosition,
+  setPanelZIndex: () => setPanelZIndex,
+  snapPanels: () => snapPanels,
+  snapPanelsToTarget: () => snapPanelsToTarget,
+  toggleCollapse: () => toggleCollapse,
+  unsnap: () => unsnap,
+  updateSnappedPositions: () => updateSnappedPositions
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Panel.ts
+function createPanelElement(config, classes) {
+  const element = document.createElement("div");
+  element.className = classes.panel;
+  element.id = `${config.id}-panel`;
+  element.style.width = `${config.width ?? 300}px`;
+  element.style.zIndex = `${config.zIndex ?? 1e3}`;
+  const header = document.createElement("div");
+  header.className = classes.panelHeader;
+  header.id = `${config.id}-header`;
+  let detachGrip = null;
+  if (config.detachable !== false) {
+    detachGrip = document.createElement("div");
+    detachGrip.className = classes.detachGrip;
+    detachGrip.id = `${config.id}-detach-grip`;
+    header.appendChild(detachGrip);
+  }
+  if (config.title) {
+    const title = document.createElement("span");
+    title.className = classes.panelTitle;
+    title.textContent = config.title;
+    header.appendChild(title);
+  }
+  let collapseButton = null;
+  if (config.collapsible !== false) {
+    collapseButton = document.createElement("button");
+    collapseButton.className = classes.collapseButton;
+    collapseButton.id = `${config.id}-collapse-btn`;
+    collapseButton.textContent = config.startCollapsed !== false ? "+" : "\u2212";
+    header.appendChild(collapseButton);
+  }
+  element.appendChild(header);
+  const contentWrapper = document.createElement("div");
+  contentWrapper.className = classes.panelContent;
+  contentWrapper.id = `${config.id}-content`;
+  if (config.startCollapsed !== false) {
+    contentWrapper.classList.add(classes.panelContentCollapsed);
+  }
+  if (config.content) {
+    if (typeof config.content === "string") {
+      contentWrapper.innerHTML = config.content;
+    } else {
+      contentWrapper.appendChild(config.content);
+    }
+  }
+  element.appendChild(contentWrapper);
+  return {
+    element,
+    dragHandle: header,
+    collapseButton,
+    contentWrapper,
+    detachGrip
+  };
+}
+function createPanelState(config, classes) {
+  let element;
+  let dragHandle;
+  let collapseButton;
+  let contentWrapper;
+  let detachGrip;
+  if (config.element) {
+    element = config.element;
+    dragHandle = config.dragHandle ?? element.querySelector(`.${classes.panelHeader}`);
+    collapseButton = config.collapseButton ?? element.querySelector(`.${classes.collapseButton}`);
+    contentWrapper = config.contentWrapper ?? element.querySelector(`.${classes.panelContent}`);
+    detachGrip = config.detachGrip ?? element.querySelector(`.${classes.detachGrip}`);
+  } else {
+    const created = createPanelElement(config, classes);
+    element = created.element;
+    dragHandle = created.dragHandle;
+    collapseButton = created.collapseButton;
+    contentWrapper = created.contentWrapper;
+    detachGrip = created.detachGrip;
+  }
+  return {
+    id: config.id,
+    element,
+    dragHandle,
+    collapseButton,
+    contentWrapper,
+    detachGrip,
+    isCollapsed: config.startCollapsed !== false,
+    snappedTo: null,
+    snappedFrom: null,
+    config
+  };
+}
+function toggleCollapse(state, classes, collapsed) {
+  const newState = collapsed ?? !state.isCollapsed;
+  state.isCollapsed = newState;
+  if (newState) {
+    state.contentWrapper.classList.add(classes.panelContentCollapsed);
+  } else {
+    state.contentWrapper.classList.remove(classes.panelContentCollapsed);
+  }
+  if (state.collapseButton) {
+    state.collapseButton.textContent = newState ? "+" : "\u2212";
+  }
+  return newState;
+}
+function setPanelPosition(state, x, y) {
+  state.element.style.left = `${x}px`;
+  state.element.style.top = `${y}px`;
+  state.element.style.right = "auto";
+}
+function getPanelPosition(state) {
+  const rect = state.element.getBoundingClientRect();
+  return { x: rect.left, y: rect.top };
+}
+function getPanelDimensions(state) {
+  return {
+    width: state.element.offsetWidth,
+    height: state.element.offsetHeight
+  };
+}
+function setPanelZIndex(state, zIndex) {
+  state.element.style.zIndex = `${zIndex}`;
+}
+function getDefaultZIndex(state) {
+  return state.config.zIndex ?? 1e3;
+}
+function getDragZIndex(state) {
+  return state.config.dragZIndex ?? 1002;
+}
+
+// src/SnapChain.ts
+function getConnectedGroup(startPanel, panels) {
+  const group = [];
+  const visited = /* @__PURE__ */ new Set();
+  let current = startPanel;
+  while (current && !visited.has(current.id)) {
+    visited.add(current.id);
+    group.unshift(current);
+    if (current.snappedFrom) {
+      current = panels.get(current.snappedFrom);
+    } else {
+      break;
+    }
+  }
+  current = startPanel.snappedTo ? panels.get(startPanel.snappedTo) : void 0;
+  while (current && !visited.has(current.id)) {
+    visited.add(current.id);
+    group.push(current);
+    if (current.snappedTo) {
+      current = panels.get(current.snappedTo);
+    } else {
+      break;
+    }
+  }
+  return group;
+}
+function detachFromGroup(panel, panels) {
+  if (panel.snappedTo) {
+    const rightPanel = panels.get(panel.snappedTo);
+    if (rightPanel) {
+      rightPanel.snappedFrom = null;
+    }
+    panel.snappedTo = null;
+  }
+  if (panel.snappedFrom) {
+    const leftPanel = panels.get(panel.snappedFrom);
+    if (leftPanel) {
+      leftPanel.snappedTo = null;
+    }
+    panel.snappedFrom = null;
+  }
+}
+function findSnapTarget(movingPanels, panels, config) {
+  if (movingPanels.length === 0) return null;
+  const leftmostPanel = movingPanels[0];
+  const leftmostRect = leftmostPanel.element.getBoundingClientRect();
+  let totalWidth = 0;
+  for (const p of movingPanels) {
+    totalWidth += p.element.offsetWidth + config.panelGap;
+  }
+  totalWidth -= config.panelGap;
+  const movingIds = new Set(movingPanels.map((p) => p.id));
+  const x = leftmostRect.left;
+  const y = leftmostRect.top;
+  for (const [id, targetState] of panels) {
+    if (movingIds.has(id)) continue;
+    const targetRect = targetState.element.getBoundingClientRect();
+    const verticalOverlap = Math.abs(y - targetRect.top) < config.snapThreshold * 2;
+    if (!verticalOverlap) continue;
+    const snapToLeftX = targetRect.left - totalWidth - config.panelGap;
+    if (Math.abs(x - snapToLeftX) < config.snapThreshold && !targetState.snappedFrom) {
+      return { targetId: id, side: "left", x: snapToLeftX, y: targetRect.top };
+    }
+    const snapToRightX = targetRect.right + config.panelGap;
+    if (Math.abs(x - snapToRightX) < config.snapThreshold && !targetState.snappedTo) {
+      return { targetId: id, side: "right", x: snapToRightX, y: targetRect.top };
+    }
+  }
+  return null;
+}
+function snapPanelsToTarget(movingPanels, targetId, side, x, y, panels, config) {
+  const targetState = panels.get(targetId);
+  if (!targetState) return;
+  const leftmostPanel = movingPanels[0];
+  const rightmostPanel = movingPanels[movingPanels.length - 1];
+  let currentX = x;
+  for (const p of movingPanels) {
+    p.element.style.left = `${currentX}px`;
+    p.element.style.top = `${y}px`;
+    currentX += p.element.offsetWidth + config.panelGap;
+  }
+  if (side === "left") {
+    rightmostPanel.snappedTo = targetId;
+    targetState.snappedFrom = rightmostPanel.id;
+  } else {
+    leftmostPanel.snappedFrom = targetId;
+    targetState.snappedTo = leftmostPanel.id;
+  }
+}
+function updateSnappedPositions(panels, config) {
+  let rightmost = null;
+  for (const state of panels.values()) {
+    if (state.snappedTo === null && state.snappedFrom !== null) {
+      rightmost = state;
+      break;
+    }
+  }
+  if (!rightmost) {
+    for (const state of panels.values()) {
+      if (state.snappedFrom !== null) {
+        rightmost = state;
+        break;
+      }
+    }
+  }
+  if (!rightmost) return;
+  let current = rightmost;
+  while (current && current.snappedFrom) {
+    const leftPanel = panels.get(current.snappedFrom);
+    if (!leftPanel) break;
+    const currentRect = current.element.getBoundingClientRect();
+    leftPanel.element.style.left = `${currentRect.left - leftPanel.element.offsetWidth - config.panelGap}px`;
+    leftPanel.element.style.top = `${currentRect.top}px`;
+    current = leftPanel;
+  }
+}
+function getLeftmostPanel(panel, panels) {
+  let current = panel;
+  while (current.snappedFrom) {
+    const left = panels.get(current.snappedFrom);
+    if (!left) break;
+    current = left;
+  }
+  return current;
+}
+function getRightmostPanel(panel, panels) {
+  let current = panel;
+  while (current.snappedTo) {
+    const right = panels.get(current.snappedTo);
+    if (!right) break;
+    current = right;
+  }
+  return current;
+}
+function areInSameChain(panel1, panel2, panels) {
+  const chain = getConnectedGroup(panel1, panels);
+  return chain.some((p) => p.id === panel2.id);
+}
+function snapPanels(leftPanel, rightPanel) {
+  leftPanel.snappedTo = rightPanel.id;
+  rightPanel.snappedFrom = leftPanel.id;
+}
+function unsnap(leftPanel, rightPanel) {
+  if (leftPanel.snappedTo === rightPanel.id) {
+    leftPanel.snappedTo = null;
+  }
+  if (rightPanel.snappedFrom === leftPanel.id) {
+    rightPanel.snappedFrom = null;
+  }
+}
+
+// src/DragManager.ts
+var DragManager = class {
+  constructor(panels, config, callbacks) {
+    this.activeDrag = null;
+    this.panels = panels;
+    this.config = config;
+    this.callbacks = callbacks;
+    this.boundMouseMove = this.handleMouseMove.bind(this);
+    this.boundMouseUp = this.handleMouseUp.bind(this);
+    document.addEventListener("mousemove", this.boundMouseMove);
+    document.addEventListener("mouseup", this.boundMouseUp);
+  }
+  /**
+   * Start a drag operation
+   */
+  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;
+    }
+    const rect = panel.element.getBoundingClientRect();
+    this.activeDrag = {
+      grabbedPanel: panel,
+      offsetX: e.clientX - rect.left,
+      offsetY: e.clientY - rect.top,
+      initialGroupPositions,
+      movingPanels,
+      mode
+    };
+    for (const p of movingPanels) {
+      setPanelZIndex(p, getDragZIndex(p));
+    }
+    document.body.style.userSelect = "none";
+    this.callbacks.onDragStart?.(this.activeDrag);
+  }
+  /**
+   * Handle mouse movement during drag
+   */
+  handleMouseMove(e) {
+    if (!this.activeDrag) return;
+    const { grabbedPanel, movingPanels, initialGroupPositions, mode } = this.activeDrag;
+    const panel = grabbedPanel.element;
+    const x = e.clientX - this.activeDrag.offsetX;
+    const y = e.clientY - this.activeDrag.offsetY;
+    const maxX = window.innerWidth - panel.offsetWidth;
+    const maxY = window.innerHeight - panel.offsetHeight;
+    const clampedX = Math.max(0, Math.min(x, maxX));
+    const clampedY = Math.max(0, Math.min(y, maxY));
+    panel.style.left = `${clampedX}px`;
+    panel.style.top = `${clampedY}px`;
+    if (mode === "group" && movingPanels.length > 1) {
+      const grabbedInitialPos = initialGroupPositions.get(grabbedPanel.id);
+      const deltaX = clampedX - grabbedInitialPos.x;
+      const deltaY = clampedY - grabbedInitialPos.y;
+      for (const p of movingPanels) {
+        if (p === grabbedPanel) continue;
+        const initialPos = initialGroupPositions.get(p.id);
+        const newX = Math.max(
+          0,
+          Math.min(initialPos.x + deltaX, window.innerWidth - p.element.offsetWidth)
+        );
+        const newY = Math.max(
+          0,
+          Math.min(initialPos.y + deltaY, window.innerHeight - p.element.offsetHeight)
+        );
+        p.element.style.left = `${newX}px`;
+        p.element.style.top = `${newY}px`;
+      }
+    }
+    const snapTarget = findSnapTarget(movingPanels, this.panels, this.config);
+    const anchorResult = snapTarget ? null : this.callbacks.findAnchorTarget?.(movingPanels) ?? null;
+    this.callbacks.onDragMove?.(
+      this.activeDrag,
+      { x: clampedX, y: clampedY },
+      snapTarget,
+      anchorResult
+    );
+  }
+  /**
+   * Handle mouse up - finalize drag
+   */
+  handleMouseUp(_e) {
+    if (!this.activeDrag) return;
+    const { movingPanels } = this.activeDrag;
+    const snapTarget = findSnapTarget(movingPanels, this.panels, this.config);
+    let anchorResult = null;
+    if (snapTarget) {
+      snapPanelsToTarget(
+        movingPanels,
+        snapTarget.targetId,
+        snapTarget.side,
+        snapTarget.x,
+        snapTarget.y,
+        this.panels,
+        this.config
+      );
+    } else {
+      anchorResult = this.callbacks.findAnchorTarget?.(movingPanels) ?? null;
+      if (anchorResult) {
+        for (let i = 0; i < movingPanels.length; i++) {
+          movingPanels[i].element.style.left = `${anchorResult.positions[i].x}px`;
+          movingPanels[i].element.style.top = `${anchorResult.positions[i].y}px`;
+        }
+      }
+    }
+    for (const p of movingPanels) {
+      setPanelZIndex(p, getDefaultZIndex(p));
+    }
+    document.body.style.userSelect = "";
+    this.callbacks.onDragEnd?.(this.activeDrag, snapTarget, anchorResult);
+    this.activeDrag = null;
+  }
+  /**
+   * Check if a drag is currently in progress
+   */
+  isActive() {
+    return this.activeDrag !== null;
+  }
+  /**
+   * Get the current drag state
+   */
+  getState() {
+    return this.activeDrag;
+  }
+  /**
+   * Clean up event listeners
+   */
+  destroy() {
+    document.removeEventListener("mousemove", this.boundMouseMove);
+    document.removeEventListener("mouseup", this.boundMouseUp);
+  }
+};
+
+// src/AnchorManager.ts
+function getDefaultAnchorConfigs(config) {
+  const { panelMargin, defaultPanelWidth } = config;
+  return [
+    {
+      id: "top-left",
+      getPosition: () => ({ x: panelMargin, y: panelMargin })
+    },
+    {
+      id: "top-right",
+      getPosition: () => ({
+        x: window.innerWidth - panelMargin - defaultPanelWidth,
+        y: panelMargin
+      })
+    },
+    {
+      id: "bottom-left",
+      getPosition: () => ({
+        x: panelMargin,
+        y: window.innerHeight - panelMargin
+      })
+    },
+    {
+      id: "bottom-right",
+      getPosition: () => ({
+        x: window.innerWidth - panelMargin - defaultPanelWidth,
+        y: window.innerHeight - panelMargin
+      })
+    },
+    {
+      id: "top-center",
+      getPosition: () => ({
+        x: (window.innerWidth - defaultPanelWidth) / 2,
+        y: panelMargin
+      })
+    }
+  ];
+}
+function createPresetAnchor(preset, config) {
+  const { panelMargin, defaultPanelWidth } = config;
+  const presets = {
+    "top-left": () => ({ x: panelMargin, y: panelMargin }),
+    "top-right": () => ({
+      x: window.innerWidth - panelMargin - defaultPanelWidth,
+      y: panelMargin
+    }),
+    "top-center": () => ({
+      x: (window.innerWidth - defaultPanelWidth) / 2,
+      y: panelMargin
+    }),
+    "bottom-left": () => ({
+      x: panelMargin,
+      y: window.innerHeight - panelMargin
+    }),
+    "bottom-right": () => ({
+      x: window.innerWidth - panelMargin - defaultPanelWidth,
+      y: window.innerHeight - panelMargin
+    }),
+    "bottom-center": () => ({
+      x: (window.innerWidth - defaultPanelWidth) / 2,
+      y: window.innerHeight - panelMargin
+    }),
+    "center-left": () => ({
+      x: panelMargin,
+      y: window.innerHeight / 2
+    }),
+    "center-right": () => ({
+      x: window.innerWidth - panelMargin - defaultPanelWidth,
+      y: window.innerHeight / 2
+    })
+  };
+  return {
+    id: preset,
+    getPosition: presets[preset]
+  };
+}
+var AnchorManager = class {
+  constructor(config, classes) {
+    this.anchors = [];
+    this.config = config;
+    this.classes = classes;
+    this.container = config.container;
+    window.addEventListener("resize", this.updateIndicatorPositions.bind(this));
+  }
+  /**
+   * Create an anchor indicator element
+   */
+  createIndicator() {
+    const indicator = document.createElement("div");
+    indicator.className = this.classes.anchorIndicator;
+    this.container.appendChild(indicator);
+    return indicator;
+  }
+  /**
+   * Add an anchor point
+   */
+  addAnchor(anchorConfig) {
+    const indicator = anchorConfig.showIndicator !== false ? this.createIndicator() : null;
+    const state = {
+      config: anchorConfig,
+      indicator
+    };
+    this.anchors.push(state);
+    this.updateIndicatorPosition(state);
+    return state;
+  }
+  /**
+   * Add multiple default anchors
+   */
+  addDefaultAnchors() {
+    const defaults = getDefaultAnchorConfigs(this.config);
+    for (const config of defaults) {
+      this.addAnchor(config);
+    }
+  }
+  /**
+   * Add anchor from preset
+   */
+  addPresetAnchor(preset) {
+    return this.addAnchor(createPresetAnchor(preset, this.config));
+  }
+  /**
+   * Remove an anchor
+   */
+  removeAnchor(id) {
+    const index = this.anchors.findIndex((a) => a.config.id === id);
+    if (index === -1) return false;
+    const anchor = this.anchors[index];
+    anchor.indicator?.remove();
+    this.anchors.splice(index, 1);
+    return true;
+  }
+  /**
+   * Update position of a single indicator
+   */
+  updateIndicatorPosition(anchor) {
+    if (!anchor.indicator) return;
+    const pos = anchor.config.getPosition();
+    const indicator = anchor.indicator;
+    indicator.style.left = `${pos.x - 20}px`;
+    if (anchor.config.id.includes("bottom")) {
+      indicator.style.top = `${pos.y - 40}px`;
+    } else {
+      indicator.style.top = `${pos.y}px`;
+    }
+  }
+  /**
+   * Update all indicator positions (call on window resize)
+   */
+  updateIndicatorPositions() {
+    for (const anchor of this.anchors) {
+      this.updateIndicatorPosition(anchor);
+    }
+  }
+  /**
+   * Find the nearest anchor for a group of moving panels
+   */
+  findNearestAnchor(movingPanels) {
+    if (movingPanels.length === 0 || this.anchors.length === 0) return null;
+    let bestResult = null;
+    let bestDist = Infinity;
+    const firstRect = movingPanels[0].element.getBoundingClientRect();
+    const lastRect = movingPanels[movingPanels.length - 1].element.getBoundingClientRect();
+    const groupLeft = firstRect.left;
+    const groupRight = lastRect.right;
+    const groupTop = firstRect.top;
+    const groupBottom = firstRect.bottom;
+    for (const anchor of this.anchors) {
+      const anchorPos = anchor.config.getPosition();
+      const nearGroup = anchorPos.x >= groupLeft - this.config.anchorThreshold && anchorPos.x <= groupRight + this.config.anchorThreshold && anchorPos.y >= groupTop - this.config.anchorThreshold && anchorPos.y <= groupBottom + this.config.anchorThreshold;
+      if (!nearGroup) continue;
+      let closestPanelIdx = 0;
+      let closestDist = Infinity;
+      for (let i = 0; i < movingPanels.length; i++) {
+        const rect = movingPanels[i].element.getBoundingClientRect();
+        const gripX = rect.left;
+        const gripY = rect.top;
+        const dist = Math.sqrt(
+          Math.pow(gripX - anchorPos.x, 2) + Math.pow(gripY - anchorPos.y, 2)
+        );
+        if (dist < closestDist) {
+          closestDist = dist;
+          closestPanelIdx = i;
+        }
+      }
+      const anchorX = anchorPos.x;
+      const anchorY = anchor.config.id.includes("bottom") ? anchorPos.y - movingPanels[closestPanelIdx].element.offsetHeight : anchorPos.y;
+      const positions = [];
+      let leftX = anchorX;
+      for (let i = closestPanelIdx - 1; i >= 0; i--) {
+        leftX -= movingPanels[i].element.offsetWidth + this.config.panelGap;
+      }
+      let currentX = leftX;
+      for (let i = 0; i < movingPanels.length; i++) {
+        positions.push({ x: currentX, y: anchorY });
+        currentX += movingPanels[i].element.offsetWidth + this.config.panelGap;
+      }
+      const leftmostX = positions[0].x;
+      const rightmostX = positions[positions.length - 1].x + movingPanels[movingPanels.length - 1].element.offsetWidth;
+      if (leftmostX < 0 || rightmostX > window.innerWidth) {
+        for (let tryIdx = 0; tryIdx < movingPanels.length; tryIdx++) {
+          const tryPositions = [];
+          let tryLeftX = anchorX;
+          for (let i = tryIdx - 1; i >= 0; i--) {
+            tryLeftX -= movingPanels[i].element.offsetWidth + this.config.panelGap;
+          }
+          let tryCurrentX = tryLeftX;
+          for (let i = 0; i < movingPanels.length; i++) {
+            tryPositions.push({ x: tryCurrentX, y: anchorY });
+            tryCurrentX += movingPanels[i].element.offsetWidth + this.config.panelGap;
+          }
+          const tryLeftmostX = tryPositions[0].x;
+          const tryRightmostX = tryPositions[tryPositions.length - 1].x + movingPanels[movingPanels.length - 1].element.offsetWidth;
+          if (tryLeftmostX >= 0 && tryRightmostX <= window.innerWidth) {
+            if (closestDist < bestDist) {
+              bestDist = closestDist;
+              bestResult = {
+                anchor,
+                dockPanelIndex: tryIdx,
+                positions: tryPositions
+              };
+            }
+            break;
+          }
+        }
+        continue;
+      }
+      if (closestDist < bestDist) {
+        bestDist = closestDist;
+        bestResult = { anchor, dockPanelIndex: closestPanelIdx, positions };
+      }
+    }
+    return bestResult;
+  }
+  /**
+   * Show anchor indicators during drag
+   */
+  showIndicators(activeAnchor) {
+    for (const anchor of this.anchors) {
+      if (!anchor.indicator) continue;
+      if (activeAnchor === anchor) {
+        anchor.indicator.classList.add(
+          this.classes.anchorIndicatorVisible,
+          this.classes.anchorIndicatorActive
+        );
+      } else {
+        anchor.indicator.classList.add(this.classes.anchorIndicatorVisible);
+        anchor.indicator.classList.remove(this.classes.anchorIndicatorActive);
+      }
+    }
+  }
+  /**
+   * Hide all anchor indicators
+   */
+  hideIndicators() {
+    for (const anchor of this.anchors) {
+      if (!anchor.indicator) continue;
+      anchor.indicator.classList.remove(
+        this.classes.anchorIndicatorVisible,
+        this.classes.anchorIndicatorActive
+      );
+    }
+  }
+  /**
+   * Get all anchors
+   */
+  getAnchors() {
+    return [...this.anchors];
+  }
+  /**
+   * Get anchor by ID
+   */
+  getAnchor(id) {
+    return this.anchors.find((a) => a.config.id === id);
+  }
+  /**
+   * Clean up
+   */
+  destroy() {
+    window.removeEventListener("resize", this.updateIndicatorPositions.bind(this));
+    for (const anchor of this.anchors) {
+      anchor.indicator?.remove();
+    }
+    this.anchors = [];
+  }
+};
+
+// src/SnapPreview.ts
+var SnapPreview = class {
+  constructor(container, classes, panels) {
+    this.element = null;
+    this.container = container;
+    this.classes = classes;
+    this.panels = panels;
+  }
+  /**
+   * Create the preview element lazily
+   */
+  ensureElement() {
+    if (!this.element) {
+      this.element = document.createElement("div");
+      this.element.className = this.classes.snapPreview;
+      this.container.appendChild(this.element);
+    }
+    return this.element;
+  }
+  /**
+   * Update the preview to show a snap target
+   */
+  show(snapTarget) {
+    const preview = this.ensureElement();
+    const targetState = this.panels.get(snapTarget.targetId);
+    if (!targetState) {
+      this.hide();
+      return;
+    }
+    const targetRect = targetState.element.getBoundingClientRect();
+    preview.style.top = `${targetRect.top}px`;
+    preview.style.height = `${targetRect.height}px`;
+    preview.style.left = `${snapTarget.side === "left" ? targetRect.left - 2 : targetRect.right - 2}px`;
+    preview.classList.add(this.classes.snapPreviewVisible);
+  }
+  /**
+   * Hide the preview
+   */
+  hide() {
+    if (this.element) {
+      this.element.classList.remove(this.classes.snapPreviewVisible);
+    }
+  }
+  /**
+   * Update based on current snap target (convenience method)
+   */
+  update(snapTarget) {
+    if (snapTarget) {
+      this.show(snapTarget);
+    } else {
+      this.hide();
+    }
+  }
+  /**
+   * Clean up
+   */
+  destroy() {
+    this.element?.remove();
+    this.element = null;
+  }
+};
+
+// src/TabManager.ts
+var DEFAULT_CONFIG = {
+  snapThreshold: 50,
+  panelGap: 0,
+  panelMargin: 16,
+  anchorThreshold: 80,
+  defaultPanelWidth: 300,
+  container: document.body,
+  initializeDefaultAnchors: true,
+  classPrefix: "blork-tabs"
+};
+function generateClasses(prefix) {
+  return {
+    panel: `${prefix}-panel`,
+    panelHeader: `${prefix}-header`,
+    panelTitle: `${prefix}-title`,
+    panelContent: `${prefix}-content`,
+    panelContentCollapsed: `${prefix}-content-collapsed`,
+    detachGrip: `${prefix}-detach-grip`,
+    collapseButton: `${prefix}-collapse-btn`,
+    snapPreview: `${prefix}-snap-preview`,
+    snapPreviewVisible: `${prefix}-snap-preview-visible`,
+    anchorIndicator: `${prefix}-anchor-indicator`,
+    anchorIndicatorVisible: `${prefix}-anchor-indicator-visible`,
+    anchorIndicatorActive: `${prefix}-anchor-indicator-active`,
+    dragging: `${prefix}-dragging`
+  };
+}
+var TabManager = class {
+  constructor(userConfig = {}) {
+    this.panels = /* @__PURE__ */ new Map();
+    this.eventListeners = /* @__PURE__ */ new Map();
+    this.config = {
+      ...DEFAULT_CONFIG,
+      ...userConfig,
+      container: userConfig.container ?? document.body
+    };
+    this.classes = generateClasses(this.config.classPrefix);
+    this.anchorManager = new AnchorManager(this.config, this.classes);
+    this.snapPreview = new SnapPreview(
+      this.config.container,
+      this.classes,
+      this.panels
+    );
+    this.dragManager = new DragManager(
+      this.panels,
+      this.config,
+      {
+        onDragStart: this.handleDragStart.bind(this),
+        onDragMove: this.handleDragMove.bind(this),
+        onDragEnd: this.handleDragEnd.bind(this),
+        findAnchorTarget: (panels) => this.anchorManager.findNearestAnchor(panels)
+      }
+    );
+    if (this.config.initializeDefaultAnchors) {
+      this.anchorManager.addDefaultAnchors();
+    }
+  }
+  // ==================== Panel Management ====================
+  /**
+   * Add a new panel
+   */
+  addPanel(panelConfig) {
+    const state = createPanelState(panelConfig, this.classes);
+    if (!panelConfig.element && !this.config.container.contains(state.element)) {
+      this.config.container.appendChild(state.element);
+    }
+    this.setupPanelEvents(state);
+    this.panels.set(state.id, state);
+    if (panelConfig.initialPosition) {
+      setPanelPosition(state, panelConfig.initialPosition.x, panelConfig.initialPosition.y);
+    }
+    this.emit("panel:added", { panel: state });
+    return state;
+  }
+  /**
+   * Register an existing panel element
+   */
+  registerPanel(id, element, options = {}) {
+    return this.addPanel({
+      id,
+      element,
+      dragHandle: options.dragHandle,
+      collapseButton: options.collapseButton,
+      contentWrapper: options.contentWrapper,
+      detachGrip: options.detachGrip,
+      startCollapsed: options.startCollapsed
+    });
+  }
+  /**
+   * Remove a panel
+   */
+  removePanel(id) {
+    const panel = this.panels.get(id);
+    if (!panel) return false;
+    detachFromGroup(panel, this.panels);
+    if (!panel.config.element) {
+      panel.element.remove();
+    }
+    this.panels.delete(id);
+    this.emit("panel:removed", { panelId: id });
+    return true;
+  }
+  /**
+   * Get a panel by ID
+   */
+  getPanel(id) {
+    return this.panels.get(id);
+  }
+  /**
+   * Get all panels
+   */
+  getAllPanels() {
+    return Array.from(this.panels.values());
+  }
+  /**
+   * Set up event handlers for a panel
+   */
+  setupPanelEvents(state) {
+    if (state.collapseButton) {
+      state.collapseButton.addEventListener("click", () => {
+        const newState = toggleCollapse(state, this.classes);
+        updateSnappedPositions(this.panels, this.config);
+        this.emit("panel:collapse", { panel: state, isCollapsed: newState });
+      });
+    }
+    if (state.detachGrip) {
+      state.detachGrip.addEventListener("mousedown", (e) => {
+        this.dragManager.startDrag(e, state, "single");
+      });
+    }
+    state.dragHandle.addEventListener("mousedown", (e) => {
+      if (e.target === state.collapseButton || e.target === state.detachGrip) {
+        return;
+      }
+      this.dragManager.startDrag(e, state, "group");
+    });
+  }
+  // ==================== Snap Chain Management ====================
+  /**
+   * Get all panels in the same snap chain as the given panel
+   */
+  getSnapChain(panelId) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return [];
+    return getConnectedGroup(panel, this.panels);
+  }
+  /**
+   * Manually snap two panels together
+   */
+  snap(leftPanelId, rightPanelId) {
+    const leftPanel = this.panels.get(leftPanelId);
+    const rightPanel = this.panels.get(rightPanelId);
+    if (!leftPanel || !rightPanel) return false;
+    snapPanels(leftPanel, rightPanel);
+    updateSnappedPositions(this.panels, this.config);
+    return true;
+  }
+  /**
+   * Detach a panel from its snap chain
+   */
+  detach(panelId) {
+    const panel = this.panels.get(panelId);
+    if (!panel) return false;
+    const previousGroup = getConnectedGroup(panel, this.panels);
+    detachFromGroup(panel, this.panels);
+    this.emit("panel:detached", { panel, previousGroup });
+    return true;
+  }
+  /**
+   * Update snapped positions (call after collapse/expand or resize)
+   */
+  updatePositions() {
+    updateSnappedPositions(this.panels, this.config);
+  }
+  // ==================== Anchor Management ====================
+  /**
+   * Add a custom anchor
+   */
+  addAnchor(config) {
+    return this.anchorManager.addAnchor(config);
+  }
+  /**
+   * Add a preset anchor
+   */
+  addPresetAnchor(preset) {
+    return this.anchorManager.addPresetAnchor(preset);
+  }
+  /**
+   * Remove an anchor
+   */
+  removeAnchor(id) {
+    return this.anchorManager.removeAnchor(id);
+  }
+  /**
+   * Get all anchors
+   */
+  getAnchors() {
+    return this.anchorManager.getAnchors();
+  }
+  // ==================== Drag Callbacks ====================
+  handleDragStart(state) {
+    this.anchorManager.showIndicators(null);
+    this.emit("drag:start", {
+      panel: state.grabbedPanel,
+      mode: state.mode,
+      movingPanels: state.movingPanels
+    });
+  }
+  handleDragMove(state, position, snapTarget, anchorResult) {
+    this.snapPreview.update(snapTarget);
+    this.anchorManager.showIndicators(anchorResult?.anchor ?? null);
+    this.emit("drag:move", {
+      panel: state.grabbedPanel,
+      position,
+      snapTarget,
+      anchorTarget: anchorResult
+    });
+  }
+  handleDragEnd(state, snapTarget, anchorResult) {
+    this.snapPreview.hide();
+    this.anchorManager.hideIndicators();
+    const rect = state.grabbedPanel.element.getBoundingClientRect();
+    if (snapTarget) {
+      const targetPanel = this.panels.get(snapTarget.targetId);
+      if (targetPanel) {
+        this.emit("snap:panel", {
+          movingPanels: state.movingPanels,
+          targetPanel,
+          side: snapTarget.side
+        });
+      }
+    } else if (anchorResult) {
+      this.emit("snap:anchor", {
+        movingPanels: state.movingPanels,
+        anchor: anchorResult.anchor
+      });
+    }
+    this.emit("drag:end", {
+      panel: state.grabbedPanel,
+      finalPosition: { x: rect.left, y: rect.top },
+      snappedToPanel: snapTarget !== null,
+      snappedToAnchor: anchorResult !== null
+    });
+  }
+  // ==================== Event System ====================
+  /**
+   * Subscribe to an event
+   */
+  on(event, listener) {
+    if (!this.eventListeners.has(event)) {
+      this.eventListeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.eventListeners.get(event).add(listener);
+    return () => this.off(event, listener);
+  }
+  /**
+   * Unsubscribe from an event
+   */
+  off(event, listener) {
+    this.eventListeners.get(event)?.delete(listener);
+  }
+  /**
+   * Emit an event
+   */
+  emit(event, data) {
+    const listeners = this.eventListeners.get(event);
+    if (listeners) {
+      for (const listener of listeners) {
+        listener(data);
+      }
+    }
+  }
+  // ==================== Positioning ====================
+  /**
+   * Position panels in a row from right edge
+   */
+  positionPanelsFromRight(panelIds, gap = 0) {
+    let rightEdge = window.innerWidth - this.config.panelMargin;
+    for (const id of panelIds) {
+      const state = this.panels.get(id);
+      if (!state) continue;
+      const width = state.element.offsetWidth;
+      setPanelPosition(state, rightEdge - width, this.config.panelMargin);
+      rightEdge -= width + gap;
+    }
+  }
+  /**
+   * Position panels in a row from left edge
+   */
+  positionPanelsFromLeft(panelIds, gap = 0) {
+    let leftEdge = this.config.panelMargin;
+    for (const id of panelIds) {
+      const state = this.panels.get(id);
+      if (!state) continue;
+      setPanelPosition(state, leftEdge, this.config.panelMargin);
+      leftEdge += state.element.offsetWidth + gap;
+    }
+  }
+  /**
+   * Set up initial snap chain for a list of panels (left to right)
+   */
+  createSnapChain(panelIds) {
+    for (let i = 0; i < panelIds.length - 1; i++) {
+      const leftPanel = this.panels.get(panelIds[i]);
+      const rightPanel = this.panels.get(panelIds[i + 1]);
+      if (leftPanel && rightPanel) {
+        snapPanels(leftPanel, rightPanel);
+      }
+    }
+  }
+  // ==================== Configuration ====================
+  /**
+   * Get the current configuration
+   */
+  getConfig() {
+    return { ...this.config };
+  }
+  /**
+   * Get the CSS classes used
+   */
+  getClasses() {
+    return { ...this.classes };
+  }
+  /**
+   * Check if dragging is currently active
+   */
+  isDragging() {
+    return this.dragManager.isActive();
+  }
+  // ==================== Cleanup ====================
+  /**
+   * Destroy the TabManager and clean up resources
+   */
+  destroy() {
+    this.dragManager.destroy();
+    this.anchorManager.destroy();
+    this.snapPreview.destroy();
+    for (const panel of this.panels.values()) {
+      if (!panel.config.element) {
+        panel.element.remove();
+      }
+    }
+    this.panels.clear();
+    this.eventListeners.clear();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AnchorManager,
+  DragManager,
+  SnapPreview,
+  TabManager,
+  areInSameChain,
+  createPanelElement,
+  createPanelState,
+  createPresetAnchor,
+  detachFromGroup,
+  findSnapTarget,
+  getConnectedGroup,
+  getDefaultAnchorConfigs,
+  getDefaultZIndex,
+  getDragZIndex,
+  getLeftmostPanel,
+  getPanelDimensions,
+  getPanelPosition,
+  getRightmostPanel,
+  setPanelPosition,
+  setPanelZIndex,
+  snapPanels,
+  snapPanelsToTarget,
+  toggleCollapse,
+  unsnap,
+  updateSnappedPositions
+});