@kong-ui-public/dashboard-renderer 8.4.9 → 8.4.11

package/dist/{index-CcH0oQcL.js → index-CFMYxvTz.js}

@@ -4,16 +4,16 @@ var _t = (a) => {
 };
 var fi = (a, e, t) => e in a ? ci(a, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[e] = t;
 var bt = (a, e, t) => fi(a, typeof e != "symbol" ? e + "" : e, t), st = (a, e, t) => e.has(a) || _t("Cannot " + t);
-var v = (a, e, t) => (st(a, e, "read from private field"), t ? t.call(a) : e.get(a)), B = (a, e, t) => e.has(a) ? _t("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), M = (a, e, t, i) => (st(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t), U = (a, e, t) => (st(a, e, "access private method"), t);
+var v = (a, e, t) => (st(a, e, "read from private field"), t ? t.call(a) : e.get(a)), B = (a, e, t) => e.has(a) ? _t("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(a) : e.set(a, t), q = (a, e, t, i) => (st(a, e, "write to private field"), i ? i.call(a, t) : e.set(a, t), t), U = (a, e, t) => (st(a, e, "access private method"), t);
 var Se = (a, e, t, i) => ({
   set _(s) {
-    M(a, e, s, t);
+    q(a, e, s, t);
   },
   get _() {
     return v(a, e, i);
   }
 });
-import { ref as L, watchEffect as Ot, inject as ve, provide as gi, onMounted as Xe, computed as k, watch as ze, onUnmounted as Ze, getCurrentInstance as mi, defineComponent as V, resolveComponent as ge, createBlock as O, renderSlot as De, createCommentVNode as K, unref as E, openBlock as x, createSlots as Je, withCtx as P, createElementVNode as se, toDisplayString as ae, normalizeStyle as nt, normalizeClass as Re, createVNode as re, mergeProps as Ht, createTextVNode as ht, createElementBlock as G, normalizeProps as pi, guardReactiveProps as yi, defineAsyncComponent as It, mergeModels as Ge, useCssVars as ut, useModel as Mt, readonly as rt, toRef as Ne, nextTick as dt, resolveDynamicComponent as qt, toHandlers as vi, Fragment as Pt, renderList as $t, useTemplateRef as _i } from "vue";
+import { ref as O, watchEffect as Ot, inject as ve, provide as gi, onMounted as Xe, computed as R, watch as ze, onUnmounted as Ze, getCurrentInstance as mi, defineComponent as j, resolveComponent as he, createBlock as A, renderSlot as De, createCommentVNode as Q, unref as E, openBlock as x, createSlots as Je, withCtx as H, createElementVNode as Y, toDisplayString as te, normalizeStyle as nt, normalizeClass as Re, createVNode as ae, mergeProps as Ht, createTextVNode as ht, createElementBlock as G, normalizeProps as pi, guardReactiveProps as yi, defineAsyncComponent as It, mergeModels as Ge, useCssVars as ut, useModel as Mt, readonly as rt, toRef as Ne, nextTick as dt, resolveDynamicComponent as qt, toHandlers as vi, Fragment as Pt, renderList as $t, useTemplateRef as _i } from "vue";
 import { msToGranularity as ot, getFieldDataSources as Bt, stripUnknownFilters as bi, TimePeriods as wi, TIMEFRAME_LOOKUP as Ei, formatTime as wt, EXPORT_RECORD_LIMIT as xi } from "@kong-ui-public/analytics-utilities";
 import { handleQueryError as Ci, SimpleChart as Ri, AnalyticsChart as ki, TopNTable as Ti, CsvExportModal as Si } from "@kong-ui-public/analytics-chart";
 import zi from "swrv";
@@ -28,8 +28,8 @@ const Bi = (a) => {
   return a ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(a)) != null && e.length || (t = a.data) != null && t.length || (s = (i = a.data) == null ? void 0 : i.data) != null && s.length || !((r = a.data) != null && r.data) && typeof a.data == "object" && Object.keys(a == null ? void 0 : a.data).length) : !1;
 };
-function Fi(a = L({}), e, t, i = Bi) {
-  const s = L(
+function Fi(a = O({}), e, t, i = Bi) {
+  const s = O(
     "PENDING"
     /* PENDING */
   );
@@ -66,6 +66,10 @@ function Fi(a = L({}), e, t, i = Bi) {
   };
 }
 const Ui = {
+  not_configured: {
+    title: "Chart is not fully configured",
+    description: "Begin by choosing at least one metric"
+  },
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-hour summary",
@@ -132,8 +136,8 @@ var Ut = { exports: {} };
   function r(d, u, h, l, f) {
     if (typeof h != "function")
       throw new TypeError("The listener must be a function");
-    var g = new s(h, l || d, f), p = t ? t + u : u;
-    return d._events[p] ? d._events[p].fn ? d._events[p] = [d._events[p], g] : d._events[p].push(g) : (d._events[p] = g, d._eventsCount++), d;
+    var g = new s(h, l || d, f), m = t ? t + u : u;
+    return d._events[m] ? d._events[m].fn ? d._events[m] = [d._events[m], g] : d._events[m].push(g) : (d._events[m] = g, d._eventsCount++), d;
   }
   function o(d, u) {
     --d._eventsCount === 0 ? d._events = new i() : delete d._events[u];
@@ -151,54 +155,54 @@ var Ut = { exports: {} };
     var h = t ? t + u : u, l = this._events[h];
     if (!l) return [];
     if (l.fn) return [l.fn];
-    for (var f = 0, g = l.length, p = new Array(g); f < g; f++)
-      p[f] = l[f].fn;
-    return p;
+    for (var f = 0, g = l.length, m = new Array(g); f < g; f++)
+      m[f] = l[f].fn;
+    return m;
   }, n.prototype.listenerCount = function(u) {
     var h = t ? t + u : u, l = this._events[h];
     return l ? l.fn ? 1 : l.length : 0;
-  }, n.prototype.emit = function(u, h, l, f, g, p) {
+  }, n.prototype.emit = function(u, h, l, f, g, m) {
     var y = t ? t + u : u;
     if (!this._events[y]) return !1;
-    var m = this._events[y], C = arguments.length, A, D;
-    if (m.fn) {
-      switch (m.once && this.removeListener(u, m.fn, void 0, !0), C) {
+    var p = this._events[y], C = arguments.length, S, z;
+    if (p.fn) {
+      switch (p.once && this.removeListener(u, p.fn, void 0, !0), C) {
         case 1:
-          return m.fn.call(m.context), !0;
+          return p.fn.call(p.context), !0;
         case 2:
-          return m.fn.call(m.context, h), !0;
+          return p.fn.call(p.context, h), !0;
         case 3:
-          return m.fn.call(m.context, h, l), !0;
+          return p.fn.call(p.context, h, l), !0;
         case 4:
-          return m.fn.call(m.context, h, l, f), !0;
+          return p.fn.call(p.context, h, l, f), !0;
         case 5:
-          return m.fn.call(m.context, h, l, f, g), !0;
+          return p.fn.call(p.context, h, l, f, g), !0;
         case 6:
-          return m.fn.call(m.context, h, l, f, g, p), !0;
+          return p.fn.call(p.context, h, l, f, g, m), !0;
       }
-      for (D = 1, A = new Array(C - 1); D < C; D++)
-        A[D - 1] = arguments[D];
-      m.fn.apply(m.context, A);
+      for (z = 1, S = new Array(C - 1); z < C; z++)
+        S[z - 1] = arguments[z];
+      p.fn.apply(p.context, S);
     } else {
-      var J = m.length, F;
-      for (D = 0; D < J; D++)
-        switch (m[D].once && this.removeListener(u, m[D].fn, void 0, !0), C) {
+      var W = p.length, F;
+      for (z = 0; z < W; z++)
+        switch (p[z].once && this.removeListener(u, p[z].fn, void 0, !0), C) {
           case 1:
-            m[D].fn.call(m[D].context);
+            p[z].fn.call(p[z].context);
             break;
           case 2:
-            m[D].fn.call(m[D].context, h);
+            p[z].fn.call(p[z].context, h);
             break;
           case 3:
-            m[D].fn.call(m[D].context, h, l);
+            p[z].fn.call(p[z].context, h, l);
             break;
           case 4:
-            m[D].fn.call(m[D].context, h, l, f);
+            p[z].fn.call(p[z].context, h, l, f);
             break;
           default:
-            if (!A) for (F = 1, A = new Array(C - 1); F < C; F++)
-              A[F - 1] = arguments[F];
-            m[D].fn.apply(m[D].context, A);
+            if (!S) for (F = 1, S = new Array(C - 1); F < C; F++)
+              S[F - 1] = arguments[F];
+            p[z].fn.apply(p[z].context, S);
         }
     }
     return !0;
@@ -211,13 +215,13 @@ var Ut = { exports: {} };
     if (!this._events[g]) return this;
     if (!h)
       return o(this, g), this;
-    var p = this._events[g];
-    if (p.fn)
-      p.fn === h && (!f || p.once) && (!l || p.context === l) && o(this, g);
+    var m = this._events[g];
+    if (m.fn)
+      m.fn === h && (!f || m.once) && (!l || m.context === l) && o(this, g);
     else {
-      for (var y = 0, m = [], C = p.length; y < C; y++)
-        (p[y].fn !== h || f && !p[y].once || l && p[y].context !== l) && m.push(p[y]);
-      m.length ? this._events[g] = m.length === 1 ? m[0] : m : o(this, g);
+      for (var y = 0, p = [], C = m.length; y < C; y++)
+        (m[y].fn !== h || f && !m[y].once || l && m[y].context !== l) && p.push(m[y]);
+      p.length ? this._events[g] = p.length === 1 ? p[0] : p : o(this, g);
     }
     return this;
   }, n.prototype.removeAllListeners = function(u) {
@@ -296,10 +300,10 @@ function ls(a, e, t) {
   }
   return i;
 }
-var ee;
+var ie;
 class hs {
   constructor() {
-    B(this, ee, []);
+    B(this, ie, []);
   }
   enqueue(e, t) {
     t = {
@@ -311,53 +315,53 @@ class hs {
       id: t.id,
       run: e
     };
-    if (this.size === 0 || v(this, ee)[this.size - 1].priority >= t.priority) {
-      v(this, ee).push(i);
+    if (this.size === 0 || v(this, ie)[this.size - 1].priority >= t.priority) {
+      v(this, ie).push(i);
       return;
     }
-    const s = ls(v(this, ee), i, (r, o) => o.priority - r.priority);
-    v(this, ee).splice(s, 0, i);
+    const s = ls(v(this, ie), i, (r, o) => o.priority - r.priority);
+    v(this, ie).splice(s, 0, i);
   }
   setPriority(e, t) {
-    const i = v(this, ee).findIndex((r) => r.id === e);
+    const i = v(this, ie).findIndex((r) => r.id === e);
     if (i === -1)
       throw new ReferenceError(`No promise function with the id "${e}" exists in the queue.`);
-    const [s] = v(this, ee).splice(i, 1);
+    const [s] = v(this, ie).splice(i, 1);
     this.enqueue(s.run, { priority: t, id: e });
   }
   dequeue() {
-    const e = v(this, ee).shift();
+    const e = v(this, ie).shift();
     return e == null ? void 0 : e.run;
   }
   filter(e) {
-    return v(this, ee).filter((t) => t.priority === e.priority).map((t) => t.run);
+    return v(this, ie).filter((t) => t.priority === e.priority).map((t) => t.run);
   }
   get size() {
-    return v(this, ee).length;
+    return v(this, ie).length;
   }
 }
-ee = new WeakMap();
-var be, we, pe, Oe, Ee, He, te, xe, Q, Ie, ie, Ce, fe, Me, je, z, Wt, Kt, Qt, Vt, Yt, Be, at, lt, Fe, jt, Ue;
+ie = new WeakMap();
+var be, we, pe, Oe, Ee, He, se, xe, V, Ie, re, Ce, me, Me, je, N, Wt, Kt, Qt, Vt, Yt, Be, at, lt, Fe, jt, Ue;
 class us extends ns {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
     super();
-    B(this, z);
+    B(this, N);
     B(this, be);
     B(this, we);
     B(this, pe, 0);
     B(this, Oe);
     B(this, Ee);
     B(this, He, 0);
-    B(this, te);
+    B(this, se);
     B(this, xe);
-    B(this, Q);
+    B(this, V);
     B(this, Ie);
-    B(this, ie, 0);
+    B(this, re, 0);
     // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
     B(this, Ce);
-    B(this, fe);
+    B(this, me);
     B(this, Me);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
     B(this, je, 1n);
@@ -379,7 +383,7 @@ class us extends ns {
       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})`);
-    M(this, be, t.carryoverConcurrencyCount), M(this, we, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), M(this, Oe, t.intervalCap), M(this, Ee, t.interval), M(this, Q, new t.queueClass()), M(this, Ie, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, M(this, Me, t.throwOnTimeout === !0), M(this, fe, t.autoStart === !1);
+    q(this, be, t.carryoverConcurrencyCount), q(this, we, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), q(this, Oe, t.intervalCap), q(this, Ee, t.interval), q(this, V, new t.queueClass()), q(this, Ie, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, q(this, Me, t.throwOnTimeout === !0), q(this, me, t.autoStart === !1);
   }
   get concurrency() {
     return v(this, Ce);
@@ -387,7 +391,7 @@ class us extends ns {
   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})`);
-    M(this, Ce, t), U(this, z, Fe).call(this);
+    q(this, Ce, t), U(this, N, Fe).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -426,7 +430,7 @@ class us extends ns {
       Here, the promise function with `id: '🦀'` executes last.
       */
   setPriority(t, i) {
-    v(this, Q).setPriority(t, i);
+    v(this, V).setPriority(t, i);
   }
   async add(t, i = {}) {
     return i.id ?? (i.id = (Se(this, je)._++).toString()), i = {
@@ -434,13 +438,13 @@ class us extends ns {
       throwOnTimeout: v(this, Me),
       ...i
     }, new Promise((s, r) => {
-      v(this, Q).enqueue(async () => {
+      v(this, V).enqueue(async () => {
         var o;
-        Se(this, ie)._++;
+        Se(this, re)._++;
         try {
           (o = i.signal) == null || o.throwIfAborted(), Se(this, pe)._++;
           let n = t({ signal: i.signal });
-          i.timeout && (n = as(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, U(this, z, jt).call(this, i.signal)]));
+          i.timeout && (n = as(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, U(this, N, jt).call(this, i.signal)]));
           const d = await n;
           s(d), this.emit("completed", d);
         } catch (n) {
@@ -450,9 +454,9 @@ class us extends ns {
           }
           r(n), this.emit("error", n);
         } finally {
-          U(this, z, Qt).call(this);
+          U(this, N, Qt).call(this);
         }
-      }, i), this.emit("add"), U(this, z, Be).call(this);
+      }, i), this.emit("add"), U(this, N, Be).call(this);
     });
   }
   async addAll(t, i) {
@@ -462,19 +466,19 @@ class us extends ns {
   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 v(this, fe) ? (M(this, fe, !1), U(this, z, Fe).call(this), this) : this;
+    return v(this, me) ? (q(this, me, !1), U(this, N, Fe).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    M(this, fe, !0);
+    q(this, me, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    M(this, Q, new (v(this, Ie))());
+    q(this, V, new (v(this, Ie))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -482,7 +486,7 @@ class us extends ns {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    v(this, Q).size !== 0 && await U(this, z, Ue).call(this, "empty");
+    v(this, V).size !== 0 && await U(this, N, Ue).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -492,7 +496,7 @@ class us extends ns {
       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) {
-    v(this, Q).size < t || await U(this, z, Ue).call(this, "next", () => v(this, Q).size < t);
+    v(this, V).size < t || await U(this, N, Ue).call(this, "next", () => v(this, V).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.
@@ -500,13 +504,13 @@ class us extends ns {
       @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
       */
   async onIdle() {
-    v(this, ie) === 0 && v(this, Q).size === 0 || await U(this, z, Ue).call(this, "idle");
+    v(this, re) === 0 && v(this, V).size === 0 || await U(this, N, Ue).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
   */
   get size() {
-    return v(this, Q).size;
+    return v(this, V).size;
   }
   /**
       Size of the queue, filtered by the given options.
@@ -514,63 +518,63 @@ class us extends ns {
       For example, this can be used to find the number of items remaining in the queue with a specific priority level.
       */
   sizeBy(t) {
-    return v(this, Q).filter(t).length;
+    return v(this, V).filter(t).length;
   }
   /**
   Number of running items (no longer in the queue).
   */
   get pending() {
-    return v(this, ie);
+    return v(this, re);
   }
   /**
   Whether the queue is currently paused.
   */
   get isPaused() {
-    return v(this, fe);
+    return v(this, me);
   }
 }
-be = new WeakMap(), we = new WeakMap(), pe = new WeakMap(), Oe = new WeakMap(), Ee = new WeakMap(), He = new WeakMap(), te = new WeakMap(), xe = new WeakMap(), Q = new WeakMap(), Ie = new WeakMap(), ie = new WeakMap(), Ce = new WeakMap(), fe = new WeakMap(), Me = new WeakMap(), je = new WeakMap(), z = new WeakSet(), Wt = function() {
+be = new WeakMap(), we = new WeakMap(), pe = new WeakMap(), Oe = new WeakMap(), Ee = new WeakMap(), He = new WeakMap(), se = new WeakMap(), xe = new WeakMap(), V = new WeakMap(), Ie = new WeakMap(), re = new WeakMap(), Ce = new WeakMap(), me = new WeakMap(), Me = new WeakMap(), je = new WeakMap(), N = new WeakSet(), Wt = function() {
   return v(this, we) || v(this, pe) < v(this, Oe);
 }, Kt = function() {
-  return v(this, ie) < v(this, Ce);
+  return v(this, re) < v(this, Ce);
 }, Qt = function() {
-  Se(this, ie)._--, U(this, z, Be).call(this), this.emit("next");
+  Se(this, re)._--, U(this, N, Be).call(this), this.emit("next");
 }, Vt = function() {
-  U(this, z, lt).call(this), U(this, z, at).call(this), M(this, xe, void 0);
+  U(this, N, lt).call(this), U(this, N, at).call(this), q(this, xe, void 0);
 }, Yt = function() {
   const t = Date.now();
-  if (v(this, te) === void 0) {
+  if (v(this, se) === void 0) {
     const i = v(this, He) - t;
     if (i < 0)
-      M(this, pe, v(this, be) ? v(this, ie) : 0);
+      q(this, pe, v(this, be) ? v(this, re) : 0);
     else
-      return v(this, xe) === void 0 && M(this, xe, setTimeout(() => {
-        U(this, z, Vt).call(this);
+      return v(this, xe) === void 0 && q(this, xe, setTimeout(() => {
+        U(this, N, Vt).call(this);
       }, i)), !0;
   }
   return !1;
 }, Be = function() {
-  if (v(this, Q).size === 0)
-    return v(this, te) && clearInterval(v(this, te)), M(this, te, void 0), this.emit("empty"), v(this, ie) === 0 && this.emit("idle"), !1;
-  if (!v(this, fe)) {
-    const t = !v(this, z, Yt);
-    if (v(this, z, Wt) && v(this, z, Kt)) {
-      const i = v(this, Q).dequeue();
-      return i ? (this.emit("active"), i(), t && U(this, z, at).call(this), !0) : !1;
+  if (v(this, V).size === 0)
+    return v(this, se) && clearInterval(v(this, se)), q(this, se, void 0), this.emit("empty"), v(this, re) === 0 && this.emit("idle"), !1;
+  if (!v(this, me)) {
+    const t = !v(this, N, Yt);
+    if (v(this, N, Wt) && v(this, N, Kt)) {
+      const i = v(this, V).dequeue();
+      return i ? (this.emit("active"), i(), t && U(this, N, at).call(this), !0) : !1;
     }
   }
   return !1;
 }, at = function() {
-  v(this, we) || v(this, te) !== void 0 || (M(this, te, setInterval(() => {
-    U(this, z, lt).call(this);
-  }, v(this, Ee))), M(this, He, Date.now() + v(this, Ee)));
+  v(this, we) || v(this, se) !== void 0 || (q(this, se, setInterval(() => {
+    U(this, N, lt).call(this);
+  }, v(this, Ee))), q(this, He, Date.now() + v(this, Ee)));
 }, lt = function() {
-  v(this, pe) === 0 && v(this, ie) === 0 && v(this, te) && (clearInterval(v(this, te)), M(this, te, void 0)), M(this, pe, v(this, be) ? v(this, ie) : 0), U(this, z, Fe).call(this);
+  v(this, pe) === 0 && v(this, re) === 0 && v(this, se) && (clearInterval(v(this, se)), q(this, se, void 0)), q(this, pe, v(this, be) ? v(this, re) : 0), U(this, N, Fe).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
 Fe = function() {
-  for (; U(this, z, Be).call(this); )
+  for (; U(this, N, Be).call(this); )
     ;
 }, jt = async function(t) {
   return new Promise((i, s) => {
@@ -612,72 +616,72 @@ function cs({
   definition: t,
   chartData: i
 }) {
-  const s = L(""), r = L(""), o = L(void 0), n = L(void 0), d = qe();
+  const s = O(""), r = O(""), o = O(void 0), n = O(void 0), d = qe();
   Xe(async () => {
-    var S, H;
-    s.value = await ((S = a == null ? void 0 : a.exploreBaseUrl) == null ? void 0 : S.call(a)) ?? "", r.value = await ((H = a == null ? void 0 : a.requestsBaseUrl) == null ? void 0 : H.call(a)) ?? "";
+    var D, I;
+    s.value = await ((D = a == null ? void 0 : a.exploreBaseUrl) == null ? void 0 : D.call(a)) ?? "", r.value = await ((I = a == null ? void 0 : a.requestsBaseUrl) == null ? void 0 : I.call(a)) ?? "";
   });
-  const u = k(() => d.analytics && d.percentiles), h = k(() => !["golden_signals", "top_n", "gauge"].includes(t.value.chart.type)), l = k(() => r.value && t.value.query && t.value.query.datasource !== "llm_usage" && u.value), f = k(() => s.value && t.value.query && ["basic", "api_usage", "llm_usage", void 0].includes(t.value.query.datasource) && u.value), g = k(() => i.value ? ot(i.value.meta.granularity_ms) : void 0), p = k(() => {
-    var Y;
-    const S = [...e.value.filters, ...t.value.query.filters ?? []], H = ((Y = t.value.query) == null ? void 0 : Y.datasource) ?? "api_usage";
-    return S.filter((de) => Bt(de.field).some((ke) => H === ke));
-  }), y = k(() => {
+  const u = R(() => d.analytics && d.percentiles), h = R(() => !["golden_signals", "top_n", "gauge"].includes(t.value.chart.type)), l = R(() => r.value && t.value.query && t.value.query.datasource !== "llm_usage" && u.value), f = R(() => s.value && t.value.query && ["basic", "api_usage", "llm_usage", void 0].includes(t.value.query.datasource) && u.value), g = R(() => i.value ? ot(i.value.meta.granularity_ms) : void 0), m = R(() => {
+    var X;
+    const D = [...e.value.filters, ...t.value.query.filters ?? []], I = ((X = t.value.query) == null ? void 0 : X.datasource) ?? "api_usage";
+    return D.filter((fe) => Bt(fe.field).some((ke) => I === ke));
+  }), y = R(() => {
     if (!f.value || !h.value)
       return "";
-    const S = p.value, H = t.value.query.time_range || e.value.timeSpec, Y = J(H, S);
-    return F(Y);
-  }), m = k(() => {
+    const D = m.value, I = t.value.query.time_range || e.value.timeSpec, X = W(I, D);
+    return F(X);
+  }), p = R(() => {
     if (!l.value || !h.value)
       return "";
-    const S = p.value, H = A(
+    const D = m.value, I = S(
       t.value.query.time_range || e.value.timeSpec,
-      S
+      D
     );
-    return C(H);
-  }), C = (S) => l.value ? `${r.value}?q=${JSON.stringify(S)}` : "", A = (S, H) => {
-    var Y, de;
+    return C(I);
+  }), C = (D) => l.value ? `${r.value}?q=${JSON.stringify(D)}` : "", S = (D, I) => {
+    var X, fe;
     return {
-      filter: H,
+      filter: I,
       timeframe: {
-        timePeriodsKey: S.type === "relative" ? S.time_range : "custom",
-        start: S.type === "absolute" ? (Y = i.value) == null ? void 0 : Y.meta.start_ms : void 0,
-        end: S.type === "absolute" ? (de = i.value) == null ? void 0 : de.meta.end_ms : void 0
+        timePeriodsKey: D.type === "relative" ? D.time_range : "custom",
+        start: D.type === "absolute" ? (X = i.value) == null ? void 0 : X.meta.start_ms : void 0,
+        end: D.type === "absolute" ? (fe = i.value) == null ? void 0 : fe.meta.end_ms : void 0
       }
     };
-  }, D = (S, H) => ({
-    filter: H,
+  }, z = (D, I) => ({
+    filter: I,
     timeframe: {
-      timePeriodsKey: S.type === "relative" ? S.time_range : "custom",
-      start: S.type === "absolute" ? S.start : void 0,
-      end: S.type === "absolute" ? S.end : void 0
+      timePeriodsKey: D.type === "relative" ? D.time_range : "custom",
+      start: D.type === "absolute" ? D.start : void 0,
+      end: D.type === "absolute" ? D.end : void 0
     }
-  }), J = (S, H) => {
-    const Y = t.value.query.dimensions ?? [];
+  }), W = (D, I) => {
+    const X = t.value.query.dimensions ?? [];
     return {
-      filters: H,
+      filters: I,
       metrics: t.value.query.metrics ?? [],
-      dimensions: Y,
-      time_range: S,
+      dimensions: X,
+      time_range: D,
       granularity: t.value.query.granularity || g.value
     };
-  }, F = (S) => {
+  }, F = (D) => {
     if (!f.value)
       return "";
-    const H = ["api_usage", "llm_usage"].includes(t.value.query.datasource) ? t.value.query.datasource : "api_usage";
-    return `${s.value}?q=${JSON.stringify(S)}&d=${H}&c=${t.value.chart.type}`;
+    const I = ["api_usage", "llm_usage"].includes(t.value.query.datasource) ? t.value.query.datasource : "api_usage";
+    return `${s.value}?q=${JSON.stringify(D)}&d=${I}&c=${t.value.chart.type}`;
   };
-  return ze([l, f], ([S, H]) => {
-    S && (o.value = { href: "" }), H && (n.value = { href: "" });
+  return ze([l, f], ([D, I]) => {
+    D && (o.value = { href: "" }), I && (n.value = { href: "" });
   }), {
     exploreLinkKebabMenu: y,
-    requestsLinkKebabMenu: m,
+    requestsLinkKebabMenu: p,
     canShowKebabMenu: h,
     canGenerateRequestsLink: l,
     canGenerateExploreLink: f,
     requestsLinkZoomActions: o,
     exploreLinkZoomActions: n,
-    buildExploreQuery: J,
-    buildRequestsQueryZoomActions: D,
+    buildExploreQuery: W,
+    buildRequestsQueryZoomActions: z,
     buildExploreLink: F,
     buildRequestLink: C
   };
@@ -720,28 +724,28 @@ function gs() {
 }
 function ms({
   context: a,
-  globalFilters: e = L([]),
-  isFullscreen: t = L(!1)
+  globalFilters: e = O([]),
+  isFullscreen: t = O(!1)
 }) {
-  const i = qe(), s = k(() => a.value.timeSpec ? a.value.timeSpec : {
+  const i = qe(), s = R(() => a.value.timeSpec ? a.value.timeSpec : {
     type: "relative",
     time_range: i.defaultQueryTimeForOrg
   });
   return {
-    internalContext: k(() => {
+    internalContext: R(() => {
       var l, f, g;
       let { tz: o, refreshInterval: n, editable: d } = a.value;
       const u = [...a.value.filters ?? [], ...e.value];
       if (o || (o = new Intl.DateTimeFormat().resolvedOptions().timeZone), n === void 0 && (n = Ji), t.value) {
-        let p = !1;
+        let m = !1;
         if (s.value.type === "relative")
-          p = ["15m", "1h", "6h", "12h", "24h"].includes(s.value.time_range);
+          m = ["15m", "1h", "6h", "12h", "24h"].includes(s.value.time_range);
         else {
-          const C = s.value.start.getTime(), A = s.value.end.getTime();
-          p = Math.abs(A - C) <= 864e5;
+          const C = s.value.start.getTime(), S = s.value.end.getTime();
+          m = Math.abs(S - C) <= 864e5;
         }
         const y = (/* @__PURE__ */ new Date()).getTime();
-        s.value.type === "absolute" && s.value.end.getTime() < y || s.value.type === "relative" && ["previous_week", "previous_month"].includes(s.value.time_range) ? n = 0 : p ? n = es : n = ts;
+        s.value.type === "absolute" && s.value.end.getTime() < y || s.value.type === "relative" && ["previous_week", "previous_month"].includes(s.value.time_range) ? n = 0 : m ? n = es : n = ts;
       }
       d === void 0 && (d = !1);
       const h = !!((g = (f = (l = mi()) == null ? void 0 : l.vnode) == null ? void 0 : f.props) != null && g.onTileTimeRangeZoom);
@@ -756,14 +760,14 @@ function ms({
     })
   };
 }
-const me = {
+const ce = {
   useContextLinks: cs,
   useDashboardInternalContext: ms,
   useEvaluateFeatureFlag: is,
   useI18n: ji,
   useIssueQuery: gs,
   useRequestQueue: ds
-}, ft = /* @__PURE__ */ V({
+}, ft = /* @__PURE__ */ j({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -774,7 +778,7 @@ const me = {
   },
   emits: ["chart-data", "queryComplete"],
   setup(a, { emit: e }) {
-    const t = a, i = e, { issueQuery: s } = me.useIssueQuery(), r = ve(ye), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, { data: n, error: d, isValidating: u } = zi(o, async () => {
+    const t = a, i = e, { issueQuery: s } = ce.useIssueQuery(), r = ve(ye), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, { data: n, error: d, isValidating: u } = zi(o, async () => {
       try {
         const y = await s(t.query, t.context, t.limitOverride);
         return f.value = null, y;
@@ -787,42 +791,42 @@ const me = {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1,
       shouldRetryOnError: !1
-    }), { state: h, swrvState: l } = Fi(n, d, u), f = L(null), g = k(() => h.value === l.ERROR || !!f.value), p = k(() => !t.queryReady || h.value === l.PENDING);
-    return ze([() => n.value, () => h.value], ([y, m]) => {
-      y && (m === "SUCCESS_HAS_DATA" || m === "SUCCESS") && i("chart-data", y);
-    }), (y, m) => {
-      const C = ge("KSkeleton"), A = ge("KEmptyState");
-      return p.value || !E(n) && !g.value ? (x(), O(C, {
+    }), { state: h, swrvState: l } = Fi(n, d, u), f = O(null), g = R(() => h.value === l.ERROR || !!f.value), m = R(() => !t.queryReady || h.value === l.PENDING);
+    return ze([() => n.value, () => h.value], ([y, p]) => {
+      y && (p === "SUCCESS_HAS_DATA" || p === "SUCCESS") && i("chart-data", y);
+    }), (y, p) => {
+      const C = he("KSkeleton"), S = he("KEmptyState");
+      return m.value || !E(n) && !g.value ? (x(), A(C, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : g.value && f.value ? (x(), O(A, {
+      })) : g.value && f.value ? (x(), A(S, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state"
       }, Je({
-        icon: P(() => [
-          f.value.type === "forbidden" ? (x(), O(E(Li), { key: 0 })) : (x(), O(E(Ai), { key: 1 }))
+        icon: H(() => [
+          f.value.type === "forbidden" ? (x(), A(E(Li), { key: 0 })) : (x(), A(E(Ai), { key: 1 }))
         ]),
-        title: P(() => [
-          se("p", null, ae(f.value.message), 1)
+        title: H(() => [
+          Y("p", null, te(f.value.message), 1)
         ]),
         _: 2
       }, [
         f.value.details ? {
           name: "default",
-          fn: P(() => [
-            se("p", null, ae(f.value.details), 1)
+          fn: H(() => [
+            Y("p", null, te(f.value.details), 1)
           ]),
           key: "0"
         } : void 0
       ]), 1024)) : E(n) ? De(y.$slots, "default", {
         key: 2,
         data: E(n)
-      }) : K("", !0);
+      }) : Q("", !0);
     };
   }
-}), ps = /* @__PURE__ */ V({
+}), ps = /* @__PURE__ */ j({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -835,19 +839,19 @@ const me = {
     exploreLink: {}
   },
   setup(a) {
-    const e = a, t = k(() => e.chartOptions.type === "single_value");
-    return (i, s) => (x(), O(ft, {
+    const e = a, t = R(() => e.chartOptions.type === "single_value");
+    return (i, s) => (x(), A(ft, {
       context: a.context,
       query: a.query,
       "query-ready": a.queryReady,
       "refresh-counter": a.refreshCounter
     }, {
-      default: P(({ data: r }) => [
-        se("div", {
+      default: H(({ data: r }) => [
+        Y("div", {
           class: Re(["analytics-chart", { "single-value": t.value }]),
           style: nt({ height: `${a.height}px` })
         }, [
-          re(E(Ri), {
+          ae(E(Ri), {
             "chart-data": r,
             "chart-options": a.chartOptions,
             "synthetics-data-key": t.value ? void 0 : a.chartOptions.synthetics_data_key
@@ -862,7 +866,7 @@ const me = {
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, Rt = /* @__PURE__ */ _e(ps, [["__scopeId", "data-v-5304442e"]]), ys = { class: "analytics-chart" }, vs = /* @__PURE__ */ V({
+}, Rt = /* @__PURE__ */ _e(ps, [["__scopeId", "data-v-5304442e"]]), ys = { class: "analytics-chart" }, vs = /* @__PURE__ */ j({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -877,29 +881,29 @@ const me = {
   },
   emits: ["edit-tile", "chart-data", "zoom-time-range", "view-requests", "select-chart-range"],
   setup(a, { emit: e }) {
-    const t = a, i = e, { i18n: s } = me.useI18n(), r = k(() => ({
+    const t = a, i = e, { i18n: s } = ce.useI18n(), r = R(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chart_dataset_colors,
       threshold: t.chartOptions.threshold,
       hideTruncationWarning: t.query.limit !== void 0 && t.query.limit > 0
-    })), o = k(() => t.context.zoomable), n = () => {
+    })), o = R(() => t.context.zoomable), n = () => {
       i("edit-tile");
     }, d = (u) => {
       i("chart-data", u);
     };
     return (u, h) => {
-      const l = ge("KDropdownItem");
-      return x(), O(ft, {
+      const l = he("KDropdownItem");
+      return x(), A(ft, {
         context: a.context,
         query: a.query,
         "query-ready": a.queryReady,
         "refresh-counter": a.refreshCounter,
         onChartData: d
       }, {
-        default: P(({ data: f }) => [
-          se("div", ys, [
-            re(E(ki), Ht({
+        default: H(({ data: f }) => [
+          Y("div", ys, [
+            ae(E(ki), Ht({
               "chart-data": f,
               "chart-options": r.value,
               "explore-link": a.exploreLink,
@@ -914,10 +918,10 @@ const me = {
             }), Je({ _: 2 }, [
               a.context.editable ? {
                 name: "menu-items",
-                fn: P(() => [
-                  re(l, { onClick: n }, {
-                    default: P(() => [
-                      ht(ae(E(s).t("renderer.edit")), 1)
+                fn: H(() => [
+                  ae(l, { onClick: n }, {
+                    default: H(() => [
+                      ht(te(E(s).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -931,7 +935,7 @@ const me = {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), gt = /* @__PURE__ */ _e(vs, [["__scopeId", "data-v-52357845"]]), kt = /* @__PURE__ */ V({
+}), gt = /* @__PURE__ */ _e(vs, [["__scopeId", "data-v-52357845"]]), kt = /* @__PURE__ */ j({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -944,7 +948,7 @@ const me = {
     exploreLink: {}
   },
   setup(a) {
-    return (e, t) => (x(), O(gt, {
+    return (e, t) => (x(), A(gt, {
       "chart-options": a.chartOptions,
       context: a.context,
       "extra-props": { showAnnotations: !1 },
@@ -954,7 +958,7 @@ const me = {
       "refresh-counter": a.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Tt = /* @__PURE__ */ V({
+}), Tt = /* @__PURE__ */ j({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -969,7 +973,7 @@ const me = {
   emits: ["zoom-time-range", "select-chart-range"],
   setup(a, { emit: e }) {
     const t = e;
-    return (i, s) => (x(), O(gt, {
+    return (i, s) => (x(), A(gt, {
       "chart-options": a.chartOptions,
       context: a.context,
       "explore-link": a.exploreLink,
@@ -982,7 +986,7 @@ const me = {
       onZoomTimeRange: s[1] || (s[1] = (r) => t("zoom-time-range", r))
     }, null, 8, ["chart-options", "context", "explore-link", "height", "query", "query-ready", "refresh-counter", "requests-link"]));
   }
-}), _s = /* @__PURE__ */ V({
+}), _s = /* @__PURE__ */ j({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -995,7 +999,7 @@ const me = {
     exploreLink: {}
   },
   setup(a) {
-    const e = a, t = k(() => {
+    const e = a, t = R(() => {
       var s, r;
       const i = (s = e.query) == null ? void 0 : s.datasource;
       if (i && i !== "api_usage" && i !== "basic")
@@ -1016,9 +1020,9 @@ const me = {
     return (i, s) => (x(), G("div", {
       class: Re(["metric-card-tile-wrapper", { titled: !!e.chartOptions.chart_title }])
     }, [
-      re(E(Pi), pi(yi(t.value)), {
-        default: P(() => [
-          re(E($i))
+      ae(E(Pi), pi(yi(t.value)), {
+        default: H(() => [
+          ae(E($i))
         ]),
         _: 1
       }, 16)
@@ -1027,15 +1031,15 @@ const me = {
 }), bs = /* @__PURE__ */ _e(_s, [["__scopeId", "data-v-36a73a07"]]), ws = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
-}, St = /* @__PURE__ */ V({
+}, St = /* @__PURE__ */ j({
   __name: "FallbackEntityLink",
   props: {
     entityLinkData: {}
   },
   setup(a) {
-    return (e, t) => (x(), G("div", ws, ae(a.entityLinkData.label), 1));
+    return (e, t) => (x(), G("div", ws, te(a.entityLinkData.label), 1));
   }
-}), Es = /* @__PURE__ */ V({
+}), Es = /* @__PURE__ */ j({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -1066,21 +1070,21 @@ const me = {
           return e.chartOptions.entity_link.replace(Et, r.id);
       return "";
     };
-    return (r, o) => (x(), O(ft, {
+    return (r, o) => (x(), A(ft, {
       context: a.context,
       query: a.query,
       "query-ready": a.queryReady,
       "refresh-counter": a.refreshCounter
     }, {
-      default: P(({ data: n }) => [
-        re(E(Ti), {
+      default: H(({ data: n }) => [
+        ae(E(Ti), {
           data: n,
           "synthetics-data-key": a.chartOptions.synthetics_data_key
         }, Je({ _: 2 }, [
           e.chartOptions.entity_link ? {
             name: "name",
-            fn: P(({ record: d }) => [
-              re(E(i), {
+            fn: H(({ record: d }) => [
+              ae(E(i), {
                 "entity-link-data": {
                   id: d.id,
                   label: d.name,
@@ -1096,7 +1100,7 @@ const me = {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), zt = "#6c7489", xs = "12px", Dt = "20px", Nt = "32px", Xt = "20px", Cs = /* @__PURE__ */ V({
+}), zt = "#6c7489", xs = "12px", Dt = "20px", Nt = "32px", Xt = "20px", Cs = /* @__PURE__ */ j({
   __name: "DonutChartRenderer",
   props: {
     query: {},
@@ -1109,7 +1113,7 @@ const me = {
     exploreLink: {}
   },
   setup(a) {
-    return (e, t) => (x(), O(gt, {
+    return (e, t) => (x(), A(gt, {
       "chart-options": a.chartOptions,
       context: a.context,
       height: a.height,
@@ -1121,7 +1125,7 @@ const me = {
 }), Rs = ["data-testid"], ks = {
   key: 0,
   class: "tile-header"
-}, Ts = { class: "badge-container" }, Ss = { class: "badge-text" }, zs = { key: 0 }, Ds = ["data-testid"], Ns = ["data-testid"], Ls = { class: "delete-option" }, As = ["data-testid"], Os = ["data-testid"], Hs = /* @__PURE__ */ V({
+}, Ts = { class: "badge-container" }, Ss = { class: "badge-text" }, zs = { key: 0 }, Ds = ["data-testid"], Ns = ["data-testid"], Ls = { class: "delete-option" }, As = ["data-testid"], Os = ["data-testid"], Hs = /* @__PURE__ */ j({
   __name: "DashboardTile",
   props: /* @__PURE__ */ Ge({
     context: {},
@@ -1143,32 +1147,32 @@ const me = {
     }));
     const t = parseInt(Xt, 10), i = a, s = Mt(a, "refreshCounter"), r = () => {
       y.value = !0, s.value++;
-    }, o = e, n = It(() => import("./GeoMapRenderer-DKr9rmZa.js")), d = ve(ye), { i18n: u } = me.useI18n(), h = L(), l = L({ status: "loading" }), f = L(!1), g = L(), p = L(!1), y = L(!0), {
-      exploreLinkKebabMenu: m,
+    }, o = e, n = It(() => import("./GeoMapRenderer-pyhBNd6Y.js")), d = ve(ye), { i18n: u } = ce.useI18n(), h = O(), l = O({ status: "loading" }), f = O(!1), g = O(), m = O(!1), y = O(!0), {
+      exploreLinkKebabMenu: p,
       requestsLinkKebabMenu: C,
-      canShowKebabMenu: A,
-      canGenerateRequestsLink: D,
-      canGenerateExploreLink: J,
+      canShowKebabMenu: S,
+      canGenerateRequestsLink: z,
+      canGenerateExploreLink: W,
       requestsLinkZoomActions: F,
-      exploreLinkZoomActions: S,
-      buildExploreQuery: H,
-      buildExploreLink: Y,
-      buildRequestLink: de,
+      exploreLinkZoomActions: D,
+      buildExploreQuery: I,
+      buildExploreLink: X,
+      buildRequestLink: fe,
       buildRequestsQueryZoomActions: ne
-    } = me.useContextLinks({
+    } = ce.useContextLinks({
       queryBridge: d,
       chartData: rt(h),
       definition: rt(Ne(i, "definition")),
       context: rt(Ne(i, "context"))
-    }), { issueQuery: ke } = me.useIssueQuery();
+    }), { issueQuery: ke } = ce.useIssueQuery();
     ze(() => i.definition, async (b, T) => {
-      await dt(), g.value && (p.value = g.value.scrollWidth > g.value.clientWidth);
+      await dt(), g.value && (m.value = g.value.scrollWidth > g.value.clientWidth);
       try {
         JSON.stringify(b == null ? void 0 : b.query) !== JSON.stringify(T == null ? void 0 : T.query) && (y.value = !0);
       } catch {
       }
     }, { immediate: !0, deep: !0 });
-    const tt = k(() => u.t("csvExport.defaultFilename")), $e = k(() => A.value && !i.hideActions && (R.value || i.context.editable)), R = k(() => !!m.value || ("allow_csv_export" in i.definition.chart ? i.definition.chart.allow_csv_export : !0) || i.context.editable), I = {
+    const tt = R(() => u.t("csvExport.defaultFilename")), $e = R(() => S.value && !i.hideActions && (k.value || i.context.editable)), k = R(() => !!p.value || ("allow_csv_export" in i.definition.chart ? i.definition.chart.allow_csv_export : !0) || i.context.editable), M = {
       timeseries_line: Tt,
       timeseries_bar: Tt,
       horizontal_bar: kt,
@@ -1180,16 +1184,16 @@ const me = {
       slottable: void 0,
       single_value: Rt,
       choropleth_map: n
-    }, $ = k(() => {
-      var b, T, N;
+    }, $ = R(() => {
+      var b, T, L;
       return {
-        ...(b = q.value) != null && b.rendererEvents.supportsRequests ? { "select-chart-range": di } : {},
-        ...(T = q.value) != null && T.rendererEvents.supportsZoom ? { "zoom-time-range": hi } : {},
-        ...(N = q.value) != null && N.rendererEvents.supportsBounds ? { "bounds-change": ui } : {}
+        ...(b = P.value) != null && b.rendererEvents.supportsRequests ? { "select-chart-range": di } : {},
+        ...(T = P.value) != null && T.rendererEvents.supportsZoom ? { "zoom-time-range": hi } : {},
+        ...(L = P.value) != null && L.rendererEvents.supportsBounds ? { "bounds-change": ui } : {}
       };
-    }), q = k(() => {
-      var oe, ce;
-      const b = I[i.definition.chart.type], T = !!((oe = b == null ? void 0 : b.emits) != null && oe.includes("select-chart-range")), N = !!((ce = b == null ? void 0 : b.emits) != null && ce.includes("zoom-time-range")), X = i.definition.chart.type === "choropleth_map";
+    }), P = R(() => {
+      var oe, ge;
+      const b = M[i.definition.chart.type], T = !!((oe = b == null ? void 0 : b.emits) != null && oe.includes("select-chart-range")), L = !!((ge = b == null ? void 0 : b.emits) != null && ge.includes("zoom-time-range")), J = i.definition.chart.type === "choropleth_map";
       return b && {
         component: b,
         rendererProps: {
@@ -1200,46 +1204,46 @@ const me = {
           height: i.height - t * 2,
           refreshCounter: s.value,
           requestsLink: F.value,
-          exploreLink: S.value
+          exploreLink: D.value
         },
         rendererEvents: {
           supportsRequests: T,
-          supportsZoom: N,
-          supportsBounds: X
+          supportsZoom: L,
+          supportsBounds: J
         }
       };
-    }), j = k(() => {
+    }), Z = R(() => {
       var T;
       const b = (T = i.definition.query) == null ? void 0 : T.time_range;
       if ((b == null ? void 0 : b.type) === "relative") {
-        const N = wi.get(Ei[b.time_range]);
-        return N ? N.display : (console.warn("Did not recognize the given relative time range:", b.time_range), b.time_range);
+        const L = wi.get(Ei[b.time_range]);
+        return L ? L.display : (console.warn("Did not recognize the given relative time range:", b.time_range), b.time_range);
       } else if ((b == null ? void 0 : b.type) === "absolute") {
-        const N = b.tz || "Etc/UTC";
-        return `${wt(b.start, { short: !0, tz: N })} - ${wt(b.end, { short: !0, tz: N })}`;
+        const L = b.tz || "Etc/UTC";
+        return `${wt(b.start, { short: !0, tz: L })} - ${wt(b.end, { short: !0, tz: L })}`;
       }
       return null;
-    }), Te = k(() => {
+    }), Te = R(() => {
       if (i.definition.chart.type === "slottable")
         return !1;
-      const b = !!i.definition.chart.chart_title, T = i.definition.chart.type === "golden_signals" && !!i.definition.chart.description, N = i.showRefresh, X = $e.value && R.value && !i.isFullscreen, oe = !!j.value;
-      return b || X || oe || T || N;
-    }), yt = k(() => h.value ? ot(h.value.meta.granularity_ms) : void 0), ei = k(() => ["timeseries_line", "timeseries_bar"].includes(i.definition.chart.type)), vt = k(() => {
-      var T, N;
+      const b = !!i.definition.chart.chart_title, T = i.definition.chart.type === "golden_signals" && !!i.definition.chart.description, L = i.showRefresh, J = $e.value && k.value && !i.isFullscreen, oe = !!Z.value;
+      return b || J || oe || T || L;
+    }), yt = R(() => h.value ? ot(h.value.meta.granularity_ms) : void 0), ei = R(() => ["timeseries_line", "timeseries_bar"].includes(i.definition.chart.type)), vt = R(() => {
+      var T, L;
       if (!ei.value || !i.queryReady || y.value)
         return !1;
-      const b = (N = (T = i.definition) == null ? void 0 : T.query) == null ? void 0 : N.granularity;
+      const b = (L = (T = i.definition) == null ? void 0 : T.query) == null ? void 0 : L.granularity;
       return !b || !yt.value ? !1 : b !== yt.value;
-    }), ti = k(() => {
-      var N, X, oe;
-      const b = ot(((N = h.value) == null ? void 0 : N.meta.granularity_ms) ?? 0) ?? "unknown", T = ((oe = (X = i.definition) == null ? void 0 : X.query) == null ? void 0 : oe.granularity) ?? "unknown";
+    }), ti = R(() => {
+      var L, J, oe;
+      const b = ot(((L = h.value) == null ? void 0 : L.meta.granularity_ms) ?? 0) ?? "unknown", T = ((oe = (J = i.definition) == null ? void 0 : J.query) == null ? void 0 : oe.granularity) ?? "unknown";
       return u.t("query_aged_out_warning", {
         currentGranularity: u.t(`granularities.${b}`),
         savedGranularity: u.t(`granularities.${T}`)
       });
-    }), ii = k(() => {
-      var N, X;
-      const b = [...i.context.filters, ...i.definition.query.filters ?? []], T = ((X = (N = i.definition) == null ? void 0 : N.query) == null ? void 0 : X.datasource) ?? "api_usage";
+    }), ii = R(() => {
+      var L, J;
+      const b = [...i.context.filters, ...i.definition.query.filters ?? []], T = ((J = (L = i.definition) == null ? void 0 : L.query) == null ? void 0 : J.datasource) ?? "api_usage";
       return b.filter((oe) => Bt(oe.field).some((it) => T === it));
     }), si = () => {
       o("edit-tile", i.definition);
@@ -1262,8 +1266,8 @@ const me = {
       else if (h.value)
         l.value = { status: "success", chartData: h.value };
       else {
-        const T = ze(h, (N) => {
-          N && (l.value = { status: "success", chartData: N }, T());
+        const T = ze(h, (L) => {
+          L && (l.value = { status: "success", chartData: L }, T());
         });
       }
     }, hi = (b) => {
@@ -1279,11 +1283,11 @@ const me = {
       };
       o("tile-bounds-change", T);
     }, di = (b) => {
-      const T = ii.value, N = ne(b, T), X = H(b, T);
-      F.value = D.value ? { href: de(N) } : void 0, S.value = J.value ? { href: Y(X) } : void 0;
+      const T = ii.value, L = ne(b, T), J = I(b, T);
+      F.value = z.value ? { href: fe(L) } : void 0, D.value = W.value ? { href: X(J) } : void 0;
     };
     return (b, T) => {
-      const N = ge("KTooltip"), X = ge("KBadge"), oe = ge("KButton"), ce = ge("KDropdownItem"), it = ge("KDropdown");
+      const L = he("KTooltip"), J = he("KBadge"), oe = he("KButton"), ge = he("KDropdownItem"), it = he("KDropdown");
       return x(), G("div", {
         class: Re(["tile-boundary", {
           editable: a.context.editable,
@@ -1292,44 +1296,44 @@ const me = {
         "data-testid": `tile-${a.tileId}`
       }, [
         Te.value && a.definition.chart.type !== "slottable" ? (x(), G("div", ks, [
-          re(N, {
+          ae(L, {
             class: "title-tooltip",
-            disabled: !p.value,
+            disabled: !m.value,
             "max-width": "500",
             text: a.definition.chart.chart_title
           }, {
-            default: P(() => [
-              se("div", {
+            default: H(() => [
+              Y("div", {
                 ref_key: "titleRef",
                 ref: g,
                 class: "title"
-              }, ae(a.definition.chart.chart_title), 513)
+              }, te(a.definition.chart.chart_title), 513)
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          se("div", Ts, [
-            j.value ? (x(), O(X, {
+          Y("div", Ts, [
+            Z.value ? (x(), A(J, {
               key: 0,
               "data-testid": "time-range-badge",
               tooltip: vt.value ? ti.value : void 0,
               "tooltip-attributes": { maxWidth: "320px" }
             }, Je({
-              default: P(() => [
-                se("span", Ss, ae(j.value), 1)
+              default: H(() => [
+                Y("span", Ss, te(Z.value), 1)
               ]),
               _: 2
             }, [
               vt.value ? {
                 name: "icon",
-                fn: P(() => [
-                  re(E(Oi), { size: E(xs) }, null, 8, ["size"])
+                fn: H(() => [
+                  ae(E(Oi), { size: E(xs) }, null, 8, ["size"])
                 ]),
                 key: "0"
               } : void 0
-            ]), 1032, ["tooltip"])) : K("", !0)
+            ]), 1032, ["tooltip"])) : Q("", !0)
           ]),
           a.showRefresh ? (x(), G("div", zs, [
-            re(oe, {
+            ae(oe, {
               appearance: "secondary",
               class: "refresh-button",
               disabled: y.value,
@@ -1337,13 +1341,13 @@ const me = {
               size: "small",
               onClick: r
             }, {
-              default: P(() => [
-                y.value ? (x(), O(E(Hi), {
+              default: H(() => [
+                y.value ? (x(), A(E(Hi), {
                   key: 0,
                   role: "button",
                   size: E(Nt),
                   tabindex: "0"
-                }, null, 8, ["size"])) : (x(), O(E(Ii), {
+                }, null, 8, ["size"])) : (x(), A(E(Ii), {
                   key: 1,
                   role: "button",
                   size: E(Nt),
@@ -1352,74 +1356,74 @@ const me = {
               ]),
               _: 1
             }, 8, ["disabled"])
-          ])) : K("", !0),
+          ])) : Q("", !0),
           $e.value ? (x(), G("div", {
             key: 1,
             class: "tile-actions",
             "data-testid": `tile-actions-${a.tileId}`
           }, [
-            E(A) && a.context.editable && !a.isFullscreen ? (x(), O(E(Mi), {
+            E(S) && a.context.editable && !a.isFullscreen ? (x(), A(E(Mi), {
               key: 0,
               class: "edit-icon",
               color: E(zt),
               "data-testid": `edit-tile-${a.tileId}`,
               size: E(Dt),
               onClick: si
-            }, null, 8, ["color", "data-testid", "size"])) : K("", !0),
-            E(A) && R.value && !a.isFullscreen ? (x(), O(it, {
+            }, null, 8, ["color", "data-testid", "size"])) : Q("", !0),
+            E(S) && k.value && !a.isFullscreen ? (x(), A(it, {
               key: 1,
               class: "dropdown",
               "data-testid": `chart-action-menu-${a.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: P(() => [
-                E(m) ? (x(), O(ce, {
+              items: H(() => [
+                E(p) ? (x(), A(ge, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${a.tileId}`,
-                  item: { label: E(u).t("jumpToExplore"), to: E(m) }
-                }, null, 8, ["data-testid", "item"])) : K("", !0),
-                E(C) ? (x(), O(ce, {
+                  item: { label: E(u).t("jumpToExplore"), to: E(p) }
+                }, null, 8, ["data-testid", "item"])) : Q("", !0),
+                E(C) ? (x(), A(ge, {
                   key: 1,
                   "data-testid": `chart-jump-to-requests-${a.tileId}`,
                   item: { label: E(u).t("jumpToRequests"), to: E(C) }
-                }, null, 8, ["data-testid", "item"])) : K("", !0),
-                !("allow_csv_export" in a.definition.chart) || a.definition.chart.allow_csv_export ? (x(), O(ce, {
+                }, null, 8, ["data-testid", "item"])) : Q("", !0),
+                !("allow_csv_export" in a.definition.chart) || a.definition.chart.allow_csv_export ? (x(), A(ge, {
                   key: 2,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${a.tileId}`,
                   onClick: li
                 }, {
-                  default: P(() => [
-                    se("span", {
+                  default: H(() => [
+                    Y("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${a.tileId}`
-                    }, ae(E(u).t("csvExport.exportAsCsv")), 9, Ns)
+                    }, te(E(u).t("csvExport.exportAsCsv")), 9, Ns)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : K("", !0),
-                a.context.editable ? (x(), O(ce, {
+                }, 8, ["data-testid"])) : Q("", !0),
+                a.context.editable ? (x(), A(ge, {
                   key: 3,
                   "data-testid": `duplicate-tile-${a.tileId}`,
                   onClick: ri
                 }, {
-                  default: P(() => [
-                    ht(ae(E(u).t("renderer.duplicateTile")), 1)
+                  default: H(() => [
+                    ht(te(E(u).t("renderer.duplicateTile")), 1)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : K("", !0),
-                a.context.editable ? (x(), O(ce, {
+                }, 8, ["data-testid"])) : Q("", !0),
+                a.context.editable ? (x(), A(ge, {
                   key: 4,
                   "data-testid": `remove-tile-${a.tileId}`,
                   onClick: ni
                 }, {
-                  default: P(() => [
-                    se("span", Ls, ae(E(u).t("renderer.delete")), 1)
+                  default: H(() => [
+                    Y("span", Ls, te(E(u).t("renderer.delete")), 1)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : K("", !0)
+                }, 8, ["data-testid"])) : Q("", !0)
               ]),
-              default: P(() => [
-                re(E(qi), {
+              default: H(() => [
+                ae(E(qi), {
                   class: "kebab-action-menu",
                   color: E(zt),
                   "data-testid": `kebab-action-menu-${a.tileId}`,
@@ -1427,25 +1431,25 @@ const me = {
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
-            }, 8, ["data-testid"])) : K("", !0)
+            }, 8, ["data-testid"])) : Q("", !0)
           ], 8, Ds)) : "description" in a.definition.chart ? (x(), G("div", {
             key: 2,
             class: "header-description",
             "data-testid": `tile-description-${a.tileId}`
-          }, ae(a.definition.chart.description), 9, As)) : K("", !0),
-          f.value ? (x(), O(E(Si), {
+          }, te(a.definition.chart.description), 9, As)) : Q("", !0),
+          f.value ? (x(), A(E(Si), {
             key: 3,
             "data-testid": `csv-export-modal-${a.tileId}`,
             "export-state": l.value,
             filename: tt.value,
             onCloseModal: ai
-          }, null, 8, ["data-testid", "export-state", "filename"])) : K("", !0)
-        ])) : K("", !0),
-        se("div", {
+          }, null, 8, ["data-testid", "export-state", "filename"])) : Q("", !0)
+        ])) : Q("", !0),
+        Y("div", {
           class: Re(["tile-content", `type-${a.definition.chart.type}`]),
           "data-testid": `tile-content-${a.tileId}`
         }, [
-          q.value ? (x(), O(qt(q.value.component), Ht({ key: 0 }, q.value.rendererProps, vi($.value), { onChartData: oi }), null, 16)) : K("", !0)
+          P.value ? (x(), A(qt(P.value.component), Ht({ key: 0 }, P.value.rendererProps, vi($.value), { onChartData: oi }), null, 16)) : Q("", !0)
         ], 10, Os)
       ], 10, Rs);
     };
@@ -1461,7 +1465,7 @@ const me = {
   for (let r = 0; r < t; r++)
     i.get(r) ? s.push("auto") : s.push(`${a}px`);
   return s;
-}, Ms = /* @__PURE__ */ V({
+}, Ms = /* @__PURE__ */ j({
   __name: "GridLayout",
   props: {
     tileHeight: {
@@ -1479,7 +1483,7 @@ const me = {
       v2a38e79e: E(ct),
       v4cc71de6: r.value
     }));
-    const e = a, t = L(null), i = L(0), s = new ResizeObserver((n) => {
+    const e = a, t = O(null), i = O(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
@@ -1489,7 +1493,7 @@ const me = {
     }), Ze(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = k(() => Is(e.tileHeight, e.tiles).join(" ")), o = k(() => e.tiles.map((n, d) => ({
+    const r = R(() => Is(e.tileHeight, e.tiles).join(" ")), o = R(() => e.tiles.map((n, d) => ({
       key: `tile-${d}`,
       tile: n,
       style: {
@@ -1859,7 +1863,7 @@ class c {
     return !(!e || e.w === e.h || e.locked || e.noResize || (t = e.grid) != null && t.opts.disableResize || e.minW && e.minW === e.maxW || e.minH && e.minH === e.maxH);
   }
 }
-class he {
+class ue {
   constructor(e = {}) {
     this.addedNodes = [], this.removedNodes = [], this.defaultColumn = 12, this.column = e.column || this.defaultColumn, this.column > this.defaultColumn && (this.defaultColumn = this.column), this.maxRow = e.maxRow, this._float = e.float, this.nodes = e.nodes || [], this.onChange = e.onChange;
   }
@@ -2037,7 +2041,7 @@ class he {
    * @param resizing if out of bound, resize down or move into the grid to fit ?
    */
   prepareNode(e, t) {
-    e._id = e._id ?? he._idSeq++;
+    e._id = e._id ?? ue._idSeq++;
     const i = e.id;
     if (i) {
       let r = 1;
@@ -2132,7 +2136,7 @@ class he {
     if (t.pack = !0, !this.maxRow)
       return this.moveNode(e, t);
     let i;
-    const s = new he({
+    const s = new ue({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
@@ -2154,7 +2158,7 @@ class he {
   willItFit(e) {
     if (delete e._willFitPos, !this.maxRow)
       return !0;
-    const t = new he({
+    const t = new ue({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((s) => ({ ...s }))
@@ -2182,8 +2186,8 @@ class he {
       const l = e._moving && !t.nested;
       let f = l ? this.directionCollideCoverage(e, t, n) : n[0];
       if (l && f && ((h = (u = e.grid) == null ? void 0 : u.opts) != null && h.subGridDynamic) && !e.grid._isTemp) {
-        const g = c.areaIntercept(t.rect, f._rect), p = c.area(t.rect), y = c.area(f._rect);
-        g / (p < y ? p : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
+        const g = c.areaIntercept(t.rect, f._rect), m = c.area(t.rect), y = c.area(f._rect);
+        g / (m < y ? m : y) > 0.8 && (f.grid.makeSubGrid(f.el, void 0, e), f = void 0);
       }
       f ? d = !this._fixCollisions(e, r, f, t) : (d = !1, i && delete t.pack);
     }
@@ -2290,7 +2294,7 @@ class he {
     return e.forEach((r, o) => {
       if (r._id === void 0) {
         const n = r.id ? this.nodes.find((d) => d.id === r.id) : void 0;
-        r._id = (n == null ? void 0 : n._id) ?? he._idSeq++;
+        r._id = (n == null ? void 0 : n._id) ?? ue._idSeq++;
       }
       s[o] = { x: r.x, y: r.y, w: r.w, _id: r._id };
     }), this._layouts = i ? [] : this._layouts || [], this._layouts[t] = s, this;
@@ -2301,7 +2305,7 @@ class he {
    * @param column corresponding column index to save it under
    */
   cacheOneLayout(e, t) {
-    e._id = e._id ?? he._idSeq++;
+    e._id = e._id ?? ue._idSeq++;
     const i = { x: e.x, y: e.y, w: e.w, _id: e._id };
     (e.autoPosition || e.x === void 0) && (delete i.x, delete i.y, e.autoPosition && (i.autoPosition = !0)), this._layouts = this._layouts || [], this._layouts[t] = this._layouts[t] || [];
     const s = this.findCacheLayout(e, t);
@@ -2325,8 +2329,8 @@ class he {
     return this;
   }
 }
-he._idSeq = 0;
-const Z = {
+ue._idSeq = 0;
+const ee = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
   auto: !0,
@@ -2359,7 +2363,7 @@ const Z = {
 class w {
 }
 const le = 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 ue {
+class de {
 }
 function We(a, e) {
   a.touches.length > 1 || (a.cancelable && a.preventDefault(), c.simulateMouseEvent(a.changedTouches[0], e));
@@ -2368,17 +2372,17 @@ function Jt(a, e) {
   a.cancelable && a.preventDefault(), c.simulateMouseEvent(a, e);
 }
 function Ke(a) {
-  ue.touchHandled || (ue.touchHandled = !0, We(a, "mousedown"));
+  de.touchHandled || (de.touchHandled = !0, We(a, "mousedown"));
 }
 function Qe(a) {
-  ue.touchHandled && We(a, "mousemove");
+  de.touchHandled && We(a, "mousemove");
 }
 function Ve(a) {
-  if (!ue.touchHandled)
+  if (!de.touchHandled)
     return;
-  ue.pointerLeaveTimeout && (window.clearTimeout(ue.pointerLeaveTimeout), delete ue.pointerLeaveTimeout);
+  de.pointerLeaveTimeout && (window.clearTimeout(de.pointerLeaveTimeout), delete de.pointerLeaveTimeout);
   const e = !!w.dragElement;
-  We(a, "mouseup"), e || We(a, "click"), ue.touchHandled = !1;
+  We(a, "mouseup"), e || We(a, "click"), de.touchHandled = !1;
 }
 function Ye(a) {
   a.pointerType !== "mouse" && a.target.releasePointerCapture(a.pointerId);
@@ -2387,8 +2391,8 @@ function Lt(a) {
   w.dragElement && a.pointerType !== "mouse" && Jt(a, "mouseenter");
 }
 function At(a) {
-  w.dragElement && a.pointerType !== "mouse" && (ue.pointerLeaveTimeout = window.setTimeout(() => {
-    delete ue.pointerLeaveTimeout, Jt(a, "mouseleave");
+  w.dragElement && a.pointerType !== "mouse" && (de.pointerLeaveTimeout = window.setTimeout(() => {
+    delete de.pointerLeaveTimeout, Jt(a, "mouseleave");
   }, 10));
 }
 class et {
@@ -2944,7 +2948,7 @@ class Fs {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const W = new Fs();
+const K = new Fs();
 class _ {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -3009,7 +3013,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   /** @internal create placeholder DIV as needed */
   get placeholder() {
     if (!this._placeholder) {
-      this._placeholder = c.createDiv([this.opts.placeholderClass, Z.itemClass, this.opts.itemClass]);
+      this._placeholder = c.createDiv([this.opts.placeholderClass, ee.itemClass, this.opts.itemClass]);
       const e = c.createDiv(["placeholder-content"], this._placeholder);
       this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
     }
@@ -3028,48 +3032,48 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     let s = (l = t.columnOpts) == null ? void 0 : l.breakpoints;
     const r = t;
     if (r.oneColumnModeDomSort && (delete r.oneColumnModeDomSort, console.log("warning: Gridstack oneColumnModeDomSort no longer supported. Use GridStackOptions.columnOpts instead.")), r.oneColumnSize || r.disableOneColumnMode === !1) {
-      const p = r.oneColumnSize || 768;
+      const m = r.oneColumnSize || 768;
       delete r.oneColumnSize, delete r.disableOneColumnMode, t.columnOpts = t.columnOpts || {}, s = t.columnOpts.breakpoints = t.columnOpts.breakpoints || [];
-      let y = s.find((m) => m.c === 1);
-      y ? y.w = p : (y = { c: 1, w: p }, s.push(y, { c: 12, w: p + 1 }));
+      let y = s.find((p) => p.c === 1);
+      y ? y.w = m : (y = { c: 1, w: m }, s.push(y, { c: 12, w: m + 1 }));
     }
     const o = t.columnOpts;
-    o && (!o.columnWidth && !((f = o.breakpoints) != null && f.length) ? (delete t.columnOpts, s = void 0) : o.columnMax = o.columnMax || 12), (s == null ? void 0 : s.length) > 1 && s.sort((p, y) => (y.w || 0) - (p.w || 0));
+    o && (!o.columnWidth && !((f = o.breakpoints) != null && f.length) ? (delete t.columnOpts, s = void 0) : o.columnMax = o.columnMax || 12), (s == null ? void 0 : s.length) > 1 && s.sort((m, y) => (y.w || 0) - (m.w || 0));
     const n = {
-      ...c.cloneDeep(Z),
-      column: c.toNumber(e.getAttribute("gs-column")) || Z.column,
-      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || Z.minRow,
-      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || Z.maxRow,
-      staticGrid: c.toBool(e.getAttribute("gs-static")) || Z.staticGrid,
+      ...c.cloneDeep(ee),
+      column: c.toNumber(e.getAttribute("gs-column")) || ee.column,
+      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || ee.minRow,
+      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || ee.maxRow,
+      staticGrid: c.toBool(e.getAttribute("gs-static")) || ee.staticGrid,
       sizeToContent: c.toBool(e.getAttribute("gs-size-to-content")) || void 0,
       draggable: {
-        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || Z.draggable.handle
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || ee.draggable.handle
       },
       removableOptions: {
-        accept: t.itemClass || Z.removableOptions.accept,
-        decline: Z.removableOptions.decline
+        accept: t.itemClass || ee.removableOptions.accept,
+        decline: ee.removableOptions.decline
       }
     };
     e.getAttribute("gs-animate") && (n.animate = c.toBool(e.getAttribute("gs-animate"))), t = c.defaults(t, n), this._initMargin(), this.checkDynamicColumn(), this.el.classList.add("gs-" + t.column), t.rtl === "auto" && (t.rtl = e.style.direction === "rtl"), t.rtl && this.el.classList.add("grid-stack-rtl");
-    const d = this.el.closest("." + Z.itemClass), u = d == null ? void 0 : d.gridstackNode;
-    u && (u.subGrid = this, this.parentGridNode = u, this.el.classList.add("grid-stack-nested"), u.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== Z.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = le), this._styleSheetClass = "gs-id-" + he._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const h = t.engineClass || _.engineClass || he;
+    const d = this.el.closest("." + ee.itemClass), u = d == null ? void 0 : d.gridstackNode;
+    u && (u.subGrid = this, this.parentGridNode = u, this.el.classList.add("grid-stack-nested"), u.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== ee.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = le), this._styleSheetClass = "gs-id-" + ue._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const h = t.engineClass || _.engineClass || ue;
     if (this.engine = new h({
       column: this.getColumn(),
       float: t.float,
       maxRow: t.maxRow,
-      onChange: (p) => {
+      onChange: (m) => {
         let y = 0;
-        this.engine.nodes.forEach((m) => {
-          y = Math.max(y, m.y + m.h);
-        }), p.forEach((m) => {
-          const C = m.el;
-          C && (m._removeDOM ? (C && C.remove(), delete m._removeDOM) : this._writePosAttr(C, m));
+        this.engine.nodes.forEach((p) => {
+          y = Math.max(y, p.y + p.h);
+        }), m.forEach((p) => {
+          const C = p.el;
+          C && (p._removeDOM ? (C && C.remove(), delete p._removeDOM) : this._writePosAttr(C, p));
         }), this._updateStyles(!1, y);
       }
-    }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((p) => this._prepareElement(p)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
-      const p = t.children;
-      delete t.children, p.length && this.load(p);
+    }), this._updateStyles(!1, 0), t.auto && (this.batchUpdate(), this.engine._loading = !0, this.getGridItems().forEach((m) => this._prepareElement(m)), delete this.engine._loading, this.batchUpdate(!1)), t.children) {
+      const m = t.children;
+      delete t.children, m.length && this.load(m);
     }
     this.setAnimation(), t.subGridDynamic && !w.pauseDrag && (w.pauseDrag = !0), ((g = t.draggable) == null ? void 0 : g.pause) !== void 0 && (w.pauseDrag = t.draggable.pause), this._setupRemoveDrop(), this._setupAcceptWidget(), this._updateResizeEvent();
   }
@@ -3122,13 +3126,13 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @returns newly created grid
    */
   makeSubGrid(e, t, i, s = !0) {
-    var g, p, y;
+    var g, m, y;
     let r = e.gridstackNode;
     if (r || (r = this.makeWidget(e).gridstackNode), (g = r.subGrid) != null && g.el)
       return r.subGrid;
     let o, n = this;
     for (; n && !o; )
-      o = (p = n.opts) == null ? void 0 : p.subGridOpts, n = (y = n.parentGridNode) == null ? void 0 : y.grid;
+      o = (m = n.opts) == null ? void 0 : m.subGridOpts, n = (y = n.parentGridNode) == null ? void 0 : y.grid;
     t = c.cloneDeep({
       // by default sub-grid inherit from us | parent, other than id, children, etc...
       ...this.opts,
@@ -3145,8 +3149,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     t.column === "auto" && (d = !0, t.column = Math.max(r.w || 1, (i == null ? void 0 : i.w) || 1), delete t.columnOpts);
     let u = r.el.querySelector(".grid-stack-item-content"), h, l;
     if (s && (this._removeDD(r.el), l = { ...r, x: 0, y: 0 }, c.removeInternalForSave(l), delete l.subGridOpts, r.content && (l.content = r.content, delete r.content), _.addRemoveCB ? h = _.addRemoveCB(this.el, l, !0, !1) : (h = c.createDiv(["grid-stack-item"]), h.appendChild(u), u = c.createDiv(["grid-stack-item-content"], r.el)), this.prepareDragDrop(r.el)), i) {
-      const m = d ? t.column : r.w, C = r.h + i.h, A = r.el.style;
-      A.transition = "none", this.update(r.el, { w: m, h: C }), setTimeout(() => A.transition = null);
+      const p = d ? t.column : r.w, C = r.h + i.h, S = r.el.style;
+      S.transition = "none", this.update(r.el, { w: p, h: C }), setTimeout(() => S.transition = null);
     }
     const f = r.subGrid = _.addGrid(u, t);
     return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(h, l), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
@@ -3187,7 +3191,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const r = c.cloneDeep(this.opts);
       r.marginBottom === r.marginTop && r.marginRight === r.marginLeft && r.marginTop === r.marginRight && (r.margin = r.marginTop, delete r.marginTop, delete r.marginRight, delete r.marginBottom, delete r.marginLeft), r.rtl === (this.el.style.direction === "rtl") && (r.rtl = "auto"), this._isAutoCellHeight && (r.cellHeight = "auto"), this._autoColumn && (r.column = "auto");
       const o = r._alwaysShowResizeHandle;
-      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, Z), r.children = s, r;
+      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, ee), r.children = s, r;
     }
     return s;
   }
@@ -3567,18 +3571,18 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     let u;
     if (t.subGrid) {
       u = t.subGrid.getRow() * t.subGrid.getCellHeight(!0);
-      const p = t.subGrid.el.getBoundingClientRect(), y = t.subGrid.el.parentElement.getBoundingClientRect();
-      u += p.top - y.top;
+      const m = t.subGrid.el.getBoundingClientRect(), y = t.subGrid.el.parentElement.getBoundingClientRect();
+      u += m.top - y.top;
     } else {
       if ((g = (f = t.subGridOpts) == null ? void 0 : f.children) != null && g.length)
         return;
       {
-        const p = o.firstElementChild;
-        if (!p) {
+        const m = o.firstElementChild;
+        if (!m) {
           console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${_.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
           return;
         }
-        u = p.getBoundingClientRect().height || d;
+        u = m.getBoundingClientRect().height || d;
       }
     }
     if (d === u)
@@ -3738,7 +3742,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   _prepareElement(e, t = !1, i) {
-    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(Z.itemClass, this.opts.itemClass);
+    i = i || this._readAttr(e), e.gridstackNode = i, i.el = e, i.grid = this, i = this.engine.addNode(i, t), this._writeAttr(e, i), e.classList.add(ee.itemClass, this.opts.itemClass);
     const s = c.shouldSizeToContent(i);
     return s ? e.classList.add("size-to-content") : e.classList.remove("size-to-content"), s && this.resizeToContentCheck(!1, i), c.lazyLoad(i) || this.prepareDragDrop(i.el), this;
   }
@@ -3844,7 +3848,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   /** get the global (but static to this code) DD implementation */
   static getDD() {
-    return W;
+    return K;
   }
   /**
    * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
@@ -3857,7 +3861,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   static setupDragIn(e, t, i, s = document) {
     (t == null ? void 0 : t.pause) !== void 0 && (w.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((o, n) => {
-      W.isDraggable(o) || W.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
+      K.isDraggable(o) || K.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
     });
   }
   /**
@@ -3936,12 +3940,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal removes any drag&drop present (called during destroy) */
   _removeDD(e) {
-    return W.draggable(e, "destroy").resizable(e, "destroy"), e.gridstackNode && delete e.gridstackNode._initDD, delete e.ddElement, this;
+    return K.draggable(e, "destroy").resizable(e, "destroy"), e.gridstackNode && delete e.gridstackNode._initDD, delete e.ddElement, this;
   }
   /** @internal called to add drag over to support widgets being added externally */
   _setupAcceptWidget() {
     if (this.opts.staticGrid || !this.opts.acceptWidgets && !this.opts.removable)
-      return W.droppable(this.el, "destroy"), this;
+      return K.droppable(this.el, "destroy"), this;
     let e, t;
     const i = (s, r, o) => {
       var f;
@@ -3966,7 +3970,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       if (n._temporaryRemoved) {
         if (n.x = Math.max(0, Math.round(u / t)), n.y = Math.max(0, Math.round(d / e)), delete n.autoPosition, this.engine.nodeBoundFix(n), !this.engine.willItFit(n)) {
           if (n.autoPosition = !0, !this.engine.willItFit(n)) {
-            W.off(r, "drag");
+            K.off(r, "drag");
             return;
           }
           n._willFitPos && (c.copyPos(n, n._willFitPos), delete n._willFitPos);
@@ -3975,7 +3979,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       } else
         this._dragOrResize(o, s, l, n, t, e);
     };
-    return W.droppable(this.el, {
+    return K.droppable(this.el, {
       accept: (s) => {
         const r = s.gridstackNode || this._readAttr(s, !1);
         if ((r == null ? void 0 : r.grid) === this)
@@ -4014,12 +4018,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       n.grid || (n.el || (n = { ...n }), n._isExternal = !0, o.gridstackNode = n);
       const d = n.w || Math.round(o.offsetWidth / t) || 1, u = n.h || Math.round(o.offsetHeight / e) || 1;
       return n.grid && n.grid !== this ? (r._gridstackNodeOrig || (r._gridstackNodeOrig = n), r.gridstackNode = n = { ...n, w: d, h: u, grid: this }, delete n.x, delete n.y, this.engine.cleanupNode(n).nodeBoundFix(n), n._initDD = n._isExternal = // DOM needs to be re-parented on a drop
-      n._temporaryRemoved = !0) : (n.w = d, n.h = u, n._temporaryRemoved = !0), _._itemRemoving(n.el, !1), W.on(r, "drag", i), i(s, r, o), !1;
+      n._temporaryRemoved = !0) : (n.w = d, n.h = u, n._temporaryRemoved = !0), _._itemRemoving(n.el, !1), K.on(r, "drag", i), i(s, r, o), !1;
     }).on(this.el, "dropout", (s, r, o) => {
       const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
       return n && (!n.grid || n.grid === this) && (this._leave(r, o), this._isTemp && this.removeAsSubGrid(n)), !1;
     }).on(this.el, "drop", (s, r, o) => {
-      var g, p, y;
+      var g, m, y;
       const n = (o == null ? void 0 : o.gridstackNode) || r.gridstackNode;
       if ((n == null ? void 0 : n.grid) === this && !n._isExternal)
         return !1;
@@ -4029,12 +4033,12 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       h && this.setAnimation(!1);
       const l = r._gridstackNodeOrig;
       if (delete r._gridstackNodeOrig, d && (l != null && l.grid) && l.grid !== this) {
-        const m = l.grid;
-        m.engine.removeNodeFromLayoutCache(l), m.engine.removedNodes.push(l), m._triggerRemoveEvent()._triggerChangeEvent(), m.parentGridNode && !m.engine.nodes.length && m.opts.subGridDynamic && m.removeAsSubGrid();
+        const p = l.grid;
+        p.engine.removeNodeFromLayoutCache(l), p.engine.removedNodes.push(l), p._triggerRemoveEvent()._triggerChangeEvent(), p.parentGridNode && !p.engine.nodes.length && p.opts.subGridDynamic && p.removeAsSubGrid();
       }
-      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (g = n.grid) == null || delete g._isTemp, W.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !d))
+      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (g = n.grid) == null || delete g._isTemp, K.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;
+      const f = (y = (m = n.subGrid) == null ? void 0 : m.el) == null ? void 0 : y.gridstack;
       return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), u && (n.content || n.subGridOpts || _.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, l && l.grid ? l : void 0, n), h && this.setAnimation(this.opts.animate, !0), !1;
     }), this;
   }
@@ -4050,7 +4054,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (typeof this.opts.removable != "string")
       return this;
     const e = document.querySelector(this.opts.removable);
-    return e ? (!this.opts.staticGrid && !W.isDroppable(e) && W.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => _._itemRemoving(i, !0)).on(e, "dropout", (t, i) => _._itemRemoving(i, !1)), this) : this;
+    return e ? (!this.opts.staticGrid && !K.isDroppable(e) && K.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => _._itemRemoving(i, !0)).on(e, "dropout", (t, i) => _._itemRemoving(i, !1)), this) : this;
   }
   /**
    * prepares the element for drag&drop - this is normally called by makeWidget() unless are are delay loading
@@ -4072,17 +4076,17 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         this._dragOrResize(e, f, g, i, n, d);
       }, l = (f) => {
         this.placeholder.remove(), delete this.placeholder.gridstackNode, delete i._moving, delete i._event, delete i._lastTried;
-        const g = i.w !== i._orig.w, p = f.target;
-        if (!(!p.gridstackNode || p.gridstackNode.grid !== this)) {
-          if (i.el = p, i._isAboutToRemove) {
+        const g = i.w !== i._orig.w, m = f.target;
+        if (!(!m.gridstackNode || m.gridstackNode.grid !== this)) {
+          if (i.el = m, i._isAboutToRemove) {
             const y = e.gridstackNode.grid;
-            y._gsEventHandler[f.type] && y._gsEventHandler[f.type](f, p), y.engine.nodes.push(i), y.removeWidget(e, !0, !0);
+            y._gsEventHandler[f.type] && y._gsEventHandler[f.type](f, m), y.engine.nodes.push(i), y.removeWidget(e, !0, !0);
           } else
-            c.removePositioningStyles(p), i._temporaryRemoved ? (c.copyPos(i, i._orig), this._writePosAttr(p, i), this.engine.addNode(i)) : this._writePosAttr(p, i), this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, p);
+            c.removePositioningStyles(m), i._temporaryRemoved ? (c.copyPos(i, i._orig), this._writePosAttr(m, i), this.engine.addNode(i)) : this._writePosAttr(m, i), this._gsEventHandler[f.type] && this._gsEventHandler[f.type](f, m);
           this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), f.type === "resizestop" && (Number.isInteger(i.sizeToContent) && (i.sizeToContent = i.h), this.resizeToContentCheck(g, i));
         }
       };
-      W.draggable(e, {
+      K.draggable(e, {
         start: u,
         stop: l,
         drag: h
@@ -4092,7 +4096,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         resize: h
       }), i._initDD = !0;
     }
-    return W.draggable(e, s ? "disable" : "enable").resizable(e, r ? "disable" : "enable"), this;
+    return K.draggable(e, s ? "disable" : "enable").resizable(e, r ? "disable" : "enable"), this;
   }
   /** @internal handles actual drag/resize start */
   _onStartMoving(e, t, i, s, r, o) {
@@ -4111,35 +4115,35 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       };
     if (s.el = this.placeholder, s._lastUiPosition = i.position, s._prevYPix = i.position.top, s._moving = t.type === "dragstart", delete s._lastTried, t.type === "dropover" && s._temporaryRemoved && (this.engine.addNode(s), s._moving = !0), this.engine.cacheRects(r, o, this.opts.marginTop, this.opts.marginRight, this.opts.marginBottom, this.opts.marginLeft), t.type === "resizestart") {
       const d = this.getColumn() - s.x, u = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
-      W.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, u)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, d)).resizable(e, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(e, "option", "maxHeight", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, u)).resizable(e, "option", "maxHeightMoveUp", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
+      K.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, u)).resizable(e, "option", "maxWidth", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, d)).resizable(e, "option", "maxWidthMoveLeft", r * Math.min(s.maxW || Number.MAX_SAFE_INTEGER, s.x + s.w)).resizable(e, "option", "maxHeight", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, u)).resizable(e, "option", "maxHeightMoveUp", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
     }
   }
   /** @internal handles actual drag/resize */
   _dragOrResize(e, t, i, s, r, o) {
     const n = { ...s._orig };
     let d, u = this.opts.marginLeft, h = this.opts.marginRight, l = this.opts.marginTop, f = this.opts.marginBottom;
-    const g = Math.round(o * 0.1), p = Math.round(r * 0.1);
-    if (u = Math.min(u, p), h = Math.min(h, p), l = Math.min(l, g), f = Math.min(f, g), t.type === "drag") {
+    const g = Math.round(o * 0.1), m = Math.round(r * 0.1);
+    if (u = Math.min(u, m), h = Math.min(h, m), l = Math.min(l, g), f = Math.min(f, g), t.type === "drag") {
       if (s._temporaryRemoved)
         return;
-      const m = i.position.top - s._prevYPix;
-      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, m);
-      const C = i.position.left + (i.position.left > s._lastUiPosition.left ? -h : u), A = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
-      n.x = Math.round(C / r), n.y = Math.round(A / o);
-      const D = this._extraDragRow;
+      const p = i.position.top - s._prevYPix;
+      s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, p);
+      const C = i.position.left + (i.position.left > s._lastUiPosition.left ? -h : u), S = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
+      n.x = Math.round(C / r), n.y = Math.round(S / o);
+      const z = this._extraDragRow;
       if (this.engine.collide(s, n)) {
-        const J = this.getRow();
-        let F = Math.max(0, n.y + s.h - J);
-        this.opts.maxRow && J + F > this.opts.maxRow && (F = Math.max(0, this.opts.maxRow - J)), this._extraDragRow = F;
+        const W = this.getRow();
+        let F = Math.max(0, n.y + s.h - W);
+        this.opts.maxRow && W + F > this.opts.maxRow && (F = Math.max(0, this.opts.maxRow - W)), this._extraDragRow = F;
       } else
         this._extraDragRow = 0;
-      if (this._extraDragRow !== D && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+      if (this._extraDragRow !== z && 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 - u) / 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)
         return;
-      const m = i.position.left + u, C = i.position.top + l;
-      n.x = Math.round(m / r), n.y = Math.round(C / o), d = !0;
+      const p = i.position.left + u, C = i.position.top + l;
+      n.x = Math.round(p / r), n.y = Math.round(C / o), d = !0;
     }
     s._event = t, s._lastTried = n;
     const y = {
@@ -4150,8 +4154,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     };
     if (this.engine.moveNodeCheck(s, { ...n, cellWidth: r, cellHeight: o, rect: y, resizing: d })) {
       s._lastUiPosition = i.position, this.engine.cacheRects(r, o, l, h, f, u), delete s._skipDown, d && s.subGrid && s.subGrid.onResize(), this._extraDragRow = 0, this._updateContainerHeight();
-      const m = t.target;
-      s._sidebarOrig || this._writePosAttr(m, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, m);
+      const p = t.target;
+      s._sidebarOrig || this._writePosAttr(p, s), this._gsEventHandler[t.type] && this._gsEventHandler[t.type](t, p);
     }
   }
   /** @internal called when item leaving our area by either cursor dropout event
@@ -4161,7 +4165,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   _leave(e, t) {
     t = t || e;
     const i = t.gridstackNode;
-    if (!i || (t.style.transform = t.style.transformOrigin = null, W.off(e, "drag"), i._temporaryRemoved))
+    if (!i || (t.style.transform = t.style.transformOrigin = null, K.off(e, "drag"), i._temporaryRemoved))
       return;
     i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e;
     const s = i._sidebarOrig;
@@ -4177,9 +4181,9 @@ _.renderCB = (a, e) => {
 };
 _.resizeToContentParent = ".grid-stack-item-content";
 _.Utils = c;
-_.Engine = he;
+_.Engine = ue;
 _.GDRev = "11.5.1";
-const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { class: "grid-stack-item-content" }, Ws = /* @__PURE__ */ V({
+const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { class: "grid-stack-item-content" }, Ws = /* @__PURE__ */ j({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -4187,27 +4191,27 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
   },
   emits: ["update-tiles"],
   setup(a, { expose: e, emit: t }) {
-    const i = a, s = t, r = L(null), o = L(new Map(i.tiles.map((g) => [`${g.id}`, g])));
+    const i = a, s = t, r = O(null), o = O(new Map(i.tiles.map((g) => [`${g.id}`, g])));
     let n = null;
-    const d = (g) => `[data-id="${g}"]`, u = (g) => g.map((p) => {
-      var m;
-      const y = o.value.get(`${(m = p.el) == null ? void 0 : m.getAttribute("data-id")}`);
+    const d = (g) => `[data-id="${g}"]`, u = (g) => g.map((m) => {
+      var p;
+      const y = o.value.get(`${(p = m.el) == null ? void 0 : p.getAttribute("data-id")}`);
       if (y)
         return {
           ...y,
           layout: {
-            position: { col: Number(p.x), row: Number(p.y) },
-            size: { cols: Number(p.w), rows: Number(p.h) }
+            position: { col: Number(m.x), row: Number(m.y) },
+            size: { cols: Number(m.w), rows: Number(m.h) }
           }
         };
-    }).filter((p) => p !== void 0), h = (g, p) => {
-      n && (u(p).forEach((m) => {
-        o.value.set(`${m.id}`, m);
+    }).filter((m) => m !== void 0), h = (g, m) => {
+      n && (u(m).forEach((p) => {
+        o.value.set(`${p.id}`, p);
       }), s("update-tiles", Array.from(o.value.values())));
-    }, l = (g, p) => {
-      p.forEach((y) => {
-        var m;
-        o.value.delete(`${(m = y.el) == null ? void 0 : m.getAttribute("data-id")}`);
+    }, l = (g, m) => {
+      m.forEach((y) => {
+        var p;
+        o.value.delete(`${(p = y.el) == null ? void 0 : p.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(o.value.values()));
     };
     Xe(() => {
@@ -4223,25 +4227,25 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
     });
     const f = (g) => {
       if (n && r.value) {
-        const p = r.value.querySelector(d(g));
-        p && n.removeWidget(p);
+        const m = r.value.querySelector(d(g));
+        m && n.removeWidget(m);
       }
     };
-    return ze(() => i.tiles.length, async (g, p) => {
-      if (g > p && n) {
-        const y = i.tiles.slice(p);
-        for (const m of y)
-          o.value.set(`${m.id}`, m), await dt(), n.makeWidget(d(m.id), {
+    return ze(() => i.tiles.length, async (g, m) => {
+      if (g > m && n) {
+        const y = i.tiles.slice(m);
+        for (const p of y)
+          o.value.set(`${p.id}`, p), await dt(), n.makeWidget(d(p.id), {
             autoPosition: !0,
-            w: m.layout.size.cols,
-            h: m.layout.size.rows
+            w: p.layout.size.cols,
+            h: p.layout.size.rows
           });
       }
     }), Ot(() => {
       i.tiles.forEach((g) => {
         o.value.set(`${g.id}`, g);
       });
-    }), e({ removeWidget: f }), (g, p) => (x(), G("div", {
+    }), e({ removeWidget: f }), (g, m) => (x(), G("div", {
       ref_key: "gridContainer",
       ref: r,
       class: "grid-stack"
@@ -4257,7 +4261,7 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
         "gs-x": y.layout.position.col,
         "gs-y": y.layout.position.row
       }, [
-        se("div", Gs, [
+        Y("div", Gs, [
           De(g.$slots, "tile", { tile: y }, void 0, !0)
         ])
       ], 8, Us))), 128))
@@ -4269,7 +4273,7 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
 }, Vs = {
   key: 0,
   class: "tile-container slottable-tile"
-}, Ys = /* @__PURE__ */ V({
+}, Ys = /* @__PURE__ */ j({
   __name: "DashboardRenderer",
   props: /* @__PURE__ */ Ge({
     context: {}
@@ -4279,146 +4283,146 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
   }),
   emits: /* @__PURE__ */ Ge(["edit-tile", "tile-time-range-zoom"], ["update:modelValue"]),
   setup(a, { expose: e, emit: t }) {
-    ut((R) => ({
+    ut((k) => ({
       v019a5586: l.value
     }));
-    const i = a, s = t, r = Mt(a, "modelValue"), { i18n: o } = me.useI18n(), n = L(0), d = L(null), u = L(), h = L(), l = L("scale(1)"), f = ve(ye);
-    f || (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 g = qe(), p = k(() => i.context.timeSpec ? i.context.timeSpec : {
+    const i = a, s = t, r = Mt(a, "modelValue"), { i18n: o } = ce.useI18n(), n = O(0), d = O(null), u = O(), h = O(), l = O("scale(1)"), f = ve(ye);
+    f || (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")), ce.useRequestQueue();
+    const g = qe(), m = R(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
       time_range: g.defaultQueryTimeForOrg
-    }), y = k(() => !!i.context.timeSpec || !g.loading), m = (R, I) => {
-      const $ = R.layout.position.row - I.layout.position.row;
-      return $ !== 0 ? $ : R.layout.position.col - I.layout.position.col;
-    }, C = k(() => r.value.tiles.map((R) => {
+    }), y = R(() => !!i.context.timeSpec || !g.loading), p = (k, M) => {
+      const $ = k.layout.position.row - M.layout.position.row;
+      return $ !== 0 ? $ : k.layout.position.col - M.layout.position.col;
+    }, C = R(() => r.value.tiles.map((k) => {
       var $;
-      let I = R.definition;
-      if ("description" in I.chart) {
-        const q = ($ = I.chart.description) == null ? void 0 : $.replace(Zi, () => {
-          const Te = `renderer.trendRange.${p.value.type === "absolute" ? "custom" : p.value.time_range}`;
+      let M = k.definition;
+      if ("description" in M.chart) {
+        const P = ($ = M.chart.description) == null ? void 0 : $.replace(Zi, () => {
+          const Te = `renderer.trendRange.${m.value.type === "absolute" ? "custom" : m.value.time_range}`;
           return o.te(Te) ? o.t(Te) : "";
         });
-        I = {
-          ...I,
+        M = {
+          ...M,
           chart: {
-            ...I.chart,
-            description: q
+            ...M.chart,
+            description: P
           }
         };
       }
-      return i.context.editable && !R.id && console.warn(
+      return i.context.editable && !k.id && console.warn(
         "No id provided for tile. One will be generated automatically,",
         "however tracking changes to this tile may not work as expected.",
-        R
+        k
       ), {
-        layout: R.layout,
-        meta: I,
-        type: R.type,
+        layout: k.layout,
+        meta: M,
+        type: k.type,
         // Add a unique key to each tile internally.
-        id: R.id ?? crypto.randomUUID()
+        id: k.id ?? crypto.randomUUID()
       };
-    })), A = (R) => {
-      s("edit-tile", R);
-    }, D = (R) => R.type === "slottable", J = (R) => {
-      const I = D(R.meta.chart) ? { ...R.meta.chart } : {
-        ...R.meta.chart,
-        chart_title: R.meta.chart.chart_title ? `Copy of ${R.meta.chart.chart_title}` : ""
+    })), S = (k) => {
+      s("edit-tile", k);
+    }, z = (k) => k.type === "slottable", W = (k) => {
+      const M = z(k.meta.chart) ? { ...k.meta.chart } : {
+        ...k.meta.chart,
+        chart_title: k.meta.chart.chart_title ? `Copy of ${k.meta.chart.chart_title}` : ""
       }, $ = {
         id: crypto.randomUUID(),
         type: "chart",
         definition: {
-          ...R.meta,
-          chart: I
+          ...k.meta,
+          chart: M
         },
         layout: {
           position: {
             col: 0,
             row: 0
           },
-          size: R.layout.size
+          size: k.layout.size
         }
       };
       r.value.tiles.push($);
-    }, F = (R) => {
-      d.value && d.value.removeWidget(R.id);
-    }, S = () => {
+    }, F = (k) => {
+      d.value && d.value.removeWidget(k.id);
+    }, D = () => {
       n.value++;
-    }, H = (R) => {
-      const I = R.map(($) => ({
+    }, I = (k) => {
+      const M = k.map(($) => ({
         id: $.id,
         type: $.type,
         layout: $.layout,
         definition: $.meta
       }));
-      r.value.tiles = I.sort(m);
-    }, Y = async () => {
+      r.value.tiles = M.sort(p);
+    }, X = async () => {
       if (l.value = "scale(1)", await dt(), h.value) {
-        const { availWidth: R, availHeight: I } = window.screen, { width: $, height: q } = h.value.getBoundingClientRect(), j = Math.min(I / q, R / $);
-        l.value = `scale(${j})`;
+        const { availWidth: k, availHeight: M } = window.screen, { width: $, height: P } = h.value.getBoundingClientRect(), Z = Math.min(M / P, k / $);
+        l.value = `scale(${Z})`;
       }
-    }, de = () => {
+    }, fe = () => {
       u.value && (document.fullscreenElement ? document.exitFullscreen() : u.value.requestFullscreen());
-    }, ne = L(!1), ke = () => {
-      ne.value = document.fullscreenElement !== null, ne.value && Y();
-    }, tt = k(() => r.value.preset_filters ?? []), { internalContext: $e } = me.useDashboardInternalContext({
+    }, ne = O(!1), ke = () => {
+      ne.value = document.fullscreenElement !== null, ne.value && X();
+    }, tt = R(() => r.value.preset_filters ?? []), { internalContext: $e } = ce.useDashboardInternalContext({
       globalFilters: tt,
       context: Ne(i, "context"),
       isFullscreen: ne
     });
     return e({
-      refresh: S,
-      toggleFullscreen: de
-    }), (R, I) => {
-      const $ = ge("KAlert");
+      refresh: D,
+      toggleFullscreen: fe
+    }), (k, M) => {
+      const $ = he("KAlert");
       return x(), G("div", {
         ref_key: "dashboardContainer",
         ref: u,
         class: Re(["kong-ui-public-dashboard-renderer", { "is-fullscreen": ne.value }]),
         onFullscreenchange: ke
       }, [
-        se("div", {
+        Y("div", {
           ref_key: "layoutContainer",
           ref: h,
           class: "layout"
         }, [
           E(f) && ne.value ? (x(), G("div", Qs, [
-            De(R.$slots, "fullscreenHeader", {}, void 0, !0)
-          ])) : K("", !0),
-          E(f) ? (x(), O(qt(a.context.editable && !ne.value ? Ks : qs), {
+            De(k.$slots, "fullscreenHeader", {}, void 0, !0)
+          ])) : Q("", !0),
+          E(f) ? (x(), A(qt(a.context.editable && !ne.value ? Ks : qs), {
             key: 2,
             ref_key: "gridLayoutRef",
             ref: d,
             "tile-height": r.value.tile_height,
             tiles: C.value,
-            onUpdateTiles: H
+            onUpdateTiles: I
           }, {
-            tile: P(({ tile: q }) => [
-              q.meta.chart.type === "slottable" ? (x(), G("div", Vs, [
-                De(R.$slots, q.meta.chart.id, {}, void 0, !0)
-              ])) : (x(), O(Zt, {
-                key: ne.value ? `${q.id}-tile` : `${q.id}-tile-fullscreen`,
+            tile: H(({ tile: P }) => [
+              P.meta.chart.type === "slottable" ? (x(), G("div", Vs, [
+                De(k.$slots, P.meta.chart.id, {}, void 0, !0)
+              ])) : (x(), A(Zt, {
+                key: ne.value ? `${P.id}-tile` : `${P.id}-tile-fullscreen`,
                 "refresh-counter": n.value,
-                "onUpdate:refreshCounter": I[0] || (I[0] = (j) => n.value = j),
+                "onUpdate:refreshCounter": M[0] || (M[0] = (Z) => n.value = Z),
                 class: "tile-container",
                 context: E($e),
-                definition: q.meta,
-                height: q.layout.size.rows * (r.value.tile_height || E(Pe)) + parseInt(E(Xt), 10),
+                definition: P.meta,
+                height: P.layout.size.rows * (r.value.tile_height || E(Pe)) + parseInt(E(Xt), 10),
                 "is-fullscreen": ne.value,
                 "query-ready": y.value,
-                "tile-id": q.id,
-                onDuplicateTile: (j) => J(q),
-                onEditTile: (j) => A(q),
-                onRemoveTile: (j) => F(q),
-                onTileTimeRangeZoom: I[1] || (I[1] = (j) => s("tile-time-range-zoom", j))
+                "tile-id": P.id,
+                onDuplicateTile: (Z) => W(P),
+                onEditTile: (Z) => S(P),
+                onRemoveTile: (Z) => F(P),
+                onTileTimeRangeZoom: M[1] || (M[1] = (Z) => s("tile-time-range-zoom", Z))
               }, null, 8, ["refresh-counter", "context", "definition", "height", "is-fullscreen", "query-ready", "tile-id", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
             ]),
             _: 3
-          }, 40, ["tile-height", "tiles"])) : (x(), O($, {
+          }, 40, ["tile-height", "tiles"])) : (x(), A($, {
             key: 1,
             appearance: "danger"
           }, {
-            default: P(() => [
-              ht(ae(E(o).t("renderer.noQueryBridge")), 1)
+            default: H(() => [
+              ht(te(E(o).t("renderer.noQueryBridge")), 1)
             ]),
             _: 1
           }))
@@ -4426,7 +4430,7 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
       ], 34);
     };
   }
-}), hr = /* @__PURE__ */ _e(Ys, [["__scopeId", "data-v-1fc40e84"]]), ur = /* @__PURE__ */ V({
+}), hr = /* @__PURE__ */ _e(Ys, [["__scopeId", "data-v-1fc40e84"]]), ur = /* @__PURE__ */ j({
   __name: "DashboardTilePreview",
   props: {
     context: {},
@@ -4435,50 +4439,69 @@ const Us = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Gs = { cl
   },
   emits: ["tile-time-range-zoom", "tile-bounds-change"],
   setup(a, { expose: e, emit: t }) {
-    const i = _i("root"), s = crypto.randomUUID(), r = t, o = (y) => {
-      r("tile-time-range-zoom", y);
-    }, n = (y) => {
-      r("tile-bounds-change", y);
-    }, { internalContext: d } = me.useDashboardInternalContext({
+    const i = _i("root"), s = crypto.randomUUID(), r = t, o = (C) => {
+      r("tile-time-range-zoom", C);
+    }, n = (C) => {
+      r("tile-bounds-change", C);
+    }, { i18n: d } = ce.useI18n(), { internalContext: u } = ce.useDashboardInternalContext({
       globalFilters: Ne(() => a.globalFilters),
       context: Ne(() => a.context)
-    }), u = qe(), h = k(() => !!a.context.timeSpec || !u.loading), l = L(Pe);
-    let f;
+    }), h = qe(), l = R(() => !!a.context.timeSpec || !h.loading), f = R(() => {
+      var C, S;
+      return !((S = (C = a.definition) == null ? void 0 : C.query) != null && S.metrics) || a.definition.query.metrics.length === 0;
+    }), g = O(Pe);
+    let m;
     Xe(() => {
-      var m;
-      const y = (m = i.value) == null ? void 0 : m.parentElement;
-      y && (l.value = y.getBoundingClientRect().height, f = new ResizeObserver(([C]) => {
-        const { height: A } = C.contentRect;
-        l.value = A;
-      }), f.observe(y));
-    }), Ze(() => f == null ? void 0 : f.disconnect());
-    const g = L(0);
+      var S;
+      const C = (S = i.value) == null ? void 0 : S.parentElement;
+      C && (g.value = C.getBoundingClientRect().height, m = new ResizeObserver(([z]) => {
+        const { height: W } = z.contentRect;
+        g.value = W;
+      }), m.observe(C));
+    }), Ze(() => m == null ? void 0 : m.disconnect());
+    const y = O(0);
     return e({
       refresh: () => {
-        g.value++;
+        y.value++;
       }
-    }), (y, m) => (x(), G("div", {
-      ref_key: "root",
-      ref: i,
-      "data-testid": "dashboard-tile-preview-root"
-    }, [
-      re(Zt, {
-        "refresh-counter": g.value,
-        "onUpdate:refreshCounter": m[0] || (m[0] = (C) => g.value = C),
-        context: {
-          ...E(d),
-          editable: !1
-        },
-        definition: a.definition,
-        height: l.value,
-        "hide-actions": "",
-        "query-ready": h.value,
-        "show-refresh": "",
-        "tile-id": E(s),
-        onTileBoundsChange: n,
-        onTileTimeRangeZoom: o
-      }, null, 8, ["refresh-counter", "context", "definition", "height", "query-ready", "tile-id"])
-    ], 512));
+    }), (C, S) => {
+      const z = he("KEmptyState");
+      return x(), G("div", {
+        ref_key: "root",
+        ref: i,
+        "data-testid": "dashboard-tile-preview-root"
+      }, [
+        f.value ? (x(), A(z, {
+          key: 0,
+          "action-button-visible": !1,
+          "data-testid": "chart-not-configured-empty-state"
+        }, {
+          title: H(() => [
+            Y("p", null, te(E(d).t("renderer.not_configured.title")), 1)
+          ]),
+          default: H(() => [
+            Y("p", null, te(E(d).t("renderer.not_configured.description")), 1)
+          ]),
+          _: 1
+        })) : (x(), A(Zt, {
+          key: 1,
+          "refresh-counter": y.value,
+          "onUpdate:refreshCounter": S[0] || (S[0] = (W) => y.value = W),
+          context: {
+            ...E(u),
+            editable: !1
+          },
+          definition: a.definition,
+          height: g.value,
+          "hide-actions": "",
+          "query-ready": l.value,
+          "show-refresh": "",
+          "tile-id": E(s),
+          onTileBoundsChange: n,
+          onTileTimeRangeZoom: o
+        }, null, 8, ["refresh-counter", "context", "definition", "height", "query-ready", "tile-id"]))
+      ], 512);
+    };
   }
 }), js = (a) => {
   var t;