@toolbox-web/grid 1.14.1 → 1.16.0

package/lib/plugins/visibility/VisibilityPlugin.d.ts

@@ -1,4 +1,4 @@
-import { BaseGridPlugin, PluginDependency } from '../../core/plugin/base-plugin';
+import { BaseGridPlugin, PluginDependency, PluginManifest, PluginQuery } from '../../core/plugin/base-plugin';
 import { ToolPanelDefinition } from '../../core/types';
 import { VisibilityConfig } from './types';
 /**
@@ -106,6 +106,11 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
      * @internal
      */
     static readonly dependencies: PluginDependency[];
+    /**
+     * Plugin manifest - declares handled queries.
+     * @internal
+     */
+    static readonly manifest: PluginManifest;
     /** @internal */
     readonly name = "visibility";
     /** Tool panel ID for shell integration */
@@ -119,10 +124,22 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
     private draggedField;
     private draggedIndex;
     private dropIndex;
-    /** Clear drag-related classes from all rows in a list. */
+    /** When dragging a group, holds the group ID; null for individual column drags. */
+    private draggedGroupId;
+    /** Fields belonging to the group currently being dragged. */
+    private draggedGroupFields;
+    /** Clear drag-related classes from all rows and group headers in a list. */
     private clearDragClasses;
     /** @internal */
+    attach(grid: import('../../core/plugin/base-plugin').GridElement): void;
+    /** @internal */
     detach(): void;
+    /**
+     * Handle inter-plugin queries.
+     * Contributes a "Hide column" item to the header context menu.
+     * @internal
+     */
+    handleQuery(query: PluginQuery): unknown;
     /**
      * Register the column visibility tool panel with the shell.
      * @internal
@@ -216,9 +233,32 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
     private hasReorderPlugin;
     /**
      * Build the column toggle checkboxes.
+     * When GroupingColumnsPlugin is present, renders columns under collapsible group headers.
      * When a reorder plugin is present, adds drag handles for reordering.
      */
     private rebuildToggles;
+    /**
+     * Render a group section with header checkbox and indented column rows.
+     */
+    private renderGroupSection;
+    /**
+     * Render a flat (ungrouped) list of column rows.
+     */
+    private renderFlatColumnList;
+    /**
+     * Create a single column visibility row element.
+     */
+    private createColumnRow;
+    /**
+     * Set up drag-and-drop listeners for a group header row.
+     * Dragging a group moves all its member columns as a block.
+     */
+    private setupGroupDragListeners;
+    /**
+     * Execute a group drop — move the dragged group's fields as a block
+     * to the position relative to the target group or column.
+     */
+    private executeGroupDrop;
     /**
      * Set up drag-and-drop event listeners for a row.
      * On drop, emits a 'column-reorder-request' event for other plugins to handle.

package/lib/plugins/visibility/VisibilityPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisibilityPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/visibility/VisibilityPlugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EAAE,cAAc,EAAE,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACtF,OAAO,KAAK,EAAgB,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAGhD;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC,2CAA2C;IAC3C,KAAK,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,SAAS,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,OAAO,EAAE,MAAM,CAAC;CACjB;AAWD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE;;;;;OAKG;IACH,gBAAyB,YAAY,EAAE,gBAAgB,EAAE,CAEvD;IAEF,gBAAgB;IAChB,QAAQ,CAAC,IAAI,gBAAgB;IAE7B,0CAA0C;IAC1C,MAAM,CAAC,QAAQ,CAAC,QAAQ,aAAa;IACrC,gBAAgB;IAChB,SAAkB,MAAM,SAAU;IAElC,gBAAgB;IAChB,cAAuB,aAAa,IAAI,OAAO,CAAC,gBAAgB,CAAC,CAIhE;IAGD,OAAO,CAAC,iBAAiB,CAA4B;IAGrD,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,SAAS,CAAuB;IAExC,0DAA0D;IAC1D,OAAO,CAAC,gBAAgB;IASxB,gBAAgB;IACP,MAAM,IAAI,IAAI;IAWvB;;;OAGG;IACM,YAAY,IAAI,mBAAmB,GAAG,SAAS;IAcxD;;;OAGG;IACH,IAAI,IAAI,IAAI;IAQZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAIZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAQd;;;;;OAKG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAIvC;;;;;OAKG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAIvD;;;OAGG;IACH,iBAAiB,IAAI,MAAM,EAAE;IAO7B;;;OAGG;IACH,gBAAgB,IAAI,MAAM,EAAE;IAO5B;;;OAGG;IACH,OAAO,IAAI,IAAI;IAIf;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAIjC;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAI/B;;;;OAIG;IACH,aAAa,IAAI,KAAK,CAAC;QACrB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,OAAO,CAAC;QACjB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;IAIF;;;OAGG;IACH,cAAc,IAAI,OAAO;IAOzB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAoC1B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IA4DtB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;CAqF3B"}
+{"version":3,"file":"VisibilityPlugin.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/visibility/VisibilityPlugin.ts"],"names":[],"mappings":"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"}

package/lib/plugins/visibility/index.d.ts

@@ -4,7 +4,7 @@
  *
  * @module Plugins/Visibility
  */
