@toolbox-web/grid 0.4.1 → 0.5.0

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

@@ -28,15 +28,17 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
      */
     static readonly dependencies: PluginDependency[];
     readonly name = "visibility";
-    readonly version = "1.0.0";
     /** Tool panel ID for shell integration */
     static readonly PANEL_ID = "columns";
+    readonly styles: string;
     protected get defaultConfig(): Partial<VisibilityConfig>;
     private columnListElement;
     private isDragging;
     private draggedField;
     private draggedIndex;
     private dropIndex;
+    /** Clear drag-related classes from all rows in a list. */
+    private clearDragClasses;
     detach(): void;
     /**
      * Register the column visibility tool panel with the shell.
@@ -44,6 +46,7 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
     getToolPanel(): ToolPanelDefinition | undefined;
     /**
      * Show the visibility sidebar panel.
+     * Opens the tool panel and ensures this section is expanded.
      */
     show(): void;
     /**
@@ -51,7 +54,7 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
      */
     hide(): void;
     /**
-     * Toggle the visibility sidebar panel.
+     * Toggle the visibility sidebar panel section.
      */
     toggle(): void;
     /**
@@ -111,10 +114,11 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
         header: string;
         visible: boolean;
         lockVisible?: boolean;
+        utility?: boolean;
     }>;
     /**
      * Check if the sidebar panel is currently open.
-     * @returns True if the panel is open
+     * @returns True if the panel section is expanded
      */
     isPanelVisible(): boolean;
     /**
@@ -136,6 +140,5 @@ export declare class VisibilityPlugin extends BaseGridPlugin<VisibilityConfig> {
      * On drop, emits a 'column-reorder-request' event for other plugins to handle.
      */
     private setupDragListeners;
-    readonly styles: string;
 }
 //# sourceMappingURL=VisibilityPlugin.d.ts.map

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;AA0BD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE;;;;OAIG;IACH,gBAAyB,YAAY,EAAE,gBAAgB,EAAE,CAEvD;IAEF,QAAQ,CAAC,IAAI,gBAAgB;IAC7B,SAAkB,OAAO,WAAW;IAEpC,0CAA0C;IAC1C,MAAM,CAAC,QAAQ,CAAC,QAAQ,aAAa;IAErC,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;IAK/B,MAAM,IAAI,IAAI;IAWvB;;OAEG;IACM,YAAY,IAAI,mBAAmB,GAAG,SAAS;IAcxD;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,IAAI,IAAI,IAAI;IAKZ;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;;;;OAKG;IACH,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;IAKvC;;;;;OAKG;IACH,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAKvD;;;OAGG;IACH,iBAAiB,IAAI,MAAM,EAAE;IAQ7B;;;OAGG;IACH,gBAAgB,IAAI,MAAM,EAAE;IAQ5B;;;OAGG;IACH,OAAO,IAAI,IAAI;IAKf;;;;OAIG;IACH,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAKjC;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK/B;;;;OAIG;IACH,aAAa,IAAI,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,OAAO,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC;IAKlG;;;OAGG;IACH,cAAc,IAAI,OAAO;IAQzB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAsC1B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAMxB;;;OAGG;IACH,OAAO,CAAC,cAAc;IA4DtB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAiF1B,SAAkB,MAAM,SAAU;CAEnC"}
+{"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;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,cAAc,CAAC,gBAAgB,CAAC;IACpE;;;;OAIG;IACH,gBAAyB,YAAY,EAAE,gBAAgB,EAAE,CAEvD;IAEF,QAAQ,CAAC,IAAI,gBAAgB;IAE7B,0CAA0C;IAC1C,MAAM,CAAC,QAAQ,CAAC,QAAQ,aAAa;IACrC,SAAkB,MAAM,SAAU;IAElC,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;IASf,MAAM,IAAI,IAAI;IAWvB;;OAEG;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"}

package/lib/plugins/visibility/index.js

