table-minimap 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,396 @@
+/**
+ * Table Minimap - A framework-agnostic minimap component for large HTML tables
+ *
+ * @packageDocumentation
+ */
+
+/**
+ * Cell data for canvas rendering
+ */
+export declare interface CellData {
+    /** Row index */
+    row: number;
+    /** Column index */
+    col: number;
+    /** Whether the cell has content */
+    hasContent: boolean;
+    /** Content density (0-1) for color intensity */
+    density: number;
+}
+
+/**
+ * Internal representation of a table column
+ */
+export declare interface ColumnInfo {
+    /** Zero-based index of the column */
+    index: number;
+    /** Width of the column in pixels */
+    width: number;
+    /** Percentage width relative to total table width */
+    widthPercent: number;
+}
+
+/**
+ * Scroll state information
+ */
+export declare interface ScrollState {
+    /** Current horizontal scroll position */
+    scrollLeft: number;
+    /** Maximum scrollable width */
+    scrollWidth: number;
+    /** Visible width of the container */
+    clientWidth: number;
+    /** Viewport width as a ratio (0-1) */
+    viewportRatio: number;
+    /** Viewport position as a ratio (0-1) */
+    positionRatio: number;
+}
+
+/**
+ * TableMinimap - A framework-agnostic minimap component for large HTML tables
+ *
+ * @example
+ * ```ts
+ * import { TableMinimap } from 'table-minimap';
+ * import 'table-minimap/style.css';
+ *
+ * const minimap = new TableMinimap('#my-table');
+ *
+ * // Or with options
+ * const minimap = new TableMinimap('#my-table', {
+ *   mode: 'canvas',
+ *   height: 50,
+ *   position: 'top'
+ * });
+ *
+ * // Cleanup
+ * minimap.destroy();
+ * ```
+ */
+export declare class TableMinimap {
+    /** The target table element */
+    private readonly table;
+    /** Configuration options */
+    private readonly options;
+    /** The scrollable container (parent of table) */
+    private scrollContainer;
+    /** Main minimap container element */
+    private minimapEl;
+    /** Columns container for columns mode */
+    private columnsEl;
+    /** Canvas element for canvas mode */
+    private canvasEl;
+    /** Canvas 2D rendering context */
+    private canvasCtx;
+    /** Viewport indicator element */
+    private viewportEl;
+    /** Detected column information */
+    private columns;
+    /** Current scroll state */
+    private scrollState;
+    /** Current zoom state */
+    private zoomState;
+    /** Is the viewport being dragged */
+    private isDragging;
+    /** Is the canvas being panned (when zoomed) */
+    private isPanning;
+    /** Was just panning (to prevent click after pan) */
+    private wasPanning;
+    /** Pan start position */
+    private panStartX;
+    /** Currently hovered column index (-1 = none) */
+    private hoveredColumn;
+    /** Currently focused/clicked column index (-1 = none) */
+    private focusedColumn;
+    /** Drag start position */
+    private dragStartX;
+    /** Drag start scroll position */
+    private dragStartScrollLeft;
+    /** ResizeObserver instance */
+    private resizeObserver;
+    /** MutationObserver instance */
+    private mutationObserver;
+    /** Bound event handlers for cleanup */
+    private boundHandlers;
+    /** Animation frame ID for throttling */
+    private rafId;
+    /** Whether the instance has been destroyed */
+    private isDestroyed;
+    /**
+     * Creates a new TableMinimap instance
+     *
+     * @param selector - CSS selector string or HTMLTableElement
+     * @param options - Configuration options
+     * @throws Error if table element is not found or invalid
+     */
+    constructor(selector: TableSelector, options?: TableMinimapOptions);
+    /**
+     * Resolves the table element from a selector or element
+     *
+     * @param selector - CSS selector or HTMLTableElement
+     * @returns The resolved table element
+     * @throws Error if element is not found or not a table
+     */
+    private resolveTable;
+    /**
+     * Initializes the minimap
+     */
+    private init;
+    /**
+     * Finds the nearest scrollable parent container
+     *
+     * @returns The scrollable container or the table's parent
+     */
+    private findScrollContainer;
+    /**
+     * Detects table columns from thead or first row
+     */
+    private detectColumns;
+    /**
+     * Creates the minimap DOM element
+     */
+    private createMinimapElement;
+    /**
+     * Creates columns-mode content
+     */
+    private createColumnsContent;
+    /**
+     * Creates canvas-mode content
+     */
+    private createCanvasContent;
+    /**
+     * Creates the viewport indicator element
+     */
+    private createViewportIndicator;
+    /**
+     * Inserts the minimap into the DOM
+     */
+    private insertMinimap;
+    /**
+     * Updates the scroll state from the container
+     */
+    private updateScrollState;
+    /**
+     * Renders the minimap
+     */
+    private render;
+    /**
+     * Canvas metrics for calculations - cached values to avoid repeated computations
+     */
+    private getCanvasMetrics;
+    /**
+     * Calculates column index from mouse X position
+     */
+    private getColumnAtX;
+    /**
+     * Updates the viewport indicator position and size
+     * In canvas mode, the viewport shows the focused (clicked) column
+     */
+    private updateViewport;
+    /**
+     * Renders the canvas-mode visualization with table preview
+     */
+    private renderCanvas;
+    /**
+     * Renders the visible portion of the table directly onto the canvas
+     */
+    private renderTableDirect;
+    /**
+     * Attaches event listeners
+     */
+    private attachEventListeners;
+    /**
+     * Handles scroll events on the container
+     */
+    private onScroll;
+    /**
+     * Handles click on the minimap to jump to position
+     *
+     * @param e - Mouse event
+     */
+    private onMinimapClick;
+    /**
+     * Handles pointer down on viewport for drag start
+     *
+     * @param e - Pointer event
+     */
+    private onPointerDown;
+    /**
+     * Handles pointer move during drag
+     *
+     * @param e - Pointer event
+     */
+    private onPointerMove;
+    /**
+     * Handles pointer up to end drag
+     *
+     * @param e - Pointer event
+     */
+    private onPointerUp;
+    /**
+     * Handles wheel events for zoom
+     *
+     * @param e - Wheel event
+     */
+    private onWheel;
+    /** Whether we started a potential pan (waiting to see if it's a click or drag) */
+    private isPotentialPan;
+    /**
+     * Handles pointer down on canvas for drag start (scrolls table when zoomed)
+     *
+     * @param e - Pointer event
+     */
+    private onCanvasPointerDown;
+    /**
+     * Handles mouse move on canvas for column hover highlighting
+     */
+    private onCanvasMouseMove;
+    /**
+     * Handles mouse leave on canvas to clear hover state
+     */
+    private onCanvasMouseLeave;
+    /**
+     * Sets up ResizeObserver and MutationObserver
+     */
+    private setupObservers;
+    /**
+     * Handles resize events
+     */
+    private onResize;
+    /**
+     * Handles table mutation events
+     */
+    private onTableMutation;
+    /**
+     * Gets the current scroll state
+     *
+     * @returns Current scroll state
+     */
+    getScrollState(): ScrollState;
+    /**
+     * Gets the detected columns
+     *
+     * @returns Array of column information
+     */
+    getColumns(): ColumnInfo[];
+    /**
+     * Scrolls to a specific column
+     *
+     * @param columnIndex - Zero-based column index
+     * @param smooth - Use smooth scrolling
+     */
+    scrollToColumn(columnIndex: number, smooth?: boolean): void;
+    /**
+     * Forces a refresh of the minimap
+     */
+    refresh(): void;
+    /**
+     * Gets the current zoom state (canvas mode only)
+     *
+     * @returns Current zoom state
+     */
+    getZoomState(): ZoomState;
+    /**
+     * Sets the zoom level programmatically (canvas mode only)
+     *
+     * @param level - Zoom level (1 = no zoom)
+     * @param panX - Optional pan position (0-1)
+     */
+    setZoom(level: number, panX?: number): void;
+    /**
+     * Resets zoom to default (shows full table overview)
+     */
+    resetZoom(): void;
+    /**
+     * Zooms to a specific column range (canvas mode only)
+     *
+     * @param startCol - Start column index
+     * @param endCol - End column index
+     */
+    zoomToColumns(startCol: number, endCol: number): void;
+    /**
+     * Destroys the minimap instance and cleans up resources
+     */
+    destroy(): void;
+}
+
+/**
+ * Configuration options for the TableMinimap component
+ */
+export declare interface TableMinimapOptions {
+    /**
+     * Rendering mode for the minimap
+     * - "columns": Simple column-based visualization (default)
+     * - "canvas": VS Code-like compressed pixel preview
+     */
+    mode?: 'columns' | 'canvas';
+    /**
+     * Height of the minimap in pixels
+     * @default 40
+     */
+    height?: number;
+    /**
+     * Position of the minimap relative to the table
+     * - "top": Above the table
+     * - "bottom": Below the table
+     * - "fixed": Floating overlay at bottom-right corner of the table
+     * @default "bottom"
+     */
+    position?: 'top' | 'bottom' | 'fixed';
+    /**
+     * Width of the minimap when using position: 'fixed'
+     * @default 300
+     */
+    fixedWidth?: number;
+    /**
+     * Enable drag navigation on the viewport indicator
+     * @default true
+     */
+    draggable?: boolean;
+    /**
+     * Show the viewport indicator
+     * @default true
+     */
+    showViewport?: boolean;
+    /**
+     * Enable zoom functionality in canvas mode (scroll wheel to zoom)
+     * @default false
+     */
+    zoomable?: boolean;
+    /**
+     * Minimum zoom level (1 = no zoom, showing full table)
+     * @default 1
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level
+     * @default 10
+     */
+    maxZoom?: number;
+    /**
+     * Zoom speed multiplier (higher = faster zoom)
+     * @default 0.1
+     */
+    zoomSpeed?: number;
+}
+
+/**
+ * Table element selector type
+ */
+export declare type TableSelector = string | HTMLTableElement;
+
+/**
+ * Zoom state information
+ */
+export declare interface ZoomState {
+    /** Current zoom level (1 = no zoom) */
+    level: number;
+    /** Horizontal pan offset (0-1, representing position in table) */
+    panX: number;
+    /** Whether zoom is at minimum (showing full overview) */
+    isMinZoom: boolean;
+    /** Whether zoom is at maximum */
+    isMaxZoom: boolean;
+}
+
+export { }

