@toolbox-web/grid 0.0.1

package/lib/plugins/reorder/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../libs/grid/src/lib/core/plugin/base-plugin.ts","../../../../../../libs/grid/src/lib/plugins/reorder/column-drag.ts","../../../../../../libs/grid/src/lib/plugins/reorder/ReorderPlugin.ts"],"sourcesContent":["/**\r\n * Base Grid Plugin Class\r\n *\r\n * All plugins extend this abstract class.\r\n * Plugins are instantiated per-grid and manage their own state.\r\n */\r\n\r\nimport type { ColumnConfig, ColumnState, HeaderContentDefinition, ToolPanelDefinition } from '../types';\r\n\r\n// Forward declare to avoid circular imports\r\nexport interface GridElement {\r\n  shadowRoot: ShadowRoot | null;\r\n  rows: any[];\r\n  columns: ColumnConfig[];\r\n  gridConfig: any;\r\n  requestRender(): void;\r\n  requestAfterRender(): void;\r\n  forceLayout(): Promise<void>;\r\n  getPlugin<T extends BaseGridPlugin>(PluginClass: new (...args: any[]) => T): T | undefined;\r\n  getPluginByName(name: string): BaseGridPlugin | undefined;\r\n  dispatchEvent(event: Event): boolean;\r\n}\r\n\r\n/**\r\n * Keyboard modifier flags\r\n */\r\nexport interface KeyboardModifiers {\r\n  ctrl?: boolean;\r\n  shift?: boolean;\r\n  alt?: boolean;\r\n  meta?: boolean;\r\n}\r\n\r\n/**\r\n * Cell coordinates\r\n */\r\nexport interface CellCoords {\r\n  row: number;\r\n  col: number;\r\n}\r\n\r\n/**\r\n * Cell click event\r\n */\r\nexport interface CellClickEvent {\r\n  rowIndex: number;\r\n  colIndex: number;\r\n  field: string;\r\n  value: any;\r\n  row: any;\r\n  cellEl: HTMLElement;\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\n/**\r\n * Row click event\r\n */\r\nexport interface RowClickEvent {\r\n  rowIndex: number;\r\n  row: any;\r\n  rowEl: HTMLElement;\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\n/**\r\n * Header click event\r\n */\r\nexport interface HeaderClickEvent {\r\n  colIndex: number;\r\n  field: string;\r\n  column: ColumnConfig;\r\n  headerEl: HTMLElement;\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\n/**\r\n * Scroll event\r\n */\r\nexport interface ScrollEvent {\r\n  scrollTop: number;\r\n  scrollLeft: number;\r\n  scrollHeight: number;\r\n  scrollWidth: number;\r\n  clientHeight: number;\r\n  clientWidth: number;\r\n  originalEvent?: Event;\r\n}\r\n\r\n/**\r\n * Cell mouse event (for drag operations, selection, etc.)\r\n */\r\nexport interface CellMouseEvent {\r\n  /** Event type: mousedown, mousemove, or mouseup */\r\n  type: 'mousedown' | 'mousemove' | 'mouseup';\r\n  /** Row index, undefined if not over a data cell */\r\n  rowIndex?: number;\r\n  /** Column index, undefined if not over a cell */\r\n  colIndex?: number;\r\n  /** Field name, undefined if not over a cell */\r\n  field?: string;\r\n  /** Cell value, undefined if not over a data cell */\r\n  value?: unknown;\r\n  /** Row data object, undefined if not over a data row */\r\n  row?: unknown;\r\n  /** Column configuration, undefined if not over a column */\r\n  column?: ColumnConfig;\r\n  /** The cell element, undefined if not over a cell */\r\n  cellElement?: HTMLElement;\r\n  /** The row element, undefined if not over a row */\r\n  rowElement?: HTMLElement;\r\n  /** Whether the event is over a header cell */\r\n  isHeader: boolean;\r\n  /** Cell coordinates if over a valid data cell */\r\n  cell?: CellCoords;\r\n  /** The original mouse event */\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\n/**\r\n * Context menu parameters\r\n */\r\nexport interface ContextMenuParams {\r\n  x: number;\r\n  y: number;\r\n  rowIndex?: number;\r\n  colIndex?: number;\r\n  field?: string;\r\n  value?: any;\r\n  row?: any;\r\n  column?: ColumnConfig;\r\n  isHeader?: boolean;\r\n}\r\n\r\n/**\r\n * Context menu item\r\n */\r\nexport interface ContextMenuItem {\r\n  id: string;\r\n  label: string;\r\n  icon?: string;\r\n  disabled?: boolean;\r\n  separator?: boolean;\r\n  children?: ContextMenuItem[];\r\n  action?: (params: ContextMenuParams) => void;\r\n}\r\n\r\n/**\r\n * Cell render context for plugin cell renderers.\r\n * Provides full context including position and editing state.\r\n *\r\n * Note: This differs from the core `CellRenderContext` in types.ts which is\r\n * simpler and used for column view renderers. This version provides additional\r\n * context needed by plugins that register custom cell renderers.\r\n */\r\nexport interface PluginCellRenderContext {\r\n  /** The cell value */\r\n  value: any;\r\n  /** The field/column key */\r\n  field: string;\r\n  /** The row data object */\r\n  row: any;\r\n  /** Row index in the data array */\r\n  rowIndex: number;\r\n  /** Column index */\r\n  colIndex: number;\r\n  /** Column configuration */\r\n  column: ColumnConfig;\r\n  /** Whether the cell is currently in edit mode */\r\n  isEditing: boolean;\r\n}\r\n\r\n/**\r\n * Header render context for plugin header renderers.\r\n */\r\nexport interface PluginHeaderRenderContext {\r\n  /** Column configuration */\r\n  column: ColumnConfig;\r\n  /** Column index */\r\n  colIndex: number;\r\n}\r\n\r\n/**\r\n * Cell renderer function type for plugins.\r\n */\r\nexport type CellRenderer = (ctx: PluginCellRenderContext) => string | HTMLElement;\r\n\r\n/**\r\n * Header renderer function type for plugins.\r\n */\r\nexport type HeaderRenderer = (ctx: PluginHeaderRenderContext) => string | HTMLElement;\r\n\r\n/**\r\n * Cell editor interface for plugins.\r\n */\r\nexport interface CellEditor {\r\n  create(ctx: PluginCellRenderContext, commitFn: (value: any) => void, cancelFn: () => void): HTMLElement;\r\n  getValue?(element: HTMLElement): any;\r\n  focus?(element: HTMLElement): void;\r\n}\r\n\r\n/**\r\n * Abstract base class for all grid plugins.\r\n *\r\n * @template TConfig - Configuration type for the plugin\r\n */\r\nexport abstract class BaseGridPlugin<TConfig = unknown> {\r\n  /** Unique plugin identifier (derived from class name by default) */\r\n  abstract readonly name: string;\r\n\r\n  /** Plugin version - override in subclass if needed */\r\n  readonly version: string = '1.0.0';\r\n\r\n  /** CSS styles to inject into the grid's shadow DOM */\r\n  readonly styles?: string;\r\n\r\n  /** Custom cell renderers keyed by type name */\r\n  readonly cellRenderers?: Record<string, CellRenderer>;\r\n\r\n  /** Custom header renderers keyed by type name */\r\n  readonly headerRenderers?: Record<string, HeaderRenderer>;\r\n\r\n  /** Custom cell editors keyed by type name */\r\n  readonly cellEditors?: Record<string, CellEditor>;\r\n\r\n  /** The grid instance this plugin is attached to */\r\n  protected grid!: GridElement;\r\n\r\n  /** Plugin configuration - merged with defaults in attach() */\r\n  protected config!: TConfig;\r\n\r\n  /** User-provided configuration from constructor */\r\n  private readonly userConfig: Partial<TConfig>;\r\n\r\n  /**\r\n   * Default configuration - subclasses should override this getter.\r\n   * Note: This must be a getter (not property initializer) for proper inheritance\r\n   * since property initializers run after parent constructor.\r\n   */\r\n  protected get defaultConfig(): Partial<TConfig> {\r\n    return {};\r\n  }\r\n\r\n  constructor(config: Partial<TConfig> = {}) {\r\n    this.userConfig = config;\r\n  }\r\n\r\n  /**\r\n   * Called when the plugin is attached to a grid.\r\n   * Override to set up event listeners, initialize state, etc.\r\n   */\r\n  attach(grid: GridElement): void {\r\n    this.grid = grid;\r\n    // Merge config here (after subclass construction is complete)\r\n    this.config = { ...this.defaultConfig, ...this.userConfig } as TConfig;\r\n  }\r\n\r\n  /**\r\n   * Called when the plugin is detached from a grid.\r\n   * Override to clean up event listeners, timers, etc.\r\n   */\r\n  detach(): void {\r\n    // Override in subclass\r\n  }\r\n\r\n  /**\r\n   * Get another plugin instance from the same grid.\r\n   * Use for inter-plugin communication.\r\n   */\r\n  protected getPlugin<T extends BaseGridPlugin>(PluginClass: new (...args: any[]) => T): T | undefined {\r\n    return this.grid?.getPlugin(PluginClass);\r\n  }\r\n\r\n  /**\r\n   * Emit a custom event from the grid.\r\n   */\r\n  protected emit<T>(eventName: string, detail: T): void {\r\n    this.grid?.dispatchEvent?.(new CustomEvent(eventName, { detail, bubbles: true }));\r\n  }\r\n\r\n  /**\r\n   * Request a re-render of the grid.\r\n   */\r\n  protected requestRender(): void {\r\n    this.grid?.requestRender?.();\r\n  }\r\n\r\n  /**\r\n   * Request a lightweight style update without rebuilding DOM.\r\n   * Use this instead of requestRender() when only CSS classes need updating.\r\n   */\r\n  protected requestAfterRender(): void {\r\n    this.grid?.requestAfterRender?.();\r\n  }\r\n\r\n  /**\r\n   * Get the current rows from the grid.\r\n   */\r\n  protected get rows(): any[] {\r\n    return this.grid?.rows ?? [];\r\n  }\r\n\r\n  /**\r\n   * Get the original unfiltered/unprocessed rows from the grid.\r\n   * Use this when you need all source data regardless of active filters.\r\n   */\r\n  protected get sourceRows(): any[] {\r\n    return (this.grid as any)?.sourceRows ?? [];\r\n  }\r\n\r\n  /**\r\n   * Get the current columns from the grid.\r\n   */\r\n  protected get columns(): ColumnConfig[] {\r\n    return this.grid?.columns ?? [];\r\n  }\r\n\r\n  /**\r\n   * Get only visible columns from the grid (excludes hidden).\r\n   * Use this for rendering that needs to match the grid template.\r\n   */\r\n  protected get visibleColumns(): ColumnConfig[] {\r\n    return (this.grid as any)?.visibleColumns ?? [];\r\n  }\r\n\r\n  /**\r\n   * Get the shadow root of the grid.\r\n   */\r\n  protected get shadowRoot(): ShadowRoot | null {\r\n    return this.grid?.shadowRoot ?? null;\r\n  }\r\n\r\n  /**\r\n   * Log a warning message.\r\n   */\r\n  protected warn(message: string): void {\r\n    console.warn(`[tbw-grid:${this.name}] ${message}`);\r\n  }\r\n\r\n  // ===== Lifecycle Hooks (override as needed) =====\r\n\r\n  /**\r\n   * Transform rows before rendering.\r\n   * Called during each render cycle before rows are rendered to the DOM.\r\n   * Use this to filter, sort, or add computed properties to rows.\r\n   *\r\n   * @param rows - The current rows array (readonly to encourage returning a new array)\r\n   * @returns The modified rows array to render\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * processRows(rows: readonly any[]): any[] {\r\n   *   // Filter out hidden rows\r\n   *   return rows.filter(row => !row._hidden);\r\n   * }\r\n   * ```\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * processRows(rows: readonly any[]): any[] {\r\n   *   // Add computed properties\r\n   *   return rows.map(row => ({\r\n   *     ...row,\r\n   *     _fullName: `${row.firstName} ${row.lastName}`\r\n   *   }));\r\n   * }\r\n   * ```\r\n   */\r\n  processRows?(rows: readonly any[]): any[];\r\n\r\n  /**\r\n   * Transform columns before rendering.\r\n   * Called during each render cycle before column headers and cells are rendered.\r\n   * Use this to add, remove, or modify column definitions.\r\n   *\r\n   * @param columns - The current columns array (readonly to encourage returning a new array)\r\n   * @returns The modified columns array to render\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * processColumns(columns: readonly ColumnConfig[]): ColumnConfig[] {\r\n   *   // Add a selection checkbox column\r\n   *   return [\r\n   *     { field: '_select', header: '', width: 40 },\r\n   *     ...columns\r\n   *   ];\r\n   * }\r\n   * ```\r\n   */\r\n  processColumns?(columns: readonly ColumnConfig[]): ColumnConfig[];\r\n\r\n  /**\r\n   * Called before each render cycle begins.\r\n   * Use this to prepare state or cache values needed during rendering.\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * beforeRender(): void {\r\n   *   this.visibleRowCount = this.calculateVisibleRows();\r\n   * }\r\n   * ```\r\n   */\r\n  beforeRender?(): void;\r\n\r\n  /**\r\n   * Called after each render cycle completes.\r\n   * Use this for DOM manipulation, adding event listeners to rendered elements,\r\n   * or applying visual effects like selection highlights.\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * afterRender(): void {\r\n   *   // Apply selection styling to rendered rows\r\n   *   const rows = this.shadowRoot?.querySelectorAll('.data-row');\r\n   *   rows?.forEach((row, i) => {\r\n   *     row.classList.toggle('selected', this.selectedRows.has(i));\r\n   *   });\r\n   * }\r\n   * ```\r\n   */\r\n  afterRender?(): void;\r\n\r\n  /**\r\n   * Render a custom row, bypassing the default row rendering.\r\n   * Use this for special row types like group headers, detail rows, or footers.\r\n   *\r\n   * @param row - The row data object\r\n   * @param rowEl - The row DOM element to render into\r\n   * @param rowIndex - The index of the row in the data array\r\n   * @returns `true` if the plugin handled rendering (prevents default), `false`/`void` for default rendering\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * renderRow(row: any, rowEl: HTMLElement, rowIndex: number): boolean | void {\r\n   *   if (row._isGroupHeader) {\r\n   *     rowEl.innerHTML = `<div class=\"group-header\">${row._groupLabel}</div>`;\r\n   *     return true; // Handled - skip default rendering\r\n   *   }\r\n   *   // Return void to let default rendering proceed\r\n   * }\r\n   * ```\r\n   */\r\n  renderRow?(row: any, rowEl: HTMLElement, rowIndex: number): boolean | void;\r\n\r\n  // ===== Interaction Hooks (override as needed) =====\r\n\r\n  /**\r\n   * Handle keyboard events on the grid.\r\n   * Called when a key is pressed while the grid or a cell has focus.\r\n   *\r\n   * @param event - The native KeyboardEvent\r\n   * @returns `true` to prevent default behavior and stop propagation, `false`/`void` to allow default\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onKeyDown(event: KeyboardEvent): boolean | void {\r\n   *   // Handle Ctrl+A for select all\r\n   *   if (event.ctrlKey && event.key === 'a') {\r\n   *     this.selectAllRows();\r\n   *     return true; // Prevent default browser select-all\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onKeyDown?(event: KeyboardEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle cell click events.\r\n   * Called when a data cell is clicked (not headers).\r\n   *\r\n   * @param event - Cell click event with row/column context\r\n   * @returns `true` to prevent default behavior and stop propagation, `false`/`void` to allow default\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onCellClick(event: CellClickEvent): boolean | void {\r\n   *   if (event.field === '_select') {\r\n   *     this.toggleRowSelection(event.rowIndex);\r\n   *     return true; // Handled\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onCellClick?(event: CellClickEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle row click events.\r\n   * Called when any part of a data row is clicked.\r\n   * Note: This is called in addition to onCellClick, not instead of.\r\n   *\r\n   * @param event - Row click event with row context\r\n   * @returns `true` to prevent default behavior and stop propagation, `false`/`void` to allow default\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onRowClick(event: RowClickEvent): boolean | void {\r\n   *   if (this.config.mode === 'row') {\r\n   *     this.selectRow(event.rowIndex, event.originalEvent);\r\n   *     return true;\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onRowClick?(event: RowClickEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle header click events.\r\n   * Called when a column header is clicked. Commonly used for sorting.\r\n   *\r\n   * @param event - Header click event with column context\r\n   * @returns `true` to prevent default behavior and stop propagation, `false`/`void` to allow default\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onHeaderClick(event: HeaderClickEvent): boolean | void {\r\n   *   if (event.column.sortable !== false) {\r\n   *     this.toggleSort(event.field);\r\n   *     return true;\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onHeaderClick?(event: HeaderClickEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle scroll events on the grid viewport.\r\n   * Called during scrolling. Note: This may be called frequently; debounce if needed.\r\n   *\r\n   * @param event - Scroll event with scroll position and viewport dimensions\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onScroll(event: ScrollEvent): void {\r\n   *   // Update sticky column positions\r\n   *   this.updateStickyPositions(event.scrollLeft);\r\n   * }\r\n   * ```\r\n   */\r\n  onScroll?(event: ScrollEvent): void;\r\n\r\n  /**\r\n   * Handle cell mousedown events.\r\n   * Used for initiating drag operations like range selection or column resize.\r\n   *\r\n   * @param event - Mouse event with cell context\r\n   * @returns `true` to indicate drag started (prevents text selection), `false`/`void` otherwise\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onCellMouseDown(event: CellMouseEvent): boolean | void {\r\n   *   if (event.rowIndex !== undefined && this.config.mode === 'range') {\r\n   *     this.startDragSelection(event.rowIndex, event.colIndex);\r\n   *     return true; // Prevent text selection\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onCellMouseDown?(event: CellMouseEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle cell mousemove events during drag operations.\r\n   * Only called when a drag is in progress (after mousedown returned true).\r\n   *\r\n   * @param event - Mouse event with current cell context\r\n   * @returns `true` to continue handling the drag, `false`/`void` otherwise\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onCellMouseMove(event: CellMouseEvent): boolean | void {\r\n   *   if (this.isDragging && event.rowIndex !== undefined) {\r\n   *     this.extendSelection(event.rowIndex, event.colIndex);\r\n   *     return true;\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onCellMouseMove?(event: CellMouseEvent): boolean | void;\r\n\r\n  /**\r\n   * Handle cell mouseup events to end drag operations.\r\n   *\r\n   * @param event - Mouse event with final cell context\r\n   * @returns `true` if drag was finalized, `false`/`void` otherwise\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * onCellMouseUp(event: CellMouseEvent): boolean | void {\r\n   *   if (this.isDragging) {\r\n   *     this.finalizeDragSelection();\r\n   *     this.isDragging = false;\r\n   *     return true;\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  onCellMouseUp?(event: CellMouseEvent): boolean | void;\r\n\r\n  /**\r\n   * Provide context menu items when right-clicking on the grid.\r\n   * Multiple plugins can contribute items; they are merged into a single menu.\r\n   *\r\n   * @param params - Context about where the menu was triggered (row, column, etc.)\r\n   * @returns Array of menu items to display\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * getContextMenuItems(params: ContextMenuParams): ContextMenuItem[] {\r\n   *   if (params.isHeader) {\r\n   *     return [\r\n   *       { id: 'sort-asc', label: 'Sort Ascending', action: () => this.sortAsc(params.field) },\r\n   *       { id: 'sort-desc', label: 'Sort Descending', action: () => this.sortDesc(params.field) },\r\n   *     ];\r\n   *   }\r\n   *   return [\r\n   *     { id: 'copy', label: 'Copy Cell', action: () => this.copyCell(params) },\r\n   *   ];\r\n   * }\r\n   * ```\r\n   */\r\n  getContextMenuItems?(params: ContextMenuParams): ContextMenuItem[];\r\n\r\n  // ===== Column State Hooks (override as needed) =====\r\n\r\n  /**\r\n   * Contribute plugin-specific state for a column.\r\n   * Called by the grid when collecting column state for serialization.\r\n   * Plugins can add their own properties to the column state.\r\n   *\r\n   * @param field - The field name of the column\r\n   * @returns Partial column state with plugin-specific properties, or undefined if no state to contribute\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * getColumnState(field: string): Partial<ColumnState> | undefined {\r\n   *   const filterModel = this.filterModels.get(field);\r\n   *   if (filterModel) {\r\n   *     // Uses module augmentation to add filter property to ColumnState\r\n   *     return { filter: filterModel } as Partial<ColumnState>;\r\n   *   }\r\n   *   return undefined;\r\n   * }\r\n   * ```\r\n   */\r\n  getColumnState?(field: string): Partial<ColumnState> | undefined;\r\n\r\n  /**\r\n   * Apply plugin-specific state to a column.\r\n   * Called by the grid when restoring column state from serialized data.\r\n   * Plugins should restore their internal state based on the provided state.\r\n   *\r\n   * @param field - The field name of the column\r\n   * @param state - The column state to apply (may contain plugin-specific properties)\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * applyColumnState(field: string, state: ColumnState): void {\r\n   *   // Check for filter property added via module augmentation\r\n   *   const filter = (state as any).filter;\r\n   *   if (filter) {\r\n   *     this.filterModels.set(field, filter);\r\n   *     this.applyFilter();\r\n   *   }\r\n   * }\r\n   * ```\r\n   */\r\n  applyColumnState?(field: string, state: ColumnState): void;\r\n\r\n  // ===== Shell Integration Hooks (override as needed) =====\r\n\r\n  /**\r\n   * Register a tool panel for this plugin.\r\n   * Return undefined if plugin has no tool panel.\r\n   * The shell will create a toolbar toggle button and render the panel content\r\n   * when the user opens the panel.\r\n   *\r\n   * @returns Tool panel definition, or undefined if plugin has no panel\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * getToolPanel(): ToolPanelDefinition | undefined {\r\n   *   return {\r\n   *     id: 'columns',\r\n   *     title: 'Columns',\r\n   *     icon: '☰',\r\n   *     tooltip: 'Show/hide columns',\r\n   *     order: 10,\r\n   *     render: (container) => {\r\n   *       this.renderColumnList(container);\r\n   *       return () => this.cleanup();\r\n   *     },\r\n   *   };\r\n   * }\r\n   * ```\r\n   */\r\n  getToolPanel?(): ToolPanelDefinition | undefined;\r\n\r\n  /**\r\n   * Register content for the shell header center section.\r\n   * Return undefined if plugin has no header content.\r\n   * Examples: search input, selection summary, status indicators.\r\n   *\r\n   * @returns Header content definition, or undefined if plugin has no header content\r\n   *\r\n   * @example\r\n   * ```ts\r\n   * getHeaderContent(): HeaderContentDefinition | undefined {\r\n   *   return {\r\n   *     id: 'quick-filter',\r\n   *     order: 10,\r\n   *     render: (container) => {\r\n   *       const input = document.createElement('input');\r\n   *       input.type = 'text';\r\n   *       input.placeholder = 'Search...';\r\n   *       input.addEventListener('input', this.handleInput);\r\n   *       container.appendChild(input);\r\n   *       return () => input.removeEventListener('input', this.handleInput);\r\n   *     },\r\n   *   };\r\n   * }\r\n   * ```\r\n   */\r\n  getHeaderContent?(): HeaderContentDefinition | undefined;\r\n}\r\n","/**\n * Column Reordering Core Logic\n *\n * Pure functions for column drag and reordering operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\n\n/**\n * Check if a column can be moved.\n * Respects lockPosition, suppressMovable, and sticky properties.\n * Sticky (pinned) columns cannot be reordered as they have fixed positions.\n *\n * @param column - The column configuration to check\n * @returns True if the column can be moved\n */\nexport function canMoveColumn<TRow = unknown>(column: ColumnConfig<TRow>): boolean {\n  // Sticky columns cannot be reordered - they have fixed left/right positions\n  // Check via meta since sticky is added by PinnedColumnsPlugin\n  const meta = column.meta ?? {};\n  const sticky = (meta as { sticky?: 'left' | 'right' }).sticky;\n  if (sticky === 'left' || sticky === 'right') {\n    return false;\n  }\n  // Check for lockPosition or suppressMovable properties in the column config\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\n}\n\n/**\n * Move a column from one position to another in the order array.\n *\n * @param columns - Array of field names in current order\n * @param fromIndex - The current index of the column to move\n * @param toIndex - The target index to move the column to\n * @returns New array with updated order\n */\nexport function moveColumn(columns: string[], fromIndex: number, toIndex: number): string[] {\n  if (fromIndex === toIndex) return columns;\n  if (fromIndex < 0 || fromIndex >= columns.length) return columns;\n  if (toIndex < 0 || toIndex > columns.length) return columns;\n\n  const result = [...columns];\n  const [removed] = result.splice(fromIndex, 1);\n  result.splice(toIndex, 0, removed);\n  return result;\n}\n\n/**\n * Calculate the drop index based on the current drag position.\n *\n * @param dragX - The current X position of the drag\n * @param headerRect - The bounding rect of the header container\n * @param columnWidths - Array of column widths in order\n * @returns The index where the column should be dropped\n */\nexport function getDropIndex(dragX: number, headerRect: DOMRect, columnWidths: number[]): number {\n  let x = headerRect.left;\n\n  for (let i = 0; i < columnWidths.length; i++) {\n    const mid = x + columnWidths[i] / 2;\n    if (dragX < mid) return i;\n    x += columnWidths[i];\n  }\n\n  return columnWidths.length;\n}\n\n/**\n * Reorder columns according to a specified order.\n * Columns not in the order array are appended at the end.\n *\n * @param columns - Array of column configurations\n * @param order - Array of field names specifying the desired order\n * @returns New array of columns in the specified order\n */\nexport function reorderColumns<TRow = unknown>(columns: ColumnConfig<TRow>[], order: string[]): ColumnConfig<TRow>[] {\n  const columnMap = new Map<string, ColumnConfig<TRow>>(columns.map((c) => [c.field as string, c]));\n  const reordered: ColumnConfig<TRow>[] = [];\n\n  // Add columns in specified order\n  for (const field of order) {\n    const col = columnMap.get(field);\n    if (col) {\n      reordered.push(col);\n      columnMap.delete(field);\n    }\n  }\n\n  // Add any remaining columns not in order\n  for (const col of columnMap.values()) {\n    reordered.push(col);\n  }\n\n  return reordered;\n}\n","/**\r\n * Column Reordering Plugin (Class-based)\r\n *\r\n * Provides drag-and-drop column reordering functionality for tbw-grid.\r\n * Supports keyboard and mouse interactions with visual feedback.\r\n */\r\n\r\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\r\nimport { canMoveColumn, moveColumn } from './column-drag';\r\nimport type { ColumnMoveDetail, ReorderConfig } from './types';\r\n\r\n/** Extended grid interface with column order methods */\r\ninterface GridWithColumnOrder {\r\n  setColumnOrder(order: string[]): void;\r\n  getColumnOrder(): string[];\r\n  requestStateChange?: () => void;\r\n}\r\n\r\n/**\r\n * Column Reordering Plugin for tbw-grid\r\n *\r\n * @example\r\n * ```ts\r\n * new ReorderPlugin({\r\n *   enabled: true,\r\n *   animation: true,\r\n *   animationDuration: 200,\r\n * })\r\n * ```\r\n */\r\nexport class ReorderPlugin extends BaseGridPlugin<ReorderConfig> {\r\n  readonly name = 'reorder';\r\n  override readonly version = '1.0.0';\r\n\r\n  protected override get defaultConfig(): Partial<ReorderConfig> {\r\n    return {\r\n      enabled: true,\r\n      animation: true,\r\n      animationDuration: 200,\r\n    };\r\n  }\r\n\r\n  // ===== Internal State =====\r\n  private isDragging = false;\r\n  private draggedField: string | null = null;\r\n  private draggedIndex: number | null = null;\r\n  private dropIndex: number | null = null;\r\n  private boundReorderRequestHandler: ((e: Event) => void) | null = null;\r\n\r\n  // ===== Lifecycle =====\r\n\r\n  override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\r\n    super.attach(grid);\r\n\r\n    // Listen for reorder requests from other plugins (e.g., VisibilityPlugin)\r\n    this.boundReorderRequestHandler = (e: Event) => {\r\n      const detail = (e as CustomEvent).detail;\r\n      if (detail?.field && typeof detail.toIndex === 'number') {\r\n        this.moveColumn(detail.field, detail.toIndex);\r\n      }\r\n    };\r\n    (grid as unknown as HTMLElement).addEventListener('column-reorder-request', this.boundReorderRequestHandler);\r\n  }\r\n\r\n  override detach(): void {\r\n    // Remove event listener\r\n    if (this.boundReorderRequestHandler && this.grid) {\r\n      (this.grid as unknown as HTMLElement).removeEventListener(\r\n        'column-reorder-request',\r\n        this.boundReorderRequestHandler\r\n      );\r\n      this.boundReorderRequestHandler = null;\r\n    }\r\n\r\n    this.isDragging = false;\r\n    this.draggedField = null;\r\n    this.draggedIndex = null;\r\n    this.dropIndex = null;\r\n  }\r\n\r\n  // ===== Hooks =====\r\n  // Note: No processColumns hook needed - we directly update the grid's column order\r\n\r\n  override afterRender(): void {\r\n    if (!this.config.enabled) return;\r\n\r\n    const shadowRoot = this.shadowRoot;\r\n    if (!shadowRoot) return;\r\n\r\n    const headers = shadowRoot.querySelectorAll('.header-row > .cell');\r\n\r\n    headers.forEach((header) => {\r\n      const headerEl = header as HTMLElement;\r\n      const field = headerEl.getAttribute('data-field');\r\n      if (!field) return;\r\n\r\n      const column = this.columns.find((c) => c.field === field);\r\n      if (!column || !canMoveColumn(column)) {\r\n        headerEl.draggable = false;\r\n        return;\r\n      }\r\n\r\n      headerEl.draggable = true;\r\n\r\n      // Remove existing listeners to prevent duplicates\r\n      if (headerEl.getAttribute('data-dragstart-bound')) return;\r\n      headerEl.setAttribute('data-dragstart-bound', 'true');\r\n\r\n      headerEl.addEventListener('dragstart', (e: DragEvent) => {\r\n        const currentOrder = this.getColumnOrder();\r\n        const orderIndex = currentOrder.indexOf(field);\r\n        this.isDragging = true;\r\n        this.draggedField = field;\r\n        this.draggedIndex = orderIndex;\r\n\r\n        if (e.dataTransfer) {\r\n          e.dataTransfer.effectAllowed = 'move';\r\n          e.dataTransfer.setData('text/plain', field);\r\n        }\r\n\r\n        headerEl.classList.add('dragging');\r\n      });\r\n\r\n      headerEl.addEventListener('dragend', () => {\r\n        this.isDragging = false;\r\n        this.draggedField = null;\r\n        this.draggedIndex = null;\r\n        this.dropIndex = null;\r\n\r\n        shadowRoot.querySelectorAll('.header-row > .cell').forEach((h) => {\r\n          h.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\r\n        });\r\n      });\r\n\r\n      headerEl.addEventListener('dragover', (e: DragEvent) => {\r\n        e.preventDefault();\r\n        if (!this.isDragging || this.draggedField === field) return;\r\n\r\n        const rect = headerEl.getBoundingClientRect();\r\n        const midX = rect.left + rect.width / 2;\r\n\r\n        const currentOrder = this.getColumnOrder();\r\n        const orderIndex = currentOrder.indexOf(field);\r\n        this.dropIndex = e.clientX < midX ? orderIndex : orderIndex + 1;\r\n\r\n        headerEl.classList.add('drop-target');\r\n        headerEl.classList.toggle('drop-before', e.clientX < midX);\r\n        headerEl.classList.toggle('drop-after', e.clientX >= midX);\r\n      });\r\n\r\n      headerEl.addEventListener('dragleave', () => {\r\n        headerEl.classList.remove('drop-target', 'drop-before', 'drop-after');\r\n      });\r\n\r\n      headerEl.addEventListener('drop', (e: DragEvent) => {\r\n        e.preventDefault();\r\n        const draggedField = this.draggedField;\r\n        const draggedIndex = this.draggedIndex;\r\n        const dropIndex = this.dropIndex;\r\n\r\n        if (!this.isDragging || draggedField === null || draggedIndex === null || dropIndex === null) {\r\n          return;\r\n        }\r\n\r\n        const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\r\n        const currentOrder = this.getColumnOrder();\r\n        const newOrder = moveColumn(currentOrder, draggedIndex, effectiveToIndex);\r\n\r\n        const detail: ColumnMoveDetail = {\r\n          field: draggedField,\r\n          fromIndex: draggedIndex,\r\n          toIndex: effectiveToIndex,\r\n          columnOrder: newOrder,\r\n        };\r\n\r\n        // Directly update the grid's column order\r\n        (this.grid as unknown as GridWithColumnOrder).setColumnOrder(newOrder);\r\n\r\n        this.emit('column-move', detail);\r\n        // Trigger state change after reorder\r\n        (this.grid as unknown as GridWithColumnOrder).requestStateChange?.();\r\n      });\r\n    });\r\n  }\r\n\r\n  // ===== Public API =====\r\n\r\n  /**\r\n   * Get the current column order from the grid.\r\n   * @returns Array of field names in display order\r\n   */\r\n  getColumnOrder(): string[] {\r\n    return (this.grid as unknown as GridWithColumnOrder).getColumnOrder();\r\n  }\r\n\r\n  /**\r\n   * Move a column to a new position.\r\n   * @param field - The field name of the column to move\r\n   * @param toIndex - The target index\r\n   */\r\n  moveColumn(field: string, toIndex: number): void {\r\n    const currentOrder = this.getColumnOrder();\r\n    const fromIndex = currentOrder.indexOf(field);\r\n    if (fromIndex === -1) return;\r\n\r\n    const newOrder = moveColumn(currentOrder, fromIndex, toIndex);\r\n\r\n    // Directly update the grid's column order\r\n    (this.grid as unknown as GridWithColumnOrder).setColumnOrder(newOrder);\r\n\r\n    this.emit<ColumnMoveDetail>('column-move', {\r\n      field,\r\n      fromIndex,\r\n      toIndex,\r\n      columnOrder: newOrder,\r\n    });\r\n\r\n    // Trigger state change after reorder\r\n    (this.grid as unknown as GridWithColumnOrder).requestStateChange?.();\r\n  }\r\n\r\n  /**\r\n   * Set a specific column order.\r\n   * @param order - Array of field names in desired order\r\n   */\r\n  setColumnOrder(order: string[]): void {\r\n    (this.grid as unknown as GridWithColumnOrder).setColumnOrder(order);\r\n    // Trigger state change after reorder\r\n    (this.grid as unknown as GridWithColumnOrder).requestStateChange?.();\r\n  }\r\n\r\n  /**\r\n   * Reset column order to the original configuration order.\r\n   */\r\n  resetColumnOrder(): void {\r\n    const originalOrder = this.columns.map((c) => c.field);\r\n    (this.grid as unknown as GridWithColumnOrder).setColumnOrder(originalOrder);\r\n    // Trigger state change after reset\r\n    (this.grid as unknown as GridWithColumnOrder).requestStateChange?.();\r\n  }\r\n\r\n  // ===== Styles =====\r\n\r\n  override readonly styles = `\r\n    .header-row > .cell[draggable=\"true\"] {\r\n      cursor: grab;\r\n      position: relative;\r\n    }\r\n    .header-row > .cell.dragging {\r\n      opacity: 0.5;\r\n      cursor: grabbing;\r\n    }\r\n    .header-row > .cell.drop-before::before {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: 2px;\r\n      background: var(--tbw-reorder-indicator, var(--tbw-color-accent));\r\n      z-index: 1;\r\n    }\r\n    .header-row > .cell.drop-after::after {\r\n      content: '';\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n      bottom: 0;\r\n      width: 2px;\r\n      background: var(--tbw-reorder-indicator, var(--tbw-color-accent));\r\n      z-index: 1;\r\n    }\r\n  `;\r\n}\r\n"],"names":["BaseGridPlugin","config","grid","PluginClass","eventName","detail","message","canMoveColumn","column","meta","sticky","moveColumn","columns","fromIndex","toIndex","result","removed","ReorderPlugin","e","shadowRoot","header","headerEl","field","c","orderIndex","h","rect","midX","draggedField","draggedIndex","dropIndex","effectiveToIndex","currentOrder","newOrder","order","originalOrder"],"mappings":"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"}

