@toolbox-web/grid 0.0.1

package/lib/plugins/master-detail/index.js

@@ -0,0 +1,303 @@
+class g {
+  /** 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 w(r, e) {
+  const t = new Set(r);
+  return t.has(e) ? t.delete(e) : t.add(e), t;
+}
+function f(r, e) {
+  const t = new Set(r);
+  return t.add(e), t;
+}
+function x(r, e) {
+  const t = new Set(r);
+  return t.delete(e), t;
+}
+function R(r, e) {
+  return r.has(e);
+}
+function m(r, e, t, o) {
+  const s = document.createElement("div");
+  s.className = "master-detail-row", s.setAttribute("data-detail-for", String(e)), s.setAttribute("role", "row");
+  const n = document.createElement("div");
+  n.className = "master-detail-cell", n.setAttribute("role", "cell"), n.style.gridColumn = `1 / ${o + 1}`;
+  const i = t(r, e);
+  return typeof i == "string" ? n.innerHTML = i : i instanceof HTMLElement && n.appendChild(i), s.appendChild(n), s;
+}
+class C extends g {
+  name = "masterDetail";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      detailHeight: "auto",
+      expandOnRowClick: !1,
+      collapseOnClickOutside: !1,
+      showExpandColumn: !0
+    };
+  }
+  // ===== Internal State =====
+  expandedRows = /* @__PURE__ */ new Set();
+  detailElements = /* @__PURE__ */ new Map();
+  // ===== Lifecycle =====
+  detach() {
+    this.expandedRows.clear(), this.detailElements.clear();
+  }
+  // ===== Hooks =====
+  processColumns(e) {
+    if (!this.config.detailRenderer)
+      return [...e];
+    const t = [...e];
+    if (t.length > 0) {
+      const o = { ...t[0] }, s = o.viewRenderer;
+      o.viewRenderer = (n) => {
+        const { value: i, row: d } = n, a = this.expandedRows.has(d), h = document.createElement("span");
+        h.className = "master-detail-cell-wrapper";
+        const l = document.createElement("span");
+        l.className = "master-detail-toggle", l.textContent = a ? "▼" : "▶", l.setAttribute("aria-expanded", String(a)), l.setAttribute("aria-label", a ? "Collapse details" : "Expand details"), l.addEventListener("click", (c) => {
+          c.stopPropagation();
+          const p = this.rows.indexOf(d);
+          this.expandedRows = w(this.expandedRows, d), this.emit("detail-expand", {
+            rowIndex: p,
+            row: d,
+            expanded: this.expandedRows.has(d)
+          }), this.requestRender();
+        }), h.appendChild(l);
+        const u = document.createElement("span");
+        if (s) {
+          const c = s(n);
+          c instanceof Node ? u.appendChild(c) : u.textContent = String(c ?? i ?? "");
+        } else
+          u.textContent = String(i ?? "");
+        return h.appendChild(u), h;
+      }, t[0] = o;
+    }
+    return t;
+  }
+  onRowClick(e) {
+    if (!(!this.config.expandOnRowClick || !this.config.detailRenderer))
+      return this.expandedRows = w(this.expandedRows, e.row), this.emit("detail-expand", {
+        rowIndex: e.rowIndex,
+        row: e.row,
+        expanded: this.expandedRows.has(e.row)
+      }), this.requestRender(), !1;
+  }
+  afterRender() {
+    if (!this.config.detailRenderer) return;
+    const e = this.shadowRoot?.querySelector(".rows");
+    if (!e) return;
+    e.querySelectorAll(".master-detail-row").forEach((s) => s.remove()), this.detailElements.clear();
+    const t = e.querySelectorAll(".data-grid-row"), o = this.columns.length;
+    for (const s of t) {
+      const n = s.querySelector(".cell[data-row]"), i = n ? parseInt(n.getAttribute("data-row") ?? "-1", 10) : -1;
+      if (i < 0) continue;
+      const d = this.rows[i];
+      if (!d || !this.expandedRows.has(d)) continue;
+      const a = m(d, i, this.config.detailRenderer, o);
+      typeof this.config.detailHeight == "number" && (a.style.height = `${this.config.detailHeight}px`), s.appendChild(a), this.detailElements.set(d, a);
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Expand the detail row at the given index.
+   * @param rowIndex - Index of the row to expand
+   */
+  expand(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = f(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Collapse the detail row at the given index.
+   * @param rowIndex - Index of the row to collapse
+   */
+  collapse(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = x(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Toggle the detail row at the given index.
+   * @param rowIndex - Index of the row to toggle
+   */
+  toggle(e) {
+    const t = this.rows[e];
+    t && (this.expandedRows = w(this.expandedRows, t), this.requestRender());
+  }
+  /**
+   * Check if the detail row at the given index is expanded.
+   * @param rowIndex - Index of the row to check
+   * @returns Whether the detail row is expanded
+   */
+  isExpanded(e) {
+    const t = this.rows[e];
+    return t ? R(this.expandedRows, t) : !1;
+  }
+  /**
+   * Expand all detail rows.
+   */
+  expandAll() {
+    for (const e of this.rows)
+      this.expandedRows.add(e);
+    this.requestRender();
+  }
+  /**
+   * Collapse all detail rows.
+   */
+  collapseAll() {
+    this.expandedRows.clear(), this.requestRender();
+  }
+  /**
+   * Get the indices of all expanded rows.
+   * @returns Array of row indices that are expanded
+   */
+  getExpandedRows() {
+    const e = [];
+    for (const t of this.expandedRows) {
+      const o = this.rows.indexOf(t);
+      o >= 0 && e.push(o);
+    }
+    return e;
+  }
+  /**
+   * Get the detail element for a specific row.
+   * @param rowIndex - Index of the row
+   * @returns The detail HTMLElement or undefined
+   */
+  getDetailElement(e) {
+    const t = this.rows[e];
+    return t ? this.detailElements.get(t) : void 0;
+  }
+  // ===== Styles =====
+  styles = `
+    .master-detail-cell-wrapper {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+    .master-detail-toggle {
+      cursor: pointer;
+      font-size: 10px;
+      opacity: 0.7;
+      user-select: none;
+    }
+    .master-detail-toggle:hover {
+      opacity: 1;
+    }
+    .master-detail-row {
+      grid-column: 1 / -1;
+      display: grid;
+      background: var(--tbw-master-detail-bg, var(--tbw-color-row-alt));
+      border-bottom: 1px solid var(--tbw-master-detail-border, var(--tbw-color-border));
+    }
+    .master-detail-cell {
+      padding: 16px;
+      overflow: auto;
+    }
+  `;
+}
+export {
+  C as MasterDetailPlugin
+};
+//# sourceMappingURL=index.js.map

package/lib/plugins/master-detail/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/master-detail/master-detail.ts","../../../../../../libs/grid/src/lib/plugins/master-detail/MasterDetailPlugin.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 * Master/Detail Core Logic\n *\n * Pure functions for managing detail row expansion state.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n// Uses `any` for maximum flexibility with user-defined row types.\n\n/**\n * Toggle the expansion state of a detail row.\n * Returns a new Set with the updated state.\n */\nexport function toggleDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  if (newExpanded.has(row)) {\n    newExpanded.delete(row);\n  } else {\n    newExpanded.add(row);\n  }\n  return newExpanded;\n}\n\n/**\n * Expand a detail row.\n * Returns a new Set with the row added.\n */\nexport function expandDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.add(row);\n  return newExpanded;\n}\n\n/**\n * Collapse a detail row.\n * Returns a new Set with the row removed.\n */\nexport function collapseDetailRow(expandedRows: Set<object>, row: object): Set<object> {\n  const newExpanded = new Set(expandedRows);\n  newExpanded.delete(row);\n  return newExpanded;\n}\n\n/**\n * Check if a detail row is expanded.\n */\nexport function isDetailExpanded(expandedRows: Set<object>, row: object): boolean {\n  return expandedRows.has(row);\n}\n\n/**\n * Create a detail element for a given row.\n * The element spans all columns and contains the rendered content.\n */\nexport function createDetailElement(\n  row: any,\n  rowIndex: number,\n  renderer: (row: any, rowIndex: number) => HTMLElement | string,\n  columnCount: number\n): HTMLElement {\n  const detailRow = document.createElement('div');\n  detailRow.className = 'master-detail-row';\n  detailRow.setAttribute('data-detail-for', String(rowIndex));\n  detailRow.setAttribute('role', 'row');\n\n  const detailCell = document.createElement('div');\n  detailCell.className = 'master-detail-cell';\n  detailCell.setAttribute('role', 'cell');\n  detailCell.style.gridColumn = `1 / ${columnCount + 1}`;\n\n  const content = renderer(row, rowIndex);\n  if (typeof content === 'string') {\n    detailCell.innerHTML = content;\n  } else if (content instanceof HTMLElement) {\n    detailCell.appendChild(content);\n  }\n\n  detailRow.appendChild(detailCell);\n  return detailRow;\n}\n","/**\n * Master/Detail Plugin (Class-based)\n *\n * Enables expandable detail rows showing additional content for each row.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport { BaseGridPlugin, RowClickEvent } from '../../core/plugin/base-plugin';\nimport {\n  collapseDetailRow,\n  createDetailElement,\n  expandDetailRow,\n  isDetailExpanded,\n  toggleDetailRow,\n} from './master-detail';\nimport type { DetailExpandDetail, MasterDetailConfig } from './types';\n\n/**\n * Master/Detail Plugin for tbw-grid\n *\n * @example\n * ```ts\n * new MasterDetailPlugin({\n *   enabled: true,\n *   detailRenderer: (row) => `<div>Details for ${row.name}</div>`,\n *   expandOnRowClick: true,\n * })\n * ```\n */\nexport class MasterDetailPlugin extends BaseGridPlugin<MasterDetailConfig> {\n  readonly name = 'masterDetail';\n  override readonly version = '1.0.0';\n\n  protected override get defaultConfig(): Partial<MasterDetailConfig> {\n    return {\n      enabled: true,\n      detailHeight: 'auto',\n      expandOnRowClick: false,\n      collapseOnClickOutside: false,\n      showExpandColumn: true,\n    };\n  }\n\n  // ===== Internal State =====\n  private expandedRows: Set<any> = new Set();\n  private detailElements: Map<any, HTMLElement> = new Map();\n\n  // ===== Lifecycle =====\n\n  override detach(): void {\n    this.expandedRows.clear();\n    this.detailElements.clear();\n  }\n\n  // ===== Hooks =====\n\n  override processColumns(\n    columns: readonly import('../../core/types').ColumnConfig[]\n  ): import('../../core/types').ColumnConfig[] {\n    if (!this.config.detailRenderer) {\n      return [...columns];\n    }\n\n    // Wrap first column's renderer to add expand/collapse toggle\n    const cols = [...columns];\n    if (cols.length > 0) {\n      const firstCol = { ...cols[0] };\n      const originalRenderer = firstCol.viewRenderer;\n\n      firstCol.viewRenderer = (renderCtx) => {\n        const { value, row } = renderCtx;\n        const isExpanded = this.expandedRows.has(row);\n\n        const container = document.createElement('span');\n        container.className = 'master-detail-cell-wrapper';\n\n        // Expand/collapse toggle icon\n        const toggle = document.createElement('span');\n        toggle.className = 'master-detail-toggle';\n        toggle.textContent = isExpanded ? '▼' : '▶';\n        toggle.setAttribute('aria-expanded', String(isExpanded));\n        toggle.setAttribute('aria-label', isExpanded ? 'Collapse details' : 'Expand details');\n        toggle.addEventListener('click', (e) => {\n          e.stopPropagation();\n          const rowIndex = this.rows.indexOf(row);\n          this.expandedRows = toggleDetailRow(this.expandedRows, row);\n          this.emit<DetailExpandDetail>('detail-expand', {\n            rowIndex,\n            row,\n            expanded: this.expandedRows.has(row),\n          });\n          this.requestRender();\n        });\n        container.appendChild(toggle);\n\n        // Cell content\n        const content = document.createElement('span');\n        if (originalRenderer) {\n          const rendered = originalRenderer(renderCtx);\n          if (rendered instanceof Node) {\n            content.appendChild(rendered);\n          } else {\n            content.textContent = String(rendered ?? value ?? '');\n          }\n        } else {\n          content.textContent = String(value ?? '');\n        }\n        container.appendChild(content);\n\n        return container;\n      };\n\n      cols[0] = firstCol;\n    }\n\n    return cols;\n  }\n\n  override onRowClick(event: RowClickEvent): boolean | void {\n    if (!this.config.expandOnRowClick || !this.config.detailRenderer) return;\n\n    this.expandedRows = toggleDetailRow(this.expandedRows, event.row);\n\n    this.emit<DetailExpandDetail>('detail-expand', {\n      rowIndex: event.rowIndex,\n      row: event.row,\n      expanded: this.expandedRows.has(event.row),\n    });\n\n    this.requestRender();\n    return false;\n  }\n\n  override afterRender(): void {\n    if (!this.config.detailRenderer) return;\n\n    const body = this.shadowRoot?.querySelector('.rows');\n    if (!body) return;\n\n    // Remove old detail rows\n    body.querySelectorAll('.master-detail-row').forEach((el) => el.remove());\n    this.detailElements.clear();\n\n    // Insert detail rows as last child of expanded row elements\n    const dataRows = body.querySelectorAll('.data-grid-row');\n    const columnCount = this.columns.length;\n\n    for (const rowEl of dataRows) {\n      const firstCell = rowEl.querySelector('.cell[data-row]');\n      const rowIndex = firstCell ? parseInt(firstCell.getAttribute('data-row') ?? '-1', 10) : -1;\n      if (rowIndex < 0) continue;\n\n      const row = this.rows[rowIndex];\n      if (!row || !this.expandedRows.has(row)) continue;\n\n      const detailEl = createDetailElement(row, rowIndex, this.config.detailRenderer, columnCount);\n\n      if (typeof this.config.detailHeight === 'number') {\n        detailEl.style.height = `${this.config.detailHeight}px`;\n      }\n\n      rowEl.appendChild(detailEl);\n      this.detailElements.set(row, detailEl);\n    }\n  }\n\n  // ===== Public API =====\n\n  /**\n   * Expand the detail row at the given index.\n   * @param rowIndex - Index of the row to expand\n   */\n  expand(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = expandDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Collapse the detail row at the given index.\n   * @param rowIndex - Index of the row to collapse\n   */\n  collapse(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = collapseDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Toggle the detail row at the given index.\n   * @param rowIndex - Index of the row to toggle\n   */\n  toggle(rowIndex: number): void {\n    const row = this.rows[rowIndex];\n    if (row) {\n      this.expandedRows = toggleDetailRow(this.expandedRows, row);\n      this.requestRender();\n    }\n  }\n\n  /**\n   * Check if the detail row at the given index is expanded.\n   * @param rowIndex - Index of the row to check\n   * @returns Whether the detail row is expanded\n   */\n  isExpanded(rowIndex: number): boolean {\n    const row = this.rows[rowIndex];\n    return row ? isDetailExpanded(this.expandedRows, row) : false;\n  }\n\n  /**\n   * Expand all detail rows.\n   */\n  expandAll(): void {\n    for (const row of this.rows) {\n      this.expandedRows.add(row);\n    }\n    this.requestRender();\n  }\n\n  /**\n   * Collapse all detail rows.\n   */\n  collapseAll(): void {\n    this.expandedRows.clear();\n    this.requestRender();\n  }\n\n  /**\n   * Get the indices of all expanded rows.\n   * @returns Array of row indices that are expanded\n   */\n  getExpandedRows(): number[] {\n    const indices: number[] = [];\n    for (const row of this.expandedRows) {\n      const idx = this.rows.indexOf(row);\n      if (idx >= 0) indices.push(idx);\n    }\n    return indices;\n  }\n\n  /**\n   * Get the detail element for a specific row.\n   * @param rowIndex - Index of the row\n   * @returns The detail HTMLElement or undefined\n   */\n  getDetailElement(rowIndex: number): HTMLElement | undefined {\n    const row = this.rows[rowIndex];\n    return row ? this.detailElements.get(row) : undefined;\n  }\n\n  // ===== Styles =====\n\n  override readonly styles = `\n    .master-detail-cell-wrapper {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .master-detail-toggle {\n      cursor: pointer;\n      font-size: 10px;\n      opacity: 0.7;\n      user-select: none;\n    }\n    .master-detail-toggle:hover {\n      opacity: 1;\n    }\n    .master-detail-row {\n      grid-column: 1 / -1;\n      display: grid;\n      background: var(--tbw-master-detail-bg, var(--tbw-color-row-alt));\n      border-bottom: 1px solid var(--tbw-master-detail-border, var(--tbw-color-border));\n    }\n    .master-detail-cell {\n      padding: 16px;\n      overflow: auto;\n    }\n  `;\n}\n"],"names":["BaseGridPlugin","config","grid","PluginClass","eventName","detail","message","toggleDetailRow","expandedRows","row","newExpanded","expandDetailRow","collapseDetailRow","isDetailExpanded","createDetailElement","rowIndex","renderer","columnCount","detailRow","detailCell","content","MasterDetailPlugin","columns","cols","firstCol","originalRenderer","renderCtx","value","isExpanded","container","toggle","e","rendered","event","body","el","dataRows","rowEl","firstCell","detailEl","indices","idx"],"mappings":"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"}

package/lib/plugins/multi-sort/index.js

@@ -0,0 +1,270 @@
+class g {
+  /** 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, i) {
+    this.grid?.dispatchEvent?.(new CustomEvent(t, { detail: i, 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}`);
+  }
+}
+function m(e, t, i) {
+  return t.length ? [...e].sort((n, r) => {
+    for (const o of t) {
+      const d = i.find((l) => l.field === o.field)?.sortComparator ?? p, a = n[o.field], u = r[o.field], s = d(a, u, n, r);
+      if (s !== 0)
+        return o.direction === "asc" ? s : -s;
+    }
+    return 0;
+  }) : [...e];
+}
+function p(e, t) {
+  return e == null && t == null ? 0 : e == null ? 1 : t == null ? -1 : typeof e == "number" && typeof t == "number" ? e - t : e instanceof Date && t instanceof Date ? e.getTime() - t.getTime() : typeof e == "boolean" && typeof t == "boolean" ? e === t ? 0 : e ? -1 : 1 : String(e).localeCompare(String(t));
+}
+function x(e, t, i, n) {
+  const r = e.find((o) => o.field === t);
+  return i ? r ? r.direction === "asc" ? e.map((o) => o.field === t ? { ...o, direction: "desc" } : o) : e.filter((o) => o.field !== t) : e.length < n ? [...e, { field: t, direction: "asc" }] : e : r?.direction === "asc" ? [{ field: t, direction: "desc" }] : r?.direction === "desc" ? [] : [{ field: t, direction: "asc" }];
+}
+function f(e, t) {
+  const i = e.findIndex((n) => n.field === t);
+  return i >= 0 ? i + 1 : void 0;
+}
+function h(e, t) {
+  return e.find((i) => i.field === t)?.direction;
+}
+class M extends g {
+  name = "multiSort";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      maxSortColumns: 3,
+      showSortIndex: !0
+    };
+  }
+  // ===== Internal State =====
+  sortModel = [];
+  // ===== Lifecycle =====
+  detach() {
+    this.sortModel = [];
+  }
+  // ===== Hooks =====
+  processRows(t) {
+    return this.sortModel.length === 0 ? [...t] : m([...t], this.sortModel, [...this.columns]);
+  }
+  onHeaderClick(t) {
+    if (!this.columns.find((o) => o.field === t.field)?.sortable) return !1;
+    const n = t.originalEvent.shiftKey, r = this.config.maxSortColumns ?? 3;
+    return this.sortModel = x(this.sortModel, t.field, n, r), this.emit("sort-change", { sortModel: [...this.sortModel] }), this.requestRender(), !0;
+  }
+  afterRender() {
+    const t = this.shadowRoot;
+    if (!t) return;
+    const i = this.config.showSortIndex !== !1;
+    t.querySelectorAll(".header-row .cell[data-field]").forEach((r) => {
+      const o = r.getAttribute("data-field");
+      if (!o) return;
+      const c = f(this.sortModel, o), d = h(this.sortModel, o);
+      if (r.querySelector(".sort-index")?.remove(), d) {
+        r.querySelector('[part~="sort-indicator"], .sort-indicator')?.remove(), r.setAttribute("data-sort", d);
+        const s = document.createElement("span");
+        if (s.className = "sort-indicator", s.style.marginLeft = "4px", s.style.opacity = "0.8", s.textContent = d === "asc" ? "▲" : "▼", r.appendChild(s), i && this.sortModel.length > 1 && c !== void 0) {
+          const l = document.createElement("span");
+          l.className = "sort-index", l.textContent = String(c), r.appendChild(l);
+        }
+      } else
+        r.removeAttribute("data-sort");
+    });
+  }
+  // ===== Public API =====
+  /**
+   * Get the current sort model.
+   * @returns Copy of the current sort model
+   */
+  getSortModel() {
+    return [...this.sortModel];
+  }
+  /**
+   * Set the sort model programmatically.
+   * @param model - New sort model to apply
+   */
+  setSortModel(t) {
+    this.sortModel = [...t], this.emit("sort-change", { sortModel: [...t] }), this.requestRender();
+  }
+  /**
+   * Clear all sorting.
+   */
+  clearSort() {
+    this.sortModel = [], this.emit("sort-change", { sortModel: [] }), this.requestRender();
+  }
+  /**
+   * Get the sort index (1-based) for a specific field.
+   * @param field - Field to check
+   * @returns 1-based index or undefined if not sorted
+   */
+  getSortIndex(t) {
+    return f(this.sortModel, t);
+  }
+  /**
+   * Get the sort direction for a specific field.
+   * @param field - Field to check
+   * @returns Sort direction or undefined if not sorted
+   */
+  getSortDirection(t) {
+    return h(this.sortModel, t);
+  }
+  // ===== Column State Hooks =====
+  /**
+   * Return sort state for a column if it's in the sort model.
+   */
+  getColumnState(t) {
+    const i = this.sortModel.findIndex((r) => r.field === t);
+    return i === -1 ? void 0 : {
+      sort: {
+        direction: this.sortModel[i].direction,
+        priority: i
+      }
+    };
+  }
+  /**
+   * Apply sort state from column state.
+   * Rebuilds the sort model from all column states.
+   */
+  applyColumnState(t, i) {
+    if (!i.sort) {
+      this.sortModel = this.sortModel.filter((o) => o.field !== t);
+      return;
+    }
+    const n = this.sortModel.findIndex((o) => o.field === t), r = {
+      field: t,
+      direction: i.sort.direction
+    };
+    n !== -1 ? this.sortModel[n] = r : this.sortModel.splice(i.sort.priority, 0, r);
+  }
+  // ===== Styles =====
+  styles = `
+    .header-cell[data-sort="asc"]::after {
+      content: '↑';
+      margin-left: 4px;
+      opacity: 0.8;
+    }
+    .header-cell[data-sort="desc"]::after {
+      content: '↓';
+      margin-left: 4px;
+      opacity: 0.8;
+    }
+    .sort-index {
+      font-size: 10px;
+      background: var(--tbw-multi-sort-badge-bg, var(--tbw-color-panel-bg));
+      color: var(--tbw-multi-sort-badge-color, var(--tbw-color-fg));
+      border-radius: 50%;
+      width: 14px;
+      height: 14px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 2px;
+      font-weight: 600;
+    }
+  `;
+}
+export {
+  M as MultiSortPlugin
+};
+//# sourceMappingURL=index.js.map