table-minimap 1.0.7 → 1.1.0

package/dist/table-minimap.js

@@ -1,11 +1,12 @@
-var H = Object.defineProperty;
-var R = (u, t, e) => t in u ? H(u, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : u[t] = e;
-var n = (u, t, e) => R(u, typeof t != "symbol" ? t + "" : t, e);
-const X = {
+var X = Object.defineProperty;
+var z = (v, t, e) => t in v ? X(v, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : v[t] = e;
+var n = (v, t, e) => z(v, typeof t != "symbol" ? t + "" : t, e);
+const H = {
   mode: "columns",
   height: 40,
   position: "bottom",
   fixedWidth: 300,
+  fixedPosition: "bottom-right",
   compact: !1,
   draggable: !0,
   showViewport: !0,
@@ -31,6 +32,8 @@ class F {
     n(this, "isCompactMode");
     /** Whether the compact minimap is currently collapsed */
     n(this, "isCompactCollapsed", !1);
+    /** Whether the compact minimap is currently expanding (transition in progress) */
+    n(this, "isCompactExpanding", !1);
     /** Timeout used to collapse compact mode after pointer leave */
     n(this, "compactCollapseTimer", null);
     /** The scrollable container (parent of table) */
@@ -72,9 +75,7 @@ class F {
     n(this, "panStartX", 0);
     /** Currently hovered column index (-1 = none) */
     n(this, "hoveredColumn", -1);
-    /** Currently focused/clicked column index (-1 = none) */
-    n(this, "focusedColumn", -1);
-    /** Drag start position */
+    /** Drag start X position */
     n(this, "dragStartX", 0);
     /** Drag start scroll position */
     n(this, "dragStartScrollLeft", 0);
@@ -90,7 +91,7 @@ class F {
     n(this, "isDestroyed", !1);
     /** Whether we started a potential pan (waiting to see if it's a click or drag) */
     n(this, "isPotentialPan", !1);
-    this.table = this.resolveTable(t), this.options = { ...X, ...e }, this.isCompactMode = this.options.compact && this.options.position === "fixed", this.boundHandlers = {
+    this.table = this.resolveTable(t), this.options = { ...H, ...e }, this.isCompactMode = this.options.compact && this.options.position === "fixed", this.boundHandlers = {
       onScroll: this.onScroll.bind(this),
       onPointerDown: this.onPointerDown.bind(this),
       onPointerMove: this.onPointerMove.bind(this),
@@ -170,13 +171,13 @@ class F {
     }
     const i = this.table.offsetWidth || 1;
     Array.from(e).forEach((o) => {
-      const r = o.colSpan || 1, s = o.offsetWidth;
-      for (let a = 0; a < r; a++) {
-        const l = s / r;
+      const a = o.colSpan || 1, s = o.offsetWidth;
+      for (let l = 0; l < a; l++) {
+        const r = s / a;
         this.columns.push({
           index: this.columns.length,
-          width: l,
-          widthPercent: l / i * 100
+          width: r,
+          widthPercent: r / i * 100
         });
       }
     }), this.columns.length === 0 && this.columns.push({
@@ -189,15 +190,15 @@ class F {
    * Creates the minimap DOM element
    */
   createMinimapElement() {
-    this.minimapEl = document.createElement("div"), this.minimapEl.className = `tm-minimap tm-minimap--${this.options.position}`, this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.options.position === "fixed" && this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.isCompactMode ? (this.minimapEl.classList.add("tm-minimap--compact", "tm-minimap--compact-collapsed"), this.minimapEl.style.setProperty("--tm-compact-dot-size", `${A}px`), this.isCompactCollapsed = !0, this.applyCompactDimensions(!0), this.minimapEl.setAttribute("aria-expanded", "false")) : this.minimapEl.setAttribute("aria-expanded", "true"), 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();
+    this.minimapEl = document.createElement("div"), this.minimapEl.className = `tm-minimap tm-minimap--${this.options.position}`, this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.options.position === "fixed" && (this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.minimapEl.classList.add(`tm-minimap--${this.options.fixedPosition}`)), this.isCompactMode ? (this.minimapEl.classList.add("tm-minimap--compact", "tm-minimap--compact-collapsed"), this.minimapEl.style.setProperty("--tm-compact-dot-size", `${A}px`), this.isCompactCollapsed = !0, this.applyCompactDimensions(!0), this.minimapEl.setAttribute("aria-expanded", "false")) : this.minimapEl.setAttribute("aria-expanded", "true"), 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 && (this.columnsEl = document.createElement("div"), this.columnsEl.className = "tm-columns", this.columns.forEach(() => {
+      const t = document.createElement("div");
+      t.className = "tm-column", this.columnsEl.appendChild(t);
     }), this.minimapEl.appendChild(this.columnsEl));
   }
   /**
@@ -223,8 +224,8 @@ class F {
         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";
-        const o = this.isCompactMode ? 8 : 12;
-        this.minimapEl.style.bottom = `${o}px`, this.minimapEl.style.right = `${o}px`, this.minimapEl.style.marginTop = "0";
+        const o = this.isCompactMode ? 8 : 12, a = this.options.fixedPosition;
+        this.minimapEl.style.top = "", this.minimapEl.style.bottom = "", this.minimapEl.style.left = "", this.minimapEl.style.right = "", this.minimapEl.style.marginTop = "0", a === "top-left" ? (this.minimapEl.style.top = `${o}px`, this.minimapEl.style.left = `${o}px`) : a === "top-right" ? (this.minimapEl.style.top = `${o}px`, this.minimapEl.style.right = `${o}px`) : a === "bottom-left" ? (this.minimapEl.style.bottom = `${o}px`, this.minimapEl.style.left = `${o}px`) : (this.minimapEl.style.bottom = `${o}px`, this.minimapEl.style.right = `${o}px`);
       }
     } else if (this.options.position === "top")
       t ? t.insertBefore(this.minimapEl, this.scrollContainer) : this.scrollContainer.insertBefore(this.minimapEl, this.scrollContainer.firstChild);
@@ -261,25 +262,25 @@ class F {
    * Canvas metrics for calculations - cached values to avoid repeated computations
    */
   getCanvasMetrics() {
-    var m;
-    const t = ((m = this.minimapEl) == null ? void 0 : m.offsetWidth) ?? 0, e = this.zoomState.level, i = this.columns.length, o = 1 / e, r = i * o, s = r > 0 ? t / r : 0;
-    let a = 0;
+    var p;
+    const t = ((p = this.minimapEl) == null ? void 0 : p.offsetWidth) ?? 0, e = this.zoomState.level, i = this.columns.length, o = 1 / e, a = i * o, s = a > 0 ? t / a : 0;
+    let l = 0;
     if (e > 1 && this.scrollContainer) {
-      const { scrollLeft: p, scrollWidth: E, clientWidth: g } = this.scrollContainer, c = Math.max(E - g, 1);
-      a = p / c * (1 - o);
+      const { scrollLeft: m, scrollWidth: E, clientWidth: g } = this.scrollContainer, u = Math.max(E - g, 1);
+      l = m / u * (1 - o);
     }
-    const l = a * i, d = Math.floor(l), v = Math.min(Math.ceil(l + r) + 1, i), f = -(l - d) * s;
+    const r = l * i, c = Math.floor(r), h = Math.min(Math.ceil(r + a) + 1, i), f = -(r - c) * s;
     return {
       width: t,
       zoom: e,
       numCols: i,
       visibleRatio: o,
-      visibleCols: r,
+      visibleCols: a,
       cellWidth: s,
-      panX: a,
-      startColFloat: l,
-      startCol: d,
-      endCol: v,
+      panX: l,
+      startColFloat: r,
+      startCol: c,
+      endCol: h,
       xOffset: f
     };
   }
@@ -287,23 +288,19 @@ class F {
    * Calculates column index from mouse X position
    */
   getColumnAtX(t) {
-    const { width: e, numCols: i, panX: o, visibleRatio: r } = this.getCanvasMetrics();
+    const { width: e, numCols: i, panX: o, visibleRatio: a } = this.getCanvasMetrics();
     if (i === 0 || e === 0) return -1;
-    const s = t / e, a = o + s * r, l = Math.floor(a * i);
-    return Math.max(0, Math.min(i - 1, l));
+    const s = t / e, l = o + s * 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
+   * Shows the visible portion of the table (columns mode only)
    */
   updateViewport() {
     if (!this.viewportEl || !this.minimapEl) return;
     if (this.options.mode === "canvas") {
-      if (this.focusedColumn >= 0 && this.columns.length > 0) {
-        const { cellWidth: r, startColFloat: s } = this.getCanvasMetrics(), a = (this.focusedColumn - s) * r;
-        this.viewportEl.style.cssText = `width:${r}px;left:${a}px;display:block`;
-      } else
-        this.viewportEl.style.display = "none";
+      this.viewportEl.style.display = "none";
       return;
     }
     const t = this.minimapEl.offsetWidth, e = Math.max(t * this.scrollState.viewportRatio, 20), o = (t - e) * this.scrollState.positionRatio;
@@ -321,11 +318,11 @@ class F {
    * Renders the visible portion of the table directly onto the canvas
    */
   renderTableDirect(t, e) {
-    var M, P, L, D;
+    var S, y, P, D;
     if (!this.canvasCtx) return;
-    const i = this.canvasCtx, { width: o, numCols: r, cellWidth: s, startCol: a, endCol: l, xOffset: d } = t, v = Array.from(this.table.querySelectorAll("tr")), f = v.length;
-    if (f === 0 || r === 0) return;
-    const m = Math.min(e * 0.15, 30), p = (e - m) / f, E = Math.min(p * 0.6, s * 0.15, 14), g = Math.min(m * 0.6, s * 0.15, 14), c = {
+    const i = this.canvasCtx, { width: o, numCols: a, cellWidth: s, startCol: l, endCol: r, xOffset: c } = t, h = Array.from(this.table.querySelectorAll("tr")), f = h.length;
+    if (f === 0 || a === 0) return;
+    const p = Math.min(e * 0.15, 30), m = (e - p) / f, E = Math.min(m * 0.6, s * 0.15, 14), g = Math.min(p * 0.6, s * 0.15, 14), u = {
       bg: "#ffffff",
       headerBg: "#f1f5f9",
       border: "#e2e8f0",
@@ -335,35 +332,35 @@ class F {
       hoverFill: "rgba(59, 130, 246, 0.08)",
       hoverStroke: "rgba(59, 130, 246, 0.3)"
     };
-    i.fillStyle = c.bg, i.fillRect(0, 0, o, e), i.fillStyle = c.headerBg, i.fillRect(0, 0, o, m);
-    const w = this.table.querySelector("thead tr") || v[0], y = w ? Array.from(w.querySelectorAll("th, td")) : [];
+    i.fillStyle = u.bg, i.fillRect(0, 0, o, e), i.fillStyle = u.headerBg, i.fillRect(0, 0, o, p);
+    const x = this.table.querySelector("thead tr") || h[0], L = x ? Array.from(x.querySelectorAll("th, td")) : [];
     i.font = `bold ${g}px system-ui, sans-serif`, i.textBaseline = "middle";
-    for (let h = a; h < l; h++) {
-      const C = d + (h - a) * s;
+    for (let d = l; d < r; d++) {
+      const C = c + (d - l) * s;
       if (C + s < 0 || C > o) continue;
-      i.strokeStyle = c.border, i.lineWidth = 1, i.strokeRect(C, 0, s, m);
-      const b = ((P = (M = y[h]) == null ? void 0 : M.textContent) == null ? void 0 : P.trim()) || `Col ${h + 1}`;
-      i.fillStyle = c.headerText, i.save(), i.beginPath(), i.rect(C + 2, 0, s - 4, m), i.clip(), i.fillText(b, C + 4, m / 2), i.restore();
+      i.strokeStyle = u.border, i.lineWidth = 1, i.strokeRect(C, 0, s, p);
+      const b = ((y = (S = L[d]) == null ? void 0 : S.textContent) == null ? void 0 : y.trim()) || `Col ${d + 1}`;
+      i.fillStyle = u.headerText, i.save(), i.beginPath(), i.rect(C + 2, 0, s - 4, p), i.clip(), i.fillText(b, C + 4, p / 2), i.restore();
     }
     i.font = `${E}px system-ui, sans-serif`;
-    for (let h = 0; h < v.length; h++) {
-      const C = v[h];
+    for (let d = 0; d < h.length; d++) {
+      const C = h[d];
       if (C.closest("thead")) continue;
-      const b = m + h * p;
-      if (b + p < 0 || b > e) continue;
-      h % 2 === 1 && (i.fillStyle = c.altRow, i.fillRect(0, b, o, p));
-      const W = Array.from(C.querySelectorAll("th, td"));
-      for (let S = a; S < l; S++) {
-        const x = d + (S - a) * s;
-        if (x + s < 0 || x > o) continue;
-        i.strokeStyle = c.border, i.lineWidth = 0.5, i.strokeRect(x, b, s, p);
-        const k = (D = (L = W[S]) == null ? void 0 : L.textContent) == null ? void 0 : D.trim();
-        k && (i.fillStyle = c.text, i.save(), i.beginPath(), i.rect(x + 2, b, s - 4, p), i.clip(), i.fillText(k, x + 4, b + p / 2), i.restore());
+      const b = p + d * m;
+      if (b + m < 0 || b > e) continue;
+      d % 2 === 1 && (i.fillStyle = u.altRow, i.fillRect(0, b, o, m));
+      const R = Array.from(C.querySelectorAll("th, td"));
+      for (let M = l; M < r; M++) {
+        const w = c + (M - l) * s;
+        if (w + s < 0 || w > o) continue;
+        i.strokeStyle = u.border, i.lineWidth = 0.5, i.strokeRect(w, b, s, m);
+        const k = (D = (P = R[M]) == null ? void 0 : P.textContent) == null ? void 0 : D.trim();
+        k && (i.fillStyle = u.text, i.save(), i.beginPath(), i.rect(w + 2, b, s - 4, m), i.clip(), i.fillText(k, w + 4, b + m / 2), i.restore());
       }
     }
-    if (this.hoveredColumn >= a && this.hoveredColumn < l) {
-      const h = d + (this.hoveredColumn - a) * s;
-      i.fillStyle = c.hoverFill, i.fillRect(h, 0, s, e), i.strokeStyle = c.hoverStroke, i.lineWidth = 1, i.strokeRect(h, 0, s, e);
+    if (this.hoveredColumn >= l && this.hoveredColumn < r) {
+      const d = c + (this.hoveredColumn - l) * s;
+      i.fillStyle = u.hoverFill, i.fillRect(d, 0, s, e), i.strokeStyle = u.hoverStroke, i.lineWidth = 1, i.strokeRect(d, 0, s, e);
     }
   }
   /**
@@ -393,27 +390,22 @@ class F {
       t.preventDefault(), this.expandCompact();
       return;
     }
-    if (this.isDragging || this.isPanning || this.wasPanning || t.target === this.viewportEl) return;
-    const { scrollWidth: e, clientWidth: i } = this.scrollContainer, o = this.columns.length;
-    if (this.hoveredColumn >= 0 && o > 0) {
-      this.focusedColumn = this.hoveredColumn;
-      const E = e / o, c = (this.hoveredColumn + 0.5) * E - i / 2, w = e - i, y = Math.max(0, Math.min(w, c));
-      this.scrollContainer.scrollTo({
-        left: y,
-        behavior: "smooth"
-      }), this.updateViewport();
+    if (this.isCompactExpanding || this.isDragging || this.isPanning || this.wasPanning) return;
+    const { scrollWidth: e, clientWidth: i } = this.scrollContainer, o = e - i, a = this.minimapEl.getBoundingClientRect(), s = t.clientX - a.left;
+    if (this.options.mode === "canvas") {
+      const c = this.getColumnAtX(s);
+      if (c >= 0) {
+        const h = this.columns.length, f = e / h, m = (c + 0.5) * f - i / 2;
+        this.scrollContainer.scrollTo({
+          left: Math.max(0, Math.min(o, m)),
+          behavior: "smooth"
+        });
+      }
       return;
     }
-    const r = this.minimapEl.getBoundingClientRect(), a = (t.clientX - r.left) / r.width, l = this.zoomState.level;
-    let d;
-    if (l > 1) {
-      const g = this.scrollContainer.scrollLeft / Math.max(e - i, 1), c = 1 / l;
-      d = g * (1 - c) + a * c;
-    } else
-      d = a;
-    const f = d * e - i / 2, m = e - i, p = Math.max(0, Math.min(m, f));
+    const r = s / a.width * o;
     this.scrollContainer.scrollTo({
-      left: p,
+      left: Math.max(0, Math.min(o, r)),
       behavior: "smooth"
     });
   }
@@ -433,17 +425,14 @@ class F {
   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 a = t.clientX - this.panStartX, l = this.minimapEl.offsetWidth, { scrollWidth: d, clientWidth: v } = this.scrollContainer, f = d - v, m = a / l * f * this.zoomState.level, p = this.dragStartScrollLeft + m;
-      this.scrollContainer.scrollLeft = Math.max(0, Math.min(f, p)), this.updateScrollState(), this.updateViewport(), this.render();
+      const c = t.clientX - this.panStartX, h = this.minimapEl.offsetWidth, { scrollWidth: f, clientWidth: p } = this.scrollContainer, m = f - p, E = c / h * m * this.zoomState.level, g = this.dragStartScrollLeft + E;
+      this.scrollContainer.scrollLeft = Math.max(0, Math.min(m, g)), 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, o = this.scrollContainer.scrollWidth - this.scrollContainer.clientWidth, r = e / i * o, s = this.dragStartScrollLeft + r;
-    this.scrollContainer.scrollLeft = Math.max(
-      0,
-      Math.min(o, s)
-    ), this.updateScrollState(), this.updateViewport();
+    const { scrollWidth: e, clientWidth: i } = this.scrollContainer, o = this.minimapEl.offsetWidth, a = e - i, l = (t.clientX - this.dragStartX) / o * a, r = this.dragStartScrollLeft + l;
+    this.scrollContainer.scrollLeft = Math.max(0, Math.min(a, r)), this.updateScrollState(), this.updateViewport();
   }
   /**
    * Handles pointer up to end drag
@@ -471,19 +460,26 @@ class F {
    * @param e - Wheel event
    */
   onWheel(t) {
-    if (!this.options.zoomable || this.options.mode !== "canvas") return;
+    if (!this.options.zoomable || this.options.mode !== "canvas" || !this.canvasEl || !this.scrollContainer || !this.minimapEl) return;
     t.preventDefault();
-    const e = -t.deltaY * this.options.zoomSpeed, i = Math.max(
+    const e = this.zoomState.level, i = -t.deltaY * this.options.zoomSpeed, o = Math.max(
       this.options.minZoom,
-      Math.min(this.options.maxZoom, this.zoomState.level + e)
+      Math.min(this.options.maxZoom, e + i)
     );
+    if (o === e) return;
+    const a = this.canvasEl.getBoundingClientRect(), s = t.clientX - a.left, l = this.minimapEl.offsetWidth, r = s / l, c = 1 / e, { scrollLeft: h, scrollWidth: f, clientWidth: p } = this.scrollContainer, m = Math.max(f - p, 1), E = h / m, u = (e > 1 ? E * (1 - c) : 0) + r * c;
     this.zoomState = {
-      level: i,
+      level: o,
       panX: 0,
-      // Not used anymore - derived from scroll position
-      isMinZoom: i <= this.options.minZoom,
-      isMaxZoom: i >= this.options.maxZoom
-    }, this.render();
+      isMinZoom: o <= this.options.minZoom,
+      isMaxZoom: o >= this.options.maxZoom
+    };
+    const x = 1 / o;
+    if (o > 1) {
+      const S = (u - r * x) / (1 - x), y = Math.max(0, Math.min(m, S * m));
+      this.scrollContainer.scrollLeft = y;
+    }
+    this.updateScrollState(), this.render();
   }
   /**
    * Handles pointer down on canvas for drag start (scrolls table when zoomed)
@@ -511,7 +507,9 @@ class F {
    * Expands the compact minimap and clears any pending collapse.
    */
   expandCompact() {
-    !this.isCompactMode || !this.minimapEl || (this.clearCompactCollapseTimer(), this.applyCompactDimensions(!1), this.render());
+    !this.isCompactMode || !this.minimapEl || this.isCompactExpanding || (this.clearCompactCollapseTimer(), this.isCompactExpanding = !0, this.applyCompactDimensions(!1), setTimeout(() => {
+      this.isCompactExpanding = !1, !this.isDestroyed && !this.isCompactCollapsed && (this.updateScrollState(), this.render());
+    }, 200));
   }
   /**
    * Collapses the compact minimap to the small dot handle.
@@ -597,9 +595,9 @@ class F {
    */
   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.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && this.minimapEl && (this.columnsEl.innerHTML = "", this.columns.forEach(() => {
+        const t = document.createElement("div");
+        t.className = "tm-column", this.columnsEl.appendChild(t);
       })), this.rafId = null;
     }));
   }
@@ -607,9 +605,9 @@ class F {
    * 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);
+    this.isDestroyed || (this.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && (this.columnsEl.innerHTML = "", this.columns.forEach(() => {
+      const t = document.createElement("div");
+      t.className = "tm-column", this.columnsEl.appendChild(t);
     })));
   }
   /**
@@ -637,7 +635,7 @@ class F {
   scrollToColumn(t, e = !0) {
     if (!this.scrollContainer || t < 0 || t >= this.columns.length)
       return;
-    const o = this.columns.slice(0, t).reduce((r, s) => r + s.width, 0);
+    const o = this.columns.slice(0, t).reduce((a, s) => a + s.width, 0);
     this.scrollContainer.scrollTo({
       left: o,
       behavior: e ? "smooth" : "auto"
@@ -647,9 +645,9 @@ class F {
    * 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);
+    this.isDestroyed || (this.scrollContainer = this.findScrollContainer(), this.detectColumns(), this.updateScrollState(), this.render(), this.options.mode === "columns" && this.columnsEl && (this.columnsEl.innerHTML = "", this.columns.forEach(() => {
+      const t = document.createElement("div");
+      t.className = "tm-column", this.columnsEl.appendChild(t);
     })));
   }
   /**
@@ -664,21 +662,26 @@ class F {
    * Sets the zoom level programmatically (canvas mode only)
    *
    * @param level - Zoom level (1 = no zoom)
-   * @param panX - Optional pan position (0-1)
+   * @param panX - Optional pan position (0-1), controls which part of table is visible
    */
   setZoom(t, e) {
-    if (this.isDestroyed || this.options.mode !== "canvas") return;
+    if (this.isDestroyed || this.options.mode !== "canvas" || !this.scrollContainer) return;
     const i = Math.max(
       this.options.minZoom,
       Math.min(this.options.maxZoom, t)
-    ), r = 1 - 1 / i;
-    let s = e !== void 0 ? e : this.zoomState.panX;
-    s = Math.max(0, Math.min(r, s)), this.zoomState = {
+    ), o = 1 / i, a = 1 - o;
+    let s = e !== void 0 ? e : 0;
+    if (s = Math.max(0, Math.min(a, s)), this.zoomState = {
       level: i,
-      panX: i > 1 ? s : 0,
+      panX: 0,
+      // Not used - panX is derived from scroll position
       isMinZoom: i <= this.options.minZoom,
       isMaxZoom: i >= this.options.maxZoom
-    }, this.render();
+    }, i > 1 && s > 0) {
+      const { scrollWidth: l, clientWidth: r } = this.scrollContainer, c = Math.max(l - r, 1), h = s / (1 - o);
+      this.scrollContainer.scrollLeft = Math.max(0, Math.min(c, h * c));
+    } else i <= 1 && (this.scrollContainer.scrollLeft = 0);
+    this.updateScrollState(), this.render();
   }
   /**
    * Resets zoom to default (shows full table overview)
@@ -696,8 +699,8 @@ class F {
     if (this.isDestroyed || this.options.mode !== "canvas") return;
     const i = this.columns.length;
     if (i === 0) return;
-    const o = Math.max(0, Math.min(i - 1, t)), s = Math.max(o + 1, Math.min(i, e)) - o, a = i / s, l = o / i;
-    this.setZoom(a, l);
+    const o = Math.max(0, Math.min(i - 1, t)), s = Math.max(o + 1, Math.min(i, e)) - o, l = i / s, r = o / i;
+    this.setZoom(l, r);
   }
   /**
    * Destroys the minimap instance and cleans up resources
@@ -706,12 +709,12 @@ class F {
     this.isDestroyed || (this.isDestroyed = !0, this.clearCompactCollapseTimer(), 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.minimapEl.removeEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.removeEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.removeEventListener("keydown", this.boundHandlers.onCompactKeyDown)), document.removeEventListener("click", this.boundHandlers.onDocumentClick), 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 = []);
   }
 }
-const I = ':root{--tm-background: #e3f2fd;--tm-border: #90caf9;--tm-viewport-color: rgba(25, 118, 210, .3);--tm-viewport-border: #1976d2;--tm-height: 40px;--tm-column-color: #64b5f6;--tm-column-gap: 1px;--tm-border-radius: 4px;--tm-canvas-empty: #bbdefb;--tm-canvas-filled: #1565c0;--tm-compact-dot-size: 5px;--tm-compact-transition-duration: .18s}@media (prefers-color-scheme: dark){:root{--tm-background: #1a237e;--tm-border: #3949ab;--tm-viewport-color: rgba(100, 180, 255, .3);--tm-viewport-border: #64b5f6;--tm-column-color: #3f51b5;--tm-canvas-empty: #283593;--tm-canvas-filled: #90caf9}}.tm-minimap{position:relative;width:var(--tm-minimap-width, 100%);height:var(--tm-minimap-height, var(--tm-height));background:var(--tm-background);border:1px solid var(--tm-border);border-radius:var(--tm-border-radius);box-sizing:border-box;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:pointer;transition:width var(--tm-compact-transition-duration) ease-in-out,height var(--tm-compact-transition-duration) ease-in-out,opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out,border-color var(--tm-compact-transition-duration) ease-in-out,box-shadow var(--tm-compact-transition-duration) ease-in-out;will-change:width,height,opacity,transform}.tm-minimap--top{margin-bottom:8px}.tm-minimap--bottom{margin-top:8px}.tm-minimap--fixed{z-index:100;box-shadow:0 4px 12px #00000026;border-radius:8px}.tm-minimap--compact-collapsed{border-radius:999px}.tm-minimap--compact-expanded{border-radius:8px}.tm-minimap--compact>*{transition:opacity var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-collapsed{background:color-mix(in srgb,var(--tm-background) 60%,transparent);border-color:color-mix(in srgb,var(--tm-border) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-border) 20%,transparent);opacity:.92;transform:translate(2px,2px)}.tm-minimap--compact-collapsed>*{opacity:0;pointer-events:none}.tm-minimap--compact-collapsed:after{content:"";position:absolute;right:calc((var(--tm-minimap-width, 24px) - var(--tm-compact-dot-size)) / 2);bottom:calc((var(--tm-minimap-height, 24px) - var(--tm-compact-dot-size)) / 2);width:var(--tm-compact-dot-size);height:var(--tm-compact-dot-size);border-radius:999px;background:color-mix(in srgb,var(--tm-viewport-border) 72%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-viewport-border) 24%,transparent);opacity:.78;pointer-events:none;transition:opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-expanded{transform:translate(0)}.tm-minimap--compact-expanded:after{opacity:0;transform:scale(.7)}.tm-columns{display:flex;align-items:stretch;height:100%;gap:var(--tm-column-gap);padding:4px;box-sizing:border-box}.tm-column{flex-shrink:0;height:100%;background:var(--tm-column-color);border-radius:2px;transition:background-color .15s ease;cursor:pointer}.tm-column:hover{background:color-mix(in srgb,var(--tm-column-color) 80%,black)}.tm-canvas{width:100%;height:100%;display:block;cursor:pointer}.tm-viewport{position:absolute;top:0;height:100%;background:var(--tm-viewport-color);border-left:2px solid var(--tm-viewport-border);border-right:2px solid var(--tm-viewport-border);box-sizing:border-box;cursor:grab;transition:background-color .15s ease;z-index:10}.tm-viewport:hover{background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 10%)}.tm-viewport--dragging{cursor:grabbing;background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 20%);transition:none}.tm-viewport--disabled{cursor:default;pointer-events:none}.tm-minimap:focus-visible{outline:2px solid var(--tm-viewport-border);outline-offset:2px}.tm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}';
-let z = !1;
+const I = ':root{--tm-background: #e3f2fd;--tm-border: #90caf9;--tm-viewport-color: rgba(25, 118, 210, .3);--tm-viewport-border: #1976d2;--tm-height: 40px;--tm-column-color: #64b5f6;--tm-column-gap: 1px;--tm-border-radius: 4px;--tm-canvas-empty: #bbdefb;--tm-canvas-filled: #1565c0;--tm-compact-dot-size: 5px;--tm-compact-transition-duration: .18s}@media (prefers-color-scheme: dark){:root{--tm-background: #1a237e;--tm-border: #3949ab;--tm-viewport-color: rgba(100, 180, 255, .3);--tm-viewport-border: #64b5f6;--tm-column-color: #3f51b5;--tm-canvas-empty: #283593;--tm-canvas-filled: #90caf9}}.tm-minimap{position:relative;width:var(--tm-minimap-width, 100%);height:var(--tm-minimap-height, var(--tm-height));background:var(--tm-background);border:1px solid var(--tm-border);border-radius:var(--tm-border-radius);box-sizing:border-box;overflow:hidden;user-select:none;-webkit-user-select:none;cursor:pointer;transition:width var(--tm-compact-transition-duration) ease-in-out,height var(--tm-compact-transition-duration) ease-in-out,opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out,border-color var(--tm-compact-transition-duration) ease-in-out,box-shadow var(--tm-compact-transition-duration) ease-in-out;will-change:width,height,opacity,transform}.tm-minimap--top{margin-bottom:8px}.tm-minimap--bottom{margin-top:8px}.tm-minimap--fixed{z-index:100;box-shadow:0 4px 12px #00000026;border-radius:8px}.tm-minimap--compact-collapsed{border-radius:999px}.tm-minimap--compact-expanded{border-radius:8px}.tm-minimap--compact>*{transition:opacity var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-collapsed{background:color-mix(in srgb,var(--tm-background) 60%,transparent);border-color:color-mix(in srgb,var(--tm-border) 45%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-border) 20%,transparent);opacity:.92;transform:translate(2px,2px)}.tm-minimap--compact-collapsed>*{opacity:0;pointer-events:none}.tm-minimap--compact-collapsed:after{content:"";position:absolute;right:calc((var(--tm-minimap-width, 24px) - var(--tm-compact-dot-size)) / 2);bottom:calc((var(--tm-minimap-height, 24px) - var(--tm-compact-dot-size)) / 2);width:var(--tm-compact-dot-size);height:var(--tm-compact-dot-size);border-radius:999px;background:color-mix(in srgb,var(--tm-viewport-border) 72%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tm-viewport-border) 24%,transparent);opacity:.78;pointer-events:none;transition:opacity var(--tm-compact-transition-duration) ease-in-out,transform var(--tm-compact-transition-duration) ease-in-out,background-color var(--tm-compact-transition-duration) ease-in-out}.tm-minimap--compact-expanded{transform:translate(0)}.tm-minimap--compact-expanded:after{opacity:0;transform:scale(.7)}.tm-columns{display:flex;align-items:stretch;height:100%;gap:var(--tm-column-gap);padding:4px;box-sizing:border-box}.tm-column{flex:1 1 0;min-width:0;height:100%;background:var(--tm-column-color);border-radius:2px;transition:background-color .15s ease;cursor:pointer}.tm-column:hover{background:color-mix(in srgb,var(--tm-column-color) 80%,black)}.tm-canvas{width:100%;height:100%;display:block;cursor:pointer}.tm-viewport{position:absolute;top:0;height:100%;background:var(--tm-viewport-color);border-left:2px solid var(--tm-viewport-border);border-right:2px solid var(--tm-viewport-border);box-sizing:border-box;cursor:grab;transition:background-color .15s ease;z-index:10}.tm-viewport:hover{background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 10%)}.tm-viewport--dragging{cursor:grabbing;background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 20%);transition:none}.tm-viewport--disabled{cursor:default;pointer-events:none}.tm-minimap:focus-visible{outline:2px solid var(--tm-viewport-border);outline-offset:2px}.tm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}';
+let W = !1;
 function Z() {
-  if (z || typeof document > "u") return;
-  const u = document.createElement("style");
-  u.id = "table-minimap-styles", u.textContent = I, document.head.appendChild(u), z = !0;
+  if (W || typeof document > "u") return;
+  const v = document.createElement("style");
+  v.id = "table-minimap-styles", v.textContent = I, document.head.appendChild(v), W = !0;
 }
 Z();
 export {