table-minimap 1.0.0 → 1.1.0

package/dist/table-minimap.js

@@ -1,19 +1,21 @@
-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 = {
+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,
   zoomable: !1,
   minZoom: 1,
   maxZoom: 10,
   zoomSpeed: 0.1
-};
-class A {
+}, T = 24, A = 5, O = 180;
+class F {
   /**
    * Creates a new TableMinimap instance
    *
@@ -23,25 +25,33 @@ class A {
    */
   constructor(t, e = {}) {
     /** The target table element */
-    o(this, "table");
+    n(this, "table");
     /** Configuration options */
-    o(this, "options");
+    n(this, "options");
+    /** Whether compact fixed-overlay behavior is enabled */
+    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) */
-    o(this, "scrollContainer", null);
+    n(this, "scrollContainer", null);
     /** Main minimap container element */
-    o(this, "minimapEl", null);
+    n(this, "minimapEl", null);
     /** Columns container for columns mode */
-    o(this, "columnsEl", null);
+    n(this, "columnsEl", null);
     /** Canvas element for canvas mode */
-    o(this, "canvasEl", null);
+    n(this, "canvasEl", null);
     /** Canvas 2D rendering context */
-    o(this, "canvasCtx", null);
+    n(this, "canvasCtx", null);
     /** Viewport indicator element */
-    o(this, "viewportEl", null);
+    n(this, "viewportEl", null);
     /** Detected column information */
-    o(this, "columns", []);
+    n(this, "columns", []);
     /** Current scroll state */
-    o(this, "scrollState", {
+    n(this, "scrollState", {
       scrollLeft: 0,
       scrollWidth: 0,
       clientWidth: 0,
@@ -49,41 +59,39 @@ class A {
       positionRatio: 0
     });
     /** Current zoom state */
-    o(this, "zoomState", {
+    n(this, "zoomState", {
       level: 1,
       panX: 0,
       isMinZoom: !0,
       isMaxZoom: !1
     });
     /** Is the viewport being dragged */
-    o(this, "isDragging", !1);
+    n(this, "isDragging", !1);
     /** Is the canvas being panned (when zoomed) */
-    o(this, "isPanning", !1);
+    n(this, "isPanning", !1);
     /** Was just panning (to prevent click after pan) */
-    o(this, "wasPanning", !1);
+    n(this, "wasPanning", !1);
     /** Pan start position */
-    o(this, "panStartX", 0);
+    n(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);
+    n(this, "hoveredColumn", -1);
+    /** Drag start X position */
+    n(this, "dragStartX", 0);
     /** Drag start scroll position */
-    o(this, "dragStartScrollLeft", 0);
+    n(this, "dragStartScrollLeft", 0);
     /** ResizeObserver instance */
-    o(this, "resizeObserver", null);
+    n(this, "resizeObserver", null);
     /** MutationObserver instance */
-    o(this, "mutationObserver", null);
+    n(this, "mutationObserver", null);
     /** Bound event handlers for cleanup */
-    o(this, "boundHandlers");
+    n(this, "boundHandlers");
     /** Animation frame ID for throttling */
-    o(this, "rafId", null);
+    n(this, "rafId", null);
     /** Whether the instance has been destroyed */
-    o(this, "isDestroyed", !1);
+    n(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 = {
+    n(this, "isPotentialPan", !1);
+    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),
@@ -92,7 +100,11 @@ class A {
       onWheel: this.onWheel.bind(this),
       onCanvasPointerDown: this.onCanvasPointerDown.bind(this),
       onCanvasMouseMove: this.onCanvasMouseMove.bind(this),
-      onCanvasMouseLeave: this.onCanvasMouseLeave.bind(this)
+      onCanvasMouseLeave: this.onCanvasMouseLeave.bind(this),
+      onCompactFocusIn: this.onCompactFocusIn.bind(this),
+      onCompactFocusOut: this.onCompactFocusOut.bind(this),
+      onCompactKeyDown: this.onCompactKeyDown.bind(this),
+      onDocumentClick: this.onDocumentClick.bind(this)
     }, this.init();
   }
   /**
@@ -135,8 +147,8 @@ class A {
   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)
+      const e = getComputedStyle(t), i = e.overflowX, o = e.overflow;
+      if (i === "auto" || i === "scroll" || o === "auto" || o === "scroll" || t.scrollWidth > t.clientWidth)
         return t;
       t = t.parentElement;
     }
@@ -154,14 +166,14 @@ class A {
     if (t.length > 0)
       e = t;
     else {
-      const s = this.table.querySelector("tr");
-      s ? e = s.querySelectorAll("th, td") : e = [];
+      const o = this.table.querySelector("tr");
+      o ? e = o.querySelectorAll("th, td") : e = [];
     }
     const i = this.table.offsetWidth || 1;
-    Array.from(e).forEach((s) => {
-      const a = s.colSpan || 1, n = s.offsetWidth;
+    Array.from(e).forEach((o) => {
+      const a = o.colSpan || 1, s = o.offsetWidth;
       for (let l = 0; l < a; l++) {
-        const r = n / a;
+        const r = s / a;
         this.columns.push({
           index: this.columns.length,
           width: r,
@@ -178,15 +190,15 @@ class A {
    * 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();
+    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));
   }
   /**
@@ -211,7 +223,9 @@ class A {
       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";
+        i ? t.insertBefore(this.minimapEl, i) : t.appendChild(this.minimapEl), this.minimapEl.style.position = "absolute";
+        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);
@@ -242,59 +256,55 @@ class A {
    * Renders the minimap
    */
   render() {
-    this.isDestroyed || (this.updateViewport(), this.options.mode === "canvas" && this.renderCanvas());
+    this.isDestroyed || this.isCompactMode && this.isCompactCollapsed || (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;
+    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: d, scrollWidth: b, clientWidth: w } = this.scrollContainer, h = Math.max(b - w, 1);
-      l = d / h * (1 - s);
+      const { scrollLeft: m, scrollWidth: E, clientWidth: g } = this.scrollContainer, u = Math.max(E - g, 1);
+      l = m / u * (1 - o);
     }
-    const r = l * i, u = Math.floor(r), p = Math.min(Math.ceil(r + a) + 1, i), v = -(r - u) * n;
+    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: s,
+      visibleRatio: o,
       visibleCols: a,
-      cellWidth: n,
+      cellWidth: s,
       panX: l,
       startColFloat: r,
-      startCol: u,
-      endCol: p,
-      xOffset: v
+      startCol: c,
+      endCol: h,
+      xOffset: f
     };
   }
   /**
    * Calculates column index from mouse X position
    */
   getColumnAtX(t) {
-    const { width: e, numCols: i, panX: s, visibleRatio: a } = this.getCanvasMetrics();
+    const { width: e, numCols: i, panX: o, visibleRatio: a } = this.getCanvasMetrics();
     if (i === 0 || e === 0) return -1;
-    const n = t / e, l = s + n * a, r = Math.floor(l * i);
+    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: 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";
+      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`;
+    const t = this.minimapEl.offsetWidth, e = Math.max(t * this.scrollState.viewportRatio, 20), o = (t - e) * this.scrollState.positionRatio;
+    this.viewportEl.style.cssText = `width:${e}px;left:${o}px;display:block`;
   }
   /**
    * Renders the canvas-mode visualization with table preview
@@ -308,11 +318,11 @@ class A {
    * Renders the visible portion of the table directly onto the canvas
    */
   renderTableDirect(t, e) {
-    var P, y, L, W;
+    var S, y, P, D;
     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 = {
+    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",
@@ -322,35 +332,35 @@ class A {
       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.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 d = l; d < r; d++) {
+      const C = c + (d - l) * s;
+      if (C + s < 0 || C > o) continue;
+      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 = `${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"));
+    i.font = `${E}px system-ui, sans-serif`;
+    for (let d = 0; d < h.length; d++) {
+      const C = h[d];
+      if (C.closest("thead")) continue;
+      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 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());
+        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 >= 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);
+      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);
     }
   }
   /**
@@ -359,7 +369,7 @@ class A {
   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));
+    }), this.minimapEl.addEventListener("click", this.boundHandlers.onMinimapClick), this.isCompactMode && (this.minimapEl.addEventListener("focusin", this.boundHandlers.onCompactFocusIn), this.minimapEl.addEventListener("focusout", this.boundHandlers.onCompactFocusOut), this.minimapEl.addEventListener("keydown", this.boundHandlers.onCompactKeyDown), document.addEventListener("click", this.boundHandlers.onDocumentClick)), 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
@@ -375,27 +385,27 @@ class A {
    * @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();
+    if (!this.minimapEl || !this.scrollContainer) return;
+    if (this.isCompactMode && this.isCompactCollapsed) {
+      t.preventDefault(), this.expandCompact();
       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));
+    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 = s / a.width * o;
     this.scrollContainer.scrollTo({
-      left: d,
+      left: Math.max(0, Math.min(o, r)),
       behavior: "smooth"
     });
   }
@@ -415,17 +425,14 @@ class A {
   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();
+      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, 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();
+    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
@@ -453,19 +460,26 @@ class A {
    * @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)
@@ -489,6 +503,76 @@ class A {
   onCanvasMouseLeave() {
     this.hoveredColumn !== -1 && (this.hoveredColumn = -1, this.canvasEl && (this.canvasEl.style.cursor = this.zoomState.level > 1 ? "grab" : "default"), this.render());
   }
+  /**
+   * Expands the compact minimap and clears any pending collapse.
+   */
+  expandCompact() {
+    !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.
+   */
+  collapseCompact() {
+    !this.isCompactMode || !this.minimapEl || this.applyCompactDimensions(!0);
+  }
+  /**
+   * Applies compact sizing/state to the minimap.
+   */
+  applyCompactDimensions(t) {
+    if (!(!this.minimapEl || !this.isCompactMode)) {
+      if (this.isCompactCollapsed = t, t) {
+        this.minimapEl.classList.add("tm-minimap--compact-collapsed"), this.minimapEl.classList.remove("tm-minimap--compact-expanded"), this.minimapEl.style.setProperty("--tm-minimap-width", `${T}px`), this.minimapEl.style.setProperty("--tm-minimap-height", `${T}px`), this.minimapEl.setAttribute("aria-expanded", "false");
+        return;
+      }
+      this.minimapEl.classList.remove("tm-minimap--compact-collapsed"), this.minimapEl.classList.add("tm-minimap--compact-expanded"), this.minimapEl.style.setProperty("--tm-minimap-width", `${this.options.fixedWidth}px`), this.minimapEl.style.setProperty("--tm-minimap-height", `${this.options.height}px`), this.minimapEl.setAttribute("aria-expanded", "true");
+    }
+  }
+  /**
+   * Clears a pending compact collapse timer.
+   */
+  clearCompactCollapseTimer() {
+    this.compactCollapseTimer !== null && (clearTimeout(this.compactCollapseTimer), this.compactCollapseTimer = null);
+  }
+  /**
+   * Schedules the compact minimap to collapse.
+   */
+  scheduleCompactCollapse(t = O) {
+    this.isCompactMode && (this.clearCompactCollapseTimer(), this.compactCollapseTimer = window.setTimeout(() => {
+      this.collapseCompact(), this.compactCollapseTimer = null;
+    }, t));
+  }
+  /**
+   * Handles document click for closing compact mode when clicking outside.
+   */
+  onDocumentClick(t) {
+    !this.isCompactMode || !this.minimapEl || this.isCompactCollapsed || this.minimapEl.contains(t.target) || this.collapseCompact();
+  }
+  /**
+   * Handles focus entering compact mode.
+   */
+  onCompactFocusIn() {
+    this.isCompactMode && this.expandCompact();
+  }
+  /**
+   * Handles focus leaving compact mode.
+   */
+  onCompactFocusOut() {
+    this.isCompactMode && this.scheduleCompactCollapse(0);
+  }
+  /**
+   * Keyboard interactions for compact mode.
+   */
+  onCompactKeyDown(t) {
+    if (this.isCompactMode) {
+      if (t.key === "Escape") {
+        t.preventDefault(), this.collapseCompact();
+        return;
+      }
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this.isCompactCollapsed ? this.expandCompact() : this.collapseCompact());
+    }
+  }
   /**
    * Sets up ResizeObserver and MutationObserver
    */
@@ -511,9 +595,9 @@ class A {
    */
   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;
     }));
   }
@@ -521,9 +605,9 @@ class A {
    * 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);
     })));
   }
   /**
@@ -551,9 +635,9 @@ class A {
   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);
+    const o = this.columns.slice(0, t).reduce((a, s) => a + s.width, 0);
     this.scrollContainer.scrollTo({
-      left: s,
+      left: o,
       behavior: e ? "smooth" : "auto"
     });
   }
@@ -561,9 +645,9 @@ class A {
    * 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);
     })));
   }
   /**
@@ -578,21 +662,26 @@ class A {
    * 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)
-    ), a = 1 - 1 / i;
-    let n = e !== void 0 ? e : this.zoomState.panX;
-    n = Math.max(0, Math.min(a, n)), 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 ? n : 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)
@@ -610,17 +699,26 @@ class A {
     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;
+    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
    */
   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 = []);
+    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: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 (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 {
-  A as TableMinimap
+  F as TableMinimap,
+  Z as injectStyles
 };
 //# sourceMappingURL=table-minimap.js.map