@@ -1,4 +1,4 @@
-const p = {
+const v = {
   expand: "▶",
   collapse: "▼",
   sortAsc: "▲",
@@ -8,7 +8,7 @@ const p = {
   dragHandle: "⋮⋮",
   toolPanel: "☰"
 };
-class f {
+class w {
   /**
    * Plugin dependencies - declare other plugins this one requires.
    *
@@ -25,8 +25,11 @@ class f {
    * ```
    */
   static dependencies;
-  /** Plugin version - override in subclass if needed */
-  version = "1.0.0";
+  /**
+   * Plugin version - defaults to grid version for built-in plugins.
+   * Third-party plugins can override with their own semver.
+   */
+  version = typeof __GRID_VERSION__ < "u" ? __GRID_VERSION__ : "dev";
   /** CSS styles to inject into the grid's shadow DOM */
   styles;
   /** Custom cell renderers keyed by type name */
@@ -113,12 +116,28 @@ class f {
   emit(e, t) {
     this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
   }
+  /**
+   * Emit a cancelable custom event from the grid.
+   * @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;
+  }
   /**
    * Request a re-render of the grid.
    */
   requestRender() {
     this.grid?.requestRender?.();
   }
+  /**
+   * Request a re-render and restore focus styling afterward.
+   * Use this when a plugin action (like expand/collapse) triggers a render
+   * but needs to maintain keyboard navigation focus.
+   */
+  requestRenderWithFocus() {
+    this.grid?.requestRenderWithFocus?.();
+  }
   /**
    * Request a lightweight style update without rebuilding DOM.
    * Use this instead of requestRender() when only CSS classes need updating.
@@ -153,10 +172,34 @@ class f {
     return this.grid?._visibleColumns ?? [];
   }
   /**
-   * Get the shadow root of the grid.
+   * Get the grid as an HTMLElement for direct DOM operations.
+   * Use sparingly - prefer the typed GridElementRef API when possible.
+   *
+   * @example
+   * ```ts
+   * const width = this.gridElement.clientWidth;
+   * this.gridElement.classList.add('my-plugin-active');
+   * ```
+   */
+  get gridElement() {
+    return this.grid;
+  }
+  /**
+   * Get the render root of the grid for DOM queries.
+   * @deprecated Use `gridElement` instead. This getter exists only for backward compatibility.
+   *
+   * With Shadow DOM removed, the grid element itself is the render root.
+   * All new code should use `this.gridElement` for DOM queries.
+   *
+   * @example
+   * // OLD (deprecated)
+   * const rows = this.shadowRoot?.querySelector('.rows');
+   *
+   * // NEW (preferred)
+   * const rows = this.gridElement.querySelector('.rows');
    */
   get shadowRoot() {
-    return this.grid?.shadowRoot ?? null;
+    return this.gridElement;
   }
   /**
    * Get the disconnect signal for event listener cleanup.
@@ -184,8 +227,53 @@ class f {
    */
   get gridIcons() {
     const e = this.grid?.gridConfig?.icons ?? {};
-    return { ...p, ...e };
+    return { ...v, ...e };
+  }
+  // #region Animation Helpers
+  /**
+   * Check if animations are enabled at the grid level.
+   * Respects gridConfig.animation.mode and the CSS variable set by the grid.
+   *
+   * Plugins should use this to skip animations when:
+   * - Animation mode is 'off' or `false`
+   * - User prefers reduced motion and mode is 'reduced-motion' (default)
+   *
+   * @example
+   * ```ts
+   * private get animationStyle(): 'slide' | 'fade' | false {
+   *   if (!this.isAnimationEnabled) return false;
+   *   return this.config.animation ?? 'slide';
+   * }
+   * ```
+   */
+  get isAnimationEnabled() {
+    const e = this.grid?.effectiveConfig?.animation?.mode ?? "reduced-motion";
+    if (e === !1 || e === "off") return !1;
+    if (e === !0 || e === "on") return !0;
+    const t = this.gridElement;
+    return t ? getComputedStyle(t).getPropertyValue("--tbw-animation-enabled").trim() !== "0" : !0;
   }
+  /**
+   * Get the animation duration in milliseconds from CSS variable.
+   * Falls back to 200ms if not set.
+   *
+   * Plugins can use this for their animation timing to stay consistent
+   * with the grid-level animation.duration setting.
+   *
+   * @example
+   * ```ts
+   * element.animate(keyframes, { duration: this.animationDuration });
+   * ```
+   */
+  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;
+    }
+    return 200;
+  }
+  // #endregion
   /**
    * Resolve an icon value to string or HTMLElement.
    * Checks plugin config first, then grid-level icons, then defaults.
@@ -215,12 +303,12 @@ class f {
   }
   // #endregion
 }
-const v = '.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)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);font-size:10px;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, #1f2937)}.tbw-visibility-label{display:flex;align-items:center;gap:8px;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-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))}';
-function h(u) {
-  const e = u.meta ?? {};
+const C = '@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, #f3f4f6))}.tbw-visibility-row input[type=checkbox]{cursor:pointer}.tbw-visibility-row.locked span{color:var(--tbw-color-fg-muted, #888)}.tbw-visibility-handle{cursor:grab;color:var(--tbw-color-fg-muted, #888);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, #1f2937)}.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-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: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, #e5e7eb));border-radius:var(--tbw-border-radius, .25rem);background:var(--tbw-visibility-btn-bg, var(--tbw-color-header-bg, #f9fafb));color:var(--tbw-color-fg, #1f2937);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, #f3f4f6))}}';
+function m(b) {
+  const e = b.meta ?? {};
   return e.lockPosition !== !0 && e.suppressMovable !== !0;
 }
-class g extends f {
+class g extends w {
   /**
    * Plugin dependencies - VisibilityPlugin optionally uses ReorderPlugin for drag-drop reordering.
    *
@@ -230,9 +318,9 @@ class g extends f {
     { name: "reorder", required: !1, reason: "Enables drag-to-reorder columns in visibility panel" }
   ];
   name = "visibility";
-  version = "1.0.0";
   /** Tool panel ID for shell integration */
   static PANEL_ID = "columns";
+  styles = C;
   get defaultConfig() {
     return {
       allowHideAll: !1
@@ -245,6 +333,12 @@ class g extends f {
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
+  /** Clear drag-related classes from all rows in a list. */
+  clearDragClasses(e) {
+    e.querySelectorAll(".tbw-visibility-row").forEach((t) => {
+      t.classList.remove("dragging", "drop-target", "drop-before", "drop-after");
+    });
+  }
   // #endregion
   // #region Lifecycle
   detach() {
@@ -270,9 +364,10 @@ class g extends f {
   // #region Public API
   /**
    * Show the visibility sidebar panel.
+   * Opens the tool panel and ensures this section is expanded.
    */
   show() {
-    this.grid.openToolPanel(g.PANEL_ID);
+    this.grid.openToolPanel(), this.grid.expandedToolPanelSections.includes(g.PANEL_ID) || this.grid.toggleToolPanelSection(g.PANEL_ID);
   }
   /**
    * Hide the visibility sidebar panel.
@@ -281,10 +376,10 @@ class g extends f {
     this.grid.closeToolPanel();
   }
   /**
-   * Toggle the visibility sidebar panel.
+   * Toggle the visibility sidebar panel section.
    */
   toggle() {
-    this.grid.toggleToolPanel(g.PANEL_ID);
+    this.grid.isToolPanelOpen || this.grid.openToolPanel(), this.grid.toggleToolPanelSection(g.PANEL_ID);
   }
   /**
    * Check if a specific column is visible.
@@ -309,14 +404,14 @@ class g extends f {
    * @returns Array of visible field names
    */
   getVisibleColumns() {
-    return this.grid.getAllColumns().filter((t) => t.visible).map((t) => t.field);
+    return this.grid.getAllColumns().filter((e) => e.visible).map((e) => e.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);
+    return this.grid.getAllColumns().filter((e) => !e.visible).map((e) => e.field);
   }
   /**
    * Show all columns.
@@ -339,7 +434,7 @@ class g extends f {
    * @param field - The field name of the column to show
    */
   showColumn(e) {
-    this.grid.setColumnVisible(e, !0);
+    this.setColumnVisible(e, !0);
   }
   /**
    * Hide a specific column.
@@ -347,7 +442,7 @@ class g extends f {
    * @param field - The field name of the column to hide
    */
   hideColumn(e) {
-    this.grid.setColumnVisible(e, !1);
+    this.setColumnVisible(e, !1);
   }
   /**
    * Get all columns with their visibility status.
@@ -359,10 +454,10 @@ class g extends f {
   }
   /**
    * Check if the sidebar panel is currently open.
-   * @returns True if the panel is open
+   * @returns True if the panel section is expanded
    */
   isPanelVisible() {
-    return this.grid.activeToolPanel === g.PANEL_ID;
+    return this.grid.isToolPanelOpen && this.grid.expandedToolPanelSections.includes(g.PANEL_ID);
   }
   // #endregion
   // #region Private Methods
@@ -371,15 +466,15 @@ class g extends f {
    * Returns a cleanup function.
    */
   renderPanelContent(e) {
-    const t = this.grid, l = document.createElement("div");
-    l.className = "tbw-visibility-content";
-    const o = document.createElement("div");
-    o.className = "tbw-visibility-list", l.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);
-    }), l.appendChild(i), this.columnListElement = o, this.rebuildToggles(o), e.appendChild(l), () => {
-      this.columnListElement = null, l.remove();
+    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), () => {
+      this.columnListElement = null, t.remove();
     };
   }
   /**
@@ -394,67 +489,63 @@ class g extends f {
    * When a reorder plugin is present, adds drag handles for reordering.
    */
   rebuildToggles(e) {
-    const t = this.grid, l = this.hasReorderPlugin();
+    const t = this.hasReorderPlugin();
     e.innerHTML = "";
-    const o = t.getAllColumns();
-    for (let i = 0; i < o.length; i++) {
-      const s = o[i], n = s.header || s.field, r = document.createElement("div");
-      r.className = s.lockVisible ? "tbw-visibility-row locked" : "tbw-visibility-row", r.setAttribute("data-field", s.field), r.setAttribute("data-index", String(i)), l && h(s) && (r.draggable = !0, r.classList.add("reorderable"), this.setupDragListeners(r, s.field, i, e));
-      const d = document.createElement("label");
-      d.className = "tbw-visibility-label";
-      const a = document.createElement("input");
-      a.type = "checkbox", a.checked = s.visible, a.disabled = s.lockVisible ?? !1, a.addEventListener("change", () => {
-        t.toggleColumnVisibility(s.field), setTimeout(() => this.rebuildToggles(e), 0);
+    const r = this.grid.getAllColumns().filter((s) => !s.utility);
+    for (let s = 0; s < r.length; s++) {
+      const i = r[s], d = 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 && m(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 b = document.createElement("span");
-      if (b.textContent = n, d.appendChild(a), d.appendChild(b), l && h(s)) {
+      const a = document.createElement("span");
+      if (a.textContent = d, l.appendChild(o), l.appendChild(a), t && m(i)) {
         const c = document.createElement("span");
-        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", r.appendChild(c);
+        c.className = "tbw-visibility-handle", this.setIcon(c, this.resolveIcon("dragHandle")), c.title = "Drag to reorder", n.appendChild(c);
       }
-      r.appendChild(d), e.appendChild(r);
+      n.appendChild(l), e.appendChild(n);
     }
   }
   /**
    * 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, l, o) {
+  setupDragListeners(e, t, r, s) {
     e.addEventListener("dragstart", (i) => {
-      this.isDragging = !0, this.draggedField = t, this.draggedIndex = l, i.dataTransfer && (i.dataTransfer.effectAllowed = "move", i.dataTransfer.setData("text/plain", t)), e.classList.add("dragging");
+      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");
     }), 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");
-      });
+      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 s = e.getBoundingClientRect(), n = s.top + s.height / 2;
-      this.dropIndex = i.clientY < n ? l : l + 1, o.querySelectorAll(".tbw-visibility-row").forEach((r) => {
-        r !== e && r.classList.remove("drop-target", "drop-before", "drop-after");
+      const d = e.getBoundingClientRect(), n = d.top + d.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);
     }), e.addEventListener("dragleave", () => {
       e.classList.remove("drop-target", "drop-before", "drop-after");
     }), e.addEventListener("drop", (i) => {
       i.preventDefault();
-      const s = this.draggedField, n = this.draggedIndex, r = this.dropIndex;
-      if (!this.isDragging || s === null || n === null || r === null)
+      const d = this.draggedField, n = this.draggedIndex, l = this.dropIndex;
+      if (!this.isDragging || d === null || n === null || l === null)
         return;
-      const d = r > n ? r - 1 : r;
-      if (d !== n) {
-        const a = {
-          field: s,
+      const o = l > n ? l - 1 : l;
+      if (o !== n) {
+        const a = this.grid.getAllColumns(), h = a.filter((u) => !u.utility)[o]?.field, f = h ? a.findIndex((u) => u.field === h) : a.length, p = {
+          field: d,
           fromIndex: n,
-          toIndex: d
+          // Not used by ReorderPlugin, just for info
+          toIndex: f
         };
-        this.emit("column-reorder-request", a), setTimeout(() => {
-          this.rebuildToggles(o);
+        this.emit("column-reorder-request", p), setTimeout(() => {
+          this.rebuildToggles(s);
         }, 0);
       }
     });
   }
   // #endregion
-  // #region Styles
-  styles = v;
-  // #endregion
 }
 export {
   g as VisibilityPlugin