table-minimap 1.0.0

package/dist/table-minimap.js

@@ -0,0 +1,626 @@
+var D = Object.defineProperty;
+var z = (C, t, e) => t in C ? D(C, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : C[t] = e;
+var o = (C, t, e) => z(C, typeof t != "symbol" ? t + "" : t, e);
+const T = {
+  mode: "columns",
+  height: 40,
+  position: "bottom",
+  fixedWidth: 300,
+  draggable: !0,
+  showViewport: !0,
+  zoomable: !1,
+  minZoom: 1,
+  maxZoom: 10,
+  zoomSpeed: 0.1
+};
+class A {
+  /**
+   * Creates a new TableMinimap instance
+   *
+   * @param selector - CSS selector string or HTMLTableElement
+   * @param options - Configuration options
+   * @throws Error if table element is not found or invalid
+   */
+  constructor(t, e = {}) {
+    /** The target table element */
+    o(this, "table");
+    /** Configuration options */
+    o(this, "options");
+    /** The scrollable container (parent of table) */
+    o(this, "scrollContainer", null);
+    /** Main minimap container element */
+    o(this, "minimapEl", null);
+    /** Columns container for columns mode */
+    o(this, "columnsEl", null);
+    /** Canvas element for canvas mode */
+    o(this, "canvasEl", null);
+    /** Canvas 2D rendering context */
+    o(this, "canvasCtx", null);
+    /** Viewport indicator element */
+    o(this, "viewportEl", null);
+    /** Detected column information */
+    o(this, "columns", []);
+    /** Current scroll state */
+    o(this, "scrollState", {
+      scrollLeft: 0,
+      scrollWidth: 0,
+      clientWidth: 0,
+      viewportRatio: 1,
+      positionRatio: 0
+    });
+    /** Current zoom state */
+    o(this, "zoomState", {
+      level: 1,
+      panX: 0,
+      isMinZoom: !0,
+      isMaxZoom: !1
+    });
+    /** Is the viewport being dragged */
+    o(this, "isDragging", !1);
+    /** Is the canvas being panned (when zoomed) */
+    o(this, "isPanning", !1);
+    /** Was just panning (to prevent click after pan) */
+    o(this, "wasPanning", !1);
+    /** Pan start position */
+    o(this, "panStartX", 0);
+    /** Currently hovered column index (-1 = none) */
+    o(this, "hoveredColumn", -1);
+    /** Currently focused/clicked column index (-1 = none) */
+    o(this, "focusedColumn", -1);
+    /** Drag start position */
+    o(this, "dragStartX", 0);
+    /** Drag start scroll position */
+    o(this, "dragStartScrollLeft", 0);
+    /** ResizeObserver instance */
+    o(this, "resizeObserver", null);
+    /** MutationObserver instance */
+    o(this, "mutationObserver", null);
+    /** Bound event handlers for cleanup */
+    o(this, "boundHandlers");
+    /** Animation frame ID for throttling */
+    o(this, "rafId", null);
+    /** Whether the instance has been destroyed */
+    o(this, "isDestroyed", !1);
+    /** Whether we started a potential pan (waiting to see if it's a click or drag) */
+    o(this, "isPotentialPan", !1);
+    this.table = this.resolveTable(t), this.options = { ...T, ...e }, this.boundHandlers = {
+      onScroll: this.onScroll.bind(this),
+      onPointerDown: this.onPointerDown.bind(this),
+      onPointerMove: this.onPointerMove.bind(this),
+      onPointerUp: this.onPointerUp.bind(this),
+      onMinimapClick: this.onMinimapClick.bind(this),
+      onWheel: this.onWheel.bind(this),
+      onCanvasPointerDown: this.onCanvasPointerDown.bind(this),
+      onCanvasMouseMove: this.onCanvasMouseMove.bind(this),
+      onCanvasMouseLeave: this.onCanvasMouseLeave.bind(this)
+    }, this.init();
+  }
+  /**
+   * Resolves the table element from a selector or element
+   *
+   * @param selector - CSS selector or HTMLTableElement
+   * @returns The resolved table element
+   * @throws Error if element is not found or not a table
+   */
+  resolveTable(t) {
+    let e;
+    if (typeof t == "string") {
+      if (e = document.querySelector(t), !e)
+        throw new Error(
+          `TableMinimap: No element found for selector "${t}"`
+        );
+    } else if (t instanceof HTMLTableElement)
+      e = t;
+    else
+      throw new Error(
+        "TableMinimap: Selector must be a CSS selector string or an HTMLTableElement"
+      );
+    if (e.tagName !== "TABLE")
+      throw new Error(
+        `TableMinimap: Element must be a <table>, got <${e.tagName.toLowerCase()}>`
+      );
+    return e;
+  }
+  /**
+   * Initializes the minimap
+   */
+  init() {
+    this.scrollContainer = this.findScrollContainer(), this.detectColumns(), this.createMinimapElement(), this.updateScrollState(), this.render(), this.attachEventListeners(), this.setupObservers();
+  }
+  /**
+   * Finds the nearest scrollable parent container
+   *
+   * @returns The scrollable container or the table's parent
+   */
+  findScrollContainer() {
+    let t = this.table.parentElement;
+    for (; t; ) {
+      const e = getComputedStyle(t), i = e.overflowX, s = e.overflow;
+      if (i === "auto" || i === "scroll" || s === "auto" || s === "scroll" || t.scrollWidth > t.clientWidth)
+        return t;
+      t = t.parentElement;
+    }
+    return this.table.parentElement || document.body;
+  }
+  /**
+   * Detects table columns from thead or first row
+   */
+  detectColumns() {
+    this.columns = [];
+    const t = this.table.querySelectorAll(
+      "thead th, thead td"
+    );
+    let e;
+    if (t.length > 0)
+      e = t;
+    else {
+      const s = this.table.querySelector("tr");
+      s ? e = s.querySelectorAll("th, td") : e = [];
+    }
+    const i = this.table.offsetWidth || 1;
+    Array.from(e).forEach((s) => {
+      const a = s.colSpan || 1, n = s.offsetWidth;
+      for (let l = 0; l < a; l++) {
+        const r = n / a;
+        this.columns.push({
+          index: this.columns.length,
+          width: r,
+          widthPercent: r / i * 100
+        });
+      }
+    }), this.columns.length === 0 && this.columns.push({
+      index: 0,
+      width: i,
+      widthPercent: 100
+    });
+  }
+  /**
+   * Creates the minimap DOM element
+   */
+  createMinimapElement() {
+    this.minimapEl = document.createElement("div"), this.minimapEl.className = `tm-minimap tm-minimap--${this.options.position}`, this.minimapEl.style.height = `${this.options.height}px`, this.options.position === "fixed" && (this.minimapEl.style.width = `${this.options.fixedWidth}px`), this.minimapEl.setAttribute("role", "slider"), this.minimapEl.setAttribute("aria-label", "Table minimap navigation"), this.minimapEl.setAttribute("aria-valuemin", "0"), this.minimapEl.setAttribute("aria-valuemax", "100"), this.minimapEl.setAttribute("tabindex", "0"), this.options.mode === "canvas" ? this.createCanvasContent() : this.createColumnsContent(), this.options.showViewport && this.createViewportIndicator(), this.insertMinimap();
+  }
+  /**
+   * Creates columns-mode content
+   */
+  createColumnsContent() {
+    this.minimapEl && (this.columnsEl = document.createElement("div"), this.columnsEl.className = "tm-columns", this.columns.forEach((t) => {
+      const e = document.createElement("div");
+      e.className = "tm-column", e.style.width = `${t.widthPercent}%`, this.columnsEl.appendChild(e);
+    }), this.minimapEl.appendChild(this.columnsEl));
+  }
+  /**
+   * Creates canvas-mode content
+   */
+  createCanvasContent() {
+    this.minimapEl && (this.canvasEl = document.createElement("canvas"), this.canvasEl.className = "tm-canvas", this.canvasCtx = this.canvasEl.getContext("2d"), this.minimapEl.appendChild(this.canvasEl));
+  }
+  /**
+   * Creates the viewport indicator element
+   */
+  createViewportIndicator() {
+    this.minimapEl && (this.viewportEl = document.createElement("div"), this.viewportEl.className = "tm-viewport", this.options.draggable || this.viewportEl.classList.add("tm-viewport--disabled"), this.minimapEl.appendChild(this.viewportEl));
+  }
+  /**
+   * Inserts the minimap into the DOM
+   */
+  insertMinimap() {
+    if (!this.minimapEl || !this.scrollContainer) return;
+    const t = this.scrollContainer.parentElement;
+    if (this.options.position === "fixed") {
+      if (t) {
+        getComputedStyle(t).position === "static" && (t.style.position = "relative");
+        const i = this.scrollContainer.nextSibling;
+        i ? t.insertBefore(this.minimapEl, i) : t.appendChild(this.minimapEl), this.minimapEl.style.position = "absolute", this.minimapEl.style.bottom = "12px", this.minimapEl.style.right = "12px", this.minimapEl.style.marginTop = "0";
+      }
+    } else if (this.options.position === "top")
+      t ? t.insertBefore(this.minimapEl, this.scrollContainer) : this.scrollContainer.insertBefore(this.minimapEl, this.scrollContainer.firstChild);
+    else if (t) {
+      const e = this.scrollContainer.nextSibling;
+      e ? t.insertBefore(this.minimapEl, e) : t.appendChild(this.minimapEl);
+    } else
+      this.scrollContainer.appendChild(this.minimapEl);
+  }
+  /**
+   * Updates the scroll state from the container
+   */
+  updateScrollState() {
+    if (!this.scrollContainer) return;
+    const { scrollLeft: t, scrollWidth: e, clientWidth: i } = this.scrollContainer;
+    this.scrollState = {
+      scrollLeft: t,
+      scrollWidth: e,
+      clientWidth: i,
+      viewportRatio: i / Math.max(e, 1),
+      positionRatio: t / Math.max(e - i, 1)
+    }, this.scrollState.viewportRatio = Math.min(1, Math.max(0, this.scrollState.viewportRatio)), this.scrollState.positionRatio = Math.min(1, Math.max(0, this.scrollState.positionRatio)), this.minimapEl && this.minimapEl.setAttribute(
+      "aria-valuenow",
+      String(Math.round(this.scrollState.positionRatio * 100))
+    );
+  }
+  /**
+   * Renders the minimap
+   */
+  render() {
+    this.isDestroyed || (this.updateViewport(), this.options.mode === "canvas" && this.renderCanvas());
+  }
+  /**
+   * Canvas metrics for calculations - cached values to avoid repeated computations
+   */
+  getCanvasMetrics() {
+    var c;
+    const t = ((c = this.minimapEl) == null ? void 0 : c.offsetWidth) ?? 0, e = this.zoomState.level, i = this.columns.length, s = 1 / e, a = i * s, n = a > 0 ? t / a : 0;
+    let l = 0;
+    if (e > 1 && this.scrollContainer) {
+      const { scrollLeft: d, scrollWidth: b, clientWidth: w } = this.scrollContainer, h = Math.max(b - w, 1);
+      l = d / h * (1 - s);
+    }
+    const r = l * i, u = Math.floor(r), p = Math.min(Math.ceil(r + a) + 1, i), v = -(r - u) * n;
+    return {
+      width: t,
+      zoom: e,
+      numCols: i,
+      visibleRatio: s,
+      visibleCols: a,
+      cellWidth: n,
+      panX: l,
+      startColFloat: r,
+      startCol: u,
+      endCol: p,
+      xOffset: v
+    };
+  }
+  /**
+   * Calculates column index from mouse X position
+   */
+  getColumnAtX(t) {
+    const { width: e, numCols: i, panX: s, visibleRatio: a } = this.getCanvasMetrics();
+    if (i === 0 || e === 0) return -1;
+    const n = t / e, l = s + n * a, r = Math.floor(l * i);
+    return Math.max(0, Math.min(i - 1, r));
+  }
+  /**
+   * Updates the viewport indicator position and size
+   * In canvas mode, the viewport shows the focused (clicked) column
+   */
+  updateViewport() {
+    if (!this.viewportEl || !this.minimapEl) return;
+    if (this.options.mode === "canvas") {
+      if (this.focusedColumn >= 0 && this.columns.length > 0) {
+        const { cellWidth: a, startColFloat: n } = this.getCanvasMetrics(), l = (this.focusedColumn - n) * a;
+        this.viewportEl.style.cssText = `width:${a}px;left:${l}px;display:block`;
+      } else
+        this.viewportEl.style.display = "none";
+      return;
+    }
+    const t = this.minimapEl.offsetWidth, e = Math.max(t * this.scrollState.viewportRatio, 20), s = (t - e) * this.scrollState.positionRatio;
+    this.viewportEl.style.cssText = `width:${e}px;left:${s}px;display:block`;
+  }
+  /**
+   * Renders the canvas-mode visualization with table preview
+   */
+  renderCanvas() {
+    if (!this.canvasEl || !this.canvasCtx || !this.minimapEl) return;
+    const t = this.getCanvasMetrics(), e = this.options.height, i = window.devicePixelRatio || 1;
+    this.canvasEl.width = t.width * i, this.canvasEl.height = e * i, this.canvasEl.style.width = `${t.width}px`, this.canvasEl.style.height = `${e}px`, this.canvasCtx.scale(i, i), this.renderTableDirect(t, e);
+  }
+  /**
+   * Renders the visible portion of the table directly onto the canvas
+   */
+  renderTableDirect(t, e) {
+    var P, y, L, W;
+    if (!this.canvasCtx) return;
+    const i = this.canvasCtx, { width: s, numCols: a, cellWidth: n, startCol: l, endCol: r, xOffset: u } = t, p = Array.from(this.table.querySelectorAll("tr")), v = p.length;
+    if (v === 0 || a === 0) return;
+    const c = Math.min(e * 0.15, 30), d = (e - c) / v, b = Math.min(d * 0.6, n * 0.15, 14), w = Math.min(c * 0.6, n * 0.15, 14), h = {
+      bg: "#ffffff",
+      headerBg: "#f1f5f9",
+      border: "#e2e8f0",
+      text: "#334155",
+      headerText: "#1e293b",
+      altRow: "#f8fafc",
+      hoverFill: "rgba(59, 130, 246, 0.08)",
+      hoverStroke: "rgba(59, 130, 246, 0.3)"
+    };
+    i.fillStyle = h.bg, i.fillRect(0, 0, s, e), i.fillStyle = h.headerBg, i.fillRect(0, 0, s, c);
+    const g = this.table.querySelector("thead tr") || p[0], x = g ? Array.from(g.querySelectorAll("th, td")) : [];
+    i.font = `bold ${w}px system-ui, sans-serif`, i.textBaseline = "middle";
+    for (let m = l; m < r; m++) {
+      const f = u + (m - l) * n;
+      if (f + n < 0 || f > s) continue;
+      i.strokeStyle = h.border, i.lineWidth = 1, i.strokeRect(f, 0, n, c);
+      const E = ((y = (P = x[m]) == null ? void 0 : P.textContent) == null ? void 0 : y.trim()) || `Col ${m + 1}`;
+      i.fillStyle = h.headerText, i.save(), i.beginPath(), i.rect(f + 2, 0, n - 4, c), i.clip(), i.fillText(E, f + 4, c / 2), i.restore();
+    }
+    i.font = `${b}px system-ui, sans-serif`;
+    for (let m = 0; m < p.length; m++) {
+      const f = p[m];
+      if (f.closest("thead")) continue;
+      const E = c + m * d;
+      if (E + d < 0 || E > e) continue;
+      m % 2 === 1 && (i.fillStyle = h.altRow, i.fillRect(0, E, s, d));
+      const X = Array.from(f.querySelectorAll("th, td"));
+      for (let M = l; M < r; M++) {
+        const S = u + (M - l) * n;
+        if (S + n < 0 || S > s) continue;
+        i.strokeStyle = h.border, i.lineWidth = 0.5, i.strokeRect(S, E, n, d);
+        const R = (W = (L = X[M]) == null ? void 0 : L.textContent) == null ? void 0 : W.trim();
+        R && (i.fillStyle = h.text, i.save(), i.beginPath(), i.rect(S + 2, E, n - 4, d), i.clip(), i.fillText(R, S + 4, E + d / 2), i.restore());
+      }
+    }
+    if (this.hoveredColumn >= l && this.hoveredColumn < r) {
+      const m = u + (this.hoveredColumn - l) * n;
+      i.fillStyle = h.hoverFill, i.fillRect(m, 0, n, e), i.strokeStyle = h.hoverStroke, i.lineWidth = 1, i.strokeRect(m, 0, n, e);
+    }
+  }
+  /**
+   * Attaches event listeners
+   */
+  attachEventListeners() {
+    !this.scrollContainer || !this.minimapEl || (this.scrollContainer.addEventListener("scroll", this.boundHandlers.onScroll, {
+      passive: !0
+    }), this.minimapEl.addEventListener("click", this.boundHandlers.onMinimapClick), this.options.draggable && this.viewportEl && this.viewportEl.addEventListener("pointerdown", this.boundHandlers.onPointerDown), this.options.zoomable && this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 }), this.canvasEl.addEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", this.viewportEl && this.viewportEl.addEventListener("wheel", this.boundHandlers.onWheel, { passive: !1 })), this.options.mode === "canvas" && this.canvasEl && (this.canvasEl.addEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.addEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.addEventListener("pointermove", this.boundHandlers.onPointerMove), document.addEventListener("pointerup", this.boundHandlers.onPointerUp));
+  }
+  /**
+   * Handles scroll events on the container
+   */
+  onScroll() {
+    this.isDragging || this.rafId === null && (this.rafId = requestAnimationFrame(() => {
+      this.updateScrollState(), this.updateViewport(), this.options.mode === "canvas" && this.render(), this.rafId = null;
+    }));
+  }
+  /**
+   * Handles click on the minimap to jump to position
+   *
+   * @param e - Mouse event
+   */
+  onMinimapClick(t) {
+    if (!this.minimapEl || !this.scrollContainer || this.isDragging || this.isPanning || this.wasPanning || t.target === this.viewportEl) return;
+    const { scrollWidth: e, clientWidth: i } = this.scrollContainer, s = this.columns.length;
+    if (this.hoveredColumn >= 0 && s > 0) {
+      this.focusedColumn = this.hoveredColumn;
+      const b = e / s, h = (this.hoveredColumn + 0.5) * b - i / 2, g = e - i, x = Math.max(0, Math.min(g, h));
+      this.scrollContainer.scrollTo({
+        left: x,
+        behavior: "smooth"
+      }), this.updateViewport();
+      return;
+    }
+    const a = this.minimapEl.getBoundingClientRect(), l = (t.clientX - a.left) / a.width, r = this.zoomState.level;
+    let u;
+    if (r > 1) {
+      const w = this.scrollContainer.scrollLeft / Math.max(e - i, 1), h = 1 / r;
+      u = w * (1 - h) + l * h;
+    } else
+      u = l;
+    const v = u * e - i / 2, c = e - i, d = Math.max(0, Math.min(c, v));
+    this.scrollContainer.scrollTo({
+      left: d,
+      behavior: "smooth"
+    });
+  }
+  /**
+   * Handles pointer down on viewport for drag start
+   *
+   * @param e - Pointer event
+   */
+  onPointerDown(t) {
+    !this.viewportEl || !this.scrollContainer || (t.preventDefault(), t.stopPropagation(), this.isDragging = !0, this.dragStartX = t.clientX, this.dragStartScrollLeft = this.scrollContainer.scrollLeft, this.viewportEl.classList.add("tm-viewport--dragging"), this.viewportEl.setPointerCapture(t.pointerId));
+  }
+  /**
+   * Handles pointer move during drag
+   *
+   * @param e - Pointer event
+   */
+  onPointerMove(t) {
+    if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.zoomState.level > 1 && Math.abs(t.clientX - this.panStartX) > 3 && (this.isPanning = !0, this.canvasEl.style.cursor = "grabbing"), this.isPanning && this.canvasEl && this.minimapEl && this.scrollContainer) {
+      t.preventDefault();
+      const l = t.clientX - this.panStartX, r = this.minimapEl.offsetWidth, { scrollWidth: u, clientWidth: p } = this.scrollContainer, v = u - p, c = l / r * v * this.zoomState.level, d = this.dragStartScrollLeft + c;
+      this.scrollContainer.scrollLeft = Math.max(0, Math.min(v, d)), this.updateScrollState(), this.updateViewport(), this.render();
+      return;
+    }
+    if (!this.isDragging || !this.minimapEl || !this.scrollContainer) return;
+    t.preventDefault();
+    const e = t.clientX - this.dragStartX, i = this.minimapEl.offsetWidth, s = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth, a = e / i * s, n = this.dragStartScrollLeft + a;
+    this.scrollContainer.scrollLeft = Math.max(
+      0,
+      Math.min(s, n)
+    ), this.updateScrollState(), this.updateViewport();
+  }
+  /**
+   * Handles pointer up to end drag
+   *
+   * @param e - Pointer event
+   */
+  onPointerUp(t) {
+    if (this.isPotentialPan && !this.isPanning && this.canvasEl && this.minimapEl) {
+      this.isPotentialPan = !1, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId);
+      const e = new MouseEvent("click", {
+        clientX: t.clientX,
+        clientY: t.clientY,
+        bubbles: !0
+      });
+      this.minimapEl.dispatchEvent(e);
+      return;
+    }
+    this.isPotentialPan = !1, this.isPanning && this.canvasEl && (this.isPanning = !1, this.wasPanning = !0, this.canvasEl.hasPointerCapture(t.pointerId) && this.canvasEl.releasePointerCapture(t.pointerId), this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "pointer", setTimeout(() => {
+      this.wasPanning = !1;
+    }, 100)), this.isDragging && (this.isDragging = !1, this.viewportEl && (this.viewportEl.classList.remove("tm-viewport--dragging"), this.viewportEl.releasePointerCapture(t.pointerId)));
+  }
+  /**
+   * Handles wheel events for zoom
+   *
+   * @param e - Wheel event
+   */
+  onWheel(t) {
+    if (!this.options.zoomable || this.options.mode !== "canvas") return;
+    t.preventDefault();
+    const e = -t.deltaY * this.options.zoomSpeed, i = Math.max(
+      this.options.minZoom,
+      Math.min(this.options.maxZoom, this.zoomState.level + e)
+    );
+    this.zoomState = {
+      level: i,
+      panX: 0,
+      // Not used anymore - derived from scroll position
+      isMinZoom: i <= this.options.minZoom,
+      isMaxZoom: i >= this.options.maxZoom
+    }, this.render();
+  }
+  /**
+   * Handles pointer down on canvas for drag start (scrolls table when zoomed)
+   *
+   * @param e - Pointer event
+   */
+  onCanvasPointerDown(t) {
+    !this.canvasEl || !this.scrollContainer || (this.isPotentialPan = !0, this.panStartX = t.clientX, this.dragStartScrollLeft = this.scrollContainer.scrollLeft, this.zoomState.level > 1 && (t.preventDefault(), this.canvasEl.setPointerCapture(t.pointerId)));
+  }
+  /**
+   * Handles mouse move on canvas for column hover highlighting
+   */
+  onCanvasMouseMove(t) {
+    if (!this.canvasEl || this.isPanning) return;
+    const e = this.canvasEl.getBoundingClientRect(), i = this.getColumnAtX(t.clientX - e.left);
+    i !== this.hoveredColumn && (this.hoveredColumn = i, this.canvasEl.style.cursor = i >= 0 ? "pointer" : this.zoomState.level > 1 ? "grab" : "default", this.render());
+  }
+  /**
+   * Handles mouse leave on canvas to clear hover state
+   */
+  onCanvasMouseLeave() {
+    this.hoveredColumn !== -1 && (this.hoveredColumn = -1, this.canvasEl && (this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "default"), this.render());
+  }
+  /**
+   * Sets up ResizeObserver and MutationObserver
+   */
+  setupObservers() {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.onResize();
+    }), this.scrollContainer && this.resizeObserver.observe(this.scrollContainer), this.resizeObserver.observe(this.table), this.mutationObserver = new MutationObserver((t) => {
+      t.some(
+        (i) => i.type === "childList" || i.attributeName === "colspan"
+      ) && this.onTableMutation();
+    }), this.mutationObserver.observe(this.table, {
+      childList: !0,
+      subtree: !0,
+      attributes: !0,
+      attributeFilter: ["colspan"]
+    });
+  }
+  /**
+   * Handles resize events
+   */
+  onResize() {
+    this.isDestroyed || (this.rafId !== null && cancelAnimationFrame(this.rafId), this.rafId = requestAnimationFrame(() => {
+      this.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && this.minimapEl && (this.columnsEl.innerHTML = "", this.columns.forEach((t) => {
+        const e = document.createElement("div");
+        e.className = "tm-column", e.style.width = `${t.widthPercent}%`, this.columnsEl.appendChild(e);
+      })), this.rafId = null;
+    }));
+  }
+  /**
+   * Handles table mutation events
+   */
+  onTableMutation() {
+    this.isDestroyed || (this.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && (this.columnsEl.innerHTML = "", this.columns.forEach((t) => {
+      const e = document.createElement("div");
+      e.className = "tm-column", e.style.width = `${t.widthPercent}%`, this.columnsEl.appendChild(e);
+    })));
+  }
+  /**
+   * Gets the current scroll state
+   *
+   * @returns Current scroll state
+   */
+  getScrollState() {
+    return { ...this.scrollState };
+  }
+  /**
+   * Gets the detected columns
+   *
+   * @returns Array of column information
+   */
+  getColumns() {
+    return [...this.columns];
+  }
+  /**
+   * Scrolls to a specific column
+   *
+   * @param columnIndex - Zero-based column index
+   * @param smooth - Use smooth scrolling
+   */
+  scrollToColumn(t, e = !0) {
+    if (!this.scrollContainer || t < 0 || t >= this.columns.length)
+      return;
+    const s = this.columns.slice(0, t).reduce((a, n) => a + n.width, 0);
+    this.scrollContainer.scrollTo({
+      left: s,
+      behavior: e ? "smooth" : "auto"
+    });
+  }
+  /**
+   * Forces a refresh of the minimap
+   */
+  refresh() {
+    this.isDestroyed || (this.scrollContainer = this.findScrollContainer(), this.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && (this.columnsEl.innerHTML = "", this.columns.forEach((t) => {
+      const e = document.createElement("div");
+      e.className = "tm-column", e.style.width = `${t.widthPercent}%`, this.columnsEl.appendChild(e);
+    })));
+  }
+  /**
+   * Gets the current zoom state (canvas mode only)
+   *
+   * @returns Current zoom state
+   */
+  getZoomState() {
+    return { ...this.zoomState };
+  }
+  /**
+   * Sets the zoom level programmatically (canvas mode only)
+   *
+   * @param level - Zoom level (1 = no zoom)
+   * @param panX - Optional pan position (0-1)
+   */
+  setZoom(t, e) {
+    if (this.isDestroyed || this.options.mode !== "canvas") return;
+    const i = Math.max(
+      this.options.minZoom,
+      Math.min(this.options.maxZoom, t)
+    ), a = 1 - 1 / i;
+    let n = e !== void 0 ? e : this.zoomState.panX;
+    n = Math.max(0, Math.min(a, n)), this.zoomState = {
+      level: i,
+      panX: i > 1 ? n : 0,
+      isMinZoom: i <= this.options.minZoom,
+      isMaxZoom: i >= this.options.maxZoom
+    }, this.render();
+  }
+  /**
+   * Resets zoom to default (shows full table overview)
+   */
+  resetZoom() {
+    this.setZoom(1, 0);
+  }
+  /**
+   * Zooms to a specific column range (canvas mode only)
+   *
+   * @param startCol - Start column index
+   * @param endCol - End column index
+   */
+  zoomToColumns(t, e) {
+    if (this.isDestroyed || this.options.mode !== "canvas") return;
+    const i = this.columns.length;
+    if (i === 0) return;
+    const s = Math.max(0, Math.min(i - 1, t)), n = Math.max(s + 1, Math.min(i, e)) - s, l = i / n, r = s / i;
+    this.setZoom(l, r);
+  }
+  /**
+   * Destroys the minimap instance and cleans up resources
+   */
+  destroy() {
+    this.isDestroyed || (this.isDestroyed = !0, this.rafId !== null && (cancelAnimationFrame(this.rafId), this.rafId = null), this.scrollContainer && this.scrollContainer.removeEventListener("scroll", this.boundHandlers.onScroll), this.minimapEl && this.minimapEl.removeEventListener("click", this.boundHandlers.onMinimapClick), this.viewportEl && (this.viewportEl.removeEventListener("pointerdown", this.boundHandlers.onPointerDown), this.viewportEl.removeEventListener("wheel", this.boundHandlers.onWheel)), this.canvasEl && (this.canvasEl.removeEventListener("wheel", this.boundHandlers.onWheel), this.canvasEl.removeEventListener("pointerdown", this.boundHandlers.onCanvasPointerDown), this.canvasEl.removeEventListener("mousemove", this.boundHandlers.onCanvasMouseMove), this.canvasEl.removeEventListener("mouseleave", this.boundHandlers.onCanvasMouseLeave)), document.removeEventListener("pointermove", this.boundHandlers.onPointerMove), document.removeEventListener("pointerup", this.boundHandlers.onPointerUp), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.mutationObserver && (this.mutationObserver.disconnect(), this.mutationObserver = null), this.minimapEl && this.minimapEl.parentNode && this.minimapEl.parentNode.removeChild(this.minimapEl), this.minimapEl = null, this.columnsEl = null, this.canvasEl = null, this.canvasCtx = null, this.viewportEl = null, this.scrollContainer = null, this.columns = []);
+  }
+}
+export {
+  A as TableMinimap
+};
+//# sourceMappingURL=table-minimap.js.map