@kong-ui-public/dashboard-renderer 6.1.5 → 6.2.0

package/dist/dashboard-renderer.es.js

@@ -1,11 +1,11 @@
 var Bt = Object.defineProperty;
-var it = (u) => {
+var st = (u) => {
   throw TypeError(u);
 };
 var $t = (u, e, t) => e in u ? Bt(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var st = (u, e, t) => $t(u, typeof e != "symbol" ? e + "" : e, t), Be = (u, e, t) => e.has(u) || it("Cannot " + t);
-var _ = (u, e, t) => (Be(u, e, "read from private field"), t ? t.call(u) : e.get(u)), M = (u, e, t) => e.has(u) ? it("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), H = (u, e, t, i) => (Be(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), P = (u, e, t) => (Be(u, e, "access private method"), t);
-var ye = (u, e, t, i) => ({
+var rt = (u, e, t) => $t(u, typeof e != "symbol" ? e + "" : e, t), Ge = (u, e, t) => e.has(u) || st("Cannot " + t);
+var _ = (u, e, t) => (Ge(u, e, "read from private field"), t ? t.call(u) : e.get(u)), M = (u, e, t) => e.has(u) ? st("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), H = (u, e, t, i) => (Ge(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), P = (u, e, t) => (Ge(u, e, "access private method"), t);
+var _e = (u, e, t, i) => ({
   set _(s) {
     H(u, e, s, t);
   },
@@ -13,27 +13,27 @@ var ye = (u, e, t, i) => ({
     return _(u, e, i);
   }
 });
-import { ref as U, watchEffect as vt, inject as pe, provide as Gt, defineComponent as K, onUnmounted as Fe, computed as A, watch as We, resolveComponent as oe, createBlock as O, renderSlot as Le, createCommentVNode as Y, unref as D, openBlock as R, withCtx as I, createTextVNode as Me, toDisplayString as J, useCssVars as Ve, createElementVNode as re, normalizeClass as Ke, createVNode as ie, mergeProps as _t, createSlots as Ye, createElementBlock as F, normalizeProps as Ut, guardReactiveProps as Ft, defineAsyncComponent as Wt, onMounted as Xe, nextTick as wt, resolveDynamicComponent as bt, Fragment as Et, renderList as xt, normalizeStyle as rt, mergeModels as nt, useModel as Vt } from "vue";
-import { stripUnknownFilters as Kt, Timeframe as Yt, TimePeriods as Ct, TIMEFRAME_LOOKUP as Xt, formatTime as ot, msToGranularity as $e } from "@kong-ui-public/analytics-utilities";
-import { SimpleChart as jt, AnalyticsChart as Qt, TopNTable as Zt, CsvExportModal as Jt } from "@kong-ui-public/analytics-chart";
-import ei from "swrv";
+import { ref as U, watchEffect as _t, inject as ye, provide as Gt, defineComponent as K, onUnmounted as Ve, computed as A, watch as Ke, resolveComponent as ae, createBlock as O, renderSlot as Ie, createCommentVNode as Y, unref as D, openBlock as R, withCtx as I, createTextVNode as Pe, toDisplayString as J, useCssVars as Ye, createElementVNode as ne, normalizeClass as Xe, createVNode as ie, mergeProps as wt, createSlots as je, createElementBlock as F, normalizeProps as Ut, guardReactiveProps as Ft, defineAsyncComponent as Wt, onMounted as Qe, nextTick as bt, resolveDynamicComponent as Et, Fragment as xt, renderList as Ct, normalizeStyle as nt, mergeModels as ot, useModel as Vt, getCurrentInstance as Kt } from "vue";
+import { stripUnknownFilters as Yt, Timeframe as Xt, TimePeriods as Rt, TIMEFRAME_LOOKUP as jt, formatTime as at, msToGranularity as Ue } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as Qt, AnalyticsChart as Zt, TopNTable as Jt, CsvExportModal as ei } from "@kong-ui-public/analytics-chart";
+import ti from "swrv";
 import "axios";
-import { createI18n as ti, i18nTComponent as ii } from "@kong-ui-public/i18n";
-import { useAnalyticsConfigStore as Rt } from "@kong-ui-public/analytics-config-store";
-import { MetricsProvider as si, MetricsConsumer as ri } from "@kong-ui-public/analytics-metric-provider";
-import { WarningIcon as ni, EditIcon as oi, MoreIcon as ai } from "@kong/icons";
-var Tt = /* @__PURE__ */ ((u) => (u.VALIDATING = "VALIDATING", u.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", u.PENDING = "PENDING", u.SUCCESS = "SUCCESS", u.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", u.ERROR = "ERROR", u.STALE_IF_ERROR = "STALE_IF_ERROR", u))(Tt || {});
-const li = (u) => {
+import { createI18n as ii, i18nTComponent as si } from "@kong-ui-public/i18n";
+import { useAnalyticsConfigStore as Tt } from "@kong-ui-public/analytics-config-store";
+import { MetricsProvider as ri, MetricsConsumer as ni } from "@kong-ui-public/analytics-metric-provider";
+import { WarningIcon as oi, EditIcon as ai, MoreIcon as li } from "@kong/icons";
+var zt = /* @__PURE__ */ ((u) => (u.VALIDATING = "VALIDATING", u.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", u.PENDING = "PENDING", u.SUCCESS = "SUCCESS", u.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", u.ERROR = "ERROR", u.STALE_IF_ERROR = "STALE_IF_ERROR", u))(zt || {});
+const hi = (u) => {
   var e, t, i, s, r;
   return u ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(u)) != null && e.length || (t = u.data) != null && t.length || (s = (i = u.data) == null ? void 0 : i.data) != null && s.length || !((r = u.data) != null && r.data) && typeof u.data == "object" && Object.keys(u == null ? void 0 : u.data).length) : !1;
 };
-function hi(u = U({}), e, t, i = li) {
+function di(u = U({}), e, t, i = hi) {
   const s = U(
     "PENDING"
     /* PENDING */
   );
-  return vt(() => {
+  return _t(() => {
     const r = i(u.value);
     if (u.value && r && t.value) {
       s.value = "VALIDATING_HAS_DATA";
@@ -62,10 +62,10 @@ function hi(u = U({}), e, t, i = li) {
     u.value === void 0 && e && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: Tt
+    swrvState: zt
   };
 }
-const di = {
+const ui = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-hour summary",
@@ -76,14 +76,14 @@ const di = {
   duplicateTile: "Duplicate",
   remove: "Remove",
   delete: "Delete"
-}, ui = {
+}, ci = {
   forbidden: "You do not have permission to query this data.",
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period",
   timeout: "Query timed out.  Consider querying a shorter time range."
-}, ci = {
+}, fi = {
   defaultFilename: "Chart export",
   exportAsCsv: "Export as CSV"
-}, fi = "Explore", gi = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", mi = {
+}, gi = "Explore", mi = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", pi = {
   daily: "1 day",
   fiveMinutely: "5 minutes",
   hourly: "1 hour",
@@ -95,45 +95,45 @@ const di = {
   twelveHourly: "12 hours",
   twoHourly: "2 hours",
   weekly: "1 week"
-}, pi = {
-  renderer: di,
-  queryDataProvider: ui,
-  csvExport: ci,
-  jumpToExplore: fi,
-  query_aged_out_warning: gi,
-  granularities: mi
+}, yi = {
+  renderer: ui,
+  queryDataProvider: ci,
+  csvExport: fi,
+  jumpToExplore: gi,
+  query_aged_out_warning: mi,
+  granularities: pi
 };
-function yi() {
-  const u = ti("en-us", pi);
+function vi() {
+  const u = ii("en-us", yi);
   return {
     i18n: u,
-    i18nT: ii(u)
+    i18nT: si(u)
     // Translation component <i18n-t>
   };
 }
-const Ie = 170, zt = 6, le = "analytics-query-provider", at = "{entity-id}", vi = "{cp-id}", _i = "{timeframe}", wi = 30 * 1e3;
-function bi() {
-  const u = pe(le);
+const qe = 170, Dt = 6, he = "analytics-query-provider", lt = "{entity-id}", _i = "{cp-id}", wi = "{timeframe}", bi = 30 * 1e3;
+function Ei() {
+  const u = ye(he);
   return {
     evaluateFeatureFlag: (t, i) => u ? u.evaluateFeatureFlagFn(t, i) : i
   };
 }
-function Ei(u) {
+function xi(u) {
   return u && u.__esModule && Object.prototype.hasOwnProperty.call(u, "default") ? u.default : u;
 }
-var Dt = { exports: {} };
+var St = { exports: {} };
 (function(u) {
   var e = Object.prototype.hasOwnProperty, t = "~";
   function i() {
   }
   Object.create && (i.prototype = /* @__PURE__ */ Object.create(null), new i().__proto__ || (t = !1));
-  function s(d, h, a) {
-    this.fn = d, this.context = h, this.once = a || !1;
+  function s(d, h, l) {
+    this.fn = d, this.context = h, this.once = l || !1;
   }
-  function r(d, h, a, l, f) {
-    if (typeof a != "function")
+  function r(d, h, l, a, f) {
+    if (typeof l != "function")
       throw new TypeError("The listener must be a function");
-    var m = new s(a, l || d, f), p = t ? t + h : h;
+    var m = new s(l, a || d, f), p = t ? t + h : h;
     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;
   }
   function o(d, h) {
@@ -143,22 +143,22 @@ var Dt = { exports: {} };
     this._events = new i(), this._eventsCount = 0;
   }
   n.prototype.eventNames = function() {
-    var h = [], a, l;
+    var h = [], l, a;
     if (this._eventsCount === 0) return h;
-    for (l in a = this._events)
-      e.call(a, l) && h.push(t ? l.slice(1) : l);
-    return Object.getOwnPropertySymbols ? h.concat(Object.getOwnPropertySymbols(a)) : h;
+    for (a in l = this._events)
+      e.call(l, a) && h.push(t ? a.slice(1) : a);
+    return Object.getOwnPropertySymbols ? h.concat(Object.getOwnPropertySymbols(l)) : h;
   }, n.prototype.listeners = function(h) {
-    var a = t ? t + h : h, l = this._events[a];
-    if (!l) return [];
-    if (l.fn) return [l.fn];
-    for (var f = 0, m = l.length, p = new Array(m); f < m; f++)
-      p[f] = l[f].fn;
+    var l = t ? t + h : h, a = this._events[l];
+    if (!a) return [];
+    if (a.fn) return [a.fn];
+    for (var f = 0, m = a.length, p = new Array(m); f < m; f++)
+      p[f] = a[f].fn;
     return p;
   }, n.prototype.listenerCount = function(h) {
-    var a = t ? t + h : h, l = this._events[a];
-    return l ? l.fn ? 1 : l.length : 0;
-  }, n.prototype.emit = function(h, a, l, f, m, p) {
+    var l = t ? t + h : h, a = this._events[l];
+    return a ? a.fn ? 1 : a.length : 0;
+  }, n.prototype.emit = function(h, l, a, f, m, p) {
     var y = t ? t + h : h;
     if (!this._events[y]) return !1;
     var g = this._events[y], T = arguments.length, k, x;
@@ -167,15 +167,15 @@ var Dt = { exports: {} };
         case 1:
           return g.fn.call(g.context), !0;
         case 2:
-          return g.fn.call(g.context, a), !0;
+          return g.fn.call(g.context, l), !0;
         case 3:
-          return g.fn.call(g.context, a, l), !0;
+          return g.fn.call(g.context, l, a), !0;
         case 4:
-          return g.fn.call(g.context, a, l, f), !0;
+          return g.fn.call(g.context, l, a, f), !0;
         case 5:
-          return g.fn.call(g.context, a, l, f, m), !0;
+          return g.fn.call(g.context, l, a, f, m), !0;
         case 6:
-          return g.fn.call(g.context, a, l, f, m, p), !0;
+          return g.fn.call(g.context, l, a, f, m, p), !0;
       }
       for (x = 1, k = new Array(T - 1); x < T; x++)
         k[x - 1] = arguments[x];
@@ -188,13 +188,13 @@ var Dt = { exports: {} };
             g[x].fn.call(g[x].context);
             break;
           case 2:
-            g[x].fn.call(g[x].context, a);
+            g[x].fn.call(g[x].context, l);
             break;
           case 3:
-            g[x].fn.call(g[x].context, a, l);
+            g[x].fn.call(g[x].context, l, a);
             break;
           case 4:
-            g[x].fn.call(g[x].context, a, l, f);
+            g[x].fn.call(g[x].context, l, a, f);
             break;
           default:
             if (!k) for (C = 1, k = new Array(T - 1); C < T; C++)
@@ -203,46 +203,46 @@ var Dt = { exports: {} };
         }
     }
     return !0;
-  }, n.prototype.on = function(h, a, l) {
-    return r(this, h, a, l, !1);
-  }, n.prototype.once = function(h, a, l) {
-    return r(this, h, a, l, !0);
-  }, n.prototype.removeListener = function(h, a, l, f) {
+  }, n.prototype.on = function(h, l, a) {
+    return r(this, h, l, a, !1);
+  }, n.prototype.once = function(h, l, a) {
+    return r(this, h, l, a, !0);
+  }, n.prototype.removeListener = function(h, l, a, f) {
     var m = t ? t + h : h;
     if (!this._events[m]) return this;
-    if (!a)
+    if (!l)
       return o(this, m), this;
     var p = this._events[m];
     if (p.fn)
-      p.fn === a && (!f || p.once) && (!l || p.context === l) && o(this, m);
+      p.fn === l && (!f || p.once) && (!a || p.context === a) && o(this, m);
     else {
       for (var y = 0, g = [], T = p.length; y < T; y++)
-        (p[y].fn !== a || f && !p[y].once || l && p[y].context !== l) && g.push(p[y]);
+        (p[y].fn !== l || f && !p[y].once || a && p[y].context !== a) && g.push(p[y]);
       g.length ? this._events[m] = g.length === 1 ? g[0] : g : o(this, m);
     }
     return this;
   }, n.prototype.removeAllListeners = function(h) {
-    var a;
-    return h ? (a = t ? t + h : h, this._events[a] && o(this, a)) : (this._events = new i(), this._eventsCount = 0), this;
+    var l;
+    return h ? (l = t ? t + h : h, this._events[l] && o(this, l)) : (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, u.exports = n;
-})(Dt);
-var xi = Dt.exports;
-const Ci = /* @__PURE__ */ Ei(xi);
-class St extends Error {
+})(St);
+var Ci = St.exports;
+const Ri = /* @__PURE__ */ xi(Ci);
+class kt extends Error {
   constructor(e) {
     super(e), this.name = "TimeoutError";
   }
 }
-class Ri extends Error {
+class Ti extends Error {
   constructor(e) {
     super(), this.name = "AbortError", this.message = e;
   }
 }
-const lt = (u) => globalThis.DOMException === void 0 ? new Ri(u) : new DOMException(u), ht = (u) => {
-  const e = u.reason === void 0 ? lt("This operation was aborted.") : u.reason;
-  return e instanceof Error ? e : lt(e);
+const ht = (u) => globalThis.DOMException === void 0 ? new Ti(u) : new DOMException(u), dt = (u) => {
+  const e = u.reason === void 0 ? ht("This operation was aborted.") : u.reason;
+  return e instanceof Error ? e : ht(e);
 };
-function Ti(u, e) {
+function zi(u, e) {
   const {
     milliseconds: t,
     fallback: i,
@@ -250,35 +250,35 @@ function Ti(u, e) {
     customTimers: r = { setTimeout, clearTimeout }
   } = e;
   let o, n;
-  const h = new Promise((a, l) => {
+  const h = new Promise((l, a) => {
     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 && l(ht(m)), n = () => {
-        l(ht(m));
+      m.aborted && a(dt(m)), n = () => {
+        a(dt(m));
       }, m.addEventListener("abort", n, { once: !0 });
     }
     if (t === Number.POSITIVE_INFINITY) {
-      u.then(a, l);
+      u.then(l, a);
       return;
     }
-    const f = new St();
+    const f = new kt();
     o = r.setTimeout.call(void 0, () => {
       if (i) {
         try {
-          a(i());
+          l(i());
         } catch (m) {
-          l(m);
+          a(m);
         }
         return;
       }
-      typeof u.cancel == "function" && u.cancel(), s === !1 ? a() : s instanceof Error ? l(s) : (f.message = s ?? `Promise timed out after ${t} milliseconds`, l(f));
+      typeof u.cancel == "function" && u.cancel(), s === !1 ? l() : s instanceof Error ? a(s) : (f.message = s ?? `Promise timed out after ${t} milliseconds`, a(f));
     }, t), (async () => {
       try {
-        a(await u);
+        l(await u);
       } catch (m) {
-        l(m);
+        a(m);
       }
     })();
   }).finally(() => {
@@ -288,7 +288,7 @@ function Ti(u, e) {
     r.clearTimeout.call(void 0, o), o = void 0;
   }, h;
 }
-function zi(u, e, t) {
+function Di(u, e, t) {
   let i = 0, s = u.length;
   for (; s > 0; ) {
     const r = Math.trunc(s / 2);
@@ -298,7 +298,7 @@ function zi(u, e, t) {
   return i;
 }
 var X;
-class Di {
+class Si {
   constructor() {
     M(this, X, []);
   }
@@ -316,7 +316,7 @@ class Di {
       _(this, X).push(i);
       return;
     }
-    const s = zi(_(this, X), i, (r, o) => o.priority - r.priority);
+    const s = Di(_(this, X), i, (r, o) => o.priority - r.priority);
     _(this, X).splice(s, 0, i);
   }
   setPriority(e, t) {
@@ -338,57 +338,57 @@ class Di {
   }
 }
 X = new WeakMap();
-var de, ue, ne, we, ce, be, j, fe, G, Ee, Q, ge, se, xe, Oe, z, kt, Nt, At, Ht, Ot, Te, Ge, Ue, ze, Lt, De;
-class Si extends Ci {
+var ue, ce, oe, Ee, fe, xe, j, ge, G, Ce, Q, me, re, Re, Me, z, Nt, At, Ht, Ot, Lt, De, Fe, We, Se, Mt, ke;
+class ki extends Ri {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
     super();
     M(this, z);
-    M(this, de);
     M(this, ue);
-    M(this, ne, 0);
-    M(this, we);
     M(this, ce);
-    M(this, be, 0);
-    M(this, j);
+    M(this, oe, 0);
+    M(this, Ee);
     M(this, fe);
+    M(this, xe, 0);
+    M(this, j);
+    M(this, ge);
     M(this, G);
-    M(this, Ee);
+    M(this, Ce);
     M(this, Q, 0);
     // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
-    M(this, ge);
-    M(this, se);
-    M(this, xe);
+    M(this, me);
+    M(this, re);
+    M(this, Re);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
-    M(this, Oe, 1n);
+    M(this, Me, 1n);
     /**
         Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
     
         Applies to each future operation.
         */
-    st(this, "timeout");
+    rt(this, "timeout");
     if (t = {
       carryoverConcurrencyCount: !1,
       intervalCap: Number.POSITIVE_INFINITY,
       interval: 0,
       concurrency: Number.POSITIVE_INFINITY,
       autoStart: !0,
-      queueClass: Di,
+      queueClass: Si,
       ...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})`);
-    H(this, de, t.carryoverConcurrencyCount), H(this, ue, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), H(this, we, t.intervalCap), H(this, ce, t.interval), H(this, G, new t.queueClass()), H(this, Ee, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, H(this, xe, t.throwOnTimeout === !0), H(this, se, t.autoStart === !1);
+    H(this, ue, t.carryoverConcurrencyCount), H(this, ce, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), H(this, Ee, t.intervalCap), H(this, fe, t.interval), H(this, G, new t.queueClass()), H(this, Ce, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, H(this, Re, t.throwOnTimeout === !0), H(this, re, t.autoStart === !1);
   }
   get concurrency() {
-    return _(this, ge);
+    return _(this, me);
   }
   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})`);
-    H(this, ge, t), P(this, z, ze).call(this);
+    H(this, me, t), P(this, z, Se).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -430,30 +430,30 @@ class Si extends Ci {
     _(this, G).setPriority(t, i);
   }
   async add(t, i = {}) {
-    return i.id ?? (i.id = (ye(this, Oe)._++).toString()), i = {
+    return i.id ?? (i.id = (_e(this, Me)._++).toString()), i = {
       timeout: this.timeout,
-      throwOnTimeout: _(this, xe),
+      throwOnTimeout: _(this, Re),
       ...i
     }, new Promise((s, r) => {
       _(this, G).enqueue(async () => {
         var o;
-        ye(this, Q)._++, ye(this, ne)._++;
+        _e(this, Q)._++, _e(this, oe)._++;
         try {
           (o = i.signal) == null || o.throwIfAborted();
           let n = t({ signal: i.signal });
-          i.timeout && (n = Ti(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, P(this, z, Lt).call(this, i.signal)]));
+          i.timeout && (n = zi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, P(this, z, Mt).call(this, i.signal)]));
           const d = await n;
           s(d), this.emit("completed", d);
         } catch (n) {
-          if (n instanceof St && !i.throwOnTimeout) {
+          if (n instanceof kt && !i.throwOnTimeout) {
             s();
             return;
           }
           r(n), this.emit("error", n);
         } finally {
-          P(this, z, At).call(this);
+          P(this, z, Ht).call(this);
         }
-      }, i), this.emit("add"), P(this, z, Te).call(this);
+      }, i), this.emit("add"), P(this, z, De).call(this);
     });
   }
   async addAll(t, i) {
@@ -463,19 +463,19 @@ class Si extends Ci {
   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, se) ? (H(this, se, !1), P(this, z, ze).call(this), this) : this;
+    return _(this, re) ? (H(this, re, !1), P(this, z, Se).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    H(this, se, !0);
+    H(this, re, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    H(this, G, new (_(this, Ee))());
+    H(this, G, new (_(this, Ce))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -483,7 +483,7 @@ class Si extends Ci {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    _(this, G).size !== 0 && await P(this, z, De).call(this, "empty");
+    _(this, G).size !== 0 && await P(this, z, ke).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -493,7 +493,7 @@ class Si extends Ci {
       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, G).size < t || await P(this, z, De).call(this, "next", () => _(this, G).size < t);
+    _(this, G).size < t || await P(this, z, ke).call(this, "next", () => _(this, G).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.
@@ -501,7 +501,7 @@ class Si extends Ci {
       @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
       */
   async onIdle() {
-    _(this, Q) === 0 && _(this, G).size === 0 || await P(this, z, De).call(this, "idle");
+    _(this, Q) === 0 && _(this, G).size === 0 || await P(this, z, ke).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
@@ -527,59 +527,59 @@ class Si extends Ci {
   Whether the queue is currently paused.
   */
   get isPaused() {
-    return _(this, se);
+    return _(this, re);
   }
 }
-de = new WeakMap(), ue = new WeakMap(), ne = new WeakMap(), we = new WeakMap(), ce = new WeakMap(), be = new WeakMap(), j = new WeakMap(), fe = new WeakMap(), G = new WeakMap(), Ee = new WeakMap(), Q = new WeakMap(), ge = new WeakMap(), se = new WeakMap(), xe = new WeakMap(), Oe = new WeakMap(), z = new WeakSet(), kt = function() {
-  return _(this, ue) || _(this, ne) < _(this, we);
-}, Nt = function() {
-  return _(this, Q) < _(this, ge);
+ue = new WeakMap(), ce = new WeakMap(), oe = new WeakMap(), Ee = new WeakMap(), fe = new WeakMap(), xe = new WeakMap(), j = new WeakMap(), ge = new WeakMap(), G = new WeakMap(), Ce = new WeakMap(), Q = new WeakMap(), me = new WeakMap(), re = new WeakMap(), Re = new WeakMap(), Me = new WeakMap(), z = new WeakSet(), Nt = function() {
+  return _(this, ce) || _(this, oe) < _(this, Ee);
 }, At = function() {
-  ye(this, Q)._--, P(this, z, Te).call(this), this.emit("next");
+  return _(this, Q) < _(this, me);
 }, Ht = function() {
-  P(this, z, Ue).call(this), P(this, z, Ge).call(this), H(this, fe, void 0);
+  _e(this, Q)._--, P(this, z, De).call(this), this.emit("next");
 }, Ot = function() {
+  P(this, z, We).call(this), P(this, z, Fe).call(this), H(this, ge, void 0);
+}, Lt = function() {
   const t = Date.now();
   if (_(this, j) === void 0) {
-    const i = _(this, be) - t;
+    const i = _(this, xe) - t;
     if (i < 0)
-      H(this, ne, _(this, de) ? _(this, Q) : 0);
+      H(this, oe, _(this, ue) ? _(this, Q) : 0);
     else
-      return _(this, fe) === void 0 && H(this, fe, setTimeout(() => {
-        P(this, z, Ht).call(this);
+      return _(this, ge) === void 0 && H(this, ge, setTimeout(() => {
+        P(this, z, Ot).call(this);
       }, i)), !0;
   }
   return !1;
-}, Te = function() {
+}, De = function() {
   if (_(this, G).size === 0)
     return _(this, j) && clearInterval(_(this, j)), H(this, j, void 0), this.emit("empty"), _(this, Q) === 0 && this.emit("idle"), !1;
-  if (!_(this, se)) {
-    const t = !_(this, z, Ot);
-    if (_(this, z, kt) && _(this, z, Nt)) {
+  if (!_(this, re)) {
+    const t = !_(this, z, Lt);
+    if (_(this, z, Nt) && _(this, z, At)) {
       const i = _(this, G).dequeue();
-      return i ? (this.emit("active"), i(), t && P(this, z, Ge).call(this), !0) : !1;
+      return i ? (this.emit("active"), i(), t && P(this, z, Fe).call(this), !0) : !1;
     }
   }
   return !1;
-}, Ge = function() {
-  _(this, ue) || _(this, j) !== void 0 || (H(this, j, setInterval(() => {
-    P(this, z, Ue).call(this);
-  }, _(this, ce))), H(this, be, Date.now() + _(this, ce)));
-}, Ue = function() {
-  _(this, ne) === 0 && _(this, Q) === 0 && _(this, j) && (clearInterval(_(this, j)), H(this, j, void 0)), H(this, ne, _(this, de) ? _(this, Q) : 0), P(this, z, ze).call(this);
+}, Fe = function() {
+  _(this, ce) || _(this, j) !== void 0 || (H(this, j, setInterval(() => {
+    P(this, z, We).call(this);
+  }, _(this, fe))), H(this, xe, Date.now() + _(this, fe)));
+}, We = function() {
+  _(this, oe) === 0 && _(this, Q) === 0 && _(this, j) && (clearInterval(_(this, j)), H(this, j, void 0)), H(this, oe, _(this, ue) ? _(this, Q) : 0), P(this, z, Se).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
-ze = function() {
-  for (; P(this, z, Te).call(this); )
+Se = function() {
+  for (; P(this, z, De).call(this); )
     ;
-}, Lt = async function(t) {
+}, Mt = async function(t) {
   return new Promise((i, s) => {
     t.addEventListener("abort", () => {
       s(t.reason);
     }, { once: !0 });
   });
-}, De = async function(t, i) {
+}, ke = async function(t, i) {
   return new Promise((s) => {
     const r = () => {
       i && !i() || (this.off(t, r), s());
@@ -587,15 +587,15 @@ ze = function() {
     this.on(t, r);
   });
 };
-const ki = () => {
-  const u = Rt(), e = pe(le);
+const Ni = () => {
+  const u = Tt(), e = ye(he);
   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 Si({
+  const t = new ki({
     carryoverConcurrencyCount: !0,
     concurrency: u.maxParallelRequests,
     interval: u.requestInterval,
@@ -605,12 +605,12 @@ const ki = () => {
     queryFnOverride: !0,
     queryFn: (s, r) => t.add(() => e.queryFn(s, r), { throwOnTimeout: !0 })
   };
-  Gt(le, i);
-}, me = {
-  useI18n: yi,
-  useEvaluateFeatureFlag: bi,
-  useRequestQueue: ki
-}, je = /* @__PURE__ */ K({
+  Gt(he, i);
+}, pe = {
+  useI18n: vi,
+  useEvaluateFeatureFlag: Ei,
+  useRequestQueue: Ni
+}, Ze = /* @__PURE__ */ K({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -620,14 +620,14 @@ const ki = () => {
   },
   emits: ["chart-data", "queryComplete"],
   setup(u, { emit: e }) {
-    const t = u, i = e, { i18n: s } = me.useI18n(), r = pe(le), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
-    Fe(() => {
+    const t = u, i = e, { i18n: s } = pe.useI18n(), r = ye(he), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    Ve(() => {
       n.abort();
     });
     const d = (T, k, x) => {
       const L = [];
-      return k && L.push(...k), L.push(...Kt(T, x)), L;
-    }, { data: h, error: a, isValidating: l } = ei(o, async () => {
+      return k && L.push(...k), L.push(...Yt(T, x)), L;
+    }, { data: h, error: l, isValidating: a } = ti(o, async () => {
       var T, k, x, L;
       try {
         let {
@@ -661,11 +661,11 @@ const ki = () => {
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: f, swrvState: m } = hi(h, a, l), p = U(null), y = A(() => f.value === m.ERROR || !!p.value), g = A(() => !t.queryReady || f.value === m.PENDING);
-    return We(h, (T) => {
+    }), { state: f, swrvState: m } = di(h, l, a), p = U(null), y = A(() => f.value === m.ERROR || !!p.value), g = A(() => !t.queryReady || f.value === m.PENDING);
+    return Ke(h, (T) => {
       T && i("chart-data", T);
     }), (T, k) => {
-      const x = oe("KSkeleton"), L = oe("KEmptyState");
+      const x = ae("KSkeleton"), L = ae("KEmptyState");
       return g.value || !D(h) && !y.value ? (R(), O(x, {
         key: 0,
         class: "chart-skeleton",
@@ -677,16 +677,16 @@ const ki = () => {
         "icon-variant": "error"
       }, {
         default: I(() => [
-          Me(J(p.value), 1)
+          Pe(J(p.value), 1)
         ]),
         _: 1
-      })) : D(h) ? Le(T.$slots, "default", {
+      })) : D(h) ? Ie(T.$slots, "default", {
         key: 2,
         data: D(h)
       }) : Y("", !0);
     };
   }
-}), Ni = /* @__PURE__ */ K({
+}), Ai = /* @__PURE__ */ K({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -697,21 +697,21 @@ const ki = () => {
     refreshCounter: {}
   },
   setup(u) {
-    Ve((i) => ({
+    Ye((i) => ({
       "088169ae": `${i.height}px`
     }));
     const e = u, t = A(() => e.chartOptions.type === "single_value");
-    return (i, s) => (R(), O(je, {
+    return (i, s) => (R(), O(Ze, {
       context: i.context,
       query: i.query,
       "query-ready": i.queryReady,
       "refresh-counter": i.refreshCounter
     }, {
       default: I(({ data: r }) => [
-        re("div", {
-          class: Ke(["analytics-chart", { "single-value": t.value }])
+        ne("div", {
+          class: Xe(["analytics-chart", { "single-value": t.value }])
         }, [
-          ie(D(jt), {
+          ie(D(Qt), {
             "chart-data": r,
             "chart-options": i.chartOptions,
             "synthetics-data-key": t.value ? void 0 : i.chartOptions.synthetics_data_key
@@ -721,12 +721,12 @@ const ki = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), he = (u, e) => {
+}), de = (u, e) => {
   const t = u.__vccOpts || u;
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, dt = /* @__PURE__ */ he(Ni, [["__scopeId", "data-v-1e9ff912"]]), Ai = { class: "analytics-chart" }, Hi = /* @__PURE__ */ K({
+}, ut = /* @__PURE__ */ de(Ai, [["__scopeId", "data-v-1e9ff912"]]), Hi = { class: "analytics-chart" }, Oi = /* @__PURE__ */ K({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -739,45 +739,45 @@ const ki = () => {
   },
   emits: ["edit-tile", "chart-data", "zoom-time-range"],
   setup(u, { emit: e }) {
-    const t = u, i = e, { i18n: s } = me.useI18n(), { evaluateFeatureFlag: r } = me.useEvaluateFeatureFlag(), o = r("explore-v4-fine-granularity", !1), n = A(() => ({
+    const t = u, i = e, { i18n: s } = pe.useI18n(), { evaluateFeatureFlag: r } = pe.useEvaluateFeatureFlag(), o = r("explore-v4-fine-granularity", !1), n = A(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chart_dataset_colors,
       threshold: t.chartOptions.threshold
-    })), d = () => {
+    })), d = A(() => o && t.context.zoomable && !t.query.time_range), h = () => {
       i("edit-tile");
-    }, h = (a) => {
+    }, l = (a) => {
       i("chart-data", a);
     };
-    return (a, l) => {
-      const f = oe("KDropdownItem");
-      return R(), O(je, {
+    return (a, f) => {
+      const m = ae("KDropdownItem");
+      return R(), O(Ze, {
         context: a.context,
         query: a.query,
         "query-ready": a.queryReady,
         "refresh-counter": a.refreshCounter,
-        onChartData: h
+        onChartData: l
       }, {
-        default: I(({ data: m }) => [
-          re("div", Ai, [
-            ie(D(Qt), _t({
+        default: I(({ data: p }) => [
+          ne("div", Hi, [
+            ie(D(Zt), wt({
               "allow-csv-export": a.chartOptions.allow_csv_export,
-              "chart-data": m,
+              "chart-data": p,
               "chart-options": n.value,
               "legend-position": "bottom",
               "show-menu": a.context.editable,
               "synthetics-data-key": a.chartOptions.synthetics_data_key,
-              "timeseries-zoom": D(o) && !a.query.time_range,
+              "timeseries-zoom": d.value,
               "tooltip-title": ""
             }, a.extraProps, {
-              onZoomTimeRange: l[0] || (l[0] = (p) => i("zoom-time-range", p))
-            }), Ye({ _: 2 }, [
+              onZoomTimeRange: f[0] || (f[0] = (y) => i("zoom-time-range", y))
+            }), je({ _: 2 }, [
               a.context.editable ? {
                 name: "menu-items",
                 fn: I(() => [
-                  ie(f, { onClick: d }, {
+                  ie(m, { onClick: h }, {
                     default: I(() => [
-                      Me(J(D(s).t("renderer.edit")), 1)
+                      Pe(J(D(s).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -791,7 +791,7 @@ const ki = () => {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Qe = /* @__PURE__ */ he(Hi, [["__scopeId", "data-v-02fd51d1"]]), ut = /* @__PURE__ */ K({
+}), Je = /* @__PURE__ */ de(Oi, [["__scopeId", "data-v-5a151d86"]]), ct = /* @__PURE__ */ K({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -802,7 +802,7 @@ const ki = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (R(), O(Qe, {
+    return (e, t) => (R(), O(Je, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -812,7 +812,7 @@ const ki = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ct = /* @__PURE__ */ K({
+}), ft = /* @__PURE__ */ K({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -825,7 +825,7 @@ const ki = () => {
   emits: ["zoom-time-range"],
   setup(u, { emit: e }) {
     const t = e;
-    return (i, s) => (R(), O(Qe, {
+    return (i, s) => (R(), O(Je, {
       "chart-options": i.chartOptions,
       context: i.context,
       height: i.height,
@@ -835,7 +835,7 @@ const ki = () => {
       onZoomTimeRange: s[0] || (s[0] = (r) => t("zoom-time-range", r))
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Oi = { class: "metric-card-tile-wrapper" }, Li = /* @__PURE__ */ K({
+}), Li = { class: "metric-card-tile-wrapper" }, Mi = /* @__PURE__ */ K({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -849,7 +849,7 @@ const ki = () => {
     const e = u, t = A(() => {
       const s = e.context.timeSpec;
       if (s.type === "absolute")
-        return new Yt({
+        return new Xt({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
@@ -861,7 +861,7 @@ const ki = () => {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const r = Ct.get(s.time_range);
+      const r = Rt.get(s.time_range);
       if (!r)
         throw new Error("Unknown time range");
       return r;
@@ -883,27 +883,27 @@ const ki = () => {
         refreshCounter: e.refreshCounter
       };
     });
-    return (s, r) => (R(), F("div", Oi, [
-      ie(D(si), Ut(Ft(i.value)), {
+    return (s, r) => (R(), F("div", Li, [
+      ie(D(ri), Ut(Ft(i.value)), {
         default: I(() => [
-          ie(D(ri))
+          ie(D(ni))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), Mi = /* @__PURE__ */ he(Li, [["__scopeId", "data-v-b7e09724"]]), ft = "#6c7489", Ii = "12px", gt = "20px", Mt = "20px", Pi = {
+}), Ii = /* @__PURE__ */ de(Mi, [["__scopeId", "data-v-b7e09724"]]), gt = "#6c7489", Pi = "12px", mt = "20px", It = "20px", qi = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
-}, mt = /* @__PURE__ */ K({
+}, pt = /* @__PURE__ */ K({
   __name: "FallbackEntityLink",
   props: {
     entityLinkData: {}
   },
   setup(u) {
-    return (e, t) => (R(), F("div", Pi, J(e.entityLinkData.label), 1));
+    return (e, t) => (R(), F("div", qi, J(e.entityLinkData.label), 1));
   }
-}), qi = /* @__PURE__ */ K({
+}), Bi = /* @__PURE__ */ K({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -914,35 +914,35 @@ const ki = () => {
     refreshCounter: {}
   },
   setup(u) {
-    const e = u, t = pe(le), i = Wt(async () => {
+    const e = u, t = ye(he), i = Wt(async () => {
       if (t != null && t.fetchComponent)
         try {
           return await t.fetchComponent("EntityLink");
         } catch {
-          return mt;
+          return pt;
         }
-      return mt;
+      return pt;
     }), s = (r) => {
       var o;
       if ((o = e.chartOptions) != null && o.entity_link)
         if (r.id.includes(":")) {
           const [n, d] = r.id.split(":");
-          return e.chartOptions.entity_link.replace(vi, n).replace(at, d);
+          return e.chartOptions.entity_link.replace(_i, n).replace(lt, d);
         } else
-          return e.chartOptions.entity_link.replace(at, r.id);
+          return e.chartOptions.entity_link.replace(lt, r.id);
       return "";
     };
-    return (r, o) => (R(), O(je, {
+    return (r, o) => (R(), O(Ze, {
       context: r.context,
       query: r.query,
       "query-ready": r.queryReady,
       "refresh-counter": r.refreshCounter
     }, {
       default: I(({ data: n }) => [
-        ie(D(Zt), {
+        ie(D(Jt), {
           data: n,
           "synthetics-data-key": r.chartOptions.synthetics_data_key
-        }, Ye({ _: 2 }, [
+        }, je({ _: 2 }, [
           e.chartOptions.entity_link ? {
             name: "name",
             fn: I(({ record: d }) => [
@@ -962,7 +962,7 @@ const ki = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), Bi = /* @__PURE__ */ K({
+}), $i = /* @__PURE__ */ K({
   __name: "DonutChartRenderer",
   props: {
     query: {},
@@ -973,7 +973,7 @@ const ki = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (R(), O(Qe, {
+    return (e, t) => (R(), O(Je, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -982,33 +982,33 @@ const ki = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), $i = ["data-testid"], Gi = {
+}), Gi = ["data-testid"], Ui = {
   key: 0,
   class: "tile-header"
-}, Ui = ["data-testid"], Fi = { class: "badge-text" }, Wi = ["data-testid"], Vi = { class: "delete-option" }, Ki = ["data-testid"], Yi = ["data-testid"], Xi = /* @__PURE__ */ K({
+}, Fi = ["data-testid"], Wi = { class: "badge-text" }, Vi = ["data-testid"], Ki = { class: "delete-option" }, Yi = ["data-testid"], Xi = ["data-testid"], ji = /* @__PURE__ */ K({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: Ie },
+    height: { default: qe },
     queryReady: { type: Boolean },
     refreshCounter: {},
     tileId: {}
   },
   emits: ["edit-tile", "duplicate-tile", "remove-tile", "zoom-time-range"],
   setup(u, { emit: e }) {
-    Ve((v) => ({
+    Ye((v) => ({
       "55e9146d": `${v.height}px`
     }));
-    const t = parseInt(Mt, 10), i = u, s = e, r = pe(le), { i18n: o } = me.useI18n(), n = U(), d = U(!1), h = U(), a = U(!1), l = U("");
-    Xe(async () => {
+    const t = parseInt(It, 10), i = u, s = e, r = ye(he), { i18n: o } = pe.useI18n(), n = U(), d = U(!1), h = U(), l = U(!1), a = U("");
+    Qe(async () => {
       var v;
-      l.value = await ((v = r == null ? void 0 : r.exploreBaseUrl) == null ? void 0 : v.call(r)) ?? "";
-    }), We(() => i.definition, async () => {
-      await wt(), h.value && (a.value = h.value.scrollWidth > h.value.clientWidth);
+      a.value = await ((v = r == null ? void 0 : r.exploreBaseUrl) == null ? void 0 : v.call(r)) ?? "";
+    }), Ke(() => i.definition, async () => {
+      await bt(), h.value && (l.value = h.value.scrollWidth > h.value.clientWidth);
     }, { immediate: !0, deep: !0 });
     const f = A(() => {
-      if (!l.value || !i.definition.query || !y.value)
+      if (!a.value || !i.definition.query || !y.value)
         return "";
       const v = [...i.context.filters, ...i.definition.query.filters ?? []], W = i.definition.query.dimensions ?? [], B = {
         filters: v,
@@ -1016,19 +1016,19 @@ const ki = () => {
         dimensions: W,
         time_range: i.definition.query.time_range || i.context.timeSpec,
         granularity: i.definition.query.granularity || L.value
-      }, qe = ["api_usage", "llm_usage"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "api_usage";
-      return `${l.value}?q=${JSON.stringify(B)}&d=${qe}&c=${i.definition.chart.type}`;
+      }, $e = ["api_usage", "llm_usage"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "api_usage";
+      return `${a.value}?q=${JSON.stringify(B)}&d=${$e}&c=${i.definition.chart.type}`;
     }), m = A(() => o.t("csvExport.defaultFilename")), p = A(() => y.value && (g.value || i.context.editable) || !!x.value), y = A(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), g = A(() => !!f.value || "allow_csv_export" in i.definition.chart && i.definition.chart.allow_csv_export || i.context.editable), T = {
-      timeseries_line: ct,
-      timeseries_bar: ct,
-      horizontal_bar: ut,
-      vertical_bar: ut,
-      gauge: dt,
-      donut: Bi,
-      golden_signals: Mi,
-      top_n: qi,
+      timeseries_line: ft,
+      timeseries_bar: ft,
+      horizontal_bar: ct,
+      vertical_bar: ct,
+      gauge: ut,
+      donut: $i,
+      golden_signals: Ii,
+      top_n: Bi,
       slottable: void 0,
-      single_value: dt
+      single_value: ut
     }, k = A(() => {
       const v = T[i.definition.chart.type];
       return v && {
@@ -1046,20 +1046,20 @@ const ki = () => {
       var W;
       const v = (W = i.definition.query) == null ? void 0 : W.time_range;
       if ((v == null ? void 0 : v.type) === "relative") {
-        const B = Ct.get(Xt[v.time_range]);
+        const B = Rt.get(jt[v.time_range]);
         return B ? B.display : (console.warn("Did not recognize the given relative time range:", v.time_range), v.time_range);
       } else if ((v == null ? void 0 : v.type) === "absolute") {
         const B = v.tz || "Etc/UTC";
-        return `${ot(v.start, { short: !0, tz: B })} - ${ot(v.end, { short: !0, tz: B })}`;
+        return `${at(v.start, { short: !0, tz: B })} - ${at(v.end, { short: !0, tz: B })}`;
       }
       return null;
-    }), L = A(() => n.value ? $e(n.value.meta.granularity_ms) : void 0), C = A(() => ["timeseries_line", "timeseries_bar"].includes(i.definition.chart.type)), E = A(() => {
+    }), L = A(() => n.value ? Ue(n.value.meta.granularity_ms) : void 0), C = A(() => ["timeseries_line", "timeseries_bar"].includes(i.definition.chart.type)), E = A(() => {
       var B;
-      const v = i.definition.query.granularity, W = $e(((B = n.value) == null ? void 0 : B.meta.granularity_ms) || 0);
+      const v = i.definition.query.granularity, W = Ue(((B = n.value) == null ? void 0 : B.meta.granularity_ms) || 0);
       return C.value && v !== W;
     }), N = A(() => {
       var B;
-      const v = $e(((B = n.value) == null ? void 0 : B.meta.granularity_ms) || 0), W = i.definition.query.granularity;
+      const v = Ue(((B = n.value) == null ? void 0 : B.meta.granularity_ms) || 0), W = i.definition.query.granularity;
       return o.t("query_aged_out_warning", {
         currentGranularity: o.t(`granularities.${v}`),
         savedGranularity: o.t(`granularities.${W}`)
@@ -1068,30 +1068,30 @@ const ki = () => {
       s("edit-tile", i.definition);
     }, q = () => {
       s("duplicate-tile", i.definition);
-    }, ae = () => {
+    }, se = () => {
       s("remove-tile", i.definition);
-    }, Ce = (v) => {
+    }, le = (v) => {
       n.value = v;
-    }, et = (v) => {
+    }, ve = (v) => {
       d.value = v;
-    }, Pt = () => {
-      et(!0);
+    }, Te = () => {
+      ve(!0);
     };
     return (v, W) => {
-      const B = oe("KTooltip"), qe = oe("KBadge"), Re = oe("KDropdownItem"), qt = oe("KDropdown");
+      const B = ae("KTooltip"), $e = ae("KBadge"), ze = ae("KDropdownItem"), qt = ae("KDropdown");
       return R(), F("div", {
-        class: Ke(["tile-boundary", { editable: v.context.editable }]),
+        class: Xe(["tile-boundary", { editable: v.context.editable }]),
         "data-testid": `tile-${v.tileId}`
       }, [
-        v.definition.chart.type !== "slottable" ? (R(), F("div", Gi, [
+        v.definition.chart.type !== "slottable" ? (R(), F("div", Ui, [
           ie(B, {
             class: "title-tooltip",
-            disabled: !a.value,
+            disabled: !l.value,
             "max-width": "500",
             text: v.definition.chart.chart_title
           }, {
             default: I(() => [
-              re("div", {
+              ne("div", {
                 ref_key: "titleRef",
                 ref: h,
                 class: "title"
@@ -1104,31 +1104,31 @@ const ki = () => {
             class: "tile-actions",
             "data-testid": `tile-actions-${v.tileId}`
           }, [
-            x.value ? (R(), O(qe, {
+            x.value ? (R(), O($e, {
               key: 0,
               "data-testid": "time-range-badge",
               tooltip: E.value ? N.value : void 0,
               "tooltip-attributes": { maxWidth: "320px" }
-            }, Ye({
+            }, je({
               default: I(() => [
-                re("span", Fi, J(x.value), 1)
+                ne("span", Wi, J(x.value), 1)
               ]),
               _: 2
             }, [
               E.value ? {
                 name: "icon",
                 fn: I(() => [
-                  ie(D(ni), { size: D(Ii) }, null, 8, ["size"])
+                  ie(D(oi), { size: D(Pi) }, null, 8, ["size"])
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["tooltip"])) : Y("", !0),
-            y.value && v.context.editable ? (R(), O(D(oi), {
+            y.value && v.context.editable ? (R(), O(D(ai), {
               key: 1,
               class: "edit-icon",
-              color: D(ft),
+              color: D(gt),
               "data-testid": `edit-tile-${v.tileId}`,
-              size: D(gt),
+              size: D(mt),
               onClick: S
             }, null, 8, ["color", "data-testid", "size"])) : Y("", !0),
             y.value && g.value ? (R(), O(qt, {
@@ -1138,82 +1138,82 @@ const ki = () => {
               "kpop-attributes": { placement: "bottom-end" }
             }, {
               items: I(() => [
-                f.value ? (R(), O(Re, {
+                f.value ? (R(), O(ze, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${v.tileId}`,
                   item: { label: D(o).t("jumpToExplore"), to: f.value }
                 }, null, 8, ["data-testid", "item"])) : Y("", !0),
-                !("allowCsvExport" in v.definition.chart) || v.definition.chart.allowCsvExport ? (R(), O(Re, {
+                !("allowCsvExport" in v.definition.chart) || v.definition.chart.allowCsvExport ? (R(), O(ze, {
                   key: 1,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${v.tileId}`,
-                  onClick: W[0] || (W[0] = (tt) => Pt())
+                  onClick: W[0] || (W[0] = (it) => Te())
                 }, {
                   default: I(() => [
-                    re("span", {
+                    ne("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${v.tileId}`
-                    }, J(D(o).t("csvExport.exportAsCsv")), 9, Wi)
+                    }, J(D(o).t("csvExport.exportAsCsv")), 9, Vi)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0),
-                v.context.editable ? (R(), O(Re, {
+                v.context.editable ? (R(), O(ze, {
                   key: 2,
                   "data-testid": `duplicate-tile-${v.tileId}`,
                   onClick: q
                 }, {
                   default: I(() => [
-                    Me(J(D(o).t("renderer.duplicateTile")), 1)
+                    Pe(J(D(o).t("renderer.duplicateTile")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0),
-                v.context.editable ? (R(), O(Re, {
+                v.context.editable ? (R(), O(ze, {
                   key: 3,
                   "data-testid": `remove-tile-${v.tileId}`,
-                  onClick: ae
+                  onClick: se
                 }, {
                   default: I(() => [
-                    re("span", Vi, J(D(o).t("renderer.delete")), 1)
+                    ne("span", Ki, J(D(o).t("renderer.delete")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0)
               ]),
               default: I(() => [
-                ie(D(ai), {
+                ie(D(li), {
                   class: "kebab-action-menu",
-                  color: D(ft),
+                  color: D(gt),
                   "data-testid": `kebab-action-menu-${v.tileId}`,
-                  size: D(gt)
+                  size: D(mt)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
             }, 8, ["data-testid"])) : Y("", !0)
-          ], 8, Ui)) : "description" in v.definition.chart ? (R(), F("div", {
+          ], 8, Fi)) : "description" in v.definition.chart ? (R(), F("div", {
             key: 1,
             class: "header-description",
             "data-testid": `tile-description-${v.tileId}`
-          }, J(v.definition.chart.description), 9, Ki)) : Y("", !0),
-          d.value ? (R(), O(D(Jt), {
+          }, J(v.definition.chart.description), 9, Yi)) : Y("", !0),
+          d.value ? (R(), O(D(ei), {
             key: 2,
             "chart-data": n.value,
             "data-testid": `csv-export-modal-${v.tileId}`,
             filename: m.value,
-            onToggleModal: et
+            onToggleModal: ve
           }, null, 8, ["chart-data", "data-testid", "filename"])) : Y("", !0)
         ])) : Y("", !0),
-        re("div", {
+        ne("div", {
           class: "tile-content",
           "data-testid": `tile-content-${v.tileId}`
         }, [
-          k.value ? (R(), O(bt(k.value.component), _t({ key: 0 }, k.value.rendererProps, {
-            onChartData: Ce,
-            onZoomTimeRange: W[1] || (W[1] = (tt) => s("zoom-time-range", tt))
+          k.value ? (R(), O(Et(k.value.component), wt({ key: 0 }, k.value.rendererProps, {
+            onChartData: le,
+            onZoomTimeRange: W[1] || (W[1] = (it) => s("zoom-time-range", it))
           }), null, 16)) : Y("", !0)
-        ], 8, Yi)
-      ], 10, $i);
+        ], 8, Xi)
+      ], 10, Gi);
     };
   }
-}), ji = /* @__PURE__ */ he(Xi, [["__scopeId", "data-v-e4d72a27"]]), Qi = (u, e) => {
+}), Qi = /* @__PURE__ */ de(ji, [["__scopeId", "data-v-e4d72a27"]]), Zi = (u, e) => {
   let t = 0;
   const i = /* @__PURE__ */ new Map();
   e.forEach((r) => {
@@ -1224,13 +1224,13 @@ const ki = () => {
   for (let r = 0; r < t; r++)
     i.get(r) ? s.push("auto") : s.push(`${u}px`);
   return s;
-}, Zi = /* @__PURE__ */ K({
+}, Ji = /* @__PURE__ */ K({
   __name: "GridLayout",
   props: {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => Ie
+      default: () => qe
     },
     tiles: {
       type: Array,
@@ -1238,8 +1238,8 @@ const ki = () => {
     }
   },
   setup(u) {
-    Ve((n) => ({
-      "2a38e79e": D(zt),
+    Ye((n) => ({
+      "2a38e79e": D(Dt),
       "4cc71de6": r.value
     }));
     const e = u, t = U(null), i = U(0), s = new ResizeObserver((n) => {
@@ -1247,12 +1247,12 @@ const ki = () => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    Xe(() => {
+    Qe(() => {
       t.value && s.observe(t.value);
-    }), Fe(() => {
+    }), Ve(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = A(() => Qi(e.tileHeight, e.tiles).join(" ")), o = A(() => e.tiles.map((n, d) => ({
+    const r = A(() => Zi(e.tileHeight, e.tiles).join(" ")), o = A(() => e.tiles.map((n, d) => ({
       key: `tile-${d}`,
       tile: n,
       style: {
@@ -1267,22 +1267,22 @@ const ki = () => {
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (R(!0), F(Et, null, xt(o.value, (h) => (R(), F("div", {
+      (R(!0), F(xt, null, Ct(o.value, (h) => (R(), F("div", {
         key: h.key,
-        class: Ke(["grid-cell", {
+        class: Xe(["grid-cell", {
           "empty-cell": !h.tile
         }]),
-        style: rt(h.style)
+        style: nt(h.style)
       }, [
-        Le(n.$slots, "tile", {
-          style: rt(h.style),
+        Ie(n.$slots, "tile", {
+          style: nt(h.style),
           tile: h.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), Ji = /* @__PURE__ */ he(Zi, [["__scopeId", "data-v-354b7177"]]);
-function es(u, e, t, i, s) {
+}), es = /* @__PURE__ */ de(Ji, [["__scopeId", "data-v-354b7177"]]);
+function ts(u, e, t, i, s) {
   const r = (...o) => (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(u, o));
   return r.prototype = e.prototype, r;
 }
@@ -1674,8 +1674,8 @@ class ee {
       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 a = { ...t, y: i.y + i.h, ...n };
-        h = this._loading && c.samePos(e, a) ? !0 : this.moveNode(e, a), (i.locked || this._loading) && h ? c.copyPos(t, e) : !i.locked && h && s.pack && (this._packNodes(), t.y = i.y + i.h, c.copyPos(e, t)), o = o || h;
+        const l = { ...t, y: i.y + i.h, ...n };
+        h = this._loading && c.samePos(e, l) ? !0 : this.moveNode(e, l), (i.locked || this._loading) && h ? c.copyPos(t, e) : !i.locked && h && s.pack && (this._packNodes(), t.y = i.y + i.h, c.copyPos(e, t)), o = o || h;
       } else
         h = this.moveNode(i, { ...i, y: t.y + t.h, skip: e, ...n });
       if (!h)
@@ -1704,9 +1704,9 @@ class ee {
       if (d.locked || !d._rect)
         break;
       const h = d._rect;
-      let a = Number.MAX_VALUE, l = Number.MAX_VALUE;
-      s.y < h.y ? a = (r.y + r.h - h.y) / h.h : s.y + s.h > h.y + h.h && (a = (h.y + h.h - r.y) / h.h), s.x < h.x ? l = (r.x + r.w - h.x) / h.w : s.x + s.w > h.x + h.w && (l = (h.x + h.w - r.x) / h.w);
-      const f = Math.min(l, a);
+      let l = Number.MAX_VALUE, a = Number.MAX_VALUE;
+      s.y < h.y ? l = (r.y + r.h - h.y) / h.h : s.y + s.h > h.y + h.h && (l = (h.y + h.h - r.y) / h.h), s.x < h.x ? a = (r.x + r.w - h.x) / h.w : s.x + s.w > h.x + h.w && (a = (h.x + h.w - r.x) / h.w);
+      const f = Math.min(a, l);
       f > n && (n = f, o = d);
     }
     return t.collide = o, o;
@@ -1884,8 +1884,8 @@ class ee {
       const d = n % i, h = Math.floor(n / i);
       if (d + e.w > i)
         continue;
-      const a = { x: d, y: h, w: e.w, h: e.h };
-      t.find((l) => c.isIntercepted(a, l)) || ((e.x !== d || e.y !== h) && (e._dirty = !0), e.x = d, e.y = h, delete e.autoPosition, o = !0);
+      const l = { x: d, y: h, w: e.w, h: e.h };
+      t.find((a) => c.isIntercepted(l, a)) || ((e.x !== d || e.y !== h) && (e._dirty = !0), e.x = d, e.y = h, delete e.autoPosition, o = !0);
     }
     return o;
   }
@@ -1952,7 +1952,7 @@ class ee {
   }
   /** return true if the passed in node was actually moved (checks for no-op and locked) */
   moveNode(e, t) {
-    var h, a;
+    var h, l;
     if (!e || /*node.locked ||*/
     !t)
       return !1;
@@ -1964,9 +1964,9 @@ class ee {
     const o = c.copyPos({}, e), n = this.collideAll(e, r, t.skip);
     let d = !0;
     if (n.length) {
-      const l = e._moving && !t.nested;
-      let f = l ? this.directionCollideCoverage(e, t, n) : n[0];
-      if (l && f && ((a = (h = e.grid) == null ? void 0 : h.opts) != null && a.subGridDynamic) && !e.grid._isTemp) {
+      const a = e._moving && !t.nested;
+      let f = a ? this.directionCollideCoverage(e, t, n) : n[0];
+      if (a && f && ((l = (h = e.grid) == null ? void 0 : h.opts) != null && l.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);
       }
@@ -1990,7 +1990,7 @@ class ee {
     var o;
     const i = (o = this._layouts) == null ? void 0 : o.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((a) => a._id === n._id), h = { ...n, ...d || {} };
+      const d = s == null ? void 0 : s.find((l) => l._id === n._id), h = { ...n, ...d || {} };
       c.removeInternalForSave(h, !e), t && t(n, h), r.push(h);
     }), r;
   }
@@ -2031,18 +2031,18 @@ class ee {
     let r = [], o = s ? this.nodes : c.sort(this.nodes, -1);
     if (t > e && this._layouts) {
       const d = this._layouts[t] || [], h = this._layouts.length - 1;
-      !d.length && e !== h && ((n = this._layouts[h]) != null && n.length) && (e = h, this._layouts[h].forEach((a) => {
-        const l = o.find((f) => f._id === a._id);
-        l && (!s && !a.autoPosition && (l.x = a.x ?? l.x, l.y = a.y ?? l.y), l.w = a.w ?? l.w, (a.x == null || a.y === void 0) && (l.autoPosition = !0));
-      })), d.forEach((a) => {
-        const l = o.findIndex((f) => f._id === a._id);
-        if (l !== -1) {
-          const f = o[l];
+      !d.length && e !== h && ((n = this._layouts[h]) != null && n.length) && (e = h, this._layouts[h].forEach((l) => {
+        const a = o.find((f) => f._id === l._id);
+        a && (!s && !l.autoPosition && (a.x = l.x ?? a.x, a.y = l.y ?? a.y), a.w = l.w ?? a.w, (l.x == null || l.y === void 0) && (a.autoPosition = !0));
+      })), d.forEach((l) => {
+        const a = o.findIndex((f) => f._id === l._id);
+        if (a !== -1) {
+          const f = o[a];
           if (s) {
-            f.w = a.w;
+            f.w = l.w;
             return;
           }
-          (a.autoPosition || isNaN(a.x) || isNaN(a.y)) && this.findEmptyPosition(a, r), a.autoPosition || (f.x = a.x ?? f.x, f.y = a.y ?? f.y, f.w = a.w ?? f.w, r.push(f)), o.splice(l, 1);
+          (l.autoPosition || isNaN(l.x) || isNaN(l.y)) && this.findEmptyPosition(l, r), l.autoPosition || (f.x = l.x ?? f.x, f.y = l.y ?? f.y, f.w = l.w ?? f.w, r.push(f)), o.splice(a, 1);
         }
       });
     }
@@ -2053,9 +2053,9 @@ class ee {
         if (typeof i == "function")
           i(t, e, r, o);
         else {
-          const d = s || i === "none" ? 1 : t / e, h = i === "move" || i === "moveScale", a = i === "scale" || i === "moveScale";
-          o.forEach((l) => {
-            l.x = t === 1 ? 0 : h ? Math.round(l.x * d) : Math.min(l.x, t - 1), l.w = t === 1 || e === 1 ? 1 : a ? Math.round(l.w * d) || 1 : Math.min(l.w, t), r.push(l);
+          const d = s || i === "none" ? 1 : t / e, h = i === "move" || i === "moveScale", l = i === "scale" || i === "moveScale";
+          o.forEach((a) => {
+            a.x = t === 1 ? 0 : h ? Math.round(a.x * d) : Math.min(a.x, t - 1), a.w = t === 1 || e === 1 ? 1 : l ? Math.round(a.w * d) || 1 : Math.min(a.w, t), r.push(a);
           }), o = [];
         }
       r = c.sort(r, -1), this._inColumnResize = !0, this.nodes = [], r.forEach((d) => {
@@ -2146,7 +2146,7 @@ class b {
 const Z = 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 te {
 }
-function Se(u, e) {
+function Ne(u, e) {
   if (u.touches.length > 1)
     return;
   u.cancelable && u.preventDefault();
@@ -2184,7 +2184,7 @@ function Se(u, e) {
     // relatedTarget
   ), u.target.dispatchEvent(i);
 }
-function It(u, e) {
+function Pt(u, e) {
   u.cancelable && u.preventDefault();
   const t = document.createEvent("MouseEvents");
   t.initMouseEvent(
@@ -2220,46 +2220,46 @@ function It(u, e) {
     // relatedTarget
   ), u.target.dispatchEvent(t);
 }
-function ke(u) {
-  te.touchHandled || (te.touchHandled = !0, Se(u, "mousedown"));
+function Ae(u) {
+  te.touchHandled || (te.touchHandled = !0, Ne(u, "mousedown"));
 }
-function Ne(u) {
-  te.touchHandled && Se(u, "mousemove");
+function He(u) {
+  te.touchHandled && Ne(u, "mousemove");
 }
-function Ae(u) {
+function Oe(u) {
   if (!te.touchHandled)
     return;
   te.pointerLeaveTimeout && (window.clearTimeout(te.pointerLeaveTimeout), delete te.pointerLeaveTimeout);
   const e = !!b.dragElement;
-  Se(u, "mouseup"), e || Se(u, "click"), te.touchHandled = !1;
+  Ne(u, "mouseup"), e || Ne(u, "click"), te.touchHandled = !1;
 }
-function He(u) {
+function Le(u) {
   u.pointerType !== "mouse" && u.target.releasePointerCapture(u.pointerId);
 }
-function pt(u) {
-  b.dragElement && u.pointerType !== "mouse" && It(u, "mouseenter");
-}
 function yt(u) {
+  b.dragElement && u.pointerType !== "mouse" && Pt(u, "mouseenter");
+}
+function vt(u) {
   b.dragElement && u.pointerType !== "mouse" && (te.pointerLeaveTimeout = window.setTimeout(() => {
-    delete te.pointerLeaveTimeout, It(u, "mouseleave");
+    delete te.pointerLeaveTimeout, Pt(u, "mouseleave");
   }, 10));
 }
-class Pe {
+class Be {
   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(`${Pe.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), Z && (this.el.addEventListener("touchstart", ke), this.el.addEventListener("pointerdown", He)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Be.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), Z && (this.el.addEventListener("touchstart", Ae), this.el.addEventListener("pointerdown", Le)), 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), Z && (this.el.removeEventListener("touchstart", ke), this.el.removeEventListener("pointerdown", He)), 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), Z && (this.el.removeEventListener("touchstart", Ae), this.el.removeEventListener("pointerdown", Le)), 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), Z && (this.el.addEventListener("touchmove", Ne), this.el.addEventListener("touchend", Ae)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Z && (this.el.addEventListener("touchmove", He), this.el.addEventListener("touchend", Oe)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -2268,7 +2268,7 @@ class Pe {
   }
   /** @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), Z && (this.el.removeEventListener("touchmove", Ne), this.el.removeEventListener("touchend", Ae)), 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), Z && (this.el.removeEventListener("touchmove", He), this.el.removeEventListener("touchend", Oe)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -2280,8 +2280,8 @@ class Pe {
     return this.option[e] && this.option[e](t), this;
   }
 }
-Pe.prefix = "ui-resizable-";
-class Ze {
+Be.prefix = "ui-resizable-";
+class et {
   constructor() {
     this._eventRegister = {};
   }
@@ -2309,7 +2309,7 @@ class Ze {
       return this._eventRegister[e](t);
   }
 }
-class ve extends Ze {
+class we extends et {
   // 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 = () => {
@@ -2379,7 +2379,7 @@ class ve extends Ze {
   }
   /** @internal */
   _setupHandlers() {
-    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Pe(this.el, e, {
+    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Be(this.el, e, {
       start: (t) => {
         this._resizeStart(t);
       },
@@ -2410,7 +2410,7 @@ class ve extends Ze {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = ve._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = we._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,
@@ -2419,7 +2419,7 @@ class ve extends Ze {
   }
   /** @internal */
   _cleanHelper() {
-    return ve._originStyleProp.forEach((e, t) => {
+    return we._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -2438,8 +2438,8 @@ class ve extends Ze {
   }
   /** @internal constrain the size to the set min/max values */
   _constrainSize(e, t, i, s) {
-    const r = this.option, o = (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, h = r.minHeight / this.rectScale.y || t, a = Math.min(o, Math.max(n, e)), l = Math.min(d, Math.max(h, t));
-    return { width: a, height: l };
+    const r = this.option, o = (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, h = r.minHeight / this.rectScale.y || t, l = Math.min(o, Math.max(n, e)), a = Math.min(d, Math.max(h, t));
+    return { width: l, height: a };
   }
   /** @internal */
   _applyChange() {
@@ -2458,9 +2458,9 @@ class ve extends Ze {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-ve._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const ts = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class _e extends Ze {
+we._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const is = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class be extends et {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -2480,12 +2480,12 @@ class _e extends Ze {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), Z && (e.addEventListener("touchstart", ke), e.addEventListener("pointerdown", He));
+      e.addEventListener("mousedown", this._mouseDown), Z && (e.addEventListener("touchstart", Ae), e.addEventListener("pointerdown", Le));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), Z && (t.removeEventListener("touchstart", ke), t.removeEventListener("pointerdown", He));
+      t.removeEventListener("mousedown", this._mouseDown), Z && (t.removeEventListener("touchstart", Ae), t.removeEventListener("pointerdown", Le));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -2497,7 +2497,7 @@ class _e extends Ze {
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
     if (!b.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(ts) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete b.dragElement, delete b.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Z && (e.currentTarget.addEventListener("touchmove", Ne), e.currentTarget.addEventListener("touchend", Ae)), e.preventDefault(), document.activeElement && document.activeElement.blur(), b.mouseHandled = !0), !0;
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(is) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete b.dragElement, delete b.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Z && (e.currentTarget.addEventListener("touchmove", He), e.currentTarget.addEventListener("touchend", Oe)), e.preventDefault(), document.activeElement && document.activeElement.blur(), b.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -2528,7 +2528,7 @@ class _e extends Ze {
   /** @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), Z && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Ne, !0), e.currentTarget.removeEventListener("touchend", Ae, !0)), this.dragging) {
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Z && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", He, !0), e.currentTarget.removeEventListener("touchend", Oe, !0)), this.dragging) {
       delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = b.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete b.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), b.dropElement && b.dropElement.drop(e);
@@ -2550,7 +2550,7 @@ class _e extends Ze {
   /** @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)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = _e.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)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = be.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -2567,7 +2567,7 @@ class _e extends Ze {
     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", _e.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", be.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -2609,8 +2609,8 @@ class _e extends Ze {
     };
   }
 }
-_e.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class is extends Ze {
+be.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class ss extends et {
   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();
   }
@@ -2621,10 +2621,10 @@ class is extends Ze {
     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), Z && (this.el.addEventListener("pointerenter", pt), this.el.addEventListener("pointerleave", yt)));
+    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), Z && (this.el.addEventListener("pointerenter", yt), this.el.addEventListener("pointerleave", vt)));
   }
   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), Z && (this.el.removeEventListener("pointerenter", pt), this.el.removeEventListener("pointerleave", yt)));
+    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), Z && (this.el.removeEventListener("pointerenter", yt), this.el.removeEventListener("pointerleave", vt)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -2676,9 +2676,9 @@ class is extends Ze {
     };
   }
 }
-class Je {
+class tt {
   static init(e) {
-    return e.ddElement || (e.ddElement = new Je(e)), e.ddElement;
+    return e.ddElement || (e.ddElement = new tt(e)), e.ddElement;
   }
   constructor(e) {
     this.el = e;
@@ -2690,25 +2690,25 @@ class Je {
     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 _e(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new be(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 ve(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new we(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 is(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new ss(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class ss {
+class rs {
   resizable(e, t, i, s) {
     return this._getDDElements(e).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -2789,7 +2789,7 @@ class ss {
     const i = c.getElements(e);
     if (!i.length)
       return [];
-    const s = i.map((r) => r.ddElement || (t ? Je.init(r) : null));
+    const s = i.map((r) => r.ddElement || (t ? tt.init(r) : null));
     return t || s.filter((r) => r), s;
   }
 }
@@ -2800,7 +2800,7 @@ class ss {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const $ = new ss();
+const $ = new rs();
 class w {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -2877,11 +2877,11 @@ 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 l, f, m;
+    var a, f, m;
     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 = (l = t.columnOpts) == null ? void 0 : l.breakpoints;
+    let s = (a = t.columnOpts) == null ? void 0 : a.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;
@@ -2909,8 +2909,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     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("." + V.itemClass), h = d == null ? void 0 : d.gridstackNode;
     h && (h.subGrid = this, this.parentGridNode = h, this.el.classList.add("grid-stack-nested"), h.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 !== V.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = Z), this._styleSheetClass = "gs-id-" + ee._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const a = t.engineClass || w.engineClass || ee;
-    if (this.engine = new a({
+    const l = t.engineClass || w.engineClass || ee;
+    if (this.engine = new l({
       column: this.getColumn(),
       float: t.float,
       maxRow: t.maxRow,
@@ -2988,13 +2988,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 h = r.el.querySelector(".grid-stack-item-content"), a, 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), w.addRemoveCB ? a = w.addRemoveCB(this.el, l, !0, !1) : (a = c.createDiv(["grid-stack-item"]), a.appendChild(h), h = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
+    let h = r.el.querySelector(".grid-stack-item-content"), l, a;
+    if (s && (this._removeDD(r.el), a = { ...r, x: 0, y: 0 }, c.removeInternalForSave(a), delete a.subGridOpts, r.content && (a.content = r.content, delete r.content), w.addRemoveCB ? l = w.addRemoveCB(this.el, a, !0, !1) : (l = c.createDiv(["grid-stack-item"]), l.appendChild(h), h = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
       const g = d ? t.column : r.w, T = r.h + i.h, k = r.el.style;
       k.transition = "none", this.update(r.el, { w: g, h: T }), setTimeout(() => k.transition = null);
     }
     const f = r.subGrid = w.addGrid(h, t);
-    return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(a, l), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
+    return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(l, a), 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
@@ -3050,33 +3050,33 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     var h;
     e = c.cloneDeep(e);
     const i = this.getColumn();
-    e.forEach((a) => {
-      a.w = a.w || 1, a.h = a.h || 1;
+    e.forEach((l) => {
+      l.w = l.w || 1, l.h = l.h || 1;
     }), e = c.sort(e), this.engine.skipCacheUpdate = this._ignoreLayoutsNodeChange = !0;
     let s = 0;
-    e.forEach((a) => {
-      s = Math.max(s, (a.x || 0) + a.w);
+    e.forEach((l) => {
+      s = Math.max(s, (l.x || 0) + l.w);
     }), s > this.engine.defaultColumn && (this.engine.defaultColumn = s), s > i && this.engine.cacheLayout(e, s, !0);
     const r = w.addRemoveCB;
     typeof t == "function" && (w.addRemoveCB = t);
     const o = [];
     this.batchUpdate();
     const n = !this.engine.nodes.length;
-    n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((l) => {
-      if (!l.id)
+    n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((a) => {
+      if (!a.id)
         return;
-      c.find(e, l.id) || (w.addRemoveCB && w.addRemoveCB(this.el, l, !1, !1), o.push(l), this.removeWidget(l.el, !0, !1));
+      c.find(e, a.id) || (w.addRemoveCB && w.addRemoveCB(this.el, a, !1, !1), o.push(a), this.removeWidget(a.el, !0, !1));
     }), this.engine._loading = !0;
     const d = [];
-    return this.engine.nodes = this.engine.nodes.filter((a) => c.find(e, a.id) ? (d.push(a), !1) : !0), e.forEach((a) => {
+    return this.engine.nodes = this.engine.nodes.filter((l) => c.find(e, l.id) ? (d.push(l), !1) : !0), e.forEach((l) => {
       var f;
-      const l = c.find(d, a.id);
-      if (l) {
-        if (c.shouldSizeToContent(l) && (a.h = l.h), this.engine.nodeBoundFix(a), (a.autoPosition || a.x === void 0 || a.y === void 0) && (a.w = a.w || l.w, a.h = a.h || l.h, this.engine.findEmptyPosition(a)), this.engine.nodes.push(l), c.samePos(l, a) && this.engine.nodes.length > 1 && (this.moveNode(l, { ...a, forceCollide: !0 }), c.copyPos(a, l)), this.update(l.el, a), (f = a.subGridOpts) != null && f.children) {
-          const m = l.el.querySelector(".grid-stack");
-          m && m.gridstack && m.gridstack.load(a.subGridOpts.children);
+      const a = c.find(d, l.id);
+      if (a) {
+        if (c.shouldSizeToContent(a) && (l.h = a.h), this.engine.nodeBoundFix(l), (l.autoPosition || l.x === void 0 || l.y === void 0) && (l.w = l.w || a.w, l.h = l.h || a.h, this.engine.findEmptyPosition(l)), this.engine.nodes.push(a), c.samePos(a, l) && this.engine.nodes.length > 1 && (this.moveNode(a, { ...l, forceCollide: !0 }), c.copyPos(l, a)), this.update(a.el, l), (f = l.subGridOpts) != null && f.children) {
+          const m = a.el.querySelector(".grid-stack");
+          m && m.gridstack && m.gridstack.load(l.subGridOpts.children);
         }
-      } else t && this.addWidget(a);
+      } else t && this.addWidget(l);
     }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? w.addRemoveCB = r : delete w.addRemoveCB, n && ((h = this.opts) != null && h.animate) && this.setAnimation(this.opts.animate, !0), this;
   }
   /**
@@ -3354,7 +3354,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       return t = { x: i[s++], y: i[s++], w: i[s++], h: i[s++] }, this.update(e, t);
     }
     return w.getElements(e).forEach((i) => {
-      var a;
+      var l;
       const s = i == null ? void 0 : i.gridstackNode;
       if (!s)
         return;
@@ -3362,18 +3362,18 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       this.engine.nodeBoundFix(r), delete r.autoPosition;
       const o = ["x", "y", "w", "h"];
       let n;
-      if (o.some((l) => r[l] !== void 0 && r[l] !== s[l]) && (n = {}, o.forEach((l) => {
-        n[l] = r[l] !== void 0 ? r[l] : s[l], delete r[l];
+      if (o.some((a) => r[a] !== void 0 && r[a] !== s[a]) && (n = {}, o.forEach((a) => {
+        n[a] = r[a] !== void 0 ? r[a] : s[a], delete r[a];
       })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
-        const l = i.querySelector(".grid-stack-item-content");
-        l && l.textContent !== r.content && (s.content = r.content, w.renderCB(l, r), (a = s.subGrid) != null && a.el && (l.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+        const a = i.querySelector(".grid-stack-item-content");
+        a && a.textContent !== r.content && (s.content = r.content, w.renderCB(a, r), (l = s.subGrid) != null && l.el && (a.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
       }
       let d = !1, h = !1;
-      for (const l in r)
-        l[0] !== "_" && s[l] !== r[l] && (s[l] = r[l], d = !0, h = h || !this.opts.staticGrid && (l === "noResize" || l === "noMove" || l === "locked"));
+      for (const a in r)
+        a[0] !== "_" && s[a] !== r[a] && (s[a] = r[a], d = !0, h = h || !this.opts.staticGrid && (a === "noResize" || a === "noMove" || a === "locked"));
       if (c.sanitizeMinMax(s), n) {
-        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;
+        const a = n.w !== void 0 && n.w !== s.w;
+        this.moveNode(s, n), a && s.subGrid ? s.subGrid.onResize(this.hasAnimationCSS() ? s.w : void 0) : this.resizeToContentCheck(a, s), delete s._orig;
       }
       (n || d) && this._writeAttr(i, s), h && this._prepareDragDropByNode(s);
     }), this;
@@ -3425,9 +3425,9 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (d === h)
       return;
     r += h - d;
-    let a = Math.ceil(r / s);
-    const l = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
-    l && a > l && (a = l, e.classList.add("size-to-content-max")), t.minH && a < t.minH ? a = t.minH : t.maxH && a > t.maxH && (a = t.maxH), a !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h: a }), delete i._ignoreLayoutsNodeChange);
+    let l = Math.ceil(r / s);
+    const a = Number.isInteger(t.sizeToContent) ? t.sizeToContent : 0;
+    a && l > a && (l = a, e.classList.add("size-to-content-max")), t.minH && l < t.minH ? l = t.minH : t.maxH && l > t.maxH && (l = t.maxH), l !== t.h && (i._ignoreLayoutsNodeChange = !0, i.moveNode(t, { h: l }), delete i._ignoreLayoutsNodeChange);
   }
   /** call the user resize (so they can do extra work) else our build in version */
   resizeToContentCBCheck(e) {
@@ -3548,8 +3548,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, h = this.opts.marginRight + this.opts.marginUnit, a = 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: ${h}; bottom: ${d}; left: ${a};`), c.addCSSRule(this._styles, f, `top: ${n}; right: ${h}; bottom: ${d}; left: ${a};`), 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: ${h}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${h}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${h}; bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${a}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${a}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${a}; bottom: ${d}`);
+      const n = this.opts.marginTop + this.opts.marginUnit, d = this.opts.marginBottom + this.opts.marginUnit, h = this.opts.marginRight + this.opts.marginUnit, l = this.opts.marginLeft + this.opts.marginUnit, a = `${r} > .grid-stack-item-content`, f = `.${this._styleSheetClass} > .grid-stack-placeholder > .placeholder-content`;
+      c.addCSSRule(this._styles, a, `top: ${n}; right: ${h}; bottom: ${d}; left: ${l};`), c.addCSSRule(this._styles, f, `top: ${n}; right: ${h}; bottom: ${d}; left: ${l};`), 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: ${h}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-e`, `right: ${h}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-se`, `right: ${h}; bottom: ${d}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-nw`, `left: ${l}; top: ${n}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-w`, `left: ${l}`), c.addCSSRule(this._styles, `${r} > .ui-resizable-sw`, `left: ${l}; bottom: ${d}`);
     }
     if (t = t || this._styles._max, t > this._styles._max) {
       const o = (n) => i * n + s;
@@ -3794,9 +3794,9 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         o.style.left = m.x + (this.dragTransform.xScale - 1) * (s.clientX - m.x) / this.dragTransform.xScale + "px", o.style.top = m.y + (this.dragTransform.yScale - 1) * (s.clientY - m.y) / this.dragTransform.yScale + "px", o.style.transformOrigin = "0px 0px";
       }
       let { top: d, left: h } = o.getBoundingClientRect();
-      const a = this.el.getBoundingClientRect();
-      h -= a.left, d -= a.top;
-      const l = {
+      const l = this.el.getBoundingClientRect();
+      h -= l.left, d -= l.top;
+      const a = {
         position: {
           top: d * this.dragTransform.xScale,
           left: h * this.dragTransform.yScale
@@ -3810,9 +3810,9 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           }
           n._willFitPos && (c.copyPos(n, n._willFitPos), delete n._willFitPos);
         }
-        this._onStartMoving(o, s, l, n, t, e);
+        this._onStartMoving(o, s, a, n, t, e);
       } else
-        this._dragOrResize(o, s, l, n, t, e);
+        this._dragOrResize(o, s, a, n, t, e);
     };
     return $.droppable(this.el, {
       accept: (s) => {
@@ -3839,12 +3839,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       if ((n == null ? void 0 : n.grid) === this && !n._temporaryRemoved)
         return !1;
       if (n != null && n.grid && n.grid !== this && !n._temporaryRemoved && n.grid._leave(r, o), o = o || r, t = this.cellWidth(), e = this.getCellHeight(!0), !n) {
-        const a = o.getAttribute("data-gs-widget") || o.getAttribute("gridstacknode");
-        if (a) {
+        const l = o.getAttribute("data-gs-widget") || o.getAttribute("gridstacknode");
+        if (l) {
           try {
-            n = JSON.parse(a);
+            n = JSON.parse(l);
           } catch {
-            console.error("Gridstack dropover: Bad JSON format: ", a);
+            console.error("Gridstack dropover: Bad JSON format: ", l);
           }
           o.removeAttribute("data-gs-widget"), o.removeAttribute("gridstacknode");
         }
@@ -3864,17 +3864,17 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         return !1;
       const d = !!this.placeholder.parentElement, h = r !== o;
       this.placeholder.remove(), delete this.placeholder.gridstackNode;
-      const a = d && this.opts.animate;
-      a && this.setAnimation(!1);
-      const l = r._gridstackNodeOrig;
-      if (delete r._gridstackNodeOrig, d && (l != null && l.grid) && l.grid !== this) {
-        const g = l.grid;
-        g.engine.removeNodeFromLayoutCache(l), g.engine.removedNodes.push(l), g._triggerRemoveEvent()._triggerChangeEvent(), g.parentGridNode && !g.engine.nodes.length && g.opts.subGridDynamic && g.removeAsSubGrid();
+      const l = d && this.opts.animate;
+      l && this.setAnimation(!1);
+      const a = r._gridstackNodeOrig;
+      if (delete r._gridstackNodeOrig, d && (a != null && a.grid) && a.grid !== this) {
+        const g = a.grid;
+        g.engine.removeNodeFromLayoutCache(a), g.engine.removedNodes.push(a), g._triggerRemoveEvent()._triggerChangeEvent(), g.parentGridNode && !g.engine.nodes.length && g.opts.subGridDynamic && g.removeAsSubGrid();
       }
       if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (m = n.grid) == null || delete m._isTemp, $.off(r, "drag"), o !== r ? (o.remove(), r = o) : 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), h && (n.content || n.subGridOpts || w.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), a && this.setAnimation(this.opts.animate, !0), !1;
+      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), h && (n.content || n.subGridOpts || w.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" }, a && a.grid ? a : void 0, n), l && this.setAnimation(this.opts.animate, !0), !1;
     }), this;
   }
   /** @internal mark item for removal */
@@ -3898,20 +3898,20 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       return e._initDD && (this._removeDD(t), delete e._initDD), t.classList.add("ui-draggable-disabled", "ui-resizable-disabled"), this;
     if (!e._initDD) {
       let r, o;
-      const n = (a, l) => {
-        this._gsEventHandler[a.type] && this._gsEventHandler[a.type](a, a.target), r = this.cellWidth(), o = this.getCellHeight(!0), this._onStartMoving(t, a, l, e, r, o);
-      }, d = (a, l) => {
-        this._dragOrResize(t, a, l, e, r, o);
-      }, h = (a) => {
+      const n = (l, a) => {
+        this._gsEventHandler[l.type] && this._gsEventHandler[l.type](l, l.target), r = this.cellWidth(), o = this.getCellHeight(!0), this._onStartMoving(t, l, a, e, r, o);
+      }, d = (l, a) => {
+        this._dragOrResize(t, l, a, e, r, o);
+      }, h = (l) => {
         this.placeholder.remove(), delete this.placeholder.gridstackNode, delete e._moving, delete e._event, delete e._lastTried;
-        const l = e.w !== e._orig.w, f = a.target;
+        const a = e.w !== e._orig.w, f = l.target;
         if (!(!f.gridstackNode || f.gridstackNode.grid !== this)) {
           if (e.el = f, e._isAboutToRemove) {
             const m = t.gridstackNode.grid;
-            m._gsEventHandler[a.type] && m._gsEventHandler[a.type](a, f), m.engine.nodes.push(e), m.removeWidget(t, !0, !0);
+            m._gsEventHandler[l.type] && m._gsEventHandler[l.type](l, f), m.engine.nodes.push(e), m.removeWidget(t, !0, !0);
           } else
-            c.removePositioningStyles(f), e._temporaryRemoved ? (c.copyPos(e, e._orig), this._writePosAttr(f, e), this.engine.addNode(e)) : this._writePosAttr(f, e), this._gsEventHandler[a.type] && this._gsEventHandler[a.type](a, f);
-          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), a.type === "resizestop" && (Number.isInteger(e.sizeToContent) && (e.sizeToContent = e.h), this.resizeToContentCheck(l, e));
+            c.removePositioningStyles(f), e._temporaryRemoved ? (c.copyPos(e, e._orig), this._writePosAttr(f, e), this.engine.addNode(e)) : this._writePosAttr(f, e), this._gsEventHandler[l.type] && this._gsEventHandler[l.type](l, f);
+          this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), l.type === "resizestop" && (Number.isInteger(e.sizeToContent) && (e.sizeToContent = e.h), this.resizeToContentCheck(a, e));
         }
       };
       $.draggable(t, {
@@ -3949,14 +3949,14 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   /** @internal handles actual drag/resize */
   _dragOrResize(e, t, i, s, r, o) {
     const n = { ...s._orig };
-    let d, h = this.opts.marginLeft, a = this.opts.marginRight, l = this.opts.marginTop, f = this.opts.marginBottom;
+    let d, h = this.opts.marginLeft, l = this.opts.marginRight, a = this.opts.marginTop, f = this.opts.marginBottom;
     const m = Math.round(o * 0.1), p = Math.round(r * 0.1);
-    if (h = Math.min(h, p), a = Math.min(a, p), l = Math.min(l, m), f = Math.min(f, m), t.type === "drag") {
+    if (h = Math.min(h, p), l = Math.min(l, p), a = Math.min(a, m), f = Math.min(f, m), 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 T = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : h), k = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
+      const T = i.position.left + (i.position.left > s._lastUiPosition.left ? -l : h), k = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : a);
       n.x = Math.round(T / r), n.y = Math.round(k / o);
       const x = this._extraDragRow;
       if (this.engine.collide(s, n)) {
@@ -3968,20 +3968,20 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       if (this._extraDragRow !== x && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
         return;
     } else if (t.type === "resize") {
-      if (n.x < 0 || (c.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - h) / r), n.h = Math.round((i.size.height - l) / o), 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, o), n.w = Math.round((i.size.width - h) / r), n.h = Math.round((i.size.height - a) / o), 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 + h, T = i.position.top + l;
+      const g = i.position.left + h, T = i.position.top + a;
       n.x = Math.round(g / r), n.y = Math.round(T / o), d = !0;
     }
     s._event = t, s._lastTried = n;
     const y = {
       x: i.position.left + h,
-      y: i.position.top + l,
-      w: (i.size ? i.size.width : s.w * r) - h - a,
-      h: (i.size ? i.size.height : s.h * o) - l - f
+      y: i.position.top + a,
+      w: (i.size ? i.size.width : s.w * r) - h - l,
+      h: (i.size ? i.size.height : s.h * o) - a - f
     };
     if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: y, resizing: d })) {
-      s._lastUiPosition = i.position, this.engine.cacheRects(r, o, l, a, f, h), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
+      s._lastUiPosition = i.position, this.engine.cacheRects(r, o, a, l, f, h), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
       const g = t.target;
       this._writePosAttr(g, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, g);
     }
@@ -3997,7 +3997,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   // legacy method removed
   commit() {
-    return es(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return ts(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
 w.renderCB = (u, e) => {
@@ -4007,11 +4007,11 @@ w.resizeToContentParent = ".grid-stack-item-content";
 w.Utils = c;
 w.Engine = ee;
 w.GDRev = "11.3.0";
-const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { class: "grid-stack-item-content" }, os = /* @__PURE__ */ K({
+const ns = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], os = { class: "grid-stack-item-content" }, as = /* @__PURE__ */ K({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
-    tileHeight: { default: Ie }
+    tileHeight: { default: qe }
   },
   emits: ["update-tiles"],
   setup(u, { expose: e, emit: t }) {
@@ -4028,25 +4028,25 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
             size: { cols: Number(p.w), rows: Number(p.h) }
           }
         };
-    }).filter((p) => p !== void 0), a = (m, p) => {
+    }).filter((p) => p !== void 0), l = (m, p) => {
       n && (h(p).forEach((g) => {
         o.value.set(`${g.id}`, g);
       }), s("update-tiles", Array.from(o.value.values())));
-    }, l = (m, p) => {
+    }, a = (m, p) => {
       p.forEach((y) => {
         var g;
         o.value.delete(`${(g = y.el) == null ? void 0 : g.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(o.value.values()));
     };
-    Xe(() => {
+    Qe(() => {
       r.value && (n = w.init({
         margin: 10,
-        column: zt,
+        column: Dt,
         cellHeight: i.tileHeight,
         resizable: { handles: "se, sw" },
         handle: ".tile-header"
-      }, r.value), n.on("change", a), n.on("added", a), n.on("removed", l));
-    }), Fe(() => {
+      }, r.value), n.on("change", l), n.on("added", l), n.on("removed", a));
+    }), Ve(() => {
       n && n.destroy(!1);
     });
     const f = (m) => {
@@ -4055,17 +4055,17 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
         p && n.removeWidget(p);
       }
     };
-    return We(() => i.tiles.length, async (m, p) => {
+    return Ke(() => i.tiles.length, async (m, p) => {
       if (m > p && n) {
         const y = i.tiles.slice(p);
         for (const g of y)
-          o.value.set(`${g.id}`, g), await wt(), n.makeWidget(d(g.id), {
+          o.value.set(`${g.id}`, g), await bt(), n.makeWidget(d(g.id), {
             autoPosition: !0,
             w: g.layout.size.cols,
             h: g.layout.size.rows
           });
       }
-    }), vt(() => {
+    }), _t(() => {
       i.tiles.forEach((m) => {
         o.value.set(`${m.id}`, m);
       });
@@ -4074,7 +4074,7 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
       ref: r,
       class: "grid-stack"
     }, [
-      (R(!0), F(Et, null, xt(i.tiles, (y) => (R(), F("div", {
+      (R(!0), F(xt, null, Ct(i.tiles, (y) => (R(), F("div", {
         key: y.id,
         class: "grid-stack-item",
         "data-id": `${y.id}`,
@@ -4085,40 +4085,40 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
         "gs-x": y.layout.position.col,
         "gs-y": y.layout.position.row
       }, [
-        re("div", ns, [
-          Le(m.$slots, "tile", { tile: y }, void 0, !0)
+        ne("div", os, [
+          Ie(m.$slots, "tile", { tile: y }, void 0, !0)
         ])
-      ], 8, rs))), 128))
+      ], 8, ns))), 128))
     ], 512));
   }
-}), as = /* @__PURE__ */ he(os, [["__scopeId", "data-v-a68d6821"]]), ls = { class: "kong-ui-public-dashboard-renderer" }, hs = {
+}), ls = /* @__PURE__ */ de(as, [["__scopeId", "data-v-a68d6821"]]), hs = { class: "kong-ui-public-dashboard-renderer" }, ds = {
   key: 0,
   class: "tile-container slottable-tile"
-}, ds = /* @__PURE__ */ K({
+}, us = /* @__PURE__ */ K({
   __name: "DashboardRenderer",
-  props: /* @__PURE__ */ nt({
+  props: /* @__PURE__ */ ot({
     context: {}
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ nt(["edit-tile", "zoom-time-range"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ ot(["edit-tile", "zoom-time-range"], ["update:modelValue"]),
   setup(u, { expose: e, emit: t }) {
-    const i = u, s = t, r = Vt(u, "modelValue"), { i18n: o } = me.useI18n(), n = U(0), d = U(null), h = pe(le);
-    h || (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")), me.useRequestQueue();
-    const a = Rt(), l = A(() => i.context.timeSpec ? i.context.timeSpec : {
+    const i = u, s = t, r = Vt(u, "modelValue"), { i18n: o } = pe.useI18n(), n = U(0), d = U(null), h = ye(he);
+    h || (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")), pe.useRequestQueue();
+    const l = Tt(), a = A(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
-      time_range: a.defaultQueryTimeForOrg
-    }), f = A(() => !!i.context.timeSpec || !a.loading), m = (E, N) => {
+      time_range: l.defaultQueryTimeForOrg
+    }), f = A(() => !!i.context.timeSpec || !l.loading), m = (E, N) => {
       const S = E.layout.position.row - N.layout.position.row;
       return S !== 0 ? S : E.layout.position.col - N.layout.position.col;
     }, p = A(() => r.value.tiles.map((E) => {
       var S;
       let N = E.definition;
       if ("description" in N.chart) {
-        const q = (S = N.chart.description) == null ? void 0 : S.replace(_i, () => {
-          const Ce = `renderer.trendRange.${l.value.type === "absolute" ? "custom" : l.value.time_range}`;
-          return o.te(Ce) ? o.t(Ce) : "";
+        const q = (S = N.chart.description) == null ? void 0 : S.replace(wi, () => {
+          const le = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
+          return o.te(le) ? o.t(le) : "";
         });
         N = {
           ...N,
@@ -4140,14 +4140,18 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
         id: E.id ?? crypto.randomUUID()
       };
     })), y = A(() => {
+      var le, ve, Te;
       let { tz: E, refreshInterval: N, editable: S } = i.context;
       const q = [...i.context.filters ?? [], ...r.value.preset_filters ?? []];
-      return E || (E = new Intl.DateTimeFormat().resolvedOptions().timeZone), N === void 0 && (N = wi), S === void 0 && (S = !1), {
+      E || (E = new Intl.DateTimeFormat().resolvedOptions().timeZone), N === void 0 && (N = bi), S === void 0 && (S = !1);
+      const se = !!((Te = (ve = (le = Kt()) == null ? void 0 : le.vnode) == null ? void 0 : ve.props) != null && Te.onZoomTimeRange);
+      return {
         filters: q,
         tz: E,
-        timeSpec: l.value,
+        timeSpec: a.value,
         refreshInterval: N,
-        editable: S
+        editable: S,
+        zoomable: se
       };
     }), g = (E) => {
       s("edit-tile", E);
@@ -4185,9 +4189,9 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
       r.value.tiles = N.sort(m);
     };
     return e({ refresh: L }), (E, N) => {
-      const S = oe("KAlert");
-      return R(), F("div", ls, [
-        D(h) ? (R(), O(bt(E.context.editable ? as : Ji), {
+      const S = ae("KAlert");
+      return R(), F("div", hs, [
+        D(h) ? (R(), O(Et(E.context.editable ? ls : es), {
           key: 1,
           ref_key: "gridLayoutRef",
           ref: d,
@@ -4196,21 +4200,21 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
           onUpdateTiles: C
         }, {
           tile: I(({ tile: q }) => [
-            q.meta.chart.type === "slottable" ? (R(), F("div", hs, [
-              Le(E.$slots, q.meta.chart.id, {}, void 0, !0)
-            ])) : (R(), O(ji, {
+            q.meta.chart.type === "slottable" ? (R(), F("div", ds, [
+              Ie(E.$slots, q.meta.chart.id, {}, void 0, !0)
+            ])) : (R(), O(Qi, {
               key: 1,
               class: "tile-container",
               context: y.value,
               definition: q.meta,
-              height: q.layout.size.rows * (r.value.tile_height || D(Ie)) + parseInt(D(Mt), 10),
+              height: q.layout.size.rows * (r.value.tile_height || D(qe)) + parseInt(D(It), 10),
               "query-ready": f.value,
               "refresh-counter": n.value,
               "tile-id": q.id,
-              onDuplicateTile: (ae) => k(q),
-              onEditTile: (ae) => g(q),
-              onRemoveTile: (ae) => x(q),
-              onZoomTimeRange: N[0] || (N[0] = (ae) => s("zoom-time-range", ae))
+              onDuplicateTile: (se) => k(q),
+              onEditTile: (se) => g(q),
+              onRemoveTile: (se) => x(q),
+              onZoomTimeRange: N[0] || (N[0] = (se) => s("zoom-time-range", se))
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
           ]),
           _: 3
@@ -4219,22 +4223,22 @@ const rs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], ns = { cl
           appearance: "danger"
         }, {
           default: I(() => [
-            Me(J(D(o).t("renderer.noQueryBridge")), 1)
+            Pe(J(D(o).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), bs = /* @__PURE__ */ he(ds, [["__scopeId", "data-v-e90ae04b"]]);
+}), Es = /* @__PURE__ */ de(us, [["__scopeId", "data-v-b36476ce"]]);
 export {
-  vi as CP_ID_TOKEN,
-  zt as DASHBOARD_COLS,
-  Ie as DEFAULT_TILE_HEIGHT,
-  wi as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  bs as DashboardRenderer,
-  at as ENTITY_ID_TOKEN,
-  Ji as GridLayout,
-  le as INJECT_QUERY_PROVIDER,
-  _i as TIMEFRAME_TOKEN
+  _i as CP_ID_TOKEN,
+  Dt as DASHBOARD_COLS,
+  qe as DEFAULT_TILE_HEIGHT,
+  bi as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  Es as DashboardRenderer,
+  lt as ENTITY_ID_TOKEN,
+  es as GridLayout,
+  he as INJECT_QUERY_PROVIDER,
+  wi as TIMEFRAME_TOKEN
 };