@toolbox-web/grid 0.0.1

package/lib/plugins/visibility/index.js

@@ -0,0 +1,430 @@
+class p {
+  /** 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 h(b) {
+  const e = b.meta ?? {};
+  return e.lockPosition !== !0 && e.suppressMovable !== !0;
+}
+class g extends p {
+  name = "visibility";
+  version = "1.0.0";
+  /** Tool panel ID for shell integration */
+  static PANEL_ID = "columns";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      allowHideAll: !1
+    };
+  }
+  // ===== Internal State =====
+  columnListElement = null;
+  // Drag state for reorder integration
+  isDragging = !1;
+  draggedField = null;
+  draggedIndex = null;
+  dropIndex = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.columnListElement = null, this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
+  }
+  // ===== Shell Integration =====
+  /**
+   * Register the column visibility tool panel with the shell.
+   */
+  getToolPanel() {
+    if (this.config.enabled)
+      return {
+        id: g.PANEL_ID,
+        title: "Columns",
+        icon: "☰",
+        tooltip: "Column visibility",
+        order: 100,
+        // High order so it appears last
+        render: (e) => this.renderPanelContent(e)
+      };
+  }
+  // ===== Public API =====
+  /**
+   * Show the visibility sidebar panel.
+   */
+  show() {
+    this.grid.openToolPanel(g.PANEL_ID);
+  }
+  /**
+   * Hide the visibility sidebar panel.
+   */
+  hide() {
+    this.grid.closeToolPanel();
+  }
+  /**
+   * Toggle the visibility sidebar panel.
+   */
+  toggle() {
+    this.grid.toggleToolPanel(g.PANEL_ID);
+  }
+  /**
+   * Check if a specific column is visible.
+   * Delegates to grid.isColumnVisible().
+   * @param field - The field name to check
+   * @returns True if the column is visible
+   */
+  isColumnVisible(e) {
+    return this.grid.isColumnVisible(e);
+  }
+  /**
+   * Set visibility for a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column
+   * @param visible - Whether the column should be visible
+   */
+  setColumnVisible(e, t) {
+    this.grid.setColumnVisible(e, t);
+  }
+  /**
+   * Get list of all visible column fields.
+   * @returns Array of visible field names
+   */
+  getVisibleColumns() {
+    return this.grid.getAllColumns().filter((t) => t.visible).map((t) => t.field);
+  }
+  /**
+   * Get list of all hidden column fields.
+   * @returns Array of hidden field names
+   */
+  getHiddenColumns() {
+    return this.grid.getAllColumns().filter((t) => !t.visible).map((t) => t.field);
+  }
+  /**
+   * Show all columns.
+   * Delegates to grid.showAllColumns().
+   */
+  showAll() {
+    this.grid.showAllColumns();
+  }
+  /**
+   * Toggle visibility for a specific column.
+   * Delegates to grid.toggleColumnVisibility().
+   * @param field - The field name of the column
+   */
+  toggleColumn(e) {
+    this.grid.toggleColumnVisibility(e);
+  }
+  /**
+   * Show a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column to show
+   */
+  showColumn(e) {
+    this.grid.setColumnVisible(e, !0);
+  }
+  /**
+   * Hide a specific column.
+   * Delegates to grid.setColumnVisible().
+   * @param field - The field name of the column to hide
+   */
+  hideColumn(e) {
+    this.grid.setColumnVisible(e, !1);
+  }
+  /**
+   * Get all columns with their visibility status.
+   * Useful for building visibility UI.
+   * @returns Array of column info with visibility status
+   */
+  getAllColumns() {
+    return this.grid.getAllColumns();
+  }
+  /**
+   * Check if the sidebar panel is currently open.
+   * @returns True if the panel is open
+   */
+  isPanelVisible() {
+    return this.grid.activeToolPanel === g.PANEL_ID;
+  }
+  // ===== Private Methods =====
+  /**
+   * Render the panel content into the shell's tool panel container.
+   * Returns a cleanup function.
+   */
+  renderPanelContent(e) {
+    const t = this.grid, s = document.createElement("div");
+    s.className = "tbw-visibility-content";
+    const o = document.createElement("div");
+    o.className = "tbw-visibility-list", s.appendChild(o);
+    const i = document.createElement("button");
+    return i.className = "tbw-visibility-show-all", i.textContent = "Show All", i.addEventListener("click", () => {
+      t.showAllColumns(), this.rebuildToggles(o);
+    }), s.appendChild(i), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(s), () => {
+      this.columnListElement = null, s.remove();
+    };
+  }
+  /**
+   * Check if a reorder plugin is present (by name to avoid static import).
+   */
+  hasReorderPlugin() {
+    const e = this.grid?.getPluginByName?.("reorder");
+    return !!(e && typeof e.moveColumn == "function");
+  }
+  /**
+   * Build the column toggle checkboxes.
+   * When a reorder plugin is present, adds drag handles for reordering.
+   */
+  rebuildToggles(e) {
+    const t = this.grid, s = this.hasReorderPlugin();
+    e.innerHTML = "";
+    const o = t.getAllColumns();
+    for (let i = 0; i < o.length; i++) {
+      const l = o[i], n = l.header || l.field, r = document.createElement("div");
+      r.className = l.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", r.setAttribute("data-field", l.field), r.setAttribute("data-index", String(i)), s && h(l) && (r.draggable = !0, r.classList.add("reorderable"), this.setupDragListeners(r, l.field, i, e));
+      const d = document.createElement("label");
+      d.className = "tbw-visibility-label";
+      const a = document.createElement("input");
+      a.type = "checkbox", a.checked = l.visible, a.disabled = l.lockVisible ?? !1, a.addEventListener("change", () => {
+        t.toggleColumnVisibility(l.field), setTimeout(() => this.rebuildToggles(e), 0);
+      });
+      const u = document.createElement("span");
+      if (u.textContent = n, d.appendChild(a), d.appendChild(u), s && h(l)) {
+        const c = document.createElement("span");
+        c.className = "tbw-visibility-handle", c.textContent = "⋮⋮", c.title = "Drag to reorder", r.appendChild(c);
+      }
+      r.appendChild(d), e.appendChild(r);
+    }
+  }
+  /**
+   * Set up drag-and-drop event listeners for a row.
+   * On drop, emits a 'column-reorder-request' event for other plugins to handle.
+   */
+  setupDragListeners(e, t, s, o) {
+    e.addEventListener("dragstart", (i) => {
+      this.isDragging = !0, this.draggedField = t, this.draggedIndex = s, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+    }), e.addEventListener("dragend", () => {
+      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, o.querySelectorAll(".tbw-visibility-row").forEach((i) => {
+        i.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+      });
+    }), e.addEventListener("dragover", (i) => {
+      if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
+      const l = e.getBoundingClientRect(), n = l.top + l.height / 2;
+      this.dropIndex = i.clientY < n ? s : s + 1, o.querySelectorAll(".tbw-visibility-row").forEach((r) => {
+        r !== e && r.classList.remove("drop-target", "drop-before", "drop-after");
+      }), e.classList.add("drop-target"), e.classList.toggle("drop-before", i.clientY < n), e.classList.toggle("drop-after", i.clientY >= n);
+    }), e.addEventListener("dragleave", () => {
+      e.classList.remove("drop-target", "drop-before", "drop-after");
+    }), e.addEventListener("drop", (i) => {
+      i.preventDefault();
+      const l = this.draggedField, n = this.draggedIndex, r = this.dropIndex;
+      if (!this.isDragging || l === null || n === null || r === null)
+        return;
+      const d = r > n ? r - 1 : r;
+      if (d !== n) {
+        const a = {
+          field: l,
+          fromIndex: n,
+          toIndex: d
+        };
+        this.emit("column-reorder-request", a), setTimeout(() => {
+          this.rebuildToggles(o);
+        }, 0);
+      }
+    });
+  }
+  // ===== Styles =====
+  styles = `
+    .tbw-visibility-content {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .tbw-visibility-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 8px;
+    }
+
+    .tbw-visibility-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 4px;
+      cursor: pointer;
+      font-size: 13px;
+      border-radius: var(--tbw-border-radius, 4px);
+      position: relative;
+    }
+    .tbw-visibility-row:hover {
+      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));
+    }
+    .tbw-visibility-row input[type="checkbox"] {
+      cursor: pointer;
+    }
+    .tbw-visibility-row.locked span {
+      color: var(--tbw-color-fg-muted, #888);
+    }
+
+    /* Drag handle */
+    .tbw-visibility-handle {
+      cursor: grab;
+      color: var(--tbw-color-fg-muted, #888);
+      font-size: 10px;
+      letter-spacing: -2px;
+      user-select: none;
+      flex-shrink: 0;
+    }
+    .tbw-visibility-row.reorderable:hover .tbw-visibility-handle {
+      color: var(--tbw-color-fg, #1f2937);
+    }
+
+    /* Label wrapper for checkbox and text */
+    .tbw-visibility-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      cursor: pointer;
+    }
+
+    /* Drag states */
+    .tbw-visibility-row.dragging {
+      opacity: 0.5;
+      cursor: grabbing;
+    }
+    .tbw-visibility-row.drop-before::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 0;
+      height: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));
+    }
+    .tbw-visibility-row.drop-after::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: 2px;
+      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));
+    }
+
+    .tbw-visibility-show-all {
+      margin: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));
+      border-radius: var(--tbw-border-radius, 4px);
+      background: var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));
+      color: var(--tbw-color-fg, #1f2937);
+      cursor: pointer;
+      font-size: 13px;
+    }
+    .tbw-visibility-show-all:hover {
+      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));
+    }
+  `;
+}
+export {
+  g as VisibilityPlugin
+};
+//# sourceMappingURL=index.js.map

