@kong-ui-public/dashboard-renderer 8.12.23 → 8.12.25

package/dist/{index-kRIAUZSu.js → index-DaM2QumG.js}

@@ -1,10 +1,10 @@
-var Ii = Object.defineProperty;
+var qi = Object.defineProperty;
 var Lt = (o) => {
   throw TypeError(o);
 };
-var qi = (o, e, t) => e in o ? Ii(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var At = (o, e, t) => qi(o, typeof e != "symbol" ? e + "" : e, t), ht = (o, e, t) => e.has(o) || Lt("Cannot " + t);
-var _ = (o, e, t) => (ht(o, e, "read from private field"), t ? t.call(o) : e.get(o)), U = (o, e, t) => e.has(o) ? Lt("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), $ = (o, e, t, i) => (ht(o, e, "write to private field"), i ? i.call(o, t) : e.set(o, t), t), K = (o, e, t) => (ht(o, e, "access private method"), t);
+var Mi = (o, e, t) => e in o ? qi(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var At = (o, e, t) => Mi(o, typeof e != "symbol" ? e + "" : e, t), dt = (o, e, t) => e.has(o) || Lt("Cannot " + t);
+var _ = (o, e, t) => (dt(o, e, "read from private field"), t ? t.call(o) : e.get(o)), U = (o, e, t) => e.has(o) ? Lt("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), $ = (o, e, t, i) => (dt(o, e, "write to private field"), i ? i.call(o, t) : e.set(o, t), t), Q = (o, e, t) => (dt(o, e, "access private method"), t);
 var Le = (o, e, t, i) => ({
   set _(s) {
     $(o, e, s, t);
@@ -13,24 +13,24 @@ var Le = (o, e, t, i) => ({
     return _(o, e, i);
   }
 });
-import { ref as H, watchEffect as Jt, inject as ge, provide as Mi, toRaw as Pi, computed as w, isRef as $i, isReactive as Bi, toRef as Ae, hasInjectionContext as Ot, onMounted as st, watch as Oe, onUnmounted as Fe, getCurrentInstance as Fi, defineComponent as ee, resolveComponent as ue, unref as E, openBlock as C, createBlock as O, createSlots as rt, withCtx as M, createElementVNode as te, toDisplayString as J, renderSlot as He, createCommentVNode as X, normalizeStyle as Ye, normalizeClass as ze, createVNode as fe, mergeProps as ei, createTextVNode as gt, createElementBlock as B, normalizeProps as Gi, guardReactiveProps as Ui, defineAsyncComponent as ti, Fragment as mt, useCssVars as pt, useModel as ii, readonly as Ht, nextTick as yt, resolveDynamicComponent as si, toHandlers as Wi, mergeModels as je, renderList as ri, useTemplateRef as It } from "vue";
-import { msToGranularity as dt, TimePeriods as Ki, TIMEFRAME_LOOKUP as Qi, formatTime as qt, EXPORT_RECORD_LIMIT as Vi } from "@kong-ui-public/analytics-utilities";
-import { handleQueryError as Yi, SimpleChart as ji, AnalyticsChart as Xi, TopNTable as Zi, CsvExportModal as Ji } from "@kong-ui-public/analytics-chart";
-import es from "swrv";
+import { ref as A, watchEffect as Jt, inject as me, provide as Pi, toRaw as $i, computed as w, isRef as Bi, isReactive as Fi, toRef as Ae, hasInjectionContext as Ot, onMounted as nt, watch as Oe, onUnmounted as Ge, getCurrentInstance as Gi, defineComponent as ee, resolveComponent as he, unref as C, openBlock as x, createBlock as O, createSlots as ot, withCtx as M, createElementVNode as se, toDisplayString as J, renderSlot as He, createCommentVNode as X, normalizeStyle as Xe, normalizeClass as ze, createVNode as ge, mergeProps as ei, createTextVNode as mt, createElementBlock as B, normalizeProps as Ui, guardReactiveProps as Wi, defineAsyncComponent as ti, Fragment as pt, useCssVars as yt, useModel as ii, readonly as Ht, nextTick as vt, resolveDynamicComponent as si, toHandlers as Ki, mergeModels as Ze, renderList as ri, useTemplateRef as It } from "vue";
+import { msToGranularity as ct, TimePeriods as Qi, TIMEFRAME_LOOKUP as Vi, formatTime as qt, EXPORT_RECORD_LIMIT as Yi } from "@kong-ui-public/analytics-utilities";
+import { handleQueryError as ji, SimpleChart as Xi, AnalyticsChart as Zi, TopNTable as Ji, CsvExportModal as es } from "@kong-ui-public/analytics-chart";
+import ts from "swrv";
 import "axios";
-import { createI18n as ts, i18nTComponent as is } from "@kong-ui-public/i18n";
-import { useAnalyticsConfigStore as vt, useDatasourceConfigStore as nt } from "@kong-ui-public/analytics-config-store";
-import { VisibilityOffIcon as ss, WarningOutlineIcon as rs, WarningIcon as ns, ProgressIcon as os, RefreshIcon as as, EditIcon as ls, MoreIcon as us } from "@kong/icons";
-import { MetricsProvider as hs, MetricsConsumer as ds } from "@kong-ui-public/analytics-metric-provider";
-import { TableDataGrid as cs } from "@kong-ui-public/table-data-grid";
+import { createI18n as is, i18nTComponent as ss } from "@kong-ui-public/i18n";
+import { useAnalyticsConfigStore as _t, useDatasourceConfigStore as Ue } from "@kong-ui-public/analytics-config-store";
+import { VisibilityOffIcon as rs, WarningOutlineIcon as ns, WarningIcon as os, ProgressIcon as as, RefreshIcon as ls, EditIcon as us, MoreIcon as hs } from "@kong/icons";
+import { MetricsProvider as ds, MetricsConsumer as cs } from "@kong-ui-public/analytics-metric-provider";
+import { TableDataGrid as fs } from "@kong-ui-public/table-data-grid";
 var ni = /* @__PURE__ */ ((o) => (o.VALIDATING = "VALIDATING", o.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", o.PENDING = "PENDING", o.SUCCESS = "SUCCESS", o.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", o.ERROR = "ERROR", o.STALE_IF_ERROR = "STALE_IF_ERROR", o))(ni || {});
-const fs = (o) => {
+const gs = (o) => {
   var e, t, i, s, r;
   return o ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(o)) != null && e.length || (t = o.data) != null && t.length || (s = (i = o.data) == null ? void 0 : i.data) != null && s.length || !((r = o.data) != null && r.data) && typeof o.data == "object" && Object.keys(o == null ? void 0 : o.data).length) : !1;
 };
-function gs(o = H({}), e, t, i = fs) {
-  const s = H(
+function ms(o = A({}), e, t, i = gs) {
+  const s = A(
     "PENDING"
     /* PENDING */
   );
@@ -66,7 +66,7 @@ function gs(o = H({}), e, t, i = fs) {
     swrvState: ni
   };
 }
-const ms = {
+const ps = {
   not_configured: {
     title: "Chart is not fully configured",
     description: "Begin by choosing at least one metric"
@@ -85,10 +85,10 @@ const ms = {
   remove: "Remove",
   delete: "Delete",
   as_of_today: "As of today"
-}, ps = {
+}, ys = {
   defaultFilename: "Chart export",
   exportAsCsv: "Export as CSV"
-}, ys = {
+}, vs = {
   control_plane: "Control plane",
   data_plane_node_version: "Data plane node version",
   env: "Environment",
@@ -103,7 +103,7 @@ const ms = {
   status_code: "Status code",
   team: "Team",
   name: "Name"
-}, vs = "Explore", _s = "View requests", bs = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", ws = {
+}, _s = "Explore", bs = "View requests", ws = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", Es = {
   daily: "1 day",
   fiveMinutely: "5 minutes",
   hourly: "1 hour",
@@ -116,31 +116,31 @@ const ms = {
   twoHourly: "2 hours",
   weekly: "1 week",
   unknown: "Unknown"
-}, Es = {
-  renderer: ms,
-  csvExport: ps,
-  chartLabels: ys,
-  jumpToExplore: vs,
-  jumpToRequests: _s,
-  query_aged_out_warning: bs,
-  granularities: ws
+}, xs = {
+  renderer: ps,
+  csvExport: ys,
+  chartLabels: vs,
+  jumpToExplore: _s,
+  jumpToRequests: bs,
+  query_aged_out_warning: ws,
+  granularities: Es
 };
-function xs() {
-  const o = ts("en-us", Es);
+function Cs() {
+  const o = is("en-us", xs);
   return {
     i18n: o,
-    i18nT: is(o)
+    i18nT: ss(o)
     // Translation component <i18n-t>
   };
 }
-const Ge = 170, _t = 6, ye = "analytics-query-provider", Mt = "{entity-id}", Cs = "{cp-id}", Rs = "{timeframe}", ks = 30 * 1e3, Ts = 3e5, Ss = 36e5;
-function Ds() {
-  const o = ge(ye);
+const We = 170, bt = 6, _e = "analytics-query-provider", Mt = "{entity-id}", Rs = "{cp-id}", ks = "{timeframe}", Ts = 30 * 1e3, Ss = 3e5, Ds = 36e5;
+function zs() {
+  const o = me(_e);
   return {
     evaluateFeatureFlag: (t, i) => o ? o.evaluateFeatureFlagFn(t, i) : i
   };
 }
-function zs(o) {
+function Ns(o) {
   return o && o.__esModule && Object.prototype.hasOwnProperty.call(o, "default") ? o.default : o;
 }
 var oi = { exports: {} };
@@ -149,122 +149,122 @@ var oi = { exports: {} };
   function i() {
   }
   Object.create && (i.prototype = /* @__PURE__ */ Object.create(null), new i().__proto__ || (t = !1));
-  function s(d, l, h) {
-    this.fn = d, this.context = l, this.once = h || !1;
+  function s(d, u, h) {
+    this.fn = d, this.context = u, this.once = h || !1;
   }
-  function r(d, l, h, u, f) {
+  function r(d, u, h, l, f) {
     if (typeof h != "function")
       throw new TypeError("The listener must be a function");
-    var m = new s(h, u || d, f), p = t ? t + l : l;
-    return d._events[p] ? d._events[p].fn ? d._events[p] = [d._events[p], m] : d._events[p].push(m) : (d._events[p] = m, d._eventsCount++), d;
+    var g = new s(h, l || d, f), p = t ? t + u : u;
+    return d._events[p] ? d._events[p].fn ? d._events[p] = [d._events[p], g] : d._events[p].push(g) : (d._events[p] = g, d._eventsCount++), d;
   }
-  function a(d, l) {
-    --d._eventsCount === 0 ? d._events = new i() : delete d._events[l];
+  function a(d, u) {
+    --d._eventsCount === 0 ? d._events = new i() : delete d._events[u];
   }
   function n() {
     this._events = new i(), this._eventsCount = 0;
   }
   n.prototype.eventNames = function() {
-    var l = [], h, u;
-    if (this._eventsCount === 0) return l;
-    for (u in h = this._events)
-      e.call(h, u) && l.push(t ? u.slice(1) : u);
-    return Object.getOwnPropertySymbols ? l.concat(Object.getOwnPropertySymbols(h)) : l;
-  }, n.prototype.listeners = function(l) {
-    var h = t ? t + l : l, u = this._events[h];
-    if (!u) return [];
-    if (u.fn) return [u.fn];
-    for (var f = 0, m = u.length, p = new Array(m); f < m; f++)
-      p[f] = u[f].fn;
+    var u = [], h, l;
+    if (this._eventsCount === 0) return u;
+    for (l in h = this._events)
+      e.call(h, l) && u.push(t ? l.slice(1) : l);
+    return Object.getOwnPropertySymbols ? u.concat(Object.getOwnPropertySymbols(h)) : u;
+  }, n.prototype.listeners = function(u) {
+    var h = t ? t + u : u, l = this._events[h];
+    if (!l) return [];
+    if (l.fn) return [l.fn];
+    for (var f = 0, g = l.length, p = new Array(g); f < g; f++)
+      p[f] = l[f].fn;
     return p;
-  }, n.prototype.listenerCount = function(l) {
-    var h = t ? t + l : l, u = this._events[h];
-    return u ? u.fn ? 1 : u.length : 0;
-  }, n.prototype.emit = function(l, h, u, f, m, p) {
-    var y = t ? t + l : l;
+  }, n.prototype.listenerCount = function(u) {
+    var h = t ? t + u : u, l = this._events[h];
+    return l ? l.fn ? 1 : l.length : 0;
+  }, n.prototype.emit = function(u, h, l, f, g, p) {
+    var y = t ? t + u : u;
     if (!this._events[y]) return !1;
-    var g = this._events[y], k = arguments.length, z, v;
-    if (g.fn) {
-      switch (g.once && this.removeListener(l, g.fn, void 0, !0), k) {
+    var m = this._events[y], T = arguments.length, R, v;
+    if (m.fn) {
+      switch (m.once && this.removeListener(u, m.fn, void 0, !0), T) {
         case 1:
-          return g.fn.call(g.context), !0;
+          return m.fn.call(m.context), !0;
         case 2:
-          return g.fn.call(g.context, h), !0;
+          return m.fn.call(m.context, h), !0;
         case 3:
-          return g.fn.call(g.context, h, u), !0;
+          return m.fn.call(m.context, h, l), !0;
         case 4:
-          return g.fn.call(g.context, h, u, f), !0;
+          return m.fn.call(m.context, h, l, f), !0;
         case 5:
-          return g.fn.call(g.context, h, u, f, m), !0;
+          return m.fn.call(m.context, h, l, f, g), !0;
         case 6:
-          return g.fn.call(g.context, h, u, f, m, p), !0;
+          return m.fn.call(m.context, h, l, f, g, p), !0;
       }
-      for (v = 1, z = new Array(k - 1); v < k; v++)
-        z[v - 1] = arguments[v];
-      g.fn.apply(g.context, z);
+      for (v = 1, R = new Array(T - 1); v < T; v++)
+        R[v - 1] = arguments[v];
+      m.fn.apply(m.context, R);
     } else {
-      var q = g.length, A;
-      for (v = 0; v < q; v++)
-        switch (g[v].once && this.removeListener(l, g[v].fn, void 0, !0), k) {
+      var I = m.length, q;
+      for (v = 0; v < I; v++)
+        switch (m[v].once && this.removeListener(u, m[v].fn, void 0, !0), T) {
           case 1:
-            g[v].fn.call(g[v].context);
+            m[v].fn.call(m[v].context);
             break;
           case 2:
-            g[v].fn.call(g[v].context, h);
+            m[v].fn.call(m[v].context, h);
             break;
           case 3:
-            g[v].fn.call(g[v].context, h, u);
+            m[v].fn.call(m[v].context, h, l);
             break;
           case 4:
-            g[v].fn.call(g[v].context, h, u, f);
+            m[v].fn.call(m[v].context, h, l, f);
             break;
           default:
-            if (!z) for (A = 1, z = new Array(k - 1); A < k; A++)
-              z[A - 1] = arguments[A];
-            g[v].fn.apply(g[v].context, z);
+            if (!R) for (q = 1, R = new Array(T - 1); q < T; q++)
+              R[q - 1] = arguments[q];
+            m[v].fn.apply(m[v].context, R);
         }
     }
     return !0;
-  }, n.prototype.on = function(l, h, u) {
-    return r(this, l, h, u, !1);
-  }, n.prototype.once = function(l, h, u) {
-    return r(this, l, h, u, !0);
-  }, n.prototype.removeListener = function(l, h, u, f) {
-    var m = t ? t + l : l;
-    if (!this._events[m]) return this;
+  }, n.prototype.on = function(u, h, l) {
+    return r(this, u, h, l, !1);
+  }, n.prototype.once = function(u, h, l) {
+    return r(this, u, h, l, !0);
+  }, n.prototype.removeListener = function(u, h, l, f) {
+    var g = t ? t + u : u;
+    if (!this._events[g]) return this;
     if (!h)
-      return a(this, m), this;
-    var p = this._events[m];
+      return a(this, g), this;
+    var p = this._events[g];
     if (p.fn)
-      p.fn === h && (!f || p.once) && (!u || p.context === u) && a(this, m);
+      p.fn === h && (!f || p.once) && (!l || p.context === l) && a(this, g);
     else {
-      for (var y = 0, g = [], k = p.length; y < k; y++)
-        (p[y].fn !== h || f && !p[y].once || u && p[y].context !== u) && g.push(p[y]);
-      g.length ? this._events[m] = g.length === 1 ? g[0] : g : a(this, m);
+      for (var y = 0, m = [], T = p.length; y < T; y++)
+        (p[y].fn !== h || f && !p[y].once || l && p[y].context !== l) && m.push(p[y]);
+      m.length ? this._events[g] = m.length === 1 ? m[0] : m : a(this, g);
     }
     return this;
-  }, n.prototype.removeAllListeners = function(l) {
+  }, n.prototype.removeAllListeners = function(u) {
     var h;
-    return l ? (h = t ? t + l : l, this._events[h] && a(this, h)) : (this._events = new i(), this._eventsCount = 0), this;
+    return u ? (h = t ? t + u : u, this._events[h] && a(this, h)) : (this._events = new i(), this._eventsCount = 0), this;
   }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = t, n.EventEmitter = n, o.exports = n;
 })(oi);
-var Ns = oi.exports;
-const Ls = /* @__PURE__ */ zs(Ns);
+var Ls = oi.exports;
+const As = /* @__PURE__ */ Ns(Ls);
 class ai extends Error {
   constructor(e) {
     super(e), this.name = "TimeoutError";
   }
 }
-class As extends Error {
+class Os extends Error {
   constructor(e) {
     super(), this.name = "AbortError", this.message = e;
   }
 }
-const Pt = (o) => globalThis.DOMException === void 0 ? new As(o) : new DOMException(o), $t = (o) => {
+const Pt = (o) => globalThis.DOMException === void 0 ? new Os(o) : new DOMException(o), $t = (o) => {
   const e = o.reason === void 0 ? Pt("This operation was aborted.") : o.reason;
   return e instanceof Error ? e : Pt(e);
 };
-function Os(o, e) {
+function Hs(o, e) {
   const {
     milliseconds: t,
     fallback: i,
@@ -272,17 +272,17 @@ function Os(o, e) {
     customTimers: r = { setTimeout, clearTimeout }
   } = e;
   let a, n;
-  const l = new Promise((h, u) => {
+  const u = new Promise((h, l) => {
     if (typeof t != "number" || Math.sign(t) !== 1)
       throw new TypeError(`Expected \`milliseconds\` to be a positive number, got \`${t}\``);
     if (e.signal) {
-      const { signal: m } = e;
-      m.aborted && u($t(m)), n = () => {
-        u($t(m));
-      }, m.addEventListener("abort", n, { once: !0 });
+      const { signal: g } = e;
+      g.aborted && l($t(g)), n = () => {
+        l($t(g));
+      }, g.addEventListener("abort", n, { once: !0 });
     }
     if (t === Number.POSITIVE_INFINITY) {
-      o.then(h, u);
+      o.then(h, l);
       return;
     }
     const f = new ai();
@@ -290,27 +290,27 @@ function Os(o, e) {
       if (i) {
         try {
           h(i());
-        } catch (m) {
-          u(m);
+        } catch (g) {
+          l(g);
         }
         return;
       }
-      typeof o.cancel == "function" && o.cancel(), s === !1 ? h() : s instanceof Error ? u(s) : (f.message = s ?? `Promise timed out after ${t} milliseconds`, u(f));
+      typeof o.cancel == "function" && o.cancel(), s === !1 ? h() : s instanceof Error ? l(s) : (f.message = s ?? `Promise timed out after ${t} milliseconds`, l(f));
     }, t), (async () => {
       try {
         h(await o);
-      } catch (m) {
-        u(m);
+      } catch (g) {
+        l(g);
       }
     })();
   }).finally(() => {
-    l.clear(), n && e.signal && e.signal.removeEventListener("abort", n);
+    u.clear(), n && e.signal && e.signal.removeEventListener("abort", n);
   });
-  return l.clear = () => {
+  return u.clear = () => {
     r.clearTimeout.call(void 0, a), a = void 0;
-  }, l;
+  }, u;
 }
-function Hs(o, e, t) {
+function Is(o, e, t) {
   let i = 0, s = o.length;
   for (; s > 0; ) {
     const r = Math.trunc(s / 2);
@@ -319,10 +319,10 @@ function Hs(o, e, t) {
   }
   return i;
 }
-var se;
-class Is {
+var ne;
+class qs {
   constructor() {
-    U(this, se, []);
+    U(this, ne, []);
   }
   enqueue(e, t) {
     t = {
@@ -334,34 +334,34 @@ class Is {
       id: t.id,
       run: e
     };
-    if (this.size === 0 || _(this, se)[this.size - 1].priority >= t.priority) {
-      _(this, se).push(i);
+    if (this.size === 0 || _(this, ne)[this.size - 1].priority >= t.priority) {
+      _(this, ne).push(i);
       return;
     }
-    const s = Hs(_(this, se), i, (r, a) => a.priority - r.priority);
-    _(this, se).splice(s, 0, i);
+    const s = Is(_(this, ne), i, (r, a) => a.priority - r.priority);
+    _(this, ne).splice(s, 0, i);
   }
   setPriority(e, t) {
-    const i = _(this, se).findIndex((r) => r.id === e);
+    const i = _(this, ne).findIndex((r) => r.id === e);
     if (i === -1)
       throw new ReferenceError(`No promise function with the id "${e}" exists in the queue.`);
-    const [s] = _(this, se).splice(i, 1);
+    const [s] = _(this, ne).splice(i, 1);
     this.enqueue(s.run, { priority: t, id: e });
   }
   dequeue() {
-    const e = _(this, se).shift();
+    const e = _(this, ne).shift();
     return e == null ? void 0 : e.run;
   }
   filter(e) {
-    return _(this, se).filter((t) => t.priority === e.priority).map((t) => t.run);
+    return _(this, ne).filter((t) => t.priority === e.priority).map((t) => t.run);
   }
   get size() {
-    return _(this, se).length;
+    return _(this, ne).length;
   }
 }
-se = new WeakMap();
-var Re, ke, _e, Me, Te, Pe, re, Se, Z, $e, ne, De, pe, Be, it, L, li, ui, hi, di, ci, Ke, ct, ft, Qe, fi, Ve;
-class qs extends Ls {
+ne = new WeakMap();
+var Re, ke, be, Pe, Te, $e, oe, Se, Z, Be, ae, De, ve, Fe, rt, L, li, ui, hi, di, ci, Ve, ft, gt, Ye, fi, je;
+class Ms extends As {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
@@ -369,21 +369,21 @@ class qs extends Ls {
     U(this, L);
     U(this, Re);
     U(this, ke);
-    U(this, _e, 0);
-    U(this, Me);
+    U(this, be, 0);
+    U(this, Pe);
     U(this, Te);
-    U(this, Pe, 0);
-    U(this, re);
+    U(this, $e, 0);
+    U(this, oe);
     U(this, Se);
     U(this, Z);
-    U(this, $e);
-    U(this, ne, 0);
+    U(this, Be);
+    U(this, ae, 0);
     // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
     U(this, De);
-    U(this, pe);
-    U(this, Be);
+    U(this, ve);
+    U(this, Fe);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
-    U(this, it, 1n);
+    U(this, rt, 1n);
     /**
         Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
     
@@ -396,13 +396,13 @@ class qs extends Ls {
       interval: 0,
       concurrency: Number.POSITIVE_INFINITY,
       autoStart: !0,
-      queueClass: Is,
+      queueClass: qs,
       ...t
     }, !(typeof t.intervalCap == "number" && t.intervalCap >= 1))
       throw new TypeError(`Expected \`intervalCap\` to be a number from 1 and up, got \`${((i = t.intervalCap) == null ? void 0 : i.toString()) ?? ""}\` (${typeof t.intervalCap})`);
     if (t.interval === void 0 || !(Number.isFinite(t.interval) && t.interval >= 0))
       throw new TypeError(`Expected \`interval\` to be a finite number >= 0, got \`${((s = t.interval) == null ? void 0 : s.toString()) ?? ""}\` (${typeof t.interval})`);
-    $(this, Re, t.carryoverConcurrencyCount), $(this, ke, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), $(this, Me, t.intervalCap), $(this, Te, t.interval), $(this, Z, new t.queueClass()), $(this, $e, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, $(this, Be, t.throwOnTimeout === !0), $(this, pe, t.autoStart === !1);
+    $(this, Re, t.carryoverConcurrencyCount), $(this, ke, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), $(this, Pe, t.intervalCap), $(this, Te, t.interval), $(this, Z, new t.queueClass()), $(this, Be, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, $(this, Fe, t.throwOnTimeout === !0), $(this, ve, t.autoStart === !1);
   }
   get concurrency() {
     return _(this, De);
@@ -410,7 +410,7 @@ class qs extends Ls {
   set concurrency(t) {
     if (!(typeof t == "number" && t >= 1))
       throw new TypeError(`Expected \`concurrency\` to be a number from 1 and up, got \`${t}\` (${typeof t})`);
-    $(this, De, t), K(this, L, Qe).call(this);
+    $(this, De, t), Q(this, L, Ye).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -452,18 +452,18 @@ class qs extends Ls {
     _(this, Z).setPriority(t, i);
   }
   async add(t, i = {}) {
-    return i.id ?? (i.id = (Le(this, it)._++).toString()), i = {
+    return i.id ?? (i.id = (Le(this, rt)._++).toString()), i = {
       timeout: this.timeout,
-      throwOnTimeout: _(this, Be),
+      throwOnTimeout: _(this, Fe),
       ...i
     }, new Promise((s, r) => {
       _(this, Z).enqueue(async () => {
         var a;
-        Le(this, ne)._++;
+        Le(this, ae)._++;
         try {
-          (a = i.signal) == null || a.throwIfAborted(), Le(this, _e)._++;
+          (a = i.signal) == null || a.throwIfAborted(), Le(this, be)._++;
           let n = t({ signal: i.signal });
-          i.timeout && (n = Os(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, K(this, L, fi).call(this, i.signal)]));
+          i.timeout && (n = Hs(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, Q(this, L, fi).call(this, i.signal)]));
           const d = await n;
           s(d), this.emit("completed", d);
         } catch (n) {
@@ -473,9 +473,9 @@ class qs extends Ls {
           }
           r(n), this.emit("error", n);
         } finally {
-          K(this, L, hi).call(this);
+          Q(this, L, hi).call(this);
         }
-      }, i), this.emit("add"), K(this, L, Ke).call(this);
+      }, i), this.emit("add"), Q(this, L, Ve).call(this);
     });
   }
   async addAll(t, i) {
@@ -485,19 +485,19 @@ class qs extends Ls {
   Start (or resume) executing enqueued tasks within concurrency limit. No need to call this if queue is not paused (via `options.autoStart = false` or by `.pause()` method.)
   */
   start() {
-    return _(this, pe) ? ($(this, pe, !1), K(this, L, Qe).call(this), this) : this;
+    return _(this, ve) ? ($(this, ve, !1), Q(this, L, Ye).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    $(this, pe, !0);
+    $(this, ve, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    $(this, Z, new (_(this, $e))());
+    $(this, Z, new (_(this, Be))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -505,7 +505,7 @@ class qs extends Ls {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    _(this, Z).size !== 0 && await K(this, L, Ve).call(this, "empty");
+    _(this, Z).size !== 0 && await Q(this, L, je).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -515,7 +515,7 @@ class qs extends Ls {
       Note that this only limits the number of items waiting to start. There could still be up to `concurrency` jobs already running that this call does not include in its calculation.
       */
   async onSizeLessThan(t) {
-    _(this, Z).size < t || await K(this, L, Ve).call(this, "next", () => _(this, Z).size < t);
+    _(this, Z).size < t || await Q(this, L, je).call(this, "next", () => _(this, Z).size < t);
   }
   /**
       The difference with `.onEmpty` is that `.onIdle` guarantees that all work from the queue has finished. `.onEmpty` merely signals that the queue is empty, but it could mean that some promises haven't completed yet.
@@ -523,7 +523,7 @@ class qs extends Ls {
       @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
       */
   async onIdle() {
-    _(this, ne) === 0 && _(this, Z).size === 0 || await K(this, L, Ve).call(this, "idle");
+    _(this, ae) === 0 && _(this, Z).size === 0 || await Q(this, L, je).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
@@ -543,57 +543,57 @@ class qs extends Ls {
   Number of running items (no longer in the queue).
   */
   get pending() {
-    return _(this, ne);
+    return _(this, ae);
   }
   /**
   Whether the queue is currently paused.
   */
   get isPaused() {
-    return _(this, pe);
+    return _(this, ve);
   }
 }
-Re = new WeakMap(), ke = new WeakMap(), _e = new WeakMap(), Me = new WeakMap(), Te = new WeakMap(), Pe = new WeakMap(), re = new WeakMap(), Se = new WeakMap(), Z = new WeakMap(), $e = new WeakMap(), ne = new WeakMap(), De = new WeakMap(), pe = new WeakMap(), Be = new WeakMap(), it = new WeakMap(), L = new WeakSet(), li = function() {
-  return _(this, ke) || _(this, _e) < _(this, Me);
+Re = new WeakMap(), ke = new WeakMap(), be = new WeakMap(), Pe = new WeakMap(), Te = new WeakMap(), $e = new WeakMap(), oe = new WeakMap(), Se = new WeakMap(), Z = new WeakMap(), Be = new WeakMap(), ae = new WeakMap(), De = new WeakMap(), ve = new WeakMap(), Fe = new WeakMap(), rt = new WeakMap(), L = new WeakSet(), li = function() {
+  return _(this, ke) || _(this, be) < _(this, Pe);
 }, ui = function() {
-  return _(this, ne) < _(this, De);
+  return _(this, ae) < _(this, De);
 }, hi = function() {
-  Le(this, ne)._--, K(this, L, Ke).call(this), this.emit("next");
+  Le(this, ae)._--, Q(this, L, Ve).call(this), this.emit("next");
 }, di = function() {
-  K(this, L, ft).call(this), K(this, L, ct).call(this), $(this, Se, void 0);
+  Q(this, L, gt).call(this), Q(this, L, ft).call(this), $(this, Se, void 0);
 }, ci = function() {
   const t = Date.now();
-  if (_(this, re) === void 0) {
-    const i = _(this, Pe) - t;
+  if (_(this, oe) === void 0) {
+    const i = _(this, $e) - t;
     if (i < 0)
-      $(this, _e, _(this, Re) ? _(this, ne) : 0);
+      $(this, be, _(this, Re) ? _(this, ae) : 0);
     else
       return _(this, Se) === void 0 && $(this, Se, setTimeout(() => {
-        K(this, L, di).call(this);
+        Q(this, L, di).call(this);
       }, i)), !0;
   }
   return !1;
-}, Ke = function() {
+}, Ve = function() {
   if (_(this, Z).size === 0)
-    return _(this, re) && clearInterval(_(this, re)), $(this, re, void 0), this.emit("empty"), _(this, ne) === 0 && this.emit("idle"), !1;
-  if (!_(this, pe)) {
+    return _(this, oe) && clearInterval(_(this, oe)), $(this, oe, void 0), this.emit("empty"), _(this, ae) === 0 && this.emit("idle"), !1;
+  if (!_(this, ve)) {
     const t = !_(this, L, ci);
     if (_(this, L, li) && _(this, L, ui)) {
       const i = _(this, Z).dequeue();
-      return i ? (this.emit("active"), i(), t && K(this, L, ct).call(this), !0) : !1;
+      return i ? (this.emit("active"), i(), t && Q(this, L, ft).call(this), !0) : !1;
     }
   }
   return !1;
-}, ct = function() {
-  _(this, ke) || _(this, re) !== void 0 || ($(this, re, setInterval(() => {
-    K(this, L, ft).call(this);
-  }, _(this, Te))), $(this, Pe, Date.now() + _(this, Te)));
 }, ft = function() {
-  _(this, _e) === 0 && _(this, ne) === 0 && _(this, re) && (clearInterval(_(this, re)), $(this, re, void 0)), $(this, _e, _(this, Re) ? _(this, ne) : 0), K(this, L, Qe).call(this);
+  _(this, ke) || _(this, oe) !== void 0 || ($(this, oe, setInterval(() => {
+    Q(this, L, gt).call(this);
+  }, _(this, Te))), $(this, $e, Date.now() + _(this, Te)));
+}, gt = function() {
+  _(this, be) === 0 && _(this, ae) === 0 && _(this, oe) && (clearInterval(_(this, oe)), $(this, oe, void 0)), $(this, be, _(this, Re) ? _(this, ae) : 0), Q(this, L, Ye).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
-Qe = function() {
-  for (; K(this, L, Ke).call(this); )
+Ye = function() {
+  for (; Q(this, L, Ve).call(this); )
     ;
 }, fi = async function(t) {
   return new Promise((i, s) => {
@@ -601,7 +601,7 @@ Qe = function() {
       s(t.reason);
     }, { once: !0 });
   });
-}, Ve = async function(t, i) {
+}, je = async function(t, i) {
   return new Promise((s) => {
     const r = () => {
       i && !i() || (this.off(t, r), s());
@@ -609,15 +609,15 @@ Qe = function() {
     this.on(t, r);
   });
 };
-const Ms = () => {
-  const o = vt(), e = ge(ye);
+const Ps = () => {
+  const o = _t(), e = me(_e);
   if (!e)
     return;
   if (e.queryFnOverride) {
     console.warn("Detected incorrect use of useRequestQueue.  This composable should not be used in nested components.  Please discuss with team-data or report an issue if you feel you have a use case.");
     return;
   }
-  const t = new qs({
+  const t = new Ms({
     carryoverConcurrencyCount: !0,
     concurrency: o.maxParallelRequests,
     interval: o.requestInterval,
@@ -627,14 +627,14 @@ const Ms = () => {
     queryFnOverride: !0,
     queryFn: (s, r) => t.add(() => e.queryFn(s, r), { throwOnTimeout: !0 })
   };
-  Mi(ye, i);
+  Pi(_e, i);
 };
 /*!
  * pinia v3.0.4
  * (c) 2025 Eduardo San Martin Morote
  * @license MIT
  */
-const Ps = typeof window < "u";
+const $s = typeof window < "u";
 let Bt;
 process.env.NODE_ENV;
 const Ft = process.env.NODE_ENV !== "production" ? Symbol("pinia") : (
@@ -649,8 +649,8 @@ process.env.NODE_ENV !== "production" ? Symbol("pinia:skipHydration") : (
   /* istanbul ignore next */
   Symbol()
 );
-function bt(o) {
-  const e = Pi(o), t = {};
+function Ie(o) {
+  const e = $i(o), t = {};
   for (const i in e) {
     const s = e[i];
     s.effect ? t[i] = // ...
@@ -659,204 +659,207 @@ function bt(o) {
       set(r) {
         o[i] = r;
       }
-    }) : ($i(s) || Bi(s)) && (t[i] = // ---
+    }) : (Bi(s) || Fi(s)) && (t[i] = // ---
     Ae(o, i));
   }
   return t;
 }
-const oe = (o) => (o == null ? void 0 : o.chart.type) === "table", $s = [
+const le = (o) => (o == null ? void 0 : o.chart.type) === "table", Bs = [
   "basic",
   "api_usage",
   "llm_usage",
   "agentic_usage",
   "platform",
   void 0
-], Bs = (o) => $s.includes(o);
-function Fs({
+], Fs = (o) => Bs.includes(o);
+function Gs({
   queryBridge: o,
   context: e,
   definition: t,
   chartData: i
 }) {
-  const s = H(""), r = H(""), a = H(void 0), n = H(void 0), d = vt(), l = nt(), { stripUnknownFilters: h, loading: u } = bt(l), f = w(() => oe(t.value));
-  st(async () => {
-    var S, I;
-    s.value = await ((S = o == null ? void 0 : o.exploreBaseUrl) == null ? void 0 : S.call(o)) ?? "", r.value = await ((I = o == null ? void 0 : o.requestsBaseUrl) == null ? void 0 : I.call(o)) ?? "";
+  const s = A(""), r = A(""), a = A(void 0), n = A(void 0), d = _t(), u = Ue(), { stripUnknownFilters: h, loading: l } = Ie(u), f = w(() => le(t.value));
+  nt(async () => {
+    var D, H;
+    s.value = await ((D = o == null ? void 0 : o.exploreBaseUrl) == null ? void 0 : D.call(o)) ?? "", r.value = await ((H = o == null ? void 0 : o.requestsBaseUrl) == null ? void 0 : H.call(o)) ?? "";
   });
-  const m = w(() => d.analytics && d.percentiles), p = w(() => {
-    const S = t.value.chart.type;
-    return ["golden_signals", "gauge"].includes(S) ? !1 : S === "top_n" ? e.value.editable || e.value.showTileActions : !0;
-  }), y = w(() => r.value && t.value.query && !f.value && t.value.query.datasource !== "llm_usage" && t.value.query.datasource !== "platform" && m.value && !u.value), g = w(() => s.value && t.value.query && Bs(t.value.query.datasource) && m.value && !u.value), k = w(() => i.value ? dt(i.value.meta.granularity_ms) : void 0), z = w(() => {
+  const g = w(() => d.analytics && d.percentiles), p = w(() => {
+    const D = t.value.chart.type;
+    return ["golden_signals", "gauge"].includes(D) ? !1 : D === "top_n" ? e.value.editable || e.value.showTileActions : !0;
+  }), y = w(() => r.value && t.value.query && !f.value && t.value.query.datasource !== "llm_usage" && t.value.query.datasource !== "platform" && g.value && !l.value), m = w(() => s.value && t.value.query && Fs(t.value.query.datasource) && g.value && !l.value), T = w(() => i.value ? ct(i.value.meta.granularity_ms) : void 0), R = w(() => {
     var N;
-    const S = t.value, I = [...e.value.filters, ...S.query.filters ?? []], Q = "metrics" in S.query ? S.query.metrics : void 0, D = ((N = S.query) == null ? void 0 : N.datasource) ?? "api_usage";
+    const D = t.value, H = [...e.value.filters, ...D.query.filters ?? []], V = "metrics" in D.query ? D.query.metrics : void 0, z = ((N = D.query) == null ? void 0 : N.datasource) ?? "api_usage";
     return h.value({
-      datasource: D,
-      filters: I,
-      queryFields: Q
+      datasource: z,
+      filters: H,
+      queryFields: V
     });
   }), v = w(() => {
-    if (!g.value || !p.value)
+    if (!m.value || !p.value)
       return "";
-    const S = t.value;
-    if (oe(S))
-      return ve({
-        ...S.query,
-        filters: z.value
+    const D = t.value;
+    if (le(D))
+      return pe({
+        ...D.query,
+        filters: R.value
       });
-    const I = S.query.time_range || e.value.timeSpec, Q = Y(I, z.value);
-    return ve(Q);
-  }), q = w(() => {
+    const H = D.query.time_range || e.value.timeSpec, V = W(H, R.value);
+    return pe(V);
+  }), I = w(() => {
     if (!y.value || !p.value)
       return "";
-    const S = z.value, I = t.value;
-    if (oe(I))
+    const D = R.value, H = t.value;
+    if (le(H))
       return "";
-    const Q = le(
-      I.query.time_range || e.value.timeSpec,
-      S
+    const V = te(
+      H.query.time_range || e.value.timeSpec,
+      D
     );
-    return A(Q);
-  }), A = (S) => y.value ? `${r.value}?q=${JSON.stringify(S)}` : "", le = (S, I) => {
-    var N, F, P, V;
-    const Q = (F = (N = i.value) == null ? void 0 : N.meta) != null && F.start ? new Date(i.value.meta.start) : void 0, D = (V = (P = i.value) == null ? void 0 : P.meta) != null && V.end ? new Date(i.value.meta.end) : void 0;
+    return q(V);
+  }), q = (D) => y.value ? `${r.value}?q=${JSON.stringify(D)}` : "", te = (D, H) => {
+    var N, F, P, Y;
+    const V = (F = (N = i.value) == null ? void 0 : N.meta) != null && F.start ? new Date(i.value.meta.start) : void 0, z = (Y = (P = i.value) == null ? void 0 : P.meta) != null && Y.end ? new Date(i.value.meta.end) : void 0;
     return {
-      filter: I,
+      filter: H,
       timeframe: {
-        timePeriodsKey: S.type === "relative" ? S.time_range : "custom",
-        start: S.type === "absolute" ? Q : void 0,
-        end: S.type === "absolute" ? D : void 0
+        timePeriodsKey: D.type === "relative" ? D.time_range : "custom",
+        start: D.type === "absolute" ? V : void 0,
+        end: D.type === "absolute" ? z : void 0
       }
     };
-  }, xe = (S, I) => ({
-    filter: I,
+  }, ie = (D, H) => ({
+    filter: H,
     timeframe: {
-      timePeriodsKey: S.type === "relative" ? S.time_range : "custom",
-      start: S.type === "absolute" ? S.start : void 0,
-      end: S.type === "absolute" ? S.end : void 0
+      timePeriodsKey: D.type === "relative" ? D.time_range : "custom",
+      start: D.type === "absolute" ? D.start : void 0,
+      end: D.type === "absolute" ? D.end : void 0
     }
-  }), Y = (S, I) => {
-    const Q = t.value;
-    if (oe(Q))
+  }), W = (D, H) => {
+    const V = t.value;
+    if (le(V))
       throw new Error("Cannot build a chart explore query for table chart definitions");
-    const D = [...Q.query.dimensions ?? []], N = [...Q.query.metrics ?? []];
+    const z = [...V.query.dimensions ?? []], N = [...V.query.metrics ?? []];
     return {
-      filters: I,
+      filters: H,
       metrics: N,
-      dimensions: D,
-      time_range: S,
-      granularity: Q.query.granularity || k.value || void 0
+      dimensions: z,
+      time_range: D,
+      granularity: V.query.granularity || T.value || void 0
     };
-  }, ve = (S) => {
-    if (!g.value)
+  }, pe = (D) => {
+    if (!m.value)
       return "";
-    const I = t.value.query.datasource && t.value.query.datasource !== "basic" ? t.value.query.datasource : "api_usage";
-    return `${s.value}?q=${JSON.stringify(S)}&d=${I}&c=${t.value.chart.type}`;
+    const H = t.value.query.datasource && t.value.query.datasource !== "basic" ? t.value.query.datasource : "api_usage";
+    return `${s.value}?q=${JSON.stringify(D)}&d=${H}&c=${t.value.chart.type}`;
   };
-  return Oe([y, g], ([S, I]) => {
-    S && (a.value = { href: "" }), I && (n.value = { href: "" });
+  return Oe([y, m], ([D, H]) => {
+    D && (a.value = { href: "" }), H && (n.value = { href: "" });
   }), {
     exploreLinkKebabMenu: v,
-    requestsLinkKebabMenu: q,
+    requestsLinkKebabMenu: I,
     canShowKebabMenu: p,
     canGenerateRequestsLink: y,
-    canGenerateExploreLink: g,
+    canGenerateExploreLink: m,
     requestsLinkZoomActions: a,
     exploreLinkZoomActions: n,
-    buildExploreQuery: Y,
-    buildRequestsQueryZoomActions: xe,
-    buildExploreLink: ve,
-    buildRequestLink: A
+    buildExploreQuery: W,
+    buildRequestsQueryZoomActions: ie,
+    buildExploreLink: pe,
+    buildRequestLink: q
   };
 }
-function Gs() {
-  const o = ge(ye), e = nt(), { stripUnknownFilters: t } = bt(e), i = new AbortController();
-  return Fe(() => {
-    i.abort();
+function Us() {
+  const o = me(_e), e = Ue(), { stripUnknownFilters: t } = Ie(e);
+  let i = null;
+  return Ge(() => {
+    i == null || i.abort();
   }), { issueQuery: async (r, a, n) => {
     if (!o)
       throw new Error("Query bridge is not defined");
-    await e.isReady();
+    i == null || i.abort();
+    const d = new AbortController();
+    i = d, await e.isReady();
     const {
-      datasource: d,
-      limit: l,
-      ...h
-    } = r, u = d || "basic", f = t.value({
       datasource: u,
+      limit: h,
+      ...l
+    } = r, f = u || "basic", g = t.value({
+      datasource: f,
       filters: [
         ...r.filters ?? [],
         ...a.filters
       ],
       queryFields: r.metrics
     });
-    let m = r.time_range;
-    m ? m.tz || (m = {
-      ...m,
+    let p = r.time_range;
+    p ? p.tz || (p = {
+      ...p,
       tz: a.tz
-    }) : m = {
+    }) : p = {
       ...a.timeSpec,
       tz: a.tz
     };
-    const p = {
-      datasource: u,
+    const y = {
+      datasource: f,
       query: {
-        ...h,
-        time_range: m,
-        filters: f,
-        limit: n ?? l
+        ...l,
+        time_range: p,
+        filters: g,
+        limit: n ?? h
       }
     };
-    return o.queryFn(p, i);
+    return o.queryFn(y, d);
   } };
 }
-function Us({
+function Ws({
   context: o,
-  globalFilters: e = H([]),
-  isFullscreen: t = H(!1),
-  preview: i = H(!1)
+  globalFilters: e = A([]),
+  isFullscreen: t = A(!1),
+  preview: i = A(!1)
 }) {
-  const s = vt(), r = w(() => o.value.timeSpec ? o.value.timeSpec : {
+  const s = _t(), r = Ue(), { loading: a } = Ie(s), { loading: n } = Ie(r), d = w(() => o.value.timeSpec ? o.value.timeSpec : {
     type: "relative",
     time_range: s.defaultQueryTimeForOrg
-  }), a = w(() => {
-    var p, y, g;
-    let { tz: d, refreshInterval: l, editable: h, showTileActions: u } = o.value;
-    const f = [...o.value.filters ?? [], ...e.value];
-    if (d || (d = new Intl.DateTimeFormat().resolvedOptions().timeZone), l === void 0 && (l = ks), t.value) {
-      let k = !1;
-      if (r.value.type === "relative")
-        k = ["15m", "1h", "6h", "12h", "24h"].includes(r.value.time_range);
+  }), u = w(() => {
+    var T, R, v;
+    let { tz: l, refreshInterval: f, editable: g, showTileActions: p } = o.value;
+    const y = [...o.value.filters ?? [], ...e.value];
+    if (l || (l = new Intl.DateTimeFormat().resolvedOptions().timeZone), f === void 0 && (f = Ts), t.value) {
+      let I = !1;
+      if (d.value.type === "relative")
+        I = ["15m", "1h", "6h", "12h", "24h"].includes(d.value.time_range);
       else {
-        const q = r.value.start.getTime(), A = r.value.end.getTime();
-        k = Math.abs(A - q) <= 864e5;
+        const ie = d.value.start.getTime(), W = d.value.end.getTime();
+        I = Math.abs(W - ie) <= 864e5;
       }
-      const z = (/* @__PURE__ */ new Date()).getTime();
-      r.value.type === "absolute" && r.value.end.getTime() < z || r.value.type === "relative" && ["previous_week", "previous_month"].includes(r.value.time_range) ? l = 0 : k ? l = Ts : l = Ss;
+      const q = (/* @__PURE__ */ new Date()).getTime();
+      d.value.type === "absolute" && d.value.end.getTime() < q || d.value.type === "relative" && ["previous_week", "previous_month"].includes(d.value.time_range) ? f = 0 : I ? f = Ss : f = Ds;
     }
-    (h === void 0 || i.value) && (h = !1), u === void 0 && (u = !0);
-    const m = !i.value && !!((g = (y = (p = Fi()) == null ? void 0 : p.vnode) == null ? void 0 : y.props) != null && g.onTileTimeRangeZoom);
+    (g === void 0 || i.value) && (g = !1), p === void 0 && (p = !0);
+    const m = !i.value && !!((v = (R = (T = Gi()) == null ? void 0 : T.vnode) == null ? void 0 : R.props) != null && v.onTileTimeRangeZoom);
     return {
-      filters: f,
-      tz: d,
-      timeSpec: r.value,
-      refreshInterval: l,
-      editable: h,
-      showTileActions: u && !i.value,
+      filters: y,
+      tz: l,
+      timeSpec: d.value,
+      refreshInterval: f,
+      editable: g,
+      showTileActions: p && !i.value,
       showTileZoomActions: !i.value,
       zoomable: m
     };
-  }), n = w(() => !!o.value.timeSpec || !s.loading);
+  }), h = w(() => !!o.value.timeSpec || !a.value && !n.value);
   return {
-    internalContext: a,
-    queryReady: n
+    internalContext: u,
+    queryReady: h
   };
 }
-const ae = {
-  useContextLinks: Fs,
-  useDashboardInternalContext: Us,
-  useEvaluateFeatureFlag: Ds,
-  useI18n: xs,
-  useIssueQuery: Gs,
-  useRequestQueue: Ms
+const ue = {
+  useContextLinks: Gs,
+  useDashboardInternalContext: Ws,
+  useEvaluateFeatureFlag: zs,
+  useI18n: Cs,
+  useIssueQuery: Us,
+  useRequestQueue: Ps
 }, wt = /* @__PURE__ */ ee({
   __name: "QueryDataProvider",
   props: {
@@ -866,64 +869,67 @@ const ae = {
     queryReady: { type: Boolean },
     refreshCounter: {}
   },
-  emits: ["chart-data", "queryComplete"],
+  emits: ["chart-data", "query-complete"],
   setup(o, { emit: e }) {
-    const t = o, i = e, { i18n: s } = ae.useI18n(), { issueQuery: r } = ae.useIssueQuery(), a = ge(ye), n = () => t.queryReady && a ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, { data: d, error: l, isValidating: h } = es(n, async () => {
+    const t = o, i = e, { i18n: s } = ue.useI18n(), { issueQuery: r } = ue.useIssueQuery(), a = me(_e), n = () => t.queryReady && a ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, { data: d, error: u, isValidating: h } = ts(n, async () => {
+      const R = n();
       try {
-        const g = await r(t.query, t.context, t.limitOverride);
-        return m.value = null, g;
-      } catch (g) {
-        throw m.value = Yi(g), g;
+        const v = await r(t.query, t.context, t.limitOverride);
+        return n() !== R ? void 0 : (g.value = null, v);
+      } catch (v) {
+        if (n() !== R)
+          return;
+        throw g.value = ji(v), v;
       } finally {
-        i("queryComplete");
+        n() === R && i("query-complete");
       }
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1,
       shouldRetryOnError: !1
-    }), { state: u, swrvState: f } = gs(d, l, h), m = H(null), p = w(() => u.value === f.ERROR || !!m.value), y = w(() => !t.queryReady || u.value === f.PENDING);
-    return Oe([() => d.value, () => u.value], ([g, k]) => {
-      g && (k === "SUCCESS_HAS_DATA" || k === "SUCCESS") && i("chart-data", g);
-    }), (g, k) => {
-      var q;
-      const z = ue("KSkeleton"), v = ue("KEmptyState");
-      return y.value || !E(d) && !p.value ? (C(), O(z, {
+    }), { state: l, swrvState: f } = ms(d, u, h), g = A(null), p = w(() => l.value === f.ERROR || !!g.value), y = w(() => !t.queryReady || l.value === f.PENDING), m = A(), T = w(() => d.value ?? (t.queryReady && l.value === f.PENDING ? m.value : void 0));
+    return Oe([() => d.value, () => l.value], ([R, v]) => {
+      R && (v === "SUCCESS_HAS_DATA" || v === "SUCCESS") && R !== m.value && (m.value = R, i("chart-data", R));
+    }), (R, v) => {
+      var te;
+      const I = he("KSkeleton"), q = he("KEmptyState");
+      return (y.value || !C(d) && !p.value) && !T.value ? (x(), O(I, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : p.value ? (C(), O(v, {
+      })) : p.value && !y.value ? (x(), O(q, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state"
-      }, rt({
+      }, ot({
         icon: M(() => {
-          var A;
+          var ie;
           return [
-            ((A = m.value) == null ? void 0 : A.type) === "forbidden" ? (C(), O(E(ss), { key: 0 })) : (C(), O(E(rs), { key: 1 }))
+            ((ie = g.value) == null ? void 0 : ie.type) === "forbidden" ? (x(), O(C(rs), { key: 0 })) : (x(), O(C(ns), { key: 1 }))
           ];
         }),
         title: M(() => {
-          var A;
+          var ie;
           return [
-            te("p", null, J(((A = m.value) == null ? void 0 : A.message) || E(s).t("renderer.unexpectedError")), 1)
+            se("p", null, J(((ie = g.value) == null ? void 0 : ie.message) || C(s).t("renderer.unexpectedError")), 1)
           ];
         }),
         _: 2
       }, [
-        (q = m.value) != null && q.details ? {
+        (te = g.value) != null && te.details ? {
           name: "default",
           fn: M(() => [
-            te("p", null, J(m.value.details), 1)
+            se("p", null, J(g.value.details), 1)
           ]),
           key: "0"
         } : void 0
-      ]), 1024)) : E(d) ? He(g.$slots, "default", {
+      ]), 1024)) : T.value ? He(R.$slots, "default", {
         key: 2,
-        data: E(d)
+        data: T.value
       }) : X("", !0);
     };
   }
-}), Ws = /* @__PURE__ */ ee({
+}), Ks = /* @__PURE__ */ ee({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -937,18 +943,18 @@ const ae = {
   },
   setup(o) {
     const e = o, t = w(() => e.chartOptions.type === "single_value");
-    return (i, s) => (C(), O(wt, {
+    return (i, s) => (x(), O(wt, {
       context: o.context,
       query: o.query,
       "query-ready": o.queryReady,
       "refresh-counter": o.refreshCounter
     }, {
       default: M(({ data: r }) => [
-        te("div", {
+        se("div", {
           class: ze(["analytics-chart", { "single-value": t.value }]),
-          style: Ye(t.value ? void 0 : { height: `${o.height}px` })
+          style: Xe(t.value ? void 0 : { height: `${o.height}px` })
         }, [
-          fe(E(ji), {
+          ge(C(Xi), {
             "chart-data": r,
             "chart-options": o.chartOptions,
             "synthetics-data-key": t.value ? void 0 : o.chartOptions.synthetics_data_key
@@ -958,12 +964,12 @@ const ae = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), be = (o, e) => {
+}), we = (o, e) => {
   const t = o.__vccOpts || o;
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, Ut = /* @__PURE__ */ be(Ws, [["__scopeId", "data-v-2cbfac70"]]), Ks = { class: "analytics-chart" }, Qs = /* @__PURE__ */ ee({
+}, Ut = /* @__PURE__ */ we(Ks, [["__scopeId", "data-v-2cbfac70"]]), Qs = { class: "analytics-chart" }, Vs = /* @__PURE__ */ ee({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -978,7 +984,7 @@ const ae = {
   },
   emits: ["edit-tile", "chart-data", "zoom-time-range", "view-requests", "select-chart-range"],
   setup(o, { emit: e }) {
-    const t = o, i = e, { i18n: s } = ae.useI18n(), r = w(() => ({
+    const t = o, i = e, { i18n: s } = ue.useI18n(), r = w(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chart_dataset_colors,
@@ -986,12 +992,12 @@ const ae = {
       hideTruncationWarning: t.query.limit !== void 0 && t.query.limit > 0
     })), a = w(() => t.context.zoomable), n = () => {
       i("edit-tile");
-    }, d = (l) => {
-      i("chart-data", l);
+    }, d = (u) => {
+      i("chart-data", u);
     };
-    return (l, h) => {
-      const u = ue("KDropdownItem");
-      return C(), O(wt, {
+    return (u, h) => {
+      const l = he("KDropdownItem");
+      return x(), O(wt, {
         context: o.context,
         query: o.query,
         "query-ready": o.queryReady,
@@ -999,8 +1005,8 @@ const ae = {
         onChartData: d
       }, {
         default: M(({ data: f }) => [
-          te("div", Ks, [
-            fe(E(Xi), ei({
+          se("div", Qs, [
+            ge(C(Zi), ei({
               "chart-data": f,
               "chart-options": r.value,
               "explore-link": o.exploreLink,
@@ -1010,15 +1016,15 @@ const ae = {
               "timeseries-zoom": a.value,
               "tooltip-title": ""
             }, o.extraProps, {
-              onSelectChartRange: h[0] || (h[0] = (m) => i("select-chart-range", m)),
-              onZoomTimeRange: h[1] || (h[1] = (m) => i("zoom-time-range", m))
-            }), rt({ _: 2 }, [
+              onSelectChartRange: h[0] || (h[0] = (g) => i("select-chart-range", g)),
+              onZoomTimeRange: h[1] || (h[1] = (g) => i("zoom-time-range", g))
+            }), ot({ _: 2 }, [
               o.context.editable ? {
                 name: "menu-items",
                 fn: M(() => [
-                  fe(u, { onClick: n }, {
+                  ge(l, { onClick: n }, {
                     default: M(() => [
-                      gt(J(E(s).t("renderer.edit")), 1)
+                      mt(J(C(s).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -1032,7 +1038,7 @@ const ae = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Et = /* @__PURE__ */ be(Qs, [["__scopeId", "data-v-e1e7f610"]]), Wt = /* @__PURE__ */ ee({
+}), Et = /* @__PURE__ */ we(Vs, [["__scopeId", "data-v-e1e7f610"]]), Wt = /* @__PURE__ */ ee({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -1045,7 +1051,7 @@ const ae = {
     exploreLink: {}
   },
   setup(o) {
-    return (e, t) => (C(), O(Et, {
+    return (e, t) => (x(), O(Et, {
       "chart-options": o.chartOptions,
       context: o.context,
       "extra-props": { showAnnotations: !1 },
@@ -1070,7 +1076,7 @@ const ae = {
   emits: ["zoom-time-range", "select-chart-range"],
   setup(o, { emit: e }) {
     const t = e;
-    return (i, s) => (C(), O(Et, {
+    return (i, s) => (x(), O(Et, {
       "chart-options": o.chartOptions,
       context: o.context,
       "explore-link": o.exploreLink,
@@ -1083,7 +1089,7 @@ const ae = {
       onZoomTimeRange: s[1] || (s[1] = (r) => t("zoom-time-range", r))
     }, null, 8, ["chart-options", "context", "explore-link", "height", "query", "query-ready", "refresh-counter", "requests-link"]));
   }
-}), Vs = /* @__PURE__ */ ee({
+}), Ys = /* @__PURE__ */ ee({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -1113,18 +1119,18 @@ const ae = {
         refreshCounter: e.refreshCounter
       };
     });
-    return (i, s) => (C(), B("div", {
+    return (i, s) => (x(), B("div", {
       class: ze(["metric-card-tile-wrapper", { titled: !!e.chartOptions.chart_title }])
     }, [
-      fe(E(hs), Gi(Ui(t.value)), {
+      ge(C(ds), Ui(Wi(t.value)), {
         default: M(() => [
-          fe(E(ds))
+          ge(C(cs))
         ]),
         _: 1
       }, 16)
     ], 2));
   }
-}), Ys = /* @__PURE__ */ be(Vs, [["__scopeId", "data-v-b77f52b8"]]), js = {
+}), js = /* @__PURE__ */ we(Ys, [["__scopeId", "data-v-b77f52b8"]]), Xs = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
 }, Qt = /* @__PURE__ */ ee({
@@ -1133,9 +1139,9 @@ const ae = {
     entityLinkData: {}
   },
   setup(o) {
-    return (e, t) => (C(), B("div", js, J(o.entityLinkData.label), 1));
+    return (e, t) => (x(), B("div", Xs, J(o.entityLinkData.label), 1));
   }
-}), Xs = { key: 0 }, Zs = { key: 1 }, Js = /* @__PURE__ */ ee({
+}), Zs = { key: 0 }, Js = { key: 1 }, er = /* @__PURE__ */ ee({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -1148,7 +1154,7 @@ const ae = {
     exploreLink: {}
   },
   setup(o) {
-    const e = o, t = ge(ye), i = ti(async () => {
+    const e = o, t = me(_e), i = ti(async () => {
       if (t != null && t.fetchComponent)
         try {
           return await t.fetchComponent("EntityLink");
@@ -1156,39 +1162,39 @@ const ae = {
           return Qt;
         }
       return Qt;
-    }), s = w(() => !!e.chartOptions.entity_link || !!Object.keys(e.chartOptions.entity_links || {}).length), r = (l) => {
-      var u;
+    }), s = w(() => !!e.chartOptions.entity_link || !!Object.keys(e.chartOptions.entity_links || {}).length), r = (u) => {
+      var l;
       const h = e.chartOptions.entity_links;
-      return h && (h[l] || ((u = Object.entries(h).find(([f]) => f.toLowerCase() === l.toLowerCase())) == null ? void 0 : u[1])) || "";
-    }, a = (l) => {
-      var u, f;
-      const h = (f = (u = l.dimensions) == null ? void 0 : u[0]) == null ? void 0 : f.dimension;
-      return !h || h === l.dimension;
-    }, n = (l) => r(l.dimension) || a(l) && e.chartOptions.entity_link || "", d = (l) => {
-      const h = n(l);
+      return h && (h[u] || ((l = Object.entries(h).find(([f]) => f.toLowerCase() === u.toLowerCase())) == null ? void 0 : l[1])) || "";
+    }, a = (u) => {
+      var l, f;
+      const h = (f = (l = u.dimensions) == null ? void 0 : l[0]) == null ? void 0 : f.dimension;
+      return !h || h === u.dimension;
+    }, n = (u) => r(u.dimension) || a(u) && e.chartOptions.entity_link || "", d = (u) => {
+      const h = n(u);
       if (h)
-        if (l.id.includes(":")) {
-          const [u, f] = l.id.split(":");
-          return h.replace(Cs, u).replace(Mt, f);
+        if (u.id.includes(":")) {
+          const [l, f] = u.id.split(":");
+          return h.replace(Rs, l).replace(Mt, f);
         } else
-          return h.replace(Mt, l.id);
+          return h.replace(Mt, u.id);
       return "";
     };
-    return (l, h) => (C(), O(wt, {
+    return (u, h) => (x(), O(wt, {
       context: o.context,
       query: o.query,
       "query-ready": o.queryReady,
       "refresh-counter": o.refreshCounter
     }, {
-      default: M(({ data: u }) => [
-        fe(E(Zi), {
-          data: u,
+      default: M(({ data: l }) => [
+        ge(C(Ji), {
+          data: l,
           "synthetics-data-key": o.chartOptions.synthetics_data_key
-        }, rt({ _: 2 }, [
+        }, ot({ _: 2 }, [
           s.value ? {
             name: "name",
             fn: M(({ record: f }) => [
-              !f.isEmpty && n(f) ? (C(), O(E(i), {
+              !f.isEmpty && n(f) ? (x(), O(C(i), {
                 key: 0,
                 "entity-link-data": {
                   id: f.id,
@@ -1196,8 +1202,8 @@ const ae = {
                   deleted: f.deleted
                 },
                 "external-link": d(f)
-              }, null, 8, ["entity-link-data", "external-link"])) : (C(), B(mt, { key: 1 }, [
-                f.name === "empty" ? (C(), B("i", Xs, J(f.name), 1)) : (C(), B("span", Zs, J(f.name), 1))
+              }, null, 8, ["entity-link-data", "external-link"])) : (x(), B(pt, { key: 1 }, [
+                f.name === "empty" ? (x(), B("i", Zs, J(f.name), 1)) : (x(), B("span", Js, J(f.name), 1))
               ], 64))
             ]),
             key: "0"
@@ -1207,7 +1213,7 @@ const ae = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), er = (o) => o.records.map((e) => {
+}), tr = (o) => o.records.map((e) => {
   const t = { ...e };
   return Object.entries(e).forEach(([i, s]) => {
     var a, n, d;
@@ -1216,7 +1222,7 @@ const ae = {
     const r = (d = (n = (a = o.meta.display) == null ? void 0 : a[i]) == null ? void 0 : n[String(s)]) == null ? void 0 : d.name;
     r && (t[i] = r);
   }), t;
-}), tr = {
+}), ir = {
   /**
    * Builds platform table headers from configured or response-provided column names.
    * Known chart label translations are reused for user-facing labels, with the raw column as fallback.
@@ -1238,7 +1244,7 @@ const ae = {
       label: o(s) ? t(s) : i
     };
   })
-}, ir = {
+}, sr = {
   /**
    * Fetches one page of platform tabular rows, applying dashboard context filters and
    * forwarding the datasource-aware query to AnalyticsBridge.tabularQueryFn.
@@ -1264,10 +1270,10 @@ const ae = {
     stripUnknownFilters: a,
     tabularQueryFn: n
   }) => {
-    var u;
+    var l;
     if (!n)
       throw new Error("AnalyticsBridge.tabularQueryFn is not defined");
-    const d = s.query, l = a({
+    const d = s.query, u = a({
       datasource: "platform",
       filters: [
         ...d.filters ?? [],
@@ -1280,17 +1286,17 @@ const ae = {
         columns: d.columns,
         cursor: t === void 0 ? d.cursor : String(t),
         entity: d.entity,
-        filters: l,
+        filters: u,
         page_size: i
       }
     }, o);
-    return (u = h.meta.columns) != null && u.length && (r == null || r(h.meta.columns)), {
-      data: er(h),
+    return (l = h.meta.columns) != null && l.length && (r == null || r(h.meta.columns)), {
+      data: tr(h),
       cursor: h.meta.cursor,
       hasMore: !!h.meta.cursor
     };
   }
-}, sr = /* @__PURE__ */ ee({
+}, rr = /* @__PURE__ */ ee({
   __name: "TableDataGridRenderer",
   props: {
     query: {},
@@ -1301,7 +1307,7 @@ const ae = {
   },
   emits: ["loading-change"],
   setup(o, { emit: e }) {
-    const t = o, i = e, s = ge(ye), r = nt(), { i18n: a } = ae.useI18n(), n = new AbortController(), d = H([]), l = H(!1), h = w(() => t.height === void 0 ? void 0 : { height: `${t.height}px` }), u = w(() => ({
+    const t = o, i = e, s = me(_e), r = Ue(), { i18n: a } = ue.useI18n(), n = new AbortController(), d = A([]), u = A(!1), h = w(() => t.height === void 0 ? void 0 : { height: `${t.height}px` }), l = w(() => ({
       datasource: t.query.datasource,
       query: {
         columns: t.query.columns,
@@ -1325,58 +1331,58 @@ const ae = {
         tz: t.context.tz
       }
     }));
-    Fe(() => {
+    Ge(() => {
       n.abort();
     });
-    const m = w(() => {
-      var g;
-      return tr[t.query.datasource]({
+    const g = w(() => {
+      var m;
+      return ir[t.query.datasource]({
         // query.columns are optional in the API. If not provided, backend will return default columns.
         // If query columns are not provided, fallback to using columns from the response metadata for header configuration.
-        columns: (g = t.query.columns) != null && g.length ? t.query.columns : d.value,
-        translate: (k) => a.t(k),
-        canTranslate: (k) => a.te(k)
+        columns: (m = t.query.columns) != null && m.length ? t.query.columns : d.value,
+        translate: (T) => a.t(T),
+        canTranslate: (T) => a.te(T)
       });
-    }), p = w(() => async ({ cursor: g, pageSize: k }) => {
+    }), p = w(() => async ({ cursor: m, pageSize: T }) => {
       try {
         await r.isReady();
-        const z = ir[u.value.datasource];
-        if (!z)
-          throw new Error(`No table data grid fetcher found for datasource: ${u.value.datasource}`);
-        const v = await z({
+        const R = sr[l.value.datasource];
+        if (!R)
+          throw new Error(`No table data grid fetcher found for datasource: ${l.value.datasource}`);
+        const v = await R({
           abortController: n,
           context: t.context,
-          cursor: g,
-          pageSize: k,
-          query: u.value,
-          onResponseColumns: (q) => {
-            d.value = q;
+          cursor: m,
+          pageSize: T,
+          query: l.value,
+          onResponseColumns: (I) => {
+            d.value = I;
           },
           stripUnknownFilters: r.stripUnknownFilters,
           tabularQueryFn: s == null ? void 0 : s.tabularQueryFn
         });
-        return l.value = !1, v;
-      } catch (z) {
-        throw l.value = !0, z;
+        return u.value = !1, v;
+      } catch (R) {
+        throw u.value = !0, R;
       }
-    }), y = (g) => {
-      g.state === "error" && (l.value = !0), i("loading-change", g.state === "loading");
+    }), y = (m) => {
+      m.state === "error" && (u.value = !0), i("loading-change", m.state === "loading");
     };
-    return (g, k) => {
-      const z = ue("KSkeleton");
-      return C(), B("div", {
+    return (m, T) => {
+      const R = he("KSkeleton");
+      return x(), B("div", {
         class: "table-data-grid-renderer",
-        style: Ye(h.value)
+        style: Xe(h.value)
       }, [
-        o.queryReady ? (C(), O(E(cs), {
+        o.queryReady ? (x(), O(C(fs), {
           key: 1,
-          error: l.value,
+          error: u.value,
           fetcher: p.value,
-          headers: m.value,
+          headers: g.value,
           "page-size": o.query.page_size,
           "refresh-key": f.value,
           onState: y
-        }, null, 8, ["error", "fetcher", "headers", "page-size", "refresh-key"])) : (C(), O(z, {
+        }, null, 8, ["error", "fetcher", "headers", "page-size", "refresh-key"])) : (x(), O(R, {
           key: 0,
           "data-testid": "table-skeleton",
           type: "table"
@@ -1384,7 +1390,7 @@ const ae = {
       ], 4);
     };
   }
-}), rr = /* @__PURE__ */ be(sr, [["__scopeId", "data-v-c49ff2eb"]]), Vt = "#6c7489", nr = "12px", Yt = "20px", jt = "32px", gi = "20px", or = /* @__PURE__ */ ee({
+}), nr = /* @__PURE__ */ we(rr, [["__scopeId", "data-v-c49ff2eb"]]), Vt = "#6c7489", or = "12px", Yt = "20px", jt = "32px", gi = "20px", ar = /* @__PURE__ */ ee({
   __name: "DonutChartRenderer",
   props: {
     query: {},
@@ -1397,7 +1403,7 @@ const ae = {
     exploreLink: {}
   },
   setup(o) {
-    return (e, t) => (C(), O(Et, {
+    return (e, t) => (x(), O(Et, {
       "chart-options": o.chartOptions,
       context: o.context,
       height: o.height,
@@ -1406,15 +1412,15 @@ const ae = {
       "refresh-counter": o.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ar = ["data-testid"], lr = {
+}), lr = ["data-testid"], ur = {
   key: 0,
   class: "tile-header"
-}, ur = { class: "badge-container" }, hr = { class: "badge-text" }, dr = { key: 0 }, cr = ["data-testid"], fr = ["data-testid"], gr = { class: "delete-option" }, mr = ["data-testid"], pr = ["data-testid"], yr = /* @__PURE__ */ ee({
+}, hr = { class: "badge-container" }, dr = { class: "badge-text" }, cr = { key: 0 }, fr = ["data-testid"], gr = ["data-testid"], mr = { class: "delete-option" }, pr = ["data-testid"], yr = ["data-testid"], vr = /* @__PURE__ */ ee({
   __name: "DashboardTile",
-  props: /* @__PURE__ */ je({
+  props: /* @__PURE__ */ Ze({
     context: {},
     definition: {},
-    height: { default: Ge },
+    height: { default: We },
     isFullscreen: { type: Boolean },
     hideActions: { type: Boolean, default: !1 },
     hideZoomActions: { type: Boolean, default: !1 },
@@ -1426,123 +1432,123 @@ const ae = {
     refreshCounter: { default: 0 },
     refreshCounterModifiers: {}
   }),
-  emits: /* @__PURE__ */ je(["chart-data", "edit-tile", "duplicate-tile", "remove-tile", "tile-time-range-zoom", "tile-bounds-change"], ["update:refreshCounter"]),
+  emits: /* @__PURE__ */ Ze(["chart-data", "edit-tile", "duplicate-tile", "remove-tile", "tile-time-range-zoom", "tile-bounds-change"], ["update:refreshCounter"]),
   setup(o, { expose: e, emit: t }) {
-    pt((x) => ({
-      v55ee0ccc: `${x.height}px`
+    yt((E) => ({
+      v4adce2d4: `${E.height}px`
     }));
     const i = parseInt(gi, 10), s = o, r = ii(o, "refreshCounter"), a = () => {
-      z.value = !0, r.value++;
-    }, n = t, d = ti(() => import("./GeoMapRenderer-BSBPCCw4.js")), l = ge(ye), h = nt(), { stripUnknownFilters: u } = bt(h), { i18n: f } = ae.useI18n(), m = H(), p = H({ status: "loading" }), y = H(!1), g = H(), k = H(!1), z = H(!0), v = w(() => s.definition.chart), q = w(() => "chart_title" in v.value ? v.value.chart_title : void 0), A = w(() => "description" in v.value ? v.value.description : void 0), le = w(() => v.value.type === "slottable"), xe = w(() => oe(s.definition) ? !1 : !("allow_csv_export" in v.value) || v.value.allow_csv_export !== !1), {
-      exploreLinkKebabMenu: Y,
-      requestsLinkKebabMenu: ve,
-      canShowKebabMenu: S,
-      canGenerateRequestsLink: I,
-      canGenerateExploreLink: Q,
-      requestsLinkZoomActions: D,
+      R.value = !0, r.value++;
+    }, n = t, d = ti(() => import("./GeoMapRenderer-xglakGvT.js")), u = me(_e), h = Ue(), { stripUnknownFilters: l } = Ie(h), { i18n: f } = ue.useI18n(), g = A(), p = A({ status: "loading" }), y = A(!1), m = A(), T = A(!1), R = A(!0), v = w(() => s.definition.chart), I = w(() => "chart_title" in v.value ? v.value.chart_title : void 0), q = w(() => "description" in v.value ? v.value.description : void 0), te = w(() => v.value.type === "slottable"), ie = w(() => le(s.definition) ? !1 : !("allow_csv_export" in v.value) || v.value.allow_csv_export !== !1), {
+      exploreLinkKebabMenu: W,
+      requestsLinkKebabMenu: pe,
+      canShowKebabMenu: D,
+      canGenerateRequestsLink: H,
+      canGenerateExploreLink: V,
+      requestsLinkZoomActions: z,
       exploreLinkZoomActions: N,
       buildExploreQuery: F,
       buildExploreLink: P,
-      buildRequestLink: V,
-      buildRequestsQueryZoomActions: at
-    } = ae.useContextLinks({
-      queryBridge: l,
-      chartData: Ht(m),
+      buildRequestLink: Y,
+      buildRequestsQueryZoomActions: lt
+    } = ue.useContextLinks({
+      queryBridge: u,
+      chartData: Ht(g),
       definition: Ae(s, "definition"),
       context: Ht(Ae(s, "context"))
-    }), { issueQuery: lt } = ae.useIssueQuery();
-    Oe(() => s.definition, async (x, T) => {
-      await yt(), g.value && (k.value = g.value.scrollWidth > g.value.clientWidth);
+    }), { issueQuery: ut } = ue.useIssueQuery();
+    Oe(() => s.definition, async (E, S) => {
+      await vt(), m.value && (T.value = m.value.scrollWidth > m.value.clientWidth);
       try {
-        JSON.stringify(x == null ? void 0 : x.query) !== JSON.stringify(T == null ? void 0 : T.query) && (z.value = !0);
+        JSON.stringify(E == null ? void 0 : E.query) !== JSON.stringify(S == null ? void 0 : S.query) && (R.value = !0);
       } catch {
       }
     }, { immediate: !0, deep: !0 });
-    const Ue = w(() => f.t("csvExport.defaultFilename")), We = w(() => !!Y.value || xe.value || s.context.editable), we = w(() => !s.hideActions && S.value && We.value), yi = w(() => we.value && We.value && !s.isFullscreen), vi = w(() => v.value.type === "golden_signals" && !!A.value), _i = {
+    const Ke = w(() => f.t("csvExport.defaultFilename")), Qe = w(() => !!W.value || ie.value || s.context.editable), Ee = w(() => !s.hideActions && D.value && Qe.value), yi = w(() => Ee.value && Qe.value && !s.isFullscreen), vi = w(() => v.value.type === "golden_signals" && !!q.value), _i = {
       timeseries_line: Kt,
       timeseries_bar: Kt,
       horizontal_bar: Wt,
       vertical_bar: Wt,
       gauge: Ut,
-      donut: or,
-      golden_signals: Ys,
-      top_n: Js,
-      table: rr,
+      donut: ar,
+      golden_signals: js,
+      top_n: er,
+      table: nr,
       slottable: void 0,
       single_value: Ut,
       choropleth_map: d
     }, bi = w(() => {
-      var x, T, G, W;
+      var E, S, G, K;
       return {
-        ...(x = Ee.value) != null && x.rendererEvents.supportsRequests ? { "select-chart-range": Ai } : {},
-        ...(T = Ee.value) != null && T.rendererEvents.supportsZoom ? { "zoom-time-range": Ni } : {},
-        ...(G = Ee.value) != null && G.rendererEvents.supportsBounds ? { "bounds-change": Li } : {},
-        ...(W = Ee.value) != null && W.rendererEvents.supportsLoadingChange ? { "loading-change": Si } : {}
+        ...(E = xe.value) != null && E.rendererEvents.supportsRequests ? { "select-chart-range": Oi } : {},
+        ...(S = xe.value) != null && S.rendererEvents.supportsZoom ? { "zoom-time-range": Li } : {},
+        ...(G = xe.value) != null && G.rendererEvents.supportsBounds ? { "bounds-change": Ai } : {},
+        ...(K = xe.value) != null && K.rendererEvents.supportsLoadingChange ? { "loading-change": Di } : {}
       };
-    }), Ee = w(() => {
+    }), xe = w(() => {
       var Dt, zt, Nt;
-      const x = s.definition, T = _i[x.chart.type], G = oe(x), W = !!((Dt = T == null ? void 0 : T.emits) != null && Dt.includes("select-chart-range")), Ne = !!((zt = T == null ? void 0 : T.emits) != null && zt.includes("zoom-time-range")), me = x.chart.type === "choropleth_map", Ce = !!((Nt = T == null ? void 0 : T.emits) != null && Nt.includes("loading-change")), Oi = {
-        query: x.query,
+      const E = s.definition, S = _i[E.chart.type], G = le(E), K = !!((Dt = S == null ? void 0 : S.emits) != null && Dt.includes("select-chart-range")), Ne = !!((zt = S == null ? void 0 : S.emits) != null && zt.includes("zoom-time-range")), ye = E.chart.type === "choropleth_map", Ce = !!((Nt = S == null ? void 0 : S.emits) != null && Nt.includes("loading-change")), Hi = {
+        query: E.query,
         context: s.context,
         queryReady: s.queryReady,
         height: s.height - i * 2,
         refreshCounter: r.value
-      }, Hi = {
-        chartOptions: x.chart,
-        requestsLink: s.hideZoomActions ? void 0 : D.value,
+      }, Ii = {
+        chartOptions: E.chart,
+        requestsLink: s.hideZoomActions ? void 0 : z.value,
         exploreLink: s.hideZoomActions ? void 0 : N.value
       };
-      return T && {
-        component: T,
+      return S && {
+        component: S,
         rendererProps: {
-          ...Oi,
-          ...G ? {} : Hi
+          ...Hi,
+          ...G ? {} : Ii
         },
         rendererEvents: {
-          supportsRequests: W,
+          supportsRequests: K,
           supportsZoom: Ne,
-          supportsBounds: me,
+          supportsBounds: ye,
           supportsLoadingChange: Ce
         }
       };
-    }), ut = w(() => {
+    }), ht = w(() => {
       var G;
-      if (oe(s.definition))
+      if (le(s.definition))
         return null;
-      const x = s.definition.query, T = x == null ? void 0 : x.time_range;
-      if ((x == null ? void 0 : x.datasource) === "platform" && !((G = x.dimensions) != null && G.includes("time")))
+      const E = s.definition.query, S = E == null ? void 0 : E.time_range;
+      if ((E == null ? void 0 : E.datasource) === "platform" && !((G = E.dimensions) != null && G.includes("time")))
         return f.t("renderer.as_of_today");
-      if ((T == null ? void 0 : T.type) === "relative") {
-        const W = Ki.get(Qi[T.time_range]);
-        return W ? W.display : (console.warn("Did not recognize the given relative time range:", T.time_range), T.time_range);
-      } else if ((T == null ? void 0 : T.type) === "absolute") {
-        const W = T.tz || "Etc/UTC";
-        return `${qt(T.start, { short: !0, tz: W })} - ${qt(T.end, { short: !0, tz: W })}`;
+      if ((S == null ? void 0 : S.type) === "relative") {
+        const K = Qi.get(Vi[S.time_range]);
+        return K ? K.display : (console.warn("Did not recognize the given relative time range:", S.time_range), S.time_range);
+      } else if ((S == null ? void 0 : S.type) === "absolute") {
+        const K = S.tz || "Etc/UTC";
+        return `${qt(S.start, { short: !0, tz: K })} - ${qt(S.end, { short: !0, tz: K })}`;
       }
       return null;
-    }), Rt = w(() => le.value ? !1 : [
-      !!q.value,
+    }), Rt = w(() => te.value ? !1 : [
+      !!I.value,
       yi.value,
-      !!ut.value,
+      !!ht.value,
       vi.value,
       s.showRefresh
-    ].some(Boolean)), kt = w(() => m.value ? dt(m.value.meta.granularity_ms) : void 0), wi = w(() => ["timeseries_line", "timeseries_bar"].includes(v.value.type)), Tt = w(() => {
-      if (oe(s.definition) || !wi.value || !s.queryReady || z.value)
+    ].some(Boolean)), kt = w(() => g.value ? ct(g.value.meta.granularity_ms) : void 0), wi = w(() => ["timeseries_line", "timeseries_bar"].includes(v.value.type)), Tt = w(() => {
+      if (le(s.definition) || !wi.value || !s.queryReady || R.value)
         return !1;
-      const x = s.definition.query.granularity;
-      return !x || !kt.value ? !1 : x !== kt.value;
+      const E = s.definition.query.granularity;
+      return !E || !kt.value ? !1 : E !== kt.value;
     }), Ei = w(() => {
       var G;
-      const x = dt(((G = m.value) == null ? void 0 : G.meta.granularity_ms) ?? 0) ?? "unknown", T = oe(s.definition) ? "unknown" : s.definition.query.granularity ?? "unknown";
+      const E = ct(((G = g.value) == null ? void 0 : G.meta.granularity_ms) ?? 0) ?? "unknown", S = le(s.definition) ? "unknown" : s.definition.query.granularity ?? "unknown";
       return f.t("query_aged_out_warning", {
-        currentGranularity: f.t(`granularities.${x}`),
-        savedGranularity: f.t(`granularities.${T}`)
+        currentGranularity: f.t(`granularities.${E}`),
+        savedGranularity: f.t(`granularities.${S}`)
       });
     }), xi = w(() => {
-      const x = s.definition, T = [...s.context.filters, ...x.query.filters ?? []], G = "metrics" in x.query ? x.query.metrics : void 0, W = x.query.datasource ?? "api_usage";
-      return u.value({
-        datasource: W,
-        filters: T,
+      const E = s.definition, S = [...s.context.filters, ...E.query.filters ?? []], G = "metrics" in E.query ? E.query.metrics : void 0, K = E.query.datasource ?? "api_usage";
+      return l.value({
+        datasource: K,
+        filters: S,
         queryFields: G
       });
     }), Ci = () => {
@@ -1551,216 +1557,221 @@ const ae = {
       n("duplicate-tile", s.definition);
     }, ki = () => {
       n("remove-tile", s.definition);
-    }, Ti = (x) => {
-      m.value = x, z.value = !1, n("chart-data", x);
-    }, Si = (x) => {
-      z.value = x;
-    }, Di = () => {
+    }, Ti = (E) => {
+      g.value = E, R.value = !1, n("chart-data", E);
+    }, Si = () => {
+      R.value = !1;
+    }, Di = (E) => {
+      R.value = E;
+    }, zi = () => {
       y.value = !1;
     }, St = () => {
-      var G, W;
-      const x = (G = s.definition.query.datasource) == null ? void 0 : G.startsWith("goap");
-      return ((W = l == null ? void 0 : l.staticConfig) == null ? void 0 : W.increaseCsvExportLimit) !== !1 && !x ? lt(s.definition.query, s.context, Vi) : m.value ? Promise.resolve(m.value) : new Promise((Ne) => {
-        const me = Oe(m, (Ce) => {
-          Ce && (Ne(Ce), me());
+      var G, K;
+      const E = (G = s.definition.query.datasource) == null ? void 0 : G.startsWith("goap");
+      return ((K = u == null ? void 0 : u.staticConfig) == null ? void 0 : K.increaseCsvExportLimit) !== !1 && !E ? ut(s.definition.query, s.context, Yi) : g.value ? Promise.resolve(g.value) : new Promise((Ne) => {
+        const ye = Oe(g, (Ce) => {
+          Ce && (Ne(Ce), ye());
         });
       });
-    }, zi = async () => {
+    }, Ni = async () => {
       y.value = !0, p.value = { status: "loading" };
       try {
-        const x = await St();
-        p.value = { status: "success", chartData: x };
-      } catch (x) {
-        p.value = { status: "error", error: x };
+        const E = await St();
+        p.value = { status: "success", chartData: E };
+      } catch (E) {
+        p.value = { status: "error", error: E };
       }
-    }, Ni = (x) => {
-      const T = {
+    }, Li = (E) => {
+      const S = {
         tileId: s.tileId.toString(),
-        timeRange: x
+        timeRange: E
       };
-      n("tile-time-range-zoom", T);
-    }, Li = (x) => {
-      const T = {
+      n("tile-time-range-zoom", S);
+    }, Ai = (E) => {
+      const S = {
         tileId: s.tileId.toString(),
-        bounds: x
+        bounds: E
       };
-      n("tile-bounds-change", T);
-    }, Ai = (x) => {
-      const T = xi.value, G = F(x, T);
-      N.value = Q.value ? { href: P(G) } : void 0, D.value = I.value ? { href: V(at(x, T)) } : void 0;
+      n("tile-bounds-change", S);
+    }, Oi = (E) => {
+      const S = xi.value, G = F(E, S);
+      N.value = V.value ? { href: P(G) } : void 0, z.value = H.value ? { href: Y(lt(E, S)) } : void 0;
     };
-    return e({ getExportData: St }), (x, T) => {
-      const G = ue("KTooltip"), W = ue("KBadge"), Ne = ue("KButton"), me = ue("KDropdownItem"), Ce = ue("KDropdown");
-      return C(), B("div", {
+    return e({ getExportData: St }), (E, S) => {
+      const G = he("KTooltip"), K = he("KBadge"), Ne = he("KButton"), ye = he("KDropdownItem"), Ce = he("KDropdown");
+      return x(), B("div", {
         class: ze(["tile-boundary", {
           editable: o.context.editable,
           headless: !Rt.value
         }]),
         "data-testid": `tile-${o.tileId}`
       }, [
-        Rt.value && !le.value ? (C(), B("div", lr, [
-          fe(G, {
+        Rt.value && !te.value ? (x(), B("div", ur, [
+          ge(G, {
             class: "title-tooltip",
-            disabled: !k.value,
+            disabled: !T.value,
             "max-width": "500",
-            text: q.value
+            text: I.value
           }, {
             default: M(() => [
-              te("div", {
+              se("div", {
                 ref_key: "titleRef",
-                ref: g,
+                ref: m,
                 class: "title"
-              }, J(q.value), 513)
+              }, J(I.value), 513)
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          te("div", ur, [
-            ut.value ? (C(), O(W, {
+          se("div", hr, [
+            ht.value ? (x(), O(K, {
               key: 0,
               "data-testid": "time-range-badge",
               tooltip: Tt.value ? Ei.value : void 0,
               "tooltip-attributes": { maxWidth: "320px" }
-            }, rt({
+            }, ot({
               default: M(() => [
-                te("span", hr, J(ut.value), 1)
+                se("span", dr, J(ht.value), 1)
               ]),
               _: 2
             }, [
               Tt.value ? {
                 name: "icon",
                 fn: M(() => [
-                  fe(E(ns), {
-                    size: `var(--kui-icon-size-20, ${E(nr)})`
+                  ge(C(os), {
+                    size: `var(--kui-icon-size-20, ${C(or)})`
                   }, null, 8, ["size"])
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["tooltip"])) : X("", !0)
           ]),
-          o.showRefresh ? (C(), B("div", dr, [
-            fe(Ne, {
+          o.showRefresh ? (x(), B("div", cr, [
+            ge(Ne, {
               appearance: "secondary",
               class: "refresh-button",
               "data-testid": `tile-refresh-button-${o.tileId}`,
-              disabled: z.value,
+              disabled: R.value,
               icon: "",
               size: "small",
               onClick: a
             }, {
               default: M(() => [
-                z.value ? (C(), O(E(os), {
+                R.value ? (x(), O(C(as), {
                   key: 0,
                   role: "button",
-                  size: `var(--kui-icon-size-60, ${E(jt)})`,
+                  size: `var(--kui-icon-size-60, ${C(jt)})`,
                   tabindex: "0"
-                }, null, 8, ["size"])) : (C(), O(E(as), {
+                }, null, 8, ["size"])) : (x(), O(C(ls), {
                   key: 1,
                   role: "button",
-                  size: `var(--kui-icon-size-60, ${E(jt)})`,
+                  size: `var(--kui-icon-size-60, ${C(jt)})`,
                   tabindex: "0"
                 }, null, 8, ["size"]))
               ]),
               _: 1
             }, 8, ["data-testid", "disabled"])
           ])) : X("", !0),
-          we.value ? (C(), B("div", {
+          Ee.value ? (x(), B("div", {
             key: 1,
             class: "tile-actions",
             "data-testid": `tile-actions-${o.tileId}`
           }, [
-            we.value && o.context.editable && !o.isFullscreen ? (C(), O(E(ls), {
+            Ee.value && o.context.editable && !o.isFullscreen ? (x(), O(C(us), {
               key: 0,
               class: "edit-icon",
-              color: `var(--kui-color-text-neutral, ${E(Vt)})`,
+              color: `var(--kui-color-text-neutral, ${C(Vt)})`,
               "data-testid": `edit-tile-${o.tileId}`,
-              size: `var(--kui-icon-size-40, ${E(Yt)})`,
+              size: `var(--kui-icon-size-40, ${C(Yt)})`,
               onClick: Ci
             }, null, 8, ["color", "data-testid", "size"])) : X("", !0),
-            we.value && We.value && !o.isFullscreen ? (C(), O(Ce, {
+            Ee.value && Qe.value && !o.isFullscreen ? (x(), O(Ce, {
               key: 1,
               class: "dropdown",
               "data-testid": `chart-action-menu-${o.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
               items: M(() => [
-                E(Y) ? (C(), O(me, {
+                C(W) ? (x(), O(ye, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${o.tileId}`,
-                  item: { label: E(f).t("jumpToExplore"), to: E(Y) }
+                  item: { label: C(f).t("jumpToExplore"), to: C(W) }
                 }, null, 8, ["data-testid", "item"])) : X("", !0),
-                !E(oe)(o.definition) && E(ve) ? (C(), O(me, {
+                !C(le)(o.definition) && C(pe) ? (x(), O(ye, {
                   key: 1,
                   "data-testid": `chart-jump-to-requests-${o.tileId}`,
-                  item: { label: E(f).t("jumpToRequests"), to: E(ve) }
+                  item: { label: C(f).t("jumpToRequests"), to: C(pe) }
                 }, null, 8, ["data-testid", "item"])) : X("", !0),
-                xe.value ? (C(), O(me, {
+                ie.value ? (x(), O(ye, {
                   key: 2,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${o.tileId}`,
-                  onClick: zi
+                  onClick: Ni
                 }, {
                   default: M(() => [
-                    te("span", {
+                    se("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${o.tileId}`
-                    }, J(E(f).t("csvExport.exportAsCsv")), 9, fr)
+                    }, J(C(f).t("csvExport.exportAsCsv")), 9, gr)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : X("", !0),
-                o.context.editable ? (C(), O(me, {
+                o.context.editable ? (x(), O(ye, {
                   key: 3,
                   "data-testid": `duplicate-tile-${o.tileId}`,
                   onClick: Ri
                 }, {
                   default: M(() => [
-                    gt(J(E(f).t("renderer.duplicateTile")), 1)
+                    mt(J(C(f).t("renderer.duplicateTile")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : X("", !0),
-                o.context.editable ? (C(), O(me, {
+                o.context.editable ? (x(), O(ye, {
                   key: 4,
                   "data-testid": `remove-tile-${o.tileId}`,
                   onClick: ki
                 }, {
                   default: M(() => [
-                    te("span", gr, J(E(f).t("renderer.delete")), 1)
+                    se("span", mr, J(C(f).t("renderer.delete")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : X("", !0)
               ]),
               default: M(() => [
-                fe(E(us), {
+                ge(C(hs), {
                   class: "kebab-action-menu",
-                  color: `var(--kui-color-text-neutral, ${E(Vt)})`,
+                  color: `var(--kui-color-text-neutral, ${C(Vt)})`,
                   "data-testid": `kebab-action-menu-${o.tileId}`,
-                  size: `var(--kui-icon-size-40, ${E(Yt)})`
+                  size: `var(--kui-icon-size-40, ${C(Yt)})`
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
             }, 8, ["data-testid"])) : X("", !0)
-          ], 8, cr)) : A.value ? (C(), B("div", {
+          ], 8, fr)) : q.value ? (x(), B("div", {
             key: 2,
             class: "header-description",
             "data-testid": `tile-description-${o.tileId}`
-          }, J(A.value), 9, mr)) : X("", !0),
-          y.value ? (C(), O(E(Ji), {
+          }, J(q.value), 9, pr)) : X("", !0),
+          y.value ? (x(), O(C(es), {
             key: 3,
             "data-testid": `csv-export-modal-${o.tileId}`,
             "export-state": p.value,
-            filename: Ue.value,
-            onCloseModal: Di
+            filename: Ke.value,
+            onCloseModal: zi
           }, null, 8, ["data-testid", "export-state", "filename"])) : X("", !0)
         ])) : X("", !0),
-        te("div", {
+        se("div", {
           class: ze(["tile-content", `type-${o.tileType}-${v.value.type}`]),
           "data-testid": `tile-content-${o.tileId}`
         }, [
-          Ee.value ? (C(), O(si(Ee.value.component), ei({ key: 0 }, Ee.value.rendererProps, Wi(bi.value), { onChartData: Ti }), null, 16)) : X("", !0)
-        ], 10, pr)
-      ], 10, ar);
+          xe.value ? (x(), O(si(xe.value.component), ei({ key: 0 }, xe.value.rendererProps, Ki(bi.value), {
+            onChartData: Ti,
+            onQueryComplete: Si
+          }), null, 16)) : X("", !0)
+        ], 10, yr)
+      ], 10, lr);
     };
   }
-}), mi = /* @__PURE__ */ be(yr, [["__scopeId", "data-v-ca900eba"]]), vr = (o, e) => {
+}), mi = /* @__PURE__ */ we(vr, [["__scopeId", "data-v-8217fef4"]]), _r = (o, e) => {
   let t = 0;
   const i = /* @__PURE__ */ new Map();
   e.forEach((r) => {
@@ -1771,18 +1782,18 @@ const ae = {
   for (let r = 0; r < t; r++)
     i.get(r) ? s.push("auto") : s.push(`${o}px`);
   return s;
-}, _r = /* @__PURE__ */ ee({
+}, br = /* @__PURE__ */ ee({
   __name: "GridLayout",
   props: {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => Ge
+      default: () => We
     },
     columns: {
       type: Number,
       required: !1,
-      default: () => _t
+      default: () => bt
     },
     tiles: {
       type: Array,
@@ -1790,21 +1801,21 @@ const ae = {
     }
   },
   setup(o) {
-    pt((n) => ({
+    yt((n) => ({
       v821fda82: e.columns,
       v0870d42d: r.value
     }));
-    const e = o, t = H(null), i = H(0), s = new ResizeObserver((n) => {
+    const e = o, t = A(null), i = A(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    st(() => {
+    nt(() => {
       t.value && s.observe(t.value);
-    }), Fe(() => {
+    }), Ge(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = w(() => vr(e.tileHeight, e.tiles).join(" ")), a = w(() => e.tiles.map((n, d) => ({
+    const r = w(() => _r(e.tileHeight, e.tiles).join(" ")), a = w(() => e.tiles.map((n, d) => ({
       key: `tile-${d}`,
       tile: n,
       style: {
@@ -1814,27 +1825,27 @@ const ae = {
         "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (n, d) => (C(), B("div", {
+    return (n, d) => (x(), B("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (C(!0), B(mt, null, ri(a.value, (l) => (C(), B("div", {
-        key: l.key,
+      (x(!0), B(pt, null, ri(a.value, (u) => (x(), B("div", {
+        key: u.key,
         class: ze(["grid-cell", {
-          "empty-cell": !l.tile
+          "empty-cell": !u.tile
         }]),
-        style: Ye(l.style)
+        style: Xe(u.style)
       }, [
         He(n.$slots, "tile", {
-          style: Ye(l.style),
-          tile: l.tile
+          style: Xe(u.style),
+          tile: u.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), br = /* @__PURE__ */ be(_r, [["__scopeId", "data-v-0271a8b9"]]);
-function wr(o, e, t, i, s) {
+}), wr = /* @__PURE__ */ we(br, [["__scopeId", "data-v-0271a8b9"]]);
+function Er(o, e, t, i, s) {
   const r = (...a) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + s + " and has been replaced with `" + i + "`. It will be **removed** in a future release"), e.apply(o, a));
   return r.prototype = e.prototype, r;
 }
@@ -2043,8 +2054,8 @@ class c {
     if (s.top < 0 || s.bottom > r) {
       const a = s.bottom - r, n = s.top, d = this.getScrollElement(e);
       if (d !== null) {
-        const l = d.scrollTop;
-        s.top < 0 && i < 0 ? e.offsetHeight > r ? d.scrollTop += i : d.scrollTop += Math.abs(n) > Math.abs(i) ? i : n : i > 0 && (e.offsetHeight > r ? d.scrollTop += i : d.scrollTop += a > i ? i : a), t.top += d.scrollTop - l;
+        const u = d.scrollTop;
+        s.top < 0 && i < 0 ? e.offsetHeight > r ? d.scrollTop += i : d.scrollTop += Math.abs(n) > Math.abs(i) ? i : n : i > 0 && (e.offsetHeight > r ? d.scrollTop += i : d.scrollTop += a > i ? i : a), t.top += d.scrollTop - u;
       }
     }
   }
@@ -2056,8 +2067,8 @@ class c {
    * @param distance Distance from the V edges to start scrolling
    */
   static updateScrollResize(e, t, i) {
-    const s = this.getScrollElement(t), r = s.clientHeight, a = s === this.getScrollElement() ? 0 : s.getBoundingClientRect().top, n = e.clientY - a, d = n < i, l = n > r - i;
-    d ? s.scrollBy({ behavior: "smooth", top: n - i }) : l && s.scrollBy({ behavior: "smooth", top: i - (r - n) });
+    const s = this.getScrollElement(t), r = s.clientHeight, a = s === this.getScrollElement() ? 0 : s.getBoundingClientRect().top, n = e.clientY - a, d = n < i, u = n > r - i;
+    d ? s.scrollBy({ behavior: "smooth", top: n - i }) : u && s.scrollBy({ behavior: "smooth", top: i - (r - n) });
   }
   /** single level clone, returning a new object with same top fields. This will share sub objects and arrays */
   static clone(e) {
@@ -2174,7 +2185,7 @@ class c {
     return !(!e || e.w === e.h || e.locked || e.noResize || (t = e.grid) != null && t.opts.disableResize || e.minW && e.minW === e.maxW || e.minH && e.minH === e.maxH);
   }
 }
-class de {
+class ce {
   constructor(e = {}) {
     this.addedNodes = [], this.removedNodes = [], this.defaultColumn = 12, this.column = e.column || this.defaultColumn, this.column > this.defaultColumn && (this.defaultColumn = this.column), this.maxRow = e.maxRow, this._float = e.float, this.nodes = e.nodes || [], this.onChange = e.onChange;
   }
@@ -2200,15 +2211,15 @@ class de {
     for (; i = i || this.collide(e, r, s.skip); ) {
       if (d++ > this.nodes.length * 2)
         throw new Error("Infinite collide check");
-      let l;
+      let u;
       if (i.locked || this._loading || e._moving && !e._skipDown && t.y > e.y && !this.float && // can take space we had, or before where we're going
       (!this.collide(i, { ...i, y: e.y }, e) || !this.collide(i, { ...i, y: t.y - i.h }, e))) {
         e._skipDown = e._skipDown || t.y > e.y;
         const h = { ...t, y: i.y + i.h, ...n };
-        l = this._loading && c.samePos(e, h) ? !0 : this.moveNode(e, h), (i.locked || this._loading) && l ? c.copyPos(t, e) : !i.locked && l && s.pack && (this._packNodes(), t.y = i.y + i.h, c.copyPos(e, t)), a = a || l;
+        u = this._loading && c.samePos(e, h) ? !0 : this.moveNode(e, h), (i.locked || this._loading) && u ? c.copyPos(t, e) : !i.locked && u && s.pack && (this._packNodes(), t.y = i.y + i.h, c.copyPos(e, t)), a = a || u;
       } else
-        l = this.moveNode(i, { ...i, y: t.y + t.h, skip: e, ...n });
-      if (!l)
+        u = this.moveNode(i, { ...i, y: t.y + t.h, skip: e, ...n });
+      if (!u)
         return a;
       i = void 0;
     }
@@ -2233,10 +2244,10 @@ class de {
     for (let d of i) {
       if (d.locked || !d._rect)
         break;
-      const l = d._rect;
-      let h = Number.MAX_VALUE, u = Number.MAX_VALUE;
-      s.y < l.y ? h = (r.y + r.h - l.y) / l.h : s.y + s.h > l.y + l.h && (h = (l.y + l.h - r.y) / l.h), s.x < l.x ? u = (r.x + r.w - l.x) / l.w : s.x + s.w > l.x + l.w && (u = (l.x + l.w - r.x) / l.w);
-      const f = Math.min(u, h);
+      const u = d._rect;
+      let h = Number.MAX_VALUE, l = Number.MAX_VALUE;
+      s.y < u.y ? h = (r.y + r.h - u.y) / u.h : s.y + s.h > u.y + u.h && (h = (u.y + u.h - r.y) / u.h), s.x < u.x ? l = (r.x + r.w - u.x) / u.w : s.x + s.w > u.x + u.w && (l = (u.x + u.w - r.x) / u.w);
+      const f = Math.min(l, h);
       f > n && (n = f, a = d);
     }
     return t.collide = a, a;
@@ -2312,8 +2323,8 @@ class de {
     s || (this._inColumnResize = !0);
     const r = this.nodes;
     return this.nodes = [], r.forEach((a, n, d) => {
-      let l;
-      a.locked || (a.autoPosition = !0, e === "list" && n && (l = d[n - 1])), this.addNode(a, !1, l);
+      let u;
+      a.locked || (a.autoPosition = !0, e === "list" && n && (u = d[n - 1])), this.addNode(a, !1, u);
     }), s || delete this._inColumnResize, i || this.batchUpdate(!1), this;
   }
   /** enable/disable floating widgets (default: `false`) See [example](http://gridstackjs.com/demo/float.html) */
@@ -2352,7 +2363,7 @@ class de {
    * @param resizing if out of bound, resize down or move into the grid to fit ?
    */
   prepareNode(e, t) {
-    e._id = e._id ?? de._idSeq++;
+    e._id = e._id ?? ce._idSeq++;
     const i = e.id;
     if (i) {
       let r = 1;
@@ -2411,11 +2422,11 @@ class de {
     const r = s ? s.y * i + (s.x + s.w) : 0;
     let a = !1;
     for (let n = r; !a; ++n) {
-      const d = n % i, l = Math.floor(n / i);
+      const d = n % i, u = Math.floor(n / i);
       if (d + e.w > i)
         continue;
-      const h = { x: d, y: l, w: e.w, h: e.h };
-      t.find((u) => c.isIntercepted(h, u)) || ((e.x !== d || e.y !== l) && (e._dirty = !0), e.x = d, e.y = l, delete e.autoPosition, a = !0);
+      const h = { x: d, y: u, w: e.w, h: e.h };
+      t.find((l) => c.isIntercepted(h, l)) || ((e.x !== d || e.y !== u) && (e._dirty = !0), e.x = d, e.y = u, delete e.autoPosition, a = !0);
     }
     return a;
   }
@@ -2447,7 +2458,7 @@ class de {
     if (t.pack = !0, !this.maxRow)
       return this.moveNode(e, t);
     let i;
-    const s = new de({
+    const s = new ce({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((a) => a._id === e._id ? (i = { ...a }, i) : { ...a })
@@ -2469,7 +2480,7 @@ class de {
   willItFit(e) {
     if (delete e._willFitPos, !this.maxRow)
       return !0;
-    const t = new de({
+    const t = new ce({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((s) => ({ ...s }))
@@ -2482,7 +2493,7 @@ class de {
   }
   /** return true if the passed in node was actually moved (checks for no-op and locked) */
   moveNode(e, t) {
-    var l, h;
+    var u, h;
     if (!e || /*node.locked ||*/
     !t)
       return !1;
@@ -2494,11 +2505,11 @@ class de {
     const a = c.copyPos({}, e), n = this.collideAll(e, r, t.skip);
     let d = !0;
     if (n.length) {
-      const u = e._moving && !t.nested;
-      let f = u ? this.directionCollideCoverage(e, t, n) : n[0];
-      if (u && f && ((h = (l = e.grid) == null ? void 0 : l.opts) != null && h.subGridDynamic) && !e.grid._isTemp) {
-        const m = c.areaIntercept(t.rect, f._rect), p = c.area(t.rect), y = c.area(f._rect);
-        m / (p < y ? p : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
+      const l = e._moving && !t.nested;
+      let f = l ? this.directionCollideCoverage(e, t, n) : n[0];
+      if (l && f && ((h = (u = e.grid) == null ? void 0 : u.opts) != null && h.subGridDynamic) && !e.grid._isTemp) {
+        const g = c.areaIntercept(t.rect, f._rect), p = c.area(t.rect), y = c.area(f._rect);
+        g / (p < y ? p : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
       }
       f ? d = !this._fixCollisions(e, r, f, t) : (d = !1, i && delete t.pack);
     }
@@ -2520,8 +2531,8 @@ class de {
     var a;
     const i = (a = this._layouts) == null ? void 0 : a.length, s = i && this.column !== i - 1 ? this._layouts[i - 1] : null, r = [];
     return this.sortNodes(), this.nodes.forEach((n) => {
-      const d = s == null ? void 0 : s.find((h) => h._id === n._id), l = { ...n, ...d || {} };
-      c.removeInternalForSave(l, !e), t && t(n, l), r.push(l);
+      const d = s == null ? void 0 : s.find((h) => h._id === n._id), u = { ...n, ...d || {} };
+      c.removeInternalForSave(u, !e), t && t(n, u), r.push(u);
     }), r;
   }
   /** @internal called whenever a node is added or moved - updates the cached layouts */
@@ -2560,19 +2571,19 @@ class de {
     s && this.sortNodes(1), t < e && this.cacheLayout(this.nodes, e), this.batchUpdate();
     let r = [], a = s ? this.nodes : c.sort(this.nodes, -1);
     if (t > e && this._layouts) {
-      const d = this._layouts[t] || [], l = this._layouts.length - 1;
-      !d.length && e !== l && ((n = this._layouts[l]) != null && n.length) && (e = l, this._layouts[l].forEach((h) => {
-        const u = a.find((f) => f._id === h._id);
-        u && (!s && !h.autoPosition && (u.x = h.x ?? u.x, u.y = h.y ?? u.y), u.w = h.w ?? u.w, (h.x == null || h.y === void 0) && (u.autoPosition = !0));
+      const d = this._layouts[t] || [], u = this._layouts.length - 1;
+      !d.length && e !== u && ((n = this._layouts[u]) != null && n.length) && (e = u, this._layouts[u].forEach((h) => {
+        const l = a.find((f) => f._id === h._id);
+        l && (!s && !h.autoPosition && (l.x = h.x ?? l.x, l.y = h.y ?? l.y), l.w = h.w ?? l.w, (h.x == null || h.y === void 0) && (l.autoPosition = !0));
       })), d.forEach((h) => {
-        const u = a.findIndex((f) => f._id === h._id);
-        if (u !== -1) {
-          const f = a[u];
+        const l = a.findIndex((f) => f._id === h._id);
+        if (l !== -1) {
+          const f = a[l];
           if (s) {
             f.w = h.w;
             return;
           }
-          (h.autoPosition || isNaN(h.x) || isNaN(h.y)) && this.findEmptyPosition(h, r), h.autoPosition || (f.x = h.x ?? f.x, f.y = h.y ?? f.y, f.w = h.w ?? f.w, r.push(f)), a.splice(u, 1);
+          (h.autoPosition || isNaN(h.x) || isNaN(h.y)) && this.findEmptyPosition(h, r), h.autoPosition || (f.x = h.x ?? f.x, f.y = h.y ?? f.y, f.w = h.w ?? f.w, r.push(f)), a.splice(l, 1);
         }
       });
     }
@@ -2583,9 +2594,9 @@ class de {
         if (typeof i == "function")
           i(t, e, r, a);
         else {
-          const d = s || i === "none" ? 1 : t / e, l = i === "move" || i === "moveScale", h = i === "scale" || i === "moveScale";
-          a.forEach((u) => {
-            u.x = t === 1 ? 0 : l ? Math.round(u.x * d) : Math.min(u.x, t - 1), u.w = t === 1 || e === 1 ? 1 : h ? Math.round(u.w * d) || 1 : Math.min(u.w, t), r.push(u);
+          const d = s || i === "none" ? 1 : t / e, u = i === "move" || i === "moveScale", h = i === "scale" || i === "moveScale";
+          a.forEach((l) => {
+            l.x = t === 1 ? 0 : u ? Math.round(l.x * d) : Math.min(l.x, t - 1), l.w = t === 1 || e === 1 ? 1 : h ? Math.round(l.w * d) || 1 : Math.min(l.w, t), r.push(l);
           }), a = [];
         }
       r = c.sort(r, -1), this._inColumnResize = !0, this.nodes = [], r.forEach((d) => {
@@ -2605,7 +2616,7 @@ class de {
     return e.forEach((r, a) => {
       if (r._id === void 0) {
         const n = r.id ? this.nodes.find((d) => d.id === r.id) : void 0;
-        r._id = (n == null ? void 0 : n._id) ?? de._idSeq++;
+        r._id = (n == null ? void 0 : n._id) ?? ce._idSeq++;
       }
       s[a] = { x: r.x, y: r.y, w: r.w, _id: r._id };
     }), this._layouts = i ? [] : this._layouts || [], this._layouts[t] = s, this;
@@ -2616,7 +2627,7 @@ class de {
    * @param column corresponding column index to save it under
    */
   cacheOneLayout(e, t) {
-    e._id = e._id ?? de._idSeq++;
+    e._id = e._id ?? ce._idSeq++;
     const i = { x: e.x, y: e.y, w: e.w, _id: e._id };
     (e.autoPosition || e.x === void 0) && (delete i.x, delete i.y, e.autoPosition && (i.autoPosition = !0)), this._layouts = this._layouts || [], this._layouts[t] = this._layouts[t] || [];
     const s = this.findCacheLayout(e, t);
@@ -2640,8 +2651,8 @@ class de {
     return this;
   }
 }
-de._idSeq = 0;
-const ie = {
+ce._idSeq = 0;
+const re = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
   auto: !0,
@@ -2671,57 +2682,57 @@ const ie = {
   // styleInHead: false,
   //removable
 };
-class R {
+class k {
 }
-const he = typeof window < "u" && typeof document < "u" && ("ontouchstart" in document || "ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
-class ce {
+const de = typeof window < "u" && typeof document < "u" && ("ontouchstart" in document || "ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
+class fe {
 }
-function Xe(o, e) {
+function Je(o, e) {
   o.touches.length > 1 || (o.cancelable && o.preventDefault(), c.simulateMouseEvent(o.changedTouches[0], e));
 }
 function pi(o, e) {
   o.cancelable && o.preventDefault(), c.simulateMouseEvent(o, e);
 }
-function Ze(o) {
-  ce.touchHandled || (ce.touchHandled = !0, Xe(o, "mousedown"));
+function et(o) {
+  fe.touchHandled || (fe.touchHandled = !0, Je(o, "mousedown"));
 }
-function Je(o) {
-  ce.touchHandled && Xe(o, "mousemove");
+function tt(o) {
+  fe.touchHandled && Je(o, "mousemove");
 }
-function et(o) {
-  if (!ce.touchHandled)
+function it(o) {
+  if (!fe.touchHandled)
     return;
-  ce.pointerLeaveTimeout && (window.clearTimeout(ce.pointerLeaveTimeout), delete ce.pointerLeaveTimeout);
-  const e = !!R.dragElement;
-  Xe(o, "mouseup"), e || Xe(o, "click"), ce.touchHandled = !1;
+  fe.pointerLeaveTimeout && (window.clearTimeout(fe.pointerLeaveTimeout), delete fe.pointerLeaveTimeout);
+  const e = !!k.dragElement;
+  Je(o, "mouseup"), e || Je(o, "click"), fe.touchHandled = !1;
 }
-function tt(o) {
+function st(o) {
   o.pointerType !== "mouse" && o.target.releasePointerCapture(o.pointerId);
 }
 function Xt(o) {
-  R.dragElement && o.pointerType !== "mouse" && pi(o, "mouseenter");
+  k.dragElement && o.pointerType !== "mouse" && pi(o, "mouseenter");
 }
 function Zt(o) {
-  R.dragElement && o.pointerType !== "mouse" && (ce.pointerLeaveTimeout = window.setTimeout(() => {
-    delete ce.pointerLeaveTimeout, pi(o, "mouseleave");
+  k.dragElement && o.pointerType !== "mouse" && (fe.pointerLeaveTimeout = window.setTimeout(() => {
+    delete fe.pointerLeaveTimeout, pi(o, "mouseleave");
   }, 10));
 }
-class ot {
+class at {
   constructor(e, t, i) {
     this.host = e, this.dir = t, this.option = i, this.moving = !1, this._mouseDown = this._mouseDown.bind(this), this._mouseMove = this._mouseMove.bind(this), this._mouseUp = this._mouseUp.bind(this), this._keyEvent = this._keyEvent.bind(this), this._init();
   }
   /** @internal */
   _init() {
     const e = this.el = document.createElement("div");
-    return e.classList.add("ui-resizable-handle"), e.classList.add(`${ot.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), he && (this.el.addEventListener("touchstart", Ze), this.el.addEventListener("pointerdown", tt)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${at.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), de && (this.el.addEventListener("touchstart", et), this.el.addEventListener("pointerdown", st)), this;
   }
   /** call this when resize handle needs to be removed and cleaned up */
   destroy() {
-    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), he && (this.el.removeEventListener("touchstart", Ze), this.el.removeEventListener("pointerdown", tt)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), de && (this.el.removeEventListener("touchstart", et), this.el.removeEventListener("pointerdown", st)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
   }
   /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
   _mouseDown(e) {
-    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), he && (this.el.addEventListener("touchmove", Je), this.el.addEventListener("touchend", et)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), de && (this.el.addEventListener("touchmove", tt), this.el.addEventListener("touchend", it)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -2730,7 +2741,7 @@ class ot {
   }
   /** @internal */
   _mouseUp(e) {
-    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), he && (this.el.removeEventListener("touchmove", Je), this.el.removeEventListener("touchend", et)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), de && (this.el.removeEventListener("touchmove", tt), this.el.removeEventListener("touchend", it)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -2742,7 +2753,7 @@ class ot {
     return this.option[e] && this.option[e](t), this;
   }
 }
-ot.prefix = "ui-resizable-";
+at.prefix = "ui-resizable-";
 class xt {
   constructor() {
     this._eventRegister = {};
@@ -2771,7 +2782,7 @@ class xt {
       return this._eventRegister[e](t);
   }
 }
-class Ie extends xt {
+class qe extends xt {
   // have to be public else complains for HTMLElementExtendOpt ?
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this.rectScale = { x: 1, y: 1 }, this._ui = () => {
@@ -2827,21 +2838,21 @@ class Ie extends xt {
   }
   /** @internal turns auto hide on/off */
   _setupAutoHide(e) {
-    return e ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), R.overResizeElement === this && delete R.overResizeElement), this;
+    return e ? (this.el.classList.add("ui-resizable-autohide"), this.el.addEventListener("mouseover", this._mouseOver), this.el.addEventListener("mouseout", this._mouseOut)) : (this.el.classList.remove("ui-resizable-autohide"), this.el.removeEventListener("mouseover", this._mouseOver), this.el.removeEventListener("mouseout", this._mouseOut), k.overResizeElement === this && delete k.overResizeElement), this;
   }
   /** @internal */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _mouseOver(e) {
-    R.overResizeElement || R.dragElement || (R.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
+    k.overResizeElement || k.dragElement || (k.overResizeElement = this, this.el.classList.remove("ui-resizable-autohide"));
   }
   /** @internal */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   _mouseOut(e) {
-    R.overResizeElement === this && (delete R.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
+    k.overResizeElement === this && (delete k.overResizeElement, this.el.classList.add("ui-resizable-autohide"));
   }
   /** @internal */
   _setupHandlers() {
-    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new ot(this.el, e, {
+    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new at(this.el, e, {
       start: (t) => {
         this._resizeStart(t);
       },
@@ -2872,7 +2883,7 @@ class Ie extends xt {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = Ie._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = qe._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
     const e = this.el.parentElement, t = c.getValuesFromTransformedElement(e);
     return this.rectScale = {
       x: t.xScale,
@@ -2881,7 +2892,7 @@ class Ie extends xt {
   }
   /** @internal */
   _cleanHelper() {
-    return Ie._originStyleProp.forEach((e, t) => {
+    return qe._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -2895,13 +2906,13 @@ class Ie extends xt {
     }, r = e.clientX - i.clientX, a = this.sizeToContent ? 0 : e.clientY - i.clientY;
     let n, d;
     t.indexOf("e") > -1 ? s.width += r : t.indexOf("w") > -1 && (s.width -= r, s.left += r, n = !0), t.indexOf("s") > -1 ? s.height += a : t.indexOf("n") > -1 && (s.height -= a, s.top += a, d = !0);
-    const l = this._constrainSize(s.width, s.height, n, d);
-    return Math.round(s.width) !== Math.round(l.width) && (t.indexOf("w") > -1 && (s.left += s.width - l.width), s.width = l.width), Math.round(s.height) !== Math.round(l.height) && (t.indexOf("n") > -1 && (s.top += s.height - l.height), s.height = l.height), s;
+    const u = this._constrainSize(s.width, s.height, n, d);
+    return Math.round(s.width) !== Math.round(u.width) && (t.indexOf("w") > -1 && (s.left += s.width - u.width), s.width = u.width), Math.round(s.height) !== Math.round(u.height) && (t.indexOf("n") > -1 && (s.top += s.height - u.height), s.height = u.height), s;
   }
   /** @internal constrain the size to the set min/max values */
   _constrainSize(e, t, i, s) {
-    const r = this.option, a = (i ? r.maxWidthMoveLeft : r.maxWidth) || Number.MAX_SAFE_INTEGER, n = r.minWidth / this.rectScale.x || e, d = (s ? r.maxHeightMoveUp : r.maxHeight) || Number.MAX_SAFE_INTEGER, l = r.minHeight / this.rectScale.y || t, h = Math.min(a, Math.max(n, e)), u = Math.min(d, Math.max(l, t));
-    return { width: h, height: u };
+    const r = this.option, a = (i ? r.maxWidthMoveLeft : r.maxWidth) || Number.MAX_SAFE_INTEGER, n = r.minWidth / this.rectScale.x || e, d = (s ? r.maxHeightMoveUp : r.maxHeight) || Number.MAX_SAFE_INTEGER, u = r.minHeight / this.rectScale.y || t, h = Math.min(a, Math.max(n, e)), l = Math.min(d, Math.max(u, t));
+    return { width: h, height: l };
   }
   /** @internal */
   _applyChange() {
@@ -2920,9 +2931,9 @@ class Ie extends xt {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-Ie._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const Er = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class qe extends xt {
+qe._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const xr = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class Me extends xt {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -2942,12 +2953,12 @@ class qe extends xt {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), he && (e.addEventListener("touchstart", Ze), e.addEventListener("pointerdown", tt));
+      e.addEventListener("mousedown", this._mouseDown), de && (e.addEventListener("touchstart", et), e.addEventListener("pointerdown", st));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), he && (t.removeEventListener("touchstart", Ze), t.removeEventListener("pointerdown", tt));
+      t.removeEventListener("mousedown", this._mouseDown), de && (t.removeEventListener("touchstart", et), t.removeEventListener("pointerdown", st));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -2958,8 +2969,8 @@ class qe extends xt {
   }
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
-    if (!R.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Er) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete R.dragElement, delete R.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), he && (e.currentTarget.addEventListener("touchmove", Je), e.currentTarget.addEventListener("touchend", et)), e.preventDefault(), document.activeElement && document.activeElement.blur(), R.mouseHandled = !0), !0;
+    if (!k.mouseHandled)
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(xr) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete k.dragElement, delete k.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), de && (e.currentTarget.addEventListener("touchmove", tt), e.currentTarget.addEventListener("touchend", it)), e.preventDefault(), document.activeElement && document.activeElement.blur(), k.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -2973,15 +2984,15 @@ class qe extends xt {
     var i;
     const t = this.mouseDownEvent;
     if (this.lastDrag = e, this.dragging)
-      if (this._dragFollow(e), R.pauseDrag) {
-        const s = Number.isInteger(R.pauseDrag) ? R.pauseDrag : 100;
+      if (this._dragFollow(e), k.pauseDrag) {
+        const s = Number.isInteger(k.pauseDrag) ? k.pauseDrag : 100;
         this.dragTimeout && window.clearTimeout(this.dragTimeout), this.dragTimeout = window.setTimeout(() => this._callDrag(e), s);
       } else
         this._callDrag(e);
     else if (Math.abs(e.x - t.x) + Math.abs(e.y - t.y) > 3) {
-      this.dragging = !0, R.dragElement = this;
+      this.dragging = !0, k.dragElement = this;
       const s = (i = this.el.gridstackNode) == null ? void 0 : i.grid;
-      s ? R.dropElement = s.el.ddElement.ddDroppable : delete R.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = c.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
+      s ? k.dropElement = s.el.ddElement.ddDroppable : delete k.dropElement, this.helper = this._createHelper(), this._setupHelperContainmentStyle(), this.dragTransform = c.getValuesFromTransformedElement(this.helperContainment), this.dragOffset = this._getDragOffset(e, this.el, this.helperContainment), this._setupHelperStyle(e);
       const r = c.initEvent(e, { target: this.el, type: "dragstart" });
       this.option.start && this.option.start(r, this.ui()), this.triggerEvent("dragstart", r), document.addEventListener("keydown", this._keyEvent);
     }
@@ -2990,17 +3001,17 @@ class qe extends xt {
   /** @internal call when the mouse gets released to drop the item at current location */
   _mouseUp(e) {
     var t, i;
-    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), he && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Je, !0), e.currentTarget.removeEventListener("touchend", et, !0)), this.dragging) {
-      delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = R.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete R.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), de && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", tt, !0), e.currentTarget.removeEventListener("touchend", it, !0)), this.dragging) {
+      delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = k.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete k.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
       const s = c.initEvent(e, { target: this.el, type: "dragstop" });
-      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), R.dropElement && R.dropElement.drop(e);
+      this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), k.dropElement && k.dropElement.drop(e);
     }
-    delete this.helper, delete this.mouseDownEvent, delete R.dragElement, delete R.dropElement, delete R.mouseHandled, e.preventDefault();
+    delete this.helper, delete this.mouseDownEvent, delete k.dragElement, delete k.dropElement, delete k.mouseHandled, e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel, R to rotate */
   _keyEvent(e) {
     var s, r;
-    const t = this.el.gridstackNode, i = (t == null ? void 0 : t.grid) || ((r = (s = R.dropElement) == null ? void 0 : s.el) == null ? void 0 : r.gridstack);
+    const t = this.el.gridstackNode, i = (t == null ? void 0 : t.grid) || ((r = (s = k.dropElement) == null ? void 0 : s.el) == null ? void 0 : r.gridstack);
     if (e.key === "Escape")
       t && t._origRotate && (t._orig = t._origRotate, delete t._origRotate), i == null || i.cancelDrag(), this._mouseUp(this.mouseDownEvent);
     else if (t && i && (e.key === "r" || e.key === "R")) {
@@ -3012,7 +3023,7 @@ class qe extends xt {
   /** @internal create a clone copy (or user defined method) of the original drag item if set */
   _createHelper() {
     let e = this.el;
-    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), e.parentElement || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = qe.originStyleProp.map((t) => this.el.style[t]), e;
+    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), e.parentElement || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = Me.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -3029,7 +3040,7 @@ class qe extends xt {
     const e = (t = this.helper) == null ? void 0 : t.gridstackNode;
     if (!(e != null && e._isAboutToRemove) && this.dragElementOriginStyle) {
       const i = this.helper, s = this.dragElementOriginStyle.transition || null;
-      i.style.transition = this.dragElementOriginStyle.transition = "none", qe.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", Me.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -3071,8 +3082,8 @@ class qe extends xt {
     };
   }
 }
-qe.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class xr extends xt {
+Me.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class Cr extends xt {
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this._mouseEnter = this._mouseEnter.bind(this), this._mouseLeave = this._mouseLeave.bind(this), this.enable(), this._setupAccept();
   }
@@ -3083,10 +3094,10 @@ class xr extends xt {
     super.off(e);
   }
   enable() {
-    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), he && (this.el.addEventListener("pointerenter", Xt), this.el.addEventListener("pointerleave", Zt)));
+    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), de && (this.el.addEventListener("pointerenter", Xt), this.el.addEventListener("pointerleave", Zt)));
   }
   disable(e = !1) {
-    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), e || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), he && (this.el.removeEventListener("pointerenter", Xt), this.el.removeEventListener("pointerleave", Zt)));
+    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), e || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), de && (this.el.removeEventListener("pointerenter", Xt), this.el.removeEventListener("pointerleave", Zt)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -3096,20 +3107,20 @@ class xr extends xt {
   }
   /** @internal called when the cursor enters our area - prepare for a possible drop and track leaving */
   _mouseEnter(e) {
-    if (!R.dragElement || !this._canDrop(R.dragElement.el))
+    if (!k.dragElement || !this._canDrop(k.dragElement.el))
       return;
-    e.preventDefault(), e.stopPropagation(), R.dropElement && R.dropElement !== this && R.dropElement._mouseLeave(e, !0), R.dropElement = this;
+    e.preventDefault(), e.stopPropagation(), k.dropElement && k.dropElement !== this && k.dropElement._mouseLeave(e, !0), k.dropElement = this;
     const t = c.initEvent(e, { target: this.el, type: "dropover" });
-    this.option.over && this.option.over(t, this._ui(R.dragElement)), this.triggerEvent("dropover", t), this.el.classList.add("ui-droppable-over");
+    this.option.over && this.option.over(t, this._ui(k.dragElement)), this.triggerEvent("dropover", t), this.el.classList.add("ui-droppable-over");
   }
   /** @internal called when the item is leaving our area, stop tracking if we had moving item */
   _mouseLeave(e, t = !1) {
     var s;
-    if (!R.dragElement || R.dropElement !== this)
+    if (!k.dragElement || k.dropElement !== this)
       return;
     e.preventDefault(), e.stopPropagation();
     const i = c.initEvent(e, { target: this.el, type: "dropout" });
-    if (this.option.out && this.option.out(i, this._ui(R.dragElement)), this.triggerEvent("dropout", i), R.dropElement === this && (delete R.dropElement, !t)) {
+    if (this.option.out && this.option.out(i, this._ui(k.dragElement)), this.triggerEvent("dropout", i), k.dropElement === this && (delete k.dropElement, !t)) {
       let r, a = this.el.parentElement;
       for (; !r && a; )
         r = (s = a.ddElement) == null ? void 0 : s.ddDroppable, a = a.parentElement;
@@ -3120,7 +3131,7 @@ class xr extends xt {
   drop(e) {
     e.preventDefault();
     const t = c.initEvent(e, { target: this.el, type: "drop" });
-    this.option.drop && this.option.drop(t, this._ui(R.dragElement)), this.triggerEvent("drop", t);
+    this.option.drop && this.option.drop(t, this._ui(k.dragElement)), this.triggerEvent("drop", t);
   }
   /** @internal true if element matches the string/method accept option */
   _canDrop(e) {
@@ -3152,25 +3163,25 @@ class Ct {
     return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.off(e) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.off(e) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.off(e), this;
   }
   setupDraggable(e) {
-    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new qe(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new Me(this.el, e), this;
   }
   cleanDraggable() {
     return this.ddDraggable && (this.ddDraggable.destroy(), delete this.ddDraggable), this;
   }
   setupResizable(e) {
-    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new Ie(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new qe(this.el, e), this;
   }
   cleanResizable() {
     return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
   }
   setupDroppable(e) {
-    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new xr(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new Cr(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class Cr {
+class Rr {
   resizable(e, t, i, s) {
     return this._getDDElements(e, t).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -3183,11 +3194,11 @@ class Cr {
         const n = r.el.gridstackNode.grid;
         let d = r.el.getAttribute("gs-resize-handles") || n.opts.resizable.handles || "e,s,se";
         d === "all" && (d = "n,e,s,w,se,sw,ne,nw");
-        const l = !n.opts.alwaysShowResizeHandle;
+        const u = !n.opts.alwaysShowResizeHandle;
         r.setupResizable({
           ...n.opts.resizable,
           handles: d,
-          autoHide: l,
+          autoHide: u,
           start: t.start,
           stop: t.stop,
           resize: t.resize
@@ -3240,7 +3251,7 @@ class Cr {
   }
   on(e, t, i) {
     return this._getDDElements(e).forEach((s) => s.on(t, (r) => {
-      i(r, R.dragElement ? R.dragElement.el : r.target, R.dragElement ? R.dragElement.helper : null);
+      i(r, k.dragElement ? k.dragElement.el : r.target, k.dragElement ? k.dragElement.helper : null);
     })), this;
   }
   off(e, t) {
@@ -3259,7 +3270,7 @@ class Cr {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const j = new Cr();
+const j = new Rr();
 class b {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -3324,7 +3335,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   /** @internal create placeholder DIV as needed */
   get placeholder() {
     if (!this._placeholder) {
-      this._placeholder = c.createDiv([this.opts.placeholderClass, ie.itemClass, this.opts.itemClass]);
+      this._placeholder = c.createDiv([this.opts.placeholderClass, re.itemClass, this.opts.itemClass]);
       const e = c.createDiv(["placeholder-content"], this._placeholder);
       this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
     }
@@ -3336,57 +3347,57 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param opts grid options - public for classes to access, but use methods to modify!
    */
   constructor(e, t = {}) {
-    var u, f, m;
+    var l, f, g;
     this.el = e, this.opts = t, this.animationDelay = 310, this._gsEventHandler = {}, this._extraDragRow = 0, this.dragTransform = { xScale: 1, yScale: 1, xOffset: 0, yOffset: 0 }, e.gridstack = this, this.opts = t = t || {}, e.classList.contains("grid-stack") || this.el.classList.add("grid-stack"), t.row && (t.minRow = t.maxRow = t.row, delete t.row);
     const i = c.toNumber(e.getAttribute("gs-row"));
     t.column === "auto" && delete t.column, t.alwaysShowResizeHandle !== void 0 && (t._alwaysShowResizeHandle = t.alwaysShowResizeHandle);
-    let s = (u = t.columnOpts) == null ? void 0 : u.breakpoints;
+    let s = (l = t.columnOpts) == null ? void 0 : l.breakpoints;
     const r = t;
     if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
       const p = r.oneColumnSize || 768;
       delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
-      let y = s.find((g) => g.c === 1);
+      let y = s.find((m) => m.c === 1);
       y ? y.w = p : (y = { c: 1, w: p }, s.push(y, { c: 12, w: p + 1 }));
     }
     const a = t.columnOpts;
     a && (!a.columnWidth && !((f = a.breakpoints) != null && f.length) ? (delete t.columnOpts, s = void 0) : a.columnMax = a.columnMax || 12), (s == null ? void 0 : s.length) > 1 && s.sort((p, y) => (y.w || 0) - (p.w || 0));
     const n = {
-      ...c.cloneDeep(ie),
-      column: c.toNumber(e.getAttribute("gs-column")) || ie.column,
-      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || ie.minRow,
-      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || ie.maxRow,
-      staticGrid: c.toBool(e.getAttribute("gs-static")) || ie.staticGrid,
+      ...c.cloneDeep(re),
+      column: c.toNumber(e.getAttribute("gs-column")) || re.column,
+      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || re.minRow,
+      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || re.maxRow,
+      staticGrid: c.toBool(e.getAttribute("gs-static")) || re.staticGrid,
       sizeToContent: c.toBool(e.getAttribute("gs-size-to-content")) || void 0,
       draggable: {
-        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || ie.draggable.handle
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || re.draggable.handle
       },
       removableOptions: {
-        accept: t.itemClass || ie.removableOptions.accept,
-        decline: ie.removableOptions.decline
+        accept: t.itemClass || re.removableOptions.accept,
+        decline: re.removableOptions.decline
       }
     };
     e.getAttribute("gs-animate") && (n.animate = c.toBool(e.getAttribute("gs-animate"))), t = c.defaults(t, n), this._initMargin(), this.checkDynamicColumn(), this.el.classList.add("gs-" + t.column), t.rtl === "auto" && (t.rtl = e.style.direction === "rtl"), t.rtl && this.el.classList.add("grid-stack-rtl");
-    const d = this.el.closest("." + ie.itemClass), l = d == null ? void 0 : d.gridstackNode;
-    l && (l.subGrid = this, this.parentGridNode = l, this.el.classList.add("grid-stack-nested"), l.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== ie.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = he), this._styleSheetClass = "gs-id-" + de._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const h = t.engineClass || b.engineClass || de;
+    const d = this.el.closest("." + re.itemClass), u = d == null ? void 0 : d.gridstackNode;
+    u && (u.subGrid = this, this.parentGridNode = u, this.el.classList.add("grid-stack-nested"), u.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== re.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = de), this._styleSheetClass = "gs-id-" + ce._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const h = t.engineClass || b.engineClass || ce;
     if (this.engine = new h({
       column: this.getColumn(),
       float: t.float,
       maxRow: t.maxRow,
       onChange: (p) => {
         let y = 0;
-        this.engine.nodes.forEach((g) => {
-          y = Math.max(y, g.y + g.h);
-        }), p.forEach((g) => {
-          const k = g.el;
-          k && (g._removeDOM ? (k && k.remove(), delete g._removeDOM) : this._writePosAttr(k, g));
+        this.engine.nodes.forEach((m) => {
+          y = Math.max(y, m.y + m.h);
+        }), p.forEach((m) => {
+          const T = m.el;
+          T && (m._removeDOM ? (T && T.remove(), delete m._removeDOM) : this._writePosAttr(T, m));
         }), this._updateStyles(!1, y);
       }
     }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((p) => this._prepareElement(p)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
       const p = t.children;
       delete t.children, p.length && this.load(p);
     }
-    this.setAnimation(), t.subGridDynamic && !R.pauseDrag && (R.pauseDrag = !0), ((m = t.draggable) == null ? void 0 : m.pause) !== void 0 && (R.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
+    this.setAnimation(), t.subGridDynamic && !k.pauseDrag && (k.pauseDrag = !0), ((g = t.draggable) == null ? void 0 : g.pause) !== void 0 && (k.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
   }
   /**
    * add a new widget and returns it.
@@ -3437,9 +3448,9 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @returns newly created grid
    */
   makeSubGrid(e, t, i, s = !0) {
-    var m, p, y;
+    var g, p, y;
     let r = e.gridstackNode;
-    if (r || (r = this.makeWidget(e).gridstackNode), (m = r.subGrid) != null && m.el)
+    if (r || (r = this.makeWidget(e).gridstackNode), (g = r.subGrid) != null && g.el)
       return r.subGrid;
     let a, n = this;
     for (; n && !a; )
@@ -3458,13 +3469,13 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     }), r.subGridOpts = t;
     let d;
     t.column === "auto" && (d = !0, t.column = Math.max(r.w || 1, (i == null ? void 0 : i.w) || 1), delete t.columnOpts);
-    let l = r.el.querySelector(".grid-stack-item-content"), h, u;
-    if (s && (this._removeDD(r.el), u = { ...r, x: 0, y: 0 }, c.removeInternalForSave(u), delete u.subGridOpts, r.content && (u.content = r.content, delete r.content), b.addRemoveCB ? h = b.addRemoveCB(this.el, u, !0, !1) : (h = c.createDiv(["grid-stack-item"]), h.appendChild(l), l = c.createDiv(["grid-stack-item-content"], r.el)), this.prepareDragDrop(r.el)), i) {
-      const g = d ? t.column : r.w, k = r.h + i.h, z = r.el.style;
-      z.transition = "none", this.update(r.el, { w: g, h: k }), setTimeout(() => z.transition = null);
+    let u = r.el.querySelector(".grid-stack-item-content"), h, l;
+    if (s && (this._removeDD(r.el), l = { ...r, x: 0, y: 0 }, c.removeInternalForSave(l), delete l.subGridOpts, r.content && (l.content = r.content, delete r.content), b.addRemoveCB ? h = b.addRemoveCB(this.el, l, !0, !1) : (h = c.createDiv(["grid-stack-item"]), h.appendChild(u), u = c.createDiv(["grid-stack-item-content"], r.el)), this.prepareDragDrop(r.el)), i) {
+      const m = d ? t.column : r.w, T = r.h + i.h, R = r.el.style;
+      R.transition = "none", this.update(r.el, { w: m, h: T }), setTimeout(() => R.transition = null);
     }
-    const f = r.subGrid = b.addGrid(l, t);
-    return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(h, u), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
+    const f = r.subGrid = b.addGrid(u, t);
+    return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(h, l), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
   }
   /**
    * called when an item was converted into a nested grid to accommodate a dragged over item, but then item leaves - return back
@@ -3502,7 +3513,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const r = c.cloneDeep(this.opts);
       r.marginBottom === r.marginTop && r.marginRight === r.marginLeft && r.marginTop === r.marginRight && (r.margin = r.marginTop, delete r.marginTop, delete r.marginRight, delete r.marginBottom, delete r.marginLeft), r.rtl === (this.el.style.direction === "rtl") && (r.rtl = "auto"), this._isAutoCellHeight && (r.cellHeight = "auto"), this._autoColumn && (r.column = "auto");
       const a = r._alwaysShowResizeHandle;
-      return delete r._alwaysShowResizeHandle, a !== void 0 ? r.alwaysShowResizeHandle = a : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, ie), r.children = s, r;
+      return delete r._alwaysShowResizeHandle, a !== void 0 ? r.alwaysShowResizeHandle = a : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, re), r.children = s, r;
     }
     return s;
   }
@@ -3517,7 +3528,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * see http://gridstackjs.com/demo/serialization.html
    */
   load(e, t = b.addRemoveCB || !0) {
-    var l;
+    var u;
     e = c.cloneDeep(e);
     const i = this.getColumn();
     e.forEach((h) => {
@@ -3532,22 +3543,22 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     const a = [];
     this.batchUpdate();
     const n = !this.engine.nodes.length;
-    n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((u) => {
-      if (!u.id)
+    n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((l) => {
+      if (!l.id)
         return;
-      c.find(e, u.id) || (b.addRemoveCB && b.addRemoveCB(this.el, u, !1, !1), a.push(u), this.removeWidget(u.el, !0, !1));
+      c.find(e, l.id) || (b.addRemoveCB && b.addRemoveCB(this.el, l, !1, !1), a.push(l), this.removeWidget(l.el, !0, !1));
     }), this.engine._loading = !0;
     const d = [];
     return this.engine.nodes = this.engine.nodes.filter((h) => c.find(e, h.id) ? (d.push(h), !1) : !0), e.forEach((h) => {
       var f;
-      const u = c.find(d, h.id);
-      if (u) {
-        if (c.shouldSizeToContent(u) && (h.h = u.h), this.engine.nodeBoundFix(h), (h.autoPosition || h.x === void 0 || h.y === void 0) && (h.w = h.w || u.w, h.h = h.h || u.h, this.engine.findEmptyPosition(h)), this.engine.nodes.push(u), c.samePos(u, h) && this.engine.nodes.length > 1 && (this.moveNode(u, { ...h, forceCollide: !0 }), c.copyPos(h, u)), this.update(u.el, h), (f = h.subGridOpts) != null && f.children) {
-          const m = u.el.querySelector(".grid-stack");
-          m && m.gridstack && m.gridstack.load(h.subGridOpts.children);
+      const l = c.find(d, h.id);
+      if (l) {
+        if (c.shouldSizeToContent(l) && (h.h = l.h), this.engine.nodeBoundFix(h), (h.autoPosition || h.x === void 0 || h.y === void 0) && (h.w = h.w || l.w, h.h = h.h || l.h, this.engine.findEmptyPosition(h)), this.engine.nodes.push(l), c.samePos(l, h) && this.engine.nodes.length > 1 && (this.moveNode(l, { ...h, forceCollide: !0 }), c.copyPos(h, l)), this.update(l.el, h), (f = h.subGridOpts) != null && f.children) {
+          const g = l.el.querySelector(".grid-stack");
+          g && g.gridstack && g.gridstack.load(h.subGridOpts.children);
         }
       } else t && this.addWidget(h);
-    }), delete this.engine._loading, this.engine.removedNodes = a, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? b.addRemoveCB = r : delete b.addRemoveCB, n && ((l = this.opts) != null && l.animate) && this.setAnimation(this.opts.animate, !0), this;
+    }), delete this.engine._loading, this.engine.removedNodes = a, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? b.addRemoveCB = r : delete b.addRemoveCB, n && ((u = this.opts) != null && u.animate) && this.setAnimation(this.opts.animate, !0), this;
   }
   /**
    * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
@@ -3836,20 +3847,20 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       this.engine.nodeBoundFix(r), delete r.autoPosition;
       const a = ["x", "y", "w", "h"];
       let n;
-      if (a.some((u) => r[u] !== void 0 && r[u] !== s[u]) && (n = {}, a.forEach((u) => {
-        n[u] = r[u] !== void 0 ? r[u] : s[u], delete r[u];
+      if (a.some((l) => r[l] !== void 0 && r[l] !== s[l]) && (n = {}, a.forEach((l) => {
+        n[l] = r[l] !== void 0 ? r[l] : s[l], delete r[l];
       })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
-        const u = i.querySelector(".grid-stack-item-content");
-        u && u.textContent !== r.content && (s.content = r.content, b.renderCB(u, r), (h = s.subGrid) != null && h.el && (u.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+        const l = i.querySelector(".grid-stack-item-content");
+        l && l.textContent !== r.content && (s.content = r.content, b.renderCB(l, r), (h = s.subGrid) != null && h.el && (l.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
       }
-      let d = !1, l = !1;
-      for (const u in r)
-        u[0] !== "_" && s[u] !== r[u] && (s[u] = r[u], d = !0, l = l || !this.opts.staticGrid && (u === "noResize" || u === "noMove" || u === "locked"));
+      let d = !1, u = !1;
+      for (const l in r)
+        l[0] !== "_" && s[l] !== r[l] && (s[l] = r[l], d = !0, u = u || !this.opts.staticGrid && (l === "noResize" || l === "noMove" || l === "locked"));
       if (c.sanitizeMinMax(s), n) {
-        const u = n.w !== void 0 && n.w !== s.w;
-        this.moveNode(s, n), u && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(u, s), delete s._orig;
+        const l = n.w !== void 0 && n.w !== s.w;
+        this.moveNode(s, n), l && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(l, s), delete s._orig;
       }
-      (n || d) && this._writeAttr(i, s), l && this.prepareDragDrop(s.el);
+      (n || d) && this._writeAttr(i, s), u && this.prepareDragDrop(s.el);
     }), this;
   }
   moveNode(e, t) {
@@ -3863,7 +3874,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param useNodeH set to true if GridStackNode.h should be used instead of actual container height when we don't need to wait for animation to finish to get actual DOM heights
    */
   resizeToContent(e) {
-    var f, m;
+    var f, g;
     if (!e || (e.classList.remove("size-to-content-max"), !e.clientHeight))
       return;
     const t = e.gridstackNode;
@@ -3879,13 +3890,13 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (t.resizeToContentParent && (a = e.querySelector(t.resizeToContentParent)), a || (a = e.querySelector(b.resizeToContentParent)), !a)
       return;
     const n = e.clientHeight - a.clientHeight, d = t.h ? t.h * s - n : a.clientHeight;
-    let l;
+    let u;
     if (t.subGrid) {
-      l = t.subGrid.getRow() * t.subGrid.getCellHeight(!0);
+      u = t.subGrid.getRow() * t.subGrid.getCellHeight(!0);
       const p = t.subGrid.el.getBoundingClientRect(), y = t.subGrid.el.parentElement.getBoundingClientRect();
-      l += p.top - y.top;
+      u += p.top - y.top;
     } else {
-      if ((m = (f = t.subGridOpts) == null ? void 0 : f.children) != null && m.length)
+      if ((g = (f = t.subGridOpts) == null ? void 0 : f.children) != null && g.length)
         return;
       {
         const p = a.firstElementChild;
@@ -3893,15 +3904,15 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${b.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
           return;
         }
-        l = p.getBoundingClientRect().height || d;
+        u = p.getBoundingClientRect().height || d;
       }
     }
-    if (d === l)
+    if (d === u)
       return;
-    r += l - d;
+    r += u - d;
     let h = Math.ceil(r / s);
-    const u = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
-    u && h > u && (h = u, e.classList.add("size-to-content-max")), t.minH && h < t.minH ? h = t.minH : t.maxH && h > t.maxH && (h = t.maxH), h !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h }), delete i._ignoreLayoutsNodeChange);
+    const l = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
+    l && h > l && (h = l, e.classList.add("size-to-content-max")), t.minH && h < t.minH ? h = t.minH : t.maxH && h > t.maxH && (h = t.maxH), h !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h }), delete i._ignoreLayoutsNodeChange);
   }
   /** call the user resize (so they can do extra work) else our build in version */
   resizeToContentCBCheck(e) {
@@ -4022,8 +4033,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       }), !this._styles)
         return this;
       this._styles._max = 0, c.addCSSRule(this._styles, r, `height: ${i}${s}`);
-      const n = this.opts.marginTop + this.opts.marginUnit, d = this.opts.marginBottom + this.opts.marginUnit, l = this.opts.marginRight + this.opts.marginUnit, h = this.opts.marginLeft + this.opts.marginUnit, u = `${r} > .grid-stack-item-content`, f = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
-      c.addCSSRule(this._styles, u, `top: ${n}; right: ${l}; bottom: ${d}; left: ${h};`), c.addCSSRule(this._styles, f, `top: ${n}; right: ${l}; bottom: ${d}; left: ${h};`), c.addCSSRule(this._styles, `${r} > .ui-resizable-n`, `top: ${n};`), c.addCSSRule(this._styles, `${r} > .ui-resizable-s`, `bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-ne`, `right: ${l}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${l}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${l}; bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${h}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${h}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${h}; bottom: ${d}`);
+      const n = this.opts.marginTop + this.opts.marginUnit, d = this.opts.marginBottom + this.opts.marginUnit, u = this.opts.marginRight + this.opts.marginUnit, h = this.opts.marginLeft + this.opts.marginUnit, l = `${r} > .grid-stack-item-content`, f = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
+      c.addCSSRule(this._styles, l, `top: ${n}; right: ${u}; bottom: ${d}; left: ${h};`), c.addCSSRule(this._styles, f, `top: ${n}; right: ${u}; bottom: ${d}; left: ${h};`), c.addCSSRule(this._styles, `${r} > .ui-resizable-n`, `top: ${n};`), c.addCSSRule(this._styles, `${r} > .ui-resizable-s`, `bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-ne`, `right: ${u}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${u}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${u}; bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${h}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${h}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${h}; bottom: ${d}`);
     }
     if (t = t || this._styles._max, t > this._styles._max) {
       const a = (n) => i * n + s;
@@ -4053,7 +4064,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   _prepareElement(e, t = !1, i) {
-    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(ie.itemClass, this.opts.itemClass);
+    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(re.itemClass, this.opts.itemClass);
     const s = c.shouldSizeToContent(i);
     return s ? e.classList.add("size-to-content") : e.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), c.lazyLoad(i) || this.prepareDragDrop(i.el), this;
   }
@@ -4171,7 +4182,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param root optional root which defaults to document (for shadow dom pass the parent HTMLDocument)
    */
   static setupDragIn(e, t, i, s = document) {
-    (t == null ? void 0 : t.pause) !== void 0 && (R.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((a, n) => {
+    (t == null ? void 0 : t.pause) !== void 0 && (k.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((a, n) => {
       j.isDraggable(a) || j.dragIn(a, t), i != null && i[n] && (a.gridstackNode = i[n]);
     });
   }
@@ -4266,29 +4277,29 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         return;
       if (!((f = n.grid) != null && f.el)) {
         a.style.transform = `scale(${1 / this.dragTransform.xScale},${1 / this.dragTransform.yScale})`;
-        const m = a.getBoundingClientRect();
-        a.style.left = m.x + (this.dragTransform.xScale - 1) * (s.clientX - m.x) / this.dragTransform.xScale + "px", a.style.top = m.y + (this.dragTransform.yScale - 1) * (s.clientY - m.y) / this.dragTransform.yScale + "px", a.style.transformOrigin = "0px 0px";
+        const g = a.getBoundingClientRect();
+        a.style.left = g.x + (this.dragTransform.xScale - 1) * (s.clientX - g.x) / this.dragTransform.xScale + "px", a.style.top = g.y + (this.dragTransform.yScale - 1) * (s.clientY - g.y) / this.dragTransform.yScale + "px", a.style.transformOrigin = "0px 0px";
       }
-      let { top: d, left: l } = a.getBoundingClientRect();
+      let { top: d, left: u } = a.getBoundingClientRect();
       const h = this.el.getBoundingClientRect();
-      l -= h.left, d -= h.top;
-      const u = {
+      u -= h.left, d -= h.top;
+      const l = {
         position: {
           top: d * this.dragTransform.xScale,
-          left: l * this.dragTransform.yScale
+          left: u * this.dragTransform.yScale
         }
       };
       if (n._temporaryRemoved) {
-        if (n.x = Math.max(0, Math.round(l / t)), n.y = Math.max(0, Math.round(d / e)), delete n.autoPosition, this.engine.nodeBoundFix(n), !this.engine.willItFit(n)) {
+        if (n.x = Math.max(0, Math.round(u / t)), n.y = Math.max(0, Math.round(d / e)), delete n.autoPosition, this.engine.nodeBoundFix(n), !this.engine.willItFit(n)) {
           if (n.autoPosition = !0, !this.engine.willItFit(n)) {
             j.off(r, "drag");
             return;
           }
           n._willFitPos && (c.copyPos(n, n._willFitPos), delete n._willFitPos);
         }
-        this._onStartMoving(a, s, u, n, t, e);
+        this._onStartMoving(a, s, l, n, t, e);
       } else
-        this._dragOrResize(a, s, u, n, t, e);
+        this._dragOrResize(a, s, l, n, t, e);
     };
     return j.droppable(this.el, {
       accept: (s) => {
@@ -4327,30 +4338,30 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         n || (n = this._readAttr(a)), n._sidebarOrig = { w: n.w, h: n.h };
       }
       n.grid || (n.el || (n = { ...n }), n._isExternal = !0, a.gridstackNode = n);
-      const d = n.w || Math.round(a.offsetWidth / t) || 1, l = n.h || Math.round(a.offsetHeight / e) || 1;
-      return n.grid && n.grid !== this ? (r._gridstackNodeOrig || (r._gridstackNodeOrig = n), r.gridstackNode = n = { ...n, w: d, h: l, grid: this }, delete n.x, delete n.y, this.engine.cleanupNode(n).nodeBoundFix(n), n._initDD = n._isExternal = // DOM needs to be re-parented on a drop
-      n._temporaryRemoved = !0) : (n.w = d, n.h = l, n._temporaryRemoved = !0), b._itemRemoving(n.el, !1), j.on(r, "drag", i), i(s, r, a), !1;
+      const d = n.w || Math.round(a.offsetWidth / t) || 1, u = n.h || Math.round(a.offsetHeight / e) || 1;
+      return n.grid && n.grid !== this ? (r._gridstackNodeOrig || (r._gridstackNodeOrig = n), r.gridstackNode = n = { ...n, w: d, h: u, grid: this }, delete n.x, delete n.y, this.engine.cleanupNode(n).nodeBoundFix(n), n._initDD = n._isExternal = // DOM needs to be re-parented on a drop
+      n._temporaryRemoved = !0) : (n.w = d, n.h = u, n._temporaryRemoved = !0), b._itemRemoving(n.el, !1), j.on(r, "drag", i), i(s, r, a), !1;
     }).on(this.el, "dropout", (s, r, a) => {
       const n = (a == null ? void 0 : a.gridstackNode) || r.gridstackNode;
       return n && (!n.grid || n.grid === this) && (this._leave(r, a), this._isTemp && this.removeAsSubGrid(n)), !1;
     }).on(this.el, "drop", (s, r, a) => {
-      var m, p, y;
+      var g, p, y;
       const n = (a == null ? void 0 : a.gridstackNode) || r.gridstackNode;
       if ((n == null ? void 0 : n.grid) === this && !n._isExternal)
         return !1;
-      const d = !!this.placeholder.parentElement, l = r !== a;
+      const d = !!this.placeholder.parentElement, u = r !== a;
       this.placeholder.remove(), delete this.placeholder.gridstackNode;
       const h = d && this.opts.animate;
       h && this.setAnimation(!1);
-      const u = r._gridstackNodeOrig;
-      if (delete r._gridstackNodeOrig, d && (u != null && u.grid) && u.grid !== this) {
-        const g = u.grid;
-        g.engine.removeNodeFromLayoutCache(u), g.engine.removedNodes.push(u), g._triggerRemoveEvent()._triggerChangeEvent(), g.parentGridNode && !g.engine.nodes.length && g.opts.subGridDynamic && g.removeAsSubGrid();
+      const l = r._gridstackNodeOrig;
+      if (delete r._gridstackNodeOrig, d && (l != null && l.grid) && l.grid !== this) {
+        const m = l.grid;
+        m.engine.removeNodeFromLayoutCache(l), m.engine.removedNodes.push(l), m._triggerRemoveEvent()._triggerChangeEvent(), m.parentGridNode && !m.engine.nodes.length && m.opts.subGridDynamic && m.removeAsSubGrid();
       }
-      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (m = n.grid) == null || delete m._isTemp, j.off(r, "drag"), a !== r ? (a.remove(), r = a) : r.remove(), this._removeDD(r), !d))
+      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (g = n.grid) == null || delete g._isTemp, j.off(r, "drag"), a !== r ? (a.remove(), r = a) : r.remove(), this._removeDD(r), !d))
         return !1;
       const f = (y = (p = n.subGrid) == null ? void 0 : p.el) == null ? void 0 : y.gridstack;
-      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), l && (n.content || n.subGridOpts || b.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, u && u.grid ? u : void 0, n), h && this.setAnimation(this.opts.animate, !0), !1;
+      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), u && (n.content || n.subGridOpts || b.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, l && l.grid ? l : void 0, n), h && this.setAnimation(this.opts.animate, !0), !1;
     }), this;
   }
   /** @internal mark item for removal */
@@ -4381,29 +4392,29 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       return this;
     if (!i._initDD) {
       let n, d;
-      const l = (f, m) => {
-        this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, f.target), n = this.cellWidth(), d = this.getCellHeight(!0), this._onStartMoving(e, f, m, i, n, d);
-      }, h = (f, m) => {
-        this._dragOrResize(e, f, m, i, n, d);
-      }, u = (f) => {
+      const u = (f, g) => {
+        this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, f.target), n = this.cellWidth(), d = this.getCellHeight(!0), this._onStartMoving(e, f, g, i, n, d);
+      }, h = (f, g) => {
+        this._dragOrResize(e, f, g, i, n, d);
+      }, l = (f) => {
         this.placeholder.remove(), delete this.placeholder.gridstackNode, delete i._moving, delete i._event, delete i._lastTried;
-        const m = i.w !== i._orig.w, p = f.target;
+        const g = i.w !== i._orig.w, p = f.target;
         if (!(!p.gridstackNode || p.gridstackNode.grid !== this)) {
           if (i.el = p, i._isAboutToRemove) {
             const y = e.gridstackNode.grid;
             y._gsEventHandler[f.type] && y._gsEventHandler[f.type](f, p), y.engine.nodes.push(i), y.removeWidget(e, !0, !0);
           } else
             c.removePositioningStyles(p), i._temporaryRemoved ? (c.copyPos(i, i._orig), this._writePosAttr(p, i), this.engine.addNode(i)) : this._writePosAttr(p, i), this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, p);
-          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), f.type === "resizestop" && (Number.isInteger(i.sizeToContent) && (i.sizeToContent = i.h), this.resizeToContentCheck(m, i));
+          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), f.type === "resizestop" && (Number.isInteger(i.sizeToContent) && (i.sizeToContent = i.h), this.resizeToContentCheck(g, i));
         }
       };
       j.draggable(e, {
-        start: l,
-        stop: u,
+        start: u,
+        stop: l,
         drag: h
       }).resizable(e, {
-        start: l,
-        stop: u,
+        start: u,
+        stop: l,
         resize: h
       }), i._initDD = !0;
     }
@@ -4425,48 +4436,48 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         yOffset: 0
       };
     if (s.el = this.placeholder, s._lastUiPosition = i.position, s._prevYPix = i.position.top, s._moving = t.type === "dragstart", delete s._lastTried, t.type === "dropover" && s._temporaryRemoved && (this.engine.addNode(s), s._moving = !0), this.engine.cacheRects(r, a, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), t.type === "resizestart") {
-      const d = this.getColumn() - s.x, l = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
-      j.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", a * Math.min(s.minH || 1, l)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, d)).resizable(e, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(e, "option", "maxHeight", a * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, l)).resizable(e, "option", "maxHeightMoveUp", a * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
+      const d = this.getColumn() - s.x, u = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
+      j.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", a * Math.min(s.minH || 1, u)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, d)).resizable(e, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(e, "option", "maxHeight", a * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, u)).resizable(e, "option", "maxHeightMoveUp", a * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
     }
   }
   /** @internal handles actual drag/resize */
   _dragOrResize(e, t, i, s, r, a) {
     const n = { ...s._orig };
-    let d, l = this.opts.marginLeft, h = this.opts.marginRight, u = this.opts.marginTop, f = this.opts.marginBottom;
-    const m = Math.round(a * 0.1), p = Math.round(r * 0.1);
-    if (l = Math.min(l, p), h = Math.min(h, p), u = Math.min(u, m), f = Math.min(f, m), t.type === "drag") {
+    let d, u = this.opts.marginLeft, h = this.opts.marginRight, l = this.opts.marginTop, f = this.opts.marginBottom;
+    const g = Math.round(a * 0.1), p = Math.round(r * 0.1);
+    if (u = Math.min(u, p), h = Math.min(h, p), l = Math.min(l, g), f = Math.min(f, g), t.type === "drag") {
       if (s._temporaryRemoved)
         return;
-      const g = i.position.top - s._prevYPix;
-      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, g);
-      const k = i.position.left + (i.position.left > s._lastUiPosition.left ? -h : l), z = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : u);
-      n.x = Math.round(k / r), n.y = Math.round(z / a);
+      const m = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, m);
+      const T = i.position.left + (i.position.left > s._lastUiPosition.left ? -h : u), R = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
+      n.x = Math.round(T / r), n.y = Math.round(R / a);
       const v = this._extraDragRow;
       if (this.engine.collide(s, n)) {
-        const q = this.getRow();
-        let A = Math.max(0, n.y + s.h - q);
-        this.opts.maxRow && q + A > this.opts.maxRow && (A = Math.max(0, this.opts.maxRow - q)), this._extraDragRow = A;
+        const I = this.getRow();
+        let q = Math.max(0, n.y + s.h - I);
+        this.opts.maxRow && I + q > this.opts.maxRow && (q = Math.max(0, this.opts.maxRow - I)), this._extraDragRow = q;
       } else
         this._extraDragRow = 0;
       if (this._extraDragRow !== v && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
         return;
     } else if (t.type === "resize") {
-      if (n.x < 0 || (c.updateScrollResize(t, e, a), n.w = Math.round((i.size.width - l) / r), n.h = Math.round((i.size.height - u) / a), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
+      if (n.x < 0 || (c.updateScrollResize(t, e, a), n.w = Math.round((i.size.width - u) / r), n.h = Math.round((i.size.height - l) / a), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
         return;
-      const g = i.position.left + l, k = i.position.top + u;
-      n.x = Math.round(g / r), n.y = Math.round(k / a), d = !0;
+      const m = i.position.left + u, T = i.position.top + l;
+      n.x = Math.round(m / r), n.y = Math.round(T / a), d = !0;
     }
     s._event = t, s._lastTried = n;
     const y = {
-      x: i.position.left + l,
-      y: i.position.top + u,
-      w: (i.size ? i.size.width : s.w * r) - l - h,
-      h: (i.size ? i.size.height : s.h * a) - u - f
+      x: i.position.left + u,
+      y: i.position.top + l,
+      w: (i.size ? i.size.width : s.w * r) - u - h,
+      h: (i.size ? i.size.height : s.h * a) - l - f
     };
     if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: a, rect: y, resizing: d })) {
-      s._lastUiPosition = i.position, this.engine.cacheRects(r, a, u, h, f, l), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
-      const g = t.target;
-      s._sidebarOrig || this._writePosAttr(g, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, g);
+      s._lastUiPosition = i.position, this.engine.cacheRects(r, a, l, h, f, u), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+      const m = t.target;
+      s._sidebarOrig || this._writePosAttr(m, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, m);
     }
   }
   /** @internal called when item leaving our area by either cursor dropout event
@@ -4484,7 +4495,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   // legacy method removed
   commit() {
-    return wr(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return Er(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
 b.renderCB = (o, e) => {
@@ -4492,22 +4503,22 @@ b.renderCB = (o, e) => {
 };
 b.resizeToContentParent = ".grid-stack-item-content";
 b.Utils = c;
-b.Engine = de;
+b.Engine = ce;
 b.GDRev = "11.5.1";
-const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { class: "grid-stack-item-content" }, Tr = /* @__PURE__ */ ee({
+const kr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Tr = { class: "grid-stack-item-content" }, Sr = /* @__PURE__ */ ee({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
-    tileHeight: { default: Ge },
-    columns: { default: _t }
+    tileHeight: { default: We },
+    columns: { default: bt }
   },
   emits: ["update-tiles"],
   setup(o, { expose: e, emit: t }) {
-    const i = o, s = t, r = H(null), a = H(new Map(i.tiles.map((m) => [`${m.id}`, m])));
+    const i = o, s = t, r = A(null), a = A(new Map(i.tiles.map((g) => [`${g.id}`, g])));
     let n = null;
-    const d = (m) => `[data-id="${m}"]`, l = (m) => m.map((p) => {
-      var g;
-      const y = a.value.get(`${(g = p.el) == null ? void 0 : g.getAttribute("data-id")}`);
+    const d = (g) => `[data-id="${g}"]`, u = (g) => g.map((p) => {
+      var m;
+      const y = a.value.get(`${(m = p.el) == null ? void 0 : m.getAttribute("data-id")}`);
       if (y)
         return {
           ...y,
@@ -4516,53 +4527,53 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
             size: { cols: Number(p.w), rows: Number(p.h) }
           }
         };
-    }).filter((p) => p !== void 0), h = (m, p) => {
-      n && (l(p).forEach((g) => {
-        a.value.set(`${g.id}`, g);
+    }).filter((p) => p !== void 0), h = (g, p) => {
+      n && (u(p).forEach((m) => {
+        a.value.set(`${m.id}`, m);
       }), s("update-tiles", Array.from(a.value.values())));
-    }, u = (m, p) => {
+    }, l = (g, p) => {
       p.forEach((y) => {
-        var g;
-        a.value.delete(`${(g = y.el) == null ? void 0 : g.getAttribute("data-id")}`);
+        var m;
+        a.value.delete(`${(m = y.el) == null ? void 0 : m.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(a.value.values()));
     };
-    st(() => {
+    nt(() => {
       r.value && (n = b.init({
         margin: 10,
         column: i.columns,
         cellHeight: i.tileHeight,
         resizable: { handles: "se, sw" },
         handle: ".tile-header"
-      }, r.value), n.on("change", h), n.on("added", h), n.on("removed", u));
-    }), Fe(() => {
+      }, r.value), n.on("change", h), n.on("added", h), n.on("removed", l));
+    }), Ge(() => {
       n && n.destroy(!1);
     });
-    const f = (m) => {
+    const f = (g) => {
       if (n && r.value) {
-        const p = r.value.querySelector(d(m));
+        const p = r.value.querySelector(d(g));
         p && n.removeWidget(p);
       }
     };
-    return Oe(() => i.tiles.length, async (m, p) => {
-      if (m > p && n) {
+    return Oe(() => i.tiles.length, async (g, p) => {
+      if (g > p && n) {
         const y = i.tiles.slice(p);
-        for (const g of y)
-          a.value.set(`${g.id}`, g), await yt(), n.makeWidget(d(g.id), {
+        for (const m of y)
+          a.value.set(`${m.id}`, m), await vt(), n.makeWidget(d(m.id), {
             autoPosition: !0,
-            w: g.layout.size.cols,
-            h: g.layout.size.rows
+            w: m.layout.size.cols,
+            h: m.layout.size.rows
           });
       }
     }), Jt(() => {
-      i.tiles.forEach((m) => {
-        a.value.set(`${m.id}`, m);
+      i.tiles.forEach((g) => {
+        a.value.set(`${g.id}`, g);
       });
-    }), e({ removeWidget: f }), (m, p) => (C(), B("div", {
+    }), e({ removeWidget: f }), (g, p) => (x(), B("div", {
       ref_key: "gridContainer",
       ref: r,
       class: "grid-stack"
     }, [
-      (C(!0), B(mt, null, ri(i.tiles, (y) => (C(), B("div", {
+      (x(!0), B(pt, null, ri(i.tiles, (y) => (x(), B("div", {
         key: y.id,
         class: "grid-stack-item",
         "data-id": `${y.id}`,
@@ -4573,13 +4584,13 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
         "gs-x": y.layout.position.col,
         "gs-y": y.layout.position.row
       }, [
-        te("div", kr, [
-          He(m.$slots, "tile", { tile: y }, void 0, !0)
+        se("div", Tr, [
+          He(g.$slots, "tile", { tile: y }, void 0, !0)
         ])
-      ], 8, Rr))), 128))
+      ], 8, kr))), 128))
     ], 512));
   }
-}), Sr = /* @__PURE__ */ be(Tr, [["__scopeId", "data-v-1fdec94c"]]), Dr = (o) => {
+}), Dr = /* @__PURE__ */ we(Sr, [["__scopeId", "data-v-1fdec94c"]]), zr = (o) => {
   const e = {
     ...o.meta,
     chart: { ...o.meta.chart }
@@ -4596,156 +4607,156 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
       size: o.layout.size
     }
   };
-}, zr = {
+}, Nr = {
   key: 0,
   class: "fullscreen-header"
-}, Nr = {
+}, Lr = {
   key: 0,
   class: "tile-container slottable-tile"
-}, Lr = /* @__PURE__ */ ee({
+}, Ar = /* @__PURE__ */ ee({
   __name: "DashboardRenderer",
-  props: /* @__PURE__ */ je({
+  props: /* @__PURE__ */ Ze({
     context: {},
     preview: { type: Boolean, default: !1 }
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ je(["edit-tile", "tile-time-range-zoom"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ Ze(["edit-tile", "tile-time-range-zoom"], ["update:modelValue"]),
   setup(o, { expose: e, emit: t }) {
-    pt((D) => ({
+    yt((z) => ({
       v39442668: h.value
     }));
-    const i = t, s = ii(o, "modelValue"), { i18n: r } = ae.useI18n(), a = H(0), n = H(null), d = H(), l = H(), h = H("scale(1)"), u = ge(ye);
-    u || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), ae.useRequestQueue();
-    const f = (D, N) => {
-      const F = D.layout.position.row - N.layout.position.row;
-      return F !== 0 ? F : D.layout.position.col - N.layout.position.col;
-    }, m = w(() => s.value.tiles.map((D) => {
-      var V;
-      let N = D.definition;
-      const F = D.type ?? "chart", P = N.chart;
+    const i = t, s = ii(o, "modelValue"), { i18n: r } = ue.useI18n(), a = A(0), n = A(null), d = A(), u = A(), h = A("scale(1)"), l = me(_e);
+    l || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), ue.useRequestQueue();
+    const f = (z, N) => {
+      const F = z.layout.position.row - N.layout.position.row;
+      return F !== 0 ? F : z.layout.position.col - N.layout.position.col;
+    }, g = w(() => s.value.tiles.map((z) => {
+      var Y;
+      let N = z.definition;
+      const F = z.type ?? "chart", P = N.chart;
       if (F === "chart" && "description" in P) {
-        const at = N, lt = (V = P.description) == null ? void 0 : V.replace(Rs, () => {
-          const { timeSpec: Ue } = I.value, we = `renderer.trendRange.${Ue.type === "absolute" ? "custom" : Ue.time_range}`;
-          return r.te(we) ? r.t(we) : "";
+        const lt = N, ut = (Y = P.description) == null ? void 0 : Y.replace(ks, () => {
+          const { timeSpec: Ke } = H.value, Ee = `renderer.trendRange.${Ke.type === "absolute" ? "custom" : Ke.time_range}`;
+          return r.te(Ee) ? r.t(Ee) : "";
         });
         N = {
-          ...at,
+          ...lt,
           chart: {
             ...P,
-            description: lt
+            description: ut
           }
         };
       }
-      return I.value.editable && !D.id && console.warn(
+      return H.value.editable && !z.id && console.warn(
         "No id provided for tile. One will be generated automatically,",
         "however tracking changes to this tile may not work as expected.",
-        D
+        z
       ), {
-        layout: D.layout,
+        layout: z.layout,
         meta: N,
         type: F,
         // Add a unique key to each tile internally.
-        id: D.id ?? crypto.randomUUID()
+        id: z.id ?? crypto.randomUUID()
       };
-    })), p = (D) => {
-      i("edit-tile", D);
-    }, y = (D) => D.type === "chart" && D.meta.chart.type === "slottable", g = (D) => D.type === "slottable", k = (D) => {
-      const N = D.meta.chart;
-      return g(N) ? N.id : void 0;
-    }, z = (D) => {
+    })), p = (z) => {
+      i("edit-tile", z);
+    }, y = (z) => z.type === "chart" && z.meta.chart.type === "slottable", m = (z) => z.type === "slottable", T = (z) => {
+      const N = z.meta.chart;
+      return m(N) ? N.id : void 0;
+    }, R = (z) => {
       try {
-        const N = Dr(D);
+        const N = zr(z);
         s.value.tiles.push(JSON.parse(JSON.stringify(N)));
       } catch (N) {
         console.warn(N);
       }
-    }, v = (D) => {
-      n.value && n.value.removeWidget(D.id);
-    }, q = () => {
+    }, v = (z) => {
+      n.value && n.value.removeWidget(z.id);
+    }, I = () => {
       a.value++;
-    }, A = (D) => {
-      const N = D.map((F) => ({
+    }, q = (z) => {
+      const N = z.map((F) => ({
         id: F.id,
         type: F.type,
         layout: F.layout,
         definition: F.meta
       }));
       s.value.tiles = N.sort(f);
-    }, le = async () => {
-      if (h.value = "scale(1)", await yt(), l.value) {
-        const { availWidth: D, availHeight: N } = window.screen, { width: F, height: P } = l.value.getBoundingClientRect(), V = Math.min(N / P, D / F);
-        h.value = `scale(${V})`;
+    }, te = async () => {
+      if (h.value = "scale(1)", await vt(), u.value) {
+        const { availWidth: z, availHeight: N } = window.screen, { width: F, height: P } = u.value.getBoundingClientRect(), Y = Math.min(N / P, z / F);
+        h.value = `scale(${Y})`;
       }
-    }, xe = () => {
+    }, ie = () => {
       d.value && (document.fullscreenElement ? document.exitFullscreen() : d.value.requestFullscreen());
-    }, Y = H(!1), ve = () => {
-      Y.value = document.fullscreenElement !== null, Y.value && le();
-    }, S = w(() => s.value.preset_filters ?? []), { internalContext: I, queryReady: Q } = ae.useDashboardInternalContext({
-      globalFilters: S,
+    }, W = A(!1), pe = () => {
+      W.value = document.fullscreenElement !== null, W.value && te();
+    }, D = w(() => s.value.preset_filters ?? []), { internalContext: H, queryReady: V } = ue.useDashboardInternalContext({
+      globalFilters: D,
       context: w(() => o.context),
-      isFullscreen: Y,
+      isFullscreen: W,
       preview: w(() => o.preview)
     });
     return e({
-      refresh: q,
-      toggleFullscreen: xe
-    }), (D, N) => {
-      const F = ue("KAlert");
-      return C(), B("div", {
+      refresh: I,
+      toggleFullscreen: ie
+    }), (z, N) => {
+      const F = he("KAlert");
+      return x(), B("div", {
         ref_key: "dashboardContainer",
         ref: d,
-        class: ze(["kong-ui-public-dashboard-renderer", { "is-fullscreen": Y.value }]),
-        onFullscreenchange: ve
+        class: ze(["kong-ui-public-dashboard-renderer", { "is-fullscreen": W.value }]),
+        onFullscreenchange: pe
       }, [
-        te("div", {
+        se("div", {
           ref_key: "layoutContainer",
-          ref: l,
+          ref: u,
           class: "layout"
         }, [
-          E(u) && Y.value ? (C(), B("div", zr, [
-            He(D.$slots, "fullscreenHeader", {}, void 0, !0)
+          C(l) && W.value ? (x(), B("div", Nr, [
+            He(z.$slots, "fullscreenHeader", {}, void 0, !0)
           ])) : X("", !0),
-          E(u) ? (C(), O(si(E(I).editable && !Y.value ? Sr : br), {
+          C(l) ? (x(), O(si(C(H).editable && !W.value ? Dr : wr), {
             key: 2,
             ref_key: "gridLayoutRef",
             ref: n,
             columns: s.value.columns,
             "tile-height": s.value.tile_height,
-            tiles: m.value,
-            onUpdateTiles: A
+            tiles: g.value,
+            onUpdateTiles: q
           }, {
             tile: M(({ tile: P }) => [
-              y(P) ? (C(), B("div", Nr, [
-                He(D.$slots, k(P), {}, void 0, !0)
-              ])) : (C(), O(mi, {
-                key: Y.value ? `${P.id}-tile` : `${P.id}-tile-fullscreen`,
+              y(P) ? (x(), B("div", Lr, [
+                He(z.$slots, T(P), {}, void 0, !0)
+              ])) : (x(), O(mi, {
+                key: W.value ? `${P.id}-tile` : `${P.id}-tile-fullscreen`,
                 "refresh-counter": a.value,
-                "onUpdate:refreshCounter": N[0] || (N[0] = (V) => a.value = V),
+                "onUpdate:refreshCounter": N[0] || (N[0] = (Y) => a.value = Y),
                 class: "tile-container",
-                context: E(I),
+                context: C(H),
                 definition: P.meta,
-                height: P.layout.size.rows * (s.value.tile_height || E(Ge)) + parseInt(E(gi), 10),
-                "hide-actions": !E(I).showTileActions,
-                "hide-zoom-actions": !E(I).showTileZoomActions,
-                "is-fullscreen": Y.value,
-                "query-ready": E(Q),
+                height: P.layout.size.rows * (s.value.tile_height || C(We)) + parseInt(C(gi), 10),
+                "hide-actions": !C(H).showTileActions,
+                "hide-zoom-actions": !C(H).showTileZoomActions,
+                "is-fullscreen": W.value,
+                "query-ready": C(V),
                 "tile-id": P.id,
                 "tile-type": P.type,
-                onDuplicateTile: (V) => z(P),
-                onEditTile: (V) => p(P),
-                onRemoveTile: (V) => v(P),
-                onTileTimeRangeZoom: N[1] || (N[1] = (V) => i("tile-time-range-zoom", V))
+                onDuplicateTile: (Y) => R(P),
+                onEditTile: (Y) => p(P),
+                onRemoveTile: (Y) => v(P),
+                onTileTimeRangeZoom: N[1] || (N[1] = (Y) => i("tile-time-range-zoom", Y))
               }, null, 8, ["refresh-counter", "context", "definition", "height", "hide-actions", "hide-zoom-actions", "is-fullscreen", "query-ready", "tile-id", "tile-type", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
             ]),
             _: 3
-          }, 40, ["columns", "tile-height", "tiles"])) : (C(), O(F, {
+          }, 40, ["columns", "tile-height", "tiles"])) : (x(), O(F, {
             key: 1,
             appearance: "danger"
           }, {
             default: M(() => [
-              gt(J(E(r).t("renderer.noQueryBridge")), 1)
+              mt(J(C(r).t("renderer.noQueryBridge")), 1)
             ]),
             _: 1
           }))
@@ -4753,7 +4764,7 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
       ], 34);
     };
   }
-}), Qr = /* @__PURE__ */ be(Lr, [["__scopeId", "data-v-33404a87"]]), Vr = /* @__PURE__ */ ee({
+}), Vr = /* @__PURE__ */ we(Ar, [["__scopeId", "data-v-33404a87"]]), Yr = /* @__PURE__ */ ee({
   __name: "DashboardTilePreview",
   props: {
     context: {},
@@ -4767,76 +4778,76 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
       a("tile-time-range-zoom", v);
     }, d = (v) => {
       a("chart-data", v);
-    }, l = (v) => {
+    }, u = (v) => {
       a("tile-bounds-change", v);
-    }, { i18n: h } = ae.useI18n(), { internalContext: u, queryReady: f } = ae.useDashboardInternalContext({
+    }, { i18n: h } = ue.useI18n(), { internalContext: l, queryReady: f } = ue.useDashboardInternalContext({
       globalFilters: Ae(() => o.globalFilters),
       context: Ae(() => o.context),
       preview: w(() => o.preview)
-    }), m = w(() => oe(o.definition)), p = w(() => {
+    }), g = w(() => le(o.definition)), p = w(() => {
       var v;
-      return m.value ? "columns" in o.definition.query && !((v = o.definition.query.columns) != null && v.length) : !("metrics" in o.definition.query) || !o.definition.query.metrics || o.definition.query.metrics.length === 0;
-    }), y = H(Ge);
-    let g;
-    st(() => {
-      var q;
-      const v = (q = i.value) == null ? void 0 : q.parentElement;
-      v && (y.value = v.getBoundingClientRect().height, g = new ResizeObserver(([A]) => {
-        const { height: le } = A.contentRect;
-        y.value = le;
-      }), g.observe(v));
-    }), Fe(() => g == null ? void 0 : g.disconnect());
-    const k = H(0);
+      return g.value ? "columns" in o.definition.query && !((v = o.definition.query.columns) != null && v.length) : !("metrics" in o.definition.query) || !o.definition.query.metrics || o.definition.query.metrics.length === 0;
+    }), y = A(We);
+    let m;
+    nt(() => {
+      var I;
+      const v = (I = i.value) == null ? void 0 : I.parentElement;
+      v && (y.value = v.getBoundingClientRect().height, m = new ResizeObserver(([q]) => {
+        const { height: te } = q.contentRect;
+        y.value = te;
+      }), m.observe(v));
+    }), Ge(() => m == null ? void 0 : m.disconnect());
+    const T = A(0);
     return e({
       refresh: () => {
-        k.value++;
+        T.value++;
       },
       getExportData: () => {
         var v;
         return (v = s.value) == null ? void 0 : v.getExportData();
       }
-    }), (v, q) => {
-      const A = ue("KEmptyState");
-      return C(), B("div", {
+    }), (v, I) => {
+      const q = he("KEmptyState");
+      return x(), B("div", {
         ref_key: "root",
         ref: i,
         "data-testid": "dashboard-tile-preview-root"
       }, [
-        p.value ? (C(), O(A, {
+        p.value ? (x(), O(q, {
           key: 0,
           "action-button-visible": !1,
           "data-testid": "chart-not-configured-empty-state"
         }, {
           title: M(() => [
-            te("p", null, J(E(h).t("renderer.not_configured.title")), 1)
+            se("p", null, J(C(h).t("renderer.not_configured.title")), 1)
           ]),
           default: M(() => [
-            te("p", null, J(E(h).t("renderer.not_configured.description")), 1)
+            se("p", null, J(C(h).t("renderer.not_configured.description")), 1)
           ]),
           _: 1
-        })) : (C(), O(mi, {
+        })) : (x(), O(mi, {
           key: 1,
           ref: "dashboard-tile",
-          "refresh-counter": k.value,
-          "onUpdate:refreshCounter": q[0] || (q[0] = (le) => k.value = le),
+          "refresh-counter": T.value,
+          "onUpdate:refreshCounter": I[0] || (I[0] = (te) => T.value = te),
           context: {
-            ...E(u),
+            ...C(l),
             editable: !1
           },
           definition: o.definition,
           height: y.value,
           "hide-actions": "",
-          "query-ready": E(f),
+          "query-ready": C(f),
           "show-refresh": "",
-          "tile-id": E(r),
+          "tile-id": C(r),
           onChartData: d,
-          onTileBoundsChange: l,
+          onTileBoundsChange: u,
           onTileTimeRangeZoom: n
         }, null, 8, ["refresh-counter", "context", "definition", "height", "query-ready", "tile-id"]))
       ], 512);
     };
   }
-}), Ar = (o) => {
+}), Or = (o) => {
   var t;
   const e = (t = o.definition) == null ? void 0 : t.query;
   if (!e)
@@ -4846,9 +4857,9 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
     return;
   }
   return o;
-}, Or = (o) => {
+}, Hr = (o) => {
   var i;
-  if (oe(o.definition))
+  if (le(o.definition))
     return o;
   const e = (i = o.definition) == null ? void 0 : i.query;
   if (!e)
@@ -4864,56 +4875,56 @@ const Rr = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], kr = { cl
       query: t
     }
   };
-}, Hr = (o, e = _t) => {
-  var a, n, d, l, h;
+}, Ir = (o, e = bt) => {
+  var a, n, d, u, h;
   if (!o.length)
     return [];
   let t = 0, i = 0, s = 0;
   const r = [];
-  for (const u of o) {
-    const f = ((n = (a = u.layout) == null ? void 0 : a.size) == null ? void 0 : n.cols) ?? 1, m = ((l = (d = u.layout) == null ? void 0 : d.size) == null ? void 0 : l.rows) ?? 1;
+  for (const l of o) {
+    const f = ((n = (a = l.layout) == null ? void 0 : a.size) == null ? void 0 : n.cols) ?? 1, g = ((u = (d = l.layout) == null ? void 0 : d.size) == null ? void 0 : u.rows) ?? 1;
     i + f > e && (t += s, i = 0, s = 0);
     const p = {
-      ...u,
+      ...l,
       layout: {
-        ...u.layout,
+        ...l.layout,
         position: {
-          ...((h = u.layout) == null ? void 0 : h.position) ?? {},
+          ...((h = l.layout) == null ? void 0 : h.position) ?? {},
           col: i,
           row: t
         }
       }
     };
-    r.push(p), i += f, s = Math.max(s, m);
+    r.push(p), i += f, s = Math.max(s, g);
   }
   return r;
-}, Yr = (o, e) => {
+}, jr = (o, e) => {
   if (e) {
-    const s = o.tiles.map(Or);
+    const s = o.tiles.map(Hr);
     return {
       ...o,
       tiles: s
     };
   }
-  const t = o.tiles.map(Ar).filter((s) => s !== void 0), i = Hr(t, o.columns);
+  const t = o.tiles.map(Or).filter((s) => s !== void 0), i = Ir(t, o.columns);
   return {
     ...o,
     tiles: i
   };
 };
 export {
-  Cs as C,
-  _t as D,
+  Rs as C,
+  bt as D,
   Mt as E,
-  Ss as F,
-  br as G,
-  ye as I,
-  Rs as T,
+  Ds as F,
+  wr as G,
+  _e as I,
+  ks as T,
   wt as _,
-  Ge as a,
-  ks as b,
-  Qr as c,
-  Vr as d,
-  Ts as e,
-  Yr as f
+  We as a,
+  Ts as b,
+  Vr as c,
+  Yr as d,
+  Ss as e,
+  jr as f
 };