@kong-ui-public/dashboard-renderer 5.1.2 → 5.2.0

package/dist/dashboard-renderer.es.js

@@ -1,39 +1,39 @@
-var Ot = Object.defineProperty;
-var Ze = (u) => {
+var Lt = Object.defineProperty;
+var Je = (u) => {
   throw TypeError(u);
 };
-var Lt = (u, e, t) => e in u ? Ot(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
-var Je = (u, e, t) => Lt(u, typeof e != "symbol" ? e + "" : e, t), Pe = (u, e, t) => e.has(u) || Ze("Cannot " + t);
-var v = (u, e, t) => (Pe(u, e, "read from private field"), t ? t.call(u) : e.get(u)), O = (u, e, t) => e.has(u) ? Ze("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), N = (u, e, t, i) => (Pe(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), L = (u, e, t) => (Pe(u, e, "access private method"), t);
-var ye = (u, e, t, i) => ({
+var Mt = (u, e, t) => e in u ? Lt(u, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : u[e] = t;
+var et = (u, e, t) => Mt(u, typeof e != "symbol" ? e + "" : e, t), qe = (u, e, t) => e.has(u) || Je("Cannot " + t);
+var _ = (u, e, t) => (qe(u, e, "read from private field"), t ? t.call(u) : e.get(u)), M = (u, e, t) => e.has(u) ? Je("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(u) : e.set(u, t), A = (u, e, t, i) => (qe(u, e, "write to private field"), i ? i.call(u, t) : e.set(u, t), t), I = (u, e, t) => (qe(u, e, "access private method"), t);
+var we = (u, e, t, i) => ({
   set _(s) {
-    N(u, e, s, t);
+    A(u, e, s, t);
   },
   get _() {
-    return v(u, e, i);
+    return _(u, e, i);
   }
 });
-import { ref as $, watchEffect as gt, inject as me, provide as Mt, defineComponent as G, onUnmounted as $e, computed as A, watch as Fe, resolveComponent as ne, unref as k, openBlock as z, createBlock as H, withCtx as M, createTextVNode as ve, toDisplayString as te, renderSlot as Le, createCommentVNode as X, useCssVars as Ue, createElementVNode as le, normalizeClass as Ge, createVNode as ie, mergeProps as mt, createSlots as pt, createElementBlock as F, normalizeProps as It, guardReactiveProps as Pt, defineAsyncComponent as qt, onMounted as We, nextTick as yt, resolveDynamicComponent as vt, Fragment as _t, renderList as wt, normalizeStyle as et, mergeModels as tt, useModel as Bt } from "vue";
-import { stripUnknownFilters as $t, Timeframe as Ft, TimePeriods as bt, TIMEFRAME_LOOKUP as Ut, formatTime as it, msToGranularity as Gt } from "@kong-ui-public/analytics-utilities";
-import { SimpleChart as Wt, AnalyticsChart as Vt, TopNTable as Kt, CsvExportModal as Yt } from "@kong-ui-public/analytics-chart";
-import Xt from "swrv";
+import { ref as U, watchEffect as mt, inject as _e, provide as It, defineComponent as W, onUnmounted as Ue, computed as O, watch as Fe, resolveComponent as oe, unref as S, openBlock as C, createBlock as H, withCtx as P, createTextVNode as ue, toDisplayString as J, renderSlot as Me, createCommentVNode as V, useCssVars as Ge, createElementVNode as ce, normalizeClass as We, createVNode as se, mergeProps as pt, createSlots as yt, createElementBlock as F, normalizeProps as Pt, guardReactiveProps as qt, defineAsyncComponent as Bt, onMounted as Ve, nextTick as vt, resolveDynamicComponent as _t, Fragment as wt, renderList as bt, normalizeStyle as tt, mergeModels as it, useModel as $t } from "vue";
+import { stripUnknownFilters as Ut, Timeframe as Ft, TimePeriods as Et, TIMEFRAME_LOOKUP as Gt, formatTime as st, msToGranularity as Wt } from "@kong-ui-public/analytics-utilities";
+import { SimpleChart as Vt, AnalyticsChart as Kt, TopNTable as Yt, CsvExportModal as Xt } from "@kong-ui-public/analytics-chart";
+import jt from "swrv";
 import "axios";
-import { createI18n as jt, i18nTComponent as Qt } from "@kong-ui-public/i18n";
-import { useAnalyticsConfigStore as Et } from "@kong-ui-public/analytics-config-store";
-import { MetricsProvider as Zt, MetricsConsumer as Jt } from "@kong-ui-public/analytics-metric-provider";
-import { EditIcon as ei, MoreIcon as ti } from "@kong/icons";
-var xt = /* @__PURE__ */ ((u) => (u.VALIDATING = "VALIDATING", u.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", u.PENDING = "PENDING", u.SUCCESS = "SUCCESS", u.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", u.ERROR = "ERROR", u.STALE_IF_ERROR = "STALE_IF_ERROR", u))(xt || {});
-const ii = (u) => {
+import { createI18n as Qt, i18nTComponent as Zt } from "@kong-ui-public/i18n";
+import { useAnalyticsConfigStore as xt } from "@kong-ui-public/analytics-config-store";
+import { MetricsProvider as Jt, MetricsConsumer as ei } from "@kong-ui-public/analytics-metric-provider";
+import { EditIcon as ti, MoreIcon as ii } from "@kong/icons";
+var Ct = /* @__PURE__ */ ((u) => (u.VALIDATING = "VALIDATING", u.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", u.PENDING = "PENDING", u.SUCCESS = "SUCCESS", u.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", u.ERROR = "ERROR", u.STALE_IF_ERROR = "STALE_IF_ERROR", u))(Ct || {});
+const si = (u) => {
   var e, t, i, s, r;
   return u ? !!// TODO: revisit: currently only the first check ever matters?
   ((e = Object.keys(u)) != null && e.length || (t = u.data) != null && t.length || (s = (i = u.data) == null ? void 0 : i.data) != null && s.length || !((r = u.data) != null && r.data) && typeof u.data == "object" && Object.keys(u == null ? void 0 : u.data).length) : !1;
 };
-function si(u = $({}), e, t, i = ii) {
-  const s = $(
+function ri(u = U({}), e, t, i = si) {
+  const s = U(
     "PENDING"
     /* PENDING */
   );
-  return gt(() => {
+  return mt(() => {
     const r = i(u.value);
     if (u.value && r && t.value) {
       s.value = "VALIDATING_HAS_DATA";
@@ -62,10 +62,10 @@ function si(u = $({}), e, t, i = ii) {
     u.value === void 0 && e && (s.value = "ERROR");
   }), {
     state: s,
-    swrvState: xt
+    swrvState: Ct
   };
 }
-const ri = {
+const ni = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -73,37 +73,38 @@ const ri = {
     "30d": "Last 30-Day Summary"
   },
   edit: "Edit",
+  duplicateTile: "Duplicate",
   remove: "Remove"
-}, ni = {
-  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
 }, oi = {
+  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
+}, ai = {
   defaultFilename: "Chart Export",
   exportAsCsv: "Export as CSV"
-}, ai = "Explore", li = {
-  renderer: ri,
-  queryDataProvider: ni,
-  csvExport: oi,
-  jumpToExplore: ai
+}, li = "Explore", hi = {
+  renderer: ni,
+  queryDataProvider: oi,
+  csvExport: ai,
+  jumpToExplore: li
 };
-function hi() {
-  const u = jt("en-us", li);
+function di() {
+  const u = Qt("en-us", hi);
   return {
     i18n: u,
-    i18nT: Qt(u)
+    i18nT: Zt(u)
     // Translation component <i18n-t>
   };
 }
-const Ve = 170, oe = "analytics-query-provider", st = "{entity-id}", di = "{cp-id}", ui = "{timeframe}", ci = 30 * 1e3;
-function fi() {
-  const u = me(oe);
+const Ke = 170, le = "analytics-query-provider", rt = "{entity-id}", ui = "{cp-id}", ci = "{timeframe}", fi = 30 * 1e3;
+function gi() {
+  const u = _e(le);
   return {
     evaluateFeatureFlag: (t, i) => u ? u.evaluateFeatureFlagFn(t, i) : i
   };
 }
-function gi(u) {
+function mi(u) {
   return u && u.__esModule && Object.prototype.hasOwnProperty.call(u, "default") ? u.default : u;
 }
-var Ct = { exports: {} };
+var Rt = { exports: {} };
 (function(u) {
   var e = Object.prototype.hasOwnProperty, t = "~";
   function i() {
@@ -143,7 +144,7 @@ var Ct = { exports: {} };
   }, n.prototype.emit = function(h, a, l, f, m, p) {
     var y = t ? t + h : h;
     if (!this._events[y]) return !1;
-    var g = this._events[y], R = arguments.length, S, C;
+    var g = this._events[y], R = arguments.length, k, E;
     if (g.fn) {
       switch (g.once && this.removeListener(h, g.fn, void 0, !0), R) {
         case 1:
@@ -159,29 +160,29 @@ var Ct = { exports: {} };
         case 6:
           return g.fn.call(g.context, a, l, f, m, p), !0;
       }
-      for (C = 1, S = new Array(R - 1); C < R; C++)
-        S[C - 1] = arguments[C];
-      g.fn.apply(g.context, S);
+      for (E = 1, k = new Array(R - 1); E < R; E++)
+        k[E - 1] = arguments[E];
+      g.fn.apply(g.context, k);
     } else {
-      var x = g.length, E;
-      for (C = 0; C < x; C++)
-        switch (g[C].once && this.removeListener(h, g[C].fn, void 0, !0), R) {
+      var L = g.length, D;
+      for (E = 0; E < L; E++)
+        switch (g[E].once && this.removeListener(h, g[E].fn, void 0, !0), R) {
           case 1:
-            g[C].fn.call(g[C].context);
+            g[E].fn.call(g[E].context);
             break;
           case 2:
-            g[C].fn.call(g[C].context, a);
+            g[E].fn.call(g[E].context, a);
             break;
           case 3:
-            g[C].fn.call(g[C].context, a, l);
+            g[E].fn.call(g[E].context, a, l);
             break;
           case 4:
-            g[C].fn.call(g[C].context, a, l, f);
+            g[E].fn.call(g[E].context, a, l, f);
             break;
           default:
-            if (!S) for (E = 1, S = new Array(R - 1); E < R; E++)
-              S[E - 1] = arguments[E];
-            g[C].fn.apply(g[C].context, S);
+            if (!k) for (D = 1, k = new Array(R - 1); D < R; D++)
+              k[D - 1] = arguments[D];
+            g[E].fn.apply(g[E].context, k);
         }
     }
     return !0;
@@ -207,24 +208,24 @@ var Ct = { exports: {} };
     var a;
     return h ? (a = t ? t + h : h, this._events[a] && o(this, a)) : (this._events = new i(), this._eventsCount = 0), this;
   }, n.prototype.off = n.prototype.removeListener, n.prototype.addListener = n.prototype.on, n.prefixed = t, n.EventEmitter = n, u.exports = n;
-})(Ct);
-var mi = Ct.exports;
-const pi = /* @__PURE__ */ gi(mi);
-class Rt extends Error {
+})(Rt);
+var pi = Rt.exports;
+const yi = /* @__PURE__ */ mi(pi);
+class Tt extends Error {
   constructor(e) {
     super(e), this.name = "TimeoutError";
   }
 }
-class yi extends Error {
+class vi extends Error {
   constructor(e) {
     super(), this.name = "AbortError", this.message = e;
   }
 }
-const rt = (u) => globalThis.DOMException === void 0 ? new yi(u) : new DOMException(u), nt = (u) => {
-  const e = u.reason === void 0 ? rt("This operation was aborted.") : u.reason;
-  return e instanceof Error ? e : rt(e);
+const nt = (u) => globalThis.DOMException === void 0 ? new vi(u) : new DOMException(u), ot = (u) => {
+  const e = u.reason === void 0 ? nt("This operation was aborted.") : u.reason;
+  return e instanceof Error ? e : nt(e);
 };
-function vi(u, e) {
+function _i(u, e) {
   const {
     milliseconds: t,
     fallback: i,
@@ -237,15 +238,15 @@ function vi(u, e) {
       throw new TypeError(`Expected \`milliseconds\` to be a positive number, got \`${t}\``);
     if (e.signal) {
       const { signal: m } = e;
-      m.aborted && l(nt(m)), n = () => {
-        l(nt(m));
+      m.aborted && l(ot(m)), n = () => {
+        l(ot(m));
       }, m.addEventListener("abort", n, { once: !0 });
     }
     if (t === Number.POSITIVE_INFINITY) {
       u.then(a, l);
       return;
     }
-    const f = new Rt();
+    const f = new Tt();
     o = r.setTimeout.call(void 0, () => {
       if (i) {
         try {
@@ -270,7 +271,7 @@ function vi(u, e) {
     r.clearTimeout.call(void 0, o), o = void 0;
   }, h;
 }
-function _i(u, e, t) {
+function wi(u, e, t) {
   let i = 0, s = u.length;
   for (; s > 0; ) {
     const r = Math.trunc(s / 2);
@@ -279,10 +280,10 @@ function _i(u, e, t) {
   }
   return i;
 }
-var W;
-class wi {
+var K;
+class bi {
   constructor() {
-    O(this, W, []);
+    M(this, K, []);
   }
   enqueue(e, t) {
     t = {
@@ -294,83 +295,83 @@ class wi {
       id: t.id,
       run: e
     };
-    if (this.size === 0 || v(this, W)[this.size - 1].priority >= t.priority) {
-      v(this, W).push(i);
+    if (this.size === 0 || _(this, K)[this.size - 1].priority >= t.priority) {
+      _(this, K).push(i);
       return;
     }
-    const s = _i(v(this, W), i, (r, o) => o.priority - r.priority);
-    v(this, W).splice(s, 0, i);
+    const s = wi(_(this, K), i, (r, o) => o.priority - r.priority);
+    _(this, K).splice(s, 0, i);
   }
   setPriority(e, t) {
-    const i = v(this, W).findIndex((r) => r.id === e);
+    const i = _(this, K).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, W).splice(i, 1);
+    const [s] = _(this, K).splice(i, 1);
     this.enqueue(s.run, { priority: t, id: e });
   }
   dequeue() {
-    const e = v(this, W).shift();
+    const e = _(this, K).shift();
     return e == null ? void 0 : e.run;
   }
   filter(e) {
-    return v(this, W).filter((t) => t.priority === e.priority).map((t) => t.run);
+    return _(this, K).filter((t) => t.priority === e.priority).map((t) => t.run);
   }
   get size() {
-    return v(this, W).length;
+    return _(this, K).length;
   }
 }
-W = new WeakMap();
-var he, de, re, be, ue, Ee, V, ce, q, xe, K, fe, ee, Ce, Oe, T, zt, Tt, Dt, St, kt, ze, qe, Be, Te, Nt, De;
-class bi extends pi {
+K = new WeakMap();
+var fe, ge, ne, xe, me, Ce, Y, pe, $, Re, X, ye, ie, Te, Le, T, zt, Dt, St, kt, Nt, ze, Be, $e, De, At, Se;
+class Ei extends yi {
   // TODO: The `throwOnTimeout` option should affect the return types of `add()` and `addAll()`
   constructor(t) {
     var i, s;
     super();
-    O(this, T);
-    O(this, he);
-    O(this, de);
-    O(this, re, 0);
-    O(this, be);
-    O(this, ue);
-    O(this, Ee, 0);
-    O(this, V);
-    O(this, ce);
-    O(this, q);
-    O(this, xe);
-    O(this, K, 0);
+    M(this, T);
+    M(this, fe);
+    M(this, ge);
+    M(this, ne, 0);
+    M(this, xe);
+    M(this, me);
+    M(this, Ce, 0);
+    M(this, Y);
+    M(this, pe);
+    M(this, $);
+    M(this, Re);
+    M(this, X, 0);
     // The `!` is needed because of https://github.com/microsoft/TypeScript/issues/32194
-    O(this, fe);
-    O(this, ee);
-    O(this, Ce);
+    M(this, ye);
+    M(this, ie);
+    M(this, Te);
     // Use to assign a unique identifier to a promise function, if not explicitly specified
-    O(this, Oe, 1n);
+    M(this, Le, 1n);
     /**
         Per-operation timeout in milliseconds. Operations fulfill once `timeout` elapses if they haven't already.
     
         Applies to each future operation.
         */
-    Je(this, "timeout");
+    et(this, "timeout");
     if (t = {
       carryoverConcurrencyCount: !1,
       intervalCap: Number.POSITIVE_INFINITY,
       interval: 0,
       concurrency: Number.POSITIVE_INFINITY,
       autoStart: !0,
-      queueClass: wi,
+      queueClass: bi,
       ...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})`);
-    N(this, he, t.carryoverConcurrencyCount), N(this, de, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), N(this, be, t.intervalCap), N(this, ue, t.interval), N(this, q, new t.queueClass()), N(this, xe, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, N(this, Ce, t.throwOnTimeout === !0), N(this, ee, t.autoStart === !1);
+    A(this, fe, t.carryoverConcurrencyCount), A(this, ge, t.intervalCap === Number.POSITIVE_INFINITY || t.interval === 0), A(this, xe, t.intervalCap), A(this, me, t.interval), A(this, $, new t.queueClass()), A(this, Re, t.queueClass), this.concurrency = t.concurrency, this.timeout = t.timeout, A(this, Te, t.throwOnTimeout === !0), A(this, ie, t.autoStart === !1);
   }
   get concurrency() {
-    return v(this, fe);
+    return _(this, ye);
   }
   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})`);
-    N(this, fe, t), L(this, T, Te).call(this);
+    A(this, ye, t), I(this, T, De).call(this);
   }
   /**
       Updates the priority of a promise function by its id, affecting its execution order. Requires a defined concurrency limit to take effect.
@@ -409,33 +410,33 @@ class bi extends pi {
       Here, the promise function with `id: '🦀'` executes last.
       */
   setPriority(t, i) {
-    v(this, q).setPriority(t, i);
+    _(this, $).setPriority(t, i);
   }
   async add(t, i = {}) {
-    return i.id ?? (i.id = (ye(this, Oe)._++).toString()), i = {
+    return i.id ?? (i.id = (we(this, Le)._++).toString()), i = {
       timeout: this.timeout,
-      throwOnTimeout: v(this, Ce),
+      throwOnTimeout: _(this, Te),
       ...i
     }, new Promise((s, r) => {
-      v(this, q).enqueue(async () => {
+      _(this, $).enqueue(async () => {
         var o;
-        ye(this, K)._++, ye(this, re)._++;
+        we(this, X)._++, we(this, ne)._++;
         try {
           (o = i.signal) == null || o.throwIfAborted();
           let n = t({ signal: i.signal });
-          i.timeout && (n = vi(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, L(this, T, Nt).call(this, i.signal)]));
+          i.timeout && (n = _i(Promise.resolve(n), { milliseconds: i.timeout })), i.signal && (n = Promise.race([n, I(this, T, At).call(this, i.signal)]));
           const d = await n;
           s(d), this.emit("completed", d);
         } catch (n) {
-          if (n instanceof Rt && !i.throwOnTimeout) {
+          if (n instanceof Tt && !i.throwOnTimeout) {
             s();
             return;
           }
           r(n), this.emit("error", n);
         } finally {
-          L(this, T, Dt).call(this);
+          I(this, T, St).call(this);
         }
-      }, i), this.emit("add"), L(this, T, ze).call(this);
+      }, i), this.emit("add"), I(this, T, ze).call(this);
     });
   }
   async addAll(t, i) {
@@ -445,19 +446,19 @@ class bi extends pi {
   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, ee) ? (N(this, ee, !1), L(this, T, Te).call(this), this) : this;
+    return _(this, ie) ? (A(this, ie, !1), I(this, T, De).call(this), this) : this;
   }
   /**
   Put queue execution on hold.
   */
   pause() {
-    N(this, ee, !0);
+    A(this, ie, !0);
   }
   /**
   Clear the queue.
   */
   clear() {
-    N(this, q, new (v(this, xe))());
+    A(this, $, new (_(this, Re))());
   }
   /**
       Can be called multiple times. Useful if you for example add additional items at a later time.
@@ -465,7 +466,7 @@ class bi extends pi {
       @returns A promise that settles when the queue becomes empty.
       */
   async onEmpty() {
-    v(this, q).size !== 0 && await L(this, T, De).call(this, "empty");
+    _(this, $).size !== 0 && await I(this, T, Se).call(this, "empty");
   }
   /**
       @returns A promise that settles when the queue size is less than the given limit: `queue.size < limit`.
@@ -475,7 +476,7 @@ class bi extends pi {
       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 L(this, T, De).call(this, "next", () => v(this, q).size < t);
+    _(this, $).size < t || await I(this, T, Se).call(this, "next", () => _(this, $).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.
@@ -483,13 +484,13 @@ class bi extends pi {
       @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, K) === 0 && v(this, q).size === 0 || await L(this, T, De).call(this, "idle");
+    _(this, X) === 0 && _(this, $).size === 0 || await I(this, T, Se).call(this, "idle");
   }
   /**
   Size of the queue, the number of queued items waiting to run.
   */
   get size() {
-    return v(this, q).size;
+    return _(this, $).size;
   }
   /**
       Size of the queue, filtered by the given options.
@@ -497,71 +498,71 @@ class bi extends pi {
       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 _(this, $).filter(t).length;
   }
   /**
   Number of running items (no longer in the queue).
   */
   get pending() {
-    return v(this, K);
+    return _(this, X);
   }
   /**
   Whether the queue is currently paused.
   */
   get isPaused() {
-    return v(this, ee);
+    return _(this, ie);
   }
 }
-he = new WeakMap(), de = new WeakMap(), re = new WeakMap(), be = new WeakMap(), ue = new WeakMap(), Ee = new WeakMap(), V = new WeakMap(), ce = new WeakMap(), q = new WeakMap(), xe = new WeakMap(), K = new WeakMap(), fe = new WeakMap(), ee = new WeakMap(), Ce = new WeakMap(), Oe = new WeakMap(), T = new WeakSet(), zt = function() {
-  return v(this, de) || v(this, re) < v(this, be);
-}, Tt = function() {
-  return v(this, K) < v(this, fe);
+fe = new WeakMap(), ge = new WeakMap(), ne = new WeakMap(), xe = new WeakMap(), me = new WeakMap(), Ce = new WeakMap(), Y = new WeakMap(), pe = new WeakMap(), $ = new WeakMap(), Re = new WeakMap(), X = new WeakMap(), ye = new WeakMap(), ie = new WeakMap(), Te = new WeakMap(), Le = new WeakMap(), T = new WeakSet(), zt = function() {
+  return _(this, ge) || _(this, ne) < _(this, xe);
 }, Dt = function() {
-  ye(this, K)._--, L(this, T, ze).call(this), this.emit("next");
+  return _(this, X) < _(this, ye);
 }, St = function() {
-  L(this, T, Be).call(this), L(this, T, qe).call(this), N(this, ce, void 0);
+  we(this, X)._--, I(this, T, ze).call(this), this.emit("next");
 }, kt = function() {
+  I(this, T, $e).call(this), I(this, T, Be).call(this), A(this, pe, void 0);
+}, Nt = function() {
   const t = Date.now();
-  if (v(this, V) === void 0) {
-    const i = v(this, Ee) - t;
+  if (_(this, Y) === void 0) {
+    const i = _(this, Ce) - t;
     if (i < 0)
-      N(this, re, v(this, he) ? v(this, K) : 0);
+      A(this, ne, _(this, fe) ? _(this, X) : 0);
     else
-      return v(this, ce) === void 0 && N(this, ce, setTimeout(() => {
-        L(this, T, St).call(this);
+      return _(this, pe) === void 0 && A(this, pe, setTimeout(() => {
+        I(this, T, kt).call(this);
       }, i)), !0;
   }
   return !1;
 }, ze = function() {
-  if (v(this, q).size === 0)
-    return v(this, V) && clearInterval(v(this, V)), N(this, V, void 0), this.emit("empty"), v(this, K) === 0 && this.emit("idle"), !1;
-  if (!v(this, ee)) {
-    const t = !v(this, T, kt);
-    if (v(this, T, zt) && v(this, T, Tt)) {
-      const i = v(this, q).dequeue();
-      return i ? (this.emit("active"), i(), t && L(this, T, qe).call(this), !0) : !1;
+  if (_(this, $).size === 0)
+    return _(this, Y) && clearInterval(_(this, Y)), A(this, Y, void 0), this.emit("empty"), _(this, X) === 0 && this.emit("idle"), !1;
+  if (!_(this, ie)) {
+    const t = !_(this, T, Nt);
+    if (_(this, T, zt) && _(this, T, Dt)) {
+      const i = _(this, $).dequeue();
+      return i ? (this.emit("active"), i(), t && I(this, T, Be).call(this), !0) : !1;
     }
   }
   return !1;
-}, qe = function() {
-  v(this, de) || v(this, V) !== void 0 || (N(this, V, setInterval(() => {
-    L(this, T, Be).call(this);
-  }, v(this, ue))), N(this, Ee, Date.now() + v(this, ue)));
 }, Be = function() {
-  v(this, re) === 0 && v(this, K) === 0 && v(this, V) && (clearInterval(v(this, V)), N(this, V, void 0)), N(this, re, v(this, he) ? v(this, K) : 0), L(this, T, Te).call(this);
+  _(this, ge) || _(this, Y) !== void 0 || (A(this, Y, setInterval(() => {
+    I(this, T, $e).call(this);
+  }, _(this, me))), A(this, Ce, Date.now() + _(this, me)));
+}, $e = function() {
+  _(this, ne) === 0 && _(this, X) === 0 && _(this, Y) && (clearInterval(_(this, Y)), A(this, Y, void 0)), A(this, ne, _(this, fe) ? _(this, X) : 0), I(this, T, De).call(this);
 }, /**
 Executes all queued functions until it reaches the limit.
 */
-Te = function() {
-  for (; L(this, T, ze).call(this); )
+De = function() {
+  for (; I(this, T, ze).call(this); )
     ;
-}, Nt = async function(t) {
+}, At = async function(t) {
   return new Promise((i, s) => {
     t.addEventListener("abort", () => {
       s(t.reason);
     }, { once: !0 });
   });
-}, De = async function(t, i) {
+}, Se = async function(t, i) {
   return new Promise((s) => {
     const r = () => {
       i && !i() || (this.off(t, r), s());
@@ -569,15 +570,15 @@ Te = function() {
     this.on(t, r);
   });
 };
-const Ei = () => {
-  const u = Et(), e = me(oe);
+const xi = () => {
+  const u = xt(), e = _e(le);
   if (!e)
     return;
   if (e.queryFnOverride) {
     console.warn("Detected incorrect use of useRequestQueue.  This composable should not be used in nested components.  Please discuss with team-data or report an issue if you feel you have a use case.");
     return;
   }
-  const t = new bi({
+  const t = new Ei({
     carryoverConcurrencyCount: !0,
     concurrency: u.maxParallelRequests,
     interval: u.requestInterval,
@@ -587,12 +588,12 @@ const Ei = () => {
     queryFnOverride: !0,
     queryFn: (s, r) => t.add(() => e.queryFn(s, r), { throwOnTimeout: !0 })
   };
-  Mt(oe, i);
-}, ge = {
-  useI18n: hi,
-  useEvaluateFeatureFlag: fi,
-  useRequestQueue: Ei
-}, Ke = /* @__PURE__ */ G({
+  It(le, i);
+}, ve = {
+  useI18n: di,
+  useEvaluateFeatureFlag: gi,
+  useRequestQueue: xi
+}, Ye = /* @__PURE__ */ W({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -602,73 +603,73 @@ const Ei = () => {
   },
   emits: ["chart-data", "queryComplete"],
   setup(u, { emit: e }) {
-    const t = u, i = e, { i18n: s } = ge.useI18n(), r = me(oe), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
-    $e(() => {
+    const t = u, i = e, { i18n: s } = ve.useI18n(), r = _e(le), o = () => t.queryReady && r ? JSON.stringify([t.query, t.context, t.refreshCounter]) : null, n = new AbortController();
+    Ue(() => {
       n.abort();
     });
-    const d = (R, S, C) => {
-      const x = [];
-      return S && x.push(...S), x.push(...$t(R, C)), x;
-    }, { data: h, error: a, isValidating: l } = Xt(o, async () => {
-      var R, S, C, x;
+    const d = (R, k, E) => {
+      const L = [];
+      return k && L.push(...k), L.push(...Ut(R, E)), L;
+    }, { data: h, error: a, isValidating: l } = jt(o, async () => {
+      var R, k, E, L;
       try {
         let {
-          datasource: E,
-          ...D
+          datasource: D,
+          ...x
         } = t.query;
-        E || (E = "basic");
-        const B = d(E, t.query.filters, t.context.filters);
-        let I = t.query.time_range;
-        I ? I.tz || (I = {
-          ...I,
+        D || (D = "basic");
+        const N = d(D, t.query.filters, t.context.filters);
+        let z = t.query.time_range;
+        z ? z.tz || (z = {
+          ...z,
           tz: t.context.tz
-        }) : I = {
+        }) : z = {
           ...t.context.timeSpec,
           tz: t.context.tz
         };
-        const Re = {
-          datasource: E,
+        const q = {
+          datasource: D,
           query: {
-            ...D,
-            time_range: I,
-            filters: B
+            ...x,
+            time_range: z,
+            filters: N
           }
         };
-        return r == null ? void 0 : r.queryFn(Re, n);
-      } catch (E) {
-        p.value = ((S = (R = E == null ? void 0 : E.response) == null ? void 0 : R.data) == null ? void 0 : S.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((x = (C = E == null ? void 0 : E.response) == null ? void 0 : C.data) == null ? void 0 : x.message) || (E == null ? void 0 : E.message);
+        return r == null ? void 0 : r.queryFn(q, n);
+      } catch (D) {
+        p.value = ((k = (R = D == null ? void 0 : D.response) == null ? void 0 : R.data) == null ? void 0 : k.message) === "Range not allowed for this tier" ? s.t("queryDataProvider.timeRangeExceeded") : ((L = (E = D == null ? void 0 : D.response) == null ? void 0 : E.data) == null ? void 0 : L.message) || (D == null ? void 0 : D.message);
       } finally {
         i("queryComplete");
       }
     }, {
       refreshInterval: t.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: f, swrvState: m } = si(h, a, l), p = $(null), y = A(() => f.value === m.ERROR || !!p.value), g = A(() => !t.queryReady || f.value === m.PENDING);
+    }), { state: f, swrvState: m } = ri(h, a, l), p = U(null), y = O(() => f.value === m.ERROR || !!p.value), g = O(() => !t.queryReady || f.value === m.PENDING);
     return Fe(h, (R) => {
       R && i("chart-data", R);
-    }), (R, S) => {
-      const C = ne("KSkeleton"), x = ne("KEmptyState");
-      return g.value || !k(h) && !y.value ? (z(), H(C, {
+    }), (R, k) => {
+      const E = oe("KSkeleton"), L = oe("KEmptyState");
+      return g.value || !S(h) && !y.value ? (C(), H(E, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : y.value ? (z(), H(x, {
+      })) : y.value ? (C(), H(L, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: M(() => [
-          ve(te(p.value), 1)
+        default: P(() => [
+          ue(J(p.value), 1)
         ]),
         _: 1
-      })) : k(h) ? Le(R.$slots, "default", {
+      })) : S(h) ? Me(R.$slots, "default", {
         key: 2,
-        data: k(h)
-      }) : X("", !0);
+        data: S(h)
+      }) : V("", !0);
     };
   }
-}), xi = /* @__PURE__ */ G({
+}), Ci = /* @__PURE__ */ W({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -679,21 +680,21 @@ const Ei = () => {
     refreshCounter: {}
   },
   setup(u) {
-    Ue((i) => ({
+    Ge((i) => ({
       "35a26ebf": `${i.height}px`
     }));
-    const e = u, t = A(() => e.chartOptions.type === "single_value");
-    return (i, s) => (z(), H(Ke, {
+    const e = u, t = O(() => e.chartOptions.type === "single_value");
+    return (i, s) => (C(), H(Ye, {
       context: i.context,
       query: i.query,
       "query-ready": i.queryReady,
       "refresh-counter": i.refreshCounter
     }, {
-      default: M(({ data: r }) => [
-        le("div", {
-          class: Ge(["analytics-chart", { "single-value": t.value }])
+      default: P(({ data: r }) => [
+        ce("div", {
+          class: We(["analytics-chart", { "single-value": t.value }])
         }, [
-          ie(k(Wt), {
+          se(S(Vt), {
             "chart-data": r,
             "chart-options": i.chartOptions,
             "synthetics-data-key": t.value ? void 0 : i.chartOptions.syntheticsDataKey
@@ -703,12 +704,12 @@ const Ei = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), ae = (u, e) => {
+}), he = (u, e) => {
   const t = u.__vccOpts || u;
   for (const [i, s] of e)
     t[i] = s;
   return t;
-}, ot = /* @__PURE__ */ ae(xi, [["__scopeId", "data-v-65cc8607"]]), Ci = { class: "analytics-chart" }, Ri = /* @__PURE__ */ G({
+}, at = /* @__PURE__ */ he(Ci, [["__scopeId", "data-v-65cc8607"]]), Ri = { class: "analytics-chart" }, Ti = /* @__PURE__ */ W({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -721,7 +722,7 @@ const Ei = () => {
   },
   emits: ["edit-tile", "chart-data", "zoom-time-range"],
   setup(u, { emit: e }) {
-    const t = u, i = e, { i18n: s } = ge.useI18n(), { evaluateFeatureFlag: r } = ge.useEvaluateFeatureFlag(), o = r("explore-v4-fine-granularity", !1), n = A(() => ({
+    const t = u, i = e, { i18n: s } = ve.useI18n(), { evaluateFeatureFlag: r } = ve.useEvaluateFeatureFlag(), o = r("explore-v4-fine-granularity", !1), n = O(() => ({
       type: t.chartOptions.type,
       stacked: t.chartOptions.stacked ?? !1,
       chartDatasetColors: t.chartOptions.chartDatasetColors,
@@ -732,34 +733,34 @@ const Ei = () => {
       i("chart-data", a);
     };
     return (a, l) => {
-      const f = ne("KDropdownItem");
-      return z(), H(Ke, {
+      const f = oe("KDropdownItem");
+      return C(), H(Ye, {
         context: a.context,
         query: a.query,
         "query-ready": a.queryReady,
         "refresh-counter": a.refreshCounter,
         onChartData: h
       }, {
-        default: M(({ data: m }) => [
-          le("div", Ci, [
-            ie(k(Vt), mt({
+        default: P(({ data: m }) => [
+          ce("div", Ri, [
+            se(S(Kt), pt({
               "allow-csv-export": a.chartOptions.allowCsvExport,
               "chart-data": m,
               "chart-options": n.value,
               "legend-position": "bottom",
               "show-menu": a.context.editable,
               "synthetics-data-key": a.chartOptions.syntheticsDataKey,
-              "timeseries-zoom": k(o) && !a.query.time_range,
+              "timeseries-zoom": S(o) && !a.query.time_range,
               "tooltip-title": ""
             }, a.extraProps, {
               onZoomTimeRange: l[0] || (l[0] = (p) => i("zoom-time-range", p))
-            }), pt({ _: 2 }, [
+            }), yt({ _: 2 }, [
               a.context.editable ? {
                 name: "menu-items",
-                fn: M(() => [
-                  ie(f, { onClick: d }, {
-                    default: M(() => [
-                      ve(te(k(s).t("renderer.edit")), 1)
+                fn: P(() => [
+                  se(f, { onClick: d }, {
+                    default: P(() => [
+                      ue(J(S(s).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -773,7 +774,7 @@ const Ei = () => {
       }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), Ye = /* @__PURE__ */ ae(Ri, [["__scopeId", "data-v-a9ee3db9"]]), at = /* @__PURE__ */ G({
+}), Xe = /* @__PURE__ */ he(Ti, [["__scopeId", "data-v-a9ee3db9"]]), lt = /* @__PURE__ */ W({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -784,7 +785,7 @@ const Ei = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (z(), H(Ye, {
+    return (e, t) => (C(), H(Xe, {
       "chart-options": e.chartOptions,
       context: e.context,
       "extra-props": { showAnnotations: !1 },
@@ -794,7 +795,7 @@ const Ei = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), lt = /* @__PURE__ */ G({
+}), ht = /* @__PURE__ */ W({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -807,7 +808,7 @@ const Ei = () => {
   emits: ["zoom-time-range"],
   setup(u, { emit: e }) {
     const t = e;
-    return (i, s) => (z(), H(Ye, {
+    return (i, s) => (C(), H(Xe, {
       "chart-options": i.chartOptions,
       context: i.context,
       height: i.height,
@@ -817,7 +818,7 @@ const Ei = () => {
       onZoomTimeRange: s[0] || (s[0] = (r) => t("zoom-time-range", r))
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), zi = { class: "metric-card-tile-wrapper" }, Ti = /* @__PURE__ */ G({
+}), zi = { class: "metric-card-tile-wrapper" }, Di = /* @__PURE__ */ W({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -828,7 +829,7 @@ const Ei = () => {
     refreshCounter: {}
   },
   setup(u) {
-    const e = u, t = A(() => {
+    const e = u, t = O(() => {
       const s = e.context.timeSpec;
       if (s.type === "absolute")
         return new Ft({
@@ -843,11 +844,11 @@ const Ei = () => {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const r = bt.get(s.time_range);
+      const r = Et.get(s.time_range);
       if (!r)
         throw new Error("Unknown time range");
       return r;
-    }), i = A(() => {
+    }), i = O(() => {
       var r, o;
       const s = (r = e.query) == null ? void 0 : r.datasource;
       if (s && s !== "advanced" && s !== "basic")
@@ -865,27 +866,27 @@ const Ei = () => {
         refreshCounter: e.refreshCounter
       };
     });
-    return (s, r) => (z(), F("div", zi, [
-      ie(k(Zt), It(Pt(i.value)), {
-        default: M(() => [
-          ie(k(Jt))
+    return (s, r) => (C(), F("div", zi, [
+      se(S(Jt), Pt(qt(i.value)), {
+        default: P(() => [
+          se(S(ei))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), Di = /* @__PURE__ */ ae(Ti, [["__scopeId", "data-v-bd5889d1"]]), ht = "#6c7489", dt = "20px", At = "20px", Si = {
+}), Si = /* @__PURE__ */ he(Di, [["__scopeId", "data-v-bd5889d1"]]), dt = "#6c7489", ut = "20px", Ht = "20px", ki = {
   class: "fallback-entity-link",
   "data-testid": "entity-link-parent"
-}, ut = /* @__PURE__ */ G({
+}, ct = /* @__PURE__ */ W({
   __name: "FallbackEntityLink",
   props: {
     entityLinkData: {}
   },
   setup(u) {
-    return (e, t) => (z(), F("div", Si, te(e.entityLinkData.label), 1));
+    return (e, t) => (C(), F("div", ki, J(e.entityLinkData.label), 1));
   }
-}), ki = /* @__PURE__ */ G({
+}), Ni = /* @__PURE__ */ W({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -896,39 +897,39 @@ const Ei = () => {
     refreshCounter: {}
   },
   setup(u) {
-    const e = u, t = me(oe), i = qt(async () => {
+    const e = u, t = _e(le), i = Bt(async () => {
       if (t != null && t.fetchComponent)
         try {
           return await t.fetchComponent("EntityLink");
         } catch {
-          return ut;
+          return ct;
         }
-      return ut;
+      return ct;
     }), s = (r) => {
       var o;
       if ((o = e.chartOptions) != null && o.entityLink)
         if (r.id.includes(":")) {
           const [n, d] = r.id.split(":");
-          return e.chartOptions.entityLink.replace(di, n).replace(st, d);
+          return e.chartOptions.entityLink.replace(ui, n).replace(rt, d);
         } else
-          return e.chartOptions.entityLink.replace(st, r.id);
+          return e.chartOptions.entityLink.replace(rt, r.id);
       return "";
     };
-    return (r, o) => (z(), H(Ke, {
+    return (r, o) => (C(), H(Ye, {
       context: r.context,
       query: r.query,
       "query-ready": r.queryReady,
       "refresh-counter": r.refreshCounter
     }, {
-      default: M(({ data: n }) => [
-        ie(k(Kt), {
+      default: P(({ data: n }) => [
+        se(S(Yt), {
           data: n,
           "synthetics-data-key": r.chartOptions.syntheticsDataKey
-        }, pt({ _: 2 }, [
+        }, yt({ _: 2 }, [
           e.chartOptions.entityLink ? {
             name: "name",
-            fn: M(({ record: d }) => [
-              ie(k(i), {
+            fn: P(({ record: d }) => [
+              se(S(i), {
                 "entity-link-data": {
                   id: d.id,
                   label: d.name,
@@ -944,7 +945,7 @@ const Ei = () => {
       _: 1
     }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), Ni = /* @__PURE__ */ G({
+}), Ai = /* @__PURE__ */ W({
   __name: "DonutChartRenderer",
   props: {
     query: {},
@@ -955,7 +956,7 @@ const Ei = () => {
     refreshCounter: {}
   },
   setup(u) {
-    return (e, t) => (z(), H(Ye, {
+    return (e, t) => (C(), H(Xe, {
       "chart-options": e.chartOptions,
       context: e.context,
       height: e.height,
@@ -964,60 +965,60 @@ const Ei = () => {
       "refresh-counter": e.refreshCounter
     }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), Ai = ["data-testid"], Hi = {
+}), Hi = ["data-testid"], Oi = {
   key: 0,
   class: "tile-header"
-}, Oi = ["data-testid"], Li = ["data-testid"], Mi = ["data-testid"], Ii = ["data-testid"], Pi = /* @__PURE__ */ G({
+}, Li = ["data-testid"], Mi = ["data-testid"], Ii = ["data-testid"], Pi = ["data-testid"], qi = /* @__PURE__ */ W({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: Ve },
+    height: { default: Ke },
     queryReady: { type: Boolean },
     refreshCounter: {},
     tileId: {}
   },
-  emits: ["edit-tile", "remove-tile", "zoom-time-range"],
+  emits: ["edit-tile", "duplicate-tile", "remove-tile", "zoom-time-range"],
   setup(u, { emit: e }) {
-    Ue((w) => ({
-      "050eccb7": `${w.height}px`
+    Ge((v) => ({
+      "32c3e459": `${v.height}px`
     }));
-    const t = parseInt(At, 10), i = u, s = e, r = me(oe), { i18n: o } = ge.useI18n(), n = $(), d = $(!1), h = $(), a = $(!1), l = $("");
-    We(async () => {
-      var w;
-      l.value = await ((w = r == null ? void 0 : r.exploreBaseUrl) == null ? void 0 : w.call(r)) ?? "";
+    const t = parseInt(Ht, 10), i = u, s = e, r = _e(le), { i18n: o } = ve.useI18n(), n = U(), d = U(!1), h = U(), a = U(!1), l = U("");
+    Ve(async () => {
+      var v;
+      l.value = await ((v = r == null ? void 0 : r.exploreBaseUrl) == null ? void 0 : v.call(r)) ?? "";
     }), Fe(() => i.definition, async () => {
-      await yt(), h.value && (a.value = h.value.scrollWidth > h.value.clientWidth);
+      await vt(), h.value && (a.value = h.value.scrollWidth > h.value.clientWidth);
     }, { immediate: !0, deep: !0 });
-    const f = A(() => {
+    const f = O(() => {
       if (!l.value || !i.definition.query || !y.value)
         return "";
-      const w = [...i.context.filters, ...i.definition.query.filters ?? []], Q = i.definition.query.dimensions ?? [], Y = /* @__PURE__ */ new Set(["portal", "api"]);
-      if (w.some((se) => "dimension" in se && Y.has(se.dimension) || "field" in se && Y.has(se.field)) || Q.some((se) => Y.has(se)))
+      const v = [...i.context.filters, ...i.definition.query.filters ?? []], Z = i.definition.query.dimensions ?? [], j = /* @__PURE__ */ new Set(["portal", "api"]);
+      if (v.some((re) => "dimension" in re && j.has(re.dimension) || "field" in re && j.has(re.field)) || Z.some((re) => j.has(re)))
         return "";
-      const Ie = {
-        filters: w,
+      const Pe = {
+        filters: v,
         metrics: i.definition.query.metrics ?? [],
-        dimensions: Q,
+        dimensions: Z,
         time_range: i.definition.query.time_range || i.context.timeSpec,
-        granularity: i.definition.query.granularity || x.value
-      }, pe = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
-      return `${l.value}?q=${JSON.stringify(Ie)}&d=${pe}&c=${i.definition.chart.type}`;
-    }), m = A(() => o.t("csvExport.defaultFilename")), p = A(() => y.value && (g.value || i.context.editable) || !!C.value), y = A(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), g = A(() => !!f.value || "allowCsvExport" in i.definition.chart && i.definition.chart.allowCsvExport || i.context.editable), R = {
-      timeseries_line: lt,
-      timeseries_bar: lt,
-      horizontal_bar: at,
-      vertical_bar: at,
-      gauge: ot,
-      donut: Ni,
-      golden_signals: Di,
-      top_n: ki,
+        granularity: i.definition.query.granularity || L.value
+      }, de = ["advanced", "ai"].includes(i.definition.query.datasource) ? i.definition.query.datasource : "advanced";
+      return `${l.value}?q=${JSON.stringify(Pe)}&d=${de}&c=${i.definition.chart.type}`;
+    }), m = O(() => o.t("csvExport.defaultFilename")), p = O(() => y.value && (g.value || i.context.editable) || !!E.value), y = O(() => !["golden_signals", "top_n", "gauge"].includes(i.definition.chart.type)), g = O(() => !!f.value || "allowCsvExport" in i.definition.chart && i.definition.chart.allowCsvExport || i.context.editable), R = {
+      timeseries_line: ht,
+      timeseries_bar: ht,
+      horizontal_bar: lt,
+      vertical_bar: lt,
+      gauge: at,
+      donut: Ai,
+      golden_signals: Si,
+      top_n: Ni,
       slottable: void 0,
-      single_value: ot
-    }, S = A(() => {
-      const w = R[i.definition.chart.type];
-      return w && {
-        component: w,
+      single_value: at
+    }, k = O(() => {
+      const v = R[i.definition.chart.type];
+      return v && {
+        component: v,
         rendererProps: {
           query: i.definition.query,
           context: i.context,
@@ -1027,142 +1028,154 @@ const Ei = () => {
           refreshCounter: i.refreshCounter
         }
       };
-    }), C = A(() => {
-      var Q;
-      const w = (Q = i.definition.query) == null ? void 0 : Q.time_range;
-      if ((w == null ? void 0 : w.type) === "relative") {
-        const Y = bt.get(Ut[w.time_range]);
-        return Y ? Y.display : (console.warn("Did not recognize the given relative time range:", w.time_range), w.time_range);
-      } else if ((w == null ? void 0 : w.type) === "absolute") {
-        const Y = w.tz || "Etc/UTC";
-        return `${it(w.start, { short: !0, tz: Y })} - ${it(w.end, { short: !0, tz: Y })}`;
+    }), E = O(() => {
+      var Z;
+      const v = (Z = i.definition.query) == null ? void 0 : Z.time_range;
+      if ((v == null ? void 0 : v.type) === "relative") {
+        const j = Et.get(Gt[v.time_range]);
+        return j ? j.display : (console.warn("Did not recognize the given relative time range:", v.time_range), v.time_range);
+      } else if ((v == null ? void 0 : v.type) === "absolute") {
+        const j = v.tz || "Etc/UTC";
+        return `${st(v.start, { short: !0, tz: j })} - ${st(v.end, { short: !0, tz: j })}`;
       }
       return null;
-    }), x = A(() => n.value ? Gt(n.value.meta.granularity_ms) : void 0), E = () => {
+    }), L = O(() => n.value ? Wt(n.value.meta.granularity_ms) : void 0), D = () => {
       s("edit-tile", i.definition);
-    }, D = () => {
+    }, x = () => {
+      s("duplicate-tile", i.definition);
+    }, N = () => {
       s("remove-tile", i.definition);
-    }, B = (w) => {
-      n.value = w;
-    }, I = (w) => {
-      d.value = w;
-    }, Re = () => {
-      I(!0);
+    }, z = (v) => {
+      n.value = v;
+    }, q = (v) => {
+      d.value = v;
+    }, ae = () => {
+      q(!0);
     };
-    return (w, Q) => {
-      const Y = ne("KTooltip"), Ie = ne("KBadge"), pe = ne("KDropdownItem"), se = ne("KDropdown");
-      return z(), F("div", {
-        class: Ge(["tile-boundary", { editable: w.context.editable }]),
-        "data-testid": `tile-${w.tileId}`
+    return (v, Z) => {
+      const j = oe("KTooltip"), Pe = oe("KBadge"), de = oe("KDropdownItem"), re = oe("KDropdown");
+      return C(), F("div", {
+        class: We(["tile-boundary", { editable: v.context.editable }]),
+        "data-testid": `tile-${v.tileId}`
       }, [
-        w.definition.chart.type !== "slottable" ? (z(), F("div", Hi, [
-          ie(Y, {
+        v.definition.chart.type !== "slottable" ? (C(), F("div", Oi, [
+          se(j, {
             class: "title-tooltip",
             disabled: !a.value,
             "max-width": "500",
-            text: w.definition.chart.chartTitle
+            text: v.definition.chart.chartTitle
           }, {
-            default: M(() => [
-              le("div", {
+            default: P(() => [
+              ce("div", {
                 ref_key: "titleRef",
                 ref: h,
                 class: "title"
-              }, te(w.definition.chart.chartTitle), 513)
+              }, J(v.definition.chart.chartTitle), 513)
             ]),
             _: 1
           }, 8, ["disabled", "text"]),
-          p.value ? (z(), F("div", {
+          p.value ? (C(), F("div", {
             key: 0,
             class: "tile-actions",
-            "data-testid": `tile-actions-${w.tileId}`
+            "data-testid": `tile-actions-${v.tileId}`
           }, [
-            C.value ? (z(), H(Ie, { key: 0 }, {
-              default: M(() => [
-                ve(te(C.value), 1)
+            E.value ? (C(), H(Pe, { key: 0 }, {
+              default: P(() => [
+                ue(J(E.value), 1)
               ]),
               _: 1
-            })) : X("", !0),
-            y.value && w.context.editable ? (z(), H(k(ei), {
+            })) : V("", !0),
+            y.value && v.context.editable ? (C(), H(S(ti), {
               key: 1,
               class: "edit-icon",
-              color: k(ht),
-              "data-testid": `edit-tile-${w.tileId}`,
-              size: k(dt),
-              onClick: E
-            }, null, 8, ["color", "data-testid", "size"])) : X("", !0),
-            y.value && g.value ? (z(), H(se, {
+              color: S(dt),
+              "data-testid": `edit-tile-${v.tileId}`,
+              size: S(ut),
+              onClick: D
+            }, null, 8, ["color", "data-testid", "size"])) : V("", !0),
+            y.value && g.value ? (C(), H(re, {
               key: 2,
               class: "dropdown",
-              "data-testid": `chart-action-menu-${w.tileId}`,
+              "data-testid": `chart-action-menu-${v.tileId}`,
               "kpop-attributes": { placement: "bottom-end" }
             }, {
-              items: M(() => [
-                f.value ? (z(), H(pe, {
+              items: P(() => [
+                f.value ? (C(), H(de, {
                   key: 0,
-                  "data-testid": `chart-jump-to-explore-${w.tileId}`,
-                  item: { label: k(o).t("jumpToExplore"), to: f.value }
-                }, null, 8, ["data-testid", "item"])) : X("", !0),
-                !("allowCsvExport" in w.definition.chart) || w.definition.chart.allowCsvExport ? (z(), H(pe, {
+                  "data-testid": `chart-jump-to-explore-${v.tileId}`,
+                  item: { label: S(o).t("jumpToExplore"), to: f.value }
+                }, null, 8, ["data-testid", "item"])) : V("", !0),
+                !("allowCsvExport" in v.definition.chart) || v.definition.chart.allowCsvExport ? (C(), H(de, {
                   key: 1,
                   class: "chart-export-button",
-                  "data-testid": `chart-csv-export-${w.tileId}`,
-                  onClick: Q[0] || (Q[0] = (Qe) => Re())
+                  "data-testid": `chart-csv-export-${v.tileId}`,
+                  onClick: Z[0] || (Z[0] = (Ze) => ae())
                 }, {
-                  default: M(() => [
-                    le("span", {
+                  default: P(() => [
+                    ce("span", {
                       class: "chart-export-trigger",
-                      "data-testid": `csv-export-button-${w.tileId}`
-                    }, te(k(o).t("csvExport.exportAsCsv")), 9, Li)
+                      "data-testid": `csv-export-button-${v.tileId}`
+                    }, J(S(o).t("csvExport.exportAsCsv")), 9, Mi)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : X("", !0),
-                w.context.editable ? (z(), H(pe, {
+                }, 8, ["data-testid"])) : V("", !0),
+                v.context.editable ? (C(), H(de, {
                   key: 2,
-                  "data-testid": `remove-tile-${w.tileId}`,
-                  onClick: D
+                  "data-testid": `duplicate-tile-${v.tileId}`,
+                  onClick: x
+                }, {
+                  default: P(() => [
+                    ue(J(S(o).t("renderer.duplicateTile")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["data-testid"])) : V("", !0),
+                v.context.editable ? (C(), H(de, {
+                  key: 3,
+                  "data-testid": `remove-tile-${v.tileId}`,
+                  onClick: N
                 }, {
-                  default: M(() => [
-                    ve(te(k(o).t("renderer.remove")), 1)
+                  default: P(() => [
+                    ue(J(S(o).t("renderer.remove")), 1)
                   ]),
                   _: 1
-                }, 8, ["data-testid"])) : X("", !0)
+                }, 8, ["data-testid"])) : V("", !0)
               ]),
-              default: M(() => [
-                ie(k(ti), {
+              default: P(() => [
+                se(S(ii), {
                   class: "kebab-action-menu",
-                  color: k(ht),
-                  "data-testid": `kebab-action-menu-${w.tileId}`,
-                  size: k(dt)
+                  color: S(dt),
+                  "data-testid": `kebab-action-menu-${v.tileId}`,
+                  size: S(ut)
                 }, null, 8, ["color", "data-testid", "size"])
               ]),
               _: 1
-            }, 8, ["data-testid"])) : X("", !0)
-          ], 8, Oi)) : "description" in w.definition.chart ? (z(), F("div", {
+            }, 8, ["data-testid"])) : V("", !0)
+          ], 8, Li)) : "description" in v.definition.chart ? (C(), F("div", {
             key: 1,
             class: "header-description",
-            "data-testid": `tile-description-${w.tileId}`
-          }, te(w.definition.chart.description), 9, Mi)) : X("", !0),
-          d.value ? (z(), H(k(Yt), {
+            "data-testid": `tile-description-${v.tileId}`
+          }, J(v.definition.chart.description), 9, Ii)) : V("", !0),
+          d.value ? (C(), H(S(Xt), {
             key: 2,
             "chart-data": n.value,
-            "data-testid": `csv-export-modal-${w.tileId}`,
+            "data-testid": `csv-export-modal-${v.tileId}`,
             filename: m.value,
-            onToggleModal: I
-          }, null, 8, ["chart-data", "data-testid", "filename"])) : X("", !0)
-        ])) : X("", !0),
-        le("div", {
+            onToggleModal: q
+          }, null, 8, ["chart-data", "data-testid", "filename"])) : V("", !0)
+        ])) : V("", !0),
+        ce("div", {
           class: "tile-content",
-          "data-testid": `tile-content-${w.tileId}`
+          "data-testid": `tile-content-${v.tileId}`
         }, [
-          S.value ? (z(), H(vt(S.value.component), mt({ key: 0 }, S.value.rendererProps, {
-            onChartData: B,
-            onZoomTimeRange: Q[1] || (Q[1] = (Qe) => s("zoom-time-range", Qe))
-          }), null, 16)) : X("", !0)
-        ], 8, Ii)
-      ], 10, Ai);
+          k.value ? (C(), H(_t(k.value.component), pt({ key: 0 }, k.value.rendererProps, {
+            onChartData: z,
+            onZoomTimeRange: Z[1] || (Z[1] = (Ze) => s("zoom-time-range", Ze))
+          }), null, 16)) : V("", !0)
+        ], 8, Pi)
+      ], 10, Hi);
     };
   }
-}), qi = /* @__PURE__ */ ae(Pi, [["__scopeId", "data-v-caafa72e"]]), Bi = (u, e, t) => {
+}), Bi = /* @__PURE__ */ he(qi, [["__scopeId", "data-v-e670d00d"]]), $i = (u, e, t) => {
   const i = /* @__PURE__ */ new Map();
   t.forEach((r) => {
     const o = r.layout.position.row, n = i.get(o), d = r.layout.size.rows === 1 && !!r.layout.size.fitToContent;
@@ -1172,7 +1185,7 @@ const Ei = () => {
   for (let r = 0; r < u; r++)
     i.get(r) ? s.push("auto") : s.push(`${e}px`);
   return s;
-}, $i = /* @__PURE__ */ G({
+}, Ui = /* @__PURE__ */ W({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -1182,7 +1195,7 @@ const Ei = () => {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => Ve
+      default: () => Ke
     },
     tiles: {
       type: Array,
@@ -1190,24 +1203,24 @@ const Ei = () => {
     }
   },
   setup(u) {
-    Ue((n) => ({
+    Ge((n) => ({
       "3bc5e939": u.gridSize.cols,
       "77aa3028": r.value
     }));
-    const e = u, t = $(null), i = $(0), s = new ResizeObserver((n) => {
+    const e = u, t = U(null), i = U(0), s = new ResizeObserver((n) => {
       window.requestAnimationFrame(() => {
         !Array.isArray(n) || !n.length || (i.value = n[0].contentRect.width);
       });
     });
-    We(() => {
+    Ve(() => {
       t.value && s.observe(t.value);
-    }), $e(() => {
+    }), Ue(() => {
       t.value && s.unobserve(t.value);
     });
-    const r = A(() => {
+    const r = O(() => {
       var d;
-      return Bi((d = e.gridSize) == null ? void 0 : d.rows, e.tileHeight, e.tiles).join(" ");
-    }), o = A(() => e.tiles.map((n, d) => ({
+      return $i((d = e.gridSize) == null ? void 0 : d.rows, e.tileHeight, e.tiles).join(" ");
+    }), o = O(() => e.tiles.map((n, d) => ({
       key: `tile-${d}`,
       tile: n,
       style: {
@@ -1217,27 +1230,27 @@ const Ei = () => {
         "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
       }
     })));
-    return (n, d) => (z(), F("div", {
+    return (n, d) => (C(), F("div", {
       ref_key: "gridContainer",
       ref: t,
       class: "kong-ui-public-grid-layout"
     }, [
-      (z(!0), F(_t, null, wt(o.value, (h) => (z(), F("div", {
+      (C(!0), F(wt, null, bt(o.value, (h) => (C(), F("div", {
         key: h.key,
-        class: Ge(["grid-cell", {
+        class: We(["grid-cell", {
           "empty-cell": !h.tile
         }]),
-        style: et(h.style)
+        style: tt(h.style)
       }, [
-        Le(n.$slots, "tile", {
-          style: et(h.style),
+        Me(n.$slots, "tile", {
+          style: tt(h.style),
           tile: h.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), Fi = /* @__PURE__ */ ae($i, [["__scopeId", "data-v-f43eb7b8"]]);
-function Ui(u, e, t, i, s) {
+}), Fi = /* @__PURE__ */ he(Ui, [["__scopeId", "data-v-f43eb7b8"]]);
+function Gi(u, e, t, i, s) {
   const r = (...o) => (console.warn("gridstack.js: Function `" + t + "` is deprecated in " + s + " and has been replaced with `" + i + "`. It will be **removed** in a future release"), e.apply(u, o));
   return r.prototype = e.prototype, r;
 }
@@ -1278,11 +1291,11 @@ class c {
     const i = c.createDiv(["grid-stack-item", e]), s = c.createDiv(["grid-stack-item-content"], i);
     return t.lazyLoad || ((n = (o = t.grid) == null ? void 0 : o.opts) == null ? void 0 : n.lazyLoad) && t.lazyLoad !== !1 ? t.visibleObservable || (t.visibleObservable = new IntersectionObserver(([d]) => {
       var h;
-      d.isIntersecting && ((h = t.visibleObservable) == null || h.disconnect(), delete t.visibleObservable, _.renderCB(s, t));
+      d.isIntersecting && ((h = t.visibleObservable) == null || h.disconnect(), delete t.visibleObservable, w.renderCB(s, t));
     }), window.setTimeout(() => {
       var d;
       return (d = t.visibleObservable) == null ? void 0 : d.observe(i);
-    })) : _.renderCB(s, t), i;
+    })) : w.renderCB(s, t), i;
   }
   /** create a div with the given classes */
   static createDiv(e, t) {
@@ -1599,7 +1612,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 Z {
+class ee {
   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;
   }
@@ -1777,7 +1790,7 @@ class Z {
    * @param resizing if out of bound, resize down or move into the grid to fit ?
    */
   prepareNode(e, t) {
-    e._id = e._id ?? Z._idSeq++;
+    e._id = e._id ?? ee._idSeq++;
     const i = e.id;
     if (i) {
       let r = 1;
@@ -1872,7 +1885,7 @@ class Z {
     if (t.pack = !0, !this.maxRow)
       return this.moveNode(e, t);
     let i;
-    const s = new Z({
+    const s = new ee({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((o) => o._id === e._id ? (i = { ...o }, i) : { ...o })
@@ -1894,7 +1907,7 @@ class Z {
   willItFit(e) {
     if (delete e._willFitPos, !this.maxRow)
       return !0;
-    const t = new Z({
+    const t = new ee({
       column: this.column,
       float: this.float,
       nodes: this.nodes.map((s) => ({ ...s }))
@@ -2030,7 +2043,7 @@ class Z {
     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) ?? Z._idSeq++;
+        r._id = (n == null ? void 0 : n._id) ?? ee._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;
@@ -2041,7 +2054,7 @@ class Z {
    * @param column corresponding column index to save it under
    */
   cacheOneLayout(e, t) {
-    e._id = e._id ?? Z._idSeq++;
+    e._id = e._id ?? ee._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);
@@ -2065,8 +2078,8 @@ class Z {
     return this;
   }
 }
-Z._idSeq = 0;
-const U = {
+ee._idSeq = 0;
+const G = {
   alwaysShowResizeHandle: "mobile",
   animate: !0,
   auto: !0,
@@ -2098,10 +2111,10 @@ const U = {
 };
 class b {
 }
-const j = 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 J {
+const Q = typeof window < "u" && typeof document < "u" && ("ontouchstart" in document || "ontouchstart" in window || window.DocumentTouch && document instanceof window.DocumentTouch || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0);
+class te {
 }
-function Se(u, e) {
+function ke(u, e) {
   if (u.touches.length > 1)
     return;
   u.cancelable && u.preventDefault();
@@ -2139,7 +2152,7 @@ function Se(u, e) {
     // relatedTarget
   ), u.target.dispatchEvent(i);
 }
-function Ht(u, e) {
+function Ot(u, e) {
   u.cancelable && u.preventDefault();
   const t = document.createEvent("MouseEvents");
   t.initMouseEvent(
@@ -2175,46 +2188,46 @@ function Ht(u, e) {
     // relatedTarget
   ), u.target.dispatchEvent(t);
 }
-function ke(u) {
-  J.touchHandled || (J.touchHandled = !0, Se(u, "mousedown"));
-}
 function Ne(u) {
-  J.touchHandled && Se(u, "mousemove");
+  te.touchHandled || (te.touchHandled = !0, ke(u, "mousedown"));
 }
 function Ae(u) {
-  if (!J.touchHandled)
+  te.touchHandled && ke(u, "mousemove");
+}
+function He(u) {
+  if (!te.touchHandled)
     return;
-  J.pointerLeaveTimeout && (window.clearTimeout(J.pointerLeaveTimeout), delete J.pointerLeaveTimeout);
+  te.pointerLeaveTimeout && (window.clearTimeout(te.pointerLeaveTimeout), delete te.pointerLeaveTimeout);
   const e = !!b.dragElement;
-  Se(u, "mouseup"), e || Se(u, "click"), J.touchHandled = !1;
+  ke(u, "mouseup"), e || ke(u, "click"), te.touchHandled = !1;
 }
-function He(u) {
+function Oe(u) {
   u.pointerType !== "mouse" && u.target.releasePointerCapture(u.pointerId);
 }
-function ct(u) {
-  b.dragElement && u.pointerType !== "mouse" && Ht(u, "mouseenter");
-}
 function ft(u) {
-  b.dragElement && u.pointerType !== "mouse" && (J.pointerLeaveTimeout = window.setTimeout(() => {
-    delete J.pointerLeaveTimeout, Ht(u, "mouseleave");
+  b.dragElement && u.pointerType !== "mouse" && Ot(u, "mouseenter");
+}
+function gt(u) {
+  b.dragElement && u.pointerType !== "mouse" && (te.pointerLeaveTimeout = window.setTimeout(() => {
+    delete te.pointerLeaveTimeout, Ot(u, "mouseleave");
   }, 10));
 }
-class Me {
+class Ie {
   constructor(e, t, i) {
     this.host = e, this.dir = t, this.option = i, this.moving = !1, this._mouseDown = this._mouseDown.bind(this), this._mouseMove = this._mouseMove.bind(this), this._mouseUp = this._mouseUp.bind(this), this._keyEvent = this._keyEvent.bind(this), this._init();
   }
   /** @internal */
   _init() {
     const e = this.el = document.createElement("div");
-    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Me.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), j && (this.el.addEventListener("touchstart", ke), this.el.addEventListener("pointerdown", He)), this;
+    return e.classList.add("ui-resizable-handle"), e.classList.add(`${Ie.prefix}${this.dir}`), e.style.zIndex = "100", e.style.userSelect = "none", this.host.appendChild(this.el), this.el.addEventListener("mousedown", this._mouseDown), Q && (this.el.addEventListener("touchstart", Ne), this.el.addEventListener("pointerdown", Oe)), 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), j && (this.el.removeEventListener("touchstart", ke), this.el.removeEventListener("pointerdown", He)), this.host.removeChild(this.el), delete this.el, delete this.host, this;
+    return this.moving && this._mouseUp(this.mouseDownEvent), this.el.removeEventListener("mousedown", this._mouseDown), Q && (this.el.removeEventListener("touchstart", Ne), this.el.removeEventListener("pointerdown", Oe)), 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), j && (this.el.addEventListener("touchmove", Ne), this.el.addEventListener("touchend", Ae)), e.stopPropagation(), e.preventDefault();
+    this.mouseDownEvent = e, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Q && (this.el.addEventListener("touchmove", Ae), this.el.addEventListener("touchend", He)), e.stopPropagation(), e.preventDefault();
   }
   /** @internal */
   _mouseMove(e) {
@@ -2223,7 +2236,7 @@ class Me {
   }
   /** @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), j && (this.el.removeEventListener("touchmove", Ne), this.el.removeEventListener("touchend", Ae)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
+    this.moving && (this._triggerEvent("stop", e), document.removeEventListener("keydown", this._keyEvent)), document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Q && (this.el.removeEventListener("touchmove", Ae), this.el.removeEventListener("touchend", He)), delete this.moving, delete this.mouseDownEvent, e.stopPropagation(), e.preventDefault();
   }
   /** @internal call when keys are being pressed - use Esc to cancel */
   _keyEvent(e) {
@@ -2235,8 +2248,8 @@ class Me {
     return this.option[e] && this.option[e](t), this;
   }
 }
-Me.prefix = "ui-resizable-";
-class Xe {
+Ie.prefix = "ui-resizable-";
+class je {
   constructor() {
     this._eventRegister = {};
   }
@@ -2264,7 +2277,7 @@ class Xe {
       return this._eventRegister[e](t);
   }
 }
-class _e extends Xe {
+class be extends je {
   // 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 = () => {
@@ -2334,7 +2347,7 @@ class _e extends Xe {
   }
   /** @internal */
   _setupHandlers() {
-    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Me(this.el, e, {
+    return this.handlers = this.option.handles.split(",").map((e) => e.trim()).map((e) => new Ie(this.el, e, {
       start: (t) => {
         this._resizeStart(t);
       },
@@ -2365,7 +2378,7 @@ class _e extends Xe {
   }
   /** @internal */
   _setupHelper() {
-    this.elOriginStyleVal = _e._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
+    this.elOriginStyleVal = be._originStyleProp.map((i) => this.el.style[i]), this.parentOriginStylePosition = this.el.parentElement.style.position;
     const e = this.el.parentElement, t = c.getValuesFromTransformedElement(e);
     return this.rectScale = {
       x: t.xScale,
@@ -2374,7 +2387,7 @@ class _e extends Xe {
   }
   /** @internal */
   _cleanHelper() {
-    return _e._originStyleProp.forEach((e, t) => {
+    return be._originStyleProp.forEach((e, t) => {
       this.el.style[e] = this.elOriginStyleVal[t] || null;
     }), this.el.parentElement.style.position = this.parentOriginStylePosition || null, this;
   }
@@ -2413,9 +2426,9 @@ class _e extends Xe {
     return this.handlers.forEach((e) => e.destroy()), delete this.handlers, this;
   }
 }
-_e._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
-const Gi = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
-class we extends Xe {
+be._originStyleProp = ["width", "height", "position", "left", "top", "opacity", "zIndex"];
+const Wi = 'input,textarea,button,select,option,[contenteditable="true"],.ui-resizable-handle';
+class Ee extends je {
   constructor(e, t = {}) {
     var r;
     super(), this.el = e, this.option = t, this.dragTransform = {
@@ -2435,12 +2448,12 @@ class we extends Xe {
   }
   enable() {
     this.disabled !== !1 && (super.enable(), this.dragEls.forEach((e) => {
-      e.addEventListener("mousedown", this._mouseDown), j && (e.addEventListener("touchstart", ke), e.addEventListener("pointerdown", He));
+      e.addEventListener("mousedown", this._mouseDown), Q && (e.addEventListener("touchstart", Ne), e.addEventListener("pointerdown", Oe));
     }), this.el.classList.remove("ui-draggable-disabled"));
   }
   disable(e = !1) {
     this.disabled !== !0 && (super.disable(), this.dragEls.forEach((t) => {
-      t.removeEventListener("mousedown", this._mouseDown), j && (t.removeEventListener("touchstart", ke), t.removeEventListener("pointerdown", He));
+      t.removeEventListener("mousedown", this._mouseDown), Q && (t.removeEventListener("touchstart", Ne), t.removeEventListener("pointerdown", Oe));
     }), e || this.el.classList.add("ui-draggable-disabled"));
   }
   destroy() {
@@ -2452,7 +2465,7 @@ class we extends Xe {
   /** @internal call when mouse goes down before a dragstart happens */
   _mouseDown(e) {
     if (!b.mouseHandled)
-      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Gi) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete b.dragElement, delete b.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), j && (e.currentTarget.addEventListener("touchmove", Ne), e.currentTarget.addEventListener("touchend", Ae)), e.preventDefault(), document.activeElement && document.activeElement.blur(), b.mouseHandled = !0), !0;
+      return e.button !== 0 || !this.dragEls.find((t) => t === e.target) && e.target.closest(Wi) || this.option.cancel && e.target.closest(this.option.cancel) || (this.mouseDownEvent = e, delete this.dragging, delete b.dragElement, delete b.dropElement, document.addEventListener("mousemove", this._mouseMove, { capture: !0, passive: !0 }), document.addEventListener("mouseup", this._mouseUp, !0), Q && (e.currentTarget.addEventListener("touchmove", Ae), e.currentTarget.addEventListener("touchend", He)), e.preventDefault(), document.activeElement && document.activeElement.blur(), b.mouseHandled = !0), !0;
   }
   /** @internal method to call actual drag event */
   _callDrag(e) {
@@ -2483,7 +2496,7 @@ class we extends Xe {
   /** @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), j && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Ne, !0), e.currentTarget.removeEventListener("touchend", Ae, !0)), this.dragging) {
+    if (document.removeEventListener("mousemove", this._mouseMove, !0), document.removeEventListener("mouseup", this._mouseUp, !0), Q && e.currentTarget && (e.currentTarget.removeEventListener("touchmove", Ae, !0), e.currentTarget.removeEventListener("touchend", He, !0)), this.dragging) {
       delete this.dragging, (t = this.el.gridstackNode) == null || delete t._origRotate, document.removeEventListener("keydown", this._keyEvent), ((i = b.dropElement) == null ? void 0 : i.el) === this.el.parentElement && delete b.dropElement, this.helperContainment.style.position = this.parentOriginStylePosition || null, this.helper !== this.el && this.helper.remove(), this._removeHelperStyle();
       const s = c.initEvent(e, { target: this.el, type: "dragstop" });
       this.option.stop && this.option.stop(s), this.triggerEvent("dragstop", s), b.dropElement && b.dropElement.drop(e);
@@ -2505,7 +2518,7 @@ class we extends Xe {
   /** @internal create a clone copy (or user defined method) of the original drag item if set */
   _createHelper() {
     let e = this.el;
-    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = we.originStyleProp.map((t) => this.el.style[t]), e;
+    return typeof this.option.helper == "function" ? e = this.option.helper(this.el) : this.option.helper === "clone" && (e = c.cloneNode(this.el)), document.body.contains(e) || c.appendTo(e, this.option.appendTo === "parent" ? this.el.parentElement : this.option.appendTo), this.dragElementOriginStyle = Ee.originStyleProp.map((t) => this.el.style[t]), e;
   }
   /** @internal set the fix position of the dragged item */
   _setupHelperStyle(e) {
@@ -2522,7 +2535,7 @@ class we extends Xe {
     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", we.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
+      i.style.transition = this.dragElementOriginStyle.transition = "none", Ee.originStyleProp.forEach((r) => i.style[r] = this.dragElementOriginStyle[r] || null), setTimeout(() => i.style.transition = s, 50);
     }
     return delete this.dragElementOriginStyle, this;
   }
@@ -2564,8 +2577,8 @@ class we extends Xe {
     };
   }
 }
-we.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
-class Wi extends Xe {
+Ee.originStyleProp = ["width", "height", "transform", "transform-origin", "transition", "pointerEvents", "position", "left", "top", "minWidth", "willChange"];
+class Vi extends je {
   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();
   }
@@ -2576,10 +2589,10 @@ class Wi extends Xe {
     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), j && (this.el.addEventListener("pointerenter", ct), this.el.addEventListener("pointerleave", ft)));
+    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), Q && (this.el.addEventListener("pointerenter", ft), this.el.addEventListener("pointerleave", gt)));
   }
   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), j && (this.el.removeEventListener("pointerenter", ct), this.el.removeEventListener("pointerleave", ft)));
+    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), Q && (this.el.removeEventListener("pointerenter", ft), this.el.removeEventListener("pointerleave", gt)));
   }
   destroy() {
     this.disable(!0), this.el.classList.remove("ui-droppable"), this.el.classList.remove("ui-droppable-disabled"), super.destroy();
@@ -2631,9 +2644,9 @@ class Wi extends Xe {
     };
   }
 }
-class je {
+class Qe {
   static init(e) {
-    return e.ddElement || (e.ddElement = new je(e)), e.ddElement;
+    return e.ddElement || (e.ddElement = new Qe(e)), e.ddElement;
   }
   constructor(e) {
     this.el = e;
@@ -2645,25 +2658,25 @@ class je {
     return this.ddDraggable && ["drag", "dragstart", "dragstop"].indexOf(e) > -1 ? this.ddDraggable.off(e) : this.ddDroppable && ["drop", "dropover", "dropout"].indexOf(e) > -1 ? this.ddDroppable.off(e) : this.ddResizable && ["resizestart", "resize", "resizestop"].indexOf(e) > -1 && this.ddResizable.off(e), this;
   }
   setupDraggable(e) {
-    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new we(this.el, e), this;
+    return this.ddDraggable ? this.ddDraggable.updateOption(e) : this.ddDraggable = new Ee(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 _e(this.el, e), this;
+    return this.ddResizable ? this.ddResizable.updateOption(e) : this.ddResizable = new be(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 Wi(this.el, e), this;
+    return this.ddDroppable ? this.ddDroppable.updateOption(e) : this.ddDroppable = new Vi(this.el, e), this;
   }
   cleanDroppable() {
     return this.ddDroppable && (this.ddDroppable.destroy(), delete this.ddDroppable), this;
   }
 }
-class Vi {
+class Ki {
   resizable(e, t, i, s) {
     return this._getDDElements(e).forEach((r) => {
       if (t === "disable" || t === "enable")
@@ -2744,7 +2757,7 @@ class Vi {
     const i = c.getElements(e);
     if (!i.length)
       return [];
-    const s = i.map((r) => r.ddElement || (t ? je.init(r) : null));
+    const s = i.map((r) => r.ddElement || (t ? Qe.init(r) : null));
     return t || s.filter((r) => r), s;
   }
 }
@@ -2755,8 +2768,8 @@ class Vi {
  * Copyright (c) 2021-2024  Alain Dumesny
  * see root license https://github.com/gridstack/gridstack.js/tree/master/LICENSE
  */
-const P = new Vi();
-class _ {
+const B = new Ki();
+class w {
   /**
    * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will
    * simply return the existing instance (ignore any passed options). There is also an initAll() version that support
@@ -2773,8 +2786,8 @@ class _ {
   static init(e = {}, t = ".grid-stack") {
     if (typeof document > "u")
       return null;
-    const i = _.getGridElement(t);
-    return i ? (i.gridstack || (i.gridstack = new _(i, c.cloneDeep(e))), i.gridstack) : (console.error(typeof t == "string" ? 'GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
+    const i = w.getGridElement(t);
+    return i ? (i.gridstack || (i.gridstack = new w(i, c.cloneDeep(e))), i.gridstack) : (console.error(typeof t == "string" ? 'GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
 Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.` : "GridStack.init() no grid element was passed."), null);
   }
   /**
@@ -2788,8 +2801,8 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   static initAll(e = {}, t = ".grid-stack") {
     const i = [];
-    return typeof document > "u" || (_.getGridElements(t).forEach((s) => {
-      s.gridstack || (s.gridstack = new _(s, c.cloneDeep(e))), i.push(s.gridstack);
+    return typeof document > "u" || (w.getGridElements(t).forEach((s) => {
+      s.gridstack || (s.gridstack = new w(s, c.cloneDeep(e))), i.push(s.gridstack);
     }), i.length === 0 && console.error('GridStack.initAll() no grid was found with selector "' + t + `" - element missing or wrong selector ?
 Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the default selector.`)), i;
   }
@@ -2808,19 +2821,19 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       const o = i.gridstack;
       return t && (o.opts = { ...o.opts, ...t }), t.children !== void 0 && o.load(t.children), o;
     }
-    return (!e.classList.contains("grid-stack") || _.addRemoveCB) && (_.addRemoveCB ? i = _.addRemoveCB(e, t, !0, !0) : i = c.createDiv(["grid-stack", t.class], e)), _.init(t, i);
+    return (!e.classList.contains("grid-stack") || w.addRemoveCB) && (w.addRemoveCB ? i = w.addRemoveCB(e, t, !0, !0) : i = c.createDiv(["grid-stack", t.class], e)), w.init(t, i);
   }
   /** call this method to register your engine instead of the default one.
    * See instead `GridStackOptions.engineClass` if you only need to
    * replace just one instance.
    */
   static registerEngine(e) {
-    _.engineClass = e;
+    w.engineClass = e;
   }
   /** @internal create placeholder DIV as needed */
   get placeholder() {
     if (!this._placeholder) {
-      this._placeholder = c.createDiv([this.opts.placeholderClass, U.itemClass, this.opts.itemClass]);
+      this._placeholder = c.createDiv([this.opts.placeholderClass, G.itemClass, this.opts.itemClass]);
       const e = c.createDiv(["placeholder-content"], this._placeholder);
       this.opts.placeholderText && (e.textContent = this.opts.placeholderText);
     }
@@ -2847,24 +2860,24 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     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));
     const n = {
-      ...c.cloneDeep(U),
-      column: c.toNumber(e.getAttribute("gs-column")) || U.column,
-      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || U.minRow,
-      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || U.maxRow,
-      staticGrid: c.toBool(e.getAttribute("gs-static")) || U.staticGrid,
+      ...c.cloneDeep(G),
+      column: c.toNumber(e.getAttribute("gs-column")) || G.column,
+      minRow: i || c.toNumber(e.getAttribute("gs-min-row")) || G.minRow,
+      maxRow: i || c.toNumber(e.getAttribute("gs-max-row")) || G.maxRow,
+      staticGrid: c.toBool(e.getAttribute("gs-static")) || G.staticGrid,
       sizeToContent: c.toBool(e.getAttribute("gs-size-to-content")) || void 0,
       draggable: {
-        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || U.draggable.handle
+        handle: (t.handleClass ? "." + t.handleClass : t.handle ? t.handle : "") || G.draggable.handle
       },
       removableOptions: {
-        accept: t.itemClass || U.removableOptions.accept,
-        decline: U.removableOptions.decline
+        accept: t.itemClass || G.removableOptions.accept,
+        decline: G.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("." + U.itemClass), h = d == null ? void 0 : d.gridstackNode;
-    h && (h.subGrid = this, this.parentGridNode = h, this.el.classList.add("grid-stack-nested"), h.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== U.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = j), this._styleSheetClass = "gs-id-" + Z._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
-    const a = t.engineClass || _.engineClass || Z;
+    const d = this.el.closest("." + G.itemClass), h = d == null ? void 0 : d.gridstackNode;
+    h && (h.subGrid = this, this.parentGridNode = h, this.el.classList.add("grid-stack-nested"), h.el.classList.add("grid-stack-sub-grid")), this._isAutoCellHeight = t.cellHeight === "auto", this._isAutoCellHeight || t.cellHeight === "initial" ? this.cellHeight(void 0, !1) : (typeof t.cellHeight == "number" && t.cellHeightUnit && t.cellHeightUnit !== G.cellHeightUnit && (t.cellHeight = t.cellHeight + t.cellHeightUnit, delete t.cellHeightUnit), this.cellHeight(t.cellHeight, !1)), t.alwaysShowResizeHandle === "mobile" && (t.alwaysShowResizeHandle = Q), this._styleSheetClass = "gs-id-" + ee._idSeq++, this.el.classList.add(this._styleSheetClass), this._setStaticClass();
+    const a = t.engineClass || w.engineClass || ee;
     if (this.engine = new a({
       column: this.getColumn(),
       float: t.float,
@@ -2905,7 +2918,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (e.ELEMENT_NODE)
       return console.error("V11: GridStack.addWidget() does not support HTMLElement anymore. use makeWidget()"), this.makeWidget(e);
     let t, i = e;
-    if (i.grid = this, i != null && i.el ? t = i.el : _.addRemoveCB ? t = _.addRemoveCB(this.el, e, !0, !1) : t = c.createWidgetDivs(this.opts.itemClass, i), !t)
+    if (i.grid = this, i != null && i.el ? t = i.el : w.addRemoveCB ? t = w.addRemoveCB(this.el, e, !0, !1) : t = c.createWidgetDivs(this.opts.itemClass, i), !t)
       return;
     if (i = t.gridstackNode, i && t.parentElement === this.el && this.engine.nodes.find((r) => r._id === i._id))
       return t;
@@ -2944,11 +2957,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     let d;
     t.column === "auto" && (d = !0, t.column = Math.max(r.w || 1, (i == null ? void 0 : i.w) || 1), delete t.columnOpts);
     let h = r.el.querySelector(".grid-stack-item-content"), a, l;
-    if (s && (this._removeDD(r.el), l = { ...r, x: 0, y: 0 }, c.removeInternalForSave(l), delete l.subGridOpts, r.content && (l.content = r.content, delete r.content), _.addRemoveCB ? a = _.addRemoveCB(this.el, l, !0, !1) : (a = c.createDiv(["grid-stack-item"]), a.appendChild(h), h = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
-      const g = d ? t.column : r.w, R = r.h + i.h, S = r.el.style;
-      S.transition = "none", this.update(r.el, { w: g, h: R }), setTimeout(() => S.transition = null);
+    if (s && (this._removeDD(r.el), l = { ...r, x: 0, y: 0 }, c.removeInternalForSave(l), delete l.subGridOpts, r.content && (l.content = r.content, delete r.content), w.addRemoveCB ? a = w.addRemoveCB(this.el, l, !0, !1) : (a = c.createDiv(["grid-stack-item"]), a.appendChild(h), h = c.createDiv(["grid-stack-item-content"], r.el)), this._prepareDragDropByNode(r)), i) {
+      const g = d ? t.column : r.w, R = r.h + i.h, k = r.el.style;
+      k.transition = "none", this.update(r.el, { w: g, h: R }), setTimeout(() => k.transition = null);
     }
-    const f = r.subGrid = _.addGrid(h, t);
+    const f = r.subGrid = w.addGrid(h, t);
     return i != null && i._moving && (f._isTemp = !0), d && (f._autoColumn = !0), s && f.makeWidget(a, l), i && (i._moving ? window.setTimeout(() => c.simulateMouseEvent(i._event, "mouseenter", f.el), 0) : f.makeWidget(r.el, r)), this.resizeToContentCheck(!1, r), f;
   }
   /**
@@ -2971,7 +2984,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param saveCB callback for each node -> widget, so application can insert additional data to be saved into the widget data structure.
    * @returns list of widgets or full grid option, including .children list of widgets
    */
-  save(e = !0, t = !1, i = _.saveCB) {
+  save(e = !0, t = !1, i = w.saveCB) {
     const s = this.engine.save(e, i);
     if (s.forEach((r) => {
       var o;
@@ -2987,7 +3000,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, U), r.children = s, r;
+      return delete r._alwaysShowResizeHandle, o !== void 0 ? r.alwaysShowResizeHandle = o : delete r.alwaysShowResizeHandle, c.removeInternalAndSame(r, G), r.children = s, r;
     }
     return s;
   }
@@ -3001,7 +3014,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @example
    * see http://gridstackjs.com/demo/serialization.html
    */
-  load(e, t = _.addRemoveCB || !0) {
+  load(e, t = w.addRemoveCB || !0) {
     var h;
     e = c.cloneDeep(e);
     const i = this.getColumn();
@@ -3012,15 +3025,15 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     e.forEach((a) => {
       s = Math.max(s, (a.x || 0) + a.w);
     }), s > this.engine.defaultColumn && (this.engine.defaultColumn = s), s > i && this.engine.cacheLayout(e, s, !0);
-    const r = _.addRemoveCB;
-    typeof t == "function" && (_.addRemoveCB = t);
+    const r = w.addRemoveCB;
+    typeof t == "function" && (w.addRemoveCB = t);
     const o = [];
     this.batchUpdate();
     const n = !this.engine.nodes.length;
     n && this.setAnimation(!1), !n && t && [...this.engine.nodes].forEach((l) => {
       if (!l.id)
         return;
-      c.find(e, l.id) || (_.addRemoveCB && _.addRemoveCB(this.el, l, !1, !1), o.push(l), this.removeWidget(l.el, !0, !1));
+      c.find(e, l.id) || (w.addRemoveCB && w.addRemoveCB(this.el, l, !1, !1), o.push(l), this.removeWidget(l.el, !0, !1));
     }), this.engine._loading = !0;
     const d = [];
     return this.engine.nodes = this.engine.nodes.filter((a) => c.find(e, a.id) ? (d.push(a), !1) : !0), e.forEach((a) => {
@@ -3032,7 +3045,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           m && m.gridstack && m.gridstack.load(a.subGridOpts.children);
         }
       } else t && this.addWidget(a);
-    }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? _.addRemoveCB = r : delete _.addRemoveCB, n && ((h = this.opts) != null && h.animate) && this.setAnimation(this.opts.animate, !0), this;
+    }), delete this.engine._loading, this.engine.removedNodes = o, this.batchUpdate(!1), delete this._ignoreLayoutsNodeChange, delete this.engine.skipCacheUpdate, r ? w.addRemoveCB = r : delete w.addRemoveCB, n && ((h = this.opts) != null && h.animate) && this.setAnimation(this.opts.animate, !0), this;
   }
   /**
    * use before calling a bunch of `addWidget()` to prevent un-necessary relayouts in between (more efficient)
@@ -3221,7 +3234,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * grid.makeWidget('2', {w:2, content: 'hello'});
    */
   makeWidget(e, t) {
-    const i = _.getElement(e);
+    const i = w.getElement(e);
     if (!i)
       return;
     i.parentElement || this.el.appendChild(i), this._prepareElement(i, !0, t);
@@ -3253,11 +3266,11 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param triggerEvent if `false` (quiet mode) element will not be added to removed list and no 'removed' callbacks will be called (Default? true).
    */
   removeWidget(e, t = !0, i = !0) {
-    return e ? (_.getElements(e).forEach((s) => {
+    return e ? (w.getElements(e).forEach((s) => {
       if (s.parentElement && s.parentElement !== this.el)
         return;
       let r = s.gridstackNode;
-      r || (r = this.engine.nodes.find((o) => s === o.el)), r && (t && _.addRemoveCB && _.addRemoveCB(this.el, r, !1, !1), delete s.gridstackNode, this._removeDD(s), this.engine.removeNode(r, t, i), t && s.parentElement && s.remove());
+      r || (r = this.engine.nodes.find((o) => s === o.el)), r && (t && w.addRemoveCB && w.addRemoveCB(this.el, r, !1, !1), delete s.gridstackNode, this._removeDD(s), this.engine.removeNode(r, t, i), t && s.parentElement && s.remove());
     }), i && (this._triggerRemoveEvent(), this._triggerChangeEvent()), this) : (console.error("Error: GridStack.removeWidget(undefined) called"), this);
   }
   /**
@@ -3267,7 +3280,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    */
   removeAll(e = !0, t = !0) {
     return this.engine.nodes.forEach((i) => {
-      e && _.addRemoveCB && _.addRemoveCB(this.el, i, !1, !1), delete i.el.gridstackNode, this.opts.staticGrid || this._removeDD(i.el);
+      e && w.addRemoveCB && w.addRemoveCB(this.el, i, !1, !1), delete i.el.gridstackNode, this.opts.staticGrid || this._removeDD(i.el);
     }), this.engine.removeAll(e, t), t && this._triggerRemoveEvent(), this;
   }
   /**
@@ -3308,7 +3321,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       let s = 1;
       return t = { x: i[s++], y: i[s++], w: i[s++], h: i[s++] }, this.update(e, t);
     }
-    return _.getElements(e).forEach((i) => {
+    return w.getElements(e).forEach((i) => {
       var a;
       const s = i == null ? void 0 : i.gridstackNode;
       if (!s)
@@ -3321,7 +3334,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         n[l] = r[l] !== void 0 ? r[l] : s[l], delete r[l];
       })), !n && (r.minW || r.minH || r.maxW || r.maxH) && (n = {}), r.content !== void 0) {
         const l = i.querySelector(".grid-stack-item-content");
-        l && l.textContent !== r.content && (s.content = r.content, _.renderCB(l, r), (a = s.subGrid) != null && a.el && (l.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
+        l && l.textContent !== r.content && (s.content = r.content, w.renderCB(l, r), (a = s.subGrid) != null && a.el && (l.appendChild(s.subGrid.el), s.subGrid.opts.styleInHead || s.subGrid._updateStyles(!0))), delete r.content;
       }
       let d = !1, h = !1;
       for (const l in r)
@@ -3357,7 +3370,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
     if (!s)
       return;
     let r = t.h ? t.h * s : e.clientHeight, o;
-    if (t.resizeToContentParent && (o = e.querySelector(t.resizeToContentParent)), o || (o = e.querySelector(_.resizeToContentParent)), !o)
+    if (t.resizeToContentParent && (o = e.querySelector(t.resizeToContentParent)), o || (o = e.querySelector(w.resizeToContentParent)), !o)
       return;
     const n = e.clientHeight - o.clientHeight, d = t.h ? t.h * s - n : o.clientHeight;
     let h;
@@ -3371,7 +3384,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
       {
         const p = o.firstElementChild;
         if (!p) {
-          console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${_.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
+          console.error(`Error: GridStack.resizeToContent() widget id:${t.id} '${w.resizeToContentParent}'.firstElementChild is null, make sure to have a div like container. Skipping sizing.`);
           return;
         }
         h = p.getBoundingClientRect().height || d;
@@ -3386,14 +3399,14 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** call the user resize (so they can do extra work) else our build in version */
   resizeToContentCBCheck(e) {
-    _.resizeToContentCB ? _.resizeToContentCB(e) : this.resizeToContent(e);
+    w.resizeToContentCB ? w.resizeToContentCB(e) : this.resizeToContent(e);
   }
   /** rotate (by swapping w & h) the passed in node - called when user press 'r' during dragging
    * @param els  widget or selector of objects to modify
    * @param relative optional pixel coord relative to upper/left corner to rotate around (will keep that cell under cursor)
    */
   rotate(e, t) {
-    return _.getElements(e).forEach((i) => {
+    return w.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       if (!c.canBeRotated(s))
         return;
@@ -3534,7 +3547,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(U.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(G.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), this._prepareDragDropByNode(i), this;
   }
@@ -3620,7 +3633,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   }
   /** @internal */
   static getGridElement(e) {
-    return _.getElement(e);
+    return w.getElement(e);
   }
   /** @internal */
   static getGridElements(e) {
@@ -3638,7 +3651,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 P;
+    return B;
   }
   /**
    * call to setup dragging in from the outside (say toolbar), by specifying the class selection and options.
@@ -3651,7 +3664,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 && (b.pauseDrag = t.pause), t = { appendTo: "body", helper: "clone", ...t || {} }, (typeof e == "string" ? c.getElements(e, s) : e).forEach((o, n) => {
-      P.isDraggable(o) || P.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
+      B.isDraggable(o) || B.dragIn(o, t), i != null && i[n] && (o.gridstackNode = i[n]);
     });
   }
   /**
@@ -3661,7 +3674,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param val if true widget will be draggable, assuming the parent grid isn't noMove or static.
    */
   movable(e, t) {
-    return this.opts.staticGrid ? this : (_.getElements(e).forEach((i) => {
+    return this.opts.staticGrid ? this : (w.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       s && (t ? delete s.noMove : s.noMove = !0, this._prepareDragDropByNode(s));
     }), this);
@@ -3672,7 +3685,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
    * @param val  if true widget will be resizable, assuming the parent grid isn't noResize or static.
    */
   resizable(e, t) {
-    return this.opts.staticGrid ? this : (_.getElements(e).forEach((i) => {
+    return this.opts.staticGrid ? this : (w.getElements(e).forEach((i) => {
       const s = i.gridstackNode;
       s && (t ? delete s.noResize : s.noResize = !0, this._prepareDragDropByNode(s));
     }), this);
@@ -3726,16 +3739,16 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
   cancelDrag() {
     var t;
     const e = (t = this._placeholder) == null ? void 0 : t.gridstackNode;
-    e && (e._isExternal ? (e._isAboutToRemove = !0, this.engine.removeNode(e)) : e._isAboutToRemove && _._itemRemoving(e.el, !1), this.engine.restoreInitial());
+    e && (e._isExternal ? (e._isAboutToRemove = !0, this.engine.removeNode(e)) : e._isAboutToRemove && w._itemRemoving(e.el, !1), this.engine.restoreInitial());
   }
   /** @internal removes any drag&drop present (called during destroy) */
   _removeDD(e) {
-    return P.draggable(e, "destroy").resizable(e, "destroy"), e.gridstackNode && delete e.gridstackNode._initDD, delete e.ddElement, this;
+    return B.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 P.droppable(this.el, "destroy"), this;
+      return B.droppable(this.el, "destroy"), this;
     let e, t;
     const i = (s, r, o) => {
       var f;
@@ -3760,7 +3773,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(h / 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)) {
-            P.off(r, "drag");
+            B.off(r, "drag");
             return;
           }
           n._willFitPos && (c.copyPos(n, n._willFitPos), delete n._willFitPos);
@@ -3769,7 +3782,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 P.droppable(this.el, {
+    return B.droppable(this.el, {
       accept: (s) => {
         const r = s.gridstackNode || this._readAttr(s, !1);
         if ((r == null ? void 0 : r.grid) === this)
@@ -3808,7 +3821,7 @@ 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, h = 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, 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 = h, n._temporaryRemoved = !0), _._itemRemoving(n.el, !1), P.on(r, "drag", i), i(s, r, o), !1;
+      n._temporaryRemoved = !0) : (n.w = d, n.h = h, n._temporaryRemoved = !0), w._itemRemoving(n.el, !1), B.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;
@@ -3826,10 +3839,10 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         const g = l.grid;
         g.engine.removeNodeFromLayoutCache(l), g.engine.removedNodes.push(l), g._triggerRemoveEvent()._triggerChangeEvent(), g.parentGridNode && !g.engine.nodes.length && g.opts.subGridDynamic && g.removeAsSubGrid();
       }
-      if (!n || (d && (this.engine.cleanupNode(n), n.grid = this), (m = n.grid) == null || delete m._isTemp, P.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), (m = n.grid) == null || delete m._isTemp, B.off(r, "drag"), o !== r ? (o.remove(), r = o) : r.remove(), this._removeDD(r), !d))
         return !1;
       const f = (y = (p = n.subGrid) == null ? void 0 : p.el) == null ? void 0 : y.gridstack;
-      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), h && (n.content || n.subGridOpts || _.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, l && l.grid ? l : void 0, n), a && this.setAnimation(this.opts.animate, !0), !1;
+      return c.copyPos(n, this._readAttr(this.placeholder)), c.removePositioningStyles(r), h && (n.content || n.subGridOpts || w.addRemoveCB) ? (delete n.el, r = this.addWidget(n)) : (this._prepareElement(r, !0, n), this.el.appendChild(r), this.resizeToContentCheck(!1, n), f && (f.parentGridNode = n, f.opts.styleInHead || f._updateStyles(!0)), this._updateContainerHeight()), this.engine.addedNodes.push(n), this._triggerAddEvent(), this._triggerChangeEvent(), this.engine.endUpdate(), this._gsEventHandler.dropped && this._gsEventHandler.dropped({ ...s, type: "dropped" }, l && l.grid ? l : void 0, n), a && this.setAnimation(this.opts.animate, !0), !1;
     }), this;
   }
   /** @internal mark item for removal */
@@ -3844,7 +3857,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 && !P.isDroppable(e) && P.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 && !B.isDroppable(e) && B.droppable(e, this.opts.removableOptions).on(e, "dropover", (t, i) => w._itemRemoving(i, !0)).on(e, "dropout", (t, i) => w._itemRemoving(i, !1)), this) : this;
   }
   /** @internal prepares the element for drag&drop */
   _prepareDragDropByNode(e) {
@@ -3869,7 +3882,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
           this._extraDragRow = 0, this._updateContainerHeight(), this._triggerChangeEvent(), this.engine.endUpdate(), a.type === "resizestop" && (Number.isInteger(e.sizeToContent) && (e.sizeToContent = e.h), this.resizeToContentCheck(l, e));
         }
       };
-      P.draggable(t, {
+      B.draggable(t, {
         start: n,
         stop: h,
         drag: d
@@ -3879,7 +3892,7 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         resize: d
       }), e._initDD = !0;
     }
-    return P.draggable(t, i ? "disable" : "enable").resizable(t, s ? "disable" : "enable"), this;
+    return B.draggable(t, i ? "disable" : "enable").resizable(t, s ? "disable" : "enable"), this;
   }
   /** @internal handles actual drag/resize start */
   _onStartMoving(e, t, i, s, r, o) {
@@ -3898,7 +3911,7 @@ 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, h = (this.opts.maxRow || Number.MAX_SAFE_INTEGER) - s.y;
-      P.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, h)).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, h)).resizable(e, "option", "maxHeightMoveUp", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
+      B.resizable(e, "option", "minWidth", r * Math.min(s.minW || 1, d)).resizable(e, "option", "minHeight", o * Math.min(s.minH || 1, h)).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, h)).resizable(e, "option", "maxHeightMoveUp", o * Math.min(s.maxH || Number.MAX_SAFE_INTEGER, s.y + s.h));
     }
   }
   /** @internal handles actual drag/resize */
@@ -3911,16 +3924,16 @@ Note: ".grid-stack" is required for proper CSS styling and drag/drop, and is the
         return;
       const g = i.position.top - s._prevYPix;
       s._prevYPix = i.position.top, this.opts.draggable.scroll !== !1 && c.updateScrollPosition(e, i.position, g);
-      const R = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : h), S = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
-      n.x = Math.round(R / r), n.y = Math.round(S / o);
-      const C = this._extraDragRow;
+      const R = i.position.left + (i.position.left > s._lastUiPosition.left ? -a : h), k = i.position.top + (i.position.top > s._lastUiPosition.top ? -f : l);
+      n.x = Math.round(R / r), n.y = Math.round(k / o);
+      const E = this._extraDragRow;
       if (this.engine.collide(s, n)) {
-        const x = this.getRow();
-        let E = Math.max(0, n.y + s.h - x);
-        this.opts.maxRow && x + E > this.opts.maxRow && (E = Math.max(0, this.opts.maxRow - x)), this._extraDragRow = E;
+        const L = this.getRow();
+        let D = Math.max(0, n.y + s.h - L);
+        this.opts.maxRow && L + D > this.opts.maxRow && (D = Math.max(0, this.opts.maxRow - L)), this._extraDragRow = D;
       } else
         this._extraDragRow = 0;
-      if (this._extraDragRow !== C && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
+      if (this._extraDragRow !== E && this._updateContainerHeight(), s.x === n.x && s.y === n.y)
         return;
     } else if (t.type === "resize") {
       if (n.x < 0 || (c.updateScrollResize(t, e, o), n.w = Math.round((i.size.width - h) / r), n.h = Math.round((i.size.height - l) / o), s.w === n.w && s.h === n.h) || s._lastTried && s._lastTried.w === n.w && s._lastTried.h === n.h)
@@ -3948,21 +3961,21 @@ 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;
-    i && (t.style.transform = t.style.transformOrigin = null, P.off(e, "drag"), !i._temporaryRemoved && (i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e, i._isExternal && this.engine.cleanupNode(i), this.opts.removable === !0 && _._itemRemoving(e, !0), e._gridstackNodeOrig ? (e.gridstackNode = e._gridstackNodeOrig, delete e._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial()));
+    i && (t.style.transform = t.style.transformOrigin = null, B.off(e, "drag"), !i._temporaryRemoved && (i._temporaryRemoved = !0, this.engine.removeNode(i), i.el = i._isExternal && t ? t : e, i._isExternal && this.engine.cleanupNode(i), this.opts.removable === !0 && w._itemRemoving(e, !0), e._gridstackNodeOrig ? (e.gridstackNode = e._gridstackNodeOrig, delete e._gridstackNodeOrig) : i._isExternal && this.engine.restoreInitial()));
   }
   // legacy method removed
   commit() {
-    return Ui(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
+    return Gi(this, this.batchUpdate(!1), "commit", "batchUpdate", "5.2"), this;
   }
 }
-_.renderCB = (u, e) => {
+w.renderCB = (u, e) => {
   u && (e != null && e.content) && (u.textContent = e.content);
 };
-_.resizeToContentParent = ".grid-stack-item-content";
-_.Utils = c;
-_.Engine = Z;
-_.GDRev = "11.3.0";
-const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { class: "grid-stack-item-content" }, Xi = /* @__PURE__ */ G({
+w.resizeToContentParent = ".grid-stack-item-content";
+w.Utils = c;
+w.Engine = ee;
+w.GDRev = "11.3.0";
+const Yi = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Xi = { class: "grid-stack-item-content" }, ji = /* @__PURE__ */ W({
   __name: "DraggableGridLayout",
   props: {
     tiles: {},
@@ -3971,7 +3984,7 @@ const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { cl
   },
   emits: ["update-tiles"],
   setup(u, { expose: e, emit: t }) {
-    const i = u, s = t, r = $(null), o = $(new Map(i.tiles.map((m) => [`${m.id}`, m])));
+    const i = u, s = t, r = U(null), o = U(new Map(i.tiles.map((m) => [`${m.id}`, m])));
     let n = null;
     const d = (m) => `[data-id="${m}"]`, h = (m) => m.map((p) => {
       var g;
@@ -3994,14 +4007,14 @@ const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { cl
         o.value.delete(`${(g = y.el) == null ? void 0 : g.getAttribute("data-id")}`);
       }), s("update-tiles", Array.from(o.value.values()));
     };
-    We(() => {
-      r.value && (n = _.init({
+    Ve(() => {
+      r.value && (n = w.init({
         column: i.gridSize.cols,
         cellHeight: i.tileHeight,
         resizable: { handles: "se, sw" },
         handle: ".tile-header"
       }, r.value), n.on("change", a), n.on("added", a), n.on("removed", l));
-    }), $e(() => {
+    }), Ue(() => {
       n && n.destroy(!1);
     });
     const f = (m) => {
@@ -4014,22 +4027,22 @@ const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { cl
       if (m > p && n) {
         const y = i.tiles.slice(p);
         for (const g of y)
-          o.value.set(`${g.id}`, g), await yt(), n.makeWidget(d(g.id), {
+          o.value.set(`${g.id}`, g), await vt(), n.makeWidget(d(g.id), {
             autoPosition: !0,
             w: g.layout.size.cols,
             h: g.layout.size.rows
           });
       }
-    }), gt(() => {
+    }), mt(() => {
       i.tiles.forEach((m) => {
         o.value.set(`${m.id}`, m);
       });
-    }), e({ removeWidget: f }), (m, p) => (z(), F("div", {
+    }), e({ removeWidget: f }), (m, p) => (C(), F("div", {
       ref_key: "gridContainer",
       ref: r,
       class: "grid-stack"
     }, [
-      (z(!0), F(_t, null, wt(i.tiles, (y) => (z(), F("div", {
+      (C(!0), F(wt, null, bt(i.tiles, (y) => (C(), F("div", {
         key: y.id,
         class: "grid-stack-item",
         "data-id": `${y.id}`,
@@ -4040,46 +4053,46 @@ const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { cl
         "gs-x": y.layout.position.col,
         "gs-y": y.layout.position.row
       }, [
-        le("div", Yi, [
-          Le(m.$slots, "tile", { tile: y }, void 0, !0)
+        ce("div", Xi, [
+          Me(m.$slots, "tile", { tile: y }, void 0, !0)
         ])
-      ], 8, Ki))), 128))
+      ], 8, Yi))), 128))
     ], 512));
   }
-}), ji = /* @__PURE__ */ ae(Xi, [["__scopeId", "data-v-f4f87f74"]]), Qi = { class: "kong-ui-public-dashboard-renderer" }, Zi = {
+}), Qi = /* @__PURE__ */ he(ji, [["__scopeId", "data-v-f4f87f74"]]), Zi = { class: "kong-ui-public-dashboard-renderer" }, Ji = {
   key: 0,
   class: "tile-container slottable-tile"
-}, Ji = /* @__PURE__ */ G({
+}, es = /* @__PURE__ */ W({
   __name: "DashboardRenderer",
-  props: /* @__PURE__ */ tt({
+  props: /* @__PURE__ */ it({
     context: {}
   }, {
     modelValue: { required: !0 },
     modelModifiers: {}
   }),
-  emits: /* @__PURE__ */ tt(["edit-tile", "zoom-time-range"], ["update:modelValue"]),
+  emits: /* @__PURE__ */ it(["edit-tile", "zoom-time-range"], ["update:modelValue"]),
   setup(u, { expose: e, emit: t }) {
-    const i = u, s = t, r = Bt(u, "modelValue"), { i18n: o } = ge.useI18n(), n = $(0), d = $(null), h = me(oe);
-    h || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), ge.useRequestQueue();
-    const a = Et(), l = A(() => i.context.timeSpec ? i.context.timeSpec : {
+    const i = u, s = t, r = $t(u, "modelValue"), { i18n: o } = ve.useI18n(), n = U(0), d = U(null), h = _e(le);
+    h || (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/dashboard-renderer/README.md#requirements")), ve.useRequestQueue();
+    const a = xt(), l = O(() => i.context.timeSpec ? i.context.timeSpec : {
       type: "relative",
       time_range: a.defaultQueryTimeForOrg
-    }), f = A(() => !!i.context.timeSpec || !a.loading), m = (x, E) => {
-      const D = x.layout.position.row - E.layout.position.row;
-      return D !== 0 ? D : x.layout.position.col - E.layout.position.col;
-    }, p = A(() => r.value.tiles.map((x, E) => {
-      var B;
-      let D = x.definition;
-      if ("description" in D.chart) {
-        const I = (B = D.chart.description) == null ? void 0 : B.replace(ui, () => {
-          const w = `renderer.trendRange.${l.value.type === "absolute" ? "custom" : l.value.time_range}`;
-          return o.te(w) ? o.t(w) : "";
+    }), f = O(() => !!i.context.timeSpec || !a.loading), m = (x, N) => {
+      const z = x.layout.position.row - N.layout.position.row;
+      return z !== 0 ? z : x.layout.position.col - N.layout.position.col;
+    }, p = O(() => r.value.tiles.map((x) => {
+      var z;
+      let N = x.definition;
+      if ("description" in N.chart) {
+        const q = (z = N.chart.description) == null ? void 0 : z.replace(ci, () => {
+          const v = `renderer.trendRange.${l.value.type === "absolute" ? "custom" : l.value.time_range}`;
+          return o.te(v) ? o.t(v) : "";
         });
-        D = {
-          ...D,
+        N = {
+          ...N,
           chart: {
-            ...D.chart,
-            description: I
+            ...N.chart,
+            description: q
           }
         };
       }
@@ -4089,83 +4102,103 @@ const Ki = ["data-id", "data-testid", "gs-h", "gs-w", "gs-x", "gs-y"], Yi = { cl
         x
       ), {
         layout: x.layout,
-        meta: D,
+        meta: N,
         // Add a unique key to each tile internally.
         id: x.id ?? crypto.randomUUID()
       };
-    })), y = A(() => {
-      let { tz: x, refreshInterval: E, editable: D } = i.context;
-      return x || (x = new Intl.DateTimeFormat().resolvedOptions().timeZone), E === void 0 && (E = ci), D === void 0 && (D = !1), {
+    })), y = O(() => {
+      let { tz: x, refreshInterval: N, editable: z } = i.context;
+      return x || (x = new Intl.DateTimeFormat().resolvedOptions().timeZone), N === void 0 && (N = fi), z === void 0 && (z = !1), {
         ...i.context,
         tz: x,
         timeSpec: l.value,
-        refreshInterval: E,
-        editable: D
+        refreshInterval: N,
+        editable: z
       };
     }), g = (x) => {
       s("edit-tile", x);
-    }, R = (x) => {
+    }, R = (x) => x.type === "slottable", k = (x) => {
+      const N = R(x.meta.chart) ? { ...x.meta.chart } : {
+        ...x.meta.chart,
+        chartTitle: x.meta.chart.chartTitle ? `Copy of ${x.meta.chart.chartTitle}` : ""
+      }, z = {
+        id: crypto.randomUUID(),
+        definition: {
+          ...x.meta,
+          chart: N
+        },
+        layout: {
+          position: {
+            col: 0,
+            row: 0
+          },
+          size: x.layout.size
+        }
+      };
+      r.value.tiles.push(z);
+    }, E = (x) => {
       d.value && d.value.removeWidget(x.id);
-    }, S = () => {
+    }, L = () => {
       n.value++;
-    }, C = (x) => {
-      const E = x.map((D) => ({
-        id: D.id,
-        layout: D.layout,
-        definition: D.meta
+    }, D = (x) => {
+      const N = x.map((z) => ({
+        id: z.id,
+        layout: z.layout,
+        definition: z.meta
       }));
-      r.value.gridSize.rows = Math.max(1, ...E.map((D) => D.layout.position.row + D.layout.size.rows)), r.value.tiles = E.sort(m);
+      r.value.gridSize.rows = Math.max(1, ...N.map((z) => z.layout.position.row + z.layout.size.rows)), r.value.tiles = N.sort(m);
     };
-    return e({ refresh: S }), (x, E) => {
-      const D = ne("KAlert");
-      return z(), F("div", Qi, [
-        k(h) ? (z(), H(vt(x.context.editable ? ji : Fi), {
+    return e({ refresh: L }), (x, N) => {
+      const z = oe("KAlert");
+      return C(), F("div", Zi, [
+        S(h) ? (C(), H(_t(x.context.editable ? Qi : Fi), {
           key: 1,
           ref_key: "gridLayoutRef",
           ref: d,
           "grid-size": r.value.gridSize,
           "tile-height": r.value.tileHeight,
           tiles: p.value,
-          onUpdateTiles: C
+          onUpdateTiles: D
         }, {
-          tile: M(({ tile: B }) => [
-            B.meta.chart.type === "slottable" ? (z(), F("div", Zi, [
-              Le(x.$slots, B.meta.chart.id, {}, void 0, !0)
-            ])) : (z(), H(qi, {
+          tile: P(({ tile: q }) => [
+            q.meta.chart.type === "slottable" ? (C(), F("div", Ji, [
+              Me(x.$slots, q.meta.chart.id, {}, void 0, !0)
+            ])) : (C(), H(Bi, {
               key: 1,
               class: "tile-container",
               context: y.value,
-              definition: B.meta,
-              height: B.layout.size.rows * (r.value.tileHeight || k(Ve)) + parseInt(k(At), 10),
+              definition: q.meta,
+              height: q.layout.size.rows * (r.value.tileHeight || S(Ke)) + parseInt(S(Ht), 10),
               "query-ready": f.value,
               "refresh-counter": n.value,
-              "tile-id": B.id,
-              onEditTile: (I) => g(B),
-              onRemoveTile: (I) => R(B),
-              onZoomTimeRange: E[0] || (E[0] = (I) => s("zoom-time-range", I))
-            }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onEditTile", "onRemoveTile"]))
+              "tile-id": q.id,
+              onDuplicateTile: (ae) => k(q),
+              onEditTile: (ae) => g(q),
+              onRemoveTile: (ae) => E(q),
+              onZoomTimeRange: N[0] || (N[0] = (ae) => s("zoom-time-range", ae))
+            }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "tile-id", "onDuplicateTile", "onEditTile", "onRemoveTile"]))
           ]),
           _: 3
-        }, 40, ["grid-size", "tile-height", "tiles"])) : (z(), H(D, {
+        }, 40, ["grid-size", "tile-height", "tiles"])) : (C(), H(z, {
           key: 0,
           appearance: "danger"
         }, {
-          default: M(() => [
-            ve(te(k(o).t("renderer.noQueryBridge")), 1)
+          default: P(() => [
+            ue(J(S(o).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), ds = /* @__PURE__ */ ae(Ji, [["__scopeId", "data-v-d96885ca"]]);
+}), us = /* @__PURE__ */ he(es, [["__scopeId", "data-v-d31fa719"]]);
 export {
-  di as CP_ID_TOKEN,
-  Ve as DEFAULT_TILE_HEIGHT,
-  ci as DEFAULT_TILE_REFRESH_INTERVAL_MS,
-  ds as DashboardRenderer,
-  st as ENTITY_ID_TOKEN,
+  ui as CP_ID_TOKEN,
+  Ke as DEFAULT_TILE_HEIGHT,
+  fi as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  us as DashboardRenderer,
+  rt as ENTITY_ID_TOKEN,
   Fi as GridLayout,
-  oe as INJECT_QUERY_PROVIDER,
-  ui as TIMEFRAME_TOKEN
+  le as INJECT_QUERY_PROVIDER,
+  ci as TIMEFRAME_TOKEN
 };