package/lib/plugins/visibility/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/visibility/VisibilityPlugin.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","/**\r\n * Column Visibility Plugin (Class-based)\r\n *\r\n * Provides a UI for column visibility control via the shell's tool panel system.\r\n * Column visibility is a core grid feature - this plugin provides:\r\n * - A tool panel for column visibility management (registered with the shell)\r\n * - Backward-compatible API methods that delegate to grid.setColumnVisible(), etc.\r\n *\r\n * The grid emits 'column-visibility' events when columns are shown/hidden,\r\n * allowing consumers to save user preferences.\r\n *\r\n * When a reorder plugin is present, column rows become draggable for reordering.\r\n * Drag-drop emits 'column-reorder-request' events that the ReorderPlugin can listen for.\r\n */\r\n\r\nimport { BaseGridPlugin } from '../../core/plugin/base-plugin';\r\nimport type { ColumnConfig, ToolPanelDefinition } from '../../core/types';\r\nimport type { VisibilityConfig } from './types';\r\n\r\n/**\r\n * Detail for column-reorder-request events emitted when users drag-drop in the visibility panel.\r\n */\r\nexport interface ColumnReorderRequestDetail {\r\n  /** The field name of the column to move */\r\n  field: string;\r\n  /** The source index (before move) */\r\n  fromIndex: number;\r\n  /** The target index (after move) */\r\n  toIndex: number;\r\n}\r\n\r\n/**\r\n * Check if a column can be moved (respects lockPosition/suppressMovable).\r\n * Inlined to avoid importing from reorder plugin.\r\n */\r\nfunction canMoveColumn(column: ColumnConfig): boolean {\r\n  const meta = column.meta ?? {};\r\n  return meta.lockPosition !== true && meta.suppressMovable !== true;\r\n}\r\n\r\n/** Extended grid interface with visibility methods */\r\ninterface GridWithVisibility {\r\n  shadowRoot: ShadowRoot | null;\r\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }>;\r\n  setColumnVisible(field: string, visible: boolean): void;\r\n  toggleColumnVisibility(field: string): void;\r\n  showAllColumns(): void;\r\n  isColumnVisible(field: string): boolean;\r\n  requestRender(): void;\r\n  openToolPanel(id: string): void;\r\n  closeToolPanel(): void;\r\n  toggleToolPanel(id: string): void;\r\n  activeToolPanel: string | undefined;\r\n}\r\n\r\n/**\r\n * Column Visibility Plugin for tbw-grid\r\n *\r\n * @example\r\n * ```ts\r\n * new VisibilityPlugin({ enabled: true, allowHideAll: false })\r\n * ```\r\n */\r\nexport class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {\r\n  readonly name = 'visibility';\r\n  override readonly version = '1.0.0';\r\n\r\n  /** Tool panel ID for shell integration */\r\n  static readonly PANEL_ID = 'columns';\r\n\r\n  protected override get defaultConfig(): Partial<VisibilityConfig> {\r\n    return {\r\n      enabled: true,\r\n      allowHideAll: false,\r\n    };\r\n  }\r\n\r\n  // ===== Internal State =====\r\n  private columnListElement: HTMLElement | null = null;\r\n\r\n  // Drag state for reorder integration\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\r\n  // ===== Lifecycle =====\r\n\r\n  override detach(): void {\r\n    this.columnListElement = null;\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  // ===== Shell Integration =====\r\n\r\n  /**\r\n   * Register the column visibility tool panel with the shell.\r\n   */\r\n  override getToolPanel(): ToolPanelDefinition | undefined {\r\n    if (!this.config.enabled) return undefined;\r\n\r\n    return {\r\n      id: VisibilityPlugin.PANEL_ID,\r\n      title: 'Columns',\r\n      icon: '☰',\r\n      tooltip: 'Column visibility',\r\n      order: 100, // High order so it appears last\r\n      render: (container) => this.renderPanelContent(container),\r\n    };\r\n  }\r\n\r\n  // ===== Public API =====\r\n\r\n  /**\r\n   * Show the visibility sidebar panel.\r\n   */\r\n  show(): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.openToolPanel(VisibilityPlugin.PANEL_ID);\r\n  }\r\n\r\n  /**\r\n   * Hide the visibility sidebar panel.\r\n   */\r\n  hide(): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.closeToolPanel();\r\n  }\r\n\r\n  /**\r\n   * Toggle the visibility sidebar panel.\r\n   */\r\n  toggle(): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.toggleToolPanel(VisibilityPlugin.PANEL_ID);\r\n  }\r\n\r\n  /**\r\n   * Check if a specific column is visible.\r\n   * Delegates to grid.isColumnVisible().\r\n   * @param field - The field name to check\r\n   * @returns True if the column is visible\r\n   */\r\n  isColumnVisible(field: string): boolean {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    return grid.isColumnVisible(field);\r\n  }\r\n\r\n  /**\r\n   * Set visibility for a specific column.\r\n   * Delegates to grid.setColumnVisible().\r\n   * @param field - The field name of the column\r\n   * @param visible - Whether the column should be visible\r\n   */\r\n  setColumnVisible(field: string, visible: boolean): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.setColumnVisible(field, visible);\r\n  }\r\n\r\n  /**\r\n   * Get list of all visible column fields.\r\n   * @returns Array of visible field names\r\n   */\r\n  getVisibleColumns(): string[] {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    return grid\r\n      .getAllColumns()\r\n      .filter((c) => c.visible)\r\n      .map((c) => c.field);\r\n  }\r\n\r\n  /**\r\n   * Get list of all hidden column fields.\r\n   * @returns Array of hidden field names\r\n   */\r\n  getHiddenColumns(): string[] {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    return grid\r\n      .getAllColumns()\r\n      .filter((c) => !c.visible)\r\n      .map((c) => c.field);\r\n  }\r\n\r\n  /**\r\n   * Show all columns.\r\n   * Delegates to grid.showAllColumns().\r\n   */\r\n  showAll(): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.showAllColumns();\r\n  }\r\n\r\n  /**\r\n   * Toggle visibility for a specific column.\r\n   * Delegates to grid.toggleColumnVisibility().\r\n   * @param field - The field name of the column\r\n   */\r\n  toggleColumn(field: string): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.toggleColumnVisibility(field);\r\n  }\r\n\r\n  /**\r\n   * Show a specific column.\r\n   * Delegates to grid.setColumnVisible().\r\n   * @param field - The field name of the column to show\r\n   */\r\n  showColumn(field: string): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.setColumnVisible(field, true);\r\n  }\r\n\r\n  /**\r\n   * Hide a specific column.\r\n   * Delegates to grid.setColumnVisible().\r\n   * @param field - The field name of the column to hide\r\n   */\r\n  hideColumn(field: string): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    grid.setColumnVisible(field, false);\r\n  }\r\n\r\n  /**\r\n   * Get all columns with their visibility status.\r\n   * Useful for building visibility UI.\r\n   * @returns Array of column info with visibility status\r\n   */\r\n  getAllColumns(): Array<{ field: string; header: string; visible: boolean; lockVisible?: boolean }> {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    return grid.getAllColumns();\r\n  }\r\n\r\n  /**\r\n   * Check if the sidebar panel is currently open.\r\n   * @returns True if the panel is open\r\n   */\r\n  isPanelVisible(): boolean {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    return grid.activeToolPanel === VisibilityPlugin.PANEL_ID;\r\n  }\r\n\r\n  // ===== Private Methods =====\r\n\r\n  /**\r\n   * Render the panel content into the shell's tool panel container.\r\n   * Returns a cleanup function.\r\n   */\r\n  private renderPanelContent(container: HTMLElement): (() => void) | void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n\r\n    // Create content wrapper\r\n    const wrapper = document.createElement('div');\r\n    wrapper.className = 'tbw-visibility-content';\r\n\r\n    // Column list container\r\n    const columnList = document.createElement('div');\r\n    columnList.className = 'tbw-visibility-list';\r\n    wrapper.appendChild(columnList);\r\n\r\n    // Show all button\r\n    const showAllBtn = document.createElement('button');\r\n    showAllBtn.className = 'tbw-visibility-show-all';\r\n    showAllBtn.textContent = 'Show All';\r\n    showAllBtn.addEventListener('click', () => {\r\n      grid.showAllColumns();\r\n      this.rebuildToggles(columnList);\r\n    });\r\n    wrapper.appendChild(showAllBtn);\r\n\r\n    // Store reference\r\n    this.columnListElement = columnList;\r\n\r\n    // Build initial toggles\r\n    this.rebuildToggles(columnList);\r\n\r\n    // Append to container\r\n    container.appendChild(wrapper);\r\n\r\n    // Return cleanup function\r\n    return () => {\r\n      this.columnListElement = null;\r\n      wrapper.remove();\r\n    };\r\n  }\r\n\r\n  /**\r\n   * Check if a reorder plugin is present (by name to avoid static import).\r\n   */\r\n  private hasReorderPlugin(): boolean {\r\n    const plugin = this.grid?.getPluginByName?.('reorder');\r\n    // Duck-type check - just verify the plugin exists and has a moveColumn method\r\n    return !!(plugin && typeof (plugin as { moveColumn?: unknown }).moveColumn === 'function');\r\n  }\r\n\r\n  /**\r\n   * Build the column toggle checkboxes.\r\n   * When a reorder plugin is present, adds drag handles for reordering.\r\n   */\r\n  private rebuildToggles(columnList: HTMLElement): void {\r\n    const grid = this.grid as unknown as GridWithVisibility;\r\n    const reorderEnabled = this.hasReorderPlugin();\r\n\r\n    columnList.innerHTML = '';\r\n\r\n    // getAllColumns() now returns columns in their effective display order\r\n    const allColumns = grid.getAllColumns();\r\n\r\n    for (let i = 0; i < allColumns.length; i++) {\r\n      const col = allColumns[i];\r\n      const label = col.header || col.field;\r\n\r\n      const row = document.createElement('div');\r\n      row.className = col.lockVisible ? 'tbw-visibility-row locked' : 'tbw-visibility-row';\r\n      row.setAttribute('data-field', col.field);\r\n      row.setAttribute('data-index', String(i));\r\n\r\n      // Add drag handle if reorder is enabled\r\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\r\n        row.draggable = true;\r\n        row.classList.add('reorderable');\r\n\r\n        this.setupDragListeners(row, col.field, i, columnList);\r\n      }\r\n\r\n      const labelWrapper = document.createElement('label');\r\n      labelWrapper.className = 'tbw-visibility-label';\r\n\r\n      const checkbox = document.createElement('input');\r\n      checkbox.type = 'checkbox';\r\n      checkbox.checked = col.visible;\r\n      checkbox.disabled = col.lockVisible ?? false;\r\n      checkbox.addEventListener('change', () => {\r\n        grid.toggleColumnVisibility(col.field);\r\n        // Refresh after toggle (grid may re-render)\r\n        setTimeout(() => this.rebuildToggles(columnList), 0);\r\n      });\r\n\r\n      const text = document.createElement('span');\r\n      text.textContent = label;\r\n\r\n      labelWrapper.appendChild(checkbox);\r\n      labelWrapper.appendChild(text);\r\n\r\n      // Add drag handle icon if reorderable\r\n      if (reorderEnabled && canMoveColumn(col as unknown as ColumnConfig)) {\r\n        const handle = document.createElement('span');\r\n        handle.className = 'tbw-visibility-handle';\r\n        handle.textContent = '⋮⋮';\r\n        handle.title = 'Drag to reorder';\r\n        row.appendChild(handle);\r\n      }\r\n\r\n      row.appendChild(labelWrapper);\r\n      columnList.appendChild(row);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Set up drag-and-drop event listeners for a row.\r\n   * On drop, emits a 'column-reorder-request' event for other plugins to handle.\r\n   */\r\n  private setupDragListeners(row: HTMLElement, field: string, index: number, columnList: HTMLElement): void {\r\n    row.addEventListener('dragstart', (e: DragEvent) => {\r\n      this.isDragging = true;\r\n      this.draggedField = field;\r\n      this.draggedIndex = index;\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      row.classList.add('dragging');\r\n    });\r\n\r\n    row.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      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\r\n        r.classList.remove('dragging', 'drop-target', 'drop-before', 'drop-after');\r\n      });\r\n    });\r\n\r\n    row.addEventListener('dragover', (e: DragEvent) => {\r\n      e.preventDefault();\r\n      if (!this.isDragging || this.draggedField === field) return;\r\n\r\n      const rect = row.getBoundingClientRect();\r\n      const midY = rect.top + rect.height / 2;\r\n\r\n      this.dropIndex = e.clientY < midY ? index : index + 1;\r\n\r\n      // Clear other row highlights\r\n      columnList.querySelectorAll('.tbw-visibility-row').forEach((r) => {\r\n        if (r !== row) r.classList.remove('drop-target', 'drop-before', 'drop-after');\r\n      });\r\n\r\n      row.classList.add('drop-target');\r\n      row.classList.toggle('drop-before', e.clientY < midY);\r\n      row.classList.toggle('drop-after', e.clientY >= midY);\r\n    });\r\n\r\n    row.addEventListener('dragleave', () => {\r\n      row.classList.remove('drop-target', 'drop-before', 'drop-after');\r\n    });\r\n\r\n    row.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      // Calculate the effective target index\r\n      const effectiveToIndex = dropIndex > draggedIndex ? dropIndex - 1 : dropIndex;\r\n\r\n      if (effectiveToIndex !== draggedIndex) {\r\n        // Emit a request event - other plugins (like ReorderPlugin) can listen and handle\r\n        const detail: ColumnReorderRequestDetail = {\r\n          field: draggedField,\r\n          fromIndex: draggedIndex,\r\n          toIndex: effectiveToIndex,\r\n        };\r\n        this.emit<ColumnReorderRequestDetail>('column-reorder-request', detail);\r\n\r\n        // Rebuild the panel after reorder (deferred to allow re-render)\r\n        setTimeout(() => {\r\n          this.rebuildToggles(columnList);\r\n        }, 0);\r\n      }\r\n    });\r\n  }\r\n\r\n  // ===== Styles =====\r\n\r\n  override readonly styles = `\r\n    .tbw-visibility-content {\r\n      display: flex;\r\n      flex-direction: column;\r\n      height: 100%;\r\n    }\r\n\r\n    .tbw-visibility-list {\r\n      flex: 1;\r\n      overflow-y: auto;\r\n      padding: 8px;\r\n    }\r\n\r\n    .tbw-visibility-row {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 6px 4px;\r\n      cursor: pointer;\r\n      font-size: 13px;\r\n      border-radius: var(--tbw-border-radius, 4px);\r\n      position: relative;\r\n    }\r\n    .tbw-visibility-row:hover {\r\n      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));\r\n    }\r\n    .tbw-visibility-row input[type=\"checkbox\"] {\r\n      cursor: pointer;\r\n    }\r\n    .tbw-visibility-row.locked span {\r\n      color: var(--tbw-color-fg-muted, #888);\r\n    }\r\n\r\n    /* Drag handle */\r\n    .tbw-visibility-handle {\r\n      cursor: grab;\r\n      color: var(--tbw-color-fg-muted, #888);\r\n      font-size: 10px;\r\n      letter-spacing: -2px;\r\n      user-select: none;\r\n      flex-shrink: 0;\r\n    }\r\n    .tbw-visibility-row.reorderable:hover .tbw-visibility-handle {\r\n      color: var(--tbw-color-fg, #1f2937);\r\n    }\r\n\r\n    /* Label wrapper for checkbox and text */\r\n    .tbw-visibility-label {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      flex: 1;\r\n      cursor: pointer;\r\n    }\r\n\r\n    /* Drag states */\r\n    .tbw-visibility-row.dragging {\r\n      opacity: 0.5;\r\n      cursor: grabbing;\r\n    }\r\n    .tbw-visibility-row.drop-before::before {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      right: 0;\r\n      top: 0;\r\n      height: 2px;\r\n      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));\r\n    }\r\n    .tbw-visibility-row.drop-after::after {\r\n      content: '';\r\n      position: absolute;\r\n      left: 0;\r\n      right: 0;\r\n      bottom: 0;\r\n      height: 2px;\r\n      background: var(--tbw-reorder-indicator, var(--tbw-color-accent, #3b82f6));\r\n    }\r\n\r\n    .tbw-visibility-show-all {\r\n      margin: 8px;\r\n      padding: 8px 12px;\r\n      border: 1px solid var(--tbw-visibility-border, var(--tbw-color-border, #e5e7eb));\r\n      border-radius: var(--tbw-border-radius, 4px);\r\n      background: var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));\r\n      color: var(--tbw-color-fg, #1f2937);\r\n      cursor: pointer;\r\n      font-size: 13px;\r\n    }\r\n    .tbw-visibility-show-all:hover {\r\n      background: var(--tbw-visibility-hover, var(--tbw-color-row-hover, #f3f4f6));\r\n    }\r\n  `;\r\n}\r\n"],"names":["BaseGridPlugin","config","grid","PluginClass","eventName","detail","message","canMoveColumn","column","meta","VisibilityPlugin","container","field","visible","c","wrapper","columnList","showAllBtn","plugin","reorderEnabled","allColumns","col","label","row","labelWrapper","checkbox","text","handle","index","e","r","rect","midY","draggedField","draggedIndex","dropIndex","effectiveToIndex"],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@toolbox-web/grid",
+  "version": "0.0.1",
+  "description": "High-performance data grid web component",
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./all": {
+      "types": "./all.d.ts",
+      "import": "./all.js"
+    },
+    "./plugins/*": {
+      "types": "./lib/plugins/*/index.d.ts",
+      "import": "./lib/plugins/*/index.js"
+    },
+    "./themes/*": "./themes/*",
+    "./umd/*": "./umd/*"
+  },
+  "files": [
+    "**/*.js",
+    "**/*.d.ts",
+    "**/*.css",
+    "**/*.map",
+    "custom-elements.json"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "keywords": [
+    "web-component",
+    "data-grid",
+    "table",
+    "virtualization"
+  ],
+  "license": "MIT",
+  "author": "Oystein Amundsen",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OysteinAmundsen/toolbox.git",
+    "directory": "libs/grid"
+  },
+  "homepage": "https://github.com/OysteinAmundsen/toolbox/tree/main/libs/grid#readme",
+  "bugs": {
+    "url": "https://github.com/OysteinAmundsen/toolbox/issues"
+  },
+  "customElements": "custom-elements.json"
+}