-export type { ColumnVisibilityDetail, VisibilityConfig } from './types';
+export type { ColumnGroupInfo, ColumnVisibilityDetail, VisibilityConfig } from './types';
 export { VisibilityPlugin } from './VisibilityPlugin';
 export type { ColumnReorderRequestDetail } from './VisibilityPlugin';
 //# sourceMappingURL=index.d.ts.map

package/lib/plugins/visibility/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/visibility/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,YAAY,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../libs/grid/src/lib/plugins/visibility/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,YAAY,EAAE,eAAe,EAAE,sBAAsB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,YAAY,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC"}

package/lib/plugins/visibility/index.js

@@ -146,8 +146,8 @@ class C {
    * @returns `true` if the event was cancelled (preventDefault called), `false` otherwise
    */
   emitCancelable(e, t) {
-    const r = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
-    return this.grid?.dispatchEvent?.(r), r.defaultPrevented;
+    const i = new CustomEvent(e, { detail: t, bubbles: !0, cancelable: !0 });
+    return this.grid?.dispatchEvent?.(i), i.defaultPrevented;
   }
   // =========================================================================
   // Event Bus - Plugin-to-Plugin Communication
@@ -342,8 +342,8 @@ class C {
   get animationDuration() {
     const e = this.gridElement;
     if (e) {
-      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), r = parseInt(t, 10);
-      if (!isNaN(r)) return r;
+      const t = getComputedStyle(e).getPropertyValue("--tbw-animation-duration").trim(), i = parseInt(t, 10);
+      if (!isNaN(i)) return i;
     }
     return 200;
   }
@@ -377,12 +377,12 @@ class C {
   }
   // #endregion
 }
