@kong-ui-public/dashboard-renderer 7.0.13 → 7.0.14

package/dist/dashboard-renderer.es.js

@@ -4,31 +4,31 @@ var ot = (c) => {
 };
 var Qt = (c, e, t) => e in c ? Xt(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
 var at = (c, e, t) => Qt(c, typeof e != "symbol" ? e + "" : e, t), Ge = (c, e, t) => e.has(c) || ot("Cannot " + t);
-var _ = (c, e, t) => (Ge(c, e, "read from private field"), t ? t.call(c) : e.get(c)), P = (c, e, t) => e.has(c) ? ot("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(c) : e.set(c, t), M = (c, e, t, i) => (Ge(c, e, "write to private field"), i ? i.call(c, t) : e.set(c, t), t), B = (c, e, t) => (Ge(c, e, "access private method"), t);
+var _ = (c, e, t) => (Ge(c, e, "read from private field"), t ? t.call(c) : e.get(c)), $ = (c, e, t) => e.has(c) ? ot("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(c) : e.set(c, t), I = (c, e, t, i) => (Ge(c, e, "write to private field"), i ? i.call(c, t) : e.set(c, t), t), B = (c, e, t) => (Ge(c, e, "access private method"), t);
 var we = (c, e, t, i) => ({
   set _(s) {
-    M(c, e, s, t);
+    I(c, e, s, t);
   },
   get _() {
     return _(c, e, i);
   }
 });
-import { ref as G, watchEffect as Et, inject as _e, provide as Zt, defineComponent as j, onUnmounted as Ve, computed as N, watch as Ke, resolveComponent as he, createBlock as I, renderSlot as qe, createCommentVNode as Y, unref as k, openBlock as C, withCtx as $, createTextVNode as Pe, toDisplayString as ie, useCssVars as Ye, createElementVNode as ae, normalizeClass as je, createVNode as ne, mergeProps as xt, createSlots as Xe, createElementBlock as W, normalizeProps as Jt, guardReactiveProps as ei, defineAsyncComponent as ti, onMounted as Qe, nextTick as Ct, resolveDynamicComponent as Rt, toHandlers as ii, Fragment as zt, renderList as Tt, normalizeStyle as lt, mergeModels as ht, useModel as si, getCurrentInstance as ri } from "vue";
+import { ref as G, watchEffect as Et, inject as _e, provide as Zt, defineComponent as j, onUnmounted as Ve, computed as N, watch as Ke, resolveComponent as he, createBlock as M, renderSlot as Pe, createCommentVNode as Y, unref as k, openBlock as C, withCtx as q, createVNode as se, createTextVNode as Ee, toDisplayString as te, useCssVars as Ye, createElementVNode as ae, normalizeClass as je, mergeProps as xt, createSlots as Xe, createElementBlock as W, normalizeProps as Jt, guardReactiveProps as ei, defineAsyncComponent as ti, onMounted as Qe, nextTick as Ct, resolveDynamicComponent as Rt, toHandlers as ii, Fragment as Tt, renderList as zt, normalizeStyle as lt, mergeModels as ht, useModel as si, getCurrentInstance as ri } from "vue";
 import { stripUnknownFilters as ni, Timeframe as oi, TimePeriods as Dt, TIMEFRAME_LOOKUP as ai, formatTime as dt, msToGranularity as Ue, getFieldDataSources as li } from "@kong-ui-public/analytics-utilities";
 import { SimpleChart as hi, AnalyticsChart as di, TopNTable as ui, CsvExportModal as ci } from "@kong-ui-public/analytics-chart";
 import fi from "swrv";
 import "axios";
 import { createI18n as gi, i18nTComponent as mi } from "@kong-ui-public/i18n";
 import { useAnalyticsConfigStore as kt } from "@kong-ui-public/analytics-config-store";
-import { MetricsProvider as pi, MetricsConsumer as yi } from "@kong-ui-public/analytics-metric-provider";
-import { WarningIcon as vi, EditIcon as _i, MoreIcon as bi } from "@kong/icons";
+import { VisibilityOffIcon as pi, WarningIcon as yi, EditIcon as vi, MoreIcon as _i } from "@kong/icons";
+import { MetricsProvider as bi, MetricsConsumer as wi } from "@kong-ui-public/analytics-metric-provider";
 var St = /* @__PURE__ */ ((c) => (c.VALIDATING = "VALIDATING", c.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", c.PENDING = "PENDING", c.SUCCESS = "SUCCESS", c.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", c.ERROR = "ERROR", c.STALE_IF_ERROR = "STALE_IF_ERROR", c))(St || {});
-const wi = (c) => {
+const Ei = (c) => {
   var e, t, i, s, r;
   return c ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(c)) != null && e.length || (t = c.data) != null && t.length || (s = (i = c.data) == null ? void 0 : i.data) != null && s.length || !((r = c.data) != null && r.data) && typeof c.data == "object" && Object.keys(c == null ? void 0 : c.data).length) : !1;
 };
-function Ei(c = G({}), e, t, i = wi) {
+function xi(c = G({}), e, t, i = Ei) {
   const s = G(
     "PENDING"
     /* PENDING */
@@ -65,7 +65,7 @@ function Ei(c = G({}), e, t, i = wi) {
     swrvState: St
   };
 }
-const xi = {
+const Ci = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-hour summary",
@@ -76,14 +76,14 @@ const xi = {
   duplicateTile: "Duplicate",
   remove: "Remove",
   delete: "Delete"
-}, Ci = {
-  forbidden: "You do not have permission to query this data.",
+}, Ri = {
+  forbidden: "To access this data, either filter for an entity you have access to or request analytics viewer access from your administrator.",
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period",
   timeout: "Query timed out.  Consider querying a shorter time range."
-}, Ri = {
+}, Ti = {
   defaultFilename: "Chart export",
   exportAsCsv: "Export as CSV"
-}, zi = "Explore", Ti = "View requests", Di = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", ki = {
+}, zi = "Explore", Di = "View requests", ki = "This tile was configured with {savedGranularity} granularity, which is no longer available. It now shows {currentGranularity} data, the closest available granularity.", Si = {
   daily: "1 day",
   fiveMinutely: "5 minutes",
   hourly: "1 hour",
@@ -96,25 +96,25 @@ const xi = {
   twoHourly: "2 hours",
   weekly: "1 week",
   unknown: "Unknown"
-}, Si = {
-  renderer: xi,
-  queryDataProvider: Ci,
-  csvExport: Ri,
+}, Ni = {
+  renderer: Ci,
+  queryDataProvider: Ri,
+  csvExport: Ti,
   jumpToExplore: zi,
-  jumpToRequests: Ti,
-  query_aged_out_warning: Di,
-  granularities: ki
+  jumpToRequests: Di,
+  query_aged_out_warning: ki,
+  granularities: Si
 };
-function Ni() {
-  const c = gi("en-us", Si);
+function Oi() {
+  const c = gi("en-us", Ni);
   return {
     i18n: c,
     i18nT: mi(c)
     // Translation component <i18n-t>
   };
 }
-const $e = 170, Nt = 6, ue = "analytics-query-provider", ut = "{entity-id}", Oi = "{cp-id}", Ai = "{timeframe}", Hi = 30 * 1e3;
-function Li() {
+const $e = 170, Nt = 6, ue = "analytics-query-provider", ut = "{entity-id}", Ai = "{cp-id}", Hi = "{timeframe}", Li = 30 * 1e3;
+function Ii() {
   const c = _e(ue);
   return {
     evaluateFeatureFlag: (t, i) => c ? c.evaluateFeatureFlagFn(t, i) : i
@@ -163,7 +163,7 @@ var Ot = { exports: {} };
   }, n.prototype.emit = function(l, d, a, f, m, g) {
     var v = t ? t + l : l;
     if (!this._events[v]) return !1;
-    var p = this._events[v], R = arguments.length, A, z;
+    var p = this._events[v], R = arguments.length, A, T;
     if (p.fn) {
       switch (p.once && this.removeListener(l, p.fn, void 0, !0), R) {
         case 1:
@@ -179,29 +179,29 @@ var Ot = { exports: {} };
         case 6:
           return p.fn.call(p.context, d, a, f, m, g), !0;
       }
-      for (z = 1, A = new Array(R - 1); z < R; z++)
-        A[z - 1] = arguments[z];
+      for (T = 1, A = new Array(R - 1); T < R; T++)
+        A[T - 1] = arguments[T];
       p.fn.apply(p.context, A);
     } else {
       var H = p.length, E;
-      for (z = 0; z < H; z++)
-        switch (p[z].once && this.removeListener(l, p[z].fn, void 0, !0), R) {
+      for (T = 0; T < H; T++)
+        switch (p[T].once && this.removeListener(l, p[T].fn, void 0, !0), R) {
           case 1:
-            p[z].fn.call(p[z].context);
+            p[T].fn.call(p[T].context);
             break;
           case 2:
-            p[z].fn.call(p[z].context, d);
+            p[T].fn.call(p[T].context, d);
             break;
           case 3:
-            p[z].fn.call(p[z].context, d, a);
+            p[T].fn.call(p[T].context, d, a);
             break;
           case 4:
-            p[z].fn.call(p[z].context, d, a, f);
+            p[T].fn.call(p[T].context, d, a, f);
             break;
           default:
             if (!A) for (E = 1, A = new Array(R - 1); E < R; E++)
               A[E - 1] = arguments[E];
-            p[z].fn.apply(p[z].context, A);
+            p[T].fn.apply(p[T].context, A);
         }
     }
     return !0;
@@ -228,23 +228,23 @@ var Ot = { exports: {} };
     return l ? (d = t ? t + l : l, this._events[d] && o(this, d)) : (this._events = new i(), this._eventsCount = 0), this;
   }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = t, n.EventEmitter = n, c.exports = n;
 })(Ot);
-var Ii = Ot.exports;
-const qi = /* @__PURE__ */ Mi(Ii);
+var qi = Ot.exports;
+const Pi = /* @__PURE__ */ Mi(qi);
 class At extends Error {
   constructor(e) {
     super(e), this.name = "TimeoutError";
   }
 }
-class Pi extends Error {
+class $i extends Error {
   constructor(e) {
     super(), this.name = "AbortError", this.message = e;
   }
 }
-const ct = (c) => globalThis.DOMException === void 0 ? new Pi(c) : new DOMException(c), ft = (c) => {
+const ct = (c) => globalThis.DOMException === void 0 ? new $i(c) : new DOMException(c), ft = (c) => {
   const e = c.reason === void 0 ? ct("This operation was aborted.") : c.reason;
   return e instanceof Error ? e : ct(e);
 };
-function $i(c, e) {
+function Bi(c, e) {
   const {
     milliseconds: t,
     fallback: i,
@@ -290,7 +290,7 @@ function $i(c, e) {
     r.clearTimeout.call(void 0, o), o = void 0;
   }, l;
 }
-function Bi(c, e, t) {
+function Gi(c, e, t) {
   let i = 0, s = c.length;
   for (; s > 0; ) {
     const r = Math.trunc(s / 2);
@@ -300,9 +300,9 @@ function Bi(c, e, t) {
   return i;
 }
 var Q;
-class Gi {
+class Ui {
   constructor() {
-    P(this, Q, []);
+    $(this, Q, []);
   }
   enqueue(e, t) {
     t = {
@@ -318,7 +318,7 @@ class Gi {
       _(this, Q).push(i);
       return;
     }
-    const s = Bi(_(this, Q), i, (r, o) => o.priority - r.priority);
+    const s = Gi(_(this, Q), i, (r, o) => o.priority - r.priority);
     _(this, Q).splice(s, 0, i);
   }
   setPriority(e, t) {
@@ -340,30 +340,30 @@ class Gi {
   }
 }
 Q = new WeakMap();
-var fe, ge, le, Ce, me, Re, Z, pe, F, ze, J, ye, oe, Te, Ie, T, Ht, Lt, Mt, It, qt, ke, Fe, We, Se, Pt, Ne;
-class Ui extends qi {
+var fe, ge, le, Re, me, Te, Z, pe, F, ze, J, ye, oe, De, qe, z, Ht, Lt, It, Mt, qt, Se, Fe, We, Ne, Pt, Oe;
+class Fi extends Pi {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
     super();
-    P(this, T);
-    P(this, fe);
-    P(this, ge);
-    P(this, le, 0);
-    P(this, Ce);
-    P(this, me);
-    P(this, Re, 0);
-    P(this, Z);
-    P(this, pe);
-    P(this, F);
-    P(this, ze);
-    P(this, J, 0);
+    $(this, z);
+    $(this, fe);
+    $(this, ge);
+    $(this, le, 0);
+    $(this, Re);
+    $(this, me);
+    $(this, Te, 0);
+    $(this, Z);
+    $(this, pe);
+    $(this, F);
+    $(this, ze);
+    $(this, J, 0);
     // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
-    P(this, ye);
-    P(this, oe);
-    P(this, Te);
+    $(this, ye);
+    $(this, oe);
+    $(this, De);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
-    P(this, Ie, 1n);
+    $(this, qe, 1n);
     /**
         Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
     
@@ -376,13 +376,13 @@ class Ui extends qi {
       interval: 0,
       concurrency: Number.POSITIVE_INFINITY,
       autoStart: !0,
-      queueClass: Gi,
+      queueClass: Ui,
       ...t
     }, !(typeof t.intervalCap == "number" && t.intervalCap >= 1))
       throw new TypeError(`Expected \`intervalCap\` to be a number from 1 and up, got \`${((i = t.intervalCap) == null ? void 0 : i.toString()) ?? ""}\` (${typeof t.intervalCap})`);
     if (t.interval === void 0 || !(Number.isFinite(t.interval) && t.interval >= 0))
       throw new TypeError(`Expected \`interval\` to be a finite number >= 0, got \`${((s = t.interval) == null ? void 0 : s.toString()) ?? ""}\` (${typeof t.interval})`);
-    M(this, fe, t.carryoverConcurrencyCount), M(this, ge, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), M(this, Ce, t.intervalCap), M(this, me, t.interval), M(this, F, new t.queueClass()), M(this, ze, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, M(this, Te, t.throwOnTimeout === !0), M(this, oe, t.autoStart === !1);
+    I(this, fe, t.carryoverConcurrencyCount), I(this, ge, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), I(this, Re, t.intervalCap), I(this, me, t.interval), I(this, F, new t.queueClass()), I(this, ze, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, I(this, De, t.throwOnTimeout === !0), I(this, oe, t.autoStart === !1);
   }
   get concurrency() {
     return _(this, ye);
@@ -390,7 +390,7 @@ class Ui extends qi {
   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, ye, t), B(this, T, Se).call(this);
+    I(this, ye, t), B(this, z, Ne).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -432,9 +432,9 @@ class Ui extends qi {
     _(this, F).setPriority(t, i);
   }
   async add(t, i = {}) {
-    return i.id ?? (i.id = (we(this, Ie)._++).toString()), i = {
+    return i.id ?? (i.id = (we(this, qe)._++).toString()), i = {
       timeout: this.timeout,
-      throwOnTimeout: _(this, Te),
+      throwOnTimeout: _(this, De),
       ...i
     }, new Promise((s, r) => {
       _(this, F).enqueue(async () => {
@@ -443,7 +443,7 @@ class Ui extends qi {
         try {
           (o = i.signal) == null || o.throwIfAborted();
           let n = t({ signal: i.signal });
-          i.timeout && (n = $i(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, B(this, T, Pt).call(this, i.signal)]));
+          i.timeout && (n = Bi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, B(this, z, Pt).call(this, i.signal)]));
           const h = await n;
           s(h), this.emit("completed", h);
         } catch (n) {
@@ -453,9 +453,9 @@ class Ui extends qi {
           }
           r(n), this.emit("error", n);
         } finally {
-          B(this, T, Mt).call(this);
+          B(this, z, It).call(this);
         }
-      }, i), this.emit("add"), B(this, T, ke).call(this);
+      }, i), this.emit("add"), B(this, z, Se).call(this);
     });
   }
   async addAll(t, i) {
@@ -465,19 +465,19 @@ class Ui extends qi {
   Start (or resume) executing enqueued tasks within concurrency limit. No need to call this if queue is not paused (via `options.autoStart = false` or by `.pause()` method.)
   */
   start() {
-    return _(this, oe) ? (M(this, oe, !1), B(this, T, Se).call(this), this) : this;
+    return _(this, oe) ? (I(this, oe, !1), B(this, z, Ne).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    M(this, oe, !0);
+    I(this, oe, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    M(this, F, new (_(this, ze))());
+    I(this, F, new (_(this, ze))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -485,7 +485,7 @@ class Ui extends qi {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    _(this, F).size !== 0 && await B(this, T, Ne).call(this, "empty");
+    _(this, F).size !== 0 && await B(this, z, Oe).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -495,7 +495,7 @@ class Ui extends qi {
       Note that this only limits the number of items waiting to start. There could still be up to `concurrency` jobs already running that this call does not include in its calculation.
       */
   async onSizeLessThan(t) {
-    _(this, F).size < t || await B(this, T, Ne).call(this, "next", () => _(this, F).size < t);
+    _(this, F).size < t || await B(this, z, Oe).call(this, "next", () => _(this, F).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.
@@ -503,7 +503,7 @@ class Ui extends qi {
       @returns A promise that settles when the queue becomes empty, and all promises have completed; `queue.size === 0 && queue.pending === 0`.
       */
   async onIdle() {
-    _(this, J) === 0 && _(this, F).size === 0 || await B(this, T, Ne).call(this, "idle");
+    _(this, J) === 0 && _(this, F).size === 0 || await B(this, z, Oe).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
@@ -532,48 +532,48 @@ class Ui extends qi {
     return _(this, oe);
   }
 }
-fe = new WeakMap(), ge = new WeakMap(), le = new WeakMap(), Ce = new WeakMap(), me = new WeakMap(), Re = new WeakMap(), Z = new WeakMap(), pe = new WeakMap(), F = new WeakMap(), ze = new WeakMap(), J = new WeakMap(), ye = new WeakMap(), oe = new WeakMap(), Te = new WeakMap(), Ie = new WeakMap(), T = new WeakSet(), Ht = function() {
-  return _(this, ge) || _(this, le) < _(this, Ce);
+fe = new WeakMap(), ge = new WeakMap(), le = new WeakMap(), Re = new WeakMap(), me = new WeakMap(), Te = new WeakMap(), Z = new WeakMap(), pe = new WeakMap(), F = new WeakMap(), ze = new WeakMap(), J = new WeakMap(), ye = new WeakMap(), oe = new WeakMap(), De = new WeakMap(), qe = new WeakMap(), z = new WeakSet(), Ht = function() {
+  return _(this, ge) || _(this, le) < _(this, Re);
 }, Lt = function() {
   return _(this, J) < _(this, ye);
-}, Mt = function() {
-  we(this, J)._--, B(this, T, ke).call(this), this.emit("next");
 }, It = function() {
-  B(this, T, We).call(this), B(this, T, Fe).call(this), M(this, pe, void 0);
+  we(this, J)._--, B(this, z, Se).call(this), this.emit("next");
+}, Mt = function() {
+  B(this, z, We).call(this), B(this, z, Fe).call(this), I(this, pe, void 0);
 }, qt = function() {
   const t = Date.now();
   if (_(this, Z) === void 0) {
-    const i = _(this, Re) - t;
+    const i = _(this, Te) - t;
     if (i < 0)
-      M(this, le, _(this, fe) ? _(this, J) : 0);
+      I(this, le, _(this, fe) ? _(this, J) : 0);
     else
-      return _(this, pe) === void 0 && M(this, pe, setTimeout(() => {
-        B(this, T, It).call(this);
+      return _(this, pe) === void 0 && I(this, pe, setTimeout(() => {
+        B(this, z, Mt).call(this);
       }, i)), !0;
   }
   return !1;
-}, ke = function() {
+}, Se = function() {
   if (_(this, F).size === 0)
-    return _(this, Z) && clearInterval(_(this, Z)), M(this, Z, void 0), this.emit("empty"), _(this, J) === 0 && this.emit("idle"), !1;
+    return _(this, Z) && clearInterval(_(this, Z)), I(this, Z, void 0), this.emit("empty"), _(this, J) === 0 && this.emit("idle"), !1;
   if (!_(this, oe)) {
-    const t = !_(this, T, qt);
-    if (_(this, T, Ht) && _(this, T, Lt)) {
+    const t = !_(this, z, qt);
+    if (_(this, z, Ht) && _(this, z, Lt)) {
       const i = _(this, F).dequeue();
-      return i ? (this.emit("active"), i(), t && B(this, T, Fe).call(this), !0) : !1;
+      return i ? (this.emit("active"), i(), t && B(this, z, Fe).call(this), !0) : !1;
     }
   }
   return !1;
 }, Fe = function() {
-  _(this, ge) || _(this, Z) !== void 0 || (M(this, Z, setInterval(() => {
-    B(this, T, We).call(this);
-  }, _(this, me))), M(this, Re, Date.now() + _(this, me)));
+  _(this, ge) || _(this, Z) !== void 0 || (I(this, Z, setInterval(() => {
+    B(this, z, We).call(this);
+  }, _(this, me))), I(this, Te, Date.now() + _(this, me)));
 }, We = function() {
-  _(this, le) === 0 && _(this, J) === 0 && _(this, Z) && (clearInterval(_(this, Z)), M(this, Z, void 0)), M(this, le, _(this, fe) ? _(this, J) : 0), B(this, T, Se).call(this);
+  _(this, le) === 0 && _(this, J) === 0 && _(this, Z) && (clearInterval(_(this, Z)), I(this, Z, void 0)), I(this, le, _(this, fe) ? _(this, J) : 0), B(this, z, Ne).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
-Se = function() {
-  for (; B(this, T, ke).call(this); )
+Ne = function() {
+  for (; B(this, z, Se).call(this); )
     ;
 }, Pt = async function(t) {
   return new Promise((i, s) => {
@@ -581,7 +581,7 @@ Se = function() {
       s(t.reason);
     }, { once: !0 });
   });
-}, Ne = async function(t, i) {
+}, Oe = async function(t, i) {
   return new Promise((s) => {
     const r = () => {
       i && !i() || (this.off(t, r), s());
@@ -589,7 +589,7 @@ Se = function() {
     this.on(t, r);
   });
 };
-const Fi = () => {
+const Wi = () => {
   const c = kt(), e = _e(ue);
   if (!e)
     return;
@@ -597,7 +597,7 @@ const Fi = () => {
     console.warn("Detected incorrect use of useRequestQueue.  This composable should not be used in nested components.  Please discuss with team-data or report an issue if you feel you have a use case.");
     return;
   }
-  const t = new Ui({
+  const t = new Fi({
     carryoverConcurrencyCount: !0,
     concurrency: c.maxParallelRequests,
     interval: c.requestInterval,
@@ -609,9 +609,9 @@ const Fi = () => {
   };
   Zt(ue, i);
 }, ve = {
-  useI18n: Ni,
-  useEvaluateFeatureFlag: Li,
-  useRequestQueue: Fi
+  useI18n: Oi,
+  useEvaluateFeatureFlag: Ii,
+  useRequestQueue: Wi
 }, Ze = /* @__PURE__ */ j({
   __name: "QueryDataProvider",
   props: {
@@ -626,11 +626,11 @@ const Fi = () => {
     Ve(() => {
       n.abort();
     });
-    const h = (R, A, z) => {
+    const h = (R, A, T) => {
       const H = [];
-      return A && H.push(...A), H.push(...ni(R, z)), H;
+      return A && H.push(...A), H.push(...ni(R, T)), H;
     }, { data: l, error: d, isValidating: a } = fi(o, async () => {
-      var R, A, z, H;
+      var R, A, T, H;
       try {
         let {
           datasource: E,
@@ -646,17 +646,29 @@ const Fi = () => {
           ...t.context.timeSpec,
           tz: t.context.tz
         };
-        const q = {
+        const P = {
           datasource: E,
           query: {
             ...x,
             time_range: D,
             filters: O
           }
-        }, ee = await (r == null ? void 0 : r.queryFn(q, n));
+        }, ee = await (r == null ? void 0 : r.queryFn(P, n));
         return g.value = null, ee;
       } catch (E) {
-        throw (E == null ? void 0 : E.status) === 403 ? g.value = s.t("queryDataProvider.forbidden") : (E == null ? void 0 : E.status) === 408 ? g.value = s.t("queryDataProvider.timeout") : ((A = (R = E == null ? void 0 : E.response) == null ? void 0 : R.data) == null ? void 0 : A.message) === "Range not allowed for this tier" ? g.value = s.t("queryDataProvider.timeRangeExceeded") : g.value = ((H = (z = E == null ? void 0 : E.response) == null ? void 0 : z.data) == null ? void 0 : H.message) || (E == null ? void 0 : E.message), E;
+        throw (E == null ? void 0 : E.status) === 403 ? g.value = {
+          message: s.t("queryDataProvider.forbidden"),
+          type: "forbidden"
+        } : (E == null ? void 0 : E.status) === 408 ? g.value = {
+          message: s.t("queryDataProvider.timeout"),
+          type: "timeout"
+        } : ((A = (R = E == null ? void 0 : E.response) == null ? void 0 : R.data) == null ? void 0 : A.message) === "Range not allowed for this tier" ? g.value = {
+          message: s.t("queryDataProvider.timeRangeExceeded"),
+          type: "range_exceeded"
+        } : g.value = {
+          message: ((H = (T = E == null ? void 0 : E.response) == null ? void 0 : T.data) == null ? void 0 : H.message) || (E == null ? void 0 : E.message),
+          type: "other"
+        }, E;
       } finally {
         i("queryComplete");
       }
@@ -664,32 +676,48 @@ const Fi = () => {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1,
       shouldRetryOnError: !1
-    }), { state: f, swrvState: m } = Ei(l, d, a), g = G(null), v = N(() => f.value === m.ERROR || !!g.value), p = N(() => !t.queryReady || f.value === m.PENDING);
+    }), { state: f, swrvState: m } = xi(l, d, a), g = G(null), v = N(() => f.value === m.ERROR || !!g.value), p = N(() => !t.queryReady || f.value === m.PENDING);
     return Ke(l, (R) => {
       R && i("chart-data", R);
     }), (R, A) => {
-      const z = he("KSkeleton"), H = he("KEmptyState");
-      return p.value || !k(l) && !v.value ? (C(), I(z, {
+      var E;
+      const T = he("KSkeleton"), H = he("KEmptyState");
+      return p.value || !k(l) && !v.value ? (C(), M(T, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : v.value ? (C(), I(H, {
+      })) : v.value && ((E = g.value) == null ? void 0 : E.type) === "forbidden" ? (C(), M(H, {
         key: 1,
         "action-button-visible": !1,
-        "data-testid": "chart-empty-state",
-        "icon-variant": "error"
+        "data-testid": "chart-forbidden-state"
       }, {
-        default: $(() => [
-          Pe(ie(g.value), 1)
+        default: q(() => [
+          Ee(te(g.value.message), 1)
+        ]),
+        icon: q(() => [
+          se(k(pi))
         ]),
         _: 1
-      })) : k(l) ? qe(R.$slots, "default", {
+      })) : v.value ? (C(), M(H, {
         key: 2,
+        "action-button-visible": !1,
+        "data-testid": "chart-empty-state",
+        "icon-variant": "error"
+      }, {
+        default: q(() => {
+          var x;
+          return [
+            Ee(te((x = g.value) == null ? void 0 : x.message), 1)
+          ];
+        }),
+        _: 1
+      })) : k(l) ? Pe(R.$slots, "default", {
+        key: 3,
         data: k(l)
       }) : Y("", !0);
     };
   }
-}), Wi = /* @__PURE__ */ j({
+}), Vi = /* @__PURE__ */ j({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -705,17 +733,17 @@ const Fi = () => {
       "088169ae": `${i.height}px`
     }));
     const e = c, t = N(() => e.chartOptions.type === "single_value");
-    return (i, s) => (C(), I(Ze, {
+    return (i, s) => (C(), M(Ze, {
       context: i.context,
       query: i.query,
       "query-ready": i.queryReady,
       "refresh-counter": i.refreshCounter
     }, {
-      default: $(({ data: r }) => [
+      default: q(({ data: r }) => [
         ae("div", {
           class: je(["analytics-chart", { "single-value": t.value }])
         }, [
-          ne(k(hi), {
+          se(k(hi), {
             "chart-data": r,
             "chart-options": i.chartOptions,
             "synthetics-data-key": t.value ? void 0 : i.chartOptions.synthetics_data_key
@@ -730,7 +758,7 @@ const Fi = () => {
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, gt = /* @__PURE__ */ ce(Wi, [["__scopeId", "data-v-1e9ff912"]]), Vi = { class: "analytics-chart" }, Ki = /* @__PURE__ */ j({
+}, gt = /* @__PURE__ */ ce(Vi, [["__scopeId", "data-v-1e9ff912"]]), Ki = { class: "analytics-chart" }, Yi = /* @__PURE__ */ j({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -756,16 +784,16 @@ const Fi = () => {
     };
     return (a, f) => {
       const m = he("KDropdownItem");
-      return C(), I(Ze, {
+      return C(), M(Ze, {
         context: a.context,
         query: a.query,
         "query-ready": a.queryReady,
         "refresh-counter": a.refreshCounter,
         onChartData: d
       }, {
-        default: $(({ data: g }) => [
-          ae("div", Vi, [
-            ne(k(di), xt({
+        default: q(({ data: g }) => [
+          ae("div", Ki, [
+            se(k(di), xt({
               "allow-csv-export": a.chartOptions.allow_csv_export,
               "chart-data": g,
               "chart-options": n.value,
@@ -781,10 +809,10 @@ const Fi = () => {
             }), Xe({ _: 2 }, [
               a.context.editable ? {
                 name: "menu-items",
-                fn: $(() => [
-                  ne(m, { onClick: l }, {
-                    default: $(() => [
-                      Pe(ie(k(s).t("renderer.edit")), 1)
+                fn: q(() => [
+                  se(m, { onClick: l }, {
+                    default: q(() => [
+                      Ee(te(k(s).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -798,7 +826,7 @@ const Fi = () => {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Je = /* @__PURE__ */ ce(Ki, [["__scopeId", "data-v-9d4f6602"]]), mt = /* @__PURE__ */ j({
+}), Je = /* @__PURE__ */ ce(Yi, [["__scopeId", "data-v-9d4f6602"]]), mt = /* @__PURE__ */ j({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -810,7 +838,7 @@ const Fi = () => {
     requestsLink: {}
   },
   setup(c) {
-    return (e, t) => (C(), I(Je, {
+    return (e, t) => (C(), M(Je, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -834,7 +862,7 @@ const Fi = () => {
   emits: ["zoom-time-range", "select-chart-range"],
   setup(c, { emit: e }) {
     const t = e;
-    return (i, s) => (C(), I(Je, {
+    return (i, s) => (C(), M(Je, {
       "chart-options": i.chartOptions,
       context: i.context,
       height: i.height,
@@ -846,7 +874,7 @@ const Fi = () => {
       onZoomTimeRange: s[1] || (s[1] = (r) => t("zoom-time-range", r))
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter", "requests-link"]));
   }
-}), Yi = { class: "metric-card-tile-wrapper" }, ji = /* @__PURE__ */ j({
+}), ji = { class: "metric-card-tile-wrapper" }, Xi = /* @__PURE__ */ j({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -895,16 +923,16 @@ const Fi = () => {
         refreshCounter: e.refreshCounter
       };
     });
-    return (s, r) => (C(), W("div", Yi, [
-      ne(k(pi), Jt(ei(i.value)), {
-        default: $(() => [
-          ne(k(yi))
+    return (s, r) => (C(), W("div", ji, [
+      se(k(bi), Jt(ei(i.value)), {
+        default: q(() => [
+          se(k(wi))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), Xi = /* @__PURE__ */ ce(ji, [["__scopeId", "data-v-7e1b1cc1"]]), yt = "#6c7489", Qi = "12px", vt = "20px", $t = "20px", Zi = {
+}), Qi = /* @__PURE__ */ ce(Xi, [["__scopeId", "data-v-7e1b1cc1"]]), yt = "#6c7489", Zi = "12px", vt = "20px", $t = "20px", Ji = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
 }, _t = /* @__PURE__ */ j({
@@ -913,9 +941,9 @@ const Fi = () => {
     entityLinkData: {}
   },
   setup(c) {
-    return (e, t) => (C(), W("div", Zi, ie(e.entityLinkData.label), 1));
+    return (e, t) => (C(), W("div", Ji, te(e.entityLinkData.label), 1));
   }
-}), Ji = /* @__PURE__ */ j({
+}), es = /* @__PURE__ */ j({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -940,26 +968,26 @@ const Fi = () => {
       if ((o = e.chartOptions) != null && o.entity_link)
         if (r.id.includes(":")) {
           const [n, h] = r.id.split(":");
-          return e.chartOptions.entity_link.replace(Oi, n).replace(ut, h);
+          return e.chartOptions.entity_link.replace(Ai, n).replace(ut, h);
         } else
           return e.chartOptions.entity_link.replace(ut, r.id);
       return "";
     };
-    return (r, o) => (C(), I(Ze, {
+    return (r, o) => (C(), M(Ze, {
       context: r.context,
       query: r.query,
       "query-ready": r.queryReady,
       "refresh-counter": r.refreshCounter
     }, {
-      default: $(({ data: n }) => [
-        ne(k(ui), {
+      default: q(({ data: n }) => [
+        se(k(ui), {
           data: n,
           "synthetics-data-key": r.chartOptions.synthetics_data_key
         }, Xe({ _: 2 }, [
           e.chartOptions.entity_link ? {
             name: "name",
-            fn: $(({ record: h }) => [
-              ne(k(i), {
+            fn: q(({ record: h }) => [
+              se(k(i), {
                 "entity-link-data": {
                   id: h.id,
                   label: h.name,
@@ -975,7 +1003,7 @@ const Fi = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), es = /* @__PURE__ */ j({
+}), ts = /* @__PURE__ */ j({
   __name: "DonutChartRenderer",
   props: {
     query: {},
@@ -987,7 +1015,7 @@ const Fi = () => {
     requestsLink: {}
   },
   setup(c) {
-    return (e, t) => (C(), I(Je, {
+    return (e, t) => (C(), M(Je, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -996,10 +1024,10 @@ const Fi = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ts = ["data-testid"], is = {
+}), is = ["data-testid"], ss = {
   key: 0,
   class: "tile-header"
-}, ss = ["data-testid"], rs = { class: "badge-text" }, ns = ["data-testid"], os = { class: "delete-option" }, as = ["data-testid"], ls = ["data-testid"], hs = /* @__PURE__ */ j({
+}, rs = ["data-testid"], ns = { class: "badge-text" }, os = ["data-testid"], as = { class: "delete-option" }, ls = ["data-testid"], hs = ["data-testid"], ds = /* @__PURE__ */ j({
   __name: "DashboardTile",
   props: {
     definition: {},
@@ -1043,15 +1071,15 @@ const Fi = () => {
         y
       );
       return `${m.value}?q=${JSON.stringify(S)}`;
-    }), A = N(() => n.t("csvExport.defaultFilename")), z = N(() => H.value && (E.value || i.context.editable) || !!q.value), H = N(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), E = N(() => !!v.value || "allow_csv_export" in i.definition.chart && i.definition.chart.allow_csv_export || i.context.editable), x = {
+    }), A = N(() => n.t("csvExport.defaultFilename")), T = N(() => H.value && (E.value || i.context.editable) || !!P.value), H = N(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), E = N(() => !!v.value || "allow_csv_export" in i.definition.chart && i.definition.chart.allow_csv_export || i.context.editable), x = {
       timeseries_line: pt,
       timeseries_bar: pt,
       horizontal_bar: mt,
       vertical_bar: mt,
       gauge: gt,
-      donut: es,
-      golden_signals: Xi,
-      top_n: Ji,
+      donut: ts,
+      golden_signals: Qi,
+      top_n: es,
       slottable: void 0,
       single_value: gt
     }, O = N(() => {
@@ -1079,7 +1107,7 @@ const Fi = () => {
           supportsZoom: L
         }
       };
-    }), q = N(() => {
+    }), P = N(() => {
       var S;
       const y = (S = i.definition.query) == null ? void 0 : S.time_range;
       if ((y == null ? void 0 : y.type) === "relative") {
@@ -1094,7 +1122,7 @@ const Fi = () => {
       var L;
       const y = i.definition.query.granularity, S = Ue(((L = h.value) == null ? void 0 : L.meta.granularity_ms) || 0);
       return de.value && y !== S;
-    }), De = N(() => {
+    }), ke = N(() => {
       var L, X, V;
       const y = Ue(((L = h.value) == null ? void 0 : L.meta.granularity_ms) ?? 0) ?? "unknown", S = ((V = (X = i.definition) == null ? void 0 : X.query) == null ? void 0 : V.granularity) ?? "unknown";
       return n.t("query_aged_out_warning", {
@@ -1144,47 +1172,47 @@ const Fi = () => {
         class: je(["tile-boundary", { editable: y.context.editable }]),
         "data-testid": `tile-${y.tileId}`
       }, [
-        y.definition.chart.type !== "slottable" ? (C(), W("div", is, [
-          ne(L, {
+        y.definition.chart.type !== "slottable" ? (C(), W("div", ss, [
+          se(L, {
             class: "title-tooltip",
             disabled: !a.value,
             "max-width": "500",
             text: y.definition.chart.chart_title
           }, {
-            default: $(() => [
+            default: q(() => [
               ae("div", {
                 ref_key: "titleRef",
                 ref: d,
                 class: "title"
-              }, ie(y.definition.chart.chart_title), 513)
+              }, te(y.definition.chart.chart_title), 513)
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          z.value ? (C(), W("div", {
+          T.value ? (C(), W("div", {
             key: 0,
             class: "tile-actions",
             "data-testid": `tile-actions-${y.tileId}`
           }, [
-            q.value ? (C(), I(X, {
+            P.value ? (C(), M(X, {
               key: 0,
               "data-testid": "time-range-badge",
-              tooltip: be.value ? De.value : void 0,
+              tooltip: be.value ? ke.value : void 0,
               "tooltip-attributes": { maxWidth: "320px" }
             }, Xe({
-              default: $(() => [
-                ae("span", rs, ie(q.value), 1)
+              default: q(() => [
+                ae("span", ns, te(P.value), 1)
               ]),
               _: 2
             }, [
               be.value ? {
                 name: "icon",
-                fn: $(() => [
-                  ne(k(vi), { size: k(Qi) }, null, 8, ["size"])
+                fn: q(() => [
+                  se(k(yi), { size: k(Zi) }, null, 8, ["size"])
                 ]),
                 key: "0"
               } : void 0
             ]), 1032, ["tooltip"])) : Y("", !0),
-            H.value && y.context.editable ? (C(), I(k(_i), {
+            H.value && y.context.editable ? (C(), M(k(vi), {
               key: 1,
               class: "edit-icon",
               color: k(yt),
@@ -1192,60 +1220,60 @@ const Fi = () => {
               size: k(vt),
               onClick: Ut
             }, null, 8, ["color", "data-testid", "size"])) : Y("", !0),
-            H.value && E.value ? (C(), I(rt, {
+            H.value && E.value ? (C(), M(rt, {
               key: 2,
               class: "dropdown",
               "data-testid": `chart-action-menu-${y.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: $(() => [
-                v.value ? (C(), I(V, {
+              items: q(() => [
+                v.value ? (C(), M(V, {
                   key: 0,
                   "data-testid": `chart-jump-to-explore-${y.tileId}`,
                   item: { label: k(n).t("jumpToExplore"), to: v.value }
                 }, null, 8, ["data-testid", "item"])) : Y("", !0),
-                k(o) && R.value ? (C(), I(V, {
+                k(o) && R.value ? (C(), M(V, {
                   key: 1,
                   "data-testid": `chart-jump-to-requests-${y.tileId}`,
                   item: { label: k(n).t("jumpToRequests"), to: R.value }
                 }, null, 8, ["data-testid", "item"])) : Y("", !0),
-                !("allowCsvExport" in y.definition.chart) || y.definition.chart.allowCsvExport ? (C(), I(V, {
+                !("allowCsvExport" in y.definition.chart) || y.definition.chart.allowCsvExport ? (C(), M(V, {
                   key: 2,
                   class: "chart-export-button",
                   "data-testid": `chart-csv-export-${y.tileId}`,
                   onClick: S[0] || (S[0] = (nt) => Kt())
                 }, {
-                  default: $(() => [
+                  default: q(() => [
                     ae("span", {
                       class: "chart-export-trigger",
                       "data-testid": `csv-export-button-${y.tileId}`
-                    }, ie(k(n).t("csvExport.exportAsCsv")), 9, ns)
+                    }, te(k(n).t("csvExport.exportAsCsv")), 9, os)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0),
-                y.context.editable ? (C(), I(V, {
+                y.context.editable ? (C(), M(V, {
                   key: 3,
                   "data-testid": `duplicate-tile-${y.tileId}`,
                   onClick: Ft
                 }, {
-                  default: $(() => [
-                    Pe(ie(k(n).t("renderer.duplicateTile")), 1)
+                  default: q(() => [
+                    Ee(te(k(n).t("renderer.duplicateTile")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0),
-                y.context.editable ? (C(), I(V, {
+                y.context.editable ? (C(), M(V, {
                   key: 4,
                   "data-testid": `remove-tile-${y.tileId}`,
                   onClick: Wt
                 }, {
-                  default: $(() => [
-                    ae("span", os, ie(k(n).t("renderer.delete")), 1)
+                  default: q(() => [
+                    ae("span", as, te(k(n).t("renderer.delete")), 1)
                   ]),
                   _: 1
                 }, 8, ["data-testid"])) : Y("", !0)
               ]),
-              default: $(() => [
-                ne(k(bi), {
+              default: q(() => [
+                se(k(_i), {
                   class: "kebab-action-menu",
                   color: k(yt),
                   "data-testid": `kebab-action-menu-${y.tileId}`,
@@ -1254,12 +1282,12 @@ const Fi = () => {
               ]),
               _: 1
             }, 8, ["data-testid"])) : Y("", !0)
-          ], 8, ss)) : "description" in y.definition.chart ? (C(), W("div", {
+          ], 8, rs)) : "description" in y.definition.chart ? (C(), W("div", {
             key: 1,
             class: "header-description",
             "data-testid": `tile-description-${y.tileId}`
-          }, ie(y.definition.chart.description), 9, as)) : Y("", !0),
-          l.value ? (C(), I(k(ci), {
+          }, te(y.definition.chart.description), 9, ls)) : Y("", !0),
+          l.value ? (C(), M(k(ci), {
             key: 2,
             "chart-data": h.value,
             "data-testid": `csv-export-modal-${y.tileId}`,
@@ -1271,12 +1299,12 @@ const Fi = () => {
           class: "tile-content",
           "data-testid": `tile-content-${y.tileId}`
         }, [
-          D.value ? (C(), I(Rt(D.value.component), xt({ key: 0 }, D.value.rendererProps, ii(O.value), { onChartData: Vt }), null, 16)) : Y("", !0)
-        ], 8, ls)
-      ], 10, ts);
+          D.value ? (C(), M(Rt(D.value.component), xt({ key: 0 }, D.value.rendererProps, ii(O.value), { onChartData: Vt }), null, 16)) : Y("", !0)
+        ], 8, hs)
+      ], 10, is);
     };
   }
-}), ds = /* @__PURE__ */ ce(hs, [["__scopeId", "data-v-9ff83fdc"]]), us = (c, e) => {
+}), us = /* @__PURE__ */ ce(ds, [["__scopeId", "data-v-9ff83fdc"]]), cs = (c, e) => {
   let t = 0;
   const i = /* @__PURE__ */ new Map();
   e.forEach((r) => {
@@ -1287,7 +1315,7 @@ const Fi = () => {
   for (let r = 0; r < t; r++)
     i.get(r) ? s.push("auto") : s.push(`${c}px`);
   return s;
-}, cs = /* @__PURE__ */ j({
+}, fs = /* @__PURE__ */ j({
   __name: "GridLayout",
   props: {
     tileHeight: {
@@ -1315,7 +1343,7 @@ const Fi = () => {
     }), Ve(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = N(() => us(e.tileHeight, e.tiles).join(" ")), o = N(() => e.tiles.map((n, h) => ({
+    const r = N(() => cs(e.tileHeight, e.tiles).join(" ")), o = N(() => e.tiles.map((n, h) => ({
       key: `tile-${h}`,
       tile: n,
       style: {
@@ -1330,22 +1358,22 @@ const Fi = () => {
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (C(!0), W(zt, null, Tt(o.value, (l) => (C(), W("div", {
+      (C(!0), W(Tt, null, zt(o.value, (l) => (C(), W("div", {
         key: l.key,
         class: je(["grid-cell", {
           "empty-cell": !l.tile
         }]),
         style: lt(l.style)
       }, [
-        qe(n.$slots, "tile", {
+        Pe(n.$slots, "tile", {
           style: lt(l.style),
           tile: l.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), fs = /* @__PURE__ */ ce(cs, [["__scopeId", "data-v-354b7177"]]);
-function gs(c, e, t, i, s) {
+}), gs = /* @__PURE__ */ ce(fs, [["__scopeId", "data-v-354b7177"]]);
+function ms(c, e, t, i, s) {
   const r = (...o) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + s + " and has been replaced with `" + i + "`. It will be **removed** in a future release"), e.apply(c, o));
   return r.prototype = e.prototype, r;
 }
@@ -1685,7 +1713,7 @@ class u {
     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 se {
+class re {
   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;
   }
@@ -1863,7 +1891,7 @@ class se {
    * @param resizing if out of bound, resize down or move into the grid to fit ?
    */
   prepareNode(e, t) {
-    e._id = e._id ?? se._idSeq++;
+    e._id = e._id ?? re._idSeq++;
     const i = e.id;
     if (i) {
       let r = 1;
@@ -1958,7 +1986,7 @@ class se {
     if (t.pack = !0, !this.maxRow)
       return this.moveNode(e, t);
     let i;
-    const s = new se({
+    const s = new re({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
@@ -1980,7 +2008,7 @@ class se {
   willItFit(e) {
     if (delete e._willFitPos, !this.maxRow)
       return !0;
-    const t = new se({
+    const t = new re({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((s) => ({ ...s }))
@@ -2116,7 +2144,7 @@ class se {
     return e.forEach((r, o) => {
       if (r._id === void 0) {
         const n = r.id ? this.nodes.find((h) => h.id === r.id) : void 0;
-        r._id = (n == null ? void 0 : n._id) ?? se._idSeq++;
+        r._id = (n == null ? void 0 : n._id) ?? re._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;
@@ -2127,7 +2155,7 @@ class se {
    * @param column corresponding column index to save it under
    */
   cacheOneLayout(e, t) {
-    e._id = e._id ?? se._idSeq++;
+    e._id = e._id ?? re._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);
@@ -2151,7 +2179,7 @@ class se {
     return this;
   }
 }
-se._idSeq = 0;
+re._idSeq = 0;
 const K = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
@@ -2184,27 +2212,27 @@ const K = {
 };
 class w {
 }
-const te = 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 re {
+const ie = 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 ne {
 }
-function Oe(c, e) {
+function Ae(c, e) {
   c.touches.length > 1 || (c.cancelable && c.preventDefault(), u.simulateMouseEvent(c.changedTouches[0], e));
 }
 function Bt(c, e) {
   c.cancelable && c.preventDefault(), u.simulateMouseEvent(c, e);
 }
-function Ae(c) {
-  re.touchHandled || (re.touchHandled = !0, Oe(c, "mousedown"));
-}
 function He(c) {
-  re.touchHandled && Oe(c, "mousemove");
+  ne.touchHandled || (ne.touchHandled = !0, Ae(c, "mousedown"));
 }
 function Le(c) {
-  if (!re.touchHandled)
+  ne.touchHandled && Ae(c, "mousemove");
+}
+function Ie(c) {
+  if (!ne.touchHandled)
     return;
-  re.pointerLeaveTimeout && (window.clearTimeout(re.pointerLeaveTimeout), delete re.pointerLeaveTimeout);
+  ne.pointerLeaveTimeout && (window.clearTimeout(ne.pointerLeaveTimeout), delete ne.pointerLeaveTimeout);
   const e = !!w.dragElement;
-  Oe(c, "mouseup"), e || Oe(c, "click"), re.touchHandled = !1;
+  Ae(c, "mouseup"), e || Ae(c, "click"), ne.touchHandled = !1;
 }
 function Me(c) {
   c.pointerType !== "mouse" && c.target.releasePointerCapture(c.pointerId);
@@ -2213,8 +2241,8 @@ function bt(c) {
   w.dragElement && c.pointerType !== "mouse" && Bt(c, "mouseenter");
 }
 function wt(c) {
-  w.dragElement && c.pointerType !== "mouse" && (re.pointerLeaveTimeout = window.setTimeout(() => {
-    delete re.pointerLeaveTimeout, Bt(c, "mouseleave");
+  w.dragElement && c.pointerType !== "mouse" && (ne.pointerLeaveTimeout = window.setTimeout(() => {
+    delete ne.pointerLeaveTimeout, Bt(c, "mouseleave");
   }, 10));
 }
 class Be {
@@ -2224,15 +2252,15 @@ class Be {
   /** @internal */
   _init() {
     const e = this.el = document.createElement("div");
-    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Be.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), te && (this.el.addEventListener("touchstart", Ae), this.el.addEventListener("pointerdown", Me)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Be.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), ie && (this.el.addEventListener("touchstart", He), this.el.addEventListener("pointerdown", Me)), this;
   }
   /** call this when resize handle needs to be removed and cleaned up */
   destroy() {
-    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), te && (this.el.removeEventListener("touchstart", Ae), this.el.removeEventListener("pointerdown", Me)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), ie && (this.el.removeEventListener("touchstart", He), this.el.removeEventListener("pointerdown", Me)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
   }
   /** @internal called on mouse down on us: capture move on the entire document (mouse might not stay on us) until we release the mouse */
   _mouseDown(e) {
-    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), te && (this.el.addEventListener("touchmove", He), this.el.addEventListener("touchend", Le)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), ie && (this.el.addEventListener("touchmove", Le), this.el.addEventListener("touchend", Ie)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -2241,7 +2269,7 @@ class Be {
   }
   /** @internal */
   _mouseUp(e) {
-    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), te && (this.el.removeEventListener("touchmove", He), this.el.removeEventListener("touchend", Le)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), ie && (this.el.removeEventListener("touchmove", Le), this.el.removeEventListener("touchend", Ie)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -2282,7 +2310,7 @@ class et {
       return this._eventRegister[e](t);
   }
 }
-class Ee extends et {
+class xe extends et {
   // have to be public else complains for HTMLElementExtendOpt ?
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this.rectScale = { x: 1, y: 1 }, this._ui = () => {
@@ -2383,7 +2411,7 @@ class Ee extends et {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = Ee._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = xe._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
     const e = this.el.parentElement, t = u.getValuesFromTransformedElement(e);
     return this.rectScale = {
       x: t.xScale,
@@ -2392,7 +2420,7 @@ class Ee extends et {
   }
   /** @internal */
   _cleanHelper() {
-    return Ee._originStyleProp.forEach((e, t) => {
+    return xe._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -2431,9 +2459,9 @@ class Ee extends et {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-Ee._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const ms = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class xe extends et {
+xe._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const ps = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class Ce extends et {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -2453,12 +2481,12 @@ class xe extends et {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), te && (e.addEventListener("touchstart", Ae), e.addEventListener("pointerdown", Me));
+      e.addEventListener("mousedown", this._mouseDown), ie && (e.addEventListener("touchstart", He), e.addEventListener("pointerdown", Me));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), te && (t.removeEventListener("touchstart", Ae), t.removeEventListener("pointerdown", Me));
+      t.removeEventListener("mousedown", this._mouseDown), ie && (t.removeEventListener("touchstart", He), t.removeEventListener("pointerdown", Me));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -2470,7 +2498,7 @@ class xe extends et {
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
     if (!w.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(ms) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete w.dragElement, delete w.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), te && (e.currentTarget.addEventListener("touchmove", He), e.currentTarget.addEventListener("touchend", Le)), e.preventDefault(), document.activeElement && document.activeElement.blur(), w.mouseHandled = !0), !0;
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(ps) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete w.dragElement, delete w.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), ie && (e.currentTarget.addEventListener("touchmove", Le), e.currentTarget.addEventListener("touchend", Ie)), e.preventDefault(), document.activeElement && document.activeElement.blur(), w.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -2501,7 +2529,7 @@ class xe extends et {
   /** @internal call when the mouse gets released to drop the item at current location */
   _mouseUp(e) {
     var t, i;
-    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), te && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", He, !0), e.currentTarget.removeEventListener("touchend", Le, !0)), this.dragging) {
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), ie && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Le, !0), e.currentTarget.removeEventListener("touchend", Ie, !0)), this.dragging) {
       delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = w.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete w.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
       const s = u.initEvent(e, { target: this.el, type: "dragstop" });
       this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), w.dropElement && w.dropElement.drop(e);
@@ -2523,7 +2551,7 @@ class xe extends et {
   /** @internal create a clone copy (or user defined method) of the original drag item if set */
   _createHelper() {
     let e = this.el;
-    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = u.cloneNode(this.el)), e.parentElement || u.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = xe.originStyleProp.map((t) => this.el.style[t]), e;
+    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = u.cloneNode(this.el)), e.parentElement || u.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = Ce.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -2540,7 +2568,7 @@ class xe extends et {
     const e = (t = this.helper) == null ? void 0 : t.gridstackNode;
     if (!(e != null && e._isAboutToRemove) && this.dragElementOriginStyle) {
       const i = this.helper, s = this.dragElementOriginStyle.transition || null;
-      i.style.transition = this.dragElementOriginStyle.transition = "none", xe.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", Ce.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -2582,8 +2610,8 @@ class xe extends et {
     };
   }
 }
-xe.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class ps extends et {
+Ce.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class ys extends et {
   constructor(e, t = {}) {
     super(), this.el = e, this.option = t, this._mouseEnter = this._mouseEnter.bind(this), this._mouseLeave = this._mouseLeave.bind(this), this.enable(), this._setupAccept();
   }
@@ -2594,10 +2622,10 @@ class ps extends et {
     super.off(e);
   }
   enable() {
-    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), te && (this.el.addEventListener("pointerenter", bt), this.el.addEventListener("pointerleave", wt)));
+    this.disabled !== !1 && (super.enable(), this.el.classList.add("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), this.el.addEventListener("mouseenter", this._mouseEnter), this.el.addEventListener("mouseleave", this._mouseLeave), ie && (this.el.addEventListener("pointerenter", bt), this.el.addEventListener("pointerleave", wt)));
   }
   disable(e = !1) {
-    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), e || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), te && (this.el.removeEventListener("pointerenter", bt), this.el.removeEventListener("pointerleave", wt)));
+    this.disabled !== !0 && (super.disable(), this.el.classList.remove("ui-droppable"), e || this.el.classList.add("ui-droppable-disabled"), this.el.removeEventListener("mouseenter", this._mouseEnter), this.el.removeEventListener("mouseleave", this._mouseLeave), ie && (this.el.removeEventListener("pointerenter", bt), this.el.removeEventListener("pointerleave", wt)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -2663,25 +2691,25 @@ class tt {
     return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.off(e) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.off(e) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.off(e), this;
   }
   setupDraggable(e) {
-    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new xe(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new Ce(this.el, e), this;
   }
   cleanDraggable() {
     return this.ddDraggable && (this.ddDraggable.destroy(), delete this.ddDraggable), this;
   }
   setupResizable(e) {
-    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new Ee(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new xe(this.el, e), this;
   }
   cleanResizable() {
     return this.ddResizable && (this.ddResizable.destroy(), delete this.ddResizable), this;
   }
   setupDroppable(e) {
-    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new ps(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new ys(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class ys {
+class vs {
   resizable(e, t, i, s) {
     return this._getDDElements(e, t).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -2770,7 +2798,7 @@ class ys {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const U = new ys();
+const U = new vs();
 class b {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
@@ -2878,8 +2906,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     };
     e.getAttribute("gs-animate") && (n.animate = u.toBool(e.getAttribute("gs-animate"))), t = u.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 h = this.el.closest("." + K.itemClass), l = h == null ? void 0 : h.gridstackNode;
-    l && (l.subGrid = this, this.parentGridNode = l, this.el.classList.add("grid-stack-nested"), l.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== K.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = te), this._styleSheetClass = "gs-id-" + se._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const d = t.engineClass || b.engineClass || se;
+    l && (l.subGrid = this, this.parentGridNode = l, this.el.classList.add("grid-stack-nested"), l.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== K.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = ie), this._styleSheetClass = "gs-id-" + re._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const d = t.engineClass || b.engineClass || re;
     if (this.engine = new d({
       column: this.getColumn(),
       float: t.float,
@@ -3952,14 +3980,14 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && u.updateScrollPosition(e, i.position, p);
       const R = i.position.left + (i.position.left > s._lastUiPosition.left ? -d : l), A = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : a);
       n.x = Math.round(R / r), n.y = Math.round(A / o);
-      const z = this._extraDragRow;
+      const T = this._extraDragRow;
       if (this.engine.collide(s, n)) {
         const H = this.getRow();
         let E = Math.max(0, n.y + s.h - H);
         this.opts.maxRow && H + E > this.opts.maxRow && (E = Math.max(0, this.opts.maxRow - H)), this._extraDragRow = E;
       } else
         this._extraDragRow = 0;
-      if (this._extraDragRow !== z && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+      if (this._extraDragRow !== T && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
         return;
     } else if (t.type === "resize") {
       if (n.x < 0 || (u.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - l) / r), n.h = Math.round((i.size.height - a) / o), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
@@ -3995,7 +4023,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   // legacy method removed
   commit() {
-    return gs(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return ms(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
 b.renderCB = (c, e) => {
@@ -4003,9 +4031,9 @@ b.renderCB = (c, e) => {
 };
 b.resizeToContentParent = ".grid-stack-item-content";
 b.Utils = u;
-b.Engine = se;
+b.Engine = re;
 b.GDRev = "11.5.1";
-const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { class: "grid-stack-item-content" }, bs = /* @__PURE__ */ j({
+const _s = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], bs = { class: "grid-stack-item-content" }, ws = /* @__PURE__ */ j({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -4072,7 +4100,7 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
       ref: r,
       class: "grid-stack"
     }, [
-      (C(!0), W(zt, null, Tt(i.tiles, (v) => (C(), W("div", {
+      (C(!0), W(Tt, null, zt(i.tiles, (v) => (C(), W("div", {
         key: v.id,
         class: "grid-stack-item",
         "data-id": `${v.id}`,
@@ -4083,16 +4111,16 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
         "gs-x": v.layout.position.col,
         "gs-y": v.layout.position.row
       }, [
-        ae("div", _s, [
-          qe(m.$slots, "tile", { tile: v }, void 0, !0)
+        ae("div", bs, [
+          Pe(m.$slots, "tile", { tile: v }, void 0, !0)
         ])
-      ], 8, vs))), 128))
+      ], 8, _s))), 128))
     ], 512));
   }
-}), ws = /* @__PURE__ */ ce(bs, [["__scopeId", "data-v-a68d6821"]]), Es = { class: "kong-ui-public-dashboard-renderer" }, xs = {
+}), Es = /* @__PURE__ */ ce(ws, [["__scopeId", "data-v-a68d6821"]]), xs = { class: "kong-ui-public-dashboard-renderer" }, Cs = {
   key: 0,
   class: "tile-container slottable-tile"
-}, Cs = /* @__PURE__ */ j({
+}, Rs = /* @__PURE__ */ j({
   __name: "DashboardRenderer",
   props: /* @__PURE__ */ ht({
     context: {}
@@ -4114,7 +4142,7 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
       var D;
       let O = x.definition;
       if ("description" in O.chart) {
-        const q = (D = O.chart.description) == null ? void 0 : D.replace(Ai, () => {
+        const P = (D = O.chart.description) == null ? void 0 : D.replace(Hi, () => {
           const de = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
           return o.te(de) ? o.t(de) : "";
         });
@@ -4122,7 +4150,7 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
           ...O,
           chart: {
             ...O.chart,
-            description: q
+            description: P
           }
         };
       }
@@ -4138,13 +4166,13 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
         id: x.id ?? crypto.randomUUID()
       };
     })), v = N(() => {
-      var de, be, De;
+      var de, be, ke;
       let { tz: x, refreshInterval: O, editable: D } = i.context;
-      const q = [...i.context.filters ?? [], ...r.value.preset_filters ?? []];
-      x || (x = new Intl.DateTimeFormat().resolvedOptions().timeZone), O === void 0 && (O = Hi), D === void 0 && (D = !1);
-      const ee = !!((De = (be = (de = ri()) == null ? void 0 : de.vnode) == null ? void 0 : be.props) != null && De.onTileTimeRangeZoom);
+      const P = [...i.context.filters ?? [], ...r.value.preset_filters ?? []];
+      x || (x = new Intl.DateTimeFormat().resolvedOptions().timeZone), O === void 0 && (O = Li), D === void 0 && (D = !1);
+      const ee = !!((ke = (be = (de = ri()) == null ? void 0 : de.vnode) == null ? void 0 : be.props) != null && ke.onTileTimeRangeZoom);
       return {
-        filters: q,
+        filters: P,
         tz: x,
         timeSpec: a.value,
         refreshInterval: O,
@@ -4173,7 +4201,7 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
         }
       };
       r.value.tiles.push(D);
-    }, z = (x) => {
+    }, T = (x) => {
       h.value && h.value.removeWidget(x.id);
     }, H = () => {
       n.value++;
@@ -4188,8 +4216,8 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
     };
     return e({ refresh: H }), (x, O) => {
       const D = he("KAlert");
-      return C(), W("div", Es, [
-        k(l) ? (C(), I(Rt(x.context.editable ? ws : fs), {
+      return C(), W("div", xs, [
+        k(l) ? (C(), M(Rt(x.context.editable ? Es : gs), {
           key: 1,
           ref_key: "gridLayoutRef",
           ref: h,
@@ -4197,46 +4225,46 @@ const vs = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], _s = { cl
           tiles: g.value,
           onUpdateTiles: E
         }, {
-          tile: $(({ tile: q }) => [
-            q.meta.chart.type === "slottable" ? (C(), W("div", xs, [
-              qe(x.$slots, q.meta.chart.id, {}, void 0, !0)
-            ])) : (C(), I(ds, {
+          tile: q(({ tile: P }) => [
+            P.meta.chart.type === "slottable" ? (C(), W("div", Cs, [
+              Pe(x.$slots, P.meta.chart.id, {}, void 0, !0)
+            ])) : (C(), M(us, {
               key: 1,
               class: "tile-container",
               context: v.value,
-              definition: q.meta,
-              height: q.layout.size.rows * (r.value.tile_height || k($e)) + parseInt(k($t), 10),
+              definition: P.meta,
+              height: P.layout.size.rows * (r.value.tile_height || k($e)) + parseInt(k($t), 10),
               "query-ready": f.value,
               "refresh-counter": n.value,
-              "tile-id": q.id,
-              onDuplicateTile: (ee) => A(q),
-              onEditTile: (ee) => p(q),
-              onRemoveTile: (ee) => z(q),
+              "tile-id": P.id,
+              onDuplicateTile: (ee) => A(P),
+              onEditTile: (ee) => p(P),
+              onRemoveTile: (ee) => T(P),
               onTileTimeRangeZoom: O[0] || (O[0] = (ee) => s("tile-time-range-zoom", ee))
             }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
           ]),
           _: 3
-        }, 40, ["tile-height", "tiles"])) : (C(), I(D, {
+        }, 40, ["tile-height", "tiles"])) : (C(), M(D, {
           key: 0,
           appearance: "danger"
         }, {
-          default: $(() => [
-            Pe(ie(k(o).t("renderer.noQueryBridge")), 1)
+          default: q(() => [
+            Ee(te(k(o).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), Ls = /* @__PURE__ */ ce(Cs, [["__scopeId", "data-v-c16badc2"]]);
+}), Is = /* @__PURE__ */ ce(Rs, [["__scopeId", "data-v-c16badc2"]]);
 export {
-  Oi as CP_ID_TOKEN,
+  Ai as CP_ID_TOKEN,
   Nt as DASHBOARD_COLS,
   $e as DEFAULT_TILE_HEIGHT,
-  Hi as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  Ls as DashboardRenderer,
+  Li as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  Is as DashboardRenderer,
   ut as ENTITY_ID_TOKEN,
-  fs as GridLayout,
+  gs as GridLayout,
   ue as INJECT_QUERY_PROVIDER,
-  Ai as TIMEFRAME_TOKEN
+  Hi as TIMEFRAME_TOKEN
 };