table-minimap 1.0.0 → 1.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2026 Kevin Imig
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -2,22 +2,24 @@
 
 A framework-agnostic minimap component for navigating large HTML tables. Inspired by VS Code's minimap, this library provides a visual overview of wide tables and enables drag-to-scroll navigation.
 
-![npm version](https://img.shields.io/npm/v/table-minimap)
-![bundle size](https://img.shields.io/bundlephobia/minzip/table-minimap)
-![license](https://img.shields.io/npm/l/table-minimap)
+[![npm version](https://img.shields.io/npm/v/table-minimap)](https://www.npmjs.com/package/table-minimap)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/table-minimap)](https://bundlephobia.com/package/table-minimap)
+[![license](https://img.shields.io/npm/l/table-minimap)](https://github.com/Kevinci/table-minimap/blob/main/LICENSE)
+
+**[Live Demo](https://kevinci.github.io/table-minimap/)**
 
 ## Features
 
-- 🎯 **Framework Agnostic** - Works with vanilla JS, React, Vue, Angular, or any framework
-- 📦 **Zero Dependencies** - No external runtime dependencies
-- 🌳 **Tree Shakable** - ESM + CommonJS outputs
-- 🎨 **Two Render Modes** - Simple columns or VS Code-like canvas preview
-- 📱 **Touch Support** - Mouse, touch, and pointer events
-- 🔄 **Auto Updates** - Responds to resize, scroll, and DOM mutations
-- ♿ **Accessible** - ARIA attributes and keyboard navigation support
-- 🎭 **Themeable** - CSS custom properties for easy customization
-- 🎨 **shadcn/ui Ready** - Dedicated theme using shadcn CSS variables
-- 📏 **TypeScript** - Fully typed with declaration files
+- **Framework Agnostic** - Works with vanilla JS, React, Vue, Angular, or any framework
+- **Zero Dependencies** - No external runtime dependencies
+- **Tree Shakable** - ESM + CommonJS outputs
+- **Two Render Modes** - Simple columns or VS Code-like canvas preview
+- **Touch Support** - Mouse, touch, and pointer events
+- **Auto Updates** - Responds to resize, scroll, and DOM mutations
+- **Accessible** - ARIA attributes and keyboard navigation support
+- **Themeable** - CSS custom properties for easy customization
+- **shadcn/ui Ready** - Dedicated theme using shadcn CSS variables
+- **TypeScript** - Fully typed with declaration files
 
 ## Installation
 
@@ -37,7 +39,7 @@ pnpm add table-minimap
 
 ```typescript
 import { TableMinimap } from 'table-minimap';
-import 'table-minimap/style.css';
+
 
 // Using a CSS selector
 const minimap = new TableMinimap('#my-table');
@@ -74,7 +76,7 @@ minimap.destroy();
 
 ```typescript
 import { TableMinimap } from 'table-minimap';
-import 'table-minimap/style.css';
+
 
 const minimap = new TableMinimap('#my-table');
 ```
@@ -85,12 +87,30 @@ const minimap = new TableMinimap('#my-table');
 const minimap = new TableMinimap('#my-table', {
   mode: 'canvas',      // 'columns' | 'canvas'
   height: 50,          // Height in pixels
-  position: 'bottom',  // 'top' | 'bottom'
+  position: 'bottom',  // 'top' | 'bottom' | 'fixed'
   draggable: true,     // Enable drag navigation
   showViewport: true,  // Show viewport indicator
 });
 ```
 
+### Compact Fixed Mode
+
+For a smaller, hideable floating minimap, enable `compact` together with `position: 'fixed'`:
+
+```typescript
+const minimap = new TableMinimap('#my-table', {
+  position: 'fixed',
+  fixedWidth: 260,
+  compact: true,
+  height: 44,
+});
+```
+
+- Collapses into a small translucent dot in the bottom-right corner
+- Expands on hover or keyboard focus
+- Remains clickable when collapsed
+- Uses a short ease-in-out transition for width/height/opacity
+
 ### Canvas Mode (VS Code-like)
 
 Canvas mode renders a compressed pixel preview of the entire table:
@@ -168,7 +188,19 @@ interface TableMinimapOptions {
    * Position relative to the table
    * @default "bottom"
    */
-  position?: 'top' | 'bottom';
+  position?: 'top' | 'bottom' | 'fixed';
+
+  /**
+   * Corner position when using position: 'fixed'
+   * @default "bottom-right"
+   */
+  fixedPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+  /**
+   * Enable compact floating mode for fixed minimaps
+   * @default false
+   */
+  compact?: boolean;
 
   /**
    * Enable drag navigation
@@ -215,6 +247,8 @@ interface TableMinimapOptions {
 | `mode` | `'columns'` |
 | `height` | `40` |
 | `position` | `'bottom'` |
+| `fixedPosition` | `'bottom-right'` |
+| `compact` | `false` |
 | `draggable` | `true` |
 | `showViewport` | `true` |
 | `zoomable` | `false` |
@@ -493,7 +527,7 @@ export function DataTableWithMinimap({ data }: { data: any[] }) {
 ```tsx
 import { useEffect, useRef } from 'react';
 import { TableMinimap } from 'table-minimap';
-import 'table-minimap/style.css';
+
 
 function DataTable() {
   const tableRef = useRef<HTMLTableElement>(null);
@@ -525,7 +559,7 @@ function DataTable() {
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
 import { TableMinimap } from 'table-minimap';
-import 'table-minimap/style.css';
+
 
 const tableRef = ref<HTMLTableElement | null>(null);
 let minimap: TableMinimap | null = null;
@@ -555,7 +589,7 @@ onUnmounted(() => {
 ```typescript
 import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
 import { TableMinimap } from 'table-minimap';
-import 'table-minimap/style.css';
+
 
 @Component({
   selector: 'app-data-table',
@@ -654,7 +688,7 @@ Requires:
 
 ## License
 
-MIT © [Your Name]
+MIT © Kevin Imig
 
 ## Contributing
 

package/dist/index.d.ts

@@ -30,6 +30,8 @@ export declare interface ColumnInfo {
     widthPercent: number;
 }
 
+export declare function injectStyles(): void;
+
 /**
  * Scroll state information
  */
@@ -72,6 +74,14 @@ export declare class TableMinimap {
     private readonly table;
     /** Configuration options */
     private readonly options;
+    /** Whether compact fixed-overlay behavior is enabled */
+    private readonly isCompactMode;
+    /** Whether the compact minimap is currently collapsed */
+    private isCompactCollapsed;
+    /** Whether the compact minimap is currently expanding (transition in progress) */
+    private isCompactExpanding;
+    /** Timeout used to collapse compact mode after pointer leave */
+    private compactCollapseTimer;
     /** The scrollable container (parent of table) */
     private scrollContainer;
     /** Main minimap container element */
@@ -100,9 +110,7 @@ export declare class TableMinimap {
     private panStartX;
     /** Currently hovered column index (-1 = none) */
     private hoveredColumn;
-    /** Currently focused/clicked column index (-1 = none) */
-    private focusedColumn;
-    /** Drag start position */
+    /** Drag start X position */
     private dragStartX;
     /** Drag start scroll position */
     private dragStartScrollLeft;
@@ -184,7 +192,7 @@ export declare class TableMinimap {
     private getColumnAtX;
     /**
      * 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)
      */
     private updateViewport;
     /**
@@ -249,6 +257,42 @@ export declare class TableMinimap {
      * Handles mouse leave on canvas to clear hover state
      */
     private onCanvasMouseLeave;
+    /**
+     * Expands the compact minimap and clears any pending collapse.
+     */
+    private expandCompact;
+    /**
+     * Collapses the compact minimap to the small dot handle.
+     */
+    private collapseCompact;
+    /**
+     * Applies compact sizing/state to the minimap.
+     */
+    private applyCompactDimensions;
+    /**
+     * Clears a pending compact collapse timer.
+     */
+    private clearCompactCollapseTimer;
+    /**
+     * Schedules the compact minimap to collapse.
+     */
+    private scheduleCompactCollapse;
+    /**
+     * Handles document click for closing compact mode when clicking outside.
+     */
+    private onDocumentClick;
+    /**
+     * Handles focus entering compact mode.
+     */
+    private onCompactFocusIn;
+    /**
+     * Handles focus leaving compact mode.
+     */
+    private onCompactFocusOut;
+    /**
+     * Keyboard interactions for compact mode.
+     */
+    private onCompactKeyDown;
     /**
      * Sets up ResizeObserver and MutationObserver
      */
@@ -294,7 +338,7 @@ export declare class TableMinimap {
      * 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(level: number, panX?: number): void;
     /**
@@ -342,6 +386,18 @@ export declare interface TableMinimapOptions {
      * @default 300
      */
     fixedWidth?: number;
+    /**
+     * Corner position when using position: 'fixed'
+     * @default "bottom-right"
+     */
+    fixedPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /**
+     * Enable compact floating mode for fixed minimaps.
+     * When enabled, the minimap collapses into a small dot handle in the
+     * bottom-right corner and expands on hover/focus/click.
+     * @default false
+     */
+    compact?: boolean;
     /**
      * Enable drag navigation on the viewport indicator
      * @default true
@@ -385,7 +441,7 @@ export declare type TableSelector = string | HTMLTableElement;
 export declare interface ZoomState {
     /** Current zoom level (1 = no zoom) */
     level: number;
-    /** Horizontal pan offset (0-1, representing position in table) */
+    /** @deprecated Pan offset is now derived from scroll position */
     panX: number;
     /** Whether zoom is at minimum (showing full overview) */
     isMinZoom: boolean;

package/dist/shadcn.css

@@ -10,16 +10,18 @@
 
 /* Map shadcn/ui variables to table-minimap */
 .tm-minimap {
-  --tm-background: hsl(var(--muted));
-  --tm-border: hsl(var(--border));
-  --tm-viewport-color: hsl(var(--primary) / 0.2);
-  --tm-viewport-border: hsl(var(--primary));
+  --tm-background: hsl(var(--muted, 210 40% 96.1%));
+  --tm-border: hsl(var(--border, 214.3 31.8% 91.4%));
+  --tm-viewport-color: hsl(var(--primary, 222.2 47.4% 11.2%) / 0.2);
+  --tm-viewport-border: hsl(var(--primary, 222.2 47.4% 11.2%));
   --tm-height: 40px;
-  --tm-column-color: hsl(var(--muted-foreground) / 0.3);
+  --tm-column-color: hsl(var(--muted-foreground, 215.4 16.3% 46.9%) / 0.3);
   --tm-column-gap: 1px;
-  --tm-border-radius: var(--radius);
-  --tm-canvas-empty: hsl(var(--muted));
-  --tm-canvas-filled: hsl(var(--foreground) / 0.7);
+  --tm-border-radius: var(--radius, 0.5rem);
+  --tm-canvas-empty: hsl(var(--muted, 210 40% 96.1%));
+  --tm-canvas-filled: hsl(var(--foreground, 222.2 84% 4.9%) / 0.7);
+  --tm-compact-dot-size: 5px;
+  --tm-compact-transition-duration: 180ms;
 }
 
 /* ==========================================================================
@@ -28,8 +30,8 @@
 
 .tm-minimap {
   position: relative;
-  width: 100%;
-  height: var(--tm-height);
+  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);
@@ -37,6 +39,15 @@
   overflow: hidden;
   user-select: none;
   -webkit-user-select: none;
+  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 {
@@ -47,6 +58,54 @@
   margin-top: 8px;
 }
 
+.tm-minimap--compact {
+  border-radius: 999px;
+}
+
+.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: 0.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: 0.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, 0);
+}
+
+.tm-minimap--compact-expanded::after {
+  opacity: 0;
+  transform: scale(0.7);
+}
+
 /* ==========================================================================
    Columns Mode
    ========================================================================== */
@@ -61,7 +120,8 @@
 }
 
 .tm-column {
-  flex-shrink: 0;
+  flex: 1 1 0;
+  min-width: 0;
   height: 100%;
   background: var(--tm-column-color);
   border-radius: calc(var(--tm-border-radius) / 2);
@@ -69,7 +129,7 @@
 }
 
 .tm-column:hover {
-  background: hsl(var(--muted-foreground) / 0.5);
+  background: hsl(var(--muted-foreground, 215.4 16.3% 46.9%) / 0.5);
 }
 
 /* ==========================================================================
@@ -100,12 +160,12 @@
 }
 
 .tm-viewport:hover {
-  background: hsl(var(--primary) / 0.3);
+  background: hsl(var(--primary, 222.2 47.4% 11.2%) / 0.3);
 }
 
 .tm-viewport--dragging {
   cursor: grabbing;
-  background: hsl(var(--primary) / 0.4);
+  background: hsl(var(--primary, 222.2 47.4% 11.2%) / 0.4);
   transition: none;
 }
 
@@ -119,7 +179,7 @@
    ========================================================================== */
 
 .tm-minimap:focus-visible {
-  outline: 2px solid hsl(var(--ring));
+  outline: 2px solid hsl(var(--ring, 222.2 84% 4.9%));
   outline-offset: 2px;
 }
 

package/dist/table-minimap.cjs

@@ -1,2 +1,2 @@
-"use strict";var D=Object.defineProperty;var T=(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)=>T(C,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z={mode:"columns",height:40,position:"bottom",fixedWidth:300,draggable:!0,showViewport:!0,zoomable:!1,minZoom:1,maxZoom:10,zoomSpeed:.1};class H{constructor(t,e={}){o(this,"table");o(this,"options");o(this,"scrollContainer",null);o(this,"minimapEl",null);o(this,"columnsEl",null);o(this,"canvasEl",null);o(this,"canvasCtx",null);o(this,"viewportEl",null);o(this,"columns",[]);o(this,"scrollState",{scrollLeft:0,scrollWidth:0,clientWidth:0,viewportRatio:1,positionRatio:0});o(this,"zoomState",{level:1,panX:0,isMinZoom:!0,isMaxZoom:!1});o(this,"isDragging",!1);o(this,"isPanning",!1);o(this,"wasPanning",!1);o(this,"panStartX",0);o(this,"hoveredColumn",-1);o(this,"focusedColumn",-1);o(this,"dragStartX",0);o(this,"dragStartScrollLeft",0);o(this,"resizeObserver",null);o(this,"mutationObserver",null);o(this,"boundHandlers");o(this,"rafId",null);o(this,"isDestroyed",!1);o(this,"isPotentialPan",!1);this.table=this.resolveTable(t),this.options={...z,...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()}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}init(){this.scrollContainer=this.findScrollContainer(),this.detectColumns(),this.createMinimapElement(),this.updateScrollState(),this.render(),this.attachEventListeners(),this.setupObservers()}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}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})}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()}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))}createCanvasContent(){this.minimapEl&&(this.canvasEl=document.createElement("canvas"),this.canvasEl.className="tm-canvas",this.canvasCtx=this.canvasEl.getContext("2d"),this.minimapEl.appendChild(this.canvasEl))}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))}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)}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)))}render(){this.isDestroyed||(this.updateViewport(),this.options.mode==="canvas"&&this.renderCanvas())}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:g}=this.scrollContainer,h=Math.max(b-g,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}}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))}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`}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)}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*.15,30),d=(e-c)/v,b=Math.min(d*.6,n*.15,14),g=Math.min(c*.6,n*.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 w=this.table.querySelector("thead tr")||p[0],x=w?Array.from(w.querySelectorAll("th, td")):[];i.font=`bold ${g}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=.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)}}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))}onScroll(){this.isDragging||this.rafId===null&&(this.rafId=requestAnimationFrame(()=>{this.updateScrollState(),this.updateViewport(),this.options.mode==="canvas"&&this.render(),this.rafId=null}))}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+.5)*b-i/2,w=e-i,x=Math.max(0,Math.min(w,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 g=this.scrollContainer.scrollLeft/Math.max(e-i,1),h=1/r;u=g*(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"})}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))}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()}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)))}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,isMinZoom:i<=this.options.minZoom,isMaxZoom:i>=this.options.maxZoom},this.render()}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)))}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())}onCanvasMouseLeave(){this.hoveredColumn!==-1&&(this.hoveredColumn=-1,this.canvasEl&&(this.canvasEl.style.cursor=this.zoomState.level>1?"grab":"default"),this.render())}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"]})}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}))}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)})))}getScrollState(){return{...this.scrollState}}getColumns(){return[...this.columns]}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"})}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)})))}getZoomState(){return{...this.zoomState}}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()}resetZoom(){this.setZoom(1,0)}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)}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=[])}}exports.TableMinimap=H;
+"use strict";var z=Object.defineProperty;var H=(v,t,e)=>t in v?z(v,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):v[t]=e;var n=(v,t,e)=>H(v,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A={mode:"columns",height:40,position:"bottom",fixedWidth:300,fixedPosition:"bottom-right",compact:!1,draggable:!0,showViewport:!0,zoomable:!1,minZoom:1,maxZoom:10,zoomSpeed:.1},T=24,O=5,I=180;class Z{constructor(t,e={}){n(this,"table");n(this,"options");n(this,"isCompactMode");n(this,"isCompactCollapsed",!1);n(this,"isCompactExpanding",!1);n(this,"compactCollapseTimer",null);n(this,"scrollContainer",null);n(this,"minimapEl",null);n(this,"columnsEl",null);n(this,"canvasEl",null);n(this,"canvasCtx",null);n(this,"viewportEl",null);n(this,"columns",[]);n(this,"scrollState",{scrollLeft:0,scrollWidth:0,clientWidth:0,viewportRatio:1,positionRatio:0});n(this,"zoomState",{level:1,panX:0,isMinZoom:!0,isMaxZoom:!1});n(this,"isDragging",!1);n(this,"isPanning",!1);n(this,"wasPanning",!1);n(this,"panStartX",0);n(this,"hoveredColumn",-1);n(this,"dragStartX",0);n(this,"dragStartScrollLeft",0);n(this,"resizeObserver",null);n(this,"mutationObserver",null);n(this,"boundHandlers");n(this,"rafId",null);n(this,"isDestroyed",!1);n(this,"isPotentialPan",!1);this.table=this.resolveTable(t),this.options={...A,...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),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),onCompactFocusIn:this.onCompactFocusIn.bind(this),onCompactFocusOut:this.onCompactFocusOut.bind(this),onCompactKeyDown:this.onCompactKeyDown.bind(this),onDocumentClick:this.onDocumentClick.bind(this)},this.init()}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}init(){this.scrollContainer=this.findScrollContainer(),this.detectColumns(),this.createMinimapElement(),this.updateScrollState(),this.render(),this.attachEventListeners(),this.setupObservers()}findScrollContainer(){let t=this.table.parentElement;for(;t;){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}return this.table.parentElement||document.body}detectColumns(){this.columns=[];const t=this.table.querySelectorAll("thead th, thead td");let e;if(t.length>0)e=t;else{const o=this.table.querySelector("tr");o?e=o.querySelectorAll("th, td"):e=[]}const i=this.table.offsetWidth||1;Array.from(e).forEach(o=>{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:r,widthPercent:r/i*100})}}),this.columns.length===0&&this.columns.push({index:0,width:i,widthPercent:100})}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.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",`${O}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()}createColumnsContent(){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))}createCanvasContent(){this.minimapEl&&(this.canvasEl=document.createElement("canvas"),this.canvasEl.className="tm-canvas",this.canvasCtx=this.canvasEl.getContext("2d"),this.minimapEl.appendChild(this.canvasEl))}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))}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";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);else if(t){const e=this.scrollContainer.nextSibling;e?t.insertBefore(this.minimapEl,e):t.appendChild(this.minimapEl)}else this.scrollContainer.appendChild(this.minimapEl)}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)))}render(){this.isDestroyed||this.isCompactMode&&this.isCompactCollapsed||(this.updateViewport(),this.options.mode==="canvas"&&this.renderCanvas())}getCanvasMetrics(){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:m,scrollWidth:E,clientWidth:g}=this.scrollContainer,u=Math.max(E-g,1);l=m/u*(1-o)}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:a,cellWidth:s,panX:l,startColFloat:r,startCol:c,endCol:h,xOffset:f}}getColumnAtX(t){const{width:e,numCols:i,panX:o,visibleRatio:a}=this.getCanvasMetrics();if(i===0||e===0)return-1;const s=t/e,l=o+s*a,r=Math.floor(l*i);return Math.max(0,Math.min(i-1,r))}updateViewport(){if(!this.viewportEl||!this.minimapEl)return;if(this.options.mode==="canvas"){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;this.viewportEl.style.cssText=`width:${e}px;left:${o}px;display:block`}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)}renderTableDirect(t,e){var S,y,P,D;if(!this.canvasCtx)return;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*.15,30),m=(e-p)/f,E=Math.min(m*.6,s*.15,14),g=Math.min(p*.6,s*.15,14),u={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=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=`${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 X=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=.5,i.strokeRect(w,b,s,m);const k=(D=(P=X[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 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)}}attachEventListeners(){!this.scrollContainer||!this.minimapEl||(this.scrollContainer.addEventListener("scroll",this.boundHandlers.onScroll,{passive:!0}),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))}onScroll(){this.isDragging||this.rafId===null&&(this.rafId=requestAnimationFrame(()=>{this.updateScrollState(),this.updateViewport(),this.options.mode==="canvas"&&this.render(),this.rafId=null}))}onMinimapClick(t){if(!this.minimapEl||!this.scrollContainer)return;if(this.isCompactMode&&this.isCompactCollapsed){t.preventDefault(),this.expandCompact();return}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+.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:Math.max(0,Math.min(o,r)),behavior:"smooth"})}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))}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 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{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()}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)))}onWheel(t){if(!this.options.zoomable||this.options.mode!=="canvas"||!this.canvasEl||!this.scrollContainer||!this.minimapEl)return;t.preventDefault();const e=this.zoomState.level,i=-t.deltaY*this.options.zoomSpeed,o=Math.max(this.options.minZoom,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:o,panX:0,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()}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)))}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())}onCanvasMouseLeave(){this.hoveredColumn!==-1&&(this.hoveredColumn=-1,this.canvasEl&&(this.canvasEl.style.cursor=this.zoomState.level>1?"grab":"default"),this.render())}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))}collapseCompact(){!this.isCompactMode||!this.minimapEl||this.applyCompactDimensions(!0)}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")}}clearCompactCollapseTimer(){this.compactCollapseTimer!==null&&(clearTimeout(this.compactCollapseTimer),this.compactCollapseTimer=null)}scheduleCompactCollapse(t=I){this.isCompactMode&&(this.clearCompactCollapseTimer(),this.compactCollapseTimer=window.setTimeout(()=>{this.collapseCompact(),this.compactCollapseTimer=null},t))}onDocumentClick(t){!this.isCompactMode||!this.minimapEl||this.isCompactCollapsed||this.minimapEl.contains(t.target)||this.collapseCompact()}onCompactFocusIn(){this.isCompactMode&&this.expandCompact()}onCompactFocusOut(){this.isCompactMode&&this.scheduleCompactCollapse(0)}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())}}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"]})}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(()=>{const t=document.createElement("div");t.className="tm-column",this.columnsEl.appendChild(t)})),this.rafId=null}))}onTableMutation(){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)})))}getScrollState(){return{...this.scrollState}}getColumns(){return[...this.columns]}scrollToColumn(t,e=!0){if(!this.scrollContainer||t<0||t>=this.columns.length)return;const o=this.columns.slice(0,t).reduce((a,s)=>a+s.width,0);this.scrollContainer.scrollTo({left:o,behavior:e?"smooth":"auto"})}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(()=>{const t=document.createElement("div");t.className="tm-column",this.columnsEl.appendChild(t)})))}getZoomState(){return{...this.zoomState}}setZoom(t,e){if(this.isDestroyed||this.options.mode!=="canvas"||!this.scrollContainer)return;const i=Math.max(this.options.minZoom,Math.min(this.options.maxZoom,t)),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:0,isMinZoom:i<=this.options.minZoom,isMaxZoom:i>=this.options.maxZoom},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()}resetZoom(){this.setZoom(1,0)}zoomToColumns(t,e){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,l=i/s,r=o/i;this.setZoom(l,r)}destroy(){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 $=':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 R(){if(W||typeof document>"u")return;const v=document.createElement("style");v.id="table-minimap-styles",v.textContent=$,document.head.appendChild(v),W=!0}R();exports.TableMinimap=Z;exports.injectStyles=R;
 //# sourceMappingURL=table-minimap.cjs.map