package/dist/shadcn.css

@@ -0,0 +1,138 @@
+/* ==========================================================================
+   Table Minimap - shadcn/ui Theme
+
+   This stylesheet uses shadcn/ui CSS variables for seamless integration.
+   Import this instead of the default style.css when using shadcn/ui.
+
+   Usage:
+   import 'table-minimap/shadcn.css';
+   ========================================================================== */
+
+/* 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-height: 40px;
+  --tm-column-color: hsl(var(--muted-foreground) / 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);
+}
+
+/* ==========================================================================
+   Main Container
+   ========================================================================== */
+
+.tm-minimap {
+  position: relative;
+  width: 100%;
+  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;
+}
+
+.tm-minimap--top {
+  margin-bottom: 8px;
+}
+
+.tm-minimap--bottom {
+  margin-top: 8px;
+}
+
+/* ==========================================================================
+   Columns Mode
+   ========================================================================== */
+
+.tm-columns {
+  display: flex;
+  align-items: stretch;
+  height: 100%;
+  gap: var(--tm-column-gap);
+  padding: 4px;
+  box-sizing: border-box;
+}
+
+.tm-column {
+  flex-shrink: 0;
+  height: 100%;
+  background: var(--tm-column-color);
+  border-radius: calc(var(--tm-border-radius) / 2);
+  transition: background-color 0.15s ease;
+}
+
+.tm-column:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* ==========================================================================
+   Canvas Mode
+   ========================================================================== */
+
+.tm-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ==========================================================================
+   Viewport Indicator
+   ========================================================================== */
+
+.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 0.15s ease;
+  z-index: 10;
+}
+
+.tm-viewport:hover {
+  background: hsl(var(--primary) / 0.3);
+}
+
+.tm-viewport--dragging {
+  cursor: grabbing;
+  background: hsl(var(--primary) / 0.4);
+  transition: none;
+}
+
+.tm-viewport--disabled {
+  cursor: default;
+  pointer-events: none;
+}
+
+/* ==========================================================================
+   Accessibility
+   ========================================================================== */
+
+.tm-minimap:focus-visible {
+  outline: 2px solid hsl(var(--ring));
+  outline-offset: 2px;
+}
+
+/* Screen reader only content */
+.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;
+}
+