package/lib/plugins/selection/index.js

@@ -0,0 +1,426 @@
+class w {
+  /** Plugin version - override in subclass if needed */
+  version = "1.0.0";
+  /** CSS styles to inject into the grid's shadow DOM */
+  styles;
+  /** Custom cell renderers keyed by type name */
+  cellRenderers;
+  /** Custom header renderers keyed by type name */
+  headerRenderers;
+  /** Custom cell editors keyed by type name */
+  cellEditors;
+  /** The grid instance this plugin is attached to */
+  grid;
+  /** Plugin configuration - merged with defaults in attach() */
+  config;
+  /** User-provided configuration from constructor */
+  userConfig;
+  /**
+   * Default configuration - subclasses should override this getter.
+   * Note: This must be a getter (not property initializer) for proper inheritance
+   * since property initializers run after parent constructor.
+   */
+  get defaultConfig() {
+    return {};
+  }
+  constructor(e = {}) {
+    this.userConfig = e;
+  }
+  /**
+   * Called when the plugin is attached to a grid.
+   * Override to set up event listeners, initialize state, etc.
+   */
+  attach(e) {
+    this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+  }
+  /**
+   * Called when the plugin is detached from a grid.
+   * Override to clean up event listeners, timers, etc.
+   */
+  detach() {
+  }
+  /**
+   * Get another plugin instance from the same grid.
+   * Use for inter-plugin communication.
+   */
+  getPlugin(e) {
+    return this.grid?.getPlugin(e);
+  }
+  /**
+   * Emit a custom event from the grid.
+   */
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
+  }
+  /**
+   * Request a re-render of the grid.
+   */
+  requestRender() {
+    this.grid?.requestRender?.();
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Use this instead of requestRender() when only CSS classes need updating.
+   */
+  requestAfterRender() {
+    this.grid?.requestAfterRender?.();
+  }
+  /**
+   * Get the current rows from the grid.
+   */
+  get rows() {
+    return this.grid?.rows ?? [];
+  }
+  /**
+   * Get the original unfiltered/unprocessed rows from the grid.
+   * Use this when you need all source data regardless of active filters.
+   */
+  get sourceRows() {
+    return this.grid?.sourceRows ?? [];
+  }
+  /**
+   * Get the current columns from the grid.
+   */
+  get columns() {
+    return this.grid?.columns ?? [];
+  }
+  /**
+   * Get only visible columns from the grid (excludes hidden).
+   * Use this for rendering that needs to match the grid template.
+   */
+  get visibleColumns() {
+    return this.grid?.visibleColumns ?? [];
+  }
+  /**
+   * Get the shadow root of the grid.
+   */
+  get shadowRoot() {
+    return this.grid?.shadowRoot ?? null;
+  }
+  /**
+   * Log a warning message.
+   */
+  warn(e) {
+    console.warn(`[tbw-grid:${this.name}] ${e}`);
+  }
+}
+function d(s) {
+  return {
+    startRow: Math.min(s.startRow, s.endRow),
+    startCol: Math.min(s.startCol, s.endCol),
+    endRow: Math.max(s.startRow, s.endRow),
+    endCol: Math.max(s.startCol, s.endCol)
+  };
+}
+function R(s) {
+  const e = d(s);
+  return {
+    from: { row: e.startRow, col: e.startCol },
+    to: { row: e.endRow, col: e.endCol }
+  };
+}
+function g(s) {
+  return s.map(R);
+}
+function C(s, e, t) {
+  const r = d(t);
+  return s >= r.startRow && s <= r.endRow && e >= r.startCol && e <= r.endCol;
+}
+function u(s, e, t) {
+  return t.some((r) => C(s, e, r));
+}
+function m(s) {
+  const e = [], t = d(s);
+  for (let r = t.startRow; r <= t.endRow; r++)
+    for (let n = t.startCol; n <= t.endCol; n++)
+      e.push({ row: r, col: n });
+  return e;
+}
+function b(s) {
+  const e = /* @__PURE__ */ new Map();
+  for (const t of s)
+    for (const r of m(t))
+      e.set(`${r.row},${r.col}`, r);
+  return [...e.values()];
+}
+function f(s, e) {
+  return {
+    startRow: s.row,
+    startCol: s.col,
+    endRow: e.row,
+    endCol: e.col
+  };
+}
+function A(s, e, t) {
+  if (s === "cell" && e.selectedCell)
+    return {
+      mode: s,
+      ranges: [
+        {
+          from: { row: e.selectedCell.row, col: e.selectedCell.col },
+          to: { row: e.selectedCell.row, col: e.selectedCell.col }
+        }
+      ]
+    };
+  if (s === "row" && e.selected.size > 0) {
+    const r = [...e.selected].map((n) => ({
+      from: { row: n, col: 0 },
+      to: { row: n, col: t - 1 }
+    }));
+    return { mode: s, ranges: r };
+  }
+  return s === "range" && e.ranges.length > 0 ? { mode: s, ranges: g(e.ranges) } : { mode: s, ranges: [] };
+}
+class p extends w {
+  name = "selection";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      mode: "cell"
+    };
+  }
+  // ===== Internal State =====
+  /** Row selection state (row mode) */
+  selected = /* @__PURE__ */ new Set();
+  lastSelected = null;
+  anchor = null;
+  /** Range selection state (range mode) */
+  ranges = [];
+  activeRange = null;
+  cellAnchor = null;
+  isDragging = !1;
+  /** Cell selection state (cell mode) */
+  selectedCell = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
+  }
+  // ===== Event Handlers =====
+  onCellClick(e) {
+    const { rowIndex: t, colIndex: r, originalEvent: n } = e, { mode: o } = this.config;
+    if (o === "cell")
+      return this.selectedCell = { row: t, col: r }, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
+    if (o === "row")
+      return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
+    if (o === "range") {
+      const i = n.shiftKey, a = n.ctrlKey || n.metaKey;
+      if (i && this.cellAnchor) {
+        const l = f(this.cellAnchor, { row: t, col: r });
+        a ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = l : this.ranges.push(l) : this.ranges = [l], this.activeRange = l;
+      } else if (a) {
+        const l = {
+          startRow: t,
+          startCol: r,
+          endRow: t,
+          endCol: r
+        };
+        this.ranges.push(l), this.activeRange = l, this.cellAnchor = { row: t, col: r };
+      } else {
+        const l = {
+          startRow: t,
+          startCol: r,
+          endRow: t,
+          endCol: r
+        };
+        this.ranges = [l], this.activeRange = l, this.cellAnchor = { row: t, col: r };
+      }
+      return this.emit("selection-change", this.#e()), this.requestAfterRender(), !1;
+    }
+    return !1;
+  }
+  onKeyDown(e) {
+    const { mode: t } = this.config;
+    if (e.key === "Escape")
+      return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+    if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
+      const r = this.rows.length, n = this.columns.length;
+      if (r > 0 && n > 0) {
+        const o = {
+          startRow: 0,
+          startCol: 0,
+          endRow: r - 1,
+          endCol: n - 1
+        };
+        return this.ranges = [o], this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+      }
+    }
+    return !1;
+  }
+  onCellMouseDown(e) {
+    if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
+      return;
+    this.isDragging = !0;
+    const t = e.rowIndex, r = e.colIndex;
+    this.cellAnchor = { row: t, col: r }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
+    const o = {
+      startRow: t,
+      startCol: r,
+      endRow: t,
+      endCol: r
+    };
+    return this.ranges.push(o), this.activeRange = o, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+  }
+  onCellMouseMove(e) {
+    if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
+    const t = f(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
+    return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#e()), this.requestAfterRender(), !0;
+  }
+  onCellMouseUp(e) {
+    if (this.config.mode === "range" && this.isDragging)
+      return this.isDragging = !1, !0;
+  }
+  afterRender() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.children[0], { mode: r } = this.config;
+    this.grid.setAttribute("data-selection-mode", r), t && t.classList.toggle("selecting", this.isDragging), e.querySelectorAll(".cell").forEach((i) => {
+      i.classList.remove("selected", "top", "bottom", "first", "last");
+    });
+    const o = e.querySelectorAll(".data-grid-row");
+    if (o.forEach((i) => {
+      i.classList.remove("selected");
+    }), r === "row" && (o.forEach((i) => i.classList.remove("row-focus")), o.forEach((i) => {
+      const a = i.querySelector(".cell[data-row]"), l = parseInt(a?.getAttribute("data-row") ?? "-1", 10);
+      l >= 0 && this.selected.has(l) && i.classList.add("selected", "row-focus");
+    })), r === "range" && this.ranges.length > 0) {
+      const i = this.activeRange ? d(this.activeRange) : null;
+      e.querySelectorAll(".cell[data-row][data-col]").forEach((l) => {
+        const c = parseInt(l.getAttribute("data-row") ?? "-1", 10), h = parseInt(l.getAttribute("data-col") ?? "-1", 10);
+        c >= 0 && h >= 0 && u(c, h, this.ranges) && (l.classList.add("selected"), i && (c === i.startRow && l.classList.add("top"), c === i.endRow && l.classList.add("bottom"), h === i.startCol && l.classList.add("first"), h === i.endCol && l.classList.add("last")));
+      });
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Get the selected cell (cell mode only).
+   */
+  getSelectedCell() {
+    return this.selectedCell;
+  }
+  /**
+   * Get all selected row indices (row mode).
+   */
+  getSelectedRows() {
+    return [...this.selected];
+  }
+  /**
+   * Get all selected cell ranges in public format.
+   */
+  getRanges() {
+    return g(this.ranges);
+  }
+  /**
+   * Get all selected cells across all ranges.
+   */
+  getSelectedCells() {
+    return b(this.ranges);
+  }
+  /**
+   * Check if a specific cell is in range selection.
+   */
+  isCellSelected(e, t) {
+    return u(e, t, this.ranges);
+  }
+  /**
+   * Clear all selection.
+   */
+  clearSelection() {
+    this.selectedCell = null, this.selected.clear(), this.anchor = null, this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.emit("selection-change", { mode: this.config.mode, ranges: [] }), this.requestAfterRender();
+  }
+  /**
+   * Set selected ranges programmatically.
+   */
+  setRanges(e) {
+    this.ranges = e.map((t) => ({
+      startRow: t.from.row,
+      startCol: t.from.col,
+      endRow: t.to.row,
+      endCol: t.to.col
+    })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
+      mode: this.config.mode,
+      ranges: g(this.ranges)
+    }), this.requestAfterRender();
+  }
+  // ===== Private Helpers =====
+  #e() {
+    return A(
+      this.config.mode,
+      {
+        selectedCell: this.selectedCell,
+        selected: this.selected,
+        ranges: this.ranges
+      },
+      this.columns.length
+    );
+  }
+  // ===== Styles =====
+  styles = `
+    /* Prevent text selection during range drag */
+    :host .selecting .data-grid-row > .cell {
+      user-select: none;
+    }
+
+    /* Row selection - use accent color for row focus */
+    :host .data-grid-row.row-focus {
+      background-color: var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));
+    }
+
+    /* Disable cell-focus outline in row mode - row is the focus unit */
+    :host([data-selection-mode="row"]) .cell-focus {
+      outline: none;
+    }
+
+    /* Selection cell styles - for range mode */
+    :host .data-grid-row > .cell.selected {
+      background-color: var(--tbw-range-selection-bg);
+    }
+    :host .data-grid-row > .cell.selected.top {
+      border-top: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.bottom {
+      border-bottom: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.first {
+      border-left: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.last {
+      border-right: 2px solid var(--tbw-range-border-color);
+    }
+  `;
+}
+function y(s, e, t, r) {
+  const n = new Set(s.selected);
+  let o = s.anchor;
+  if (t === "single")
+    n.clear(), n.add(e), o = e;
+  else if (t === "multiple") {
+    const i = r.ctrlKey || r.metaKey;
+    if (r.shiftKey && s.anchor !== null) {
+      const a = Math.min(s.anchor, e), l = Math.max(s.anchor, e);
+      for (let c = a; c <= l; c++)
+        n.add(c);
+    } else i ? (n.has(e) ? n.delete(e) : n.add(e), o = e) : (n.clear(), n.add(e), o = e);
+  }
+  return { selected: n, lastSelected: e, anchor: o };
+}
+function x(s) {
+  const e = /* @__PURE__ */ new Set();
+  for (let t = 0; t < s; t++)
+    e.add(t);
+  return e;
+}
+function S(s, e) {
+  const t = [], r = [];
+  for (const n of e)
+    s.has(n) || t.push(n);
+  for (const n of s)
+    e.has(n) || r.push(n);
+  return { added: t, removed: r };
+}
+export {
+  p as SelectionPlugin,
+  S as computeSelectionDiff,
+  y as handleRowClick,
+  x as selectAll
+};
+//# sourceMappingURL=index.js.map