package/themes/dg-theme-contrast.css

@@ -0,0 +1,43 @@
+/* High contrast accessibility-focused theme */
+tbw-grid {
+  color-scheme: light dark;
+  --tbw-color-bg: light-dark(#ffffff, #000000);
+  --tbw-color-fg: light-dark(#000000, #ffffff);
+  --tbw-color-fg-muted: light-dark(#222222, #dddddd);
+  --tbw-color-border: light-dark(#000000, #ffffff);
+  --tbw-color-border-strong: light-dark(#000000, #ffffff);
+  --tbw-color-accent: light-dark(#c00000, #ff4d4d);
+  --tbw-color-accent-fg: #ffffff;
+  --tbw-color-selection: light-dark(#ffe9a8, #333333);
+  --tbw-color-row-alt: light-dark(#f2f2f2, #111111);
+  --tbw-color-row-hover: light-dark(#e6f2ff, #1c1c1c);
+  --tbw-color-header-bg: light-dark(#e8e8e8, #141414);
+  --tbw-color-border-cell: light-dark(#333, #eee);
+  --tbw-color-border-header: light-dark(#444, #ccc);
+  --tbw-resize-handle-color-hover: var(--tbw-color-accent);
+  --tbw-focus-outline: 2px solid var(--tbw-color-accent);
+
+  /* Typography & spacing */
+  --tbw-font-size: 14px;
+  --tbw-font-size-header: 17px;
+  --tbw-font-weight-header: bold;
+  --tbw-cell-padding-header: 15px 8px;
+  --tbw-cell-padding: 2px 8px;
+  --tbw-cell-padding-input: 2px 6px;
+  --tbw-row-height: 40px; /* taller rows */
+  --tbw-header-height: 44px;
+  --tbw-border-radius: 0;
+  --tbw-resize-handle-width: 6px;
+  --tbw-resize-handle-border-radius: 2px;
+  --tbw-checkbox-size: 20px;
+  --tbw-focus-outline-offset: 0;
+  --tbw-row-divider: 2px solid light-dark(#000000, #ffffff);
+  --tbw-border-header: 2px solid light-dark(#000000, #ffffff);
+  --tbw-editing-border: 2px solid var(--tbw-color-accent);
+  --tbw-active-row-outline: 2px solid var(--tbw-color-accent);
+  --tbw-row-hover-outline: 2px solid var(--tbw-color-accent);
+  --tbw-sort-indicator-color: var(--tbw-color-fg-muted);
+  --tbw-sort-indicator-active-color: var(--tbw-color-accent);
+  --tbw-transition-duration: 0ms; /* reduce motion */
+  --tbw-font-size-editor: 1rem;
+}