@toolbox-web/grid 0.2.1 → 0.2.2

package/all.js

@@ -72,19 +72,22 @@ class mn extends x {
       quoteStrings: !1
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   /** The last copied text (for reference/debugging) */
   lastCopied = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.lastCopied = null;
   }
-  // ===== Event Handlers =====
+  // #endregion
+  // #region Event Handlers
   onKeyDown(e) {
     const t = (e.ctrlKey || e.metaKey) && e.key === "c", n = (e.ctrlKey || e.metaKey) && e.key === "v";
     return t ? (this.#t(e.target), !0) : n ? (this.#e(), !0) : !1;
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   /**
    * Handle copy operation
    */
@@ -209,7 +212,8 @@ class mn extends x {
       c = l == null ? "" : String(l);
     return { text: c, field: n, value: l };
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Copy currently selected rows to clipboard.
    * @returns The copied text
@@ -252,6 +256,7 @@ class mn extends x {
   getLastCopied() {
     return this.lastCopied;
   }
+  // #endregion
 }
 const de = 100;
 function Q(r) {
@@ -317,7 +322,7 @@ class wn extends x {
       overscan: 3
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   isVirtualized = !1;
   startCol = 0;
   endCol = 0;
@@ -325,7 +330,8 @@ class wn extends x {
   totalWidth = 0;
   columnWidths = [];
   columnOffsets = [];
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   attach(e) {
     super.attach(e);
     const t = this.columns;
@@ -334,7 +340,8 @@ class wn extends x {
   detach() {
     this.columnWidths = [], this.columnOffsets = [], this.isVirtualized = !1, this.startCol = 0, this.endCol = 0, this.scrollLeft = 0, this.totalWidth = 0;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processColumns(e) {
     const t = Ve(e.length, this.config.threshold ?? 30, this.config.autoEnable ?? !0);
     if (this.isVirtualized = t ?? !1, this.columnWidths = ce(e), this.columnOffsets = ue(e), this.totalWidth = he(e), !t)
@@ -362,7 +369,8 @@ class wn extends x {
   onScroll(e) {
     !this.isVirtualized || Math.abs(e.scrollLeft - this.scrollLeft) < 1 || (this.scrollLeft = e.scrollLeft, this.requestRender());
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Check if column virtualization is currently active.
    */
@@ -396,6 +404,7 @@ class wn extends x {
   getTotalWidth() {
     return this.totalWidth;
   }
+  // #endregion
 }
 const We = ".tbw-context-menu{position:fixed;background:light-dark(#f5f5f5,#2a2a2a);color:light-dark(#222,#eee);border:1px solid light-dark(#d0d0d4,#454545);border-radius:4px;box-shadow:0 2px 10px #00000026;min-width:160px;padding:4px 0;z-index:10000;font-size:13px;font-family:system-ui,sans-serif}.tbw-context-menu-item{display:flex;align-items:center;padding:6px 12px;cursor:pointer;gap:8px}.tbw-context-menu-item:hover:not(.disabled){background:light-dark(#e8e8e8,#3a3a3a)}.tbw-context-menu-item.disabled{opacity:.5;cursor:default}.tbw-context-menu-item.danger{color:light-dark(#c00,#f66)}.tbw-context-menu-icon{width:16px;text-align:center}.tbw-context-menu-label{flex:1}.tbw-context-menu-shortcut{color:light-dark(#888,#888);font-size:11px}.tbw-context-menu-arrow{font-size:10px;color:light-dark(#888,#888)}.tbw-context-menu-separator{height:1px;background:light-dark(#d0d0d4,#454545);margin:4px 0}";
 function Y(r, e) {
@@ -475,19 +484,21 @@ class bn extends x {
       items: O
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   isOpen = !1;
   position = { x: 0, y: 0 };
   params = null;
   menuElement = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   attach(e) {
     super.attach(e), this.installGlobalHandlers(), B++;
   }
   detach() {
     this.menuElement && (this.menuElement.remove(), this.menuElement = null), this.isOpen = !1, this.params = null, this.uninstallGlobalHandlers();
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   installGlobalHandlers() {
     !E && typeof document < "u" && (E = document.createElement("style"), E.id = "tbw-context-menu-styles", E.textContent = We, document.head.appendChild(E)), _ || (_ = () => {
       document.querySelectorAll(".tbw-context-menu").forEach((t) => t.remove());
@@ -502,7 +513,8 @@ class bn extends x {
   uninstallGlobalHandlers() {
     B--, !(B > 0) && (_ && (document.removeEventListener("click", _), _ = null), I && (document.removeEventListener("keydown", I), I = null), E && (E.remove(), E = null));
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
@@ -550,7 +562,8 @@ class bn extends x {
       ), document.body.appendChild(this.menuElement), ge(this.menuElement, o.clientX, o.clientY), this.isOpen = !0, this.emit("context-menu-open", { params: a, items: d }));
     }));
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Programmatically show the context menu at the specified position.
    * @param x - X coordinate
@@ -590,6 +603,7 @@ class bn extends x {
   isMenuOpen() {
     return this.isOpen;
   }
+  // #endregion
   // Styles are injected globally via installGlobalHandlers() since menu renders in document.body
 }
 function pe(r, e = !0) {
@@ -679,10 +693,11 @@ class vn extends x {
       onlySelected: !1
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   isExportingFlag = !1;
   lastExportInfo = null;
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   performExport(e, t) {
     const n = this.config, o = {
       format: e,
@@ -749,7 +764,8 @@ class vn extends x {
       return null;
     }
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Export data to CSV format.
    * @param params - Optional export parameters
@@ -785,6 +801,7 @@ class vn extends x {
   getLastExport() {
     return this.lastExportInfo;
   }
+  // #endregion
 }
 function Xe(r) {
   const { totalRows: e, viewportHeight: t, scrollTop: n, rowHeight: o, overscan: i } = r, s = Math.ceil(t / o);
@@ -864,148 +881,7 @@ function me(r, e) {
   }
   return [...t].sort((n, o) => typeof n == "number" && typeof o == "number" ? n - o : String(n).localeCompare(String(o)));
 }
-const nt = '.header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}.tbw-filter-btn:hover,.tbw-filter-btn.active{opacity:1}.tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', ot = `
-.tbw-filter-panel {
-  position: fixed;
-  background: var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));
-  color: var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));
-  border: 1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
-  border-radius: var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));
-  box-shadow: 0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0,0,0,0.1), rgba(0,0,0,0.3))));
-  padding: 12px;
-  z-index: 10000;
-  min-width: 200px;
-  max-width: 280px;
-  max-height: 350px;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--tbw-font-family, system-ui, sans-serif);
-  font-size: var(--tbw-font-size, 13px);
-}
-
-.tbw-filter-search {
-  margin-bottom: 8px;
-}
-
-.tbw-filter-search-input {
-  width: 100%;
-  padding: 6px 10px;
-  background: var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));
-  color: inherit;
-  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
-  border-radius: var(--tbw-filter-input-radius, 4px);
-  font-size: inherit;
-  box-sizing: border-box;
-}
-
-.tbw-filter-search-input:focus {
-  outline: none;
-  border-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
-  box-shadow: 0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%);
-}
-
-.tbw-filter-actions {
-  display: flex;
-  padding: 4px 2px;
-  margin-bottom: 8px;
-  border-bottom: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
-}
-
-.tbw-filter-action-btn {
-  background: transparent;
-  border: none;
-  color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
-  cursor: pointer;
-  font-size: 12px;
-  padding: 2px 0;
-}
-
-.tbw-filter-action-btn:hover {
-  text-decoration: underline;
-}
-
-.tbw-filter-values {
-  flex: 1;
-  overflow-y: auto;
-  margin-bottom: 8px;
-  max-height: 180px;
-  position: relative;
-}
-
-.tbw-filter-values-spacer {
-  width: 1px;
-}
-
-.tbw-filter-values-content {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-}
-
-.tbw-filter-value-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 4px 2px;
-  cursor: pointer;
-  border-radius: 3px;
-}
-
-.tbw-filter-value-item:hover {
-  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
-}
-
-.tbw-filter-checkbox {
-  margin: 0;
-  cursor: pointer;
-  accent-color: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
-}
-
-.tbw-filter-no-match {
-  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
-  padding: 8px 0;
-  text-align: center;
-  font-style: italic;
-}
-
-.tbw-filter-buttons {
-  display: flex;
-  gap: 8px;
-  padding-top: 8px;
-  border-top: 1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
-}
-
-.tbw-filter-apply-btn {
-  flex: 1;
-  padding: 6px 12px;
-  background: var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));
-  color: var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.tbw-filter-apply-btn:hover {
-  filter: brightness(0.9);
-}
-
-.tbw-filter-clear-btn {
-  flex: 1;
-  padding: 6px 12px;
-  background: transparent;
-  color: var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));
-  border: 1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 13px;
-}
-
-.tbw-filter-clear-btn:hover {
-  background: var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)));
-}
-`;
+const nt = '.header-cell.filtered:before{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));border-radius:50%}.tbw-filter-btn{display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;padding:2px;margin-left:4px;opacity:.4;transition:opacity .15s;color:inherit;vertical-align:middle}.tbw-filter-btn:hover,.tbw-filter-btn.active{opacity:1}.tbw-filter-btn.active{color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}', ot = ".tbw-filter-panel{position:fixed;background:var(--tbw-filter-panel-bg, var(--tbw-color-panel-bg, light-dark(#eeeeee, #222222)));color:var(--tbw-filter-panel-fg, var(--tbw-color-fg, light-dark(#222222, #eeeeee)));border:1px solid var(--tbw-filter-panel-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-panel-radius, var(--tbw-border-radius, 4px));box-shadow:0 4px 16px var(--tbw-filter-panel-shadow, var(--tbw-color-shadow, light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3))));padding:12px;z-index:10000;min-width:200px;max-width:280px;max-height:350px;display:flex;flex-direction:column;font-family:var(--tbw-font-family, system-ui, sans-serif);font-size:var(--tbw-font-size, 13px)}.tbw-filter-search{margin-bottom:8px}.tbw-filter-search-input{width:100%;padding:6px 10px;background:var(--tbw-filter-input-bg, var(--tbw-color-bg, transparent));color:inherit;border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:var(--tbw-filter-input-radius, 4px);font-size:inherit;box-sizing:border-box}.tbw-filter-search-input:focus{outline:none;border-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));box-shadow:0 0 0 2px rgba(from var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6)) r g b / 15%)}.tbw-filter-actions{display:flex;padding:4px 2px;margin-bottom:8px;border-bottom:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-action-btn{background:transparent;border:none;color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));cursor:pointer;font-size:12px;padding:2px 0}.tbw-filter-action-btn:hover{text-decoration:underline}.tbw-filter-values{flex:1;overflow-y:auto;margin-bottom:8px;max-height:180px;position:relative}.tbw-filter-values-spacer{width:1px}.tbw-filter-values-content{position:absolute;top:0;left:0;right:0}.tbw-filter-value-item{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer;border-radius:3px}.tbw-filter-value-item:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}.tbw-filter-checkbox{margin:0;cursor:pointer;accent-color:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6))}.tbw-filter-no-match{color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));padding:8px 0;text-align:center;font-style:italic}.tbw-filter-buttons{display:flex;gap:8px;padding-top:8px;border-top:1px solid var(--tbw-filter-divider, var(--tbw-color-border, light-dark(#d0d0d4, #454545)))}.tbw-filter-apply-btn{flex:1;padding:6px 12px;background:var(--tbw-filter-accent, var(--tbw-color-accent, #3b82f6));color:var(--tbw-filter-accent-fg, var(--tbw-color-accent-fg, light-dark(#ffffff, #000000)));border:none;border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-apply-btn:hover{filter:brightness(.9)}.tbw-filter-clear-btn{flex:1;padding:6px 12px;background:transparent;color:var(--tbw-filter-muted, var(--tbw-color-fg-muted, light-dark(#555555, #aaaaaa)));border:1px solid var(--tbw-filter-input-border, var(--tbw-color-border, light-dark(#d0d0d4, #454545)));border-radius:4px;cursor:pointer;font-size:13px}.tbw-filter-clear-btn:hover{background:var(--tbw-filter-hover, var(--tbw-color-row-hover, light-dark(#f0f6ff, #1c1c1c)))}";
 class A extends x {
   name = "filtering";
   version = "1.0.0";
@@ -1017,7 +893,7 @@ class A extends x {
       useWorker: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   filters = /* @__PURE__ */ new Map();
   cachedResult = null;
   cacheKey = null;
@@ -1033,14 +909,16 @@ class A extends x {
   static LIST_OVERSCAN = 3;
   static LIST_BYPASS_THRESHOLD = 50;
   // Don't virtualize if < 50 items
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   attach(e) {
     super.attach(e), this.injectGlobalStyles();
   }
   detach() {
     this.filters.clear(), this.cachedResult = null, this.cacheKey = null, this.openPanelField = null, this.panelElement && (this.panelElement.remove(), this.panelElement = null), this.searchText.clear(), this.excludedValues.clear(), this.panelAbortController?.abort(), this.panelAbortController = null;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processRows(e) {
     const t = [...this.filters.values()];
     if (!t.length) return [...e];
@@ -1066,7 +944,8 @@ class A extends x {
       }), n.appendChild(l);
     });
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Set a filter on a specific field.
    * Pass null to remove the filter.
@@ -1151,7 +1030,8 @@ class A extends x {
   getUniqueValues(e) {
     return me(this.sourceRows, e);
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   /**
    * Inject global styles for filter panel (rendered in document.body)
    */
@@ -1362,7 +1242,8 @@ class A extends x {
       filteredRowCount: 0
     }), this.requestRender();
   }
-  // ===== Column State Hooks =====
+  // #endregion
+  // #region Column State Hooks
   /**
    * Return filter state for a column if it has an active filter.
    */
@@ -1395,8 +1276,10 @@ class A extends x {
     };
     this.filters.set(e, n), this.cachedResult = null, this.cacheKey = null;
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = nt;
+  // #endregion
 }
 function it(r) {
   if (!r.length) return [];
@@ -1471,14 +1354,16 @@ class xn extends x {
       showGroupBorders: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   groups = [];
   isActive = !1;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.groups = [], this.isActive = !1;
   }
-  // ===== Static Detection =====
+  // #endregion
+  // #region Static Detection
   /**
    * Auto-detect column groups from column configuration.
    */
@@ -1486,7 +1371,8 @@ class xn extends x {
     const n = t?.columns;
     return Array.isArray(n) ? lt(n) : !1;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processColumns(e) {
     const t = it(e);
     return t.length === 0 ? (this.isActive = !1, this.groups = [], [...e]) : (this.isActive = !0, this.groups = t, [...e]);
@@ -1509,7 +1395,8 @@ class xn extends x {
     const o = e.querySelector(".header-row");
     o && rt(o, this.groups, this.columns);
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Check if column groups are active.
    * @returns Whether grouping is active
@@ -1539,8 +1426,10 @@ class xn extends x {
   refresh() {
     this.requestRender();
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = at;
+  // #endregion
 }
 function dt({ rows: r, config: e, expanded: t }) {
   const n = e.groupOn;
@@ -1603,15 +1492,17 @@ class Cn extends x {
       aggregators: {}
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   expandedKeys = /* @__PURE__ */ new Set();
   flattenedRows = [];
   isActive = !1;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.expandedKeys.clear(), this.flattenedRows = [], this.isActive = !1;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   /**
    * Auto-detect grouping configuration from grid config.
    * Called by plugin system to determine if plugin should activate.
@@ -1671,7 +1562,8 @@ class Cn extends x {
   }
   afterRender() {
   }
-  // ===== Private Rendering Helpers =====
+  // #endregion
+  // #region Private Rendering Helpers
   renderFullWidthGroupRow(e, t, n) {
     const o = this.config, i = document.createElement("div");
     i.className = "cell group-full", i.style.gridColumn = "1 / -1", i.setAttribute("role", "gridcell");
@@ -1720,7 +1612,8 @@ class Cn extends x {
       t.appendChild(h);
     });
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Expand all groups.
    */
@@ -1827,8 +1720,10 @@ class Cn extends x {
   setGroupOn(e) {
     this.config.groupOn = e, this.requestRender();
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = pt;
+  // #endregion
 }
 function z(r, e) {
   const t = new Set(r);
@@ -1865,14 +1760,16 @@ class yn extends x {
       showExpandColumn: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   expandedRows = /* @__PURE__ */ new Set();
   detailElements = /* @__PURE__ */ new Map();
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.expandedRows.clear(), this.detailElements.clear();
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processColumns(e) {
     if (!this.config.detailRenderer)
       return [...e];
@@ -2013,7 +1910,8 @@ class yn extends x {
     }
     return i;
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Expand the detail row at the given index.
    * @param rowIndex - Index of the row to expand
@@ -2082,8 +1980,10 @@ class yn extends x {
     const t = this.rows[e];
     return t ? this.detailElements.get(t) : void 0;
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = vt;
+  // #endregion
 }
 function xt(r, e, t) {
   return e.length ? [...r].sort((n, o) => {
@@ -2119,13 +2019,15 @@ class Rn extends x {
       showSortIndex: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   sortModel = [];
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.sortModel = [];
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processRows(e) {
     return this.sortModel.length === 0 ? [...e] : xt([...e], this.sortModel, [...this.columns]);
   }
@@ -2153,7 +2055,8 @@ class Rn extends x {
         o.removeAttribute("data-sort");
     });
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Get the current sort model.
    * @returns Copy of the current sort model
@@ -2190,7 +2093,8 @@ class Rn extends x {
   getSortDirection(e) {
     return be(this.sortModel, e);
   }
-  // ===== Column State Hooks =====
+  // #endregion
+  // #region Column State Hooks
   /**
    * Return sort state for a column if it's in the sort model.
    */
@@ -2218,8 +2122,10 @@ class Rn extends x {
     };
     n !== -1 ? this.sortModel[n] = o : this.sortModel.splice(t.sort.priority, 0, o);
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = Rt;
+  // #endregion
 }
 function St(r) {
   return r.filter((e) => e.sticky === "left");
@@ -2269,15 +2175,17 @@ class Sn extends x {
   get defaultConfig() {
     return {};
   }
-  // ===== Internal State =====
+  // #region Internal State
   isApplied = !1;
   leftOffsets = /* @__PURE__ */ new Map();
   rightOffsets = /* @__PURE__ */ new Map();
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.leftOffsets.clear(), this.rightOffsets.clear(), this.isApplied = !1;
   }
-  // ===== Detection =====
+  // #endregion
+  // #region Detection
   /**
    * Auto-detect sticky columns from column configuration.
    */
@@ -2285,7 +2193,8 @@ class Sn extends x {
     const n = t?.columns;
     return Array.isArray(n) ? V(n) : !1;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processColumns(e) {
     return this.isApplied = V([...e]), [...e];
   }
@@ -2301,7 +2210,8 @@ class Sn extends x {
       ve(e, t);
     });
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Re-apply sticky offsets (e.g., after column resize).
    */
@@ -2329,6 +2239,7 @@ class Sn extends x {
   clearStickyPositions() {
     xe(this.grid);
   }
+  // #endregion
 }
 function W(r, e) {
   const t = document.createElement("div");
@@ -2424,16 +2335,18 @@ class En extends x {
       showFilteredCount: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   infoBarElement = null;
   topAggregationContainer = null;
   bottomAggregationContainer = null;
   footerWrapper = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null), this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null), this.bottomAggregationContainer && (this.bottomAggregationContainer.remove(), this.bottomAggregationContainer = null), this.footerWrapper && (this.footerWrapper.remove(), this.footerWrapper = null);
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   afterRender() {
     const e = this.shadowRoot;
     if (!e) return;
@@ -2475,7 +2388,8 @@ class En extends x {
       this.rows
     )), c && (this.infoBarElement = W(this.config, i), this.footerWrapper.appendChild(this.infoBarElement))) : this.cleanupFooter();
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   cleanup() {
     this.infoBarElement && (this.infoBarElement.remove(), this.infoBarElement = null), this.topAggregationContainer && (this.topAggregationContainer.remove(), this.topAggregationContainer = null), this.bottomAggregationContainer && (this.bottomAggregationContainer.remove(), this.bottomAggregationContainer = null), this.footerWrapper && (this.footerWrapper.remove(), this.footerWrapper = null);
   }
@@ -2496,7 +2410,8 @@ class En extends x {
       return null;
     }
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Refresh the status bar to reflect current grid state.
    */
@@ -2545,8 +2460,10 @@ class En extends x {
   removeAggregationRow(e) {
     this.config.aggregationRows && (this.config.aggregationRows = this.config.aggregationRows.filter((t) => t.id !== e), this.requestRender());
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = At;
+  // #endregion
 }
 const _t = Ge;
 function It(r) {
@@ -2949,7 +2866,7 @@ class L extends x {
       showGrandTotal: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   isActive = !1;
   hasInitialized = !1;
   pivotResult = null;
@@ -2965,11 +2882,13 @@ class L extends x {
   hasValidPivotConfig() {
     return (this.config.valueFields?.length ?? 0) > 0;
   }
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.isActive = !1, this.hasInitialized = !1, this.pivotResult = null, this.fieldHeaderMap.clear(), this.originalColumns = [], this.panelContainer = null, this.cleanupGrandTotalFooter();
   }
-  // ===== Shell Integration =====
+  // #endregion
+  // #region Shell Integration
   getToolPanel() {
     return {
       id: L.PANEL_ID,
@@ -2980,7 +2899,8 @@ class L extends x {
       render: (e) => this.renderPanel(e)
     };
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processRows(e) {
     if (!this.hasInitialized && this.config.active !== !1 && this.hasValidPivotConfig() && (this.hasInitialized = !0, this.isActive = !0), !this.isActive)
       return [...e];
@@ -3086,7 +3006,8 @@ class L extends x {
   cleanupGrandTotalFooter() {
     this.grandTotalFooter && (this.grandTotalFooter.remove(), this.grandTotalFooter = null);
   }
-  // ===== Expand/Collapse API =====
+  // #endregion
+  // #region Expand/Collapse API
   toggle(e) {
     this.expandedKeys.has(e) ? this.expandedKeys.delete(e) : this.expandedKeys.add(e), this.requestRender();
   }
@@ -3110,7 +3031,8 @@ class L extends x {
   isExpanded(e) {
     return this.expandedKeys.has(e);
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   enablePivot() {
     this.originalColumns.length === 0 && this.captureOriginalColumns(), this.isActive = !0, this.requestRender();
   }
@@ -3135,7 +3057,8 @@ class L extends x {
   refresh() {
     this.pivotResult = null, this.requestRender();
   }
-  // ===== Tool Panel API =====
+  // #endregion
+  // #region Tool Panel API
   showPanel() {
     this.grid.openToolPanel(L.PANEL_ID);
   }
@@ -3148,7 +3071,8 @@ class L extends x {
   isPanelVisible() {
     return this.grid.activeToolPanel === L.PANEL_ID;
   }
-  // ===== Private Helpers =====
+  // #endregion
+  // #region Private Helpers
   get gridColumns() {
     return this.grid.columns ?? [];
   }
@@ -3221,8 +3145,10 @@ class L extends x {
     const n = this.config.valueFields ?? [], o = n.findIndex((i) => i.field === e);
     o >= 0 && (n[o] = { ...n[o], aggFunc: t }, this.config.valueFields = [...n]), this.isActive && this.refresh();
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = Wt;
+  // #endregion
 }
 function $t(r) {
   const e = r.sticky;
@@ -3246,12 +3172,13 @@ class kn extends x {
       animationDuration: 200
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   isDragging = !1;
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   attach(e) {
     super.attach(e), e.addEventListener(
       "column-reorder-request",
@@ -3265,7 +3192,8 @@ class kn extends x {
   detach() {
     this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   // Note: No processColumns hook needed - we directly update the grid's column order
   afterRender() {
     const e = this.shadowRoot;
@@ -3306,7 +3234,8 @@ class kn extends x {
       }));
     });
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Get the current column order from the grid.
    * @returns Array of field names in display order
@@ -3344,8 +3273,10 @@ class kn extends x {
     const e = this.columns.map((t) => t.field);
     this.grid.setColumnOrder(e), this.grid.requestStateChange?.();
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = jt;
+  // #endregion
 }
 function D(r) {
   return {
@@ -3423,7 +3354,7 @@ class An extends x {
       mode: "cell"
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   /** Row selection state (row mode) */
   selected = /* @__PURE__ */ new Set();
   lastSelected = null;
@@ -3435,11 +3366,13 @@ class An extends x {
   isDragging = !1;
   /** Cell selection state (cell mode) */
   selectedCell = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
   }
-  // ===== Event Handlers =====
+  // #endregion
+  // #region Event Handlers
   onCellClick(e) {
     const { rowIndex: t, colIndex: n, originalEvent: o } = e, { mode: i } = this.config;
     if (i === "cell")
@@ -3573,7 +3506,8 @@ class An extends x {
   onScrollRender() {
     this.#t();
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Get the selected cell (cell mode only).
    */
@@ -3624,7 +3558,8 @@ class An extends x {
       ranges: X(this.ranges)
     }), this.requestAfterRender();
   }
-  // ===== Private Helpers =====
+  // #endregion
+  // #region Private Helpers
   #e() {
     return Qt(
       this.config.mode,
@@ -3636,8 +3571,10 @@ class An extends x {
       this.columns.length
     );
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = Jt;
+  // #endregion
 }
 function q(r, e) {
   return Math.floor(r / e);
@@ -3680,18 +3617,20 @@ class _n extends x {
       maxConcurrentRequests: 2
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   dataSource = null;
   totalRowCount = 0;
   loadedBlocks = /* @__PURE__ */ new Map();
   loadingBlocks = /* @__PURE__ */ new Set();
   lastRequestId = 0;
   scrollDebounceTimer;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.dataSource = null, this.totalRowCount = 0, this.loadedBlocks.clear(), this.loadingBlocks.clear(), this.lastRequestId = 0, this.scrollDebounceTimer && (clearTimeout(this.scrollDebounceTimer), this.scrollDebounceTimer = void 0);
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   /**
    * Check current viewport and load any missing blocks.
    */
@@ -3709,7 +3648,8 @@ class _n extends x {
         });
       }
   }
-  // ===== Hooks =====
+  // #endregion
+  // #region Hooks
   processRows(e) {
     if (!this.dataSource) return [...e];
     const t = [];
@@ -3724,7 +3664,8 @@ class _n extends x {
       this.loadRequiredBlocks();
     }, on));
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Set the data source for server-side loading.
    * @param dataSource - Data source implementing the getRows method
@@ -3768,6 +3709,7 @@ class _n extends x {
   getLoadedBlockCount() {
     return this.loadedBlocks.size;
   }
+  // #endregion
 }
 function ne(r, e, t) {
   return r.id !== void 0 ? String(r.id) : t ? `${t}-${e}` : String(e);
@@ -3863,7 +3805,7 @@ class In extends x {
       showExpandIcons: !0
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   /** Set of expanded row keys */
   expandedKeys = /* @__PURE__ */ new Set();
   /** Whether initial expansion (based on defaultExpanded config) has been applied */
@@ -3872,11 +3814,13 @@ class In extends x {
   flattenedRows = [];
   /** Map from key to flattened row for quick lookup */
   rowKeyMap = /* @__PURE__ */ new Map();
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
   }
-  // ===== Auto-Detection =====
+  // #endregion
+  // #region Auto-Detection
   /**
    * Detects if tree functionality should be enabled based on data structure.
    * Called by the grid during plugin initialization.
@@ -3886,7 +3830,8 @@ class In extends x {
     const t = this.config.childrenField ?? ln(e) ?? "children";
     return Le(e, t);
   }
-  // ===== Data Processing =====
+  // #endregion
+  // #region Data Processing
   processRows(e) {
     const t = this.config.childrenField ?? "children";
     if (!Le(e, t))
@@ -3930,7 +3875,8 @@ class In extends x {
     }
     return o;
   }
-  // ===== Event Handlers =====
+  // #endregion
+  // #region Event Handlers
   onCellClick(e) {
     const t = e.originalEvent?.target;
     if (!t?.classList.contains("tree-toggle")) return !1;
@@ -3944,7 +3890,8 @@ class In extends x {
       depth: o.depth
     }), this.requestRender(), !0) : !1;
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Expand a specific node by key.
    */
@@ -4005,8 +3952,10 @@ class In extends x {
   expandToKey(e) {
     this.expandedKeys = sn(this.rows, e, this.config, this.expandedKeys), this.requestRender();
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = an;
+  // #endregion
 }
 function dn(r, e, t) {
   const n = [...r.undoStack, e];
@@ -4109,7 +4058,7 @@ class Fn extends x {
     }
     return !1;
   }
-  // ===== Public API Methods =====
+  // #region Public API Methods
   /**
    * Record a cell edit for undo/redo tracking.
    * Call this when a cell value changes.
@@ -4184,6 +4133,7 @@ class Fn extends x {
   getRedoStack() {
     return [...this.redoStack];
   }
+  // #endregion
 }
 const pn = '.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;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 Ne(r) {
@@ -4200,18 +4150,20 @@ class T extends x {
       allowHideAll: !1
     };
   }
-  // ===== Internal State =====
+  // #region Internal State
   columnListElement = null;
   // Drag state for reorder integration
   isDragging = !1;
   draggedField = null;
   draggedIndex = null;
   dropIndex = null;
-  // ===== Lifecycle =====
+  // #endregion
+  // #region Lifecycle
   detach() {
     this.columnListElement = null, this.isDragging = !1, this.draggedField = null, this.draggedIndex = null, this.dropIndex = null;
   }
-  // ===== Shell Integration =====
+  // #endregion
+  // #region Shell Integration
   /**
    * Register the column visibility tool panel with the shell.
    */
@@ -4226,7 +4178,8 @@ class T extends x {
       render: (e) => this.renderPanelContent(e)
     };
   }
-  // ===== Public API =====
+  // #endregion
+  // #region Public API
   /**
    * Show the visibility sidebar panel.
    */
@@ -4323,7 +4276,8 @@ class T extends x {
   isPanelVisible() {
     return this.grid.activeToolPanel === T.PANEL_ID;
   }
-  // ===== Private Methods =====
+  // #endregion
+  // #region Private Methods
   /**
    * Render the panel content into the shell's tool panel container.
    * Returns a cleanup function.
@@ -4409,8 +4363,10 @@ class T extends x {
       }
     });
   }
-  // ===== Styles =====
+  // #endregion
+  // #region Styles
   styles = pn;
+  // #endregion
 }
 export {
   x as BaseGridPlugin,