-const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}}';
-function p(b) {
-  const e = b.meta ?? {};
+const y = '@layer tbw-plugins{.tbw-visibility-content{display:flex;flex-direction:column;height:100%}.tbw-visibility-list{flex:1;overflow-y:auto;padding:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem))}.tbw-visibility-row{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));padding:var(--tbw-menu-item-padding, .375rem .25rem);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem);border-radius:var(--tbw-border-radius, .25rem);position:relative}.tbw-visibility-row:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-row.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-label{display:flex;align-items:center;gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem));flex:1;cursor:pointer}.tbw-visibility-row.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-row.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-show-all{margin:var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem));padding:var(--tbw-button-padding, .5rem .75rem);border:1px solid var(--tbw-visibility-border, var(--tbw-color-border));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg));color:var(--tbw-color-fg);cursor:pointer;font-size:var(--tbw-font-size-sm, .8125rem)}.tbw-visibility-show-all:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header{display:flex;align-items:center;padding:var(--tbw-menu-item-padding, .375rem .25rem);font-size:var(--tbw-font-size-sm, .8125rem);font-weight:600;color:var(--tbw-color-fg);border-bottom:1px solid var(--tbw-color-border);margin-top:var(--tbw-spacing-sm, .25rem);position:relative}.tbw-visibility-group-header:first-child{margin-top:0}.tbw-visibility-group-header .tbw-visibility-label{gap:var(--tbw-panel-gap, var(--tbw-spacing-md, .5rem))}.tbw-visibility-group-header.reorderable{cursor:grab}.tbw-visibility-group-header.reorderable:hover{background:var(--tbw-visibility-hover, var(--tbw-color-row-hover))}.tbw-visibility-group-header .tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted);font-size:var(--tbw-font-size-2xs, .625rem);letter-spacing:-2px;-webkit-user-select:none;user-select:none;flex-shrink:0}.tbw-visibility-group-header.reorderable:hover .tbw-visibility-handle{color:var(--tbw-color-fg)}.tbw-visibility-group-header.dragging{opacity:.5;cursor:grabbing}.tbw-visibility-group-header.drop-before:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-group-header.drop-after:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--tbw-visibility-indicator, var(--tbw-color-accent))}.tbw-visibility-row--grouped{padding-left:calc(var(--tbw-panel-padding, var(--tbw-spacing-md, .5rem)) + .75rem)}}';
+function v(f) {
+  const e = f.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class g extends C {
+class b extends C {
   /**
    * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
    *
@@ -392,6 +392,18 @@ class g extends C {
   static dependencies = [
     { name: "reorder", required: !1, reason: "Enables drag-to-reorder columns in visibility panel" }
   ];
+  /**
+   * Plugin manifest - declares handled queries.
+   * @internal
+   */
+  static manifest = {
+    queries: [
+      {
+        type: "getContextMenuItems",
+        description: 'Contributes "Hide column" item to the header context menu'
+      }
+    ]
+  };
   /** @internal */
   name = "visibility";
   /** Tool panel ID for shell integration */
@@ -411,19 +423,58 @@ class g extends C {
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
-  /** Clear drag-related classes from all rows in a list. */
+  /** When dragging a group, holds the group ID; null for individual column drags. */
+  draggedGroupId = null;
+  /** Fields belonging to the group currently being dragged. */
+  draggedGroupFields = [];
+  /** Clear drag-related classes from all rows and group headers in a list. */
   clearDragClasses(e) {
-    e.querySelectorAll(".tbw-visibility-row").forEach((t) => {
+    e.querySelectorAll(".tbw-visibility-row, .tbw-visibility-group-header").forEach((t) => {
       t.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
     });
   }
   // #endregion
   // #region Lifecycle
   /** @internal */
+  attach(e) {
+    super.attach(e), e.addEventListener(
+      "column-move",
+      () => {
+        this.columnListElement && requestAnimationFrame(() => {
+          this.columnListElement && this.rebuildToggles(this.columnListElement);
+        });
+      },
+      { signal: this.disconnectSignal }
+    );
+  }
+  /** @internal */
   detach() {
     this.columnListElement = null, this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
   }
   // #endregion
+  // #region Query Handlers
+  /**
+   * Handle inter-plugin queries.
+   * Contributes a "Hide column" item to the header context menu.
+   * @internal
+   */
+  handleQuery(e) {
+    if (e.type === "getContextMenuItems") {
+      const t = e.context;
+      if (!t.isHeader) return;
+      const i = t.column;
+      return !i?.field || i.meta?.lockVisibility ? void 0 : [
+        {
+          id: "visibility/hide-column",
+          label: "Hide Column",
+          icon: "👁",
+          order: 30,
+          action: () => this.hideColumn(i.field)
+        }
+      ];
+    }
+  }
+  // #endregion
   // #region Shell Integration
   /**
    * Register the column visibility tool panel with the shell.
@@ -431,7 +482,7 @@ class g extends C {
    */
   getToolPanel() {
     return {
-      id: g.PANEL_ID,
+      id: b.PANEL_ID,
       title: "Columns",
       icon: "☰",
       tooltip: "Column visibility",
@@ -447,7 +498,7 @@ class g extends C {
    * Opens the tool panel and ensures this section is expanded.
    */
   show() {
-    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(g.PANEL_ID) || this.grid.toggleToolPanelSection(g.PANEL_ID);
+    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(b.PANEL_ID) || this.grid.toggleToolPanelSection(b.PANEL_ID);
   }
   /**
    * Hide the visibility sidebar panel.
@@ -459,7 +510,7 @@ class g extends C {
    * Toggle the visibility sidebar panel section.
    */
   toggle() {
-    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(g.PANEL_ID);
+    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(b.PANEL_ID);
   }
   /**
    * Check if a specific column is visible.
@@ -537,7 +588,7 @@ class g extends C {
    * @returns True if the panel section is expanded
    */
   isPanelVisible() {
-    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(g.PANEL_ID);
+    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(b.PANEL_ID);
   }
   // #endregion
   // #region Private Methods
@@ -548,12 +599,12 @@ class g extends C {
   renderPanelContent(e) {
     const t = document.createElement("div");
     t.className = "tbw-visibility-content";
-    const r = document.createElement("div");
-    r.className = "tbw-visibility-list", t.appendChild(r);
-    const s = document.createElement("button");
-    return s.className = "tbw-visibility-show-all", s.textContent = "Show All", s.addEventListener("click", () => {
-      this.grid.showAllColumns(), this.rebuildToggles(r);
-    }), t.appendChild(s), this.columnListElement = r, this.rebuildToggles(r), e.appendChild(t), () => {
+    const i = document.createElement("div");
+    i.className = "tbw-visibility-list", t.appendChild(i);
+    const l = document.createElement("button");
+    return l.className = "tbw-visibility-show-all", l.textContent = "Show All", l.addEventListener("click", () => {
+      this.grid.showAllColumns(), this.rebuildToggles(i);
+    }), t.appendChild(l), this.columnListElement = i, this.rebuildToggles(i), e.appendChild(t), () => {
       this.columnListElement = null, t.remove();
     };
   }
@@ -566,68 +617,177 @@ class g extends C {
   }
   /**
    * Build the column toggle checkboxes.
+   * When GroupingColumnsPlugin is present, renders columns under collapsible group headers.
    * When a reorder plugin is present, adds drag handles for reordering.
    */
   rebuildToggles(e) {
     const t = this.hasReorderPlugin();
     e.innerHTML = "";
-    const r = this.grid.getAllColumns().filter((s) => !s.utility);
-    for (let s = 0; s < r.length; s++) {
-      const i = r[s], a = i.header || i.field, n = document.createElement("div");
-      n.className = i.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", i.field), n.setAttribute("data-index", String(s)), t && p(i) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, i.field, s, e));
-      const l = document.createElement("label");
-      l.className = "tbw-visibility-label";
-      const o = document.createElement("input");
-      o.type = "checkbox", o.checked = i.visible, o.disabled = i.lockVisible ?? !1, o.addEventListener("change", () => {
-        this.grid.toggleColumnVisibility(i.field), setTimeout(() => this.rebuildToggles(e), 0);
-      });
-      const d = document.createElement("span");
-      if (d.textContent = a, l.appendChild(o), l.appendChild(d), t && p(i)) {
-        const c = document.createElement("span");
-        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", n.appendChild(c);
+    const i = this.grid.getAllColumns().filter((o) => !o.utility), r = this.grid.query("getColumnGrouping")?.flat().filter((o) => o && o.fields.length > 0) ?? [];
+    if (r.length === 0) {
+      this.renderFlatColumnList(i, t, e);
+      return;
+    }
+    const n = /* @__PURE__ */ new Map();
+    for (const o of r)
+      for (const a of o.fields) n.set(a, o);
+    const s = /* @__PURE__ */ new Set();
+    for (const o of i) {
+      const a = n.get(o.field);
+      if (a) {
+        if (!s.has(a.id)) {
+          s.add(a.id);
+          const g = new Set(a.fields), u = i.filter((d) => g.has(d.field));
+          u.length > 0 && this.renderGroupSection(a, u, t, e);
+        }
+      } else {
+        const g = i.indexOf(o);
+        e.appendChild(this.createColumnRow(o, g, t, e));
       }
-      n.appendChild(l), e.appendChild(n);
     }
   }
+  /**
+   * Render a group section with header checkbox and indented column rows.
+   */
+  renderGroupSection(e, t, i, l) {
+    const r = document.createElement("div");
+    r.className = "tbw-visibility-group-header", r.setAttribute("data-group-id", e.id), i && (r.draggable = !0, r.classList.add("reorderable"), this.setupGroupDragListeners(r, e, l));
+    const n = document.createElement("label");
+    n.className = "tbw-visibility-label";
+    const s = document.createElement("input");
+    s.type = "checkbox";
+    const o = t.filter((d) => d.visible).length, a = t.every((d) => d.lockVisible);
+    o === t.length ? (s.checked = !0, s.indeterminate = !1) : o === 0 ? (s.checked = !1, s.indeterminate = !1) : (s.checked = !1, s.indeterminate = !0), s.disabled = a, s.addEventListener("change", () => {
+      const d = s.checked;
+      for (const c of t)
+        c.lockVisible || this.grid.setColumnVisible(c.field, d);
+      setTimeout(() => this.rebuildToggles(l), 0);
+    });
+    const g = document.createElement("span");
+    if (g.textContent = e.label, n.appendChild(s), n.appendChild(g), r.appendChild(n), i) {
+      const d = document.createElement("span");
+      d.className = "tbw-visibility-handle", this.setIcon(d, this.resolveIcon("dragHandle")), d.title = "Drag to reorder group", r.insertBefore(d, n);
+    }
+    l.appendChild(r);
+    const u = this.grid.getAllColumns().filter((d) => !d.utility);
+    for (const d of t) {
+      const c = u.findIndex((h) => h.field === d.field), p = this.createColumnRow(d, c, i, l);
+      p.classList.add("tbw-visibility-row--grouped"), l.appendChild(p);
+    }
+  }
+  /**
+   * Render a flat (ungrouped) list of column rows.
+   */
+  renderFlatColumnList(e, t, i) {
+    const l = this.grid.getAllColumns().filter((r) => !r.utility);
+    for (const r of e) {
+      const n = l.findIndex((s) => s.field === r.field);
+      i.appendChild(this.createColumnRow(r, n, t, i));
+    }
+  }
+  /**
+   * Create a single column visibility row element.
+   */
+  createColumnRow(e, t, i, l) {
+    const r = e.header || e.field, n = document.createElement("div");
+    n.className = e.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", n.setAttribute("data-field", e.field), n.setAttribute("data-index", String(t)), i && v(e) && (n.draggable = !0, n.classList.add("reorderable"), this.setupDragListeners(n, e.field, t, l));
+    const s = document.createElement("label");
+    s.className = "tbw-visibility-label";
+    const o = document.createElement("input");
+    o.type = "checkbox", o.checked = e.visible, o.disabled = e.lockVisible ?? !1, o.addEventListener("change", () => {
+      this.grid.toggleColumnVisibility(e.field), setTimeout(() => this.rebuildToggles(l), 0);
+    });
+    const a = document.createElement("span");
+    if (a.textContent = r, s.appendChild(o), s.appendChild(a), i && v(e)) {
+      const g = document.createElement("span");
+      g.className = "tbw-visibility-handle", this.setIcon(g, this.resolveIcon("dragHandle")), g.title = "Drag to reorder", n.appendChild(g);
+    }
+    return n.appendChild(s), n;
+  }
+  /**
+   * Set up drag-and-drop listeners for a group header row.
+   * Dragging a group moves all its member columns as a block.
+   */
+  setupGroupDragListeners(e, t, i) {
+    e.addEventListener("dragstart", (l) => {
+      this.isDragging = !0, this.draggedGroupId = t.id, this.draggedGroupFields = [...t.fields], this.draggedField = null, this.draggedIndex = null, l.dataTransfer && (l.dataTransfer.effectAllowed = "move", l.dataTransfer.setData("text/plain", `group:${t.id}`)), e.classList.add("dragging"), i.querySelectorAll(".tbw-visibility-row--grouped").forEach((r) => {
+        const n = r.getAttribute("data-field");
+        n && this.draggedGroupFields.includes(n) && r.classList.add("dragging");
+      });
+    }), e.addEventListener("dragend", () => {
+      this.isDragging = !1, this.draggedGroupId = null, this.draggedGroupFields = [], this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(i);
+    }), e.addEventListener("dragover", (l) => {
+      if (l.preventDefault(), !this.isDragging || this.draggedGroupId === t.id || !this.draggedGroupId) return;
+      const r = e.getBoundingClientRect(), n = r.top + r.height / 2, s = l.clientY < n;
+      this.clearDragClasses(i), e.classList.add("drop-target"), e.classList.toggle("drop-before", s), e.classList.toggle("drop-after", !s);
+    }), e.addEventListener("dragleave", () => {
+      e.classList.remove("drop-target", "drop-before", "drop-after");
+    }), e.addEventListener("drop", (l) => {
+      if (l.preventDefault(), !this.isDragging || !this.draggedGroupId || this.draggedGroupId === t.id) return;
+      const r = e.getBoundingClientRect(), n = l.clientY < r.top + r.height / 2;
+      this.executeGroupDrop(this.draggedGroupFields, t.fields, n, i);
+    });
+  }
+  /**
+   * Execute a group drop — move the dragged group's fields as a block
+   * to the position relative to the target group or column.
+   */
+  executeGroupDrop(e, t, i, l) {
+    const n = this.grid.getAllColumns().map((d) => d.field), s = n.filter((d) => !e.includes(d)), o = i ? t[0] : t[t.length - 1], a = s.indexOf(o);
+    if (a === -1) return;
+    const g = i ? a : a + 1, u = n.filter((d) => e.includes(d));
+    s.splice(g, 0, ...u), this.grid.setColumnOrder(s), requestAnimationFrame(() => {
+      this.columnListElement && this.rebuildToggles(this.columnListElement);
+    });
+  }
   /**
    * 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, r, s) {
-    e.addEventListener("dragstart", (i) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = r, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+  setupDragListeners(e, t, i, l) {
+    e.addEventListener("dragstart", (r) => {
+      this.isDragging = !0, this.draggedField = t, this.draggedIndex = i, this.draggedGroupId = null, this.draggedGroupFields = [], r.dataTransfer && (r.dataTransfer.effectAllowed = "move", r.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
     }), e.addEventListener("dragend", () => {
-      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(s);
-    }), e.addEventListener("dragover", (i) => {
-      if (i.preventDefault(), !this.isDragging || this.draggedField === t) return;
-      const a = e.getBoundingClientRect(), n = a.top + a.height / 2;
-      this.dropIndex = i.clientY < n ? r : r + 1, s.querySelectorAll(".tbw-visibility-row").forEach((l) => {
-        l !== e && l.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);
+      this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null, this.clearDragClasses(l);
+    }), e.addEventListener("dragover", (r) => {
+      if (r.preventDefault(), !this.isDragging) return;
+      if (this.draggedGroupId) {
+        if (e.classList.contains("tbw-visibility-row--grouped")) return;
+      } else if (this.draggedField === t)
+        return;
+      const n = e.getBoundingClientRect(), s = n.top + n.height / 2;
+      this.dropIndex = r.clientY < s ? i : i + 1, this.clearDragClasses(l), this.draggedGroupId ? (l.querySelector(`.tbw-visibility-group-header[data-group-id="${this.draggedGroupId}"]`)?.classList.add("dragging"), l.querySelectorAll(".tbw-visibility-row--grouped").forEach((o) => {
+        const a = o.getAttribute("data-field");
+        a && this.draggedGroupFields.includes(a) && o.classList.add("dragging");
+      })) : this.draggedField && l.querySelector(`.tbw-visibility-row[data-field="${this.draggedField}"]`)?.classList.add("dragging"), e.classList.add("drop-target"), e.classList.toggle("drop-before", r.clientY < s), e.classList.toggle("drop-after", r.clientY >= s);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
-    }), e.addEventListener("drop", (i) => {
-      i.preventDefault();
-      const a = this.draggedField, n = this.draggedIndex, l = this.dropIndex;
-      if (!this.isDragging || a === null || n === null || l === null)
+    }), e.addEventListener("drop", (r) => {
+      if (r.preventDefault(), !this.isDragging) return;
+      if (this.draggedGroupId && this.draggedGroupFields.length > 0) {
+        if (e.classList.contains("tbw-visibility-row--grouped")) return;
+        const g = e.getBoundingClientRect(), u = r.clientY < g.top + g.height / 2;
+        this.executeGroupDrop(this.draggedGroupFields, [t], u, l);
+        return;
+      }
+      const n = this.draggedField, s = this.draggedIndex, o = this.dropIndex;
+      if (n === null || s === null || o === null)
         return;
-      const o = l > n ? l - 1 : l;
-      if (o !== n) {
-        const d = this.grid.getAllColumns(), h = d.filter((u) => !u.utility)[o]?.field, v = h ? d.findIndex((u) => u.field === h) : d.length, f = {
-          field: a,
-          fromIndex: n,
+      const a = o > s ? o - 1 : o;
+      if (a !== s) {
+        const g = this.grid.getAllColumns(), d = g.filter((h) => !h.utility)[a]?.field, c = d ? g.findIndex((h) => h.field === d) : g.length, p = {
+          field: n,
+          fromIndex: s,
           // Not used by ReorderPlugin, just for info
-          toIndex: v
+          toIndex: c
         };
-        this.emit("column-reorder-request", f), setTimeout(() => {
-          this.rebuildToggles(s);
-        }, 0);
+        this.emit("column-reorder-request", p);
       }
     });
   }
   // #endregion
 }
 export {
-  g as VisibilityPlugin
+  b as VisibilityPlugin
 };
 //# sourceMappingURL=index.js.map