package/dist/style.css

@@ -0,0 +1 @@
+: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}@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:100%;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}.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-columns{display:flex;align-items:stretch;height:100%;gap:var(--tm-column-gap);padding:4px;box-sizing:border-box}.tm-column{flex-shrink:0;height:100%;background:var(--tm-column-color);border-radius:2px;transition:background-color .15s ease;cursor:pointer}.tm-column:hover{background:color-mix(in srgb,var(--tm-column-color) 80%,black)}.tm-canvas{width:100%;height:100%;display:block;cursor:pointer}.tm-viewport{position:absolute;top:0;height:100%;background:var(--tm-viewport-color);border-left:2px solid var(--tm-viewport-border);border-right:2px solid var(--tm-viewport-border);box-sizing:border-box;cursor:grab;transition:background-color .15s ease;z-index:10}.tm-viewport:hover{background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 10%)}.tm-viewport--dragging{cursor:grabbing;background:color-mix(in srgb,var(--tm-viewport-color) 100%,black 20%);transition:none}.tm-viewport--disabled{cursor:default;pointer-events:none}.tm-minimap:focus-visible{outline:2px solid var(--tm-viewport-border);outline-offset:2px}.tm-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/table-minimap.cjs

@@ -0,0 +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;
+//# sourceMappingURL=table-minimap.cjs.map