@toolbox-web/grid 0.0.1

package/lib/plugins/column-virtualization/index.js

@@ -0,0 +1,255 @@
+class m {
+  /** 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(t = {}) {
+    this.userConfig = t;
+  }
+  /**
+   * Called when the plugin is attached to a grid.
+   * Override to set up event listeners, initialize state, etc.
+   */
+  attach(t) {
+    this.grid = t, 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(t) {
+    return this.grid?.getPlugin(t);
+  }
+  /**
+   * Emit a custom event from the grid.
+   */
+  emit(t, e) {
+    this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: e, 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(t) {
+    console.warn(`[tbw-grid:${this.name}] ${t}`);
+  }
+}
+const d = 100;
+function u(s) {
+  if (s == null)
+    return d;
+  if (typeof s == "number")
+    return s;
+  const t = parseFloat(s);
+  return isNaN(t) ? d : t;
+}
+function c(s) {
+  return s.map((t) => u(t.width));
+}
+function f(s) {
+  const t = [];
+  let e = 0;
+  for (const i of s)
+    t.push(e), e += u(i.width);
+  return t;
+}
+function g(s) {
+  return s.reduce((t, e) => t + u(e.width), 0);
+}
+function w(s, t, e, i, o) {
+  const r = e.length;
+  if (r === 0)
+    return { startCol: 0, endCol: 0, visibleColumns: [] };
+  let n = b(s, e, i);
+  n = Math.max(0, n - o);
+  const C = s + t;
+  let h = n;
+  for (let l = n; l < r; l++) {
+    if (e[l] >= C) {
+      h = l - 1;
+      break;
+    }
+    h = l;
+  }
+  h = Math.min(r - 1, h + o);
+  const a = [];
+  for (let l = n; l <= h; l++)
+    a.push(l);
+  return { startCol: n, endCol: h, visibleColumns: a };
+}
+function b(s, t, e) {
+  let i = 0, o = t.length - 1;
+  for (; i < o; ) {
+    const r = Math.floor((i + o) / 2);
+    t[r] + e[r] <= s ? i = r + 1 : o = r;
+  }
+  return i;
+}
+function p(s, t, e) {
+  return e ? s > t : !1;
+}
+class R extends m {
+  name = "columnVirtualization";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      autoEnable: !0,
+      threshold: 30,
+      overscan: 3
+    };
+  }
+  // ===== Internal State =====
+  isVirtualized = !1;
+  startCol = 0;
+  endCol = 0;
+  scrollLeft = 0;
+  totalWidth = 0;
+  columnWidths = [];
+  columnOffsets = [];
+  // ===== Lifecycle =====
+  attach(t) {
+    super.attach(t);
+    const e = this.columns;
+    this.columnWidths = c(e), this.columnOffsets = f(e), this.totalWidth = g(e), this.endCol = e.length - 1;
+  }
+  detach() {
+    this.columnWidths = [], this.columnOffsets = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
+  }
+  // ===== Hooks =====
+  processColumns(t) {
+    const e = this.config.enabled && p(t.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
+    if (this.isVirtualized = e ?? !1, this.columnWidths = c(t), this.columnOffsets = f(t), this.totalWidth = g(t), !e)
+      return this.startCol = 0, this.endCol = t.length - 1, [...t];
+    const i = this.grid.clientWidth || 800, o = w(
+      this.scrollLeft,
+      i,
+      this.columnOffsets,
+      this.columnWidths,
+      this.config.overscan ?? 3
+    );
+    return this.startCol = o.startCol, this.endCol = o.endCol, o.visibleColumns.map((r) => t[r]);
+  }
+  afterRender() {
+    if (!this.isVirtualized) return;
+    const t = this.shadowRoot;
+    if (!t) return;
+    const e = this.columnOffsets[this.startCol] ?? 0, i = t.querySelector(".header-row"), o = t.querySelectorAll(".data-grid-row");
+    i && (i.style.paddingLeft = `${e}px`), o.forEach((n) => {
+      n.style.paddingLeft = `${e}px`;
+    });
+    const r = t.querySelector(".rows-viewport .rows");
+    r && (r.style.width = `${this.totalWidth}px`);
+  }
+  onScroll(t) {
+    !this.isVirtualized || Math.abs(t.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = t.scrollLeft, this.requestRender());
+  }
+  // ===== Public API =====
+  /**
+   * Check if column virtualization is currently active.
+   */
+  getIsVirtualized() {
+    return this.isVirtualized;
+  }
+  /**
+   * Get the current visible column range.
+   */
+  getVisibleColumnRange() {
+    return { start: this.startCol, end: this.endCol };
+  }
+  /**
+   * Scroll the grid to bring a specific column into view.
+   * @param columnIndex - Index of the column to scroll to
+   */
+  scrollToColumn(t) {
+    const e = this.columnOffsets[t] ?? 0, i = this.grid;
+    i.scrollLeft = e;
+  }
+  /**
+   * Get the left offset for a specific column.
+   * @param columnIndex - Index of the column
+   */
+  getColumnOffset(t) {
+    return this.columnOffsets[t] ?? 0;
+  }
+  /**
+   * Get the total width of all columns.
+   */
+  getTotalWidth() {
+    return this.totalWidth;
+  }
+}
+export {
+  R as ColumnVirtualizationPlugin
+};
+//# sourceMappingURL=index.js.map

package/lib/plugins/column-virtualization/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/column-virtualization/column-virtualization.ts","../../../../../../libs/grid/src/lib/plugins/column-virtualization/ColumnVirtualizationPlugin.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 Virtualization Core Logic\n *\n * Pure functions for horizontal column virtualization operations.\n */\n\nimport type { ColumnConfig } from '../../core/types';\nimport type { ColumnVirtualizationViewport } from './types';\n\n/** Default column width when not specified */\nconst DEFAULT_COLUMN_WIDTH = 100;\n\n/**\n * Parse a column width value to pixels.\n * Handles number (px) and string formats.\n *\n * @param width - The width value from column config\n * @returns Width in pixels\n */\nexport function parseColumnWidth(width: string | number | undefined): number {\n  if (width === undefined || width === null) {\n    return DEFAULT_COLUMN_WIDTH;\n  }\n\n  if (typeof width === 'number') {\n    return width;\n  }\n\n  // Handle string values - extract numeric part\n  const numeric = parseFloat(width);\n  if (!isNaN(numeric)) {\n    return numeric;\n  }\n\n  return DEFAULT_COLUMN_WIDTH;\n}\n\n/**\n * Get array of column widths in pixels.\n *\n * @param columns - Column configurations\n * @returns Array of widths in pixels\n */\nexport function getColumnWidths(columns: readonly ColumnConfig[]): number[] {\n  return columns.map((col) => parseColumnWidth(col.width));\n}\n\n/**\n * Compute cumulative left offsets for each column.\n *\n * @param columns - Column configurations\n * @returns Array of left offsets in pixels\n */\nexport function computeColumnOffsets(columns: readonly ColumnConfig[]): number[] {\n  const offsets: number[] = [];\n  let offset = 0;\n\n  for (const col of columns) {\n    offsets.push(offset);\n    offset += parseColumnWidth(col.width);\n  }\n\n  return offsets;\n}\n\n/**\n * Compute total width of all columns.\n *\n * @param columns - Column configurations\n * @returns Total width in pixels\n */\nexport function computeTotalWidth(columns: readonly ColumnConfig[]): number {\n  return columns.reduce((sum, col) => sum + parseColumnWidth(col.width), 0);\n}\n\n/**\n * Find the visible column range based on scroll position.\n * Uses binary search for efficient lookup in large column sets.\n *\n * @param scrollLeft - Current horizontal scroll position\n * @param viewportWidth - Width of the visible viewport\n * @param columnOffsets - Array of column left offsets\n * @param columnWidths - Array of column widths\n * @param overscan - Number of extra columns to render on each side\n * @returns Viewport information with visible column indices\n */\nexport function getVisibleColumnRange(\n  scrollLeft: number,\n  viewportWidth: number,\n  columnOffsets: number[],\n  columnWidths: number[],\n  overscan: number\n): ColumnVirtualizationViewport {\n  const columnCount = columnOffsets.length;\n\n  if (columnCount === 0) {\n    return { startCol: 0, endCol: 0, visibleColumns: [] };\n  }\n\n  // Binary search for first visible column\n  let startCol = binarySearchFirstVisible(scrollLeft, columnOffsets, columnWidths);\n  startCol = Math.max(0, startCol - overscan);\n\n  // Find last visible column (without overscan first)\n  const rightEdge = scrollLeft + viewportWidth;\n  let endCol = startCol;\n\n  for (let i = startCol; i < columnCount; i++) {\n    if (columnOffsets[i] >= rightEdge) {\n      endCol = i - 1;\n      break;\n    }\n    endCol = i;\n  }\n\n  // Apply overscan to end (only once)\n  endCol = Math.min(columnCount - 1, endCol + overscan);\n\n  // Build array of visible column indices\n  const visibleColumns: number[] = [];\n  for (let i = startCol; i <= endCol; i++) {\n    visibleColumns.push(i);\n  }\n\n  return { startCol, endCol, visibleColumns };\n}\n\n/**\n * Binary search to find the first column that is visible.\n *\n * @param scrollLeft - Current scroll position\n * @param columnOffsets - Array of column offsets\n * @param columnWidths - Array of column widths\n * @returns Index of first visible column\n */\nfunction binarySearchFirstVisible(scrollLeft: number, columnOffsets: number[], columnWidths: number[]): number {\n  let low = 0;\n  let high = columnOffsets.length - 1;\n\n  while (low < high) {\n    const mid = Math.floor((low + high) / 2);\n    const colRight = columnOffsets[mid] + columnWidths[mid];\n\n    if (colRight <= scrollLeft) {\n      low = mid + 1;\n    } else {\n      high = mid;\n    }\n  }\n\n  return low;\n}\n\n/**\n * Determine if column virtualization should be active.\n *\n * @param columnCount - Number of columns\n * @param threshold - Column count threshold\n * @param autoEnable - Whether auto-enable is configured\n * @returns True if virtualization should be active\n */\nexport function shouldVirtualize(columnCount: number, threshold: number, autoEnable: boolean): boolean {\n  if (!autoEnable) return false;\n  return columnCount > threshold;\n}\n","/**\n * Column Virtualization Plugin (Class-based)\n *\n * Provides horizontal column virtualization for grids with many columns.\n * Significantly improves rendering performance when dealing with >30 columns.\n */\n\nimport { BaseGridPlugin, ScrollEvent } from '../../core/plugin/base-plugin';\nimport type { ColumnConfig } from '../../core/types';\nimport {\n  computeColumnOffsets,\n  computeTotalWidth,\n  getColumnWidths,\n  getVisibleColumnRange,\n  shouldVirtualize,\n} from './column-virtualization';\nimport type { ColumnVirtualizationConfig } from './types';\n\n/**\n * Column Virtualization Plugin for tbw-grid\n *\n * @example\n * ```ts\n * new ColumnVirtualizationPlugin({ threshold: 30, overscan: 3 })\n * ```\n */\nexport class ColumnVirtualizationPlugin extends BaseGridPlugin<ColumnVirtualizationConfig> {\n  readonly name = 'columnVirtualization';\n  override readonly version = '1.0.0';\n\n  protected override get defaultConfig(): Partial<ColumnVirtualizationConfig> {\n    return {\n      enabled: true,\n      autoEnable: true,\n      threshold: 30,\n      overscan: 3,\n    };\n  }\n\n  // ===== Internal State =====\n  private isVirtualized = false;\n  private startCol = 0;\n  private endCol = 0;\n  private scrollLeft = 0;\n  private totalWidth = 0;\n  private columnWidths: number[] = [];\n  private columnOffsets: number[] = [];\n\n  // ===== Lifecycle =====\n\n  override attach(grid: import('../../core/plugin/base-plugin').GridElement): void {\n    super.attach(grid);\n\n    // Initialize state from current columns\n    const columns = this.columns;\n    this.columnWidths = getColumnWidths(columns);\n    this.columnOffsets = computeColumnOffsets(columns);\n    this.totalWidth = computeTotalWidth(columns);\n    this.endCol = columns.length - 1;\n  }\n\n  override detach(): void {\n    this.columnWidths = [];\n    this.columnOffsets = [];\n    this.isVirtualized = false;\n    this.startCol = 0;\n    this.endCol = 0;\n    this.scrollLeft = 0;\n    this.totalWidth = 0;\n  }\n\n  // ===== Hooks =====\n\n  override processColumns(columns: readonly ColumnConfig[]): ColumnConfig[] {\n    const isVirtualized =\n      this.config.enabled &&\n      shouldVirtualize(columns.length, this.config.threshold ?? 30, this.config.autoEnable ?? true);\n\n    // Update state with current column metrics\n    this.isVirtualized = isVirtualized ?? false;\n    this.columnWidths = getColumnWidths(columns);\n    this.columnOffsets = computeColumnOffsets(columns);\n    this.totalWidth = computeTotalWidth(columns);\n\n    if (!isVirtualized) {\n      this.startCol = 0;\n      this.endCol = columns.length - 1;\n      return [...columns];\n    }\n\n    // Get viewport width from grid element\n    const viewportWidth = (this.grid as unknown as HTMLElement).clientWidth || 800;\n    const viewport = getVisibleColumnRange(\n      this.scrollLeft,\n      viewportWidth,\n      this.columnOffsets,\n      this.columnWidths,\n      this.config.overscan ?? 3\n    );\n\n    this.startCol = viewport.startCol;\n    this.endCol = viewport.endCol;\n\n    // Return only visible columns\n    return viewport.visibleColumns.map((i) => columns[i]);\n  }\n\n  override afterRender(): void {\n    if (!this.isVirtualized) return;\n\n    const shadowRoot = this.shadowRoot;\n    if (!shadowRoot) return;\n\n    // Apply left padding to offset scrolled-out columns\n    const leftPadding = this.columnOffsets[this.startCol] ?? 0;\n\n    const headerRow = shadowRoot.querySelector('.header-row');\n    const bodyRows = shadowRoot.querySelectorAll('.data-grid-row');\n\n    if (headerRow) {\n      (headerRow as HTMLElement).style.paddingLeft = `${leftPadding}px`;\n    }\n\n    bodyRows.forEach((row) => {\n      (row as HTMLElement).style.paddingLeft = `${leftPadding}px`;\n    });\n\n    // Set total width for horizontal scrolling on the rows container\n    const rowsContainer = shadowRoot.querySelector('.rows-viewport .rows');\n    if (rowsContainer) {\n      (rowsContainer as HTMLElement).style.width = `${this.totalWidth}px`;\n    }\n  }\n\n  override onScroll(event: ScrollEvent): void {\n    if (!this.isVirtualized) return;\n\n    // Check if horizontal scroll position changed significantly\n    const scrollDelta = Math.abs(event.scrollLeft - this.scrollLeft);\n    if (scrollDelta < 1) return;\n\n    // Update scroll position\n    this.scrollLeft = event.scrollLeft;\n\n    // Recalculate visible columns and request re-render\n    this.requestRender();\n  }\n\n  // ===== Public API =====\n\n  /**\n   * Check if column virtualization is currently active.\n   */\n  getIsVirtualized(): boolean {\n    return this.isVirtualized;\n  }\n\n  /**\n   * Get the current visible column range.\n   */\n  getVisibleColumnRange(): { start: number; end: number } {\n    return { start: this.startCol, end: this.endCol };\n  }\n\n  /**\n   * Scroll the grid to bring a specific column into view.\n   * @param columnIndex - Index of the column to scroll to\n   */\n  scrollToColumn(columnIndex: number): void {\n    const offset = this.columnOffsets[columnIndex] ?? 0;\n    const gridEl = this.grid as unknown as HTMLElement;\n    // Scroll the grid element itself (it's the scroll container)\n    gridEl.scrollLeft = offset;\n  }\n\n  /**\n   * Get the left offset for a specific column.\n   * @param columnIndex - Index of the column\n   */\n  getColumnOffset(columnIndex: number): number {\n    return this.columnOffsets[columnIndex] ?? 0;\n  }\n\n  /**\n   * Get the total width of all columns.\n   */\n  getTotalWidth(): number {\n    return this.totalWidth;\n  }\n}\n"],"names":["BaseGridPlugin","config","grid","PluginClass","eventName","detail","message","DEFAULT_COLUMN_WIDTH","parseColumnWidth","width","numeric","getColumnWidths","columns","col","computeColumnOffsets","offsets","offset","computeTotalWidth","sum","getVisibleColumnRange","scrollLeft","viewportWidth","columnOffsets","columnWidths","overscan","columnCount","startCol","binarySearchFirstVisible","rightEdge","endCol","i","visibleColumns","low","high","mid","shouldVirtualize","threshold","autoEnable","ColumnVirtualizationPlugin","isVirtualized","viewport","shadowRoot","leftPadding","headerRow","bodyRows","row","rowsContainer","event","columnIndex","gridEl"],"mappings":"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"}

package/lib/plugins/context-menu/index.js

@@ -0,0 +1,341 @@
+class v {
+  /** 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, l) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: l, 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 g(i, e) {
+  return (typeof i == "function" ? i(e) : i).filter((n) => !(n.hidden === !0 || typeof n.hidden == "function" && n.hidden(e)));
+}
+function y(i, e) {
+  return i.disabled === !0 ? !0 : typeof i.disabled == "function" ? i.disabled(e) : !1;
+}
+function x(i, e, l) {
+  const n = document.createElement("div");
+  n.className = "tbw-context-menu", n.setAttribute("role", "menu");
+  for (const t of i) {
+    if (t.separator) {
+      const o = document.createElement("div");
+      o.className = "tbw-context-menu-separator", o.setAttribute("role", "separator"), n.appendChild(o);
+      continue;
+    }
+    const s = document.createElement("div");
+    s.className = "tbw-context-menu-item", t.cssClass && s.classList.add(t.cssClass), s.setAttribute("role", "menuitem"), s.setAttribute("data-id", t.id);
+    const r = y(t, e);
+    if (r && (s.classList.add("disabled"), s.setAttribute("aria-disabled", "true")), t.icon) {
+      const o = document.createElement("span");
+      o.className = "tbw-context-menu-icon", o.innerHTML = t.icon, s.appendChild(o);
+    }
+    const u = document.createElement("span");
+    if (u.className = "tbw-context-menu-label", u.textContent = t.name, s.appendChild(u), t.shortcut) {
+      const o = document.createElement("span");
+      o.className = "tbw-context-menu-shortcut", o.textContent = t.shortcut, s.appendChild(o);
+    }
+    if (t.subMenu?.length) {
+      const o = document.createElement("span");
+      o.className = "tbw-context-menu-arrow", o.textContent = "▶", s.appendChild(o), s.addEventListener("mouseenter", () => {
+        if (s.querySelector(".tbw-context-menu") || !t.subMenu) return;
+        const a = g(t.subMenu, e), d = x(a, e, l);
+        d.classList.add("tbw-context-submenu"), d.style.position = "absolute", d.style.left = "100%", d.style.top = "0", s.style.position = "relative", s.appendChild(d);
+      }), s.addEventListener("mouseleave", () => {
+        const c = s.querySelector(".tbw-context-menu");
+        c && c.remove();
+      });
+    }
+    !r && t.action && !t.subMenu && s.addEventListener("click", (o) => {
+      o.stopPropagation(), l(t);
+    }), n.appendChild(s);
+  }
+  return n;
+}
+function E(i, e, l) {
+  i.style.position = "fixed", i.style.left = `${e}px`, i.style.top = `${l}px`, i.style.visibility = "hidden", i.style.zIndex = "10000";
+  const n = i.getBoundingClientRect(), t = window.innerWidth, s = window.innerHeight;
+  let r = e, u = l;
+  e + n.width > t && (r = e - n.width), l + n.height > s && (u = l - n.height), r = Math.max(0, r), u = Math.max(0, u), i.style.left = `${r}px`, i.style.top = `${u}px`, i.style.visibility = "visible";
+}
+let f = null, p = null, m = null;
+const C = `
+  .tbw-context-menu {
+    position: fixed;
+    background: light-dark(#f5f5f5, #2a2a2a);
+    color: light-dark(#222, #eee);
+    border: 1px solid light-dark(#d0d0d4, #454545);
+    border-radius: 4px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+    min-width: 160px;
+    padding: 4px 0;
+    z-index: 10000;
+    font-size: 13px;
+    font-family: system-ui, sans-serif;
+  }
+  .tbw-context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 6px 12px;
+    cursor: pointer;
+    gap: 8px;
+  }
+  .tbw-context-menu-item:hover:not(.disabled) {
+    background: light-dark(#e8e8e8, #3a3a3a);
+  }
+  .tbw-context-menu-item.disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+  .tbw-context-menu-item.danger {
+    color: light-dark(#c00, #f66);
+  }
+  .tbw-context-menu-icon {
+    width: 16px;
+    text-align: center;
+  }
+  .tbw-context-menu-label {
+    flex: 1;
+  }
+  .tbw-context-menu-shortcut {
+    color: light-dark(#888, #888);
+    font-size: 11px;
+  }
+  .tbw-context-menu-arrow {
+    font-size: 10px;
+    color: light-dark(#888, #888);
+  }
+  .tbw-context-menu-separator {
+    height: 1px;
+    background: light-dark(#d0d0d4, #454545);
+    margin: 4px 0;
+  }
+`, b = [
+  {
+    id: "copy",
+    name: "Copy",
+    shortcut: "Ctrl+C",
+    action: (i) => {
+      i.grid?.plugins?.clipboard?.copy?.();
+    }
+  },
+  { separator: !0, id: "sep1", name: "" },
+  {
+    id: "export-csv",
+    name: "Export CSV",
+    action: (i) => {
+      i.grid?.plugins?.export?.exportCsv?.();
+    }
+  }
+];
+class M extends v {
+  name = "contextMenu";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      items: b
+    };
+  }
+  // ===== Internal State =====
+  isOpen = !1;
+  position = { x: 0, y: 0 };
+  params = null;
+  menuElement = null;
+  // ===== Lifecycle =====
+  attach(e) {
+    super.attach(e), this.installGlobalHandlers();
+  }
+  detach() {
+    this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null;
+  }
+  // ===== Private Methods =====
+  installGlobalHandlers() {
+    !m && typeof document < "u" && (m = document.createElement("style"), m.id = "tbw-context-menu-styles", m.textContent = C, document.head.appendChild(m)), f || (f = () => {
+      document.querySelectorAll(".tbw-context-menu").forEach((l) => l.remove());
+    }, document.addEventListener("click", f)), p || (p = (e) => {
+      e.key === "Escape" && document.querySelectorAll(".tbw-context-menu").forEach((n) => n.remove());
+    }, document.addEventListener("keydown", p));
+  }
+  // ===== Hooks =====
+  afterRender() {
+    if (!this.config.enabled) return;
+    const e = this.shadowRoot;
+    if (!e) return;
+    const l = e.children[0];
+    l && l.getAttribute("data-context-menu-bound") !== "true" && (l.setAttribute("data-context-menu-bound", "true"), l.addEventListener("contextmenu", (n) => {
+      if (!this.config.enabled) return;
+      const t = n;
+      t.preventDefault();
+      const s = t.target, r = s.closest("[data-row][data-col]"), u = s.closest(".header-cell");
+      let o;
+      if (r) {
+        const a = parseInt(r.getAttribute("data-row") ?? "-1", 10), d = parseInt(r.getAttribute("data-col") ?? "-1", 10), h = this.columns[d], w = this.rows[a];
+        o = {
+          row: w,
+          rowIndex: a,
+          column: h,
+          columnIndex: d,
+          field: h?.field ?? "",
+          value: w?.[h?.field] ?? null,
+          isHeader: !1,
+          event: t
+        };
+      } else if (u) {
+        const a = parseInt(u.getAttribute("data-col") ?? "-1", 10), d = this.columns[a];
+        o = {
+          row: null,
+          rowIndex: -1,
+          column: d,
+          columnIndex: a,
+          field: d?.field ?? "",
+          value: null,
+          isHeader: !0,
+          event: t
+        };
+      } else
+        return;
+      this.params = o, this.position = { x: t.clientX, y: t.clientY };
+      const c = g(this.config.items ?? b, o);
+      c.length && (this.menuElement && this.menuElement.remove(), this.menuElement = x(c, o, (a) => {
+        a.action && a.action(o), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+      }), document.body.appendChild(this.menuElement), E(this.menuElement, t.clientX, t.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: o, items: c }));
+    }));
+  }
+  // ===== Public API =====
+  /**
+   * Programmatically show the context menu at the specified position.
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param params - Partial context menu parameters
+   */
+  showMenu(e, l, n) {
+    const t = {
+      row: n.row ?? null,
+      rowIndex: n.rowIndex ?? -1,
+      column: n.column ?? null,
+      columnIndex: n.columnIndex ?? -1,
+      field: n.field ?? "",
+      value: n.value ?? null,
+      isHeader: n.isHeader ?? !1,
+      event: n.event ?? new MouseEvent("contextmenu")
+    }, s = g(this.config.items ?? b, t);
+    this.menuElement && this.menuElement.remove(), this.menuElement = x(s, t, (r) => {
+      r.action && r.action(t), this.menuElement?.remove(), this.menuElement = null, this.isOpen = !1;
+    }), document.body.appendChild(this.menuElement), E(this.menuElement, e, l), this.isOpen = !0;
+  }
+  /**
+   * Hide the context menu.
+   */
+  hideMenu() {
+    this.menuElement && (this.menuElement.remove(), this.menuElement = null, this.isOpen = !1);
+  }
+  /**
+   * Check if the context menu is currently open.
+   * @returns Whether the menu is open
+   */
+  isMenuOpen() {
+    return this.isOpen;
+  }
+  // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
+}
+export {
+  M as ContextMenuPlugin
+};
+//# sourceMappingURL=index.js.map