@toolbox-web/grid 0.0.1

package/index.js

@@ -0,0 +1,3105 @@
+const we = ":root{color-scheme:light dark}:host{--tbw-color-bg: transparent;--tbw-color-panel-bg: light-dark(#eeeeee, #222222);--tbw-color-fg: light-dark(#222222, #eeeeee);--tbw-color-fg-muted: light-dark(#555555, #aaaaaa);--tbw-color-accent: light-dark(#3b82f6, #3b82f6);--tbw-color-accent-fg: light-dark(#ffffff, #000000);--tbw-color-success: light-dark(hsl(122, 39%, 40%), hsl(122, 39%, 49%));--tbw-color-selection: light-dark(#fff7d6, #333333);--tbw-color-row-alt: var(--tbw-color-bg);--tbw-color-row-hover: light-dark(#f0f6ff, #1c1c1c);--tbw-color-header-bg: color-mix(in hsl, var(--tbw-color-panel-bg) 85%, var(--tbw-color-fg));--tbw-color-header-fg: color-mix(in hsl, var(--tbw-color-fg) 75%, var(--tbw-color-panel-bg));--tbw-color-border: light-dark(#d0d0d4, #454545);--tbw-color-border-strong: light-dark(#777777, #adacac);--tbw-color-border-cell: var(--tbw-color-border);--tbw-color-border-header: var(--tbw-color-border);--tbw-color-shadow: light-dark(rgba(0, 0, 0, .1), rgba(0, 0, 0, .3));--tbw-font-family: inherit;--tbw-font-size: inherit;--tbw-font-size-header: var(--tbw-font-size);--tbw-font-weight-header: bold;--tbw-cell-padding-header: 2px 8px;--tbw-cell-padding: 2px 8px;--tbw-cell-padding-input: 2px 6px;--tbw-row-height: 28px;--tbw-header-height: 30px;--tbw-border-radius: 4px;--tbw-border-input: 1px solid var(--tbw-color-border-strong);--tbw-border-header: 1px solid var(--tbw-color-border-header);--tbw-row-divider: 1px solid var(--tbw-color-border-cell);--tbw-row-hover-outline: 0;--tbw-color-active-row-bg: var(--tbw-color-selection);--tbw-active-row-outline: 0;--tbw-focus-outline: 2px solid var(--tbw-color-accent);--tbw-focus-outline-offset: -2px;--tbw-focus-background: rgba(from var(--tbw-color-accent) r g b / 12%);--tbw-range-border-color: var(--tbw-color-success);--tbw-range-selection-bg: rgba(from var(--tbw-range-border-color) r g b / 12%);--tbw-resize-handle-width: 4px;--tbw-resize-handle-color: transparent;--tbw-resize-handle-color-hover: var(--tbw-color-accent);--tbw-resize-handle-border-radius: 0;--tbw-scrollbar-thumb: var(--tbw-color-border-strong);--tbw-scrollbar-track: var(--tbw-color-bg);--tbw-transition-duration: .12s;--tbw-transition-ease: ease;--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-sort-indicator-color: var(--tbw-color-fg-muted);--tbw-sort-indicator-active-color: var(--tbw-color-accent);--tbw-header-text-transform: none;--tbw-header-letter-spacing: normal;--tbw-color-header-separator: var(--tbw-color-border-cell);--tbw-checkbox-size: 16px;--tbw-density-scale: 1}:host{position:relative;display:block;width:100%;height:100%;min-height:0;contain:content;font-family:var(--tbw-font-family);font-size:var(--tbw-font-size);background:var(--tbw-color-bg);color:var(--tbw-color-fg);border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);overflow:clip;outline:none}:host,:host *{box-sizing:border-box}:host .header{display:block;flex-shrink:0;z-index:var(--tbw-z-layer-header, 30);background:var(--tbw-color-header-bg);overflow:visible}:host .header-group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-header-bg);z-index:var(--tbw-z-layer-header, 30)}:host .header-group-cell{display:flex;align-items:center;justify-content:flex-start;padding:var(--tbw-cell-padding-header, 2px 8px);color:var(--tbw-color-header-group-fg, var(--tbw-color-header-fg));font-weight:var(--tbw-font-weight-header-group, var(--tbw-font-weight-header));justify-content:var(--tbw-align-header-group, var(--tbw-align-header, flex-start))}:host .header-row{display:grid;grid-template-columns:var(--tbw-column-template);color:var(--tbw-color-header-fg);font-size:var(--tbw-font-size-header);min-height:var(--tbw-header-height);border-bottom:var(--tbw-border-header);z-index:var(--tbw-z-layer-header, 30)}:host .header-row>.cell{display:flex;align-items:center;gap:4px;padding:var(--tbw-cell-padding-header, 2px 8px);background-color:var(--tbw-color-header-bg);font-weight:var(--tbw-font-weight-header);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .header-row>.cell>span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .header-row>.cell>span[part~=sort-indicator]{flex-shrink:0}:host .header-row>.cell:last-child{border-right:0}:host .header-group-cell,:host .header-row>.cell.grouped.group-end{border-right:2px solid var(--tbw-color-border)}:host .tbw-grid-root{display:flex;flex-direction:column;height:100%}:host .rows-body-wrapper{flex:1;min-height:0;display:flex;flex-direction:row;width:100%;min-width:fit-content}:host .rows-body{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:visible}:host .rows-container{display:flex;flex-direction:row;flex:1;min-height:0;overflow:visible}:host .rows-viewport{flex:1;min-width:0;position:relative;display:block;overflow:clip}:host .faux-vscroll{position:sticky;inset-inline-end:0;flex-shrink:0;width:auto;overflow-y:auto;overflow-x:hidden;z-index:var(--tbw-z-layer-header, 30)}:host .faux-vscroll-spacer{width:1px}:host .rows-viewport .rows{position:absolute;top:0;left:0;min-width:100%;will-change:transform;z-index:var(--tbw-z-layer-rows, 1)}:host .data-grid-row{display:grid;grid-template-columns:var(--tbw-column-template);contain:layout style}:host .data-grid-row:has(.editing){background:var(--tbw-editing-bg)}:host .selecting .data-grid-row>.cell{user-select:none}:host .data-grid-row>.cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px);border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height);border-right:1px solid var(--tbw-color-border-cell);overflow:hidden;min-width:0}:host .data-grid-row>.cell>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .data-grid-row>.cell:last-child{border-right:0}:host .data-grid-row>.cell[data-type=boolean]{justify-content:center}:host .data-grid-row>.cell[data-type=boolean] input[type=checkbox]{margin:0;width:var(--tbw-checkbox-size);height:var(--tbw-checkbox-size)}:host .data-grid-row>.cell.editing{overflow:hidden;padding:0}:host .data-grid-row>.cell.editing input:not([type=checkbox]),:host .data-grid-row>.cell.editing select,:host .data-grid-row>.cell.editing textarea{width:100%;height:100%;max-width:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}:host .data-grid-row:nth-child(2n){background:var(--tbw-color-row-alt)}:host .data-grid-row:hover{background:var(--tbw-color-row-hover)}:host .sortable{cursor:pointer;user-select:none}:host .resize-handle{position:absolute;top:0;right:calc(var(--tbw-resize-handle-width) / -2);width:var(--tbw-resize-handle-width);height:100%;cursor:e-resize;user-select:none;touch-action:none;z-index:20;background:var(--tbw-resize-handle-color);transition:background .12s ease;border-radius:var(--tbw-resize-handle-border-radius)}:host .resize-handle:hover{background:var(--tbw-resize-handle-color-hover)}:host .cell-focus,:host .row-focus{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .group-row{display:grid;grid-template-columns:var(--tbw-column-template);background:var(--tbw-color-row-alt);font-weight:500;border-bottom:var(--tbw-row-divider);min-height:var(--tbw-row-height)}:host .group-row .cell{display:flex;align-items:center;padding:var(--tbw-cell-padding, 2px 8px)}:host .group-row .group-toggle{background:none;border:0;cursor:pointer;padding:0 4px 0 0;font:inherit}:host .group-row .group-count{margin-left:4px;opacity:.7}:host .sticky-left,:host .sticky-right{position:sticky;z-index:25}:host .header-row>.cell.sticky-left,:host .header-row>.cell.sticky-right{background:var(--tbw-color-header-bg);z-index:35}:host .data-grid-row>.cell.sticky-left,:host .data-grid-row>.cell.sticky-right{background:var(--tbw-color-panel-bg)}:host .sticky-left{box-shadow:1px 0 0 var(--tbw-color-border)}:host .sticky-right{box-shadow:-1px 0 0 var(--tbw-color-border)}.grid-container{position:relative;width:100%;height:100%}.grid-placeholder{padding:2rem;text-align:center;color:var(--tbw-color-fg);opacity:.6}:host{--tbw-shell-header-height: 44px;--tbw-shell-header-bg: var(--tbw-color-panel-bg);--tbw-shell-header-border: var(--tbw-color-border);--tbw-shell-title-font-size: 14px;--tbw-shell-title-font-weight: 600;--tbw-tool-panel-width: 280px;--tbw-tool-panel-bg: var(--tbw-color-panel-bg);--tbw-tool-panel-border: var(--tbw-color-border);--tbw-tool-panel-header-height: 40px;--tbw-tool-panel-transition: .2s ease-out;--tbw-toolbar-button-size: 32px;--tbw-toolbar-button-gap: 4px}:host .tbw-grid-root.has-shell{display:flex;flex-direction:column;height:100%}:host .tbw-shell-header{display:flex;align-items:center;gap:8px;min-height:var(--tbw-shell-header-height);padding:0 8px;background:var(--tbw-shell-header-bg);border-bottom:1px solid var(--tbw-shell-header-border);flex-shrink:0}:host .tbw-shell-title{font-size:var(--tbw-shell-title-font-size);font-weight:var(--tbw-shell-title-font-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-shell-content{flex:1;display:flex;align-items:center;gap:12px;min-width:0;overflow:hidden}:host .tbw-shell-toolbar{display:flex;align-items:center;gap:var(--tbw-toolbar-button-gap);flex-shrink:0}:host .tbw-toolbar-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tbw-toolbar-button-size);height:var(--tbw-toolbar-button-size);padding:0;border:1px solid transparent;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg);cursor:pointer;font-size:16px;transition:background var(--tbw-transition-duration) var(--tbw-transition-ease),border-color var(--tbw-transition-duration) var(--tbw-transition-ease)}:host .tbw-toolbar-btn:hover{background:var(--tbw-color-row-hover)}:host .tbw-toolbar-btn:focus-visible{outline:var(--tbw-focus-outline);outline-offset:var(--tbw-focus-outline-offset)}:host .tbw-toolbar-btn.active{background:var(--tbw-focus-background);border-color:var(--tbw-color-accent)}:host .tbw-toolbar-btn:disabled{opacity:.5;cursor:not-allowed}:host .tbw-toolbar-separator{width:1px;height:20px;background:var(--tbw-color-border);margin:0 4px}:host .tbw-shell-body{display:flex;flex:1;min-height:0;overflow:visible}:host .tbw-grid-content{flex:1;min-width:0;min-height:0;display:flex;flex-direction:row;overflow:hidden}:host .tbw-scroll-area{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow-x:auto;overflow-y:hidden}:host .tbw-tool-panel{width:0;overflow:hidden;background:var(--tbw-tool-panel-bg);border-left:1px solid var(--tbw-tool-panel-border);transition:width var(--tbw-tool-panel-transition);display:flex;flex-direction:column;flex-shrink:0}:host .tbw-tool-panel[data-position=left]{border-left:none;border-right:1px solid var(--tbw-tool-panel-border);order:-1}:host .tbw-tool-panel.open{width:var(--tbw-tool-panel-width)}:host .tbw-tool-panel-header{display:flex;align-items:center;justify-content:space-between;min-height:var(--tbw-tool-panel-header-height);padding:0 12px;border-bottom:1px solid var(--tbw-tool-panel-border);flex-shrink:0}:host .tbw-tool-panel-title{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .tbw-tool-panel-close{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;border-radius:var(--tbw-border-radius);background:transparent;color:var(--tbw-color-fg-muted);cursor:pointer;font-size:14px}:host .tbw-tool-panel-close:hover{background:var(--tbw-color-row-hover);color:var(--tbw-color-fg)}:host .tbw-tool-panel-content{flex:1;overflow:auto;padding:12px}:host .tbw-quick-filter-input{flex:1;max-width:300px;height:28px;padding:0 8px;border:1px solid var(--tbw-color-border);border-radius:var(--tbw-border-radius);background:var(--tbw-color-bg);color:var(--tbw-color-fg);font-size:13px}:host .tbw-quick-filter-input:focus{outline:none;border-color:var(--tbw-color-accent)}:host .tbw-selection-summary{font-size:13px;color:var(--tbw-color-fg-muted);white-space:nowrap}";
+function be(o) {
+  const e = /* @__PURE__ */ new Map();
+  return o.sortState && e.set(o.sortState.field, {
+    direction: o.sortState.direction === 1 ? "asc" : "desc",
+    priority: 0
+  }), e;
+}
+function ae(o, e) {
+  const t = o._columns, n = be(o);
+  return {
+    columns: t.map((i, s) => {
+      const r = {
+        field: i.field,
+        order: s,
+        visible: !0
+        // If it's in _columns, it's visible (hidden columns are filtered out)
+      }, l = i;
+      l.__renderedWidth !== void 0 ? r.width = l.__renderedWidth : i.width !== void 0 && (r.width = typeof i.width == "string" ? parseFloat(i.width) : i.width);
+      const a = n.get(i.field);
+      a && (r.sort = a);
+      for (const h of e)
+        if (h.getColumnState) {
+          const u = h.getColumnState(i.field);
+          u && Object.assign(r, u);
+        }
+      return r;
+    })
+  };
+}
+function ge(o, e, t, n) {
+  if (!e.columns || e.columns.length === 0) return;
+  const i = new Map(e.columns.map((l) => [l.field, l])), s = t.map((l) => {
+    const a = i.get(l.field);
+    if (!a) return l;
+    const h = { ...l };
+    return a.width !== void 0 && (h.width = a.width, h.__renderedWidth = a.width), a.visible !== void 0 && (h.hidden = !a.visible), h;
+  });
+  s.sort((l, a) => {
+    const h = i.get(l.field)?.order ?? 1 / 0, u = i.get(a.field)?.order ?? 1 / 0;
+    return h - u;
+  }), o._columns = s;
+  const r = e.columns.filter((l) => l.sort !== void 0).sort((l, a) => (l.sort?.priority ?? 0) - (a.sort?.priority ?? 0));
+  if (r.length > 0) {
+    const l = r[0];
+    l.sort && (o.sortState = {
+      field: l.field,
+      direction: l.sort.direction === "asc" ? 1 : -1
+    });
+  } else
+    o.sortState = null;
+  for (const l of n)
+    if (l.applyColumnState)
+      for (const a of e.columns)
+        l.applyColumnState(a.field, a);
+}
+function me(o, e, t) {
+  let n = null;
+  return () => {
+    n !== null && clearTimeout(n), n = setTimeout(() => {
+      n = null;
+      const i = ae(o, e());
+      t(i);
+    }, 100);
+  };
+}
+const O = {
+  STRETCH: "stretch",
+  FIXED: "fixed"
+};
+function ve(o) {
+  return o == null ? "string" : typeof o == "number" ? "number" : typeof o == "boolean" ? "boolean" : o instanceof Date || typeof o == "string" && /\d{4}-\d{2}-\d{2}/.test(o) && !isNaN(Date.parse(o)) ? "date" : "string";
+}
+function ce(o, e) {
+  if (e && e.length) {
+    const s = {};
+    return e.forEach((r) => {
+      r.type && (s[r.field] = r.type);
+    }), { columns: e, typeMap: s };
+  }
+  const t = o[0] || {}, n = Object.keys(t).map((s) => {
+    const r = t[s], l = ve(r);
+    return { field: s, header: s.charAt(0).toUpperCase() + s.slice(1), type: l };
+  }), i = {};
+  return n.forEach((s) => {
+    i[s.field] = s.type || "string";
+  }), { columns: n, typeMap: i };
+}
+const Ce = /{{\s*([^}]+)\s*}}/g, C = "__DG_EMPTY__", ye = /^[\w$. '?+\-*/%:()!<>=,&|]+$/, Ee = /__(proto|defineGetter|defineSetter)|constructor|window|globalThis|global|process|Function|import|eval|Reflect|Proxy|Error|arguments|document|location|cookie|localStorage|sessionStorage|indexedDB|fetch|XMLHttpRequest|WebSocket|Worker|SharedWorker|ServiceWorker|opener|parent|top|frames|self|this\b/, Re = /* @__PURE__ */ new Set([
+  "script",
+  "iframe",
+  "object",
+  "embed",
+  "form",
+  "input",
+  "button",
+  "textarea",
+  "select",
+  "link",
+  "meta",
+  "base",
+  "style",
+  "template",
+  "slot",
+  "portal",
+  "frame",
+  "frameset",
+  "applet",
+  "noscript",
+  "noembed",
+  "plaintext",
+  "xmp",
+  "listing"
+]), U = /^on\w+$/i, _e = /* @__PURE__ */ new Set(["href", "src", "action", "formaction", "data", "srcdoc", "xlink:href", "poster", "srcset"]), Ae = /^\s*(javascript|vbscript|data|blob):/i;
+function N(o) {
+  if (!o || typeof o != "string") return "";
+  if (o.indexOf("<") === -1) return o;
+  const e = document.createElement("template");
+  return e.innerHTML = o, Se(e.content), e.innerHTML;
+}
+function Se(o) {
+  const e = [], t = o.querySelectorAll("*");
+  for (const n of t) {
+    const i = n.tagName.toLowerCase();
+    if (Re.has(i)) {
+      e.push(n);
+      continue;
+    }
+    if ((i === "svg" || n.namespaceURI === "http://www.w3.org/2000/svg") && Array.from(n.attributes).some(
+      (l) => U.test(l.name) || l.name === "href" || l.name === "xlink:href"
+    )) {
+      e.push(n);
+      continue;
+    }
+    const s = [];
+    for (const r of n.attributes) {
+      const l = r.name.toLowerCase();
+      if (U.test(l)) {
+        s.push(r.name);
+        continue;
+      }
+      if (_e.has(l) && Ae.test(r.value)) {
+        s.push(r.name);
+        continue;
+      }
+      if (l === "style" && /expression\s*\(|javascript:|behavior\s*:/i.test(r.value)) {
+        s.push(r.name);
+        continue;
+      }
+    }
+    s.forEach((r) => n.removeAttribute(r));
+  }
+  e.forEach((n) => n.remove());
+}
+function de(o, e) {
+  if (!o || o.indexOf("{{") === -1) return o;
+  const t = [], n = o.replace(Ce, (l, a) => {
+    const h = xe(a, e);
+    return t.push({ expr: a.trim(), result: h }), h;
+  }), i = Te(n), s = t.length && t.every((l) => l.result === "" || l.result === C);
+  return /Reflect\.|\bProxy\b|ownKeys\(/.test(o) || s ? "" : i;
+}
+function xe(o, e) {
+  if (o = (o || "").trim(), !o || /\b(Reflect|Proxy|ownKeys)\b/.test(o)) return C;
+  if (o === "value") return e.value == null ? C : String(e.value);
+  if (o.startsWith("row.") && !/[()?]/.test(o) && !o.includes(":")) {
+    const n = o.slice(4), i = e.row ? e.row[n] : void 0;
+    return i == null ? C : String(i);
+  }
+  if (o.length > 80 || !ye.test(o) || Ee.test(o)) return C;
+  const t = o.match(/\./g);
+  if (t && t.length > 1) return C;
+  try {
+    const i = new Function("value", "row", `return (${o});`)(e.value, e.row), s = i == null ? "" : String(i);
+    return /Reflect|Proxy|ownKeys/.test(s) ? C : s || C;
+  } catch {
+    return C;
+  }
+}
+function Te(o) {
+  return o && o.replace(new RegExp(C, "g"), "").replace(/Reflect\.[^<>{}\s]+/g, "").replace(/\bProxy\b/g, "").replace(/ownKeys\([^)]*\)/g, "");
+}
+function Le(o) {
+  if (/Reflect|Proxy|ownKeys/.test(o.textContent || "")) {
+    if (Array.from(o.childNodes).forEach((e) => {
+      e.nodeType === Node.TEXT_NODE && /Reflect|Proxy|ownKeys/.test(e.textContent || "") && (e.textContent = "");
+    }), /Reflect|Proxy|ownKeys/.test(o.textContent || "")) {
+      if (/Reflect|Proxy|ownKeys/.test(o.textContent || ""))
+        for (; o.firstChild; ) o.removeChild(o.firstChild);
+      o.textContent = (o.textContent || "").replace(/Reflect|Proxy|ownKeys/g, "");
+    }
+    (o.textContent || "").trim().length === 0 && (o.textContent = "");
+  }
+}
+function X(o) {
+  const e = /Reflect\.|\bProxy\b|ownKeys\(/.test(o), t = (n) => e ? "" : de(o, n);
+  return t.__blocked = e, t;
+}
+function ke(o) {
+  return Array.from(o.querySelectorAll("tbw-grid-column")).map((t) => {
+    const n = t.getAttribute("field") || "";
+    if (!n) return null;
+    const i = t.getAttribute("type") || void 0, r = i && (/* @__PURE__ */ new Set(["number", "string", "date", "boolean", "select", "typeahead"])).has(i) ? i : void 0, l = t.getAttribute("header") || void 0, a = t.hasAttribute("sortable"), h = t.hasAttribute("editable"), u = { field: n, type: r, header: l, sortable: a, editable: h };
+    t.hasAttribute("resizable") && (u.resizable = !0), t.hasAttribute("sizable") && (u.resizable = !0);
+    const w = t.getAttribute("options");
+    w && (u.options = w.split(",").map((f) => {
+      const [b, y] = f.includes(":") ? f.split(":") : [f.trim(), f.trim()];
+      return { value: b.trim(), label: y?.trim() || b.trim() };
+    }));
+    const c = t.querySelector("tbw-grid-column-view"), d = t.querySelector("tbw-grid-column-editor"), p = t.querySelector("tbw-grid-column-header");
+    return c && (u.__viewTemplate = c), d && (u.__editorTemplate = d), p && (u.__headerTemplate = p), u;
+  }).filter((t) => !!t);
+}
+function Pe(o, e) {
+  if ((!o || !o.length) && (!e || !e.length)) return [];
+  if (!o || !o.length) return e || [];
+  if (!e || !e.length) return o;
+  const t = {};
+  e.forEach((i) => t[i.field] = i);
+  const n = o.map((i) => {
+    const s = t[i.field];
+    if (!s) return i;
+    const r = { ...i };
+    return s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = i.sortable || s.sortable, (i.resizable === !0 || s.resizable === !0) && (r.resizable = !0), r.editable = i.editable || s.editable, s.__viewTemplate && (r.__viewTemplate = s.__viewTemplate), s.__editorTemplate && (r.__editorTemplate = s.__editorTemplate), s.__headerTemplate && (r.__headerTemplate = s.__headerTemplate), delete t[i.field], r;
+  });
+  return Object.keys(t).forEach((i) => n.push(t[i])), n;
+}
+function B(o, e) {
+  try {
+    o.part?.add?.(e);
+  } catch {
+  }
+  const t = o.getAttribute("part");
+  t ? t.split(/\s+/).includes(e) || o.setAttribute("part", t + " " + e) : o.setAttribute("part", e);
+}
+function Oe(o) {
+  o.__lightDomColumnsCache || (o.__originalColumnNodes = Array.from(
+    o.querySelectorAll("tbw-grid-column")
+  ), o.__lightDomColumnsCache = o.__originalColumnNodes.length ? ke(o) : []);
+  const e = o.__lightDomColumnsCache, t = Pe(o._columns, e);
+  t.forEach((i) => {
+    i.__viewTemplate && !i.__compiledView && (i.__compiledView = X(i.__viewTemplate.innerHTML)), i.__editorTemplate && !i.__compiledEditor && (i.__compiledEditor = X(i.__editorTemplate.innerHTML));
+  });
+  const { columns: n } = ce(o._rows, t);
+  o._columns = n;
+}
+function Me(o) {
+  const e = o.effectiveConfig?.fitMode || o.fitMode || O.STRETCH;
+  if (e !== O.STRETCH && e !== O.FIXED || o.__didInitialAutoSize || !o.isConnected) return;
+  const t = o.headerRowEl?.children || [];
+  if (!t.length) return;
+  let n = !1;
+  o.visibleColumns.forEach((i, s) => {
+    if (i.width) return;
+    const r = t[s];
+    let l = r ? r.scrollWidth : 0;
+    for (const a of o.rowPool) {
+      const h = a.children[s];
+      if (h) {
+        const u = h.scrollWidth;
+        u > l && (l = u);
+      }
+    }
+    l > 0 && (i.width = l + 2, i.__autoSized = !0, n = !0);
+  }), n && he(o), o.__didInitialAutoSize = !0;
+}
+function he(o) {
+  (o.effectiveConfig?.fitMode || o.fitMode || O.STRETCH) === O.STRETCH ? o.gridTemplate = o.visibleColumns.map((t) => {
+    if (t.width) return `${t.width}px`;
+    const n = t.minWidth;
+    return n != null ? `minmax(${n}px, 1fr)` : "1fr";
+  }).join(" ").trim() : o.gridTemplate = o.visibleColumns.map((t) => t.width ? `${t.width}px` : "max-content").join(" "), o.style.setProperty("--tbw-column-template", o.gridTemplate);
+}
+function De(o) {
+  switch (o.type) {
+    case "number":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "number", t.value = e.value ?? "", t.addEventListener("blur", () => e.commit(t.value === "" ? null : Number(t.value))), t.addEventListener("keydown", (n) => {
+          n.key === "Enter" && e.commit(t.value === "" ? null : Number(t.value)), n.key === "Escape" && e.cancel();
+        }), t.focus(), t;
+      };
+    case "boolean":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "checkbox", t.checked = !!e.value, t.addEventListener("change", () => e.commit(t.checked)), t.focus(), t;
+      };
+    case "date":
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "date", e.value instanceof Date && (t.valueAsDate = e.value), t.addEventListener("change", () => e.commit(t.valueAsDate)), t.addEventListener("keydown", (n) => {
+          n.key === "Escape" && e.cancel();
+        }), t.focus(), t;
+      };
+    case "select":
+    case "typeahead":
+      return (e) => {
+        const t = document.createElement("select");
+        e.column.multi && (t.multiple = !0), (typeof e.column.options == "function" ? e.column.options() : e.column.options || []).forEach((s) => {
+          const r = document.createElement("option");
+          r.value = String(s.value), r.textContent = s.label, (e.column.multi && Array.isArray(e.value) && e.value.includes(s.value) || !e.column.multi && e.value === s.value) && (r.selected = !0), t.appendChild(r);
+        });
+        const i = () => {
+          if (e.column.multi) {
+            const s = [];
+            Array.from(t.selectedOptions).forEach((r) => {
+              s.push(r.value);
+            }), e.commit(s);
+          } else
+            e.commit(t.value);
+        };
+        return t.addEventListener("change", i), t.addEventListener("blur", i), t.addEventListener("keydown", (s) => {
+          s.key === "Escape" && e.cancel();
+        }), t.focus(), t;
+      };
+    default:
+      return (e) => {
+        const t = document.createElement("input");
+        return t.type = "text", t.value = e.value ?? "", t.addEventListener("blur", () => e.commit(t.value)), t.addEventListener("keydown", (n) => {
+          n.key === "Enter" && e.commit(t.value), n.key === "Escape" && e.cancel();
+        }), t.focus(), t;
+      };
+  }
+}
+function He(o, e) {
+  if (o.dispatchKeyDown?.(e))
+    return;
+  const t = o._rows.length - 1, n = o.visibleColumns.length - 1, i = o.activeEditRows !== void 0 && o.activeEditRows !== -1, r = o.visibleColumns[o.focusCol]?.type, l = e.composedPath ? e.composedPath() : [], a = l && l.length ? l[0] : e.target, h = (u) => {
+    if (!u) return !1;
+    const w = u.tagName;
+    return !!(w === "INPUT" || w === "SELECT" || w === "TEXTAREA" || u.isContentEditable);
+  };
+  if (!(h(a) && (e.key === "Home" || e.key === "End")) && !(h(a) && (e.key === "ArrowUp" || e.key === "ArrowDown") && a.tagName === "INPUT" && a.type === "number") && !(i && (r === "select" || r === "typeahead") && (e.key === "ArrowDown" || e.key === "ArrowUp"))) {
+    switch (e.key) {
+      case "Tab": {
+        e.preventDefault(), !e.shiftKey ? o.focusCol < n ? o.focusCol += 1 : (typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow < t && (o.focusRow += 1, o.focusCol = 0)) : o.focusCol > 0 ? o.focusCol -= 1 : o.focusRow > 0 && (typeof o.commitActiveRowEdit == "function" && o.activeEditRows === o.focusRow && o.commitActiveRowEdit(), o.focusRow -= 1, o.focusCol = n), M(o);
+        return;
+      }
+      case "ArrowDown":
+        i && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.min(t, o.focusRow + 1), e.preventDefault();
+        break;
+      case "ArrowUp":
+        i && typeof o.commitActiveRowEdit == "function" && o.commitActiveRowEdit(), o.focusRow = Math.max(0, o.focusRow - 1), e.preventDefault();
+        break;
+      case "ArrowRight":
+        o.focusCol = Math.min(n, o.focusCol + 1), e.preventDefault();
+        break;
+      case "ArrowLeft":
+        o.focusCol = Math.max(0, o.focusCol - 1), e.preventDefault();
+        break;
+      case "Home":
+        o.focusCol = 0, e.preventDefault();
+        break;
+      case "End":
+        o.focusCol = n, e.preventDefault();
+        break;
+      case "PageDown":
+        o.focusRow = Math.min(t, o.focusRow + 20), e.preventDefault();
+        break;
+      case "PageUp":
+        o.focusRow = Math.max(0, o.focusRow - 20), e.preventDefault();
+        break;
+      case "Enter":
+        return typeof o.beginBulkEdit == "function" ? o.beginBulkEdit(o.focusRow) : o.dispatchEvent(
+          new CustomEvent("activate-cell", { detail: { row: o.focusRow, col: o.focusCol } })
+        ), M(o);
+      default:
+        return;
+    }
+    M(o);
+  }
+}
+function M(o) {
+  if (o.virtualization?.enabled) {
+    const { rowHeight: i } = o.virtualization, s = o, r = o.focusRow * i;
+    r < s.scrollTop ? s.scrollTop = r : r + i > s.scrollTop + s.clientHeight && (s.scrollTop = r - s.clientHeight + i);
+  }
+  o.refreshVirtualWindow(!1), Array.from(o.bodyEl.querySelectorAll(".cell-focus")).forEach((i) => i.classList.remove("cell-focus")), Array.from(o.bodyEl.querySelectorAll('[aria-selected="true"]')).forEach((i) => {
+    i.setAttribute("aria-selected", "false");
+  });
+  const e = o.focusRow, t = o.virtualization.start ?? 0, n = o.virtualization.end ?? o._rows.length;
+  if (e >= t && e < n) {
+    const s = o.bodyEl.querySelectorAll(".data-grid-row")[e - t]?.children[o.focusCol];
+    if (s) {
+      if (s.classList.add("cell-focus"), s.setAttribute("aria-selected", "true"), o.activeEditRows !== void 0 && o.activeEditRows !== -1 && s.classList.contains("editing")) {
+        const r = s.querySelector(
+          'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
+        );
+        if (r && document.activeElement !== r)
+          try {
+            r.focus();
+          } catch {
+          }
+      } else if (!s.contains(document.activeElement)) {
+        s.hasAttribute("tabindex") || s.setAttribute("tabindex", "-1");
+        try {
+          s.focus({ preventScroll: !0 });
+        } catch {
+        }
+      }
+    }
+  }
+}
+const ze = "__cellDisplayCache", Ne = "__cellCacheEpoch";
+function j(o) {
+  o[ze] = void 0, o[Ne] = void 0, o.__hasSpecialColumns = void 0;
+}
+function qe(o, e, t, n, i) {
+  const s = Math.max(0, t - e), r = o.bodyEl, l = o.visibleColumns, a = l.length;
+  let h = o.__cachedHeaderRowCount;
+  for (h === void 0 && (h = o.shadowRoot?.querySelector(".header-group-row") ? 2 : 1, o.__cachedHeaderRowCount = h); o.rowPool.length < s; ) {
+    const w = document.createElement("div");
+    w.className = "data-grid-row", w.setAttribute("role", "row"), w.addEventListener("click", (c) => Z(o, c, w, !1)), w.addEventListener("dblclick", (c) => Z(o, c, w, !0)), o.rowPool.push(w);
+  }
+  if (o.rowPool.length > s) {
+    for (let w = s; w < o.rowPool.length; w++) {
+      const c = o.rowPool[w];
+      c.parentNode === r && c.remove();
+    }
+    o.rowPool.length = s;
+  }
+  const u = i && o.__hasRenderRowPlugins !== !1;
+  for (let w = 0; w < s; w++) {
+    const c = e + w, d = o._rows[c], p = o.rowPool[w];
+    if (p.setAttribute("aria-rowindex", String(c + h + 1)), u && i(d, p, c)) {
+      p.__epoch = n, p.__rowDataRef = d, p.parentNode !== r && r.appendChild(p);
+      continue;
+    }
+    const f = p.__epoch, b = p.__rowDataRef, y = p.children.length, T = f === n && y === a, L = b !== d;
+    let _ = !1;
+    if (T && L) {
+      for (let E = 0; E < a; E++)
+        if (l[E].externalView && !p.querySelector(`.cell[data-col="${E}"] [data-external-view]`)) {
+          _ = !0;
+          break;
+        }
+    }
+    !T || _ ? (p.__isCustomRow && (p.className = "data-grid-row", p.setAttribute("role", "row"), p.__isCustomRow = !1), F(o, p, d, c), p.__epoch = n, p.__rowDataRef = d) : L ? (Y(o, p, d, c), p.__rowDataRef = d) : Y(o, p, d, c);
+    const g = o._changedRowIndices.has(c), m = p.classList.contains("changed");
+    g !== m && p.classList.toggle("changed", g), p.parentNode !== r && r.appendChild(p);
+  }
+}
+function Y(o, e, t, n) {
+  const i = e.children, s = o.visibleColumns, r = s.length, l = i.length, a = r < l ? r : l;
+  let h = o.__hasSpecialColumns;
+  if (h === void 0) {
+    h = !1;
+    for (let w = 0; w < r; w++) {
+      const c = s[w];
+      if (c.__viewTemplate || c.__compiledView || c.viewRenderer || c.externalView || c.format || c.type === "date" || c.type === "boolean") {
+        h = !0;
+        break;
+      }
+    }
+    o.__hasSpecialColumns = h;
+  }
+  const u = String(n);
+  if (!h) {
+    for (let w = 0; w < a; w++) {
+      const c = i[w], d = t[s[w].field];
+      c.textContent = d == null ? "" : String(d), c.getAttribute("data-row") !== u && c.setAttribute("data-row", u);
+    }
+    return;
+  }
+  for (let w = 0; w < a; w++)
+    if (s[w].externalView && !i[w].querySelector("[data-external-view]")) {
+      F(o, e, t, n);
+      return;
+    }
+  for (let w = 0; w < a; w++) {
+    const c = s[w], d = i[w];
+    if (d.getAttribute("data-row") !== u && d.setAttribute("data-row", u), d.classList.contains("editing") || c.__viewTemplate || c.__compiledView || c.viewRenderer || c.externalView)
+      continue;
+    const p = t[c.field];
+    let f;
+    if (c.format)
+      try {
+        const b = c.format(p, t);
+        f = b == null ? "" : String(b);
+      } catch {
+        f = p == null ? "" : String(p);
+      }
+    else if (c.type === "date")
+      if (p == null || p === "")
+        f = "";
+      else if (p instanceof Date)
+        f = isNaN(p.getTime()) ? "" : p.toLocaleDateString();
+      else {
+        const b = new Date(p);
+        f = isNaN(b.getTime()) ? "" : b.toLocaleDateString();
+      }
+    else c.type === "boolean" ? (f = p ? "🗹" : "☐", d.setAttribute("aria-checked", String(!!p))) : f = p == null ? "" : String(p);
+    d.textContent = f;
+  }
+}
+function F(o, e, t, n) {
+  e.innerHTML = "";
+  const i = o.visibleColumns, s = i.length, r = o.focusRow, l = o.focusCol, a = o.effectiveConfig?.editOn || o.editOn, h = o, u = document.createDocumentFragment();
+  for (let w = 0; w < s; w++) {
+    const c = i[w], d = document.createElement("div");
+    d.className = "cell", B(d, "cell"), c.type !== "boolean" && d.setAttribute("role", "gridcell"), d.setAttribute("data-col", String(w)), d.setAttribute("data-row", String(n)), d.setAttribute("aria-colindex", String(w + 1)), c.type && d.setAttribute("data-type", c.type);
+    const p = c.sticky;
+    p === "left" ? d.classList.add("sticky-left") : p === "right" && d.classList.add("sticky-right");
+    let f = t[c.field];
+    const b = c.format;
+    if (b)
+      try {
+        f = b(f, t);
+      } catch {
+      }
+    const y = c.__compiledView, S = c.__viewTemplate, T = c.viewRenderer, L = c.externalView;
+    let _ = !1;
+    if (T) {
+      const g = T({ row: t, value: f, field: c.field, column: c });
+      typeof g == "string" ? (d.innerHTML = N(g), _ = !0) : g ? d.appendChild(g) : d.textContent = f == null ? "" : String(f);
+    } else if (L) {
+      const g = L, m = document.createElement("div");
+      m.setAttribute("data-external-view", ""), m.setAttribute("data-field", c.field), d.appendChild(m);
+      const E = { row: t, value: f, field: c.field, column: c };
+      if (g.mount)
+        try {
+          g.mount({ placeholder: m, context: E, spec: g });
+        } catch {
+        }
+      else
+        queueMicrotask(() => {
+          try {
+            h.dispatchEvent(
+              new CustomEvent("mount-external-view", {
+                bubbles: !0,
+                composed: !0,
+                detail: { placeholder: m, spec: g, context: E }
+              })
+            );
+          } catch {
+          }
+        });
+      m.setAttribute("data-mounted", "");
+    } else if (y) {
+      const g = y({ row: t, value: f, field: c.field, column: c }), m = y.__blocked;
+      d.innerHTML = m ? "" : N(g), _ = !0, m && (d.textContent = "", d.setAttribute("data-blocked-template", ""));
+    } else if (S) {
+      const g = S.innerHTML;
+      /Reflect\.|\bProxy\b|ownKeys\(/.test(g) ? (d.textContent = "", d.setAttribute("data-blocked-template", "")) : (d.innerHTML = N(de(g, { row: t, value: f })), _ = !0);
+    } else if (c.type === "date")
+      if (f == null || f === "")
+        d.textContent = "";
+      else {
+        let g = null;
+        if (f instanceof Date) g = f;
+        else if (typeof f == "number" || typeof f == "string") {
+          const m = new Date(f);
+          isNaN(m.getTime()) || (g = m);
+        }
+        d.textContent = g ? g.toLocaleDateString() : "";
+      }
+    else if (c.type === "boolean") {
+      const g = !!f;
+      d.innerHTML = g ? "&#x1F5F9;" : "&#9744;", d.setAttribute("role", "checkbox"), d.setAttribute("aria-checked", String(g)), d.setAttribute("aria-label", String(g));
+    } else
+      d.textContent = f == null ? "" : String(f);
+    if (_) {
+      Le(d);
+      const g = d.textContent || "";
+      /Proxy|Reflect\.ownKeys/.test(g) && (d.textContent = g.replace(/Proxy|Reflect\.ownKeys/g, "").trim(), /Proxy|Reflect\.ownKeys/.test(d.textContent || "") && (d.textContent = ""));
+    }
+    d.hasAttribute("data-blocked-template") && (d.textContent || "").trim().length && (d.textContent = ""), c.editable ? (d.tabIndex = 0, d.addEventListener("mousedown", () => {
+      o.focusRow = n, o.focusCol = w, M(o);
+    }), a === "click" ? d.addEventListener("click", (g) => {
+      d.classList.contains("editing") || (g.stopPropagation(), o.focusRow = n, o.focusCol = w, x(o, t, n, c, d));
+    }) : d.addEventListener("dblclick", (g) => {
+      g.stopPropagation(), A(o, n, t);
+      const m = o.findRenderedRowElement?.(n);
+      if (m) {
+        const E = m.children;
+        for (let k = 0; k < E.length; k++) {
+          const D = o.visibleColumns[k];
+          D && D.editable && x(o, t, n, D, E[k]);
+        }
+      }
+    }), d.addEventListener("keydown", (g) => {
+      if ((c.type === "select" || c.type === "typeahead") && !d.classList.contains("editing") && g.key === "Enter") {
+        g.preventDefault(), o.activeEditRows !== n && A(o, n, t), x(o, t, n, c, d), setTimeout(() => {
+          const m = d.querySelector("select");
+          try {
+            m?.showPicker?.();
+          } catch {
+          }
+          m?.focus();
+        }, 0);
+        return;
+      }
+      if (c.type === "boolean" && g.key === " " && !d.classList.contains("editing")) {
+        g.preventDefault(), o.activeEditRows !== n && A(o, n, t);
+        const m = !t[c.field];
+        $(o, n, c, m, t), d.innerHTML = m ? "&#x1F5F9;" : "&#9744;", d.setAttribute("aria-label", String(!!m));
+        return;
+      }
+      if (g.key === "Enter" && !d.classList.contains("editing")) {
+        g.preventDefault(), o.focusRow = n, o.focusCol = w, typeof o.beginBulkEdit == "function" ? o.beginBulkEdit(n) : x(o, t, n, c, d);
+        return;
+      }
+      if (g.key === "F2" && !d.classList.contains("editing")) {
+        g.preventDefault(), x(o, t, n, c, d);
+        return;
+      }
+    })) : c.type === "boolean" && (d.hasAttribute("tabindex") || (d.tabIndex = 0), d.addEventListener("keydown", (g) => {
+      if (g.key === " ") {
+        g.preventDefault();
+        const m = !t[c.field];
+        o.activeEditRows !== n && A(o, n, t), $(o, n, c, m, t), d.innerHTML = m ? "&#x1F5F9;" : "&#9744;", d.setAttribute("role", "checkbox"), d.setAttribute("aria-checked", String(!!m)), d.setAttribute("aria-label", String(!!m));
+      }
+    })), r === n && l === w ? d.setAttribute("aria-selected", "true") : d.setAttribute("aria-selected", "false"), u.appendChild(d);
+  }
+  e.appendChild(u);
+}
+function Z(o, e, t, n) {
+  if (e.target?.closest(".resize-handle")) return;
+  const i = t.querySelector(".cell[data-row]");
+  if (!i) return;
+  const s = Number(i.getAttribute("data-row"));
+  if (isNaN(s)) return;
+  const r = o._rows[s];
+  if (!r) return;
+  const l = e.target?.closest(".cell[data-col]");
+  if (l) {
+    const h = Number(l.getAttribute("data-col"));
+    if (!isNaN(h)) {
+      if (o.dispatchCellClick?.(e, s, h, l))
+        return;
+      o.focusRow = s, o.focusCol = h, M(o);
+    }
+  }
+  if (t.querySelector(".cell.editing")) {
+    const h = t.querySelectorAll(".cell.editing");
+    if (!n) return;
+    h.forEach((u) => u.classList.remove("editing"));
+  }
+  const a = o.effectiveConfig?.editOn || o.editOn || "doubleClick";
+  if (a === "click" || a === "doubleClick" && n) A(o, s, r);
+  else return;
+  Array.from(t.children).forEach((h, u) => {
+    const w = o.visibleColumns[u];
+    w && w.editable && x(o, r, s, w, h);
+  }), l && queueMicrotask(() => {
+    const h = t.querySelector(`.cell[data-col="${o.focusCol}"]`);
+    if (h?.classList.contains("editing")) {
+      const u = h.querySelector(
+        'input,select,textarea,[contenteditable="true"],[contenteditable=""],[tabindex]:not([tabindex="-1"])'
+      );
+      try {
+        u?.focus();
+      } catch {
+      }
+    }
+  });
+}
+function A(o, e, t) {
+  o.activeEditRows !== e && (o.rowEditSnapshots.set(e, { ...t }), o.activeEditRows = e);
+}
+function Ie(o, e, t) {
+  if (o.activeEditRows !== e) return;
+  const n = o.rowEditSnapshots.get(e), i = o._rows[e];
+  if (t && n && i)
+    Object.keys(n).forEach((r) => i[r] = n[r]), o._changedRowIndices.delete(e);
+  else if (!t) {
+    const r = o._changedRowIndices.has(e);
+    o.dispatchEvent(
+      new CustomEvent("row-commit", {
+        detail: {
+          rowIndex: e,
+          row: i,
+          changed: r,
+          changedRows: o.changedRows,
+          changedRowIndices: o.changedRowIndices
+        }
+      })
+    );
+  }
+  o.rowEditSnapshots.delete(e), o.activeEditRows = -1;
+  const s = o.findRenderedRowElement?.(e);
+  s && (F(o, s, o._rows[e], e), o._changedRowIndices.has(e) ? s.classList.add("changed") : s.classList.remove("changed")), t && queueMicrotask(() => {
+    try {
+      o.focus();
+      const r = o.focusRow, l = o.focusCol, a = o.findRenderedRowElement?.(r);
+      if (a) {
+        Array.from(o.bodyEl.querySelectorAll(".cell-focus")).forEach(
+          (u) => u.classList.remove("cell-focus")
+        );
+        const h = a.querySelector(`.cell[data-row="${r}"][data-col="${l}"]`);
+        h && h.classList.add("cell-focus");
+      }
+    } catch {
+    }
+  });
+}
+function $(o, e, t, n, i) {
+  const s = t.field;
+  if (i[s] === n) return;
+  i[s] = n;
+  const l = !o._changedRowIndices.has(e);
+  o._changedRowIndices.add(e);
+  const a = o.findRenderedRowElement?.(e);
+  a && a.classList.add("changed"), o.dispatchEvent(
+    new CustomEvent("cell-commit", {
+      detail: {
+        row: i,
+        field: s,
+        value: n,
+        rowIndex: e,
+        changedRows: o.changedRows,
+        changedRowIndices: o.changedRowIndices,
+        firstTimeForRow: l
+      }
+    })
+  );
+}
+function x(o, e, t, n, i) {
+  if (!n.editable || (o.activeEditRows !== t && A(o, t, e), i.classList.contains("editing"))) return;
+  const s = e[n.field];
+  i.classList.add("editing");
+  const r = (c) => {
+    $(o, t, n, c, e);
+  }, l = () => {
+    e[n.field] = s;
+    const c = i.querySelector("input,textarea,select");
+    c && (typeof HTMLInputElement < "u" && c instanceof HTMLInputElement && c.type === "checkbox" ? c.checked = !!s : "value" in c && (c.value = s ?? ""));
+  }, a = document.createElement("div");
+  a.style.display = "contents", i.innerHTML = "", i.appendChild(a);
+  const h = n.__editorTemplate, u = n.editor || (h ? "template" : De(n)), w = s;
+  if (u === "template" && h) {
+    const c = h.cloneNode(!0), d = n.__compiledEditor;
+    d ? c.innerHTML = d({ row: e, value: s, field: n.field, column: n }) : c.querySelectorAll("*").forEach((f) => {
+      f.childNodes.length === 1 && f.firstChild?.nodeType === Node.TEXT_NODE && (f.textContent = f.textContent?.replace(/{{\s*value\s*}}/g, s == null ? "" : String(s)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g, (b, y) => {
+        const S = e[y];
+        return S == null ? "" : String(S);
+      }) || "");
+    });
+    const p = c.querySelector("input,textarea,select");
+    if (p) {
+      const f = typeof HTMLInputElement < "u";
+      f && p instanceof HTMLInputElement && p.type === "checkbox" ? p.checked = !!s : "value" in p && (p.value = s ?? ""), p.addEventListener("blur", () => {
+        const b = f && p instanceof HTMLInputElement && p.type === "checkbox" ? p.checked : p.value;
+        r(b);
+      }), p.addEventListener("keydown", (b) => {
+        if (b.key === "Enter") {
+          const y = f && p instanceof HTMLInputElement && p.type === "checkbox" ? p.checked : p.value;
+          r(y);
+        }
+        b.key === "Escape" && l();
+      }), f && p instanceof HTMLInputElement && p.type === "checkbox" && p.addEventListener("change", () => {
+        const b = p.checked;
+        r(b);
+      }), setTimeout(() => p.focus(), 0);
+    }
+    a.appendChild(c);
+  } else if (typeof u == "string") {
+    const c = document.createElement(u);
+    c.value = w, c.addEventListener("change", () => r(c.value)), a.appendChild(c);
+  } else if (typeof u == "function") {
+    const c = u({ row: e, value: w, field: n.field, column: n, commit: r, cancel: l });
+    typeof c == "string" ? a.innerHTML = c : a.appendChild(c);
+  } else if (u && typeof u == "object") {
+    const c = document.createElement("div");
+    c.setAttribute("data-external-editor", ""), c.setAttribute("data-field", n.field), a.appendChild(c);
+    const d = { row: e, value: w, field: n.field, column: n, commit: r, cancel: l };
+    if (u.mount)
+      try {
+        u.mount({ placeholder: c, context: d, spec: u });
+      } catch {
+      }
+    else
+      o.dispatchEvent(
+        new CustomEvent("mount-external-editor", { detail: { placeholder: c, spec: u, context: d } })
+      );
+  }
+}
+function J(o, e) {
+  !o.sortState || o.sortState.field !== e.field ? (o.sortState || (o.__originalOrder = o._rows.slice()), Q(o, e, 1)) : o.sortState.direction === 1 ? Q(o, e, -1) : (o.sortState = null, o.__rowRenderEpoch++, o.rowPool.forEach((n) => n.__epoch = -1), o._rows = o.__originalOrder.slice(), V(o), o.headerRowEl?.querySelectorAll('[role="columnheader"].sortable')?.forEach((n) => {
+    n.getAttribute("aria-sort") ? (n.getAttribute("aria-sort") === "ascending" || n.getAttribute("aria-sort") === "descending") && (o.sortState || n.setAttribute("aria-sort", "none")) : n.setAttribute("aria-sort", "none");
+  }), o.refreshVirtualWindow(!0), o.dispatchEvent(
+    new CustomEvent("sort-change", { detail: { field: e.field, direction: 0 } })
+  ), o.requestStateChange?.());
+}
+function Q(o, e, t) {
+  o.sortState = { field: e.field, direction: t };
+  const n = e.sortComparator || ((i, s) => i == null && s == null ? 0 : i == null ? -1 : s == null || i > s ? 1 : i < s ? -1 : 0);
+  o._rows.sort((i, s) => n(i[e.field], s[e.field], i, s) * t), o.__rowRenderEpoch++, o.rowPool.forEach((i) => i.__epoch = -1), V(o), o.refreshVirtualWindow(!0), o.dispatchEvent(
+    new CustomEvent("sort-change", { detail: { field: e.field, direction: t } })
+  ), o.requestStateChange?.();
+}
+function V(o) {
+  o.headerRowEl = o.findHeaderRow();
+  const e = o.headerRowEl;
+  e.innerHTML = "", e.setAttribute("role", "row"), e.setAttribute("aria-rowindex", "1"), o.visibleColumns.forEach((t, n) => {
+    const i = document.createElement("div");
+    i.className = "cell", B(i, "header-cell"), i.setAttribute("role", "columnheader"), i.setAttribute("aria-colindex", String(n + 1)), i.setAttribute("data-field", t.field), i.setAttribute("data-col", String(n)), t.sticky === "left" ? i.classList.add("sticky-left") : t.sticky === "right" && i.classList.add("sticky-right");
+    const s = t.__headerTemplate;
+    if (s) Array.from(s.childNodes).forEach((r) => i.appendChild(r.cloneNode(!0)));
+    else {
+      const r = t.header || t.field, l = document.createElement("span");
+      l.textContent = r, i.appendChild(l);
+    }
+    if (t.sortable) {
+      i.classList.add("sortable"), i.tabIndex = 0;
+      const r = document.createElement("span");
+      B(r, "sort-indicator"), r.style.opacity = "0.6";
+      const l = o.sortState?.field === t.field ? o.sortState.direction : 0;
+      r.textContent = l === 1 ? "▲" : l === -1 ? "▼" : "⇅", i.appendChild(r), i.setAttribute("aria-sort", l === 0 ? "none" : l === 1 ? "ascending" : "descending"), i.addEventListener("click", (a) => {
+        o.resizeController?.isResizing || o.dispatchHeaderClick?.(a, n, i) || J(o, t);
+      }), i.addEventListener("keydown", (a) => {
+        if (a.key === "Enter" || a.key === " ") {
+          if (a.preventDefault(), o.dispatchHeaderClick?.(a, n, i)) return;
+          J(o, t);
+        }
+      });
+    }
+    if (t.resizable) {
+      t.sticky || (i.style.position = "relative");
+      const r = document.createElement("div");
+      r.className = "resize-handle", r.setAttribute("aria-hidden", "true"), r.addEventListener("mousedown", (l) => {
+        l.stopPropagation(), l.preventDefault(), o.resizeController.start(l, n, i);
+      }), i.appendChild(r);
+    }
+    e.appendChild(i);
+  });
+  try {
+    const t = o.shadowRoot;
+    t && t.querySelectorAll(".header-group-row .cell").forEach((i) => {
+      i.getAttribute("data-group") && i.classList.add("grouped");
+    });
+  } catch {
+  }
+  e.querySelectorAll(".cell.sortable").forEach((t) => {
+    t.getAttribute("aria-sort") || t.setAttribute("aria-sort", "none");
+  });
+}
+function Be(o) {
+  let e = null, t = null, n = null, i = null;
+  const s = (a) => {
+    if (!e) return;
+    const h = a.clientX - e.startX, u = Math.max(40, e.startWidth + h), w = o.visibleColumns[e.colIndex];
+    w.width = u, w.__userResized = !0, w.__renderedWidth = u, t == null && (t = requestAnimationFrame(() => {
+      t = null, o.updateTemplate?.();
+    })), o.dispatchEvent(
+      new CustomEvent("column-resize", { detail: { field: w.field, width: u } })
+    );
+  };
+  let r = !1;
+  const l = () => {
+    const a = e !== null;
+    a && (r = !0, requestAnimationFrame(() => {
+      r = !1;
+    })), window.removeEventListener("mousemove", s), window.removeEventListener("mouseup", l), n !== null && (document.documentElement.style.cursor = n, n = null), i !== null && (document.body.style.userSelect = i, i = null), e = null, a && o.requestStateChange && o.requestStateChange();
+  };
+  return {
+    get isResizing() {
+      return e !== null || r;
+    },
+    start(a, h, u) {
+      a.preventDefault();
+      const w = u.getBoundingClientRect();
+      e = { startX: a.clientX, colIndex: h, startWidth: w.width }, window.addEventListener("mousemove", s), window.addEventListener("mouseup", l), n === null && (n = document.documentElement.style.cursor), document.documentElement.style.cursor = "e-resize", i === null && (i = document.body.style.userSelect), document.body.style.userSelect = "none";
+    },
+    dispose() {
+      l();
+    }
+  };
+}
+function $e() {
+  return {
+    toolPanels: /* @__PURE__ */ new Map(),
+    headerContents: /* @__PURE__ */ new Map(),
+    toolbarButtons: /* @__PURE__ */ new Map(),
+    lightDomButtons: [],
+    lightDomHeaderContent: [],
+    activePanel: null,
+    headerContentCleanups: /* @__PURE__ */ new Map(),
+    activePanelCleanup: null,
+    toolbarButtonCleanups: /* @__PURE__ */ new Map()
+  };
+}
+function Ke(o, e) {
+  return !!(o?.header?.title || o?.header?.toolbarButtons?.length || e.toolPanels.size > 0 || e.headerContents.size > 0 || e.toolbarButtons.size > 0 || e.lightDomButtons.length > 0 || e.lightDomHeaderContent.length > 0);
+}
+function We(o, e) {
+  const t = o?.header?.title ?? "", n = !!t, i = o?.header?.toolbarButtons ?? [], s = i.length > 0, r = e.toolbarButtons.size > 0, l = e.lightDomButtons.length > 0, a = e.toolPanels.size > 0, u = (s || r || l) && a, w = [...i].sort((f, b) => (f.order ?? 100) - (b.order ?? 100)), c = [...e.toolbarButtons.values()].sort((f, b) => (f.order ?? 100) - (b.order ?? 100)), d = [...e.toolPanels.values()].sort((f, b) => (f.order ?? 100) - (b.order ?? 100));
+  let p = "";
+  for (const f of w)
+    f.icon && f.action && (p += `<button class="tbw-toolbar-btn" data-btn="${f.id}" title="${f.label}" aria-label="${f.label}"${f.disabled ? " disabled" : ""}>${f.icon}</button>`);
+  for (const f of c)
+    f.icon && f.action && (p += `<button class="tbw-toolbar-btn" data-btn="${f.id}" title="${f.label}" aria-label="${f.label}"${f.disabled ? " disabled" : ""}>${f.icon}</button>`);
+  for (const f of w)
+    (f.element || f.render) && (p += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${f.id}"></div>`);
+  for (const f of c)
+    (f.element || f.render) && (p += `<div class="tbw-toolbar-btn-slot" data-btn-slot="${f.id}"></div>`);
+  l && (p += '<slot name="toolbar"></slot>'), u && (p += '<div class="tbw-toolbar-separator"></div>');
+  for (const f of d) {
+    const b = e.activePanel === f.id;
+    p += `<button class="tbw-toolbar-btn${b ? " active" : ""}" data-panel="${f.id}" title="${f.tooltip ?? f.title}" aria-label="${f.tooltip ?? f.title}" aria-pressed="${b}" aria-controls="tbw-panel-${f.id}">${f.icon}</button>`;
+  }
+  return `
+    <div class="tbw-shell-header" part="shell-header" role="banner">
+      ${n ? `<div class="tbw-shell-title">${t}</div>` : ""}
+      <div class="tbw-shell-content" part="shell-content" role="region" aria-label="Grid information">
+        <slot name="header-content"></slot>
+      </div>
+      <div class="tbw-shell-toolbar" part="shell-toolbar" role="toolbar" aria-label="Grid tools">
+        ${p}
+      </div>
+    </div>
+  `;
+}
+function Fe(o, e, t) {
+  const n = o?.toolPanel?.position ?? "right", i = e.toolPanels.size > 0, s = e.activePanel !== null, r = e.activePanel ? e.toolPanels.get(e.activePanel) : null, l = i ? `
+    <aside class="tbw-tool-panel${s ? " open" : ""}" part="tool-panel" data-position="${n}" role="complementary" aria-label="${r?.title ?? "Tool panel"}" id="tbw-panel-${e.activePanel ?? "closed"}">
+      <div class="tbw-tool-panel-header">
+        <span class="tbw-tool-panel-title">${r?.title ?? ""}</span>
+        <button class="tbw-tool-panel-close" aria-label="Close panel">✕</button>
+      </div>
+      <div class="tbw-tool-panel-content" role="region"></div>
+    </aside>
+  ` : "";
+  return n === "left" ? `
+      <div class="tbw-shell-body">
+        ${l}
+        <div class="tbw-grid-content">
+          ${t}
+        </div>
+      </div>
+    ` : `
+    <div class="tbw-shell-body">
+      <div class="tbw-grid-content">
+        ${t}
+      </div>
+      ${l}
+    </div>
+  `;
+}
+function ee(o, e) {
+  const t = o.querySelector("tbw-grid-header");
+  if (!t) return;
+  t.style.display = "none";
+  const n = t.querySelectorAll("tbw-grid-header-content");
+  e.lightDomHeaderContent = Array.from(n), e.lightDomHeaderContent.forEach((s, r) => {
+    s.setAttribute("slot", "header-content");
+  });
+  const i = t.querySelectorAll("tbw-grid-tool-button");
+  e.lightDomButtons = Array.from(i), e.lightDomButtons.sort((s, r) => {
+    const l = parseInt(s.getAttribute("order") ?? "100", 10), a = parseInt(r.getAttribute("order") ?? "100", 10);
+    return l - a;
+  }), e.lightDomButtons.forEach((s) => {
+    s.setAttribute("slot", "toolbar");
+  });
+}
+function Ve(o, e, t, n) {
+  const i = o.querySelector(".tbw-shell-toolbar");
+  i && i.addEventListener("click", (r) => {
+    const l = r.target, a = l.closest("[data-panel]");
+    if (a) {
+      const u = a.getAttribute("data-panel");
+      u && n.onPanelToggle(u);
+      return;
+    }
+    const h = l.closest("[data-btn]");
+    if (h) {
+      const u = h.getAttribute("data-btn");
+      u && n.onToolbarButtonClick(u);
+    }
+  });
+  const s = o.querySelector(".tbw-tool-panel-close");
+  s && s.addEventListener("click", () => {
+    n.onPanelClose();
+  });
+}
+function Ge(o, e, t) {
+  const n = [...e?.header?.toolbarButtons ?? [], ...t.toolbarButtons.values()];
+  for (const i of n) {
+    const s = o.querySelector(`[data-btn-slot="${i.id}"]`);
+    if (!s) continue;
+    const r = t.toolbarButtonCleanups.get(i.id);
+    if (r && (r(), t.toolbarButtonCleanups.delete(i.id)), i.element)
+      s.appendChild(i.element);
+    else if (i.render) {
+      const l = i.render(s);
+      l && t.toolbarButtonCleanups.set(i.id, l);
+    }
+  }
+}
+function te(o, e) {
+  const t = o.querySelector(".tbw-shell-content");
+  if (!t) return;
+  const n = [...e.headerContents.values()].sort((s, r) => (s.order ?? 100) - (r.order ?? 100)), i = t.querySelector('slot[name="header-content"]');
+  for (const s of n) {
+    const r = e.headerContentCleanups.get(s.id);
+    r && (r(), e.headerContentCleanups.delete(s.id));
+    let l = t.querySelector(`[data-header-content="${s.id}"]`);
+    l || (l = document.createElement("div"), l.setAttribute("data-header-content", s.id), i ? t.insertBefore(l, i) : t.appendChild(l));
+    const a = s.render(l);
+    a && e.headerContentCleanups.set(s.id, a);
+  }
+}
+function Ue(o, e) {
+  if (!e.activePanel) return;
+  const t = e.toolPanels.get(e.activePanel);
+  if (!t) return;
+  const n = o.querySelector(".tbw-tool-panel-content");
+  if (!n) return;
+  e.activePanelCleanup && (e.activePanelCleanup(), e.activePanelCleanup = null), n.innerHTML = "";
+  const i = t.render(n);
+  i && (e.activePanelCleanup = i);
+}
+function oe(o, e) {
+  o.querySelectorAll("[data-panel]").forEach((n) => {
+    const s = n.getAttribute("data-panel") === e.activePanel;
+    n.classList.toggle("active", s), n.setAttribute("aria-pressed", String(s));
+  });
+}
+function ne(o, e) {
+  const t = o.querySelector(".tbw-tool-panel");
+  if (!t) return;
+  const n = e.activePanel !== null;
+  if (t.classList.toggle("open", n), n && e.activePanel) {
+    const i = e.toolPanels.get(e.activePanel), s = t.querySelector(".tbw-tool-panel-title");
+    s && (s.textContent = i?.title ?? ""), t.setAttribute("aria-label", `${i?.title ?? "Tool"} panel`), t.id = `tbw-panel-${e.activePanel}`;
+  }
+}
+function Xe(o, e) {
+  const t = [];
+  for (const n of o?.header?.toolbarButtons ?? [])
+    t.push({
+      id: n.id,
+      label: n.label,
+      disabled: n.disabled ?? !1,
+      source: "config"
+    });
+  for (const n of e.toolbarButtons.values())
+    t.push({
+      id: n.id,
+      label: n.label,
+      disabled: n.disabled ?? !1,
+      source: "config"
+    });
+  for (let n = 0; n < e.lightDomButtons.length; n++) {
+    const s = e.lightDomButtons[n].querySelector("button");
+    t.push({
+      id: `light-dom-${n}`,
+      label: s?.getAttribute("title") ?? s?.getAttribute("aria-label") ?? "",
+      disabled: s?.disabled ?? !1,
+      source: "light-dom"
+    });
+  }
+  for (const n of e.toolPanels.values())
+    t.push({
+      id: `panel-toggle-${n.id}`,
+      label: n.tooltip ?? n.title,
+      disabled: !1,
+      source: "panel-toggle",
+      panelId: n.id
+    });
+  return t;
+}
+function je(o) {
+  for (const e of o.headerContentCleanups.values())
+    e();
+  o.headerContentCleanups.clear(), o.activePanelCleanup && (o.activePanelCleanup(), o.activePanelCleanup = null);
+  for (const e of o.toolbarButtonCleanups.values())
+    e();
+  o.toolbarButtonCleanups.clear(), o.activePanel && o.toolPanels.get(o.activePanel)?.onClose?.(), o.toolPanels.clear(), o.headerContents.clear(), o.toolbarButtons.clear(), o.lightDomButtons = [], o.lightDomHeaderContent = [], o.activePanel = null;
+}
+class Ye {
+  constructor(e) {
+    this.grid = e;
+  }
+  /** Plugin instances in order of attachment */
+  plugins = [];
+  /** Map from plugin class to instance for fast lookup */
+  pluginMap = /* @__PURE__ */ new Map();
+  /** Cell renderers registered by plugins */
+  cellRenderers = /* @__PURE__ */ new Map();
+  /** Header renderers registered by plugins */
+  headerRenderers = /* @__PURE__ */ new Map();
+  /** Cell editors registered by plugins */
+  cellEditors = /* @__PURE__ */ new Map();
+  /**
+   * Attach all plugins from the config.
+   */
+  attachAll(e) {
+    for (const t of e)
+      this.attach(t);
+  }
+  /**
+   * Attach a plugin to this grid.
+   */
+  attach(e) {
+    if (this.pluginMap.set(e.constructor, e), this.plugins.push(e), e.cellRenderers)
+      for (const [t, n] of Object.entries(e.cellRenderers))
+        this.cellRenderers.set(t, n);
+    if (e.headerRenderers)
+      for (const [t, n] of Object.entries(e.headerRenderers))
+        this.headerRenderers.set(t, n);
+    if (e.cellEditors)
+      for (const [t, n] of Object.entries(e.cellEditors))
+        this.cellEditors.set(t, n);
+    e.attach(this.grid);
+  }
+  /**
+   * Detach all plugins and clean up.
+   */
+  detachAll() {
+    for (let e = this.plugins.length - 1; e >= 0; e--)
+      this.plugins[e].detach();
+    this.plugins = [], this.pluginMap.clear(), this.cellRenderers.clear(), this.headerRenderers.clear(), this.cellEditors.clear();
+  }
+  /**
+   * Get a plugin instance by its class.
+   */
+  getPlugin(e) {
+    return this.pluginMap.get(e);
+  }
+  /**
+   * Get a plugin instance by its name.
+   */
+  getPluginByName(e) {
+    return this.plugins.find((t) => t.name === e);
+  }
+  /**
+   * Check if a plugin is attached.
+   */
+  hasPlugin(e) {
+    return this.pluginMap.has(e);
+  }
+  /**
+   * Get all attached plugins.
+   */
+  getAll() {
+    return this.plugins;
+  }
+  /**
+   * Get a cell renderer by type name.
+   */
+  getCellRenderer(e) {
+    return this.cellRenderers.get(e);
+  }
+  /**
+   * Get a header renderer by type name.
+   */
+  getHeaderRenderer(e) {
+    return this.headerRenderers.get(e);
+  }
+  /**
+   * Get a cell editor by type name.
+   */
+  getCellEditor(e) {
+    return this.cellEditors.get(e);
+  }
+  /**
+   * Get all CSS styles from all plugins.
+   */
+  getAllStyles() {
+    return this.plugins.filter((e) => e.styles).map((e) => e.styles).join(`
+`);
+  }
+  // ===== Hook execution methods =====
+  /**
+   * Execute processRows hook on all plugins.
+   */
+  processRows(e) {
+    let t = [...e];
+    for (const n of this.plugins)
+      n.processRows && (t = n.processRows(t));
+    return t;
+  }
+  /**
+   * Execute processColumns hook on all plugins.
+   */
+  processColumns(e) {
+    let t = [...e];
+    for (const n of this.plugins)
+      n.processColumns && (t = n.processColumns(t));
+    return t;
+  }
+  /**
+   * Execute beforeRender hook on all plugins.
+   */
+  beforeRender() {
+    for (const e of this.plugins)
+      e.beforeRender?.();
+  }
+  /**
+   * Execute afterRender hook on all plugins.
+   */
+  afterRender() {
+    for (const e of this.plugins)
+      e.afterRender?.();
+  }
+  /**
+   * Execute renderRow hook on all plugins.
+   * Returns true if any plugin handled the row.
+   */
+  renderRow(e, t, n) {
+    for (const i of this.plugins)
+      if (i.renderRow?.(e, t, n))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onKeyDown hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onKeyDown(e) {
+    for (const t of this.plugins)
+      if (t.onKeyDown?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onCellClick hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onCellClick(e) {
+    for (const t of this.plugins)
+      if (t.onCellClick?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onRowClick hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onRowClick(e) {
+    for (const t of this.plugins)
+      if (t.onRowClick?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onHeaderClick hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onHeaderClick(e) {
+    for (const t of this.plugins)
+      if (t.onHeaderClick?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onScroll hook on all plugins.
+   */
+  onScroll(e) {
+    for (const t of this.plugins)
+      t.onScroll?.(e);
+  }
+  /**
+   * Execute onCellMouseDown hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onCellMouseDown(e) {
+    for (const t of this.plugins)
+      if (t.onCellMouseDown?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onCellMouseMove hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onCellMouseMove(e) {
+    for (const t of this.plugins)
+      if (t.onCellMouseMove?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Execute onCellMouseUp hook on all plugins.
+   * Returns true if any plugin handled the event.
+   */
+  onCellMouseUp(e) {
+    for (const t of this.plugins)
+      if (t.onCellMouseUp?.(e))
+        return !0;
+    return !1;
+  }
+  /**
+   * Collect context menu items from all plugins.
+   */
+  getContextMenuItems(e) {
+    const t = [];
+    for (const n of this.plugins) {
+      const i = n.getContextMenuItems?.(e);
+      i && t.push(...i);
+    }
+    return t;
+  }
+  // ===== Shell Integration Hooks =====
+  /**
+   * Collect tool panels from all plugins.
+   * Returns panels sorted by order (ascending).
+   */
+  getToolPanels() {
+    const e = [];
+    for (const t of this.plugins) {
+      const n = t.getToolPanel?.();
+      n && e.push({ plugin: t, panel: n });
+    }
+    return e.sort((t, n) => (t.panel.order ?? 0) - (n.panel.order ?? 0));
+  }
+  /**
+   * Collect header contents from all plugins.
+   * Returns contents sorted by order (ascending).
+   */
+  getHeaderContents() {
+    const e = [];
+    for (const t of this.plugins) {
+      const n = t.getHeaderContent?.();
+      n && e.push({ plugin: t, content: n });
+    }
+    return e.sort((t, n) => (t.content.order ?? 0) - (n.content.order ?? 0));
+  }
+}
+class q extends HTMLElement {
+  // TODO: Rename to 'data-grid' when migration is complete
+  static tagName = "tbw-grid";
+  #t;
+  #S = !1;
+  // ---------------- Ready Promise ----------------
+  #D;
+  #H;
+  // ================== INPUT PROPERTIES ==================
+  // These backing fields store raw user input. They are merged into
+  // #effectiveConfig by #mergeEffectiveConfig(). Never read directly
+  // for rendering logic - always use effectiveConfig or derived state.
+  #s = [];
+  #r;
+  #b;
+  #v;
+  #C;
+  // ================== SINGLE SOURCE OF TRUTH ==================
+  // All input sources converge here. This is the canonical config
+  // that all rendering and logic should read from.
+  #n = {};
+  #h = !1;
+  #x = 0;
+  #y = null;
+  #E = !1;
+  // Cached flag for plugin scroll handlers
+  #T;
+  // Cached hook to avoid closures
+  #u;
+  #f;
+  #R = !1;
+  #p;
+  #w;
+  // ---------------- Plugin System ----------------
+  #o;
+  // ---------------- Column State ----------------
+  #L;
+  #c;
+  // ---------------- Shell State ----------------
+  #e = $e();
+  #l = !1;
+  // ================== DERIVED STATE ==================
+  // _rows: result of applying plugin processRows hooks
+  _rows = [];
+  // _columns is a getter/setter that operates on effectiveConfig.columns
+  // This ensures effectiveConfig.columns is the single source of truth for columns
+  // _columns always contains ALL columns (including hidden)
+  get _columns() {
+    return this.#n.columns ?? [];
+  }
+  set _columns(e) {
+    this.#n.columns = e;
+  }
+  // visibleColumns returns only visible columns for rendering
+  // This is what header/row rendering should use
+  get visibleColumns() {
+    return this._columns.filter((e) => !e.hidden);
+  }
+  // ================== RUNTIME STATE ==================
+  // User-driven state changes at runtime (sort, etc.)
+  // Visibility is stored in effectiveConfig.columns[].hidden
+  rowPool = [];
+  __rowRenderEpoch = 0;
+  activeEditRows = -1;
+  resizeController;
+  __didInitialAutoSize = !1;
+  __lightDomColumnsCache;
+  __originalColumnNodes;
+  headerRowEl;
+  bodyEl;
+  virtualization = {
+    enabled: !0,
+    rowHeight: 28,
+    // Initial state - will recalculate after first render
+    bypassThreshold: 24,
+    // Skip virtualization if <= this many rows (saves overhead)
+    start: 0,
+    end: 0,
+    container: null,
+    // Faux scrollbar element
+    viewportEl: null,
+    // Rows viewport for measuring visible height
+    totalHeightEl: null
+    // Spacer for virtual height
+  };
+  sortState = null;
+  __originalOrder = [];
+  focusRow = 0;
+  focusCol = 0;
+  gridTemplate = "";
+  rowEditSnapshots = /* @__PURE__ */ new Map();
+  _changedRowIndices = /* @__PURE__ */ new Set();
+  // ---------------- Public API Props (getters/setters) ----------------
+  // Getters return the EFFECTIVE value (after merging), not the raw input.
+  // This is what consumers and plugins need - the current resolved state.
+  // Setters update input properties which trigger re-merge into effectiveConfig.
+  get rows() {
+    return this._rows;
+  }
+  set rows(e) {
+    const t = this.#s;
+    this.#s = e, t !== e && this.#j();
+  }
+  /**
+   * Get the original unfiltered/unprocessed rows.
+   * Use this when you need access to all source data regardless of active filters.
+   */
+  get sourceRows() {
+    return this.#s;
+  }
+  get columns() {
+    return [...this._columns];
+  }
+  set columns(e) {
+    const t = this.#r;
+    this.#r = e, t !== e && this.#Y();
+  }
+  get gridConfig() {
+    return this.#n;
+  }
+  set gridConfig(e) {
+    const t = this.#b;
+    this.#b = e, t !== e && this.#Z();
+  }
+  get fitMode() {
+    return this.#n.fitMode ?? "stretch";
+  }
+  set fitMode(e) {
+    const t = this.#v;
+    this.#v = e, t !== e && this.#U();
+  }
+  get editOn() {
+    return this.#n.editOn;
+  }
+  set editOn(e) {
+    const t = this.#C;
+    this.#C = e, t !== e && this.#X();
+  }
+  // Effective config accessor for internal modules and plugins
+  // Returns the merged config (single source of truth) before plugin processing
+  // Use this when you need the raw merged config (e.g., for column definitions including hidden)
+  get effectiveConfig() {
+    return this.#n;
+  }
+  constructor() {
+    super(), this.#t = this.attachShadow({ mode: "open" }), this.#W(), this.#D = new Promise((e) => this.#H = e);
+  }
+  #W() {
+    const e = new CSSStyleSheet();
+    e.replaceSync(we), this.#t.adoptedStyleSheets = [e];
+  }
+  // ---------------- Plugin System ----------------
+  /**
+   * Get a plugin instance by its class.
+   * Used by plugins for inter-plugin communication.
+   */
+  getPlugin(e) {
+    return this.#o?.getPlugin(e);
+  }
+  /**
+   * Get a plugin instance by its name.
+   * Used for loose coupling between plugins (avoids static imports).
+   */
+  getPluginByName(e) {
+    return this.#o?.getPluginByName(e);
+  }
+  /**
+   * Request a full re-render of the grid.
+   * Called by plugins when they need the grid to update.
+   * Note: This does NOT reset plugin state - just re-processes rows/columns and renders.
+   */
+  requestRender() {
+    this.#A(), this.#k(), this.#_(), this.updateTemplate(), this.refreshVirtualWindow(!0);
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Called by plugins when they only need to update CSS classes/styles.
+   * This runs all plugin afterRender hooks without rebuilding row/column DOM.
+   */
+  requestAfterRender() {
+    this.#g();
+  }
+  /**
+   * Initialize plugin system with instances from config.
+   * Plugins are class instances passed in gridConfig.plugins[].
+   */
+  #z() {
+    this.#o = new Ye(this);
+    const e = this.#n?.plugins, t = Array.isArray(e) ? e : [];
+    this.#o.attachAll(t);
+  }
+  /**
+   * Inject all plugin styles into the shadow DOM.
+   * Must be called after #render() since innerHTML wipes existing content.
+   */
+  #N() {
+    const e = this.#o?.getAllStyles() ?? "";
+    if (e) {
+      const t = document.createElement("style");
+      t.setAttribute("data-plugin", "all"), t.textContent = e, this.#t.appendChild(t);
+    }
+  }
+  /**
+   * Update plugins when grid config changes.
+   * With class-based plugins, we need to detach old and attach new.
+   */
+  #q() {
+    this.#o && this.#o.detachAll(), this.#z(), this.#N(), this.#E = this.#o?.getAll().some((e) => e.onScroll) ?? !1;
+  }
+  /**
+   * Clean up plugin states when grid disconnects.
+   */
+  #F() {
+    this.#o?.detachAll();
+  }
+  /**
+   * Collect tool panels and header content from all plugins.
+   * Called after plugins are attached but before render.
+   */
+  #V() {
+    if (!this.#o) return;
+    const e = this.#o.getToolPanels();
+    for (const { panel: n } of e)
+      this.#e.toolPanels.has(n.id) || this.#e.toolPanels.set(n.id, n);
+    const t = this.#o.getHeaderContents();
+    for (const { content: n } of t)
+      this.#e.headerContents.has(n.id) || this.#e.headerContents.set(n.id, n);
+  }
+  // ---------------- Lifecycle ----------------
+  connectedCallback() {
+    this.hasAttribute("tabindex") || (this.tabIndex = 0), this._rows = Array.isArray(this.#s) ? [...this.#s] : [], this.#d(), this.#z(), this.#V(), this.#S || (this.#K(), this.#N(), this.#S = !0), this.#I();
+  }
+  disconnectedCallback() {
+    this.#F(), je(this.#e), this.#l = !1, this.#u && (document.removeEventListener("keydown", this.#u, !0), this.#u = void 0), this.#f && (document.removeEventListener("mousedown", this.#f, !1), this.#f = void 0), this.#p && (document.removeEventListener("mousemove", this.#p), this.#p = void 0), this.#w && (document.removeEventListener("mouseup", this.#w), this.#w = void 0), this.resizeController && this.resizeController.dispose(), this.#h = !1;
+  }
+  #I() {
+    const t = this.#t.querySelector(".tbw-grid-content") ?? this.#t.querySelector(".tbw-grid-root");
+    if (this.headerRowEl = t?.querySelector(".header-row"), this.virtualization.totalHeightEl = t?.querySelector(".faux-vscroll-spacer"), this.virtualization.viewportEl = t?.querySelector(".rows-viewport"), this.bodyEl = t?.querySelector(".rows"), this.#l) {
+      te(this.#t, this.#e), Ge(this.#t, this.#n?.shell, this.#e);
+      const s = this.#n?.shell?.toolPanel?.defaultOpen;
+      s && this.#e.toolPanels.has(s) && this.openToolPanel(s);
+    }
+    this.setAttribute("data-upgraded", ""), this.hasAttribute("role") || this.setAttribute("role", "grid"), this.#h = !0, this.#a(), this.addEventListener("keydown", (s) => He(this, s)), this.#u || (this.#u = (s) => {
+      s.key === "Escape" && this.activeEditRows !== -1 && this.#O(this.activeEditRows, !0);
+    }, document.addEventListener("keydown", this.#u, !0)), this.#f || (this.#f = (s) => {
+      if (this.activeEditRows === -1) return;
+      const r = this.findRenderedRowElement(this.activeEditRows);
+      !r || (s.composedPath && s.composedPath() || []).includes(r) || this.#O(this.activeEditRows, !1);
+    }, document.addEventListener("mousedown", this.#f, !1));
+    const n = t?.querySelector(".faux-vscroll"), i = t?.querySelector(".rows");
+    if (this.virtualization.container = n ?? this, this.#E = this.#o?.getAll().some((s) => s.onScroll) ?? !1, n && i) {
+      n.addEventListener(
+        "scroll",
+        () => {
+          if (!this.virtualization.enabled && !this.#E) return;
+          const r = n.scrollTop, l = this.virtualization.rowHeight, a = -(r % l);
+          i.style.transform = `translateY(${a}px)`, this.#y = r, this.#x || (this.#x = requestAnimationFrame(() => {
+            this.#x = 0, this.#y !== null && (this.#te(this.#y), this.#y = null);
+          }));
+        },
+        { passive: !0 }
+      );
+      const s = t?.querySelector(".rows-body");
+      s && s.addEventListener(
+        "wheel",
+        (r) => {
+          r.preventDefault(), n.scrollTop += r.deltaY;
+        },
+        { passive: !1 }
+      );
+    }
+    this.resizeController = Be(this), this.#t.addEventListener("mousedown", (s) => this.#oe(s)), this.#p || (this.#p = (s) => this.#ne(s), document.addEventListener("mousemove", this.#p)), this.#w || (this.#w = (s) => this.#ie(s), document.addEventListener("mouseup", this.#w)), this.virtualization.enabled && requestAnimationFrame(() => this.refreshVirtualWindow(!0)), requestAnimationFrame(() => {
+      const s = this.bodyEl.querySelector(".data-grid-row");
+      if (s) {
+        const r = s.getBoundingClientRect().height;
+        r && Math.abs(r - this.virtualization.rowHeight) > 0.1 && (this.virtualization.rowHeight = r, this.refreshVirtualWindow(!0));
+      }
+    }), queueMicrotask(() => this.#G()), requestAnimationFrame(() => requestAnimationFrame(() => this.#H?.()));
+  }
+  // ---------------- Event Emitters ----------------
+  #i(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  }
+  emitCellCommit(e) {
+    this.#i("cell-commit", e);
+  }
+  emitRowCommit(e) {
+    this.#i("row-commit", e);
+  }
+  emitSortChange(e) {
+    this.#i("sort-change", e);
+  }
+  emitColumnResize(e) {
+    this.#i("column-resize", e);
+  }
+  emitActivateCell(e) {
+    this.#i("activate-cell", e);
+  }
+  /** Update ARIA selection attributes on rendered rows/cells */
+  #G() {
+    this.bodyEl?.querySelectorAll(".data-grid-row")?.forEach((t, n) => {
+      const i = n === this.focusRow;
+      t.setAttribute("aria-selected", String(i)), t.querySelectorAll(".cell").forEach((s, r) => {
+        s.setAttribute("aria-selected", String(i && r === this.focusCol));
+      });
+    });
+  }
+  // ---------------- Watch Handlers ----------------
+  #U() {
+    if (!this.#h) return;
+    this.#d(), this.#n.fitMode === "fixed" ? (this.__didInitialAutoSize = !1, this.#B()) : (this._columns.forEach((t) => {
+      !t.__userResized && t.__autoSized && delete t.width;
+    }), this.updateTemplate());
+  }
+  #X() {
+    this.#h && (this.#d(), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.refreshVirtualWindow(!0));
+  }
+  #j() {
+    this._rows = Array.isArray(this.#s) ? [...this.#s] : [], this.#A(), !this.#r || Array.isArray(this.#r) && this.#r.length === 0 ? this.#a() : this.refreshVirtualWindow(!0);
+  }
+  #Y() {
+    j(this), this.#h && (this.#d(), this.#a());
+  }
+  #Z() {
+    this.#h && (this.#d(), this.#q(), this.#A(), this.#k(), this.#_(), this.updateTemplate(), this.refreshVirtualWindow(!0));
+  }
+  // ---------------- Helper Wrappers ----------------
+  #J() {
+    Oe(this);
+  }
+  #_() {
+    V(this);
+  }
+  updateTemplate() {
+    he(this);
+  }
+  #B() {
+    Me(this);
+  }
+  #k() {
+    if (this.#o) {
+      const e = this._columns.filter((n) => !n.hidden), t = this.#o.processColumns([...e]);
+      if (t !== e) {
+        const n = new Map(t.map((s, r) => [s.field, { col: s, order: r }])), i = this._columns.map((s) => {
+          if (s.hidden) return s;
+          const r = n.get(s.field);
+          return r ? r.col : s;
+        });
+        this._columns = i;
+      }
+    }
+  }
+  /** Execute all plugin afterRender hooks */
+  #g() {
+    this.#o?.afterRender();
+  }
+  /** Recompute row model via plugin hooks (grouping, tree, filtering, etc.). */
+  #A() {
+    j(this);
+    const e = Array.isArray(this.#s) ? [...this.#s] : [], t = this.#o?.processRows(e) ?? e;
+    this._rows = t;
+  }
+  /**
+   * Build the canonical effective configuration by merging all input sources.
+   *
+   * This is the **single source of truth** for the grid's configuration.
+   * All inputs (gridConfig, light DOM, individual props) converge here.
+   *
+   * **Precedence (lowest → highest):**
+   * 1. `gridConfig` property - base config object
+   * 2. Light DOM `<tbw-grid-column>` elements - declarative columns
+   * 3. `columns` property - programmatic columns override
+   * 4. Inferred columns - auto-detected from row data
+   * 5. Individual props (`fitMode`, `editOn`) - convenience overrides
+   *
+   * After this method runs:
+   * - `#effectiveConfig` contains the merged result
+   * - `_columns` is NOT set here (done by #getColumnConfiguration + #processColumns)
+   * - Plugins receive config via their attach() method
+   */
+  #d() {
+    const e = this.#b ? { ...this.#b } : {};
+    let t = Array.isArray(e.columns) ? [...e.columns] : [];
+    const n = (this.__lightDomColumnsCache || []).map((i) => ({
+      ...i
+    }));
+    if (n.length) {
+      const i = {};
+      t.forEach((s) => i[s.field] = s), n.forEach((s) => {
+        const r = i[s.field];
+        r ? (s.header && !r.header && (r.header = s.header), s.type && !r.type && (r.type = s.type), r.sortable = r.sortable || s.sortable, s.resizable && (r.resizable = !0), s.editable && (r.editable = !0)) : (t.push(s), i[s.field] = s);
+      });
+    }
+    if (this.#r && this.#r.length && (t = [...this.#r]), (!t || t.length === 0) && this._rows.length && (t = ce(this._rows).columns), t.length) {
+      t.forEach((r) => {
+        r.sortable === void 0 && (r.sortable = !0), r.resizable === void 0 && (r.resizable = !0);
+      });
+      const i = this.#n.columns;
+      i?.some((r) => r.__compiledView || r.__compiledEditor) ? e.columns = i : e.columns = t;
+    } else {
+      const i = this.#n.columns;
+      i?.some((s) => s.__compiledView || s.__compiledEditor) && (e.columns = i);
+    }
+    this.#v && (e.fitMode = this.#v), e.fitMode || (e.fitMode = "stretch"), this.#C && (e.editOn = this.#C), e.columnState && !this.#c && (this.#c = e.columnState), this.#n = e, e.fitMode === "fixed" && this._columns.forEach((i) => {
+      i.width == null && (i.width = 80);
+    });
+  }
+  // ---------------- Delegate Wrappers ----------------
+  #P(e, t, n = this.__rowRenderEpoch) {
+    this.#T || (this.#T = (i, s, r) => this.#o?.renderRow(i, s, r) ?? !1), qe(this, e, t, n, this.#T);
+  }
+  #Q(e, t) {
+    A(this, e, t);
+  }
+  #O(e, t) {
+    Ie(this, e, t);
+  }
+  // ---------------- Core Helpers ----------------
+  #a() {
+    if (!this.isConnected || !this.headerRowEl || !this.bodyEl)
+      return;
+    const e = this.#b?.columns || this.#r || [];
+    if (e.length) {
+      const n = new Map(this._columns.filter((s) => s.hidden).map((s) => [s.field, !0])), i = e.map((s) => ({
+        ...s,
+        hidden: n.get(s.field) ?? s.hidden
+      }));
+      this._columns = i;
+    }
+    if (this.#J(), this.#d(), this.#q(), this.#A(), this.#k(), this.#c) {
+      const n = this.#c;
+      this.#c = void 0, this.#$(n);
+    }
+    this.#_(), this.updateTemplate(), this.refreshVirtualWindow(!0), this.#n.fitMode === "fixed" && !this.__didInitialAutoSize && requestAnimationFrame(() => this.#B()), this.bodyEl && (this.bodyEl.style.display = "", this.bodyEl.style.gridTemplateColumns = ""), queueMicrotask(() => this.#g());
+  }
+  /** Internal method to apply column state without triggering setup loop */
+  #$(e) {
+    const t = this.#n.columns ?? [], n = this.#o?.getAll() ?? [];
+    ge(this, e, t, n);
+    for (const i of e.columns) {
+      const s = t.find((r) => r.field === i.field);
+      s && (s.hidden = !i.visible);
+    }
+  }
+  #ee() {
+    return this._rows.length <= this.virtualization.bypassThreshold;
+  }
+  #te(e) {
+    if (this.refreshVirtualWindow(!1), this.#E) {
+      const t = this.virtualization.container, n = {
+        scrollTop: e,
+        scrollLeft: t?.scrollLeft ?? 0,
+        scrollHeight: t?.scrollHeight ?? 0,
+        scrollWidth: t?.scrollWidth ?? 0,
+        clientHeight: t?.clientHeight ?? 0,
+        clientWidth: t?.clientWidth ?? 0,
+        originalEvent: new Event("scroll")
+      };
+      this.#o?.onScroll(n);
+    }
+  }
+  findHeaderRow() {
+    return this.#t.querySelector(".header-row");
+  }
+  findRenderedRowElement(e) {
+    return Array.from(this.bodyEl.querySelectorAll(".data-grid-row")).find((t) => {
+      const n = t.querySelector(".cell[data-row]");
+      return n && Number(n.getAttribute("data-row")) === e;
+    }) || null;
+  }
+  /**
+   * Dispatch a cell click event to the plugin system.
+   * Returns true if any plugin handled the event.
+   */
+  dispatchCellClick(e, t, n, i) {
+    const s = this._rows[t], r = this._columns[n];
+    if (!s || !r) return !1;
+    const l = {
+      row: s,
+      rowIndex: t,
+      colIndex: n,
+      field: r.field,
+      value: s[r.field],
+      cellEl: i,
+      originalEvent: e
+    };
+    return this.#o?.onCellClick(l) ?? !1;
+  }
+  /**
+   * Dispatch a header click event to the plugin system.
+   * Returns true if any plugin handled the event.
+   */
+  dispatchHeaderClick(e, t, n) {
+    const i = this._columns[t];
+    if (!i) return !1;
+    const s = {
+      colIndex: t,
+      field: i.field,
+      column: i,
+      headerEl: n,
+      originalEvent: e
+    };
+    return this.#o?.onHeaderClick(s) ?? !1;
+  }
+  /**
+   * Dispatch a keyboard event to the plugin system.
+   * Returns true if any plugin handled the event.
+   */
+  dispatchKeyDown(e) {
+    return this.#o?.onKeyDown(e) ?? !1;
+  }
+  /**
+   * Build a CellMouseEvent from a native MouseEvent.
+   * Extracts cell/row information from the event target.
+   */
+  #M(e, t) {
+    let n = null;
+    const i = e.composedPath?.();
+    if (i && i.length > 0 ? n = i[0] : n = e.target, n && !this.#t.contains(n)) {
+      const p = this.#t.elementFromPoint(e.clientX, e.clientY);
+      p && (n = p);
+    }
+    const s = n?.closest?.("[data-col]"), r = n?.closest?.(".data-grid-row"), l = n?.closest?.(".header-row");
+    let a, h, u, w, c, d;
+    return s && (a = parseInt(s.getAttribute("data-row") ?? "-1", 10), h = parseInt(s.getAttribute("data-col") ?? "-1", 10), a >= 0 && h >= 0 && (u = this._rows[a], d = this._columns[h], w = d?.field, c = u && w ? u[w] : void 0)), {
+      type: t,
+      row: u,
+      rowIndex: a !== void 0 && a >= 0 ? a : void 0,
+      colIndex: h !== void 0 && h >= 0 ? h : void 0,
+      field: w,
+      value: c,
+      column: d,
+      originalEvent: e,
+      cellElement: s ?? void 0,
+      rowElement: r ?? void 0,
+      isHeader: !!l,
+      cell: a !== void 0 && h !== void 0 && a >= 0 && h >= 0 ? { row: a, col: h } : void 0
+    };
+  }
+  /**
+   * Handle mousedown events and dispatch to plugin system.
+   */
+  #oe(e) {
+    const t = this.#M(e, "mousedown");
+    (this.#o?.onCellMouseDown(t) ?? !1) && (this.#R = !0);
+  }
+  /**
+   * Handle mousemove events (only when dragging).
+   */
+  #ne(e) {
+    if (!this.#R) return;
+    const t = this.#M(e, "mousemove");
+    this.#o?.onCellMouseMove(t);
+  }
+  /**
+   * Handle mouseup events.
+   */
+  #ie(e) {
+    if (!this.#R) return;
+    const t = this.#M(e, "mouseup");
+    this.#o?.onCellMouseUp(t), this.#R = !1;
+  }
+  // API consumed by internal utils (rows.ts)
+  get changedRows() {
+    return Array.from(this._changedRowIndices).map((e) => this._rows[e]);
+  }
+  get changedRowIndices() {
+    return Array.from(this._changedRowIndices);
+  }
+  async resetChangedRows(e) {
+    this._changedRowIndices.clear(), e || this.#i("changed-rows-reset", { rows: this.changedRows, indices: this.changedRowIndices }), this.rowPool.forEach((t) => t.classList.remove("changed"));
+  }
+  async beginBulkEdit(e) {
+    this.#Q(e, this._rows[e]);
+  }
+  async commitActiveRowEdit() {
+    this.activeEditRows !== -1 && this.#O(this.activeEditRows, !1);
+  }
+  async ready() {
+    return this.#D;
+  }
+  async forceLayout() {
+    this.#a(), await new Promise((e) => requestAnimationFrame(() => requestAnimationFrame(e)));
+  }
+  /** Public method: returns a frozen snapshot of the merged effective configuration */
+  async getConfig() {
+    return Object.freeze({ ...this.#n || {} });
+  }
+  // ---------------- Column Visibility API ----------------
+  /**
+   * Set the visibility of a column.
+   * @param field - The field name of the column
+   * @param visible - Whether the column should be visible
+   * @returns True if visibility was changed, false if column not found or locked
+   */
+  setColumnVisible(e, t) {
+    const n = this.#n.columns, i = n?.find((l) => l.field === e);
+    if (!i || !t && i.lockVisible || !t && (n ?? []).filter((a) => !a.hidden && a.field !== e).length === 0)
+      return !1;
+    const s = !!i.hidden, r = !t;
+    return s !== r ? (i.hidden = r, this.#i("column-visibility", {
+      field: e,
+      visible: t,
+      visibleColumns: (n ?? []).filter((l) => !l.hidden).map((l) => l.field)
+    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#a(), this.requestStateChange(), !0) : !1;
+  }
+  /**
+   * Toggle the visibility of a column.
+   * @param field - The field name of the column
+   * @returns True if visibility was toggled, false if column not found or locked
+   */
+  toggleColumnVisibility(e) {
+    const i = !!this.#n.columns?.find((s) => s.field === e)?.hidden;
+    return this.setColumnVisible(e, i);
+  }
+  /**
+   * Check if a column is currently visible.
+   * @param field - The field name of the column
+   * @returns True if visible, false if hidden or not found
+   */
+  isColumnVisible(e) {
+    const n = this.#n.columns?.find((i) => i.field === e);
+    return n ? !n.hidden : !1;
+  }
+  /**
+   * Show all columns.
+   */
+  showAllColumns() {
+    const e = this.#n.columns;
+    e?.some((n) => n.hidden) && (e?.forEach((n) => {
+      n.hidden = !1;
+    }), this.#i("column-visibility", {
+      visibleColumns: (e ?? []).map((n) => n.field)
+    }), this.rowPool.length = 0, this.bodyEl && (this.bodyEl.innerHTML = ""), this.__rowRenderEpoch++, this.#a(), this.requestStateChange());
+  }
+  /**
+   * Get list of all column fields (including hidden).
+   * Returns columns reflecting current display order (after reordering).
+   * Hidden columns are interleaved at their original relative positions.
+   * @returns Array of all field names with their visibility status
+   */
+  getAllColumns() {
+    return (this.#n.columns ?? []).map((t) => ({
+      field: t.field,
+      header: t.header || t.field,
+      visible: !t.hidden,
+      lockVisible: t.lockVisible
+    }));
+  }
+  /**
+   * Reorder columns according to the specified field order.
+   * This directly updates _columns in place without going through processColumns.
+   * @param order - Array of field names in the desired order
+   */
+  setColumnOrder(e) {
+    if (!e.length) return;
+    const t = new Map(this._columns.map((i) => [i.field, i])), n = [];
+    for (const i of e) {
+      const s = t.get(i);
+      s && (n.push(s), t.delete(i));
+    }
+    for (const i of t.values())
+      n.push(i);
+    this._columns = n, this.#_(), this.updateTemplate(), this.refreshVirtualWindow(!0);
+  }
+  /**
+   * Get the current column order as an array of field names.
+   * @returns Array of field names in display order
+   */
+  getColumnOrder() {
+    return this._columns.map((e) => e.field);
+  }
+  // ---------------- Column State API ----------------
+  /**
+   * Get the current column state, including order, width, visibility, sort, and plugin state.
+   * Returns a serializable object suitable for localStorage or database storage.
+   */
+  getColumnState() {
+    const e = this.#o?.getAll() ?? [];
+    return ae(this, e);
+  }
+  /**
+   * Set the column state, restoring order, width, visibility, sort, and plugin state.
+   * Use this to restore previously saved column state.
+   */
+  set columnState(e) {
+    e && (this.#c = e, this.#S && this.#se(e));
+  }
+  /**
+   * Get the current column state.
+   */
+  get columnState() {
+    return this.getColumnState();
+  }
+  /**
+   * Apply column state internally.
+   */
+  #se(e) {
+    (this.#n.columns ?? []).forEach((n) => {
+      n.hidden = !1;
+    }), this.#$(e), this.#a();
+  }
+  /**
+   * Request a state change event to be emitted.
+   * Called internally after resize, reorder, visibility, or sort changes.
+   * Plugins should call this after changing their state.
+   * The event is debounced to avoid excessive events during drag operations.
+   */
+  requestStateChange() {
+    this.#L || (this.#L = me(
+      this,
+      () => this.#o?.getAll() ?? [],
+      (e) => this.#i("column-state-change", e)
+    )), this.#L();
+  }
+  /**
+   * Reset column state to initial configuration.
+   * Clears all user modifications (order, width, visibility, sort).
+   */
+  resetColumnState() {
+    this.#c = void 0, (this.#n.columns ?? []).forEach((n) => {
+      n.hidden = !1;
+    }), this.sortState = null, this.__originalOrder = [], this.#d(), this.#a();
+    const t = this.#o?.getAll() ?? [];
+    for (const n of t)
+      if (n.applyColumnState)
+        for (const i of this._columns)
+          n.applyColumnState(i.field, {
+            field: i.field,
+            order: 0,
+            visible: !0
+          });
+    this.requestStateChange();
+  }
+  // ---------------- Shell / Tool Panel API ----------------
+  /**
+   * Get the currently active tool panel ID, or null if none is open.
+   */
+  get activeToolPanel() {
+    return this.#e.activePanel;
+  }
+  /**
+   * Open a tool panel by ID.
+   * Closes any currently open panel first.
+   */
+  openToolPanel(e) {
+    if (!this.#e.toolPanels.get(e)) {
+      console.warn(`[tbw-grid] Tool panel "${e}" not found`);
+      return;
+    }
+    this.#e.activePanel && this.#e.activePanel !== e && this.closeToolPanel(), this.#e.activePanel = e, oe(this.#t, this.#e), ne(this.#t, this.#e), Ue(this.#t, this.#e), this.#i("tool-panel-open", { id: e });
+  }
+  /**
+   * Close the currently open tool panel.
+   */
+  closeToolPanel() {
+    if (!this.#e.activePanel) return;
+    const e = this.#e.activePanel, t = this.#e.toolPanels.get(e);
+    this.#e.activePanelCleanup && (this.#e.activePanelCleanup(), this.#e.activePanelCleanup = null), t?.onClose?.(), this.#e.activePanel = null, oe(this.#t, this.#e), ne(this.#t, this.#e), this.#i("tool-panel-close", { id: e });
+  }
+  /**
+   * Toggle a tool panel open/closed.
+   */
+  toggleToolPanel(e) {
+    this.#e.activePanel === e ? this.closeToolPanel() : this.openToolPanel(e);
+  }
+  /**
+   * Get registered tool panel definitions.
+   */
+  getToolPanels() {
+    return [...this.#e.toolPanels.values()];
+  }
+  /**
+   * Register a custom tool panel (without creating a plugin).
+   */
+  registerToolPanel(e) {
+    if (this.#e.toolPanels.has(e.id)) {
+      console.warn(`[tbw-grid] Tool panel "${e.id}" already registered`);
+      return;
+    }
+    this.#e.toolPanels.set(e.id, e), this.#l && this.#m();
+  }
+  /**
+   * Unregister a custom tool panel.
+   */
+  unregisterToolPanel(e) {
+    this.#e.activePanel === e && this.closeToolPanel(), this.#e.toolPanels.delete(e), this.#l && this.#m();
+  }
+  /**
+   * Get registered header content definitions.
+   */
+  getHeaderContents() {
+    return [...this.#e.headerContents.values()];
+  }
+  /**
+   * Register custom header content (without creating a plugin).
+   */
+  registerHeaderContent(e) {
+    if (this.#e.headerContents.has(e.id)) {
+      console.warn(`[tbw-grid] Header content "${e.id}" already registered`);
+      return;
+    }
+    this.#e.headerContents.set(e.id, e), this.#l && te(this.#t, this.#e);
+  }
+  /**
+   * Unregister custom header content.
+   */
+  unregisterHeaderContent(e) {
+    const t = this.#e.headerContentCleanups.get(e);
+    t && (t(), this.#e.headerContentCleanups.delete(e)), this.#e.headerContents.get(e)?.onDestroy?.(), this.#e.headerContents.delete(e), this.#t.querySelector(`[data-header-content="${e}"]`)?.remove();
+  }
+  /**
+   * Get all registered toolbar buttons.
+   */
+  getToolbarButtons() {
+    return Xe(this.#n?.shell, this.#e);
+  }
+  /**
+   * Register a custom toolbar button programmatically.
+   */
+  registerToolbarButton(e) {
+    if (this.#e.toolbarButtons.has(e.id)) {
+      console.warn(`[tbw-grid] Toolbar button "${e.id}" already registered`);
+      return;
+    }
+    this.#e.toolbarButtons.set(e.id, e), this.#l && this.#m();
+  }
+  /**
+   * Unregister a custom toolbar button.
+   */
+  unregisterToolbarButton(e) {
+    const t = this.#e.toolbarButtonCleanups.get(e);
+    t && (t(), this.#e.toolbarButtonCleanups.delete(e)), this.#e.toolbarButtons.delete(e), this.#l && this.#m();
+  }
+  /**
+   * Enable/disable a toolbar button by ID.
+   */
+  setToolbarButtonDisabled(e, t) {
+    const n = this.#e.toolbarButtons.get(e);
+    n && (n.disabled = t);
+    const i = this.#t.querySelector(`[data-btn="${e}"]`);
+    i && (i.disabled = t);
+  }
+  /**
+   * Re-parse light DOM shell elements and refresh shell header.
+   * Call this after dynamically modifying <tbw-grid-header> children.
+   */
+  refreshShellHeader() {
+    this.#m();
+  }
+  /**
+   * Internal shell header refresh.
+   */
+  #m() {
+    ee(this, this.#e), this.#K(), this.#I();
+  }
+  // ---------------- Virtual Window ----------------
+  /**
+   * Core virtualization routine. Chooses between bypass (small datasets), grouped window rendering,
+   * or standard row window rendering.
+   */
+  refreshVirtualWindow(e = !1) {
+    if (!this.bodyEl) return;
+    const t = this._rows.length;
+    if (!this.virtualization.enabled) {
+      this.#P(0, t), this.#g();
+      return;
+    }
+    if (this.#ee()) {
+      this.virtualization.start = 0, this.virtualization.end = t, this.bodyEl.style.transform = "translateY(0px)", this.#P(0, t, this.__rowRenderEpoch), this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${t * this.virtualization.rowHeight}px`), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), this.#g();
+      return;
+    }
+    const n = this.virtualization.container ?? this, s = (this.virtualization.viewportEl ?? n).clientHeight, r = this.virtualization.rowHeight, l = n.scrollTop;
+    let a = Math.floor(l / r);
+    a < 0 && (a = 0);
+    const h = Math.ceil(s / r) + 2;
+    let u = a + h;
+    u > t && (u = t), this.virtualization.start = a, this.virtualization.end = u, this.virtualization.totalHeightEl && (this.virtualization.totalHeightEl.style.height = `${t * r}px`);
+    const w = -(l % r);
+    this.bodyEl.style.transform = `translateY(${w}px)`, this.#P(a, u, e ? ++this.__rowRenderEpoch : this.__rowRenderEpoch), this.setAttribute("aria-rowcount", String(t)), this.setAttribute("aria-colcount", String(this.visibleColumns.length)), e && this.#g();
+  }
+  // ---------------- Render ----------------
+  #K() {
+    ee(this, this.#e);
+    const e = this.#n?.shell, t = Ke(e, this.#e), n = `
+      <div class="tbw-scroll-area">
+        <div class="rows-body-wrapper">
+          <div class="rows-body">
+            <div class="header">
+              <div class="header-row" part="header-row"></div>
+            </div>
+            <div class="rows-container">
+              <div class="rows-viewport">
+                <div class="rows"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="faux-vscroll">
+        <div class="faux-vscroll-spacer"></div>
+      </div>
+    `;
+    if (t) {
+      const i = We(e, this.#e), s = Fe(e, this.#e, n);
+      this.#t.innerHTML = `
+        <div class="tbw-grid-root has-shell">
+          ${i}
+          ${s}
+        </div>
+      `, this.#re(), this.#l = !0;
+    } else
+      this.#t.innerHTML = `
+        <div class="tbw-grid-root">
+          <div class="tbw-grid-content">
+            ${n}
+          </div>
+        </div>
+      `;
+  }
+  /**
+   * Set up shell event listeners after render.
+   */
+  #re() {
+    Ve(this.#t, this.#n?.shell, this.#e, {
+      onPanelToggle: (e) => this.toggleToolPanel(e),
+      onPanelClose: () => this.closeToolPanel(),
+      onToolbarButtonClick: (e) => this.#le(e)
+    });
+  }
+  /**
+   * Handle toolbar button click (for config buttons with action).
+   */
+  #le(e) {
+    const n = (this.#n?.shell?.header?.toolbarButtons ?? []).find((s) => s.id === e);
+    if (n?.action) {
+      n.action();
+      return;
+    }
+    const i = this.#e.toolbarButtons.get(e);
+    i?.action && i.action();
+  }
+}
+customElements.get(q.tagName) || customElements.define(q.tagName, q);
+class ue {
+  /** Plugin version - override in subclass if needed */
+  version = "1.0.0";
+  /** CSS styles to inject into the grid's shadow DOM */
+  styles;
+  /** Custom cell renderers keyed by type name */
+  cellRenderers;
+  /** Custom header renderers keyed by type name */
+  headerRenderers;
+  /** Custom cell editors keyed by type name */
+  cellEditors;
+  /** The grid instance this plugin is attached to */
+  grid;
+  /** Plugin configuration - merged with defaults in attach() */
+  config;
+  /** User-provided configuration from constructor */
+  userConfig;
+  /**
+   * Default configuration - subclasses should override this getter.
+   * Note: This must be a getter (not property initializer) for proper inheritance
+   * since property initializers run after parent constructor.
+   */
+  get defaultConfig() {
+    return {};
+  }
+  constructor(e = {}) {
+    this.userConfig = e;
+  }
+  /**
+   * Called when the plugin is attached to a grid.
+   * Override to set up event listeners, initialize state, etc.
+   */
+  attach(e) {
+    this.grid = e, this.config = { ...this.defaultConfig, ...this.userConfig };
+  }
+  /**
+   * Called when the plugin is detached from a grid.
+   * Override to clean up event listeners, timers, etc.
+   */
+  detach() {
+  }
+  /**
+   * Get another plugin instance from the same grid.
+   * Use for inter-plugin communication.
+   */
+  getPlugin(e) {
+    return this.grid?.getPlugin(e);
+  }
+  /**
+   * Emit a custom event from the grid.
+   */
+  emit(e, t) {
+    this.grid?.dispatchEvent?.(new CustomEvent(e, { detail: t, bubbles: !0 }));
+  }
+  /**
+   * Request a re-render of the grid.
+   */
+  requestRender() {
+    this.grid?.requestRender?.();
+  }
+  /**
+   * Request a lightweight style update without rebuilding DOM.
+   * Use this instead of requestRender() when only CSS classes need updating.
+   */
+  requestAfterRender() {
+    this.grid?.requestAfterRender?.();
+  }
+  /**
+   * Get the current rows from the grid.
+   */
+  get rows() {
+    return this.grid?.rows ?? [];
+  }
+  /**
+   * Get the original unfiltered/unprocessed rows from the grid.
+   * Use this when you need all source data regardless of active filters.
+   */
+  get sourceRows() {
+    return this.grid?.sourceRows ?? [];
+  }
+  /**
+   * Get the current columns from the grid.
+   */
+  get columns() {
+    return this.grid?.columns ?? [];
+  }
+  /**
+   * Get only visible columns from the grid (excludes hidden).
+   * Use this for rendering that needs to match the grid template.
+   */
+  get visibleColumns() {
+    return this.grid?.visibleColumns ?? [];
+  }
+  /**
+   * Get the shadow root of the grid.
+   */
+  get shadowRoot() {
+    return this.grid?.shadowRoot ?? null;
+  }
+  /**
+   * Log a warning message.
+   */
+  warn(e) {
+    console.warn(`[tbw-grid:${this.name}] ${e}`);
+  }
+}
+function z(o) {
+  return {
+    startRow: Math.min(o.startRow, o.endRow),
+    startCol: Math.min(o.startCol, o.endCol),
+    endRow: Math.max(o.startRow, o.endRow),
+    endCol: Math.max(o.startCol, o.endCol)
+  };
+}
+function Ze(o) {
+  const e = z(o);
+  return {
+    from: { row: e.startRow, col: e.startCol },
+    to: { row: e.endRow, col: e.endCol }
+  };
+}
+function K(o) {
+  return o.map(Ze);
+}
+function Je(o, e, t) {
+  const n = z(t);
+  return o >= n.startRow && o <= n.endRow && e >= n.startCol && e <= n.endCol;
+}
+function ie(o, e, t) {
+  return t.some((n) => Je(o, e, n));
+}
+function Qe(o) {
+  const e = [], t = z(o);
+  for (let n = t.startRow; n <= t.endRow; n++)
+    for (let i = t.startCol; i <= t.endCol; i++)
+      e.push({ row: n, col: i });
+  return e;
+}
+function et(o) {
+  const e = /* @__PURE__ */ new Map();
+  for (const t of o)
+    for (const n of Qe(t))
+      e.set(`${n.row},${n.col}`, n);
+  return [...e.values()];
+}
+function se(o, e) {
+  return {
+    startRow: o.row,
+    startCol: o.col,
+    endRow: e.row,
+    endCol: e.col
+  };
+}
+function tt(o, e, t) {
+  if (o === "cell" && e.selectedCell)
+    return {
+      mode: o,
+      ranges: [
+        {
+          from: { row: e.selectedCell.row, col: e.selectedCell.col },
+          to: { row: e.selectedCell.row, col: e.selectedCell.col }
+        }
+      ]
+    };
+  if (o === "row" && e.selected.size > 0) {
+    const n = [...e.selected].map((i) => ({
+      from: { row: i, col: 0 },
+      to: { row: i, col: t - 1 }
+    }));
+    return { mode: o, ranges: n };
+  }
+  return o === "range" && e.ranges.length > 0 ? { mode: o, ranges: K(e.ranges) } : { mode: o, ranges: [] };
+}
+class st extends ue {
+  name = "selection";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      mode: "cell"
+    };
+  }
+  // ===== Internal State =====
+  /** Row selection state (row mode) */
+  selected = /* @__PURE__ */ new Set();
+  lastSelected = null;
+  anchor = null;
+  /** Range selection state (range mode) */
+  ranges = [];
+  activeRange = null;
+  cellAnchor = null;
+  isDragging = !1;
+  /** Cell selection state (cell mode) */
+  selectedCell = null;
+  // ===== Lifecycle =====
+  detach() {
+    this.selected.clear(), this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.isDragging = !1, this.selectedCell = null;
+  }
+  // ===== Event Handlers =====
+  onCellClick(e) {
+    const { rowIndex: t, colIndex: n, originalEvent: i } = e, { mode: s } = this.config;
+    if (s === "cell")
+      return this.selectedCell = { row: t, col: n }, this.emit("selection-change", this.#t()), this.requestAfterRender(), !1;
+    if (s === "row")
+      return this.selected.clear(), this.selected.add(t), this.lastSelected = t, this.emit("selection-change", this.#t()), this.requestAfterRender(), !1;
+    if (s === "range") {
+      const r = i.shiftKey, l = i.ctrlKey || i.metaKey;
+      if (r && this.cellAnchor) {
+        const a = se(this.cellAnchor, { row: t, col: n });
+        l ? this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = a : this.ranges.push(a) : this.ranges = [a], this.activeRange = a;
+      } else if (l) {
+        const a = {
+          startRow: t,
+          startCol: n,
+          endRow: t,
+          endCol: n
+        };
+        this.ranges.push(a), this.activeRange = a, this.cellAnchor = { row: t, col: n };
+      } else {
+        const a = {
+          startRow: t,
+          startCol: n,
+          endRow: t,
+          endCol: n
+        };
+        this.ranges = [a], this.activeRange = a, this.cellAnchor = { row: t, col: n };
+      }
+      return this.emit("selection-change", this.#t()), this.requestAfterRender(), !1;
+    }
+    return !1;
+  }
+  onKeyDown(e) {
+    const { mode: t } = this.config;
+    if (e.key === "Escape")
+      return t === "cell" ? this.selectedCell = null : t === "row" ? (this.selected.clear(), this.anchor = null) : t === "range" && (this.ranges = [], this.activeRange = null, this.cellAnchor = null), this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
+    if (t === "range" && e.key === "a" && (e.ctrlKey || e.metaKey)) {
+      const n = this.rows.length, i = this.columns.length;
+      if (n > 0 && i > 0) {
+        const s = {
+          startRow: 0,
+          startCol: 0,
+          endRow: n - 1,
+          endCol: i - 1
+        };
+        return this.ranges = [s], this.activeRange = s, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
+      }
+    }
+    return !1;
+  }
+  onCellMouseDown(e) {
+    if (this.config.mode !== "range" || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0 || e.originalEvent.shiftKey && this.cellAnchor)
+      return;
+    this.isDragging = !0;
+    const t = e.rowIndex, n = e.colIndex;
+    this.cellAnchor = { row: t, col: n }, e.originalEvent.ctrlKey || e.originalEvent.metaKey || (this.ranges = []);
+    const s = {
+      startRow: t,
+      startCol: n,
+      endRow: t,
+      endCol: n
+    };
+    return this.ranges.push(s), this.activeRange = s, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
+  }
+  onCellMouseMove(e) {
+    if (this.config.mode !== "range" || !this.isDragging || !this.cellAnchor || e.rowIndex === void 0 || e.colIndex === void 0 || e.rowIndex < 0) return;
+    const t = se(this.cellAnchor, { row: e.rowIndex, col: e.colIndex });
+    return this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] = t : this.ranges.push(t), this.activeRange = t, this.emit("selection-change", this.#t()), this.requestAfterRender(), !0;
+  }
+  onCellMouseUp(e) {
+    if (this.config.mode === "range" && this.isDragging)
+      return this.isDragging = !1, !0;
+  }
+  afterRender() {
+    const e = this.shadowRoot;
+    if (!e) return;
+    const t = e.children[0], { mode: n } = this.config;
+    this.grid.setAttribute("data-selection-mode", n), t && t.classList.toggle("selecting", this.isDragging), e.querySelectorAll(".cell").forEach((r) => {
+      r.classList.remove("selected", "top", "bottom", "first", "last");
+    });
+    const s = e.querySelectorAll(".data-grid-row");
+    if (s.forEach((r) => {
+      r.classList.remove("selected");
+    }), n === "row" && (s.forEach((r) => r.classList.remove("row-focus")), s.forEach((r) => {
+      const l = r.querySelector(".cell[data-row]"), a = parseInt(l?.getAttribute("data-row") ?? "-1", 10);
+      a >= 0 && this.selected.has(a) && r.classList.add("selected", "row-focus");
+    })), n === "range" && this.ranges.length > 0) {
+      const r = this.activeRange ? z(this.activeRange) : null;
+      e.querySelectorAll(".cell[data-row][data-col]").forEach((a) => {
+        const h = parseInt(a.getAttribute("data-row") ?? "-1", 10), u = parseInt(a.getAttribute("data-col") ?? "-1", 10);
+        h >= 0 && u >= 0 && ie(h, u, this.ranges) && (a.classList.add("selected"), r && (h === r.startRow && a.classList.add("top"), h === r.endRow && a.classList.add("bottom"), u === r.startCol && a.classList.add("first"), u === r.endCol && a.classList.add("last")));
+      });
+    }
+  }
+  // ===== Public API =====
+  /**
+   * Get the selected cell (cell mode only).
+   */
+  getSelectedCell() {
+    return this.selectedCell;
+  }
+  /**
+   * Get all selected row indices (row mode).
+   */
+  getSelectedRows() {
+    return [...this.selected];
+  }
+  /**
+   * Get all selected cell ranges in public format.
+   */
+  getRanges() {
+    return K(this.ranges);
+  }
+  /**
+   * Get all selected cells across all ranges.
+   */
+  getSelectedCells() {
+    return et(this.ranges);
+  }
+  /**
+   * Check if a specific cell is in range selection.
+   */
+  isCellSelected(e, t) {
+    return ie(e, t, this.ranges);
+  }
+  /**
+   * Clear all selection.
+   */
+  clearSelection() {
+    this.selectedCell = null, this.selected.clear(), this.anchor = null, this.ranges = [], this.activeRange = null, this.cellAnchor = null, this.emit("selection-change", { mode: this.config.mode, ranges: [] }), this.requestAfterRender();
+  }
+  /**
+   * Set selected ranges programmatically.
+   */
+  setRanges(e) {
+    this.ranges = e.map((t) => ({
+      startRow: t.from.row,
+      startCol: t.from.col,
+      endRow: t.to.row,
+      endCol: t.to.col
+    })), this.activeRange = this.ranges.length > 0 ? this.ranges[this.ranges.length - 1] : null, this.emit("selection-change", {
+      mode: this.config.mode,
+      ranges: K(this.ranges)
+    }), this.requestAfterRender();
+  }
+  // ===== Private Helpers =====
+  #t() {
+    return tt(
+      this.config.mode,
+      {
+        selectedCell: this.selectedCell,
+        selected: this.selected,
+        ranges: this.ranges
+      },
+      this.columns.length
+    );
+  }
+  // ===== Styles =====
+  styles = `
+    /* Prevent text selection during range drag */
+    :host .selecting .data-grid-row > .cell {
+      user-select: none;
+    }
+
+    /* Row selection - use accent color for row focus */
+    :host .data-grid-row.row-focus {
+      background-color: var(--tbw-focus-background, rgba(from var(--tbw-color-accent) r g b / 12%));
+    }
+
+    /* Disable cell-focus outline in row mode - row is the focus unit */
+    :host([data-selection-mode="row"]) .cell-focus {
+      outline: none;
+    }
+
+    /* Selection cell styles - for range mode */
+    :host .data-grid-row > .cell.selected {
+      background-color: var(--tbw-range-selection-bg);
+    }
+    :host .data-grid-row > .cell.selected.top {
+      border-top: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.bottom {
+      border-bottom: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.first {
+      border-left: 2px solid var(--tbw-range-border-color);
+    }
+    :host .data-grid-row > .cell.selected.last {
+      border-right: 2px solid var(--tbw-range-border-color);
+    }
+  `;
+}
+function G(o, e, t) {
+  return o.id !== void 0 ? String(o.id) : t ? `${t}-${e}` : String(e);
+}
+function fe(o, e, t, n = null, i = 0) {
+  const s = e.childrenField ?? "children", r = [];
+  for (let l = 0; l < o.length; l++) {
+    const a = o[l], h = G(a, l, n), u = a[s], w = Array.isArray(u) && u.length > 0, c = t.has(h);
+    if (r.push({
+      key: h,
+      data: a,
+      depth: i,
+      hasChildren: w,
+      isExpanded: c,
+      parentKey: n
+    }), w && c) {
+      const d = fe(u, e, t, h, i + 1);
+      r.push(...d);
+    }
+  }
+  return r;
+}
+function re(o, e) {
+  const t = new Set(o);
+  return t.has(e) ? t.delete(e) : t.add(e), t;
+}
+function W(o, e, t = null, n = 0) {
+  const i = e.childrenField ?? "children", s = /* @__PURE__ */ new Set();
+  for (let r = 0; r < o.length; r++) {
+    const l = o[r], a = G(l, r, t), h = l[i];
+    if (Array.isArray(h) && h.length > 0) {
+      s.add(a);
+      const u = W(h, e, a, n + 1);
+      for (const w of u) s.add(w);
+    }
+  }
+  return s;
+}
+function ot() {
+  return /* @__PURE__ */ new Set();
+}
+function pe(o, e, t, n = null, i = 0) {
+  const s = t.childrenField ?? "children";
+  for (let r = 0; r < o.length; r++) {
+    const l = o[r], a = G(l, r, n);
+    if (a === e)
+      return [a];
+    const h = l[s];
+    if (Array.isArray(h) && h.length > 0) {
+      const u = pe(h, e, t, a, i + 1);
+      if (u)
+        return [a, ...u];
+    }
+  }
+  return null;
+}
+function nt(o, e, t, n) {
+  const i = pe(o, e, t);
+  if (!i) return n;
+  const s = new Set(n);
+  for (let r = 0; r < i.length - 1; r++)
+    s.add(i[r]);
+  return s;
+}
+function le(o, e = "children") {
+  if (!Array.isArray(o) || o.length === 0) return !1;
+  for (const t of o)
+    if (t && Array.isArray(t[e]) && t[e].length > 0)
+      return !0;
+  return !1;
+}
+function it(o) {
+  if (!Array.isArray(o) || o.length === 0) return null;
+  const e = ["children", "items", "nodes", "subRows", "nested"];
+  for (const t of o)
+    if (!(!t || typeof t != "object")) {
+      for (const n of e)
+        if (Array.isArray(t[n]) && t[n].length > 0)
+          return n;
+    }
+  return null;
+}
+class rt extends ue {
+  name = "tree";
+  version = "1.0.0";
+  get defaultConfig() {
+    return {
+      enabled: !0,
+      childrenField: "children",
+      autoDetect: !0,
+      defaultExpanded: !1,
+      indentWidth: 20,
+      showExpandIcons: !0
+    };
+  }
+  // ===== Internal State =====
+  /** Set of expanded row keys */
+  expandedKeys = /* @__PURE__ */ new Set();
+  /** Whether initial expansion (based on defaultExpanded config) has been applied */
+  initialExpansionDone = !1;
+  /** Flattened tree rows for rendering */
+  flattenedRows = [];
+  /** Map from key to flattened row for quick lookup */
+  rowKeyMap = /* @__PURE__ */ new Map();
+  // ===== Lifecycle =====
+  detach() {
+    this.expandedKeys.clear(), this.initialExpansionDone = !1, this.flattenedRows = [], this.rowKeyMap.clear();
+  }
+  // ===== Auto-Detection =====
+  /**
+   * Detects if tree functionality should be enabled based on data structure.
+   * Called by the grid during plugin initialization.
+   */
+  detect(e) {
+    if (!this.config.autoDetect) return !1;
+    const t = this.config.childrenField ?? it(e) ?? "children";
+    return le(e, t);
+  }
+  // ===== Data Processing =====
+  processRows(e) {
+    const t = this.config.childrenField ?? "children";
+    if (!le(e, t))
+      return this.flattenedRows = [], this.rowKeyMap.clear(), [...e];
+    this.config.defaultExpanded && !this.initialExpansionDone && (this.expandedKeys = W(e, this.config), this.initialExpansionDone = !0), this.flattenedRows = fe(e, this.config, this.expandedKeys), this.rowKeyMap.clear();
+    for (const n of this.flattenedRows)
+      this.rowKeyMap.set(n.key, n);
+    return this.flattenedRows.map((n) => ({
+      ...n.data,
+      __treeKey: n.key,
+      __treeDepth: n.depth,
+      __treeHasChildren: n.hasChildren,
+      __treeExpanded: n.isExpanded
+    }));
+  }
+  processColumns(e) {
+    if (this.flattenedRows.length === 0) return [...e];
+    const t = this.config.indentWidth ?? 20, n = this.config.showExpandIcons ?? !0, i = [...e];
+    if (i.length > 0) {
+      const s = { ...i[0] }, r = s.viewRenderer;
+      s.viewRenderer = (l) => {
+        const { value: a, row: h, column: u } = l, w = h.__treeDepth ?? 0, c = h.__treeHasChildren ?? !1, d = h.__treeExpanded ?? !1, p = document.createElement("span");
+        if (p.style.display = "flex", p.style.alignItems = "center", p.style.paddingLeft = `${w * t}px`, c && n) {
+          const b = document.createElement("span");
+          b.className = "tree-toggle", b.textContent = d ? "▼" : "▶", b.style.cursor = "pointer", b.style.marginRight = "4px", b.style.fontSize = "10px", b.setAttribute("data-tree-key", h.__treeKey), p.appendChild(b);
+        } else if (n) {
+          const b = document.createElement("span");
+          b.style.width = "14px", b.style.display = "inline-block", p.appendChild(b);
+        }
+        const f = document.createElement("span");
+        if (r) {
+          const b = r(l);
+          b instanceof Node ? f.appendChild(b) : f.textContent = String(b ?? a ?? "");
+        } else
+          f.textContent = String(a ?? "");
+        return p.appendChild(f), p;
+      }, i[0] = s;
+    }
+    return i;
+  }
+  // ===== Event Handlers =====
+  onCellClick(e) {
+    const t = e.originalEvent?.target;
+    if (!t?.classList.contains("tree-toggle")) return !1;
+    const n = t.getAttribute("data-tree-key");
+    if (!n) return !1;
+    const i = this.rowKeyMap.get(n);
+    return i ? (this.expandedKeys = re(this.expandedKeys, n), this.emit("tree-expand", {
+      key: n,
+      row: i.data,
+      expanded: this.expandedKeys.has(n),
+      depth: i.depth
+    }), this.requestRender(), !0) : !1;
+  }
+  // ===== Public API =====
+  /**
+   * Expand a specific node by key.
+   */
+  expand(e) {
+    this.expandedKeys.add(e), this.requestRender();
+  }
+  /**
+   * Collapse a specific node by key.
+   */
+  collapse(e) {
+    this.expandedKeys.delete(e), this.requestRender();
+  }
+  /**
+   * Toggle the expansion state of a node.
+   */
+  toggle(e) {
+    this.expandedKeys = re(this.expandedKeys, e), this.requestRender();
+  }
+  /**
+   * Expand all nodes in the tree.
+   */
+  expandAll() {
+    this.expandedKeys = W(this.rows, this.config), this.requestRender();
+  }
+  /**
+   * Collapse all nodes in the tree.
+   */
+  collapseAll() {
+    this.expandedKeys = ot(), this.requestRender();
+  }
+  /**
+   * Check if a node is currently expanded.
+   */
+  isExpanded(e) {
+    return this.expandedKeys.has(e);
+  }
+  /**
+   * Get all currently expanded keys.
+   */
+  getExpandedKeys() {
+    return [...this.expandedKeys];
+  }
+  /**
+   * Get the flattened tree rows with metadata.
+   */
+  getFlattenedRows() {
+    return [...this.flattenedRows];
+  }
+  /**
+   * Get a row's original data by its key.
+   */
+  getRowByKey(e) {
+    return this.rowKeyMap.get(e)?.data;
+  }
+  /**
+   * Expand all ancestors of a node to make it visible.
+   */
+  expandToKey(e) {
+    this.expandedKeys = nt(this.rows, e, this.config, this.expandedKeys), this.requestRender();
+  }
+  // ===== Styles =====
+  styles = `
+    .tree-toggle {
+      cursor: pointer;
+      user-select: none;
+      transition: transform 0.2s;
+    }
+    .tree-toggle:hover {
+      color: var(--tbw-tree-accent, var(--tbw-color-accent));
+    }
+  `;
+}
+const v = {
+  // Root structure
+  ROOT: "tbw-grid-root",
+  HEADER: "header",
+  HEADER_ROW: "header-row",
+  HEADER_CELL: "header-cell",
+  // Body structure
+  ROWS_VIEWPORT: "rows-viewport",
+  ROWS_SPACER: "rows-spacer",
+  ROWS_CONTAINER: "rows",
+  // Row elements
+  DATA_ROW: "data-row",
+  GROUP_ROW: "group-row",
+  // Cell elements
+  DATA_CELL: "data-cell",
+  // States
+  SELECTED: "selected",
+  FOCUSED: "focused",
+  EDITING: "editing",
+  EXPANDED: "expanded",
+  COLLAPSED: "collapsed",
+  DRAGGING: "dragging",
+  RESIZING: "resizing",
+  // Sorting
+  SORTABLE: "sortable",
+  SORTED_ASC: "sorted-asc",
+  SORTED_DESC: "sorted-desc",
+  // Visibility
+  HIDDEN: "hidden",
+  // Sticky/pinned
+  STICKY_LEFT: "sticky-left",
+  STICKY_RIGHT: "sticky-right",
+  // Special rows
+  PINNED_TOP: "pinned-top",
+  PINNED_BOTTOM: "pinned-bottom",
+  // Tree
+  TREE_TOGGLE: "tree-toggle",
+  TREE_INDENT: "tree-indent",
+  // Grouping
+  GROUP_TOGGLE: "group-toggle",
+  GROUP_LABEL: "group-label",
+  GROUP_COUNT: "group-count",
+  // Selection
+  RANGE_SELECTION: "range-selection",
+  SELECTION_OVERLAY: "selection-overlay"
+}, H = {
+  ROW_INDEX: "data-row-index",
+  COL_INDEX: "data-col-index",
+  FIELD: "data-field",
+  GROUP_KEY: "data-group-key",
+  TREE_LEVEL: "data-tree-level",
+  STICKY: "data-sticky"
+}, lt = {
+  ROOT: `.${v.ROOT}`,
+  HEADER: `.${v.HEADER}`,
+  HEADER_ROW: `.${v.HEADER_ROW}`,
+  HEADER_CELL: `.${v.HEADER_CELL}`,
+  ROWS_VIEWPORT: `.${v.ROWS_VIEWPORT}`,
+  ROWS_CONTAINER: `.${v.ROWS_CONTAINER}`,
+  DATA_ROW: `.${v.DATA_ROW}`,
+  DATA_CELL: `.${v.DATA_CELL}`,
+  GROUP_ROW: `.${v.GROUP_ROW}`,
+  // By data attribute
+  ROW_BY_INDEX: (o) => `.${v.DATA_ROW}[${H.ROW_INDEX}="${o}"]`,
+  CELL_BY_FIELD: (o) => `.${v.DATA_CELL}[${H.FIELD}="${o}"]`,
+  CELL_AT: (o, e) => `.${v.DATA_ROW}[${H.ROW_INDEX}="${o}"] .${v.DATA_CELL}[${H.COL_INDEX}="${e}"]`,
+  // State selectors
+  SELECTED_ROWS: `.${v.DATA_ROW}.${v.SELECTED}`,
+  EDITING_CELL: `.${v.DATA_CELL}.${v.EDITING}`
+}, at = {
+  // Colors
+  COLOR_BG: "--tbw-color-bg",
+  COLOR_FG: "--tbw-color-fg",
+  COLOR_FG_MUTED: "--tbw-color-fg-muted",
+  COLOR_BORDER: "--tbw-color-border",
+  COLOR_ACCENT: "--tbw-color-accent",
+  COLOR_HEADER_BG: "--tbw-color-header-bg",
+  COLOR_HEADER_FG: "--tbw-color-header-fg",
+  COLOR_SELECTION: "--tbw-color-selection",
+  COLOR_ROW_HOVER: "--tbw-color-row-hover",
+  COLOR_ROW_ALT: "--tbw-color-row-alt",
+  // Sizing
+  ROW_HEIGHT: "--tbw-row-height",
+  HEADER_HEIGHT: "--tbw-header-height",
+  CELL_PADDING: "--tbw-cell-padding",
+  // Typography
+  FONT_FAMILY: "--tbw-font-family",
+  FONT_SIZE: "--tbw-font-size",
+  // Borders
+  BORDER_RADIUS: "--tbw-border-radius",
+  FOCUS_OUTLINE: "--tbw-focus-outline"
+}, ct = {
+  CELL_COMMIT: "cell-commit",
+  ROW_COMMIT: "row-commit",
+  CHANGED_ROWS_RESET: "changed-rows-reset",
+  MOUNT_EXTERNAL_VIEW: "mount-external-view",
+  MOUNT_EXTERNAL_EDITOR: "mount-external-editor",
+  SORT_CHANGE: "sort-change",
+  COLUMN_RESIZE: "column-resize",
+  ACTIVATE_CELL: "activate-cell",
+  GROUP_TOGGLE: "group-toggle",
+  COLUMN_STATE_CHANGE: "column-state-change"
+}, dt = {
+  // Selection plugin
+  SELECTION_CHANGE: "selection-change",
+  // Tree plugin
+  TREE_EXPAND: "tree-expand",
+  // Filtering plugin
+  FILTER_CHANGE: "filter-change",
+  // Sorting plugin
+  SORT_MODEL_CHANGE: "sort-model-change",
+  // Export plugin
+  EXPORT_START: "export-start",
+  EXPORT_COMPLETE: "export-complete",
+  // Clipboard plugin
+  CLIPBOARD_COPY: "clipboard-copy",
+  CLIPBOARD_PASTE: "clipboard-paste",
+  // Context menu plugin
+  CONTEXT_MENU_OPEN: "context-menu-open",
+  CONTEXT_MENU_CLOSE: "context-menu-close",
+  // Undo/Redo plugin
+  HISTORY_CHANGE: "history-change",
+  // Server-side plugin
+  SERVER_LOADING: "server-loading",
+  SERVER_ERROR: "server-error",
+  // Visibility plugin
+  COLUMN_VISIBILITY_CHANGE: "column-visibility-change",
+  // Reorder plugin
+  COLUMN_REORDER: "column-reorder",
+  // Master-detail plugin
+  DETAIL_EXPAND: "detail-expand",
+  // Grouping rows plugin
+  GROUP_EXPAND: "group-expand"
+}, I = {
+  sum: (o, e) => o.reduce((t, n) => t + (Number(n[e]) || 0), 0),
+  avg: (o, e) => {
+    const t = o.reduce((n, i) => n + (Number(i[e]) || 0), 0);
+    return o.length ? t / o.length : 0;
+  },
+  count: (o) => o.length,
+  min: (o, e) => Math.min(...o.map((t) => Number(t[e]) || 1 / 0)),
+  max: (o, e) => Math.max(...o.map((t) => Number(t[e]) || -1 / 0)),
+  first: (o, e) => o[0]?.[e],
+  last: (o, e) => o[o.length - 1]?.[e]
+}, P = /* @__PURE__ */ new Map(), R = {
+  /**
+   * Register a custom aggregator function.
+   */
+  register(o, e) {
+    P.set(o, e);
+  },
+  /**
+   * Unregister a custom aggregator function.
+   */
+  unregister(o) {
+    P.delete(o);
+  },
+  /**
+   * Get an aggregator function by reference.
+   */
+  get(o) {
+    if (o !== void 0)
+      return typeof o == "function" ? o : P.get(o) ?? I[o];
+  },
+  /**
+   * Run an aggregator on a set of rows.
+   */
+  run(o, e, t, n) {
+    const i = this.get(o);
+    return i ? i(e, t, n) : void 0;
+  },
+  /**
+   * Check if an aggregator exists.
+   */
+  has(o) {
+    return P.has(o) || o in I;
+  },
+  /**
+   * List all available aggregator names.
+   */
+  list() {
+    return [...Object.keys(I), ...P.keys()];
+  }
+}, ht = R.register.bind(R), ut = R.unregister.bind(R), ft = R.get.bind(R), pt = R.run.bind(R), wt = R.list.bind(R);
+export {
+  ue as BaseGridPlugin,
+  ct as DGEvents,
+  q as DataGridElement,
+  O as FitModeEnum,
+  at as GridCSSVars,
+  v as GridClasses,
+  H as GridDataAttrs,
+  q as GridElement,
+  lt as GridSelectors,
+  dt as PluginEvents,
+  Ye as PluginManager,
+  st as SelectionPlugin,
+  rt as TreePlugin,
+  R as aggregatorRegistry,
+  ft as getAggregator,
+  wt as listAggregators,
+  ht as registerAggregator,
+  pt as runAggregator,
+  ut as unregisterAggregator
+};
+//# sourceMappingURL=index.js.map